/* ==========================================================================
   NOVA HOST — ADMIN UI SYSTEM
   Loaded last (see includes/header.php) so it can correct the legacy shell.
   Scope: layout architecture, responsive behaviour, product visual system.
   No backend behaviour lives here; every selector only styles existing markup.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Page box — nothing may ever push the page sideways
   -------------------------------------------------------------------------- */
html, body { width:100%; max-width:100%; }
body { overflow-x:hidden; }

/* --------------------------------------------------------------------------
   2. Shell / layout architecture
   The legacy shell put .topbar (position:sticky, so IN FLOW) and .main-content
   side by side inside .app-layout{display:flex}. Two in-flow flex children in
   one row fight over the width: on a phone the topbar kept its content width,
   the content column was squeezed into the leftovers and pushed to the right,
   and the old desktop offset (margin-left:var(--sidebar-w)) showed up as a big
   empty band on the left.
   Now: the sidebar is fixed (off-canvas on small screens) and everything else
   is one full-width column. .main-wrapper is that column; pages that have not
   been given a wrapper yet still behave, because the two remaining flex
   children are each forced onto their own full-width row.
   -------------------------------------------------------------------------- */
.app-layout{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  width:100%;
  max-width:100%;
  min-height:100vh;
  padding-left:var(--sidebar-w);      /* room for the fixed sidebar (desktop) */
  box-sizing:border-box;
}

