/**
 * Admin panel components: buttons, forms, data tables, pagination, the
 * permission matrix, and the standalone login/error pages. Layered on top
 * of dashboard.css (topbar/sidebar/panel/page-head/badge already live
 * there) so every admin screen shares one visual system.
 */

/* Buttons ------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
}

/* Same '[hidden]' vs. the class's own 'display' override as
   .filter-bar__field above -- see the Accounts report's Apply button. */
.btn[hidden] {
    display: none;
}

.btn:hover {
    background: var(--bg);
}

.btn--primary {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
}

.btn--primary:hover {
    background: var(--navy-dark);
}

.btn--danger {
    background: #fff;
    border-color: var(--tone-red-fg);
    color: var(--tone-red-fg);
}

.btn--danger:hover {
    background: var(--tone-red-bg);
}

.btn--small {
    padding: 5px 10px;
    font-size: 12.5px;
}

/* Icon-only button (e.g. the billing Medicines row's Remove control, see
   billing/form.php) -- square padding instead of text's wider horizontal
   padding, since there's no label to balance against. */
.btn--icon {
    padding: 5px;
}

.btn--block {
    width: 100%;
}

.inline-form {
    display: inline;
}

.page-head__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Alerts ---------------------------------------------------------------- */

.alert {
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 16px;
}

.alert--success {
    background: var(--tone-green-bg);
    color: var(--tone-green-fg);
}

.alert--error {
    background: var(--tone-red-bg);
    color: var(--tone-red-fg);
}

/* Forms ------------------------------------------------------------------ */

.panel--form {
    max-width: 640px;
}

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

.form-row label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 6px;
}

.field-optional {
    font-weight: 400;
    color: var(--text-muted);
    text-transform: none;
    letter-spacing: normal;
}

.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="password"],
.form-row input[type="tel"],
.form-row input[type="date"],
.form-row input[type="number"],
.form-row select,
.form-row textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    background: #fff;
    color: var(--text);
    box-sizing: border-box;
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
    outline: 2px solid var(--tone-blue-fg);
    outline-offset: 1px;
}

.form-row.has-error input,
.form-row.has-error select,
.form-row.has-error textarea {
    border-color: var(--tone-red-fg);
    background: var(--tone-red-bg);
}

/* Radio button groups (Patient Type / Payment Type, see patients/form.php).
   Overrides the broad '.form-row label' rule above for just the per-option
   labels nested inside -- same specificity, so source order decides. */
.radio-group {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.radio-group label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 0;
    text-transform: none;
}

.radio-group input[type="radio"] {
    width: 16px;
    height: 16px;
}

.field-error {
    color: var(--tone-red-fg);
    font-size: 12.5px;
    margin: 6px 0 0;
}

.field-error--summary:empty {
    display: none;
}

.field-error--summary {
    margin-bottom: 16px;
}

.field-hint {
    color: var(--text-muted);
    font-size: 12.5px;
    margin: 6px 0 0;
}

.field-required {
    color: var(--tone-red-fg);
}

.form-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 22px 0;
}

.form-section-title {
    font-size: 15px;
    margin: 0 0 12px;
}

.form-actions {
    display: flex;
    gap: 10px;
    margin-top: 24px;
}

/* Filter bar (e.g. Patients list status/date filters, reached either by
   hand or via a link from the dashboard "Patients by Status" widget) --
   each <select> auto-submits its own GET form, no JS beyond that. ------- */

.filter-bar {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.filter-bar__field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* The class's own 'display: flex' above would otherwise win over the
   browser's default '[hidden] { display: none }' (same specificity, later
   in the cascade) -- see the Accounts report's Custom Range from/to fields,
   toggled via the 'hidden' attribute in admin/accounts/index.php. */
.filter-bar__field[hidden] {
    display: none;
}

.filter-bar__field label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
}

.filter-bar__field .panel__select {
    min-width: 170px;
}

.filter-bar__clear {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--red);
    padding-bottom: 9px;
}

/* Data tables -------------------------------------------------------- */

.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th,
.data-table td {
    text-align: left;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    font-size: 13.5px;
}

