.card-modal .card-left-panel .card-comments .comment-danger {
    font-size: 13px;
    background-color: #ffe5e5;
    color: #3e4852;
    margin-bottom: 10px;
    border-radius: 5px;
}

.iti-phone-container .iti {
    display: block !important;
}

.card-wrapper {
    padding: 0;
    margin-right: 2px;
}

.circle {
    display: flex;
    width: 50px;
    height: 50px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1/1;
    border-radius: 4px;
    margin-bottom: 20px;
}

.circle-text {
    font-size: 30px;
    font-weight: 700;
}

.custom-line {
    border-top: solid 2px;
    border-color: #eae7e7;
    margin-top: 5px;
}
.divider-label {
    border-left: 1px solid #898989;
    padding: 7px 12px;
}

.card-border {
    border: 1px solid rgb(38, 36, 36);
    border-radius: 10px;
}
.card-border-disabled {
    border-radius: 10px;
    border: 2px solid grey;
    opacity: 0.6;
}
.card-border-approved {
    border-radius: 10px;
    border: 2px solid grey;
}

.card-header {
    text-align: center;
    background: none;
    border: 0;
    padding: 0;
    margin-bottom: 20px;
}

.card-header h3 {
    color: #000;
    font-size: 16px;
    font-weight: 500;
}

.stage-content {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: 4px;
    border: 1px solid #4285f4;
    background: #ffffff;
}

.div_skip {
    color: white;
}

.switch-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.switch {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 16px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: transparent;
    transition: 0.4s;
    border-radius: 100px;
    border: 2px solid #0068c4;
    background: #ebf1f7;
}

.slider::before {
    position: absolute;
    content: "";
    height: 8px;
    width: 8px;
    left: 2px;
    top: 50%;
    background-color: #0068c4;
    transition: 0.4s;
    border-radius: 100px;
    transform: translate(0, -50%);
}

input:checked + .slider {
    background-color: transparent;
}

input:checked + .slider::before {
    transform: translate(15px, -50%);
}

.text-truncate-one-line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 576px) {
    .card-body.tab-body {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* settings form pages: restore the side inset the rule above strips */
    .settings-section-body {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* settings field cards: same-width input on the right, full width when stacked */
.settings-field-input {
    width: 100%;
    margin-top: 8px;
}

@media (min-width: 577px) {
    .settings-field-input {
        flex-shrink: 0;
        width: 55%;
        margin-top: 0;
    }
}

/** START GCP Opportunities Cards **/
.gcp-board {
    min-height: 568px;
    position: relative;
    white-space: nowrap;
    display: flex;
    padding-bottom: 16px;
    overflow-x: auto;
    /* overflow-y: hidden; */
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 20px;
}

.gcp-card {
    width: 300px;
    display: inline-flex;
    vertical-align: top;
    flex-direction: column;
    justify-content: space-between;
    flex: 0 0 auto;
    border-radius: 2px;
}

.gcp-card .card-body {
    padding: 10px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.gcp-card.disabled-visual {
    opacity: 0.5;
}

.gcp-card .card-footer {
    background: none;
    border: 0;
}

.card-gradient-blue .card-body {
    background: linear-gradient(to bottom, #d5edff, #459dde);
    border-radius: 8px;
}

.card-gradient-light-blue .card-body {
    background: linear-gradient(145deg, #e7f1ff, #d0e0ff);
    border-radius: 8px;
}

.card-gradient-gray .card-body {
    background: linear-gradient(145deg, #f8f9fa, #e9ecef);
    border-radius: 8px;
}

.card-gradient-yellow .card-body {
    background: linear-gradient(145deg, #fff7e6, #ffe8b3);
    border-radius: 8px;
}

.white-block {
    background: white;
    color: #000000;
    padding: 8px 12px;
    border-radius: 6px;
}

.board .card-primary {
    border-top: 10px solid#4285f4;
}

.board .card-info {
    border-top: 10px solid #048bb6;
}

.board .card-success {
    border-top: 10px solid #28a745;
}

.board .card-warning {
    border-top: 10px solid #e8a801;
}

.board .card-danger {
    border-top: 10px solid #c3391b;
}

.board .card-primary .circle {
    border: 1px solid #4285f4;
    background: rgba(66, 133, 244, 0.1);
    color: #4285f4;
}

.board .card-info .circle {
    border: 1px solid #048bb6;
    background: rgba(4, 139, 182, 0.1);
    color: #048bb6;
}

.board .card-success .circle {
    border: 1px solid #02954e;
    background: rgba(2, 149, 78, 0.1);
    color: #02954e;
}

.board .card-warning .circle {
    border: 1px solid #e8a801;
    background: rgba(232, 168, 1, 0.1);
    color: #e8a801;
}

.board .card-danger .circle {
    border: 1px solid #c3391b;
    background: rgba(195, 57, 27, 0.1);
    color: #c3391b;
}

.gcp-card:first-child {
    border-top-left-radius: 8px;
}

.gcp-card:last-child {
    border-top-right-radius: 8px;
}

.switch-container > span {
    font-size: 15px;
    font-weight: 400;
    color: #000000;
}

.card-cta-button {
    border-radius: 4px;
    font-size: 12px;
    font-weight: 400;
    padding: 6px 12px;
    text-align: center;
    width: 100%;
}

.card-cta-button:disabled {
    opacity: 0.3;
}

.card-cta-button:focus {
    outline: none;
}

.card-cta-button.outlined-primary {
    background-color: #ffffff;
    color: #000000;
    border: 1px solid #003ca4;
}

.card-cta-button.primary {
    background-color: #003ca4;
    color: #ffffff;
    border: 1px solid #003ca4;
}

.card-cta-button.primary:hover {
    background-color: rgba(0, 60, 164, 0.7);
}

.icon_step {
    height: 100px;
}

.opportunity-info-card {
    padding: 10px 15px;
    border-radius: 8px;
    background: #f6f9fa;
}

.customer-info-card {
    padding: 10px 15px;
    border-radius: 6px;
    background: #ffffff;
}

.customer-info {
    background: #ffffff;
    padding: 8px;
    border-radius: 4px;
    display: inline-flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.info-label {
    color: #585858;
    font-size: 14px;
    font-weight: 500;
}

.info-value {
    color: #003ca4;
    font-size: 14px;
    font-weight: 600;
}

.phase-header {
    padding: 0 20px 10px 20px;
}

.board .card-primary .phase-header {
    background: #4285f4;
}

.board .card-info .phase-header {
    background: #048bb6;
}

.board .card-success .phase-header {
    background: #28a745;
}

.board .card-warning .phase-header {
    background: #e8a801;
}

.board .card-danger .phase-header {
    background: #c3391b;
}

.phase-header .phase-order {
    color: #ffffff;
    font-size: 24px;
    font-weight: 700;
}

.phase-header .phase-title {
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
}

.phase-header .phase-time-label {
    color: #ffffff;
    font-size: 12px;
    font-weight: 400;
}

.phase-header .phase-time-value {
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
}

.phase-content-container {
    padding: 10px;
}

.stage-content-header {
    gap: 30px;
    padding: 10px;
}

.stage-content-title {
    color: #000000;
    font-size: 13px;
    font-weight: 400;
    width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stage-content-time {
    color: #000000;
    font-size: 13px;
    font-weight: 400;
}

.stage-content-details {
    background: #ebf1f7;
    padding: 10px;
}

.stage-detail-label {
    color: #000000;
    font-size: 12px;
    font-weight: 400;
}

.stage-detail-label.primary {
    color: #003ca4;
}

.stage-detail-value {
    color: #000000;
    font-size: 14px;
    font-weight: 500;
}

@media (min-width: 576px) {
    .board.card-deck {
        margin-right: -8px;
        margin-left: -8px;
    }
    .board.card-deck .card {
        margin-right: 8px;
        margin-left: 8px;
        min-height: 568px;
    }
}

@media (max-width: 1023px) {
    .gcp-board .d-flex {
        display: flex !important;
    }
}
/** END GCP Opportunities Cards **/

/** Chart **/
#progress_chart .apexcharts-legend,
#linear_progress .apexcharts-legend {
    display: flex !important;
    flex-wrap: nowrap;
    justify-content: space-between;
    width: 100%;
    padding: 0;
    gap: 16px;
}

#progress_chart .apexcharts-legend-series,
#linear_progress .apexcharts-legend-series {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    background: #ffffff;
    border-radius: 6px;
    padding: 12px 16px;
    flex: 1;
    margin: 0 !important;
}

#progress_chart .apexcharts-legend-marker,
#linear_progress .apexcharts-legend-marker {
    display: none !important;
}

.legend-card {
    display: flex;
    align-items: center;
}

.legend-color {
    width: 15px !important;
    height: 40px !important;
    border-radius: 4px;
    margin-right: 8px;
}

.legend-content {
    color: #5b676d;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.legend-label {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.legend-value {
    font-size: 14px;
}
/** End Chart **/

.btn-circle-flex {
    border-radius: 100%;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 500;
    padding: 0;
}

/* NABIL (refactor with CSS variables) */

/* =========================================================
   1) Theme tokens
   ========================================================= */
:root {
    /* Typography */
    --font-sans: "Inter", sans-serif;

    /* Core colors */
    --color-black: #000000;
    --color-white: #ffffff;

    /* Slate / neutrals */
    --slate-900: #0f172a;
    --slate-600: #475569;
    --slate-500: #64748b;
    --slate-400: #94a3b8;
    --slate-300: #ebf1f7;
    --slate-200: #e2e8f0;
    --slate-100: #f1f5f9;

    /* Brand blues */
    --blue-900: #002880;
    --blue-700: #1d4ed8;
    --blue-600: #2563eb;
    --blue-300: #60a5fa;
    --blue-200: #bfdbfe;
    --blue-100: #eff6ff;

    /* Success / greens */
    --green-700: #047857;
    --green-300: #34d399;
    --success-100: #ecfdf5;
    --success-200: #d1fae5;

    /* Danger / reds */
    --red-700: #b91c1c;
    --red-300: #f88b7d;
    --danger-100: #fef2f2;
    --danger-200: #fee2e2;

    /* Warning / amber */
    --warning-100: #fffbeb;
    --warning-200: #fef3c7;
    --warning-400: #fcd34d;
    --warning-300: #f8b07d;
    --warning-700: #ff9041;

    /* Purple */
    --purple-600: #9333ea;
    --purple-100: #faf5ff;
    --purple-200: #e9d5ff;

    /* Cyan */
    --cyan-100: #daf5fb;
    --cyan-600: #0891b2;

    /* Misc */
    --row-divider: #eef2f7;
    --row-hover-bg: #f8fafe;

    /* Radii */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-pill: 50px;

    /* Shadows */
    --shadow-primary: 0 10px 24px rgba(15, 23, 42, 0.06);
    --shadow-dropdown:
        0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.01),
        0 5px 5px -3px rgba(0, 0, 0, 0.1);

    --shadow-table: 0 10px 24px rgba(15, 23, 42, 0.06);

    /* Components */
    --progress-track: #93c5fd; /* default track fallback */
    --progress-bar: var(--blue-600);

    --summary-row-bg: #0033a0;

    /* Text sizes */
    --text-xs: 10px;
    --text-sm: 11px;
    --text-md: 16px;
    --text-lg: 24px;
    --text-xl: 32px;

    /* Custom text sizes */
    --text-12: 12px;
    --text-14: 14px;

    /* Custom gaps */
    --gap-10: 10px;
    --gap-20: 20px;

    /* dialogs sizes */
    --dialog-sm: 592px;
    --dialog-lg: 950px;
    --dialog-xl: 1100px;
}

/* =========================================================
   2) Base
   ========================================================= */
body,
html {
    font-family: var(--font-sans);
}

.wrap {
    flex-wrap: wrap;
}
/* =========================================================
   3) Text utility colors
   ========================================================= */
.text-black {
    color: var(--color-black) !important;
}

.text-white {
    color: var(--color-white) !important;
}

.text-blue {
    color: var(--blue-600) !important;
}

.text-blue-200 {
    color: var(--blue-200) !important;
}

.text-blue-300 {
    color: var(--blue-300) !important;
}

.text-blue-700 {
    color: var(--blue-700) !important;
}

.text-blue-900 {
    color: var(--blue-900) !important;
}

.text-green {
    color: var(--green-700) !important;
}

.text-warning-300 {
    color: var(--warning-300) !important;
}

.text-warning-400 {
    color: var(--warning-400) !important;
}

.text-warning-700 {
    color: var(--warning-700) !important;
}

.text-green-300 {
    color: var(--green-300) !important;
}

.text-green-700 {
    color: var(--green-700) !important;
}

.text-purple {
    color: var(--purple-600) !important;
}

.text-purple-100 {
    color: var(--purple-100) !important;
}

.text-purple-200 {
    color: var(--purple-200) !important;
}

.text-slate-200 {
    color: var(--slate-200) !important;
}

.text-slate-300 {
    color: var(--slate-300) !important;
}

.text-slate-400 {
    color: var(--slate-400) !important;
}

.text-slate-500 {
    color: var(--slate-500) !important;
}

.text-slate-700 {
    color: var(--slate-700) !important;
}

.text-slate-900 {
    color: var(--slate-900) !important;
}

.text-red-300 {
    color: var(--red-300) !important;
}

.text-red-700 {
    color: var(--red-700) !important;
}

.text-cyan-600 {
    color: var(--cyan-600) !important;
}
/* =========================================================
   4) Background utility colors
   ========================================================= */
.bg-purple-100 {
    background-color: var(--purple-100) !important;
}

.bg-blue-100 {
    background-color: var(--blue-100) !important;
}

.bg-blue-200 {
    background-color: var(--blue-200) !important;
}

.bg-blue-300 {
    background-color: var(--blue-300) !important;
}

.bg-blue-600 {
    background-color: var(--blue-600) !important;
}

.bg-blue-700 {
    background-color: var(--blue-700) !important;
}

.bg-blue-900 {
    background-color: var(--blue-900) !important;
}

.bg-warning-100 {
    background-color: var(--warning-100) !important;
}

.bg-warning-200 {
    background-color: var(--warning-200) !important;
}

.bg-warning-300 {
    background-color: var(--warning-300) !important;
}

.bg-lime {
    background-color: var(--warning-400) !important;
}

.bg-success-100 {
    background-color: var(--success-100) !important;
}

.bg-success-200 {
    background-color: var(--success-200) !important;
}

.bg-green-300 {
    background-color: var(--green-300) !important;
}

.bg-green-700 {
    background-color: var(--green-700) !important;
}

.bg-slate-100 {
    background-color: var(--slate-100) !important;
}

.bg-slate-300 {
    background-color: var(--slate-300) !important;
}

.bg-slate-400 {
    background-color: var(--slate-400) !important;
}

.bg-slate-900 {
    background-color: var(--slate-900) !important;
}

.bg-danger-100 {
    background-color: var(--danger-100) !important;
}

.bg-danger-200 {
    background-color: var(--danger-200) !important;
}

.bg-danger-700 {
    background-color: var(--red-700) !important;
}

.bg-cyan-100 {
    background-color: var(--cyan-100) !important;
}

.bg-purple {
    background-color: var(--purple-600) !important;
}
/* =========================================================
   5) Borders utility colors
   ========================================================= */
.border-slate-100 {
    border-color: var(--slate-100) !important;
}

.border-slate-200 {
    border-color: var(--slate-200) !important;
}

.border-slate-400,
.border-default {
    border-color: var(--slate-400) !important;
}

.border-blue-300,
.border-info {
    border-color: var(--blue-300) !important;
}

.border-lime {
    border-color: var(--warning-400) !important;
}

.border-success {
    border-color: var(--green-700) !important;
}

.border-success-200 {
    border-color: var(--success-200) !important;
}

.border-danger {
    border-color: var(--red-700) !important;
}

.border-danger-200 {
    border-color: var(--danger-200) !important;
}

.border-danger-700 {
    border-color: var(--red-700) !important;
}
/* dashboard stat tiles: shrink text when the open sidebar narrows them */
@media (min-width: 1200px) {
    body:not(.mini-sidebar) .dashboard-stat-tile .text-md { font-size: var(--text-14) !important; }
    body:not(.mini-sidebar) .dashboard-stat-tile .text-12 { font-size: var(--text-sm) !important; }
    body:not(.mini-sidebar) .dashboard-stat-tile .text-lg { font-size: 20px !important; }
}

/* Admin dashboard: a Latest Activity list that runs to the bottom of the viewport instead of stopping
   at the theme's fixed 400px and leaving the screen half empty. The stat tiles keep the component's
   own height (as on the team dashboard) — the admin-only taller override is gone.
   460px = everything above the list (header, tiles, card title) plus the card's foot and the page's bottom padding.
   PerfectScrollbar (app.js) re-measures on resize, so the list still scrolls inside its box. */
#dashboard-admin-events {
    height: max(400px, calc(100vh - 460px));
}
/* matches the theme's .text-danger */
.border-red-400 {
    border-color: #ff5c6c !important;
}

.border-warning {
    border-color: var(--warning-400) !important;
}

.border-warning-200 {
    border-color: var(--warning-200) !important;
}

.border-dashed {
    border: 2px dashed #f1f5f9; /* same color as Bootstrap border */
}

.border-blue-600 {
    border-color: var(--blue-600) !important;
}

.border-blue-700 {
    border-color: var(--blue-700) !important;
}

.border-green-700 {
    border-color: var(--green-700) !important;
}
.border-purple {
    border-color: var(--purple-600) !important;
}

/* Base class: No borders by default (Mobile) */
.border-md-right,
.border-md-left {
    border: 0;
}

@media (min-width: 768px) {
    .border-md-right {
        border-right: 1px solid;
    }
    .border-md-left {
        border-left: 1px solid;
    }
}
/* =========================================================
   6) Border Radius && Thickness utility classes
   ========================================================= */

.radius-sm {
    border-radius: var(--radius-sm) !important;
}
.radius-md {
    border-radius: var(--radius-md) !important;
}
.radius-lg {
    border-radius: var(--radius-lg) !important;
}
.radius-pill {
    border-radius: var(--radius-pill) !important;
}

.thickness-1 {
    border-width: 1px !important;
}

.thickness-2 {
    border-width: 2px !important;
}

.thickness-3 {
    border-width: 3px !important;
}

.thickness-4 {
    border-width: 4px !important;
}

/* =========================================================
   6b) Shadow utility classes
   ========================================================= */

.shadow-table {
    box-shadow: var(--shadow-table) !important;
}

/* =========================================================
   7) Opacity utility classes
   ========================================================= */

.opacity-100 {
    opacity: 1 !important;
}
.opacity-75 {
    opacity: 0.75 !important;
}
.opacity-50 {
    opacity: 0.5 !important;
}
.opacity-25 {
    opacity: 0.25 !important;
}
.opacity-0 {
    opacity: 0 !important;
}

/* =========================================================
   8) Line height utility classes
   ========================================================= */

.lh-1 {
    line-height: 1;
}

.lh-12 {
    line-height: 1.2;
}

.lh-15 {
    line-height: 1.5;
}

.lh-18 {
    line-height: 1.8;
}

/* =========================================================
   9) Fonts utility classes
   ========================================================= */
.text-xs {
    font-size: var(--text-xs) !important;
}

.text-sm {
    font-size: var(--text-sm) !important;
}

.text-md {
    font-size: var(--text-md) !important;
}

.text-lg {
    font-size: var(--text-lg) !important;
}

.text-xl {
    font-size: var(--text-xl) !important;
}

.text-12 {
    font-size: var(--text-12) !important;
}

.text-14 {
    font-size: var(--text-14) !important;
}

.font-weight-black {
    font-weight: 900 !important;
}

/* =========================================================
   10) Gaps
   ========================================================= */
.gap-10 {
    gap: var(--gap-10) !important;
}

.gap-20 {
    gap: var(--gap-20) !important;
}

.gap-0 {
    gap: 0 !important;
}

.gap-6 {
    gap: 6px !important;
}

.gap-8 {
    gap: 8px !important;
}

/* row gap only — keeps existing horizontal margins on wrapping rows */
.row-gap-8 {
    row-gap: 8px !important;
}
/* Below the Bootstrap scale: its smallest step is .25rem (4px) and this gap scale
   starts at 6px. Segmented controls need 2px to read as one pill, not two buttons. */
.gap-2 {
    gap: 2px !important;
}

.p-2px {
    padding: 2px !important;
}

/* row gap only — keeps existing horizontal margins on wrapping rows */
.row-gap-8 {
    row-gap: 8px !important;
}
/* Below the Bootstrap scale: its smallest step is .25rem (4px) and this gap scale
   starts at 6px. Segmented controls need 2px to read as one pill, not two buttons. */
.gap-2 {
    gap: 2px !important;
}

.p-2px {
    padding: 2px !important;
}

/* row gap only — keeps existing horizontal margins on wrapping rows */
.row-gap-8 {
    row-gap: 8px !important;
}
/* =========================================================
   10b) Flex Basis
   ========================================================= */
.flex-basis-200 {
    flex-basis: 200px !important;
}
/* =========================================================
   10c) Agreement header utilities
   ========================================================= */
/* caps a long meta value (e.g. legal entity) so it wraps instead of stretching the row */
.agreement-meta-chip {
    max-width: 220px;
}

.agreement-meta-chip > span {
    overflow-wrap: break-word;
}

.country-flag-img {
    width: 16px !important;
    height: 12px !important;
    object-fit: cover !important;
    border-radius: 2px !important;
}

/* =========================================================
   10c-i) Country flag switcher (<x-country-flag-select>, ACM-5)
   Utilities the component relies on. Scoped where they could
   otherwise leak (flag size, caret) so the shared .country-flag-img
   used by the agreement header keeps its 22x16 size.
   ========================================================= */
/* compact 16x12 flag inside the switcher only */
[data-country-flag-select] .country-flag-img {
    width: 16px !important;
    height: 12px !important;
}
/* use the phosphor caret, hide Bootstrap's default ::after caret */
[data-country-flag-select] > .dropdown-toggle::after {
    display: none;
}
.w-10px {
    width: 10px;
}
.h-10px {
    height: 10px;
}
/* let the 10px caret win over the global `.btn svg { 18px }` rule */
.btn svg.w-10px {
    width: 10px !important;
}
.btn svg.h-10px {
    height: 10px !important;
}
.max-h-93 {
    max-height: 93px;
}
.max-h-300 {
    max-height: 300px;
}

.text-amount-lg {
    font-size: 1.1rem !important;
}

.mb-30 {
    margin-bottom: 30px;
}
/* =========================================================
   11) Progress (thin)
   ========================================================= */
.progress--thin {
    width: 110px;
    height: 5px;
    border-radius: var(--radius-pill);
    background: var(--track-color, var(--progress-track));
}

.progress--thin .progress-bar {
    border-radius: var(--radius-pill);
    background: var(--bar-color, var(--progress-bar));
}

.progress--thin,
.progress--thin .progress-bar {
    opacity: 1 !important;
}
.progress--default {
    height: 10px;
    border-radius: var(--radius-pill);
    background: var(--track-color, var(--progress-track));
}

.progress--thin .progress-bar,
.progress--default .progress-bar {
    border-radius: var(--radius-pill);
    background: var(--bar-color, var(--progress-bar));
}

.progress--thin,
.progress--default,
.progress--thin .progress-bar,
.progress--default .progress-bar {
    opacity: 1 !important;
}

/* =========================================================
   12) Status pills + status text
   ========================================================= */
.status-pill {
    display: inline-block;
    padding: 2px 7px;
    font-size: var(--text-xs);
    font-weight: 700;
    border: 1px solid;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    white-space: nowrap;
}

/* Each tone below also publishes its colours as --tone-* custom properties. Nothing else
   changes for a pill — but a FILTER CHIP that carries the same class can then read them back
   (see .chip-toggle further down), so a status picker wears its statuses' colours without the
   palette being written out a second time. */
.status-pill-success {
    --tone-fg: var(--green-700);
    --tone-bg: var(--success-100);
    --tone-border: var(--success-200);
    color: var(--tone-fg);
    background-color: var(--tone-bg);
    border-color: var(--tone-border);
}

.status-pill-danger {
    --tone-fg: var(--red-700);
    --tone-bg: var(--danger-100);
    --tone-border: var(--danger-200);
    color: var(--tone-fg);
    background-color: var(--tone-bg);
    border-color: var(--tone-border);
}

.status-pill-blue {
    --tone-fg: var(--blue-700);
    --tone-bg: #dbeafe;
    --tone-border: var(--blue-200);
    color: var(--tone-fg);
    background-color: var(--tone-bg);
    border-color: var(--tone-border);
}

.status-pill-purple {
    --tone-fg: var(--purple-600);
    --tone-bg: var(--purple-100);
    --tone-border: var(--purple-200);
    color: var(--tone-fg);
    background-color: var(--tone-bg);
    border-color: var(--tone-border);
}

.status-pill-warning {
    --tone-fg: var(--warning-700);
    --tone-bg: var(--warning-100);
    --tone-border: var(--warning-200);
    color: var(--tone-fg);
    background-color: var(--tone-bg);
    border-color: var(--tone-border);
}

/* Softer variant used by the popup's Customer information block: a true pill instead of
   the 2px-radius chip, roomier padding and spaced caps so it reads as a badge, not a tag. */
.status-pill.status-pill-soft {
    padding: 3px 10px;
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

/* Task card approval headings (Approved By / Sales approval skipped / Rejected By): the mdi glyph
   carries the font's tall line box, so flex centring alone leaves it below the label's middle. */
.task-phase-head {
    display: flex;
    align-items: center;
}

.task-phase-head i,
.task-phase-head span {
    line-height: 1;
}

.task-phase-head i::before {
    display: block;
}

/* Intake/badge enum tones (ClientIntakeStatus / CommercialBadge badgeClass) that
   had no pill variant yet: `info` (Pending Sales / Prospect) and `lime`
   (Pending Operations). Keeps status-pill-{{ $client->intake_status_class }} resolvable.
   `info` publishes its tone too: it is also the GWS subscription Pending status, whose Status
   filter chip wears it. */
.status-pill-info {
    --tone-fg: #0369a1;
    --tone-bg: #e0f2fe;
    --tone-border: #bae6fd;
    color: var(--tone-fg);
    background-color: var(--tone-bg);
    border-color: var(--tone-border);
}

.status-pill-lime {
    color: #4d7c0f;
    background-color: #f7fee7;
    border-color: #d9f99d;
}

.status-pill-delivery-progress {
    color: #b45309;
    background-color: #fffbeb;
    border-color: #fde68a;
}

.status-pill-delivery-progress i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-right: 4px !important;
    border-radius: 9999px;
    background-color: #fef3c7;
    color: #b45309;
    font-size: 10px;
    line-height: 1;
}

.status-pill-default {
    --tone-fg: var(--slate-700);
    --tone-bg: var(--slate-100);
    --tone-border: var(--slate-200);
    color: var(--tone-fg);
    background-color: var(--tone-bg);
    border-color: var(--tone-border);
}

.status-chip {
    display: inline-flex;
    align-items: center;
    padding: 1px 9px;
    font-size: var(--text-xs);
    font-weight: 700;
    border: 1px dashed;
    border-radius: 9999px;
    background-color: transparent !important;
    text-transform: uppercase;
    white-space: nowrap;
}

.status-pill-cyan {
    color: #0e7490;
    background-color: #ecfeff;
    border-color: #cffafe;
}

.status-pill-orange {
    color: #9a3412;
    background-color: #fff7ed;
    border-color: #ffedd5;
}

/* Task status/priority tones (tasks_status.taskstatus_color and
   tasks_priority.taskpriority_color) that had no pill variant yet: `brown`
   (e.g. GPM Approved) and `primary`. Keeps status-pill-{{ $task->taskstatus_color }}
   resolvable for every colour the settings screens can assign. */
.status-pill-brown {
    color: #5d4037;
    background-color: #efebe9;
    border-color: #d7ccc8;
}

.status-pill-primary {
    color: var(--blue-700);
    background-color: var(--blue-100);
    border-color: var(--blue-200);
}

.status-text {
    font-weight: 700;
}

.status-text-success {
    color: var(--green-700);
}

.status-text-delivery-progress {
    color: #b45309;
}

.status-text-gray {
    color: var(--slate-500);
}

/* Start / end date chips (x-misc.date-range). Only the label column needs a rule: a fixed
   width is what lines the two date pills up under each other. */
.date-range-key {
    min-width: 30px;
}

/* =========================================================
   13) Small text
   ========================================================= */
.text-small {
    font-size: var(--text-xs);
    font-weight: 400;
    line-height: 14px;
}

/* =========================================================
   14) Buttons / dropdown
   ========================================================= */

/* Base */
.btn {
    --btn-bg: transparent;
    --btn-color: var(--slate-900);
    --btn-border: var(--slate-200);

    --btn-bg-hover: var(--slate-100);
    --btn-color-hover: var(--btn-color);
    --btn-border-hover: var(--btn-border);

    --btn-bg-active: var(--slate-200);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    font-family: var(--font-sans);
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;

    border-radius: var(--radius-sm);
    border: 1px solid var(--btn-border);
    background: var(--btn-bg) !important;
    color: var(--btn-color);

    user-select: none;
    cursor: pointer;

    transition:
        background-color 150ms ease,
        border-color 150ms ease,
        color 150ms ease,
        transform 60ms ease;
}

/* Sizes */
.btn-sm {
    height: 28px;
    padding: 0 10px;
    font-size: 11px;
}

.btn-md {
    height: 34px;
    padding: 0 22px;
    font-size: 11px;
}

.btn-lg {
    height: 52px;
    padding: 0 26px;
    font-size: 16px;
}

/* Hover/active/focus */
.btn:hover {
    background: var(--btn-bg-hover);
    color: var(--btn-color-hover);
    border-color: var(--btn-border-hover);
}

.btn:active {
    background: var(--btn-bg-active);
    transform: translateY(1px);
}

.btn:focus {
    outline: none;
}

.btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25);
}

/* Disabled */
.btn:disabled,
.btn.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    transform: none;
}

/* ---------------------------------------
   15) VARIANTS
---------------------------------------- */

.btn-primary {
    --btn-bg: var(--blue-700);
    --btn-color: var(--color-white);

    --btn-bg-hover: #001f66;
    --btn-bg-active: #001a55;

    border: 0;
}

.btn-danger {
    --btn-bg: var(--red-700);
    --btn-color: var(--color-white);

    --btn-bg-hover: #991b1b;
    --btn-bg-active: #7f1d1d;

    border: 0;
}

.btn-success {
    --btn-bg: var(--green-700);
    --btn-color: var(--color-white);

    --btn-bg-hover: #15803d;
    --btn-bg-active: #166534;

    border: 0;
}

.btn-purple {
    --btn-bg: var(--purple-700);
    --btn-color: var(--color-white);

    --btn-bg-hover: #7c3aed;
    --btn-bg-active: #6b21a8;

    border: 0;
}

.btn-warning {
    --btn-bg: var(--warning-700);
    --btn-color: var(--color-white);

    --btn-bg-hover: #b45309;
    --btn-bg-active: #78350f;

    border: 0;
}

.btn-primary:hover {
    border: 0;
}

.btn-outline-primary {
    --btn-bg: var(--blue-100);
    --btn-color: var(--blue-700);
    --btn-border: var(--blue-700);

    --btn-bg-hover: var(--blue-100);
    --btn-border-hover: var(--blue-700);
    --btn-bg-active: var(--blue-200);
}

/* .btn-outline-primary:focus{
    --btn-bg: var(--blue-700);
    background-color: var(--blue-700);
    border-color: var(--blue-700);
} */

.btn-outline-danger {
    --btn-bg: var(--danger-100);
    --btn-color: var(--red-700);
    --btn-border: var(--red-700);

    --btn-bg-hover: var(--danger-100);
    --btn-border-hover: var(--red-700);
    --btn-bg-active: var(--danger-200);
}

.btn-outline-danger:focus-visible {
    box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.22);
}

.btn-outline-warning {
    --btn-bg: var(--warning-100);
    --btn-color: var(--warning-700);
    --btn-border: var(--warning-400);

    --btn-bg-hover: var(--warning-100);
    --btn-border-hover: var(--warning-400);
    --btn-bg-active: #fff3c7;
}

.btn-outline-success {
    --btn-bg: var(--success-100);
    --btn-color: var(--green-700);
    --btn-border: var(--green-300);

    --btn-bg-hover: var(--success-100);
    --btn-border-hover: var(--green-300);
    --btn-bg-active: #d1fae5;
}

.btn-outline-default {
    --btn-bg: var(--slate-100);
    --btn-color: var(--slate-500);
    --btn-border: var(--slate-200);

    --btn-bg-hover: var(--slate-100);
    --btn-border-hover: var(--slate-200);
    --btn-bg-active: var(--slate-300);
}

.btn-outline-warning:focus-visible {
    box-shadow: 0 0 0 3px rgba(252, 211, 77, 0.28);
}

.btn-outline-primary:not(:disabled):not(.disabled).active,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.show > .btn-outline-primary.dropdown-toggle,
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary.focus {
    color: var(--blue-700) !important;
}
/* ---------------------------------------
   16) ICON HELPERS (arrow on the right)
---------------------------------------- */

.btn .btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn .btn-icon-right {
    margin-left: 8px;
    color: var(--btn-color);
}

.action-btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    padding: 0;
    border-color: transparent;
    background: var(--slate-100);
    opacity: 1;
}

