/* ============================================================================
   WarriorCRM — UX & motion upgrade
   ---------------------------------------------------------------------------
   Layered on top of styles.css + animations.css; nothing here rewrites them.
   Every motion is transform/opacity only (GPU, no layout work, no jank on a
   budget phone), every one carries meaning — where you went, what changed,
   what you touched — and all of it switches off under prefers-reduced-motion.

     1. Motion grammar        — one set of timings for the whole app
     2. Page transitions      — direction-aware: deeper → right, back → left
     3. Dashboard hierarchy   — the four numbers that matter, first and larger
     4. Touch & press         — 44px targets, a response to every tap
     5. Phone: tab bar        — thumb-reach navigation, active indicator
     6. Phone: lists → cards  — no more sideways-scrolling tables
     7. Phone: record header  — name never squashed, delete kept apart
     8. Phone: forms → sheets — modals rise from the bottom, like iOS/Android
     9. Desktop refinements   — wide-screen layout and hover depth
    10. Reduced motion        — everything above, made still
   ========================================================================== */

/* ── 1. MOTION GRAMMAR ──────────────────────────────────────────────────────
   Enter with ease-out, leave with ease-in, exits ~65% of enter. Springs only
   for things a finger touched, so the bounce reads as a physical response. */
:root{
  --m-enter: 300ms;
  --m-exit: 190ms;
  --m-micro: 160ms;
  --m-ease-out: cubic-bezier(.16,1,.3,1);       /* fast start, soft landing */
  --m-ease-in: cubic-bezier(.5,0,.75,0);
  --m-spring: cubic-bezier(.34,1.56,.64,1);     /* small overshoot on touch */
  --m-stagger: 35ms;
  --tabbar-h: 64px;
}

/* ── 2. PAGE TRANSITIONS ─────────────────────────────────────────────────── */
/* "same" keeps the existing rise-and-fade; fwd/back slide on the x axis so
   opening a record feels like going deeper and back feels like returning. */
#content.page-enter[data-dir="fwd"]{animation:wcPageFwd var(--m-enter) var(--m-ease-out) both}
#content.page-enter[data-dir="back"]{animation:wcPageBack var(--m-enter) var(--m-ease-out) both}
@keyframes wcPageFwd{from{opacity:0;transform:translate3d(22px,0,0)}to{opacity:1;transform:none}}
@keyframes wcPageBack{from{opacity:0;transform:translate3d(-22px,0,0)}to{opacity:1;transform:none}}

/* Lists arrive as a quick cascade rather than all at once — first ten rows
   only, so a long list never waits on its own animation. */
.list-table tbody tr.row{animation:wcRowIn var(--m-enter) var(--m-ease-out) both}
.list-table tbody tr.row:nth-child(1){animation-delay:calc(var(--m-stagger)*0)}
.list-table tbody tr.row:nth-child(2){animation-delay:calc(var(--m-stagger)*1)}
.list-table tbody tr.row:nth-child(3){animation-delay:calc(var(--m-stagger)*2)}
.list-table tbody tr.row:nth-child(4){animation-delay:calc(var(--m-stagger)*3)}
.list-table tbody tr.row:nth-child(5){animation-delay:calc(var(--m-stagger)*4)}
.list-table tbody tr.row:nth-child(6){animation-delay:calc(var(--m-stagger)*5)}
.list-table tbody tr.row:nth-child(7){animation-delay:calc(var(--m-stagger)*6)}
.list-table tbody tr.row:nth-child(8){animation-delay:calc(var(--m-stagger)*7)}
.list-table tbody tr.row:nth-child(9){animation-delay:calc(var(--m-stagger)*8)}
.list-table tbody tr.row:nth-child(n+10){animation-delay:calc(var(--m-stagger)*9)}
@keyframes wcRowIn{from{opacity:0;transform:translate3d(0,8px,0)}to{opacity:1;transform:none}}

/* Detail cards settle in one after another, top to bottom. */
.detail-grid > *{animation:wcRowIn var(--m-enter) var(--m-ease-out) both}
.detail-grid > *:nth-child(2){animation-delay:60ms}
.detail-grid > *:nth-child(3){animation-delay:120ms}
.detail-grid > *:nth-child(n+4){animation-delay:160ms}

