/* ==========================================================================
   Hospital Management System — Design System
   Theme: Deep forest green + stone gray. Flat, clean, professional.
   ========================================================================== */

:root {
    --hms-primary: #1a6b4f;        /* deep green — primary actions */
    --hms-primary-dark: #124d39;
    --hms-primary-light: #dcfce7;  /* soft green pill backgrounds */
    --hms-primary-text: #166534;

    --hms-sage: #6f9a86;           /* muted sage — login CTA */
    --hms-sage-dark: #5c8471;

    --hms-sidebar-bg: #0e2419;     /* solid dark forest green */
    --hms-sidebar-active: #1f6f52; /* active nav pill */
    --hms-sidebar-border: rgba(255, 255, 255, 0.08);

    --hms-accent-blue: #2563eb;
    --hms-accent-amber: #d97706;
    --hms-accent-purple: #9333ea;

    --hms-bg: #f5f5f4;             /* stone-100 */
    --hms-surface: #ffffff;
    --hms-text: #1c1917;           /* stone-900 */
    --hms-text-muted: #78716c;     /* stone-500 */
    --hms-text-faint: #a8a29e;     /* stone-400 */
    --hms-border: #e7e5e4;         /* stone-200 */

    --hms-radius: 12px;
    --hms-radius-sm: 8px;
    --hms-shadow-sm: 0 1px 3px rgba(28, 25, 23, 0.06);
}

/* ---- Base ---------------------------------------------------------------- */
body {
    background-color: var(--hms-bg);
    color: var(--hms-text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.94rem;
}

h1, h2, h3, h4, h5, h6, .font-heading {
    font-family: 'Poppins', 'Inter', sans-serif;
    font-weight: 700;
    letter-spacing: -0.01em;
}

a { text-decoration: none; }

/* Bootstrap's default placeholder renders nearly as dark as real input
   text, which reads as "already filled in" rather than a hint — lighten
   it portal-wide instead of leaving it per-input. */
.form-control::placeholder,
.form-select::placeholder,
textarea::placeholder {
    color: var(--hms-text-faint);
    opacity: 1;
}

code {
    background: rgba(26, 107, 79, 0.1);
    color: var(--hms-primary-dark);
    padding: 0.15em 0.5em;
    border-radius: 6px;
    font-size: 0.85em;
}

/* ---- Layout shell ---------------------------------------------------------- */
.app-wrapper {
    min-height: 100vh;
}

.sidebar {
    width: 264px;
    flex-shrink: 0;
    background: var(--hms-sidebar-bg);
    height: 100vh;
    padding: 0;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    align-self: flex-start;
    overflow-y: auto;
    overflow-x: hidden;
    transition: width 0.15s ease;
}

/* Icon-only collapsed sidebar — desktop only. The narrow drawer on
   mobile/tablet (<992px, see below) is a full-width off-canvas overlay
   with room to spare, so collapsing it there wouldn't save any space;
   this state is entirely opt-in via the topbar toggle and persisted in
   localStorage, applied on load by an inline script in sidebar.php
   (before the stylesheet paints, so there's no flash of the expanded
   sidebar first). */
@media (min-width: 992px) {
    .sidebar.collapsed {
        width: 80px;
    }
    .sidebar.collapsed .sidebar-brand {
        cursor: pointer;
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }
    .sidebar.collapsed .brand-text,
    .sidebar.collapsed .sidebar-section-label,
    .sidebar.collapsed .nav-label,
    .sidebar.collapsed .sidebar-nav .badge {
        display: none;
    }
    .sidebar.collapsed .sidebar-nav {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    .sidebar.collapsed .sidebar-nav .nav-link {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }
    .sidebar.collapsed .sidebar-nav .nav-link i {
        width: auto;
    }
}

.sidebar-brand {
    padding: 1.5rem 1.25rem 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--hms-sidebar-bg);
    flex-shrink: 0;
}

.sidebar-close {
    display: none;
    margin-left: auto;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 1.1rem;
}

.sidebar-brand .brand-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--hms-sidebar-active);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    color: #fff;
}

.sidebar-brand .brand-text {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.sidebar-section-label {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.35);
    font-weight: 700;
    padding: 1rem 1.25rem 0.4rem;
}

.sidebar-nav {
    padding: 0.35rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.sidebar-nav .nav-link {
    color: rgba(255, 255, 255, 0.72);
    padding: 0.6rem 0.85rem;
    border-radius: var(--hms-radius-sm);
    font-weight: 500;
    font-size: 0.88rem;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    transition: all 0.15s ease;
}

.sidebar-nav .nav-link i {
    font-size: 1.02rem;
    width: 20px;
    text-align: center;
    opacity: 0.9;
}

.sidebar-nav .nav-link:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

.sidebar-nav .nav-link.active {
    background: var(--hms-sidebar-active);
    color: #fff;
}

.sidebar-nav .nav-link.text-danger-link {
    color: #fca5a5 !important;
}

.sidebar-nav .nav-link.text-danger-link:hover {
    background: rgba(248, 113, 113, 0.14);
    color: #fecaca !important;
}

/* Sticky patient-identity bar — pinned to the top of the viewport on
   long patient-visit screens (doctor consultation, pharmacy dispense)
   so name/UHID/age/phone stay visible while scrolling through vitals,
   prescription rows, or the invoice below. Solid background is required
   for a sticky element or content scrolling underneath shows through. */
.patient-sticky-bar {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--hms-surface);
    box-shadow: var(--hms-shadow-sm);
}

/* The consultation screen's patient card (appointments/consult.php) — the page's own
   heading is deliberately generic now ("Consultation", not "Consultation · <name>"), so
   this card is where the patient's identity actually lives, made to read as the page's
   header rather than an incidental info strip. */
.patient-highlight-card { border-left: 4px solid var(--hms-primary, #16a34a); }
.patient-highlight-identity > div:last-child { font-size: 1.05rem; }
.patient-highlight-reason { text-align: right; }

@media (max-width: 575.98px) {
    .patient-highlight-reason { text-align: left; }
}

/* Topbar */
.topbar {
    background: var(--hms-surface);
    border-bottom: 1px solid var(--hms-border);
    padding: 0.85rem 1.5rem;
    gap: 1rem;
}

.topbar .page-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    margin: 0;
    white-space: nowrap;
}

.topbar-search {
    position: relative;
    flex-grow: 1;
    max-width: 420px;
}

.topbar-search i {
    position: absolute;
    left: 0.9rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--hms-text-faint);
}

.topbar-search input {
    width: 100%;
    background: var(--hms-bg);
    border: 1px solid var(--hms-border);
    border-radius: 999px;
    padding: 0.5rem 1rem 0.5rem 2.4rem;
    font-size: 0.86rem;
}

.topbar-search input:focus {
    outline: none;
    border-color: var(--hms-primary);
    background: #fff;
}

.topbar-bell {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--hms-text-muted);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.topbar-bell:hover {
    background: var(--hms-bg);
}

.user-chip {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.3rem 0.7rem 0.3rem 0.3rem;
    border-radius: 999px;
    border: 1px solid var(--hms-border);
    cursor: pointer;
    flex-shrink: 0;
}

.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--hms-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.app-content {
    min-width: 0;
    background: var(--hms-bg);
}

.app-footer {
    background: var(--hms-bg);
    border-top: 1px solid var(--hms-border);
}

/* ---- Typeahead (patient/medicine search-as-you-type) ------------------------ */
/* position:fixed and appended to <body> by attachTypeahead() in footer.php —
   deliberately NOT position:absolute inside the input's own parent, since
   several real homes for this (the prescription table on consult.php, the
   medicine cart on walk-in sale) sit inside a .table-responsive wrapper
   whose overflow-x:auto clips overflow-y too, which would otherwise hide
   this dropdown entirely. top/left/width are set inline per instance by
   positionDropdown(), not here. */
.typeahead-dropdown {
    display: none;
    position: fixed;
    z-index: 1080;
    background: #fff;
    border: 1px solid var(--hms-border);
    border-radius: var(--hms-radius-sm);
    box-shadow: var(--hms-shadow-sm);
    max-height: min(75vh, 620px);
    overflow-y: auto;
    margin-top: 2px;
}

