/**
 * Custom CSS Overrides (v5)
 * Copied from /public/css/custom.css so v5 theme assets live under /v5.
 */

/* =============================================================================
   Auth pages — static background treatment (login + lock screen)
   Brand-matched: deep emerald-teal base + Emerald brand-green (#6bb33e) accents.
   Pure CSS, not animated. Scoped to .hero-section so it only affects auth pages.
   ============================================================================= */

.hero-section {
    /* Stacked backgrounds (first = top layer):
       1) Very faint dot-grid — subtle tech/futuristic texture
       2) Softer overhead ambient — neutral-green tint, low opacity, long fade
       3) Base emerald-teal gradient — slightly darker top for stronger logo contrast
       All three layers are static (no animation). */
    background:
        radial-gradient(
            circle at center,
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1.6px
        ) 0 0 / 26px 26px,
        radial-gradient(
            ellipse 90% 60% at 50% -10%,
            rgba(205, 220, 200, 0.028) 0%,
            rgba(205, 220, 200, 0) 78%
        ),
        linear-gradient(160deg,
            #0e2722 0%,
            #060e0c 100%
        ) !important;
}

/* Soft Emerald-green aura behind the login card */
.hero-section::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(760px, 92vw);
    height: min(760px, 92vw);
    transform: translate(-50%, -50%);
    background: radial-gradient(
        circle at center,
        rgba(107, 179, 62, 0.14) 0%,        /* Emerald brand-green #6bb33e — core */
        rgba(107, 179, 62, 0.06) 35%,       /* fades into the deep teal */
        rgba(0, 0, 0, 0) 72%
    );
    pointer-events: none;
    z-index: 0;
}

/* Low-contrast emerald-tinted orb on the far right — static ambient accent */
.hero-section::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -14%;
    width: min(720px, 72vw);
    height: min(720px, 72vw);
    transform: translateY(-50%);
    background: radial-gradient(
        circle at center,
        rgba(107, 179, 62, 0.07) 0%,        /* brand-green hint */
        rgba(31, 151, 242, 0.03) 38%,       /* subtle brand-blue mid */
        rgba(0, 0, 0, 0) 72%
    );
    pointer-events: none;
    z-index: 0;
}

/* Hide the right-side orb on small screens to keep mobile clean */
@media (max-width: 575.98px) {
    .hero-section::after { display: none; }
}

/* Portal info/success/danger button remaps live in the semantic colour section below (~line 1158). */

.datepicker table tr td.day:hover,
.datepicker table tr td.focused {
    background-color: var(--bs-primary-bg-subtle) !important;
    color: var(--bs-body-color);
}

.datepicker table tr td.today {
    background-color: var(--bs-warning-bg-subtle) !important;
    border-color: var(--bs-warning-border-subtle) !important;
    color: var(--bs-warning-text-emphasis) !important;
}

.datepicker table tr td.today:hover,
.datepicker table tr td.today:focus,
.datepicker table tr td.today.active {
    background-color: var(--bs-warning) !important;
    border-color: var(--bs-warning) !important;
    color: var(--bs-white) !important;
}

.datepicker table tr td.active,
.datepicker table tr td.active.highlighted,
.datepicker table tr td.selected,
.datepicker table tr td.selected.highlighted {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: var(--bs-white) !important;
}

.datepicker table tr td.active:hover,
.datepicker table tr td.active:focus,
.datepicker table tr td.selected:hover,
.datepicker table tr td.selected:focus {
    background-color: var(--primary-600, var(--bs-primary)) !important;
    border-color: var(--primary-600, var(--bs-primary)) !important;
    color: var(--bs-white) !important;
}

.datepicker table tr td.highlighted {
    background-color: var(--bs-primary-bg-subtle) !important;
    border-color: var(--bs-primary-border-subtle) !important;
    color: var(--bs-primary-text-emphasis) !important;
}

.datepicker table tr td span.active {
    background-color: var(--bs-primary) !important;
    color: var(--bs-white) !important;
}

.datepicker .datepicker-switch,
.datepicker .prev,
.datepicker .next {
    color: var(--bs-primary) !important;
}

.datepicker .datepicker-switch:hover,
.datepicker .prev:hover,
.datepicker .next:hover {
    background-color: var(--bs-primary-bg-subtle) !important;
    color: var(--bs-primary) !important;
}

/* DataTables - default left-align for all columns */
table.dataTable th,
table.dataTable td {
    text-align: left;
}
table.dataTable th.dt-type-numeric,
table.dataTable td.dt-type-numeric,
table.dataTable th.dt-type-date,
table.dataTable td.dt-type-date {
    text-align: left;
}
table.dataTable th.dt-type-numeric div.dt-column-header,
table.dataTable th.dt-type-numeric div.dt-column-footer,
table.dataTable th.dt-type-date div.dt-column-header,
table.dataTable th.dt-type-date div.dt-column-footer {
    flex-direction: row;
}

/* DataTables - modern look (SmartAdmin-style) */
table.dataTable {
    border-radius: 0.375rem;
    overflow: hidden;
}
table.dataTable.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-striped-bg: rgba(0, 0, 0, 0.02);
}
table.dataTable.table-hover > tbody > tr:hover > * {
    --bs-table-hover-bg: rgba(var(--bs-primary-rgb), 0.1);
}
table.dataTable thead th {
    font-weight: 600;
    border-bottom-width: 2px;
}

/* Logo size — ~12% larger than the default 11rem × 2rem; height kept tight
   so the branding block height does not change */
:root {
    --logo-width:  12.25rem;
    --logo-height: 2.1rem;
}

/* Logo version badge (data-prefix) — white text on brand green background;
   font-size slightly reduced so the badge stays proportional to the larger logo */
.app-logo[data-prefix]::before {
    color: #fff !important;
    background: #6bb33e !important;
    font-size: 0.55rem !important;
}

/* Bootstrap Modal — mobile stacking fix (same as global custom.css) */
.modal-backdrop {
    z-index: 2000 !important;
}

.modal {
    z-index: 2005 !important;
}

.modal-backdrop.show {
    opacity: .6 !important;
}

/* Drawer / slide-panel dimmers (settings drawer, virtual assistant) — below Bootstrap modals. */
.backdrop {
    z-index: 1500 !important;
}

/* Mobile nav backdrop must sit BELOW .app-sidebar (z-index 1000 on mobile).
   Without this the backdrop covers the open sidebar and intercepts all taps on nav links.
   The backdrop is moved outside .app-sidebar by the layout_end.php relocation script so
   position:fixed works against the viewport; this rule keeps it visually behind the sidebar. */
[data-toggleclass="app-mobile-menu-open"].backdrop {
    z-index: 999 !important;
}

/* =============================================================================
   Portal global toast (V5) — unified card, semantic accent, light + dark mode
   Markup produced by window.toast() in include/lib/theme/v5/scripts_js_v5.php
   ============================================================================= */

#app-toast-container.portal-toast-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.625rem;
    pointer-events: none;
    max-width: calc(100vw - 1.5rem);
}

@media (max-width: 575.98px) {
    #app-toast-container.portal-toast-stack {
        padding: 0.65rem 0.65rem 0.65rem 0.75rem !important;
        max-width: calc(100vw - 1rem);
        gap: 0.5rem;
    }
}

#app-toast-container.portal-toast-stack .toast {
    pointer-events: auto;
}

#app-toast-container .toast.portal-toast {
    --portal-toast-accent-rgb: var(--bs-primary-rgb, 13, 110, 253);
    width: min(22rem, 100%);
    max-width: 100%;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

#app-toast-container .toast.portal-toast--success {
    --portal-toast-accent-rgb: var(--bs-success-rgb, 25, 135, 84);
}
#app-toast-container .toast.portal-toast--danger {
    --portal-toast-accent-rgb: var(--bs-danger-rgb, 220, 53, 69);
}
#app-toast-container .toast.portal-toast--warning {
    --portal-toast-accent-rgb: var(--bs-warning-rgb, 255, 193, 7);
}
#app-toast-container .toast.portal-toast--info {
    --portal-toast-accent-rgb: var(--bs-info-rgb, 13, 202, 240);
}
#app-toast-container .toast.portal-toast--primary {
    --portal-toast-accent-rgb: var(--bs-primary-rgb, 13, 110, 253);
}
#app-toast-container .toast.portal-toast--secondary {
    --portal-toast-accent-rgb: var(--bs-secondary-rgb, 108, 117, 125);
}

#app-toast-container .portal-toast__body {
    background: transparent;
}

#app-toast-container .portal-toast__surface {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    padding: 0;
    border-radius: 0.5rem;
    /* Slightly lifted from page: clearer edge + depth (light pages were too “flat”) */
    background: var(--bs-body-bg);
    border: 1px solid rgba(var(--bs-body-color-rgb), 0.11);
    box-shadow:
        0 0.5rem 1.35rem rgba(0, 0, 0, 0.1),
        0 0.15rem 0.45rem rgba(0, 0, 0, 0.07),
        0 0 0 1px rgba(0, 0, 0, 0.03),
        inset 0 0 0 1px rgba(var(--portal-toast-accent-rgb), 0.14);
    border-left: 4px solid rgb(var(--portal-toast-accent-rgb));
    overflow: hidden;
}

/* Semantic presence: very subtle tinted surface (still one unified card, not a solid banner) */
#app-toast-container .toast.portal-toast--success .portal-toast__surface {
    background: color-mix(in srgb, var(--bs-body-bg) 86%, var(--bs-success-bg-subtle, rgba(var(--bs-success-rgb), 0.12)) 14%);
}
#app-toast-container .toast.portal-toast--danger .portal-toast__surface {
    background: color-mix(in srgb, var(--bs-body-bg) 86%, var(--bs-danger-bg-subtle, rgba(var(--bs-danger-rgb), 0.12)) 14%);
}
#app-toast-container .toast.portal-toast--warning .portal-toast__surface {
    background: color-mix(in srgb, var(--bs-body-bg) 88%, var(--bs-warning-bg-subtle, rgba(var(--bs-warning-rgb), 0.12)) 12%);
}
#app-toast-container .toast.portal-toast--info .portal-toast__surface {
    background: color-mix(in srgb, var(--bs-body-bg) 88%, var(--bs-info-bg-subtle, rgba(var(--bs-info-rgb), 0.12)) 12%);
}
#app-toast-container .toast.portal-toast--primary .portal-toast__surface {
    background: color-mix(in srgb, var(--bs-body-bg) 90%, var(--bs-primary-bg-subtle, rgba(var(--bs-primary-rgb), 0.12)) 10%);
}
#app-toast-container .toast.portal-toast--secondary .portal-toast__surface {
    background: color-mix(in srgb, var(--bs-body-bg) 92%, var(--bs-secondary-bg, rgba(var(--bs-secondary-rgb), 0.08)) 8%);
}

