/* ============================================================================
   IMS Platform — Global Theme Foundation
   Layered on top of Bootstrap 5 + Tabler. CSS-variable driven; light + dark
   ready. No business logic — pure presentation only.
   ============================================================================ */

:root {
    /* Brand */
    --ims-primary: #2563eb;
    --ims-primary-rgb: 37, 99, 235;
    --ims-primary-soft: rgba(37, 99, 235, 0.1);
    --ims-primary-dark: #1d4ed8;
    --ims-accent: #7c3aed;
    --ims-success: #16a34a;
    --ims-warning: #f59e0b;
    --ims-danger: #dc2626;
    --ims-info: #0ea5e9;

    /* Surfaces */
    --ims-bg: #f6f8fb;
    --ims-bg-elevated: #ffffff;
    --ims-card-bg: #ffffff;
    --ims-card-border: #e9ecef;
    --ims-divider: #eef0f3;

    /* Text */
    --ims-text: #1f2937;
    --ims-text-muted: #6b7280;
    --ims-text-soft: #9ca3af;
    --ims-heading: #111827;

    /* Sidebar */
    --ims-sidebar-bg: #0f172a;
    --ims-sidebar-bg-grad-1: #0f172a;
    --ims-sidebar-bg-grad-2: #1e293b;
    --ims-sidebar-text: rgba(255, 255, 255, 0.72);
    --ims-sidebar-text-soft: rgba(255, 255, 255, 0.45);
    --ims-sidebar-active-bg: rgba(37, 99, 235, 0.18);
    --ims-sidebar-active-text: #ffffff;
    --ims-sidebar-active-bar: #2563eb;
    --ims-sidebar-hover-bg: rgba(255, 255, 255, 0.06);

    /* Layout dims — V7.1 premium sidebar widths (260 expanded / 100 mini) */
    --ims-sidebar-width: 16.25rem;          /* 260px - expanded */
    --ims-sidebar-collapsed-width: 6.25rem; /* 100px - mini */
    /* Snappy ease-out curve — feels premium without dragging.
       (Mirrors the Apple / Linear style curve at 200ms.) */
    --ims-sidebar-transition: 200ms cubic-bezier(0.22, 1, 0.36, 1);
    --ims-navbar-height: 3.75rem;

    /* Elevation + radius */
    --ims-radius-sm: 0.5rem;
    --ims-radius: 0.75rem;
    --ims-radius-lg: 1rem;
    --ims-radius-xl: 1.5rem;
    --ims-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06);
    --ims-shadow-sm: 0 2px 6px rgba(15, 23, 42, 0.06);
    --ims-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
    --ims-shadow-lg: 0 16px 48px rgba(15, 23, 42, 0.12);

    /* Motion */
    --ims-transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --ims-transition-fast: 120ms ease-out;
    --ims-transition-slow: 320ms cubic-bezier(0.4, 0, 0.2, 1);

    /* ----------------------------------------------------------------------
       V12 - Polish layer - canonical spacing scale
       Use these everywhere instead of raw rems so the whole app shares
       a single rhythm (a 4px base step, 8/12/16/24/32 multiples).
       ---------------------------------------------------------------------- */
    --ims-space-0: 0;
    --ims-space-1: 0.25rem;   /*  4px */
    --ims-space-2: 0.5rem;    /*  8px */
    --ims-space-3: 0.75rem;   /* 12px */
    --ims-space-4: 1rem;      /* 16px */
    --ims-space-5: 1.25rem;   /* 20px */
    --ims-space-6: 1.5rem;    /* 24px */
    --ims-space-7: 2rem;      /* 32px */
    --ims-space-8: 2.5rem;    /* 40px */
    --ims-space-9: 3rem;      /* 48px */
    --ims-space-10: 4rem;     /* 64px */

    /* Typography scale - 1.125 modular ratio anchored on 0.875rem body */
    --ims-text-2xs:  0.6875rem; /* 11px - eyebrows, meta tags */
    --ims-text-xs:   0.75rem;   /* 12px - micro labels */
    --ims-text-sm:   0.8125rem; /* 13px - secondary body */
    --ims-text-base: 0.875rem;  /* 14px - body */
    --ims-text-md:   0.9375rem; /* 15px - section titles */
    --ims-text-lg:   1.0625rem; /* 17px - card titles */
    --ims-text-xl:   1.25rem;   /* 20px - page titles small */
    --ims-text-2xl:  1.5rem;    /* 24px - page titles */
    --ims-text-3xl:  1.875rem;  /* 30px - hero numbers */

    /* Line heights - tighter for headings, generous for body */
    --ims-lh-tight: 1.2;
    --ims-lh-snug:  1.35;
    --ims-lh-base:  1.55;
    --ims-lh-loose: 1.7;

    /* Font weights - canonical only; avoid 800/900 outside hero numbers */
    --ims-fw-regular:  400;
    --ims-fw-medium:   500;
    --ims-fw-semibold: 600;
    --ims-fw-bold:     700;

    /* Letter spacing - eyebrows / labels lean ~6%; headings tighten -1% */
    --ims-tracking-tight:   -0.01em;
    --ims-tracking-normal:  0;
    --ims-tracking-wide:    0.04em;
    --ims-tracking-eyebrow: 0.06em;

    /* Focus ring - reused across inputs, buttons, drawer rows */
    --ims-focus-ring: 0 0 0 4px rgba(37, 99, 235, 0.18);
}

