/*
 * Story 0168 — case / violation detail design system.
 *
 * WHY THIS FILE EXISTS: the case + violation detail screens accumulated
 * inconsistent, ad-hoc inline styling across ~165 stories — multiple alert
 * palettes (amber / yellow), badges as raw Tailwind utilities, `opacity-60`
 * micro-labels, `shadow-sm` on some cards but not others, and (the real bug)
 * dark-mode opacity utilities like `dark:bg-amber-900/40` that the project's
 * NO-TAILWIND-BUILD setup never compiles (Filament ships a precompiled theme;
 * arbitrary `/NN` opacity variants aren't in it). The operator asked for a
 * "professional SaaS" pass: accessible contrast (no similar-color font on a
 * similar-color background), consistent type, and restrained borders + shading
 * (not both at once).
 *
 * This file defines ONE semantic treatment per pattern, with explicit light +
 * dark values (raw `rgb(... / a)` is fine here — it always renders; only
 * Tailwind utility *classes* in blades are at the mercy of Filament's bundle).
 * Registered via AppServiceProvider::registerCaseDetailCss(), same route as
 * violation-nav.css / attachments.css / cases-coloring.css.
 *
 * Intent → color map (used by alerts + badges):
 *   info    = sky      neutral information / categorical
 *   warning = amber    blocked / needs operator action (e.g. unmapped case)
 *   danger  = red      something is wrong / overdue (e.g. DOB past due)
 *   success = emerald  saved / created / healthy (e.g. an existing work order)
 *
 * Contrast: light uses the -800/-900 text shade on a -50 fill; dark uses a
 * -100/-200 text shade on a muted dark tint of the same hue — both clear of
 * the "font ≈ background" trap.
 */

/* ============================================================= *
 *  Alerts (callouts) — soft fill + a 3px left accent bar.       *
 *  Fill OR border, never a heavy version of both.               *
 * ============================================================= */
.iai-alert {
    padding: 0.75rem 0.875rem;
    border-radius: 0.5rem;
    border-left: 3px solid transparent;
    font-size: 0.8125rem; /* 13px */
    line-height: 1.45;
}
.iai-alert strong { font-weight: 600; }
.iai-alert a {
    text-decoration: underline;
    font-weight: 600;
    color: inherit;
}

.iai-alert-info {
    background-color: rgb(240 249 255);  /* sky-50 */
    border-left-color: rgb(2 132 199);   /* sky-600 */
    color: rgb(12 74 110);               /* sky-900 */
}
.dark .iai-alert-info {
    background-color: rgb(12 74 110 / 0.30);
    border-left-color: rgb(56 189 248);  /* sky-400 */
    color: rgb(224 242 254);             /* sky-100 */
}

.iai-alert-warning {
    background-color: rgb(255 251 235);  /* amber-50 */
    border-left-color: rgb(245 158 11);  /* amber-500 */
    color: rgb(120 53 15);               /* amber-900 */
}
.dark .iai-alert-warning {
    background-color: rgb(120 53 15 / 0.30);
    border-left-color: rgb(251 191 36);  /* amber-400 */
    color: rgb(254 243 199);             /* amber-100 */
}

.iai-alert-danger {
    background-color: rgb(254 242 242);  /* red-50 */
    border-left-color: rgb(220 38 38);   /* red-600 */
    color: rgb(127 29 29);               /* red-900 */
}
.dark .iai-alert-danger {
    background-color: rgb(127 29 29 / 0.30);
    border-left-color: rgb(248 113 113); /* red-400 */
    color: rgb(254 226 226);             /* red-100 */
}

.iai-alert-success {
    background-color: rgb(236 253 245);  /* emerald-50 */
    border-left-color: rgb(5 150 105);   /* emerald-600 */
    color: rgb(6 78 59);                 /* emerald-900 */
}
.dark .iai-alert-success {
    background-color: rgb(6 78 59 / 0.30);
    border-left-color: rgb(52 211 153);  /* emerald-400 */
    color: rgb(209 250 229);             /* emerald-100 */
}

/* ============================================================= *
 *  Auto-save receipt — the "Auto-saved · HH:MM:SS" line.        *
 * ============================================================= */
.iai-saved {
    font-size: 0.75rem;
    font-weight: 500;
    color: rgb(4 120 87);   /* emerald-700 */
    white-space: nowrap;
}
.dark .iai-saved { color: rgb(110 231 183); } /* emerald-300 */

/* ============================================================= *
 *  Hint — secondary helper text under bespoke controls (the WO  *
 *  box notes / disabled reasons). One muted, legible treatment. *
 * ============================================================= */
