/* FRA Prop HQ v8.0.0 — Command Centre UI
   Layout-only release. Keeps all existing IDs, data wiring and copier logic intact. */

:root{
  --v8-bg:#0a0c0d;
  --v8-sidebar:#0d1011;
  --v8-panel:#111416;
  --v8-panel-2:#15191b;
  --v8-panel-3:#191d1f;
  --v8-line:rgba(255,255,255,.075);
  --v8-line-strong:rgba(255,255,255,.12);
  --v8-text:#f2f5f3;
  --v8-muted:#8f9994;
  --v8-soft:#b9c1bd;
  --v8-lime:#c9f45b;
  --v8-lime-soft:rgba(201,244,91,.11);
  --v8-danger:#ff6b6b;
  --v8-radius:16px;
  --v8-radius-sm:11px;
  --v8-shadow:0 18px 50px rgba(0,0,0,.18);
}

/* APP FRAME */
.app-shell{
  background:var(--v8-bg)!important;
  min-height:100vh;
}
.app-shell > .sidebar{
  width:236px!important;
  background:var(--v8-sidebar)!important;
  border-right:1px solid var(--v8-line)!important;
  padding:18px 14px 16px!important;
  box-shadow:none!important;
}
.app-shell > .main-content{
  margin-left:236px!important;
  padding:0 34px 56px!important;
  background:
    radial-gradient(circle at 90% 0%, rgba(201,244,91,.035), transparent 30%),
    var(--v8-bg)!important;
}
.app-shell.sidebar-collapsed > .sidebar{width:78px!important;}
.app-shell.sidebar-collapsed > .main-content{margin-left:78px!important;}

/* SIDEBAR */
.app-shell .brand-wrap{
  min-height:58px!important;
  padding:0 6px 12px!important;
  margin:0 0 8px!important;
  border-bottom:1px solid var(--v8-line)!important;
}
.app-shell .app-brand-logo-full{max-width:158px!important;}
.app-shell .nav-list{
  gap:2px!important;
  padding:4px 0 10px!important;
  overflow-y:auto!important;
  scrollbar-width:thin;
}
.app-shell .v8-nav-label{
  margin:16px 10px 7px;
  color:#66706b;
  font-size:9px;
  font-weight:800;
  letter-spacing:.17em;
  text-transform:uppercase;
}
.app-shell .nav-item{
  min-height:38px!important;
  border-radius:9px!important;
  padding:0 10px!important;
  gap:10px!important;
  color:#9da6a1!important;
  font-size:12px!important;
  font-weight:560!important;
  border:1px solid transparent!important;
  background:transparent!important;
}
.app-shell .nav-item:hover{
  color:#e9efeb!important;
  background:rgba(255,255,255,.035)!important;
}
.app-shell .nav-item.active{
  color:#f6f9f7!important;
  background:var(--v8-lime-soft)!important;
  border-color:rgba(201,244,91,.16)!important;
  box-shadow:inset 2px 0 0 var(--v8-lime)!important;
}
.app-shell .nav-item .nav-icon,
.app-shell .nav-item > span:first-child{opacity:.78;}
.app-shell .nav-item.active .nav-icon,
.app-shell .nav-item.active > span:first-child{opacity:1;color:var(--v8-lime)!important;}
.app-shell .nav-divider{margin:11px 8px!important;border-color:var(--v8-line)!important;}
.app-shell .sidebar-feedback-button,
.app-shell .sync-card,
.app-shell .user-card{
  border:1px solid var(--v8-line)!important;
  background:rgba(255,255,255,.022)!important;
  border-radius:12px!important;
  box-shadow:none!important;
}
.app-shell .sidebar-feedback-button{margin-top:10px!important;}
.app-shell .sync-card{padding:11px!important;margin-top:9px!important;}
.app-shell .user-card{padding:10px!important;margin-top:9px!important;}
.app-shell .sidebar-collapse-button{
  border:1px solid var(--v8-line)!important;
  background:#141819!important;
  color:#9ba49f!important;
  box-shadow:none!important;
}
.app-shell.sidebar-collapsed .v8-nav-label{display:none!important;}

