/**
 * SOLIS ERP — New Layout (server-rendered)
 *
 * Classic Layout (.layout-classic):  Original top-navbar + right quick-menu sidebar
 *                                     → No changes, works exactly as before
 *
 * New Layout    (.layout-new):        Left sidebar navigation + fixed topbar.
 *                                     → Rendered SERVER-SIDE in main.php via
 *                                       _new_topbar.php + _new_sidebar.php using
 *                                       the same $menuItems array (SSOT).
 *                                       layout-switcher.js only handles interaction.
 *
 * Server-rendered elements:
 *   #solis-new-topbar    — top bar (brand + search + relocated right controls)
 *   #solis-new-sidebar   — left sidebar (theme-aware: light/navy)
 *
 * Theme awareness: light mode → light sidebar; dark mode → navy sidebar.
 */

/* ================================================================
   SHARED: Layout dimension tokens
   Single source of truth — JS no longer overrides these.
   ================================================================ */

:root {
  --solis-topbar-h:            52px;
  --solis-sidebar-w:           240px;
  --solis-sidebar-w-collapsed: 60px;

  /* ---- New Layout chrome colors — LIGHT theme (default) ---- */
  --solis-chrome-bg:           #ffffff;   /* topbar background */
  --solis-sidebar-bg:          #f0f0ff;   /* left/right sidebar background (pastel tint) */
  --solis-sidebar-hover-bg:    #e4e4fb;   /* item hover on pastel sidebar */
  --solis-chrome-border:       #e5e3df;   /* dividers / borders */
  --solis-chrome-text:         #5d5b54;   /* default nav text */
  --solis-chrome-text-strong:  #1a1a1a;   /* brand / active text */
  --solis-chrome-text-muted:   #a4a097;   /* section labels / icons */
  --solis-chrome-hover-bg:     #f4f3f1;   /* item hover */
  --solis-chrome-active-bg:    #ece9fb;   /* active item bg (purple tint) */
  --solis-chrome-active-text:  #5645d4;   /* active item text */
  --solis-chrome-active-bar:   #5645d4;   /* active left bar */
  --solis-chrome-input-bg:     #f4f3f1;   /* search input bg */
  --solis-chrome-input-border: #e5e3df;
  --solis-chrome-logo-filter:  none;      /* logo: no inversion on light */
}

/* ---- New Layout chrome colors — DARK theme (navy) ---- */
[data-theme="dark"] {
  --solis-chrome-bg:           #070f24;   /* navy-deep */
  --solis-sidebar-bg:          #070f24;   /* keep navy for sidebars in dark mode */
  --solis-sidebar-hover-bg:    rgba(255,255,255,0.06);  /* matches chrome hover in dark */
  --solis-chrome-border:       rgba(255,255,255,0.07);
  --solis-chrome-text:         rgba(255,255,255,0.65);
  --solis-chrome-text-strong:  rgba(255,255,255,0.95);
  --solis-chrome-text-muted:   rgba(255,255,255,0.40);
  --solis-chrome-hover-bg:     rgba(255,255,255,0.06);
  --solis-chrome-active-bg:    rgba(86,69,212,0.30);
  --solis-chrome-active-text:  #ffffff;
  --solis-chrome-active-bar:   #5645d4;
  --solis-chrome-input-bg:     rgba(255,255,255,0.08);
  --solis-chrome-input-border: rgba(255,255,255,0.10);
  --solis-chrome-logo-filter:  invert(1) brightness(0.92);
}

/* Smooth sidebar transition only — not all padding changes */
body.layout-new {
  transition: none; /* prevent flash on page load */
  /* New Interface uses Noto Sans KR as the base font.
     Override --ds-font so the body AND all var(--ds-font) consumers
     (solis-btn, etc. — which use it with !important) pick it up too. */
  --ds-font: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-family: var(--ds-font);
}

/* ================================================================
   CLASSIC LAYOUT — default (no changes to existing styles)
   ================================================================ */