.data-table th {
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 11.5px;
    letter-spacing: 0.03em;
}

.data-table__actions {
    white-space: nowrap;
    text-align: right;
}

.data-table__empty {
    text-align: center;
    color: var(--text-muted);
    padding: 32px 0;
}

.sortable-col {
    color: inherit;
}

.sortable-col:hover {
    color: var(--navy);
}

/* Horizontal-scroll wrapper for a table too wide to ever collapse into
   cards (the permission matrix -- it's a real grid, not a list of
   records). Wrap the <table> in '<div class="table-scroll">' when a list
   view's columns can't reasonably be relabelled as stacked rows. */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Detailed Accounts' header row stays visible while the long result set
   scrolls underneath, instead of scrolling off with the rows (desktop
   only -- below the tablet breakpoint <thead> is visually hidden anyway,
   see the card layout below). overflow-y is reset to 'visible' because
   setting only overflow-x above implicitly computes overflow-y as 'auto',
   which would make '.table-scroll' itself the sticky containing block
   instead of the viewport. */
@media (min-width: 768px) {
    .table-scroll--sticky-head {
        overflow-y: visible;
    }

    .table-scroll--sticky-head .data-table thead th {
        position: sticky;
        top: var(--header-height);
        background: var(--card);
        z-index: 10;
    }
}

/* Responsive list views: below the tablet breakpoint a wide .data-table
   doesn't fit the screen, so each row collapses into a labelled card
   instead of forcing horizontal scroll -- every list view template
   supplies a 'data-label' attribute per <td> for the ::before below to
   show. <thead> stays in the DOM (screen readers still get the column
   names) but is visually hidden rather than removed. */
@media (max-width: 767px) {
    .data-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .data-table,
    .data-table tbody,
    .data-table tr,
    .data-table td {
        display: block;
        width: 100%;
    }

    .data-table tr {
        padding: 10px 14px;
        border-bottom: 1px solid var(--border);
    }

    .data-table td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 5px 0;
        border-bottom: 0;
        text-align: right;
    }

    .data-table td::before {
        content: attr(data-label);
        flex-shrink: 0;
        color: var(--text-muted);
        font-weight: 600;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        text-align: left;
    }

    /* A row of action buttons (Edit/Delete/quick-status icons) reads
       better as its own label-then-wrapped-row block than squeezed onto
       one line against a right-aligned value. */
    .data-table td.data-table__actions {
        display: block;
        text-align: left;
        padding-top: 8px;
    }

    .data-table td.data-table__actions::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 6px;
        color: var(--text-muted);
        font-weight: 600;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }

    .data-table td.data-table__actions .btn,
    .data-table td.data-table__actions .inline-form,
    .data-table td.data-table__actions .status-switch {
        margin: 0 8px 8px 0;
    }

    /* The "No records yet" row has no data-label / paired value -- keep
       it a plain centred line instead of the label/value split above. */
    .data-table td.data-table__empty {
        display: block;
        text-align: center;
    }

    .data-table td.data-table__empty::before {
        content: none;
    }
}

/* Pagination ----------------------------------------------------------- */

.pagination-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 14px 4px;
    font-size: 13px;
    color: var(--text-muted);
}

.pagination-bar__pages {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pagination-link {
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 13px;
}

.pagination-link:hover {
    background: var(--bg);
}

.pagination-link.is-current {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
    font-weight: 600;
}

.pagination-link.is-disabled {
    opacity: 0.4;
    pointer-events: none;
}

.pagination-bar__page-size {
    display: flex;
    align-items: center;
    gap: 6px;
}

.page-size-link {
    padding: 4px 8px;
    border-radius: 6px;
    color: var(--text-muted);
    font-size: 12.5px;
}

.page-size-link:hover {
    background: var(--bg);
}

.page-size-link.is-active {
    background: var(--tone-blue-bg);
    color: var(--tone-blue-fg);
    font-weight: 600;
}

/* Patient status quick-switch (list view "3 icons" in place of a select,
   see admin/patients/index.php) ------------------------------------------ */

.status-switch {
    display: inline-flex;
    gap: 4px;
    margin-right: 8px;
    vertical-align: middle;
}

.status-switch__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--card);
    color: var(--text-muted);
    cursor: pointer;
}

