/* ir-overrides.css — consolidated override layer: ir-override + ir-launch-console + ir-ux,
   preserving original load order. Replaces 3 late-loading sheets with 1. 2026-06-02. */

/* ============================================================
   iResponse Pro — Global Table Dark Override
   Loaded LAST to beat datatables.min.css and components.min.css
   white-background rules (#f9f9f9, #fcfcfc, #fafafa, whitesmoke)
   ============================================================ */

/* All td/th: transparent background + light text */
table td,
table th,
.table td,
.table th,
.table > thead > tr > th,
.table > thead > tr > td,
.table > tbody > tr > th,
.table > tbody > tr > td,
.table > tfoot > tr > th,
.table > tfoot > tr > td,
.dataTable td,
.dataTable th,
div.dataTables_wrapper table td,
div.dataTables_wrapper table th {
    background-color: transparent !important;
    color: #e2e8f0 !important;
    border-color: #2a3347 !important;
}

/* thead stays dark */
.table > thead > tr > th,
table.dataTable thead th,
table.dataTable thead td {
    background-color: #1e2536 !important;
    color: #94a3b8 !important;
}

/* Row backgrounds */
.table > tbody > tr,
table.dataTable tbody tr {
    background-color: #161b27 !important;
}

.table > tbody > tr:nth-child(even),
table.dataTable tbody tr:nth-child(even),
table.dataTable.stripe tbody tr.even,
table.dataTable.display tbody tr.even {
    background-color: #131929 !important;
}

.table > tbody > tr:nth-child(odd),
table.dataTable tbody tr:nth-child(odd),
table.dataTable.stripe tbody tr.odd,
table.dataTable.display tbody tr.odd {
    background-color: #161b27 !important;
}

/* Hover */
.table > tbody > tr:hover > td,
table.dataTable tbody tr:hover,
table.dataTable tbody tr:hover > td {
    background-color: #1e2536 !important;
}

/* Kill DataTables sorting column highlights (#fafafa / #fcfcfc / whitesmoke) */
table.dataTable.order-column tbody tr > .sorting_1,
table.dataTable.order-column tbody tr > .sorting_2,
table.dataTable.order-column tbody tr > .sorting_3,
table.dataTable.display tbody tr > .sorting_1,
table.dataTable.display tbody tr > .sorting_2,
table.dataTable.display tbody tr > .sorting_3,
table.dataTable.order-column.stripe tbody tr.odd > .sorting_1,
table.dataTable.order-column.stripe tbody tr.odd > .sorting_2,
table.dataTable.order-column.stripe tbody tr.odd > .sorting_3,
table.dataTable.order-column.stripe tbody tr.even > .sorting_1,
table.dataTable.order-column.stripe tbody tr.even > .sorting_2,
table.dataTable.order-column.stripe tbody tr.even > .sorting_3 {
    background-color: rgba(79,142,247,0.04) !important;
}

/* Selected rows */
table.dataTable tbody tr.selected,
table.dataTable tbody tr.selected > td,
table.dataTable.stripe tbody tr.odd.selected,
table.dataTable.stripe tbody tr.even.selected,
table.dataTable.display tbody tr.odd.selected > .sorting_1,
table.dataTable.display tbody tr.even.selected > .sorting_1 {
    background-color: rgba(79,142,247,0.12) !important;
    color: #e2e8f0 !important;
}

/* ============================================================
   GLOBAL DROPDOWN Z-INDEX / CLIP FIX
   Bootstrap-select menus were being cut off because ancestors
   (.portlet.light.bordered, .ir-table-card, .form-body, etc.)
   set `overflow: hidden`, and/or later siblings created higher
   stacking contexts. Applies platform-wide — does not require
   data-container="body" on each <select>.
   ============================================================ */

/* Open container sits above neighboring portlets/cards */
body .bootstrap-select.open,
body .bootstrap-select.show,
body .bootstrap-select.btn-group.open,
body .bootstrap-select.btn-group.show {
    position: relative !important;
    z-index: 10050 !important;
}

/* The dropdown menu itself — clear of modals (1050) and sticky headers */
body .bootstrap-select .dropdown-menu.open,
body .bootstrap-select .dropdown-menu.show,
body .bootstrap-select.open > .dropdown-menu,
body .bootstrap-select.show > .dropdown-menu {
    z-index: 10051 !important;
}

/* Release overflow-clipping on ancestors while a select is open.
   :has() scopes the override to the exact card/row that contains
   the open dropdown — everything else keeps its original clipping. */
.portlet:has(.bootstrap-select.open),
.portlet:has(.bootstrap-select.show),
.portlet-body:has(.bootstrap-select.open),
.portlet-body:has(.bootstrap-select.show),
.form-body:has(.bootstrap-select.open),
.form-body:has(.bootstrap-select.show),
.form-group:has(.bootstrap-select.open),
.form-group:has(.bootstrap-select.show),
.ir-table-card:has(.bootstrap-select.open),
.ir-table-card:has(.bootstrap-select.show),
.ir-table-actions:has(.bootstrap-select.open),
.ir-table-actions:has(.bootstrap-select.show),
.table-container:has(.bootstrap-select.open),
.table-container:has(.bootstrap-select.show),
.row:has(.bootstrap-select.open),
.row:has(.bootstrap-select.show),
[class*="col-"]:has(.bootstrap-select.open),
[class*="col-"]:has(.bootstrap-select.show) {
    overflow: visible !important;
}

/* Also raise the ancestor card itself so its dropdown paints above
   the next card below (e.g., create form above the processes list) */
.portlet:has(.bootstrap-select.open),
.portlet:has(.bootstrap-select.show) {
    z-index: 10040 !important;
    position: relative !important;
}

/* Status badges */
.badge-pass {
    background: rgba(34,197,94,0.15) !important;
    color: #22c55e !important;
    padding: 3px 10px !important;
    border-radius: 20px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
}
.badge-warn {
    background: rgba(245,158,11,0.15) !important;
    color: #f59e0b !important;
    padding: 3px 10px !important;
    border-radius: 20px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
}
.badge-fail {
    background: rgba(239,68,68,0.15) !important;
    color: #ef4444 !important;
    padding: 3px 10px !important;
    border-radius: 20px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
}


/* ═══════════════════════════════════════════════════════════════
   ir-launch-console.css  —  App-wide "Blueprint Launch Console"
   Loaded LAST via override_styles.html (after ir-theme.css,
   ir-override.css, and every per-page sheet). Color/typography
   only. NEVER changes display, position, float, width, z-index
   of layout-critical elements (sidebar, header, Bootstrap grid).
   ─────────────────────────────────────────────────────────────
   Palette:  graphite + sodium amber (armed) + cool blue (info)
   Type:     Fraunces display italic  •  Archivo Narrow labels
             JetBrains Mono data  •  Inter body (already loaded)
   ═════════════════════════════════════════════════════════════════ */

