
/* Defensive: prevent accidental min-width from forcing desktop-like scaling */
html, body { width: 100%; }
.app, .content, .container { min-width: 0; }

:root{
    --bg:#fbfaf8;
    --text:#2b2a28;
    --muted:#6b6760;
    --taupe-100:#dfd4be;
    --taupe-200:#cec2ac;
    --taupe-300:#b4a78e;
    --accent:#8f816a;
    --shadow:0 14px 34px rgba(20,18,16,.10);
    --shadow-sm:0 10px 22px rgba(20,18,16,.10);
    --danger:#b00020;
    --ok:#0a7a2f;
    --radius:16px;
    --blur:18px;

    --tap:44px;
    --container:1180px;
    --sidebar-w:88px;

    /* Mobile bottom nav */
    --bottom-nav-h:72px;

    box-sizing:border-box;
}
*{box-sizing:inherit}
html,body{height:100%}
body{
    margin:0;
    font-family:Helvetica, Arial, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    color:var(--text);
    background:
            radial-gradient(1100px 600px at 20% 0%, rgba(223,212,190,.35), transparent 55%),
            radial-gradient(900px 480px at 90% 10%, rgba(206,194,172,.28), transparent 55%),
            var(--bg);
    position:relative;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}
body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    opacity:.34;
    mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='440' height='440' viewBox='0 0 440 440'><defs><pattern id='p' width='440' height='440' patternUnits='userSpaceOnUse'><rect width='440' height='440' fill='%23fbfaf8'/><defs><g id='leafFill'><path d='M72 10 C54 26 42 50 36 78 C28 120 42 166 72 204 C102 166 116 120 108 78 C102 50 90 26 72 10 Z' fill='%23c7b89f' fill-opacity='0.60' stroke='%238f816a' stroke-opacity='0.62' stroke-width='1.35' stroke-linejoin='round' stroke-linecap='round'/><path d='M72 20 L72 194' fill='none' stroke='%238f816a' stroke-opacity='0.55' stroke-width='1.2' stroke-linecap='round'/><path d='M72 52 C62 58 54 68 46 82' fill='none' stroke='%238f816a' stroke-opacity='0.45' stroke-width='1.05' stroke-linecap='round'/><path d='M72 74 C60 80 52 94 46 110' fill='none' stroke='%238f816a' stroke-opacity='0.45' stroke-width='1.05' stroke-linecap='round'/><path d='M72 98 C62 106 56 118 52 134' fill='none' stroke='%238f816a' stroke-opacity='0.45' stroke-width='1.05' stroke-linecap='round'/><path d='M72 52 C82 58 90 68 98 82' fill='none' stroke='%238f816a' stroke-opacity='0.45' stroke-width='1.05' stroke-linecap='round'/><path d='M72 74 C84 80 92 94 98 110' fill='none' stroke='%238f816a' stroke-opacity='0.45' stroke-width='1.05' stroke-linecap='round'/><path d='M72 98 C82 106 88 118 92 134' fill='none' stroke='%238f816a' stroke-opacity='0.45' stroke-width='1.05' stroke-linecap='round'/></g><g id='leafOutline'><path d='M72 10 C54 26 42 50 36 78 C28 120 42 166 72 204 C102 166 116 120 108 78 C102 50 90 26 72 10 Z' fill='none' stroke='%238f816a' stroke-opacity='0.62' stroke-width='1.45' stroke-linejoin='round' stroke-linecap='round'/><path d='M72 20 L72 194' fill='none' stroke='%238f816a' stroke-opacity='0.55' stroke-width='1.2' stroke-linecap='round'/><path d='M72 52 C62 58 54 68 46 82' fill='none' stroke='%238f816a' stroke-opacity='0.45' stroke-width='1.05' stroke-linecap='round'/><path d='M72 74 C60 80 52 94 46 110' fill='none' stroke='%238f816a' stroke-opacity='0.45' stroke-width='1.05' stroke-linecap='round'/><path d='M72 98 C62 106 56 118 52 134' fill='none' stroke='%238f816a' stroke-opacity='0.45' stroke-width='1.05' stroke-linecap='round'/><path d='M72 52 C82 58 90 68 98 82' fill='none' stroke='%238f816a' stroke-opacity='0.45' stroke-width='1.05' stroke-linecap='round'/><path d='M72 74 C84 80 92 94 98 110' fill='none' stroke='%238f816a' stroke-opacity='0.45' stroke-width='1.05' stroke-linecap='round'/><path d='M72 98 C82 106 88 118 92 134' fill='none' stroke='%238f816a' stroke-opacity='0.45' stroke-width='1.05' stroke-linecap='round'/></g></defs><g transform='translate(24,18) rotate(-12) scale(0.82)'><use href='%23leafOutline'/></g><g transform='translate(148,14) rotate(8) scale(1.06)'><use href='%23leafFill'/></g><g transform='translate(300,26) rotate(18) scale(0.72)'><use href='%23leafOutline'/></g><g transform='translate(42,168) rotate(14) scale(1.18)'><use href='%23leafFill'/></g><g transform='translate(214,150) rotate(-6) scale(0.92)'><use href='%23leafOutline'/></g><g transform='translate(324,172) rotate(-18) scale(1.10)'><use href='%23leafFill'/></g><g transform='translate(102,314) rotate(6) scale(0.74)'><use href='%23leafFill'/></g><g transform='translate(162,298) rotate(-10) scale(1.04)'><use href='%23leafOutline'/></g><g transform='translate(312,304) rotate(12) scale(0.86)'><use href='%23leafFill'/></g><g fill='%23dfd4be' fill-opacity='0.20'><circle cx='22' cy='228' r='9'/><circle cx='418' cy='242' r='7'/><circle cx='414' cy='416' r='11'/></g></pattern></defs><rect width='100%25' height='100%25' fill='url(%23p)'/></svg>");
    background-repeat:repeat;
}

