/* ============================================================
   IUEC admin — the design's own values, loaded into the panel
   ------------------------------------------------------------
   Registered as a Filament CSS asset rather than restated inside
   each Blade view. The panel has no compiled Tailwind theme, so
   before this every screen had to repeat the design's rules and
   anything it forgot fell back to Filament's defaults — which is
   how the KPI icons, the wrapping table and the narrow header
   subheading all went wrong.

   Tokens are copied from the design's iuec-tokens.css; the layout
   rules from its styles.css. Everything is scoped to .fi-panel-local
   or to an iuec- prefix, so the super-admin panel is untouched.
   ============================================================ */

.fi-panel-local {
    --iuec-red: #E11B22;
    --iuec-red-deep: #B8141A;
    --iuec-blue: #2A318C;
    --iuec-navy: #16265B;

    --gray-50: #F5F6FB;
    --gray-100: #ECEEF5;
    --gray-200: #DCDFEA;
    --gray-300: #C3C8D8;
    --gray-400: #9AA1B7;
    --gray-500: #6E768F;
    --gray-600: #4C5570;
    --gray-700: #333B54;
    --gray-900: #11162A;

    --border-1: #E2E5EF;
    --border-2: #CFD4E2;

    /* The design's primary tint scale, used by the map filter bar's focus ring
       and active "Zone overlays" chip. --p-600 is --iuec-navy above. */
    --p-50: #EEF1F8;
    --p-100: #DBE2F0;
    --p-200: #BCC8E2;
    --p-500: #344F8A;
    --p-700: #132150;

    --shadow-sm: 0 1px 2px rgba(12, 23, 51, .06), 0 1px 1px rgba(12, 23, 51, .04);
    --shadow-md: 0 6px 18px rgba(12, 23, 51, .10);

    --r-md: 8px;
    --r-lg: 14px;
    --r-pill: 999px;
    --tracking-eyebrow: .12em;
}