.iai-hint {
    font-size: 0.75rem;
    line-height: 1.45;
    color: rgb(107 114 128); /* gray-500 */
}
.dark .iai-hint { color: rgb(156 163 175); } /* gray-400 */

/* ============================================================= *
 *  Micro-label — the read-only header-strip column captions.    *
 *  Explicit muted color (replaces `opacity-60`, which washed    *
 *  out unpredictably over the tinted status bands).             *
 * ============================================================= */
.iai-label {
    font-size: 0.6875rem; /* 11px */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgb(107 114 128); /* gray-500 */
}
.dark .iai-label { color: rgb(156 163 175); } /* gray-400 */

/* ============================================================= *
 *  Badges — informational pills. Soft fill + accessible dark    *
 *  text, ONE shape, NO border (status uses the border-only      *
 *  .vio-status-pill; badges are fill-only — never both).        *
 * ============================================================= */
.iai-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.6875rem; /* 11px */
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}

.iai-badge-neutral {
    background-color: rgb(243 244 246); /* gray-100 */
    color: rgb(55 65 81);               /* gray-700 */
}
.dark .iai-badge-neutral {
    background-color: rgb(55 65 81);    /* gray-700 */
    color: rgb(229 231 235);            /* gray-200 */
}

.iai-badge-positive {
    background-color: rgb(209 250 229); /* emerald-100 */
    color: rgb(6 95 70);                /* emerald-800 */
}
.dark .iai-badge-positive {
    background-color: rgb(6 78 59 / 0.55);
    color: rgb(167 243 208);            /* emerald-200 */
}

.iai-badge-warning {
    background-color: rgb(254 243 199); /* amber-100 */
    color: rgb(146 64 14);              /* amber-800 */
}
.dark .iai-badge-warning {
    background-color: rgb(120 53 15 / 0.55);
    color: rgb(253 230 138);            /* amber-200 */
}

.iai-badge-info {
    background-color: rgb(224 242 254); /* sky-100 */
    color: rgb(7 89 133);               /* sky-800 */
}
.dark .iai-badge-info {
    background-color: rgb(12 74 110 / 0.55);
    color: rgb(186 230 253);            /* sky-200 */
}

.iai-badge-accent {
    background-color: rgb(237 233 254); /* violet-100 */
    color: rgb(91 33 182);              /* violet-800 */
}
.dark .iai-badge-accent {
    background-color: rgb(76 29 149 / 0.55);
    color: rgb(221 214 254);            /* violet-200 */
}

/* ============================================================= *
 *  Work-order reference chip — the read-only "#NNNN · ticket"   *
 *  box shown once a WO exists. Success-tinted, fill-only.       *
 * ============================================================= */
.iai-wo-ref {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.625rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    background-color: rgb(236 253 245); /* emerald-50 */
    color: rgb(6 95 70);                /* emerald-800 */
}
.dark .iai-wo-ref {
    background-color: rgb(6 78 59 / 0.40);
    color: rgb(167 243 208);            /* emerald-200 */
}

/* ============================================================= *
 *  Case status signal (story 0170) — a compact bar near the    *
 *  top of the page carrying the operative case status as a      *
 *  BORDER-ONLY pill. Status stays border-only (mirrors the      *
 *  violation .vio-status-pill); section accents + badges are    *
 *  fill-only — never both. Intent → color = the 0168 map.       *
 * ============================================================= */
.iai-status-bar {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}
.iai-status-bar-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: rgb(107 114 128); /* gray-500 */
}
.dark .iai-status-bar-label { color: rgb(156 163 175); } /* gray-400 */
.iai-status-bar-meta {
    margin-left: auto;
    font-size: 0.75rem;
    color: rgb(107 114 128); /* gray-500 */
}
.dark .iai-status-bar-meta { color: rgb(156 163 175); }

.iai-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.1875rem 0.625rem;
    border-radius: 9999px;
    border: 1.5px solid transparent;
    background: transparent;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}
.iai-status-chip-info    { border-color: rgb(2 132 199);   color: rgb(7 89 133); }
.iai-status-chip-warning { border-color: rgb(217 119 6);   color: rgb(146 64 14); }
.iai-status-chip-success { border-color: rgb(5 150 105);   color: rgb(6 95 70); }
.iai-status-chip-danger  { border-color: rgb(220 38 38);   color: rgb(153 27 27); }
.iai-status-chip-neutral { border-color: rgb(156 163 175); color: rgb(75 85 99); }
.dark .iai-status-chip-info    { border-color: rgb(56 189 248);  color: rgb(186 230 253); }
.dark .iai-status-chip-warning { border-color: rgb(251 191 36);  color: rgb(253 230 138); }
.dark .iai-status-chip-success { border-color: rgb(52 211 153);  color: rgb(167 243 208); }
.dark .iai-status-chip-danger  { border-color: rgb(248 113 113); color: rgb(254 202 202); }
.dark .iai-status-chip-neutral { border-color: rgb(107 114 128); color: rgb(209 213 219); }

