@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap");

:root {
  --ff-ink: #09171d;
  --ff-panel: #0d2031;
  --ff-panel-raised: #112a3e;
  --ff-line: rgba(159, 192, 208, 0.16);
  --ff-line-strong: rgba(111, 203, 216, 0.38);
  --ff-text: #edf4f7;
  --ff-muted: #8fa7b6;
  --ff-cyan: #72d7e2;
  --ff-brass: #72d7e2;
  --ff-green: #7ac6a2;
  --ff-danger: #f29a8d;
}

html,
body {
  min-height: 100%;
  background: var(--ff-ink) !important;
}

body {
  color: var(--ff-text);
  font-family: "Manrope", ui-sans-serif, sans-serif;
  background-image:
    linear-gradient(90deg, rgba(119, 193, 202, 0.055) 1px, transparent 1px),
    linear-gradient(rgba(119, 193, 202, 0.05) 1px, transparent 1px),
    linear-gradient(180deg, rgba(30, 61, 69, 0.34), rgba(8, 24, 30, 0.2) 58%, rgba(3, 13, 18, 0.44)),
    radial-gradient(circle at 52% 4%, rgba(46, 98, 107, 0.24), transparent 42rem) !important;
  background-attachment: fixed !important;
  background-size: 132px 132px, 132px 132px, auto, auto !important;
}

::selection { background: rgba(114, 215, 226, 0.28); color: #fff; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--ff-cyan) !important;
  outline-offset: 2px;
}

#root {
  min-height: 100vh;
  color: var(--ff-text);
  font-family: "Manrope", ui-sans-serif, sans-serif;
}

#root .bg-base-100,
#root .bg-base-200,
#root .bg-base-300,
#root .card,
#root .modal-box,
#root .drawer-side > * {
  background-color: var(--ff-panel) !important;
}

#root .border,
#root .border-base-300,
#root .border-slate-700,
#root .border-slate-600 {
  border-color: var(--ff-line) !important;
}

#root .text-base-content,
#root .text-slate-100,
#root .text-slate-200,
#root .text-white { color: var(--ff-text) !important; }
#root .text-slate-300,
#root .text-slate-400,
#root .text-slate-500 { color: var(--ff-muted) !important; }

#root .ff-section-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.85rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--ff-line);
}

#root .ff-section-title {
  color: var(--ff-text);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

#root .ff-detail-section {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--ff-line) !important;
  border-radius: 0.75rem !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.032), transparent 66%), var(--ff-panel) !important;
  box-shadow: 0 14px 35px rgba(1, 9, 17, 0.16);
}

#root .ff-detail-section::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(var(--ff-cyan), transparent 76%);
  opacity: 0.58;
}

#root .btn,
#root .button {
  min-height: 2.45rem;
  border-color: var(--ff-line) !important;
  border-radius: 0.55rem !important;
  background: rgba(255,255,255,0.045) !important;
  color: var(--ff-text) !important;
  box-shadow: none !important;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  transition: transform 150ms ease, border-color 150ms ease, background-color 150ms ease;
}

#root .btn:hover,
#root .button:hover {
  border-color: var(--ff-line-strong) !important;
  background: rgba(114, 215, 226, 0.10) !important;
  transform: translateY(-1px);
}

#root .btn:active,
#root .button:active { transform: translateY(0); }
#root .bg-orange-500,
#root .btn-primary,
#root .btn.bg-orange-500 {
  border-color: var(--ff-brass) !important;
  background: var(--ff-brass) !important;
  color: #172330 !important;
}

#root .input,
#root .select,
#root .textarea,
#root input,
#root select,
#root textarea {
  border-color: var(--ff-line) !important;
  border-radius: 0.5rem !important;
  background: rgba(3, 14, 24, 0.48) !important;
  color: var(--ff-text) !important;
  box-shadow: none !important;
}

#root .input:focus,
#root .select:focus,
#root .textarea:focus,
#root input:focus,
#root select:focus,
#root textarea:focus {
  border-color: var(--ff-cyan) !important;
  box-shadow: 0 0 0 3px rgba(114, 215, 226, 0.11) !important;
}

