/* ESD Care additions on top of the template stylesheet. */

.line-items td {
    vertical-align: top;
}

.line-items .form-control,
.line-items .select2-container {
    min-width: 90px;
}

.line-items .col-item {
    min-width: 240px;
}

.totals-table td {
    padding: 6px 0;
}

.detail-list dt {
    font-weight: 500;
    color: var(--gray-500);
    margin-bottom: 2px;
}

.detail-list dd {
    color: var(--gray-900);
    margin-bottom: 16px;
}

.stat-link {
    color: inherit;
}

.stat-link:hover .card {
    border-color: var(--primary);
}

/* Dashboard figures: icon tile, one-line label, value that never wraps mid-amount. */
.stat-icon {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--primary);
    background: var(--primary-100);
}

.stat-body {
    min-width: 0;
}

/*
 * Sidebar: the option under the pointer (or keyboard focus) pops out, lifting with a soft
 * shadow, nudging right and lighting its icon tile, so it is obvious what a click will open.
 */
.sidebar .sidebar-menu > ul > li:not(.submenu) {
    overflow: visible;
}

.sidebar .sidebar-menu > ul > li > a,
.sidebar .sidebar-menu > ul > li > a .menu-icon,
.sidebar .sidebar-menu > ul > li.submenu ul li a {
    transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.sidebar .sidebar-menu > ul > li > a:is(:hover, :focus-visible) {
    background: rgba(43, 165, 149, 0.18);
    color: #fff !important;
    transform: translateX(4px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35), inset 3px 0 0 #2BA595;
    outline: none;
}

.sidebar .sidebar-menu > ul > li > a:is(:hover, :focus-visible) .menu-icon {
    background: var(--primary);
    color: #fff;
    transform: scale(1.12);
}

.sidebar .sidebar-menu > ul > li.submenu ul li a:is(:hover, :focus-visible) {
    color: #fff;
    background: rgba(43, 165, 149, 0.14);
    border-radius: 6px;
    transform: translateX(4px);
    outline: none;
}

.sidebar .sidebar-menu > ul > li.submenu ul li a:is(:hover, :focus-visible)::after {
    color: #2BA595;
}

@media (prefers-reduced-motion: reduce) {
    .sidebar .sidebar-menu > ul > li > a:is(:hover, :focus-visible),
    .sidebar .sidebar-menu > ul > li > a:is(:hover, :focus-visible) .menu-icon,
    .sidebar .sidebar-menu > ul > li.submenu ul li a:is(:hover, :focus-visible) {
        transform: none;
    }
}

/* A submit button waiting for the server (see hms.js). */
.btn.is-submitting {
    cursor: progress;
    position: relative;
}

.btn.is-submitting::after {
    content: "";
    display: inline-block;
    width: 0.9em;
    height: 0.9em;
    margin-left: 0.5em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    vertical-align: -0.125em;
    animation: hms-spin 0.7s linear infinite;
}

@keyframes hms-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .btn.is-submitting::after {
        animation: none;
    }
}

/*
 * Picker results: the row under the cursor/arrow keys is teal, so its text turns white
 * (select2's own stylesheet only does this for a class our picker does not use, which left
 * dark text on teal). The current choice gets a light teal tint so it stays visible too.
 */
.select2-container--default .select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[aria-selected=true] {
    background-color: var(--primary);
    color: #fff;
}

.select2-container--default .select2-results__option[aria-selected=true]:not(.select2-results__option--highlighted) {
    background-color: var(--primary-100);
    color: var(--gray-900);
}

/* The template paints .text-muted orange; muted text should read as quiet grey. */
.text-muted {
    color: var(--gray-500) !important;
}

/* List footers already say "Showing 1–25 of 31", so hide the pager's own repeat of it. */
.list-pager nav .small.text-muted {
    display: none;
}

/* Amber badge text darkened enough to read on its pale background. */
:root:not([data-bs-theme=dark]) .badge-soft-warning {
    color: #A65F04;
}

/* Light/dark switch: show the icon of the theme a click switches to. */
[data-bs-theme=dark] .theme-icon-dark,
:root:not([data-bs-theme=dark]) .theme-icon-light {
    display: none;
}

/* Artwork drawn for one background: the sign-in logo has a white-lettered twin for dark. */
[data-bs-theme=dark] .logo-on-light,
:root:not([data-bs-theme=dark]) .logo-on-dark {
    display: none !important;
}

/* Chart tooltips in the dark theme: readable date and amount (the template paints them near-black). */
[data-bs-theme=dark] .apexcharts-tooltip .apexcharts-tooltip-title,
[data-bs-theme=dark] .apexcharts-tooltip .apexcharts-tooltip-text-y-value {
    color: var(--gray-950) !important;
}

[data-bs-theme=dark] .apexcharts-tooltip .apexcharts-tooltip-text-y-label {
    color: var(--gray-600) !important;
}

[data-bs-theme=dark] .apexcharts-tooltip.apexcharts-theme-dark * {
    color: #fff !important;
}

/*
 * The template's .text-white reads var(--white), which the dark theme turns near-black, so
 * white lettering on coloured panels, avatars and badges went dark. White means white.
 */
[data-bs-theme=dark] .text-white {
    color: #fff !important;
}

/*
 * Dark theme. The template ships the variables but leaves secondary text near-invisible,
 * borders black on black and every pastel tint (badges, icon tiles) glaring light.
 */
