/* Generated by bin/sbwz-core assets:build from resources/assets-src/. Do not edit. */
/* 00-base: reset, element defaults, focus ring. Breakpoints and the touch rules: 20-layout; see resources/assets-src/README.md. */

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
}

body, h1, h2, h3, h4, h5, h6, p, figure {
  margin: 0;
}

img {
  max-width: 100%;
  height: auto;
}

button, input, select, textarea {
  font: inherit;
}

a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--accent-hover);
}

:focus-visible {
  outline: 2px solid var(--input-focus);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
    scroll-behavior: auto;
  }
}
/* 10-typography: headings are larger and bolder than body text; links look like links (SPEC §6.3). */

h1 {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 16px;
}

h2 {
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 12px;
}

h3 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 8px;
}

h4, h5, h6 {
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 8px;
}

p, li {
  text-wrap: pretty;
}
/* 20-layout: container, grids, touch targets. Breakpoints: 480 (phone), 768 (small tablet), 1024 (tablet); see README. */

.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right));
}

.grid-2, .grid-3, .grid-4 {
  display: grid;
  gap: var(--sp-4);
}

.grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 768px) {
  .grid-3, .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .grid-2, .grid-3, .grid-4 {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (pointer: coarse), (max-width: 768px) {
  .btn, .input, .select, .tab, .nav-link, .nav-toggle, .hint-btn, .lang-switch a, .user-menu summary,
  .dropdown-item, .pager a, th.sortable, .check, .modal-head [data-action=close-modal] {
    min-height: 44px;
  }

  .btn-icon, .nav-toggle, .hint-btn, .modal-head [data-action=close-modal] {
    min-width: 44px;
  }

  input, select, textarea {
    font-size: 16px;
  }
}

#main {
  padding-top: 16px;
}

.site-footer {
  margin-top: 48px;
  padding-block: 24px;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 13px;
}

.site-footer p {
  margin: 0;
}
/* 30-nav: top bar, collapsing menu (≤768 px, needs core.js), language switch, user menu and dropdown (SPEC §6.5). */

.nav-top {
  position: sticky;
  top: 0;
  z-index: 100;
  height: auto;
  padding: 0;
  display: block;
  background: var(--nav-bg);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right));
}

.nav-logo {
  flex: 0 1 auto;
  min-width: 0;
  margin-right: 0;
}

.nav-logo img {
  flex-shrink: 0;
}

.nav-logo span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.nav-links {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  height: 56px;
  margin-left: 12px;
  overflow-x: auto;
  scrollbar-width: none;
}

.nav-links::-webkit-scrollbar {
  display: none;
}

.nav-actions {
  margin-left: 0;
  flex-shrink: 0;
}

.nav-link.nav-login {
  height: auto;
  margin-left: 8px;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: var(--radius-md);
  color: var(--text-inverse);
}

.nav-link.nav-login:hover {
  color: var(--text-inverse);
  border-color: rgba(255, 255, 255, .5);
}

.nav-login-menu {
  display: none;
}

.nav-toggle {
  display: none;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-inverse);
  cursor: pointer;
}

.nav-toggle[aria-expanded="true"] {
  background: rgba(255, 255, 255, .08);
}

.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
}

.nav-toggle-bars {
  position: relative;
}

.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-toggle-bars::before {
  top: -6px;
}

.nav-toggle-bars::after {
  top: 6px;
}

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.lang-switch a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--navy-200);
  text-decoration: none;
}

.lang-switch a:hover {
  color: var(--text-inverse);
}

.lang-switch a[aria-current="true"] {
  color: var(--text-inverse);
  background: rgba(255, 255, 255, .12);
}

.user-menu {
  position: relative;
}

.user-menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 4px 4px;
  border-radius: var(--radius-full);
  color: var(--text-inverse);
  cursor: pointer;
  list-style: none;
}

.user-menu-toggle::-webkit-details-marker {
  display: none;
}

