/* The owner's back office. Same brand tokens as the account dashboard (app.css); an operations console, so colour is
   restrained: rose for actions and "today", green for money in, amber for attention, navy ink on a quiet surface. */
:root{--ink:#2f2c46;--muted:#5d5977;--rose:#f391a9;--rose-deep:#d63f7c;--navy:#4b4a67;--line:#e9d5de;--bg:#fbf5f8;--surface:#fff;--panel:#f6eef3;--money:#157a56;--money-bg:#e3f5ec;--warn:#9a5b00;--warn-bg:#fff1d6;--z-sticky:10}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{font-size:15px}
body{margin:0;background:var(--bg);color:var(--ink);font:1rem/1.55 -apple-system,BlinkMacSystemFont,"Thonburi","Sarabun",Tahoma,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ol,ul,dl,dd,figure{margin:0;padding:0}ol,ul{list-style:none}
h1{font-size:1.13rem;font-weight:800}h2{font-size:1.07rem;font-weight:800}h3{font-size:.9rem;font-weight:800;color:var(--navy);margin-bottom:10px}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--rose-deep);outline-offset:2px;border-radius:6px}

.bar{position:sticky;top:0;z-index:var(--z-sticky);display:flex;align-items:center;gap:16px;padding:10px clamp(14px,3vw,32px);background:var(--surface);border-bottom:1px solid var(--line)}
.bar-title{display:flex;align-items:center;gap:10px}.bar-title img{border-radius:50%}
.live{display:inline-flex;align-items:center;gap:8px;margin-left:auto;padding:4px 12px;border-radius:999px;background:var(--panel);font-size:.85rem;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.dot{width:8px;height:8px;border-radius:50%;background:#b9b4c9}
.live[data-state="on"]{background:var(--money-bg);color:var(--money)}.live[data-state="on"] .dot{background:var(--money);animation:pulse 2s ease-out infinite}
.live[data-state="stale"]{background:var(--warn-bg);color:var(--warn)}.live[data-state="stale"] .dot{background:var(--warn)}
@keyframes pulse{0%{box-shadow:0 0 0 0 #157a5666}70%{box-shadow:0 0 0 7px #157a5600}100%{box-shadow:0 0 0 0 #157a5600}}
.bar-links{display:flex;gap:14px;font-size:.87rem}.bar-links a{color:var(--navy);font-weight:700;text-underline-offset:3px}

main{max-width:1320px;margin:0 auto;padding:22px clamp(14px,3vw,32px) 60px;display:grid;grid-template-columns:minmax(0,1fr);gap:26px}
.sec-head{display:flex;align-items:baseline;gap:12px;margin-bottom:12px}.sec-head.wrap{flex-wrap:wrap}
.sec-note{font-size:.85rem;color:var(--muted)}

/* Today: one sentence, then the figures as a single ruled band (not a row of cards), then the month at a glance. */
.today{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px 20px 14px}
.today-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-bottom:14px}
.today-line{font-size:1rem;color:var(--navy);text-wrap:pretty}
.figures{display:grid;grid-template-columns:1.25fr repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.figure{padding:12px 16px 12px 0;display:grid;gap:1px;align-content:start}.figure+.figure{padding-left:16px;border-left:1px solid var(--line)}
.figure dt{font-size:.82rem;font-weight:700;color:var(--muted)}
.figure-value{font-size:1.6rem;font-weight:800;line-height:1.2;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.figure:first-child .figure-value{font-size:2.1rem}
.figure.is-money .figure-value{color:var(--money)}.figure.is-warn .figure-value{color:var(--warn)}
.figure-note{font-size:.8rem;color:var(--muted);text-wrap:pretty}
.trend{margin-top:14px}.trend figcaption{display:flex;justify-content:space-between;gap:12px;font-size:.82rem;font-weight:700;color:var(--muted);margin-bottom:4px}
.legend{display:inline-flex;align-items:center;gap:6px;font-weight:600}.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-left:10px}.k-drafts{background:#e7a9c1}.k-money{background:var(--money);border-radius:50%!important}
.chart{overflow:hidden}.chart svg{display:block;width:100%;height:auto;max-height:210px}
.c-bar{fill:#efc3d4;transition:fill .15s ease}.c-bar:hover{fill:var(--rose-deep)}.c-bar.is-today{fill:var(--rose-deep)}
.c-line{fill:none;stroke:var(--money);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}.c-dot{fill:var(--surface);stroke:var(--money);stroke-width:2}
.c-tick{font-size:11px;fill:var(--muted)}

.split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:26px;align-items:start}
.nudges{display:grid;gap:8px;counter-reset:n}
.nudge{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:12px 14px 12px 46px;background:var(--surface);border:1px solid var(--line);border-radius:12px;counter-increment:n}
.nudge::before{content:counter(n);position:absolute;left:14px;top:13px;width:22px;height:22px;border-radius:50%;background:var(--panel);color:var(--navy);font-size:.8rem;font-weight:800;display:grid;place-items:center}
.nudge.is-pending_order::before,.nudge.is-low_credits::before,.nudge.is-heavy_free::before{background:var(--money-bg);color:var(--money)}
.nudge.is-going_quiet::before,.nudge.is-low_confidence::before{background:var(--warn-bg);color:var(--warn)}
.nudge-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;min-width:0}.nudge-head strong{overflow-wrap:anywhere}
.tagline{font-size:.85rem;font-weight:700;color:var(--navy)}
.nudge-detail{grid-column:1;font-size:.87rem;color:var(--muted)}.nudge-todo{grid-column:1;font-size:.87rem}
.nudge .ghost{grid-column:2;grid-row:1 / span 3;align-self:center}
.ghost{padding:6px 12px;border-radius:9px;border:1px solid var(--line);background:var(--surface);font-size:.85rem;font-weight:700;cursor:pointer;transition:background .15s ease,border-color .15s ease}
.ghost:hover{background:var(--panel);border-color:#d9b9c8}.ghost:active{background:#eedfe7}

.feed{background:var(--surface);border:1px solid var(--line);border-radius:12px;max-height:560px;overflow:auto}
.event{display:grid;grid-template-columns:86px minmax(0,1fr) auto;gap:0 10px;padding:8px 14px;font-size:.87rem;border-bottom:1px solid #f3e6ec}
.event:last-child{border-bottom:0}
.event time{grid-row:1 / span 2;color:var(--muted);font-variant-numeric:tabular-nums}
.event-what{font-weight:700}.event-who{grid-column:2;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.event-amount{grid-column:3;grid-row:1 / span 2;align-self:center;font-weight:700;font-variant-numeric:tabular-nums;color:var(--muted)}
.event.is-topup .event-what,.event.is-topup .event-amount{color:var(--money)}.event.is-signup .event-what{color:var(--rose-deep)}
.event.is-new{animation:arrive 2.4s ease-out}
@keyframes arrive{from{background:#ffe3ee}to{background:transparent}}

.health{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:0;background:var(--surface);border:1px solid var(--line);border-radius:16px}
.health-block{padding:16px 20px}.health-block+.health-block{border-left:1px solid var(--line)}
.funnel,.bars{display:grid;gap:7px}
.step,.bar-row{display:grid;grid-template-columns:110px minmax(40px,1fr) auto;align-items:center;gap:10px;font-size:.87rem}
.step{grid-template-columns:96px minmax(40px,1fr) 38px 108px}.step strong{text-align:right;font-variant-numeric:tabular-nums}.step-rate{font-size:.8rem;color:var(--muted)}
.step-label{font-weight:600}
.meter{height:8px;border-radius:999px;background:var(--panel);position:relative;overflow:hidden}
.meter::after{content:"";position:absolute;inset:0;width:var(--fill,0%);border-radius:inherit;background:#e7a9c1;transition:width .25s ease}
.is-money .meter::after,.is-good .meter::after{background:#5fbf97}.is-warn .meter::after{background:#e2a94a}
.bar-row strong{font-variant-numeric:tabular-nums;font-size:.85rem}

.filters{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-left:auto}
.filters input,.filters select,.gift input,.gift select{height:34px;padding:0 10px;border-radius:9px;border:1px solid #d9c5cf;background:var(--surface)}
.filters input{width:220px}
.filters input::placeholder,.gift input::placeholder{color:#6d6886}
.table-wrap{overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:12px}
table{width:100%;border-collapse:collapse;font-size:.87rem}
th,td{padding:9px 12px;text-align:left;white-space:nowrap;border-bottom:1px solid #f3e6ec}
thead th{position:sticky;top:0;background:var(--panel);font-size:.8rem;font-weight:800;color:var(--navy);cursor:pointer;user-select:none}
thead th[aria-sort="descending"]::after{content:" ▾"}thead th[aria-sort="ascending"]::after{content:" ▴"}
#ref-table thead th{cursor:default}
.num{text-align:right;font-variant-numeric:tabular-nums}.is-low{color:var(--warn);font-weight:700}
tbody tr:hover:not(.detail){background:#fdf7fa}tr.is-open{background:#fdf1f6}
.rowlink{padding:0;border:0;background:none;font-weight:700;cursor:pointer;text-align:left;text-decoration:underline;text-decoration-color:#d9b9c8;text-underline-offset:3px}
.rowlink:hover{text-decoration-color:var(--rose-deep)}
.chip{margin-left:8px;padding:1px 8px;border-radius:999px;background:var(--panel);font-size:.75rem;font-weight:700;color:var(--navy)}
.stage{font-weight:600}.stage.is-paid{color:var(--money)}.stage.is-signed_up,.stage.is-shop{color:var(--muted)}
.detail td{white-space:normal;background:#fdf7fa;padding:14px 16px}
.detail-facts{font-size:.87rem;color:var(--navy);margin-bottom:10px;text-wrap:pretty}
.gift{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.gift strong{font-size:.87rem;margin-right:4px}
.gift input[type=number]{width:130px}.gift input[type=number][max="90"]{width:70px}.gift input[type=text]{width:240px}.unit{font-size:.85rem;color:var(--muted);margin-left:-2px}
.gift-status{font-size:.85rem;color:var(--navy);font-weight:600}
.button{display:inline-flex;align-items:center;height:34px;padding:0 16px;border-radius:9px;border:0;background:var(--rose-deep);color:#fff;font-weight:800;cursor:pointer;text-decoration:none;transition:background .15s ease,transform .15s ease}
.button:hover{background:#c02f6b}.button:active{transform:scale(.98)}.button:disabled{background:#c9b3be;cursor:default}
.button[data-armed="1"]{background:var(--warn)}
.empty{padding:18px 16px;color:var(--muted);font-size:.87rem;white-space:normal}
.system{font-size:.8rem;color:var(--muted);line-height:1.7}
.gate{max-width:460px;margin:12vh auto;padding:28px;text-align:center;background:var(--surface);border:1px solid var(--line);border-radius:16px;display:grid;gap:12px;justify-items:center}

@media (max-width:1080px){.figures{grid-template-columns:repeat(2,minmax(0,1fr))}.figure+.figure{border-left:0;padding-left:0}.figure{border-bottom:1px solid var(--line)}.figure:first-child{grid-column:1 / -1}.split,.health{grid-template-columns:minmax(0,1fr)}.health-block+.health-block{border-left:0;border-top:1px solid var(--line)}}
@media (max-width:640px){.bar{flex-wrap:wrap;gap:8px 12px}.live{margin-left:0;order:3}.bar-links{margin-left:auto}.filters{margin-left:0;width:100%}.filters input{flex:1;width:auto}.step{grid-template-columns:84px 1fr 34px}.step-rate{display:none}.nudge{grid-template-columns:minmax(0,1fr);padding-left:42px}.figures{grid-template-columns:minmax(0,1fr)}.trend figcaption{flex-wrap:wrap}.nudge .ghost{grid-column:1;grid-row:auto;justify-self:start;margin-top:6px}.event{grid-template-columns:72px minmax(0,1fr) auto}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Voices from customers, and the tax-invoice desk. */
.voice-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:8px}
.voice{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:12px 14px;background:var(--surface);border:1px solid var(--line);border-radius:12px}
.voice-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;min-width:0}.voice-head strong{overflow-wrap:anywhere;font-size:.9rem}.voice-head time{font-size:.8rem;color:var(--muted)}.voice-head .chip{margin-left:0}
.voice.is-business .chip{background:var(--money-bg);color:var(--money)}.voice.is-problem .chip{background:var(--warn-bg);color:var(--warn)}
.voice-text{grid-column:1;font-size:.93rem;text-wrap:pretty}.voice .sec-note{grid-column:1}
.voice select{grid-column:2;grid-row:1 / span 3;align-self:start;height:32px;padding:0 8px;border-radius:9px;border:1px solid #d9c5cf;background:var(--surface)}
.voice.st-done,.voice.st-dismissed{opacity:.62}
.seller{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin-bottom:12px}.seller summary{cursor:pointer;font-weight:800;font-size:.93rem}
.seller-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;margin-top:14px}.seller-form label{display:grid;gap:4px;font-size:.87rem;font-weight:700}.seller-form .wide{grid-column:1 / -1}
.seller-form input:not([type=checkbox]),.seller-form textarea{font:inherit;font-weight:400;padding:8px 10px;border-radius:9px;border:1px solid #d9c5cf;background:#fff;width:100%}.seller-form textarea{min-height:64px;resize:vertical}
.seller-form .check{display:flex;gap:10px;align-items:flex-start;font-weight:400}.seller-form .check input{margin-top:5px}.seller-form .row{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
tr.is-void td{color:var(--muted);text-decoration:line-through}tfoot td{font-weight:800;background:var(--panel);border-bottom:0}
@media (max-width:640px){.seller-form{grid-template-columns:minmax(0,1fr)}.voice{grid-template-columns:minmax(0,1fr)}.voice select{grid-column:1;grid-row:auto;justify-self:start}}

/* The on/off switch of the invoice desk. */
.switch{display:inline-flex;align-items:center;gap:10px;height:34px;padding:0 14px 0 6px;border-radius:999px;border:1px solid #d9c5cf;background:var(--surface);font-size:.87rem;font-weight:800;cursor:pointer;transition:background .15s ease,border-color .15s ease}
.switch-track{position:relative;width:40px;height:22px;border-radius:999px;background:#cfc8d8;transition:background .2s ease}
.switch-knob{position:absolute;left:2px;top:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0004;transition:transform .2s cubic-bezier(.16,1,.3,1)}
.switch[aria-checked="true"]{border-color:#5fbf97;background:var(--money-bg);color:var(--money)}.switch[aria-checked="true"] .switch-track{background:var(--money)}.switch[aria-checked="true"] .switch-knob{transform:translateX(18px)}
.switch[data-armed="1"]{border-color:#e2a94a;background:var(--warn-bg);color:var(--warn)}.switch:disabled{opacity:.55;cursor:default}