so layout/login tables are * untouched. */ @media (max-width: 768px) { main table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; } /* Keep cards / form sections from forcing the page wider than the screen. */ main .max-w-5xl, main .max-w-4xl, main .max-w-3xl { max-width: 100%; } } /* Prevent the iOS "tap to zoom" that fires when an input font is < 16px. */ @media (max-width: 640px) { input, select, textarea { font-size: 16px; } } /* Tablets / iPad portrait: the fixed sidebar is hidden until toggled (it is * lg: only), so make sure the toggle button stays comfortably tappable. */ @media (max-width: 1023px) { header button { min-width: 40px; min-height: 40px; } } /* ---------- Dark (near-black / navy corporate) ---------- */ html[data-theme="dark"] { --brand-50: 23 37 84; --brand-100: 30 58 138; --brand-200: 30 64 175; --brand-300: 29 78 216; --brand-400: 37 99 235; --brand-500: 96 165 250; /* #60a5fa — bright accent on dark */ --brand-600: 59 130 246; --brand-700: 37 99 235; --brand-800: 191 219 254; --brand-900: 219 234 254; --primary-50: 15 23 42; --primary-100: 30 41 59; --primary-200: 51 65 85; --primary-300: 71 85 105; --primary-400: 100 116 139; --primary-500: 148 163 184; --primary-600: 203 213 225; --primary-700: 226 232 240; --primary-800: 241 245 249; --primary-900: 248 250 252; --sidebar-700: 17 24 39; --sidebar-800: 11 16 27; --sidebar-900: 7 11 20; --sidebar-grad-top: #111827; --sidebar-grad-bottom: #070b14; --hero-grad-from: #1e293b; --hero-grad-mid: #0f172a; --hero-grad-to: #0b1220; --brand-logo-accent: #60a5fa; --login-bg-from: #0b1220; --login-bg-mid: #0f172a; --login-bg-to: #111827; --login-heading: #f1f5f9; --login-muted: #94a3b8; --login-link: #60a5fa; --login-input-bg: #111827; --login-input-border: #334155; --login-input-focus: #60a5fa; --login-input-ring: 96 165 250; --login-input-text: #f1f5f9; --login-placeholder: #64748b; --login-icon: #60a5fa; --login-btn-from: #3b82f6; --login-btn-mid: #2563eb; --login-btn-to: #1d4ed8; --login-btn-hover-from:#60a5fa; --login-btn-hover-mid: #3b82f6; --login-btn-hover-to: #2563eb; --login-btn-shadow: 2 6 23; --login-leaf-fill: #1e3a8a; --login-leaf-fill-alt: #1e40af; --login-leaf-fill-3: #2563eb; --login-leaf-stem: #60a5fa; --login-brand-icon-from:#3b82f6; --login-brand-icon-to: #1d4ed8; } /* Dark theme: flip the app's default light body surfaces. Scoped globally but only active under data-theme="dark". Keep it minimal + safe. */ html[data-theme="dark"] body { background: #0b1220 !important; color: #e2e8f0; } html[data-theme="dark"] .bg-white { background: #111827 !important; } html[data-theme="dark"] .bg-slate-100 { background: #0b1220 !important; } html[data-theme="dark"] .bg-slate-50 { background: #0f172a !important; } html[data-theme="dark"] .text-slate-800, html[data-theme="dark"] .text-slate-700 { color: #e2e8f0 !important; } html[data-theme="dark"] .text-slate-500, html[data-theme="dark"] .text-slate-400 { color: #94a3b8 !important; } html[data-theme="dark"] .border-slate-200, html[data-theme="dark"] .border-slate-100 { border-color: #1f2937 !important; } /* v10.22.2 -- notice-board header: the template sets an inline light gradient which the blanket theme rules can't reskin, so its title went invisible on the dark theme (light title on light bar). Reskin per theme (!important beats the inline style). */ html[data-theme="dark"] .notice-head { background: #0f172a !important; border-color:#1f2937 !important; } html[data-theme="dark"] .notice-head h3 { color:#e2e8f0 !important; } /* v10.22.2 -- dark theme: form controls were browser-default WHITE, so every form (organization, employee, leave, etc.) showed white boxes on the dark page. Dark-skin text inputs / selects / textareas; leave checkboxes, radios, file and color pickers native. Scoped to the dark theme only. */ html[data-theme="dark"] input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]):not([type=range]):not([type=submit]):not([type=button]), html[data-theme="dark"] select, html[data-theme="dark"] textarea { background-color: #111827 !important; color: #e2e8f0 !important; border-color: #334155 !important; } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: #64748b !important; } html[data-theme="dark"] select option { background-color: #111827; color: #e2e8f0; } /* v10.22.2 -- dark theme coverage broadening. The original dark theme only flipped text-slate-{800,700,500,400}; text-slate-600 (83 uses) and text-slate-900 stayed dark -> dark-on-dark. bg-slate-200 (29 uses) stayed light. Flip these too. (Semantic status tints bg-amber/emerald/blue/red-50 and bg-white/NN overlays are intentionally left: readable / decorative.) */ html[data-theme="dark"] .text-slate-900 { color: #f1f5f9 !important; } html[data-theme="dark"] .text-slate-600 { color: #cbd5e1 !important; } html[data-theme="dark"] .bg-slate-200 { background-color: #1f2937 !important; } html[data-theme="dark"] .border-slate-300 { border-color: #334155 !important; } /* v10.26.5 -- dark theme HOVER fix. The base bg/text utilities were flipped for dark, but their hover: variants were not, so hovering (chat toolbar, message actions, DM/channel rows, reaction pills, tabs) re-applied the ORIGINAL light background or a dark text -> light-on-light / dark-on-dark = invisible words. Flip the hover variants too so hovered text stays readable in dark mode. */ html[data-theme="dark"] .hover\:bg-white:hover { background-color: #111827 !important; } html[data-theme="dark"] .hover\:bg-slate-50:hover { background-color: #172033 !important; } html[data-theme="dark"] .hover\:bg-slate-100:hover { background-color: #1e293b !important; } html[data-theme="dark"] .hover\:bg-slate-200:hover { background-color: #334155 !important; } html[data-theme="dark"] .hover\:text-slate-900:hover, html[data-theme="dark"] .hover\:text-slate-800:hover, html[data-theme="dark"] .hover\:text-slate-700:hover, html[data-theme="dark"] .hover\:text-slate-600:hover { color: #f1f5f9 !important; } /* v10.22.4 -- dark theme: the primary scale is INVERTED (primary-600..800 -> near white), so the common "dark-primary background + white text" pattern (13+ page heroes using `from-primary-600 to-primary-800`, and bg-primary-600/700/800 buttons/headers) rendered white-on-white. Force those BACKGROUND utilities to real dark blues so the white text is readable. (text-primary-* stays inverted for headings; brand-* backgrounds already read fine.) */ html[data-theme="dark"] .bg-primary-600 { background-color:#1d4ed8 !important; } html[data-theme="dark"] .bg-primary-700 { background-color:#1e40af !important; } html[data-theme="dark"] .bg-primary-800 { background-color:#1e3a8a !important; } html[data-theme="dark"] [class*="from-primary-600"][class*="to-primary-800"] { background-image: linear-gradient(to bottom right, #1e3a8a 0%, #0f172a 100%) !important; } /* v10.22.5 -- DARK theme login page. The login card + input focus bg are hard-coded #ffffff, but the dark theme makes --login-heading light and --login-input-bg dark -> "Welcome back" went invisible on the white card and the dark inputs clashed. Give the card (and focus state) a dark surface so heading/inputs/card are consistent. Forest/Sunrise keep the white card. */ html[data-theme="dark"] .login-card { background:#0f172a !important; border-color:#1f2937 !important; } html[data-theme="dark"] .pill-input:focus { background:#111827 !important; } /* ============================================================= */ /* v10.28.0 -- searchable dropdowns (Tom Select) + bigger chat font */ /* ============================================================= */ /* Make Tom Select match the app's inputs (light theme). */ .ts-wrapper { font-size: 0.875rem; margin: 0; vertical-align: middle; min-width: 150px; } /* v10.30.1 -- match native