/* ── 4. LAYOUT ────────────────────────────────────────────────── */

/* App shell */
.app {
  display: flex;
  width: 100%;
  min-height: 100vh;
}

/* Sidebar */
.sidebar,
.sa-sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--sidebar-w);
  z-index: var(--z-sidebar);
  overflow: hidden;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  scrollbar-width: thin;
  scrollbar-color: var(--border2) transparent;
}
.sidebar::-webkit-scrollbar,
.sa-sidebar::-webkit-scrollbar { width: 3px; }
.sidebar::-webkit-scrollbar-thumb,
.sa-sidebar::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }

/* SA layout (superadmin page root) */
.sa-layout {
  display: block;
  width: 100%;
  min-height: 100vh;
  background: var(--bg);
}

/* Content wrapper (empresa panel) */
.content {
  flex: 1;
  margin-left: var(--sidebar-w);
  width: calc(100% - var(--sidebar-w));
  max-width: calc(100% - var(--sidebar-w));
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* SA main content wrapper */
.sa-main {
  position: fixed;
  top: 0;
  left: var(--sidebar-w);
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
  z-index: 1;
}

/* Topbar */
.topbar,
.sa-topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-topbar);
  width: 100%;
  height: var(--topbar-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 var(--space-5);
  gap: var(--space-3);
  flex-shrink: 0;
}

/* Topbar slots */
.topbar-logo     { display:flex; align-items:center; gap:var(--space-2); font-size:var(--text-sm); font-weight:900; color:var(--accent); white-space:nowrap; text-decoration:none; flex-shrink:0; }
.topbar-spacer   { flex: 1; }
.topbar-actions  { display:flex; align-items:center; gap:var(--space-2); flex-shrink:0; }
.topbar-search   { flex:1; max-width:380px; position:relative; }
.topbar-search input { width:100%; height:var(--input-h); background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:0 var(--space-3) 0 32px; font-size:var(--text-xs); color:var(--text); outline:none; font-family:var(--font); transition:border-color var(--t); }
.topbar-search input:focus { border-color:var(--accent); }
.topbar-search input::placeholder { color:var(--text3); }
.topbar-search-icon { position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--text3); pointer-events:none; }
.topbar-icon-btn { width:var(--btn-h); height:var(--btn-h); border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--surface2); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text2); font-size:18px; transition:all var(--t); position:relative; flex-shrink:0; }
.topbar-icon-btn:hover { background:var(--surface3); color:var(--text); }
.topbar-notif-dot { position:absolute; top:7px; right:7px; width:6px; height:6px; background:var(--red); border-radius:50%; border:1.5px solid var(--surface); }
.topbar-user { display:flex; align-items:center; gap:var(--space-2); padding:0 var(--space-3); background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius-sm); cursor:pointer; height:var(--btn-h); flex-shrink:0; transition:background var(--t); }
.topbar-user:hover { background:var(--surface3); }
.topbar-avatar { width:24px; height:24px; border-radius:var(--radius-sm); background:var(--accent); color:#000; font-size:10px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.topbar-user-name { font-size:var(--text-xs); font-weight:700; color:var(--text); }
.topbar-user-plan { font-size:10px; color:var(--accent); font-weight:600; }
.sa-topbar-title { font-size:var(--text-sm); font-weight:800; color:var(--text); flex:1; min-width:0; }
.sa-dark-btn { width:var(--btn-h); height:var(--btn-h); border-radius:var(--radius-sm); border:1px solid var(--border2); background:var(--surface2); cursor:pointer; font-size:16px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }

/* Main / content area */
.main,
.sa-content,
#sa-content-area {
  flex: 1;
  padding: var(--space-5);
  overflow-y: auto;
  overflow-x: hidden;
  min-width: 0;
  background: var(--bg);
  color: var(--text);
  scrollbar-width: thin;
  scrollbar-color: var(--border2) transparent;
}
.main::-webkit-scrollbar,
.sa-content::-webkit-scrollbar,
#sa-content-area::-webkit-scrollbar { width: 4px; }
.main::-webkit-scrollbar-thumb,
.sa-content::-webkit-scrollbar-thumb,
#sa-content-area::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }

