/* Shared appearance across management, accounts and every guest portal. */
:root{color-scheme:light;--theme-bg:#f7f8fa;--theme-surface:#fff;--theme-soft:#fafbfc;--theme-input:#fff;--theme-ink:#182233;--theme-muted:#758094;--theme-line:#e8ecf2;--theme-accent:#002071;--theme-hover:#002da1;--theme-selected:#edf2ff;--theme-focus:#547ee5}
:root[data-theme=dark]{color-scheme:dark;--theme-bg:#0d121c;--theme-surface:#141c29;--theme-soft:#182232;--theme-input:#101824;--theme-ink:#e7edf7;--theme-muted:#a0aec2;--theme-line:#293448;--theme-accent:#8cb9ff;--theme-hover:#b4d1ff;--theme-selected:#213352;--theme-focus:#8cb9ff}
@media(prefers-color-scheme:dark){:root:not([data-theme]){color-scheme:dark;--theme-bg:#0d121c;--theme-surface:#141c29;--theme-soft:#182232;--theme-input:#101824;--theme-ink:#e7edf7;--theme-muted:#a0aec2;--theme-line:#293448;--theme-accent:#8cb9ff;--theme-hover:#b4d1ff;--theme-selected:#213352;--theme-focus:#8cb9ff}}
.theme-control{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin:0;color:var(--theme-muted);font-size:10px;font-weight:500;letter-spacing:0;line-height:1.4;text-transform:none;flex-shrink:0}
.theme-control select{width:132px;min-width:0;margin:0;padding:8px 10px;border:1px solid var(--theme-line);border-radius:8px;background:var(--theme-surface);color:var(--theme-ink);font:500 11px/1.4 ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;cursor:pointer;letter-spacing:0;text-transform:none}
.theme-control select:focus-visible{outline:2px solid var(--theme-focus);outline-offset:2px}.topbar>.theme-control{margin-left:auto}.topbar .breadcrumb{min-width:0;overflow:hidden}
.theme-portal{margin-bottom:22px}.theme-floating{position:fixed;right:20px;top:16px;z-index:15;padding:6px 8px;background:var(--theme-surface);border:1px solid var(--theme-line);border-radius:10px}
@media(max-width:700px){.theme-control>span{display:none}.theme-control select{width:116px}.topbar{gap:10px}.topbar .breadcrumb{white-space:nowrap;gap:8px;font-size:11px}.theme-floating{right:12px;top:10px}.theme-portal{margin-bottom:18px}}
@media screen{
body{background-color:var(--theme-bg);color:var(--theme-ink)}
:root{--ink:var(--theme-ink);--muted:var(--theme-muted);--line:var(--theme-line);--bg:var(--theme-bg)}
/* Portal backgrounds keep the customer's accent in either appearance. */
body:has(.portal-card){background:radial-gradient(ellipse at top left,color-mix(in srgb,var(--accent,#002071) 10%,var(--theme-bg)),var(--theme-bg) 70%)}
.portal-card{background:var(--theme-surface);border-color:var(--theme-line);color:var(--theme-ink)}
.portal-card input:not([type=checkbox]){background:var(--theme-input);color:var(--theme-ink);border-color:var(--theme-line)}
.portal-card #p-intro,.portal-card footer p,.portal-card footer>span,.portal-card details,.portal-card .accept,.powered-by-brand{color:var(--theme-muted)}
.portal-card footer{border-color:var(--theme-line)}
.portal-card a:not(.powered-by-brand){color:var(--theme-accent)}
.portal-monogram,.portal-tag{background:color-mix(in srgb,var(--accent,#002071) 12%,var(--theme-surface));color:var(--theme-accent)}

.preview-ribbon{background:var(--theme-surface);border-color:var(--theme-line);color:var(--theme-muted)}
/* Dark management palette; semantic colors remain distinct. */
:root[data-theme=dark] .sidebar,:root[data-theme=dark] .topbar,:root[data-theme=dark] .card,:root[data-theme=dark] .stat-card,:root[data-theme=dark] .school-card,:root[data-theme=dark] dialog,:root[data-theme=dark] .overview-stats{background:var(--theme-surface);border-color:var(--theme-line);color:var(--theme-ink)}
:root[data-theme=dark] .sidebar .brand-logo{background:#fff;padding:9px 10px;border-radius:8px}
:root[data-theme=dark] .school-switch strong,:root[data-theme=dark] .user-card strong,:root[data-theme=dark] .customer-name,:root[data-theme=dark] .customer-metric strong{color:var(--theme-ink)}
:root[data-theme=dark] .sidebar nav>a,:root[data-theme=dark] .school-switch>span,:root[data-theme=dark] .school-switch small,:root[data-theme=dark] .workspace-tag,:root[data-theme=dark] .nav-label,:root[data-theme=dark] .breadcrumb,:root[data-theme=dark] .user-card small,:root[data-theme=dark] .logout,:root[data-theme=dark] .page-heading p,:root[data-theme=dark] .eyebrow,:root[data-theme=dark] .customer-identity p,:root[data-theme=dark] .customer-result-count,:root[data-theme=dark] .customer-pagination,:root[data-theme=dark] .customer-empty p,:root[data-theme=dark] .customer-metric>span,:root[data-theme=dark] .stat-card>span,:root[data-theme=dark] .stat-card small,:root[data-theme=dark] .app-footer,:root[data-theme=dark] .field-hint,:root[data-theme=dark] small,:root[data-theme=dark] label{color:var(--theme-muted)}
:root[data-theme=dark] .sidebar nav>a:hover,:root[data-theme=dark] .sidebar nav>a.selected,:root[data-theme=dark] .avatar,:root[data-theme=dark] .customer-avatar,:root[data-theme=dark] .pill{background:var(--theme-selected);color:var(--theme-accent)}
:root[data-theme=dark] .school-switch>a,:root[data-theme=dark] .text-link,:root[data-theme=dark] .login-note a,:root[data-theme=dark] .customer-name:hover{color:var(--theme-accent)}
:root[data-theme=dark] input,:root[data-theme=dark] select,:root[data-theme=dark] textarea,:root[data-theme=dark] .search-input{background:var(--theme-input);border-color:var(--theme-line);color:var(--theme-ink)}
:root[data-theme=dark] input::placeholder,:root[data-theme=dark] textarea::placeholder{color:#8493aa}
:root[data-theme=dark] .theme-control select{background:var(--theme-surface)}
:root[data-theme=dark] .secondary{background:var(--theme-surface);border-color:var(--theme-line);color:var(--theme-ink)}
:root[data-theme=dark] .secondary:hover,:root[data-theme=dark] .customer-row:hover{background:var(--theme-soft)}
:root[data-theme=dark] .primary{background:#2857ad;color:#fff}:root[data-theme=dark] .primary:hover{background:#3269cf}
:root[data-theme=dark] .customer-list-heading,:root[data-theme=dark] th{background:var(--theme-soft);color:var(--theme-muted);border-color:var(--theme-line)}
:root[data-theme=dark] .customer-row,:root[data-theme=dark] td,:root[data-theme=dark] .customer-avatar,:root[data-theme=dark] .customer-pagination,:root[data-theme=dark] .overview-stats .stat-card,:root[data-theme=dark] .school-switch,:root[data-theme=dark] .sidebar-bottom{border-color:var(--theme-line)}
:root[data-theme=dark] .badge.green{background:#18372c;color:#8cdbb1}:root[data-theme=dark] .badge.gray{background:#253044;color:#bcc7d7}:root[data-theme=dark] .badge.red,:root[data-theme=dark] .danger{background:#3d242a;color:#ffb2ad;border-color:#693841}:root[data-theme=dark] .badge.amber{background:#3b3120;color:#edce88}:root[data-theme=dark] .badge.blue{background:#203655;color:#a5ccff}
:root[data-theme=dark] .notice{background:#18372c;border-color:#2a5141;color:#a4dabc}:root[data-theme=dark] .notice.info{background:#20304a;border-color:#304a71;color:#b7d2f9}:root[data-theme=dark] .notice.error{background:#3d242a;border-color:#693841;color:#ffb2ad}
:root[data-theme=dark] .login-layout,:root[data-theme=dark] .login-form-wrap,:root[data-theme=dark] .center-page{background:var(--theme-bg)}
:root[data-theme=dark] .muted,:root[data-theme=dark] .login-form .muted,:root[data-theme=dark] .login-note{color:var(--theme-muted)}
:root[data-theme=dark] .login-mobile-brand{padding:12px;background:#fff}
:root[data-theme=dark] .powered-by-brand img,:root[data-theme=dark] .portal-brand img{background:#fff;padding:8px;border-radius:8px}
:root[data-theme=dark] .powered-by-brand span{color:var(--theme-muted)}
:root[data-theme=dark] .code-preview,:root[data-theme=dark] .wlan-option,:root[data-theme=dark] .batch-card,:root[data-theme=dark] .activity-row,:root[data-theme=dark] .voucher-ticket{background:var(--theme-soft);border-color:var(--theme-line);color:var(--theme-ink)}
:root[data-theme=dark] .ticket-brand-logo{background:#fff;border-radius:5px;padding:6px}
:root[data-theme=dark] .customer-actions .icon-btn{color:var(--theme-muted)}
:root[data-theme=dark] .theme-control{color:var(--theme-muted)}
:root[data-theme=dark] .portal-card button:not(.appearance-trigger):not(.appearance-option){background:color-mix(in srgb,var(--accent,#002071) 65%,#467bce);color:#fff}
}
@media print{:root{color-scheme:light}.theme-control{display:none!important}}
/* Official transparent Topackt logo. The mask retains the original contours. */
.topackt-brand{display:inline-flex;align-items:center;text-decoration:none;flex-shrink:0}.topackt-logo{display:block;width:120px;max-width:100%;aspect-ratio:1744/533;background:linear-gradient(to bottom,#002071 0 79%,#000 79% 100%);-webkit-mask:url('/static/topackt-logo.png') center/contain no-repeat;mask:url('/static/topackt-logo.png') center/contain no-repeat}
.story-footer .topackt-logo{background:#fff;width:145px}.story-footer{align-items:center}
.powered-by-brand .topackt-logo{width:120px}.powered-by-brand .provider-caption{font-size:9px;margin-top:7px}
:root[data-theme=dark] .topackt-logo{background:#e7edf7}
@media(prefers-color-scheme:dark){:root:not([data-theme]) .topackt-logo{background:#e7edf7}}
@media print{.topackt-logo{background:linear-gradient(to bottom,#002071 0 79%,#000 79% 100%)!important}}
@media screen{
:root[data-theme=dark] .radius-card,:root[data-theme=dark] .copy-field,:root[data-theme=dark] .mini-stats a,:root[data-theme=dark] input[readonly],:root[data-theme=dark] #create-vouchers .dialog-heading,:root[data-theme=dark] #create-vouchers .dialog-actions{background:var(--theme-surface);border-color:var(--theme-line);color:var(--theme-ink)}
:root[data-theme=dark] .wlan-option:has(input:checked){background:var(--theme-selected);border-color:var(--theme-focus)}
:root[data-theme=dark] .phone-frame iframe{background:var(--theme-bg)}
:root[data-theme=dark] .portal-card #portal-message{color:#efb59b}
}
/* Keep the preview label below content so it never covers a logo. */
body:has(.preview-ribbon){gap:12px}.preview-ribbon{position:static;justify-self:center;transform:none;margin:0;left:auto;bottom:auto}
@media screen{:root[data-theme=dark] .sidebar-bottom>a.selected{background:var(--theme-selected);color:var(--theme-accent)}}