/* ==========================================================================
   ELITE CELESTIAL — Control Room (Admin) styles
   Extends style.css tokens
   ========================================================================== */

body.admin-body{ background:var(--ink); }
.admin-shell{ display:grid; grid-template-columns:260px 1fr; min-height:100vh; }

.admin-sidebar{
  background:var(--ink-soft); border-right:1px solid var(--line);
  padding:1.8rem 1.2rem; position:sticky; top:0; height:100vh; display:flex; flex-direction:column;
}
.admin-brand{ font-family:var(--serif); font-size:1.15rem; padding:0 .6rem 1.6rem; border-bottom:1px solid var(--line); margin-bottom:1.4rem; }
.admin-brand .dot{ color:var(--gold); }
.admin-nav-link{
  display:flex; align-items:center; gap:.9rem; padding:.85rem .9rem; border-radius:8px;
  color:var(--silver); font-size:.88rem; margin-bottom:.2rem; transition:background var(--dur-fast), color var(--dur-fast);
  cursor:pointer;
}
.admin-nav-link svg{ width:18px; height:18px; flex-shrink:0; }
.admin-nav-link:hover{ background:rgba(243,239,230,.05); color:var(--ivory); }
.admin-nav-link.active{ background:linear-gradient(90deg, rgba(176,141,87,.18), transparent); color:var(--gold-bright); border-left:2px solid var(--gold); padding-left:calc(.9rem - 2px); }
.admin-sidebar-foot{ margin-top:auto; padding-top:1.4rem; border-top:1px solid var(--line); }
.admin-sidebar-foot a{ font-size:.82rem; color:var(--silver); display:flex; align-items:center; gap:.7rem; padding:.6rem .9rem; }
.admin-sidebar-foot a:hover{ color:var(--gold-bright); }

.admin-main{ padding:2.2rem 2.6rem 4rem; overflow-x:hidden; }
.admin-topbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:2.2rem; flex-wrap:wrap; gap:1rem; }
.admin-topbar h1{ font-size:1.7rem; }
.admin-topbar .sub{ color:var(--silver); font-size:.88rem; margin-top:.3rem; }
.admin-actions{ display:flex; gap:.8rem; align-items:center; }
.admin-search{ background:var(--ink-elev); border:1px solid var(--line-strong); border-radius:8px; padding:.6em 1em; color:var(--ivory); font-size:.85rem; width:220px; }

.admin-panel{ display:none; animation:fadeUp .5s var(--ease); }
.admin-panel.active{ display:block; }