.status-switch__btn:hover {
    background: var(--bg);
    color: var(--text);
}

.status-switch__btn.is-active {
    background: var(--tone-blue-bg);
    border-color: var(--tone-blue-fg);
    color: var(--tone-blue-fg);
    cursor: default;
}

.icon--small {
    width: 14px;
    height: 14px;
}

/* Reusable checkbox list (branch access on the admin user form, ...) ----- */

.checkbox-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.checkbox-grid__option {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    font-weight: 500;
}

.checkbox-grid__empty {
    color: var(--text-muted);
    font-size: 13px;
}

/* Permission matrix (CRUD table: one row per module, one column per action) */

.permission-matrix-table {
    width: 100%;
    /* Keeps the Section label and every checkbox column legible on a
       narrow screen -- below this width the '.table-scroll' wrapper
       scrolls horizontally instead of squeezing columns unreadably thin. */
    min-width: 480px;
    border-collapse: collapse;
    margin-bottom: 8px;
}

.permission-matrix-table th,
.permission-matrix-table td {
    text-align: center;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    font-size: 13.5px;
}

.permission-matrix-table thead th {
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.03em;
}

.permission-matrix-table th[scope="row"] {
    text-align: left;
    font-weight: 600;
    color: var(--text);
}

.permission-matrix-table__toggle-all {
    border-right: 1px solid var(--border);
}

.permission-matrix-table input[type="checkbox"] {
    width: 16px;
    height: 16px;
}

/* Standalone auth / error pages ----------------------------------------- */

.auth-page-body,
.error-page-body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    padding: 24px;
}

.auth-card,
.error-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 36px 32px;
    max-width: 380px;
    width: 100%;
    text-align: center;
    box-shadow: 0 12px 32px rgba(15, 42, 71, 0.08);
}

.auth-card__logo {
    height: 48px;
    margin-bottom: 12px;
}

.auth-card h1,
.error-card h1 {
    font-size: 22px;
    margin: 0 0 6px;
    color: var(--text);
}

.auth-card__subtitle {
    color: var(--text-muted);
    font-size: 13.5px;
    margin: 0 0 20px;
}

.auth-card form {
    text-align: left;
}

.auth-card label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin: 14px 0 6px;
}

.auth-card input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    box-sizing: border-box;
}

.error-card__code {
    font-size: 44px;
    font-weight: 800;
    color: var(--red);
    margin-bottom: 4px;
}

.error-card p {
    color: var(--text-muted);
    margin: 10px 0 22px;
}

/* CSV import ------------------------------------------------------------ */

.form-row input[type="file"] {
    width: 100%;
    padding: 8px;
    border: 1px dashed var(--border);
    border-radius: 8px;
    font-size: 13.5px;
    background: var(--bg);
    box-sizing: border-box;
}

.import-summary {
    padding: 14px 16px;
    border-radius: 8px;
    background: var(--tone-green-bg);
    margin-bottom: 16px;
}

.import-summary__headline {
    margin: 0;
    color: var(--tone-green-fg);
    font-weight: 600;
}

.import-summary__note {
    margin: 8px 0 0;
    font-size: 13.5px;
    color: var(--text);
}

.import-summary__note--error {
    color: var(--tone-red-fg);
    font-weight: 600;
}

.import-summary__errors {
    margin: 6px 0 0;
    padding-left: 20px;
    font-size: 13px;
    color: var(--tone-red-fg);
}

/* Searchable select (foreign-key picker, e.g. Medicines -> Composition) -- */

.searchable-select {
    position: relative;
}

.searchable-select__input {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    background: #fff;
    color: var(--text);
    box-sizing: border-box;
}

.searchable-select__input:focus {
    outline: 2px solid var(--tone-blue-fg);
    outline-offset: 1px;
}

.searchable-select__list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 20;
    max-height: 220px;
    overflow-y: auto;
    margin: 0;
    padding: 4px;
    list-style: none;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(15, 42, 71, 0.12);
}