.action-btn:hover {
    background: var(--blue-100);
}

.action-btn:hover * {
    opacity: 0.7;
}

.action-btn:focus {
    border: 0;
    outline: none;
}

/* If you use inline SVG */
.btn svg {
    width: 18px;
    height: 18px;
}

.btn-outline-secondary {
    color: var(--slate-400);
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-sm);
}

.btn-outline-secondary:hover {
    color: var(--blue-600);
    border: 1px solid var(--blue-600);
}

.btn-secondary:hover,
.btn-secondary.disabled:hover {
    color: var(--slate-900) !important;
    border: 1px solid var(--slate-200);
}

.dropdown-menu {
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-dropdown) !important;
}

a.dropdown-item {
    font-weight: 500;
    font-size: var(--text-sm);
}

/* Button Groups */
.btn-group {
    gap: 10px;
    border-radius: 0;
    width: auto;
}

@media (max-width: 1023px) {
    .btn-group {
        width: 100%;
    }
}

.btn-group .btn {
    border-radius: var(--radius-sm) !important;
    font-size: var(--text-sm);
    font-weight: 700;
    padding: 7px 17px;
    text-align: center;
    color: var(--slate-600);
    border-color: var(--slate-200);
    background-color: var(--color-white);
}

.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show > .btn-primary.dropdown-toggle {
    border-color: var(--blue-700);
    background-color: var(--blue-700);
}

.btn-group .btn:focus {
    opacity: 1;
    box-shadow: 0;
}

.billing-tabs-wrapper {
    background: #e9edf3;
    border: 1px solid #d8dee8;
    border-radius: 12px;
    padding: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.billing-tab {
    border: 0;
    background: transparent;
    color: #8a94a6;
    font-weight: 700;
    font-size: 16px;
    line-height: 1;
    padding: 14px 22px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    transition: all 0.2s ease;
    text-decoration: none;
    outline: none !important;
    box-shadow: none !important;
}

.billing-tab:hover {
    text-decoration: none;
    color: #5f6b7c;
    background: rgba(255, 255, 255, 0.35);
}

.billing-tab.active {
    background: #f7f8fb;
    color: #0f3ea8;
}

.billing-tab svg {
    width: 22px;
    height: 22px;
    margin-right: 12px;
    stroke: currentColor;
    flex-shrink: 0;
}

.billing-tab:focus {
    box-shadow: none;
}

/* Filters Pill */
.filter-pill {
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    font-weight: 700;
    padding: 7px 17px;
    text-align: center;
    color: var(--slate-600);
    border-color: var(--slate-200);
    background-color: var(--color-white);
    box-shadow: var(--shadow-primary);
}

/* =========================================================
   Reusable state-class visuals — add the component class to any element
   and toggle `.is-active` / `.is-selected` to drive the look from CSS.
   ========================================================= */

/* chip-toggle — pill button with slate resting + filled active state.
   inline-flex centring + min-height keeps text chips and image (flag) chips the same size. */
.chip-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    line-height: 1.2;
    border: 0;
    border-radius: var(--radius-sm);
    padding: 0.3rem 0.7rem;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-black);
    background-color: var(--slate-100);
}

