/* ============================================================
   CUSTOMER CARE PORTAL - THEME

   One stylesheet for the whole portal (replaces site.css page by
   page). Loaded AFTER Materialize.

   House rules for this file:
     1. Every color, radius and shadow comes from the variables in
        section 1. Change a color there and it changes everywhere.
     2. Each selector is written ONCE. To change something, edit its
        rule; do not add a second rule further down.
     3. No !important. If Materialize wins, make the selector more
        specific (and leave a comment saying which Materialize rule).
        Only exception: where Materialize ITSELF uses !important
        (marked EXCEPTION in this file).
     4. Sections run general -> specific:
          1 variables, 2 base, 3 shell, 4 shared components,
          5 pages (one labeled block per page), 6 responsive, 7 printing.
     5. The mobile breakpoint is 1024px (static/js/site.js uses the
        same number to open/close the drawer).
   ============================================================ */


/* ============================================================
   1. VARIABLES
   ============================================================ */

:root {
    /* Backgrounds, darkest to lightest */
    --cc-bg-page:        #0a0f13;   /* main content area          */
    --cc-bg:             #0d1114;   /* body / layout              */
    --cc-bg-sidebar:     #101519;
    --cc-bg-topbar:      #11171b;
    --cc-bg-drawer:      #151b20;   /* sidebar when it slides in  */
    --cc-bg-raised:      #1b2227;   /* dropdown panels            */
    --cc-bg-table-head:  #1b242a;
    --cc-bg-hover:       #222b31;   /* hovered / active nav item  */
    --cc-bg-avatar:      #344249;

    /* Panel gradient */
    --cc-panel-top:      #171e23;
    --cc-panel-bottom:   #13191e;

    /* Lines */
    --cc-line:           #222b31;   /* dividers inside panels     */
    --cc-line-strong:    #2d363d;   /* top bar / sidebar edges    */
    --cc-line-menu:      #38434a;

    /* Text */
    --cc-text-strong:    #ffffff;
    --cc-text:           #eef4f0;
    --cc-text-body:      #e6ece8;
    --cc-text-soft:      #d7dee2;
    --cc-text-muted:     #b9c3c9;
    --cc-text-faint:     #a3adb3;
    --cc-text-dim:       #7f8d85;

    /* Accent families: [main color, border, icon circle, gradient start] */
    --cc-green:          #72e39a;
    --cc-green-border:   #2b6b44;
    --cc-green-circle:   #19472b;
    --cc-green-tint:     #11291c;

    --cc-gold:           #ffd266;
    --cc-gold-border:    #665522;
    --cc-gold-circle:    #50431d;
    --cc-gold-tint:      #2b2817;

    --cc-blue:           #65c4ff;
    --cc-blue-border:    #31566a;
    --cc-blue-circle:    #18394d;
    --cc-blue-tint:      #142631;

    --cc-slate:          #d6dfe3;
    --cc-slate-border:   #3f4d54;
    --cc-slate-circle:   #354248;
    --cc-slate-tint:     #20292d;

    --cc-purple:         #c4a7ff;
    --cc-purple-border:  #4f3f75;
    --cc-purple-circle:  #33284f;
    --cc-purple-tint:    #1e1830;

    --cc-red:            #ff8a8a;
    --cc-clock-hand:     #e8435f;   /* analog clock hour hand     */
    --cc-red-border:     #7a3434;
    --cc-red-circle:     #4a1d20;
    --cc-red-tint:       #2a1517;
    --cc-red-text:       #ffd6d6;   /* text on a red background */

    /* Shape */
    --cc-radius:         9px;
    --cc-radius-small:   7px;
    --cc-shadow-topbar:  0 8px 18px rgba(0, 0, 0, 0.34), 0 2px 4px rgba(0, 0, 0, 0.22);
    --cc-shadow-footer:  0 -8px 18px rgba(0, 0, 0, 0.34), 0 -2px 4px rgba(0, 0, 0, 0.22);   /* the top bar's shadow, pointing up */
    --cc-shadow-menu:    0 8px 24px rgba(0, 0, 0, 0.22);

    /* Type */
    --cc-font:           "Segoe UI", Arial, sans-serif;

    /* Shell sizes */
    --cc-topbar-height:  80px;
    --cc-sidebar-width:  258px;
}


/* ============================================================
   2. BASE
   ============================================================ */

html {
    min-height: 100%;
    background: var(--cc-bg);
    overflow-x: hidden;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--cc-bg);
    color: var(--cc-text);
    font-family: var(--cc-font);
    overflow-x: hidden;
}

/* Materialize: a { color: #039be5 } */
a {
    color: inherit;
}


/* ============================================================
   3. SHELL: top bar, user menu, sidebar, main area, footer
   ============================================================ */

/* ---------- 3a. Top bar ---------- */

/* Materialize: nav { height: 64px; line-height: 64px; background: pink } */
nav.portal-topbar {
    position: relative;
    z-index: 20;
    flex: 0 0 auto;
    height: var(--cc-topbar-height);
    line-height: normal;
    background: var(--cc-bg-topbar);
    border-bottom: 1px solid var(--cc-line-strong);
    box-shadow: var(--cc-shadow-topbar);
    color: var(--cc-text);
}

.portal-topbar-inner {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 22px;
}

/* The logo: same in the top bar and the phone/tablet drawer */
.portal-brand {
    display: flex;
    align-items: center;
    color: #f2f6f3;
}

.portal-topbar .portal-brand {
    height: 100%;
}

/* flex: 0 0 auto = keep its size, never squeezed on narrow screens */
.portal-brand-mark {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    overflow: hidden;
}

.portal-brand-mark-img {
    display: block;
    width: 48px;
    height: 48px;
}

.portal-brand-divider {
    flex: 0 0 auto;
    display: block;
    width: 1px;
    height: 40px;
    margin: 0 16px;
    background: #475159;
}

.portal-brand-wordmark {
    display: flex;
    align-items: baseline;
    gap: 6px;
    /* px, not rem: Materialize makes rem smaller on small screens,
       and the logo should be the same size everywhere */
    font-size: 17.7px;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.portal-brand-wordmark strong {
    font-weight: 700;
}

.portal-brand-wordmark span {
    color: #d4dbe0;
}

/* The bell (templates/partials/navbar.html, static/js/bell.js):
   a <details> like the user menu, so it opens and closes on its own */
.portal-bell {
    position: absolute;
    top: 19px;
    right: 240px;
    z-index: 5100;
}

.portal-bell-trigger {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    color: #c8d0d5;
    list-style: none;
    cursor: pointer;
}

.portal-bell-trigger::-webkit-details-marker {
    display: none;
}

.portal-bell-trigger:hover,
.portal-bell[open] .portal-bell-trigger {
    background: var(--cc-bg-hover);
    color: var(--cc-text-strong);
}

/* Materialize: nav i.material-icons { height: 64px; line-height: 64px } */
.portal-topbar .portal-bell-trigger .material-icons {
    height: auto;
    font-size: 25px;
    line-height: 1;
}

/* The number of questions waiting, on the bell's top-right corner */
.portal-bell-count {
    position: absolute;
    top: 2px;
    right: 0;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 10px;
    background: var(--cc-gold);
    color: #1a1a1a;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 19px;
    text-align: center;
}

.portal-bell-panel {
    position: absolute;
    top: 50px;
    right: -6px;
    width: 340px;
    padding: 14px 0 8px;
    border: 1px solid var(--cc-line-menu);
    border-radius: var(--cc-radius-small);
    background: var(--cc-bg-raised);
    box-shadow: var(--cc-shadow-menu);
    color: var(--cc-text);
}

.portal-bell-heading {
    padding: 0 16px 10px;
    border-bottom: 1px solid var(--cc-line-menu);
    color: var(--cc-text-faint);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.portal-bell-list {
    max-height: 360px;
    overflow-y: auto;
}

/* One waiting question: subject, then facility / who / when */
.portal-bell-item {
    display: block;
    padding: 10px 16px;
    border-bottom: 1px solid var(--cc-line);
    color: var(--cc-text);
    line-height: 1.35;
}

.portal-bell-item:hover,
.portal-bell-item:focus {
    background: var(--cc-bg-hover);
}

.portal-bell-subject {
    color: var(--cc-text-strong);
    font-weight: 650;
}

.portal-bell-meta {
    margin-top: 2px;
    color: var(--cc-text-faint);
    font-size: 0.8rem;
}

.portal-bell-empty {
    padding: 14px 16px;
    color: var(--cc-text-muted);
    font-size: 0.88rem;
}

.portal-bell-all {
    display: block;
    padding: 10px 16px 4px;
    color: var(--cc-green);
    font-size: 0.86rem;
    font-weight: 700;
}


/* ---------- 3b. User menu (top right) ---------- */

.portal-desktop-user-menu {
    position: absolute;
    top: 18px;
    right: 28px;
    z-index: 5100;
    color: var(--cc-text);
}

.portal-desktop-user-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 0 8px 0 4px;
    border-radius: var(--cc-radius-small);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22);
    color: #e3ebe6;
    list-style: none;
    cursor: pointer;
}

.portal-desktop-user-trigger::-webkit-details-marker {
    display: none;
}

.portal-user-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--cc-bg-avatar);
    font-size: 0.8rem;
    font-weight: 600;
}

.portal-user-trigger-name {
    max-width: 150px;
    overflow: hidden;
    font-size: 0.86rem;
    font-weight: 500;
    white-space: nowrap;
}

.portal-user-trigger-chevron.material-icons {
    font-size: 18px;
    line-height: 18px;
}

.portal-desktop-user-panel {
    position: absolute;
    top: 50px;
    right: 0;
    width: 260px;
    padding: 16px;
    border: 1px solid var(--cc-line-menu);
    border-radius: var(--cc-radius-small);
    background: var(--cc-bg-raised);
    box-shadow: var(--cc-shadow-menu);
    color: #f1f4f5;
}

.portal-desktop-user-name {
    color: var(--cc-text-strong);
    font-weight: 700;
}

.portal-desktop-user-email {
    margin-top: 3px;
    color: var(--cc-text-faint);
    font-size: 0.82rem;
}

.portal-desktop-user-divider {
    height: 1px;
    margin: 13px 0;
    background: #343e44;
}

.portal-desktop-user-panel a {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    color: var(--cc-text-strong);
    font-weight: 700;
}


/* ---------- 3c. Layout: sidebar + main side by side ---------- */

/* Materialize: .row { margin-bottom: 20px } */
.row.portal-layout {
    display: flex;
    align-items: stretch;
    flex: 1 0 auto;
    width: 100%;
    margin: 0;
    background: var(--cc-bg);
}

/* Materialize: .row .col.m3 { width: 25%; float: left } */
.row .col.portal-sidebar {
    position: relative;
    flex: 0 0 var(--cc-sidebar-width);
    width: var(--cc-sidebar-width);
    float: none;
    padding: 20px 12px 110px;
    background: var(--cc-bg-sidebar);
    border-right: 1px solid var(--cc-line-strong);
    color: var(--cc-text);
}

/* Materialize: .row .col.m9 { width: 75%; float: left } */
.row .col.portal-main {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    float: none;
    padding: 0;
    background: var(--cc-bg-page);
    color: var(--cc-text);
}

.portal-mobile-sidebar-header,
.portal-mobile-menu-button,
.portal-sidebar-overlay {
    display: none;
}


/* ---------- 3d. Sidebar links ---------- */

/* Materialize: nav { height: 64px; background: pink; box-shadow } */
nav.portal-side-nav {
    height: auto;
    line-height: normal;
    background: transparent;
    box-shadow: none;
}

.portal-side-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 52px;
    height: 56px;
    margin-bottom: 3px;
    padding: 0 18px;
    border-radius: var(--cc-radius-small);
    color: var(--cc-text-muted);
    font-size: 0.96rem;
}

.portal-side-link:hover {
    background: var(--cc-bg-hover);
    color: var(--cc-text-strong);
}

.portal-side-link.active {
    background: var(--cc-bg-hover);
    color: var(--cc-text-strong);
}

/* White bar on the left edge of the current page's link */
.portal-side-link.active::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -12px;
    width: 5px;
    background: var(--cc-text-strong);
}