[data-bs-theme="dark"] #app-toast-container .portal-toast__surface {
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
        0 0.55rem 1.4rem rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.07),
        inset 0 0 0 1px rgba(var(--portal-toast-accent-rgb), 0.18);
}

[data-bs-theme="dark"] #app-toast-container .toast.portal-toast--success .portal-toast__surface {
    background: color-mix(in srgb, var(--bs-body-bg) 78%, var(--bs-success-bg-subtle, rgba(var(--bs-success-rgb), 0.22)) 22%);
}
[data-bs-theme="dark"] #app-toast-container .toast.portal-toast--danger .portal-toast__surface {
    background: color-mix(in srgb, var(--bs-body-bg) 78%, var(--bs-danger-bg-subtle, rgba(var(--bs-danger-rgb), 0.22)) 22%);
}
[data-bs-theme="dark"] #app-toast-container .toast.portal-toast--warning .portal-toast__surface {
    background: color-mix(in srgb, var(--bs-body-bg) 82%, var(--bs-warning-bg-subtle, rgba(var(--bs-warning-rgb), 0.18)) 18%);
}
[data-bs-theme="dark"] #app-toast-container .toast.portal-toast--info .portal-toast__surface {
    background: color-mix(in srgb, var(--bs-body-bg) 82%, var(--bs-info-bg-subtle, rgba(var(--bs-info-rgb), 0.18)) 18%);
}
[data-bs-theme="dark"] #app-toast-container .toast.portal-toast--primary .portal-toast__surface {
    background: color-mix(in srgb, var(--bs-body-bg) 84%, var(--bs-primary-bg-subtle, rgba(var(--bs-primary-rgb), 0.18)) 16%);
}
[data-bs-theme="dark"] #app-toast-container .toast.portal-toast--secondary .portal-toast__surface {
    background: color-mix(in srgb, var(--bs-body-bg) 88%, var(--bs-secondary-bg, rgba(var(--bs-secondary-rgb), 0.14)) 12%);
}

#app-toast-container .portal-toast__main {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.875rem 0 0.875rem 0.875rem;
}

@media (max-width: 575.98px) {
    #app-toast-container .portal-toast__main {
        gap: 0.62rem;
        padding: 0.72rem 0 0.72rem 0.72rem;
    }
}

#app-toast-container .portal-toast__icon {
    flex-shrink: 0;
    width: 2.125rem;
    height: 2.125rem;
    border-radius: 0.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--portal-toast-accent-rgb), 0.18);
    color: rgb(var(--portal-toast-accent-rgb));
}

#app-toast-container .portal-toast__glyph {
    display: block;
    flex-shrink: 0;
    opacity: 0.92;
}

#app-toast-container .portal-toast--warning .portal-toast__icon {
    color: var(--bs-warning-text-emphasis, #664d03);
}
[data-bs-theme="dark"] #app-toast-container .portal-toast--warning .portal-toast__icon {
    color: rgb(var(--bs-warning-rgb));
}

#app-toast-container .portal-toast__text {
    min-width: 0;
    flex: 1 1 auto;
    padding-top: 0.1rem;
}

#app-toast-container .portal-toast__title-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0;
}

#app-toast-container .portal-toast__title {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: rgba(var(--bs-body-color-rgb), 0.97);
    line-height: 1.3;
}

#app-toast-container .portal-toast__time {
    font-size: 0.6875rem;
    font-weight: 500;
    color: rgba(var(--bs-body-color-rgb), 0.58);
    white-space: nowrap;
}

#app-toast-container .portal-toast__message {
    font-size: 0.8125rem;
    line-height: 1.42;
    color: rgba(var(--bs-body-color-rgb), 0.9);
    margin: 0;
    margin-top: 0.06rem;
}

[data-bs-theme="dark"] #app-toast-container .portal-toast__message {
    color: rgba(var(--bs-body-color-rgb), 0.92);
}

[data-bs-theme="dark"] #app-toast-container .portal-toast__time {
    color: rgba(var(--bs-body-color-rgb), 0.55);
}

#app-toast-container .portal-toast__message:empty {
    display: none;
}

#app-toast-container .portal-toast__close {
    flex-shrink: 0;
    margin: 0.42rem 0.42rem 0 0;
    padding: 0.25rem;
    opacity: 0.46;
    transform: scale(0.88);
    transform-origin: center;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

#app-toast-container .portal-toast__close:hover,
#app-toast-container .portal-toast__close:focus {
    opacity: 0.78;
    transform: scale(0.92);
}

[data-bs-theme="dark"] #app-toast-container .portal-toast__close {
    filter: invert(1) grayscale(100%);
    opacity: 0.48;
}

[data-bs-theme="dark"] #app-toast-container .portal-toast__close:hover,
[data-bs-theme="dark"] #app-toast-container .portal-toast__close:focus {
    opacity: 0.82;
}

@media (max-width: 575.98px) {
    #app-toast-container .portal-toast__close {
        margin: 0.35rem 0.35rem 0 0;
        padding: 0.2rem;
        transform: scale(0.84);
    }
}

/* ══════════════════════════════════════════════════════════════════
   Call Flow Preview — reusable (call_flow_preview.js)
   Used by: client-hunt-group-settings.php, client-custom-ivr-settings.php (Menu Preview)
   See: migration_docs/CALL_FLOW_PREVIEW_REFERENCE.md, CUSTOM_IVR_CALL_MENU_ANALYSIS.md §15
   ══════════════════════════════════════════════════════════════════ */

.app-body { overflow-x:visible!important; }
.flow-panel { z-index:5; transition:none; }
.flow-panel.is-fixed { position:fixed; max-height:calc(100vh - 90px); overflow-y:auto; }
.flow-start { display:flex; align-items:center; gap:.45rem; padding:.45rem .75rem; background:var(--bs-tertiary-bg); border:1px solid var(--bs-border-color); border-radius:.375rem; margin-bottom:0; font-size:.73rem; font-weight:500; color:var(--bs-secondary-color); }
.flow-start .flow-start-icon { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:var(--bs-secondary-color); color:var(--bs-body-bg); font-size:.6rem; flex-shrink:0; }
.flow-end { display:flex; align-items:center; gap:.5rem; padding:.55rem .85rem; background:var(--bs-tertiary-bg); border:1px dashed var(--bs-border-color); border-radius:.375rem; margin-top:0; font-size:.72rem; color:var(--bs-secondary-color); font-style:italic; }
.flow-tree { list-style:none; padding:0; margin:0; }
.ft-node { position:relative; display:flex; align-items:flex-start; gap:.55rem; padding:.65rem .75rem .65rem 2rem; font-size:.78rem; line-height:1.4; color:var(--bs-body-color); }
.ft-node::before { content:''; position:absolute; left:12px; top:0; bottom:0; width:2px; background:var(--bs-primary-border-subtle); }
.ft-node:last-child::before { bottom:50%; }
.ft-node::after { content:''; position:absolute; left:12px; top:50%; width:12px; height:2px; background:var(--bs-primary-border-subtle); }
.ft-icon { position:relative; display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; font-size:.72rem; flex-shrink:0; z-index:1; border:2px solid var(--bs-body-bg); box-shadow:0 0 0 1px rgba(0,0,0,.1); }
.ft-body { min-width:0; padding-top:.15rem; }
.ft-label { font-weight:700; color:var(--bs-body-color); font-size:.78rem; }
.ft-desc { color:var(--bs-secondary-color); font-size:.73rem; display:block; margin-top:.1rem; }
.ft-desc strong { color:var(--bs-body-color); font-weight:600; }
.ft-badge { display:inline-block; padding:.1rem .4rem; border-radius:.2rem; font-size:.65rem; font-weight:600; background:var(--bs-secondary-bg); color:var(--bs-secondary-color); }
.flow-empty { text-align:center; padding:2rem 1rem; color:var(--bs-secondary-color); font-size:.82rem; }
.flow-empty i { display:block; font-size:1.5rem; margin-bottom:.5rem; opacity:.5; }

@media(max-width:991.98px){ .flow-panel,.flow-panel.is-fixed{position:static!important;max-height:none;width:auto!important;top:auto!important;} }

/* ══════════════════════════════════════════════════════════════════
   Hunt Group Builder (client-hunt-group-settings.php only)
   Call Menu Builder (client-custom-ivr-settings.php) — .cm-* shares card chrome
   ══════════════════════════════════════════════════════════════════ */

/* Step / option cards */
.hg-card, .cm-card { background:var(--bs-body-bg); border:1px solid var(--bs-border-color); border-left:3px solid var(--bs-primary); border-radius:.375rem; box-shadow:0 1px 3px rgba(0,0,0,.04); transition:box-shadow .15s,border-color .15s,transform .15s; }
.hg-card:hover, .cm-card:hover { box-shadow:0 3px 10px rgba(0,0,0,.1); }
.hg-card.sortable-ghost, .cm-card.sortable-ghost { opacity:.35; border:2px dashed var(--bs-primary); border-left-width:3px; background:var(--bs-primary-bg-subtle); transform:scale(.98); }
.hg-card.sortable-chosen, .cm-card.sortable-chosen { box-shadow:0 8px 24px rgba(0,0,0,.15); transform:scale(1.01); z-index:10; }
.hg-card.is-invalid-card, .cm-card.is-invalid-card { border-color:var(--bs-danger)!important; border-left-color:var(--bs-danger)!important; background:var(--bs-danger-bg-subtle); }
.hg-card-header, .cm-card-header { display:flex; align-items:center; gap:.5rem; padding:.4rem .85rem; border-bottom:1px solid var(--bs-border-color-translucent); background:var(--bs-tertiary-bg); border-radius:.375rem .375rem 0 0; }
.hg-card-body, .cm-card-body { padding:.85rem; }