/* ─── Tokens extend the existing ir-theme.css palette ─── */
:root {
    /* armed / live */
    --arm:       #f59e0b;
    --arm-hi:    #fbbf24;
    --arm-glow:  rgba(245,158,11,0.32);
    --arm-wash:  rgba(245,158,11,0.06);
    --arm-rule:  rgba(245,158,11,0.22);

    /* cool info */
    --cool:      #4f8ef7;
    --cool-soft: rgba(79,142,247,0.12);
    --cool-rule: rgba(79,142,247,0.22);

    /* hairlines */
    --rule-0:    rgba(148,163,184,0.06);
    --rule-1:    rgba(148,163,184,0.10);
    --rule-2:    rgba(148,163,184,0.14);

    /* blueprint grid */
    --grid-a:    rgba(79,142,247,0.045);
    --grid-b:    rgba(79,142,247,0.09);

    /* typography */
    --serif:     "Fraunces", "Iowan Old Style", Georgia, serif;
    --label:     "Archivo Narrow", "Helvetica Neue", sans-serif;
    --mono:      "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --body:      "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ─────────────────────────────────────────────────────────────
   1 · GLOBAL PAGE SURFACE  —  blueprint graph paper
   ───────────────────────────────────────────────────────────── */
.page-content,
.page-content-wrapper,
.page-content-inner,
.page-container {
    background:
        radial-gradient(1200px 600px at 82% -10%, rgba(79,142,247,0.05), transparent 60%),
        radial-gradient(900px 500px at -10% 110%, rgba(245,158,11,0.035), transparent 60%),
        linear-gradient(var(--grid-a) 1px, transparent 1px) 0 0 / 28px 28px,
        linear-gradient(90deg, var(--grid-a) 1px, transparent 1px) 0 0 / 28px 28px,
        linear-gradient(var(--grid-b) 1px, transparent 1px) 0 0 / 140px 140px,
        linear-gradient(90deg, var(--grid-b) 1px, transparent 1px) 0 0 / 140px 140px,
        var(--bg-base) !important;
}

/* dust/grain overlay across the content surface — painted BEHIND
   content via z-index:-1 so modals, backdrops, and dropdowns are
   never trapped beneath a stacking context. */
.page-content-wrapper::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    opacity: 0.32;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='6'/><feColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.56 0 0 0 0 0.7 0 0 0 0.08 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ─────────────────────────────────────────────────────────────
   2 · GLOBAL TYPOGRAPHY
   ───────────────────────────────────────────────────────────── */
body { font-family: var(--body) !important; letter-spacing: 0 !important; }

h1, h2, h3, .page-title, .modal-title {
    font-family: var(--serif) !important;
    font-style: italic !important;
    font-weight: 500 !important;
    letter-spacing: -0.005em !important;
}

/* page titles across every feature page */
h1.ir-page-title,
.ir-page-title {
    font-family: var(--serif) !important;
    font-style: italic !important;
    font-weight: 500 !important;
    font-size: 24px !important;
    letter-spacing: -0.005em !important;
    color: var(--text-0) !important;
}
.ir-page-title i {
    font-style: normal !important;
    color: var(--arm) !important;
    font-size: 16px !important;
}
.ir-page-header {
    border-bottom: 1px solid var(--rule-1) !important;
    position: relative;
    padding-bottom: 18px !important;
    padding-top: 4px !important;
    margin-bottom: 22px !important;
}
.ir-page-header::before {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 64px;
    height: 1px;
    background: linear-gradient(90deg, var(--arm-hi), var(--arm) 60%, transparent);
}

/* ─────────────────────────────────────────────────────────────
   3 · HEADER  —  flight strip
   ───────────────────────────────────────────────────────────── */
.page-header.navbar {
    background:
        linear-gradient(180deg, rgba(79,142,247,0.04), transparent 60%),
        var(--bg-base) !important;
    border-bottom: 1px solid var(--rule-1) !important;
    position: relative;
}
.page-header.navbar::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--arm) 18%,
        var(--arm-hi) 28%,
        var(--arm) 38%,
        transparent 55%);
    opacity: 0.55;
}

/* user name in header becomes condensed caps */
.page-header .username {
    font-family: var(--label) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: var(--text-0) !important;
}

/* avatar pill treatment */
.page-header .top-menu .dropdown-user > a > img.img-circle {
    border: 1px solid var(--arm-rule) !important;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.4), 0 0 0 3px var(--arm-wash) !important;
    padding: 1px !important;
}

/* user dropdown menu */
.page-header .dropdown-menu {
    background: var(--bg-raised) !important;
    border: 1px solid var(--rule-2) !important;
    border-radius: 2px !important;
    box-shadow: 0 20px 50px -10px rgba(0,0,0,0.6) !important;
    padding: 6px 0 !important;
}
.page-header .dropdown-menu li > a {
    font-family: var(--label) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    color: var(--text-1) !important;
    padding: 10px 16px !important;
}
.page-header .dropdown-menu li > a:hover {
    background: var(--arm-wash) !important;
    color: var(--arm-hi) !important;
}

/* ─────────────────────────────────────────────────────────────
   4 · SIDEBAR  —  typographic console rail
   ───────────────────────────────────────────────────────────── */
.page-sidebar,
.page-sidebar-wrapper {
    background:
        linear-gradient(180deg, rgba(245,158,11,0.02), transparent 20%),
        var(--bg-base) !important;
    border-right: 1px solid var(--rule-1) !important;
}

/* top-level items */
.page-sidebar-menu > li > a {
    font-family: var(--label) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: var(--text-1) !important;
    border-radius: 0 !important;
    border-left: 2px solid transparent !important;
    padding: 10px 14px 10px 12px !important;
    transition: color 180ms, background 180ms, border-color 180ms;
}
.page-sidebar-menu > li > a > i {
    color: var(--text-2) !important;
    width: 18px;
    transition: color 180ms;
}
.page-sidebar-menu > li > a:hover {
    background: var(--arm-wash) !important;
    color: var(--text-0) !important;
    border-left-color: var(--arm-rule) !important;
}
.page-sidebar-menu > li > a:hover > i { color: var(--arm) !important; }

.page-sidebar-menu > li.active > a,
.page-sidebar-menu > li.open > a {
    background: linear-gradient(90deg, var(--arm-wash), transparent 80%) !important;
    color: var(--arm-hi) !important;
    border-left-color: var(--arm) !important;
}
.page-sidebar-menu > li.active > a > i,
.page-sidebar-menu > li.open > a > i {
    color: var(--arm-hi) !important;
}

/* arrows */
.page-sidebar-menu > li > a > .arrow { color: var(--text-2) !important; }
.page-sidebar-menu > li.open > a > .arrow,
.page-sidebar-menu > li.active > a > .arrow { color: var(--arm-hi) !important; }

/* sub menu items */
.page-sidebar-menu .sub-menu {
    background:
        linear-gradient(90deg, var(--rule-0) 1px, transparent 1px) 11px 0 / 100% 100% no-repeat !important;
    padding: 4px 0 !important;
}
.page-sidebar-menu .sub-menu > li > a {
    font-family: var(--body) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--text-1) !important;
    padding: 7px 14px 7px 38px !important;
    position: relative;
    border-radius: 0 !important;
}
.page-sidebar-menu .sub-menu > li > a::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 26px;
    width: 6px;
    height: 1px;
    background: var(--rule-2);
    transform: translateY(-50%);
    transition: background 160ms, width 160ms;
}
.page-sidebar-menu .sub-menu > li > a:hover {
    background: var(--arm-wash) !important;
    color: var(--text-0) !important;
}
.page-sidebar-menu .sub-menu > li > a:hover::before {
    background: var(--arm);
    width: 10px;
}
.page-sidebar-menu .sub-menu > li.active > a {
    color: var(--arm-hi) !important;
    background: transparent !important;
}
.page-sidebar-menu .sub-menu > li.active > a::before {
    background: var(--arm);
    width: 12px;
}

/* sidebar separators */
.page-sidebar-menu .sidebar-separator {
    height: 1px !important;
    background: linear-gradient(90deg, var(--rule-1), transparent) !important;
    margin: 14px 14px !important;
}

/* when sidebar is collapsed, don't render labels */
.page-sidebar-closed .page-sidebar-menu > li > a { letter-spacing: 0 !important; }