/* Flag image chip sits flush inside the chip. */
.chip-toggle .country-flag-img {
    display: block;
}

.chip-toggle.is-active {
    background-color: var(--blue-700) !important;
    color: var(--color-white) !important;
    font-weight: 700 !important;
}

/* A filter chip carrying a status tone (status-pill-*) wears that status's colours while
   unselected, so the picker and the Status column read as one thing. Needs the two-class
   specificity to beat `.chip-toggle`'s own colour/background, which is declared above; the
   `.is-active` fill still wins over both (it is !important), because a selected chip has to
   read as selected first and as a status second. */
.chip-toggle[class*="status-pill-"] {
    color: var(--tone-fg, var(--color-black));
    background-color: var(--tone-bg, var(--slate-100));
    border: 1px solid var(--tone-border, transparent);
}

/* No focus outline on chips — the active fill already signals selection. */
.chip-toggle:focus,
.chip-toggle:focus-visible,
.chip-toggle:active {
    outline: none;
    box-shadow: none;
}

/* Disabled chip (e.g. a country outside the user's reach, ACM-7): greyed and non-clickable.
   The JS click handler also skips these; this is the visual + pointer-events guard. */
.chip-toggle.is-disabled,
.chip-toggle:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* Alert rule view modal: every chip is disabled, so drop the faded look — selected chips stay
   fully blue, the rest wear the disabled-input grey (as .form-control:disabled) and fade back so
   the selection reads at a glance. Labels keep their edit-mode grey; remove controls go. */
.alert-rule-readonly .chip-toggle:disabled {
    opacity: 1;
}

.alert-rule-readonly .chip-toggle:disabled:not(.is-active) {
    background-color: #e9ecef;
    color: var(--slate-500);
    font-weight: 500;
    opacity: 0.45;
}

.alert-rule-readonly .alert-recipient-chip-close,
.alert-rule-readonly .js-condition-remove,
.alert-rule-readonly .js-milestone-remove,
.alert-rule-readonly .js-pacing-milestone-remove {
    display: none;
}

/* Filter-chip visibility toggles. Bootstrap's .d-flex/.d-block utilities carry !important,
   and on a single-class tie the later-declared utility wins — so a plain .d-none can never
   hide a chip wrapper that also has .d-flex (the Show More popover items). These compound
   selectors outrank the utilities, letting JS hide chips/wrappers for search + billing
   cascade reliably. Two classes so the two filters don't clobber each other's state. */
.chip-toggle.js-search-hidden,
.col-4.js-search-hidden,
.col-6.js-search-hidden,
.js-chip-cell.js-search-hidden,
.chip-toggle.js-billing-hidden,
.col-4.js-billing-hidden,
.col-6.js-billing-hidden,
.js-chip-cell.js-billing-hidden {
    display: none !important;
}

/* filter-label — small slate label that sits above a filter chip group / form field. */
.filter-label {
    display: block;
    margin-bottom: 0.5rem !important;
    font-size: var(--text-xs) !important;
    font-weight: 600 !important;
    color: var(--slate-700) !important;
}

/* 5-per-row grid column (Bootstrap has no native 1/5). Used by the agreements filter groups. */
@media (min-width: 992px) {
    .col-lg-5th {
        flex: 0 0 20%;
        max-width: 20%;
    }
}

.filter-month-range .flatpickr-wrapper {
    flex: 1 1 auto;
    min-width: 0;
}

.filter-month-range .flatpickr-calendar {
    z-index: 1001;
}

/* Month pickers sit next to the filter cards' text fields (Customer or ID, Search), which are
   `form-control-sm` — 31px tall. The picker input carries no `-sm`, so it kept the theme's 38px
   `.form-control` min-height and, with the group's own border, towered 9px over the search box.
   Pin the group to the small-control height and let both children stretch into it. */
.filter-month-range .input-group {
    height: 31px;
}

/* flatpickr wraps the visible input in `.flatpickr-wrapper`, so the input is a grandchild of the
   group — it has to stretch through that wrapper to fill the row. */
.filter-month-range .input-group .flatpickr-wrapper {
    display: flex;
}

.filter-month-range .input-group .form-control,
.filter-month-range .input-group .input-group-text,
/* The bound's own X (js-month-clear) is a .btn, which brings its own 38px of padding into a
   group pinned to 31px. Stretch it like the other two children instead. */
.filter-month-range .input-group .js-month-clear {
    height: auto;
    min-height: 0;
    align-self: stretch;
    padding-top: 0;
    padding-bottom: 0;
}

/* display HERE, not via .d-inline-flex: both carry !important and Bootstrap declares the flex
   utilities after .d-none, so d-none on the markup could never hide the X. Same trap as
   .filter-date-clear above. `js-day-clear` is the same affordance on the agreement Monthly tab's
   day pickers. */
.js-month-clear,
.js-day-clear {
    display: inline-flex;
    line-height: 0;
}

.js-month-clear:hover,
.js-month-clear:focus,
.js-day-clear:hover,
.js-day-clear:focus {
    color: var(--slate-600);
}

/* ⚠️ These two clears are .btn, and the global `.btn svg { 18px }` rule (above) overrides the
   width/height ON the markup — so an <x-phosphor-x width="16"> still drew at 18 and the month
   pickers carried a visibly bigger X than the date fields, whose clear is not a .btn. Pinned
   back to 16 so every date control's X matches, and matches the calendar icon beside it.
   `.input-group` prefix out-specifies `.btn svg` rather than relying on source order. */
.input-group .js-month-clear svg,
.input-group .js-day-clear svg {
    width: 16px;
    height: 16px;
}

/* Custom-day filter row (filter-chip-group "Custom" entry): fixed-width operator select so the
   number field takes the rest, spinner-free number input, and square confirm/cancel icon buttons.
   Generic to any filter-chip-group rendered with allowCustom. */
.js-custom-form .js-custom-operator,
.js-custom-form .select2-container {
    flex: 0 0 72px;
    width: 72px !important;
}

.js-custom-form .select2-container .select2-selection--single {
    height: calc(1.5em + 0.5rem + 2px);
    display: flex;
    align-items: center;
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.js-custom-form .select2-container .select2-selection__rendered {
    padding-left: 0.5rem;
    font-size: 14px;
    font-weight: 600;
    color: var(--slate-600);
    line-height: 1.5;
}

.js-custom-input::-webkit-outer-spin-button,
.js-custom-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.js-custom-input {
    -moz-appearance: textfield;
    appearance: textfield;
}

.js-custom-form .input-group-append .btn {
    padding: 0;
    width: 30px;
}

.js-custom-form .input-group-append .btn svg {
    width: 15px;
    height: 15px;
}

.js-custom-form .js-custom-confirm svg,
.js-custom-form .js-custom-confirm:hover svg {
    color: var(--green-700);
}

/* tab-underline — text tab with blue underline when active. */
.tab-underline {
    color: var(--color-black);
    border-bottom-color: var(--slate-100) !important;
}
.tab-underline.is-active {
    color: var(--blue-700) !important;
    font-weight: 700 !important;
    border-bottom-color: var(--blue-700) !important;
    border-bottom-width: 2px !important;
}

/* option-card-select — bordered card that highlights when selected. */
.option-card-select.is-selected {
    border-color: var(--blue-300) !important;
    border-width: 2px !important;
}

/* label-toggle — text label that turns blue+bold when its sibling is active. */
.label-toggle.is-active {
    color: var(--blue-700) !important;
    font-weight: 700 !important;
}

/* Recipient chip — one neutral slate pill for every category (rule popup + alerts list). */
.alert-recipient-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-black);
    background-color: var(--slate-100);
    border-radius: var(--radius-md);
    padding: 6px 12px;
    font-size: var(--text-sm);
    font-weight: 600;
}
.alert-recipient-chip-close {
    border: 0;
    background: transparent;
    padding: 0;
    color: var(--color-black);
    line-height: 1;
    cursor: pointer;
}

/* Agreement-scope chip — appears inside the picker's selected-tags strip. */
.ag-scope-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: var(--slate-100);
    border-radius: var(--radius-sm);
    padding: 4px 8px;
    font-size: var(--text-sm);
    color: var(--color-black);
}
.ag-scope-chip-code {
    background-color: var(--color-white);
    color: var(--slate-700);
    border-radius: var(--radius-sm);
    padding: 0 4px;
    font-size: var(--text-xs);
    font-weight: 700;
}
.ag-scope-chip-remove {
    color: var(--slate-400);
    cursor: pointer;
    line-height: 1;
    font-size: 14px;
}
/* =========================================================
   17) Table responsive wrapper + table styles
   ========================================================= */
.table-responsive {
    overflow: auto;
    max-height: 100vh;
    position: relative;
    background: var(--color-white);
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-table);
}

.table-responsive table,
#ag-table {
    margin: 0 !important;
    border-collapse: separate;
    border-spacing: 0;
}

.table-responsive table,
#dl-table {
    margin: 0 !important;
    border-collapse: separate;
    border-spacing: 0;
}

.table-responsive table thead th,
.table-responsive table thead td {
    background: var(--slate-100);
    border: 0;
    font-weight: 700;
    font-size: var(--text-sm);
    color: var(--slate-500);
    white-space: nowrap;
    padding: 14px;
    text-transform: uppercase;
    border-radius: 0;
}

.table-responsive table thead th {
    border: 0.5px solid #d7dde5;
    text-align: center;
}

.table-responsive table thead th.sub-head {
    font-size: var(--text-xs);
    font-weight: 400;
}

.table-responsive table thead th:first-child,
.table-responsive table thead th:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.table-responsive tbody td {
    border: 0;
    padding: 18px 20px;
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--slate-400);
    vertical-align: middle;
}

.table-responsive tbody tr td {
    border-bottom: 1px solid var(--row-divider) !important;
}

.table-responsive tbody tr:last-child td {
    border-bottom: 0 !important;
}

/* Expanded order line items: no divider under the products box */
.table-responsive tbody tr.js-order-detail > td {
    border-bottom: 0 !important;
}

.table-responsive .sorting-icons i {
    font-size: var(--text-sm);
    opacity: 0.65;
}

.table-responsive tbody tr:hover td {
    background: var(--row-hover-bg);
}

.table-responsive tbody tr:hover td table td {
    background: inherit;
}

.table-responsive .page-item.active .page-link {
    background-color: var(--blue-600);
    border-color: var(--blue-600);
}

.table-responsive .sticky-col {
    position: sticky;
    left: 0;
    text-align: left;
    min-width: 150px;
    background-color: var(--color-white);
    box-shadow: 3px 0 6px rgba(0, 0, 0, 0.06);
    /* Explicit, not `auto`: a frozen column only reads as frozen if the columns sliding under it
       stay under it. On `auto` these cells shared the positioned layer with anything else in the
       row that carries a z-index, and ties there are settled by DOM order — so a later column
       could paint over the frozen one and its text would run through the customer name.
       2 sits above the scrolling cells and below the header band (.sticky-row, 3) and the frozen
       column's own header (5), which is the order those three have to keep. */
    z-index: 2;
}

.table-responsive thead .sticky-col {
    z-index: 5;
    /* Its background comes from `.sticky-col` above, which is white for the BODY cells the rows
       scroll under. In the header that white read as a box pasted over the grey header row —
       most visibly on the ledgers, where it sits beside a two-row group header and looks like it
       is covering it. The header cell takes the header's own colour instead. */
    background-color: var(--slate-100);
}

/* Actions column frozen to the right edge, so row actions stay clickable however far a wide table
   is scrolled. The class is applied by public/js/core/misc/sticky-actions-column.js to the last
   column of any scrolling table whose last header is "Action(s)" — views do not add it by hand.
   Same layering as `.sticky-col`: 2 for body cells, 5 for the header cell. Row hover still wins
   the background (`.table-responsive tbody tr:hover td` is more specific). The row divider needs
   nothing extra: list tables use `border-collapse: separate`, so the cell's own border sticks
   with it (an inset-shadow divider on top of that drew the line twice). */
.sticky-col-end {
    position: sticky;
    right: 0;
    z-index: 2;
    background-color: var(--color-white);
}

/* The edge shadow is a horizontal gradient strip, not a box-shadow: a blurred box-shadow also
   spreads up and down, so every cell's shadow bled over the row line above and below it and
   smudged each divider. The strip is exactly the cell's height, so it only fades leftwards. */
.sticky-col-end::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -12px;
    width: 12px;
    background: linear-gradient(to left, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0));
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
}

/* Shown only while columns are actually hidden behind the pinned one (the script sets the class
   from the scroll position), so a table that fits — or is scrolled to its end — shows no seam. */
table.has-hidden-right .sticky-col-end::before {
    opacity: 1;
}

/* A row is expanded (full-width detail row, set by the script): the column scrolls with the table.
   `right: auto` rather than `position: static` so the header cell keeps its `.sticky-row` top pin. */
table.has-expanded-row .sticky-col-end {
    right: auto;
}

/* Buttons sit centred under the "Actions" header on every list. `!important` because views tag
   these cells with Bootstrap's `text-right` / `text-left` (themselves `!important`), and block
   flex wrappers (`.d-flex`, `.justify-content-end`) need their own axis centred. */
.sticky-col-end {
    text-align: center !important;
}

.sticky-col-end > div,
.sticky-col-end > .d-flex,
.sticky-col-end .list-table-action {
    justify-content: center !important;
}

thead .sticky-col-end {
    z-index: 5;
    background-color: var(--slate-100);
}

/* Each pinned cell is its own stacking context, so the next row's cell covers an open menu. */
.sticky-col-end:has(.dropdown-menu.show) {
    z-index: 6;
}

.table-responsive .section-row td,
.table-responsive .section-row .sticky-col {
    background: var(--blue-100);
    font-weight: 900;
}

.table-responsive .pagination {
    margin: 0;
}

.table-responsive .pagination li {
    margin: 0 2px;
}

.table-responsive .page-link {
    margin: 0;
    border-color: var(--row-divider);
}

table th a,
.table th a {
    color: var(--slate-500) !important;
    text-decoration: none;
}

.table.layout-fixed {
    table-layout: fixed;
}

.table-items-listing .table-listing-item {
    border-bottom: 1px solid var(--row-divider);
}
.table-items-listing .table-listing-item:last-child {
    border-bottom: 0;
}

.sticky-row {
    position: sticky;
    top: 0;
    /* 3, not 1: Bootstrap gives `.btn-group > .btn.active` position:relative + z-index:1, and a
       tie between two positioned elements is settled by DOM order — so the active tab button of
       an expanded row (billing tracker) painted OVER the header it should scroll beneath. Kept
       below `.table-responsive thead .sticky-col` (5) so the frozen column's own header still
       wins the corner where the two meet. */
    z-index: 3;
}

.group-head.sticky-row {
    height: 45.5px;
}

.sub-head.sticky-row {
    top: 45.5px;
}
/* =========================================================
   18) Form Inputs
   ========================================================= */
.form-group label {
    color: var(--slate-700);
    font-weight: 700;
    font-size: var(--text-xs);
    margin-bottom: 4px;
    display: block;
}

.form-group .form-control {
    border-color: var(--slate-200);
    border-radius: var(--radius-sm);
    color: var(--slate-600);
    font-weight: 500;
}

.form-control.form-control-sm,
.select2-selection__placeholder {
    font-size: 12px !important;
}

.select2-selection__rendered {
    line-height: 20px;
}

[type="checkbox"]:checked + label:before {
    background: url("../../public/images/check.svg") center center no-repeat;
    background-size: cover;
    border: 0 !important;
    top: -3px;
    left: 0;
    width: 20px;
    height: 20px;
    transform: none;
}

[type="checkbox"] + label:before {
    transition: none;
}

.custom-checkbox .custom-control-indicator {
    top: 4px;
}
/* =========================================================
   19) Agreements list table (specific)
   ========================================================= */
#ag-table h3,
#gws-domains-table h3,
#subscriptions-table h3 {
    font-size: 12.25px;
    line-height: 17.5px;
    font-weight: 700;
    color: var(--slate-900);
    margin: 0;
    text-transform: capitalize;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#ag-table .text-small {
    color: var(--slate-400);
}

/* GWS agreements list — the customer cell's domain line.

   The table is `no-wrap` and a GWS customer can own several domains, so the joined
   "primary (primary), secondary (secondary)" label had nothing to stop it: it ran out of the
   450px cell and printed over the Total column beside it. The cell now prints the PRIMARY only
   (ellipsised when even that is long) and folds the rest into a "+N" chip, so the line has a
   ceiling whatever the customer owns. `min-width: 0` is what lets a flex child shrink far enough
   to ellipsise at all. */
/* The cap sits on the whole customer block, not on one line inside it: the table lays out
   automatically, so ANY long value in this cell (the customer name, a domain) widens the column
   until the content prints over the Total beside it. With a ceiling here, each line ellipsises
   within the block instead. */
#ag-table .gws-customer-cell {
    min-width: 0;
    max-width: 330px;
}

/* Unprefixed: the GWS orders list's Customer cell carries the same line and the same rule
   (see orders-table.blade.php). */
.gws-domain-cell {
    min-width: 0;
    max-width: 100%;
}