/* Nothing here — existing site.css / dark-mode.css handles everything */


/* ================================================================
   NEW LAYOUT — activated when body has .layout-new
   ================================================================ */

/* ============================================================
   IMPORTANT: New Layout applies to DESKTOP/TABLET only (≥1025px).
   On mobile (≤1024px) the New chrome is fully disabled and the
   Classic navbar + mobile nav are restored, because the New Layout
   is not yet mobile-ready. See the "MOBILE: FORCE CLASSIC" block
   near the bottom of this file.
   ============================================================ */

/* ---- Hide the classic top navbar (DESKTOP/TABLET only) ---- */
@media (min-width: 1025px) {
  body.layout-new .navbar.fixed-top {
    display: none !important;
  }

  /* ---- Hide the classic right quick-menu sidebar ---- */
  body.layout-new .shortcuts-sidebar {
    display: none !important;
  }
}

/* ---- Quick menu width token ---- */
:root {
  --solis-quickmenu-w: 200px;
  --solis-quickmenu-w-collapsed: 56px;
}

/* ---- Adjust main content area (DESKTOP/TABLET only ≥1025px) ----
   padding-left = sidebar width + inner gutter (24px)
   padding-right = quick-menu width + gutter (when open) */
@media (min-width: 1025px) {
  body.layout-new main > .container,
  body.layout-new main > .container-fluid,
  body.layout-new .container.main-content-with-sidebar {
    padding-top: calc(var(--solis-topbar-h, 52px) + 24px) !important;
    padding-left:  calc(var(--solis-sidebar-w, 240px) + 24px) !important;
    padding-right: calc(var(--solis-quickmenu-w, 200px) + 24px) !important;
    padding-bottom: 32px !important;
    max-width: none !important;
    width: 100% !important;
    transition: padding-left 0.25s ease, padding-right 0.25s ease;
  }

  body.layout-new.new-sidebar-collapsed main > .container,
  body.layout-new.new-sidebar-collapsed main > .container-fluid,
  body.layout-new.new-sidebar-collapsed .container.main-content-with-sidebar {
    padding-left: calc(var(--solis-sidebar-w-collapsed, 60px) + 24px) !important;
  }

  /* Quick menu closed → collapse to an icon rail (keep icons + badges visible) */
  body.layout-new.new-quickmenu-closed main > .container,
  body.layout-new.new-quickmenu-closed main > .container-fluid,
  body.layout-new.new-quickmenu-closed .container.main-content-with-sidebar {
    padding-right: calc(var(--solis-quickmenu-w-collapsed, 56px) + 24px) !important;
  }
}

/* ---- New Topbar ---- */
#solis-new-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--solis-topbar-h, 52px);
  background: var(--solis-chrome-bg);
  display: flex;
  align-items: center;
  padding: 0 16px 0 0;
  z-index: 1050;
  border-bottom: 1px solid var(--solis-chrome-border);
  gap: 12px;
}

#solis-new-topbar .nt-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  width: var(--solis-sidebar-w, 240px);
  padding: 0 16px;
  flex-shrink: 0;
  text-decoration: none;
  transition: width 0.25s ease;
}

body.layout-new.new-sidebar-collapsed #solis-new-topbar .nt-brand {
  width: var(--solis-sidebar-w-collapsed, 60px);
  justify-content: center;
  padding: 0 8px;
}

#solis-new-topbar .nt-brand img {
  height: 26px;
  width: auto;
  /* Theme-aware: no filter on light, invert to white on dark navy */
  filter: var(--solis-chrome-logo-filter);
}

#solis-new-topbar .nt-brand-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--solis-chrome-text-strong);
  white-space: nowrap;
  overflow: hidden;
  transition: opacity 0.2s ease, width 0.25s ease;
}

body.layout-new.new-sidebar-collapsed #solis-new-topbar .nt-brand-name {
  opacity: 0;
  width: 0;
  overflow: hidden;
}

#solis-new-topbar .nt-center {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

