/* ============================================================
   NESTMATE — assets/css/base.css
   Shared variables, reset, layout, components
   Fixed: single global tabbar, card spacing
   ============================================================ */

*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
::-webkit-scrollbar  { display: none; }
* { scrollbar-width: none; -webkit-tap-highlight-color: transparent; }

:root {
    --cb:    #1D9E75;
    --cbL:   #E1F5EE;
    --cbT:   #0F6E56;
    --cbD:   #0F4C3A;
    --bg:    #fff;
    --card:  #fff;
    --txt:   #1C1C1E;
    --txt2:  #6C6C70;
    --txt3:  #8A8A8E;
    --bdr:   rgba(0,0,0,.09);
    --red:   #FF3B30;
    --amber: #F59E0B;
    --amberL:#FFFBEB;
    --amberT:#B45309;
    --pu:    #534AB7;
    --puL:   #EEEDFE;
    --puT:   #3C3489;
    --safe-top: env(safe-area-inset-top,  0px);
    --safe-bot: env(safe-area-inset-bottom, 0px);
}

html, body {
    height: 100%;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    background: #f2f2f7;
    overflow: hidden;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── NATIVE APP BEHAVIOUR ── */

/* No rubber-band bounce on iOS; no pull-to-refresh glow on Android */
html, body { overscroll-behavior: none; }

/* Disable text selection on UI elements — feels like a native app */
body {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none; /* Blocks iOS long-press "Copy/Open" popup */
}

/* Re-enable selection where users genuinely need it */
input, textarea, [contenteditable] {
    -webkit-user-select: text;
    user-select: text;
    -webkit-touch-callout: default;
}

/* Eliminate double-tap zoom delay on all interactive elements */
a, button, [onclick], label,
.tab-item, .nm-row, .duty-card, .task-item, .swap-card,
.inbox-item, .log-week, .lw-star { touch-action: manipulation; }

/* Prevent iOS from zooming the page when an input is focused (needs >= 16px) */
input, textarea, select { font-size: max(16px, 1em) !important; }

/* ── APP SHELL ── */
#app {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    max-width: 430px;
    margin: 0 auto;
    overflow: hidden;
    box-shadow: 0 0 40px rgba(0,0,0,.15);
}

/* ── SCREENS ── */
/* Screens fill everything above the global tabbar */
.screen {
    position: absolute;
    /* Leave room at bottom for tabbar */
    top: 0;
    left: 0;
    right: 0;
    bottom: calc(60px + var(--safe-bot));
    display: flex;
    flex-direction: column;
    background: var(--bg);
    overflow: hidden;
    transition: opacity .22s, transform .22s cubic-bezier(.32,.72,0,1);
}
.screen.hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateX(12px);
}

/* ── GLOBAL SINGLE TAB BAR ── */
/* Lives at the very bottom of #app, always visible when logged in */
.tabbar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(60px + var(--safe-bot));
    padding-bottom: var(--safe-bot);
    background: var(--card);
    border-top: .5px solid var(--bdr);
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding-left: 4px;
    padding-right: 4px;
    z-index: 5;
    flex-shrink: 0;
}
.tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    cursor: pointer;
    flex: 1;
    position: relative;
    padding-top: 8px;
    border: none;
    background: none;
    font-family: inherit;
    color: var(--txt3);
    transition: color .18s;
}
.tab-item.active       { color: var(--cb); }
.tab-item svg          { color: inherit; transition: color .18s; }
.tab-label {
    font-size: 10.5px;
    font-weight: 500;
    color: inherit;
    transition: color .18s;
    letter-spacing: .01em;
}
.tab-badge {
    position: absolute;
    top: 4px;
    right: calc(50% - 18px);
    background: var(--red);
    color: #fff;
    font-size: 7px;
    font-weight: 700;
    min-width: 15px;
    height: 15px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--bg);
    padding: 0 3px;
    z-index: 1;
}

