/* SHF — workflow additions.
   Extends newtheme classes (card, stage-card, badge, pill, filter-row) for
   multi-phase stages, role handoffs, sub-actions, stat cards, filter panels,
   query/transfer modals. Uses only tokens already defined in assets/shf.css. */

/* ========== Stat cards row ========== */
.stat-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

@media (max-width: 900px) {
    .stat-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

.stat-card {
    background: #fff;
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    border-radius: var(--r-lg);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: var(--sh-1);
}

.stat-card .stat-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: var(--accent-soft);
    color: var(--accent);
    flex-shrink: 0;
}

.stat-card .stat-icon .i {
    width: 18px;
    height: 18px;
}

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

.stat-card .stat-val {
    font-family: 'Jost', sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.01em;
    line-height: 1.1;
}

.stat-card .stat-lbl {
    font-size: 11px;
    color: var(--ink-4);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 2px;
}

.stat-card--blue {
    border-left-color: var(--blue);
}

.stat-card--blue .stat-icon {
    background: var(--blue-soft);
    color: var(--blue);
}

.stat-card--green {
    border-left-color: var(--green);
}

.stat-card--green .stat-icon {
    background: var(--green-soft);
    color: var(--green);
}

.stat-card--amber {
    border-left-color: var(--amber);
}

.stat-card--amber .stat-icon {
    background: var(--amber-soft);
    color: var(--amber);
}

.stat-card--red {
    border-left-color: var(--red);
}

.stat-card--red .stat-icon {
    background: var(--red-soft);
    color: var(--red);
}

.stat-card--violet {
    border-left-color: var(--violet);
}

.stat-card--violet .stat-icon {
    background: var(--violet-soft);
    color: var(--violet);
}

/* ========== Filter panel ========== */
.filter-panel {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    margin-bottom: 16px;
    box-shadow: var(--sh-1);
}

.filter-panel-hd {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    cursor: pointer;
    border-bottom: 1px solid transparent;
    user-select: none;
}

.filter-panel.open .filter-panel-hd {
    border-bottom-color: var(--line);
}

.filter-panel-hd .chev {
    transition: transform 0.15s;
    color: var(--ink-4);
}

.filter-panel.open .filter-panel-hd .chev {
    transform: rotate(90deg);
}

.filter-panel-hd .title {
    font-family: 'Jost', sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-2);
}

.filter-panel-hd .count {
    background: var(--accent);
    color: #fff;
    border-radius: 999px;
    padding: 1px 7px;
    font-size: 10px;
    font-weight: 700;
}

.filter-panel-bd {
    padding: 14px 16px;
    display: none;
}

.filter-panel.open .filter-panel-bd {
    display: block;
}

.filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px 14px;
    align-items: end;
}

.filter-grid .field {
    margin-bottom: 0;
}

.filter-grid label {
    display: block;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-4);
    font-weight: 600;
    margin-bottom: 4px;
}

.filter-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}

/* ========== Per-page selector ========== */
.per-page {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--ink-3);
}

.per-page select {
    height: 28px;
    padding: 2px 24px 2px 8px;
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    background: #fff;
    font-size: 11.5px;
}

/* ========== Multi-phase strip inside stage-card ========== */
.phase-strip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0 0;
    padding: 10px;
    background: var(--paper);
    border: 1px dashed var(--line-strong);
    border-radius: 8px;
}

.phase-strip-lbl {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-4);
    font-weight: 600;
    margin-right: 4px;
}

.phase-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 500;
    background: #fff;
    border: 1px solid var(--line-strong);
    color: var(--ink-3);
}

.phase-pill .pn {
    font-family: 'Jost', sans-serif;
    font-weight: 700;
    font-size: 10.5px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--paper-2);
    color: var(--ink-3);
}

.phase-pill--done {
    background: var(--green-soft);
    border-color: var(--green);
    color: var(--green);
}

.phase-pill--done .pn {
    background: var(--green);
    color: #fff;
}

.phase-pill--active {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent-deep);
    box-shadow: 0 0 0 3px rgba(241, 90, 41, 0.12);
}

.phase-pill--active .pn {
    background: var(--accent);
    color: #fff;
}

