* { font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; } /* --------------------------- Default tokens (DARK) --------------------------- */ :root { --gt-bg: #0f172a; /* slate-900 */ --gt-bg-2: #111827; /* gray-900 */ --gt-surface: #0b1324; --gt-surface-2: #0f213b; --gt-border: #1f2a44; --gt-text: #e5e7eb; /* gray-200 */ --gt-text-muted: #9ca3af; /* gray-400 */ --gt-accent: #3b82f6; /* blue-500 */ --gt-accent-2: #60a5fa; --gt-sidebar-w: 260px; --gt-sidebar-w-collapsed: 64px; --nav-h: 62px; --footer-h: 42px; /* Ghost buttons (dark defaults) */ --btn-ghost-color: #e5e7eb; --btn-ghost-border: rgba(255,255,255,.18); --btn-ghost-hover: rgba(255,255,255,.08); --logo-light: url('/images/GovTransferLogo_OvWhite.png'); --logo-light-hover: url('/images/GovTransferLogo_Gray.png'); --logo-dark: url('/images/GovTransferLogo_OvBlack.png'); --logo-dark-hover: url('/images/GovTransferLogo_Gray.png'); } /* --------------------------- LIGHT theme overrides --------------------------- */ html[data-theme="light"] { --gt-bg: #ffffff; --gt-bg-2: #f8fafc; --gt-surface: #ffffff; --gt-surface-2: #ffffff; --gt-border: #d1d5db; --gt-text: #111827; --gt-text-muted: #4b5563; --gt-accent: #2563eb; --gt-accent-2: #3b82f6; --btn-ghost-color: #0f172a; --btn-ghost-border: rgba(15,23,42,.18); --btn-ghost-hover: rgba(15,23,42,.08); } /* --------------------------- MID theme overrides (balanced contrast, not as bright as Light, not as deep as Dark) --------------------------- */ html[data-theme="mid"] { /* Backgrounds: mid-slate (not near-black) */ --gt-bg: #243041; /* slate-ish 800 */ --gt-bg-2: #1f2937; /* gray-800 */ /* Surfaces: lifted panels */ --gt-surface: #2b3a4f; /* readable card bg */ --gt-surface-2: #31435c; /* secondary lift / sidebar */ /* Borders: visible on mid surfaces */ --gt-border: rgba(226, 232, 240, 0.22); /* Text: keep bright enough for readability */ --gt-text: #f1f5f9; /* slate-100 */ --gt-text-muted: #cbd5e1; /* slate-300 */ /* Accent: keep brand blue but slightly less neon */ --gt-accent: #3b82f6; --gt-accent-2: #93c5fd; /* Ghost buttons: tune to mid */ --btn-ghost-color: #f1f5f9; --btn-ghost-border: rgba(241,245,249,.22); --btn-ghost-hover: rgba(241,245,249,.10); } html[data-theme="ocean"] { --gt-bg: #061a23; --gt-bg-2: #072432; --gt-surface: #0b2b3a; --gt-surface-2: #0f3a4f; --gt-border: rgba(148, 163, 184, 0.24); --gt-text: #e6f6ff; --gt-text-muted: #a9c7d8; --gt-accent: #22c1c3; /* teal */ --gt-accent-2: #3b82f6; /* blue */ --btn-ghost-color: #e6f6ff; --btn-ghost-border: rgba(230,246,255,.20); --btn-ghost-hover: rgba(230,246,255,.10); } html[data-theme="forest"] { --gt-bg: #0b1f16; --gt-bg-2: #0a261a; --gt-surface: #102b1f; --gt-surface-2: #143626; --gt-border: rgba(167, 243, 208, 0.18); --gt-text: #ecfdf5; --gt-text-muted: #b7e4cf; --gt-accent: #34d399; /* green-mint */ --gt-accent-2: #60a5fa; /* keep a blue secondary for links/buttons */ --btn-ghost-color: #ecfdf5; --btn-ghost-border: rgba(236,253,245,.18); --btn-ghost-hover: rgba(236,253,245,.10); } html[data-theme="blues"] { --gt-bg: #0b1220; --gt-bg-2: #0c1a33; --gt-surface: #0f2344; --gt-surface-2: #12305d; --gt-border: rgba(147, 197, 253, 0.22); --gt-text: #eaf2ff; --gt-text-muted: #b7cdf6; --gt-accent: #3b82f6; --gt-accent-2: #93c5fd; --btn-ghost-color: #eaf2ff; --btn-ghost-border: rgba(234,242,255,.18); --btn-ghost-hover: rgba(234,242,255,.10); } /* ========================================================= Bootstrap 5.3 color-mode bridge (ties BS vars to GT vars) Requires: NOTE: Bootstrap only supports light/dark officially; for "mid" use data-bs-theme="dark" and override the vars below. ========================================================= */ /* ========================================================= Bootstrap bridge - apply to ALL themes ========================================================= */ /* Default: for any theme, bind Bootstrap variables to GT variables */ html[data-theme] { --bs-body-bg: var(--gt-bg); --bs-body-color: var(--gt-text); --bs-border-color: var(--gt-border); --bs-secondary-color: var(--gt-text-muted); --bs-card-bg: var(--gt-surface); --bs-card-color: var(--gt-text); --bs-modal-bg: var(--gt-surface); --bs-dropdown-bg: var(--gt-surface); /* For "dark-ish" themes, this should be a lifted surface */ --bs-secondary-bg: var(--gt-surface-2); } html[data-theme="dark"] { --bs-body-bg: var(--gt-bg); --bs-body-color: var(--gt-text); --bs-border-color: var(--gt-border); --bs-secondary-color: var(--gt-text-muted); --bs-card-bg: var(--gt-surface); --bs-card-color: var(--gt-text); --bs-modal-bg: var(--gt-surface); --bs-dropdown-bg: var(--gt-surface); --bs-secondary-bg: var(--gt-surface-2); } html[data-theme="light"] { --bs-body-bg: var(--gt-bg); --bs-body-color: var(--gt-text); --bs-border-color: var(--gt-border); --bs-secondary-color: var(--gt-text-muted); --bs-card-bg: var(--gt-surface); --bs-card-color: var(--gt-text); --bs-modal-bg: var(--gt-surface); --bs-dropdown-bg: var(--gt-surface); --bs-secondary-bg: var(--gt-bg-2); } /* Mid: treat Bootstrap as "dark" but nudge its surface vars to match Mid */ html[data-theme="mid"] { --bs-body-bg: var(--gt-bg); --bs-body-color: var(--gt-text); --bs-border-color: var(--gt-border); --bs-secondary-color: var(--gt-text-muted); --bs-card-bg: var(--gt-surface); --bs-card-color: var(--gt-text); --bs-modal-bg: var(--gt-surface); --bs-dropdown-bg: var(--gt-surface); --bs-secondary-bg: var(--gt-surface-2); } /* Your app base colors */ html, body { height: 100%; } body { font-size: 14px; background: var(--gt-bg); color: var(--gt-text); } body.gt-sidebar-expanded .gt-content { margin-left: var(--gt-sidebar-w); } body.gt-sidebar-collapsed .gt-content { margin-left: var(--gt-sidebar-w-collapsed); } /* Optional footer spacer helper if you render it */ body.gt-sidebar-collapsed .gt-footer .spacer-left { width: var(--gt-sidebar-w-collapsed); } /* Pins get our blue accent */ i.fa-thumbtack-angle { color: var(--gt-accent); } /* ───────────────────────────────────────────────────────── Bootstrap 5.3 color-mode bridge (ties BS vars to GT vars) Requires: ───────────────────────────────────────────────────────── */ html[data-theme="dark"] { --bs-body-bg: var(--gt-bg); --bs-body-color: var(--gt-text); --bs-border-color: var(--gt-border); --bs-secondary-color: var(--gt-text-muted); --bs-card-bg: var(--gt-surface); --bs-card-color: var(--gt-text); --bs-modal-bg: var(--gt-surface); --bs-dropdown-bg: var(--gt-surface); --bs-secondary-bg: var(--gt-surface-2); } html[data-theme="light"] { --bs-body-bg: var(--gt-bg); --bs-body-color: var(--gt-text); --bs-border-color: var(--gt-border); --bs-secondary-color: var(--gt-text-muted); --bs-card-bg: var(--gt-surface); --bs-card-color: var(--gt-text); --bs-modal-bg: var(--gt-surface); --bs-dropdown-bg: var(--gt-surface); --bs-secondary-bg: var(--gt-bg-2); } html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select, html[data-theme="dark"] .input-group-text { background-color: var(--gt-surface) !important; color: var(--gt-text) !important; border-color: var(--gt-border) !important; } html[data-theme="dark"] .form-control::placeholder { color: var(--gt-text-muted) !important; } .gt-navbar { background: linear-gradient(180deg, var(--gt-bg), var(--gt-bg-2)); border-bottom: 1px solid var(--gt-border); font-size: .95rem; } .gt-navbar .nav-link, .gt-navbar .navbar-brand { color: var(--gt-text); } .gt-navbar .navbar-brand:hover, .gt-navbar .nav-link:hover { filter: brightness(1.08); color: var(--gt-text); } .gt-dropdown { right: .25rem !important; left: auto !important; } /* Ghost icon buttons with strong contrast in both themes */ .btn-ghost { color: var(--btn-ghost-color) !important; border: 1px solid var(--btn-ghost-border) !important; background: transparent !important; } .btn-ghost:hover { background: var(--btn-ghost-hover) !important; color: var(--btn-ghost-color) !important; } /* Search input legibility */ .gt-navbar .form-control { color: var(--gt-text) !important; } .gt-navbar .form-control::placeholder { color: var(--gt-text-muted) !important; } /* Avatar button in navbar */ .user-avatar-btn { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-width: 0; background-color: var(--bs-gray-800); } [data-theme="light"] .user-avatar-btn { background-color: #e5e7eb; /* light gray */ } /* Small avatar in navbar */ .user-avatar-img, .user-avatar-initials { width: 32px; height: 32px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.8rem; } .user-avatar-initials { background: #111827; color: #f9fafb; } /* Larger avatar in dropdown */ .user-avatar-img-lg, .user-avatar-circle-lg { width: 56px; height: 56px; border-radius: 999px; } .user-avatar-img-lg { object-fit: cover; } .user-avatar-circle-lg { background: #111827; color: #f9fafb; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 1rem; } /* Card styling */ .user-menu-card { min-width: 360px; width: 400px; max-width: 460px; padding: 0; border-radius: 0.75rem; border: 1px solid rgba(148, 163, 184, 0.4); box-shadow: 0 18px 40px rgba(15, 23, 42, 0.25); } [data-theme="dark"] .user-menu-card { background-color: #020617; border-color: rgba(30, 64, 175, 0.7); } .user-menu-card .btn-primary.btn-sm { padding-inline: 0.9rem; font-size: 0.8rem; } [data-theme="light"] .user-avatar-btn { background-color: #e5e7eb; } [data-theme="dark"] .user-avatar-btn { border: 1px solid #4b5563; /* subtle ring in dark mode */ } .user-avatar-img { object-fit: cover; display: block; } .user-avatar-initials { display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.8rem; background: #111827; color: #f9fafb; } [data-theme="light"] .user-menu-card { background-color: #ffffff; } [data-theme="dark"] .user-menu-card { background-color: #020617; border-color: rgba(31, 41, 55, 0.9); } .user-menu-section { padding: 0.75rem 1rem; } /* Header */ .user-menu-header { display: flex; justify-content: space-between; align-items: center; font-size: 0.75rem; border-bottom: 1px solid rgba(148, 163, 184, 0.35); } .user-menu-app { font-weight: 500; color: #6b7280; } [data-theme="dark"] .user-menu-app { color: #9ca3af; } .user-menu-logout { color: #ef4444; } /* Profile row */ .user-menu-profile { display: flex; gap: 0.9rem; align-items: center; } .user-menu-avatar { flex-shrink: 0; } /* Initials circle in dropdown */ .user-avatar-circle-lg { display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 1rem; line-height: 1; } [data-theme="light"] .user-avatar-circle-lg { background-color: #111827; color: #f9fafb; border: 2px solid #e5e7eb; } [data-theme="dark"] .user-avatar-circle-lg { background-color: #020617; color: #f9fafb; border: 2px solid #4b5563; } .user-menu-details { min-width: 0; } .user-menu-name { font-weight: 600; font-size: 0.95rem; } .user-menu-username, .user-menu-email { font-size: 0.8rem; color: #6b7280; } [data-theme="dark"] .user-menu-username, [data-theme="dark"] .user-menu-email { color: #9ca3af; } /* Primary action */ .user-menu-primary { padding-top: 0.5rem; padding-bottom: 0.75rem; } .user-menu-primary .btn-primary { font-size: 0.82rem; font-weight: 500; border-radius: 999px; /* pill */ color: #ffffff; } [data-theme="light"] .user-menu-primary .btn-primary { background-color: #2563eb; border-color: #2563eb; } [data-theme="dark"] .user-menu-primary .btn-primary { background-color: #1d4ed8; border-color: #1d4ed8; } /* Secondary actions */ .user-menu-secondary { display: flex; gap: 0.5rem; padding-top: 0.5rem; padding-bottom: 0.9rem; border-top: 1px solid rgba(148, 163, 184, 0.3); } .user-menu-secondary .btn-sm { font-size: 0.8rem; } [data-theme="dark"] .user-menu-card .btn-outline-secondary { border-color: #4b5563; color: #e5e7eb; } [data-theme="dark"] .user-menu-card .btn-outline-secondary:hover { background-color: #111827; } /* Generic "looks like a link but is a button" helper */ .link-button { background: none; border: none; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; } /* Specific color for logout link */ .user-menu-logout { color: #ef4444; /* red-500 */ } .user-menu-logout:hover { text-decoration: underline; } /* ───────────────────────────────── Sidebar ───────────────────────────────── */ /* Sidebar shell */ #gtSidebar { overflow: hidden; /* don't let the