/* =========================================================================
   Beth Din Case Management System
   Government / Court Administration style theme (Material-influenced)
   ========================================================================= */

:root{
  --gov-blue-900:#0b2545;
  --gov-blue-800:#12335e;
  --gov-blue-700:#1a4480;
  --gov-blue-600:#205493;
  --gov-blue-500:#2e6da4;
  --gov-blue-100:#d9e8f6;
  --gov-accent:#3a4b5c;
  --gov-gray-900:#212121;
  --gov-gray-700:#4a4a4a;
  --gov-gray-500:#757575;
  --gov-gray-300:#c9ccd1;
  --gov-gray-200:#e1e4e8;
  --gov-gray-100:#f2f3f5;
  --gov-white:#ffffff;
  --gov-green:#2e7d32;
  --gov-red:#a1252c;
  --gov-amber:#a86b00;
  --shadow-1: 0 1px 2px rgba(0,0,0,.14);
  --shadow-2: 0 2px 6px rgba(0,0,0,.2);
  --shadow-4: 0 4px 10px rgba(0,0,0,.22);
  --shadow-8: 0 8px 22px rgba(0,0,0,.28);
  --shadow-24: 0 12px 40px rgba(0,0,0,.4);
  --radius:4px;
  --radius-chip:16px;
  --sidebar-width:225px;
  --header-height:64px;
  --subheader-height:38px;
  --font-main: "Roboto", -apple-system, system-ui, sans-serif;
  --ease-standard: cubic-bezier(.4,0,.2,1);
}

/* Material Symbols icon font (ligature-based icons, e.g. <span class="msi">dashboard</span>) */
.msi{
  font-family:"Material Symbols Outlined";
  font-weight:normal;font-style:normal;
  font-size:20px;line-height:1;
  display:inline-block;white-space:nowrap;letter-spacing:normal;word-wrap:normal;
  direction:ltr;-webkit-font-smoothing:antialiased;vertical-align:middle;
  -webkit-font-feature-settings:"liga";font-feature-settings:"liga";
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font-main);
  font-size:14px;
  color:var(--gov-gray-900);
  background:var(--gov-gray-100);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--gov-blue-600);text-decoration:none;}
a:hover{text-decoration:underline;}
/* Material type scale (condensed to this app's needs):
   H5 (page title) / H6 (panel title) / Subtitle1 / Body2 / Caption */
h1,h2,h3,h4{font-weight:500;color:var(--gov-blue-900);margin:0 0 8px;letter-spacing:0;}
h1{font-size:24px;font-weight:400;letter-spacing:-.2px;}
h2{font-size:16px;font-weight:500;}
h3{font-size:14px;font-weight:500;}
p{line-height:1.5;}
hr{border:none;border-top:1px solid var(--gov-gray-200);}
.mono{font-family:"Consolas","Courier New",monospace;}

/* ---------------------------------------------------------------------- */
/* Skip link / accessibility                                              */
/* ---------------------------------------------------------------------- */
.skip-link{
  position:absolute;left:-9999px;top:0;background:#fff;color:#000;padding:8px 16px;z-index:9999;
}
.skip-link:focus{left:8px;top:8px;}