/* Soft background blobs */
.blob{position:fixed;width:520px;height:520px;border-radius:50%;filter:blur(40px);opacity:.22;pointer-events:none;z-index:0}
.blob.one{left:-180px;top:-120px;background:radial-gradient(circle at 30% 30%, rgba(223,212,190,.8), transparent 55%)}
.blob.two{right:-220px;bottom:-160px;background:radial-gradient(circle at 30% 30%, rgba(206,194,172,.8), transparent 55%)}

/* Layout */
.app{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    min-height:100vh;
}

.sidebar{
    position:sticky;
    top:0;
    height:100vh;
    padding:14px 10px;
    border-right:1px solid rgba(43,42,40,.10);
    background:linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.45));
    backdrop-filter:blur(var(--blur));
    -webkit-backdrop-filter:blur(var(--blur));
    display:flex;
    flex-direction:column;
    gap:10px;
    box-shadow:12px 0 30px rgba(20,18,16,.05);
}

.sb-brand{
    display:flex;
    align-items:center;
    justify-content:center;
    height:52px;
    border-radius:18px;
    background:rgba(223,212,190,.42);
    border:1px solid rgba(43,42,40,.10);
    box-shadow:var(--shadow-sm);
    font-weight:900;
    letter-spacing:.6px;
}

.sb-btn{
    height:56px;
    width:100%;
    border-radius:18px;
    border:1px solid rgba(43,42,40,.10);
    background:rgba(255,255,255,.50);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    box-shadow:0 10px 22px rgba(20,18,16,.06);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    cursor:pointer;
    user-select:none;
    transition:transform .08s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
    position:relative;
    overflow:hidden;
    padding:0 10px;
    appearance:none;
    -webkit-appearance:none;
    font:inherit;
    color:inherit;
}

.sb-btn:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible{
    outline: none;
    box-shadow: 0 0 0 4px rgba(180,167,142,.24), 0 16px 30px rgba(20,18,16,.10);
    border-color: rgba(143,129,106,.55);
}

.sb-btn::before{
    content:"";
    position:absolute;
    top:-60px;left:-50px;
    width:120px;height:120px;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
    transform:rotate(25deg);
    opacity:0;
    transition:opacity .18s ease, transform .32s ease;
    pointer-events:none;
}

.sb-btn:hover{transform:translateY(-1px);border-color:rgba(143,129,106,.28);box-shadow:0 16px 30px rgba(20,18,16,.10);background:rgba(255,255,255,.62)}
.sb-btn:hover::before{opacity:1;transform:translateX(30px) rotate(25deg)}