/* Materialize: nav i.material-icons { height: 64px; line-height: 64px } */
nav.portal-side-nav .portal-side-link .material-icons {
    height: auto;
    color: #a5b0b7;
    font-size: 22px;
    line-height: 1;
}

nav.portal-side-nav .portal-side-link.active .material-icons {
    color: var(--cc-text-strong);
}


/* ---------- 3e. Flash messages ---------- */

.portal-flash-stack {
    padding: 16px 36px 0;
}

/* Each message is a cc-alert (4h); base.html picks the color */
.portal-flash {
    margin: 0 0 10px;
}


/* ---------- 3f. Footer ---------- */

/* position + z-index keep the shadow on top of the page and sidebar */
.portal-footer {
    position: relative;
    z-index: 20;
    flex: 0 0 auto;
    padding: 16px 30px;
    border-top: 1px solid var(--cc-line-strong);
    background: var(--cc-bg-topbar);
    box-shadow: var(--cc-shadow-footer);
    color: var(--cc-text-dim);
    font-size: 0.9rem;
    text-align: center;
}


/* ============================================================
   4. SHARED COMPONENTS
   (stat cards, panels, tables - reused by every page)
   ============================================================ */

/* ---------- 4a. Stat card (the five colored cards on the dashboard) ---------- */

.briefing-kpi {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--accent-border);
    border-radius: var(--cc-radius);
    background: linear-gradient(145deg, var(--accent-tint), #151f19);
    color: #f3f6f4;
}

.briefing-kpi-main {
    position: relative;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: start;
    gap: 16px;
    flex: 1 1 auto;
    min-height: 143px;
    padding: 19px 18px 15px;
}

.briefing-kpi-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: var(--accent-circle);
}

.briefing-kpi-icon .material-icons {
    color: var(--accent);
    font-size: 30px;
}

.briefing-kpi-number {
    margin-bottom: 3px;
    color: var(--cc-text-strong);
    font-size: 30px;
    font-weight: 650;
    line-height: 1;
}

.briefing-kpi-title {
    margin-bottom: 7px;
    color: var(--cc-text-strong);
    font-size: 0.96rem;
    font-weight: 600;
}

.briefing-kpi-copy {
    max-width: 180px;
    color: #aab5ae;
    font-size: 0.77rem;
    line-height: 1.4;
}

/* A card that opens another page (Replies Waiting): room for the arrow */
.briefing-kpi-link .briefing-kpi-main {
    grid-template-columns: 58px minmax(0, 1fr) 22px;
}

.briefing-kpi-arrow.material-icons {
    align-self: center;
    color: var(--accent);
    font-size: 26px;
}

.briefing-kpi-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 42px;
    padding: 0 16px;
    border-top: 1px solid var(--cc-line);
    color: var(--cc-text-soft);
    font-size: 0.76rem;
    font-weight: 500;
}

.briefing-kpi-action .material-icons {
    font-size: 17px;
}


/* ---------- 4b. Panel (dark box with a header and a table) ---------- */

.briefing-panel {
    overflow: hidden;
    border: 1px solid var(--accent-border);
    border-radius: var(--cc-radius);
    background: linear-gradient(var(--cc-panel-top), var(--cc-panel-bottom));
    color: var(--cc-text-body);
}

/* A stat card links down to its panel: land a little below the top edge,
   no browser focus ring (the flash below shows where you landed) */
.briefing-panel {
    scroll-margin-top: 16px;
}

.briefing-panel:focus {
    outline: none;
}

/* Brief glow in the panel's own color after jumping to it */
.briefing-panel-flash {
    animation: briefing-panel-flash 1.6s ease-out;
}

@keyframes briefing-panel-flash {
    0%,
    35% {
        box-shadow: 0 0 0 2px var(--accent), 0 0 22px var(--accent-border);
    }

    100% {
        box-shadow: 0 0 0 0 transparent;
    }
}

@media (prefers-reduced-motion: reduce) {
    .briefing-panel-flash {
        animation: none;
        box-shadow: 0 0 0 2px var(--accent);
    }
}

.briefing-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
    padding: 0 16px;
    border-bottom: 1px solid var(--cc-line);
}

.briefing-panel-title {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--cc-text);
    font-size: 1.05rem;
    font-weight: 600;
}

.briefing-panel-title .material-icons {
    color: var(--accent);
    font-size: 23px;
}

.briefing-view-all {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--cc-text-soft);
    font-size: 0.74rem;
}

.briefing-view-all .material-icons {
    font-size: 16px;
}


/* ---------- 4c. Accent colors (add one of these next to a card, panel, stat or pill) ---------- */

.briefing-kpi-green,
.briefing-panel-green,
.cc-accent-green {
    --accent: var(--cc-green);
    --accent-border: var(--cc-green-border);
    --accent-circle: var(--cc-green-circle);
    --accent-tint: var(--cc-green-tint);
}

.briefing-kpi-gold,
.briefing-panel-gold,
.cc-accent-gold {
    --accent: var(--cc-gold);
    --accent-border: var(--cc-gold-border);
    --accent-circle: var(--cc-gold-circle);
    --accent-tint: var(--cc-gold-tint);
}

.briefing-kpi-blue,
.briefing-panel-blue,
.cc-accent-blue {
    --accent: var(--cc-blue);
    --accent-border: var(--cc-blue-border);
    --accent-circle: var(--cc-blue-circle);
    --accent-tint: var(--cc-blue-tint);
}

.briefing-kpi-slate,
.briefing-panel-slate,
.cc-accent-slate {
    --accent: var(--cc-slate);
    --accent-border: var(--cc-slate-border);
    --accent-circle: var(--cc-slate-circle);
    --accent-tint: var(--cc-slate-tint);
}

.briefing-kpi-purple,
.briefing-panel-purple,
.cc-accent-purple {
    --accent: var(--cc-purple);
    --accent-border: var(--cc-purple-border);
    --accent-circle: var(--cc-purple-circle);
    --accent-tint: var(--cc-purple-tint);
}

.briefing-kpi-red,
.briefing-panel-red,
.cc-accent-red {
    --accent: var(--cc-red);
    --accent-border: var(--cc-red-border);
    --accent-circle: var(--cc-red-circle);
    --accent-tint: var(--cc-red-tint);
}


/* ---------- 4d. Table ---------- */

/* Lists scroll up and down only; long text wraps instead of making
   the panel scroll sideways */
.briefing-table-wrap {
    padding: 7px 12px 11px;
    overflow-x: hidden;
    overflow-y: auto;
}

.briefing-table {
    color: #e2e9e5;
}

.briefing-table thead {
    background: var(--cc-bg-table-head);
}

/* Materialize: tr { border-bottom: 1px solid rgba(0,0,0,.12) } */
.briefing-table tr {
    border-bottom: 1px solid var(--cc-line);
}

/* Materialize: td, th { padding: 15px 5px } */
.briefing-table th,
.briefing-table td {
    padding: 9px 10px;
    font-size: 0.76rem;
}

/* Free text (medication, question) may break inside a long word, so
   one long name can't push the table wider than its panel */
.briefing-table .briefing-cell-wrap {
    overflow-wrap: anywhere;
}

.briefing-table th {
    color: #bec8c2;
    line-height: 1.15;
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: uppercase;
}

.briefing-table td a {
    color: var(--cc-blue);
}

.briefing-table .briefing-empty-row {
    border-bottom: 0;
}

.briefing-table .briefing-empty-row td {
    height: 108px;
    color: var(--cc-text-dim);
    text-align: center;
}


/* ---------- 4e. Card (Materialize .card, used for forms) ---------- */

/* Materialize: .card { background-color: #fff; border-radius: 2px } */
.card {
    border: 1px solid var(--cc-line-strong);
    border-radius: var(--cc-radius);
    background: linear-gradient(var(--cc-panel-top), var(--cc-panel-bottom));
    box-shadow: none;
    color: var(--cc-text);
}

.card .card-content .card-title {
    color: var(--cc-text-strong);
    font-size: 1.35rem;
    font-weight: 600;
}


/* ---------- 4f. Form fields (Materialize .input-field) ---------- */

/* Materialize: input[type=email]:not(.browser-default) { border-bottom: 1px solid #9e9e9e }
   Same specificity, and this file loads later, so these win. */
.input-field > input:not(.browser-default),
.input-field > textarea.materialize-textarea {
    background-color: transparent;
    border-bottom: 1px solid #5b6870;
    color: var(--cc-text-strong);
    caret-color: var(--cc-text-strong);
}

/* Materialize: .input-field > label { color: #9e9e9e } */
.input-field > label {
    color: var(--cc-text-faint);
}

/* Materialize: input[...]:not(.browser-default):focus:not([readonly]) { teal underline } */
.input-field > input:not(.browser-default):focus:not([readonly]),
.input-field > textarea.materialize-textarea:focus:not([readonly]) {
    border-bottom: 1px solid var(--cc-green);
    box-shadow: 0 1px 0 0 var(--cc-green);
}

.input-field > input:not(.browser-default):focus:not([readonly]) + label,
.input-field > textarea.materialize-textarea:focus:not([readonly]) + label {
    color: var(--cc-green);
}

/* Browser autofill (saved email/password) paints its own light background
   and dark text. Keep it dark with white text. */
.input-field > input:-webkit-autofill,
.input-field > input:-webkit-autofill:hover,
.input-field > input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--cc-text-strong);
    box-shadow: 0 0 0 1000px var(--cc-bg-raised) inset;
    transition: background-color 9999s ease-out;
}


/* ---------- 4g. Buttons ---------- */

/* Materialize: .btn { background-color: teal } and .btn:focus { darker teal } */
.btn,
.btn:focus {
    height: 40px;
    padding: 0 18px;
    border: 1px solid var(--cc-line-strong);
    border-radius: var(--cc-radius-small);
    background-color: #000000;
    box-shadow: none;
    color: var(--cc-text-strong);
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 38px;
    letter-spacing: 0.04em;
}

.btn:hover {
    border-color: var(--cc-green-border);
    background-color: var(--cc-green-circle);
    color: var(--cc-text-strong);
}

/* Materialize: .btn-flat { color: #343434 } */
.btn-flat {
    color: var(--cc-text-muted);
}

.btn-flat:hover,
.btn-flat:focus {
    background-color: var(--cc-bg-hover);
    color: var(--cc-text-strong);
}


/* ---------- 4h. Text helpers and alert boxes ----------
   Use these instead of Materialize color helpers such as
   "grey-text text-darken-1" or "red lighten-5": those use !important
   and are made for a white page. */

.cc-muted {
    color: var(--cc-text-muted);
}

/* Small text link with an arrow, like the dashboard's "View All ->".
   Markup: <a class="cc-action-link"><span>Text</span><i class="material-icons">arrow_forward</i></a>
   For a back link put the icon first and use arrow_back. */
.cc-action-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    color: var(--cc-text-soft);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    transition: color 150ms ease;
}

.cc-action-link .material-icons {
    font-size: 16px;
    transition: transform 150ms ease;
}

.cc-action-link:hover,
.cc-action-link:focus-visible {
    color: var(--cc-green);
}

/* The arrow nudges in the direction it points */
.cc-action-link:hover .material-icons:last-child {
    transform: translateX(3px);
}

.cc-action-link:hover .material-icons:first-child:not(:last-child) {
    transform: translateX(-3px);
}

.cc-action-link:focus-visible {
    outline: 2px solid var(--cc-green-border);
    outline-offset: 3px;
    border-radius: 4px;
}

.cc-alert {
    padding: 12px 16px;
    border: 1px solid var(--cc-line-strong);
    border-radius: var(--cc-radius-small);
    background: var(--cc-bg-raised);
    color: var(--cc-text);
}

.cc-alert-error {
    border-color: var(--cc-red-border);
    background: var(--cc-red-tint);
    color: var(--cc-red-text);
}


/* ---------- 4i. Page header (title, breadcrumb, intro line) ----------
   Markup: <div class="cc-page"> ... <div class="row cc-page-header"> */

.cc-page {
    padding: 28px 36px 46px;
    color: var(--cc-text-body);
}

/* Materialize: h4 { font-size: 2.28rem; margin: 1.52rem 0 .912rem } */
.cc-page-header h4 {
    margin: 0 0 6px;
    color: var(--cc-text-strong);
    font-size: 2rem;
    font-weight: 650;
    letter-spacing: -0.03em;
}

.cc-page-header p {
    margin: 10px 0 0;
}