/* TOP BAR */
.app-shell .topbar{
  min-height:84px!important;
  position:sticky!important;
  top:0!important;
  z-index:45!important;
  background:rgba(10,12,13,.88)!important;
  backdrop-filter:blur(18px)!important;
  border-bottom:1px solid var(--v8-line)!important;
  margin:0 -34px 28px!important;
  padding:0 34px!important;
}
.app-shell .topbar h1{
  font-size:23px!important;
  line-height:1.1!important;
  letter-spacing:-.035em!important;
  color:var(--v8-text)!important;
}
.app-shell .topbar p{
  margin-top:6px!important;
  color:#77817c!important;
  font-size:11px!important;
  letter-spacing:.01em!important;
}
.app-shell .topbar-actions{gap:8px!important;}
.app-shell .topbar-actions .control,
.app-shell .topbar-actions .button{
  min-height:38px!important;
  border-radius:10px!important;
}

/* GLOBAL CONTENT RHYTHM */
.app-shell .view{max-width:1680px;margin:0 auto;}
.app-shell .section-head{
  margin:0 0 20px!important;
  align-items:flex-end!important;
  gap:20px!important;
}
.app-shell .section-head h2{
  font-size:27px!important;
  letter-spacing:-.04em!important;
  line-height:1.05!important;
  margin:4px 0 8px!important;
  color:var(--v8-text)!important;
}
.app-shell .section-head p{
  max-width:760px!important;
  color:var(--v8-muted)!important;
  font-size:12px!important;
  line-height:1.55!important;
}
.app-shell .section-kicker,
.app-shell .dashboard-eyebrow{
  color:var(--v8-lime)!important;
  font-size:9px!important;
  letter-spacing:.16em!important;
  font-weight:800!important;
}

/* PANELS */
.app-shell .panel,
.app-shell .kpi-card{
  background:var(--v8-panel)!important;
  border:1px solid var(--v8-line)!important;
  border-radius:var(--v8-radius)!important;
  box-shadow:none!important;
}
.app-shell .panel{padding:22px!important;}
.app-shell .panel-head{
  margin-bottom:18px!important;
  padding-bottom:0!important;
  border-bottom:0!important;
  gap:16px!important;
}
.app-shell .panel-head h2{
  font-size:16px!important;
  letter-spacing:-.025em!important;
  margin:0 0 5px!important;
}
.app-shell .panel-head p,
.app-shell .panel-sub{
  color:var(--v8-muted)!important;
  font-size:11px!important;
  line-height:1.5!important;
}
.app-shell .button{
  min-height:38px!important;
  padding:0 14px!important;
  border-radius:10px!important;
  font-size:11px!important;
  font-weight:700!important;
  letter-spacing:.01em!important;
  box-shadow:none!important;
}
.app-shell .button.primary{
  background:var(--v8-lime)!important;
  color:#11150f!important;
  border-color:var(--v8-lime)!important;
}
.app-shell .button.secondary,
.app-shell .button.ghost{
  background:#171b1d!important;
  color:#c4ccc8!important;
  border:1px solid var(--v8-line-strong)!important;
}
.app-shell .button.danger{
  background:rgba(255,107,107,.08)!important;
  color:#ff8b8b!important;
  border:1px solid rgba(255,107,107,.25)!important;
}
.app-shell .control,
.app-shell input,
.app-shell select,
.app-shell textarea{
  border-radius:10px!important;
  border-color:var(--v8-line-strong)!important;
  background:#0e1112!important;
  box-shadow:none!important;
}

/* TABLES — MORE BREATHING ROOM */
.app-shell .table-wrap{
  border:1px solid var(--v8-line)!important;
  border-radius:12px!important;
  overflow:auto!important;
  background:#0d1011!important;
}
.app-shell .data-table{
  border-collapse:separate!important;
  border-spacing:0!important;
}
.app-shell .data-table th{
  position:sticky;
  top:0;
  z-index:2;
  height:42px!important;
  padding:0 14px!important;
  background:#121617!important;
  color:#737e78!important;
  border-bottom:1px solid var(--v8-line)!important;
  font-size:9px!important;
  letter-spacing:.09em!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
}
.app-shell .data-table td{
  min-height:56px!important;
  padding:13px 14px!important;
  border-bottom:1px solid rgba(255,255,255,.045)!important;
  font-size:11px!important;
}
.app-shell .data-table tbody tr:last-child td{border-bottom:0!important;}
.app-shell .data-table tbody tr:hover td{background:rgba(255,255,255,.018)!important;}