.sb-btn.active{
    background:linear-gradient(180deg, rgba(180,167,142,.78), rgba(180,167,142,.58));
    border-color:rgba(143,129,106,.45);
    box-shadow:0 18px 32px rgba(20,18,16,.12);
}

.sb-btn span{font-size:20px;line-height:1}
.sb-label{display:none;font-size:12px;font-weight:800;letter-spacing:.22px;color:rgba(43,42,40,.72)}
.sb-hint{margin-top:auto;font-size:11px;color:rgba(43,42,40,.62);text-align:center;padding:10px 6px}

.content{padding:22px 18px 44px}
.container{max-width:var(--container);margin:0 auto}

/* Typography */
.page-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    padding:14px 14px 12px;
    border:1px solid rgba(43,42,40,.10);
    border-radius:var(--radius);
    background:linear-gradient(180deg, rgba(255,255,255,.70), rgba(255,255,255,.45));
    backdrop-filter:blur(var(--blur));
    -webkit-backdrop-filter:blur(var(--blur));
    box-shadow:var(--shadow);
}

.page-title{
    margin:0;
    font-size:clamp(18px, 1.4vw + 14px, 22px);
    letter-spacing:.2px;
}
.page-subtitle{margin-top:4px}
.page-head__actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
    flex-wrap:wrap;
}

.section-title{
    margin:18px 0 10px;
    font-size:14px;
    font-weight:900;
    letter-spacing:.38px;
    text-transform:uppercase;
    color:rgba(43,42,40,.70);
}
.section-title--spaced{margin-top:18px}
.muted{color:var(--muted);font-size:12px}
.mini{font-size:12px}
.danger{color:var(--danger);font-size:12px}
.ok{color:var(--ok);font-size:12px}

.status{
    margin:10px 2px 0;
    min-height:16px;
}

/* Card / form row */
.row{
    border:1px solid rgba(43,42,40,.10);
    border-radius:var(--radius);
    background:linear-gradient(180deg, rgba(255,255,255,.70), rgba(255,255,255,.45));
    backdrop-filter:blur(var(--blur));
    -webkit-backdrop-filter:blur(var(--blur));
    box-shadow:var(--shadow);
    position:relative;
    overflow:hidden;
    padding:14px;
}

/* Modern form layout */
.form-row{
    display:grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap:12px;
    align-items:end;
}

.field{grid-column: span 3;}
.field--wide{grid-column: span 4;}
.field--actions{grid-column: span 2; display:flex; align-items:end; justify-content:flex-end;}

label{display:block;font-size:12px;color:rgba(43,42,40,.72);margin:0 0 6px 2px}
input,select{
    height:42px;
    width:100%;
    padding:10px 12px;
    border-radius:12px;
    border:1px solid rgba(43,42,40,.14);
    background:rgba(255,255,255,.72);
    color:var(--text);
    outline:none;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
}
input:focus,select:focus{border-color:rgba(143,129,106,.65)}
input:disabled,select:disabled,button:disabled{opacity:.55;cursor:not-allowed}

/* Buttons */
button{
    height:42px;
    min-height:var(--tap);
    padding:0 14px;
    border-radius:14px;
    border:1px solid rgba(43,42,40,.12);
    background:rgba(255,255,255,.46);
    color:var(--text);
    font-weight:800;
    letter-spacing:.2px;
    cursor:pointer;
    position:relative;
    overflow:hidden;
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    transition:transform .08s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, filter .18s ease;
    z-index:1;
}
button::after{
    content:"";
    position:absolute;
    top:-60px;left:-40px;
    width:120px;height:120px;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
    transform:rotate(25deg);
    opacity:0;
    transition:opacity .18s ease, transform .34s ease;
    pointer-events:none;
}
button:hover:not(:disabled){
    transform:translateY(-1px);
    border-color:rgba(143,129,106,.25);
    box-shadow:0 16px 30px rgba(20,18,16,.14);
    filter:saturate(1.06);
}
button:hover:not(:disabled)::after{opacity:1;transform:translateX(28px) rotate(25deg)}
.btn-primary{
    background:linear-gradient(180deg, rgba(180,167,142,.68), rgba(180,167,142,.46));
    border-color:rgba(143,129,106,.42);
}
.btn-soft{background:rgba(240,232,213,.42);border-color:rgba(206,194,172,.62)}

