/* Field Force creative background, October 2026. */
:root{color-scheme:dark;--ff-accent:#ef2929;--ff-surface:rgba(14,14,17,.93)}
html{background:#050507!important;min-height:100%;overflow-x:hidden}
body{background:#050507!important;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif!important;isolation:isolate;min-height:100vh}
body::before,body::after{content:""!important;position:fixed!important;pointer-events:none!important;z-index:-1!important;border:0!important;border-radius:0!important;filter:none!important;mask-image:none!important;will-change:transform}
body::before{inset:-15%!important;width:130vw!important;height:130vh!important;background:radial-gradient(ellipse at 12% 22%,rgba(239,41,41,.19),transparent 35%),radial-gradient(ellipse at 85% 72%,rgba(174,16,38,.15),transparent 40%),linear-gradient(125deg,transparent 48%,rgba(239,41,41,.10) 49%,rgba(255,85,85,.025) 50%,transparent 52%)!important;animation:ffAmbientDrift 24s ease-in-out infinite alternate!important;opacity:1!important}
body::after{inset:-12%!important;width:124vw!important;height:124vh!important;background:repeating-radial-gradient(ellipse at 70% 45%,transparent 0 100px,rgba(239,41,41,.08) 101px 102px,transparent 104px 180px)!important;animation:ffOrbitDrift 32s ease-in-out infinite alternate!important;opacity:.65!important}
@keyframes ffAmbientDrift{from{transform:translate3d(-2%,-1%,0) rotate(-3deg)}to{transform:translate3d(3%,2%,0) rotate(3deg)}}
@keyframes ffOrbitDrift{from{transform:translate3d(2%,1%,0) rotate(0)}to{transform:translate3d(-2%,-2%,0) rotate(8deg)}}
@keyframes ffEnter{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.layout,.main,.wrap,.mobile-shell,.sv-wrap{background:transparent!important}
.wrap,.mobile-shell{border-color:rgba(255,255,255,.065)!important}
.sidebar{background:linear-gradient(180deg,rgba(14,11,13,.97),rgba(5,5,7,.93))!important}
.card,.card2,.sv-card,.panel,.panel2,.kpi,.metric,.info-card,.material,.question,.auth-card,.filters,.alert-card{background:linear-gradient(135deg,rgba(23,23,27,.96),var(--ff-surface))!important;border:1px solid rgba(255,255,255,.10)!important;box-shadow:0 12px 36px rgba(0,0,0,.22)!important;animation:ffEnter .45s ease both;transition:border-color .2s ease,box-shadow .2s ease}
.kpi:nth-child(2),.metric:nth-child(2),.tile:nth-child(2){animation-delay:.04s}
.kpi:nth-child(3),.metric:nth-child(3),.tile:nth-child(3){animation-delay:.08s}
.kpi:nth-child(4),.metric:nth-child(4),.tile:nth-child(4){animation-delay:.12s}
.tile{animation:ffEnter .45s ease both}
.tile.primary{animation:ffEnter .45s ease both!important}
.tile:hover .icon-wrap{animation:none!important;transform:translateY(-2px)}
.icon-wrap{transition:transform .2s ease,box-shadow .2s ease}
.card:hover,.card2:hover,.kpi:hover,.metric:hover{border-color:rgba(239,41,41,.38)!important;box-shadow:0 12px 36px rgba(0,0,0,.28),0 0 20px rgba(239,41,41,.055)!important}
button,.btn,.fbtn,.sv-save,.quick a,.sidebar a{transition:background .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease;cursor:pointer}
button:hover,.fbtn:hover,.sv-save:hover,.quick a:hover{box-shadow:0 5px 22px rgba(239,41,41,.17);transform:translateY(-1px)}
button:active,.btn:active{transform:translateY(0)}
:focus-visible{outline:2px solid #ff6262!important;outline-offset:3px}
.demo-banner{margin:16px 0;padding:14px 18px;border:1px solid rgba(239,41,41,.4);border-radius:12px;background:rgba(90,16,24,.35);color:#fff}
.demo-banner p{margin:6px 0 0;line-height:1.5}
.demo-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0}
.demo-tabs a{padding:9px 12px;background:rgba(24,24,28,.95);border:1px solid #333;border-radius:9px;text-decoration:none;color:#ddd}
.demo-tabs a.active{border-color:#ef2929;background:#641515;color:#fff}
.demo-table{overflow:auto;border-radius:12px;border:1px solid #303035}
.demo-table td,.demo-table th{padding:11px 13px;white-space:nowrap;font-size:13px}
.demo-actions{display:flex;gap:12px;flex-wrap:wrap;margin:15px 0}
.demo-actions a,.demo-actions button{width:auto;margin:0;text-decoration:none;padding:11px 15px}
.demo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.demo-grid .kpi{padding:18px;border-radius:12px}.demo-grid strong{display:block;font-size:27px;margin-top:8px}
.demo-content{width:min(1420px,100%);margin:auto;padding:24px}.demo-content h1{font-size:clamp(25px,4vw,38px)}
.demo-content select{padding:10px;border-radius:8px;max-width:100%}
@media(max-width:700px){body::before{animation-duration:32s!important}body::after{opacity:.4!important}.demo-content{padding:16px}.auth-card{padding:24px}.main{padding:18px!important}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;will-change:auto!important}}
@media print{body::before,body::after{display:none!important}.demo-tabs,.demo-actions,.sidebar{display:none!important}body,td,th{background:#fff!important;color:#000!important}}

/* =========================================================
   HIGH-CONTRAST COLOR SCHEME RESET
   Keeps red branding but removes low-contrast readability issues.
   ========================================================= */
:root{
  color-scheme:light;
  --ff-page:#f3f4f6;
  --ff-surface:#ffffff;
  --ff-surface-soft:#f8fafc;
  --ff-border:#dbe2ea;
  --ff-text:#111827;
  --ff-text-soft:#64748b;
  --ff-accent:#ef2929;
}

html,
body{
  background:var(--ff-page)!important;
  color:var(--ff-text)!important;
}

body::before{
  inset:0!important;
  width:100vw!important;
  height:100vh!important;
  background:radial-gradient(circle at 0 0,rgba(239,41,41,.06),transparent 26%),radial-gradient(circle at 100% 0,rgba(239,41,41,.05),transparent 22%),linear-gradient(180deg,rgba(255,255,255,.25),rgba(255,255,255,0))!important;
  animation:none!important;
  opacity:1!important;
}

body::after{
  inset:0!important;
  width:100vw!important;
  height:100vh!important;
  background:linear-gradient(135deg,transparent 0 48%,rgba(239,41,41,.025) 49%,transparent 50%)!important;
  animation:none!important;
  opacity:.65!important;
}

.layout,.main,.wrap,.mobile-shell,.sv-wrap{
  background:transparent!important;
}

.sidebar{
  background:linear-gradient(180deg,#111111,#1b1b1b)!important;
  border-right:1px solid rgba(255,255,255,.08)!important;
}

.sidebar h1,.sidebar h2,.sidebar h3,
.sidebar a,
.sidebar strong,
.sidebar small,
.sidebar label{
  color:#f8fafc!important;
}

.sidebar a{
  opacity:.9;
}

.sidebar a:hover{
  background:rgba(239,41,41,.12)!important;
  border-color:rgba(239,41,41,.28)!important;
}

.sidebar .active,
.sidebar a.active{
  background:linear-gradient(90deg,#cf1c1c,#a31313)!important;
  color:#fff!important;
}

.card,.card2,.sv-card,.panel,.panel2,.kpi,.metric,.info-card,.material,.question,.auth-card,.filters,.alert-card,
.form-card,.table-wrap,.table-card,.demo-table,.demo-banner,.summary>div,.store,.store-card,.context,.recent,.check{
  background:var(--ff-surface)!important;
  color:var(--ff-text)!important;
  border:1px solid var(--ff-border)!important;
  box-shadow:0 10px 28px rgba(15,23,42,.06)!important;
}

.card *, .card2 *, .sv-card *, .panel *, .panel2 *, .kpi *, .metric *, .info-card *, .material *, .question *, .auth-card *, .filters *, .alert-card *, .form-card *, .table-wrap *, .table-card *, .demo-table *, .demo-banner *, .summary>div *, .store *, .store-card *, .context *, .recent *, .check *{
  color:inherit;
}

h1,h2,h3,h4,h5,h6,strong,label,th,td{
  color:var(--ff-text)!important;
}

p,small,.muted,.meta,.small,.note,.help,.text-muted{
  color:var(--ff-text-soft)!important;
}

input:not([type="radio"]):not([type="checkbox"]),
select,
textarea,
.search,
.report-remarks,
.demo-content select,
.toolbar input,
.form-card input,
.form-card select,
.form-card textarea{
  background:#fff!important;
  color:var(--ff-text)!important;
  border:1px solid #cbd5e1!important;
}

input::placeholder,
textarea::placeholder{
  color:#64748b!important;
}

select option{
  background:#fff!important;
  color:var(--ff-text)!important;
}

table, .users-table, .data-table{
  background:transparent!important;
  color:var(--ff-text)!important;
}

th, table thead th, .users-table thead th, .data-table thead th{
  background:var(--ff-surface-soft)!important;
  color:var(--ff-text)!important;
  border-bottom:1px solid var(--ff-border)!important;
}

td, table tbody td, .users-table tbody td, .data-table tbody td{
  background:#fff!important;
  color:var(--ff-text)!important;
  border-bottom:1px solid #e5e7eb!important;
}

table tbody tr:hover td, .users-table tbody tr:hover td, .data-table tbody tr:hover td{
  background:#f8fafc!important;
}

.demo-tabs a{
  background:#fff!important;
  color:var(--ff-text)!important;
  border:1px solid var(--ff-border)!important;
}

.demo-tabs a.active{
  background:#fee2e2!important;
  color:#991b1b!important;
  border-color:#fecaca!important;
}

button,.btn,.fbtn,.sv-save,.quick a,.action-btn,.form-actions button,.demo-actions a,.demo-actions button{
  background:linear-gradient(145deg,#ef2929,#b31212)!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.08)!important;
  box-shadow:0 8px 22px rgba(239,41,41,.16)!important;
}

.secondary-btn,.btn.secondary,.btn-light,.demo-actions a.secondary,
button.secondary{
  background:#e5e7eb!important;
  color:var(--ff-text)!important;
  border:1px solid #cbd5e1!important;
  box-shadow:none!important;
}

.role,.badge,.pill,.chip,.role-badge,.role-pill,.user-role{
  background:#fee2e2!important;
  color:#991b1b!important;
  border:1px solid #fecaca!important;
  box-shadow:none!important;
}

.status.active{
  background:#dcfce7!important;
  color:#166534!important;
  border:1px solid #bbf7d0!important;
}

.status.inactive{
  background:#fee2e2!important;
  color:#991b1b!important;
  border:1px solid #fecaca!important;
}

.success,.ok{
  background:#ecfdf5!important;
  color:#166534!important;
  border:1px solid #bbf7d0!important;
}

.error,.err{
  background:#fef2f2!important;
  color:#991b1b!important;
  border:1px solid #fecaca!important;
}