/* Kombine portal theme: Final presentation pp. 190, 194;
   P1 Final Reveal pp. 53, 75. Team and Portal retain this theme;
   external white labels load their own tenant stylesheet instead.
   Keep separate from documentation branding while evaluating this design. */
:root, :root[data-theme="dark"] {
    --brand-font-body: "ABC Monument Grotesk", system-ui, sans-serif;
    --brand-font-heading: var(--brand-font-body);
    --brand-background: #f0e9df;
    --brand-surface: #fff;
    --brand-text: #242528;
    --brand-primary: #4765ee;
    --brand-primary-hover: #354fc9;
    --brand-primary-text: #fff;
    --brand-accent: #354fc9;
    --brand-focus: #4765ee;
    --brand-sidebar: transparent;
    --brand-sidebar-text: #34363e;
    --brand-sidebar-active: #ffffffb8;
    --brand-sidebar-active-text: #242528;
    --brand-sidebar-icon-color: black;
    --brand-sidebar-favicon-invert: 0;
    --brand-sidebar-favicon-blend: multiply;
    --map-land: #5b7222;
    --map-land-label: #ffffff;
    --map-water: #ffffff;
    --map-road: #899b60;
    --map-highway: #b0c18a;
    --map-label: #596579;
    --map-border: #b7c2d3;
    --hub-marker-radius: 20px;
    --hub-marker-padding: 14px;
    --hub-muted: #626570;
    --hub-line: #d5d6df;
    --hub-control-border: #767986;
    --hub-soft: #f3f3f8;
    --hub-glass: #ffffff80;
    --hub-gradient: radial-gradient(ellipse at 85% 0%, #c1d4f778, transparent 65%),
        radial-gradient(ellipse at 0% 25%, #cfc3f54d, transparent 55%),
        linear-gradient(135deg, #f0e9df, #e5eaf0);
    --border-color: var(--hub-line);
    --accent-color: var(--brand-accent);
    --tone-17343d: var(--brand-text);
    --tone-182b34: var(--brand-text);
    --tone-234951: var(--brand-text);
    --tone-285c65: var(--brand-accent);
    --tone-39786c: var(--hub-muted);
    --tone-526b78: var(--hub-muted);
    --tone-536b75: var(--hub-muted);
    --tone-587079: var(--hub-muted);
    --tone-5d7079: var(--hub-muted);
    --tone-647680: var(--hub-muted);
    --tone-68858b: var(--hub-muted);
    --tone-6f8088: var(--hub-muted);
    --tone-839399: var(--hub-muted);
    --tone-b7c7cc: #a4a7b3;
    --tone-b8c9cf: #a4a7b3;
    --tone-cedadc: var(--hub-line);
    --tone-d5e0e4: var(--hub-line);
    --tone-dfe7ea: var(--hub-line);
    --tone-e9eef0: #ececf1;
    --tone-edf1f3: var(--hub-soft);
    --tone-edf2f2: var(--hub-soft);
    --tone-edf4f3: var(--hub-soft);
    --tone-f1f5f6: var(--hub-soft);
    --tone-f2f8f6: var(--hub-soft);
    --tone-fafcfc: #fafafe;
    --tone-e6f0ed: #e7ebff;
    --tone-183e34: #354fc9;
    --tone-f5f7f8: var(--brand-background);
    --surface: var(--brand-surface);
    --accent: var(--brand-accent);
}
:root[data-theme="dark"] {
    --brand-background: #17191f;
    --brand-surface: #252832;
    --brand-text: #f1f1f5;
    --brand-primary: #c1d4f7;
    --brand-primary-hover: #d5e2fc;
    --brand-primary-text: #202b50;
    --brand-accent: #c1d4f7;
    --brand-focus: #c1d4f7;
    --brand-sidebar-text: #e3e5ee;
    --brand-sidebar-active: #ffffff14;
    --brand-sidebar-active-text: #fff;
    --brand-sidebar-icon-color: white;
    --brand-sidebar-favicon-invert: 1;
    --brand-sidebar-favicon-blend: screen;
    --map-land: #292e3a;
    --map-land-label: #b9c5d8;
    --map-water: #1c2230;
    --map-road: #3b4558;
    --map-highway: #52617a;
    --map-label: #b9c5d8;
    --map-border: #536078;
    --hub-muted: #b5b8c6;
    --hub-line: #414553;
    --hub-control-border: #959bad;
    --hub-soft: #303441;
    --hub-glass: #252832d9;
    --hub-gradient: radial-gradient(ellipse at 85% 0%, #4765ee18, transparent 65%),
        radial-gradient(ellipse at 0% 25%, #7955f112, transparent 55%),
        linear-gradient(135deg, #1e2028, #17191f);
    --tone-b7c7cc: #72798c;
    --tone-b8c9cf: #72798c;
    --tone-e9eef0: #343845;
    --tone-fafcfc: #292d38;
    --tone-e6f0ed: #323d60;
    --tone-183e34: #c1d4f7;
}
/* Team and Portal map: Bright blue from Final presentation p. 42. */
:root:is([data-tenant="166"], [data-tenant="666"]):not([data-theme="dark"]) {
    --map-land: #4765ee;
}
body { background: var(--hub-gradient) fixed; }
/* Team's shared page background; Portal overview/anonymous background and overview cards:
   Final presentation pp. 37–38 (frosted glass),
   P1 Final Reveal p. 73 (soft square silhouette). */
:root:is([data-tenant="166"], [data-tenant="666"]):has([data-home-overview]) {
    --overview-glass: #ffffffa8;
    --overview-glass-border: #ffffffd9;
}
:root[data-tenant="166"] body,
:root[data-tenant="166"] #portal-splash,
:root:is([data-tenant="166"], [data-tenant="666"]) body:has([data-home-overview], [data-anonymous-workspace]),
:root:is([data-tenant="166"], [data-tenant="666"])[data-anonymous="true"] #portal-splash {
    background: #b8cde7;
    isolation: isolate;
}
:root[data-tenant="166"] body::before,
:root[data-tenant="166"] #portal-splash::before,
:root:is([data-tenant="166"], [data-tenant="666"]) body:has([data-home-overview], [data-anonymous-workspace])::before,
:root:is([data-tenant="166"], [data-tenant="666"])[data-anonymous="true"] #portal-splash::before {
    content: "";
    position: fixed;
    inset: -12px;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(#ffffff30, #ffffff30),
        url('/images/tenants/team-overview-fabric.png') center / cover no-repeat;
    filter: blur(6px);
}
:root[data-tenant="166"][data-theme="dark"] body::before,
:root[data-tenant="166"][data-theme="dark"] #portal-splash::before,
:root:is([data-tenant="166"], [data-tenant="666"])[data-theme="dark"] body:has([data-home-overview], [data-anonymous-workspace])::before,
:root:is([data-tenant="166"], [data-tenant="666"])[data-theme="dark"][data-anonymous="true"] #portal-splash::before {
    background-image: linear-gradient(#111c38b8, #111c38b8),
        url('/images/tenants/team-overview-fabric.png');
}
:root:is([data-tenant="166"], [data-tenant="666"])[data-theme="dark"]:has([data-home-overview]) {
    --overview-glass: #202b40cc;
    --overview-glass-border: #ffffff52;
}
:root:is([data-tenant="166"], [data-tenant="666"]) [data-home-overview] {
    gap: 24px;
    max-width: none;
    align-items: start;
}
:root:is([data-tenant="166"], [data-tenant="666"]) [data-home-overview] > section {
    container-type: inline-size;
    box-sizing: border-box;
    aspect-ratio: 1;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 1px solid var(--overview-glass-border);
    border-radius: 24px;
    background: var(--overview-glass);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    box-shadow: 0 12px 36px #344d7012, inset 0 1px 0 #ffffff50;
}
:root:is([data-tenant="166"], [data-tenant="666"]) [data-home-overview] :is(.active-users-count, .purchases-count) {
    margin: 12px 0;
    font-size: clamp(32px, 24cqw, 80px);
    font-weight: 400;
    letter-spacing: -.04em;
    color: var(--brand-text);
}
@container home-widget-grid (min-width: 620px) {
    :root .shell [data-home-overview] > section[data-widget-width="2"] { aspect-ratio: 2; align-self: start; }
}
@container (max-width: 200px) {
    :root:is([data-tenant="166"], [data-tenant="666"]) [data-home-overview] h2 { font-size: 15px; }
    :root:is([data-tenant="166"], [data-tenant="666"]) [data-home-overview] p { font-size: 12px; }
    :root:is([data-tenant="166"], [data-tenant="666"]) [data-home-overview] :is(.purchases-map-link, .overview-unit-link) { width: 28px; height: 28px; bottom: 6px; inset-inline-end: 6px; }
    :root:is([data-tenant="166"], [data-tenant="666"]) [data-home-overview] :is(.purchases-map-link, .overview-unit-link) img { width: 24px; height: 24px; }
}
:root:is([data-tenant="166"], [data-tenant="666"]) [data-home-overview] :is(.purchases-map-link, .overview-unit-link) {
    position: absolute;
    top: auto;
    bottom: 12px;
    inset-inline-end: 12px;
    transform: none;
    width: 48px;
    height: 48px;
    margin: 0;
}
:root:is([data-tenant="166"], [data-tenant="666"]) [data-home-overview] > :is(.running-machines-card, .active-users-card, .purchases-card, .reservations-card) {
    align-items: stretch;
    text-align: start;
}
:root:is([data-tenant="166"], [data-tenant="666"]) [data-home-overview] > :is(.active-users-card, .purchases-card) {
    justify-content: flex-start;
}
:root:is([data-tenant="166"], [data-tenant="666"]) [data-home-overview] :is(.active-users-card, .purchases-card) h2 {
    font-size: clamp(14px, 6cqw, 22px);
    font-weight: 400;
}
:root:is([data-tenant="166"], [data-tenant="666"]) [data-home-overview] :is(.active-users-value, .purchases-value) {
    margin-top: auto;
}
:root:is([data-tenant="166"], [data-tenant="666"]) [data-home-overview] :is(.active-users-count, .purchases-count) {
    margin: 0;
    font-size: clamp(42px, 28cqw, 90px);
    letter-spacing: -.05em;
    line-height: 1;
}
:root:is([data-tenant="166"], [data-tenant="666"]) [data-home-overview] :is(.purchases-map-link, .overview-unit-link) img {
    width: 36px;
    height: 36px;
}
/* Only the g artwork uses a shadow; line and inline icons stay flat. */
:root {
    --portal-icon-shadow: drop-shadow(0 1px 1.5px #2e2d2b66);
}
img[src^="/api/v1/icon/g/"] {
    filter: var(--portal-icon-shadow);
}
html {
    scroll-padding-top: 8px;
    overflow-y: scroll;
    scrollbar-gutter: stable;
}
.shell main :is(h1, [id]) { scroll-margin-top: 8px; }
.shell { background: transparent; }
.shell .sidebar { background: transparent; padding: 24px 18px; }
.sidebar .brand {
    padding: 16px 22px;
    margin-bottom: 24px;
    min-height: 72px;
    border: 0;
    background: transparent;
}
/* Logos sit directly on the workspace; keep dark-mode silhouettes legible. */
.sidebar .brand-logo { max-height: 36px; }
:root[data-theme="dark"] .sidebar .brand-logo-dark { filter: brightness(0) invert(1); }
.sidebar .sidebar-footer { color: var(--hub-muted); }
.sidebar .development-data-warning { color: var(--brand-sidebar-text); animation: none; }
.sidebar .nav-heading { color: var(--hub-muted); letter-spacing: .04em; }
.sidebar .bank-tree, .sidebar .bank-tabs, .sidebar .workspace-locations { border-color: var(--hub-line); }
.sidebar .tab-id { color: var(--hub-muted); }
.sidebar nav :is(.workspace-link :is(a, .workspace-action), .bank-tabs a, .workspace-locations a, summary, .workspace-shortcut) {
    border-radius: var(--hub-marker-radius);
}
.sidebar nav [data-bank-branch] > details > summary { margin-bottom: 4px; }
.sidebar nav .workspace-link + .workspace-link,
.sidebar nav :is(.bank-tabs, .workspace-locations, .workspace-residents, .workspace-units,
    .workspace-unit-groups, .tenant-tabs) > li + li {
    margin-top: 4px;
}
.sidebar nav :is(.workspace-locations, .workspace-residents, .workspace-units, .workspace-unit-groups):not([hidden]) { padding-top: 4px; }
.sidebar nav .workspace-locations:not([hidden]) + .bank-tabs { padding-top: 4px; }
.sidebar nav :is(.workspace-link :is(a, .workspace-action), .bank-tabs a, .workspace-locations a, .manager-workspace-branch > summary) {
    min-height: 32px;
    padding-block: 6px;
    padding-inline-start: var(--hub-marker-padding);
    padding-inline-end: var(--hub-marker-padding);
    align-items: center;
}
/* One translucent marker per shortcut, including its separate close control. */
.sidebar nav .workspace-shortcut > a { padding-inline-end: 34px; }
:root .sidebar nav .workspace-shortcut > a:is(.active, :hover, :focus-visible) { background: transparent; }
.sidebar nav .workspace-shortcut > button { border-radius: 50%; }
.sidebar .workspace-link a.active { box-shadow: none; }
@media (max-width: 820px), (pointer: coarse) {
    .sidebar nav :is(.workspace-link :is(a, .workspace-action), .bank-tabs a, .workspace-locations a, .manager-workspace-branch > summary) { min-height: 44px; }
}
@media (pointer: coarse) {
    .sidebar nav .workspace-shortcut > a { padding-inline-end: 44px; }
}
.shell .topbar {
    position: relative;
    top: auto;
    min-height: 68px;
    /* Balance the breadcrumb marker's 2px upward offset. */
    padding: 16px 28px 12px;
    background: transparent;
    border-bottom: 0;
}
.topbar .copy-link-icon, .topbar .theme-toggle { border-radius: 50%; }
.topbar :is(.copy-link-icon, .theme-toggle, .logout-form .button, .login-link) { transform: translateY(-2px); }
/* Keep the raised marker inside the horizontal scroll container. */
.breadcrumbs { padding-block: 2px; }
.breadcrumbs a {
    position: relative;
    isolation: isolate;
    padding: 6px var(--hub-marker-padding);
    border-radius: var(--hub-marker-radius);
    text-decoration: none;
}
.breadcrumbs a:is(:hover, :focus-visible) {
    color: var(--brand-sidebar-active-text);
    background: transparent;
    text-decoration: none;
}
.breadcrumbs a:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
.breadcrumbs .breadcrumb-current {
    position: relative;
    isolation: isolate;
    padding: 6px var(--hub-marker-padding);
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: var(--hub-marker-radius);
    background: transparent;
    color: var(--brand-text);
}
.breadcrumbs a:is(:hover, :focus-visible)::before,
.breadcrumbs .breadcrumb-current::before {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateY(-2px);
    border-radius: inherit;
    background: var(--brand-sidebar-active);
    z-index: -1;
    pointer-events: none;
}
.shell main { padding: 0 28px 28px; }
.shell .page-heading { margin-bottom: 24px; }
.shell h1 { font-weight: 500; letter-spacing: -.035em; }
.shell :is(h2, h3) { font-weight: 500; }
.shell .button { border-radius: 20px; }
.shell .button:not(.copy-link-icon) { padding-inline: 14px; }
.shell :is(.login-card, .active-users-card, .purchases-card, .portal-list-card,
    .layer-card, .status-panel, .tab-placeholder, .unit-card, .location-card,
    .opening-hours, .booking-rules, .address-card) {
    border-radius: 22px;
    border-color: var(--tone-e9eef0);
    background: var(--surface);
    box-shadow: 0 4px 20px #15182c04;
}
.shell .login-card { padding: 32px; }
.shell .public-statistics { gap: 20px; }
.shell [data-public-widgets] { --widget-gap:20px; --widget-summary-radius:22px; --widget-summary-border:var(--tone-e9eef0); }
.shell :is(.active-users-card, .purchases-card) { max-width: none; }
.shell .active-users-count, .shell .purchases-count { font-size: 44px; font-weight: 400; }
.shell .portal-list-toolbar { padding: 14px 16px; background: var(--hub-soft); }
.shell .portal-list-toolbar :is(input, select, button) { border-radius: 12px; }
.shell .portal-list-table :where(th, td) { padding-block: 12px; border-bottom-color: var(--tone-e9eef0); }
.shell .portal-list-table th { font-weight: 500; }
.shell .portal-list-table tbody tr:hover { background: var(--hub-soft); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--brand-accent); }
/* Input boundaries need stronger contrast than decorative card dividers. */
.shell :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]), textarea, select):not(:disabled):not([aria-invalid="true"]) {
    border-color: var(--hub-control-border);
}
@media (max-width: 820px) {
    .shell .sidebar { padding: 12px; }
    .sidebar .brand { width: 180px; min-height: 56px; margin-bottom: 0; padding: 12px 18px; }
    .sidebar .brand-logo { max-height: 30px; }
    .shell .topbar { padding: 12px 14px 8px; }
    .shell main { padding: 0 14px 20px; }
    .shell .login-card { padding: 24px 18px; }
}

:root:is([data-tenant="166"], [data-tenant="666"]) [data-home-overview] .purchases-value { padding-inline-end: 40px; }

/* Team typography remains part of its white label; content is shared. */
:root:is([data-tenant="166"], [data-tenant="666"]) [data-home-overview] :is(.running-machines-card, .reservations-card) h2 { font-size: clamp(14px, 6cqw, 22px); font-weight: 400; }
:root:is([data-tenant="166"], [data-tenant="666"]) [data-home-overview] :is(.running-machines-value, .reservations-value) { margin-top: auto; }
:root:is([data-tenant="166"], [data-tenant="666"]) [data-home-overview] :is(.running-machines-value, .reservations-value) strong { font-size: clamp(42px, 28cqw, 90px); font-weight: 400; letter-spacing: -.05em; line-height: 1; color: var(--brand-text); }