/* ─────────────────────────────────────────────────────────────
   5 · PORTLETS  —  chapter plates
   ───────────────────────────────────────────────────────────── */
.portlet,
.portlet.light,
.portlet.solid,
.portlet.light.bordered {
    background: var(--bg-surface) !important;
    border: 1px solid var(--rule-1) !important;
    border-radius: 2px !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.02) inset,
        0 10px 28px -10px rgba(0,0,0,0.55) !important;
    position: relative;
    overflow: hidden;
    transition: border-color 240ms ease;
}
.portlet:hover { border-color: var(--arm-rule) !important; }

/* scanline sweep on portlet hover */
.portlet::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: -2px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--arm) 40%, var(--arm-hi) 50%, var(--arm) 60%, transparent);
    opacity: 0;
    pointer-events: none;
}
.portlet:hover::after {
    animation: lc-scan 1300ms cubic-bezier(.25,.8,.2,1) forwards;
}
@keyframes lc-scan {
    0%   { opacity: 0; transform: translateY(0); }
    10%  { opacity: 1; }
    88%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(520px); }
}

/* portlet title bar */
.portlet.light > .portlet-title,
.portlet > .portlet-title {
    background:
        linear-gradient(180deg, rgba(79,142,247,0.04), transparent 80%),
        var(--bg-raised) !important;
    border-bottom: 1px solid var(--rule-1) !important;
    border-radius: 0 !important;
    padding: 14px 18px 12px 18px !important;
    min-height: 0 !important;
}
.portlet-title .caption {
    font-family: var(--serif) !important;
    font-style: italic !important;
    font-weight: 500 !important;
    font-size: 18px !important;
    letter-spacing: -0.005em !important;
    color: var(--text-0) !important;
    padding: 0 !important;
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.portlet-title .caption > i {
    font-style: normal !important;
    font-size: 13px !important;
    color: var(--arm) !important;
    transform: translateY(-1px);
}
.portlet-title .caption-subject {
    font-family: var(--label) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.24em !important;
    text-transform: uppercase !important;
    color: var(--text-1) !important;
}
.portlet-title .caption-helper {
    font-family: var(--mono) !important;
    font-size: 10px !important;
    color: var(--text-2) !important;
}
.portlet-body {
    background: var(--bg-surface) !important;
    padding: 16px 18px !important;
}

/* actions on the right side of the title bar */
.portlet-title > .actions > .btn,
.portlet-title > .tools > a {
    border-radius: 2px !important;
    font-family: var(--label) !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    font-size: 10px !important;
}

/* orchestrated page-load reveal — portlets stagger in */
.page-content-wrapper .portlet {
    opacity: 0;
    transform: translateY(12px);
    animation: lc-reveal 640ms cubic-bezier(.2,.7,.2,1) forwards;
}
.page-content-wrapper .portlet:nth-of-type(1) { animation-delay: 40ms; }
.page-content-wrapper .portlet:nth-of-type(2) { animation-delay: 120ms; }
.page-content-wrapper .portlet:nth-of-type(3) { animation-delay: 200ms; }
.page-content-wrapper .portlet:nth-of-type(4) { animation-delay: 280ms; }
.page-content-wrapper .portlet:nth-of-type(5) { animation-delay: 360ms; }
.page-content-wrapper .portlet:nth-of-type(6) { animation-delay: 440ms; }
.page-content-wrapper .portlet:nth-of-type(n+7) { animation-delay: 520ms; }
@keyframes lc-reveal { to { opacity: 1; transform: translateY(0); } }

/* ─────────────────────────────────────────────────────────────
   6 · FORMS  —  sharpened & typographic
   ───────────────────────────────────────────────────────────── */
.form-group label,
label.control-label,
.form-horizontal .control-label {
    font-family: var(--label) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.22em !important;
    color: var(--text-1) !important;
    margin-bottom: 6px !important;
}

.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="tel"],
textarea {
    background: var(--bg-input) !important;
    border: 1px solid var(--rule-1) !important;
    border-radius: 2px !important;
    color: var(--text-0) !important;
    font-family: var(--mono) !important;
    font-size: 12px !important;
    box-shadow: none !important;
    transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}
select,
select.form-control {
    background: var(--bg-input) !important;
    border: 1px solid var(--rule-1) !important;
    border-radius: 2px !important;
    color: var(--text-0) !important;
    font-family: var(--body) !important;
    font-weight: 400 !important;
    font-size: 13px !important;
    box-shadow: none !important;
    transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}
.form-control:focus,
input:focus,
textarea:focus,
select:focus {
    border-color: var(--arm-rule) !important;
    background: var(--bg-raised) !important;
    outline: none !important;
    box-shadow: 0 0 0 1px var(--arm-wash) inset !important;
}

textarea.form-control {
    line-height: 1.55 !important;
}

/* placeholder text */
::placeholder { color: var(--text-2) !important; opacity: 0.7; }

/* read-only / disabled feel */
.form-control[readonly],
.form-control[disabled],
input[disabled],
select[disabled] {
    background: rgba(255,255,255,0.015) !important;
    color: var(--text-2) !important;
    cursor: not-allowed;
}

/* ─────────────────────────────────────────────────────────────
   7 · BUTTONS  —  armed vs cool
   ───────────────────────────────────────────────────────────── */
.btn {
    font-family: var(--label) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    border-radius: 2px !important;
    padding: 8px 18px !important;
    transition: transform 120ms ease, box-shadow 160ms ease, background 160ms ease, border-color 160ms ease;
}
.btn-sm, .btn-xs {
    letter-spacing: 0.18em !important;
    padding: 5px 12px !important;
    font-size: 10px !important;
}
.btn:active { transform: translateY(1px); }

/* primary = armed amber (the "this does something real" signal) */
.btn-primary {
    background: linear-gradient(180deg, var(--arm-hi), var(--arm)) !important;
    border: 1px solid var(--arm) !important;
    color: #0a0a0a !important;
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.25) inset,
        0 3px 0 0 rgba(245,158,11,0.12),
        0 10px 26px -8px var(--arm-glow) !important;
}
.btn-primary:hover,
.btn-primary:focus {
    background: linear-gradient(180deg, #ffcc5c, var(--arm-hi)) !important;
    border-color: var(--arm-hi) !important;
    color: #0a0a0a !important;
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.25) inset,
        0 4px 0 0 rgba(245,158,11,0.18),
        0 14px 32px -6px var(--arm-glow) !important;
}

/* info = cool blue (keeps the original accent for non-armed secondary CTAs) */
.btn-info {
    background: var(--cool) !important;
    border: 1px solid var(--cool) !important;
    color: #04060a !important;
    box-shadow: 0 6px 18px -6px var(--accent-glow) !important;
}
.btn-info:hover {
    background: var(--accent-hover) !important;
    border-color: var(--accent-hover) !important;
    box-shadow: 0 10px 28px -6px var(--accent-glow) !important;
}

/* success / danger / warning — keep palette, sharpen edges */
.btn-success,
.btn-danger,
.btn-warning {
    border-radius: 2px !important;
    border-width: 1px !important;
}

/* default & outline */
.btn-default,
.btn-outline.dark,
.btn-outline {
    background: transparent !important;
    border: 1px solid var(--rule-2) !important;
    color: var(--text-1) !important;
    box-shadow: none !important;
}
.btn-default:hover,
.btn-outline.dark:hover,
.btn-outline:hover {
    border-color: var(--arm-rule) !important;
    color: var(--arm-hi) !important;
    background: var(--arm-wash) !important;
}

/* link button (used a lot in list pages) */
.btn-link {
    color: var(--cool) !important;
    font-family: var(--label) !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
}