/* ── BG ORB ── */
.bg-orb {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    width: 500px; height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(29,158,117,.07) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* ── CARDS ── */
.nm-card {
    background: var(--card);
    border-radius: 16px;
    border: .5px solid var(--bdr);
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
.nm-group {
    background: var(--card);
    border-radius: 14px;
    border: .5px solid var(--bdr);
    overflow: hidden;
}
.nm-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: .5px solid var(--bdr);
    cursor: pointer;
    transition: background .12s;
}
.nm-row:last-child { border-bottom: none; }
.nm-row:active     { background: rgba(0,0,0,.03); }
.nm-row-label { font-size: 15px; font-weight: 500; color: var(--txt); }
.nm-row-sub   { font-size: 12px; color: var(--txt2); margin-top: 3px; line-height: 1.4; }
.nm-chev      { color: var(--txt3); font-size: 18px; flex-shrink: 0; }
.nm-sec-label { font-size: 10px; font-weight: 700; color: var(--txt3); text-transform: uppercase; letter-spacing: .07em; padding: 0 4px; }

/* ── BUTTONS ── */
.btn-primary {
    width: 100%;
    padding: 15px;
    border-radius: 14px;
    background: var(--cb);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: -.1px;
    transition: opacity .2s, transform .1s;
}
.btn-primary:active   { transform: scale(.98); opacity: .9; }
.btn-primary:disabled { background: rgba(0,0,0,.1); color: var(--txt3); pointer-events: none; }
.btn-secondary {
    width: 100%;
    padding: 14px;
    border-radius: 14px;
    background: rgba(0,0,0,.07);
    color: var(--txt2);
    font-size: 15px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

/* ── BOTTOM SHEETS ── */
.sheet-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 60;
    display: flex;
    align-items: flex-end;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s;
}
.sheet-overlay.open { opacity: 1; pointer-events: auto; }
.bottom-sheet {
    background: var(--bg);
    border-radius: 22px 22px 0 0;
    padding: 0 18px calc(24px + var(--safe-bot));
    width: 100%;
    transform: translateY(20px);
    transition: transform .3s cubic-bezier(.32,.72,0,1);
}
.sheet-overlay.open .bottom-sheet { transform: translateY(0); }
.sheet-handle {
    width: 36px;
    height: 4px;
    background: rgba(0,0,0,.15);
    border-radius: 99px;
    margin: 10px auto 18px;
}
.sheet-title { font-size: 18px; font-weight: 700; color: var(--txt); margin-bottom: 6px; letter-spacing: -.3px; }
.sheet-sub   { font-size: 14px; color: var(--txt2); margin-bottom: 16px; line-height: 1.6; }

/* ── SLIDE PANELS ── */
.slide-panel {
    position: absolute;
    inset: 0;
    background: var(--bg);
    transform: translateX(100%);
    transition: transform .32s cubic-bezier(.32,.72,0,1);
    display: flex;
    flex-direction: column;
    z-index: 30;
    overflow: hidden;
}
.slide-panel.open { transform: translateX(0); }
.panel-top {
    padding: 12px 14px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    min-height: 50px;
    position: relative;
    z-index: 2;
}
.back-btn {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(0,0,0,.06);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    flex-shrink: 0;
}
.panel-title { font-size: 18px; font-weight: 700; color: var(--txt); letter-spacing: -.4px; }
.panel-body  { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 16px 28px; position: relative; z-index: 2; }

/* ── INPUTS ── */
.nm-input-group {
    background: var(--card);
    border-radius: 14px;
    border: .5px solid rgba(0,0,0,.12);
    overflow: hidden;
    margin-bottom: 12px;
}
.nm-input-row { border-bottom: .5px solid var(--bdr); }
.nm-input-row:last-child { border-bottom: none; }
.nm-input-row input,
.nm-input-row textarea {
    width: 100%;
    border: none;
    background: transparent;
    font-size: 15px;
    color: var(--txt);
    font-family: inherit;
    outline: none;
    padding: 14px 16px;
}
.nm-input-row textarea { resize: none; min-height: 90px; }
.nm-input-row input::placeholder,
.nm-input-row textarea::placeholder { color: var(--txt3); }

/* ── ALERTS ── */
.alert-error {
    background: #FFF0F0;
    border: .5px solid rgba(255,59,48,.25);
    border-radius: 11px;
    padding: 11px 14px;
    font-size: 13px;
    color: #A32D2D;
    margin-bottom: 12px;
    display: none;
    line-height: 1.5;
}
.alert-error.visible { display: block; }
.alert-success {
    background: var(--cbL);
    border: .5px solid rgba(29,158,117,.25);
    border-radius: 11px;
    padding: 11px 14px;
    font-size: 13px;
    color: var(--cbT);
    margin-bottom: 12px;
    display: none;
    line-height: 1.5;
    font-weight: 500;
}
.alert-success.visible { display: block; }

/* ── TOGGLE ── */
.nm-toggle {
    width: 44px;
    height: 26px;
    border-radius: 99px;
    position: relative;
    cursor: pointer;
    transition: background .2s;
    border: none;
    flex-shrink: 0;
}
.nm-toggle.on  { background: var(--cb); }
.nm-toggle.off { background: #D1D1D6; }
.nm-toggle-thumb {
    position: absolute;
    top: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    transition: left .2s;
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.nm-toggle.on  .nm-toggle-thumb { left: 21px; }
.nm-toggle.off .nm-toggle-thumb { left:  3px; }

/* ── LOADING ── */
.loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,.92);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    flex-direction: column;
    gap: 12px;
}
.loading-overlay.hidden { display: none; }
.spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--cbL);
    border-top-color: var(--cb);
    border-radius: 50%;
    animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-text { font-size: 13px; color: var(--txt2); font-weight: 500; }

