/* ============================================================================
   GoDoctor admin panel — "Serene"
   ----------------------------------------------------------------------------
   Implements the design handoff: warm off-white canvas, pine/sage accents,
   Fraunces headings, Plus Jakarta Sans body, 26px cards, record rows instead
   of data tables, and a shell that works down to 360px.

   Loaded AFTER the legacy template CSS, so it overrides the Bootstrap-derived
   theme without editing 39k lines of vendor stylesheet. Legacy markup that no
   screen has been converted to record rows yet still renders correctly — the
   .table / .card rules below restyle it in the same language.
   ========================================================================== */

@import url("/font/serene/serene-fonts.css");

:root {
    /* --- Color tokens (handoff) --- */
    --ink: #1E2A27;
    --soft: #5C6B66;
    --muted: #9AA6A1;
    --surface: #FBFAF6;
    --canvas: #E7EDEA;
    --cream: #F4F1E8;
    --stone: #F2F0E9;
    --sage: #4E8576;
    --deep: #356556;
    --sage-soft: #DCE9E3;
    --honey-ink: #8a5f1c;
    --honey-soft: #F7EBD4;
    --coral-ink: #8f4433;
    --coral-soft: #F7E4DF;
    --honey: #E0A85B;
    --coral: #D98C7A;
    --hairline: rgba(30, 42, 39, .08);
    --hairline-strong: rgba(30, 42, 39, .16);

    /* The legacy theme paints accents from this variable — repoint it so any
       unconverted screen picks up pine instead of the old indigo. */
    --theme-deafult: #356556;
    --theme-secondary: #E0A85B;

    /* --- Type --- */
    --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

    /* --- Shape --- */
    --r-card: 26px;
    --r-ctrl: 14px;
    --r-pill: 999px;
    --r-chip: 12px;
    --shadow-card: 0 18px 40px -24px rgba(31, 58, 49, .45);
    --shadow-drawer: 0 24px 60px -20px rgba(31, 58, 49, .55);

    /* --- Shell metrics --- */
    --side-w: 252px;
    --rail-w: 76px;
}

/* ===========================  Base  ======================================= */

body {
    font-family: var(--font-body);
    background-color: var(--canvas) !important;
    color: var(--ink);
    font-size: 14px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
.sr-h1, h1, h2, h3, h4, h5, h6,
.card-header h4, .card-header h5, .page-title h3 {
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: -.02em;
    color: var(--ink);
}
a { color: var(--deep); text-decoration: none; }
a:hover { color: var(--deep); text-decoration: underline; }
.text-muted { color: var(--muted) !important; }
:focus-visible { outline: 2px solid rgba(53, 101, 86, .4); outline-offset: 2px; }

/* Icon fonts must keep their own families (the body swap would break them) */
.fa, [class^="fa-"], [class*=" fa-"] { font-family: FontAwesome !important; }
[class^="icofont-"], [class*=" icofont-"] { font-family: IcoFont !important; }
[class^="ti-"], [class*=" ti-"] { font-family: themify !important; }
[class^="note-icon-"], [class*=" note-icon-"] { font-family: "summernote" !important; }

/* Every number in a list or money position lines up */
.sr-num, .table td, .sr-row .sr-amt, .sr-kpi-value, .invosymbol {
    font-variant-numeric: tabular-nums;
}

/* ===========================  Shell  ===================================== */

.page-wrapper .page-header,
.page-wrapper.compact-wrapper .page-header {
    background-color: rgba(251, 250, 246, .72);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--hairline);
    box-shadow: none;
}
.page-wrapper .page-header .header-wrapper { padding: 18px 32px; }

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper {
    background-color: var(--surface);
    border-right: 1px solid var(--hairline);
    box-shadow: none;
    width: var(--side-w);
}
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .logo-wrapper,
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .logo-icon-wrapper {
    border-bottom: 1px solid var(--hairline);
    background-color: var(--surface);
}
div.sidebar-wrapper .text-white { color: var(--ink) !important; font-family: var(--font-display); }
div.sidebar-wrapper .logo-wrapper svg, div.sidebar-wrapper .toggle-sidebar svg { stroke: var(--soft); }

.page-wrapper .page-body-wrapper .page-body {
    background-color: var(--canvas);
    padding: clamp(18px, 4vw, 28px) clamp(14px, 4vw, 32px) 110px;
}
.page-wrapper .page-body-wrapper .page-body > .container-fluid { max-width: 1360px; padding: 0; }

/* Sidebar items — the legacy rules run through the simplebar wrapper chain and
   outrank short selectors, so the state overrides repeat that exact chain. */
