/* ═══════════════════════════════════════════════════════════════════ يشفيني — Panel-wide 6-theme system for the Filament admin panels. Loaded on every panel page via the STYLES_AFTER render hook (each PanelProvider), AFTER Filament's :root color variables, so these overrides win the cascade. Plain CSS, ZERO build step. How it works: • Each theme sets Filament's --gray-* ramp (R,G,B triplets) and, for the non-default themes, the --primary-* accent ramp. • A small set of --adm-* tokens (bg / surface / button / link / logo) is read by the component rules at the bottom — so adding a theme is just one variable block, no rule duplication. • Dark themes INVERT the gray ramp (50 = darkest page bg … 950 = lightest text) which is how Filament's light-mode layout is recolored to a dark skin without a custom build. • The active theme is chosen by , set from localStorage by the bootstrap script (registered as a render hook). ═══════════════════════════════════════════════════════════════════ */ /* ━━━ Default = Sunrise Warm (cream + olive/gold). Primary olive comes from PHP Color::hex('#6B8E23'); only the gray ramp + tokens here. ━━━ */ :root, :root[data-theme='sunrise-warm'] { --gray-50: 250, 245, 240; --gray-100: 245, 239, 234; --gray-200: 232, 220, 208; --gray-300: 212, 196, 184; --gray-400: 156, 143, 136; --gray-500: 107, 93, 86; --gray-600: 90, 77, 70; --gray-700: 74, 63, 56; --gray-800: 58, 47, 42; --gray-900: 46, 37, 32; --gray-950: 33, 26, 22; --adm-bg: #FDF8F0; --adm-surface: #FFFBF5; --adm-btn-start: #C8860D; --adm-btn-end: #8B6914; --adm-btn-text: #FFFFFF; --adm-link: #8B6914; --adm-link-hover: #C8860D; --adm-logo: #8B6914; } /* ━━━ Original Signature (الأخضر الذهبي) — forest green + gold (dark) ━━━ */ :root[data-theme='original-signature'] { --gray-50: 23, 56, 33; --gray-100: 31, 71, 44; --gray-200: 42, 80, 55; --gray-300: 58, 107, 82; --gray-400: 127, 160, 144; --gray-500: 181, 204, 190; --gray-600: 200, 220, 208; --gray-700: 220, 235, 226; --gray-800: 240, 247, 243; --gray-900: 250, 252, 250; --gray-950: 255, 255, 255; --primary-50: 234, 244, 238; --primary-100: 209, 230, 219; --primary-200: 166, 207, 186; --primary-300: 116, 178, 148; --primary-400: 74, 148, 114; --primary-500: 43, 106, 75; --primary-600: 34, 87, 61; --primary-700: 30, 74, 52; --primary-800: 26, 60, 43; --primary-900: 23, 50, 36; --primary-950: 12, 30, 21; --adm-bg: #173821; --adm-surface: #1F472C; --adm-btn-start: #3E9B6B; --adm-btn-end: #2B6A4B; --adm-btn-text: #FFFFFF; --adm-link: #E8BB52; --adm-link-hover: #F0C868; --adm-logo: #E8BB52; } /* ━━━ Premium Dark — near-black green + vivid emerald (dark) ━━━ */ :root[data-theme='premium-dark'] { --gray-50: 7, 20, 16; --gray-100: 17, 36, 26; --gray-200: 26, 53, 32; --gray-300: 38, 81, 58; --gray-400: 90, 122, 102; --gray-500: 138, 170, 150; --gray-600: 175, 200, 185; --gray-700: 205, 225, 213; --gray-800: 230, 242, 235; --gray-900: 240, 248, 243; --gray-950: 237, 242, 239; --primary-50: 230, 250, 239; --primary-100: 198, 243, 217; --primary-200: 142, 232, 180; --primary-300: 86, 219, 143; --primary-400: 52, 211, 121; --primary-500: 46, 204, 113; --primary-600: 39, 174, 96; --primary-700: 33, 140, 78; --primary-800: 28, 110, 62; --primary-900: 24, 90, 52; --primary-950: 11, 50, 28; --adm-bg: #071410; --adm-surface: #11241A; --adm-btn-start: #2ECC71; --adm-btn-end: #27AE60; --adm-btn-text: #071410; --adm-link: #34D399; --adm-link-hover: #6EE7B7; --adm-logo: #F0C040; } /* ━━━ Classic Forest — white + emerald (light) ━━━ */ :root[data-theme='classic-forest'] { --gray-50: 244, 249, 245; --gray-100: 240, 247, 242; --gray-200: 212, 228, 216; --gray-300: 192, 212, 200; --gray-400: 138, 163, 148; --gray-500: 82, 109, 92; --gray-600: 60, 85, 70; --gray-700: 40, 60, 48; --gray-800: 30, 48, 38; --gray-900: 26, 45, 34; --gray-950: 15, 28, 21; --primary-50: 230, 248, 238; --primary-100: 200, 240, 217; --primary-200: 150, 224, 184; --primary-300: 96, 205, 145; --primary-400: 57, 190, 116; --primary-500: 39, 174, 96; --primary-600: 30, 132, 73; --primary-700: 25, 106, 59; --primary-800: 21, 85, 48; --primary-900: 18, 70, 40; --primary-950: 8, 40, 22; --adm-bg: #F4F9F5; --adm-surface: #FFFFFF; --adm-btn-start: #27AE60; --adm-btn-end: #1E8449; --adm-btn-text: #FFFFFF; --adm-link: #1E8449; --adm-link-hover: #27AE60; --adm-logo: #1E8449; } /* ━━━ Royal Emerald — deep jewel teal-green + emerald (dark) ━━━ */ :root[data-theme='royal-emerald'] { --gray-50: 11, 30, 24; --gray-100: 19, 46, 40; --gray-200: 26, 72, 64; --gray-300: 34, 88, 96; --gray-400: 127, 179, 196; --gray-500: 167, 216, 222; --gray-600: 195, 230, 235; --gray-700: 220, 242, 245; --gray-800: 235, 248, 250; --gray-900: 245, 251, 253; --gray-950: 240, 249, 255; --primary-50: 224, 250, 241; --primary-100: 185, 245, 224; --primary-200: 122, 232, 197; --primary-300: 67, 215, 168; --primary-400: 22, 197, 142; --primary-500: 16, 185, 129; --primary-600: 5, 150, 105; --primary-700: 4, 120, 87; --primary-800: 6, 95, 70; --primary-900: 6, 78, 59; --primary-950: 2, 44, 34; --adm-bg: #0B1E18; --adm-surface: #132E28; --adm-btn-start: #10B981; --adm-btn-end: #059669; --adm-btn-text: #03261C; --adm-link: #34D399; --adm-link-hover: #6EE7B7; --adm-logo: #FCD34D; } /* ━━━ Clinical Light — clean white-blue + teal (light) ━━━ */ :root[data-theme='clinical-light'] { --gray-50: 248, 250, 251; --gray-100: 240, 253, 250; --gray-200: 226, 232, 240; --gray-300: 203, 213, 225; --gray-400: 148, 163, 184; --gray-500: 71, 85, 105; --gray-600: 51, 65, 85; --gray-700: 30, 41, 59; --gray-800: 20, 28, 45; --gray-900: 15, 23, 42; --gray-950: 8, 12, 24; --primary-50: 224, 250, 247; --primary-100: 183, 244, 238; --primary-200: 122, 232, 222; --primary-300: 67, 215, 203; --primary-400: 26, 197, 184; --primary-500: 20, 184, 166; --primary-600: 13, 148, 136; --primary-700: 15, 118, 110; --primary-800: 17, 94, 89; --primary-900: 19, 78, 74; --primary-950: 4, 47, 46; --adm-bg: #F8FAFB; --adm-surface: #FFFFFF; --adm-btn-start: #14B8A6; --adm-btn-end: #0D9488; --adm-btn-text: #FFFFFF; --adm-link: #0D9488; --adm-link-hover: #14B8A6; --adm-logo: #0D9488; } /* ━━━━━━━━━ Component rules — read the active theme's --adm-* tokens ━━━━━━━ */ /* Body canvas. */ .fi-body { background-color: var(--adm-bg); } /* White surfaces (cards, tables, topbar, modals, dropdowns) → theme surface. Keeps full component readability on light AND dark skins. */ .fi-body .bg-white { background-color: var(--adm-surface); } /* Primary buttons: themed gradient. background-image layers over the palette background-color, so hover/disabled states stay sane. */ .fi-btn-color-primary { background-image: linear-gradient(180deg, var(--adm-btn-start) 0%, var(--adm-btn-end) 100%); --tw-text-opacity: 1; color: var(--adm-btn-text); } .fi-btn-color-primary:hover { filter: brightness(1.08); } .fi-btn-color-primary:active { transform: translateY(1px); } /* Primary links → themed accent. */ .fi-link-color-primary { color: var(--adm-link); } .fi-link-color-primary:hover { color: var(--adm-link-hover); } /* Brand name in the themed display tone. */ .fi-logo { color: var(--adm-logo); }