/* =====================================================================
   Shorts Chart Studio — admin console
   Bahasa desain sengaja disamakan dengan "stage" (lihat stage.css):
   panel gelap, border tipis, mono untuk data, gold untuk aksen aksi.
===================================================================== */

:root{
  --bg-0:#05070C;
  --bg-1:#0A0F18;
  --panel:#0E1420;
  --panel-hi:#121A28;
  --grid:#1A2330;
  --text-hi:#EEF3F8;
  --text-mid:#8B97A8;
  --text-low2:#5B6676;
  --up:#22E6B7;
  --up-dim:#0E5245;
  --down:#FF4F64;
  --down-dim:#5A1A24;
  --gold:#F2B441;
  --gold-dim:#3A2C10;
  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:9px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }

body{
  background:
    radial-gradient(circle at 18% -10%, #101826 0%, var(--bg-1) 42%, var(--bg-0) 100%) fixed;
  color:var(--text-hi);
  font-family:'Archivo', sans-serif;
  font-size:15px;
  line-height:1.5;
  min-height:100vh;
}

a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }

::selection{ background:var(--gold); color:#1a1305; }

/* ---------------- topbar ---------------- */
.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 32px;
  background:rgba(5,7,12,.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--grid);
}
.brand{ display:flex; flex-direction:column; gap:2px; }
.brand-eyebrow{
  font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:3px;
  color:var(--gold); text-transform:uppercase;
}
.brand-name{
  font-family:'Archivo Expanded', sans-serif; font-weight:900; font-size:21px;
  letter-spacing:-.3px;
}
.topbar-actions{ display:flex; align-items:center; gap:10px; }

/* ---------------- shell / layout ---------------- */
.shell{
  max-width:1180px; margin:0 auto; padding:36px 32px 96px;
}
.shell-narrow{ max-width:880px; }

.page-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:20px;
  margin-bottom:28px; flex-wrap:wrap;
}
.page-head h1{
  font-family:'Archivo Expanded', sans-serif; font-weight:900; font-size:32px;
  letter-spacing:-.5px; margin:0;
}
.page-head p{ margin:6px 0 0; color:var(--text-mid); font-size:14.5px; }
.crumb{
  font-family:'JetBrains Mono', monospace; font-size:12.5px; color:var(--text-mid);
  display:inline-flex; align-items:center; gap:8px; margin-bottom:14px;
}
.crumb:hover{ color:var(--text-hi); }