.phase-pill--pending {
    background: #fff;
    border-color: var(--line);
    color: var(--ink-4);
}

.phase-chev {
    color: var(--ink-4);
}

/* ========== Role chips ========== */
.role-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 600;
    border: 1px solid transparent;
    background: var(--paper-2);
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.role-chip .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.role-chip--task-owner {
    background: #eef2ff;
    color: #3730a3;
}

.role-chip--loan-advisor {
    background: #e5eef7;
    color: var(--blue);
}

.role-chip--bank-employee {
    background: var(--amber-soft);
    color: var(--amber);
}

.role-chip--office-employee {
    background: var(--violet-soft);
    color: var(--violet);
}

.role-chip--branch-manager {
    background: var(--green-soft);
    color: var(--green);
}

.role-chip--bdh {
    background: var(--green-soft);
    color: var(--green);
}

.role-chip--admin {
    background: var(--red-soft);
    color: var(--red);
}

.role-chip--super-admin {
    background: #1c1a1b;
    color: #fdb888;
}

/* ========== Sub-action buttons ========== */
.sub-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.sub-actions .btn {
    font-size: 11.5px;
}

/* ========== Handoff indicator ========== */
.handoff {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--ink-3);
    background: var(--paper);
    border: 1px dashed var(--line-strong);
    border-radius: 6px;
    padding: 4px 8px;
}

.handoff .arrow {
    color: var(--ink-4);
}

/* ========== Parallel child stage-card ========== */
.stage-card--child {
    background: var(--paper);
    box-shadow: none;
    border-style: dashed;
}

.stage-card--child .sh .sn {
    background: var(--paper-2);
    color: var(--ink-3);
    border: 1px dashed var(--line-strong);
}

/* ========== Decision gate stage ========== */
.decision-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 10px;
}

.decision-tile {
    text-align: center;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    background: #fff;
}

.decision-tile.approve {
    border-color: var(--green);
    color: var(--green);
}

.decision-tile.escalate {
    border-color: var(--amber);
    color: var(--amber);
}

.decision-tile.reject {
    border-color: var(--red);
    color: var(--red);
}

.decision-tile.selected.approve {
    background: var(--green-soft);
}

.decision-tile.selected.escalate {
    background: var(--amber-soft);
}

.decision-tile.selected.reject {
    background: var(--red-soft);
}

/* ========== Feature flag banner ========== */
.flag-banner {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 6px;
    background: var(--violet-soft);
    color: var(--violet);
    border: 1px solid rgba(91, 71, 151, 0.2);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ========== Query & transfer pills on stage card ========== */
.stage-meta-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
    font-size: 11px;
    color: var(--ink-4);
}

.stage-meta-row .meta-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--paper);
    border: 1px solid var(--line);
}

.stage-meta-row .meta-pill.has-open {
    background: var(--red-soft);
    color: var(--red);
    border-color: rgba(192, 57, 43, 0.2);
}

/* ========== Mobile/desktop table swap ========== */
@media (min-width: 900px) {
    .d-mobile-only {
        display: none !important;
    }
}

@media (max-width: 899px) {
    .d-desktop-only {
        display: none !important;
    }

    .tbl {
        font-size: 12px;
    }
}

.m-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 10px;
    box-shadow: var(--sh-1);
}

.m-card .m-hd {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.m-card .m-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    padding: 4px 0;
    border-top: 1px dashed var(--line);
    color: var(--ink-3);
}

.m-card .m-row:first-of-type {
    border-top: none;
    padding-top: 2px;
}

.m-card .m-row .k {
    color: var(--ink-4);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.m-card .m-row .v {
    font-weight: 500;
    color: var(--ink);
}

/* ========== Document tracker grid ========== */
.doc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
}

.doc-tile {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    transition: box-shadow 0.1s, border-color 0.1s;
}

.doc-tile:hover {
    box-shadow: var(--sh-2);
}

.doc-tile .doc-chk {
    margin-top: 2px;
}

.doc-tile .doc-meta {
    flex: 1;
    min-width: 0;
}

.doc-tile .doc-name {
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
}

.doc-tile .doc-sub {
    font-size: 11px;
    color: var(--ink-4);
    margin-top: 2px;
}

