/* ==========================================================================
   Ability360 — UI layer (v1.1)
   Icons, charts, hero, avatars, empty states, auth screens, mobile drawer,
   and form fixes. Loaded after app.css and brand.css.
   ========================================================================== */

:root{
  --track:#E8EEF2;
  --warn-500:#D9A21B;
  --teal-100:#DFF1F3; --coral-100:#FCEBE6; --violet-100:#EDE8FB; --amber-100:#FBF1DA;
}

/* ---------- form fix: inputs with no type attribute were left unstyled ---- */
input:not([type]),input[type=url],input[type=month],input[type=week]{
  width:100%;padding:8px 11px;font:inherit;font-size:.92rem;color:var(--ink-900);
  background:var(--surface);border:1px solid var(--line-strong);border-radius:10px;
  transition:border-color .15s, box-shadow .15s;
}
input[type=file]{
  width:100%;font:inherit;font-size:.86rem;color:var(--ink-700);
  padding:6px;border:1px dashed var(--line-strong);border-radius:10px;background:var(--surface-2);
}
input[type=file]::file-selector-button{
  font:inherit;font-weight:600;font-size:.82rem;border:0;border-radius:8px;
  padding:6px 12px;margin-right:10px;background:var(--teal-100);color:var(--brand-700);cursor:pointer;
}
input[type=checkbox],input[type=radio]{accent-color:var(--brand-600);width:16px;height:16px;vertical-align:-3px}

