:root{
  --bg: #0b0f14;
  --bg-elev: #121821;
  --bg-elev-2:#182130;
  --text: #e6edf3;
  --muted:#9fb0c3;
  --accent:#4fb3ff;
  --accent-2:#7ef0c6;
  --danger:#ff6b6b;
  --border:#263043;
  --chip:#1e2a3d;
  --chip-on:#243850;
  --ok:#2ecc71;
  --warn:#f1c40f;
  --shadow: 0 6px 20px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg); /* Solid background instead of gradient */
  color:var(--text);
  font:14px/1.45 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  min-height: 100vh; /* Ensure minimum height */
  display:flex;              /* enable sticky footer layout */
  flex-direction:column;     /* header, main, footer stacked vertically */
}

.app-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px;
  background:rgba(12,16,22,.95); backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--border);
}
.brand{display:flex; gap:12px; align-items:center}
.logo{
  width:36px; height:36px; border-radius:10px;
  display:grid; place-items:center;
  background:linear-gradient(135deg, #ffffff, #e0e0e0);
  color:#000000; font-weight:900;
  box-shadow:var(--shadow);
  font-size: 20px;
}
.titles h1{margin:0; font-size:16px}
.titles .subtitle{margin:2px 0 0; color:var(--muted); font-size:12px}

.actions{display:flex; gap:8px; align-items:center}
.sync-status{
  color:var(--muted);
  font-size:14px;
  padding:8px 12px;
  background:var(--bg-elev-2);
  border:1px solid var(--border);
  border-radius:10px;
  text-decoration: none;            /* allow use on anchors */
  display: inline-flex;             /* consistent layout for <a> and <div> */
  align-items: center;
  gap: 6px;
}
.sync-status:hover{filter:brightness(1.05)}
.sync-status span{color:var(--accent); font-weight:700}
.btn{
  background:var(--accent); color:#03121b; border:0; border-radius:10px;
  padding:8px 12px; font-weight:700; cursor:pointer;
  box-shadow:var(--shadow)
}
.btn:hover{filter:brightness(1.05)}
.btn:disabled{opacity:.6; cursor:not-allowed}
.btn-secondary{background:transparent; color:var(--text); border:1px solid var(--border)}
.btn-icon{width:36px; height:36px; padding:0; display:grid; place-items:center; border-radius:10px}

.app-main{
  /* Two-column layout: left fixed sidebar for Filters, right content area */
  display:grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap:16px;

  /* Center the entire main content area and constrain its width to match footer */
  max-width: calc(1100px + 320px + 16px); /* results max-width + sidebar + gap */
  width: calc(100% - 32px);
  margin: 0 auto;
  padding:16px 0;
  padding-top: 85px; /* space below sticky header */

  /* Allow main to expand and push footer to bottom on short content */
  flex: 1 0 auto;
}

/* Results area fills its grid cell */
.results{
  width: 100%;
}
@media (max-width: 900px){
  /* Collapse to single column */
  .app-main{
    grid-template-columns: 1fr;
    padding-top: 100px; /* add extra space so filters clear fixed header comfortably */
  }

  /* Ensure Filters+Summary (aside.filters) appears ABOVE results when stacked */
  .filters{
    /* Use a negative order so it comes before .results in narrow viewports */
    order:-1;
    margin-top: 8px; /* small separation under header in single-column */
  }
}

.panel{
  background:linear-gradient(180deg, var(--bg-elev) 0%, var(--bg-elev-2) 100%);
  border:1px solid var(--border);
  border-radius:14px; padding:14px; box-shadow:var(--shadow);
  margin-bottom:16px;
}
.panel-header{display:flex; align-items:center; justify-content:space-between}
.panel h2{margin:0 0 8px}
.field{display:flex; flex-direction:column; gap:6px; margin:10px 0}
.field.two{display:grid; grid-template-columns:1fr 1fr; gap:10px}
label{color:var(--muted); font-size:12px}
input[type="search"], input[type="text"], input[type="date"], select{
  background:#0f1722; border:1px solid var(--border); color:var(--text);
  padding:10px 12px; border-radius:10px; outline:none;
}
input::placeholder{color:#6d7c91}

.link{background:none; border:0; color:var(--accent); cursor:pointer; padding:0}

.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--chip); border:1px solid var(--border); padding:6px 10px; border-radius:999px;
  user-select:none; cursor:pointer;
}
.chip input{accent-color:var(--accent)}
.panel-collapsible summary{cursor:pointer; color:var(--accent)}
.panel.stats ul{list-style:none; padding:0; margin:0; display:grid; gap:6px}
.panel.stats li{display:flex; align-items:center; justify-content:space-between; padding:6px 10px; background:#0f1722; border:1px solid var(--border); border-radius:10px}

.results .toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  position:relative;
  padding:10px 12px; margin-bottom: 12px;
  border:1px solid var(--border); border-radius:12px;
  background:var(--bg-elev); /* Solid background instead of transparent */
}
.count{color:var(--muted)}
.ml{margin-left:10px}

