/* ========================================================= Project Registry — Design System Refined UI • Light + Dark theme • Bootstrap 5 overrides (Fonts are loaded via in the layout .) ========================================================= */ /* ── Design Tokens ──────────────────────────────────────── */ :root { /* Brand palette */ --brand-50: #eff6ff; --brand-100: #dbeafe; --brand-200: #bfdbfe; --brand-400: #60a5fa; --brand-500: #3b82f6; --brand-600: #2563eb; --brand-700: #1d4ed8; --primary: var(--brand-600); --primary-hover: var(--brand-700); --success: #16a34a; --warning: #d97706; --danger: #dc2626; --info: #0891b2; /* Layout metrics */ --sidebar-width: 250px; --sidebar-rail: 74px; --topbar-height: 60px; --border-radius: 0.65rem; --radius-sm: 0.45rem; --radius-lg: 1rem; --font-sans: 'Inter', 'Noto Sans Thai', system-ui, -apple-system, sans-serif; /* ── Light theme surfaces ── */ --page-bg: #f4f6fb; --surface: #ffffff; --surface-2: #f8fafc; --surface-3: #f1f5f9; --border: #e5e9f0; --border-strong:#d5dbe6; --text: #1e293b; --text-muted: #64748b; --text-soft: #94a3b8; --heading: #0f172a; --sidebar-bg: #0e1729; --sidebar-bg-2: #0b1220; --sidebar-text: #94a3b8; --sidebar-hover: rgba(255,255,255,.06); --sidebar-active-bg: rgba(59,130,246,.16); --sidebar-active-text: #bfdbfe; --sidebar-section: #64748b; --sidebar-border: rgba(255,255,255,.07); --shadow-xs: 0 1px 2px rgba(15,23,42,.06); --shadow-sm: 0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04); --shadow: 0 4px 16px rgba(15,23,42,.10); --shadow-lg: 0 12px 32px rgba(15,23,42,.16); --ring: 0 0 0 3px rgba(59,130,246,.20); } /* ── Dark theme ──────────────────────────────────────────── */ :root[data-theme="dark"] { --page-bg: #0b1120; --surface: #131c31; --surface-2: #182238; --surface-3: #1e2a44; --border: #263354; --border-strong:#334065; --text: #e2e8f0; --text-muted: #94a3b8; --text-soft: #64748b; --heading: #f1f5f9; --sidebar-bg: #0a1120; --sidebar-bg-2: #070d1a; --sidebar-border: rgba(255,255,255,.06); --shadow-xs: 0 1px 2px rgba(0,0,0,.3); --shadow-sm: 0 1px 3px rgba(0,0,0,.4); --shadow: 0 6px 20px rgba(0,0,0,.45); --shadow-lg: 0 14px 36px rgba(0,0,0,.55); } /* ── Base ───────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font-sans); background: var(--page-bg); color: var(--text); margin: 0; min-height: 100vh; font-size: 0.875rem; line-height: 1.55; -webkit-font-smoothing: antialiased; transition: background-color .3s ease, color .3s ease; } a { color: var(--primary); } a:hover { color: var(--primary-hover); } ::selection { background: var(--brand-200); color: var(--heading); } /* Custom scrollbar */ * { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } *::-webkit-scrollbar { width: 9px; height: 9px; } *::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 20px; border: 2px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background: var(--text-soft); background-clip: content-box; } /* ── Sidebar ─────────────────────────────────────────────── */ .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-width); background: linear-gradient(180deg, var(--sidebar-bg) 0%, var(--sidebar-bg-2) 100%); overflow-y: auto; overflow-x: hidden; transition: width .25s ease, transform .25s ease; z-index: 1045; display: flex; flex-direction: column; } .sidebar-brand { padding: 0 1.25rem; height: var(--topbar-height); display: flex; align-items: center; border-bottom: 1px solid var(--sidebar-border); flex-shrink: 0; } .brand-link { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: #f8fafc; overflow: hidden; } .brand-icon { font-size: 1.15rem; color: #fff; background: linear-gradient(135deg, var(--brand-500), var(--brand-700)); width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 4px 12px rgba(37,99,235,.4); } .brand-text { font-weight: 700; font-size: .95rem; letter-spacing: .2px; white-space: nowrap; } /* Sidebar Nav */ .sidebar-nav { padding: .75rem .625rem 1.5rem; flex: 1; } /* NOTE: these are scoped to .sidebar so they never leak onto Bootstrap's .nav-tabs > li.nav-item (which also uses the .nav-item class). */ .sidebar .nav-section { padding: 1rem .75rem .35rem; font-size: .65rem; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--sidebar-section); white-space: nowrap; overflow: hidden; } .sidebar .nav-item { display: flex; align-items: center; gap: .8rem; padding: .55rem .75rem; margin-bottom: 2px; color: var(--sidebar-text); text-decoration: none; font-size: .84rem; font-weight: 500; border-radius: var(--radius-sm); position: relative; transition: background .15s ease, color .15s ease; white-space: nowrap; } .sidebar .nav-item i { font-size: 1.05rem; flex-shrink: 0; width: 22px; text-align: center; } .sidebar .nav-item:hover { background: var(--sidebar-hover); color: #f1f5f9; } .sidebar .nav-item.active { background: var(--sidebar-active-bg); color: var(--sidebar-active-text); font-weight: 600; } .sidebar .nav-item.active::before { content: ''; position: absolute; left: -.625rem; top: 50%; transform: translateY(-50%); width: 3px; height: 60%; background: var(--brand-500); border-radius: 0 3px 3px 0; } /* ── Desktop collapsed rail ──────────────────────────────── */ @media (min-width: 769px) { body.sidebar-collapsed .sidebar { width: var(--sidebar-rail); } body.sidebar-collapsed .main-wrapper { margin-left: var(--sidebar-rail); } body.sidebar-collapsed .brand-text, body.sidebar-collapsed .sidebar .nav-item span, body.sidebar-collapsed .sidebar .nav-section { opacity: 0; pointer-events: none; } body.sidebar-collapsed .sidebar .nav-section { height: 8px; padding-top: 0; padding-bottom: 0; } body.sidebar-collapsed .sidebar-brand { justify-content: center; padding: 0; } body.sidebar-collapsed .sidebar .nav-item { justify-content: center; padding: .6rem; } body.sidebar-collapsed .sidebar .nav-item i { width: auto; } /* Tooltip label on hover when collapsed */ body.sidebar-collapsed .sidebar .nav-item::after { content: attr(data-label); position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%); background: var(--heading); color: #fff; padding: .35rem .6rem; border-radius: 6px; font-size: .78rem; white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity .15s ease; z-index: 1100; box-shadow: var(--shadow); } body.sidebar-collapsed .sidebar .nav-item:hover::after { opacity: 1; visibility: visible; } } /* ── Main Wrapper ────────────────────────────────────────── */ .main-wrapper { margin-left: var(--sidebar-width); min-height: 100vh; display: flex; flex-direction: column; transition: margin-left .25s ease; } /* ── Sidebar mobile backdrop ─────────────────────────────── */ .sidebar-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,.5); backdrop-filter: blur(2px); z-index: 1040; opacity: 0; visibility: hidden; transition: opacity .25s ease; } .sidebar-backdrop.show { opacity: 1; visibility: visible; } /* ── Topbar ──────────────────────────────────────────────── */ .topbar { position: sticky; top: 0; height: var(--topbar-height); background: color-mix(in srgb, var(--surface) 85%, transparent); backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: .75rem; padding: 0 1.25rem; z-index: 1030; } .btn-toggle-sidebar { background: none; border: none; cursor: pointer; font-size: 1.35rem; color: var(--text-muted); padding: .25rem; line-height: 1; border-radius: 8px; display: inline-flex; transition: background .15s, color .15s; } .btn-toggle-sidebar:hover { color: var(--primary); background: var(--surface-3); } .topbar-search { flex: 1; max-width: 420px; } .topbar-search .input-group-text { background: var(--surface-3); border-color: var(--border); color: var(--text-soft); } .topbar-search .form-control { background: var(--surface-3); border-color: var(--border); color: var(--text); font-size: .84rem; } .topbar-search .form-control::placeholder { color: var(--text-soft); } .topbar-search .form-control:focus { box-shadow: var(--ring); border-color: var(--brand-400); background: var(--surface); } .topbar-right { margin-left: auto; display: flex; align-items: center; gap: .5rem; } /* Theme toggle */ .btn-icon { width: 40px; height: 40px; border: 1px solid var(--border); background: var(--surface); border-radius: 10px; color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; cursor: pointer; transition: all .15s ease; } .btn-icon:hover { background: var(--surface-3); color: var(--primary); border-color: var(--border-strong); } .btn-user { display: flex; align-items: center; gap: .6rem; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: .3rem .6rem; cursor: pointer; transition: all .15s; text-align: left; } .btn-user:hover { background: var(--surface-3); border-color: var(--border-strong); } .btn-user::after { color: var(--text-soft); } .user-avatar { width: 34px; height: 34px; background: linear-gradient(135deg, var(--brand-500), var(--brand-700)); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: .85rem; flex-shrink: 0; box-shadow: 0 3px 8px rgba(37,99,235,.35); } .user-name { font-size: .82rem; font-weight: 600; line-height: 1.2; color: var(--text); } .user-role { font-size: .7rem; color: var(--text-muted); text-transform: capitalize; } .dropdown-menu { border: 1px solid var(--border); box-shadow: var(--shadow-lg); border-radius: var(--border-radius); background: var(--surface); padding: .4rem; font-size: .85rem; } .dropdown-item { border-radius: var(--radius-sm); padding: .5rem .7rem; color: var(--text); } .dropdown-item:hover { background: var(--surface-3); color: var(--text); } .dropdown-item.text-danger:hover { background: rgba(220,38,38,.1); color: var(--danger) !important; } .dropdown-header { color: var(--text-soft); font-size: .72rem; text-transform: uppercase; letter-spacing: .5px; } .dropdown-divider { border-color: var(--border); } /* ── Page Content ────────────────────────────────────────── */ .page-content { flex: 1; padding: 1.75rem; max-width: 1600px; width: 100%; } .page-footer { padding: 1rem 1.75rem; border-top: 1px solid var(--border); background: var(--surface); color: var(--text-muted); } /* ── Page Header ─────────────────────────────────────────── */ .page-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.5rem; gap: 1rem; flex-wrap: wrap; } .page-title { font-size: 1.4rem; font-weight: 700; color: var(--heading); margin: 0; letter-spacing: -.01em; } .page-title i { color: var(--primary); } .page-subtitle { font-size: .85rem; color: var(--text-muted); margin: .2rem 0 0; } .page-actions { flex-shrink: 0; display: flex; gap: .5rem; flex-wrap: wrap; } /* ── Cards ───────────────────────────────────────────────── */ .card { border: 1px solid var(--border); border-radius: var(--border-radius); background: var(--surface); color: var(--text); box-shadow: var(--shadow-xs); } .card.shadow-sm { box-shadow: var(--shadow-sm) !important; } .card-header { background: transparent; padding: .9rem 1.15rem; border-bottom: 1px solid var(--border); font-weight: 600; color: var(--heading); } .card-title { font-size: .95rem; font-weight: 600; color: var(--heading); } .card-body { color: var(--text); } /* Interactive / linkable cards */ .card-hover { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .card-hover:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--border-strong); } /* ── Stat Cards ──────────────────────────────────────────── */ .stat-card { border-radius: var(--border-radius); padding: 1.25rem 1.35rem; display: flex; flex-direction: column; gap: .3rem; position: relative; overflow: hidden; color: #fff; box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease; } .stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); } .stat-card::after { content: ''; position: absolute; right: -20px; bottom: -25px; width: 120px; height: 120px; background: rgba(255,255,255,.12); border-radius: 50%; } .stat-card--primary { background: linear-gradient(135deg, #3b82f6, #1d4ed8); } .stat-card--info { background: linear-gradient(135deg, #06b6d4, #0369a1); } .stat-card--success { background: linear-gradient(135deg, #22c55e, #15803d); } .stat-card--warning { background: linear-gradient(135deg, #f59e0b, #c2410c); } .stat-icon { font-size: 1.35rem; opacity: .9; position: relative; z-index: 1; } .stat-value { font-size: 2.1rem; font-weight: 800; line-height: 1.1; position: relative; z-index: 1; letter-spacing: -.02em; } .stat-label { font-size: .82rem; opacity: .9; font-weight: 500; position: relative; z-index: 1; } /* ── List groups (dashboard panels) ──────────────────────── */ .list-group { border-radius: 0; } .list-group-item { background: var(--surface); border-color: var(--border); color: var(--text); padding: .8rem 1.15rem; transition: background .13s ease; } .list-group-item-action:hover { background: var(--surface-3); } /* ── Activity Icon ───────────────────────────────────────── */ .activity-icon { width: 32px; height: 32px; flex-shrink: 0; background: var(--brand-50); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--primary); font-size: .85rem; } :root[data-theme="dark"] .activity-icon { background: rgba(59,130,246,.15); } /* ── Empty State (reusable) ──────────────────────────────── */ .empty-state { text-align: center; padding: 3rem 1.5rem; color: var(--text-muted); } .empty-state .empty-icon { font-size: 2.75rem; color: var(--text-soft); opacity: .55; display: block; margin-bottom: .75rem; } .empty-state p { margin-bottom: .85rem; } /* ── Buttons ─────────────────────────────────────────────── */ .btn { font-weight: 500; border-radius: var(--radius-sm); transition: all .15s ease; } .btn-sm { border-radius: 8px; } .btn-primary { background: var(--primary); border-color: var(--primary); box-shadow: 0 2px 6px rgba(37,99,235,.28); } .btn-primary:hover, .btn-primary:focus { background: var(--primary-hover); border-color: var(--primary-hover); box-shadow: 0 4px 12px rgba(37,99,235,.38); } .btn-outline-primary { color: var(--primary); border-color: var(--border-strong); } .btn-outline-primary:hover { background: var(--primary); border-color: var(--primary); } .btn-outline-secondary { color: var(--text-muted); border-color: var(--border-strong); } .btn-outline-secondary:hover { background: var(--surface-3); color: var(--text); border-color: var(--border-strong); } .btn-secondary { background: var(--surface-3); border-color: var(--border-strong); color: var(--text); } .btn-secondary:hover { background: var(--border); color: var(--text); } .btn-link { text-decoration: none; } /* ── Forms ───────────────────────────────────────────────── */ .form-label { font-weight: 500; color: var(--text); font-size: .84rem; margin-bottom: .35rem; } .form-control, .form-select { background: var(--surface); border-color: var(--border); color: var(--text); border-radius: var(--radius-sm); font-size: .875rem; } .form-control::placeholder { color: var(--text-soft); } .form-control:focus, .form-select:focus { background: var(--surface); border-color: var(--brand-400); box-shadow: var(--ring); color: var(--text); } .form-control:disabled, .form-select:disabled { background: var(--surface-3); } .input-group-text { background: var(--surface-3); border-color: var(--border); color: var(--text-muted); } .form-text { color: var(--text-muted); } .form-label.required::after { content: ' *'; color: var(--danger); font-weight: 700; } /* ── Tables ──────────────────────────────────────────────── */ .table { color: var(--text); --bs-table-bg: transparent; border-color: var(--border); } .table > :not(caption) > * > * { background: transparent; } .table thead th, .table-light th { font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); background: var(--surface-2) !important; border-bottom: 1px solid var(--border); padding: .7rem 1rem; white-space: nowrap; } .table td { vertical-align: middle; border-color: var(--border); padding: .7rem 1rem; } .table-hover tbody tr { transition: background .12s ease; } .table-hover tbody tr:hover > * { background-color: var(--surface-3) !important; } .table code { color: var(--primary); background: var(--brand-50); padding: .1rem .4rem; border-radius: 5px; font-size: .8rem; } :root[data-theme="dark"] .table code { background: rgba(59,130,246,.13); } /* ── Badges (soft/tinted) ────────────────────────────────── */ .badge { font-weight: 600; font-size: .72rem; padding: .35em .65em; border-radius: 6px; letter-spacing: .2px; } .badge.bg-primary { background: var(--brand-100) !important; color: var(--brand-700) !important; } .badge.bg-secondary { background: var(--surface-3) !important; color: var(--text-muted) !important; } .badge.bg-success { background: #dcfce7 !important; color: #15803d !important; } .badge.bg-warning { background: #fef3c7 !important; color: #b45309 !important; } .badge.bg-danger { background: #fee2e2 !important; color: #b91c1c !important; } .badge.bg-info { background: #cffafe !important; color: #0e7490 !important; } .badge.bg-light { background: var(--surface-3) !important; color: var(--text-muted) !important; border: 1px solid var(--border); } :root[data-theme="dark"] .badge.bg-primary { background: rgba(59,130,246,.18) !important; color: #93c5fd !important; } :root[data-theme="dark"] .badge.bg-success { background: rgba(34,197,94,.16) !important; color: #86efac !important; } :root[data-theme="dark"] .badge.bg-warning { background: rgba(245,158,11,.16) !important; color: #fcd34d !important; } :root[data-theme="dark"] .badge.bg-danger { background: rgba(220,38,38,.18) !important; color: #fca5a5 !important; } :root[data-theme="dark"] .badge.bg-info { background: rgba(6,182,212,.16) !important; color: #67e8f9 !important; } :root[data-theme="dark"] .badge.bg-secondary { background: var(--surface-3) !important; color: var(--text-muted) !important; } /* ── Nav Tabs (scrollable underline strip) ───────────────── */ .nav-tabs { border-bottom: 1px solid var(--border); gap: .1rem; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .nav-tabs::-webkit-scrollbar { display: none; } .nav-tabs .nav-item { margin-bottom: -1px; } .nav-tabs .nav-link { font-size: .84rem; color: var(--text-muted); border: none; border-bottom: 2px solid transparent; border-radius: var(--radius-sm) var(--radius-sm) 0 0; padding: .6rem .95rem; font-weight: 500; white-space: nowrap; transition: color .15s, border-color .15s, background .15s; } .nav-tabs .nav-link:hover { color: var(--text); background: var(--surface-3); border-bottom-color: transparent; } .nav-tabs .nav-link.active { font-weight: 600; color: var(--primary); background: var(--brand-50); border-bottom-color: var(--primary); } :root[data-theme="dark"] .nav-tabs .nav-link.active { background: rgba(59,130,246,.12); } .nav-tabs .nav-link i { margin-right: .35rem; } /* ── Modals ──────────────────────────────────────────────── */ .modal-content { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--border-radius); box-shadow: var(--shadow-lg); } .modal-header, .modal-footer { border-color: var(--border); } .btn-close { filter: var(--btn-close-filter, none); } :root[data-theme="dark"] .btn-close { filter: invert(1) grayscale(1) brightness(1.8); } /* ── Alerts ──────────────────────────────────────────────── */ .alert { border: 1px solid transparent; border-radius: var(--border-radius); font-size: .875rem; } .alert-success { background: #dcfce7; color: #166534; border-color: #bbf7d0; } .alert-danger { background: #fee2e2; color: #991b1b; border-color: #fecaca; } .alert-warning { background: #fef3c7; color: #92400e; border-color: #fde68a; } .alert-info { background: #cffafe; color: #155e75; border-color: #a5f3fc; } :root[data-theme="dark"] .alert-success { background: rgba(34,197,94,.13); color: #86efac; border-color: rgba(34,197,94,.3); } :root[data-theme="dark"] .alert-danger { background: rgba(220,38,38,.13); color: #fca5a5; border-color: rgba(220,38,38,.3); } :root[data-theme="dark"] .alert-warning { background: rgba(245,158,11,.13); color: #fcd34d; border-color: rgba(245,158,11,.3); } :root[data-theme="dark"] .alert-info { background: rgba(6,182,212,.13); color: #67e8f9; border-color: rgba(6,182,212,.3); } /* ── Flash Alerts (redesigned) ───────────────────────────── */ .flash-alert { display: flex; align-items: flex-start; gap: .85rem; padding: .95rem 3rem .95rem 1rem; margin-bottom: 1.5rem; border: 1px solid var(--border); border-left: 4px solid var(--flash-accent, var(--primary)); border-radius: var(--border-radius); background: var(--surface); box-shadow: var(--shadow-sm); } .flash-alert .flash-icon { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; color: var(--flash-accent, var(--primary)); background: color-mix(in srgb, var(--flash-accent, var(--primary)) 15%, transparent); } .flash-alert .flash-title { font-weight: 700; font-size: .9rem; color: var(--heading); line-height: 1.3; } .flash-alert .flash-text { font-size: .85rem; color: var(--text-muted); margin-top: .1rem; } .flash-alert .btn-close { position: absolute; top: .85rem; right: 1rem; padding: .6rem; } .flash-alert { position: relative; } .flash-success { --flash-accent: var(--success); } .flash-danger { --flash-accent: var(--danger); } .flash-warning { --flash-accent: var(--warning); } .flash-info { --flash-accent: var(--info); } /* ── Toast (session/notification) ────────────────────────── */ .app-toast { position: fixed; right: 1.25rem; bottom: 1.25rem; max-width: 340px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-left: 4px solid var(--warning); border-radius: var(--border-radius); box-shadow: var(--shadow-lg); padding: .85rem 1rem; display: flex; align-items: flex-start; gap: .6rem; z-index: 1090; transform: translateY(150%); opacity: 0; transition: transform .35s cubic-bezier(.16,1,.3,1), opacity .35s ease; font-size: .85rem; } .app-toast.show { transform: translateY(0); opacity: 1; } /* ── Detail lists ────────────────────────────────────────── */ dl.row dt { color: var(--text-muted); font-weight: 500; font-size: .82rem; } dl.row dd { color: var(--text); } /* ── Breadcrumb-ish muted link ───────────────────────────── */ code { color: var(--primary); } /* ── Auth Pages ──────────────────────────────────────────── */ .auth-body { background: radial-gradient(1200px 600px at 15% -10%, #1e3a5f 0%, transparent 55%), linear-gradient(135deg, #0b1120 0%, #0f172a 60%, #14213d 100%); min-height: 100vh; display: flex; align-items: center; justify-content: center; } .auth-wrapper { width: 100%; padding: 1rem; } .auth-card { background: var(--surface); border-radius: var(--radius-lg); padding: 2.5rem; max-width: 420px; margin: 0 auto; box-shadow: 0 24px 70px rgba(0,0,0,.45); border: 1px solid var(--border); } .auth-logo { text-align: center; margin-bottom: 1.75rem; } .auth-logo i { font-size: 1.6rem; color: #fff; display: inline-flex; width: 58px; height: 58px; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--brand-500), var(--brand-700)); border-radius: 16px; margin-bottom: .85rem; box-shadow: 0 10px 24px rgba(37,99,235,.45); } .auth-title { font-size: 1.45rem; font-weight: 800; color: var(--heading); margin: 0 0 .25rem; letter-spacing: -.01em; } .auth-subtitle { font-size: .85rem; color: var(--text-muted); margin: 0; } .btn-login { padding: .7rem; font-weight: 600; border-radius: var(--radius-sm); } /* ── Utilities ───────────────────────────────────────────── */ .fw-medium { font-weight: 500 !important; } .text-muted { color: var(--text-muted) !important; } .hover-lift { transition: transform .18s ease, box-shadow .18s ease; } .hover-lift:hover { transform: translateY(-2px); box-shadow: var(--shadow); } .cursor-pointer { cursor: pointer; } /* ── Responsive ──────────────────────────────────────────── */ @media (max-width: 768px) { .sidebar { transform: translateX(-100%); box-shadow: var(--shadow-lg); } .sidebar.open { transform: translateX(0); } .main-wrapper { margin-left: 0; } .page-content { padding: 1.1rem; } .topbar-search { max-width: none; } .stat-value { font-size: 1.75rem; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }