/* The supplied TZhubs wordmark uses its natural, wide proportions everywhere. */
img[src^="/tzhubs-logo.svg"]{display:block;object-fit:contain;height:auto;max-width:100%;transform:none}
.auth.auth-platform .auth-story .login-brand{width:min(380px,100%);height:auto;min-height:0;max-width:100%;display:flex;align-items:center;justify-content:center;padding:18px 22px;background:#fff;border-radius:18px;overflow:visible;box-sizing:border-box;transform:none}
.auth.auth-platform .auth-story .login-brand img{display:block;width:100%;height:auto;max-width:100%;max-height:none;object-fit:contain;transform:none}
.dashboard-theme .sidebar .dashboard-brand.dashboard-identity{width:100%;height:auto;min-height:0;max-width:100%;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;padding:10px 8px;margin:0 0 18px;overflow:visible;background:#fff;box-sizing:border-box}
.dashboard-theme .sidebar .dashboard-brand.dashboard-identity img{display:block;width:100%;height:auto;min-width:0;max-width:190px;max-height:none;object-fit:contain;transform:none;flex:none}
.dashboard-theme .sidebar .dashboard-brand.dashboard-identity>div{width:100%;min-width:0;padding:0 4px;line-height:1.4}
.dashboard-theme .sidebar .dashboard-brand.dashboard-identity strong{display:none}
.dashboard-theme .sidebar .dashboard-brand.dashboard-identity small{display:block;color:#52647a!important;font-size:10px;font-weight:500;letter-spacing:0;line-height:1.5;overflow-wrap:anywhere}
.vpn-portal .vpn-public .brand img[src^="/tzhubs-logo.svg"]{width:180px;height:auto;max-width:46vw;transform:none}
.vpn-portal .vpn-public .brand>div strong{font-size:15px}
.dh-payment-summary img[src^="/tzhubs-logo.svg"]{width:160px;height:auto;max-width:42%;max-height:none;object-fit:contain}
body>header a img[src^="/tzhubs-logo.svg"]{width:180px;height:auto;max-width:42vw}
@media(min-width:901px){
 .shell.sidebar-collapsed .sidebar .dashboard-brand.dashboard-identity{width:100%;height:48px;min-height:48px;padding:6px!important;background:#fff url('/tzhubs-mark.svg?v=20261018-brand-clean') center/34px 34px no-repeat}
 .shell.sidebar-collapsed .sidebar .dashboard-brand.dashboard-identity img{width:34px;height:34px;min-width:0;visibility:hidden}
}
@media(max-width:900px){
 .dashboard-theme .sidebar .dashboard-brand.dashboard-identity{padding:8px 12px;margin-bottom:12px;gap:0}
 .dashboard-theme .sidebar .dashboard-brand.dashboard-identity img{width:180px;max-width:100%;height:auto}
 .dashboard-theme .sidebar .dashboard-brand.dashboard-identity>div{padding:0 4px}
}
@media(max-width:720px){
 .auth.auth-platform .auth-story .login-brand{width:min(280px,100%);padding:14px 18px;border-radius:14px}
 .vpn-portal .vpn-public .brand{gap:8px;flex-wrap:wrap}
 .vpn-portal .vpn-public .brand img[src^="/tzhubs-logo.svg"]{width:160px;max-width:48vw}
}

/* Transparent wordmarks adapt to the blue sign-in panels and navigation. */
.auth.auth-platform .auth-story .login-brand{background:transparent;border:0;border-radius:0;box-shadow:none;padding:0;width:min(360px,100%)}
.auth.auth-platform .auth-story .login-brand img,.dashboard-theme .sidebar .dashboard-brand.dashboard-identity img{content:url('/tzhubs-logo-light.svg?v=20261018-brand-clean');background:transparent!important;border:0;border-radius:0;padding:0;box-shadow:none}
.dashboard-theme .sidebar .dashboard-brand.dashboard-identity{background:transparent;border:0;border-radius:0;box-shadow:none;padding:8px 0 14px}
.dashboard-theme .sidebar .dashboard-brand.dashboard-identity small{color:#d5eaff!important}
@media(min-width:901px){.shell.sidebar-collapsed .sidebar .dashboard-brand.dashboard-identity{background-color:transparent;filter:brightness(0) invert(1)}}
@media(max-width:720px){.auth.auth-platform .auth-story .login-brand{width:min(290px,100%);padding:0;border-radius:0}}

/* TZhubs administration only. Customer portals and print output retain their themes. */
@media screen {
  body:not(.vpn-portal):not(.dh-portal):has(> #app > .shell.dashboard-theme) {
    --tz-dashboard-navy: #111b2d;
    --tz-dashboard-blue: #2358ed;
    --tz-dashboard-gold: #d7b460;
    --tz-dashboard-gold-light: #f5dfa5;
    --tz-dashboard-border: #dce4ef;
    --tz-dashboard-muted: #5d6c82;
  }

  body:not(.vpn-portal):not(.dh-portal) .shell.dashboard-theme {
    --ui-accent: #2358ed;
    --ui-accent-soft: #eef2ff;
    --ui-border: #dce4ef;
    --ui-shadow: 0 8px 24px #111b2d08;
  }

  body:not(.vpn-portal):not(.dh-portal) .shell.dashboard-theme .sidebar {
    background-image: linear-gradient(165deg, #111b2d20, transparent 65%);
  }

  body:not(.vpn-portal):not(.dh-portal) .shell.dashboard-theme .sidebar .nav-item.selected,
  body:not(.vpn-portal):not(.dh-portal) .shell.dashboard-theme .sidebar .nav-item[aria-current="page"] {
    box-shadow: inset 3px 0 var(--tz-dashboard-gold);
    background-color: color-mix(in srgb, var(--owner-nav-text, #fff) 13%, transparent);
  }

  body:not(.vpn-portal):not(.dh-portal) .shell.dashboard-theme .sidebar .workspace {
    border-color: color-mix(in srgb, var(--tz-dashboard-gold) 40%, transparent);
  }

  body:not(.vpn-portal):not(.dh-portal) .shell.dashboard-theme .topbar {
    border-bottom-color: var(--tz-dashboard-border);
    box-shadow: 0 1px 0 #d7b46025;
  }

  body:not(.vpn-portal):not(.dh-portal) .shell.dashboard-theme :is(.panel, .stats article, .router-card, .addon-card) {
    border-color: var(--tz-dashboard-border);
    box-shadow: 0 5px 20px #111b2d05;
  }

  body:not(.vpn-portal):not(.dh-portal) .shell.dashboard-theme .stats article {
    border-top-color: var(--tz-dashboard-gold);
  }

  body:not(.vpn-portal):not(.dh-portal) .shell.dashboard-theme :is(.panel-heading h2, .stats article > strong, .card-top h2) {
    color: var(--tz-dashboard-navy);
  }

  body:not(.vpn-portal):not(.dh-portal) .shell.dashboard-theme :is(.muted, .hint, .panel-heading p) {
    color: var(--tz-dashboard-muted);
  }

  body:not(.vpn-portal):not(.dh-portal) .shell.dashboard-theme th {
    color: #33445e;
    background-color: #f3f6fb;
    border-bottom-color: var(--tz-dashboard-border);
  }

  body:not(.vpn-portal):not(.dh-portal) .shell.dashboard-theme .section-nav button[aria-current="page"],
  body:not(.vpn-portal):not(.dh-portal) .shell.dashboard-theme .settings-tabs button.selected {
    background: var(--tz-dashboard-navy);
    color: #fff;
    box-shadow: inset 0 -2px var(--tz-dashboard-gold);
  }

  body:not(.vpn-portal):not(.dh-portal) .shell.dashboard-theme .primary:not(.danger):not(.danger-button),
  body:not(.vpn-portal):not(.dh-portal):has(> #app > .shell.dashboard-theme) #modal .primary:not(.danger):not(.danger-button) {
    background: linear-gradient(135deg, var(--tz-dashboard-gold-light), var(--tz-dashboard-gold));
    color: var(--tz-dashboard-navy);
    border-color: #b18b37;
    box-shadow: inset 0 1px 0 #fff7d9, 0 3px 9px #8a68151c;
    text-shadow: none;
  }

  body:not(.vpn-portal):not(.dh-portal) .shell.dashboard-theme .primary:not(.danger):not(.danger-button):hover:not(:disabled),
  body:not(.vpn-portal):not(.dh-portal):has(> #app > .shell.dashboard-theme) #modal .primary:not(.danger):not(.danger-button):hover:not(:disabled) {
    background: linear-gradient(135deg, #fae9bd, #e2c273);
    color: var(--tz-dashboard-navy);
    filter: none;
  }

  body:not(.vpn-portal):not(.dh-portal) .shell.dashboard-theme .secondary:not(.danger):not(.danger-button) {
    color: #233d61;
    background-color: #f6f8fc;
    border-color: var(--tz-dashboard-border);
  }

  body:not(.vpn-portal):not(.dh-portal) .shell.dashboard-theme .secondary:not(.danger):not(.danger-button):hover:not(:disabled) {
    background-color: #fbf5e7;
    border-color: #d7bd7c;
  }

  body:not(.vpn-portal):not(.dh-portal) .shell.dashboard-theme :is(input, select, textarea):focus {
    outline-color: var(--tz-dashboard-blue);
    border-color: var(--tz-dashboard-blue);
  }

  body:not(.vpn-portal):not(.dh-portal) .shell.dashboard-theme :is(button, a):focus-visible,
  body:not(.vpn-portal):not(.dh-portal):has(> #app > .shell.dashboard-theme) #modal :is(button, a):focus-visible {
    outline-color: var(--tz-dashboard-blue);
  }

  body:not(.vpn-portal):not(.dh-portal) .shell.dashboard-theme input:is([type="checkbox"], [type="radio"]) {
    accent-color: var(--tz-dashboard-blue);
  }
}