.kpi-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; margin-bottom:2rem; }
.kpi-card{ background:var(--ink-elev); border:1px solid var(--line); border-radius:10px; padding:1.4rem; opacity:0; transform:translateY(14px); animation:kpiIn .6s var(--ease) forwards; }
.kpi-card:nth-child(1){ animation-delay:.05s; } .kpi-card:nth-child(2){ animation-delay:.15s; }
.kpi-card:nth-child(3){ animation-delay:.25s; } .kpi-card:nth-child(4){ animation-delay:.35s; }
@keyframes kpiIn{ to{ opacity:1; transform:translateY(0); } }
.kpi-card .value{ transition:color .3s; }
.kpi-card:hover{ border-color:var(--line-strong); transform:translateY(-2px); transition:transform .3s var(--ease), border-color .3s; }
.kpi-card .top{ display:flex; justify-content:space-between; align-items:flex-start; }
.kpi-card .icon-wrap{ width:38px; height:38px; border-radius:8px; background:rgba(176,141,87,.15); display:flex; align-items:center; justify-content:center; color:var(--gold-bright); }
.kpi-card .icon-wrap svg{ width:18px; height:18px; }
.kpi-card .delta{ font-size:.72rem; padding:.2em .6em; border-radius:999px; font-weight:700; }
.kpi-card .delta.up{ color:#9ad19a; background:rgba(120,180,120,.12); }
.kpi-card .delta.down{ color:#e19a80; background:rgba(217,119,87,.12); }
.kpi-card .value{ font-family:var(--serif); font-size:1.9rem; margin-top:1rem; }
.kpi-card .label{ font-size:.8rem; color:var(--silver); margin-top:.3rem; }

.panel-grid{ display:grid; grid-template-columns:1.5fr 1fr; gap:1.4rem; margin-bottom:2rem; }
.card{ background:var(--ink-elev); border:1px solid var(--line); border-radius:10px; padding:1.6rem; }
.card h3{ font-size:1.05rem; margin-bottom:1.2rem; font-weight:500; }
.card-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:1.2rem; }
.card-head h3{ margin-bottom:0; }

.admin-table-wrap{ background:var(--ink-elev); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
table.admin-table{ width:100%; border-collapse:collapse; }
table.admin-table th{ text-align:left; font-size:.72rem; letter-spacing:.05em; color:var(--gold); padding:1rem 1.2rem; background:rgba(243,239,230,.03); border-bottom:1px solid var(--line-strong); }
table.admin-table td{ padding:.9rem 1.2rem; border-bottom:1px solid var(--line); font-size:.86rem; color:var(--ivory-dim); vertical-align:middle; }
table.admin-table tr:last-child td{ border-bottom:none; }
table.admin-table tr:hover td{ background:rgba(243,239,230,.02); }
.row-thumb{ width:38px; height:46px; border-radius:4px; background:linear-gradient(200deg,var(--ink-soft),var(--aubergine)); display:inline-flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:.8rem; color:rgba(243,239,230,.3); margin-right:.8rem; vertical-align:middle; }
.table-actions{ display:flex; gap:.6rem; }
.table-actions button{ background:transparent; border:1px solid var(--line-strong); color:var(--silver); border-radius:6px; padding:.4em .7em; font-size:.78rem; transition:border-color var(--dur-fast), color var(--dur-fast); }
.table-actions button:hover{ border-color:var(--gold); color:var(--gold-bright); }
.table-actions button.danger:hover{ border-color:#d97757; color:#e19a80; }
.stock-bar{ width:70px; height:5px; background:rgba(243,239,230,.1); border-radius:3px; overflow:hidden; display:inline-block; margin-right:.5rem; vertical-align:middle; }
.stock-bar span{ display:block; height:100%; background:var(--gold); }

select.admin-select, input.admin-input{
  background:var(--ink); border:1px solid var(--line-strong); color:var(--ivory);
  border-radius:6px; padding:.5em .8em; font-size:.82rem;
}

/* modal */
.modal-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.65); z-index:3000; display:none; align-items:center; justify-content:center; padding:2rem; }
.modal-overlay.open{ display:flex; }
.modal-box{ background:var(--ink-soft); border:1px solid var(--line-strong); border-radius:12px; width:min(560px,100%); max-height:88vh; overflow-y:auto; padding:2rem; }
.modal-box h3{ font-size:1.3rem; margin-bottom:1.5rem; font-family:var(--serif); }
.modal-actions{ display:flex; gap:1rem; margin-top:1.6rem; }
.close-modal{ float:right; color:var(--silver); cursor:pointer; }

.settings-form .form-field label{ color:var(--ivory-dim); }
.toggle-row{ display:flex; justify-content:space-between; align-items:center; padding:1rem 0; border-bottom:1px solid var(--line); }
.switch{ position:relative; width:44px; height:24px; }
.switch input{ opacity:0; width:0; height:0; }
.switch .slider{ position:absolute; inset:0; background:rgba(243,239,230,.15); border-radius:999px; transition:.25s; cursor:pointer; }
.switch .slider::before{ content:""; position:absolute; width:18px; height:18px; left:3px; top:3px; background:var(--ivory); border-radius:50%; transition:.25s; }
.switch input:checked + .slider{ background:var(--gold); }
.switch input:checked + .slider::before{ transform:translateX(20px); }

.admin-toggle{ display:none; }
@media (max-width:1020px){
  .admin-shell{ grid-template-columns:1fr; }
  .admin-sidebar{ position:fixed; z-index:1500; width:260px; transform:translateX(-100%); transition:transform var(--dur) var(--ease); }
  .admin-sidebar.open{ transform:translateX(0); }
  .admin-toggle{ display:inline-flex; }
  .kpi-grid{ grid-template-columns:repeat(2,1fr); }
  .panel-grid{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .kpi-grid{ grid-template-columns:1fr; }
  .admin-main{ padding:1.4rem; }
}