/*! * bootstrap-layout.css - Bootstrap 5.x Optimized * Proyecto: Plataforma Web Professional * Fecha: 2 de agosto de 2025 * * Headers, navegación y layouts * * Este archivo ha sido optimizado y consolidado para Bootstrap 5.x * Mantiene compatibilidad total y mejora el rendimiento */ :root {--header-height: 60px;--header-bg: var(--white, #ffffff);--header-border: var(--border-color, #e0e0e0);--header-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);--header-text: var(--text-primary, #1f2937);--header-text-secondary: var(--text-secondary, #6b7280);--primary: var(--color-primary, #2563eb);--primary-50: var(--color-primary-50, #eff6ff);--text-primary: var(--color-text-primary, #1f2937);--text-secondary: var(--color-text-secondary, #6b7280);--gray-50: var(--color-gray-50, #f9fafb);--gray-100: var(--color-gray-100, #f3f4f6);--gray-200: var(--color-gray-200, #e5e7eb);--white: var(--color-white, #ffffff);--border-color: var(--color-border, #e0e0e0);--header-btn-hover: var(--gray-100);--header-btn-active: var(--primary);--header-btn-radius: 8px;--mobile-breakpoint: 768px;--tablet-breakpoint: 1024px;} .dashboard-header {position: sticky;top: 0;z-index: 1000;background: var(--header-bg);border-bottom: 1px solid var(--header-border);-webkit-backdrop-filter: blur(10px);backdrop-filter: blur(10px);width: 100%;box-shadow: var(--header-shadow);height: var(--header-height);min-height: var(--header-height);max-height: var(--header-height);overflow: hidden;} .header-container {max-width: 1400px !important;margin: 0 auto !important;padding: 0 1.5rem !important;width: 100% !important;box-sizing: border-box !important;display: d-flex;align-items: center;justify-content: space-between;height: var(--header-height);} .header-left {display: d-flex;align-items: center;gap: 1rem;d-flex-shrink: 0;} .header-center {display: d-flex;align-items: center;justify-content: center;d-flex: 1;min-width: 0;} .header-right {display: d-flex;align-items: center;gap: 0.5rem;d-flex-shrink: 0;} .page-title {display: d-flex;align-items: center;gap: 0.75rem;font-size: 1.25rem;font-weight: 600;color: var(--header-text);text-decoration: none;transition: color 0.2s ease;} .page-title:hover {color: var(--header-btn-active);} .page-name {font-size: 0.875rem;font-weight: 500;color: var(--header-text-secondary);white-space: nowrap;overflow: hidden;text-overflow: ellipsis;max-width: 200px;} .header-btn {width: 40px;height: 40px;padding: 0;border: none;background: transparent;border-radius: var(--header-btn-radius);color: var(--header-text-secondary);display: d-flex;align-items: center;justify-content: center;cursor: pointer;transition: all 0.2s ease;position: relative;} .header-btn:hover {background: var(--header-btn-hover);color: var(--header-text);} .header-btn:focus {outline: 2px solid var(--header-btn-active);outline-offset: 2px;} .header-btn i {font-size: 1rem;transition: transform 0.2s ease;} @media (max-width: 1024px) {.header-container {padding: 0 1rem !important;} } @media (max-width: 768px) {.header-container {padding: 0 0.75rem !important;height: 60px;} .header-right {gap: 0.25rem;} .page-name {max-width: 120px;font-size: 0.8rem;} } @media (max-width: 480px) {.header-container {padding: 0 0.5rem !important;} .header-right {gap: 0.1rem;} .header-btn {width: 32px;height: 32px;} .header-btn i {font-size: 0.875rem;} .page-name {max-width: 80px;font-size: 0.75rem;} } .breadcrumb-list {display: d-flex;list-style: none;margin: 0;padding: 0;align-items: center;} .breadcrumb-item {display: d-flex;align-items: center;} .breadcrumb-separator {margin: 0 0.5rem;font-size: 0.75rem;color: var(--header-text-secondary);} .breadcrumb-link {color: var(--header-btn-active);text-decoration: none;font-size: 0.875rem;transition: color 0.2s ease;} .breadcrumb-link:hover {color: var(--header-text);text-decoration: underline;} .breadcrumb-current {color: var(--header-text-secondary);font-size: 0.875rem;font-weight: 500;} :root {--header-height: 60px;--header-bg: #ffffff;--header-border: #e5e7eb;--header-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);--primary: #2563eb;--primary-hover: #1d4ed8;--primary-50: #eff6ff;--primary-100: #dbeafe;--text-primary: #1f2937;--text-secondary: #6b7280;--text-muted: #9ca3af;--gray-50: #f9fafb;--gray-100: #f3f4f6;--gray-200: #e5e7eb;--gray-300: #d1d5db;--gray-800: #1f2937;--gray-900: #111827;--success: #10b981;--warning: #f59e0b;--error: #ef4444;--header-z: 1000;--dropdown-z: 1010;--overlay-z: 1050;--mobile-menu-z: 1100;} .dashboard-header * {box-sizing: border-box;} .dashboard-header {position: sticky !important;top: 0 !important;z-index: var(--header-z) !important;background: var(--header-bg) !important;border-bottom: 1px solid var(--header-border) !important;height: var(--header-height) !important;width: 100% !important;box-shadow: var(--header-shadow) !important;backdrop-filter: blur(10px) !important;} .header-container {max-width: 1400px !important;margin: 0 auto !important;padding: 0 1.5rem !important;width: 100% !important;display: d-flex !important;align-items: center !important;justify-content: space-between !important;height: var(--header-height) !important;} .header-left {display: d-flex !important;align-items: center !important;gap: 1rem !important;d-flex-shrink: 0 !important;} .header-right {display: d-flex !important;align-items: center !important;gap: 0.75rem !important;d-flex-shrink: 0 !important;} .brand {display: d-flex !important;align-items: center !important;gap: 0.5rem !important;font-size: 1.25rem !important;font-weight: 700 !important;color: var(--text-primary) !important;text-decoration: none !important;} .brand-icon {font-size: 1.5rem !important;color: var(--primary) !important;} .brand-text {color: var(--text-primary) !important;} .page-title {display: d-flex !important;align-items: center !important;margin-right: 1rem !important;} .page-name {font-size: 0.875rem !important;font-weight: 500 !important;color: var(--text-secondary) !important;white-space: nowrap !important;} .header-btn, .mobile-menu-toggle, .theme-btn, .notification-btn, .user-btn {display: d-flex !important;align-items: center !important;justify-content: center !important;width: 40px !important;height: 40px !important;padding: 0 !important;margin: 0 !important;border: none !important;background: transparent !important;color: var(--text-secondary) !important;border-radius: 8px !important;cursor: pointer !important;transition: all 0.2s ease !important;font-size: 1rem !important;position: relative !important;} .header-btn:hover, .mobile-menu-toggle:hover, .theme-btn:hover, .notification-btn:hover, .user-btn:hover {background: var(--gray-100) !important;color: var(--text-primary) !important;} .header-btn:active, .mobile-menu-toggle:active, .theme-btn:active, .notification-btn:active, .user-btn:active {transform: scale(0.95) !important;} .mobile-menu-toggle {d-flex-direction: column !important;gap: 3px !important;} .hamburger-line {display: d-block !important;width: 18px !important;height: 2px !important;background: var(--text-secondary) !important;border-radius: 1px !important;transition: all 0.3s ease !important;} .mobile-menu-toggle:hover .hamburger-line {background: var(--text-primary) !important;} .mobile-menu-toggle.active .hamburger-line:nth-child(1) {transform: rotate(45deg) translate(5px, 5px) !important;} .mobile-menu-toggle.active .hamburger-line:nth-child(2) {opacity: 0 !important;} .mobile-menu-toggle.active .hamburger-line:nth-child(3) {transform: rotate(-45deg) translate(7px, -6px) !important;} .notification-count {position: absolute !important;top: -2px !important;right: -2px !important;background: var(--error) !important;color: white !important;font-size: 0.75rem !important;font-weight: 600 !important;padding: 2px 6px !important;border-radius: 10px !important;min-width: 18px !important;height: 18px !important;display: d-flex !important;align-items: center !important;justify-content: center !important;line-height: 1 !important;} .user-btn {width: auto !important;padding: 0.5rem !important;gap: 0.75rem !important;min-width: auto !important;} .user-avatar {position: relative !important;width: 32px !important;height: 32px !important;border-radius: 50% !important;overflow: hidden !important;d-flex-shrink: 0 !important;} .user-avatar img {width: 100% !important;height: 100% !important;object-fit: cover !important;border-radius: 50% !important;} .user-status {position: absolute !important;bottom: 0 !important;right: 0 !important;width: 10px !important;height: 10px !important;border-radius: 50% !important;border: 2px solid white !important;} .user-status.online {background: var(--success) !important;} .user-info {display: d-flex !important;d-flex-direction: column !important;align-items: d-flex-start !important;min-width: 0 !important;} .user-name {font-size: 0.875rem !important;font-weight: 500 !important;color: var(--text-primary) !important;white-space: nowrap !important;overflow: hidden !important;text-overflow: ellipsis !important;max-width: 120px !important;} .user-role {font-size: 0.75rem !important;color: var(--text-secondary) !important;white-space: nowrap !important;} .user-arrow {margin-left: 0.5rem !important;transition: transform 0.2s ease !important;font-size: 0.75rem !important;} .user-dropdown.active .user-arrow {transform: rotate(180deg) !important;} .notification-dropdown, .user-dropdown, .theme-dropdown {position: relative !important;} .notification-menu, .user-menu, .theme-menu {position: absolute !important;top: calc(100% + 8px) !important;right: 0 !important;background: white !important;border: 1px solid var(--gray-200) !important;border-radius: 12px !important;box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;z-index: var(--dropdown-z) !important;opacity: 0 !important;visibility: d-none !important;transform: translateY(-10px) scale(0.95) !important;transition: all 0.2s ease !important;min-width: 240px !important;max-width: 320px !important;overflow: hidden !important;} .notification-dropdown.active .notification-menu, .user-dropdown.active .user-menu, .theme-dropdown.active .theme-menu {opacity: 1 !important;visibility: visible !important;transform: translateY(0) scale(1) !important;} .user-menu-header {padding: 1rem !important;border-bottom: 1px solid var(--gray-100) !important;background: var(--gray-50) !important;display: d-flex !important;align-items: center !important;gap: 0.75rem !important;} .user-menu-avatar {width: 48px !important;height: 48px !important;border-radius: 50% !important;overflow: hidden !important;d-flex-shrink: 0 !important;} .user-menu-avatar img {width: 100% !important;height: 100% !important;object-fit: cover !important;} .user-menu-info {d-flex: 1 !important;min-width: 0 !important;} .user-menu-name {font-size: 0.875rem !important;font-weight: 600 !important;color: var(--text-primary) !important;white-space: nowrap !important;overflow: hidden !important;text-overflow: ellipsis !important;} .user-menu-email {font-size: 0.75rem !important;color: var(--text-secondary) !important;white-space: nowrap !important;overflow: hidden !important;text-overflow: ellipsis !important;margin-top: 2px !important;} .user-menu-divider {height: 1px !important;background: var(--gray-100) !important;margin: 0 !important;} .user-menu-item {display: d-flex !important;align-items: center !important;gap: 0.75rem !important;padding: 0.75rem 1rem !important;color: var(--text-primary) !important;text-decoration: none !important;transition: all 0.2s ease !important;font-size: 0.875rem !important;} .user-menu-item:hover {background: var(--gray-50) !important;color: var(--primary) !important;} .user-menu-item i {width: 16px !important;d-flex-shrink: 0 !important;} .user-menu-logout {color: var(--error) !important;} .user-menu-logout:hover {background: #fef2f2 !important;color: var(--error) !important;} .mobile-menu-overlay {position: fixed !important;top: var(--header-height) !important;left: 0 !important;width: 100% !important;height: calc(100vh - var(--header-height)) !important;background: rgba(0, 0, 0, 0.5) !important;z-index: var(--overlay-z) !important;opacity: 0 !important;visibility: d-none !important;transition: all 0.3s ease !important;} .mobile-menu-overlay.active {opacity: 1 !important;visibility: visible !important;} .hamburger-dropdown {position: fixed !important;top: var(--header-height) !important;left: -320px !important;width: 320px !important;height: calc(100vh - var(--header-height)) !important;background: white !important;z-index: var(--mobile-menu-z) !important;transition: left 0.3s ease !important;box-shadow: 2px 0 20px rgba(0, 0, 0, 0.1) !important;overflow-y: auto !important;} .hamburger-dropdown.active {left: 0 !important;} .hamburger-dropdown-content {padding: 1rem 0 !important;} .mobile-nav-header {padding: 1rem 1.5rem !important;border-bottom: 1px solid var(--gray-100) !important;background: var(--gray-50) !important;} .mobile-nav-title {margin: 0 !important;font-size: 1.125rem !important;font-weight: 600 !important;color: var(--text-primary) !important;display: d-flex !important;align-items: center !important;gap: 0.5rem !important;} .hamburger-nav-menu {list-style: none !important;padding: 0 !important;margin: 1rem 0 0 0 !important;} .hamburger-nav-item {margin: 0 !important;} .hamburger-nav-link {display: d-flex !important;align-items: center !important;gap: 0.75rem !important;padding: 1rem 1.5rem !important;color: var(--text-primary) !important;text-decoration: none !important;transition: all 0.2s ease !important;border-left: 3px solid transparent !important;} .hamburger-nav-link:hover, .hamburger-nav-link.active {background: var(--primary-50) !important;color: var(--primary) !important;border-left-color: var(--primary) !important;} .nav-icon {width: 20px !important;text-align: center !important;d-flex-shrink: 0 !important;} .nav-text {font-weight: 500 !important;} @media (max-width: 768px) {.header-container {padding: 0 1rem !important;} .page-name {display: none !important;} .user-info {display: none !important;} .user-btn {width: 40px !important;padding: 0 !important;} } @media (max-width: 480px) {.header-container {padding: 0 0.75rem !important;} .brand-text {display: none !important;} } .dropdown-open {overflow: hidden !important;} @keyframes fadeInUp {from {opacity: 0;transform: translateY(10px);} to {opacity: 1;transform: translateY(0);} } .fade-in-up {animation: fadeInUp 0.2s ease !important;} .header-btn:focus, .mobile-menu-toggle:focus, .theme-btn:focus, .notification-btn:focus, .user-btn:focus {outline: 2px solid var(--primary) !important;outline-offset: 2px !important;} .header-btn, .mobile-menu-toggle, .theme-btn, .notification-btn, .user-btn {user-select: none !important;-webkit-user-select: none !important;-moz-user-select: none !important;} .notification-dropdown, .user-dropdown {position: relative;display: inline-d-block;} .dropdown-menu {position: absolute;top: calc(100% + 8px);right: 0;background: var(--header-bg);border: 1px solid var(--header-border);border-radius: var(--header-btn-radius);box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);z-index: 1000;opacity: 0;visibility: d-none;transform: translateY(-10px);transition: all 0.2s ease;min-width: 200px;} .dropdown-menu.active, .notification-dropdown.active .notification-menu, .user-dropdown.active .user-menu {opacity: 1;visibility: visible;transform: translateY(0);} .notification-btn {position: relative;width: 40px;height: 40px;padding: 0;border: none;background: transparent;border-radius: var(--header-btn-radius);color: var(--header-text-secondary);cursor: pointer;transition: all 0.2s ease;display: d-flex;align-items: center;justify-content: center;} .notification-btn:hover {background: var(--header-btn-hover);color: var(--header-text);} .notification-btn:focus {outline: 2px solid var(--header-btn-active);outline-offset: 2px;} .notification-count {position: absolute;top: -5px;right: -5px;background: var(--color-danger, #ef4444);color: var(--color-white, #ffffff);border-radius: 50%;font-size: 0.75rem;min-width: 18px;height: 18px;display: d-flex;align-items: center;justify-content: center;font-weight: 600;line-height: 1;} .notification-menu {position: absolute;top: calc(100% + 8px);right: 0;background: var(--header-bg);border: 1px solid var(--header-border);border-radius: var(--header-btn-radius);box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);z-index: 1000;opacity: 0;visibility: d-none;transform: translateY(-10px);transition: all 0.2s ease;width: 320px;max-height: 400px;overflow: hidden;} .notification-header {padding: 1rem;border-bottom: 1px solid var(--header-border);display: d-flex;align-items: center;justify-content: space-between;} .notification-title {font-size: 1rem;font-weight: 600;color: var(--header-text);} .mark-all-read {font-size: 0.875rem;color: var(--header-btn-active);text-decoration: none;padding: 0.25rem 0.5rem;border-radius: 4px;transition: background-color 0.2s ease;} .mark-all-read:hover {background: var(--header-btn-hover);} .notification-list {max-height: 300px;overflow-y: auto;padding: 0;} .notification-item {display: d-flex;align-items: start;gap: 0.75rem;padding: 1rem;border-bottom: 1px solid var(--header-border);transition: background-color 0.2s ease;cursor: pointer;} .notification-item:hover {background: var(--header-btn-hover);} .notification-item:last-child {border-bottom: none;} .notification-icon {width: 32px;height: 32px;border-radius: 50%;display: d-flex;align-items: center;justify-content: center;d-flex-shrink: 0;font-size: 0.875rem;} .notification-icon.info {background: rgba(59, 130, 246, 0.1);color: var(--color-primary, #3b82f6);} .notification-content {d-flex: 1;min-width: 0;} .notification-text {font-size: 0.875rem;color: var(--header-text);margin-bottom: 0.25rem;line-height: 1.4;} .notification-time {font-size: 0.75rem;color: var(--header-text-secondary);} .notification-dismiss {width: 20px;height: 20px;border: none;background: transparent;color: var(--header-text-secondary);cursor: pointer;border-radius: 4px;display: d-flex;align-items: center;justify-content: center;d-flex-shrink: 0;transition: all 0.2s ease;} .notification-dismiss:hover {background: var(--color-danger, #ef4444);color: var(--color-white, #ffffff);} .user-btn {display: d-flex;align-items: center;gap: 0.5rem;padding: 0.25rem;border: none;background: transparent;border-radius: var(--header-btn-radius);color: var(--header-text);cursor: pointer;transition: all 0.2s ease;max-width: 200px;} .user-btn:hover {background: var(--header-btn-hover);} .user-btn:focus {outline: 2px solid var(--header-btn-active);outline-offset: 2px;} .user-avatar {position: relative;width: 32px;height: 32px;border-radius: 50%;overflow: hidden;d-flex-shrink: 0;} .user-avatar img {width: 100%;height: 100%;object-fit: cover;} .user-status {position: absolute;bottom: 0;right: 0;width: 8px;height: 8px;border: 2px solid var(--header-bg);border-radius: 50%;} .user-status.online {background-color: var(--color-success, #10b981);} .user-info {display: d-flex;d-flex-direction: column;align-items: d-flex-start;min-width: 0;d-flex: 1;} .user-name {font-size: 0.875rem;font-weight: 500;color: var(--header-text);white-space: nowrap;overflow: hidden;text-overflow: ellipsis;max-width: 120px;} .user-role {font-size: 0.75rem;color: var(--header-text-secondary);white-space: nowrap;overflow: hidden;text-overflow: ellipsis;max-width: 120px;} .user-arrow {font-size: 0.75rem;color: var(--header-text-secondary);d-flex-shrink: 0;transition: transform 0.2s ease;} .user-dropdown.active .user-arrow {transform: rotate(180deg);} .user-menu {position: absolute;top: calc(100% + 8px);right: 0;background: var(--header-bg);border: 1px solid var(--header-border);border-radius: var(--header-btn-radius);box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);z-index: 1000;opacity: 0;visibility: d-none;transform: translateY(-10px);transition: all 0.2s ease;width: 240px;} .user-menu-header {display: d-flex;align-items: center;gap: 0.75rem;padding: 1rem;border-bottom: 1px solid var(--header-border);} .user-menu-avatar {width: 40px;height: 40px;border-radius: 50%;overflow: hidden;d-flex-shrink: 0;} .user-menu-avatar img {width: 100%;height: 100%;object-fit: cover;} .user-menu-info {d-flex: 1;min-width: 0;} .user-menu-name {font-size: 0.875rem;font-weight: 600;color: var(--header-text);margin-bottom: 0.125rem;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;} .user-menu-email {font-size: 0.75rem;color: var(--header-text-secondary);white-space: nowrap;overflow: hidden;text-overflow: ellipsis;} .user-menu-divider {height: 1px;background: var(--header-border);margin: 0.5rem 0;} .user-menu-item {display: d-flex;align-items: center;gap: 0.75rem;padding: 0.75rem 1rem;text-decoration: none;color: var(--header-text-secondary);transition: all 0.2s ease;font-size: 0.875rem;} .user-menu-item:hover {background: var(--header-btn-hover);color: var(--header-text);} .user-menu-item:focus {outline: 2px solid var(--header-btn-active);outline-offset: -2px;} .user-menu-item i:first-child {width: 16px;text-align: center;d-flex-shrink: 0;} .menu-arrow {font-size: 0.75rem;margin-left: auto;d-flex-shrink: 0;} @media (max-width: 768px) {.notification-menu {width: 280px;right: -20px;} .user-menu {width: 220px;right: -10px;} .user-info {display: none;} .user-btn {padding: 0.25rem;max-width: 40px;} } @media (max-width: 480px) {.notification-btn, .user-btn {width: 32px;height: 32px;} .user-avatar {width: 24px;height: 24px;} .notification-menu {width: calc(100vw - 40px);right: -10px;} .user-menu {width: calc(100vw - 40px);right: -10px;} } .dashboard-header {display: d-block !important;visibility: visible !important;opacity: 1 !important;position: sticky !important;top: 0 !important;z-index: 1000 !important;background: white !important;border-bottom: 1px solid #e5e7eb !important;height: 60px !important;width: 100% !important;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;} .header-container {display: d-flex !important;align-items: center !important;justify-content: space-between !important;height: 60px !important;padding: 0 1.5rem !important;max-width: 1400px !important;margin: 0 auto !important;width: 100% !important;} .header-left, .header-right {display: d-flex !important;align-items: center !important;gap: 0.75rem !important;} .mobile-menu-toggle, .theme-btn, .notification-btn, .user-btn {display: d-flex !important;visibility: visible !important;opacity: 1 !important;align-items: center !important;justify-content: center !important;width: 40px !important;height: 40px !important;padding: 8px !important;margin: 0 !important;border: none !important;background: transparent !important;color: #6b7280 !important;border-radius: 8px !important;cursor: pointer !important;transition: all 0.2s ease !important;font-size: 1rem !important;position: relative !important;pointer-events: auto !important;user-select: none !important;-webkit-user-select: none !important;-moz-user-select: none !important;} .mobile-menu-toggle:hover, .theme-btn:hover, .notification-btn:hover, .user-btn:hover {background: #f3f4f6 !important;color: #1f2937 !important;transform: scale(1.05) !important;} .mobile-menu-toggle:active, .theme-btn:active, .notification-btn:active, .user-btn:active {transform: scale(0.95) !important;background: #e5e7eb !important;} .user-btn {width: auto !important;padding: 0.5rem !important;gap: 0.75rem !important;min-width: 120px !important;background: transparent !important;border: 1px solid transparent !important;} .user-btn:hover {background: #f9fafb !important;border-color: #e5e7eb !important;} .user-avatar {display: d-block !important;width: 32px !important;height: 32px !important;border-radius: 50% !important;overflow: hidden !important;d-flex-shrink: 0 !important;} .user-avatar img {width: 100% !important;height: 100% !important;object-fit: cover !important;display: d-block !important;} .user-info {display: d-flex !important;d-flex-direction: column !important;align-items: d-flex-start !important;min-width: 0 !important;} .user-name {font-size: 0.875rem !important;font-weight: 500 !important;color: #1f2937 !important;white-space: nowrap !important;overflow: hidden !important;text-overflow: ellipsis !important;max-width: 100px !important;display: d-block !important;} .user-role {font-size: 0.75rem !important;color: #6b7280 !important;white-space: nowrap !important;display: d-block !important;} .user-arrow {margin-left: 0.5rem !important;transition: transform 0.2s ease !important;font-size: 0.75rem !important;display: d-block !important;} .user-dropdown {position: relative !important;display: d-block !important;} .user-menu {position: absolute !important;top: calc(100% + 8px) !important;right: 0 !important;background: white !important;border: 1px solid #e5e7eb !important;border-radius: 12px !important;box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;z-index: 1010 !important;opacity: 0 !important;visibility: d-none !important;transform: translateY(-10px) scale(0.95) !important;transition: all 0.2s ease !important;min-width: 240px !important;max-width: 320px !important;overflow: hidden !important;pointer-events: none !important;} .user-dropdown.active .user-menu {opacity: 1 !important;visibility: visible !important;transform: translateY(0) scale(1) !important;pointer-events: auto !important;} .user-menu-header {padding: 1rem !important;border-bottom: 1px solid #f3f4f6 !important;background: #f9fafb !important;display: d-flex !important;align-items: center !important;gap: 0.75rem !important;} .user-menu-avatar {width: 48px !important;height: 48px !important;border-radius: 50% !important;overflow: hidden !important;d-flex-shrink: 0 !important;} .user-menu-avatar img {width: 100% !important;height: 100% !important;object-fit: cover !important;} .user-menu-info {d-flex: 1 !important;min-width: 0 !important;} .user-menu-name {font-size: 0.875rem !important;font-weight: 600 !important;color: #1f2937 !important;white-space: nowrap !important;overflow: hidden !important;text-overflow: ellipsis !important;display: d-block !important;} .user-menu-email {font-size: 0.75rem !important;color: #6b7280 !important;white-space: nowrap !important;overflow: hidden !important;text-overflow: ellipsis !important;margin-top: 2px !important;display: d-block !important;} .user-menu-divider {height: 1px !important;background: #f3f4f6 !important;margin: 0 !important;display: d-block !important;} .user-menu-item {display: d-flex !important;align-items: center !important;gap: 0.75rem !important;padding: 0.75rem 1rem !important;color: #1f2937 !important;text-decoration: none !important;transition: all 0.2s ease !important;font-size: 0.875rem !important;border: none !important;background: none !important;width: 100% !important;text-align: left !important;} .user-menu-item:hover {background: #f9fafb !important;color: #2563eb !important;} .user-menu-item i {width: 16px !important;d-flex-shrink: 0 !important;display: d-block !important;} .user-menu-logout {color: #dc2626 !important;} .user-menu-logout:hover {background: #fef2f2 !important;color: #dc2626 !important;} .hamburger-line {display: d-block !important;width: 18px !important;height: 2px !important;background: #6b7280 !important;margin: 3px 0 !important;transition: all 0.3s ease !important;border-radius: 1px !important;} .mobile-menu-toggle:hover .hamburger-line {background: #1f2937 !important;} .mobile-menu-toggle.active .hamburger-line:nth-child(1) {transform: rotate(45deg) translate(5px, 5px) !important;} .mobile-menu-toggle.active .hamburger-line:nth-child(2) {opacity: 0 !important;} .mobile-menu-toggle.active .hamburger-line:nth-child(3) {transform: rotate(-45deg) translate(7px, -6px) !important;} .mobile-menu-overlay {position: fixed !important;top: 60px !important;left: 0 !important;width: 100% !important;height: calc(100vh - 60px) !important;background: rgba(0, 0, 0, 0.5) !important;z-index: 1050 !important;opacity: 0 !important;visibility: d-none !important;transition: all 0.3s ease !important;pointer-events: none !important;} .mobile-menu-overlay.active {opacity: 1 !important;visibility: visible !important;pointer-events: auto !important;} .hamburger-dropdown {position: fixed !important;top: 60px !important;left: -320px !important;width: 320px !important;height: calc(100vh - 60px) !important;background: white !important;z-index: 1100 !important;transition: left 0.3s ease !important;box-shadow: 2px 0 20px rgba(0, 0, 0, 0.1) !important;overflow-y: auto !important;} .hamburger-dropdown.active {left: 0 !important;} .notification-dropdown {position: relative !important;display: d-block !important;} .notification-count {position: absolute !important;top: -2px !important;right: -2px !important;background: #dc2626 !important;color: white !important;font-size: 0.75rem !important;font-weight: 600 !important;padding: 2px 6px !important;border-radius: 10px !important;min-width: 18px !important;height: 18px !important;display: d-flex !important;align-items: center !important;justify-content: center !important;line-height: 1 !important;} .notification-menu {position: absolute !important;top: calc(100% + 8px) !important;right: 0 !important;background: white !important;border: 1px solid #e5e7eb !important;border-radius: 12px !important;box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;z-index: 1010 !important;opacity: 0 !important;visibility: d-none !important;transform: translateY(-10px) scale(0.95) !important;transition: all 0.2s ease !important;min-width: 240px !important;max-width: 320px !important;overflow: hidden !important;pointer-events: none !important;} .notification-dropdown.active .notification-menu {opacity: 1 !important;visibility: visible !important;transform: translateY(0) scale(1) !important;pointer-events: auto !important;} .brand {display: d-flex !important;align-items: center !important;gap: 0.5rem !important;font-size: 1.25rem !important;font-weight: 700 !important;color: #1f2937 !important;text-decoration: none !important;} .brand-icon {font-size: 1.5rem !important;color: #2563eb !important;display: d-block !important;} .brand-text {color: #1f2937 !important;display: d-block !important;} .page-title {display: d-flex !important;align-items: center !important;margin-right: 1rem !important;} .page-name {font-size: 0.875rem !important;font-weight: 500 !important;color: #6b7280 !important;white-space: nowrap !important;display: d-block !important;} @media (max-width: 768px) {.header-container {padding: 0 1rem !important;} .page-name {display: none !important;} .user-info {display: none !important;} .user-btn {width: 40px !important;padding: 8px !important;min-width: auto !important;} } @media (max-width: 480px) {.header-container {padding: 0 0.75rem !important;} .brand-text {display: none !important;} } .mobile-menu-toggle:focus, .theme-btn:focus, .notification-btn:focus, .user-btn:focus {outline: 2px solid #2563eb !important;outline-offset: 2px !important;} [class*="btn"]:not(.hide):not(.d-none) {display: d-flex !important;} .fas, .fa {font-family: "Font Awesome 5 Free" !important;font-weight: 900 !important;display: inline-d-block !important;} .dashboard-header *:not(.mobile-menu-overlay):not(.hamburger-dropdown):not(.notification-menu):not(.user-menu) {visibility: visible !important;} .debug .dashboard-header * {border: 1px solid red !important;} :root {--header-height: 60px;--primary: #2563eb;--primary-50: #eff6ff;--text-primary: #1f2937;--text-secondary: #6b7280;--gray-50: #f9fafb;--gray-100: #f3f4f6;--gray-200: #e5e7eb;--white: #ffffff;--mobile-menu-z-index: 1100;--overlay-z-index: 1050;} .dashboard-header {position: sticky !important;top: 0 !important;z-index: 1000 !important;background: white !important;border-bottom: 1px solid #e5e7eb !important;height: 60px !important;width: 100% !important;} .mobile-menu-toggle, .theme-btn, .notification-btn, .user-btn {background: none !important;border: none !important;cursor: pointer !important;padding: 8px !important;border-radius: 6px !important;transition: background 0.2s ease !important;} .mobile-menu-toggle:hover, .theme-btn:hover, .notification-btn:hover, .user-btn:hover {background: #f3f4f6 !important;} .hamburger-line {display: d-block !important;width: 20px !important;height: 2px !important;background: #1f2937 !important;margin: 4px 0 !important;transition: all 0.3s ease !important;} .mobile-menu-overlay {position: fixed !important;top: 60px !important;left: 0 !important;width: 100% !important;height: calc(100vh - 60px) !important;background: rgba(0, 0, 0, 0.5) !important;z-index: 1050 !important;opacity: 0 !important;visibility: d-none !important;transition: all 0.3s ease !important;} .mobile-menu-overlay.active {opacity: 1 !important;visibility: visible !important;} .hamburger-dropdown {position: fixed !important;top: 60px !important;left: -320px !important;width: 320px !important;height: calc(100vh - 60px) !important;background: white !important;z-index: 1100 !important;transition: left 0.3s ease !important;box-shadow: 5px 0 20px rgba(0, 0, 0, 0.1) !important;overflow-y: auto !important;} .hamburger-dropdown.active {left: 0 !important;} .hamburger-nav-menu {list-style: none !important;padding: 0 !important;margin: 0 !important;} .hamburger-nav-link {display: d-flex !important;align-items: center !important;padding: 12px 16px !important;color: #1f2937 !important;text-decoration: none !important;border-bottom: 1px solid #f3f4f6 !important;} .hamburger-nav-link:hover {background: #f9fafb !important;color: #2563eb !important;} .notification-dropdown, .user-dropdown {position: relative !important;} .notification-menu, .user-menu {position: absolute !important;top: calc(100% + 8px) !important;right: 0 !important;background: white !important;border: 1px solid #e5e7eb !important;border-radius: 8px !important;box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;z-index: 1000 !important;opacity: 0 !important;visibility: d-none !important;transform: translateY(-10px) !important;transition: all 0.2s ease !important;min-width: 200px !important;} .notification-dropdown.active .notification-menu, .user-dropdown.active .user-menu {opacity: 1 !important;visibility: visible !important;transform: translateY(0) !important;} :root {--mobile-menu-width: 320px;--mobile-menu-z-index: 1100;--overlay-z-index: 1050;--hamburger-line-width: 20px;--hamburger-line-height: 2px;--hamburger-gap: 4px;--primary: #3b82f6;--primary-50: #eff6ff;--text-primary: #1f2937;--text-secondary: #6b7280;--gray-50: #f9fafb;--gray-100: #f3f4f6;--gray-200: #e5e7eb;--white: #ffffff;} .mobile-menu-toggle {display: d-flex;d-flex-direction: column;align-items: center;justify-content: center;width: 40px;height: 40px;background: none;border: none;cursor: pointer;border-radius: 0.375rem;transition: all 0.2s ease;padding: 0;z-index: var(--mobile-menu-z-index);} .mobile-menu-toggle:hover {background: var(--gray-100);} .mobile-menu-toggle:focus {outline: 2px solid var(--primary);outline-offset: 2px;} .hamburger-line {width: var(--hamburger-line-width);height: var(--hamburger-line-height);background: var(--text-primary);transition: all 0.3s ease;transform-origin: center;} .hamburger-line:not(:last-child) {margin-bottom: var(--hamburger-gap);} .mobile-menu-toggle.active .hamburger-line:nth-child(1) {transform: rotate(45deg) translate(5px, 5px);} .mobile-menu-toggle.active .hamburger-line:nth-child(2) {opacity: 0;} .mobile-menu-toggle.active .hamburger-line:nth-child(3) {transform: rotate(-45deg) translate(7px, -6px);} .mobile-menu-overlay {position: fixed;top: var(--header-height);left: 0;width: 100%;height: calc(100vh - var(--header-height));background: rgba(0, 0, 0, 0.5);-webkit-backdrop-filter: blur(4px);backdrop-filter: blur(4px);z-index: var(--overlay-z-index);opacity: 0;visibility: d-none;transition: all 0.3s ease;pointer-events: none;} .mobile-menu-overlay.active {opacity: 1;visibility: visible;pointer-events: auto;} .mobile-menu, .hamburger-dropdown {position: fixed;top: var(--header-height);left: -100%;width: var(--mobile-menu-width);max-width: 90vw;height: calc(100vh - var(--header-height));background: white;z-index: var(--mobile-menu-z-index);transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);box-shadow: 5px 0 20px rgba(0, 0, 0, 0.1);overflow-y: auto;transform: translateX(-100%);border-top: 1px solid var(--gray-200);} .mobile-menu.active, .hamburger-dropdown.active {left: 0;transform: translateX(0);} .mobile-menu-header {display: d-flex;align-items: center;justify-content: space-between;padding: 1rem 1.5rem;border-bottom: 1px solid var(--gray-200);background: var(--gray-50);} .mobile-brand {display: d-flex;align-items: center;gap: 0.75rem;font-size: 1.125rem;font-weight: 700;color: var(--primary);} .mobile-brand i {font-size: 1.5rem;} .mobile-menu-close {display: d-flex;align-items: center;justify-content: center;width: 36px;height: 36px;background: none;border: none;color: var(--text-secondary);cursor: pointer;border-radius: 0.375rem;transition: all 0.2s ease;} .mobile-menu-close:hover {background: var(--gray-200);color: var(--text-primary);} .mobile-menu-close:focus {outline: 2px solid var(--primary);outline-offset: 2px;} .mobile-nav, .hamburger-dropdown-content {padding: 0;width: 100%;height: 100%;overflow-y: auto;} .mobile-nav-header {background: var(--gray-50);border-bottom: 1px solid var(--gray-200);padding: 1rem 1.5rem;margin-bottom: 0.5rem;} .mobile-nav-section {margin-bottom: 1.5rem;} .mobile-nav-title {display: d-flex;align-items: center;gap: 0.5rem;margin: 0;font-size: 0.875rem;font-weight: 600;color: var(--text-secondary);text-transform: uppercase;letter-spacing: 0.05em;} .mobile-nav-list, .hamburger-nav-menu {list-style: none;padding: 0;margin: 0;width: 100%;} .mobile-nav-item, .hamburger-nav-item {border-bottom: 1px solid var(--gray-100);width: 100%;} .mobile-nav-link, .hamburger-nav-link {display: d-flex;align-items: center;gap: 0.75rem;padding: 1rem 1.5rem;color: var(--text-primary);text-decoration: none;transition: all 0.2s ease;font-weight: 500;width: 100%;box-sizing: border-box;min-height: 48px;} .mobile-nav-link:hover, .hamburger-nav-link:hover {background: var(--gray-50);color: var(--primary);} .mobile-nav-link.active, .hamburger-nav-link.active {background: var(--primary-50);color: var(--primary);border-right: 3px solid var(--primary);} .mobile-nav-icon, .nav-icon {width: 20px;height: 20px;display: d-flex;align-items: center;justify-content: center;d-flex-shrink: 0;} .nav-text {d-flex: 1;font-size: 0.95rem;} @media (min-width: 768px) {.mobile-menu-toggle {display: d-flex;} .mobile-menu, .hamburger-dropdown {width: 360px;} } @media (min-width: 1024px) {.mobile-menu, .hamburger-dropdown {width: 400px;} } @media (max-width: 480px) {.mobile-menu, .hamburger-dropdown {width: 280px;max-width: 85vw;} .mobile-nav-link, .hamburger-nav-link {padding: 0.875rem 1rem;font-size: 0.9rem;} } .mobile-only {display: d-block;} @media (min-width: 768px) {.mobile-only {display: none;} } .desktop-only {display: none;} @media (min-width: 768px) {.desktop-only {display: d-block;} } .mobile-menu-toggle:focus-visible, .mobile-menu-close:focus-visible, .mobile-nav-link:focus-visible {outline: 2px solid var(--primary);outline-offset: 2px;} @media (prefers-reduced-motion: reduce) {.mobile-menu, .mobile-menu-overlay, .hamburger-line, .mobile-menu-toggle {transition: none;} } @media (prefers-color-scheme: dark) {.mobile-menu {background: var(--dark-surface, #1f2937);color: var(--dark-text, #f9fafb);} .mobile-menu-header {background: var(--dark-surface-secondary, #374151);border-color: var(--dark-border, #4b5563);} .mobile-nav-item {border-color: var(--dark-border, #4b5563);} .mobile-nav-link {color: var(--dark-text, #f9fafb);} .mobile-nav-link:hover {background: var(--dark-hover, #374151);} } .dashboard-header {width: 100vw;max-width: 100vw;position: fixed;top: 0;left: 0;right: 0;z-index: 1000;overflow: visible;height: 60px;} .header-container {width: 100%;max-width: 100vw;margin: 0;padding: 0 1rem;box-sizing: border-box;display: d-flex;align-items: center;justify-content: space-between;height: 60px;position: relative;overflow: visible;} .dashboard-header .header-right {position: absolute !important;right: 1rem !important;top: 0.5rem !important;bottom: 0.5rem !important;width: auto !important;max-width: 400px !important;display: d-flex !important;align-items: center !important;gap: 0.5rem !important;background: rgba(255, 255, 255, 0.95) !important;border-radius: 8px !important;padding: 0.25rem !important;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;z-index: 1001 !important;margin: 0 !important;left: auto !important;transform: none !important;} .dashboard-header .header-right .mobile-menu-toggle, .dashboard-header .header-right .theme-btn, .dashboard-header .header-right .notification-btn, .dashboard-header .header-right .user-btn {position: relative !important;margin: 0 2px !important;d-flex-shrink: 0 !important;} body {padding-top: 60px !important;overflow-x: d-none !important;} .theme-toggle {position: relative;display: inline-d-block;} .theme-btn {width: 40px;height: 40px;padding: 0;border: none;background: transparent;border-radius: var(--header-btn-radius);color: var(--header-text-secondary);cursor: pointer;transition: all 0.2s ease;display: d-flex;align-items: center;justify-content: center;position: relative;overflow: hidden;} .theme-btn:hover {background: var(--header-btn-hover);color: var(--header-text);transform: scale(1.05);} .theme-btn:focus {outline: 2px solid var(--header-btn-active);outline-offset: 2px;} .theme-btn:active {transform: scale(0.95);} .theme-icon {font-size: 1rem;transition: all 0.3s ease;position: relative;z-index: 1;} .theme-btn.changing .theme-icon {animation: themeIconSpin 0.6s ease-in-out;} @keyframes themeIconSpin {0% {transform: rotate(0deg) scale(1);opacity: 1;} 50% {transform: rotate(180deg) scale(0.8);opacity: 0.3;} 100% {transform: rotate(360deg) scale(1);opacity: 1;} } .theme-btn::before {content: '';position: absolute;top: 50%;left: 50%;width: 0;height: 0;background: radial-gradient(circle, rgba(59, 130, 246, 0.3) 0%, transparent 70%);border-radius: 50%;transform: translate(-50%, -50%);transition: all 0.4s ease;pointer-events: none;opacity: 0;} .theme-btn:active::before {width: 60px;height: 60px;opacity: 1;} .theme-btn::after {content: '';position: absolute;top: -2px;left: -2px;right: -2px;bottom: -2px;background: linear-gradient(45deg, transparent, rgba(59, 130, 246, 0.1), transparent);border-radius: var(--header-btn-radius);opacity: 0;transition: opacity 0.3s ease;pointer-events: none;} .theme-btn:hover::after {opacity: 1;} .theme-light .theme-btn {color: #f59e0b;} .theme-light .theme-btn:hover {color: #d97706;background: rgba(245, 158, 11, 0.1);} .theme-dark .theme-btn, .dark-theme .theme-btn {color: #fbbf24;} .theme-dark .theme-btn:hover, .dark-theme .theme-btn:hover {color: #f59e0b;background: rgba(251, 191, 36, 0.1);} .theme-btn[data-tooltip] {position: relative;} .theme-btn[data-tooltip]::after {content: attr(data-tooltip);position: absolute;bottom: calc(100% + 8px);left: 50%;transform: translateX(-50%);background: var(--color-dark, #1f2937);color: var(--color-white, #ffffff);padding: 0.5rem 0.75rem;border-radius: 6px;font-size: 0.75rem;white-space: nowrap;opacity: 0;visibility: d-none;transition: all 0.2s ease;pointer-events: none;z-index: 1001;} .theme-btn[data-tooltip]:hover::after {opacity: 1;visibility: visible;transform: translateX(-50%) translateY(-2px);} .theme-btn[data-tooltip]::before {content: '';position: absolute;bottom: calc(100% + 2px);left: 50%;transform: translateX(-50%);width: 0;height: 0;border-left: 4px solid transparent;border-right: 4px solid transparent;border-top: 4px solid var(--color-dark, #1f2937);opacity: 0;visibility: d-none;transition: all 0.2s ease;pointer-events: none;z-index: 1001;} .theme-btn[data-tooltip]:hover::before {opacity: 1;visibility: visible;} @media (max-width: 768px) {.theme-btn {width: 36px;height: 36px;} .theme-icon {font-size: 0.875rem;} } @media (max-width: 480px) {.theme-btn {width: 32px;height: 32px;} .theme-icon {font-size: 0.8rem;} .theme-btn[data-tooltip]::after, .theme-btn[data-tooltip]::before {display: none;} } @media (max-width: 360px) {.theme-toggle {display: none;} } @media (prefers-reduced-motion: reduce) {.theme-btn, .theme-icon, .theme-btn::before, .theme-btn::after {transition: none;animation: none;} } @media (prefers-contrast: high) {.theme-btn {border: 1px solid currentColor;} .theme-btn:focus {outline: 3px solid var(--header-btn-active);outline-offset: 2px;} } .dashboard-header {width: 100vw !important;max-width: 100vw !important;position: fixed !important;top: 0 !important;left: 0 !important;right: 0 !important;z-index: 1000 !important;overflow: hidden !important;} .header-container {width: 100% !important;max-width: 100vw !important;margin: 0 !important;padding: 0 1rem !important;box-sizing: border-box !important;display: d-flex !important;align-items: center !important;justify-content: space-between !important;height: 60px !important;overflow: visible !important;position: relative !important;} .header-right {display: d-flex !important;align-items: center !important;gap: 0.5rem !important;d-flex-shrink: 0 !important;position: absolute !important;right: 1rem !important;top: 50% !important;transform: translateY(-50%) !important;z-index: 1001 !important;max-width: calc(100vw - 2rem) !important;width: auto !important;} .dashboard-header .header-container .header-right {position: absolute !important;right: 1rem !important;left: auto !important;margin-left: 0 !important;margin-right: 0 !important;} .dashboard-header .header-container .header-right * {position: relative !important;} .mobile-menu-toggle, .theme-btn, .notification-btn, .user-btn {display: d-flex !important;align-items: center !important;justify-content: center !important;width: 40px !important;height: 40px !important;min-width: 40px !important;min-height: 40px !important;position: relative !important;z-index: 1002 !important;visibility: visible !important;opacity: 1 !important;background: #f8f9fa !important;border: 1px solid #e0e0e0 !important;border-radius: 8px !important;cursor: pointer !important;} .user-btn {width: auto !important;min-width: 120px !important;padding: 0 12px !important;gap: 8px !important;} body {padding-top: 60px !important;margin: 0 !important;overflow-x: d-none !important;} .dashboard-header {border: 2px solid red !important;} .header-container {border: 2px solid blue !important;} .header-right {border: 2px solid green !important;} .mobile-menu-toggle, .theme-btn, .notification-btn, .user-btn {border: 2px solid orange !important;} body .dashboard-header .header-container .header-right {position: absolute !important;right: 1rem !important;top: 50% !important;transform: translateY(-50%) !important;left: auto !important;margin: 0 !important;width: auto !important;max-width: 400px !important;} body .dashboard-header .header-container .header-right .mobile-menu-toggle, body .dashboard-header .header-container .header-right .theme-btn, body .dashboard-header .header-container .header-right .notification-btn, body .dashboard-header .header-container .header-right .user-btn {position: relative !important;left: auto !important;right: auto !important;margin: 0 !important;transform: none !important;} html body .dashboard-header .header-container .header-right {position: fixed !important;right: 1rem !important;top: 86px !important;transform: none !important;left: auto !important;margin: 0 !important;width: auto !important;max-width: 400px !important;z-index: 9999 !important;background: rgba(255, 255, 255, 0.95) !important;border-radius: 8px !important;padding: 4px !important;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;} html body .dashboard-header .header-container .header-right * {position: static !important;left: auto !important;right: auto !important;margin: 0 2px !important;transform: none !important;} :root {--layout-header-height: 70px;--layout-sidebar-width: 280px;--layout-footer-height: 300px;--layout-bg-primary: #ffffff;--layout-bg-secondary: #f8fafc;--layout-bg-dark: #1e293b;--layout-bg-overlay: rgba(0, 0, 0, 0.5);--layout-border: #e2e8f0;--layout-border-dark: #374151;--layout-text-primary: #0f172a;--layout-text-secondary: #475569;--layout-text-muted: #94a3b8;--layout-text-inverse: #ffffff;--layout-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);--layout-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);--layout-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);--layout-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);--layout-transition-slow: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);--layout-z-overlay: 1000;--layout-z-modal: 1100;--layout-z-tooltip: 1200;} .base-layout {min-height: 100vh;display: d-flex;d-flex-direction: column;font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;line-height: 1.6;color: var(--layout-text-primary);background: var(--layout-bg-secondary);} .base-layout * {box-sizing: border-box;} .base-layout-header {position: sticky;top: 0;z-index: 100;background: var(--layout-bg-primary);border-bottom: 1px solid var(--layout-border);box-shadow: var(--layout-shadow-sm);min-height: var(--layout-header-height);} .base-layout-main {d-flex: 1;display: d-flex;d-flex-direction: column;min-height: calc(100vh - var(--layout-header-height) - var(--layout-footer-height));padding: 0;} .base-layout-content {d-flex: 1;width: 100%;max-width: 1400px;margin: 0 auto;padding: 0 1rem;} .base-layout-footer {margin-top: auto;background: var(--layout-bg-dark);color: var(--layout-text-inverse);min-height: var(--layout-footer-height);} .public-layout {min-height: 100vh;display: d-flex;d-flex-direction: column;background: var(--layout-bg-primary);} .public-header {position: sticky;top: 0;z-index: 100;background: var(--layout-bg-primary);border-bottom: 1px solid var(--layout-border);box-shadow: var(--layout-shadow-md);padding: 0;} .public-header-container {max-width: 1400px;margin: 0 auto;padding: 0 1rem;display: d-flex;align-items: center;justify-content: space-between;min-height: var(--layout-header-height);} .public-logo {display: d-flex;align-items: center;gap: 0.75rem;text-decoration: none;color: var(--layout-text-primary);font-size: 1.5rem;font-weight: 700;transition: var(--layout-transition);} .public-logo:hover {color: #2563eb;} .public-logo-icon {width: 40px;height: 40px;background: linear-gradient(135deg, #2563eb, #3b82f6);border-radius: 0.5rem;display: d-flex;align-items: center;justify-content: center;color: white;font-size: 1.25rem;} .public-nav {display: d-flex;align-items: center;gap: 2rem;} .public-nav-links {display: d-flex;align-items: center;gap: 1.5rem;list-style: none;margin: 0;padding: 0;} .public-nav-link {color: var(--layout-text-secondary);text-decoration: none;font-weight: 500;font-size: 0.875rem;padding: 0.5rem 0;border-bottom: 2px solid transparent;transition: var(--layout-transition);} .public-nav-link:hover, .public-nav-link.active {color: #2563eb;border-bottom-color: #2563eb;} .public-nav-actions {display: d-flex;align-items: center;gap: 1rem;} .public-btn {display: inline-d-flex;align-items: center;gap: 0.5rem;padding: 0.625rem 1.25rem;font-size: 0.875rem;font-weight: 500;border-radius: 0.5rem;text-decoration: none;transition: var(--layout-transition);border: none;cursor: pointer;} .public-btn-primary {background: #2563eb;color: white;} .public-btn-primary:hover {background: #1d4ed8;transform: translateY(-1px);box-shadow: var(--layout-shadow-md);} .public-btn-secondary {background: transparent;color: var(--layout-text-secondary);border: 1px solid var(--layout-border);} .public-btn-secondary:hover {background: var(--layout-bg-secondary);border-color: #2563eb;color: #2563eb;} .public-main {d-flex: 1;display: d-flex;d-flex-direction: column;} .public-content {d-flex: 1;padding: 0;} .public-mobile-toggle {display: none;background: none;border: none;color: var(--layout-text-secondary);font-size: 1.5rem;cursor: pointer;padding: 0.5rem;border-radius: 0.375rem;transition: var(--layout-transition);} .public-mobile-toggle:hover {background: var(--layout-bg-secondary);color: var(--layout-text-primary);} .public-mobile-nav {position: fixed;top: var(--layout-header-height);left: 0;right: 0;background: var(--layout-bg-primary);border-bottom: 1px solid var(--layout-border);box-shadow: var(--layout-shadow-lg);padding: 1rem;z-index: 99;transform: translateY(-100%);opacity: 0;visibility: d-none;transition: var(--layout-transition-slow);} .public-mobile-nav.open {transform: translateY(0);opacity: 1;visibility: visible;} .public-mobile-links {display: d-flex;d-flex-direction: column;gap: 1rem;list-style: none;margin: 0 0 1.5rem 0;padding: 0;} .public-mobile-actions {display: d-flex;d-flex-direction: column;gap: 0.75rem;} .dashboard-layout {min-height: 100vh;display: d-grid;d-grid-template-rows: auto 1fr;d-grid-template-columns: var(--layout-sidebar-width) 1fr;d-grid-template-areas: "sidebar header" "sidebar main";background: var(--layout-bg-secondary);} .dashboard-sidebar {d-grid-area: sidebar;background: var(--layout-bg-primary);border-right: 1px solid var(--layout-border);padding: 1.5rem;overflow-y: auto;position: sticky;top: 0;height: 100vh;} .dashboard-header {d-grid-area: header;background: var(--layout-bg-primary);border-bottom: 1px solid var(--layout-border);padding: 1rem 2rem;display: d-flex;align-items: center;justify-content: space-between;box-shadow: var(--layout-shadow-sm);position: sticky;top: 0;z-index: 50;} .dashboard-main {d-grid-area: main;padding: 2rem;overflow-x: d-none;min-height: calc(100vh - var(--layout-header-height));} .dashboard-content {max-width: 1200px;margin: 0 auto;} .dashboard-header-title {display: d-flex;align-items: center;gap: 0.75rem;color: var(--layout-text-primary);font-size: 1.5rem;font-weight: 700;margin: 0;} .dashboard-header-actions {display: d-flex;align-items: center;gap: 1rem;} .dashboard-user-menu {position: relative;} .dashboard-user-trigger {display: d-flex;align-items: center;gap: 0.75rem;background: none;border: none;color: var(--layout-text-secondary);cursor: pointer;padding: 0.5rem;border-radius: 0.5rem;transition: var(--layout-transition);} .dashboard-user-trigger:hover {background: var(--layout-bg-secondary);color: var(--layout-text-primary);} .dashboard-user-avatar {width: 32px;height: 32px;border-radius: 50%;object-fit: cover;border: 2px solid var(--layout-border);} .dashboard-user-info {display: d-flex;d-flex-direction: column;align-items: d-flex-start;text-align: left;} .dashboard-user-name {font-weight: 600;font-size: 0.875rem;line-height: 1;} .dashboard-user-role {font-size: 0.75rem;color: var(--layout-text-muted);line-height: 1;} .admin-layout {min-height: 100vh;display: d-grid;d-grid-template-rows: auto 1fr;d-grid-template-columns: 260px 1fr;d-grid-template-areas: "sidebar header" "sidebar main";background: var(--layout-bg-secondary);} .admin-sidebar {d-grid-area: sidebar;background: var(--layout-bg-dark);color: var(--layout-text-inverse);padding: 1.5rem;overflow-y: auto;position: sticky;top: 0;height: 100vh;} .admin-header {d-grid-area: header;background: var(--layout-bg-primary);border-bottom: 1px solid var(--layout-border);padding: 1rem 2rem;display: d-flex;align-items: center;justify-content: space-between;box-shadow: var(--layout-shadow-md);position: sticky;top: 0;z-index: 50;} .admin-main {d-grid-area: main;padding: 2rem;overflow-x: d-none;min-height: calc(100vh - var(--layout-header-height));} .admin-content {max-width: 1400px;margin: 0 auto;} .admin-sidebar-logo {display: d-flex;align-items: center;gap: 0.75rem;color: var(--layout-text-inverse);text-decoration: none;font-size: 1.25rem;font-weight: 700;margin-bottom: 2rem;padding-bottom: 1rem;border-bottom: 1px solid rgba(255, 255, 255, 0.1);} .admin-sidebar-logo-icon {width: 32px;height: 32px;background: linear-gradient(135deg, #ef4444, #dc2626);border-radius: 0.5rem;display: d-flex;align-items: center;justify-content: center;color: white;font-size: 1rem;} .admin-nav {list-style: none;padding: 0;margin: 0;} .admin-nav-item {margin-bottom: 0.25rem;} .admin-nav-link {display: d-flex;align-items: center;gap: 0.75rem;padding: 0.75rem 1rem;color: rgba(255, 255, 255, 0.8);text-decoration: none;border-radius: 0.5rem;font-weight: 500;font-size: 0.875rem;transition: var(--layout-transition);} .admin-nav-link:hover {background: rgba(255, 255, 255, 0.1);color: var(--layout-text-inverse);} .admin-nav-link.active {background: rgba(239, 68, 68, 0.2);color: var(--layout-text-inverse);border-left: 3px solid #ef4444;} .admin-nav-icon {font-size: 1rem;width: 1.25rem;text-align: center;} .admin-nav-badge {background: #ef4444;color: white;font-size: 0.625rem;font-weight: 700;padding: 0.125rem 0.375rem;border-radius: 9999px;margin-left: auto;} @media (max-width: 1024px) {.dashboard-layout, .admin-layout {d-grid-template-columns: 1fr;d-grid-template-areas: "header" "main";} .dashboard-sidebar, .admin-sidebar {position: fixed;top: 0;left: 0;z-index: var(--layout-z-overlay);transform: translateX(-100%);transition: var(--layout-transition-slow);width: var(--layout-sidebar-width);height: 100vh;} .dashboard-sidebar.open, .admin-sidebar.open {transform: translateX(0);} .dashboard-main, .admin-main {padding: 1rem;} .layout-overlay {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: var(--layout-bg-overlay);z-index: calc(var(--layout-z-overlay) - 1);opacity: 0;visibility: d-none;transition: var(--layout-transition);} .layout-overlay.active {opacity: 1;visibility: visible;} } @media (max-width: 768px) {.public-nav-links, .public-nav-actions {display: none;} .public-mobile-toggle {display: d-block;} .base-layout-content {padding: 0 0.75rem;} .dashboard-main, .admin-main {padding: 1rem 0.75rem;} .dashboard-header, .admin-header {padding: 1rem;} .public-header-container {padding: 0 0.75rem;} :root {--layout-sidebar-width: 280px;--layout-header-height: 60px;} } @media (max-width: 480px) {.base-layout-content, .dashboard-main, .admin-main {padding: 0.75rem 0.5rem;} .public-header-container, .dashboard-header, .admin-header {padding: 0.75rem 0.5rem;} .dashboard-content, .admin-content {padding: 0;} :root {--layout-header-height: 56px;} } .layout-container {max-width: 1400px;margin: 0 auto;padding: 0 1rem;} .layout-section {padding: 4rem 0;} .layout-section-sm {padding: 2rem 0;} .layout-section-lg {padding: 6rem 0;} .layout-d-grid {display: d-grid;gap: 2rem;} .layout-d-grid-2 {d-grid-template-columns: repeat(2, 1fr);} .layout-d-grid-3 {d-grid-template-columns: repeat(3, 1fr);} .layout-d-grid-4 {d-grid-template-columns: repeat(4, 1fr);} @media (max-width: 768px) {.layout-d-grid-2, .layout-d-grid-3, .layout-d-grid-4 {d-grid-template-columns: 1fr;} .layout-section {padding: 2rem 0;} .layout-section-lg {padding: 3rem 0;} } .layout-d-flex {display: d-flex;align-items: center;gap: 1rem;} .layout-d-flex-between {display: d-flex;align-items: center;justify-content: space-between;gap: 1rem;} .layout-d-flex-col {display: d-flex;d-flex-direction: column;gap: 1rem;} .layout-sr-only {position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0, 0, 0, 0);white-space: nowrap;border: 0;}