/* ===========================================================
   TALOS Client Portal — Design System
   Modernized navy/gold identity. Shared across client + admin.
   =========================================================== */

:root{
  /* brand */
  --navy-deep:#07131d;
  --navy:#0d1d2a;
  --navy-soft:#132a3b;
  --navy-panel:#0e2233;
  --border-dark:#294050;
  --border-dark-light:#385061;
  --gold:#bba36b;
  --gold-bright:#d6b35f;
  --cream:#f4e8bd;

  /* light UI surface */
  --bg:#f6f5f1;
  --bg-alt:#ffffff;
  --surface:#ffffff;
  --surface-2:#faf9f6;
  --line:#e6e2d6;
  --line-strong:#d8d2c0;
  --text:#1c2530;
  --text-soft:#4c5a68;
  --text-muted:#8792a0;

  /* status / category accents (reused from dashboard) */
  --c-orange:#c96b2c;
  --c-blue:#1f4f9a;
  --c-teal:#58bfe8;
  --c-green:#2f9b57;
  --c-purple:#8e4aa5;
  --c-red:#d93632;
  --c-gray:#777;

  --radius-sm:6px;
  --radius:10px;
  --radius-lg:16px;
  --shadow-sm:0 1px 2px rgba(13,29,42,.06), 0 1px 1px rgba(13,29,42,.04);
  --shadow:0 4px 16px rgba(13,29,42,.08), 0 1px 3px rgba(13,29,42,.06);
  --shadow-lg:0 12px 32px rgba(13,29,42,.14), 0 2px 6px rgba(13,29,42,.08);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: Georgia, "Times New Roman", serif;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
/* Off-canvas drawers (the admin sidebar) sit at a negative left offset when
   closed — without this on BOTH html and body, some browsers still count
   that toward the page's scrollable width on mobile, letting the whole page
   rubber-band sideways to reveal blank space. */
html{overflow-x:hidden}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit}
ul{list-style:none;margin:0;padding:0}

.proto-banner{
  background:linear-gradient(90deg,var(--gold-bright),var(--gold));
  color:var(--navy-deep);
  text-align:center;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.4px;
  padding:7px 12px;
  text-transform:uppercase;
}
.proto-banner b{font-weight:800}

