/*
 * IntelQI LMS — LMS Application Style Overrides
 * Customizes the Frappe LMS app to match IntelQI brand
 *
 * Brand Colors:
 * - Primary Blue: #154f95
 * - Primary Blue Dark: #0d3d7a
 * - Dark Blue: #0f172a
 * - Sidebar Gradient: #1e3a5f → #0f172a
 *
 * Copyright © 2025 Euclideum Solutions Private Limited.
 */

/* DEBUG: Verify CSS is loading - REMOVE AFTER TESTING */
/* .bg-surface-menu-bar {
    border: 5px solid red !important;
} */

/* ============================================
   FRAPPE UI CSS VARIABLE OVERRIDES
   ============================================ */

:root {
    /* Primary/Accent Colors */
    --primary: #154f95 !important;
    --primary-color: #154f95 !important;

    /* Content Area Colors */
    --surface-white: #ffffff !important;
    --surface-modal: #ffffff !important;
    --surface-cards: #ffffff !important;
    --surface-gray-1: #f8fafc !important;
    --surface-gray-2: #e2e8f0 !important;
    --surface-gray-3: #cbd5e1 !important;

    /* Text Colors for Content Area */
    --ink-gray-5: #64748b !important;
    --ink-gray-7: #475569 !important;
    --ink-gray-8: #334155 !important;
    --ink-gray-9: #0f172a !important;
}

/* Dark Mode - Content Area (Subtle Dark Blue Theme) */
.dark,
[data-theme="dark"] {
    --primary: #60a5fa !important;
    --primary-color: #60a5fa !important;

    /* Dark blue shades instead of pure black */
    --surface-white: #0c1222 !important;      /* Darkest - page bg */
    --surface-modal: #111a2e !important;      /* Modal/elevated bg */
    --surface-cards: #111a2e !important;      /* Cards bg */
    --surface-gray-1: #0f1729 !important;     /* Slightly elevated */
    --surface-gray-2: #1e293b !important;     /* Borders, dividers */
    --surface-gray-3: #334155 !important;     /* Heavier borders */

    --ink-gray-5: #94a3b8 !important;
    --ink-gray-7: #cbd5e1 !important;
    --ink-gray-8: #e2e8f0 !important;
    --ink-gray-9: #f1f5f9 !important;
}

/* ============================================
   SIDEBAR - LIGHT THEME (Light Mode)
   Premium white sidebar with blue accents
   ============================================ */

/* Sidebar container with subtle off-white background - LIGHT MODE */
/* Note: Width is controlled by Tailwind classes (w-56 expanded, w-14 collapsed) */
.bg-surface-menu-bar {
    background: #f8f9fb !important;
    border-right: 1px solid #e5e7eb !important;
}

/* Remove ALL dividers/borders inside sidebar */
.bg-surface-menu-bar .border-b,
.bg-surface-menu-bar > div > div.border-b,
.bg-surface-menu-bar .p-2.border-b,
.bg-surface-menu-bar > div:first-child > div:first-child,
.bg-surface-menu-bar [class*="border-b"],
.bg-surface-menu-bar div[class*="border"],
.bg-surface-menu-bar .p-2 {
    border-bottom: none !important;
    border-bottom-width: 0 !important;
    border-color: transparent !important;
}