#root .badge {
  border: 1px solid rgba(114, 215, 226, 0.24);
  border-radius: 999px;
  background: rgba(114, 215, 226, 0.1);
  color: var(--ff-cyan);
  font-size: 0.63rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Work order command center */
#ff-work-orders-hub {
  color: var(--ff-text) !important;
  font-family: "Manrope", ui-sans-serif, sans-serif !important;
  background: var(--ff-ink) !important;
}

#ff-work-orders-hub .ff-shell {
  padding-top: clamp(1.5rem, 4vw, 3.25rem);
  background:
    linear-gradient(90deg, rgba(114, 215, 226, 0.026) 1px, transparent 1px),
    linear-gradient(rgba(114, 215, 226, 0.022) 1px, transparent 1px),
    radial-gradient(circle at 82% -8%, rgba(80, 174, 190, 0.19), transparent 33rem),
    radial-gradient(circle at 5% 0, rgba(229, 173, 84, 0.11), transparent 27rem),
    var(--ff-ink) !important;
  background-size: 42px 42px, 42px 42px, auto, auto, auto !important;
}

#ff-work-orders-hub .ff-top {
  align-items: flex-end;
  margin-bottom: 1.8rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--ff-line);
}

#ff-work-orders-hub .ff-kicker {
  color: var(--ff-cyan) !important;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
}

#ff-work-orders-hub .ff-title,
#ff-work-orders-hub .ff-modal h2 {
  color: var(--ff-text) !important;
  font-family: "Barlow Condensed", sans-serif !important;
  font-weight: 700;
  letter-spacing: 0.005em !important;
  text-transform: uppercase;
}

#ff-work-orders-hub .ff-title { font-size: clamp(2.2rem, 5vw, 4.2rem) !important; line-height: 0.9; }
#ff-work-orders-hub .ff-subtitle { max-width: 37rem; color: var(--ff-muted) !important; }

#ff-work-orders-hub .ff-button {
  min-height: 2.5rem;
  border-color: var(--ff-line) !important;
  border-radius: 0.55rem !important;
  background: rgba(255,255,255,0.045) !important;
  color: var(--ff-text) !important;
  font-family: "Manrope", sans-serif !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

#ff-work-orders-hub .ff-button:hover { border-color: var(--ff-line-strong) !important; background: rgba(114,215,226,0.11) !important; }
#ff-work-orders-hub .ff-button.primary { border-color: var(--ff-brass) !important; background: var(--ff-brass) !important; color: #152231 !important; }
#ff-work-orders-hub .ff-button.primary:hover { background: #f1be70 !important; }

#ff-work-orders-hub .ff-summary { gap: 0.7rem; }
#ff-work-orders-hub .ff-stat,
#ff-work-orders-hub .ff-toolbar,
#ff-work-orders-hub .ff-card {
  border-color: var(--ff-line) !important;
  border-radius: 0.75rem !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.035), transparent 68%), rgba(13,32,49,0.9) !important;
  box-shadow: 0 14px 35px rgba(1, 9, 17, 0.17);
}

#ff-work-orders-hub .ff-stat { padding: 1rem 1.1rem !important; }
#ff-work-orders-hub .ff-stat strong { color: var(--ff-brass) !important; font-family: "Barlow Condensed", sans-serif; font-size: 2rem !important; font-weight: 700; letter-spacing: 0.02em !important; }
#ff-work-orders-hub .ff-stat span { color: var(--ff-muted) !important; font-size: 0.68rem !important; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }

#ff-work-orders-hub .ff-toolbar { padding: 0.7rem !important; }
#ff-work-orders-hub .ff-search,
#ff-work-orders-hub .ff-field input,
#ff-work-orders-hub .ff-field textarea,
#ff-work-orders-hub .ff-field select {
  border-color: var(--ff-line) !important;
  border-radius: 0.5rem !important;
  background: rgba(3,14,24,0.48) !important;
}
#ff-work-orders-hub .ff-search:focus,
#ff-work-orders-hub .ff-field input:focus,
#ff-work-orders-hub .ff-field textarea:focus,
#ff-work-orders-hub .ff-field select:focus { border-color: var(--ff-cyan) !important; box-shadow: 0 0 0 3px rgba(114,215,226,0.11) !important; }
#ff-work-orders-hub .ff-filter { border: 1px solid transparent !important; border-radius: 0.45rem !important; color: var(--ff-muted) !important; font-size: 0.67rem !important; letter-spacing: 0.03em; text-transform: uppercase; }
#ff-work-orders-hub .ff-filter.active { border-color: rgba(114,215,226,0.35) !important; background: rgba(114,215,226,0.12) !important; color: var(--ff-cyan) !important; }

#ff-work-orders-hub .ff-card { min-height: 16.5rem; padding: 1.1rem !important; }
#ff-work-orders-hub .ff-card:hover { border-color: rgba(114,215,226,0.42) !important; transform: translateY(-2px); }
#ff-work-orders-hub .ff-card h2 { font-family: "Barlow Condensed", sans-serif; font-size: 1.45rem !important; font-weight: 700; letter-spacing: 0.025em; text-transform: uppercase; }
#ff-work-orders-hub .ff-client { color: var(--ff-cyan) !important; font-size: 0.74rem !important; font-weight: 700; }
#ff-work-orders-hub .ff-address { color: #bfd0da !important; }
#ff-work-orders-hub .ff-meta { color: var(--ff-muted) !important; font-size: 0.69rem !important; }
#ff-work-orders-hub .ff-meta a { color: var(--ff-cyan) !important; }
#ff-work-orders-hub .ff-badge { border-radius: 999px !important; background: rgba(114,215,226,0.1) !important; color: var(--ff-cyan) !important; font-size: 0.61rem !important; letter-spacing: 0.065em; text-transform: uppercase; }
#ff-work-orders-hub .ff-badge.high { background: rgba(114,215,226,0.13) !important; color: var(--ff-brass) !important; }
#ff-work-orders-hub .ff-badge.complete { background: rgba(122,198,162,0.13) !important; color: var(--ff-green) !important; }
#ff-work-orders-hub .ff-avatar { border-color: var(--ff-panel) !important; background: var(--ff-brass) !important; color: #172330 !important; }
#ff-work-orders-hub .ff-card-actions { border-color: var(--ff-line) !important; }
#ff-work-orders-hub .ff-empty { border-color: var(--ff-line-strong) !important; border-radius: 0.75rem !important; background: rgba(13,32,49,0.5); }

#ff-work-orders-hub .ff-modal { background: rgba(2, 10, 18, 0.82) !important; }
#ff-work-orders-hub .ff-modal-card { border-color: var(--ff-line-strong) !important; border-radius: 0.8rem !important; background: var(--ff-panel) !important; }
#ff-work-orders-hub .ff-field label { color: var(--ff-muted) !important; font-size: 0.61rem !important; letter-spacing: 0.12em !important; }
#ff-work-orders-hub .ff-worker-option,
#ff-work-orders-hub .ff-material-row { border-color: var(--ff-line) !important; border-radius: 0.55rem !important; background: rgba(3,14,24,0.23) !important; }
#ff-work-orders-hub .ff-worker-option.selected { border-color: var(--ff-line-strong) !important; background: rgba(114,215,226,0.10) !important; }
#ff-work-orders-hub .ff-modal-actions,
#ff-work-orders-hub .ff-card-actions { border-color: var(--ff-line) !important; }

