/* ============================================================ Fridjy admin — shared design system (dark, data-dense operator UI). Used by every admin-*.html page via admin-kit.js. ============================================================ */ :root{ --bg:#0e1014; --bg-2:#141821; --panel:#171c26; --panel-2:#1c222e; --line:#232a37; --line-2:#2e3746; --ink:#eef2f7; --ink-2:#c2cad6; --muted:#8794a6; --muted-2:#5f6b7d; --brand:#f2591f; --brand-2:#ff9e2c; --brand-ink:#fff; --ok:#28c07a; --warn:#e6a53a; --danger:#f04f5f; --info:#3b9dff; --policy:#a978ff; --top-bg:rgba(14,16,20,.72); --shadow:0 20px 50px -18px #000; --radius:12px; --radius-sm:9px; --font:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,Roboto,Helvetica,Arial,sans-serif; --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace; } /* ---- light theme (opt-in via data-theme="light" on ) ---- */ :root[data-theme="light"]{ --bg:#f5f7fa; --bg-2:#eef1f6; --panel:#ffffff; --panel-2:#f4f6f9; --line:#e4e8ef; --line-2:#d3dae4; --ink:#1a2029; --ink-2:#3f4a59; --muted:#6a7686; --muted-2:#9aa5b3; --top-bg:rgba(255,255,255,.78); --shadow:0 20px 50px -22px rgba(30,41,59,.35); } *{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased} a{color:inherit;text-decoration:none} /* ---- layout ---- */ .adm-layout{display:flex;min-height:100vh} .adm-side{width:236px;flex:none;background:var(--bg-2);border-right:1px solid var(--line);position:sticky;top:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column} .adm-content{flex:1;min-width:0;display:flex;flex-direction:column} .adm-main{padding:26px 30px 60px;max-width:1200px;width:100%} @media(max-width:900px){.adm-side{position:fixed;left:0;top:0;z-index:60;transform:translateX(-100%);transition:.2s;box-shadow:0 0 40px rgba(0,0,0,.5)}.adm-side.open{transform:none}.adm-main{padding:20px 16px 60px}} /* ---- sidebar ---- */ .adm-brand{display:flex;align-items:center;gap:9px;padding:18px 18px 14px;font-weight:800;font-size:17px} .adm-brand .m{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:16px;background:linear-gradient(135deg,var(--brand),var(--brand-2))} .adm-brand .tag{font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brand);border:1px solid var(--line-2);border-radius:5px;padding:2px 6px;margin-left:auto} .adm-nav{padding:6px 10px;flex:1} .adm-nav .grp{font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted-2);padding:14px 10px 6px} .adm-nav a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;color:var(--ink-2);font-size:13.5px;font-weight:500;margin:1px 0} .adm-nav a .ic{width:18px;text-align:center;font-size:15px;flex:none} .adm-nav a:hover{background:var(--panel);color:var(--ink)} .adm-nav a.on{background:linear-gradient(135deg,rgba(242,89,31,.16),rgba(255,158,44,.08));color:var(--ink);box-shadow:inset 2px 0 0 var(--brand)} .adm-nav a .badge{margin-left:auto;font-size:10.5px;font-weight:800;border-radius:999px;padding:1px 7px;background:var(--danger);color:#fff} .adm-nav a .badge.info{background:var(--info)} .adm-nav a .badge.warn{background:var(--warn)} .adm-side .foot{padding:12px;border-top:1px solid var(--line)} /* ---- topbar ---- */ .adm-top{display:flex;align-items:center;gap:14px;padding:15px 30px;border-bottom:1px solid var(--line);background:var(--top-bg);backdrop-filter:blur(10px);position:sticky;top:0;z-index:40} .adm-top h1{font-size:18px;font-weight:800;letter-spacing:-.01em;margin:0} .adm-top .crumb{font-size:12px;color:var(--muted)} .adm-top .sp{flex:1} .adm-top .kbtn{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line-2);border-radius:9px;padding:7px 12px;color:var(--muted);font-size:12.5px;cursor:pointer} .adm-top .kbtn kbd{background:var(--bg-2);border:1px solid var(--line-2);border-radius:4px;padding:0 5px;font-family:var(--mono);font-size:11px} .adm-top .me{display:flex;align-items:center;gap:9px} .adm-top .me .av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:12px;color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand-2))} .adm-burger{display:none;background:none;border:none;color:var(--ink);font-size:22px;cursor:pointer} @media(max-width:900px){.adm-burger{display:block}.adm-top{padding:13px 16px}} /* ---- primitives ---- */ .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px} .card h2{font-size:15px;font-weight:800;margin:0 0 4px} .card .sub{color:var(--muted);font-size:12.5px;margin-bottom:12px} .page-head{margin:0 0 20px} .page-head h1{font-size:22px;font-weight:800;letter-spacing:-.01em;margin:0 0 4px} .page-head p{color:var(--muted);font-size:13.5px;margin:0} .kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:22px} .kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px} .kpi .lbl{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)} .kpi .val{font-size:26px;font-weight:800;letter-spacing:-.02em;margin-top:4px} .kpi .delta{font-size:12px;font-weight:600;margin-top:2px} .kpi .delta.up{color:var(--ok)} .kpi .delta.down{color:var(--danger)} .grid{display:grid;gap:16px} .grid.g2{grid-template-columns:1fr 1fr} .grid.g3{grid-template-columns:repeat(3,1fr)} @media(max-width:800px){.grid.g2,.grid.g3{grid-template-columns:1fr}} .badge{display:inline-block;font-size:11px;font-weight:700;padding:2px 9px;border-radius:999px;background:var(--panel-2);color:var(--ink-2);border:1px solid var(--line-2)} .badge.ok{background:rgba(40,192,122,.15);color:var(--ok);border-color:transparent} .badge.warn{background:rgba(230,165,58,.15);color:var(--warn);border-color:transparent} .badge.danger{background:rgba(240,79,95,.15);color:var(--danger);border-color:transparent} .badge.info{background:rgba(59,157,255,.15);color:var(--info);border-color:transparent} .btn{display:inline-flex;align-items:center;gap:7px;font-family:var(--font);font-weight:700;font-size:13.5px;border:1px solid var(--line-2);background:var(--panel-2);color:var(--ink);padding:9px 16px;border-radius:9px;cursor:pointer} .btn:hover{border-color:var(--muted-2)} .btn.primary{background:linear-gradient(135deg,var(--brand),#ff7a2f);border:none;color:#fff} .btn.danger{background:rgba(240,79,95,.12);border-color:rgba(240,79,95,.3);color:var(--danger)} .btn.sm{padding:6px 11px;font-size:12.5px} input,textarea,select{font-family:var(--font);font-size:13.5px;color:var(--ink);background:var(--bg-2);border:1px solid var(--line-2);border-radius:8px;padding:10px 12px} input:focus,textarea:focus,select:focus{outline:none;border-color:var(--brand)} label{font-size:12px;font-weight:600;color:var(--muted);display:block;margin-bottom:5px} .field{margin-bottom:14px} table.tbl{width:100%;border-collapse:collapse;font-size:13px} .tbl th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;padding:9px 12px;border-bottom:1px solid var(--line)} .tbl td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:middle} .tbl tr:hover td{background:var(--panel-2)} .tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius)} .empty{text-align:center;color:var(--muted);padding:40px 20px} .spin{display:inline-block;width:16px;height:16px;border:2px solid var(--line-2);border-top-color:var(--brand);border-radius:50%;animation:spin .7s linear infinite;vertical-align:middle} @keyframes spin{to{transform:rotate(360deg)}} .toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);z-index:200;background:var(--panel);color:var(--ink);border:1px solid var(--line-2);font-weight:600;padding:12px 20px;border-radius:12px;opacity:0;pointer-events:none;transition:.2s;box-shadow:var(--shadow)} .toast.show{opacity:1;transform:translateX(-50%) translateY(0)} /* command palette */ .cmdk-ov{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);display:none;align-items:flex-start;justify-content:center;padding-top:14vh} .cmdk-ov.show{display:flex} .cmdk{width:min(560px,92vw);background:var(--panel);border:1px solid var(--line-2);border-radius:14px;overflow:hidden;box-shadow:var(--shadow)} .cmdk input{width:100%;border:none;border-bottom:1px solid var(--line);border-radius:0;background:transparent;font-size:15px;padding:15px 18px} .cmdk .res{max-height:min(50vh,380px);overflow-y:auto;padding:6px} .cmdk .res a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:9px;color:var(--ink-2);font-size:14px} .cmdk .res a.on,.cmdk .res a:hover{background:var(--panel-2);color:var(--ink)} .cmdk .res .ic{width:18px;text-align:center}