/* ===================================================================
   style.css — POV: "analytical glass console" — a deep charcoal-indigo
   canvas, amber accent for numerology signal, teal for secondary data.
   Data-dense but calm: glass panels, generous rhythm, no gradients.
=================================================================== */

:root{
  --canvas:#11141B;
  --canvas-2:#161A24;
  --panel:rgba(255,255,255,0.045);
  --panel-border:rgba(255,255,255,0.08);
  --ink:#EDEFF4;
  --ink-soft:rgba(237,239,244,0.66);
  --ink-faint:rgba(237,239,244,0.4);
  --amber:#E4A94A;
  --amber-wash:rgba(228,169,74,0.12);
  --teal:#4DBFB0;
  --red:#E2685C;
  --green:#5FBF83;

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;

  --radius-sm:6px; --radius-md:10px; --radius-lg:16px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--canvas); color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:14px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
body.modal-open{overflow:hidden;}
::selection{background:var(--amber); color:#1a1305;}
::-webkit-scrollbar{width:10px; height:10px;}
::-webkit-scrollbar-track{background:var(--canvas);}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.14); border-radius:6px;}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.22);}
:focus-visible{outline:2px solid var(--amber); outline-offset:2px; border-radius:2px;}
h1,h2,h3{margin:0; font-weight:700; letter-spacing:-0.01em;}
p{margin:0;}
button{font-family:inherit;}

.glass{
  background:var(--panel);
  border:1px solid var(--panel-border);
  border-radius:var(--radius-lg);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  box-shadow:0 1px 0 rgba(255,255,255,0.04) inset, 0 12px 32px rgba(0,0,0,0.28);
}

/* ---------- shell ---------- */
.app-shell{display:grid; grid-template-columns:1fr; min-height:100vh;}
@media(min-width:960px){ .app-shell{grid-template-columns:260px 1fr;} }

.topbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-4);
  padding:var(--space-4) var(--space-5);
  background:rgba(17,20,27,0.86); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--panel-border);
  grid-column:1 / -1;
}
.brand{display:flex; align-items:center; gap:var(--space-3);}
.brand-mark{display:grid; grid-template-columns:repeat(3,1fr); gap:2px; width:20px;}
.brand-mark span{aspect-ratio:1; border:1px solid var(--amber);}
.brand-mark span.lit{background:var(--amber); border-color:var(--amber);}
.brand-title{font-size:15px; font-weight:700;}
.brand-title small{display:block; font-size:11px; font-weight:500; color:var(--ink-faint); letter-spacing:0.04em; text-transform:uppercase;}

.topbar-actions{display:flex; gap:var(--space-2); flex-wrap:wrap; align-items:center;}

.btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px; border-radius:var(--radius-sm);
  border:1px solid var(--panel-border); background:rgba(255,255,255,0.04);
  color:var(--ink); font-size:13px; font-weight:600; cursor:pointer;
  transition:transform 180ms var(--ease), background 180ms var(--ease), border-color 180ms var(--ease);
}
.btn:hover{background:rgba(255,255,255,0.08); transform:translateY(-1px);}
.btn:active{transform:translateY(0);}
.btn:disabled{opacity:0.45; cursor:not-allowed; transform:none;}
.btn-primary{background:var(--amber); border-color:var(--amber); color:#1a1305;}
.btn-primary:hover{background:#eeb862;}
.btn-ghost{background:transparent;}

/* ---------- sidebar / filters ---------- */
.sidebar{
  position:sticky; top:65px; align-self:start;
  max-height:calc(100vh - 65px); overflow-y:auto;
  padding:var(--space-4); border-right:1px solid var(--panel-border);
  display:none;
}
@media(min-width:960px){ .sidebar{display:block;} }

.filter-group{margin-bottom:var(--space-3);}
.filter-group h4{
  font-size:11px; text-transform:uppercase; letter-spacing:0.06em;
  color:var(--ink-faint); margin-bottom:var(--space-2); font-weight:700;
}
.filter-row{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-2); margin-bottom:var(--space-2);}
.filter-row.two-col{grid-template-columns:1fr 1fr;}
.filter-row.one-col{grid-template-columns:1fr;}

label.field-label{font-size:11px; color:var(--ink-soft); margin-bottom:2px; display:block;}
select, input[type="text"], input[type="number"], input[type="search"]{
  width:100%; padding:6px 8px; border-radius:var(--radius-sm);
  border:1px solid var(--panel-border); background:rgba(255,255,255,0.04);
  color:var(--ink); font-size:12px; transition:border-color 180ms var(--ease);
}
select:focus, input:focus{border-color:var(--amber); outline:none;}

/* Collapsible filter sections keep the panel short by default. */
.filter-section{border-bottom:1px solid var(--panel-border); padding:var(--space-3) 0;}
.filter-section:first-child{padding-top:0;}
.filter-section summary{
  cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between;
  font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-soft); font-weight:700;
  padding:2px 0;
}
.filter-section summary::-webkit-details-marker{display:none;}
.filter-section summary::after{content:'+'; font-size:14px; color:var(--ink-faint); font-weight:400;}
.filter-section[open] summary::after{content:'–';}
.filter-section .filter-section-body{margin-top:var(--space-3);}