/* ─────────────────────────────────────────────────────────────
   8 · TABLES  —  data-sheet feel
   ───────────────────────────────────────────────────────────── */
.table,
.dataTable {
    font-family: var(--mono) !important;
    font-size: 12px !important;
}
.table > thead > tr > th,
table.dataTable thead th,
table.dataTable thead td {
    font-family: var(--label) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.26em !important;
    text-transform: uppercase !important;
    color: var(--text-1) !important;
    background: var(--bg-raised) !important;
    border-bottom: 1px solid var(--arm-rule) !important;
    padding: 12px 12px !important;
}
.table > tbody > tr > td,
table.dataTable tbody td {
    border-top: 1px solid var(--rule-0) !important;
    padding: 11px 12px !important;
}
.table > tbody > tr:hover > td,
table.dataTable tbody tr:hover > td {
    background: var(--arm-wash) !important;
}

/* datatables filter & length controls */
.dataTables_wrapper select,
.dataTables_wrapper input[type="search"] {
    background: var(--bg-input) !important;
    border: 1px solid var(--rule-1) !important;
    color: var(--text-0) !important;
    font-family: var(--mono) !important;
    font-size: 12px !important;
    border-radius: 2px !important;
}
.dataTables_wrapper .dataTables_info {
    font-family: var(--mono) !important;
    font-size: 11px !important;
    color: var(--text-2) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    font-family: var(--label) !important;
    font-weight: 700 !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    border-radius: 2px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--arm) !important;
    border-color: var(--arm) !important;
    color: #0a0a0a !important;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.25) inset;
}

/* ─────────────────────────────────────────────────────────────
   9 · BADGES & STATUS DOTS
   ───────────────────────────────────────────────────────────── */
.badge,
.badge-pass,
.badge-warn,
.badge-fail {
    font-family: var(--label) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    border-radius: 2px !important;
    padding: 4px 10px !important;
}
.label {
    font-family: var(--label) !important;
    font-weight: 700 !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    border-radius: 2px !important;
    padding: 4px 8px !important;
}

/* ─────────────────────────────────────────────────────────────
   10 · NAV TABS
   ───────────────────────────────────────────────────────────── */
.nav-tabs {
    border-bottom: 1px solid var(--rule-1) !important;
}
.nav-tabs > li > a {
    font-family: var(--label) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: var(--text-1) !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    padding: 10px 16px !important;
    transition: color 160ms, border-color 160ms;
}
.nav-tabs > li > a:hover {
    color: var(--arm-hi) !important;
    border-bottom-color: var(--arm-rule) !important;
    background: transparent !important;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    color: var(--arm-hi) !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid var(--arm) !important;
}

/* ─────────────────────────────────────────────────────────────
   11 · MODALS
   ───────────────────────────────────────────────────────────── */
.modal-content {
    background: var(--bg-surface) !important;
    border: 1px solid var(--arm-rule) !important;
    border-radius: 2px !important;
    box-shadow: 0 40px 80px -20px rgba(0,0,0,0.7) !important;
}
.modal-header {
    background:
        linear-gradient(180deg, var(--bg-raised), transparent) !important;
    border-bottom: 1px solid var(--rule-1) !important;
    padding: 16px 22px !important;
}
.modal-title {
    font-family: var(--serif) !important;
    font-style: italic !important;
    font-weight: 500 !important;
    font-size: 20px !important;
    color: var(--text-0) !important;
    letter-spacing: -0.005em !important;
}
.modal-header .close {
    color: var(--text-1) !important;
    opacity: 0.7 !important;
    text-shadow: none !important;
    font-size: 22px !important;
}
.modal-header .close:hover { color: var(--arm-hi) !important; opacity: 1 !important; }
.modal-body { padding: 20px 22px !important; }
.modal-footer {
    border-top: 1px solid var(--rule-1) !important;
    padding: 14px 22px !important;
    background: transparent !important;
}

/* inline-styled .close in dark modals stays readable */
.modal-header .close[style*="color"] { color: var(--text-1) !important; }

/* bare h4 used as a modal title (no .modal-title class) gets treatment too */
.modal-header > h4 {
    font-family: var(--serif) !important;
    font-style: italic !important;
    font-weight: 500 !important;
    font-size: 18px !important;
    color: var(--text-0) !important;
    letter-spacing: -0.005em !important;
}
.modal-header > h4 > i {
    font-style: normal !important;
    color: var(--arm) !important;
}

/* labels inside modals stay readable — slightly smaller tracking than the app-wide label */
.modal-body .form-group label,
.modal-body label {
    font-size: 10px !important;
    letter-spacing: 0.18em !important;
}

/* ── Schedule / date inputs: the default Cancel must be visible ── */
.modal-footer .btn-default {
    background: var(--bg-raised) !important;
    border: 1px solid var(--rule-2) !important;
    color: var(--text-0) !important;
}
.modal-footer .btn-default:hover {
    background: var(--bg-hover) !important;
    border-color: var(--arm-rule) !important;
    color: var(--arm-hi) !important;
}

/* backdrop darker */
.modal-backdrop.in { opacity: 0.72 !important; }

/* ── stacking guarantee ─────────────────────────────────────
   Bootstrap modals live at z-index 1050 and the backdrop at 1040.
   Pin them explicitly so no upstream rule can trap them below a
   parent stacking context. */
.modal { z-index: 1050 !important; }
.modal-backdrop { z-index: 1040 !important; }
.modal-backdrop.in { z-index: 1040 !important; }
.modal-dialog { z-index: auto !important; }
.modal-open .modal { overflow-x: hidden !important; overflow-y: auto !important; }

/* ─────────────────────────────────────────────────────────────
   12 · BOOTSTRAP-SELECT DROPDOWNS
   ───────────────────────────────────────────────────────────── */
/* normalized: ordinary, readable dropdown — body font, standard sizing */
.bootstrap-select > .btn.dropdown-toggle {
    background: var(--bg-input) !important;
    border: 1px solid var(--rule-1) !important;
    color: var(--text-0) !important;
    border-radius: 2px !important;
    font-family: var(--body) !important;
    font-weight: 400 !important;
    font-size: 13px !important;
    line-height: 20px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    padding: 6px 28px 6px 10px !important;
    height: 34px !important;
    min-height: 34px !important;
    text-align: left !important;
    box-shadow: none !important;
}
.bootstrap-select > .btn.dropdown-toggle:hover,
.bootstrap-select.open > .btn.dropdown-toggle {
    border-color: var(--arm-rule) !important;
    background: var(--bg-raised) !important;
}
.bootstrap-select > .btn.dropdown-toggle .filter-option {
    font-family: var(--body) !important;
    font-weight: 400 !important;
    font-size: 13px !important;
    color: var(--text-0) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}
.bootstrap-select .dropdown-menu {
    background: var(--bg-raised) !important;
    border: 1px solid var(--rule-2) !important;
    border-radius: 2px !important;
    box-shadow: 0 20px 50px -10px rgba(0,0,0,0.6) !important;
    padding: 4px 0 !important;
}
.bootstrap-select .dropdown-menu > li > a {
    font-family: var(--body) !important;
    font-weight: 400 !important;
    font-size: 13px !important;
    color: var(--text-0) !important;
    padding: 6px 14px !important;
    line-height: 20px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}