.doc-tile.is-received {
    border-color: var(--green);
    background: var(--green-soft);
}

.doc-tile.is-pending {
    border-color: var(--line-strong);
}

.doc-tile.is-rejected {
    border-color: var(--red);
    background: var(--red-soft);
}

.doc-tile .drag {
    cursor: grab;
    color: var(--ink-4);
}

/* ========== Note/comment thread ========== */
.note-thread {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.note-thread .note {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px 12px;
    background: #fff;
}

.note-thread .note .who {
    font-size: 11px;
    color: var(--ink-4);
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
}

.note-thread .note .body {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ink-2);
    white-space: pre-wrap;
}

/* ========== Query panel ========== */
.query-item {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px 12px;
    background: #fff;
    margin-bottom: 8px;
}

.query-item.is-open {
    border-left: 3px solid var(--red);
}

.query-item.is-resolved {
    border-left: 3px solid var(--green);
}

.query-item .q-hd {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--ink-4);
    margin-bottom: 4px;
}

.query-item .q-body {
    font-size: 12.5px;
    color: var(--ink-2);
}

.query-item .q-resp {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--line);
    font-size: 12px;
    color: var(--ink-3);
}

/* ========== Tenure chips ========== */
.chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.chip-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid var(--line-strong);
    background: #fff;
    font-size: 12px;
    cursor: pointer;
    user-select: none;
    color: var(--ink-3);
}

.chip-toggle.on {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

/* ========== Tag input ========== */
.tag-input-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px 8px;
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    min-height: 34px;
    background: #fff;
}

.tag-input-wrap .tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--accent-soft);
    color: var(--accent-deep);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 11.5px;
}

.tag-input-wrap .tag .x {
    cursor: pointer;
    color: var(--ink-4);
}

.tag-input-wrap input {
    border: none;
    outline: none;
    min-width: 100px;
    font-size: 12px;
    background: transparent;
}

/* ========== Amount input (Indian formatting) ========== */
.amt-wrap {
    position: relative;
}

.amt-wrap .rupee {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-4);
    font-family: 'JetBrains Mono', monospace;
    pointer-events: none;
    font-size: 12px;
}

.amt-wrap input {
    padding-left: 22px;
    font-family: 'JetBrains Mono', monospace;
    font-variant-numeric: tabular-nums;
}

.amt-words {
    font-size: 11px;
    color: var(--ink-4);
    margin-top: 4px;
    min-height: 14px;
}

/* ========== Timeline role dots ========== */
.tl-dot--la {
    background: var(--blue) !important;
    box-shadow: 0 0 0 3px var(--blue-soft) !important;
}

.tl-dot--be {
    background: var(--amber) !important;
    box-shadow: 0 0 0 3px var(--amber-soft) !important;
}

.tl-dot--oe {
    background: var(--violet) !important;
    box-shadow: 0 0 0 3px var(--violet-soft) !important;
}

.tl-dot--bm {
    background: var(--green) !important;
    box-shadow: 0 0 0 3px var(--green-soft) !important;
}

.tl-dot--to {
    background: #4b5563 !important;
    box-shadow: 0 0 0 3px #e5e7eb !important;
}

.tl-dot--sys {
    background: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-soft) !important;
}

/* ========== Status banners ========== */
.status-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 12.5px;
    margin-bottom: 14px;
}

.status-banner--hold {
    background: var(--amber-soft);
    color: var(--amber);
    border-left: 3px solid var(--amber);
}

.status-banner--cancel {
    background: var(--red-soft);
    color: var(--red);
    border-left: 3px solid var(--red);
}

.status-banner--over {
    background: var(--red-soft);
    color: var(--red);
    border-left: 3px solid var(--red);
}

.status-banner--info {
    background: var(--blue-soft);
    color: var(--blue);
    border-left: 3px solid var(--blue);
}

.status-banner .act {
    margin-left: auto;
    display: flex;
    gap: 6px;
}

/* ========== Responsive breakpoints ========== */
@media (max-width: 899px) {
    .filter-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .stat-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .decision-grid {
        grid-template-columns: 1fr;
    }

    .phase-strip {
        padding: 8px;
    }

    .phase-pill {
        font-size: 11px;
        padding: 3px 8px;
    }
}