/* Containers */
.container, .page, .content-inner {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
}

/* Grids */
.kpi-grid, .sa-kpi-grid, .stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.grid-2   { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-3); }
.grid-2-3 { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:var(--space-3); }
.grid-3-2 { display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); gap:var(--space-3); }
.sa-two-col   { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-4); }
.sa-three-col { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-3); }
.sa-grid      { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:var(--space-3); }

/* ── 5. NAV ───────────────────────────────────────────────────── */

/* SA logo */
.sa-logo { flex-shrink:0; border-bottom:1px solid var(--border); }
.sa-logo-mark { font-size:var(--text-sm); font-weight:900; color:var(--accent); display:flex; align-items:center; gap:var(--space-2); padding:var(--space-4) var(--space-4) var(--space-1); white-space:nowrap; overflow:hidden; }
.sa-logo-sub { font-size:9px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--text3); padding:0 var(--space-4) var(--space-3); display:block; }

/* Empresa header */
.sidebar-empresa { padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--border); display:flex; align-items:center; gap:var(--space-2); cursor:pointer; flex-shrink:0; }
.sidebar-empresa-icon { width:30px; height:30px; border-radius:var(--radius-sm); background:var(--surface2); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.sidebar-empresa-name { font-size:var(--text-xs); font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar-empresa-plan { font-size:10px; color:var(--accent); font-weight:600; }

/* Nav body */
.sidebar-nav, .sa-nav-body { flex:1; min-height:0; overflow-y:auto; padding:var(--space-2) 0; scrollbar-width:thin; scrollbar-color:var(--border2) transparent; }
.sidebar-nav::-webkit-scrollbar, .sa-nav-body::-webkit-scrollbar { width:3px; }
.sidebar-nav::-webkit-scrollbar-thumb, .sa-nav-body::-webkit-scrollbar-thumb { background:var(--border2); border-radius:2px; }
.nav-section, .sa-nav-section { padding:2px 0; }
.nav-label, .sa-nav-label { padding:var(--space-3) var(--space-4) var(--space-1); font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.6px; color:var(--text3); display:block; }

/* Nav items */
.nav-item,
.sa-nav-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text2);
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  text-decoration: none;
  position: relative;
  font-family: var(--font);
  height: 34px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background var(--t), color var(--t);
}
.sa-nav-btn { margin:1px var(--space-2); border-radius:var(--radius-sm); width:calc(100% - var(--space-4)); box-sizing:border-box; }
.nav-item:hover,  .sa-nav-btn:hover  { background:var(--surface2); color:var(--text); }
.nav-item.active, .sa-nav-btn.active { background:var(--accent-l); color:var(--accent); font-weight:700; }
.nav-item.active::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent); }
.nav-item-icon, .sa-nav-btn .icon { font-size:var(--text-sm); width:20px; text-align:center; flex-shrink:0; }
.nav-badge { margin-left:auto; background:var(--red); color:#fff; font-size:9px; font-weight:800; padding:1px var(--space-2); border-radius:10px; min-width:18px; text-align:center; flex-shrink:0; }
.nav-badge.green { background:var(--green); }
.nav-toggle { margin-left:auto; width:28px; height:15px; background:var(--surface3); border-radius:8px; position:relative; transition:background var(--t); flex-shrink:0; }
.nav-toggle.on { background:var(--accent); }
.nav-toggle::after { content:''; position:absolute; top:2px; left:2px; width:11px; height:11px; background:#fff; border-radius:50%; transition:left var(--t); }
.nav-toggle.on::after { left:15px; }

/* Sidebar footer */
.sidebar-footer, .sa-sidebar-footer { flex-shrink:0; padding:var(--space-3); border-top:1px solid var(--border); background:var(--surface2); }
.sa-admin-chip { display:flex; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-3); background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); margin-bottom:var(--space-2); overflow:hidden; }
.sa-admin-avatar { width:26px; height:26px; border-radius:50%; background:var(--accent); color:#000; font-size:10px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.sa-admin-name { font-size:var(--text-xs); font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sa-admin-role { font-size:9px; color:var(--accent); font-weight:700; text-transform:uppercase; }