/* ---------------------------------------------------------------------- */
/* Banner (like the US/CT gov ".gov" identifier banner)                   */
/* ---------------------------------------------------------------------- */
/* ---------------------------------------------------------------------- */
/* Top header bar                                                         */
/* ---------------------------------------------------------------------- */
.top-header{
  height:var(--header-height);
  background:var(--gov-blue-900);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 20px;
  position:relative;
  top:0;
  z-index:100;
  border-bottom:1px solid var(--gov-blue-900);
}
.top-header .brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:15px;
  font-weight:700;
  letter-spacing:.2px;
  flex-shrink:0;
}
.top-header .brand .seal{
  width:34px;height:34px;border-radius:8px;
  background:#fff;
  color:var(--gov-blue-900);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:13px;
}
.top-header .brand .brand-name{color:#fff;}
.top-header .hdr-search{
  flex:1;max-width:440px;margin:0 20px;position:relative;display:flex;align-items:center;
}
.top-header .hdr-search .msi{position:absolute;left:13px;font-size:19px;color:var(--gov-gray-500);pointer-events:none;}
.top-header .hdr-search input{
  width:100%;border:1px solid transparent;border-radius:20px;padding:8px 34px 8px 40px;font-size:13px;
  background:rgba(255,255,255,.94);color:var(--gov-gray-900);box-shadow:none;
}
.top-header .hdr-search input:focus{background:#fff;border-color:var(--gov-blue-300,#a7c4e8);box-shadow:0 0 0 3px rgba(255,255,255,.18);}
.top-header .hdr-search-kbd{
  position:absolute;right:10px;font-size:10.5px;color:var(--gov-gray-500);
  border:1px solid var(--gov-gray-300);border-radius:4px;padding:1px 6px;background:var(--gov-gray-100);
  pointer-events:none;
}
.top-header .hdr-icon-btn{
  background:none;border:none;color:#fff;cursor:pointer;position:relative;padding:7px;
  display:flex;align-items:center;border-radius:50%;flex-shrink:0;
}
.top-header .hdr-icon-btn:hover{background:rgba(255,255,255,.15);}
.top-header .hdr-right{display:flex;align-items:center;gap:4px;font-size:12.5px;flex-shrink:0;}
.hdr-search-mobile-btn{display:none;}
@media (max-width:860px){
  .hdr-search-mobile-btn{display:flex;}
}

/* User menu */
.user-menu-wrap{position:relative;}
.user-chip{
  background:none;border:none;cursor:pointer;color:#fff;
  padding:5px 8px 5px 5px;border-radius:20px;
  display:flex;align-items:center;gap:8px;
}
.user-chip:hover{background:rgba(255,255,255,.12);}
.user-chip-text{font-size:12.5px;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.user-menu{
  position:absolute;top:calc(100% + 8px);right:0;background:#fff;color:var(--gov-gray-900);
  border:1px solid var(--gov-gray-300);border-radius:6px;box-shadow:var(--shadow-8);
  min-width:220px;overflow:hidden;z-index:200;
}
.user-menu-head{padding:12px 14px;border-bottom:1px solid var(--gov-gray-200);font-size:13px;}
.user-menu a,.user-menu button{
  display:flex;align-items:center;gap:10px;width:100%;padding:10px 14px;font-size:12.5px;
  background:none;border:none;text-align:left;cursor:pointer;color:var(--gov-gray-900);
}
.user-menu a:hover,.user-menu button:hover{background:var(--gov-gray-100);text-decoration:none;}
.user-menu .msi{font-size:18px;color:var(--gov-gray-500);}
.top-header .hdr-right .user-chip{
  background:transparent;
  border:1px solid rgba(255,255,255,.5);
  padding:4px 10px;border-radius:0;
  display:flex;align-items:center;gap:6px;
}
.top-header .hdr-right button.linklike{
  background:none;border:none;color:#fff;cursor:pointer;font-size:12.5px;text-decoration:underline;
  padding:0;
}

/* Divider strip under header (flat, no gradient) */
.accent-strip{height:4px;background:var(--gov-accent);}

/* ---------------------------------------------------------------------- */
/* App shell layout: sidebar + main                                       */
/* ---------------------------------------------------------------------- */
.app-shell{display:flex;min-height:calc(100vh - 64px);}

.sidebar{
  width:var(--sidebar-width);
  background:var(--gov-white);
  border-right:1px solid var(--gov-gray-300);
  padding:14px 0;
  flex-shrink:0;
}
.sidebar .side-section-label{
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:.6px;
  color:var(--gov-gray-500);
  padding:10px 16px 4px;
  font-weight:700;
}
.sidebar nav a{
  display:flex;align-items:center;gap:10px;
  padding:8px 16px 8px 13px;
  color:var(--gov-gray-700);
  font-size:13.5px;
  border-left:3px solid transparent;
  position:relative;
}
.sidebar nav a:hover{background:var(--gov-gray-100);text-decoration:none;}
.sidebar nav a .dot{
  width:6px;height:6px;border-radius:50%;background:transparent;flex-shrink:0;
  transition:background-color .12s var(--ease-standard);
}
.sidebar nav a.active{
  background:transparent;
  border-left-color:transparent;
  color:var(--gov-blue-700);
  font-weight:700;
}
.sidebar nav a.active .dot{background:var(--gov-blue-700);}
.sidebar nav a.active .ic{color:var(--gov-blue-700);}
.sidebar nav a .ic{width:20px;text-align:center;font-size:14px;color:var(--gov-gray-500);flex-shrink:0;}
.sidebar nav a .nav-label{flex:1;}
.sidebar nav a .nav-badge{
  min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--gov-blue-700);color:#fff;
  font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;
}

/* Mobile: the sidebar becomes an off-canvas drawer (hidden by default,
   slides in over the content) instead of a permanent flex column, with a
   hamburger button in the header to open it and a backdrop to close it. */
.hdr-menu-btn{display:none;}
.sidebar-backdrop{
  display:none;position:fixed;inset:0;background:rgba(10,20,35,.5);z-index:140;
}
@media (max-width:860px){
  .app-shell{display:block;}
  .hdr-menu-btn{
    display:flex;background:none;border:none;color:#fff;cursor:pointer;padding:8px;
    border-radius:50%;margin-right:2px;flex-shrink:0;
  }
  .hdr-menu-btn:hover{background:rgba(255,255,255,.15);}
  .hdr-menu-btn .msi{font-size:22px;}
  .sidebar{
    position:fixed;top:0;left:0;bottom:0;z-index:150;
    transform:translateX(-100%);
    transition:transform .2s var(--ease-standard);
    box-shadow:var(--shadow-8);
    overflow-y:auto;
  }
  .sidebar.open{transform:translateX(0);}
  .sidebar-backdrop.open{display:block;}
  .main-content{padding:14px 14px 32px;max-width:100%;}
  .top-header .brand .brand-name{display:none;}
  .top-header .hdr-search{display:none;}
  .user-chip-text{display:none;}
}
@media (max-width:480px){
  .top-header{padding:0 10px;}
  .top-header .hdr-right{gap:0;}
}

/* Circular avatar with initials, used in activity feeds / people lists */
.avatar{
  width:28px;height:28px;border-radius:50%;background:var(--gov-blue-700);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;
  flex-shrink:0;
}
.avatar.sm{width:22px;height:22px;font-size:9.5px;}

.main-content{
  flex:1;
  padding:18px 24px 40px;
  max-width:1280px;
  width:100%;
}

/* ---------------------------------------------------------------------- */
/* Breadcrumb                                                             */
/* ---------------------------------------------------------------------- */
.breadcrumb{
  font-size:12.5px;
  color:var(--gov-gray-700);
  margin-bottom:16px;
  padding:10px 16px;
  background:#fff;
  border:1px solid var(--gov-gray-300);
  border-radius:4px;
  box-shadow:var(--shadow-1);
  position:relative;
}
.breadcrumb a{color:var(--gov-blue-600);}
.breadcrumb .sep{margin:0 8px;color:var(--gov-gray-300);}
.breadcrumb span:last-child{color:var(--gov-blue-800);font-weight:600;}

/* Floating action button — fixed, bottom-right, mirrors the "quick
   actions" bubble convention from Material admin dashboards. */
.fab{
  position:fixed;right:24px;bottom:24px;z-index:150;
  width:52px;height:52px;border-radius:50%;
  background:var(--gov-blue-700);color:#fff;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-8);
  transition:transform .12s var(--ease-standard), box-shadow .12s var(--ease-standard), background-color .12s ease;
}
.fab:hover{background:var(--gov-blue-600);box-shadow:var(--shadow-24);transform:translateY(-2px);}
.fab .msi{font-size:24px;}
.fab-menu{
  position:fixed;right:24px;bottom:86px;z-index:150;
  background:#fff;border:1px solid var(--gov-gray-300);border-radius:6px;
  box-shadow:var(--shadow-8);min-width:200px;overflow:hidden;
}
.fab-menu a{display:flex;align-items:center;gap:10px;padding:10px 14px;font-size:13px;color:var(--gov-gray-900);}
.fab-menu a:hover{background:var(--gov-gray-100);text-decoration:none;}
.fab-menu a .msi{font-size:18px;color:var(--gov-blue-700);}

/* ---------------------------------------------------------------------- */
/* Page header block                                                      */
/* ---------------------------------------------------------------------- */
.page-header{
  display:flex;justify-content:space-between;align-items:flex-start;
  margin-bottom:16px;flex-wrap:wrap;gap:10px;
}
.page-header .page-title h1{margin-bottom:2px;}
.page-header .page-title .sub{color:var(--gov-gray-700);font-size:12.5px;}
.page-header .actions{display:flex;gap:8px;flex-wrap:wrap;}

/* ---------------------------------------------------------------------- */
/* Panels / cards                                                         */
/* ---------------------------------------------------------------------- */
.panel{
  background:var(--gov-white);
  border:1px solid var(--gov-gray-300);
  border-radius:4px;
  margin-bottom:16px;
  box-shadow:0 1px 2px rgba(0,0,0,.12);
  overflow:hidden;
}
.panel .panel-head{
  background:var(--gov-gray-200);
  border-bottom:2px solid var(--gov-blue-800);
  padding:8px 14px;
  display:flex;justify-content:space-between;align-items:center;
}
.panel .panel-head h2,.panel .panel-head h3{margin:0;font-size:14px;color:var(--gov-blue-900);}
.panel .panel-body{padding:14px;}
.panel.compact .panel-body{padding:8px 14px;}

.grid-cols{display:grid;gap:14px;}
.grid-cols.c2{grid-template-columns:repeat(2,1fr);}
.grid-cols.c3{grid-template-columns:repeat(3,1fr);}
.grid-cols.c4{grid-template-columns:repeat(4,1fr);}
@media (max-width:900px){
  .grid-cols.c2,.grid-cols.c3,.grid-cols.c4{grid-template-columns:1fr;}
}

/* Stat tiles */
/* Colorful solid stat tiles (Material admin-dashboard convention): each
   card is a flat saturated color with a large number, label, and a
   corner icon. Colors are drawn from the same navy/gray system (plus
   the semantic green/amber/red) rather than arbitrary SaaS brand hues. */
.stat-tile{
  background:var(--gov-blue-700);
  color:#fff;
  border:none;
  border-radius:6px;
  padding:16px 18px;
  box-shadow:var(--shadow-2);
  position:relative;overflow:hidden;
  min-height:78px;
}
.stat-tile .num{font-size:28px;font-weight:700;color:#fff;line-height:1.1;}
.stat-tile .lbl{font-size:12px;color:rgba(255,255,255,.88);letter-spacing:.2px;margin-top:4px;}
.stat-tile .msi{position:absolute;right:14px;top:14px;font-size:26px;color:rgba(255,255,255,.55);}
.stat-tile.gold{background:var(--gov-accent);}
.stat-tile.red{background:var(--gov-red);}
.stat-tile.green{background:var(--gov-green);}
.stat-tile.slate{background:#455a64;}

/* ---------------------------------------------------------------------- */
/* Tables                                                                 */
/* ---------------------------------------------------------------------- */
.table-wrap{overflow-x:auto;}
table.data-table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}
table.data-table th{
  background:var(--gov-blue-800);
  color:#fff;
  text-align:left;
  padding:8px 10px;
  font-weight:600;
  font-size:12px;
  white-space:nowrap;
  position:sticky;top:0;
}
table.data-table td{
  padding:7px 10px;
  border-bottom:1px solid var(--gov-gray-200);
  vertical-align:top;
}
table.data-table tbody tr:nth-child(even){background:var(--gov-gray-100);}
table.data-table tbody tr:hover{background:var(--gov-blue-100);}
table.data-table tbody tr.hearing-row:hover{background:var(--gov-blue-100);}
table.data-table td.num,table.data-table th.num{text-align:right;}
table.data-table .row-actions{white-space:nowrap;}
table.data-table .row-actions a, table.data-table .row-actions button{margin-right:8px;font-size:12px;}

.table-toolbar{
  display:flex;justify-content:space-between;align-items:center;
  padding:8px 0;flex-wrap:wrap;gap:8px;
}
.table-toolbar .left, .table-toolbar .right{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}

.pagination{display:flex;gap:4px;align-items:center;justify-content:flex-end;padding:10px 0;font-size:12.5px;}
.pagination button{
  border:1px solid var(--gov-gray-300);background:#fff;padding:4px 10px;border-radius:var(--radius);cursor:pointer;
}
.pagination button:disabled{opacity:.4;cursor:not-allowed;}
.pagination button.active-page{background:var(--gov-blue-700);color:#fff;border-color:var(--gov-blue-700);}

/* ---------------------------------------------------------------------- */
/* Status badges                                                          */
/* ---------------------------------------------------------------------- */
/* Material "assist chip" convention for status badges: fully rounded,
   dense, colored to match the semantic state. */
.badge{
  display:inline-block;padding:2px 10px;border-radius:var(--radius-chip);font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.3px;border:1px solid;line-height:1.6;
}
.badge-open{background:#fff;color:var(--gov-green);border-color:var(--gov-green);}
.badge-pending{background:#fff;color:var(--gov-amber);border-color:var(--gov-amber);}
.badge-closed{background:var(--gov-gray-200);color:var(--gov-gray-700);border-color:var(--gov-gray-300);}
.badge-archived{background:var(--gov-gray-200);color:#888;border-color:#ccc;}
.badge-confidential{background:var(--gov-red);color:#fff;border-color:var(--gov-red);}
.badge-high{background:var(--gov-red);color:#fff;border-color:var(--gov-red);}
.badge-medium{background:#fff;color:var(--gov-amber);border-color:var(--gov-amber);}
.badge-low{background:#fff;color:var(--gov-green);border-color:var(--gov-green);}
.badge-draft{background:var(--gov-gray-200);color:var(--gov-gray-700);border-color:var(--gov-gray-300);}
.badge-final{background:#fff;color:var(--gov-green);border-color:var(--gov-green);}

/* ---------------------------------------------------------------------- */
/* Buttons (old-fashioned toolbar buttons, Material elevation subtle)     */
/* ---------------------------------------------------------------------- */
/* Material button conventions: "outlined" is the default (border, no
   fill), "contained" (.btn-primary/.btn-danger/.btn-gold) gets a filled
   background plus a slight resting elevation, per Material Design spec. */
.btn{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-main);
  font-size:12.5px;font-weight:700;
  padding:7px 16px;
  border-radius:4px;
  border:1px solid var(--gov-gray-500);
  background:#fff;
  color:var(--gov-gray-900);
  cursor:pointer;
  transition:background-color .1s ease, box-shadow .1s ease;
}
/* Material ripple, injected by material-ui.js on click */
.mdc-ripple{
  position:absolute;border-radius:50%;pointer-events:none;
  background:rgba(0,0,0,.18);transform:scale(0);
  animation:mdc-ripple-anim .55s var(--ease-standard);
}
.btn-primary .mdc-ripple,.btn-danger .mdc-ripple,.btn-gold .mdc-ripple{background:rgba(255,255,255,.45);}
@keyframes mdc-ripple-anim{ to{ transform:scale(1); opacity:0; } }
.btn:hover{background:var(--gov-gray-100);text-decoration:none;}
.btn:active{background:var(--gov-gray-200);}
.btn:focus-visible{outline:2px solid var(--gov-blue-600);outline-offset:1px;}
.btn.btn-primary{background:var(--gov-blue-700);border-color:var(--gov-blue-700);color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);}
.btn.btn-primary:hover{background:var(--gov-blue-600);box-shadow:0 1px 4px rgba(0,0,0,.35);}
.btn.btn-gold{background:var(--gov-accent);border-color:var(--gov-accent);color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);}
.btn.btn-danger{background:var(--gov-red);border-color:var(--gov-red);color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);}
.btn.btn-outline{background:transparent;}
.btn.btn-sm{padding:4px 10px;font-size:11px;border-radius:3px;}
.btn[disabled]{opacity:.5;cursor:not-allowed;box-shadow:none;}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;}

/* ---------------------------------------------------------------------- */
/* Forms                                                                  */
/* ---------------------------------------------------------------------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;}
.form-grid.single{grid-template-columns:1fr;}
@media (max-width:800px){.form-grid{grid-template-columns:1fr;}}
/* Material floating-label text field. The label rests inside the field
   until the control is focused or has a value, then floats up into a
   small caption above the border (Material "outlined" text field spec).
   Uses :has() so no JS/DOM reordering is needed; inputs get a
   placeholder=" " fallback (see material-ui.js) so :placeholder-shown
   can drive the resting/floated state. Selects and date/time controls
   always show floated labels since their native chrome can't overlay. */
.field{position:relative;padding-top:15px;}
.field.span2{grid-column:span 2;}
@media (max-width:800px){.field.span2{grid-column:span 1;}}
.field > label{
  position:absolute;left:11px;top:24px;
  font-size:13.5px;font-weight:400;color:var(--gov-gray-500);
  background:#fff;padding:0 4px;pointer-events:none;
  max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:top .12s var(--ease-standard),font-size .12s var(--ease-standard),color .12s var(--ease-standard);
  z-index:1;
}
.field:has(select) > label,
.field:has(input[type=date]) > label,
.field:has(input[type=time]) > label,
.field:has(input[type=datetime-local]) > label,
.field:has(input:focus) > label,
.field:has(textarea:focus) > label,
.field:has(input:not(:placeholder-shown)) > label,
.field:has(textarea:not(:placeholder-shown)) > label{
  top:0;font-size:10.5px;font-weight:700;color:var(--gov-blue-700);
}
.field input, .field select, .field textarea{width:100%;}
.field .hint{font-size:11px;color:var(--gov-gray-500);display:block;margin-top:3px;}
.field.required > label:after{content:" *";color:var(--gov-red);}

/* Fields that wrap something other than a plain labeled control
   (checkboxes, file pickers) opt out of the floating-label treatment. */
.field-static{padding-top:0;display:flex;flex-direction:column;gap:4px;}
.field-static > label{
  position:static;background:none;padding:0;font-size:12px;font-weight:600;color:var(--gov-gray-700);max-width:none;
  pointer-events:auto;
}
.field-static input{pointer-events:auto;}

/* Material "outlined" text field convention: rounded corners, resting
   1px border, and a 2px colored border + halo on focus (no browser
   default outline). This is the one place the UI intentionally departs
   from the flat/square gov chrome, per Material spec for inputs. */
input[type=text],input[type=email],input[type=password],input[type=date],input[type=time],
input[type=datetime-local],input[type=number],input[type=tel],input[type=search],select,textarea{
  font-family:var(--font-main);
  font-size:13.5px;
  padding:9px 12px;
  border:1px solid var(--gov-gray-300);
  border-radius:4px;
  background:#fff;
  color:var(--gov-gray-900);
  transition:border-color .1s ease, box-shadow .1s ease;
}
input:hover,select:hover,textarea:hover{border-color:var(--gov-gray-500);}
input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:var(--gov-blue-600);
  box-shadow:0 0 0 1px var(--gov-blue-600);
}
textarea{resize:vertical;min-height:70px;font-family:var(--font-main);}

/* Material checkbox: native input, custom-painted box + checkmark so it
   reads consistently across browsers instead of the tiny OS default. */
input[type=checkbox]{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  width:18px !important;height:18px !important;min-width:18px;
  margin:0;padding:0;
  border:2px solid var(--gov-gray-500);border-radius:3px;
  background:#fff;cursor:pointer;position:relative;flex-shrink:0;
  vertical-align:middle;
  transition:background-color .12s var(--ease-standard),border-color .12s var(--ease-standard);
}
input[type=checkbox]:hover{border-color:var(--gov-blue-600);}
input[type=checkbox]:checked{background:var(--gov-blue-700);border-color:var(--gov-blue-700);}
input[type=checkbox]:checked::after{
  content:"";position:absolute;left:4px;top:0px;width:4px;height:9px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(40deg);
}
input[type=checkbox]:focus-visible{outline:2px solid var(--gov-blue-500);outline-offset:2px;}
input[type=checkbox]:disabled{opacity:.5;cursor:not-allowed;}
label:has(> input[type=checkbox]), label > input[type=checkbox]{cursor:pointer;}
fieldset{border:1px solid var(--gov-gray-300);border-radius:var(--radius);padding:12px 14px;margin:0 0 14px;}
legend{font-weight:600;color:var(--gov-blue-800);font-size:12.5px;padding:0 6px;}

.form-actions{display:flex;gap:10px;padding-top:8px;border-top:1px solid var(--gov-gray-200);margin-top:14px;}

.search-bar{display:flex;gap:8px;}

/* Case-number typeahead: free-text entry with a live searchable dropdown
   of matching cases underneath, used anywhere a form needs a case #. */
.case-picker-wrap{position:relative;}
.case-picker-results{
  position:absolute;top:100%;left:0;right:0;margin-top:2px;
  background:#fff;border:1px solid var(--gov-gray-300);border-radius:4px;
  max-height:220px;overflow-y:auto;z-index:30;box-shadow:var(--shadow-4);display:none;
}
.case-picker-results.show{display:block;}
.case-picker-results .cp-item{padding:8px 12px;cursor:pointer;font-size:12.5px;border-bottom:1px solid var(--gov-gray-100);}
.case-picker-results .cp-item:last-child{border-bottom:none;}
.case-picker-results .cp-item:hover,.case-picker-results .cp-item.hl{background:var(--gov-blue-100);}
.case-picker-results .cp-num{font-weight:700;color:var(--gov-blue-800);display:block;}
.case-picker-results .cp-title{color:var(--gov-gray-700);font-size:11.5px;}
.case-picker-results .cp-empty{padding:10px 12px;color:var(--gov-gray-500);font-size:12px;}
.search-bar input{flex:1;min-width:180px;}

/* ---------------------------------------------------------------------- */
/* Tabs                                                                   */
/* ---------------------------------------------------------------------- */
.tabs{display:flex;border-bottom:1px solid var(--gov-gray-300);gap:2px;flex-wrap:wrap;}
.tabs button{
  background:var(--gov-gray-100);border:1px solid var(--gov-gray-300);border-bottom:none;
  padding:8px 14px;font-size:12.5px;font-weight:600;color:var(--gov-gray-700);
  cursor:pointer;border-radius:var(--radius) var(--radius) 0 0;
}
.tabs button.active{background:#fff;color:var(--gov-blue-800);border-bottom:2px solid #fff;margin-bottom:-1px;}
.tab-panel{display:none;padding:14px;background:#fff;border:1px solid var(--gov-gray-300);border-top:none;}
.tab-panel.active{display:block;}

/* ---------------------------------------------------------------------- */
/* Expandable / accordion sections                                        */
/* ---------------------------------------------------------------------- */
details.expand{
  border:1px solid var(--gov-gray-300);border-radius:var(--radius);margin-bottom:8px;background:#fff;
}
details.expand summary{
  padding:9px 12px;cursor:pointer;font-weight:600;color:var(--gov-blue-800);background:var(--gov-gray-100);list-style:none;
  display:flex;justify-content:space-between;align-items:center;
}
details.expand summary::-webkit-details-marker{display:none;}
details.expand summary:after{content:"+";font-size:16px;color:var(--gov-gray-500);}
details.expand[open] summary:after{content:"\2212";}
details.expand .expand-body{padding:12px;border-top:1px solid var(--gov-gray-200);}

/* ---------------------------------------------------------------------- */
/* Alerts / notices                                                       */
/* ---------------------------------------------------------------------- */
.alert{
  padding:10px 14px;border-radius:var(--radius);border:1px solid transparent;font-size:13px;margin-bottom:12px;
  display:flex;gap:8px;align-items:flex-start;
}
.alert-info{background:#e7f1fa;border-color:#bcdcf2;color:var(--gov-blue-800);}
.alert-success{background:#e6f4ea;border-color:#b7dfc0;color:var(--gov-green);}
.alert-warning{background:#fdf3e0;border-color:#f2dfad;color:var(--gov-amber);}
.alert-danger{background:#fbe9e9;border-color:#f0c6c6;color:var(--gov-red);}

/* ---------------------------------------------------------------------- */
/* Rich text editor (documents, stored as HTML in Firestore)              */
/* ---------------------------------------------------------------------- */
.rte-toolbar{
  display:flex;flex-wrap:wrap;gap:2px;
  border:1px solid var(--gov-gray-300);border-bottom:none;border-radius:4px 4px 0 0;
  background:var(--gov-gray-100);padding:4px;
}
.rte-btn{
  background:none;border:1px solid transparent;border-radius:4px;padding:5px 8px;
  cursor:pointer;color:var(--gov-gray-700);display:flex;align-items:center;gap:3px;font-size:11px;font-weight:600;
}
.rte-btn:hover{background:#fff;border-color:var(--gov-gray-300);}
.rte-btn .msi{font-size:17px;}
.rte-sep{width:1px;background:var(--gov-gray-300);margin:2px 4px;}
.rte-editor{
  border:1px solid var(--gov-gray-300);border-radius:0 0 4px 4px;
  min-height:220px;max-height:480px;overflow-y:auto;padding:14px 16px;
  background:#fff;font-size:13.5px;line-height:1.6;
}
.rte-editor:focus{outline:none;border-color:var(--gov-blue-600);box-shadow:0 0 0 1px var(--gov-blue-600);}
.rte-editor table, .doc-content table{border-collapse:collapse;width:100%;margin:8px 0;}
.rte-editor table td, .rte-editor table th, .doc-content table td, .doc-content table th{
  border:1px solid var(--gov-gray-300);padding:6px 8px;
}
.doc-content{
  border:1px solid var(--gov-gray-300);border-radius:4px;padding:14px 16px;background:#fff;
  font-size:13.5px;line-height:1.6;margin-top:10px;
}

/* ---------------------------------------------------------------------- */
/* Timeline                                                                */
/* ---------------------------------------------------------------------- */
.timeline{list-style:none;margin:0;padding:0;border-left:2px solid var(--gov-gray-300);margin-left:8px;}
.timeline li{position:relative;padding:0 0 16px 20px;}
.timeline li:before{
  content:"";position:absolute;left:-7px;top:2px;width:12px;height:12px;border-radius:50%;
  background:var(--gov-blue-700);border:2px solid #fff;box-shadow:0 0 0 1px var(--gov-blue-700);
}
.timeline .tl-date{font-size:11px;color:var(--gov-gray-500);}
.timeline .tl-title{font-weight:600;}

/* ---------------------------------------------------------------------- */
/* Login page                                                             */
/* ---------------------------------------------------------------------- */
.login-wrap{
  min-height:100vh;display:flex;flex-direction:column;background:var(--gov-gray-100);
}
.login-center{flex:1;display:flex;align-items:center;justify-content:center;padding:24px;}
.login-box{
  background:#fff;border:1px solid var(--gov-gray-300);border-top:5px solid var(--gov-blue-900);
  border-radius:4px;width:100%;max-width:420px;padding:28px 30px;
  box-shadow:0 1px 4px rgba(0,0,0,.18);
}
.login-box h1{text-align:center;font-size:19px;}
.login-box .seal-lg{
  width:60px;height:60px;border-radius:0;background:#fff;color:var(--gov-blue-900);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:22px;margin:0 auto 12px;
  border:2px solid var(--gov-blue-900);
}
.login-box .subtitle{text-align:center;color:var(--gov-gray-700);font-size:12.5px;margin-bottom:18px;}
.login-toggle{display:flex;justify-content:center;gap:16px;margin-bottom:16px;font-size:12.5px;}
.login-toggle button{background:none;border:none;color:var(--gov-blue-600);cursor:pointer;text-decoration:underline;}
.login-toggle button.active{color:var(--gov-gray-900);font-weight:700;text-decoration:none;cursor:default;}

/* ---------------------------------------------------------------------- */
/* Footer                                                                 */
/* ---------------------------------------------------------------------- */
.site-footer{
  background:var(--gov-blue-900);color:var(--gov-blue-100);font-size:11.5px;
  padding:14px 24px;text-align:center;margin-top:24px;
}
.site-footer a{color:#fff;text-decoration:underline;}

/* Utility */
.text-muted{color:var(--gov-gray-500);}
.text-right{text-align:right;}
.mt-0{margin-top:0;}
.mb-0{margin-bottom:0;}
.flex{display:flex;}
.flex-between{display:flex;justify-content:space-between;align-items:center;}
.gap-8{gap:8px;}
.hidden{display:none !important;}
.empty-state{padding:30px;text-align:center;color:var(--gov-gray-500);}
.loading-row td{text-align:center;padding:24px 20px 10px;color:var(--gov-gray-500);}

/* ---------------------------------------------------------------------- */
/* Full-page loader — shown inline (no JS dependency) the instant a page  */
/* starts parsing, and again for a beat when navigating to another page, */
/* so static multi-page navigation never flashes a bare/empty shell.     */
/* ---------------------------------------------------------------------- */
.page-loader{
  position:fixed;inset:0;z-index:999;
  background:var(--gov-gray-100);
  display:flex;align-items:center;justify-content:center;
  opacity:1;transition:opacity .18s var(--ease-standard);
}
.page-loader.fade-out{opacity:0;pointer-events:none;}
.mdc-spinner{
  width:44px;height:44px;border-radius:50%;
  border:4px solid var(--gov-gray-300);
  border-top-color:var(--gov-blue-700);
  animation:mdc-spin .75s linear infinite;
}
@keyframes mdc-spin{ to{ transform:rotate(360deg); } }

/* ---------------------------------------------------------------------- */
/* Material linear progress indicator (indeterminate)                     */
/* ---------------------------------------------------------------------- */
.progress-bar{height:3px;width:100%;max-width:280px;margin:0 auto 10px;background:var(--gov-gray-200);
  overflow:hidden;position:relative;border-radius:2px;}
.progress-bar .indeterminate{
  position:absolute;top:0;left:0;height:100%;width:40%;
  background:var(--gov-blue-600);border-radius:2px;
  animation:mdc-indeterminate 1.15s infinite var(--ease-standard);
}
@keyframes mdc-indeterminate{
  0%{left:-45%;width:45%;}
  60%{left:100%;width:35%;}
  100%{left:100%;width:35%;}
}
/* Slim progress bar that can be pinned under a panel header while a
   section refreshes in place. */
.panel-progress{height:3px;background:var(--gov-gray-200);overflow:hidden;position:relative;}
.panel-progress .indeterminate{
  position:absolute;top:0;left:0;height:100%;width:35%;background:var(--gov-blue-600);
  animation:mdc-indeterminate 1.15s infinite var(--ease-standard);
}
.panel-progress.hidden{display:none;}

/* ---------------------------------------------------------------------- */
/* Material dialog overlay + horizontal stepper (full-screen form wizard) */
/* ---------------------------------------------------------------------- */
/* Full-page overlay (not a centered dialog): the wizard takes over the
   entire viewport, like a dedicated multi-step page, rather than a
   floating card. */
.modal-overlay{
  position:fixed;inset:0;background:var(--gov-gray-100);
  display:flex;align-items:stretch;justify-content:center;
  z-index:500;padding:0;
  animation:mdc-fade-in .15s var(--ease-standard);
}
.modal-overlay.hidden{display:none;}
@keyframes mdc-fade-in{ from{opacity:0;} to{opacity:1;} }

.modal-surface{
  background:#fff;width:100%;max-width:none;height:100vh;max-height:none;
  border-radius:0;box-shadow:none;
  display:flex;flex-direction:column;overflow:hidden;
  animation:mdc-rise-in .18s var(--ease-standard);
}
@keyframes mdc-rise-in{ from{opacity:0;} to{opacity:1;} }
.modal-body{max-width:1100px;width:100%;margin:0 auto;}
.stepper{justify-content:center;}
.modal-header{padding:16px 32px;}
.modal-footer{padding:14px 32px;}

.modal-header{
  background:var(--gov-blue-900);color:#fff;padding:16px 22px;
  display:flex;justify-content:space-between;align-items:center;flex-shrink:0;
}
.modal-header h2{color:#fff;margin:0;font-size:16px;}
.modal-header .modal-sub{font-size:11.5px;color:var(--gov-blue-100);margin-top:2px;}
.modal-close{
  background:none;border:none;color:#fff;cursor:pointer;font-size:20px;line-height:1;
  padding:4px;border-radius:50%;display:flex;
}
.modal-close:hover{background:rgba(255,255,255,.15);}

/* Stepper header: numbered circles connected by a rule (Material
   horizontal, non-linear stepper — click any completed/current step). */
.stepper{
  display:flex;align-items:flex-start;padding:14px 22px;background:var(--gov-gray-100);
  border-bottom:1px solid var(--gov-gray-300);flex-shrink:0;overflow-x:auto;
}
.stepper .step{
  display:flex;align-items:center;gap:8px;flex-shrink:0;
  background:none;border:none;cursor:pointer;padding:4px 6px;font-family:var(--font-main);
}
.stepper .step .step-num{
  width:24px;height:24px;border-radius:50%;background:var(--gov-gray-300);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:700;flex-shrink:0;
  transition:background-color .15s var(--ease-standard);
}
.stepper .step .step-label{font-size:12px;color:var(--gov-gray-500);font-weight:600;white-space:nowrap;}
.stepper .step.done .step-num{background:var(--gov-green);}
.stepper .step.active .step-num{background:var(--gov-blue-700);}
.stepper .step.active .step-label{color:var(--gov-blue-900);}
.stepper .step.done .step-label{color:var(--gov-gray-700);}
.stepper .step-connector{flex:1;height:1px;background:var(--gov-gray-300);margin:0 4px;align-self:center;min-width:16px;}

.modal-body{padding:18px 22px;overflow-y:auto;flex:1;}
.wizard-step{display:none;}
.wizard-step.active{display:block;animation:mdc-fade-in .15s var(--ease-standard);}
.modal-footer{
  padding:12px 22px;border-top:1px solid var(--gov-gray-200);
  display:flex;justify-content:space-between;align-items:center;flex-shrink:0;background:var(--gov-gray-100);
}
.modal-footer .footer-right{display:flex;gap:8px;}

/* Dense/packed field grid used inside wizard steps */
.form-grid.packed{gap:6px 12px;}
.form-grid.packed .field{padding-top:13px;}
.party-cols{align-items:start;margin-bottom:8px;}
.party-fieldset{margin:0;}
.party-fieldset.plaintiff{border-left:4px solid var(--gov-blue-700);}
.party-fieldset.defendant{border-left:4px solid var(--gov-accent);}
.party-fieldset legend{font-size:13px;text-transform:uppercase;letter-spacing:.3px;}
@media (max-width:900px){.party-cols{grid-template-columns:1fr;}}
.form-grid.packed input,.form-grid.packed select,.form-grid.packed textarea{padding:7px 10px;font-size:13px;}
.form-grid.packed textarea{min-height:52px;}
.review-block{background:var(--gov-gray-100);border:1px solid var(--gov-gray-300);border-radius:4px;padding:12px 14px;margin-bottom:10px;}
.review-block h3{margin-bottom:6px;}
.review-block dl{display:grid;grid-template-columns:140px 1fr;gap:4px 8px;margin:0;font-size:12.5px;}
.review-block dt{color:var(--gov-gray-700);font-weight:600;}
.review-block dd{margin:0;}

@media (max-width:640px){
  .modal-header{padding:12px 16px;}
  .modal-header h2{font-size:14.5px;}
  .stepper{padding:10px 12px;}
  .stepper .step .step-label{display:none;}
  .stepper .step-connector{min-width:10px;}
  .modal-body{padding:14px;}
  .modal-footer{padding:10px 12px;flex-wrap:wrap;gap:8px;}
  .modal-footer .footer-right{flex-wrap:wrap;}
  .review-block dl{grid-template-columns:1fr;gap:0 0;}
  .review-block dt{margin-top:6px;}
  .tabs button{padding:7px 10px;font-size:11.5px;}
  .data-table{font-size:12px;}
  .page-header{flex-direction:column;align-items:stretch;}
  .page-header .actions{width:100%;}
  .page-header .actions .btn{flex:1;justify-content:center;}
}

@media print{
  .sidebar,.top-header,.gov-banner,.accent-strip,.toolbar,.site-footer,.no-print{display:none !important;}
  .main-content{padding:0;max-width:100%;}
  body{background:#fff;}
}