#solis-new-topbar .nt-search {
  position: relative;
  width: 280px;
  max-width: 100%;
}

#solis-new-topbar .nt-search input {
  width: 100%;
  height: 32px;
  background: var(--solis-chrome-input-bg);
  border: 1px solid var(--solis-chrome-input-border);
  border-radius: 6px;
  color: var(--solis-chrome-text-strong);
  font-size: 0.8125rem;
  padding: 0 12px 0 30px;
  outline: none;
  transition: all 0.15s ease;
}

#solis-new-topbar .nt-search input::placeholder { color: var(--solis-chrome-text-muted); }
#solis-new-topbar .nt-search input:focus { border-color: var(--solis-chrome-active-bar); }

#solis-new-topbar .nt-search-icon {
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--solis-chrome-text-muted);
  font-size: 0.8rem;
  pointer-events: none;
}

#solis-new-topbar .nt-right {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.nt-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--solis-chrome-text);
  cursor: pointer;
  transition: all 0.12s ease;
  font-size: 1rem;
  text-decoration: none;
  position: relative;
}

.nt-btn:hover {
  background: var(--solis-chrome-hover-bg);
  color: var(--solis-chrome-text-strong);
  text-decoration: none;
}

.nt-btn .nt-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: #ef4444;
  color: #fff;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  border: 2px solid var(--solis-chrome-bg);
}

/* ---- Topbar toggle buttons (left nav / right quick menu) ---- */
.nt-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--solis-chrome-text);
  cursor: pointer;
  font-size: 1.05rem;
  flex-shrink: 0;
  transition: background 0.12s ease, color 0.12s ease;
}
.nt-toggle:hover {
  background: var(--solis-chrome-hover-bg);
  color: var(--solis-chrome-text-strong);
}
#solis-left-toggle { margin-left: 10px; }
.nt-toggle-right { margin-left: 4px; }
/* Hide left toggle on mobile (hamburger takes over) */
@media (max-width: 1024px) {
  #solis-left-toggle { display: none; }
  .nt-toggle-right { display: none; }
}

/* ---- Relocated navbar controls inside the topbar ---- */
/* These elements come from the dark navbar; recolor them for the topbar */
#solis-new-topbar .nt-right > * {
  margin: 0 !important;
}
#solis-new-topbar .nt-right .btn-link,
#solis-new-topbar .nt-right .nav-link,
#solis-new-topbar .nt-right .dropdown-toggle,
#solis-new-topbar .nt-right .theme-toggle-btn,
#solis-new-topbar .nt-right .btn-link i,
#solis-new-topbar .nt-right .dropdown-toggle i {
  color: var(--solis-chrome-text) !important;
}
#solis-new-topbar .nt-right .btn-link:hover,
#solis-new-topbar .nt-right .nav-link:hover,
#solis-new-topbar .nt-right .dropdown-toggle:hover,
#solis-new-topbar .nt-right .btn-link:hover i {
  color: var(--solis-chrome-text-strong) !important;
}

/* Hamburger for mobile (new layout) */
#solis-new-sidebar-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--solis-chrome-text);
  cursor: pointer;
  font-size: 1.1rem;
  margin-right: 4px;
}

/* ---- New Left Sidebar ---- */
#solis-new-sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--solis-sidebar-w, 240px);
  background: var(--solis-sidebar-bg);
  z-index: 1040;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--solis-chrome-border);
  transition: width 0.25s ease, transform 0.25s ease;
  overflow: hidden;
}

body.layout-new.new-sidebar-collapsed #solis-new-sidebar {
  width: var(--solis-sidebar-w-collapsed, 60px);
}

.solis-new-sidebar-inner {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  padding-top: var(--solis-topbar-h, 52px);
}

/* Sidebar toolbar (Expand All / Collapse All) */
.sn-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  padding: 6px 10px 0;
}

.sn-toolbar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--solis-chrome-text-muted);
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.12s ease;
}

.sn-toolbar-btn:hover {
  background: var(--solis-chrome-hover-bg);
  color: var(--solis-chrome-text-strong);
}

/* Hide toolbar when sidebar is collapsed to icons-only */
body.layout-new.new-sidebar-collapsed .sn-toolbar { display: none; }

.solis-new-sidebar-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 8px 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--solis-chrome-border) transparent;
}

.solis-new-sidebar-scroll::-webkit-scrollbar { width: 4px; }
.solis-new-sidebar-scroll::-webkit-scrollbar-thumb { background: var(--solis-chrome-border); border-radius: 2px; }
.solis-new-sidebar-scroll::-webkit-scrollbar-track { background: transparent; }

/* Sidebar section labels */
#solis-new-sidebar .sn-section-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--solis-chrome-text-muted) !important;
  padding: 14px 12px 4px;
  white-space: nowrap;
  overflow: hidden;
  transition: opacity 0.2s ease;
}

/* Section divider above AI shortcut */
#solis-new-sidebar .sn-section-divider {
  height: 1px;
  background: var(--solis-chrome-border);
  margin: 10px 8px;
}
#solis-new-sidebar .sn-sub-divider {
  height: 1px;
  background: var(--solis-chrome-border);
  margin: 6px 10px;
}

body.layout-new.new-sidebar-collapsed .sn-section-label {
  opacity: 0;
  pointer-events: none;
  height: 4px;
  padding: 2px 0;
}

/* ──────────────────────────────────────────────────────
   Sidebar nav items — scoped under #solis-new-sidebar
   High specificity to beat Bootstrap a{} and dark-mode.css
   ────────────────────────────────────────────────────── */
#solis-new-sidebar .sn-item,
#solis-new-sidebar .sn-item:link,
#solis-new-sidebar .sn-item:visited {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 6px;
  color: var(--solis-chrome-text) !important;
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
  text-decoration: none !important;
  white-space: nowrap;
  overflow: hidden;
  margin-bottom: 2px;
  position: relative;
  min-height: 36px;
  line-height: 1.35;
  background: transparent;
}

#solis-new-sidebar .sn-item:hover,
#solis-new-sidebar .sn-item:focus {
  background: var(--solis-sidebar-hover-bg) !important;
  color: var(--solis-chrome-text-strong) !important;
  text-decoration: none !important;
}

#solis-new-sidebar .sn-item.active,
#solis-new-sidebar .sn-item.active:link,
#solis-new-sidebar .sn-item.active:visited {
  background: var(--solis-chrome-active-bg) !important;
  color: var(--solis-chrome-active-text) !important;
}

#solis-new-sidebar .sn-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 20px;
  background: var(--solis-chrome-active-bar);
  border-radius: 0 2px 2px 0;
}

/* Icon: inherit color from parent .sn-item */
#solis-new-sidebar .sn-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  color: inherit !important;
}

#solis-new-sidebar .sn-icon i,
#solis-new-sidebar .sn-icon svg {
  color: inherit !important;
}

/* Label */
#solis-new-sidebar .sn-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 0.2s ease;
  color: inherit !important;
}

.sn-badge {
  flex-shrink: 0;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  background: #ef4444;
  color: #fff;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
}

#solis-new-sidebar .sn-arrow {
  flex-shrink: 0;
  font-size: 0.65rem;
  color: var(--solis-chrome-text-muted) !important;
  transition: transform 0.2s ease;
}

.sn-group-toggle[aria-expanded="true"] .sn-arrow { transform: rotate(90deg); }

/* Submenu */
.sn-submenu {
  padding-left: calc(12px + 18px + 10px);
  overflow: hidden;
  /* No max-height here — Bootstrap collapse handles animation */
}

/* Show all items fully — no per-submenu height cap.
   The whole sidebar (.solis-new-sidebar-scroll) scrolls instead. */
.sn-submenu.show {
  overflow: visible;
}