div.sidebar-wrapper .sidebar-main .sidebar-links li a,
div.sidebar-wrapper .sidebar-main .sidebar-links li a span,
div.sidebar-wrapper .sidebar-main .sidebar-links .sidebar-link.sidebar-title,
div.sidebar-wrapper .sidebar-main .sidebar-links .sidebar-link.sidebar-title span {
    color: var(--soft) !important;
    font-weight: 500;
    font-size: 13.5px;
}
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content .menu-box > ul > li .sidebar-link {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 12px !important;
    margin: 1px 8px;
    border-radius: var(--r-ctrl);
    transition: background-color 140ms ease, color 140ms ease;
}
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content .menu-box > ul > li .sidebar-link svg {
    width: 18px; height: 18px;
    stroke-width: 1.8;
    color: var(--soft);
    stroke: var(--soft);
    flex-shrink: 0;
}
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content .menu-box > ul > li .sidebar-link:hover {
    background-color: var(--stone);
}
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content .menu-box > ul > li .sidebar-link.active {
    background-color: var(--sage-soft) !important;
}
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content .menu-box > ul > li .sidebar-link.active::before { opacity: 0 !important; }
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content .menu-box > ul > li .sidebar-link.active svg {
    color: var(--deep) !important; stroke: var(--deep) !important;
}
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content .menu-box > ul > li .sidebar-link.active span,
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content .menu-box > ul > li .sidebar-link.active:hover span {
    color: var(--ink) !important; font-weight: 600;
}
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content .menu-box > ul > li .sidebar-link .according-menu i,
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content .menu-box > ul > li .sidebar-link.active .according-menu i {
    color: var(--muted) !important;
}
/* Group label */
.sr-navgroup {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--muted);
    padding: 18px 18px 8px;
    font-weight: 600;
}
/* Counts on nav items */
.sr-count {
    margin-left: auto;
    font-size: 11px;
    font-weight: 600;
    border-radius: var(--r-pill);
    padding: 3px 8px;
    font-weight: 700;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
}
.sr-count-ok { background: var(--sage-soft); color: var(--deep); }
.sr-count-work { background: var(--honey-soft); color: var(--honey-ink); }
.sr-count-risk { background: var(--coral-soft); color: var(--coral-ink); }
.sr-count-info { background: transparent; color: var(--muted); font-weight: 500; }
/* Submenu */
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content .menu-box > ul > li .sidebar-submenu {
    margin-left: 26px;
    border-left: 1px solid var(--hairline);
}
div.sidebar-wrapper .sidebar-main .sidebar-links .sidebar-submenu li a {
    color: var(--soft) !important;
    font-size: 13px;
    padding: 6px 14px !important;
    min-height: 34px;
    display: flex;
    align-items: center;
}
div.sidebar-wrapper .sidebar-main .sidebar-links .sidebar-submenu li a:hover,
div.sidebar-wrapper .sidebar-main .sidebar-links .sidebar-submenu li a.active { color: var(--deep) !important; }
div.sidebar-wrapper .sidebar-main .sidebar-links .sidebar-submenu li a:after { background-color: var(--muted) !important; }
/* Onboard-a-provider item reads as the section's primary action */
.sidebar-link.sr-nav-primary { background: var(--sage-soft) !important; }
.sidebar-link.sr-nav-primary span, .sidebar-link.sr-nav-primary svg { color: var(--deep) !important; stroke: var(--deep) !important; }

/* Top bar bits */
.page-header .header-wrapper input.form-control {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 16px !important;
    height: 44px;
    padding-left: 14px;
    color: var(--ink);
    font-size: 13px;
}
.page-header .header-wrapper .nav-menus svg,
.page-header .header-wrapper .toggle-sidebar svg { stroke: var(--soft); }
.page-header .header-wrapper li i { color: var(--soft); }
.onhover-show-div {
    border-radius: 20px !important;
    border: 1px solid var(--hairline);
    box-shadow: var(--shadow-drawer) !important;
    background-color: var(--surface) !important;
    overflow: hidden;
}
.onhover-show-div li a, .onhover-show-div li a span { color: var(--soft); }
.onhover-show-div li:hover { background: var(--stone); }

/* ===========================  Page header  =============================== */

.sr-page-head { margin-bottom: 20px; display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; justify-content: space-between; }
.sr-crumb { font-size: 12px; color: var(--soft); margin-bottom: 4px; }
.sr-crumb a { color: var(--deep); }
.sr-crumb span + span::before { content: "›"; margin: 0 6px; color: var(--muted); }
.sr-title { font-family: var(--font-display); font-size: clamp(26px, 6.4vw, 32px); font-weight: 400; letter-spacing: -.02em; color: var(--ink); margin: 0; line-height: 1.15; }
.sr-sub { font-size: 13px; color: var(--soft); max-width: 660px; margin: 6px 0 0; }
.sr-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* Legacy page-title blocks pick up the same treatment */
.page-title h3 { font-size: clamp(26px, 6.4vw, 32px); font-weight: 400; }
.page-title .breadcrumb { background: transparent; padding: 0; font-size: 12px; }
.page-title .breadcrumb .breadcrumb-item a { color: var(--deep); }
.page-title .breadcrumb .breadcrumb-item.active { color: var(--soft); }
.page-title .breadcrumb .breadcrumb-item a svg { stroke: var(--deep); width: 15px; height: 15px; }

/* ===========================  Section card  ============================== */

