/* * Glass Morphism Theme Overlay (B&W primary) * Loads after torres-ui.css to add macOS-style glass + better spacing * Activate by adding `mac-theme` class on */ body.mac-theme { --blur-glass: blur(28px) saturate(2.0); --shadow-mac-sm: 0 1px 3px rgba(0,0,0,0.07), 0 2px 8px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.92); --shadow-mac-md: 0 4px 12px rgba(0,0,0,0.08), 0 8px 32px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.95); --shadow-mac-lg: 0 12px 40px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.07), inset 0 1px 0 rgba(255,255,255,0.98); /* Soft cool gradient — subtle, glass blurs against it */ background: radial-gradient(ellipse at 18% 12%, rgba(176,190,235,0.28) 0%, transparent 55%), radial-gradient(ellipse at 85% 88%, rgba(195,205,228,0.22) 0%, transparent 55%), #EEF1F7 !important; background-attachment: fixed !important; min-height: 100vh !important; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', system-ui, ui-sans-serif, sans-serif !important; } body.mac-theme::before { display: none !important; } /* ── Sidebar — Liquid Glass ── */ body.mac-theme .sidebar { background: linear-gradient(180deg, rgba(255,255,255,0.66) 0%, rgba(244,246,253,0.40) 55%, rgba(232,236,255,0.46) 100%) !important; backdrop-filter: blur(44px) saturate(200%) brightness(1.06) !important; -webkit-backdrop-filter: blur(44px) saturate(200%) brightness(1.06) !important; border-right: 1px solid rgba(255,255,255,0.9) !important; box-shadow: inset -1px 0 0 rgba(255,255,255,0.95), inset 1px 1px 0 rgba(255,255,255,0.7), 2px 0 36px rgba(15,23,42,0.08) !important; } body.mac-theme .nav-item { border-radius: 9px !important; font-weight: 400 !important; color: #4b5563 !important; padding: 8px 12px !important; transition: all 0.15s ease !important; margin: 1px 0 !important; } body.mac-theme .nav-item:hover { background: rgba(255,255,255,0.60) !important; backdrop-filter: blur(12px) !important; color: #0a0a0a !important; transform: none !important; border-left: none !important; padding-left: 12px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.85) !important; } body.mac-theme .nav-item.active { background: rgba(255,255,255,0.78) !important; color: #0a0a0a !important; font-weight: 600 !important; border-left: none !important; padding-left: 12px !important; box-shadow: 0 2px 10px rgba(15,23,42,0.09), inset 0 1px 0 rgba(255,255,255,0.98) !important; } body.mac-theme .nav-item.active i { color: #0a0a0a !important; } body.mac-theme .nav-section { color: #98989d !important; font-size: 11px !important; letter-spacing: 0.4px !important; text-transform: uppercase !important; font-weight: 600 !important; padding: 4px 12px !important; } body.mac-theme .brand-name { color: #0a0a0a !important; font-weight: 700 !important; letter-spacing: -0.2px !important; } body.mac-theme .brand-icon { background: linear-gradient(135deg, #ffffff, #f0f4f8) !important; box-shadow: 0 2px 8px rgba(0,0,0,0.08), 0 1px 0 rgba(255,255,255,0.9) inset !important; } body.mac-theme .nav-badge { font-size: 10px !important; padding: 2px 7px !important; font-weight: 700 !important; margin-left: auto !important; } /* ── Topbar ── */ body.mac-theme .topbar { background: rgba(255,255,255,0.72) !important; backdrop-filter: blur(22px) saturate(1.7) !important; -webkit-backdrop-filter: blur(22px) saturate(1.7) !important; border-bottom: 1px solid rgba(0,0,0,0.06) !important; } body.mac-theme .topbar-title { color: #0a0a0a !important; font-weight: 600 !important; letter-spacing: -0.2px !important; } body.mac-theme .topbar-badge { background: rgba(52,199,89,0.10) !important; color: #1a7a34 !important; border: 1px solid rgba(52,199,89,0.18) !important; border-radius: 20px !important; padding: 4px 12px !important; font-size: 12px !important; font-weight: 500 !important; } body.mac-theme .topbar-badge .dot { background: #34C759 !important; box-shadow: 0 0 6px rgba(52,199,89,0.5) !important; } body.mac-theme #langToggleBtn, body.mac-theme .lang-toggle { background: rgba(255,255,255,0.7) !important; border: 1px solid rgba(0,0,0,0.08) !important; color: #0a0a0a !important; border-radius: 8px !important; font-weight: 600 !important; padding: 5px 10px !important; } body.mac-theme #langToggleBtn:hover, body.mac-theme .lang-toggle:hover { background: rgba(255,255,255,0.95) !important; } /* ── Cards — translucent glass with breathing room Use explicit class list (NOT [class*="-card"]) so nested elements like .auto-card-title or .auto-card-icon do not also get card backgrounds and padding which clips their text against the parent's padding. */ body.mac-theme .stat-card, body.mac-theme .edit-card, body.mac-theme .client-table-wrapper, body.mac-theme .auto-card, body.mac-theme .template-card, body.mac-theme .pipeline-card, body.mac-theme .kanban-card, body.mac-theme .ticket-card, body.mac-theme .info-card { background: rgba(255,255,255,0.72) !important; backdrop-filter: var(--blur-glass) !important; -webkit-backdrop-filter: var(--blur-glass) !important; border: 1px solid rgba(255,255,255,0.75) !important; border-bottom-color: rgba(0,0,0,0.06) !important; border-right-color: rgba(0,0,0,0.05) !important; border-radius: 13px !important; box-shadow: var(--shadow-mac-md) !important; } /* Stat cards specifically — center content vertically and add roomy padding */ body.mac-theme .stat-card { padding: 18px !important; min-height: 92px !important; display: flex !important; flex-direction: column !important; justify-content: center !important; } /* Auto/template/pipeline cards keep their original generous side padding */ body.mac-theme .auto-card { padding: 18px 22px !important; display: flex !important; align-items: center !important; gap: 16px !important; } body.mac-theme .auto-card-icon { flex-shrink: 0 !important; } body.mac-theme .auto-card-body { flex: 1 1 auto !important; min-width: 0 !important; background: transparent !important; padding: 0 !important; border: none !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } body.mac-theme .auto-card-title { background: transparent !important; padding: 0 !important; border: none !important; box-shadow: none !important; margin: 0 !important; } body.mac-theme .auto-card-meta, body.mac-theme .auto-card-actions { background: transparent !important; padding: 0 !important; border: none !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } body.mac-theme .template-card { padding: 18px 20px !important; } body.mac-theme .pipeline-card, body.mac-theme .kanban-card { padding: 12px 14px !important; } body.mac-theme .ticket-card, body.mac-theme .info-card { padding: 16px 20px !important; } /* Overview stat + activity cards */ body.mac-theme .ov-stat-card, body.mac-theme .ov-activity-card { background: rgba(255,255,255,0.72) !important; backdrop-filter: var(--blur-glass) !important; -webkit-backdrop-filter: var(--blur-glass) !important; border: 1px solid rgba(255,255,255,0.75) !important; border-bottom-color: rgba(0,0,0,0.06) !important; border-right-color: rgba(0,0,0,0.05) !important; border-radius: 13px !important; box-shadow: var(--shadow-mac-md) !important; } body.mac-theme .ov-stat-card { padding: 20px 18px !important; } body.mac-theme .ov-activity-card { padding: 20px !important; } body.mac-theme .ov-card-title, body.mac-theme .ov-activity-item, body.mac-theme .ov-activity-avatar, body.mac-theme .ov-stat-icon, body.mac-theme .ov-stat-value, body.mac-theme .ov-stat-label { background: transparent !important; border: none !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } body.mac-theme .ov-stat-icon { background: rgba(0,0,0,0.05) !important; border-radius: 10px !important; } body.mac-theme .ov-activity-avatar { border-radius: 50% !important; } body.mac-theme .ov-activity-item { border-bottom: 1px solid rgba(0,0,0,0.05) !important; padding: 10px 0 !important; } body.mac-theme .ov-activity-item:last-child { border-bottom: none !important; } body.mac-theme .stat-card { min-height: 92px !important; display: flex !important; flex-direction: column !important; justify-content: center !important; } body.mac-theme .stat-value, body.mac-theme .stat-number { color: #0a0a0a !important; font-weight: 700 !important; letter-spacing: -0.5px !important; font-size: 28px !important; line-height: 1.15 !important; margin-top: 4px !important; word-break: break-word !important; } body.mac-theme .stat-label, body.mac-theme .stat-title { color: #6e6e73 !important; font-size: 12px !important; letter-spacing: 0.2px !important; font-weight: 500 !important; display: flex !important; align-items: center !important; gap: 6px !important; } /* ── Section headers ── */ body.mac-theme .section-header { margin-bottom: 20px !important; gap: 16px !important; } body.mac-theme .section-header h1 { font-size: 24px !important; font-weight: 700 !important; letter-spacing: -0.4px !important; color: #0a0a0a !important; line-height: 1.2 !important; margin-bottom: 4px !important; } body.mac-theme .section-header p { color: #6e6e73 !important; font-size: 14px !important; margin: 0 !important; } /* ── Primary buttons — kept B&W with subtle gradient + glass ── */ body.mac-theme .btn-primary, body.mac-theme button[type="submit"]:not(.swal2-cancel):not(.btn-ghost) { background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%) !important; color: #fff !important; border: 1px solid rgba(0,0,0,0.85) !important; border-radius: 10px !important; font-weight: 600 !important; letter-spacing: -0.1px !important; padding: 9px 18px !important; box-shadow: 0 1px 3px rgba(0,0,0,0.18), 0 1px 0 rgba(255,255,255,0.10) inset !important; transition: all 0.18s ease !important; } body.mac-theme .btn-primary:hover, body.mac-theme button[type="submit"]:not(.swal2-cancel):not(.btn-ghost):hover { background: linear-gradient(180deg, #2a2a2a 0%, #141414 100%) !important; box-shadow: 0 4px 14px rgba(0,0,0,0.20), 0 1px 0 rgba(255,255,255,0.10) inset !important; transform: translateY(-0.5px) !important; } /* Default .btn (without specific type) */ body.mac-theme .btn:not(.btn-ghost):not(.btn-ghost-danger):not(.btn-secondary):not(.btn-outline):not(.btn-danger):not(.filter-chip):not(.btn-primary) { background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%) !important; color: #fff !important; border: 1px solid rgba(0,0,0,0.85) !important; border-radius: 10px !important; font-weight: 600 !important; padding: 8px 16px !important; box-shadow: 0 1px 3px rgba(0,0,0,0.18), 0 1px 0 rgba(255,255,255,0.10) inset !important; } /* ── Ghost / secondary buttons ── */ body.mac-theme .btn-ghost, body.mac-theme .btn-secondary, body.mac-theme .btn-outline { background: rgba(255,255,255,0.68) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; color: #0a0a0a !important; border: 1px solid rgba(0,0,0,0.10) !important; border-radius: 10px !important; padding: 8px 16px !important; font-weight: 500 !important; box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 0 rgba(255,255,255,0.8) inset !important; } body.mac-theme .btn-ghost:hover, body.mac-theme .btn-secondary:hover, body.mac-theme .btn-outline:hover { background: rgba(255,255,255,0.92) !important; transform: translateY(-0.5px) !important; box-shadow: 0 2px 8px rgba(0,0,0,0.08), 0 1px 0 rgba(255,255,255,0.9) inset !important; } /* ── Danger ── */ body.mac-theme .btn-danger, body.mac-theme .btn-ghost-danger { background: rgba(255,59,48,0.09) !important; color: #c0251c !important; border: 1px solid rgba(255,59,48,0.20) !important; border-radius: 10px !important; padding: 8px 16px !important; } body.mac-theme .btn-danger:hover, body.mac-theme .btn-ghost-danger:hover { background: rgba(255,59,48,0.15) !important; box-shadow: 0 2px 8px rgba(255,59,48,0.15) !important; } /* ── Logout button on sidebar ── */ body.mac-theme .btn-logout { background: rgba(255,255,255,0.6) !important; border: 1px solid rgba(0,0,0,0.08) !important; border-radius: 10px !important; color: #4b5563 !important; padding: 8px 12px !important; font-weight: 500 !important; } body.mac-theme .btn-logout:hover { background: rgba(255,59,48,0.08) !important; border-color: rgba(255,59,48,0.18) !important; color: #c0251c !important; } /* ── Filter chips — pill style ── */ body.mac-theme .filter-chip { background: rgba(255,255,255,0.72) !important; border: 1px solid rgba(0,0,0,0.08) !important; border-radius: 20px !important; color: #4b5563 !important; padding: 6px 14px !important; font-size: 12.5px !important; font-weight: 500 !important; transition: all 0.15s ease !important; white-space: nowrap !important; } body.mac-theme .filter-chip:hover { background: rgba(255,255,255,0.95) !important; color: #0a0a0a !important; border-color: rgba(0,0,0,0.12) !important; } body.mac-theme .filter-chip.active { background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%) !important; color: #fff !important; border-color: transparent !important; box-shadow: 0 1px 3px rgba(0,0,0,0.18) !important; } /* ── Inputs ── */ body.mac-theme input, body.mac-theme select, body.mac-theme textarea { background: rgba(118,118,128,0.10) !important; border: 1px solid rgba(0,0,0,0.08) !important; border-radius: 8px !important; color: #0a0a0a !important; font-family: inherit !important; padding: 9px 13px !important; font-size: 14px !important; box-shadow: 0 1px 2px rgba(0,0,0,0.04) inset !important; } body.mac-theme input:focus, body.mac-theme select:focus, body.mac-theme textarea:focus { background: #fff !important; border-color: rgba(0,0,0,0.4) !important; outline: none !important; box-shadow: 0 0 0 3.5px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04) inset !important; } body.mac-theme input::placeholder, body.mac-theme textarea::placeholder { color: #98989d !important; } body.mac-theme label { color: #4b5563 !important; font-size: 13px !important; font-weight: 500 !important; } /* ── Modals ── */ body.mac-theme .modal-content, body.mac-theme .modal-panel { background: rgba(255,255,255,0.92) !important; backdrop-filter: blur(40px) saturate(1.8) !important; -webkit-backdrop-filter: blur(40px) saturate(1.8) !important; border: 1px solid rgba(255,255,255,0.85) !important; border-radius: 18px !important; box-shadow: 0 24px 80px rgba(0,0,0,0.20), 0 8px 24px rgba(0,0,0,0.10), 0 1px 0 rgba(255,255,255,0.8) inset !important; } body.mac-theme .modal, body.mac-theme .modal-overlay { background: rgba(0,0,0,0.35) !important; backdrop-filter: blur(4px) !important; } body.mac-theme .modal-header { border-bottom: 1px solid rgba(0,0,0,0.06) !important; padding: 16px 20px !important; } body.mac-theme .modal-title, body.mac-theme .modal-header h2, body.mac-theme .modal-header h3 { color: #0a0a0a !important; font-weight: 600 !important; letter-spacing: -0.3px !important; font-size: 17px !important; } body.mac-theme .modal-body { padding: 20px !important; } /* ── Pipeline / kanban ── */ body.mac-theme .pipeline-column, body.mac-theme .kanban-column { background: rgba(0,0,0,0.025) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; border: 1px solid rgba(0,0,0,0.06) !important; border-radius: 13px !important; } body.mac-theme .pipeline-card, body.mac-theme .kanban-card { background: rgba(255,255,255,0.85) !important; border: 1px solid rgba(0,0,0,0.07) !important; border-radius: 10px !important; box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 0 rgba(255,255,255,0.8) inset !important; } /* ── Tabs ── */ body.mac-theme .tabs, body.mac-theme .tab-bar { background: rgba(118,118,128,0.10) !important; border-radius: 10px !important; border: none !important; padding: 3px !important; } body.mac-theme .tab.active, body.mac-theme .tab-item.active { background: #fff !important; color: #0a0a0a !important; box-shadow: 0 1px 3px rgba(0,0,0,0.10), 0 1px 0 rgba(255,255,255,0.8) inset !important; } /* ── Badges + status pills ── */ body.mac-theme .badge, body.mac-theme .status-badge { border-radius: 20px !important; padding: 2px 10px !important; font-size: 11.5px !important; font-weight: 500 !important; letter-spacing: 0.01em !important; white-space: nowrap !important; } /* Template card overflow guards */ body.mac-theme .template-card { background: rgba(255,255,255,0.78) !important; backdrop-filter: blur(20px) saturate(1.6) !important; -webkit-backdrop-filter: blur(20px) saturate(1.6) !important; border: 1px solid rgba(255,255,255,0.85) !important; border-bottom-color: rgba(0,0,0,0.06) !important; border-right-color: rgba(0,0,0,0.05) !important; border-radius: 13px !important; box-shadow: var(--shadow-mac-sm) !important; padding: 18px !important; word-break: break-word !important; overflow-wrap: break-word !important; } /* Stat values overflow guard (only stat-card itself, not children) */ body.mac-theme .stat-card, body.mac-theme .template-card, body.mac-theme .auto-card { overflow: hidden !important; } body.mac-theme .stat-card .stat-value, body.mac-theme .stat-card .stat-number, body.mac-theme .stat-card .stat-label { max-width: 100% !important; word-break: break-word !important; } body.mac-theme .template-card code { white-space: pre-wrap !important; word-break: break-all !important; } /* ── Headings ── */ body.mac-theme h1 { font-weight: 700 !important; letter-spacing: -0.5px !important; color: #0a0a0a !important; } body.mac-theme h2, body.mac-theme h3, body.mac-theme h4 { font-weight: 600 !important; letter-spacing: -0.3px !important; color: #0a0a0a !important; } /* ── SweetAlert2 ── */ body.mac-theme .swal2-popup { border-radius: 18px !important; background: rgba(255,255,255,0.95) !important; backdrop-filter: blur(40px) saturate(1.8) !important; border: 1px solid rgba(255,255,255,0.85) !important; box-shadow: 0 24px 80px rgba(0,0,0,0.20), 0 8px 24px rgba(0,0,0,0.10) !important; } body.mac-theme .swal2-confirm { background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%) !important; border-radius: 10px !important; font-weight: 600 !important; box-shadow: 0 1px 3px rgba(0,0,0,0.18), 0 1px 0 rgba(255,255,255,0.10) inset !important; } body.mac-theme .swal2-cancel { background: rgba(255,255,255,0.7) !important; color: #0a0a0a !important; border: 1px solid rgba(0,0,0,0.10) !important; border-radius: 10px !important; font-weight: 500 !important; } /* ── Scrollbar ── */ body.mac-theme ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18) !important; border-radius: 10px !important; } body.mac-theme ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.28) !important; } /* ── Table polish ── */ body.mac-theme .client-table { background: rgba(255,255,255,0.7) !important; backdrop-filter: blur(22px) saturate(1.7) !important; -webkit-backdrop-filter: blur(22px) saturate(1.7) !important; } body.mac-theme .client-table thead { background: rgba(0,0,0,0.025) !important; } body.mac-theme .client-table th { font-weight: 600 !important; font-size: 11px !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; color: #6e6e73 !important; } /* ══════════════════════════════════════════════════════════════ DARK MODE — body.mac-theme.dark-theme (Liquid Glass) ══════════════════════════════════════════════════════════════ */ body.mac-theme.dark-theme { background: radial-gradient(ellipse at 60% 0%, rgba(55,55,80,0.65) 0%, transparent 52%), radial-gradient(ellipse at 0% 80%, rgba(20,30,55,0.50) 0%, transparent 50%), radial-gradient(ellipse at 95% 95%, rgba(30,20,50,0.40) 0%, transparent 45%), linear-gradient(170deg, #0e0e16 0%, #08080d 100%) !important; background-attachment: fixed !important; --shadow-mac-sm: 0 1px 3px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.065); --shadow-mac-md: 0 4px 24px rgba(0,0,0,0.50), 0 8px 32px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.07); --shadow-mac-lg: 0 12px 48px rgba(0,0,0,0.60), 0 4px 16px rgba(0,0,0,0.40), inset 0 1px 0 rgba(255,255,255,0.07); } /* Sidebar — deep glass */ body.mac-theme.dark-theme .sidebar { background: rgba(12,12,20,0.82) !important; backdrop-filter: blur(40px) saturate(200%) !important; -webkit-backdrop-filter: blur(40px) saturate(200%) !important; border-right: 1px solid rgba(255,255,255,0.07) !important; box-shadow: 1px 0 0 rgba(255,255,255,0.04) inset !important; } body.mac-theme.dark-theme .nav-item { color: #AEAEB2 !important; } body.mac-theme.dark-theme .nav-item:hover { background: rgba(255,255,255,0.06) !important; color: #F2F2F7 !important; } body.mac-theme.dark-theme .nav-item.active { background: rgba(255,255,255,0.10) !important; color: #F2F2F7 !important; border-left: none !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.08) !important; } body.mac-theme.dark-theme .nav-item.active i { color: #F2F2F7 !important; } body.mac-theme.dark-theme .nav-section { color: #636366 !important; } body.mac-theme.dark-theme .brand-name { color: #F2F2F7 !important; } body.mac-theme.dark-theme .brand-icon { background: rgba(255,255,255,0.08) !important; box-shadow: 0 2px 8px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.06) !important; } /* Topbar — glass strip */ body.mac-theme.dark-theme .topbar { background: rgba(10,10,18,0.78) !important; backdrop-filter: blur(32px) saturate(180%) !important; -webkit-backdrop-filter: blur(32px) saturate(180%) !important; border-bottom: 1px solid rgba(255,255,255,0.07) !important; box-shadow: 0 1px 0 rgba(255,255,255,0.04), 0 4px 24px rgba(0,0,0,0.25) !important; } body.mac-theme.dark-theme .topbar-title { color: #F2F2F7 !important; } body.mac-theme.dark-theme #langToggleBtn, body.mac-theme.dark-theme .lang-toggle { background: rgba(255,255,255,0.07) !important; backdrop-filter: blur(12px) !important; border: 1px solid rgba(255,255,255,0.10) !important; color: #F2F2F7 !important; } body.mac-theme.dark-theme #langToggleBtn:hover, body.mac-theme.dark-theme .lang-toggle:hover { background: rgba(255,255,255,0.12) !important; } /* Cards — glass surface */ body.mac-theme.dark-theme .stat-card, body.mac-theme.dark-theme .edit-card, body.mac-theme.dark-theme .client-table-wrapper, body.mac-theme.dark-theme .auto-card, body.mac-theme.dark-theme .template-card, body.mac-theme.dark-theme .pipeline-card, body.mac-theme.dark-theme .kanban-card, body.mac-theme.dark-theme .ticket-card, body.mac-theme.dark-theme .info-card, body.mac-theme.dark-theme .ov-stat-card, body.mac-theme.dark-theme .ov-activity-card { background: rgba(255,255,255,0.055) !important; backdrop-filter: blur(24px) saturate(150%) !important; -webkit-backdrop-filter: blur(24px) saturate(150%) !important; border: 1px solid rgba(255,255,255,0.09) !important; border-bottom-color: rgba(255,255,255,0.07) !important; border-right-color: rgba(255,255,255,0.06) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 4px 32px rgba(0,0,0,0.40) !important; } /* Stat values */ body.mac-theme.dark-theme .stat-value, body.mac-theme.dark-theme .stat-number { color: #F2F2F7 !important; } body.mac-theme.dark-theme .stat-label, body.mac-theme.dark-theme .stat-title { color: #AEAEB2 !important; } body.mac-theme.dark-theme .ov-stat-icon { background: rgba(255,255,255,0.07) !important; } body.mac-theme.dark-theme .ov-activity-item { border-bottom: 1px solid rgba(255,255,255,0.06) !important; } /* Section headers */ body.mac-theme.dark-theme .section-header h1 { color: #F2F2F7 !important; } body.mac-theme.dark-theme .section-header p { color: #AEAEB2 !important; } /* Headings */ body.mac-theme.dark-theme h1 { color: #F2F2F7 !important; } body.mac-theme.dark-theme h2, body.mac-theme.dark-theme h3, body.mac-theme.dark-theme h4 { color: #F2F2F7 !important; } /* Inputs */ body.mac-theme.dark-theme input, body.mac-theme.dark-theme select, body.mac-theme.dark-theme textarea { background: rgba(255,255,255,0.07) !important; backdrop-filter: blur(8px) !important; border: 1px solid rgba(255,255,255,0.09) !important; color: #F2F2F7 !important; box-shadow: inset 0 1px 2px rgba(0,0,0,0.20) !important; } body.mac-theme.dark-theme input:focus, body.mac-theme.dark-theme select:focus, body.mac-theme.dark-theme textarea:focus { background: rgba(255,255,255,0.10) !important; border-color: rgba(37,211,102,0.38) !important; box-shadow: 0 0 0 3px rgba(37,211,102,0.09), inset 0 1px 2px rgba(0,0,0,0.20) !important; } body.mac-theme.dark-theme input::placeholder, body.mac-theme.dark-theme textarea::placeholder { color: #636366 !important; } body.mac-theme.dark-theme label { color: #AEAEB2 !important; } /* Ghost / secondary buttons */ body.mac-theme.dark-theme .btn-ghost, body.mac-theme.dark-theme .btn-secondary, body.mac-theme.dark-theme .btn-outline { background: rgba(255,255,255,0.07) !important; backdrop-filter: blur(12px) !important; color: #F2F2F7 !important; border: 1px solid rgba(255,255,255,0.10) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 1px 3px rgba(0,0,0,0.30) !important; } body.mac-theme.dark-theme .btn-ghost:hover, body.mac-theme.dark-theme .btn-secondary:hover, body.mac-theme.dark-theme .btn-outline:hover { background: rgba(255,255,255,0.11) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 2px 8px rgba(0,0,0,0.35) !important; } /* Logout */ body.mac-theme.dark-theme .btn-logout { background: rgba(255,255,255,0.06) !important; backdrop-filter: blur(8px) !important; border: 1px solid rgba(255,255,255,0.08) !important; color: #AEAEB2 !important; } /* Filter chips */ body.mac-theme.dark-theme .filter-chip { background: rgba(255,255,255,0.07) !important; backdrop-filter: blur(12px) !important; border: 1px solid rgba(255,255,255,0.09) !important; color: #AEAEB2 !important; } body.mac-theme.dark-theme .filter-chip:hover { background: rgba(255,255,255,0.11) !important; color: #F2F2F7 !important; border-color: rgba(255,255,255,0.14) !important; } /* Modals — deep glass */ body.mac-theme.dark-theme .modal-content, body.mac-theme.dark-theme .modal-panel { background: rgba(14,14,22,0.82) !important; backdrop-filter: blur(48px) saturate(200%) !important; -webkit-backdrop-filter: blur(48px) saturate(200%) !important; border: 1px solid rgba(255,255,255,0.09) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 32px 80px rgba(0,0,0,0.75) !important; } body.mac-theme.dark-theme .modal-header { border-bottom: 1px solid rgba(255,255,255,0.07) !important; } body.mac-theme.dark-theme .modal-title, body.mac-theme.dark-theme .modal-header h2, body.mac-theme.dark-theme .modal-header h3 { color: #F2F2F7 !important; } /* Tabs */ body.mac-theme.dark-theme .tabs, body.mac-theme.dark-theme .tab-bar { background: rgba(255,255,255,0.04) !important; backdrop-filter: blur(12px) !important; } body.mac-theme.dark-theme .tab.active, body.mac-theme.dark-theme .tab-item.active { background: rgba(255,255,255,0.10) !important; color: #F2F2F7 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 1px 3px rgba(0,0,0,0.40) !important; } /* Pipeline / kanban */ body.mac-theme.dark-theme .pipeline-column, body.mac-theme.dark-theme .kanban-column { background: rgba(255,255,255,0.028) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; border: 1px solid rgba(255,255,255,0.07) !important; } body.mac-theme.dark-theme .pipeline-card, body.mac-theme.dark-theme .kanban-card { background: rgba(255,255,255,0.055) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; border: 1px solid rgba(255,255,255,0.09) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 2px 12px rgba(0,0,0,0.30) !important; } /* SweetAlert2 */ body.mac-theme.dark-theme .swal2-popup { background: rgba(14,14,22,0.92) !important; backdrop-filter: blur(40px) !important; border: 1px solid rgba(255,255,255,0.09) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 32px 80px rgba(0,0,0,0.75) !important; } body.mac-theme.dark-theme .swal2-cancel { background: rgba(255,255,255,0.07) !important; color: #F2F2F7 !important; border: 1px solid rgba(255,255,255,0.10) !important; } /* Table */ body.mac-theme.dark-theme .client-table { background: transparent !important; backdrop-filter: none !important; } body.mac-theme.dark-theme .client-table thead { background: rgba(255,255,255,0.03) !important; } body.mac-theme.dark-theme .client-table th { color: #636366 !important; } /* Scrollbar */ body.mac-theme.dark-theme ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12) !important; } body.mac-theme.dark-theme ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.22) !important; }