/* ===== DietSetu v5: premium charts, micro-interactions, page transitions, super admin, meal planner ===== */
/* charts */
.chart.v5{overflow:visible;touch-action:pan-y;outline:none;border-radius:12px}
.chart.v5:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--g600) 45%,transparent)}
.chart.v5 .gs1{stop-color:var(--g600);stop-opacity:.32}.chart.v5 .gs2{stop-color:var(--g600);stop-opacity:0}
.chart.v5 .ar{opacity:1}
.chart.v5 .ln{stroke:var(--g600)}
.chart.v5 .dt{fill:var(--surface);stroke:var(--g600)}.chart.v5 .dt.last{fill:var(--g600);stroke:var(--surface)}
.chart.v5 .band{fill:var(--g600);opacity:.08}.chart.v5 .band-l{fill:var(--muted)}
.chart.v5 .target-l{fill:var(--o700);font-weight:700}
.chart.v5 .tip-line{stroke:var(--muted);stroke-dasharray:3 3}
.chart.v5 .tip-dot{fill:var(--g600);stroke:var(--surface)}
.chart.v5 .tip-box{fill:var(--ink);opacity:.92}
.chart.v5 text.tip-text{fill:var(--surface);font-weight:700}
.chart.v5 .sb.s1{fill:var(--g600)}.chart.v5 .sb.s2{fill:var(--o500,#F08A24)}.chart.v5 .sb.s3{fill:var(--lime-d,#7BA428)}
.chart.v5.anim .ln{stroke-dasharray:1;stroke-dashoffset:1;animation:ds-draw 1.1s cubic-bezier(.3,.7,.2,1) .1s forwards}
.chart.v5.anim .ar{opacity:0;animation:ds-fadein .8s ease .45s forwards}
.chart.v5.anim .dt{opacity:0;animation:ds-fadein .4s ease .9s forwards}
.chart.v5.anim .rb,.chart.v5.anim .sb{transform-box:fill-box;transform-origin:bottom;animation:ds-grow .55s cubic-bezier(.2,.8,.2,1) both}
@keyframes ds-draw{to{stroke-dashoffset:0}}
@keyframes ds-fadein{to{opacity:1}}
@keyframes ds-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.legend{display:flex;flex-wrap:wrap;gap:.35rem .9rem;font-size:.82rem;color:var(--muted);margin:.25rem 0 .1rem}
.legend i{display:inline-block;width:.75rem;height:.75rem;border-radius:3px;margin-right:.35rem;vertical-align:-1px;background:var(--g600)}
.legend i.s2{background:var(--o500,#F08A24)}
.meter .mt-bg{stroke:var(--line)}.meter .mt-fg{stroke:var(--g600);transition:stroke-dasharray .8s ease}.meter.warn .mt-fg{stroke:var(--o600)}.meter.full .mt-fg{stroke:var(--red,#C0392B)}.meter .mt-t{fill:var(--ink);font-weight:800}
.meter.anim .mt-fg{animation:ds-fadein .6s ease}

/* page transitions + micro-interactions */
#view>*{animation:ds-page .28s cubic-bezier(.2,.8,.2,1) both}
@keyframes ds-page{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.card.lift{transition:transform .18s ease,box-shadow .18s ease}
@media (hover:hover){.card.lift:hover{transform:translateY(-2px);box-shadow:0 10px 26px -14px rgba(10,40,25,.35)}}
.btn{transition:transform .12s ease,background-color .15s ease,box-shadow .15s ease}
.btn:active{transform:scale(.97)}
.count-up{font-variant-numeric:tabular-nums}
.pulse-once{animation:ds-pulse .7s ease}
@keyframes ds-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--g600) 45%,transparent)}100%{box-shadow:0 0 0 14px transparent}}
@media (prefers-reduced-motion:reduce){#view>*,.chart.v5 *,.meter *{animation:none!important}.chart.v5.anim .ln{stroke-dashoffset:0}.chart.v5.anim .ar,.chart.v5.anim .dt{opacity:1}}

/* ---------- super admin ---------- */
.sa-shell{max-width:1180px;margin:0 auto;padding:1rem .9rem 4rem}
.sa-top{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;justify-content:space-between;margin-bottom:1rem}
.sa-top h1{margin:0;font-size:1.35rem}
.sa-tabs{display:flex;gap:.35rem;flex-wrap:wrap;margin:.25rem 0 1rem}
.sa-tabs a{padding:.5rem .85rem;border-radius:999px;border:1px solid var(--line);color:var(--ink);text-decoration:none;font-weight:700;font-size:.92rem;background:var(--surface)}
.sa-tabs a[aria-current=page]{background:var(--g700);border-color:var(--g700);color:#fff}
.kpis{display:grid;gap:.7rem;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:760px){.kpis{grid-template-columns:repeat(4,minmax(0,1fr))}}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:.8rem .9rem;min-width:0}
.kpi .k-l{font-size:.8rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.kpi .k-v{font-size:1.45rem;font-weight:800;margin-top:.15rem;overflow-wrap:anywhere}
.kpi .k-h{font-size:.8rem;color:var(--muted)}
.kpi.warn .k-v{color:var(--o700)}
.acct{display:grid;gap:.6rem;grid-template-columns:1fr;align-items:center;border-bottom:1px solid var(--line);padding:.75rem 0}
.acct:last-child{border-bottom:0}
@media(min-width:900px){.acct{grid-template-columns:minmax(0,2.2fr) minmax(0,1.2fr) minmax(0,1.2fr) auto}}
.acct .a-name{font-weight:800;overflow-wrap:anywhere}
.acct .a-sub{font-size:.82rem;color:var(--muted);overflow-wrap:anywhere}
.acct .a-use{display:flex;align-items:center;gap:.5rem;font-size:.82rem;color:var(--muted);min-width:0}
.acct .a-act{display:flex;gap:.35rem;flex-wrap:wrap}
.tag{display:inline-block;font-size:.72rem;font-weight:800;padding:.12rem .45rem;border-radius:999px;background:var(--g100);color:var(--g800);margin-left:.35rem;vertical-align:1px}
.tag.solo{background:var(--o50);color:var(--o700)}.tag.paused{background:var(--line);color:var(--ink)}.tag.late{background:var(--red50,#FDECEA);color:var(--red,#B42318)}.tag.own{background:var(--g700);color:#fff}
.sa-form{display:grid;gap:.6rem;grid-template-columns:1fr}
@media(min-width:700px){.sa-form{grid-template-columns:1fr 1fr}.sa-form .full{grid-column:1/-1}}
.sa-form label{display:flex;flex-direction:column;gap:.25rem;font-weight:700;font-size:.9rem;min-width:0}
.sa-form input,.sa-form select,.sa-form textarea{width:100%;min-width:0}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.sa{width:100%;border-collapse:collapse;font-size:.88rem}
table.sa th,table.sa td{text-align:left;padding:.5rem .45rem;border-bottom:1px solid var(--line);vertical-align:top}
table.sa th{font-size:.75rem;text-transform:uppercase;letter-spacing:.03em;color:var(--muted)}
table.sa td.num,table.sa th.num{text-align:right;white-space:nowrap}
.otp-in{font-size:1.6rem;letter-spacing:.35em;text-align:center;max-width:12rem}
.qr-secret{font-family:ui-monospace,Menlo,monospace;font-size:1rem;word-break:break-all;background:var(--surface-2);padding:.6rem .7rem;border-radius:10px;border:1px dashed var(--line)}
.type-pick{display:grid;gap:.6rem;grid-template-columns:1fr 1fr}
.type-pick label{border:2px solid var(--line);border-radius:14px;padding:.7rem;cursor:pointer;font-weight:700}
.type-pick label:has(input:checked){border-color:var(--g600);background:color-mix(in srgb,var(--g600) 8%,var(--surface))}
.type-pick small{display:block;font-weight:500;color:var(--muted);margin-top:.2rem}

/* ---------- branding / themes ---------- */
.swatches{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.swatch{border:2px solid var(--line);border-radius:14px;padding:.55rem;background:var(--surface);cursor:pointer;text-align:left;color:var(--ink);font:inherit}
.swatch[aria-pressed=true]{border-color:var(--g600);box-shadow:0 0 0 3px color-mix(in srgb,var(--g600) 25%,transparent)}
.swatch .chips{display:flex;gap:.25rem;margin-bottom:.35rem}
.swatch .chips span{flex:1;height:1.6rem;border-radius:7px;border:1px solid rgba(0,0,0,.08)}
.swatch .nm{font-weight:800;font-size:.85rem}
.swatch .aa{font-size:.72rem;color:var(--muted)}
.preview-pair{display:grid;gap:.6rem;grid-template-columns:1fr 1fr}
.pv{border-radius:14px;padding:.7rem;border:1px solid var(--line);min-width:0}
.pv .pv-h{border-radius:9px;padding:.4rem .6rem;font-weight:800;margin-bottom:.45rem}
.pv .pv-b{display:inline-block;border-radius:999px;padding:.35rem .8rem;font-weight:800;font-size:.85rem}

/* ---------- meal planner v5 ---------- */
.mp-days{display:flex;gap:.35rem;overflow-x:auto;padding-bottom:.25rem;-webkit-overflow-scrolling:touch}
.mp-days button{flex:0 0 auto}
.mp-slot{border:1px dashed var(--line);border-radius:14px;padding:.55rem;margin:.5rem 0;min-height:3rem;background:var(--surface)}
.mp-slot.over{border-color:var(--g600);background:color-mix(in srgb,var(--g600) 7%,var(--surface))}
.mp-slot h4{margin:0 0 .35rem;font-size:.9rem;display:flex;justify-content:space-between;gap:.5rem;align-items:center}
.mp-item{display:flex;align-items:flex-start;gap:.5rem;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:.45rem .55rem;margin:.3rem 0;touch-action:none}
.mp-item.dragging{opacity:.55;box-shadow:0 10px 24px -12px rgba(0,0,0,.4)}
.mp-item .grip{cursor:grab;color:var(--muted);padding:.2rem;user-select:none;font-size:1.1rem;line-height:1}
.mp-item .grow{flex:1;min-width:0}
.mp-item .t{font-weight:700;overflow-wrap:anywhere}
.mp-item .s{font-size:.78rem;color:var(--muted)}
.mp-ghost{position:fixed;pointer-events:none;z-index:999;opacity:.9;max-width:80vw}
.macro{margin:.35rem 0}
.macro .mrow{display:flex;justify-content:space-between;font-size:.8rem;font-weight:700}
.macro .bar{height:.55rem;border-radius:99px;background:var(--line);overflow:hidden;position:relative}
.macro .bar span{position:absolute;inset:0 auto 0 0;border-radius:99px;background:var(--g600);transition:width .45s cubic-bezier(.2,.8,.2,1)}
.macro .bar span.over{background:var(--o600)}
.macro .bar span.under{background:var(--g600)}
.mp-sticky{position:sticky;top:calc(var(--top-h,56px) + .3rem);z-index:5}
.chipset{display:flex;flex-wrap:wrap;gap:.35rem}
.chipset label{display:inline-flex;align-items:center;gap:.3rem;border:1px solid var(--line);border-radius:999px;padding:.3rem .65rem;font-size:.85rem;cursor:pointer;background:var(--surface)}
.chipset label:has(input:checked){border-color:var(--g600);background:color-mix(in srgb,var(--g600) 10%,var(--surface));font-weight:700}

/* v5 themes: dark-mode accent text follows the clinic's colours (theme.css sets --acc-d, checked for AA contrast) */
html[data-theme=dark] a,html[data-theme=dark] .linkbtn,html[data-theme=dark] .ticon,html[data-theme=dark] .menu .contactrow .btn{color:var(--acc-d,#8FD6A8)}
html[data-theme=dark] .chart.v5 .ln{stroke:var(--acc-d,#8FD6A8)}html[data-theme=dark] .chart.v5 .gs1{stop-color:var(--acc-d,#8FD6A8)}
html[data-theme=dark] .chart.v5 .dt{stroke:var(--acc-d,#8FD6A8)}html[data-theme=dark] .chart.v5 .dt.last,html[data-theme=dark] .chart.v5 .tip-dot{fill:var(--acc-d,#8FD6A8)}
html[data-theme=dark] .meter .mt-fg{stroke:var(--acc-d,#8FD6A8)}
html[data-theme=dark] .macro .bar span.under{background:var(--acc-d,#8FD6A8)}
/* v5: the day total now carries the macro bars; on phones a sticky box would cover the meal board, so it scrolls with the page */
@media (max-width: 899px){.sticky-total{position:static}}
/* v5: long account names / name marks must never push the header wider than the phone */
.topbar .logo-link{min-width:0;flex:0 1 auto;overflow:hidden}.topbar .logo{max-width:100%;object-fit:contain;object-position:left center}