/* Table */
.table-wrap{position:relative;margin-top:10px;border-radius:var(--radius);overflow:hidden}
table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    border:1px solid rgba(43,42,40,.10);
    border-radius:var(--radius);
    overflow:hidden;
    background:rgba(255,255,255,.58);
    backdrop-filter:blur(var(--blur));
    -webkit-backdrop-filter:blur(var(--blur));
    box-shadow:var(--shadow);
    position:relative;
    z-index:1;
}
thead th{
    position:sticky;
    top:0;
    z-index:2;
    background:linear-gradient(180deg, rgba(240,232,213,.78), rgba(223,212,190,.52));
    color:rgba(43,42,40,.85);
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.45px;
    padding:12px;
    border-bottom:1px solid rgba(43,42,40,.10);
    text-align:left;
}
tbody td{padding:12px;border-bottom:1px solid rgba(43,42,40,.07);font-size:14px}
tbody tr:hover td{background:rgba(240,232,213,.26)}
tbody tr:last-child td{border-bottom:0}

.actions button{
    height:36px;
    min-height:36px;
    padding:0 12px;
    border-radius:12px;
    font-weight:900;
    margin-right:6px;
    background:rgba(255,255,255,.46);
}
.actions button[data-act="edit"]{background:rgba(223,212,190,.42);border-color:rgba(206,194,172,.70)}
.actions button[data-act="del"]{border-color:rgba(176,0,32,.22);color:rgba(176,0,32,.92)}

/* Dialog */
dialog{
    border:1px solid rgba(43,42,40,.16);
    border-radius:18px;
    padding:14px;
    width:min(760px, 94vw);
    max-height: min(80vh, 720px);
    overflow:auto;
    background:rgba(255,255,255,.82);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    box-shadow:0 22px 70px rgba(20,18,16,.26);
}
dialog::backdrop{background:rgba(0,0,0,.35);backdrop-filter:blur(2px)}
.dlg-grid{
    display:grid;
    grid-template-columns:1fr 2fr;
    gap:10px 12px;
    align-items:center;
    margin-top:8px;
    padding:10px;
    border:1px solid rgba(43,42,40,.10);
    border-radius:16px;
    background:rgba(240,232,213,.22);
}
.dlg-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:12px}

/* View transition */
.view{}
.view-enter{
    animation: viewIn .18s ease-out;
}
@keyframes viewIn{
    from{opacity:0; transform: translateY(4px);}
    to{opacity:1; transform: translateY(0);}
}

@media (prefers-reduced-motion: reduce){
    *{animation:none !important; transition:none !important;}
}

