/**
 * MyFlow - Custom CSS
 * Primitives only - Bootstrap utilities handle everything else
 *
 * Contract: Only CSS that Bootstrap cannot express belongs here:
 *   1. CSS variables (brand tokens, dimensions)
 *   2. True UI primitives (timeline, etc.)
 *   3. Bootstrap gaps (offcanvas width has no utility class)
 *   4. Muted design system overrides
 */

/* ==========================================================================
   CSS VARIABLES
   --brand-primary is set dynamically in template <style> (per-utility branding)
   ========================================================================== */

:root {
    --sidebar-width: 280px;
}

/* ==========================================================================
   MUTED DESIGN SYSTEM
   Overrides Bootstrap's saturated palette with a professional, calm aesthetic.
   Semantic classes preserved in HTML — only the rendered colors change.
   ========================================================================== */

[data-bs-theme="light"] {
    /* Primary: restrained teal */
    --bs-primary: #4a7c7e;
    --bs-primary-rgb: 74, 124, 126;

    /* Success / compliant: muted operational green */
    --bs-success: #2f7d57;
    --bs-success-rgb: 47, 125, 87;

    /* Warning / due-soon: controlled amber (not bright yellow) */
    --bs-warning: #c58a2a;
    --bs-warning-rgb: 197, 138, 42;

    /* Danger / overdue: soft operational red */
    --bs-danger: #b94a48;
    --bs-danger-rgb: 185, 74, 72;

    /* Info: steel blue */
    --bs-info: #5080a8;
    --bs-info-rgb: 80, 128, 168;

    /* Secondary: slate */
    --bs-secondary: #64748b;
    --bs-secondary-rgb: 100, 116, 139;

    /* Body/background: cool neutral (not beige) */
    --bs-body-bg: #f6f8fa;
    --bs-body-color: #36404e;

    /* Subtle backgrounds (badges, pills) */
    --bs-success-bg-subtle: #e2f0e8;
    --bs-success-text-emphasis: #2a6840;
    --bs-warning-bg-subtle: #f5edda;
    --bs-warning-text-emphasis: #7a5f14;
    --bs-danger-bg-subtle: #f5e3e3;
    --bs-danger-text-emphasis: #7a3230;
    --bs-info-bg-subtle: #e3edf5;
    --bs-info-text-emphasis: #2f5475;
    --bs-primary-bg-subtle: #e5eeef;
    --bs-primary-text-emphasis: #345758;
    --bs-secondary-bg-subtle: #edf0f3;
    --bs-secondary-text-emphasis: #4a5563;

    /* Card + surface borders: cool blue-gray, not warm gray */
    --bs-secondary-border-subtle: #d9e1e8;

    /* Metric icon boxes: intentional, quiet, cool */
    --metric-icon-bg: #eef3f7;
    --metric-icon-border: #d8e2ea;
    --metric-icon-color: #536577;

    /* Compliance chart series (mirror the status palette; no muddy khaki) */
    --chart-compliant: #2f7d57;
    --chart-due-soon: #c58a2a;
    --chart-overdue: #b94a48;
    --chart-failed: #7f3f46;

    /* Link color */
    --bs-link-color: #4a7c7e;
    --bs-link-hover-color: #3a6264;
}

/* Dark mode: slightly muted versions (keep readable contrast) */
[data-bs-theme="dark"] {
    --bs-primary: #6ba3a5;
    --bs-primary-rgb: 107, 163, 165;
    --bs-success: #5dba7d;
    --bs-success-rgb: 93, 186, 125;
    --bs-warning: #dbb84a;
    --bs-warning-rgb: 219, 184, 74;
    --bs-danger: #d4706d;
    --bs-danger-rgb: 212, 112, 109;
    --bs-info: #6aa3cc;
    --bs-info-rgb: 106, 163, 204;
    --bs-secondary: #8a9aad;
    --bs-secondary-rgb: 138, 154, 173;

    /* Metric icon boxes (dark) */
    --metric-icon-bg: rgba(148, 163, 184, 0.10);
    --metric-icon-border: rgba(148, 163, 184, 0.18);
    --metric-icon-color: #aab6c4;

    /* Compliance chart series (dark — slightly lifted for contrast) */
    --chart-compliant: #4f9e76;
    --chart-due-soon: #d2a23f;
    --chart-overdue: #cf6a67;
    --chart-failed: #a85f66;
}

/* ==========================================================================
   BADGES — quiet pills, not colorful stickers
   ========================================================================== */

.badge {
    font-weight: 500;
    letter-spacing: 0.01em;
}