/* ── 3. DASHBOARD HIERARCHY ─────────────────────────────────────────────── */
.tiles-hero{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:14px}
.tile-hero{padding:18px 20px;position:relative;overflow:hidden}
.tile-hero .tile-val{font-size:32px;line-height:1.1;margin-top:6px}
.tile-hero .tile-label{font-size:12.5px}
/* a soft glow in each tile's own colour, so the four read as the headline */
.tile-hero::before{
  content:"";position:absolute;inset:auto -30% -60% auto;width:70%;aspect-ratio:1;
  background:radial-gradient(circle,var(--tc,#e0453a) 0%,transparent 65%);opacity:.14;pointer-events:none;
  transition:opacity var(--m-enter) var(--m-ease-out),transform var(--m-enter) var(--m-ease-out)}
.tile-hero:hover::before{opacity:.24;transform:scale(1.08)}
.tiles:not(.tiles-hero) .tile-val{font-size:21px}
.tiles:not(.tiles-hero) .tile{padding:12px 14px}
/* the hero row arrives first, the compact grid a beat later */
.tiles-hero .tile{animation-delay:0s !important}
.tiles:not(.tiles-hero) .tile{animation-delay:120ms}

/* ── 4. TOUCH & PRESS ────────────────────────────────────────────────────── */
/* Every tappable thing answers within one frame of the touch. */
.btn,.iconbtn,.chip,.ic-btn,.tile[data-go],.tb{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.btn:active,.iconbtn:active,.chip:active{transform:scale(.96);transition:transform 80ms var(--m-ease-out)}
.tile[data-go]:active{transform:scale(.975)}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:8px}

/* ── 5. PHONE: TAB BAR ──────────────────────────────────────────────────── */
#tabbar{display:none}
@media(max-width:860px){
  #tabbar{
    display:grid;grid-template-columns:repeat(5,1fr);align-items:end;
    position:fixed;left:0;right:0;bottom:0;z-index:55;
    height:calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    padding:0 6px env(safe-area-inset-bottom);
    background:var(--glass-bg);
    backdrop-filter:blur(var(--glass-blur)) saturate(1.4);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.4);
    border-top:1px solid var(--glass-border);
    box-shadow:0 -8px 24px rgba(0,0,0,.18);
    animation:wcBarIn 420ms var(--m-ease-out) both}
  @keyframes wcBarIn{from{transform:translate3d(0,100%,0)}to{transform:none}}
  #tabbar[hidden],.tb[hidden]{display:none}
  .tb{
    position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    min-height:var(--tabbar-h);border:0;background:none;cursor:pointer;
    color:var(--muted);font:600 10.5px/1 var(--font-body,inherit);letter-spacing:.01em;
    transition:color var(--m-micro) var(--m-ease-out)}
  .tb svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
    transition:transform var(--m-enter) var(--m-spring)}
  .tb:active svg{transform:scale(.86)}
  .tb.active{color:var(--text)}
  .tb.active svg{transform:translate3d(0,-1px,0) scale(1.06)}
  /* the active indicator is a small bar that springs in under the icon */
  .tb::after{content:"";position:absolute;top:6px;width:22px;height:3px;border-radius:3px;background:var(--grad,var(--primary));
    transform:scaleX(0);opacity:0;transition:transform var(--m-enter) var(--m-spring),opacity var(--m-micro)}
  .tb.active::after{transform:scaleX(1);opacity:1}
  /* centre "new lead" button: the one primary action, raised above the bar */
  .tb-fab{align-self:center}
  .tb-fab svg{width:26px;height:26px;stroke:#fff;stroke-width:2.4}
  .tb-fab::before{content:"";position:absolute;width:52px;height:52px;top:50%;left:50%;transform:translate(-50%,-62%);
    border-radius:16px;background:var(--grad,var(--primary));box-shadow:0 8px 20px rgba(224,69,58,.38),inset 0 1px 0 rgba(255,255,255,.25);
    transition:transform var(--m-enter) var(--m-spring)}
  .tb-fab svg{position:relative;transform:translateY(-6px)}
  .tb-fab:active::before{transform:translate(-50%,-62%) scale(.9)}
  .tb-fab::after{display:none}

  /* the bar replaces the hamburger; leave room so nothing hides behind it */
  #hamburger{display:none !important}
  #content{padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 24px)}
  #toast{bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 14px)}
  /* the slide-out menu sits above the bar, with a scrim behind it */
  #sidebar{z-index:80;padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom))}
  #app.sidebar-open::before{content:"";position:fixed;inset:0;background:rgba(3,6,14,.5);z-index:70;
    animation:wcFade var(--m-enter) var(--m-ease-out) both}
  @keyframes wcFade{from{opacity:0}to{opacity:1}}
  #app.sidebar-open #sidebar{transition:transform var(--m-enter) var(--m-ease-out)}

  /* touch targets: 44px minimum for anything a thumb presses */
  .btn,.iconbtn{min-height:44px}
  .chip{min-height:40px;padding:8px 14px;font-size:13px;display:inline-flex;align-items:center}
  .ic-btn{min-width:40px;min-height:40px}
  .hero .btn{white-space:nowrap}
}