.main-wrapper{
  flex:1 1 100%;
  min-width:0;
  width:100%;
  max-width:100%;
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

/* Pages that still place topbar/main straight into .app-layout */
.app-layout > .topbar,
.main-wrapper > .topbar{
  flex:0 0 100%;
  width:100%;
  max-width:100%;
}
.app-layout > .main-content,
.main-wrapper > .main-content{
  flex:1 1 100%;
  width:100%;
  max-width:100%;
  min-width:0;
}

.main-content{
  margin-left:0 !important;           /* the 260px offset is retired */
  padding:1.5rem 1.75rem 2.5rem !important;
  min-height:auto;
  overflow-x:hidden;
}
.main-content.sidebar-collapsed{ margin-left:0 !important; }

/* Sidebar sits above the topbar (topbar z-index is 900) so the mobile drawer
   is never covered by it. */
.sidebar{ z-index:1000; }

/* --------------------------------------------------------------------------
   3. Responsive behaviour (360 / 390 / 412 / 768 / 1024+)
   -------------------------------------------------------------------------- */
@media (max-width:1024px){
  .app-layout{ padding-left:0; }
  .main-content{ padding:1.15rem 1rem 2.25rem !important; }
  .stats-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:768px){
  .sidebar{
    transform:translateX(-100%);
    transition:transform .28s cubic-bezier(.4,0,.2,1);
    box-shadow:18px 0 45px rgba(31,45,76,.14);
  }
  .sidebar.mobile-open{ transform:translateX(0); }
  .sidebar.collapsed { transform:translateX(-100%); }
  .sidebar-close{ display:flex !important; }

  .sidebar-backdrop{
    position:fixed;
    inset:0;
    background:rgba(23,32,51,.34);
    opacity:0;
    visibility:hidden;
    transition:opacity .2s ease, visibility .2s ease;
    z-index:999;
  }
  .sidebar-backdrop.active{ opacity:1; visibility:visible; }
}

@media (max-width:640px){
  .stats-grid{ grid-template-columns:1fr; }
  .main-content{ padding:1rem .85rem 2rem !important; }
  .page-header{ margin-bottom:1.15rem; }
  .page-title{ font-size:1.32rem; }
  .page-header-row{ flex-direction:column; align-items:flex-start; gap:.7rem; }
  .card, .stat-card{ border-radius:14px; }
}

/* Legacy grid helpers must never exceed the viewport */
.grid-2, .grid-3, .grid-4{
  display:grid;
  gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}

/* --------------------------------------------------------------------------
   4. Nova Host product tokens + surfaces
   -------------------------------------------------------------------------- */
.nova-admin,
.main-content{
  --nv-bg:#f5f7fb;
  --nv-card:#ffffff;
  --nv-card-soft:#f9fbff;
  --nv-border:#e4e9f1;
  --nv-text:#172033;
  --nv-muted:#748196;
  --nv-faint:#9aa5b4;
  --nv-primary:#4f6ef7;
  --nv-primary-2:#6b5cf6;
  --nv-cyan:#24abc1;
  --nv-success:#18a874;
  --nv-warning:#d89521;
  --nv-danger:#d75a63;
  --nv-shadow:0 10px 28px rgba(31,45,76,.06);
  --nv-shadow-soft:0 4px 14px rgba(31,45,76,.05);
  color:var(--nv-text);
}

/* --------------------------------------------------------------------------
   5. Page header
   -------------------------------------------------------------------------- */
.page-title{
  font-family:'Inter',system-ui,sans-serif;
  font-size:1.5rem;
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--nv-text,#172033);
}
.page-breadcrumb{
  font-size:.74rem;
  color:var(--nv-muted,#748196);
  margin-top:.2rem;
}
.page-header{ margin-bottom:1.4rem; }

/* --------------------------------------------------------------------------
   6. Stat cards
   -------------------------------------------------------------------------- */
.stats-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1rem;
  margin-bottom:1.4rem;
}

.stat-card{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:.9rem;
  background:var(--nv-card,#fff);
  border:1px solid var(--nv-border,#e4e9f1);
  border-radius:16px;
  padding:1.05rem 1.1rem;
  box-shadow:var(--nv-shadow-soft,0 4px 14px rgba(31,45,76,.05));
  overflow:hidden;
  min-width:0;
}
.stat-card::after{ display:none; }

.stat-icon{
  width:40px; height:40px;
  flex:0 0 40px;
  border-radius:12px;
  display:grid; place-items:center;
  font-size:.95rem;
  background:rgba(79,110,247,.1);
  color:var(--nv-primary,#4f6ef7);
}
.stat-label{
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--nv-muted,#748196);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.stat-value{
  font-family:'Inter',system-ui,sans-serif;
  font-size:1.42rem;
  font-weight:800;
  line-height:1.15;
  color:var(--nv-text,#172033);
  letter-spacing:-.02em;
}
.stat-hint{
  font-size:.7rem;
  color:var(--nv-faint,#9aa5b4);
  margin-top:.15rem;
}
.stat-body{ min-width:0; }

/* --------------------------------------------------------------------------
   7. Cards
   -------------------------------------------------------------------------- */
.card{
  background:var(--nv-card,#fff);
  border:1px solid var(--nv-border,#e4e9f1);
  border-radius:16px;
  box-shadow:var(--nv-shadow-soft,0 4px 14px rgba(31,45,76,.05));
  overflow:hidden;
}
.card-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  padding:.95rem 1.1rem;
  border-bottom:1px solid #eef1f6;
  background:#fff;
}
.card-title{
  font-size:.9rem;
  font-weight:700;
  color:var(--nv-text,#172033);
  letter-spacing:-.01em;
}
.card-body{ padding:1.05rem 1.1rem; }
.card + .card{ margin-top:1rem; }

/* --------------------------------------------------------------------------
   8. Tables — never wider than the viewport; scroll inside the card
   -------------------------------------------------------------------------- */
.table-wrap{
  width:100%;
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.table-wrap > table,
.card table{
  width:100%;
  max-width:100%;
  border-collapse:collapse;
}
.table-wrap table{ min-width:620px; }      /* scrolls, never stretches the page */

th, td{ padding:.65rem .8rem; font-size:.8rem; text-align:left; }
thead th{
  background:#f8fafc;
  color:#64748b;
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
  white-space:nowrap;
}
tbody td{ border-top:1px solid #eef2f7; color:var(--nv-text,#172033); }
tbody tr:hover td{ background:#f8fafc; }
td.wrap, th.wrap{ white-space:normal; }

/* --------------------------------------------------------------------------
   9. Status pills + badges
   -------------------------------------------------------------------------- */
.badge{
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  padding:.2rem .55rem;
  border-radius:999px;
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.02em;
  border:1px solid transparent;
  white-space:nowrap;
}
.badge-green, .badge-success, .badge-active, .badge-completed, .badge-ok   { background:#e7f7f0; color:#12805a; border-color:#c7ecdd; }
.badge-blue, .badge-building, .badge-pending, .badge-info                 { background:#eef2ff; color:#3f56c8; border-color:#dbe2fd; }
.badge-purple                                   { background:#f2eeff; color:#5b46c9; border-color:#e3dcfd; }
.badge-yellow, .badge-warning, .badge-stopped, .badge-warn                { background:#fdf3e3; color:#96631a; border-color:#f7e3c4; }
.badge-red, .badge-danger, .badge-failed, .badge-err                      { background:#fdecee; color:#b04048; border-color:#f8d5d9; }
.badge-gray, .badge-muted, .badge-expired, .badge-removed{ background:#f1f4f8; color:#5f6c7f; border-color:#e2e8f0; }

/* --------------------------------------------------------------------------
   10. Admin sidebar
   -------------------------------------------------------------------------- */
.admin-sidebar .nav-group-label{
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--nv-faint,#9aa5b4);
  padding:.9rem 1.35rem .35rem;
}
.admin-sidebar .nav-item{
  display:flex;
  align-items:center;
  gap:.7rem;
  margin:1px .55rem;
  padding:.58rem .7rem;
  border-radius:10px;
  font-size:.82rem;
  font-weight:600;
  color:#5f6c7f;
  border-left:0;
}
.admin-sidebar .nav-item i{ width:18px; text-align:center; font-size:.85rem; color:#8794a8; }
.admin-sidebar .nav-item:hover{ background:#f4f7fc; color:var(--nv-text,#172033); }
.admin-sidebar .nav-item:hover i{ color:var(--nv-primary,#4f6ef7); }
.admin-sidebar .nav-item.active{
  background:linear-gradient(90deg,rgba(79,110,247,.12),rgba(107,92,246,.09));
  color:#37429a;
}
.admin-sidebar .nav-item.active i{ color:var(--nv-primary,#4f6ef7); filter:none; }
.nav-badge{
  margin-left:auto;
  background:var(--nv-primary,#4f6ef7);
  color:#fff;
  font-size:.62rem;
  font-weight:800;
  padding:.1rem .4rem;
  border-radius:999px;
  min-width:18px;
  text-align:center;
}
.sidebar-nav-sep{ height:1px; background:#eef1f6; margin:.6rem 1.35rem; }

/* --------------------------------------------------------------------------
   11. Empty states + inline metrics
   -------------------------------------------------------------------------- */
.empty-state{
  padding:1.6rem 1rem;
  text-align:center;
  color:var(--nv-muted,#748196);
  font-size:.82rem;
}
.empty-state i{ display:block; font-size:1.2rem; color:#c3cdda; margin-bottom:.5rem; }
.metric-inline{ font-weight:700; color:var(--nv-text,#172033); }
.text-credits{ color:var(--nv-primary,#4f6ef7); font-weight:700; }
.muted-sm{ font-size:.72rem; color:var(--nv-muted,#748196); }

/* --------------------------------------------------------------------------
   12. Buttons / inputs (admin surfaces)
   -------------------------------------------------------------------------- */
.btn{ border-radius:11px; font-weight:600; }
.btn-sm{ padding:.42rem .8rem; font-size:.76rem; border-radius:9px; }
.btn-primary{ background:var(--nv-primary,#4f6ef7) !important; color:#fff !important; }
.btn-primary:hover{ background:#4258d8 !important; }
.form-input{
  min-height:42px;
  border-radius:11px;
  border:1px solid #dfe5ee;
  background:#fff;
  color:var(--nv-text,#172033);
}
.form-input:focus{ border-color:var(--nv-primary,#4f6ef7); box-shadow:0 0 0 3px rgba(79,110,247,.12); }

/* Two-column admin layouts collapse cleanly */
.split-2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
@media (max-width:900px){ .split-2{ grid-template-columns:1fr; } }

/* When the sidebar is collapsed the JS only toggles .collapsed on the aside, so the
   container must give its column back or a 260px gap is left behind. */
.app-layout:has(.sidebar.collapsed){ padding-left:0; }
.sidebar.collapsed{ transform:translateX(-100%); }