/* Force remove border/shadow below UserDropdown wrapper */
.bg-surface-menu-bar > div:first-child > .p-2,
.bg-surface-menu-bar > div > .p-2,
.bg-surface-menu-bar .p-2,
.bg-surface-menu-bar .p-2::after,
.bg-surface-menu-bar > div:first-child::after {
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* Remove border from the flex-col container after UserDropdown */
.bg-surface-menu-bar > div.flex.flex-col > div.flex.flex-col,
.bg-surface-menu-bar > div:first-child > div:nth-child(2) {
    border-top: none !important;
}

/* Nuclear option: remove ALL internal borders */
.bg-surface-menu-bar * {
    border-top: none !important;
    border-top-width: 0 !important;
    border-bottom: none !important;
    border-bottom-width: 0 !important;
    border-top-color: transparent !important;
    border-bottom-color: transparent !important;
}

/* Target Frappe UI border classes specifically */
.bg-surface-menu-bar .border-surface-gray-3,
.bg-surface-menu-bar [class*="border-surface"],
.bg-surface-menu-bar .border-b-surface-gray-3,
.bg-surface-menu-bar hr {
    border: none !important;
    display: none !important;
}

/* Restore only the right border on the sidebar itself */
.bg-surface-menu-bar {
    border-right: 1px solid #e5e7eb !important;
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
}

/* ============================================
   SIDEBAR - DARK BLUE GRADIENT (Dark Mode)
   ============================================ */

.dark .bg-surface-menu-bar,
[data-theme="dark"] .bg-surface-menu-bar {
    background: linear-gradient(180deg, #1e3a5f 0%, #0f172a 100%) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Remove default border-r color */
.bg-surface-menu-bar.border-r {
    border-color: transparent !important;
}

/* ============================================
   SIDEBAR MENU ITEMS - DARK TEXT ON LIGHT (Light Mode)
   ============================================ */

/* Section labels (Home, Search, etc. group headers) */
.bg-surface-menu-bar .text-ink-gray-5 {
    color: #64748b !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
    letter-spacing: 0.5px !important;
}

/* Menu item text */
.bg-surface-menu-bar .text-ink-gray-7,
.bg-surface-menu-bar .text-ink-gray-8,
.bg-surface-menu-bar button span {
    color: #334155 !important;
}

/* Menu item icons - exclude logo SVG (which has viewBox attribute) */
.bg-surface-menu-bar svg:not([viewBox="0 0 80 79"]),
.bg-surface-menu-bar .stroke-1\.5 {
    stroke: #64748b !important;
    color: #64748b !important;
}

/* ============================================
   SIDEBAR MENU ITEMS - LIGHT TEXT ON DARK (Dark Mode)
   ============================================ */

/* Section labels - Dark mode */
.dark .bg-surface-menu-bar .text-ink-gray-5,
[data-theme="dark"] .bg-surface-menu-bar .text-ink-gray-5 {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Menu item text - Dark mode */
.dark .bg-surface-menu-bar .text-ink-gray-7,
.dark .bg-surface-menu-bar .text-ink-gray-8,
.dark .bg-surface-menu-bar button span,
[data-theme="dark"] .bg-surface-menu-bar .text-ink-gray-7,
[data-theme="dark"] .bg-surface-menu-bar .text-ink-gray-8,
[data-theme="dark"] .bg-surface-menu-bar button span {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Menu item icons - Dark mode - exclude logo SVG */
.dark .bg-surface-menu-bar svg:not([viewBox="0 0 80 79"]),
.dark .bg-surface-menu-bar .stroke-1\.5,
[data-theme="dark"] .bg-surface-menu-bar svg:not([viewBox="0 0 80 79"]),
[data-theme="dark"] .bg-surface-menu-bar .stroke-1\.5 {
    stroke: rgba(255, 255, 255, 0.7) !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Menu item height - increase for better touch targets */
.bg-surface-menu-bar button.h-7,
.bg-surface-menu-bar .h-7 {
    height: 40px !important;
    min-height: 40px !important;
}

/* Menu item container padding */
.bg-surface-menu-bar button > div {
    padding: 10px 12px !important;
}

/* Menu item rounded corners - ensure all buttons have proper border-radius */
.bg-surface-menu-bar button {
    border-radius: 10px !important;
    margin: 2px 0 !important;
    transition: all 0.2s ease !important;
}

/* Ensure border-radius is not overridden */
.bg-surface-menu-bar button,
.bg-surface-menu-bar button.h-7,
.bg-surface-menu-bar button.h-12,
.bg-surface-menu-bar .bg-surface-selected,
.bg-surface-menu-bar button.bg-surface-selected {
    border-radius: 10px !important;
}

/* ============================================
   SIDEBAR - HOVER STATES (Light Mode - Light Sidebar)
   ============================================ */

/* Hover state for menu items */
.bg-surface-menu-bar button:hover,
.bg-surface-menu-bar .hover\:bg-surface-gray-2:hover {
    background-color: #e2e8f0 !important;
    border-radius: 10px !important;
}

.bg-surface-menu-bar button:hover span {
    color: #0f172a !important;
}

.bg-surface-menu-bar button:hover svg:not([viewBox="0 0 80 79"]) {
    stroke: #0f172a !important;
    color: #0f172a !important;
}

/* ============================================
   SIDEBAR - HOVER STATES (Dark Mode - Dark Sidebar)
   ============================================ */

.dark .bg-surface-menu-bar button:hover,
.dark .bg-surface-menu-bar .hover\:bg-surface-gray-2:hover,
[data-theme="dark"] .bg-surface-menu-bar button:hover,
[data-theme="dark"] .bg-surface-menu-bar .hover\:bg-surface-gray-2:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
}

.dark .bg-surface-menu-bar button:hover span,
[data-theme="dark"] .bg-surface-menu-bar button:hover span {
    color: #ffffff !important;
}

.dark .bg-surface-menu-bar button:hover svg:not([viewBox="0 0 80 79"]),
[data-theme="dark"] .bg-surface-menu-bar button:hover svg:not([viewBox="0 0 80 79"]) {
    stroke: #ffffff !important;
    color: #ffffff !important;
}

/* ============================================
   SIDEBAR - ACTIVE STATE (Light Mode - Dark Blue Brand)
   ============================================ */

/* Active/Selected menu item - Brand blue background */
.bg-surface-menu-bar .bg-surface-selected,
.bg-surface-menu-bar button.bg-surface-selected {
    background: linear-gradient(135deg, #154f95 0%, #0d3d7a 100%) !important;
    box-shadow: 0 2px 8px rgba(21, 79, 149, 0.35) !important;
    border-radius: 10px !important;
}

/* Active item text - White */
.bg-surface-menu-bar .bg-surface-selected span,
.bg-surface-menu-bar button.bg-surface-selected span {
    color: #ffffff !important;
}

/* Active item icon - White (same as text) */
.bg-surface-menu-bar .bg-surface-selected svg,
.bg-surface-menu-bar button.bg-surface-selected svg,
.bg-surface-menu-bar .bg-surface-selected .stroke-1\.5,
.bg-surface-menu-bar button.bg-surface-selected .stroke-1\.5,
.bg-surface-menu-bar .bg-surface-selected svg path,
.bg-surface-menu-bar button.bg-surface-selected svg path,
.bg-surface-menu-bar .bg-surface-selected svg line,
.bg-surface-menu-bar button.bg-surface-selected svg line,
.bg-surface-menu-bar .bg-surface-selected svg circle,
.bg-surface-menu-bar button.bg-surface-selected svg circle,
.bg-surface-menu-bar .bg-surface-selected svg polyline,
.bg-surface-menu-bar button.bg-surface-selected svg polyline,
.bg-surface-menu-bar .bg-surface-selected svg rect,
.bg-surface-menu-bar button.bg-surface-selected svg rect {
    stroke: #ffffff !important;
    color: #ffffff !important;
    fill: none !important;
}

/* Active item icon fill for filled icons */
.bg-surface-menu-bar .bg-surface-selected svg[fill],
.bg-surface-menu-bar button.bg-surface-selected svg[fill] {
    fill: #ffffff !important;
}

/* ============================================
   SIDEBAR - ACTIVE STATE (Dark Mode - White)
   ============================================ */

/* Active/Selected menu item - White background */
.dark .bg-surface-menu-bar .bg-surface-selected,
.dark .bg-surface-menu-bar button.bg-surface-selected,
[data-theme="dark"] .bg-surface-menu-bar .bg-surface-selected,
[data-theme="dark"] .bg-surface-menu-bar button.bg-surface-selected {
    background: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    border-radius: 10px !important;
}

/* Active item text - Dark blue */
.dark .bg-surface-menu-bar .bg-surface-selected span,
.dark .bg-surface-menu-bar button.bg-surface-selected span,
[data-theme="dark"] .bg-surface-menu-bar .bg-surface-selected span,
[data-theme="dark"] .bg-surface-menu-bar button.bg-surface-selected span {
    color: #0f172a !important;
}

/* Active item icon - Dark blue (same as text) */
.dark .bg-surface-menu-bar .bg-surface-selected svg,
.dark .bg-surface-menu-bar button.bg-surface-selected svg,
.dark .bg-surface-menu-bar .bg-surface-selected .stroke-1\.5,
.dark .bg-surface-menu-bar button.bg-surface-selected .stroke-1\.5,
.dark .bg-surface-menu-bar .bg-surface-selected svg path,
.dark .bg-surface-menu-bar button.bg-surface-selected svg path,
.dark .bg-surface-menu-bar .bg-surface-selected svg line,
.dark .bg-surface-menu-bar button.bg-surface-selected svg line,
.dark .bg-surface-menu-bar .bg-surface-selected svg circle,
.dark .bg-surface-menu-bar button.bg-surface-selected svg circle,
.dark .bg-surface-menu-bar .bg-surface-selected svg polyline,
.dark .bg-surface-menu-bar button.bg-surface-selected svg polyline,
.dark .bg-surface-menu-bar .bg-surface-selected svg rect,
.dark .bg-surface-menu-bar button.bg-surface-selected svg rect,
[data-theme="dark"] .bg-surface-menu-bar .bg-surface-selected svg,
[data-theme="dark"] .bg-surface-menu-bar button.bg-surface-selected svg,
[data-theme="dark"] .bg-surface-menu-bar .bg-surface-selected .stroke-1\.5,
[data-theme="dark"] .bg-surface-menu-bar button.bg-surface-selected .stroke-1\.5,
[data-theme="dark"] .bg-surface-menu-bar .bg-surface-selected svg path,
[data-theme="dark"] .bg-surface-menu-bar button.bg-surface-selected svg path,
[data-theme="dark"] .bg-surface-menu-bar .bg-surface-selected svg line,
[data-theme="dark"] .bg-surface-menu-bar button.bg-surface-selected svg line,
[data-theme="dark"] .bg-surface-menu-bar .bg-surface-selected svg circle,
[data-theme="dark"] .bg-surface-menu-bar button.bg-surface-selected svg circle,
[data-theme="dark"] .bg-surface-menu-bar .bg-surface-selected svg polyline,
[data-theme="dark"] .bg-surface-menu-bar button.bg-surface-selected svg polyline,
[data-theme="dark"] .bg-surface-menu-bar .bg-surface-selected svg rect,
[data-theme="dark"] .bg-surface-menu-bar button.bg-surface-selected svg rect {
    stroke: #0f172a !important;
    color: #0f172a !important;
    fill: none !important;
}

/* Active item icon fill for filled icons - Dark mode */
.dark .bg-surface-menu-bar .bg-surface-selected svg[fill],
.dark .bg-surface-menu-bar button.bg-surface-selected svg[fill],
[data-theme="dark"] .bg-surface-menu-bar .bg-surface-selected svg[fill],
[data-theme="dark"] .bg-surface-menu-bar button.bg-surface-selected svg[fill] {
    fill: #0f172a !important;
}

/* ============================================
   SIDEBAR - USER DROPDOWN (Top Section)
   ============================================ */

/* User dropdown area */
.bg-surface-menu-bar [class*="UserDropdown"],
.bg-surface-menu-bar > div:first-child > div:first-child {
    border-bottom: 1px solid #e2e8f0 !important;
    padding-bottom: 12px !important;
    margin-bottom: 8px !important;
}

/* Dark mode - subtle border */
.dark .bg-surface-menu-bar [class*="UserDropdown"],
.dark .bg-surface-menu-bar > div:first-child > div:first-child,
[data-theme="dark"] .bg-surface-menu-bar [class*="UserDropdown"],
[data-theme="dark"] .bg-surface-menu-bar > div:first-child > div:first-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* User dropdown button - full width */
.bg-surface-menu-bar > div:first-child > div:first-child > button,
.bg-surface-menu-bar [class*="UserDropdown"] > button {
    width: 100% !important;
    padding: 8px 12px !important;
}

/* User dropdown inner container - full width */
.bg-surface-menu-bar > div:first-child > div:first-child > button > div,
.bg-surface-menu-bar [class*="UserDropdown"] > button > div {
    width: 100% !important;
    flex: 1 !important;
}

/* User info text container - allow full width */
.bg-surface-menu-bar > div:first-child > div:first-child > button > div > div:nth-child(2),
.bg-surface-menu-bar [class*="UserDropdown"] > button > div > div:nth-child(2) {
    flex: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

/* User name text */
.bg-surface-menu-bar .text-ink-gray-9,
.bg-surface-menu-bar .font-medium {
    color: #0f172a !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* User role/subtitle text */
.bg-surface-menu-bar .text-ink-gray-4,
.bg-surface-menu-bar .text-xs {
    color: #64748b !important;
}

/* Dropdown chevron - keep minimal space */
.bg-surface-menu-bar [class*="UserDropdown"] svg,
.bg-surface-menu-bar > div:first-child > div:first-child svg.ml-auto {
    stroke: #64748b !important;
    flex-shrink: 0 !important;
}

/* Dark mode - User name light text */
.dark .bg-surface-menu-bar .text-ink-gray-9,
.dark .bg-surface-menu-bar .font-medium,
[data-theme="dark"] .bg-surface-menu-bar .text-ink-gray-9,
[data-theme="dark"] .bg-surface-menu-bar .font-medium {
    color: #ffffff !important;
}

/* Dark mode - User role/subtitle */
.dark .bg-surface-menu-bar .text-ink-gray-4,
.dark .bg-surface-menu-bar .text-xs,
[data-theme="dark"] .bg-surface-menu-bar .text-ink-gray-4,
[data-theme="dark"] .bg-surface-menu-bar .text-xs {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Dark mode - Dropdown chevron */
.dark .bg-surface-menu-bar [class*="UserDropdown"] svg,
.dark .bg-surface-menu-bar > div:first-child > div:first-child svg.ml-auto,
[data-theme="dark"] .bg-surface-menu-bar [class*="UserDropdown"] svg,
[data-theme="dark"] .bg-surface-menu-bar > div:first-child > div:first-child svg.ml-auto {
    stroke: rgba(255, 255, 255, 0.7) !important;
}

/* User dropdown ACTIVE state - when clicked/open (white bg needs dark text) */
.bg-surface-menu-bar button[aria-expanded="true"],
.bg-surface-menu-bar button[data-headlessui-state="open"],
.bg-surface-menu-bar button.bg-surface-white,
.bg-surface-menu-bar .bg-surface-white {
    background-color: #ffffff !important;
    border-radius: 10px !important;
}

/* Force dark text when button has white background - use !important with high specificity */
.bg-surface-menu-bar button.bg-surface-white span,
.bg-surface-menu-bar button.bg-surface-white div,
.bg-surface-menu-bar button.bg-surface-white .text-ink-gray-9,
.bg-surface-menu-bar button.bg-surface-white .font-medium,
.bg-surface-menu-bar .bg-surface-white span,
.bg-surface-menu-bar .bg-surface-white div,
.bg-surface-menu-bar .bg-surface-white .text-ink-gray-9,
.bg-surface-menu-bar .bg-surface-white .font-medium,
.bg-surface-menu-bar button[aria-expanded="true"] span,
.bg-surface-menu-bar button[aria-expanded="true"] div,
.bg-surface-menu-bar button[aria-expanded="true"] .text-ink-gray-9,
.bg-surface-menu-bar button[aria-expanded="true"] .font-medium {
    color: #0f172a !important;
}

.bg-surface-menu-bar button.bg-surface-white .text-ink-gray-4,
.bg-surface-menu-bar button.bg-surface-white .text-xs,
.bg-surface-menu-bar .bg-surface-white .text-ink-gray-4,
.bg-surface-menu-bar .bg-surface-white .text-xs,
.bg-surface-menu-bar button[aria-expanded="true"] .text-ink-gray-4,
.bg-surface-menu-bar button[aria-expanded="true"] .text-xs {
    color: #64748b !important;
}

.bg-surface-menu-bar button.bg-surface-white svg,
.bg-surface-menu-bar .bg-surface-white svg,
.bg-surface-menu-bar button[aria-expanded="true"] svg {
    stroke: #475569 !important;
    color: #475569 !important;
}

/* DARK MODE - Active dropdown state (white bg needs dark text - override dark mode white text rules) */
.dark .bg-surface-menu-bar button[aria-expanded="true"],
.dark .bg-surface-menu-bar button[data-headlessui-state="open"],
.dark .bg-surface-menu-bar button.bg-surface-white,
.dark .bg-surface-menu-bar .bg-surface-white,
[data-theme="dark"] .bg-surface-menu-bar button[aria-expanded="true"],
[data-theme="dark"] .bg-surface-menu-bar button[data-headlessui-state="open"],
[data-theme="dark"] .bg-surface-menu-bar button.bg-surface-white,
[data-theme="dark"] .bg-surface-menu-bar .bg-surface-white {
    background-color: #ffffff !important;
    border-radius: 10px !important;
}

/* DARK MODE - Force dark text on active dropdown (override dark mode white text) */
.dark .bg-surface-menu-bar button[aria-expanded="true"] span,
.dark .bg-surface-menu-bar button[aria-expanded="true"] div,
.dark .bg-surface-menu-bar button[aria-expanded="true"] .text-ink-gray-9,
.dark .bg-surface-menu-bar button[aria-expanded="true"] .font-medium,
.dark .bg-surface-menu-bar button[data-headlessui-state="open"] span,
.dark .bg-surface-menu-bar button[data-headlessui-state="open"] div,
.dark .bg-surface-menu-bar button.bg-surface-white span,
.dark .bg-surface-menu-bar button.bg-surface-white div,
.dark .bg-surface-menu-bar .bg-surface-white span,
.dark .bg-surface-menu-bar .bg-surface-white div,
[data-theme="dark"] .bg-surface-menu-bar button[aria-expanded="true"] span,
[data-theme="dark"] .bg-surface-menu-bar button[aria-expanded="true"] div,
[data-theme="dark"] .bg-surface-menu-bar button[aria-expanded="true"] .text-ink-gray-9,
[data-theme="dark"] .bg-surface-menu-bar button[aria-expanded="true"] .font-medium,
[data-theme="dark"] .bg-surface-menu-bar button[data-headlessui-state="open"] span,
[data-theme="dark"] .bg-surface-menu-bar button[data-headlessui-state="open"] div,
[data-theme="dark"] .bg-surface-menu-bar button.bg-surface-white span,
[data-theme="dark"] .bg-surface-menu-bar button.bg-surface-white div,
[data-theme="dark"] .bg-surface-menu-bar .bg-surface-white span,
[data-theme="dark"] .bg-surface-menu-bar .bg-surface-white div {
    color: #0f172a !important;
}

/* DARK MODE - Secondary text on active dropdown */
.dark .bg-surface-menu-bar button[aria-expanded="true"] .text-ink-gray-4,
.dark .bg-surface-menu-bar button[aria-expanded="true"] .text-xs,
.dark .bg-surface-menu-bar button.bg-surface-white .text-ink-gray-4,
.dark .bg-surface-menu-bar button.bg-surface-white .text-xs,
[data-theme="dark"] .bg-surface-menu-bar button[aria-expanded="true"] .text-ink-gray-4,
[data-theme="dark"] .bg-surface-menu-bar button[aria-expanded="true"] .text-xs,
[data-theme="dark"] .bg-surface-menu-bar button.bg-surface-white .text-ink-gray-4,
[data-theme="dark"] .bg-surface-menu-bar button.bg-surface-white .text-xs {
    color: #64748b !important;
}

/* DARK MODE - Icons on active dropdown (dark stroke instead of white) */
.dark .bg-surface-menu-bar button[aria-expanded="true"] svg:not([viewBox="0 0 80 79"]),
.dark .bg-surface-menu-bar button.bg-surface-white svg:not([viewBox="0 0 80 79"]),
[data-theme="dark"] .bg-surface-menu-bar button[aria-expanded="true"] svg:not([viewBox="0 0 80 79"]),
[data-theme="dark"] .bg-surface-menu-bar button.bg-surface-white svg:not([viewBox="0 0 80 79"]) {
    stroke: #475569 !important;
    color: #475569 !important;
}

/* DARK MODE - Logo colors preserved when dropdown is active (green + white logo on white bg) */
.dark .bg-surface-menu-bar button[aria-expanded="true"] svg[viewBox="0 0 80 79"] path:first-of-type,
.dark .bg-surface-menu-bar button.bg-surface-white svg[viewBox="0 0 80 79"] path:first-of-type,
[data-theme="dark"] .bg-surface-menu-bar button[aria-expanded="true"] svg[viewBox="0 0 80 79"] path:first-of-type,
[data-theme="dark"] .bg-surface-menu-bar button.bg-surface-white svg[viewBox="0 0 80 79"] path:first-of-type {
    fill: #0E7159 !important;
    stroke: none !important;
}

.dark .bg-surface-menu-bar button[aria-expanded="true"] svg[viewBox="0 0 80 79"] path:last-of-type,
.dark .bg-surface-menu-bar button.bg-surface-white svg[viewBox="0 0 80 79"] path:last-of-type,
[data-theme="dark"] .bg-surface-menu-bar button[aria-expanded="true"] svg[viewBox="0 0 80 79"] path:last-of-type,
[data-theme="dark"] .bg-surface-menu-bar button.bg-surface-white svg[viewBox="0 0 80 79"] path:last-of-type {
    fill: #ffffff !important;
    stroke: none !important;
}

/* User dropdown - Chevron icon positioning (add right padding) */
.bg-surface-menu-bar button.h-12 svg.ml-auto,
.bg-surface-menu-bar button[aria-expanded] > div > svg:last-child {
    margin-right: 8px !important;
}

/* Ensure chevron has proper spacing in expanded state */
.bg-surface-menu-bar.w-56 button.h-12 svg.ml-auto,
.bg-surface-menu-bar:not(.w-14) button.h-12 > div > svg:last-child {
    margin-right: 8px !important;
    flex-shrink: 0 !important;
}

/* ============================================
   SIDEBAR - BOTTOM ICONS (Collapse only)
   ============================================ */

/* Hide the container with Zap (Powered by Learning) and CircleHelp icons */
.bg-surface-menu-bar > div:last-child > div.flex.items-center.mt-4 > div.flex.items-center.flex-1 {
    display: none !important;
}

/* Position the collapse button container to the right */
.bg-surface-menu-bar > div:last-child > div.flex.items-center.mt-4 {
    justify-content: flex-end !important;
}

/* Style the collapse icon */
.bg-surface-menu-bar > div:last-child svg {
    color: #94a3b8 !important;
    stroke: #94a3b8 !important;
    transition: all 0.2s ease !important;
}

.bg-surface-menu-bar > div:last-child svg:hover {
    color: #0f172a !important;
    stroke: #0f172a !important;
}

/* Dark mode - collapse icon */
.dark .bg-surface-menu-bar > div:last-child svg,
[data-theme="dark"] .bg-surface-menu-bar > div:last-child svg {
    color: rgba(255, 255, 255, 0.6) !important;
    stroke: rgba(255, 255, 255, 0.6) !important;
}

.dark .bg-surface-menu-bar > div:last-child svg:hover,
[data-theme="dark"] .bg-surface-menu-bar > div:last-child svg:hover {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

/* ============================================
   SIDEBAR - COLLAPSED STATE
   ============================================ */

/* Collapsed sidebar styling - don't override width, let Tailwind handle it */
.bg-surface-menu-bar.w-14 {
    padding: 8px 4px !important;
}

/* Collapsed sidebar - ALL buttons should have border-radius */
.bg-surface-menu-bar.w-14 button {
    border-radius: 10px !important;
}

/* Collapsed sidebar - active state - VERY specific selector */
.bg-surface-menu-bar.w-14 button.bg-surface-selected,
.bg-surface-menu-bar.w-14 button.rounded.bg-surface-selected,
.bg-surface-menu-bar.w-14 .bg-surface-selected {
    border-radius: 10px !important;
}

/* Collapsed sidebar - hover state */
.bg-surface-menu-bar.w-14 button:hover {
    border-radius: 10px !important;
}

/* Collapsed sidebar - center menu items (exclude user dropdown button) */
.bg-surface-menu-bar.w-14 button.h-7 {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    border-radius: 10px !important;
}

/* Collapsed sidebar - collapse button centered */
.bg-surface-menu-bar.w-14 > div:last-child > div.flex.items-center {
    justify-content: center !important;
}

/* Collapsed sidebar - User dropdown wrapper */
.bg-surface-menu-bar.w-14 .p-2 {
    padding: 4px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Collapsed sidebar - User dropdown button */
.bg-surface-menu-bar.w-14 button.h-12 {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
    overflow: visible !important;
}

/* ============================================
   SIDEBAR - "MORE" SECTION (Show links, hide header)
   ============================================ */

/* Keep the container visible but reduce top margin */
.bg-surface-menu-bar > div:first-child > div.mt-4 {
    margin-top: 0 !important;
    padding: 0 8px !important;
}

/* Hide the header row (arrow + "More" text + plus button) */
.bg-surface-menu-bar > div:first-child > div.mt-4 > div.flex.items-center.justify-between {
    display: none !important;
}

/* Force the links container to always be visible (override the hidden class) */
.bg-surface-menu-bar > div:first-child > div.mt-4 > div.flex.flex-col {
    display: flex !important;
}

/* Style Assessments link wrapper to match main menu items */
.bg-surface-menu-bar > div:first-child > div.mt-4 > div.flex.flex-col > div {
    margin: 0 !important;
}

/* Make the Assessments button styling match other menu items */
.bg-surface-menu-bar > div:first-child > div.mt-4 button {
    width: 100% !important;
    margin: 2px 0 !important;
}

/* Ensure nav container uses available space properly */
.bg-surface-menu-bar > div:first-child {
    flex: 1 !important;
    justify-content: flex-start !important;
}

/* ============================================
   SIDEBAR - NOTIFICATION COUNT BADGE
   ============================================ */

.bg-surface-menu-bar .text-ink-gray-5.text-xs,
.bg-surface-menu-bar span.text-xs {
    color: #475569 !important;
    background-color: #e2e8f0 !important;
    padding: 2px 6px !important;
    border-radius: 10px !important;
}

/* Dark mode - badge on dark sidebar */
.dark .bg-surface-menu-bar .text-ink-gray-5.text-xs,
.dark .bg-surface-menu-bar span.text-xs,
[data-theme="dark"] .bg-surface-menu-bar .text-ink-gray-5.text-xs,
[data-theme="dark"] .bg-surface-menu-bar span.text-xs {
    color: rgba(255, 255, 255, 0.6) !important;
    background-color: rgba(255, 255, 255, 0.15) !important;
}

/* ============================================
   SIDEBAR - SCROLLBAR
   ============================================ */

.bg-surface-menu-bar::-webkit-scrollbar {
    width: 6px;
}

.bg-surface-menu-bar::-webkit-scrollbar-track {
    background: transparent;
}

.bg-surface-menu-bar::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 3px;
}

.bg-surface-menu-bar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.25);
}

/* Dark mode scrollbar - lighter thumb on dark bg */
.dark .bg-surface-menu-bar::-webkit-scrollbar-thumb,
[data-theme="dark"] .bg-surface-menu-bar::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.2);
}

.dark .bg-surface-menu-bar::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .bg-surface-menu-bar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

/* ============================================
   CONTENT AREA - HEADER
   ============================================ */

/* Sticky header */
header.sticky,
.sticky.border-b {
    background-color: var(--surface-white) !important;
    border-color: var(--surface-gray-2) !important;
}

/* ============================================
   CONTENT AREA - CREATE BUTTON
   ============================================ */

/* "+ Create" button - Header action buttons only */
header button.text-ink-white,
header button[class*="text-ink-white"],
.sticky button.text-ink-white,
.sticky button[class*="text-ink-white"] {
    background: #154f95 !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
}

header button.text-ink-white:hover,
header button[class*="text-ink-white"]:hover,
.sticky button.text-ink-white:hover,
.sticky button[class*="text-ink-white"]:hover {
    background: #0d3d7a !important;
}

/* Dark mode Create button */
.dark header button.text-ink-white,
.dark .sticky button.text-ink-white,
[data-theme="dark"] header button.text-ink-white,
[data-theme="dark"] .sticky button.text-ink-white {
    background: #3294E3 !important;
}

.dark header button.text-ink-white:hover,
.dark .sticky button.text-ink-white:hover,
[data-theme="dark"] header button.text-ink-white:hover,
[data-theme="dark"] .sticky button.text-ink-white:hover {
    background: #2080d0 !important;
}

/* ============================================
   CONTENT AREA - TAB BUTTONS
   ============================================ */

/* Tab container background - only for TabButtons, not all bg-surface-gray-2 */
[class*="TabButtons"] {
    background-color: #f1f5f9 !important;
    border-radius: 8px !important;
    padding: 6px !important;
}

.dark [class*="TabButtons"],
[data-theme="dark"] [class*="TabButtons"] {
    background-color: #1e293b !important;
}

/* Individual tab buttons - consistent padding all sides */
[class*="TabButtons"] button {
    padding: 10px 16px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

/* Active tab - only in TabButtons context */
[class*="TabButtons"] button.bg-surface-white {
    background-color: #ffffff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    border-radius: 6px !important;
}

.dark [class*="TabButtons"] button.bg-surface-white,
[data-theme="dark"] [class*="TabButtons"] button.bg-surface-white {
    background-color: #1e3a5f !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

/* Inactive tab hover - needs good contrast */
[class*="TabButtons"] button:not(.bg-surface-white):hover {
    background-color: #cbd5e1 !important;
    border-radius: 6px !important;
}

.dark [class*="TabButtons"] button:not(.bg-surface-white):hover,
[data-theme="dark"] [class*="TabButtons"] button:not(.bg-surface-white):hover {
    background-color: #0f172a !important;
}

/* ============================================
   CONTENT AREA - FORM CONTROLS
   ============================================ */

/* Input field backgrounds - Light mode: clean white */
/* Note: Exclude checkbox and radio inputs to preserve their native/custom behavior */
input:not([type="checkbox"]):not([type="radio"]),
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="url"],
textarea,
select,
.bg-surface-gray-2 input:not([type="checkbox"]):not([type="radio"]),
.bg-surface-gray-2 textarea,
.bg-surface-gray-2 select,
[class*="Input"] input:not([type="checkbox"]):not([type="radio"]),
[class*="TextInput"] input:not([type="checkbox"]):not([type="radio"]),
[class*="FormControl"] input:not([type="checkbox"]):not([type="radio"]) {
    background-color: #ffffff !important;
    color: #1e293b !important;
}

/* Dark mode input backgrounds */
/* Note: Exclude checkbox and radio inputs to preserve their native/custom behavior */
.dark input:not([type="checkbox"]):not([type="radio"]),
.dark input[type="text"],
.dark input[type="email"],
.dark input[type="password"],
.dark input[type="search"],
.dark input[type="number"],
.dark input[type="tel"],
.dark input[type="url"],
.dark textarea,
.dark select,
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]),
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] input[type="url"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
}

/* Input placeholder text */
input::placeholder,
textarea::placeholder {
    color: #94a3b8 !important;
}

.dark input::placeholder,
.dark textarea::placeholder,
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: #64748b !important;
}

/* Search input and dropdowns */
input[class*="rounded"],
select[class*="rounded"],
.border.rounded-md {
    border-radius: 8px !important;
    border-color: #e2e8f0 !important;
}

.dark input[class*="rounded"],
.dark select[class*="rounded"],
[data-theme="dark"] input[class*="rounded"],
[data-theme="dark"] select[class*="rounded"] {
    border-color: #334155 !important;
}

input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus {
    border-color: #154f95 !important;
    box-shadow: 0 0 0 3px rgba(21, 79, 149, 0.1) !important;
    outline: none !important;
}

.dark input:not([type="checkbox"]):not([type="radio"]):focus,
.dark select:focus,
.dark textarea:focus,
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
    border-color: #3294E3 !important;
    box-shadow: 0 0 0 3px rgba(50, 148, 227, 0.1) !important;
}

/* ============================================
   CONTENT AREA - CARDS
   ============================================ */

.bg-surface-cards,
[class*="rounded-md"][class*="border"] {
    background-color: var(--surface-cards) !important;
    border-radius: 12px !important;
    border-color: var(--surface-gray-2) !important;
}

/* ============================================
   CONTENT AREA - EMPTY STATE
   ============================================ */

.text-ink-gray-4 {
    color: #94a3b8 !important;
}

.dark .text-ink-gray-4,
[data-theme="dark"] .text-ink-gray-4 {
    color: #6b7280 !important;
}

/* ============================================
   DROPDOWN MENUS & MODALS
   ============================================ */

.bg-surface-modal,
[class*="Dropdown"] {
    background-color: var(--surface-modal) !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
}

/* Fix modal bottom shadow issue - frappe-ui Dialog */
[role="dialog"],
[role="dialog"] > div,
[role="dialog"] [class*="rounded"],
[role="dialog"] .bg-surface-modal,
.fixed.inset-0 [class*="rounded"],
.fixed.inset-0 .bg-surface-modal {
    box-shadow: none !important;
}

/* Modal outer container - only outer shadow */
[role="dialog"] > div > div.bg-surface-modal,
.fixed.inset-0 > div > div.bg-surface-modal {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
    overflow: hidden !important;
}

/* Modal content area - no internal shadows */
[role="dialog"] .bg-surface-modal > div,
[role="dialog"] .bg-surface-modal section,
[role="dialog"] .bg-surface-modal footer,
[role="dialog"] .bg-surface-modal header {
    box-shadow: none !important;
    background: transparent !important;
}

/* Modal body content */
[role="dialog"] .bg-surface-modal {
    background-color: #ffffff !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

.dark [role="dialog"] .bg-surface-modal,
[data-theme="dark"] [role="dialog"] .bg-surface-modal {
    background-color: #111a2e !important;
}

/* Modal footer - remove any shadow/border that creates visual artifact */
[role="dialog"] .bg-surface-modal > div:last-child,
[role="dialog"] footer,
[role="dialog"] .sticky.bottom-0,
[role="dialog"] [class*="footer"] {
    box-shadow: none !important;
    border-top: none !important;
    background: inherit !important;
}

/* ============================================
   USER PROFILE DROPDOWN - Fix text visibility
   ============================================ */

/* User dropdown container - ensure proper background for dropdown menus only */
[data-headlessui-state] > div,
.bg-surface-menu-bar [data-headlessui-state] > div,
div[class*="popover"] {
    background-color: #ffffff !important;
}

.dark div[class*="popover"],
[data-theme="dark"] div[class*="popover"],
.dark [data-headlessui-state] > div,
[data-theme="dark"] [data-headlessui-state] > div {
    background-color: #111a2e !important;
}

/* Dropdown menu items - ensure dark text on light bg */
[data-headlessui-state] button,
[data-headlessui-state] a,
div[class*="popover"] button,
div[class*="popover"] a {
    color: #0f172a !important;
}

[data-headlessui-state] button span,
[data-headlessui-state] a span,
div[class*="popover"] button span,
div[class*="popover"] a span {
    color: #0f172a !important;
}

[data-headlessui-state] button svg,
[data-headlessui-state] a svg,
div[class*="popover"] button svg,
div[class*="popover"] a svg {
    color: #475569 !important;
    stroke: #475569 !important;
}

/* Dark mode dropdown text */
.dark [data-headlessui-state] button,
.dark [data-headlessui-state] a,
[data-theme="dark"] [data-headlessui-state] button,
[data-theme="dark"] [data-headlessui-state] a,
.dark div[class*="popover"] button,
.dark div[class*="popover"] a,
[data-theme="dark"] div[class*="popover"] button,
[data-theme="dark"] div[class*="popover"] a {
    color: #f8f8f8 !important;
}

.dark [data-headlessui-state] button span,
.dark [data-headlessui-state] a span,
[data-theme="dark"] [data-headlessui-state] button span,
[data-theme="dark"] [data-headlessui-state] a span,
.dark div[class*="popover"] button span,
.dark div[class*="popover"] a span,
[data-theme="dark"] div[class*="popover"] button span,
[data-theme="dark"] div[class*="popover"] a span {
    color: #f8f8f8 !important;
}

.dark [data-headlessui-state] button svg,
.dark [data-headlessui-state] a svg,
[data-theme="dark"] [data-headlessui-state] button svg,
[data-theme="dark"] [data-headlessui-state] a svg,
.dark div[class*="popover"] button svg,
.dark div[class*="popover"] a svg,
[data-theme="dark"] div[class*="popover"] button svg,
[data-theme="dark"] div[class*="popover"] a svg {
    color: #9ca3af !important;
    stroke: #9ca3af !important;
}

/* Dropdown hover state */
[data-headlessui-state] button:hover,
[data-headlessui-state] a:hover,
div[class*="popover"] button:hover,
div[class*="popover"] a:hover {
    background-color: #f1f5f9 !important;
}

.dark [data-headlessui-state] button:hover,
.dark [data-headlessui-state] a:hover,
[data-theme="dark"] [data-headlessui-state] button:hover,
[data-theme="dark"] [data-headlessui-state] a:hover,
.dark div[class*="popover"] button:hover,
.dark div[class*="popover"] a:hover,
[data-theme="dark"] div[class*="popover"] button:hover,
[data-theme="dark"] div[class*="popover"] a:hover {
    background-color: #1e293b !important;
}

/* ============================================
   GENERAL BUTTON STYLING
   ============================================ */

/* Primary buttons in content area */
button.bg-surface-gray-7,
.bg-surface-gray-7 {
    background: linear-gradient(135deg, #154f95 0%, #0d3d7a 100%) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
}

button.bg-surface-gray-7:hover,
.bg-surface-gray-7:hover {
    background: linear-gradient(135deg, #1a5fae 0%, #154f95 100%) !important;
}

.dark button.bg-surface-gray-7,
[data-theme="dark"] button.bg-surface-gray-7 {
    background: linear-gradient(135deg, #3294E3 0%, #2080d0 100%) !important;
}

/* Ghost/Outline buttons */
button[class*="ghost"],
button.border {
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}

/* ============================================
   LOGO IN SIDEBAR - LMSLogo SVG
   Target: svg[viewBox="0 0 80 79"] (the LMSLogo component)
   ============================================ */

/* LMSLogo SVG - Force visibility and correct sizing */
.bg-surface-menu-bar svg[viewBox="0 0 80 79"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
    flex-shrink: 0 !important;
    border-radius: 6px !important;
    overflow: visible !important;
    /* Reset any inherited properties */
    stroke: none !important;
    color: inherit !important;
    /* Ensure it doesn't get hidden */
    position: relative !important;
    z-index: 1 !important;
}

/* LMSLogo - First path (green rounded rectangle background) */
.bg-surface-menu-bar svg[viewBox="0 0 80 79"] path:first-of-type {
    fill: #0E7159 !important;
    stroke: none !important;
}

/* LMSLogo - Second path (white book icon) */
.bg-surface-menu-bar svg[viewBox="0 0 80 79"] path:last-of-type {
    fill: #ffffff !important;
    stroke: none !important;
}

/* Ensure logo is visible even on hover */
.bg-surface-menu-bar button:hover svg[viewBox="0 0 80 79"] path:first-of-type {
    fill: #0E7159 !important;
}
.bg-surface-menu-bar button:hover svg[viewBox="0 0 80 79"] path:last-of-type {
    fill: #ffffff !important;
}

/* Dark mode - same logo colors (green + white works on dark bg too) */
.dark .bg-surface-menu-bar svg[viewBox="0 0 80 79"] path:first-of-type,
[data-theme="dark"] .bg-surface-menu-bar svg[viewBox="0 0 80 79"] path:first-of-type {
    fill: #0E7159 !important;
}
.dark .bg-surface-menu-bar svg[viewBox="0 0 80 79"] path:last-of-type,
[data-theme="dark"] .bg-surface-menu-bar svg[viewBox="0 0 80 79"] path:last-of-type {
    fill: #ffffff !important;
}

/* User dropdown button containing the logo - expanded state */
.bg-surface-menu-bar button.h-12 {
    display: flex !important;
    align-items: center !important;
    border-radius: 10px !important;
}

/* Light mode - don't invert img (light sidebar) */
.bg-surface-menu-bar img {
    filter: none !important;
}

/* Dark mode - invert img logo to white (dark sidebar) */
.dark .bg-surface-menu-bar img:not([src*="lms"]),
[data-theme="dark"] .bg-surface-menu-bar img:not([src*="lms"]) {
    filter: brightness(0) invert(1) !important;
}

/* Dark mode - BUT don't invert when dropdown is active (white background) */
.dark .bg-surface-menu-bar button[aria-expanded="true"] img,
.dark .bg-surface-menu-bar button.bg-surface-white img,
[data-theme="dark"] .bg-surface-menu-bar button[aria-expanded="true"] img,
[data-theme="dark"] .bg-surface-menu-bar button.bg-surface-white img {
    filter: none !important;
}

/* ============================================
   COLLAPSED STATE - LOGO VISIBILITY FIX
   ============================================ */

/* Collapsed state - ensure the hidden text/chevron divs don't affect layout */
.bg-surface-menu-bar.w-14 button.h-12 > div.opacity-0 {
    display: none !important;
}

/* Collapsed state - Logo SVG must be visible */
.bg-surface-menu-bar.w-14 svg[viewBox="0 0 80 79"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    position: static !important;
}

/* Collapsed state - Ensure img logo is visible too */
.bg-surface-menu-bar.w-14 button.h-12 img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 32px !important;
    height: 32px !important;
}

/* ============================================
   COURSE CARDS - Prominent Clean Design
   ============================================ */

/* Card Container */
.grid a > div.flex.flex-col.h-full {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    overflow: hidden !important;
    transition: border-radius 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
}

/* Hover Effect - Border radius change */
.grid a > div.flex.flex-col.h-full:hover {
    border-radius: 20px !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

/* Dark mode card */
.dark .grid a > div.flex.flex-col.h-full,
[data-theme="dark"] .grid a > div.flex.flex-col.h-full {
    background: #111a2e !important;
    border: 1px solid #1e293b !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

.dark .grid a > div.flex.flex-col.h-full:hover,
[data-theme="dark"] .grid a > div.flex.flex-col.h-full:hover {
    border-radius: 20px !important;
    border-color: #334155 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

/* Image Section */
.grid a > div.flex.flex-col.h-full > div:first-child {
    border: none !important;
    border-radius: 11px 11px 0 0 !important;
    height: 240px !important;
    transition: border-radius 0.25s ease !important;
}

/* Image hover - match container radius */
.grid a > div.flex.flex-col.h-full:hover > div:first-child {
    border-radius: 19px 19px 0 0 !important;
}

/* Batch Cards - Reset image-section height that leaks into batch title */
.grid a > div.flex.flex-col.h-full.p-4 > div:first-child {
    height: auto !important;
    border-radius: 0 !important;
}

/* Content Section */
.grid a > div.flex.flex-col.h-full > div.flex.flex-col.flex-auto {
    border: none !important;
    border-radius: 0 0 11px 11px !important;
    padding: 16px !important;
    background: #ffffff !important;
    transition: all 0.4s ease !important;
}

/* Content hover - match container radius */
.grid a > div.flex.flex-col.h-full:hover > div.flex.flex-col.flex-auto {
    border-radius: 0 0 19px 19px !important;
    background: #ffffff !important;
}

.dark .grid a > div.flex.flex-col.h-full > div.flex.flex-col.flex-auto,
[data-theme="dark"] .grid a > div.flex.flex-col.h-full > div.flex.flex-col.flex-auto {
    background: #111a2e !important;
    transition: all 0.4s ease !important;
}

/* Dark mode content hover - plain background (no glow) */
.dark .grid a > div.flex.flex-col.h-full:hover > div.flex.flex-col.flex-auto,
[data-theme="dark"] .grid a > div.flex.flex-col.h-full:hover > div.flex.flex-col.flex-auto {
    border-radius: 0 0 19px 19px !important;
    background: #111a2e !important;
}

/* Meta Row - Clean inline */
.grid a > div.flex.flex-col.h-full .flex.items-center.justify-between.mb-2 {
    margin-bottom: 16px !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
    gap: 16px !important;
}

/* Meta Items - Minimal style */
.grid a > div.flex.flex-col.h-full .flex.items-center.justify-between.mb-2 > div {
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

/* Meta Icons - exclude featured Award icon */
.grid a > div.flex.flex-col.h-full .flex.items-center.justify-between.mb-2 svg:not(.text-ink-amber-3) {
    color: #94a3b8 !important;
    stroke: #94a3b8 !important;
    width: 16px !important;
    height: 16px !important;
}

.dark .grid a > div.flex.flex-col.h-full .flex.items-center.justify-between.mb-2 svg:not(.text-ink-amber-3),
[data-theme="dark"] .grid a > div.flex.flex-col.h-full .flex.items-center.justify-between.mb-2 svg:not(.text-ink-amber-3) {
    color: #6b7280 !important;
    stroke: #6b7280 !important;
}

/* Meta Text */
.grid a > div.flex.flex-col.h-full .flex.items-center.justify-between.mb-2 span {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #64748b !important;
}

.dark .grid a > div.flex.flex-col.h-full .flex.items-center.justify-between.mb-2 span,
[data-theme="dark"] .grid a > div.flex.flex-col.h-full .flex.items-center.justify-between.mb-2 span {
    color: #9ca3af !important;
}

/* Course Title */
.grid a > div.flex.flex-col.h-full .font-semibold.leading-6 {
    font-weight: 600 !important;
    font-size: 16px !important;
    color: #0f172a !important;
    line-height: 1.4 !important;
    margin-bottom: 8px !important;
}

.dark .grid a > div.flex.flex-col.h-full .font-semibold.leading-6,
[data-theme="dark"] .grid a > div.flex.flex-col.h-full .font-semibold.leading-6 {
    color: #ffffff !important;
}

/* Short Description */
.grid a > div.flex.flex-col.h-full .short-introduction {
    font-size: 14px !important;
    color: #64748b !important;
    line-height: 1.5 !important;
    margin: 0 0 16px !important;
}

.dark .grid a > div.flex.flex-col.h-full .short-introduction,
[data-theme="dark"] .grid a > div.flex.flex-col.h-full .short-introduction {
    color: #9ca3af !important;
}

/* Bottom Section - Instructor + Price */
.grid a > div.flex.flex-col.h-full .flex.items-center.justify-between.mt-auto {
    padding-top: 14px !important;
    border-top: 1px solid #f1f5f9 !important;
    margin-top: auto !important;
}

.dark .grid a > div.flex.flex-col.h-full .flex.items-center.justify-between.mt-auto,
[data-theme="dark"] .grid a > div.flex.flex-col.h-full .flex.items-center.justify-between.mt-auto {
    border-top: 1px solid #1e293b !important;
}

/* Instructor Avatar */
.grid a > div.flex.flex-col.h-full .h-6.mr-1 img,
.grid a > div.flex.flex-col.h-full .avatar-group .avatar {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    border: none !important;
}

.grid a > div.flex.flex-col.h-full .h-6.mr-1 {
    height: auto !important;
}

/* Instructor Name */
.grid a > div.flex.flex-col.h-full .flex.items-center.justify-between.mt-auto .text-sm {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #475569 !important;
}

.dark .grid a > div.flex.flex-col.h-full .flex.items-center.justify-between.mt-auto .text-sm,
[data-theme="dark"] .grid a > div.flex.flex-col.h-full .flex.items-center.justify-between.mt-auto .text-sm {
    color: #9ca3af !important;
}

/* Price - Clean */
.grid a > div.flex.flex-col.h-full .flex.items-center.space-x-2 .font-semibold {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    background: none !important;
    padding: 0 !important;
}

.dark .grid a > div.flex.flex-col.h-full .flex.items-center.space-x-2 .font-semibold,
[data-theme="dark"] .grid a > div.flex.flex-col.h-full .flex.items-center.space-x-2 .font-semibold {
    color: #ffffff !important;
    background: none !important;
}

/* Certification Icon */
.grid a > div.flex.flex-col.h-full .size-5.stroke-1\.5.text-ink-gray-7 {
    color: #154f95 !important;
    stroke: #154f95 !important;
}

.dark .grid a > div.flex.flex-col.h-full .size-5.stroke-1\.5.text-ink-gray-7,
[data-theme="dark"] .grid a > div.flex.flex-col.h-full .size-5.stroke-1\.5.text-ink-gray-7 {
    color: #3294E3 !important;
    stroke: #3294E3 !important;
}

/* Progress Bar */
.grid a > div.flex.flex-col.h-full .w-full.rounded-full {
    height: 6px !important;
    background: #e2e8f0 !important;
    border-radius: 100px !important;
}

.grid a > div.flex.flex-col.h-full .w-full.rounded-full > div {
    background: linear-gradient(90deg, #154f95, #3294E3) !important;
    border-radius: 100px !important;
}

.dark .grid a > div.flex.flex-col.h-full .w-full.rounded-full,
[data-theme="dark"] .grid a > div.flex.flex-col.h-full .w-full.rounded-full {
    background: #1e293b !important;
}

.dark .grid a > div.flex.flex-col.h-full .w-full.rounded-full > div,
[data-theme="dark"] .grid a > div.flex.flex-col.h-full .w-full.rounded-full > div {
    background: linear-gradient(90deg, #3294E3, #60a5fa) !important;
}

/* Progress Text */
.grid a > div.flex.flex-col.h-full .text-sm.mt-2.mb-4 {
    color: #154f95 !important;
    font-weight: 600 !important;
    font-size: 13px !important;
}

.dark .grid a > div.flex.flex-col.h-full .text-sm.mt-2.mb-4,
[data-theme="dark"] .grid a > div.flex.flex-col.h-full .text-sm.mt-2.mb-4 {
    color: #3294E3 !important;
}

/* Featured Badge - Amber accent icon */
.grid a > div.flex.flex-col.h-full .text-ink-amber-3 {
    color: #f59e0b !important;
    stroke: #f59e0b !important;
}

.dark .grid a > div.flex.flex-col.h-full .text-ink-amber-3,
[data-theme="dark"] .grid a > div.flex.flex-col.h-full .text-ink-amber-3 {
    color: #fbbf24 !important;
    stroke: #fbbf24 !important;
}

/* No Image Card - Better title visibility */
.grid a > div.flex.flex-col.h-full > div:first-child .text-white.font-extrabold {
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4) !important;
    padding: 20px !important;
}

/* Grid Gap - Minimal for tight card layout */
.grid.grid-cols-1 {
    gap: 12px !important;
}

/* Course Card Grid - 3 columns with minimal gap */
.grid[class*="grid-cols"] {
    gap: 12px !important;
}

/* 3 columns on large screens */
@media (min-width: 1024px) {
    .grid.lg\:grid-cols-3 {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* Course card thumbnail image - cover fill */
.grid a > div.flex.flex-col.h-full > div:first-child img {
    object-fit: cover !important;
    width: 100% !important;
    height: 100% !important;
}

/* Ensure image container clips overflow */
.grid a > div.flex.flex-col.h-full > div:first-child {
    overflow: hidden !important;
}

/* ============================================
   COURSE PAGE HEADER - Clean styling
   ============================================ */

/* Page Title */
h1.text-4xl,
.text-4xl.font-bold {
    font-weight: 800 !important;
    color: var(--ink-gray-9) !important;
}

/* Tab Buttons on Course Page */
.flex.items-center.space-x-2 button {
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}

/* ============================================
   COURSE DETAIL PAGE - Clean Professional Style
   ============================================ */

/* Course Title - Big Heading */
.text-3xl.font-semibold.text-ink-gray-9 {
    font-size: 2.75rem !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    color: #0f172a !important;
    letter-spacing: -0.02em !important;
}

.dark .text-3xl.font-semibold.text-ink-gray-9,
[data-theme="dark"] .text-3xl.font-semibold.text-ink-gray-9 {
    color: #ffffff !important;
}

/* Short Introduction */
.my-3.leading-6.text-ink-gray-7 {
    font-size: 1rem !important;
    line-height: 1.6 !important;
    color: #64748b !important;
}

.dark .my-3.leading-6.text-ink-gray-7,
[data-theme="dark"] .my-3.leading-6.text-ink-gray-7 {
    color: #9ca3af !important;
}

/* Tags styling */
.flex.my-4.w-fit {
    gap: 8px !important;
}

.flex.my-4.w-fit .badge,
.flex.my-4.w-fit [class*="Badge"] {
    background: #f1f5f9 !important;
    color: #334155 !important;
    border: 1px solid #e2e8f0 !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

.dark .flex.my-4.w-fit .badge,
.dark .flex.my-4.w-fit [class*="Badge"],
[data-theme="dark"] .flex.my-4.w-fit .badge,
[data-theme="dark"] .flex.my-4.w-fit [class*="Badge"] {
    background: #1e293b !important;
    color: #e2e8f0 !important;
    border-color: #334155 !important;
}

/* ============================================
   SIDEBAR CARD - Premium Styling
   ============================================ */

/* Sidebar Card Container */
.border-2.rounded-md.min-w-80.max-w-sm {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    overflow: hidden !important;
}

.dark .border-2.rounded-md.min-w-80.max-w-sm,
[data-theme="dark"] .border-2.rounded-md.min-w-80.max-w-sm {
    background: #111a2e !important;
    border-color: #1e293b !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

/* Video iframe */
.border-2.rounded-md.min-w-80.max-w-sm iframe {
    border-radius: 16px 16px 0 0 !important;
}

/* Sidebar content padding */
.border-2.rounded-md.min-w-80.max-w-sm > .p-5 {
    padding: 24px !important;
}

/* Price Display */
.border-2.rounded-md.min-w-80.max-w-sm .text-2xl.font-semibold {
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin-bottom: 16px !important;
}

.dark .border-2.rounded-md.min-w-80.max-w-sm .text-2xl.font-semibold,
[data-theme="dark"] .border-2.rounded-md.min-w-80.max-w-sm .text-2xl.font-semibold {
    color: #ffffff !important;
}

/* Primary Action Buttons */
.border-2.rounded-md.min-w-80.max-w-sm button[class*="variant-solid"],
.border-2.rounded-md.min-w-80.max-w-sm a button[class*="variant-solid"] {
    background: #154f95 !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    transition: all 0.2s ease !important;
}

.border-2.rounded-md.min-w-80.max-w-sm button[class*="variant-solid"]:hover,
.border-2.rounded-md.min-w-80.max-w-sm a button[class*="variant-solid"]:hover {
    background: #0d3d7a !important;
}

.dark .border-2.rounded-md.min-w-80.max-w-sm button[class*="variant-solid"],
[data-theme="dark"] .border-2.rounded-md.min-w-80.max-w-sm button[class*="variant-solid"] {
    background: #3294E3 !important;
}

.dark .border-2.rounded-md.min-w-80.max-w-sm button[class*="variant-solid"]:hover,
[data-theme="dark"] .border-2.rounded-md.min-w-80.max-w-sm button[class*="variant-solid"]:hover {
    background: #2080d0 !important;
}

/* Secondary Buttons */
.border-2.rounded-md.min-w-80.max-w-sm button[class*="variant-subtle"] {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    color: #334155 !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    transition: all 0.2s ease !important;
}

.border-2.rounded-md.min-w-80.max-w-sm button[class*="variant-subtle"]:hover {
    background: #f1f5f9 !important;
}

.dark .border-2.rounded-md.min-w-80.max-w-sm button[class*="variant-subtle"],
[data-theme="dark"] .border-2.rounded-md.min-w-80.max-w-sm button[class*="variant-subtle"] {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}

/* Course Stats Section */
.border-2.rounded-md.min-w-80.max-w-sm .space-y-4 {
    margin-top: 20px !important;
    padding-top: 20px !important;
    border-top: 1px solid #f1f5f9 !important;
}

.dark .border-2.rounded-md.min-w-80.max-w-sm .space-y-4,
[data-theme="dark"] .border-2.rounded-md.min-w-80.max-w-sm .space-y-4 {
    border-top-color: #1e293b !important;
}

/* "This course has:" label */
.border-2.rounded-md.min-w-80.max-w-sm .font-medium.text-ink-gray-9:not(.text-2xl) {
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #94a3b8 !important;
}

.dark .border-2.rounded-md.min-w-80.max-w-sm .font-medium.text-ink-gray-9:not(.text-2xl),
[data-theme="dark"] .border-2.rounded-md.min-w-80.max-w-sm .font-medium.text-ink-gray-9:not(.text-2xl) {
    color: #6b7280 !important;
}

/* Stats items */
.border-2.rounded-md.min-w-80.max-w-sm .flex.items-center.text-ink-gray-9 {
    padding: 8px 0 !important;
    background: transparent !important;
}

.border-2.rounded-md.min-w-80.max-w-sm .flex.items-center.text-ink-gray-9 svg {
    color: #154f95 !important;
    stroke: #154f95 !important;
}

.dark .border-2.rounded-md.min-w-80.max-w-sm .flex.items-center.text-ink-gray-9 svg,
[data-theme="dark"] .border-2.rounded-md.min-w-80.max-w-sm .flex.items-center.text-ink-gray-9 svg {
    color: #3294E3 !important;
    stroke: #3294E3 !important;
}

/* Certificate badge */
.border-2.rounded-md.min-w-80.max-w-sm .flex.items-center.font-semibold {
    color: #b45309 !important;
}

.border-2.rounded-md.min-w-80.max-w-sm .flex.items-center.font-semibold svg {
    color: #b45309 !important;
    stroke: #b45309 !important;
}

.dark .border-2.rounded-md.min-w-80.max-w-sm .flex.items-center.font-semibold,
[data-theme="dark"] .border-2.rounded-md.min-w-80.max-w-sm .flex.items-center.font-semibold {
    color: #fbbf24 !important;
}

.dark .border-2.rounded-md.min-w-80.max-w-sm .flex.items-center.font-semibold svg,
[data-theme="dark"] .border-2.rounded-md.min-w-80.max-w-sm .flex.items-center.font-semibold svg {
    color: #fbbf24 !important;
    stroke: #fbbf24 !important;
}

/* ============================================
   COURSE DESCRIPTION
   ============================================ */

.ProseMirror.prose {
    background: transparent !important;
}

.ProseMirror.prose p {
    color: #475569 !important;
    line-height: 1.7 !important;
}

.dark .ProseMirror.prose p,
[data-theme="dark"] .ProseMirror.prose p {
    color: #9ca3af !important;
}

/* ============================================
   COURSE OUTLINE - Clean Accordion
   ============================================ */

/* Course outline right panel container - fix right padding */
div.border-l:has(.chapter-item),
div.border-l:has(.outline-lesson) {
    padding-right: 20px !important;
}

/* Course outline header - proper padding in edit mode */
div.border-l .sticky.top-0.z-10.bg-surface-white.border-b {
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* Course outline header with title and Add Chapter button */
div.border-l .flex.items-center.justify-between.space-x-2.mb-4 {
    padding-left: 16px !important;
    padding-right: 16px !important;
}

/* Outline container */
.border-2.rounded-md.py-2.px-2:has(.chapter-item) {
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    padding: 4px !important;
    overflow: hidden !important;
    margin-left: 16px !important;
    margin-right: 16px !important;
}

.dark .border-2.rounded-md.py-2.px-2:has(.chapter-item),
[data-theme="dark"] .border-2.rounded-md.py-2.px-2:has(.chapter-item) {
    background: #111a2e !important;
    border-color: #1e293b !important;
}

/* Outline title */
.font-semibold.text-lg.leading-5.text-ink-gray-9 {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    margin-bottom: 16px !important;
}

.dark .font-semibold.text-lg.leading-5.text-ink-gray-9,
[data-theme="dark"] .font-semibold.text-lg.leading-5.text-ink-gray-9 {
    color: #ffffff !important;
}

/* Chapter item */
.chapter-item {
    background: transparent !important;
    border-radius: 8px !important;
    margin-bottom: 2px !important;
    border: none !important;
    transition: background 0.2s ease !important;
}

.chapter-item:hover {
    background: #f8fafc !important;
}

.dark .chapter-item:hover,
[data-theme="dark"] .chapter-item:hover {
    background: #1e293b !important;
}

/* Chapter header */
.chapter-item button.flex.items-center.w-full.p-2.group {
    padding: 12px 16px !important;
}

/* Chapter chevron */
.chapter-item svg.h-4.w-4.text-ink-gray-9.stroke-1 {
    color: #64748b !important;
    stroke: #64748b !important;
    transition: transform 0.2s ease !important;
}

.dark .chapter-item svg.h-4.w-4.text-ink-gray-9.stroke-1,
[data-theme="dark"] .chapter-item svg.h-4.w-4.text-ink-gray-9.stroke-1 {
    color: #9ca3af !important;
    stroke: #9ca3af !important;
}

/* Chapter title */
.chapter-item .text-base.text-left.text-ink-gray-9.font-medium {
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #0f172a !important;
}

.dark .chapter-item .text-base.text-left.text-ink-gray-9.font-medium,
[data-theme="dark"] .chapter-item .text-base.text-left.text-ink-gray-9.font-medium {
    color: #ffffff !important;
}

/* Lesson items */
.outline-lesson {
    padding: 10px 16px 10px 44px !important;
    border-top: 1px solid #f1f5f9 !important;
    transition: background 0.2s ease !important;
}

.outline-lesson:hover {
    background: #f8fafc !important;
}

.dark .outline-lesson,
[data-theme="dark"] .outline-lesson {
    border-top-color: #1e293b !important;
}

.dark .outline-lesson:hover,
[data-theme="dark"] .outline-lesson:hover {
    background: #1e293b !important;
}

/* Lesson icons */
.outline-lesson svg.h-4.w-4.stroke-1 {
    color: #94a3b8 !important;
    stroke: #94a3b8 !important;
}

.dark .outline-lesson svg.h-4.w-4.stroke-1,
[data-theme="dark"] .outline-lesson svg.h-4.w-4.stroke-1 {
    color: #6b7280 !important;
    stroke: #6b7280 !important;
}

/* Lesson title */
.outline-lesson .text-sm.leading-5 {
    font-size: 14px !important;
    color: #475569 !important;
}

.dark .outline-lesson .text-sm.leading-5,
[data-theme="dark"] .outline-lesson .text-sm.leading-5 {
    color: #9ca3af !important;
}

/* Lesson complete checkmark */
.outline-lesson svg.h-4.w-4.text-green-700 {
    color: #10b981 !important;
    stroke: #10b981 !important;
}

.dark .outline-lesson svg.h-4.w-4.text-green-700,
[data-theme="dark"] .outline-lesson svg.h-4.w-4.text-green-700 {
    color: #34d399 !important;
    stroke: #34d399 !important;
}

/* ============================================
   TOAST & ALERT NOTIFICATIONS
   ============================================ */

/* Toast container - ensure dark background with white text */
.toast-root-animatable,
.bg-surface-gray-6,
[data-state="open"].toast-root-animatable,
li[data-state="open"] {
    background-color: #1e293b !important;
    color: #ffffff !important;
}

/* Toast text - ensure white text is visible */
.toast-root-animatable *,
.toast-root-animatable .text-ink-white,
.toast-root-animatable .text-p-sm,
.toast-root-animatable div,
.toast-root-animatable span,
.bg-surface-gray-6 *,
.bg-surface-gray-6 .text-ink-white,
.bg-surface-gray-6 .text-p-sm,
.bg-surface-gray-6 div,
.bg-surface-gray-6 span {
    color: #ffffff !important;
}

/* Toast icons */
.toast-root-animatable svg,
.bg-surface-gray-6 svg {
    color: currentColor !important;
}

/* Success toast icon */
.toast-root-animatable .text-ink-green-2,
.bg-surface-gray-6 .text-ink-green-2 {
    color: #22c55e !important;
}

/* Warning toast icon */
.toast-root-animatable .text-ink-amber-2,
.bg-surface-gray-6 .text-ink-amber-2 {
    color: #f59e0b !important;
}

/* Error toast icon */
.toast-root-animatable .text-ink-red-2,
.bg-surface-gray-6 .text-ink-red-2 {
    color: #ef4444 !important;
}

/* Toast action link */
.toast-root-animatable .text-ink-blue-link,
.bg-surface-gray-6 .text-ink-blue-link {
    color: #60a5fa !important;
}

/* Toast close button */
.toast-root-animatable button,
.bg-surface-gray-6 button {
    color: #ffffff !important;
}

.toast-root-animatable button:hover,
.bg-surface-gray-6 button:hover {
    color: #cbd5e1 !important;
}

/* Dark mode toast - keep same styling */
.dark .toast-root-animatable,
.dark .bg-surface-gray-6,
[data-theme="dark"] .toast-root-animatable,
[data-theme="dark"] .bg-surface-gray-6 {
    background-color: #334155 !important;
    color: #ffffff !important;
}

.dark .toast-root-animatable *,
.dark .bg-surface-gray-6 *,
[data-theme="dark"] .toast-root-animatable *,
[data-theme="dark"] .bg-surface-gray-6 * {
    color: #ffffff !important;
}

/* Toast viewport/container positioning */
[data-sonner-toaster],
.fixed.bottom-0.right-0,
ol[data-sonner-toaster] {
    z-index: 9999 !important;
}

/* Ensure text doesn't inherit wrong colors from parent */
.text-ink-white {
    color: #ffffff !important;
}

/* ============================================
   FIX: Override intelqi_home's .main-content min-height
   This rule from navbar.css causes whitespace on LMS pages
   ============================================ */

/* Reset min-height on LMS SPA pages */
.main-content {
    min-height: auto !important;
}

/* Also target any nested main content areas */
#app .main-content,
[data-page-container] .main-content {
    min-height: auto !important;
}