@media (max-width: 599px) {
    .stat-row {
        grid-template-columns: 1fr;
        gap: 8px;
        margin-bottom: 12px;
    }

    .stat-card {
        padding: 10px 12px;
    }

    .stat-card .stat-val {
        font-size: 18px;
    }

    .filter-grid {
        grid-template-columns: 1fr;
    }

    .filter-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-actions .btn {
        width: 100%;
    }

    .page-header h1 {
        font-size: 22px;
    }

    .head-row {
        flex-direction: column;
        align-items: stretch;
    }

    .head-actions {
        display: flex;
        gap: 6px;
    }

    .head-actions .btn {
        flex: 1;
        text-align: center;
    }
}

/* ========== Bootstrap Datepicker popup — above any stacking context ========== */
.datepicker.datepicker-dropdown {
    z-index: 10050 !important;
    position: absolute !important;
    display: block;
    font-family: 'Archivo', 'Inter', system-ui, sans-serif;
    background: #fff;
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    padding: 4px;
    box-shadow: var(--sh-pop);
    min-width: 240px;
}

.datepicker.datepicker-dropdown .table-condensed {
    font-size: 12px;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.datepicker.datepicker-dropdown .table-condensed td,
.datepicker.datepicker-dropdown .table-condensed th {
    padding: 4px 6px;
    text-align: center;
    border-radius: 4px;
}

.datepicker.datepicker-dropdown .table-condensed td.day:hover,
.datepicker.datepicker-dropdown .table-condensed td.month:hover,
.datepicker.datepicker-dropdown .table-condensed td.year:hover {
    background: var(--paper-2);
    cursor: pointer;
}

.datepicker.datepicker-dropdown .table-condensed td.old,
.datepicker.datepicker-dropdown .table-condensed td.new {
    color: var(--ink-4);
}

.datepicker.datepicker-dropdown .table-condensed th.datepicker-switch {
    cursor: pointer;
    font-weight: 600;
}

.datepicker.datepicker-dropdown .table-condensed th.next,
.datepicker.datepicker-dropdown .table-condensed th.prev {
    cursor: pointer;
}

.datepicker.datepicker-dropdown .datepicker-days,
.datepicker.datepicker-dropdown .datepicker-months,
.datepicker.datepicker-dropdown .datepicker-years,
.datepicker.datepicker-dropdown .datepicker-decades,
.datepicker.datepicker-dropdown .datepicker-centuries {
    display: block;
}

.datepicker.datepicker-dropdown.datepicker-orient-top:after {
    border-top-color: #fff;
}

.datepicker.datepicker-dropdown .active,
.datepicker.datepicker-dropdown .active:hover,
.datepicker.datepicker-dropdown .active.disabled,
.datepicker.datepicker-dropdown .active.disabled:hover {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    background-image: none !important;
    color: #fff !important;
}

.datepicker.datepicker-dropdown .today,
.datepicker.datepicker-dropdown .today:hover {
    background: var(--accent-soft) !important;
    color: var(--accent-deep) !important;
    background-image: none !important;
}

.datepicker.datepicker-dropdown .datepicker-switch:hover,
.datepicker.datepicker-dropdown .next:hover,
.datepicker.datepicker-dropdown .prev:hover {
    background: var(--paper-2) !important;
}

/* ========== SweetAlert2 tweaks ========== */
.swal2-popup {
    font-family: 'Archivo', 'Inter', system-ui, sans-serif !important;
    border-radius: var(--r-lg) !important;
}

.swal2-title {
    font-family: 'Jost', 'Archivo', sans-serif !important;
    letter-spacing: -0.01em;
    color: var(--ink) !important;
}

.swal2-styled.swal2-confirm {
    border-radius: 6px !important;
    font-weight: 600 !important;
}

.swal2-styled.swal2-cancel {
    border-radius: 6px !important;
    font-weight: 600 !important;
}

/* ========== Input width normalize ========== */
.input {
    width: 100%;
}

.filter-grid .input {
    width: 100%;
}

/* ========== Bank brand chip (real-world bank colors) ========== */
.bank-chip {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.3;
    white-space: nowrap;
}

/* ========== Field activity strip — 2×2 in narrow sidebar ========== */
aside .strip {
    grid-template-columns: repeat(2, 1fr);
}

aside .strip>div {
    padding: 10px 12px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

aside .strip>div:nth-child(2n) {
    border-right: none;
}

aside .strip>div:nth-last-child(-n+2) {
    border-bottom: none;
}

aside .strip .val {
    font-size: 20px;
}

/* ========== Floating Create FAB (site-wide) ========== */
.shf-fab-wrap {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 200;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    pointer-events: none;
    /* children re-enable */
}

.shf-fab-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(20, 18, 19, 0.25);
    z-index: 190;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}

body.shf-fab-open .shf-fab-backdrop {
    opacity: 1;
    pointer-events: auto;
}

.shf-fab-main {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--ink-2);
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: var(--sh-pop);
    border: 3px solid var(--accent);
    cursor: pointer;
    pointer-events: auto;
    transition: transform 0.18s ease, background 0.15s;
    position: relative;
    z-index: 2;
}

