/*
 * Shared design system for the DSC Management pages (DSC Records / DSC
 * Requests boards). Registered globally via FilamentServiceProvider so it's
 * loaded once in <head> and persists across every wire:navigate transition
 * and Livewire re-render — previously this was two near-duplicate inline
 * <style> blocks embedded in each page's own Blade view, which only existed
 * in the DOM while that exact page's body markup was mounted. Any
 * navigation away and back, or a Livewire partial update racing a
 * navigation, could leave the page rendering without it, falling back to
 * Filament's default table styling. Everything below is scoped under .cc,
 * so loading it panel-wide cannot affect any other page.
 */
.cc{
    --surface:#ffffff; --surface-2:#f8fafb;
    --ink:#152028; --ink-muted:#5a6b78; --ink-faint:#8a9aa6;
    --border:#e6ebef; --border-strong:#d8e0e6;
    --accent:#0a3d4a; --accent-soft:#dbefe8; --teal:#0f8a80;
    --good:#227a52; --good-bg:#e4f4ec;
    --warn:#a86a12; --warn-bg:#fbefd7;
    --crit:#c0392b; --crit-bg:#fbe6e2;
    --info:#2160c4; --info-bg:#e3ecfd;
    --gray-bg:#eef2f4; --gray-ink:#5a6b78;
    --field:#f8fafb;
    --shadow:0 1px 2px rgba(16,40,50,.04),0 4px 16px rgba(16,40,50,.05);
    --shadow-lg:0 8px 30px rgba(16,40,50,.10);
    --radius:14px;
    color:var(--ink); font-size:14px;
}
.dark .cc{
    --surface:#16202a; --surface-2:#111a22;
    --ink:#e7eef2; --ink-muted:#9fb0bb; --ink-faint:#6d7e8a;
    --border:#24333e; --border-strong:#2f414d;
    --accent:#dbefe8; --accent-soft:#153039; --teal:#38b2a6;
    --good:#63c69b; --good-bg:#12352a; --warn:#e0b061; --warn-bg:#3a2e12;
    --crit:#ed8f83; --crit-bg:#3a1f1c; --info:#8fb4f7; --info-bg:#152a4a;
    --gray-bg:#22303a; --gray-ink:#9fb0bb; --field:#111a22;
    --shadow:0 1px 2px rgba(0,0,0,.3); --shadow-lg:0 10px 34px rgba(0,0,0,.45);
}
.cc *,.cc *::before,.cc *::after{ box-sizing:border-box; }
.cc .mono{ font-variant-numeric:tabular-nums; }