/* DASHBOARD */
#view-dashboard .dashboard-welcome{
  gap:20px!important;
  margin-bottom:20px!important;
}
#view-dashboard .dashboard-welcome-copy,
#view-dashboard .zone-quote-card{
  min-height:190px!important;
  border:1px solid var(--v8-line)!important;
  border-radius:18px!important;
  background:var(--v8-panel)!important;
  box-shadow:none!important;
}
#view-dashboard .dashboard-welcome-copy{padding:28px!important;}
#view-dashboard .dashboard-welcome-copy h2{
  font-size:34px!important;
  letter-spacing:-.045em!important;
  margin:8px 0 10px!important;
}
#view-dashboard .dashboard-welcome-copy p{max-width:560px;color:var(--v8-muted)!important;}
#view-dashboard .dashboard-focus-pills{margin-top:22px!important;gap:7px!important;}
#view-dashboard .dashboard-focus-pills span{
  background:#15191a!important;
  border:1px solid var(--v8-line)!important;
  color:#8f9994!important;
  border-radius:999px!important;
  padding:7px 10px!important;
}
#view-dashboard .zone-quote-card{padding:24px!important;}
#view-dashboard .zone-quote-card blockquote{
  font-size:18px!important;
  line-height:1.45!important;
  letter-spacing:-.02em!important;
}
#view-dashboard .dashboard-terminal-strip{
  margin:0 0 14px!important;
  border-radius:12px!important;
  border:1px solid var(--v8-line)!important;
  background:#0d1011!important;
}
#view-dashboard .kpi-grid{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr))!important;
  gap:14px!important;
  margin-bottom:20px!important;
}
#view-dashboard .kpi-card{
  min-height:122px!important;
  padding:19px!important;
}
#view-dashboard .kpi-card > span:first-child{color:#737e78!important;font-size:9px!important;letter-spacing:.1em!important;}
#view-dashboard .kpi-card strong{font-size:25px!important;letter-spacing:-.04em!important;}
#view-dashboard .layout-main{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:20px!important;
}
#view-dashboard .accounts-panel{min-width:0!important;}
#view-dashboard .side-stack{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:20px!important;
}
#view-dashboard .side-stack .panel{min-height:250px!important;}

/* Dashboard is an overview: remove low-priority columns here only. Full Accounts keeps everything. */
#accountsTable th:nth-child(3), #accountsTable td:nth-child(3),
#accountsTable th:nth-child(7), #accountsTable td:nth-child(7),
#accountsTable th:nth-child(10), #accountsTable td:nth-child(10),
#accountsTable th:nth-child(11), #accountsTable td:nth-child(11),
#accountsTable th:nth-child(12), #accountsTable td:nth-child(12){display:none!important;}
#accountsTable{min-width:880px!important;}

/* ACCOUNTS */
#view-accounts > .panel{padding:0!important;overflow:hidden!important;}
#view-accounts > .panel .table-wrap{border:0!important;border-radius:0!important;}
#view-accounts #fullAccountsTable{min-width:1180px!important;}

