/* SideNav */
    .nav-section { padding: 12px; }
    .group-title { font-size: 12px; color: rgba(255,255,255,0.6); padding: 8px 12px; text-transform: uppercase; letter-spacing: 0.06em; }
    .nav-item {
      display: flex; align-items: center; gap: 10px;
      padding: 10px 12px; border-radius: 12px; margin: 4px 8px;
      color: var(--sidebar-text); text-decoration: none;
      border: 1px solid transparent; background: transparent;
    }
    .nav-item:hover { background: var(--sidebar-hover); border-color: rgba(255,255,255,0.1); }
    .nav-item.active { background: var(--sidebar-active); border-color: rgba(255,255,255,0.2); }
    .label { font-size: 14px; }
    .chip { margin-left: auto; font-size: 11px; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,0.15); color: var(--sidebar-text); border: 1px solid rgba(255,255,255,0.2); }

    /* Profile section at bottom of sidebar */
    .sidebar-profile {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 12px;
      border-top: 1px solid rgba(255,255,255,0.1);
      background: rgba(0,0,0,0.1);
    }
    .profile-button {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px solid transparent;
      background: transparent;
      color: var(--sidebar-text);
      cursor: pointer;
      width: 100%;
      text-align: left;
    }
    .profile-button:hover {
      background: var(--sidebar-hover);
      border-color: rgba(255,255,255,0.1);
    }

    /* ---------- Main Workspace ---------- */
    .workspace { 
      padding: 16px; 
      height: 100%; 
      overflow: auto;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    /* Admin interface fills workspace */
    .workspace .app-container {
      width: 100%;
      height: 100%;
      max-width: 100%;
      max-height: 100%;
    }

    .card {
      border-radius: 16px; border: 1px solid var(--border); background: var(--bg-elev);
      padding: 14px; box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }
    .grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px; }
    .col-4 { grid-column: span 4; }
    .col-8 { grid-column: span 8; }
    .col-6 { grid-column: span 6; }
    .col-12 { grid-column: span 12; }

    .list { display: grid; gap: 8px; }
    .row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); }
    .row .meta { color: var(--muted); font-size: 12px; }
    .row .btn { padding: 6px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--chip-bg); cursor: pointer; }

    /* ---------- Menus / Popovers ---------- */
    .menu { position: relative; }
    .menu .popover {
      display: none; position: absolute; right: 0; top: 44px; min-width: 320px; 
      background: var(--bg-elev); border: 1px solid var(--border); border-radius: 14px; padding: 8px; z-index: 100;
      box-shadow: 0 4px 12px rgba(0,0,0,.15);
    }
    /* Profile popover opens to the right from sidebar */
    .sidebar-profile .menu .popover {
      right: auto;
      left: 100%;
      top: 0;
      margin-left: 8px;
      min-width: 220px;
    }
    .menu.open .popover { display: block; }
    .menu .section-header {
      padding: 8px 12px;
      font-size: 11px;
      font-weight: 600;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .menu .section-header svg {
      width: 14px;
      height: 14px;
    }
    .menu .divider {
      height: 1px;
      background: var(--border);
      margin: 4px 0;
    }
    .menu .item { 
      padding: 10px 12px; 
      border-radius: 10px; 
      cursor: pointer; 
      display: flex; 
      align-items: center; 
      gap: 10px;
      font-size: 14px;
      color: var(--text);
    }
    .menu .item:hover { background: var(--chip-bg); }
    .menu .item .item-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .menu .item .item-title {
      font-weight: 500;
      color: var(--text);
    }
    .menu .item .item-time {
      font-size: 12px;
      color: var(--muted);
    }

    /* Accessibility helpers */
    .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }/* ---------- Layout: Side + Main ---------- */
    .layout { display: grid; grid-template-columns: 280px 1fr; height: 100%; }
    .side { 
      border-right: 1px solid var(--border);
      background: var(--sidebar-bg);
    }
    .main { position: relative; overflow: hidden; }

    /* Collapsed side */
    .collapsed .layout { grid-template-columns: 68px 1fr; }
    .collapsed .side .label { display: none; }
    .collapsed .side .group-title { display: none; }
    .collapsed .side #btnConfigure { display: none; }
    .collapsed .side .flip-front > div:first-child { justify-content: center; }
    .collapsed .side .nav-item { justify-content: center; padding: 10px; margin: 4px; }
    .collapsed .side .nav-item svg { display: block; }
    .collapsed .side .nav-item .chip { display: none; }
    .collapsed .side .profile-button { justify-content: center; padding: 10px; }