/* ============================================================================ Inventory Management System — admin UI design system Plain CSS component layer (no build step required). Pairs with Tailwind utilities used in markup. Dark mode is driven by the `.dark` class on . ============================================================================ */ :root { /* Brand + accent ramp (indigo / violet primary, emerald + amber accents) */ --brand-50:#eef2ff; --brand-100:#e0e7ff; --brand-200:#c7d2fe; --brand-300:#a5b4fc; --brand-400:#818cf8; --brand-500:#6366f1; --brand-600:#4f46e5; --brand-700:#4338ca; --brand-800:#3730a3; --brand-rgb:79,70,229; /* Neutral surfaces (light) */ --bg:#f6f7fb; --surface:#ffffff; --surface-2:#f8fafc; --border:#e8ebf2; --border-strong:#dce0ea; --text:#0f172a; --text-muted:#64748b; --text-subtle:#94a3b8; /* Sidebar (light) */ --sb-bg:#ffffff; --sb-text:#475569; --sb-text-active:var(--brand-700); --sb-hover:#f1f3f9; --sb-active:linear-gradient(90deg,var(--brand-50),rgba(238,242,255,0)); --sb-heading:#9aa3b2; --ring:0 0 0 1px rgba(15,23,42,.04); --shadow-sm:0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06); --shadow-md:0 4px 12px rgba(16,24,40,.08), 0 2px 4px rgba(16,24,40,.04); --shadow-lg:0 12px 32px rgba(16,24,40,.12), 0 4px 8px rgba(16,24,40,.06); --shadow-brand:0 10px 24px rgba(var(--brand-rgb),.28); --radius:14px; --radius-sm:10px; --radius-lg:20px; --ok:#10b981; --ok-bg:#ecfdf5; --ok-text:#047857; --warn:#f59e0b; --warn-bg:#fffbeb; --warn-text:#b45309; --danger:#ef4444; --danger-bg:#fef2f2; --danger-text:#b91c1c; --info:#0ea5e9; --info-bg:#f0f9ff; --info-text:#0369a1; --violet:#8b5cf6; } .dark { --bg:#0b1020; --surface:#111827; --surface-2:#0f1626; --border:#1f2937; --border-strong:#273244; --text:#e5e9f0; --text-muted:#94a3b8; --text-subtle:#64748b; --sb-bg:#0d1424; --sb-text:#9fb0c7; --sb-text-active:#ffffff; --sb-hover:#151d31; --sb-active:linear-gradient(90deg,rgba(var(--brand-rgb),.22),rgba(99,102,241,0)); --sb-heading:#5b6b85; --ring:0 0 0 1px rgba(255,255,255,.06); --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 6px 18px rgba(0,0,0,.45); --shadow-lg:0 18px 44px rgba(0,0,0,.55); --ok-bg:rgba(16,185,129,.14); --ok-text:#34d399; --warn-bg:rgba(245,158,11,.14); --warn-text:#fbbf24; --danger-bg:rgba(239,68,68,.15); --danger-text:#f87171; --info-bg:rgba(14,165,233,.14); --info-text:#38bdf8; } * { -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } /* icon wrapper: keeps injected SVGs centered & sized; component rules below win */ [data-ic] { display:inline-flex; align-items:center; justify-content:center; line-height:0; vertical-align:middle; flex:none; } [data-ic] svg { width:18px; height:18px; display:block; } html, body { height:100%; } body { margin:0; font-family:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif; background:var(--bg); color:var(--text); font-size:14px; line-height:1.5; transition:background-color .3s ease, color .3s ease; } /* subtle ambient gradient behind the app */ body::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background: radial-gradient(900px 500px at 100% -5%, rgba(var(--brand-rgb),.07), transparent 60%), radial-gradient(800px 480px at -10% 110%, rgba(139,92,246,.06), transparent 55%); } ::-webkit-scrollbar { width:10px; height:10px; } ::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:20px; border:2px solid transparent; background-clip:padding-box; } ::-webkit-scrollbar-thumb:hover { background:var(--text-subtle); } ::-webkit-scrollbar-track { background:transparent; } /* ----------------------------------------------------------------- LAYOUT */ .app-shell { display:flex; min-height:100vh; } .sidebar { position:fixed; inset:0 auto 0 0; z-index:50; width:264px; background:var(--sb-bg); border-right:1px solid var(--border); display:flex; flex-direction:column; transition:width .26s cubic-bezier(.4,0,.2,1), transform .26s cubic-bezier(.4,0,.2,1); } .sidebar.collapsed { width:76px; } .main-area { flex:1; min-width:0; margin-left:264px; transition:margin-left .26s cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column; } .sidebar.collapsed ~ .main-area { margin-left:76px; } .sb-brand { display:flex; align-items:center; gap:12px; height:64px; padding:0 18px; flex:none; text-decoration:none; } .sb-logo { width:38px; height:38px; border-radius:11px; flex:none; background:linear-gradient(135deg,var(--brand-500),var(--violet)); display:grid; place-items:center; color:#fff; box-shadow:var(--shadow-brand); } .sb-brand-text { display:flex; flex-direction:column; line-height:1.1; min-width:0; } .sb-brand-text b { font-size:16px; font-weight:700; letter-spacing:-.01em; color:var(--text); } .sb-brand-text span { font-size:11px; color:var(--text-subtle); font-weight:500; } .sidebar.collapsed .sb-brand-text, .sidebar.collapsed .sb-heading, .sidebar.collapsed .nav-badge { display:none; } .sidebar.collapsed .sb-link { justify-content:center; padding-left:0; padding-right:0; } .sidebar.collapsed .sb-link .lbl { display:none; } .sb-scroll { flex:1; overflow-y:auto; overflow-x:hidden; padding:8px 14px 20px; } .sb-heading { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.09em; color:var(--sb-heading); padding:16px 12px 7px; } .sb-link { position:relative; display:flex; align-items:center; gap:11px; padding:9px 12px; margin:2px 0; border-radius:10px; color:var(--sb-text); font-weight:500; font-size:13.5px; cursor:pointer; text-decoration:none; transition:background .16s ease, color .16s ease; white-space:nowrap; } .sb-link svg { width:18px; height:18px; flex:none; } .sb-link:hover { background:var(--sb-hover); color:var(--text); } .sb-link.active { color:var(--sb-text-active); background:var(--sb-active); font-weight:600; } .sb-link.active::before { content:""; position:absolute; left:-14px; top:50%; transform:translateY(-50%); width:4px; height:22px; border-radius:0 4px 4px 0; background:linear-gradient(180deg,var(--brand-500),var(--violet)); } .nav-badge { margin-left:auto; font-size:10.5px; font-weight:700; line-height:1; padding:3px 7px; border-radius:999px; background:var(--danger-bg); color:var(--danger-text); } .nav-badge.brand { background:var(--brand-100); color:var(--brand-700); } .dark .nav-badge.brand { background:rgba(var(--brand-rgb),.2); color:#c7d2fe; } /* --------------------------------------------------------------- TOP NAVBAR */ .topbar { position:sticky; top:0; z-index:40; height:64px; flex:none; display:flex; align-items:center; gap:14px; padding:0 22px; background:color-mix(in srgb, var(--surface) 78%, transparent); backdrop-filter:saturate(1.4) blur(12px); border-bottom:1px solid var(--border); } .icon-btn { position:relative; width:40px; height:40px; border-radius:11px; flex:none; display:grid; place-items:center; cursor:pointer; color:var(--text-muted); background:transparent; border:1px solid transparent; transition:all .16s ease; } .icon-btn:hover { background:var(--surface-2); color:var(--text); border-color:var(--border); } .icon-btn .dot { position:absolute; top:9px; right:10px; width:8px; height:8px; border-radius:50%; background:var(--danger); border:2px solid var(--surface); } .icon-btn .dot.warn { background:var(--warn); } .searchbox { display:flex; align-items:center; gap:9px; height:40px; padding:0 13px; min-width:230px; background:var(--surface-2); border:1px solid var(--border); border-radius:11px; color:var(--text-muted); transition:all .18s ease; } .searchbox:focus-within { border-color:var(--brand-400); box-shadow:0 0 0 4px rgba(var(--brand-rgb),.12); background:var(--surface); } .searchbox input { border:0; outline:0; background:transparent; color:var(--text); width:100%; font-size:13.5px; } .searchbox kbd { font-size:10.5px; color:var(--text-subtle); border:1px solid var(--border-strong); border-radius:6px; padding:1px 6px; font-family:inherit; } .avatar { width:38px; height:38px; border-radius:11px; flex:none; display:grid; place-items:center; font-weight:700; color:#fff; font-size:13px; background:linear-gradient(135deg,#0ea5e9,var(--brand-600)); } .page { padding:26px 24px 48px; max-width:1400px; margin:0 auto; width:100%; animation:fadeUp .45s cubic-bezier(.2,.7,.3,1) both; } .page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:22px; } .page-title { font-size:23px; font-weight:750; letter-spacing:-.02em; margin:0; } .page-sub { color:var(--text-muted); font-size:13.5px; margin-top:3px; } .crumb { display:flex; align-items:center; gap:7px; color:var(--text-subtle); font-size:12.5px; font-weight:500; margin-bottom:8px; } .crumb svg { width:14px; height:14px; } /* ------------------------------------------------------------------- CARDS */ .card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm); } .card-pad { padding:20px; } .card-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 20px; border-bottom:1px solid var(--border); } .card-head h3 { margin:0; font-size:15px; font-weight:700; letter-spacing:-.01em; } .card-head .sub { font-size:12.5px; color:var(--text-muted); } /* KPI cards */ .kpi-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px; } .kpi { position:relative; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px; overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .kpi:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--border-strong); } .kpi::after { content:""; position:absolute; right:-30px; top:-30px; width:110px; height:110px; border-radius:50%; background:radial-gradient(circle, rgba(var(--brand-rgb),.10), transparent 70%); pointer-events:none; } .kpi-top { display:flex; align-items:center; justify-content:space-between; } .kpi-ic { width:42px; height:42px; border-radius:12px; display:grid; place-items:center; color:#fff; } .kpi-ic svg { width:21px; height:21px; } .kpi-ic.indigo { background:linear-gradient(135deg,#6366f1,#4f46e5); } .kpi-ic.emerald{ background:linear-gradient(135deg,#10b981,#059669); } .kpi-ic.amber { background:linear-gradient(135deg,#f59e0b,#d97706); } .kpi-ic.rose { background:linear-gradient(135deg,#fb7185,#e11d48); } .kpi-ic.sky { background:linear-gradient(135deg,#38bdf8,#0284c7); } .kpi-ic.violet { background:linear-gradient(135deg,#a78bfa,#7c3aed); } .kpi-ic.slate { background:linear-gradient(135deg,#94a3b8,#475569); } .kpi-label { color:var(--text-muted); font-size:12.5px; font-weight:550; margin-top:14px; } .kpi-value { font-size:27px; font-weight:760; letter-spacing:-.02em; margin-top:3px; line-height:1.1; } .kpi-foot { display:flex; align-items:center; gap:6px; margin-top:9px; font-size:12px; color:var(--text-subtle); } .trend { display:inline-flex; align-items:center; gap:3px; font-weight:650; padding:2px 7px; border-radius:999px; font-size:11.5px; } .trend.up { color:var(--ok-text); background:var(--ok-bg); } .trend.down { color:var(--danger-text); background:var(--danger-bg); } /* ------------------------------------------------------------------ BADGES */ .badge { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:650; padding:3px 9px; border-radius:999px; line-height:1.35; white-space:nowrap; } .badge .bdot { width:6px; height:6px; border-radius:50%; background:currentColor; } .badge.green { color:var(--ok-text); background:var(--ok-bg); } .badge.amber { color:var(--warn-text); background:var(--warn-bg); } .badge.red { color:var(--danger-text); background:var(--danger-bg); } .badge.blue { color:var(--info-text); background:var(--info-bg); } .badge.indigo { color:var(--brand-700); background:var(--brand-100); } .dark .badge.indigo { color:#c7d2fe; background:rgba(var(--brand-rgb),.18); } .badge.slate { color:var(--text-muted); background:var(--surface-2); border:1px solid var(--border); } .badge.violet { color:#7c3aed; background:#f5f3ff; } .dark .badge.violet { color:#c4b5fd; background:rgba(139,92,246,.16); } /* ------------------------------------------------------------------ BUTTONS */ .btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:40px; padding:0 16px; border-radius:11px; font-size:13.5px; font-weight:600; cursor:pointer; border:1px solid transparent; white-space:nowrap; transition:transform .12s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease; user-select:none; text-decoration:none; font-family:inherit; } .btn svg { width:17px; height:17px; } .btn:active { transform:translateY(1px); } .btn-primary { background:linear-gradient(135deg,var(--brand-500),var(--brand-600)); color:#fff; box-shadow:var(--shadow-brand); } .btn-primary:hover { box-shadow:0 12px 28px rgba(var(--brand-rgb),.4); filter:brightness(1.04); } .btn-ghost { background:var(--surface); color:var(--text); border-color:var(--border); box-shadow:var(--shadow-sm); } .btn-ghost:hover { background:var(--surface-2); border-color:var(--border-strong); } .btn-soft { background:var(--brand-50); color:var(--brand-700); } .dark .btn-soft { background:rgba(var(--brand-rgb),.16); color:#c7d2fe; } .btn-soft:hover { background:var(--brand-100); } .btn-danger { background:linear-gradient(135deg,#f43f5e,#e11d48); color:#fff; box-shadow:0 8px 20px rgba(225,29,72,.3); } .btn-danger:hover { filter:brightness(1.05); } .btn-sm { height:34px; padding:0 12px; font-size:12.5px; border-radius:9px; } .btn-icon { width:40px; padding:0; } .btn-block { width:100%; } .btn:disabled { opacity:.55; cursor:not-allowed; } /* ------------------------------------------------------------------- TABLES */ .tbl-wrap { width:100%; overflow-x:auto; } table.tbl { width:100%; border-collapse:separate; border-spacing:0; font-size:13.5px; } table.tbl thead th { text-align:left; font-weight:600; font-size:11.5px; text-transform:uppercase; letter-spacing:.045em; color:var(--text-subtle); padding:12px 16px; background:var(--surface-2); border-bottom:1px solid var(--border); position:sticky; top:0; white-space:nowrap; } table.tbl thead th.sortable { cursor:pointer; } table.tbl thead th.sortable:hover { color:var(--text); } table.tbl tbody td { padding:13px 16px; border-bottom:1px solid var(--border); vertical-align:middle; } table.tbl tbody tr { transition:background .14s ease; } table.tbl tbody tr:hover { background:var(--surface-2); } table.tbl tbody tr:last-child td { border-bottom:0; } .cell-strong { font-weight:600; color:var(--text); } .cell-mut { color:var(--text-muted); } .sku-chip { font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; background:var(--surface-2); border:1px solid var(--border); padding:2px 8px; border-radius:7px; color:var(--text-muted); } .row-actions { display:flex; gap:6px; } .act { width:32px; height:32px; border-radius:9px; display:grid; place-items:center; cursor:pointer; color:var(--text-muted); border:1px solid var(--border); background:var(--surface); transition:all .15s ease; } .act svg { width:15px; height:15px; } .act:hover { color:var(--brand-600); border-color:var(--brand-300); background:var(--brand-50); } .dark .act:hover { background:rgba(var(--brand-rgb),.16); color:#c7d2fe; } .act.danger:hover { color:var(--danger-text); border-color:#fca5a5; background:var(--danger-bg); } /* table toolbar */ .toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .toolbar .grow { flex:1; min-width:160px; } .select, .input { height:40px; padding:0 13px; border-radius:11px; font-size:13.5px; color:var(--text); background:var(--surface); border:1px solid var(--border); outline:0; width:100%; transition:border-color .16s ease, box-shadow .16s ease; font-family:inherit; } .input::placeholder { color:var(--text-subtle); } .select:focus, .input:focus { border-color:var(--brand-400); box-shadow:0 0 0 4px rgba(var(--brand-rgb),.12); } textarea.input { height:auto; padding:10px 13px; resize:vertical; min-height:84px; line-height:1.5; } .field { display:flex; flex-direction:column; gap:7px; } .label { font-size:12.5px; font-weight:600; color:var(--text); } .label .req { color:var(--danger); margin-left:2px; } .hint { font-size:12px; color:var(--text-subtle); } .err-text { font-size:12px; color:var(--danger-text); display:flex; align-items:center; gap:5px; } .input.invalid { border-color:var(--danger); box-shadow:0 0 0 4px rgba(239,68,68,.1); } /* pagination */ .pager { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; flex-wrap:wrap; } .pager .info { color:var(--text-muted); font-size:13px; } .pager .pages { display:flex; gap:5px; } .pg { min-width:34px; height:34px; padding:0 9px; border-radius:9px; display:grid; place-items:center; font-size:13px; font-weight:600; cursor:pointer; color:var(--text-muted); border:1px solid var(--border); background:var(--surface); transition:all .14s ease; } .pg:hover { border-color:var(--brand-300); color:var(--brand-600); } .pg.active { background:linear-gradient(135deg,var(--brand-500),var(--brand-600)); color:#fff; border-color:transparent; box-shadow:var(--shadow-brand); } .pg.disabled { opacity:.45; pointer-events:none; } /* ------------------------------------------------------------- TIMELINE */ .timeline { position:relative; padding-left:8px; } .tl-item { position:relative; padding:0 0 18px 26px; } .tl-item::before { content:""; position:absolute; left:6px; top:3px; bottom:-3px; width:2px; background:var(--border); } .tl-item:last-child::before { display:none; } .tl-dot { position:absolute; left:0; top:2px; width:14px; height:14px; border-radius:50%; border:3px solid var(--surface); box-shadow:0 0 0 1px var(--border); } .tl-dot.green { background:var(--ok); } .tl-dot.red { background:var(--danger); } .tl-dot.indigo { background:var(--brand-500); } .tl-dot.amber { background:var(--warn); } .tl-title { font-size:13px; font-weight:600; } .tl-meta { font-size:12px; color:var(--text-subtle); margin-top:2px; } /* ------------------------------------------------------- BULK ENTRY ROWS */ .entry-table { width:100%; border-collapse:separate; border-spacing:0; } .entry-table th { text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-subtle); font-weight:600; padding:0 10px 9px; } .entry-table td { padding:5px 6px; vertical-align:top; } .entry-table .input, .entry-table .select { height:38px; } .entry-row { transition:background .15s ease; } .entry-row.bad .input { border-color:var(--danger); } .entry-row.bad { background:var(--danger-bg); } .line-no { width:30px; height:38px; display:grid; place-items:center; color:var(--text-subtle); font-weight:600; font-size:12.5px; } .sumbar { display:flex; align-items:center; gap:22px; padding:14px 18px; border-radius:var(--radius); background:var(--surface-2); border:1px solid var(--border); flex-wrap:wrap; } .sumbar .stat { display:flex; flex-direction:column; } .sumbar .stat b { font-size:20px; font-weight:750; letter-spacing:-.01em; } .sumbar .stat span { font-size:11.5px; color:var(--text-subtle); text-transform:uppercase; letter-spacing:.04em; font-weight:600; } /* segmented control / tabs */ .seg { display:inline-flex; padding:4px; gap:3px; background:var(--surface-2); border:1px solid var(--border); border-radius:12px; } .seg button { border:0; background:transparent; padding:7px 15px; border-radius:9px; cursor:pointer; font-size:13px; font-weight:600; color:var(--text-muted); transition:all .16s ease; font-family:inherit; } .seg button.active { background:var(--surface); color:var(--text); box-shadow:var(--shadow-sm); } /* mode picker (stock-in) */ .mode-card { flex:1; display:flex; align-items:center; gap:13px; padding:16px; cursor:pointer; border:1.5px solid var(--border); border-radius:var(--radius); background:var(--surface); transition:all .18s ease; } .mode-card:hover { border-color:var(--brand-300); } .mode-card.on { border-color:var(--brand-500); background:var(--brand-50); box-shadow:0 0 0 4px rgba(var(--brand-rgb),.1); } .dark .mode-card.on { background:rgba(var(--brand-rgb),.12); } .mode-card .mc-ic { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; flex:none; } .mode-card h4 { margin:0; font-size:14px; font-weight:700; } .mode-card p { margin:2px 0 0; font-size:12px; color:var(--text-muted); } /* --------------------------------------------------------------- MODAL */ .modal-overlay { position:fixed; inset:0; z-index:80; background:rgba(15,23,42,.5); backdrop-filter:blur(3px); display:grid; place-items:center; padding:20px; opacity:0; visibility:hidden; transition:opacity .22s ease, visibility .22s ease; } .modal-overlay.open { opacity:1; visibility:visible; } .modal { width:100%; max-width:560px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); overflow:hidden; transform:translateY(12px) scale(.97); opacity:.4; transition:transform .26s cubic-bezier(.2,.8,.3,1), opacity .26s ease; } .modal-overlay.open .modal { transform:none; opacity:1; } .modal-head { display:flex; align-items:flex-start; gap:13px; padding:20px 22px 0; } .modal-head .m-ic { width:42px; height:42px; border-radius:12px; display:grid; place-items:center; flex:none; } .modal-head h3 { margin:0; font-size:17px; font-weight:700; } .modal-head p { margin:3px 0 0; font-size:13px; color:var(--text-muted); } .modal-body { padding:18px 22px; } .modal-foot { display:flex; justify-content:flex-end; gap:10px; padding:16px 22px; border-top:1px solid var(--border); background:var(--surface-2); } /* --------------------------------------------------------------- TOASTS */ .toast-host { position:fixed; top:18px; right:18px; z-index:90; display:flex; flex-direction:column; gap:11px; width:360px; max-width:calc(100vw - 36px); } .toast { display:flex; gap:12px; padding:14px 15px; border-radius:13px; background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-lg); animation:toastIn .35s cubic-bezier(.2,.9,.3,1) both; overflow:hidden; position:relative; } .toast .t-ic { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; flex:none; color:#fff; } .toast .t-body { flex:1; min-width:0; } .toast .t-title { font-size:13.5px; font-weight:700; } .toast .t-msg { font-size:12.5px; color:var(--text-muted); margin-top:1px; } .toast .t-close { color:var(--text-subtle); cursor:pointer; width:22px; height:22px; display:grid; place-items:center; border-radius:7px; } .toast .t-close:hover { background:var(--surface-2); color:var(--text); } .toast::after { content:""; position:absolute; left:0; bottom:0; height:3px; width:100%; transform-origin:left; animation:toastBar 4s linear forwards; } .toast.ok .t-ic { background:var(--ok); } .toast.ok::after { background:var(--ok); } .toast.err .t-ic { background:var(--danger); }.toast.err::after { background:var(--danger); } .toast.warn .t-ic { background:var(--warn); } .toast.warn::after { background:var(--warn); } .toast.info .t-ic { background:var(--info); } .toast.info::after { background:var(--info); } /* --------------------------------------------------------- SKELETON / EMPTY */ .skeleton { position:relative; overflow:hidden; background:var(--surface-2); border-radius:8px; } .skeleton::after { content:""; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg,transparent,rgba(148,163,184,.18),transparent); animation:shimmer 1.4s infinite; } .sk-line { height:12px; margin:9px 0; } .empty { text-align:center; padding:46px 20px; } .empty .e-ic { width:64px; height:64px; border-radius:18px; margin:0 auto 14px; display:grid; place-items:center; background:var(--surface-2); color:var(--text-subtle); } .empty h4 { margin:0 0 5px; font-size:15px; font-weight:700; } .empty p { margin:0 auto; font-size:13px; color:var(--text-muted); max-width:340px; } /* dropdown menu */ .menu { position:absolute; right:0; top:calc(100% + 8px); min-width:230px; background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow-lg); padding:7px; opacity:0; visibility:hidden; transform:translateY(-6px); transition:all .18s ease; z-index:60; } .menu.open { opacity:1; visibility:visible; transform:none; } .menu-item { display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:9px; font-size:13px; color:var(--text); cursor:pointer; transition:background .14s ease; text-decoration:none; } .menu-item:hover { background:var(--surface-2); } .menu-item svg { width:16px; height:16px; color:var(--text-muted); } .menu-sep { height:1px; background:var(--border); margin:6px 4px; } .menu-head { display:flex; align-items:center; gap:10px; padding:9px 11px 7px; } .avatar.sm { width:34px; height:34px; border-radius:10px; font-size:12px; } .mh-name { font-size:13px; font-weight:650; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .mh-role { font-size:11.5px; color:var(--text-subtle); } .scrim { position:fixed; inset:0; background:rgba(15,23,42,.45); z-index:45; opacity:0; visibility:hidden; transition:.25s; } .scrim.show { opacity:1; visibility:visible; } /* --------------------------------------------------------------- KEYFRAMES */ @keyframes fadeUp { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } } @keyframes toastIn { from { opacity:0; transform:translateX(28px) scale(.96); } to { opacity:1; transform:none; } } @keyframes toastBar { from { transform:scaleX(1); } to { transform:scaleX(0); } } @keyframes shimmer { 100% { transform:translateX(100%); } } @keyframes spin { to { transform:rotate(360deg); } } .spinner { width:16px; height:16px; border-radius:50%; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; animation:spin .7s linear infinite; } /* -------------------------------------------------------------- RESPONSIVE */ @media (max-width:1100px){ .kpi-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } } @media (max-width:900px){ .sidebar { transform:translateX(-100%); width:264px; box-shadow:var(--shadow-lg); } .sidebar.mobile-open { transform:none; } .sidebar.collapsed { width:264px; } .main-area, .sidebar.collapsed ~ .main-area { margin-left:0; } .hide-mobile { display:none !important; } } @media (max-width:680px){ .kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .page { padding:18px 14px 40px; } .stack-mobile { flex-direction:column; align-items:stretch; } } @media (max-width:460px){ .kpi-grid { grid-template-columns:1fr; } } .grid-2 { display:grid; grid-template-columns:2fr 1fr; gap:18px; } .grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } @media (max-width:1000px){ .grid-2, .grid-3 { grid-template-columns:1fr; } } /* Two/three equal form columns inside a modal or card body. */ .fg2 { display:grid; grid-template-columns:1fr 1fr; gap:0 14px; } .fg3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:0 14px; } @media (max-width:560px){ .fg2, .fg3 { grid-template-columns:1fr; } } /* ---------------------------------------------- icon sizing per context */ .sb-logo svg { width:20px; height:20px; } .icon-btn svg { width:19px; height:19px; } .searchbox svg { width:17px; height:17px; } .trend svg { width:13px; height:13px; } .badge svg { width:13px; height:13px; } .m-ic svg { width:20px; height:20px; } .mc-ic svg { width:21px; height:21px; } .t-ic svg { width:18px; height:18px; } .e-ic svg { width:28px; height:28px; } .pg svg { width:16px; height:16px; } /* ------------------------------------------------------------- AUTH (login) */ .auth { display:grid; grid-template-columns:1.05fr .95fr; min-height:100vh; } .auth-brand { position:relative; overflow:hidden; color:#fff; padding:54px 56px; display:flex; flex-direction:column; justify-content:space-between; background:linear-gradient(150deg,#4f46e5 0%,#6366f1 42%,#8b5cf6 100%); } .auth-brand::before { content:""; position:absolute; inset:0; background:radial-gradient(600px 360px at 90% 8%, rgba(255,255,255,.18), transparent 60%), radial-gradient(520px 420px at -5% 105%, rgba(255,255,255,.12), transparent 55%); } .auth-brand > * { position:relative; z-index:1; } .ab-logo { display:flex; align-items:center; gap:13px; } .ab-logo .mark { width:46px; height:46px; border-radius:13px; background:rgba(255,255,255,.16); backdrop-filter:blur(6px); display:grid; place-items:center; border:1px solid rgba(255,255,255,.25); } .ab-hero h1 { font-size:38px; line-height:1.12; font-weight:750; letter-spacing:-.025em; margin:0 0 16px; max-width:15ch; } .ab-hero p { font-size:15.5px; line-height:1.6; color:rgba(255,255,255,.85); max-width:46ch; margin:0; } .ab-feats { display:flex; flex-direction:column; gap:14px; margin-top:30px; } .ab-feat { display:flex; align-items:center; gap:12px; font-size:14px; font-weight:500; color:rgba(255,255,255,.92); } .ab-feat .fi { width:30px; height:30px; border-radius:9px; background:rgba(255,255,255,.16); display:grid; place-items:center; flex:none; } .ab-stat { display:flex; gap:34px; padding:20px 24px; border-radius:16px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); backdrop-filter:blur(8px); width:max-content; } .ab-stat .s b { display:block; font-size:24px; font-weight:750; letter-spacing:-.02em; } .ab-stat .s span { font-size:12px; color:rgba(255,255,255,.8); } .auth-form { display:grid; place-items:center; padding:40px 24px; background:var(--bg); } .auth-card { width:100%; max-width:392px; } .auth-card h2 { font-size:25px; font-weight:750; letter-spacing:-.02em; margin:0 0 6px; } .auth-card .lead { color:var(--text-muted); font-size:14px; margin:0 0 26px; } .ipwrap { position:relative; } .ipwrap .ic-l { position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--text-subtle); } .ipwrap .ic-r { position:absolute; right:11px; top:50%; transform:translateY(-50%); color:var(--text-subtle); cursor:pointer; padding:4px; border-radius:7px; } .ipwrap .ic-r:hover { background:var(--surface-2); color:var(--text); } .ipwrap .input { padding-left:40px; height:46px; } .auth-row { display:flex; align-items:center; justify-content:space-between; margin:6px 0 20px; } .chk { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-muted); cursor:pointer; } .chk input { width:16px; height:16px; accent-color:var(--brand-600); } .lnk { font-size:13px; font-weight:600; color:var(--brand-600); cursor:pointer; } .btn-primary.lg { height:46px; font-size:14.5px; } .auth-foot { text-align:center; margin-top:22px; font-size:13px; color:var(--text-muted); } .auth-error { display:none; gap:10px; align-items:flex-start; margin:0 0 16px; padding:12px 14px; border-radius:12px; background:var(--danger-bg); border:1px solid var(--danger); font-size:12.5px; color:var(--danger-text); } .auth-error.show { display:flex; } .demo-note { display:flex; gap:10px; align-items:flex-start; margin-top:22px; padding:12px 14px; border-radius:12px; background:var(--brand-50); border:1px solid var(--border); font-size:12.5px; color:var(--text-muted); } .dark .demo-note { background:rgba(79,70,229,.12); } @media (max-width:880px){ .auth { grid-template-columns:1fr; } .auth-brand { display:none; } }