/* app-theme.css (2026-10-22): makes the office React app (index.html + Tailwind bundle) follow the theme
   picked in theme.js without rebuilding the bundle. Maps the bundle's dark surface / text / border classes
   and its common inline colors to the theme variables (--bg --card --card2 --hover --bd --tx --tx2 --gold).
   Every rule is keyed on html[data-theme] and skips the default Black & Gold theme, so dark-gold looks
   exactly as before. Sign-in screens (html.mhs-auth) are left to login-company.js / auth-screen.js.
   S = any non-default theme (surfaces, borders)   L = light themes only (text colors, tints) */

/* ---------- surfaces (all non-default themes) ---------- */
html[data-theme]:not([data-theme=dark-gold]):not(.mhs-auth) body { background-color: var(--bg); color: var(--tx); }
html[data-theme]:not([data-theme=dark-gold]):not(.mhs-auth) ::-webkit-scrollbar-track { background: var(--bg); }
html[data-theme]:not([data-theme=dark-gold]):not(.mhs-auth) :is(.bg-black, .bg-dark-950) { background-color: var(--bg); }
html[data-theme]:not([data-theme=dark-gold]):not(.mhs-auth) .bg-dark-800 { background-color: var(--card2); }
html[data-theme]:not([data-theme=dark-gold]):not(.mhs-auth) :is(.bg-dark-700, .card, .card-gold) { background-color: var(--card); }
html[data-theme]:not([data-theme=dark-gold]):not(.mhs-auth) :is(.bg-dark-600, .form-input, .form-select) { background-color: var(--card2); color: var(--tx); }
html[data-theme]:not([data-theme=dark-gold]):not(.mhs-auth) :is(.bg-dark-500, .bg-dark-400, .btn-secondary) { background-color: var(--hover); }
html[data-theme]:not([data-theme=dark-gold]):not(.mhs-auth) .btn-secondary { color: var(--tx); border-color: var(--bd); }
html[data-theme]:not([data-theme=dark-gold]):not(.mhs-auth) :is(.bg-dark-700\/30, .bg-dark-700\/20) { background-color: color-mix(in srgb, var(--hover) 45%, transparent); }
html[data-theme]:not([data-theme=dark-gold]):not(.mhs-auth) :is(.hover\:bg-dark-500, .hover\:bg-dark-600, .btn-secondary):hover { background-color: var(--hover); }
html[data-theme]:not([data-theme=dark-gold]):not(.mhs-auth) :is(.hover\:bg-dark-600\/40, .hover\:bg-dark-700\/20, .hover\:bg-dark-700\/30):hover { background-color: color-mix(in srgb, var(--hover) 60%, transparent); }

/* borders + dividers */
html[data-theme]:not([data-theme=dark-gold]):not(.mhs-auth) :is(.border-dark-300, .border-dark-400, .border-dark-400\/50, .border-dark-500, .border-dark-600, .border-dark-900\/30, .card, .form-input, .form-select) { border-color: var(--bd); }
html[data-theme]:not([data-theme=dark-gold]):not(.mhs-auth) :is(.hover\:border-dark-300, .hover\:border-dark-400):hover { border-color: var(--bd); }
html[data-theme]:not([data-theme=dark-gold]):not(.mhs-auth) :is(.divide-dark-400, .divide-dark-500) > :not([hidden]) ~ :not([hidden]) { border-color: var(--bd); }
html[data-theme]:not([data-theme=dark-gold]):not(.mhs-auth) :is(.form-input, .form-select):focus { border-color: var(--gold); }

/* inline-style surfaces the bundle sets in JS (React writes them as rgb()) */
html[data-theme]:not([data-theme=dark-gold]):not(.mhs-auth) :is([style*="background: rgb(0, 0, 0)"], [style*="background-color: rgb(0, 0, 0)"], [style*="background: rgb(8, 8, 8)"], [style*="background: rgb(10, 10, 10)"], [style*="background: rgb(13, 13, 13)"]) { background: var(--bg) !important; }
html[data-theme]:not([data-theme=dark-gold]):not(.mhs-auth) :is([style*="background: rgb(17, 17, 17)"], [style*="background: rgb(28, 28, 28)"], [style*="background-color: rgb(28, 28, 28)"], [style*="gradient(90deg, rgb(10, 10, 10)"]) { background: var(--card2) !important; }
html[data-theme]:not([data-theme=dark-gold]):not(.mhs-auth) :is([style*="background: rgb(22, 22, 22)"], [style*="background: rgb(26, 26, 26)"], [style*="gradient(135deg, rgb(13, 13, 13)"]) { background: var(--card) !important; }
html[data-theme]:not([data-theme=dark-gold]):not(.mhs-auth) :is([style*="solid rgb(17, 17, 17)"], [style*="solid rgb(26, 26, 26)"], [style*="solid rgb(34, 34, 34)"], [style*="solid rgb(42, 42, 42)"], [style*="solid rgb(58, 58, 58)"]) { border-color: var(--bd) !important; }