.sr-card, .card {
    background: var(--surface);
    border: none;
    border-radius: var(--r-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    margin-bottom: 16px;
}
/* …but a card must not clip something that is meant to escape it. The action
   menus on the booking lists, and any date picker or tooltip anchored inside
   a card, open beyond the card's edge; with overflow hidden they were cut
   off. Cards holding one of those stop clipping, and round their own header
   strip instead so the corners still look right. */
.sr-card:has(.dropdown), .card:has(.dropdown),
.sr-card:has(.dropdown-content), .card:has(.dropdown-content),
.sr-card:has(.select2), .card:has(.select2),
.sr-card:has([data-bs-toggle="dropdown"]), .card:has([data-bs-toggle="dropdown"]) {
    overflow: visible;
}
.sr-card:has(.dropdown) > .sr-colstrip:first-child,
.card:has(.dropdown) > .sr-colstrip:first-child {
    border-radius: var(--r-card) var(--r-card) 0 0;
}
.sr-card-head, .card .card-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 24px 16px;
    border-bottom: none;
    background: transparent;
    flex-wrap: wrap;
}
.sr-card-title, .card .card-header h4, .card .card-header h5 {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -.01em;
    color: var(--ink);
    margin: 0;
}
.sr-card-meta { font-size: 12px; color: var(--muted); }
.sr-card-body, .card .card-body { padding: 0 24px 20px; }
.sr-card-body-flush { padding: 0; }
.card .card-footer { background: transparent; border-top: 1px solid var(--hairline); }

/* ===========================  Record rows  =============================== */

.sr-colstrip {
    display: flex;
    gap: 16px;
    align-items: center;
    background: var(--stone);
    padding: 8px 22px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--soft);
    font-weight: 600;
}
.sr-colstrip a { color: var(--soft); }
.sr-colstrip a.is-active { color: var(--ink); }
.sr-rows { display: flex; flex-direction: column; }
.sr-row {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 14px 22px;
    border-top: 1px solid var(--hairline);
    transition: background-color 140ms ease;
}
.sr-rows > .sr-row:first-child { border-top: none; }
.sr-row:hover { background: var(--surface); }
/* Cells must be able to shrink and, past a point, wrap.

   A hard min-width plus a non-wrapping row means a record with many cells
   overflows its card and the last cell — usually the actions — is clipped
   off the right edge. Several screens converted from wide tables carry seven
   or more cells, so this is not hypothetical.

   flex-basis still expresses the intended width; min-width: 0 lets a cell
   give way instead of forcing an overflow, and the row wraps onto another
   line rather than losing anything. */
.sr-row { flex-wrap: wrap; }
.sr-cell { flex: 1.3 1 132px; min-width: 0; min-height: 1px; overflow-wrap: anywhere; }
.sr-cell-id { flex: 2.2 1 180px; min-width: 0; display: flex; align-items: center; gap: 12px; }
.sr-cell-num { flex: 1 1 110px; min-width: 0; text-align: right; }
.sr-cell-act { flex: 0 0 auto; margin-left: auto; display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }

/* A cell holding nothing but a checkbox is a gutter, not a column. Same for
   the row-number cell the table conversions carried over: neither deserves the
   132px a content column gets. */
.sr-row > .sr-cell:has(> input[type="checkbox"]:only-child),
.sr-row > .sr-cell-id:has(> input[type="checkbox"]:only-child),
.sr-colstrip > *:has(> input[type="checkbox"]:only-child) {
    flex: 0 0 auto;
    min-width: 0;
}
/* Thumbnails carried over from the tables were sized for a table cell (50px,
   square, unstyled) and dominate a record row. Render them at avatar size and
   shape instead, wherever they sit. */
.sr-row .sr-cell img:not(.sr-avatar img):not([class*="sr-"]) {
    width: 34px !important;
    height: 34px !important;
    border-radius: 10px;
    object-fit: cover;
    background: var(--stone);
}
.sr-row .sr-cell:has(> img:only-child),
.sr-row .sr-cell:has(> a:only-child > img:only-child) {
    flex: 0 0 auto;
    min-width: 0;
}

.sr-row > .sr-cell.sr-cell-idx, .sr-colstrip > .sr-cell-idx {
    flex: 0 0 34px; min-width: 0; color: var(--muted); font-size: 12px;
}

/* The strip has to give way the same way, or it stops lining up with the rows */
.sr-colstrip > * { flex: 1.3 1 132px; min-width: 0; }
.sr-colstrip > .sr-cell-id { flex: 2.2 1 180px; }
.sr-colstrip > .sr-cell-num { flex: 1 1 110px; text-align: right; }
.sr-colstrip > .sr-cell-act { flex: 0 0 auto; margin-left: auto; }

/* A row carrying this many cells came from a wide table; once it wraps, a
   single header strip above it no longer describes any particular line, so
   it is hidden rather than left there misaligned.

   Hiding it is only half an answer: a value with no label is not readable
   just because it is tidy. sr-table.js copies each strip label onto the cell
   below it, and the rule further down prints that label above the value
   wherever the strip is not on screen. */