/* ── 6. PHONE: LISTS → CARDS ─────────────────────────────────────────────
   A 1,300px table squeezed into a 375px screen hid every column but the name.
   On a phone each row becomes a card: name on top, the fields that matter as
   labelled lines, quick actions on the right. Same data, same click targets. */
@media(max-width:640px){
  .list-table thead{display:none}
  .list-table,.list-table tbody{display:block;width:100%}
  .table-wrap:has(.list-table){overflow:visible;background:none;border:0;box-shadow:none}
  .list-table tbody tr.row{
    display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:12px;row-gap:3px;align-items:center;
    padding:13px 14px;margin-bottom:10px;border-radius:14px;
    background:var(--glass-bg);border:1px solid var(--glass-border);box-shadow:var(--shadow)}
  /* every selector below is scoped to tr.row so it outranks the table's own
     cell styles — a plain ".list-table td.chk" lost to them */
  .list-table tbody tr.row > td{display:block;border:0;padding:0;background:none;min-width:0}
  .list-table tbody tr.row > td.chk{display:none}
  .list-table tbody tr.row > td.ava-cell{grid-row:1 / span 8;grid-column:1;align-self:start;padding-top:2px}
  .list-table tbody tr.row > td.c-title{grid-column:2;font-weight:700;font-size:15px;color:var(--text);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-bottom:2px}
  .list-table tbody tr.row > td.c-field{grid-column:2;font-size:12.5px;color:var(--text);line-height:1.45;
    white-space:normal;overflow-wrap:anywhere}   /* tables never wrap; cards must */
  .list-table tbody tr.row > td.c-field::before{content:attr(data-label);display:inline-block;margin-right:8px;
    font-size:11px;color:var(--muted);letter-spacing:.01em}
  /* empty fields add noise on a small screen — hide the "—" placeholders */
  .list-table tbody tr.row > td.c-field:has(> .muted:only-child){display:none}
  .list-table tbody tr.row > td.rowact{grid-column:3;grid-row:1 / span 2;align-self:start;display:flex;gap:4px}
  .list-table tbody tr.row:active{transform:scale(.985);transition:transform 90ms var(--m-ease-out)}
}

/* ── 7. PHONE: RECORD HEADER ──────────────────────────────────────────────── */
/* Desktop: keep Delete a step away from the everyday buttons. */
.dh-acts #delBtn{margin-left:10px}
@media(max-width:640px){
  .detail-head{flex-wrap:wrap;align-items:flex-start;gap:12px}
  .detail-head .ava.lg{width:52px;height:52px;font-size:18px;flex:0 0 auto}
  .dh-info{flex:1 1 0;min-width:0}
  .dh-name{white-space:normal;overflow-wrap:anywhere;line-height:1.2}
  .dh-acts{flex:1 1 100%;display:grid;grid-template-columns:1fr 1fr;gap:8px;justify-content:stretch}
  .dh-acts > *{justify-content:center;text-align:center;min-height:44px;display:inline-flex;align-items:center}
  /* the main action gets the full width; delete sits apart, quiet, at the end */
  .dh-acts #convertBtn{grid-column:1 / -1;order:-1}
  .dh-acts #editBtn{grid-column:1 / -1}   /* never left alone at half width */
  .dh-acts #delBtn{grid-column:1 / -1;order:99;margin:6px 0 0;background:transparent;border:1px solid var(--border2);color:var(--red)}
}