.typeahead-dropdown.show {
    display: block;
}

.typeahead-caption {
    padding: 0.4rem 0.6rem;
    font-size: 0.78rem;
    font-weight: 600;
    background: #f1f5f2;
    border-bottom: 1px solid var(--hms-border);
}
.typeahead-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.typeahead-table thead th {
    position: sticky; top: 0; z-index: 1; background: #f1f5f2; text-align: left;
    padding: 0.35rem 0.6rem; font-size: 0.7rem; text-transform: uppercase; letter-spacing: .04em;
    border-bottom: 1px solid var(--hms-border);
}
.typeahead-table td { padding: 0.3rem 0.6rem; vertical-align: top; border-bottom: 1px solid var(--hms-border); }
.typeahead-table tr.typeahead-item { padding: 0; border: 0; cursor: pointer; }
.typeahead-table tr.typeahead-item:hover td, .typeahead-table tr.typeahead-item.active td { background: #dcefe4; }

.typeahead-item {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    border-bottom: 1px solid var(--hms-border);
    font-size: 0.85rem;
}

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

.typeahead-item:hover,
.typeahead-item.active {
    /* --hms-bg (#f5f5f4) used to be here — nearly indistinguishable from
       the dropdown's own white background, so keyboard arrow-key
       navigation looked like nothing was happening. */
    background: var(--hms-primary-light);
    border-left: 3px solid var(--hms-primary);
    padding-left: calc(0.75rem - 3px);
}

.typeahead-item .th-title {
    font-weight: 600;
}

.typeahead-item .th-meta {
    color: var(--hms-text-muted, #6c757d);
    font-size: 0.78rem;
}

.typeahead-item .th-uses {
    font-size: 0.76rem;
    margin-top: 0.1rem;
}

.typeahead-empty {
    padding: 0.6rem 0.75rem;
    color: var(--hms-text-muted, #6c757d);
    font-size: 0.85rem;
}

/* ---- Point-of-sale style screens (pharmacy walk-in sale) --------------------- */
/* One card holding the whole flow (customer -> medicines -> checkout) instead of
   several stacked cards that read as separate, disconnected forms. */
.pos-card .card-body {
    padding-bottom: 1.25rem;
}

.pos-section-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    color: var(--hms-text-muted, #6c757d);
    margin-bottom: 0.6rem;
}

/* The actual point of the whole form — kept visually distinct (tinted,
   larger) from the rest of the card so it reads as "this is what happens
   when you click," not just another row of controls. */
.pos-checkout-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--hms-bg);
    border-top: 1px solid var(--hms-border);
    border-radius: 0 0 var(--hms-radius) var(--hms-radius);
}

.pos-total {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 1.6rem;
    line-height: 1.1;
}

/* A completed sale's receipt — visually lighter than a full card (it's a
   past-tense confirmation, not the next thing to interact with) so it
   doesn't compete with the "New Sale" form for attention right below it. */
.pos-receipt-strip {
    background: var(--hms-surface, #fff);
    border: 1px solid var(--hms-border);
    border-left: 4px solid var(--hms-sidebar-active, #1a6b4f);
    border-radius: var(--hms-radius-sm);
    padding: 1rem 1.25rem;
}

/* The checkout summary side of a split POS layout (medicines on one side,
   "what this is worth right now" on the other) — the total is the single
   most-referenced number on the whole screen, so it gets its own visually
   distinct panel and a font size nothing else on the page competes with,
   instead of sitting in a text-sized line among a dozen other controls. */
.pos-summary {
    background: var(--hms-surface);
    border: 1px solid var(--hms-border);
    border-radius: var(--hms-radius);
    box-shadow: var(--hms-shadow-sm);
    padding: 1.25rem;
    position: sticky;
    top: 1rem;
}

.pos-summary-total {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 3rem;
    line-height: 1;
    color: var(--hms-primary-dark);
    letter-spacing: -0.01em;
}

.pos-summary-due {
    font-weight: 700;
    font-size: 1.05rem;
}

.pos-summary-due.is-due { color: #b91c1c; }
.pos-summary-due.is-settled { color: var(--hms-primary-text); }

.pos-qty-stepper .btn {
    width: 2.1rem;
    padding-left: 0;
    padding-right: 0;
}

/* ---- Cards ---------------------------------------------------------------- */
.card {
    border: 1px solid var(--hms-border);
    border-radius: var(--hms-radius);
    box-shadow: var(--hms-shadow-sm);
}

/* Every card-header sitewide used to render plain white (each page passed
   its own `bg-white` utility class, redundant with the old default below) —
   with dozens of stacked cards on screens like the consultation page, that
   left every section blending into the next with nothing but a thin border
   between them. Giving every header this soft brand tint by default (no
   per-file class needed — `bg-white` was stripped from every card-header
   sitewide) makes each card visually distinct at a glance without moving to
   a strong, attention-competing color. */
.card-header {
    border-radius: var(--hms-radius) var(--hms-radius) 0 0 !important;
    border-bottom: 1px solid var(--hms-border);
    font-weight: 700;
    background: var(--hms-primary-light);
    color: var(--hms-primary-text);
}

/* ---- Tables — mobile scroll behavior ---------------------------------------
   Bootstrap's .table-responsive already makes a wide table horizontally
   scrollable, but on its own that's not enough: without `white-space:
   nowrap` on cells, text wraps to fit the *visible* width instead of
   overflowing — so a phone got the worst of both, a garbled multi-line
   table AND clipped-off rightmost columns, with no visual hint that
   there was more to scroll to. Forcing cells to a single line makes the
   table actually overflow (as intended) so scrolling reveals it cleanly,
   and the edge shadows below make that scrollability visible at a
   glance instead of a silent affordance a phone user has to discover by
   accident. Block-level children (the "name on one line, UHID below"
   pattern used throughout) are unaffected — nowrap only stops a single
   text run from wrapping, it doesn't merge separate block elements. */
.table-responsive {
    -webkit-overflow-scrolling: touch;
    background:
        linear-gradient(to right, var(--hms-surface) 30%, rgba(255, 255, 255, 0)),
        linear-gradient(to left, var(--hms-surface) 30%, rgba(255, 255, 255, 0)) 100% 0,
        radial-gradient(farthest-side at 0 50%, rgba(28, 25, 23, 0.18), rgba(28, 25, 23, 0)),
        radial-gradient(farthest-side at 100% 50%, rgba(28, 25, 23, 0.18), rgba(28, 25, 23, 0)) 100% 0;
    background-repeat: no-repeat;
    background-color: var(--hms-surface);
    background-size: 32px 100%, 32px 100%, 10px 100%, 10px 100%;
    background-position: 0 0, 100% 0, 0 0, 100% 0;
    background-attachment: local, local, scroll, scroll;
}

.table-responsive > .table th,
.table-responsive > .table td {
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    .table-responsive > .table th,
    .table-responsive > .table td {
        padding: 0.55rem 0.65rem;
        font-size: 0.83rem;
    }
}

/* ---- Buttons ---------------------------------------------------------------- */
.btn {
    border-radius: var(--hms-radius-sm);
    font-weight: 600;
    font-size: 0.87rem;
    padding: 0.5rem 1.1rem;
}

.btn-sm {
    border-radius: 7px;
    padding: 0.32rem 0.7rem;
}

.btn-primary {
    background: var(--hms-primary);
    border-color: var(--hms-primary);
}

.btn-primary:hover, .btn-primary:focus {
    background: var(--hms-primary-dark);
    border-color: var(--hms-primary-dark);
}

.btn-outline-primary {
    color: var(--hms-primary);
    border-color: var(--hms-primary);
}

.btn-outline-primary:hover {
    background: var(--hms-primary);
    border-color: var(--hms-primary);
}

/* ---- Forms ---------------------------------------------------------------- */
.form-control, .form-select {
    border-radius: var(--hms-radius-sm);
    border-color: var(--hms-border);
    padding: 0.55rem 0.85rem;
    font-size: 0.9rem;
}

/* The padding above would otherwise remove the room Bootstrap keeps on the right for the dropdown arrow,
   so the selected text ran into it ("25 / page" over the arrow). */
.form-select, .form-select-sm { padding-right: 2.25rem; }

.form-control:focus, .form-select:focus {
    border-color: var(--hms-primary);
    box-shadow: 0 0 0 0.2rem rgba(26, 107, 79, 0.14);
}

/* The browser's built-in up/down spinner on every number input, portal-wide
   — every quantity/amount field either has its own +/- controls where that
   matters or is just typed directly, so the spinner is pure clutter. */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}

.form-label {
    font-weight: 600;
    font-size: 0.83rem;
    color: var(--hms-text);
    margin-bottom: 0.35rem;
}

/* ---- Badges & pills ---------------------------------------------------------------- */
.badge {
    border-radius: 999px;
    font-weight: 600;
    padding: 0.4em 0.85em;
    font-size: 0.72rem;
    letter-spacing: 0.01em;
}

.badge-soft-green { background: var(--hms-primary-light); color: var(--hms-primary-text); }
.badge-soft-gray  { background: #f0efed; color: var(--hms-text-muted); }
.badge-soft-amber { background: #fef3c7; color: #92400e; }
.badge-soft-blue  { background: #dbeafe; color: #1d4ed8; }

/* ---- Filter tabs (underline-style tab strip, on-theme replacement for
   Bootstrap's default blue .nav-pills — used for timeline/list category
   filters, e.g. patient Full History) ---------------------------------- */
.filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    border-bottom: 2px solid var(--hms-border);
}

.filter-tab {
    display: inline-flex;
    align-items: center;
    border: none;
    background: none;
    box-shadow: none;
    color: var(--hms-text-muted);
    font-weight: 600;
    font-size: 0.86rem;
    padding: 0 0 0.65rem 0;
    margin-bottom: -2px;
    border-bottom: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
    cursor: pointer;
}

.filter-tab .bi {
    margin-right: 0.4rem;
    font-size: 0.95rem;
}

.filter-tab .badge {
    margin-left: 0.4rem;
    background: var(--hms-bg);
    color: var(--hms-text-muted);
    font-weight: 700;
}

.filter-tab:hover {
    color: var(--hms-text);
}

.filter-tab.active {
    color: var(--hms-primary);
    border-bottom-color: var(--hms-primary);
}

.filter-tab.active .badge {
    background: var(--hms-primary-light);
    color: var(--hms-primary-text);
}
.badge-soft-red   { background: #fee2e2; color: #b91c1c; }
.badge-soft-teal  { background: #ccfbf1; color: #0f766e; }
.badge-soft-purple { background: #f3e8ff; color: #7e22ce; }

/* ---- Tables ---------------------------------------------------------------- */
.table {
    margin-bottom: 0;
}

.table thead th {
    font-size: 0.78rem;
    color: var(--hms-text-muted);
    font-weight: 700;
    border-bottom: 2px solid var(--hms-border);
    padding-bottom: 0.75rem;
}

.table td, .table th {
    border-color: var(--hms-border);
    vertical-align: middle;
}

.table-hover tbody tr:hover {
    background-color: rgba(26, 107, 79, 0.035);
}

/* ---- Stat cards (dashboard) ---------------------------------------------------------------- */
.stat-card {
    border: 1px solid var(--hms-border);
    border-left: 4px solid var(--stat-color, var(--hms-primary));
    border-radius: var(--hms-radius);
    position: relative;
}

.stat-card .card-body {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.stat-card .stat-label {
    color: var(--hms-text-muted);
    font-size: 0.82rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.stat-card .stat-value {
    font-family: 'Poppins', sans-serif;
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.stat-card .stat-icon {
    font-size: 1.5rem;
    color: var(--stat-color, var(--hms-primary));
    opacity: 0.9;
    flex-shrink: 0;
}

.stat-accent-green  { --stat-color: #16a34a; }
.stat-accent-blue   { --stat-color: var(--hms-accent-blue); }
.stat-accent-amber  { --stat-color: var(--hms-accent-amber); }
.stat-accent-purple { --stat-color: var(--hms-accent-purple); }
.stat-accent-red    { --stat-color: #b91c1c; }

/* ---- Auth page (login) ---------------------------------------------------------------- */
.auth-page {
    min-height: 100vh;
    display: flex;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--hms-bg);
}

.auth-panel-left {
    flex: 1 1 46%;
    max-width: 620px;
    background: linear-gradient(135deg, #0a1f15 0%, #1f8f6d 100%);
    color: #fff;
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100vh;
}

.auth-panel-left .brand-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
}

.auth-panel-left h1 {
    font-family: 'Poppins', sans-serif;
    font-size: 2.1rem;
    line-height: 1.25;
    font-weight: 700;
    color: #ecfdf5;
    max-width: 460px;
}

.auth-panel-left .auth-subtext {
    color: rgba(236, 253, 245, 0.75);
    max-width: 420px;
    font-size: 0.95rem;
}

.auth-panel-left .auth-footer {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.78rem;
}

.auth-panel-right {
    flex: 1 1 54%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
}

.auth-form-wrap {
    width: 100%;
    max-width: 460px;
}

.btn-sage {
    background: var(--hms-sage);
    border-color: var(--hms-sage);
    color: #fff;
}

.btn-sage:hover {
    background: var(--hms-sage-dark);
    border-color: var(--hms-sage-dark);
    color: #fff;
}

/* ==========================================================================
   Patient portal (/portal/*.php) — mobile-first shell, deliberately
   separate from the staff sidebar layout above. Bottom tab bar instead of
   a sidebar, single-column content, max-width capped so it still looks
   fine on a desktop browser during testing.
   ========================================================================== */
.portal-body {
    background: var(--hms-bg);
    min-height: 100vh;
}

.portal-topbar {
    background: var(--hms-surface);
    border-bottom: 1px solid var(--hms-border);
    height: 56px;
    position: sticky;
    top: 0;
    z-index: 20;
}

.portal-content {
    max-width: 560px;
    margin: 0 auto;
    padding: 1rem;
}

.portal-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 560px;
    margin: 0 auto;
    background: var(--hms-surface);
    border-top: 1px solid var(--hms-border);
    box-shadow: 0 -2px 10px rgba(28, 25, 23, 0.06);
    display: flex;
    z-index: 20;
}

.portal-bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 2px 10px;
    color: var(--hms-text-muted);
    text-decoration: none;
    font-size: 0.68rem;
    font-weight: 500;
}

.portal-bottom-nav-item i {
    font-size: 1.2rem;
}

.portal-bottom-nav-item.active {
    color: var(--hms-primary);
}

.portal-card {
    background: var(--hms-surface);
    border: 1px solid var(--hms-border);
    border-radius: var(--hms-radius);
    box-shadow: var(--hms-shadow-sm);
    padding: 1rem;
    margin-bottom: 1rem;
}

/* ---- Mobile off-canvas sidebar --------------------------------------------
   Below the lg breakpoint the sidebar stops being a normal flex-row item
   (which is what used to push the topbar/content down the page when
   opened — the whole point of this block is that it no longer does) and
   becomes a fixed-position drawer that slides in OVER the page, plus a
   semi-transparent backdrop behind it. Toggled by a small vanilla-JS
   helper in includes/header.php (toggleMobileSidebar()) rather than
   Bootstrap's .collapse component, since .collapse animates height/
   display in normal flow — exactly the behavior we're moving away from. */
@media (max-width: 991.98px) {
    .sidebar {
        position: fixed;
        /* An explicit height (not just top:0/bottom:0, which measured as
           un-clamped in testing — the drawer rendered at its full content
           height, ~2500px, with nothing to scroll *inside* it, so opening
           it just made the whole PAGE scrollable past the fold instead of
           the drawer itself) is what actually clips this to the screen.
           100dvh tracks the real visible viewport as a mobile browser's
           address bar shows/hides; 100vh is the fallback for browsers
           that don't support dvh yet. */
        top: 0;
        left: 0;
        width: 280px;
        max-width: 85vw;
        height: 100vh;
        height: 100dvh;
        min-height: 0;
        z-index: 1045;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        box-shadow: 0 0 24px rgba(0, 0, 0, 0.25);
        overflow-y: auto;
        display: flex;
        flex-direction: column;
    }
    .sidebar.show {
        transform: translateX(0);
    }
    /* This app's nav has a lot of sections (Patients, Appointments, IPD,
       OT, Pharmacy, Lab, Radiology, Blood Bank, Emergency, Billing,
       Insurance, Staff, Leave...) — taller than most phone screens. The
       brand row (which now carries the explicit close button) stays
       pinned to the top of the drawer while just the nav list below it
       scrolls, so the close button is reachable immediately without
       hunting through the whole list first. The topbar's own hamburger
       button is no help here since the open drawer sits on top of it
       (same reason a backdrop-tap works but isn't obvious/discoverable
       enough on its own). The sticky-pinned brand row itself is a shared
       base rule now (also fixes the same "whole page scrolls instead of
       just the nav" issue on desktop), so nothing to override here. */
    .sidebar-close {
        display: flex;
    }
    .sidebar-backdrop {
        display: none;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(15, 23, 22, 0.5);
        z-index: 1044;
    }
    .sidebar-backdrop.show {
        display: block;
    }
    /* Background-scroll lock while the drawer is open — needs to target
       <html> as well as <body>: on mobile, the *document* (html element)
       is what actually scrolls, so body{overflow:hidden} alone measured
       as having no effect at all (confirmed via window.scrollY still
       advancing with the drawer open). */
    html.sidebar-open,
    body.sidebar-open {
        overflow: hidden;
        height: 100%;
    }
    .auth-page {
        flex-direction: column;
    }
    .auth-panel-left {
        min-height: auto;
        max-width: none;
    }
}


/* Medicine rows on the billing screen: the Add form, doctor-prescribed rows and added rows share these columns so everything lines up. */
.dl-grid { display: grid; grid-template-columns: minmax(140px, 1fr) 92px 170px 62px 66px 66px 90px 76px; gap: 8px; align-items: center; }
.dl-grid .form-control, .dl-grid .form-select { width: 100%; }
.dl-head { font-size: 0.75rem; font-weight: 600; color: var(--hms-text-muted, #6b6b66); }
/* S.No column: only the header row and actual line-item rows get it — [data-cat] is what
   marks a real item row (medicine, consultation fee, lab/imaging test), never the plain
   "Add medicine" input form above the list, which reuses .dl-grid for its own 8 columns
   and would misalign if it also gained a 9th. The number itself is a CSS counter, not
   PHP/JS-tracked state, so it never needs to be recalculated when a row is added or removed
   — it just always reflects current top-to-bottom position. */
.dl-grid[data-cat], .dl-head, .dl-add-row .dl-grid { grid-template-columns: 26px minmax(140px, 1fr) 92px 170px 62px 66px 66px 90px 76px; }
/* Medicine rows (and their header and the Add row) also carry Batch and Expiry columns right after the name. */
.dl-grid[data-cat="pharmacy"], .dl-head, .dl-add-row .dl-grid { grid-template-columns: 26px minmax(140px, 1fr) 84px 74px 92px 170px 62px 66px 66px 90px 76px; }
.dl-bx { font-size: 0.78rem; line-height: 1.15; overflow-wrap: anywhere; }
/* Each category card (Medicines / Lab / Procedures...) restarts its own S.No at 1 — they're
   genuinely separate boxes now (see .dl-items-grid above), not one flat list, so numbering
   continuing across from whichever card happened to render first would be confusing. */
.dl-cat-card, #pendingItemsPanel, #invoiceLinesContainer { counter-reset: dlrow; }
.dl-grid[data-cat] { counter-increment: dlrow; }
.dl-sno::before { content: counter(dlrow); color: var(--hms-text-muted, #6b6b66); font-size: 0.78rem; }
/* Medicines, then lab/imaging & services, as two visually distinct groups rather than
   interleaved by whatever order they were added in — see render_pending_items_html() and
   render_current_invoice_panel() in pharmacy/dispense_detail.php, which do the actual
   grouping. The divider label alone read as just a section title with no visual weight
   under it, so every row also gets a background tint by category — blue for medicines,
   amber for lab/imaging & consultation — not just the text heading between them.
   .dl-extra (below) still overrides this for a pharmacy row added straight at billing
   (not on the original prescription): that's a different, more specific thing to flag
   than "this is a medicine", so it keeps its own distinct green rather than blending in. */
.dl-grid[data-cat="pharmacy"] { background: #eff6ff; border-radius: 4px; }
.dl-grid[data-cat="lab"], .dl-grid[data-cat="consultation"] { background: #fff7ed; border-radius: 4px; }
.dl-grid[data-cat="procedure"] { background: #f0fdfa; border-radius: 4px; }
/* Each category (medicine/lab/procedure) is now a genuine boxed .dl-cat-card (see
   dl_pending_card_html() and .dl-items-grid above) with its own colored .card-header — these
   color classes are applied to that header, one per category, matching the row tints above. */
.dl-group-divider-pharmacy { background: #dbeafe; color: #1e3a5f; }
.dl-group-divider-lab, .dl-group-divider-consultation { background: #ffedd5; color: #7c3a00; }
.dl-group-divider-procedure { background: #d1fae5; color: #065f46; }
@media (max-width: 991px) {
    .dl-grid { grid-template-columns: repeat(3, 1fr); }
    .dl-head { display: none; }
    .dl-sno { display: none; }
}

/* Compact total/payment bar on the billing screen, built from explicit, always-separate
   rows (bar-row-top / bar-row-totals) rather than one big flex-wrap container that happens
   to break into several lines — a wrapped line inherits whatever width flexbox gave the box
   it wrapped out of, which put the totals line at inconsistent starting positions depending
   on exactly how much else was on the line above. Each bar-row is its own full-width flex
   line, so where it starts never depends on what wrapped above it. */
.bar-compact { display: flex; flex-direction: column; gap: 0.4rem; }
.bar-compact .form-control, .bar-compact .form-select, .bar-compact .input-group-text, .bar-compact .btn { height: 30px; padding-top: 0.1rem; padding-bottom: 0.1rem; font-size: 0.82rem; }
.bar-compact .btn i { font-size: 0.9rem; }
.bar-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; width: 100%; }
/* Identity/discount/Save-draft/Preview/Cancel on the left and Pay/Record on the right must
   stay one single line, never split into a wrapped second line — so this row doesn't wrap at
   all. If a narrow viewport can't fit everything, the row scrolls sideways instead. */
.bar-row-top { justify-content: space-between; flex-wrap: nowrap; overflow-x: auto; }
/* Bootstrap's .input-group wraps its own children by default — on a narrow row that kicked in
   before this row's own horizontal scroll did, dropping just the Disc "%/₹" dropdown onto a
   second line while everything around it stayed put. Forcing every input-group in this row to
   stay unwrapped means the row scrolls as a whole instead of any one control breaking apart. */
.bar-row-top .input-group { flex-wrap: nowrap; }
.bar-row-totals { justify-content: flex-end; align-items: baseline; gap: 0.75rem; }
/* Collapses to nothing (no gap left behind) until a patient is actually known — walk-in
   draft mode starts with this row empty and JS fills it in once a customer is picked or
   typed in; see refreshPriceCardIdentity() in pharmacy/dispense_detail.php. */
.bar-row-patient:empty { display: none; }
.bar-compact .bar-group { display: flex; flex-wrap: nowrap; align-items: center; gap: 0.4rem; }
#categoryTotalsBar:empty { display: none; }

/* Medicines the pharmacy added on top of a doctor's prescription stand out, and any row that has just appeared flashes once.
   Selector is deliberately as specific as [data-cat="pharmacy"]'s own category-tint rule
   above (same "two class-level selectors" weight) plus one more — .dl-extra is only ever
   added alongside data-cat="pharmacy" (see render_pending_items_html()), so without that
   extra specificity this and the category tint would tie and source order would decide,
   which is fragile; this way it always wins outright regardless of where either rule sits
   in the file. */
.dl-grid[data-cat].dl-extra { background: #ecfdf3; box-shadow: inset 3px 0 0 #16a34a; border-radius: 4px; }
.dl-flash { animation: dlFlash 1.8s ease-out; }
@keyframes dlFlash { 0% { background-color: #fde68a; } 100% { background-color: transparent; } }
.dl-card-flash { animation: dlCardFlash 1.8s ease-out; }
@keyframes dlCardFlash { 0% { box-shadow: 0 0 0 3px #fbbf24; } 100% { box-shadow: 0 0 0 0 transparent; } }
.dl-extra > :first-child { padding-left: 9px; }

/* A walk-in medicine still sitting in the local cart (not yet saved to any invoice) fuses
   visually onto the bottom of the "already added" card for the same category, instead of
   showing as its own separate "Medicines" box right underneath — two same-titled cards read
   as a glitchy duplicate, not two genuinely different states. See getOrCreatePendingCard() in
   pharmacy/dispense_detail.php, which adds these classes only when an "added" card for the
   same category already exists at the moment the first local row needs a home. The dashed
   seam (not a plain line) is deliberate — it's the one visual cue left that this half of the
   box hasn't been recorded yet, now that there's no second header to say so; each row also
   gets its own "Not recorded" badge for the same reason. */
.dl-cat-card-fuse-top { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: none; margin-bottom: 0 !important; }
.dl-cat-card-fuse-bottom { border-top-left-radius: 0; border-top-right-radius: 0; border-top: 1px dashed #b8bcc4; margin-top: 0 !important; }
/* Reads as one continuous list once fused, so its S.No picks up where the card above it left
   off (1, 2, 3...) instead of restarting at 1 — overrides the per-card counter-reset above.
   This relies on #invoiceLinesContainer (the "added" card's rows) appearing before
   #pendingItemsPanel (this card's rows) in the actual HTML source — true today, and CSS
   counters follow DOM/source order regardless of the flex `order` values used to visually
   place these two adjacent, so it doesn't depend on that ordering staying coincidentally
   aligned with anything else. */
.dl-cat-card-fuse-bottom { counter-reset: none; }

/* Billing Counter: one column, in this order - medicines added, medicine search, lab search,
   lab added, procedure search, procedures added, custom item. The AJAX targets
   (#invoiceLinesContainer, #pendingItemsPanel, #invoicePanel) are display:contents so the
   category cards inside them can be ordered individually among the search boxes. */
.dl-items-grid { display: flex; flex-direction: column; gap: 0.4rem; }
.dl-items-grid > .card, .dl-items-grid .dl-cat-card { margin-bottom: 0 !important; }
/* Tighter than the rest of the app's cards on purpose - this page is a working list the
   pharmacist scans line by line all day, not a spaced-out form, so every bit of padding
   trimmed here is more of the bill visible without scrolling. */
.dl-items-grid .pos-card .card-body { padding: 0.4rem 0.6rem; }
.dl-items-grid .pos-section-label { margin-bottom: 0.2rem !important; font-size: 0.65rem; }
.dl-items-grid .dl-cat-card .card-header { padding: 0.2rem 0.5rem !important; }
.dl-items-grid .dl-cat-card .card-body { padding: 0.25rem 0.4rem !important; }
.dl-items-grid .dl-cat-card .dl-grid[data-cat] { margin-bottom: 0.15rem !important; padding-bottom: 0.15rem !important; }
.dl-items-grid #dlMedicineHead { margin-bottom: 0.15rem !important; }
#invoiceLinesContainer, #pendingItemsPanel, #invoicePanel { display: contents; }
#draftBanner { order: 0; }
#dlAddMedicineCard { order: 15; }
#dlMedicineHead { order: 11; margin-bottom: 0 !important; }
#dlNoItemsYet, #dlInvCardpharmacy { order: 12; }
#dlPendCardpharmacy { order: 13; }
#dlAllDispensed { order: 14; }
#dlInvCardconsultation, #dlPendCardconsultation { order: 16; }
#dlAddLabCard { order: 23; }
#dlInvCardlab { order: 21; }
#dlPendCardlab { order: 22; }
#dlAddProcedureCard { order: 33; }
#dlInvCardprocedure { order: 31; }
#dlPendCardprocedure { order: 32; }
#dlInvCardother { order: 40; }
#dlCustomItemCard { order: 50; }

/* Billing Counter category tabs (Medicine / Lab / Procedures) — pure CSS, driven by a
   data-active-tab attribute on .dl-items-grid itself. Deliberately NOT implemented by moving
   these cards into separate tab-pane subtrees: the dlInvCard and dlPendCard cards (one pair
   per category) are created/replaced by JS (AJAX swaps, the "fuse" logic) independently of
   this attribute, so hiding by a fixed id list here keeps working automatically no matter when
   those cards are (re)created — no need to hook tab-filtering into that JS at all.
   #dlInvCardother and #dlCustomItemCard are deliberately never hidden (outside the 3-tab
   scope, always visible per request). */
.dl-items-grid[data-active-tab="medicine"] #dlInvCardconsultation,
.dl-items-grid[data-active-tab="medicine"] #dlPendCardconsultation,
.dl-items-grid[data-active-tab="medicine"] #dlAddConsultCard,
.dl-items-grid[data-active-tab="medicine"] #dlAddLabCard,
.dl-items-grid[data-active-tab="medicine"] #dlInvCardlab,
.dl-items-grid[data-active-tab="medicine"] #dlPendCardlab,
.dl-items-grid[data-active-tab="medicine"] #dlAddProcedureCard,
.dl-items-grid[data-active-tab="medicine"] #dlInvCardprocedure,
.dl-items-grid[data-active-tab="medicine"] #dlPendCardprocedure,
.dl-items-grid[data-active-tab="lab"] #dlAddConsultCard,
.dl-items-grid[data-active-tab="lab"] #dlAddMedicineCard,
.dl-items-grid[data-active-tab="lab"] #dlMedicineHead,
.dl-items-grid[data-active-tab="lab"] #dlNoItemsYet,
.dl-items-grid[data-active-tab="lab"] #dlInvCardpharmacy,
.dl-items-grid[data-active-tab="lab"] #dlPendCardpharmacy,
.dl-items-grid[data-active-tab="lab"] #dlAllDispensed,
.dl-items-grid[data-active-tab="lab"] #dlInvCardconsultation,
.dl-items-grid[data-active-tab="lab"] #dlPendCardconsultation,
.dl-items-grid[data-active-tab="lab"] #dlAddProcedureCard,
.dl-items-grid[data-active-tab="lab"] #dlInvCardprocedure,
.dl-items-grid[data-active-tab="lab"] #dlPendCardprocedure,
.dl-items-grid[data-active-tab="procedure"] #dlAddConsultCard,
.dl-items-grid[data-active-tab="procedure"] #dlAddMedicineCard,
.dl-items-grid[data-active-tab="procedure"] #dlMedicineHead,
.dl-items-grid[data-active-tab="procedure"] #dlNoItemsYet,
.dl-items-grid[data-active-tab="procedure"] #dlInvCardpharmacy,
.dl-items-grid[data-active-tab="procedure"] #dlPendCardpharmacy,
.dl-items-grid[data-active-tab="procedure"] #dlAllDispensed,
.dl-items-grid[data-active-tab="procedure"] #dlInvCardconsultation,
.dl-items-grid[data-active-tab="procedure"] #dlPendCardconsultation,
.dl-items-grid[data-active-tab="procedure"] #dlAddLabCard,
.dl-items-grid[data-active-tab="procedure"] #dlInvCardlab,
.dl-items-grid[data-active-tab="procedure"] #dlPendCardlab,
.dl-items-grid[data-active-tab="consultation"] #dlAddMedicineCard,
.dl-items-grid[data-active-tab="consultation"] #dlMedicineHead,
.dl-items-grid[data-active-tab="consultation"] #dlNoItemsYet,
.dl-items-grid[data-active-tab="consultation"] #dlInvCardpharmacy,
.dl-items-grid[data-active-tab="consultation"] #dlPendCardpharmacy,
.dl-items-grid[data-active-tab="consultation"] #dlAllDispensed,
.dl-items-grid[data-active-tab="consultation"] #dlAddLabCard,
.dl-items-grid[data-active-tab="consultation"] #dlInvCardlab,
.dl-items-grid[data-active-tab="consultation"] #dlPendCardlab,
.dl-items-grid[data-active-tab="consultation"] #dlAddProcedureCard,
.dl-items-grid[data-active-tab="consultation"] #dlInvCardprocedure,
.dl-items-grid[data-active-tab="consultation"] #dlPendCardprocedure {
    display: none !important;
}
#dlAddConsultCard { order: 15; }



/* Doctor prescriptions waiting: orange edge and a soft blink so they are noticed at the counter and on the dashboard. */
.ws-rx-doctor { border-left: 4px solid #d97706; animation: wsRxBlink 1.4s ease-in-out infinite; }
@keyframes wsRxBlink { 0%, 100% { background-color: #fff7ed; } 50% { background-color: #fdba74; } }

#pharmacyDash .btn-outline-warning { color: #92400e; border-color: #d97706; }
#pharmacyDash .btn-outline-warning:hover { background: #d97706; color: #fff; }

/* Preserves exactly the line breaks/spacing typed into a consultation textarea (chief
   complaint, examination, diagnosis, etc.) wherever that text is displayed again elsewhere —
   without this, HTML collapses newlines and a structured multi-line note (e.g. G/E, S/E, CVS,
   RS, P/A, CNS, L/E) reads back as one run-on line. */
.text-preformatted { white-space: pre-wrap; word-wrap: break-word; }


/* Sidebar menu search + collapsible groups (see the script at the end of includes/sidebar.php). */
/* Brand + search form one pinned block: the search stays right under the "Hospital Management System" header while the menu scrolls. */
.sidebar-top { position: sticky; top: 0; z-index: 5; flex-shrink: 0; background: var(--hms-sidebar-bg); box-shadow: 0 6px 8px -6px rgba(0, 0, 0, 0.45); }
.sidebar-top .sidebar-brand { position: static; }
.sidebar-search { position: relative; padding: 0.6rem 0.85rem 0.55rem; }
.sidebar-search i { position: absolute; left: 1.55rem; top: 50%; transform: translateY(-35%); color: rgba(255, 255, 255, 0.45); font-size: 0.8rem; pointer-events: none; }
.sidebar-search input { width: 100%; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); color: #fff; border-radius: var(--hms-radius-sm); padding: 0.42rem 0.6rem 0.42rem 2rem; font-size: 0.82rem; outline: none; }
.sidebar-search input::placeholder { color: rgba(255, 255, 255, 0.4); }
.sidebar-search input:focus { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.35); }
.sidebar .sg-head { display: flex; align-items: center; justify-content: space-between; cursor: pointer; user-select: none; }
.sidebar .sg-head:hover { color: rgba(255, 255, 255, 0.65); }
.sidebar .sg-head .sg-chevron { font-size: 0.65rem; transition: transform 0.15s ease; }
.sidebar .sg-head.sg-closed .sg-chevron { transform: rotate(-90deg); }
.sidebar .sidebar-nav.sg-closed { display: none; }
.sidebar .sg-hidden { display: none !important; }
@media (min-width: 992px) {
    .sidebar.collapsed .sidebar-search { display: none; }
    /* Icon-only mode has no headings to click, so every group stays open. */
    .sidebar.collapsed .sidebar-nav.sg-closed { display: flex; }
}

/* Pharmacy menu alert counts: the heading badge only shows while the group is closed. */
.sidebar .sg-head .sg-alert { display: none; }
.sidebar .sg-head.sg-closed .sg-alert { display: inline-block; }
.sidebar .sg-head > span { display: inline-flex; align-items: center; }

.quick-action { transition: transform 0.12s ease, box-shadow 0.12s ease; }
.quick-action:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); }

/* Billing Counter on a tablet / small laptop (sidebar still open, ~700-900px of content): the
   payment bar wraps onto a second line instead of hiding Record / Record & Print off-screen, and
   the medicine grid uses tighter columns so Amount / Action / Add are never cut off. */
@media (max-width: 1279px) {
    .bar-row-top { flex-wrap: wrap; overflow-x: visible; row-gap: 0.4rem; }
}
@media (min-width: 992px) and (max-width: 1279px) {
    .dl-grid { grid-template-columns: minmax(80px, 1fr) 64px 150px 50px 54px 54px 64px 60px; gap: 6px; }
    .dl-grid[data-cat], .dl-head, .dl-add-row .dl-grid { grid-template-columns: 22px minmax(80px, 1fr) 64px 150px 50px 54px 54px 64px 60px; }
    .dl-grid[data-cat="pharmacy"], .dl-head, .dl-add-row .dl-grid { grid-template-columns: 22px minmax(80px, 1fr) 70px 62px 64px 150px 50px 54px 54px 64px 60px; }
}
@media (max-width: 991px) {
    .bar-compact .bar-group { flex-wrap: wrap; }
}

/* Clickable table rows (see footer.php) */
tbody tr.row-link { cursor: pointer; }
tbody tr.row-link:hover > td { background-color: rgba(26, 107, 79, .07); }

/* Back-to-top button (footer.php) */
.hms-totop { position: fixed; right: 22px; bottom: 22px; z-index: 1030; width: 44px; height: 44px; border-radius: 50%; border: 0; color: #fff; background: var(--hms-primary, #1a6b4f); box-shadow: 0 6px 18px rgba(14,36,25,.35); display: none; align-items: center; justify-content: center; font-size: 1.2rem; }
.hms-totop.show { display: flex; }
.hms-totop:hover { background: var(--hms-primary-dark, #124d39); }
@media print { .hms-totop { display: none !important; } }

/* Keyboard-shortcut strip (footer.php hmsShortcutHelp) */
.hms-sc-bar { display: flex; flex-wrap: nowrap; overflow-x: auto; align-items: center; gap: 4px 12px; margin-bottom: 10px; padding: 6px 12px; background: #eef6f2; border: 1px solid #cfe3d9; border-radius: 10px; font-size: .74rem; color: #124d39; }
.hms-sc-lead { font-weight: 700; }
.hms-sc-item { white-space: nowrap; }
.hms-sc-bar kbd { font-size: .7rem; }
@media print { .hms-sc-bar { display: none !important; } }

tbody tr.row-pick:hover > td { background-color: rgba(26, 107, 79, .09); }


/* The Add row sits at the end of its list as the next numbered row: no title, joined to the card above. */
.dl-items-grid .dl-add-row { border-top: 1px dashed #b8bcc4; border-top-left-radius: 0; border-top-right-radius: 0; }
.dl-add-sno { text-align: center; color: var(--hms-text-muted, #6b6b66); font-size: 0.78rem; }
.dl-add-line { display: grid; grid-template-columns: 26px minmax(160px, 1fr) 110px 150px; gap: 0.4rem; align-items: center; }
@media (max-width: 991px) {
    .dl-add-row .dl-grid { grid-template-columns: repeat(3, 1fr); }
    .dl-add-sno { display: none; }
    .dl-add-line { grid-template-columns: 1fr 100px; }
    .dl-add-line .dl-add-main { grid-column: 1 / -1; }
}


/* The bill bar's small patient line is replaced by the patient card (same in every mode). */
.bar-row-patient { display: none !important; }



/* Amounts strip: category totals on top, then Total - Discount - Paid = Due as labelled figures with Due highlighted. */
.bar-row-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem 1rem; padding: 8px 16px; background: #eef6f2; border: 1px solid #cfe3d9; border-radius: 10px; }
.bar-row-strip #categoryTotalsBar { flex: 1 0 100%; color: #55615b; }
.bar-eq { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 0.5rem 0.7rem; margin-left: auto; }
.bar-eq .eq-cell { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.bar-eq .eq-cell small { font-size: 0.68rem; text-transform: uppercase; letter-spacing: .04em; color: #6b7a72; margin-bottom: 2px; }
.bar-eq .eq-cell b { font-size: 1.15rem; font-weight: 700; }
.bar-eq .eq-op { font-size: 1.3rem; color: #8a978f; padding-bottom: 2px; }
.bar-eq .eq-due { background: #fff; border: 1px solid #b7d6c6; border-radius: 8px; padding: 3px 12px; }
.bar-eq .eq-due small { color: #1a6b4f; }
.bar-eq .eq-due b { font-size: 1.9rem; color: #12382a; }
.bar-strip-actions { display: flex; align-items: flex-end; }
@media (max-width: 991px) { .bar-eq { margin-left: 0; } }

/* The strip is the card: no second border/padding around it. Category totals take the left, the equation the right. */
.dl-strip-card { border: 0; box-shadow: none; background: var(--bs-body-bg, #f5f5f4); }
.dl-strip-card > #invoicePanelContainer { padding: 0 !important; }
.bar-row-strip { flex-wrap: nowrap; align-items: stretch; gap: 1rem; padding: 10px 16px; }
.bar-row-strip #categoryTotalsBar { flex: 1 1 0; min-width: 0; align-self: center; line-height: 1.7; }
.bar-row-strip #categoryTotalsBar:empty { display: block; }
.bar-eq { flex: 0 0 auto; align-items: flex-end; flex-wrap: nowrap; }
.bar-strip-actions { align-self: flex-end; }
@media (max-width: 1199px) { .bar-row-strip { flex-wrap: wrap; } .bar-row-strip #categoryTotalsBar { flex: 1 0 100%; } }

/* Left side of the strip: category chips on top, the Discount control below them. */
.bar-strip-left { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.bar-row-strip .bar-strip-left #categoryTotalsBar { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 6px; line-height: 1.2; }
.cat-chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 3px 10px; background: #fff; border: 1px solid #cfe3d9; border-radius: 999px; font-size: 0.8rem; }
.cat-chip-l { color: #5f6e66; }
.cat-chip strong { color: #12382a; }
.bar-disc { display: flex; align-items: center; gap: 8px; }

/* Chips on one full-width row; below it the Discount control (left) and the equation (right). */
.bar-row-strip { flex-wrap: wrap; }
.bar-row-strip .bar-strip-left { display: contents; }
.bar-row-strip .bar-strip-left #categoryTotalsBar { flex: 1 0 100%; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
.bar-row-strip .bar-strip-left #categoryTotalsBar:empty { display: none; }
.cat-chip { white-space: nowrap; flex: 0 0 auto; }
.bar-row-strip .bar-disc { flex: 1 1 0; align-self: flex-end; }

/* Discount box sits directly above the Due box. */
.bar-due-col { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.bar-row-strip .bar-due-col .bar-disc { flex: 0 0 auto; align-self: flex-end; }



/* Discount shares the chips' row (right end); the equation with Due is the row below it. */
.bar-row-strip .bar-strip-left { display: flex; flex: 1 0 100%; align-items: center; gap: 14px; min-width: 0; }
.bar-row-strip .bar-strip-left #categoryTotalsBar { flex: 1 1 0; min-width: 0; }
.bar-row-strip .bar-strip-left .bar-disc { flex: 0 0 auto; margin-left: auto; }
.bar-row-strip .bar-eq { margin-left: auto; }

/* Strip: chips + Discount side by side (the earlier column layout of .bar-strip-left must not apply). */
.bar-row-strip .bar-strip-left { flex-direction: row; justify-content: flex-start; align-items: center; }
.bar-row-strip { padding: 8px 14px; gap: 6px 1rem; align-items: center; }
.bar-eq .eq-due b { font-size: 1.7rem; }

/* Tighter medicine / lab / procedure lists: less space between lines and around the cards. */
.dl-items-grid { gap: 0.25rem; }
.dl-items-grid .dl-cat-card .card-header { padding: 0.1rem 0.45rem !important; font-size: 0.8rem; }
.dl-items-grid .dl-cat-card .card-body { padding: 0.15rem 0.3rem !important; }
.dl-items-grid .dl-grid[data-cat] { gap: 6px; margin-bottom: 0.1rem !important; padding-bottom: 0.1rem !important; }
.dl-items-grid .dl-grid[data-cat] .form-control, .dl-items-grid .dl-add-row .dl-grid .form-control { height: 28px; padding-top: 0; padding-bottom: 0; font-size: 0.82rem; }
.dl-items-grid .mane-wrap { height: 32px !important; }
.dl-items-grid .dl-add-row .card-body { padding: 0.25rem 0.4rem; }
.dl-items-grid .dl-add-row .dl-grid .btn { height: 30px; padding-top: 0; padding-bottom: 0; }

/* Larger medicine / item names in the Billing Counter lists. */
.dl-items-grid .dl-grid[data-cat] > .fw-semibold { font-size: 1.05rem; font-weight: 700; line-height: 1.2; }









/* --- Medicine search as a large popup window --- */
.typeahead-backdrop { display: none; position: fixed; inset: 0; z-index: 1079; background: rgba(6, 16, 40, .55); pointer-events: none; }
.typeahead-backdrop.show { display: block; }
.typeahead-dropdown.typeahead-popup { top: 4vh !important; left: 50% !important; transform: translateX(-50%); width: min(1200px, 96vw) !important; max-height: 90vh !important; margin: 0; border-radius: 12px; }
.typeahead-pop-head { position: sticky; top: 0; z-index: 3; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.75rem 1rem; background: #0a1a38; color: #fff; font-size: 1.05rem; border-bottom: 2px solid #ffd54a; }
.typeahead-pop-keys { font-size: 0.8rem; color: #9fb8e6; white-space: nowrap; }
.typeahead-popup .typeahead-table thead th { top: 48px; }




/* --- Medicine search popup: the app's green theme, scoped to the popup only (normal dropdowns keep the original look) --- */
.typeahead-dropdown.typeahead-popup { background: #fff; border: 2px solid var(--hms-primary, #1a6b4f); box-shadow: 0 18px 44px rgba(18, 56, 42, .32), 0 4px 10px rgba(18, 56, 42, .18); }
.typeahead-popup .typeahead-pop-head { background: var(--hms-primary, #1a6b4f); color: #fff; border-bottom: 0; }
.typeahead-popup .typeahead-pop-keys { color: rgba(255, 255, 255, .8); }
.typeahead-popup .typeahead-table { font-size: 1rem; }
.typeahead-popup .typeahead-table td { padding: 0.5rem 0.85rem; }
.typeahead-popup .typeahead-table thead th { padding: 0.45rem 0.85rem; }
.typeahead-popup .typeahead-table tr.typeahead-item:hover td,
.typeahead-popup .typeahead-table tr.typeahead-item.active td { background: var(--hms-primary-light, #dcfce7); }
.typeahead-popup .typeahead-table tr.typeahead-item.active td:first-child { box-shadow: inset 5px 0 0 var(--hms-primary, #1a6b4f); }
.typeahead-backdrop { background: rgba(18, 40, 30, .45); }

/* Popup: every piece of text must read clearly on white. */
.typeahead-popup .typeahead-table td { color: #1f2a24 !important; }
.typeahead-popup .text-muted, .typeahead-popup .th-meta { color: #4a5852 !important; }
.typeahead-popup .typeahead-table td .fst-italic { color: #3f4f48 !important; font-size: .82rem !important; }
.typeahead-popup .typeahead-table td div.text-muted { font-size: .85rem !important; }
.typeahead-popup .text-warning { color: #b45309 !important; }
.typeahead-popup .text-primary { color: #1346b8 !important; font-weight: 600; }
.typeahead-popup .typeahead-table thead th { color: #1f2a24 !important; }

/* Sticky head = amounts strip + a one-line patient card; both stay put while the bill scrolls. */
.dl-sticky-head { background: var(--bs-body-bg, #f5f5f4); padding-bottom: 1px; }
.dl-sticky-head .dl-strip-card { margin-bottom: 0.4rem !important; }
.dl-pt-card { margin-bottom: 0.3rem !important; }
.dl-pt-card .card-body { min-height: 0; }

/* Medicine popup: bigger text; the hovered / arrowed row is filled dark green edge to edge with white text. */
.typeahead-popup .typeahead-table { font-size: 1.15rem; }
.typeahead-popup .typeahead-table td { padding: 0.7rem 1rem !important; }
.typeahead-popup .typeahead-table thead th { font-size: 0.85rem !important; padding: 0.6rem 1rem !important; }
.typeahead-popup .typeahead-table td .fw-semibold, .typeahead-popup .typeahead-table td strong { font-size: 1.2rem; }
.typeahead-popup .typeahead-table td div.text-muted { font-size: 0.95rem !important; }
.typeahead-popup .typeahead-table td .fst-italic { font-size: 0.92rem !important; }
.typeahead-popup .typeahead-pop-head { font-size: 1.2rem; padding: 0.9rem 1.1rem; }
.typeahead-popup .typeahead-table tbody tr.typeahead-item:hover td,
.typeahead-popup .typeahead-table tbody tr.typeahead-item.active td { background: #0f3d2c !important; color: #fff !important; border-bottom-color: #0f3d2c !important; }
.typeahead-popup .typeahead-table tbody tr.typeahead-item:hover td *,
.typeahead-popup .typeahead-table tbody tr.typeahead-item.active td * { color: #fff !important; }
.typeahead-popup .typeahead-table tbody tr.typeahead-item:hover td .badge,
.typeahead-popup .typeahead-table tbody tr.typeahead-item.active td .badge { background: #fff !important; color: #7a1010 !important; }
.typeahead-popup .typeahead-table tbody tr.typeahead-item.active td:first-child,
.typeahead-popup .typeahead-table tbody tr.typeahead-item:hover td:first-child { box-shadow: inset 6px 0 0 #ffd54a; }

/* Popup columns: S.No, Stock and Price big; Form small and narrow. */
.typeahead-popup .typeahead-table td.tc-sno, .typeahead-popup .typeahead-table th.tc-sno { width: 64px; text-align: center; }
.typeahead-popup .typeahead-table td.tc-sno { font-size: 1.3rem; font-weight: 700; }
.typeahead-popup .typeahead-table td[data-col="stock"], .typeahead-popup .typeahead-table td[data-col="price"] { font-size: 1.45rem; font-weight: 700; white-space: nowrap; }
.typeahead-popup .typeahead-table td[data-col="price"] .text-muted { font-size: 0.95rem !important; font-weight: 500; }
.typeahead-popup .typeahead-table th[data-col="form"], .typeahead-popup .typeahead-table td[data-col="form"] { width: 70px; font-size: 0.82rem !important; padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
.typeahead-popup .typeahead-table td[data-col="form"] { color: #4a5852; }

/* Purchase inward tables: highlighted header band with dark text. */
.table > thead.pinv-head > tr > th {
    background: #cfe6d9;
    color: #10281d;
    font-weight: 700;
    border-bottom: 2px solid #1a6b4f;
}

/* Take Advance sits at the bottom-left of the amounts strip, level with the Total / Due figures. */
.bar-row-strip .bar-adv-btn { align-self: flex-end; margin-bottom: 4px; white-space: nowrap; font-weight: 600; }

/* Billing Counter category tabs (Medicine / Lab / Procedures): capitals, dark bold text, yellow highlight on the open tab */
#dlCategoryTabs .nav-link { text-transform: uppercase; font-weight: 800; letter-spacing: .03em; color: #14291f; border-radius: 8px 8px 0 0; }
#dlCategoryTabs .nav-link:hover { color: #000; background: #fff3c4; }
#dlCategoryTabs .nav-link.active { color: #000; background: #ffd54f; border-color: #e0b100 #e0b100 #ffd54f; box-shadow: inset 0 -4px 0 #14291f; }

/* Billing Counter amounts strip: dark green with light text; the Due box and the inputs stay white. */
.bar-row-strip { background: #1e4d3a; border-color: #153a2b; color: #fff; }
.bar-row-strip #categoryTotalsBar { color: #e6f2ec; }
.bar-row-strip label, .bar-row-strip .text-muted { color: #cfe6da !important; }
.bar-row-strip .bar-eq .eq-cell small { color: #b9d9c8; }
.bar-row-strip .bar-eq .eq-cell b { color: #fff; }
.bar-row-strip .bar-eq .eq-op { color: #9cc4b0; }
.bar-row-strip .bar-eq .eq-due { background: #fff; border-color: #fff; }
.bar-row-strip .bar-eq .eq-due small { color: #1a6b4f; }
.bar-row-strip .bar-eq .eq-due b { color: #12382a; }
.bar-row-strip .bar-adv-btn { background: #fff; color: #1e4d3a; border-color: #fff; }
.bar-row-strip .bar-adv-btn:hover { background: #e6f2ec; color: #12382a; border-color: #e6f2ec; }


/* ---- Phone widths: nothing may push the whole page sideways ------------------------------------------- */
@media (max-width: 576px) {
    /* header button rows (Add Donor, Add Test, Add Medicine ...) wrap instead of running off the screen */
    .d-flex.gap-2, .d-flex.justify-content-between { flex-wrap: wrap; }
    /* billing counter totals strip */
    .bar-eq { margin-left: 0; width: 100%; justify-content: space-between; }
    .bar-eq .eq-due b { font-size: 1.4rem; }
    .bar-eq { gap: 0.5rem 0.4rem; }
    .bar-eq .eq-due { padding: 3px 8px; }
    .bar-eq .eq-cell { min-width: 0; }
    /* the prescription dispensing grid is a wide desktop table: scroll inside it, not the page */
    .dl-grid { overflow-x: auto; }
}

/* Narcotic / controlled medicines stand out in every medicine search list */
.typeahead-table tr.row-narcotic td { background: #fff1f2; color: #7f1d1d; }
.typeahead-table tr.row-narcotic td:first-child { box-shadow: inset 4px 0 0 #dc2626; }
.typeahead-table tr.row-narcotic:hover td, .typeahead-table tr.row-narcotic.active td { background: #fecdd3; }
.row-narcotic-list > td { background: #fff1f2 !important; }
.row-narcotic-list > td:first-child { box-shadow: inset 4px 0 0 #dc2626; }

/* Cancelled invoices read as red rows (same look as narcotic medicines in the search list) */
tr.row-cancelled > td { background: #fff1f2 !important; color: #7f1d1d; }
tr.row-cancelled > td:first-child { box-shadow: inset 4px 0 0 #dc2626; }
tr.row-cancelled:hover > td { background: #fecdd3 !important; }
tr.row-cancelled code, tr.row-cancelled .text-muted { color: #9f1239 !important; }

/* Medicines list: the "Uses" text stays to two lines (hover shows all of it) */
.med-uses { max-width: 260px; min-width: 160px; }
.med-uses > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Medicines list: compact, and Status + Actions pinned to the right edge so they never need a sideways scroll */
.med-table { font-size: 0.8rem; }
.med-table > :not(caption) > * > * { padding: 0.4rem 0.45rem; }
.med-table th { white-space: nowrap; }
.med-table .med-uses { max-width: 170px; min-width: 110px; }
.med-table thead th:nth-last-child(2), .med-table tbody td:nth-last-child(2) { position: sticky; right: 112px; z-index: 2; background: #fff; box-shadow: -6px 0 6px -6px rgba(0,0,0,.18); }
.med-table thead th:last-child, .med-table tbody td:last-child { position: sticky; right: 0; z-index: 2; background: #fff; min-width: 112px; }
.med-table tbody tr:hover > td:nth-last-child(-n+2) { background: #f3f8f5; }
.med-table tbody tr.row-narcotic-list > td:nth-last-child(-n+2) { background: #fff1f2 !important; }

/* tighter columns so the whole table fits without a sideways scroll */
.med-table > :not(caption) > * > * { padding: 0.4rem 0.3rem; }
.med-table th:first-child, .med-table td:first-child { width: 34px; }
.med-table tbody td:nth-child(2) { max-width: 150px; overflow-wrap: anywhere; }
.med-table tbody td:nth-child(4) { max-width: 105px; overflow-wrap: anywhere; }
.med-table tbody td:nth-child(11) { max-width: 90px; overflow-wrap: anywhere; }
.med-table .med-uses { max-width: 150px; min-width: 90px; }
.med-table td .badge { font-size: .68rem; padding: .2em .45em; }
.med-table td.med-actions-col .btn { padding: .15rem .4rem; }
.med-table thead th:nth-last-child(2), .med-table tbody td:nth-last-child(2) { right: 86px; }
.med-table thead th:last-child, .med-table tbody td:last-child { min-width: 86px; }

.med-table tbody td:nth-child(2), .med-table tbody td:nth-child(4), .med-table tbody td:nth-child(11), .med-table .med-uses { white-space: normal !important; word-break: break-word; }

.med-table thead th:nth-last-child(2), .med-table tbody td:nth-last-child(2) { right: 122px; }
.med-table thead th:last-child, .med-table tbody td:last-child { min-width: 122px; }