/* =====================================================================
   DHIS2_App - theme.css  (SHARED)
   Ek hi jagah colors/themes change karo -> har page par lag jaata hai.
   Har page bas yeh link kare:  <link rel="stylesheet" href="theme.css">
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=DM+Mono:wght@400;500&display=swap');

:root{
  --primary:#1a5cad; --primary-2:#2f7be0; --primary-dk:#13447f; --violet:#7c3aed;
  --eyebrow:#6db1ff; --p1:#0b2a4a; --p2:#0f3a66;            /* dark brand panel (login) */
  --bg-1:#eef2f9; --bg-2:#f6f8fc;
  --surface:#ffffff; --surface-2:#f7f9fd; --surface-3:#eef2f8; --field:#f7f9fc;
  --border:#e6ebf3; --border-2:#cdd6e6;
  --ink:#0f172a; --ink-2:#475569; --ink-3:#8a97ac;
  --success:#16a34a; --warn:#d97706; --danger:#dc2626;
  --glow1:rgba(47,123,224,.12); --glow2:rgba(124,58,237,.10);
  --row-alt:#fafcff; --row-hover:#eef5ff; --topbar-bg:rgba(255,255,255,.85);
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px;
  --sh-sm:0 1px 2px rgba(15,23,42,.06);
  --sh-md:0 6px 22px rgba(15,23,42,.09),0 2px 6px rgba(15,23,42,.05);
  --sh-lg:0 18px 50px rgba(15,23,42,.18);
  --font:'DM Sans',system-ui,Arial,sans-serif; --mono:'DM Mono',monospace;
}
/* ---- accent themes ---- */
html[data-theme="emerald"]{--primary:#0d9488;--primary-2:#14b8a6;--primary-dk:#0f766e;--violet:#10b981;--eyebrow:#5eead4;--p1:#04231c;--p2:#0c3b30;--glow1:rgba(20,184,166,.13);--glow2:rgba(16,185,129,.10);--row-hover:#ecfdf5;}
html[data-theme="sunset"] {--primary:#ea580c;--primary-2:#fb923c;--primary-dk:#c2410c;--violet:#f43f5e;--eyebrow:#fdba74;--p1:#3a1206;--p2:#5c1f12;--glow1:rgba(251,146,60,.15);--glow2:rgba(244,63,94,.10);--row-hover:#fff7ed;}
html[data-theme="royal"]  {--primary:#6d28d9;--primary-2:#8b5cf6;--primary-dk:#5b21b6;--violet:#c026d3;--eyebrow:#c4b5fd;--p1:#1e1133;--p2:#2e1a52;--glow1:rgba(139,92,246,.15);--glow2:rgba(192,38,211,.10);--row-hover:#f5f3ff;}
html[data-theme="rose"]   {--primary:#e11d48;--primary-2:#fb7185;--primary-dk:#be123c;--violet:#db2777;--eyebrow:#fda4af;--p1:#3a0d1a;--p2:#5c142b;--glow1:rgba(251,113,133,.15);--glow2:rgba(219,39,119,.10);--row-hover:#fff1f2;}
html[data-theme="midnight"]{
  --primary:#3b82f6;--primary-2:#60a5fa;--primary-dk:#2563eb;--violet:#a78bfa;--eyebrow:#93c5fd;--p1:#0a1120;--p2:#141f36;
  --bg-1:#0b1220;--bg-2:#0e1626;--surface:#121c2e;--surface-2:#0f1828;--surface-3:#1a2740;--field:#0f1828;
  --border:#243352;--border-2:#33466b;--ink:#e8edf6;--ink-2:#aab6cc;--ink-3:#6b7a96;
  --glow1:rgba(59,130,246,.16);--glow2:rgba(167,139,250,.12);--row-alt:#0f1828;--row-hover:#16223a;--topbar-bg:rgba(18,28,46,.85);
}

*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{font-family:var(--font);color:var(--ink);background:
  radial-gradient(1100px 460px at 100% -8%,var(--glow1),transparent 60%),
  radial-gradient(800px 460px at -6% 4%,var(--glow2),transparent 55%),
  linear-gradient(180deg,var(--bg-2),var(--bg-1));min-height:100vh;}

/* ================= APP LAYOUT ================= */
.app{display:flex;min-height:100vh;}
.sidebar{width:266px;flex-shrink:0;background:var(--surface);border-right:1px solid var(--border);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;z-index:50;transition:transform .25s ease;}
.app-main{flex:1;min-width:0;display:flex;flex-direction:column;}
.content{padding:24px 28px 44px;width:100%;max-width:1280px;margin:0 auto;}

/* brand */
.sb-brand{display:flex;align-items:center;gap:12px;padding:20px 20px 18px;border-bottom:1px solid var(--border);}
.sb-mark{width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,var(--primary-2),var(--violet));display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 8px 20px color-mix(in srgb,var(--primary) 35%,transparent);overflow:hidden;}
.sb-mark img{max-width:30px;max-height:30px;}
.sb-mark svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.sb-name{font-size:15px;font-weight:700;letter-spacing:-.01em;line-height:1.15;}
.sb-name small{display:block;font-size:11px;font-weight:500;color:var(--ink-3);}

/* nav */
.sb-nav{flex:1;overflow-y:auto;padding:16px 14px;}
.sb-section{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);padding:8px 12px 8px;}
.nav-item{position:relative;display:flex;align-items:center;gap:12px;padding:11px 13px;margin-bottom:4px;border-radius:12px;
  color:var(--ink-2);font-weight:600;font-size:13.5px;text-decoration:none;cursor:pointer;transition:background .15s,color .15s;}
.nav-item:hover{background:var(--surface-3);color:var(--ink);}
.nav-item.active{color:#fff;background:linear-gradient(135deg,var(--primary-2),var(--primary));box-shadow:0 8px 20px color-mix(in srgb,var(--primary) 32%,transparent);}
.nav-item.active .nav-ic svg{stroke:#fff;}
.nav-ic{width:22px;height:22px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.nav-ic svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.nav-item.disabled{opacity:.55;cursor:not-allowed;}
.nav-badge{margin-left:auto;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:2px 7px;border-radius:999px;background:var(--surface-3);color:var(--ink-3);}
.nav-item.active .nav-badge{background:rgba(255,255,255,.22);color:#fff;}

/* sidebar bottom (user + logout) */
.sb-bottom{padding:14px;border-top:1px solid var(--border);}
.sb-user{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:12px;background:var(--surface-2);border:1px solid var(--border);margin-bottom:10px;}
.sb-av{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--primary),var(--violet));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex-shrink:0;}
.sb-uinfo{min-width:0;} .sb-uinfo b{font-size:13px;font-weight:700;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sb-uinfo span{font-size:11px;color:var(--ink-3);}
.sb-logout{width:100%;justify-content:center;}

/* ================= TOPBAR ================= */
.topbar{position:sticky;top:0;z-index:40;backdrop-filter:saturate(160%) blur(10px);background:var(--topbar-bg);
  border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 26px;}
.tb-left{display:flex;align-items:center;gap:13px;min-width:0;}
.tb-burger{display:none;width:40px;height:40px;border-radius:10px;border:1.5px solid var(--border-2);background:var(--surface);cursor:pointer;align-items:center;justify-content:center;color:var(--ink-2);}
.tb-burger svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.tb-title{font-size:18px;font-weight:700;letter-spacing:-.01em;line-height:1.15;}
.tb-title small{display:block;font-size:11.5px;font-weight:500;color:var(--ink-3);}
.tb-right{display:flex;align-items:center;gap:11px;}
.tb-pill{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:999px;background:var(--surface);border:1px solid var(--border);font-size:12px;font-weight:600;color:var(--ink-2);box-shadow:var(--sh-sm);}
.tb-pill .d{width:8px;height:8px;border-radius:50%;background:#22c55e;animation:pulse 1.8s infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.5)}70%{box-shadow:0 0 0 9px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}

/* ================= BUTTONS ================= */
.btn{height:40px;padding:0 18px;border-radius:var(--r-md);font-size:13.5px;font-weight:600;font-family:var(--font);
  border:1.5px solid var(--border-2);background:var(--surface);color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:all .18s;white-space:nowrap;}
.btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
    .btn:hover {
        background: var(--surface-2);
        color: var(--ink);
        transform: translateY(-1px);
        box-shadow: var(--sh-sm);
    }

        .btn:hover svg {
            stroke: var(--ink);
        }

    .btn:active {
        transform: none;
    }

.btn-primary {
    background: linear-gradient(135deg,var(--primary-2),var(--primary));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 6px 18px color-mix(in srgb,var(--primary) 30%,transparent);
}

    .btn-primary:hover {
        background: linear-gradient(135deg,var(--primary-2),var(--primary));
        color: #fff;
        filter: brightness(1.05);
        box-shadow: 0 10px 26px color-mix(in srgb,var(--primary) 40%,transparent);
    }

        .btn-primary:hover svg {
            stroke: #fff;
        }

    .btn-primary:disabled {
        opacity: .6;
        cursor: not-allowed;
    }

.btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--ink-2);
}

    .btn-ghost:hover {
        background: var(--surface-3);
        color: var(--ink);
    }

        .btn-ghost:hover svg {
            stroke: var(--ink);
        }
.btn-warn{background:#fff7ed;color:var(--warn);border-color:#fcd9a8;}
.btn-danger{background:#fef2f2;color:var(--danger);border-color:#f6bcbc;}
.btn-sm{height:32px;padding:0 12px;font-size:12px;border-radius:var(--r-sm);gap:6px;}
.btn-sm svg{width:14px;height:14px;}

/* ================= CARD ================= */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--sh-md);overflow:hidden;margin-bottom:22px;}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 20px;border-bottom:1px solid var(--border);background:linear-gradient(135deg,color-mix(in srgb,var(--surface) 100%,transparent),var(--surface-2));flex-wrap:wrap;}
.h-left{display:flex;align-items:center;gap:11px;}
.h-ic{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--primary-2),var(--primary));display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.h-ic svg{width:17px;height:17px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.h-t{font-size:15px;font-weight:700;} .h-s{font-size:11.5px;color:var(--ink-2);margin-top:1px;}
.head-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.badge{background:color-mix(in srgb,var(--primary) 14%,transparent);color:var(--primary);font-weight:700;padding:3px 11px;border-radius:20px;font-size:12px;}
.card-body{padding:22px;}

/* stat cards */
.stats{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px;}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:12px 16px;display:flex;align-items:center;gap:12px;box-shadow:var(--sh-sm);min-width:160px;}
.stat .ic{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:color-mix(in srgb,var(--primary) 13%,transparent);color:var(--primary);}
.stat .ic.violet{background:color-mix(in srgb,var(--violet) 14%,transparent);color:var(--violet);}
.stat .ic svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.stat .v{font-size:20px;font-weight:700;line-height:1;} .stat .l{font-size:11px;color:var(--ink-3);margin-top:3px;}

/* ================= SECTION + GRID + FIELDS ================= */
.section{font-size:11px;font-weight:700;color:var(--ink-2);text-transform:uppercase;letter-spacing:.07em;margin:6px 0 13px;display:flex;align-items:center;gap:9px;}
.section::after{content:'';flex:1;height:1px;background:var(--border);}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-bottom:20px;}
@media(max-width:560px){.grid2{grid-template-columns:1fr;}}
.field{display:flex;flex-direction:column;gap:6px;}
.lbl{font-size:12px;font-weight:600;color:var(--ink-2);display:flex;gap:4px;align-items:center;}
.req{color:var(--danger);}
.inp,select.inp,textarea.inp{min-height:42px;padding:9px 13px;border:1.5px solid var(--border);border-radius:var(--r-md);font-size:13.5px;font-family:var(--font);color:var(--ink);background:var(--surface);outline:none;width:100%;transition:border-color .18s,box-shadow .18s;}
select.inp:not([multiple]){height:42px;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a97ac' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;padding-right:34px;}
select.inp[multiple]{padding:6px;min-height:96px;}
select.inp[multiple] option{padding:6px 9px;border-radius:7px;margin-bottom:2px;}
.inp:focus,select.inp:focus{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 13%,transparent);}
.inp[readonly]{background:var(--surface-2);color:var(--ink-2);}
.hint{font-size:11px;color:var(--ink-3);}

/* ================= TABLE ================= */
.tbl-wrap{width:100%;}
table.tbl{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;font-size:13px;}
table.tbl thead th{background:linear-gradient(180deg,var(--primary-2),var(--primary-dk));color:#fff;padding:13px 12px;text-align:left;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.045em;}
table.tbl thead th:first-child{text-align:center;}
table.tbl tbody td{padding:12px;border-bottom:1px solid var(--border);vertical-align:middle;color:var(--ink);word-break:break-word;overflow-wrap:anywhere;}
table.tbl tbody tr{transition:background .14s,box-shadow .14s;}
table.tbl tbody tr:nth-child(even){background:var(--row-alt);}
table.tbl tbody tr:hover{background:var(--row-hover);box-shadow:inset 3px 0 0 0 var(--primary);}
table.tbl tbody tr:last-child td{border-bottom:none;}
.sr{color:var(--ink-3);font-weight:700;text-align:center;}
.lvl{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:24px;padding:0 8px;background:color-mix(in srgb,var(--primary) 12%,transparent);color:var(--primary);border:1px solid color-mix(in srgb,var(--primary) 22%,transparent);border-radius:8px;font-size:12px;font-weight:700;}
.idmono{font-family:var(--mono);font-size:11px;color:var(--ink-2);background:var(--surface-3);padding:3px 7px;border-radius:6px;display:inline-block;line-height:1.4;word-break:break-all;}
.path{color:var(--ink-2);font-size:12px;line-height:1.55;}
.c-name{display:flex;align-items:flex-start;gap:9px;font-weight:600;line-height:1.4;}
.c-name .dot{width:8px;height:8px;border-radius:50%;margin-top:5px;flex-shrink:0;background:linear-gradient(135deg,var(--primary),var(--violet));}
.chip{display:inline-block;background:color-mix(in srgb,var(--violet) 12%,transparent);color:var(--violet);border:1px solid color-mix(in srgb,var(--violet) 22%,transparent);padding:2px 9px;border-radius:999px;font-size:11px;font-weight:600;margin:1px 3px 1px 0;}
.act{display:flex;gap:7px;}
.ic-btn{width:34px;height:34px;border-radius:10px;border:1.5px solid var(--border-2);background:var(--surface);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:all .15s;}
.ic-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.ic-edit{color:var(--warn);border-color:#fcd9a8;}
.ic-edit:hover{background:#fff7ed;border-color:var(--warn);transform:translateY(-1px);}
.ic-del{color:var(--danger);border-color:#f6bcbc;}
.ic-del:hover{background:#fef2f2;border-color:var(--danger);transform:translateY(-1px);}
.ic-key{color:var(--primary);border-color:color-mix(in srgb,var(--primary) 35%,transparent);}
.ic-key:hover{background:color-mix(in srgb,var(--primary) 10%,transparent);transform:translateY(-1px);}
.empty{padding:42px;text-align:center;color:var(--ink-3);font-size:13.5px;}
.sp{width:26px;height:26px;border:3px solid var(--border-2);border-top-color:var(--primary);border-radius:50%;animation:spin .7s linear infinite;display:inline-block;vertical-align:middle;}
.sp-sm{width:14px;height:14px;border:2px solid var(--border-2);border-top-color:var(--primary);border-radius:50%;animation:spin .7s linear infinite;display:inline-block;}
@keyframes spin{to{transform:rotate(360deg)}}
.search{height:40px;width:280px;max-width:60vw;padding:0 14px 0 38px;border:1.5px solid var(--border);border-radius:var(--r-md);font-size:13px;font-family:var(--font);outline:none;color:var(--ink);
  background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%238a97ac' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat 13px center;transition:border-color .18s,box-shadow .18s;}
.search:focus{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 12%,transparent);}

/* ================= DRAWER (slide-over) ================= */
.dw-back{position:fixed;inset:0;background:rgba(15,23,42,.5);backdrop-filter:blur(3px);z-index:1400;opacity:0;visibility:hidden;transition:opacity .25s;}
.dw-back.show{opacity:1;visibility:visible;}
.dw{position:fixed;top:0;right:0;height:100%;width:580px;max-width:100%;background:var(--surface);z-index:1401;box-shadow:-18px 0 60px rgba(15,23,42,.22);transform:translateX(102%);transition:transform .32s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;}
.dw.show{transform:translateX(0);}
.dw-head{padding:18px 22px;display:flex;align-items:center;justify-content:space-between;gap:12px;background:linear-gradient(135deg,var(--primary),var(--violet));color:#fff;}
.dw-head .ttl{font-size:16.5px;font-weight:700;display:flex;align-items:center;gap:10px;}
.dw-head .ttl svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.dw-head .sub{font-size:12px;opacity:.9;margin-top:2px;font-weight:500;}
.dw-x{width:34px;height:34px;border-radius:10px;border:none;background:rgba(255,255,255,.18);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s;}
.dw-x:hover{background:rgba(255,255,255,.3);}
.dw-x svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
.dw-body{flex:1;overflow-y:auto;padding:22px;}
.dw-foot{padding:14px 22px;border-top:1px solid var(--border);background:var(--surface-2);display:flex;gap:10px;justify-content:flex-end;}

/* ================= MODAL ================= */
.ov{position:fixed;inset:0;background:rgba(15,23,42,.55);backdrop-filter:blur(3px);z-index:1600;display:none;align-items:center;justify-content:center;padding:16px;}
.ov.show{display:flex;}
.mdl{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-lg);width:100%;max-width:460px;overflow:hidden;animation:pop .22s cubic-bezier(.34,1.56,.64,1);}
.mdl.wide{max-width:520px;}
@keyframes pop{from{opacity:0;transform:scale(.95)}to{opacity:1}}
.mdl-head{padding:20px 24px;border-bottom:1px solid var(--border);}
.mdl-head h3{font-size:18px;font-weight:700;}
.mdl-body{padding:20px 24px;max-height:70vh;overflow-y:auto;}
.mdl-foot{display:flex;gap:10px;justify-content:flex-end;padding:15px 24px;border-top:1px solid var(--border);background:var(--surface-2);}

/* ================= CODE BANNER (orgunit) ================= */
.code-banner{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:15px 18px;margin-bottom:22px;border-radius:var(--r-lg);background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 9%,var(--surface)),color-mix(in srgb,var(--violet) 9%,var(--surface)));border:1.5px solid color-mix(in srgb,var(--violet) 22%,transparent);}
.code-cap{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.09em;color:var(--violet);}
.code-val{font-family:var(--mono);font-size:25px;font-weight:600;letter-spacing:.04em;color:var(--primary);}
.code-val.empty{color:var(--ink-3);font-size:17px;}
.code-info{flex:1;min-width:190px;font-size:11.5px;color:var(--ink-2);line-height:1.6;border-left:1px dashed var(--border-2);padding-left:16px;}
.code-info code{background:var(--surface);padding:1px 6px;border-radius:5px;font-family:var(--mono);font-size:11px;color:var(--ink);}
.code-load{display:none;align-items:center;gap:8px;font-size:12px;color:var(--violet);font-weight:600;}
.code-load.show{display:inline-flex;}

/* ================= TOASTS ================= */
.toasts{position:fixed;right:22px;bottom:22px;z-index:2000;display:flex;flex-direction:column;gap:10px;}
.toast{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:var(--r-md);font-size:13px;font-weight:600;box-shadow:var(--sh-lg);animation:tin .3s cubic-bezier(.34,1.56,.64,1);max-width:330px;}
.toast.ok{background:#ecfdf5;color:#065f46;border:1px solid #a7f3d0;}
.toast.warn{background:#fffbeb;color:#92400e;border:1px solid #fcd34d;}
.toast.err{background:#fef2f2;color:#991b1b;border:1px solid #fca5a5;}
@keyframes tin{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}
.fade{opacity:0;transition:opacity .35s;}

/* ================= THEME SWITCHER ================= */
.theme-pick{position:relative;}
.theme-pop{position:absolute;top:46px;right:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--sh-lg);padding:14px;width:206px;z-index:60;display:none;}
.theme-pop.show{display:block;animation:tin .2s ease;}
.tp-title{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3);margin-bottom:11px;}
.sw-row{display:flex;gap:10px;flex-wrap:wrap;}
.sw{width:30px;height:30px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:transform .15s;outline:none;box-shadow:var(--sh-sm);}
.sw:hover{transform:scale(1.13);}
.sw.active{border-color:var(--ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--ink) 14%,transparent);}
.sw.ocean{background:linear-gradient(135deg,#2f7be0,#7c3aed);}
.sw.emerald{background:linear-gradient(135deg,#14b8a6,#0d9488);}
.sw.sunset{background:linear-gradient(135deg,#fb923c,#ea580c);}
.sw.royal{background:linear-gradient(135deg,#8b5cf6,#6d28d9);}
.sw.rose{background:linear-gradient(135deg,#fb7185,#e11d48);}
.sw.midnight{background:linear-gradient(135deg,#1e293b,#3b82f6);}

/* ================= RESPONSIVE SIDEBAR ================= */
.sb-backdrop{display:none;position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:45;}
@media(max-width:1000px){
  .sidebar{position:fixed;top:0;left:0;transform:translateX(-100%);box-shadow:var(--sh-lg);}
  .sidebar.open{transform:translateX(0);}
  .sb-backdrop.show{display:block;}
  .tb-burger{display:flex;}
  table.tbl{min-width:720px;}
  .tbl-wrap{overflow-x:auto;}
}