.badge.bg-success {
    background-color: var(--bs-success-bg-subtle) !important;
    color: var(--bs-success-text-emphasis) !important;
}
.badge.bg-warning {
    background-color: var(--bs-warning-bg-subtle) !important;
    color: var(--bs-warning-text-emphasis) !important;
}
.badge.bg-danger {
    background-color: var(--bs-danger-bg-subtle) !important;
    color: var(--bs-danger-text-emphasis) !important;
}
.badge.bg-info {
    background-color: var(--bs-info-bg-subtle) !important;
    color: var(--bs-info-text-emphasis) !important;
}
.badge.bg-primary {
    background-color: var(--bs-primary-bg-subtle) !important;
    color: var(--bs-primary-text-emphasis) !important;
}
.badge.bg-secondary {
    background-color: var(--bs-secondary-bg-subtle) !important;
    color: var(--bs-secondary-text-emphasis) !important;
}
.badge.bg-light {
    background-color: var(--bs-secondary-bg-subtle) !important;
    color: var(--bs-secondary-text-emphasis) !important;
}

/* Activity feed round indicators: slightly transparent */
.badge.rounded-circle .bi { color: inherit !important; }
.badge.rounded-circle.bg-success,
.badge.rounded-circle.bg-danger,
.badge.rounded-circle.bg-warning,
.badge.rounded-circle.bg-info,
.badge.rounded-circle.bg-primary {
    opacity: 0.75;
}

/* ==========================================================================
   BUTTONS — primary CTA (teal) + destructive (clay), rest untouched
   ========================================================================== */

/*
 * Per-variant overrides. Bootstrap's compiled .btn-* rules embed
 * literal RGB values for --bs-btn-focus-shadow-rgb and don't read
 * --bs-primary-rgb, so the active/focus states need explicit overrides
 * here in addition to bg/border/hover (otherwise the focus ring shows
 * Bootstrap's default blue after a click).
 */
.btn-primary {
    --bs-btn-bg: #4a7c7e;
    --bs-btn-border-color: #4a7c7e;
    --bs-btn-hover-bg: #3a6264;
    --bs-btn-hover-border-color: #3a6264;
    --bs-btn-active-bg: #3a6264;
    --bs-btn-active-border-color: #3a6264;
    --bs-btn-focus-shadow-rgb: 74, 124, 126;
}
.btn-outline-primary {
    --bs-btn-color: #4a7c7e;
    --bs-btn-border-color: #4a7c7e;
    --bs-btn-hover-bg: #4a7c7e;
    --bs-btn-hover-border-color: #4a7c7e;
    --bs-btn-active-bg: #4a7c7e;
    --bs-btn-active-border-color: #4a7c7e;
    --bs-btn-focus-shadow-rgb: 74, 124, 126;
}
.btn-danger {
    --bs-btn-bg: #9e5b5b;
    --bs-btn-border-color: #9e5b5b;
    --bs-btn-hover-bg: #854a4a;
    --bs-btn-hover-border-color: #854a4a;
    --bs-btn-active-bg: #854a4a;
    --bs-btn-active-border-color: #854a4a;
    --bs-btn-focus-shadow-rgb: 158, 91, 91;
}
.btn-outline-danger {
    --bs-btn-color: #9e5b5b;
    --bs-btn-border-color: #9e5b5b;
    --bs-btn-hover-bg: #9e5b5b;
    --bs-btn-hover-border-color: #9e5b5b;
    --bs-btn-active-bg: #9e5b5b;
    --bs-btn-active-border-color: #9e5b5b;
    --bs-btn-focus-shadow-rgb: 158, 91, 91;
}

/* ==========================================================================
   NAV PILLS — active state must follow the muted palette
   Bootstrap compiles --bs-nav-pills-link-active-bg to a literal #0d6efd
   (default blue) and does NOT read --bs-primary, so the active pill ignores
   the teal brand token and renders off-brand blue. Same class of issue as
   the .btn-* literal-RGB overrides above. Re-point it at the brand token so
   active pills match the rest of the UI (white text on teal stays readable).
   ========================================================================== */

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--bs-primary);
}

/* ==========================================================================
   PAGINATION — active page must follow the muted palette
   Same literal-blue leak as nav-pills: --bs-pagination-active-bg/-border-color
   compile to #0d6efd and ignore --bs-primary. Link color already reads
   --bs-link-color (teal), so only the active page's bg + border need fixing.
   Affects every paginated list page (~26 templates).
   ========================================================================== */

.pagination {
    --bs-pagination-active-bg: var(--bs-primary);
    --bs-pagination-active-border-color: var(--bs-primary);
}