/* ---------------- flash message ---------------- */
.flash{
  padding:14px 18px; border-radius:var(--radius-sm); margin-bottom:24px;
  font-size:14px; border:1px solid transparent;
}
.flash-success{ background:var(--up-dim); border-color:var(--up); color:var(--up); }
.flash-error{ background:var(--down-dim); border-color:var(--down); color:var(--down); }

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:'Archivo', sans-serif; font-weight:700; font-size:14px;
  padding:12px 20px; border-radius:100px; border:1px solid var(--grid);
  background:var(--panel); color:var(--text-hi);
  cursor:pointer; transition:border-color .15s, transform .1s, background .15s;
  white-space:nowrap;
}
.btn:hover{ border-color:var(--text-low2); }
.btn:active{ transform:scale(.97); }
.btn-primary{ background:var(--gold); border-color:var(--gold); color:#1a1305; }
.btn-primary:hover{ background:#ffc55c; border-color:#ffc55c; }
.btn-danger{ color:var(--down); }
.btn-danger:hover{ border-color:var(--down); }
.btn-ghost{ background:transparent; }
.btn-sm{ padding:8px 14px; font-size:12.5px; border-radius:100px; }
.btn-icon{ padding:8px 10px; }
.btn[disabled]{ opacity:.4; cursor:not-allowed; }
.btn-block{ width:100%; }

/* ---------------- panel ---------------- */
.panel{
  background:linear-gradient(180deg, var(--panel), var(--bg-1));
  border:1px solid var(--grid);
  border-radius:var(--radius-lg);
  padding:28px 28px 30px;
  margin-bottom:24px;
}
.panel-header{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin-bottom:20px; flex-wrap:wrap;
}
.panel-eyebrow{
  font-family:'JetBrains Mono', monospace; font-size:12px; letter-spacing:2.5px;
  color:var(--gold); text-transform:uppercase; margin:0 0 6px;
}
.panel-title{ font-family:'Archivo', sans-serif; font-weight:700; font-size:19px; margin:0; }
.panel-desc{ color:var(--text-mid); font-size:13.5px; margin:4px 0 0; }

/* ---------------- form fields ---------------- */
.field{ margin-bottom:18px; }
.field label{
  display:block; font-size:12.5px; font-weight:700; color:var(--text-mid);
  text-transform:uppercase; letter-spacing:1px; margin-bottom:8px;
  font-family:'JetBrains Mono', monospace;
}
.field .hint{
  font-size:12px; color:var(--text-low2); margin-top:6px; font-family:'Archivo', sans-serif;
  text-transform:none; letter-spacing:0;
}
input[type=text], input[type=number], input[type=datetime-local], select, textarea{
  width:100%; background:var(--bg-1); border:1px solid var(--grid); color:var(--text-hi);
  padding:12px 14px; border-radius:var(--radius-sm); font-size:14.5px; font-family:'Archivo', sans-serif;
  transition:border-color .15s;
}
input[type=datetime-local], input[type=number]{ font-family:'JetBrains Mono', monospace; }
input:focus, select:focus, textarea:focus{
  outline:none; border-color:var(--gold);
}
input::placeholder, textarea::placeholder{ color:var(--text-low2); }
select{ cursor:pointer; }

.form-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:0 20px; }
.form-grid .field-full{ grid-column:1 / -1; }
@media (max-width:720px){ .form-grid{ grid-template-columns:1fr; } }

.form-actions{ display:flex; justify-content:flex-end; gap:12px; margin-top:6px; }

.check-field{ display:flex; align-items:center; gap:10px; }
.check-field input[type=checkbox]{ width:18px; height:18px; accent-color:var(--gold); }
.check-field label{ margin:0; text-transform:none; font-family:'Archivo',sans-serif; font-weight:600; color:var(--text-hi); letter-spacing:0; font-size:14px; }

/* ---------------- dashboard: chart cards ---------------- */
.chart-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:18px;
}
.chart-card{
  background:linear-gradient(180deg, var(--panel), var(--bg-1));
  border:1px solid var(--grid); border-radius:var(--radius-lg);
  padding:22px; display:flex; flex-direction:column; gap:16px;
  transition:border-color .15s;
}
.chart-card:hover{ border-color:var(--text-low2); }
.chart-card-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.chart-card-eyebrow{
  font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:2px;
  color:var(--text-mid); text-transform:uppercase;
}
.chart-card-asset{
  font-family:'Archivo Expanded', sans-serif; font-weight:900; font-size:30px;
  letter-spacing:-.5px; margin-top:4px;
}
.chart-card-title{ font-size:13px; color:var(--text-mid); margin-top:2px; }

.pill{
  font-family:'JetBrains Mono', monospace; font-weight:700; font-size:13px;
  padding:6px 13px; border-radius:100px; display:inline-flex; align-items:center; gap:6px;
  white-space:nowrap;
}
.pill.up{ background:var(--up-dim); color:var(--up); border:1.5px solid var(--up); }
.pill.down{ background:var(--down-dim); color:var(--down); border:1.5px solid var(--down); }
.pill.neutral{ background:var(--panel-hi); color:var(--text-mid); border:1.5px solid var(--grid); }

.chart-card-meta{
  display:flex; gap:16px; font-family:'JetBrains Mono', monospace; font-size:12px; color:var(--text-mid);
  padding-top:14px; border-top:1px solid var(--grid);
}
.chart-card-meta b{ color:var(--text-hi); font-weight:700; }
.chart-card-actions{ display:flex; gap:8px; margin-top:auto; }
.chart-card-actions .btn{ flex:1; }