.sr-colstrip:has(> :nth-child(7)) { display: none; }
.sr-rows:has(> .sr-row > :nth-child(7)) .sr-cell[data-label]::before,
.sr-rows:has(> .sr-row > :nth-child(7)) .sr-cell-id[data-label]::before,
.sr-rows:has(> .sr-row > :nth-child(7)) .sr-cell-num[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
    font-weight: 600;
    margin-bottom: 2px;
}
/* The identity cell lays its avatar beside the name, so a label block inside
   it would sit in the flex line rather than above the pair. */
.sr-rows:has(> .sr-row > :nth-child(7)) .sr-cell-id[data-label] { flex-wrap: wrap; }
.sr-rows:has(> .sr-row > :nth-child(7)) .sr-cell-id[data-label]::before { flex: 1 1 100%; }
/* Gutters label nothing worth printing. */
.sr-row > .sr-cell-idx[data-label]::before,
.sr-row > .sr-cell-act[data-label]::before,
.sr-row > .sr-cell[data-label=""]::before,
.sr-row > .sr-cell:has(> input[type="checkbox"]:only-child)[data-label]::before { content: none; }
.sr-avatar {
    width: 36px; height: 36px; flex-shrink: 0;
    border-radius: var(--r-chip);
    background: var(--stone);
    color: var(--soft);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 600;
    overflow: hidden;
}
.sr-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sr-avatar-accent { background: var(--sage-soft); color: var(--deep); }
.sr-name { font-size: 14px; font-weight: 600; color: var(--ink); display: block; }
.sr-meta { font-size: 12px; color: var(--muted); display: block; }
.sr-label { font-size: 13px; font-weight: 600; color: var(--ink); display: block; }
.sr-amt { font-size: 14px; font-weight: 600; color: var(--ink); display: block; }
.sr-link-2 { font-size: 12px; color: var(--deep); text-decoration: underline; }

/* Stacked below 900px — the column strip is meaningless once rows reflow, so
   each cell prints the label the strip would have given it. */
@media (max-width: 899.98px) {
    .sr-colstrip { display: none; }
    .sr-row { flex-wrap: wrap; align-items: flex-start; gap: 10px; padding: 14px; }
    .sr-cell-id { flex: 1 1 100%; }
    .sr-cell { flex: 1 1 44%; min-width: 0; }
    .sr-cell-num { text-align: left; flex: 1 1 44%; }
    .sr-cell-act { flex: 1 1 100%; justify-content: flex-start; }

    .sr-row > .sr-cell[data-label]::before,
    .sr-row > .sr-cell-num[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 10.5px;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: var(--muted);
        font-weight: 600;
        margin-bottom: 2px;
    }
    .sr-row > .sr-cell-idx[data-label]::before,
    .sr-row > .sr-cell-act[data-label]::before,
    .sr-row > .sr-cell[data-label=""]::before,
    .sr-row > .sr-cell:has(> input[type="checkbox"]:only-child)[data-label]::before { content: none; }
}

/* ===========================  Status pills  ============================== */

.sr-pill {
    display: inline-flex; align-items: center;
    border-radius: var(--r-pill);
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}
.sr-pill-sm { padding: 2px 9px; font-size: 11px; }
.sr-pill-wait { background: var(--honey-soft); color: var(--honey-ink); }
.sr-pill-good { background: var(--sage-soft); color: var(--deep); }
.sr-pill-bad { background: var(--coral-soft); color: var(--coral-ink); }
.sr-pill-neutral { background: var(--stone); color: var(--soft); }

/* Legacy status spans (rendered as .btn-* on unconverted screens) map onto the
   same pill vocabulary — never a solid button block inside a list. */
span.b-r-5[class*="btn-"], span.mainbnstyle[class*="btn-"] {
    display: inline-flex; align-items: center;
    border-radius: var(--r-pill) !important;
    padding: 4px 11px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    line-height: 1.5;
    border: none;
    white-space: nowrap;
}
span.b-r-5.btn-warning, span.mainbnstyle.btn-warning { background-color: var(--honey-soft) !important; color: var(--honey-ink) !important; }
span.b-r-5.btn-success, span.mainbnstyle.btn-success { background-color: var(--sage-soft) !important; color: var(--deep) !important; }
span.b-r-5.btn-danger, span.mainbnstyle.btn-danger { background-color: var(--coral-soft) !important; color: var(--coral-ink) !important; }
span.b-r-5.btn-secondary, span.mainbnstyle.btn-secondary { background-color: var(--stone) !important; color: var(--soft) !important; }
span.b-r-5.btn-info, span.mainbnstyle.btn-info { background-color: var(--sage-soft) !important; color: var(--deep) !important; }
span.b-r-5.btn-primary:not(.dropbtn), span.mainbnstyle.btn-primary:not(.dropbtn) { background-color: var(--sage-soft) !important; color: var(--deep) !important; }

/* ===========================  Buttons  =================================== */