.user-menu-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--accent);
  color: var(--text-on-accent);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  flex-shrink: 0;
}

.user-menu-email {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 500;
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 110;
  min-width: 220px;
  max-width: calc(100vw - 32px);
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.dropdown-head {
  margin-bottom: 4px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text-subtle);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.dropdown-item {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.dropdown-item:hover {
  background: var(--surface-2);
  color: var(--text);
}

.dropdown-form {
  margin: 0;
}

.nav-top :focus-visible {
  outline-color: var(--text-inverse);
}

@media (max-width: 768px) {
  .nav-login {
    display: none;
  }

  .nav-login-menu {
    display: flex;
  }
}

@media (max-width: 768px) {
  .js .nav-toggle {
    display: inline-flex;
  }

  .js .nav-links {
    display: none;
  }

  .js .nav-top.is-open .nav-links {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    height: auto;
    max-height: calc(100vh - 56px);
    margin-left: 0;
    padding: 8px max(16px, env(safe-area-inset-left)) 12px;
    overflow-y: auto;
    background: var(--nav-bg);
    border-top: 1px solid rgba(255, 255, 255, .06);
    box-shadow: var(--shadow-md);
  }

  .js .nav-top.is-open .nav-link {
    height: 44px;
    padding: 0 12px;
    border-bottom: 0;
    border-left: 2.5px solid transparent;
  }

  .js .nav-top.is-open .nav-link.active {
    border-left-color: var(--accent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-link,
  .nav-toggle,
  .lang-switch a,
  .user-menu-toggle,
  .dropdown-item {
    transition: none;
  }
}
/* 40-frame-tabs: the shared page frame (SPEC §6.6). One width, a banner slot, a heading row, a tab bar and a toolbar of fixed
   minimum heights, so switching tabs never moves the screen. Tabs never wrap; on a narrow screen they scroll sideways and
   core.js brings the active one into view. */

.frame {
  max-width: 1200px;
  margin: 24px auto;
  padding-inline: 16px;
}

.frame-narrow {
  max-width: 720px;
}

.frame-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
  padding: 12px 16px;
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-md);
  background: var(--color-warning-soft);
  color: var(--text);
}

.frame-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 48px;
  margin-bottom: var(--sp-2);
}

.frame-head h1 {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.frame-actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
}

.frame-tabs {
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
  scrollbar-width: thin;
}

.tab {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  margin-bottom: -1px;
  padding: 8px 16px;
  border-bottom: 2.5px solid transparent;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.tab:hover {
  color: var(--text);
}

.tab.active,
.tab[aria-current="page"] {
  border-bottom-color: var(--accent);
  color: var(--text);
  font-weight: 700;
}

.frame-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  min-height: 72px;
  padding-block: var(--sp-3);
}

.frame-toolbar form {
  margin: 0;
}
/* 45-auth: the SBwZ split-screen shell of the auth pages (login, forgot password, set password, 2FA step). core::layout
   renders it instead of the header and the footer when a page sets $auth (partials/_auth_shell.php): blue half with the
   app name, white half with the language switch and the copyright, the card centred on the split line. On phones the blue
   panel is a band on top, the card overlaps its lower edge and the footer follows the card. */

.auth-page {
  background: var(--surface);
}

.auth-viewport {
  position: relative;
  display: flex;
  min-height: 100vh;
}

.auth-panel {
  position: relative;
  overflow: hidden;
  flex: 0 0 50%;
  background: var(--navy-500);
  color: var(--text-inverse);
}

.auth-panel::before {
  content: "";
  position: absolute;
  inset: 20%;
  background: url(img/sbwz-silhouette.png) center / contain no-repeat;
  opacity: .08;
}

.auth-brand {
  position: absolute;
  top: 50%;
  left: 6%;
  z-index: 1;
  max-width: calc(50vw - 190px - 6vw - 24px);
  transform: translateY(-50%);
}

.auth-brand-name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: .01em;
}

.auth-brand-title {
  display: block;
  font-size: 44px;
}