/* Sub-items — scoped for high specificity */
#solis-new-sidebar .sn-sub-item,
#solis-new-sidebar .sn-sub-item:link,
#solis-new-sidebar .sn-sub-item:visited {
  display: flex !important;
  align-items: center;
  padding: 7px 10px;
  border-radius: 5px;
  color: var(--solis-chrome-text) !important;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none !important;
  transition: background 0.1s ease, color 0.1s ease;
  white-space: nowrap;
  overflow: hidden;
  margin-bottom: 1px;
  background: transparent;
}

#solis-new-sidebar .sn-sub-item:hover,
#solis-new-sidebar .sn-sub-item:focus {
  color: var(--solis-chrome-text-strong) !important;
  background: var(--solis-chrome-hover-bg) !important;
  text-decoration: none !important;
}

#solis-new-sidebar .sn-sub-item.active {
  color: var(--solis-chrome-active-text) !important;
  background: var(--solis-chrome-active-bg) !important;
}

#solis-new-sidebar .sn-sub-header {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--solis-chrome-text-muted) !important;
  padding: 10px 10px 3px;
}

/* Collapsed sidebar — hide labels, center icons */
body.layout-new.new-sidebar-collapsed #solis-new-sidebar .sn-label,
body.layout-new.new-sidebar-collapsed #solis-new-sidebar .sn-badge,
body.layout-new.new-sidebar-collapsed #solis-new-sidebar .sn-arrow {
  display: none !important;
}

body.layout-new.new-sidebar-collapsed #solis-new-sidebar .sn-item {
  justify-content: center;
  padding: 8px;
}

body.layout-new.new-sidebar-collapsed #solis-new-sidebar .sn-submenu {
  display: none !important;
}

body.layout-new.new-sidebar-collapsed #solis-new-sidebar .sn-section-label {
  opacity: 0 !important;
  pointer-events: none;
  height: 4px;
  padding: 2px 0;
}

/* Sidebar footer */
.solis-new-sidebar-footer {
  padding: 8px;
  border-top: 1px solid var(--solis-chrome-border);
}

.sn-collapse-btn {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--solis-chrome-text);
  font-size: 0.8rem;
  cursor: pointer;
  width: 100%;
  transition: all 0.12s ease;
}

.sn-collapse-btn:hover { background: var(--solis-chrome-hover-bg); color: var(--solis-chrome-text-strong); }

.sn-collapse-label {
  font-size: 0.75rem;
  color: var(--solis-chrome-text-muted);
}

body.layout-new.new-sidebar-collapsed .sn-collapse-btn {
  justify-content: center;
}

body.layout-new.new-sidebar-collapsed .sn-collapse-label { display: none; }

.sn-collapse-btn i { transition: transform 0.25s ease; font-size: 0.85rem; }
body.layout-new.new-sidebar-collapsed .sn-collapse-btn i { transform: rotate(180deg); }

/* Sidebar overlay (mobile) */
#solis-new-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1035;
  backdrop-filter: blur(2px);
}

/* ================================================================
   NEW RIGHT QUICK MENU
   Shares the --solis-chrome-* tokens with the left sidebar for a
   unified look (theme-aware: light / navy).
   ================================================================ */

#solis-new-quickmenu {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  width: var(--solis-quickmenu-w, 200px);
  background: var(--solis-sidebar-bg);
  border-left: 1px solid var(--solis-chrome-border);
  z-index: 1039;
  display: flex;
  flex-direction: column;
  transition: width 0.25s ease;
  overflow: hidden;
}

/* Closed → collapse to an icon rail; icons + badges stay visible, labels hide */
#solis-new-quickmenu.is-closed {
  width: var(--solis-quickmenu-w-collapsed, 56px);
}
#solis-new-quickmenu.is-closed .sqm-header-label,
#solis-new-quickmenu.is-closed .sqm-label {
  display: none;
}
/* Center the icon in the narrow rail */
#solis-new-quickmenu.is-closed .solis-quickmenu-header {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}
#solis-new-quickmenu.is-closed .sqm-item {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
  gap: 0;
}

