/* ============================================================
   Office Status Board — Front-end Styles v1.7.5
   ============================================================ */

:root {
    --os-font:           'Segoe UI', system-ui, -apple-system, sans-serif;
    --os-radius:         8px;
    --os-radius-sm:      4px;
    --os-shadow:         0 2px 12px rgba(0,0,0,.10);
    --os-shadow-lg:      0 8px 40px rgba(0,0,0,.18);
    --os-border:         #e2e8f0;
    --os-bg:             #ffffff;
    --os-bg-alt:         #f8fafc;
    --os-text:           #1e293b;
    --os-text-muted:     #64748b;
    --os-today-bg:       #eff6ff;
    --os-today-border:   #3b82f6;
    --os-hover:          #f1f5f9;
    --os-week-end-color: #94a3b8;
    --os-in:             #16a34a;  --os-in-bg:      #dcfce7;
    --os-out:            #dc2626;  --os-out-bg:     #fee2e2;
    --os-remote:         #7c3aed;  --os-remote-bg:  #ede9fe;
    --os-al:             #0891b2;  --os-al-bg:      #cffafe;
    --os-info-bg:        #fefce8;
    --os-info-border:    #fbbf24;
    --os-info-text:      #78350f;
}

/* ============================================================
   Board wrapper
   ============================================================ */
.os-board-wrap {
    font-family: var(--os-font);
    color: var(--os-text);
    line-height: 1.5;
    max-width: 100%;
    overflow: hidden;
}
/* WordPress wraps shortcodes in <p> tags which adds unwanted margin */
p:has(> .os-board-wrap),
p .os-board-wrap { margin-bottom: 0; }
.os-board-title { font-size: 1.4rem; font-weight: 700; margin: 0 0 .85rem; }

/* Login bar — standalone, right-aligned */