.auth-brand-sub {
  display: block;
  margin-top: 8px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .92;
}

.auth-support {
  margin: 0;
  font-size: 12px;
}

.auth-support-wide {
  position: absolute;
  left: 16px;
  bottom: 14px;
  z-index: 1;
  opacity: .9;
}

.auth-support-narrow {
  display: none;
}

.auth-panel .auth-link {
  color: inherit;
  text-decoration: none;
}

.auth-aside {
  position: relative;
  flex: 0 0 50%;
  background: var(--surface);
}

.auth-lang {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  gap: 12px;
  font-size: 13px;
  font-weight: 600;
}

.auth-lang-link {
  color: var(--text-muted);
  text-decoration: none;
}

.auth-lang-link:hover {
  text-decoration: underline;
}

.auth-lang-link[aria-current="true"] {
  color: var(--navy-500);
}

.auth-copy {
  position: absolute;
  right: 16px;
  bottom: 14px;
  margin: 0;
  font-size: 12px;
  color: var(--text-subtle);
}

.auth-main {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 380px;
  max-width: calc(100% - 32px);
}

#main.auth-main {
  padding: 0;
}

.auth-card {
  position: relative;
  padding: 64px 32px 36px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.auth-form {
  min-width: 0;
}

.auth-badge {
  position: absolute;
  top: -34px;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  transform: translateX(-50%);
  border-radius: var(--radius-full);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}

.auth-badge-img {
  width: 74px;
  height: 74px;
  border-radius: var(--radius-full);
}

.auth-title {
  margin: 0 0 6px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--neu-700);
}

.auth-subtitle {
  margin: 0 0 28px;
  text-align: center;
  font-size: 14px;
  color: var(--text-muted);
}

.auth-intro:not(:empty) {
  margin-bottom: var(--sp-6);
}

.auth-message {
  margin: 0 0 16px;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
}

.auth-message-ok {
  color: var(--color-success);
}

.auth-message-error {
  color: var(--accent);
}

.auth-field {
  margin-bottom: 18px;
}

.auth-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-2);
  margin-bottom: 6px;
}

.auth-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--neu-600);
}

.auth-link {
  font-size: 13px;
  color: var(--navy-500);
  text-decoration: none;
}

.auth-link:hover {
  text-decoration: underline;
}

.auth-input {
  display: block;
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--input-border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
}

.auth-input:focus {
  outline: none;
  border-color: var(--input-focus);
  box-shadow: 0 0 0 3px var(--input-focus-ring);
}

.auth-hint {
  margin: -8px 0 18px;
  font-size: 12px;
  color: var(--text-muted);
}

.auth-submit {
  display: block;
  width: 100%;
  height: 42px;
  margin-top: 12px;
  padding: 0 var(--sp-4);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--accent);
  color: var(--text-on-accent);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 42px;
  letter-spacing: .04em;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

.auth-submit:hover {
  background: var(--accent-hover);
}

.auth-links {
  margin: 16px 0 0;
  text-align: center;
  font-size: 13px;
}

@media (max-width: 900px) {
  .auth-viewport {
    flex-direction: column;
  }

  .auth-panel {
    flex: 0 0 220px;
  }

  .auth-brand {
    top: 28px;
    left: 20px;
    right: 20px;
    max-width: none;
    transform: none;
  }

  .auth-brand-title {
    font-size: 22px;
  }

  .auth-brand-sub {
    font-size: 11px;
  }

  .auth-support-wide {
    display: none;
  }

  .auth-support-narrow {
    display: block;
    margin-top: 8px;
    text-align: center;
    color: var(--text-muted);
  }

  .auth-main {
    order: 1;
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    max-width: none;
    margin: 50px 16px 0;
    transform: none;
  }

  .auth-card {
    max-width: 380px;
    margin: 0 auto;
  }

  .auth-aside {
    order: 2;
    flex: 1 0 auto;
    padding: 16px 16px 24px;
  }

  .auth-lang {
    position: static;
    justify-content: center;
    margin-bottom: 8px;
  }

  .auth-copy {
    position: static;
    text-align: center;
  }
}
/* 50-forms-buttons: button and form helpers on top of the tokens (.btn, .input, .form-group are in sbwz-tokens.css).
   Touch sizes (44 px) come from 20-layout; form inputs take 16 px font on touch screens there too (SPEC §6.4, §6.5). */

