/* ============================================================
   TRAILENDAR — stylesheet
   Warm, earthy palette inspired by the Trailhands logo.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
    --cream-50:  #fbf7ec;
    --cream-100: #f5ecd5;
    --cream-200: #ead5a0;
    --cream-300: #ebd093;
    --tan-300:   #c2a870;
    --tan-400:   #ad9363;
    --tan-500:   #896e4f;
    --bronze-600:#825428;
    --bronze-700:#604a2e;
    --bronze-800:#4c3622;
    --bronze-900:#492f17;
    --bronze-950:#38270f;
    --moss-600:  #596430;
    --moss-700:  #484f21;
    --moss-800:  #394118;
    --gold:      #f2c03d;

    --bg: var(--cream-50);
    --surface: #ffffff;
    --surface-2: #fbf3df;
    --text: var(--bronze-950);
    --text-muted: var(--tan-500);
    --border: rgba(73, 47, 23, 0.10);
    --border-strong: rgba(73, 47, 23, 0.22);
    --shadow-sm: 0 1px 2px rgba(73, 47, 23, 0.06);
    --shadow-md: 0 1px 2px rgba(73, 47, 23, 0.06), 0 6px 18px rgba(73, 47, 23, 0.08);
    --shadow-lg: 0 4px 12px rgba(73, 47, 23, 0.12), 0 24px 48px rgba(73, 47, 23, 0.18);

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;

    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body {
    margin: 0;
    height: 100%;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

/* ---------- App layout ---------- */
.app {
    display: grid;
    grid-template-columns: 1fr 290px;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "topbar topbar"
        "main   sidebar";
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}
.topbar  { grid-area: topbar; }
.main    { grid-area: main; }
.sidebar { grid-area: sidebar; }

/* ---------- Topbar ---------- */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 10px 20px;
    background: linear-gradient(180deg, var(--bronze-900) 0%, var(--bronze-950) 100%);
    color: var(--cream-100);
    border-bottom: 1px solid var(--bronze-950);
    box-shadow: 0 2px 0 var(--bronze-700) inset, 0 6px 14px rgba(0,0,0,0.15);
    position: relative;
    z-index: 5;
}
.brand {
    display: flex;
    align-items: center;
    gap: 12px;
}
.brand-logo {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    object-fit: cover;
    background: var(--cream-200);
    box-shadow: 0 2px 8px rgba(0,0,0,0.30);
}
.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
}
.brand-name {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 0.10em;
    color: var(--cream-100);
    text-shadow: 0 1px 0 rgba(0,0,0,0.35);
}
.brand-tag {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: var(--gold);
    margin-top: 5px;
}

.controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* segmented control */
.segmented {
    display: inline-flex;
    background: rgba(0,0,0,0.20);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 9px;
    padding: 3px;
    gap: 2px;
}
.seg {
    background: transparent;
    color: var(--cream-200);
    border: 0;
    padding: 6px 12px;
    border-radius: 7px;
    font-weight: 600;
    font-size: 13px;
    transition: background 0.15s, color 0.15s;
}
.seg:hover { background: rgba(255,255,255,0.06); color: var(--cream-100); }
.seg[aria-pressed="true"] {
    background: var(--gold);
    color: var(--bronze-950);
    box-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

/* buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    padding: 8px 14px;
    font-weight: 600;
    font-size: 13px;
    transition: background 0.15s, transform 0.05s, box-shadow 0.15s;
    white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
    background: var(--gold);
    color: var(--bronze-950);
    box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: #ffce4f; }
.btn-ghost {
    background: rgba(255,255,255,0.06);
    color: var(--cream-100);
    border-color: rgba(255,255,255,0.10);
}
.btn-ghost:hover { background: rgba(255,255,255,0.12); }
.btn-danger {
    background: transparent;
    color: #b3331f;
    border-color: rgba(179, 51, 31, 0.30);
}
.btn-danger:hover { background: rgba(179, 51, 31, 0.08); }
.btn.full { width: 100%; }

.icon-btn {
    background: transparent;
    border: 0;
    border-radius: 8px;
    padding: 6px;
    color: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.icon-btn:hover { background: rgba(255,255,255,0.08); }
.icon-btn.small { padding: 3px; }

/* ---------- Main / calendar grid ---------- */
.main {
    padding: 14px 18px;
    overflow: hidden;
    min-height: 0;
}
.calendar {
    display: grid;
    gap: 12px;
    height: 100%;
    min-height: 0;
}
.calendar[data-view="full"] {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
}
.calendar[data-view="h1"], .calendar[data-view="h2"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
}

/* ---------- Month card ---------- */
.month {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 8px 10px 10px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}
.month-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 2px 2px 6px;
    border-bottom: 1px dashed var(--border);
    margin-bottom: 6px;
}
.month-name {
    font-weight: 700;
    color: var(--bronze-900);
    letter-spacing: 0.02em;
}
.calendar[data-view="full"] .month-name { font-size: 13px; }
.calendar[data-view="h1"] .month-name,
.calendar[data-view="h2"] .month-name { font-size: 16px; }
.month-year {
    font-size: 11px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.month-grid {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    font-variant-numeric: tabular-nums;
}

/* Header row: KW | Mo Tu We Th Fr Sa Su */
.header-row {
    display: grid;
    grid-template-columns: 22px repeat(7, 1fr);
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
    flex: 0 0 auto;
}
.calendar[data-view="h1"] .header-row,
.calendar[data-view="h2"] .header-row { grid-template-columns: 28px repeat(7, 1fr); }

.dow, .kw-head {
    font-size: 10px;
    color: var(--text-muted);
    text-align: center;
    padding: 2px 0 4px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.dow.weekend-head { color: var(--bronze-700); }
.kw-head { color: var(--tan-400); }

/* Each week is a 2-col grid (KW + days area) */
.week-row {
    display: grid;
    grid-template-columns: 22px 1fr;
    flex: 1 1 auto;
    min-height: 0;
}
.calendar[data-view="h1"] .week-row,
.calendar[data-view="h2"] .week-row { grid-template-columns: 28px 1fr; }

.week-row .kw {
    font-size: 10px;
    color: var(--tan-400);
    text-align: center;
    font-weight: 600;
    letter-spacing: 0.02em;
    align-self: start;
    padding-top: 4px;
    border-right: 1px dashed var(--border);
}

/* The days-area stacks the day-number "header bar" on top of a lanes-wrapper
   that contains the swimlanes and any milestone fills. Keeping the milestone
   fill inside lanes-wrapper means it can never bleed up into the day-number row. */
.days-area {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Lanes wrapper — scope for milestone fills + labels. isolation: isolate keeps
   the z-index layering self-contained:
     z-index 0 → milestone fill (background)
     z-index 1 → lane bars (foreground)
     z-index 4 → milestone labels (above everything within the column) */
.lanes-wrapper {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}
.lane-row { position: relative; z-index: 1; }

/* Day-number row: 7 columns of small cells */
.days-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    flex: 0 0 auto;
}

.day {
    position: relative;
    padding: 3px 4px 2px;
    transition: background 0.12s;
    cursor: pointer;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    min-height: 20px;
}
.calendar[data-view="h1"] .day,
.calendar[data-view="h2"] .day { min-height: 24px; }
.day:hover { background: var(--cream-50); }

/* Milestone flag icon — left-aligned in the day-number "header bar",
   vertically centred, sized to roughly match the row height. */
.day .milestone-icon {
    margin-right: auto; /* push icon to the left, day number stays at right */
    color: var(--milestone-color, var(--gold));
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    line-height: 0;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.10));
}
.day .milestone-icon svg { width: 14px; height: 14px; }
.calendar[data-view="h1"] .day .milestone-icon svg,
.calendar[data-view="h2"] .day .milestone-icon svg { width: 18px; height: 18px; }

