/**
 * Sidebar Styles - Skinspire Dashboard
 * All styles marked !important to ensure they override any conflicting styles
 */

/* =========================================================================
   SIDEBAR BASE STYLES
   ========================================================================= */

#sidebar {
    width: 16rem !important;
    background-color: white !important;
    border-right: 1px solid #e5e7eb !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
    transition: width 0.3s ease-in-out !important;
    overflow-y: auto !important;
    height: 100% !important;
    z-index: 40 !important;
}

/* Dark mode sidebar */
.dark #sidebar {
    background-color: #111827 !important;
    border-right-color: #374151 !important;
}

/* Collapsed sidebar - reduced width */
#sidebar.sidebar-collapsed {
    width: 7rem !important;
}

/* =========================================================================
   INTELLICLINIC LOGO STYLES
   ========================================================================= */

#intelli-logo-full {
    height: 55px !important;
    width: auto !important;
    display: block !important;
}

#intelli-logo-short {
    height: 36px !important;
    width: 36px !important;
    display: none !important;
}

/* Show short logo when sidebar collapsed */
#sidebar.sidebar-collapsed #intelli-logo-full {
    display: none !important;
}

#sidebar.sidebar-collapsed #intelli-logo-short {
    display: block !important;
}

/* =========================================================================
   SIDEBAR HEADER STYLES
   ========================================================================= */

#sidebar-header-content {
    display: flex !important;
}

#sidebar.sidebar-collapsed #sidebar-header-content {
    display: none !important;
}

#sidebar-title {
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    display: block !important;
}

#sidebar.sidebar-collapsed #sidebar-title {
    display: none !important;
}

/* Toggle button - positioned on the right edge */
#toggle-sidebar-btn {
    position: absolute !important;
    top: 0.5rem !important;
    right: 0.25rem !important;
    padding: 0.375rem !important;
    background-color: #f3f4f6 !important;
    border-radius: 0.375rem !important;
    border: 1px solid #d1d5db !important;
    cursor: pointer !important;
    z-index: 50 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.dark #toggle-sidebar-btn {
    background-color: #374151 !important;
    border-color: #4b5563 !important;
}

#toggle-sidebar-btn:hover {
    background-color: #e5e7eb !important;
}

.dark #toggle-sidebar-btn:hover {
    background-color: #4b5563 !important;
}

#toggle-sidebar-icon {
    width: 1rem !important;
    height: 1rem !important;
    transition: transform 0.3s ease !important;
    color: #374151 !important;
}

.dark #toggle-sidebar-icon {
    color: white !important;
}

/* =========================================================================
   MENU ITEM STYLES
   ========================================================================= */

.menu-item {
    margin-bottom: 0 !important;
    transition: all 0.2s ease-in-out !important;
}

.menu-header {
    display: flex !important;
    align-items: center !important;
    padding: 0.25rem 0.5rem !important;
    color: #111827 !important;
    border-radius: 0.375rem !important;
    transition: all 0.2s ease-in-out !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    user-select: none !important;
}

.dark .menu-header {
    color: #e5e7eb !important;
}

.menu-header:hover {
    background-color: #f3f4f6 !important;
}

.dark .menu-header:hover {
    background-color: #1f2937 !important;
}

/* Menu text */
.menu-text {
    font-size: 0.875rem !important;
    white-space: normal !important;
    overflow: hidden !important;
    display: inline !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    line-height: 1.2 !important;
}

#sidebar.sidebar-collapsed .menu-text {
    display: none !important;
}

/* =========================================================================
   MENU CHILDREN (EXPANDABLE) STYLES
   ========================================================================= */

.menu-children {
    padding-left: 1rem !important;
    margin-top: 0 !important;
    border-left: 2px solid #60a5fa !important;
    margin-left: 0.75rem !important;
}

.dark .menu-children {
    border-left-color: #3b82f6 !important;
}

.menu-children.hidden {
    display: none !important;
}

/* Collapsed sidebar menu styles with hierarchy */

/* 1st level (category) - show icon + short text */
#sidebar.sidebar-collapsed .menu-header {
    padding: 0.375rem 0.5rem !important;
    font-size: 0.7rem !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}

/* Level 1 icons - larger in collapsed mode */
#sidebar.sidebar-collapsed .menu-header .w-8 {
    width: auto !important;
    margin-bottom: 0.125rem !important;
}

#sidebar.sidebar-collapsed .menu-header .fas,
#sidebar.sidebar-collapsed .menu-header svg {
    font-size: 1.1rem !important;
    width: 1.25rem !important;
    height: 1.25rem !important;
}