/* ---------------- empty state ---------------- */
.empty-state{
  text-align:center; padding:70px 24px; border:1px dashed var(--grid); border-radius:var(--radius-lg);
  color:var(--text-mid);
}
.empty-state h3{ color:var(--text-hi); font-size:18px; margin:0 0 8px; font-family:'Archivo',sans-serif; }
.empty-state p{ margin:0 0 20px; font-size:14px; }

/* ---------------- data grid (points / stat boxes) ---------------- */
.data-table{ width:100%; border-collapse:separate; border-spacing:0 8px; }
.data-table th{
  text-align:left; font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--text-mid);
  text-transform:uppercase; letter-spacing:1.5px; font-weight:500; padding:0 10px 6px;
}
.data-table td{ background:var(--bg-1); border-top:1px solid var(--grid); border-bottom:1px solid var(--grid); padding:8px 10px; vertical-align:middle; }
.data-table tr td:first-child{ border-left:1px solid var(--grid); border-top-left-radius:var(--radius-sm); border-bottom-left-radius:var(--radius-sm); }
.data-table tr td:last-child{ border-right:1px solid var(--grid); border-top-right-radius:var(--radius-sm); border-bottom-right-radius:var(--radius-sm); }
.data-table input[type=text], .data-table input[type=number], .data-table input[type=datetime-local]{
  padding:9px 10px; font-size:13.5px; background:transparent; border-color:transparent;
}
.data-table input:hover{ border-color:var(--grid); }
.data-table tr.is-live td{ background:#101a17; }
.data-table .row-index{ font-family:'JetBrains Mono', monospace; color:var(--text-low2); font-size:12.5px; width:34px; text-align:center; }
.data-table .row-actions{ display:flex; gap:6px; white-space:nowrap; width:1%; }
.data-table .label-preview{
  font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--text-low2);
  padding:2px 10px 0; white-space:pre-line; line-height:1.3;
}
.data-table .col-live{ width:56px; text-align:center; }
.row-status{ font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--text-low2); min-width:64px; display:inline-block; }
.row-status.is-saving{ color:var(--gold); }
.row-status.is-saved{ color:var(--up); }
.row-status.is-error{ color:var(--down); }

.table-scroll{ overflow-x:auto; margin:0 -4px; padding:0 4px; }
.table-toolbar{ display:flex; justify-content:space-between; align-items:center; margin-top:14px; gap:12px; flex-wrap:wrap; }
.table-count{ font-family:'JetBrains Mono', monospace; font-size:12px; color:var(--text-mid); }

/* ---------------- stat box mini-preview cards ---------------- */
.stat-box-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:12px; margin-top:6px; }
.stat-box-card{
  background:var(--bg-1); border:1px solid var(--grid); border-radius:var(--radius-md);
  padding:14px 16px; display:flex; flex-direction:column; gap:8px;
}
.stat-box-card .field{ margin-bottom:0; }
.stat-box-card-foot{ display:flex; align-items:center; justify-content:space-between; gap:8px; }

/* ---------------- footer preview strip ---------------- */
.preview-cta{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  background:linear-gradient(90deg, var(--gold-dim), transparent);
  border:1px solid var(--gold); border-radius:var(--radius-lg); padding:22px 26px; margin-bottom:28px;
}
.preview-cta-text b{ font-family:'Archivo Expanded',sans-serif; font-size:17px; display:block; margin-bottom:4px; }
.preview-cta-text span{ color:var(--text-mid); font-size:13.5px; }

/* ---------------- misc ---------------- */
.stack{ display:flex; flex-direction:column; gap:10px; }
.row-inline{ display:flex; align-items:center; gap:10px; }
.small-muted{ color:var(--text-mid); font-size:12.5px; }
hr.sep{ border:none; border-top:1px solid var(--grid); margin:26px 0; }

@media (max-width:640px){
  .shell{ padding:24px 16px 80px; }
  .topbar{ padding:16px 18px; }
  .page-head h1{ font-size:26px; }
}