/* ============================================================
   AiSiteDoc — Demo Sandbox app-shell styles
   Reuses design tokens defined in styles.css (:root)
   ============================================================ */

.sandbox-body{
  background:var(--paper);
  color:var(--paper-ink);
}

/* ============ Sandbox banner ============ */
.sandbox-banner{
  background:var(--navy-900);
  color:var(--ink);
  font-size:.82rem;
  padding:10px 20px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  text-align:center;
  border-bottom:1px solid var(--navy-line);
}
.sandbox-banner-dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 0 4px rgba(232,160,32,0.18);
  flex-shrink:0;
}
.sandbox-banner-link{
  color:var(--gold);
  font-weight:600;
  text-decoration:underline;
  text-decoration-color:rgba(232,160,32,0.4);
  flex-shrink:0;
}
.sandbox-banner-link:hover{ text-decoration-color:var(--gold); }

/* ============ App shell layout ============ */
.app-shell{
  display:grid;
  grid-template-columns:240px 1fr;
  min-height:calc(100vh - 41px);
}
@media (max-width:860px){
  .app-shell{ grid-template-columns:1fr; }
}

/* ============ Sidebar ============ */
.app-sidebar{
  background:var(--navy-900);
  border-left:1px solid var(--navy-line);
  display:flex;
  flex-direction:column;
  padding:20px 14px;
  position:sticky;
  top:41px;
  height:calc(100vh - 41px);
}
@media (max-width:860px){
  .app-sidebar{ position:static; height:auto; border-left:none; border-bottom:1px solid var(--navy-line); }
}

.app-brand{
  display:flex; align-items:center; gap:10px;
  padding:6px 10px 20px;
  border-bottom:1px solid var(--navy-line);
  margin-bottom:14px;
}

.app-nav{
  display:flex; flex-direction:column; gap:4px; flex:1;
}
.app-nav-item{
  display:flex; align-items:center; gap:10px;
  background:none; border:none;
  color:var(--muted);
  font-family:inherit; font-size:.86rem; font-weight:500;
  text-align:right;
  padding:10px 12px; border-radius:10px;
  cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.app-nav-item:hover{ background:rgba(232,160,32,0.06); color:var(--ink); }
.app-nav-item.is-active{
  background:rgba(232,160,32,0.12);
  color:var(--gold);
}
.app-nav-icon{ font-size:1rem; width:20px; text-align:center; flex-shrink:0; }

.app-sidebar-foot{
  padding-top:14px;
  border-top:1px solid var(--navy-line);
}

/* ============ Main area ============ */
.app-main{
  padding:28px 32px 60px;
  max-width:1100px;
}
@media (max-width:600px){
  .app-main{ padding:20px 16px 40px; }
}

.app-topbar{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
  margin-bottom:28px;
  padding-bottom:20px;
  border-bottom:1px solid var(--paper-line);
}
.app-topbar-eyebrow{
  font-family:var(--font-mono); font-size:.72rem;
  color:var(--gold-dark); letter-spacing:.08em;
  margin-bottom:4px;
}
.app-topbar-title{ font-size:1.4rem; font-weight:700; color:var(--paper-ink); }
.app-topbar-user{
  display:flex; align-items:center; gap:8px;
  font-size:.84rem; color:var(--paper-muted);
}
.app-user-avatar{
  width:30px; height:30px; border-radius:50%;
  background:var(--navy-800); color:var(--gold);
  display:flex; align-items:center; justify-content:center;
  font-size:.74rem; font-weight:700; font-family:var(--font-mono);
}

/* ============ Panels ============ */
.app-panel{ display:none; }
.app-panel.is-active{ display:block; animation:panelIn .25s ease; }
@keyframes panelIn{
  from{ opacity:0; transform:translateY(6px); }
  to{ opacity:1; transform:translateY(0); }
}

/* ============ KPI cards ============ */
.kpi-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:16px;
  margin-bottom:28px;
}
@media (max-width:760px){
  .kpi-grid{ grid-template-columns:1fr 1fr; }
}
.kpi-card{
  background:#fff;
  border:1px solid var(--paper-line);
  border-radius:var(--radius-sm);
  padding:18px 20px;
}
.kpi-label{ font-size:.78rem; color:var(--paper-muted); margin-bottom:8px; }
.kpi-value{ font-size:1.7rem; font-weight:700; color:var(--paper-ink); font-family:var(--font-mono); }
.kpi-delta{ font-size:.74rem; margin-top:6px; }
.kpi-delta-up{ color:#15803D; }
.kpi-delta-down{ color:var(--red); }
.kpi-delta-warn{ color:var(--gold-dark); }

/* ============ Panel block (shared card wrapper) ============ */
.panel-block{
  background:#fff;
  border:1px solid var(--paper-line);
  border-radius:var(--radius);
  padding:22px 24px;
  margin-bottom:20px;
}
.panel-block-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
  margin-bottom:18px;
}
.panel-block-head h2{ font-size:1.05rem; color:var(--paper-ink); }