[data-theme="dark"] {
    --ims-bg: #0b1220;
    --ims-bg-elevated: #111a2e;
    --ims-card-bg: #131c33;
    --ims-card-border: #1f2a44;
    --ims-divider: #1b2540;
    --ims-text: #e5e7eb;
    --ims-text-muted: #94a3b8;
    --ims-text-soft: #64748b;
    --ims-heading: #f8fafc;
    --ims-sidebar-bg: #060c1c;
    --ims-sidebar-bg-grad-1: #060c1c;
    --ims-sidebar-bg-grad-2: #0e1936;
}

/* ----------------------------------------------------------------------------
   Body + global typography
   ---------------------------------------------------------------------------- */
html, body {
    height: 100%;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                 'Helvetica Neue', Arial, sans-serif;
    background-color: var(--ims-bg);
    color: var(--ims-text);
    font-size: var(--ims-text-base);
    line-height: var(--ims-lh-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--ims-heading);
    font-weight: var(--ims-fw-semibold);
    letter-spacing: var(--ims-tracking-tight);
    line-height: var(--ims-lh-tight);
    margin: 0 0 var(--ims-space-3);
}

h1 { font-size: var(--ims-text-2xl); }
h2 { font-size: var(--ims-text-xl); }
h3 { font-size: var(--ims-text-lg); font-weight: var(--ims-fw-bold); }
h4 { font-size: var(--ims-text-md); font-weight: var(--ims-fw-bold); }
h5 { font-size: var(--ims-text-base); font-weight: var(--ims-fw-bold); }
h6 { font-size: var(--ims-text-sm); font-weight: var(--ims-fw-bold); text-transform: uppercase; letter-spacing: var(--ims-tracking-wide); color: var(--ims-text-muted); }

a {
    color: var(--ims-primary);
    text-decoration: none;
}