.cc .top{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:20px; }
.cc .top h1{ font-size:24px; font-weight:800; letter-spacing:-.02em; margin:0; }
.cc .top .sub{ color:var(--ink-muted); font-size:13.5px; margin-top:3px; }
.cc .toolbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.cc [x-cloak]{ display:none !important; }
.cc .search{ position:relative; }
.cc .search input{ width:min(320px,68vw); padding:11px 15px 11px 40px; border:1px solid var(--border-strong); border-radius:11px; background:var(--surface); color:var(--ink); font:inherit; font-size:14px; box-shadow:var(--shadow); outline:none; transition:.15s; }
.cc .search input:focus{ border-color:var(--teal); box-shadow:0 0 0 3px color-mix(in srgb,var(--teal) 18%,transparent); }
.cc .search svg{ position:absolute; left:13px; top:50%; transform:translateY(-50%); width:17px; height:17px; color:var(--ink-faint); }
.cc .fbtn{ position:relative; display:inline-flex; align-items:center; gap:7px; border:1px solid var(--border-strong); background:var(--surface); color:var(--ink); font:inherit; font-weight:600; font-size:13.5px; padding:11px 15px; border-radius:11px; cursor:pointer; box-shadow:var(--shadow); text-decoration:none; }
.cc .fbtn:hover{ border-color:var(--teal); color:var(--teal); }
.cc .fbtn svg{ width:16px; height:16px; }
.cc .fbtn.primary{ background:var(--accent); border-color:var(--accent); color:var(--surface); }
.dark .cc .fbtn.primary{ color:#0e161b; }
.cc .fbtn .fbadge{ background:var(--teal); color:#fff; font-size:11px; font-weight:700; min-width:18px; height:18px; padding:0 5px; border-radius:999px; display:inline-grid; place-items:center; }

/* Slide-in filter panel */
.cc-fscrim{ position:fixed; inset:0; z-index:45; background:rgba(15,23,42,.4); backdrop-filter:blur(2px); animation:cc-fade .15s ease; }
.cc-fpanel{ position:fixed; top:0; right:0; bottom:0; z-index:46; width:min(384px,94vw); background:var(--surface); border-left:1px solid var(--border);
    display:flex; flex-direction:column; box-shadow:0 24px 60px -16px rgba(0,0,0,.4); animation:cc-fslide .24s cubic-bezier(.16,1,.3,1); color:var(--ink); }
@keyframes cc-fslide{ from{transform:translateX(100%)} to{transform:none} }
.cc-fhead{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:16px 20px; border-bottom:1px solid var(--border); }
.cc-ftitle{ font-size:16px; font-weight:700; display:flex; align-items:center; gap:8px; }
.cc-ftitle svg{ width:17px; height:17px; opacity:.7; }
.cc-fx{ border:0; background:none; cursor:pointer; color:var(--ink-muted); width:30px; height:30px; border-radius:8px; display:grid; place-items:center; }
.cc-fx:hover{ background:var(--surface-2); }
.cc-fbody{ flex:1; overflow-y:auto; padding:18px 20px; display:flex; flex-direction:column; gap:18px; }
.cc-fgroup{ display:flex; flex-direction:column; }
.cc-flabel{ font-size:11px; font-weight:700; color:var(--ink-muted); text-transform:uppercase; letter-spacing:.04em; margin-bottom:7px; }
.cc-input, .cc-select{ width:100%; padding:9px 11px; border:1px solid var(--border-strong); border-radius:9px; background:var(--field); color:var(--ink); font:inherit; font-size:13.5px; outline:none; box-sizing:border-box; }
.cc-input:focus, .cc-select:focus{ border-color:var(--teal); }
.cc-ffoot{ display:flex; gap:10px; padding:14px 20px; border-top:1px solid var(--border); background:var(--surface-2); }
.cc-ffoot > *{ flex:1; }
.cc-fsearch{ margin-bottom:8px; padding:7px 10px; font-size:12.5px; }
.cc-fchecks{ display:flex; flex-direction:column; gap:8px; max-height:9.5rem; overflow-y:auto; border:1px solid var(--border-strong); border-radius:9px; padding:10px 12px; background:var(--field); }
.cc-fcheck{ display:flex; align-items:center; gap:9px; font-size:13.5px; cursor:pointer; }
.cc-fcheck input{ accent-color:var(--teal); }
.cc-fnone{ font-size:12.5px; color:var(--ink-faint); }

/* KPI tiles */
.cc .kpis{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin-bottom:22px; }
@media (max-width:1180px){ .cc .kpis{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:640px){ .cc .kpis{ grid-template-columns:repeat(2,1fr); } }
.cc .kpis.kpis-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:1180px){ .cc .kpis.kpis-4{ grid-template-columns:repeat(2,1fr); } }
.cc .tile{ text-align:left; background:var(--surface); border:1.5px solid var(--border); border-radius:var(--radius); padding:15px; box-shadow:var(--shadow); cursor:pointer; transition:transform .12s, box-shadow .12s, border-color .12s; }
.cc .tile:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.cc .tile[aria-pressed="true"]{ border-color:var(--teal); box-shadow:0 0 0 3px color-mix(in srgb,var(--teal) 16%,transparent),var(--shadow); }
.cc .tile .label{ font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-muted); line-height:1.3; min-height:26px; }
.cc .tile .n{ font-size:30px; font-weight:800; letter-spacing:-.02em; line-height:1; margin-top:8px; }
.cc .tile .cap{ font-size:11.5px; color:var(--ink-faint); margin-top:6px; }
.cc .tile.crit .n{ color:var(--crit); } .cc .tile.warn .n{ color:var(--warn); } .cc .tile.info .n{ color:var(--info); } .cc .tile.good .n{ color:var(--good); }

/* Table */
.cc .panel{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.cc .tbl-scroll{ overflow-x:auto; }
.cc table{ width:100%; border-collapse:collapse; min-width:1080px; }
.cc thead th{ text-align:left; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-muted); padding:13px 16px; background:var(--surface-2); border-bottom:1px solid var(--border); white-space:nowrap; }
.cc thead th.th-sort{ cursor:pointer; user-select:none; }
.cc thead th.th-sort:hover{ color:var(--ink); }
.cc .th-inner{ display:inline-flex; align-items:center; gap:5px; }
.cc .th-caret{ width:13px; height:13px; flex:none; }
.cc .th-caret-idle{ opacity:0; transition:opacity .12s; }
.cc thead th.th-sort:hover .th-caret-idle{ opacity:.35; }
.cc tbody tr{ border-bottom:1px solid var(--border); transition:background .12s; }
.cc tbody tr:last-child{ border-bottom:0; }
.cc tbody tr:hover{ background:var(--surface-2); }
.cc td{ padding:14px 16px; vertical-align:top; }
.cc .cid{ font-weight:700; font-size:13px; }
.cc .cmeta{ color:var(--ink-faint); font-size:12px; margin-top:2px; }

.cc .badge{ display:inline-block; font-size:11.5px; font-weight:700; padding:3px 10px; border-radius:999px; white-space:nowrap; }
.cc .b-good{ background:var(--good-bg); color:var(--good); }
.cc .b-warn{ background:var(--warn-bg); color:var(--warn); }
.cc .b-crit{ background:var(--crit-bg); color:var(--crit); }
.cc .b-info{ background:var(--info-bg); color:var(--info); }
.cc .b-gray{ background:var(--gray-bg); color:var(--gray-ink); }

.cc .rowacts{ display:flex; flex-wrap:nowrap; gap:6px; }
.cc .openbtn{ border:1px solid var(--border-strong); background:var(--surface); color:var(--ink); font:inherit; font-weight:600; font-size:12.5px; padding:6px 14px; border-radius:9px; cursor:pointer; text-decoration:none; display:inline-block; white-space:nowrap; flex-shrink:0; }
.cc .openbtn:hover{ border-color:var(--teal); color:var(--teal); }
.cc .openbtn.good{ border-color:var(--good); color:var(--good); }
.cc .openbtn.warn{ border-color:var(--warn); color:var(--warn); }
.cc .openbtn.crit{ border-color:var(--crit); color:var(--crit); }
.cc .empty{ padding:48px 16px; text-align:center; color:var(--ink-faint); }
.cc .foot{ color:var(--ink-faint); font-size:12px; margin-top:12px; text-align:right; }

/* Pagination */
.cc .pager-bar{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:14px; }
.cc .pager-l{ display:flex; align-items:center; gap:12px; color:var(--ink-muted); font-size:13px; }
.cc .pager-l b{ color:var(--ink); font-variant-numeric:tabular-nums; }
.cc .pp{ border:1px solid var(--border-strong); background:var(--surface); color:var(--ink); font:inherit; font-size:13px; padding:6px 8px; border-radius:9px; cursor:pointer; outline:none; }
.cc .pager{ display:inline-flex; align-items:center; gap:3px; }
.cc .pg{ min-width:32px; height:32px; padding:0 8px; display:inline-grid; place-items:center; border:1px solid var(--border-strong); background:var(--surface); color:var(--ink); font:inherit; font-weight:600; font-size:13px; border-radius:9px; cursor:pointer; transition:.12s; }
.cc .pg svg{ width:16px; height:16px; }
.cc .pg:hover:not(:disabled){ border-color:var(--teal); color:var(--teal); }
.cc .pg:disabled{ opacity:.4; cursor:not-allowed; }
.cc .pg.is-current{ background:var(--accent); border-color:var(--accent); color:var(--surface); }
.dark .cc .pg.is-current{ color:#0e161b; }
.cc .pg-gap{ color:var(--ink-faint); padding:0 2px; }

/* Approve/Reject + Raise-action modals */
.cc-mscrim{ position:fixed; inset:0; z-index:45; background:rgba(15,23,42,.4); backdrop-filter:blur(2px); animation:cc-fade .15s ease; }
@keyframes cc-fade{ from{opacity:0} to{opacity:1} }
.cc-modal{ position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:46; width:min(420px,92vw); background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:0 24px 60px -16px rgba(0,0,0,.4); color:var(--ink); }
.cc-mhead{ padding:18px 20px 6px; }
.cc-mhead h3{ margin:0; font-size:17px; font-weight:800; }
.cc-mhead p{ margin:6px 0 0; font-size:13px; color:var(--ink-muted); }
.cc-mbody{ padding:14px 20px; }
.cc-mbody textarea{ width:100%; min-height:80px; padding:10px 12px; border:1px solid var(--border-strong); border-radius:9px; background:var(--field); color:var(--ink); font:inherit; font-size:13.5px; outline:none; resize:vertical; }
.cc-mbody textarea:focus{ border-color:var(--teal); }
.cc-mbody label{ display:block; font-size:12.5px; font-weight:600; color:var(--ink-muted); margin:10px 0 4px; }
.cc-mbody label:first-child{ margin-top:0; }
.cc-mbody input[type=date]{ width:100%; padding:9px 12px; border:1px solid var(--border-strong); border-radius:9px; background:var(--field); color:var(--ink); font:inherit; font-size:13.5px; outline:none; }
.cc-mbody input[type=date]:focus{ border-color:var(--teal); }
.cc-mbody input[type=text]{ width:100%; padding:9px 12px; border:1px solid var(--border-strong); border-radius:9px; background:var(--field); color:var(--ink); font:inherit; font-size:13.5px; outline:none; box-sizing:border-box; }
.cc-mbody input[type=text]:focus{ border-color:var(--teal); }
.cc-mfoot{ display:flex; gap:10px; padding:14px 20px; border-top:1px solid var(--border); background:var(--surface-2); border-radius:0 0 var(--radius) var(--radius); }
.cc-mfoot > *{ flex:1; }
.cc-btn{ padding:10px 14px; border-radius:10px; font:inherit; font-weight:600; font-size:13.5px; cursor:pointer; border:1px solid var(--border-strong); background:var(--surface); color:var(--ink); }
.cc-btn:hover{ border-color:var(--teal); }
.cc-btn.primary{ background:var(--accent); border-color:var(--accent); color:var(--surface); }
.dark .cc-btn.primary{ color:#0e161b; }