/* Login bar */
.os-login-bar {
    display: flex; align-items: center; gap: .5rem;
    font-size: .8rem; margin-bottom: .6rem; justify-content: flex-end;
}
.os-login-bar__name {
    color: var(--os-text-muted); font-size: .78rem;
}
/* Pill buttons — match "This Week" style */
.os-btn--pill {
    display: inline-flex; align-items: center;
    font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    padding: .2rem .65rem; border: 1px solid #bfdbfe;
    border-radius: 999px; background: var(--os-bg); color: var(--os-text-muted);
    cursor: pointer; transition: border-color .15s, background .15s, color .15s;
    white-space: nowrap; font-family: var(--os-font);
}
.os-btn--pill:hover { border-color: var(--os-today-border); color: var(--os-today-border); background: var(--os-today-bg); }
.os-btn--pill-active {
    background: var(--os-today-bg); color: var(--os-today-border); border-color: #bfdbfe;
}
.os-btn--pill-active:hover { background: #dbeafe; }

/* Own row — pointer cursor */
.os-cell--own { cursor: pointer !important; }
.os-row--even .os-cell--own.os-cell--empty:hover,
.os-row--odd  .os-cell--own.os-cell--empty:hover { background: var(--os-today-bg); }

/* Locked cell (logged in, not their row) — no hover, default cursor */
.os-cell--locked { cursor: default !important; }
.os-cell--locked:hover { background: inherit !important; }

/* Narrower login modal box */
.os-modal-box--narrow { max-width: 380px; }
.os-login-select, .os-login-pin-input {
    width: 100%; box-sizing: border-box;
    border: 1px solid var(--os-border); border-radius: var(--os-radius-sm);
    padding: .45rem .6rem; font-size: .88rem; font-family: var(--os-font);
    background: var(--os-bg); color: var(--os-text); min-height: 40px;
    transition: border-color .15s;
}
.os-login-select:focus, .os-login-pin-input:focus {
    outline: none; border-color: var(--os-today-border); box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}
.os-login-error {
    color: var(--os-out); font-size: .82rem; font-weight: 600;
    background: var(--os-out-bg); border: 1px solid var(--os-out);
    border-radius: var(--os-radius-sm); padding: .4rem .65rem; margin: .25rem 0;
}

/* Legend removed — pills removed from UI */

/* ---- Badges ---- */
.os-badge {
    display: inline-block; font-size: .65rem; font-weight: 700;
    padding: 1px 6px; border-radius: 999px; line-height: 1.5; letter-spacing: .02em;
}
/* New status badges */
.os-badge--working_day     { background: var(--os-in-bg);     color: var(--os-in);     }
.os-badge--non_working_day { background: var(--os-out-bg);    color: var(--os-out);    }
.os-badge--annual_leave    { background: var(--os-al-bg);     color: var(--os-al);     }
/* Legacy badges (old entries) */
.os-badge--in           { background: var(--os-in-bg);     color: var(--os-in);     }
.os-badge--out          { background: var(--os-out-bg);    color: var(--os-out);    }
.os-badge--remote       { background: var(--os-remote-bg); color: var(--os-remote); }
.os-badge--partial      { background: #fef3c7;             color: #d97706;          }

/* Location / office mini-badges */
.os-office-badge {
    display: inline-block; font-size: .58rem; font-weight: 700;
    padding: 1px 5px; border-radius: 999px; line-height: 1.4; white-space: nowrap;
}
/* Location badge colours applied via inline style by JS (dynamic from DB) */

/* ---- Loading ---- */
.os-loading {
    padding: 2.5rem; text-align: center; color: var(--os-text-muted);
    display: flex; align-items: center; justify-content: center; gap: .75rem;
}
.os-spinner {
    width: 20px; height: 20px; border: 3px solid var(--os-border);
    border-top-color: var(--os-today-border); border-radius: 50%;
    animation: os-spin .7s linear infinite; flex-shrink: 0;
}
@keyframes os-spin { to { transform: rotate(360deg); } }
.os-error, .os-empty {
    padding: 1.5rem; background: var(--os-bg-alt);
    border: 1px solid var(--os-border); border-radius: var(--os-radius);
    color: var(--os-text-muted); font-size: .9rem;
}

/* ============================================================
   Navigation bar
   ============================================================ */
.os-nav-bar {
    display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem;
}
.os-nav-btn {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 50%;
    border: 2px solid var(--os-border); background: var(--os-bg); color: var(--os-text);
    cursor: pointer; transition: border-color .15s, background .15s, color .15s; flex-shrink: 0;
}
.os-nav-btn:hover:not(:disabled) {
    border-color: var(--os-today-border); color: var(--os-today-border); background: var(--os-today-bg);
}
.os-nav-btn:disabled { opacity: .35; cursor: not-allowed; }
.os-nav-range {
    flex: 1; text-align: center; font-size: .88rem; font-weight: 600; color: var(--os-text);
    display: flex; align-items: center; justify-content: center; gap: 0; flex-wrap: wrap;
}

/* Inline week label inside the nav range span */
.os-nav-week-label {
    display: inline-flex;
    align-items: center;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--os-today-border);
    background: var(--os-today-bg);
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    padding: .2rem .65rem;
    margin-left: .55rem;
    /* Align with text baseline — translateY nudges it onto the same line */
    vertical-align: baseline;
    position: relative;
    top: -0.05em;
}

/* ============================================================
   Table container — clips the slide animation
   ============================================================ */
/* Table wrap — single table, sticky name column, horizontal scroll on mobile */
.os-table-wrap {
    border: 1px solid var(--os-border); border-radius: var(--os-radius);
    box-shadow: var(--os-shadow);
    overflow: hidden;
    position: relative;
    line-height: 0; font-size: 0;
}
.os-table-wrap > * { font-size: initial; line-height: initial; }

/* Slide-in keyframe animations — triggered by class added during navigation */
@keyframes os-slide-in-right {
    from { transform: translateX(8%); opacity: 0; }
    to   { transform: translateX(0);  opacity: 1; }
}
@keyframes os-slide-in-left {
    from { transform: translateX(-8%); opacity: 0; }
    to   { transform: translateX(0);   opacity: 1; }
}
.os-table-slider.os-slide-from-right {
    animation: os-slide-in-right .3s cubic-bezier(.4,0,.2,1) both;
}
.os-table-slider.os-slide-from-left {
    animation: os-slide-in-left .3s cubic-bezier(.4,0,.2,1) both;
}

/* ============================================================
   Grid — fixed layout so all 5 date columns are identical width
   ============================================================ */
.os-grid {
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed;
    background: var(--os-bg);
}


/* ---- Column widths ----
   Name column: fixed 140px. Date columns: share remaining space equally.
   We set this via <col> elements written by JS. */
.os-col-name {
    width: 140px; min-width: 80px;
    text-align: left !important;
    padding-left: .6rem !important;
    border-right: 1px solid var(--os-border);
    background: var(--os-bg);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Sticky name column — stays put when table scrolls horizontally on mobile */
.os-sticky-col {
    position: sticky;
    left: 0;
    z-index: 3;
    /* Background must be set per-row so it's opaque */
}
/* Ensure sticky col inherits correct bg from its row */
.os-row--even .os-sticky-col,
.os-row--even .os-sticky-col.os-col-name { background: #F8F8F8; }
.os-row--odd .os-sticky-col,
.os-row--odd .os-sticky-col.os-col-name  { background: #ffffff; }
.os-row--info .os-sticky-col             { background: #FEFCE8; }
.os-row--member-header .os-sticky-col    { background: var(--os-bg-alt); }
.os-header-months .os-sticky-col         { background: #1e293b; }
.os-header-dates .os-sticky-col          { background: var(--os-bg-alt); }
/* Thin right shadow on sticky col to show it's above scrolling content */
.os-sticky-col::after {
    content: ''; position: absolute; top: 0; right: -4px; bottom: 0;
    width: 4px;
    background: linear-gradient(to right, rgba(0,0,0,.06), transparent);
    pointer-events: none;
}
/* Identical border on all header name cells */
.os-col-name--sub    { border-right: 1px solid var(--os-border); }
.os-col-name--header { border-right: 1px solid var(--os-border) !important; }
.os-col-name--info   { background: var(--os-info-bg) !important; }

/* ============================================================
   Month / week header row
   ============================================================ */
.os-header-months th {
    background: #1e293b; color: #fff; font-size: .75rem; font-weight: 700;
    padding: .45rem .35rem; text-align: center;
    /* Consistent inner border — same colour, 1px */
    border-right: 1px solid rgba(255,255,255,.15);
    white-space: nowrap;
}
/* Name cell in month row — same border as others */
.os-header-months th.os-col-name {
    border-right: 1px solid rgba(255,255,255,.15) !important;
    text-align: left; padding-left: .85rem !important;
}
/* Week label sub-line (This Week / Next Week) */
.os-week-label {
    display: block; font-size: .6rem; font-weight: 400;
    opacity: .75; letter-spacing: .03em; text-transform: uppercase; margin-top: 1px;
}
.os-month-header--empty { background: #1e293b; }

/* ============================================================
   Date row
   ============================================================ */
.os-header-dates th {
    background: var(--os-bg-alt); border-bottom: 2px solid var(--os-border);
    border-right: 1px solid var(--os-border);
    padding: .35rem .25rem; text-align: center; font-size: .67rem;
    color: var(--os-text-muted); white-space: nowrap;
}
.os-header-dates th.os-today { background: var(--os-today-bg); color: var(--os-today-border); font-weight: 700; }
/* Name sub-header */
.os-header-dates th.os-col-name--sub { border-right: 1px solid var(--os-border); }

.os-date-day { display: block; font-size: .6rem; }
.os-date-num { display: block; font-size: .85rem; font-weight: 700; line-height: 1.1; color: var(--os-text); }

/* Week-end divider — Friday right border only */
.os-week-end                { border-right: 3px solid var(--os-week-end-color) !important; }
.os-header-months th.os-week-end { border-right: 3px solid rgba(255,255,255,.3) !important; }

/* Last column — no extra right border so table edge is clean */
.os-grid td:last-child,
.os-grid th:last-child {
    border-right: none !important;
}

/* Past-day fading */
.os-cell--past       { opacity: .45; }
.os-cell--past:hover { opacity: .75; }
.os-col-date--past   { opacity: .45; }

/* ============================================================
   General Info row — 3-row height
   ============================================================ */
.os-row--info { background: #FEFCE8; border-bottom: 2px solid var(--os-info-border); }
.os-info-label {
    font-size: .82rem; font-weight: 700; color: var(--os-info-text);
    white-space: nowrap; display: block; text-align: center;
}
/* Centre the label cell vertically and horizontally */
.os-col-name--info {
    text-align: center !important;
    vertical-align: middle;
    padding-left: 0 !important;
}

.os-day-info-cell {
    text-align: left;
    /* Fixed height for exactly 3 lines: 3 × (0.65rem × 1.4 line-height) + padding
       At 16px base: 3 × 14.56px = 43.7px + 0.6rem (9.6px) padding = ~54px.
       Use 70px to be safe and ensure 3 lines always visible */
    height: 70px;
    padding: .3rem .35rem;
    cursor: pointer; vertical-align: top;
    transition: background .15s;
    border-right: 1px solid #fde68a;
    border-bottom: none;
    overflow: hidden;
}
.os-day-info-cell:hover,
.os-day-info-cell:focus-visible  { background: #fef08a; outline: none; }
.os-day-info-cell.os-today       { background: #fef9c3; border-left: 2px solid var(--os-today-border); }
.os-day-info-cell--has-note      { background: #FEFCE8; }
.os-day-info-text {
    font-size: .65rem; color: #000;
    font-style: normal; line-height: 1.4; white-space: normal; word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: calc(3 * 1.4 * 0.65rem);
}
.os-cell-empty-icon--info { color: #d97706; opacity: .45; font-size: .8rem; }

/* ---- Team Member divider row ---- */
.os-row--member-header { border-bottom: 1px solid var(--os-border); }

/* Empty left cell — same bg as row */
/* Team Member label in names panel — centred */
.os-col-name--member-label {
    font-size: .72rem; font-weight: 700; color: var(--os-text-muted);
    text-transform: uppercase; letter-spacing: .06em;
    text-align: center !important; padding: .35rem .3rem !important;
    background: var(--os-bg-alt); vertical-align: middle;
}
/* Empty spacer cells in dates panel member row */
.os-member-date-spacer { background: var(--os-bg-alt); padding: .35rem; }

/* ============================================================
   Person rows
   ============================================================ */
.os-row { border-bottom: 1px solid var(--os-border); }
.os-row:last-child { border-bottom: none; }
/* Ensure table fills its container with no gap at the bottom */
.os-grid { margin-bottom: 0; }
.os-grid tbody tr:last-child td,
.os-grid tbody tr:last-child th { border-bottom: none; }
.os-row:hover .os-cell:not([class*="os-cell--past"]) { background: var(--os-hover); }
.os-row .os-col-name {
    padding: .2rem .35rem .2rem .55rem;
    border-right: 1px solid var(--os-border);
}
/* Alternating person row backgrounds */
.os-row--even .os-col-name,
.os-cell--even { background-color: #F8F8F8; }
.os-row--odd  .os-col-name,
.os-cell--odd  { background-color: #ffffff; }
/* Status colours take priority over alternating bg */
.os-cell--even.os-cell--working_day,
.os-cell--odd.os-cell--working_day     { background: #f0fdf4; }
.os-cell--even.os-cell--non_working_day,
.os-cell--odd.os-cell--non_working_day { background: #fff5f5; }
.os-cell--even.os-cell--annual_leave,
.os-cell--odd.os-cell--annual_leave    { background: #ecfeff; }

/* Avatar */
.os-avatar {
    width: 24px; height: 24px; border-radius: 50%;
    vertical-align: middle; margin-right: .35rem; object-fit: cover; flex-shrink: 0;
}
.os-avatar-initials {
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg,#6366f1,#8b5cf6); color: #fff;
    font-size: .58rem; font-weight: 700;
}
.os-name-text        { vertical-align: middle; font-size: .78rem; }
.os-name-text strong { font-weight: 600; }
.os-name-text small  { color: var(--os-text-muted); font-size: .68rem; }

/* Status cells */
.os-cell {
    text-align: center; padding: .15rem .15rem; cursor: pointer;
    transition: background .15s; vertical-align: top; outline: none;
    word-break: break-word;
    border-right: 1px solid var(--os-border);
}
.os-cell:focus-visible { outline: 2px solid var(--os-today-border); outline-offset: -2px; }
.os-cell.os-today {
    background: var(--os-today-bg);
    border-left: 2px solid var(--os-today-border);
    /* today border-right handled by normal 1px border, overridden by week-end if Friday */
}
.os-cell.os-today.os-week-end { border-right: 3px solid var(--os-week-end-color) !important; }
/* New status cell backgrounds */
.os-cell--working_day     { background: #f0fdf4; }
.os-cell--non_working_day { background: #fff5f5; }
.os-cell--annual_leave    { background: #ecfeff; }
/* Legacy cell backgrounds */
.os-cell--in      { background: #f0fdf4; }
.os-cell--out     { background: #fff5f5; }
.os-cell--remote  { background: #faf5ff; }
.os-cell--partial { background: #fffbeb; }
.os-cell--empty   { /* no background tint on empty */ }

/* Cell content wrapper — flex column, tight gap */
.os-cell-content {
    display: inline-flex; flex-direction: column; align-items: center; gap: 1px;
}
.os-cell-empty-icon {
    color: var(--os-border); font-size: .95rem; transition: color .15s, transform .15s;
}
.os-cell:hover .os-cell-empty-icon { color: var(--os-today-border); transform: scale(1.25); }
.os-time { display: block; color: var(--os-text-muted); font-size: .56rem; line-height: 1.15; white-space: normal; }
.os-note { display: block; color: var(--os-text-muted); font-size: .56rem; font-style: italic; line-height: 1.15; }

/* ============================================================
   Modal — portal pattern (JS moves to <body>)
   ============================================================ */
.os-modal {
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100% !important; height: 100% !important;
    z-index: 2147483647 !important;
    display: flex; align-items: center; justify-content: center;
    padding: .75rem; box-sizing: border-box;
}
.os-modal[hidden] { display: none !important; }

.os-modal-backdrop {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,.5); backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px); z-index: -1;
}
.os-modal-box {
    position: relative; z-index: 1;
    background: var(--os-bg, #fff); border-radius: 14px;
    box-shadow: var(--os-shadow-lg);
    padding: 1.5rem 1.75rem; width: 100%; max-width: 600px;
    animation: os-modal-in .2s ease-out;
    max-height: calc(100vh - 1.5rem); overflow-y: auto; overscroll-behavior: contain;
    box-sizing: border-box;
}
@keyframes os-modal-in {
    from { opacity: 0; transform: scale(.96) translateY(6px); }
    to   { opacity: 1; transform: scale(1)   translateY(0);   }
}
.os-modal-close {
    position: absolute; top: .85rem; right: .85rem;
    background: none; border: none; font-size: 1.5rem; line-height: 1;
    cursor: pointer; color: var(--os-text-muted); padding: .2rem .4rem;
    border-radius: 4px; min-width: 36px; min-height: 36px;
    display: flex; align-items: center; justify-content: center;
}
.os-modal-close:hover { color: var(--os-text); background: var(--os-bg-alt); }
.os-modal-title    { margin: 0 0 .15rem; font-size: 1.1rem; font-weight: 700; padding-right: 2rem; }
.os-modal-subtitle { margin: 0 0 1rem; color: var(--os-text-muted); font-size: .85rem; }
.os-modal-divider  { border: none; border-top: 1px solid var(--os-border); margin: .85rem 0; }
body.os-modal-open { overflow: hidden; }

/* Field labels */
.os-field-label {
    display: block; font-size: .72rem; font-weight: 700; color: var(--os-text-muted);
    margin: 0 0 .4rem; text-transform: uppercase; letter-spacing: .04em;
}
.os-field-optional { font-weight: 400; text-transform: none; letter-spacing: 0; color: #94a3b8; }

/* ============================================================
   Status grid — 3 equal columns, one row
   ============================================================ */
.os-status-grid {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .45rem; margin-bottom: 0;
}
.os-status-btn--al { grid-column: auto; }

.os-status-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .2rem; padding: .6rem .35rem; border: 2px solid var(--os-border);
    border-radius: var(--os-radius); cursor: pointer; font-size: .75rem; font-weight: 600;
    text-align: center; transition: border-color .15s, background .15s;
    user-select: none; line-height: 1.2; outline: none; min-height: 56px;
}
.os-status-btn:focus-visible { box-shadow: 0 0 0 3px rgba(59,130,246,.3); }
.os-status-btn:hover:not(.is-selected) { border-color: #94a3b8; background: var(--os-bg-alt); }
.os-status-icon  { font-size: 1.25rem; }
.os-status-label { font-size: .75rem; font-weight: 600; }

.os-status-btn[data-status="working_day"].is-selected     { border-color: var(--os-in);  background: var(--os-in-bg);  color: var(--os-in);  }
.os-status-btn[data-status="non_working_day"].is-selected { border-color: var(--os-out); background: var(--os-out-bg); color: var(--os-out); }
.os-status-btn[data-status="annual_leave"].is-selected    { border-color: var(--os-al);  background: var(--os-al-bg);  color: var(--os-al);  }

/* ============================================================
   Time slots
   ============================================================ */
.os-slots-header {
    display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem;
}
.os-btn--add-slot {
    font-size: .75rem; font-weight: 600; font-family: var(--os-font);
    padding: .3rem .85rem; border: 1px solid var(--os-today-border);
    border-radius: 999px; background: var(--os-today-bg); color: var(--os-today-border);
    cursor: pointer; transition: background .15s; white-space: nowrap; min-height: 34px;
}
.os-btn--add-slot:hover    { background: #dbeafe; }
.os-btn--add-slot:disabled { opacity: .4; cursor: not-allowed; }

#os-slots-container { display: flex; flex-direction: column; gap: .4rem; }

.os-slot-row {
    display: flex; flex-direction: column; gap: .3rem;
    background: var(--os-bg-alt); border: 1px solid var(--os-border);
    border-radius: var(--os-radius-sm); padding: .4rem .5rem; transition: border-color .15s;
}
.os-slot-row--error     { border-color: var(--os-out) !important; background: #fff8f8; }
.os-slot-row--confirmed { border-color: var(--os-in)  !important; background: #f0fdf4; }
.os-slot-error {
    font-size: .68rem; color: var(--os-out); font-weight: 600; padding: .05rem 0 0;
}

/* Line 1: number + times */
.os-slot-line { display: flex; align-items: center; gap: .35rem; }
.os-slot-line--times { }
.os-slot-line--loc    { }
.os-slot-line--actions { justify-content: space-between; align-items: stretch; }

.os-slot-times { display: flex; align-items: center; gap: .25rem; flex: 1; min-width: 0; }
.os-slot-field { display: flex; flex-direction: column; gap: .08rem; flex: 1; min-width: 0; }
.os-slot-field label { font-size: .58rem; font-weight: 600; color: var(--os-text-muted); text-transform: uppercase; letter-spacing: .04em; }
.os-slot-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; background: var(--os-border); color: var(--os-text-muted);
    border-radius: 50%; font-size: .65rem; font-weight: 700; flex-shrink: 0;
}
.os-slot-dash { color: var(--os-text-muted); font-size: .85rem; flex-shrink: 0; padding-top: .9rem; }

/* Line 2: location — full width */
.os-slot-line--loc .os-loc-select { flex: 1; width: 100%; }

/* Line 3: note input + action buttons */
.os-slot-note-input {
    flex: 1; border: 1px solid var(--os-border); border-radius: var(--os-radius-sm);
    padding: .28rem .45rem; font-size: .78rem; font-family: var(--os-font);
    background: var(--os-bg); color: var(--os-text);
    height: 30px; box-sizing: border-box;
    transition: border-color .15s;
}
.os-slot-note-input:focus { outline: none; border-color: var(--os-today-border); box-shadow: 0 0 0 2px rgba(59,130,246,.15); }
.os-slot-note-input::placeholder { color: #94a3b8; }

/* Hour + minute split selects */
.os-time-pair {
    display: flex; align-items: center; gap: 2px; width: 100%;
}
.os-time-h,
.os-time-m {
    border: 1px solid var(--os-border); border-radius: var(--os-radius-sm);
    padding: .3rem .2rem; font-size: .78rem; font-family: var(--os-font);
    background: var(--os-bg); color: var(--os-text);
    appearance: none; -webkit-appearance: none;
    text-align: center;
    min-height: 34px; box-sizing: border-box; transition: border-color .15s;
    /* No arrow — small enough that it's obvious */
    cursor: pointer;
}
.os-time-h { flex: 3; }   /* wider — hours need more room */
.os-time-m { flex: 2; }
.os-time-h:focus,
.os-time-m:focus { outline: none; border-color: var(--os-today-border); box-shadow: 0 0 0 2px rgba(59,130,246,.15); }
.os-time-colon { font-size: .85rem; color: var(--os-text-muted); flex-shrink: 0; line-height: 1; }

.os-loc-select {
    border: 1px solid var(--os-border); border-radius: var(--os-radius-sm);
    padding: .3rem .4rem; font-size: .78rem; font-family: var(--os-font);
    cursor: pointer; flex: 1; min-width: 0;
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%2364748b' d='M0 0l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .4rem center; padding-right: 1.4rem;
    box-sizing: border-box; min-height: 34px;
    transition: border-color .15s, background .15s, color .15s;
}
.os-loc-select:focus      { outline: none; border-color: var(--os-today-border); }
.os-loc-select.os-loc--none { background-color: var(--os-bg-alt); color: var(--os-text-muted); }
/* Dynamic location colours applied via inline style by JS */

/* Slot action buttons */
.os-slot-actions { display: flex; gap: 2px; flex-shrink: 0; align-items: stretch; }
.os-slot-confirm,
.os-slot-clear {
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: auto; min-height: 30px;
    background: none; border: 1px solid transparent;
    cursor: pointer; border-radius: 4px; padding: 0;
    transition: color .15s, background .15s, border-color .15s;
    box-sizing: border-box;
}
.os-slot-confirm          { color: #4ade80; }
.os-slot-confirm:hover    { color: var(--os-in); background: var(--os-in-bg); border-color: var(--os-in); }
.os-slot-clear            { color: #f87171; }
.os-slot-clear:hover      { color: var(--os-out); background: var(--os-out-bg); border-color: var(--os-out); }
.os-slot-row--confirmed .os-slot-confirm { color: var(--os-in); }

/* Hidden confirmed rows — present in DOM but invisible */
.os-slot-row--hidden { display: none !important; }

/* Summary list below the slots section */
#os-slots-summary {
    display: flex; flex-direction: column; gap: .3rem;
    margin-top: .5rem;
    padding-top: .5rem;
    border-top: 1px dashed var(--os-border);
}
.os-slot-summary-item {
    background: #f0fdf4; border: 1px solid var(--os-in);
    border-radius: var(--os-radius-sm); padding: .35rem .5rem;
    display: flex; flex-direction: column; gap: .15rem;
}
.os-slot-summary-line {
    display: flex; align-items: center; gap: .4rem;
    font-size: .82rem; font-weight: 600; color: var(--os-text);
}
.os-slot-summary-time { flex: 1; }
.os-slot-summary-note {
    font-size: .72rem; color: var(--os-text-muted); padding-left: .15rem;
}
.os-slot-delete-btn {
    display: flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; flex-shrink: 0;
    background: none; border: 1px solid transparent;
    border-radius: 4px; cursor: pointer; color: #fca5a5;
    transition: color .15s, background .15s, border-color .15s;
}
.os-slot-delete-btn:hover { color: var(--os-out); background: var(--os-out-bg); border-color: var(--os-out); }
.os-slot-edit-btn {
    font-size: .72rem; font-weight: 600; font-family: var(--os-font);
    padding: .2rem .6rem; border: 1px solid var(--os-today-border);
    border-radius: 999px; background: var(--os-today-bg); color: var(--os-today-border);
    cursor: pointer; flex-shrink: 0; white-space: nowrap;
    transition: background .15s;
}
.os-slot-edit-btn:hover { background: #dbeafe; }
/* Primed state — cross glows red after first click to signal second click will delete */
.os-slot-clear--primed {
    color: var(--os-out) !important;
    background: var(--os-out-bg) !important;
    border-color: var(--os-out) !important;
    animation: os-pulse-red .6s ease-in-out infinite alternate;
}
@keyframes os-pulse-red {
    from { opacity: .7; }
    to   { opacity: 1; }
}

.os-field { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .5rem; }
.os-field input,
.os-field textarea {
    border: 1px solid var(--os-border); border-radius: var(--os-radius-sm);
    padding: .4rem .55rem; font-size: .85rem; font-family: var(--os-font);
    transition: border-color .15s, box-shadow .15s;
    width: 100%; box-sizing: border-box; background: var(--os-bg); color: var(--os-text);
    min-height: 40px;
}
.os-field input:focus,
.os-field textarea:focus { outline: none; border-color: var(--os-today-border); box-shadow: 0 0 0 3px rgba(59,130,246,.15); }
.os-field textarea { resize: vertical; min-height: 80px; }

.os-modal-error {
    background: var(--os-out-bg); color: var(--os-out); border: 1px solid var(--os-out);
    border-radius: var(--os-radius-sm); padding: .45rem .7rem;
    font-size: .8rem; font-weight: 600; margin-bottom: .5rem;
}
.os-btn--disabled { opacity: .5 !important; cursor: not-allowed !important; }

.os-modal-actions {
    display: flex; align-items: center; justify-content: space-between;
    gap: .65rem; margin-top: 1rem; flex-wrap: wrap;
}
.os-modal-actions-right { display: flex; gap: .65rem; align-items: center; margin-left: auto; }
.os-btn {
    padding: .5rem 1.1rem; border-radius: var(--os-radius-sm);
    font-size: .85rem; font-weight: 600; font-family: var(--os-font);
    cursor: pointer; border: 1px solid transparent; transition: background .15s, opacity .15s;
    min-height: 40px;
}
.os-btn--primary          { background: var(--os-today-border); color: #fff; }
.os-btn--primary:hover    { background: #2563eb; }
.os-btn--primary:disabled { opacity: .6; cursor: not-allowed; }
.os-btn--secondary        { background: var(--os-bg); color: var(--os-text-muted); border-color: var(--os-border); }
.os-btn--secondary:hover  { background: var(--os-bg-alt); }
.os-btn--danger           { background: var(--os-bg); color: var(--os-out); border-color: var(--os-out-bg); display: inline-flex; align-items: center; gap: .35rem; }
.os-btn--danger:hover     { background: var(--os-out-bg); border-color: var(--os-out); }
.os-btn--danger:disabled  { opacity: .6; cursor: not-allowed; }
/* Ensure hidden attribute fully hides (some themes override display) */
.os-modal [hidden]        { display: none !important; }

/* ============================================================
   Mobile responsive
   ============================================================ */
@media (max-width: 900px) {
    .os-col-name, .os-col-name--sub { width: 120px; min-width: 90px; }
}

@media (max-width: 600px) {
    .os-board-title  { font-size: 1.1rem; }
    .os-nav-range    { font-size: .75rem; }

    /* Narrower name column on mobile, table scrolls */
    .os-table-wrap   { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .os-col-name     { width: 90px; min-width: 70px; font-size: .72rem; }
    .os-grid         { min-width: 300px; }

    .os-modal        { padding: .4rem; align-items: flex-end; }
    .os-modal-box    {
        max-width: 100%; border-radius: 14px 14px 0 0;
        max-height: 92vh; padding: 1.2rem 1rem;
        animation: os-modal-slide-up .25s ease-out;
    }
    @keyframes os-modal-slide-up {
        from { transform: translateY(30px); opacity: 0; }
        to   { transform: translateY(0);    opacity: 1; }
    }

    .os-status-grid  { grid-template-columns: 1fr 1fr 1fr; }
    .os-status-btn   { min-height: 52px; font-size: .7rem; }
    .os-slot-times   { flex-wrap: wrap; }
    .os-slot-dash    { display: none; }

    .os-modal-actions         { flex-direction: column-reverse; }
    .os-modal-actions-right   { flex-direction: column-reverse; width: 100%; }
    .os-btn                   { width: 100%; text-align: center; }

    /* Pill buttons stay normal width on mobile */
    .os-btn--pill    { width: auto; }

    .os-name-text strong { font-size: .72rem; }
    .os-name-text small  { display: none; }
}

@media (max-width: 400px) {
    .os-month-header { font-size: 0; }
    .os-nav-range    { font-size: .68rem; }
}