.bootstrap-select .dropdown-menu > li > a:hover,
.bootstrap-select .dropdown-menu > li > a:focus,
.bootstrap-select .dropdown-menu > li.selected > a {
    background: var(--arm-wash) !important;
    color: var(--text-0) !important;
}
.bootstrap-select .dropdown-menu > li.active > a {
    background: var(--arm) !important;
    color: #0a0a0a !important;
}
.bootstrap-select .dropdown-menu li .text {
    font-family: var(--body) !important;
    font-weight: 400 !important;
}
.bootstrap-select .dropdown-menu .bs-searchbox input {
    font-family: var(--body) !important;
    font-size: 12px !important;
    height: 28px !important;
    padding: 4px 8px !important;
}

/* ─────────────────────────────────────────────────────────────
   13 · TOASTR / SWEETALERT — signal in the same palette
   ───────────────────────────────────────────────────────────── */
#toast-container > div {
    border-radius: 2px !important;
    box-shadow: 0 12px 40px -8px rgba(0,0,0,0.55) !important;
    font-family: var(--body) !important;
    font-size: 12px !important;
    opacity: 0.98 !important;
}
.toast-success { background-color: #14532d !important; border-left: 3px solid var(--success) !important; }
.toast-error   { background-color: #3f1111 !important; border-left: 3px solid var(--danger)  !important; }
.toast-warning { background-color: #3b2a08 !important; border-left: 3px solid var(--arm)     !important; }
.toast-info    { background-color: #0b2540 !important; border-left: 3px solid var(--cool)    !important; }

.sweet-alert {
    background: var(--bg-surface) !important;
    border: 1px solid var(--arm-rule) !important;
    border-radius: 2px !important;
    box-shadow: 0 40px 80px -20px rgba(0,0,0,0.7) !important;
}
.sweet-alert h2 {
    font-family: var(--serif) !important;
    font-style: italic !important;
    font-weight: 500 !important;
    color: var(--text-0) !important;
}

/* ─────────────────────────────────────────────────────────────
   14 · SCROLLBARS — thin, amber thumb
   ───────────────────────────────────────────────────────────── */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--arm-rule) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--arm-rule);
    border: 2px solid transparent;
    border-radius: 10px;
    background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
    background: var(--arm);
    background-clip: padding-box;
    border: 2px solid transparent;
}

/* ─────────────────────────────────────────────────────────────
   15 · FOOTER
   ───────────────────────────────────────────────────────────── */
.page-footer {
    background: var(--bg-base) !important;
    border-top: 1px solid var(--rule-1) !important;
}
.page-footer-inner {
    font-family: var(--label) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.28em !important;
    text-transform: uppercase !important;
    color: var(--text-2) !important;
}

/* ─────────────────────────────────────────────────────────────
   16 · PRE-LOADER  —  spinner refresh
   ───────────────────────────────────────────────────────────── */
section.wrapper {
    background: var(--bg-base) !important;
}
.spinner i {
    background-color: var(--arm) !important;
}

/* ─────────────────────────────────────────────────────────────
   17 · LOGIN PAGE TOUCHES
   ───────────────────────────────────────────────────────────── */
body.login {
    background:
        radial-gradient(1000px 500px at 50% -10%, rgba(245,158,11,0.08), transparent 60%),
        radial-gradient(700px 400px at 100% 100%, rgba(79,142,247,0.06), transparent 60%),
        linear-gradient(var(--grid-a) 1px, transparent 1px) 0 0 / 28px 28px,
        linear-gradient(90deg, var(--grid-a) 1px, transparent 1px) 0 0 / 28px 28px,
        var(--bg-base) !important;
}
body.login .login-form,
body.login form {
    background: var(--bg-surface) !important;
    border: 1px solid var(--arm-rule) !important;
    border-radius: 2px !important;
    box-shadow: 0 40px 100px -20px rgba(0,0,0,0.7) !important;
}
body.login h3,
body.login .login-title {
    font-family: var(--serif) !important;
    font-style: italic !important;
    font-weight: 500 !important;
    font-size: 28px !important;
    color: var(--text-0) !important;
}
/* Kill the legacy white .content / .form-actions frame inherited from login.min.css
   (.login .content{background:#fff}) — the dark theme styled the inner .login-form
   but not the white .content wrapper, so it bled as an asymmetric white frame. */
body.login .content { background: transparent !important; box-shadow: none !important; }
body.login .content .form-actions { background: transparent !important; }
/* Brand wordmark filling the (previously empty) login card header */
body.login .login-brand { text-align: center !important; padding: 4px 0 2px !important; }
body.login .login-brand img { max-height: 42px !important; width: auto !important; display: inline-block !important; }

/* ─────────────────────────────────────────────────────────────
   18 · BOOTSTRAP SWITCH  —  armed on, cool off
   ───────────────────────────────────────────────────────────── */
.bootstrap-switch {
    border-radius: 2px !important;
    border: 1px solid var(--rule-1) !important;
}
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info {
    background: var(--arm) !important;
    color: #0a0a0a !important;
    font-family: var(--label) !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
}
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default {
    background: var(--bg-raised) !important;
    color: var(--text-2) !important;
    font-family: var(--label) !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
}

/* ─────────────────────────────────────────────────────────────
   19 · PAGINATION (generic)
   ───────────────────────────────────────────────────────────── */
.pagination > li > a,
.pagination > li > span {
    background: var(--bg-raised) !important;
    border: 1px solid var(--rule-1) !important;
    color: var(--text-1) !important;
    font-family: var(--label) !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    border-radius: 2px !important;
    margin: 0 2px !important;
}
.pagination > li.active > a,
.pagination > li.active > span {
    background: var(--arm) !important;
    border-color: var(--arm) !important;
    color: #0a0a0a !important;
}

/* ─────────────────────────────────────────────────────────────
   20 · MISC POLISH  —  code, kbd, hr
   ───────────────────────────────────────────────────────────── */
code, kbd, pre, samp {
    font-family: var(--mono) !important;
    color: var(--arm-hi) !important;
    background: rgba(245,158,11,0.06) !important;
    border: 1px solid var(--arm-rule) !important;
    border-radius: 2px !important;
    padding: 1px 6px !important;
    font-size: 11px !important;
}
pre { display: block; padding: 10px 14px !important; }

hr {
    border: 0 !important;
    border-top: 1px solid var(--rule-1) !important;
    margin: 20px 0 !important;
}

/* selection */
::selection {
    background: var(--arm);
    color: #0a0a0a;
}

/* ─────────────────────────────────────────────────────────────
   21 · RESPECT layout-critical classes
   ───────────────────────────────────────────────────────────── */
/* do NOT change display/position/float/width on sidebar/header —
   leave Metronic/Bootstrap layout exactly as shipped. Nothing in
   this file sets those properties on .page-sidebar, .page-sidebar-wrapper,
   .page-header, .navbar, or .page-container.                        */

/* ─────────────────────────────────────────────────────────────
   21b · BOOTSTRAP-DATERANGEPICKER — dark calendar popup
   (ships light by default; unreadable on our graphite shell)
   ───────────────────────────────────────────────────────────── */
.daterangepicker {
    background: var(--bg-surface) !important;
    border: 1px solid var(--arm-rule) !important;
    border-radius: 2px !important;
    box-shadow: 0 24px 60px -10px rgba(0,0,0,0.7) !important;
    padding: 8px !important;
    z-index: 10060 !important;  /* above modal (1050) */
    color: var(--text-0) !important;
    font-family: var(--body) !important;
}

/* arrow caret above/below the popup */
.daterangepicker:before,
.daterangepicker:after,
.daterangepicker.opensleft:before,
.daterangepicker.opensright:before,
.daterangepicker.openscenter:before { border-bottom-color: var(--arm) !important; }
.daterangepicker:after,
.daterangepicker.opensleft:after,
.daterangepicker.opensright:after,
.daterangepicker.openscenter:after  { border-bottom-color: var(--bg-surface) !important; }
.daterangepicker.dropup:before      { border-top-color: var(--arm) !important; border-bottom: none !important; }
.daterangepicker.dropup:after       { border-top-color: var(--bg-surface) !important; border-bottom: none !important; }

/* calendar table */
.daterangepicker .calendar-table {
    background: var(--bg-raised) !important;
    border: 1px solid var(--rule-1) !important;
    border-radius: 2px !important;
    padding: 6px !important;
}
.daterangepicker table { color: var(--text-0) !important; }
.daterangepicker th {
    font-family: var(--label) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: var(--text-1) !important;
    padding: 4px !important;
}
.daterangepicker td {
    font-family: var(--mono) !important;
    font-size: 12px !important;
    color: var(--text-0) !important;
    padding: 4px !important;
    border-radius: 2px !important;
    min-width: 30px !important;
    height: 28px !important;
    line-height: 28px !important;
    background: transparent !important;
}

/* days outside current month / disabled */
.daterangepicker td.off,
.daterangepicker td.off.in-range,
.daterangepicker td.off.start-date,
.daterangepicker td.off.end-date {
    color: var(--text-2) !important;
    background: transparent !important;
    opacity: 0.55;
}
.daterangepicker td.disabled { color: var(--text-2) !important; opacity: 0.4; }

/* hover */
.daterangepicker td.available:hover,
.daterangepicker th.available:hover {
    background: var(--arm-wash) !important;
    color: var(--arm-hi) !important;
}

/* in-range & selected */
.daterangepicker td.in-range {
    background: rgba(245,158,11,0.12) !important;
    color: var(--arm-hi) !important;
    border-radius: 0 !important;
}
.daterangepicker td.active,
.daterangepicker td.active:hover,
.daterangepicker td.start-date,
.daterangepicker td.end-date {
    background: var(--arm) !important;
    color: #0a0a0a !important;
    border-color: var(--arm) !important;
    font-weight: 700 !important;
}

/* week number column */
.daterangepicker .calendar th.week,
.daterangepicker .calendar td.week {
    font-size: 10px !important;
    color: var(--text-2) !important;
}

/* header selects (month/year/hours/minutes) */
.daterangepicker select.monthselect,
.daterangepicker select.yearselect,
.daterangepicker select.hourselect,
.daterangepicker select.minuteselect,
.daterangepicker select.secondselect,
.daterangepicker select.ampmselect {
    background: var(--bg-input) !important;
    border: 1px solid var(--rule-1) !important;
    color: var(--text-0) !important;
    border-radius: 2px !important;
    font-family: var(--mono) !important;
    font-size: 11px !important;
    padding: 3px 4px !important;
    height: auto !important;
}
.daterangepicker select.monthselect option,
.daterangepicker select.yearselect option {
    background: var(--bg-raised) !important;
    color: var(--text-0) !important;
}

/* input-mini used as a text field inside the picker */
.daterangepicker .input-mini {
    background: var(--bg-input) !important;
    border: 1px solid var(--rule-1) !important;
    color: var(--text-0) !important;
    border-radius: 2px !important;
    font-family: var(--mono) !important;
    font-size: 12px !important;
    height: 30px !important;
    line-height: 30px !important;
}
.daterangepicker .input-mini.active { border-color: var(--arm-rule) !important; }
.daterangepicker .daterangepicker_input i {
    color: var(--arm) !important;
}

/* ranges list on the side */
.daterangepicker .ranges li {
    background: var(--bg-raised) !important;
    border: 1px solid var(--rule-1) !important;
    color: var(--text-1) !important;
    font-family: var(--label) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    border-radius: 2px !important;
    padding: 6px 12px !important;
    margin-bottom: 6px !important;
    transition: background 160ms, border-color 160ms, color 160ms;
}
.daterangepicker .ranges li:hover,
.daterangepicker .ranges li.active {
    background: var(--arm) !important;
    border-color: var(--arm) !important;
    color: #0a0a0a !important;
}

/* calendar-time (hour/minute picker footer) */
.daterangepicker .calendar-time {
    color: var(--text-1) !important;
    margin: 8px auto !important;
}

/* apply/cancel buttons inside the popup */
.daterangepicker .btn-primary,
.daterangepicker .applyBtn {
    background: linear-gradient(180deg, var(--arm-hi), var(--arm)) !important;
    border: 1px solid var(--arm) !important;
    color: #0a0a0a !important;
}
.daterangepicker .btn-default,
.daterangepicker .cancelBtn {
    background: var(--bg-raised) !important;
    border: 1px solid var(--rule-2) !important;
    color: var(--text-0) !important;
}

/* ─────────────────────────────────────────────────────────────
   22 · RESPONSIVE
   ───────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
    .portlet-title .caption { font-size: 16px !important; }
    h1.ir-page-title, .ir-page-title { font-size: 20px !important; }
    .modal-title { font-size: 17px !important; }
    .page-sidebar-menu > li > a { letter-spacing: 0.14em !important; }
}

/* ─────────────────────────────────────────────────────────────
   23 · CORTEX MODALS  (cx-modal-*, cx-cre-*, cx-fs-*)
   Production page's private dialogs — re-skinned to the
   Blueprint Launch Console aesthetic (sharp 2px radii, amber
   accents replacing the old purple/blue pops).
   ───────────────────────────────────────────────────────────── */

/* modal shell */
.cx-modal-content {
    background: var(--bg-surface) !important;
    border: 1px solid var(--arm-rule) !important;
    border-radius: 2px !important;
    box-shadow: 0 40px 80px -20px rgba(0,0,0,0.7) !important;
    overflow: hidden !important;
}
.cx-modal-header {
    background: linear-gradient(180deg, var(--bg-raised), transparent) !important;
    border-bottom: 1px solid var(--rule-1) !important;
    padding: 14px 20px !important;
    position: relative !important;
}
.cx-modal-header::after {
    content: "";
    position: absolute;
    left: 0; bottom: -1px;
    width: 64px; height: 1px;
    background: linear-gradient(90deg, var(--arm-hi), var(--arm) 60%, transparent);
}
.cx-modal-title {
    font-family: var(--serif) !important;
    font-style: italic !important;
    font-weight: 500 !important;
    font-size: 18px !important;
    color: var(--text-0) !important;
    letter-spacing: -0.005em !important;
}
.cx-modal-title i {
    font-style: normal !important;
    color: var(--arm) !important;
    margin-right: 10px !important;
}
.cx-modal-close {
    color: var(--text-1) !important;
    opacity: 0.7 !important;
    font-size: 22px !important;
}
.cx-modal-close:hover { color: var(--arm-hi) !important; opacity: 1 !important; }
.cx-modal-body {
    padding: 18px 20px !important;
    background: var(--bg-surface) !important;
}
.cx-modal-footer {
    background: transparent !important;
    border-top: 1px solid var(--rule-1) !important;
    padding: 12px 20px !important;
}
.cx-fs-hint, .cx-cre-hint {
    font-family: var(--label) !important;
    font-size: 10px !important;
    color: var(--text-2) !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
}

/* froms/subjects library */
.cx-fs-toolbar {
    margin-bottom: 12px !important;
}
.cx-fs-item {
    background: var(--bg-base) !important;
    border: 1px solid var(--rule-1) !important;
    border-radius: 2px !important;
    padding: 10px 12px !important;
    transition: border-color 160ms, background 160ms, transform 160ms !important;
}
.cx-fs-item:hover {
    border-color: var(--arm) !important;
    background: var(--bg-hover) !important;
    transform: translateX(2px) !important;
}
.cx-fs-val {
    font-size: 12px !important;
    color: var(--text-0) !important;
    font-family: var(--body) !important;
}
.cx-fs-usage, .cx-fs-last {
    font-family: var(--mono) !important;
    font-size: 10px !important;
    color: var(--text-2) !important;
}
.cx-fs-usage strong {
    color: var(--arm) !important;
    font-size: 11px !important;
}
.cx-fs-add {
    font-family: var(--label) !important;
    font-size: 9px !important;
    padding: 4px 10px !important;
    background: rgba(245,158,11,0.10) !important;
    color: var(--arm-hi) !important;
    border: 1px solid var(--arm-rule) !important;
    border-radius: 2px !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    text-align: center !important;
}
.cx-fs-item:hover .cx-fs-add {
    background: var(--arm) !important;
    border-color: var(--arm) !important;
    color: #0a0a0a !important;
}
.cx-fs-empty, .cx-cre-empty {
    font-family: var(--label) !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: var(--text-2) !important;
    font-size: 10px !important;
    padding: 36px 10px !important;
}

/* creatives library */
.cx-cre-toolbar { margin-bottom: 14px !important; }
.cx-cre-viewtoggle {
    background: var(--bg-base) !important;
    border: 1px solid var(--rule-1) !important;
    border-radius: 2px !important;
    padding: 2px !important;
}
.cx-cre-vt {
    padding: 4px 10px !important;
    color: var(--text-2) !important;
    font-size: 12px !important;
    border-radius: 1px !important;
    transition: background 140ms, color 140ms !important;
}
.cx-cre-vt:hover { color: var(--arm-hi) !important; }
.cx-cre-vt.active {
    background: linear-gradient(180deg, var(--arm-hi), var(--arm)) !important;
    color: #0a0a0a !important;
}
.cx-cre-card {
    background: var(--bg-base) !important;
    border: 1px solid var(--rule-1) !important;
    border-radius: 2px !important;
    transition: border-color 180ms, transform 180ms, box-shadow 180ms !important;
}
.cx-cre-card:hover {
    border-color: var(--arm) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 22px rgba(245,158,11,0.14) !important;
}
.cx-cre-thumb {
    background:
        repeating-linear-gradient(45deg, rgba(79,142,247,0.04) 0 2px, transparent 2px 6px),
        var(--bg-surface) !important;
    color: var(--rule-2) !important;
}
.cx-cre-meta { padding: 10px 12px !important; }
.cx-cre-name {
    font-family: var(--serif) !important;
    font-style: italic !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    color: var(--text-0) !important;
    letter-spacing: -0.005em !important;
}
.cx-cre-sub {
    font-family: var(--mono) !important;
    font-size: 10px !important;
    color: var(--text-2) !important;
}
.cx-cre-foot {
    border-top: 1px solid var(--rule-1) !important;
    padding: 7px 12px !important;
    font-family: var(--mono) !important;
    font-size: 10px !important;
    color: var(--text-2) !important;
}
.cx-cre-foot strong { color: var(--arm) !important; }
.cx-cre-tags { gap: 4px !important; }
.cx-cre-tag {
    font-family: var(--label) !important;
    font-size: 9px !important;
    padding: 2px 7px !important;
    border-radius: 2px !important;
    background: rgba(245,158,11,0.10) !important;
    color: var(--arm-hi) !important;
    border: 1px solid var(--arm-rule) !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
}
.cx-view-list .cx-cre-card { border-radius: 2px !important; }
.cx-view-list .cx-cre-foot {
    border-left: 1px solid var(--rule-1) !important;
    border-top: none !important;
}

/* filter select & mini inputs inside cortex modals */
.cx-filter-sel,
.cx-fs-toolbar select,
.cx-cre-toolbar select,
.cx-fs-toolbar input[type="text"],
.cx-cre-toolbar input[type="text"] {
    background: var(--bg-input) !important;
    border: 1px solid var(--rule-1) !important;
    color: var(--text-0) !important;
    border-radius: 2px !important;
    font-family: var(--mono) !important;
    font-size: 11px !important;
}
.cx-filter-sel:focus,
.cx-fs-toolbar select:focus,
.cx-cre-toolbar select:focus,
.cx-fs-toolbar input[type="text"]:focus,
.cx-cre-toolbar input[type="text"]:focus {
    border-color: var(--arm) !important;
    box-shadow: 0 0 0 1px var(--arm-rule) !important;
    outline: none !important;
}

/* creative display iframe loader */
#creative-loading {
    color: var(--text-2) !important;
    font-family: var(--label) !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
}
#creative-frame {
    background: var(--bg-surface) !important;
    border: 1px solid var(--rule-1) !important;
    border-radius: 2px !important;
}