a:hover {
    color: var(--ims-primary-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
}

::selection {
    background-color: var(--ims-primary-soft);
    color: var(--ims-primary-dark);
}

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

.page-pretitle {
    text-transform: uppercase;
    letter-spacing: var(--ims-tracking-eyebrow);
    font-size: var(--ims-text-2xs);
    font-weight: var(--ims-fw-semibold);
    color: var(--ims-text-soft) !important;
}

/* ----------------------------------------------------------------------------
   V12 Polish layer - reusable typography utility classes
   Use these in views instead of ad-hoc inline styles or one-off classes so
   the same hierarchy reads consistently across modules.
   ---------------------------------------------------------------------------- */
.text-eyebrow {
    text-transform: uppercase;
    letter-spacing: var(--ims-tracking-eyebrow);
    font-size: var(--ims-text-2xs);
    font-weight: var(--ims-fw-semibold);
    color: var(--ims-text-muted);
}

.text-meta {
    font-size: var(--ims-text-xs);
    color: var(--ims-text-muted);
    line-height: var(--ims-lh-snug);
}

.text-num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.text-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.fw-semibold { font-weight: var(--ims-fw-semibold) !important; }
.fw-medium   { font-weight: var(--ims-fw-medium)   !important; }

/* ----------------------------------------------------------------------------
   Page transitions
   ---------------------------------------------------------------------------- */
@keyframes imsFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.page-body,
.auth-shell {
    animation: imsFadeIn var(--ims-transition-slow) both;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* ----------------------------------------------------------------------------
   Cards
   ---------------------------------------------------------------------------- */
.card {
    background-color: var(--ims-card-bg);
    border: 1px solid var(--ims-card-border);
    border-radius: var(--ims-radius);
    box-shadow: var(--ims-shadow-xs);
    transition: box-shadow var(--ims-transition), transform var(--ims-transition),
                border-color var(--ims-transition);
}

.card-header {
    border-bottom: 1px solid var(--ims-divider);
    background-color: transparent;
    padding: var(--ims-space-4) var(--ims-space-5);
    min-height: auto;
}

.card-header .card-title {
    font-size: var(--ims-text-md);
    font-weight: var(--ims-fw-bold);
    color: var(--ims-heading);
    letter-spacing: var(--ims-tracking-tight);
    margin: 0;
}

.card-body {
    padding: var(--ims-space-5);
}

.card-footer {
    border-top: 1px solid var(--ims-divider);
    background-color: transparent;
    padding: var(--ims-space-4) var(--ims-space-5);
}

.card-table > thead {
    background-color: var(--ims-bg);
}

.card-table > thead > tr > th {
    text-transform: uppercase;
    letter-spacing: var(--ims-tracking-wide);
    font-size: var(--ims-text-2xs);
    font-weight: var(--ims-fw-semibold);
    color: var(--ims-text-soft);
    border-bottom: 1px solid var(--ims-divider);
    padding: var(--ims-space-3) var(--ims-space-4);
}

.card-table > tbody > tr {
    transition: background-color var(--ims-transition-fast);
}

.card-table > tbody > tr:hover {
    background-color: rgba(37, 99, 235, 0.04);
}

.card-table > tbody > tr > td {
    padding: var(--ims-space-3) var(--ims-space-4);
    vertical-align: middle;
}

.card-table > tbody > tr > td:first-child,
.card-table > thead > tr > th:first-child {
    padding-left: var(--ims-space-5);
}

.card-table > tbody > tr > td:last-child,
.card-table > thead > tr > th:last-child {
    padding-right: var(--ims-space-5);
}

/* ----------------------------------------------------------------------------
   Buttons
   ---------------------------------------------------------------------------- */
.btn {
    --tblr-btn-border-radius: var(--ims-radius-sm);
    border-radius: var(--ims-radius-sm);
    font-weight: var(--ims-fw-medium);
    letter-spacing: 0.01em;
    padding: 0.45rem 0.9rem;
    line-height: 1.35;
    transition: transform var(--ims-transition-fast),
                box-shadow var(--ims-transition-fast),
                background-color var(--ims-transition-fast),
                border-color var(--ims-transition-fast);
}

.btn-sm {
    padding: 0.3rem 0.65rem;
    font-size: var(--ims-text-sm);
}

.btn-lg {
    padding: 0.65rem 1.15rem;
    font-size: var(--ims-text-md);
}

.btn:focus-visible {
    box-shadow: var(--ims-focus-ring);
    outline: none;
}

.btn:active {
    transform: translateY(1px);
}

.btn-primary {
    background-color: var(--ims-primary);
    border-color: var(--ims-primary);
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.22);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--ims-primary-dark);
    border-color: var(--ims-primary-dark);
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.32);
}

.btn-outline-secondary {
    border-color: var(--ims-card-border);
    color: var(--ims-text-muted);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background-color: var(--ims-bg);
    border-color: var(--ims-text-soft);
    color: var(--ims-text);
}

/* Subtle ghost button for low-emphasis actions in toolbars */
.btn-ghost {
    background-color: transparent;
    border-color: transparent;
    color: var(--ims-text-muted);
}

.btn-ghost:hover,
.btn-ghost:focus {
    background-color: var(--ims-bg);
    color: var(--ims-text);
}

.btn-icon-only {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ims-radius-sm);
}

/* Consistent gap between any two adjacent buttons in a horizontal group */
.btn + .btn { margin-left: 0; }
.btn-group-tight > .btn + .btn { margin-left: var(--ims-space-1); }

/* ----------------------------------------------------------------------------
   Form inputs
   ---------------------------------------------------------------------------- */