.searchable-select__option {
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 13.5px;
    cursor: pointer;
}

.searchable-select__option.is-highlighted,
.searchable-select__option:hover {
    background: var(--bg);
}

.searchable-select__empty {
    padding: 8px 10px;
    font-size: 13px;
    color: var(--text-muted);
}

.select-native--enhanced {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* Medicine batches (dynamic add/remove rows, see medicines/form.php +
   medicineBatches.js) ----------------------------------------------------- */

.batch-rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 10px;
}

.batch-row {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.batch-row__field {
    flex: 1;
}

.batch-row__field label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.batch-row__default-tag {
    padding: 9px 2px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}

@media (max-width: 560px) {
    .batch-row {
        flex-wrap: wrap;
    }

    .batch-row__field {
        flex: 1 1 100%;
    }
}

/* Billing medicine line items (dynamic add/remove rows, see
   billing/form.php + billingForm.js) --------------------------------------- */

.billing-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 10px;
}

.billing-item-row {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.billing-item-row [data-billing-item-remove],
.billing-item-row [data-pharma-item-remove] {
    flex: 0 0 auto;
}

.billing-item-row__field {
    flex: 2;
    min-width: 0;
}

.billing-item-row__field--total {
    flex: 1;
}

.billing-item-row__field--sno {
    flex: 0 0 32px;
    text-align: center;
}

.billing-item-row__field--sno span {
    display: block;
    padding: 9px 2px;
    font-weight: 600;
    color: var(--text-muted);
}

.billing-item-row__field label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 6px;
}

/* Purchase Qty + Prescribed Qty share one column (narrower boxes) instead of
   each getting a full field's worth of width. */
.billing-item-row__field--qty-group {
    display: flex;
    gap: 8px;
}

.billing-item-row__qty {
    flex: 1;
    min-width: 0;
}

.billing-item-row__qty label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.billing-item-row__field--total span {
    display: block;
    padding: 9px 2px;
    font-weight: 600;
}

/* Per-row Prescribed amount (prescribed_qty * unit_price) -- informational
   only, so it's deliberately dulled down (muted colour + reduced opacity)
   to never be mistaken for the real, bold Total above it. See
   AddPrescribedAmountFields. */
.billing-item-row__prescribed {
    display: block;
    padding: 0 2px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    opacity: 0.65;
}

/* Shared "informational, not an actual billed amount" treatment -- same
   muted colour + reduced opacity as .billing-item-row__prescribed above,
   reused on billing/show.php's Prescribed Amt column/footer rows. */
.text-dull {
    color: var(--text-muted);
    opacity: 0.65;
}

/* Overall Total / Adjusted Amount / Final Total / Prescribed Total --
   deliberately kept on a single row on every screen size (same technique as
   .inline-amount-group below: each field just shrinks via flex:1;
   min-width:0, instead of wrapping) to save vertical space per spec. */
.billing-items__grand-total {
    display: flex;
    gap: 10px;
    padding: 12px;
    font-size: 15px;
}

.billing-items__grand-total-field {
    flex: 1;
    min-width: 0;
    text-align: right;
}

.billing-items__grand-total-field label.billing-items__grand-total-label {
    cursor: default;
}

.billing-items__grand-total-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.billing-items__grand-total-field strong {
    display: block;
    padding: 9px 2px;
}

.billing-items__grand-total-field input {
    width: 100%;
    text-align: right;
}

/* Prescribed Total -- same muted treatment as .billing-item-row__prescribed
   above, so it reads as informational rather than an actual billed amount. */
.billing-items__grand-total-field--muted strong {
    color: var(--text-muted);
    opacity: 0.65;
    font-weight: 500;
}

