[data-theme="dark"] {
  --p: 87.21% 0.2046 118.81;
  --pc: 20% 0.02 118.81;
  --pf: 77.21% 0.2046 118.81;
}

/* Lenis smooth scroll defaults — only applied when html.lenis class is present
   (added automatically by Lenis on init). No effect on pages without Lenis. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* AI Chat theme */
.ai-chat-panel { background: #1a1a2e; border-color: rgba(200,230,0,0.19); }
.ai-chat-header { background: #c8e600; }
.ai-chat-bubble { background: #252540; color: #e0e0e0; }
.ai-chat-input { background: #252540; border-color: rgba(200,230,0,0.19); color: #e0e0e0; }

[data-theme="light"] .ai-chat-panel { background: #f8f9fa; border-color: #e0e0e0; }
[data-theme="light"] .ai-chat-header { background: #c8e600; }
[data-theme="light"] .ai-chat-bubble { background: #e8e8e8; color: #333; }
[data-theme="light"] .ai-chat-input { background: #fff; border-color: #ccc; color: #333; }

/* Logo mini color by theme */
[data-theme="light"] img[src*="logo_mini"] {
  filter: brightness(0) saturate(100%) invert(20%);
}
[data-theme="dark"] img[src*="logo_mini"] {
  filter: none;
}

/* Logo link: no background change on hover, just opacity */
a:has(> img[src*="logo_mini"]) {
  background: transparent !important;
}
a:has(> img[src*="logo_mini"]):hover {
  background: transparent !important;
}
a:has(> img[src*="logo_mini"]):hover img {
  opacity: 0.5;
  transition: opacity 0.2s;
}

#liveHomeCol,
#liveAwayCol {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#liveHomeCol::-webkit-scrollbar,
#liveAwayCol::-webkit-scrollbar {
  display: none;
}

/* Live Commentary - Always dark mode */
#liveCommentaryModal .live-modal-inner {
  background: oklch(0.2 0 0) !important;
  color: #e0e0e0 !important;
}
#liveCommentaryModal .live-modal-inner * {
  --b1: 0.2 0 0;
  --b2: 0.25 0 0;
  --b3: 0.3 0 0;
  --bc: 0.9 0 0;
}

/* Sidebar sub-menu spacing */
#appSidebar .menu details > ul,
#appSidebarDrawer .menu details > ul {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* === Dashboard sidebar layout (PC) ============================================
 * Pins the sidebar just below the sticky 64px header and fills the rest of the
 * viewport. The inner <nav> scrolls independently so long menus don't force the
 * user to scroll the main content. Scrollbar is kept subtle (no color change on
 * hover/active). Sidebar items use a snappy hover transition. */
@media (min-width: 768px) {
  .drawer.drawer-open > .drawer-side {
    top: 64px !important;
    height: calc(100dvh - 64px) !important;
    align-self: start !important;
  }
  #appSidebar {
    max-height: 100%;
    overflow: hidden;
  }
  #appSidebar > nav {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    padding-top: 0.75rem;
    padding-bottom: 1.5rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.04) transparent;
  }
  #appSidebar > nav::-webkit-scrollbar { width: 6px; }
  #appSidebar > nav::-webkit-scrollbar-thumb,
  #appSidebar > nav::-webkit-scrollbar-thumb:hover,
  #appSidebar > nav::-webkit-scrollbar-thumb:active {
    background: rgba(255,255,255,0.04);
    border-radius: 3px;
  }
  #appSidebar > nav::-webkit-scrollbar-track { background: transparent; }
  #appSidebar #sidebarUser {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  #appSidebar .menu a,
  #appSidebar .menu summary {
    transition: background-color 60ms ease, color 60ms ease;
  }
}

/* Sidebar avatar: keep square aspect ratio so non-square source images don't distort */
#sidebarPhoto,
#headerPhoto,
#mobileMenuAvatar,
#appSidebarDrawer img[id="sidebarPhoto"] {
  object-fit: cover;
  aspect-ratio: 1 / 1;
}

/* Ensure header buttons receive taps on iOS (avoid 300ms delay / touch-handling quirks). */
#mobileMenuBtn,
#headerLogoutBtn,
.site-header .btn {
  touch-action: manipulation;
  position: relative;
  z-index: 1;
  pointer-events: auto;
  cursor: pointer;
}