.day .day-num {
    font-size: 11px;
    font-weight: 600;
    color: var(--bronze-900);
    line-height: 1;
    /* Subtle white halo so the digit stays legible when it sits over a dark
       milestone fill (e.g. espresso, plum, deep forest). On normal backgrounds
       the halo is invisible. */
    text-shadow: 0 0 2px rgba(255, 255, 255, 0.55);
}
.calendar[data-view="h1"] .day .day-num,
.calendar[data-view="h2"] .day .day-num { font-size: 12px; }

.day.weekend { background: rgba(173, 147, 99, 0.07); }
.day.weekend .day-num { color: var(--tan-500); }

.day.holiday { background: rgba(242, 192, 61, 0.18); }
.day.holiday .day-num { color: var(--bronze-800); }
.day.holiday::before {
    content: "";
    position: absolute;
    top: 4px; left: 4px;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 0 1px rgba(73,47,23,0.20);
}

.day.today {
    background: rgba(242, 192, 61, 0.18);
    box-shadow: inset 0 -2px 0 var(--gold);
}
.day.today .day-num { color: var(--bronze-950); font-weight: 800; }

/* Today column highlight: soft gold tint behind today's lane area.
   Matches the .day.today header-bar tint so the whole column reads as one card. */
.today-col {
    position: absolute;
    top: 0;
    bottom: 0;
    background: rgba(242, 192, 61, 0.18);
    border-radius: 8px;
    z-index: 0;
    pointer-events: none;
}

/* Milestone column: solid colour fill behind the lane area, with rounded corners.
   Appended after the today overlay so when both apply to the same day, the
   milestone colour wins (more specific event signal). */
.milestone-col {
    position: absolute;
    top: 0;
    bottom: 0;
    background: var(--milestone-color, var(--gold));
    border-radius: 8px;
    z-index: 0;
    pointer-events: none;
}

/* Free-floating milestone title. Centered on its column but allowed to overflow
   horizontally — that way single-day milestones don't get truncated to one cell. */
.milestone-label {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--milestone-text, #fbf3df);
    text-shadow: 0 1px 1px rgba(0,0,0,0.18);
    padding: 1px 5px;
    z-index: 4;
    pointer-events: auto;
    cursor: pointer;
    letter-spacing: 0.01em;
}
.calendar[data-view="h1"] .milestone-label,
.calendar[data-view="h2"] .milestone-label { font-size: 12px; }
.milestone-label:hover { filter: brightness(1.05); }

.day.outside { visibility: hidden; pointer-events: none; }

/* When a day is both a holiday AND a milestone, the milestone flag wins the
   top-left slot — hide the small gold holiday dot to avoid overlap. */
.day.holiday.has-milestone::before { display: none; }

/* Lane rows — one per user. Bars span days using grid-column. */
.lane-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    min-height: 5px;
    margin-top: 2px;
}
.lane-row + .lane-row { margin-top: 2px; }
.lane-row:last-child { margin-bottom: 4px; }

.lane-bar {
    background: var(--gold);
    color: rgba(0,0,0,0.78);
    height: 17px;
    display: flex;
    align-items: center;
    padding: 0 5px;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
    transition: filter 0.12s;
}
.calendar[data-view="h1"] .lane-bar,
.calendar[data-view="h2"] .lane-bar { height: 20px; font-size: 11.5px; padding: 0 7px; }
.lane-bar:hover { filter: brightness(1.05) saturate(1.1); }

.lane-bar.start  { border-top-left-radius: 5px; border-bottom-left-radius: 5px; margin-left: 1px; }
.lane-bar.end    { border-top-right-radius: 5px; border-bottom-right-radius: 5px; margin-right: 1px; }
.lane-bar.single { border-radius: 5px; margin: 0 1px; }

.lane-bar .bar-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    color: rgba(0,0,0,0.7);
}
.lane-bar .bar-icon svg { display: block; }
.calendar[data-view="full"] .lane-bar .bar-icon svg { width: 10px; height: 10px; }
.calendar[data-view="h1"] .lane-bar .bar-icon svg,
.calendar[data-view="h2"] .lane-bar .bar-icon svg { width: 12px; height: 12px; }