.portal-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    color: var(--cc-text-dim);
    font-size: 0.8rem;
}

.portal-breadcrumb a {
    color: var(--cc-text-soft);
}

.portal-breadcrumb a:hover {
    color: var(--cc-green);
}


/* ---------- 4j. More form fields: dates, read-only, disabled ---------- */

/* Makes the browser draw the date picker and its calendar icon dark */
.input-field > input[type="date"] {
    color-scheme: dark;
}

/* Materialize: input[type=text]:not(.browser-default):disabled { color: rgba(0,0,0,.42) } */
.input-field > input:not(.browser-default):disabled,
.input-field > input:not(.browser-default)[readonly] {
    border-bottom: 1px dotted #5b6870;
    color: var(--cc-text-muted);
}


/* ---------- 4k. Disabled buttons ---------- */

/* EXCEPTION to house rule 3. Materialize's own rule here uses !important:
   .btn.disabled { background-color: #DFDFDF !important; color: #9F9F9F !important }
   The only way to beat it is another !important. */
.btn.disabled,
.btn:disabled {
    border-color: var(--cc-line);
    background-color: var(--cc-bg-hover) !important;
    color: var(--cc-text-dim) !important;
}


/* ---------- 4l. Search-as-you-type dropdown (facility / patient pickers) ---------- */

.facility-picker-results,
.patient-picker-results {
    position: absolute;
    top: 100%;
    left: 0.75rem;
    right: 0.75rem;
    z-index: 2000;
    max-height: 260px;
    overflow-y: auto;
    margin-top: -6px;
    border: 1px solid var(--cc-line-menu);
    border-radius: 0 0 var(--cc-radius-small) var(--cc-radius-small);
    background: var(--cc-bg-raised);
    box-shadow: var(--cc-shadow-menu);
}

.facility-picker-result,
.patient-picker-result {
    display: block;
    width: 100%;
    padding: 10px 14px;
    border: 0;
    border-bottom: 1px solid var(--cc-line);
    background: transparent;
    color: var(--cc-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

/* Materialize: button:focus { background-color: teal } */
.facility-picker-result:hover,
.facility-picker-result:focus,
.patient-picker-result:hover,
.patient-picker-result:focus {
    background: var(--cc-bg-hover);
    color: var(--cc-text-strong);
    outline: none;
}


/* ---------- 4m. Pop-up windows (Materialize .modal) ---------- */

/* Materialize: .modal { background-color: #fafafa; border-radius: 2px } */
.modal {
    border: 1px solid var(--cc-line-menu);
    border-radius: var(--cc-radius);
    background: var(--cc-bg-sidebar);
    color: var(--cc-text);
}

/* Materialize: .modal .modal-footer { background-color: #fafafa } */
.modal .modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    height: auto;
    padding: 12px 20px;
    border-top: 1px solid var(--cc-line);
    background: var(--cc-bg-sidebar);
}

/* Materialize: h5 { font-size: 1.64rem; margin: 1.0933rem 0 .656rem } */
.modal h5,
.cc-card-heading h5 {
    margin: 0;
    color: var(--cc-text-strong);
    font-size: 1.45rem;
    font-weight: 650;
}

/* Round "X" close button in a pop-up's top-right corner */
.cc-modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--cc-line-strong);
    border-radius: 50%;
    background: transparent;
    color: var(--cc-text-muted);
    cursor: pointer;
}

/* Materialize: button:focus { background-color: teal } */
.cc-modal-close:hover,
.cc-modal-close:focus {
    background: var(--cc-bg-hover);
    color: var(--cc-text-strong);
}

/* Title on the left, round close button on the right */
.cc-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--cc-line);
}


/* ---------- 4n. Pop-up messages (Materialize toast) ---------- */

/* Materialize: .toast { background-color: #323232; border-radius: 2px } */
.toast {
    border: 1px solid var(--cc-line-menu);
    border-radius: var(--cc-radius-small);
    background: var(--cc-bg-raised);
    box-shadow: var(--cc-shadow-menu);
    color: var(--cc-text);
    font-size: 0.95rem;
    font-weight: 400;
}


/* ---------- 4o. Primary button and hiding helper ---------- */

/* The one main action on a screen (Print, Save...). Green instead of black. */
.btn.cc-btn-primary {
    border-color: var(--cc-green-border);
    background-color: var(--cc-green-circle);
}

.btn.cc-btn-primary:hover {
    background-color: #20573a;
}

/* Used by page scripts to hide something (rx-hidden is the older name) */
.cc-hidden,
.rx-hidden {
    display: none;
}


/* ---------- 4p. Card layout helpers ---------- */

/* Card title on the left, buttons on the right */
.cc-card-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.card .card-content .cc-card-heading .card-title {
    margin-bottom: 4px;
}

/* Bottom row of a card: a link on the left, buttons on the right */
.cc-card-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--cc-line);
}

.cc-button-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.cc-button-row-end {
    justify-content: flex-end;
}

/* A repeated form or block with a thin line above each one */
.cc-divided-row {
    padding: 16px 0;
    border-top: 1px solid var(--cc-line);
}

/* Materialize: .row { margin-bottom: 20px } */
.cc-divided-row > .row {
    margin-bottom: 0;
}

/* Lines a checkbox up with the text fields beside it */
.cc-checkbox-cell {
    padding-top: 20px;
}

.cc-small {
    margin-top: 6px;
    font-size: 0.82rem;
}


/* ---------- 4q. Filter pills (Open / Closed / All) ---------- */

.cc-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 18px;
}

.cc-filter-pill {
    padding: 6px 16px;
    border: 1px solid var(--cc-line-strong);
    border-radius: 999px;
    color: var(--cc-text-soft);
    font-size: 0.85rem;
    font-weight: 600;
}

.cc-filter-pill:hover {
    border-color: var(--cc-green-border);
    color: var(--cc-text-strong);
}

.cc-filter-pill.active {
    border-color: var(--cc-green-border);
    background: var(--cc-green-circle);
    color: var(--cc-text-strong);
}

/* The same pills as <button>s, for on-page toggles.
   Materialize: button:focus { background-color: teal } */
button.cc-filter-pill,
button.cc-filter-pill:focus {
    background-color: transparent;
    font-family: inherit;
    line-height: 1.4;
    cursor: pointer;
}

button.cc-filter-pill.active,
button.cc-filter-pill.active:focus {
    background-color: var(--cc-green-circle);
}


/* ---------- 4r. Clickable list rows ----------
   cc-list-* for templates; rx-med-* are the same look, used by the
   Rx Tracker's JavaScript. */

.cc-list-row,
.rx-med-row {
    display: block;
    margin-bottom: 10px;
    padding: 14px 16px;
    border: 1px solid var(--cc-line-strong);
    border-radius: var(--cc-radius);
    background: var(--cc-bg-sidebar);
    color: var(--cc-text);
    cursor: pointer;
    transition: border-color 150ms ease, background 150ms ease;
}

.cc-list-row:hover,
.cc-list-row:focus-visible,
.rx-med-row:hover,
.rx-med-row.active {
    border-color: var(--cc-green-border);
    background: var(--cc-bg-raised);
}

.cc-list-title,
.rx-med-title {
    color: var(--cc-text-strong);
    font-size: 1rem;
    font-weight: 700;
}

.cc-list-meta,
.rx-med-subtitle {
    margin-top: 4px;
    color: var(--cc-text-muted);
    font-size: 0.86rem;
}

.cc-list-status,
.rx-med-status {
    margin-top: 6px;
    color: var(--cc-green);
    font-size: 0.86rem;
    font-weight: 600;
}

/* A list row that is a <button> (made by page scripts).
   Materialize: button:focus { background-color: teal } */
button.cc-list-row {
    width: 100%;
    font: inherit;
    text-align: left;
}

button.cc-list-row:focus {
    border-color: var(--cc-green-border);
    background: var(--cc-bg-raised);
    outline: none;
}

/* A row with a small round button on its right (cc-list-row-add) */
.cc-list-row.cc-list-row-has-action {
    position: relative;
    padding-right: 60px;
}

.cc-list-row-add {
    position: absolute;
    top: 50%;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--cc-green-border);
    border-radius: 50%;
    background: var(--cc-green-circle);
    color: var(--cc-text-strong);
    cursor: pointer;
    transform: translateY(-50%);
}

/* Materialize: button:focus { background-color: teal } */
.cc-list-row-add:hover,
.cc-list-row-add:focus {
    background: #20573a;
    outline: none;
}

.cc-list-row-add .material-icons {
    font-size: 20px;
}

/* "Selected patient: Jane Doe" line under a picker */
.cc-selected-line {
    margin-top: 8px;
    color: var(--cc-text-body);
    font-size: 0.92rem;
}

.cc-selected-line strong {
    margin-right: 4px;
    color: var(--cc-green);
}


/* ---------- 4s. Drop-down lists and checkboxes ---------- */

/* Materialize: select { background-color: rgba(255,255,255,.9); border: 1px solid #f2f2f2 }
   cc-select: the same look for a drop-down that is NOT inside .input-field */
.input-field > select.browser-default,
select.browser-default.cc-select {
    height: 3rem;
    padding: 0 10px;
    border: 1px solid var(--cc-line-menu);
    border-radius: var(--cc-radius-small);
    background-color: var(--cc-bg-raised);
    color: var(--cc-text-strong);
    color-scheme: dark;
}

.input-field > select.browser-default:focus,
select.browser-default.cc-select:focus {
    border-color: var(--cc-green-border);
    outline: none;
}

/* Materialize: label { color: #9e9e9e } and a dark grey checkbox outline */
label > [type="checkbox"] + span:not(.lever) {
    color: var(--cc-text);
}

label > [type="checkbox"]:not(:checked) + span:not(.lever)::before {
    border-color: var(--cc-text-faint);
}

/* Materialize: teal tick when checked */
label > [type="checkbox"]:checked + span:not(.lever)::before {
    border-right-color: var(--cc-green);
    border-bottom-color: var(--cc-green);
}

/* Radio buttons (pick one): Materialize draws them teal on grey */
label > [type="radio"] + span {
    color: var(--cc-text);
}

label > [type="radio"]:not(:checked) + span::before {
    border-color: var(--cc-text-faint);
}

/* Materialize: [type="radio"].with-gap:checked + span { teal ring and dot } */
label > [type="radio"]:checked + span::after,
label > [type="radio"].with-gap:checked + span::before,
label > [type="radio"].with-gap:checked + span::after {
    border-color: var(--cc-green);
}

label > [type="radio"]:checked + span::after,
label > [type="radio"].with-gap:checked + span::after {
    background-color: var(--cc-green);
}


/* ---------- 4t. More buttons and alerts ---------- */

/* Materialize: .btn-small { height: 32.4px; font-size: 13px } */
.btn.btn-small {
    height: 32px;
    padding: 0 14px;
    font-size: 0.78rem;
    line-height: 30px;
}

/* For actions that undo or reopen something */
.btn.cc-btn-warning {
    border-color: var(--cc-gold-border);
    background-color: var(--cc-gold-circle);
}

.btn.cc-btn-warning:hover {
    background-color: #6a5826;
}

/* For actions that delete something */
.btn.cc-btn-danger {
    border-color: var(--cc-red-border);
    background-color: var(--cc-red-circle);
}

.btn.cc-btn-danger:hover {
    background-color: #64262a;
}

/* Text-only button for Delete and similar */
.btn-flat.cc-btn-danger-text {
    color: var(--cc-red);
}

.btn-flat.cc-btn-danger-text:hover {
    background-color: var(--cc-red-tint);
    color: var(--cc-red-text);
}

.cc-alert-success {
    border-color: var(--cc-green-border);
    background: var(--cc-green-tint);
    color: #c9f5d8;
}

/* Alerts inside a card need space below them */
.card .cc-alert {
    margin-bottom: 16px;
}


/* ---------- 4u. Data table (file lists and other plain tables) ----------
   Markup: <div class="cc-table-wrap"><table class="cc-table"> ...
   The wrapper scrolls sideways on a narrow screen instead of squashing. */

.cc-table-wrap {
    overflow-x: auto;
}

/* A short line of explanation between a card's heading and its table.
   Materialize: .card .card-content p { margin: 0 } - hence the longer selector */