/* ─────────────────────────────────────────────────────────────
   24 · KILL LINGERING WHITE SURFACES
   Catches Metronic/Bootstrap defaults that paint a white strip
   below the header (page-bar, breadcrumbs, portlets, dropdown
   menus, notes, alerts) so the surface stays graphite.
   ───────────────────────────────────────────────────────────── */
.page-bar,
.page-breadcrumb,
.breadcrumb,
.portlet,
.portlet.light,
.portlet-body,
.note,
.note-default,
.alert-default,
.dropdown-menu-default,
.page-header .dropdown-menu-default,
.page-content-body,
.page-content > .container,
.page-content > .container-fluid {
    background: transparent !important;
    background-color: transparent !important;
}
.portlet.light {
    background: var(--bg-surface) !important;
    border: 1px solid var(--rule-1) !important;
}
.portlet.light > .portlet-title {
    background: transparent !important;
    border-bottom: 1px solid var(--rule-1) !important;
    color: var(--text-0) !important;
}
.portlet.light > .portlet-title > .caption {
    color: var(--text-0) !important;
}
.page-bar {
    border-bottom: 1px solid var(--rule-1) !important;
    color: var(--text-1) !important;
    padding: 10px 22px !important;
    margin-bottom: 18px !important;
}
.page-bar .breadcrumb {
    background: transparent !important;
    padding: 0 !important;
}
.page-bar .breadcrumb > li,
.page-bar .breadcrumb > li > a {
    color: var(--text-1) !important;
}
.page-bar .breadcrumb > .active { color: var(--text-0) !important; }
.dropdown-menu-default {
    background: var(--bg-raised) !important;
    border: 1px solid var(--rule-2) !important;
    border-radius: 2px !important;
}
.dropdown-menu-default > li > a {
    color: var(--text-1) !important;
}
.dropdown-menu-default > li > a:hover,
.dropdown-menu-default > li > a:focus {
    background: var(--arm-wash) !important;
    color: var(--arm-hi) !important;
}

