/**
 * Office Automation — light theme only (high contrast).
 */
:root {
  color-scheme: light;
  --oa-brand: #167ec2;
  --oa-brand-light: #0284c7;
  --oa-brand-soft: #e0f2fe;
  --oa-bg-page: #eef2f7;
  --oa-bg-shell: #ffffff;
  --oa-bg-sidebar: #ffffff;
  --oa-bg-header: #ffffff;
  --oa-bg-surface: #ffffff;
  --oa-bg-card: #ffffff;
  --oa-bg-card-alt: #f8fafc;
  --oa-bg-input: #ffffff;
  --oa-bg-elevated: #f8fafc;
  --oa-bg-muted: #f1f5f9;
  --oa-bg-table-head: #e2e8f0;
  --oa-border: #e2e8f0;
  --oa-border-strong: #cbd5e1;
  --oa-text-heading: #0f172a;
  --oa-text-body: #1e293b;
  --oa-text-primary: #334155;
  --oa-text-secondary: #475569;
  --oa-text-muted: #64748b;
  --oa-text-faint: #94a3b8;
  --oa-accent: #0369a1;
  --oa-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 0 0 1px rgba(15, 23, 42, 0.04);
  --oa-shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(15, 23, 42, 0.05);
  --oa-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.1), 0 0 0 1px rgba(15, 23, 42, 0.06);
  --oa-overlay: rgba(15, 23, 42, 0.04);
  --oa-overlay-hover: rgba(15, 23, 42, 0.07);
  --oa-ring: rgba(22, 126, 194, 0.18);
}

.oa-logo { display: block; }

/* Shell utilities (layout chrome) */
.oa-bg-page { background-color: var(--oa-bg-page); }
.oa-bg-shell { background-color: var(--oa-bg-shell); }
.oa-bg-sidebar {
  background-color: var(--oa-bg-sidebar);
  box-shadow: 1px 0 0 var(--oa-border);
}
.oa-bg-header {
  background-color: var(--oa-bg-header);
  box-shadow: 0 1px 0 var(--oa-border);
}
.oa-text-body { color: var(--oa-text-body); }
.oa-text-heading { color: var(--oa-text-heading); }
.oa-text-muted { color: var(--oa-text-muted); }
.oa-border { border-color: var(--oa-border); }

header input[type="search"] {
  background-color: var(--oa-bg-input) !important;
  border-color: var(--oa-border-strong) !important;
  color: var(--oa-text-heading) !important;
  box-shadow: var(--oa-shadow-sm);
}

/* ── Remap legacy hard-coded dark Tailwind utilities across all pages ── */
body {
  background-color: var(--oa-bg-page) !important;
  color: var(--oa-text-body) !important;
}

.text-white { color: var(--oa-text-heading) !important; }