.card .card-content .cc-table-note,
.cc-table-note {
    margin: 0 0 16px;
    font-size: 0.85rem;
    line-height: 1.6;
}

/* Materialize: table, tr { border-bottom: 1px solid rgba(0,0,0,.12) } */
table.cc-table {
    color: var(--cc-text);
}

table.cc-table thead {
    background: var(--cc-bg-table-head);
}

table.cc-table tr {
    border-bottom: 1px solid var(--cc-line);
}

table.cc-table tbody tr:hover {
    background: var(--cc-bg-raised);
}

/* Materialize: td, th { padding: 15px 5px } */
table.cc-table th,
table.cc-table td {
    padding: 10px 12px;
}

table.cc-table th {
    color: #bec8c2;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Links in a cell, but not buttons (those keep their button look) */
table.cc-table td a:not(.btn):not(.btn-flat) {
    color: var(--cc-text-strong);
    font-weight: 600;
}

table.cc-table td a:not(.btn):not(.btn-flat):hover {
    color: var(--cc-green);
}

table.cc-table .cc-col-icon {
    width: 64px;
    color: var(--cc-text-faint);
}

table.cc-table .cc-col-size {
    width: 120px;
    white-space: nowrap;
}

table.cc-table .cc-col-path {
    color: var(--cc-text-muted);
    font-size: 0.85rem;
}

.cc-icon-folder {
    color: var(--cc-gold);
}

table.cc-table .cc-empty-cell {
    padding: 24px 12px;
    color: var(--cc-text-dim);
    text-align: center;
}

/* Two-line cell: name on top, smaller grey line under it */
table.cc-table .cc-cell-main {
    color: var(--cc-text-strong);
    font-weight: 600;
}

table.cc-table .cc-cell-sub {
    color: var(--cc-text-muted);
    font-size: 0.85rem;
}

table.cc-table .cc-col-number {
    text-align: center;
}

table.cc-table .cc-col-check {
    width: 48px;
}

table.cc-table .cc-col-actions {
    text-align: right;
    white-space: nowrap;
}

/* Buttons in the last column; a <form> holding a button sits inline */
.cc-table-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}

.cc-table-actions form {
    margin: 0;
}


/* ---------- 4v. Search box with a button beside it ---------- */

.cc-search-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.cc-search-form .cc-search-field {
    flex: 1 1 320px;
    margin: 0;
}

/* Materialize: .input-field .prefix { font-size: 2rem }  and teal when active */
.input-field > .prefix.material-icons {
    color: var(--cc-text-faint);
    font-size: 1.6rem;
}

.input-field > .prefix.material-icons.active {
    color: var(--cc-green);
}

.cc-search-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.cc-alert-warning {
    border-color: var(--cc-gold-border);
    background: var(--cc-gold-tint);
    color: #ffe6a6;
}


/* ---------- 4w. File preview: PDF pages, pictures, text ---------- */

.portal-pdf-viewer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

/* "Unable to preview" message spans the full width */
.portal-pdf-viewer > .cc-alert {
    align-self: stretch;
}

/* One drawn PDF page (static/js/pdf_viewer.js) */
.portal-pdf-page {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    background: #ffffff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.cc-pdf-loading {
    padding: 30px 0;
}

.portal-image-preview,
.forms-viewer-image {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    border-radius: 4px;
}

.portal-file-viewer,
.forms-viewer-iframe {
    display: block;
    width: 100%;
    height: 75vh;
    border: 1px solid var(--cc-line-strong);
    border-radius: var(--cc-radius-small);
    background: #ffffff;
}


/* ---------- 4x. Form sections (boxes that group the fields of a long form) ----------
   Markup: <div class="cc-form-grid"> two <div class="cc-form-section"> side by side,
   or a cc-form-section on its own for a full-width box. */

.cc-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 18px;
}

.cc-form-section {
    margin-bottom: 18px;
    padding: 16px 18px;
    border: 1px solid var(--cc-line-strong);
    border-left: 3px solid var(--cc-green-border);
    border-radius: var(--cc-radius-small);
    background: var(--cc-bg-sidebar);
}

.cc-form-grid > .cc-form-section {
    margin-bottom: 0;
}

.cc-form-section-title {
    margin-bottom: 12px;
    color: var(--cc-text-strong);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.cc-form-section-intro {
    margin: 0 0 14px;
    font-size: 0.9rem;
}

/* A label above a field that is not a Materialize .input-field */
.cc-field-label {
    display: block;
    margin-bottom: 8px;
    color: var(--cc-text-faint);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* An alert with an icon on its left */
.cc-icon-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.cc-icon-alert > .material-icons {
    flex: 0 0 auto;
}


/* ---------- 4y. Small stat tiles and status pills ----------
   Both take an accent class from 4c, for example:
     <div class="cc-stat cc-accent-green"> ... </div>
     <span class="cc-pill cc-accent-gold">Setup Required</span> */

.cc-stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.cc-stat {
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid var(--accent-border);
    border-radius: var(--cc-radius);
    background: linear-gradient(145deg, var(--accent-tint), var(--cc-panel-bottom));
}

.cc-stat-label {
    margin-bottom: 6px;
    color: var(--cc-text-muted);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.cc-stat-value {
    color: var(--accent);
    font-size: 1.8rem;
    font-weight: 650;
    line-height: 1.1;
}

.cc-stat-value-small {
    color: var(--cc-text-strong);
    font-size: 1rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.cc-pill {
    display: inline-block;
    padding: 2px 10px;
    border: 1px solid var(--accent-border);
    border-radius: 999px;
    background: var(--accent-tint);
    color: var(--accent);
    font-size: 0.76rem;
    font-weight: 600;
    white-space: nowrap;
}


/* ---------- 4z. Plain text box, copy row, code text ---------- */

/* For an <input class="browser-default cc-textbox">. browser-default
   turns off Materialize's underline styling so this can draw a box. */
input.browser-default.cc-textbox {
    width: 100%;
    height: 40px;
    box-sizing: border-box;
    margin: 0;
    padding: 0 12px;
    border: 1px solid var(--cc-line-menu);
    border-radius: var(--cc-radius-small);
    outline: none;
    background: var(--cc-bg-raised);
    color: var(--cc-text-strong);
    font: inherit;
}

input.browser-default.cc-textbox:focus {
    border-color: var(--cc-green-border);
}

/* Text box with a button beside it (Copy) */
.cc-copy-row {
    display: flex;
    gap: 10px;
}

.cc-copy-row > .cc-textbox {
    flex: 1 1 auto;
    min-width: 0;
}

.cc-copy-row > .btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

.cc-code,
input.browser-default.cc-textbox-code {
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.86rem;
}

.cc-code {
    color: var(--cc-text-strong);
}


/* ---------- 4aa. Filter box (type to narrow a list on the page) ----------
   Markup:
     <div class="cc-filter-bar">
         <div class="cc-filter-box">
             <i class="material-icons">search</i>
             <input class="browser-default" type="text" placeholder="...">
             <button class="cc-filter-clear" type="button"><i class="material-icons">close</i></button>
         </div>
         <div class="cc-filter-count"></div>
     </div>
   and <div class="cc-filter-empty"> for the "nothing matches" line. */

.cc-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
}

.cc-filter-box {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 320px;
    max-width: 720px;
}

.cc-filter-box > .material-icons {
    position: absolute;
    left: 10px;
    color: var(--cc-text-faint);
    font-size: 20px;
    pointer-events: none;
}

/* The input has class browser-default, so Materialize leaves it alone */
.cc-filter-box > input.browser-default {
    width: 100%;
    height: 40px;
    box-sizing: border-box;
    margin: 0;
    padding: 0 42px 0 38px;
    border: 1px solid var(--cc-line-menu);
    border-radius: var(--cc-radius-small);
    outline: none;
    background: var(--cc-bg-raised);
    color: var(--cc-text-strong);
    font: inherit;
}

.cc-filter-box > input.browser-default:focus {
    border-color: var(--cc-green-border);
}

.cc-filter-box > input.browser-default::placeholder {
    color: var(--cc-text-dim);
}

.cc-filter-clear {
    position: absolute;
    right: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--cc-text-muted);
    cursor: pointer;
    visibility: hidden;
}

/* Materialize: button:focus { background-color: teal } */
.cc-filter-clear:hover,
.cc-filter-clear:focus {
    background: var(--cc-bg-hover);
    color: var(--cc-text-strong);
}

.cc-filter-count {
    color: var(--cc-text-muted);
    font-size: 0.84rem;
    font-weight: 600;
    white-space: nowrap;
}

.cc-filter-empty {
    padding: 18px 12px;
    color: var(--cc-text-dim);
    text-align: center;
}


/* ---------- 4ab. Date picker pop-up (Materialize M.Datepicker) ----------
   The pop-up is a .modal, so 4m already makes it dark; these rules fix
   the parts Materialize colors teal or black. */

/* Materialize: .datepicker-date-display { background-color: #26a69a } */
.datepicker-modal .datepicker-date-display {
    background-color: var(--cc-green-circle);
}

/* Materialize: .datepicker-table abbr { color: #999 } */
.datepicker-modal .datepicker-table abbr {
    color: var(--cc-text-faint);
}

.datepicker-modal .datepicker-table td {
    color: var(--cc-text);
}

/* Materialize: .datepicker-table td.is-today { color: #26a69a } */
.datepicker-modal .datepicker-table td.is-today {
    color: var(--cc-green);
    font-weight: 700;
}

/* Materialize: .datepicker-table td.is-selected { background-color: #26a69a } */
.datepicker-modal .datepicker-table td.is-selected {
    background-color: var(--cc-green-border);
    color: var(--cc-text-strong);
}

/* Materialize: td.is-outside-month, td.is-disabled { color: rgba(0,0,0,.3) } */
.datepicker-modal .datepicker-table td.is-outside-month,
.datepicker-modal .datepicker-table td.is-disabled {
    color: var(--cc-text-dim);
}

/* Materialize: .datepicker-day-button:focus { background-color: rgba(43,161,150,.25) } */
.datepicker-modal .datepicker-day-button:focus {
    background-color: var(--cc-bg-hover);
}

/* Month / year drop-downs at the top */
.datepicker-modal .select-wrapper input.select-dropdown {
    color: var(--cc-text-strong);
}

/* Materialize: .dropdown-content { background-color: #fff } */
.datepicker-modal .dropdown-content {
    background-color: var(--cc-bg-raised);
}

/* Materialize: .dropdown-content li > span { color: #26a69a } */
.datepicker-modal .dropdown-content li > span {
    color: var(--cc-text);
}

/* Materialize: .dropdown-content li:hover, li.active { background-color: #eee } */
.datepicker-modal .dropdown-content li:hover,
.datepicker-modal .dropdown-content li.active,
.datepicker-modal .dropdown-content li.selected {
    background-color: var(--cc-bg-hover);
}

/* Previous / next month arrows are black SVGs */
.datepicker-modal .month-prev svg,
.datepicker-modal .month-next svg {
    fill: var(--cc-text);
}

/* Materialize: button:focus { background-color: teal } */
.datepicker-modal .month-prev:focus,
.datepicker-modal .month-next:focus {
    background-color: var(--cc-bg-hover);
}

/* Materialize: .datepicker-cancel, .datepicker-done ... { color: #26a69a } */
.datepicker-modal .datepicker-cancel,
.datepicker-modal .datepicker-clear,
.datepicker-modal .datepicker-today,
.datepicker-modal .datepicker-done {
    color: var(--cc-green);
    font-weight: 700;
}


/* ---------- 4ac. Choice cards (a menu of big clickable cards) ----------
   Markup:
     <div class="cc-choice-grid">
       <a class="cc-choice-card cc-accent-green" href="...">
         <span class="cc-choice-icon"><i class="material-icons">...</i></span>
         <span class="cc-choice-title">Title</span>
         <span class="cc-choice-text">What it does.</span>
         <span class="cc-action-link"><span>Open</span><i class="material-icons">arrow_forward</i></span>
       </a>
     </div>
   The cc-accent-* class picks the icon color (4c). ---------- */

.cc-choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    gap: 18px;
}

.cc-choice-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px 22px;
    border: 1px solid var(--cc-line-strong);
    border-radius: var(--cc-radius);
    background: linear-gradient(var(--cc-panel-top), var(--cc-panel-bottom));
    color: var(--cc-text-body);
    transition: border-color 150ms ease, background 150ms ease;
}