/* ---------- page header: the design's scale, one-line subheading ---------- */
.fi-panel-local .fi-header-heading { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.fi-panel-local .fi-header-subheading { font-size: 14px; color: var(--gray-500); max-width: none; }
.fi-panel-local .fi-header { max-width: none; }

/* ---------- content width: the design's .page--wide (1480px vs. the default 1280px) ----------
   Filament's own rule carries !important, so this needs matching specificity
   and !important to actually win rather than being silently dropped. */
.fi-panel-local .fi-main.fi-width-7xl { max-width: 1480px !important; }

/* ---------- section tabs ---------- */
.jr-tabs { display: flex; align-items: center; gap: 4px; margin-bottom: 1.25rem; border-bottom: 1px solid var(--border-1); }
.jr-tabs a {
    display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px; margin-bottom: -1px;
    font-size: .875rem; font-weight: 600; color: var(--gray-500);
    border-bottom: 2px solid transparent; transition: color .14s, border-color .14s;
}
.jr-tabs a:hover { color: var(--gray-700); }
.jr-tabs a.on { color: var(--gray-900); border-bottom-color: var(--iuec-red); }
.jr-tabs svg { width: 17px; height: 17px; flex-shrink: 0; }

/* ---------- KPI cards (.kpi in the design) ---------- */
.jrd-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.jrd-kpi {
    background: #fff; border: 1px solid var(--border-1); border-radius: 12px;
    padding: 16px 17px; box-shadow: var(--shadow-sm); transition: box-shadow .14s, border-color .14s;
}
a.jrd-kpi:hover { box-shadow: var(--shadow-md); border-color: var(--border-2); }
.jrd-kpi .top { display: flex; align-items: center; justify-content: space-between; }
.jrd-kpi .label { font-size: 12.5px; font-weight: 600; color: var(--gray-500); }
.jrd-kpi .ic {
    width: 32px; height: 32px; border-radius: 9px; display: inline-flex;
    align-items: center; justify-content: center; background: #eef1f8; color: var(--iuec-navy);
}
.jrd-kpi .ic svg { width: 17px; height: 17px; }
.jrd-kpi.amber .ic { background: #fff4e6; color: #B45309; }
.jrd-kpi .val { font-size: 27px; font-weight: 700; color: var(--gray-900); margin-top: 12px; letter-spacing: -.02em; line-height: 1; }
.jrd-kpi .sub { font-size: 12.5px; color: var(--gray-500); margin-top: 7px; display: flex; align-items: center; gap: 5px; }
.jrd-kpi .sub svg { width: 13px; height: 13px; flex-shrink: 0; }

/* ---------- dashboard grid (.dash-grid) ---------- */
.jrd-grid { display: grid; grid-template-columns: minmax(0, 1fr) 372px; gap: 20px; align-items: start; }

/* ---------- recent submissions (.mini-row) ---------- */
.jrd-list { background: #fff; border: 1px solid var(--border-1); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm); }
/* A row is a <button> — it opens the drawer — so it needs the reset a button
   always needs: browser defaults centre its text and shrink it to its content. */
.jrd-row {
    display: flex; align-items: center; gap: 11px; padding: 12px 14px;
    width: 100%; text-align: left; background: none; border: 0;
    border-bottom: 1px solid var(--gray-100);
    font: inherit; color: inherit; cursor: pointer; transition: background .1s;
}
.jrd-row:last-child { border-bottom: 0; }
.jrd-row:hover { background: var(--gray-50); }
/* The design's dashboard overrides `.mini-row .mi` with its primary tints —
   --p-50 on --p-600 — rather than the amber the rule defaults to. */
.jrd-row .ic {
    width: 34px; height: 34px; border-radius: 9px; background: #eef1f8; color: var(--iuec-navy);
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.jrd-row .ic svg { width: 16px; height: 16px; }
.jrd-row .mm { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.jrd-row .mt { font-weight: 600; font-size: 13.5px; color: var(--gray-900); }
.jrd-row .ms { font-size: 12px; color: var(--gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jrd-row .mtime { font-size: 11.5px; color: var(--gray-400); white-space: nowrap; }
.jrd-empty { padding: 26px 16px; text-align: center; color: var(--gray-400); font-size: 13px; }

/* ---------- section heads (.sec-head) ---------- */
.jrm-sechead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.jrm-sechead h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--gray-900); }
.jrm-link { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--iuec-blue); }
.jrm-link:hover { text-decoration: underline; }
.jrm-link-icon { width: 14px; height: 14px; }

/* ---------- maps ---------- */
.jrm-map { position: relative; overflow: hidden; border-radius: var(--r-lg); border: 1px solid var(--border-1); isolation: isolate; z-index: 0; }
.jrm-canvas { position: absolute; inset: 0; }
.jrm-legend {
    position: absolute; right: 12px; bottom: 12px; z-index: 900;
    background: rgba(255, 255, 255, .95); border: 1px solid var(--border-1);
    border-radius: var(--r-md); padding: 10px 12px; font-size: 12px; line-height: 1.7;
    box-shadow: var(--shadow-md);
}
.jrm-legend .t { font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 10.5px; color: var(--gray-500); }
.jrm-legend .r { display: flex; align-items: center; gap: 7px; color: var(--gray-700); }
.jrm-legend .d { width: 10px; height: 10px; border-radius: var(--r-pill); flex-shrink: 0; }

/* ---------- map page filter bar (the design's .filterbar) ---------- */
.jrm-bar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    padding: 14px 16px; background: #fff; border: 1px solid var(--border-1);
    border-radius: var(--r-lg); box-shadow: var(--shadow-sm); margin-bottom: 16px;
}
.filter-label {
    font-size: 12px; font-weight: 600; color: var(--gray-500);
    text-transform: uppercase; letter-spacing: .04em; margin-right: 2px;
}
.filter-sel {
    height: 36px; padding: 0 30px 0 11px; border: 1px solid var(--border-2);
    border-radius: var(--r-md); background: #fff; font-size: 12px; font-weight: 500;
    color: var(--gray-700); box-shadow: var(--shadow-sm); appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 9px center;
}
.filter-sel:focus { outline: 0; border-color: var(--p-500); box-shadow: 0 0 0 3px var(--p-100); }
.filter-date {
    height: 36px; width: 108px; padding: 0 28px 0 10px; border: 1px solid var(--border-2);
    border-radius: var(--r-md); font-size: 12px; color: var(--gray-700); box-shadow: var(--shadow-sm);
}
/* The masked MM/DD/YYYY text field the filter bar shows, and the invisible
   native date input overlaid on its icon purely to trigger the OS calendar —
   the same trick as the widget's own .jr-date, so this filter bar reads the
   app's US format instead of the browser's locale. */
.filter-date-field { position: relative; display: inline-flex; }
.filter-date-icon {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center;
    color: var(--gray-400); pointer-events: none;
}
.filter-date-picker {
    position: absolute; right: 0; top: 0; width: 30px; height: 36px; padding: 0;
    border: 0; background: transparent; opacity: 0; cursor: pointer;
}
.filter-date-picker::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chip-filter {
    display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 13px;
    border-radius: var(--r-pill); border: 1px solid var(--border-2); background: #fff;
    color: var(--gray-600); font-size: 13px; font-weight: 600; box-shadow: var(--shadow-sm);
    transition: background .12s, color .12s, border-color .12s; cursor: pointer;
}
.chip-filter svg { width: 15px; height: 15px; }
.chip-filter:hover { background: var(--gray-50); }
.chip-filter.on { background: var(--p-50); color: var(--p-700); border-color: var(--p-200); }
.jrm-count { font-size: .875rem; font-weight: 500; color: var(--gray-500); margin-left: auto; }
.jrm-empty {
    margin-top: 1rem; padding: 2rem; text-align: center; font-size: .875rem;
    color: var(--gray-500); border: 1px dashed var(--gray-300); border-radius: var(--r-lg);
}

/* ---------- report detail: the pin and the way to it ---------- */
.jr-pinmap { position: relative; height: 240px; overflow: hidden; border-radius: var(--r-lg); border: 1px solid var(--border-1); isolation: isolate; z-index: 0; }
.jr-navrow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: .625rem; }
.jr-navbtn {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px;
    border: 1px solid var(--border-1); border-radius: var(--r-pill);
    font-size: .8125rem; font-weight: 600; color: var(--gray-700); background: #fff;
}
.jr-navbtn:hover { border-color: var(--gray-400); }
.jr-navbtn svg { width: 14px; height: 14px; }

@media (max-width: 1100px) { .jrd-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) { .jrd-kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .jrd-kpis { grid-template-columns: 1fr; } }

/* ---------- dark mode ---------- */
.dark .jrd-kpi, .dark .jrd-list, .dark .jrm-map, .dark .jrm-legend, .dark .jr-pinmap, .dark .jr-navbtn {
    background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .1);
}
.dark .jrm-legend { background: rgba(17, 24, 39, .95); }
.dark .jrd-kpi .val, .dark .jrd-row .mt, .dark .jrm-sechead h3 { color: rgb(243 244 246); }
.dark .jrd-row { border-bottom-color: rgba(255, 255, 255, .06); }
.dark .jrd-row:hover { background: rgba(255, 255, 255, .04); }
.dark .jrm-legend .r, .dark .jr-navbtn { color: rgb(229 231 235); }
.dark .jr-tabs { border-bottom-color: rgba(255, 255, 255, .1); }
.dark .jr-tabs a { color: rgb(156 163 175); }
.dark .jr-tabs a.on { color: #fff; }
.dark .fi-panel-local .fi-header-subheading { color: rgb(156 163 175); }

/* ============================================================
   Report drawer (.rd-* in the design's styles.css)
   ============================================================ */
/* Full width on purpose: the modal's content wrapper shrinks its children to fit,
   which leaves the row no space for the action menu's `margin-left: auto` to push
   into — it ends up beside the badge instead of opposite it. */
.rd-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; width: 100%; margin-bottom: 12px; }
/* The report's action menu sits on the same line as its status, at the far end so
   the badge stays the first thing read. */
.rd-actions { display: flex; align-items: center; margin-left: auto; }
.rd-person {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px;
    background: var(--gray-50); border: 1px solid var(--border-1); border-radius: 11px;
}
.rd-avatar {
    width: 42px; height: 42px; border-radius: var(--r-pill); background: var(--iuec-navy);
    color: #fff; font-weight: 600; font-size: 15px; display: inline-flex;
    align-items: center; justify-content: center; flex-shrink: 0;
}
.rd-person .pm { flex: 1; min-width: 0; }
.rd-person .pn { font-weight: 700; color: var(--gray-900); font-size: 14.5px; }
.rd-person .pd { font-size: 12.5px; color: var(--gray-500); }
.rd-person .pc { display: flex; gap: 14px; margin-top: 3px; }
.rd-person .pc a { font-size: 12px; color: var(--iuec-navy); display: inline-flex; align-items: center; gap: 5px; }
.rd-person .pc svg { width: 13px; height: 13px; }

.rd-map {
    position: relative; height: 190px; border-radius: 11px; overflow: hidden;
    border: 1px solid var(--border-1); margin: 14px 0 18px; isolation: isolate; z-index: 0;
}
.rd-map-apps { position: absolute; right: 10px; bottom: 10px; z-index: 900; display: flex; gap: 6px; }
.rd-nav-btn {
    display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px;
    border-radius: 7px; background: rgba(255, 255, 255, .96); border: 1px solid var(--border-1);
    box-shadow: var(--shadow-sm); color: var(--iuec-navy); font-size: 12px; font-weight: 600;
}
.rd-nav-btn:hover { background: #fff; border-color: var(--border-2); }
.rd-nav-btn svg { width: 12px; height: 12px; }

/* The design rules a line under the drawer's header, between the reference line and
   the body. Scoped to this modal by id — other slide-overs in the panel keep their
   plain header. */
[data-fi-modal-id="report-drawer"] .fi-modal-header {
    border-bottom: 1px solid var(--border-1);
    padding-bottom: 1rem;
}
.dark [data-fi-modal-id="report-drawer"] .fi-modal-header { border-bottom-color: rgba(255, 255, 255, .1); }

/* The status pill the shared partial draws. Its rules live in the widget's own
   stylesheet, which the panel does not load, so the badge arrived as bare text
   wearing only its inline colours. Values are the design's `.spill`. */
.jr-badge {
    display: inline-flex; align-items: center; gap: 6px; height: 23px; padding: 0 9px;
    border-radius: var(--r-pill); font-size: 12px; font-weight: 600;
    border: 1px solid; white-space: nowrap;
}
.jr-badge .bd { width: 7px; height: 7px; border-radius: var(--r-pill); flex-shrink: 0; }

.rd-sec { margin-bottom: 20px; }
.rd-sec-title {
    font-size: 11.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .07em; color: var(--gray-400); margin-bottom: 10px;
}
.rd-rows { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 2px 14px; }
.rd-rows dt { font-size: 13px; color: var(--gray-500); padding: 7px 0; }
.rd-rows dd { font-size: 13.5px; color: var(--gray-700); font-weight: 500; margin: 0; padding: 7px 0; min-width: 0; overflow-wrap: anywhere; }
/* Not scoped to `.rd-rows dd`: the drawer also uses it on the member card's
   phone line and on the empty-activities placeholder, neither of which sits
   inside a rows list. `.muted` only ever appears in the drawer, so this is not
   scoped any further than that. */
.rd-person .muted, .rd-sec .muted { color: var(--gray-500); font-weight: 400; }
/* The widget's own `.warn` is scoped to `.jr-rev-row`, which the drawer does not
   use, and its stylesheet is not loaded in the panel regardless. Same value,
   reachable here. */
.rd-rows .warn { color: #B45309; font-weight: 600; font-size: 12.5px; margin-top: 4px; }
.rd-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.rd-rows dd .rd-chips { margin-top: 6px; }
.rd-chips .c {
    font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: var(--r-pill);
    background: var(--gray-100); color: var(--gray-600);
}
.rd-note-line { margin-top: 10px; font-size: 13px; color: var(--gray-600); }
.rd-notes {
    margin-top: 12px; padding: 12px 14px; background: var(--gray-50);
    border: 1px solid var(--border-1); border-radius: 10px;
    font-size: 13.5px; color: var(--gray-700); line-height: 1.55;
}
.rd-tl { display: flex; gap: 12px; padding-bottom: 14px; position: relative; }
.rd-tl:last-child { padding-bottom: 0; }
.rd-tl::before { content: ""; position: absolute; left: 6px; top: 18px; bottom: -2px; width: 2px; background: var(--border-1); }
.rd-tl:last-child::before { display: none; }
.rd-tl .dot {
    width: 14px; height: 14px; border-radius: var(--r-pill); background: #fff;
    border: 2px solid var(--gray-300); flex-shrink: 0; z-index: 1; margin-top: 2px;
}
.rd-tl.cur .dot { background: var(--iuec-navy); border-color: var(--iuec-navy); }
.rd-tl .tt { font-size: 13.5px; font-weight: 600; color: var(--gray-900); }
.rd-tl .td { font-size: 12px; color: var(--gray-500); }

.dark .rd-person, .dark .rd-notes { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .1); }
.dark .rd-person .pn, .dark .rd-tl .tt { color: rgb(243 244 246); }
.dark .rd-rows dd, .dark .rd-notes { color: rgb(229 231 235); }
.dark .rd-chips .c { background: rgba(255, 255, 255, .08); color: rgb(229 231 235); }

/* ============================================================
   Filament tables — reskinned to the design's .ftable/.card, since
   this panel has no compiled Tailwind theme of its own and would
   otherwise fall back to Filament's plain default look. Targets
   Filament's own fi-ta-* classes rather than replacing its markup,
   so sorting, pagination and row actions all keep working.
   ============================================================ */
.fi-panel-local .fi-ta-ctn {
    background: #fff; border: 1px solid var(--border-1); border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
}
.fi-panel-local .fi-ta-header-cell {
    padding: 8px 16px; background: var(--gray-50); border-color: var(--border-1);
    font-size: 12.5px; font-weight: 600; color: var(--gray-500);
}
.fi-panel-local .fi-ta-cell { padding: 5px 10px; border-color: var(--gray-100); font-size: 14px; color: var(--gray-700); }
.fi-panel-local .fi-ta-row.fi-clickable:hover { background: var(--gray-50); }
.fi-panel-local .fi-ta-text-description { color: var(--gray-500); font-size: 12px; }
/* The design's "N reports" is a plain muted line, not a card title. */
.fi-panel-local .fi-ta-header-heading { font-size: 13px; font-weight: 500; color: var(--gray-500); }
.fi-panel-local .fi-ta-header { padding-bottom: 0; }
/* The officer-only filters (review status and the rest) still live behind
   the funnel icon, but its "Active filters" chip strip — always showing
   "Hide merged reports" since that one defaults on — has no equivalent in
   the design and sits right where "N reports" belongs instead. */
.fi-resource-job-reports .fi-ta-filter-indicators { display: none; }

/* ---------- the design's own filter bar (job-reports-filter-bar.blade.php) ----------
   Plain markup rendered before the table by ListJobReports::content(), bound
   straight to its own properties — Filament's own filter form (a labeled
   grid behind a funnel icon) can't reach the design's flat, always-visible
   toolbar. Reuses the Map page's .jrm-bar/.filter-sel/.filter-date/.chip-filter,
   since it is the same bar. Only the remaining officer-only filters (review
   status and the rest — see JobReportsTable) still go through Filament's own
   funnel-icon dropdown, so its native search box is hidden here to avoid a
   second, redundant search input next to the design's own. */
.fi-resource-job-reports .fi-ta-search-field { display: none; }
.jr-search {
    flex: 1 1 220px; max-width: 300px; display: flex; align-items: center; gap: 8px;
    height: 38px; padding: 0 12px; border: 1px solid var(--border-2); border-radius: var(--r-md);
    background: #fff; color: var(--gray-500); box-shadow: var(--shadow-sm);
}
.jr-search:focus-within { border-color: var(--p-500); box-shadow: 0 0 0 3px var(--p-100); }
.jr-search input { border: 0; outline: 0; flex: 1; font-size: 14px; color: var(--gray-700); background: transparent; }
.jr-search svg { width: 17px; height: 17px; flex-shrink: 0; }
.jrm-bar-spacer { flex: 1; }