/* ============================================
   CMS Admin Panel Styles
   Matches journal_dashboard.php aesthetic:
   dark top bar, teal accents, clean cards
   ============================================ */

/* ---- Login ---- */
.cms-login-section { min-height:100vh; display:flex; align-items:center; position:relative; padding-top:140px; padding-bottom:3rem; background:#0b1120; }
.cms-login-bg { position:absolute; inset:0; background: radial-gradient(ellipse at 30% 20%, rgba(1,99,88,0.15) 0%, transparent 50%), radial-gradient(ellipse at 70% 80%, rgba(99,102,241,0.1) 0%, transparent 50%); }
.cms-shield-icon { width:64px; height:64px; background:linear-gradient(135deg,#016358,#02a388); border-radius:18px; display:inline-flex; align-items:center; justify-content:center; font-size:1.5rem; color:#fff; margin-bottom:1rem; box-shadow:0 8px 32px rgba(1,99,88,0.4); }
.cms-login-card { background:rgba(255,255,255,0.97); border-radius:20px; padding:2rem; box-shadow:0 24px 64px rgba(0,0,0,0.4); }
.cms-login-input { border:2px solid #e2e8f0; border-radius:12px; padding:0.75rem 2.5rem 0.75rem 1rem; font-size:0.95rem; transition:all 0.3s; }
.cms-login-input:focus { border-color:#016358; box-shadow:0 0 0 3px rgba(1,99,88,0.12); }
.cms-input-icon { position:absolute; right:14px; top:50%; transform:translateY(-50%); color:#94a3b8; font-size:0.85rem; }
.cms-login-btn { background:linear-gradient(135deg,#016358,#02a388); border:none; border-radius:12px; font-size:0.95rem; transition:all 0.3s; box-shadow:0 4px 16px rgba(1,99,88,0.3); }
.cms-login-btn:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(1,99,88,0.4); }

/* ---- Admin Header (brand + nav + sign out) ----
   Was two stacked bars: a tall brand bar and a nav bar under it. That
   cost ~120px before any content, left most of the width empty on
   desktop, and scrolled away on these very long table pages. Now one
   sticky bar, on phones as well as desktop.

   Colour: the flat slate (#0f172a) was the generic dashboard dark and
   had nothing to do with the clinic. This is a deep teal drawn from the
   brand gradient (#016358 -> #02a388) darkened for a chrome surface, so
   the header reads as part of the same product as the booking modal. */
.cms-header {
    position:sticky; top:0; z-index:200;
    background:linear-gradient(115deg,#052e28 0%,#07403a 55%,#053832 100%);
    border-bottom:1px solid rgba(45,212,180,0.22);
    box-shadow:0 2px 14px rgba(3,25,22,0.35);
}
.cms-header-inner { display:flex; align-items:center; gap:1.25rem; min-height:62px; }

.cms-brand { display:flex; align-items:center; gap:0.7rem; text-decoration:none; flex-shrink:0; }
.cms-brand-icon {
    width:38px; height:38px; flex-shrink:0;
    background:linear-gradient(135deg,#2fd0b0,#02a388); border-radius:11px;
    display:flex; align-items:center; justify-content:center;
    color:#04302a; font-size:0.95rem;
    box-shadow:0 2px 10px rgba(47,208,176,0.28);
}
.cms-brand-text { display:flex; flex-direction:column; line-height:1.15; }
.cms-brand-title { font-family:'DM Sans',sans-serif; font-weight:700; font-size:1rem; color:#fff; }
.cms-brand-sub { font-family:'Inter',sans-serif; font-size:0.68rem; color:rgba(214,247,240,0.5); }

.cms-nav { display:flex; align-items:center; gap:0.15rem; flex:1 1 auto; min-width:0; }
.cms-nav-link {
    display:inline-flex; align-items:center; gap:0.45rem;
    padding:0.5rem 0.8rem; border-radius:10px;
    font-family:'DM Sans',sans-serif; font-size:0.82rem; font-weight:600;
    color:rgba(214,247,240,0.66); text-decoration:none; white-space:nowrap;
    transition:background 0.18s, color 0.18s;
}
.cms-nav-link i { font-size:0.85rem; opacity:0.8; }
.cms-nav-link:hover { color:#fff; background:rgba(255,255,255,0.09); }
/* A filled pill rather than a thin underline: at a glance it is obvious
   which section you are in. Dark text on mint keeps it high-contrast
   against the teal chrome. */
.cms-nav-link.active {
    color:#04302a; background:linear-gradient(135deg,#54e3c2,#12b895);
    box-shadow:0 2px 10px rgba(18,184,149,0.45);
}
.cms-nav-link.active i { opacity:1; }
.cms-nav-link:focus-visible { outline:2px solid #7defd2; outline-offset:2px; }

.cms-logout-btn {
    display:inline-flex; align-items:center; gap:0.4rem; flex-shrink:0;
    padding:0.5rem 0.9rem; border-radius:10px;
    font-family:'DM Sans',sans-serif; font-size:0.8rem; font-weight:600;
    color:rgba(214,247,240,0.72); background:rgba(255,255,255,0.08);
    text-decoration:none; transition:all 0.2s;
}
.cms-logout-btn:hover { color:#fff; background:rgba(220,53,69,0.32); }

/* The condensed-bar control is desktop-irrelevant. */
.cms-nav-toggle { display:none; }

/* Between tablet and small laptop the six labels stop fitting beside the
   brand, so the nav wraps to its own full-width line. */
@media (max-width:1200px) and (min-width:901px) {
    .cms-header-inner { flex-wrap:wrap; padding-top:0.5rem; padding-bottom:0.5rem; gap:0.5rem 1rem; }
    .cms-nav { order:3; flex-basis:100%; }
    .cms-brand { flex:1 1 auto; }
}

/* ---- Mobile header ----
   Two requirements pull against each other: every section should be
   reachable without a hidden menu, and the header must be sticky without
   eating the screen. The full grid is ~176px — far too much to pin.
   So: the grid shows at rest, and once you scroll the header condenses
   to a single ~56px bar that names the section you are in and expands
   the grid again on tap. Sticky, but only 6% of the viewport. */
@media (max-width:900px) {
    .cms-header-inner { flex-wrap:wrap; gap:0.5rem; padding:0.55rem 0; min-height:0; }
    .cms-brand-sub { display:none; }
    .cms-brand-title { font-size:0.95rem; }
    .cms-brand { flex:1 1 auto; }
    .cms-logout-btn { padding:0.5rem 0.75rem; }

    .cms-nav {
        order:3; flex-basis:100%;
        display:grid; grid-template-columns:repeat(3,1fr); gap:0.35rem;
        padding-top:0.15rem;
    }
    .cms-nav-link {
        flex-direction:column; gap:0.25rem;
        justify-content:center; text-align:center;
        padding:0.5rem 0.25rem; min-height:52px;
        font-size:0.7rem; letter-spacing:0.1px;
    }
    .cms-nav-link i { font-size:1rem; }

    /* --- condensed (scrolled) state --- */
    .cms-header.is-condensed .cms-nav { display:none; }
    .cms-header.is-condensed .cms-nav-toggle { display:inline-flex; }
    .cms-header.is-condensed .cms-brand-title { font-size:0.9rem; }

    /* Re-opened from the condensed bar: float the grid over the page
       rather than pushing it down, so tapping never shifts content. */
    .cms-header.is-condensed.nav-open .cms-nav {
        display:grid;
        position:absolute; left:0; right:0; top:100%;
        margin:0; padding:0.6rem 1rem 0.85rem;
        background:linear-gradient(115deg,#052e28,#07403a);
        border-bottom:1px solid rgba(45,212,180,0.22);
        box-shadow:0 12px 24px rgba(3,25,22,0.4);
    }
    .cms-header { position:sticky; }

    .cms-nav-toggle {
        align-items:center; gap:0.45rem;
        margin-left:auto; padding:0.45rem 0.7rem;
        border:1px solid rgba(45,212,180,0.3); border-radius:10px;
        background:rgba(255,255,255,0.07); color:#d6f7f0;
        font-family:'DM Sans',sans-serif; font-size:0.78rem; font-weight:600;
        cursor:pointer;
    }
    .cms-nav-toggle i { font-size:0.7rem; transition:transform 0.2s; }
    .cms-header.nav-open .cms-nav-toggle i { transform:rotate(180deg); }
    .cms-nav-toggle:focus-visible { outline:2px solid #7defd2; outline-offset:2px; }
}

@media (max-width:360px) {
    /* Stay 3-up: two columns needs a third row and pushes the resting
       header past 230px. The labels still fit at this size. */
    .cms-nav-link { font-size:0.66rem; padding:0.45rem 0.15rem; min-height:48px; }
    .cms-logout-btn span { display:none; }
}

/* ---- Content Area ---- */
.cms-content { background:#f0f2f5; min-height:calc(100vh - 180px); }

/* ---- Cards ---- */
.cms-card { background:#fff; border-radius:16px; padding:1.5rem; box-shadow:0 1px 3px rgba(0,0,0,0.06); border:1px solid #e9ecef; margin-bottom:1.25rem; }
.cms-card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.25rem; flex-wrap:wrap; gap:0.75rem; }
.cms-card-title { font-family:'DM Sans',sans-serif; font-weight:700; font-size:1.1rem; color:#1e293b; margin:0; display:flex; align-items:center; gap:0.5rem; }
.cms-card-title i { color:#02a388; }

/* ---- Tables ---- */
.cms-table { width:100%; border-collapse:separate; border-spacing:0; font-family:'Inter',sans-serif; font-size:0.82rem; }
.cms-table thead th { background:#f8f9fb; padding:0.7rem 0.85rem; font-weight:600; color:#64748b; text-transform:uppercase; font-size:0.7rem; letter-spacing:0.5px; border-bottom:2px solid #e2e8f0; white-space:nowrap; position:sticky; top:0; }
.cms-table tbody td { padding:0.7rem 0.85rem; border-bottom:1px solid #f1f5f9; color:#334155; vertical-align:middle; }
.cms-table tbody tr:hover { background:rgba(2,163,136,0.03); }
.cms-table tbody tr:last-child td { border-bottom:none; }

/* ---- Status Badges ---- */
.cms-badge { display:inline-flex; align-items:center; gap:0.3rem; padding:0.25rem 0.65rem; border-radius:20px; font-size:0.7rem; font-weight:600; font-family:'DM Sans',sans-serif; }
.cms-badge-confirmed { background:rgba(2,163,136,0.1); color:#016358; }
.cms-badge-pending { background:rgba(245,158,11,0.1); color:#b45309; }
.cms-badge-cancelled { background:rgba(220,53,69,0.1); color:#dc3545; }
.cms-badge-completed { background:rgba(16,185,129,0.1); color:#059669; }
.cms-badge-no_show { background:rgba(107,114,128,0.1); color:#6b7280; }
.cms-badge-paid { background:rgba(2,163,136,0.1); color:#016358; }
.cms-badge-failed { background:rgba(220,53,69,0.1); color:#dc3545; }
.cms-badge-refunded { background:rgba(99,102,241,0.1); color:#6366f1; }

/* ---- Forms ---- */
.cms-form-group { margin-bottom:1rem; }
.cms-form-group label { display:block; font-family:'DM Sans',sans-serif; font-weight:600; font-size:0.78rem; color:#475569; margin-bottom:0.3rem; text-transform:uppercase; letter-spacing:0.3px; }
.cms-form-control { width:100%; padding:0.55rem 0.85rem; border:1.5px solid #e2e8f0; border-radius:10px; font-family:'Inter',sans-serif; font-size:0.85rem; color:#1e293b; background:#fff; transition:border-color 0.2s,box-shadow 0.2s; }
.cms-form-control:focus { outline:none; border-color:#02a388; box-shadow:0 0 0 3px rgba(2,163,136,0.1); }
select.cms-form-control { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 0.85rem center; padding-right:2.5rem; }

/* ---- Buttons ---- */
.cms-btn { display:inline-flex; align-items:center; gap:0.4rem; padding:0.5rem 1rem; border-radius:10px; font-family:'DM Sans',sans-serif; font-weight:600; font-size:0.8rem; border:none; cursor:pointer; transition:all 0.2s; text-decoration:none; }
.cms-btn-primary { background:linear-gradient(135deg,#016358,#02a388); color:#fff; box-shadow:0 2px 8px rgba(1,99,88,0.25); }
.cms-btn-primary:hover { box-shadow:0 4px 16px rgba(1,99,88,0.35); transform:translateY(-1px); color:#fff; }
.cms-btn-secondary { background:#f1f5f9; color:#475569; border:1px solid #e2e8f0; }
.cms-btn-secondary:hover { background:#e2e8f0; color:#1e293b; }
.cms-btn-danger { background:rgba(220,53,69,0.1); color:#dc3545; }
.cms-btn-danger:hover { background:rgba(220,53,69,0.2); }
.cms-btn-sm { padding:0.3rem 0.65rem; font-size:0.72rem; border-radius:8px; }
.cms-btn-warning { background:rgba(245,158,11,0.1); color:#b45309; }
.cms-btn-warning:hover { background:rgba(245,158,11,0.2); }

/* ---- Filter Bar ---- */
.cms-filters { display:flex; flex-wrap:wrap; gap:0.75rem; align-items:flex-end; margin-bottom:1.25rem; }
.cms-filters .cms-form-group { margin-bottom:0; min-width:150px; }

/* ---- Empty State ---- */
.cms-empty { text-align:center; padding:3rem 1rem; color:#94a3b8; }
.cms-empty i { font-size:2.5rem; margin-bottom:1rem; display:block; color:#cbd5e1; }
.cms-empty p { font-family:'Inter',sans-serif; font-size:0.9rem; margin:0; }

/* ---- Stat Cards ---- */
.cms-stat { text-align:center; padding:1.25rem; background:#f8f9fb; border-radius:12px; border:1px solid #e9ecef; }
.cms-stat-value { font-family:'DM Sans',sans-serif; font-weight:700; font-size:1.75rem; color:#1e293b; }
.cms-stat-label { font-family:'Inter',sans-serif; font-size:0.75rem; color:#64748b; font-weight:500; margin-top:0.25rem; }

/* ---- Responsive ---- */
@media (max-width:768px) {
    .cms-card { padding:1rem; border-radius:12px; }
    .cms-table { font-size:0.75rem; }
    .cms-table thead th, .cms-table tbody td { padding:0.5rem 0.6rem; }
    .cms-filters { flex-direction:column; }
    .cms-filters .cms-form-group { min-width:100%; }
}

/* ---- Availability-specific ---- */
.avail-day-card { background:#f8f9fb; border:1px solid #e9ecef; border-radius:12px; padding:1rem; margin-bottom:0.75rem; }
.avail-day-label { font-family:'DM Sans',sans-serif; font-weight:700; font-size:0.9rem; color:#1e293b; margin-bottom:0.5rem; }
.avail-slot-row { display:flex; align-items:center; gap:0.5rem; padding:0.4rem 0; border-bottom:1px solid #f1f5f9; flex-wrap:wrap; }
.avail-slot-row:last-child { border-bottom:none; }
.avail-slot-tag { display:inline-flex; align-items:center; gap:0.3rem; padding:0.2rem 0.6rem; border-radius:8px; font-size:0.72rem; font-weight:600; font-family:'DM Sans',sans-serif; }
.avail-slot-inperson { background:rgba(2,163,136,0.1); color:#016358; }
.avail-slot-telecon { background:rgba(99,102,241,0.1); color:#6366f1; }

/* ---- Modal overrides for CMS ---- */
.cms-modal .modal-header { background:linear-gradient(135deg,#016358,#02a388); }
.cms-modal .modal-content { border-radius:16px; border:none; overflow:hidden; }

/* ---- Shared Confirmation Dialog ---- */
/* Reusable across all CMS pages. Markup: cms/includes/confirm_modal.php
   Behaviour: assets/js/cms-confirm.js. Replaces native confirm(). */
.cms-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000; /* above Bootstrap modals (1055) */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(11, 17, 32, 0.62);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s ease, visibility 0.18s ease;
}
.cms-confirm-overlay.is-open { opacity: 1; visibility: visible; }
/* display:flex above would otherwise beat the UA [hidden]{display:none} rule,
   so make the hidden attribute authoritative. */
.cms-confirm-overlay[hidden] { display: none; }

.cms-confirm-dialog {
    width: 100%;
    max-width: 440px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.32);
    overflow: hidden;
    transform: translateY(12px) scale(0.98);
    transition: transform 0.18s ease;
}
.cms-confirm-overlay.is-open .cms-confirm-dialog { transform: translateY(0) scale(1); }

.cms-confirm-body {
    padding: 1.75rem 1.5rem 1.25rem;
    text-align: center;
}
.cms-confirm-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
}
.cms-confirm-icon.is-neutral { background: rgba(2, 163, 136, 0.1); color: #016358; }

.cms-confirm-title {
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 1.15rem;
    color: #1e293b;
    margin: 0 0 0.4rem;
}
.cms-confirm-message {
    font-family: 'Inter', sans-serif;
    font-size: 0.88rem;
    line-height: 1.55;
    color: #64748b;
    margin: 0;
}

/* Optional input, for actions that need a note (replaces prompt()). */
.cms-confirm-field {
    margin-top: 1.1rem;
    text-align: left;
}
.cms-confirm-field-label {
    display: block;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.76rem;
    font-weight: 700;
    color: #475569;
    margin-bottom: 0.35rem;
}
.cms-confirm-field .cms-form-control { width: 100%; }

.cms-confirm-footer {
    display: flex;
    gap: 0.6rem;
    padding: 1rem 1.5rem 1.5rem;
}
/* The action stays disabled until a required note is typed. */
.cms-confirm-footer .cms-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.cms-confirm-footer .cms-btn {
    flex: 1;
    justify-content: center;
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
}

/* Solid red destructive action — intentionally stronger than the tinted
   .cms-btn-danger used for inline table icons. */
.cms-confirm-btn-destructive {
    background: linear-gradient(135deg, #dc3545, #b02a37);
    color: #fff;
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
}
.cms-confirm-btn-destructive:hover,
.cms-confirm-btn-destructive:focus {
    background: linear-gradient(135deg, #c82333, #9b2530);
    box-shadow: 0 4px 16px rgba(220, 53, 69, 0.4);
    transform: translateY(-1px);
    color: #fff;
}

.cms-confirm-dialog .cms-btn:focus-visible {
    outline: 2px solid #0f172a;
    outline-offset: 2px;
}
.cms-confirm-btn-destructive:focus-visible { outline-color: #7f1d1d; }

@media (max-width: 480px) {
    .cms-confirm-footer { flex-direction: column-reverse; }
    .cms-confirm-body { padding: 1.5rem 1.25rem 1rem; }
}

/* ============================================================
   SHARED UI LANGUAGE  (used by cms/includes/ui.php)
   Applies across Dashboard, Availability, Appointments,
   Clients and Payments so all five pages read the same way.
   ============================================================ */

/* ---- Status badges: icons + distinct hues ----
   'completed' moved off green — it was #059669 against #016358 for
   'confirmed', which are near-indistinguishable at badge size. */
.cms-badge-completed { background:rgba(51,65,85,0.1); color:#334155; }
.cms-badge i { font-size:0.72em; }

/* Neutral count badge — stops status teal doubling as a counter. */
.cms-badge-neutral { background:#eef2f7; color:#475569; }

/* ---- Page header ---- */
.cms-page-head {
    display:flex; align-items:flex-start; justify-content:space-between;
    gap:1rem; flex-wrap:wrap; margin-bottom:1.25rem;
}
.cms-page-title {
    font-family:'DM Sans',sans-serif; font-weight:700; font-size:1.4rem;
    color:#1e293b; margin:0 0 0.15rem; display:flex; align-items:center; gap:0.55rem;
}
.cms-page-title i { color:#02a388; font-size:1.15rem; }
.cms-page-sub { font-family:'Inter',sans-serif; font-size:0.83rem; color:#64748b; margin:0; }

/* ---- Sections (Today / Upcoming / Past) ---- */
.cms-section { margin-bottom:1.25rem; }
.cms-section-head {
    display:flex; align-items:center; justify-content:space-between;
    gap:0.75rem; flex-wrap:wrap; margin-bottom:0.6rem;
}
.cms-section-title {
    font-family:'DM Sans',sans-serif; font-weight:700; font-size:0.95rem;
    color:#1e293b; margin:0; display:flex; align-items:center; gap:0.5rem;
    text-transform:uppercase; letter-spacing:0.4px;
}
.cms-section-title .cms-section-day { text-transform:none; letter-spacing:0; color:#64748b; font-weight:500; }

/* Today gets the strongest treatment on the page. */
.cms-section-today > .cms-card {
    border:1px solid rgba(2,163,136,0.35);
    border-left:4px solid #02a388;
    box-shadow:0 2px 12px rgba(1,99,88,0.08);
}
.cms-section-today .cms-section-title i { color:#02a388; }
.cms-section-past > .cms-card { background:#fcfcfd; }
.cms-section-past .cms-section-title { color:#64748b; }

/* ---- Row emphasis within tables ---- */
.cms-table tbody tr.cms-row-attention { background:rgba(245,158,11,0.06); }
.cms-table tbody tr.cms-row-attention td:first-child { box-shadow:inset 3px 0 0 #f59e0b; }

/* Cancelled: still readable, but visibly out of the way. */
.cms-table tbody tr.cms-row-cancelled { opacity:0.55; }
.cms-table tbody tr.cms-row-cancelled:hover { opacity:1; }
.cms-table tbody tr.cms-row-cancelled .cms-cell-time strong { text-decoration:line-through; }

.cms-table tbody tr.cms-row-now { background:rgba(2,163,136,0.07); }
.cms-table tbody tr.cms-row-now td:first-child { box-shadow:inset 3px 0 0 #02a388; }

.cms-cell-id { font-family:'Inter',sans-serif; font-size:0.7rem; color:#94a3b8; }

/* ---- Quick views + active filter summary ---- */
.cms-quickviews { display:flex; align-items:center; gap:0.4rem; flex-wrap:wrap; margin-top:0.85rem; }
.cms-quickviews-label {
    font-family:'DM Sans',sans-serif; font-size:0.72rem; font-weight:600;
    color:#64748b; text-transform:uppercase; letter-spacing:0.4px; margin-right:0.15rem;
}
.cms-chip {
    display:inline-flex; align-items:center; gap:0.35rem;
    padding:0.32rem 0.75rem; border-radius:20px;
    font-family:'DM Sans',sans-serif; font-size:0.75rem; font-weight:600;
    color:#475569; background:#f1f5f9; border:1px solid #e2e8f0;
    text-decoration:none; transition:all 0.18s; cursor:pointer;
}
.cms-chip:hover { background:#e2e8f0; color:#1e293b; }
.cms-chip.is-active { background:rgba(2,163,136,0.12); border-color:rgba(2,163,136,0.4); color:#016358; }
.cms-chip-attention { background:rgba(245,158,11,0.12); border-color:rgba(245,158,11,0.35); color:#b45309; }
.cms-chip-attention:hover { background:rgba(245,158,11,0.2); color:#92400e; }
.cms-chip-count { font-size:0.68rem; opacity:0.75; }

.cms-filter-summary {
    display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap;
    margin-top:0.85rem; padding-top:0.85rem; border-top:1px dashed #e2e8f0;
    font-family:'Inter',sans-serif; font-size:0.78rem; color:#64748b;
}
.cms-filter-tag {
    display:inline-flex; align-items:center; gap:0.35rem;
    padding:0.2rem 0.55rem; border-radius:6px;
    background:#eef2f7; color:#475569; font-size:0.72rem; font-weight:500;
}
.cms-filter-tag a { color:#94a3b8; text-decoration:none; font-weight:700; }
.cms-filter-tag a:hover { color:#dc3545; }

/* ---- "Came from" source pills ---- */
.cms-source {
    display:inline-block; padding:0.2rem 0.5rem; border-radius:6px;
    font-family:'DM Sans',sans-serif; font-size:0.68rem; font-weight:600;
    white-space:nowrap; cursor:help;
}
.cms-source-google   { background:rgba(66,133,244,0.12);  color:#1a56b8; }
.cms-source-facebook { background:rgba(24,119,242,0.12);  color:#0f52ba; }
.cms-source-campaign { background:rgba(99,102,241,0.12);  color:#4338ca; }
.cms-source-direct   { background:rgba(2,163,136,0.12);   color:#016358; }
.cms-source-staff    { background:rgba(148,163,184,0.18); color:#475569; }
.cms-source-unknown  { background:#f1f5f9; color:#94a3b8; font-weight:500; }

/* ---- "How they paid" method pills ----
   Deliberately NOT the status palette. Cash previously reused the amber
   .cms-badge-pending and Razorpay the teal .cms-badge-confirmed, so the
   method column read like a second status column. These are cool/neutral
   hues that carry no success-or-failure meaning. */
.cms-method {
    display:inline-flex; align-items:center; gap:0.35rem;
    padding:0.2rem 0.55rem; border-radius:6px;
    font-family:'DM Sans',sans-serif; font-size:0.7rem; font-weight:600;
    white-space:nowrap; cursor:help;
}
.cms-method-razorpay { background:rgba(99,102,241,0.12);  color:#4338ca; }
.cms-method-cash     { background:rgba(120,113,108,0.14); color:#57534e; }
.cms-method-upi      { background:rgba(14,165,233,0.12);  color:#0369a1; }
.cms-method-bank     { background:rgba(100,116,139,0.14); color:#475569; }
/* Not recorded: an invalid/empty ENUM value. Dashed so it reads as a gap
   in the data rather than as a legitimate method. */
.cms-method-unknown  {
    background:#fff7ed; color:#c2410c; font-weight:500;
    border:1px dashed rgba(194,65,12,0.35);
}

/* ---- Schedule coverage banner (Availability) ----
   A clinician with no availability row is invisible to the public booking
   form. This states how many are in that position, because the schedule
   tables alone cannot show an absence. */
.cms-coverage { border-left:4px solid #02a388; }
.cms-coverage.is-incomplete { border-left-color:#f59e0b; background:rgba(245,158,11,0.04); }
.cms-coverage-head { display:flex; align-items:flex-start; gap:1rem; }
.cms-coverage-figure {
    flex:0 0 auto; display:flex; flex-direction:column; align-items:center;
    justify-content:center; min-width:74px; padding:0.5rem 0.6rem;
    background:#fff; border:1px solid #e2e8f0; border-radius:12px;
}
.cms-coverage-num {
    font-family:'DM Sans',sans-serif; font-weight:700; font-size:1.6rem;
    line-height:1; color:#1e293b;
}
.cms-coverage-of { font-family:'Inter',sans-serif; font-size:0.7rem; color:#94a3b8; margin-top:0.2rem; }
.cms-coverage-title {
    font-family:'DM Sans',sans-serif; font-weight:700; font-size:0.95rem;
    color:#1e293b; margin:0 0 0.25rem;
}
.cms-coverage-body {
    font-family:'Inter',sans-serif; font-size:0.83rem; color:#64748b;
    margin:0; line-height:1.55;
}
.cms-coverage-list {
    display:flex; flex-wrap:wrap; gap:0.4rem;
    margin-top:0.9rem; padding-top:0.9rem; border-top:1px dashed #e2e8f0;
}
.cms-coverage-chip {
    display:inline-flex; align-items:center; gap:0.35rem;
    padding:0.25rem 0.6rem; border-radius:8px; text-decoration:none;
    background:#fff; border:1px solid #fcd9a4; color:#b45309;
    font-family:'DM Sans',sans-serif; font-size:0.75rem; font-weight:600;
}
.cms-coverage-chip:hover { background:#fffbeb; border-color:#f59e0b; color:#92400e; }
.cms-coverage-chip i { font-size:0.65rem; opacity:0.7; }

/* ---- "This replaces an existing schedule" inline warning ---- */
.cms-overwrite-warning {
    display:flex; align-items:flex-start; gap:0.6rem;
    padding:0.7rem 0.85rem; margin-bottom:0.9rem;
    background:#fffbeb; border:1px solid #fcd9a4; border-radius:10px;
    font-family:'Inter',sans-serif; font-size:0.78rem; color:#92400e;
    line-height:1.5;
}
.cms-overwrite-warning i { color:#f59e0b; margin-top:0.15rem; }
.cms-overwrite-warning strong { font-family:'DM Sans',sans-serif; }

/* ---- Inline "this data is wrong" cell marker ---- */
.cms-cell-warn {
    display:inline-flex; align-items:center; gap:0.3rem;
    font-family:'Inter',sans-serif; font-size:0.75rem;
    color:#c2410c; cursor:help;
}

/* ---- Action buttons in table rows ---- */
.cms-actions { display:flex; align-items:center; gap:0.3rem; flex-wrap:wrap; }
.cms-actions form { display:inline; }
.cms-action-none { font-size:0.72rem; color:#cbd5e1; font-style:italic; }

/* ---- Guided empty states ---- */
.cms-empty-title {
    font-family:'DM Sans',sans-serif; font-weight:700; font-size:0.95rem;
    color:#475569; margin:0 0 0.3rem;
}
.cms-empty-body {
    font-family:'Inter',sans-serif; font-size:0.83rem; color:#94a3b8;
    margin:0 auto; max-width:420px; line-height:1.55;
}
.cms-empty-action { margin-top:1rem; }
.cms-empty-compact { padding:1.75rem 1rem; }
.cms-empty-compact i { font-size:1.75rem; margin-bottom:0.6rem; }

/* ---- Form grouping & required/optional markers ---- */
.cms-fieldset { border:none; padding:0; margin:0 0 1.25rem; }
.cms-fieldset-legend {
    display:flex; align-items:center; gap:0.5rem; width:100%;
    font-family:'DM Sans',sans-serif; font-weight:700; font-size:0.75rem;
    color:#016358; text-transform:uppercase; letter-spacing:0.6px;
    padding:0 0 0.5rem; margin-bottom:0.9rem; border-bottom:1px solid #e2e8f0;
}
.cms-fieldset-legend i { color:#02a388; }
.cms-fieldset-legend .cms-fieldset-note {
    margin-left:auto; text-transform:none; letter-spacing:0;
    font-weight:500; font-size:0.72rem; color:#94a3b8;
}

.cms-req { color:#dc3545; margin-left:0.2rem; font-weight:700; }
.cms-optional {
    margin-left:0.4rem; padding:0.1rem 0.4rem; border-radius:5px;
    background:#f1f5f9; color:#94a3b8;
    font-size:0.62rem; font-weight:600; text-transform:none; letter-spacing:0;
}
.cms-hint {
    font-family:'Inter',sans-serif; font-size:0.74rem; color:#94a3b8;
    margin:-0.1rem 0 0.35rem; line-height:1.45; text-transform:none; letter-spacing:0;
}
.cms-form-footnote {
    font-family:'Inter',sans-serif; font-size:0.75rem; color:#94a3b8;
    display:flex; align-items:center; gap:0.35rem;
}

/* ---- Collapsible panel (manual entry) ---- */
.cms-panel {
    border:1px solid rgba(2,163,136,0.3); border-radius:16px;
    background:#fff; margin-bottom:1.25rem; overflow:hidden;
    box-shadow:0 2px 12px rgba(1,99,88,0.06);
}
.cms-panel-head {
    display:flex; align-items:center; justify-content:space-between; gap:1rem;
    padding:1rem 1.25rem; background:rgba(2,163,136,0.04);
    border-bottom:1px solid rgba(2,163,136,0.15);
}
.cms-panel-title {
    font-family:'DM Sans',sans-serif; font-weight:700; font-size:1rem;
    color:#1e293b; margin:0; display:flex; align-items:center; gap:0.5rem;
}
.cms-panel-title i { color:#02a388; }
.cms-panel-body { padding:1.25rem; }

@media (max-width:768px) {
    .cms-page-title { font-size:1.15rem; }
    .cms-quickviews { gap:0.3rem; }
    .cms-chip { font-size:0.7rem; padding:0.28rem 0.6rem; }
    .cms-panel-body { padding:1rem; }
}

/* ============================================================
   FORM CONTROL OVERFLOW CONTAINMENT
   Applies to every input/select/textarea across all CMS pages.
   ============================================================ */

/* `width:100%` alone is not enough: without an explicit max-width a long
   value or a wide intrinsic content size can still push a flex/grid item
   past its container, which clipped the doctor dropdown off the right
   edge of the screen on mobile. */
.cms-form-control {
    max-width: 100%;
    box-sizing: border-box;
    min-width: 0; /* flex items default to min-width:auto and refuse to shrink */
}

/* Long option text (e.g. "Name — Consultant Psychiatrist") should truncate
   in the CLOSED select rather than force the control wider. */
select.cms-form-control {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

/* Wide filter fields: previously set with an inline
   style="flex:1;min-width:250px", which beat the mobile media query below
   on specificity (inline styles always win over class selectors) and so
   kept a 250px floor on narrow screens. Moved to a class so it can be
   reset responsively. */
.cms-filter-grow {
    flex: 1;
    min-width: 250px;
}

/* Cards and panels must never be the source of horizontal overflow. */
.cms-card,
.cms-panel {
    max-width: 100%;
}

@media (max-width: 768px) {
    /* Every filter field goes full width and drops its px floor. */
    .cms-filters .cms-form-group,
    .cms-filter-grow {
        min-width: 100%;
        flex: 1 1 100%;
    }

    /* Buttons inside the filter bar stretch rather than sitting in a
       cramped column beside a full-width field. */
    .cms-filters .cms-btn {
        width: 100%;
        justify-content: center;
    }

    /* Slightly larger touch target, and 16px font stops iOS Safari from
       zooming the viewport when a field receives focus — that zoom is a
       common cause of "the layout is suddenly wider than the screen". */
    .cms-form-control {
        font-size: 16px;
        padding: 0.6rem 0.85rem;
    }
    select.cms-form-control {
        padding-right: 2.25rem;
    }
}

/* ---- Autocomplete (patient search in manual booking) ---- */
.cms-autocomplete { position: relative; }

.cms-autocomplete-list {
    position: absolute;
    z-index: 20;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    margin: 0;
    padding: 0.25rem;
    list-style: none;
    max-height: 240px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
}

.cms-autocomplete-item {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.5rem 0.65rem;
    border-radius: 8px;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
}
.cms-autocomplete-item:hover,
.cms-autocomplete-item.is-active { background: rgba(2, 163, 136, 0.1); }

.cms-ac-name { font-weight: 600; font-size: 0.85rem; color: #1e293b; }
.cms-ac-meta { font-size: 0.75rem; color: #64748b; }

/* The matched part of the name or number. Tinted rather than the browser's
   default yellow <mark>, which fights the CMS palette; weight carries the
   emphasis so it still reads when the row is hovered or keyboard-active. */
.cms-ac-hit {
    background: rgba(2, 163, 136, 0.18);
    color: inherit;
    font-weight: 700;
    border-radius: 3px;
    padding: 0 1px;
}

.cms-autocomplete-empty {
    padding: 0.6rem 0.65rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    color: #94a3b8;
}

/* ---- Doctor management grid (inline editing) ---- */
.cms-doctor-grid tbody td { vertical-align: middle; padding: 0.45rem 0.4rem; }

/* Compact inputs so a wide editable row stays readable. */
.cms-grid-input {
    padding: 0.35rem 0.5rem;
    font-size: 0.78rem;
    border-radius: 8px;
    border-width: 1px;
}
.cms-grid-input:focus {
    /* Make the cell being edited unmistakable in a dense grid. */
    border-color: #02a388;
    box-shadow: 0 0 0 3px rgba(2, 163, 136, 0.12);
    position: relative;
    z-index: 1;
}

/* The add-new row sits at the top and reads as distinct from saved rows. */
.cms-doctor-newrow > td {
    background: rgba(2, 163, 136, 0.06);
    border-top: 2px solid rgba(2, 163, 136, 0.35);
    border-bottom: 2px solid rgba(2, 163, 136, 0.35);
}

/* Deactivated clinicians are muted but still editable, so keep inputs legible. */
.cms-doctor-grid tbody tr.cms-row-cancelled .cms-grid-input { opacity: 1; }

@media (max-width: 768px) {
    .cms-grid-input { font-size: 16px; }  /* stop iOS zooming on focus */
}

/* ==================================================================
   RESPONSIVE DATA TABLES  —  stacked cards on narrow screens
   ==================================================================
   Every CMS screen is a wide table in an `overflow-x:auto` box. That
   turns reading one appointment into a horizontal scrub on a phone,
   and on /cms/doctors — 14 editable columns, ~1740px of min-width —
   into a horizontal scrub on a laptop as well.

   Below 900px each row becomes its own card and each cell is labelled
   with its column heading. `data-label` is written onto the cells by
   assets/js/cms-tables.js, read from the table's own <thead>, so the
   labels cannot drift from the headings.

   The table markup is unchanged: same <table>, same cells, same form
   fields and same submitted values. Only the display roles change.
   ================================================================== */

@media (max-width: 900px) {
    /* The horizontal scroll box has nothing left to scroll. Releasing
       it also stops it clipping focus rings and dropdowns. */
    .cms-card > div[style*="overflow-x"],
    div[style*="overflow-x:auto"],
    div[style*="overflow-x: auto"] {
        overflow-x: visible !important;
    }

    .cms-table,
    .cms-table tbody,
    .cms-table tr,
    .cms-table td {
        display: block;
        width: auto;
    }

    /* Headings are carried by each cell's data-label now. Hidden this
       way rather than display:none so it stays in the a11y tree. */
    .cms-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .cms-table tbody tr {
        position: relative;
        margin: 0 0 0.75rem;
        padding: 0.35rem 0.9rem 0.5rem;
        background: #fff;
        border: 1px solid #e9edf3;
        border-radius: 14px;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
    }
    .cms-table tbody tr:last-child { margin-bottom: 0; }
    .cms-table tbody tr:hover { background: #fff; }

    /* Label left, value right — a scannable two-column card. */
    .cms-table tbody td {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.5rem 0;
        border-bottom: 1px solid #f4f6f9;
        text-align: right;
        min-height: 0;
    }
    .cms-table tbody tr td:last-child { border-bottom: none; }
    .cms-table tbody tr:last-child td { border-bottom: 1px solid #f4f6f9; }
    .cms-table tbody tr:last-child td:last-child { border-bottom: none; }

    .cms-table tbody td::before {
        content: attr(data-label);
        flex: 0 0 38%;
        text-align: left;
        font-family: 'DM Sans', sans-serif;
        font-size: 0.68rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        color: #94a3b8;
        padding-top: 0.15rem;
    }

    /* The first labelled cell is the row's identity — give it weight. */
    .cms-table tbody td:first-child {
        font-size: 0.95rem;
        font-weight: 600;
        color: #0f172a;
        padding-top: 0.6rem;
    }

    /* Cells with no heading (action columns) use the full card width. */
    .cms-table tbody td.cms-cell-nolabel { text-align: left; }
    .cms-table tbody td.cms-cell-nolabel::before { content: none; }

    /* An empty cell would otherwise render as a label and nothing else. */
    .cms-table tbody td.cms-cell-empty::after {
        content: '—';
        color: #cbd5e1;
    }

    /* Inputs take all the width the label does not — the whole point of
       leaving the grid behind. A 62%-capped input truncated values like
       "MBBS, MD (Psychiatry)" for no reason. */
    .cms-table tbody td .cms-form-control,
    .cms-table tbody td .cms-grid-input,
    .cms-table tbody td input,
    .cms-table tbody td select,
    .cms-table tbody td textarea {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        max-width: none;
        text-align: left;
    }
    /* Narrower label leaves more room for the value. */
    .cms-table tbody td::before { flex: 0 0 33%; }

    /* A cell holding action buttons becomes a full-width block: label on
       its own line, buttons in a normal wrapping row underneath. Laid
       out inline they staircased down the right edge. */
    .cms-table tbody td:has(.cms-actions),
    .cms-table tbody td.cms-cell-actions {
        flex-wrap: wrap;
        text-align: left;
    }
    .cms-table tbody td:has(.cms-actions)::before,
    .cms-table tbody td.cms-cell-actions::before {
        flex: 0 0 100%;
        margin-bottom: 0.4rem;
    }
    .cms-table tbody td .cms-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
        width: 100%;
        justify-content: flex-start;
    }
    .cms-table tbody td .cms-btn {
        min-height: 40px;
        padding-inline: 0.85rem;
    }
    .cms-table tbody td.cms-cell-nolabel .cms-actions {
        justify-content: flex-start;
        width: 100%;
        padding-top: 0.15rem;
    }

    /* The row-state accents are top borders in card form — an inset
       shadow on "first cell" means nothing once cells are stacked. */
    .cms-table tbody tr.cms-row-attention {
        border-left: 3px solid #f59e0b;
        background: #fffdf7;
    }
    .cms-table tbody tr.cms-row-attention td:first-child { box-shadow: none; }
    .cms-table tbody tr.cms-row-now {
        border-left: 3px solid #02a388;
        background: #f6fffd;
    }
    .cms-table tbody tr.cms-row-now td:first-child { box-shadow: none; }
    .cms-table tbody tr.cms-row-cancelled { opacity: 0.62; }

    /* The doctors grid is the densest table; give its cards more room
       and drop the compact-grid padding meant for a spreadsheet. */
    .cms-doctor-grid tbody td { padding: 0.5rem 0; }
    .cms-doctor-newrow > td {
        background: transparent;
        border-top: none;
        border-bottom: 1px solid #f4f6f9;
    }
    .cms-doctor-grid tbody tr.cms-doctor-newrow {
        border: 2px solid rgba(2, 163, 136, 0.4);
        background: rgba(2, 163, 136, 0.04);
    }
}

/* Comfortable tap targets and no iOS zoom-on-focus for the controls
   that sit outside tables too. 16px is the threshold Safari uses. */
@media (max-width: 900px) {
    .cms-btn { min-height: 42px; }
    .cms-btn-sm { min-height: 38px; }
    .cms-form-control { font-size: 16px; min-height: 44px; }
}

/* ==================================================================
   PAGE HEADER
   ==================================================================
   Every CMS page previously began straight at its content, so the only
   indication of where you were was which nav tab looked active. */
.cms-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.1rem;
}
.cms-page-title {
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 1.35rem;
    color: #0f172a;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.55rem;
}
.cms-page-title i { color: #02a388; font-size: 1.1rem; }
.cms-page-sub {
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    color: #64748b;
    margin: 0.25rem 0 0;
    max-width: 60ch;
    line-height: 1.5;
}
.cms-page-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

@media (max-width: 900px) {
    .cms-page-title { font-size: 1.15rem; }
    .cms-page-actions { width: 100%; }
    .cms-page-actions .cms-btn { flex: 1; justify-content: center; }
}

/* ---- Doctors grid: column density control ----
   The full 14-column grid carries ~1740px of min-width, which
   side-scrolls on a laptop. The six least-edited fields are hidden by
   default and restored by the toolbar toggle. Scoped above the card
   breakpoint only — in card view there is room for everything, and
   hiding fields there would just lose data. */
@media (min-width: 901px) {
    .cms-doctor-grid:not(.cms-show-detail) .cms-col-detail { display: none; }
}

.cms-grid-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.85rem;
}
.cms-grid-toolbar-note {
    font-family: 'Inter', sans-serif;
    font-size: 0.74rem;
    color: #94a3b8;
}

@media (max-width: 900px) {
    /* Everything shows in card view, so the control has nothing to do. */
    .cms-grid-toolbar { display: none; }
}

/* ---- Signed-in identity in the header ---- */
.cms-whoami {
    display:flex; flex-direction:column; line-height:1.2;
    text-align:right; flex-shrink:0; cursor:default;
}
.cms-whoami-name {
    font-family:'DM Sans',sans-serif; font-size:0.8rem; font-weight:600; color:#fff;
}
.cms-whoami-role {
    font-family:'Inter',sans-serif; font-size:0.66rem; color:rgba(214,247,240,0.55);
}
@media (max-width:900px) {
    /* The name is the useful half on a phone; the scope line is not worth
       the vertical space in a header that is already condensing. */
    .cms-whoami { text-align:left; }
    .cms-whoami-role { display:none; }
}

/* ---- Checkbox group (branch scope picker) ---- */
.cms-checkgroup { display:flex; flex-wrap:wrap; gap:0.5rem; }
.cms-check {
    display:inline-flex; align-items:center; gap:0.45rem;
    padding:0.5rem 0.75rem; border:1.5px solid #e2e8f0; border-radius:10px;
    background:#fff; cursor:pointer; min-height:44px;
    font-family:'Inter',sans-serif; font-size:0.82rem; color:#334155;
}
.cms-check:hover { border-color:#02a388; }
.cms-check input { width:16px; height:16px; accent-color:#02a388; }
.cms-check small { color:#94a3b8; margin-left:0.2rem; }