/* ---------- top nav (client + public) ---------- */
.topnav{
  background:var(--navy);
  border-bottom:1px solid var(--border-dark);
  position:sticky; top:0; z-index:100;
}
.topnav-inner{
  max-width:1280px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 28px;
  gap:24px;
}
.brand-mark{display:flex;align-items:center;gap:12px;color:#fff}
.brand-ring{
  width:42px;height:42px;border-radius:50%;
  border:1.5px solid var(--gold);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-serif);
  font-size:9px; letter-spacing:1px; font-weight:700; color:var(--gold);
  text-align:center;
}
.brand-text{font-family:var(--font);font-weight:700;font-size:17px;letter-spacing:2px;color:#fff}
.brand-text small{display:block;font-size:9px;letter-spacing:2px;color:var(--gold);font-weight:600;margin-top:1px}

.nav-links{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.nav-links a{
  color:#c7d2db;font-size:14px;font-weight:600;padding:9px 14px;border-radius:7px;
  transition:background .15s,color .15s;
}
.nav-links a:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-links a.active{background:rgba(187,163,107,.16);color:var(--gold-bright)}

.nav-right{display:flex;align-items:center;gap:10px}
.chip-btn{
  display:flex;align-items:center;gap:7px;
  background:transparent;border:1px solid var(--border-dark-light);color:#dce6ec;
  padding:8px 13px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;
}
.chip-btn:hover{border-color:var(--gold);color:#fff}
.icon-btn{
  width:36px;height:36px;border-radius:8px;border:1px solid var(--border-dark-light);
  background:transparent;color:#c7d2db;display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.icon-btn:hover{border-color:var(--gold);color:#fff}
.chip-btn-light{border-color:var(--line-strong);color:var(--text)}
.chip-btn-light:hover{border-color:var(--gold);color:var(--navy)}

/* mobile nav toggle */
.nav-toggle{display:none;background:none;border:none;color:#fff;font-size:22px;cursor:pointer}
@media (max-width: 980px){
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;background:var(--navy);flex-direction:column;align-items:stretch;padding:10px 16px 16px;border-bottom:1px solid var(--border-dark)}
  .nav-links.open{display:flex}
  .nav-toggle{display:block}
  .topnav-inner{padding:12px 16px}
}

/* ---------- page shell ---------- */
.page{max-width:1280px;margin:0 auto;padding:36px 28px 80px}
.page-narrow{max-width:820px}
.page-head{margin-bottom:28px}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:2px;color:var(--gold);text-transform:uppercase;margin:0 0 8px}
.page-head h1{font-size:32px;margin:0 0 8px;color:var(--navy);letter-spacing:.2px}
.page-sub{color:var(--text-soft);font-size:15px;max-width:640px}

/* ---------- cards ---------- */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}
.card-pad{padding:22px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 20px;border-radius:8px;font-size:14px;font-weight:700;cursor:pointer;
  border:1px solid transparent;transition:transform .05s,box-shadow .15s,background .15s;
}
.btn:active{transform:translateY(1px)}
.btn-gold{background:linear-gradient(180deg,var(--gold-bright),var(--gold));color:var(--navy-deep);box-shadow:var(--shadow-sm)}
.btn-gold:hover{box-shadow:var(--shadow)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-soft)}
.btn-outline{background:transparent;border-color:var(--line-strong);color:var(--text)}
.btn-outline:hover{border-color:var(--gold);color:var(--navy)}
.btn-ghost{background:transparent;color:var(--text-soft)}
.btn-ghost:hover{background:var(--surface-2)}
.btn-danger{background:#fdeceb;color:#b3261e}
.btn-danger:hover{background:#fbdbd8}
.btn-sm{padding:7px 13px;font-size:12.5px;border-radius:7px}
.btn-block{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* ---------- badges / pills ---------- */
.pill{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;
}
.pill-gold{background:#f7efdc;color:#8a6d2f}
.pill-navy{background:#e6ecf1;color:#1c3b57}
.pill-green{background:#e1f3e7;color:#1f6d43}
.pill-red{background:#fde7e6;color:#b3261e}
.pill-gray{background:#eef0f2;color:#5b6672}
.dot{width:7px;height:7px;border-radius:50%;display:inline-block}

/* ---------- filters / form controls ---------- */
.filter-bar{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px;margin-bottom:24px;
}
.field{display:flex;flex-direction:column;gap:5px}
.field label{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--text-muted)}
.input,.select,.textarea{
  font-family:inherit;font-size:14px;color:var(--text);
  background:var(--surface-2);border:1px solid var(--line-strong);border-radius:8px;
  padding:10px 13px;outline:none;transition:border-color .15s, box-shadow .15s;
}
.input:focus,.select:focus,.textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(187,163,107,.18)}
.textarea{resize:vertical;min-height:120px;font-family:var(--font)}
.search-wrap{position:relative;flex:1;min-width:220px}
.search-wrap .input{width:100%;padding-left:36px}
.search-wrap .search-icon{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--text-muted);font-size:14px}
.filter-spacer{flex:1}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.form-row.thirds{grid-template-columns:1fr 1fr 1fr}
.form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.form-group label{font-size:12.5px;font-weight:700;color:var(--navy)}
.form-hint{font-size:12px;color:var(--text-muted)}
.checkbox-row{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--text-soft)}
.checkbox-grid{display:flex;flex-wrap:wrap;gap:10px}
.check-pill{
  display:flex;align-items:center;gap:7px;border:1px solid var(--line-strong);border-radius:999px;
  padding:7px 13px;font-size:13px;font-weight:600;cursor:pointer;background:var(--surface-2);
}
.check-pill input{accent-color:var(--gold)}
.check-pill.checked{border-color:var(--gold);background:#f7efdc;color:#7a5f28}

/* ---------- report cards ---------- */
.report-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px;margin-bottom:28px}
.report-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-sm);transition:box-shadow .18s, transform .18s;
  display:flex;flex-direction:column;
}
.report-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.report-thumb{aspect-ratio:16/9;background:var(--navy) center/cover no-repeat;position:relative}
.report-thumb .tag-row{position:absolute;top:10px;left:10px;display:flex;gap:6px}
.report-body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:10px;flex:1}
.report-date{font-size:12px;color:var(--text-muted);font-weight:600}
.report-title{font-size:16.5px;font-weight:700;color:var(--navy);line-height:1.35}
.report-excerpt{font-size:13px;color:var(--text-soft);line-height:1.5;flex:1}
.report-foot{display:flex;align-items:center;justify-content:space-between;margin-top:4px}

/* ---------- pagination ---------- */
.pagination{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:8px;flex-wrap:wrap}
.pagination button{
  min-width:34px;height:34px;border-radius:7px;border:1px solid var(--line-strong);
  background:var(--surface);color:var(--text-soft);font-size:13px;font-weight:700;cursor:pointer;
}
.pagination button.active{background:var(--navy);border-color:var(--navy);color:#fff}
.pagination button:hover:not(.active):not(:disabled){border-color:var(--gold)}
.pagination button:disabled{opacity:.4;cursor:not-allowed}

/* ---------- tables (admin) ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
table.data-table{width:100%;border-collapse:collapse;font-size:13.5px}
.data-table th{
  text-align:left;padding:12px 16px;background:var(--surface-2);color:var(--text-muted);
  font-size:11px;letter-spacing:.5px;text-transform:uppercase;font-weight:700;border-bottom:1px solid var(--line);
  white-space:nowrap;
}
.data-table td{padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
.data-table tr:last-child td{border-bottom:none}
.data-table tr:hover td{background:var(--surface-2)}
.row-actions{display:flex;gap:6px}

/* ---------- stat tiles (admin dashboard) ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:28px}
.stat-tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.stat-label{font-size:11.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted);margin-bottom:10px}
.stat-value{font-size:30px;font-weight:800;color:var(--navy);line-height:1}
.stat-delta{font-size:12.5px;margin-top:8px;font-weight:600}
.stat-delta.up{color:#1f6d43}
.stat-delta.down{color:#b3261e}
.stat-delta.flat{color:var(--text-muted)}

/* ---------- admin shell (sidebar layout) ---------- */
.admin-shell{display:flex;min-height:100vh}
.admin-sidebar{
  width:250px;flex-shrink:0;background:var(--navy-deep);color:#dce6ec;
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
}
.admin-sidebar .brand-mark{padding:20px 20px 18px;border-bottom:1px solid var(--border-dark)}
.admin-nav{padding:14px 12px;display:flex;flex-direction:column;gap:2px;flex:1}
.admin-nav a{
  display:flex;align-items:center;gap:11px;padding:10px 13px;border-radius:8px;
  font-size:13.5px;font-weight:600;color:#aebbc6;
}
.admin-nav a .ico{width:18px;text-align:center;opacity:.85}
.admin-nav a:hover{background:rgba(255,255,255,.05);color:#fff}
.admin-nav a.active{background:rgba(187,163,107,.16);color:var(--gold-bright)}
.admin-nav .nav-section-label{font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:#5b6c7a;padding:16px 13px 6px}
.admin-sidebar-foot{padding:14px 16px;border-top:1px solid var(--border-dark);font-size:12px;color:#7f8f9c}
.admin-main{flex:1;min-width:0;background:var(--bg)}
.admin-topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 30px;background:var(--surface);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:10;
}
.admin-page{padding:28px 30px 70px;max-width:1180px}

@media (max-width: 900px){
  .admin-sidebar{position:fixed;left:-260px;top:0;z-index:200;transition:left .2s;box-shadow:var(--shadow-lg)}
  .admin-sidebar.open{left:0}
  .admin-main{width:100%}
}

/* ---------- login ---------- */
.login-shell{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 20% 20%, #13293b, var(--navy-deep) 60%);
  padding:24px;
}
.login-card{
  width:100%;max-width:420px;background:var(--surface);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);padding:38px 34px 30px;
}
.login-brand{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:26px}
.login-brand .brand-ring{width:56px;height:56px;font-size:11px;border-color:var(--gold)}
.login-brand h1{font-size:15px;letter-spacing:3px;color:var(--navy);margin:2px 0 0;font-weight:700}
.login-brand p{font-size:12.5px;color:var(--text-muted);margin:0}
.persona-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:22px 0 8px}
.persona-btn{
  border:1.5px solid var(--line-strong);border-radius:var(--radius);padding:16px 14px;text-align:left;
  background:var(--surface-2);cursor:pointer;transition:border-color .15s, background .15s;
}
.persona-btn:hover{border-color:var(--gold)}
.persona-btn.selected{border-color:var(--gold);background:#f7efdc}
.persona-btn .role{font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--gold);margin-bottom:6px}
.persona-btn .email{font-size:12.5px;color:var(--text);font-weight:600;word-break:break-all}
.persona-btn .tier{font-size:11.5px;color:var(--text-muted);margin-top:4px}
.login-divider{display:flex;align-items:center;gap:10px;margin:20px 0;color:var(--text-muted);font-size:12px}
.login-divider::before,.login-divider::after{content:"";flex:1;height:1px;background:var(--line)}
.proto-note{
  background:#f7efdc;border:1px solid #e6d3a3;border-radius:8px;padding:10px 13px;
  font-size:12px;color:#7a5f28;margin-top:18px;line-height:1.5;
}

/* ---------- misc ---------- */
.empty-state{text-align:center;padding:60px 20px;color:var(--text-muted)}
.empty-state .ico{font-size:34px;margin-bottom:12px}
.section-title{font-size:20px;font-weight:700;color:var(--navy);margin:0 0 4px}
.section-sub{font-size:13.5px;color:var(--text-soft);margin:0 0 18px}
.divider{height:1px;background:var(--line);border:none;margin:26px 0}
.upload-zone{
  border:2px dashed var(--line-strong);border-radius:var(--radius);padding:26px;text-align:center;
  background:var(--surface-2);cursor:pointer;transition:border-color .15s, background .15s;
}
.upload-zone:hover,.upload-zone.drag{border-color:var(--gold);background:#faf6ea}
.upload-zone .ico{font-size:26px;color:var(--text-muted);margin-bottom:8px}
.upload-preview{margin-top:12px;border-radius:8px;overflow:hidden;border:1px solid var(--line)}
.upload-preview img{width:100%;display:block}
.toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(10px);
  background:var(--navy);color:#fff;padding:13px 22px;border-radius:9px;font-size:13.5px;font-weight:600;
  box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transition:opacity .2s, transform .2s;z-index:999;
  display:flex;align-items:center;gap:9px;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast .dot-gold{width:8px;height:8px;border-radius:50%;background:var(--gold-bright)}

.footer{border-top:1px solid var(--line);margin-top:60px;padding:26px 28px;color:var(--text-muted);font-size:12.5px;text-align:center}

/* ---------- client home / hub landing page ---------- */
.client-hero{
  position:relative;
  background:
    linear-gradient(180deg, rgba(7,19,29,.94), rgba(7,19,29,.88) 55%, rgba(7,19,29,.97)),
    url('img/hero-baghdad-imagery.jpg') center 35%/cover no-repeat,
    var(--navy-deep);
  color:#fff;
  padding:64px 28px 54px;
}
.client-hero-inner{max-width:1280px;margin:0 auto}
.client-hero .eyebrow{font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;margin:0 0 10px}
.client-hero h1{font-size:34px;margin:0 0 12px;color:#fff;letter-spacing:.2px}
.client-hero-sub{font-size:15px;color:#c3cdd6;max-width:640px;margin:0 0 26px;line-height:1.55}
.client-hero-plan{display:flex;gap:34px;flex-wrap:wrap;margin-bottom:30px}
.hero-stat-val{font-weight:700;color:#fff;font-size:14.5px;margin-top:2px}
.client-hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.btn-on-dark{border-color:rgba(255,255,255,.35);color:#fff}
.btn-on-dark:hover{border-color:var(--gold);color:var(--gold-bright)}

.hub-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
  margin-top:-46px;position:relative;z-index:2;
}
.hub-card{
  background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius-lg);
  padding:22px 20px;box-shadow:var(--shadow);transition:transform .15s, box-shadow .15s, border-color .15s;
}
.hub-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--gold)}
.hub-card-ico{
  width:42px;height:42px;border-radius:10px;background:var(--navy);color:var(--gold-bright);
  display:flex;align-items:center;justify-content:center;font-size:18px;margin-bottom:14px;
}
.hub-card-title{font-size:15.5px;font-weight:700;color:var(--navy);margin-bottom:6px}
.hub-card-desc{font-size:13px;color:var(--text-muted);line-height:1.45}
@media (max-width: 980px){
  .hub-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 600px){
  .hub-grid{grid-template-columns:1fr;margin-top:-30px}
  .client-hero{padding:48px 20px 60px}
  .client-hero h1{font-size:26px}
  /* Two/three-column form rows (contact form, admin report form's
     Date/Type/Region row) don't have room to sit side-by-side on a phone —
     without this they overflow the viewport instead of wrapping, since CSS
     Grid's 1fr tracks don't shrink below their content's min-content width. */
  .form-row,.form-row.thirds{grid-template-columns:1fr}
  /* #formCols is the admin New Report page's form+live-preview two-column
     layout, set inline — needs !important to win over that inline style. */
  #formCols{grid-template-columns:1fr!important}

  /* Data tables (Manage Reports, Clients, admin Overview's Recent Reports)
     don't have room for 5-7 columns on a phone. .table-wrap's overflow-x:auto
     technically let you get to the rest, but that's a sideways-scrolling
     table sitting inside a page that also scrolls vertically — the Status
     and Edit/Publish/Delete columns ended up hidden off-screen and easy to
     miss entirely. Below this width each row becomes its own stacked card
     instead: no horizontal scrolling, every field visible top to bottom.
     Relies on a data-label="Column Name" attribute on each <td> (added at
     render time in reports.html/clients.html/dashboard.html) to reproduce
     the header via generated content. */
  .table-wrap{overflow-x:visible}
  table.data-table thead{display:none}
  table.data-table,table.data-table tbody,table.data-table tr,table.data-table td{display:block;width:100%}
  table.data-table td{max-width:none!important}
  table.data-table tr{border-bottom:1px solid var(--line);padding:12px 14px}
  table.data-table tr:last-child{border-bottom:none}
  table.data-table td{
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    border-bottom:0!important;padding:6px 0!important;text-align:right;
  }
  table.data-table td[data-label]:not([data-label=""])::before{
    content:attr(data-label);
    font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
    color:var(--text-muted);text-align:left;flex:0 0 auto;
  }
  table.data-table td.row-actions{justify-content:flex-start;flex-wrap:wrap;gap:8px;padding-top:10px!important}
  table.data-table td.row-actions::before{display:none}
}

.accordion-item{border:1px solid var(--line);border-radius:var(--radius);margin-bottom:10px;overflow:hidden;background:var(--surface)}
.accordion-q{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;cursor:pointer;font-weight:700;color:var(--navy);font-size:14.5px}
.accordion-a{max-height:0;overflow:hidden;transition:max-height .2s ease;color:var(--text-soft);font-size:13.5px;line-height:1.6}
.accordion-a-inner{padding:0 18px 16px}
.accordion-item.open .accordion-a{max-height:400px}

/* ---------- incident cards (client/incidents.html) ---------- */
.incident-card{border:1px solid var(--line);border-radius:var(--radius);margin-bottom:12px;overflow:hidden;background:var(--surface);transition:box-shadow .15s ease}
.incident-card:hover{box-shadow:var(--shadow)}
.incident-head{display:flex;align-items:flex-start;gap:12px;padding:16px 18px;cursor:pointer}
.incident-dot{width:10px;height:10px;border-radius:50%;flex:none;margin-top:5px}
.incident-head-main{flex:1;min-width:0}
.incident-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:5px}
.incident-cat{font-size:11.5px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;color:#fff;padding:2px 9px;border-radius:20px}
.incident-subcat{font-size:11.5px;font-weight:700;color:var(--text-muted);padding:2px 2px}
.incident-desc-line{font-size:13.5px;color:var(--text-soft);line-height:1.5;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.incident-meta-col{flex:none;text-align:right;font-size:12px;color:var(--text-muted);white-space:nowrap;padding-top:2px}
.incident-meta-col .loc{font-weight:700;color:var(--text)}
.incident-chev{flex:none;font-size:12px;color:var(--text-muted);transition:transform .15s ease;margin-top:6px}
.incident-card.open .incident-chev{transform:rotate(180deg)}
.incident-body{max-height:0;overflow:hidden;transition:max-height .25s ease}
.incident-card.open .incident-body{max-height:900px}
.incident-body-inner{padding:0 18px 18px;border-top:1px solid var(--line);margin-top:2px}
.incident-full-desc{font-size:14px;color:var(--text);line-height:1.7;margin:14px 0}
.incident-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px 16px;margin-bottom:6px}
.incident-grid .k{font-size:10.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--text-muted)}
.incident-grid .v{font-size:13px;color:var(--text);margin-top:2px}
.accordion-item.open .chev{transform:rotate(180deg)}
.chev{transition:transform .18s;color:var(--gold)}

.detail-hero{aspect-ratio:2.2/1;border-radius:var(--radius-lg);overflow:hidden;margin-bottom:24px;background:var(--navy) center/cover no-repeat}
.detail-meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px}
.prose{font-size:15px;color:var(--text-soft);line-height:1.75}
.prose h1,.prose h2,.prose h3,.prose h4{color:var(--navy);font-weight:800;margin:26px 0 10px}
.prose h1{font-size:22px}
.prose h2{font-size:19px}
.prose h3{font-size:17px}
.prose h4{font-size:15px}
.prose p{margin:0 0 14px}
.prose p:first-child,.prose h1:first-child,.prose h2:first-child{margin-top:0}
.prose strong{color:var(--text)}
.prose ul,.prose ol{margin:0 0 14px;padding-left:22px}
.prose li{margin:0 0 6px}
.prose a{color:var(--gold-deep,#8a6d2f);font-weight:600}
.prose blockquote{border-left:3px solid var(--gold);margin:0 0 14px;padding:2px 0 2px 16px;color:var(--text-muted);font-style:italic}
.prose img{max-width:100%;border-radius:8px;margin:8px 0 16px;display:block;border:1px solid var(--line)}
.prose table{width:100%;border-collapse:collapse;margin:0 0 16px;font-size:13.5px}
.prose table td,.prose table th{border:1px solid var(--line);padding:6px 9px;text-align:left}

/* Quill (report-body rich text editor) writes alignment/indent as classes
   rather than inline styles — these need to be understood both while
   editing (.ql-editor) and later on the published client-facing page
   (.prose), since the saved report body carries the same classes. */
.prose .ql-align-center,.ql-editor .ql-align-center{text-align:center}
.prose .ql-align-right,.ql-editor .ql-align-right{text-align:right}
/* Images are block-level (see .prose img above), so a parent's
   text-align:center/right — which only affects inline content — never
   moves the image itself; it needs its own auto margins to actually
   center/right-align within the column. This is what made a "centered"
   image sit flush left while its centered caption text below it looked
   correctly centered. */
.prose .ql-align-center img,.ql-editor .ql-align-center img{margin-left:auto;margin-right:auto}
.prose .ql-align-right img,.ql-editor .ql-align-right img{margin-left:auto;margin-right:0}
.prose .ql-align-justify,.ql-editor .ql-align-justify{text-align:justify}
.prose .ql-indent-1,.ql-editor .ql-indent-1{padding-left:3em}
.prose .ql-indent-2,.ql-editor .ql-indent-2{padding-left:6em}
.prose .ql-indent-3,.ql-editor .ql-indent-3{padding-left:9em}
.prose .ql-indent-4,.ql-editor .ql-indent-4{padding-left:12em}
.prose .ql-indent-5,.ql-editor .ql-indent-5{padding-left:15em}
.prose .ql-indent-6,.ql-editor .ql-indent-6{padding-left:18em}
.prose .ql-indent-7,.ql-editor .ql-indent-7{padding-left:21em}
.prose .ql-indent-8,.ql-editor .ql-indent-8{padding-left:24em}

/* Quill 2.x renders every list (bullet, numbered, or checklist) as an <ol>
   with a data-list attribute and a CSS-generated marker — .prose needs to
   reproduce that marker system for saved report bodies to show real
   bullets/numbers on the published client page, not just plain lines.
   Hand-written <ul>/<li> content (no data-list attribute) still falls back
   to the plain rule above it. */
.prose li[data-list]{list-style-type:none;padding-left:1.5em;position:relative;margin:0 0 6px}
.prose li[data-list]>.ql-ui{position:absolute}
.prose li[data-list]>.ql-ui:before{display:inline-block;margin-left:-1.5em;margin-right:.3em;text-align:right;white-space:nowrap;width:1.2em}
.prose li[data-list=checked]>.ql-ui,.prose li[data-list=unchecked]>.ql-ui{color:#777}
.prose li[data-list=bullet]>.ql-ui:before{content:'\2022'}
.prose li[data-list=checked]>.ql-ui:before{content:'\2611'}
.prose li[data-list=unchecked]>.ql-ui:before{content:'\2610'}
.prose li[data-list]{counter-reset:list-1 list-2 list-3 list-4}
.prose li[data-list=ordered]{counter-increment:list-0}
.prose li[data-list=ordered]>.ql-ui:before{content:counter(list-0, decimal) '. '}
.prose li[data-list=ordered].ql-indent-1{counter-increment:list-1}
.prose li[data-list=ordered].ql-indent-1>.ql-ui:before{content:counter(list-1, lower-alpha) '. '}
.prose li[data-list=ordered].ql-indent-2{counter-increment:list-2}
.prose li[data-list=ordered].ql-indent-2>.ql-ui:before{content:counter(list-2, lower-roman) '. '}
.prose li[data-list=ordered].ql-indent-3{counter-increment:list-3}
.prose li[data-list=ordered].ql-indent-3>.ql-ui:before{content:counter(list-3, decimal) '. '}
.prose li[data-list=ordered].ql-indent-4{counter-increment:list-4}
.prose li[data-list=ordered].ql-indent-4>.ql-ui:before{content:counter(list-4, lower-alpha) '. '}
.prose li.ql-indent-1{padding-left:4.5em}
.prose li.ql-indent-2{padding-left:7.5em}
.prose li.ql-indent-3{padding-left:10.5em}
.prose li.ql-indent-4{padding-left:13.5em}

.docimport-panel{border:1px solid var(--line-strong);border-radius:var(--radius);overflow:hidden;background:#fff}
.docimport-toolbar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;
  background:var(--surface-2);border-bottom:1px solid var(--line);
}
.docimport-toolbar .fname{font-size:13px;font-weight:700;color:var(--navy);flex:1;min-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.docimport-quill .ql-toolbar.ql-snow{border:none;border-bottom:1px solid var(--line);background:var(--surface-2)}
.docimport-quill .ql-container.ql-snow{border:none}
.docimport-quill .ql-editor{min-height:280px;max-height:420px;overflow:auto;background:#fff;font-size:15px;line-height:1.75}
.docimport-quill .ql-editor:focus{outline:2px solid var(--gold);outline-offset:-2px}
.docimport-htmlbox{width:100%;min-height:220px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;padding:12px;border:none;border-top:1px solid var(--line);resize:vertical;background:#fbfaf6;color:var(--text)}
.docimport-warning-banner{background:#fbf1e0;border:1px solid var(--gold);border-radius:8px;padding:10px 12px;font-size:12.5px;color:#7a5b1e;margin-bottom:12px}

/* Expanded ("Expand") editing view: the whole panel is reparented into a
   fullscreen overlay so alignment/formatting is easy to see and work with,
   rather than squeezed into the form's narrow left column. */
.docimport-fullscreen-overlay{
  position:fixed;inset:0;background:rgba(7,19,29,.72);z-index:500;
  display:flex;align-items:center;justify-content:center;padding:28px;
}
.docimport-panel.expanded{
  width:min(1200px,95vw);max-height:92vh;display:flex;flex-direction:column;box-shadow:var(--shadow-lg);
}
/* The old rules here only ever set flex:1 on .ql-editor, but .ql-editor's
   actual parent is .ql-container (Quill inserts .ql-toolbar and .ql-container
   as siblings inside #docimportQuill; .ql-editor is a grandchild) — since
   .ql-container was never itself a flex child/container, that flex:1 did
   nothing, so the editor never grew to fill the fullscreen overlay and
   ended up clipped by this panel's overflow:hidden with no way to scroll
   the rest into view. Every level of this chain also needs min-height:0 —
   flex items default to min-height:auto, which stops them shrinking below
   their content size and defeats the max-height cap above them. */
.docimport-panel.expanded{min-height:0}
.docimport-panel.expanded #docimportQuill{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0}
.docimport-panel.expanded .ql-container.ql-snow{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0}
.docimport-panel.expanded .ql-editor{flex:1;max-height:none;min-height:0}
.docimport-panel.expanded .docimport-htmlbox{flex:1;max-height:none;min-height:0}