.card-grid{
  margin-top:12px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
  justify-items: stretch;
}
@media (max-width:1200px){ .card-grid{grid-template-columns: repeat(2, 1fr)} }
@media (max-width:750px){ .card-grid{grid-template-columns: 1fr} }

.card{
  display:grid; grid-template-columns: 56px 1fr; gap:12px;
  background:linear-gradient(180deg, #0f1722, #0c1622);
  border:1px solid var(--border); border-radius:14px; padding:12px; box-shadow:var(--shadow);
  cursor:pointer;
  transition: transform .08s ease-out, border-color .12s ease-out, box-shadow .12s ease-out, background .12s ease-out;
}
.card:hover{
  transform: translateY(-2px);
  border-color:#35507a;
  box-shadow: 0 10px 24px rgba(0,0,0,.45);
  background:linear-gradient(180deg, #102034, #0c1724);
}
.card:focus{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
.avatar{
  width:56px; height:56px; border-radius:12px; background:linear-gradient(135deg, #1c2740, #0e2034);
  display:grid; place-items:center; color:#95b8ff; font-weight:900
}
.card h3{margin:0 0 4px; font-size:15px}
.meta{display:flex; gap:10px; flex-wrap:wrap; color:var(--muted); font-size:12px}
.badges{display:flex; gap:8px; margin-top:8px; flex-wrap:wrap}
.badge{
  font-size:11px; padding:4px 8px; border-radius:999px; background:#132238; border:1px solid var(--border); color:#a7c8ff
}
.badge.ok{background:#0f291a; color:#a6f5c7; border-color:#1b5e37}
.badge.warn{background:#2a260f; color:#ffe89a; border-color:#5f5016}

/* Removed explicit action row/button usage in cards; keep spacing if present elsewhere */
.actions-row{display:none}
.card .btn{display:none}

.table{
  width:100%; border-collapse:separate; border-spacing:0; margin-top:12px; background:#0f1722; border:1px solid var(--border); border-radius:12px; overflow:hidden
}
.table thead th{
  text-align:left; font-weight:700; color:#b8c8db; background:#111a26; border-bottom:1px solid var(--border); padding:10px
}
.table tbody td{padding:10px; border-bottom:1px solid #1a2636}
.table tbody tr:hover{background:#0e1a2a}

.pager{
  display:flex; justify-content:center; align-items:center; gap:12px; padding:14px
}

dialog{
  border:0; padding:0; background:transparent;
}
/* Darker backdrop for stronger separation */
dialog::backdrop{background:rgba(2, 6, 23, 0.78)}
/* Inmate detail modal: increase contrast across surface, text, borders */
.detail{
  position:relative;
  z-index:0; /* create stacking context for sticky header to sit above content */
  isolation:isolate; /* isolate stacking so header z-index reliably sits on top */
  display:flex;
  flex-direction:column;
  width:min(900px, 92vw);
  max-height:85vh;
  overflow:hidden; /* header and tabs stay fixed; body scrolls */
  background:#0b1220; /* deeper slate for better contrast with text */
  border:1px solid #334155; /* slate-600 */
  border-radius:16px; box-shadow:0 20px 40px rgba(0,0,0,.6); padding:16px;
  color:#e5e7eb; /* make body text brighter */
}
.detail h1,.detail h2,.detail h3,.detail h4{color:#ffffff}
.detail-header{display:grid; grid-template-columns:80px 1fr; gap:12px; align-items:center; margin-bottom:6px}
.detail .avatar{width:80px; height:80px; border-radius:16px}
.detail .kv{list-style:none; padding:0; margin:0; display:grid; grid-template-columns: repeat(2, 1fr); gap:8px}
.detail .kv li{
  display:flex; justify-content:space-between; gap:8px;
  padding:10px 12px;
  background:#101827; /* slightly lighter than surface for separation */
  border:1px solid #475569; /* slate-500 */
  border-radius:10px;
  color:#e5e7eb;
}
.detail .kv .label,.detail .meta,.detail .muted{color:#cbd5e1}
.accordion{display:grid; gap:10px}
.booking{
  border:1px solid #475569; border-radius:12px; padding:12px;
  background:#0e1626; color:#e5e7eb;
}
.booking h4{margin:0 0 8px; color:#f1f5f9}
.kv-mini{list-style:none; padding:0; margin:0; display:grid; grid-template-columns: repeat(3, 1fr); gap:6px}
.kv-mini li{
  display:flex; justify-content:space-between; gap:6px;
  padding:8px 10px; background:#101827; border:1px solid #475569; border-radius:8px; color:#e5e7eb
}
/* Table contrast inside modal */
.detail .table{
  background:#0e1626; border-color:#475569;
}
.detail .table thead th{
  background:#111827; color:#f1f5f9; border-bottom:1px solid #64748b;
}
.detail .table tbody td{border-bottom:1px solid #334155}
.detail .table tbody tr:hover{background:#0f1a2c}
/* Buttons and chips in modal */
.detail .btn,.detail .btn-secondary,.detail .btn-icon{
  border:1px solid #64748b; color:#e5e7eb; background:#1f2937;
}
.detail .btn:hover,.detail .btn-secondary:hover,.detail .btn-icon:hover{
  background:#374151; border-color:#94a3b8;
}
/* Close button higher contrast */
.close{
  position:absolute; right:16px; top:16px; width:36px; height:36px; border-radius:10px;
  border:1px solid #64748b;
  background:#1f2735; color:#f8fafc; cursor:pointer;
  z-index:20;
}
.close:hover{background:#2a3446; border-color:#94a3b8}

/* Tabs inside detail modal */
.tablist{
  display:flex;
  gap:8px;
  padding:0 4px;            /* remove extra bottom padding under tabs */
  border-bottom:1px solid #334155;
  margin-bottom:0;           /* eliminate extra gap below tabs */
}
.tab{
  appearance:none;
  border:1px solid #334155;
  background:#0f1722;
  color:#e5e7eb;
  padding:8px 12px;
  border-radius:8px 8px 0 0;
  cursor:pointer;
  font-weight:600;
}
.tab[aria-selected="true"]{
  background:#111a2a;
  border-bottom-color:#111a2a;
  color:#ffffff;
}
.tab:hover{
  filter:brightness(1.05);
}
.tabpanel{padding:4px 0}

/* Sticky header inside detail dialog for better orientation */
.detail-header.sticky{
  position:sticky;
  top:0;
  z-index:10000; /* ensure header and its close button stay above scrolling content */
  padding-bottom:0;   /* tighten space below tabs/header */
  margin-bottom:0;    /* remove extra gap between header and body */
  background:#0b1220;
  border-bottom:none; /* let tablist provide the divider */
  will-change: transform;
  transform: translateZ(0); /* promote to its own layer to avoid overlap artifacts */
  box-shadow: 0 2px 0 rgba(51,65,85,.6); /* subtle divider to emphasize separation */
}

/* Quick badges under name */
.quick-badges{margin-top:6px}
.quick-badges .badge{background:#132238; border:1px solid #334155; color:#a7c8ff}

/* Ensure sticky header always paints above scrolled content */
.detail .detail-body{
  position:relative;
  z-index:0;
  overflow:auto;     /* make only the body scroll */
  flex:1;            /* fill remaining height beneath header/tabs */
  min-height:0;      /* enable proper flex overflow scrolling */
}
.detail .tabpanel,
.detail .accordion,
.detail .booking,
.detail .table,
.detail .table-wrap{
  position:relative;
  z-index:1;         /* keep content under header */
  transform: translateZ(0); /* avoid odd painting above sticky */
}

/* Chart layout helpers for Metrics page */
.chart-block{
  position: relative;
  width: 100%;
  height: 220px; /* charts take fixed, responsive height; canvas fills parent */
}
.chart-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
@media (max-width: 900px){
  .chart-row{ grid-template-columns: 1fr; }
}

/* Horizontal scroll for wide tables within the modal */
.table-wrap{overflow-x:auto; border-radius:8px}
.table-wrap .table{min-width:720px}

/* Responsive adjustments for key-value grids */
@media (max-width: 950px){
  .kv-mini{grid-template-columns: repeat(2, 1fr)}
}
@media (max-width: 700px){
  .detail .kv{grid-template-columns:1fr}
  .kv-mini{grid-template-columns:1fr}
}

/* Footer aligned with main content area */
 .app-footer{
   width: 100%;
   padding: 0;
   color:#b7c4d6;
   background:#0e1420;
   border-top: 1px solid var(--border);
 }

 .app-footer .app-footer-inner{
   max-width: calc(1100px + 320px + 16px); /* match .app-main max width */
   width: calc(100% - 32px);               /* match side padding with main */
   margin: 0 auto;
   display:flex;
   align-items:center;
   justify-content:center;
   gap:8px;
   flex-wrap:wrap;
   padding: 10px 0; /* vertical spacing */
 }

 .app-footer .separator{
   color: var(--muted);
   opacity:.8;
   margin: 0 6px;
 }
 
  
 

/* --- Card standardization: uniform height and clamping --- */
:root{
  --card-height: 192px; /* tweak as needed: 180–220px */
}

@media (max-width: 750px){
  :root{ --card-height: 176px; }
}

/* Keep all cards the same height to prevent pager jumping */
.card{
  height: var(--card-height, 192px);
  overflow: hidden; /* clip overly long content */
}

/* Trim long names to a single line */
.card h3{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Limit meta text to ~2 lines */
.card .meta{
  max-height: 2.9em; /* approx 2 lines given current line-height */
  overflow: hidden;
}

/* Keep badges to a single visible row with a subtle fade on overflow */
.card .badges{
  max-height: 2.2em; /* one row of chips */
  overflow: hidden;
  position: relative;
}

/* Right-edge fade to indicate overflowed badges */
.card .badges::after{
  content: "";
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 32px;
  background: linear-gradient(90deg, rgba(0,0,0,0), #0c1622);
  pointer-events: none;
}

/* Remove badges fade overlay to avoid hover gradient artifact on card hover */
.card .badges::after{ content:none; }

/* Ensure grid text column can shrink so long names ellipsize inside the card */
.card > *:nth-child(2){
  min-width: 0;              /* critical for truncation inside CSS Grid */
  display: flex;
  flex-direction: column;
}

/* Reinforce single-line truncation for names inside grid/flex */
.card h3{
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Card info rows for facility and booking timeline */
.card .info{
  display:flex;
  align-items:center;
  gap:8px;
  color: var(--muted);
  font-size:12px;
  margin-top:6px;
}
.card .info .icon{ opacity:.85 }
.card .info .text{
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Timeline styling: compact, numeric-aligned dates */
.card .timeline .date{ font-variant-numeric: tabular-nums }
.card .timeline .arrow{ opacity:.7; margin: 0 6px }

/* Push badges to the bottom of the text column for consistent spacing */
.card > *:nth-child(2) .badges{ margin-top:auto }

/* Global muted utility for subtle secondary text (used in card timeline) */
.muted{ color: var(--muted); }