/* Dental Clinic Information System */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-6: 24px;
    --space-8: 32px;
    --space-12: 48px;
    --space-16: 64px;
    --primary-blue: #003d7a;
    --secondary-blue: #0056b3;
    --light-blue: #004494;
    --success-green: #28a745;
    --danger-red: #dc3545;
    --warning-yellow: #ffc107;
    --gray-light: #f8f9fa;
    --gray-border: #ddd;
    --text-dark: #333;
    --text-muted: #666;
    --white: #fff;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.12);

    --sidebar-width: 240px;
    --header-height: 80px; /* Taller header for logo */
    --sidebar-bg: #00306b;
    --sidebar-hover: rgba(255, 255, 255, 0.08);
    --sidebar-active: rgba(255, 255, 255, 0.15);
    --sidebar-border: rgba(255, 255, 255, 0.1);
    --sidebar-text: rgba(255, 255, 255, 0.82);
    --sidebar-text-active: #ffffff;
    --sidebar-accent: #4a9eff;
    --sidebar-logo-height: 160px; /* Height of sidebar logo block */
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    background-color: #eef1f6;
    color: var(--text-dark);
    line-height: 1.6;
    min-height: 100vh;
}

/* =====================
   HEADER — taller, with logo
   ===================== */

.main-header {
    background-color: var(--primary-blue);
    color: var(--white);
    height: var(--header-height);
    padding: 0 var(--space-6);
    border-bottom: 1px solid rgba(0, 0, 0, 0.18);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 100vw;
}

.header-content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    padding-left: var(--sidebar-width);
}

/* Logo + title group in header */
.clinic-title-group {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.header-logo {
    width: 52px;
    height: 52px;
    object-fit: contain;
    border-radius: 4px;
    flex-shrink: 0;
}

.clinic-title h1 {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.2;
    white-space: nowrap;
}

.clinic-title p {
    font-size: 11px;
    margin-top: 0;
    opacity: 0.72;
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.clinic-status {
    background-color: rgba(255, 255, 255, 0.15);
    color: var(--white);
    padding: var(--space-1) var(--space-3);
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 1px solid rgba(255, 255, 255, 0.2);
    max-width: 340px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.clinic-status.open {
    background-color: #1e7e34;
    border-color: #155724;
    color: #fff;
}

.clinic-status.closed {
    background-color: #bd2130;
    border-color: #961b26;
    color: #fff;
}

/* =====================
   SIDEBAR / NAV — with logo block
   ===================== */

.main-nav {
    position: fixed;
    left: 0;
    top: 0;
    width: var(--sidebar-width);
    height: 100vh;
    background: linear-gradient(180deg, #003470 0%, #002a5c 100%);
    border-right: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
    z-index: 300;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

/* Sidebar logo/brand block — replaces the ::before pseudo-element */
.sidebar-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-4) var(--space-4) var(--space-4);
    background: rgba(0, 0, 0, 0.18);
    border-bottom: 1px solid var(--sidebar-border);
    flex-shrink: 0;
    min-height: var(--sidebar-logo-height);
    gap: var(--space-2);
}

.sidebar-logo {
    width: 150px;
    height: 150px;
    object-fit: contain;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.07);
    padding: var(--space-1);
    display: block;
}

.sidebar-brand-text {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    text-align: center;
}

.main-nav ul {
    list-style: none;
    padding: var(--space-2) 0;
    margin: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.main-nav li {
    margin: 0 0;
    position: relative;
}

/* Push logout to bottom */
.main-nav li:last-child {
    margin-top: auto;
    border-top: 1px solid var(--sidebar-border);
    padding-top: var(--space-2);
}

.main-nav a {
    display: flex;
    align-items: center;
    color: var(--sidebar-text);
    text-decoration: none;
    padding: var(--space-3) var(--space-4) var(--space-3) var(--space-6);
    font-size: 13.5px;
    font-weight: 500;
    transition: background-color 0.15s ease, color 0.15s ease, border-left-color 0.15s ease;
    border-left: 3px solid transparent;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.main-nav a:hover {
    background-color: var(--sidebar-hover);
    color: var(--sidebar-text-active);
    border-left-color: var(--sidebar-accent);
}

.main-nav li:last-child a {
    color: rgba(255, 255, 255, 0.55);
    font-size: 13px;
}

.main-nav li:last-child a:hover {
    background-color: rgba(220, 53, 69, 0.18);
    color: #ff8a8a;
    border-left-color: #dc3545;
}

.main-nav a.active {
    background-color: var(--sidebar-active);
    color: var(--sidebar-text-active);
    border-left-color: var(--sidebar-accent);
    font-weight: 600;
}

.main-nav li:nth-last-child(2) {
    border-bottom: 1px solid var(--sidebar-border);
    padding-bottom: var(--space-2);
    margin-bottom: 0;
}

.main-nav::-webkit-scrollbar { width: 4px; }
.main-nav::-webkit-scrollbar-track { background: transparent; }
.main-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }

/* ── Mobile nav toggle ──────────────────────────────────── */
/* Must stay ABOVE the RESPONSIVE section. This and the @media override
   set the same property at the same specificity, and a tie goes to
   whichever comes last. When this sat below, the hamburger stayed hidden
   at every width. Keep any new .nav-toggle rule above that section. */
.nav-toggle {
    display: none;
    background: none;
    border: none;
    padding: var(--space-2) var(--space-1);
    cursor: pointer;
    line-height: 0;
}
/* Three bars, drawn in white. They were #003d7a on a #003d7a header, so the
   button was rendering the whole time and was simply invisible. */
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--white);
    border-radius: 2px;
}
.nav-toggle-bars {
    position: relative;
}
.nav-toggle-bars::before,
.nav-toggle-bars::after {
    content: "";
    position: absolute;
    left: 0;
}
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after  { top: 6px; }

/* =====================
   MAIN CONTENT AREA
   ===================== */

.container {
    max-width: 1300px;
    padding: var(--space-6);
    /* Centers the box in the space right of the fixed sidebar. Plain
       margin-left + auto pinned it left and dumped all the slack on the
       right. 100% not 100vw, since 100vw counts the scrollbar. */
    margin-left: calc(var(--sidebar-width) + max(0px, (100% - var(--sidebar-width) - 1300px) / 2));
    margin-right: auto;
    margin-top: var(--header-height);
}

/* =====================
   LOGIN PAGE
   ===================== */

.login-container {
    max-width: 460px;
    margin: var(--space-16) auto;
    background: var(--white);
    padding: var(--space-8);
    border: 1px solid #dde3ed;
    border-radius: 4px;
    box-shadow: 0 4px 20px rgba(0, 61, 122, 0.1);
}

.login-header {
    text-align: center;
    margin-bottom: var(--space-6);
}

.login-header img { width: 84px; height: 84px; margin-bottom: 14px; }

.login-header h2 {
    color: var(--primary-blue);
    font-size: 19px;
    margin-bottom: var(--space-1);
    font-weight: 700;
}

.login-header p { color: var(--text-muted); font-size: 13px; }

.access-buttons {
    margin-bottom: var(--space-6);
    display: flex;
    gap: var(--space-2);
}

/* These are anchors rather than buttons. A link changes the panel through
   the server, so the toggle keeps working when the script file is stale,
   blocked or slow to arrive. */
.access-buttons button,
.access-buttons a {
    flex: 1;
    padding: var(--space-2);
    background-color: #f3f6fb;
    color: var(--text-dark);
    border: 1px solid #d0d9e8;
    border-radius: 3px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    transition: all 0.15s ease;
}

.access-buttons button:hover,
.access-buttons a:hover { background-color: #e4ecf7; border-color: var(--secondary-blue); }

.access-buttons button.active,
.access-buttons a.active { background-color: var(--secondary-blue); color: var(--white); border-color: var(--secondary-blue); }

/* =====================
   FORMS
   ===================== */

.form-group { margin-bottom: 18px; }

.form-group label {
    display: block;
    margin-bottom: var(--space-1);
    color: #2c3e50;
    font-size: 13px;
    font-weight: 600;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid #cdd3dc;
    border-radius: 3px;
    font-size: 14px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    background-color: var(--white);
    color: var(--text-dark);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--secondary-blue);
    box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.1);
}