.solis-quickmenu-inner {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  padding-top: var(--solis-topbar-h, 52px);
}

.solis-quickmenu-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--solis-chrome-text-muted);
}
.solis-quickmenu-header .sqm-header-icon { font-size: 0.95rem; }

.solis-quickmenu-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 8px 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--solis-chrome-border) transparent;
}
.solis-quickmenu-scroll::-webkit-scrollbar { width: 4px; }
.solis-quickmenu-scroll::-webkit-scrollbar-thumb { background: var(--solis-chrome-border); border-radius: 2px; }

/* Quick menu items — same visual language as left sidebar .sn-item */
#solis-new-quickmenu .sqm-item,
#solis-new-quickmenu .sqm-item:link,
#solis-new-quickmenu .sqm-item:visited {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 6px;
  color: var(--solis-chrome-text) !important;
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none !important;
  white-space: nowrap;
  overflow: hidden;
  margin-bottom: 2px;
  min-height: 36px;
  line-height: 1.35;
  background: transparent;
  transition: background 0.12s ease, color 0.12s ease;
}

#solis-new-quickmenu .sqm-item:hover,
#solis-new-quickmenu .sqm-item:focus {
  background: var(--solis-sidebar-hover-bg) !important;
  color: var(--solis-chrome-text-strong) !important;
  text-decoration: none !important;
}

#solis-new-quickmenu .sqm-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  color: inherit !important;
  position: relative;
}
#solis-new-quickmenu .sqm-icon i { color: inherit !important; }

#solis-new-quickmenu .sqm-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  color: inherit !important;
}

#solis-new-quickmenu .sqm-badge {
  position: absolute;
  top: -5px;
  right: -7px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  background: #ef4444;
  color: #fff;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
}
#solis-new-quickmenu .sqm-badge-blue { background: #2563eb; }

/* Hide quick menu on mobile (kept in the left sidebar/hamburger flow) */
@media (max-width: 1024px) {
  #solis-new-quickmenu { display: none !important; }
}

/* ================================================================
   NEW MOBILE BOTTOM NAV
   ================================================================ */

#solis-mobile-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: var(--surface-topbar, #1e2025);
  border-top: 1px solid rgba(255,255,255,0.08);
  z-index: 1045;
  align-items: stretch;
  justify-content: space-around;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.snm-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex: 1;
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  font-size: 0.65rem;
  font-weight: 500;
  transition: color 0.12s ease;
  padding: 6px 4px;
  min-height: 52px;            /* 44px+ touch target (Apple HIG) */
  cursor: pointer;
  border: none;
  background: transparent;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}

.snm-item:hover { color: rgba(255,255,255,0.85); text-decoration: none; }
.snm-item.active { color: #9d8ef7; /* Notion purple lighter for dark bg */ }

/* Active indicator dot */
.snm-item.active .snm-icon::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  background: #9d8ef7;
  border-radius: 50%;
}

.snm-icon {
  font-size: 1.1rem;
  position: relative;
}

.snm-badge {
  position: absolute;
  top: -3px;
  right: -6px;
  width: 14px;
  height: 14px;
  background: #ef4444;
  color: #fff;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
}

.snm-label { font-size: 0.6rem; line-height: 1; }

/* ================================================================
   MOBILE: FORCE CLASSIC (≤1024px)
   The New Layout is NOT yet mobile-ready. On mobile we completely
   disable the New chrome (topbar / sidebar / quick menu) and restore
   the Classic navbar + mobile bottom nav, even when the user has
   opted into the New Layout. This guarantees mobile users always
   have working navigation.
   ================================================================ */

