/* =========================================================
   Pay(k)onnect Design System -- Legacy Bridge
   ---------------------------------------------------------
   Overlays the design-system look onto pre-existing Bootstrap
   ('.btn-primary', '.form-control', '.badge.bg-success'...)
   and legacy 'gm-*' classes so the entire app inherits the
   new look without per-page markup edits.

   Load order:
     1. tokens.css      (color + type primitives)
     2. components.css  (pk-* primitives)
     3. paykonnect-design.css  (legacy chrome + page styles)
     4. legacy-bridge.css      (this file -- overrides legacy)
     5. console-chrome.css     (chrome-specific layout)

   This file should never define a new component pattern. It
   only re-styles existing class names so the visual output
   matches the design system.
   ========================================================= */


/* ---- BUTTONS ----------------------------------------------
   Bootstrap 5 ships .btn + variant classes; we re-skin them
   to look like .pk-btn variants.

   .btn alone gets pk-btn base styling. The variants map:
     .btn-primary           -> pk-btn--primary  (solid indigo)
     .btn-secondary         -> pk-btn--secondary (outline)
     .btn-outline-primary   -> pk-btn--secondary
     .btn-outline-secondary -> pk-btn--quiet (neutral outline)
     .btn-success           -> pk-btn--accent (emerald tonal)
     .btn-danger            -> pk-btn--danger (rose tonal)
     .btn-outline-danger    -> rose outline
     .btn-warning           -> amber tonal
     .btn-light/.btn-lightgray -> pk-btn--quiet
     .btn-link              -> brand text link

   .btn-sm pulls the smaller pk-btn--sm sizing.
   ---------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-body, "Nunito Sans"), system-ui, sans-serif;
    font-size: var(--fs-md, 15px);
    font-weight: 600;
    line-height: 1;
    padding: 10px 18px;
    min-height: 40px;
    border: 1px solid transparent;
    border-radius: var(--r-md, 10px);
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .08s ease;
    white-space: nowrap;
}
.btn:focus, .btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring, 0 0 0 3px rgba(132,135,238,.22));
}
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn:disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-sm  { padding: 6px 12px;  min-height: 32px; font-size: var(--fs-sm, 13px); border-radius: var(--r-sm, 6px); gap: 6px; }
.btn-lg  { padding: 14px 22px; min-height: 48px; font-size: var(--fs-lg, 17px); border-radius: var(--r-md, 10px); }

/* Primary */
.btn-primary,
.btn.btn-primary {
    background: var(--brand, #8487EE);
    border-color: var(--brand, #8487EE);
    color: #fff;
}
.btn-primary:hover,
.btn.btn-primary:hover {
    background: var(--brand-hover, #6063EE);
    border-color: var(--brand-hover, #6063EE);
    color: #fff;
}
.btn-primary:active,
.btn.btn-primary:active {
    background: var(--brand-active, #4949F2);
    border-color: var(--brand-active, #4949F2);
}

/* Secondary / outline-primary -- outline indigo on white */
.btn-secondary,
.btn-outline-primary,
.btn.btn-secondary,
.btn.btn-outline-primary {
    background: #fff;
    border-color: var(--brand-border, #C2C6FC);
    color: var(--brand, #8487EE);
}
.btn-secondary:hover,
.btn-outline-primary:hover,
.btn.btn-secondary:hover,
.btn.btn-outline-primary:hover {
    background: var(--brand-tint, #EEF0FF);
    border-color: var(--brand, #8487EE);
    color: var(--brand-fg-on-tint, #2D2BA6);
}

/* Quiet / neutral outline */
.btn-outline-secondary,
.btn-light,
.btn-lightgray,
.btn.btn-outline-secondary,
.btn.btn-light,
.btn.btn-lightgray {
    background: transparent;
    border-color: var(--border-soft, #DEE0EC);
    color: var(--fg-default, #3F4459);
    font-weight: 600;
}
.btn-outline-secondary:hover,
.btn-light:hover,
.btn-lightgray:hover,
.btn.btn-outline-secondary:hover,
.btn.btn-light:hover,
.btn.btn-lightgray:hover {
    background: var(--bg-muted, #F5F6FB);
    border-color: var(--border-default, #C7CAD8);
    color: var(--fg-strong, #14172A);
}

/* Success -- emerald tonal */
.btn-success,
.btn.btn-success {
    background: var(--accent-tint, #ECFDF5);
    border-color: var(--accent-border, #8DEEC5);
    color: var(--accent-fg-on-tint, #105F4A);
}
.btn-success:hover,
.btn.btn-success:hover {
    background: var(--emerald-100, #C6F7E1);
    border-color: var(--accent, #2BD79A);
    color: var(--emerald-900, #0F3E33);
}

/* Danger -- rose tonal */
.btn-danger,
.btn.btn-danger {
    background: var(--rose-50, #FEF1F4);
    border-color: var(--rose-200, #F9B6C4);
    color: var(--rose-600, #D62759);
}
.btn-danger:hover,
.btn.btn-danger:hover {
    background: var(--rose-100, #FCDCE3);
    border-color: var(--rose-500, #EC4470);
    color: var(--rose-800, #971A3C);
}
.btn-outline-danger,
.btn.btn-outline-danger {
    background: #fff;
    border-color: var(--rose-200, #F9B6C4);
    color: var(--rose-600, #D62759);
}
.btn-outline-danger:hover,
.btn.btn-outline-danger:hover {
    background: var(--rose-50, #FEF1F4);
    border-color: var(--rose-500, #EC4470);
    color: var(--rose-800, #971A3C);
}

/* Warning -- amber tonal */
.btn-warning,
.btn.btn-warning {
    background: var(--warning-bg, #FFF8EC);
    border-color: var(--warning-bd, #FFD58E);
    color: var(--warning-fg, #7C4A0A);
}
.btn-warning:hover,
.btn.btn-warning:hover {
    background: var(--amber-100, #FFEACA);
    border-color: var(--amber-500, #ED9B1E);
    color: var(--amber-800, #7C4A0A);
}

/* Link */
.btn-link,
.btn.btn-link {
    background: transparent;
    border-color: transparent;
    color: var(--brand, #8487EE);
    text-decoration: none;
    font-weight: 600;
    min-height: auto;
    padding: 4px 6px;
}
.btn-link:hover,
.btn.btn-link:hover {
    color: var(--brand-hover, #6063EE);
    background: var(--brand-tint, #EEF0FF);
    text-decoration: none;
}


/* ---- BADGES -----------------------------------------------
   Bootstrap 5 uses `.badge .bg-<variant>`. Map to design-system
   tonal pills (background tint + colored text, no solid ink).
   ---------------------------------------------------------- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body, "Nunito Sans"), system-ui, sans-serif;
    font-size: var(--fs-xs, 12px);
    font-weight: 700;
    letter-spacing: .02em;
    padding: 4px 10px;
    border-radius: var(--r-pill, 999px);
    border: 1px solid transparent;
    white-space: nowrap;
}

.badge.bg-primary {
    background: var(--brand-tint, #EEF0FF) !important;
    color: var(--brand-fg-on-tint, #2D2BA6) !important;
    border-color: var(--brand-border, #C2C6FC);
}
.badge.bg-secondary {
    background: var(--slate-100, #ECEEF5) !important;
    color: var(--slate-700, #3F4459) !important;
    border-color: var(--slate-200, #DEE0EC);
}
.badge.bg-success {
    background: var(--success-bg, #ECFDF5) !important;
    color: var(--success-fg, #105F4A) !important;
    border-color: var(--success-bd, #8DEEC5);
}
.badge.bg-warning {
    background: var(--warning-bg, #FFF8EC) !important;
    color: var(--warning-fg, #7C4A0A) !important;
    border-color: var(--warning-bd, #FFD58E);
}
.badge.bg-danger {
    background: var(--error-bg, #FEF1F4) !important;
    color: var(--error-fg, #971A3C) !important;
    border-color: var(--error-bd, #F9B6C4);
}
.badge.bg-info {
    background: var(--info-bg, #EEF0FF) !important;
    color: var(--info-fg, #2D2BA6) !important;
    border-color: var(--info-bd, #C2C6FC);
}
.badge.bg-light {
    background: var(--bg-muted, #F5F6FB) !important;
    color: var(--fg-default, #3F4459) !important;
    border-color: var(--border-hairline, #ECEEF5);
}
.badge.bg-dark {
    background: var(--fg-strong, #14172A) !important;
    color: #ffffff !important;
    border-color: transparent;
}


/* ---- INPUTS -----------------------------------------------
   Bootstrap .form-control -> pk-input look: token-driven
   border, indigo focus ring, soft inset shadow.
   ---------------------------------------------------------- */

.form-control,
.form-select,
input[type="text"]:not(.pk-input):not(.search-input):not([class*="dt-"]),
input[type="email"]:not(.pk-input),
input[type="password"]:not(.pk-input),
input[type="number"]:not(.pk-input),
input[type="search"]:not(.pk-input),
input[type="tel"]:not(.pk-input),
input[type="url"]:not(.pk-input),
textarea:not(.pk-textarea),
select:not(.pk-select) {
    font-family: var(--font-body, "Nunito Sans"), system-ui, sans-serif;
    font-size: var(--fs-md, 15px);
    color: var(--fg-strong, #14172A);
    /* Use background-color (not the `background` shorthand) so any
       background-image set by per-page CSS -- e.g. DataTables search-icon
       SVG in paykonnect-design.css's `.dt-search input.form-control` --
       isn't reset to none by this baseline rule. */
    background-color: var(--bg-surface, #fff);
    border: 1px solid var(--border-soft, #DEE0EC);
    border-radius: var(--r-md, 10px);
    padding: 10px 14px;
    min-height: 40px;
    width: 100%;
    box-shadow: var(--shadow-inset, inset 0 1px 0 rgba(20, 23, 42, .03));
    transition: border-color .15s, box-shadow .15s;
}
.form-control::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--fg-subtle, #A2A6B8);
}
.form-control:hover,
.form-select:hover,
input[type="text"]:hover:not(.pk-input):not(.search-input):not([class*="dt-"]),
input[type="email"]:hover:not(.pk-input),
input[type="password"]:hover:not(.pk-input),
input[type="number"]:hover:not(.pk-input),
input[type="search"]:hover:not(.pk-input),
textarea:hover:not(.pk-textarea),
select:hover:not(.pk-select) {
    border-color: var(--border-default, #C7CAD8);
}
.form-control:focus,
.form-select:focus,
input[type="text"]:focus:not(.pk-input):not(.search-input):not([class*="dt-"]),
input[type="email"]:focus:not(.pk-input),
input[type="password"]:focus:not(.pk-input),
input[type="number"]:focus:not(.pk-input),
input[type="search"]:focus:not(.pk-input),
textarea:focus:not(.pk-textarea),
select:focus:not(.pk-select) {
    outline: none;
    border-color: var(--brand, #8487EE);
    box-shadow: var(--focus-ring, 0 0 0 3px rgba(132,135,238,.22));
}

.form-control.is-invalid,
.is-invalid {
    border-color: var(--rose-500, #EC4470);
}
.form-control.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(236, 68, 112, .22);
}


/* ---- ALERTS -----------------------------------------------
   Bootstrap alert variants -> tonal info/success/warning/error
   surfaces matching the design system.
   ---------------------------------------------------------- */

.alert {
    border-radius: var(--r-md, 10px);
    border: 1px solid;
    padding: 12px 16px;
    font-size: var(--fs-md, 15px);
    font-family: var(--font-body, "Nunito Sans"), system-ui, sans-serif;
}
.alert-primary,
.alert-info {
    background: var(--info-bg, #EEF0FF);
    color: var(--info-fg, #2D2BA6);
    border-color: var(--info-bd, #C2C6FC);
}
.alert-success {
    background: var(--success-bg, #ECFDF5);
    color: var(--success-fg, #105F4A);
    border-color: var(--success-bd, #8DEEC5);
}
.alert-warning {
    background: var(--warning-bg, #FFF8EC);
    color: var(--warning-fg, #7C4A0A);
    border-color: var(--warning-bd, #FFD58E);
}
.alert-danger {
    background: var(--error-bg, #FEF1F4);
    color: var(--error-fg, #971A3C);
    border-color: var(--error-bd, #F9B6C4);
}


/* ---- DROPDOWN ITEMS ---------------------------------------
   Bootstrap dropdowns inside the user-menu or row-action menus
   pick up the design-system row hover treatment.
   ---------------------------------------------------------- */

.dropdown-menu {
    border: 1px solid var(--border-hairline, #ECEEF5);
    border-radius: var(--r-lg, 14px);
    box-shadow: var(--shadow-lg, 0 16px 32px rgba(20, 23, 42, .10));
    padding: 6px;
}
.dropdown-item {
    border-radius: var(--r-md, 10px);
    padding: 8px 10px;
    font: 500 14px var(--font-body, "Nunito Sans");
    color: var(--fg-default, #3F4459);
    transition: background .12s, color .12s;
}
.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--bg-muted, #F5F6FB);
    color: var(--fg-strong, #14172A);
}
.dropdown-item.active,
.dropdown-item:active {
    background: var(--brand-tint, #EEF0FF);
    color: var(--brand-fg-on-tint, #2D2BA6);
}
.dropdown-divider {
    border-color: var(--border-hairline, #ECEEF5);
    margin: 4px 0;
}


/* ---- NAV TABS / PILLS -------------------------------------
   Bootstrap nav-tabs/.nav-pills used scattered through pages.
   Recolor active state to indigo; quiet hover on inactive.
   ---------------------------------------------------------- */

.nav-tabs {
    border-bottom: 1px solid var(--border-hairline, #ECEEF5);
}
.nav-tabs .nav-link {
    color: var(--fg-muted, #7B7F95);
    font: 600 14px var(--font-body, "Nunito Sans");
    border: 1px solid transparent;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 10px 14px;
    transition: color .12s, border-color .12s, background .12s;
}
.nav-tabs .nav-link:hover {
    color: var(--fg-strong, #14172A);
    background: transparent;
    border-color: transparent;
    border-bottom-color: var(--border-soft, #DEE0EC);
}
.nav-tabs .nav-link.active {
    color: var(--brand, #8487EE);
    background: transparent;
    border-color: transparent;
    border-bottom-color: var(--brand, #8487EE);
}
.nav-pills .nav-link {
    border-radius: var(--r-md, 10px);
    color: var(--fg-muted, #7B7F95);
    font: 600 13px var(--font-body, "Nunito Sans");
    padding: 6px 12px;
}
.nav-pills .nav-link:hover {
    color: var(--fg-strong, #14172A);
    background: var(--bg-muted, #F5F6FB);
}
.nav-pills .nav-link.active {
    background: var(--brand-tint, #EEF0FF);
    color: var(--brand-fg-on-tint, #2D2BA6);
}


/* ---- LEGACY gm-* CLASS BRIDGE -----------------------------
   The .gm-* prefix predates the design system. Map them to
   the new aesthetic so pages still using these classes
   (BillingReport, the Home dashboard, etc.) inherit the look.
   ---------------------------------------------------------- */

/* gm-card -> pk-card primary surface */
.gm-card {
    background: var(--bg-surface, #fff);
    border: 1px solid var(--border-hairline, #ECEEF5);
    border-radius: var(--r-xl, 20px);
    box-shadow: var(--shadow-xs, 0 1px 2px rgba(20, 23, 42, .04));
    overflow: hidden;
}
.gm-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-hairline, #ECEEF5);
    background: var(--bg-surface, #fff);
}
.gm-card-title {
    font-family: var(--font-display, "Montserrat"), "Nunito Sans", sans-serif;
    font-weight: 700;
    font-size: var(--fs-lg, 17px);
    color: var(--fg-strong, #14172A);
    line-height: 1.2;
    letter-spacing: var(--tracking-display, -0.015em);
}
.gm-card-subtitle {
    font-size: var(--fs-sm, 13px);
    color: var(--fg-muted, #7B7F95);
    margin-top: 2px;
}
.gm-card-body {
    padding: 20px;
}
.gm-card-icon {
    color: var(--fg-muted, #7B7F95);
    font-size: 16px;
}
.gm-card-header-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* gm-table -> pk-table aesthetic */
.gm-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}
.gm-table thead th {
    font-family: var(--font-body, "Nunito Sans"), system-ui, sans-serif;
    font-size: var(--fs-xs, 12px);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--fg-muted, #7B7F95);
    background: var(--bg-surface-2, #FAFBFE);
    text-align: left;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-hairline, #ECEEF5);
    white-space: nowrap;
}
.gm-table tbody td {
    padding: 14px 16px;
    font-size: var(--fs-md, 15px);
    color: var(--fg-default, #3F4459);
    border-bottom: 1px solid var(--border-hairline, #ECEEF5);
    vertical-align: middle;
}
.gm-table tbody tr:hover td {
    background: var(--bg-muted, #F5F6FB);
}
.gm-table tbody tr:last-child td {
    border-bottom: none;
}

/* gm-row-btn -> small quiet pill action */
.gm-row-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--r-sm, 6px);
    font-size: var(--fs-sm, 13px);
    font-weight: 600;
    color: var(--brand, #8487EE);
    background: transparent;
    border: 1px solid transparent;
    text-decoration: none;
    transition: background .12s, border-color .12s, color .12s;
    cursor: pointer;
}
.gm-row-btn:hover {
    background: var(--brand-tint, #EEF0FF);
    color: var(--brand-fg-on-tint, #2D2BA6);
    text-decoration: none;
}
.gm-row-btn.text-danger,
.gm-row-btn.gm-row-btn--danger {
    color: var(--rose-600, #D62759);
}
.gm-row-btn.text-danger:hover,
.gm-row-btn.gm-row-btn--danger:hover {
    background: var(--rose-50, #FEF1F4);
    color: var(--rose-800, #971A3C);
}

/* gm-input -> pk-input look */
.gm-input {
    font-family: var(--font-body, "Nunito Sans"), system-ui, sans-serif;
    font-size: var(--fs-md, 15px);
    color: var(--fg-strong, #14172A);
    background: var(--bg-surface, #fff);
    border: 1px solid var(--border-soft, #DEE0EC);
    border-radius: var(--r-md, 10px);
    padding: 10px 14px;
    min-height: 40px;
    box-shadow: var(--shadow-inset, inset 0 1px 0 rgba(20, 23, 42, .03));
    transition: border-color .15s, box-shadow .15s;
}
.gm-input:hover { border-color: var(--border-default, #C7CAD8); }
.gm-input:focus {
    outline: none;
    border-color: var(--brand, #8487EE);
    box-shadow: var(--focus-ring, 0 0 0 3px rgba(132,135,238,.22));
}

/* gm-search-btn -> pk-btn--primary look */
.gm-search-btn {
    background: var(--brand, #8487EE);
    border-color: var(--brand, #8487EE);
    color: #fff;
    border-radius: var(--r-md, 10px);
    font-weight: 600;
    padding: 10px 18px;
    min-height: 40px;
    transition: background .15s;
}
.gm-search-btn:hover {
    background: var(--brand-hover, #6063EE);
    border-color: var(--brand-hover, #6063EE);
    color: #fff;
}

/* gm-header-link -- the small create / view-all link in card headers */
.gm-header-link {
    color: var(--brand, #8487EE);
    font: 600 13px var(--font-body, "Nunito Sans");
    text-decoration: none;
    padding: 4px 8px;
    border-radius: var(--r-sm, 6px);
    transition: background .12s, color .12s;
}
.gm-header-link:hover {
    background: var(--brand-tint, #EEF0FF);
    color: var(--brand-fg-on-tint, #2D2BA6);
    text-decoration: none;
}

/* gm-meta labels (small uppercase tags inside cards) */
.gm-meta-label {
    font-family: var(--font-eyebrow, "Roboto Condensed"), "Helvetica Neue", sans-serif;
    font-size: var(--fs-xs, 12px);
    font-weight: 700;
    letter-spacing: var(--tracking-eyebrow, 0.12em);
    text-transform: uppercase;
    color: var(--fg-muted, #7B7F95);
    margin-bottom: 4px;
}
.gm-meta-value {
    font-size: var(--fs-md, 15px);
    color: var(--fg-strong, #14172A);
    line-height: 1.5;
}

/* gm-tabs (used in Needs Attention card) */
.gm-tabs {
    display: inline-flex;
    padding: 4px;
    background: var(--slate-100, #ECEEF5);
    border-radius: var(--r-pill, 999px);
    margin-bottom: 16px;
}
.gm-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font: 600 13px var(--font-body, "Nunito Sans");
    color: var(--fg-muted, #7B7F95);
    background: transparent;
    border: none;
    border-radius: var(--r-pill, 999px);
    cursor: pointer;
    transition: color .15s, background .15s, box-shadow .15s;
    white-space: nowrap;
}
.gm-tab:hover { color: var(--fg-strong, #14172A); }
.gm-tab--active {
    color: var(--fg-strong, #14172A);
    background: #fff;
    box-shadow: var(--shadow-xs, 0 1px 2px rgba(20, 23, 42, .04));
}

/* gm-row-actions cluster (right-side icon group on table rows) */
.gm-row-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-end;
}


/* ---- HOME-SPECIFIC PILLS / BADGES -------------------------
   The dashboard's home-* class set. Bridge them to token
   colors so the existing markup re-skins without edits.
   ---------------------------------------------------------- */

.home-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: var(--r-pill, 999px);
    background: transparent;
    border: 1px solid var(--border-soft, #DEE0EC);
    font: 600 12px var(--font-body, "Nunito Sans");
    color: var(--fg-muted, #7B7F95);
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}
.home-pill:hover {
    color: var(--fg-strong, #14172A);
    background: var(--bg-muted, #F5F6FB);
}
.home-pill--active {
    background: var(--brand, #8487EE);
    color: #fff;
    border-color: var(--brand, #8487EE);
}
.home-pill--active:hover {
    background: var(--brand-hover, #6063EE);
    color: #fff;
    border-color: var(--brand-hover, #6063EE);
}
.home-pill-group {
    display: inline-flex;
    gap: 4px;
    background: var(--slate-100, #ECEEF5);
    padding: 3px;
    border-radius: var(--r-pill, 999px);
}
.home-pill-group .home-pill {
    border-color: transparent;
    background: transparent;
}
.home-pill-group .home-pill.home-pill--active {
    background: #fff;
    color: var(--fg-strong, #14172A);
    box-shadow: var(--shadow-xs, 0 1px 2px rgba(20, 23, 42, .04));
    border-color: transparent;
}

.home-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: var(--r-pill, 999px);
    font: 700 11px var(--font-body, "Nunito Sans");
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: 1px solid transparent;
    white-space: nowrap;
}
.home-status-badge--pending {
    background: var(--bg-muted, #F5F6FB);
    color: var(--fg-muted, #7B7F95);
    border-color: var(--border-hairline, #ECEEF5);
}
.home-status-badge--error {
    background: var(--error-bg, #FEF1F4);
    color: var(--error-fg, #971A3C);
    border-color: var(--error-bd, #F9B6C4);
}
.home-status-badge--warning {
    background: var(--warning-bg, #FFF8EC);
    color: var(--warning-fg, #7C4A0A);
    border-color: var(--warning-bd, #FFD58E);
}
.home-status-badge--success {
    background: var(--success-bg, #ECFDF5);
    color: var(--success-fg, #105F4A);
    border-color: var(--success-bd, #8DEEC5);
}


/* ---- PK-TEXT-LINK ------------------------------------------
   Used across the codebase for inline anchor styling.
   ---------------------------------------------------------- */

.pk-text-link {
    color: var(--brand, #8487EE);
    text-decoration: none;
    font-weight: 600;
    transition: color .12s;
}
.pk-text-link:hover {
    color: var(--brand-hover, #6063EE);
    text-decoration: underline;
    text-underline-offset: 2px;
}


/* ---- PAGINATION (Bootstrap + DataTables) ------------------
   Soft pill style with indigo active state.
   ---------------------------------------------------------- */

.pagination .page-link,
.dt-paging .dt-paging-button {
    color: var(--fg-default, #3F4459);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--r-md, 10px);
    padding: 6px 12px;
    font: 600 13px var(--font-body, "Nunito Sans");
    transition: background .12s, color .12s, border-color .12s;
}
.pagination .page-link:hover,
.dt-paging .dt-paging-button:hover {
    background: var(--bg-muted, #F5F6FB);
    color: var(--fg-strong, #14172A);
    border-color: transparent;
}
.pagination .page-item.active .page-link,
.dt-paging .dt-paging-button.current {
    background: var(--brand-tint, #EEF0FF);
    color: var(--brand-fg-on-tint, #2D2BA6) !important;
    border-color: transparent;
    font-weight: 700;
}
.pagination .page-item.disabled .page-link,
.dt-paging .dt-paging-button.disabled {
    /* Per kit spec (.pk-pagination__btn[aria-disabled="true"] in
       pkds5/components.css L612): color = --fg-subtle, no opacity fade.
       The earlier `opacity: .55` made disabled buttons read as ~#D6D8E1
       which is significantly lighter than the kit's #A2A6B8. cursor:
       not-allowed signals "can't click"; DT's own click handler ignores
       the action when the li carries .disabled, so we don't need
       pointer-events: none (which would also kill the cursor effect). */
    color: var(--fg-subtle, #A2A6B8);
    cursor: not-allowed;
}
.pagination .page-item.disabled,
.dt-paging .dt-paging-button.disabled,
.dt-container .dt-paging .page-item.disabled {
    cursor: not-allowed;
}


/* ---- DATATABLES UI ----------------------------------------
   DataTables 2.x exposes a set of stable class hooks that wrap
   the search / length / info / pagination / buttons UI. Each
   gets a design-system skin so tables across the app match the
   chrome without per-table CSS.

   Class hooks (DataTables 2.x):
     .dt-container    -- outer wrapper
     .dt-layout-row   -- header/footer rows
     .dt-search       -- search-input cluster
     .dt-length       -- page-size selector cluster
     .dt-info         -- "Showing 1 to 10 of N entries"
     .dt-paging       -- pagination cluster (buttons styled above)
     .dt-buttons      -- export / column-visibility button group
     .dt-button       -- individual buttons inside .dt-buttons
   ---------------------------------------------------------- */

.dt-container {
    font-family: var(--font-body, "Nunito Sans"), system-ui, sans-serif;
    font-size: var(--fs-md, 15px);
    color: var(--fg-default, #3F4459);
}

/* Header/footer rows -- keep them as flex rows with comfortable gap */
.dt-container .dt-layout-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0;
    flex-wrap: wrap;
}
.dt-container .dt-layout-row.dt-layout-table {
    padding: 0;
}
.dt-container .dt-layout-cell {
    padding: 8px 0;
}

/* Search-input cluster ---------------------------------------
   gap is 0 because the column-visibility eye-button is mounted
   immediately after the search input and SearchCard.css styles
   them as a single combined pill (search has flat right side,
   colvis has flat left side). An 8px gap would expose the flat
   facing edges and make the pair look broken. */
.dt-search {
    display: inline-flex;
    align-items: center;
    gap: 0;
}
.dt-search label {
    margin: 0;
    color: var(--fg-muted, #7B7F95);
    font-size: var(--fs-sm, 13px);
    font-weight: 600;
}
.dt-search input.dt-input,
.dt-search input[type="search"] {
    font-family: var(--font-body, "Nunito Sans"), system-ui, sans-serif;
    font-size: var(--fs-sm, 13px);
    color: var(--fg-strong, #14172A);
    background: var(--bg-surface, #fff);
    border: 1px solid var(--border-soft, #DEE0EC);
    border-radius: var(--r-md, 10px);
    padding: 6px 12px;
    min-height: 32px;
    box-shadow: var(--shadow-inset, inset 0 1px 0 rgba(20, 23, 42, .03));
    transition: border-color .15s, box-shadow .15s;
    width: clamp(200px, 32vw, 320px);
}
.dt-search input.dt-input:hover,
.dt-search input[type="search"]:hover {
    border-color: var(--border-default, #C7CAD8);
}
.dt-search input.dt-input:focus,
.dt-search input[type="search"]:focus {
    outline: none;
    border-color: var(--brand, #8487EE);
    box-shadow: var(--focus-ring, 0 0 0 3px rgba(132,135,238,.22));
}
.dt-search input.dt-input::placeholder,
.dt-search input[type="search"]::placeholder {
    color: var(--fg-subtle, #A2A6B8);
}

/* Page-size selector ("Show 10 entries") --------------------- */
.dt-length {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.dt-length label {
    margin: 0;
    color: var(--fg-muted, #7B7F95);
    font-size: var(--fs-sm, 13px);
    font-weight: 600;
}
.dt-length select.dt-input,
.dt-length select {
    font-family: var(--font-body, "Nunito Sans"), system-ui, sans-serif;
    font-size: var(--fs-sm, 13px);
    color: var(--fg-strong, #14172A);
    background: var(--bg-surface, #fff);
    border: 1px solid var(--border-soft, #DEE0EC);
    border-radius: var(--r-md, 10px);
    padding: 6px 28px 6px 10px;
    min-height: 32px;
    width: auto;
    min-width: 70px;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%237B7F95' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px;
    transition: border-color .15s, box-shadow .15s;
}
.dt-length select.dt-input:hover,
.dt-length select:hover {
    border-color: var(--border-default, #C7CAD8);
}
.dt-length select.dt-input:focus,
.dt-length select:focus {
    outline: none;
    border-color: var(--brand, #8487EE);
    box-shadow: var(--focus-ring, 0 0 0 3px rgba(132,135,238,.22));
}

/* Info text ("Showing 1 to 10 of 737 entries") --------------- */
.dt-info {
    color: var(--fg-muted, #7B7F95);
    font-size: var(--fs-sm, 13px);
    font-weight: 500;
    padding: 0;
}

/* Buttons group (Excel / CSV / Column visibility / Print) ---- */
.dt-buttons {
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
}
.dt-buttons .dt-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-surface, #fff);
    border: 1px solid var(--border-soft, #DEE0EC);
    border-radius: var(--r-md, 10px);
    color: var(--fg-default, #3F4459);
    font-family: var(--font-body, "Nunito Sans"), system-ui, sans-serif;
    font-size: var(--fs-sm, 13px);
    font-weight: 600;
    padding: 6px 12px;
    min-height: 32px;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s, box-shadow .12s;
    box-shadow: none;
}
.dt-buttons .dt-button:hover,
.dt-buttons .dt-button:focus {
    background: var(--bg-muted, #F5F6FB);
    border-color: var(--border-default, #C7CAD8);
    color: var(--fg-strong, #14172A);
    outline: none;
    box-shadow: none;
}
.dt-buttons .dt-button:focus-visible {
    box-shadow: var(--focus-ring, 0 0 0 3px rgba(132,135,238,.22));
}
.dt-buttons .dt-button:active {
    background: var(--bg-inset, #ECEEF5);
    transform: none;
}
.dt-buttons .dt-button.disabled,
.dt-buttons .dt-button[disabled] {
    opacity: .55;
    cursor: not-allowed;
}

/* Column-visibility dropdown panel + items */
.dt-button-collection {
    background: var(--bg-surface, #fff);
    border: 1px solid var(--border-hairline, #ECEEF5);
    border-radius: var(--r-lg, 14px);
    box-shadow: var(--shadow-lg, 0 16px 32px rgba(20, 23, 42, .10));
    padding: 6px;
    min-width: 200px;
}
.dt-button-collection .dt-button {
    display: flex;
    width: 100%;
    justify-content: flex-start;
    background: transparent;
    border: 1px solid transparent;
    color: var(--fg-default, #3F4459);
    padding: 8px 10px;
    border-radius: var(--r-md, 10px);
    text-align: left;
}
.dt-button-collection .dt-button:hover {
    background: var(--bg-muted, #F5F6FB);
    border-color: transparent;
    color: var(--fg-strong, #14172A);
}
.dt-button-collection .dt-button.dt-button-active {
    background: var(--brand-tint, #EEF0FF);
    color: var(--brand-fg-on-tint, #2D2BA6);
    border-color: transparent;
}
.dt-button-collection .dt-button.dt-button-active::before {
    content: "\f00c"; /* FontAwesome check */
    font-family: "FontAwesome", sans-serif;
    margin-right: 8px;
    font-size: 11px;
    color: var(--brand, #8487EE);
}

/* Backdrop behind the column-visibility flyout */
.dt-button-background {
    background: rgba(20, 23, 42, .25) !important;
}

/* Pagination cluster -- keep the existing button styling but
   set a clean container layout. */
.dt-paging {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-wrap: wrap;
}
/* Note: .dt-paging-button is the <li>, not the <a>. Older code here used
   the legacy DT 1.x assumption that the button was the clickable element
   itself, but DT 2.x bootstrap5 wraps each button in <li>. The 0 10
   padding applied to li produces 20px of empty space around each
   32px <a>, blowing inter-button gap to 22px+ visually. Reset to 0;
   the actual button styling lives on .page-link below. */
.dt-paging .dt-paging-button {
    min-width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-md, 10px);
}
.dt-paging .dt-paging-button.first,
.dt-paging .dt-paging-button.previous,
.dt-paging .dt-paging-button.next,
.dt-paging .dt-paging-button.last {
    color: var(--fg-muted, #7B7F95);
    font-weight: 500;
}
.dt-paging .ellipsis {
    padding: 0 6px;
    color: var(--fg-subtle, #A2A6B8);
}

/* Sort indicators on every sortable column header, kit AttentionTable
   pattern: a neutral ↕ shows on all sortable columns at rest, swapped
   to ▲/▼ in brand color when that column is the active sort. Leverages
   paykonnect-design.css's `span.dt-column-title::after` slot. */
.dt-container table.dataTable thead th.dt-orderable-asc,
.dt-container table.dataTable thead th.dt-orderable-desc,
.dt-container table.dataTable thead th.dt-ordering-asc,
.dt-container table.dataTable thead th.dt-ordering-desc {
    cursor: pointer;
}
.dt-container table.dataTable thead th.dt-orderable-asc span.dt-column-title::after,
.dt-container table.dataTable thead th.dt-orderable-desc span.dt-column-title::after {
    content: "\f0dc" !important; /* fa-sort (neutral ↕) */
    color: var(--fg-subtle, #A2A6B8);
    opacity: 0.7;
    font-family: FontAwesome;
    margin-left: 6px;
    font-size: 10px;
}
.dt-container table.dataTable thead th[aria-sort="ascending"] span.dt-column-title::after {
    content: "\f0de" !important; /* fa-sort-asc (▲) */
    color: var(--brand, #8487EE);
    opacity: 1;
}
.dt-container table.dataTable thead th[aria-sort="descending"] span.dt-column-title::after {
    content: "\f0dd" !important; /* fa-sort-desc (▼) */
    color: var(--brand, #8487EE);
    opacity: 1;
}
/* Empty-header column (actions) -- no sort indicator */
.dt-container table.dataTable thead th[aria-label="actions"] span.dt-column-title::after,
.dt-container table.dataTable thead th:empty::after {
    content: "" !important;
}

/* Empty-table cell ("No matching records") */
.dt-empty {
    color: var(--fg-muted, #7B7F95);
    text-align: center;
    padding: 32px !important;
    font-size: var(--fs-md, 15px);
}


/* ---- DATATABLES bootstrap5 INTEGRATION --------------------
   DT 2.x with the bootstrap5 styling pack renders its controls
   via real Bootstrap classes:
     .dt-buttons .btn.btn-secondary  -- Excel / CSV / Print
     .dt-length  select.form-select  -- "Show 10 entries" page-size
     .dt-search  input.form-control  -- search box
     .dt-paging  .page-item .page-link -- pagination
   The earlier .dt-button + .dt-paging-button targeting alone
   missed these. The rules below align every DT toolbar control
   on a consistent 32px small sizing so the row doesn't show
   mismatched heights (Excel 40 / select 38 / search 38).
   ---------------------------------------------------------- */

/* All DT toolbar controls -- 36px to match the kit's pk-toolbar primitive
   (pk-export-btn / pk-toolbar__search .pk-input / pk-toolbar__entries select
   in components.css all use 36px height). pk-export-btn carries its own
   look but needs min-height + sizing here to beat Bootstrap's .btn 40px. */
.dt-container .dt-buttons .btn:not(.pk-export-btn),
.dt-container .dt-length .form-select,
.dt-container .dt-length .form-control,
.dt-container .dt-length select,
.dt-container .dt-search .form-control,
.dt-container .dt-search input,
.dt-container .colvis-toggle {
    min-height: 36px;
    height: 36px;
    padding: 6px 12px;
    font-size: var(--fs-sm, 13px);
    border-radius: var(--r-md, 10px);
    font-weight: 600;
    line-height: 1;
    box-sizing: border-box;
}

/* Export buttons specifically -- beat Bootstrap .btn defaults (min-height
   40px, Bootstrap --bs-border-color #CED4DA) so pk-export-btn from
   components.css actually takes effect. Bootstrap's .btn-secondary rule
   sets border-color via --bs-btn-border-color with equal specificity --
   !important needed on border-color to force the token. */
.dt-container .dt-buttons .btn.pk-export-btn,
.pk-toolbar .btn.pk-export-btn {
    min-height: 36px;
    height: 36px;
    padding: 0 12px;
    line-height: 1;
    background: #ffffff;
    border: 1px solid var(--border-soft, #DEE0EC) !important;
    color: var(--fg-default, #3F4459);
    border-radius: var(--r-md, 10px);
    box-sizing: border-box;
}
.dt-container .dt-buttons .btn.pk-export-btn--excel:hover,
.pk-toolbar .btn.pk-export-btn--excel:hover {
    border-color: var(--emerald-300, #4FE0A6);
    color: var(--emerald-700, #0E8462);
    background: var(--emerald-50, #ECFDF5);
}
.dt-container .dt-buttons .btn.pk-export-btn--csv:hover,
.pk-toolbar .btn.pk-export-btn--csv:hover {
    border-color: var(--teal-300, #65B4A1);
    color: var(--teal-700, #08665A);
    background: var(--teal-50, #ECF5F2);
}

/* Override SearchCard.css's `.gm-card-body .dt-container .dt-search { margin-left: auto; width: fit-content }`
   when the search is wrapped in pk-toolbar__search -- the new toolbar puts
   search on the LEFT, not pushed to the right. Higher specificity than the
   SearchCard rule (0,3,0) by nesting through .gm-card-body too. */
.gm-card-body .dt-container .pk-toolbar__search .dt-search,
.gm-card-body .dt-container .pk-toolbar .pk-toolbar__search .dt-search,
.pk-toolbar .pk-toolbar__search .dt-search,
.pk-toolbar__search .dt-search {
    margin-left: 0 !important;
    width: 100% !important;
    display: flex;
}
.gm-card-body .dt-container .pk-toolbar__search .dt-search input,
.pk-toolbar__search .dt-search input,
.pk-toolbar__search .dt-search .form-control {
    width: 100%;
    flex: 1 1 auto;
    min-width: 0;
    margin-left: 0;
}

/* Export buttons: the pk-export-btn class (assigned via the helper in
   paykonnect.js) carries the look. We just ensure focus ring + icon
   spacing here -- the actual outlined-pill styling and emerald/teal hover
   live in components.css's .pk-export-btn rule.
   4px gap (down from 8px) keeps Excel + CSV reading as a single export
   cluster sitting flush in the toolbar's right edge. */
.dt-container .dt-buttons {
    display: inline-flex;
    gap: 4px;
    flex-wrap: wrap;
}
/* Push the export cluster to the far right inside the toolbar group --
   no length selector after it anymore, so the group needs to actually
   own the right edge instead of leaving trailing space. */
.pk-toolbar .pk-toolbar__group { margin-left: auto; gap: 4px; }
.pk-toolbar .pk-toolbar__group .dt-buttons { gap: 4px; }

/* DT wraps export buttons in .dt-buttons.btn-group, which inherits
   Bootstrap's btn-group margin-chaining: margin-left:-1px on the
   2nd+ child and a stray margin-right on the last. Both fight the
   parent's gap and push the cluster 6-7px shy of the right edge,
   so the toolbar's right inset visually differs from the pagination's
   16px inset. Kill the legacy margins, let `gap` own spacing. */
.dt-container .dt-buttons.btn-group > .btn.pk-export-btn,
.dt-container .dt-buttons > .btn.pk-export-btn {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.dt-container .dt-buttons .btn.pk-export-btn:focus-visible {
    box-shadow: var(--focus-ring, 0 0 0 3px rgba(132,135,238,.22));
    outline: none;
}
.dt-container .dt-buttons .btn.pk-export-btn .fa {
    color: var(--fg-subtle, #A2A6B8);
    margin-right: 0;
}
.dt-container .dt-buttons .btn.pk-export-btn--excel:hover .fa { color: var(--emerald-600, #0FA876); }
.dt-container .dt-buttons .btn.pk-export-btn--csv:hover .fa { color: var(--teal-600, #08806F); }
.dt-container .dt-buttons .btn-group {
    gap: 8px;
}

/* Length-selector + search box value */
.dt-container .dt-length select,
.dt-container .dt-length .form-select {
    padding-right: 28px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%237B7F95' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px;
    background-color: var(--bg-surface, #fff);
    color: var(--fg-strong, #14172A);
    border: 1px solid var(--border-soft, #DEE0EC);
}

/* Search input -- including when wrapped in an input-group with the
   column-visibility eye toggle, so the end-cap radius reads clean.
   Uses background-color (not the `background` shorthand) so the SVG
   search-icon set by paykonnect-design.css via background-image stays. */
.dt-container .dt-search input,
.dt-container .dt-search .form-control {
    background-color: var(--bg-surface, #fff);
    color: var(--fg-strong, #14172A);
    border: 1px solid var(--border-soft, #DEE0EC);
    box-shadow: var(--shadow-inset, inset 0 1px 0 rgba(20, 23, 42, .03));
}
.dt-container .dt-search input:focus,
.dt-container .dt-search .form-control:focus {
    border-color: var(--brand, #8487EE);
    box-shadow: var(--focus-ring, 0 0 0 3px rgba(132,135,238,.22));
}

/* Input-group treatment: search input + eye-button column-visibility.
   Single rounded pill split into left-rounded input + right-rounded
   button with a shared 1px hairline divider between them. */
.dt-container .dt-search .input-group .form-control,
.dt-container .input-group .form-control:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right-width: 0;
}
.dt-container .input-group .btn:not(:first-child),
.dt-container .input-group .colvis-toggle {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left-width: 0;
}

/* Eye-button (column visibility toggle) */
.dt-container .colvis-toggle.btn,
.dt-container .colvis-toggle.btn.btn-outline-secondary {
    width: 32px;
    padding: 0;
    background: var(--bg-surface, #fff);
    border: 1px solid var(--border-soft, #DEE0EC);
    color: var(--fg-muted, #7B7F95);
}
.dt-container .colvis-toggle.btn:hover {
    background: var(--bg-muted, #F5F6FB);
    color: var(--fg-strong, #14172A);
    border-color: var(--border-default, #C7CAD8);
}

/* Info text alignment */
.dt-container .dt-info {
    color: var(--fg-muted, #7B7F95);
    font-size: var(--fs-sm, 13px);
    padding-top: 6px;
}
/* When the info text is wrapped in .pk-pagination__summary, the parent flex
   container (.pk-pagination, align-items: center) handles vertical centering.
   The DataTables Bootstrap5 CSS (loaded from CDN) sets padding-top via a
   rem-based value with high specificity, pushing the text down inside the
   info element so it reads bottom-anchored even though the container is
   centered. !important needed to win against the upstream rule. */
.pk-pagination .dt-info,
.pk-pagination__summary .dt-info,
.dt-container .pk-pagination .dt-info,
.dt-container .pk-pagination__summary .dt-info {
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1.4;
}
.pk-pagination__summary {
    line-height: 1;
}

/* Pagination -- DT 2.x bootstrap5 renders .page-item > .page-link. Map to
   the kit's pk-pagination__btn aesthetic (components.css). Wrapped in
   .pk-pagination by the dom layout in getStandardDataTablesLayoutWithExportButtons,
   so the summary-left + controls-right band styling comes from pk-pagination
   directly. */
.pk-pagination .dt-paging,
.dt-container .dt-paging {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-wrap: wrap;
}
.pk-pagination .dt-paging .page-item,
.dt-container .dt-paging .page-item {
    margin: 0;
}
/* Pagination buttons -- map DT 2.x bootstrap5 .page-item/.page-link to the
   kit's .pk-pagination__btn spec (components.css L588-617 in pkds5).
   - .page-item (li) sized to its content with NO horizontal padding.
     DT bootstrap5 integration's default rule gives .page-item 8px padding
     on each side, which makes 32px buttons sit inside 50px li cells --
     producing 18px of empty whitespace between adjacent <a> boxes that
     reads as huge inter-button gaps. Kit has 2px gap between buttons.
   - .page-link is the actual 32x32 button. min-width 32 not width 32 so the
     « ‹ › » glyph buttons can grow if needed but page-number cells stay tight.
   - Active state uses --brand (NOT --brand-fg-on-tint) per kit spec; that's
     soft indigo on indigo-50 with --brand-border outline, which reads as
     "you are here" without grabbing the eye. */
.pk-pagination .dt-paging .page-item,
.dt-container .dt-paging .page-item {
    display: inline-flex !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}
/* The actual flex container holding the .page-item siblings is the <ul>
   (Bootstrap pagination wraps the <li>s in <ul class="pagination">), NOT
   the outer .dt-paging div. So the inter-button gap has to be set on the
   <ul>. 2px matches the kit's .pk-pagination__pages gap. */
.pk-pagination .dt-paging .pagination,
.dt-container .dt-paging .pagination,
.dt-paging > .pagination {
    display: inline-flex !important;
    align-items: center;
    gap: 2px !important;
    padding: 0;
    margin: 0;
    list-style: none;
}
/* Note: .dt-paging-button class is applied by DT to the <li>, not the <a>.
   So this selector list intentionally ONLY targets `.page-link` (the inner
   <a>); pulling .dt-paging-button into the list -- as an earlier version
   did -- would apply the 0 8 padding to the <li> too, producing 16px of
   empty space around each 32px <a> and ballooning li width to 50px (which
   visually reads as huge inter-button spacing). */
.pk-pagination .dt-paging .page-item .page-link,
.dt-container .dt-paging .page-item .page-link {
    min-width: 32px !important;
    height: 32px !important;
    padding: 0 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--fg-default, #3F4459) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: var(--r-sm, 6px) !important;
    font: 600 13px var(--font-body, "Nunito Sans") !important;
    font-variant-numeric: tabular-nums;
    margin: 0;
    box-shadow: none;
    line-height: 1;
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}
.dt-container .dt-paging .page-item:not(.disabled):not(.active) .page-link:hover {
    background: var(--bg-muted, #F5F6FB) !important;
    color: var(--fg-strong, #14172A) !important;
    border-color: var(--border-hairline, #ECEEF5) !important;
}
/* No hover state on the currently-active page button -- the brand-tint
   pill is the steady-state indicator that "you are here", and changing
   it on hover (the kit doesn't) would suggest the button is clickable
   for a different action. Per kit components.css L607 (.pk-pagination__btn.is-active). */
.dt-container .dt-paging .page-item.active .page-link:hover {
    background: var(--brand-tint, #EEF0FF) !important;
    color: var(--brand, #8487EE) !important;
    border-color: var(--brand-border, #C2C6FC) !important;
    cursor: default;
}
.dt-container .dt-paging .page-item .page-link:focus,
.dt-container .dt-paging .page-item .page-link:focus-visible {
    box-shadow: var(--focus-ring, 0 0 0 3px rgba(132,135,238,.22));
    outline: none;
}
.dt-container .dt-paging .page-item.active .page-link {
    background: var(--brand-tint, #EEF0FF) !important;
    color: var(--brand, #8487EE) !important;
    border-color: var(--brand-border, #C2C6FC) !important;
}
.dt-container .dt-paging .page-item.disabled .page-link {
    color: var(--fg-subtle, #A2A6B8) !important;
    background: transparent !important;
    border-color: transparent !important;
    cursor: not-allowed !important;
    /* Bootstrap sets `.page-item.disabled .page-link { pointer-events: none }`
       which kills the not-allowed cursor effect (no events on the element
       means the cursor falls through to whatever the parent has). Override
       to auto so the cursor: not-allowed actually renders. DT 2.x checks
       aria-disabled on click so we don't lose click-blocking. */
    pointer-events: auto !important;
}
/* not-allowed cursor on the li wrapper too, so it shows when the mouse
   hovers the padding area outside the inner <a>. */
.dt-container .dt-paging .page-item.disabled {
    cursor: not-allowed;
}
/* First/Previous/Next/Last chevron buttons -- replace DT's default text
   glyphs (« ‹ › ») with SVG icons matching the kit Pagination component
   (design-system/ui_kits/web-console/PlansScreen.jsx PaginationArrow). */
.dt-container .dt-paging .page-item.first .page-link,
.dt-container .dt-paging .page-item.previous .page-link,
.dt-container .dt-paging .page-item.next .page-link,
.dt-container .dt-paging .page-item.last .page-link {
    font-size: 0;
    color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 14px;
}
.dt-container .dt-paging .page-item.first .page-link {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237B7F95' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='11 17 6 12 11 7'/%3E%3Cpolyline points='18 17 13 12 18 7'/%3E%3C/svg%3E");
}
.dt-container .dt-paging .page-item.previous .page-link {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237B7F95' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E");
}
.dt-container .dt-paging .page-item.next .page-link {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237B7F95' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
}
.dt-container .dt-paging .page-item.last .page-link {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237B7F95' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='13 17 18 12 13 7'/%3E%3Cpolyline points='6 17 11 12 6 7'/%3E%3C/svg%3E");
}

/* ============================================================
   DataTables 2.x layout: Bootstrap5 integration `.row` wrappers
   ------------------------------------------------------------
   DT 2.x with the bootstrap5 styling pack wraps each layout cell
   in a Bootstrap `<div class="row mt-2 justify-content-between">`
   row + `<div class="col-md-auto me-auto/ms-auto">` cells.

   That uses Bootstrap's default `.row { margin: 0 -.75rem; }` which
   makes the toolbar / pagination rows OVERHANG the .gm-card-body
   content edge by 12px on each side -- search input, table header
   cells, and paging buttons all visually bleed past the card border.

   Plus each row gets `mt-2` (margin-top: .5rem = 8px), producing
   inconsistent vertical seams between the toolbar, table, and
   pagination instead of the kit's flush hairline-divided look.

   The kit's pk-toolbar / pk-pagination are:
     - flush with the card body (no horizontal bleed)
     - padded 12 16 internally
     - hairline divider top/bottom; pagination has --bg-surface-2 tint
     - no margin between toolbar -> table -> pagination

   These rules restyle the actual rendered DT 2.x classes to match.
   ============================================================ */

/* ============================================================
   UNIVERSAL DT BRIDGE (works for any DataTable across the app)
   ------------------------------------------------------------
   Different pages init DataTables with different dom configs.
   Some (Home/Index, the new helper) use a "justify-content-between"
   3-row layout. Most legacy pages (Company, Maps, Plan/Search,
   Session/Index, etc.) use the old dom string that produces
   "row align-items-center" for toolbar and unqualified ".row" for
   table + footer.

   The rules below target by CHILD CONTENT (using :has) so they fire
   on every DT regardless of which dom config the page used:
     - any row with .dt-search        → toolbar styling
     - any row with .dt-info/.dt-paging → footer styling
     - any row with the actual table  → flush, no margins

   This means new DataTable pages light up automatically with the
   kit look as long as they live inside .gm-card-body.
   ============================================================ */

/* When a .gm-card-body's only content is a DT-container, drop the
   card-body's 20-24px padding so the toolbar/table/footer rows span
   the entire panel width edge-to-edge. The toolbar + footer rows
   get their own 16px horizontal inset internally for content. */
.gm-card-body:has(> .dt-container),
.gm-card-body:has(> .dataTables_wrapper),
.gm-card-body:has(> [id$="_wrapper"].dt-container) {
    padding: 0 !important;
}

/* Cancel the Bootstrap .row negative margin and the legacy mt-1 / mt-2
   gaps on every DT row so toolbar -> table -> footer sit flush. */
.gm-card-body .dt-container > .row,
#needsAttention .dt-container > .row {
    margin: 0 !important;
    padding: 0;
}
.gm-card-body .dt-container > .row > [class*="col"],
#needsAttention .dt-container > .row > [class*="col"] {
    padding-left: 0;
    padding-right: 0;
    margin-top: 0 !important;
}

/* TOOLBAR ROW — any row containing the search input or export buttons.
   Catches both the new-layout `.row.justify-content-between` (Home) and
   the old-dom `.row.align-items-center` (Company / Maps / Plan etc.). */
.gm-card-body .dt-container > .row.justify-content-between:first-of-type,
.gm-card-body .dt-container > .row.align-items-center,
.gm-card-body .dt-container > .row:has(> [class*="col"] > .dt-search),
.gm-card-body .dt-container > .row:has(> [class*="col"] > .dt-buttons),
#needsAttention .dt-container > .row.justify-content-between:first-of-type {
    padding: 10px 16px !important;
    border-bottom: 1px solid var(--border-hairline, #ECEEF5);
    background: #fff;
    align-items: center !important;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* TOOLBAR COL REORDER — Bootstrap col-sm-auto's natural order in the legacy
   DT dom is [buttons][length][search-right]. Kit wants [search-left][...][buttons-right].
   Flex `order` reorders visually without changing DOM. Search gets order 1
   (leftmost), length 2, buttons 3 (pushed right with margin-left auto). */
.gm-card-body .dt-container > .row > [class*="col"]:has(> .dt-search) {
    order: 1;
    flex: 1 1 240px;
    max-width: 360px;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    align-items: center;
    justify-content: flex-start !important;
}
.gm-card-body .dt-container > .row > [class*="col"]:has(> .dt-length) {
    order: 2;
    padding: 0 !important;
    margin: 0 !important;
    flex: 0 0 auto;
}
.gm-card-body .dt-container > .row > [class*="col"]:has(> .dt-buttons) {
    order: 3;
    padding: 0 !important;
    margin: 0 0 0 auto !important;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

/* FOOTER ROW — any row containing the dt-info or dt-paging.
   Catches both new-layout `.justify-content-between:last-of-type` and
   the legacy `.row` with col-sm-6 children. Tight 8px vertical padding,
   bg-surface-2 tint, hairline border-top. */
.gm-card-body .dt-container > .row.justify-content-between:last-of-type,
.gm-card-body .dt-container > .row:has(> [class*="col"] > .dt-info),
.gm-card-body .dt-container > .row:has(> [class*="col"] > .dt-paging),
#needsAttention .dt-container > .row.justify-content-between:last-of-type {
    padding: 8px 16px !important;
    border-top: 1px solid var(--border-hairline, #ECEEF5);
    background: var(--bg-surface-2, #FAFBFE) !important;
    align-items: center !important;
    display: flex;
    flex-wrap: wrap;
    margin: 0 !important;
}
/* Footer col children: info on left (no margin), paging cluster on right (margin-left auto). */
.gm-card-body .dt-container > .row:has(.dt-info) > [class*="col"]:has(.dt-info) {
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex;
    align-items: center;
    flex: 1 1 auto;
}
.gm-card-body .dt-container > .row:has(.dt-paging) > [class*="col"]:has(.dt-paging) {
    padding: 0 !important;
    margin: 0 0 0 auto !important;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end !important;
    gap: 12px;
    flex: 0 0 auto;
}

/* TABLE ROW — any row whose direct grandchild is the table.
   No padding, no margin, full width — let cells do their own spacing
   via the body table:not(.dataTable) rule above (12 16 on thead,
   16 all on tbody). */
.gm-card-body .dt-container > .row:has(> [class*="col"] > table),
.gm-card-body .dt-container > .row:has(> [class*="col"] > .table) {
    padding: 0 !important;
    margin: 0 !important;
}
.gm-card-body .dt-container > .row:has(> [class*="col"] > table) > [class*="col"],
.gm-card-body .dt-container > .row:has(> [class*="col"] > .table) > [class*="col"] {
    padding: 0 !important;
    margin: 0 !important;
}

/* Make every DataTable use 100% width of its container by default. */
.gm-card-body .dt-container table.dataTable,
.gm-card-body .dataTables_wrapper table.dataTable {
    width: 100% !important;
    margin: 0 !important;
}

/* Universal .dt-search flush-left override.
   SearchCard.css has `.gm-card-body .dt-container .dt-search { margin-left: auto; width: fit-content }`
   which pushes the search input to the right of its column. For our kit-style
   left-aligned toolbar we want the .dt-search element flush to the left edge
   of its column with no auto-margin.

   width: fit-content (NOT 100%/max-width) so the wrapper only takes as much
   space as the actual input + any colvis-toggle inside, not the entire column.
   No max-width — let the wrapper hug the input precisely so the focus ring
   on the input doesn't appear to extend into empty wrapper space. */
.gm-card-body .dt-container > .row > [class*="col"] .dt-search,
.gm-card-body .dt-container > .row > [class*="col"] > .dt-search,
.gm-card-body .dt-container .dt-search {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: fit-content !important;
    max-width: none !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: flex-start !important;
}
/* Search INPUT itself should be a reasonable fixed width (kit uses 240px
   in pk-toolbar__search). 100% within the fit-content wrapper would
   collapse to the input's natural width. */
.gm-card-body .dt-container > .row > [class*="col"] .dt-search input,
.gm-card-body .dt-container > .row > [class*="col"] > .dt-search input,
.gm-card-body .dt-container .dt-search input {
    width: 240px !important;
    max-width: 240px !important;
    flex: 0 0 auto;
}

/* Excel/CSV button cluster: tight gap, kit style.
   Reach across both old-dom and new-layout DT renderings. */
.gm-card-body .dt-container .dt-buttons {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

/* Length selector: keep compact, no extra margins. */
.gm-card-body .dt-container .dt-length {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    color: var(--fg-muted, #7B7F95);
    font-size: var(--fs-sm, 13px);
    margin: 0;
}

/* Relocated "Rows N" pill (moved from toolbar to footer by the global
   init.dt hook in paykonnect.js). Styled to match the kit's
   .pk-pagination__size primitive. */
.gm-card-body .dt-container .pk-pagination__size--bridged {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 12px;
    color: var(--fg-muted, #7B7F95);
    font-size: var(--fs-sm, 13px);
    white-space: nowrap;
}
.gm-card-body .dt-container .pk-pagination__size--bridged select {
    height: 32px;
    min-height: 32px;
    padding: 4px 28px 4px 10px;
    font-size: 13px;
    width: auto;
    border: 1px solid var(--border-hairline, #ECEEF5) !important;
    border-radius: var(--r-md, 10px);
    background-color: #fff;
    color: var(--fg-strong, #14172A);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%237B7F95' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 14px 14px;
}

/* Force gm-card-body padding off whenever it contains a dt-container ANYWHERE
   in its descendant tree (not just direct child). Fallback for pages where
   the dt-container is wrapped in additional markup. */
.gm-card-body:has(.dt-container) {
    padding: 0 !important;
}

/* The cells inside the footer row -- ensure both vertically center their
   contents. Without this, the "Showing 1-2 of 2" text sits on the row
   baseline while the page buttons (height 32) sit centered, so the text
   appears to ride low. */
.gm-card-body .dt-container > .row.justify-content-between > .col-md-auto,
#needsAttention .dt-container > .row.justify-content-between > .col-md-auto {
    display: inline-flex;
    align-items: center;
}

/* Table row: no extra padding/margin -- the table owns its own spacing. */
.gm-card-body .dt-container > .row.justify-content-md-center,
#needsAttention .dt-container > .row.justify-content-md-center {
    padding: 0;
}
.gm-card-body .dt-container > .row.justify-content-md-center > [class*="col"],
#needsAttention .dt-container > .row.justify-content-md-center > [class*="col"] {
    padding: 0;
}

/* The right-aligned cell in the footer holds paging + pageLength. Give it
   inline-flex with a 12px gap so the paging cluster and the Rows selector
   read as a single right-side group (kit pattern). */
.gm-card-body .dt-container > .row.justify-content-between > .col-md-auto.ms-auto,
#needsAttention .dt-container > .row.justify-content-between > .col-md-auto.ms-auto {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

/* Info text: tabular numbers, muted color, no padding (centered by row's
   align-items). Mirrors .pk-pagination__summary. */
.gm-card-body .dt-container .dt-info,
#needsAttention .dt-container .dt-info {
    font-size: var(--fs-sm, 13px);
    color: var(--fg-muted, #7B7F95);
    font-variant-numeric: tabular-nums;
    padding: 0;
    margin: 0;
    line-height: 1.4;
}
.gm-card-body .dt-container .dt-info strong,
#needsAttention .dt-container .dt-info strong {
    color: var(--fg-strong, #14172A);
    font-weight: 600;
}

/* Page-length wrapper at the bottom: render the "X per page" / "Rows X" pill
   inline alongside the paging buttons, both on the right. */
.gm-card-body .dt-container .dt-length,
#needsAttention .dt-container .dt-length {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-sm, 13px);
    color: var(--fg-muted, #7B7F95);
    white-space: nowrap;
    margin: 0;
}
.gm-card-body .dt-container .dt-length select,
#needsAttention .dt-container .dt-length select {
    height: 32px;
    min-height: 32px;
    padding: 4px 28px 4px 10px;
    font-size: 13px;
    width: auto;
}

/* ============================================================
   PHASE 2 BRIDGE EXPANSION — discovered via crawl of 105 pages
   ------------------------------------------------------------
   Crawl analysis (/c/temp/reskin/results.json) showed the bridge
   covers 90%+ of the app for chrome (body bg, card, btn-primary,
   form-control). The remaining gaps cluster in three areas, all
   of which are global enough to fix in one bridge sweep:

     1. Table thead font-weight / text-transform / case — 42 pages
        render thead at Bootstrap default 500 weight + lowercase
        instead of the kit's 700 + UPPERCASE. The kit pk-table
        sets these on every thead th; the legacy chrome only
        applied to .gm-table thead, missing pages whose tables
        don't use .gm-table.

     2. .nav-tabs (Bootstrap tabs) — many pages use Bootstrap's
        nav-tabs for in-card tab rows. Default Bootstrap renders
        with a thick gray border-bottom + chunky pills. Kit
        equivalent is .pk-segmented (subtle bg + brand-tint
        active state). Bridge maps the visual treatment.

     3. .modal-content / .modal-header — Bootstrap modal default
        has a hard-edged white box with a chunky header. Kit
        prefers a rounded card aesthetic.
   ============================================================ */

/* --- Table thead: kit spec on EVERY non-opt-out table app-wide.
   Per components.css L305: weight 700, uppercase, fs-xs, letter-spacing
   .06em, color --fg-muted, bg --bg-surface-2, padding 12 16.
   Body-wide so pages outside .gm-card/.gm-content catch it too.
   Pages can opt out by adding class .gm-table-no-bridge on the
   <table> element. */
body table:not(.gm-table-no-bridge):not(.dataTable) > thead > tr > th {
    font-family: var(--font-body, "Nunito Sans"), sans-serif;
    font-size: var(--fs-xs, 12px);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--fg-muted, #7B7F95);
    background-color: var(--bg-surface-2, #FAFBFE);
    border-bottom: 1px solid var(--border-hairline, #ECEEF5);
    padding: 12px 16px;
    white-space: nowrap;
}
body table:not(.gm-table-no-bridge):not(.dataTable) > tbody > tr > td {
    padding: 16px;
    font-size: var(--fs-md, 15px);
    color: var(--fg-default, #3F4459);
    border-bottom: 1px solid var(--border-hairline, #ECEEF5);
    vertical-align: middle;
}
body table:not(.gm-table-no-bridge):not(.dataTable) > tbody > tr:hover > td {
    background-color: var(--bg-muted, #F5F6FB);
}
body table:not(.gm-table-no-bridge):not(.dataTable) > tbody > tr:last-child > td {
    border-bottom: none;
}

/* --- DataTables 2.x rendered tables (.dataTable). My body-wide thead
   rule above excludes .dataTable because DT injects its own classes;
   without an explicit rule here, DT tables fall back to Bootstrap's
   default 500-weight lowercase thead. This block applies the kit's
   700/uppercase/bg-surface-2 treatment to every DT-rendered thead. */
.dt-container table.dataTable > thead > tr > th,
.gm-card-body table.dataTable > thead > tr > th {
    font-family: var(--font-body, "Nunito Sans"), sans-serif;
    font-size: var(--fs-xs, 12px) !important;
    font-weight: 700 !important;
    letter-spacing: .06em;
    text-transform: uppercase !important;
    color: var(--fg-muted, #7B7F95);
    background-color: var(--bg-surface-2, #FAFBFE) !important;
    border-bottom: 1px solid var(--border-hairline, #ECEEF5);
    padding: 12px 16px;
    white-space: nowrap;
}
.dt-container table.dataTable > tbody > tr > td,
.gm-card-body table.dataTable > tbody > tr > td {
    padding: 16px;
    font-size: var(--fs-md, 15px);
    color: var(--fg-default, #3F4459);
    border-bottom: 1px solid var(--border-hairline, #ECEEF5);
    vertical-align: middle;
}
.dt-container table.dataTable > tbody > tr:hover > td,
.gm-card-body table.dataTable > tbody > tr:hover > td {
    background-color: var(--bg-muted, #F5F6FB);
}

/* --- Bootstrap .nav-tabs → kit pk-segmented look.
   Default Bootstrap nav-tabs uses a heavy gray border-bottom + active
   tab outline. Kit segmented control is a subtle pill rail with a
   brand-tint active state inside a slate-100 track. We don't reshape
   the DOM here (.nav-tabs stays a horizontal list), but recolor the
   tab links so they read as kit-style toggles. */
.gm-card-body .nav-tabs,
.gm-card .nav-tabs {
    border-bottom: 1px solid var(--border-hairline, #ECEEF5);
    margin-bottom: 16px;
    gap: 4px;
}
.gm-card-body .nav-tabs .nav-link,
.gm-card .nav-tabs .nav-link {
    color: var(--fg-default, #3F4459);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--r-md, 10px) var(--r-md, 10px) 0 0;
    padding: 8px 14px;
    font-weight: 600;
    font-size: var(--fs-sm, 13px);
    transition: background .12s, color .12s, border-color .12s;
}
.gm-card-body .nav-tabs .nav-link:hover,
.gm-card .nav-tabs .nav-link:hover {
    background: var(--bg-muted, #F5F6FB);
    color: var(--fg-strong, #14172A);
    border-color: transparent;
}
.gm-card-body .nav-tabs .nav-link.active,
.gm-card .nav-tabs .nav-link.active {
    color: var(--brand, #8487EE);
    background: var(--brand-tint, #EEF0FF);
    border-color: transparent;
    border-bottom-color: var(--brand, #8487EE);
}

/* --- Bootstrap modal → kit pk-card look.
   Round the corners + soften the header + use the hairline divider. */
.modal-content {
    border: 1px solid var(--border-hairline, #ECEEF5) !important;
    border-radius: var(--r-xl, 20px) !important;
    box-shadow: var(--shadow-lg, 0 20px 40px -16px rgba(20, 23, 42, .25)) !important;
    overflow: hidden;
}
.modal-header {
    padding: 18px 24px !important;
    border-bottom: 1px solid var(--border-hairline, #ECEEF5) !important;
    background: #fff;
}
.modal-header .modal-title,
.modal-header h4,
.modal-header h5 {
    font-family: var(--font-display, Montserrat), sans-serif;
    font-weight: 700;
    font-size: var(--fs-lg, 18px);
    color: var(--fg-strong, #14172A);
    line-height: 1.2;
}
.modal-body {
    padding: 24px !important;
    color: var(--fg-default, #3F4459);
}
.modal-footer {
    padding: 14px 24px !important;
    border-top: 1px solid var(--border-hairline, #ECEEF5) !important;
    background: var(--bg-surface-2, #FAFBFE);
    gap: 8px;
}

/* --- Stamp out residual hardcoded legacy blues that bypass --brand.
   Found on Account/PasswordRecovery, Session/HistoryTime,
   TimeKeep/ThresholdList, UserProvisioning/OnboardError. These pages
   either use a separate layout (auth/onboarding) without .gm-content,
   or have per-page CSS hardcoding #2563eb / rgb(41, 110, 198). Use
   body-wide scope so the bridge reaches pages that aren't under the
   gm-* chrome too. */
body .btn-primary,
body button.btn-primary,
body input.btn-primary,
body input[type="submit"].btn-primary,
html .btn-primary {
    background-color: var(--brand, #8487EE) !important;
    border-color: var(--brand, #8487EE) !important;
    color: #fff !important;
}
body .btn-primary:hover,
body button.btn-primary:hover,
body input.btn-primary:hover,
html .btn-primary:hover {
    background-color: var(--brand-hover, #6063EE) !important;
    border-color: var(--brand-hover, #6063EE) !important;
}

/* --- Stamp out residual hardcoded form-control borders (Bootstrap
   default #ced4da, #d1d5db). Body-wide scope so auth pages catch it. */
body .form-control,
body .form-select,
body input.form-control,
body textarea.form-control,
body select.form-select,
html .form-control,
html .form-select {
    border-color: var(--border-hairline, #ECEEF5) !important;
}
body .form-control:focus,
body .form-select:focus,
html .form-control:focus,
html .form-select:focus {
    border-color: var(--brand, #8487EE) !important;
    box-shadow: var(--focus-ring, 0 0 0 3px rgba(132,135,238,.22)) !important;
}
/* --- Body background fallback: auth + onboarding pages don't sit
   under .app .main > .content so their body bg defaults to white or
   the legacy slate. Set --bg-canvas globally so any page without an
   explicit override picks it up. The chrome-pages set their own bg
   on inner elements (.app, .content) so this body rule is harmless
   to them. */
body {
    background-color: var(--bg-canvas, #F8F9FC);
}

/* --- Bootstrap .form-select (custom dropdown indicator)
   Use the kit's caret SVG so all selects look consistent. */
.gm-content .form-select,
.gm-card-body .form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%237B7F95' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
}

/* --- .list-group / .list-group-item — flat list cards used by some
   admin pages for selectable items. Map to a row hover that mirrors
   pk-table tbody tr hover. */
.gm-card-body .list-group-item,
.gm-card .list-group-item {
    border-color: var(--border-hairline, #ECEEF5);
    color: var(--fg-default, #3F4459);
    padding: 12px 16px;
}
.gm-card-body .list-group-item:hover,
.gm-card .list-group-item:hover {
    background-color: var(--bg-muted, #F5F6FB);
}
.gm-card-body .list-group-item.active,
.gm-card .list-group-item.active {
    background-color: var(--brand-tint, #EEF0FF);
    border-color: var(--brand-border, #C2C6FC);
    color: var(--brand-fg-on-tint, #2D2BA6);
}

/* --- Bootstrap .breadcrumb — used on some admin pages.
   Kit doesn't have its own breadcrumb component but the topbar
   crumbs pattern (.topbar__crumbs) is the closest analog. Recolor
   the legacy breadcrumb to read consistently. */
.breadcrumb {
    background: transparent !important;
    padding: 0 !important;
    margin-bottom: 16px;
    font-size: var(--fs-sm, 13px);
    color: var(--fg-muted, #7B7F95);
}
.breadcrumb-item + .breadcrumb-item::before {
    color: var(--fg-subtle, #A2A6B8);
}
.breadcrumb-item.active {
    color: var(--fg-strong, #14172A);
    font-weight: 600;
}

/* --- Bootstrap .progress + .progress-bar — used by long-running
   admin tools (file uploads, batch processes). Brand tint for the
   filled portion. */
.progress {
    height: 8px;
    background-color: var(--bg-inset, #ECEEF5);
    border-radius: var(--r-pill, 999px);
    overflow: hidden;
}
.progress-bar {
    background-color: var(--brand, #8487EE);
}

/* --- Bootstrap .input-group — recolor the end-cap to match the
   kit's flat hairline border. */
.gm-card-body .input-group .input-group-text,
.gm-card .input-group .input-group-text {
    background-color: var(--bg-surface-2, #FAFBFE);
    border-color: var(--border-hairline, #ECEEF5);
    color: var(--fg-muted, #7B7F95);
}

/* ============================================================
   PHASE 4 BRIDGE EXPANSION — universal DT sort indicator + empty
   state. Discovered via audit of 8 representative pages
   (audit-results.json). Three findings affecting every DT page:

     1. Sort chevron is missing from .sorting headers (DT 2.x
        relies on theme-specific CSS for the up/down arrow icons;
        Bootstrap5 integration includes a default arrow but it
        doesn't match the kit aesthetic)
     2. .dt-empty / "No matching records" text renders in
        --fg-default (#3F4459) instead of kit --fg-muted (#7B7F95)
     3. Sort active state needs to read in --brand color
   ============================================================ */

/* Sort chevron — applied to every DT thead column-title via ::after.
   DT 2.x actually uses these classes (verified via probe — NOT the
   .sorting / .sorting_asc / .sorting_desc from DT 1.x):
     th.dt-orderable-asc.dt-orderable-desc                       = sortable, not active (show ↕)
     th.dt-orderable-asc.dt-orderable-desc.dt-ordering-asc       = currently sorted ascending (show ▲ in --brand)
     th.dt-orderable-asc.dt-orderable-desc.dt-ordering-desc      = currently sorted descending (show ▼ in --brand)
   FontAwesome glyphs used because the worktree already loads FontAwesome
   globally. Matches the kit PlansScreen.jsx pattern (subtle gray at
   rest, brand color when active sort). */
.dt-container table.dataTable thead th.dt-orderable-asc,
.dt-container table.dataTable thead th.dt-orderable-desc,
.dt-container table.dataTable thead th.dt-ordering-asc,
.dt-container table.dataTable thead th.dt-ordering-desc {
    position: relative;
    cursor: pointer;
    padding-right: 28px !important;
}
.dt-container table.dataTable thead th.dt-orderable-asc::after,
.dt-container table.dataTable thead th.dt-orderable-desc::after,
.dt-container table.dataTable thead th.dt-ordering-asc::after,
.dt-container table.dataTable thead th.dt-ordering-desc::after {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-family: "FontAwesome", "Font Awesome 5 Free", "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 11px;
    line-height: 1;
    color: var(--fg-subtle, #A2A6B8);
    opacity: 1;
    background: none !important;
    content: "\f0dc"; /* fa-sort (default = unsorted) */
}
.dt-container table.dataTable thead th.dt-ordering-asc::after {
    content: "\f0de"; /* fa-sort-up */
    color: var(--brand, #8487EE) !important;
}
.dt-container table.dataTable thead th.dt-ordering-desc::after {
    content: "\f0dd"; /* fa-sort-down */
    color: var(--brand, #8487EE) !important;
}
/* Hide DT 2.x's default arrow span (.dt-column-order) which has its own
   background-image arrows that would conflict with our ::after chevron. */
.dt-container table.dataTable thead th .dt-column-order {
    display: none !important;
}

/* Empty state — when a search/filter yields zero rows OR the table is
   loaded with no data, DT renders <tr><td class="dt-empty" colspan="N">No
   matching records found</td></tr>. Kit pattern: --fg-muted color, 40px
   padding, centered, no row-hover-bg cascading into it. */
.dt-container td.dt-empty,
.dt-container td.dataTables_empty {
    color: var(--fg-muted, #7B7F95) !important;
    padding: 40px 16px !important;
    text-align: center !important;
    font-size: var(--fs-sm, 13px);
    background: transparent !important;
}
.dt-container table.dataTable tbody tr:hover td.dt-empty,
.dt-container table.dataTable tbody tr:hover td.dataTables_empty {
    background: transparent !important;
}

/* ============================================================
   AUDIT BUCKET A — Form validation, tabular numbers, tooltips
   ============================================================ */

/* --- Form .is-invalid state.
   Bootstrap default uses --bs-form-invalid-color (#dc3545 hardcoded red).
   Kit canonical is --rose-500 for the border + --rose-600 for the helper
   text. Bridge to rose tokens app-wide. The Bootstrap rule's specificity
   is .form-control.is-invalid (0,2,0) — match with !important since we
   want token consistency. */
body .form-control.is-invalid,
body .form-select.is-invalid,
body .was-validated .form-control:invalid,
body .was-validated .form-select:invalid {
    border-color: var(--rose-500, #EC4470) !important;
    background-image: none;  /* Bootstrap injects a red ! icon; kit doesn't */
    padding-right: 14px;     /* Restore standard right padding (Bootstrap shifts for the icon) */
}
body .form-control.is-invalid:focus,
body .form-select.is-invalid:focus,
body .was-validated .form-control:invalid:focus,
body .was-validated .form-select:invalid:focus {
    border-color: var(--rose-500, #EC4470) !important;
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--rose-500, #EC4470) 22%, transparent) !important;
}
body .invalid-feedback,
body .was-validated .form-control:invalid ~ .invalid-feedback,
body .was-validated .form-select:invalid ~ .invalid-feedback {
    color: var(--rose-600, #D62759);
    font-size: var(--fs-xs, 12px);
    font-weight: 500;
    display: block;
    margin-top: 4px;
}
/* Required-field indicator: kit pattern is a 4px brand-tint left edge on
   the field + red asterisk in the label. Honor an `aria-required="true"`
   attribute OR the legacy `[required]` attribute on inputs. */
body .form-control[required],
body .form-select[required],
body .form-control[aria-required="true"],
body .form-select[aria-required="true"] {
    border-left-width: 4px;
    border-left-color: var(--brand-tint-2, #DEE1FF);
}
body label.required::after,
body .pk-field__label.required::after,
body label[for] + .form-control[required] ~ label::after {
    content: " *";
    color: var(--rose-500, #EC4470);
    font-weight: 700;
    margin-left: 2px;
}

/* --- Tabular numerals on numeric table columns.
   Without this, digit widths vary and totals don't align vertically.
   Apply to every td that is text-aligned right (Bootstrap idiom for
   numeric columns) OR has .text-end / .text-right utility class. Also
   apply to elements explicitly marked .pk-num (escape hatch). */
body table tbody td[align="right"],
body table tbody td.text-end,
body table tbody td.text-right,
body table tbody td.pk-num,
body .pk-num,
body .gm-card-body td.text-end,
body .gm-card-body td.text-right {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    text-align: right;
}

/* --- Bootstrap tooltip → kit aesthetic.
   Default Bootstrap tooltip has dark slate bg + white text + no border.
   Kit tooltip would be a light surface with hairline border (matches the
   token canon used by dropdowns). */
.tooltip {
    --bs-tooltip-bg: transparent;
    font-family: var(--font-body, "Nunito Sans"), sans-serif;
    font-size: var(--fs-xs, 12px);
}
.tooltip .tooltip-inner {
    background-color: var(--fg-strong, #14172A) !important;
    color: #fff !important;
    border-radius: var(--r-md, 10px);
    padding: 6px 10px;
    font-weight: 500;
    box-shadow: var(--shadow-md, 0 8px 24px -8px rgba(20, 23, 42, .18));
    max-width: 280px;
    text-align: left;
}
.tooltip.bs-tooltip-top .tooltip-arrow::before,
.tooltip.bs-tooltip-bottom .tooltip-arrow::before,
.tooltip.bs-tooltip-start .tooltip-arrow::before,
.tooltip.bs-tooltip-end .tooltip-arrow::before {
    border-top-color: var(--fg-strong, #14172A);
    border-bottom-color: var(--fg-strong, #14172A);
    border-left-color: var(--fg-strong, #14172A);
    border-right-color: var(--fg-strong, #14172A);
}

/* --- Selects inside .pk-filterbar — compact width like the kit's
   .pk-facet-select primitive. Bootstrap's .form-select defaults to
   width: 100% which stacks each filter dropdown vertically; the kit
   pattern is horizontal-flex with auto-width selects. */
.pk-filterbar select,
.pk-filterbar .form-select,
.pk-filterbar .pk-select {
    width: auto !important;
    min-width: 140px;
    max-width: 240px;
    height: 32px;
    min-height: 32px;
    padding: 4px 28px 4px 10px;
    font-size: var(--fs-sm, 13px);
    background-color: var(--bg-surface, #fff);
    border: 1px solid var(--border-hairline, #ECEEF5);
    border-radius: var(--r-md, 10px);
    color: var(--fg-default, #3F4459);
}
.pk-filterbar select:hover,
.pk-filterbar .form-select:hover {
    border-color: var(--border-default, #C7CAD8);
    background-color: var(--bg-surface, #fff);
}
.pk-filterbar select:focus,
.pk-filterbar .form-select:focus {
    border-color: var(--brand, #8487EE);
    box-shadow: var(--focus-ring, 0 0 0 3px rgba(132,135,238,.22)) !important;
}