/* ---------- Mobile dashboard sidebar (drawer pattern) ----------
 *
 *   Rail   = #appSidebar       — collapsed-only, never changes (64px, icons only)
 *   Drawer = #appSidebarDrawer — separate slide-in panel (256px, full menu)
 *
 *   Tap rail → drawer slides in from the left. Floating close button hides it.
 *   The two never share layout, so opening / closing is a pure transform animation
 *   on the drawer element with no internal reflow.
 */

/* Hide the deprecated in-sidebar expand toggle on every screen size (we don't use it). */
#sidebarExpandWrap {
  display: none !important;
}

@media (max-width: 767px) {
  /* === Rail (#appSidebar) === */
  #appSidebar {
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
    transition: none !important;
  }
  /* Rail user-info wrapper: emblem centered in the 64px column */
  #appSidebar > div.border-b.border-base-300:not(#sidebarExpandWrap) {
    padding: 10px 5px;
    min-height: 64px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    flex-shrink: 0;
  }
  #appSidebar #sidebarUser {
    width: 100%;
    justify-content: center !important;
    gap: 0 !important;
  }
  /* Rail menu items: icons only, centered, labels hidden */
  #appSidebar .menu a,
  #appSidebar .menu summary {
    padding: 0.5rem 0.75rem !important;
    justify-content: center !important;
    transition: none !important;
  }
  #appSidebar .menu li > details,
  #appSidebar .menu details,
  #appSidebar .menu li {
    padding: 0 !important;
  }
  #appSidebar .menu summary::after {
    display: none !important;
  }
  /* Rail (icon-only) on mobile: hide submenu items inside <details>. Even when
   * the details element is [open] for the active page, the <ul> would render as
   * empty rail items (because labels are display:none), creating a visible gap. */
  #appSidebar .menu details > ul {
    display: none !important;
  }
  /* Rail: menu has its own scroll context, doesn't drag the main page */
  #appSidebar > nav {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8rem !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  #appSidebar > nav::-webkit-scrollbar { width: 0; height: 0; display: none; }
  #appSidebar > nav > ul {
    padding: 0 5px !important;
  }

  /* === Backdrop overlay (#appSidebarBackdrop) === */
  #appSidebarBackdrop {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 95;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    touch-action: none;
  }
  #appSidebarBackdrop.backdrop-visible {
    opacity: 1;
    pointer-events: auto;
  }

  /* === Drawer (#appSidebarDrawer) === */
  #appSidebarDrawer {
    position: fixed;
    top: 64px;
    left: 0;
    bottom: 0;
    width: 256px;
    height: calc(100dvh - 64px);
    background: oklch(var(--b2, 28% 0.012 240));
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.45);
    z-index: 100;
    transform: translateX(-100%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.25s ease, opacity 0.2s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
  }
  #appSidebarDrawer.drawer-open {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
  }
  /* Drawer user-info wrapper: emblem + name aligned left */
  #appSidebarDrawer > div.border-b.border-base-300 {
    padding: 10px 16px;
    min-height: 64px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    flex-shrink: 0;
  }
  #appSidebarDrawer #sidebarUser {
    width: 100%;
    justify-content: flex-start !important;
    gap: 0.75rem !important;
  }
  /* Drawer: show labels and name */
  #appSidebarDrawer #sidebarName,
  #appSidebarDrawer .sidebar-label {
    display: inline !important;
  }
  /* Drawer menu items: icon + label, left-aligned */
  #appSidebarDrawer .menu a,
  #appSidebarDrawer .menu summary {
    padding: 0.5rem 1rem !important;
    justify-content: flex-start !important;
    transition: none !important;
  }
  #appSidebarDrawer .menu li > details,
  #appSidebarDrawer .menu details,
  #appSidebarDrawer .menu li {
    padding: 0 !important;
  }
  /* Drawer nav: scrollable */
  #appSidebarDrawer > nav {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    min-height: 0 !important;
    padding-bottom: 7rem !important;
    overscroll-behavior: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  #appSidebarDrawer > nav::-webkit-scrollbar { width: 0; height: 0; display: none; }
  #appSidebarDrawer > nav > ul {
    padding: 0 5px !important;
  }
}
@media (min-width: 768px) {
  #appSidebarDrawer { display: none !important; }
}

/* Floating close button: hidden for now (close via backdrop tap instead).
 * Originally visible only when drawer is open on mobile.
 */
#sidebarMobileCloseBtn {
  display: none !important;
}

/* Light mode overrides for live commentary: DISABLED (always dark) */