/* ── 8. PHONE: FORMS → BOTTOM SHEETS ─────────────────────────────────────── */
@media(max-width:640px){
  .modal{
    top:auto;bottom:0;left:0;right:0;transform:none;width:100%;max-width:none;
    max-height:92dvh;border-radius:22px 22px 0 0;
    padding-bottom:env(safe-area-inset-bottom);
    animation:wcSheetUp var(--m-enter) var(--m-ease-out) both}
  /* grab handle — tells the eye this is a sheet over the page */
  .modal::before{content:"";display:block;width:40px;height:4px;border-radius:4px;background:var(--border2);margin:10px auto 2px}
  .modal-head{border-radius:0}
  .modal-foot{padding-bottom:calc(15px + env(safe-area-inset-bottom))}
  .modal-foot .mf-r{flex:1;display:flex;gap:10px}
  .modal-foot .btn{flex:1;justify-content:center}
  /* a long dropdown option was forcing the form column to 399px inside 333px,
     pushing every input past the edge of the screen (older bug, also in the
     centred modal) — let the column shrink and the controls follow it */
  .form-grid{grid-template-columns:minmax(0,1fr)}
  .form-grid .field,.form-grid .field input,.form-grid .field select,.form-grid .field textarea{min-width:0;max-width:100%}
  @keyframes wcSheetUp{from{transform:translate3d(0,100%,0)}to{transform:none}}
}

/* ── 9. DESKTOP REFINEMENTS ──────────────────────────────────────────────── */
@media(min-width:861px){
  /* row hover lifts the whole row slightly, so the eye tracks across columns */
  .list-table tbody tr.row{transition:background var(--m-micro) var(--m-ease-out)}
  .list-table tbody tr.row:hover td{background:color-mix(in srgb,var(--text) 4%,transparent)}
}
@media(min-width:1400px){
  #content{max-width:1480px}
}
@media(max-width:980px){
  .tiles-hero{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  /* two compact columns instead of one tile per row (14 rows of scrolling) */
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .tiles:not(.tiles-hero) .tile{padding:11px 12px}
  .tiles:not(.tiles-hero) .tile-val{font-size:19px}
  .tile-hero{padding:14px 15px}
  .tile-hero .tile-val{font-size:24px}
  .tile-label{font-size:10.5px;letter-spacing:.04em}
  .tile-ico{width:26px;height:26px;font-size:13px}
  .hero{flex-wrap:wrap;padding:18px}
  /* the spinning emblem is decoration; on a phone it wrapped onto its own row
     and cost a screen of space, so it tucks into the corner, smaller */
  .hero .orbit{position:absolute;top:12px;right:12px;width:52px;height:52px;opacity:.55;pointer-events:none}
  .hero .orbit .ring:nth-child(2){inset:8px}.hero .orbit .ring:nth-child(3){inset:15px}
  .hero .orbit .core{inset:19px;font-size:9px}
  .hero h2{padding-right:52px}
  .hero-cta{margin-left:0;width:100%}
  .hero-cta .btn{flex:1;justify-content:center}
}

/* Hover effects are for a mouse. On a touchscreen a tap leaves ":hover" stuck
   on, which left a blurred glow on the tile you last touched. */
@media (hover:none){
  .tile:hover .tile-val{text-shadow:none;transform:none}
  .tile-hero:hover::before{opacity:.14;transform:none}
}
/* the neon glow suits dark mode; on a light background it reads as a smudge */
:root[data-theme="light"] .tile:hover .tile-val{text-shadow:none}

/* ── 10. REDUCED MOTION ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  #content.page-enter[data-dir],.list-table tbody tr.row,.detail-grid > *,
  #tabbar,.modal,#app.sidebar-open::before{animation:none !important}
  .tb svg,.tb::after,.tb-fab::before,.tile-hero::before{transition:none !important}
  .btn:active,.iconbtn:active,.chip:active,.tile[data-go]:active,.list-table tbody tr.row:active{transform:none !important}
}