/* === Base === */
html {
    font-size: 14px;
}

:root {
    /* Surf & Sand — Immaculate V5 */
    --bg: #FDFCF9;
    --surface: #FFFFFF;
    --panel: #FFFFFF;
    --muted: #F3F0EA;
    --text: #0D2130;
    --mutedText: #627485;
    --primary: #10A7B3;
    --primary-50: #EAF7F9;
    --primary-600: #0E94A0;
    --primary-700: #0B7C86;
    --primary-800: #095966;
    --primary-900: #06404A;
    --primaryText: #F6FEFF;
    --accent: #E6CFB0;
    --accent-600: #CEB38C;
    --hairline: #E6ECF2;
    /* NEW — V5 danger/red scale (softer, Surf & Sand) */
    --danger-50: #FDECEA; /* pale rose wash */
    --danger-100: #F9D8D3; /* light shell pink */
    --danger-200: #F3BEB8; /* muted peach-rose edge */
    --danger-400: #DE8C84; /* accent (not used here) */
    --danger-600: #C2463A; /* your existing cancel hue */
    --danger-700: #A23A31;
    --danger-800: #7F2E27;
    --danger-900: #5E211C;
}


.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #10A7B3;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Optional: improve spacing and layout */
.page-container {
    max-width: 500px;
    margin: 0 auto;
    padding: 2rem;
}

input.form-control {
    background-color: #FFFFFF;
    color: #0D2130;
    border: 1px solid #E6ECF2;
}

    input.form-control::placeholder {
        color: rgba(13,33,48,0.55);
    }

.app-container {
    display: flex;
}

body {
    min-height: 100vh;
    overflow-x: hidden;
}

.sidebar {
    position: fixed;
    top: 56px; /* height of the header */
    left: 0;
    width: 120px; /* desktop width */
    height: calc(100vh - 56px);
    background-color: #F3F0EA;
    padding-top: 1rem;
    border-right: 1px solid #E6ECF2;
}

    .sidebar .nav-link {
        color: #0D2130;
    }

        .sidebar .nav-link:hover {
            background-color: #EAF7F9;
            border-radius: 0.25rem;
        }

.content {
    margin-left: 120px; /* desktop width */
    padding: 1rem;
    padding-top: 70px; /* space below header */
}

.main-content {
    overflow-y: auto;
    background-color: #FDFCF9; /* optional */
}

.navbar-brand.no-margin {
    margin-right: 0 !important;
}

.text-gold {
    color: #0B7C86 !important; /* primary-700 */
}

select[name="Gender"] {
    background-color: #FFFFFF !important;
    color: #0D2130 !important;
    border: 1px solid #E6ECF2 !important;
}

    select[name="Gender"]:focus {
        border-color: #0E94A0 !important;
        box-shadow: 0 0 0 0.2rem rgba(16,167,179,.25);
    }

    select[name="Gender"] option {
        background-color: #FFFFFF;
        color: #0D2130;
    }

/* Universal input styling for CreatePatient page */
.create-patient-form input.form-control,
.create-patient-form input[type="text"],
.create-patient-form input[type="date"],
.create-patient-form input[type="email"],
.create-patient-form input[type="tel"],
.create-patient-form input[type="password"] {
    background-color: #FFFFFF !important;
    color: #0D2130 !important;
    border: 1px solid #E6ECF2 !important;
}

    .create-patient-form input.form-control:focus,
    .create-patient-form input[type="text"]:focus,
    .create-patient-form input[type="date"]:focus,
    .create-patient-form input[type="email"]:focus,
    .create-patient-form input[type="tel"]:focus,
    .create-patient-form input[type="password"]:focus {
        border-color: #0E94A0 !important;
        box-shadow: 0 0 0 0.2rem rgba(16,167,179,.2);
        color: #0D2130 !important;
    }

    .create-patient-form input.form-control::placeholder,
    .create-patient-form input[type="text"]::placeholder,
    .create-patient-form input[type="date"]::placeholder,
    .create-patient-form input[type="email"]::placeholder,
    .create-patient-form input[type="tel"]::placeholder,
    .create-patient-form input[type="password"]::placeholder {
        color: rgba(13,33,48,0.55) !important;
        opacity: 1;
    }

