/* ════════════════════════════════════════════════════════════════ MultiMonitor Admin — CLIENT redesign design-system (cyan) — same DS as admin, accent=cyan (G3) (15.06 refinements) ONE source → dark (default) + light (.theme-light) + DS components. Tokens verified against frontend/src/design-system/design-tokens.css. New in v2: real-logo brand component (G1), password-eye (G2), light theme, key/license icon. AA-checked (pa11y, 0 fails target). ════════════════════════════════════════════════════════════════ */ /* ───────── DARK THEME (default) ───────── */ :root{ /* surfaces */ --bg:#0d1117; --sidebar:#0a0f1e; --card:#161b27; --card-2:#1c2333; --inset:#10151f; --border:#21283a; --border-strong:#2a3247; /* text */ --text:#ffffff; --text-2:#cfdae5; --dim:#97a6bf; /* client accent = cyan (brand) */ --accent:#06b6d4; --accent-hi:#22d3ee; --accent-soft:rgba(6,182,212,.15); --accent-glow:rgba(6,182,212,.30); --accent-text:#22d3ee; /* accent TEXT on dark bg (AA-pass); light overrides below (Норман R2) */ /* white text on cyan 06b6d4 FAILS AA -> use --accent-fill 0e7490 (5.36:1) */ --accent-fill:#0e7490; --accent-fill-hover:#155e75; /* status */ --ok:#17de95; --ok-soft:rgba(23,222,149,.14); --danger:#ef4444; --danger-text:#f87171; --danger-soft:rgba(239,68,68,.14); --warn:#eab308; --warn-text:#fde68a; --warn-soft:rgba(234,179,8,.14); --info:#3b82f6; --info-text:#93c5fd; --info-soft:rgba(59,130,246,.14); /* brand emblem teal (logo square) */ --brand-teal:#004854; /* radii / spacing / type */ --r-sm:6px; --r-md:8px; --r-lg:10px; --r-xl:12px; --r-2xl:16px; --pill:999px; --s-xs:4px; --s-sm:8px; --s-md:12px; --s-lg:16px; --s-xl:24px; --s-2xl:32px; --fs-xs:12px; --fs-sm:13px; --fs-base:14px; --fs-lg:16px; --fs-xl:18px; --fs-h:22px; --sidebar-w:236px; --mono:ui-monospace,"SF Mono",Menlo,monospace; --shadow-card:none; } /* ───────── LIGHT THEME (.theme-light on or ) ───────── */ .theme-light{ --bg:#eef1f7; --sidebar:#ffffff; --card:#ffffff; --card-2:#f1f4fa; --inset:#f6f8fc; --border:#e2e7f0; --border-strong:#cdd5e3; --text:#0f1729; --text-2:#33415a; --dim:#5b6880; /* global --dim keeps tier-hierarchy (Декстер R2-final); .mono tint-AA fixed via scoped rule below */ /* accent: fills keep deep teal (white text); text-on-light uses deeper teal */ --accent:#0891b2; --accent-hi:#0c5460; --accent-soft:rgba(8,145,178,.10); --accent-glow:rgba(8,145,178,.20); --accent-text:#0c5460; /* accent TEXT on light tint — AA 7.60 (Норман R2) */ --accent-fill:#0e7490; --accent-fill-hover:#155e75; /* status text darkened for AA on light tints (Норман AA-sweep, ≥5.5 — Декстер visa 2026-06-29) */ --ok:#065f46; --ok-soft:rgba(4,120,87,.12); --danger:#dc2626; --danger-text:#991b1b; --danger-soft:rgba(220,38,38,.10); --warn:#b45309; --warn-text:#9a3412; --warn-soft:rgba(180,83,9,.12); --info:#2563eb; --info-text:#1d4ed8; --info-soft:rgba(37,99,235,.10); --shadow-card:0 1px 2px rgba(15,23,41,.04),0 2px 8px rgba(15,23,41,.04); } *{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--text); font:var(--fs-base)/1.5 -apple-system,"Segoe UI",Roboto,Inter,system-ui,sans-serif; -webkit-font-smoothing:antialiased} .app{display:flex;min-height:100vh} /* ───────── BRAND LOGO (G1 — real MultiMonitor SVG) ───────── Full wordmark tints per theme via background-image swap (white↔ink); single source logo, two pre-colored variants (file:// blocks CSS mask). Square emblem = , keeps brand teal in both themes. */ .brand-logo{display:inline-block; background:url(assets/multimonitor-logo-white.svg) no-repeat center/contain} .theme-light .brand-logo{background-image:url(assets/multimonitor-logo-ink.svg)} .brand-emblem{display:block;border-radius:8px;flex:0 0 auto} /* sidebar brand lockup */ .brand{display:flex;align-items:center;gap:10px;padding:18px 16px 14px} .brand .brand-emblem{width:28px;height:28px;border-radius:7px} .brand .brand-logo{width:118px;height:14px} .brand-sub{font-size:10px;color:var(--dim);letter-spacing:.5px;text-transform:uppercase;margin-top:3px} /* ───── SIDEBAR ───── */ .sidebar{width:var(--sidebar-w);background:var(--sidebar);border-right:1px solid var(--border); position:fixed;inset:0 auto 0 0;display:flex;flex-direction:column;z-index:10} .nav{flex:1;overflow-y:auto;padding:6px 10px 14px} .nav-label{font-size:10px;letter-spacing:.9px;text-transform:uppercase;color:var(--dim); font-weight:600;padding:14px 10px 6px} .nav-link{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:var(--r-md); color:var(--text-2);text-decoration:none;cursor:pointer;margin-bottom:2px;font-size:13.5px;position:relative} .nav-link svg{width:18px;height:18px;flex:0 0 18px;color:var(--dim);stroke-width:1.8} .nav-link:hover{background:var(--accent-soft);color:var(--text)} .nav-link.active{background:var(--accent-soft);color:var(--accent-hi);font-weight:600} .nav-link.active svg{color:var(--accent-hi)} .nav-link.active::before{content:"";position:absolute;left:-10px;top:6px;bottom:6px;width:3px; border-radius:0 3px 3px 0;background:var(--accent)} .nav-sub{margin:2px 0 6px 30px;display:flex;flex-direction:column;gap:1px} .nav-sub a{font-size:12.5px;color:var(--dim);text-decoration:none;padding:6px 10px;border-radius:6px} .nav-sub a:hover{color:var(--text-2);background:var(--accent-soft)} .nav-sub a.active{color:var(--accent-hi);background:var(--accent-soft)} .sidebar-foot{border-top:1px solid var(--border);padding:12px 14px;display:flex;align-items:center;gap:10px} .avatar{width:30px;height:30px;border-radius:50%;background:var(--accent-soft);color:var(--accent-hi); display:flex;align-items:center;justify-content:center;font-weight:700;flex:0 0 30px} /* ───── MAIN / TOPBAR ───── */ .main{margin-left:var(--sidebar-w);flex:1;min-width:0;display:flex;flex-direction:column} .topbar{display:flex;align-items:center;justify-content:space-between;gap:16px; padding:16px 28px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--bg); z-index:5} .topbar h1{margin:0;font-size:var(--fs-xl);font-weight:600} .topbar .crumbs{font-size:12px;color:var(--dim)} .topbar-right{display:flex;align-items:center;gap:14px;color:var(--dim);flex-wrap:wrap;justify-content:flex-end} .page{padding:24px 28px;max-width:none;width:100%} .page-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap} .page-head h2{margin:0;font-size:var(--fs-h);font-weight:600} .page-sub{color:var(--dim);font-size:13px;margin:2px 0 0} /* ───── CARDS / GRID ───── */ .card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-xl);padding:20px;box-shadow:var(--shadow-card)} .card-pad0{padding:0;overflow:hidden} .card-title{font-size:13px;font-weight:600;color:var(--text);margin:0 0 14px;display:flex;align-items:center;gap:8px} .grid{display:grid;gap:18px} .grid-2{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:repeat(3,1fr)} .grid-4{grid-template-columns:repeat(4,1fr)} .grid-auto{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))} /* stat tile */ .stat{background:var(--card);border:1px solid var(--border);border-radius:var(--r-xl);padding:18px 20px;position:relative;overflow:hidden;box-shadow:var(--shadow-card)} .stat .ico{width:34px;height:34px;border-radius:9px;background:var(--accent-soft);color:var(--accent-hi); display:flex;align-items:center;justify-content:center;margin-bottom:12px} .stat .val{font-size:26px;font-weight:700;line-height:1} .stat .lbl{font-size:12px;color:var(--dim);margin-top:6px} .stat .delta{font-size:11px;font-weight:600;margin-top:6px} .stat .delta.up{color:var(--ok)} .stat .delta.down{color:var(--danger)} .stat.accent::after{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--accent)} /* ───── TABLES ───── */ .tbl-wrap{overflow-x:auto} table.tbl{width:100%;border-collapse:collapse} .tbl thead th{text-align:left;font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:var(--dim); font-weight:600;padding:12px 16px;background:var(--card-2);white-space:nowrap;position:sticky;top:0} .tbl tbody td{padding:13px 16px;border-top:1px solid var(--border);font-size:13.5px;vertical-align:middle} .tbl tbody tr:hover{background:var(--accent-soft)} .tbl tr.inactive td{opacity:.5} .mono{font-family:var(--mono);color:var(--dim)} /* Декстер R2-final: .mono on banner/danger-zone tints uses --text-2 for AA (light 6.71–7.83); global --dim kept */ .muted-banner .mono, .danger-zone .mono{color:var(--text-2)} .dim{color:var(--dim)} .t2{color:var(--text-2)} /* ───── BADGES / PILLS ───── */ .badge{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:var(--pill);font-size:12px;font-weight:600} .b-ok{background:var(--ok-soft);color:var(--ok)} .b-danger{background:var(--danger-soft);color:var(--danger-text)} .b-warn{background:var(--warn-soft);color:var(--warn-text)} .b-info{background:var(--info-soft);color:var(--info-text)} .b-accent{background:var(--accent-soft);color:var(--accent-hi)} .b-mute{background:var(--card-2);color:var(--text-2)} .dot{width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block;flex:0 0 7px} /* ───── BUTTONS ───── */ .btn{padding:9px 15px;border-radius:var(--r-md);font-size:13px;font-weight:600;border:1px solid var(--border-strong); background:var(--card-2);color:var(--text-2);cursor:pointer;display:inline-flex;align-items:center;gap:7px;text-decoration:none} .btn:hover{border-color:var(--accent);color:var(--text)} .btn-primary{background:var(--accent-fill);border-color:var(--accent-fill);color:#fff} .btn-primary:hover{background:var(--accent-fill-hover);border-color:var(--accent-fill-hover);color:#fff} .btn-danger{background:var(--danger-soft);border-color:var(--danger);color:var(--danger-text)} .btn-ghost{background:transparent} .btn-sm{padding:6px 11px;font-size:12.5px} .btn-icon{padding:8px;border-radius:var(--r-md)} .seg{display:inline-flex;gap:3px;padding:3px;background:var(--card-2);border:1px solid var(--border);border-radius:var(--r-lg)} .seg button,.seg .opt{padding:6px 13px;border-radius:7px;font-size:12.5px;color:var(--dim);border:0;background:none;cursor:pointer} .seg .opt.active,.seg button.active{background:var(--accent-fill);color:#fff;font-weight:600} /* ───── FORMS ───── */ label.fl{display:block;font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:var(--dim);font-weight:600;margin-bottom:6px} .input,.select,.textarea{width:100%;background:var(--card-2);border:1px solid var(--border-strong);border-radius:9px; padding:10px 13px;color:var(--text);font-size:14px;font-family:inherit} .input::placeholder{color:var(--dim);opacity:.8} .input:focus,.select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)} .field{margin-bottom:16px} .help{font-size:11px;color:var(--dim);margin-top:5px} /* ───── PASSWORD EYE (G2 — design-system pattern, ALL password fields) ───── */ .input-pw{position:relative} .input-pw .input{padding-right:42px} .input-pw .pw-toggle{position:absolute;top:50%;right:6px;transform:translateY(-50%); width:30px;height:30px;display:flex;align-items:center;justify-content:center; border:0;background:none;color:var(--dim);cursor:pointer;border-radius:7px} .input-pw .pw-toggle:hover{color:var(--text-2);background:var(--accent-soft)} .input-pw .pw-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:1px} .input-pw .pw-toggle svg{width:18px;height:18px;stroke-width:2} .input-pw .pw-toggle .ico-off{display:none} .input-pw.revealed .pw-toggle .ico-on{display:none} .input-pw.revealed .pw-toggle .ico-off{display:block} /* ───── MISC ───── */ .search{background:var(--card-2);border:1px solid var(--border);border-radius:9px;padding:9px 13px;color:var(--text);min-width:240px} .toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:14px 18px;border-bottom:1px solid var(--border)} .kv{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border);font-size:13.5px} .kv:last-child{border-bottom:none} .kv dt{color:var(--dim)} .kv dd{margin:0;font-weight:500} .bar{height:8px;border-radius:var(--pill);background:var(--card-2);overflow:hidden} .bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-hi))} .gauge-track{stroke:var(--card-2)} .gauge-fill{stroke:var(--accent)} .tag{font-size:11px;font-weight:700;color:var(--accent-hi);background:var(--accent-soft);padding:2px 9px;border-radius:var(--pill);letter-spacing:.4px} .health-dot{width:9px;height:9px;border-radius:50%;display:inline-block} .scrollbox{max-height:340px;overflow:auto} hr.sep{border:none;border-top:1px solid var(--border);margin:18px 0} .muted-banner{background:var(--accent-soft);border:1px solid var(--accent);border-radius:9px;padding:11px 14px;font-size:12.5px;color:var(--text-2)} /* ───── MODAL (DS primitive, mirrors frontend Modal.jsx sizes) ───── */ .modal-backdrop{position:fixed;inset:0;background:rgba(6,8,14,.62);backdrop-filter:blur(3px); display:flex;align-items:center;justify-content:center;padding:24px;z-index:50} .theme-light .modal-backdrop{background:rgba(15,23,41,.32)} .modal{background:var(--card);border:1px solid var(--border-strong);border-radius:var(--r-2xl); width:100%;box-shadow:0 24px 64px rgba(0,0,0,.45);overflow:hidden} .theme-light .modal{box-shadow:0 24px 64px rgba(15,23,41,.18)} .modal.sm{max-width:400px} .modal.md{max-width:520px} .modal.lg{max-width:720px} .modal-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 22px;border-bottom:1px solid var(--border)} .modal-head h3{margin:0;font-size:var(--fs-lg);font-weight:600} .modal-x{width:30px;height:30px;border:0;background:none;color:var(--dim);cursor:pointer;border-radius:7px;display:flex;align-items:center;justify-content:center} .modal-x:hover{background:var(--accent-soft);color:var(--text)} .modal-body{padding:20px 22px} .modal-foot{display:flex;justify-content:flex-end;gap:10px;padding:16px 22px;border-top:1px solid var(--border);background:var(--card-2)} .modal-ico{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex:0 0 42px} .modal-ico.danger{background:var(--danger-soft);color:var(--danger-text)} .modal-ico.accent{background:var(--accent-soft);color:var(--accent-hi)} .modal-ico.warn{background:var(--warn-soft);color:var(--warn-text)} /* ════════════════════════════════════════════════════════════════ ROUND 2 — G4 theme toggle · G5 header clock · G6 full-width + responsive ════════════════════════════════════════════════════════════════ */ /* ── G5: header clock ── */ .hdr-clock{display:inline-flex;align-items:center;gap:7px;color:var(--text-2);font-size:13px;font-variant-numeric:tabular-nums} .hdr-clock svg{width:15px;height:15px;color:var(--dim);stroke-width:1.9} .hdr-clock b{font-weight:600;letter-spacing:.3px} .hdr-clock .hdr-date{color:var(--dim);font-size:12px} .hdr-div{width:1px;height:18px;background:var(--border);display:inline-block;flex:0 0 1px} /* ── G4: theme toggle ── */ .theme-toggle{width:34px;height:34px;border-radius:var(--r-md);border:1px solid var(--border-strong); background:var(--card-2);color:var(--text-2);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto} .theme-toggle:hover{border-color:var(--accent);color:var(--text)} .theme-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .theme-toggle svg{width:17px;height:17px;stroke-width:1.9} .theme-toggle .ico-moon{display:none} .theme-light .theme-toggle .ico-sun{display:none} .theme-light .theme-toggle .ico-moon{display:block} /* compact toggle pinned to a corner (login/forgot) */ .login-toggle{position:fixed;top:20px;right:20px;z-index:20} .theme-light .login-toggle{background:#ffffff} /* ── G6: full-width + responsive grids ── */ .grid-12{display:grid;gap:18px;grid-template-columns:repeat(12,1fr);align-items:start} @media(max-width:1400px){ .grid-4{grid-template-columns:repeat(2,1fr)} } @media(max-width:1200px){ .grid-3{grid-template-columns:repeat(2,1fr)} .grid-12{grid-template-columns:1fr} .grid-12>*{grid-column:auto!important;grid-row:auto!important} .ch-grid{grid-template-columns:1fr} .ch-scope + .ch-scope{border-left:none;border-top:1px solid var(--border)} } @media(max-width:820px){ .grid-4,.grid-3,.grid-2{grid-template-columns:1fr} .page{padding:18px 16px} .topbar{padding:14px 16px;flex-wrap:wrap} .hdr-clock .hdr-date{display:none} } /* ── G6/mobile: off-canvas sidebar (burger drawer) ── */ .burger{display:none;width:36px;height:36px;border:1px solid var(--border-strong);background:var(--card-2); color:var(--text-2);border-radius:var(--r-md);cursor:pointer;align-items:center;justify-content:center;flex:0 0 auto} .burger svg{width:20px;height:20px;stroke-width:2} .sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(6,8,14,.55);z-index:15} .theme-light .sidebar-overlay{background:rgba(15,23,41,.40)} @media(max-width:820px){ .sidebar{transform:translateX(-100%);transition:transform .25s ease} .nav-open .sidebar{transform:translateX(0);box-shadow:0 0 48px rgba(0,0,0,.5)} .nav-open .sidebar-overlay{display:block} .main{margin-left:0} .burger{display:inline-flex} } /* ── row overflow menu (⋯ dropdown) ── */ .menu{background:var(--card);border:1px solid var(--border-strong);border-radius:11px; box-shadow:0 12px 32px rgba(0,0,0,.4);padding:6px;width:210px} .theme-light .menu{box-shadow:0 12px 32px rgba(15,23,41,.16)} .menu a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:7px;font-size:13px; color:var(--text-2);text-decoration:none;cursor:pointer} .menu a:hover{background:var(--accent-soft);color:var(--text)} .menu a svg{width:16px;height:16px;flex:0 0 16px;color:var(--dim);stroke-width:1.9} .menu a.danger{color:var(--danger-text)} .menu a.danger:hover{background:var(--danger-soft)} .menu a.danger svg{color:var(--danger-text)} .menu hr{border:none;border-top:1px solid var(--border);margin:5px 4px}