/* ---------- main content ---------- */
.main{padding:var(--space-5); min-width:0;}
.search-row{display:flex; gap:var(--space-3); margin-bottom:var(--space-5); align-items:center;}
.search-row input{flex:1; padding:10px 14px; font-size:14px;}

.status-bar{
  padding:10px 14px; border-radius:var(--radius-sm); margin-bottom:var(--space-4);
  font-size:13px; border:1px solid var(--panel-border);
}
.status-bar--info{background:rgba(77,191,176,0.08); border-color:rgba(77,191,176,0.3); color:var(--teal);}
.status-bar--warn{background:var(--amber-wash); border-color:rgba(228,169,74,0.35); color:var(--amber);}
.status-bar--success{background:rgba(95,191,131,0.1); border-color:rgba(95,191,131,0.35); color:var(--green);}
.status-bar--error{background:rgba(226,104,92,0.1); border-color:rgba(226,104,92,0.35); color:var(--red);}

.stat-cards{
  display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-3); margin-bottom:var(--space-5);
}
@media(min-width:640px){ .stat-cards{grid-template-columns:repeat(3,1fr);} }
@media(min-width:1200px){ .stat-cards{grid-template-columns:repeat(6,1fr);} }
.stat-card{
  padding:var(--space-4); border-radius:var(--radius-md);
  background:var(--panel); border:1px solid var(--panel-border);
  display:flex; flex-direction:column; gap:4px;
}
.stat-card--warn{border-color:rgba(228,169,74,0.4);}
.stat-value{font-size:26px; font-weight:700; font-variant-numeric:tabular-nums;}
.stat-label{font-size:12px; color:var(--ink-faint);}

/* ---------- table ---------- */
.table-wrap{
  border-radius:var(--radius-lg); overflow:auto; max-height:64vh;
  background:var(--panel); border:1px solid var(--panel-border);
}
table{width:100%; border-collapse:collapse; font-size:13px; min-width:1100px;}
thead th{
  position:sticky; top:0; z-index:2; text-align:left; padding:10px 12px;
  background:var(--canvas-2); border-bottom:1px solid var(--panel-border);
  font-size:11px; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-faint);
  white-space:nowrap;
}
th.sortable{cursor:pointer; user-select:none;}
th.sortable:hover{color:var(--ink);}
.sort-arrow::after{content:'↕'; opacity:0.4; margin-left:4px;}
th.sorted-asc .sort-arrow::after{content:'↑'; opacity:1; color:var(--amber);}
th.sorted-desc .sort-arrow::after{content:'↓'; opacity:1; color:var(--amber);}

tbody td{padding:9px 12px; border-bottom:1px solid rgba(255,255,255,0.05); white-space:nowrap;}
tbody tr{cursor:pointer; transition:background 120ms var(--ease);}
tbody tr:hover{background:rgba(228,169,74,0.06);}
.cell-name{font-weight:600;}
.empty-state{text-align:center; padding:var(--space-7) !important; color:var(--ink-faint); cursor:default;}
.empty-state:hover{background:transparent !important;}

