/* AU ONE ERP · construction/polish.css
   Extracted verbatim from construction.html lines 2054-2288. */
/* ═══════════════════════════════════════════════════════════════════
   AU One — Premium Polish Layer v3 · construction.html
   Additive · non-breaking · GPU-safe only (transform/opacity/shadow/color/filter)
   Zero layout changes · zero business logic · dark-mode aware
   ═══════════════════════════════════════════════════════════════════ */
*{-webkit-tap-highlight-color:transparent}

/* ─── Page entrance: deblur rise ─── */
@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth}
  /* v1: NOT "...both" — see profile.html for why: a fill-mode of both/forwards
     keeps this transform+filter animation "in effect" on body forever, making
     body a permanent containing block for position:fixed children (bottom bars,
     FABs) — they then scroll away instead of staying pinned to the viewport. */
  body{animation:auPageIn .42s cubic-bezier(.25,.46,.45,.94)}
  @keyframes auPageIn{from{opacity:0;transform:translateY(8px) scale(.996);filter:blur(2px)}to{opacity:1;transform:none;filter:none}}
}
.tbl-wrap,.hscroll,[class*="scroll"],[style*="overflow:auto"],[style*="overflow-x:auto"],[style*="overflow-y:auto"]{-webkit-overflow-scrolling:touch}

/* ─── Base interactive feedback ─── */
@media (hover:hover){
  button:not(:disabled),a[role="button"],.btn,[class*="btn"]:not(input):not(textarea),.tab,.card,.gbtn,.chev{
    transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .26s,border-color .26s,background-color .24s,opacity .2s,color .2s}
}
button:not(:disabled):active,a[role="button"]:active,.btn:active,[class*="btn"]:not(input):not(textarea):active,.gbtn:active{transform:scale(.96)}
table tr{transition:background-color .18s ease}
@media (hover:hover){
  .card:hover,.scard:hover,.kpi:hover,.tile:hover{transform:translateY(-3px)}
}

/* ─────────────────────────────────────────────────────────────────
   HEADER — luminous brand accent along the bottom edge
   ───────────────────────────────────────────────────────────────── */
header::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none;z-index:1;
  background:linear-gradient(90deg,transparent 2%,rgba(var(--olive-rgb),.55) 28%,rgba(var(--olive-rgb),.28) 66%,transparent 98%)
}

/* ─────────────────────────────────────────────────────────────────
   TABS — smooth hover tint
   ───────────────────────────────────────────────────────────────── */
.tab{position:relative;transition:color .18s,background-color .18s}
.tab:not(.on):hover{color:#c9d0d9;background:rgba(255,255,255,.07)}

/* ─────────────────────────────────────────────────────────────────
   DRAWER SIDEBAR — inset glow on active item
   ───────────────────────────────────────────────────────────────── */
.navitem{transition:background-color .18s,color .18s,border-left-color .2s}
.navitem.on{box-shadow:inset 0 0 14px rgba(var(--olive-rgb),.09)}

/* ─────────────────────────────────────────────────────────────────
   BRAND LOGO — spring on hover
   ───────────────────────────────────────────────────────────────── */
.brandhome .logo{transition:transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .22s}
.brandhome:hover .logo{box-shadow:0 4px 16px rgba(var(--olive-rgb),.40)}

/* ─────────────────────────────────────────────────────────────────
   BOTTOM NAV — top glow accent (works with existing glass layer)
   ───────────────────────────────────────────────────────────────── */
.bottom::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;pointer-events:none;z-index:1;
  background:linear-gradient(90deg,transparent,rgba(var(--olive-rgb),.34) 35%,rgba(var(--olive-rgb),.18) 68%,transparent)
}

/* ─────────────────────────────────────────────────────────────────
   KPI TILES — spring lift + depth glow
   ───────────────────────────────────────────────────────────────── */
