/* ========================================================================== Premium Admin Skin for AdminLTE File: public/css/app-premium.css -------------------------------------------------------------------------- Clean, modern, accessible design w/ subtle depth and smooth interactions. Easily customize via CSS variables below. ========================================================================== */ :root { /* Brand palette */ --brand: #4f46e5; /* Indigo 600 */ --brand-600: #4f46e5; --brand-700: #4338ca; --brand-50: #eef2ff; /* Neutrals */ --bg: #f7f8fc; --panel: #ffffff; --panel-contrast: #0f172a; --muted: #6b7280; /* Accents */ --success: #10b981; --warning: #f59e0b; --danger: #ef4444; --info: #0ea5e9; /* Borders & shadows */ --border: #e6e8f0; --radius: 14px; --radius-sm: 10px; --ring: rgba(79, 70, 229, 0.35); /* Typography */ --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; --h1: 1.75rem; --h2: 1.325rem; --h3: 1.05rem; --text: 0.94rem; } /* Optional dark theme support – add class .dark-theme to to enable */ body.dark-theme { --bg: #0b1220; --panel: #0f172a; --panel-contrast: #e5e7eb; --muted: #9aa3b2; --border: #1f2937; --ring: rgba(99, 102, 241, 0.45); } /* Base ------------------------------------------------------------- */ html, body { background: var(--bg); color: var(--panel-contrast); font-family: var(--font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: var(--text); } a { color: var(--brand); } a:hover { color: var(--brand-700); text-decoration: none; } /* Header (Navbar) -------------------------------------------------- */ .main-header.navbar { background: var(--panel); border-bottom: 1px solid var(--border); box-shadow: 0 6px 24px rgba(15, 23, 42, 0.06); } .navbar-nav .nav-link { padding: 0.65rem 0.9rem; border-radius: 10px; transition: background 160ms ease, color 160ms ease; } .navbar-nav .nav-link:hover { background: var(--brand-50); color: var(--brand-700); } /* Sidebar ---------------------------------------------------------- */ .main-sidebar { background: #0f172a; /* slate-900 */ box-shadow: 6px 0 24px rgba(2, 6, 23, 0.2); } .brand-link { background: transparent !important; border-bottom: 1px solid rgba(255,255,255,0.06); } .sidebar .nav-sidebar > .nav-item > .nav-link { border-radius: 10px; margin: 2px 8px; padding: 10px 12px; color: rgba(255,255,255,0.82); transition: background 160ms ease, color 160ms ease, transform 120ms ease; } .sidebar .nav-sidebar > .nav-item > .nav-link:hover { background: rgba(255,255,255,0.06); color: #ffffff; transform: translateX(1px); } .sidebar .nav-sidebar > .nav-item > .nav-link.active { background: linear-gradient(135deg, var(--brand-700), var(--brand-600)); color: #fff; box-shadow: 0 4px 10px rgba(79,70,229,0.15), inset 0 1px 0 rgba(255,255,255,0.05); } /* ==== Sidebar submenu alignment fix ===================================== */ /* Keep top-level links with their rounded “pill” look, but make submenus align to the same gutter and indent cleanly under the parent. */ :root { --sidebar-gutter-x: 8px; /* matches your top-level .nav-link margin-x */ --submenu-indent: 26px; /* how much the child links are indented */ } /* Container of the submenu */ .sidebar .nav-sidebar .nav-treeview { /* margin: 6px var(--sidebar-gutter-x) 8px var(--sidebar-gutter-x); */ padding-left: 0; /* no extra padding on the ul */ background: transparent; border-left: 1px dashed rgba(255,255,255,0.12); /* subtle guide */ } /* Each submenu link */ .sidebar .nav-sidebar .nav-treeview > .nav-item > .nav-link { /* remove the 8px left/right margin used by top-level links */ margin: 2px 0; /* give a clean indent that matches the guide */ padding: 10px 12px 10px calc(12px + var(--submenu-indent)); border-radius: 8px; color: rgba(255,255,255,0.85); background: transparent; } /* Icon sizing/spacing so text lines up perfectly */ .sidebar .nav-sidebar .nav-treeview > .nav-item > .nav-link .nav-icon { width: 18px; min-width: 18px; text-align: center; margin-right: 8px; } /* Hover/active states for submenu (lighter than parent pills) */ .sidebar .nav-sidebar .nav-treeview > .nav-item > .nav-link:hover { background: rgba(255,255,255,0.06); color: #fff; } .sidebar .nav-sidebar .nav-treeview > .nav-item > .nav-link.active { background: rgba(79,70,229,0.25); /* brand tint */ color: #fff; box-shadow: none; /* keep it flat */ } /* Keep the caret aligned to the right edge on parents */ .sidebar .nav-sidebar .nav-link .right { margin-left: auto; } /* When a parent is open, keep its pill shape intact */ .sidebar .nav-sidebar .nav-item.menu-open > .nav-link { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } /* Optional: slightly pull the submenu in so it visually “belongs” to the parent */ /* .sidebar .nav-sidebar .nav-item.menu-open > .nav-treeview { padding-left: var(--submenu-indent); } */ /* Content Wrapper -------------------------------------------------- */ .content-wrapper { background: var(--bg); } /* Cards ------------------------------------------------------------ */ .card { border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06); overflow: hidden; } .card-header { background: linear-gradient(180deg, #ffffff, #fafbff); border-bottom: 1px solid var(--border); padding: 0.9rem 1.1rem; } .card-header.bg-dark, .card-header.bg-secondary { background: linear-gradient(135deg, var(--brand-700), var(--brand-600)) !important; border-bottom: none !important; } .card-header.bg-dark .card-title, .card-header.bg-secondary .card-title { color: #fff !important; } .card-title { font-size: var(--h2); font-weight: 700; margin: 0; letter-spacing: -0.01em; } /* Forms ------------------------------------------------------------ */ .form-control, .custom-select, .select2-container--default .select2-selection--single { border: 1px solid var(--border); border-radius: 10px; background: #fff; padding: 0.35rem 0.8rem; transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease; } .form-control:focus, .custom-select:focus, .select2-container--default .select2-selection--single:focus, .select2-container--default .select2-selection--multiple:focus { border-color: var(--brand-600); box-shadow: 0 0 0 4px var(--ring); outline: none; } .input-group-text { background: #fff; border: 1px solid var(--border); border-radius: 10px; } label { font-weight: 600; color: var(--muted); margin-bottom: 0.35rem; } /* Select2 (multi) */ .select2-container--default .select2-selection--multiple { border: 1px solid var(--border); border-radius: 10px; min-height: 42px; } .select2-container--default .select2-selection--multiple .select2-selection__choice { background: var(--brand-600); border-color: var(--brand-600); color: #fff; border-radius: 999px; padding: 2px 8px; margin-top: 6px; } /* Buttons ---------------------------------------------------------- */ .btn { border-radius: 10px; font-weight: 600; letter-spacing: .2px; padding: 0.55rem 0.95rem; transition: transform 80ms ease, box-shadow 150ms ease, background 150ms ease; } .btn:hover { transform: translateY(-1px); } .btn-dark, .btn-primary { background: linear-gradient(135deg, var(--brand-700), var(--brand-600)); border: 0; box-shadow: 0 8px 18px rgba(79,70,229,0.35); } .btn-dark:hover, .btn-primary:hover { filter: brightness(1.03); } .btn-outline-secondary { border: 1px solid var(--border); background: #fff; } .btn-danger { background: var(--danger); border-color: var(--danger); } .btn-success { background: var(--success); border-color: var(--success); } .btn-warning { background: var(--warning); border-color: var(--warning); color: #1f2937; } .btn-sm{ padding: 0.25rem 0.65rem; } /* Tables ----------------------------------------------------------- */ .table { background: var(--panel); border-collapse: separate; border-spacing: 0; } .table th, .table td { border-top: none; border-bottom: 1px solid var(--border); vertical-align: middle; } .table thead th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); background: #fafbff; border-bottom: 1px solid var(--border); } .table tbody tr:hover { background: #fafbff; } /* Datatables (if used) */ .dataTables_wrapper .dataTables_filter input { border-radius: 999px; padding: 0.45rem 0.9rem; } .dataTables_wrapper .dataTables_paginate .paginate_button.current { background: var(--brand-600) !important; color: #fff !important; border: none !important; box-shadow: 0 6px 14px rgba(79,70,229,0.35); border-radius: 8px; } /* Alerts ----------------------------------------------------------- */ .alert { border-radius: 12px; border: 1px solid var(--border); } .alert-success { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; } .alert-danger { background: #fef2f2; color: #991b1b; border-color: #fecaca; } /* Breadcrumb / Header --------------------------------------------- */ .content-header h1 { font-size: var(--h1); font-weight: 800; letter-spacing: -0.02em; } .content-header h1 small { font-size: 0.92rem; font-weight: 600; color: var(--muted); } /* Cards inside forms (sections) ----------------------------------- */ .card .card { /* nested card */ border-radius: var(--radius-sm); } /* Modals ----------------------------------------------------------- */ .modal-content { border-radius: 16px; border: 1px solid var(--border); box-shadow: 0 24px 48px rgba(2,6,23,0.25); } .modal-header { border-bottom: 1px solid var(--border); } .modal-footer { border-top: 1px solid var(--border); } /* Badges / Pills --------------------------------------------------- */ .badge { border-radius: 999px; padding: .45em .7em; font-weight: 600; } .badge-primary { background: var(--brand-600); } /* Utilities -------------------------------------------------------- */ .shadow-ring { box-shadow: 0 0 0 4px var(--ring) !important; } .rounded-xl { border-radius: var(--radius) !important; } .rounded-lg { border-radius: 12px !important; } .text-muted-2 { color: var(--muted) !important; } /* Footer spacing if you add one later ------------------------------ */ .main-footer { background: var(--panel); border-top: 1px solid var(--border); } /* Login box (if using AdminLTE auth views) ------------------------ */ .login-page, .register-page { background: radial-gradient(1200px 600px at 10% 10%, #f4f6ff 0%, rgba(244,246,255,0) 60%) , var(--bg); } .login-card-body, .register-card-body { border-radius: var(--radius); border: 1px solid var(--border); box-shadow: 0 20px 40px rgba(15,23,42,0.08); } /* Accessibility: focus -------------------------------------------- */ :focus-visible { outline: none; box-shadow: 0 0 0 4px var(--ring); border-radius: 8px; } /* Transitions ------------------------------------------------------ */ * { transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 160ms ease; }