/* =========================================================
   ACS OPS UI V12 — full remaining UI rework
   ========================================================= */

:root{
  --acs-bg:#f3f6fb;
  --acs-bg2:#e9eef5;
  --acs-panel:#0f172a;
  --acs-panel2:#172033;
  --acs-card:#ffffff;
  --acs-ink:#0f172a;
  --acs-muted:#64748b;
  --acs-line:rgba(148,163,184,.25);
  --acs-red:#c5161d;
  --acs-red2:#8f1117;
  --acs-gold:#f8c14a;
  --acs-green:#15803d;
  --acs-blue:#1d4ed8;
  --acs-shadow:0 18px 55px rgba(15,23,42,.10);
  --acs-radius:22px;
}

*{box-sizing:border-box;min-width:0}
html,body{overflow-x:hidden!important}
body.acs-app-body,body{
  background:
    radial-gradient(circle at top left, rgba(197,22,29,.08), transparent 28rem),
    linear-gradient(180deg,var(--acs-bg),var(--acs-bg2)) !important;
  color:var(--acs-ink)!important;
  font-family:Inter,Arial,Helvetica,sans-serif;
}

/* ===== top bar ===== */
.topbar,.acs-topbar{
  background:
    radial-gradient(circle at 10% 10%, rgba(248,193,74,.12), transparent 16rem),
    linear-gradient(135deg,#090b10,#172033 60%,#2a0d10) !important;
  color:#fff!important;
  border-bottom:1px solid rgba(255,255,255,.08)!important;
  box-shadow:0 16px 42px rgba(2,6,23,.30)!important;
  position:sticky; top:0; z-index:90;
}
.brand,.acs-brand{
  color:#fff!important;
  text-decoration:none!important;
  display:flex!important;
  align-items:center!important;
  gap:.75rem!important;
}
.brand-name{font-weight:950;letter-spacing:.01em}
.brand small{color:#cbd5e1!important;display:block;font-size:.74rem;margin-top:.1rem}
.logo,.acs-logo{
  width:42px;height:42px;border-radius:14px;object-fit:cover;
  background:#fff;box-shadow:0 8px 22px rgba(0,0,0,.30)
}
.container,.acs-container{max-width:1180px!important;padding-bottom:6rem!important}

/* ===== generic surfaces ===== */
.card,.panel,.tile,.well,.metric,.summary-card,.kpi-card{
  background:rgba(255,255,255,.96)!important;
  border:1px solid var(--acs-line)!important;
  border-radius:var(--acs-radius)!important;
  box-shadow:var(--acs-shadow)!important;
}
.flash{
  border-radius:16px!important;
  box-shadow:0 14px 35px rgba(15,23,42,.10)!important;
}
.page-hero,.staff-hero,.dashboard-hero,.hero-card,.compact-hero{
  background:
    radial-gradient(circle at 12% 10%, rgba(248,193,74,.22), transparent 18rem),
    linear-gradient(135deg,#0b1220,#172033 56%,#3a0d12) !important;
  color:#fff!important;
  border:0!important;
  border-radius:28px!important;
  box-shadow:0 24px 65px rgba(15,23,42,.18)!important;
  padding:1.25rem 1.25rem!important;
  margin-bottom:1rem!important;
}
.page-hero h1,.staff-hero h1,.dashboard-hero h1,.hero-card h1,.compact-hero h1{
  color:#fff!important;
  font-size:clamp(2.1rem,5vw,4rem)!important;
  line-height:.95!important;
  letter-spacing:-.06em!important;
  margin:.15rem 0 .45rem!important;
}
.page-hero .muted,.staff-hero .muted,.dashboard-hero .muted,.hero-card .muted{color:#dbeafe!important}
.eyebrow{
  color:var(--acs-red)!important;
  text-transform:uppercase!important;
  letter-spacing:.13em!important;
  font-size:.72rem!important;
  font-weight:950!important;
  margin:0 0 .35rem!important;
}
.page-hero .eyebrow,.staff-hero .eyebrow,.dashboard-hero .eyebrow,.hero-card .eyebrow{color:var(--acs-gold)!important}

/* ===== buttons / pills ===== */
.btn{
  border-radius:14px!important;
  font-weight:900!important;
  min-height:42px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:.42rem!important;
  text-decoration:none!important;
}
.btn-primary,.btn.danger,.btn-red{
  background:linear-gradient(135deg,var(--acs-red),var(--acs-red2))!important;
  color:#fff!important;
  border-color:transparent!important;
}
.btn-ghost,.btn.secondary,.btn:not(.btn-primary):not(.danger):not(.btn-red){
  background:#fff!important;
  color:var(--acs-ink)!important;
  border:1px solid var(--acs-line)!important;
}
.pill,.badge,.status-pill,.job-badges em{
  display:inline-flex!important;
  align-items:center!important;
  border-radius:999px!important;
  padding:.34rem .62rem!important;
  font-size:.74rem!important;
  font-style:normal!important;
  font-weight:950!important;
  background:#eef2ff!important;
  color:#1e3a8a!important;
  border:1px solid rgba(99,102,241,.16)!important;
}
.job-badges em.hot{background:#fee2e2!important;color:#991b1b!important}

/* ===== generic forms ===== */
form.card, .form-card{padding:1rem!important}
label{font-weight:900!important;font-size:.83rem!important;color:#1e293b!important}
input,select,textarea{
  width:100%!important;
  border-radius:14px!important;
  border:1px solid rgba(148,163,184,.34)!important;
  background:#fff!important;
  min-height:44px!important;
  padding:.72rem .82rem!important;
  font:inherit!important;
}
textarea{min-height:96px!important;resize:vertical!important}
hr{border:none!important;border-top:1px solid rgba(148,163,184,.22)!important;margin:1rem 0!important}

/* ===== generic tables ===== */
.table-wrap,.table-responsive,.overflow-auto{overflow:auto!important;border:1px solid var(--acs-line)!important;border-radius:18px!important}
table{
  width:100%!important;
  border-collapse:collapse!important;
  background:#fff!important;
  max-width:100%!important;
}
th,td{
  padding:.72rem .78rem!important;
  border-bottom:1px solid rgba(148,163,184,.18)!important;
  text-align:left!important;
  vertical-align:top!important;
}
th{
  background:#f1f5f9!important;
  color:#475569!important;
  text-transform:uppercase!important;
  letter-spacing:.06em!important;
  font-size:.73rem!important;
}
tr:last-child td{border-bottom:none!important}

/* ===== dashboard / metrics ===== */
.staff-stat-grid,.stats-grid,.kpi-grid,.metrics-grid,.dashboard-stats{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:1rem!important;
  margin:1rem 0!important;
}
.staff-stat,.stat-card,.kpi-card,.metric-card,.summary-card{
  position:relative!important;
  padding:1rem!important;
  overflow:hidden!important;
}
.staff-stat:before,.stat-card:before,.kpi-card:before,.metric-card:before,.summary-card:before{
  content:""!important;
  position:absolute!important;left:0;top:0;bottom:0;width:5px!important;
  background:linear-gradient(var(--acs-red),var(--acs-gold))!important;
}
.staff-stat span,.stat-card span,.kpi-card span,.metric-card span,.summary-card span{
  color:var(--acs-muted)!important;
  font-size:.78rem!important;
  text-transform:uppercase!important;
  letter-spacing:.06em!important;
  font-weight:900!important;
}
.staff-stat strong,.stat-card strong,.kpi-card strong,.metric-card strong,.summary-card strong{
  display:block!important;
  font-size:2rem!important;
  line-height:1!important;
  margin-top:.42rem!important;
  letter-spacing:-.04em!important;
}

/* ===== jobs list ===== */
.job-filter-bar,.filter-v11{
  display:grid!important;
  grid-template-columns:1fr 180px auto!important;
  gap:.75rem!important;
  padding:.9rem!important;
  margin-bottom:1rem!important;
}
.jobs-card-list,.jobs-v11-list,.staff-card-list{display:grid!important;gap:.7rem!important}
.job-row-v11,.job-list-card,.staff-job-card{
  display:grid!important;
  grid-template-columns:1fr auto!important;
  gap:.7rem!important;
  padding:.9rem!important;
  border-radius:18px!important;
  background:linear-gradient(180deg,#fff,#f8fafc)!important;
  border:1px solid rgba(148,163,184,.25)!important;
  box-shadow:0 8px 20px rgba(15,23,42,.06)!important;
}
.job-main-link,.staff-job-card{
  text-decoration:none!important;color:var(--acs-ink)!important;min-width:0!important
}
.job-title-line{display:flex!important;align-items:center!important;gap:.45rem!important;min-width:0!important}
.job-title-line strong{font-size:1.03rem!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.job-number{font-weight:950!important;color:#64748b!important;font-size:.8rem!important;flex:0 0 auto!important}
.job-address-line,.job-date-line{color:#64748b!important;font-weight:760!important;font-size:.85rem!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;margin-top:.12rem!important}
.job-side-v11{display:flex!important;flex-direction:column!important;align-items:flex-end!important;gap:.35rem!important}
.job-pills-v11{display:flex!important;gap:.3rem!important;flex-wrap:wrap!important;justify-content:flex-end!important}
.job-pills-v11 span{
  border-radius:999px!important;
  background:#eef2ff!important;
  color:#1e3a8a!important;
  border:1px solid rgba(99,102,241,.18)!important;
  font-size:.7rem!important;
  font-weight:950!important;
  padding:.28rem .5rem!important;
}
.job-money-v11{text-align:right!important}
.job-money-v11 b{display:block!important;font-size:.92rem!important}
.job-money-v11 small{display:block!important;color:#64748b!important;font-weight:850!important;font-size:.72rem!important}
.job-actions-v11{display:flex!important;gap:.45rem!important;justify-content:flex-end!important}
.job-actions-v11 .btn{min-height:36px!important;padding:.45rem .7rem!important;font-size:.82rem!important;border-radius:12px!important}

/* ===== employee chips / job form ===== */
.form-grid-v11{display:grid!important;grid-template-columns:1fr 1fr!important;gap:1rem!important}
.mini-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:.75rem!important}
.employee-chip-grid{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(185px,1fr))!important;
  gap:.6rem!important;
}
.employee-chip{
  position:relative!important;
  display:grid!important;
  grid-template-columns:34px 1fr!important;
  grid-template-rows:auto auto!important;
  align-items:center!important;
  column-gap:.55rem!important;
  padding:.7rem!important;
  border:1px solid rgba(148,163,184,.28)!important;
  border-radius:16px!important;
  background:linear-gradient(180deg,#fff,#f8fafc)!important;
  box-shadow:0 8px 20px rgba(15,23,42,.06)!important;
  min-height:64px!important;
  cursor:pointer!important;
}
.employee-chip input{position:absolute!important;opacity:0!important;width:1px!important;height:1px!important}
.employee-chip .checkmark{
  grid-row:1 / span 2!important;
  width:30px!important;height:30px!important;border-radius:10px!important;
  background:#e2e8f0!important;color:#64748b!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  font-weight:1000!important;font-size:1.1rem!important;
}
.employee-chip input:checked + .checkmark{
  background:linear-gradient(135deg,#0ea5e9,#0369a1)!important;color:#fff!important
}
.employee-chip .employee-name{
  font-weight:950!important;font-size:.86rem!important;
  white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important
}
.employee-chip small{
  color:#64748b!important;font-weight:800!important;font-size:.72rem!important;
  white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important
}
.form-actions-sticky{display:flex!important;gap:.55rem!important;margin-top:1rem!important}

/* ===== billing page global help ===== */
.metrics{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:10px!important;
}
.metric{
  padding:14px!important;
  position:relative!important;
  overflow:hidden!important;
  background:linear-gradient(180deg,#fff,#f8fafc)!important;
}
.metric:before{
  content:""!important;position:absolute!important;left:0;top:0;bottom:0;width:4px!important;
  background:linear-gradient(var(--acs-red),var(--acs-gold))!important;
}
.metric .label{
  font-size:11px!important;text-transform:uppercase!important;letter-spacing:.08em!important;
  color:var(--acs-muted)!important;font-weight:950!important
}
.metric .value{font-size:1.35rem!important;font-weight:1000!important;margin-top:5px!important;letter-spacing:-.04em!important}
.metric.profit .value{color:var(--acs-green)!important}

/* ===== bottom nav ===== */
.bottombar,.acs-bottom-nav{
  height:auto!important;
  min-height:58px!important;
  padding:7px 8px calc(7px + env(safe-area-inset-bottom))!important;
  gap:6px!important;
  background:rgba(7,10,16,.94)!important;
  backdrop-filter:blur(18px)!important;
  border-top:1px solid rgba(255,255,255,.08)!important;
  box-shadow:0 -18px 50px rgba(2,6,23,.24)!important;
}
.bottombar .navitem,.acs-bottom-nav .navitem{
  height:44px!important;min-height:44px!important;border-radius:14px!important;
  padding:5px 3px!important;display:flex!important;flex-direction:column!important;
  align-items:center!important;justify-content:center!important;gap:2px!important;
  background:rgba(255,255,255,.04)!important;color:#cbd5e1!important;
  text-decoration:none!important;overflow:hidden!important
}
.bottombar .navitem span,.acs-bottom-nav .navitem span{
  width:24px!important;height:24px!important;border-radius:9px!important;margin:0!important;
  font-size:.8rem!important;background:rgba(255,255,255,.07)!important
}
.bottombar .navitem b,.acs-bottom-nav .navitem b{
  font-size:.66rem!important;line-height:1!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;max-width:100%!important
}
.bottombar .navitem.active,.acs-bottom-nav .navitem.active{
  background:rgba(255,255,255,.10)!important;color:#fff!important;box-shadow:none!important
}
.bottombar .navitem.active span,.acs-bottom-nav .navitem.active span{
  background:linear-gradient(135deg,var(--acs-red),var(--acs-red2))!important;
  color:#fff!important;box-shadow:0 8px 18px rgba(197,22,29,.26)!important
}

/* ===== mobile ===== */
@media(max-width:780px){
  .container,.acs-container{padding-left:.65rem!important;padding-right:.65rem!important;padding-bottom:5.3rem!important}
  .page-hero,.staff-hero,.dashboard-hero,.hero-card,.compact-hero{padding:1rem!important;border-radius:18px!important}
  .page-hero h1,.staff-hero h1,.dashboard-hero h1,.hero-card h1,.compact-hero h1{font-size:2rem!important;letter-spacing:-.055em!important}
  .job-filter-bar,.filter-v11{grid-template-columns:1fr!important;gap:.45rem!important;padding:.68rem!important}
  .stats-grid,.kpi-grid,.staff-stat-grid,.dashboard-stats,.metrics{grid-template-columns:1fr 1fr!important;gap:.55rem!important}
  .staff-stat strong,.stat-card strong,.kpi-card strong,.metric-card strong,.summary-card strong,.metric .value{font-size:1.2rem!important}
  .job-row-v11,.job-list-card,.staff-job-card{
    grid-template-columns:1fr!important;gap:.42rem!important;padding:.72rem!important;border-radius:16px!important
  }
  .job-title-line strong{font-size:.94rem!important}
  .job-address-line,.job-date-line{font-size:.75rem!important;line-height:1.15!important}
  .job-side-v11{align-items:flex-start!important;flex-direction:row!important;justify-content:space-between!important}
  .job-actions-v11{justify-content:stretch!important}
  .job-actions-v11 .btn{flex:1!important;min-height:34px!important;font-size:.75rem!important;padding:.35rem!important}
  .form-grid-v11,.mini-grid{grid-template-columns:1fr!important;gap:.25rem!important}
  .employee-chip-grid{grid-template-columns:1fr 1fr!important;gap:.45rem!important}
  .employee-chip{grid-template-columns:28px 1fr!important;min-height:54px!important;padding:.55rem!important;border-radius:14px!important}
  .employee-chip .checkmark{width:26px!important;height:26px!important;border-radius:9px!important;font-size:.95rem!important}
  .employee-chip .employee-name{font-size:.75rem!important}
  .employee-chip small{font-size:.64rem!important}
  .form-actions-sticky{
    position:sticky!important;bottom:72px!important;z-index:10!important;
    background:rgba(248,250,252,.94)!important;backdrop-filter:blur(12px)!important;
    padding:.55rem!important;border-radius:16px!important;border:1px solid rgba(148,163,184,.25)!important
  }
  .form-actions-sticky .btn{flex:1!important}
  .bottombar,.acs-bottom-nav{min-height:56px!important}
  .bottombar .navitem,.acs-bottom-nav .navitem{height:43px!important;min-height:43px!important}
  .bottombar .navitem span,.acs-bottom-nav .navitem span{width:23px!important;height:23px!important}
  .bottombar .navitem b,.acs-bottom-nav .navitem b{font-size:.61rem!important}
}
@media(max-width:420px){
  .stats-grid,.kpi-grid,.staff-stat-grid,.dashboard-stats,.metrics{grid-template-columns:1fr!important}
  .employee-chip-grid{grid-template-columns:1fr!important}
}