/* ── CHIPS ── */
.nm-chip {
    background: var(--card);
    border: .5px solid var(--bdr);
    border-radius: 99px;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 500;
    color: var(--txt2);
    cursor: pointer;
    transition: all .15s;
    display: inline-block;
    margin: 0 5px 8px 0;
}
.nm-chip.sel {
    background: var(--cbL);
    border-color: var(--cb);
    color: var(--cbT);
    font-weight: 700;
}

/* ── DUTY CARDS ── */
.duty-card {
    background: var(--card);
    border-radius: 18px;
    border: .5px solid var(--bdr);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 13px;
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.duty-icon {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.duty-lbl  { font-size: 9px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; margin-bottom: 3px; }
.duty-name { font-size: 15px; font-weight: 700; color: var(--txt); letter-spacing: -.2px; }
.duty-sub  { font-size: 11px; color: var(--txt2); margin-top: 2px; }
.duty-btn  { margin-left: auto; flex-shrink: 0; background: #1565C0; color: #fff; border: none; border-radius: 9px; padding: 6px 14px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; }
.duty-btn:disabled { background: #D1D1D6; pointer-events: none; }

/* ── TASK ITEMS ── */
.task-item {
    background: var(--card);
    border-radius: 14px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    overflow: hidden;
    cursor: pointer;
    border: .5px solid var(--bdr);
    transition: opacity .2s;
}
.task-item.done { opacity: .55; }
.task-accent { width: 3px; min-height: 56px; align-self: stretch; flex-shrink: 0; transition: background .25s; }
.task-accent.pending  { background: #e3f2ec; }
.task-accent.complete { background: var(--cb); }
.task-content { flex: 1; padding: 13px 12px; }
.task-num     { font-size: 9px; color: var(--txt3); font-weight: 600; letter-spacing: .05em; margin-bottom: 3px; }
.task-text    { font-size: 14px; color: var(--txt); line-height: 1.4; }
.task-text.done { text-decoration: line-through; color: var(--txt3); }
.task-check   { width: 52px; min-height: 56px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.checkbox     { width: 28px; height: 28px; border-radius: 9px; border: 2px solid rgba(0,0,0,.15); display: flex; align-items: center; justify-content: center; transition: all .18s; }
.checkbox.checked { background: var(--cb); border-color: var(--cb); }
.complete-btn { width: 100%; padding: 15px; border-radius: 14px; border: none; font-size: 15px; font-weight: 700; cursor: pointer; font-family: inherit; transition: all .2s; }
.complete-btn.active   { background: var(--cb); color: #fff; }
.complete-btn.inactive { background: rgba(0,0,0,.07); color: var(--txt3); pointer-events: none; }

/* ── NUDGE items ── */
.nudge-item { background:#fff; border-radius:12px; border:.5px solid var(--bdr); padding:10px 12px; display:flex; align-items:center; gap:10px; cursor:pointer; margin-bottom:7px; transition:background .15s,border-color .15s; }
.nudge-item.sel { background:var(--cbL) !important; border-color:rgba(29,158,117,.35) !important; }
.nudge-icon { width:28px; height:28px; border-radius:8px; background:#F2F2F7; display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0; transition:background .15s; }
.nudge-item.sel .nudge-icon { background:#C8EFE0; }
.nudge-lbl  { font-size:13px; font-weight:500; color:var(--txt); flex:1; }
.nudge-radio { width:20px; height:20px; border-radius:50%; border:1.5px solid rgba(0,0,0,.18); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all .18s; }
.nudge-item.sel .nudge-radio { background:var(--cb); border-color:var(--cb); }
/* Send button — class-based active/off (avoids iOS disabled-attribute pointer-events bug) */
.nudge-send-btn     { transition:background .18s,color .18s; }
.nudge-send-btn.off { background:rgba(0,0,0,.07) !important; color:var(--txt3) !important; pointer-events:none; }

/* ── SPLASH ── */
#splashScreen.open { transform: scale(1) !important; opacity: 1 !important; pointer-events: auto !important; }
.confetti-piece { position: absolute; border-radius: 2px; animation: cfall linear forwards; }
@keyframes cfall {
    0%   { transform: translateY(-20px) rotate(0deg); opacity: 1; }
    70%  { opacity: 1; }
    100% { transform: translateY(700px) rotate(900deg); opacity: 0; }
}

/* ── TASK SHEET ── */
#taskSheet.open { transform: translateY(0) !important; }

/* ── ANIMATIONS ── */
@keyframes binRock {
    0%,100% { transform: translateX(0) rotate(0deg); }
    25%     { transform: translateX(2px) rotate(3deg); }
    75%     { transform: translateX(-1.5px) rotate(-2.5deg); }
}
.bin-anim { animation: binRock 1.9s ease-in-out infinite; transform-origin: bottom center; }

@keyframes snowFall {
    0%   { transform: translateY(-8px); opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: .6; }
    100% { transform: translateY(36px); opacity: 0; }
}
@keyframes snowSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.snow-wrap     { position: relative; width: 28px; height: 28px; overflow: hidden; }
.snow-wrap svg { position: relative; z-index: 2; transform-origin: center; animation: snowSpin 5s linear infinite; }
.flake         { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #BBDEFB; z-index: 1; }
.fk1 { top: 0; left: 20%; animation: snowFall 2.8s ease-in infinite; }
.fk2 { top: 0; left: 55%; width: 2px; height: 2px; animation: snowFall 3.2s ease-in infinite .9s; }
.fk3 { top: 0; left: 78%; width: 2px; height: 2px; animation: snowFall 2.5s ease-in infinite 1.6s; }

@keyframes mowRoll {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    30%      { transform: translateX(3px) rotate(1.5deg); }
    70%      { transform: translateX(-2.5px) rotate(-1.5deg); }
}
.mow-anim { animation: mowRoll 2.2s ease-in-out infinite; transform-origin: center bottom; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── ONBOARDING ── */
.ob-slide { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 28px; text-align: center; transition: transform .4s cubic-bezier(.32,.72,0,1), opacity .4s; }
.ob-slide.hidden    { transform: translateX(100%); opacity: 0; pointer-events: none; }
.ob-slide.slide-out { transform: translateX(-100%); opacity: 0; pointer-events: none; }

/* ── LOG PAGE ── */
.log-week { background: var(--card); border-radius: 13px; border: .5px solid var(--bdr); padding: 10px 12px; margin-bottom: 7px; box-shadow: 0 1px 4px rgba(0,0,0,.04); }
.lw-hdr { font-size: 9px; color: var(--txt2); font-weight: 500; margin-bottom: 7px; }
.lw-area { padding: 7px 0; border-bottom: .5px solid var(--bdr); }
.lw-area:last-child { border-bottom: none; padding-bottom: 0; }
.lw-area-top { display: flex; align-items: center; gap: 5px; margin-bottom: 5px; }
.lw-area:last-child .lw-area-top { margin-bottom: 4px; }
.lw-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.lw-name { font-size: 11px; color: var(--txt); flex: 1; font-weight: 500; }
.lw-done { font-size: 9px; font-weight: 700; color: var(--cbT); flex-shrink: 0; }
.lw-missed { font-size: 9px; font-weight: 700; color: #A32D2D; flex-shrink: 0; }
.lw-rating { display: flex; align-items: center; gap: 5px; background: rgba(0,0,0,.04); border-radius: 9px; padding: 5px 8px; border: .5px solid rgba(0,0,0,.13); margin-left: 11px; }
.lw-rlbl { font-size: 9px; color: #7aaa9a; flex-shrink: 0; }
.lw-stars { display: flex; gap: 3px; flex: 1; align-items: center; }
.lw-star { font-size: 16px; color: #C8A96E; cursor: pointer; transition: color .12s, transform .15s; display: inline-block; line-height: 1; user-select: none; opacity: .75; }
.lw-star.hover { color: #C8943A; transform: scale(1.2); opacity: 1; }
.lw-star.on { color: #B8822A; opacity: 1; }
.lw-ty-wrap { display: flex; align-items: center; min-width: 48px; }
.lw-ty-msg { font-size: 9px; font-weight: 700; color: var(--cbT); animation: lwTyAnim 2.4s ease forwards; white-space: nowrap; }
.lw-rated-stars { font-size: 13px; color: #B8822A; letter-spacing: 1px; }
@keyframes lwTyAnim { 0% { opacity:0; transform:translateY(5px) scale(.9); } 18% { opacity:1; transform:translateY(0) scale(1.05); } 32% { transform:scale(1); } 72% { opacity:1; } 100% { opacity:0; transform:translateY(-6px) scale(.95); } }

/* ── THEME SEGMENTED CONTROL ── */
.theme-seg {
    display: inline-flex;
    background: rgba(0,0,0,.07);
    border-radius: 10px;
    padding: 3px;
    gap: 2px;
}
html.dark .theme-seg { background: rgba(255,255,255,.1); }
.theme-btn {
    padding: 6px 14px;
    border-radius: 8px;
    cursor: pointer;
    border: none;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    transition: background .2s, color .2s;
    background: transparent;
    color: var(--txt2);
}
.theme-btn.active {
    background: var(--cb) !important;
    color: #fff !important;
    font-weight: 700 !important;
}

/* ── LARGER TEXT MODE (html.large-text) ── */
/* Row / list items */
html.large-text .nm-row-label   { font-size: 17px !important; }
html.large-text .nm-row-sub     { font-size: 14px !important; }
html.large-text .nm-sec-label   { font-size: 13px !important; }
html.large-text .nm-chev        { font-size: 22px !important; }

/* Duty cards */
html.large-text .duty-name      { font-size: 17px !important; }
html.large-text .duty-sub       { font-size: 13px !important; }
html.large-text .duty-lbl       { font-size: 11px !important; }

/* Task list */
html.large-text .task-text      { font-size: 16px !important; }
html.large-text .task-num       { font-size: 11px !important; }

/* Log wheel */
html.large-text .lw-name        { font-size: 13px !important; }
html.large-text .lw-done,
html.large-text .lw-missed      { font-size: 11px !important; }

/* Panels & sheets */
html.large-text .panel-title    { font-size: 21px !important; }
html.large-text .sheet-title    { font-size: 21px !important; }
html.large-text .sheet-sub      { font-size: 15px !important; }

/* Supplies */
html.large-text .supply-name    { font-size: 15px !important; }
html.large-text .supply-buyer   { font-size: 12px !important; }
html.large-text .supply-out-badge { font-size: 11px !important; }

/* Buttons */
html.large-text .btn-primary,
html.large-text .btn-secondary  { font-size: 17px !important; padding: 16px !important; }
html.large-text .supply-btn-got,
html.large-text .supply-btn-out { font-size: 17px !important; padding: 16px !important; }

/* Tab bar */
html.large-text .tab-label      { font-size: 12px !important; }

/* ── HIGH CONTRAST MODE (html.high-contrast) ── */
/* Colours are set via JS CSS-variable overrides in applyHighContrast().
   CSS handles structural contrast boosts that variables can't reach. */
html.high-contrast .nm-group              { border: 1px solid var(--bdr) !important; }
html.high-contrast .nm-row + .nm-row      { border-top-width: 1px !important; }
html.high-contrast .duty-card             { border-width: 1px !important; }
html.high-contrast .nm-input-row          { border-bottom-width: 1px !important; }
html.high-contrast .nm-input-group        { border-width: 1px !important; }
html.high-contrast .log-week              { border-width: 1px !important; }
html.high-contrast .lw-area               { border-bottom-width: 1px !important; }
html.high-contrast .task-item             { border-width: 1px !important; }

/* ============================================================
   DARK MODE OVERRIDES
   Applied when JS adds .dark to <html>
   Fixes all hardcoded colours that don't use CSS variables
   ============================================================ */

/* ── Page backgrounds ── */
html.dark body            { background: #000; }
html.dark #app            { box-shadow: 0 0 60px rgba(0,0,0,.8); }
html.dark .screen         { background: var(--bg); }

/* ── Sheets & overlays ── */
html.dark .bottom-sheet   { background: #1C1C1E; }
html.dark .sheet-handle   { background: rgba(255,255,255,.2); }
html.dark .admin-sheet    { background: #1C1C1E; }
html.dark #loginScreen    { background: #000; }

/* ── Buttons ── */
html.dark .btn-primary:disabled    { background: rgba(255,255,255,.1); color: var(--txt3); }
html.dark .btn-secondary           { background: rgba(255,255,255,.08); color: var(--txt2); }
html.dark .complete-btn.inactive   { background: rgba(255,255,255,.08); color: var(--txt3); }
html.dark .nudge-send-btn.off      { background: rgba(255,255,255,.08) !important; color: var(--txt3) !important; }
html.dark .duty-btn:disabled       { background: #3A3A3C; color: var(--txt3); }

/* ── Nudge items (hardcoded #fff background) ── */
html.dark .nudge-item              { background: #2C2C2E; }
html.dark .nudge-item.sel          { background: var(--cbL) !important; }
html.dark .nudge-item.sel .nudge-icon { background: #0F3D2E !important; }

/* ── Task / checkbox items ── */
html.dark .task-card.done          { background: rgba(37,184,135,.12) !important; border-color: var(--cb) !important; }
html.dark .checkbox                { border-color: rgba(255,255,255,.2); }
html.dark .task-accent.pending     { background: #0C2620; }

/* ── Log — hardcoded text colours ── */
html.dark .lw-missed               { color: #FF6060; }
html.dark #recMissed               { color: #FF6060 !important; }
html.dark .lw-rating               { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.15); }
html.dark .lw-rated-stars          { color: #C8A96E; }

/* ── Inbox ── */
html.dark .inbox-msg.cancelled     { background: #1C1C1E; }
html.dark .inbox-tab.inactive      { background: #1C1C1E; }
html.dark .delete-bg               { background: #FF453A; }

/* ── Announcement board (hardcoded amber tones) ── */
html.dark #announceBoard           { background: #2A1A04 !important; }

/* ── Inputs & textareas ── */
html.dark input:not([type=range]):not([type=checkbox]),
html.dark textarea,
html.dark select                   { background: #2C2C2E; color: var(--txt); border-color: var(--bdr); }
html.dark input::placeholder,
html.dark textarea::placeholder    { color: var(--txt3); }

/* ── Move-out acknowledgement box ── */
html.dark #monAckBox               { border-color: rgba(255,255,255,.2) !important; background: transparent; }

/* ── Back button ── */
html.dark .back-btn                { background: #2C2C2E; border-color: var(--bdr); }
html.dark .back-btn svg polyline   { stroke: var(--txt); }

/* ── Date input (native) ── */
html.dark input[type=date]         { background: #2C2C2E; color: var(--txt); color-scheme: dark; }

/* ── Supplies & panels misc ── */
html.dark #supplyHint              { background: #2C2C2E !important; color: var(--txt2) !important; }
html.dark #monDatePicker           { background: #2C2C2E !important; color: var(--txt) !important; }

/* ── Cancelled / withdrawn circle ── */
html.dark #monSentWithdrawn .dark-circle { background: #2C2C2E !important; border-color: #3A3A3C !important; }

/* ── Panel body backgrounds with hardcoded fills ── */
html.dark [style*="background:#F9F9F9"],
html.dark [style*="background: #F9F9F9"],
html.dark [style*="background:#f9f9f9"]  { background: #1C1C1E !important; }

/* ── Misc light grays ── */
html.dark [style*="background:#F2F2F7"],
html.dark [style*="background: #F2F2F7"],
html.dark [style*="background:#f2f2f7"]  { background: #2C2C2E !important; }

/* ── nm-chip (reason chips in move-out, etc.) ── */
html.dark .nm-chip                 { background: #2C2C2E; border-color: var(--bdr); color: var(--txt2); }

/* ── Duty swap cards ── */
.swap-card     { cursor: pointer; margin-bottom: 8px; transition: background .15s, border-color .15s; }
.swap-card-sel { background: var(--cbL) !important; border-color: var(--cb) !important; }
html.dark .nm-chip.sel             { background: var(--cbL); color: var(--cbT); border-color: var(--cb); }