.btn-block {
  display: flex;
  width: 100%;
}

.form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-4);
}

@media (min-width: 768px) {
  .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.form-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--sp-4);
}

.form-row > .form-group {
  flex: 1 1 200px;
  min-width: 0;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}

.form-group .input[aria-invalid="true"] {
  border-color: var(--accent);
}

.form-group .input[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}

.check {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--text);
  font-size: 14px;
  cursor: pointer;
}

.check input {
  width: 18px;
  height: 18px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--navy-600);
}
/* 55-select-dropdown: select and menu panels in one style (floating card, inset rounded options, tinted selected row with a
   check mark on the right). Native <select> keeps its behaviour, form value and keyboard handling; browsers with
   customizable selects (appearance: base-select) get the styled panel, others keep their own picker. The same look is
   used for .dropdown-menu in 30-nav (SPEC §6.5). */

@supports (appearance: base-select) {
  select.input,
  select.select,
  select.input::picker(select),
  select.select::picker(select) {
    appearance: base-select;
  }

  select.input,
  select.select {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    cursor: pointer;
  }

  select.input:open,
  select.select:open {
    border-color: var(--input-focus);
    box-shadow: 0 0 0 3px var(--input-focus-ring);
  }

  select.input::picker-icon,
  select.select::picker-icon {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    margin-right: 3px;
    border-right: 2px solid var(--text-muted);
    border-bottom: 2px solid var(--text-muted);
    rotate: 45deg;
    translate: 0 -2px;
    transition: rotate 0.15s, translate 0.15s;
  }

  select.input:open::picker-icon,
  select.select:open::picker-icon {
    rotate: 225deg;
    translate: 0 2px;
  }

  select.input::picker(select),
  select.select::picker(select) {
    box-sizing: border-box;
    min-width: anchor-size(width);
    max-height: min(320px, 50vh);
    margin: 0;
    padding: 6px;
    top: calc(anchor(bottom) + 4px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
  }

  select.input option,
  select.select option {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 10px 12px;
    border-radius: var(--radius-md);
    color: var(--text);
    font-size: 14px;
    cursor: pointer;
  }

  select.input option:hover,
  select.input option:focus-visible,
  select.select option:hover,
  select.select option:focus-visible {
    background: var(--surface-2);
    outline: none;
  }

  select.input option:checked,
  select.select option:checked {
    background: color-mix(in srgb, var(--input-focus) 10%, var(--surface));
    color: var(--input-focus);
    font-weight: 600;
  }

  select.input option::checkmark,
  select.select option::checkmark {
    order: 1;
    margin-left: auto;
  }

  select.input option:disabled,
  select.select option:disabled {
    color: var(--text-subtle);
    cursor: not-allowed;
  }
}
/* 56-large-text: the "Larger text" switch in the header (core.js sets .font-large on <html> and remembers it in
   localStorage). Raises the base text size and the height of controls in every sbwz-* application the same way, so no
   application needs its own sizes. The tokens use px sizes, so the components are listed here (SPEC §6.5). */

.font-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--navy-200);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.font-toggle:hover {
  color: var(--text-inverse);
}

.font-toggle[aria-pressed="true"] {
  color: var(--text-inverse);
  background: rgba(255, 255, 255, .12);
}

html.font-large body,
html.font-large .t-body {
  font-size: 17px;
}

html.font-large .t-caption,
html.font-large .form-hint,
html.font-large .form-error {
  font-size: 14px;
}

html.font-large .form-label {
  font-size: 15px;
}

html.font-large .btn {
  min-height: 48px;
  font-size: 16px;
}