@media (max-width: 700px) {
    .billing-item-row {
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px;
    }

    .billing-item-row__field {
        flex: 1 1 100%;
    }

    /* S.No + Remove share one compact top line instead of each claiming a
       full-width line of its own -- the single biggest source of wasted
       height here, multiplied by up to 5 pre-padded rows. */
    .billing-item-row__field--sno {
        flex: 0 0 auto;
        order: -2;
    }

    .billing-item-row [data-billing-item-remove] {
        order: -1;
        margin-left: auto;
    }

    .billing-item-row__field--sno label,
    .billing-item-row__qty label {
        margin-bottom: 2px;
    }

    /* Total and its muted "Rx" prescribed-amount note share one line
       instead of three (label, total, Rx each on their own) -- still
       readable at this width since both are short numbers. */
    .billing-item-row__field--total {
        display: flex;
        align-items: baseline;
        gap: 8px;
    }

    .billing-item-row__field--total label {
        margin-bottom: 0;
    }

    .billing-item-row__field--total span {
        display: inline;
        padding: 0;
    }

    .billing-item-row__prescribed {
        display: inline;
        padding: 0;
    }
}

@media (max-width: 560px) {
    .billing-items__grand-total {
        gap: 6px;
        font-size: 13px;
    }

    .billing-items__grand-total-label {
        font-size: 10px;
    }

    .billing-items__grand-total-field strong {
        padding: 6px 1px;
    }
}

/* Reusable "Cash / GPay(/ Total)" single-row amount group -- see the
   billing form's Procedure Amount and Payment Type rows. Two or three
   fields share one row instead of each getting its own full-width
   form-row, to save vertical space. Deliberately stays a single row on
   every screen size (no wrap breakpoint, unlike a plain .filter-bar) --
   each field just shrinks via 'flex: 1; min-width: 0', same approach as
   .quick-days-group. A field can also be individually hidden (Payment
   Type's Cash/GPay boxes only show once their own checkbox is on) --
   neither field sets its own 'display', so the browser's default
   '[hidden] { display: none }' already applies without needing an
   override here. */
.inline-amount-group {
    display: flex;
    gap: 12px;
    max-width: 480px;
}

.inline-amount-group__field {
    flex: 1;
    min-width: 0;
}

.inline-amount-group__field--total {
    flex: 1;
}

.inline-amount-group__field label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.inline-amount-group__field--total span {
    display: block;
    padding: 9px 2px;
    font-weight: 600;
}

/* 'Prescribed For' days input + 1W/2W/3W/4W quick-pick links (see the
   billing form) -- deliberately stays a single row on every screen size
   (unlike .inline-amount-group above) to save vertical space; the days
   input just shrinks instead of wrapping. */
.quick-days-group {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 320px;
}

.quick-days-group input[type="number"] {
    flex: 1;
    min-width: 0;
}

.quick-days-group__links {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.quick-days-link {
    padding: 6px 9px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--card);
    color: var(--text);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.quick-days-link:hover {
    background: var(--bg);
}

/* Sub-tabs (List / Calendar, see the Follow Up report) -- plain GET links,
   no AJAX/JS tab-switching, consistent with the rest of this codebase. */
.tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 16px;
}

.tabs__link {
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
    border-bottom: 2px solid transparent;
}

.tabs__link:hover {
    color: var(--text);
}

.tabs__link.is-active {
    color: var(--navy);
    border-bottom-color: var(--navy);
}

/* Follow Up calendar (see admin/follow_up/calendar.php) -- a plain
   Monday-start month grid, no charting/calendar library, same hand-rolled
   approach as every other visual in this codebase. */
.calendar__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.calendar__title {
    margin: 0;
    font-size: 16px;
}

.calendar__weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    margin-bottom: 4px;
}

.calendar__weekdays span {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    text-align: center;
    padding: 4px 0;
}

.calendar__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
}

.calendar__day {
    background: var(--card);
    min-height: 92px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.calendar__day--muted {
    background: var(--bg);
    color: var(--text-muted);
}

.calendar__day-num {
    font-size: 12.5px;
    font-weight: 700;
}

.calendar__day--today .calendar__day-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--navy);
    color: #fff;
}

.calendar__day-count {
    font-size: 11px;
    font-weight: 700;
    color: var(--navy);
}

.calendar__day-list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 11px;
    color: var(--text);
}

.calendar__day-list li {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

@media (max-width: 700px) {
    .calendar__day {
        min-height: 64px;
        padding: 4px;
    }

    .calendar__day-list {
        display: none;
    }
}