.shf-fab-main:hover {
    background: var(--ink);
}

.shf-fab-main svg {
    width: 22px;
    height: 22px;
    stroke: #fff;
    fill: none;
}

body.shf-fab-open .shf-fab-main {
    transform: rotate(135deg);
    background: var(--accent);
    border-color: #fff;
}

.shf-fab-menu {
    display: none;
    flex-direction: column;
    gap: 8px;
}

body.shf-fab-open .shf-fab-menu {
    display: flex;
}

.shf-fab-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px 8px 6px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    box-shadow: var(--sh-2);
    text-decoration: none;
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
    font-family: 'Jost', 'Archivo', sans-serif;
    white-space: nowrap;
    transition: transform 0.12s, border-color 0.12s;
    min-width: 180px;
    /* uniform width */
    justify-content: flex-start;
    /* icon + label align left inside pill */
}

.shf-fab-item .shf-fab-item-label {
    flex: 1;
    text-align: left;
}

.shf-fab-item:hover {
    transform: translateX(-4px);
    border-color: var(--accent);
}

.shf-fab-item-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
}

.shf-fab-item-icon svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
}

.shf-fab-icon-quotation {
    background: var(--accent);
}

.shf-fab-icon-task {
    background: var(--blue);
}

.shf-fab-icon-visit {
    background: var(--green);
}

/* When bottom-nav is on (≤1024), lift FAB so it clears the nav (60px bar + gap) */
@media (max-width: 1024px) {
    .shf-fab-wrap {
        bottom: 80px;
    }
}

@media (max-width: 599px) {
    .shf-fab-wrap {
        right: 16px;
        bottom: 80px;
    }

    .shf-fab-main {
        width: 48px;
        height: 48px;
    }

    .shf-fab-item {
        padding: 7px 12px 7px 6px;
        font-size: 12.5px;
    }
}

/* ========== Hamburger kill-switch (user replaced with bottom nav) ========== */
.m-hamburger {
    display: none !important;
}

body.nav-open {
    overflow: auto;
}

body.nav-open::after {
    display: none !important;
    content: none !important;
}

/* ========== Brand logo in topbar ========== */
.topbar {
    height: 60px;
    padding: 0 18px;
    gap: 18px;
}

.topbar .logo {
    flex-shrink: 0;
    max-width: 230px;
    overflow: hidden;
}

.topbar .logo img.brand-logo {
    height: 34px;
    width: auto;
    display: block;
    object-fit: contain;
}

.topbar-right {
    gap: 10px;
    flex-shrink: 0;
}

/* ========== Topbar — light accent-tinted theme ========== */
.topbar {
    background: #f16c4559 !important;
    /* accent at ~35% alpha */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--ink) !important;
    border-bottom: 3px solid var(--accent);
    box-shadow: 0 2px 12px rgba(20, 18, 19, 0.08);
}

/* Nav items — dark text on light tinted bar */
.topbar .nav-primary .nav-item {
    color: rgba(28, 26, 27, 0.72) !important;
}