/* Show short menu text for level 1 in collapsed mode */
#sidebar.sidebar-collapsed .menu-header .menu-text {
    display: block !important;
    font-size: 0.6rem !important;
    line-height: 1.1 !important;
    max-width: 5.5rem !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    margin-left: 0 !important;
}

/* Show expand icon in collapsed mode - smaller, positioned */
#sidebar.sidebar-collapsed .expand-icon {
    display: inline-block !important;
    font-size: 0.5rem !important;
    margin-left: 0.125rem !important;
    position: absolute !important;
    right: 0.25rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

#sidebar.sidebar-collapsed .expand-icon.rotated {
    transform: translateY(-50%) rotate(90deg) !important;
}

/* 2nd level menu children - indent with left border */
#sidebar.sidebar-collapsed .menu-children:not(.hidden) {
    padding-left: 0.5rem !important;
    margin-left: 0.5rem !important;
    border-left: 2px solid #60a5fa !important;
    margin-top: 0.25rem !important;
}

/* Level 2 items in collapsed mode */
#sidebar.sidebar-collapsed .menu-children a,
#sidebar.sidebar-collapsed .menu-children .submenu-header {
    padding: 0.25rem 0.375rem !important;
    font-size: 0.65rem !important;
}

/* Level 2 icons - larger */
#sidebar.sidebar-collapsed .menu-children .fas,
#sidebar.sidebar-collapsed .menu-children svg {
    font-size: 0.9rem !important;
    width: 1rem !important;
    height: 1rem !important;
    min-width: 1rem !important;
}

/* Show submenu expand icon in collapsed mode */
#sidebar.sidebar-collapsed .submenu-expand {
    display: inline-block !important;
    font-size: 0.45rem !important;
    margin-left: 0.125rem !important;
}

/* 3rd level submenu children - more indent */
#sidebar.sidebar-collapsed .submenu-children:not(.hidden) {
    padding-left: 0.5rem !important;
    margin-left: 0.625rem !important;
    border-left: 1px solid rgba(96, 165, 250, 0.5) !important;
    margin-top: 0.125rem !important;
}

/* Level 3 items */
#sidebar.sidebar-collapsed .submenu-children a {
    font-size: 0.6rem !important;
    padding: 0.2rem 0.25rem !important;
}

/* Level 3 icons */
#sidebar.sidebar-collapsed .submenu-children .fas,
#sidebar.sidebar-collapsed .submenu-children svg {
    font-size: 0.6rem !important;
    width: 0.7rem !important;
    height: 0.7rem !important;
    min-width: 0.7rem !important;
}

/* =========================================================================
   EXPAND ICON STYLES
   ========================================================================= */

.expand-icon {
    font-size: 0.75rem !important;
    transition: transform 0.2s ease-in-out !important;
    cursor: pointer !important;
    user-select: none !important;
    margin-left: 0.5rem !important;
}

.expand-icon.rotated {
    transform: rotate(90deg) !important;
}

.expand-icon:hover {
    color: #60a5fa !important;
}

/* =========================================================================
   MENU ACTIVE STATES
   ========================================================================= */

/* Active leaf item - left accent border */
.menu-item.active {
    background-color: rgba(59, 130, 246, 0.12) !important;
    border-left: 4px solid #3b82f6 !important;
    border-radius: 0 0.375rem 0.375rem 0 !important;
}

.dark .menu-item.active {
    background-color: rgba(96, 165, 250, 0.15) !important;
    border-left-color: #60a5fa !important;
}

.menu-item.active .menu-text {
    color: #2563eb !important;
    font-weight: 600 !important;
}

.dark .menu-item.active .menu-text {
    color: #93c5fd !important;
    font-weight: 600 !important;
}

.menu-item.active .fas,
.menu-item.active svg {
    color: #2563eb !important;
}

.dark .menu-item.active .fas,
.dark .menu-item.active svg {
    color: #93c5fd !important;
}

/* Parent section header when a child page is active */
.menu-item.has-active-child > .menu-header {
    background-color: rgba(59, 130, 246, 0.06) !important;
    border-left: 3px solid rgba(59, 130, 246, 0.4) !important;
}

.dark .menu-item.has-active-child > .menu-header {
    background-color: rgba(96, 165, 250, 0.08) !important;
    border-left-color: rgba(96, 165, 250, 0.4) !important;
}