.btn, .sr-btn {
    font-family: var(--font-body);
    border-radius: var(--r-ctrl);
    font-weight: 600;
    font-size: 13px;
    padding: 8px 16px;
    transition: background-color 140ms ease, color 140ms ease;
}
.sr-btn { display: inline-flex; align-items: center; gap: 6px; border: none; cursor: pointer; }
.btn-primary, .sr-btn-primary, .btn-primary:disabled {
    background-color: var(--sage) !important;
    border-color: var(--sage) !important;
    color: var(--surface) !important;
    border-radius: 16px;
    min-height: 44px;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .sr-btn-primary:hover {
    background-color: var(--deep) !important; border-color: var(--deep) !important;
}
.sr-btn-deep { background-color: var(--deep) !important; color: var(--surface) !important; border-radius: 16px; }
.sr-btn-secondary {
    background: var(--surface) !important;
    border: 1px solid var(--hairline) !important;
    color: var(--ink) !important;
    border-radius: 16px;
    min-height: 44px;
}
.sr-btn-destructive { background: var(--coral) !important; color: var(--surface) !important; border-radius: var(--r-ctrl); }
.sr-btn-quiet-bad { background: var(--surface) !important; color: var(--coral-ink) !important; border-radius: var(--r-ctrl); }
.sr-row .sr-btn, .sr-cell-act .btn, .sr-cell-act .sr-btn {
    border-radius: 12px;
    font-size: 12px;
    padding: 0 14px;
}
.sr-btn-next, .btn-success {
    background-color: var(--sage-soft) !important;
    border-color: transparent !important;
    color: var(--deep) !important;
}
.sr-btn-next:hover, .btn-success:hover { background-color: #cfe2da !important; color: var(--deep) !important; }
.sr-btn-open, .btn-light, .btn-secondary {
    background-color: var(--stone) !important;
    border-color: transparent !important;
    color: var(--soft) !important;
}
.sr-btn-open:hover, .btn-light:hover, .btn-secondary:hover { background-color: #e8e5dc !important; color: var(--ink) !important; }
.btn-danger { background-color: var(--coral-soft) !important; border-color: transparent !important; color: var(--coral-ink) !important; }
.btn-danger:hover { background-color: #f2d8d1 !important; color: var(--coral-ink) !important; }
.btn-warning { background-color: var(--honey-soft) !important; border-color: transparent !important; color: var(--honey-ink) !important; }
.btn-info { background-color: var(--sage-soft) !important; border-color: transparent !important; color: var(--deep) !important; }
.btn-outline-primary { color: var(--deep) !important; border-color: var(--deep) !important; background: transparent !important; }
.btn-outline-primary:hover { background: var(--sage-soft) !important; }
.btn-outline-secondary { color: var(--soft) !important; border-color: var(--hairline-strong) !important; background: transparent !important; }
.btn-outline-danger { color: var(--coral-ink) !important; border-color: var(--coral) !important; background: transparent !important; }
.btn-outline-success { color: var(--deep) !important; border-color: var(--sage) !important; background: transparent !important; }
.btn-sm { font-size: 12px; padding: 6px 12px; }
/* Row-level controls: 36px desktop, 44px touch */
.sr-row .btn, .sr-row .sr-btn, .sr-cell-act .btn { min-height: 36px; }
a.dropbtn, span.dropbtn {
    display: inline-flex; align-items: center;
    border-radius: var(--r-ctrl) !important;
    background: var(--stone) !important;
    color: var(--soft) !important;
    font-size: 12.5px !important;
    font-weight: 600;
    padding: 7px 14px !important;
}
a.dropbtn:hover, span.dropbtn:hover { background: #e8e5dc !important; color: var(--ink) !important; text-decoration: none; }

/* ===========================  Forms  ===================================== */

.sr-field { display: flex; flex-direction: column; gap: 6px; }
.sr-flabel, label, .col-form-label, .form-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
    font-weight: 600;
}
.sr-req { color: var(--coral); }
.sr-help { font-size: 12px; color: var(--muted); }
.form-control, .form-select, .custom-select, .sr-input,
input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
input[type="number"], input[type="date"], input[type="time"], input[type="month"],
textarea, select {
    font-family: var(--font-body);
    font-size: 14px;
    min-height: 46px;
    border-radius: var(--r-ctrl);
    border: 1px solid var(--hairline);
    background-color: var(--surface);
    color: var(--ink);
    padding: 10px 14px;
}
textarea { min-height: 96px; }
.form-control::placeholder, .sr-input::placeholder { color: var(--muted); }
.form-control:focus, .form-select:focus, .sr-input:focus, input:focus, textarea:focus, select:focus {
    border-color: var(--sage) !important;
    box-shadow: 0 0 0 3px rgba(53, 101, 86, .4) !important;
    background-color: var(--surface);
    color: var(--ink);
    outline: none;
}
.form-check-input:checked { background-color: var(--deep); border-color: var(--deep); }
.input-group-text { background: var(--stone); border-color: var(--hairline); color: var(--soft); border-radius: var(--r-ctrl); }
.sr-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }

/* Long forms get a summary column that follows you down the page, so the
   submit button and the "what happens next" note stay reachable instead of
   living 24 fields below the fold. The form and its action block are already
   siblings, so this is a grid over what is there — no form was restructured.
   Below 1100px it collapses back to one column, exactly as the handoff says. */
@media (min-width: 1100px) {
    .sr-form-2col {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 300px;
        gap: 24px;
        align-items: start;
    }
    .sr-form-2col > form { min-width: 0; }
    .sr-form-2col > :last-child {
        position: sticky;
        top: 96px;              /* clears the sticky top bar */
        text-align: left !important;
        margin-top: 0 !important;
    }
}
.sr-form-summary {
    background: var(--stone);
    border-radius: 20px;
    padding: 18px 20px;
    margin-bottom: 14px;
    font-size: 13px;
    color: var(--soft);
    line-height: 1.6;
}
.sr-form-summary h6 {
    font-family: var(--font-body);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
    font-weight: 700;
    margin: 0 0 6px;
}
.sr-form-summary .sr-req { font-weight: 700; }
.sr-form-2col > :last-child .btn { width: 100%; justify-content: center; }
@media (max-width: 1099.98px) {
    .sr-form-summary { display: none; }   /* the note is only useful beside the form */
}
.sr-invalid { border-color: var(--coral) !important; }
.sr-error { font-size: 12px; color: var(--coral-ink); }
/* select2 to match */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border-radius: var(--r-ctrl) !important;
    border-color: var(--hairline) !important;
    background-color: var(--surface) !important;
    min-height: 46px;
}
.select2-dropdown { border-radius: 18px !important; border-color: var(--hairline) !important; box-shadow: var(--shadow-drawer); overflow: hidden; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--deep) !important; }

/* ===========================  Filter bar & tabs  ========================= */

.sr-filters {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    padding: 0 24px 14px;
}
.sr-filters .form-control, .sr-filters .form-select, .sr-filters select,
.sr-filters input:not([type="checkbox"]):not([type="radio"]) {
    min-height: 40px; font-size: 13px; padding: 6px 12px; width: auto; min-width: 130px;
}
/* A checkbox is not a text field. Sizing it like one turns "Select all" into a
   130px-wide, 40px-tall box. */
input[type="checkbox"], input[type="radio"] {
    min-height: 0; min-width: 0; width: 16px; height: 16px;
    padding: 0; margin: 0; flex: 0 0 auto; accent-color: var(--deep);
}
@media (max-width: 899.98px) {
    /* comfortable to tap without becoming a slab */
    input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; }
}
.sr-filters .sr-search { min-width: 200px; flex: 1 1 200px; }
.sr-tabs {
    display: inline-flex; flex-wrap: wrap; gap: 6px;
    background: var(--stone);
    border-radius: var(--r-pill);
    padding: 4px;
}
.sr-tab {
    border-radius: var(--r-pill);
    padding: 0 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--soft);
    min-height: 36px;
    display: inline-flex; align-items: center; gap: 6px;
}
.sr-tab:hover { color: var(--ink); text-decoration: none; }
.sr-tab.is-active { background: var(--surface); color: var(--ink); }
.sr-tab .sr-tabcount { font-size: 11px; color: var(--muted); font-weight: 500; }

