/* ==========================================================================
   APP SHELL — sidebar + topbar chrome, injected by assets/js/shell.js
   into every page's <div id="shell-root"></div>. Edit the markup in
   shell.js; edit only positioning/chrome look here.
   ========================================================================== */

.app-shell{ display:flex; height:calc(100vh - var(--navbar-h)); min-height:0; }

.shell-page{ display:flex; flex-direction:column; height:100vh; overflow:hidden; }

/* ---- Horizontal navbar (sits above the sidebar+topbar) ---- */
.top-navbar{ height:var(--navbar-h); flex-shrink:0; background:var(--zinc-900); color:#fff; display:flex; align-items:center; padding:0 16px; gap:22px; }
html[data-theme="dark"] .top-navbar{ background:var(--zinc-950); border-bottom:1px solid var(--zinc-800); }
.top-navbar .brand{ display:flex; align-items:center; gap:8px; font-weight:600; font-size:var(--text-md); color:#fff; flex-shrink:0; }
.top-navbar .brand i{ font-size:16px; }
.top-navbar-links{ display:flex; align-items:center; gap:4px; flex:1; overflow-x:auto; }
.top-navbar-links a{ color:rgba(255,255,255,.65); font-size:var(--text-base); font-weight:500; padding:7px 12px; border-radius:var(--radius-md); white-space:nowrap; display:flex; align-items:center; gap:6px; }
.top-navbar-links a:hover{ color:#fff; background:rgba(255,255,255,.08); }
.top-navbar-links a.active{ color:#fff; background:rgba(255,255,255,.14); }
.top-navbar-right{ display:flex; align-items:center; gap:6px; flex-shrink:0; }
.top-navbar .btn-icon{ color:rgba(255,255,255,.75); }
.top-navbar .btn-icon:hover{ color:#fff; background:rgba(255,255,255,.1); }
.dropdown-toggle.btn-icon::after{ display:none; } /* icon-only dropdown triggers (e.g. notifications bell) show no caret */

.navbar-pill{ display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:var(--radius-md); background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); color:#fff; font-size:var(--text-sm); font-weight:500; white-space:nowrap; flex-shrink:0; }
.navbar-pill:hover{ background:rgba(255,255,255,.16); color:#fff; }
.navbar-pill .user-avatar, .navbar-pill .tenant-avatar{ flex-shrink:0; }

@media (max-width:900px){ .top-navbar-links{ display:none; } }


/* ---- Sidebar ---- */
.sidebar{ width:var(--sidebar-w); height:100%; flex-shrink:0; background:var(--surface); border-right:1px solid var(--border); display:flex; flex-direction:column; transition:width .15s; overflow:hidden; }
.sidebar.collapsed{ width:var(--sidebar-w-collapsed); }
.sidebar.collapsed .nav-group-label{ display:none; }
.sidebar.collapsed .nav-link-item{ justify-content:center; position:relative; }
.sidebar.collapsed .nav-link-item span:not(.nav-badge){ display:none; }
.sidebar.collapsed .nav-link-item .nav-badge{ position:absolute; top:2px; right:6px; }
.sidebar.collapsed .tenant-btn{ justify-content:center; }
.sidebar.collapsed .tenant-btn span.flex-grow-1{ display:none; }
.sidebar.collapsed .tenant-btn.dropdown-toggle::after{ display:none; }
.sidebar.collapsed .sidebar-user{ justify-content:center; }
.sidebar.collapsed .sidebar-user .flex-grow-1, .sidebar.collapsed .sidebar-user .btn-icon{ display:none; }
@media (max-width:900px){ .sidebar.collapsed{ width:var(--sidebar-w); } .sidebar.collapsed .nav-link-item span:not(.nav-badge){ display:inline; } .sidebar.collapsed .nav-group-label{ display:block; } .sidebar.collapsed .tenant-btn span.flex-grow-1{ display:block; } .sidebar.collapsed .sidebar-user .flex-grow-1,.sidebar.collapsed .sidebar-user .btn-icon{ display:flex; } }
.sidebar-tenant{ padding:10px; border-bottom:1px solid var(--border); flex-shrink:0; display:flex; align-items:center; gap:6px; }
.sidebar-tenant .tenant-btn{ flex:1; }
.sidebar-mobile-close{ display:none; flex-shrink:0; }
@media (max-width:900px){ .sidebar.open .sidebar-mobile-close{ display:inline-flex; } }
.tenant-btn{ width:100%; display:flex; align-items:center; gap:8px; border:1px solid var(--border); border-radius:var(--radius-md); padding:7px 9px; background:var(--surface); text-align:left; color:var(--text); }
.tenant-btn:hover{ background:var(--surface-hover); }
.tenant-avatar{ width:22px; height:22px; border-radius:var(--radius-sm); background:var(--primary); color:var(--primary-fg); font-size:10px; font-weight:600; display:flex; align-items:center; justify-content:center; flex-shrink:0; }

.sidebar-nav{ flex:1; min-height:0; padding:8px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--zinc-300) transparent; }
.sidebar-nav::-webkit-scrollbar{ width:6px; }
.sidebar-nav::-webkit-scrollbar-thumb{ background:var(--zinc-300); border-radius:99px; }
.sidebar-nav::-webkit-scrollbar-thumb:hover{ background:var(--zinc-400); }
html[data-theme="dark"] .sidebar-nav{ scrollbar-color:var(--zinc-700) transparent; }
html[data-theme="dark"] .sidebar-nav::-webkit-scrollbar-thumb{ background:var(--zinc-700); }
.nav-group-label{ font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--text-faint); padding:14px 10px 6px; }
.nav-group-label:first-child{ padding-top:6px; }
.nav-link-item{ display:flex; align-items:center; gap:10px; padding:7px 10px; border-radius:var(--radius-md); color:var(--text-muted); font-weight:500; font-size:var(--text-base); margin-bottom:1px; }
.nav-link-item:hover{ background:var(--surface-hover); color:var(--text); }
.nav-link-item.active{ background:var(--zinc-100); color:var(--text); }
html[data-theme="dark"] .nav-link-item.active{ background:var(--zinc-800); }
.nav-link-item i{ font-size:15px; width:16px; text-align:center; }
.nav-link-item .nav-badge{ margin-left:auto; }

.sidebar-user{ border-top:1px solid var(--border); padding:9px 10px; display:flex; align-items:center; gap:8px; flex-shrink:0; }
.user-avatar{ width:26px; height:26px; border-radius:50%; background:var(--zinc-200); color:var(--zinc-600); font-size:10px; font-weight:600; display:flex; align-items:center; justify-content:center; flex-shrink:0; }

/* ---- Main / topbar ---- */
.main-col{ flex:1; height:100%; display:flex; flex-direction:column; min-width:0; }
.topbar{ height:var(--topbar-h); border-bottom:1px solid var(--border); background:var(--surface); display:flex; align-items:center; padding:0 16px; gap:10px; flex-shrink:0; }
.topbar .search-box{ position:relative; width:240px; }
.topbar .search-box i{ position:absolute; left:9px; top:50%; transform:translateY(-50%); color:var(--text-faint); font-size:13px; }
.topbar .search-box input{ padding-left:28px; padding-right:36px; height:32px; cursor:pointer; }
.topbar .search-box .cmd-kbd{ position:absolute; right:7px; top:50%; transform:translateY(-50%); font-size:10px; color:var(--text-faint); border:1px solid var(--border); border-radius:4px; padding:1px 5px; background:var(--surface); pointer-events:none; }
.topbar-spacer{ flex:1; }

.page-wrap{ flex:1; overflow-y:auto; }
.page-inner{ max-width:var(--container-max); margin:0 auto; padding:var(--space-6); }
.page-inner.wide{ max-width:none; }

@media (max-width:900px){
  .sidebar{ position:fixed; z-index:40; height:100vh; transform:translateX(-100%); box-shadow:var(--shadow-lg); }
  .sidebar.open{ transform:translateX(0); }
}
.sidebar-toggle{ flex-shrink:0; }

.sidebar-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:39; opacity:0; pointer-events:none; transition:opacity .15s; }
.sidebar-backdrop.show{ opacity:1; pointer-events:auto; }
@media (min-width:901px){ .sidebar-backdrop{ display:none; } }

/* ---- Language switcher ---- */

/* ---- Modern notifications panel ---- */
.notif-panel{ width:340px; padding:0; overflow:hidden; }
.notif-panel-head{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--border); }
.notif-panel-head .title{ font-size:var(--text-md); font-weight:600; }
.notif-panel-head .mark-read{ font-size:var(--text-xs); color:var(--text-muted); cursor:pointer; }
.notif-panel-head .mark-read:hover{ color:var(--text); text-decoration:underline; }
.notif-list{ max-height:340px; overflow-y:auto; }
.notif-item{ display:flex; gap:10px; padding:11px 14px; border-bottom:1px solid var(--border); cursor:pointer; position:relative; }
.notif-item:last-child{ border-bottom:none; }
.notif-item:hover{ background:var(--surface-hover); }
.notif-item.unread{ background:var(--info-bg); }
html[data-theme="dark"] .notif-item.unread{ background:rgba(37,99,235,.08); }
.notif-item .notif-icon{ width:32px; height:32px; border-radius:50%; background:var(--zinc-100); color:var(--text-muted); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:14px; }
html[data-theme="dark"] .notif-item .notif-icon{ background:var(--zinc-800); }
.notif-item .notif-text{ font-size:var(--text-base); line-height:1.4; color:var(--text); }
.notif-item .notif-time{ font-size:var(--text-xs); color:var(--text-faint); margin-top:2px; }
.notif-item .unread-dot{ width:7px; height:7px; border-radius:50%; background:var(--info); flex-shrink:0; margin-top:6px; }
.notif-panel-foot{ padding:9px 14px; text-align:center; border-top:1px solid var(--border); }
.notif-panel-foot a{ font-size:var(--text-sm); font-weight:500; color:var(--text); }
.notif-bell-badge{ position:absolute; top:2px; right:2px; min-width:15px; height:15px; padding:0 3px; border-radius:99px; background:var(--danger); color:#fff; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; line-height:1; }

/* ---- Undo toast ---- */
.undo-btn{ background:none; border:none; color:#fff; font-weight:600; font-size:var(--text-sm); text-decoration:underline; padding:0 8px; }

/* ---- Command palette ---- */
.cmd-palette-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:200; display:none; align-items:flex-start; justify-content:center; padding-top:12vh; }
.cmd-palette-backdrop.show{ display:flex; }
.cmd-palette{ width:100%; max-width:560px; max-height:70vh; margin:0 16px; background:var(--surface); border-radius:var(--radius-xl); box-shadow:var(--shadow-lg); overflow:hidden; border:1px solid var(--border); display:flex; flex-direction:column; }
.cmd-palette-input-row{ display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--border); flex-shrink:0; }
.cmd-palette-input-row i{ color:var(--text-faint); }
.cmd-palette-input-row input{ flex:1; border:none; outline:none; background:transparent; font-size:var(--text-md); color:var(--text); }
.cmd-palette-input-row kbd{ font-size:10px; color:var(--text-faint); border:1px solid var(--border); border-radius:4px; padding:1px 5px; }
.cmd-palette-list{ overflow-y:auto; padding:6px; }
.cmd-item{ display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:var(--radius-md); font-size:var(--text-base); color:var(--text); cursor:pointer; }
.cmd-item .cmd-group{ margin-left:auto; font-size:var(--text-xs); color:var(--text-faint); }
.cmd-item.active{ background:var(--zinc-100); }
html[data-theme="dark"] .cmd-item.active{ background:var(--zinc-800); }
.cmd-empty{ padding:24px; text-align:center; color:var(--text-faint); font-size:var(--text-sm); }

/* ---- Login Page ---- */
.login-card{ width:100%; max-width:380px; }
.brand-row{ display:flex; align-items:center; justify-content:center; gap:8px; font-weight:600; font-size:var(--text-lg); margin-bottom:6px; }
.divider-row{ display:flex; align-items:center; gap:10px; margin:16px 0; color:var(--text-faint); font-size:var(--text-xs); }
.divider-row::before, .divider-row::after{ content:""; flex:1; height:1px; background:var(--border); }
.demo-note{ background:var(--info-bg); color:var(--info); border:1px solid var(--info-border); border-radius:var(--radius-md); padding:8px 10px; font-size:var(--text-xs); margin-bottom:16px; }