/* Keep white text/icons on solid brand, active nav, status badges, and primary buttons */
.oa-badge,
.oa-badge *,
.oa-badge.text-white,
.oa-badge.font-bold,
.oa-badge.font-bold.text-white,
.oa-badge.font-bold.text-white *,
.oa-btn-primary,
.oa-btn-primary *,
.oa-btn-primary.text-white,
.oa-btn-primary.font-semibold,
.oa-btn-primary.font-semibold.text-white,
aside nav a.bg-\[\#167EC2\],
aside nav a.bg-\[\#167EC2\] *,
.oa-subnav a.bg-\[\#167EC2\],
.oa-subnav a.bg-\[\#167EC2\] *,
.oa-tab-nav a.bg-\[\#167EC2\],
.oa-tab-nav a.bg-\[\#167EC2\] *,
.bg-\[\#167EC2\],
.bg-\[\#167EC2\] *,
.bg-\[\#167EC2\].text-white,
.bg-\[\#167EC2\] .text-white,
.bg-\[\#F17E2B\],
.bg-\[\#F17E2B\] *,
.bg-\[\#F17E2B\].text-white,
.bg-\[\#F17E2B\] .text-white,
.bg-\[\#5FCAF4\]\/90.text-\[\#041a2e\],
[class*="from-[#167EC2]"].text-white,
[class*="from-[#167EC2]"] .text-white,
button.text-white,
button.bg-\[\#167EC2\],
a.bg-\[\#167EC2\],
a.bg-\[\#167EC2\] * {
  color: #ffffff !important;
}

.oa-badge svg,
.oa-btn-primary svg,
aside nav a.bg-\[\#167EC2\] svg,
.oa-subnav a.bg-\[\#167EC2\] svg,
.oa-tab-nav a.bg-\[\#167EC2\] svg,
.bg-\[\#167EC2\] svg,
.bg-\[\#F17E2B\] svg {
  stroke: #ffffff !important;
}

/* Solid badge backgrounds (override legacy wrapper tints) */
.oa-badge.bg-slate-600 { background-color: #475569 !important; }
.oa-badge.bg-sky-600 { background-color: #0284c7 !important; }
.oa-badge.bg-amber-600 { background-color: #d97706 !important; }
.oa-badge.bg-emerald-600 { background-color: #059669 !important; }
.oa-badge.bg-red-600 { background-color: #dc2626 !important; }
.oa-badge.bg-violet-600 { background-color: #7c3aed !important; }
.text-\[\#041a2e\] { color: #041a2e !important; }

.text-slate-200 { color: var(--oa-text-primary) !important; }
.text-slate-300 { color: var(--oa-text-secondary) !important; }
.text-slate-400 { color: var(--oa-text-muted) !important; }
.text-slate-500 { color: var(--oa-text-muted) !important; }
.text-slate-600 { color: #475569 !important; }

.text-\[\#5FCAF4\],
.text-\[\#5FCAF4\]\/90,
.text-\[\#5FCAF4\]\/80 { color: var(--oa-accent) !important; }

.text-amber-100,
.text-amber-200 { color: #b45309 !important; font-weight: 600; }
.text-amber-200\/80 { color: #b45309 !important; }
.text-emerald-300 { color: #047857 !important; font-weight: 600; }
.text-lime-100 { color: #3f6212 !important; }
.text-red-100,
.text-red-200,
.text-red-200\/90 { color: #b91c1c !important; }

.border-white\/5,
.border-white\/10,
.border-white\/15,
.border-white\/20,
.border-dashed.border-white\/15 { border-color: var(--oa-border) !important; }

.ring-white\/5,
.ring-white\/10,
.ring-white\/20,
.ring-white\/\[0\.06\],
.ring-white\/\[0\.07\] { --tw-ring-color: var(--oa-ring) !important; }

.bg-white\/5 { background-color: var(--oa-bg-muted) !important; }
.bg-white\/10 { background-color: var(--oa-bg-muted) !important; }
.bg-white\/\[0\.03\],
.bg-white\/\[0\.04\] { background-color: var(--oa-bg-muted) !important; }
.hover\:bg-white\/5:hover { background-color: var(--oa-bg-muted) !important; }
.hover\:bg-white\/10:hover { background-color: #e2e8f0 !important; }

.bg-black\/30 {
  background-color: var(--oa-brand-soft) !important;
  border: 1px solid rgba(22, 126, 194, 0.15);
}

.bg-\[\#020d18\],
.bg-\[\#020d18\]\/50,
.bg-\[\#020d18\]\/80,
.bg-\[\#031425\],
.bg-\[\#041018\],
.bg-\[\#041018\]\/50,
.bg-\[\#041018\]\/60,
.bg-\[\#041018\]\/95,
.bg-\[\#04121f\],
.bg-\[\#04121f\]\/50,
.bg-\[\#04121f\]\/60,
.bg-\[\#04121f\]\/80,
.bg-\[\#04121f\]\/90,
.bg-\[\#041a2e\],
.bg-\[\#041a2e\]\/40,
.bg-\[\#041a2e\]\/50,
.bg-\[\#041a2e\]\/60,
.bg-\[\#041a2e\]\/80,
.bg-\[\#062a45\],
.bg-\[\#062a45\]\/80 {
  background-color: var(--oa-bg-card) !important;
  border-color: var(--oa-border) !important;
  box-shadow: var(--oa-shadow-sm) !important;
}

.rounded-2xl.border,
.rounded-xl.border,
.rounded-lg.border {
  border-color: var(--oa-border) !important;
}

.rounded-2xl[class*="border-white"],
.rounded-xl[class*="border-white"],
.rounded-lg[class*="border-white"],
[class*="ring-inset"][class*="border-white"] {
  box-shadow: var(--oa-shadow-md) !important;
}

.from-\[\#020d18\],
.from-\[\#031425\],
.from-\[\#041018\],
.from-\[\#041a2e\],
.from-\[\#062a45\],
.from-\[\#062a45\]\/80,
.via-\[\#041a2e\],
.to-\[\#020d18\],
.to-\[\#041018\],
.to-\[\#041018\]\/95,
.to-\[\#041a2e\],
.to-\[\#051e35\],
.bg-gradient-to-b,
.bg-gradient-to-br {
  --tw-gradient-from: var(--oa-bg-card) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: var(--oa-bg-card-alt) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.shadow-black\/20,
.shadow-black\/30,
.shadow-black\/40,
.shadow-lg,
.shadow-xl,
.shadow-2xl {
  --tw-shadow-color: rgba(15, 23, 42, 0.1) !important;
  box-shadow: var(--oa-shadow-md) !important;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="url"],
input[type="tel"],
select,
textarea {
  color: var(--oa-text-heading) !important;
  background-color: var(--oa-bg-input) !important;
  border-color: var(--oa-border-strong) !important;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}
input::placeholder,
textarea::placeholder { color: var(--oa-text-faint) !important; }

.border-amber-500\/20 { border-color: rgba(245, 158, 11, 0.45) !important; }
.bg-amber-500\/5 { background-color: rgba(254, 243, 199, 0.65) !important; }
.ring-amber-500\/10 { --tw-ring-color: rgba(245, 158, 11, 0.25) !important; }

table {
  border-color: var(--oa-border) !important;
}
table thead {
  background-color: var(--oa-bg-table-head) !important;
  color: var(--oa-text-secondary) !important;
  font-weight: 700;
}
table thead th {
  color: #334155 !important;
  letter-spacing: 0.05em;
}
table tbody tr {
  border-color: var(--oa-border) !important;
  color: var(--oa-text-body) !important;
}
table tbody tr:hover {
  background-color: var(--oa-brand-soft) !important;
}

.hover\:bg-\[\#041a2e\]:hover,
.hover\:bg-\[\#5FCAF4\]\/10:hover,
.hover\:bg-\[\#167EC2\]\/10:hover {
  background-color: var(--oa-brand-soft) !important;
  border-color: rgba(22, 126, 194, 0.25) !important;
}

.divide-white\/5 > :not([hidden]) ~ :not([hidden]) { border-color: var(--oa-border) !important; }
.bg-\[\#83C341\]\/10 { background-color: rgba(220, 252, 231, 0.9) !important; }
.border-\[\#83C341\]\/30 { border-color: rgba(34, 197, 94, 0.45) !important; }

.border-\[\#5FCAF4\]\/25,
.border-\[\#5FCAF4\]\/30,
.border-\[\#5FCAF4\]\/35,
.border-\[\#5FCAF4\]\/40 { border-color: rgba(22, 126, 194, 0.35) !important; }

.bg-\[\#5FCAF4\]\/10 { background-color: var(--oa-brand-soft) !important; }
.bg-\[\#5FCAF4\]\/20,
.hover\:bg-\[\#5FCAF4\]\/20:hover { background-color: #bae6fd !important; }

aside nav a:not(.bg-\[\#167EC2\]) {
  color: var(--oa-text-secondary) !important;
}
aside nav a:not(.bg-\[\#167EC2\]):hover {
  background-color: var(--oa-bg-muted) !important;
  color: var(--oa-text-heading) !important;
}

h1,
h2,
h3,
.font-bold.text-white:not(.oa-badge):not(.oa-btn-primary),
.font-semibold.text-white:not(.oa-badge):not(.oa-btn-primary) {
  color: var(--oa-text-heading) !important;
  letter-spacing: -0.01em;
}

.user-menu summary {
  border-color: var(--oa-border-strong) !important;
  background: var(--oa-bg-card) !important;
  box-shadow: var(--oa-shadow-sm);
}

.user-menu summary:hover {
  border-color: rgba(22, 126, 194, 0.35) !important;
  background: var(--oa-bg-muted) !important;
}

dt,
.text-\[10px\].uppercase,
.text-\[9px\].uppercase {
  color: var(--oa-text-muted) !important;
  font-weight: 600;
  letter-spacing: 0.06em;
}

dd.font-bold,
.text-2xl.font-bold,
.text-xl.font-bold,
.text-lg.font-bold {
  color: var(--oa-text-heading) !important;
}

/* Employee profile & data-heavy admin pages */
.emp-hrm-sec {
  background: var(--oa-bg-card) !important;
  border-color: var(--oa-border-strong) !important;
  box-shadow: var(--oa-shadow-md) !important;
}

.oa-profile-chip {
  background: var(--oa-bg-card) !important;
  border-color: var(--oa-border-strong) !important;
  box-shadow: var(--oa-shadow-sm) !important;
}

.oa-tab-nav {
  border-color: var(--oa-border-strong) !important;
}

thead tr.bg-slate-950\/60,
thead .bg-slate-100 {
  background-color: #f1f5f9 !important;
}

.bg-slate-950\/60 { background-color: #f1f5f9 !important; }

.text-sky-100 { color: #0369a1 !important; }
.text-sky-300 { color: #0284c7 !important; }
.text-violet-200,
.text-violet-400,
.text-violet-400\/80 { color: #6d28d9 !important; }
.oa-pin-code { color: #0e7490 !important; font-weight: 600; }
.oa-tnd-code { color: #0369a1 !important; font-weight: 600; }

.text-cyan-200,
.text-cyan-200\/90 { color: #0e7490 !important; }
.text-sky-200,
.text-sky-200\/80 { color: #0369a1 !important; }
.text-emerald-200 { color: #047857 !important; }
.text-red-200 { color: #b91c1c !important; }

.bg-sky-500\/15,
.bg-sky-500\/20 { background-color: #e0f2fe !important; }
.bg-emerald-500\/15,
.bg-emerald-500\/20 { background-color: #d1fae5 !important; }
.bg-amber-500\/15,
.bg-amber-500\/20 { background-color: #fef3c7 !important; }
.bg-violet-500\/15,
.bg-violet-500\/20 { background-color: #ede9fe !important; }
.bg-red-500\/15,
.bg-red-500\/20 { background-color: #fee2e2 !important; }
.bg-slate-500\/15,
.bg-slate-500\/20,
.bg-slate-500\/30 { background-color: #f1f5f9 !important; }

.ring-sky-500\/30,
.ring-emerald-500\/30,
.ring-amber-500\/30,
.ring-violet-500\/30,
.ring-red-500\/30,
.ring-slate-500\/40 { --tw-ring-color: rgba(100, 116, 139, 0.25) !important; }

.text-emerald-200 {
  color: #047857 !important;
}

.border-emerald-500\/30 { border-color: rgba(16, 185, 129, 0.35) !important; }
.bg-emerald-500\/10 { background-color: #ecfdf5 !important; }
.text-emerald-200 { color: #047857 !important; }

code.bg-black\/20 {
  background-color: rgba(15, 23, 42, 0.06) !important;
  color: var(--oa-text-secondary) !important;
}

.hover\:bg-sky-50:hover { background-color: #f0f9ff !important; }

tbody tr:nth-child(even) {
  background-color: rgba(248, 250, 252, 0.65);
}

.text-slate-100 { color: var(--oa-text-primary) !important; }
.text-emerald-100 { color: #047857 !important; font-weight: 600; }
.text-emerald-200\/90 { color: #047857 !important; }

.bg-emerald-500\/10.text-emerald-100,
.bg-emerald-500\/10 .text-emerald-100 {
  color: #065f46 !important;
}
.bg-red-500\/10.text-red-100,
.bg-red-500\/10 .text-red-100 {
  color: #991b1b !important;
}
.bg-amber-500\/10.text-amber-100,
.bg-amber-500\/10 .text-amber-100,
.bg-amber-500\/10.text-amber-100\/90 {
  color: #92400e !important;
}

.oa-subnav a.border-slate-200 { border-color: var(--oa-border-strong) !important; }
.oa-subnav a.bg-\[\#167EC2\] {
  border-color: #167ec2 !important;
  background-color: #167ec2 !important;
  color: #ffffff !important;
  font-weight: 600;
}

label.text-slate-400,
.text-\[10px\].text-slate-400,
.text-\[11px\].text-slate-400 {
  color: var(--oa-text-muted) !important;
}

.text-slate-100\/80,
.text-slate-100\/90 { color: var(--oa-text-secondary) !important; }

tbody tr.text-slate-100,
tbody td.text-slate-100 { color: var(--oa-text-body) !important; }

.bg-slate-950\/40,
.bg-slate-950\/50 { background-color: #f8fafc !important; }

.hover\:text-white:hover { color: var(--oa-text-heading) !important; }
.hover\:text-slate-100:hover { color: var(--oa-text-heading) !important; }

th.text-slate-400,
thead .text-slate-400 { color: var(--oa-text-muted) !important; font-weight: 600; }

.text-indigo-200,
.text-indigo-300 { color: #4338ca !important; }
.text-orange-200 { color: #c2410c !important; }
.text-yellow-200 { color: #a16207 !important; }
.text-pink-200 { color: #be185d !important; }

.bg-indigo-500\/15,
.bg-indigo-500\/20 { background-color: #e0e7ff !important; }
.bg-orange-500\/15,
.bg-orange-500\/20 { background-color: #ffedd5 !important; }
.bg-yellow-500\/15,
.bg-yellow-500\/20 { background-color: #fef9c3 !important; }

main .text-white\/80,
main .text-white\/70,
main .text-white\/60 { color: var(--oa-text-secondary) !important; }

.border-b.border-white\/10 { border-color: var(--oa-border) !important; }

.bg-\[\#5FCAF4\]\/10.text-\[\#5FCAF4\] {
  color: #0369a1 !important;
  background-color: #e0f2fe !important;
}

pre,
.font-mono.text-slate-300 { color: var(--oa-text-secondary) !important; }

.shadow-inner { box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04) !important; }

.ring-1.ring-inset.ring-white\/5 {
  --tw-ring-color: var(--oa-ring) !important;
  box-shadow: var(--oa-shadow-sm) !important;
}

/* Buttons on legacy pages */
button.border-white\/15,
a.border-white\/15 {
  border-color: var(--oa-border-strong) !important;
  color: var(--oa-text-secondary) !important;
  background-color: var(--oa-bg-card) !important;
}
button.border-white\/15:hover,
a.border-white\/15:hover {
  background-color: var(--oa-bg-muted) !important;
}

/* Status / workflow badges */
.oa-badge {
  font-weight: 600;
  border: none !important;
  box-shadow: none !important;
  --tw-ring-shadow: 0 0 #0000 !important;
  --tw-ring-offset-shadow: 0 0 #0000 !important;
}

.bg-slate-950\/60,
thead tr.bg-slate-950\/60 {
  background-color: var(--oa-bg-table-head) !important;
}

th.text-slate-300,
thead .text-slate-300 {
  color: #334155 !important;
  font-weight: 700;
}

.user-menu [class*="bg-"][class*="062a45"],
.user-menu .oa-bg-sidebar {
  background-color: var(--oa-bg-card) !important;
  border-color: var(--oa-border-strong) !important;
}

/* Business case view */
.oa-bc-view .oa-badge.bg-sky-600\/90 { background-color: #0284c7 !important; }
.oa-bc-view .oa-badge.bg-violet-600\/90 { background-color: #7c3aed !important; }
.oa-bc-view .oa-badge.bg-emerald-600\/90 { background-color: #059669 !important; }
.oa-bc-view .oa-badge.bg-amber-600\/90 { background-color: #d97706 !important; }
.oa-bc-view .oa-badge.bg-indigo-600\/90 { background-color: #4f46e5 !important; }
.oa-bc-view #bcv-req a.opacity-55 { opacity: 0.72 !important; }
.oa-bc-view .bc-approval-form button.text-white,
.oa-bc-view .bc-open-approve-modal.text-white {
  color: #ffffff !important;
}
.oa-bc-view .bc-approval-form button.text-white svg,
.oa-bc-view .bc-open-approve-modal.text-white svg {
  stroke: #ffffff !important;
}

/* Business case form */
.oa-bc-form .stage-pick.oa-badge.bg-sky-600\/90 { background-color: #0284c7 !important; }
.oa-bc-form .stage-pick.oa-badge.bg-violet-600\/90 { background-color: #7c3aed !important; }
.oa-bc-form .stage-pick.oa-badge.bg-emerald-600\/90 { background-color: #059669 !important; }
.oa-bc-form .stage-pick.oa-badge.bg-amber-600\/90 { background-color: #d97706 !important; }
.oa-bc-form .stage-pick.oa-badge.bg-indigo-600\/90 { background-color: #4f46e5 !important; }
.oa-bc-form .bc-customer-combo-panel a,
.oa-bc-form .bc-user-combo-panel button {
  color: inherit;
}

.oa-bc-form .bc-user-combo,
.oa-bc-form .bc-customer-combo {
  display: block;
  width: 100%;
  min-width: 0;
  position: relative;
}

.bc-combo-field,
.bc-select-field {
  display: flex;
  align-items: stretch;
  position: relative;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  border: 1px solid rgb(203 213 225);
  border-radius: 0.5rem;
  background-color: #fff;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.bc-combo-field:focus-within,
.bc-select-field:focus-within {
  border-color: #167EC2;
  outline: 2px solid rgba(22, 126, 194, 0.2);
  outline-offset: 0;
}

.bc-combo-field:has(select:disabled),
.bc-combo-field:has(input:disabled),
.bc-combo-field:has(input[readonly]),
.bc-select-field:has(select:disabled) {
  background-color: rgb(248 250 252);
}

.bc-field-prefix {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  pointer-events: none;
  color: rgb(100 116 139);
}

.bc-field-icon {
  display: block;
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
}

.oa-bc-form .bc-user-combo-input,
.oa-bc-form .bc-customer-combo-input,
.oa-bc-form .bc-select-field select {
  box-sizing: border-box;
}

.bc-combo-field .bc-user-combo-input,
.bc-combo-field .bc-customer-combo-input,
.bc-select-field select {
  flex: 1 1 auto;
  display: block;
  width: auto !important;
  min-width: 0;
  max-width: 100%;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding-left: 0 !important;
  padding-right: 2rem !important;
}

.bc-combo-field .bc-user-combo-input,
.bc-combo-field .bc-customer-combo-input {
  appearance: none;
  -webkit-appearance: none;
  background-image: none;
  cursor: text;
}

.bc-select-field select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: none !important;
  cursor: pointer;
}

.oa-bc-form input[type="search"].bc-user-combo-input,
.oa-bc-form input[type="search"].bc-customer-combo-input {
  -webkit-appearance: none;
  appearance: none;
}

.oa-bc-form input[type="search"].bc-user-combo-input::-webkit-search-decoration,
.oa-bc-form input[type="search"].bc-customer-combo-input::-webkit-search-decoration,
.oa-bc-form input[type="search"].bc-user-combo-input::-webkit-search-cancel-button,
.oa-bc-form input[type="search"].bc-customer-combo-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

.oa-bc-form .bc-user-combo-panel,
.oa-bc-form .bc-customer-combo-panel {
  top: calc(100% + 0.25rem);
  left: 0;
  right: 0;
}

/* Floating combo dropdowns (teleported to body) */
.bc-combo-float-panel {
  background: #ffffff !important;
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.16), 0 0 0 1px rgba(15, 23, 42, 0.06) !important;
  z-index: 9999 !important;
}

.bc-combo-float-panel:not(.hidden) {
  position: fixed !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

.oa-biz-form .tr-cmb {
  position: relative;
  z-index: 0;
}

.oa-biz-form .tr-cmb:focus-within {
  z-index: 40;
}

.bc-combo-float-panel a,
.bc-combo-float-panel button {
  color: inherit;
}

.bc-combo-field > .bc-field-prefix svg,
.bc-select-field > .bc-field-prefix svg {
  display: block;
  flex-shrink: 0;
}

.oa-bc-form .bc-field-trigger,
.bc-combo-field > .bc-field-trigger,
.bc-select-field > .bc-field-trigger {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  z-index: 3;
  display: flex;
  width: 2rem;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.bc-combo-field > .bc-field-trigger .bc-field-chevron,
.bc-select-field > .bc-field-trigger .bc-field-chevron,
.oa-bc-form .bc-field-trigger .bc-field-chevron {
  display: block;
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  pointer-events: none;
  color: rgb(100 116 139);
}

.bc-combo-field > .bc-field-trigger.bc-has-value .bc-field-chevron,
.bc-select-field > .bc-field-trigger.bc-has-value .bc-field-chevron,
.oa-bc-form .bc-field-trigger.bc-has-value .bc-field-chevron {
  display: none;
}

.oa-bc-form .bc-field-clear {
  display: none;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 9999px;
  background: linear-gradient(135deg, #fb7185 0%, #e11d48 100%);
  color: #ffffff;
  box-shadow: 0 1px 2px rgba(225, 29, 72, 0.35);
  cursor: pointer;
  pointer-events: auto;
  line-height: 0;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.oa-bc-form .bc-field-trigger.bc-has-value .bc-field-clear {
  display: inline-flex;
}

.oa-bc-form .bc-field-clear:hover {
  background: linear-gradient(135deg, #f43f5e 0%, #be123c 100%);
  box-shadow: 0 2px 6px rgba(190, 18, 60, 0.4);
  transform: scale(1.08);
}

.oa-bc-form .bc-field-clear:active {
  transform: scale(0.94);
}

.oa-bc-form .bc-field-clear-svg {
  display: block;
  width: 0.5625rem;
  height: 0.5625rem;
}

.oa-bc-form .bc-field-clear[hidden] {
  display: none !important;
}

.oa-tr-form .tr-combo-field > span,
.oa-biz-form .tr-combo-field > span {
  z-index: 2;
}

.oa-tr-form .tr-combo-field svg,
.oa-biz-form .tr-combo-field svg {
  display: block;
  flex-shrink: 0;
}

.oa-biz-form .oa-biz-section-body {
  padding: 0.75rem;
}

@media (min-width: 640px) {
  .oa-biz-form .oa-biz-section-body {
    padding: 1rem;
  }
}

/* HRM pages — searchable selects */
.oa-hrm-page .oa-search-select-wrap,
.oa-search-select-wrap {
  position: relative;
  z-index: 0;
}

.oa-hrm-page .oa-search-select-cmb:focus-within,
.oa-search-select-cmb:focus-within {
  z-index: 40;
}

.oa-search-select-native.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.oa-search-select-panel .oa-search-select-opt:hover {
  background-color: #f8fafc;
}

.oa-hrm-page select:not(.oa-search-select-native):not(.sr-only) {
  appearance: auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Unified component layer (Option A) — tables, panels, actions, forms
   Use semantic classes; connect once via theme.php helpers + header.php
   ═══════════════════════════════════════════════════════════════════════════ */

.oa-panel {
  background: var(--oa-bg-card);
  border-color: var(--oa-border);
}

/* Page header */
.oa-page-header {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
@media (min-width: 640px) {
  .oa-page-header {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
}
.oa-page-header__actions {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Table panel */
.oa-table-panel {
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid var(--oa-border);
  background: var(--oa-bg-card);
  box-shadow: var(--oa-shadow-sm);
}
.oa-table-panel__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.oa-table-panel__toolbar {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-bottom: 1px solid var(--oa-border);
  padding: 0.625rem 0.75rem;
}
@media (min-width: 640px) {
  .oa-table-panel__toolbar {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 1rem;
  }
}
.oa-table-panel__toolbar-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--oa-text-heading);
}
.oa-table-panel__count {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--oa-text-secondary);
}
.oa-table-panel__count svg {
  color: var(--oa-brand);
}

/* Data tables */
.oa-table-panel > table,
table.oa-data-table {
  width: 100%;
  min-width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.8125rem;
  color: var(--oa-text-body);
}
@media (min-width: 640px) {
  .oa-table-panel > table,
  table.oa-data-table {
    font-size: 0.875rem;
  }
}
.oa-table-panel > table thead,
table.oa-data-table thead {
  background: #f8fafc;
  border-bottom: 1px solid var(--oa-border);
}
.oa-table-panel > table thead th,
table.oa-data-table thead th,
.oa-data-table__th {
  padding: 0.625rem 0.75rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #475569;
  white-space: nowrap;
  vertical-align: middle;
}
.oa-table-panel > table tbody,
table.oa-data-table tbody {
  /* row borders handled per tr */
}
.oa-table-panel > table tbody tr,
table.oa-data-table tbody tr {
  border-bottom: 1px solid #f1f5f9;
}
.oa-table-panel > table tbody tr:last-child,
table.oa-data-table tbody tr:last-child {
  border-bottom: none;
}
.oa-table-panel > table tbody tr:hover,
table.oa-data-table tbody tr:hover {
  background: rgba(248, 250, 252, 0.9);
}
.oa-table-panel > table tbody td,
table.oa-data-table tbody td,
.oa-data-table__td {
  padding: 0.625rem 0.75rem;
  vertical-align: middle;
  color: var(--oa-text-body);
}
.oa-table-panel > table tfoot,
table.oa-data-table tfoot {
  border-top: 1px solid var(--oa-border);
  background: #f8fafc;
  font-weight: 600;
}
.oa-table-panel > table tfoot td,
table.oa-data-table tfoot td {
  padding: 0.625rem 0.75rem;
  color: var(--oa-text-secondary);
}

table.oa-data-table--compact thead th,
table.oa-data-table--compact .oa-data-table__th,
table.oa-data-table--compact tbody td,
table.oa-data-table--compact .oa-data-table__td {
  padding: 0.375rem 0.5rem;
}
table.oa-data-table--compact {
  font-size: 0.8125rem;
}
table.oa-data-table--compact .oa-td-mono {
  font-size: 0.75rem;
}

/* Cell modifiers */
.oa-td-num,
.oa-data-table .oa-td-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.oa-td-mono,
.oa-data-table .oa-td-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.8125em;
  color: var(--oa-text-muted);
}
.oa-td-name,
.oa-data-table .oa-td-name {
  font-weight: 600;
  color: var(--oa-text-heading);
}
.oa-td-positive {
  color: #047857 !important;
  font-weight: 600;
}
.oa-td-negative {
  color: #b91c1c !important;
  font-weight: 600;
}
.oa-td-accent {
  color: var(--oa-brand) !important;
  font-weight: 600;
}

/* Row action column */
.oa-table-actions {
  min-width: 11rem;
  white-space: nowrap;
}
.oa-table-actions__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.375rem;
}
.oa-table-actions__row--inline {
  flex-wrap: nowrap;
  gap: 0.5rem;
}
.oa-table-actions__reject {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
}
.oa-table-actions__reject--inline {
  flex-wrap: nowrap;
  flex: 0 1 auto;
  min-width: 0;
}
.oa-table-actions__reject .oa-input,
.oa-table-actions__reject input[type="text"] {
  min-width: 8rem;
  max-width: 12rem;
  flex: 1 1 8rem;
  padding: 0.25rem 0.5rem !important;
  font-size: 0.75rem !important;
}
.oa-table-actions__reject--inline .oa-input,
.oa-table-actions__reject--inline input[type="text"] {
  min-width: 6.5rem;
  max-width: 9rem;
  width: 7.5rem;
  flex: 0 1 7.5rem;
}
.oa-table-actions__icon {
  display: inline-flex;
  height: 2rem;
  width: 2rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  color: var(--oa-brand);
  transition: background 0.15s;
}
.oa-table-actions__icon:hover {
  background: #f0f9ff;
}
.oa-table-actions__icon--danger {
  color: #dc2626;
}
.oa-table-actions__icon--danger:hover {
  background: #fef2f2;
}

/* Empty state */
.oa-table-empty {
  padding: 2rem 1rem;
  text-align: center;
  font-size: 0.875rem;
  color: var(--oa-text-muted);
}
.oa-table-empty--dashed {
  border: 1px dashed var(--oa-border-strong);
  border-radius: 1rem;
  background: #fafbfc;
}

/* Small action buttons in tables */
.oa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  text-decoration: none;
}
.oa-btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
.oa-btn--sm {
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  border-radius: 0.375rem;
  font-weight: 600;
  line-height: 1.25;
}
.oa-btn--chip {
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  border-radius: 0.5rem;
  font-weight: 500;
  line-height: 1.25;
  border-width: 1px;
  border-style: solid;
}
.oa-btn--chip.border-slate-200 svg {
  stroke: #334155 !important;
}
.oa-btn--chip.border-\[\#167EC2\]\/30 svg {
  stroke: #167ec2 !important;
}
.oa-btn--chip.border-rose-200 svg {
  stroke: #be123c !important;
}
.oa-btn--success {
  border-color: rgba(16, 185, 129, 0.35);
  background: #ecfdf5;
  color: #047857 !important;
}
.oa-btn--success:hover:not(:disabled) {
  background: #d1fae5;
}
.oa-btn--success svg {
  stroke: #047857 !important;
}
.oa-btn--danger {
  border-color: rgba(244, 63, 94, 0.35);
  background: #fff1f2;
  color: #b91c1c !important;
}
.oa-btn--danger:hover:not(:disabled) {
  background: #ffe4e6;
}
.oa-btn--danger svg {
  stroke: #b91c1c !important;
}
.oa-btn--warning {
  border-color: #fdba74;
  background: #ffedd5;
  color: #9a3412 !important;
}
.oa-btn--warning:hover:not(:disabled) {
  background: #fed7aa;
}
.oa-btn--warning svg {
  stroke: #9a3412 !important;
}

/* Form panel (filters, pay-slip picker, etc.) */
.oa-form-panel {
  border-radius: 1rem;
  border: 1px solid var(--oa-border);
  background: var(--oa-bg-card);
  box-shadow: var(--oa-shadow-sm);
  padding: 1rem;
}
@media (min-width: 640px) {
  .oa-form-panel {
    padding: 1.25rem;
  }
}
.oa-form-panel--spaced > * + * {
  margin-top: 1.25rem;
}
.oa-form-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
}
.oa-form-field {
  min-width: 0;
}

/* Month / option picker list */
.oa-picker-list {
  max-height: 11rem;
  overflow-y: auto;
  border-radius: 0.5rem;
  border: 1px solid var(--oa-border);
  background: var(--oa-bg-card);
}
.oa-picker-list__item {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  border: none;
  border-bottom: 1px solid #f1f5f9;
  background: transparent;
  padding: 0.625rem 0.75rem;
  text-align: left;
  font-size: 0.875rem;
  color: var(--oa-text-body);
  cursor: pointer;
  transition: background 0.12s;
}
.oa-picker-list__item:last-child {
  border-bottom: none;
}
.oa-picker-list__item:hover,
.oa-picker-list__item:focus {
  background: #f8fafc;
  outline: none;
}
.oa-picker-list__item.is-selected {
  opacity: 0.45;
}
.oa-picker-list__item-meta {
  color: var(--oa-text-muted);
  font-size: 0.8125em;
}
.oa-picker-list__item-action {
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--oa-brand);
  opacity: 0;
  transition: opacity 0.12s;
}
.oa-picker-list__item:hover .oa-picker-list__item-action {
  opacity: 1;
}
.oa-picker-chips {
  display: flex;
  min-height: 2.25rem;
  flex-wrap: wrap;
  gap: 0.375rem;
  border-radius: 0.375rem;
  border: 1px dashed var(--oa-border);
  background: #fafbfc;
  padding: 0.5rem;
}
.oa-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 0.375rem;
  border: 1px solid rgba(22, 126, 194, 0.25);
  background: var(--oa-brand-soft);
  padding: 0.125rem 0.25rem 0.125rem 0.5rem;
  font-size: 0.75rem;
  color: var(--oa-text-body);
}
.oa-chip__remove {
  border: none;
  background: transparent;
  border-radius: 0.25rem;
  padding: 0.125rem;
  color: #dc2626;
  cursor: pointer;
  line-height: 1;
}
.oa-chip__remove:hover {
  background: rgba(220, 38, 38, 0.08);
}

/* Stat cards (reports, dashboards) */
.oa-stat-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 1280px) {
  .oa-stat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.oa-stat-card {
  border-radius: 1rem;
  border: 1px solid var(--oa-border);
  background: var(--oa-bg-card);
  padding: 1rem 1.25rem;
  box-shadow: var(--oa-shadow-sm);
}
.oa-stat-card__label {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--oa-text-muted);
}
.oa-stat-card__value {
  margin-top: 0.75rem;
  font-size: 1.875rem;
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--oa-text-heading);
}
.oa-stat-card__hint {
  margin-top: 0.25rem;
  font-size: 0.6875rem;
  color: var(--oa-text-muted);
}

/* Filter preset chips */
.oa-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.oa-filter-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  border: 1px solid var(--oa-border);
  background: #f8fafc;
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--oa-text-secondary);
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.oa-filter-chip:hover {
  border-color: #cbd5e1;
  color: var(--oa-text-heading);
}
.oa-filter-chip.is-active {
  border-color: rgba(22, 126, 194, 0.45);
  background: var(--oa-brand-soft);
  color: #0369a1;
}

/* Department bar charts (absenteeism, liability reports) */
.oa-dept-bar-section {
  padding: 1.25rem;
}
@media (min-width: 640px) {
  .oa-dept-bar-section {
    padding: 1.375rem 1.5rem 1.5rem;
  }
}
.oa-dept-bar-section__head {
  margin: 0 0 1.25rem;
}
.oa-dept-bar-section__title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--oa-text-heading);
}
.oa-dept-bar-section__desc {
  margin: 0.375rem 0 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--oa-text-secondary);
}
.oa-dept-bar-grid {
  display: grid;
  gap: 0.875rem 1rem;
  grid-template-columns: minmax(0, 1fr);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 640px) {
  .oa-dept-bar-grid {
    gap: 1rem 1.125rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .oa-dept-bar-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1280px) {
  .oa-dept-bar-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.oa-dept-bar-item {
  display: flex;
  min-width: 0;
  min-height: 4.75rem;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 0.75rem;
  border: 1px solid var(--oa-border);
  background: var(--oa-bg-card);
  padding: 1rem 1.125rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.oa-dept-bar-item:hover {
  border-color: #cbd5e1;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}
.oa-dept-bar-item__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  font-size: 0.8125rem;
  line-height: 1.35;
}
.oa-dept-bar-item__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  color: var(--oa-text-heading);
}
.oa-dept-bar-item__meta {
  flex-shrink: 0;
  text-align: right;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--oa-text-secondary);
  white-space: nowrap;
}
.oa-dept-bar-item__value {
  font-weight: 600;
  color: var(--oa-text-heading);
}
.oa-dept-bar-item__track {
  height: 0.5rem;
  overflow: hidden;
  border-radius: 9999px;
  background: #eef2f7;
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.35);
}
.oa-dept-bar-item__fill {
  height: 100%;
  min-width: 0;
  border-radius: 9999px;
  transition: width 0.35s ease;
}
.oa-dept-bar-item__fill--rose {
  background: linear-gradient(90deg, #e11d48 0%, #fb7185 100%);
}
.oa-dept-bar-item__fill--violet {
  background: linear-gradient(90deg, #7c3aed 0%, #38bdf8 100%);
}

/* Force readable table body text in HRM pages */
.oa-hrm-page .oa-table-panel tbody td,
.oa-hrm-page table.oa-data-table tbody td {
  color: var(--oa-text-body);
}
.oa-hrm-page .oa-td-name,
.oa-hrm-page tbody td.oa-td-name {
  color: var(--oa-text-heading) !important;
  font-weight: 600;
}

/* HRM page: auto-style tables inside table panels even without oa-data-table class */
.oa-hrm-page .oa-table-panel > table {
  min-width: 640px;
}

/* Funnel report — blue header with white labels (overrides global thead th color) */
table.funnel-report-table thead,
table.funnel-report-table thead tr.funnel-report-thead {
  background: linear-gradient(to right, #167EC2, #0e5a8a) !important;
}
table.funnel-report-table thead th.funnel-report-th {
  color: #ffffff !important;
  background: transparent !important;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Funnel report — auto-width columns; wide cells wrap long text */
table.funnel-report-table {
  table-layout: auto;
  width: max-content;
  min-width: 100%;
}
table.funnel-report-table td,
table.funnel-report-table th {
  vertical-align: top;
}
table.funnel-report-table .funnel-report-col-compact {
  min-width: 3.25rem;
  white-space: nowrap;
}
table.funnel-report-table .funnel-report-col-id {
  min-width: 6.5rem;
  white-space: nowrap;
}
table.funnel-report-table .funnel-report-col-tag {
  min-width: 5.5rem;
  max-width: 9rem;
  white-space: normal;
  word-break: break-word;
}
table.funnel-report-table .funnel-report-col-medium {
  min-width: 7rem;
  max-width: 11rem;
  white-space: normal;
  word-break: break-word;
}
table.funnel-report-table .funnel-report-col-wide {
  min-width: 10rem;
  max-width: 22rem;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.45;
}
table.funnel-report-table .funnel-report-col-extra-wide {
  min-width: 14rem;
  max-width: 32rem;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.45;
}
table.funnel-report-table .funnel-report-col-remarks {
  min-width: 12rem;
  max-width: 28rem;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.5;
  font-size: 0.6875rem;
}