.form-control,
.form-select {
    border-radius: var(--ims-radius-sm);
    border-color: var(--ims-card-border);
    color: var(--ims-text);
    font-size: var(--ims-text-base);
    padding: 0.45rem 0.75rem;
    line-height: 1.4;
    transition: border-color var(--ims-transition-fast),
                box-shadow var(--ims-transition-fast),
                background-color var(--ims-transition-fast);
}

.form-control::placeholder { color: var(--ims-text-soft); }

.form-control:focus,
.form-select:focus {
    border-color: var(--ims-primary);
    box-shadow: var(--ims-focus-ring);
}

.form-control:disabled,
.form-select:disabled {
    background-color: var(--ims-bg);
    color: var(--ims-text-muted);
}

.form-control-sm, .form-select-sm {
    font-size: var(--ims-text-sm);
    padding: 0.3rem 0.6rem;
}

.form-label {
    font-weight: var(--ims-fw-medium);
    color: var(--ims-text);
    font-size: var(--ims-text-sm);
    margin-bottom: var(--ims-space-2);
    line-height: 1.35;
}

.form-label.required::after,
.required-marker::after {
    content: ' *';
    color: var(--ims-danger);
    font-weight: var(--ims-fw-bold);
}

.form-text,
.form-hint {
    font-size: var(--ims-text-xs);
    color: var(--ims-text-muted);
    line-height: var(--ims-lh-snug);
    margin-top: var(--ims-space-1);
}

.input-group-text {
    background-color: var(--ims-bg);
    border-color: var(--ims-card-border);
    color: var(--ims-text-muted);
    font-size: var(--ims-text-sm);
}

/* Stacked field rhythm - use .form-row inside vertical forms for consistency */
.form-row { margin-bottom: var(--ims-space-4); }
.form-row:last-child { margin-bottom: 0; }

/* ----------------------------------------------------------------------------
   Badges
   ---------------------------------------------------------------------------- */
