/* Spark client portal styles. Requires tokens.css and shell.css loaded first (see core/base.html). */
*{box-sizing:border-box}
body{margin:0;background:var(--canvas);color:var(--text);font:14px/1.6 "Plus Jakarta Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--link);text-underline-offset:3px}
a:hover{text-decoration:underline}
button,input,select,textarea{font:inherit}
button,input[type=submit],.button{cursor:pointer;background:var(--accent);color:var(--accent-text);font-weight:650;border:1px solid transparent;border-radius:10px;padding:10px 17px;min-height:42px;text-decoration:none}
button:hover,.button:hover{filter:brightness(.96)}
button.quiet{background:var(--surface-alt);color:var(--text);border-color:var(--line);font-size:12px}
input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea{background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:9px;padding:10px 12px;max-width:100%;min-height:42px}
input[type=checkbox],input[type=radio]{accent-color:#C25E00}
textarea{width:100%;max-width:700px}
input[type=color]{padding:4px!important;width:80px}
input[type=file]{width:100%}
label{display:inline-block;color:var(--text);font-weight:550}
label>select,label>input{display:block;margin-top:6px}
label:has(input[type=checkbox])>input{display:inline}
form>p{margin:14px 0}
form>p>label{display:block;margin-bottom:5px}
form>p>input:not([type=checkbox]):not([type=radio]),form>p>select{width:min(100%,540px)}
form>p .helptext{display:block;max-width:700px;font-size:12px;color:var(--muted)}
form>div{margin-bottom:14px}
form>div>label{display:block}
form>div>input:not([type=checkbox]):not([type=radio]){width:min(100%,540px)}
form:not([method=post]):not([method="POST"]){display:flex;flex-wrap:wrap;gap:12px;align-items:end;margin:16px 0}
h1,h2,h3{font-family:"Space Grotesk",system-ui,sans-serif;color:var(--text);line-height:1.25}
h1{font-size:28px;letter-spacing:-.8px;margin:5px 0 10px;font-weight:750}
h2{font-size:17px;margin:0 0 18px;font-weight:650}
h3{font-size:15px}
p,small{color:var(--muted)}
small{font-size:12px}
strong{color:var(--text)}
section,.card{background:var(--surface);border:1px solid var(--card-border);border-radius:var(--card-radius);padding:24px;margin:20px 0;box-shadow:var(--shadow)}
section p:last-child{margin-bottom:0}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:14px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:11px;letter-spacing:.4px;color:var(--muted);font-weight:650;background:var(--surface-alt)}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--surface-alt)}
.scroll{overflow:auto}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px}
.cards .card{margin:0;padding:22px}
.card p{font-size:12px;margin:0 0 12px}
.value{font-family:"Space Grotesk",system-ui,sans-serif;font-size:29px;font-weight:700;letter-spacing:-1px;line-height:1.3;font-variant-numeric:tabular-nums}
.card small{display:block;margin-top:9px}
.cards .card:first-child{border-top:1px solid var(--card-border)}
.errorlist,[role=alert]{color:var(--danger)}
.errorlist{padding-left:20px}
[role=alert],[role=status]{background:var(--surface);border:1px solid currentColor;border-radius:10px;padding:12px 16px}
[role=status]{color:var(--success)}
.spark-workspace{margin-left:246px}
.breadcrumb{font-size:12px;color:var(--muted)}
.breadcrumb span{padding:0 9px;color:var(--muted)}
.company-name{font-size:12px;color:var(--muted);max-width:250px}
.spark-workspace main{padding:32px 36px;max-width:1600px;margin:0 auto;min-height:calc(100vh - 145px)}
.page-eyebrow{font-size:9px;letter-spacing:1.6px;margin:0 0 12px}
.page-description{max-width:850px;margin:0 0 24px}
.workspace-footer{padding:0 36px 20px;font-size:11px;color:var(--muted)}
.shortcut-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.shortcut{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--card-border);border-radius:16px;box-shadow:var(--control-shadow);padding:17px;color:var(--text);font-size:12px;text-decoration:none;background:var(--surface)}
.shortcut:hover{border-color:#C25E00;text-decoration:none}
.shortcut span{color:var(--link);font-size:18px}
.overview-heading{display:flex;align-items:start;justify-content:space-between;gap:20px}
.overview-heading .button{font-size:12px;white-space:nowrap}
.section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.section-heading h2{margin:0}
.section-heading a{font-size:12px}
.filters{background:var(--surface);padding:18px;border:1px solid var(--card-border);border-radius:20px;box-shadow:var(--shadow)}
.filters label{font-size:11px}
.device-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 0;border-bottom:1px solid var(--line)}
.device-row:last-of-type{border:0}
.device-row strong{font-size:13px}
.device-row small{display:block}
.previews{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.preview{aspect-ratio:5/3;border:1px solid var(--line);border-radius:12px;padding:15px;display:flex;flex-direction:column;justify-content:center;text-align:center;overflow:hidden;background-size:cover;background-position:center}
.preview img{max-height:44px;max-width:120px;object-fit:contain;margin:0 auto}
.preview video{width:100%;max-height:140px}
.preview .total{font-size:28px;font-weight:800}
.preview p,.preview small,.preview h3{color:inherit}
.spark-login .spark-workspace{margin:0}
.spark-login .spark-topbar{background:transparent;border:0}
.spark-login main{min-height:70vh;display:grid;place-items:center;padding:24px}
.login-card{width:min(100%,430px);padding:38px;margin:0}
.login-card form{display:block!important}
.login-card input{width:100%!important}
.login-card button{width:100%;margin-top:16px}
.login-card .spark-brand{margin-left:0}
.login-card h1{font-size:25px}
.login-card .errorlist{font-size:13px}
.spark-login .workspace-footer{text-align:center}
.muted{color:var(--muted)}
@media(min-width:1300px){.spark-workspace main{padding:38px 44px}}
@media(max-width:1100px){.company-name{display:none}.spark-workspace main{padding:26px 24px}.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.spark-workspace{margin-left:0}.breadcrumb{font-size:11px}.company-name{display:none}}
@media(max-width:560px){.spark-workspace main{padding:24px 16px}.breadcrumb{display:none}.cards{gap:10px}.cards .card{padding:17px}.value{font-size:25px}.card p{min-height:34px}.overview-heading{display:block}.overview-heading .button{display:inline-block;margin:0 0 15px}h1{font-size:25px}section{padding:18px}.filters label{width:100%}.filters select,.filters input{width:100%}.device-row{align-items:start;flex-direction:column;gap:5px}.shortcut-grid{grid-template-columns:1fr 1fr}.shortcut{padding:13px;font-size:11px}.workspace-footer{padding-left:16px}.login-card{padding:25px}}
.scope-menu summary{max-width:230px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.scope-menu>div{width:290px}
.scope-menu form{display:block!important}
.scope-menu label{display:block;margin:12px 0}
.scope-menu select{width:100%}
.spark-workspace main>nav{display:flex;flex-wrap:wrap;gap:14px;margin:16px 0}
.spark-workspace main>form{padding:18px;background:var(--surface);border:1px solid var(--card-border);border-radius:20px;box-shadow:var(--shadow)}
.spark-workspace main>.scroll{background:var(--surface);border:1px solid var(--card-border);border-radius:var(--card-radius);box-shadow:var(--shadow)}
.spark-workspace main>h2{margin-top:28px}
.spark-workspace main>p:has(a){display:flex;flex-wrap:wrap;gap:8px}
.spark-workspace .login-card form{padding:0;border:0}
@media(max-width:1100px){.scope-menu summary{max-width:160px}}
@media(max-width:560px){.scope-menu summary{max-width:110px;font-size:11px}.scope-menu>div{position:fixed;top:72px;left:12px;width:calc(100vw - 24px)}}
.breadcrumb a{color:var(--muted);text-decoration:none}
.breadcrumb a:hover{color:var(--text);text-decoration:underline}
@media(max-width:1100px){.breadcrumb{max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
@media(max-width:560px){.scope-menu summary{max-width:95px}}
/* Soft, floating surfaces from the dashboard reference. Keep focus/error outlines explicit. */
.spark-portal button:not(.sidebar-scrim),.spark-portal .button{border-radius:12px;box-shadow:var(--control-shadow)}
button.quiet{background:var(--surface-alt);border-color:transparent;box-shadow:none}
.spark-portal input:not([type=checkbox]):not([type=radio]):not([type=hidden]),.spark-portal select,.spark-portal textarea{background:var(--surface-alt);border-color:var(--line);border-radius:10px}
.spark-portal th{background:transparent;font-weight:550}
.spark-portal td,.spark-portal th{border-bottom-color:var(--surface-alt)}
.spark-portal section h2{font-size:15px;font-weight:650}
.shortcut{background:var(--surface-alt)}
.shortcut:hover{border-color:var(--line);background:var(--surface)}
@media(max-width:560px){section,.card,.spark-workspace main>.scroll{border-radius:22px}}
h1{font-weight:700;letter-spacing:-.03em}
h2,h3{letter-spacing:-.02em}
.page-eyebrow{color:var(--link);font-weight:700;letter-spacing:.12em}
.spark-portal button:not(.quiet):not(.sidebar-scrim),.spark-portal .button{border-radius:14px;box-shadow:0 10px 26px -12px rgba(255,117,26,.5)}
[data-theme=light] .shortcut{background:#F3F4F6}
.shortcut:hover{border-color:var(--accent)}
@media(prefers-reduced-motion:no-preference){.shortcut,button,.button{transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease}}
/* Customer display preview mirrors the device, which keeps the logo on a white tile over the configurable background. */
.preview img.spark-logo{width:180px;max-width:90%;max-height:none;background:#fff;border-radius:10px}
/* Keep the primary revenue card gently distinct in both themes. */
.cards .card.revenue-primary{
  --revenue-surface:color-mix(in srgb,var(--accent) 6%,var(--surface));
  background:var(--revenue-surface);
  border:1px solid color-mix(in srgb,var(--accent) 25%,var(--card-border));
}
.revenue-primary p{color:var(--link);font-weight:650}
/* A single soft pulse accompanies a changed revenue amount, without shifting layout. */
@media(prefers-reduced-motion:no-preference){
  .cards .revenue-rise{--revenue-tint:var(--success);animation:revenue-pulse 1.4s ease-out}
  .cards .revenue-fall{--revenue-tint:var(--link);animation:revenue-pulse 1.4s ease-out}
  @keyframes revenue-pulse{
    0%,100%{background:var(--revenue-surface,var(--surface));box-shadow:var(--shadow)}
    22%{background:color-mix(in srgb,var(--revenue-tint) 9%,var(--surface));box-shadow:0 0 0 2px color-mix(in srgb,var(--revenue-tint) 25%,transparent),var(--shadow)}
  }
}
/* Native radio controls keep the catalog palette usable without JavaScript. */
.catalog-palette{display:flex;flex-wrap:wrap;gap:10px;max-width:324px;margin:10px 0 8px}
.catalog-color-choice{position:relative;display:inline-flex;align-items:center;cursor:pointer;gap:9px}
.catalog-color-choice input[type=radio]{position:absolute;width:1px;height:1px;opacity:0;margin:0}
.catalog-color-swatch{display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;border-radius:50%;background:var(--swatch-color,var(--surface-alt));border:1px solid #0002;color:#14171A;box-shadow:inset 0 0 0 1px #ffffff26}
.catalog-color-check{display:none;font-size:22px;font-weight:750;line-height:1}
.catalog-color-choice input:checked+.catalog-color-swatch{outline:2px solid var(--text);outline-offset:2px}
.catalog-color-choice input:checked+.catalog-color-swatch .catalog-color-check{display:block}
.catalog-color-choice input:checked+.catalog-color-swatch .catalog-color-link{display:none}
.catalog-color-choice input:focus-visible+.catalog-color-swatch{outline:3px solid var(--link);outline-offset:3px}
.catalog-color-choice:hover .catalog-color-swatch{box-shadow:inset 0 0 0 2px #0003}
.catalog-color-inherit{color:var(--text);font-size:24px}
.catalog-color-name{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.catalog-color-choice:has(.catalog-color-inherit) .catalog-color-name{position:static;width:auto;height:auto;overflow:visible;clip-path:none;white-space:normal;font-size:12px;margin-right:6px}
.catalog-color-choice:has(.catalog-color-inherit){flex-basis:100%}
.spark-workspace main{padding-top:18px}
h1{font-size:27px;margin-bottom:20px}
section,.card{padding:22px}
.cards{gap:14px}
.cards .card{padding:19px}
.card p{margin-bottom:8px}
.card small{font-size:11px}
.value{font-size:27px}
.filters{padding:14px 18px;gap:10px!important;border-radius:18px}
.filters input,.filters select{min-height:38px!important;padding:7px 10px!important}
.filters label>input,.filters label>select{margin-top:4px}
.spark-workspace main>nav,.spark-workspace main>p:has(a){align-items:center;gap:12px}
.spark-workspace main>nav a,.spark-workspace main>p>a{font-size:12px;font-weight:650;text-decoration:none;padding:8px 12px;border-radius:10px;background:var(--surface)}
.inline-info{margin:12px 0;color:var(--muted);font-size:12px;max-width:100%}
.inline-info>summary{cursor:pointer;width:fit-content;padding:5px 0;font-size:11px;font-weight:650;color:var(--muted)}
.inline-info[open]>summary{color:var(--text)}
.inline-info p{max-width:850px;margin:8px 0 12px;line-height:1.7}
.inline-info:last-child{margin-bottom:0}
.overview-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:10px 0 18px;font-size:11px;color:var(--muted)}
#live-status{border:0;background:none;padding:0;margin:0;font-size:11px;color:var(--muted);box-shadow:none}
#live-status::before{content:'';display:inline-block;width:6px;height:6px;margin-right:7px;border-radius:50%;background:var(--success)}
#live-status[data-state=stale]{color:var(--danger)}
#live-status[data-state=stale]::before{background:var(--danger)}
#live-status[data-state=paused]::before{background:var(--chart-orange)}
.mode-badge{font-size:10px;font-weight:750;letter-spacing:.05em;padding:4px 7px;border-radius:6px;background:var(--surface-alt);color:var(--text)}
.cards .attention-card{border-color:color-mix(in srgb,var(--chart-red) 24%,var(--line));background:color-mix(in srgb,var(--chart-red) 4%,var(--surface))}
.attention-card .value{color:var(--chart-red)}
.overview-charts{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(260px,1fr);gap:18px;margin:20px 0}
.overview-charts>section{margin:0;min-width:0}
.overview-charts .section-heading{margin-bottom:12px}
.chart-total{font-family:'Space Grotesk',system-ui,sans-serif;font-size:30px;letter-spacing:-.04em;font-weight:700;line-height:1.25;color:var(--text)}
.chart-total>span{font-size:19px;font-weight:500}
.chart-caption{font-size:11px;margin:3px 0 8px}
.chart-empty{font-size:12px;margin:4px 0}
.trend-chart{width:100%;height:auto;display:block;overflow:visible}
.chart-grid{stroke:var(--line);stroke-dasharray:3 6;stroke-width:1}
.chart-baseline{stroke:var(--line);stroke-width:1}
.chart-label{fill:var(--muted);font-size:11px;font-family:'Plus Jakarta Sans',sans-serif}
.chart-line{fill:none;stroke:var(--chart-red);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.chart-point{fill:var(--surface);stroke:var(--chart-red);stroke-width:1.5}
.chart-values{margin-top:0}
.chart-values .scroll{max-height:260px}
.donut-wrap{position:relative;max-width:240px;margin:8px auto 12px}
.donut-chart{display:block;width:100%;height:auto}
.donut-chart circle{fill:none;stroke-width:17}
.donut-track{stroke:var(--surface-alt)}
.donut-cash{stroke:var(--chart-orange)}
.donut-card{stroke:var(--chart-red)}
.donut-total{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:45px 25px;text-align:center;pointer-events:none}
.donut-total strong{font-family:'Space Grotesk',system-ui,sans-serif;font-size:clamp(17px,1.6vw,25px);letter-spacing:-.04em;max-width:100%;overflow-wrap:anywhere}
.donut-total small{font-size:10px;margin-top:4px}
.payment-legend{margin:12px 0 0;font-size:12px}
.payment-legend>div{display:flex;justify-content:space-between;gap:12px;padding:8px 0}
.payment-legend dt{display:flex;align-items:center;gap:8px}
.payment-legend dd{margin:0;font-variant-numeric:tabular-nums;font-weight:650}
.legend-dot{display:inline-block;width:7px;height:7px;border-radius:50%;flex-shrink:0}
.cash-dot{background:var(--chart-orange)}
.card-dot{background:var(--chart-red)}
.payment-fallback{padding:40px 0}
.payment-fallback p{font-size:12px}
[role=alert]::before{content:'!';display:inline-grid;place-items:center;width:18px;height:18px;margin-right:8px;border:1px solid currentColor;border-radius:50%;font-weight:750;font-size:11px}
.errorlist{border-left:3px solid var(--danger);padding-left:22px}
.spark-login .login-card{border-top:3px solid var(--chart-red)}
.spark-login .login-card h1{margin-bottom:24px}
@media(min-width:1300px){.spark-workspace main{padding-top:22px}}
@media(max-width:1100px){.chart-label{font-size:16px}.overview-charts{grid-template-columns:minmax(0,1.5fr) minmax(220px,1fr)}.overview-charts>section{padding:18px}.cards{grid-template-columns:repeat(3,minmax(0,1fr))}.value{font-size:25px}}
@media(max-width:700px){.overview-charts{grid-template-columns:1fr}.donut-wrap{max-width:220px}.donut-total strong{font-size:24px}.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.overview-meta{align-items:flex-start;flex-wrap:wrap}.overview-charts>section{padding:18px}.card p{min-height:0}.chart-label{font-size:20px}.overview-heading .button{white-space:normal}.filters label{width:auto;flex:1 1 130px}.filters{gap:12px!important}.value{font-size:24px}}
.pairing-code code{font-size:2.5rem;letter-spacing:.25em;padding:.2em .4em}
/* Dark modules on white in every theme: cameras need the contrast. */
.pairing-qr svg{display:block;background:#fff;border-radius:12px}