.trkkpi,.dashcard{
  transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .28s,border-color .28s;
  will-change:transform
}
@media(hover:hover){
  .trkkpi:hover,.dashcard:hover{
    transform:translateY(-3px);
    box-shadow:0 2px 4px rgba(20,24,28,.05),0 16px 34px -10px rgba(20,24,28,.24);
    border-color:var(--line2)
  }
}
/* Construction Tracker summary KPI tiles — accent hairline top */
.ctkpi{position:relative;overflow:hidden;transition:transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .22s}
.ctkpi::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;pointer-events:none;z-index:1;
  background:linear-gradient(90deg,var(--olive),transparent 72%);opacity:.65
}
@media(hover:hover){
  .ctkpi:hover{transform:translateY(-2px);box-shadow:0 6px 18px -8px rgba(20,24,28,.22)}
}

/* ─────────────────────────────────────────────────────────────────
   PETTY CASH CARDS — premium glass surface
   Uses !important to override v4InjectStyle6() dynamic styles (appended after)
   ───────────────────────────────────────────────────────────────── */
.pettycard{
  position:relative!important;overflow:hidden!important;
  background:linear-gradient(158deg,var(--paper2) 0%,color-mix(in srgb,var(--paper2) 92%,var(--olive)) 100%)!important;
  border-radius:16px!important;
  box-shadow:0 1px 3px rgba(20,24,28,.06),0 8px 22px -10px rgba(20,24,28,.16)!important;
  transition:transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .22s,border-color .22s!important
}
/* brand accent hairline */
.pettycard::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2.5px;pointer-events:none;z-index:2;
  background:linear-gradient(90deg,var(--olive) 0%,color-mix(in srgb,var(--olive) 32%,transparent) 68%,transparent 100%);opacity:.9
}
/* ambient corner glow */
.pettycard::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(128% 82% at 0% 0%,rgba(var(--olive-rgb),.09),transparent 60%)
}
@media(hover:hover){
  .pettycard:hover{
    transform:translateY(-3px)!important;
    border-color:color-mix(in srgb,var(--olive) 32%,var(--line))!important;
    box-shadow:0 4px 8px rgba(20,24,28,.08),0 14px 30px -10px rgba(20,24,28,.24),0 0 0 1px rgba(var(--olive-rgb),.12)!important
  }
}
.pettycard:active{transform:scale(.975)!important}
.pcgo{transition:color .15s}
.pettycard:hover .pcgo{color:var(--olive)}

/* ─────────────────────────────────────────────────────────────────
   PROJECT TILES (.ptile) — spring lift + top accent reveal
   ───────────────────────────────────────────────────────────────── */
.ptile{position:relative;overflow:hidden;border-radius:16px;transition:transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .22s,border-color .22s}
.ptile::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;pointer-events:none;z-index:1;
  background:linear-gradient(90deg,var(--olive),transparent 66%);opacity:0;transition:opacity .22s
}
@media(hover:hover){
  .ptile:hover{
    transform:translateY(-3px);
    box-shadow:0 4px 8px rgba(20,24,28,.07),0 14px 32px -10px rgba(20,24,28,.22);
    border-color:color-mix(in srgb,var(--olive) 26%,var(--line))
  }
  .ptile:hover::before{opacity:1}
}

/* ─────────────────────────────────────────────────────────────────
   GENERAL CARDS (project, cost control, dashboard)
   ───────────────────────────────────────────────────────────────── */
.aprojc,.cccard,.cdcard,.exinscard{
  transition:transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .22s,border-color .22s
}
@media(hover:hover){
  .aprojc:hover,.cccard:hover,.cdcard:hover,.exinscard:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 20px -8px rgba(20,24,28,.24),0 0 0 1px rgba(var(--olive-rgb),.07);
    border-color:color-mix(in srgb,var(--olive) 18%,var(--line))
  }
}

/* ─────────────────────────────────────────────────────────────────
   INPUTS — animated focus ring with brand color
   ───────────────────────────────────────────────────────────────── */