.badge {
    font-weight: var(--ims-fw-semibold);
    letter-spacing: 0.02em;
    font-size: var(--ims-text-2xs);
    padding: 0.3em 0.6em;
    border-radius: 999px;
    line-height: 1.3;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.badge.badge-soft-primary  { background: rgba(37, 99, 235, 0.1);  color: var(--ims-primary-dark); }
.badge.badge-soft-success  { background: rgba(22, 163, 74, 0.12); color: #166534; }
.badge.badge-soft-warning  { background: rgba(245, 158, 11, 0.15); color: #92400e; }
.badge.badge-soft-danger   { background: rgba(220, 38, 38, 0.12); color: #991b1b; }
.badge.badge-soft-info     { background: rgba(14, 165, 233, 0.12); color: #075985; }
.badge.badge-soft-muted    { background: var(--ims-bg);            color: var(--ims-text-muted); }

/* ----------------------------------------------------------------------------
   Modals + Dropdowns
   ---------------------------------------------------------------------------- */
.modal-content {
    border: none;
    border-radius: var(--ims-radius-lg);
    box-shadow: var(--ims-shadow-lg);
}

.modal-header {
    border-bottom: 1px solid var(--ims-divider);
    padding: var(--ims-space-5) var(--ims-space-6);
}

.modal-title {
    font-size: var(--ims-text-md);
    font-weight: var(--ims-fw-bold);
    color: var(--ims-heading);
    letter-spacing: var(--ims-tracking-tight);
}

.modal-body { padding: var(--ims-space-6); }

.modal-footer {
    border-top: 1px solid var(--ims-divider);
    padding: var(--ims-space-4) var(--ims-space-6);
    gap: var(--ims-space-2);
}

.dropdown-menu {
    border-radius: var(--ims-radius);
    border: 1px solid var(--ims-card-border);
    box-shadow: var(--ims-shadow);
    padding: var(--ims-space-2);
    min-width: 13rem;
    font-size: var(--ims-text-sm);
}

.dropdown-item {
    border-radius: var(--ims-radius-sm);
    padding: var(--ims-space-2) var(--ims-space-3);
    transition: background-color var(--ims-transition-fast);
    color: var(--ims-text);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--ims-primary-soft);
    color: var(--ims-primary-dark);
}

.dropdown-divider {
    border-color: var(--ims-divider);
    margin: var(--ims-space-2) calc(-1 * var(--ims-space-2));
}

.dropdown-header {
    font-size: var(--ims-text-2xs);
    text-transform: uppercase;
    letter-spacing: var(--ims-tracking-eyebrow);
    font-weight: var(--ims-fw-semibold);
    color: var(--ims-text-soft);
    padding: var(--ims-space-2) var(--ims-space-3);
}

/* ----------------------------------------------------------------------------
   Alerts
   ---------------------------------------------------------------------------- */
.alert {
    border-radius: var(--ims-radius);
    border-width: 1px;
}

/* ----------------------------------------------------------------------------
   Pagination
   ---------------------------------------------------------------------------- */
.page-link {
    border-radius: var(--ims-radius-sm) !important;
    margin: 0 0.15rem;
    border: 1px solid var(--ims-card-border);
}

.page-item.active .page-link {
    background-color: var(--ims-primary);
    border-color: var(--ims-primary);
}

/* ============================================================================
   Layout shell — pure flexbox.

   Strategy:
   * .page is a horizontal flex container at desktop.
   * .navbar-vertical (sidebar) is a non-shrinking flex item whose width
     is driven directly by --ims-sidebar-width.
   * .page-wrapper is `flex: 1 1 auto; min-width: 0` so it consumes the
     remaining space automatically — no margin-left / padding-inline-start
     reservations required (Tabler defaults to padding-inline-start: 15rem;
     we hard-zero it so the flex distribution wins).
   * Containers inside .page-body are made fluid so cards / tables /
     DataTables resize cleanly when the sidebar collapses.
   * On mobile (< 992px) .page reverts to block flow and the sidebar
     becomes a fixed offcanvas panel.
   ============================================================================ */

.navbar-vertical {
    background: linear-gradient(180deg, var(--ims-sidebar-bg-grad-1) 0%,
                                          var(--ims-sidebar-bg-grad-2) 100%) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.04);
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.04);
    transition: width var(--ims-sidebar-transition),
                flex-basis var(--ims-sidebar-transition),
                transform var(--ims-sidebar-transition);
    overflow-x: hidden;
    overflow-y: auto;
    /* Scope layout/paint to the sidebar itself — keeps reflow off the
       main page during a width animation. */
    contain: layout paint style;
    will-change: width;
}

/* Force the layout shell into a horizontal flex row.
   Tabler's core CSS sets `.page { flex-direction: column }` which would
   stack sidebar above page-wrapper — we override that explicitly. */
.page {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
    min-height: 100vh;
    width: 100%;
}

.page-wrapper {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    width: auto;
    display: flex;
    flex-direction: column;

    /* Override Tabler defaults that would otherwise reserve sidebar width. */
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-inline-start: 0 !important;
    padding-inline-end: 0 !important;
}

.page-body {
    flex: 1 0 auto;
    min-width: 0;
}

/* Make every Bootstrap container fluid inside the dashboard so content
   uses the full width left by the sidebar (with sensible inline padding). */
.page-body > .container,
.page-body > .container-sm,
.page-body > .container-md,
.page-body > .container-lg,
.page-body > .container-xl,
.page-body > .container-xxl,
.page-body > .container-fluid {
    max-width: 100% !important;
    width: 100%;
    padding-inline: clamp(1rem, 2vw, 1.75rem);
}

/* Desktop sidebar — sticky icon strip that flexes between expanded /
   collapsed widths. */
@media (min-width: 992px) {
    .navbar-vertical {
        position: sticky !important;
        top: 0;
        bottom: auto;
        left: auto;
        right: auto;
        height: 100vh;
        width: var(--ims-sidebar-width) !important;
        flex: 0 0 var(--ims-sidebar-width);
        z-index: 1030;
        transform: none !important;
    }

    .sidebar-collapsed .navbar-vertical {
        width: var(--ims-sidebar-collapsed-width) !important;
        flex-basis: var(--ims-sidebar-collapsed-width);
    }
}

/* Mobile sidebar — fixed offcanvas panel; page-wrapper always takes 100%. */
@media (max-width: 991.98px) {
    .page {
        display: block !important;
    }
    .navbar-vertical {
        position: fixed !important;
        top: 0;
        bottom: 0;
        left: 0;
        height: 100vh;
        width: 17rem !important;
        flex: none;
        transform: translateX(-100%);
        z-index: 1045;
    }
    body.sidebar-mobile-open .navbar-vertical {
        transform: translateX(0) !important;
    }
    body.sidebar-mobile-open {
        overflow: hidden;
    }
    .page-wrapper {
        width: 100% !important;
    }
}

/* Sidebar overlay (mobile) */
.sidebar-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    z-index: 1040;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--ims-transition), visibility var(--ims-transition);
}