/* A ceiling for the orders list, whose Customer column is not capped the way the agreements
   list's is — one long domain would otherwise stretch it. */
#gws-orders-table .gws-domain-cell {
    max-width: 260px;
}

.gws-domain-primary {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* Shrink to whatever the line has left. `min-width: 0` is what allows a flex child to go below
       its content width — without it the text refuses to ellipsise. */
    flex: 0 1 auto;
    min-width: 0;
}

#ag-table .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 31px;
    height: 31px;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 14px;
    flex-grow: 0;
    flex-shrink: 0;
    color: var(--color-white);
    background-color: var(--slate-500);
    border-radius: var(--radius-sm);
}

tr.summary-row td,
.table-responsive table thead tr.summary-row td,
tr.summary-row:hover td,
.table-responsive table thead tr.summary-row:hover td {
    background: var(--summary-row-bg) !important;
}

/* The light row divider (`.table-responsive tbody tr td`, `!important`) reads as a white strip
   under the dark band, between it and the first row. The band's own divider takes the band colour
   so it meets the first row cleanly. */
.table-responsive tr.summary-row td {
    border-bottom-color: var(--summary-row-bg) !important;
}

.table-responsive table thead tr.summary-row td.bg-blue-900 {
    background: var(--blue-900) !important;
}

/* =========================================================
   20) Cards
   ========================================================= */
.card {
    background-color: transparent;
    background: none;
}

.card.ag-card {
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-md);
    background: var(--color-white);
    font-size: var(--text-sm);
    font-weight: 400;
    color: var(--slate-400);
}

.ag-card .card-header {
    padding: 1.25rem;
    margin: 0;
}

.ag-card .card-body {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-top: 0;
    padding-bottom: 0;
}

.ag-card .card-footer {
    margin: 1.25rem;
    padding: 0;
}

.ag-card h3 {
    font-size: 24px;
    font-weight: 900;
    color: var(--color-black);
    line-height: 30px;
}

.ag-card .badge {
    padding: 7px;
    border-radius: var(--radius-md);
}


.ag-card.is-filters-collapsed > .card-body > form > *:not(.js-filter-keep) {
    display: none !important;
}

/* header keeps no bottom gap once nothing below it is shown */
.ag-card.is-filters-collapsed:not(:has(.js-filter-keep)) > .card-body > .mb-3:first-child {
    margin-bottom: 0 !important;
}

/* Consumption-ledger KPI tiles — one shape for every tile so a row of them lines up
   whatever each figure's length, and the caption always sits on the same baseline. */
.ag-kpi-tile {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 118px;
}

.ag-kpi-tile p {
    line-height: 1.2;
}

.ag-kpi-caption {
    margin-top: auto;
    opacity: 0.6;
    line-height: 1.3;
}

/* Savings composition tiles. Every tile is the SAME fixed size — the kinds are peers, and a
   tile that grows with its label made the band read as a ranking it is not. Because they cannot
   shrink, the track scrolls horizontally instead of reflowing, with arrows that appear only when
   there is something off-screen (wired in agreement/show.js). */
.ag-savings-carousel {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ag-savings-track {
    display: flex;
    flex: 1 1 auto;
    gap: 12px;
    overflow-x: auto;
    /* Smoothness is passed per-scroll from the JS instead of being set here: with
       `scroll-behavior: smooth` on the element, reads of `scrollLeft` return the mid-animation
       position, so the arrows computed each step from a stale offset and stalled after one. */
    scroll-snap-type: x proximity;
    /* The arrows are the affordance here; a scrollbar under five tiles is visual noise.
       Wheel, trackpad, touch and keyboard scrolling all still work. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.ag-savings-track::-webkit-scrollbar {
    display: none;
}

/* Edge fades, so a tile running off the track dissolves instead of being guillotined at a hard
   edge. Done with a mask rather than a gradient overlay in the band's colour: the mask fades
   the CONTENT, so it stays correct wherever this band sits and whatever is behind it.
   Each side is applied only while there is something off-screen that way (toggled in
   agreement/show.js) — fading a tile's border at rest would just look like a rendering fault.

   The two numbers live on the track so the three rules below cannot drift apart:
   `--fade-size` is how far the fade reaches, `--fade-alpha` where it bottoms out. It stops
   short of 0 deliberately — a clipped tile stays faintly legible as "there is more this way"
   instead of vanishing into the band. */
.ag-savings-track {
    --fade-size: 18px;
    --fade-alpha: 0.25;
}

.ag-savings-track--fade-left {
    -webkit-mask-image: linear-gradient(
        to right,
        rgba(0, 0, 0, var(--fade-alpha)) 0,
        #000 var(--fade-size)
    );
    mask-image: linear-gradient(
        to right,
        rgba(0, 0, 0, var(--fade-alpha)) 0,
        #000 var(--fade-size)
    );
}

.ag-savings-track--fade-right {
    -webkit-mask-image: linear-gradient(
        to left,
        rgba(0, 0, 0, var(--fade-alpha)) 0,
        #000 var(--fade-size)
    );
    mask-image: linear-gradient(
        to left,
        rgba(0, 0, 0, var(--fade-alpha)) 0,
        #000 var(--fade-size)
    );
}

.ag-savings-track--fade-left.ag-savings-track--fade-right {
    -webkit-mask-image: linear-gradient(
        to right,
        rgba(0, 0, 0, var(--fade-alpha)) 0,
        #000 var(--fade-size),
        #000 calc(100% - var(--fade-size)),
        rgba(0, 0, 0, var(--fade-alpha)) 100%
    );
    mask-image: linear-gradient(
        to right,
        rgba(0, 0, 0, var(--fade-alpha)) 0,
        #000 var(--fade-size),
        #000 calc(100% - var(--fade-size)),
        rgba(0, 0, 0, var(--fade-alpha)) 100%
    );
}

.ag-savings-tile {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 0 0 240px;
    width: 240px;
    min-height: 96px;
    padding: 14px 16px;
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-md);
    background: var(--color-white);
    scroll-snap-align: start;
}

.ag-savings-label {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.3;
}

.ag-savings-value {
    font-size: var(--text-md);
    font-weight: 900;
    line-height: 1.2;
    text-align: right;
}

.ag-savings-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--slate-200);
    border-radius: 50%;
    background: var(--color-white);
    color: var(--slate-500);
    cursor: pointer;
}

.ag-savings-nav:hover:not(:disabled) {
    color: var(--slate-900);
    border-color: var(--slate-400);
}

/* Kept in the layout while unusable, so reaching an end does not shift the tiles sideways. */
.ag-savings-nav:disabled {
    opacity: 0.35;
    cursor: default;
}

a.card {
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

a.card:hover {
    transform: scale(1.03);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

/* ---------------------------------------------------------
   Profile / project cards (/projects card view)
   Card shell is the shared .ag-card; only what the grid adds lives here.
   --------------------------------------------------------- */
.profile-card {
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.profile-card:hover {
    border-color: var(--blue-200);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
    transform: translateY(-2px);
}

/* Pinned cards keep the tint the legacy grid gave them, on the modern palette. */
.pinned .profile-card {
    border-color: var(--blue-200);
    background: var(--blue-100);
}

.pinned .profile-card .profile-card-pin {
    color: var(--blue-600);
}

.profile-card-cover {
    height: 96px;
    background-color: var(--slate-100);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

/* Two lines, then ellipsis — titles run from "ELM" to a full Arabic company name, and a
   ragged card height across the row reads worse than a clipped title. */
.profile-card-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.35;
    min-height: 2.7em;
}

/* Neutral track: the shared default is a saturated blue that reads as a filled bar, so a
   0%-complete profile looked complete. */
.profile-card .progress--thin {
    --track-color: var(--slate-200);
}

.profile-card-meta svg {
    flex: 0 0 auto;
    color: var(--slate-400);
}

.profile-card-meta a {
    color: var(--blue-600);
}

.profile-card-meta .text-truncate {
    min-width: 0;
}

/* Assignee thumbs are the kanban card's `.x-assigned-avatar` (24px, white rim) — one avatar
   treatment across the app — spaced by the row's `gap-6` instead of overlapping, so each face
   stays readable and carries its own tooltip. */
.profile-card-avatars img {
    object-fit: cover;
}

.profile-card-avatars .more-users {
    width: 24px;
    height: 24px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--slate-500);
    background: var(--slate-100);
    border: 2px solid var(--color-white);
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.profile-card-pin {
    color: var(--slate-400);
    transition: color 0.15s ease;
}

.profile-card-pin:hover,
.profile-card:hover .profile-card-pin {
    color: var(--slate-500);
}

/* =========================================================
   21) Charts
   ========================================================= */

#spend_chart .apexcharts-legend {
    margin-top: 10px;
}

/* Cumulative spend vs expected — sized by its card (it shares a row with a neighbour whose
   height varies) with a floor so a short card still gives the line room, and a ceiling because
   the Daily tab's neighbour runs to six KPI tiles plus three tracks plus the savings band: at
   `height: 100%` the chart followed it to ~1400px, which is a lot of white space for one line.
   Apex reads the parent's clientHeight at render, so the cap SIZES the chart rather than
   clipping an already-drawn SVG. */
.ag-cumulative-chart {
    min-height: 320px;
    max-height: 560px;
}

#cumulative_spend_chart .apexcharts-legend {
    margin-top: 10px;
}

#commitmentChart .apexcharts-legend,
#daily_cost_chart .apexcharts-legend {
    margin-top: 10px;
}

@media (max-width: 1023px) {
    .apexcharts-text tspan {
        font-size: 8px;
    }
}

/* =========================================================
   22) Popups / Modals
   ========================================================= */
.card-modal .modal-dialog.dialog-sm {
    max-width: var(--dialog-sm) !important;
}

.card-modal .modal-dialog.dialog-lg {
    max-width: var(--dialog-lg) !important;
}

.card-modal .modal-dialog.dialog-xl {
    max-width: var(--dialog-xl) !important;
}

/* Maximize icon is removed in small pop ups */
.modal .dialog-sm .modal-header button.maximize {
    display: none !important;
}

#cardModalTabMenuMultiple {
    overflow-y: auto;
}

.card-modal .card-right-panel {
    width: 290px;
    flex-shrink: 0;
    border-bottom-right-radius: var(--radius-lg);
    overflow-y: auto;
}

.card-modal .modal-dialog .modal-header h2 {
    font-weight: 900;
}

/*hide modal maximize button */
.card-modal .modal-dialog.no-maximize .modal-header button.maximize {
    display: none !important;
}

/* The GWS order popup (view / edit / Record actuals — every opener: list, tasks board, agreement
   tabs) and the GWS deal details popup never offer maximize. Keyed on what the popup CONTAINS, so
   no opener has to remember a `no-maximize` data-add-class. */
.card-modal .modal-dialog:has(.gws-order-layout) .modal-header button.maximize,
.card-modal .modal-dialog:has(.gws-deal-view) .modal-header button.maximize {
    display: none !important;
}

.modal .modal-dialog .modal-header button.close,
.modal .modal-dialog .modal-header button.maximize {
    position: static;
    padding: 0;
    top: inherit;
    right: inherit;
    background: none;
    border: 0;
    margin: 0;
    color: var(--slate-500);
}

.modal .modal-dialog .modal-content #cardModalTabMenuMultiple ul,
.card-modal .modal-dialog .modal-content #cardModalTabMenu ul {
    background: none;
    flex-direction: column;
    padding: 10px;
}

.modal .modal-dialog .modal-content #cardModalTabMenuMultiple ul li,
.card-modal .modal-dialog .modal-content #cardModalTabMenu ul li {
    display: block;
    background: none;
    margin: 0 3px;
}

.modal .modal-dialog .modal-content #cardModalTabMenuMultiple ul li a,
.card-modal .modal-dialog .modal-content #cardModalTabMenu ul li a {
    background: none;
    display: flex;
    align-items: center;
    font-size: var(--text-xs);
    color: var(--slate-500);
    font-weight: 700;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    gap: 10px;
    border-color: transparent;
}

.modal .modal-dialog .modal-content #cardModalTabMenuMultiple ul li a.active,
.card-modal .modal-dialog .modal-content #cardModalTabMenu ul li a.active {
    color: var(--blue-700);
    background: var(--color-white);
    font-weight: 700;
}

.card-modal .modal-dialog .modal-content {
    border-radius: var(--radius-lg);
}

.card-modal .modal-dialog.is-maximized {
    max-width: 100% !important;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.is-maximized #cardModalContent {
    height: 100vh;
}

.is-maximized .card-right-panel {
    width: 400px;
}

/* ---------------------------------------------------------------------------
 * Task popup on the profile / project pages only, matched on the container those tabs
 * render inside (#projects-tab-single-screen) so no backend-set class is needed.
 * deal.css scopes with :has() the same way.
 *
 * A narrower right panel so the Information tab gets the room. The two widths
 * are one pair: .card-left-panel-container hard-codes what the other columns
 * reserve (160px tab menu + right panel + 20px slack), so both move together.
 * ------------------------------------------------------------------------- */
body:has(#projects-tab-single-screen) .card-modal .card-right-panel {
    width: 210px;
}

body:has(#projects-tab-single-screen) .card-modal .card-left-panel-container {
    width: calc(100% - 390px);
}

.card-modal .modal-dialog {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    height: 100vh;
    margin-top: inherit;
    margin-bottom: inherit;
    margin-left: auto;
    margin-right: auto;
    padding: 20px 0;
    transform: none;
}

.card-modal .modal-dialog .modal-content {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

.card-modal .card-left-panel {
    overflow-y: auto;
}

.modal-actions-panel {
    position: sticky;
    bottom: 0;
    width: 100%;
    left: 0;
}

@media (max-width: 1023px) {
    .card-modal .modal-dialog .modal-content {
        overflow-y: auto;
    }

    .card-modal .card-right-panel {
        padding-bottom: 20px;
    }

    #cardModalTabMenu,
    .card-modal .card-right-panel {
        width: 100%;
    }

    #cardModalTabMenuMultiple,
    .modal .card-right-panel {
        width: 100%;
    }

    .card-modal .modal-dialog .modal-content #cardModalTabMenu ul {
        display: block;
    }
    .modal .modal-dialog .modal-content #cardModalTabMenuMultiple ul {
        display: block;
    }

    .card-modal .modal-dialog .modal-content #cardModalTabMenu ul li {
        display: inline-block;
    }
    .modal .modal-dialog .modal-content #cardModalTabMenuMultiple ul li {
        display: inline-block;
    }

    .card-modal .card-left-panel {
        max-height: 50%;
    }
}

.card-modal .modal-dialog.dialog-lg > form,
.card-modal .modal-dialog.dialog-xl > form {
    width: 100% !important;
    height: 100% !important;
}

.card-modal .modal-dialog.dialog-sm > form {
    height: auto;
    width: 100%;
    min-height: 250px;
}

/* =========================================================
   23) Custom classes
   ========================================================= */

.x-assigned-user {
    display: inline-block;
}

.x-assigned-avatar {
    width: 24px;
    height: 24px;
    border: 2px solid var(--color-white);
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.card-modal .card-right-panel .x-assigned-user {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.card-modal .card-right-panel .x-assigned-user img {
    width: 25px;
    height: 25px;
}

.card-modal .card-right-panel .x-assign-new,
.card-modal .card-right-panel .x-assign-remove {
    width: 25px;
    height: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.x-assign-new {
    color: var(--blue-600);
    background: var(--blue-100);
    border: 1px dashed var(--blue-200);
}

.x-assign-remove {
    color: var(--red-700);
    background: var(--danger-100);
    border: 1px dashed var(--danger-200);
}

/* Assigned users — overlapping avatar stack */
.x-assigned-stack {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
}

.card-modal .card-right-panel .x-assigned-stack .x-assigned-user {
    margin-left: -8px;
    position: relative;
    border-radius: 50%;
    transition: transform 0.15s ease;
}

.card-modal .card-right-panel .x-assigned-stack .x-assigned-user:first-child {
    margin-left: 0;
}

.card-modal .card-right-panel .x-assigned-stack .x-assigned-user img {
    border: 2px solid var(--color-white);
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.card-modal .card-right-panel .x-assigned-stack .x-assigned-user:hover {
    transform: translateY(-2px);
    z-index: 2;
}

/* Assigned users — sushi / kebab "manage assignees" menu */
.x-assigned-menu {
    width: 25px;
    height: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
    color: var(--slate-500);
    background: var(--slate-100);
    border: 1px solid var(--slate-200);
    border-radius: 50%;
    cursor: pointer;
    transition:
        color 0.15s ease,
        background 0.15s ease,
        transform 0.15s ease;
}

.x-assigned-menu:hover {
    color: var(--blue-600);
    background: var(--blue-100);
    border-color: var(--blue-200);
    transform: scale(1.08);
}

.x-assigned-menu svg {
    width: 16px;
    height: 16px;
}

.card-popover .popover-header {
    margin-top: 3px;
    margin-bottom: 10px;
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-black);
    text-transform: uppercase;
    border: 0;
}

.popover-close {
    padding: 0 5px;
    background: var(--slate-200);
    border-radius: var(--radius-sm);
}

.popover-close .ti-close {
    font-weight: 700;
    font-size: var(--text-xs);
}

/** jconfirm modals **/
.jconfirm.jconfirm-modern .jconfirm-box {
    padding: 10px;
}

/* Danger */
.jconfirm-type-danger.jconfirm-box {
    border-top: 5px solid var(--red-700);
}

/* Info */
.jconfirm-type-info.jconfirm-box {
    border-top: 5px solid var(--blue-700);
}

/* Success */
.jconfirm-type-success.jconfirm-box {
    border-top: 5px solid var(--green-700);
}

/* Warning */
.jconfirm-type-warning.jconfirm-box {
    border-top: 5px solid var(--warning-700);
}

/**jconfirm buttons**/
.jconfirm.jconfirm-modern .jconfirm-box .jconfirm-buttons button {
    height: 34px !important;
    padding: 0 22px !important;
    font-size: 11px !important;
}

/* Select 2 fixes */
.form-group .select2-container:nth-of-type(2) {
    display: none;
}

/* "Rows per page" select2 width (reusable across paginated lists).
   This has to be CSS: select2 swaps the <select> for its own container and does not
   carry the element's inline width across in this build, so a style="width:.." on the
   select sizes only the hidden original. That is why the rule exists at all.

   Two hooks, one size: lists with their own inlined footer use .js-per-page, the
   shared misc/list-pagination footer uses .js-list-per-page, and both render the
   same control so both get the same width. */
.js-per-page + .select2-container,
.js-list-per-page + .select2-container {
    width: 60px !important;
}

/* Breadcrumb */
.page-titles .breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    font-size: 10px;
}

/* the theme paints crumb links the same grey as the dead ones, so nothing said they were clickable */
.page-titles .breadcrumb .breadcrumb-item a:hover,
.page-titles .breadcrumb .breadcrumb-item a:focus {
    color: #263238;
    text-decoration: underline;
}

#header-search svg {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
}

/* Kanban Board */
.kanban .kanban-wrapper .boards .board .board-body {
    border-right: 1px solid;
    border-left: 1px solid;
    border-bottom: 1px solid;
    border-top: 4px solid;
}

.kanban .kanban-wrapper .boards .board .board-body .content {
    overflow-y: auto;
    overflow-x: hidden;
}

.kanban .kanban-card {
    box-shadow: none;
    border: 0;
    border-radius: var(--radius-sm);
    background-color: var(--slate-100);
}

/* Browser scrollbars */
/* Chrome, Edge, Safari */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
}

