/* ============================================================
   eCSyn — 2026 look refresh
   Layered AFTER app.css (see header.php). Soft, airy style:
   gradient page, white rounded cards with soft shadows instead
   of borders, pill buttons/chips, round icon buttons, floating
   pill bottom nav. Colours come only from theme tokens.
   Roll back: remove the refresh.css <link> in header.php.
   ============================================================ */
:root{
  --r-card:22px;
  --r-field:14px;
  --shadow-soft:0 12px 30px -16px rgba(40,60,75,.28);
  --shadow-lift:0 18px 36px -16px rgba(40,60,75,.34);
  --nav-gap:12px;                         /* space under the floating nav */
}

/* ---- page ---- */
body{background:linear-gradient(160deg,var(--bg-a) 0%,var(--bg-b) 55%,var(--bg-c) 100%);}
.main,.scroll-body{background:transparent;}
.topbar{background:transparent; border-bottom:none;}

/* ---- cards: shadow, no border ---- */
.card,.ch-card,.ch-card.on,.index-row,.stat,.empty,.method-tile,.filter-bar,.deal-card{
  border:none; border-radius:var(--r-card); box-shadow:var(--shadow-soft);
}
.ch-card .ch-act.go::after{border-radius:var(--r-card);}
.ch-card:hover,.index-row:hover{box-shadow:var(--shadow-lift);}
.index-row{padding:12px 14px; margin-bottom:10px;}
/* Interest level isn't highlighted in list rows any more */
.index-row .index-tag{display:none;}

/* ---- icon tiles: round ---- */
.icon-tile{border-radius:50%;}
.icon-tile.sm{border-radius:50%;}

/* ---- buttons & chips: pills ---- */
.btn,.ch-act,.stage-btn{border-radius:999px;}
.btn{border-color:transparent; box-shadow:var(--shadow-soft);}
.btn:disabled{box-shadow:none;}
.qa a{border-radius:999px; border-color:transparent;}
.qa a.em{background:var(--g100); color:var(--g800);}
.qa a.em:hover{background:var(--g200); color:var(--g900);}
.chip{border-radius:999px; border-color:transparent; box-shadow:var(--shadow-soft);}
.chip .n{border-radius:999px;}
.filter-bar{border-radius:var(--r-card);}
.banner,.msg{border-radius:16px;}

/* ---- form fields ---- */
.field input,.field select,.field textarea{border-radius:var(--r-field); border-color:var(--line);}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--g400);
  box-shadow:0 0 0 3px var(--g100);}

/* ---- avatar ---- */
.avatar-sm{width:36px; height:36px; background:var(--g700);}

/* ---- floating pill bottom nav ---- */
.bottomnav{
  height:var(--bottomnav-h); box-sizing:border-box; padding:0 12px;
  margin:0 16px calc(var(--nav-gap) + env(safe-area-inset-bottom));
  border-top:none; border-radius:999px; background:var(--card);
  box-shadow:0 16px 40px -18px rgba(40,60,75,.45);
  justify-content:space-between;
}
.navitem{flex:0 0 48px; width:48px; height:48px; padding:0; border-radius:50%;
         justify-content:center; gap:0; font-size:0; line-height:0; color:var(--ink400);}
.navitem .icon{width:22px; height:22px;}
.navitem.active{background:var(--g700); color:#fff;}
.navitem.tapped{color:var(--g700);}
.navitem.active.tapped{color:#fff;}

/* ---- floating buttons sit above the floating nav ---- */
.fab{bottom:calc(var(--bottomnav-h) + var(--nav-gap) + 16px + env(safe-area-inset-bottom));
     background:var(--g900); box-shadow:var(--shadow-lift);}
.fab-card{bottom:calc(var(--bottomnav-h) + var(--nav-gap) + 16px + env(safe-area-inset-bottom,0px)); border:none;}
.fab-card.stacked{bottom:calc(var(--bottomnav-h) + var(--nav-gap) + 16px + 66px + env(safe-area-inset-bottom,0px));}
.add-list{bottom:calc(var(--bottomnav-h) + var(--nav-gap) + 16px + 66px + env(safe-area-inset-bottom,0px));}
@media (min-width:900px){ .add-list{bottom:92px;} }

/* ---- drawer & pop-ups ---- */
.drawer{border-radius:24px 0 0 24px;}
.drawer a{border-radius:999px; padding:11px 14px;}

/* ---- desktop rail: softer ---- */
.rail a{border-radius:50%;}

/* ---- Network bulk-action bar: sit above the floating nav ---- */
#bulkBar{bottom:calc(var(--bottomnav-h) + var(--nav-gap) + 12px + env(safe-area-inset-bottom)) !important;
         z-index:58 !important;}
#bulkBar > div{border-radius:var(--r-card) !important;}
@media (min-width:900px){ #bulkBar{bottom:16px !important;} }
/* While selecting, floating buttons step aside and the list gets room
   to scroll clear of the bar. */
body:has(#bulkBar[style*="block"]) .fab,
body:has(#bulkBar[style*="block"]) .fab-card{display:none;}
body:has(#bulkBar[style*="block"]) .scroll-body{padding-bottom:220px;}

/* ---- My Card button: filled so it stands out on the light page ---- */
.fab-card{background:var(--g700); color:#fff; border:3px solid var(--card);
          box-shadow:0 14px 28px -10px rgba(27,77,102,.55);}
.fab-card:active{transform:scale(.94);}