/* ---------------- Mobile-first optimizations ---------------- */
@media (max-width: 980px){
    .app{grid-template-columns:1fr;}
    .content{
        padding:14px 10px calc(22px + var(--bottom-nav-h) + env(safe-area-inset-bottom));
    }
    .container{max-width:100%;}

    /* Bottom tab bar (2 tabs only) */
    .sidebar{
        position:fixed;
        left:0; right:0; bottom:0;
        top:auto;
        height:auto;
        z-index:20;
        padding:10px 12px calc(10px + env(safe-area-inset-bottom));
        border-right:0;
        border-top:1px solid rgba(43,42,40,.10);
        box-shadow:0 -18px 42px rgba(20,18,16,.10);
        flex-direction:row;
        align-items:center;
        justify-content:space-between;
        gap:10px;
    }
    .sb-brand{display:none;}
    .sb-hint{display:none;}
    .sb-desktop-only{display:none;}

    .sb-btn{
        height:52px;
        border-radius:18px;
        flex:1 1 0;
        justify-content:center;
    }
    .sb-label{display:inline;}

    .page-head{
        padding:12px;
        flex-direction:column;
        align-items:stretch;
    }
    .page-head__actions{
        justify-content:stretch;
        width:100%;
    }
    .page-head__actions > *{flex:1 1 0;}
    .page-head__actions form{display:flex;}
    .page-head__actions form button{width:100%;}

    /* Form grid becomes single-column-friendly */
    .form-row{
        grid-template-columns:1fr;
        gap:10px;
        padding:12px;
    }
    .row{padding:12px;}
    .field, .field--wide, .field--actions{grid-column:auto;}
    .field--actions{justify-content:stretch;}
    .field--actions button{width:100%;}


    /* Table: mobile cards (no zoom, no sideways scrolling) */
    .table-wrap{overflow:visible;}
    table{min-width:0; border:0; background:transparent; box-shadow:none;}
    thead{display:none;}
    tbody{display:grid; gap:12px;}
    tbody tr{
        display:block;
        border:1px solid rgba(43,42,40,.10);
        border-radius:var(--radius);
        background:linear-gradient(180deg, rgba(255,255,255,.70), rgba(255,255,255,.45));
        backdrop-filter:blur(var(--blur));
        -webkit-backdrop-filter:blur(var(--blur));
        box-shadow:var(--shadow);
        overflow:hidden;
    }
    tbody td{
        display:flex;
        justify-content:space-between;
        align-items:center;
        gap:12px;
        padding:12px;
        border-bottom:1px solid rgba(43,42,40,.07);
        font-size:14px;
    }
    tbody td:last-child{border-bottom:0;}
    tbody td::before{
        content: attr(data-label);
        font-size:12px;
        font-weight:900;
        letter-spacing:.38px;
        text-transform:uppercase;
        color:rgba(43,42,40,.60);
        flex:0 0 auto;
    }
    .actions{padding:12px;}
    .actions__wrap{
        display:flex;
        gap:10px;
        width:100%;
    }
    .actions__wrap button{
        flex:1 1 0;
        height:44px;
        border-radius:14px;
        margin-right:0;
    }


    /* Dialog on mobile */
    dialog{width:min(720px, 96vw); max-height: 86vh;}
    .dlg-grid{grid-template-columns:1fr;}
}

@media (max-width: 420px){
    .sb-btn span{font-size:18px;}
    button,input,select{height:46px;}
    .actions button{height:38px;}
}

/* ========== Dark Mode ========== */
body.dark {
    --bg: #1a1917;
    --surface: #242220;
    --surface-2: #2e2c29;
    --surface-3: #383532;
    --text: #e8e5e0;
    --text-secondary: #b5b0a8;
    --muted: #9a958d;
    --taupe-100: #3a3630;
    --taupe-200: #4a4540;
    --taupe-300: #5a554e;
    --accent: #c4b597;
    --accent-hover: #d4c5a7;
    --border: rgba(255,255,255,.10);
    --border-strong: rgba(255,255,255,.16);
    --shadow: 0 14px 34px rgba(0,0,0,.40);
    --shadow-sm: 0 10px 22px rgba(0,0,0,.30);
    --danger: #ff6b6b;
    --ok: #66bb6a;
    --radius: 16px;
    background: var(--bg);
}

/* Kill light-mode decorative layers */
body.dark::before { opacity: .04; filter: invert(1) brightness(.3); }
body.dark .blob { opacity: .03; }

