/* Dashboard shell styles * Sidebar + account-menu + wide-mode toggle. Extracted from * account/dashboard/profile.php so they load in and don't FOUC * when navigating between sidebar links. */ #drop-area { border: 2px dashed #adb5bd; border-radius: 8px; text-align: center; transition: background-color 0.2s ease, border-color 0.2s ease; cursor: pointer; } #drop-area.highlight { background-color: #f1f8ff; border-color: #0d6efd; } /* Wide Mode Toggle Button */ .wide-mode-btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid #374151; border-radius: 20px; background: #1a1d23; color: #9ca3af; font-size: 12px; cursor: pointer; line-height: 1; opacity: 0; transition: opacity 0.15s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease; } .wide-mode-btn.initialized { opacity: 1; } .wide-mode-btn:hover { background: #2a2d35; color: #e5e7eb; border-color: #4b5563; } .wide-mode-btn i { font-size: 15px; transition: color 0.25s ease; } .wide-mode-btn.active { background: rgba(59, 130, 246, 0.15); border-color: #3b82f6; color: #60a5fa; } .wide-mode-btn.active:hover { background: rgba(59, 130, 246, 0.25); color: #93bbfc; } /* Wide mode layout */ .dashboard-container.wide-mode { max-width: 100% !important; padding-left: 24px !important; padding-right: 24px !important; } /* Compact sidebar header (on scroll) */ .sidebar-compact-header { border-bottom: 1px solid #2a2d35; margin-bottom: 4px; margin-top: 60px; } /* Transitions for smooth switch */ .sidebar-full-header { transition: opacity 0.15s ease; overflow: hidden; } .sidebar-user-info.scrolled .sidebar-full-header { height: 0 !important; opacity: 0; visibility: hidden; margin: 0 !important; padding: 0 !important; } .sidebar-user-info.scrolled .sidebar-compact-header { display: flex !important; } /* Collapsible Sidebar Styles */ .dashboard-sidebar { transition: all 0.3s ease; position: relative; } .sidebar-toggle-btn { position: absolute; top: 80px; right: -12px; z-index: 100; width: 24px; height: 24px; padding: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; background-color: #1a1d23 !important; border-color: #374151 !important; color: #e5e7eb !important; box-shadow: 0 2px 4px rgba(0,0,0,0.3); } .sidebar-toggle-btn:hover { background-color: #2a2d35 !important; color: #fff !important; } .sidebar-toggle-btn i { transition: transform 0.3s ease; font-size: 14px; } /* Collapsed state */ .dashboard-sidebar.collapsed { width: 70px !important; min-width: 70px !important; max-width: 70px !important; flex: 0 0 70px !important; } .dashboard-sidebar.collapsed .sidebar-toggle-btn i { transform: rotate(180deg); } .dashboard-sidebar.collapsed .sidebar-user-info { display: none; } .dashboard-sidebar.collapsed .list-group-item { padding: 0.75rem; justify-content: center; text-align: center; } .dashboard-sidebar.collapsed .list-group-item i { margin-right: 0 !important; font-size: 1.25rem; } .dashboard-sidebar.collapsed .list-group-item span, .dashboard-sidebar.collapsed .list-group-item:not(i) { display: none; } /* Hide text in collapsed state - more specific selector */ .dashboard-sidebar.collapsed #account-menu .list-group-item { font-size: 0; } .dashboard-sidebar.collapsed #account-menu .list-group-item i { font-size: 1.25rem; margin: 0; } /* Adjust main content when sidebar is collapsed */ .dashboard-sidebar.collapsed + .modal + .col-xl-9, .dashboard-sidebar.collapsed ~ .col-xl-9, .dashboard-sidebar.collapsed ~ div[class*="col-"] { flex: 1; max-width: calc(100% - 85px); margin-left: 15px !important; } /* Mobile - always show full sidebar */ @media (max-width: 767.98px) { .sidebar-toggle-btn { display: none !important; } .dashboard-sidebar.collapsed { width: auto !important; min-width: auto !important; max-width: none !important; flex: none !important; } .dashboard-sidebar.collapsed .sidebar-user-info { display: block; } .dashboard-sidebar.collapsed .list-group-item { font-size: inherit; text-align: left; justify-content: flex-start; } .dashboard-sidebar.collapsed .list-group-item i { margin-right: 0.5rem !important; } } /* ═════════════════════════════════════════════════════════════════ */ /* Sidebar — match the new Locations UI dark gradient palette */ /* ═════════════════════════════════════════════════════════════════ */ .dashboard-sidebar { background: transparent; } .dashboard-sidebar .sidebar-user-info h2 { color: #f3f4f6; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; } .dashboard-sidebar .sidebar-user-info p { color: #9ca3af !important; font-size: 13px; } /* The account menu itself */ #account-menu.list-group { background: linear-gradient(180deg, #1e222b 0%, #181b22 100%); border: 1px solid #2b3140; border-radius: 12px; padding: 6px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); } /* Nav items — kill Bootstrap's default list-group styling */ #account-menu .list-group-item { background: transparent !important; border: none !important; border-radius: 8px !important; color: #cbd5e1 !important; font-size: 14px; font-weight: 800 !important; padding: 10px 14px !important; margin-bottom: 2px; transition: background-color 140ms, color 140ms, transform 60ms; display: flex !important; align-items: center !important; gap: 10px; position: relative; } #account-menu .list-group-item i { font-size: 18px !important; opacity: 1 !important; margin: 0 !important; color: #9ca3af; transition: color 140ms; flex-shrink: 0; width: 22px; text-align: center; } #account-menu .list-group-item:hover { background: rgba(96, 165, 250, 0.08) !important; color: #f3f4f6 !important; } #account-menu .list-group-item:hover i { color: #60a5fa; } /* Active item — blue gradient pill */ #account-menu .list-group-item.active { background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%) !important; color: #ffffff !important; box-shadow: 0 3px 10px rgba(59, 130, 246, 0.35); } #account-menu .list-group-item.active i { color: #ffffff !important; } /* Admin item — red tint */ #account-menu .list-group-item[href*="administrator"] { color: #fca5a5 !important; } #account-menu .list-group-item[href*="administrator"] i { color: #fca5a5 !important; } #account-menu .list-group-item[href*="administrator"]:hover { background: rgba(239, 68, 68, 0.12) !important; color: #fff !important; } #account-menu .list-group-item[href*="administrator"]:hover i { color: #fff !important; } #account-menu .list-group-item[href*="administrator"].active { background: linear-gradient(180deg, #dc2626 0%, #b91c1c 100%) !important; color: #fff !important; box-shadow: 0 3px 10px rgba(220, 38, 38, 0.35); } /* Sign Out item — muted danger */ #account-menu .list-group-item[href*="logout"] { color: #9ca3af !important; margin-top: 4px; } #account-menu .list-group-item[href*="logout"]:hover { background: rgba(239, 68, 68, 0.12) !important; color: #fca5a5 !important; } #account-menu .list-group-item[href*="logout"]:hover i { color: #fca5a5 !important; } /* Hide the ugly
spacers between groups of items, replace with real spacing on the item itself. */ #account-menu br { display: none; } #account-menu .list-group-item[href*="groups"], #account-menu .list-group-item[href*="social-content"], #account-menu .list-group-item[href*="administrator"] { margin-top: 6px; } #account-menu .list-group-item[href*="logout"] { margin-top: 12px; border-top: 1px solid #2b3140 !important; border-radius: 0 !important; padding-top: 14px !important; } #account-menu .list-group-item[href*="logout"]:hover { border-radius: 0 !important; } /* Collapsed sidebar overrides to keep the new styling cohesive */ .dashboard-sidebar.collapsed #account-menu .list-group-item { padding: 10px 0 !important; justify-content: center !important; font-size: 0 !important; } .dashboard-sidebar.collapsed #account-menu .list-group-item i { font-size: 20px !important; margin: 0 !important; width: auto; } /* Mobile toggle button (the "Account menu" collapse trigger) */ .dashboard-sidebar .btn-secondary[data-bs-target="#account-menu"] { background: linear-gradient(180deg, #21252f 0%, #1a1d25 100%) !important; border: 1px solid #374151 !important; color: #e5e7eb !important; font-size: 14px; font-weight: 500; border-radius: 10px; } .dashboard-sidebar .btn-secondary[data-bs-target="#account-menu"]:hover { background: linear-gradient(180deg, #252a36 0%, #1e222b 100%) !important; border-color: #3b82f6 !important; color: #fff !important; } /* Wide-mode toggle — match the pill look */ .wide-mode-btn { background: #181b22; border: 1px solid #2b3140; color: #9ca3af; padding: 7px 14px; border-radius: 8px; font-size: 12px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; transition: background-color 140ms, color 140ms, border-color 140ms; cursor: pointer; } .wide-mode-btn:hover { background: rgba(96, 165, 250, 0.08); border-color: #3b82f6; color: #e5e7eb; } .wide-mode-btn i { font-size: 15px; } /* Avatar change button in the sidebar header */ .sidebar-user-info .btn-icon { background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%) !important; border: 2px solid #1e222b !important; box-shadow: 0 3px 10px rgba(59, 130, 246, 0.4) !important; } .sidebar-user-info .btn-icon i { color: #fff !important; }