body.sidebar-mobile-open .sidebar-overlay {
    opacity: 1;
    visibility: visible;
}

/* ----------------------------------------------------------------------------
   Reusable utilities
   ---------------------------------------------------------------------------- */
.ims-page-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--ims-divider);
}

.ims-soft-card {
    background-color: var(--ims-bg-elevated);
    border-radius: var(--ims-radius);
    padding: 1.25rem;
    border: 1px solid var(--ims-card-border);
}

.ims-gradient-text {
    background: linear-gradient(135deg, var(--ims-primary), var(--ims-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.ims-divider {
    height: 1px;
    background-color: var(--ims-divider);
    margin: 1rem 0;
}

/* Skeleton-friendly empty state */
.ims-empty {
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--ims-text-muted);
}

.ims-empty i {
    font-size: 2.25rem;
    opacity: 0.4;
    margin-bottom: 0.5rem;
    display: block;
}

/* Scrollbars (modern subtle) */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(100, 116, 139, 0.4) transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background-color: rgba(100, 116, 139, 0.3);
    border-radius: 8px;
}
*::-webkit-scrollbar-thumb:hover {
    background-color: rgba(100, 116, 139, 0.55);
}

/* ============================================================================
   V12 - Polish layer - section primitives + KPI / definition-list rhythm
   ============================================================================ */

/* Section header used inside cards / panels for a consistent secondary title */
.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ims-space-3);
    padding-bottom: var(--ims-space-3);
    margin-bottom: var(--ims-space-4);
    border-bottom: 1px solid var(--ims-divider);
}
.section-head .section-title {
    margin: 0;
    font-size: var(--ims-text-md);
    font-weight: var(--ims-fw-bold);
    color: var(--ims-heading);
    letter-spacing: var(--ims-tracking-tight);
}
.section-head .section-subtitle {
    margin: 0;
    font-size: var(--ims-text-xs);
    color: var(--ims-text-muted);
}
.section-head .section-actions { display: inline-flex; gap: var(--ims-space-2); }

/* Subtle horizontal rule used inside drawers, summaries, cards */
.section-divider {
    height: 1px;
    background: var(--ims-divider);
    margin: var(--ims-space-5) 0;
    border: 0;
}

/* Definition list - label/value rows used in detail drawers + summaries */
.def-list {
    display: grid;
    grid-template-columns: minmax(7rem, max-content) 1fr;
    column-gap: var(--ims-space-4);
    row-gap: var(--ims-space-3);
    margin: 0;
}
.def-list dt {
    font-size: var(--ims-text-xs);
    text-transform: uppercase;
    letter-spacing: var(--ims-tracking-eyebrow);
    color: var(--ims-text-soft);
    font-weight: var(--ims-fw-semibold);
    padding-top: 0.1rem;
}
.def-list dd {
    margin: 0;
    font-size: var(--ims-text-sm);
    color: var(--ims-text);
    line-height: var(--ims-lh-snug);
    overflow-wrap: anywhere;
}

/* KPI block - a single tile inside a stat row / drawer KPI strip */
.kpi-tile {
    background: var(--ims-card-bg);
    border: 1px solid var(--ims-card-border);
    border-radius: var(--ims-radius);
    padding: var(--ims-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--ims-space-1);
}
.kpi-tile .kpi-label {
    font-size: var(--ims-text-2xs);
    text-transform: uppercase;
    letter-spacing: var(--ims-tracking-eyebrow);
    color: var(--ims-text-soft);
    font-weight: var(--ims-fw-semibold);
}
.kpi-tile .kpi-value {
    font-size: var(--ims-text-xl);
    font-weight: var(--ims-fw-bold);
    color: var(--ims-heading);
    line-height: var(--ims-lh-tight);
    letter-spacing: var(--ims-tracking-tight);
    font-variant-numeric: tabular-nums;
}
.kpi-tile .kpi-sub {
    font-size: var(--ims-text-xs);
    color: var(--ims-text-muted);
}