.lane-bar .bar-name {
    margin-left: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* Continuation styling for bars that wrap from a previous week or to a following week */
.lane-bar.cont-left  { background-image: linear-gradient(90deg, rgba(255,255,255,0.30) 0, rgba(255,255,255,0) 14px); }
.lane-bar.cont-right { background-image: linear-gradient(270deg, rgba(255,255,255,0.30) 0, rgba(255,255,255,0) 14px); }
.lane-bar.cont-left.cont-right {
    background-image:
        linear-gradient(90deg,  rgba(255,255,255,0.30) 0, rgba(255,255,255,0) 14px),
        linear-gradient(270deg, rgba(255,255,255,0.30) 0, rgba(255,255,255,0) 14px);
}

/* tooltip on lane-bar */
.lane-bar[data-tip] { position: relative; }
.lane-bar[data-tip]:hover::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 4px);
    left: 0;
    background: var(--bronze-950);
    color: var(--cream-100);
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    white-space: nowrap;
    z-index: 20;
    pointer-events: none;
    box-shadow: var(--shadow-md);
    font-weight: 600;
}

/* Holiday badge in the day popover */
.holiday-badge {
    background: rgba(242, 192, 61, 0.20);
    border: 1px solid rgba(242, 192, 61, 0.55);
    color: var(--bronze-900);
    font-weight: 700;
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 8px;
    text-align: center;
    letter-spacing: 0.02em;
}

/* ---------- Sidebar ---------- */
.sidebar {
    background: var(--surface);
    border-left: 1px solid var(--border);
    overflow-y: auto;
    padding: 16px 16px 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.sidebar-section h3 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--bronze-800);
    margin: 0 0 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.muted { color: var(--text-muted); font-weight: 500; }
.muted.small { font-size: 11px; line-height: 1.5; margin: 0; }

.team-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.team-list li {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px;
    padding: 6px 8px;
    background: var(--surface-2);
    border-radius: 8px;
}
.team-list .lane-dot {
    width: 8px; height: 8px; border-radius: 2px;
    background: var(--bronze-800);
}
.team-list li[data-lane="0"] .lane-dot { background: var(--bronze-700); }
.team-list li[data-lane="1"] .lane-dot { background: var(--moss-700); }
.team-list li[data-lane="2"] .lane-dot { background: var(--bronze-600); }
.team-list .lane-label { font-size: 10px; color: var(--text-muted); margin-left: auto; }

.entry-list {
    display: flex; flex-direction: column; gap: 6px;
    max-height: none;
}
.entry-row {
    display: grid;
    grid-template-columns: 22px 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}
.entry-row:hover { background: var(--surface-2); border-color: var(--border-strong); }
.entry-row .swatch {
    width: 18px; height: 18px;
    border-radius: 5px;
    display: flex; align-items: center; justify-content: center;
    color: rgba(0,0,0,0.65);
}
.entry-row .swatch svg { width: 12px; height: 12px; }
.entry-row .info { min-width: 0; }
.entry-row .info .name {
    font-weight: 600; font-size: 13px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    color: var(--bronze-900);
}
.entry-row .info .meta { font-size: 11px; color: var(--text-muted); }
.entry-row .person {
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--bronze-700);
    background: var(--cream-100);
    padding: 3px 6px;
    border-radius: 5px;
}

.icon-legend { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.icon-legend li { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-muted); }
.icon-legend .ic { width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; color: var(--bronze-700); }
.icon-legend li b { color: var(--bronze-800); font-weight: 600; }

.empty-state {
    padding: 14px;
    border: 1px dashed var(--border-strong);
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 12px;
    text-align: center;
}