.topbar .nav-primary .nav-item:hover {
    color: var(--ink) !important;
    background: rgba(255, 255, 255, 0.35);
}

.topbar .nav-primary .nav-item.active {
    color: var(--ink) !important;
    background: rgba(255, 255, 255, 0.5);
}

.topbar .nav-primary .nav-item.active::after {
    background: var(--accent);
    /* keep accent underline */
}

.topbar .nav-primary .nav-item .i {
    opacity: 0.85;
}

/* Search field — adapts to light bar */
.topbar .top-search {
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(28, 26, 27, 0.12);
    color: var(--ink);
}

.topbar .top-search::placeholder {
    color: rgba(28, 26, 27, 0.5);
}

.topbar .search-wrap .i {
    color: rgba(28, 26, 27, 0.5);
}

/* Icon buttons (bell, impersonate, etc.) — consistent branded treatment */
.topbar .icon-btn {
    background: #fff;
    color: var(--ink);
    border: 1px solid rgba(28, 26, 27, 0.10);
}

.topbar .icon-btn:hover {
    background: #fff;
    color: var(--accent);
    border-color: var(--accent);
}

/* Unify SVG color for every icon-btn child */
.topbar .icon-btn .i {
    color: inherit;
}

/* Notification dot — compact red badge with white border */
.topbar .icon-btn {
    width: 34px;
    height: 34px;
    border-radius: 8px;
}

.topbar .icon-btn .dot {
    background: var(--red) !important;
    color: #fff !important;
    border: 1.5px solid #fff !important;
    top: 2px;
    right: 2px;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
}

/* Role pill — solid readable contrast (white bg, accent text + border) */
.topbar .role-pill {
    background: #fff;
    color: var(--accent-deep);
    border: 1px solid var(--accent);
    padding: 0 12px;
    white-space: nowrap;
    height: 28px;
}

.topbar .role-pill .i {
    color: var(--accent);
}

/* User chip — white background so name is always legible on the tinted bar */
.topbar .user-chip {
    background: #fff;
    color: var(--ink);
    border: 1px solid rgba(28, 26, 27, 0.12);
    padding: 3px 12px 3px 3px;
    height: 32px;
    font-size: 12.5px;
    font-weight: 500;
    font-family: 'Archivo', sans-serif;
    gap: 8px;
    white-space: nowrap;
}

.topbar .avatar {
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    width: 26px;
    height: 26px;
    font-size: 11px;
    flex-shrink: 0;
}

/* On narrow screens where nav is already hidden, keep role-pill + user name compact */
@media (max-width: 1024px) {
    .topbar .role-pill {
        font-size: 10px;
        padding: 0 8px;
        height: 26px;
        gap: 4px;
    }

    .topbar .user-chip>span:nth-child(2) {
        display: none;
    }

    /* hide name, keep avatar */
    .topbar .user-chip {
        padding-right: 3px;
    }

    .topbar .top-search {
        width: 160px;
    }
}

@media (max-width: 599px) {
    .topbar {
        padding: 0 10px;
        gap: 8px;
    }

    .topbar .search-wrap {
        display: none;
    }

    .topbar .logo {
        max-width: 120px;
    }

    .topbar .logo img.brand-logo {
        height: 26px;
    }

    /* Role pill stays visible — collapses to icon-only chip so it never overflows */
    .topbar .role-pill {
        padding: 0;
        width: 26px;
        height: 26px;
        justify-content: center;
        gap: 0;
        flex-shrink: 0;
    }

    .topbar .role-pill .role-pill-text {
        display: none;
    }

    .topbar .icon-btn {
        width: 30px;
        height: 30px;
    }
}

/* Dropdown in tinted topbar */
.topbar .nav-dd {
    background: #fff;
    border: 1px solid var(--line);
}

/* ========== Mobile bottom nav — ALWAYS visible on tablets + phones ========== */
.m-bottomnav {
    display: none;
}