/* Material estimating panel */
.ff-material-panel {
  --ff-orange: var(--ff-brass);
  --ff-cyan: #72d7e2;
  --ff-sand: #c6a875;
  border-color: var(--ff-line) !important;
  border-radius: 0.75rem !important;
  background:
    linear-gradient(120deg, rgba(114,215,226,0.065), transparent 38%),
    linear-gradient(315deg, rgba(114,215,226,0.055), transparent 44%),
    var(--ff-panel) !important;
  box-shadow: 0 14px 35px rgba(1, 9, 17, 0.16) !important;
}
.ff-material-panel::before { opacity: 0.09 !important; }
.ff-material-heading h3,
.ff-material-summary h4 { font-family: "Barlow Condensed", sans-serif !important; letter-spacing: 0.025em !important; text-transform: uppercase; }
.ff-material-heading h3 { font-size: 1.45rem !important; }
.ff-material-kicker { color: var(--ff-cyan) !important; font-size: 0.61rem !important; letter-spacing: 0.17em !important; }
.ff-material-heading p { color: var(--ff-muted) !important; }
.ff-material-formula,
.ff-material-card,
.ff-material-result { border-color: var(--ff-line) !important; border-radius: 0.65rem !important; }
.ff-material-formula { background: rgba(3,14,24,0.36) !important; }
.ff-material-card { background: rgba(3,14,24,0.28) !important; }
.ff-material-card[open] { border-color: rgba(114,215,226,0.38) !important; background: rgba(8,24,39,0.82) !important; }
.ff-material-summary { min-height: 4.45rem !important; }
.ff-material-icon { border-radius: 0.5rem !important; }
.ff-material-density { color: var(--ff-muted) !important; }
.ff-material-input-wrap { border-color: var(--ff-line) !important; border-radius: 0.5rem !important; background: rgba(3,14,24,0.5) !important; }
.ff-material-input { font-family: "Manrope", ui-sans-serif, sans-serif !important; font-weight: 700 !important; }
.ff-material-result { background: rgba(255,255,255,0.028) !important; }
.ff-material-result--primary { background: rgba(114,215,226,0.10) !important; border-color: rgba(114,215,226,0.34) !important; }
.ff-material-result--primary > span,
.ff-material-result--primary strong { color: var(--ff-brass) !important; }
.ff-material-clear { border-color: var(--ff-line) !important; border-radius: 0.5rem !important; font-family: "Manrope", sans-serif !important; font-size: 0.64rem !important; letter-spacing: 0.04em; text-transform: uppercase; }
.ff-material-clear:hover { border-color: var(--ff-cyan) !important; color: var(--ff-cyan) !important; }

@media (max-width: 640px) {
  #ff-work-orders-hub .ff-top { align-items: flex-start; }
  #ff-work-orders-hub .ff-title { font-size: 2.45rem !important; }
  #ff-work-orders-hub .ff-actions { width: 100%; }
  #ff-work-orders-hub .ff-actions .ff-button { flex: 1; }
  #ff-work-orders-hub .ff-toolbar { align-items: stretch; }
  #ff-work-orders-hub .ff-search { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  #root .btn, #root .button, #ff-work-orders-hub .ff-card, #ff-work-orders-hub .ff-button { transition: none !important; }
}

/* Full application theme: DaisyUI and utility component coverage */
[data-theme="night"] {
  --p: 190 55% 52%;
  --pf: 190 55% 44%;
  --pc: 207 47% 10%;
  --s: 39 67% 61%;
  --sf: 39 62% 53%;
  --sc: 207 47% 10%;
  --a: 152 34% 63%;
  --af: 152 34% 54%;
  --ac: 207 47% 10%;
  --n: 207 52% 13%;
  --nf: 207 51% 10%;
  --nc: 196 32% 94%;
  --b1: 207 47% 12%;
  --b2: 207 46% 10%;
  --b3: 207 45% 8%;
  --bc: 196 32% 94%;
  --in: 190 55% 52%;
  --su: 152 34% 63%;
  --wa: 39 67% 61%;
  --er: 8 63% 72%;
  --rounded-box: 0.75rem;
  --rounded-btn: 0.55rem;
  --rounded-badge: 999px;
}

#root .card,
#root .card-body,
#root .stats,
#root .stat,
#root .table,
#root .table :where(thead, tfoot),
#root .alert,
#root .collapse,
#root .dropdown-content,
#root .toast > *,
#root .menu {
  border-color: var(--ff-line) !important;
}

#root .card,
#root .stats,
#root .alert,
#root .collapse,
#root .dropdown-content,
#root .toast > * {
  background: linear-gradient(135deg, rgba(255,255,255,0.035), transparent 72%), var(--ff-panel) !important;
  box-shadow: 0 14px 35px rgba(1, 9, 17, 0.14);
}