html.font-large .btn-sm {
  min-height: 40px;
  font-size: 15px;
}

html.font-large .input,
html.font-large .select,
html.font-large .textarea {
  min-height: 48px;
  font-size: 17px;
}

html.font-large .input,
html.font-large .select {
  height: 48px;
}

html.font-large .nav-link,
html.font-large .tab,
html.font-large .dropdown-item,
html.font-large .pager a,
html.font-large .check,
html.font-large .alert,
html.font-large .toast,
html.font-large .sbwz-table tbody td {
  font-size: 16px;
}

html.font-large .sbwz-table thead th {
  font-size: 15px;
}

html.font-large .badge {
  font-size: 12px;
}
/* 60-tables: scroll wrapper with edge hints, sticky first column, Barlow tabular numbers, phone card layout (SPEC §6.5, §6.7).
   The wrapper never exceeds its parent, so tables cannot widen the 1200 px frame. */

.table-wrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* The light head tint of the tokens is nearly the page background; a navy-mixed tint separates the head from it. */
.theme-light .sbwz-table thead tr {
  background: color-mix(in srgb, var(--table-head-bg) 85%, var(--input-focus));
}

/* Edge hints appear only while the table overflows; core.js sets .is-scrollable (SPEC §6.7). */
.table-wrap.is-scrollable {
  background:
    linear-gradient(to right, var(--surface) 30%, transparent) 0 0 / 40px 100% no-repeat local,
    linear-gradient(to left, var(--surface) 30%, transparent) 100% 0 / 40px 100% no-repeat local,
    linear-gradient(to right, var(--border-strong), transparent) 0 0 / 12px 100% no-repeat scroll,
    linear-gradient(to left, var(--border-strong), transparent) 100% 0 / 12px 100% no-repeat scroll;
}

.table-wrap .sbwz-table {
  min-width: 100%;
}

/* Readable default (Rebříček look): light-blue head with bold dark text, white rows with dark text, thin row rules.
   Overrides the tokens' muted uppercase 11px head and muted cells, which were too faint (contrast >= 4.5:1 for text). */
.sbwz-table thead th {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
  border-bottom: 1px solid var(--border-strong);
}

.sbwz-table tbody tr {
  background: var(--surface);
}

.sbwz-table tbody td {
  color: var(--text);
}

.sbwz-table tbody tr:hover {
  background: var(--table-row-hover);
}

.table--sticky-first th:first-child,
.table--sticky-first td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--surface);
  border-right: 1px solid var(--border);
}

.table--sticky-first thead th:first-child {
  z-index: 2;
  background: inherit;
}

.table--sticky-first tbody tr:hover > td:first-child {
  background: var(--table-row-hover);
}

.t-num {
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.sbwz-table tbody td.t-num,
.sbwz-table thead th.t-num {
  font-family: var(--font-body);
  text-align: right;
}

.sbwz-table th.sortable {
  cursor: pointer;
  white-space: nowrap;
}

@media (max-width: 599px) {
  .table--cards thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .table--cards,
  .table--cards tbody,
  .table--cards tr,
  .table--cards td {
    display: block;
    width: 100%;
  }

  .table--cards tr {
    margin-bottom: var(--sp-3);
    padding: var(--sp-2) 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
  }

  .table--cards tbody td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: 6px 12px;
    border: 0;
    text-align: right;
  }

  .table--cards tbody td::before {
    content: attr(data-label);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    text-align: left;
  }

  .table--cards .hide-sm,
  .table--cards .hide-md,
  .table--cards .hide-lg {
    display: none;
  }
}
/* 70-feedback: toast, modal, hint bubble, spinner and htmx request indicator (SPEC §6.5, §6.8). Every rule that animates
   or transitions switches itself off under prefers-reduced-motion; nothing here uses !important. */

#toast {
  position: fixed;
  left: 0;
  right: 0;
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 1100;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding-inline: 16px;
  pointer-events: none;
}