@media (max-width: 1024px) {

    /* Hide the topbar nav-primary entirely (no hamburger to open it) */
    .topbar .nav-primary {
        display: none !important;
    }

    .topbar {
        justify-content: space-between;
    }

    /* Pin the bottom nav at the bottom of the viewport — always visible */
    .m-bottomnav {
        display: grid !important;
        position: fixed !important;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 180;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        background: #fff;
        border-top: 1px solid var(--line);
        box-shadow: 0 -4px 20px rgba(20, 18, 19, 0.08);
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    }

    .m-bottomnav .bn-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        padding: 6px 4px;
        font-size: 10.5px;
        font-weight: 500;
        color: var(--ink-3);
        background: none;
        border: none;
        text-decoration: none;
        cursor: pointer;
    }

    .m-bottomnav .bn-item.active {
        color: var(--accent);
    }

    .m-bottomnav .bn-item .i {
        width: 20px;
        height: 20px;
    }

    /* Reserve room for the fixed nav bar */
    body {
        padding-bottom: 70px;
    }
}

/* ========== Scrollable tabs with arrow buttons ========== */
.tabs-wrap {
    position: relative;
    display: flex;
    align-items: stretch;
}

.tabs-wrap>.tabs {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    margin-top: 0;
}

.tabs-wrap>.tabs::-webkit-scrollbar {
    display: none;
}

.tabs-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--accent);
    /* brand orange default */
    border: 1px solid var(--accent);
    display: none;
    /* hidden by default; JS toggles */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    box-shadow: 0 4px 12px rgba(241, 90, 41, 0.35);
    color: #fff;
    /* white icon on orange bg */
    padding: 0;
    transition: color 0.12s, background 0.12s, transform 0.12s, box-shadow 0.12s;
}

.tabs-arrow:hover {
    background: var(--accent-deep);
    border-color: var(--accent-deep);
    color: #fff;
    box-shadow: 0 6px 16px rgba(217, 74, 31, 0.45);
}

.tabs-arrow:active {
    transform: translateY(-50%) scale(0.92);
}

.tabs-arrow svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.6;
}

.tabs-arrow.tabs-arrow-show {
    display: flex;
}

.tabs-arrow-left {
    left: -4px;
}

.tabs-arrow-right {
    right: -4px;
}

/* Edge fade masks — make the cut-off look intentional when arrows visible */
.tabs-wrap::before,
.tabs-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 28px;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.15s;
}

.tabs-wrap::before {
    left: 0;
    background: linear-gradient(to right, var(--paper-2), transparent);
}

.tabs-wrap::after {
    right: 0;
    background: linear-gradient(to left, var(--paper-2), transparent);
}

.tabs-wrap.has-left .tabs-arrow-left {
    display: flex;
}

.tabs-wrap.has-right .tabs-arrow-right {
    display: flex;
}

.tabs-wrap.has-left::before {
    opacity: 1;
}

.tabs-wrap.has-right::after {
    opacity: 1;
}

/* Inside page-header, the header bg is dark/tinted, so match the fade */
.page-header .tabs-wrap::before {
    background: linear-gradient(to right, var(--paper-2), transparent);
}

.page-header .tabs-wrap::after {
    background: linear-gradient(to left, var(--paper-2), transparent);
}

/* ========== More bottom-sheet (offcanvas) ========== */
.shf-more-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(20, 18, 19, 0.45);
    opacity: 0;
    pointer-events: none;
    z-index: 195;
    transition: opacity 0.2s;
}

.shf-more-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 75vh;
    background: #fff;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -10px 30px rgba(20, 18, 19, 0.18);
    z-index: 200;
    transform: translateY(100%);
    transition: transform 0.25s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

body.shf-more-open .shf-more-backdrop {
    opacity: 1;
    pointer-events: auto;
}

body.shf-more-open .shf-more-sheet {
    transform: translateY(0);
}

.shf-more-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
}

.shf-more-hd h3 {
    font-family: 'Jost', sans-serif;
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    color: var(--ink);
}

.shf-more-hd .icon-btn {
    color: var(--ink-3);
}

.shf-more-hd .icon-btn:hover {
    color: var(--ink);
}

.shf-more-body {
    display: flex;
    flex-direction: column;
    padding: 6px 0 14px;
    overflow-y: auto;
}