:root[data-bs-theme=dark] {
    --body-color: #9AA1AB;
    --gray-500: #8E95A0;
    --gray-600: #A3A9B2;
    --border-color: #232A33;
    --light-hover: #1C1F22;
    --body-bg: #0B0D0E;
    --primary-50: #0C1F1D;
    --primary-100: #12302C;
    --secondary-50: #2E2208;
    --light-50: #141618;
    --info-50: #141C3A;
    --warning-50: #2E2008;
    --success-50: #0E2619;
    --danger-50: #351310;
    --indigo-50: #1A1740;
    --purple-50: #23153D;
    --pink-50: #3A0F1D;
    --orange-50: #35180A;
    --teal-50: #0B2624;
    --cyan-50: #0A2533;
    --bs-link-color: #3CC4B3;
    --bs-link-color-rgb: 60, 196, 179;
    --bs-link-hover-color: #6FD8CB;
    --bs-link-hover-color-rgb: 111, 216, 203;
}

/* Dark theme: lighter tones of each brand colour for text, links, soft badges and icon tiles. */
[data-bs-theme=dark] :is(.text-primary, .link-primary, .badge-soft-primary, .bg-soft-primary) {
    color: #3CC4B3 !important;
}
[data-bs-theme=dark] :is(.text-secondary, .link-secondary, .badge-soft-secondary, .bg-soft-secondary) {
    color: #F5B045 !important;
}
[data-bs-theme=dark] :is(.text-success, .link-success, .badge-soft-success, .bg-soft-success) {
    color: #4CC38A !important;
}
[data-bs-theme=dark] :is(.text-info, .link-info, .badge-soft-info, .bg-soft-info) {
    color: #8C95FF !important;
}
[data-bs-theme=dark] :is(.text-danger, .link-danger, .badge-soft-danger, .bg-soft-danger) {
    color: #FF7B6E !important;
}
[data-bs-theme=dark] :is(.text-warning, .link-warning, .badge-soft-warning, .bg-soft-warning) {
    color: #F5B045 !important;
}
[data-bs-theme=dark] :is(.text-orange, .link-orange, .badge-soft-orange, .bg-soft-orange) {
    color: #FF9A5C !important;
}
[data-bs-theme=dark] :is(.text-purple, .link-purple, .badge-soft-purple, .bg-soft-purple) {
    color: #B98BFF !important;
}
[data-bs-theme=dark] :is(.text-pink, .link-pink, .badge-soft-pink, .bg-soft-pink) {
    color: #FF6B9A !important;
}
[data-bs-theme=dark] :is(.text-cyan, .link-cyan, .badge-soft-cyan, .bg-soft-cyan) {
    color: #4FC8F5 !important;
}
[data-bs-theme=dark] :is(.text-teal, .link-teal, .badge-soft-teal, .bg-soft-teal) {
    color: #2DD4BF !important;
}
[data-bs-theme=dark] :is(.text-indigo, .link-indigo, .badge-soft-indigo, .bg-soft-indigo) {
    color: #9A8CFF !important;
}

/* Status badges keep their words together in narrow table cells. */
.table .badge {
    white-space: nowrap;
}

/*
 * Phones: list tables become one card per row, each value labelled with its column
 * heading (data-label, set by hms.js), instead of scrolling sideways off the screen.
 */
@media (max-width: 767.98px) {
    :is(.table-stack, .table-stack-auto table) thead {
        display: none;
    }

    :is(.table-stack, .table-stack-auto table),
    :is(.table-stack, .table-stack-auto table) tbody,
    :is(.table-stack, .table-stack-auto table) tr,
    :is(.table-stack, .table-stack-auto table) td {
        display: block;
        width: 100%;
    }

    :is(.table-stack, .table-stack-auto table) tr {
        padding: 8px 0;
        border-bottom: 1px solid var(--border-color, #e5e7eb);
    }

    :is(.table-stack, .table-stack-auto table) tr:last-child {
        border-bottom: 0;
    }

    :is(.table-stack, .table-stack-auto table) td {
        position: relative;
        min-height: 30px;
        padding: 5px 16px 5px 42% !important;
        border: 0 !important;
        text-align: right !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
        /* Desktop columns may be width-capped and truncated; a card has room for the full text. */
        max-width: none !important;
        overflow: visible !important;
    }

    :is(.table-stack, .table-stack-auto table) td::before {
        content: attr(data-label);
        position: absolute;
        left: 16px;
        top: 5px;
        width: calc(42% - 28px);
        text-align: left;
        font-size: 13px;
        font-weight: 500;
        color: var(--gray-500);
        white-space: normal;
    }

    /* Unlabelled cells (row actions) and full-width messages use the whole card width. */
    :is(.table-stack, .table-stack-auto table) td[data-label=""],
    :is(.table-stack, .table-stack-auto table) td[colspan] {
        padding-left: 16px !important;
    }

    :is(.table-stack, .table-stack-auto table) td[colspan] {
        text-align: left !important;
    }

    :is(.table-stack, .table-stack-auto table) td[data-label=""]::before,
    :is(.table-stack, .table-stack-auto table) td[colspan]::before {
        display: none;
    }

    .table-stack-auto,
    .table-responsive:has(> .table-stack) {
        overflow: visible;
    }
}

/* Phones: filter bars stack full width instead of leaving ragged gaps. */
@media (max-width: 575.98px) {
    .card-header form[role="search"] > *,
    .card-header form[role="search"] .input-icon,
    .card-header form[role="search"] .form-control,
    .card-header form[role="search"] .form-select {
        flex: 1 1 100%;
        width: 100%;
    }
}

.pagination {
    margin-bottom: 0;
}

/* Printable documents (invoices, prescriptions) */
@media print {
    .sidebar,
    .navbar-header,
    .footer,
    .d-print-none {
        display: none !important;
    }

    .page-wrapper {
        margin: 0 !important;
        padding: 0 !important;
    }

    .page-wrapper .content {
        padding: 0 !important;
    }

    .card {
        border: 0 !important;
        box-shadow: none !important;
    }

    body {
        background: #fff !important;
    }
}