/* aggressive nukes — whatever white strip is showing under the header */
html,
body.page-on-load,
body.page-header-fixed,
body.page-sidebar-fixed,
.page-wrapper,
.page-container,
.page-container-bg-solid,
.page-content-wrapper,
.page-content,
.page-content-inner,
.page-content-body,
.page-head,
.page-head-inner,
.page-bar {
    background-color: var(--bg-base) !important;
}

/* anything with an inline style="background:#fff" / white / #ffffff */
[style*="background:#fff"],
[style*="background: #fff"],
[style*="background-color:#fff"],
[style*="background-color: #fff"],
[style*="background:#ffffff"],
[style*="background-color:#ffffff"],
[style*="background:white"],
[style*="background-color:white"] {
    background: var(--bg-base) !important;
    background-color: var(--bg-base) !important;
}

/* the horizontal strip between header and content (Metronic's hidden
   divider on .page-header-fixed body) — force graphite */
body.page-header-fixed .page-container,
body.page-header-fixed .page-content-wrapper,
body.page-header-fixed .page-content {
    background-color: var(--bg-base) !important;
}

/* End of ir-launch-console.css */


/* iResponse Pro — UX helpers (empty states, micro-interactions) */

/* ── Empty State ─────────────────────────────────────────────────── */
.ir-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 48px 24px;
    color: #94a3b8;
}
.ir-empty-icon {
    width: 72px; height: 72px;
    border-radius: 50%;
    background: rgba(79, 142, 247, 0.08);
    border: 1px solid rgba(79, 142, 247, 0.18);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 18px;
}
.ir-empty-icon .fa {
    font-size: 28px;
    color: #4f8ef7;
    opacity: 0.85;
}
.ir-empty-title {
    font-size: 15px;
    font-weight: 600;
    color: #e2e8f0;
    margin-bottom: 6px;
    letter-spacing: 0.2px;
}
.ir-empty-subtitle {
    font-size: 12.5px;
    color: #64748b;
    max-width: 360px;
    line-height: 1.55;
    margin-bottom: 18px;
}
.ir-empty-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 13px;
}
table .ir-empty-row > td {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}
table .ir-empty-row .ir-empty {
    padding: 56px 24px;
}