/* ------------------------------------------------------------------ */
/* V18 — Global tint for Edit & Delete action-button icons.            */
/*                                                                     */
/* The app uses two button conventions for row-level edit / delete:    */
/*   1. Masters DataTables (masters.js):                               */
/*        <button class="action-btn action-btn-edit"   data-action="edit"  …><i class="ti ti-edit" /></button>
/*        <button class="action-btn action-btn-delete" data-action="delete"…><i class="ti ti-trash"/></button>
/*   2. Users / transaction lists:                                     */
/*        <button class="btn btn-sm btn-outline-primary" data-action="edit"  …><i class="ti ti-pencil"/></button>
/*        <button class="btn btn-sm btn-outline-danger"  data-action="delete"…><i class="ti ti-trash" /></button>
/*                                                                     */
/* This block locks the icon glyphs to the requested palette across    */
/* both conventions and across every state (default / hover / focus /  */
/* active / disabled) so they stay visually consistent app-wide.       */
/* ------------------------------------------------------------------ */

/* Edit — soft blue. */
.action-btn-edit i.ti,
.action-btn-edit > .ti,
[data-action="edit"] i.ti,
[data-action="edit"] > .ti {
    color: #5b8ae6 !important;
}

/* Delete — soft red. */
.action-btn-delete i.ti,
.action-btn-delete > .ti,
[data-action="delete"] i.ti,
[data-action="delete"] > .ti {
    color: #ea7575 !important;
}

/* Bootstrap's .btn-outline-*:hover flips the *button* background to a
   solid fill and sets `color:#fff` — which would normally cascade onto
   the <i> and wipe out our locked icon colour. Soften that fill to a
   matching tint and keep the icon colour intact. */
.btn-outline-primary[data-action="edit"]:hover,
.btn-outline-primary[data-action="edit"]:focus-visible,
.btn-outline-primary[data-action="edit"]:active,
.action-btn-edit:hover,
.action-btn-edit:focus-visible,
.action-btn-edit:active {
    background-color: rgba(91, 138, 230, 0.10);
    border-color: rgba(91, 138, 230, 0.35);
    color: #5b8ae6;
}

.btn-outline-danger[data-action="delete"]:hover,
.btn-outline-danger[data-action="delete"]:focus-visible,
.btn-outline-danger[data-action="delete"]:active,
.action-btn-delete:hover,
.action-btn-delete:focus-visible,
.action-btn-delete:active {
    background-color: rgba(234, 117, 117, 0.10);
    border-color: rgba(234, 117, 117, 0.40);
    color: #ea7575;
}

/* Disabled buttons should look muted, not crisp blue/red. */
.action-btn-edit:disabled i.ti,
.action-btn-edit.disabled i.ti,
[data-action="edit"]:disabled i.ti,
[data-action="edit"].disabled i.ti,
.action-btn-delete:disabled i.ti,
.action-btn-delete.disabled i.ti,
[data-action="delete"]:disabled i.ti,
[data-action="delete"].disabled i.ti {
    color: var(--ims-text-muted, #94a3b8) !important;
    opacity: 0.65;
}

/* Soft surface alternative to .card for grouping panels inside workflows */
.surface {
    background: var(--ims-card-bg);
    border: 1px solid var(--ims-card-border);
    border-radius: var(--ims-radius);
    box-shadow: var(--ims-shadow-xs);
}
.surface-pad      { padding: var(--ims-space-5); }
.surface-pad-sm   { padding: var(--ims-space-4); }
.surface-pad-lg   { padding: var(--ims-space-6); }

/* Tighten the gap between stacked cards/sections on a page */
.stack > * + * { margin-top: var(--ims-space-4); }
.stack-sm > * + * { margin-top: var(--ims-space-3); }
.stack-lg > * + * { margin-top: var(--ims-space-6); }

/* Subtle bordered chip used in toolbars / quick-filter contexts */
.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--ims-space-1);
    background: var(--ims-bg);
    border: 1px solid var(--ims-card-border);
    border-radius: 999px;
    padding: 0.2rem 0.65rem;
    font-size: var(--ims-text-xs);
    color: var(--ims-text-muted);
    line-height: 1.4;
}
.chip.is-active {
    background: var(--ims-primary-soft);
    border-color: rgba(37, 99, 235, 0.25);
    color: var(--ims-primary-dark);
    font-weight: var(--ims-fw-semibold);
}