/* ==========================================================================
   METRIC UTILITIES — for dashboard/stat cards
   Explicit classes for new templates. Legacy colored stat numbers are
   neutralized below via a narrow structural selector.
   ========================================================================== */

.metric-number {
    color: var(--bs-body-color);
    font-weight: 700;
}
.metric-icon {
    background-color: var(--metric-icon-bg) !important;
    color: var(--metric-icon-color);
    border: 1px solid var(--metric-icon-border);
}

/* Neutralize legacy stat-card colored numbers.
   Targets: .card-body > large bold number divs used as KPI counters.
   Narrow enough to avoid muting semantic text inside cards generally. */
.card-body > .fs-2[class*="text-"],
.card-body > .fs-3[class*="text-"],
.card-body > .fs-4[class*="text-"] {
    color: var(--bs-body-color) !important;
}
/* Also catch the wrapper pattern: .card-body > div > div.fs-N */
.card-body div.fs-2[class*="fw-bold"],
.card-body div.fs-3[class*="fw-bold"],
.card-body div.fs-4[class*="fw-bold"] {
    color: var(--bs-body-color) !important;
}

/* Neutralize colored icon pill backgrounds in stat cards — match .metric-icon */
[class*="bg-opacity-10"] {
    background-color: var(--metric-icon-bg) !important;
    border: 1px solid var(--metric-icon-border);
}
[class*="bg-opacity-10"] i[class*="text-"] {
    color: var(--metric-icon-color) !important;
}

/* ==========================================================================
   TABLES — breathable, calm, enterprise feel
   ========================================================================== */

.table-light {
    --bs-table-bg: #f5f7f9;
    --bs-table-color: #455064;
}

.table > :not(caption) > * > * {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.table {
    --bs-table-border-color: #e9ecef;
}

.table thead th {
    font-weight: 600;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #55617a;
    border-bottom-width: 1px;
}

/* Dark mode: muted slate table borders */
[data-bs-theme="dark"] .table,
[data-bs-theme="dark"] table {
    --bs-table-border-color: rgba(148, 163, 184, 0.16);
    border-color: rgba(148, 163, 184, 0.16);
}

[data-bs-theme="dark"] .table > :not(caption) > * > * {
    border-bottom-color: rgba(148, 163, 184, 0.14);
}

[data-bs-theme="dark"] .table thead th {
    border-bottom-color: rgba(148, 163, 184, 0.22);
}

[data-bs-theme="dark"] .table-light {
    --bs-table-bg: rgba(148, 163, 184, 0.06);
    --bs-table-color: inherit;
}

/* ==========================================================================
   STATUS-ROW HIGHLIGHTING — point at the ONE blocker, keep the rest quiet
   The pipeline table reads as a diagnosis, not a striped warning banner:
   exactly one row (the blocker) gets a strong treatment. Errors tint red with
   a left accent bar (theme-adaptive subtle-bg token; dark text + the red error
   count stay legible). Rows the pipeline never reached are muted (de-emphasized,
   not alarmed). Promoted/clean rows get NO row treatment — success is carried by
   the green badge alone. Warnings deliberately do NOT tint the row; they live in
   the Warnings card. Applied via .import-row-error / .import-row-muted on the <tr>.
   ========================================================================== */

.table > tbody > tr.import-row-error {
    --bs-table-bg: var(--bs-danger-bg-subtle);
}
.table > tbody > tr.import-row-error > :first-child {
    box-shadow: inset 3px 0 0 var(--bs-danger);
}
.table > tbody > tr.import-row-muted {
    opacity: 0.72;
}

/* ==========================================================================
   ALERTS — subtle backgrounds
   ========================================================================== */

.alert-success {
    --bs-alert-bg: var(--bs-success-bg-subtle);
    --bs-alert-color: var(--bs-success-text-emphasis);
    --bs-alert-border-color: #c8dece;
}
.alert-warning {
    --bs-alert-bg: var(--bs-warning-bg-subtle);
    --bs-alert-color: var(--bs-warning-text-emphasis);
    --bs-alert-border-color: #e0d8c4;
}
.alert-danger {
    --bs-alert-bg: var(--bs-danger-bg-subtle);
    --bs-alert-color: var(--bs-danger-text-emphasis);
    --bs-alert-border-color: #dcc8c8;
}
.alert-info {
    --bs-alert-bg: var(--bs-info-bg-subtle);
    --bs-alert-color: var(--bs-info-text-emphasis);
    --bs-alert-border-color: #c4d6e4;
}

/* ==========================================================================
   PROGRESS BARS — use muted palette
   ========================================================================== */

.progress-bar.bg-success { background-color: var(--bs-success) !important; }
.progress-bar.bg-warning { background-color: var(--bs-warning) !important; }
.progress-bar.bg-danger  { background-color: var(--bs-danger) !important; }
.progress-bar.bg-info    { background-color: var(--bs-info) !important; }

/* ==========================================================================
   OFFCANVAS WIDTH
   Bootstrap has no utility class for offcanvas width
   ========================================================================== */

#sidebarMenu.offcanvas-start { width: var(--sidebar-width); }

/* ==========================================================================
   TIMELINE PRIMITIVE
   Custom UI component for test history - Bootstrap cannot express this
   ========================================================================== */

.timeline {
    position: relative;
    padding-left: 30px;
}
.timeline::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--bs-border-color);
}
.timeline-item {
    position: relative;
    padding-bottom: 1.5rem;
}
.timeline-item::before {
    content: '';
    position: absolute;
    left: -24px;
    top: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--brand-primary);
    background: var(--bs-body-bg);
}
.timeline-item.pass::before { border-color: var(--bs-success); background: var(--bs-success); }
.timeline-item.fail::before { border-color: var(--bs-danger); background: var(--bs-danger); }