/* ── Disabled button while loading ──────────────────────────────── */
.btn[disabled],
.btn:disabled {
    cursor: not-allowed;
    opacity: 0.65;
}
.btn .fa-spinner {
    margin-right: 4px;
}

/* ── Skeleton shimmer ───────────────────────────────────────────── */
.ir-skel {
    background: linear-gradient(90deg, #161b27 0%, #1e2536 50%, #161b27 100%);
    background-size: 200% 100%;
    animation: ir-shimmer 1.4s ease-in-out infinite;
    border-radius: 6px;
    display: block;
}
.ir-skel-line { height: 12px; margin: 6px 0; }
.ir-skel-line.short { width: 40%; }
.ir-skel-line.medium { width: 70%; }
.ir-skel-line.long { width: 100%; }
.ir-skel-block { height: 80px; }
.ir-skel-card { height: 120px; border-radius: 10px; margin-bottom: 14px; }
@keyframes ir-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Sidebar Search ────────────────────────────────────────── */
.ir-sidebar-search {
    position: relative;
    margin: 14px 16px 6px;
    z-index: 2;
}
.ir-sidebar-search-input {
    width: 100%;
    background: var(--bg-input, #191e2a);
    border: 1px solid var(--border-1, #1d2640);
    color: var(--text-0, #f1f5ff);
    border-radius: var(--radius-md, 8px);
    padding: 8px 30px 8px 32px;
    font-size: 12.5px;
    line-height: 1.4;
    outline: none;
    transition: border-color 150ms cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 150ms cubic-bezier(0.16, 1, 0.3, 1);
}
.ir-sidebar-search-input::placeholder {
    color: var(--text-2, #4f5e7a);
    font-weight: 400;
}
.ir-sidebar-search-input:focus {
    border-color: var(--accent, #4f8ef7);
    box-shadow: 0 0 0 3px rgba(79, 142, 247, 0.18);
}
.ir-sidebar-search-icon {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: var(--text-2, #4f5e7a);
    pointer-events: none;
}
.ir-sidebar-search-clear {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    color: var(--text-2, #4f5e7a);
    font-size: 18px;
    line-height: 1;
    width: 22px; height: 22px;
    border-radius: 4px;
    cursor: pointer;
    display: none;
    padding: 0;
    transition: color 120ms ease, background 120ms ease;
}
.ir-sidebar-search-clear:hover {
    color: var(--text-0, #f1f5ff);
    background: rgba(255,255,255,0.06);
}
.ir-sidebar-search.has-query .ir-sidebar-search-clear {
    display: block;
}
/* When the page sidebar is collapsed (icon-only), hide the search field */
.page-sidebar-closed .ir-sidebar-search { display: none; }

/* Filter helpers */
.page-sidebar-menu li.ir-menu-hide {
    display: none !important;
}
.page-sidebar-menu li.ir-menu-match-highlight > a {
    box-shadow: inset 3px 0 0 var(--accent, #4f8ef7);
}

/* ── Page fade-in (smoother first-paint after preloader) ─────────
   IMPORTANT: opacity-only — no transform. A persistent transform on
   .page-wrapper makes `position: fixed` modals/backdrops reference
   the wrapper instead of the viewport, which renders Bootstrap
   modals off-screen ("foggy" backdrop, no visible dialog). */
.page-wrapper {
    animation: ir-fade-in 280ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes ir-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Pre-loader spinner fade-out — when page-wrapper becomes visible,
   the wrapper section is auto-hidden by Metronic; soften the moment. */
.wrapper {
    transition: opacity 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Sidebar transition smoothing ───────────────────────────────── */
.page-sidebar-wrapper,
.page-content-wrapper {
    transition: margin-left 220ms cubic-bezier(0.16, 1, 0.3, 1),
                width 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─────────────────────────────────────────────────────────────────
   MODAL CLICK-THROUGH FIX
   ─────────────────────────────────────────────────────────────────
   ir-override.css raises any .portlet that contains an .open / .show
   bootstrap-select to z-index:10040 + position:relative, so its
   dropdown menu can paint above neighboring cards. That's correct in
   normal flow.

   But if bootstrap-select leaves a stale .show class after a focus
   transition (a known race when a modal opens nearby), the portlet
   stays at z-index:10040 — which is ABOVE Bootstrap's modal (1050).
   The portlet then sits on top of the open modal, swallowing every
   click and making the whole page feel "disabled".

   Defensive fix: while ANY modal is open, force every portlet back
   down to a normal stacking level. Modals always win.
   ───────────────────────────────────────────────────────────── */
body.modal-open .portlet,
body.modal-open .portlet:has(.bootstrap-select.open),
body.modal-open .portlet:has(.bootstrap-select.show) {
    z-index: auto !important;
    position: static !important;
}

/* Same precaution for the dropdown menu z-index lift — never above
   the modal (1050). The select rarely needs to be visible while a
   modal is open, but this guarantees no overlay sits on the modal. */
body.modal-open .bootstrap-select.open,
body.modal-open .bootstrap-select.show,
body.modal-open .bootstrap-select .dropdown-menu.open,
body.modal-open .bootstrap-select .dropdown-menu.show,
body.modal-open .bootstrap-select.open > .dropdown-menu,
body.modal-open .bootstrap-select.show > .dropdown-menu {
    z-index: 1030 !important;
}

/* ── Toastr — offset below fixed header ─────────────────────── */
#toast-container.toast-top-right {
    top: 70px !important;
    right: 18px !important;
}
#toast-container > div {
    border-radius: 8px !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45) !important;
    opacity: 0.97;
    backdrop-filter: blur(8px);
}

/* ── KPI / card hover lift (subtle, applied broadly) ────────── */
.portlet,
.ir-kpi,
.kpi-card,
.panel-card {
    transition: border-color 180ms cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 180ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Required field marker ──────────────────────────────────────── */
label[data-required="true"]::after,
.control-label[data-required="true"]::after {
    content: " *";
    color: #ef4444;
    font-weight: 700;
    margin-left: 2px;
}
/* When the label wraps an input with data-required, also mark */
.form-group:has(input[data-required="true"], textarea[data-required="true"], select[data-required="true"]) > label.control-label::after,
.form-group:has(input[data-required="true"], textarea[data-required="true"], select[data-required="true"]) > .control-label::after {
    content: " *";
    color: #ef4444;
    font-weight: 700;
    margin-left: 2px;
}