/* ========================================================================== MODERN.CSS — Grume POS 2026 Redesign ========================================================================== SOLO attivo quando Nessuna modifica al design esistente finché non attivi il toggle. ========================================================================== */ /* ========================================================================== 1. BASE RESET & TYPOGRAPHY ========================================================================== */ body.modern-theme { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; font-feature-settings: 'cv11', 'ss01', 'cv01' !important; letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ========================================================================== 2. COLOR PALETTE (Light Mode) ========================================================================== */ body.modern-theme { --m-accent: #6366f1; --m-accent-hover: #4f46e5; --m-accent-soft: #eef2ff; --m-success: #10b981; --m-success-soft: #ecfdf5; --m-warning: #f59e0b; --m-warning-soft: #fffbeb; --m-danger: #ef4444; --m-danger-soft: #fef2f2; --m-info: #06b6d4; --m-info-soft: #ecfeff; --m-surface: #ffffff; --m-surface-raised: #f8fafc; --m-surface-overlay: #f1f5f9; --m-bg: #f0f2f5; --m-text: #1e293b; --m-text-secondary: #64748b; --m-text-muted: #94a3b8; --m-border: #e2e8f0; --m-border-light: #f1f5f9; --m-shadow-sm: 0 1px 2px rgba(0,0,0,0.04); --m-shadow-md: 0 4px 12px rgba(0,0,0,0.06); --m-shadow-lg: 0 12px 40px rgba(0,0,0,0.08); --m-shadow-xl: 0 24px 64px rgba(0,0,0,0.12); --m-radius-sm: 8px; --m-radius-md: 12px; --m-radius-lg: 16px; --m-radius-xl: 20px; } /* ========================================================================== 3. COLOR PALETTE (Dark Mode) ========================================================================== */ @media (prefers-color-scheme: dark) { body.modern-theme { --m-accent: #818cf8; --m-accent-hover: #6366f1; --m-accent-soft: rgba(99,102,241,0.15); --m-success: #34d399; --m-success-soft: rgba(16,185,129,0.15); --m-warning: #fbbf24; --m-warning-soft: rgba(245,158,11,0.15); --m-danger: #f87171; --m-danger-soft: rgba(239,68,68,0.15); --m-info: #22d3ee; --m-info-soft: rgba(6,182,212,0.15); --m-surface: #1e1e2e; --m-surface-raised: #262637; --m-surface-overlay: #2d2d3f; --m-bg: #14141f; --m-text: #f1f5f9; --m-text-secondary: #94a3b8; --m-text-muted: #64748b; --m-border: #333347; --m-border-light: #2a2a3a; --m-shadow-sm: 0 1px 2px rgba(0,0,0,0.2); --m-shadow-md: 0 4px 12px rgba(0,0,0,0.3); --m-shadow-lg: 0 12px 40px rgba(0,0,0,0.4); --m-shadow-xl: 0 24px 64px rgba(0,0,0,0.5); } } /* ========================================================================== 4. BODY & BACKGROUND ========================================================================== */ body.modern-theme { background-color: var(--m-bg) !important; color: var(--m-text) !important; } /* ========================================================================== 5. HEADER — Clean & Floating ========================================================================== */ body.modern-theme .pos-header { background: var(--m-surface) !important; border-bottom: 1px solid var(--m-border) !important; box-shadow: var(--m-shadow-sm) !important; backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); padding: 8px 16px !important; } body.modern-theme .pos-header .btn-outline-light { background: var(--m-surface-raised) !important; color: var(--m-text) !important; border-color: var(--m-border) !important; border-radius: var(--m-radius-sm) !important; font-weight: 500 !important; font-size: 0.8rem !important; padding: 6px 12px !important; } body.modern-theme .pos-header .btn-outline-light i { color: var(--m-text) !important; } body.modern-theme .pos-header .btn-outline-light:hover { background: var(--m-accent) !important; color: white !important; border-color: var(--m-accent) !important; box-shadow: 0 2px 8px rgba(99,102,241,0.3); } body.modern-theme .pos-header .btn-outline-warning { background: transparent !important; border-color: var(--m-warning) !important; color: var(--m-warning) !important; } body.modern-theme .pos-header .btn-danger { background: var(--m-danger) !important; border-color: var(--m-danger) !important; border-radius: var(--m-radius-sm) !important; } body.modern-theme .pos-header .btn-danger:hover { background: #dc2626 !important; box-shadow: 0 2px 8px rgba(239,68,68,0.3); } body.modern-theme .pos-header-logo-img { height: 36px !important; border-radius: 8px; } /* Header text must be dark on light surface background */ body.modern-theme .pos-header .text-white, body.modern-theme .pos-header .text-warning, body.modern-theme .pos-header a.text-white, body.modern-theme .pos-header span.text-white, body.modern-theme .pos-header span.text-muted { color: var(--m-text) !important; } body.modern-theme .pos-header .text-warning i { color: var(--m-warning) !important; } body.modern-theme .pos-header .btn-outline-warning { color: var(--m-warning) !important; border-color: var(--m-warning) !important; } body.modern-theme .pos-header .btn-outline-warning i { color: var(--m-warning) !important; } body.modern-theme .pos-header .btn-danger i { color: white !important; } /* FIX: Override style.css white-on-white for ALL header icons */ body.modern-theme .pos-header i { color: var(--m-text) !important; } body.modern-theme .pos-header .btn-outline-secondary { background: var(--m-surface-raised) !important; color: var(--m-text-secondary) !important; border-color: var(--m-border) !important; border-radius: var(--m-radius-sm) !important; } body.modern-theme .pos-header .btn-outline-secondary i { color: var(--m-text-secondary) !important; } /* ========================================================================== 6. CARDS — Glassmorphism ========================================================================== */ body.modern-theme .card, body.modern-theme .bg-panel-theme, body.modern-theme .bg-panel { background: var(--m-surface) !important; border: 1px solid var(--m-border) !important; border-radius: var(--m-radius-lg) !important; box-shadow: var(--m-shadow-sm) !important; overflow: hidden; } body.modern-theme .card:hover { box-shadow: var(--m-shadow-md) !important; border-color: var(--m-accent) !important; } body.modern-theme .card-header { background: var(--m-surface-raised) !important; border-bottom: 1px solid var(--m-border) !important; padding: 16px 20px !important; font-weight: 600; } body.modern-theme .card-body { padding: 20px !important; } body.modern-theme .shadow-lg, body.modern-theme .shadow-sm { box-shadow: var(--m-shadow-md) !important; } /* ========================================================================== 7. TABLES — Clean Modern ========================================================================== */ body.modern-theme .table { color: var(--m-text) !important; font-size: 0.875rem; border-collapse: separate; border-spacing: 0; } body.modern-theme .table thead th { background: var(--m-surface-raised) !important; color: var(--m-text-secondary) !important; font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 12px 16px !important; border-bottom: 2px solid var(--m-border) !important; } body.modern-theme .table tbody tr { transition: background-color 0.15s ease; } body.modern-theme .table tbody tr:hover { background-color: var(--m-accent-soft) !important; } body.modern-theme .table td { padding: 12px 16px !important; border-bottom: 1px solid var(--m-border-light) !important; vertical-align: middle; } body.modern-theme .table-striped tbody tr:nth-of-type(odd) { background-color: var(--m-surface-raised) !important; } body.modern-theme .table-bordered { border-color: var(--m-border) !important; } body.modern-theme .table-bordered td, body.modern-theme .table-bordered th { border-color: var(--m-border) !important; } /* ========================================================================== 8. BUTTONS — Modern Rounded ========================================================================== */ body.modern-theme .btn { border-radius: var(--m-radius-sm) !important; font-weight: 500; font-size: 0.875rem; padding: 8px 16px; letter-spacing: 0.01em; box-shadow: none !important; } body.modern-theme .btn:hover { transform: translateY(-1px); box-shadow: var(--m-shadow-md) !important; } body.modern-theme .btn:active { transform: translateY(0); } body.modern-theme .btn-primary { background: var(--m-accent) !important; border-color: var(--m-accent) !important; } body.modern-theme .btn-primary:hover { background: var(--m-accent-hover) !important; border-color: var(--m-accent-hover) !important; box-shadow: 0 4px 12px rgba(99,102,241,0.3) !important; } body.modern-theme .btn-success { background: var(--m-success) !important; border-color: var(--m-success) !important; } body.modern-theme .btn-danger { background: var(--m-danger) !important; border-color: var(--m-danger) !important; } body.modern-theme .btn-warning { background: var(--m-warning) !important; border-color: var(--m-warning) !important; color: #1e293b !important; } body.modern-theme .btn-info { background: var(--m-info) !important; border-color: var(--m-info) !important; } body.modern-theme .btn-outline-primary { background: transparent !important; border: 1.5px solid var(--m-accent) !important; color: var(--m-accent) !important; } body.modern-theme .btn-outline-primary:hover { background: var(--m-accent) !important; color: white !important; } body.modern-theme .btn-outline-secondary { background: transparent !important; border: 1.5px solid var(--m-border) !important; color: var(--m-text-secondary) !important; } body.modern-theme .btn-outline-secondary:hover { background: var(--m-surface-overlay) !important; border-color: var(--m-text-secondary) !important; color: var(--m-text) !important; } body.modern-theme .btn-outline-danger { border: 1.5px solid var(--m-danger) !important; color: var(--m-danger) !important; } body.modern-theme .btn-outline-danger:hover { background: var(--m-danger) !important; color: white !important; } body.modern-theme .btn-outline-success { border: 1.5px solid var(--m-success) !important; color: var(--m-success) !important; } body.modern-theme .btn-outline-success:hover { background: var(--m-success) !important; color: white !important; } /* Back button */ body.modern-theme .btn-back-admin { background: var(--m-surface-raised) !important; border: 1.5px solid var(--m-border) !important; color: var(--m-text-secondary) !important; border-radius: var(--m-radius-sm) !important; font-weight: 500; } body.modern-theme .btn-back-admin:hover { background: var(--m-accent) !important; color: white !important; border-color: var(--m-accent) !important; } /* ========================================================================== 9. FORMS — Modern Inputs ========================================================================== */ body.modern-theme .form-control, body.modern-theme .form-select { border: 1.5px solid var(--m-border) !important; border-radius: var(--m-radius-sm) !important; background: var(--m-surface) !important; color: var(--m-text) !important; padding: 10px 14px !important; font-size: 0.9rem !important; box-shadow: none !important; transition: border-color 0.2s ease, box-shadow 0.2s ease; } body.modern-theme .form-control:focus, body.modern-theme .form-select:focus { border-color: var(--m-accent) !important; box-shadow: 0 0 0 3px rgba(99,102,241,0.15) !important; outline: none; } body.modern-theme .form-control::placeholder { color: var(--m-text-muted) !important; } body.modern-theme .form-label, body.modern-theme label { color: var(--m-text-secondary) !important; font-weight: 500; font-size: 0.85rem; margin-bottom: 6px; } body.modern-theme .input-group { border-radius: var(--m-radius-sm) !important; overflow: hidden; } body.modern-theme .input-group .btn { border-radius: 0 !important; } body.modern-theme .form-check-input:checked { background-color: var(--m-accent) !important; border-color: var(--m-accent) !important; } /* ========================================================================== 10. BADGES — Modern Pills ========================================================================== */ body.modern-theme .badge { border-radius: 20px !important; font-weight: 600; font-size: 0.7rem !important; padding: 4px 10px !important; letter-spacing: 0.02em; } body.modern-theme .badge.bg-primary { background: var(--m-accent-soft) !important; color: var(--m-accent) !important; } body.modern-theme .badge.bg-success { background: var(--m-success-soft) !important; color: var(--m-success) !important; } body.modern-theme .badge.bg-warning { background: var(--m-warning-soft) !important; color: var(--m-warning) !important; } body.modern-theme .badge.bg-danger { background: var(--m-danger-soft) !important; color: var(--m-danger) !important; } body.modern-theme .badge.bg-info { background: var(--m-info-soft) !important; color: var(--m-info) !important; } body.modern-theme .badge.bg-secondary, body.modern-theme .badge.bg-light { background: var(--m-surface-overlay) !important; color: var(--m-text-secondary) !important; } body.modern-theme .badge.text-dark { color: var(--m-text) !important; } body.modern-theme .badge.text-white { color: white !important; } /* ========================================================================== 11. MODALS — Premium Overlay ========================================================================== */ body.modern-theme .modal-content { background: var(--m-surface) !important; border: 1px solid var(--m-border) !important; border-radius: var(--m-radius-xl) !important; box-shadow: var(--m-shadow-xl) !important; overflow: hidden; } body.modern-theme .modal-header { background: var(--m-surface-raised) !important; border-bottom: 1px solid var(--m-border) !important; padding: 20px 24px !important; } body.modern-theme .modal-header .modal-title { font-weight: 700; font-size: 1.1rem; } body.modern-theme .modal-body { padding: 24px !important; } body.modern-theme .modal-footer { border-top: 1px solid var(--m-border) !important; padding: 16px 24px !important; } body.modern-theme .modal-backdrop.show { background: rgba(0,0,0,0.4) !important; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } /* ========================================================================== 12. OFFCANVAS — Slide Menu ========================================================================== */ body.modern-theme .offcanvas { background: var(--m-surface) !important; border-right: 1px solid var(--m-border) !important; } body.modern-theme .offcanvas-header { background: var(--m-surface-raised) !important; border-bottom: 1px solid var(--m-border) !important; padding: 16px 20px !important; } body.modern-theme .offcanvas-body .list-group-item { background: transparent !important; color: var(--m-text) !important; border: none !important; border-radius: var(--m-radius-sm) !important; padding: 12px 16px !important; font-weight: 500; font-size: 0.9rem; margin-bottom: 2px; } body.modern-theme .offcanvas-body .list-group-item:hover { background: var(--m-accent-soft) !important; color: var(--m-accent) !important; } body.modern-theme .offcanvas-body .list-group-item.active { background: var(--m-accent) !important; color: white !important; } /* ========================================================================== 13. NAV TABS — Modern Underline ========================================================================== */ body.modern-theme .nav-tabs { border-color: var(--m-border) !important; gap: 2px; } body.modern-theme .nav-tabs .nav-link { color: var(--m-text-secondary) !important; border: none !important; border-radius: var(--m-radius-sm) var(--m-radius-sm) 0 0 !important; font-weight: 500; font-size: 0.85rem; padding: 10px 16px !important; transition: all 0.2s ease; } body.modern-theme .nav-tabs .nav-link:hover { color: var(--m-accent) !important; background: var(--m-accent-soft) !important; border-color: transparent !important; } body.modern-theme .nav-tabs .nav-link.active { background: var(--m-surface) !important; color: var(--m-accent) !important; border-bottom: 2px solid var(--m-accent) !important; font-weight: 600; } /* ========================================================================== 14. DROPDOWN — Floating Menu ========================================================================== */ body.modern-theme .dropdown-menu { background: var(--m-surface) !important; border: 1px solid var(--m-border) !important; border-radius: var(--m-radius-md) !important; box-shadow: var(--m-shadow-lg) !important; padding: 6px !important; overflow: hidden; } body.modern-theme .dropdown-item { color: var(--m-text) !important; border-radius: var(--m-radius-sm) !important; padding: 8px 14px !important; font-size: 0.85rem; font-weight: 450; } body.modern-theme .dropdown-item:hover { background: var(--m-accent-soft) !important; color: var(--m-accent) !important; } body.modern-theme .dropdown-divider { border-color: var(--m-border-light) !important; margin: 4px 0 !important; } /* ========================================================================== 15. ALERTS — Clean Cards ========================================================================== */ body.modern-theme .alert { border-radius: var(--m-radius-md) !important; border: none !important; font-weight: 450; font-size: 0.9rem; padding: 14px 18px !important; } body.modern-theme .alert-success { background: var(--m-success-soft) !important; color: var(--m-success) !important; } body.modern-theme .alert-danger { background: var(--m-danger-soft) !important; color: var(--m-danger) !important; } body.modern-theme .alert-warning { background: var(--m-warning-soft) !important; color: #92400e !important; } body.modern-theme .alert-info { background: var(--m-info-soft) !important; color: #155e75 !important; } @media (prefers-color-scheme: dark) { body.modern-theme .alert-warning { color: var(--m-warning) !important; } body.modern-theme .alert-info { color: var(--m-info) !important; } } /* ========================================================================== 16. LISTS — Clean Group ========================================================================== */ body.modern-theme .list-group-item { background: var(--m-surface) !important; color: var(--m-text) !important; border-color: var(--m-border-light) !important; } body.modern-theme .list-group-item:hover { background: var(--m-surface-raised) !important; } body.modern-theme .list-group-item.active { background: var(--m-accent) !important; border-color: var(--m-accent) !important; color: white !important; } /* ========================================================================== 17. PAGINATION — Modern ========================================================================== */ body.modern-theme .page-link { color: var(--m-accent) !important; border: 1px solid var(--m-border) !important; border-radius: var(--m-radius-sm) !important; margin: 0 2px; font-weight: 500; font-size: 0.85rem; } body.modern-theme .page-item.active .page-link { background: var(--m-accent) !important; border-color: var(--m-accent) !important; color: white !important; box-shadow: 0 2px 8px rgba(99,102,241,0.3); } /* ========================================================================== 18. ACCORDION ========================================================================== */ body.modern-theme .accordion-item { background: var(--m-surface) !important; border: 1px solid var(--m-border) !important; border-radius: var(--m-radius-md) !important; margin-bottom: 8px; overflow: hidden; } body.modern-theme .accordion-button { background: var(--m-surface) !important; color: var(--m-text) !important; font-weight: 600; padding: 14px 18px !important; box-shadow: none !important; } body.modern-theme .accordion-button:not(.collapsed) { background: var(--m-accent-soft) !important; color: var(--m-accent) !important; } body.modern-theme .accordion-button::after { filter: brightness(0) saturate(100%) invert(56%) sepia(37%) saturate(3501%) hue-rotate(222deg) brightness(100%) contrast(101%); } body.modern-theme .accordion-body { background: var(--m-surface) !important; color: var(--m-text) !important; padding: 16px 18px !important; } /* ========================================================================== 19. TOASTS ========================================================================== */ body.modern-theme .toastify { border-radius: var(--m-radius-md) !important; font-weight: 500 !important; padding: 12px 20px !important; box-shadow: var(--m-shadow-lg) !important; } /* ========================================================================== 20. SWEETALERT2 — Modern Override ========================================================================== */ body.modern-theme .swal2-popup { border-radius: var(--m-radius-xl) !important; box-shadow: var(--m-shadow-xl) !important; padding: 24px !important; } body.modern-theme .swal2-title { font-weight: 700 !important; color: var(--m-text) !important; } body.modern-theme .swal2-html-container { color: var(--m-text-secondary) !important; } body.modern-theme .swal2-confirm { background: var(--m-accent) !important; border-radius: var(--m-radius-sm) !important; font-weight: 600 !important; padding: 10px 24px !important; } body.modern-theme .swal2-cancel { background: var(--m-surface-overlay) !important; color: var(--m-text-secondary) !important; border-radius: var(--m-radius-sm) !important; font-weight: 500 !important; } /* ========================================================================== 21. CONTAINER & PAGES ========================================================================== */ body.modern-theme .container-fluid { max-width: 1400px; } /* Page header bars */ body.modern-theme .page-header-bar, body.modern-theme .container-fluid > .d-flex { background: var(--m-surface) !important; border: 1px solid var(--m-border) !important; border-radius: var(--m-radius-lg) !important; padding: 16px 20px !important; margin-bottom: 16px; box-shadow: var(--m-shadow-sm) !important; } body.modern-theme h2, body.modern-theme h4 { color: var(--m-text) !important; font-weight: 700 !important; letter-spacing: -0.02em; } body.modern-theme hr { border-color: var(--m-border-light) !important; } /* ========================================================================== 22. SETTINGS GRID — Card Hover ========================================================================== */ body.modern-theme .settings-card, body.modern-theme .settings-panel { background: var(--m-surface) !important; border: 1px solid var(--m-border) !important; border-radius: var(--m-radius-lg) !important; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } body.modern-theme .settings-card:hover, body.modern-theme .settings-panel:hover { box-shadow: var(--m-shadow-md) !important; border-color: var(--m-accent) !important; transform: translateY(-2px); } /* ========================================================================== 23. STAT CARDS (Dashboard) ========================================================================== */ body.modern-theme .report-card, body.modern-theme .stat-card { background: var(--m-surface) !important; border: 1px solid var(--m-border) !important; border-radius: var(--m-radius-lg) !important; padding: 20px !important; transition: all 0.2s ease; } body.modern-theme .report-card:hover, body.modern-theme .stat-card:hover { transform: translateY(-2px); box-shadow: var(--m-shadow-md) !important; } /* ========================================================================== 24. SIDEBAR NAVIGATION (Admin Dashboard) ========================================================================== */ body.modern-theme .admin-sidebar { background: var(--m-surface) !important; border-right: 1px solid var(--m-border) !important; } body.modern-theme .admin-sidebar .list-group-item { border-radius: var(--m-radius-sm) !important; margin: 2px 8px !important; padding: 10px 14px !important; font-weight: 500; font-size: 0.85rem; } body.modern-theme .admin-sidebar .list-group-item:hover { background: var(--m-accent-soft) !important; color: var(--m-accent) !important; } body.modern-theme .admin-sidebar .list-group-item.active { background: var(--m-accent) !important; color: white !important; } /* ========================================================================== 25. TOGGLE BUTTON — Floating Preview ========================================================================== */ body.modern-theme #modern-toggle-btn { background: var(--m-accent) !important; color: white !important; border: none !important; } body.modern-theme #modern-toggle-btn:hover { background: var(--m-accent-hover) !important; box-shadow: 0 4px 16px rgba(99,102,241,0.4) !important; } /* ========================================================================== 26. SPECIFIC OVERRIDES — Booking Hours, Certificates, etc. ========================================================================== */ /* Badge bg-primary text-white → use accent */ body.modern-theme .badge.bg-primary.text-white { background: var(--m-accent) !important; color: white !important; } /* Badge bg-light text-dark → surface */ body.modern-theme .badge.bg-light.text-dark { background: var(--m-surface-overlay) !important; color: var(--m-text) !important; } /* Badge bg-warning text-dark → warning soft */ body.modern-theme .badge.bg-warning.text-dark { background: var(--m-warning-soft) !important; color: var(--m-warning) !important; } /* Badge bg-info text-dark → info soft */ body.modern-theme .badge.bg-info.text-dark { background: var(--m-info-soft) !important; color: var(--m-info) !important; } /* Badge bg-success text-white → success */ body.modern-theme .badge.bg-success.text-white { background: var(--m-success) !important; color: white !important; } /* Badge bg-danger text-white → danger */ body.modern-theme .badge.bg-danger.text-white { background: var(--m-danger) !important; color: white !important; } /* Card bg-primary text-white (stat cards) */ body.modern-theme .card.bg-primary.text-white { background: linear-gradient(135deg, var(--m-accent), var(--m-accent-hover)) !important; border: none !important; } body.modern-theme .card.bg-success.text-white { background: linear-gradient(135deg, #10b981, #059669) !important; border: none !important; } body.modern-theme .card.bg-warning.text-dark { background: linear-gradient(135deg, #f59e0b, #d97706) !important; border: none !important; } body.modern-theme .card.bg-danger.text-white { background: linear-gradient(135deg, #ef4444, #dc2626) !important; border: none !important; } body.modern-theme .card.bg-info.text-white { background: linear-gradient(135deg, #06b6d4, #0891b2) !important; border: none !important; } body.modern-theme .card.bg-secondary.text-white { background: linear-gradient(135deg, #64748b, #475569) !important; border: none !important; } /* bg-white → surface */ body.modern-theme .bg-white { background: var(--m-surface) !important; } /* bg-light → surface-raised */ body.modern-theme .bg-light, body.modern-theme .bg-light-subtle { background: var(--m-surface-raised) !important; } /* bg-primary (non-white text) */ body.modern-theme .bg-primary { background: var(--m-accent) !important; } /* bg-success */ body.modern-theme .bg-success { background: var(--m-success) !important; } /* text-white */ body.modern-theme .text-white { color: white !important; } /* text-primary */ body.modern-theme .text-primary { color: var(--m-accent) !important; } /* text-muted */ body.modern-theme .text-muted { color: var(--m-text-muted) !important; } /* text-dark */ body.modern-theme .text-dark { color: var(--m-text) !important; } /* ========================================================================== 27. MOBILE ENHANCEMENTS ========================================================================== */ @media (max-width: 768px) { body.modern-theme .card { border-radius: var(--m-radius-md) !important; } body.modern-theme .modal-content { border-radius: var(--m-radius-lg) !important; } body.modern-theme .container-fluid { padding-left: 10px !important; padding-right: 10px !important; } body.modern-theme .btn { padding: 10px 16px !important; } body.modern-theme .table td, body.modern-theme .table th { padding: 10px 12px !important; } /* Offcanvas mobile */ body.modern-theme .offcanvas { border-radius: 0 var(--m-radius-lg) var(--m-radius-lg) 0 !important; } } /* ========================================================================== 28. PRINT — Hidden Modern ========================================================================== */ @media print { body.modern-theme * { transition: none !important; } } /* ========================================================================== 29. SCROLLBAR — Minimal ========================================================================== */ body.modern-theme ::-webkit-scrollbar { width: 6px; height: 6px; } body.modern-theme ::-webkit-scrollbar-track { background: transparent; } body.modern-theme ::-webkit-scrollbar-thumb { background: var(--m-border); border-radius: 3px; } body.modern-theme ::-webkit-scrollbar-thumb:hover { background: var(--m-text-muted); } /* ========================================================================== 30. FOOTER — Minimal ========================================================================== */ body.modern-theme .pos-footer { background: var(--m-surface) !important; border-top: 1px solid var(--m-border-light) !important; color: var(--m-text-muted) !important; font-size: 0.75rem !important; padding: 8px !important; } /* ========================================================================== 31. ADMIN PANEL (Gestione) — Full Redesign ========================================================================== */ body.modern-theme .admin-layout { background: var(--m-bg) !important; } body.modern-theme .admin-sidebar { background: var(--m-surface) !important; border-right: 1px solid var(--m-border) !important; } body.modern-theme .admin-sidebar-nav a { color: var(--m-text-secondary) !important; border-radius: var(--m-radius-sm) !important; transition: all 0.2s ease; } body.modern-theme .admin-sidebar-nav a:hover { background: var(--m-accent-soft) !important; color: var(--m-accent) !important; } body.modern-theme .admin-sidebar-nav a.active { background: var(--m-accent) !important; color: white !important; } body.modern-theme .admin-main-content { background: var(--m-bg) !important; color: var(--m-text) !important; } body.modern-theme .admin-content-inner { color: var(--m-text) !important; } /* Toggle sticky bar */ body.modern-theme .admin-toggle-sticky { background: var(--m-surface) !important; border-bottom-color: var(--m-border) !important; } body.modern-theme .admin-menu-toggle-btn { background: var(--m-surface-raised) !important; color: var(--m-text) !important; border: 1px solid var(--m-border) !important; } /* Page title */ body.modern-theme .page-title h1 { color: var(--m-text) !important; } body.modern-theme .page-title p { color: var(--m-text-muted) !important; } /* Admin cards */ body.modern-theme .admin-card, body.modern-theme .card { background: var(--m-surface) !important; color: var(--m-text) !important; border: 1px solid var(--m-border) !important; border-radius: var(--m-radius-md) !important; } body.modern-theme .card h3 { color: var(--m-text) !important; } /* Stats grid */ body.modern-theme .stats-grid { gap: 16px !important; } /* Admin buttons */ body.modern-theme .button, body.modern-theme a.button, body.modern-theme .admin-card .button { background: var(--m-surface-raised) !important; color: var(--m-text) !important; border: 1px solid var(--m-border) !important; border-radius: var(--m-radius-sm) !important; padding: 8px 14px !important; font-weight: 500; font-size: 0.85rem; text-decoration: none; display: inline-block; } body.modern-theme .button:hover, body.modern-theme a.button:hover { background: var(--m-accent-soft) !important; color: var(--m-accent) !important; border-color: var(--m-accent) !important; } /* Action buttons (accept/decline) */ body.modern-theme .btn-action { border-radius: var(--m-radius-sm) !important; font-weight: 600; transition: all 0.2s ease; } body.modern-theme .btn-action:hover { transform: translateY(-1px); box-shadow: var(--m-shadow-md); } body.modern-theme .btn-action.accept { background: var(--m-success) !important; color: white !important; border: none !important; } body.modern-theme .btn-action.decline { background: var(--m-danger) !important; color: white !important; border: none !important; } body.modern-theme .btn-action.details { background: var(--m-surface-raised) !important; color: var(--m-text-secondary) !important; border: 1px solid var(--m-border) !important; } /* Flash messages */ body.modern-theme .flash-message { background: var(--m-accent-soft) !important; color: var(--m-accent) !important; border-radius: var(--m-radius-md) !important; padding: 12px 18px !important; border: none !important; font-weight: 500; } /* Pagination */ body.modern-theme .pagination { display: flex; gap: 4px; } body.modern-theme .pagination a { background: var(--m-surface) !important; color: var(--m-accent) !important; border: 1px solid var(--m-border) !important; border-radius: var(--m-radius-sm) !important; padding: 6px 12px !important; text-decoration: none; font-weight: 500; font-size: 0.85rem; } body.modern-theme .pagination a.active { background: var(--m-accent) !important; color: white !important; border-color: var(--m-accent) !important; } /* Dropdown in admin (details-based) */ body.modern-theme details.dropdown .dropdown-menu { background: var(--m-surface) !important; border: 1px solid var(--m-border) !important; border-radius: var(--m-radius-md) !important; box-shadow: var(--m-shadow-lg) !important; } /* Text overrides for admin content */ body.modern-theme .admin-main-content strong { color: var(--m-text) !important; } body.modern-theme .admin-main-content .text-danger { color: var(--m-danger) !important; } body.modern-theme .admin-main-content .text-success { color: var(--m-success) !important; } body.modern-theme .admin-main-content .text-muted { color: var(--m-text-muted) !important; } /* Table overrides for admin */ body.modern-theme .admin-main-content table { color: var(--m-text) !important; border-color: var(--m-border) !important; } body.modern-theme .admin-main-content th { background: var(--m-surface-raised) !important; color: var(--m-text-secondary) !important; border-color: var(--m-border) !important; } body.modern-theme .admin-main-content td { border-color: var(--m-border-light) !important; } /* Badge overrides */ body.modern-theme .badge.bg-danger { background: var(--m-danger-soft) !important; color: var(--m-danger) !important; } body.modern-theme .badge.bg-success { background: var(--m-success-soft) !important; color: var(--m-success) !important; } /* Header in admin (extends from layout.html) */ body.modern-theme header, body.modern-theme .site-header { background: var(--m-surface) !important; border-bottom: 1px solid var(--m-border) !important; } body.modern-theme header .nav-link { color: var(--m-text-secondary) !important; } body.modern-theme header .nav-link:hover { color: var(--m-accent) !important; } body.modern-theme header .nav-link.text-warning { color: var(--m-warning) !important; } /* Admin table (list-style) */ body.modern-theme .admin-main-content ul { color: var(--m-text) !important; } body.modern-theme .admin-main-content li { color: var(--m-text) !important; border-bottom-color: var(--m-border-light) !important; } /* ========================================================================== 32. WEBSITE HEADER — Fix White-on-White ========================================================================== */ body.modern-theme .main-header { background: var(--m-surface) !important; backdrop-filter: blur(20px) saturate(180%) !important; -webkit-backdrop-filter: blur(20px) saturate(180%) !important; border-bottom: 1px solid var(--m-border) !important; } body.modern-theme .main-header .nav-link, body.modern-theme .main-header .nav-item .nav-link { color: var(--m-text) !important; text-shadow: none !important; } body.modern-theme .main-header .nav-link:hover, body.modern-theme .main-header .nav-link.active, body.modern-theme .main-header .nav-item .nav-link:hover { color: var(--m-accent) !important; text-shadow: none !important; } body.modern-theme .main-header .btn-primary { background: var(--m-accent) !important; border-color: var(--m-accent) !important; color: white !important; border-radius: 20px !important; font-weight: 600; } body.modern-theme .main-header .btn-primary:hover { background: var(--m-accent-hover) !important; box-shadow: 0 4px 12px rgba(99,102,241,0.3); } /* Logo text */ body.modern-theme .logo span { color: var(--m-text) !important; } /* ========================================================================== 33. WEBSITE DROPDOWN MENUS — Light Theme ========================================================================== */ body.modern-theme .dropdown-menu { background-color: var(--m-surface) !important; border: 1px solid var(--m-border) !important; border-radius: var(--m-radius-md) !important; box-shadow: var(--m-shadow-lg) !important; } body.modern-theme .dropdown-item { color: var(--m-text) !important; border-bottom-color: var(--m-border-light) !important; font-family: 'Inter', sans-serif !important; } body.modern-theme .dropdown-item:hover { background-color: var(--m-accent-soft) !important; color: var(--m-accent) !important; } /* ========================================================================== 34. MENU PAGE — Fix Dark Cards ========================================================================== */ body.modern-theme .menu-item-card { background: var(--m-surface) !important; border-color: var(--m-border) !important; } body.modern-theme .menu-item-card:hover { border-color: var(--m-accent) !important; box-shadow: 0 12px 32px rgba(0,0,0,0.1) !important; } body.modern-theme .menu-item-name { color: var(--m-text) !important; } body.modern-theme .menu-item-ingredients { color: var(--m-text-secondary) !important; } body.modern-theme .menu-item-action .btn { background: var(--m-accent) !important; color: white !important; border: none !important; border-radius: 20px !important; } body.modern-theme .menu-item-image::after { background: linear-gradient(to top, var(--m-surface) 0%, transparent 100%) !important; } body.modern-theme .category-title { color: var(--m-text) !important; border-left-color: var(--m-accent) !important; } /* ========================================================================== 35. WEBSITE BODY — Light Background ========================================================================== */ body.modern-theme { background: var(--m-bg) !important; } body.modern-theme main { background: var(--m-bg) !important; } body.modern-theme .container { color: var(--m-text) !important; } body.modern-theme h1, body.modern-theme h2, body.modern-theme h3, body.modern-theme h4, body.modern-theme h5, body.modern-theme h6 { color: var(--m-text) !important; } body.modern-theme p, body.modern-theme li, body.modern-theme span { color: inherit !important; } /* ========================================================================== 36. WEBSITE FOOTER — Fix Dark ========================================================================== */ body.modern-theme .site-footer { background: var(--m-surface) !important; color: var(--m-text) !important; border-top: 1px solid var(--m-border) !important; } body.modern-theme .site-footer h4, body.modern-theme .site-footer .footer-col h4 { color: var(--m-text) !important; } body.modern-theme .site-footer a { color: var(--m-text-secondary) !important; } body.modern-theme .site-footer a:hover { color: var(--m-accent) !important; } body.modern-theme .footer-wave .shape-fill { fill: var(--m-bg) !important; } /* ========================================================================== 37. ADMIN PANEL — Kill All Hardcoded Black ========================================================================== */ body.modern-theme .admin-layout, body.modern-theme .admin-layout[style*="background"], body.modern-theme div[style*="background: #000"], body.modern-theme div[style*="background:#000"] { background: var(--m-bg) !important; } body.modern-theme .admin-toggle-sticky { background: var(--m-surface) !important; border-bottom: 1px solid var(--m-border) !important; } body.modern-theme .admin-menu-toggle-btn { background: var(--m-surface-raised) !important; color: var(--m-text) !important; border: 1px solid var(--m-border) !important; } body.modern-theme .admin-sidebar { background: var(--m-surface) !important; } body.modern-theme .admin-sidebar-nav a { color: var(--m-text-secondary) !important; } body.modern-theme .admin-sidebar-nav a:hover { background: var(--m-accent-soft) !important; color: var(--m-accent) !important; } body.modern-theme .admin-sidebar-nav a.active { background: var(--m-accent) !important; color: white !important; } body.modern-theme .admin-main-content { background: var(--m-bg) !important; color: var(--m-text) !important; } body.modern-theme .admin-content-inner { color: var(--m-text) !important; } body.modern-theme .page-title h1 { color: var(--m-text) !important; } body.modern-theme .page-title p { color: var(--m-text-muted) !important; } /* Admin top actions */ body.modern-theme .admin-top-actions { color: var(--m-text) !important; } body.modern-theme details.dropdown summary { background: var(--m-surface-raised) !important; color: var(--m-text) !important; border: 1px solid var(--m-border) !important; border-radius: var(--m-radius-sm) !important; padding: 8px 14px !important; } /* ========================================================================== 38. BOOKING / PRENOTA PAGE ========================================================================== */ body.modern-theme .booking-form, body.modern-theme .booking-container { background: var(--m-surface) !important; color: var(--m-text) !important; } body.modern-theme .booking-form .form-control, body.modern-theme .booking-form .form-select { background: var(--m-surface) !important; color: var(--m-text) !important; border-color: var(--m-border) !important; } body.modern-theme .booking-form .form-control:focus, body.modern-theme .booking-form .form-select:focus { border-color: var(--m-accent) !important; box-shadow: 0 0 0 3px rgba(99,102,241,0.15) !important; } /* ========================================================================== 39. WEBSITE GENERAL OVERRIDES ========================================================================== */ /* Section backgrounds */ body.modern-theme .section-light { background: var(--m-bg) !important; } body.modern-theme .section-dark { background: var(--m-surface-raised) !important; } /* Hero overlay */ body.modern-theme .hero-overlay { background: rgba(0,0,0,0.5) !important; } /* Contact info */ body.modern-theme .contact-info a { color: var(--m-text-secondary) !important; } body.modern-theme .contact-info a:hover { color: var(--m-accent) !important; } /* Cards in pages */ body.modern-theme .card.bg-white, body.modern-theme .card.border { background: var(--m-surface) !important; border-color: var(--m-border) !important; color: var(--m-text) !important; } /* Tables in website */ body.modern-theme table, body.modern-theme .table { color: var(--m-text) !important; } /* Links */ body.modern-theme a { color: var(--m-accent) !important; } body.modern-theme a:hover { color: var(--m-accent-hover) !important; } /* Alerts */ body.modern-theme .alert { color: var(--m-text) !important; } /* Fidelity badge in header */ body.modern-theme .fidelity-badge { background: var(--m-accent) !important; color: white !important; }