/* Loading skeleton primitive - reusable across modules */
.skeleton {
    display: block;
    background: linear-gradient(90deg,
                rgba(15, 23, 42, 0.06) 25%,
                rgba(15, 23, 42, 0.04) 37%,
                rgba(15, 23, 42, 0.06) 63%);
    background-size: 400% 100%;
    border-radius: var(--ims-radius-sm);
    animation: imsSkeleton 1.4s ease-in-out infinite;
}
.skeleton.is-text     { height: 0.85rem; }
.skeleton.is-heading  { height: 1.15rem; width: 60%; }
.skeleton.is-row      { height: 2.25rem; margin-bottom: var(--ims-space-2); }
.skeleton.is-circle   { width: 2rem; height: 2rem; border-radius: 50%; }

@keyframes imsSkeleton {
    0%   { background-position: 100% 0%; }
    100% { background-position: 0% 0%; }
}

/* Dark-theme tweaks for the new V12 surfaces */
[data-theme="dark"] .kpi-tile,
[data-theme="dark"] .surface { background: var(--ims-card-bg); border-color: var(--ims-card-border); }
[data-theme="dark"] .chip    { background: rgba(255, 255, 255, 0.04); border-color: var(--ims-card-border); color: var(--ims-text-muted); }
[data-theme="dark"] .skeleton {
    background: linear-gradient(90deg,
                rgba(255, 255, 255, 0.06) 25%,
                rgba(255, 255, 255, 0.03) 37%,
                rgba(255, 255, 255, 0.06) 63%);
    background-size: 400% 100%;
}

/* ============================================================================
   V12 - Responsive refinement
   ----------------------------------------------------------------------------
   Sweep across breakpoints so the polish reads correctly on smaller screens:
     * mobile (<= 575)  : tighter padding, full-width actions, hidden eyebrows
     * tablet (<= 991)  : sidebar offcanvas, single-column workspace
     * desktop (>= 992) : full breathing room
   ============================================================================ */

/* Tablet and below - tighten card chrome, fold KPI tiles */
@media (max-width: 991.98px) {
    .card-header { padding: var(--ims-space-3) var(--ims-space-4); }
    .card-body   { padding: var(--ims-space-4); }
    .card-footer { padding: var(--ims-space-3) var(--ims-space-4); }
    .modal-header,
    .modal-body,
    .modal-footer { padding: var(--ims-space-4); }

    .section-head { padding-bottom: var(--ims-space-2); margin-bottom: var(--ims-space-3); }

    .kpi-tile { padding: var(--ims-space-3); }
    .kpi-tile .kpi-value { font-size: var(--ims-text-lg); }

    .def-list { grid-template-columns: 1fr; gap: var(--ims-space-1) var(--ims-space-3); }
    .def-list dt { padding-top: var(--ims-space-2); }
    .def-list dt:first-of-type { padding-top: 0; }
}

/* Mobile - stack everything, generous touch targets, hide non-critical chrome */
@media (max-width: 575.98px) {
    body { font-size: var(--ims-text-base); }
    h1   { font-size: var(--ims-text-xl); }
    h2   { font-size: var(--ims-text-lg); }

    .btn { min-height: 2.5rem; padding: 0.5rem 0.9rem; }
    .btn-sm { min-height: 2.25rem; }

    .form-control,
    .form-select { min-height: 2.5rem; }

    /* Action buttons in a toolbar should grow to fill the row */
    .page-header-modern .header-actions { width: 100%; }
    .page-header-modern .header-actions .btn { flex: 1 1 auto; }

    /* Hide chip-style eyebrows that just add noise on tiny screens */
    .page-pretitle { font-size: 0.6rem; }
}

/* Reduce vertical padding inside drawers on narrow viewports for more content */
@media (max-width: 575.98px) {
    .inq-drawer .offcanvas-header   { padding: var(--ims-space-4); }
    .inq-drawer-kpis                { padding: var(--ims-space-3) var(--ims-space-4); gap: var(--ims-space-2); }
    .inq-drawer-tab-body            { padding: var(--ims-space-4); }
}