.shf-more-item {
    display: block;
    padding: 12px 18px;
    font-size: 14px;
    color: var(--ink);
    text-decoration: none;
    border: none;
    background: none;
    text-align: left;
    font-family: 'Archivo', sans-serif;
    cursor: pointer;
    width: 100%;
}

.shf-more-item:hover {
    background: var(--paper-2);
}

.shf-more-item.shf-more-danger {
    color: var(--red);
    font-weight: 600;
}

/* ========== KPI chip strip (dashboard header) ========== */
.kpi-strip {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding: 8px 14px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: var(--sh-1);
}

.kpi-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-family: 'Jost', 'Archivo', sans-serif;
    white-space: nowrap;
    line-height: 1;
}

.kpi-chip .kpi-ic {
    width: 16px;
    height: 16px;
    display: inline-grid;
    place-items: center;
    color: var(--ink-4);
    align-self: center;
    flex-shrink: 0;
}

.kpi-chip .kpi-ic svg {
    width: 14px;
    height: 14px;
}

.kpi-chip .kpi-val {
    font-size: 18px;
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.kpi-chip .kpi-lbl {
    font-size: 11px;
    font-weight: 500;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.kpi-sep {
    width: 1px;
    height: 22px;
    background: var(--line);
    display: inline-block;
}

.kpi-chip.kpi-tone-accent .kpi-ic {
    color: var(--accent);
}

.kpi-chip.kpi-tone-blue .kpi-ic {
    color: var(--blue);
}

.kpi-chip.kpi-tone-amber .kpi-ic {
    color: var(--amber);
}

.kpi-chip.kpi-tone-green .kpi-ic {
    color: var(--green);
}

.kpi-chip.kpi-tone-red .kpi-ic {
    color: var(--red);
}

.kpi-chip.kpi-tone-violet .kpi-ic {
    color: var(--violet);
}

@media (max-width: 899px) {
    .kpi-strip {
        gap: 10px;
        padding: 6px 10px;
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    .kpi-chip .kpi-val {
        font-size: 16px;
    }

    .kpi-chip .kpi-lbl {
        font-size: 10.5px;
    }

    .kpi-sep {
        height: 18px;
    }
}

/* ========== Page-header head-actions — keep buttons on one line ==========
   Default `.head-actions { display: flex; gap: 8px }` lives in shf.css, but on
   narrow viewports the children could wrap. Force nowrap and let the actions
   strip scroll horizontally instead, so two (or more) buttons always stay on
   the same row. */
.page-header .head-actions {
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.page-header .head-actions::-webkit-scrollbar { display: none; }
.page-header .head-actions > .btn {
    flex-shrink: 0;
}

/* ========== Legacy shf-badge shims ==========
   Several controllers (DVR listing, dashboard DVR tab, loan tables) emit
   badges with the legacy `shf-badge shf-badge-<color>` class pair. The
   newtheme `.badge` / `.pill` vocabulary doesn't include these selectors,
   so the pills render as unstyled inline text. These shims map the legacy
   classes onto the same token set `.badge` already uses, keeping the
   controller emit-sites untouched and giving newtheme pages a consistent
   pill look. */
.shf-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    background: var(--paper-2, #f4f2f0);
    color: var(--ink-3, #6b7280);
    white-space: nowrap;
    line-height: 1.2;
}

.shf-badge-green {
    background: var(--green-soft, rgba(39, 174, 96, 0.12));
    color: var(--green, #1f8c4d);
}

.shf-badge-red {
    background: var(--red-soft, rgba(192, 57, 43, 0.12));
    color: var(--red, #c0392b);
}

.shf-badge-orange {
    background: var(--accent-soft, rgba(241, 90, 41, 0.14));
    color: var(--accent-deep, #c0392b);
}

.shf-badge-blue {
    background: var(--blue-soft, rgba(37, 99, 235, 0.12));
    color: var(--blue, #2563eb);
}

.shf-badge-gray {
    background: var(--paper-2, #f4f2f0);
    color: var(--ink-3, #6b7280);
}

.shf-badge-purple {
    background: var(--violet-soft, rgba(124, 58, 237, 0.12));
    color: var(--violet, #7c3aed);
}

.shf-text-2xs {
    font-size: 10.5px;
}

.shf-text-xs {
    font-size: 11px;
}