/* Firefox */
body {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
}

/* General Layout Fixes */
.left-sidebar {
    border-right: 1px solid var(--slate-100);
    box-shadow: 4px 0 8px rgba(0, 0, 0, 0.05);
}

/* Expanded sidebar: drop the gray border under the logo/navbar-header so the
   sidebar reads as one continuous surface (theme default adds a 1px bottom
   border — see themes/default/css/style.css .navbar-header). */
body:not(.mini-sidebar) .topbar .top-navbar .navbar-header {
    border-bottom: 0;
}

/* Expanded sidebar: shrink the reseller logo (theme default caps it at
   50x45 — see themes/default/css/style.css .logo-large). */
body:not(.mini-sidebar) .logo-large {
    max-width: 150px;
    max-height: 30px;
}

.topbar .profile-pic {
    border-left: 0;
}

#main-sidenav {
    padding-right: 0;
}

.mini-sidebar .sidebar-nav #sidebarnav > li > a {
    padding: 12px 15px;
    border-radius: var(--radius-sm);
    border: 0;
    margin: 0 10px;
    width: 50px;
    color: var(--slate-400);
}

@media (max-width: 1023px) {
    .mini-sidebar .sidebar-nav #sidebarnav > li > a {
        width: 100%;
        display: block;
    }
}

.mini-sidebar .sidebar-nav #sidebarnav > li > a:hover {
    background: var(--slate-100);
}

.sidebar-nav > ul > li.active > a,
.mini-sidebar .sidebar-nav #sidebarnav > li.active > a:hover {
    background: var(--blue-700);
    color: var(--color-white) !important;
}

/* Collapsed sidebar: the submenu (ul) detaches into a hover flyout. Style it
   as a floating card — white surface, rounded corners, border and dropdown
   shadow — instead of the flat grey rectangle inherited from the theme. */
.mini-sidebar .sidebar-nav #sidebarnav > li > ul {
    left: inherit;
    right: 0;
    margin-right: 10px;
    width: 230px;
    background: var(--color-white);
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-dropdown);
    padding: 6px;
    overflow: hidden;
}

.mini-sidebar .sidebar-nav #sidebarnav > li > ul li {
    margin: 0;
}

/* Flyout items: full-width pills with comfortable padding, truncated labels,
   and hover/active states matching the rest of the expanded-sidebar UI. */
.mini-sidebar .sidebar-nav #sidebarnav > li > ul li > a {
    display: block;
    padding: 8px 12px !important;
    margin: 1px 0 !important;
    border-radius: var(--radius-sm);
    font-size: 12px !important;
    line-height: 1.3;
    color: var(--slate-600);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mini-sidebar .sidebar-nav #sidebarnav > li > ul li > a:hover {
    background: var(--slate-100);
    color: var(--slate-900);
}

.mini-sidebar .sidebar-nav #sidebarnav > li > ul li > a.active {
    background: var(--blue-100);
    color: var(--blue-700);
    font-weight: 500;
}

.sidebar-nav .has-arrow::after,
.sidebar-nav .active > .has-arrow::after,
.sidebar-nav li > .has-arrow.active::after,
.sidebar-nav .has-arrow[aria-expanded="true"]::after {
    top: 50%;
}

.sidebar-nav .active > .has-arrow::after {
    border-color: var(--color-white);
}

/* Expanded sidebar: smaller labels, and keep the resting icon colour
   the same slate tone used while the sidebar is collapsed. Active items
   keep their white-on-blue pill, matching the collapsed behaviour. */
body:not(.mini-sidebar) .sidebar-nav #sidebarnav > li {
    margin: 7px;
}

body:not(.mini-sidebar) .sidebar-nav #sidebarnav > li > a {
    border-radius: 4px;
}

body:not(.mini-sidebar) .sidebar-nav #sidebarnav > li > a span {
    font-size: 10px;
    color: var(--slate-400);
}

body:not(.mini-sidebar) .sidebar-nav #sidebarnav > li.active > a span {
    color: var(--white);
}

body:not(.mini-sidebar) .sidebar-nav #sidebarnav > li:not(.active) > a svg {
    color: var(--slate-400);
}

/* Expanded sidebar: restyle the open submenu (ul.collapse) so its items match
   the compact top-level pills. A subtle guide line ties each child back to its
   parent; items get smaller labels, slate resting colour, hover and active
   states consistent with the rest of the expanded sidebar. */
body:not(.mini-sidebar) .sidebar-nav #sidebarnav > li > ul.collapse,
body:not(.mini-sidebar) .sidebar-nav #sidebarnav > li > ul.collapse.in {
    position: relative;
    padding: 2px 0 4px 28px;
    margin: 2px 0 4px 12px;
    border-left: 1px solid var(--slate-200);
}

body:not(.mini-sidebar) .sidebar-nav #sidebarnav > li > ul.collapse li {
    margin: 0;
}

.sidebar-nav #sidebarnav > li > ul li > a {
    font-size: 11px !important;
    padding: 6px 10px !important;
    margin: 1px 6px 1px 0 !important;
    position: relative;
    border-radius: var(--radius-sm);
    font-weight: 400;
    line-height: 1.3;
    color: var(--slate-400);
}

/* Connector dot linking each item to the guide line. */
body:not(.mini-sidebar)
    .sidebar-nav
    #sidebarnav
    > li
    > ul.collapse
    li
    > a::before {
    content: "";
    position: absolute;
    left: -22px;
    top: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--slate-200);
    transform: translateY(-50%);
    transition: background-color 0.15s ease;
}

body:not(.mini-sidebar)
    .sidebar-nav
    #sidebarnav
    > li
    > ul.collapse
    li
    > a:hover {
    background: var(--slate-100);
    color: var(--slate-600);
}

body:not(.mini-sidebar)
    .sidebar-nav
    #sidebarnav
    > li
    > ul.collapse
    li
    > a:hover::before {
    background: var(--slate-400);
}

body:not(.mini-sidebar)
    .sidebar-nav
    #sidebarnav
    > li
    > ul.collapse
    li
    > a.active {
    background: var(--blue-100);
    color: var(--blue-700);
    font-weight: 500;
}

body:not(.mini-sidebar)
    .sidebar-nav
    #sidebarnav
    > li
    > ul.collapse
    li
    > a.active::before {
    background: var(--blue-700);
}

.mini-sidebar .top-navbar .navbar-header {
    border-bottom: 0;
}
/* top header */
.topbar .navbar-collapse {
    border-bottom: 1px solid var(--slate-100);
    box-shadow: 4px 0 8px rgba(0, 0, 0, 0.05);
}

.top-search-container .magnifier {
    display: block;
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
}

.top-search-container input {
    padding-left: 40px;
}

.topbar .navbar-light .navbar-nav .nav-item > a.nav-link {
    color: var(--slate-400) !important;
}

/* Table */

.legend-marker {
    width: 8px;
    height: 8px;
}

.icon-label-md {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-label-lg {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Custom Charts */

.custom-progress {
    border-radius: var(--radius-pill);
    overflow: hidden;
    background-color: var(--slate-300);
}

.custom-progress-lg {
    height: 20px;
}

/* Utilization tracks (Overall / Months tabs). Shorter than -lg: three of them stack in one
   card, and at 20px the bars carried more weight than the figures above them. */
.custom-progress-md {
    height: 14px;
}

/* Utilization row headers (the block above each track, Overall / Months tabs).
   The title's SIZE is not settable from here: the markup's `text-md` / `font-weight-black`
   utilities carry `!important`, so it stays 16px/900 (`.ag-card h3`'s 24px never reached it
   either). Only the leading is ours to take — `.ag-card h3` sets a 30px line-height meant for
   a real card title, which left a gap between the title and the "Plan:" line under it. */
.ag-card .ag-util-row h3 {
    line-height: 1.25;
}

/* The separator before the status pill was `text-md` — 16px next to 10px text. */
.ag-util-row .ag-util-sep {
    font-size: var(--text-sm);
    line-height: 1;
}

/* 8px as specified. Below the 10px `--text-xs` floor the rest of the scale uses, so the
   tracking is opened up to keep the uppercase forms apart at this size. */
.ag-util-row .ag-util-metric-label {
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.5;
    white-space: nowrap;
}

.ag-util-row .ag-util-metric-value {
    font-size: var(--text-14);
    line-height: 1.25;
    white-space: nowrap;
}

/* 20px between three groups of figures overflowed the half-width card before it wrapped. */
.ag-util-row .ag-util-metrics {
    gap: 14px;
}

.custom-progress .progress-bar {
    opacity: 0.8;
    border-radius: var(--radius-pill);
}

.progress-marker {
    position: absolute;
    top: 0;
    width: 4px;
    height: 100%;
    /* transform: translateX(-50%); */
    z-index: 2;
    border-radius: 2px;
}

.expected-marker {
    background-color: var(--slate-900);
}

.projected-marker {
    background-color: var(--warning-700);
}

/* A marker on a thin (5px) bar — e.g. the detail header's consumption progress —
   overhangs the track so it stays legible at that height. */
.progress-marker--thin {
    top: -3px;
    height: 11px;
}

/* Custom Yes/No Toggle */
.toggle-container {
    height: 35px !important;
}

.toggle-label {
    border: 2px solid transparent !important;
}

[type="radio"] + label:before,
[type="radio"] + label:after {
    display: none;
}

.toggle-container input[value="1"]:checked + .label-yes {
    color: var(--green-700);
    background-color: var(--success-100);
    border-color: var(--green-700) !important;
}

.toggle-container input[value="0"]:checked + .label-no {
    color: var(--red-700);
    background-color: var(--danger-100);
    border-color: var(--red-700) !important;
}

/* Sticky footer- google registration/MS & supprt */
.sticky-total-footer {
    margin-bottom: 15px;
}

#sticky-total-display {
    color: var(--blue-700) !important;
}
/* =========================================================
   Customer detail — per-tab action bar
   Host for the ACTIVE TAB's own buttons, retargeted here by
   NXAJAX.updateMoveElement so they no longer replace the
   customer's page header. Collapses to nothing on a tab that
   moves no bar, so those tabs gain no empty strip.
   ========================================================= */
/* =========================================================
   Customer detail — per-tab action panel
   A card between the tab strip and the tab's content, naming the active tab on the left
   with that tab's own buttons on the right — the shape the Collaborators panel already
   has. Hidden until a tab actually moves a bar in, so the tabs that carry none (Info,
   Commercial, GCP/GWS Agreements, Collaborators, which brings its own titled card) gain
   no empty strip.
   ========================================================= */
.customer-tab-actions--empty {
    display: none !important;
}
/* Full-bleed: flush with the tab's content card below, not inset from it. */
.customer-tab-actions {
    padding: 0 0 6px;
}
/* The header is the card's ONLY child, so it must carry the card's full radius — its own
   background was painting square corners over the rounded ones. No bottom rule either:
   that divider separates a header from a body, and this card has none. */
.customer-tab-actions .card {
    border: 1px solid var(--slate-200, #e2e8f0);
    border-radius: 8px;
}
.customer-tab-actions .card-header {
    background: #ffffff;
    border-radius: 8px;
    border-bottom: 0;
}
/* The moved bar is a bootstrap column of its own; un-columned here so it sizes to its
   buttons instead of the grid fraction it was authored for. */
.customer-tab-actions #list-page-actions-container {
    max-width: 100% !important;
    flex: 0 0 auto !important;
    padding: 0 !important;
}
.customer-tab-actions #list-page-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
/* The search field ships with a bottom margin for a page-header context; inside the panel
   it would knock the buttons out of line. */
.customer-tab-actions #list-page-actions .form-group,
.customer-tab-actions #list-page-actions .input-group {
    margin-bottom: 0 !important;
}

/* Agreement Indicator Icons */
.indicator-icon-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    margin-right: 6px;
    flex-shrink: 0;
}

.indicator-icon-box i,
.indicator-icon-box svg {
    width: 14px;
    height: 14px;
    stroke-width: 2.5px;
}

.bg-indicator-orange {
    background-color: var(--warning-100);
    color: var(--warning-700);
}
.bg-indicator-blue {
    background-color: var(--blue-100);
    color: var(--blue-600);
}
.bg-indicator-purple {
    background-color: var(--purple-100);
    color: var(--purple-600);
}
.bg-indicator-green {
    background-color: var(--success-100);
    color: var(--green-700);
}
.bg-indicator-grey {
    background-color: var(--slate-100);
    color: var(--slate-600);
}

/* Timeline Styles */
.timeline-bar-wrapper {
    height: 60px;
    position: relative;
    display: flex;
    align-items: center;
}

.timeline-track {
    height: 4px;
    background-color: #f1f5f9;
    width: 100%;
    border-radius: 2px;
}

.timeline-track.actual {
    background-color: #0f172a;
}

.timeline-phase {
    position: absolute;
    height: 100%;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.phase-text {
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #cbd5e1;
    background: white;
    padding: 0 4px;
    margin-bottom: 24px;
    position: absolute;
    top: 0;
}

.phase-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: white;
    border: 2px solid #cbd5e1;
    position: absolute;
    z-index: 2;
}

.phase-dot.start {
    left: -6px;
}

.phase-dot.end {
    right: -6px;
}

.timeline-phase.migration .phase-dot {
    border-color: #cbd5e1;
}

.timeline-phase.migration .phase-dot.end {
    border-color: #3b82f6;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
}

.timeline-phase.actual-migration .phase-dot {
    background-color: #0f172a;
    border-color: #0f172a;
}

.timeline-phase.actual-migration .phase-dot.end {
    background-color: white;
    border-color: #f97316;
    box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.2);
}

.timeline-phase.actual-consumption .phase-dot.end {
    background-color: white;
    border-color: #3b82f6;
}

.timeline-label {
    position: absolute;
    font-size: 10px;
    font-weight: bold;
    color: #64748b;
    top: -15px;
}

.start-label {
    left: 0;
}

.end-label {
    right: 0;
}

.legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
}

.cursor-pointer {
    cursor: pointer;
}

/* GCP Consumption fund POC - POC & DAF */
#project-dropdown {
    position: absolute;
    width: 100%;
    z-index: 9999;
    border: 1px solid var(--slate-300);
    background: #fff;
}

.billing-caret-icon {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: var(--slate-300);
    pointer-events: none;
}

.project-caret-icon {
    position: absolute;
    right: 0.9375rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--slate-300);
    pointer-events: none;
}

.project-opt,
.billing-opt,
.billing-chip {
    background: var(--slate-300);
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.billing-card,
.delivery-billing-card {
    border-width: 0.125rem;
    border-style: solid;
}

.delivery-project-card-trigger.form-control,
.project-card-trigger.form-control {
    height: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.selected-billing-container {
    display: flex;
    flex-wrap: wrap;
    flex: 1;
}

#billing-options-container,
#delivery-billing-opts-wrapper {
    max-height: 15.625rem;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.25rem;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
}

.opt-delivery-billing-item,
.billing-opt {
    min-height: 3.125rem;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
    word-break: break-all;
}

.cursor-pointer {
    cursor: pointer;
}

/* Locks a block's controls — e.g. a read-only modal; select2/chips ignore a disabled fieldset */
.pointer-events-none {
    pointer-events: none;
}

/* List-table footer cell that only hosts the "Show more" button: collapse it while there is
   no button (last page), so the table doesn't end in an empty white row. */
.load-more-cell:not(:has(.loadmore-button-container)) {
    padding: 0;
    border: 0;
}

/* Reports GCP list */
.accordion-indicator {
    transition: transform 0.3s ease;
}

[aria-expanded="true"] .accordion-indicator,
.billing-toggle-icon:not(.collapsed) .accordion-indicator {
    transform: rotate(180deg);
    transition: transform 0.3s ease;
}

/* GWS popup section header — kill the UA focus ring on click; keyboard ring stays,
   same treatment as .btn above. */
.gws-section-toggle:focus {
    outline: none;
    box-shadow: none;
}

.gws-section-toggle:focus-visible {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25);
}

.list-page-actions {
    gap: 8px;
}

/* Alert Boxes */
.alert {
    font-size: 11px;
}

.alert-success {
    border-color: var(--green-700);
}

.alert-warning {
    border-color: var(--warning-400);
}

.alert-info {
    border-color: #048bb6;
}
/* Switch toggle */
.switch label input[type="checkbox"]:checked + .lever.switch-col-light-blue {
    background-color: var(--blue-600);
}