/* Drag handle */
.drag-handle { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:.375rem; background:var(--bs-secondary-bg); color:var(--bs-secondary-color); font-size:1rem; cursor:grab; touch-action:none; user-select:none; flex-shrink:0; transition:background .15s,color .15s; }
.drag-handle:hover { background:var(--bs-primary-bg-subtle); color:var(--bs-primary); }
.drag-handle:active { cursor:grabbing; background:var(--bs-primary-bg-subtle); }

/* Step badge & title */
.hg-step-badge, .cm-step-badge { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; font-weight:700; font-size:.75rem; background:var(--bs-primary); color:#fff; flex-shrink:0; }
.hg-step-title, .cm-step-title { font-weight:600; font-size:.8rem; color:var(--bs-body-color); flex-grow:1; min-width:0; }

/* Card actions */
.hg-card-actions, .cm-card-actions { display:flex; align-items:center; gap:.35rem; flex-shrink:0; }
.hg-card-actions .btn-group .btn, .cm-card-actions .btn-group .btn { padding:.25rem .4rem; font-size:.72rem; line-height:1; }
.hg-card-actions .btn-icon-sm, .cm-card-actions .btn-icon-sm { padding:.25rem .45rem; font-size:.72rem; line-height:1; border-radius:.25rem; }

/* Field grid */
.hg-field-grid { display:grid; grid-template-columns:1fr 1fr auto; gap:.75rem; align-items:start; }
.hg-field-grid .field-full { grid-column:1/-1; }

/* Timeout field: SmartAdmin paints .input-group-text as primary+white; bg-light stayed paper-bright in
   dark mode. Lock body-themed input + addon so digits and "sec" label stay readable in both themes. */
.hg-card .field-timeout .input-group .form-control.inp-timeout,
.cm-card .field-timeout .input-group .form-control.inp-timeout {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}
.hg-card .field-timeout .input-group .form-control.inp-timeout::placeholder,
.cm-card .field-timeout .input-group .form-control.inp-timeout::placeholder {
    color: var(--bs-secondary-color);
}
.hg-card .field-timeout .input-group .form-control.inp-timeout:focus,
.cm-card .field-timeout .input-group .form-control.inp-timeout:focus {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border-color: var(--bs-primary);
}
.hg-card .field-timeout .input-group-text,
.cm-card .field-timeout .input-group-text {
    background-color: var(--bs-tertiary-bg) !important;
    color: var(--bs-secondary-color) !important;
    border-color: var(--bs-border-color) !important;
}
.hg-card .field-timeout .input-group:focus-within .input-group-text,
.cm-card .field-timeout .input-group:focus-within .input-group-text {
    background-color: var(--bs-secondary-bg) !important;
    color: var(--bs-body-color) !important;
    border-color: var(--bs-primary) !important;
}
.cm-field-grid { display:grid; grid-template-columns:1fr 1fr minmax(100px,120px); gap:.75rem 1rem; align-items:end; }
.cm-field-grid .field-desc { grid-column:1/-1; }
.cm-card-header { flex-wrap:wrap; gap:.5rem .65rem; }
.cm-dtmf-chip { font-size:.85rem; font-weight:700; min-width:2.5rem; text-align:center; letter-spacing:.02em; }
.cm-card-title-block { min-width:0; flex:1 1 140px; max-width:100%; }
.cm-card-line1 { font-size:.8rem; line-height:1.3; color:var(--bs-body-color); word-break:break-word; }
.cm-card-line2 { font-size:.72rem; line-height:1.25; margin-top:.12rem; color:var(--bs-secondary-color); word-break:break-word; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.cm-preview-panel-inner { display:flex; flex-direction:column; gap:0; }
.cm-preview-summary { margin-bottom:.75rem; }
.cm-preview-summary-card { font-size:.72rem; line-height:1.45; padding:.65rem .75rem; border:1px solid var(--bs-border-color-translucent); border-radius:.375rem; background:var(--bs-tertiary-bg); }
.cm-preview-sum-h { font-size:.74rem; font-weight:600; margin-bottom:.45rem; color:var(--bs-body-color); }
.cm-preview-sum-row { display:flex; flex-wrap:wrap; gap:.25rem .5rem; margin-bottom:.28rem; align-items:baseline; }
.cm-preview-sum-row:last-child { margin-bottom:0; }
.cm-preview-sum-k { color:var(--bs-secondary-color); min-width:7.5rem; flex-shrink:0; }
.cm-preview-sum-v { font-weight:500; color:var(--bs-body-color); word-break:break-word; }
.cm-flow-preview-panel .panel-content { padding-top:.85rem!important; }
.cm-preview-node-detail { display:flex; flex-direction:column; gap:.2rem; }
.cm-preview-line { font-size:.73rem; line-height:1.35; color:var(--bs-body-color); word-break:break-word; }
.cm-preview-line:first-child { font-weight:600; color:var(--bs-body-color); }
.ft-body .cm-preview-node-detail { min-width:0; }
.cm-order-pill { font-size:.65rem; font-weight:600; flex-shrink:0; align-self:center; }
.cm-settings-panel .select2-container { width:100%!important; }
.cm-flow-menu-line { font-size:.78rem; line-height:1.45; color:var(--bs-body-color); }
.hg-card .select2-container, .cm-card .select2-container { width:100%!important; }
.hg-card .form-control.is-invalid,
.hg-card .select2-container .select2-selection.is-invalid-s2,
.cm-card .form-control.is-invalid,
.cm-card .select2-container .select2-selection.is-invalid-s2 { border-color:var(--bs-danger)!important; }
.hg-card .form-label, .cm-card .form-label { font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.03em; color:var(--bs-secondary-color); margin-bottom:.3rem; }
.hg-help { font-size:.72rem; color:var(--bs-secondary-color); margin-top:.2rem; line-height:1.3; }
.cm-help { font-size:.72rem; color:var(--bs-secondary-color); margin-top:.2rem; line-height:1.3; }

/* Action bar */
.hg-action-bar, .cm-action-bar { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; padding:.75rem 1rem; background:var(--bs-body-bg); border:1px solid var(--bs-border-color); border-radius:.5rem; box-shadow:0 2px 8px rgba(0,0,0,.06); }
.hg-action-bar .spacer, .cm-action-bar .spacer { flex:1 1 auto; }

/* Call Menu — Menu Options builder (client-custom-ivr-settings.php) */
.cm-menu-options-panel .panel-container { border-radius:0 0 .375rem .375rem; }
.cm-menu-options-hdr { align-items:center!important; min-height:3rem; padding-top:.65rem!important; padding-bottom:.65rem!important; }
.cm-menu-options-title { display:flex; align-items:center; margin:0; font-weight:600; letter-spacing:.01em; }
.cm-menu-options-body { padding:1rem 1.1rem 1.15rem!important; background:linear-gradient(180deg, var(--bs-tertiary-bg) 0%, var(--bs-body-bg) 52%); border-top:1px solid var(--bs-border-color-translucent); }
.cm-option-list { display:flex; flex-direction:column; gap:.85rem; margin-top:.15rem; }
.cm-menu-empty { margin-top:.25rem; border-radius:.375rem; border:1px dashed var(--bs-border-color); background:var(--bs-tertiary-bg); }

/* Option cards — stronger header/body split, cleaner accent (scoped to menu panel) */
.cm-menu-options-panel .cm-option-card { margin-bottom:0; border-left-width:4px; border-color:var(--bs-border-color); border-left-color:var(--bs-primary); border-radius:.4rem; box-shadow:0 2px 10px rgba(0,0,0,.07); overflow:hidden; }
.cm-menu-options-panel .cm-option-card:hover { box-shadow:0 4px 16px rgba(0,0,0,.1); border-color:rgba(var(--bs-primary-rgb), .28); }
.cm-menu-options-panel .cm-option-card-hdr { flex-wrap:nowrap; gap:.6rem .75rem; padding:.55rem 1rem .55rem .75rem; background:linear-gradient(180deg, var(--bs-secondary-bg) 0%, var(--bs-tertiary-bg) 100%); border-bottom:1px solid var(--bs-border-color); box-shadow:inset 0 1px 0 rgba(255,255,255,.04); }
.cm-menu-options-panel .cm-option-card-body { padding:1rem 1rem 1.05rem; background:var(--bs-body-bg); }
.cm-menu-options-panel .cm-option-card .drag-handle { width:34px; height:34px; border:1px solid var(--bs-border-color-translucent); }
.cm-menu-options-panel .cm-option-card .cm-dtmf-chip { min-width:2.65rem; padding:.35rem .45rem; font-size:.8rem; border-radius:.3rem; box-shadow:0 1px 2px rgba(0,0,0,.06); }
.cm-menu-options-panel .cm-option-card .cm-card-title-block { flex:1 1 auto; min-width:0; padding-left:.15rem; }
.cm-menu-options-panel .cm-option-card .cm-card-line1 { font-weight:600; font-size:.82rem; }
.cm-menu-options-panel .cm-option-card .cm-order-pill { align-self:center; opacity:.9; }
/* Action cluster: match Hunt Group — use shared .hg-card-actions/.cm-card-actions rules only; do not set min-height on .btn-icon-sm or the up/down group will look misaligned vs delete/link. */
.cm-menu-options-panel .cm-option-card .cm-card-actions { gap:.35rem; margin-left:auto; align-items:center; flex-shrink:0; }
.cm-menu-options-panel .cm-option-card .cm-card-actions .btn-group { box-shadow:0 1px 2px rgba(0,0,0,.05); border-radius:.25rem; overflow:hidden; }
.cm-menu-options-panel .cm-option-card .cm-card-actions .btn-group .btn { display:inline-flex; align-items:center; justify-content:center; }
.cm-menu-options-panel .cm-prompt-textarea { min-height:4.25rem; line-height:1.45; padding:.5rem .65rem; resize:vertical; }
.cm-menu-options-panel .cm-field-grid { gap:.85rem 1.1rem; padding-top:.1rem; }

/* Call Menu option cards — mobile: 3-row header (handle+DTMF+title | subtitle | actions), desktop unchanged */
@media(max-width:767.98px){
  .cm-menu-options-panel .cm-option-list { gap:1rem; }
  .cm-menu-options-panel .cm-option-card-hdr.cm-card-header {
    display:grid;
    grid-template-columns:auto auto minmax(0,1fr) auto;
    grid-template-areas:
      "cmhandle cmdtmf cmtitle cmorder"
      "cmsub cmsub cmsub cmsub"
      "cmactions cmactions cmactions cmactions";
    gap:.45rem .4rem;
    row-gap:.5rem;
    align-items:center;
    flex-direction:unset;
    flex-wrap:unset;
    padding:.65rem .75rem;
  }
  .cm-menu-options-panel .cm-option-card-hdr .cm-card-title-block { display:contents; }
  .cm-menu-options-panel .cm-option-card-hdr .drag-handle { grid-area:cmhandle; align-self:center; }
  .cm-menu-options-panel .cm-option-card-hdr .cm-dtmf-chip { grid-area:cmdtmf; align-self:center; }
  .cm-menu-options-panel .cm-option-card-hdr .cm-card-line1 {
    grid-area:cmtitle;
    min-width:0;
    align-self:center;
  }
  .cm-menu-options-panel .cm-option-card-hdr .cm-order-pill { grid-area:cmorder; align-self:center; justify-self:end; }
  .cm-menu-options-panel .cm-option-card-hdr .cm-card-line2 {
    grid-area:cmsub;
    margin-top:0;
    padding:.15rem 0 0;
    align-self:start;
    -webkit-line-clamp:4;
    line-height:1.35;
  }
  .cm-menu-options-panel .cm-option-card-hdr .cm-card-actions {
    grid-area:cmactions;
    justify-self:end;
    width:100%;
    max-width:100%;
    margin-left:0;
    margin-top:0;
    padding-top:.15rem;
    justify-content:flex-end;
    flex-wrap:wrap;
    gap:.45rem;
  }
  /* Tap-friendly controls (mobile only) */
  .cm-menu-options-panel .cm-option-card .cm-card-actions .btn-group .btn {
    min-height:2.5rem;
    min-width:2.5rem;
    padding:.4rem .5rem;
    font-size:.8rem;
  }
  .cm-menu-options-panel .cm-option-card .cm-card-actions .btn-icon-sm {
    min-width:2.5rem;
    min-height:2.5rem;
    padding:.45rem .5rem;
    font-size:.85rem;
  }
}

@media(max-width:767.98px){ .hg-field-grid{grid-template-columns:1fr;} .cm-field-grid{grid-template-columns:1fr;} .cm-field-grid .field-desc{grid-column:1;} }

/* ══════════════════════════════════════════════════════════════════
   TBR Schedule-Routing Board (client-time-based-routing-edit.php)
   Full-width card grid that shows routing coverage by schedule.
   ══════════════════════════════════════════════════════════════════ */

.tbr-board-grid { display:flex; flex-wrap:wrap; gap:.875rem; padding:.1rem 0; }

.tbr-rule-card { flex:1 1 230px; min-width:200px; max-width:340px; border:1px solid var(--bs-border-color); border-top:3px solid var(--bs-primary); border-radius:.375rem; padding:.875rem 1rem; background:var(--bs-body-bg); display:flex; flex-direction:column; gap:.5rem; box-shadow:0 1px 3px rgba(0,0,0,.05); transition:box-shadow .15s; }
.tbr-rule-card:hover { box-shadow:0 2px 8px rgba(0,0,0,.10); }
.tbr-rule-card--fallback { border-top-color:var(--bs-warning,#f59e0b); background:rgba(var(--bs-warning-rgb,245,158,11),.06); }
.tbr-rule-card--warning  { border-top-color:var(--bs-danger); background:rgba(var(--bs-danger-rgb,220,53,69),.05); }

.tbr-rule-schedule { display:flex; align-items:center; flex-wrap:wrap; gap:.35rem; }

.tbr-schedule-chip { display:inline-flex; align-items:center; font-size:.72rem; font-weight:600; letter-spacing:.01em; background:var(--bs-primary); color:#fff; border-radius:999px; padding:.22em .75em; line-height:1.55; flex-shrink:0; }
.tbr-schedule-chip--tg       { background:var(--bs-info,#1f97f2); color:#fff; }
.tbr-schedule-chip--fallback { background:var(--bs-warning,#f59e0b); color:#000; }
.tbr-schedule-chip--warn     { background:var(--bs-danger); color:#fff; }

.tbr-schedule-time { font-size:.775rem; color:var(--bs-secondary-color); font-weight:500; line-height:1.4; }

.tbr-rule-dest { font-size:.875rem; font-weight:400; color:var(--bs-body-color); line-height:1.4; display:flex; align-items:center; gap:.3rem; flex-wrap:wrap; }
.tbr-dest-type  { color:var(--bs-secondary-color); font-size:.78rem; flex-shrink:0; line-height:1.3; }
.tbr-dest-arrow { color:var(--bs-primary); font-size:.7rem; flex-shrink:0; }
.tbr-dest-name  { font-weight:600; color:var(--bs-body-color); }
.tbr-rule-dest--warning { color:var(--bs-warning-text,#92400e); font-size:.82rem; }
.tbr-rule-dest--empty   { color:var(--bs-secondary-color); font-size:.8rem; font-style:italic; }

.tbr-rule-note { font-size:.75rem; color:var(--bs-secondary-color); line-height:1.4; border-top:1px solid var(--bs-border-color-translucent); padding-top:.35rem; margin-top:.05rem; }

.tbr-board-empty { text-align:center; padding:2.25rem 1rem; color:var(--bs-secondary-color); font-size:.85rem; width:100%; }
.tbr-board-empty i { display:block; font-size:2rem; margin-bottom:.5rem; opacity:.3; }

@media(max-width:767.98px){ .tbr-rule-card{ flex:1 1 100%; max-width:100%; } }

/* ══════════════════════════════════════════════════════════════════
   TBR Weekly Routing Timeline  (client-time-based-routing-edit.php)
   Day-by-day schedule coverage view.
   ══════════════════════════════════════════════════════════════════ */

/* Outer container */
.tbr-timeline { display:flex; flex-direction:column; gap:0; }

/* One day section */
.tbr-tl-day { padding:.5rem 0 .8rem; border-bottom:1px solid var(--bs-border-color-translucent); }
.tbr-tl-day:last-child { border-bottom:none; padding-bottom:0; }

/* Day header row */
.tbr-tl-day-hdr { display:flex; align-items:center; gap:.5rem; margin-bottom:.4rem; }
.tbr-tl-day-chip { display:inline-flex; align-items:center; font-size:.68rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--bs-primary); background:rgba(var(--bs-primary-rgb),.1); border:1px solid rgba(var(--bs-primary-rgb),.25); border-radius:4px; padding:.2em .7em; flex-shrink:0; min-width:6.5rem; justify-content:center; }
.tbr-tl-day-empty-note { font-size:.7rem; color:var(--bs-secondary-color); font-style:italic; }

/* Rows container */
.tbr-tl-rows { display:flex; flex-direction:column; gap:.28rem; padding-left:.6rem; }

/* Individual timeline row */
.tbr-tl-row { display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; font-size:.8rem; line-height:1.35; padding:.3rem .6rem; border-radius:.25rem; border-left:3px solid var(--bs-primary); background:var(--bs-tertiary-bg,rgba(0,0,0,.02)); min-height:1.9rem; }
.tbr-tl-row--fallback         { border-left-color:var(--bs-warning,#f59e0b); background:rgba(var(--bs-warning-rgb,245,158,11),.07); }
.tbr-tl-row--fallback-missing { border-left-color:var(--bs-danger); background:rgba(var(--bs-danger-rgb,220,53,69),.05); }

/* Time / TG badge */
.tbr-tl-time { display:inline-flex; align-items:center; font-size:.7rem; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; background:var(--bs-body-bg); border:1px solid var(--bs-border-color); color:var(--bs-body-color); padding:.1em .5em; border-radius:3px; flex-shrink:0; }
.tbr-tl-time--fallback         { color:var(--bs-warning-text,#92400e); border-color:var(--bs-warning,#f59e0b); }
.tbr-tl-time--fallback-missing { color:var(--bs-danger); border-color:var(--bs-danger); }

.tbr-tl-tg-badge { display:inline-flex; align-items:center; font-size:.7rem; font-weight:600; background:var(--bs-info,#1f97f2); color:#fff; border-radius:3px; padding:.12em .55em; flex-shrink:0; }

/* Arrow icons */
.tbr-tl-arrow { color:var(--bs-secondary-color); font-size:.75rem; flex-shrink:0; }
.tbr-tl-sep   { color:var(--bs-secondary-color); font-size:.6rem; flex-shrink:0; opacity:.55; }

/* Destination parts */
.tbr-tl-dest-type { font-size:.72rem; color:var(--bs-secondary-color); flex-shrink:0; }
.tbr-tl-dest-name { font-weight:600; color:var(--bs-body-color); }
.tbr-tl-dest--fallback { color:var(--bs-warning-text,#92400e) !important; }
.tbr-tl-dest--missing  { color:var(--bs-danger); font-style:italic; }

/* Optional description note */
.tbr-tl-note { font-size:.69rem; color:var(--bs-secondary-color); font-style:italic; width:100%; padding-left:.1rem; line-height:1.3; }

/* Empty state */
.tbr-timeline-empty { text-align:center; padding:2.25rem 1rem; color:var(--bs-secondary-color); font-size:.85rem; width:100%; }
.tbr-timeline-empty i { display:block; font-size:2rem; margin-bottom:.5rem; opacity:.3; }

@media(max-width:575.98px) {
    .tbr-tl-day-chip { min-width:auto; }
    .tbr-tl-row { gap:.3rem; }
}

/* ══════════════════════════════════════════════════════════════════
   TBR Weekly Routing Graph  (client-time-based-routing-edit.php)
   Horizontal bar graph: rows = days, columns = 24-hour time scale.
   Muted professional palette; full-day coverage via fallback fill.
   ══════════════════════════════════════════════════════════════════ */

/* Outer scroll wrapper */
.tbr-wg-wrap { width:100%; overflow-x:auto; padding-bottom:.5rem; }

/* Layout rows */
.tbr-wg-header,
.tbr-wg-row   { display:flex; align-items:center; gap:.55rem; margin-bottom:.38rem; }

.tbr-wg-day-col    { width:3rem; min-width:3rem; flex-shrink:0; text-align:right; padding-right:.2rem; }
.tbr-wg-tracks-col { flex:1; min-width:0; position:relative; }

/* Time-scale header */
.tbr-wg-scale  { height:1.3rem; position:relative; }
.tbr-wg-tick   { position:absolute; font-size:.61rem; color:var(--bs-secondary-color); transform:translateX(-50%); white-space:nowrap; line-height:1; }
.tbr-wg-tick:first-child { transform:none; }
.tbr-wg-tick:last-child  { transform:translateX(-100%); }

/* Day label */
.tbr-wg-day-lbl { font-size:.67rem; font-weight:700; color:var(--bs-secondary-color); text-transform:uppercase; letter-spacing:.06em; line-height:1; }
.tbr-wg-row:hover .tbr-wg-day-lbl { color:var(--bs-primary); }

/* Bar track — slightly taller for label readability */
.tbr-wg-bar {
    position:relative; height:2.25rem;
    border:1px solid var(--bs-border-color); border-radius:5px;
    overflow:hidden; background:var(--bs-body-bg);
}
.tbr-wg-row:hover .tbr-wg-bar {
    border-color:rgba(var(--bs-primary-rgb),.35);
    box-shadow:0 0 0 2px rgba(var(--bs-primary-rgb),.05);
}

/* Absolute-fill helper */
.tbr-wg-abs-fill { position:absolute; inset:0; }

/* Fallback / uncovered fill — very soft warm sand + whisper hatch */
.tbr-wg-fallback-bg {
    background-color: rgba(220, 205, 180, 0.22);
    background-image: repeating-linear-gradient(
        -45deg,
        rgba(195, 175, 145, 0.09) 0px,
        rgba(195, 175, 145, 0.09) 3px,
        transparent 3px,
        transparent 10px
    );
}
/* No-fallback — muted caution, not alarmist */
.tbr-wg-nofallback-bg {
    background-color: rgba(200, 120, 120, 0.06);
    background-image: repeating-linear-gradient(
        -45deg,
        rgba(190, 110, 110, 0.08) 0px,
        rgba(190, 110, 110, 0.08) 3px,
        transparent 3px,
        transparent 10px
    );
}

/* Quarter-day gridlines */
.tbr-wg-gridline { position:absolute; top:0; bottom:0; width:1px; background:var(--bs-border-color); opacity:.4; pointer-events:none; z-index:1; }

/* Rule segment blocks — pastel fill from inline bg; structure from border + type */
.tbr-wg-seg {
    position:absolute; top:2px; bottom:2px;
    border-radius:3px; overflow:hidden; cursor:default;
    display:flex; align-items:center; padding:0 .4rem;
    min-width:3px; z-index:2;
    border:1px solid rgba(0,0,0,.1);
    box-shadow:0 1px 2px rgba(0,0,0,.06);
    transition:filter .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.tbr-wg-seg:hover {
    filter:brightness(0.97);
    border-color:rgba(0,0,0,.16);
    box-shadow:0 2px 8px rgba(0,0,0,.1);
    z-index:3;
}
.tbr-wg-seg--overnight  { border-style:dashed; border-color:rgba(0,0,0,.12); }
/* Carry-over: the early-morning continuation of an overnight rule on the next day */
.tbr-wg-seg--carryover  { border-style:dashed; border-color:rgba(0,0,0,.10); opacity:.82; }

/* Label inside segment — readable on light pastels */
.tbr-wg-seg-lbl {
    font-size:.62rem; font-weight:600; color:rgba(33,37,41,.88);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    pointer-events:none; user-select:none;
    letter-spacing:.01em;
}

/* Moon icon for overnight segments */
.tbr-wg-overnight-icon {
    position:absolute; right:4px; top:50%; transform:translateY(-50%);
    font-size:.56rem; color:rgba(33,37,41,.42); pointer-events:none;
}

/* Time Group rules section */
.tbr-wg-tg-section { margin-top:.55rem; padding:.4rem .6rem; border:1px dashed rgba(var(--bs-secondary-rgb),.22); border-radius:4px; background:var(--bs-tertiary-bg); }
.tbr-wg-tg-title   { font-size:.65rem; font-weight:700; color:var(--bs-secondary-color); text-transform:uppercase; letter-spacing:.05em; margin-bottom:.28rem; display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
.tbr-wg-tg-note    { font-size:.63rem; font-weight:400; color:var(--bs-secondary-color); text-transform:none; letter-spacing:0; opacity:.65; }
.tbr-wg-tg-list    { display:flex; flex-wrap:wrap; gap:.28rem; }
.tbr-wg-tg-item    { display:inline-flex; align-items:center; gap:.3rem; font-size:.72rem; padding:.2em .5em; border-left:3px solid var(--bs-secondary); background:var(--bs-body-bg); border-radius:0 3px 3px 0; cursor:default; box-shadow:0 1px 2px rgba(0,0,0,.05); }
.tbr-wg-tg-name    { font-weight:600; color:var(--bs-body-color); }
.tbr-wg-tg-dest    { color:var(--bs-secondary-color); font-size:.69rem; }

/* Legend */
.tbr-wg-legend      { display:flex; flex-wrap:wrap; gap:.3rem .6rem; margin-top:.55rem; align-items:center; }
.tbr-wg-legend-item { display:inline-flex; align-items:center; gap:.3rem; font-size:.7rem; color:var(--bs-secondary-color); }
.tbr-wg-legend-swatch {
    width:11px; height:11px; border-radius:2px; flex-shrink:0;
    border:1px solid rgba(0,0,0,.08);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
}
.tbr-wg-legend-swatch--tg {
    background:#c5dde1;
    border-color:rgba(90,120,130,.2);
}
.tbr-wg-fallback-swatch {
    background-color: rgba(220, 205, 180, 0.55);
    background-image: repeating-linear-gradient(
        -45deg,
        rgba(195, 175, 145, 0.22) 0px,
        rgba(195, 175, 145, 0.22) 2px,
        transparent 2px,
        transparent 6px
    );
    border:1px solid rgba(185, 165, 135, 0.35);
}

/* Empty state */
.tbr-wg-empty { text-align:center; padding:2.25rem 1rem; color:var(--bs-secondary-color); font-size:.85rem; width:100%; }
.tbr-wg-empty i { display:block; font-size:2rem; margin-bottom:.5rem; opacity:.3; }

/* Flatpickr — above BS5 modals (2005) and Select2 (3060) when appended to body */
.flatpickr-calendar {
    z-index: 3150 !important;
    border-radius: var(--bs-border-radius, 0.375rem);
    border: 1px solid var(--bs-border-color);
    box-shadow: 0 0.35rem 1.1rem rgba(0, 0, 0, 0.12);
    font-family: inherit;
}
.flatpickr-calendar.noCalendar {
    width: auto;
    min-width: 9.5rem;
}
.flatpickr-time {
    border-top: 1px solid var(--bs-border-color-translucent);
    max-height: none;
}
.flatpickr-time .flatpickr-am-pm,
.flatpickr-time input {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    border-radius: var(--bs-border-radius-sm, 0.25rem);
}
.flatpickr-time input:hover,
.flatpickr-time input:focus {
    background: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.08);
}

/* TBR list — column rhythm and metadata styling */
#dt_tbr.dt-tbr-list thead th {
    vertical-align: middle;
    white-space: nowrap;
}
#dt_tbr.dt-tbr-list tbody td {
    vertical-align: middle;
}
#dt_tbr.dt-tbr-list .tbr-list-rules {
    display: inline-block;
    min-width: 1.5rem;
    padding: 0.12rem 0.45rem;
    font-size: 0.8125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    color: var(--bs-secondary-color);
    background: var(--bs-tertiary-bg, rgba(0, 0, 0, 0.03));
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: 0.25rem;
}
#dt_tbr.dt-tbr-list .tbr-list-created {
    display: inline-block;
    font-size: 0.8125rem;
    line-height: 1.35;
    letter-spacing: 0.01em;
}
#dt_tbr.dt-tbr-list .tbr-list-created__date {
    color: var(--bs-body-color);
    font-weight: 500;
}
#dt_tbr.dt-tbr-list .tbr-list-created__time {
    color: var(--bs-secondary-color);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
#dt_tbr.dt-tbr-list .tbr-list-created__sep {
    color: var(--bs-secondary-color);
    opacity: 0.45;
    font-weight: 400;
}
#dt_tbr.dt-tbr-list .tbr-list-created--empty {
    font-size: 0.875rem;
}

/* TBR create modal — paired time fields */
#create_tbr .tbr-modal-time-row .tbr-modal-time-col {
    display: flex;
    flex-direction: column;
}
#create_tbr .tbr-modal-time-row .tbr-time-input.form-control {
    cursor: pointer;
    font-variant-numeric: tabular-nums;
    text-align: center;
    letter-spacing: 0.02em;
    min-height: calc(1.5em + 0.75rem + 2px);
}
#create_tbr .tbr-modal-time-row .tbr-time-input::placeholder {
    color: var(--bs-secondary-color);
    opacity: 0.65;
    font-weight: 500;
}

/* TBR time inputs elsewhere (e.g. edit page modals) */
input.tbr-time-input.form-control {
    cursor: pointer;
}

/* Mobile */
@media (max-width:575.98px) {
    .tbr-wg-day-col { width:2.4rem; min-width:2.4rem; }
    .tbr-wg-bar     { height:1.8rem; }
    .tbr-wg-seg-lbl { display:none; }
}

/* =============================================================================
   Admin Clients (config.php?hash=clients) — scoped under .clients-page-panel
   ============================================================================= */

.clients-page-panel .clients-status-chips .clients-status-chip {
    min-height: calc(1.5rem + 0.5rem + 2px);
    padding: 0.35rem 0.65rem;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.25;
    border-radius: 0.375rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.clients-page-panel .clients-status-chips .clients-status-chip .clients-status-count {
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    padding: 0.2em 0.5em;
    border-radius: 10rem;
    min-width: 1.35rem;
    text-align: center;
}

.clients-page-panel .panel-hdr .clients-panel-util-btn {
    border: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    color: var(--bs-secondary-color);
    padding: 0.35rem 0.5rem;
    border-radius: 0.375rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.clients-page-panel .panel-hdr .clients-panel-util-btn:hover {
    color: var(--bs-body-color);
    border-color: var(--bs-border-color-translucent, rgba(0, 0, 0, 0.12));
    background: var(--bs-tertiary-bg);
}
.clients-page-panel .panel-hdr .clients-panel-util-btn .sa-icon {
    width: 1.05rem;
    height: 1.05rem;
    display: block;
}

.clients-page-panel .panel-content > .dt-container {
    margin-top: 0.25rem;
}
.clients-page-panel .panel-content .dt-container > .dt-row:first-child {
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    align-items: center;
}
.clients-page-panel .panel-content .dt-container div.dt-length select {
    border-radius: 0.375rem;
}
.clients-page-panel .panel-content .dt-container div.dt-search input {
    border-radius: 0.375rem;
    min-width: 12rem;
}

.clients-page-panel #dt_clients.table thead th {
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: 0.01em;
    vertical-align: middle;
    white-space: nowrap;
}
/* Override the inline min-width:7rem on the AGI Logs <th> */
.clients-page-panel #dt_clients.table thead th[style*="min-width:7rem"],
.clients-page-panel #dt_clients.table thead th[style*="min-width: 7rem"] {
    min-width: 5.5rem !important;
    width: 6rem !important;
}
.clients-page-panel #dt_clients.table > :not(caption) > * > * {
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
}

/* AGI cell — compact, does not stretch the table */
.clients-page-panel .dt_clients_agi_cell {
    width: 5.5rem;
    min-width: 5rem;
    max-width: 6.5rem;
    vertical-align: middle !important;
}
/* Override select2's own inline width:100% so it stays narrow */
.clients-page-panel .dt_clients_agi_cell .select2-container {
    width: 5.25rem !important;
    max-width: 6rem !important;
    min-width: 0 !important;
}
.clients-page-panel .dt_clients_agi_cell .select2-container .select2-selection--single {
    min-height: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    border-color: var(--bs-border-color);
    border-radius: 0.35rem;
    font-size: 0.78rem;
    padding: 0 0.4rem;
}
.clients-page-panel .dt_clients_agi_cell .select2-container .select2-selection--single .select2-selection__rendered {
    font-size: 0.78rem;
    line-height: 1;
    padding-left: 0;
    color: var(--bs-body-color);
}
.clients-page-panel .dt_clients_agi_cell .select2-container .select2-selection--single .select2-selection__arrow {
    height: 26px;
    width: 1.1rem;
    right: 0;
}
/* Keep the old hidden-accessible rule for any fallback path */
.clients-page-panel .dt_clients_agi_cell select.select2-hidden-accessible + .select2-container .select2-selection--single {
    min-height: 28px;
    display: flex;
    align-items: center;
}
/* Focus ring */
.clients-page-panel .dt_clients_agi_cell .select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 1px rgba(var(--bs-primary-rgb), 0.25);
}

.clients-page-panel .dt-clients-actions {
    gap: 0.35rem;
}
.clients-page-panel .dt-clients-actions .btn {
    font-weight: 600;
    border-radius: 0.375rem;
}

/*
 * Global “danger” color — #DC2626 (Tailwind red-600).
 * Utilities (.bg-danger, .text-danger) need BOTH --bs-danger and --bs-danger-rgb.
 */
:root,
[data-bs-theme="light"] {
    --bs-danger: #dc2626;
    --bs-danger-rgb: 220, 38, 38;
    --bs-danger-text-emphasis: #991b1b;
    --bs-danger-bg-subtle: #fee2e2;
    --bs-danger-border-subtle: #fecaca;
}

[data-bs-theme="dark"] {
    --bs-danger: #f87171;
    --bs-danger-rgb: 248, 113, 113;
    --bs-danger-text-emphasis: #fecaca;
    --bs-danger-bg-subtle: rgba(var(--bs-danger-rgb), 0.12);
    --bs-danger-border-subtle: rgba(var(--bs-danger-rgb), 0.25);
}

/*
 * SmartAdmin (smartapp.min.css) sets .btn-danger / .btn-outline-danger --bs-btn-*
 * to hardcoded #fd3995, so semantic --bs-danger never reaches these buttons.
 * Re-map button variables to --bs-danger / --bs-danger-rgb.
 */
.btn-danger {
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--bs-danger);
    --bs-btn-border-color: var(--bs-danger);
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: #b91c1c;
    --bs-btn-hover-border-color: #b91c1c;
    --bs-btn-focus-shadow-rgb: var(--bs-danger-rgb);
    --bs-btn-active-color: var(--bs-white);
    --bs-btn-active-bg: #991b1b;
    --bs-btn-active-border-color: #991b1b;
    --bs-btn-disabled-color: var(--bs-white);
    --bs-btn-disabled-bg: var(--bs-danger);
    --bs-btn-disabled-border-color: var(--bs-danger);
    box-shadow: none;
}

.btn-outline-danger {
    --bs-btn-color: var(--bs-danger);
    --bs-btn-border-color: var(--bs-danger);
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: var(--bs-danger);
    --bs-btn-hover-border-color: var(--bs-danger);
    --bs-btn-focus-shadow-rgb: var(--bs-danger-rgb);
    --bs-btn-active-color: var(--bs-white);
    --bs-btn-active-bg: var(--bs-danger);
    --bs-btn-active-border-color: var(--bs-danger);
    --bs-btn-disabled-color: var(--bs-danger);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--bs-danger);
}

[data-bs-theme="dark"] .btn-danger {
    --bs-btn-hover-bg: #ef4444;
    --bs-btn-hover-border-color: #ef4444;
    --bs-btn-active-bg: #dc2626;
    --bs-btn-active-border-color: #dc2626;
}

/*
 * Global success — #4cb04f (portal brand green).
 * Utilities (.bg-success, .text-success, badges) use --bs-success-rgb via rgba().
 * SmartAdmin forces .btn-success / .btn-outline-success to teal #1dc9b7 — remap below.
 */
:root,
[data-bs-theme="light"] {
    --bs-success: #4cb04f;
    --bs-success-rgb: 76, 176, 79;
    --bs-success-text-emphasis: #276b2a;
    --bs-success-bg-subtle: #e8f5e9;
    --bs-success-border-subtle: #c8e6c9;
}

[data-bs-theme="dark"] {
    --bs-success: #6fce72;
    --bs-success-rgb: 111, 206, 114;
    --bs-success-text-emphasis: #bbf7d0;
    --bs-success-bg-subtle: rgba(var(--bs-success-rgb), 0.12);
    --bs-success-border-subtle: rgba(var(--bs-success-rgb), 0.28);
}

.btn-success {
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--bs-success);
    --bs-btn-border-color: var(--bs-success);
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: #3d9340;
    --bs-btn-hover-border-color: #3d9340;
    --bs-btn-focus-shadow-rgb: var(--bs-success-rgb);
    --bs-btn-active-color: var(--bs-white);
    --bs-btn-active-bg: #2f7a32;
    --bs-btn-active-border-color: #2f7a32;
    --bs-btn-disabled-color: var(--bs-white);
    --bs-btn-disabled-bg: var(--bs-success);
    --bs-btn-disabled-border-color: var(--bs-success);
    box-shadow: none;
}

.btn-outline-success {
    --bs-btn-color: var(--bs-success);
    --bs-btn-border-color: var(--bs-success);
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: var(--bs-success);
    --bs-btn-hover-border-color: var(--bs-success);
    --bs-btn-focus-shadow-rgb: var(--bs-success-rgb);
    --bs-btn-active-color: var(--bs-white);
    --bs-btn-active-bg: var(--bs-success);
    --bs-btn-active-border-color: var(--bs-success);
    --bs-btn-disabled-color: var(--bs-success);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--bs-success);
}

[data-bs-theme="dark"] .btn-success {
    --bs-btn-hover-bg: #5bb85e;
    --bs-btn-hover-border-color: #5bb85e;
    --bs-btn-active-bg: #4cb04f;
    --bs-btn-active-border-color: #4cb04f;
}

/*
 * Global info — #1f97f2 (portal brand blue).
 * Utilities (.bg-info, .text-bg-info, badges) use --bs-info / --bs-info-rgb.
 * SmartAdmin hardcodes .btn-info / .btn-outline-info to Bootstrap cyan #0dcaf0 — remap below.
 */
:root,
[data-bs-theme="light"] {
    --bs-info: #1f97f2;
    --bs-info-rgb: 31, 151, 242;
    --bs-info-color: #fff;
    --bs-info-text-emphasis: #0c5a99;
    --bs-info-bg-subtle: #e3f2fd;
    --bs-info-border-subtle: #bbdefb;
}

[data-bs-theme="dark"] {
    --bs-info: #4aadff;
    --bs-info-rgb: 74, 173, 255;
    --bs-info-color: #fff;
    --bs-info-text-emphasis: #b3d9ff;
    --bs-info-bg-subtle: rgba(var(--bs-info-rgb), 0.12);
    --bs-info-border-subtle: rgba(var(--bs-info-rgb), 0.25);
}

.btn-info {
    --bs-btn-color: var(--bs-info-color);
    --bs-btn-bg: var(--bs-info);
    --bs-btn-border-color: var(--bs-info);
    --bs-btn-hover-color: var(--bs-info-color);
    --bs-btn-hover-bg: #1889e0;
    --bs-btn-hover-border-color: #1889e0;
    --bs-btn-focus-shadow-rgb: var(--bs-info-rgb);
    --bs-btn-active-color: var(--bs-info-color);
    --bs-btn-active-bg: #157ccc;
    --bs-btn-active-border-color: #157ccc;
    --bs-btn-disabled-color: var(--bs-info-color);
    --bs-btn-disabled-bg: var(--bs-info);
    --bs-btn-disabled-border-color: var(--bs-info);
    box-shadow: none;
}

.btn-outline-info {
    --bs-btn-color: var(--bs-info);
    --bs-btn-border-color: var(--bs-info);
    --bs-btn-hover-color: var(--bs-info-color);
    --bs-btn-hover-bg: var(--bs-info);
    --bs-btn-hover-border-color: var(--bs-info);
    --bs-btn-focus-shadow-rgb: var(--bs-info-rgb);
    --bs-btn-active-color: var(--bs-info-color);
    --bs-btn-active-bg: var(--bs-info);
    --bs-btn-active-border-color: var(--bs-info);
    --bs-btn-disabled-color: var(--bs-info);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--bs-info);
}

[data-bs-theme="dark"] .btn-info {
    --bs-btn-hover-bg: #66b8ff;
    --bs-btn-hover-border-color: #66b8ff;
    --bs-btn-active-bg: #4aadff;
    --bs-btn-active-border-color: #4aadff;
}

/* Info badges/alerts: white text on info background (SmartAdmin pins .text-bg-info to #000) */
:root .text-bg-info,
[data-bs-theme="light"] .text-bg-info,
.badge.bg-info,
.badge.text-bg-info,
.text-bg-info,
.alert-info .badge {
    color: var(--bs-info-color) !important;
    background-color: rgba(var(--bs-info-rgb), var(--bs-bg-opacity, 1)) !important;
}

[data-bs-theme="dark"] .text-bg-info,
[data-bs-theme="dark"] .badge.text-bg-info,
[data-bs-theme="dark"] .badge.bg-info {
    color: var(--bs-info-color) !important;
    background-color: rgba(var(--bs-info-rgb), var(--bs-bg-opacity, 1)) !important;
}

/* bg-info + text-info on same node makes icon/text same colour as background — force contrast */
.badge.bg-info.text-info {
    color: var(--bs-info-color) !important;
    background-color: rgba(var(--bs-info-rgb), var(--bs-bg-opacity, 1)) !important;
}

/* Solid success backgrounds: set foreground (Bootstrap .bg-success omits color — table text stays dark). */
:root .bg-success,
[data-bs-theme="light"] .bg-success,
:root .text-bg-success,
[data-bs-theme="light"] .text-bg-success {
    color: var(--bs-white) !important;
}

/* Dark theme success is lighter (#6fce72); dark type reads better than white. */
[data-bs-theme="dark"] .bg-success,
[data-bs-theme="dark"] .text-bg-success {
    color: var(--bs-dark, #0a0a0a) !important;
}

/*
 * Global warning — #ffc105 (matches portal amber; theme files no longer sole source).
 * SmartAdmin pins .btn-warning / .btn-outline-warning to #ffc241 — remap to vars.
 */
:root,
[data-bs-theme="light"] {
    --bs-warning: #ffc105;
    --bs-warning-rgb: 255, 193, 5;
    --bs-warning-text-emphasis: #713f12;
    --bs-warning-bg-subtle: #fff3cd;
    --bs-warning-border-subtle: #ffe69c;
}

[data-bs-theme="dark"] {
    --bs-warning: #ffd54f;
    --bs-warning-rgb: 255, 213, 79;
    --bs-warning-text-emphasis: #fff8e1;
    --bs-warning-bg-subtle: rgba(var(--bs-warning-rgb), 0.15);
    --bs-warning-border-subtle: rgba(var(--bs-warning-rgb), 0.35);
}

.btn-warning {
    --bs-btn-color: var(--bs-warning-text-emphasis);
    --bs-btn-bg: var(--bs-warning);
    --bs-btn-border-color: var(--bs-warning);
    --bs-btn-hover-color: var(--bs-warning-text-emphasis);
    --bs-btn-hover-bg: #e0ac04;
    --bs-btn-hover-border-color: #d39e00;
    --bs-btn-focus-shadow-rgb: var(--bs-warning-rgb);
    --bs-btn-active-color: var(--bs-warning-text-emphasis);
    --bs-btn-active-bg: #d39e00;
    --bs-btn-active-border-color: #c09000;
    --bs-btn-disabled-color: var(--bs-warning-text-emphasis);
    --bs-btn-disabled-bg: var(--bs-warning);
    --bs-btn-disabled-border-color: var(--bs-warning);
    box-shadow: none;
}

.btn-outline-warning {
    --bs-btn-color: var(--bs-warning);
    --bs-btn-border-color: var(--bs-warning);
    --bs-btn-hover-color: var(--bs-warning-text-emphasis);
    --bs-btn-hover-bg: var(--bs-warning);
    --bs-btn-hover-border-color: var(--bs-warning);
    --bs-btn-focus-shadow-rgb: var(--bs-warning-rgb);
    --bs-btn-active-color: var(--bs-warning-text-emphasis);
    --bs-btn-active-bg: var(--bs-warning);
    --bs-btn-active-border-color: var(--bs-warning);
    --bs-btn-disabled-color: var(--bs-warning);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--bs-warning);
}

[data-bs-theme="dark"] .btn-warning {
    --bs-btn-color: var(--bs-dark, #0f172a);
    --bs-btn-hover-color: var(--bs-dark, #0f172a);
    --bs-btn-active-color: var(--bs-dark, #0f172a);
    --bs-btn-disabled-color: var(--bs-dark, #0f172a);
    --bs-btn-hover-bg: #ffca28;
    --bs-btn-hover-border-color: #ffca28;
    --bs-btn-active-bg: #ffc105;
    --bs-btn-active-border-color: #ffc105;
}

[data-bs-theme="dark"] .btn-outline-warning {
    --bs-btn-hover-color: var(--bs-dark, #0f172a);
    --bs-btn-active-color: var(--bs-dark, #0f172a);
}

/* .bg-warning — set readable text (Bootstrap .bg-warning does not set color). */
:root .bg-warning,
[data-bs-theme="light"] .bg-warning,
:root .text-bg-warning,
[data-bs-theme="light"] .text-bg-warning {
    color: var(--bs-warning-text-emphasis) !important;
}

[data-bs-theme="dark"] .bg-warning,
[data-bs-theme="dark"] .text-bg-warning {
    color: var(--bs-dark, #0f172a) !important;
}

/* =============================================================================
   Profile shared V5 — from profile_shared.php (shell supplies --bs-* / theme vars)
   ============================================================================= */

.profile-shared-scope {
    --prof-primary: var(--bs-primary, var(--color-primary-500, #0d6efd));
    --prof-primary-rgb: var(--bs-primary-rgb, 13, 110, 253);
}

/* Modals are reparented to body; mirror tokens so focus/primary utilities resolve */
.prof-profile-modal {
    --prof-primary: var(--bs-primary, var(--color-primary-500, #0d6efd));
    --prof-primary-rgb: var(--bs-primary-rgb, 13, 110, 253);
}

.profile-page-header-underlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 200px;
    z-index: 0;
}

.profile-page-header {
    position: relative;
    z-index: 1;
    margin-top: 3rem;
    background: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, inherit);
    border-radius: .375rem;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.1);
    margin-bottom: 1.5rem;
    overflow: hidden;
}

[data-bs-theme="dark"] .profile-page-header {
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.45);
}

.profile-shared-scope .body-bg {
    background: var(--bs-body-bg, #fff) !important;
}

.profile-page-nav {
    padding: 0 1rem;
    background: var(--bs-tertiary-bg, rgba(0, 0, 0, 0.015));
}

.profile-page-nav .nav-tabs-clean {
    margin: 0 -1rem;
    border-bottom: 0;
}

.profile-page-nav .nav-tabs-clean .nav-item {
    margin-bottom: 0;
}

.profile-page-nav .nav-tabs-clean .nav-link {
    padding: 1rem 1.15rem;
    min-height: 3.25rem;
    color: var(--bs-secondary-color, #6c757d);
    font-weight: 500;
    font-size: 0.9375rem;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.profile-page-nav .nav-tabs-clean .nav-link i {
    opacity: 0.85;
    font-size: 1rem;
    width: 1.25rem;
    text-align: center;
}

.profile-page-nav .nav-tabs-clean .nav-link:hover {
    color: var(--prof-primary);
    background: rgba(var(--prof-primary-rgb), 0.04);
}

.profile-page-nav .nav-tabs-clean .nav-link.active {
    color: var(--prof-primary);
    border-bottom-color: var(--prof-primary);
    font-weight: 600;
    background: transparent;
}

.profile-shared-scope .profile-page-header-avatar .prof-av-initials {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    border: 3px solid var(--bs-body-bg, #fff);
    box-shadow: 0 0.125rem 0.35rem rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.35rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    background: var(--prof-primary);
}

.profile-shared-scope .profile-page-header-avatar .prof-av-img {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--bs-body-bg, #fff);
    box-shadow: 0 0.125rem 0.35rem rgba(0, 0, 0, 0.15);
    display: block;
}

.profile-shared-scope .prof-cam-btn {
    position: absolute;
    bottom: 6px;
    right: 6px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    border: none;
    outline: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0.125rem 0.35rem rgba(0, 0, 0, 0.18);
    color: var(--prof-primary);
    font-size: 0.85rem;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
    z-index: 5;
}

.profile-shared-scope .prof-cam-btn:hover {
    background: var(--prof-primary);
    color: #fff;
    box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.2);
}

.profile-shared-scope .prof-cam-btn:focus {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(var(--prof-primary-rgb), 0.25);
}

.profile-shared-scope .profile-page-header-info .prof-name-title {
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.profile-shared-scope .prof-role-meta {
    font-size: 0.9375rem;
    font-weight: 400;
    text-transform: capitalize;
    letter-spacing: 0.01em;
    opacity: 0.88;
}

.prof-contact-card .panel-content {
    padding: 1.125rem 1.25rem 1.25rem;
}

.prof-account-grid > [class*="col-"] {
    margin-bottom: 1.5rem;
}

@media (min-width: 992px) {
    .prof-account-grid > [class*="col-"] {
        margin-bottom: 0;
    }
}

.prof-info-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(var(--prof-primary-rgb), 0.08);
    color: var(--prof-primary);
    font-size: 0.9rem;
}

.prof-pw-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.6rem;
    margin-top: 0.4rem;
    font-size: 0.78rem;
}

.prof-pw-checks .pw-rule {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.15rem 0.4rem;
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.04);
    color: #888;
}

.prof-pw-checks .pw-rule.pass {
    background: rgba(25, 135, 84, 0.1);
    color: #198754;
}

.prof-pw-checks .pw-rule.fail {
    color: #dc3545;
    background: rgba(220, 53, 69, 0.06);
}

.profile-shared-scope .text-bg-primary {
    background-color: var(--prof-primary) !important;
    color: #fff !important;
}

.profile-shared-scope .text-bg-info,
.profile-shared-scope .badge.text-bg-info,
.prof-profile-modal .text-bg-info {
    background-color: var(--bs-info) !important;
    color: var(--bs-info-color, #fff) !important;
}

/* Edit Profile — badge must not inherit muted btn text colour */
.profile-shared-scope .btn-outline-default .badge.text-bg-info {
    background-color: var(--bs-info) !important;
    color: var(--bs-info-color, #fff) !important;
}

.profile-shared-scope .btn-outline-default .badge.text-bg-info .fa,
.profile-shared-scope .btn-outline-default .badge.text-bg-info .fal,
.profile-shared-scope .btn-outline-default .badge.text-bg-info .far,
.profile-shared-scope .btn-outline-default .badge.text-bg-info .fas {
    color: inherit !important;
}

/* Utility backfill (older shells); modals included after appendTo(body) */
.profile-shared-scope .fw-700,
.prof-profile-modal .fw-700 {
    font-weight: 700 !important;
}

.profile-shared-scope .fw-500,
.prof-profile-modal .fw-500 {
    font-weight: 500 !important;
}

.profile-shared-scope .fs-xxl,
.prof-profile-modal .fs-xxl {
    font-size: 1.75rem !important;
}

.profile-shared-scope .fs-xs,
.prof-profile-modal .fs-xs {
    font-size: 0.75rem !important;
}

.profile-shared-scope .rounded-3,
.prof-profile-modal .rounded-3 {
    border-radius: 0.375rem !important;
}

.profile-shared-scope .gap-2,
.prof-profile-modal .gap-2 {
    gap: 0.5rem !important;
}

.profile-shared-scope .gap-3,
.prof-profile-modal .gap-3 {
    gap: 1rem !important;
}

.profile-shared-scope .ms-1,
.prof-profile-modal .ms-1 {
    margin-left: 0.25rem !important;
}

.profile-shared-scope .ms-2,
.prof-profile-modal .ms-2 {
    margin-left: 0.5rem !important;
}

.profile-shared-scope .ms-3,
.prof-profile-modal .ms-3 {
    margin-left: 1rem !important;
}

.profile-shared-scope .me-1,
.prof-profile-modal .me-1 {
    margin-right: 0.25rem !important;
}

.profile-shared-scope .me-2,
.prof-profile-modal .me-2 {
    margin-right: 0.5rem !important;
}

.profile-shared-scope .me-3,
.prof-profile-modal .me-3 {
    margin-right: 1rem !important;
}

.profile-shared-scope .d-grid,
.prof-profile-modal .d-grid {
    display: grid !important;
}

.profile-shared-scope .min-w-0,
.prof-profile-modal .min-w-0 {
    min-width: 0 !important;
}

@media (min-width: 768px) {
    .profile-shared-scope .ms-md-4,
    .prof-profile-modal .ms-md-4 {
        margin-left: 1.5rem !important;
    }

    .profile-shared-scope .ms-md-auto,
    .prof-profile-modal .ms-md-auto {
        margin-left: auto !important;
    }

    .profile-shared-scope .mb-md-0,
    .prof-profile-modal .mb-md-0 {
        margin-bottom: 0 !important;
    }

    .profile-shared-scope .mt-md-0,
    .prof-profile-modal .mt-md-0 {
        margin-top: 0 !important;
    }

    .profile-shared-scope .text-md-start,
    .prof-profile-modal .text-md-start {
        text-align: left !important;
    }

    .profile-shared-scope .justify-content-md-start,
    .prof-profile-modal .justify-content-md-start {
        justify-content: flex-start !important;
    }
}

.select2-close-mask {
    z-index: 2099;
}

.select2-dropdown {
    z-index: 3051;
}

.profile-shared-scope .btn,
.prof-profile-modal .btn {
    font-weight: 500;
    border-radius: 0.375rem;
    padding: 0.5rem 1rem;
    min-height: 2.375rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease,
        box-shadow 0.15s ease;
}

.profile-shared-scope .btn.btn-sm,
.prof-profile-modal .btn.btn-sm {
    min-height: 2.125rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.8125rem;
}

.profile-shared-scope a.btn {
    text-decoration: none;
}

.profile-shared-scope .btn-default:focus,
.prof-profile-modal .btn-default:focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--prof-primary-rgb), 0.15);
}

.profile-shared-scope .btn-outline-default:focus,
.prof-profile-modal .btn-outline-default:focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--prof-primary-rgb), 0.18);
}

.profile-shared-scope .btn-primary:focus,
.prof-profile-modal .btn-primary:focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--prof-primary-rgb), 0.28);
}

.prof-hero-inner {
    width: 100%;
    gap: 0;
}

@media (max-width: 767.98px) {
    .prof-hero-left {
        width: 100%;
    }
}

@media (min-width: 768px) {
    .prof-hero-inner {
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center !important;
    }

    .prof-hero-left {
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
        justify-content: flex-start;
        gap: 1.25rem;
    }

    .prof-hero-actions {
        flex: 0 0 auto;
        margin-left: 1rem !important;
        margin-top: 0 !important;
    }
}

.prof-contact-list {
    gap: 1rem !important;
}

.prof-contact-row {
    padding: 0.35rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    align-items: flex-start !important;
}

.prof-contact-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.prof-contact-row .prof-label {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.2rem;
    color: #6c757d;
    font-weight: 600;
}

.prof-contact-row .prof-value {
    font-size: 0.9375rem;
    line-height: 1.35;
    word-break: break-word;
}

.prof-action-stack {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 1.125rem 1.25rem 1.25rem;
}

.prof-action-stack .btn {
    width: 100%;
    text-align: center;
    justify-content: center;
    font-weight: 500;
}

.prof-panel-toolbar .btn {
    font-weight: 500;
}

.prof-security-fields {
    padding: 0.25rem 0.125rem 0.5rem;
}

.prof-security-fields .form-label {
    font-weight: 600;
    font-size: 0.8125rem;
    margin-bottom: 0.4rem;
    color: #495057;
}

.prof-security-fields .form-control {
    border-radius: 0.375rem;
}

.prof-security-fields .mb-3.pb-1 {
    margin-bottom: 1.15rem;
}

.prof-pw-toggle-row {
    min-height: 1.35rem;
    margin-top: 0.35rem;
}

.prof-pw-toggle-row .btn-link {
    font-size: 0.78rem !important;
    padding: 0 !important;
    line-height: 1.2;
    text-decoration: none !important;
}

.prof-pw-toggle-row .btn-link:hover {
    text-decoration: underline !important;
}

.prof-security-actions {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.prof-activity-panel .panel-hdr h2 {
    font-size: 1rem;
    font-weight: 600;
}

.prof-activity-wrap {
    border-radius: 0 0 var(--border-radius, 0.25rem) var(--border-radius, 0.25rem);
    overflow: hidden;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.prof-activity-wrap .table {
    margin-bottom: 0;
}

.prof-activity-wrap .table thead th {
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.055em;
    padding: 0.85rem 1.1rem;
    border-bottom: 0;
    vertical-align: middle;
    opacity: 0.95;
}

.prof-activity-wrap .table tbody td {
    padding: 0.8rem 1.1rem;
    vertical-align: middle;
    font-size: 0.875rem;
    border-color: rgba(0, 0, 0, 0.06);
}

.prof-activity-wrap .table tbody tr:last-child td {
    border-bottom: 0;
}

.prof-profile-modal .modal-body {
    padding: 1.25rem 1.5rem;
}

.prof-upload-field {
    margin-bottom: 0.5rem;
}

.prof-upload-field .form-label {
    font-weight: 600;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
    color: #495057;
}

.prof-upload-zone {
    border: 1px dashed rgba(0, 0, 0, 0.12);
    border-radius: 0.375rem;
    padding: 0.75rem;
    background: rgba(0, 0, 0, 0.02);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.prof-upload-zone:focus-within {
    border-color: rgba(var(--prof-primary-rgb), 0.45);
    background: rgba(var(--prof-primary-rgb), 0.04);
}

.prof-profile-modal.prof-upload-modal .modal-title {
    font-size: 1.05rem;
    letter-spacing: -0.01em;
}

/* Bootstrap 4 custom-file markup — SmartAdmin v5 / BS5 omit these; restore for upload modal only */
.prof-upload-zone .custom-file {
    position: relative;
    display: block;
    width: 100%;
    min-height: calc(2.375rem + 2px);
}

.prof-upload-zone .custom-file-input {
    position: relative;
    z-index: 2;
    width: 100%;
    min-height: calc(2.375rem + 2px);
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.prof-upload-zone .custom-file-label {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1;
    min-height: calc(2.375rem + 2px);
    display: flex;
    align-items: center;
    padding: 0.5rem 5.5rem 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--bs-body-color, #495057);
    background-color: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #ced4da);
    border-radius: 0.3rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.prof-upload-zone .custom-file-label::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    padding: 0 0.85rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--bs-body-color, #495057);
    content: "Browse";
    background-color: var(--bs-tertiary-bg, #e9ecef);
    border-left: 1px solid var(--bs-border-color, #ced4da);
    border-radius: 0 0.3rem 0.3rem 0;
}

.prof-upload-zone .custom-file-input:focus ~ .custom-file-label {
    border-color: var(--prof-primary);
    box-shadow: 0 0 0 0.15rem rgba(var(--prof-primary-rgb), 0.2);
}

[data-bs-theme="dark"] .prof-upload-field .form-label {
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .prof-upload-zone {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.03);
}

[data-bs-theme="dark"] .prof-upload-hint {
    color: var(--bs-secondary-color);
}

.prof-upload-hint {
    font-size: 0.75rem;
    color: #6c757d;
    margin-top: 0.5rem;
    line-height: 1.4;
}

.prof-upload-progress {
    margin-top: 1rem;
}

.prof-upload-progress .progress {
    border-radius: 0.25rem;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.06);
}

.prof-profile-modal .modal-footer {
    padding: 0.875rem 1.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    gap: 0.5rem;
}

.prof-profile-modal .modal-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}