.menu-item.has-active-child > .menu-header .menu-text {
    color: #3b82f6 !important;
    font-weight: 500 !important;
}

.dark .menu-item.has-active-child > .menu-header .menu-text {
    color: #93c5fd !important;
}

/* =========================================================================
   SUBMENU STYLES (THIRD LEVEL)
   ========================================================================= */

.submenu-wrapper {
    position: relative !important;
}

.submenu-header {
    cursor: pointer !important;
    display: block !important;
    padding: 0.125rem 0.5rem !important;
    font-size: 0.875rem !important;
    color: #1f2937 !important;
    border-radius: 0.25rem !important;
    transition: all 0.2s ease-in-out !important;
}

.dark .submenu-header {
    color: #9ca3af !important;
}

.submenu-header:hover {
    background-color: #f3f4f6 !important;
    color: #111827 !important;
}

.dark .submenu-header:hover {
    background-color: #374151 !important;
    color: white !important;
}

.submenu-expand {
    transition: transform 0.2s ease-in-out !important;
    display: inline-block !important;
    font-size: 0.75rem !important;
    margin-left: 0.25rem !important;
}

.submenu-children {
    padding-left: 1rem !important;
    margin-left: 0.5rem !important;
    border-left: 1px solid rgba(96, 165, 250, 0.2) !important;
    transition: all 0.2s ease-in-out !important;
}

.submenu-children.hidden {
    display: none !important;
}

.submenu-children a {
    font-size: 0.75rem !important;
    display: block !important;
    padding: 0.125rem 0.5rem !important;
    color: #1f2937 !important;
    border-radius: 0.25rem !important;
    transition: all 0.2s ease-in-out !important;
}

.dark .submenu-children a {
    color: #9ca3af !important;
}

.submenu-children a:hover {
    background-color: #f3f4f6 !important;
    color: #111827 !important;
}

.dark .submenu-children a:hover {
    background-color: #374151 !important;
    color: white !important;
}

/* =========================================================================
   THEME TOGGLE BUTTON STYLES
   ========================================================================= */

/* Light mode - toggle button - compact size */
.theme-toggle-btn,
button[onclick="toggleDarkMode()"] {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.25rem 0.5rem !important;
    border-radius: 0.375rem !important;
    background-color: #1f2937 !important;
    border: 1px solid #374151 !important;
    transition: all 0.2s ease-in-out !important;
}

button[onclick="toggleDarkMode()"]:hover {
    background-color: #374151 !important;
}

/* Dark mode - toggle button - yellow/gold background */
.dark button[onclick="toggleDarkMode()"] {
    background-color: #ca8a04 !important;
    border-color: #eab308 !important;
}

.dark button[onclick="toggleDarkMode()"]:hover {
    background-color: #a16207 !important;
}

/* Theme toggle icons - smaller size */
button[onclick="toggleDarkMode()"] svg {
    height: 1rem !important;
    width: 1rem !important;
    flex-shrink: 0 !important;
}

/* Moon icon in light mode - white color on dark button */
button[onclick="toggleDarkMode()"] svg.dark\:hidden {
    color: white !important;
    display: block !important;
}

/* Sun icon in dark mode - white/yellow */
.dark button[onclick="toggleDarkMode()"] svg.dark\:block {
    color: white !important;
}

/* Hide moon in dark mode, show sun */
.dark button[onclick="toggleDarkMode()"] svg.dark\:hidden {
    display: none !important;
}

button[onclick="toggleDarkMode()"] svg.dark\:block {
    display: none !important;
}

.dark button[onclick="toggleDarkMode()"] svg.dark\:block {
    display: block !important;
}

/* Theme toggle text - smaller, compact */
button[onclick="toggleDarkMode()"] .menu-text {
    margin-left: 0.375rem !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    color: white !important;
}

.dark button[onclick="toggleDarkMode()"] .menu-text {
    color: white !important;
}

/* Hide theme toggle text when sidebar collapsed */
#sidebar.sidebar-collapsed button[onclick="toggleDarkMode()"] .menu-text {
    display: none !important;
}

/* Theme toggle section padding - more compact */
.p-2.border-b {
    padding: 0.375rem !important;
}

/* =========================================================================
   QUICK ACCESS SECTION STYLES
   ========================================================================= */

#quick-access-container {
    max-height: 200px !important;
    overflow-y: auto !important;
}

#quick-access-container a {
    display: flex !important;
    align-items: center !important;
    padding: 0.125rem 0.5rem !important;
    font-size: 0.875rem !important;
    color: #1f2937 !important;
    border-radius: 0.25rem !important;
    transition: all 0.2s ease-in-out !important;
}

