/* ============================================================ Falcon Wing IT Portal — Light / Dark Theme theme.css Dark is the default (:root values in each page). Light mode activates when is set. The portal uses two naming conventions across its pages: Long-form — index.php, dashboard.php Short-form — helpdesk, admin, kb, hd pages Both are covered here. ============================================================ */ /* ── Light mode: all CSS variable overrides ────────────────── */ html[data-theme="light"] { /* ── Backgrounds ──────────────────────────────────────── */ --bg-root: #f0f4f8; --bg-sidebar: #e4ecf6; --bg-panel: #ffffff; --bg-card: #ffffff; --bg-card-hover: #f4f7fc; --bg-card2: #f5f8fc; --bg-input: #f4f7fc; --bg-input-focus: #ecf2fa; --bg-sso: #edf3fc; --bg-hover: #ecf2fa; /* short-form equivalents */ --bg: #f0f4f8; --bg-sb: #e4ecf6; /* ── Borders ──────────────────────────────────────────── */ --border-dim: #c4d4e8; --border-mid: #a4bcd8; --border-bright: #84a4c8; --border-accent: #1a6cf0; --bd: #c4d4e8; --bd-mid: #a4bcd8; --bd-hi: #84a4c8; /* ── Text ─────────────────────────────────────────────── */ --text-primary: #1a2840; --text-secondary: #3a5878; --text-muted: #6a8aaa; --text-placeholder: #9ab0c8; --text-bright: #0e1e30; --tx: #1a2840; --tx2: #3a5878; --txm: #6a8aaa; --txb: #0e1e30; /* ── Accent (blue stays blue) ─────────────────────────── */ --accent: #1a6cf0; --accent-hover: #1558d0; --accent-dim: rgba(26,108,240,0.10); --accent-glow: rgba(26,108,240,0.15); --acc: #1a6cf0; --acc-h: #1558d0; --acc-dim: rgba(26,108,240,0.10); /* ── Status: success / green ──────────────────────────── */ --success-bg: #edfbf4; --success-border: #8ad8b8; --success-text: #186a3e; --green: #186a3e; --green-bg: #edfbf4; --green-border: #8ad8b8; --green-text: #186a3e; --gbg: #edfbf4; --gbd: #8ad8b8; /* ── Status: error / red ──────────────────────────────── */ --error-bg: #fdf2f2; --error-border: #f0aaaa; --error-text: #c02828; --red: #c02828; --red-bg: #fdf2f2; --red-border: #f0aaaa; --red-text: #c02828; --rbg: #fdf2f2; --rbd: #f0aaaa; /* ── Status: warning / yellow ─────────────────────────── */ --warning-bg: #fffbeb; --warning-border: #ecd070; --warning-text: #8a5800; --yellow: #8a5800; --yellow-bg: #fffbeb; --yellow-border: #ecd070; --yellow-text: #8a5800; --ybg: #fffbeb; --ybd: #ecd070; /* ── Status: info / blue ──────────────────────────────── */ --notice-bg: #eef4fd; --notice-border: #1a6cf0; --notice-text: #1a4cb0; --blue: #1a4cb0; --blue-bg: #eef4fd; --blue-border: #88b8e8; --blue-text: #1a4cb0; --bbg: #eef4fd; --bbd: #88b8e8; } /* ── Structural overrides for elements with hardcoded colors ── */ /* Login page sidebar (index.php uses hardcoded #070c12) */ html[data-theme="light"] .fw-sidebar { background: #e4ecf6; border-right-color: #c4d4e8; } html[data-theme="light"] .fw-sidebar-footer { border-top-color: #c4d4e8; } /* Login page grid decoration */ html[data-theme="light"] .fw-grid-bg { background-image: linear-gradient(#c4d4e8 1px, transparent 1px), linear-gradient(90deg, #c4d4e8 1px, transparent 1px); opacity: 0.4; } html[data-theme="light"] .fw-grid-fade { background: radial-gradient(ellipse 70% 70% at 50% 50%, transparent 30%, #f0f4f8 100%); } /* Active nav items have a hardcoded colour across most pages */ html[data-theme="light"] .nav-item.active, html[data-theme="light"] .fw-nav-item.active { color: #1a4a80; background: rgba(26,108,240,0.10); } /* Topbar & tab-bar often set to var(--bg-sb) which resolves fine, but the topbar in some pages has a sticky background that needs to be opaque in light mode. */ html[data-theme="light"] .topbar, html[data-theme="light"] .tab-bar { background: #e4ecf6; border-color: #c4d4e8; } /* Hardcoded search-input background in helpdesk / kb list pages */ html[data-theme="light"] .search-input { background: #f4f7fc; color: #1a2840; border-color: #c4d4e8; } html[data-theme="light"] .search-input:focus { border-color: #1a6cf0; } /* Logout button hover colours are hardcoded in most pages */ html[data-theme="light"] .logout:hover, html[data-theme="light"] .fw-logout-btn:hover { border-color: #f0aaaa; color: #c02828; background: #fdf2f2; } /* ── calendar.php: hardcoded dark values ──────────────────── */ /* Previous / next month day cells */ html[data-theme="light"] .fw-day.other-month { background: #e4eaf4; } /* Today highlight */ html[data-theme="light"] .fw-day.today { background: #e8f0fc; outline-color: #1a6cf0; } html[data-theme="light"] .fw-week-col.today { background: #e8f0fc; border-color: #1a6cf0; } /* View-range tab strip (Month / Week / 3 Months / List) */ html[data-theme="light"] .fw-view-tabs { background: #dce8f4; border-color: #a4bcd8; } /* Calendar event chips with fully hardcoded dark colours */ html[data-theme="light"] .fw-chip.urg-critical { background: #fff4eb; border-color: #f0c090; color: #a04010; } html[data-theme="light"] .fw-chip.urg-done { background: #edfbf4; border-color: #9adfc0; color: #186a3e; } html[data-theme="light"] .fw-chip.urg-mute { background: #f0f0f4; border-color: #c0c8d8; color: #5a6a7a; } /* Danger button hover */ html[data-theme="light"] .fw-btn.danger:hover { background: #fdf2f2; } /* ── Flatpickr date-picker light mode ──────────────────────── */ html[data-theme="light"] .flatpickr-calendar { background: #ffffff; border-color: #a4bcd8; box-shadow: 0 4px 20px rgba(0,0,0,0.12); } html[data-theme="light"] .flatpickr-month, html[data-theme="light"] .flatpickr-weekday { background: #f0f4f8; color: #1a2840; fill: #1a2840; } html[data-theme="light"] .flatpickr-day { color: #3a5878; } html[data-theme="light"] .flatpickr-day:hover, html[data-theme="light"] .flatpickr-day:focus { background: #dce8f4; border-color: #a4bcd8; color: #1a2840; } html[data-theme="light"] .flatpickr-day.selected, html[data-theme="light"] .flatpickr-day.selected:hover { background: #1a6cf0; border-color: #1a6cf0; color: #fff; } html[data-theme="light"] .flatpickr-day.today { border-color: #1a6cf0; color: #1a6cf0; } html[data-theme="light"] .flatpickr-day.today:hover { background: #1a6cf0; color: #fff; } html[data-theme="light"] .flatpickr-day.flatpickr-disabled, html[data-theme="light"] .flatpickr-day.prevMonthDay, html[data-theme="light"] .flatpickr-day.nextMonthDay { color: #b0c4d8; } html[data-theme="light"] .flatpickr-current-month, html[data-theme="light"] .flatpickr-current-month input.cur-year { color: #1a2840; } html[data-theme="light"] .flatpickr-current-month .flatpickr-monthDropdown-months { background: #ffffff; color: #1a2840; } html[data-theme="light"] .flatpickr-prev-month, html[data-theme="light"] .flatpickr-next-month { fill: #3a5878; } html[data-theme="light"] .flatpickr-prev-month:hover svg, html[data-theme="light"] .flatpickr-next-month:hover svg { fill: #1a6cf0; } html[data-theme="light"] .numInputWrapper span { border-color: #c4d4e8; } html[data-theme="light"] .numInputWrapper span:hover { background: #e4ecf6; } /* ── Sign-in page: SSO button text and hover (hardcoded light-blue/dark-navy) */ html[data-theme="light"] .fw-sso-btn { color: #3a5878; } html[data-theme="light"] .fw-sso-btn:hover { background: #dce8f4; border-color: #a4bcd8; color: #1a4080; } /* ── Sign-in page: tab switcher (background: #08101a is hardcoded) ────────── */ html[data-theme="light"] .fw-tabs { background: #dce8f4; border-color: #a4bcd8; } /* ── Sign-in page: permission tier badges ─────────────────────────────────── */ html[data-theme="light"] .fw-tier-0 { background:#eaf2fa; border-color:#b8d0e8; color:#3e6080; } html[data-theme="light"] .fw-tier-1 { background:#e4eef8; border-color:#a8cce4; color:#2e6080; } html[data-theme="light"] .fw-tier-2 { background:#dce8f6; border-color:#98c0e0; color:#1e5888; } html[data-theme="light"] .fw-tier-3 { background:#d4e4f4; border-color:#88b4dc; color:#145088; } html[data-theme="light"] .fw-tier-4 { background:#ccdff2; border-color:#78a8d8; color:#0c4880; } html[data-theme="light"] .fw-tier-5 { background:#c4daef; border-color:#689cd4; color:#0a4078; } html[data-theme="light"] .fw-tier-6 { background:#eef4fd; border-color:var(--accent); color:var(--accent); } /* ── admin.php: muted badge and audit event icon (hardcoded #0a0f14) ─────── */ html[data-theme="light"] .b-mute { background: #e8eef6; border-color: #b8c8dc; color: var(--txm, #6a8aaa); } html[data-theme="light"] .ev-mute { background: #e8eef6; border-color: #b8c8dc; color: var(--txm, #6a8aaa); } /* ── KB / ticket badge: .b-blue (hardcoded dark in kb_article, knowledgebase) */ html[data-theme="light"] .b-blue { background: #eef4fd; border-color: #88b8e8; color: #1a4cb0; } /* ── Flash messages (helpdesk pages that still have hardcoded dark) ── */ html[data-theme="light"] .flash.success { background: var(--green-bg); border-color: var(--green-border); color: var(--green); } html[data-theme="light"] .flash.error { background: var(--red-bg); border-color: var(--red-border); color: var(--red); } /* ── Theme toggle button ───────────────────────────────────── */ .fw-theme-toggle { position: fixed; bottom: 20px; right: 20px; width: 38px; height: 38px; border-radius: 50%; /* Use whichever variable convention the current page defines */ background: var(--bg-card, var(--bg, #0d1520)); border: 1px solid var(--border-mid, var(--bd-mid, var(--bd, #1a2e45))); color: var(--text-secondary, var(--tx2, #6a90b0)); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 17px; z-index: 9999; transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s; box-shadow: 0 2px 10px rgba(0,0,0,0.3); } .fw-theme-toggle:hover { background: var(--accent-dim, var(--acc-dim, rgba(26,108,240,0.10))); border-color: var(--accent, var(--acc, #1a6cf0)); color: var(--accent, var(--acc, #1a6cf0)); transform: scale(1.08); }