.row-photo{width:28px; height:28px; border-radius:50%; object-fit:cover; display:block;}
.row-photo--empty{
  display:flex; align-items:center; justify-content:center;
  background:var(--amber-wash); color:var(--amber); font-weight:700; font-size:12px;
}

.pagination{display:flex; align-items:center; justify-content:space-between; margin-top:var(--space-4); flex-wrap:wrap; gap:var(--space-3);}
.pagination-summary{font-size:12px; color:var(--ink-faint);}
.pagination-buttons{display:flex; gap:4px;}
.page-btn{
  min-width:32px; padding:6px 10px; border-radius:var(--radius-sm);
  border:1px solid var(--panel-border); background:transparent; color:var(--ink-soft);
  cursor:pointer; font-size:12px; transition:background 150ms var(--ease);
}
.page-btn:hover:not(:disabled){background:rgba(255,255,255,0.06);}
.page-btn.is-active{background:var(--amber); border-color:var(--amber); color:#1a1305; font-weight:700;}
.page-btn:disabled{opacity:0.35; cursor:not-allowed;}

/* ---------- loading spinner / progress ---------- */
.loading-spinner{
  display:none; align-items:center; gap:var(--space-3);
  position:fixed; bottom:var(--space-5); right:var(--space-5); z-index:80;
  padding:12px 18px; border-radius:999px; background:var(--canvas-2);
  border:1px solid var(--panel-border); box-shadow:0 12px 32px rgba(0,0,0,0.4);
}
.spinner-ring{
  width:18px; height:18px; border-radius:50%;
  border:2px solid rgba(228,169,74,0.25); border-top-color:var(--amber);
  animation:spin 800ms linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}
.spinner-label{font-size:13px; color:var(--ink-soft);}
@media(prefers-reduced-motion:reduce){ .spinner-ring{animation:none;} }

/* ---------- modal (shared: detail + csv) ---------- */
.modal-overlay{
  display:none; position:fixed; inset:0; z-index:90;
  background:rgba(8,9,13,0.7); backdrop-filter:blur(4px);
  align-items:flex-start; justify-content:center; padding:var(--space-6) var(--space-4); overflow-y:auto;
}
.modal-overlay.is-open{display:flex;}
.modal-panel{
  width:100%; max-width:880px; background:var(--canvas-2);
  border:1px solid var(--panel-border); border-radius:var(--radius-lg);
  padding:var(--space-6); position:relative;
}
.modal-close{
  position:absolute; top:var(--space-4); right:var(--space-4);
  width:32px; height:32px; border-radius:50%; border:1px solid var(--panel-border);
  background:transparent; color:var(--ink-soft); cursor:pointer; font-size:16px;
}
.modal-close:hover{background:rgba(255,255,255,0.08); color:var(--ink);}

.modal-header{display:flex; gap:var(--space-4); align-items:center; margin-bottom:var(--space-5);}
.modal-photo{
  width:64px; height:64px; border-radius:50%; object-fit:cover;
  background:var(--amber-wash); color:var(--amber); font-weight:700; font-size:22px;
  display:flex; align-items:center; justify-content:center; flex:none;
}
.modal-section{padding-top:var(--space-5); border-top:1px solid var(--panel-border); margin-top:var(--space-5);}
.modal-section h3{font-size:13px; text-transform:uppercase; letter-spacing:0.05em; color:var(--amber); margin-bottom:var(--space-4);}
.modal-stat-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-3);}
@media(min-width:640px){ .modal-stat-grid{grid-template-columns:repeat(4,1fr);} }
.modal-stat{
  padding:var(--space-3); border-radius:var(--radius-md);
  background:rgba(255,255,255,0.03); border:1px solid var(--panel-border);
}
.modal-stat-label{display:block; font-size:11px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:0.03em;}
.modal-stat-value{display:block; font-size:20px; font-weight:700; margin-top:2px;}
.modal-stat-sub{display:block; font-size:11px; color:var(--ink-soft); margin-top:2px;}