#root .card { border-radius: 0.75rem !important; }
#root .card-body { gap: 0.85rem; }
#root .table { border-radius: 0.75rem; overflow: hidden; }
#root .table :where(th, td) { border-color: var(--ff-line) !important; }
#root .table :where(th) {
  color: var(--ff-muted) !important;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
#root .table tbody tr { transition: background-color 140ms ease; }
#root .table tbody tr:hover { background: rgba(114, 215, 226, 0.055) !important; }

#root .divider { color: var(--ff-muted) !important; }
#root .divider::before,
#root .divider::after { background-color: var(--ff-line) !important; }

#root .alert {
  border: 1px solid var(--ff-line) !important;
  border-radius: 0.65rem !important;
  color: var(--ff-text) !important;
}
#root .alert-warning { border-color: rgba(229, 173, 84, 0.38) !important; background: rgba(229, 173, 84, 0.11) !important; color: #f4d49d !important; }

#root .checkbox,
#root .radio,
#root .toggle {
  border-color: var(--ff-line-strong) !important;
  background-color: rgba(3, 14, 24, 0.55) !important;
}
#root .checkbox:checked,
#root .radio:checked,
#root .toggle:checked,
#root .checkbox-primary:checked {
  border-color: var(--ff-cyan) !important;
  background-color: var(--ff-cyan) !important;
  color: var(--ff-ink) !important;
}
#root .range { color: var(--ff-brass) !important; }
#root .range::-webkit-slider-runnable-track { background: rgba(143, 167, 182, 0.26); }
#root .range::-moz-range-track { background: rgba(143, 167, 182, 0.26); }
#root .range::-webkit-slider-thumb { border-color: var(--ff-brass); background: var(--ff-brass); }
#root .range::-moz-range-thumb { border-color: var(--ff-brass); background: var(--ff-brass); }
#root .loading { color: var(--ff-cyan) !important; }

#root .bg-slate-900 { background-color: var(--ff-ink) !important; }
#root .bg-slate-800 { background-color: var(--ff-panel) !important; }
#root .bg-slate-700 { background-color: var(--ff-panel-raised) !important; }
#root .bg-slate-500,
#root .bg-slate-400 { background-color: rgba(143, 167, 182, 0.48) !important; }

#root .bg-orange-400,
#root .bg-orange-500,
#root .bg-orange-600 { background-color: var(--ff-brass) !important; color: var(--ff-ink) !important; }
#root .border-orange-400,
#root .border-orange-500 { border-color: var(--ff-brass) !important; }
#root .text-orange-100,
#root .text-orange-300,
#root .text-orange-400,
#root .text-orange-500,
#root .text-amber-400 { color: var(--ff-brass) !important; }
#root .ring-orange-500 { --tw-ring-color: rgba(229, 173, 84, 0.42) !important; }

#root .bg-cyan-400,
#root .bg-cyan-500,
#root .bg-blue-500 { background-color: var(--ff-cyan) !important; color: var(--ff-ink) !important; }
#root .border-cyan-400,
#root .border-cyan-500,
#root .border-blue-500 { border-color: var(--ff-cyan) !important; }
#root .text-cyan-400,
#root .text-blue-300,
#root .text-blue-400 { color: var(--ff-cyan) !important; }

#root .bg-emerald-400,
#root .bg-emerald-500 { background-color: var(--ff-green) !important; color: var(--ff-ink) !important; }
#root .border-emerald-400,
#root .border-emerald-500 { border-color: var(--ff-green) !important; }
#root .text-emerald-400 { color: var(--ff-green) !important; }

#root .bg-red-500 { background-color: var(--ff-danger) !important; color: var(--ff-ink) !important; }
#root .border-red-500 { border-color: var(--ff-danger) !important; }
#root .text-red-400 { color: var(--ff-danger) !important; }

#root :where(h1, h2, h3).font-bold,
#root .text-2xl.font-bold,
#root .text-xl.font-bold {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  letter-spacing: 0.02em;
}