.dark #quick-access-container a {
    color: #9ca3af !important;
}

#quick-access-container a:hover {
    background-color: #f3f4f6 !important;
}

.dark #quick-access-container a:hover {
    background-color: #1f2937 !important;
}

/* =========================================================================
   CONTEXT MENU STYLES
   ========================================================================= */

#menu-context-menu {
    position: fixed !important;
    background-color: white !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
    z-index: 9999 !important;
    border: 1px solid #e5e7eb !important;
    padding: 0.25rem 0 !important;
    min-width: 180px !important;
}

.dark #menu-context-menu {
    background-color: #1f2937 !important;
    border-color: #4b5563 !important;
}

#menu-context-menu.hidden {
    display: none !important;
}

#menu-context-menu button {
    width: 100% !important;
    padding: 0.5rem 1rem !important;
    text-align: left !important;
    font-size: 0.875rem !important;
    color: #374151 !important;
    display: flex !important;
    align-items: center !important;
    transition: all 0.15s ease-in-out !important;
}

#menu-context-menu button:hover {
    background-color: #eff6ff !important;
    color: #1d4ed8 !important;
}

.dark #menu-context-menu button {
    color: #e5e7eb !important;
}

.dark #menu-context-menu button:hover {
    background-color: #374151 !important;
    color: #60a5fa !important;
}

/* =========================================================================
   TOOLTIP STYLES
   ========================================================================= */

#menu-tooltip {
    position: fixed !important;
    background-color: white !important;
    color: #1f2937 !important;
    padding: 0.5rem 0.75rem !important;
    border-radius: 0.375rem !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
    z-index: 50 !important;
    pointer-events: none !important;
    border: 1px solid #d1d5db !important;
}

#menu-tooltip.hidden {
    display: none !important;
}

/* =========================================================================
   USER INFO STYLES (IN SIDEBAR HEADER)
   ========================================================================= */

#sidebar-header-content .text-xs {
    font-size: 0.75rem !important;
}

/* User name - dark in light mode, white in dark mode */
#sidebar-header-content .text-gray-800 {
    color: #1f2937 !important;
}

.dark #sidebar-header-content .text-gray-800,
.dark #sidebar-header-content .dark\:text-white {
    color: white !important;
}

/* User role - lighter gray */
#sidebar-header-content .text-gray-500 {
    color: #6b7280 !important;
}

.dark #sidebar-header-content .text-gray-500,
.dark #sidebar-header-content .dark\:text-gray-400 {
    color: #9ca3af !important;
}

/* =========================================================================
   MENU ICON NATURAL COLORS
   ========================================================================= */