/* ---------- icons ---------------------------------------------------------- */
.i{width:18px;height:18px;flex:none;display:inline-block;vertical-align:-4px}
.btn .i{width:16px;height:16px;margin-right:6px;vertical-align:-3px}
.sidebar a.nav-item{display:flex;align-items:center;gap:11px}
.sidebar a.nav-item .ico{width:20px;height:20px;display:grid;place-items:center;opacity:.9}
.sidebar a.nav-item .ico .i{width:19px;height:19px}
.sidebar a.nav-item.active .ico{opacity:1;color:#9FE6EC}
.sidebar a.nav-item .pill{margin-left:auto}
.badge .i{width:13px;height:13px;margin-right:4px;vertical-align:-2px}

/* ---------- top bar ------------------------------------------------------- */
.topbar{backdrop-filter:saturate(1.4) blur(8px);background:rgba(255,255,255,.88)}
.topbar .search .search-i{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--ink-400);pointer-events:none}
.topbar .search input{padding-left:36px;background:var(--surface-2);border-color:var(--line)}
.topbar .search input:focus{background:#fff}
.avatar{background:linear-gradient(135deg,var(--brand-500),var(--accent-500));color:#fff}
.signout .i{margin-right:4px}
.menu-btn{display:none;border:0;background:none;padding:6px;margin-left:-6px;border-radius:10px;color:var(--ink-900);cursor:pointer}
.menu-btn .i{width:24px;height:24px}
.scrim{position:fixed;inset:0;background:rgba(14,58,70,.42);z-index:39}
.scrim[hidden]{display:none}

/* ---------- avatars (identity hue follows the record id) ------------------ */
.av{
  width:34px;height:34px;border-radius:50%;flex:none;display:inline-grid;place-items:center;
  font-weight:700;font-size:.76rem;letter-spacing:.02em;
}
.av-0{background:var(--teal-100);color:#146E78}
.av-1{background:var(--coral-100);color:#A8402A}
.av-2{background:var(--violet-100);color:#5A32A8}
.av-3{background:var(--amber-100);color:#875D06}
.av.av-lg{width:64px;height:64px;font-size:1.25rem;box-shadow:0 0 0 4px #fff, var(--shadow-md)}
.av.av-sm{width:28px;height:28px;font-size:.68rem}
.who-cell{display:flex;align-items:center;gap:10px;min-width:0}
.who-cell > div{min-width:0}

/* ---------- page head with avatar ----------------------------------------- */
.page-head.with-av{align-items:center}
.page-head.with-av .grow{display:flex;gap:16px;align-items:center}
.page-head.with-av h1{margin-bottom:2px}

/* ---------- dashboard hero ------------------------------------------------ */
.hero{
  position:relative;overflow:hidden;display:flex;align-items:center;gap:24px;
  padding:26px 28px;margin-bottom:18px;border-radius:20px;
  background:
    radial-gradient(420px 220px at 92% 20%, rgba(118,69,214,.20), transparent 70%),
    radial-gradient(360px 200px at 70% 110%, rgba(226,96,63,.16), transparent 70%),
    linear-gradient(120deg,#E4F5F7 0%,#F1EEFC 60%,#FDF0EB 100%);
  border:1px solid #DCEBEE;
}
.hero-text{flex:1;min-width:0;position:relative;z-index:1}
.hero h1{font-size:1.75rem;margin:2px 0 4px;letter-spacing:-.02em}
.hero-date{margin:0;color:var(--brand-700);font-weight:600;font-size:.82rem;letter-spacing:.02em}
.hero-sub{margin:0 0 12px;color:var(--ink-700)}
.hero-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.chip{
  display:inline-flex;align-items:center;gap:7px;padding:6px 12px 6px 9px;border-radius:999px;
  background:rgba(255,255,255,.85);border:1px solid rgba(27,35,56,.08);color:var(--ink-900);
  font-size:.85rem;font-weight:600;box-shadow:var(--shadow-sm);
}
.chip:hover{text-decoration:none;background:#fff;box-shadow:var(--shadow-md)}
.chip .i{width:16px;height:16px;color:var(--brand-600)}
.hero-actions{display:flex;flex-wrap:wrap;gap:8px}
.hero-art{width:330px;max-width:38%;height:auto;flex:none;margin:-8px -6px -18px 0}

/* ---------- KPI tiles ----------------------------------------------------- */
.grid.kpis{margin-bottom:18px;grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1180px){.grid.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stat.kpi{display:flex;gap:14px;align-items:flex-start;padding:16px 16px 14px}
.stat.kpi > div{min-width:0}
.stat.kpi .value{font-size:1.7rem;line-height:1.15;margin:3px 0 1px;overflow-wrap:anywhere}
.stat.kpi .label{font-size:.72rem}
.kpi-ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none}
.kpi-ico .i{width:20px;height:20px}
.t-teal{background:var(--teal-100);color:#177C87}
.t-coral{background:var(--coral-100);color:#C24E31}
.t-violet{background:var(--violet-100);color:#6236C2}
.t-amber{background:var(--amber-100);color:#99690A}
.stat.kpi.alert .kpi-ico{background:var(--bad-100);color:var(--bad-600)}
.stat.kpi.warn .value{color:var(--warn-600)}

/* ---------- dashboard rows ------------------------------------------------ */
.dash-row{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:16px;margin-bottom:16px}
.dash-row > .card{margin-top:0}
.dash-row + .card, .dash-row + .split, .card + .split{margin-top:16px}
.dash-row:has(> .card:only-child){grid-template-columns:1fr}
.card-head > div:first-child h2{margin:0}
.card-head .t-sub{font-size:.8rem}
.figure-sm{flex-direction:column;align-items:flex-end !important;gap:0 !important;line-height:1.2}
.figure-sm strong{font-size:1.15rem}

/* ---------- column chart -------------------------------------------------- */
.cchart{display:grid;grid-template-columns:auto 1fr;grid-template-rows:var(--h) auto;column-gap:10px;row-gap:6px}
.cc-y{position:relative;width:36px;font-size:.72rem;color:var(--ink-500);font-variant-numeric:tabular-nums}
.cc-y span{position:absolute;right:0;transform:translateY(50%);white-space:nowrap}
.cc-plot{position:relative;border-bottom:1px solid var(--line-strong)}
.cc-grid{position:absolute;left:0;right:0;height:0;border-top:1px solid var(--line)}
.cc-cols{position:absolute;inset:0;display:flex;align-items:flex-end;gap:2px}
.cc-col{flex:1;height:100%;display:flex;align-items:flex-end;justify-content:center;outline:none;cursor:default;border-radius:6px}
.cc-col:hover,.cc-col:focus-visible{background:rgba(30,155,168,.07)}
.cc-stack{width:100%;max-width:24px;display:flex;flex-direction:column-reverse;gap:2px;min-height:0}
.cc-stack i{display:block;min-height:2px;border-radius:0}
.cc-stack i:last-child{border-radius:4px 4px 0 0}
.cc-col.mark .cc-stack i{filter:saturate(1.25) brightness(.92)}
.cc-x{grid-column:2;display:flex;gap:2px;font-size:.72rem;color:var(--ink-500)}
.cc-x span{flex:1;text-align:center;white-space:nowrap;overflow:visible}

/* ---------- legend, donut, ring, bars ------------------------------------- */
.legend{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.8rem;color:var(--ink-700)}
.legend li{display:flex;align-items:center;gap:7px}
.legend i{width:10px;height:10px;border-radius:3px;flex:none}
.legend b{font-weight:650;color:var(--ink-900)}
.legend.vert{flex-direction:column;gap:8px;margin:0;flex:1;min-width:130px}
.legend.vert li{justify-content:flex-start}
.legend.vert b{margin-left:auto;font-variant-numeric:tabular-nums}

.donut-wrap{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.donut{position:relative;flex:none}
.donut svg{transform:none;display:block}
.donut .seg{transition:stroke-width .15s;cursor:default;outline:none}
.donut .seg:hover,.donut .seg:focus-visible{stroke-width:6.4}
.donut-c{position:absolute;inset:0;display:grid;place-content:center;text-align:center;pointer-events:none}
.donut-c strong{font-size:2rem;line-height:1;letter-spacing:-.02em}
.donut-c span{font-size:.74rem;color:var(--ink-500);text-transform:uppercase;letter-spacing:.08em;margin-top:3px}

.ring{position:relative;flex:none}
.ring svg{display:block}
.ring-c{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.25rem;letter-spacing:-.02em}
.ring-c small{font-size:.7rem;color:var(--ink-500);margin-left:1px}
.health-top{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.big-num{font-size:1.45rem;letter-spacing:-.01em}

.stackbar{display:flex;gap:2px;height:14px;border-radius:7px;overflow:hidden;background:var(--track)}
.stackbar i{display:block;min-width:3px;outline:none}
.stackbar i:hover,.stackbar i:focus-visible{filter:brightness(1.1)}

.hbars{display:flex;flex-direction:column;gap:12px}
.hb-row{display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:center;outline:none;border-radius:8px}
.hb-row:hover .hb-track i{filter:brightness(.95)}
.hb-name{font-size:.86rem;font-weight:600;line-height:1.2}
.hb-name small{display:block;font-weight:400;color:var(--ink-500);font-size:.74rem}
.hb-track{display:flex;align-items:center;gap:8px;min-width:0}
.hb-track i{display:block;height:20px;max-height:20px;border-radius:0 4px 4px 0;min-width:3px}
.hb-track b{font-size:.84rem;font-weight:650;white-space:nowrap;font-variant-numeric:tabular-nums}

.chart-table{margin-top:10px;font-size:.8rem}
.chart-table summary{cursor:pointer;color:var(--ink-500);font-size:.76rem;width:max-content}
.chart-table summary:hover{color:var(--brand-700)}
.chart-table table{margin-top:8px}
.chart-table td,.chart-table th{padding:4px 10px !important}

/* ---------- plan utilisation ---------------------------------------------- */
.util-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:4px 28px}
.util{display:flex;align-items:center;gap:12px;padding:10px 6px;border-radius:12px;color:inherit}
.util:hover{background:var(--surface-2);text-decoration:none}
.util-main{flex:1;min-width:0}
.util-top{display:flex;justify-content:space-between;gap:8px;font-size:.88rem;margin-bottom:6px}
.util-top .t-sub{font-size:.78rem;white-space:nowrap}
.util .badge{white-space:nowrap}
.meter2{position:relative;height:10px;border-radius:5px;background:var(--teal-100);outline:none}
.meter2 i{position:absolute;left:0;top:0;bottom:0;border-radius:5px;background:var(--brand-600)}
.meter2 b{position:absolute;top:-4px;bottom:-4px;width:2px;margin-left:-1px;background:var(--ink-900);border-radius:1px;box-shadow:0 0 0 2px #fff}

/* ---------- tooltip ------------------------------------------------------- */
.tip{
  position:fixed;z-index:100;pointer-events:none;opacity:0;transform:translateY(4px);
  background:#1B2338;color:#fff;font-size:.78rem;font-weight:500;line-height:1.35;
  padding:6px 10px;border-radius:8px;box-shadow:0 8px 20px -6px rgba(27,35,56,.45);
  max-width:280px;transition:opacity .12s, transform .12s;
}
.tip.on{opacity:1;transform:none}

/* ---------- timeline dot -------------------------------------------------- */
.timeline li::before{left:-7px;top:16px;width:12px;height:12px;background:var(--brand-600);border:3px solid var(--surface);box-shadow:0 0 0 1px var(--line)}

/* ---------- empty states -------------------------------------------------- */
.empty::before{
  content:'';display:block;width:170px;height:118px;margin:0 auto 10px;
  background:url('../img/empty.svg') no-repeat center/contain;
}
.empty .big{display:none}
.empty h2{color:var(--ink-900);margin-top:4px}
.card-body .empty::before, .empty.compact::before{width:120px;height:84px}
.empty.lost::before{background-image:url('../img/lost.svg');width:200px;height:140px}
.empty.lost .code{font-size:3rem;font-weight:800;letter-spacing:-.04em;line-height:1;
  background:linear-gradient(120deg,var(--brand-600),var(--accent-500),var(--coral-600));
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- auth screens -------------------------------------------------- */
.auth{
  background:
    radial-gradient(900px 520px at 10% 0%, rgba(30,155,168,.22), transparent 60%),
    radial-gradient(820px 560px at 92% 8%, rgba(118,69,214,.18), transparent 58%),
    radial-gradient(700px 460px at 60% 100%, rgba(226,96,63,.14), transparent 62%),
    #F5F7F9;
}
.auth .box{border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-lg)}
.auth .box .brand{background-position:left center;height:44px;margin-bottom:14px}
.auth .box form{margin:0}
.auth .btn.block{width:100%;padding:11px 14px;font-size:.95rem}

.auth-split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);padding:0;place-items:stretch;background:#fff}
.auth-art{
  position:relative;overflow:hidden;color:#E6F6F8;padding:48px 56px;display:flex;flex-direction:column;
  background:
    radial-gradient(600px 380px at 85% 15%, rgba(118,69,214,.45), transparent 65%),
    radial-gradient(520px 340px at 10% 100%, rgba(226,96,63,.30), transparent 65%),
    linear-gradient(160deg,#0E3A46 0%,#12525F 55%,#1B4A6B 100%);
}
.auth-art .logo{width:180px;height:auto}
.auth-art h2{font-size:2.1rem;line-height:1.15;color:#fff;margin:44px 0 10px;letter-spacing:-.025em;max-width:460px}
.auth-art p{color:#BFE3E8;max-width:440px;font-size:1rem}
.auth-art ul{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:12px}
.auth-art li{display:flex;align-items:center;gap:12px;font-weight:550}
.auth-art li span{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.12);color:#9FE6EC;flex:none}
.auth-art .art{margin-top:auto;width:100%;max-width:420px;align-self:center;padding-top:28px;filter:drop-shadow(0 18px 30px rgba(0,0,0,.25))}
.auth-panel{display:grid;place-items:center;padding:32px;
  background:radial-gradient(600px 400px at 100% 0%, rgba(30,155,168,.10), transparent 60%),#F7F9FA}
.auth-panel .box{box-shadow:var(--shadow-lg)}
.auth-panel h1{font-size:1.5rem;margin:6px 0 4px}

/* ---------- print page ---------------------------------------------------- */
body:has(.print-doc){background:#EEF2F4}
.print-doc{box-shadow:var(--shadow-md);border-radius:14px}
@media print{body:has(.print-doc){background:#fff}.print-doc{box-shadow:none;border-radius:0}}

/* ---------- responsive ---------------------------------------------------- */
@media (max-width:1100px){
  .dash-row{grid-template-columns:1fr}
  .hero-art{width:260px}
}
@media (max-width:900px){
  .menu-btn{display:inline-grid;place-items:center}
  .sidebar{
    position:fixed !important;inset:0 auto 0 0;width:280px !important;height:100vh !important;z-index:40;
    transform:translateX(-105%);transition:transform .22s ease;overflow-y:auto;
  }
  .sidebar nav{display:block !important}
  .sidebar .nav-group{display:block !important}
  .sidebar a.nav-item{font-size:.92rem !important;padding:9px 11px !important}
  .sidebar .side-foot{display:block !important}
  body.nav-open .sidebar{transform:none;box-shadow:0 0 60px rgba(0,0,0,.35)}
  .topbar{flex-wrap:nowrap !important;gap:10px}
  .topbar .search{min-width:0}
  .signout span{display:none}
  .signout .i{margin:0}
  .hero{padding:20px}
  .hero-art{display:none}
  .auth-split{grid-template-columns:1fr}
  .auth-art{padding:28px 24px}
  .auth-art h2{font-size:1.5rem;margin-top:22px}
  .auth-art ul,.auth-art .art{display:none}
  .page-head .page-actions{flex-wrap:wrap}
}
@media (max-width:560px){
  .content{padding:14px !important}
  .grid.cols-2{grid-template-columns:1fr}
  .stat.kpi{padding:14px}
  .util-list{grid-template-columns:1fr}
  .util .badge{display:none}
  .hb-row{grid-template-columns:78px 1fr}
  .hero h1{font-size:1.4rem}
  .donut-wrap{justify-content:center}
  .page-head.with-av .av-lg{width:48px;height:48px;font-size:1rem}
}

/* ---------- participant plan visual -------------------------------------- */
.plan-viz{display:flex;align-items:center;gap:18px;padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--line)}
.plan-viz-txt{min-width:0}
@media (max-width:1000px){.split{grid-template-columns:minmax(0,1fr)}}
.split > div{min-width:0}
@media (max-width:560px){
  .stat.kpi{flex-direction:column;gap:10px}
  .stat.kpi .value{font-size:1.4rem;overflow-wrap:normal;white-space:nowrap}
  .stat.kpi .label{font-size:.68rem}
  .table-wrap table.data{min-width:560px}
  .card-head .right.figure-sm{margin-left:0;align-items:flex-start !important}
}