.cc-choice-card:hover,
.cc-choice-card:focus-visible {
    border-color: var(--accent-border);
    background: var(--cc-bg-raised);
    outline: none;
}

.cc-choice-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--accent-border);
    border-radius: 50%;
    background: var(--accent-circle);
    color: var(--accent);
}

.cc-choice-title {
    color: var(--cc-text-strong);
    font-size: 1.15rem;
    font-weight: 650;
}

.cc-choice-text {
    flex: 1 1 auto;
    color: var(--cc-text-muted);
    font-size: 0.9rem;
    line-height: 1.45;
}

/* The "Open ->" link lights up with the card */
.cc-choice-card:hover .cc-action-link,
.cc-choice-card:focus-visible .cc-action-link {
    color: var(--cc-green);
}

.cc-choice-card:hover .cc-action-link .material-icons:last-child {
    transform: translateX(3px);
}


/* ============================================================
   5. PAGES
   ============================================================ */

/* ---------- 5a. Dashboard (templates/dashboard.html) ---------- */

.briefing-dashboard {
    padding: 32px 36px 46px;
    color: var(--cc-text-body);
}

.briefing-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 30px;
}

/* Materialize: h1 { font-size: 4.2rem; margin: 2.8rem 0 1.68rem } */
.briefing-welcome h1 {
    margin: 0 0 7px;
    color: var(--cc-text-strong);
    font-size: 2.3rem;
    font-weight: 650;
    line-height: 1.12;
    letter-spacing: -0.035em;
}

.briefing-welcome p {
    margin: 0;
    color: #b0bbb4;
}

/* Facility picker under the greeting; the numbers are for this facility */
.briefing-facility {
    max-width: 460px;
    margin-top: 18px;
}

.briefing-facility .input-field {
    margin: 0;
}

/* Analog clock on the left, digital time and date beside it,
   centered top-to-bottom against the welcome side */
.briefing-clock {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    align-self: stretch;
    gap: 24px;
    min-width: 286px;
    padding-left: 38px;
    border-left: 1px solid #435149;
}

/* A soft raised dial: dark shadow below-right, faint light above-left */
.briefing-analog {
    display: block;
    width: 132px;
    height: 132px;
    border-radius: 50%;
    box-shadow:
        9px 9px 22px rgba(0, 0, 0, 0.6),
        -5px -5px 16px rgba(255, 255, 255, 0.035);
}

.briefing-analog-face {
    fill: var(--cc-bg-page);
    stroke: rgba(255, 255, 255, 0.04);
    stroke-width: 1;
}

.briefing-analog-number {
    fill: #7d878d;
    font-family: var(--cc-font);
    font-size: 11px;
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: central;
}

.briefing-analog-tick {
    stroke: #5d676d;
    stroke-width: 1.4;
    stroke-linecap: round;
}

.briefing-analog-hour-hand {
    stroke: var(--cc-clock-hand);
    stroke-width: 3.4;
    stroke-linecap: butt;
}

.briefing-analog-minute-hand {
    stroke: var(--cc-text-strong);
    stroke-width: 1.8;
    stroke-linecap: butt;
}

.briefing-analog-second-hand {
    stroke: var(--cc-text-strong);
    stroke-width: 0.8;
}

.briefing-analog-center {
    fill: var(--cc-text-strong);
}

.briefing-date {
    margin-top: 6px;
    color: #c5cec8;
    font-size: 0.96rem;
}

.briefing-time {
    color: var(--cc-text-strong);
    font-size: 2.02rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.025em;
    /* Digits all the same width, so the time doesn't wiggle as it changes */
    font-variant-numeric: tabular-nums;
}

/* The colon blinks once a second (the script adds/removes -dim) */
.briefing-time-colon {
    display: inline-block;
    margin: 0 1px;
    transition: opacity 0.25s ease;
}

.briefing-time-colon-dim {
    opacity: 0.15;
}

.briefing-time-ampm {
    margin-left: 4px;
    font-size: 0.55em;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* People who turn off animations in Windows/browser settings: no blinking */
@media (prefers-reduced-motion: reduce) {
    .briefing-time-colon-dim {
        opacity: 1;
    }
}

/* As many cards per row as fit at 280px or wider: all five on a wide
   screen, 3 + 2 on a laptop (auto-fit decides; no extra breakpoint) */
.briefing-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
    margin-bottom: 20px;
}

/* Facility Metrics uses the same two columns as the lists below it,
   so the panels line up edge to edge */
.briefing-primary-grid,
.briefing-secondary-grid,
.cc-metrics-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.briefing-primary-grid {
    margin-bottom: 20px;
}

/* Right side of a panel header: "120 total" and an optional link */
.briefing-panel-tools {
    display: flex;
    align-items: center;
    gap: 14px;
}

.briefing-list-count {
    color: var(--cc-text-faint);
    font-size: 0.74rem;
}

/* A dashboard list that scrolls inside its panel; the header row stays put.
   No top padding: a sticky header sticks just inside the padding, so
   rows scrolling up would show through the gap above it. */
.briefing-table-wrap.briefing-scroll {
    max-height: 380px;
    padding-top: 0;
    overflow-y: auto;
}

.briefing-scroll .briefing-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--cc-bg-table-head);
}

/* New Rx rows that are also critical get a red mark on the left */
.briefing-table tr.briefing-row-critical td:first-child {
    box-shadow: inset 3px 0 0 var(--cc-red);
}

.briefing-table .briefing-cell-alert {
    color: var(--cc-red);
    font-weight: 600;
}

/* A row that opens a pop-up (Clarifications) */
.briefing-table tr.briefing-row-clickable {
    cursor: pointer;
}

.briefing-table tr.briefing-row-clickable:hover,
.briefing-table tr.briefing-row-clickable:focus-visible {
    background: var(--cc-bg-hover);
    outline: none;
}


/* Facility Metrics (under the stat cards): New vs Refill and
   Patients per Insurance Plan, side by side; stacked on tablets */
.cc-metrics {
    margin-bottom: 20px;
}

.cc-metrics-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}

/* Materialize: h2 { font-size: 3.56rem; margin: 2.37rem 0 1.42rem } */
.cc-metrics-title {
    margin: 0;
    color: var(--cc-text-strong);
    font-size: 1.15rem;
    font-weight: 650;
}

.cc-filter-row.cc-metrics-days {
    margin: 0;
}

.cc-metrics-body {
    padding: 18px 20px 16px;
}

.cc-metrics-numbers {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 34px;
    margin-bottom: 16px;
}

.cc-metrics-number {
    color: var(--cc-text-strong);
    font-size: 30px;
    font-weight: 650;
    line-height: 1;
}

.cc-metrics-label {
    margin-top: 5px;
    color: var(--cc-text-soft);
    font-size: 0.82rem;
}

.cc-metrics-number.cc-metrics-new {
    color: var(--cc-gold);
}

.cc-metrics-number.cc-metrics-refill {
    color: var(--cc-blue);
}

.cc-metrics-new-bg {
    background: var(--cc-gold);
}

.cc-metrics-refill-bg {
    background: var(--cc-blue);
}

/* The weekly bars: a row of columns, each a total, a bar and a date */
.cc-week-bars {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    min-height: 190px;
    padding-top: 10px;
    border-top: 1px solid var(--cc-line);
}

.cc-week {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    min-width: 0;
}

.cc-week-total {
    color: var(--cc-text-muted);
    font-size: 0.72rem;
}

/* Fixed height: each part's height is a % of the tallest week.
   Parts sit at the bottom: new (first) on top of refills (second). */
.cc-week-stack {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 2px;
    width: 100%;
    max-width: 44px;
    height: 140px;
}

.cc-week-part {
    border-radius: 3px;
}

.cc-week-label {
    color: var(--cc-text-faint);
    font-size: 0.7rem;
    white-space: nowrap;
}

.cc-metrics-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 18px;
    margin-top: 12px;
    color: var(--cc-text-muted);
    font-size: 0.76rem;
}

.cc-legend-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 6px;
    border-radius: 2px;
}

.cc-metrics-legend-note {
    margin-left: auto;
}

.cc-metrics-message {
    align-self: center;
    width: 100%;
    color: var(--cc-text-muted);
    font-size: 0.85rem;
    text-align: center;
}

.cc-cell-number {
    text-align: right;
    white-space: nowrap;
}

.cc-cell-strong {
    font-weight: 650;
}

.cc-plan-bar-cell {
    width: 36%;
}

.cc-plan-bar {
    height: 8px;
    border-radius: 4px;
    background: var(--cc-bg-hover);
}

.cc-plan-bar-fill {
    height: 8px;
    border-radius: 4px;
    background: var(--cc-purple);
}

/* NOT / NEVER: the patients the Adoption Rate card counts as not Gayco */
.cc-plan-not-gayco td:first-child {
    color: var(--cc-red);
}

.cc-plan-not-gayco .cc-plan-bar-fill {
    background: var(--cc-red);
}

.cc-metrics-footnote {
    padding: 8px 10px 0;
    color: var(--cc-text-faint);
    font-size: 0.72rem;
}


/* ---------- 5b. Sign-in pages (auth/login.html, auth/forgot_password.html,
                 admin_users/setup_password.html) ---------- */

/* Show/hide password eye (added by static/js/site.js). Edge draws its
   own eye too, but only while you type; hide it so there is one eye. */
input.cc-password-input::-ms-reveal {
    display: none;
}

/* Room on the right for the eye. Materialize inputs are content-box at
   width 100%, so the padding comes off the width. */
input.cc-password-input {
    width: calc(100% - 38px);
    padding-right: 38px;
}

.cc-password-toggle {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 3rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: #ffffff;
    cursor: pointer;
}

/* Materialize: button:focus { background-color: teal } */
.cc-password-toggle:hover,
.cc-password-toggle:focus {
    background: transparent;
    color: var(--cc-green);
}

.portal-login-main {
    position: relative;
    display: flex;
    justify-content: center;
    min-height: calc(100vh - 160px);
    padding-top: 40px;
}

/* Messages ("You have been logged out.") float in the top-left corner
   instead of sitting in the row, so the login card never moves */
.portal-login-main > .portal-flash-stack {
    position: absolute;
    top: 16px;
    left: 0;
    max-width: 320px;
}

/* Materialize: .row { margin-bottom: 20px } and .col offsets */
.portal-login-main > .row {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0;
}

.row .col.portal-auth-col {
    float: none;
    width: 420px;
    max-width: 100%;
    margin-left: 0;
}

.portal-login-main .card .card-content {
    padding: 26px 28px 28px;
}

.portal-login-main .card .card-content .card-title {
    margin-bottom: 22px;
}

.portal-login-main .input-field {
    margin-top: 16px;
    margin-bottom: 20px;
}

.portal-auth-intro {
    margin-bottom: 22px;
}

/* Link row at the bottom of the card, with a thin divider above it
   (same idea as the bottom row of the dashboard stat cards) */
.portal-auth-links {
    margin-top: 24px;
    padding-top: 14px;
    border-top: 1px solid var(--cc-line);
}


/* ---------- 5c. Rx Tracker (modules/rx_tracker/templates/rx_tracker/index.html)
   The medication rows and both trackers are built by the page's
   JavaScript, so their class names live in that file's <script>. ---------- */

/* Status colors for the tracker steps */
.rx-page-shell,
.rx-tracker-modal {
    --step-done:    var(--cc-green);
    --step-current: var(--cc-gold);
    --step-pending: #4a565d;
}

/* The Load / List Meds buttons sit level with the fields beside them */
.rx-search-card .input-field > .btn {
    margin-top: 6px;
}

/* -- Patient list status: the plain-text line under Patient -- */

.rx-patient-status {
    margin: 0 0 4px;
    font-size: 0.95rem;
    font-weight: 600;
}

.rx-patient-status-idle,
.rx-patient-status-loading {
    color: var(--cc-text-muted);
    font-weight: 400;
}

.rx-patient-status-ok {
    color: var(--cc-green);
}

.rx-patient-status-none {
    color: var(--cc-gold);
}

.rx-patient-status-error {
    color: var(--cc-red);
}

/* -- Medication list -- */

/* Row look comes from 4r (.rx-med-row) */