/* ===========================  KPI cards  ================================= */

.sr-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.sr-kpi { background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: 18px 20px; }
.sr-kpi-label { font-size: 12px; color: var(--soft); }
.sr-kpi-value { font-family: var(--font-display); font-size: clamp(26px, 5vw, 34px); font-weight: 400; color: var(--ink); line-height: 1.15; margin: 4px 0; }
.sr-kpi-delta { font-size: 12px; font-weight: 600; }
.sr-kpi-up { color: var(--deep); }
.sr-kpi-down { color: var(--coral-ink); }
.sr-bar { height: 6px; border-radius: var(--r-pill); background: var(--stone); overflow: hidden; margin-top: 10px; }
.sr-bar > span { display: block; height: 100%; background: var(--sage); }

/* ===========================  Banners  =================================== */

.sr-banner, .alert {
    border-radius: 20px;
    padding: 20px 24px;
    border: none;
    font-size: 13px;
}
.sr-banner-warn, .alert-warning { background: var(--honey-soft); color: var(--honey-ink); }
.sr-banner-bad, .alert-danger { background: var(--coral-soft); color: var(--coral-ink); }
.sr-banner-ok, .alert-success { background: var(--sage-soft); color: var(--deep); }
.sr-banner-info, .alert-info { background: var(--stone); color: var(--soft); }
.sr-danger-zone { background: var(--coral-soft); border-radius: var(--r-card); padding: 20px 24px; }
.sr-danger-zone h6 { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--coral-ink); font-family: var(--font-body); font-weight: 700; }
.sr-danger-zone p { font-size: 13px; color: var(--coral-ink); }
.sr-danger-zone .btn { background: var(--surface) !important; color: var(--coral-ink) !important; }

/* ===========================  Legacy tables  ============================= */
/* Screens not yet converted to record rows still read as Serene, and never
   scroll sideways on their own — the wrapper handles overflow. */
.table { color: var(--ink); border-color: var(--hairline); margin-bottom: 0; }
.table > :not(caption) > * > * { border-bottom-color: var(--hairline); background-color: transparent; }
.table thead th {
    background: var(--stone);
    color: var(--soft);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    border-bottom: none;
    padding: 8px 14px;
    vertical-align: bottom;
}
.table tbody td { padding: 12px 14px; font-size: 13px; vertical-align: middle; border-top: 1px solid var(--hairline); }
.table tbody tr:hover { background: var(--surface); }
.table-responsive { border-radius: var(--r-chip); }
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--deep) !important; border-color: var(--deep) !important; color: #fff !important; border-radius: 10px;
}

