/* ═══════════════════════════════════════════════════════════════ KARIBU — Color Themes Usage: add a theme class to , e.g. :root in styles.css holds Obsidian Gold as the default. ═══════════════════════════════════════════════════════════════ */ /* 1. OBSIDIAN GOLD (default — matches :root) */ .theme-obsidian, body.theme-obsidian { --sb-bg:#1C1208;--sb-text:rgba(255,255,255,0.62);--sb-active:rgba(201,168,76,0.18); --sb-hover:rgba(255,255,255,0.06);--sb-lbl:rgba(255,255,255,0.26);--sb-border:rgba(255,255,255,0.07); --gold:#C9A84C;--gold-mid:#D4B76A;--gold-light:#F6EDD3;--gold-dark:#8A6B1E; --cream:#F5F0E8;--cream2:#EDE7DB;--cream3:#E2D9CC;--w:#FFFFFF; --b:#1C1208;--bm:#4A3F35;--bl:#7A6E60;--hint:#A89F97; --brd:#E8E0D2;--brd2:#D0C5B8; --green:#1A8F5A;--green-light:#E0F5EC;--red:#C93B3B;--red-light:#FDEAEA; --blue:#2460A4;--blue-light:#E5EFFA;--amber:#A86A10;--amber-light:#FDF0D5; } /* 2. DEEP OCEAN */ .theme-ocean, body.theme-ocean { --sb-bg:#0B1929;--sb-text:rgba(255,255,255,0.60);--sb-active:rgba(56,160,220,0.18); --sb-hover:rgba(255,255,255,0.06);--sb-lbl:rgba(255,255,255,0.25);--sb-border:rgba(255,255,255,0.07); --gold:#38A0DC;--gold-mid:#5BB8E8;--gold-light:#E3F3FC;--gold-dark:#1A6FA0; --cream:#F0F4F8;--cream2:#E2EAF2;--cream3:#D0DCE8;--w:#FFFFFF; --b:#0F1E2E;--bm:#2A4560;--bl:#5E7A92;--hint:#90AAC0; --brd:#DDE5EE;--brd2:#C8D5E2; --green:#1A9B6A;--green-light:#DCFBF0;--red:#D03A3A;--red-light:#FDEAEA; --blue:#2460A4;--blue-light:#E5EFFA;--amber:#B07820;--amber-light:#FDF3DC; } /* 3. FOREST NOIR */ .theme-forest, body.theme-forest { --sb-bg:#0F1A13;--sb-text:rgba(255,255,255,0.58);--sb-active:rgba(60,160,90,0.20); --sb-hover:rgba(255,255,255,0.06);--sb-lbl:rgba(255,255,255,0.24);--sb-border:rgba(255,255,255,0.07); --gold:#3CA05A;--gold-mid:#5BBD78;--gold-light:#E2F5E9;--gold-dark:#1E6636; --cream:#F2F5F0;--cream2:#E4EBE2;--cream3:#D4DDD2;--w:#FFFFFF; --b:#0F1A13;--bm:#2A4230;--bl:#5E7460;--hint:#90A892; --brd:#DDE8DB;--brd2:#C8D8C6; --green:#1A8F5A;--green-light:#E0F5EC;--red:#C93B3B;--red-light:#FDEAEA; --blue:#2460A4;--blue-light:#E5EFFA;--amber:#A07820;--amber-light:#FDF3DC; } /* 4. ROUGE IMPÉRIAL */ .theme-rouge, body.theme-rouge { --sb-bg:#1A0A0A;--sb-text:rgba(255,255,255,0.60);--sb-active:rgba(196,58,58,0.18); --sb-hover:rgba(255,255,255,0.06);--sb-lbl:rgba(255,255,255,0.24);--sb-border:rgba(255,255,255,0.07); --gold:#C43A3A;--gold-mid:#D46060;--gold-light:#FCEAEA;--gold-dark:#8A1A1A; --cream:#F7F2F2;--cream2:#EEE0E0;--cream3:#E2CCCC;--w:#FFFFFF; --b:#1A0A0A;--bm:#4A2020;--bl:#7A5454;--hint:#A88888; --brd:#EAD8D8;--brd2:#D8C0C0; --green:#1A8F5A;--green-light:#E0F5EC;--red:#C43A3A;--red-light:#FCEAEA; --blue:#2460A4;--blue-light:#E5EFFA;--amber:#A07820;--amber-light:#FDF3DC; } /* 5. SAHARA DUSK */ .theme-sahara, body.theme-sahara { --sb-bg:#1E120A;--sb-text:rgba(255,255,255,0.60);--sb-active:rgba(210,110,50,0.20); --sb-hover:rgba(255,255,255,0.06);--sb-lbl:rgba(255,255,255,0.24);--sb-border:rgba(255,255,255,0.07); --gold:#D26E32;--gold-mid:#E08A54;--gold-light:#FCE9DB;--gold-dark:#8C3C10; --cream:#F7F0E8;--cream2:#EEE2D4;--cream3:#E2D0BC;--w:#FFFFFF; --b:#1E120A;--bm:#4A3020;--bl:#7A5E44;--hint:#A8907A; --brd:#EBD9C8;--brd2:#D8C0A8; --green:#2A8F52;--green-light:#E0F5EC;--red:#C93B3B;--red-light:#FDEAEA; --blue:#2460A4;--blue-light:#E5EFFA;--amber:#D26E32;--amber-light:#FCE9DB; } /* 6. ARCTIC SLATE */ .theme-arctic, body.theme-arctic { --sb-bg:#1A1F28;--sb-text:rgba(255,255,255,0.58);--sb-active:rgba(100,140,220,0.18); --sb-hover:rgba(255,255,255,0.06);--sb-lbl:rgba(255,255,255,0.24);--sb-border:rgba(255,255,255,0.07); --gold:#648CDC;--gold-mid:#80A4E8;--gold-light:#EAF0FB;--gold-dark:#2A4E9A; --cream:#F2F4F7;--cream2:#E4E8EF;--cream3:#D4DAE6;--w:#FFFFFF; --b:#1A1F28;--bm:#2E3848;--bl:#5C6880;--hint:#8C98AE; --brd:#DDE2EC;--brd2:#C8D0E0; --green:#1A9B6A;--green-light:#DCFBF0;--red:#D03A3A;--red-light:#FDEAEA; --blue:#648CDC;--blue-light:#EAF0FB;--amber:#B07820;--amber-light:#FDF3DC; } /* 7. MALACHITE */ .theme-malachite, body.theme-malachite { --sb-bg:#061410;--sb-text:rgba(255,255,255,0.60);--sb-active:rgba(0,168,120,0.20); --sb-hover:rgba(255,255,255,0.06);--sb-lbl:rgba(255,255,255,0.24);--sb-border:rgba(255,255,255,0.07); --gold:#00A878;--gold-mid:#20C090;--gold-light:#DCF5EE;--gold-dark:#006B4C; --cream:#EFF7F3;--cream2:#E0EEE8;--cream3:#CCE4DA;--w:#FFFFFF; --b:#061410;--bm:#1A3A2C;--bl:#406858;--hint:#7AA898; --brd:#D4EBE0;--brd2:#BCDECE; --green:#00A878;--green-light:#DCF5EE;--red:#C93B3B;--red-light:#FDEAEA; --blue:#2460A4;--blue-light:#E5EFFA;--amber:#A07820;--amber-light:#FDF3DC; } /* 8. MIDNIGHT PLUM */ .theme-plum, body.theme-plum { --sb-bg:#130A1C;--sb-text:rgba(255,255,255,0.60);--sb-active:rgba(148,88,200,0.20); --sb-hover:rgba(255,255,255,0.06);--sb-lbl:rgba(255,255,255,0.24);--sb-border:rgba(255,255,255,0.07); --gold:#9458C8;--gold-mid:#AC78DC;--gold-light:#F2E9FC;--gold-dark:#5E2A90; --cream:#F5F0FA;--cream2:#EAE0F4;--cream3:#DCCCEA;--w:#FFFFFF; --b:#130A1C;--bm:#38206A;--bl:#6A5080;--hint:#9A88B0; --brd:#E2D5F0;--brd2:#CCBAE0; --green:#1A9B6A;--green-light:#DCFBF0;--red:#D03A3A;--red-light:#FDEAEA; --blue:#2460A4;--blue-light:#E5EFFA;--amber:#B07820;--amber-light:#FDF3DC; } /* 9. PURE WHITE */ .theme-white, body.theme-white { --sb-bg:#FFFFFF;--sb-text:rgba(0,0,0,0.50);--sb-active:rgba(0,0,0,0.06); --sb-hover:rgba(0,0,0,0.04);--sb-lbl:rgba(0,0,0,0.28);--sb-border:rgba(0,0,0,0.07); --gold:#1A1A1A;--gold-mid:#3A3A3A;--gold-light:#F0F0F0;--gold-dark:#000000; --cream:#F8F8F8;--cream2:#EFEFEF;--cream3:#E4E4E4;--w:#FFFFFF; --b:#0A0A0A;--bm:#2A2A2A;--bl:#707070;--hint:#AAAAAA; --brd:#E8E8E8;--brd2:#D4D4D4; --green:#1A8F5A;--green-light:#E0F5EC;--red:#C93B3B;--red-light:#FDEAEA; --blue:#2460A4;--blue-light:#E5EFFA;--amber:#A86A10;--amber-light:#FDF0D5; } /* White sidebar overrides (light sidebar needs dark text) */ body.theme-white .ni { color: #606060; } body.theme-white .ni:hover { background: #F0F0F0; color: #0A0A0A; } body.theme-white .ni.act { background: #F0F0F0; color: #0A0A0A; } body.theme-white .ni.act::before { background: #0A0A0A; } body.theme-white .nlbl { color: rgba(0,0,0,0.30); } body.theme-white .sb-brand h2 { color: #0A0A0A; } body.theme-white .sb-brand small { color: #707070; } body.theme-white .sb-ft .un { color: #0A0A0A; } body.theme-white .sb-ft .ur { color: #707070; } body.theme-white .av { background: #F0F0F0; color: #0A0A0A; } body.theme-white .sb { border-right: 1px solid #E8E8E8; } body.theme-white .sb-ft { border-top-color: #E8E8E8; } body.theme-white .sb-ico { background: rgba(30,30,30,0.07); } body.theme-white .nbg { background: #0A0A0A; color: #FFFFFF; } body.theme-white .lout { color: #707070; } body.theme-white .lout:hover { background: rgba(201,59,59,0.08); color: #C93B3B; } body.theme-white .mob-header { background: #FFFFFF; color: #0A0A0A; } body.theme-white .mob-header h2 { color: #0A0A0A; } body.theme-white .mob-header small { color: #707070; } body.theme-white .ham { color: #0A0A0A; } /* 10. PITCH BLACK */ .theme-black, body.theme-black { --sb-bg:#000000;--sb-text:rgba(255,255,255,0.52);--sb-active:rgba(255,255,255,0.10); --sb-hover:rgba(255,255,255,0.06);--sb-lbl:rgba(255,255,255,0.22);--sb-border:rgba(255,255,255,0.08); --gold:#E8E8E8;--gold-mid:#FFFFFF;--gold-light:rgba(255,255,255,0.08);--gold-dark:#AAAAAA; --cream:#0F0F0F;--cream2:#1A1A1A;--cream3:#242424;--w:#141414; --b:#F5F5F5;--bm:#CCCCCC;--bl:#888888;--hint:#555555; --brd:#2A2A2A;--brd2:#383838; --green:#28C880;--green-light:rgba(40,200,128,0.12);--red:#E05555;--red-light:rgba(224,85,85,0.12); --blue:#5090E0;--blue-light:rgba(80,144,224,0.12);--amber:#D09030;--amber-light:rgba(208,144,48,0.12); } /* Dark mode surface overrides */ body.theme-black .lscreen { background: #0A0A0A; } body.theme-black .lcard { background: #141414; border-color: #2A2A2A; } body.theme-black .lbtn { background: #E8E8E8; color: #0A0A0A; border-color: #E8E8E8; } body.theme-black .lbtn:hover { background: #FFFFFF; color: #000000; } body.theme-black .lbtn-ghost { background: transparent !important; color: #AAAAAA !important; border-color: #2A2A2A !important; } body.theme-black .lbtn-ghost:hover{ background: #1A1A1A !important; color: #F5F5F5 !important; } body.theme-black .lfld input, body.theme-black .lfld select { background: #1A1A1A; border-color: #2A2A2A; color: #F5F5F5; } body.theme-black .lfld input:focus{ border-color: #E8E8E8; box-shadow: 0 0 0 3px rgba(232,232,232,0.10); } body.theme-black .lfld label { color: #888888; } body.theme-black .lcard h1 { color: #F5F5F5; } body.theme-black .lsub { color: #888888; } body.theme-black #hotelInfoBar { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.10) !important; color: #CCCCCC !important; } body.theme-black .ldivider { color: #444444; } body.theme-black .ldivider::before, body.theme-black .ldivider::after { background: #2A2A2A; } body.theme-black .llogo { background: rgba(255,255,255,0.08); } body.theme-black .llogo svg { stroke: #E8E8E8; } body.theme-black .hd { background: #141414; border-bottom-color: #2A2A2A; } body.theme-black .hd-t { color: #F5F5F5; } body.theme-black .ct { background: #0F0F0F; } body.theme-black .card, body.theme-black .kpi-card { background: #141414; border-color: #2A2A2A; } body.theme-black .tbl th { background: #0F0F0F; color: #555555; border-color: #2A2A2A; } body.theme-black .tbl td { border-color: #1A1A1A; color: #CCCCCC; } body.theme-black .tbl tbody tr:hover td { background: #1A1A1A; } body.theme-black .sin { background: #1A1A1A !important; border-color: #2A2A2A !important; color: #F5F5F5 !important; } body.theme-black .sin:focus { border-color: #E8E8E8 !important; background: #141414 !important; } body.theme-black .ctog { border-color: #2A2A2A; } body.theme-black .ctog button { color: #888888; } body.theme-black .ctog button.act { background: #E8E8E8; color: #0A0A0A; } body.theme-black .ib { border-color: #2A2A2A; color: #888888; } body.theme-black .ib:hover { background: #1A1A1A; } body.theme-black .btn-new { background: #E8E8E8; color: #0A0A0A; } body.theme-black .btn-new:hover { background: #FFFFFF; color: #000000; } body.theme-black .np { background: #141414; border-left-color: #2A2A2A; } body.theme-black .nph { border-bottom-color: #2A2A2A; } body.theme-black .ml { background: #141414; } body.theme-black .cdlg-b { background: #141414; } body.theme-black .cdlg-b h4 { color: #F5F5F5; } body.theme-black .cdlg-b p { color: #888888; } body.theme-black #toast { background: #1A1A1A; border-color: #2A2A2A; color: #F5F5F5; } body.theme-black .pill-gray { background: #1A1A1A; color: #888888; } body.theme-black .kpi-bar { background: #2A2A2A; } body.theme-black .card-head { border-bottom-color: #2A2A2A; } body.theme-black input[type="text"], body.theme-black input[type="email"], body.theme-black input[type="password"], body.theme-black input[type="tel"], body.theme-black input[type="number"], body.theme-black input[type="date"], body.theme-black textarea, body.theme-black select { background: #1A1A1A; border-color: #2A2A2A; color: #F5F5F5; } body.theme-black input:focus, body.theme-black textarea:focus, body.theme-black select:focus { border-color: #E8E8E8; box-shadow: 0 0 0 3px rgba(232,232,232,0.10); } body.theme-black label { color: #666666; } body.theme-black .session-loading { background: #0A0A0A !important; } body.theme-black .mob-header { background: #000000; }