.rx-latest-fill-details,
.rx-fill-detail-line {
    margin-top: 4px;
    color: var(--cc-text-muted);
    font-size: 0.86rem;
}

/* "2 fills in selected range" */
.rx-fill-summary-count {
    display: inline-block;
    margin: 6px 0 2px;
    padding: 2px 10px;
    border: 1px solid var(--cc-green-border);
    border-radius: 999px;
    background: var(--cc-green-tint);
    color: var(--cc-green);
    font-size: 0.74rem;
    font-weight: 600;
}

.rx-latest-fill-heading {
    margin-top: 8px;
    color: var(--cc-text-dim);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* "Proof of Delivery" link inside a status line */
.rx-pod-text-link {
    margin-left: 10px;
    color: var(--cc-green);
    font-weight: 600;
}

.rx-pod-text-link:hover {
    color: var(--cc-text-strong);
}

/* -- Mini tracker: the row of dots under each medication -- */

.rx-mini-tracker {
    display: flex;
    align-items: center;
    margin-top: 12px;
}

.rx-mini-dot {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    border: 2px solid var(--step-pending);
    border-radius: 50%;
    background: transparent;
}

.rx-mini-dot.completed {
    border-color: var(--step-done);
    background: var(--step-done);
}

.rx-mini-dot.current {
    border-color: var(--step-current);
    box-shadow: 0 0 0 4px rgba(255, 210, 102, 0.18);
}

.rx-mini-line {
    flex: 1 1 auto;
    height: 2px;
    background: var(--step-pending);
}

.rx-mini-line.completed {
    background: var(--step-done);
}

/* -- Tracker pop-up -- */

/* Materialize: .modal { width: 55%; max-height: 70% } */
.modal.rx-tracker-modal {
    width: min(1100px, 92vw);
    max-height: 85%;
}

.rx-modal-header,
.rx-pod-preview-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--cc-line);
}

.rx-modal-subtitle,
.rx-pod-preview-subtitle {
    margin-top: 4px;
    color: var(--cc-text-muted);
}

.rx-modal-detail-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 16px 0;
}

/* "RX 7000103", "QTY 30", "STATUS Processed" */
.rx-detail-pill {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 6px 14px;
    border: 1px solid var(--cc-line-strong);
    border-radius: 999px;
    background: var(--cc-bg-raised);
}

.rx-detail-label {
    color: var(--cc-text-dim);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.rx-detail-value {
    color: var(--cc-text-strong);
    font-weight: 600;
}

/* One box per fill inside the pop-up */
.rx-fill-section {
    margin-bottom: 14px;
    padding: 16px 18px;
    border: 1px solid var(--cc-line-strong);
    border-radius: var(--cc-radius);
    background: var(--cc-bg-page);
}

.rx-fill-heading {
    color: var(--cc-text-strong);
    font-weight: 600;
}

/* -- Big tracker: circles with labels and times -- */

.dominos-tracker {
    display: flex;
    align-items: flex-start;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--cc-line);
    overflow-x: auto;
}

.tracker-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 92px;
    gap: 8px;
    text-align: center;
}

.tracker-label {
    min-height: 2.4em;
    color: var(--cc-text-muted);
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.2;
}

.tracker-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 2px solid var(--step-pending);
    border-radius: 50%;
    color: var(--step-pending);
}

.tracker-circle .material-icons {
    font-size: 24px;
}

.tracker-step.completed .tracker-circle {
    border-color: var(--step-done);
    background: var(--cc-green-circle);
    color: var(--step-done);
}

.tracker-step.completed .tracker-label {
    color: var(--cc-text);
}

.tracker-step.current .tracker-circle {
    border-color: var(--step-current);
    background: var(--cc-gold-tint);
    box-shadow: 0 0 0 5px rgba(255, 210, 102, 0.14);
    color: var(--step-current);
}

.tracker-step.current .tracker-label {
    color: var(--step-current);
}

.tracker-time {
    display: flex;
    flex-direction: column;
    color: var(--cc-text-soft);
    font-size: 0.72rem;
    line-height: 1.35;
}

.tracker-pending {
    color: var(--cc-text-dim);
}

/* Packing slip printed days ago, nothing in DeliveryTrack (usually a
   pickup at the counter). Dashed = "we don't know", not "waiting". */
.rx-mini-dot.no-record,
.tracker-step.no-record .tracker-circle {
    border-style: dashed;
}

.tracker-step.no-record .tracker-pending {
    font-style: italic;
}

/* Delivered step that opens the Proof of Delivery */
a.tracker-circle {
    cursor: pointer;
    transition: box-shadow 150ms ease, background 150ms ease;
}

a.tracker-circle:hover {
    background: #20573a;
    box-shadow: 0 0 0 5px rgba(114, 227, 154, 0.22);
}

.tracker-pod-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    margin-top: 4px;
    color: var(--cc-green);
    font-weight: 600;
}

.tracker-pod-link .material-icons {
    font-size: 14px;
    transition: transform 150ms ease;
}

.tracker-pod-link:hover {
    color: var(--cc-text-strong);
}

.tracker-pod-link:hover .material-icons {
    transform: translateX(3px);
}

.tracker-pod-link:focus-visible {
    outline: 2px solid var(--cc-green-border);
    outline-offset: 2px;
    border-radius: 4px;
}

/* The short bar between two circles, level with the circles' centers */
.tracker-line {
    flex: 1 1 16px;
    min-width: 16px;
    height: 2px;
    margin-top: calc(1.824rem + 31px); /* label height + gap + half the circle */
    background: var(--step-pending);
}

.tracker-line.completed {
    background: var(--step-done);
}

/* -- Proof of Delivery pop-ups -- */

.modal.rx-pod-preview-modal,
.modal.rx-pod-manifest-modal {
    width: min(1000px, 92vw);
    max-height: 90%;
}

.rx-pod-manifest-actions {
    margin: 14px 0;
}

/* Phones: the PDF's pages drawn as pictures (pdf.js), scrolling in the pop-up */
.rx-pod-preview-pages {
    margin-top: 14px;
}

#rxPodPreviewFrame,
.rx-pod-manifest-frame {
    display: block;
    width: 100%;
    height: 65vh;
    margin-top: 14px;
    border: 1px solid var(--cc-line-strong);
    border-radius: var(--cc-radius-small);
    background: #ffffff;
}


/* ---------- 5d. Talk to Us (modules/facility_questions/templates/facility_questions/)
   Chat bubbles: facility messages on the left, pharmacy replies on the right. ---------- */

.conversation-thread {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 4px 0 12px;
}

.message-row {
    display: flex;
}

.message-row.left {
    justify-content: flex-start;
}

.message-row.right {
    justify-content: flex-end;
}

.message-row.system {
    justify-content: center;
}

.message-bubble {
    max-width: 72%;
    padding: 12px 14px;
    border: 1px solid var(--cc-line-strong);
    border-radius: 14px;
}

.message-bubble.facility {
    border-bottom-left-radius: 4px;
    background: var(--cc-bg-raised);
    color: var(--cc-text);
}

.message-bubble.pharmacy {
    border-color: var(--cc-green-border);
    border-bottom-right-radius: 4px;
    background: var(--cc-green-circle);
    color: var(--cc-text-strong);
}

.message-meta {
    margin-bottom: 4px;
    color: var(--cc-text-muted);
    font-size: 0.76rem;
    font-weight: 700;
}

.message-bubble.pharmacy .message-meta {
    color: #a9e8bf;
}

.message-text {
    font-size: 0.95rem;
    line-height: 1.45;
    white-space: pre-wrap;
}

.system-note {
    padding: 6px 14px;
    border: 1px solid var(--cc-line);
    border-radius: 999px;
    color: var(--cc-text-dim);
    font-size: 0.8rem;
}

/* Reply box */
.question-composer {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--cc-line);
}

.composer-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 6px 6px 18px;
    border: 1px solid var(--cc-line-menu);
    border-radius: 999px;
    background: var(--cc-bg-raised);
}

.composer-pill:focus-within {
    border-color: var(--cc-green-border);
}

/* Materialize: input[type=text]:not(.browser-default) { border-bottom; height: 3rem }
   and a teal underline on focus. Both need a more specific selector. */
.composer-pill > input.composer-input[type="text"]:not(.browser-default),
.composer-pill > input.composer-input[type="text"]:not(.browser-default):focus:not([readonly]) {
    flex: 1 1 auto;
    height: 36px;
    margin: 0;
    border: 0;
    box-shadow: none;
    color: var(--cc-text-strong);
}

.composer-send-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--cc-green-border);
    border-radius: 50%;
    background: var(--cc-green-circle);
    color: var(--cc-text-strong);
    cursor: pointer;
}

/* Materialize: button:focus { background-color: teal } */
.composer-send-btn:hover,
.composer-send-btn:focus {
    background: #20573a;
}

.question-closed-note {
    margin-top: 16px;
}


/* ---------- 5e. User setup form (modules/admin_users/templates/admin_users/form.html) ---------- */

.cc-user-active-check {
    display: inline-flex;
    margin-top: 8px;
}

.cc-user-scope-note {
    margin-top: 10px;
    color: var(--cc-text-muted);
    font-size: 0.86rem;
}

.cc-facility-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    gap: 8px 12px;
    max-height: 360px;
    padding: 2px 4px 2px 0;
    overflow-x: hidden;
    overflow-y: auto;
}

/* position: relative keeps Materialize's invisible checkbox inside its box,
   so clicking a box never makes the list jump */
.cc-facility-option {
    position: relative;
    display: flex;
    align-items: flex-start;
    min-height: 38px;
    padding: 8px 10px;
    border: 1px solid var(--cc-line-strong);
    border-radius: var(--cc-radius-small);
    background: var(--cc-bg-page);
    cursor: pointer;
}

.cc-facility-option:hover {
    border-color: var(--cc-green-border);
    background: var(--cc-bg-raised);
}

/* Materialize: [type="checkbox"] + span:not(.lever) { height: 25px;
   line-height: 25px; font-size: 1rem } - always ONE line, so a long name
   spilled out of its box onto the row below. Let the text wrap and the
   box grow. (Selector is stronger than Materialize's so it wins.) */
.cc-facility-option > [type="checkbox"] + span:not(.lever) {
    height: auto;
    min-height: 25px;
    padding-top: 3px;
    font-size: 0.86rem;
    line-height: 1.3;
}

.cc-facility-option strong {
    margin-right: 6px;
    color: var(--cc-text-strong);
}

/* Files.com folders granted to the user */
.cc-folder-grants {
    margin: 0 0 12px;
}

.cc-folder-grant {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 4px 6px 10px;
    border-bottom: 1px solid var(--cc-line);
}

.cc-folder-grant-path {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--cc-text-strong);
    overflow-wrap: anywhere;
}

.cc-folder-grant-empty {
    margin-bottom: 12px;
    color: var(--cc-text-dim);
}

/* User list: the Setup column's flags (one per thing a user needs) */
.cc-setup-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
    max-width: 330px;
}

.cc-setup-flag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 8px 1px 5px;
    border: 1px solid var(--cc-slate-border);
    border-radius: 999px;
    background: var(--cc-slate-tint);
    color: var(--cc-text-muted);
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: default;
}

.cc-setup-flag .material-icons {
    font-size: 14px;
}

.cc-setup-flag-ok {
    border-color: var(--cc-green-border);
    background: var(--cc-green-tint);
    color: var(--cc-green);
}

.cc-setup-flag-warn {
    border-color: var(--cc-gold-border);
    background: var(--cc-gold-tint);
    color: var(--cc-gold);
}

/* Folder picker (browses Files.com inside the form) */
.cc-folder-picker {
    margin-top: 12px;
    border: 1px solid var(--cc-line-menu);
    border-radius: var(--cc-radius-small);
    background: var(--cc-bg-page);
}

.cc-folder-picker-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--cc-line);
}

.cc-folder-picker-path {
    flex: 1 1 200px;
    min-width: 0;
    color: var(--cc-text-strong);
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* Search box under the Up / path / Grant bar */
.cc-folder-picker-search {
    margin: 0;
    padding: 10px 12px 0;
}

.cc-folder-picker-message {
    padding: 0 12px;
    color: var(--cc-text-muted);
    font-size: 0.86rem;
}

.cc-folder-picker-message:not(:empty) {
    padding-top: 10px;
}

.cc-folder-picker-list {
    max-height: 320px;
    margin: 0;
    padding: 6px 0;
    overflow-y: auto;
}

.cc-folder-picker-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 2px 12px;
}