.toast {
  max-width: min(520px, 100%);
  padding: 10px 20px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  border: 1px solid transparent;
}

/* Soft status backgrounds (the same in both themes) with a dark shade of the status colour as text: contrast >= 4.5:1. */
.toast-ok {
  background: var(--color-success-soft);
  border-color: var(--color-success);
  color: color-mix(in srgb, var(--color-success) 50%, black);
}

.toast-error {
  background: var(--color-error-soft);
  border-color: var(--color-error);
  color: color-mix(in srgb, var(--color-error) 50%, black);
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--overlay-bg);
}

.modal-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 32px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.modal-card:focus {
  outline: none;
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}

.modal-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
}

.modal-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 20px;
  overflow-y: auto;
}

.modal-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--sp-2);
  padding: 14px 20px;
  background: var(--surface-2);
  border-top: 1px solid var(--border);
}

body.modal-open {
  overflow: hidden;
}

@media (max-width: 480px) {
  .modal-backdrop {
    padding: 0;
  }

  .modal-card {
    max-width: none;
    max-height: none;
    height: 100%;
    border: 0;
    border-radius: 0;
  }
}

.hint {
  position: relative;
  display: inline-block;
}

.hint-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--text-muted);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  cursor: help;
}

.hint-btn:hover,
.hint-btn:focus-visible {
  border-color: var(--text);
  color: var(--text);
}

.hint-text {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  width: max-content;
  max-width: min(280px, calc(100vw - 32px));
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  color: var(--text);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
  text-transform: none;
  white-space: normal;
}

.hint.is-open .hint-text,
.hint-btn:focus-visible + .hint-text {
  display: block;
}

@media (hover: hover) {
  .hint:hover .hint-text {
    display: block;
  }
}

.hint--right .hint-text {
  left: auto;
  right: 0;
}

.hint-text.is-placed {
  position: fixed;
  right: auto;
  bottom: auto;
}

@media (max-width: 640px) {
  .hint-text,
  .hint--right .hint-text,
  .hint-text.is-placed {
    position: fixed;
    top: auto;
    left: 16px;
    right: 16px;
    bottom: 16px;
    width: auto;
    max-width: none;
  }
}

.spinner {
  display: inline-block;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--accent);
  border-radius: var(--radius-full);
  vertical-align: middle;
  animation: spinner-rotate .8s linear infinite;
}

@keyframes spinner-rotate {
  to {
    transform: rotate(360deg);
  }
}

.htmx-indicator {
  opacity: 0;
  transition: opacity .15s ease-in;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation: none;
  }

  .htmx-indicator {
    transition: none;
  }
}
/* 80-widgets: avatar, steps wizard, pager, dropdown, empty state, skeleton (SPEC §6.5). Colours and sizes come from the
   tokens; the pager links carry the 44 px touch target from 20-layout. */

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--navy-700);
  color: var(--text-on-accent);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
}

.avatar-lg {
  width: 48px;
  height: 48px;
  font-size: 20px;
}