/* no results found state */
.dropdown-no-results-found {
    background-color: var(--red-700);
}

.right-sidepanel-menu {
    color: var(--blue-700);
    font-size: var(--text-sm);
    font-weight: 400;
    display: inline-block;
    text-align: center;
    padding: 2px 5px;
    border-radius: var(--radius-sm);
}

.right-sidepanel-menu.active {
    color: var(--color-white);
    background: var(--blue-700);
}

.u-img {
    width: 80px;
    height: 80px;
    overflow: hidden;
}

.u-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.list-table-wrapper {
    min-height: auto;
}

.reminders-side-panel {
    right: -400px;
}

.reminders-side-panel.shw-rside {
    width: 400px;
    right: 0;
}

.timeline .x-description {
    display: inline-block;
}
/* NAV TABS */
.nav-tabs {
    gap: 10px;
    border-bottom: 0;
}

.nav-tabs li a.nav-link {
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: 700;
    padding: 7px 17px;
    color: var(--slate-600);
    border-color: var(--slate-200);
    background-color: var(--blue-100);
}

.nav-tabs li a.nav-link.active {
    border-color: var(--blue-700);
    background-color: var(--blue-700);
    color: var(--color-white);
}

/** Date Time Picker **/
.datepicker-days {
    overflow-x: auto;
}

.datepicker table tr td,
.datepicker table tr th {
    border-radius: 0;
}

.datepicker table thead th:first-child,
.datepicker table thead th:first-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.datepicker table thead th:last-child,
.datepicker table thead th:last-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.timepicker {
    display: flex;
    justify-content: center;
}

.bootstrap-timepicker-widget.dropdown-menu.open {
    display: none !important;
    visibility: hidden;
}

.shadow-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 15%;
    border-bottom-left-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.2) 0%,
        rgba(255, 255, 255, 1) 100%
    );
}

/* Activity Timeline */
.timeline .x-title .x-title-details > span {
    display: block;
}

.timeline .x-description {
    color: var(--blue-700);
    background-color: #dbeafe;
    border-color: var(--blue-200);
}
/* --- FLATPICKR CUSTOM STYLING --- */
.flatpickr-calendar {
    font-size: var(--text-xs) !important;
    z-index: 99999 !important;
}

.flatpickr-wrapper {
    position: relative;
    display: block;
    width: 100%;
}

.flatpickr-calendar.static {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) scale(0.9) !important;
    transform-origin: top center !important;
    margin-top: 0.25rem;
    display: block;
}
/* --- FLATPICKR CUSTOM STYLING --- */

/* --- Spinner --- */
.custom-spinner {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    position: relative;

    background: conic-gradient(
        from 0deg,
        #0d47a1,
        #1e88e5,
        #64b5f6,
        transparent 70%
    );

    -webkit-mask: radial-gradient(farthest-side, transparent 70%, black 71%);
    mask: radial-gradient(farthest-side, transparent 70%, black 71%);

    animation: spin 1s linear infinite;
}

@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}
.no-results-container {
    min-height: 400px !important;
}

.select2-container--bootstrap
    .select2-selection--multiple
    .select2-search--inline
    .select2-search__field {
    padding-top: 8px !important;
    font-size: 11px !important;
}

/* Tags filter panel: the "Added By" multi-select sat 5px taller than the panel's other fields
   (inline-search padding above). Bring it to the shared 31px form-control-sm height. */
#sidepanel-filter-tags .select2-selection--multiple .select2-search--inline {
    padding: 0 !important;
}
#sidepanel-filter-tags .select2-selection--multiple .select2-search--inline .select2-search__field {
    height: 29px !important;
    margin: 0;
    padding-top: 0 !important;
}

.bg-transparent {
    background: none !important;
    background-color: transparent !important;
}

.gcp-board {
    min-height: auto;
}