.cc-folder-picker-row:hover {
    background: var(--cc-bg-raised);
}

/* Folder name: a button that opens the folder */
.cc-folder-picker-open {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 8px 0;
    border: 0;
    background: transparent;
    color: var(--cc-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

/* Materialize: button:focus { background-color: teal } */
.cc-folder-picker-open:hover,
.cc-folder-picker-open:focus {
    background: transparent;
    color: var(--cc-green);
}


/* ---------- 5f. Role permissions (modules/admin_roles/templates/admin_roles/edit.html) ---------- */

.cc-perm-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 4px 0 14px;
}

.cc-perm-count {
    color: var(--cc-text-strong);
}

.cc-perm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(460px, 100%), 1fr));
    gap: 16px;
    align-items: start;
}

.cc-perm-grid > .cc-form-section {
    margin-bottom: 0;
}

.cc-perm-group-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.cc-perm-group-heading > .cc-form-section-title {
    margin-bottom: 0;
}


/* ---------- 5g. Patient Discharge (modules/patient_discharge/templates/patient_discharge/index.html) ---------- */

/* Materialize: .row { margin-bottom: 20px } - too much inside a section */
.row.cc-discharge-row {
    margin-bottom: 0;
}

.cc-discharge-toggle {
    display: inline-block;
    margin-top: 14px;
}

.cc-discharge-manual {
    margin-top: 16px;
}

/* Medication source pills on the left, "include inactive" on the right */
.cc-discharge-source-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.cc-discharge-source-bar .cc-filter-row {
    margin: 0;
}

/* Quantity box with - 1/4 and + 1/4 buttons beside it */
.cc-qty {
    display: grid;
    grid-template-columns: minmax(70px, 1fr) auto auto;
    align-items: center;
    gap: 8px;
}

.cc-qty > .btn {
    margin-top: 6px;
    padding: 0 12px;
}

.card .card-content .cc-discharge-hint {
    margin: 0 0 10px;
}

/* Results list under the medication search */
.cc-pick-list {
    max-height: 420px;
    margin-bottom: 8px;
    overflow-y: auto;
}

/* Preview pop-up: wide and tall. The script opens it 4% from the top. */
.modal.cc-discharge-preview {
    width: min(1180px, 94vw);
    max-height: 92%;
}

.cc-discharge-preview .portal-file-viewer {
    height: 66vh;
}

.cc-discharge-loading {
    padding: 40px 0;
    text-align: center;
}

.cc-discharge-loading .preloader-wrapper {
    margin-bottom: 14px;
}


/* ---------- 5h. Clarifications (dashboard pop-ups in templates/dashboard.html,
   modules/clarifications/templates/clarifications/document.html) ---------- */

/* Materialize: .modal { width: 55%; max-height: 70% } */
.modal.cc-clar-modal {
    width: min(720px, 92vw);
}

.modal.cc-clar-doc-modal {
    width: min(1000px, 92vw);
    max-height: 92%;
}

/* Consent Forms panel: full width under Clarifications / Questions */
.briefing-consent-grid {
    margin-top: 20px;
}

/* Consent signing pop-up. It opens 4% from the top (endingTop in
   dashboard.html), so 92% keeps the bottom (and the Sign button) on screen */
.modal.cc-consent-modal {
    width: min(1280px, 96vw);
    max-height: 92%;
}

/* Wide screens: form pages on the left, signing form on the right.
   Tablets and phones get one column (1024px section at the bottom). */
.cc-consent-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 24px;
}

/* The pages fill the left column at the height of the right column
   (absolute: the long PDF can't stretch the row; it scrolls instead) */
.cc-consent-doc {
    position: relative;
    min-height: 360px;
}

.cc-consent-doc > .cc-consent-pages {
    position: absolute;
    inset: 0;
    max-height: none;
    margin-bottom: 0;
}

/* No signing form (already signed, or the form can't be shown):
   the pages get the whole width */
.cc-consent-no-form .cc-consent-layout {
    display: block;
}

.cc-consent-no-form .cc-consent-doc {
    min-height: 0;
}

.cc-consent-no-form .cc-consent-doc > .cc-consent-pages {
    position: static;
    max-height: 58vh;
    margin-bottom: 18px;
}

/* Close / Sign Document stay pinned to the bottom of the pop-up while
   the rest scrolls (the pop-up itself is what scrolls) */
.modal.cc-consent-modal .modal-footer {
    position: sticky;
    bottom: 0;
    z-index: 2;
}

/* The form's pages, scrolling inside the pop-up. One column (tablet,
   phone): kept short so the signing form below is easy to reach */
.cc-consent-pages {
    max-height: 40vh;
    margin-bottom: 18px;
    padding: 12px;
    overflow-y: auto;
    border: 1px solid var(--cc-line-strong);
    border-radius: var(--cc-radius-small);
    background: var(--cc-bg-page);
    color: var(--cc-text-muted);
}

.cc-consent-disclosure {
    max-height: 150px;
    margin-bottom: 18px;
    padding: 12px 14px;
    overflow-y: auto;
    border: 1px solid var(--cc-gold-border);
    border-radius: var(--cc-radius-small);
    background: var(--cc-gold-tint);
    color: var(--cc-text-soft);
    font-size: 0.8rem;
    line-height: 1.45;
}

.cc-signer-types {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 24px;
    margin-bottom: 8px;
}

.cc-signature-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* White "paper" so dark ink shows; touch-action: none stops the page
   scrolling while someone signs with a finger */
.cc-signature-pad {
    display: block;
    width: 100%;
    height: 140px;
    margin-bottom: 16px;
    border: 1px solid var(--cc-line-strong);
    border-radius: var(--cc-radius-small);
    background: #ffffff;
    cursor: crosshair;
    touch-action: none;
}

/* Materialize: [type="checkbox"] + span:not(.lever) { height: 25px;
   line-height: 25px } - one line only; this sentence needs to wrap */
.cc-consent-agree > [type="checkbox"] + span:not(.lever) {
    height: auto;
    min-height: 25px;
    padding-top: 3px;
    line-height: 1.4;
}

.cc-consent-agree {
    display: block;
    margin-bottom: 14px;
}

/* The hidden frame "Print Signed Copy" prints from. Not display: none:
   browsers won't print a frame that isn't drawn, so it is 1px and see-through */
.cc-print-frame {
    position: fixed;
    right: 0;
    bottom: 0;
    width: 1px;
    height: 1px;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

/* Patient / Physician / Medication side by side */
.cc-clar-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

/* Space between the question box and the Facility Response box */
.cc-clar-question {
    margin-bottom: 26px;
    padding: 14px 16px;
    border: 1px solid var(--cc-gold-border);
    border-radius: var(--cc-radius-small);
    background: var(--cc-gold-tint);
    white-space: pre-wrap;
}

/* The original document inside the pop-up (white, like paper) */
.cc-clar-doc-frame {
    display: block;
    width: 100%;
    height: 70vh;
    border: 1px solid var(--cc-line-strong);
    border-radius: var(--cc-radius-small);
    background: #ffffff;
}

/* The document page when it is shown inside that pop-up */
.cc-page.cc-page-embedded {
    padding: 0;
}


/* ---------- 5i. Drug Destruction (modules/xs/templates/xs/) ----------
   Every page wraps its content in <div class="cc-page xs-page">. ---------- */

/* Witness banner above the cards / form */
.xs-witness-banner {
    margin-bottom: 18px;
}

.xs-page h6 {
    margin: 14px 0 6px;
    color: var(--cc-text-strong);
    font-size: 1rem;
    font-weight: 600;
}

/* Buttons in a row (Clear / Back, Record Destruction) */
.xs-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.xs-report-actions {
    margin-bottom: 14px;
}

/* Reports: Controlled / Non-Controlled, side by side (stacked on phones) */
.xs-radio-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 32px;
    margin: 4px 0 18px;
}

/* -- Messages the page scripts color with Materialize classes:
      <div class="card-panel green lighten-4"> and so on.
      EXCEPTION: Materialize's color classes (.green, .red, .grey-text...)
      use !important, so the overrides below must too. -- */

.xs-page .card-panel {
    margin: 0 0 16px;
    padding: 12px 16px;
    border: 1px solid var(--cc-line-strong);
    border-radius: var(--cc-radius-small);
    background-color: var(--cc-bg-raised);
    box-shadow: none;
    color: var(--cc-text);
}

.xs-page .card-panel.grey {
    background-color: var(--cc-bg-raised) !important;
}

.xs-page .card-panel.blue {
    border-color: var(--cc-blue-border);
    background-color: var(--cc-blue-tint) !important;
}

.xs-page .card-panel.green {
    border-color: var(--cc-green-border);
    background-color: var(--cc-green-tint) !important;
    color: #c9f5d8;
}

.xs-page .card-panel.yellow {
    border-color: var(--cc-gold-border);
    background-color: var(--cc-gold-tint) !important;
    color: #f3e3b0;
}

.xs-page .card-panel.red {
    border-color: var(--cc-red-border);
    background-color: var(--cc-red-tint) !important;
    color: var(--cc-red-text) !important;
}

.xs-page .grey-text {
    color: var(--cc-text-muted) !important;
}

.xs-page .red-text {
    color: var(--cc-red) !important;
}

/* -- Record Disposal (barcode_scan.html) -- */

/* Drug photos keep a white mat so they look like the real tablet */
.xs-drug-image {
    max-width: 280px;
    max-height: 210px;
    padding: 6px;
    border: 1px solid var(--cc-line-strong);
    border-radius: var(--cc-radius-small);
    background: #ffffff;
}

.xs-drug-image.xs-drug-image-small {
    max-width: 220px;
    max-height: 150px;
}

/* Matched Medication: two columns of boxes that line up.
   Materialize: .row .col { float: left } - in a flex row the floats are
   ignored and both columns become as tall as the taller one. */
.xs-page .row.xs-match-row {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 0;
}

.xs-match-col {
    display: flex;
    flex-direction: column;
}

/* The photo sits in a box like the Drug Card, centered */
.xs-drug-image-panel {
    text-align: center;
}

/* The photo (with its white mat) never gets wider than its box:
   border-box counts the mat inside the width */
.xs-drug-image-panel .xs-drug-image {
    display: inline-block;
    box-sizing: border-box;
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

/* Drug Details fills its column, so its bottom lines up with the Drug Card */
.xs-match-col > .xs-drug-details-card {
    flex: 1 1 auto;
}

.compact-drug-card-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.compact-drug-card-table th {
    width: 105px;
    padding: 4px 6px 4px 0;
    color: var(--cc-text-muted);
    font-weight: 600;
    vertical-align: top;
}

.compact-drug-card-table td {
    padding: 4px 0;
    vertical-align: top;
}

/* Scanner / Camera switch: phones and tablets only */
.xs-barcode-mode-selector {
    display: none;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 16px 0 20px;
}

.btn.xs-barcode-mode-button {
    width: 100%;
    min-height: 48px;
    background-color: var(--cc-bg-raised);
}

.btn.xs-barcode-mode-button.active {
    border-color: var(--cc-green-border);
    background-color: var(--cc-green-circle);
}

/* EXCEPTION: beats the camera panel's own display rules when hidden */
.xs-barcode-camera-panel[hidden] {
    display: none !important;
}

.xs-camera-instructions {
    margin-bottom: 12px;
    color: var(--cc-text-muted);
    text-align: center;
}

.xs-camera-reader-shell {
    position: relative;
    width: 100%;
    min-height: 260px;
    margin-bottom: 14px;
    overflow: hidden;
    border-radius: var(--cc-radius-small);
    background: #000000;
}

#barcode_camera_reader {
    width: 100%;
    min-height: 260px;
}

/* EXCEPTION: the camera library sets the video size inline */
#barcode_camera_reader video {
    width: 100% !important;
    height: auto !important;
    object-fit: cover;
}

.xs-camera-scan-guide {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 4;
    width: 82%;
    height: 34%;
    border: 3px solid rgba(255, 255, 255, 0.92);
    border-radius: 8px;
    box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.26);
    pointer-events: none;
    transform: translate(-50%, -50%);
}

#stop_camera_button {
    width: 100%;
}

