:root { --navy: #1F497D; --blue: #2E75B6; --light-blue: #D6E4F0; --accent: #4EAFF0; --success: #27AE60; --warning: #F39C12; --danger: #E74C3C; --grey: #F4F6F9; --border: #DDE3EC; --text: #2C3E50; --muted: #7F8C8D; --sidebar-w: 220px; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Inter', 'Geist', 'Segoe UI', Arial, sans-serif; font-feature-settings: 'cv05', 'cv11', 'ss01'; background: radial-gradient(1300px 700px at var(--bg-mouse-x, 12%) var(--bg-mouse-y, -15%), rgba(245, 158, 11, .12) 0%, transparent 56%), radial-gradient(1100px 650px at var(--bg-mouse-x2, 95%) var(--bg-mouse-y2, -20%), rgba(40, 164, 158, .14) 0%, transparent 55%), #080B14; color: #E6EBFF; font-size: 14px; letter-spacing: .1px; scrollbar-width: thin; scrollbar-color: rgba(245,190,80,.45) rgba(255,255,255,.06); --app-text-primary: #E6EBFF; --app-text-muted: #9FB0D8; --app-field-bg: rgba(184, 204, 255, .09); --app-field-border: rgba(184, 204, 255, .26); --app-field-text: #E6EEFF; --app-field-placeholder: #9FB1D8; --app-field-focus: rgba(245, 158, 11, .55); /* Dark-appropriate grey for the default dark theme (matches other dark theme overrides) */ --grey: rgba(184, 204, 255, .07); --border: rgba(184, 204, 255, .22); --muted: #9FB0D8; --bg-mouse-x: 12%; --bg-mouse-y: -15%; --bg-mouse-x2: 95%; --bg-mouse-y2: -20%; transition: background 1.2s ease; /* ── Surface depth system ─────────────────────────────────────────── */ --surface-1: rgba(255,255,255,.03); --surface-2: rgba(15,20,38,.62); --surface-3: rgba(8,12,24,.90); --surface-border: rgba(255,255,255,.08); --surface-border-accent: rgba(245,158,11,.28); --surface-blur: 16px; --surface-shine: linear-gradient(145deg, rgba(245,190,80,.07) 0%, rgba(255,255,255,.01) 55%, rgba(245,158,11,.04) 100%); --surface-rim: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.18) 30%, rgba(255,255,255,.22) 50%, rgba(255,255,255,.18) 70%, transparent 100%); --surface-shadow-sm: 0 6px 16px rgba(2,4,10,.18); --surface-shadow-md: 0 16px 34px rgba(2,5,16,.28); --surface-shadow-lg: 0 28px 52px rgba(1,6,20,.38); --surface-shadow-hover: 0 22px 42px rgba(1,7,24,.45); } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: rgba(255,255,255,.04); border-radius: 10px; } *::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(245,190,80,.55), rgba(217,119,6,.5)); border: 2px solid rgba(8,11,20,.55); border-radius: 10px; } *::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, rgba(251,191,36,.72), rgba(245,158,11,.7)); } /* Roofing Estimator JS: Grand Total & Printout Sync */ body[data-site-theme="classic"] { background: linear-gradient(180deg, #EEF2F8 0%, #E5EBF5 100%); color: #2C3E50; scrollbar-color: rgba(111,132,170,.55) rgba(31,73,125,.08); --grey: #EAF0F8; --border: #C7D3E4; --text: #233448; --muted: #5E6F89; --app-text-primary: #233448; --app-text-muted: #5D6F8B; --app-field-bg: #F2F7FF; --app-field-border: #C9D6E7; --app-field-text: #233448; --app-field-placeholder: #7587A3; --app-field-focus: rgba(245,158,11,.45); --surface-2: #F3F7FD; --surface-3: rgba(255,255,255,.98); --surface-border: #C9D6E7; --surface-border-accent: rgba(245,158,11,.30); --surface-blur: 0px; --surface-shine: linear-gradient(145deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.0) 55%); --surface-rim: linear-gradient(90deg, transparent, rgba(255,255,255,.75) 40%, rgba(255,255,255,.75) 60%, transparent); --surface-shadow-md: 0 10px 24px rgba(29,53,87,.08); --surface-shadow-hover: 0 16px 32px rgba(29,53,87,.14); } body[data-site-theme="classic"] #sidebar { background: linear-gradient(180deg, #1F497D 0%, #2E75B6 100%); box-shadow: inset -1px 0 0 rgba(255,255,255,.14); } body[data-site-theme="classic"] .topbar { background: rgba(255,255,255,.92); border-bottom: 1px solid #DDE3EC; } body[data-site-theme="classic"] .topbar-title { color: #1F497D; } body[data-site-theme="classic"] .topbar-subtitle { color: #5E6E88; } body[data-site-theme="classic"] .topbar-icon-group { background: rgba(0,0,0,.03); border-color: #DDE3EC; } body[data-site-theme="classic"] .topbar-icon-btn:hover { background: rgba(0,0,0,.07); } body[data-site-theme="classic"] .topbar-icon-btn:active { background: rgba(0,0,0,.12); } body[data-site-theme="classic"] .card-header { border-bottom: 1px solid #E2E8F2; } body[data-site-theme="classic"] .card-title, body[data-site-theme="classic"] td, body[data-site-theme="classic"] .stat-value { color: #223142; } body[data-site-theme="classic"] th { background: #F3F7FC; color: #61728C; border-bottom: 1px solid #DCE4F0; } body[data-site-theme="classic"] tr:hover td { background: #F7FAFF; } body[data-site-theme="classic"] #app .btn { background: #EEF4FC; color: #1F497D; border: 1.5px solid #CBD8E9; box-shadow: 0 6px 14px rgba(18, 40, 66, .08); } body[data-site-theme="classic"] #app .btn-outline { background: #EFF4FC; color: #1F497D; } body[data-site-theme="classic"] .form-group input, body[data-site-theme="classic"] .form-group select, body[data-site-theme="classic"] .form-group textarea, body[data-site-theme="classic"] #app input, body[data-site-theme="classic"] #app select, body[data-site-theme="classic"] #app textarea { background: var(--app-field-bg); color: var(--app-field-text); border-color: var(--app-field-border); } body[data-site-theme="classic"] #app .btn-success { background: linear-gradient(135deg, #27AE60, #1E8B4C); color: #FFFFFF; border-color: rgba(39,174,96,.35); } body[data-site-theme="classic"] #app .btn-primary { background: linear-gradient(135deg, #2E75B6, #1F497D); color: #FFFFFF; border-color: rgba(46,117,182,.35); } body[data-site-theme="classic"] #app .btn-amber { background: linear-gradient(135deg, #d97706, #b45309); color: #FFFFFF; border-color: rgba(180,83,9,.35); font-weight: 600; } body[data-site-theme="classic"] #ai-chat-panel { background: rgba(244,248,254,.96); border-color: #CBD8E8; box-shadow: 0 16px 40px rgba(29,53,87,.18); } body[data-site-theme="classic"] .ai-msg-assistant { background: #EAF1FB; color: #2C3E50; border: 1px solid #CBD8E8; } /* ── Paper (Living System Light) ─── body-level overrides ────────────── */ /* Layered on top of classic when body.ls-active is present. Overrides the blue-gray classic palette with warm cream Paper palette. */ body.ls-active[data-mode="light"], body.ls-active[data-site-theme="classic"] { background: #F3F0E8; color: #1A1812; scrollbar-color: rgba(180,83,9,0.35) rgba(24,18,8,0.06); --grey: rgba(24,18,8,0.04); --border: rgba(24,18,8,0.12); --text: #1A1812; --muted: #766D5E; --app-text-primary: #1A1812; --app-text-muted: #766D5E; --app-field-bg: rgba(253,251,245,0.9); --app-field-border: rgba(24,18,8,0.14); --app-field-text: #1A1812; --app-field-placeholder: #9B9281; --app-field-focus: rgba(180,83,9,0.55); --surface-1: rgba(24,18,8,0.02); --surface-2: #FBF9F3; --surface-3: #FDFBF5; --surface-border: rgba(24,18,8,0.10); --surface-border-accent: rgba(180,83,9,0.28); --surface-blur: 0px; --surface-shine: linear-gradient(145deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 55%); --surface-rim: linear-gradient(90deg, transparent, rgba(24,18,8,0.08) 40%, rgba(24,18,8,0.08) 60%, transparent); --surface-shadow-sm: 0 2px 6px rgba(24,18,8,0.04); --surface-shadow-md: 0 8px 20px rgba(24,18,8,0.06); --surface-shadow-lg: 0 18px 40px rgba(24,18,8,0.08); --surface-shadow-hover: 0 14px 30px rgba(24,18,8,0.10); } body.ls-active[data-mode="light"] .topbar, body.ls-active[data-site-theme="classic"] .topbar { background: rgba(253,251,245,0.92); border-bottom: 1px solid rgba(24,18,8,0.08); } body.ls-active[data-mode="light"] .topbar-title, body.ls-active[data-site-theme="classic"] .topbar-title { color: #1A1812; } body.ls-active[data-mode="light"] .topbar-subtitle, body.ls-active[data-site-theme="classic"] .topbar-subtitle { color: #766D5E; } body.ls-active[data-mode="light"] #app .btn, body.ls-active[data-site-theme="classic"] #app .btn { background: #FBF9F3; color: #4A4338; border: 1.5px solid rgba(24,18,8,0.12); box-shadow: 0 2px 6px rgba(24,18,8,0.04); } body.ls-active[data-mode="light"] #app .btn:hover, body.ls-active[data-site-theme="classic"] #app .btn:hover { background: rgba(180,83,9,0.06); border-color: rgba(180,83,9,0.28); color: #92400E; } body.ls-active[data-mode="light"] #app .btn-outline, body.ls-active[data-site-theme="classic"] #app .btn-outline { background: transparent; color: #4A4338; border-color: rgba(24,18,8,0.14); } body.ls-active[data-mode="light"] #app .btn-outline:hover, body.ls-active[data-site-theme="classic"] #app .btn-outline:hover { background: rgba(180,83,9,0.06); border-color: rgba(180,83,9,0.28); color: #92400E; } body.ls-active[data-mode="light"] #app .btn-primary, body.ls-active[data-site-theme="classic"] #app .btn-primary { background: linear-gradient(135deg, #D97706, #B45309); color: #FFFFFF; border-color: rgba(180,83,9,0.35); } body.ls-active[data-mode="light"] #app .btn-amber, body.ls-active[data-site-theme="classic"] #app .btn-amber { background: linear-gradient(135deg, #D97706, #B45309); color: #FFFFFF; border-color: rgba(180,83,9,0.35); } body.ls-active[data-mode="light"] th, body.ls-active[data-site-theme="classic"] th { background: rgba(24,18,8,0.04); color: #4A4338; border-bottom: 1px solid rgba(24,18,8,0.10); } body.ls-active[data-mode="light"] .card-title, body.ls-active[data-mode="light"] td, body.ls-active[data-mode="light"] .stat-value, body.ls-active[data-site-theme="classic"] .card-title, body.ls-active[data-site-theme="classic"] td, body.ls-active[data-site-theme="classic"] .stat-value { color: #1A1812; } body.ls-active[data-mode="light"] tr:hover td, body.ls-active[data-site-theme="classic"] tr:hover td { background: rgba(180,83,9,0.04); } body.ls-active[data-mode="light"] .card-header, body.ls-active[data-site-theme="classic"] .card-header { border-bottom: 1px solid rgba(24,18,8,0.08); } body.ls-active[data-mode="light"] #ai-chat-panel, body.ls-active[data-site-theme="classic"] #ai-chat-panel { background: rgba(253,251,245,0.96); border-color: rgba(24,18,8,0.12); box-shadow: 0 16px 40px rgba(24,18,8,0.12); } body.ls-active[data-mode="light"] .ai-msg-assistant, body.ls-active[data-site-theme="classic"] .ai-msg-assistant { background: #FBF9F3; color: #1A1812; border: 1px solid rgba(24,18,8,0.10); } /* Scrollbar tracks for Paper */ body.ls-active[data-mode="light"] *::-webkit-scrollbar-track, body.ls-active[data-site-theme="classic"] *::-webkit-scrollbar-track { background: rgba(24,18,8,0.03); } body.ls-active[data-mode="light"] *::-webkit-scrollbar-thumb, body.ls-active[data-site-theme="classic"] *::-webkit-scrollbar-thumb { background: rgba(180,83,9,0.22); border-radius: 10px; } body.ls-active[data-mode="light"] *::-webkit-scrollbar-thumb:hover, body.ls-active[data-site-theme="classic"] *::-webkit-scrollbar-thumb:hover { background: rgba(180,83,9,0.35); } body[data-site-theme="graphite"] { background: radial-gradient(1200px 660px at 8% -18%, rgba(126,141,168,.2) 0%, transparent 58%), radial-gradient(1000px 620px at 94% -24%, rgba(99,115,138,.18) 0%, transparent 55%), #0F131A; color: #DCE3EE; scrollbar-color: rgba(144,156,175,.6) rgba(255,255,255,.07); --grey: rgba(214,223,236,.06); --border: rgba(203,215,236,.2); --text: #DEE6F2; --muted: #A7B3C7; --app-text-primary: #E7EDF8; --app-text-muted: #B1BCD0; --app-field-bg: rgba(218,229,246,.08); --app-field-border: rgba(208,220,243,.28); --app-field-text: #E7EEF9; --app-field-placeholder: #B0BCD1; --app-field-focus: rgba(166,191,235,.55); --surface-2: rgba(24,30,40,.78); --surface-border: rgba(255,255,255,.10); --surface-border-accent: rgba(180,198,225,.32); --surface-shine: linear-gradient(145deg, rgba(150,165,190,.07) 0%, rgba(255,255,255,.01) 55%, rgba(120,138,168,.05) 100%); --surface-shadow-md: 0 14px 30px rgba(4,7,12,.42); --surface-shadow-hover: 0 20px 40px rgba(3,6,11,.52); } body[data-site-theme="graphite"] #sidebar { background: linear-gradient(170deg, rgba(52,61,74,.95) 0%, rgba(34,41,52,.96) 55%, rgba(22,27,36,.98) 100%); } body[data-site-theme="graphite"] .topbar { background: rgba(19,24,33,.76); border-bottom: 1px solid rgba(255,255,255,.08); } body[data-site-theme="graphite"] .form-group input, body[data-site-theme="graphite"] .form-group select, body[data-site-theme="graphite"] .form-group textarea, body[data-site-theme="graphite"] #app input, body[data-site-theme="graphite"] #app select, body[data-site-theme="graphite"] #app textarea { background: var(--app-field-bg); color: var(--app-field-text); border-color: var(--app-field-border); } body[data-site-theme="graphite"] #app .btn-outline { background: rgba(255,255,255,.05); color: #DDE6F5; border-color: rgba(255,255,255,.22); } body[data-site-theme="aurora"] { background: radial-gradient(1300px 760px at 12% -15%, rgba(22,193,164,.24) 0%, transparent 58%), radial-gradient(1080px 640px at 95% -20%, rgba(72,120,255,.2) 0%, transparent 55%), #07171D; color: #DEF9F5; scrollbar-color: rgba(116,226,205,.62) rgba(255,255,255,.06); --grey: rgba(151,241,226,.08); --border: rgba(127,229,214,.24); --text: #DDF8F4; --muted: #98D8CF; --app-text-primary: #E5FFFA; --app-text-muted: #A5DDD5; --app-field-bg: rgba(149,241,228,.1); --app-field-border: rgba(143,242,225,.33); --app-field-text: #E9FFFB; --app-field-placeholder: #A7DBD4; --app-field-focus: rgba(128,236,216,.58); --surface-2: rgba(8,34,45,.68); --surface-border: rgba(129,245,220,.18); --surface-border-accent: rgba(129,245,220,.40); --surface-shine: linear-gradient(145deg, rgba(24,190,161,.10) 0%, rgba(255,255,255,.01) 55%, rgba(72,180,190,.07) 100%); --surface-shadow-md: 0 16px 32px rgba(2,18,24,.44); --surface-shadow-hover: 0 22px 44px rgba(1,14,20,.54); } body[data-site-theme="aurora"] #sidebar { background: linear-gradient(165deg, rgba(7,146,138,.95) 0%, rgba(6,99,118,.95) 52%, rgba(9,49,62,.98) 100%); } body[data-site-theme="aurora"] .topbar { background: rgba(7,33,43,.7); border-bottom: 1px solid rgba(132,249,225,.12); } body[data-site-theme="aurora"] .form-group input, body[data-site-theme="aurora"] .form-group select, body[data-site-theme="aurora"] .form-group textarea, body[data-site-theme="aurora"] #app input, body[data-site-theme="aurora"] #app select, body[data-site-theme="aurora"] #app textarea { background: var(--app-field-bg); color: var(--app-field-text); border-color: var(--app-field-border); } body[data-site-theme="aurora"] #app .btn-primary { background: linear-gradient(135deg, rgba(24,190,161,.94), rgba(39,126,206,.92)); border-color: rgba(133,247,226,.42); } body[data-site-theme="aurora"] #app .btn-amber { background: linear-gradient(135deg, #d97706, #92400e); color: #FFFFFF; border-color: rgba(217,119,6,.4); font-weight: 600; } body[data-site-theme="aurora"] #app .btn-success { background: linear-gradient(135deg, rgba(42,204,154,.92), rgba(25,151,117,.92)); border-color: rgba(133,247,226,.4); } body[data-site-theme="midnight"] { background: radial-gradient(1250px 700px at 15% -18%, rgba(80,113,255,.22) 0%, transparent 58%), radial-gradient(1050px 620px at 92% -22%, rgba(105,73,219,.2) 0%, transparent 56%), #060A12; color: #E7EDFF; scrollbar-color: rgba(137,160,224,.62) rgba(255,255,255,.06); --grey: rgba(163,181,230,.08); --border: rgba(170,190,242,.24); --text: #E7EDFF; --muted: #A7B6D7; --app-text-primary: #EAF0FF; --app-text-muted: #A8B6D8; --app-field-bg: rgba(155,178,237,.1); --app-field-border: rgba(171,193,247,.32); --app-field-text: #ECF2FF; --app-field-placeholder: #A5B5DA; --app-field-focus: rgba(167,196,255,.62); --surface-2: rgba(10,14,32,.68); --surface-border: rgba(170,190,242,.14); --surface-border-accent: rgba(167,196,255,.36); --surface-shine: linear-gradient(145deg, rgba(130,160,255,.10) 0%, rgba(255,255,255,.01) 55%, rgba(105,73,219,.07) 100%); --surface-shadow-md: 0 16px 34px rgba(1,4,18,.36); --surface-shadow-hover: 0 22px 44px rgba(0,3,16,.46); } body[data-site-theme="midnight"] #sidebar { background: linear-gradient(165deg, rgba(36,54,120,.94) 0%, rgba(48,33,102,.95) 52%, rgba(16,16,45,.98) 100%); } body[data-site-theme="midnight"] .topbar { background: rgba(8,14,29,.72); border-bottom: 1px solid rgba(176,194,242,.14); } body[data-site-theme="sunset"] { background: radial-gradient(1200px 680px at 12% -16%, rgba(255,168,108,.22) 0%, transparent 58%), radial-gradient(1100px 640px at 92% -18%, rgba(215,93,134,.2) 0%, transparent 56%), #1A0E16; color: #FFE9EE; scrollbar-color: rgba(247,168,178,.62) rgba(255,255,255,.06); --grey: rgba(255,188,182,.09); --border: rgba(246,168,172,.28); --text: #FFE9EE; --muted: #E7B7C3; --app-text-primary: #FFECEF; --app-text-muted: #E5B7C2; --app-field-bg: rgba(247,174,173,.12); --app-field-border: rgba(248,181,173,.36); --app-field-text: #FFF1F2; --app-field-placeholder: #E2B4BE; --app-field-focus: rgba(255,192,157,.62); --surface-2: rgba(38,12,24,.70); --surface-border: rgba(246,168,172,.20); --surface-border-accent: rgba(255,188,168,.38); --surface-shine: linear-gradient(145deg, rgba(215,93,134,.10) 0%, rgba(255,255,255,.01) 55%, rgba(255,168,108,.07) 100%); --surface-shadow-md: 0 16px 32px rgba(20,4,14,.44); --surface-shadow-hover: 0 22px 44px rgba(16,3,12,.54); } body[data-site-theme="sunset"] #sidebar { background: linear-gradient(165deg, rgba(177,74,95,.95) 0%, rgba(116,44,93,.95) 52%, rgba(53,24,57,.98) 100%); } body[data-site-theme="sunset"] .topbar { background: rgba(39,17,34,.72); border-bottom: 1px solid rgba(255,195,178,.18); } body[data-site-theme="evergreen"] { background: radial-gradient(1250px 700px at 10% -20%, rgba(67,181,138,.2) 0%, transparent 58%), radial-gradient(1080px 640px at 90% -20%, rgba(88,160,116,.18) 0%, transparent 56%), #07150F; color: #E6FFF3; scrollbar-color: rgba(138,216,178,.62) rgba(255,255,255,.06); --grey: rgba(144,230,190,.08); --border: rgba(129,214,171,.26); --text: #E7FFF4; --muted: #A7DABF; --app-text-primary: #E9FFF5; --app-text-muted: #A8DBC0; --app-field-bg: rgba(139,222,182,.11); --app-field-border: rgba(140,225,185,.34); --app-field-text: #EDFFF7; --app-field-placeholder: #A4D8BD; --app-field-focus: rgba(142,236,190,.58); --surface-2: rgba(8,30,20,.70); --surface-border: rgba(129,214,171,.20); --surface-border-accent: rgba(142,236,190,.38); --surface-shine: linear-gradient(145deg, rgba(24,122,91,.12) 0%, rgba(255,255,255,.01) 55%, rgba(67,181,138,.07) 100%); --surface-shadow-md: 0 16px 32px rgba(2,12,8,.44); --surface-shadow-hover: 0 22px 44px rgba(1,10,6,.54); } body[data-site-theme="evergreen"] #sidebar { background: linear-gradient(165deg, rgba(24,122,91,.95) 0%, rgba(18,95,73,.95) 52%, rgba(12,52,40,.98) 100%); } body[data-site-theme="evergreen"] .topbar { background: rgba(10,35,25,.72); border-bottom: 1px solid rgba(147,228,189,.16); } body[data-site-theme="frost"] { background: linear-gradient(180deg, #EEF4FB 0%, #E5EDF8 100%); color: #23364A; scrollbar-color: rgba(124,144,178,.58) rgba(31,73,125,.08); --grey: #EAF1FB; --border: #C7D5E9; --text: #23364A; --muted: #5D728F; --app-text-primary: #23364A; --app-text-muted: #5D728F; --app-field-bg: #F4F8FF; --app-field-border: #CBD8EA; --app-field-text: #223447; --app-field-placeholder: #7C8EA8; --app-field-focus: rgba(71,122,190,.42); --surface-2: #F8FBFF; --surface-3: rgba(255,255,255,.97); --surface-border: #D3DEEE; --surface-border-accent: rgba(71,122,190,.35); --surface-blur: 0px; --surface-shine: linear-gradient(145deg, rgba(255,255,255,.60) 0%, rgba(255,255,255,.0) 55%); --surface-rim: linear-gradient(90deg, transparent, rgba(255,255,255,.8) 40%, rgba(255,255,255,.8) 60%, transparent); --surface-shadow-md: 0 10px 24px rgba(32,58,88,.08); --surface-shadow-hover: 0 16px 32px rgba(32,58,88,.14); } body[data-site-theme="frost"] #sidebar { background: linear-gradient(180deg, #365C94 0%, #4F7FB8 52%, #2D4B78 100%); box-shadow: inset -1px 0 0 rgba(255,255,255,.2); } body[data-site-theme="frost"] .topbar { background: rgba(247,250,255,.92); border-bottom: 1px solid #D5E0F0; } body[data-site-theme="frost"] .topbar-title { color: #224368; } body[data-site-theme="frost"] .topbar-subtitle { color: #5F7491; } body[data-site-theme="sand"] { background: linear-gradient(180deg, #F7F3EA 0%, #EFE8DA 100%); color: #3C3125; scrollbar-color: rgba(154,131,102,.58) rgba(102,68,34,.08); --grey: #F0E8DA; --border: #DCCCB2; --text: #3D3226; --muted: #7B6750; --app-text-primary: #3D3226; --app-text-muted: #7B6750; --app-field-bg: #FAF5EA; --app-field-border: #E0D1B9; --app-field-text: #3B3024; --app-field-placeholder: #8A745B; --app-field-focus: rgba(160,126,79,.42); --surface-2: #FBF7EE; --surface-3: rgba(255,250,242,.98); --surface-border: #E2D5C0; --surface-border-accent: rgba(160,126,79,.35); --surface-blur: 0px; --surface-shine: linear-gradient(145deg, rgba(255,248,235,.55) 0%, rgba(255,248,235,.0) 55%); --surface-rim: linear-gradient(90deg, transparent, rgba(255,255,255,.7) 40%, rgba(255,255,255,.7) 60%, transparent); --surface-shadow-md: 0 10px 24px rgba(77,58,36,.08); --surface-shadow-hover: 0 16px 32px rgba(77,58,36,.14); } body[data-site-theme="sand"] #sidebar { background: linear-gradient(180deg, #8B6A43 0%, #A37A4D 52%, #6F5234 100%); box-shadow: inset -1px 0 0 rgba(255,255,255,.14); } body[data-site-theme="sand"] .topbar { background: rgba(252,248,238,.9); border-bottom: 1px solid #E3D6C0; } body[data-site-theme="sand"] .topbar-title { color: #5B432C; } body[data-site-theme="sand"] .topbar-subtitle { color: #866E52; } body[data-site-theme="dawn"] { background: linear-gradient(180deg, #F5F7FF 0%, #ECEFFD 100%); color: #2A3450; scrollbar-color: rgba(132,148,186,.56) rgba(45,74,130,.08); --grey: #EEF2FF; --border: #CFD9EF; --text: #2A3450; --muted: #647391; --app-text-primary: #2A3450; --app-text-muted: #647391; --app-field-bg: #F7F9FF; --app-field-border: #D3DDF1; --app-field-text: #29344F; --app-field-placeholder: #7C8AA7; --app-field-focus: rgba(92,123,186,.4); --surface-2: #FAFBFF; --surface-3: rgba(255,255,255,.98); --surface-border: #D6DFF1; --surface-border-accent: rgba(92,123,186,.35); --surface-blur: 0px; --surface-shine: linear-gradient(145deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.0) 55%); --surface-rim: linear-gradient(90deg, transparent, rgba(255,255,255,.75) 40%, rgba(255,255,255,.75) 60%, transparent); --surface-shadow-md: 0 10px 24px rgba(49,66,98,.08); --surface-shadow-hover: 0 16px 32px rgba(49,66,98,.14); } body[data-site-theme="dawn"] #sidebar { background: linear-gradient(180deg, #5A6FB3 0%, #7287C5 52%, #445A97 100%); } body[data-site-theme="dawn"] .topbar { background: rgba(249,251,255,.92); border-bottom: 1px solid #D9E1F2; } body[data-site-theme="mintlight"] { background: linear-gradient(180deg, #EFF9F5 0%, #E6F2EC 100%); color: #2C3E36; scrollbar-color: rgba(120,157,142,.56) rgba(47,91,76,.08); --grey: #E9F4EE; --border: #C9DECF; --text: #2C3E36; --muted: #617D70; --app-text-primary: #2C3E36; --app-text-muted: #617D70; --app-field-bg: #F3FBF7; --app-field-border: #CCE2D3; --app-field-text: #2B3E35; --app-field-placeholder: #739183; --app-field-focus: rgba(84,143,114,.42); --surface-2: #F7FCFA; --surface-3: rgba(247,253,250,.98); --surface-border: #D3E8DD; --surface-border-accent: rgba(84,143,114,.35); --surface-blur: 0px; --surface-shine: linear-gradient(145deg, rgba(240,255,248,.55) 0%, rgba(240,255,248,.0) 55%); --surface-rim: linear-gradient(90deg, transparent, rgba(255,255,255,.75) 40%, rgba(255,255,255,.75) 60%, transparent); --surface-shadow-md: 0 10px 24px rgba(46,81,66,.08); --surface-shadow-hover: 0 16px 32px rgba(46,81,66,.14); } body[data-site-theme="mintlight"] #sidebar { background: linear-gradient(180deg, #3D7A63 0%, #4E9277 52%, #2E6450 100%); } body[data-site-theme="mintlight"] .topbar { background: rgba(246,252,249,.9); border-bottom: 1px solid #D3E7DB; } body[data-site-theme="rosepaper"] { background: linear-gradient(180deg, #FAF2F6 0%, #F3E8EF 100%); color: #4A2F3F; scrollbar-color: rgba(165,125,146,.56) rgba(96,57,78,.08); --grey: #F4E9F0; --border: #E0C9D7; --text: #4A2F3F; --muted: #8A6780; --app-text-primary: #4A2F3F; --app-text-muted: #8A6780; --app-field-bg: #FCF4F8; --app-field-border: #E4CDDB; --app-field-text: #4A2F3F; --app-field-placeholder: #9A748D; --app-field-focus: rgba(165,108,141,.42); --surface-2: #FDF7FA; --surface-3: rgba(253,247,250,.98); --surface-border: #E8D4E0; --surface-border-accent: rgba(165,108,141,.35); --surface-blur: 0px; --surface-shine: linear-gradient(145deg, rgba(255,244,250,.55) 0%, rgba(255,244,250,.0) 55%); --surface-rim: linear-gradient(90deg, transparent, rgba(255,255,255,.75) 40%, rgba(255,255,255,.75) 60%, transparent); --surface-shadow-md: 0 10px 24px rgba(97,60,82,.08); --surface-shadow-hover: 0 16px 32px rgba(97,60,82,.14); } body[data-site-theme="rosepaper"] #sidebar { background: linear-gradient(180deg, #8C4E72 0%, #A35F85 52%, #733E5E 100%); } body[data-site-theme="rosepaper"] .topbar { background: rgba(254,247,251,.9); border-bottom: 1px solid #E9D4E1; } body[data-site-theme="darklight"] { background: radial-gradient(1220px 700px at 10% -18%, rgba(118,143,204,.22) 0%, transparent 58%), radial-gradient(980px 620px at 92% -20%, rgba(158,136,228,.2) 0%, transparent 56%), #101725; color: #E8EEFC; scrollbar-color: rgba(157,177,227,.6) rgba(255,255,255,.06); --grey: rgba(187,204,244,.09); --border: rgba(178,196,240,.3); --text: #EAF0FF; --muted: #B0BEDF; --app-text-primary: #EAF0FF; --app-text-muted: #B0BEDF; --app-field-bg: rgba(173,193,241,.14); --app-field-border: rgba(187,204,244,.36); --app-field-text: #EEF3FF; --app-field-placeholder: #AEBEE1; --app-field-focus: rgba(173,203,255,.64); --surface-2: rgba(24,36,62,.72); --surface-border: rgba(193,209,245,.22); --surface-border-accent: rgba(193,209,245,.42); --surface-shine: linear-gradient(145deg, rgba(118,143,204,.10) 0%, rgba(255,255,255,.01) 55%, rgba(158,136,228,.07) 100%); --surface-shadow-md: 0 14px 30px rgba(4,10,24,.40); --surface-shadow-hover: 0 20px 40px rgba(3,8,20,.50); } body[data-site-theme="darklight"] #sidebar { background: linear-gradient(165deg, rgba(61,82,146,.95) 0%, rgba(77,61,134,.95) 52%, rgba(32,41,72,.98) 100%); } body[data-site-theme="darklight"] .topbar { background: rgba(18,28,48,.72); border-bottom: 1px solid rgba(190,208,249,.18); } body[data-site-theme="darkmedium"] { background: radial-gradient(1220px 700px at 10% -20%, rgba(94,122,184,.2) 0%, transparent 58%), radial-gradient(1020px 620px at 92% -22%, rgba(116,95,191,.18) 0%, transparent 56%), #161D2D; color: #DFE7F9; scrollbar-color: rgba(143,164,208,.58) rgba(255,255,255,.06); --grey: rgba(171,189,228,.08); --border: rgba(162,180,221,.26); --text: #E2EAFB; --muted: #A3B3D5; --app-text-primary: #E6EEFF; --app-text-muted: #A9B8D8; --app-field-bg: rgba(159,179,224,.12); --app-field-border: rgba(172,191,232,.32); --app-field-text: #EAF1FF; --app-field-placeholder: #A7B7D9; --app-field-focus: rgba(162,192,248,.6); --surface-2: rgba(31,41,64,.70); --surface-border: rgba(176,195,234,.20); --surface-border-accent: rgba(176,195,234,.38); --surface-shine: linear-gradient(145deg, rgba(94,122,184,.10) 0%, rgba(255,255,255,.01) 55%, rgba(116,95,191,.07) 100%); --surface-shadow-md: 0 14px 30px rgba(4,10,22,.36); --surface-shadow-hover: 0 20px 40px rgba(3,8,18,.46); } body[data-site-theme="darkmedium"] #sidebar { background: linear-gradient(165deg, rgba(52,70,126,.94) 0%, rgba(64,52,114,.95) 52%, rgba(31,38,66,.98) 100%); } body[data-site-theme="darkmedium"] .topbar { background: rgba(23,31,50,.72); border-bottom: 1px solid rgba(174,193,236,.16); } body[data-site-theme="mediumlight"] { background: linear-gradient(180deg, #EAF0FA 0%, #E0E8F5 100%); color: #25364C; scrollbar-color: rgba(120,141,177,.56) rgba(47,76,130,.08); --grey: #E5EDF9; --border: #C7D5E9; --text: #25364C; --muted: #5F7392; --app-text-primary: #25364C; --app-text-muted: #5F7392; --app-field-bg: #F1F6FF; --app-field-border: #C8D6EA; --app-field-text: #25364C; --app-field-placeholder: #768AA8; --app-field-focus: rgba(86,126,194,.44); --surface-2: #F6FAFF; --surface-3: rgba(255,255,255,.98); --surface-border: #D1DDEE; --surface-border-accent: rgba(86,126,194,.35); --surface-blur: 0px; --surface-shine: linear-gradient(145deg, rgba(255,255,255,.50) 0%, rgba(255,255,255,.0) 55%); --surface-rim: linear-gradient(90deg, transparent, rgba(255,255,255,.7) 40%, rgba(255,255,255,.7) 60%, transparent); --surface-shadow-md: 0 10px 24px rgba(34,58,92,.10); --surface-shadow-hover: 0 16px 32px rgba(34,58,92,.16); } body[data-site-theme="mediumlight"] #sidebar { background: linear-gradient(180deg, #4D6698 0%, #5E79AD 52%, #3E547F 100%); box-shadow: inset -1px 0 0 rgba(255,255,255,.16); } body[data-site-theme="mediumlight"] .topbar { background: rgba(244,248,255,.9); border-bottom: 1px solid #D2DEEF; } body[data-site-theme="mediumlight"] #app .topbar-title { color: #2A3A52; } body[data-site-theme="mediumlight"] #app .topbar-subtitle { color: #657A97; } body[data-site-theme="mediumlight"] #app th { background: #EDF2FA; color: #4F6280; border-bottom: 1px solid #D4DEED; } body[data-site-theme="mediumlight"] #app td { color: #2B3A52; border-bottom-color: #DCE5F2; } body[data-site-theme="mediumlight"] #app tr:hover td { background: #F4F8FF; } body[data-site-theme="mediumlight"] #app .btn { background: #F1F6FF; color: #1F3C63; border-color: #C8D6EA; box-shadow: 0 6px 14px rgba(33,57,89,.08); } body[data-site-theme="mediumlight"] #app .btn-primary { background: linear-gradient(135deg, #2E5E99, #3E72AF); color: #F5F9FF; border-color: #2B568D; } body[data-site-theme="mediumlight"] #app .btn-amber { background: linear-gradient(135deg, #d97706, #b45309); color: #FFFFFF; border-color: rgba(180,83,9,.35); font-weight: 600; } body[data-site-theme="mediumlight"] #app .btn-success { background: linear-gradient(135deg, #2D7B5B, #2A6E52); color: #F3FFF8; border-color: #266348; } body[data-site-theme="mediumlight"] #app .btn-danger { background: linear-gradient(135deg, #B34853, #9B3C46); color: #FFF7F8; border-color: #8E353F; } body[data-site-theme="mediumlight"] #app .btn-outline { background: #F7FAFF; color: #23456E; } body[data-site-theme="mediumlight"] #app a, body[data-site-theme="mediumlight"] #app a:visited { color: #1F497D; -webkit-text-fill-color: #1F497D; text-decoration-color: rgba(31,73,125,.65); } body[data-site-theme="mediumlight"] #app a:hover, body[data-site-theme="mediumlight"] #app a:focus { color: #16375C; -webkit-text-fill-color: #16375C; } body[data-site-theme="mediumlight"] #section-documents .badge { color: #1F2F46; border-color: rgba(71, 99, 141, .35); box-shadow: none; } body[data-site-theme="mediumlight"] #app .tab-ms-icon { background: #E8EFFA; border-color: #C3D4E9; color: #1F3F67; } /* ── CONTRAST NORMALIZATION ───────────────────────────── */ #app, #app .card, #app .card-body, #app td, #app .card-title, #app .stat-value, #app .tab.active { color: var(--app-text-primary); } #app th, #app .stat-label, #app .tab, #app .topbar-subtitle, #app .empty-state, #app .loading, #app .form-group label, #app .user-email { color: var(--app-text-muted); } /* Dark theme link contrast */ #app a, #app a:visited { color: #CFE0FF; -webkit-text-fill-color: #CFE0FF; text-decoration-color: rgba(207,224,255,.75); } #app a:hover, #app a:focus { color: #EAF2FF; -webkit-text-fill-color: #EAF2FF; text-decoration-color: rgba(234,242,255,.92); } /* Light theme group overrides */ body[data-site-theme="classic"] #app .topbar-title, body[data-site-theme="frost"] #app .topbar-title, body[data-site-theme="sand"] #app .topbar-title, body[data-site-theme="dawn"] #app .topbar-title, body[data-site-theme="mintlight"] #app .topbar-title, body[data-site-theme="rosepaper"] #app .topbar-title { color: #2A3A52; } body[data-site-theme="classic"] #app .topbar-subtitle, body[data-site-theme="frost"] #app .topbar-subtitle, body[data-site-theme="sand"] #app .topbar-subtitle, body[data-site-theme="dawn"] #app .topbar-subtitle, body[data-site-theme="mintlight"] #app .topbar-subtitle, body[data-site-theme="rosepaper"] #app .topbar-subtitle { color: #657A97; } body[data-site-theme="classic"] #app th, body[data-site-theme="frost"] #app th, body[data-site-theme="sand"] #app th, body[data-site-theme="dawn"] #app th, body[data-site-theme="mintlight"] #app th, body[data-site-theme="rosepaper"] #app th { background: #EDF2FA; color: #4F6280; border-bottom: 1px solid #D4DEED; } body[data-site-theme="classic"] #app td, body[data-site-theme="frost"] #app td, body[data-site-theme="sand"] #app td, body[data-site-theme="dawn"] #app td, body[data-site-theme="mintlight"] #app td, body[data-site-theme="rosepaper"] #app td { color: #2B3A52; border-bottom-color: #DCE5F2; } body[data-site-theme="classic"] #app tr:hover td, body[data-site-theme="frost"] #app tr:hover td, body[data-site-theme="sand"] #app tr:hover td, body[data-site-theme="dawn"] #app tr:hover td, body[data-site-theme="mintlight"] #app tr:hover td, body[data-site-theme="rosepaper"] #app tr:hover td { background: #F4F8FF; } body[data-site-theme="classic"] #app .btn, body[data-site-theme="frost"] #app .btn, body[data-site-theme="sand"] #app .btn, body[data-site-theme="dawn"] #app .btn, body[data-site-theme="mintlight"] #app .btn, body[data-site-theme="rosepaper"] #app .btn { background: #F1F6FF; color: #1F3C63; border-color: #C8D6EA; box-shadow: 0 6px 14px rgba(33,57,89,.08); } body[data-site-theme="classic"] #app .btn .ms-icon, body[data-site-theme="frost"] #app .btn .ms-icon, body[data-site-theme="sand"] #app .btn .ms-icon, body[data-site-theme="dawn"] #app .btn .ms-icon, body[data-site-theme="mintlight"] #app .btn .ms-icon, body[data-site-theme="rosepaper"] #app .btn .ms-icon { color: inherit; } body[data-site-theme="classic"] #app .btn-primary, body[data-site-theme="frost"] #app .btn-primary, body[data-site-theme="sand"] #app .btn-primary, body[data-site-theme="dawn"] #app .btn-primary, body[data-site-theme="mintlight"] #app .btn-primary, body[data-site-theme="rosepaper"] #app .btn-primary { background: linear-gradient(135deg, #2E5E99, #3E72AF); color: #F5F9FF; border-color: #2B568D; } body[data-site-theme="classic"] #app .btn-amber, body[data-site-theme="frost"] #app .btn-amber, body[data-site-theme="sand"] #app .btn-amber, body[data-site-theme="dawn"] #app .btn-amber, body[data-site-theme="mintlight"] #app .btn-amber, body[data-site-theme="rosepaper"] #app .btn-amber { background: linear-gradient(135deg, #d97706, #b45309); color: #FFFFFF; border-color: rgba(180,83,9,.35); font-weight: 600; } body[data-site-theme="classic"] #app .btn-success, body[data-site-theme="frost"] #app .btn-success, body[data-site-theme="sand"] #app .btn-success, body[data-site-theme="dawn"] #app .btn-success, body[data-site-theme="mintlight"] #app .btn-success, body[data-site-theme="rosepaper"] #app .btn-success { background: linear-gradient(135deg, #2D7B5B, #2A6E52); color: #F3FFF8; border-color: #266348; } body[data-site-theme="classic"] #app .btn-danger, body[data-site-theme="frost"] #app .btn-danger, body[data-site-theme="sand"] #app .btn-danger, body[data-site-theme="dawn"] #app .btn-danger, body[data-site-theme="mintlight"] #app .btn-danger, body[data-site-theme="rosepaper"] #app .btn-danger { background: linear-gradient(135deg, #B34853, #9B3C46); color: #FFF7F8; border-color: #8E353F; } body[data-site-theme="classic"] #app .btn-outline, body[data-site-theme="frost"] #app .btn-outline, body[data-site-theme="sand"] #app .btn-outline, body[data-site-theme="dawn"] #app .btn-outline, body[data-site-theme="mintlight"] #app .btn-outline, body[data-site-theme="rosepaper"] #app .btn-outline { background: #F7FAFF; color: #23456E; } body[data-site-theme="classic"] #app a, body[data-site-theme="frost"] #app a, body[data-site-theme="sand"] #app a, body[data-site-theme="dawn"] #app a, body[data-site-theme="mintlight"] #app a, body[data-site-theme="rosepaper"] #app a, body[data-site-theme="classic"] #app a:visited, body[data-site-theme="frost"] #app a:visited, body[data-site-theme="sand"] #app a:visited, body[data-site-theme="dawn"] #app a:visited, body[data-site-theme="mintlight"] #app a:visited, body[data-site-theme="rosepaper"] #app a:visited { color: #1F497D; -webkit-text-fill-color: #1F497D; text-decoration-color: rgba(31,73,125,.65); } body[data-site-theme="classic"] #app a:hover, body[data-site-theme="frost"] #app a:hover, body[data-site-theme="sand"] #app a:hover, body[data-site-theme="dawn"] #app a:hover, body[data-site-theme="mintlight"] #app a:hover, body[data-site-theme="rosepaper"] #app a:hover, body[data-site-theme="classic"] #app a:focus, body[data-site-theme="frost"] #app a:focus, body[data-site-theme="sand"] #app a:focus, body[data-site-theme="dawn"] #app a:focus, body[data-site-theme="mintlight"] #app a:focus, body[data-site-theme="rosepaper"] #app a:focus { color: #16375C; -webkit-text-fill-color: #16375C; } /* Light-theme status badge contrast (esp. Document Management) */ body[data-site-theme="classic"] #section-documents .badge, body[data-site-theme="frost"] #section-documents .badge, body[data-site-theme="sand"] #section-documents .badge, body[data-site-theme="dawn"] #section-documents .badge, body[data-site-theme="mintlight"] #section-documents .badge, body[data-site-theme="rosepaper"] #section-documents .badge { color: #1F2F46; border-color: rgba(71, 99, 141, .35); box-shadow: none; } body[data-site-theme="classic"] #section-documents .badge-neon-violet, body[data-site-theme="frost"] #section-documents .badge-neon-violet, body[data-site-theme="sand"] #section-documents .badge-neon-violet, body[data-site-theme="dawn"] #section-documents .badge-neon-violet, body[data-site-theme="mintlight"] #section-documents .badge-neon-violet, body[data-site-theme="rosepaper"] #section-documents .badge-neon-violet { background: #EEE8FF; color: #4A3785; border-color: #C7B6F2; } body[data-site-theme="classic"] #section-documents .badge-neon-blue, body[data-site-theme="frost"] #section-documents .badge-neon-blue, body[data-site-theme="sand"] #section-documents .badge-neon-blue, body[data-site-theme="dawn"] #section-documents .badge-neon-blue, body[data-site-theme="mintlight"] #section-documents .badge-neon-blue, body[data-site-theme="rosepaper"] #section-documents .badge-neon-blue { background: #E9F2FF; color: #1F497D; border-color: #BFD3F2; } body[data-site-theme="classic"] #section-documents .badge-neon-amber, body[data-site-theme="frost"] #section-documents .badge-neon-amber, body[data-site-theme="sand"] #section-documents .badge-neon-amber, body[data-site-theme="dawn"] #section-documents .badge-neon-amber, body[data-site-theme="mintlight"] #section-documents .badge-neon-amber, body[data-site-theme="rosepaper"] #section-documents .badge-neon-amber { background: #FFF5DE; color: #7A4D00; border-color: #F0D39A; } body[data-site-theme="classic"] #section-online_retail .badge-neon-amber, body[data-site-theme="frost"] #section-online_retail .badge-neon-amber, body[data-site-theme="sand"] #section-online_retail .badge-neon-amber, body[data-site-theme="dawn"] #section-online_retail .badge-neon-amber, body[data-site-theme="mintlight"] #section-online_retail .badge-neon-amber, body[data-site-theme="rosepaper"] #section-online_retail .badge-neon-amber, body[data-site-theme="mediumlight"] #section-online_retail .badge-neon-amber { background: #FFECC8; color: #6F4300; border-color: #D4A353; box-shadow: none; } body[data-site-theme="classic"] #section-documents .badge-neon-emerald, body[data-site-theme="frost"] #section-documents .badge-neon-emerald, body[data-site-theme="sand"] #section-documents .badge-neon-emerald, body[data-site-theme="dawn"] #section-documents .badge-neon-emerald, body[data-site-theme="mintlight"] #section-documents .badge-neon-emerald, body[data-site-theme="rosepaper"] #section-documents .badge-neon-emerald { background: #E5F8EE; color: #1F6A49; border-color: #B8E3CF; } body[data-site-theme="classic"] #app .tab-ms-icon, body[data-site-theme="frost"] #app .tab-ms-icon, body[data-site-theme="sand"] #app .tab-ms-icon, body[data-site-theme="dawn"] #app .tab-ms-icon, body[data-site-theme="mintlight"] #app .tab-ms-icon, body[data-site-theme="rosepaper"] #app .tab-ms-icon { background: #E8EFFA; border-color: #C3D4E9; color: #1F3F67; } body[data-site-theme="classic"] #app .stat-icon, body[data-site-theme="frost"] #app .stat-icon, body[data-site-theme="sand"] #app .stat-icon, body[data-site-theme="dawn"] #app .stat-icon, body[data-site-theme="mintlight"] #app .stat-icon, body[data-site-theme="rosepaper"] #app .stat-icon { background: linear-gradient(135deg, rgba(121,145,181,.3), rgba(89,111,147,.22)); border: 1px solid rgba(97,121,158,.46); color: #2B4262; } body[data-site-theme="classic"] #app .stat-icon.blue, body[data-site-theme="frost"] #app .stat-icon.blue, body[data-site-theme="sand"] #app .stat-icon.blue, body[data-site-theme="dawn"] #app .stat-icon.blue, body[data-site-theme="mintlight"] #app .stat-icon.blue, body[data-site-theme="rosepaper"] #app .stat-icon.blue { background: linear-gradient(135deg, rgba(99,157,223,.38), rgba(66,121,197,.28)); border-color: rgba(83,136,197,.6); color: #173F6C; } body[data-site-theme="classic"] #app .stat-icon.green, body[data-site-theme="frost"] #app .stat-icon.green, body[data-site-theme="sand"] #app .stat-icon.green, body[data-site-theme="dawn"] #app .stat-icon.green, body[data-site-theme="mintlight"] #app .stat-icon.green, body[data-site-theme="rosepaper"] #app .stat-icon.green { background: linear-gradient(135deg, rgba(92,183,137,.38), rgba(66,148,108,.28)); border-color: rgba(73,145,108,.58); color: #1A5A3F; } body[data-site-theme="classic"] #app .stat-icon.orange, body[data-site-theme="frost"] #app .stat-icon.orange, body[data-site-theme="sand"] #app .stat-icon.orange, body[data-site-theme="dawn"] #app .stat-icon.orange, body[data-site-theme="mintlight"] #app .stat-icon.orange, body[data-site-theme="rosepaper"] #app .stat-icon.orange { background: linear-gradient(135deg, rgba(220,155,83,.4), rgba(191,117,57,.3)); border-color: rgba(171,106,55,.58); color: #6A3F11; } body[data-site-theme="classic"] #app .stat-icon.purple, body[data-site-theme="frost"] #app .stat-icon.purple, body[data-site-theme="sand"] #app .stat-icon.purple, body[data-site-theme="dawn"] #app .stat-icon.purple, body[data-site-theme="mintlight"] #app .stat-icon.purple, body[data-site-theme="rosepaper"] #app .stat-icon.purple { background: linear-gradient(135deg, rgba(156,118,219,.4), rgba(111,85,188,.3)); border-color: rgba(114,86,187,.58); color: #422B73; } body[data-site-theme="classic"] #app .stat-icon.grey, body[data-site-theme="frost"] #app .stat-icon.grey, body[data-site-theme="sand"] #app .stat-icon.grey, body[data-site-theme="dawn"] #app .stat-icon.grey, body[data-site-theme="mintlight"] #app .stat-icon.grey, body[data-site-theme="rosepaper"] #app .stat-icon.grey { background: linear-gradient(135deg, rgba(164,174,190,.42), rgba(128,139,158,.3)); border-color: rgba(113,124,143,.58); color: #334154; } body[data-site-theme="classic"] #app .stat-icon.campaign, body[data-site-theme="frost"] #app .stat-icon.campaign, body[data-site-theme="sand"] #app .stat-icon.campaign, body[data-site-theme="dawn"] #app .stat-icon.campaign, body[data-site-theme="mintlight"] #app .stat-icon.campaign, body[data-site-theme="rosepaper"] #app .stat-icon.campaign { background: linear-gradient(135deg, rgba(177,64,77,.48), rgba(129,38,52,.38)); border-color: rgba(153,50,64,.62); color: #FFECEF; } /* Per-theme soft tuning (light palettes) */ body[data-site-theme="sand"] #app .btn { background: #F8F1E4; color: #5E4328; border-color: #D8C7AE; } body[data-site-theme="sand"] #app .btn-outline { background: #FBF5EA; color: #62492E; border-color: #DCCCB4; } body[data-site-theme="sand"] #app .tab-ms-icon { background: #EFE3D2; border-color: #D6C1A1; color: #6D4A27; } body[data-site-theme="rosepaper"] #app .btn { background: #F7EEF3; color: #5B3A52; border-color: #DBC2D0; } body[data-site-theme="rosepaper"] #app .btn-outline { background: #FBF3F8; color: #643E59; border-color: #E0C8D5; } body[data-site-theme="rosepaper"] #app .btn-primary { background: linear-gradient(135deg, #7B4A77, #8B5686); color: #FFF8FD; border-color: #6D4069; } body[data-site-theme="rosepaper"] #app .btn-amber { background: linear-gradient(135deg, #c2730a, #9a5c08); color: #FFFBF5; border-color: rgba(154,92,8,.35); font-weight: 600; } body[data-site-theme="rosepaper"] #app .tab-ms-icon { background: #F3E6EE; border-color: #DABFD0; color: #693E62; } body[data-site-theme="rosepaper"] #app .stat-icon.purple { background: linear-gradient(135deg, rgba(176,120,175,.32), rgba(132,90,149,.22)); border-color: rgba(137,90,151,.44); color: #5A2F67; } /* ── LOGIN ─────────────────────────────────────────────── */ body[data-site-theme="classic"] #section-estimating a, body[data-site-theme="classic"] #section-estimating a:visited { color: #1F497D; -webkit-text-fill-color: #1F497D; text-decoration-color: rgba(31,73,125,.62); } body[data-site-theme="classic"] #section-estimating a:hover, body[data-site-theme="classic"] #section-estimating a:focus { color: #16375C; -webkit-text-fill-color: #16375C; } body[data-site-theme="classic"] #section-partner_matching a, body[data-site-theme="classic"] #section-partner_matching a:visited, body[data-site-theme="classic"] #section-documents a, body[data-site-theme="classic"] #section-documents a:visited { color: #1F497D; -webkit-text-fill-color: #1F497D; text-decoration-color: rgba(31,73,125,.62); } body[data-site-theme="classic"] #section-partner_matching a:hover, body[data-site-theme="classic"] #section-partner_matching a:focus, body[data-site-theme="classic"] #section-documents a:hover, body[data-site-theme="classic"] #section-documents a:focus { color: #16375C; -webkit-text-fill-color: #16375C; } body[data-site-theme="modern"] #section-documents #dm-search-q, body[data-site-theme="darklight"] #section-documents #dm-search-q, body[data-site-theme="darkmedium"] #section-documents #dm-search-q, body[data-site-theme="graphite"] #section-documents #dm-search-q, body[data-site-theme="aurora"] #section-documents #dm-search-q, body[data-site-theme="midnight"] #section-documents #dm-search-q, body[data-site-theme="sunset"] #section-documents #dm-search-q, body[data-site-theme="evergreen"] #section-documents #dm-search-q { background: rgba(16, 23, 40, .72); color: #EAF1FF; border-color: rgba(122, 151, 204, .4); } body[data-site-theme="modern"] #section-documents #dm-search-q::placeholder, body[data-site-theme="darklight"] #section-documents #dm-search-q::placeholder, body[data-site-theme="darkmedium"] #section-documents #dm-search-q::placeholder, body[data-site-theme="graphite"] #section-documents #dm-search-q::placeholder, body[data-site-theme="aurora"] #section-documents #dm-search-q::placeholder, body[data-site-theme="midnight"] #section-documents #dm-search-q::placeholder, body[data-site-theme="sunset"] #section-documents #dm-search-q::placeholder, body[data-site-theme="evergreen"] #section-documents #dm-search-q::placeholder { color: #A7B8DA; } body[data-site-theme="modern"] #section-documents #dm-search-q:focus, body[data-site-theme="darklight"] #section-documents #dm-search-q:focus, body[data-site-theme="darkmedium"] #section-documents #dm-search-q:focus, body[data-site-theme="graphite"] #section-documents #dm-search-q:focus, body[data-site-theme="aurora"] #section-documents #dm-search-q:focus, body[data-site-theme="midnight"] #section-documents #dm-search-q:focus, body[data-site-theme="sunset"] #section-documents #dm-search-q:focus, body[data-site-theme="evergreen"] #section-documents #dm-search-q:focus { border-color: var(--app-field-focus); box-shadow: 0 0 0 3px rgba(127, 168, 255, .16); outline: none; } body[data-site-theme="classic"] #section-finance #fin-int-provider, body[data-site-theme="classic"] #section-finance #fin-int-auth-type, body[data-site-theme="classic"] #section-finance #fin-int-api-key { color: #1E2F44 !important; -webkit-text-fill-color: #1E2F44 !important; background: #EDF4FF !important; border-color: #AFC3DF !important; } body[data-site-theme="classic"] #section-finance #fin-int-provider::placeholder, body[data-site-theme="classic"] #section-finance #fin-int-auth-type::placeholder, body[data-site-theme="classic"] #section-finance #fin-int-api-key::placeholder { color: #6C7F9B !important; -webkit-text-fill-color: #6C7F9B !important; } body[data-site-theme="graphite"] #section-finance #fin-int-provider, body[data-site-theme="graphite"] #section-finance #fin-int-auth-type, body[data-site-theme="graphite"] #section-finance #fin-int-api-key { color: #F0F5FF !important; -webkit-text-fill-color: #F0F5FF !important; background: rgba(50, 60, 79, .94) !important; border-color: rgba(173, 188, 215, .44) !important; } body[data-site-theme="aurora"] #section-finance #fin-int-provider, body[data-site-theme="aurora"] #section-finance #fin-int-auth-type, body[data-site-theme="aurora"] #section-finance #fin-int-api-key { color: #EBFFFB !important; -webkit-text-fill-color: #EBFFFB !important; background: rgba(20, 74, 83, .94) !important; border-color: rgba(136, 239, 222, .5) !important; } body[data-site-theme="classic"] #section-finance #fin-int-api-key:-webkit-autofill, body[data-site-theme="classic"] #section-finance #fin-int-provider:-webkit-autofill, body[data-site-theme="classic"] #section-finance #fin-int-auth-type:-webkit-autofill { -webkit-text-fill-color: #1E2F44 !important; box-shadow: 0 0 0 1000px #EDF4FF inset !important; } body[data-site-theme="graphite"] #section-finance #fin-int-api-key:-webkit-autofill, body[data-site-theme="graphite"] #section-finance #fin-int-provider:-webkit-autofill, body[data-site-theme="graphite"] #section-finance #fin-int-auth-type:-webkit-autofill { -webkit-text-fill-color: #F0F5FF !important; box-shadow: 0 0 0 1000px rgba(50, 60, 79, .94) inset !important; } body[data-site-theme="aurora"] #section-finance #fin-int-api-key:-webkit-autofill, body[data-site-theme="aurora"] #section-finance #fin-int-provider:-webkit-autofill, body[data-site-theme="aurora"] #section-finance #fin-int-auth-type:-webkit-autofill { -webkit-text-fill-color: #EBFFFB !important; box-shadow: 0 0 0 1000px rgba(20, 74, 83, .94) inset !important; } body[data-site-theme="modern"] #section-users .badge-success, body[data-site-theme="darklight"] #section-users .badge-success, body[data-site-theme="darkmedium"] #section-users .badge-success, body[data-site-theme="graphite"] #section-users .badge-success, body[data-site-theme="aurora"] #section-users .badge-success, body[data-site-theme="midnight"] #section-users .badge-success, body[data-site-theme="sunset"] #section-users .badge-success, body[data-site-theme="evergreen"] #section-users .badge-success { background: rgba(36, 110, 78, .35); color: #B9F2D7; border: 1px solid rgba(101, 201, 157, .48); } body[data-site-theme="modern"] #section-users .badge-warning, body[data-site-theme="darklight"] #section-users .badge-warning, body[data-site-theme="darkmedium"] #section-users .badge-warning, body[data-site-theme="graphite"] #section-users .badge-warning, body[data-site-theme="aurora"] #section-users .badge-warning, body[data-site-theme="midnight"] #section-users .badge-warning, body[data-site-theme="sunset"] #section-users .badge-warning, body[data-site-theme="evergreen"] #section-users .badge-warning { background: rgba(120, 83, 22, .34); color: #FFDDA0; border: 1px solid rgba(235, 178, 84, .5); } body[data-site-theme="modern"] #section-users .badge-danger, body[data-site-theme="darklight"] #section-users .badge-danger, body[data-site-theme="darkmedium"] #section-users .badge-danger, body[data-site-theme="graphite"] #section-users .badge-danger, body[data-site-theme="aurora"] #section-users .badge-danger, body[data-site-theme="midnight"] #section-users .badge-danger, body[data-site-theme="sunset"] #section-users .badge-danger, body[data-site-theme="evergreen"] #section-users .badge-danger { background: rgba(128, 41, 56, .34); color: #FFC7CF; border: 1px solid rgba(221, 103, 127, .5); } body[data-site-theme="modern"] #section-users .badge-blue, body[data-site-theme="darklight"] #section-users .badge-blue, body[data-site-theme="darkmedium"] #section-users .badge-blue, body[data-site-theme="graphite"] #section-users .badge-blue, body[data-site-theme="aurora"] #section-users .badge-blue, body[data-site-theme="midnight"] #section-users .badge-blue, body[data-site-theme="sunset"] #section-users .badge-blue, body[data-site-theme="evergreen"] #section-users .badge-blue { background: rgba(45, 78, 129, .34); color: #CFE2FF; border: 1px solid rgba(103, 145, 206, .5); } body[data-site-theme="modern"] #section-users .badge-grey, body[data-site-theme="darklight"] #section-users .badge-grey, body[data-site-theme="darkmedium"] #section-users .badge-grey, body[data-site-theme="graphite"] #section-users .badge-grey, body[data-site-theme="aurora"] #section-users .badge-grey, body[data-site-theme="midnight"] #section-users .badge-grey, body[data-site-theme="sunset"] #section-users .badge-grey, body[data-site-theme="evergreen"] #section-users .badge-grey { background: rgba(76, 88, 106, .34); color: #D7DFEC; border: 1px solid rgba(130, 145, 169, .48); } /* ════════════════════════════════════════════════════════════════════════════ THEME FAMILY LAYOUT PATTERNS ════════════════════════════════════════════════════════════════════════════ Enforces structural consistency within each theme family. All dark themes share identical layout DNA; all light themes share identical DNA. Only the color palette differs between themes in the same family. These patterns apply to: - Cards, Tables, Tabs, Modals - Form inputs, KPIs, Status badges - Sidebar nav items Uses CSS custom properties from token_system.css with safe fallbacks. Overridable by custom theme—no !important used. */ /* ════════════════════════════════════════════════════════════════════════════ DARK FAMILY STRUCTURAL PATTERNS ════════════════════════════════════════════════════════════════════════════ */ body:not([data-site-theme]), body[data-site-theme="modern"], body[data-site-theme="graphite"], body[data-site-theme="aurora"], body[data-site-theme="midnight"], body[data-site-theme="sunset"], body[data-site-theme="evergreen"], body[data-site-theme="darklight"], body[data-site-theme="darkmedium"] { /* ────────────────────────────────────────────────────────────────────────── CARDS ────────────────────────────────────────────────────────────────────────────── */ #app .card { border: 1px solid var(--color-border); border-radius: var(--card-radius, var(--radius-md, 4px)); background: var(--card-bg, var(--color-surface)); box-shadow: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; } #app .card:hover { border-color: var(--card-hover-border, var(--color-border)); box-shadow: var(--card-hover-shadow, var(--shadow-sm, 0 6px 16px rgba(2,4,10,.18))); } /* ────────────────────────────────────────────────────────────────────────── TABLES ────────────────────────────────────────────────────────────────────────────── */ #app table th { background: var(--table-header-bg, var(--color-surface)); color: var(--color-text-muted); font-size: var(--text-xs, 11px); font-weight: var(--weight-semibold, 600); text-transform: uppercase; letter-spacing: 0.5px; padding: var(--space-sm, 8px) var(--space-md, 12px); border-bottom: 1px solid var(--color-border); position: sticky; top: 0; z-index: 2; } #app table td { padding: var(--space-sm, 8px) var(--space-md, 12px); font-size: var(--text-sm, 12px); border-bottom: 1px solid var(--table-border, rgba(255,255,255,.06)); color: var(--color-text); } #app table tbody tr:hover td { background: var(--table-row-hover, rgba(184,204,255,.06)); } #app table tbody tr:nth-child(even) td { background: var(--table-stripe, rgba(184,204,255,.025)); } /* ────────────────────────────────────────────────────────────────────────── TABS ────────────────────────────────────────────────────────────────────────────── */ #app .tabs { display: flex; gap: var(--space-xs, 4px); border-bottom: 1px solid var(--color-border); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } #app .tabs::-webkit-scrollbar { display: none; } #app .tab { height: 40px; display: inline-flex; align-items: center; padding: 0 var(--space-lg, 16px); font-size: var(--text-sm, 12px); font-weight: var(--weight-medium, 500); color: var(--color-text-muted); border-bottom: 2px solid transparent; background: none; cursor: pointer; white-space: nowrap; transition: color 0.15s ease, border-color 0.15s ease; } #app .tab:hover { color: var(--color-text); } #app .tab.active { color: var(--color-primary, #f59e0b); border-bottom-color: var(--color-primary, #f59e0b); } /* ────────────────────────────────────────────────────────────────────────── MODALS ────────────────────────────────────────────────────────────────────────────── */ #app .modal { background: var(--modal-bg, var(--color-bg-2)); border: 1px solid var(--modal-border, var(--color-border)); border-radius: var(--modal-radius, var(--radius-lg, 8px)); box-shadow: var(--modal-shadow, var(--shadow-xl, 0 28px 52px rgba(1,6,20,.38))); } /* ────────────────────────────────────────────────────────────────────────── FORM INPUTS ────────────────────────────────────────────────────────────────────────────── */ #app input[type="text"], #app input[type="email"], #app input[type="password"], #app input[type="search"], #app input[type="number"], #app input[type="tel"], #app input[type="url"], #app select, #app textarea { height: var(--field-height, 38px); padding: var(--space-sm, 8px) var(--space-md, 12px); font-size: var(--text-sm, 12px); background: var(--color-field-bg); border: 1px solid var(--color-field-border); border-radius: var(--field-radius, var(--radius-sm, 4px)); color: var(--color-field-text); transition: border-color 0.15s ease, box-shadow 0.15s ease; } #app input[type="text"]:focus, #app input[type="email"]:focus, #app input[type="password"]:focus, #app input[type="search"]:focus, #app input[type="number"]:focus, #app input[type="tel"]:focus, #app input[type="url"]:focus, #app select:focus, #app textarea:focus { border-color: var(--color-primary, #f59e0b); box-shadow: 0 0 0 3px rgba(245,158,11,.2); outline: none; } /* ────────────────────────────────────────────────────────────────────────── KPI PATTERNS ────────────────────────────────────────────────────────────────────────────── */ /* Match KPI TILES only — classes ENDING in "-kpi" (hr-kpi, fin-kpi, ls-kpi …). The old [class*="-kpi"] substring form also matched the INNER label/value spans (ls-kpi-label, ls-kpi-value, sc-held-kpi's children) and boxed each text span with a border + surface background — the documented themes.css substring-leak incident. */ #app [class$="-kpi"], #app [class*="-kpi "] { border-radius: var(--radius-md, 4px); border: 1px solid var(--color-border); background: var(--color-surface); } /* ────────────────────────────────────────────────────────────────────────── STATUS BADGES ────────────────────────────────────────────────────────────────────────────── */ #app .badge, #app .status-badge { font-size: var(--badge-font-size, 11px); font-weight: var(--badge-font-weight, 500); padding: var(--badge-padding, 2px 10px); border-radius: var(--badge-radius, 9999px); } /* ────────────────────────────────────────────────────────────────────────── SIDEBAR NAV ITEMS ────────────────────────────────────────────────────────────────────────────── */ #app .nav-item { padding: var(--nav-item-padding, var(--space-sm, 8px) var(--space-md, 12px)); border-radius: var(--nav-item-radius, var(--radius-sm, 4px)); transition: background 0.15s ease; } #app .nav-item:hover { background: var(--nav-item-hover, rgba(255,255,255,.08)); } #app .nav-item.active { background: var(--nav-active-bg, rgba(245,158,11,.18)); color: var(--nav-active-text, var(--color-primary, #f59e0b)); } } /* ════════════════════════════════════════════════════════════════════════════ LIGHT FAMILY STRUCTURAL PATTERNS ════════════════════════════════════════════════════════════════════════════ */ body[data-site-theme="classic"], body[data-site-theme="frost"], body[data-site-theme="sand"], body[data-site-theme="dawn"], body[data-site-theme="mintlight"], body[data-site-theme="rosepaper"], body[data-site-theme="mediumlight"] { /* ────────────────────────────────────────────────────────────────────────── CARDS (Light variant: subtle shadows) ────────────────────────────────────────────────────────────────────────────── */ #app .card { border: 1px solid var(--color-border); border-radius: var(--card-radius, var(--radius-md, 4px)); background: var(--card-bg, var(--color-surface)); box-shadow: 0 1px 3px rgba(0,0,0,.04); transition: border-color 0.15s ease, box-shadow 0.15s ease; } #app .card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.08); } /* ────────────────────────────────────────────────────────────────────────── TABLES (Light variant: lighter striping) ────────────────────────────────────────────────────────────────────────────── */ #app table th { background: var(--table-header-bg, var(--color-surface)); color: var(--color-text-muted); font-size: var(--text-xs, 11px); font-weight: var(--weight-semibold, 600); text-transform: uppercase; letter-spacing: 0.5px; padding: var(--space-sm, 8px) var(--space-md, 12px); border-bottom: 1px solid var(--color-border); position: sticky; top: 0; z-index: 2; } #app table td { padding: var(--space-sm, 8px) var(--space-md, 12px); font-size: var(--text-sm, 12px); border-bottom: 1px solid var(--table-border, rgba(0,0,0,.06)); color: var(--color-text); } #app table tbody tr:hover td { background: var(--table-row-hover, rgba(0,0,0,.02)); } #app table tbody tr:nth-child(even) td { background: var(--table-stripe, rgba(0,0,0,.015)); } /* ────────────────────────────────────────────────────────────────────────── TABS ────────────────────────────────────────────────────────────────────────────── */ #app .tabs { display: flex; gap: var(--space-xs, 4px); border-bottom: 1px solid var(--color-border); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } #app .tabs::-webkit-scrollbar { display: none; } #app .tab { height: 40px; display: inline-flex; align-items: center; padding: 0 var(--space-lg, 16px); font-size: var(--text-sm, 12px); font-weight: var(--weight-medium, 500); color: var(--color-text-muted); border-bottom: 2px solid transparent; background: none; cursor: pointer; white-space: nowrap; transition: color 0.15s ease, border-color 0.15s ease; } #app .tab:hover { color: var(--color-text); } #app .tab.active { color: var(--color-primary, #f59e0b); border-bottom-color: var(--color-primary, #f59e0b); } /* ────────────────────────────────────────────────────────────────────────── MODALS (Light variant: lighter overlay) ────────────────────────────────────────────────────────────────────────────── */ #app .modal { background: var(--modal-bg, var(--color-bg-2)); border: 1px solid var(--modal-border, var(--color-border)); border-radius: var(--modal-radius, var(--radius-lg, 8px)); box-shadow: var(--modal-shadow, 0 10px 25px rgba(0,0,0,.08)); } /* ────────────────────────────────────────────────────────────────────────── FORM INPUTS (Light variant: lighter focus shadow) ────────────────────────────────────────────────────────────────────────────── */ #app input[type="text"], #app input[type="email"], #app input[type="password"], #app input[type="search"], #app input[type="number"], #app input[type="tel"], #app input[type="url"], #app select, #app textarea { height: var(--field-height, 38px); padding: var(--space-sm, 8px) var(--space-md, 12px); font-size: var(--text-sm, 12px); background: var(--color-field-bg); border: 1px solid var(--color-field-border); border-radius: var(--field-radius, var(--radius-sm, 4px)); color: var(--color-field-text); transition: border-color 0.15s ease, box-shadow 0.15s ease; } #app input[type="text"]:focus, #app input[type="email"]:focus, #app input[type="password"]:focus, #app input[type="search"]:focus, #app input[type="number"]:focus, #app input[type="tel"]:focus, #app input[type="url"]:focus, #app select:focus, #app textarea:focus { border-color: var(--color-primary, #f59e0b); box-shadow: 0 0 0 3px rgba(245,158,11,.12); outline: none; } /* ────────────────────────────────────────────────────────────────────────── KPI PATTERNS ────────────────────────────────────────────────────────────────────────────── */ /* Match KPI TILES only — classes ENDING in "-kpi" (hr-kpi, fin-kpi, ls-kpi …). The old [class*="-kpi"] substring form also matched the INNER label/value spans (ls-kpi-label, ls-kpi-value, sc-held-kpi's children) and boxed each text span with a border + surface background — the documented themes.css substring-leak incident. */ #app [class$="-kpi"], #app [class*="-kpi "] { border-radius: var(--radius-md, 4px); border: 1px solid var(--color-border); background: var(--color-surface); } /* ────────────────────────────────────────────────────────────────────────── STATUS BADGES ────────────────────────────────────────────────────────────────────────────── */ #app .badge, #app .status-badge { font-size: var(--badge-font-size, 11px); font-weight: var(--badge-font-weight, 500); padding: var(--badge-padding, 2px 10px); border-radius: var(--badge-radius, 9999px); } /* ────────────────────────────────────────────────────────────────────────── SIDEBAR NAV ITEMS ────────────────────────────────────────────────────────────────────────────── */ #app .nav-item { padding: var(--nav-item-padding, var(--space-sm, 8px) var(--space-md, 12px)); border-radius: var(--nav-item-radius, var(--radius-sm, 4px)); transition: background 0.15s ease; } #app .nav-item:hover { background: var(--nav-item-hover, rgba(0,0,0,.04)); } #app .nav-item.active { background: var(--nav-active-bg, rgba(245,158,11,.1)); color: var(--nav-active-text, var(--color-primary, #f59e0b)); } } /* ════════════════════════════════════════════════════════════════════════════ THEME-AWARE CONTRAST HELPERS ════════════════════════════════════════════════════════════════════════════ */ /* Auto-detect theme family and apply correct text contrast */ [data-theme-family="dark"] .on-surface { color: var(--color-text); } [data-theme-family="light"] .on-surface { color: var(--color-text); } /* ════════════════════════════════════════════════════════════════════════════ PHASE 7: DARK/LIGHT FAMILY — New component polish Ensures all Phase 5-6 components render correctly across all 15 themes ════════════════════════════════════════════════════════════════════════════ */ /* ─── Dark family: User dropdown, notification tabs, favorites ──────────── */ [data-theme-family="dark"] .topbar-user-dropdown { background: var(--color-surface, rgba(15, 19, 32, 0.98)); border-color: var(--color-border, rgba(255, 255, 255, 0.1)); backdrop-filter: blur(12px); } [data-theme-family="dark"] .topbar-user-dropdown-item:hover { background: rgba(255, 255, 255, 0.06); } [data-theme-family="dark"] .topbar-notify-tab.active { background: var(--color-primary); color: #fff; } [data-theme-family="dark"] .role-kpi-trend.trend-up { background: rgba(39, 174, 96, 0.15); } [data-theme-family="dark"] .role-kpi-trend.trend-down { background: rgba(231, 76, 60, 0.15); } [data-theme-family="dark"] .sidebar-favorites { border-bottom-color: rgba(255, 255, 255, 0.06); } /* ─── Light family: User dropdown, notification tabs, favorites ─────────── */ [data-theme-family="light"] .topbar-user-dropdown { background: var(--color-bg, #ffffff); border-color: var(--color-border, rgba(0, 0, 0, 0.12)); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); } [data-theme-family="light"] .topbar-user-dropdown-header { border-bottom-color: var(--color-border, rgba(0, 0, 0, 0.08)); } [data-theme-family="light"] .topbar-user-dropdown-name { color: var(--color-text, #1a1a2e); } [data-theme-family="light"] .topbar-user-dropdown-item { color: var(--color-text, #333); } [data-theme-family="light"] .topbar-user-dropdown-item:hover { background: rgba(0, 0, 0, 0.04); } [data-theme-family="light"] .topbar-user-dropdown-item .material-symbols-outlined { color: var(--color-text-muted, #666); } [data-theme-family="light"] .topbar-notify-tab { color: var(--color-text-muted, #666); } [data-theme-family="light"] .topbar-notify-tab:hover { background: rgba(0, 0, 0, 0.04); color: var(--color-text, #333); } [data-theme-family="light"] .topbar-notify-tab.active { background: var(--color-primary); color: #fff; } [data-theme-family="light"] .role-kpi-trend.trend-up { color: #1a8c45; background: rgba(39, 174, 96, 0.1); } [data-theme-family="light"] .role-kpi-trend.trend-down { color: #c0392b; background: rgba(231, 76, 60, 0.1); } [data-theme-family="light"] .sidebar-favorites { border-bottom-color: rgba(0, 0, 0, 0.08); } [data-theme-family="light"] .sidebar-favorites-empty { color: var(--color-text-muted, #999); } [data-theme-family="light"] .topbar-avatar { background: var(--color-primary, #f59e0b); } /* ═══════════════════════════════════════════════════════════════════════════ LUXIS (POS) — Module-scoped brand styles Applied when the POS section is active. Uses gold/warm palette. ═══════════════════════════════════════════════════════════════════════════ */ /* Branded module header */ #section-pos .luxis-brand-header { display: flex; align-items: center; gap: 12px; padding: 16px 24px; margin: -28px -28px 24px -28px; background: radial-gradient(800px 300px at 5% 50%, rgba(212, 168, 75, .12) 0%, transparent 70%), var(--surface-2, rgba(24,30,40,.78)); border-bottom: 1px solid var(--luxis-border); } #section-pos .luxis-brand-header .luxis-brand-icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--luxis-gold), var(--luxis-gold-dark)); border-radius: var(--radius-md); color: #fff; font-size: 20px; box-shadow: var(--luxis-glow); } #section-pos .luxis-brand-header .luxis-brand-name { font-size: var(--text-2xl); font-weight: var(--weight-bold); color: var(--luxis-gold); letter-spacing: .5px; } #section-pos .luxis-brand-header .luxis-brand-sub { font-size: var(--text-sm); color: var(--color-text-muted); margin-left: auto; } /* Luxis accent overrides within POS module */ #section-pos .pos-btn-pay, #section-pos .btn-primary { background: linear-gradient(135deg, var(--luxis-gold), var(--luxis-gold-dark)) !important; border-color: rgba(212, 168, 75, .4) !important; color: #fff !important; } #section-pos .pos-btn-pay:hover, #section-pos .btn-primary:hover { background: linear-gradient(135deg, var(--luxis-gold-light), var(--luxis-gold)) !important; box-shadow: var(--luxis-glow) !important; } #section-pos .pos-kpi-strip .kpi-value { color: var(--luxis-gold); } #section-pos .pos-terminal-bar { border-bottom-color: var(--luxis-border); } /* Sidebar active state for POS nav item */ .nav-item[data-brand="luxis"].active, .nav-item[data-brand="luxis"]:hover { border-left: 3px solid var(--luxis-gold) !important; } .nav-item[data-brand="luxis"] .luxis-nav-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--luxis-gold); display: inline-block; margin-left: auto; box-shadow: 0 0 6px rgba(212, 168, 75, .5); } /* ── Luxis Constellation Screensaver ── */ .luxis-ss { position: fixed; inset: 0; z-index: 9999; background: #08080e; opacity: 0; transition: opacity 0.8s ease; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; } .luxis-ss.active { opacity: 1; } .luxis-ss.fading-out { opacity: 0; } .luxis-ss canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; } /* Corner accents */ .luxis-ss-corner { position: absolute; z-index: 10; opacity: 0.15; } .luxis-ss-corner svg { width: 60px; height: 60px; } .luxis-ss-corner-tl { top: 30px; left: 30px; } .luxis-ss-corner-tr { top: 30px; right: 30px; transform: scaleX(-1); } .luxis-ss-corner-bl { bottom: 30px; left: 30px; transform: scaleY(-1); } .luxis-ss-corner-br { bottom: 30px; right: 30px; transform: scale(-1, -1); } /* Top watermark */ .luxis-ss-watermark { position: absolute; top: 36px; left: 50%; transform: translateX(-50%); z-index: 10; font-size: 9px; letter-spacing: 4px; text-transform: uppercase; color: rgba(212,168,75,0.12); font-weight: 300; } /* Central brand cluster */ .luxis-ss-brand { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; text-align: center; pointer-events: none; } .luxis-ss-hex-frame { width: 100px; height: 100px; margin: 0 auto 28px; position: relative; display: flex; align-items: center; justify-content: center; } .luxis-ss-hex-frame svg { position: absolute; width: 100%; height: 100%; animation: luxisSSHexRotate 20s linear infinite; } @keyframes luxisSSHexRotate { to { transform: rotate(360deg); } } .luxis-ss-diamond { width: 28px; height: 28px; background: linear-gradient(135deg, #E8C97A, #D4A84B); transform: rotate(45deg); box-shadow: 0 0 20px rgba(212,168,75,0.4); position: relative; z-index: 2; animation: luxisSSDiamondPulse 3s ease-in-out infinite; } @keyframes luxisSSDiamondPulse { 0%, 100% { box-shadow: 0 0 20px rgba(212,168,75,0.4); transform: rotate(45deg) scale(1); } 50% { box-shadow: 0 0 40px rgba(212,168,75,0.6); transform: rotate(45deg) scale(1.05); } } .luxis-ss-title { font-size: 42px; font-weight: 200; letter-spacing: 14px; text-transform: uppercase; color: var(--luxis-gold, #D4A84B); margin-bottom: 6px; opacity: 0.9; } .luxis-ss-separator { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 14px 0; } .luxis-ss-sep-line { width: 40px; height: 1px; background: linear-gradient(90deg, transparent, rgba(212,168,75,0.3)); } .luxis-ss-sep-line:last-child { background: linear-gradient(90deg, rgba(212,168,75,0.3), transparent); } .luxis-ss-sep-dot { width: 5px; height: 5px; background: rgba(212,168,75,0.4); transform: rotate(45deg); } .luxis-ss-motto { font-size: 11px; letter-spacing: 5px; text-transform: uppercase; color: rgba(212,168,75,0.3); font-weight: 300; } /* Clock */ .luxis-ss-clock { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); z-index: 10; text-align: center; } .luxis-ss-time { font-size: 20px; font-weight: 200; color: rgba(212,168,75,0.4); letter-spacing: 8px; } .luxis-ss-date { font-size: 10px; color: rgba(212,168,75,0.2); letter-spacing: 3px; text-transform: uppercase; margin-top: 4px; } /* Wake hint */ .luxis-ss-hint { position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%); z-index: 10; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: rgba(212,168,75,0.15); font-weight: 300; animation: luxisSSHintPulse 3s ease-in-out infinite; } @keyframes luxisSSHintPulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.8; } } /* ── Solstice Orbital Screensaver ── Centering strategy: grid + place-items:center is the primary centering mechanism (independent of ancestor stacking contexts). Content also uses its own translate() for precise sub-pixel alignment. The SolsticeScreensaver.show() function re-parents this overlay to on activation so no transformed/filtered ancestor can ever create a containing block that reframes position:fixed. Belt AND suspenders. */ .solstice-ss { position: fixed; inset: 0; /* Must sit above the Solstice touch keyboard (z-index 100000) so that the screensaver overlays the keyboard when idle, not the other way around. */ z-index: 200000; display: grid; place-items: center; /* Translucent charcoal so the blur shows through — obscures anything visible on the floor/PWA screen from wandering eyes. */ background: radial-gradient(ellipse at center, rgba(212,135,10,0.04) 0%, rgba(12,12,16,0) 55%), rgba(10,10,14,0.78); backdrop-filter: blur(32px) saturate(130%); -webkit-backdrop-filter: blur(32px) saturate(130%); opacity: 0; transition: opacity 0.9s cubic-bezier(0.22,0.61,0.36,1); font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; } .solstice-ss.active { opacity: 1; } .solstice-ss.fading-out { opacity: 0; } .solstice-ss canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; } /* Corner accents */ .solstice-ss-corner { position: absolute; z-index: 10; opacity: 0.15; } .solstice-ss-corner svg { width: 60px; height: 60px; } .solstice-ss-corner-tl { top: 30px; left: 30px; } .solstice-ss-corner-tr { top: 30px; right: 30px; transform: scaleX(-1); } .solstice-ss-corner-bl { bottom: 30px; left: 30px; transform: scaleY(-1); } .solstice-ss-corner-br { bottom: 30px; right: 30px; transform: scale(-1, -1); } /* Top watermark */ .solstice-ss-watermark { position: absolute; top: 36px; left: 50%; transform: translateX(-50%); z-index: 10; font-size: 9px; letter-spacing: 4px; text-transform: uppercase; color: rgba(212,135,10,0.12); font-weight: 300; } /* Centered content wrapper — grid-item on .solstice-ss, so centering comes from the parent's place-items:center. No absolute positioning, no top/left math, nothing that can drift when ancestors change. */ .solstice-ss-content { position: relative; grid-column: 1; grid-row: 1; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(24px, 3.5vh, 44px); text-align: center; pointer-events: none; width: max-content; max-width: 90vw; /* Subtle entrance: fade in with a slow breath-scale from the center */ animation: solsticeSSEntrance 1.6s cubic-bezier(0.22,0.61,0.36,1) both; } @keyframes solsticeSSEntrance { from { opacity: 0; transform: scale(0.96); filter: blur(6px); } to { opacity: 1; transform: scale(1); filter: blur(0); } } /* Central brand */ .solstice-ss-brand { position: relative; z-index: 10; text-align: center; pointer-events: none; } /* Sun frame with orbital arcs — scales with viewport, soft ambient halo */ .solstice-ss-sun-frame { width: clamp(120px, 18vmin, 200px); height: clamp(120px, 18vmin, 200px); margin: 0 auto clamp(18px, 2.4vh, 32px); position: relative; display: flex; align-items: center; justify-content: center; } /* Soft ambient halo behind the sun — larger, blurred, slowly breathing */ .solstice-ss-sun-frame::before { content: ""; position: absolute; inset: -40%; border-radius: 50%; background: radial-gradient(circle, rgba(240,184,77,0.12) 0%, rgba(212,135,10,0.06) 35%, transparent 70%); filter: blur(12px); animation: solsticeSSHalo 7s ease-in-out infinite; pointer-events: none; } @keyframes solsticeSSHalo { 0%, 100% { opacity: 0.8; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } } .solstice-ss-orbits { position: absolute; width: 100%; height: 100%; animation: solsticeSSOrbitSpin 40s linear infinite; } @keyframes solsticeSSOrbitSpin { to { transform: rotate(360deg); } } .solstice-ss-sun { width: clamp(28px, 4.2vmin, 48px); height: clamp(28px, 4.2vmin, 48px); border-radius: 50%; background: radial-gradient(circle at 38% 38%, #FCD07A 0%, #F0B84D 35%, #D4870A 70%, #8B5500 100%); box-shadow: 0 0 20px rgba(240,184,77,0.6), 0 0 60px rgba(212,135,10,0.35), 0 0 120px rgba(212,135,10,0.12), inset 0 0 8px rgba(255,230,180,0.4); position: relative; z-index: 2; animation: solsticeSSCorePulse 5s ease-in-out infinite; } @keyframes solsticeSSCorePulse { 0%, 100% { box-shadow: 0 0 20px rgba(240,184,77,0.55), 0 0 60px rgba(212,135,10,0.30), 0 0 120px rgba(212,135,10,0.10), inset 0 0 8px rgba(255,230,180,0.35); transform: scale(1); } 50% { box-shadow: 0 0 32px rgba(240,184,77,0.75), 0 0 90px rgba(212,135,10,0.42), 0 0 160px rgba(212,135,10,0.16), inset 0 0 10px rgba(255,230,180,0.5); transform: scale(1.05); } } .solstice-ss-title { font-size: clamp(32px, 5.2vmin, 64px); font-weight: 200; letter-spacing: clamp(10px, 1.6vmin, 18px); text-transform: uppercase; background: linear-gradient(180deg, #FCD07A 0%, #F0B84D 30%, #D4870A 65%, #7A4A00 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; margin-bottom: 6px; } .solstice-ss-separator { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 14px 0; } .solstice-ss-sep-line { width: 40px; height: 1px; background: linear-gradient(90deg, transparent, rgba(212,135,10,0.3)); } .solstice-ss-sep-line-r { background: linear-gradient(90deg, rgba(212,135,10,0.3), transparent); } .solstice-ss-sep-sun-dot { width: 6px; height: 6px; background: radial-gradient(circle, #E8A33C, #D4870A); border-radius: 50%; box-shadow: 0 0 6px rgba(212,135,10,0.4); } .solstice-ss-motto { font-size: clamp(10px, 1.3vmin, 13px); letter-spacing: clamp(4px, 0.6vmin, 7px); text-transform: uppercase; color: rgba(212,135,10,0.35); font-weight: 300; } /* Clock — flows inside .solstice-ss-content, stays centered with brand */ .solstice-ss-clock { position: relative; z-index: 10; text-align: center; } .solstice-ss-time { font-size: clamp(18px, 2.4vmin, 28px); font-weight: 200; color: rgba(240,184,77,0.45); letter-spacing: clamp(6px, 1vmin, 10px); font-variant-numeric: tabular-nums; } .solstice-ss-date { font-size: clamp(9px, 1.1vmin, 11px); color: rgba(212,135,10,0.25); letter-spacing: clamp(2.5px, 0.4vmin, 4px); text-transform: uppercase; margin-top: 6px; } /* Wake hint — flows inside .solstice-ss-content, stays centered with brand */ .solstice-ss-hint { position: relative; z-index: 10; font-size: clamp(10px, 1.3vmin, 13px); letter-spacing: clamp(2.5px, 0.4vmin, 4px); text-transform: uppercase; color: rgba(212,135,10,0.18); font-weight: 300; animation: solsticeSSHintPulse 3.4s ease-in-out infinite; } @keyframes solsticeSSHintPulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.85; } } /* Respect user motion preferences — kill the ambient animations but keep the entrance fade so the overlay still feels alive on wake. */ @media (prefers-reduced-motion: reduce) { .solstice-ss-orbits, .solstice-ss-sun, .solstice-ss-sun-frame::before, .solstice-ss-hint { animation: none !important; } .solstice-ss-content { animation-duration: 0.4s; } } /* ═══════════════════════════════════════════════════════════════════════════ SOLSTICE (Player Tracking) — Module-scoped brand styles Applied when Player Tracking / Card Room sections are active. Uses purple/sunset palette. ═══════════════════════════════════════════════════════════════════════════ */ /* Solstice sections — inherit app background for unified look */ #section-card_room, #section-player_tracking { position: relative; overflow-x: hidden; background: var(--color-bg); } /* Giant text watermark removed — replaced by SVG logo watermark in player_tracking.html */ /* Ensure all card room content sits above the watermark */ #section-card_room > *, #section-player_tracking > * { position: relative; z-index: 1; } /* Legacy brand header (keep for player_tracking if still using it) */ .solstice-brand-header { display: flex; align-items: center; gap: 12px; padding: 16px 24px; margin: -28px -28px 24px -28px; background: radial-gradient(800px 300px at 5% 50%, rgba(212, 135, 10, .14) 0%, transparent 70%), radial-gradient(600px 250px at 95% 50%, rgba(232, 115, 74, .08) 0%, transparent 70%), var(--surface-2, rgba(24,30,40,.78)); border-bottom: 1px solid var(--solstice-border); } .solstice-brand-header .solstice-brand-icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--solstice-purple), var(--solstice-sunset)); border-radius: var(--radius-md); color: #fff; font-size: 20px; box-shadow: var(--solstice-glow); } .solstice-brand-header .solstice-brand-name { font-size: var(--text-2xl); font-weight: var(--weight-bold); background: linear-gradient(135deg, var(--solstice-purple-light), var(--solstice-sunset)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: .5px; } .solstice-brand-header .solstice-brand-sub { font-size: var(--text-sm); color: var(--color-text-muted); margin-left: auto; } /* Solstice accent overrides within Player Tracking module */ #section-player_tracking .btn-primary, #section-card_room .btn-primary { background: linear-gradient(135deg, var(--solstice-purple), var(--solstice-purple-light)) !important; border-color: rgba(212, 135, 10, .4) !important; color: #fff !important; } #section-player_tracking .btn-primary:hover, #section-card_room .btn-primary:hover { box-shadow: var(--solstice-glow) !important; } /* Player tier badges with Solstice gradient */ #section-player_tracking .tier-badge-platinum, #section-card_room .tier-badge-platinum { background: linear-gradient(135deg, var(--solstice-purple), var(--solstice-sunset)); color: #fff; padding: 2px 10px; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--weight-semibold); } #section-player_tracking .tier-badge-gold, #section-card_room .tier-badge-gold { background: linear-gradient(135deg, var(--luxis-gold), var(--luxis-gold-dark)); color: #fff; padding: 2px 10px; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--weight-semibold); } /* Sidebar active state for Solstice nav items */ .nav-item[data-brand="solstice"].active, .nav-item[data-brand="solstice"]:hover { border-left: 3px solid var(--solstice-purple) !important; } .nav-item[data-brand="solstice"] .solstice-nav-dot { width: 6px; height: 6px; border-radius: 50%; background: linear-gradient(135deg, var(--solstice-purple), var(--solstice-sunset)); display: inline-block; margin-left: auto; box-shadow: 0 0 6px rgba(212, 135, 10, .5); } /* ═══════════════════════════════════════════════════════════════════════════ DATA CROSSOVER INDICATORS When Luxis data appears in Solstice views (and vice versa), these micro-indicators show the data source. ═══════════════════════════════════════════════════════════════════════════ */ /* Gold diamond: Luxis data appearing in Solstice context */ .crossover-luxis { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); color: var(--luxis-gold); opacity: .7; } .crossover-luxis::before { content: ''; width: 8px; height: 8px; background: var(--luxis-gold); transform: rotate(45deg); display: inline-block; border-radius: 1px; } .crossover-luxis:hover { opacity: 1; } .crossover-luxis:hover::after { content: 'Luxis POS'; font-size: 10px; background: var(--luxis-dark); color: var(--luxis-gold); padding: 2px 6px; border-radius: var(--radius-sm); margin-left: 4px; white-space: nowrap; } /* Purple arc: Solstice data appearing in Luxis context */ .crossover-solstice { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); color: var(--solstice-purple-light); opacity: .7; } .crossover-solstice::before { content: ''; width: 10px; height: 5px; border: 2px solid var(--solstice-purple); border-bottom: none; border-radius: 10px 10px 0 0; display: inline-block; } .crossover-solstice:hover { opacity: 1; } .crossover-solstice:hover::after { content: 'Solstice Player'; font-size: 10px; background: var(--solstice-deep); color: var(--solstice-purple-light); padding: 2px 6px; border-radius: var(--radius-sm); margin-left: 4px; white-space: nowrap; } /* ═══════════════════════════════════════════════════════════════════════════ LIGHT THEME OVERRIDES for Luxis & Solstice ═══════════════════════════════════════════════════════════════════════════ */ [data-theme-family="light"] #section-pos .luxis-brand-header { background: radial-gradient(800px 300px at 5% 50%, rgba(212, 168, 75, .08) 0%, transparent 70%), #F8F6F2; border-bottom-color: rgba(212, 168, 75, .2); } [data-theme-family="light"] #section-pos .luxis-brand-header .luxis-brand-name { color: var(--luxis-gold-dark); } /* Light theme giant text watermark also removed */ [data-theme-family="light"] .solstice-brand-header { background: radial-gradient(800px 300px at 5% 50%, rgba(212, 135, 10, .08) 0%, transparent 70%), #F6F4F9; border-bottom-color: rgba(212, 135, 10, .15); } [data-theme-family="light"] .crossover-luxis:hover::after { background: #FFF8E8; color: var(--luxis-gold-dark); } [data-theme-family="light"] .crossover-solstice:hover::after { background: #F3EEF9; color: var(--solstice-p