.fa-home { color: #60a5fa !important; }
.fa-calendar-alt, .fa-calendar, .fa-calendar-plus, .fa-calendar-check, .fa-calendar-times, .fa-calendar-minus, .fa-calendar-day { color: #34d399 !important; }
.fa-database { color: #a78bfa !important; }
.fa-cube, .fa-boxes, .fa-box, .fa-box-open, .fa-archive { color: #fb923c !important; }
.fa-money-check-alt, .fa-money-bill-wave, .fa-hand-holding-usd, .fa-file-invoice-dollar, .fa-coins { color: #22c55e !important; }
.fa-stethoscope, .fa-user-injured, .fa-pills, .fa-file-medical, .fa-heartbeat { color: #f87171 !important; }
.fa-cogs, .fa-cog, .fa-sliders-h, .fa-wrench { color: #94a3b8 !important; }
.fa-chart-bar, .fa-chart-line, .fa-chart-pie, .fa-chart-area, .fa-tachometer-alt { color: #38bdf8 !important; }
.fa-users, .fa-user-friends, .fa-user-plus, .fa-users-cog, .fa-user-tie { color: #818cf8 !important; }
.fa-truck, .fa-shopping-cart { color: #f472b6 !important; }
.fa-building, .fa-sitemap { color: #fbbf24 !important; }
.fa-credit-card, .fa-exchange-alt { color: #06b6d4 !important; }
.fa-tags, .fa-bullhorn, .fa-heart { color: #ec4899 !important; }
.fa-bell, .fa-paper-plane { color: #f59e0b !important; }
.fa-file-invoice, .fa-list, .fa-list-alt, .fa-clipboard-list, .fa-clipboard-check { color: #8b5cf6 !important; }
.fa-balance-scale, .fa-balance-scale-left, .fa-landmark { color: #10b981 !important; }
.fa-undo, .fa-sync-alt { color: #6366f1 !important; }
.fa-clock, .fa-business-time, .fa-hourglass-half, .fa-history { color: #64748b !important; }
.fa-plus, .fa-plus-circle, .fa-plus-square { color: #22c55e !important; }
.fa-exclamation-triangle, .fa-exclamation-circle { color: #ef4444 !important; }
.fa-check, .fa-check-circle, .fa-check-double { color: #10b981 !important; }
.fa-folder-open, .fa-cloud-upload-alt { color: #f59e0b !important; }
.fa-gavel, .fa-tasks { color: #6b7280 !important; }
.fa-tv, .fa-walking, .fa-user-md, .fa-th { color: #a855f7 !important; }
.fa-sign-in-alt, .fa-user-clock, .fa-user-check, .fa-user-cog { color: #0ea5e9 !important; }
.fa-piggy-bank, .fa-calculator { color: #84cc16 !important; }
.fa-layer-group, .fa-concierge-bell { color: #d946ef !important; }

/* =========================================================================
   BADGE STYLES
   ========================================================================= */

.badge {
    display: inline-flex !important;
    align-items: center !important;
    padding: 0.25rem 0.5rem !important;
    border-radius: 9999px !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
}

.badge-primary {
    background-color: rgba(59, 130, 246, 0.1) !important;
    color: #1d4ed8 !important;
}

.badge-info {
    background-color: rgba(6, 182, 212, 0.1) !important;
    color: #0891b2 !important;
}

.badge-warning {
    background-color: rgba(245, 158, 11, 0.1) !important;
    color: #d97706 !important;
}

.badge-success {
    background-color: rgba(34, 197, 94, 0.1) !important;
    color: #16a34a !important;
}

/* =========================================================================
   BRANCH SWITCHER STYLES
   ========================================================================= */

#branch-dropdown-btn {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0.5rem !important;
    font-size: 0.875rem !important;
    background-color: #f3f4f6 !important;
    border-radius: 0.25rem !important;
    transition: all 0.2s ease-in-out !important;
}

.dark #branch-dropdown-btn {
    background-color: #1f2937 !important;
}

#branch-dropdown-btn:hover {
    background-color: #e5e7eb !important;
}

.dark #branch-dropdown-btn:hover {
    background-color: #374151 !important;
}

#branch-dropdown {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    margin-top: 0.25rem !important;
    background-color: white !important;
    border-radius: 0.25rem !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
    z-index: 50 !important;
    max-height: 15rem !important;
    overflow-y: auto !important;
}

.dark #branch-dropdown {
    background-color: #1f2937 !important;
}

#branch-dropdown.hidden {
    display: none !important;
}

/* =========================================================================
   FOCUS STATES FOR ACCESSIBILITY
   ========================================================================= */

.menu-item:focus-within,
.menu-header:focus {
    outline: 2px solid #3b82f6 !important;
    outline-offset: 2px !important;
}

/* =========================================================================
   USER CIRCLE ICON STYLES (HEADER)
   ========================================================================= */

/* User icon circle - Light mode: blue circle with white text */
#user-menu-button .rounded-full,
#mobile-user-menu-button .rounded-full {
    background-color: #3b82f6 !important;
    border: 2px solid #2563eb !important;
}

/* User icon circle - Dark mode: lighter blue circle */
.dark #user-menu-button .rounded-full,
.dark #mobile-user-menu-button .rounded-full {
    background-color: #60a5fa !important;
    border: 2px solid #3b82f6 !important;
}

/* User initial letter - always white for visibility */
#user-menu-button .rounded-full span,
#mobile-user-menu-button .rounded-full span {
    color: white !important;
    font-weight: bold !important;
}

.dark #user-menu-button .rounded-full span,
.dark #mobile-user-menu-button .rounded-full span {
    color: white !important;
    font-weight: bold !important;
}

/* =========================================================================
   HEADER DATE DISPLAY STYLES
   ========================================================================= */

#header-date-display {
    display: flex !important;
    align-items: center !important;
    font-size: 0.7rem !important;
    color: #6b7280 !important;
    text-transform: lowercase !important;
}

.dark #header-date-display {
    color: #9ca3af !important;
}

#header-date-display i {
    margin-right: 0.375rem !important;
    color: #60a5fa !important;
    font-size: 0.75rem !important;
}

.dark #header-date-display i {
    color: #3b82f6 !important;
}