.btn-goldgreen {
    background: linear-gradient(90deg, #2F8A67 0%, #2F8A67 100%);
    color: #F6FEFF !important;
    border: 2px solid #2F8A67;
    font-weight: bold;
    box-shadow: 0 0 8px rgba(47,138,103,0.25);
    transition: background 0.2s, color 0.2s, border 0.2s;
}

    .btn-goldgreen:hover, .btn-goldgreen:focus {
        background: linear-gradient(90deg, #2F8A67 0%, #2F8A67 100%);
        color: #F6FEFF !important;
        border-color: #2F8A67;
    }

.btn-goldcancel {
    background: linear-gradient(90deg, #C2463A 0%, #C2463A 100%);
    color: #F6FEFF !important;
    border: 2px solid #C2463A;
    font-weight: bold;
    margin-left: 0.5rem;
    box-shadow: 0 0 8px rgba(194,70,58,0.25);
    transition: background 0.2s, color 0.2s, border 0.2s;
}

    .btn-goldcancel:hover,
    .btn-goldcancel:focus {
        background: linear-gradient(90deg, #C2463A 0%, #C2463A 100%);
        color: #F6FEFF !important;
        border-color: #C2463A;
    }

@media (max-width: 991.98px) {
    html {
        font-size: 16px;
    }

    .content, .main-content {
        margin-left: 110px; /* Matches mobile sidebar width */
        padding-top: 104px; /* Increase if header is taller */
    }
    /* Bootstrap's 'lg' and below */
    .sidebar {
        top: 96px; /* Set this to your header's total height when stacked on mobile */
        width: 110px; /* Slim sidebar on mobile */
        height: calc(100vh - 96px); /* Subtract new header height */
        padding-top: 0.5rem;
    }

        .sidebar .nav-link {
            font-size: 0.85rem; /* Optional: smaller text */
            text-align: center; /* Center text/icons in narrow sidebar */
            padding-left: 0;
            padding-right: 0;
        }

    .page-container-au {
        margin-left: -102px !important;
        border-left: 0 !important;
        padding-left: 0 !important;
        width: calc(100vw - 212px) !important;
        max-width: calc(100vw - 212px) !important;
        box-sizing: border-box;
    }
}

/* Gold/dark form styling for Index (reuse with other forms!) */
.index-form input.form-control,
.index-form input[type="text"] {
    background-color: #FFFFFF !important;
    color: #0D2130 !important;
    border: 1px solid #E6ECF2 !important;
}

    .index-form input.form-control:focus,
    .index-form input[type="text"]:focus {
        border-color: #0E94A0 !important; /* primary-600 on focus */
        box-shadow: 0 0 0 0.2rem rgba(16,167,179,.25);
        color: #0D2130 !important;
    }

    .index-form input.form-control::placeholder,
    .index-form input[type="text"]::placeholder {
        color: rgba(13,33,48,0.55) !important;
        opacity: 1;
    }

.btn-bluemetal {
    background: linear-gradient(90deg, #10A7B3 0%, #0B7C86 100%);
    color: #F6FEFF !important;
    border: 2px solid #0E94A0;
    font-weight: bold;
    box-shadow: 0 0 8px rgba(16,167,179,0.25);
    transition: background 0.2s, color 0.2s, border 0.2s;
}

    .btn-bluemetal:hover, .btn-bluemetal:focus {
        background: linear-gradient(90deg, #0B7C86 0%, #0B7C86 100%);
        color: #F6FEFF !important;
        border-color: #0B7C86;
    }

.index-gold {
    color: #0B7C86 !important; /* accent heading */
    font-weight: bold;
    letter-spacing: 0.02em;
}

.list-group {
    background-color: #FFFFFF !important;
    border: 1px solid #E6ECF2 !important;
    color: #0D2130 !important;
}

.list-group-item {
    background-color: #FFFFFF !important;
    color: #0D2130 !important;
    border: none !important;
}

    .list-group-item:hover, .list-group-item.active {
        background-color: #EAF7F9 !important;
        color: #10A7B3 !important;
    }

#create-patient-form-ssn::placeholder,
input#ssnInput::placeholder,
input[name="SocialSecurity"]::placeholder {
    color: rgba(13,33,48,0.55) !important;
    opacity: 1;
}

.no-sidebar,
.no-sidebar .main-content,
.no-sidebar .content,
.no-sidebar .container,
.no-sidebar .page-container,
.no-sidebar .page-container-au {
    margin-left: 3px !important;
    padding-left: 3px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

/* Responsive, no-horizontal-scroll vitals row */
.vitals-wrap {
    display: flex;
    flex-wrap: wrap; /* <-- wrap on narrow screens */
    gap: .75rem 1rem; /* row/column spacing */
}
/* Each field is an inline block that can wrap */
.vitals-field {
    flex: 0 0 auto;
}
/* Fix input width to about 7 characters */
.w-ch-7 {
    width: 8ch !important; /* slightly roomy for 7-char inputs */
    max-width: 8ch !important;
}

.w-ch-10 {
    width: 11ch !important; /* slightly roomy for 7-char inputs */
    max-width: 11ch !important;
}
/* Optional: smaller controls keep the ribbon compact */
.form-control-sm, .form-select-sm {
    padding-top: .25rem;
    padding-bottom: .25rem;
    font-size: .875rem;
}

/* Pain scale layout */
.pain-fieldset {
    border: 0;
    padding: 0;
    margin: 0;
}

.pain-scale {
    display: flex;
    flex-wrap: wrap; /* wraps on narrow screens; no horizontal scroll */
    gap: .5rem; /* spacing between numbers */
    align-items: center;
}
/* Hide the raw radio, but keep it accessible through its label */
.pain-radio {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
/* The clickable “number chip” */
.pain-number {
    width: 2.25rem;
    height: 2.25rem;
    border: 2px solid #E6CFB0;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    transition: transform .05s ease-in-out, box-shadow .1s ease-in-out;
}
/* Focus ring for keyboard users */
.pain-radio:focus + .pain-number {
    outline: 2px dashed #10A7B3;
    outline-offset: 3px;
}
/* “Circled” effect when selected */
.pain-radio:checked + .pain-number {
    box-shadow: inset 0 0 0 4px #fff, /* inner knockout to read cleanly */
    0 0 0 3px #10A7B3; /* outer ring = circled */
    transform: translateY(-1px);
}

.preserve {
    white-space: pre-wrap; /* or: pre-line to collapse extra spaces */
    word-wrap: break-word;
}

/* (Commented block retained as-is; colors left unchanged inside comments)
.seg-toggle { ... }
*/

/* ===== Surf & Sand V5 context overrides (color-only) ===== */

/* Keep headings accent but make form/bio body copy ink for legibility */
.create-patient-form .text-gold {
    color: #0D2130 !important;
}

.bio-fields {
    color: #0D2130 !important;
}

/* Re-tone Bootstrap utilities used in views to suit light clinical palette */
.bg-dark {
    background-color: #FFFFFF !important;
}

.text-light {
    color: #0D2130 !important;
}

/* Make outline-light usable on light surfaces (PDF button on white) */
.btn-outline-light {
    color: #3A8FD8 !important; /* info */
    border-color: #3A8FD8 !important;
}

    .btn-outline-light:hover,
    .btn-outline-light:focus {
        background-color: #3A8FD8 !important;
        color: #F6FEFF !important;
        border-color: #3A8FD8 !important;
    }

/* Optional: soften generic borders from utilities */
.border, .border-top, .border-bottom, .border-start, .border-end {
    border-color: #E6ECF2 !important;
}

/* Patient name chip — match V5 "Secondary" */
/*.btn-outline-info {
    background-color: #EAF7F9 !important;*/ /* primary-50 */
    /*color: #0B7C86 !important;*/ /* primary-700 */
    /*border-color: #0E94A0 !important;*/ /* primary-600 */
/*}

    .btn-outline-info:hover,
    .btn-outline-info:focus {
        background-color: #FFFFFF !important;*/ /* surface */
        /*color: #0B7C86 !important;*/ /* primary-700 */
        /*border-color: #0E94A0 !important;*/ /* primary-600 */
        /* focus ring hue only (keeps your existing ring behavior) */
        /*box-shadow: 0 0 0 0.2rem rgba(16,167,179,.35) !important;
    }

    .btn-outline-info:disabled,
    .btn-outline-info.disabled {
        background-color: #EAF7F9 !important;*/ /* primary-50 */
        /*color: #0B7C86 !important;*/ /* primary-700 */
        /*border-color: #0E94A0 !important;*/ /* primary-600 */
    /*}*/

* Patient name chip — V5 Accent */
.btn-outline-info {
    background-color: #E6CFB0 !important; /* accent */
    color: #1E1E1E !important; /* dark ink on champagne */
    border-color: #CEB38C !important; /* accent-600 edge */
}

.btn-outline-info:hover,
.btn-outline-info:focus {
    background-color: #CEB38C !important; /* accent-600 */
    color: #1E1E1E !important;
    border-color: #CEB38C !important;
    box-shadow: 0 0 0 0.2rem rgba(16,167,179,.35) !important; /* keep teal ring */
}

.btn-outline-info:disabled,
.btn-outline-info.disabled {
    background-color: #E6CFB0 !important;
    color: #1E1E1E !important;
    border-color: #CEB38C !important;
}

/* V5 Primary — Progress Notes "New" button */
.btn-primary {
    color: #F6FEFF !important; /* primaryText */
    background-color: #10A7B3 !important; /* primary */
    border-color: #0E94A0 !important; /* primary-600 */
}

    .btn-primary:hover,
    .btn-primary:focus {
        background-color: #0E94A0 !important; /* primary-600 */
        border-color: #0B7C86 !important; /* primary-700 */
        color: #F6FEFF !important;
        box-shadow: 0 0 0 0.2rem rgba(16,167,179,.35) !important; /* teal focus ring */
    }

    .btn-primary:active,
    .btn-primary.active,
    .show > .btn-primary.dropdown-toggle {
        background-color: #0B7C86 !important; /* primary-700 */
        border-color: #0B7C86 !important;
        color: #F6FEFF !important;
    }

    .btn-primary:disabled,
    .btn-primary.disabled {
        background-color: #10A7B3 !important;
        border-color: #0E94A0 !important;
        color: #F6FEFF !important;
        /* keep Bootstrap's disabled opacity if you like */
    }

/* Patient name chip — authoritative final styles */
.btn-outline-info {
    /* Bootstrap button CSS vars aligned to theme tokens */
    --bs-btn-color: var(--primary-700);
    --bs-btn-border-color: var(--accent-600);
    --bs-btn-bg: var(--accent);
    --bs-btn-hover-color: var(--primary-700);
    --bs-btn-hover-bg: var(--accent-600);
    --bs-btn-hover-border-color: var(--accent-600);
    --bs-btn-active-color: var(--primary-700);
    --bs-btn-active-bg: var(--accent-600);
    --bs-btn-active-border-color: var(--accent-600);
    --bs-btn-disabled-color: var(--primary-700);
    --bs-btn-disabled-bg: var(--accent);
    --bs-btn-disabled-border-color: var(--accent-600);
    /* Explicit overrides (belt & suspenders) */
    color: var(--primary-700) !important; /* dark ocean blue text */
    background-color: var(--accent) !important; /* champagne */
    border-color: var(--accent-600) !important;
    box-shadow: none;
}

    /* Don’t let “selected = disabled” dim the chip */
    .btn-outline-info:disabled,
    .btn-outline-info.disabled {
        /*        opacity: 1 !important;*/
        color: #06404A !important;
    }

    /* If using .active / btn-check, keep the same palette */
    .btn-outline-info.active,
    .btn-check:checked + .btn-outline-info {
        color: var(--primary-700) !important;
        background-color: var(--accent-600) !important;
        border-color: var(--accent-600) !important;
    }

    /* IMPORTANT: children only — allow spans/icons to inherit from the button.
   Do NOT include `.btn-outline-info` here or you’ll reset the button color. */
    .btn-outline-info * {
        color: var(--primary-700);
    }

.btn-outline-info {
    font-size: 1.2rem !important; /* ~18px, larger than normal buttons */
}

.btn-sign {
    background: var(--primary-700); /* #0B7C86 */
    color: var(--primaryText) !important; /* #F6FEFF */
    border: none;
    border-radius: 12px;
    padding: 12px 18px;
    font-weight: 600;
    line-height: 1;
    min-height: 44px; /* big, easy target */
    box-shadow: 0 1px 0 rgba(0,0,0,.04);
}

    .btn-sign:hover {
        background: var(--primary-800);
    }
    /* #095966 */
    .btn-sign:active {
        background: var(--primary-900);
    }
    /* #06404A */
    .btn-sign:focus-visible {
        outline: 3px solid var(--primary-600); /* #0E94A0 */
        outline-offset: 2px;
    }

    .btn-sign:disabled {
        background: var(--primary-50); /* #EAF7F9 */
        color: var(--mutedText); /* #627485 */
        cursor: not-allowed;
        opacity: 1;
    }

/* Secondary: Save Unsigned — neutral outline */
.btn-unsigned {
    background: #FFFFFF; /* surface */
    color: #0D2130; /* ink */
    border: 1px solid #E6ECF2; /* surgical hairline */
    border-radius: 12px;
    padding: 12px 18px;
    font-weight: 600;
    line-height: 1;
    min-height: 44px;
    box-shadow: 0 1px 0 rgba(0,0,0,.02);
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

    .btn-unsigned:hover {
        background: #EAF7F9;
    }
    /* primary-50 wash */
    .btn-unsigned:active {
        background: #F3F0EA;
    }
    /* muted press */
    .btn-unsigned:focus-visible {
        outline: 3px solid #10A7B3; /* teal ring */
        outline-offset: 2px;
    }

    .btn-unsigned:disabled {
        color: #627485; /* mutedText */
        background: #FFFFFF;
        border-color: #E6ECF2;
        cursor: not-allowed;
    }

.btn-sign {
    color: var(--primaryText, #F6FEFF) !important;
}

/* === Canonical: Cancel (match React demo) === */
a.btn-cancel-link {
    display: inline-flex;
    align-items: center;
    background: transparent !important;
    color: var(--mutedText) !important;
    border: none !important;
    padding: 12px 10px !important;
    font-weight: 500 !important;
    min-height: 44px !important;
    border-radius: 10px !important; /* clean focus outline */
    cursor: pointer !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

    a.btn-cancel-link:hover {
        color: var(--text) !important;
    }

    a.btn-cancel-link:focus-visible {
        outline: 3px solid var(--hairline) !important;
        outline-offset: 2px !important;
    }

/* Tighter selected patient chip on phones */
@media (max-width: 1500px) {
    .selected-patient-chip.btn {
        --bs-btn-padding-x: .3rem; /* was ~.75rem */
        --bs-btn-padding-y: .3rem; /* was ~.375rem */
        font-size: 1.05rem; /* down from 1.2rem if you set it */
        line-height: 1.1; /* keeps two-line stack compact */
        border-radius: .6rem; /* optional: slightly crisper chip */
    }
}

/* ---- Schedule grid styling (Surf & Sand V5 tokens already defined in site.css) ---- */

.schedule-header,
.schedule-grid {
    /* LEFT time column + 7 equal day columns */
    grid-template-columns: 4.75rem repeat(7, 1fr);
    gap: 0;
}

    .schedule-header .time-head {
        padding: .25rem .25rem .4rem .25rem;
        border-bottom: 1px solid var(--hairline);
        background: var(--surface);
    }

    .schedule-header .day-head {
        background: var(--surface);
        border-bottom: 1px solid var(--hairline);
        padding: .25rem 0 .4rem;
    }

    .schedule-header .day-date {
        font-size: 1.35rem;
        color: var(--text);
        line-height: 1;
    }

    .schedule-header .day-dow {
        color: var(--mutedText);
        font-weight: 600;
        letter-spacing: .02em;
    }

    .schedule-header .day-year {
        color: var(--mutedText);
    }

.schedule-grid {
    border: 1px solid var(--hairline);
    background: var(--panel);
}

.time-col {
    display: grid;
    grid-template-rows: repeat(24, var(--slot-h, 22px)); /* 12 hours * 2 slots */
    border-right: 1px solid var(--hairline);
    background: var(--surface);
}

.time-cell {
    padding-right: .4rem;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end; /* right-align labels against the grid */
    color: var(--mutedText);
    font-size: .9rem;
}

/* Draw the same lines in the time column so hour/half-hour lines look continuous */
.time-hour {
    border-top: 1px solid var(--hairline);
    transform: translateY(-6px);
}

.time-half {
    border-top: 1px dotted var(--hairline);
}

.day-col {
    display: grid;
    grid-template-rows: repeat(24, var(--slot-h, 22px));
    border-right: 1px solid var(--hairline);
    position: relative;
}

    .day-col:last-of-type {
        border-right: 0;
    }

.slot {
    width: 100%;
}

.slot-hour {
    border-top: 1px solid var(--hairline);
    background: transparent;
}

.slot-half {
    border-top: 1px dotted var(--hairline);
    background: transparent;
}

/* Breathing room tweaks for different viewports */
@media (min-width: 1200px) {
    : root {
        --slot-h: 26px;
    }
}

@media (max-width: 991.98px) {
    : root {
        --slot-h: 20px;
    }

    /* 1) Bring the left arrow closer to the sidebar */
    .container.page-container-au {
        padding-left: .25rem !important; /* was Bootstrap default ~.75rem */
        padding-right: .25rem !important; /* a touch tighter overall */
    }

    /* 2) Narrow the left time-column so days get more width */
    .schedule-header,
    .schedule-grid {
        grid-template-columns: 3.25rem repeat(7, 1fr); /* was 4.75rem … */
    }

        /* 3) Weekday = single-letter initial (S M T W T F S) */
        .schedule-header .day-dow {
            max-width: 1ch; /* exactly one character cell */
            overflow: hidden; /* clip the rest */
            white-space: nowrap; /* keep on one line */
            text-overflow: clip; /* no ellipsis, just the initial */
            font-size: .85rem; /* a hair smaller on phones */
            letter-spacing: .02em;
        }

        /* 4) Smaller numeric date on phones */
        .schedule-header .day-date {
            font-size: 1.05rem; /* was 1.35rem */
        }

        /* 5) Tighter vertical padding in day headers */
        .schedule-header .day-head {
            padding: .2rem 0 .25rem; /* tighter than desktop */
        }

    /* 6) Slightly smaller time labels + less right padding */
    .time-cell {
        font-size: .8rem;
        padding-right: .25rem;
    }

    /* Hide the full word visually… */
    .schedule-header .day-dow {
        font-size: 0;
    }

}

/* Ensure borders don't inflate row heights */
.schedule-grid * {
    box-sizing: border-box;
}

/* Remove the very first top border so both grids start from the same baseline */
.time-col .time-cell:first-child,
.day-col .slot:first-child {
    border-top: 0;
}

/* Keep hour labels on the same baseline as the hour lines */
.time-hour {
    transform: none;
}
/* remove the nudge */

.time-cell {
    font-size: .85rem;
}

/* CURRENT DAY: full-width accent underline, no layout change */
.schedule-header .day-head.is-today {
    /* keep default display from .day-head so it spans full column */
    border-bottom: 2px solid var(--accent-600) !important; /* force accent line */
    background-color: var(--primary-50); /* subtle wash; optional */
}

    /* Optional: slightly bolder label on today */
    .schedule-header .day-head.is-today .day-date {
        font-weight: 700;
    }

    .schedule-header .day-head.is-today .day-dow {
        font-weight: 700;
    }

.schedule-header {
    position: sticky;
    top: 0;
    z-index: 2;
}

/* ==== Month view (Surf & Sand V5) ==== */

/* 7 equal columns */
.month-header,
.month-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr); /* MDN grid-template-columns + repeat() */
    /* ref: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns , /repeat */
}

/* Header row look */
.month-header {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-bottom: 0;
}

    .month-header .mh-cell {
        padding: .5rem 0;
        color: var(--mutedText);
        border-right: 1px solid var(--hairline);
    }

        .month-header .mh-cell:last-child {
            border-right: 0;
        }

/* Grid body: 5 rows @ a comfortable height */
.month-grid {
    border: 1px solid var(--hairline);
    background: var(--panel);
    grid-auto-rows: minmax(7.5rem, 1fr); /* feels airy on desktop */
}

/* Each day cell */
.month-cell {
    position: relative;
    padding: .5rem .5rem 1rem .5rem;
    border-right: 1px solid var(--hairline);
    border-top: 1px solid var(--hairline);
    background: var(--surface);
}

    .month-cell:nth-child(7n) {
        border-right: 0;
    }
/* last column */

.cell-date {
    font-size: .95rem;
    font-weight: 600;
    color: var(--text);
}

/* Days outside the current month (muted) */
.month-cell.is-outside .cell-date {
    color: var(--mutedText);
    opacity: .75;
}

/* TODAY highlight: subtle wash + accent underline across full cell width */
.month-cell.is-today {
    background: var(--primary-50);
    box-shadow: inset 0 -2px 0 var(--accent-600); /* accent line at bottom */
    outline: 2px solid var(--accent-600);
    outline-offset: -2px; /* inside the cell so layout doesn’t jump */
}

    .month-cell.is-today .cell-date {
        color: var(--text);
    }

/* Mobile polish */
@media (max-width: 991.98px) {
    .month-grid {
        grid-auto-rows: minmax(5.5rem, 1fr);
    }

    .cell-date {
        font-size: .9rem;
    }
}

/* ==== Day view layout (time column + 2 columns) ==== */
.dayview .schedule-header,
.dayview .schedule-grid {
    /* time column width + 2 equal columns */
    grid-template-columns: 4.75rem 1fr 1fr;
}

/* Optional: give Notes column a gentle different surface (very subtle) */
.dayview .notes-col {
    background: var(--panel);
}

.schedule-header .day-head > a {
    color: inherit;
}

    .schedule-header .day-head > a:hover,
    .schedule-header .day-head > a:focus {
        color: inherit;
        text-decoration: none;
    }

.month-grid .month-cell > a.stretched-link {
    color: inherit;
}

/* MONTH: hover tint for normal days (distinct from Today’s accent) */
.month-grid .month-cell:not(.is-today):hover {
    background: var(--muted); /* different from Today’s look */
    cursor: pointer;
}

/* MONTH: Today — distinct hover tint (different from non-today hover) */
.month-grid .month-cell.is-today {
    transition: background-color .15s ease, box-shadow .15s ease, outline-color .15s ease;
}

    .month-grid .month-cell.is-today:hover {
        background: #D7EEF2; /* a touch deeper than var(--primary-50) */
        box-shadow: inset 0 -2px 0 var(--primary-600);
        outline-color: var(--primary-600);
    }

/* MONTH: keyboard focus ring on the date link */
.month-grid .month-cell .cell-date a:focus-visible {
    outline: 3px solid var(--primary-600);
    outline-offset: 2px;
    border-radius: .35rem;
    background: var(--primary-50);
    text-decoration: none;
}

/* WEEK: gentle hover on day headers (not Today) */
.schedule-header .day-head:not(.is-today):hover {
    background: var(--muted); /* distinct from Today’s accent */
    cursor: pointer;
}

/* WEEK: keyboard focus ring on the day link */
.schedule-header .day-head a:focus-visible {
    outline: 3px solid var(--primary-600);
    outline-offset: 2px;
    border-radius: .35rem;
    background: var(--primary-50);
    text-decoration: none;
}

/* WEEK: Today — distinct hover tint */
.schedule-header .day-head.is-today {
    transition: background-color .15s ease, border-color .15s ease;
}

    .schedule-header .day-head.is-today:hover {
        background-color: #D7EEF2; /* deeper than var(--primary-50) */
        border-bottom-color: var(--primary-600);
    }

    /* Keep day link behavior consistent (no color shifts) */
    .schedule-header .day-head.is-today a:hover,
    .schedule-header .day-head.is-today a:focus {
        color: inherit;
        text-decoration: none;
    }


/* === Day View — appended styles (Surf & Sand V5 stays authoritative) === */

/* 5-minute grid height (tweak to taste). Keeps readable density on desktop+mobile */
:root {
    --slot-5m: 8px;
}
/* 12 rows/hour * 8px = 96px/hr; feels airy */

/* Day view uses time column + 2 columns (Day, Notes) as you already set */
.dayview .schedule-header,
.dayview .schedule-grid {
    grid-template-columns: 4.75rem 1fr 1fr;
}

/* Upgrade rows to 5-minute resolution: 12 slots per hour */
.dayview .time-col,
.dayview .day-col {
    display: grid;
    grid-template-rows: repeat(144, var(--slot-5m)); /* 12 hrs * 12 rows */
}

/* Time scale: hour / half-hour / quarter lines */
.dayview .time-cell {
    padding-right: .4rem;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    color: var(--mutedText);
    font-size: .85rem;
}

.dayview .time-hour {
    border-top: 1px solid var(--hairline);
}

.dayview .time-half {
    border-top: 1px dotted var(--hairline);
}

.dayview .time-quarter {
    border-top: 1px dotted rgba(13,33,48,0.15);
}

/* Grid body lines match the time column for visual continuity */
.dayview .slot-hour {
    border-top: 1px solid var(--hairline);
}

.dayview .slot-half {
    border-top: 1px dotted var(--hairline);
}

.dayview .slot-quarter {
    border-top: 1px dotted rgba(13,33,48,0.15);
}

/* Appointment layer sits on top of the Day column grid */
.dayview .day-col {
    position: relative;
}

.dayview .appt-layer {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-rows: repeat(144, var(--slot-5m));
}

/* Appointment card (compact so 15m fits) */
.dayview .appt-card {
    position: relative;
    margin: 2px 8px;
    border-radius: 12px;
    background: var(--primary-50);
    border: 1px solid var(--primary-600);
    color: var(--primary-900);
    box-shadow: 0 2px 6px rgba(16,167,179,0.15);
    /* compact vertical rhythm so 15m (≈24px) doesn’t clip */
    padding: 2px 6px;
    min-height: 24px;
    display: flex;
    align-items: center;
    overflow: visible; /* keep baseline from clipping in short cards */
}


    .dayview .appt-card .appt-top {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 12.5px;
        line-height: 1.2;
        padding-right: 7.75rem; /* reserves room for the status select */
    }


        .dayview .appt-card .appt-top .pname {
            font-weight: 700; /* bold name only */
        }

    /* Show time on hover/focus, using the data-start attribute */
    .dayview .appt-card[data-start]:hover::after,
    .dayview .appt-card[data-start]:focus-visible::after {
        content: attr(data-start);
        position: absolute;
        top: -1.6rem;
        left: 8px; /* align with card padding */
        padding: 2px 6px;
        font-size: .75rem;
        font-weight: 600;
        color: var(--primaryText);
        background: var(--primary-700);
        border: 1px solid var(--primary-800);
        border-radius: 6px;
        white-space: nowrap;
        box-shadow: 0 2px 6px rgba(0,0,0,.08);
        pointer-events: none;
    }


/* remove the meta row entirely in day view */


.dayview .len-pill {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 999px;
    background: var(--primary-600);
    color: var(--primaryText);
}

/* Visual language for lengths — left accent + (optional) subtle pattern */
.dayview .appt-15 {
    border-left: 3px solid var(--primary-600);
}

.dayview .appt-20 {
    border-left: 3px solid var(--accent-600); /* keep the same accent edge */
    background-image: none; /* no pattern — matches 15/30 style */
}


.dayview .appt-30 {
    border-left: 3px solid var(--primary-800);
}

/* Sticky header polish already present; keep Today underline distinct */
.dayview .schedule-header .day-head.is-today {
    border-bottom: 2px solid var(--accent-600) !important;
    background-color: var(--primary-50);
}

/* Slightly denser grid on phones; labels tighten but colors remain */
@media (max-width: 991.98px) {
    :root {
        --slot-5m: 7px;
    }
    /* ~84px/hr */
    .dayview .time-cell {
        font-size: .8rem;
        padding-right: .25rem;
    }
}

/* === Week view: name-only chips + hover time (append-only) === */

.weekview .appt-layer {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-rows: repeat(144, var(--slot-5m-week)); /* 12 hrs * 12 rows */
    grid-template-columns: 1fr; /* <<< stretch the single column to full width */
    pointer-events: none; /* chips don’t swallow clicks to underlying day */
}


.weekview .week-chip {
    pointer-events: auto;
    position: relative; /* anchor pseudo tooltip like Day view */
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 2px 0; /* was: 2px 6px */
    padding: 2px 8px;
    line-height: 1.1;
    border-radius: 10px;
    background: var(--primary-50);
    border: 1px solid var(--primary-600);
    color: var(--primary-900);
    font-size: .85rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: none; /* was: 95% */
    justify-self: stretch; /* fill the grid track */
}

    .weekview .week-chip[data-start]:hover::after,
    .weekview .week-chip[data-start]:focus-visible::after {
        content: attr(data-start) " — " attr(data-name);
        position: absolute;
        top: -1.6rem;
        left: 8px; /* align with chip padding */
        padding: 2px 6px;
        font-size: .75rem;
        font-weight: 600;
        color: var(--primaryText);
        background: var(--primary-700);
        border: 1px solid var(--primary-800);
        border-radius: 6px;
        white-space: nowrap;
        box-shadow: 0 2px 6px rgba(0,0,0,.08);
        pointer-events: none;
        z-index: 4;
    }


    /* Subtle focus ring for keyboard users */
    .weekview .week-chip:focus-visible {
        outline: 3px solid var(--primary-600);
        outline-offset: 2px;
    }

/* Tighter chips on phones, keep theme */
@media (max-width: 991.98px) {
    .weekview .week-chip {
        font-size: .8rem;
        padding: 2px 6px;
    }
}

/* === Week view: 5-minute grid (dense like Month, accurate like Day) === */
:root {
    --slot-5m-week: 8px;
}
/* tweak to taste for total vertical height */

.weekview .time-col,
.weekview .day-col {
    display: grid;
    grid-template-rows: repeat(144, var(--slot-5m-week)); /* 12 hrs * 12 rows */
}

@media (max-width: 991.98px) {
    :root {
        --slot-5m-week: 7px;
    }
}

/* Lines that match Day view’s visual language */
.weekview .time-hour {
    border-top: 1px solid var(--hairline);
}

.weekview .time-half {
    border-top: 1px dotted var(--hairline);
}

.weekview .time-quarter {
    border-top: 1px dotted rgba(13,33,48,0.15);
}

.weekview .slot-hour {
    border-top: 1px solid var(--hairline);
}

.weekview .slot-half {
    border-top: 1px dotted var(--hairline);
}

.weekview .slot-quarter {
    border-top: 1px dotted rgba(13,33,48,0.15);
}

/* Subtle 5-minute rows so the grid looks continuous */
.weekview .time-5m,
.weekview .slot-5m {
    border-top: 1px dotted rgba(13,33,48,0.075);
}

/* ==== Grid line spec (hour = solid, 30m = dotted, 5/15m = none) ==== */
/* Applies to weekview + dayview time columns and day columns */

/* Hour lines */
.time-hour,
.slot-hour,
.dayview .time-hour,
.dayview .slot-hour {
    border-top: 1px solid var(--hairline) !important;
}

/* 30-minute lines */
.time-half,
.slot-half,
.dayview .time-half,
.dayview .slot-half {
    border-top: 1px dotted var(--hairline) !important;
}

/* 15-minute & 5-minute markers: no lines */
.time-quarter,
.slot-quarter,
.time-5m,
.slot-5m,
.dayview .time-quarter,
.dayview .slot-quarter {
    border-top: 0 !important;
}

.weekview .week-chip[data-start]::after {
    left: 8px; /* match chip padding for a neat alignment */
}

/* Month: appointment count badge */
.appt-badge {
    display: inline-block;
    min-width: 1.25rem;
    padding: 0 .35rem;
    margin-left: .4rem;
    border-radius: 999px;
    font-size: .75rem;
    line-height: 1.2;
    font-weight: 700;
    text-align: center;
    background: var(--primary-600); /* #0E94A0 */
    color: var(--primaryText); /* #F6FEFF */
    border: 1px solid var(--primary-700); /* crisp rim */
}

/* Today: deepen slightly for emphasis */
.month-cell.is-today .appt-badge {
    background: var(--primary-800); /* #095966 */
    border-color: var(--primary-900); /* #06404A */
}

/* Outside month: mute but readable */
.month-cell.is-outside .appt-badge {
    background: var(--muted);
    color: var(--mutedText);
    border-color: var(--hairline);
    font-weight: 600;
}

.dayview .appt-card {
    padding: 2px 6px; /* slightly tighter so 15m cards breathe */
    display: flex; /* vertically center content */
    align-items: center;
}

    .dayview .appt-card .appt-top {
        font-size: 12.5px;
        line-height: 1.1;
    }

    /* room so the select doesn’t cover the name */
    .dayview .appt-card.has-inline-status {
        padding-right: 7.75rem;
    }




 

/* small height cards still look tidy */
@media (max-width: 991.98px) {
    .dayview .appt-card.has-inline-status {
        padding-right: 7rem;
    }

    .status-inline-select {
        min-width: 7rem;
        font-size: .8rem;
    }
}





/* small height cards still look tidy */
@media (max-width: 991.98px) {
    .dayview .appt-card.has-inline-status {
        padding-right: 7rem;
    }

    .status-inline-select {
        min-width: 7rem;
        font-size: .8rem;
    }
}


/* one clean chip for the name */
.appt-card .pname {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 700;
    font-size: .9rem;
    line-height: 1.1;
    border: 1px solid transparent;
    white-space: nowrap;
}

/* Surf & Sand V5 Immaculate status colors */
.status-scheduled {
    background: var(--primary-50);
    color: var(--primary-900);
    border-color: var(--primary-600);
}

.status-checked-in {
    background: var(--primary-600);
    color: var(--primaryText);
    border-color: var(--primary-700);
}

.status-vitals-taken {
    background: var(--accent);
    color: var(--primary-700);
    border-color: var(--accent-600);
}

.status-checked-out {
    background: var(--primary-800);
    color: var(--primaryText);
    border-color: var(--primary-900);
}

.status-canceled {
    background: var(--muted);
    color: var(--mutedText);
    border-color: var(--hairline);
}

.status-no-show {
    background: var(--danger-50); /* soft wash */
    color: var(--danger-800); /* readable ink */
    border-color: var(--danger-200); /* gentle rim */
}






/* remove the reve*


    /* Slightly tighter card so small slots breathe */
.dayview .appt-card {
    padding: 2px 6px;
    display: flex;
    align-items: center;
    overflow: visible; /* avoid clipping the chip’s baseline in very short cards */
}

/* One clean name chip */
.appt-card .pname {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 700;
    font-size: .9rem;
    line-height: 1.05; /* tighter baseline so it fits */
    border: 1px solid transparent;
    white-space: nowrap;
}

/* Always reserve space on the right for the select so it doesn't cover the name */
.dayview .appt-card.has-inline-status {
    padding-right: 7.75rem; /* matches select width */
}



/* shrink the select a touch on short cards so text fits comfortably */
.dayview .appt-card.appt-15 .status-inline-select {
    font-size: .78rem;
    border-radius: 8px;
    padding: .15rem .35rem;
    min-width: 7rem;
}

/* absolute container pinned inside the card */
.status-inline-form {
    position: absolute;
    top: 2px;
    right: 6px;
    height: calc(100% - 4px); /* match card height */
    display: flex;
    align-items: stretch;
    pointer-events: none; /* only the select is interactive */
    z-index: 3;
}

.status-inline-select {
    pointer-events: auto;
    align-self: stretch;
    height: 100%;
    min-width: 7.5rem;
    background: #FFFFFF;
    color: var(--text);
    border: 1px solid var(--hairline);
    border-radius: 10px;
    box-shadow: 0 1px 0 rgba(0,0,0,.03);
    padding: .2rem .4rem;
    font-size: .85rem;
    /* ALWAYS visible */
    opacity: 1;
    transition: none;
}

/* name chip */
.appt-card .pname {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 700;
    font-size: .9rem;
    line-height: 1.05;
    border: 1px solid transparent;
    white-space: nowrap;
}

.dayview .appt-card.appt-15 .pname,
.dayview .appt-card.appt-20 .pname,
.dayview .appt-card.appt-30 .pname {
    font-size: .8rem;
    line-height: 1; /* consistent compact baseline */
    padding: 1px 6px; /* keep the same chip density */
}


.dayview .appt-card.appt-15 .status-inline-select {
    font-size: .78rem;
    border-radius: 8px;
    padding: .15rem .35rem;
    min-width: 7rem;
}

@media (max-width: 480px) {
    .weekview .week-chip[data-start]:hover::after,
    .weekview .week-chip[data-start]:focus-visible::after {
        left: 0;
    }
}

/* ==== AddMedicine — Surf & Sand V5-aligned components (append-only) ==== */
.med-wrap {
    max-width: 880px;
    margin: 24px auto;
    padding: 0 16px;
}

.med-card {
    background: var(--panel);
    color: var(--text);
    border: 1px solid var(--hairline);
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(0,0,0,.04);
    padding: 18px 18px 10px 18px;
    margin-bottom: 16px;
}

.med-title {
    font-size: 1.6rem;
    margin: 6px 0 12px 0;
    letter-spacing: .2px;
    color: var(--text);
}

.med-row {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.med-help {
    color: var(--mutedText);
    font-size: .92rem;
    margin-top: 6px;
}

.med-alert-ok {
    color: #114b3a;
    background: #e7faf3;
    border: 1px solid #c6f1e1;
    padding: 10px 12px;
    border-radius: 10px;
    margin: 8px 0 6px 0;
}

.med-alert-err {
    color: var(--danger-800);
    background: var(--danger-50);
    border: 1px solid var(--danger-200);
    padding: 10px 12px;
    border-radius: 10px;
    margin: 8px 0 6px 0;
}

.med-results {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 10px 0 6px 0;
}

.med-choice {
    border: 1px solid var(--hairline);
    border-radius: 14px;
    padding: 12px 12px;