input,select,textarea{transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:var(--olive)!important;
  box-shadow:0 0 0 3px rgba(var(--olive-rgb),.16),0 1px 3px rgba(20,24,28,.08)!important
}

/* ─────────────────────────────────────────────────────────────────
   BUTTONS — primary: lift + glow
   ───────────────────────────────────────────────────────────────── */
.prim2:not(:disabled),.plmw-gen:not(:disabled){
  transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s,filter .18s
}
@media(hover:hover){
  .prim2:not(:disabled):hover,.plmw-gen:not(:disabled):hover{
    transform:translateY(-2px);
    box-shadow:0 6px 20px rgba(20,24,28,.22),0 0 0 1px rgba(var(--olive-rgb),.2);
    filter:brightness(1.05)
  }
}
.prim2:active,.plmw-gen:active{transform:translateY(0) scale(.97)!important}

/* ─────────────────────────────────────────────────────────────────
   BUTTONS — ghost: depth on hover
   ───────────────────────────────────────────────────────────────── */
.ghost2:not(:disabled){transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s,border-color .18s}
@media(hover:hover){
  .ghost2:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(20,24,28,.11);border-color:var(--olive)}
}

/* ─────────────────────────────────────────────────────────────────
   CHIPS & SEGMENTED CONTROLS — spring press
   ───────────────────────────────────────────────────────────────── */
.chip{transition:transform .16s cubic-bezier(.34,1.56,.64,1),background-color .16s,border-color .16s,color .16s}
.chip:active{transform:scale(.92)}
.structchip{transition:transform .16s cubic-bezier(.34,1.56,.64,1),background-color .16s,border-color .16s}

/* ─────────────────────────────────────────────────────────────────
   TRACKER TABS — depth on active
   ───────────────────────────────────────────────────────────────── */
.trktab{transition:background-color .16s,color .16s,border-color .16s,box-shadow .16s}
.trktab.on{box-shadow:0 2px 8px rgba(20,24,28,.14)}

/* ─────────────────────────────────────────────────────────────────
   PROGRESS BARS — gloss overlay shimmer
   ───────────────────────────────────────────────────────────────── */
.hpfill,.schbar,.ctpbar i,.cdprogfill,.ccbarfill{position:relative;overflow:hidden}
.hpfill::after,.schbar::after,.ctpbar i::after,.cdprogfill::after,.ccbarfill::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.30),rgba(255,255,255,0) 54%)
}

/* ─────────────────────────────────────────────────────────────────
   SECTION TITLES — fade hairline
   ───────────────────────────────────────────────────────────────── */
.secttl::after{background:linear-gradient(90deg,var(--line),transparent 80%)}

/* ─────────────────────────────────────────────────────────────────
   SCROLLBARS — slim branded (desktop hover only)
   ───────────────────────────────────────────────────────────────── */
@media(hover:hover) and (pointer:fine){
  .hscroll::-webkit-scrollbar{height:5px}
  .hscroll::-webkit-scrollbar-track{background:transparent}
  .hscroll::-webkit-scrollbar-thumb{background:var(--line2);border-radius:999px}
  .hscroll::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--olive) 50%,var(--line))}
}

/* ─────────────────────────────────────────────────────────────────
   NUMBER VALUES — color transition + flash on update
   ───────────────────────────────────────────────────────────────── */
.tkv{transition:color .3s}
.auflash{animation:auValFlash 1s cubic-bezier(.25,.46,.45,.94)}
@keyframes auValFlash{0%{background:rgba(125,164,80,.22);box-shadow:0 0 0 4px rgba(125,164,80,.18)}100%{background:transparent;box-shadow:none}}
.tkv[data-auc]{font-variant-numeric:tabular-nums}

/* ─────────────────────────────────────────────────────────────────
   DASHCARD — entrance animation
   ───────────────────────────────────────────────────────────────── */
.dashcard{animation:auCardRise .45s cubic-bezier(.25,.46,.45,.94) both}
@keyframes auCardRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
body.reduce .dashcard,body.reduce .trkkpi{animation:none!important}