/* ===========================  Modals, menus, pagination  ================= */

.modal-content { border-radius: var(--r-card); border: none; box-shadow: var(--shadow-drawer); background: var(--surface); color: var(--ink); }
.modal-header { border-bottom: 1px solid var(--hairline); padding: 20px 24px 14px; }
.modal-header .modal-title { font-family: var(--font-display); font-size: 20px; font-weight: 500; }
.modal-footer { border-top: 1px solid var(--hairline); }
.dropdown-menu, .dropdown-content {
    border-radius: 18px; border: 1px solid var(--hairline);
    box-shadow: var(--shadow-drawer); background: var(--surface); overflow: hidden;
}
.dropdown-item { color: var(--soft); font-size: 13px; }
.dropdown-item:hover { background: var(--stone); color: var(--ink); }
.pagination .page-link {
    color: var(--deep); border: none; background: var(--stone);
    border-radius: 12px; margin: 0 3px;
    min-width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 600;
}
.pagination .page-item.active .page-link { background: var(--sage); border-color: var(--sage); color: var(--surface); }
.nav-tabs { border-bottom: 1px solid var(--hairline); }
.nav-tabs .nav-link { color: var(--soft); border: none; border-bottom: 2px solid transparent; font-weight: 600; font-size: 13px; }
.nav-tabs .nav-link.active { color: var(--deep); background: transparent; border-bottom-color: var(--deep); }
.list-group-item { background: var(--surface); border-color: var(--hairline); color: var(--ink); }
.badge { border-radius: var(--r-pill); font-weight: 600; font-size: 11px; padding: 4px 10px; }
.badge.badge-success, .badge.bg-success { background-color: var(--sage-soft) !important; color: var(--deep) !important; }
.badge.badge-danger, .badge.bg-danger { background-color: var(--coral-soft) !important; color: var(--coral-ink) !important; }
.badge.badge-warning, .badge.bg-warning { background-color: var(--honey-soft) !important; color: var(--honey-ink) !important; }
.badge.badge-primary, .badge.bg-primary { background-color: var(--sage-soft) !important; color: var(--deep) !important; }
.badge.badge-info, .badge.bg-info { background-color: var(--sage-soft) !important; color: var(--deep) !important; }
.badge.badge-secondary, .badge.bg-secondary { background-color: var(--stone) !important; color: var(--soft) !important; }
.badge.badge-light, .badge.bg-light { background-color: var(--stone) !important; color: var(--soft) !important; }

#toast-container > div { border-radius: 18px !important; box-shadow: var(--shadow-drawer) !important; opacity: .98; }
#toast-container > .toast-success { background-color: var(--deep) !important; }
#toast-container > .toast-error { background-color: #8f4433 !important; }
#toast-container > .toast-warning { background-color: var(--honey) !important; }
#toast-container > .toast-info { background-color: var(--sage) !important; }

.loader-wrapper { background-color: var(--canvas); }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--hairline-strong); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }
.footer { background: transparent; border-top: 1px solid var(--hairline); box-shadow: none; }
.footer p { color: var(--muted); font-size: 12px; }

/* ===========================  Mobile shell  ============================== */

.sr-appbar, .sr-tabbar, .sr-scrim { display: none; }