/* ============================================================= *
 *  Section-header color anchors (story 0170) — operator picked  *
 *  Option B: color-code each case-detail Section header so the  *
 *  eye finds a section at a glance. A soft tinted header strip   *
 *  + a 3px left accent bar + a colored heading & icon. Fill on   *
 *  the HEADER ONLY (the body stays plain) — restraint. Applied   *
 *  via Section ->extraAttributes(['class' => 'iai-section …']).  *
 *  Hue = meaning, NOT sequence: identity=blue, processing=       *
 *  violet, admin=amber, closure=emerald, notes/history=slate,    *
 *  past-due=red. Explicit light + dark (Filament .dark class).   *
 * ============================================================= */
.iai-section .fi-section-header { border-left: 3px solid transparent; }

.iai-section-blue .fi-section-header { background-color: rgb(240 249 255); border-left-color: rgb(2 132 199); }
.iai-section-blue .fi-section-header-heading { color: rgb(12 74 110); }
.iai-section-blue .fi-section-header svg { color: rgb(2 132 199); }
.dark .iai-section-blue .fi-section-header { background-color: rgb(12 74 110 / 0.30); border-left-color: rgb(56 189 248); }
.dark .iai-section-blue .fi-section-header-heading { color: rgb(224 242 254); }
.dark .iai-section-blue .fi-section-header svg { color: rgb(56 189 248); }

.iai-section-violet .fi-section-header { background-color: rgb(245 243 255); border-left-color: rgb(124 58 237); }
.iai-section-violet .fi-section-header-heading { color: rgb(76 29 149); }
.iai-section-violet .fi-section-header svg { color: rgb(124 58 237); }
.dark .iai-section-violet .fi-section-header { background-color: rgb(76 29 149 / 0.30); border-left-color: rgb(167 139 250); }
.dark .iai-section-violet .fi-section-header-heading { color: rgb(237 233 254); }
.dark .iai-section-violet .fi-section-header svg { color: rgb(167 139 250); }

.iai-section-amber .fi-section-header { background-color: rgb(255 251 235); border-left-color: rgb(217 119 6); }
.iai-section-amber .fi-section-header-heading { color: rgb(120 53 15); }
.iai-section-amber .fi-section-header svg { color: rgb(217 119 6); }
.dark .iai-section-amber .fi-section-header { background-color: rgb(120 53 15 / 0.30); border-left-color: rgb(251 191 36); }
.dark .iai-section-amber .fi-section-header-heading { color: rgb(254 243 199); }
.dark .iai-section-amber .fi-section-header svg { color: rgb(251 191 36); }

.iai-section-emerald .fi-section-header { background-color: rgb(236 253 245); border-left-color: rgb(5 150 105); }
.iai-section-emerald .fi-section-header-heading { color: rgb(6 78 59); }
.iai-section-emerald .fi-section-header svg { color: rgb(5 150 105); }
.dark .iai-section-emerald .fi-section-header { background-color: rgb(6 78 59 / 0.30); border-left-color: rgb(52 211 153); }
.dark .iai-section-emerald .fi-section-header-heading { color: rgb(209 250 229); }
.dark .iai-section-emerald .fi-section-header svg { color: rgb(52 211 153); }

.iai-section-slate .fi-section-header { background-color: rgb(248 250 252); border-left-color: rgb(100 116 139); }
.iai-section-slate .fi-section-header-heading { color: rgb(30 41 59); }
.iai-section-slate .fi-section-header svg { color: rgb(100 116 139); }
.dark .iai-section-slate .fi-section-header { background-color: rgb(30 41 59 / 0.35); border-left-color: rgb(148 163 184); }
.dark .iai-section-slate .fi-section-header-heading { color: rgb(226 232 240); }
.dark .iai-section-slate .fi-section-header svg { color: rgb(148 163 184); }

.iai-section-red .fi-section-header { background-color: rgb(254 242 242); border-left-color: rgb(220 38 38); }
.iai-section-red .fi-section-header-heading { color: rgb(127 29 29); }
.iai-section-red .fi-section-header svg { color: rgb(220 38 38); }
.dark .iai-section-red .fi-section-header { background-color: rgb(127 29 29 / 0.30); border-left-color: rgb(248 113 113); }
.dark .iai-section-red .fi-section-header-heading { color: rgb(254 226 226); }
.dark .iai-section-red .fi-section-header svg { color: rgb(248 113 113); }