/* ---------- text (light themes only; dark themes keep the bundle's light-on-dark grays) ---------- */
html[data-theme-mode=light]:not(.mhs-auth) :is(.text-white, .text-gray-100, .text-gray-200, .text-gray-300, .hover\:text-white:hover, .hover\:text-gray-200:hover, .hover\:text-gray-300:hover) { color: var(--tx); }
html[data-theme-mode=light]:not(.mhs-auth) :is(.text-gray-400, .text-gray-500, .text-gray-600, .text-gray-700, .text-slate-500, .text-white\/60, .form-label, .hover\:text-gray-400:hover) { color: var(--tx2); }
html[data-theme-mode=light]:not(.mhs-auth) :is(.form-input, .form-select) { color: var(--tx); }
/* white text that sits on a solid colored fill (buttons, avatars, status dots) stays white */
html[data-theme-mode=light]:not(.mhs-auth) :is(.bg-gold-500, .bg-gold-gradient, .btn-primary, .bg-green-500, .bg-red-500, .bg-red-400, .bg-blue-500, .bg-orange-500, .bg-amber-500, .bg-indigo-500, .bg-violet-500, .bg-gray-600, .bg-slate-400, .bg-black\/70, .bg-black\/90):is(.text-white, .text-gray-100, .text-gray-200, .text-gray-300),
html[data-theme-mode=light]:not(.mhs-auth) :is(.bg-gold-500, .bg-gold-gradient, .btn-primary, .bg-green-500, .bg-red-500, .bg-red-400, .bg-blue-500, .bg-orange-500, .bg-amber-500, .bg-indigo-500, .bg-violet-500, .bg-gray-600, .bg-slate-400, .bg-black\/70, .bg-black\/90) :is(.text-white, .text-gray-100, .text-gray-200, .text-gray-300) { color: #fff; }

/* accent + status text: darker shades that read on white */
html[data-theme-mode=light]:not(.mhs-auth) :is(.text-gold-300, .text-gold-400, .text-gold-500, .text-gold-500\/80, .text-gold-600, .hover\:text-gold-400:hover, .group:hover .group-hover\:text-gold-400) { color: color-mix(in srgb, var(--gold) 82%, #000); }
html[data-theme-mode=light]:not(.mhs-auth) .gold-text { background: none; -webkit-text-fill-color: var(--gold); color: var(--gold); }
html[data-theme-mode=light]:not(.mhs-auth) :is(.text-green-300, .text-green-400, .hover\:text-green-400:hover) { color: var(--green); }
html[data-theme-mode=light]:not(.mhs-auth) :is(.text-red-300, .text-red-400, .hover\:text-red-400:hover) { color: var(--red); }
html[data-theme-mode=light]:not(.mhs-auth) .text-blue-400 { color: var(--blue); }
html[data-theme-mode=light]:not(.mhs-auth) :is(.text-orange-400, .hover\:text-orange-400:hover) { color: #9a3412; }
html[data-theme-mode=light]:not(.mhs-auth) :is(.text-yellow-400, .text-yellow-500, .text-amber-400) { color: var(--amber); }

/* dark status tints -> light tints */
html[data-theme-mode=light]:not(.mhs-auth) :is(.bg-green-900\/20, .bg-green-900\/30) { background-color: rgba(34, 197, 94, .14); }
html[data-theme-mode=light]:not(.mhs-auth) :is(.bg-red-900\/20, .bg-red-900\/30) { background-color: rgba(239, 68, 68, .12); }
html[data-theme-mode=light]:not(.mhs-auth) :is(.bg-gold-900\/20, .bg-gold-900\/30) { background-color: rgba(212, 160, 23, .14); }
html[data-theme-mode=light]:not(.mhs-auth) .bg-orange-700\/30 { background-color: rgba(249, 115, 22, .16); }

/* inline text colors set in JS */
html[data-theme-mode=light]:not(.mhs-auth) :is([style^="color: rgb(229, 229, 229)"], [style*="; color: rgb(229, 229, 229)"], [style^="color: rgb(255, 255, 255)"]:not([style*="background"]), [style*="; color: rgb(255, 255, 255)"]:not([style*="background"])) { color: var(--tx) !important; }
html[data-theme-mode=light]:not(.mhs-auth) :is([style^="color: rgb(102, 102, 102)"], [style*="; color: rgb(102, 102, 102)"], [style^="color: rgb(85, 85, 85)"], [style*="; color: rgb(85, 85, 85)"], [style^="color: rgb(68, 68, 68)"], [style*="; color: rgb(68, 68, 68)"], [style^="color: rgb(153, 153, 153)"], [style*="; color: rgb(153, 153, 153)"]) { color: var(--tx2) !important; }
html[data-theme-mode=light]:not(.mhs-auth) :is([style^="color: rgb(212, 160, 23)"], [style*="; color: rgb(212, 160, 23)"]):not([style*="background"]) { color: var(--gold) !important; }
html[data-theme-mode=light]:not(.mhs-auth) :is([style^="color: rgb(34, 197, 94)"], [style*="; color: rgb(34, 197, 94)"], [style^="color: rgb(74, 222, 128)"], [style*="; color: rgb(74, 222, 128)"], [style^="color: rgb(52, 211, 153)"], [style*="; color: rgb(52, 211, 153)"]) { color: var(--green) !important; }
html[data-theme-mode=light]:not(.mhs-auth) :is([style^="color: rgb(239, 68, 68)"], [style*="; color: rgb(239, 68, 68)"], [style^="color: rgb(248, 113, 113)"], [style*="; color: rgb(248, 113, 113)"]) { color: var(--red) !important; }
html[data-theme-mode=light]:not(.mhs-auth) :is([style^="color: rgb(249, 115, 22)"], [style*="; color: rgb(249, 115, 22)"], [style^="color: rgb(245, 158, 11)"], [style*="; color: rgb(245, 158, 11)"]) { color: #9a3412 !important; }
html[data-theme-mode=light]:not(.mhs-auth) :is([style^="color: rgb(96, 165, 250)"], [style*="; color: rgb(96, 165, 250)"]) { color: var(--blue) !important; }