.steps {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.step-item {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
}

.step-item-active {
  color: var(--text);
  font-weight: 600;
}

.step-bubble {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.step-bubble-done {
  background: var(--navy-700);
  border-color: var(--navy-700);
  color: var(--text-on-accent);
}

.step-bubble-active {
  border-color: var(--accent);
  color: var(--accent);
}

.step-bubble-todo {
  color: var(--text-subtle);
}

.step-label {
  overflow-wrap: anywhere;
}

.step-line {
  position: absolute;
  top: 13px;
  left: calc(50% + 16px);
  right: calc(-50% + 16px);
  height: 2px;
  background: var(--border);
}

.step-item-done .step-line {
  background: var(--navy-700);
}

.step-item:last-child .step-line {
  display: none;
}

.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-block: var(--sp-4);
}

.pager-info {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
}

.pager-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pager a,
.pager-current,
.pager-disabled,
.pager-gap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.pager a:hover {
  background: var(--surface-2);
}

.pager-current {
  background: var(--navy-700);
  border-color: var(--navy-700);
  color: var(--text-on-accent);
}

.pager-disabled {
  color: var(--text-subtle);
}

.pager-gap {
  border-color: transparent;
  color: var(--text-muted);
}

.pager-size {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  font-size: 13px;
}

.pager-size a[aria-current="page"] {
  background: var(--navy-700);
  border-color: var(--navy-700);
  color: var(--text-on-accent);
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown > summary {
  list-style: none;
  cursor: pointer;
}

.dropdown > summary::-webkit-details-marker {
  display: none;
}

.dropdown-menu-start {
  left: 0;
  right: auto;
}

.empty {
  padding: var(--sp-10) var(--sp-4);
  background: var(--surface-2);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  color: var(--text-muted);
  text-align: center;
}

.empty p {
  margin: 0;
}

.skeleton {
  display: block;
  height: 1em;
  border-radius: var(--radius-sm);
  background: var(--surface-3);
}

/* Two-factor enrolment and recovery codes (TOTP-SPEC §5): the QR SVG carries its own white background and quiet zone, so the
   code stays scannable in dark mode. */
.qr-box {
  width: fit-content;
  max-width: 100%;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  line-height: 0;
}

.qr-box svg {
  display: block;
  width: min(240px, 100%);
  height: auto;
}

.secret-text {
  margin: 0;
  font-size: 18px;
  letter-spacing: 1px;
  overflow-wrap: anywhere;
}

.recovery-codes {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 16px;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  list-style: none;
  font-size: 16px;
  letter-spacing: 2px;
}

/* Badge variants for neutral, tournament and inactive states; same shape as the token badges (.badge in sbwz-tokens.css). */
.badge-neutral {
  background: var(--surface-3);
  color: var(--text);
  border-color: var(--border);
}

.badge-tournament {
  background: var(--gold-soft);
  color: var(--gold-700);
  border-color: var(--gold-300);
}

.theme-dark .badge-tournament {
  color: var(--gold);
  border-color: var(--gold);
}

.badge-inactive {
  background: var(--surface-2);
  color: var(--text-muted);
  border-color: var(--border);
}
/* Modul pomoci /dokumentacia (SPEC §11.3): kód pripojenia sa zalamuje, obrázky nemajú vlastnú šírku. */
.help-code {
    margin: 8px 0 16px;
    padding: 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-family: var(--font-mono);
    font-size: 13px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.help-figure {
    margin: 16px 0 0;
}
.help-figure img {
    display: block;
    height: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}
/* 90-utilities: visually hidden, skip link, widths, responsive hiding, spacing helpers (SPEC §6.3, §6.4). */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--sp-4);
  z-index: 1000;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  font-weight: 600;
}

.skip-link:focus {
  top: var(--sp-4);
}

.w-25 {
  width: 25%;
}

.w-50 {
  width: 50%;
}

.w-75 {
  width: 75%;
}

.w-100 {
  width: 100%;
}

.nowrap {
  white-space: nowrap;
}

.text-right {
  text-align: right;
}

.stack > * + * {
  margin-top: var(--sp-4);
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}

@media (max-width: 480px) {
  .hide-sm {
    display: none;
  }
}

@media (max-width: 768px) {
  .hide-md {
    display: none;
  }
}

@media (max-width: 1024px) {
  .hide-lg {
    display: none;
  }
}
/* 95-print: print output hides navigation and actions, drops scrolling and sticky cells, plain white page (SPEC §6.5). */

@media print {
  body {
    background: var(--surface);
    color: var(--text);
  }

  .nav-top,
  .frame-actions,
  .btn,
  .pager,
  #toast,
  #modal {
    display: none;
  }

  .table-wrap {
    overflow: visible;
    max-width: none;
    background: none;
  }

  .table--sticky-first th:first-child,
  .table--sticky-first td:first-child {
    position: static;
  }

  .sbwz-table tbody tr {
    break-inside: avoid;
  }
}