.form-group input[readonly] { background-color: #f5f7fa; color: #555; cursor: default; }
.form-group textarea { resize: vertical; min-height: 80px; }

/* Treatment locked field */
.treatment-locked {
    padding: var(--space-2) var(--space-3);
    background: #f0f5ff;
    border: 1px solid #c5d8f5;
    border-radius: 3px;
    font-weight: 600;
    color: var(--primary-blue);
    font-size: 14px;
}

/* Schedule notice */
.schedule-notice {
    background: #fffbf0;
    border: 1px solid #f0d080;
    border-left: 4px solid #e6a817;
    border-radius: 0 3px 3px 0;
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-3);
    font-size: 12.5px;
    color: #5a4010;
    line-height: 1.7;
}

.schedule-notice strong { display: block; margin-bottom: 4px; color: #4a3300; }

/* =====================
   BUTTONS
   ===================== */

/* inline-flex with a fixed line-height so an <a class="btn"> and a
   <button class="btn"> come out the same height. As inline-block, the anchor
   took the body line-height of 1.6 and the button took the browser default,
   which made them 38px and 33px tall side by side. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background-color: var(--secondary-blue);
    color: var(--white);
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.01em;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}

.btn-sm {
    padding: var(--space-1) var(--space-3);
    font-size: 12px;
}

.btn:hover { background-color: var(--light-blue); box-shadow: 0 3px 8px rgba(0,61,122,0.22); transform: translateY(-1px); }
.btn:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
.btn-success { background-color: #1e7e34; }
.btn-success:hover { background-color: #155724; }
.btn-danger { background-color: #bd2130; }
.btn-danger:hover { background-color: #961b26; }
.btn-secondary { background-color: #5a6473; }
.btn-secondary:hover { background-color: #484f5a; }

.link-button {
    color: var(--secondary-blue);
    cursor: pointer;
    text-decoration: underline;
    background: none;
    border: none;
    font-size: 14px;
    font-weight: 500;
}
.link-button:hover { color: var(--primary-blue); }

/* =====================
   DASHBOARD CARDS
   ===================== */

.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.stat-card {
    background: var(--white);
    padding: var(--space-6) var(--space-6);
    border: 1px solid #dde3ed;
    border-left: 4px solid var(--secondary-blue);
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.stat-card:hover { box-shadow: 0 4px 14px rgba(0,61,122,0.12); transform: translateY(-2px); }

.stat-card h3 {
    color: var(--text-muted);
    font-size: 11.5px;
    margin-bottom: var(--space-2);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.stat-card .stat-number {
    font-size: 34px;
    color: var(--primary-blue);
    font-weight: 700;
    line-height: 1;
}

/* =====================
   SECTIONS / PANELS
   ===================== */

.dashboard-section {
    background: var(--white);
    margin-bottom: var(--space-6);
    border: 1px solid #dde3ed;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    padding: var(--space-6) var(--space-6);
}

.dashboard-section h2 {
    color: var(--primary-blue);
    font-size: 16px;
    padding-bottom: var(--space-3);
    border-bottom: 2px solid #e8edf5;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: var(--space-4);
}

/* Section header: title left, actions right. Replaces the same inline
   flex style copy-pasted onto three pages.
   The h2 is qualified with .dashboard-section on purpose, to outrank the
   .dashboard-section h2 rule further down that sets margin-bottom. */
.dashboard-section .section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}
.dashboard-section .section-head > h2 {
    margin: 0;
    padding: 0;
    border: none;
    flex: 0 1 auto;
}
.dashboard-section .section-head-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-left: auto;
}

.container > h1 {
    font-size: 22px;
    font-weight: 700;
    color: var(--primary-blue);
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-3);
    border-bottom: 2px solid #dde3ed;
}

/* =====================
   TABLES
   ===================== */

table {
    width: 100%;
    border-collapse: collapse;
    background: var(--white);
    margin-top: var(--space-2);
    font-size: 13px;
}

table th,
table td {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    border-bottom: 1px solid #f0f3f8;
}

table th {
    background-color: #f4f7fb;
    color: var(--primary-blue);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.07em;
    border-bottom: 2px solid #dde3ed;
}

table tr { transition: background-color 0.12s ease; }
table tr:hover { background-color: #f7f9fd; }
table tbody tr:last-child td { border-bottom: none; }

/* =====================
   CALENDAR — fixed layout
   ===================== */

.cal-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed; /* KEY: forces equal column widths */
}

.cal-table th {
    background-color: var(--primary-blue);
    color: #fff;
    padding: var(--space-2) var(--space-1);
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    border: none;
    text-transform: uppercase;
}

.cal-cell {
    vertical-align: top;
    height: 100px;
    padding: var(--space-1) var(--space-1) var(--space-1);
    border: 1px solid #e4e8f0;
    background: #fff;
    width: 14.2857%;
    overflow: hidden; /* prevent cell expansion */
    position: relative;
}

.cal-cell.cal-today {
    background: #eef4ff;
    border-color: #93b8e8;
}

.cal-cell.cal-empty {
    background: #f7f8fb;
    border-color: #eceef3;
}

/* Closed day (Fri-Sun) */
.cal-cell.cal-closed {
    background: #f2f3f5;
    border-color: #dcdee3;
}

.cal-cell.cal-closed .cal-day-num {
    color: #aaa;
}

