/* ACS OPS UI V16 — final hero readability + icons-only nav */

:root{
  --acs-red:#c8191f;
  --acs-red-dark:#991b1f;
  --acs-red-soft:#f8d4d7;
  --acs-ink:#08111f;
  --acs-muted:#5a6575;
  --acs-line:rgba(15,23,42,.12);
}

/* =========================================================
   REMOVE floating backup if anything old is still hanging on
   ========================================================= */
.admin-backup-download-btn{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* keep normal backup button in hero/header area looking clean */
.dashboard-backup-btn,
a[href="/admin/download-backup"]:not(.admin-backup-download-btn){
  background:linear-gradient(135deg,var(--acs-red),var(--acs-red-dark)) !important;
  color:#fff !important;
  border:0 !important;
  box-shadow:0 14px 30px rgba(200,25,31,.22) !important;
}

/* =========================================================
   HERO / BANNER READABILITY — ALL non-billing app pages
   ========================================================= */
body:not(.billing-page) .hero,
body:not(.billing-page) .page-hero,
body:not(.billing-page) .admin-hero,
body:not(.billing-page) .dashboard-hero,
body:not(.billing-page) .hero-card,
body:not(.billing-page) .hero-panel,
body:not(.billing-page) .content-hero,
body:not(.billing-page) .app-hero,
body:not(.billing-page) .section-hero,
body:not(.billing-page) [class*="hero"],
body:not(.billing-page) [class*="Hero"]{
  background:linear-gradient(135deg,#ffffff 0%, #ffffff 70%, #f6c9cd 100%) !important;
  color:var(--acs-ink) !important;
  border:1px solid var(--acs-line) !important;
  box-shadow:0 18px 44px rgba(15,23,42,.12) !important;
}

/* MAIN titles black no matter what */
body:not(.billing-page) .hero h1,
body:not(.billing-page) .hero h2,
body:not(.billing-page) .hero h3,
body:not(.billing-page) .page-hero h1,
body:not(.billing-page) .page-hero h2,
body:not(.billing-page) .page-hero h3,
body:not(.billing-page) .admin-hero h1,
body:not(.billing-page) .dashboard-hero h1,
body:not(.billing-page) .hero-card h1,
body:not(.billing-page) .hero-panel h1,
body:not(.billing-page) .content-hero h1,
body:not(.billing-page) .app-hero h1,
body:not(.billing-page) .section-hero h1,
body:not(.billing-page) [class*="hero"] h1,
body:not(.billing-page) [class*="hero"] h2,
body:not(.billing-page) [class*="hero"] h3,
body:not(.billing-page) [class*="Hero"] h1,
body:not(.billing-page) [class*="Hero"] h2,
body:not(.billing-page) [class*="Hero"] h3,
body:not(.billing-page) .hero .title,
body:not(.billing-page) .hero-title,
body:not(.billing-page) .page-title,
body:not(.billing-page) .display-4,
body:not(.billing-page) .display-5,
body:not(.billing-page) .display-6{
  color:var(--acs-ink) !important;
  -webkit-text-fill-color:var(--acs-ink) !important;
  text-shadow:none !important;
  opacity:1 !important;
  filter:none !important;
}

/* Sub text / dates / range text readable */
body:not(.billing-page) .hero p,
body:not(.billing-page) .page-hero p,
body:not(.billing-page) .admin-hero p,
body:not(.billing-page) .dashboard-hero p,
body:not(.billing-page) .hero-card p,
body:not(.billing-page) .hero-panel p,
body:not(.billing-page) .content-hero p,
body:not(.billing-page) .app-hero p,
body:not(.billing-page) .section-hero p,
body:not(.billing-page) [class*="hero"] p,
body:not(.billing-page) [class*="Hero"] p,
body:not(.billing-page) .subtitle,
body:not(.billing-page) .subtext,
body:not(.billing-page) .date-range,
body:not(.billing-page) .date-label,
body:not(.billing-page) .range,
body:not(.billing-page) .hero-meta,
body:not(.billing-page) .hero-subtitle,
body:not(.billing-page) .muted{
  color:var(--acs-muted) !important;
  -webkit-text-fill-color:var(--acs-muted) !important;
  text-shadow:none !important;
  opacity:1 !important;
}

/* small red kicker labels */
body:not(.billing-page) .eyebrow,
body:not(.billing-page) .kicker,
body:not(.billing-page) .section-kicker,
body:not(.billing-page) .overline,
body:not(.billing-page) .hero-label,
body:not(.billing-page) [class*="hero"] .eyebrow,
body:not(.billing-page) [class*="hero"] .kicker{
  color:var(--acs-red) !important;
  -webkit-text-fill-color:var(--acs-red) !important;
  letter-spacing:.08em !important;
  text-shadow:none !important;
  opacity:1 !important;
  font-weight:900 !important;
}

/* hero action buttons */
body:not(.billing-page) .hero .btn,
body:not(.billing-page) .page-hero .btn,
body:not(.billing-page) .admin-hero .btn,
body:not(.billing-page) .dashboard-hero .btn,
body:not(.billing-page) .hero-card .btn,
body:not(.billing-page) .hero-panel .btn,
body:not(.billing-page) .content-hero .btn,
body:not(.billing-page) .app-hero .btn,
body:not(.billing-page) .section-hero .btn,
body:not(.billing-page) [class*="hero"] .btn,
body:not(.billing-page) [class*="Hero"] .btn{
  border-radius:16px !important;
  font-weight:900 !important;
}

/* primary red buttons */
body:not(.billing-page) .hero .btn-primary,
body:not(.billing-page) .page-hero .btn-primary,
body:not(.billing-page) .admin-hero .btn-primary,
body:not(.billing-page) .dashboard-hero .btn-primary,
body:not(.billing-page) .hero-card .btn-primary,
body:not(.billing-page) .hero-panel .btn-primary,
body:not(.billing-page) .content-hero .btn-primary,
body:not(.billing-page) .app-hero .btn-primary,
body:not(.billing-page) .section-hero .btn-primary,
body:not(.billing-page) .hero .btn-danger,
body:not(.billing-page) .page-hero .btn-danger,
body:not(.billing-page) .admin-hero .btn-danger,
body:not(.billing-page) .dashboard-hero .btn-danger,
body:not(.billing-page) [class*="hero"] .btn-danger,
body:not(.billing-page) [class*="hero"] .btn-primary,
body:not(.billing-page) [class*="Hero"] .btn-primary,
body:not(.billing-page) [class*="Hero"] .btn-danger{
  background:linear-gradient(135deg,var(--acs-red),var(--acs-red-dark)) !important;
  color:#fff !important;
  border:0 !important;
  box-shadow:0 14px 28px rgba(200,25,31,.22) !important;
}

/* white secondary buttons */
body:not(.billing-page) .hero .btn-secondary,
body:not(.billing-page) .page-hero .btn-secondary,
body:not(.billing-page) .admin-hero .btn-secondary,
body:not(.billing-page) .dashboard-hero .btn-secondary,
body:not(.billing-page) .hero-card .btn-secondary,
body:not(.billing-page) .hero-panel .btn-secondary,
body:not(.billing-page) .content-hero .btn-secondary,
body:not(.billing-page) .app-hero .btn-secondary,
body:not(.billing-page) .section-hero .btn-secondary,
body:not(.billing-page) [class*="hero"] .btn-secondary,
body:not(.billing-page) [class*="Hero"] .btn-secondary{
  background:#fff !important;
  color:var(--acs-ink) !important;
  border:1px solid var(--acs-line) !important;
}

/* =========================================================
   BOTTOM NAV — ICONS ONLY
   ========================================================= */
body{
  padding-bottom:84px !important;
}

.bottombar,
.acs-bottom-nav{
  position:fixed !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  z-index:99999 !important;
  display:grid !important;
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  gap:8px !important;
  padding:9px 12px calc(9px + env(safe-area-inset-bottom)) !important;
  background:rgba(16,18,24,.98) !important;
  border-top:1px solid rgba(255,255,255,.08) !important;
  box-shadow:0 -18px 40px rgba(0,0,0,.32) !important;
  backdrop-filter:blur(16px) !important;
}

.bottombar .navitem,
.acs-bottom-nav .navitem{
  position:relative !important;
  height:50px !important;
  min-width:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:18px !important;
  background:rgba(255,255,255,.055) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  color:#e5e7eb !important;
  text-decoration:none !important;
  overflow:hidden !important;
  font-size:0 !important;
  line-height:0 !important;
}

/* hide ALL nav text / leftover labels */
.bottombar .navitem *,
.acs-bottom-nav .navitem *{
  display:none !important;
}
.bottombar .navitem::after,
.acs-bottom-nav .navitem::after{
  content:none !important;
  display:none !important;
}

/* icon bubble */
.bottombar .navitem::before,
.acs-bottom-nav .navitem::before{
  width:34px !important;
  height:34px !important;
  border-radius:999px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:rgba(255,255,255,.10) !important;
  color:#f8fafc !important;
  font-size:18px !important;
  line-height:1 !important;
  font-weight:900 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08) !important;
  content:"•" !important;
}

/* FORCE icons by position so Admin never disappears */
.bottombar .navitem:nth-child(1)::before,
.acs-bottom-nav .navitem:nth-child(1)::before{ content:"⌂" !important; }  /* Admin */
.bottombar .navitem:nth-child(2)::before,
.acs-bottom-nav .navitem:nth-child(2)::before{ content:"▣" !important; }  /* Jobs */
.bottombar .navitem:nth-child(3)::before,
.acs-bottom-nav .navitem:nth-child(3)::before{ content:"◷" !important; }  /* Calendar */
.bottombar .navitem:nth-child(4)::before,
.acs-bottom-nav .navitem:nth-child(4)::before{ content:"$" !important; }  /* Payroll */
.bottombar .navitem:nth-child(5)::before,
.acs-bottom-nav .navitem:nth-child(5)::before{ content:"▤" !important; }  /* Receipts */

.bottombar .navitem.active,
.acs-bottom-nav .navitem.active{
  background:linear-gradient(135deg,var(--acs-red),var(--acs-red-dark)) !important;
  border-color:rgba(255,255,255,.18) !important;
  box-shadow:0 12px 28px rgba(200,25,31,.28) !important;
}

.bottombar .navitem.active::before,
.acs-bottom-nav .navitem.active::before{
  background:rgba(255,255,255,.16) !important;
  color:#fff !important;
}

/* =========================================================
   BILLING PAGE BOTTOM NAV — 6 icon tabs
   ========================================================= */
.billing-bottom-tabs{
  position:fixed !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  z-index:99999 !important;
  display:grid !important;
  grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  gap:7px !important;
  padding:8px 10px calc(8px + env(safe-area-inset-bottom)) !important;
  background:rgba(16,18,24,.98) !important;
  border-top:1px solid rgba(255,255,255,.08) !important;
  box-shadow:0 -18px 40px rgba(0,0,0,.32) !important;
  backdrop-filter:blur(16px) !important;
}

.billing-bottom-tabs a{
  position:relative !important;
  height:50px !important;
  min-width:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:18px !important;
  background:rgba(255,255,255,.055) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  color:#e5e7eb !important;
  text-decoration:none !important;
  overflow:hidden !important;
  font-size:0 !important;
  line-height:0 !important;
}

.billing-bottom-tabs a *,
.billing-bottom-tabs a::after{
  display:none !important;
  content:none !important;
}

.billing-bottom-tabs a::before{
  width:32px !important;
  height:32px !important;
  border-radius:999px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:rgba(255,255,255,.10) !important;
  color:#f8fafc !important;
  font-size:17px !important;
  line-height:1 !important;
  font-weight:900 !important;
  content:"•" !important;
}

/* Admin / Job / Jobs / Payroll / Receipts / Calendar */
.billing-bottom-tabs a:nth-child(1)::before{ content:"⌂" !important; }
.billing-bottom-tabs a:nth-child(2)::before{ content:"▣" !important; }
.billing-bottom-tabs a:nth-child(3)::before{ content:"▣" !important; }
.billing-bottom-tabs a:nth-child(4)::before{ content:"$" !important; }
.billing-bottom-tabs a:nth-child(5)::before{ content:"▤" !important; }
.billing-bottom-tabs a:nth-child(6)::before{ content:"◷" !important; }

.billing-bottom-tabs a.active{
  background:linear-gradient(135deg,var(--acs-red),var(--acs-red-dark)) !important;
  border-color:rgba(255,255,255,.18) !important;
  box-shadow:0 12px 28px rgba(200,25,31,.28) !important;
}
.billing-bottom-tabs a.active::before{
  background:rgba(255,255,255,.16) !important;
  color:#fff !important;
}

/* =========================================================
   MOBILE
   ========================================================= */
@media(max-width:760px){
  body{ padding-bottom:76px !important; }

  .bottombar,
  .acs-bottom-nav{
    gap:5px !important;
    padding-left:6px !important;
    padding-right:6px !important;
  }

  .bottombar .navitem,
  .acs-bottom-nav .navitem,
  .billing-bottom-tabs a{
    height:44px !important;
    border-radius:14px !important;
  }

  .bottombar .navitem::before,
  .acs-bottom-nav .navitem::before,
  .billing-bottom-tabs a::before{
    width:30px !important;
    height:30px !important;
    font-size:16px !important;
  }

  .billing-bottom-tabs{
    gap:4px !important;
    padding-left:5px !important;
    padding-right:5px !important;
  }
}

@media(print){
  .bottombar,
  .acs-bottom-nav,
  .billing-bottom-tabs,
  .admin-backup-download-btn{
    display:none !important;
  }
  body{ padding-bottom:0 !important; }
}

/* ACS stable cleanup/system page */
.codeblock{background:#0f172a;color:#e5e7eb;border-radius:14px;padding:14px;overflow:auto;font-size:.92rem;line-height:1.45}
.soft-card{border:1px solid rgba(148,163,184,.35);border-radius:16px;padding:14px;background:rgba(255,255,255,.72)}