.letter-grid{display:flex; flex-wrap:wrap; gap:6px;}
.letter-cell{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:6px 8px; border-radius:var(--radius-sm); background:rgba(255,255,255,0.03); border:1px solid var(--panel-border); min-width:38px;
}
.letter-char{font-weight:700; font-size:13px;}
.letter-value{font-size:11px; color:var(--teal);}
.letter-running{font-size:10px; color:var(--ink-faint);}

.dual-panel{display:grid; grid-template-columns:1fr; gap:var(--space-5);}
@media(min-width:640px){ .dual-panel{grid-template-columns:1fr 1fr;} }
.metric-label{font-size:12px; color:var(--ink-faint); margin-bottom:8px;}
.muted{color:var(--ink-faint); font-size:12px;}

.loshu-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:4px; max-width:220px;}
.loshu-cell{
  aspect-ratio:1; border:1px solid var(--panel-border); border-radius:var(--radius-sm);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  background:rgba(255,255,255,0.02);
}
.loshu-cell.is-filled{border-color:var(--amber); background:var(--amber-wash);}
.loshu-digits{font-weight:700; font-size:14px; letter-spacing:1px;}
.loshu-element{font-size:9px; color:var(--ink-faint); text-transform:uppercase;}

.chip-row{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:var(--space-3);}
.chip{padding:4px 10px; border-radius:999px; font-size:11px; border:1px solid var(--panel-border);}
.chip--good{color:var(--green); border-color:rgba(95,191,131,0.4); background:rgba(95,191,131,0.08);}
.chip--muted{color:var(--ink-faint);}

.kua-wheel{width:100%; max-width:200px;}
.kua-wheel-ring{fill:none; stroke:var(--panel-border); stroke-width:1;}
.kua-node-good circle{fill:rgba(95,191,131,0.12); stroke:var(--green);}
.kua-node-avoid circle{fill:rgba(255,255,255,0.03); stroke:var(--panel-border);}
.kua-node-dir{font-size:11px; font-weight:700; fill:var(--ink); text-anchor:middle;}
.kua-node-label{font-size:8px; fill:var(--ink-faint); text-anchor:middle; text-transform:uppercase;}
.kua-center-label{font-size:10px; fill:var(--ink-faint); text-anchor:middle;}
.kua-center-number{font-size:20px; font-weight:700; fill:var(--amber); text-anchor:middle;}

/* ---------- CSV import modal ---------- */
.csv-report-row{padding:8px 0; border-bottom:1px solid var(--panel-border); font-size:13px;}
.csv-report-row--ok strong{color:var(--green);}
.csv-preview{width:100%; border-collapse:collapse; margin-top:var(--space-4); font-size:12px;}
.csv-preview th, .csv-preview td{padding:6px 8px; border-bottom:1px solid var(--panel-border); text-align:left;}
.csv-errors{margin-top:var(--space-4); font-size:12px; color:var(--red);}
.csv-errors ul{margin:8px 0 0; padding-left:18px;}
#confirmImportBtn{margin-top:var(--space-5);}

.mobile-filter-toggle{display:inline-flex;}
@media(min-width:960px){ .mobile-filter-toggle{display:none;} }

/* Fix: this div must never participate in the desktop grid layout —
   without this base rule it silently occupies the sidebar's grid
   column and pushes everything else out of place. */
.sidebar-scrim{display:none;}

@media(max-width:959px){
  .sidebar{
    display:none; position:fixed; top:0; left:0; bottom:0; z-index:95;
    width:300px; max-width:85vw; max-height:none; background:var(--canvas-2);
    box-shadow:20px 0 40px rgba(0,0,0,0.4);
  }
  .sidebar.is-open{display:block;}
  .sidebar-scrim{display:none; position:fixed; inset:0; z-index:94; background:rgba(0,0,0,0.5);}
  .sidebar-scrim.is-open{display:block;}
}