.cal-closed-label {
    display: block;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #aaa;
    margin-top: 0;
    padding: 0 var(--space-1);
    background: #e6e7ea;
    border-radius: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

.cal-day-num {
    font-weight: 700;
    font-size: 13px;
    color: #444;
    display: block;
    margin-bottom: var(--space-1);
    line-height: 1;
}

.cal-today .cal-day-num { color: var(--primary-blue); }

/* Calendar event pill — FIXED: no overflow, ellipsis */
.cal-event {
    display: block;
    border-radius: 2px;
    padding: 0 var(--space-1);
    font-size: 10px;
    margin-bottom: 0;
    line-height: 1.35;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis; /* truncate long names */
    max-width: 100%;
}

.cal-event:hover { opacity: 0.88; }

/* "More" indicator when many events */
.cal-more {
    font-size: 10px;
    color: var(--secondary-blue);
    cursor: pointer;
    display: block;
    padding: 0 var(--space-1);
    font-weight: 600;
}

.cal-more:hover { text-decoration: underline; }

/* Date picker (inside create form) */
.datepicker-cell {
    /* An explicit colour is required: inside the admin header the panel would
       otherwise inherit white text and the selectable days would be invisible. */
    color: var(--text-dark);
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* Square cells. A fixed height left the days as wide flat bars, which made
       the selected day and the greyed closed days read as lozenges rather than
       as a calendar. min-height keeps them usable in a narrow column. */
    aspect-ratio: 1 / 1;
    min-height: 34px;
    line-height: 1;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.12s;
    user-select: none;
}

.datepicker-cell.dp-disabled { color: #ccc; cursor: default; }
.datepicker-cell.dp-closed   { color: #c0c0c0; cursor: not-allowed; background: #f5f5f5 !important; font-size: 11px; }
.datepicker-cell.dp-selected { background: var(--primary-blue) !important; color: #fff !important; font-weight: 700; }
.datepicker-cell:not(.dp-disabled):not(.dp-closed):not(.dp-selected):hover { background: #e8f0fe; }

/* =====================
   DAY-CLICK MODAL
   ===================== */

.day-modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 900;
    align-items: center;
    justify-content: center;
}

.day-modal-overlay.active {
    display: flex;
}

.day-modal {
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22);
    width: 480px;
    max-width: 94vw;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.day-modal-header {
    background: var(--primary-blue);
    color: #fff;
    padding: var(--space-3) var(--space-4);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.day-modal-header h3 {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
}

.day-modal-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.8);
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    padding: 0 0;
    transition: color 0.15s;
}

.day-modal-close:hover { color: #fff; }

.day-modal-body {
    overflow-y: auto;
    flex: 1;
    padding: 0;
}

.day-modal-empty {
    padding: var(--space-6) var(--space-4);
    text-align: center;
    color: #999;
    font-size: 14px;
}

.day-modal-item {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid #f0f3f8;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.day-modal-item:last-child { border-bottom: none; }

.day-modal-time {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-blue);
    min-width: 68px;
    flex-shrink: 0;
}

.day-modal-info { flex: 1; min-width: 0; }

.day-modal-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.day-modal-service {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.day-modal-status {
    padding: 0 var(--space-2);
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    flex-shrink: 0;
}

.day-modal-footer {
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid #eee;
    flex-shrink: 0;
    text-align: right;
}

/* =====================
   TOOTH CHART
   ===================== */

.tooth-chart-container {
    background: var(--white);
    padding: var(--space-6) var(--space-6);
    border: 1px solid #dde3ed;
    margin-bottom: var(--space-6);
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.tooth-diagram {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: var(--space-2);
    margin-bottom: var(--space-6);
}

.tooth-item {
    border: 2px solid #d0d9e8;
    padding: var(--space-3) var(--space-2);
    text-align: center;
    cursor: pointer;
    background: var(--white);
    transition: all 0.15s ease;
    border-radius: 3px;
}

.tooth-item:hover { transform: scale(1.05); box-shadow: 0 3px 8px rgba(0,61,122,0.15); border-color: var(--secondary-blue); }
.tooth-item.healthy   { background-color: #d4edda; border-color: #28a745; }
.tooth-item.cavity    { background-color: #fff3cd; border-color: var(--warning-yellow); }
.tooth-item.filled    { background-color: #cce5ff; border-color: var(--secondary-blue); }
.tooth-item.extracted { background-color: #f8d7da; border-color: var(--danger-red); }
.tooth-item.root_canal{ background-color: #e2e3e5; border-color: #6c757d; }
.tooth-number { font-weight: 700; font-size: 14px; display: block; color: var(--text-dark); }
.tooth-status { font-size: 11px; margin-top: 5px; display: block; font-weight: 500; }
.tooth-selector { user-select: none; -webkit-user-select: none; border-radius: 3px; }
.tooth-selector:hover { transform: scale(1.05); box-shadow: var(--shadow-sm); }
.tooth-selector:active { transform: scale(0.98); }

/* =====================
   MESSAGES
   ===================== */

.message-list { background: var(--white); border: 1px solid #dde3ed; border-radius: 4px; overflow: hidden; }
.message-item { padding: 14px 18px; border-bottom: 1px solid #f0f3f8; cursor: pointer; transition: background-color 0.12s ease; }
.message-item:hover { background-color: #f7f9fd; }
.message-item:last-child { border-bottom: none; }
.message-item.unread { background-color: #eff4ff; border-left: 3px solid var(--secondary-blue); }
.message-subject { color: var(--primary-blue); font-size: 14px; margin-bottom: 5px; font-weight: 600; }
.message-preview { color: var(--text-muted); font-size: 13px; margin-bottom: 5px; }
.message-date { color: #9ca3af; font-size: 12px; }

/* =====================
   ALERTS
   ===================== */

.alert { padding: 13px 16px; margin-bottom: 18px; border: 1px solid transparent; border-radius: 3px; font-size: 13.5px; font-weight: 500; }
.alert-success { color: #0f5132; background-color: #d1e7dd; border-color: #a3cfbb; }
.alert-error   { color: #842029; background-color: #f8d7da; border-color: #f1aeb5; }
.alert-info    { color: #055160; background-color: #cff4fc; border-color: #9eeaf9; }

/* =====================
   PROFILE
   ===================== */

.profile-section { background: var(--white); padding: 22px 24px; border: 1px solid #dde3ed; margin-bottom: 22px; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.profile-picture { width: 130px; height: 130px; border: 3px solid #dde3ed; object-fit: cover; margin-bottom: 14px; border-radius: 3px; }
.info-row { padding: 11px 0; border-bottom: 1px solid #f0f3f8; display: flex; align-items: baseline; gap: 12px; }
.info-row:last-child { border-bottom: none; }
.info-label { font-weight: 600; color: var(--text-muted); min-width: 160px; font-size: 13px; }
.info-value { color: var(--text-dark); font-size: 14px; }

/* =====================
   FOOTER
   ===================== */

.main-footer {
    background-color: var(--primary-blue);
    color: rgba(255,255,255,0.8);
    text-align: center;
    padding: var(--space-3) 0;
    margin-top: var(--space-12);
    font-size: 12.5px;
    border-top: 1px solid rgba(0,0,0,0.15);
    margin-left: var(--sidebar-width);
}

/* =====================
   TYPOGRAPHY
   ===================== */

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--space-4);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

h1 { line-height: 1.1; }
h4, h5, h6 { line-height: 1.3; }

p, li { line-height: 1.6; }
p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }
small { font-size: 12px; color: var(--text-muted); }
hr { border: none; border-top: 1px solid #e8edf5; margin: 22px 0; }

/* =====================
   PRINT
   ===================== */

@media print {
    .no-print { display: none; }
    body { background: var(--white); }
    .main-header, .main-nav { display: none; }
    .container { margin-left: 0; margin-top: 0; padding: 0; }
    .main-footer { margin-left: 0; }
}

/* =====================
   RESPONSIVE
   ===================== */

@media (max-width: 1024px) {
    /* Sidebar collapses off-canvas and the hamburger becomes visible at the
       same breakpoint. These used to be two separate breakpoints (1024px
       for the collapse, 768px for the hamburger's display:none override),
       which left a dead zone between them: on a 769-1024px wide screen the
       sidebar was hidden but there was no visible button to bring it back. */
    .nav-toggle { display: inline-block; }

    .main-nav {
        transform: translateX(calc(-1 * var(--sidebar-width)));
        transition: transform 0.28s ease;
    }
    .main-nav.active { transform: translateX(0); }
    .container { margin-left: 0; }
    .header-content { padding-left: 0; }
    .main-footer { margin-left: 0; }
}

@media (max-width: 768px) {
    :root {
        --header-height: 68px;
    }

    .header-logo { width: 40px; height: 40px; }
    .clinic-title h1 { font-size: 13px; }
    .clinic-title p { display: none; }
    .clinic-status { font-size: 10px; padding: 4px 10px; }

    .access-buttons { flex-direction: column; }
    .access-buttons button,
    .access-buttons a { width: 100%; margin: 0; }

    .dashboard-stats { grid-template-columns: 1fr 1fr; }

    .tooth-diagram {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-2);
    }

    .container {
        padding: var(--space-4);
        margin: 0;
        margin-top: var(--header-height);
    }

    .day-modal { width: 96vw; }

    table { font-size: 12px; }
    table td, table th { padding: 8px 10px; }

    .fab-msg { bottom: 16px; right: 16px; width: 48px; height: 48px; }
    .fab-icon { font-size: 18px; }

    .search-bar-wrap input[type="text"] { min-width: 120px; }
}

@media (max-width: 768px) {
    .dashboard-stats { grid-template-columns: 1fr; }
    .cal-event { font-size: 9px; }
    .cal-cell { height: 70px; }
    h1 { font-size: 18px; }
    .btn { font-size: 13px; padding: 8px 12px; }
}

/* =====================
   MISC / UTILITY
   ===================== */

button:focus, input:focus, select:focus, textarea:focus { outline: none; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--secondary-blue);
    outline-offset: 2px;
}

/* =====================
   STATUS INDICATORS & ICONS (no emoji)
   ===================== */

/* Dot indicator — replaces emoji circles (🟢 🔴 🟡) */
.status-indicator {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: var(--space-1);
    vertical-align: middle;
}
.status-indicator.open,
.status-indicator.completed   { background-color: #28a745; }
.status-indicator.pending     { background-color: #e09400; }
.status-indicator.approved    { background-color: #0056b3; }
.status-indicator.closed,
.status-indicator.cancelled   { background-color: #dc3545; }

/* Check / cross / warning text icons — replaces ✅ ❌ ⚠️ */
.icon-check::before   { content: '✓'; color: #28a745; font-weight: 700; }
.icon-cross::before   { content: '✗'; color: #dc3545; font-weight: 700; }
.icon-warning::before { content: '⚠'; color: #e09400; font-weight: 700; }

/* ============================================================
   FIXES & NEW FEATURES  —  April 28
   ============================================================ */

/* Required field asterisk */
.req { color: #dc3545; font-weight: 700; font-style: normal;
    color: #c0392b;
    font-weight: 700;
    font-style: normal;
}

/* ── Floating Action Button (Messages) ──────────────────── */
.fab-msg {
    position: fixed;
    bottom: 28px;
    right: 28px;
    width: 54px;
    height: 54px;
    background: #003d7a;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0,0,0,.25);
    z-index: 999;
    text-decoration: none;
    transition: background .2s, transform .15s;
}
.fab-msg:hover { background: #0056b3; transform: scale(1.08); }
.fab-icon {
    font-size: 22px;
    color: #fff;
    line-height: 1;
}
.fab-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 18px;
    height: 18px;
    background: #dc3545;
    color: #fff;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--space-1);
    border: 2px solid #fff;
}

/* ── Typing Indicator (animated dots) ───────────────────── */
.typing-dots span {
    display: inline-block;
    animation: typingBounce 1.2s infinite;
    font-size: 18px;
    line-height: 1;
    color: #888;
}
.typing-dots span:nth-child(1) { animation-delay: 0s; }
.typing-dots span:nth-child(2) { animation-delay: .2s; }
.typing-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes typingBounce {
    0%, 80%, 100% { transform: translateY(0); }
    40%           { transform: translateY(-5px); }
}

/* ── Patients / Messages unified search bar ─────────────── */
.search-bar-wrap {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
}

/* In a section header the bar sits beside the title. Its bottom margin was
   being counted when the header centred its children, lifting the whole bar
   8px above the button next to it. */
.section-head .search-bar-wrap {
    margin-bottom: 0;
}

.search-bar-wrap input[type="text"],
.search-bar-wrap select,
.search-bar-wrap .btn,
.section-head-actions > .btn {
    height: 36px;
}

.search-bar-wrap select {
    padding: 0 var(--space-3);
    border: 1px solid #dde3ed;
    border-radius: 4px;
    background-color: var(--white);
    color: var(--text-dark);
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
}

/* Narrow panels: the field takes the first row, the buttons share the next. */
.search-bar-wrap.search-bar-stacked input[type="text"] {
    flex: 1 1 100%;
    min-width: 0;
}

.search-bar-wrap.search-bar-stacked .btn {
    flex: 1 1 0;
}

/* The action column shares its right edge with the toolbar buttons above it. */
.has-actions th:last-child,
.has-actions td:last-child {
    text-align: right;
    white-space: nowrap;
}

.has-actions td:last-child > * + * {
    margin-left: var(--space-2);
}

.picker-name {
    display: block;
    font-weight: 600;
}

.picker-meta {
    display: block;
    margin-top: var(--space-1);
    color: var(--text-muted);
    font-size: 12px;
}

.action-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

.info-value-edit {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1) var(--space-3);
}

/* Closed, the link sits beside the address. Open, the whole control takes
   its own line so the form starts on the same edge as the value above it. */
.inline-edit[open] {
    flex-basis: 100%;
}

.inline-edit summary {
    display: inline-flex;
    color: var(--secondary-blue);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.inline-edit summary::-webkit-details-marker {
    display: none;
}

.inline-edit[open] summary {
    color: var(--text-muted);
}

.inline-edit-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-width: 420px;
    margin-top: var(--space-3);
    padding: var(--space-4);
    border: 1px solid #e3e9f2;
    border-radius: 4px;
    background-color: #f7f9fc;
}

.inline-edit-form .form-group {
    margin-bottom: 0;
}

.inline-edit-form p {
    margin: 0;
    color: var(--text-muted);
    font-size: 12px;
}

.photo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 112px;
    height: 112px;
    margin-bottom: var(--space-4);
    border-radius: 4px;
    background-color: #e9ecef;
    color: #6c757d;
    font-size: 12px;
}
.search-bar-wrap input[type="text"] {
    flex: 1;
    min-width: 180px;
    padding: var(--space-2) var(--space-3);
    border: 1px solid #dde3ed;
    border-radius: 4px;
    font-size: 13px;
}
.search-bar-wrap button,
.search-bar-wrap a.btn-secondary {
    padding: var(--space-2) var(--space-4);
    white-space: nowrap;
}

/* ── Pagination buttons ─────────────────────────────────── */
.pagination-wrap {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
    flex-wrap: wrap;
}
.pagination-wrap .page-info {
    font-size: 13px;
    color: #555;
}

/* ── Prescription print toolbar (no overlap) ────────────── */
.print-toolbar {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: #003d7a;
    position: sticky;
    top: 0;
    z-index: 100;
}
.print-toolbar button { padding: 8px 20px; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; font-weight: 600; }
.print-toolbar .back-button  { background: #6c757d; color: #fff; }
.print-toolbar .print-button { background: #28a745; color: #fff; }

@media print {
    .fab-msg { display: none !important; }
    .print-toolbar { display: none !important; }
}

/* ============================================================
   FLOATING CHAT WIDGET (patient side)
   ============================================================ */
.chat-widget-panel {
    position: fixed;
    bottom: 96px;
    right: 28px;
    width: 340px;
    max-width: calc(100vw - 40px);
    height: 460px;
    max-height: calc(100vh - 140px);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,.25);
    display: none;
    flex-direction: column;
    overflow: hidden;
    z-index: 1000;
}
.chat-widget-panel.active { display: flex; }

.chat-widget-header {
    background: #003d7a;
    color: #fff;
    padding: var(--space-3) var(--space-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
.chat-widget-header-title { font-weight: 700; font-size: 14px; }
.chat-widget-header-sub {
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin-top: var(--space-1);
    opacity: .9;
}
.chat-widget-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.chat-widget-dot.dot-open   { background: #4ade80; box-shadow: 0 0 0 2px rgba(74,222,128,.35); }
.chat-widget-dot.dot-closed { background: #f87171; box-shadow: 0 0 0 2px rgba(248,113,113,.35); }
.chat-widget-close {
    background: none; border: none; color: #fff; font-size: 20px;
    cursor: pointer; line-height: 1; padding: 2px 6px; opacity: .85;
}
.chat-widget-close:hover { opacity: 1; }

.chat-widget-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-3);
    background: #f4f6fa;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.chat-widget-empty { color: #999; font-size: 12.5px; text-align: center; margin-top: 30px; }

.chat-bubble {
    max-width: 78%;
    padding: var(--space-2) var(--space-3);
    border-radius: 14px;
    font-size: 13px;
    line-height: 1.4;
    word-wrap: break-word;
}
.chat-bubble-in {
    align-self: flex-start;
    background: #fff;
    border: 1px solid #e3e7ee;
    color: #333;
    border-bottom-left-radius: 4px;
}
.chat-bubble-out {
    align-self: flex-end;
    background: #003d7a;
    color: #fff;
    border-bottom-right-radius: 4px;
}
.chat-bubble-time {
    font-size: 10px;
    opacity: .65;
    margin-top: var(--space-1);
    display: block;
}

.chat-widget-footer {
    border-top: 1px solid #eee;
    padding: var(--space-2);
    display: flex;
    gap: var(--space-2);
    flex-shrink: 0;
    background: #fff;
}
.chat-widget-footer textarea {
    flex: 1;
    resize: none;
    border: 1px solid #dde;
    border-radius: 18px;
    padding: var(--space-2) var(--space-3);
    font-size: 13px;
    font-family: inherit;
    max-height: 70px;
}
.chat-widget-footer textarea:focus { outline: none; border-color: #003d7a; }
.chat-widget-send {
    background: #003d7a;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    cursor: pointer;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.chat-widget-send:hover { background: #0056b3; }
.chat-widget-send:disabled { opacity: .5; cursor: not-allowed; }

@media (max-width: 768px) {
    .chat-widget-panel {
        right: 12px;
        left: 12px;
        width: auto;
        bottom: 82px;
        height: 440px;
    }
}

/* ============================================================
   ADMIN MESSENGER-STYLE INBOX
   ============================================================ */
.messenger-wrap {
    display: grid;
    grid-template-columns: 300px 1fr;
    background: #fff;
    border: 1px solid #e3e7ee;
    border-radius: 8px;
    overflow: hidden;
    height: min(640px, calc(100vh - 210px));
    min-height: 420px;
}
.messenger-list-col {
    min-height: 0;
    border-right: 1px solid #e3e7ee;
    display: flex;
    flex-direction: column;
    background: #fafbfd;
}
.messenger-search {
    padding: var(--space-3);
    border-bottom: 1px solid #e3e7ee;
    flex-shrink: 0;
}
.messenger-search input {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid #dde;
    border-radius: 18px;
    font-size: 13px;
}
.messenger-search input:focus { outline: none; border-color: #003d7a; }

.messenger-conv-list { flex: 1; overflow-y: auto; }
.messenger-conv-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-3);
    cursor: pointer;
    border-bottom: 1px solid #eef0f5;
    text-decoration: none;
    color: inherit;
}
.messenger-conv-item:hover { background: #eef2fa; }
.messenger-conv-item.active { background: #dfeaff; }
.messenger-conv-avatar {
    width: 38px; height: 38px; border-radius: 50%;
    background: #003d7a; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 14px; flex-shrink: 0;
}
.messenger-conv-info { flex: 1; min-width: 0; }
.messenger-conv-name {
    font-size: 13.5px; font-weight: 600; color: #222;
    display: flex; justify-content: space-between; gap: 6px;
}
.messenger-conv-preview {
    font-size: 12px; color: #888;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    display: flex; justify-content: space-between; gap: 6px;
}
.messenger-conv-time { font-size: 10.5px; color: #aaa; flex-shrink: 0; }
.messenger-unread-dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: #0056b3; flex-shrink: 0;
}

.messenger-chat-col { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.messenger-chat-header {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid #e3e7ee;
    font-weight: 700;
    color: #003d7a;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.messenger-chat-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-4);
    background: #f4f6fa;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.messenger-chat-empty {
    flex: 1;
    display: flex; align-items: center; justify-content: center;
    color: #999; font-size: 13px; flex-direction: column; gap: 8px;
}
.messenger-chat-footer {
    border-top: 1px solid #e3e7ee;
    padding: var(--space-3);
    display: flex;
    gap: var(--space-2);
    flex-shrink: 0;
    background: #fff;
}
.messenger-chat-footer textarea {
    flex: 1;
    resize: none;
    border: 1px solid #dde;
    border-radius: 18px;
    padding: var(--space-2) var(--space-3);
    font-size: 13px;
    font-family: inherit;
    max-height: 80px;
}
.messenger-chat-footer textarea:focus { outline: none; border-color: #003d7a; }

@media (max-width: 1024px) {
    .messenger-wrap {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        height: min(720px, calc(100vh - 150px));
    }
    .messenger-list-col { max-height: 220px; border-right: none; border-bottom: 1px solid #e3e7ee; }
}

/* ── Inline date picker box (patient appointment booking) ─── */
.picker-box {
    border: 1px solid #dde;
    border-radius: 4px;
    overflow: hidden;
    max-width: 330px;
}
.picker-box-header {
    background: #003d7a;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) var(--space-3);
    font-weight: 600;
    font-size: 13px;
}
.picker-nav-btn {
    background: none;
    border: 1px solid rgba(255,255,255,.5);
    border-radius: 3px;
    color: #fff;
    cursor: pointer;
    font-size: 11px;
    padding: var(--space-1) var(--space-2);
}
.picker-nav-btn:hover {
    background: rgba(255,255,255,.15);
}

/* Patient search autocomplete, used by the admin appointment form */
.patient-search-wrap {
    position: relative;
}
.patient-search-dropdown {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    background: var(--white);
    border: 1px solid #cfd8e8;
    border-radius: 4px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .14);
    max-height: 260px;
    overflow-y: auto;
    z-index: 400;
}
.ps-item {
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    border-bottom: 1px solid #f0f3f8;
}
.ps-item:last-child {
    border-bottom: none;
}
.ps-item:hover,
.ps-item.active {
    background: #e8f0fe;
}
.ps-item strong {
    display: block;
    font-size: 13px;
    color: var(--primary-blue);
}
.ps-item span {
    display: block;
    font-size: 11.5px;
    color: #777;
    margin-top: 0;
}

/* Horizontal scroll container for wide tables */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Patient sidebar footer block */
.sidebar-nav {
    flex: 1;
}
.sidebar-user {
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--sidebar-border);
    color: var(--sidebar-text);
    font-size: 13px;
    font-weight: 600;
}

/* Quick reply chips inside the patient chat widget */
.quick-reply-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-top: 0;
}
.quick-reply-btn {
    background: var(--white);
    border: 1px solid #b3caf5;
    color: var(--primary-blue);
    border-radius: 14px;
    padding: var(--space-1) var(--space-3);
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
}
.quick-reply-btn:hover {
    background: #e8f0fe;
}

/* Tooth arch grids, 16 across on desktop and 8 across on small screens */
.tc-arch {
    display: grid;
    grid-template-columns: repeat(16, 1fr);
    gap: var(--space-1);
}
.apt-teeth-arch {
    display: grid;
    grid-template-columns: repeat(16, 1fr);
    gap: 0;
}
.apt-teeth-arch + .apt-teeth-arch {
    margin-top: 0;
}

@media (max-width: 1024px) {
    .tc-arch,
    .apt-teeth-arch {
        grid-template-columns: repeat(8, 1fr);
    }
    .tc-tooth:hover {
        transform: none;
    }
}

/* ── Mobile fixes ───────────────────────────────────────── */

/* Booking form beside the appointment list on desktop, stacked on phones. */
.booking-layout {
    display: grid;
    align-items: start;
    grid-template-columns: 360px minmax(0, 1fr);
    gap: var(--space-6);
    margin-bottom: var(--space-6);
}

/* Long values such as email addresses must wrap rather than widen the page. */
.info-value,
.info-row,
td, th {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Any table can scroll sideways on its own instead of stretching the page.
   The calendar is excluded: display:block here would discard
   table-layout:fixed on .cal-table, making its seven columns size
   themselves by content again and lose alignment. */
/* Tables scroll sideways on narrow screens. Mobile only: display:block
   drops the table layout algorithm, so rows shrink to their text and stop,
   leaving the rest of the card empty. This used to apply at every width,
   which is why the Manage Patients table ended short of the card edge. */
@media (max-width: 768px) {
    .dashboard-section table:not(.cal-table) {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 1024px) {
    .booking-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .container { padding: 10px !important; }

    /* Calendar cells get cramped, so shrink their contents rather than clip. */
    .cal-cell { padding: 4px 2px; font-size: 11px; }
    .cal-day-num { font-size: 11px; }
    .cal-event { font-size: 9px; padding: 1px 3px; }
    .cal-closed-label { font-size: 7px; letter-spacing: 0.02em; padding: 1px 2px; }
    .cal-table th { font-size: 10px; padding: 6px 2px; }

    /* Time slots read better two-up than squeezed into a wide row. */
    #time-slots-grid { grid-template-columns: 1fr 1fr !important; }

    .picked-patient { flex-direction: column; align-items: flex-start; }
}

/* ── Clinic status control (admin) ──────────────────────── */
.clinic-status-wrap { position: relative; }

button.clinic-status {
    font-family: inherit;
    cursor: pointer;
    border: none;
}

.clinic-panel {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 320px;
    /* Safety net: on a short or heavily zoomed browser window the panel
       scrolls internally instead of being silently clipped by the viewport. */
    max-height: calc(100vh - 90px);
    overflow-y: auto;
    background: var(--white);
    border: 1px solid #dde;
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0,0,0,.2);
    z-index: 500;
    text-align: left;
    padding: var(--space-4);
}
.clinic-panel.open { display: block; }

.clinic-panel-title {
    font-weight: 700;
    color: var(--primary-blue);
    font-size: 14px;
    padding-bottom: var(--space-2);
    border-bottom: 1px solid #eef1f6;
    margin-bottom: var(--space-1);
}
.clinic-panel-note {
    font-size: 12.5px;
    color: #555;
    line-height: 1.5;
    margin-bottom: var(--space-3);
}
.clinic-panel-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 11.5px;
    font-weight: 700;
    color: #667;
    text-transform: uppercase;
    letter-spacing: .4px;
    margin: var(--space-3) 0 var(--space-1);
}
.clinic-panel select,
.clinic-panel input[type="date"],
.clinic-panel textarea {
    width: 100%;
    box-sizing: border-box;
    padding: var(--space-2) var(--space-2);
    border: 1px solid #dde;
    border-radius: 4px;
    font-size: 13px;
    font-family: inherit;
}
.clinic-panel textarea { resize: vertical; }
.clinic-panel-count {
    display: block;
    font-size: 11px;
    color: #888;
    margin-top: var(--space-1);
}

/* ── Clinic closed notice (patient) ─────────────────────── */
.clinic-notice-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: var(--space-4);
}
.clinic-notice {
    background: var(--white);
    border-radius: 10px;
    padding: var(--space-6) var(--space-6);
    max-width: 380px;
    width: 100%;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0,0,0,.3);
}
.clinic-notice h2 {
    color: #b00020;
    font-size: 19px;
    margin-bottom: var(--space-3);
}
.clinic-notice-reason {
    font-size: 15px;
    color: var(--text-dark);
    margin-bottom: var(--space-2);
    overflow-wrap: anywhere;
}
.clinic-notice-back {
    font-size: 13.5px;
    color: var(--primary-blue);
    font-weight: 600;
    margin-bottom: var(--space-2);
}
.clinic-notice-sub {
    font-size: 12.5px;
    color: #777;
    margin-bottom: var(--space-4);
}

@media (max-width: 768px) {
    .clinic-panel {
        position: fixed;
        left: 12px;
        right: 12px;
        width: auto;
        top: 70px;
    }
}

/* Keep the status badge on one line however long the reason is. */

@media (max-width: 768px) {
    .clinic-status { max-width: 190px; font-size: 9.5px; }
}

/* ── Date picker widget, shared by booking and consultation ── */
/* The padding and gap must match .picker-grid below. Without them the header
   spans the full box while the day cells sit inset, so Su through Sa drift out
   of line with the column each one labels. */
.picker-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
    padding: 0 var(--space-1);
    background: #eef1f6;
    border-bottom: 1px solid #dde;
}
.picker-weekdays > div {
    text-align: center;
    padding: var(--space-2) 0;
    font-size: 11px;
    font-weight: 700;
    color: #667;
    letter-spacing: .3px;
}
.picker-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: var(--white);
    padding: var(--space-1);
    gap: 0;
}
.picker-selected {
    margin-top: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: #f4f7fb;
    border: 1px solid #e3e9f2;
    border-radius: 4px;
    font-size: 13px;
    color: #555;
    max-width: 330px;
    box-sizing: border-box;
}
.picker-selected strong { color: var(--primary-blue); }

.form-hint {
    display: block;
    color: #888;
    font-size: 12px;
    margin-top: var(--space-1);
    line-height: 1.5;
}

/* ── Appointment page layout ────────────────────────────── */

/* Filter chips sit on their own line with room to breathe. */
.filter-chips {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
}
.filter-chip {
    padding: var(--space-1) var(--space-3);
    border-radius: 4px;
    font-size: 12.5px;
    text-decoration: none;
    border: 1px solid #dde;
    background: #f4f7fb;
    color: var(--primary-blue);
    display: inline-block;
}
.filter-chip:hover { background: #e8f0fe; }
.filter-chip.active {
    background: var(--primary-blue);
    color: var(--white);
    border-color: var(--primary-blue);
}

/* The schedule notice is reference material, so it stays quiet. */

@media (max-width: 1280px) {
    .booking-layout { grid-template-columns: 1fr; }
}

/* The picker reads better at a fixed width than stretched across a section. */

/* Give the consultation form the same column feel as the booking form. */
.consult-form-grid {
    display: grid;
    grid-template-columns: 330px minmax(0, 1fr);
    gap: var(--space-6);
    align-items: start;
}
@media (max-width: 1024px) {
    .consult-form-grid { grid-template-columns: 1fr; }
    .picker-box, .picker-selected { max-width: 100%; }
}

/* ── Clinic panel polish ────────────────────────────────── */

.clinic-panel-count-inline {
    font-weight: 500;
    font-size: 11px;
    color: #aab;
    text-transform: none;
    letter-spacing: 0;
}
.clinic-panel select,
.clinic-panel textarea {
    background: var(--white);
    color: var(--text-dark);
    padding: var(--space-2) var(--space-2);
}
.clinic-panel select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23667' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px;
    padding-right: var(--space-6);
}

/* The panel is narrow, so the calendar inside it runs tighter than usual. */
.picker-box-sm { max-width: 100%; }
.picker-box-sm .picker-grid { padding: 4px; gap: 1px; }
.picker-box-sm .picker-weekdays { padding: 0 4px; gap: 1px; }
.picker-box-sm .datepicker-cell {
    /* box-sizing is border-box, so the old padding was swallowed by the 34px
       height and the panel calendar never actually got shorter. */
    aspect-ratio: auto;
    height: 28px;
    min-height: 0;
    font-size: 11.5px;
}
.picker-box-sm .picker-weekdays > div {
    padding: var(--space-1) 0;
    font-size: 10px;
}
.picker-box-sm .picker-box-header { padding: 7px 9px; font-size: 12.5px; }
.picker-box-sm .picker-nav-btn { padding: 3px 8px; font-size: 11px; }

.clinic-panel-picked {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
    padding: var(--space-2) var(--space-2);
    background: #f4f7fb;
    border: 1px solid #e3e9f2;
    border-radius: 4px;
    font-size: 12.5px;
    color: var(--primary-blue);
    font-weight: 600;
}
.clinic-panel-clear {
    background: none;
    border: none;
    color: #8894a8;
    font-size: 11.5px;
    font-family: inherit;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
}
.clinic-panel-clear:hover { color: var(--primary-blue); }

/* ── Attendance and needs-review ────────────────────────── */
.arrived-tag {
    display: inline-block;
    color: #1a7a3c;
    font-size: 11px;
    font-weight: 600;
}
.arrived-tag-lg {
    display: inline-block;
    background: #e9f7ee;
    color: #1a7a3c;
    border: 1px solid #b7e4c7;
    padding: var(--space-1) var(--space-3);
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    vertical-align: middle;
}

.filter-chip-alert {
    background: #fff4e5 !important;
    border-color: #ffd8a8 !important;
    color: #a15c00 !important;
}
.filter-chip-alert.active {
    background: #e09400 !important;
    border-color: #e09400 !important;
    color: var(--white) !important;
}
.filter-chip-count {
    display: inline-block;
    background: #e09400;
    color: var(--white);
    border-radius: 9px;
    padding: 0 var(--space-1);
    font-size: 10.5px;
    font-weight: 700;
    margin-left: var(--space-1);
}
.filter-chip-alert.active .filter-chip-count {
    background: rgba(255,255,255,.3);
}

/* Required-field marker on form labels. */

/* =====================
   MOBILE HEADER: hamburger vs clinic status
   Kept at the very end of the file on purpose. Several .clinic-status
   rules appear earlier at the same specificity, and CSS breaks specificity
   ties by source order, so anything placed above them would be silently
   overridden.
   ===================== */

/* The badge is already capped further up (340px, 190px under 600px), so
   the two fit at every phone width, though only by ~4px at 320px. These
   are the safety net for that: the badge gives way, not the nav button.
   No max-width or panel geometry here, that is tuned earlier. */
.header-content .nav-toggle {
    flex-shrink: 0;
}

/* min-width: 0 is what actually allows a flex item to shrink below the
   width of its own content. Without it, flex-shrink cannot act on a
   nowrap element and the overflow simply spills instead of ellipsising. */
.header-content .clinic-status-wrap,
.header-content .clinic-status {
    min-width: 0;
}

/* =====================
   PATIENT MESSAGES PAGE
   Replaces the floating chat widget, which was cramped on a phone.
   ===================== */

.nav-unread {
    display: inline-block;
    min-width: 18px;
    padding: 0 var(--space-1);
    margin-left: var(--space-1);
    background: #dc3545;
    color: var(--white);
    border-radius: 9px;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    line-height: 18px;
}

.msg-clinic-state {
    font-size: 12.5px;
    color: #666;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.msg-thread {
    border: 1px solid #e8edf5;
    border-radius: 6px;
    background: #fbfcfe;
    padding: var(--space-3);
    max-height: 55vh;
    overflow-y: auto;
    margin-bottom: var(--space-4);
}

.msg-empty {
    color: #888;
    text-align: center;
    padding: var(--space-6) var(--space-2);
    margin: 0;
    font-size: 13px;
}

.msg-daysep {
    text-align: center;
    margin: var(--space-2) 0;
}
.msg-daysep span {
    background: #e8edf5;
    color: #6b7280;
    font-size: 11px;
    padding: 0 var(--space-2);
    border-radius: 9px;
}

.msg-row {
    display: flex;
    margin-bottom: var(--space-2);
}
.msg-row-out { justify-content: flex-end; }
.msg-row-in  { justify-content: flex-start; }

.msg-bubble {
    max-width: 78%;
    padding: var(--space-2) var(--space-3);
    border-radius: 12px;
    font-size: 13.5px;
    line-height: 1.45;
    display: flex;
    flex-direction: column;
}
.msg-bubble-out {
    background: var(--primary-blue);
    color: var(--white);
    border-bottom-right-radius: 3px;
}
.msg-bubble-in {
    background: var(--white);
    border: 1px solid #e3e7ee;
    color: #222;
    border-bottom-left-radius: 3px;
}

/* Says plainly whether a reply came from staff or from the assistant. The
   old widget gave no way to tell them apart. */
.msg-sender {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
    margin-bottom: var(--space-1);
}

.msg-text { white-space: normal; }

.msg-time {
    font-size: 10.5px;
    opacity: 0.7;
    margin-top: var(--space-1);
    align-self: flex-end;
}

.msg-form textarea {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid #ccd4e0;
    border-radius: 6px;
    font-family: inherit;
    font-size: 13.5px;
    resize: vertical;
}
.msg-form-label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: #444;
    margin-bottom: var(--space-1);
}
.msg-form-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-top: var(--space-2);
}
.msg-form-hint {
    font-size: 11.5px;
    color: #888;
    flex: 1 1 220px;
}

@media (max-width: 768px) {
    .msg-thread { max-height: 60vh; padding: 10px; }
    .msg-bubble { max-width: 88%; font-size: 13px; }
    .msg-form-foot { flex-direction: column; align-items: stretch; }
    .msg-form-foot .btn { width: 100%; }
}

/* ── Chat: quick options, link buttons, typing ─────────────── */

.msg-quick {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}
.msg-quick-label {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #8a93a0;
    width: 100%;
    margin-bottom: 0;
}
.msg-quick-btn {
    background: #eef3fb;
    border: 1px solid #d3ddec;
    border-radius: 18px;
    padding: var(--space-2) var(--space-4);
    font-size: 12.5px;
    font-family: inherit;
    color: var(--primary-blue);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.msg-quick-btn:hover { background: #dfe9fa; border-color: #b9c9e4; }
.msg-quick-staff { background: #fff4e5; border-color: #ffd8a8; color: #a15c00; }
.msg-quick-staff:hover { background: #ffe9cc; border-color: #ffc978; }

/* Booking links the assistant attaches to an answer. */
.msg-links {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-top: var(--space-2);
}
.msg-link-btn {
    display: inline-block;
    background: var(--white);
    border: 1px solid var(--primary-blue);
    color: var(--primary-blue);
    border-radius: 6px;
    padding: var(--space-1) var(--space-3);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
}
.msg-link-btn:hover { background: var(--primary-blue); color: var(--white); }
.msg-bubble-out .msg-link-btn {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.5);
    color: var(--white);
}

.msg-typing { color: #888; font-size: 13px; }
.msg-dots::after {
    content: "";
    animation: msgdots 1.2s steps(4, end) infinite;
}
@keyframes msgdots {
    0%   { content: ""; }
    25%  { content: "."; }
    50%  { content: ".."; }
    75%  { content: "..."; }
}

@media (max-width: 768px) {
    .msg-quick-btn { font-size: 12px; padding: 6px 12px; }
}

/* Dashboard cards are links now. Reset the anchor so they still read as
   cards, and show where each one goes. */
a.stat-card {
    text-decoration: none;
    color: inherit;
    display: block;
    position: relative;
}
a.stat-card:hover { border-color: var(--primary-blue); }
.stat-go {
    display: block;
    margin-top: var(--space-2);
    font-size: 11.5px;
    font-weight: 600;
    color: #6b7ea0;
}
a.stat-card:hover .stat-go { color: var(--primary-blue); }
a.stat-card:focus-visible { outline: 2px solid var(--primary-blue); outline-offset: 2px; }

/* Booking confirmation. The old plain alert bar was easy to scroll past,
   so this states what was booked and what happens next. */
.booked-card {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    background: #f0f9f2;
    border: 1px solid #b7e0c4;
    border-left: 4px solid #28a745;
    border-radius: 8px;
    padding: var(--space-4) var(--space-4);
    margin-bottom: var(--space-4);
}
.booked-check {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #28a745;
    color: var(--white);
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.booked-body h3 {
    margin: 0 0 var(--space-1);
    font-size: 15px;
    color: #1d7a35;
}
.booked-when {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #16331f;
}
.booked-svc {
    margin: 0 0 var(--space-2);
    font-size: 13px;
    color: #4a6b53;
}
.booked-next {
    margin: 0;
    font-size: 12.5px;
    color: #4a6b53;
    line-height: 1.5;
}
@media (max-width: 768px) {
    .booked-card { padding: 13px 14px; gap: 11px; }
    .booked-when { font-size: 14px; }
}

/* Mobile width control. overflow-x: hidden on html and body used to sit in
   the 600px block. It hid the overflow instead of fixing it, and it also
   removed the only way to reach the clipped side of a wide card. Wide
   content now scrolls inside its own card and the page itself stays at the
   width of the screen. */
@media (max-width: 1024px) {
    .container,
    .booking-layout,
    .consult-form-grid,
    .form-group,
    .messenger-wrap,
    .picker-box,
    .picker-selected,
    .dashboard-section {
        min-width: 0;
        max-width: 100%;
    }

    .dashboard-section {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .cal-table {
        min-width: 520px;
    }

    .section-head {
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    .section-head-actions {
        flex-wrap: wrap;
    }

    .picker-selected,
    .msg-bubble,
    .alert {
        overflow-wrap: anywhere;
    }

    img,
    svg,
    canvas,
    video,
    iframe,
    pre {
        max-width: 100%;
        height: auto;
    }
}

/* The header is fixed to the viewport, so it must never take its width from
   a page that has grown wider than the screen. */

/* Print layout for the dental record and the prescription. Both pages used
   to carry their own copy of these rules as inline attributes. */

.print-page {
    max-width: 800px;
    margin: 0 auto;
    padding: 24px;
    background: #fff;
    color: #000;
    font-size: 13px;
}

.print-head {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 2px solid #003d7a;
}

.print-head img { width: 64px; height: 64px; }
.print-head-text { display: flex; flex-direction: column; gap: 4px; }
.print-head-text strong { font-size: 15px; color: #003d7a; }
.print-head-text span { font-size: 12px; color: #444; }

.print-title {
    margin: 24px 0 16px;
    font-size: 15px;
    text-align: center;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.print-section {
    margin-bottom: 32px;
}

.print-section h3 {
    margin-bottom: 12px;
    padding-bottom: 4px;
    border-bottom: 2px solid #0056b3;
    color: #003d7a;
    font-size: 13px;
}

.print-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 24px;
}

.print-field { display: flex; gap: 8px; }
.print-field dt { min-width: 132px; font-weight: 600; color: #444; }
.print-field dd { margin: 0; }

.print-table {
    width: 100%;
    margin-top: 16px;
    border-collapse: collapse;
}

.print-table th,
.print-table td {
    padding: 8px;
    border: 1px solid #ddd;
    text-align: left;
    vertical-align: top;
}

.print-table th { background: #f8f9fa; font-weight: 600; }
.print-table tbody tr:nth-child(even) td { background: #fcfcfd; }

.print-empty {
    padding: 24px;
    color: #666;
    text-align: center;
}

.print-note {
    margin-top: 16px;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 4px;
}

.print-signatures {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 64px;
    margin-top: 64px;
}

.print-sign-line {
    padding-top: 8px;
    border-top: 1px solid #000;
    text-align: center;
    font-size: 12px;
}

.print-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 32px;
}

@media print {
    .print-actions { display: none; }
    .print-page { max-width: none; padding: 0; }
}

@media (max-width: 768px) {
    .print-grid,
    .print-signatures { grid-template-columns: minmax(0, 1fr); }
    .print-signatures { gap: 32px; }
    .print-page { padding: 16px; }
}

/* Label cell in the two column detail tables on the print pages. */
.print-label {
    width: 30%;
    padding: 8px;
    background: #f8f9fa;
    vertical-align: top;
}

.print-value {
    padding: 8px;
    vertical-align: top;
}

.print-heading {
    margin: 24px 0 12px;
    padding-bottom: 4px;
    border-bottom: 2px solid #0056b3;
    color: #003d7a;
}

/* Shared layout helpers. These replaced repeated inline style attributes so
   spacing is decided in one place instead of at each tag. */
.stack { display: flex; flex-direction: column; gap: 16px; }
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.row-end { justify-content: flex-end; }
.row-center { justify-content: center; }
.full-width { width: 100%; }
.text-center { text-align: center; }
.text-muted { color: var(--text-muted); }
.is-hidden { display: none; }
.field-note { display: block; margin-top: 8px; font-size: 12px; line-height: 1.5; }
.field-note-warning { color: #c0392b; }
.stat-table { width: 100%; border-collapse: collapse; margin-top: 16px; }
.stat-table th,
.stat-table td { padding: 8px; border: 1px solid #ddd; text-align: left; vertical-align: top; }
.stat-table th { background: #f8f9fa; font-weight: 600; }
.empty-state { padding: 24px; color: var(--text-muted); text-align: center; }
.mb-6 { margin-bottom: 24px; }
.mb-8 { margin-bottom: 32px; }

.data-table { width: 100%; border-collapse: collapse; }
.data-table th { padding: 12px; border-bottom: 2px solid #dde; text-align: left; }
.data-table td { padding: 8px 12px; border-bottom: 1px solid #f0f0f0; }
.chip { padding: 8px 16px; }
.chip-sm { padding: 4px 12px; font-size: 12px; }
.nowrap { white-space: nowrap; }
.text-faint { color: #888; }
.panel-title { margin-bottom: 24px; color: #003d7a; }
.lead { margin-bottom: 16px; color: #555; }
.surface-muted { background: #f8f9fa; }
.gap-left { margin-left: 8px; }

/* Phone layout for section headers and detail rows. The header toolbar
   stacks with the search field on its own line and the dropdown and button
   sharing the next, so nothing is left staggered at different widths. Detail
   rows put the label above the value, since a fixed 160px label column left
   the value about a hundred pixels and broke addresses mid-word. */
@media (max-width: 768px) {
    .dashboard-section .section-head {
        flex-direction: column;
        align-items: stretch;
    }

    .dashboard-section .section-head-actions {
        margin-left: 0;
    }

    .section-head .search-bar-wrap {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        width: 100%;
    }

    .section-head .search-bar-wrap input[type="text"] {
        grid-column: 1 / -1;
        min-width: 0;
    }

    .info-row {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-1);
    }

    .info-label {
        min-width: 0;
    }
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Patient chat. The card fills the screen under the site header, the thread
   scrolls on its own, and the composer stays pinned at the bottom. */
.pchat-page {
    max-width: 880px;
}

.pchat {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--header-height) - var(--space-12));
    height: calc(100dvh - var(--header-height) - var(--space-12));
    min-height: 480px;
    background: var(--white);
    border: 1px solid #e3e9f2;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 61, 122, 0.08);
    overflow: hidden;
}

.pchat-head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid #eef1f6;
}

.pchat-avatar {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--primary-blue);
    color: var(--white);
}

.pchat-title { min-width: 0; }

.pchat-title h1 {
    margin: 0;
    font-size: 16px;
    line-height: 1.3;
    color: var(--text-dark);
    letter-spacing: 0;
}

.pchat-status {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--text-muted);
}

.pchat-dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.pchat-dot.is-open { background: #1f9d55; }
.pchat-dot.is-closed { background: #c0392b; }

.pchat-notice,
.pchat-error {
    margin: 0;
    padding: var(--space-2) var(--space-6);
    font-size: 13px;
    line-height: 1.5;
}

.pchat-notice { background: #fff6e5; color: #8a5a00; }
.pchat-error { background: #fdecea; color: #a12b1f; }

.pchat-thread {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4) var(--space-6);
    overflow-y: auto;
    background: #f7f9fc;
    overscroll-behavior: contain;
}

.pchat-empty {
    margin: auto;
    max-width: 280px;
    color: var(--text-muted);
    font-size: 14px;
    text-align: center;
}

.pchat-day {
    display: flex;
    justify-content: center;
    margin: var(--space-3) 0;
}

.pchat-day span {
    padding: var(--space-1) var(--space-3);
    border-radius: 999px;
    background: #e8edf5;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
}

.pchat-row {
    display: flex;
    flex-direction: column;
    max-width: 78%;
    margin-top: var(--space-2);
}

.pchat-row.is-in { align-self: flex-start; align-items: flex-start; }
.pchat-row.is-out { align-self: flex-end; align-items: flex-end; }

.pchat-sender {
    margin: 0 0 var(--space-1) var(--space-3);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
}

.pchat-bubble {
    padding: var(--space-2) var(--space-4);
    border-radius: 18px;
    font-size: 14px;
    line-height: 1.5;
}

.is-in .pchat-bubble {
    background: var(--white);
    border: 1px solid #e3e9f2;
    border-bottom-left-radius: 6px;
    color: var(--text-dark);
}

.is-in .pchat-bubble.is-staff { border-color: #f0c36d; }

.is-out .pchat-bubble {
    background: var(--secondary-blue);
    border-bottom-right-radius: 6px;
    color: var(--white);
}

.pchat-text {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.pchat-links {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.pchat-link {
    display: block;
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--secondary-blue);
    border-radius: 999px;
    color: var(--secondary-blue);
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}

.pchat-link:hover { background: #eef4fc; }

.pchat-time {
    margin: var(--space-1) var(--space-3) 0;
    color: #98a2b3;
    font-size: 11px;
}

.pchat-typing {
    display: flex;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-4);
}

.pchat-typing span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #98a2b3;
    animation: pchat-bounce 1.2s infinite ease-in-out;
}

.pchat-typing span:nth-child(2) { animation-delay: 0.15s; }
.pchat-typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes pchat-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
    30% { transform: translateY(-4px); opacity: 1; }
}

.pchat-chips {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6) 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.pchat-chips::-webkit-scrollbar { display: none; }

.pchat-chip {
    flex-shrink: 0;
    padding: var(--space-2) var(--space-3);
    border: 1px solid #d6e0ef;
    border-radius: 999px;
    background: var(--white);
    color: var(--primary-blue);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
}

.pchat-chip:hover { background: #eef4fc; }
.pchat-chip.is-staff { border-color: #f0c36d; color: #8a5a00; }

.pchat-composer {
    display: flex;
    align-items: flex-end;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6) var(--space-2);
}

.pchat-input {
    flex: 1;
    min-height: 44px;
    max-height: 128px;
    padding: var(--space-3) var(--space-4);
    border: 1px solid transparent;
    border-radius: 22px;
    background: #f1f4f9;
    color: var(--text-dark);
    font-family: inherit;
    font-size: 16px;
    line-height: 1.25;
    resize: none;
    overflow-y: auto;
}

.pchat-input:focus {
    outline: none;
    border-color: #b8c9e3;
    background: var(--white);
}

.pchat-send {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: var(--secondary-blue);
    color: var(--white);
    cursor: pointer;
}

.pchat-send:disabled {
    background: #c9d4e5;
    cursor: default;
}

.pchat-foot {
    margin: 0;
    padding: 0 var(--space-6) var(--space-3);
    color: #98a2b3;
    font-size: 11px;
    text-align: center;
}

@media (max-width: 768px) {
    .pchat-page { padding: 0 !important; }

    .pchat {
        height: calc(100vh - var(--header-height));
        height: calc(100dvh - var(--header-height));
        min-height: 0;
        border: none;
        border-radius: 0;
        box-shadow: none;
    }

    .pchat-head,
    .pchat-thread,
    .pchat-composer,
    .pchat-foot,
    .pchat-notice,
    .pchat-error { padding-left: var(--space-4); padding-right: var(--space-4); }

    .pchat-chips { padding-left: var(--space-4); padding-right: var(--space-4); }
    .pchat-row { max-width: 85%; }
}