/* ---------- Modal ---------- */
.modal {
    position: fixed; inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.modal-backdrop {
    position: absolute; inset: 0;
    background: rgba(56, 39, 15, 0.55);
    backdrop-filter: blur(2px);
}
.modal-card {
    position: relative;
    background: var(--surface);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    width: 460px;
    max-width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: modalIn 0.18s ease-out;
}
@keyframes modalIn {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}
.modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
}
.modal-header h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--bronze-900);
}
.modal-header .icon-btn { color: var(--bronze-800); }
.modal-header .icon-btn:hover { background: rgba(73,47,23,0.08); }

.form { padding: 18px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field .label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: var(--bronze-700); }
.field input, .field select, .fieldset input {
    border: 1px solid var(--border-strong);
    background: var(--surface);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 14px;
    transition: border-color 0.12s, box-shadow 0.12s;
}
.field input:focus, .field select:focus, .fieldset input:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(242,192,61,0.25);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fieldset { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; }
.fieldset legend { padding: 0 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--bronze-700); }

.icon-picker { display: flex; gap: 6px; flex-wrap: wrap; }
.icon-option {
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    padding: 8px;
    background: var(--surface);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 70px;
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s, transform 0.05s;
    color: var(--bronze-800);
}
.icon-option:hover { background: var(--surface-2); }
.icon-option svg { width: 22px; height: 22px; }
.icon-option .name { font-size: 11px; font-weight: 600; color: var(--bronze-700); }
.icon-option.active {
    border-color: var(--gold);
    background: rgba(242,192,61,0.20);
    box-shadow: 0 0 0 2px rgba(242,192,61,0.30);
}

.color-picker { display: flex; gap: 6px; flex-wrap: wrap; }
.color-swatch {
    width: 30px; height: 30px;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,0.10);
    cursor: pointer;
    transition: transform 0.08s, box-shadow 0.12s;
    position: relative;
}
.color-swatch:hover { transform: scale(1.05); }
.color-swatch.active::after {
    content: "✓";
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.95);
    font-weight: 800;
    font-size: 16px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.color-swatch.active {
    box-shadow: 0 0 0 3px rgba(242,192,61,0.45);
}

.modal-footer {
    display: flex; gap: 8px;
    padding: 12px 18px 16px;
    border-top: 1px solid var(--border);
    background: var(--surface-2);
    align-items: center;
}
.grow { flex: 1; }

/* ---------- Day popover ---------- */
.day-popover {
    position: absolute;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    box-shadow: var(--shadow-md);
    padding: 10px 12px;
    width: 240px;
    z-index: 60;
    display: flex; flex-direction: column; gap: 8px;
}
.day-popover-header {
    display: flex; justify-content: space-between; align-items: center;
    color: var(--bronze-900);
    font-size: 13px;
}
.day-popover-list { display: flex; flex-direction: column; gap: 4px; }
.day-popover-list .entry-row { padding: 5px 8px; }

/* ---------- Status bar ---------- */
.status {
    position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%);
    background: var(--bronze-950);
    color: var(--cream-100);
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 12px;
    box-shadow: var(--shadow-md);
    z-index: 200;
    pointer-events: none;
    transition: opacity 0.2s;
}

/* ---------- Sidebar adjustments at smaller widths ---------- */
@media (max-width: 1280px) {
    .calendar[data-view="full"] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-template-rows: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 980px) {
    .app {
        grid-template-columns: 1fr;
        grid-template-areas:
            "topbar"
            "main"
            "sidebar";
        height: auto;
        min-height: 100vh;
        overflow: auto;
    }
    .sidebar { border-left: 0; border-top: 1px solid var(--border); }
    .calendar[data-view="full"] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(6, minmax(220px, 1fr));
    }
    .calendar[data-view="h1"], .calendar[data-view="h2"] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(3, minmax(220px, 1fr));
    }
    .main { padding: 12px; height: auto; }
}

/* scrollbar polish */
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--cream-200); border-radius: 4px; }
.sidebar::-webkit-scrollbar-thumb:hover { background: var(--tan-300); }

/* prevent select/input style ugliness on Safari */
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--bronze-800) 50%), linear-gradient(135deg, var(--bronze-800) 50%, transparent 50%); background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 28px; }
input[type="date"] { font-family: var(--font-sans); }