@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&display=swap');

body {
    font-family: 'Outfit', sans-serif;
    background-color: var(--bg-main);
    color: var(--slate-dark);
    overscroll-behavior: none;
    user-select: none;
    /* Page padding lives here instead of a p-4 utility so it can absorb
       the notch and home-indicator insets when installed to the iOS
       home screen (the status bar is black-translucent, so content
       would otherwise sit under the Dynamic Island). */
    padding:
        calc(1rem + env(safe-area-inset-top))
        calc(1rem + env(safe-area-inset-right))
        calc(1rem + env(safe-area-inset-bottom))
        calc(1rem + env(safe-area-inset-left));
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

/* Notes are the one thing worth copying out of the app. */
.bulletin-note { user-select: text; }

.tablet-card {
    background: white;
    border: 1px solid #E2E8F0;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.04);
    border-radius: 1.5rem;
}

.active-row {
    background: #FEF3C7 !important;
    border-left: 6px solid #F59E0B !important;
    transform: scale(1.01);
}

.event-node {
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

.care-btn {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    font-weight: 800;
    font-size: 0.875rem;
    transition: all 0.1s;
}

.care-btn:active { transform: scale(0.95); }

.ml-btn {
    padding: 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 800;
    border: 2px solid #E2E8F0;
}

.ml-btn.active {
    background: #6366F1;
    color: white;
    border-color: #6366F1;
}

.chart-container {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    height: 200px;
    max-height: 250px;
}

.bulletin-note {
    background: #FFFBEB;
    border-left: 4px solid #F59E0B;
}

::-webkit-scrollbar { width: 0px; }

/* ---------------------------------------------------------------
   MOBILE / iOS
   The desktop layout is a fixed-height three-column grid whose panes
   scroll independently. That model does not survive a phone: nested
   scrollers are miserable under a thumb, and the overflow-hidden that
   makes them work was silently clipping the right edge of every card.
   Below lg the whole thing collapses to one ordinary scrolling column.
--------------------------------------------------------------- */
@media (max-width: 1023px) {
    /* The <section>s exist only to build desktop columns. Dissolving
       them promotes each card to a direct grid item of <main>, which
       is what lets the order-* classes interleave cards across what
       were three separate columns — logging controls first, reference
       material last.
       The .col-section class is here for specificity: a bare element
       selector loses to Tailwind's own .flex on the same elements. */
    main > section.col-section { display: contents; }

    /* Below 16px iOS zooms the viewport when a field takes focus and
       never zooms back out. */
    input, select, textarea { font-size: 16px !important; }

    .chart-container { height: 150px; }

    /* Clear the fixed bottom bar: its own height plus the home
       indicator inset, so the last card is never trapped underneath. */
    body { padding-bottom: calc(4.25rem + env(safe-area-inset-bottom)); }
    #bottom-bar { padding-bottom: env(safe-area-inset-bottom); }

    /* Float these above the bar rather than behind it. */
    #undo-toast { bottom: calc(5rem + env(safe-area-inset-bottom)); }
    #offline-badge { bottom: calc(5rem + env(safe-area-inset-bottom)); }

    /* Apple's minimum comfortable touch target is 44pt. */
    .ml-btn { min-width: 56px; min-height: 44px; font-size: 13px; }
    .icon-btn {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* ---------------------------------------------------------------
   NIGHT MODE
   The Tailwind CDN injects its utilities into <head> at runtime, so
   they land after this block and win on equal specificity. Every rule
   here is scoped under body.night, which outranks a bare utility, and
   the handful that clash with a utility of the same weight are the
   only ones carrying !important.
   Overriding the palette centrally beats hanging dark: variants off a
   few hundred class attributes.
--------------------------------------------------------------- */
body.night {
    --bg-main: #0B1220;
    background-color: #0B1220;
    color: #E2E8F0;
}

body.night .tablet-card {
    background: #131C2E;
    border-color: #1F2C44;
    box-shadow: none;
}

body.night .bg-white { background-color: #131C2E !important; }
body.night .bg-slate-100 { background-color: #1A2537 !important; }
body.night #schedule-card { background-color: #0F1826; }
body.night #bulletin-card { background-color: #17140B; }
body.night .bg-slate-50 { background-color: #0F1826 !important; }

body.night .text-slate-800,
body.night .text-slate-700 { color: #E2E8F0 !important; }
body.night .text-slate-500,
body.night .text-slate-400,
body.night .text-slate-300 { color: #8296B2 !important; }

body.night .border-slate-100,
body.night .border-slate-200 { border-color: #1F2C44 !important; }

/* Status tiles: the JS swaps these utility classes to signal urgency,
   so each needs a dimmed counterpart rather than a blanket override. */
body.night .bg-indigo-50 { background-color: #1B2340 !important; }
body.night .bg-emerald-50 { background-color: #102420 !important; }
body.night .bg-amber-50 { background-color: #2A2213 !important; }
body.night .bg-red-50 { background-color: #2C1618 !important; }
body.night .bg-cyan-50 { background-color: #10262C !important; }
body.night .bg-sky-100 { background-color: #12283A !important; }
body.night .bg-rose-50 { background-color: #2C1620 !important; }
body.night .bg-rose-100 { background-color: #3A1C28 !important; }
body.night .border-rose-200 { border-color: #4A2230 !important; }
body.night .text-rose-600,
body.night .text-rose-700 { color: #FDA4AF !important; }
body.night .border-indigo-100 { border-color: #2C3866 !important; }
body.night .border-emerald-100 { border-color: #1B4034 !important; }
body.night .border-amber-200 { border-color: #4A3A12 !important; }
body.night .border-red-200 { border-color: #4A2226 !important; }
body.night .text-indigo-700 { color: #A5B4FC !important; }
body.night .text-emerald-600,
body.night .text-emerald-700,
body.night .text-emerald-800 { color: #6EE7B7 !important; }
body.night .text-amber-700 { color: #FCD34D !important; }
body.night .text-red-700 { color: #FCA5A5 !important; }
body.night .text-cyan-700 { color: #67E8F9 !important; }
body.night .text-sky-700 { color: #7DD3FC !important; }

body.night .bulletin-note {
    background: #241D0E;
    border-left-color: #A16207;
}

body.night .active-row {
    background: #33280C !important;
    border-left-color: #B45309 !important;
}

body.night input,
body.night select {
    background-color: #0F1826 !important;
    color: #E2E8F0 !important;
    border-color: #1F2C44 !important;
}
body.night input::placeholder { color: #5A6B85 !important; }

/* The native picker glyphs render near-black on the dark field. */
body.night input[type="time"]::-webkit-calendar-picker-indicator,
body.night input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1) opacity(0.6);
}

body.night .ml-btn { border-color: #1F2C44; color: #8296B2; }
body.night .ml-btn.active { background: #4F46E5; border-color: #4F46E5; color: #fff; }

/* bg-slate-900 is nearly the night page colour, so these two cards
   would dissolve into the background. Lifted to the card surface
   instead of remapping the utility, which is also used for the
   selected MODE button below. */
body.night #clock-card,
body.night #sleep-card { background-color: #131C2E !important; }

/* Selected day-mode button: dark-on-dark reads as disabled, so the
   selection is carried by colour rather than by darkness. */
body.night #btn-weekday.bg-slate-900,
body.night #btn-weekend.bg-slate-900 { background-color: #4F46E5 !important; }
body.night #btn-weekday-m.bg-slate-900,
body.night #btn-weekend-m.bg-slate-900 { background-color: #4F46E5 !important; }

body.night #bottom-bar {
    background-color: #131C2E;
    border-top-color: #1F2C44;
}
body.night #bottom-bar button { color: #8296B2; }
body.night #more-sheet-panel { background-color: #131C2E; }