/* Reset height if these specific forms exist */
.card.min-h-300:has(.settings-section-body),
.card.min-h-300:has(#settingsFormEmailGeneral),
.card.min-h-300:has(#fix-form-email-templates),
.card.min-h-300:has(#settingsFormClients),
.card.min-h-300:has(#settingsFormProjects),
.card.min-h-300:has(#settingsFormProjectsStaff),
.card.min-h-300:has(#settingsFormProjectsClient),
.card.min-h-300:has(#settings-projects-automation),
.card.min-h-300:has(#task-stages),
.card.min-h-300:has(#task-priorities),
.card.min-h-300:has(#ticket-stages),
.card.min-h-300:has(#settingsFormTickets),
.card.min-h-300:has(#lead-stages),
.card.min-h-300:has(#settingsFormMilestones),
.card.min-h-300:has(#milestone-stages),
.card.min-h-300:has(#demo-taxrate-addrow),
.card.min-h-300:has(#settingsFormInvoices),
.card.min-h-300:has(#settingsFormExpenses),
.card.min-h-300:has(#settingsFormSubscriptions),
.card.min-h-300:has(#settingsFormTags),
.card.min-h-300:has(#tags-table-wrapper),
.card.min-h-300:has(#settingsFormFilesGeneral),
.card.min-h-300:has(#settingsFormFolders),
.card.min-h-300:has(#demo-folder-addrow),
.card.min-h-300:has(#settingsFormEstimates),
.card.min-h-300:has(#settings-estimates-automation),
.card.min-h-300:has(#settingsFormProposals),
.card.min-h-300:has(#settings-proposals-automation),
.card.min-h-300:has(#settingsFormContracts),
.card.min-h-300:has(#categories-table-wrapper),
.card.min-h-300:has(#demo-foo-addrow),
.card.min-h-300:has(#demo-webform-addrow) {
    min-height: auto !important;
}

/* Strip the shared settings card-body padding for the task/lead status tables so they sit flush.
   The no-results-container selector covers the empty state, where the id'd table is not rendered. */
#embed-content-container.card-body:has(#task-stages),
#embed-content-container.card-body:has(#task-priorities),
#embed-content-container.card-body:has(#ticket-stages),
#embed-content-container.card-body:has(#lead-stages),
#embed-content-container.card-body:has(#milestone-stages),
#embed-content-container.card-body:has(#demo-taxrate-addrow),
#embed-content-container.card-body:has(#tags-table-wrapper),
#embed-content-container.card-body:has(#demo-folder-addrow),
#embed-content-container #tags-table-wrapper > .card-body,
#embed-content-container.card-body:has(#categories-table-wrapper),
#embed-content-container.card-body:has(.no-results-container) {
    padding: 0;
}

/* Remove padding/background for the email queue and log table parent */
.card:has(#demo-email-addrow) .card-body,
.card:has(#demo-foo-addrow) .card-body,
.card:has(#demo-webform-addrow) .card-body,
.card:has(#file-folders-table) .card-body,
.card:has(.webmail-templates-table .no-results-container) .card-body {
    padding: 0 !important;
    background: none !important;
    background-color: transparent !important;
}

/* Alerts modal */
.alert-recipient-row.is-hidden {
    display: none !important;
}

/* switch-emphasized — both states look "on" (blue).
   Use for binary-mode pickers where each side is a valid choice
   (Invoice Month / Daily, Percentage / Absolute). */
.switch.switch-emphasized .slider,
.switch.switch-emphasized input:checked + .slider {
    background: var(--blue-700) !important;
    background-color: var(--blue-700) !important;
}

.switch.switch-emphasized .slider::before,
.switch.switch-emphasized input:checked + .slider::before {
    background: var(--color-white) !important;
    background-color: var(--color-white) !important;
}

/* switch-standard — true on/off boolean. Off is muted, on is blue.
   Use for togglable booleans (Include Credits, etc.). */
.switch.switch-standard .slider {
    background-color: var(--slate-200) !important;
    border-color: var(--slate-200) !important;
}

.switch.switch-standard .slider::before {
    background-color: var(--color-white) !important;
}

.switch.switch-standard input:checked + .slider {
    background-color: var(--blue-700) !important;
    border-color: var(--blue-700) !important;
}

.switch.switch-standard input:checked + .slider::before {
    background-color: var(--color-white) !important;
}

/* Make #commonModalBody a flex column whenever an injected partial wants its action
   footer pinned to the bottom regardless of content height. */
.card-modal
    .modal-dialog
    .modal-content:has(.flex-modal-body)
    #commonModalBody {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

#dashboard-team-events {
    overflow-y: auto;
}

/* Zubaida (skip execution checkbox) */
/* visible checkbox box */
.custom-control-indicator {
    background-color: #f1f5f9 !important;
    border: 1px solid #868d93 !important;
}

/* checked state */
.custom-control-input:checked ~ .custom-control-indicator {
    background-color: #1565c0 !important;
    border-color: #1565c0 !important;
}
/* End skip execution checkbox */

#cardModalTabMenu {
    width: 160px;
}

/* Phosphor icons inside task card meta rows / headings — align like the legacy font icons */
.card-modal .card-right-panel .x-element > svg {
    vertical-align: middle;
    margin-bottom: -3px;
    margin-right: 4px;
    flex-shrink: 0;
}

.card-modal .card-left-panel .x-heading > svg {
    vertical-align: middle;
    margin-right: 5px;
}

/* ============================================================
   Generic, reusable utilities
   Small primitives the bundled Bootstrap 4 build / theme lack.
   Grouped by concern; pixel sizes use a `px` suffix to avoid
   clashing with the theme's percentage `.w-6` / `.w-18` etc.
   ============================================================ */

/* Position offsets */
.top-0 {
    top: 0;
}
.top-100 {
    top: 100%;
}
.top-50 {
    top: 50%;
}
.right-0 {
    right: 0;
}
.bottom-0 {
    bottom: 0;
}

/* Fixed width / height (px) */
.w-160 {
    width: 160px;
}
.w-400 {
    width: 400px;
    max-width: 92vw;
}
.w-6px {
    width: 6px;
}
.h-6px {
    height: 6px;
}
.w-18px {
    width: 18px;
}
.h-18px {
    height: 18px;
}
.w-70px {
    width: 70px;
}
.h-450 {
    height: 450px !important;
}

/* Min / max sizing (flexbox + scroll helpers) */
.min-w-0 {
    min-width: 0;
}
.min-w-240px {
    min-width: 240px;
}
.min-h-0 {
    min-height: 0;
}
.min-h-200 {
    min-height: inherit !important;
}
.max-h-600 {
    max-height: 600px;
}

/* Overflow */
.overflow-y-auto {
    overflow-y: auto;
    overflow-x: hidden;
}

/* Misc */
.outline-none {
    outline: none !important;
    box-shadow: none !important;
}

/* Pull an absolutely-positioned badge onto the top-right corner of its host. */
.translate-corner {
    transform: translate(35%, -35%);
}
.translate-y-center {
    transform: translateY(-50%);
}

/* Clamp text to 2 lines with an ellipsis. */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ============================================================
 * APP SPINNER — single source of truth for loading spinners.
 * Used by the <x-spinner> component and replaces the legacy
 * /public/images/loading.gif spinner across all tables, screens
 * and preloaders (driven by the AJAX loading-target system).
 * ============================================================ */
.app-spinner {
    display: inline-block;
    width: 32px;
    height: 32px;
    border: 3px solid rgba(66, 133, 244, 0.2);
    border-top-color: #4285f4;
    border-radius: 50%;
    box-sizing: border-box;
    vertical-align: middle;
    animation: app-spinner-spin 0.7s linear infinite;
}
.app-spinner--sm {
    width: 20px;
    height: 20px;
    border-width: 2px;
}
.app-spinner--md {
    width: 32px;
    height: 32px;
    border-width: 3px;
}
.app-spinner--lg {
    width: 48px;
    height: 48px;
    border-width: 4px;
}

.app-spinner-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.app-spinner--center {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 24px 0;
}
.app-spinner-label {
    color: #5f6368;
    font-size: 0.875rem;
}

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

/* ------------------------------------------------------------
 * Drop the legacy GIF and render the CSS spinner everywhere the
 * AJAX framework toggles these classes (tables, tabs, screens).
 * custom.css loads after the theme stylesheet, so these win.
 * ------------------------------------------------------------ */
.loading:after,
.loading-before:before,
.loading-before-centre:before,
.loading-tabs:before,
.loading-placeholder:after,
.loader-loading:after {
    content: "";
    background-image: none;
    width: 32px;
    height: 32px;
    border: 3px solid rgba(66, 133, 244, 0.2);
    border-top-color: #4285f4;
    border-radius: 50%;
    box-sizing: border-box;
    animation: app-spinner-spin 0.7s linear infinite;
    /* Be self-sufficient: don't rely on the theme cascade for stacking.
       Positioned + raised above the table/tab content so the spinner is
       never hidden behind the table-responsive container. */
    position: absolute;
    z-index: 1000;
}

/* The loading classes are toggled on the table/tab wrappers, so the
   absolutely-positioned spinner needs a positioned ancestor to anchor to. */
.loading,
.loading-before,
.loading-before-centre,
.loading-tabs,
.loading-placeholder,
.loader-loading {
    position: relative;
}

/* Re-centre the spinner now that it is a fixed 32px box. */
.loading:after {
    left: calc(50% - 16px);
    top: calc(50% - 16px);
}
.loading-before-centre:before,
.loading-tabs:before {
    left: calc(50% - 16px);
}
.loading-before:before {
    left: 0;
}
.loading-placeholder:after {
    width: 20px;
    height: 20px;
    border-width: 2px;
}

/* Reserves the tab panel height so the page doesn't jump while a tab loads. */
.agreement-tab-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
}

/*******************
Login page
*******************/
.login-shell {
    min-height: calc(100vh - 50px);
}
.login-card {
    max-width: 1100px;
    min-height: 560px;
}
.login-panel {
    width: 440px;
    flex-shrink: 0;
    border-radius: 15px;
    padding: 45px 60px;
}
.login-google-btn {
    width: 44px;
    height: 44px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.login-continue-btn {
    min-width: 160px;
}
.login-visual {
    display: flex;
}
/* Hide the product image and show only the centered login block below 1024px */
@media (max-width: 1023px) {
    .login-visual {
        display: none;
    }
    .login-card {
        max-width: 440px;
        min-height: auto;
        justify-content: center;
        margin-left: auto;
        margin-right: auto;
    }
    .login-panel {
        width: 100%;
        padding: 35px 28px;
    }
}

/* Expired billing cards: dim with a semi-transparent white overlay */
.card-expired {
    position: relative;
}

.card-expired::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.55);
    border-radius: inherit;
    pointer-events: none;
    z-index: 2;
}

/* Pagination */

nav > ul.pagination {
    gap: 8px;
    /* Bootstrap leaves 1rem under a .pagination. In a footer row that is `d-flex
       align-items-center`, flex centres the MARGIN box, so that phantom 16px pushed the list
       up and the "Rows per page" control down beside it — the two read as misaligned.
       `.table-responsive .pagination` already zeroes it for the footers that sit inside the
       scroller; these (GWS Deals / Console Sync / GWS Agreements) render their <nav> outside
       it, so they never picked that up. Zero is the norm here, not an exception. */
    margin-bottom: 0;
}

nav > ul.pagination li.page-item .page-link {
    border-radius: 4px;
    border-color: var(--slate-200);
    background-color: var(--white);
    padding-left: 14px;
    padding-right: 14px;
}

nav > ul.pagination li.page-item:first-child .page-link,
nav > ul.pagination li.page-item:last-child .page-link {
    border-radius: 4px;
    border: 0;
    border-color: transparent;
    background-color: transparent;
}

nav > ul.pagination li.page-item.active .page-link {
    background-color: var(--blue-700);
    color: var(--white);
}

/* ============================================================================
 * ACM-8 — RBAC role detail (Filament-Shield-style permission grid)
 * ============================================================================ */
.rbac-detail-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 4px 0 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid #eef2f7;
}
.rbac-title {
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}
.rbac-title .label {
    font-size: 11px;
}
.rbac-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}
.rbac-info-grid .form-group {
    margin-bottom: 0;
}
.rbac-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.rbac-section-label {
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
    font-weight: 700;
}
.rbac-card {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    margin-bottom: 16px;
    overflow: hidden;
    background: #fff;
}
.rbac-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 16px;
    background: #f8fafc;
    border-bottom: 1px solid #eef2f7;
}
.rbac-card-head .group-name {
    font-weight: 600;
    font-size: 14px;
    color: #0f172a;
}
.rbac-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
    padding: 16px;
    align-items: start;
}
.rbac-cell {
    border: 1px solid #eef2f7;
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #fff;
}
.rbac-cell-label {
    font-weight: 500;
    font-size: 13px;
    color: #1e293b;
}
/* On/off permissions: label left, switch right, like the Profiles toggle cards */
.rbac-cell-inline {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background: var(--slate-50, #f8fafc);
}
.rbac-info-toggle {
    grid-column: 1 / -1;
}
.rbac-cell-inline .perm-switch {
    margin-bottom: 0;
}
.roles-action-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.rbac-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.rbac-controls select {
    max-width: 100%;
}
.rbac-controls .rbac-level {
    flex: 1 1 150px;
}
/* Wide enough for "Choose scope · defaults to Own"; wraps under the level in narrow cells */
.rbac-controls .rbac-scope {
    flex: 1 1 260px;
}

/* iOS-style toggle for boolean/scope capabilities + select-all */
.perm-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    flex: 0 0 auto;
}
.perm-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
}
.perm-slider {
    position: absolute;
    inset: 0;
    cursor: pointer;
    background: #cbd5e1;
    border-radius: 22px;
    transition: 0.2s;
}
.perm-slider:before {
    content: "";
    position: absolute;
    height: 16px;
    width: 16px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: 0.2s;
}
.perm-switch input:checked + .perm-slider {
    background: var(--blue-700, #2563eb);
}
.perm-switch input:checked + .perm-slider:before {
    transform: translateX(18px);
}
.perm-switch input:disabled + .perm-slider {
    opacity: 0.45;
    cursor: not-allowed;
}
.rbac-selectall {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #475569;
    font-weight: 600;
}
.rbac-scope-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #64748b;
}
.rbac-scope-wrap.is-muted {
    opacity: 0.5;
}

/* Roles settings list filter bar — pin the select2 dropdown widths. In this horizontal
   flex row select2's width:'resolve' strategy collapses the containers to ~0, so force
   an explicit width (overrides select2's inline width) and let each label show. */
.js-roles-filter-form .select2-container {
    width: 180px !important;
}
.js-roles-filter-form select[data-filter="sort"] + .select2-container {
    width: 200px !important;
}

/* =========================================================
   Billing Tracker — expandable row detail (design preview)
   ========================================================= */
/* Keyed on the component's own classes, not on each table's id. The `bt-*` / `tracker-*`
   classes are used by exactly the tables that opt into this pattern (billing tracker, the
   agreement Billing tab, GWS deals + orders), so an id list added nothing except a step to
   forget when a new surface adopts it — which is how the agreement tab first shipped without
   a rotating chevron. */
.bt-toggle {
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    color: #4338ca;
}
.bt-toggle .bt-caret {
    display: inline-flex;
    align-items: center;
    transition: transform 0.15s ease;
}
.bt-toggle.is-open .bt-caret {
    transform: rotate(90deg);
}
.bt-toggle:focus,
.bt-toggle:active {
    outline: none;
    box-shadow: none;
}
.tracker-row.is-expanded > td {
    background-color: #eef2ff;
}
.tracker-detail-row > .bt-detail-cell {
    padding: 0;
    background-color: #f8fafc;
    border-bottom: 2px solid #e2e8f0;
}
/* Keep the detail area (tabs + nested sub-tables) from picking up the
   table-hover highlight. Bootstrap's `.table-hover tbody tr:hover` is a
   descendant selector, so it otherwise grays both the detail row and every
   nested sub-table row when the cursor is over the tabs or panel content. */
.table-hover tbody tr.tracker-detail-row:hover,
.table-hover tbody tr.tracker-detail-row:hover > .bt-detail-cell,
.table-hover .bt-detail .bt-subtable tbody tr:hover {
    background-color: transparent;
}
.table-hover tbody tr.tracker-detail-row:hover > .bt-detail-cell {
    background-color: #f8fafc;
}
.bt-detail .bt-count {
    display: inline-block;
    min-width: 18px;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 9999px;
    background-color: #e2e8f0;
    color: #475569;
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
}
.bt-detail .tab-btn.btn-primary .bt-count {
    background-color: rgba(255, 255, 255, 0.25);
    color: #fff;
}
.bt-detail .bt-subtable {
    background-color: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
}

/* ---------------------------------------------------------------------------
   Agreement > Billing tab only (#billing-setup-table). The registry keeps its
   original unbounded panels; these rules are scoped so reverting one screen
   never changes the other.
   --------------------------------------------------------------------------- */
#billing-setup-table .bt-detail .bt-panel:not(.d-none) {
    max-height: 360px;
    overflow: auto;
    background-color: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}
#billing-setup-table .bt-detail .bt-subtable {
    border: 0;
    border-radius: 0;
    overflow: visible;
}
#billing-setup-table .bt-detail .bt-subtable thead th {
    /* Pinned to the panel, not the page. Kept under the outer table's own
       .sticky-row (z-index 1) so the two headers never paint over each other. */
    position: sticky;
    top: 0;
    z-index: 0;
}

/* ---------------------------------------------------------------------------
   Billing Tracker (#billing-tracker-table) — an expanded row's sub-table header
   stays pinned while its rows scroll. The scroll container is the outer
   .table-responsive (max-height: 100vh); the sub-table's own overflow:hidden
   would otherwise become the sticky element's scroll box and pin it to nothing.
   The page scrolls too, so billing-tracker.js offsets the pin below the fixed
   topbar (--bt-sticky-top) and flags pinned headers (.is-header-pinned).
   The outer header is not sticky here, so the two cannot collide.
   --------------------------------------------------------------------------- */
#billing-tracker-table .bt-detail .bt-subtable {
    overflow: visible;
    /* A collapsed-border table ignores border-radius, so with nothing clipping it any more its
       square white background showed in the corners. Separate (spacing 0) honours the radius. */
    border-collapse: separate;
    border-spacing: 0;
}
#billing-tracker-table .bt-detail .bt-subtable thead th {
    position: sticky;
    /* billing-tracker.js sets this to how much of the box is hidden under the topbar/off-screen. */
    top: var(--bt-sticky-top, 0px);
    /* Above the sub-table's rows (status pills, the active tab button's z-index 1). */
    z-index: 2;
    /* Separate borders no longer merge Bootstrap's th top border into the table's own. */
    border-top: 0;
}
/* overflow: visible stops the table clipping its corners; round the header's own. */
#billing-tracker-table .bt-detail .bt-subtable thead th:first-child {
    border-top-left-radius: 8px;
}
#billing-tracker-table .bt-detail .bt-subtable thead th:last-child {
    border-top-right-radius: 8px;
}
/* Once pinned, rows scroll beneath the header and would show through a rounded corner. */
#billing-tracker-table .bt-detail .bt-subtable.is-header-pinned thead th {
    border-radius: 0;
}
/* …and the outer box clips its content to its own rounded corners, so square those too while a
   header is pinned against its top edge. */
.table-responsive.bt-has-pinned-header {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* Shown in place of a table whose collection is empty — a header row over blank space reads
   as a broken table, not as "none". Only the Billing tab's partial emits this. */
.bt-detail .bt-panel-empty {
    margin: 0;
    padding: 28px 16px;
    text-align: center;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.bt-detail .bt-subtable thead th {
    background-color: #f4f6fb;
    border-bottom: 1px solid #e2e8f0;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 600;
    /* Left by default so each label sits over its cells; numeric columns opt into .text-right. */
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}
.bt-detail .bt-subtable td {
    vertical-align: middle;
    border-top: 1px solid #f1f5f9;
}
.bt-detail .bt-subtable tbody tr:first-child td {
    border-top: none;
}
.bt-detail .bt-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    background-color: #2563eb;
}
.bt-detail .bt-pill-exclusive {
    background-color: #ede9fe;
    color: #6d28d9;
    font-size: 11px;
    font-weight: 600;
}
.bt-detail .bt-unspecified-row td {
    background-color: #fffbeb;
}

.table-responsive:hover .bt-detail .bt-unspecified-row td {
    background-color: #fffbeb;
}

/* A project listed under a billing ID that is no longer its home — muted, so the
   account's own projects stay the ones that read first. */
.bt-detail .bt-moved-row td {
    background-color: #f8fafc;
}

.table-responsive:hover .bt-detail .bt-moved-row td {
    background-color: #f8fafc;
}

.bt-detail .bt-moved-row .bt-dot {
    background-color: #94a3b8;
}

/* NOT sticky. `position: sticky; bottom: 0` on a tfoot cell is unreliable under Bootstrap's
   `border-collapse: collapse` — instead of sitting after the last row it paints over it, so
   Grand Total landed on top of the final project. The totals scroll with their rows. */
.bt-detail .bt-totals-row td {
    background-color: #f4f6fb;
    border-top: 1px solid #e2e8f0;
}
.bt-detail .gap-40 {
    gap: 40px;
}
.bt-detail .bt-progress-narrow {
    width: 64px;
}

/* Billing Tracker — Link agreement picker (app-standard .modal card-modal).
   The modal chrome (header, backdrop, sizing) is inherited from the shared
   modal styles; only the search box and agreement list are bespoke. */
/* Search box */
.bt-link-search {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 14px;
    background-color: #fff;
}
.bt-link-search:focus-within {
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.bt-link-search-input {
    border: 0;
    outline: none;
    width: 100%;
    font-size: 14px;
    color: #0f172a;
    background: transparent;
}
.bt-link-search-input::placeholder {
    color: #94a3b8;
}
/* Agreement list */
.bt-link-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 320px;
    overflow-y: auto;
    border-top: 1px solid #e2e8f0;
}
.bt-link-item {
    padding: 14px 24px;
    cursor: pointer;
    border-bottom: 1px solid #f1f5f9;
    transition: background-color 0.12s ease;
}
.bt-link-item:last-of-type {
    border-bottom: 0;
}
.bt-link-item:hover {
    background-color: #f4f6fb;
}

/* Billing Tracker — link picker & history modal card radius.
   Uses !important to beat Bootstrap's .rounded-lg (0.3rem !important).
   .bt-history-modal covers the per-row Item History dialogs (one per tracker row,
   so they are class-keyed rather than id-keyed). */
#btLinkModal .modal-content,
#btHistoryModal .modal-content,
.bt-history-modal .modal-content {
    border-radius: 12px !important;
}

/* Billing Tracker — Activity / Item history modal */
.bt-history-table thead th {
    background-color: #f4f6fb;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}
.bt-history-table td {
    vertical-align: middle;
    border-top: 1px solid #f1f5f9;
}
.bt-history-table tbody tr:first-child td {
    border-top: none;
}

/* List filter-bar select2 (.select2-filter-search) — the dropdown panel, which select2
   appends to <body>, so it cannot be reached from the bar's own styles.
   The controls are deliberately narrow; their options are not. dropdownAutoWidth (boot.js)
   grows the panel to fit its content, and these give it a sensible floor and ceiling. */
.select2-container--open .select2-dropdown.select2-dropdown-filter {
    min-width: 300px;
    max-width: 460px;
}
.select2-dropdown-filter .select2-results__option {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Room for a long list without the panel running off-screen. */
.select2-dropdown-filter .select2-results > .select2-results__options {
    max-height: 340px;
}
/* The search field only appears on these searchable filters — give it breathing room. */
.select2-dropdown-filter .select2-search--dropdown {
    padding: 8px;
}
.select2-dropdown-filter .select2-search--dropdown .select2-search__field {
    padding: 6px 8px;
}

/* =========================================================
   86eyqxxkp / 86eyqy0n2 — Collapsible column groups
   The chrome behind every "+"/"−" that hides a group of columns from a
   neighbouring header: the agreement ledgers' Savings Breakdown (.js-savings-*,
   core/agreement/show.js) and the generic groups declared in markup
   (.js-collapse-*, core/collapsible-columns.js).
   ========================================================= */
.ledger-savings-toggle,
.collapse-columns-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 1px solid currentColor;
    border-radius: 4px;
    background: transparent;
    color: inherit;
    line-height: 1;
    cursor: pointer;
}

.ledger-savings-toggle:hover,
.ledger-savings-toggle:focus,
.collapse-columns-toggle:hover,
.collapse-columns-toggle:focus {
    background: rgba(0, 0, 0, 0.06);
    outline: none;
}

/* Dropped from the layout entirely while collapsed, so the remaining columns
   reclaim the width instead of leaving a gap. */
table th.js-savings-detail.is-hidden,
table td.js-savings-detail.is-hidden,
table th.js-collapse-cell.is-hidden,
table td.js-collapse-cell.is-hidden {
    display: none;
}

/* Opening the group scrolls the ledger to its right edge (see show.js); the glide
   lives here so the JS stays a plain scrollLeft assignment. */
#monthly-ledger-content .table-responsive,
#daily-ledger-content .table-responsive,
#monthly-consumption-wrapper .table-responsive,
#agreement-table-wrapper .table-responsive {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {

    #monthly-ledger-content .table-responsive,
    #daily-ledger-content .table-responsive,
    #monthly-consumption-wrapper .table-responsive,
    #agreement-table-wrapper .table-responsive {
        scroll-behavior: auto;
    }
}

/* The reveal: the columns wipe in from the left as the table reflows. */
@keyframes ledgerSavingsSlideIn {
    from {
        opacity: 0;
        transform: translateX(-14px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

table th.js-savings-detail.is-revealing,
table td.js-savings-detail.is-revealing,
table th.js-collapse-cell.is-revealing,
table td.js-collapse-cell.is-revealing {
    animation: ledgerSavingsSlideIn 240ms ease-out both;
}

@media (prefers-reduced-motion: reduce) {

    table th.js-savings-detail.is-revealing,
    table td.js-savings-detail.is-revealing,
    table th.js-collapse-cell.is-revealing,
    table td.js-collapse-cell.is-revealing {
        animation: none;
    }
}

/* =========================================================
   86eyqy3f4 — Charts-first / Table-first (agreement Overall + Daily tabs)
   The switch lives in each tab's filter card and only reorders what is already
   rendered — the sections are flex children, so `order` is the whole mechanism.
   ========================================================= */

/* The Overall tab's charts and table are block sections; the Daily tab's are columns
   of a .row, which is already a flex container. */
.agreement-sections {
    display: flex;
    flex-direction: column;
}

.js-agreement-sections.is-table-first > .js-section-table {
    order: -1;
    /* Last in source order the table needed no bottom gap; moved up it now has the
       chart cards beneath it, so it takes the same 30px the cards keep between them. */
    margin-bottom: 30px;
}

/* The filter card is part of the same row on the Daily tab, and stays on top of both
   orders — it is what the switch itself sits in. */
.js-agreement-sections.is-table-first > .js-section-filter {
    order: -2;
}

/* Segmented switch — the /workflow control (`.list-actions-button`, whose `.active`
   fill the theme already defines). Only the sizing the fixed 35px square can't give a
   labelled option is restated, mirroring the island's own `.wsp-seg` rule. */
.ag-seg {
    gap: 8px;
}

.ag-seg .list-actions-button.btn-text {
    width: auto;
    min-width: 104px;
    height: auto;
    padding: 7px 12px;
    font-size: var(--text-xs);
    font-weight: 600;
    border-radius: var(--radius-sm);
}

/* =========================================================
   Billing Tracker — Billing / Hanging projects tab strip.
   The Workspace island's tab pair (`.wsp-tab-count`, resources/css/workspace.css)
   and the Notification Centre's (`.notif-center__tab-pill`) are the same control;
   everything else about it is utility classes, so only the two things they cannot
   express live here.
   ========================================================= */

/* Count pill: circular for a single digit, growing into a pill for a 3–4 digit
   count so the number is never clipped. Shared name — the two page-local copies
   above are the same four declarations. */
.tab-count-pill {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
}

/* Billing-tab-only blocks — the filter card and the header's filter toggle. Hidden by
   adding .d-none (server-rendered, and toggled by BillingTrackerResponse's dom_classes
   on a tab switch), which on the toggle's wrapper loses to Bootstrap's .d-flex: that
   utility carries !important and a single-class tie goes to the later declaration. Same
   compound-selector fix as .chip-toggle.js-search-hidden above. */
.js-bt-billing-only.d-none {
    display: none !important;
}

/* An empty tab is not a destination: no handler, no pointer, and the cursor says so.
   Rendered as a <span> rather than a disabled <a> (anchors take no :disabled), so this
   is the whole affordance. */
.bt-tabs__tab.is-disabled {
    cursor: not-allowed;
}

/* Tabs size to their label rather than taking the Workspace strip's fixed 160px:
   "Hanging projects" plus a four-digit count does not fit in it. The floor keeps a
   short label ("Billing") from reading as a cramped chip next to a long one. */
.bt-tabs__tab {
    min-width: 120px;
}

/* =========================================================
   Tone-variant tooltips
   =========================================================
   Bootstrap 4 has one tooltip skin (dark fill, white text). A tooltip that
   explains a red number reads better in the same tone as the number, so this
   is a tone variant selected through BS4's own `data-template` option — the
   only hook it offers for per-tooltip classes (`data-bs-custom-class` is BS5).

   Usage: add the tone class to the template's root element, e.g.
     data-template='<div class="tooltip tooltip-danger" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'

   Deliberately borderless (the fill and the shadow carry the edge) and fully
   opaque — BS4's default .9 washes a light fill out against a white page. */
.tooltip.tooltip-danger.show {
    opacity: 1;
}

.tooltip.tooltip-danger .tooltip-inner {
    background-color: var(--danger-200);
    color: var(--red-700);
    border: 0;
    border-radius: 8px;
    padding: 8px 12px;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(185, 28, 28, 0.15);
    /* BS4 caps the inner at 200px, which wraps a short one-line label. */
    max-width: 300px;
}

/* BS4 tints the arrow per placement, and only the side facing the target. */
.tooltip.tooltip-danger.bs-tooltip-top .arrow::before,
.tooltip.tooltip-danger.bs-tooltip-auto[x-placement^="top"] .arrow::before {
    border-top-color: var(--danger-200);
}

.tooltip.tooltip-danger.bs-tooltip-bottom .arrow::before,
.tooltip.tooltip-danger.bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
    border-bottom-color: var(--danger-200);
}

.tooltip.tooltip-danger.bs-tooltip-left .arrow::before,
.tooltip.tooltip-danger.bs-tooltip-auto[x-placement^="left"] .arrow::before {
    border-left-color: var(--danger-200);
}

.tooltip.tooltip-danger.bs-tooltip-right .arrow::before,
.tooltip.tooltip-danger.bs-tooltip-auto[x-placement^="right"] .arrow::before {
    border-right-color: var(--danger-200);
}

/* =========================================================
   Panel tooltip — a light card instead of the dark chip
   =========================================================
   For a tooltip carrying a small label/value table rather than a sentence: BS4's
   dark 200px-wide centred chip cannot hold one legibly. Same `data-template` hook
   as .tooltip-danger above; the arrow is dropped because the panel reads as a card,
   not a speech bubble. */
.tooltip.tooltip-panel.show {
    opacity: 1;
}

.tooltip.tooltip-panel .arrow {
    display: none;
}

.tooltip.tooltip-panel .tooltip-inner {
    max-width: 340px;
    padding: 10px 14px;
    background-color: var(--color-white);
    color: var(--slate-900);
    text-align: left;
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(15, 23, 42, 0.16);
}

/* Label / value rows inside a panel tooltip (see the GCP value breakdown). Column
   widths are content-driven — the row is a flex pair, so the value tracks the widest
   figure instead of needing a fixed gutter. */
.gcp-breakdown__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    white-space: nowrap;
}

.gcp-breakdown__row + .gcp-breakdown__row {
    margin-top: 3px;
}

.gcp-breakdown__label {
    color: var(--slate-600);
    font-weight: 500;
}

.gcp-breakdown__value {
    font-weight: 700;
}

.gcp-breakdown__value--negative {
    color: var(--red-700);
}

/* =========================================================
   Domains tooltip — the GWS customer cell's "+N" chip
   =========================================================
   Rides the .tooltip-panel card above (light, arrowless), because the content is a list of
   values rather than a sentence: BS4's dark 200px chip wrapped four domains into an unreadable
   block. One domain per line, primary first and marked. */
.domains-tip__title {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--slate-400);
    margin-bottom: 5px;
}

.domains-tip__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    white-space: nowrap;
    line-height: 1.5;
}

.domains-tip__row + .domains-tip__row {
    margin-top: 2px;
}

/* Small on purpose: the panel is a reference list read at a glance, not body copy — at the
   tooltip's inherited size three domains filled the card. */
.domains-tip__url {
    font-size: 11px;
    color: var(--slate-900);
    font-weight: 600;
}

.domains-tip__tag {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--slate-400);
}

.domains-tip__tag--primary {
    color: var(--blue-700);
}

/* =========================================================
   Size chart tooltip — the S/M/L/XL chip's hover panel
   =========================================================
   Every band on a line, the one in force marked. The React customer islands build the
   same markup (features/workflow/customers/sizeBandTip.js). */
.tooltip.tooltip-size-chart.show {
    opacity: 1;
}

.tooltip.tooltip-size-chart .arrow {
    display: none;
}

.tooltip.tooltip-size-chart .tooltip-inner {
    max-width: 300px;
    padding: 14px 18px;
    /* #0033a0 — the same deep blue as the list summary band. */
    background-color: var(--summary-row-bg);
    color: var(--color-white);
    text-align: left;
    border-radius: var(--radius-sm);
    box-shadow: 0 6px 24px rgba(15, 23, 42, 0.24);
}

.size-chart-tip__row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 5px 0;
    font-size: 13px;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.8);
}

/* The marker gutter is always there, so the letters stay in one column whichever row is active. */
.size-chart-tip__dot {
    flex: 0 0 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: transparent;
}

.size-chart-tip__band {
    flex: 0 0 20px;
    text-align: right;
    font-weight: 600;
}

.size-chart-tip__row.is-active {
    color: var(--color-white);
    font-weight: 700;
}

.size-chart-tip__row.is-active .size-chart-tip__dot {
    background-color: var(--color-white);
}

.size-chart-tip__basis {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.28);
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
}

/* Clearable date filter field (components/misc/filter-date-field.blade.php). Layout is
   utilities on the markup; only the off-scale and stateful bits live here. */

/* Reserves the X's lane inside the input, on .has-value only so an empty field keeps the
   browser's calendar icon flush right. Sized for the 16px X — it matches the calendar icon on
   the month pickers, and every date clear in the app is that size. */
.filter-date-field.has-value .form-control {
    padding-right: 2.25rem;
}

/* display here, not .d-inline-flex: both carry !important and the later one wins, so .d-none
   could never hide the X. */
.filter-date-clear {
    display: inline-flex;
    right: 0.35rem;
    line-height: 0;
    z-index: 2;
    color: var(--slate-400);
}

.filter-date-clear:hover,
.filter-date-clear:focus {
    color: var(--slate-600);
    text-decoration: none;
}

/* GWS price grid — a plan that carries no price BY DESIGN (a TRIAL or FREE subscription,
   GWS_US_016 §3.2 / 86eyvwwb8). Dimmed so it reads as "there is nothing to price" rather than as
   a lookup that failed; a genuine refusal keeps full contrast and its red reason. Opacity rather
   than a grey palette so the figures, the labels and the term all recede together. */
.gws-price-grid-dimmed {
    opacity: .55;
}


/* ── Clear (X) on the legacy .pickadate date inputs ─────────────────────────────────────────
   Injected by core/misc/date-clear.js, which is where the "why JS, not markup" note lives.
   The wrapper takes the input's place in the layout, so it has to carry the input's own
   display and width or a field inside a grid column collapses to its content. */
.date-clear-field {
    position: relative;
    display: block;
    width: 100%;
}

/* The X sits INSIDE the field, right-aligned, on the same 16px as the month picker's calendar
   icon. display here rather than a flex utility: .d-none is what hides it, and a utility would
   carry !important and win the tie. */
.date-clear {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    line-height: 0;
    color: var(--slate-400);
    z-index: 2;
}

.date-clear:hover,
.date-clear:focus {
    color: var(--slate-600);
}

/* Keep the typed date clear of the X. Applied to the input inside the wrapper rather than to
   .pickadate globally, so an undecorated control is untouched. */
.date-clear-field .form-control {
    padding-right: 2.25rem;
}

/* ------------------------------------------------------------------------------------------
 * Dark tooltip (`data-template` carries `gws-tooltip-dark`)
 *
 * The default tooltip is a pale box with a narrow max-width, which wrapped a money pair like
 * "$9,822.60 / $9,331.47" onto two lines. This one is dark and sized to its content. Global
 * rather than scoped to the order modal: the orders LIST uses it too, and that page does not
 * load the modal's styles.
 * ------------------------------------------------------------------------------------------ */
.tooltip.gws-tooltip-dark .tooltip-inner {
    background-color: #101828;
    color: #fff;
    max-width: none;
    text-align: left;
    white-space: nowrap;
    padding: 8px 12px;
    border-radius: 8px;
    box-shadow: 0 8px 24px -6px rgba(16, 24, 40, 0.35);
}

.tooltip.gws-tooltip-dark .arrow::before {
    border-top-color: #101828;
    border-bottom-color: #101828;
}

/* The correction tooltip states several lines, so it is the one place that wraps. */
.tooltip.gws-tooltip-dark .gws-correction-row {
    white-space: normal;
}

.tooltip.gws-tooltip-dark .gws-correction-row + .gws-correction-row,
.tooltip.gws-tooltip-dark .gws-correction-total {
    margin-top: 8px;
}

.tooltip.gws-tooltip-dark .gws-correction-total {
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
}

/* Floating "Active contracts only" pill (core/misc/sticky-active-toggle.js) — shown on the
   customer / GCP / GWS detail pages once the header's own checkbox scrolls out of view. */
.sticky-active-toggle {
    position: fixed;
    right: 24px;
    z-index: 49;
    display: inline-flex;
    align-items: center;
    padding: 8px 16px 8px 14px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}

.sticky-active-toggle.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s;
}

.sticky-active-toggle.is-busy {
    opacity: 0.6;
}

.sticky-active-toggle .custom-control-indicator {
    top: 50%;
    transform: translateY(-50%);
}

.sticky-active-toggle .custom-control-description {
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
    white-space: nowrap;
}

/* The one-control date/month range (components/misc/filter-date-range): the box reads as the
   filter card's other text fields — the theme's .form-control border (#e0e0e0, style.css) and the
   .form-control-sm corner radius. `overflow: hidden` because the input inside is a flex child that
   Bootstrap's input-group pulls 1px outward: with the X hidden (an empty range) nothing sat after
   it, so its white background painted over the box's right border and corners. The calendar is
   appended to <body>, so the clip never touches it. */
.filter-date-range {
    border: 1px solid #e0e0e0;
    border-radius: 0.2rem;
    overflow: hidden;
}

/* .form-control-sm's height counts its own 2px of border, but the border here is on the box, so
   the borderless input inside drops those 2px and the box lines up with a .form-control-sm field.
   The theme pins .form-control-sm to min-height: 31px !important, hence the override. */
.filter-date-range .js-date-range-input {
    /* 29px — the 31px .form-control-sm less the box's 2px. In rem, not em: the field's own text is
       text-xs, so an em height would follow that smaller font instead of the sm field's. */
    height: 1.8125rem;
    min-height: 0 !important;
}

/* The one-control date/month range (components/misc/filter-date-range). flatpickr keeps the field
   readonly so a range is picked, never typed, and the theme greys `.form-control[readonly]` with
   !important as if disabled; this is a live control, so it stays white. */
.filter-date-range .js-date-range-input[readonly] {
    background-color: #fff !important;
    cursor: pointer;
}

/* ---------------------------------------------------------------------------------------------
   The range control's calendar (components/misc/filter-date-range → flatpickr, tagged
   .nx-range-calendar in filter-date-range.js). Every selector starts with
   `.flatpickr-calendar.nx-range-calendar`: flatpickr's own stylesheet loads AFTER this file, so a
   rule of equal weight loses to it (that is what pinned the arrows to the corners and turned them
   red on hover). The header is ‹ [Month ▾] [Year ▾] › on one line; the two dropdowns open a
   styled menu over the grid (buildHeader). The picked range is a solid start/end with a pale band.
   --------------------------------------------------------------------------------------------- */
.flatpickr-calendar.nx-range-calendar {
    width: auto;
    padding: 8px;
    font-family: inherit;
    background: #fff;
    border: 1px solid var(--slate-200);
    border-radius: 12px;
    box-shadow: 0 16px 40px -12px rgba(15, 23, 42, 0.25);
}

.flatpickr-calendar.nx-range-calendar::before,
.flatpickr-calendar.nx-range-calendar::after {
    display: none;
}

/* Header: ‹ [Month ▾] [Year ▾] › — one row, everything centred on the same line */
.flatpickr-calendar.nx-range-calendar .flatpickr-months {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 0 8px;
}

.flatpickr-calendar.nx-range-calendar .flatpickr-months .flatpickr-month {
    flex: 1 1 auto;
    height: 36px;
    overflow: visible;
    color: var(--slate-900);
}

.flatpickr-calendar.nx-range-calendar .flatpickr-current-month {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 36px;
    padding: 0;
    left: auto;
    transform: none;
}

/* flatpickr's own month label / <select> and year spinner give way to the dropdowns */
.flatpickr-calendar.nx-range-calendar .flatpickr-current-month > .cur-month,
.flatpickr-calendar.nx-range-calendar .flatpickr-current-month > .flatpickr-monthDropdown-months,
.flatpickr-calendar.nx-range-calendar .flatpickr-current-month > .numInputWrapper {
    display: none;
}

.flatpickr-calendar.nx-range-calendar .nx-cal-title {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.flatpickr-calendar.nx-range-calendar .nx-cal-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 10px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    color: var(--slate-900);
    background: transparent;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
}

.flatpickr-calendar.nx-range-calendar .nx-cal-trigger svg {
    color: var(--slate-500);
    transition: transform 0.15s ease;
}

.flatpickr-calendar.nx-range-calendar .nx-cal-trigger:hover,
.flatpickr-calendar.nx-range-calendar .nx-cal-trigger[aria-expanded="true"] {
    background: var(--blue-100);
    color: var(--blue-700);
}

.flatpickr-calendar.nx-range-calendar .nx-cal-trigger:hover svg,
.flatpickr-calendar.nx-range-calendar .nx-cal-trigger[aria-expanded="true"] svg {
    color: var(--blue-700);
}

.flatpickr-calendar.nx-range-calendar .nx-cal-trigger[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.flatpickr-calendar.nx-range-calendar .nx-cal-trigger:focus-visible,
.flatpickr-calendar.nx-range-calendar .nx-cal-option:focus-visible {
    outline: 2px solid var(--blue-300);
    outline-offset: 1px;
}

/* Arrows: in the header row (not pinned to the corners), round, blue on hover — never red */
.flatpickr-calendar.nx-range-calendar .flatpickr-months .flatpickr-prev-month,
.flatpickr-calendar.nx-range-calendar .flatpickr-months .flatpickr-next-month {
    position: static;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    color: var(--slate-500);
    fill: var(--slate-500);
    border-radius: 50%;
}

.flatpickr-calendar.nx-range-calendar .flatpickr-months .flatpickr-prev-month svg,
.flatpickr-calendar.nx-range-calendar .flatpickr-months .flatpickr-next-month svg {
    width: 12px;
    height: 12px;
    fill: currentColor;
}

.flatpickr-calendar.nx-range-calendar .flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-calendar.nx-range-calendar .flatpickr-months .flatpickr-next-month:hover {
    color: var(--blue-700);
    background: var(--blue-100);
}

.flatpickr-calendar.nx-range-calendar .flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-calendar.nx-range-calendar .flatpickr-months .flatpickr-next-month:hover svg {
    fill: var(--blue-700);
}

/* The dropdown menu: covers the grid under the header */
.flatpickr-calendar.nx-range-calendar .nx-cal-menu {
    position: absolute;
    top: 52px;
    right: 8px;
    bottom: 8px;
    left: 8px;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-content: start;
    gap: 6px;
    padding: 6px;
    overflow-y: auto;
    background: #fff;
    border-radius: 8px;
}

.flatpickr-calendar.nx-range-calendar .nx-cal-menu.d-none {
    display: none;
}

.flatpickr-calendar.nx-range-calendar .nx-cal-menu-year {
    grid-template-columns: repeat(4, 1fr);
}

.flatpickr-calendar.nx-range-calendar .nx-cal-option {
    height: 40px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: var(--slate-900);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
}

.flatpickr-calendar.nx-range-calendar .nx-cal-option:hover {
    background: var(--slate-100);
}

.flatpickr-calendar.nx-range-calendar .nx-cal-option.is-selected {
    font-weight: 700;
    color: #fff;
    background: var(--blue-600);
}

/* Weekday row */
.flatpickr-calendar.nx-range-calendar span.flatpickr-weekday {
    font-size: 11px;
    font-weight: 600;
    color: var(--slate-500);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Days */
.flatpickr-calendar.nx-range-calendar .flatpickr-day {
    font-size: 13px;
    color: var(--slate-900);
    border-radius: 8px;
}

.flatpickr-calendar.nx-range-calendar .flatpickr-day:hover {
    background: var(--slate-100);
    border-color: transparent;
}

.flatpickr-calendar.nx-range-calendar .flatpickr-day.prevMonthDay,
.flatpickr-calendar.nx-range-calendar .flatpickr-day.nextMonthDay {
    color: var(--slate-400);
}

.flatpickr-calendar.nx-range-calendar .flatpickr-day.today {
    border-color: var(--blue-300);
    font-weight: 700;
}

.flatpickr-calendar.nx-range-calendar .flatpickr-day.inRange,
.flatpickr-calendar.nx-range-calendar .flatpickr-day.inRange:hover {
    color: var(--blue-900);
    background: var(--blue-100);
    border-color: var(--blue-100);
    box-shadow: -5px 0 0 var(--blue-100), 5px 0 0 var(--blue-100);
    border-radius: 0;
}

.flatpickr-calendar.nx-range-calendar .flatpickr-day.selected,
.flatpickr-calendar.nx-range-calendar .flatpickr-day.startRange,
.flatpickr-calendar.nx-range-calendar .flatpickr-day.endRange,
.flatpickr-calendar.nx-range-calendar .flatpickr-day.selected:hover,
.flatpickr-calendar.nx-range-calendar .flatpickr-day.startRange:hover,
.flatpickr-calendar.nx-range-calendar .flatpickr-day.endRange:hover {
    color: #fff;
    font-weight: 700;
    background: var(--blue-600);
    border-color: var(--blue-600);
}

.flatpickr-calendar.nx-range-calendar .flatpickr-day.startRange:not(.endRange) {
    border-radius: 8px 0 0 8px;
}

.flatpickr-calendar.nx-range-calendar .flatpickr-day.endRange:not(.startRange) {
    border-radius: 0 8px 8px 0;
}

.flatpickr-calendar.nx-range-calendar .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n + 1)),
.flatpickr-calendar.nx-range-calendar .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n + 1)),
.flatpickr-calendar.nx-range-calendar .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n + 1)) {
    box-shadow: -10px 0 0 var(--blue-600);
}

/* Month mode (monthSelect plugin): the same treatment on the month grid */
.flatpickr-calendar.nx-range-calendar .flatpickr-monthSelect-months {
    margin: 4px 0;
}

.flatpickr-calendar.nx-range-calendar .flatpickr-monthSelect-month {
    margin: 3px 0;
    padding: 8px 0;
    font-size: 13px;
    color: var(--slate-900);
    border: 1px solid transparent;
    border-radius: 8px;
}

.flatpickr-calendar.nx-range-calendar .flatpickr-monthSelect-month:hover {
    background: var(--slate-100);
}

.flatpickr-calendar.nx-range-calendar .flatpickr-monthSelect-month.today {
    border-color: var(--blue-300);
}

.flatpickr-calendar.nx-range-calendar .flatpickr-monthSelect-month.inRange,
.flatpickr-calendar.nx-range-calendar .flatpickr-monthSelect-month.inRange:hover {
    color: var(--blue-900);
    background: var(--blue-100);
    border-color: var(--blue-100);
    box-shadow: none;
    border-radius: 0;
}

.flatpickr-calendar.nx-range-calendar .flatpickr-monthSelect-month.selected,
.flatpickr-calendar.nx-range-calendar .flatpickr-monthSelect-month.startRange,
.flatpickr-calendar.nx-range-calendar .flatpickr-monthSelect-month.endRange {
    color: #fff;
    font-weight: 700;
    background: var(--blue-600);
    border-color: var(--blue-600);
}

.flatpickr-calendar.nx-range-calendar .flatpickr-monthSelect-month.startRange:not(.endRange) {
    border-radius: 8px 0 0 8px;
}

.flatpickr-calendar.nx-range-calendar .flatpickr-monthSelect-month.endRange:not(.startRange) {
    border-radius: 0 8px 8px 0;
}

/* GWS order documents — a SAVED document card opens its file in a new tab from anywhere on it, so it
   reads as clickable: a blue border on hover / keyboard focus. The transparent resting border keeps
   the card from shifting by a pixel when the border appears. */
.gws-document-saved {
    border: 1px solid transparent;
    cursor: pointer;
    transition: border-color 0.15s ease-in-out;
}

.gws-document-saved:hover,
.gws-document-saved:focus-visible {
    border-color: var(--blue-600);
    outline: none;
}