#root [class*="rounded-full"]:is(.bg-orange-400, .bg-orange-500, .bg-orange-600, .bg-cyan-400, .bg-cyan-500, .bg-blue-500, .bg-emerald-400, .bg-emerald-500) {
  box-shadow: 0 0 0 3px rgba(7, 20, 33, 0.84);
}

@media (max-width: 640px) {
  #root .table :where(th, td) { padding: 0.65rem 0.5rem; }
  #root .card-body { padding: 1rem; }
}

/* The compiled dashboard also renders inline colour values. Keep those areas aligned with Work Orders. */
#root [style*="background:#0a1628"],
#root [style*="background: #0a1628"],
#root [style*="background:#0f172a"],
#root [style*="background: #0f172a"] { background: var(--ff-ink) !important; }
#root [style*="background:#0f1d32"],
#root [style*="background: #0f1d32"] { background: var(--ff-panel) !important; }
#root [style*="background:#1e293b"],
#root [style*="background: #1e293b"] { background: var(--ff-panel-raised) !important; }
#root [style*="border-color:#1e293b"],
#root [style*="border-color: #1e293b"] { border-color: var(--ff-line) !important; }

/* Readable action hierarchy — keeps every button legible against the field-console surfaces. */
#root .btn,
#root button.btn,
#root a.btn {
  border: 1px solid rgba(159, 192, 208, 0.3) !important;
  background: #112a3e !important;
  color: #edf4f7 !important;
  font-weight: 800 !important;
  text-shadow: none !important;
}

#root .btn > *,
#root button.btn > *,
#root a.btn > * { color: inherit !important; }

#root .btn-primary,
#root button.btn-primary,
#root a.btn-primary,
#root button.bg-orange-400,
#root button.bg-orange-500,
#root button.bg-orange-600 {
  border-color: var(--ff-cyan) !important;
  background: var(--ff-cyan) !important;
  color: #07111f !important;
}

#root .btn-secondary,
#root .btn-warning,
#root button.btn-warning {
  border-color: #58bfcf !important;
  background: #58bfcf !important;
  color: #07111f !important;
}

#root .btn-info,
#root button.btn-info {
  border-color: #72d7e2 !important;
  background: #72d7e2 !important;
  color: #07111f !important;
}

#root .btn-success,
#root button.btn-success,
#root button[class*="bg-green-"] {
  border-color: #7ac6a2 !important;
  background: #7ac6a2 !important;
  color: #07111f !important;
}

#root .btn-error,
#root button.btn-error {
  border-color: #f29a8d !important;
  background: #f29a8d !important;
  color: #07111f !important;
}

#root .btn-outline {
  border-color: rgba(114, 215, 226, 0.5) !important;
  background: transparent !important;
  color: #c8edf1 !important;
}

#root .btn-ghost {
  border-color: transparent !important;
  background: transparent !important;
  color: #d6e4ea !important;
}

#root .btn:hover:not(:disabled),
#root button.btn:hover:not(:disabled),
#root a.btn:hover {
  border-color: #72d7e2 !important;
  background: #183a50 !important;
  color: #ffffff !important;
}

#root .btn-primary:hover:not(:disabled),
#root button.btn-primary:hover:not(:disabled),
#root button.bg-orange-400:hover:not(:disabled),
#root button.bg-orange-500:hover:not(:disabled),
#root button.bg-orange-600:hover:not(:disabled) {
  border-color: #f3c77c !important;
  background: #f3c77c !important;
  color: #07111f !important;
}

#root .btn-success:hover:not(:disabled),
#root button.btn-success:hover:not(:disabled),
#root button[class*="bg-green-"]:hover:not(:disabled) {
  border-color: #9ad9b9 !important;
  background: #9ad9b9 !important;
  color: #07111f !important;
}

#root .btn-error:hover:not(:disabled),
#root button.btn-error:hover:not(:disabled) {
  border-color: #ffc1b6 !important;
  background: #ffc1b6 !important;
  color: #07111f !important;
}