@media (max-width: 899.98px) {
    /* Off-canvas drawer */
    .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper {
        width: 284px; max-width: 86vw;
        transform: translateX(-100%);
        transition: transform 180ms ease;
        box-shadow: var(--shadow-drawer);
        z-index: 1045;
    }
    body.sr-drawer-open .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper { transform: translateX(0); }
    .sr-scrim {
        display: block; position: fixed; inset: 0;
        background: rgba(30, 42, 39, .45);
        z-index: 1040; opacity: 0; pointer-events: none;
        transition: opacity 180ms ease;
    }
    body.sr-drawer-open .sr-scrim { opacity: 1; pointer-events: auto; }

    /* The legacy desktop header is replaced by the app bar */
    .page-wrapper .page-header { display: none !important; }
    .sr-appbar {
        display: block; position: sticky; top: 0; z-index: 1030;
        background: rgba(251, 250, 246, .96);
        -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
        border-bottom: 1px solid var(--hairline);
        padding: 10px 14px;
    }
    .sr-appbar-row { display: flex; align-items: center; gap: 10px; }
    .sr-appbar-btn {
        width: 44px; height: 44px; flex-shrink: 0;
        display: inline-flex; align-items: center; justify-content: center;
        border-radius: var(--r-ctrl); border: none; background: var(--stone); color: var(--soft);
    }
    .sr-appbar-title { flex: 1; min-width: 0; }
    .sr-appbar-title strong { font-family: var(--font-display); font-size: 17px; font-weight: 500; color: var(--ink); display: block; line-height: 1.2; }
    .sr-appbar-title span { font-size: 11px; color: var(--muted); }
    .sr-appbar form { margin-top: 8px; }
    .sr-appbar input { width: 100%; min-height: 44px; border-radius: 16px; }

    .page-wrapper .page-body-wrapper .page-body { margin-top: 0 !important; margin-left: 0 !important; padding-bottom: 110px; }
    .page-wrapper.compact-wrapper .page-body-wrapper .footer { margin-left: 0 !important; padding-bottom: 90px; }

    /* Bottom tab bar */
    .sr-tabbar {
        display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1035;
        background: rgba(251, 250, 246, .96);
        -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
        border-top: 1px solid var(--hairline);
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
    .sr-tabbar a, .sr-tabbar button {
        flex: 1; min-height: 52px; border: none; background: transparent;
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
        color: var(--soft); font-size: 11px; font-weight: 600; padding: 6px 2px; position: relative;
    }
    .sr-tabbar a.is-active, .sr-tabbar button.is-active { color: var(--deep); }
    .sr-tabbar svg { width: 20px; height: 20px; stroke-width: 1.8; }
    .sr-tabbar .sr-tabbadge {
        position: absolute; top: 4px; left: 55%;
        background: var(--honey); color: #fff;
        border-radius: var(--r-pill); font-size: 9.5px; font-weight: 700;
        padding: 1px 5px; line-height: 1.4;
    }

    /* 44px touch targets */
    .btn, .sr-btn, a.dropbtn, span.dropbtn { min-height: 44px; display: inline-flex; align-items: center; }
    .sr-row .btn, .sr-row .sr-btn, .sr-cell-act .btn { min-height: 44px; }
    .sr-card-head, .sr-filters { padding-left: 14px; padding-right: 14px; }
    .sr-card-body, .card .card-body { padding-left: 14px; padding-right: 14px; }
}

/* Screens still on a data table (reports, payouts, coupons, settings lists)
   become stacked cards on a narrow screen — one card per record, each value
   captioned with its column name. public/js/sr-table.js stamps the captions
   from the table's own header; a table it cannot read safely (grouped or
   spanning headers) keeps the scrolling behaviour instead. */
@media (max-width: 899.98px) {
    .table-responsive {
        border: none;
        overflow-x: auto;
    }
    table.sr-stacked { border: none; }
    table.sr-stacked thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    table.sr-stacked, table.sr-stacked tbody, table.sr-stacked tr, table.sr-stacked td { display: block; width: auto; }
    table.sr-stacked tr {
        background: var(--surface);
        border: 1px solid var(--hairline);
        border-radius: var(--r-chip);
        padding: 6px 4px;
        margin-bottom: 10px;
    }
    table.sr-stacked tr:hover { background: var(--surface); }
    table.sr-stacked td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 14px;
        border: none;
        border-bottom: 1px solid var(--hairline);
        padding: 8px 12px;
        font-size: 13px;
        text-align: right;
    }
    table.sr-stacked td:last-child { border-bottom: none; }
    table.sr-stacked td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 auto;
        max-width: 45%;
        text-align: left;
        font-size: 10.5px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: var(--muted);
    }
    /* A cell holding only controls reads better full width, without a caption */
    table.sr-stacked td:has(> .action),
    table.sr-stacked td:has(> ul.action) { justify-content: flex-end; }

    /* Tables sr-table.js could not stamp keep the old behaviour: scroll inside
       their own container, cells tightened, never the page. */
    .table:not(.sr-stacked) thead th { font-size: 10px; padding: 8px 10px; white-space: nowrap; }
    .table:not(.sr-stacked) tbody td { font-size: 12.5px; padding: 10px; white-space: nowrap; }
}

/* Nothing scrolls sideways: long content gets its own scroller, never the page */
html, body { overflow-x: hidden; max-width: 100%; }
.table-responsive, .sr-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
img, svg, video { max-width: 100%; }

@media print {
    .page-header, .sidebar-wrapper, .sr-appbar, .sr-tabbar, .tap-top { display: none !important; }
    .sr-card, .card { box-shadow: none; }
}

/* ==================  Upload placeholders and offset controls  ============= */

/* An upload field's placeholder is decoration: a stock illustration standing
   in for a picture the user has not chosen yet. On roughly thirty add/edit
   forms it was the largest thing on the page, above every real field, for the
   one input that is usually optional.

   Hidden while it still points at the stock image. The moment showPreview()
   or showListPreview() swaps in the chosen file the src changes, this stops
   matching, and the preview appears — so no script had to change, and with
   this stylesheet blocked every form behaves exactly as it did before. */
#file-preview[src$="/default/profile.png"],
#second-file-preview[src$="/default/profile.png"],
[id$="_preview"][src$="/default/profile.png"],
#show_icon[src$="/default/profile.png"] { display: none; }

/* A control with no label of its own has to drop by a label's height to sit
   level with the labelled inputs beside it. That was written inline as a fixed
   top margin, which kept the offset after the columns stacked and left a band
   of dead space above the control on a phone. The offset now applies only
   where the columns are actually side by side; each screen keeps the value it
   was tuned with, via --sr-align. */
@media (min-width: 768px) {
    .sr-align { margin-top: var(--sr-align, 26px); }
}