/* assets/app.css
   Sidebar + iframe shell styles (refactored)
   - Muli for headings/navigation, Outfit for content
   - Top-level nav labels are bold and 2px larger than submenu labels
   - Responsive collapse behavior preserved
*/

/* Load fonts (also safe if page already loads them via <link>) */
@import url('https://fonts.googleapis.com/css2?family=Muli:wght@400;600;700&family=Outfit:wght@300;400;600;700&display=swap');

:root{
  /* Font stacks */
  --font-heading: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Layout tokens */
  --sidebar-width: 260px;
  --sidebar-collapsed-width: 64px;
  --bg: #fff;
  --muted: #6b7280;
  --accent: #0b9;
  --border: #eef2f4;
  --shadow: 0 10px 30px rgba(0,0,0,0.06);
  --radius: 8px;

  /* Navigation sizes */
  --nav-main-size: 18px;     /* main nav labels (2px larger than subitems) */
  --nav-sub-size: 16px;      /* submenu labels */
  --icon-size: 18px;
  --icon-col-width: 28px;
}

/* Base */
* { box-sizing: border-box; }
html,body { height:100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg);
  color: #111;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.app { display:flex; min-height:100vh; }

/* Sidebar */
.sidebar {
  width: var(--sidebar-width);
  background: var(--bg);
  border-right: 1px solid var(--border);
  display:flex;
  flex-direction:column;
  padding:8px 6px;
  gap:8px;
}
.brand { display:flex; gap:8px; align-items:center; padding:12px; cursor:pointer; }
.brand-logo {
  width:40px;
  height:40px;
  border-radius:8px;
  background:var(--accent);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-family:var(--font-heading);
}
.brand-title, .brand-sub { font-family: var(--font-heading); }
.brand-title { font-size:16px; }
.brand-sub { font-size:12px; color:var(--muted); }

/* Status */
.status-row { display:flex; gap:8px; align-items:center; padding:0 12px; }
.status-dot { width:10px; height:10px; border-radius:50%; background:#c4c8cd; display:inline-block; }
.status-text { font-size:13px; color:#333; }

/* Menu */
.menu { padding:8px 6px; overflow:auto; -webkit-overflow-scrolling: touch; }
.menu-group { display:flex; flex-direction:column; gap:4px; margin-bottom:6px; }

/* Menu group header (top-level items that toggle submenu) */
.menu-item-group {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 10px;
  border-radius:var(--radius);
  cursor:pointer;
  color:inherit;
  text-decoration:none;
  font-family:var(--font-heading);
  gap:8px;
}
.menu-item-group .label { display:flex; gap:10px; align-items:center; }

/* Top-level menu link */
.menu-item {
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 10px;
  border-radius:var(--radius);
  text-decoration:none;
  color:inherit;
  font-family:var(--font-heading);
  cursor:pointer;
}

/* Icon column */
.menu-item > span:first-child,
.menu-item-group .label > span:first-child,
.submenu .submenu-item > span:first-child {
  width: var(--icon-col-width);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-size: var(--icon-size);
}

/* Main label (top-level) - bold & larger */
.menu-item > span:last-child,
.menu-item-group .label > span:last-child {
  font-family: var(--font-heading);
  font-weight: 550;
  font-size: var(--nav-main-size);
  line-height: 1.08;
  display:inline-block;
}

/* Submenu container */
.submenu {
  display:none;
  padding-left:6px;
  margin-top:6px;
  margin-bottom:6px;
}

/* Submenu item */
.submenu .submenu-item {
  padding:6px 10px;
  border-radius:var(--radius);
  display:flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  color:inherit;
  font-family:var(--font-body);
}

/* Submenu label (keeps original size/weight) */
.submenu .submenu-item > span:last-child {
  font-size: var(--nav-sub-size);
  font-weight: 500;
  display:inline-block;
}

/* Active / hover states */
.menu-item.active,
.menu-item-group.active,
.menu-item-group:hover,
.menu-item:hover,
.submenu .submenu-item.active,
.submenu .submenu-item:hover {
  background: #f3f6f8;
}

/* Sidebar actions & footer */
.sidebar-actions { padding:12px; display:flex; flex-direction:column; gap:8px; }
.sidebar-foot { padding:12px; margin-top:auto; font-size:13px; color:var(--muted); }

/* Main area */
.main { flex:1; display:flex; flex-direction:column; min-height:100vh; background:#fafafa; }
.topbar { background:transparent; padding:0; }

/* Search input */
.search { font-family: var(--font-body); }

/* Content iframe */
.content-frame {
  width:100%;
  height:calc(110vh - 120px);
  border:0;
  border-radius:12px;
  box-shadow: var(--shadow);
  background: var(--bg);
}
@media (max-width:900px){
  .content-frame { height:calc(100vh - 140px); }
  .sidebar{ width: var(--sidebar-collapsed-width); padding:12px; }
  .brand-title, .brand-sub, .menu-item span:last-child { display:none; }
  .menu-item{ justify-content:center; padding:10px; }
}

/* Buttons (used in sidebar actions) */
.btn { padding:8px 10px; border-radius:6px; border:0; cursor:pointer; font-family:var(--font-body); }
.btn.primary { background: var(--accent); color:#fff; }
.btn.ghost { background:#fff; border:1px solid #e6e6e6; color:#111; }

/* small helpers */
.muted { color:var(--muted); font-family:var(--font-body); }

/* Utility: ensure submenu icon spacing aligns when label grows */
.menu-item .icon, .submenu .icon { display:inline-flex; align-items:center; justify-content:center; width:var(--icon-col-width); }

/* Accessibility: focus styles */
.menu-item:focus, .submenu .submenu-item:focus, .menu-item-group:focus {
  outline: 3px solid rgba(11,153,153,0.12);
  outline-offset: 2px;
}