/* ==========================================================================
   CARDS — crisp surface, soft layered depth (replaces heavy Bootstrap shadow)
   The default .shadow utility is a single heavy 15%-black drop; cards read
   cleaner with a tight contact shadow + a wide, very-low-opacity slate ambient.
   ========================================================================== */

.card.shadow {
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05),
                0 8px 20px rgba(15, 23, 42, 0.04) !important;
}

/* ==========================================================================
   HOVER EFFECTS
   Interactive card lift effect for clickable metric cards
   ========================================================================== */

.hover-lift {
    transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
.hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.07),
                0 12px 28px rgba(15, 23, 42, 0.06) !important;
    border-color: #c7d3dc !important;
}



/* Clickable list items — hover tint for mobile cards / non-table rows */
.clickable-row { transition: background-color 0.1s ease-in-out; }
.clickable-row:hover { background-color: var(--bs-secondary-bg); }

/* Min-width helper for text truncation */
.min-width-0 { min-width: 0; }

/* ==========================================================================
   ACCESSIBILITY
   Skip-link, focus indicators, reduced-motion.
   Additive only — does not alter existing navigation or layout.
   ========================================================================== */

/* Skip-to-content: invisible until focused */
.skip-to-content {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    padding: 0.5rem 1.5rem;
    background: var(--bs-primary);
    color: #fff;
    border-radius: 0 0 0.375rem 0.375rem;
    text-decoration: none;
    font-weight: 500;
}
.skip-to-content:focus {
    top: 0;
    color: #fff;
}

/* Bootstrap excludes <caption> from .visually-hidden absolute positioning,
   which leaves it in normal flow and triggers overflow scrollbars inside
   .table-responsive wrappers. Override to fully hide table captions. */
table caption.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Focus rings for custom interactive elements (Bootstrap handles its own) */
.hover-lift:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}
.clickable-row:focus-visible {
    background-color: var(--bs-secondary-bg);
    outline: 2px solid var(--bs-primary);
    outline-offset: -2px;
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    .hover-lift,
    .clickable-row {
        transition: none;
    }
    .hover-lift:hover,
    .hover-lift:focus-visible {
        transform: none;
    }
}

/* ==========================================================================
   DETAIL SHELL
   Centered single-column layout for entity detail pages.
   Bootstrap has no max-width utility for arbitrary values.
   ========================================================================== */

.detail-shell { max-width: 900px; }

/* ==========================================================================
   COLLAPSIBLE CARD HEADERS
   Used for sections that toggle expand/collapse via Bootstrap data-bs-toggle.
   The chevron rotates 180° when aria-expanded="true" so a single CSS state
   tracks both ARIA semantics and the visual indicator.
   ========================================================================== */

.collapse-indicator { transition: transform 0.2s; }
[aria-expanded="true"] .collapse-indicator { transform: rotate(180deg); }
.card-header[role="button"]:hover { background-color: var(--bs-tertiary-bg) !important; }

/* ==========================================================================
   CUSTOMER LOOKUP — STEP BADGES
   Numbered circular markers that turn the two field groups (account /
   service address) into a calm, two-step flow on the public lookup card.
   ========================================================================== */

.lookup-card { max-width: 420px; }
.lookup-step { letter-spacing: 0.04em; }
.lookup-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    margin-right: 0.35rem;
    border-radius: 50%;
    background-color: var(--bs-primary);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
}