/* TRADE COPIER — COMMAND CENTRE */
#view-copier{padding-bottom:30px!important;}
#view-copier .copier-head{
  align-items:center!important;
  padding:6px 0 2px!important;
  margin-bottom:18px!important;
}
#view-copier .copier-head h2{font-size:31px!important;}
#view-copier .copier-head .panel-actions{
  padding:8px!important;
  border:1px solid var(--v8-line)!important;
  border-radius:12px!important;
  background:#0e1112!important;
}
#view-copier .copier-worker-strip,
#view-copier .copier-beta-badge{
  min-height:32px!important;
  border-radius:9px!important;
}
#view-copier .copier-safety-banner{
  border-radius:14px!important;
  border:1px solid rgba(201,244,91,.13)!important;
  background:linear-gradient(90deg,rgba(201,244,91,.065),rgba(201,244,91,.02))!important;
  padding:15px 18px!important;
  margin-bottom:14px!important;
  box-shadow:none!important;
}
#view-copier .copier-safety-banner strong{font-size:13px!important;}
#view-copier .copier-safety-banner p{font-size:11px!important;color:var(--v8-muted)!important;margin-top:4px!important;}
#view-copier .copier-kpis{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:14px!important;
  margin-bottom:20px!important;
}
#view-copier .copier-kpis .kpi-card{
  min-height:108px!important;
  padding:18px!important;
}
#view-copier .copier-kpis .kpi-card span{font-size:9px!important;letter-spacing:.1em!important;color:#758079!important;}
#view-copier .copier-kpis .kpi-card strong{font-size:21px!important;}
#view-copier .copier-grid{
  grid-template-columns:minmax(0,1.28fr) minmax(320px,.72fr)!important;
  gap:20px!important;
  margin-bottom:20px!important;
}
#view-copier .copier-panel{padding:22px!important;}
#view-copier .copier-form-grid{gap:14px!important;}
#view-copier .copier-field span,
#view-copier .copier-test-grid label span{font-size:9px!important;letter-spacing:.08em!important;color:#77817c!important;text-transform:uppercase!important;}
#view-copier .copier-field input,
#view-copier .copier-field select,
#view-copier .copier-test-grid input,
#view-copier .copier-test-grid select{min-height:42px!important;}
#view-copier .copier-save-state{
  margin-top:14px!important;
  padding:10px 12px!important;
  background:#0d1011!important;
  border:1px solid var(--v8-line)!important;
  border-radius:10px!important;
  color:#838d88!important;
}
#view-copier .copier-mode-switch{
  padding:4px!important;
  border:1px solid var(--v8-line)!important;
  background:#0c0f10!important;
  border-radius:11px!important;
  margin-bottom:14px!important;
}
#view-copier .copier-mode-switch button{min-height:38px!important;border-radius:8px!important;}
#view-copier .copier-control-stack{gap:9px!important;}
#view-copier .copier-arm-button{min-height:48px!important;font-size:12px!important;}
#view-copier .copier-kill-button{min-height:42px!important;}
#view-copier .copier-control-note{margin-top:13px!important;color:#707a75!important;font-size:10px!important;line-height:1.5!important;}
#view-copier > .copier-panel{
  margin-bottom:20px!important;
}
#view-copier .copier-followers-head-actions{gap:8px!important;}
#view-copier .copier-table{min-width:980px!important;}
#view-copier .copier-table td{padding-top:12px!important;padding-bottom:12px!important;}
#view-copier .copier-config-note{
  margin-top:14px!important;
  padding:12px 14px!important;
  border:1px solid var(--v8-line)!important;
  background:#0d1011!important;
  border-radius:10px!important;
  color:#7e8983!important;
}
#view-copier .copier-config-note strong{color:#b8c1bc!important;}
#view-copier .settings-block{
  border:1px solid var(--v8-line)!important;
  border-radius:12px!important;
  overflow:hidden!important;
  background:#0d1011!important;
}
#view-copier .setting-row{padding:13px 14px!important;border-bottom:1px solid var(--v8-line)!important;}
#view-copier .setting-row:last-child{border-bottom:0!important;}
#view-copier .copier-log{
  min-height:220px!important;
  max-height:520px!important;
  overflow:auto!important;
  padding:4px!important;
  background:#0c0f10!important;
  border:1px solid var(--v8-line)!important;
  border-radius:12px!important;
}

/* GENERIC MULTI-COLUMN SCREENS */
.app-shell .two-col,
.app-shell .three-col,
.app-shell .day-layout,
.app-shell .trade-workspace-v619,
.app-shell .v760-score-grid,
.app-shell .v761-tilt-grid{
  gap:20px!important;
}

/* BANNERS — QUIETER */
.app-shell .macro-risk-strip,
.app-shell .guardrail-global-banner,
.app-shell .demo-banner{
  border-radius:12px!important;
  border:1px solid var(--v8-line)!important;
  box-shadow:none!important;
  margin-bottom:16px!important;
}

/* MOBILE / TABLET */
@media (max-width:1180px){
  .app-shell > .main-content{padding:0 22px 42px!important;}
  .app-shell .topbar{margin:0 -22px 24px!important;padding:0 22px!important;}
  #view-dashboard .dashboard-welcome{grid-template-columns:1fr!important;}
  #view-copier .copier-grid{grid-template-columns:1fr!important;}
  #view-dashboard .side-stack{grid-template-columns:1fr!important;}
}
@media (max-width:900px){
  .app-shell > .main-content{margin-left:0!important;padding:0 14px 34px!important;}
  .app-shell.sidebar-collapsed > .main-content{margin-left:0!important;}
  .app-shell > .sidebar{width:236px!important;}
  .app-shell .topbar{margin:0 -14px 20px!important;padding:0 14px!important;min-height:72px!important;}
  .app-shell .section-head{align-items:flex-start!important;flex-direction:column!important;}
  #view-copier .copier-kpis{grid-template-columns:1fr!important;}
  #view-dashboard .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .app-shell .panel{padding:16px!important;}
}
@media (max-width:620px){
  #view-dashboard .kpi-grid{grid-template-columns:1fr!important;}
  #view-dashboard .dashboard-welcome-copy h2{font-size:28px!important;}
  .app-shell .section-head h2{font-size:24px!important;}
  #view-copier .copier-head .panel-actions{width:100%!important;overflow-x:auto!important;}
  #view-copier .copier-panel{padding:15px!important;}
}