#root .btn:disabled,
#root button.btn:disabled {
  border-color: rgba(159, 192, 208, 0.16) !important;
  background: rgba(17, 42, 62, 0.48) !important;
  color: rgba(237, 244, 247, 0.46) !important;
  opacity: 1 !important;
}

#root .btn-ghost.text-orange-400,
#root .btn-ghost.text-orange-500 { color: #f1c472 !important; }
#root .btn-ghost.text-cyan-400,
#root .btn-ghost.text-teal-400 { color: #9ce5eb !important; }
#root .btn-ghost.text-emerald-400,
#root .btn-ghost.text-green-400 { color: #9ad9b9 !important; }
#root .btn-ghost.text-red-400,
#root .btn-ghost.text-error { color: #ffc1b6 !important; }
#root .btn-ghost.text-slate-400,
#root .btn-ghost.text-slate-500 { color: #b8cad3 !important; }

/* Worker identity and access controls */
#ff-work-orders-hub .ff-account { color: var(--ff-muted); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; }
#ff-work-orders-hub .ff-team-list { display: grid; gap: 0.65rem; margin-top: 1rem; }
#ff-work-orders-hub .ff-team-copy { display: grid; gap: 0.12rem; flex: 1; min-width: 0; }
#ff-work-orders-hub .ff-team-copy strong { color: var(--ff-text); font-size: 0.88rem; }
#ff-work-orders-hub .ff-team-copy small { color: var(--ff-muted); font-size: 0.72rem; }
#ff-work-orders-hub .ff-access-select { margin-left: auto; color: var(--ff-muted); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; }
#ff-work-orders-hub .ff-access-select select { display: block; width: 7rem; margin-top: 0.28rem; }

.ff-auth-modal { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; padding: 1.25rem; background: rgba(2, 10, 18, 0.82); backdrop-filter: blur(7px); }
.ff-auth-card { position: relative; width: min(100%, 28rem); display: grid; gap: 0.85rem; padding: clamp(1.4rem, 4vw, 2.1rem); border: 1px solid rgba(115, 214, 226, 0.34); border-radius: 0.85rem; background: #0d2031; box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.35); color: #edf4f7; font-family: "Barlow Condensed", sans-serif; }
.ff-auth-kicker { margin: 0; color: #72d7e2; font-size: 0.67rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.ff-auth-card h2 { margin: -0.25rem 2rem 0 0; font-size: clamp(1.7rem, 5vw, 2.25rem); line-height: 0.95; }
.ff-auth-intro { margin: 0 0 0.3rem; color: #9fb4c1; font-family: "Barlow", sans-serif; font-size: 0.9rem; line-height: 1.45; }
.ff-auth-card label { display: grid; gap: 0.32rem; color: #cbdde5; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.ff-auth-card input, .ff-auth-card select { width: 100%; border: 1px solid rgba(185, 207, 226, 0.24); border-radius: 0.45rem; background: #071a2d; color: #edf4f7; padding: 0.72rem 0.78rem; font: 400 0.95rem "Barlow", sans-serif; text-transform: none; letter-spacing: normal; }
.ff-auth-card input:focus, .ff-auth-card select:focus { outline: 2px solid rgba(114, 215, 226, 0.45); outline-offset: 1px; }
.ff-auth-submit, .ff-auth-switch, .ff-auth-close { border: 0; cursor: pointer; font-family: "Barlow", sans-serif; }
.ff-auth-submit { margin-top: 0.35rem; border-radius: 0.5rem; background: #f4a51c; color: #111b28; padding: 0.78rem 1rem; font-weight: 800; }
.ff-auth-submit:disabled { cursor: wait; opacity: 0.65; }
.ff-auth-switch { justify-self: start; padding: 0; background: transparent; color: #72d7e2; font-size: 0.82rem; }
.ff-auth-close { position: absolute; top: 0.8rem; right: 0.9rem; background: transparent; color: #9fb4c1; font-size: 1.5rem; line-height: 1; }
.ff-auth-error { min-height: 1.1rem; margin: 0; color: #f29a8d; font-family: "Barlow", sans-serif; font-size: 0.8rem; line-height: 1.35; }