/* Sidebar */
body.dark .sidebar {
    background: var(--surface);
    border-color: var(--border);
    box-shadow: 12px 0 30px rgba(0,0,0,.25);
    backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.dark .sb-brand {
    background: var(--surface-2);
    border-color: var(--border);
    color: var(--accent);
    box-shadow: var(--shadow-sm);
}
body.dark .sb-btn {
    background: var(--surface-2);
    border-color: var(--border);
    color: var(--text);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
body.dark .sb-btn::before { display: none; }
body.dark .sb-btn:hover {
    background: var(--surface-3);
    border-color: var(--border-strong);
    box-shadow: 0 8px 20px rgba(0,0,0,.20);
}
body.dark .sb-btn.active {
    background: linear-gradient(180deg, var(--taupe-300), var(--taupe-200));
    border-color: var(--accent);
    color: var(--text);
    box-shadow: 0 8px 20px rgba(0,0,0,.25);
}
body.dark .sb-label { color: var(--text-secondary); }
body.dark .sb-hint { color: var(--muted); }

/* Page header */
body.dark .page-head {
    background: var(--surface);
    border-color: var(--border);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    box-shadow: var(--shadow);
}
body.dark .page-title { color: var(--text); }
body.dark .page-subtitle { color: var(--muted); }

/* Container — transparent, no overlay */
body.dark .container { background: transparent; }

/* Section titles */
body.dark .section-title { color: var(--muted); }

/* Cards / rows */
body.dark .row {
    background: var(--surface);
    border-color: var(--border);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    box-shadow: var(--shadow);
}

/* Labels */
body.dark label { color: var(--text-secondary); }

/* Form controls */
body.dark input, body.dark select {
    background: var(--surface-2);
    color: var(--text);
    border-color: var(--border-strong);
    backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.dark input:focus, body.dark select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(196,181,151,.20);
}
body.dark input::placeholder { color: var(--muted); }

/* Buttons — base */
body.dark button {
    background: var(--surface-2);
    color: var(--text);
    border-color: var(--border-strong);
    backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.dark button::after { display: none; }
body.dark button:hover:not(:disabled) {
    background: var(--surface-3);
    border-color: var(--accent);
    box-shadow: 0 8px 20px rgba(0,0,0,.25);
    filter: none;
}
body.dark .btn-primary {
    background: var(--accent);
    color: var(--bg);
    border-color: var(--accent);
}
body.dark .btn-primary:hover:not(:disabled) {
    background: var(--accent-hover);
    color: var(--bg);
    border-color: var(--accent-hover);
}
body.dark .btn-soft {
    background: var(--surface-2);
    color: var(--text);
    border-color: var(--border-strong);
}
body.dark .btn-soft:hover:not(:disabled) {
    background: var(--surface-3);
}

/* Table */
body.dark table {
    background: var(--surface);
    border-color: var(--border);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    box-shadow: var(--shadow);
}
body.dark thead th {
    background: var(--surface-2);
    color: var(--text-secondary);
    border-bottom-color: var(--border-strong);
}
body.dark tbody td {
    border-bottom-color: var(--border);
    color: var(--text);
}
body.dark tbody tr:nth-child(even) td { background: rgba(255,255,255,.02); }
body.dark tbody tr:hover td { background: rgba(255,255,255,.06); }
body.dark tbody tr:last-child td { border-bottom: 0; }

/* Action buttons in table */
body.dark .actions button {
    background: var(--surface-2);
    color: var(--text);
}
body.dark .actions button[data-act="edit"] {
    background: var(--taupe-200);
    border-color: var(--taupe-300);
    color: var(--text);
}
body.dark .actions button[data-act="del"] {
    border-color: rgba(255,107,107,.35);
    color: var(--danger);
    background: var(--surface-2);
}

/* Dialog / modal */
body.dark dialog {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border-strong);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    box-shadow: 0 22px 70px rgba(0,0,0,.50);
}
body.dark dialog::backdrop { background: rgba(0,0,0,.60); backdrop-filter: blur(2px); }
body.dark .dlg-grid {
    background: var(--surface-2);
    border-color: var(--border);
}

/* Status / utility */
body.dark .status { color: var(--muted); }
body.dark .muted { color: var(--muted); }
body.dark .danger { color: var(--danger); }
body.dark .ok { color: var(--ok); }

/* Focus visible (accessibility) */
body.dark .sb-btn:focus-visible,
body.dark button:focus-visible,
body.dark input:focus-visible,
body.dark select:focus-visible {
    box-shadow: 0 0 0 4px rgba(196,181,151,.25), 0 8px 20px rgba(0,0,0,.20);
    border-color: var(--accent);
    outline: none;
}

/* Links */
body.dark a { color: var(--accent); }
body.dark a:hover { color: var(--accent-hover); }

/* Mobile dark overrides */
@media (max-width: 980px) {
    body.dark .sidebar {
        border-top-color: var(--border);
        border-right: 0;
        box-shadow: 0 -18px 42px rgba(0,0,0,.30);
    }
    body.dark tbody tr {
        background: var(--surface);
        border-color: var(--border);
        backdrop-filter: none; -webkit-backdrop-filter: none;
        box-shadow: var(--shadow);
    }
    body.dark tbody td::before { color: var(--muted); }
    body.dark tbody td { border-bottom-color: var(--border); }
}

#darkToggle{font-size:18px;min-width:40px;padding:0 8px;line-height:40px;}