/* ============ Activity list ============ */
.activity-list{ display:flex; flex-direction:column; gap:14px; }
.activity-list li{
  display:flex; align-items:center; gap:10px;
  font-size:.86rem; color:var(--paper-ink);
  padding-bottom:14px;
  border-bottom:1px solid var(--paper-line);
}
.activity-list li:last-child{ border-bottom:none; padding-bottom:0; }
.activity-text{ flex:1; color:var(--paper-muted); }
.activity-text strong{ color:var(--paper-ink); font-family:var(--font-mono); font-weight:600; }
.activity-time{ font-size:.74rem; color:var(--paper-muted); font-family:var(--font-mono); flex-shrink:0; }
.activity-dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.activity-dot-approved{ background:#22C55E; }
.activity-dot-pending{ background:var(--gold); }
.activity-dot-open{ background:#3B82F6; }

/* ============ Table ============ */
.table-wrap{ overflow-x:auto; }
.sandbox-table{ width:100%; border-collapse:collapse; font-size:.86rem; }
.sandbox-table th{
  text-align:right; padding:10px 12px;
  font-size:.74rem; color:var(--paper-muted); font-weight:600;
  border-bottom:2px solid var(--paper-line);
  white-space:nowrap;
}
.sandbox-table td{
  padding:12px;
  border-bottom:1px solid var(--paper-line);
  color:var(--paper-ink);
  white-space:nowrap;
}
.sandbox-table tbody tr:hover{ background:rgba(10,35,66,0.02); }
.sandbox-table td:nth-child(1){ font-family:var(--font-mono); color:var(--paper-muted); }

.status-pill{
  display:inline-block;
  font-size:.72rem; font-weight:600;
  padding:4px 10px; border-radius:999px;
}
.status-open{ background:rgba(59,130,246,0.1); color:#1D4ED8; }
.status-pending{ background:rgba(232,160,32,0.12); color:var(--gold-dark); }
.status-approved{ background:rgba(34,197,94,0.12); color:#15803D; }

/* ============ Transmittal rows ============ */
.transmittal-list{ display:flex; flex-direction:column; gap:10px; }
.transmittal-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
  padding:14px 16px;
  background:var(--paper);
  border:1px solid var(--paper-line);
  border-radius:10px;
}
.transmittal-row-main{ display:flex; align-items:center; gap:10px; font-size:.88rem; color:var(--paper-ink); }
.transmittal-code{ font-family:var(--font-mono); font-size:.78rem; color:var(--paper-muted); }
.transmittal-row-meta{ display:flex; align-items:center; gap:8px; font-size:.8rem; color:var(--paper-muted); }
.transmittal-row-meta strong{ color:var(--paper-ink); }

/* ============ Reports grid ============ */
.reports-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr));
  gap:14px;
}
.report-card{
  background:var(--paper);
  border:1px solid var(--paper-line);
  border-radius:10px;
  padding:18px;
  display:flex; flex-direction:column; gap:6px;
}
.report-icon{ font-size:1.6rem; margin-bottom:4px; }
.report-title{ font-size:.9rem; font-weight:600; color:var(--paper-ink); }
.report-meta{ font-size:.74rem; color:var(--paper-muted); margin-bottom:10px; }

/* ============ Sandbox footer ============ */
.app-sandbox-foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
  margin-top:32px;
  padding-top:20px;
  border-top:1px solid var(--paper-line);
}
.app-sandbox-foot p{ font-size:.8rem; color:var(--paper-muted); }

/* Disabled buttons in sandbox (visually distinct, not clickable) */
.btn:disabled{
  opacity:.45;
  cursor:not-allowed;
  filter:saturate(.6);
}
.btn:disabled:hover{ transform:none; box-shadow:none; }