/* "Inactive Facility" pop-up */
.modal.inactive-facility-modal {
    max-width: 620px;
}

.inactive-facility-modal-heading {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 20px;
}

.inactive-facility-modal-heading h5 {
    margin: 0 0 6px;
}

.inactive-facility-modal-heading p {
    margin: 0;
}

.inactive-facility-modal-icon {
    display: flex;
    flex: 0 0 56px;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border: 2px solid var(--cc-gold-border);
    border-radius: 50%;
    background: var(--cc-gold-circle);
}

.inactive-facility-exclamation {
    color: var(--cc-gold);
    font-size: 32px;
    font-weight: 900;
    line-height: 1;
}

.xs-page .card-panel.inactive-facility-details {
    margin-bottom: 18px;
    border-left: 4px solid var(--cc-green-border);
}

.inactive-facility-details div + div {
    margin-top: 6px;
}

.inactive-facility-question {
    margin-bottom: 8px;
    color: var(--cc-text-strong);
    font-size: 1.05rem;
    font-weight: 600;
}

/* -- Manual Entry (manual_disposal.html) -- */

/* The search-as-you-type lists hang under their box */
.xs-picker-field {
    position: relative;
}

.xs-search-row {
    margin-bottom: 6px;
}

.xs-manual-block,
.xs-manual-block .input-field {
    margin-bottom: 0;
}

.xs-inline-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 26px;
    margin: 10px 0 14px;
}

.xs-inline-options label {
    white-space: nowrap;
}

.xs-selected-inline {
    margin-top: 8px;
    color: var(--cc-text);
}

.xs-selected-inline strong {
    color: var(--cc-green);
}

/* Medication Source box (Patient Profile / Local Drug DB / Manual Entry) */
.xs-med-toolbar {
    margin: 8px 0 16px;
    padding: 14px 16px;
    border: 1px solid var(--cc-line-strong);
    border-left: 4px solid var(--cc-green-border);
    border-radius: var(--cc-radius-small);
    background: var(--cc-bg-raised);
}

.xs-med-toolbar-label {
    margin-bottom: 10px;
    color: var(--cc-text-muted);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.xs-med-source-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Materialize: .btn-small { background-color: #26a69a; height: 32.4px } */
.btn-small.xs-source-btn,
.btn-small.xs-source-btn:focus {
    height: 32px;
    padding: 0 14px;
    border: 1px solid var(--cc-line-menu);
    border-radius: var(--cc-radius-small);
    background-color: var(--cc-bg-hover);
    box-shadow: none;
    color: var(--cc-text);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 30px;
}

.btn-small.xs-source-btn:hover {
    border-color: var(--cc-green-border);
    color: var(--cc-text-strong);
}

.btn-small.xs-source-btn.active {
    border-color: var(--cc-green-border);
    background-color: var(--cc-green-circle);
    color: var(--cc-text-strong);
}

/* EXCEPTION: Materialize's disabled button colors use !important */
.btn-small.xs-source-btn.disabled,
.btn-small.xs-source-btn:disabled {
    background-color: var(--cc-bg-raised) !important;
    color: var(--cc-text-dim) !important;
    opacity: 0.6;
    cursor: not-allowed;
}

/* Materialize: .card .card-content p { margin: 0 } is more specific
   than a single class, so the card selectors are repeated here */
.card .card-content .xs-med-toolbar-option {
    margin: 14px 0 0;
}

/* Controlled / Destruction Reason: a plain label, 8px of space (the
   cc-field-label margin), the drop-down, then room before Notes */
.xs-select-col {
    margin-top: 1rem;
}

.xs-select-col > select.browser-default.cc-select {
    width: 100%;
    margin-bottom: 18px;
}

/* Medication search results (built by the page script) */
.xs-card-results {
    margin: 8px 0 14px;
}

.xs-result-card {
    display: block;
    width: 100%;
    margin: 0 0 10px;
    padding: 12px 14px;
    border: 1px solid var(--cc-line-strong);
    border-radius: var(--cc-radius-small);
    background: var(--cc-bg-raised);
    color: var(--cc-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

/* Materialize: button:focus { background-color: teal } */
.xs-result-card:hover,
.xs-result-card:focus {
    border-color: var(--cc-green-border);
    background: var(--cc-bg-hover);
    outline: none;
}

.xs-result-card.selected {
    border-color: var(--cc-green-border);
    background: var(--cc-green-circle);
}

.xs-result-title {
    margin-bottom: 4px;
    color: var(--cc-text-strong);
    font-weight: 700;
}

.xs-result-subtitle {
    color: var(--cc-text-muted);
    font-size: 0.86rem;
}

.xs-result-message,
.xs-page .collection-item {
    display: block;
    margin-bottom: 10px;
    padding: 12px 14px;
    border: 1px solid var(--cc-line-strong);
    border-radius: var(--cc-radius-small);
    background: var(--cc-bg-raised);
}

/* -- Reports (reports.html): the facility list's items -- */
.facility-picker-result-item {
    display: block;
    width: 100%;
    padding: 10px 14px;
    border: 0;
    border-bottom: 1px solid var(--cc-line);
    background: transparent;
    color: var(--cc-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

/* Materialize: button:focus { background-color: teal } */
.facility-picker-result-item:hover,
.facility-picker-result-item:focus {
    background: var(--cc-bg-hover);
    color: var(--cc-text-strong);
    outline: none;
}


/* ============================================================
   6. RESPONSIVE
   ============================================================ */

/* ---------- Tablet and phone: sidebar becomes a slide-in drawer ---------- */

@media only screen and (max-width: 1024px) {

    body.portal-navigation-open {
        overflow: hidden;
        touch-action: none;
    }

    nav.portal-topbar {
        height: auto;
        min-height: 72px;
    }

    .portal-topbar-inner {
        min-height: 72px;
    }

    .portal-bell,
    .portal-desktop-user-menu {
        display: none;
    }

    /* Hamburger button (top right) */
    .portal-mobile-menu-button {
        position: fixed;
        top: max(12px, env(safe-area-inset-top));
        right: max(10px, env(safe-area-inset-right));
        z-index: 5200;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 8px;
        background: rgba(0, 0, 0, 0.16);
        cursor: pointer;
    }

    /* Materialize: button:focus { background-color: teal } */
    .portal-mobile-menu-button:hover,
    .portal-mobile-menu-button:focus {
        background: rgba(255, 255, 255, 0.12);
    }

    .portal-menu-line {
        position: absolute;
        left: 11px;
        display: block;
        width: 26px;
        height: 3px;
        border-radius: 3px;
        background: #ffffff;
        transform-origin: center;
        transition: top 180ms ease, transform 180ms ease, opacity 120ms ease;
    }

    .portal-menu-line-top    { top: 14px; }
    .portal-menu-line-middle { top: 22px; }
    .portal-menu-line-bottom { top: 30px; }

    /* Open: the three lines turn into an X */
    .portal-mobile-menu-button-open .portal-menu-line-top {
        top: 22px;
        transform: rotate(45deg);
    }

    .portal-mobile-menu-button-open .portal-menu-line-middle {
        opacity: 0;
        transform: scaleX(0);
    }

    .portal-mobile-menu-button-open .portal-menu-line-bottom {
        top: 22px;
        transform: rotate(-45deg);
    }

    /* The drawer */
    .row .col.portal-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 5100;
        display: flex;
        flex-direction: column;
        width: min(86vw, 340px);
        height: 100dvh;
        padding: 22px 12px 110px;
        overflow: auto;
        background: var(--cc-bg-drawer);
        box-shadow: 8px 0 30px rgba(0, 0, 0, 0.24);
        transform: translateX(-100%);
        transition: transform 200ms ease;
    }

    .row .col.portal-sidebar.portal-sidebar-open {
        transform: translateX(0);
    }

    .portal-mobile-sidebar-header {
        position: sticky;
        top: -22px;
        z-index: 2;
        display: flex;
        align-items: center;
        min-height: 72px;
        margin: -22px -12px 12px;
        padding: 7px 68px 7px 14px;
        border-bottom: 1px solid var(--cc-line-strong);
        background: var(--cc-bg-topbar);
    }

    .portal-side-link {
        font-size: 0.96rem;
    }

    /* Dark see-through layer behind the open drawer */
    .portal-sidebar-overlay {
        position: fixed;
        inset: 0;
        z-index: 5050;
        display: block;
        padding: 0;
        border: 0;
        background: rgba(0, 0, 0, 0.48);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 180ms ease, visibility 180ms ease;
    }

    .portal-sidebar-overlay.portal-sidebar-overlay-visible {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .row .col.portal-main {
        width: 100%;
    }

    .briefing-dashboard,
    .cc-page {
        padding: 24px 22px 46px;
    }

    .briefing-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cc-clar-detail-grid {
        grid-template-columns: 1fr;
    }

    /* Consent pop-up: pages above the signing form */
    .cc-consent-layout {
        display: block;
    }

    .cc-consent-doc {
        min-height: 0;
    }

    .cc-consent-doc > .cc-consent-pages {
        position: static;
        max-height: 40vh;
        margin-bottom: 18px;
    }

    /* Drug Destruction: Scanner / Camera switch on phones and tablets */
    .xs-barcode-mode-selector {
        display: grid;
    }

    /* Narrow screens: no room beside the card, so the message is a
       banner pinned to the bottom of the screen; the card still never moves */
    .portal-login-main > .portal-flash-stack {
        position: fixed;
        top: auto;
        right: 16px;
        bottom: 16px;
        left: 16px;
        z-index: 20;
        max-width: none;
        padding: 0;
    }

    .briefing-primary-grid,
    .briefing-secondary-grid,
    .cc-metrics-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* ---------- Phone ---------- */

@media only screen and (max-width: 600px) {

    .briefing-dashboard,
    .cc-page {
        padding: 20px 14px 32px;
    }

    /* Five list columns fit a phone without scrolling sideways */
    .briefing-table-wrap {
        padding-right: 6px;
        padding-left: 6px;
    }

    .briefing-table th,
    .briefing-table td {
        padding: 8px 5px;
    }

    .cc-page-header h4 {
        font-size: 1.7rem;
    }

    .cc-form-grid {
        grid-template-columns: 1fr;
    }

    .modal.cc-discharge-preview {
        width: 96vw;
    }

    .message-bubble {
        max-width: 88%;
    }

    .modal.rx-tracker-modal,
    .modal.rx-pod-preview-modal,
    .modal.rx-pod-manifest-modal {
        width: 96vw;
    }

    .briefing-header {
        flex-direction: column;
        gap: 20px;
    }

    .briefing-welcome h1 {
        font-size: 1.9rem;
    }

    /* Phones: no clock (the phone already shows the time) */
    .briefing-clock {
        display: none;
    }

    /* One stat card per row so the text has room */
    .briefing-kpi-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .briefing-kpi-main {
        min-height: 0;
    }

    .portal-footer {
        padding: 16px 14px;
    }

    .portal-login-main {
        padding: 18px 14px;
    }

    .portal-login-main .card .card-content {
        padding: 22px 18px 24px;
    }
}


/* ============================================================
   7. PRINTING
   When a document page is printed, only the card marked
   "portal-print-document" is printed, on white paper, and anything
   marked "portal-print-hide" is left out.
   (Used by Forms and the Policy & Procedure Manual viewers.)
   ============================================================ */

@media print {

    body {
        background: #ffffff;
    }

    body * {
        visibility: hidden;
    }

    .portal-print-document,
    .portal-print-document * {
        visibility: visible;
    }

    .card.portal-print-document {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        margin: 0;
        padding: 0;
        border: 0;
        box-shadow: none;
        background: #ffffff;
    }

    .card.portal-print-document .card-content {
        padding: 0;
    }

    .portal-print-hide {
        display: none;
    }

    .portal-pdf-viewer,
    .forms-viewer-frame,
    .forms-viewer-image-wrap {
        width: 100%;
        height: auto;
        margin: 0;
        padding: 0;
        overflow: visible;
        border: 0;
    }

    .portal-pdf-page,
    .forms-viewer-image {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        margin: 0 auto;
        box-shadow: none;
        break-after: page;
    }

    .portal-pdf-page:last-child,
    .forms-viewer-image:last-child {
        break-after: auto;
    }

    @page {
        margin: 0.4in;
    }
}