/* ==========================================================================
THE DIGITAL EXPERTS — Agency OS · design system
Light theme · white cards · soft blue/navy
========================================================================== */
:root{
--navy:#1d2352; --navy-2:#2c3670; --blue:#5451ee; --blue-2:#413bd9; --sky:#eeeefe;
--bg:#f3f4fb; --card:#ffffff; --ink:#262a44; --muted:#6b7390; --line:#e4e7f4; --line-2:#eff1f8;
--ok:#16a34a; --ok-bg:#e7f7ee; --amber:#d97706; --amber-bg:#fef4e2; --red:#dc2626; --red-bg:#fdecec;
--violet:#7c3aed; --violet-bg:#f1eafe; --cyan:#0891b2; --cyan-bg:#e5f8fc; --teal:#0d9488; --teal-bg:#e4f7f4;
--indigo:#4f46e5; --indigo-bg:#eceafe; --slate:#64748b; --slate-bg:#eef2f7; --gray:#6b7280; --gray-bg:#f3f4f6;
--radius:14px; --radius-sm:10px; --shadow:0 1px 2px rgba(15,42,67,.05),0 6px 24px -8px rgba(15,42,67,.08);
--shadow-lg:0 12px 40px -12px rgba(15,42,67,.25);
--font:"Inter","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);background:var(--bg);color:var(--ink);font-size:14.5px;line-height:1.55}
h1,h2,h3,h4{color:var(--navy);margin:0;font-weight:700;letter-spacing:-.01em}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
.muted{color:var(--muted)}
.small{font-size:12.5px}
.pad{padding:14px}
.nowrap{white-space:nowrap}
.right{text-align:right}
.center{text-align:center}
.hidden,[hidden]{display:none !important}
.ic{flex:none;vertical-align:-3px}
/* ============================ layout ============================ */
.app{display:flex;min-height:100vh}
.sidebar{width:248px;background:linear-gradient(180deg,var(--navy) 0%,#0c2236 100%);color:#c9d6e5;display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;z-index:60;transition:transform .25s ease}
.brand{display:flex;gap:10px;align-items:center;padding:18px 18px 14px;color:#fff}
.brand:hover{text-decoration:none}
.brand-mark{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,#2563eb,#38bdf8);color:#fff;font-weight:800;display:grid;place-items:center;font-size:13px;letter-spacing:.03em;box-shadow:0 4px 12px rgba(37,99,235,.4)}
.brand-text{display:flex;flex-direction:column;font-weight:700;font-size:14px;line-height:1.2}
.brand-text small{font-weight:500;color:#8fb0cc;font-size:11px}
.side-nav{flex:1;overflow-y:auto;padding:8px 10px 14px;display:flex;flex-direction:column;gap:2px}
.snav{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:10px;color:#b9c9da;font-weight:550;font-size:13.8px;position:relative}
.snav .ic{opacity:.85}
.snav:hover{background:rgba(255,255,255,.07);color:#fff;text-decoration:none}
.snav.on{background:linear-gradient(90deg,rgba(37,99,235,.95),rgba(29,78,216,.85));color:#fff;box-shadow:0 4px 14px -4px rgba(37,99,235,.55)}
.nav-badge{margin-left:auto;background:#f43f5e;color:#fff;font-style:normal;font-size:11px;font-weight:700;min-width:19px;height:19px;border-radius:10px;display:grid;place-items:center;padding:0 5px}
.side-user{display:flex;gap:10px;align-items:center;padding:14px;border-top:1px solid rgba(255,255,255,.08)}
.side-user-meta{flex:1;min-width:0}
.side-user-meta b{display:block;color:#fff;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-user-meta small{color:#8fa9c2;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.sidebar .icon-btn{color:#b9c9da}
.sidebar .icon-btn:hover{background:rgba(255,255,255,.1);color:#fff}
.sidebar-backdrop{display:none}
.main{flex:1;margin-left:248px;display:flex;flex-direction:column;min-width:0}
.topbar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:12px 22px}
.topbar-title{min-width:0}
.topbar-title h1{font-size:19px}
.topbar-title p{margin:0;color:var(--muted);font-size:12.5px}
.topbar-search{margin-left:auto;display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:7px 12px;color:var(--muted);min-width:230px}
.topbar-search input{border:0;background:transparent;outline:0;font:inherit;color:var(--ink);width:100%}
.topbar-actions{display:flex;align-items:center;gap:8px}
.user-chip{display:flex;align-items:center;gap:9px;font-weight:600;color:var(--ink);padding:5px 9px;border-radius:10px}
.user-chip:hover{background:var(--bg);text-decoration:none}
.content{padding:24px;max-width:1560px;width:100%;margin:0 auto}
/* ============================ cards / grid ============================ */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.card-pad{padding:18px}
.card-head{display:flex;align-items:center;gap:10px;padding:15px 18px;border-bottom:1px solid var(--line-2)}
.card-head h3{font-size:15px}
.card-head .spacer{margin-left:auto}
.card-body{padding:18px}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
.g5{grid-template-columns:repeat(5,1fr)}.g6{grid-template-columns:repeat(6,1fr)}
.row{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.col{display:flex;flex-direction:column;gap:14px}
.spacer{margin-left:auto}
.mt{margin-top:14px}.mb{margin-bottom:14px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);display:flex;gap:13px;align-items:center}
.stat-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:#fff;flex:none}
.stat b{font-size:22px;color:var(--navy);display:block;line-height:1.1}
.stat span{color:var(--muted);font-size:12.5px}
.ic-blue{background:linear-gradient(135deg,#2563eb,#1d4ed8)}.ic-green{background:linear-gradient(135deg,#16a34a,#15803d)}
.ic-amber{background:linear-gradient(135deg,#f59e0b,#d97706)}.ic-red{background:linear-gradient(135deg,#ef4444,#dc2626)}
.ic-violet{background:linear-gradient(135deg,#8b5cf6,#7c3aed)}.ic-cyan{background:linear-gradient(135deg,#06b6d4,#0891b2)}
.ic-navy{background:linear-gradient(135deg,#16395c,#0f2a43)}.ic-pink{background:linear-gradient(135deg,#ec4899,#db2777)}
/* ============================ buttons ============================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid transparent;border-radius:10px;padding:9px 15px;font:inherit;font-weight:600;font-size:13.5px;cursor:pointer;background:var(--blue);color:#fff;transition:.15s;white-space:nowrap}
.btn:hover{background:var(--blue-2);text-decoration:none;box-shadow:0 4px 14px -4px rgba(37,99,235,.5)}
.btn:active{transform:translateY(1px)}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{background:var(--bg);box-shadow:none}
.btn-soft{background:var(--sky);color:var(--blue-2)}
.btn-soft:hover{background:#dbe7fd;box-shadow:none}
.btn-green{background:var(--ok)}.btn-green:hover{background:#15803d;box-shadow:0 4px 14px -4px rgba(22,163,74,.5)}
.btn-red{background:var(--red)}.btn-red:hover{background:#b91c1c;box-shadow:0 4px 14px -4px rgba(220,38,38,.5)}
.btn-sm{padding:6px 11px;font-size:12.5px;border-radius:8px}
.btn-block{width:100%}
.btn[disabled]{opacity:.55;cursor:not-allowed;pointer-events:none}
.icon-btn{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:10px;border:1px solid transparent;background:transparent;color:var(--muted);cursor:pointer;position:relative}
.icon-btn:hover{background:var(--bg);color:var(--ink)}
.linklike{background:none;border:0;color:var(--blue);font:inherit;cursor:pointer;padding:0}
/* ============================ badges ============================ */
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:99px;font-size:11.5px;font-weight:650;white-space:nowrap}
.b-gray{background:var(--gray-bg);color:#4b5563}.b-slate{background:var(--slate-bg);color:#475569}
.b-blue{background:var(--sky);color:#1d4ed8}.b-amber{background:var(--amber-bg);color:#b45309}
.b-violet{background:var(--violet-bg);color:#6d28d9}.b-cyan{background:var(--cyan-bg);color:#0e7490}
.b-teal{background:var(--teal-bg);color:#0f766e}.b-indigo{background:var(--indigo-bg);color:#4338ca}
.b-green{background:var(--ok-bg);color:#15803d}.b-red{background:var(--red-bg);color:#b91c1c}
/* ============================ forms ============================ */
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label{font-weight:600;font-size:12.8px;color:var(--navy)}
.field label .req{color:var(--red)}
.input,select.input,textarea.input{width:100%;border:1px solid var(--line);border-radius:10px;padding:9px 12px;font:inherit;font-size:13.8px;background:#fff;color:var(--ink);outline:0;transition:border .15s,box-shadow .15s}
.input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.14)}
textarea.input{min-height:88px;resize:vertical}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.form-grid .full{grid-column:1/-1}
.field-hint{font-size:12px;color:var(--muted)}
.search-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.search-row .input{width:auto}
fieldset{border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin:0 0 14px}
legend{font-weight:700;color:var(--navy);padding:0 8px;font-size:13.5px}
.rte-toolbar{display:flex;gap:4px;border:1px solid var(--line);border-bottom:0;border-radius:10px 10px 0 0;background:var(--bg);padding:5px}
.rte-toolbar button{border:0;background:transparent;border-radius:7px;width:28px;height:28px;cursor:pointer;font-weight:700;color:var(--muted);font-size:13px}
.rte-toolbar button:hover{background:#fff;color:var(--ink)}
.rte{border:1px solid var(--line);border-radius:0 0 10px 10px;min-height:90px;padding:10px 12px;outline:0;font-size:13.8px;background:#fff}
.rte:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.14)}
/* ============================ tables ============================ */
.table-wrap{overflow-x:auto;border-radius:var(--radius)}
table.tbl{width:100%;border-collapse:collapse;font-size:13.5px;background:#fff}
.tbl th{text-align:left;padding:11px 14px;color:var(--muted);font-size:11.8px;text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--line);background:var(--line-2);white-space:nowrap}
.tbl td{padding:11px 14px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:hover{background:#f8fbff}
.tbl .actions{display:flex;gap:4px;justify-content:flex-end}
.cell-main{display:flex;align-items:center;gap:10px;min-width:0}
.cell-main b{display:block;color:var(--navy);font-size:13.5px}
.cell-main small{color:var(--muted)}
.avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;flex:none;background:var(--line)}
.avatar-lg{width:52px;height:52px}
.avatar-xs{width:26px;height:26px}
/* ============================ page head / tabs ============================ */
.page-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.page-head h2{font-size:20px}
.tabs{display:flex;gap:4px;background:#fff;border:1px solid var(--line);padding:4px;border-radius:12px;width:max-content;max-width:100%;overflow-x:auto}
.tab{padding:7px 15px;border-radius:9px;color:var(--muted);font-weight:600;font-size:13px;white-space:nowrap}
.tab:hover{color:var(--ink);text-decoration:none;background:var(--bg)}
.tab.on{background:var(--navy);color:#fff}
.tab .nav-badge{position:static;margin-left:7px}
/* ============================ progress ============================ */
.progress{height:8px;border-radius:99px;background:var(--line-2);overflow:hidden}
.progress > i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#2563eb,#38bdf8);transition:width .4s}
.progress.ok > i{background:linear-gradient(90deg,#16a34a,#4ade80)}
.progress.warn > i{background:linear-gradient(90deg,#f59e0b,#fbbf24)}
.progress.bad > i{background:linear-gradient(90deg,#dc2626,#f87171)}
.ring{--p:0;--c:#2563eb;width:86px;height:86px;border-radius:50%;background:conic-gradient(var(--c) calc(var(--p)*1%),var(--line-2) 0);display:grid;place-items:center;flex:none}
.ring i{width:66px;height:66px;background:#fff;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:800;color:var(--navy);font-size:17px}
/* ============================ calendar ============================ */
.cal{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.cal-head{display:grid;grid-template-columns:repeat(7,1fr);background:var(--navy);color:#b9c9da;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.cal-head div{padding:9px 12px}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr)}
.cal-day{min-height:118px;border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2);padding:6px;position:relative;background:#fff;transition:background .15s}
.cal-day:nth-child(7n){border-right:0}
.cal-day.dim{background:#f8fafd}
.cal-day.dim .cal-date{color:#a9b8c8}
.cal-day.today{box-shadow:inset 0 0 0 2px var(--blue)}
.cal-day.dragover{background:var(--sky)}
.cal-date{font-weight:700;color:var(--navy);font-size:12.5px;display:flex;justify-content:space-between;align-items:center}
.cal-add{opacity:0;border:0;background:var(--sky);color:var(--blue-2);border-radius:7px;width:21px;height:21px;cursor:pointer;font-size:14px;line-height:1;padding:0}
.cal-day:hover .cal-add{opacity:1}
.cal-events{display:flex;flex-direction:column;gap:4px;margin-top:5px}
.evt{display:block;border-radius:8px;padding:4px 7px;font-size:11.3px;line-height:1.35;border-left:3px solid var(--blue);background:var(--sky);color:var(--ink);cursor:pointer;overflow:hidden}
.evt:hover{text-decoration:none;filter:brightness(.97)}
.evt b{display:block;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.evt small{color:var(--muted);display:flex;justify-content:space-between;gap:4px}
.evt.st-idea{background:var(--gray-bg);border-color:#9ca3af}.evt.st-planned{background:var(--slate-bg);border-color:#64748b}
.evt.st-assigned{background:var(--sky);border-color:#2563eb}.evt.st-in_progress{background:var(--amber-bg);border-color:#f59e0b}
.evt.st-internal_review{background:var(--violet-bg);border-color:#8b5cf6}.evt.st-client_review{background:var(--cyan-bg);border-color:#06b6d4}
.evt.st-approved{background:var(--teal-bg);border-color:#0d9488}.evt.st-scheduled{background:var(--indigo-bg);border-color:#6366f1}
.evt.st-published{background:var(--ok-bg);border-color:#16a34a}.evt.st-completed{background:#dcf5e6;border-color:#15803d}
.evt.st-cancelled{background:var(--red-bg);border-color:#dc2626;text-decoration:line-through}
.evt[draggable=true]{cursor:grab}
.cal-more{font-size:11px;color:var(--blue);padding:1px 6px}
/* kanban */
.board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(250px,1fr);gap:14px;overflow-x:auto;padding-bottom:8px;align-items:start}
.board-col{background:#f7f9fc;border:1px solid var(--line);border-radius:var(--radius);min-height:160px}
.board-col h4{padding:12px 14px;font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);border-bottom:1px solid var(--line-2);display:flex;justify-content:space-between}
.board-col .pad2{padding:10px;display:flex;flex-direction:column;gap:8px}
.mini-card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:block;color:var(--ink)}
.mini-card:hover{text-decoration:none;border-color:#c8d8ec;box-shadow:var(--shadow)}
.mini-card b{display:block;font-size:13px;color:var(--navy)}
/* ============================ modal ============================ */
.modal-bk{position:fixed;inset:0;background:rgba(10,25,44,.5);backdrop-filter:blur(2px);z-index:90;display:none;align-items:flex-start;justify-content:center;padding:4vh 14px;overflow-y:auto}
.modal-bk.open{display:flex}
.modal{background:#fff;border-radius:16px;box-shadow:var(--shadow-lg);width:100%;max-width:640px;animation:pop .18s ease}
.modal-lg{max-width:860px}
.modal-sm{max-width:440px}
@keyframes pop{from{transform:translateY(12px) scale(.98);opacity:0}}
.modal-head{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--line-2)}
.modal-head h3{font-size:16px;flex:1}
.modal-body{padding:20px;max-height:70vh;overflow-y:auto}
.modal-foot{padding:14px 20px;border-top:1px solid var(--line-2);display:flex;justify-content:flex-end;gap:10px}
/* ============================ toast ============================ */
#toasts{position:fixed;bottom:18px;right:18px;z-index:120;display:flex;flex-direction:column;gap:8px;max-width:min(92vw,380px)}
.toast{background:var(--navy);color:#fff;padding:12px 16px;border-radius:12px;box-shadow:var(--shadow-lg);display:flex;gap:10px;align-items:flex-start;font-size:13.5px;animation:slidein .25s ease}
.toast.success{background:#14532d}.toast.error{background:#7f1d1d}.toast.warning{background:#92400e}
@keyframes slidein{from{transform:translateX(20px);opacity:0}}
/* ============================ lightbox ============================ */
.lightbox{position:fixed;inset:0;background:rgba(8,18,33,.86);z-index:130;display:grid;place-items:center;padding:20px}
.lightbox img{max-width:94vw;max-height:90vh;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lightbox-close{position:absolute;top:16px;right:16px;background:rgba(255,255,255,.12);color:#fff;border:0;width:42px;height:42px;border-radius:12px;cursor:pointer;display:grid;place-items:center}
.lightbox-close:hover{background:rgba(255,255,255,.22)}
/* ============================ dropdowns ============================ */
.dropdown{position:relative}
.dropdown-menu{position:absolute;right:0;top:calc(100% + 8px);background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);min-width:220px;display:none;z-index:80}
.dropdown.open .dropdown-menu{display:block}
.dropdown-head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line-2)}
.dropdown-foot{display:block;text-align:center;padding:10px;border-top:1px solid var(--line-2);font-size:13px}
.notif-menu{width:min(360px,92vw)}
.notif-list{max-height:380px;overflow-y:auto}
.notif{display:flex;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line-2);color:var(--ink)}
.notif:last-child{border-bottom:0}
.notif:hover{background:#f8fbff;text-decoration:none}
.notif .dot{width:8px;height:8px;border-radius:50%;background:var(--blue);margin-top:6px;flex:none}
.notif.read .dot{background:var(--line)}
.notif b{display:block;font-size:13px;color:var(--navy)}
.notif small{color:var(--muted)}
.bell-count{position:absolute;top:2px;right:2px;background:#f43f5e;color:#fff;font-size:10px;font-weight:800;min-width:16px;height:16px;border-radius:9px;display:grid;place-items:center;padding:0 4px}
/* ============================ misc ============================ */
.photo-thumb{width:56px;height:56px;object-fit:cover;border-radius:10px;border:1px solid var(--line);cursor:pointer;background:var(--bg)}
.no-photo{width:56px;height:56px;border-radius:10px;background:var(--bg);display:grid;place-items:center;color:#a9b8c8;font-size:11px;text-align:center;border:1px dashed var(--line)}
.empty{padding:36px 18px;text-align:center;color:var(--muted)}
.empty .ic{opacity:.4;margin-bottom:8px}
.divider{height:1px;background:var(--line-2);margin:14px 0}
.kv{display:grid;grid-template-columns:150px 1fr;gap:7px 14px;font-size:13.5px}
.kv dt{color:var(--muted)}.kv dd{margin:0}
.list{display:flex;flex-direction:column}
.list-item{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line-2);align-items:flex-start}
.list-item:last-child{border-bottom:0}
.pill-tabs{display:flex;gap:6px;flex-wrap:wrap}
.pill-tabs .pill{padding:5px 12px;border-radius:99px;border:1px solid var(--line);background:#fff;color:var(--muted);font-size:12.5px;font-weight:600}
.pill-tabs .pill:hover{text-decoration:none;color:var(--ink)}
.pill-tabs .pill.on{background:var(--navy);border-color:var(--navy);color:#fff}
.timeline{position:relative;padding-left:22px}
.timeline::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:2px;background:var(--line)}
.tl-item{position:relative;padding:0 0 16px}
.tl-item::before{content:"";position:absolute;left:-20px;top:5px;width:10px;height:10px;border-radius:50%;background:var(--blue);border:2px solid #fff;box-shadow:0 0 0 2px var(--line)}
.tl-item small{color:var(--muted)}
.client-hero{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.client-logo{width:64px;height:64px;border-radius:16px;object-fit:cover;border:1px solid var(--line);background:#fff}
.client-logo.round{border-radius:50%}
.checklist li{margin:6px 0}
.pagination{display:flex;gap:6px;justify-content:center;padding:14px}
.pg{padding:6px 12px;border-radius:8px;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:13px}
.pg.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.pg:hover{text-decoration:none}
.inline-form{display:inline}
.att-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:22px;text-align:center}
.att-time{font-size:30px;font-weight:800;color:var(--navy);font-variant-numeric:tabular-nums}
video.cam{width:100%;border-radius:12px;background:#000;transform:scaleX(-1)}
canvas.shot{width:100%;border-radius:12px}
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:radial-gradient(1200px 600px at 80% -10%,#dbeafe 0%,transparent 55%),radial-gradient(900px 500px at -10% 110%,#e0e7ff 0%,transparent 50%),var(--bg);padding:20px}
.login-card{background:#fff;border-radius:20px;box-shadow:var(--shadow-lg);display:grid;grid-template-columns:1.05fr 1fr;overflow:hidden;max-width:920px;width:100%;min-height:560px}
.login-side{background:linear-gradient(160deg,var(--navy) 0%,#123252 55%,#1d4ed8 130%);color:#c9d6e5;padding:44px 40px;display:flex;flex-direction:column;justify-content:space-between}
.login-side h2{color:#fff;font-size:27px;line-height:1.25}
.login-side p{color:#9db6cf}
.login-side .tick{display:flex;gap:9px;align-items:center;color:#d5e3f2;font-size:13.5px;margin-top:13px}
.login-side .tick .ic{color:#7dd3fc}
.login-form{padding:44px 40px;display:flex;flex-direction:column;justify-content:center}
.login-form h1{font-size:24px;margin-bottom:4px}
.pwd-wrap{position:relative}
.pwd-wrap .input{padding-right:42px}
.pwd-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%)}
.alert{padding:12px 15px;border-radius:11px;font-size:13.5px;display:flex;gap:9px;align-items:flex-start}
.alert.error{background:var(--red-bg);color:#991b1b}
.alert.success{background:var(--ok-bg);color:#166534}
.alert.info{background:var(--sky);color:#1e40af}
.alert.warning{background:var(--amber-bg);color:#92400e}
.only-mobile{display:none}
.stepper{display:flex;gap:8px;margin-bottom:16px}
.step{flex:1;text-align:center;font-size:12px;color:var(--muted);padding-bottom:8px;border-bottom:3px solid var(--line);font-weight:600}
.step.on{color:var(--blue-2);border-color:var(--blue)}
/* print */
@media print{
.sidebar,.topbar,.sidebar-backdrop,#toasts,.no-print{display:none !important}
.main{margin-left:0}
body{background:#fff}
.card{box-shadow:none;border:1px solid #ccc}
.content{padding:0}
}
/* ============================ responsive ============================ */
@media (max-width:1200px){.g5,.g6{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:1024px){
.sidebar{transform:translateX(-102%)}
.sidebar.open{transform:none;box-shadow:var(--shadow-lg)}
.sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(10,25,44,.55);backdrop-filter:blur(3px);z-index:55}
.sidebar.open + .sidebar-backdrop, body.sidebar-open .sidebar-backdrop{display:block}
.main{margin-left:0}
.only-mobile{display:inline-grid}
.g3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
.content{padding:14px 12px}
.topbar{padding:10px 14px;gap:10px}
.topbar-search{min-width:0;flex:1}
.only-desktop{display:none}
.g2,.g3,.g4,.g5,.g6{grid-template-columns:1fr !important}
.form-grid{grid-template-columns:1fr !important}
.login-card{grid-template-columns:1fr;min-height:0}
.login-side{display:none}
.login-form{padding:28px 18px}
.cal-day{min-height:76px;padding:4px}
.cal-head div{padding:7px 6px;font-size:10px}
.evt{padding:3px 5px;font-size:10.2px}
.evt small{display:none}
.cal-add{display:none}
.kv{grid-template-columns:1fr;gap:2px}
.stat b{font-size:19px}
.hide-mobile{display:none !important}
/* 1. iOS Auto-zoom Prevention (<16px font-size causes iOS Safari auto-zoom) */
.input, select.input, textarea.input, input[type="text"], input[type="search"], input[type="date"], input[type="month"], input[type="email"], input[type="password"], input[type="number"], input[type="url"] {
font-size: 16px !important;
}
/* 2. Touch targets minimum 44px */
.btn {
min-height: 44px;
padding: 10px 16px;
}
.btn-sm {
min-height: 38px;
padding: 7px 12px;
}
.icon-btn {
min-width: 44px;
min-height: 44px;
}
.snav {
min-height: 44px;
padding: 11px 14px;
}
.tab {
min-height: 38px;
display: inline-flex;
align-items: center;
}
.pill-tabs .pill {
min-height: 36px;
display: inline-flex;
align-items: center;
}
/* 3. Mobile Table Scrolling without viewport breakage */
.table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
width: 100%;
max-width: 100%;
margin-bottom: 12px;
}
/* 4. Modals on phone viewports (360px - 430px) */
.modal-bk {
padding: 10px 8px;
align-items: center;
}
.modal, .modal-lg, .modal-sm {
max-width: 95vw !important;
width: 100% !important;
max-height: 92vh !important;
margin: auto;
border-radius: 16px;
}
.modal-head {
padding: 12px 16px;
}
.modal-body {
padding: 16px;
max-height: calc(92vh - 120px) !important;
}
.modal-foot {
padding: 12px 16px;
flex-wrap: wrap;
gap: 8px;
}
.modal-foot .btn {
flex: 1;
min-width: 120px;
}
}
@media (max-width:380px){
.topbar-title h1{font-size:16px}
.btn{padding:8px 12px;font-size:13px}
.content{padding:10px 8px}
}
/* ==========================================================================
v1.1 — iOS-STYLE GLASS LAYER
Translucent, blurred surfaces over an animated mesh gradient.
Pure override — every legacy class keeps working; visuals only.
========================================================================== */
:root{
--radius:20px; --radius-sm:14px;
--glass:rgba(255,255,255,.66); --glass-2:rgba(255,255,255,.5);
--glass-brd:rgba(255,255,255,.55);
--shadow:0 1px 2px rgba(15,42,67,.05),0 10px 30px -10px rgba(15,42,67,.14);
--shadow-lg:0 18px 50px -12px rgba(15,42,67,.30);
--blur:blur(22px) saturate(1.6);
--spring:cubic-bezier(.34,1.45,.5,1);
}
html{background:#eceef9}
body{background:transparent}
:focus-visible{outline:2px solid rgba(99,97,240,.6);outline-offset:2px;border-radius:6px}
/* ---------------- animated mesh gradient backdrop ---------------- */
body::before,body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none}
body::before{
background:
radial-gradient(640px 440px at 10% 6%, rgba(84,81,238,.19), transparent 62%),
radial-gradient(560px 420px at 90% 16%, rgba(139,92,246,.16), transparent 60%),
radial-gradient(760px 560px at 50% 112%, rgba(20,184,166,.15), transparent 62%);
}
body::after{
background:
radial-gradient(480px 360px at 82% 84%, rgba(56,189,248,.16), transparent 62%),
radial-gradient(420px 340px at 8% 88%, rgba(236,72,153,.10), transparent 60%);
animation:meshDrift 26s ease-in-out infinite alternate;
}
@keyframes meshDrift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-4%,3%,0) scale(1.06)}}
/* ---------------- glass surfaces ---------------- */
.card,.stat{
background:var(--glass);
-webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
border:1px solid var(--glass-brd);
box-shadow:var(--shadow);
transition:transform .28s var(--spring),box-shadow .28s ease,background .28s ease;
}
.content .card:hover{box-shadow:var(--shadow-lg)}
.stat{--rx:0deg;--ry:0deg;position:relative;overflow:hidden;transform:perspective(800px) rotateX(var(--rx)) rotateY(var(--ry))}
.stat::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .3s;pointer-events:none;
background:radial-gradient(220px 160px at var(--mx,50%) var(--my,50%),rgba(255,255,255,.55),transparent 65%)}
.stat.tilting{transition:transform .12s ease;box-shadow:var(--shadow-lg)}
.stat.tilting::before{opacity:1}
.stat-ic{border-radius:15px;box-shadow:0 8px 18px -6px rgba(15,42,67,.4)}
.cal{background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--glass-brd)}
.cal-day{background:transparent}
.cal-day.dim{background:rgba(241,245,251,.5)}
.board-col{background:var(--glass-2);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--glass-brd)}
.mini-card{background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.7);border-radius:14px}
/* ---------------- glossy buttons ---------------- */
.btn{border-radius:14px;position:relative;overflow:hidden;transition:transform .16s var(--spring),box-shadow .2s ease,background .2s ease;
background:linear-gradient(135deg,#6d63f6 0%,#4c44e8 100%);box-shadow:0 10px 22px -10px rgba(84,81,238,.6)}
.btn::after{content:"";position:absolute;inset:0 0 55% 0;border-radius:inherit;
background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0));pointer-events:none}
.btn:hover{transform:translateY(-1.5px);box-shadow:0 14px 28px -10px rgba(84,81,238,.68)}
.btn:active{transform:translateY(.5px) scale(.985)}
.btn-ghost{background:var(--glass-2);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--glass-brd);box-shadow:none;color:var(--ink)}
.btn-ghost:hover{background:rgba(255,255,255,.8);box-shadow:var(--shadow)}
.btn-soft{background:rgba(37,99,235,.12);box-shadow:none}
.btn-green{background:linear-gradient(180deg,#22c55e,#16a34a);box-shadow:0 10px 22px -10px rgba(22,163,74,.65)}
.btn-red{background:linear-gradient(180deg,#f87171,#dc2626);box-shadow:0 10px 22px -10px rgba(220,38,38,.65)}
.icon-btn{border-radius:12px;position:relative;overflow:hidden}
.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.45);transform:scale(0);animation:ripple .62s ease-out forwards;pointer-events:none;mix-blend-mode:overlay}
@keyframes ripple{to{transform:scale(1);opacity:0}}
/* ---------------- iOS segmented tabs / pills ---------------- */
.tabs{background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
border:1px solid var(--glass-brd);border-radius:999px;padding:5px;box-shadow:var(--shadow)}
.tab{border-radius:999px;transition:background .2s ease,color .2s ease,box-shadow .25s ease;position:relative;overflow:hidden}
.tab.on{background:linear-gradient(180deg,#5f58f0,#4c44e8);box-shadow:0 8px 18px -8px rgba(84,74,238,.7);color:#fff}
.pill-tabs .pill{border-radius:999px;background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:.2s}
.pill-tabs .pill.on{background:linear-gradient(180deg,#5f58f0,#4c44e8);border-color:transparent}
/* ---------------- forms — glass pills (filter bars get the clean look) ---------------- */
.input,select.input,textarea.input{border-radius:14px;background:rgba(255,255,255,.62);
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(148,163,184,.35);transition:border-color .18s,box-shadow .18s,background .18s}
.input:hover{background:rgba(255,255,255,.78)}
.input:focus{background:rgba(255,255,255,.9);border-color:var(--blue);box-shadow:0 0 0 4px rgba(37,99,235,.15),0 8px 20px -12px rgba(37,99,235,.4)}
select.input{appearance:none;-webkit-appearance:none;padding-right:36px;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 14px center}
/* filter-bar treatment: forms laid out in a row on a card get pill fields */
form.card.row .input,form.search-row .input,form.card form.row .input{min-height:42px;border-radius:999px;background:rgba(255,255,255,.55)}
form.card.row select.input,form.search-row select.input{border-radius:999px}
.topbar-search{border-radius:999px;background:rgba(255,255,255,.5);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--glass-brd)}
fieldset{background:var(--glass-2);border:1px solid var(--glass-brd)}
/* ---------------- glass sidebar + topbar ---------------- */
.sidebar{top:10px;left:10px;bottom:10px;width:238px;height:auto;border-radius:22px;
background:linear-gradient(180deg,rgba(12,26,46,.88),rgba(15,32,58,.84));
-webkit-backdrop-filter:blur(26px) saturate(1.5);backdrop-filter:blur(26px) saturate(1.5);
border:1px solid rgba(255,255,255,.09);box-shadow:0 24px 48px -18px rgba(8,18,33,.55)}
.main{margin-left:262px}
.snav{border-radius:12px;margin:1px 0;position:relative;overflow:hidden;transition:background .2s,color .2s,transform .15s var(--spring)}
.snav:hover{transform:translateX(3px)}
.snav.on{background:linear-gradient(90deg,rgba(109,99,246,.95),rgba(84,74,238,.85));box-shadow:0 8px 18px -6px rgba(96,88,244,.6)}
.brand-mark{border-radius:13px;background:linear-gradient(135deg,#8b85ff,#6360f1 55%,#4c44e8);box-shadow:0 8px 20px -4px rgba(96,88,244,.8)}
.topbar{background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5);
border-bottom:1px solid rgba(255,255,255,.45)}
.user-chip{border-radius:999px;border:1px solid transparent;transition:.2s}
.user-chip:hover{background:rgba(255,255,255,.6);border-color:var(--glass-brd)}
@media (max-width:1024px){.main{margin-left:0}.sidebar.topbar{-webkit-backdrop-filter:none}}
/* ---------------- tables — airy + glass headers ---------------- */
.table-wrap{background:transparent}
table.tbl{background:transparent}
.tbl th{background:rgba(244,247,252,.85);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);position:sticky;top:0;z-index:2;border-bottom:1px solid rgba(148,163,184,.2)}
.tbl tbody tr{transition:background .18s ease,transform .18s ease}
.tbl tbody tr:hover{background:rgba(239,246,255,.75)}
.tbl td{border-bottom:1px solid rgba(226,232,240,.55)}
.tbl tr:last-child td{border-bottom:0}
.avatar{border-radius:12px;box-shadow:0 4px 10px -3px rgba(15,42,67,.25)}
.photo-thumb,.no-photo{border-radius:14px}
.client-logo{border-radius:18px}
/* ---------------- modal — frosted spring sheet ---------------- */
.modal-bk{background:rgba(9,20,38,.38);-webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3);
transition:background .2s ease;align-items:center}
.modal{background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(28px) saturate(1.5);backdrop-filter:blur(28px) saturate(1.5);
border:1px solid rgba(255,255,255,.7);border-radius:24px;animation:pop .28s var(--spring)}
@keyframes pop{from{transform:translateY(26px) scale(.94);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
.modal-bk.closing{background:rgba(9,20,38,.1)}
.modal-bk.closing .modal{animation:popOut .17s ease forwards}
@keyframes popOut{to{transform:translateY(18px) scale(.96);opacity:0}}
/* ---------------- toasts / dropdowns / lightbox ---------------- */
.toast{border-radius:999px;background:rgba(15,32,58,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
border:1px solid rgba(255,255,255,.12);animation:slidein .3s var(--spring)}
.toast.success{background:rgba(20,83,45,.9)}.toast.error{background:rgba(127,29,29,.92)}.toast.warning{background:rgba(146,64,14,.92)}
@keyframes slidein{from{transform:translateY(14px) scale(.95);opacity:0}}
.dropdown-menu{background:rgba(255,255,255,.85);-webkit-backdrop-filter:blur(24px) saturate(1.5);backdrop-filter:blur(24px) saturate(1.5);
border:1px solid rgba(255,255,255,.6);border-radius:18px}
.lightbox{-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:rgba(238,242,249,.35)}
.lightbox img{border-radius:18px}
/* ---------------- badges / progress / misc polish ---------------- */
.badge{border-radius:999px;letter-spacing:.01em;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.b-blue{background:rgba(232,240,254,.8)}.b-green{background:rgba(231,247,238,.85)}.b-red{background:rgba(253,236,236,.85)}
.b-amber{background:rgba(254,244,226,.85)}.b-violet{background:rgba(241,234,254,.85)}.b-cyan{background:rgba(229,248,252,.85)}
.b-teal{background:rgba(228,247,244,.85)}.b-indigo{background:rgba(236,234,254,.85)}.b-gray{background:rgba(243,244,246,.8)}.b-slate{background:rgba(238,242,247,.85)}
.progress{height:9px;background:rgba(226,232,240,.7);box-shadow:inset 0 1px 2px rgba(15,42,67,.06)}
.progress > i{transition:width .7s var(--spring)}
.ring i{font-size:16px}
.alert{border-radius:16px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.pagination .pg{border-radius:12px;background:rgba(255,255,255,.6);border-color:rgba(148,163,184,.35);transition:.18s}
.pagination .pg.on{background:linear-gradient(180deg,#1c3a5c,#0f2a43);border-color:transparent}
.kv dt{color:var(--muted)}
.timeline::before{background:linear-gradient(180deg,rgba(37,99,235,.5),rgba(37,99,235,.08))}
/* ---------------- scrollbar (iOS feel) ---------------- */
*{scrollbar-width:thin;scrollbar-color:rgba(100,116,139,.35) transparent}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:rgba(100,116,139,.30);border-radius:99px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:rgba(100,116,139,.5);background-clip:padding-box;border:2px solid transparent}
::-webkit-scrollbar-track{background:transparent}
/* ---------------- entrance & motion guards ---------------- */
.anim-on .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,1,.36,1)}
.anim-on .reveal.revealed{opacity:1;transform:none}
.anim-on .content > .reveal:nth-of-type(1){transition-delay:.02s}
.anim-on .content > .reveal:nth-of-type(2){transition-delay:.06s}
.anim-on .content > .reveal:nth-of-type(3){transition-delay:.10s}
.anim-on .content > .reveal:nth-of-type(4){transition-delay:.14s}
.anim-on .content > .reveal:nth-of-type(5){transition-delay:.18s}
.anim-on .content > .reveal:nth-of-type(6){transition-delay:.22s}
.anim-on .content > .reveal:nth-of-type(n+7){transition-delay:.26s}
.grid > .card,.grid > .stat{will-change:transform}
/* ---------------- login — floating glass card ---------------- */
.login-wrap{background:transparent;position:relative;overflow:hidden}
.login-wrap::before,.login-wrap::after{content:"";position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;pointer-events:none}
.login-wrap::before{width:520px;height:520px;background:radial-gradient(closest-side,#93c5fd,transparent),radial-gradient(closest-side,#c4b5fd,transparent);top:-140px;right:-120px;animation:blobFloat 14s ease-in-out infinite alternate}
.login-wrap::after{width:460px;height:460px;background:radial-gradient(closest-side,#99f6e4,transparent);bottom:-140px;left:-120px;animation:blobFloat 17s ease-in-out infinite alternate-reverse}
@keyframes blobFloat{from{transform:translate(0,0) scale(1)}to{transform:translate(-6%,5%) scale(1.08)}}
.login-card{background:rgba(255,255,255,.68);-webkit-backdrop-filter:blur(30px) saturate(1.6);backdrop-filter:blur(30px) saturate(1.6);
border:1px solid rgba(255,255,255,.65);border-radius:28px;box-shadow:0 30px 80px -20px rgba(15,42,67,.35)}
.login-side{background:linear-gradient(160deg,rgba(29,35,82,.94),rgba(76,68,232,.85));border-radius:0}
.login-form .btn{border-radius:999px;padding:12px 15px}
/* ---------------- reduced-motion hard off ---------------- */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.001s !important;animation-iteration-count:1 !important;transition-duration:.001s !important;scroll-behavior:auto !important}
body::after,.login-wrap::before,.login-wrap::after{animation:none}
}
/* ==========================================================================
v1.2 — DARK THEME (data-theme="dark" on , toggled in the topbar)
========================================================================== */
html[data-theme="dark"]{color-scheme:dark;
--navy:#e7eaff; --navy-2:#c3cafb; --blue:#8b83ff; --blue-2:#6f66f7; --sky:rgba(139,131,255,.16);
--bg:#0a0f22; --card:rgba(20,27,54,.92); --ink:#e9edfd; --muted:#97a3cd; --line:rgba(140,152,210,.16); --line-2:rgba(140,152,210,.10);
--glass:rgba(22,30,60,.7); --glass-2:rgba(17,24,50,.55); --glass-brd:rgba(140,152,210,.14);
--ok:#3ddc97; --ok-bg:rgba(61,220,151,.13); --amber:#ffc24b; --amber-bg:rgba(255,194,75,.13); --red:#ff7a85; --red-bg:rgba(255,122,133,.13);
--violet:#b394ff; --violet-bg:rgba(179,148,255,.13); --cyan:#4fd8ef; --cyan-bg:rgba(79,216,239,.13); --teal:#3ddcc8; --teal-bg:rgba(61,220,200,.13);
--indigo:#97a0ff; --indigo-bg:rgba(151,160,255,.14); --slate:#a3b0cc; --slate-bg:rgba(163,176,204,.12); --gray:#aab2c5; --gray-bg:rgba(170,178,197,.12);
--shadow:0 1px 2px rgba(3,6,20,.5),0 10px 30px -10px rgba(3,6,20,.6);
--shadow-lg:0 18px 50px -12px rgba(3,6,20,.75);
}
html[data-theme="dark"]{background:#0a0f22}
html[data-theme="dark"] body::before{
background:
radial-gradient(640px 440px at 10% 6%, rgba(99,102,241,.22), transparent 62%),
radial-gradient(560px 420px at 90% 16%, rgba(139,92,246,.18), transparent 60%),
radial-gradient(760px 560px at 50% 112%, rgba(20,184,166,.13), transparent 62%);
}
html[data-theme="dark"] body::after{
background:
radial-gradient(480px 360px at 82% 84%, rgba(56,189,248,.12), transparent 62%),
radial-gradient(420px 340px at 8% 88%, rgba(244,114,182,.09), transparent 60%);
}
html[data-theme="dark"] .topbar{background:rgba(11,16,36,.6);border-bottom:1px solid rgba(140,152,210,.14)}
html[data-theme="dark"] .topbar-search{background:rgba(140,152,210,.09);border-color:rgba(140,152,210,.16)}
html[data-theme="dark"] .topbar-search input{color:var(--ink)}
html[data-theme="dark"] .icon-btn:hover{background:rgba(140,152,210,.12)}
html[data-theme="dark"] .sidebar{background:linear-gradient(180deg,rgba(9,14,32,.94),rgba(12,18,40,.9));border-color:rgba(140,152,210,.1)}
html[data-theme="dark"] .stat::before{background:radial-gradient(220px 160px at var(--mx,50%) var(--my,50%),rgba(151,160,255,.22),transparent 65%)}
html[data-theme="dark"] .btn-ghost{background:rgba(140,152,210,.08)}
html[data-theme="dark"] .btn-ghost:hover{background:rgba(140,152,210,.15)}
html[data-theme="dark"] .input,html[data-theme="dark"] select.input,html[data-theme="dark"] textarea.input{background:rgba(8,13,30,.6);color:var(--ink);border-color:rgba(140,152,210,.2)}
html[data-theme="dark"] .input::placeholder{color:#67719a}
html[data-theme="dark"] .rte{background:rgba(8,13,30,.6);color:var(--ink)}
html[data-theme="dark"] .rte-toolbar button:hover{background:rgba(140,152,210,.16);color:var(--ink)}
html[data-theme="dark"] .tabs{background:rgba(17,24,50,.6)}
html[data-theme="dark"] .pill-tabs .pill{background:rgba(17,24,50,.55)}
html[data-theme="dark"] .tab.on,html[data-theme="dark"] .pill-tabs .pill.on{background:linear-gradient(180deg,#6a60f4,#554ae6);box-shadow:0 8px 18px -8px rgba(106,96,244,.65);color:#fff}
html[data-theme="dark"] .mini-card{background:rgba(17,24,50,.6);border-color:rgba(140,152,210,.14);color:var(--ink)}
html[data-theme="dark"] .mini-card:hover{background:rgba(140,152,210,.1)}
html[data-theme="dark"] .tbl th{background:rgba(15,22,46,.94);border-bottom-color:rgba(140,152,210,.18);color:var(--muted)}
html[data-theme="dark"] .tbl tbody tr:hover{background:rgba(99,102,241,.08)}
html[data-theme="dark"] .tbl td{border-bottom-color:rgba(140,152,210,.09)}
html[data-theme="dark"] .modal{background:rgba(18,25,52,.88);border-color:rgba(140,152,210,.16)}
html[data-theme="dark"] .modal-bk{background:rgba(3,6,16,.55)}
html[data-theme="dark"] .modal-bk.closing{background:rgba(3,6,16,.3)}
html[data-theme="dark"] .cal-day.dim{background:rgba(8,13,30,.45)}
html[data-theme="dark"] .ring i{background:var(--glass);color:var(--navy)}
html[data-theme="dark"] .user-chip:hover{background:rgba(140,152,210,.1);border-color:rgba(140,152,210,.16)}
html[data-theme="dark"] .login-card{background:rgba(18,25,52,.7);border-color:rgba(140,152,210,.16)}
html[data-theme="dark"] .login-side{background:linear-gradient(160deg,rgba(13,19,40,.95),rgba(59,54,180,.85))}
html[data-theme="dark"] .login-wrap::before,html[data-theme="dark"] .login-wrap::after{opacity:.35}
html[data-theme="dark"] ::selection{background:rgba(99,102,241,.4)}
/* ---------------- theme toggle icons ---------------- */
[data-theme-toggle] .theme-ic{display:inline-flex;line-height:0}
[data-theme-toggle] .theme-ic-light{display:none}
html[data-theme="dark"] [data-theme-toggle] .theme-ic-light{display:inline-flex}
html[data-theme="dark"] [data-theme-toggle] .theme-ic-dark{display:none}
[data-theme-toggle].spin .ic{animation:themeSpin .5s ease}
@keyframes themeSpin{from{transform:rotate(-120deg) scale(.55);opacity:.3}to{transform:rotate(0) scale(1);opacity:1}}
/* ---------------- dark-theme print: always print light ---------------- */
@media print{
html[data-theme="dark"]{--bg:#fff;--card:#fff;--glass:#fff;--glass-2:#fff;--glass-brd:#e3eaf3;--ink:#1c2b3a;--navy:#0f2a43;--muted:#63778c;--line:#e3eaf3;--line-2:#eef2f8;--shadow:none;--shadow-lg:none}
html[data-theme="dark"] body::before,html[data-theme="dark"] body::after{display:none}
html[data-theme="dark"] .topbar-search,html[data-theme="dark"] .tbl th,html[data-theme="dark"] .input{background:#fff;color:#1c2b3a}
html[data-theme="dark"] .mini-card{background:#fff}
}
/* ==========================================================================
v1.2.2 — DARK MODE POLISH: no white cards, no dark-on-dark text
========================================================================== */
/* dropdowns / menus */
html[data-theme="dark"] .dropdown-menu{background:rgba(19,26,52,.97);border-color:rgba(140,152,210,.18);box-shadow:0 24px 60px -16px rgba(3,6,20,.8)}
html[data-theme="dark"] .dropdown-menu a,html[data-theme="dark"] .dropdown-item{color:var(--ink)}
html[data-theme="dark"] .dropdown-menu a:hover,html[data-theme="dark"] .dropdown-item:hover{background:rgba(140,152,210,.1);color:var(--ink)}
html[data-theme="dark"] .dropdown-head{color:var(--ink);border-bottom-color:rgba(140,152,210,.12)}
html[data-theme="dark"] .dropdown-head b,html[data-theme="dark"] .notif-item b{color:var(--ink)}
html[data-theme="dark"] .dropdown-foot{color:var(--blue)}
html[data-theme="dark"] .notif-item{border-bottom-color:rgba(140,152,210,.08)}
html[data-theme="dark"] .notif-item.unread{background:rgba(99,102,241,.08)}
html[data-theme="dark"] .notif-item:hover{background:rgba(140,152,210,.08)}
/* pagination */
html[data-theme="dark"] .pg{background:rgba(140,152,210,.08);color:var(--ink);border-color:rgba(140,152,210,.2)}
html[data-theme="dark"] .pg:hover{background:rgba(140,152,210,.16);color:var(--ink)}
html[data-theme="dark"] .pg.on{background:linear-gradient(135deg,#6a60f4,#554ae6);color:#fff;border-color:transparent}
/* progress tracks */
html[data-theme="dark"] .progress{background:rgba(140,152,210,.14);box-shadow:inset 0 1px 2px rgba(3,6,20,.4)}
/* alerts: tinted bg vars flip automatically, but text was hard-coded dark */
html[data-theme="dark"] .alert.success{color:#7de9bd}
html[data-theme="dark"] .alert.error{color:#ffa3ac}
html[data-theme="dark"] .alert.info{color:#a5b3ff}
html[data-theme="dark"] .alert.warning{color:#ffd48f}
/* toasts: bg follows --navy which flips bright in dark — force a dark pill */
html[data-theme="dark"] .toast{background:linear-gradient(180deg,#2a3360,#1e2547);color:#eef1ff;box-shadow:0 16px 40px -14px rgba(3,6,20,.85)}
html[data-theme="dark"] .toast.t-success{border-left-color:var(--ok)}
html[data-theme="dark"] .toast.t-error{border-left-color:var(--red)}
/* calendar header bar + pills */
html[data-theme="dark"] .cal-head{background:linear-gradient(135deg,#3f3bc0,#554ae6);color:#fff}
html[data-theme="dark"] .cal-day{background:transparent}
html[data-theme="dark"] .cal-pill.cal-done{background:rgba(61,220,151,.14);color:#7de9bd}
html[data-theme="dark"] .cal-pill.cal-due{background:rgba(151,160,255,.14);color:#aeb6ff}
html[data-theme="dark"] .cal-pill.cal-late{background:rgba(255,122,133,.13);color:#ffa3ac}
/* brand-colored boxes that used var(--navy) bg + white text */
html[data-theme="dark"] .ring{background:conic-gradient(var(--c) calc(var(--p)*1%), rgba(140,152,210,.14) 0)}
/* form chips / misc surfaces */
html[data-theme="dark"] .chip{background:rgba(139,131,255,.14);color:#c3c8ff}
html[data-theme="dark"] .input:hover{background:rgba(8,13,30,.75)}
html[data-theme="dark"] .input:focus{background:rgba(10,16,34,.9);border-color:var(--blue);box-shadow:0 0 0 4px rgba(139,131,255,.18),0 8px 20px -12px rgba(139,131,255,.4)}
html[data-theme="dark"] form.card.row .input,html[data-theme="dark"] form.search-row .input,html[data-theme="dark"] form.card form.row .input{background:rgba(8,13,30,.55)}
html[data-theme="dark"] select.input{background:url("data:image/svg+xml;utf8,") no-repeat right 14px center / 12px 8px, rgba(8,13,30,.6)}
html[data-theme="dark"] select.input option{background:#151d36;color:#e9edfd}
html[data-theme="dark"] .client-logo{background:rgba(140,152,210,.08)}
html[data-theme="dark"] .empty{color:var(--muted)}
/* overdue-row inline highlight (inline style in tasks/client pages) */
html[data-theme="dark"] tr[style*="fff9f6"],html[data-theme="dark"] tr[style*="#fff9f6"]{background:rgba(255,138,75,.09) !important}
/* keep strong/body text light in dark */
html[data-theme="dark"] b,html[data-theme="dark"] strong{color:var(--ink)}
html[data-theme="dark"] .card-head h3,html[data-theme="dark"] .modal-head h3{color:var(--navy)}
/* subtle: links inside dark surfaces get brighter brand */
html[data-theme="dark"] a{color:#9d97ff}
html[data-theme="dark"] a:hover{color:#b3aeff}
/* data tables: header text + row selection already handled; make sticky hover subtle */
html[data-theme="dark"] .tbl th{color:#97a3cd}
html[data-theme="dark"] .cell-main b,html[data-theme="dark"] td b{color:var(--ink)}
/* stat tiles: value + label */
html[data-theme="dark"] .stat b{color:var(--navy)}
html[data-theme="dark"] .stat span{color:var(--muted)}
/* file / doc rows */
html[data-theme="dark"] .file-row:hover{background:rgba(140,152,210,.07)}
/* board kanban cards */
html[data-theme="dark"] .board-card{background:rgba(23,32,62,.85);border-color:rgba(140,152,210,.14)}
html[data-theme="dark"] .board-card:hover{border-color:rgba(151,160,255,.35)}
/* v1.2.2b — badge + calendar-event dark tints */
html[data-theme="dark"] .b-gray{background:rgba(170,178,197,.13);color:#c3cadb}
html[data-theme="dark"] .b-slate{background:rgba(163,176,204,.13);color:#c1cbe0}
html[data-theme="dark"] .b-blue{background:rgba(139,131,255,.16);color:#b9b4ff}
html[data-theme="dark"] .b-amber{background:rgba(255,194,75,.14);color:#ffd48f}
html[data-theme="dark"] .b-violet{background:rgba(179,148,255,.15);color:#cdb3ff}
html[data-theme="dark"] .b-cyan{background:rgba(79,216,239,.14);color:#8fe3f5}
html[data-theme="dark"] .b-teal{background:rgba(61,220,200,.14);color:#83e9d7}
html[data-theme="dark"] .b-indigo{background:rgba(151,160,255,.15);color:#bec4ff}
html[data-theme="dark"] .b-green{background:rgba(61,220,151,.14);color:#8beac4}
html[data-theme="dark"] .b-red{background:rgba(255,122,133,.14);color:#ffaab1}
html[data-theme="dark"] .badge{box-shadow:inset 0 0 0 1px rgba(140,152,210,.12)}
html[data-theme="dark"] .evt{border-left-width:3px}
html[data-theme="dark"] .evt.st-completed{background:rgba(61,220,151,.14);border-color:#3ddc97;color:#c9f5e2}
html[data-theme="dark"] .evt.st-published{background:rgba(61,220,151,.16);border-color:#3ddc97}
html[data-theme="dark"] .evt small{color:var(--muted)}
/* filter bars: keep controls on one row instead of full-width stack */
form.card.row > .input, form.search-row > .input,
form.card.row > select.input, form.search-row > select.input,
form.card.row > input[type="month"].input, form.search-row > input[type="month"].input{flex:1 1 190px;min-width:160px;width:auto}
form.card.row > .field, form.search-row > .field{flex:1 1 190px;min-width:160px}
form.card.row > .btn, form.search-row > .btn{flex:0 0 auto}
form.card.row, form.search-row{flex-wrap:wrap}