@media (max-width: 1024px) {

  /* Hide ALL New-Layout chrome on mobile */
  body.layout-new #solis-new-topbar,
  body.layout-new #solis-new-sidebar,
  body.layout-new #solis-new-sidebar-overlay,
  body.layout-new #solis-new-quickmenu,
  body.layout-new #solis-mobile-nav {
    display: none !important;
  }

  /* Restore the Classic navbar on mobile */
  body.layout-new .navbar.fixed-top {
    display: flex !important;
  }

  /* Restore Classic mobile bottom nav (if present) */
  body.layout-new .mobile-bottom-nav {
    display: flex !important;
  }

  /* Reset content offsets to Classic defaults (no New sidebar push) */
  body.layout-new main > .container,
  body.layout-new main > .container-fluid,
  body.layout-new .container.main-content-with-sidebar {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
    transition: none !important;
  }
}

@media (max-width: 767.98px) {
  body.layout-new main > .container,
  body.layout-new main > .container-fluid,
  body.layout-new .container.main-content-with-sidebar {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* ================================================================
   LAYOUT SWITCHER DROPDOWN — shared (both layouts)
   ================================================================ */

#layout-switcher-dropdown .dropdown-item.active {
  background: #f0f0ff;
  color: #4f46e5;
}

[data-theme="dark"] #layout-switcher-dropdown .dropdown-item.active {
  background: rgba(99,102,241,0.15);
  color: #a5b4fc;
}

#layout-switcher-dropdown .dropdown-menu {
  box-shadow: 0 8px 30px rgba(0,0,0,0.15);
}

/* ================================================================
   NEW LAYOUT DARK MODE
   Topbar/sidebar colors are driven by --solis-chrome-* variables,
   which are redefined under [data-theme="dark"] at the top of this
   file (navy). No per-element dark overrides needed here.
   ================================================================ */

/* Layout switcher dropdown — dark mode */
[data-theme="dark"] #layout-switcher-dropdown .dropdown-menu {
  background: var(--ds-surface-canvas, #1f1f1f);
  border-color: var(--ds-border, rgba(255,255,255,0.09));
}

[data-theme="dark"] #layout-switcher-dropdown .dropdown-item {
  color: var(--ds-text-charcoal, #d4d4d4);
}

[data-theme="dark"] #layout-switcher-dropdown .dropdown-item:hover {
  background: var(--ds-surface-soft, #252525);
}

/* ================================================================
   BREADCRUMB ADJUSTMENT IN NEW LAYOUT
   ================================================================ */

body.layout-new .breadcrumb-wrapper {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  margin-bottom: 12px;
}

body.layout-new .breadcrumb {
  background: var(--ds-surface-canvas, #fff);
  border: 1px solid var(--ds-border, #e5e3df);
  border-radius: var(--ds-radius-md, 8px);
  box-shadow: var(--ds-shadow-1, rgba(15,15,15,0.04) 0px 1px 2px);
}

/* ================================================================
   PAGE HEADER IN NEW LAYOUT
   ================================================================ */

/* New UI: page-header-box uses Notion primary gradient with ds- tokens */
body.layout-new .page-header-box {
  background: linear-gradient(135deg,
    var(--ds-color-primary, #5645d4) 0%,
    var(--ds-color-purple,  #7b3ff2) 100%);
  box-shadow: rgba(86,69,212,0.22) 0px 4px 16px;
  border-radius: var(--ds-radius-lg, 12px);
  padding: 1.25rem 1.5rem;
}

/* Dark mode: deeper navy gradient */
[data-theme="dark"] body.layout-new .page-header-box,
body.layout-new[data-theme="dark"] .page-header-box {
  background: linear-gradient(135deg,
    var(--ds-color-primary-deep, #3a2a99) 0%,
    #1a0a4a 100%);
  box-shadow: rgba(86,69,212,0.35) 0px 4px 16px;
}

/* ================================================================
   TRANSITION ANIMATION for layout switch
   ================================================================ */

body.layout-switching * {
  transition: none !important;
}

/* Layout switch overlay (flash on switch) */
#layout-switch-flash {
  position: fixed;
  inset: 0;
  background: var(--surface-page, #f4f5f7);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

#layout-switch-flash.active {
  opacity: 1;
  pointer-events: auto;
}