/* ==========================================================================
   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{
  flex:0 0 100%;
  width:100%;
  max-width:100%;
}
/* .main-wrapper is a column flex container, so a percentage flex-basis on its
   children is resolved against the wrapper's HEIGHT, not its width. The sticky
   topbar therefore stretched to a full viewport (900px) and pushed every page's
   content below the fold - worst on desktop, fine under 900px where the wrapper
   is no longer stretched. Keep it at its natural height and force full width. */
.main-wrapper > .topbar{
  flex:0 0 auto;
  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){
  .main-content{ padding:1.15rem 1rem 2.25rem !important; }
  .stats-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:768px){
  /* The sidebar only goes off-canvas from here, so this is where its reserved
     260px column must be given back. Removing the padding at 1024px instead left
     the sidebar sitting on top of the first 260px of every page (769-1024px). */
  .app-layout{ padding-left:0; }
  .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. Makamesco 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:#0d9488;
  --nv-primary-2:#0e7490;
  --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(13,148,136,.1);
  color:var(--nv-primary,#0d9488);
}
.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,#0d9488); }
.admin-sidebar .nav-item.active{
  background:linear-gradient(90deg,rgba(13,148,136,.12),rgba(14,116,144,.09));
  color:#37429a;
}
.admin-sidebar .nav-item.active i{ color:var(--nv-primary,#0d9488); filter:none; }
.nav-badge{
  margin-left:auto;
  background:var(--nv-primary,#0d9488);
  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,#0d9488); 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,#0d9488) !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,#0d9488); box-shadow:0 0 0 3px rgba(13,148,136,.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%); }


/* Admin overview: keep responsive rules after the desktop grid definition. */
.stats-grid.admin-overview-stats { grid-template-columns:repeat(4,minmax(0,1fr)); }
.admin-overview-stats .stat-card { min-width:0; height:auto; }
.admin-overview-stats .stat-body { flex:1 1 0; min-width:0; }
.admin-overview-stats .stat-label { white-space:normal; overflow:visible; text-overflow:clip; overflow-wrap:anywhere; }
.admin-overview-stats .stat-value { overflow-wrap:anywhere; }
.admin-overview-stats .stat-hint { overflow-wrap:anywhere; line-height:1.5; }
@media (max-width:1200px) {
 .stats-grid.admin-overview-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px) {
 .stats-grid.admin-overview-stats { grid-template-columns:minmax(0,1fr); gap:.75rem; }
 .admin-overview-stats .stat-card { padding:1rem; align-items:center; }
 .admin-overview-stats .stat-value { font-size:1.6rem; margin:.2rem 0; }
}