@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&display=swap');

:root {
  --bg: #f3f7f6;
  --surface: #ffffff;
  --surface-soft: #eaf4f2;
  --ink: #17302f;
  --muted: #667b79;
  --line: #d8e4e2;
  --primary: #147d75;
  --primary-dark: #0e5e59;
  --primary-soft: #d9efec;
  --nav: #123c3a;
  --nav-soft: #1c504d;
  --success: #177a57;
  --success-bg: #dff3e9;
  --warning: #9b650d;
  --warning-bg: #fff1cf;
  --danger: #b43a45;
  --danger-bg: #fde4e7;
  --shadow: 0 18px 45px rgba(20, 61, 58, .10);
  --radius: 18px;
  --font-scale: 1;
  --font-size-base: 14px;
  font-family: "Comfortaa", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--bg);
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink); font-size: calc(var(--font-size-base) * var(--font-scale)); }
body.modal-open { overflow: hidden; }
a { color: inherit; }
button, input, select { font: inherit; }
button { cursor: pointer; }
code { font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; }

.app-shell { display: flex; min-height: 100vh; }
.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 20; width: 278px; display: flex; flex-direction: column;
  min-height: 0; overflow: hidden; padding: 28px 20px 18px; color: #eef8f7;
  background: linear-gradient(165deg, var(--nav), #0b2e2d); box-shadow: 12px 0 40px rgba(8, 41, 39, .12);
}
.brand { display: inline-flex; align-items: center; flex: 0 0 auto; gap: 12px; color: inherit; text-decoration: none; }
.brand strong { display: block; font-size: calc(18px * var(--font-scale)); letter-spacing: .01em; }
.brand small { display: block; margin-top: 2px; color: #9dc3bf; font-size: calc(11px * var(--font-scale)); letter-spacing: .08em; text-transform: uppercase; }
.brand-mark { width: 42px; height: 42px; display: inline-grid; place-items: center; flex: 0 0 auto; border-radius: 14px; color: #fff; background: linear-gradient(145deg, #2cb1a6, #147d75); font-weight: 800; letter-spacing: -.04em; box-shadow: 0 9px 25px rgba(12, 100, 93, .28); }
.brand.centered { justify-content: center; margin-bottom: 30px; }
.nav {
  display: flex; flex: 1 1 auto; min-height: 0; flex-direction: column; gap: 6px;
  margin: 42px -7px 0 0; padding: 0 7px 12px 0; overflow-x: hidden; overflow-y: auto;
  overscroll-behavior: contain; scrollbar-gutter: stable; -webkit-overflow-scrolling: touch;
}
.nav::-webkit-scrollbar { width: 7px; }
.nav::-webkit-scrollbar-track { background: transparent; }
.nav::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(199, 220, 217, .28); }
.nav::-webkit-scrollbar-thumb:hover { background: rgba(199, 220, 217, .46); }
.nav a, .nav-disabled, .nav-settings-button { display: flex; align-items: center; min-height: 43px; padding: 10px 14px; border-radius: 12px; text-decoration: none; color: #c7dcd9; font-size: calc(14px * var(--font-scale)); }
.nav a:hover, .nav a.active, .nav-settings-button:hover { color: #fff; background: var(--nav-soft); }
.nav a.active { box-shadow: inset 3px 0 0 #42c7ba; }
.nav-disabled { color: #668d89; cursor: not-allowed; }
.nav-section { margin: 19px 14px 5px; color: #6e9b97; font-size: calc(10px * var(--font-scale)); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.sidebar-user { display: grid; grid-template-columns: 38px 1fr 34px; align-items: center; flex: 0 0 auto; gap: 10px; margin-top: 14px; padding: 15px 10px 0; border-top: 1px solid rgba(255,255,255,.10); }
.avatar { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: var(--nav); background: #c7e9e5; font-weight: 800; }
.sidebar-user-copy { min-width: 0; }
.sidebar-user-copy strong, .sidebar-user-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user-copy strong { font-size: calc(13px * var(--font-scale)); }
.sidebar-user-copy small { margin-top: 3px; color: #8eb6b2; font-size: calc(10px * var(--font-scale)); }
.icon-button { width: 32px; height: 32px; border: 0; border-radius: 9px; color: #d8ecea; background: transparent; font-size: calc(20px * var(--font-scale)); }
.icon-button:hover { background: rgba(255,255,255,.10); }

.app-area { width: calc(100% - 278px); margin-left: 278px; }
.topbar { min-height: 105px; display: flex; align-items: center; gap: 18px; padding: 22px 38px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.82); backdrop-filter: blur(18px); }
.topbar h1 { margin: 4px 0 0; font-size: calc(25px * var(--font-scale)); letter-spacing: -.03em; }
.eyebrow { color: var(--primary); font-size: calc(10px * var(--font-scale)); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.light-text { color: #7ee1d7; }
.status-pill { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; padding: 8px 12px; border: 1px solid #bfe2de; border-radius: 999px; color: var(--primary-dark); background: #eef9f7; font-size: calc(12px * var(--font-scale)); font-weight: 700; }
.status-pill span { width: 8px; height: 8px; border-radius: 50%; background: #2db99d; box-shadow: 0 0 0 4px rgba(45,185,157,.12); }
.menu-button { display: none; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.content { max-width: 1440px; padding: 34px 38px 60px; }

.panel { padding: 26px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 0 8px 25px rgba(26, 77, 73, .05); }
.panel + .panel { margin-top: 22px; }
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 20px; }
.panel-head h2, .panel h2 { margin: 5px 0 0; font-size: calc(20px * var(--font-scale)); letter-spacing: -.025em; }
.panel h3 { margin: 0; }
.panel p { line-height: 1.6; }
.grid { display: grid; gap: 22px; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.align-start { align-items: start; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.narrow-panel { max-width: 680px; }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-bottom: 22px; }
.metric-card { padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(155deg, #fff, #f5fbfa); }
.metric-card span, .metric-card small { display: block; color: var(--muted); }
.metric-card span { font-size: calc(12px * var(--font-scale)); font-weight: 700; }
.metric-card strong { display: block; margin: 13px 0 6px; font-size: calc(34px * var(--font-scale)); line-height: 1; letter-spacing: -.05em; }
.metric-card small { font-size: calc(11px * var(--font-scale)); }
.progress-list { display: flex; flex-direction: column; }
.progress-list div { display: flex; justify-content: space-between; gap: 15px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: calc(14px * var(--font-scale)); }
.progress-list div:last-child { border-bottom: 0; }
.progress-list strong { color: var(--success); }
.progress-list .future { color: var(--muted); }
.progress-list .future strong { color: var(--warning); }
.architecture { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 25px; }
.architecture div { padding: 13px 16px; border: 1px solid #b9dbd7; border-radius: 12px; background: var(--surface-soft); font-weight: 700; }
.architecture span { color: var(--primary); font-weight: 800; }

.form label { display: flex; flex-direction: column; gap: 7px; color: var(--ink); font-size: calc(13px * var(--font-scale)); font-weight: 700; }
.form label small { color: var(--muted); font-size: calc(11px * var(--font-scale)); font-weight: 400; line-height: 1.5; }
input, select { width: 100%; min-height: 46px; padding: 11px 13px; border: 1px solid #c9d9d7; border-radius: 11px; outline: none; color: var(--ink); background: #fff; transition: border-color .15s, box-shadow .15s; }
input:focus, select:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(20,125,117,.10); }
.password-field-control { position: relative; display: block; width: 100%; }
.password-field-control input { padding-right: 50px; }
.password-field-toggle {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 7px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 9px;
  color: #607a77;
  background: transparent;
  transform: translateY(-50%);
  cursor: pointer;
  transition: color .18s ease, background .18s ease, box-shadow .18s ease;
}
.password-field-toggle:hover { color: var(--primary-dark); background: rgba(20,125,117,.09); }
.password-field-toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(20,125,117,.16); }
.password-field-icon { width: 21px; height: 21px; }
.password-field-icon--hide { display: none; }
.password-field-toggle[aria-pressed="true"] .password-field-icon--show { display: none; }
.password-field-toggle[aria-pressed="true"] .password-field-icon--hide { display: block; }
.code-input { text-align: center; font-size: calc(23px * var(--font-scale)); font-weight: 800; letter-spacing: .20em; }
.button-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.button { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; padding: 10px 17px; border: 1px solid var(--primary); border-radius: 11px; color: #fff; background: var(--primary); text-decoration: none; font-size: calc(13px * var(--font-scale)); font-weight: 800; transition: background .15s, border-color .15s, transform .15s; }
.button:hover { background: var(--primary-dark); border-color: var(--primary-dark); transform: translateY(-1px); }
.button.secondary { color: var(--primary-dark); background: #fff; border-color: #b9d5d2; }
.button.secondary:hover { background: var(--surface-soft); }
.button.danger { color: #fff; background: var(--danger); border-color: var(--danger); }
.button.small { min-height: 34px; padding: 7px 12px; }
.button.wide { width: 100%; min-height: 49px; }
.text-link { display: inline-block; margin-top: 22px; color: var(--primary); font-size: calc(13px * var(--font-scale)); font-weight: 700; }

.alert { margin-bottom: 20px; padding: 13px 15px; border: 1px solid; border-radius: 12px; font-size: calc(13px * var(--font-scale)); line-height: 1.5; }
.alert.success { color: #115e44; background: var(--success-bg); border-color: #b7dfcd; }
.alert.warning { color: #80520a; background: var(--warning-bg); border-color: #eed69a; }
.alert.error { color: #8f2731; background: var(--danger-bg); border-color: #efbdc3; }
.badge { display: inline-flex; align-items: center; min-height: 25px; padding: 4px 9px; border-radius: 999px; font-size: calc(10px * var(--font-scale)); font-weight: 800; white-space: nowrap; }
.badge.success { color: #126043; background: var(--success-bg); }
.badge.warning { color: #83560c; background: var(--warning-bg); }
.badge.danger { color: #9b2d38; background: var(--danger-bg); }
.badge.neutral { color: #496562; background: #edf3f2; }
.muted { color: var(--muted); }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 14px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; font-size: calc(13px * var(--font-scale)); }
th { color: var(--muted); font-size: calc(10px * var(--font-scale)); letter-spacing: .08em; text-transform: uppercase; }
tbody tr:hover { background: #f7fbfa; }
.table-subtitle { display: block; margin-top: 4px; color: var(--muted); font-size: calc(11px * var(--font-scale)); }
.actions { text-align: right; }
.actions .button-row { justify-content: flex-end; flex-wrap: nowrap; }
.actions form { margin: 0; }

.role-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.role-card { padding: 20px; border: 1px solid var(--line); border-radius: 15px; background: #fbfdfd; }
.role-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.role-card code { display: inline-block; margin: 10px 0 2px; color: var(--primary-dark); font-size: calc(11px * var(--font-scale)); }
.role-card p { margin-bottom: 0; color: var(--muted); font-size: calc(13px * var(--font-scale)); }
.danger-zone { border-color: #efc8cc; }
hr { width: 100%; border: 0; border-top: 1px solid var(--line); margin: 8px 0; }

.definition-list { margin: 20px 0 0; }
.definition-list div { display: flex; justify-content: space-between; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.definition-list dt { color: var(--muted); }
.definition-list dd { margin: 0; font-weight: 800; }
.qr-card { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 20px; padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: #f8fbfb; }
.qr-target { min-width: 220px; min-height: 220px; display: grid; place-items: center; }
.qr-target svg { max-width: 100%; height: auto; }
.secret-code { max-width: 100%; padding: 8px 10px; border-radius: 8px; background: #e9f1f0; overflow-wrap: anywhere; font-size: calc(12px * var(--font-scale)); }
.recovery-panel { margin-bottom: 22px; border-color: #abd9d3; background: #f7fcfb; }
.recovery-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.recovery-codes code { padding: 11px; border: 1px dashed #8bc5be; border-radius: 9px; text-align: center; background: #fff; }

.check-list { display: grid; gap: 12px; }
.check-item { display: grid; grid-template-columns: 38px 1fr; gap: 13px; align-items: center; padding: 15px; border: 1px solid var(--line); border-radius: 13px; }
.check-item.ok { background: #f5fbf8; }
.check-item.fail { background: #fff7f7; border-color: #edc3c7; }
.check-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--success); font-weight: 900; }
.check-item.fail .check-icon { background: var(--danger); }
.check-item p { margin: 3px 0 0; color: var(--muted); font-size: calc(12px * var(--font-scale)); }

.public-shell { background: #eef5f4; }
.public-main { min-height: 100vh; }
.login-layout { min-height: 100vh; display: grid; grid-template-columns: minmax(380px, 1.05fr) minmax(420px, .95fr); }
.login-intro { min-height: 100vh; display: flex; flex-direction: column; padding: 44px 55px; color: #fff; background: radial-gradient(circle at 18% 18%, rgba(59,190,178,.24), transparent 29%), linear-gradient(150deg, #123f3d 0%, #0a2928 76%); }
.login-copy { max-width: 620px; margin: auto 0; }
.login-copy h1 { max-width: 580px; margin: 12px 0 20px; font-size: clamp(calc(38px * var(--font-scale)), calc(5vw * var(--font-scale)), calc(67px * var(--font-scale))); line-height: 1.02; letter-spacing: -.055em; }
.login-copy p { max-width: 530px; color: #b9d4d1; font-size: calc(17px * var(--font-scale)); line-height: 1.65; }
.login-version { color: #719b97; font-size: calc(11px * var(--font-scale)); letter-spacing: .12em; text-transform: uppercase; }
.login-panel { display: grid; place-items: center; padding: 38px; background: #fff; }
.login-form-wrap { width: min(420px, 100%); }
.login-form-wrap h2 { margin: 8px 0 7px; font-size: calc(34px * var(--font-scale)); letter-spacing: -.045em; }
.login-help { margin-top: 20px; color: var(--muted); font-size: calc(11px * var(--font-scale)); line-height: 1.5; }
.auth-card { width: min(470px, calc(100% - 32px)); margin: 7vh auto; padding: 36px; border: 1px solid var(--line); border-radius: 22px; background: #fff; box-shadow: var(--shadow); text-align: center; }
.auth-card h1 { margin: 10px 0 10px; font-size: calc(29px * var(--font-scale)); }
.auth-card .form { margin-top: 25px; text-align: left; }
.error-page { min-height: 100vh; display: grid; place-items: center; padding: 25px; }
.error-card { width: min(520px, 100%); padding: 38px; border: 1px solid var(--line); border-radius: 20px; background: #fff; box-shadow: var(--shadow); text-align: center; }
.error-card .brand-mark { margin: 0 auto; }
.error-card h1 { margin: 18px 0 8px; }
.error-card p { margin-bottom: 24px; color: var(--muted); line-height: 1.6; }

@media (max-width: 1100px) {
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid.two { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .payroll-period-discovery { grid-template-columns: 1fr; }
  .sidebar { transform: translateX(-102%); transition: transform .2s ease; }
  .sidebar.open { transform: translateX(0); }
  .app-area { width: 100%; margin-left: 0; }
  .menu-button { display: inline-grid; place-items: center; }
  .topbar { min-height: 86px; padding: 17px 20px; }
  .topbar h1 { font-size: calc(21px * var(--font-scale)); }
  .content { padding: 24px 18px 45px; }
  .status-pill { display: none; }
  .login-layout { grid-template-columns: 1fr; }
  .login-intro { min-height: 290px; padding: 30px; }
  .login-copy { margin: 55px 0 35px; }
  .login-copy h1 { font-size: calc(38px * var(--font-scale)); }
  .login-copy p { font-size: calc(14px * var(--font-scale)); }
  .login-panel { padding: 38px 25px 55px; }
  .role-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .metric-grid { grid-template-columns: 1fr; }
  .panel { padding: 20px; }
  .panel-head { flex-direction: column; }
  .recovery-codes { grid-template-columns: 1fr; }
  .definition-list div { flex-direction: column; gap: 5px; }
  th, td { padding: 12px 9px; }
  .auth-card { padding: 27px 21px; }
}

/* Etapa 2 – evidence brigádníků */
.worker-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; margin-bottom: 22px; }
.filter-bar { display: grid; grid-template-columns: minmax(240px, 1.5fr) minmax(220px, 1fr) auto; gap: 14px; align-items: end; margin-bottom: 24px; padding: 17px; border: 1px solid var(--line); border-radius: 14px; background: #f8fbfb; }
.filter-bar label { display: flex; flex-direction: column; gap: 7px; font-size: calc(12px * var(--font-scale)); font-weight: 800; }
.filter-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.empty-state { padding: 34px 12px; color: var(--muted); text-align: center; }
.chip-list { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; min-height: 27px; padding: 4px 9px; border: 1px solid #c9dfdc; border-radius: 999px; color: var(--primary-dark); background: #eff8f6; font-size: calc(11px * var(--font-scale)); font-weight: 750; }
.form-grid { display: grid; gap: 18px; }
.form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid label { display: flex; flex-direction: column; gap: 7px; font-size: calc(13px * var(--font-scale)); font-weight: 700; }
.form-grid label small { color: var(--muted); font-size: calc(11px * var(--font-scale)); font-weight: 400; line-height: 1.45; }
.form-grid .span-two { grid-column: span 2; }
textarea { width: 100%; padding: 12px 13px; border: 1px solid #c9d9d7; border-radius: 11px; outline: none; resize: vertical; color: var(--ink); background: #fff; font: inherit; line-height: 1.5; transition: border-color .15s, box-shadow .15s; }
textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(20,125,117,.10); }
.sensitive-panel { border-color: #c8dcd9; background: linear-gradient(145deg, #fff, #f5faf9); }
.privacy-label { display: inline-flex; align-items: center; min-height: 29px; padding: 5px 10px; border: 1px solid #c5dcd8; border-radius: 999px; color: #496c68; background: #f1f8f7; font-size: calc(10px * var(--font-scale)); font-weight: 850; letter-spacing: .03em; text-transform: uppercase; }
.sticky-actions { position: sticky; bottom: 14px; z-index: 5; display: flex; justify-content: flex-end; gap: 10px; padding: 13px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.94); box-shadow: var(--shadow); backdrop-filter: blur(12px); }
.compact-list { margin: 7px 0 0; padding-left: 20px; }
.compact-list li + li { margin-top: 4px; }
.worker-card-head { display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.worker-identity { display: flex; align-items: center; gap: 16px; }
.worker-identity h2 { margin: 4px 0 7px; font-size: calc(28px * var(--font-scale)); }
.worker-avatar { width: 62px; height: 62px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 20px; color: #fff; background: linear-gradient(145deg, #2cb1a6, #126d67); font-size: calc(21px * var(--font-scale)); font-weight: 900; box-shadow: 0 12px 28px rgba(15, 106, 99, .22); }
.worker-avatar-image { display: block; object-fit: cover; overflow: hidden; }
.worker-name-cell { display: flex; align-items: center; gap: 10px; min-width: 180px; }
.worker-name-text { min-width: 0; }
.worker-avatar-mini { width: 36px; height: 36px; display: block; flex: 0 0 auto; border: 1px solid #c9dfdc; border-radius: 12px; object-fit: cover; background: #eff8f6; }
.worker-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--muted); font-size: calc(11px * var(--font-scale)); }
.card-list { margin: 0; }
.card-list > div { display: grid; grid-template-columns: minmax(130px, .7fr) minmax(0, 1.3fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.card-list > div:last-child { border-bottom: 0; }
.card-list dt { color: var(--muted); font-size: calc(12px * var(--font-scale)); }
.card-list dd { margin: 0; font-size: calc(13px * var(--font-scale)); font-weight: 750; overflow-wrap: anywhere; }
.preserve-lines { white-space: pre-wrap; }
.timeline { position: relative; display: grid; gap: 0; }
.timeline-item { position: relative; display: grid; grid-template-columns: 22px 1fr; gap: 12px; padding: 0 0 22px; }
.timeline-item::before { content: ''; position: absolute; left: 6px; top: 15px; bottom: -3px; width: 2px; background: var(--line); }
.timeline-item:last-child::before { display: none; }
.timeline-dot { position: relative; z-index: 1; width: 14px; height: 14px; margin-top: 2px; border: 3px solid #cde5e2; border-radius: 50%; background: var(--primary); }
.timeline-item strong { display: block; }
.timeline-item small { display: block; margin-top: 4px; color: var(--muted); }
.timeline-item p { margin: 8px 0 0; color: var(--muted); font-size: calc(13px * var(--font-scale)); }
.note-list { display: grid; gap: 12px; }
.note-card { padding: 15px; border: 1px solid var(--line); border-radius: 13px; background: #f8fbfb; }
.note-card p { margin: 0 0 9px; }
.note-card small { color: var(--muted); }

@media (max-width: 1100px) {
  .worker-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filter-bar { grid-template-columns: 1fr 1fr; }
  .filter-actions { grid-column: span 2; }
}

@media (max-width: 720px) {
  .worker-summary-grid, .form-grid.two, .form-grid.three, .filter-bar { grid-template-columns: 1fr; }
  .form-grid .span-two, .filter-actions { grid-column: auto; }
  .worker-card-head { align-items: flex-start; flex-direction: column; }
  .card-list > div { grid-template-columns: 1fr; gap: 6px; }
  .sticky-actions { flex-direction: column-reverse; }
  .sticky-actions .button { width: 100%; }
}


/* Uživatelské nastavení vzhledu */
.nav-settings-button {
  width: 100%;
  border: 0;
  font-family: inherit;
  text-align: left;
  background: transparent;
}
.settings-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(7, 35, 34, .58);
  backdrop-filter: blur(5px);
}
.settings-overlay[hidden] { display: none; }
.settings-dialog {
  width: min(480px, 100%);
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: 0 28px 70px rgba(7, 35, 34, .26);
}
.settings-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}
.settings-dialog-head h2 { margin: 5px 0 0; font-size: calc(22px * var(--font-scale)); }
.settings-close {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--ink);
  background: var(--surface-soft);
  font-size: calc(22px * var(--font-scale));
  line-height: 1;
}
.font-size-setting {
  display: grid;
  gap: 12px;
}
.font-size-setting label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-weight: 800;
}
.font-size-value {
  min-width: 64px;
  padding: 7px 10px;
  border-radius: 999px;
  color: var(--primary-dark);
  background: var(--primary-soft);
  text-align: center;
  font-size: calc(12px * var(--font-scale));
}
.font-size-setting input[type="range"] {
  width: 100%;
  min-height: auto;
  padding: 0;
  accent-color: var(--primary);
}
.font-size-range-labels {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: calc(11px * var(--font-scale));
}
.settings-help {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: calc(12px * var(--font-scale));
  line-height: 1.6;
}
.settings-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
}

@media (max-width: 560px) {
  .settings-dialog { padding: 21px; }
  .settings-actions { flex-direction: column-reverse; }
  .settings-actions .button { width: 100%; }
}

/* Etapa 3 - registracni dotaznik a dokumenty */
.public-main { min-height: 100vh; padding: 42px 20px; }
.public-card { width: min(680px, 100%); margin: 0 auto; padding: 34px; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); box-shadow: var(--shadow); }
.public-card h1 { margin: 10px 0 14px; font-size: calc(32px * var(--font-scale)); letter-spacing: -.04em; }
.public-card .lead { color: var(--muted); line-height: 1.7; }
.public-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 30px; }
.public-brand strong, .public-brand small { display: block; }
.public-brand small { margin-top: 3px; color: var(--muted); font-size: calc(10px * var(--font-scale)); text-transform: uppercase; letter-spacing: .08em; }
.public-note { margin: 22px 0 0; color: var(--muted); font-size: calc(11px * var(--font-scale)); line-height: 1.6; }
.centered-card { text-align: center; }
.centered-card .brand-mark { margin: 0 auto 18px; }
.completion-meta { margin-top: 24px; padding: 15px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-soft); }
.completion-meta span, .completion-meta strong { display: block; }
.completion-meta span { color: var(--muted); font-size: calc(11px * var(--font-scale)); }
.completion-meta strong { margin-top: 6px; overflow-wrap: anywhere; }
.registration-public-shell { width: min(1040px, 100%); margin: 0 auto; }
.registration-public-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 22px; padding: 18px 22px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.92); box-shadow: 0 8px 25px rgba(26,77,73,.05); }
.registration-public-head .public-brand { margin: 0; }
.registration-progress { text-align: right; }
.registration-progress span, .registration-progress small { display: block; }
.registration-progress span { font-weight: 800; }
.registration-progress small { margin-top: 4px; color: var(--muted); font-size: calc(10px * var(--font-scale)); }
.registration-form { display: grid; gap: 22px; }
.registration-form .panel + .panel { margin-top: 0; }
.registration-intro h1 { margin: 7px 0 12px; font-size: calc(30px * var(--font-scale)); }
.registration-intro p { color: var(--muted); }
.privacy-inline { display: inline-flex; gap: 8px; margin-top: 8px; padding: 9px 12px; border-radius: 10px; background: var(--surface-soft); font-size: calc(12px * var(--font-scale)); }
.registration-fields { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 19px; }
.registration-field { min-width: 0; }
.registration-field:has(textarea), .registration-field:has(.choice-grid) { grid-column: 1 / -1; }
.registration-field.has-validation-error input,
.registration-field.has-validation-error select,
.registration-field.has-validation-error textarea,
.registration-field.has-validation-error .choice { border-color: var(--danger); box-shadow: 0 0 0 2px rgba(171, 50, 59, .08); }
.field-validation-message { margin: 7px 0 0; color: var(--danger); font-size: calc(11px * var(--font-scale)); font-weight: 700; line-height: 1.45; }
.registration-autosave-notice { display: none; margin-top: 12px; padding: 9px 12px; border: 1px solid #c8dedb; border-radius: 10px; background: #f2faf8; color: var(--primary-dark); font-size: calc(11px * var(--font-scale)); font-weight: 700; }
.registration-autosave-notice[data-state="saving"], .registration-progress small[data-state="saving"] { color: var(--primary); }
.registration-autosave-notice[data-state="warning"], .registration-progress small[data-state="warning"] { color: #8a5b13; }
.registration-autosave-notice[data-state="error"], .registration-progress small[data-state="error"] { color: var(--danger); border-color: #e7b8bd; background: var(--danger-bg); }
.question-label { display: block; margin-bottom: 8px; font-size: calc(13px * var(--font-scale)); font-weight: 800; }
.field-help { margin: -2px 0 9px !important; color: var(--muted); font-size: calc(11px * var(--font-scale)); line-height: 1.5 !important; }
.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }
.choice { display: flex; align-items: flex-start; gap: 10px; min-height: 45px; padding: 11px 12px; border: 1px solid #cbdad8; border-radius: 11px; background: #fff; font-size: calc(12px * var(--font-scale)); font-weight: 650; }
.choice:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.choice input { width: 18px; min-height: 18px; margin: 1px 0 0; padding: 0; accent-color: var(--primary); }
.condition-hidden { display: none !important; }
.upload-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.upload-grid label { display: flex; flex-direction: column; gap: 8px; font-weight: 800; }
.upload-grid small { color: var(--muted); font-size: calc(10px * var(--font-scale)); font-weight: 400; line-height: 1.5; }
.document-list { display: grid; gap: 10px; margin-top: 18px; }
.document-list article { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #f8fbfb; }
.document-list strong, .document-list small { display: block; overflow-wrap: anywhere; }
.document-list small { margin-top: 4px; color: var(--muted); font-size: calc(10px * var(--font-scale)); }
.legal-stack { display: grid; gap: 16px; }
.legal-document { border: 1px solid var(--line); border-radius: 13px; background: #fbfdfd; }
.legal-document summary { padding: 14px 16px; cursor: pointer; font-weight: 800; }
.legal-document summary span { color: var(--muted); font-size: calc(10px * var(--font-scale)); }
.legal-body { max-height: 360px; overflow: auto; padding: 0 16px 16px; color: #405a58; font-size: calc(11px * var(--font-scale)); line-height: 1.7; }
.legal-basis { margin: 0 16px 16px !important; padding-top: 10px; border-top: 1px solid var(--line); color: var(--muted); font-size: calc(10px * var(--font-scale)); }
.legal-check { display: flex; align-items: flex-start; gap: 11px; padding: 14px; border: 1px solid #bcd8d4; border-radius: 12px; background: var(--surface-soft); font-size: calc(12px * var(--font-scale)); font-weight: 700; line-height: 1.55; }
.legal-check input { width: 19px; min-height: 19px; flex: 0 0 auto; padding: 0; margin-top: 1px; accent-color: var(--primary); }
.registration-actions { position: sticky; bottom: 14px; z-index: 8; display: flex; justify-content: flex-end; gap: 10px; padding: 13px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.96); box-shadow: var(--shadow); backdrop-filter: blur(12px); }
.registration-filters { grid-template-columns: repeat(4,minmax(180px,1fr)); }
.questionnaire-filters { grid-template-columns: repeat(3,minmax(170px,1fr)); }
.form-grid.four { grid-template-columns: repeat(4,minmax(0,1fr)); }
.checkbox-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-top: 20px; }
.check-card { display: flex !important; flex-direction: row !important; align-items: flex-start; gap: 10px !important; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: #f8fbfb; }
.check-card input { width: 18px; min-height: 18px; padding: 0; margin-top: 2px; accent-color: var(--primary); }
.check-card span, .check-card strong, .check-card small { display: block; }
.check-card small { margin-top: 4px; }
.chip.danger { color: var(--danger); border-color: #edc3c7; background: var(--danger-bg); }
.answer-groups h3 { margin: 24px 0 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line); color: var(--primary-dark); }
.answer-groups h3:first-child { margin-top: 0; }
.answer-row { display: grid; grid-template-columns: minmax(220px,.8fr) minmax(0,1.2fr); gap: 18px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.answer-row strong, .answer-row small { display: block; }
.answer-row small { margin-top: 4px; color: var(--muted); font-size: calc(10px * var(--font-scale)); }
.answer-row p { margin: 0; overflow-wrap: anywhere; }
.qr-small { width: 180px; min-height: 180px; margin: 18px auto 0; }
.qr-small canvas { width: 100%; height: auto; }

@media (max-width: 1050px) {
  .registration-filters, .questionnaire-filters { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .form-grid.four { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 720px) {
  .public-main { padding: 18px 12px; }
  .public-card { padding: 24px 19px; }
  .registration-public-head { align-items: flex-start; }
  .registration-progress { display: none; }
  .registration-autosave-notice { display: block; }
  .registration-fields, .upload-grid, .choice-grid, .checkbox-grid, .registration-filters, .questionnaire-filters { grid-template-columns: 1fr; }
  .registration-field { grid-column: 1 !important; }
  .registration-actions { flex-direction: column-reverse; }
  .registration-actions .button { width: 100%; }
  .answer-row { grid-template-columns: 1fr; gap: 8px; }
  .form-grid.four { grid-template-columns: 1fr; }
}

/* Etapa 3B: registrace účtu, povinné přílohy a elektronický podpis */
.upload-requirement.required-upload {
  border: 1px solid rgba(190, 104, 32, .35);
  background: rgba(255, 244, 228, .62);
  border-radius: 14px;
  padding: 1rem;
}
.required-upload-summary {
  margin-top: 1rem;
  padding: .9rem 1rem;
  border-radius: 12px;
  background: rgba(26, 137, 128, .08);
}
.legal-choice {
  border: 0;
  padding: 0;
  margin: .65rem 0 1.2rem;
}
.legal-choice legend {
  font-weight: 700;
  margin-bottom: .55rem;
}
.signature-pad-wrap {
  border: 1px solid var(--border, #d7e1df);
  border-radius: 16px;
  padding: 1rem;
  background: #f7fbfa;
}
.signature-pad-wrap canvas {
  width: 100%;
  height: min(30vw, 230px);
  min-height: 150px;
  display: block;
  background: #fff;
  border: 2px dashed #96b3af;
  border-radius: 12px;
  touch-action: none;
  cursor: crosshair;
}
.signature-pad-wrap canvas:focus {
  outline: 3px solid rgba(26, 137, 128, .25);
  outline-offset: 3px;
}
.signature-pad-actions {
  margin-top: .8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.signature-pad-actions span {
  color: var(--muted, #5f7774);
}
.signed-document-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.signed-document-sheet {
  max-width: 920px;
  margin: 1.5rem auto;
  padding: clamp(1.5rem, 4vw, 4rem);
  background: #fff;
  color: #172523;
  box-shadow: 0 20px 55px rgba(20, 52, 48, .13);
  border-radius: 8px;
}
.signed-document-body header {
  padding-bottom: 1.2rem;
  border-bottom: 2px solid #183f3b;
}
.signed-document-body section {
  margin: 1.5rem 0;
}
.signed-document-body h1 { font-size: 1.8em; }
.signed-document-body h2 { font-size: 1.18em; }
.signed-document-text { line-height: 1.65; }
.signed-response {
  padding: 1rem;
  background: #f0f8f6;
  border-left: 4px solid #1a8980;
}
.signed-signature img {
  display: block;
  width: min(100%, 520px);
  max-height: 180px;
  object-fit: contain;
  object-position: left center;
  border-bottom: 1px solid #78918e;
}
.signed-document-body .hash,
.signed-document-hashes code {
  overflow-wrap: anywhere;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: .82em;
}
.signed-document-hashes {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid #cbd8d6;
  display: grid;
  gap: .45rem;
}
@media print {
  .sidebar,.topbar,.signed-document-toolbar,.settings-overlay { display: none !important; }
  .app-area,.content { display: block !important; margin: 0 !important; padding: 0 !important; }
  .signed-document-sheet { box-shadow: none; margin: 0; max-width: none; padding: 14mm; }
}

/* Nastaveni vzhledu a e-mailovych poskytovatelu */
.settings-page-card { max-width: 820px; }
.settings-font-control { max-width: 680px; }
.settings-font-actions { margin-top: 18px; }
.checkbox-card {
  min-height: 46px;
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start;
  gap: 11px !important;
  padding: 11px 13px;
  border: 1px solid #c9d9d7;
  border-radius: 11px;
  background: #f8fbfb;
}
.checkbox-card input { width: 19px; min-height: 19px; flex: 0 0 auto; margin: 2px 0 0; padding: 0; accent-color: var(--primary); }
.checkbox-card span, .checkbox-card strong, .checkbox-card small { display: block; }
.checkbox-card small { margin-top: 4px; }
.mail-provider-panel {
  margin-top: 24px;
  padding: 22px;
  border: 1px solid #c9dfdc;
  border-radius: 15px;
  background: linear-gradient(145deg, #fbfdfd, #f1f8f7);
}
.mail-provider-panel[hidden] { display: none; }
.settings-provider-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 19px; }
.settings-provider-head h3 { margin-top: 5px; }
.settings-provider-actions { margin-top: 18px; }
.settings-security-note { margin: 22px 0 0; }
.code-field { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: calc(11px * var(--font-scale)); }
.settings-connected-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.settings-connected-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 13px; background: #f8fbfb; }
.settings-connected-card strong, .settings-connected-card small { display: block; }
.settings-connected-card small { margin-top: 5px; color: var(--muted); overflow-wrap: anywhere; }
.settings-test-form { align-items: end; }
.settings-test-action { display: flex; align-items: flex-end; min-height: 46px; }
.settings-test-action .button { width: 100%; }

@media (max-width: 720px) {
  .settings-connected-grid { grid-template-columns: 1fr; }
  .settings-provider-head { flex-direction: column; }
  .mail-provider-panel { padding: 18px; }
}

/* Etapa 4 – HR schvalování, školení a rating score */
.worker-section, .worker-section-grid { margin-top: 22px; }
.worker-head-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 16px; }
.rating-display { min-width: 190px; padding: 12px 15px; border: 1px solid #d8c989; border-radius: 14px; background: #fffaf0; text-align: right; }
.rating-display strong, .rating-display small { display: block; }
.rating-display strong { margin-top: 3px; font-size: calc(14px * var(--font-scale)); }
.rating-display small { margin-top: 3px; color: var(--muted); font-size: calc(10px * var(--font-scale)); }
.rating-stars { display: block; color: #a86e0c; font-size: calc(17px * var(--font-scale)); letter-spacing: .08em; white-space: nowrap; }
.rating-summary { text-align: right; }
.rating-summary strong { display: block; margin-top: 4px; font-size: calc(11px * var(--font-scale)); }

.hr-queue-tabs { display: grid; grid-template-columns: repeat(6, minmax(145px, 1fr)); gap: 10px; margin-bottom: 22px; overflow-x: auto; padding-bottom: 3px; }
.hr-queue-tab { min-width: 145px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 13px; color: var(--muted); background: var(--surface); text-decoration: none; font-size: calc(11px * var(--font-scale)); font-weight: 800; }
.hr-queue-tab strong { min-width: 28px; padding: 4px 7px; border-radius: 999px; color: var(--primary-dark); background: var(--primary-soft); text-align: center; }
.hr-queue-tab:hover, .hr-queue-tab.active { color: var(--primary-dark); border-color: #92c9c4; background: #eef8f6; }
.hr-queue-tab.active { box-shadow: inset 0 -3px 0 var(--primary); }
.hr-filter-bar { grid-template-columns: minmax(260px, 1fr) auto; }
.hr-control-panel { border-color: #b8d9d5; background: linear-gradient(145deg, #fff, #f1f9f7); }
.hr-actions-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.action-card { min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.action-card h3 { margin-bottom: 8px; }
.action-card > p { min-height: 47px; margin: 0 0 15px; color: var(--muted); font-size: calc(11px * var(--font-scale)); }
.action-card .form { gap: 12px; }
.danger-card { border-color: #edc3c7; background: #fffafb; }
.hr-inline-editor { display: grid; grid-template-columns: minmax(190px, .6fr) minmax(0, 1.4fr); gap: 20px; align-items: end; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.hr-inline-editor h3, .hr-inline-editor p { margin: 0; }
.hr-inline-editor p { margin-top: 5px; }
.hr-position-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; }

.document-review-list, .training-list, .rating-list { display: grid; gap: 13px; }
.document-review-card, .training-card, .rating-card { padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: #f8fbfb; }
.document-review-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.document-review-head strong, .document-review-head small { display: block; overflow-wrap: anywhere; }
.document-review-head small { margin-top: 5px; color: var(--muted); font-size: calc(10px * var(--font-scale)); }
.review-note { margin: 12px 0 7px !important; padding: 10px 12px; border-left: 3px solid var(--primary); background: #fff; font-size: calc(12px * var(--font-scale)); }
.document-review-actions { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.review-form { min-width: min(720px, 100%); flex: 1; display: grid; grid-template-columns: minmax(160px, .45fr) minmax(240px, 1fr) auto; gap: 10px; align-items: end; }
.review-form label { display: flex; flex-direction: column; gap: 6px; color: var(--ink); font-size: calc(11px * var(--font-scale)); font-weight: 800; }
.review-form input, .review-form select { min-height: 38px; padding: 8px 10px; }
.training-card strong, .training-card small { display: block; }
.training-card small { margin-top: 5px; color: var(--muted); }
.training-card p { margin: 9px 0 0; font-size: calc(12px * var(--font-scale)); }
.rating-card > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rating-card .rating-stars { display: inline-block; }
.rating-card p { margin: 11px 0 8px; }
.rating-card small { color: var(--muted); }

@media (max-width: 1200px) {
  .hr-queue-tabs { grid-template-columns: repeat(3, minmax(160px, 1fr)); }
  .hr-actions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .review-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .review-form .button { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .worker-head-actions { width: 100%; align-items: stretch; flex-direction: column; }
  .rating-display, .rating-summary { width: 100%; text-align: left; }
  .worker-head-actions .button-row, .worker-head-actions .button { width: 100%; }
  .hr-queue-tabs, .hr-actions-grid, .hr-inline-editor, .hr-position-form, .review-form { grid-template-columns: 1fr; }
  .hr-filter-bar { grid-template-columns: 1fr; }
  .document-review-head, .document-review-actions { align-items: stretch; flex-direction: column; }
  .review-form .button { grid-column: auto; width: 100%; }
}

.autocomplete-field { position: relative; }
.autocomplete-menu { position: absolute; z-index: 40; top: calc(100% + 6px); right: 0; left: 0; max-height: 280px; overflow-y: auto; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 18px 45px rgba(18, 60, 58, .16); }
.autocomplete-menu[hidden] { display: none; }
.autocomplete-option { display: block; width: 100%; min-height: 38px; padding: 9px 11px; border: 0; border-radius: 8px; color: var(--ink); background: transparent; text-align: left; font: inherit; cursor: pointer; }
.autocomplete-option:hover, .autocomplete-option.active { color: var(--primary-dark); background: var(--primary-soft); }
.bulk-delete-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 18px; padding: 12px 14px; border: 1px solid #edc3c7; border-radius: 12px; background: var(--danger-bg); }
.bulk-delete-toolbar span { color: var(--muted); font-size: calc(11px * var(--font-scale)); }
.bulk-delete-toolbar .button:disabled { opacity: .5; cursor: not-allowed; }
.worker-select-column { width: 42px; text-align: center; }
.worker-select-column input { width: 18px; min-height: 18px; padding: 0; accent-color: var(--primary); }

@media (max-width: 760px) {
  .bulk-delete-toolbar { align-items: stretch; flex-direction: column; }
  .bulk-delete-toolbar .button { width: 100%; }
}

/* Oprava hromadného výběru brigádníků */
.bulk-delete-toolbar { width: 100%; justify-content: flex-start; }
.bulk-delete-toolbar .button { margin-left: auto; flex: 0 0 auto; }
.worker-select-column { width: 44px; min-width: 44px; padding-right: 8px; padding-left: 8px; }
.worker-select-column input[type="checkbox"],
.compact-checkbox {
  -webkit-appearance: checkbox;
  appearance: auto;
  display: inline-block;
  box-sizing: border-box;
  flex: 0 0 18px;
  width: 18px !important;
  max-width: 18px;
  height: 18px !important;
  min-height: 18px !important;
  padding: 0 !important;
  margin: 0 auto;
  border-radius: 3px;
  accent-color: var(--primary);
  vertical-align: middle;
}

/* Etapa 6 – eventy, plánování a pozvánky */
.event-filter-bar { grid-template-columns: minmax(300px, 1.4fr) minmax(220px, .7fr) auto; }
.event-list { display: grid; gap: 14px; }
.event-list-card { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 18px; border: 1px solid var(--line); border-radius: 15px; background: linear-gradient(145deg, #fff, #f7fbfa); }
.event-date-block { width: 62px; height: 70px; display: grid; place-content: center; text-align: center; border: 1px solid #b9d8d4; border-radius: 16px; background: var(--primary-soft); }
.event-date-block strong { display: block; font-size: calc(25px * var(--font-scale)); line-height: 1; }
.event-date-block span { display: block; margin-top: 5px; color: var(--primary-dark); font-size: calc(10px * var(--font-scale)); font-weight: 900; letter-spacing: .12em; }
.event-date-block.large { width: 78px; height: 86px; }
.event-date-block.large strong { font-size: calc(32px * var(--font-scale)); }
.event-list-main { min-width: 0; }
.event-list-title { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.event-list-title h3 { margin: 0; font-size: calc(17px * var(--font-scale)); }
.event-list-title p { margin: 6px 0 0; color: var(--muted); font-size: calc(11px * var(--font-scale)); }
.event-list-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 12px; color: var(--muted); font-size: calc(11px * var(--font-scale)); }
.event-list-meta strong { color: var(--ink); }
.event-counter-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
.event-counter-row span, .event-summary-badges span { padding: 7px 10px; border-radius: 999px; background: #edf5f4; color: var(--muted); font-size: calc(10px * var(--font-scale)); }
.event-counter-row .has-question { background: var(--warning-bg); color: var(--warning); }
.event-counter-row strong, .event-summary-badges strong { color: var(--ink); }
.event-list-action { align-self: stretch; display: flex; align-items: center; }
.event-form-panel { max-width: 1100px; }
.event-reward-grid { grid-template-columns: 1fr .45fr .7fr 1.4fr; }
.event-position-editor { padding: 20px; border: 1px solid #b9d8d4; border-radius: 15px; background: #f5fbfa; }
.event-position-editor h3 { margin-top: 5px; }
.event-position-editor p { margin: 8px 0 16px; }
.code-textarea { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: calc(12px * var(--font-scale)); }
.event-hero { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.event-hero-main { display: flex; align-items: center; gap: 18px; min-width: 0; }
.event-hero h2 { margin: 5px 0 9px; font-size: calc(28px * var(--font-scale)); }
.event-detail-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(340px, .9fr); gap: 22px; margin-top: 22px; }
.event-copy { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.event-copy h3 { margin: 0 0 8px; }
.event-copy p { margin: 0; white-space: normal; }
.position-capacity-list { display: grid; gap: 12px; }
.position-capacity-list article { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(120px, 1.2fr) 90px; gap: 14px; align-items: center; padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: #f8fbfb; }
.position-capacity-list strong, .position-capacity-list small { display: block; }
.position-capacity-list small { margin-top: 4px; color: var(--muted); font-size: calc(10px * var(--font-scale)); }
.capacity-meter { height: 9px; overflow: hidden; border-radius: 999px; background: #dceae8; }
.capacity-meter span { display: block; width: var(--capacity-percent); height: 100%; border-radius: inherit; background: var(--primary); }
.position-count { text-align: right; }
.event-status-panel { margin-top: 22px; }
.event-status-panel form { margin: 0; }
.event-summary-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.invitation-question { max-width: 360px; padding: 9px 11px; border-left: 3px solid var(--warning); border-radius: 7px; background: var(--warning-bg); font-size: calc(11px * var(--font-scale)); line-height: 1.5; }
.event-candidate-filters { display: grid; grid-template-columns: repeat(4, minmax(180px, 1fr)); gap: 14px; align-items: end; }
.event-candidate-filters label, .candidate-send-controls label { display: flex; flex-direction: column; gap: 7px; font-size: calc(11px * var(--font-scale)); font-weight: 800; }
.event-candidate-filters label small { color: var(--muted); font-weight: 400; }
.event-candidate-filters .filter-actions { grid-column: 1 / -1; }
.candidate-selection-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.candidate-selection-toolbar h2 { margin: 5px 0; }
.candidate-selection-toolbar p { margin: 0; }
.candidate-send-controls { display: grid; grid-template-columns: minmax(230px, 1fr) auto; gap: 10px; align-items: end; min-width: min(520px, 100%); }
.candidate-table { min-width: 1180px; }
.candidate-table td { vertical-align: top; }
.candidate-table .rating-stars { font-size: calc(13px * var(--font-scale)); }
.candidate-already-invited { background: #fafcfc; }
.candidate-already-invited td { opacity: .8; }
.worker-invitation-list { display: grid; gap: 14px; }
.worker-invitation-card { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 18px; border: 1px solid var(--line); border-radius: 15px; background: linear-gradient(145deg, #fff, #f7fbfa); }
.worker-invitation-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.worker-invitation-title h3 { margin: 0; }
.worker-invitation-card p { margin: 6px 0 0; color: var(--muted); font-size: calc(11px * var(--font-scale)); }
.worker-invitation-list.compact .worker-invitation-card { padding: 14px; }
.worker-event-hero { margin-bottom: 22px; }
.invitation-response-panel { margin-top: 22px; }
.invitation-response-actions { display: grid; grid-template-columns: minmax(150px, .4fr) minmax(150px, .4fr) minmax(300px, 1.2fr); gap: 14px; align-items: start; }
.invitation-response-actions form { margin: 0; }
.invitation-response-actions button:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.invitation-question-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.invitation-question-form label { display: flex; flex-direction: column; gap: 7px; font-weight: 800; }
.invitation-question-own { margin-bottom: 18px; padding: 14px; border: 1px solid #e8d28f; border-radius: 12px; background: var(--warning-bg); }
.invitation-question-own p { margin: 8px 0 0; }

@media (max-width: 1100px) {
  .event-filter-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .event-filter-bar .filter-actions { grid-column: 1 / -1; }
  .event-candidate-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .event-detail-grid { grid-template-columns: 1fr; }
  .event-reward-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .invitation-response-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .invitation-question-form { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .bulk-delete-toolbar .button { margin-left: 0; }
  .event-filter-bar, .event-candidate-filters, .event-reward-grid { grid-template-columns: 1fr; }
  .event-list-card, .worker-invitation-card { grid-template-columns: 62px minmax(0, 1fr); }
  .event-list-action, .worker-invitation-card > .button { grid-column: 1 / -1; width: 100%; }
  .event-list-action .button { width: 100%; }
  .event-list-title, .worker-invitation-title { flex-direction: column; }
  .event-hero, .candidate-selection-toolbar { align-items: stretch; flex-direction: column; }
  .event-hero .button-row { width: 100%; }
  .event-hero .button-row .button { flex: 1; }
  .candidate-send-controls { grid-template-columns: 1fr; min-width: 0; }
  .position-capacity-list article { grid-template-columns: 1fr; }
  .position-count { text-align: left; }
  .invitation-response-actions, .invitation-question-form { grid-template-columns: 1fr; }
}

/* Eventform shared calendar styles */
/* v31 dashboard calendar with agenda */
.dashboard-overview--news{
  grid-template-columns:minmax(0,1fr) !important;
}

.dashboard-calendar{
  --calendar-in-progress:#747b80;
  --calendar-in-progress-soft:#eef0f1;
  --calendar-confirmed:#39785d;
  --calendar-confirmed-soft:#e8f4ed;
  --calendar-preparation:#39785d;
  --calendar-preparation-soft:#e8f4ed;
  --calendar-cancelled:#b44740;
  --calendar-cancelled-soft:#fae9e7;
  margin-bottom:20px;
  overflow:hidden;
}

.dashboard-calendar__header,
.dashboard-calendar__toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

.dashboard-calendar__header{
  padding-bottom:18px;
  border-bottom:1px solid var(--line);
}

.dashboard-calendar__header .eyebrow{
  margin-bottom:.35rem;
}

.dashboard-calendar__header h2{
  font-size:clamp(1.65rem,2.4vw,2.2rem);
}

.dashboard-calendar__header-actions,
.dashboard-calendar__views,
.dashboard-calendar__period-nav,
.dashboard-calendar__legend{
  display:flex;
  align-items:center;
}

.dashboard-calendar__header-actions{
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.dashboard-calendar__views{
  padding:4px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#f5f0e9;
}

.dashboard-calendar__view,
.dashboard-calendar__today,
.dashboard-calendar__nav{
  appearance:none;
  border:0;
  cursor:pointer;
  color:var(--ink);
  font:inherit;
}

.dashboard-calendar__view{
  padding:9px 15px;
  border-radius:999px;
  background:transparent;
  color:var(--muted);
  font-size:.82rem;
  font-weight:700;
  transition:background .18s ease,color .18s ease,box-shadow .18s ease;
}

.dashboard-calendar__view:hover{
  color:var(--ink);
}

.dashboard-calendar__view.is-active{
  background:#fff;
  color:var(--primary-dark);
  box-shadow:0 5px 14px rgba(72,52,34,.1);
}

.dashboard-calendar__today{
  padding:10px 16px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  font-size:.82rem;
  font-weight:700;
}

.dashboard-calendar__today:hover{
  border-color:rgba(155,111,69,.5);
  color:var(--primary-dark);
}

.dashboard-calendar__toolbar{
  min-height:62px;
  padding:12px 0;
}

.dashboard-calendar__period-nav{
  min-width:270px;
  gap:12px;
}

.dashboard-calendar__period-nav strong{
  min-width:180px;
  text-align:center;
  font-size:1rem;
}

.dashboard-calendar__nav{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:50%;
  background:#fff;
  font-size:1.45rem;
  line-height:1;
}

.dashboard-calendar__nav:hover{
  border-color:rgba(155,111,69,.5);
  color:var(--primary-dark);
  background:#fffaf4;
}

.dashboard-calendar__legend{
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:8px 14px;
  color:var(--muted);
  font-size:.72rem;
  font-weight:700;
}

.dashboard-calendar__legend span{
  display:inline-flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
}

.dashboard-calendar__dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--primary);
}

.dashboard-calendar__dot--in-progress{background:var(--calendar-in-progress)}
.dashboard-calendar__dot--confirmed{background:var(--calendar-confirmed)}
.dashboard-calendar__dot--preparation{background:var(--calendar-preparation)}
.dashboard-calendar__dot--cancelled{background:var(--calendar-cancelled)}

.dashboard-calendar__layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(285px,330px);
  height:clamp(590px,72vh,760px);
  min-height:0;
  border:1px solid var(--line);
  border-radius:22px;
  overflow:hidden;
  background:#fff;
}

.dashboard-calendar__main{
  min-width:0;
  min-height:0;
  overflow:auto;
  background:#fff;
}

.dashboard-calendar__grid{
  min-width:720px;
  width:100%;
  height:100%;
  min-height:0;
}

.dashboard-calendar__agenda{
  min-width:0;
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border-left:1px solid var(--line);
  background:linear-gradient(180deg,#fbf8f4 0%,#f7f1e9 100%);
}

.dashboard-calendar__agenda-head{
  padding:20px 20px 16px;
  border-bottom:1px solid var(--line);
}

.dashboard-calendar__agenda-head small{
  display:block;
  margin-bottom:4px;
  color:var(--primary-dark);
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.dashboard-calendar__agenda-head h3{
  font-size:1.05rem;
  line-height:1.3;
}

.dashboard-calendar__agenda-list{
  min-height:0;
  display:grid;
  align-content:start;
  gap:10px;
  padding:16px;
  overflow-y:auto;
}

.calendar-agenda-card{
  position:relative;
  display:grid;
  grid-template-columns:5px minmax(0,1fr);
  gap:11px;
  padding:13px;
  border:1px solid var(--line);
  border-radius:15px;
  background:rgba(255,255,255,.9);
  box-shadow:0 7px 18px rgba(78,57,37,.05);
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}

.calendar-agenda-card:hover{
  transform:translateY(-1px);
  border-color:rgba(155,111,69,.38);
  box-shadow:0 10px 22px rgba(78,57,37,.09);
}

.calendar-agenda-card__bar{
  border-radius:999px;
  background:var(--calendar-in-progress);
}

.calendar-agenda-card--confirmed .calendar-agenda-card__bar{background:var(--calendar-confirmed)}
.calendar-agenda-card--preparation .calendar-agenda-card__bar{background:var(--calendar-preparation)}
.calendar-agenda-card--cancelled .calendar-agenda-card__bar{background:var(--calendar-cancelled)}

.calendar-agenda-card__body{
  min-width:0;
  display:grid;
  gap:5px;
}

.calendar-agenda-card__time{
  color:var(--primary-dark);
  font-size:.68rem;
  font-weight:700;
}

.calendar-agenda-card__title{
  overflow:hidden;
  color:var(--ink);
  font-size:.82rem;
  font-weight:700;
  line-height:1.35;
  text-overflow:ellipsis;
}

.calendar-agenda-card__meta{
  display:grid;
  gap:2px;
  color:var(--muted);
  font-size:.67rem;
  line-height:1.35;
}

.calendar-agenda-card__status{
  width:max-content;
  max-width:100%;
  margin-top:2px;
  padding:4px 8px;
  border-radius:999px;
  background:var(--calendar-in-progress-soft);
  color:#555d62;
  font-size:.61rem;
  font-weight:700;
}

.calendar-agenda-card--confirmed .calendar-agenda-card__status{background:var(--calendar-confirmed-soft);color:var(--calendar-confirmed)}
.calendar-agenda-card--preparation .calendar-agenda-card__status{background:var(--calendar-preparation-soft);color:var(--calendar-preparation)}
.calendar-agenda-card--cancelled .calendar-agenda-card__status{background:var(--calendar-cancelled-soft);color:var(--calendar-cancelled)}

.calendar-agenda-empty{
  min-height:190px;
  display:grid;
  place-content:center;
  gap:7px;
  padding:22px;
  text-align:center;
  color:var(--muted);
  border:1px dashed rgba(155,111,69,.28);
  border-radius:16px;
  background:rgba(255,255,255,.5);
}

.calendar-agenda-empty strong{
  color:var(--ink);
  font-size:.84rem;
}

.calendar-agenda-empty span{
  font-size:.7rem;
}

.calendar-month{
  height:100%;
  min-height:0;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  overflow:hidden;
}

.calendar-month__weekdays,
.calendar-month__days{
  display:grid;
  grid-template-columns:repeat(7,minmax(100px,1fr));
}

.calendar-month__weekdays{
  position:sticky;
  top:0;
  z-index:3;
  border-bottom:1px solid var(--line);
  background:#f8f4ee;
}

.calendar-month__weekday{
  padding:11px 10px;
  color:var(--muted);
  text-align:center;
  font-size:.67rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.calendar-month__days{
  min-height:0;
  grid-template-rows:repeat(6,minmax(0,1fr));
  overflow:hidden;
}

.calendar-month__cell{
  min-width:0;
  min-height:0;
  padding:8px;
  overflow:hidden;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:#fff;
  cursor:pointer;
  transition:background .14s ease,box-shadow .14s ease;
}

.calendar-month__cell:nth-child(7n){border-right:0}
.calendar-month__cell:hover{background:#fffaf4}
.calendar-month__cell.is-outside{background:#faf8f5;color:#aaa096}
.calendar-month__cell.is-selected{box-shadow:inset 0 0 0 2px rgba(155,111,69,.58)}
.calendar-month__cell.is-today .calendar-month__number{background:var(--primary-dark);color:#fff}

.calendar-month__cell-head{
  min-height:25px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  margin-bottom:3px;
}

.calendar-month__number{
  min-width:25px;
  height:25px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:inherit;
  font-size:.7rem;
  font-weight:700;
}

.calendar-month__count{
  color:var(--muted);
  font-size:.58rem;
  font-weight:700;
}

.calendar-month__events{
  min-height:0;
  display:grid;
  gap:3px;
  overflow:hidden;
}

.calendar-event{
  width:100%;
  min-width:0;
  display:flex;
  align-items:center;
  gap:5px;
  padding:4px 6px;
  border:0;
  border-left:3px solid var(--calendar-in-progress);
  border-radius:6px;
  background:var(--calendar-in-progress-soft);
  color:#4f565b;
  cursor:pointer;
  font:inherit;
  text-align:left;
}

.calendar-event:hover{filter:brightness(.98)}
.calendar-event--confirmed{border-left-color:var(--calendar-confirmed);background:var(--calendar-confirmed-soft);color:#285b45}
.calendar-event--preparation{border-left-color:var(--calendar-preparation);background:var(--calendar-preparation-soft);color:#285b45}
.calendar-event--cancelled{border-left-color:var(--calendar-cancelled);background:var(--calendar-cancelled-soft);color:#8b3e39;text-decoration:line-through}

.calendar-event__time{
  flex:none;
  font-size:.55rem;
  font-weight:700;
}

.calendar-event__title{
  min-width:0;
  overflow:hidden;
  font-size:.6rem;
  font-weight:700;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.calendar-month__more{
  padding:2px 5px;
  color:var(--primary-dark);
  font-size:.58rem;
  font-weight:700;
}

.calendar-week{
  height:100%;
  min-height:0;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  overflow:hidden;
}

.calendar-week__headers,
.calendar-week__columns{
  display:grid;
  grid-template-columns:repeat(7,minmax(120px,1fr));
}

.calendar-week__headers{
  position:sticky;
  top:0;
  z-index:3;
  border-bottom:1px solid var(--line);
  background:#f8f4ee;
}

.calendar-week__header{
  padding:12px 8px;
  border-right:1px solid var(--line);
  text-align:center;
}

.calendar-week__header:last-child{border-right:0}
.calendar-week__header small{display:block;color:var(--muted);font-size:.62rem;font-weight:700;text-transform:uppercase}
.calendar-week__header strong{width:31px;height:31px;display:grid;place-items:center;margin:3px auto 0;border-radius:50%;font-size:.83rem}
.calendar-week__header.is-today strong{background:var(--primary-dark);color:#fff}
.calendar-week__header.is-selected{background:#fff7ee}

.calendar-week__columns{
  min-height:0;
  overflow:hidden;
}

.calendar-week__column{
  min-width:0;
  min-height:0;
  padding:9px 7px;
  overflow:hidden;
  border-right:1px solid var(--line);
  background:#fff;
  cursor:pointer;
}

.calendar-week__column:last-child{border-right:0}
.calendar-week__column:hover{background:#fffaf4}
.calendar-week__column.is-selected{box-shadow:inset 0 0 0 2px rgba(155,111,69,.42)}

.calendar-week__events{
  height:100%;
  min-height:0;
  display:grid;
  align-content:start;
  gap:6px;
  padding-right:2px;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
}

.calendar-week .calendar-event{
  align-items:flex-start;
  flex-direction:column;
  gap:1px;
  padding:8px;
  border-left-width:4px;
}

.calendar-week .calendar-event__time{font-size:.59rem}
.calendar-week .calendar-event__title{width:100%;font-size:.66rem;white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}

.calendar-week__empty{
  padding:16px 5px;
  color:#b0a69b;
  text-align:center;
  font-size:.62rem;
}

.calendar-day-view{
  min-height:100%;
  background:#fff;
}

.calendar-day-view__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 22px;
  border-bottom:1px solid var(--line);
  background:#f8f4ee;
}

.calendar-day-view__head small{display:block;color:var(--muted);font-size:.67rem;font-weight:700;text-transform:uppercase}
.calendar-day-view__head strong{font-size:1.15rem}
.calendar-day-view__date-number{width:46px;height:46px;display:grid;place-items:center;border-radius:50%;background:var(--primary-dark);color:#fff;font-size:1.05rem;font-weight:700}

.calendar-day-view__list{
  padding:18px 22px 28px;
}

.calendar-day-view__item{
  display:grid;
  grid-template-columns:85px minmax(0,1fr);
  gap:18px;
  min-height:78px;
}

.calendar-day-view__time{
  padding-top:13px;
  color:var(--muted);
  text-align:right;
  font-size:.7rem;
  font-weight:700;
}

.calendar-day-view__content{
  position:relative;
  padding:11px 0 15px 22px;
  border-left:1px solid var(--line);
}

.calendar-day-view__content::before{
  content:"";
  position:absolute;
  top:17px;
  left:-5px;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--calendar-in-progress);
  box-shadow:0 0 0 4px #fff;
}

.calendar-day-view__item--confirmed .calendar-day-view__content::before{background:var(--calendar-confirmed)}
.calendar-day-view__item--preparation .calendar-day-view__content::before{background:var(--calendar-preparation)}
.calendar-day-view__item--cancelled .calendar-day-view__content::before{background:var(--calendar-cancelled)}

.calendar-day-view__card{
  display:block;
  padding:13px 15px;
  border:1px solid var(--line);
  border-left:5px solid var(--calendar-in-progress);
  border-radius:13px;
  background:var(--calendar-in-progress-soft);
}

.calendar-day-view__item--confirmed .calendar-day-view__card{border-left-color:var(--calendar-confirmed);background:var(--calendar-confirmed-soft)}
.calendar-day-view__item--preparation .calendar-day-view__card{border-left-color:var(--calendar-preparation);background:var(--calendar-preparation-soft)}
.calendar-day-view__item--cancelled .calendar-day-view__card{border-left-color:var(--calendar-cancelled);background:var(--calendar-cancelled-soft)}
.calendar-day-view__card strong{display:block;font-size:.83rem;line-height:1.35}
.calendar-day-view__card span{display:block;margin-top:4px;color:var(--muted);font-size:.68rem}

.calendar-day-view__empty{
  min-height:420px;
  display:grid;
  place-content:center;
  gap:6px;
  color:var(--muted);
  text-align:center;
}

.calendar-day-view__empty strong{color:var(--ink);font-size:.9rem}
.calendar-day-view__empty span{font-size:.72rem}

@media (max-width:1200px){
  .dashboard-calendar__layout{
    grid-template-columns:minmax(0,1fr) 285px;
  }
}

@media (max-width:980px){
  .dashboard-calendar__header,
  .dashboard-calendar__toolbar{
    align-items:flex-start;
    flex-direction:column;
  }
  .dashboard-calendar__header-actions,
  .dashboard-calendar__legend{
    justify-content:flex-start;
  }
  .dashboard-calendar__period-nav{
    min-width:0;
  }
  .dashboard-calendar__layout{
    height:auto;
    min-height:0;
    grid-template-columns:1fr;
  }
  .dashboard-calendar__main{
    height:590px;
  }
  .dashboard-calendar__agenda{
    max-height:390px;
    border-top:1px solid var(--line);
    border-left:0;
  }
}

@media (max-width:640px){
  .dashboard-calendar{
    padding:17px;
    border-radius:20px;
  }
  .dashboard-calendar__header-actions{
    width:100%;
  }
  .dashboard-calendar__views{
    flex:1;
  }
  .dashboard-calendar__view{
    flex:1;
    padding-inline:10px;
  }
  .dashboard-calendar__today{
    width:100%;
  }
  .dashboard-calendar__period-nav{
    width:100%;
    justify-content:space-between;
  }
  .dashboard-calendar__period-nav strong{
    min-width:0;
    flex:1;
  }
  .dashboard-calendar__main{
    height:520px;
  }
  .dashboard-calendar__grid{
    min-width:680px;
  }
}



.calendar-agenda-card__staffing {
    display: block;
    width: 100%;
    color: var(--muted);
    font-weight: 700;
}

/* ETAPA 7: e-mail log a hodnocení po eventu */
.email-log-metrics { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 18px; }
.email-log-filters { grid-template-columns: minmax(150px, .8fr) minmax(220px, 1.2fr) minmax(220px, 1.2fr) auto; align-items: end; margin: 20px 0; }
.email-log-table-wrap { max-height: 680px; }
.email-log-table { min-width: 1260px; }
.email-log-table th { position: sticky; top: 0; z-index: 1; background: var(--surface); }
.email-log-error { display: block; max-width: 340px; color: #9b2d38; white-space: normal; }
.candidate-rating-order-note { margin: 0 0 14px; }
.event-rating-list { display: grid; gap: 16px; }
.event-rating-card { padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.event-rating-worker { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
.event-rating-form { display: grid; grid-template-columns: minmax(160px, .55fr) minmax(320px, 1.45fr) auto; align-items: end; gap: 14px; }
.event-rating-form label { margin: 0; }
.event-rating-action { padding-bottom: 1px; }

@media (max-width: 1180px) {
  .email-log-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .email-log-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .event-rating-form { grid-template-columns: 1fr 2fr; }
  .event-rating-action { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .email-log-metrics, .email-log-filters, .event-rating-form { grid-template-columns: 1fr; }
  .event-rating-worker { align-items: flex-start; flex-direction: column; }
  .event-rating-action { grid-column: auto; }
}

/* ETAPA 8: docházka, QR check-in/out a potvrzení hodin */
.attendance-metrics,
.attendance-event-metrics { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.attendance-filter { grid-template-columns: minmax(280px, 1fr) auto; align-items: end; margin: 20px 0; }
.attendance-event-list,
.attendance-self-list,
.attendance-roster { display: grid; gap: 14px; }
.attendance-counter-row { flex-wrap: wrap; }
.attendance-self-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.attendance-self-main { min-width: 0; }
.attendance-self-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.attendance-self-title h3 { margin: 0 0 4px; }
.attendance-self-title p { margin: 0; color: var(--muted); }
.attendance-inline-details { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 14px 0 8px; }
.attendance-inline-details div,
.attendance-check-times div { padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.attendance-inline-details dt,
.attendance-check-times dt { color: var(--muted); font-size: .68rem; font-weight: 700; text-transform: uppercase; }
.attendance-inline-details dd,
.attendance-check-times dd { margin: 3px 0 0; font-weight: 700; }
.compact-alert { margin: 8px 0; padding: 10px 12px; }
.attendance-check-hero { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.attendance-check-times { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 18px; }
.attendance-primary-action { min-height: 58px; font-size: 1rem; }
.attendance-action-buttons { display: grid; gap: 12px; }
.attendance-privacy-note { margin-top: 18px; padding: 15px; border: 1px solid var(--line); border-radius: 14px; background: #f8f4ee; }
.attendance-privacy-note p { margin: 5px 0 0; color: var(--muted); }
.attendance-invalid-card { max-width: 720px; margin: 40px auto; }
.attendance-qr-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); align-items: center; gap: 28px; }
.attendance-qr-code { width: 260px; min-height: 260px; display: grid; place-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.attendance-qr-code canvas { width: 100% !important; height: auto !important; }
.attendance-qr-url { display: block; max-width: 100%; overflow-wrap: anywhere; white-space: normal; }
.attendance-worker-card { padding: 18px; border: 1px solid var(--line); border-left: 5px solid #b8aea2; border-radius: var(--radius); background: #fff; }
.attendance-worker-card--checked_in,
.attendance-worker-card--confirmed { border-left-color: #3d806f; }
.attendance-worker-card--checked_out,
.attendance-worker-card--planned { border-left-color: #b77b37; }
.attendance-worker-card--no_show { border-left-color: #a53c49; }
.attendance-worker-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.attendance-worker-times { display: grid; grid-template-columns: 1.4fr repeat(4, minmax(115px, 1fr)); gap: 10px; margin: 16px 0; }
.attendance-worker-times > div { padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.attendance-worker-times span,
.attendance-worker-times small { display: block; color: var(--muted); font-size: .66rem; font-weight: 700; }
.attendance-worker-times strong { display: block; margin-top: 3px; font-size: .78rem; line-height: 1.35; }
.attendance-manager-actions { display: flex; align-items: end; flex-wrap: wrap; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.attendance-quick-form { display: flex; align-items: end; flex-wrap: wrap; gap: 10px; }
.attendance-quick-form label { min-width: 220px; margin: 0; }
.attendance-live-actions { display: flex; align-items: end; flex-wrap: wrap; gap: 10px; width: 100%; }
.attendance-confirm-form { display: grid; grid-template-columns: minmax(150px, .55fr) minmax(150px, .55fr) minmax(300px, 1.6fr) auto; align-items: end; gap: 12px; width: 100%; }
.attendance-confirm-form label { margin: 0; }
.attendance-manager-note { margin: 12px 0; padding: 12px 14px; border-radius: 12px; background: #f8f4ee; }
.attendance-manager-note p { margin: 5px 0 0; }
.attendance-timeline { max-height: 680px; overflow: auto; padding-right: 8px; }

@media (max-width: 1180px) {
  .attendance-metrics,
  .attendance-event-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .attendance-worker-times { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .attendance-confirm-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .attendance-note-field { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .attendance-metrics,
  .attendance-event-metrics,
  .attendance-filter,
  .attendance-inline-details,
  .attendance-check-times,
  .attendance-worker-times,
  .attendance-confirm-form { grid-template-columns: 1fr; }
  .attendance-self-card { grid-template-columns: auto minmax(0, 1fr); }
  .attendance-self-card > .button { grid-column: 1 / -1; }
  .attendance-self-title,
  .attendance-check-hero,
  .attendance-worker-head { align-items: flex-start; flex-direction: column; }
  .attendance-qr-layout { grid-template-columns: 1fr; }
  .attendance-qr-code { width: min(260px, 100%); margin-inline: auto; }
  .attendance-quick-form,
  .attendance-live-actions { align-items: stretch; flex-direction: column; }
  .attendance-quick-form label { min-width: 0; width: 100%; }
}

@media print {
  .attendance-qr-panel { box-shadow: none; border: 0; }
  .attendance-qr-panel .panel-head,
  .attendance-qr-copy .button-row,
  .sidebar,
  .topbar,
  .attendance-event-hero,
  .attendance-event-metrics,
  .attendance-roster-panel,
  .attendance-history-panel { display: none !important; }
  .app-area,
  .content { margin: 0 !important; padding: 0 !important; }
  .attendance-qr-layout { display: block; text-align: center; }
  .attendance-qr-code { margin: 20mm auto 8mm; border: 0; }
  .attendance-qr-copy .card-list div:not(:nth-child(2)) { display: none; }
}

/* ETAPA 9: reporty pro HR a vedeni */
.report-filter-panel { margin-bottom: 20px; }
.report-filter { grid-template-columns: repeat(3, minmax(150px, .65fr)) minmax(220px, 1.1fr) auto; margin: 20px 0 0; }
.report-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.metric-card--warning { border-color: #e9c98d; background: #fffaf0; }
.metric-card--danger { border-color: #e4afb4; background: #fff7f7; }
.report-section { margin-top: 20px; }
.report-grid { align-items: start; }
.report-table th { white-space: nowrap; }
.report-table td { vertical-align: middle; }
.report-table-wide { min-width: 1080px; }
.report-table-scroll { max-height: 620px; }
.report-table-scroll thead th { position: sticky; top: 0; z-index: 1; background: var(--surface); }
.report-deficit { display: inline-flex; min-width: 38px; justify-content: center; padding: 5px 9px; border-radius: 999px; color: #9b2d38; background: #fdebed; font-weight: 900; }
.report-rate { min-width: 145px; display: grid; grid-template-columns: minmax(70px, 1fr) auto; align-items: center; gap: 9px; }
.report-rate > span { position: relative; height: 8px; overflow: hidden; border-radius: 999px; background: #e6eceb; }
.report-rate > span::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--report-progress, 0%); border-radius: inherit; background: #bb6f58; }
.report-rate strong { font-size: calc(12px * var(--font-scale)); white-space: nowrap; }
.report-expiry-wrap { max-height: 560px; }
.report-worker-detail { border-color: #acd4cf; background: linear-gradient(145deg, #fff, #f4faf9); }

@media (max-width: 1200px) {
  .report-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-filter { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
  .report-filter .filter-actions { grid-column: span 2; }
}

@media (max-width: 620px) {
  .report-metrics,
  .report-filter { grid-template-columns: 1fr; }
  .report-filter .filter-actions { grid-column: auto; }
  .report-filter .filter-actions .button { flex: 1 1 auto; }
}

/* ETAPA 10 · bezpečnost a legislativa */
.compliance-hero { display: flex; align-items: center; justify-content: space-between; gap: 28px; background: linear-gradient(145deg, #fff, #f4faf9); border-color: #b9d7d3; }
.compliance-hero h2 { margin-bottom: 8px; }
.compliance-score { min-width: 150px; padding: 18px 22px; border-radius: 20px; text-align: center; border: 1px solid #cbd8d6; background: #f7faf9; }
.compliance-score strong { display: block; font-size: calc(36px * var(--font-scale)); line-height: 1; }
.compliance-score span { display: block; margin-top: 8px; color: var(--muted); font-size: calc(12px * var(--font-scale)); }
.compliance-score.is-warning { border-color: #e7b8a8; background: #fff5f1; }
.compliance-score.is-warning strong { color: #9d4935; }
.compliance-score.is-ok { border-color: #a9d4c5; background: #f0faf6; }
.compliance-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.compliance-grid { align-items: start; }
.compliance-check-list { display: grid; gap: 10px; }
.compliance-check-list .check-row { align-items: flex-start; }
.compliance-check-list .check-row p { margin: 4px 0 0; color: var(--muted); }
.legal-findings { display: grid; gap: 10px; }
.legal-finding { padding: 14px 16px; border-radius: 14px; border: 1px solid #dbe4e2; background: #f8fbfa; }
.legal-finding.is-open { border-color: #edc1b4; background: #fff7f4; }
.legal-finding.is-ok { border-color: #b9dacd; background: #f4fbf8; }
.legal-finding p { margin: 5px 0 0; color: var(--muted); }
.legal-warning { margin-top: 16px; }
.matrix-scroll { max-height: 620px; }
.compliance-role-table td:last-child { min-width: 440px; }
.permission-cloud { display: flex; flex-wrap: wrap; gap: 5px; }
.permission-cloud code { padding: 3px 6px; border-radius: 6px; background: #eef3f2; font-size: calc(11px * var(--font-scale)); color: #36534f; }
.inline-policy-form { display: grid; grid-template-columns: 90px auto minmax(120px, 1fr) auto auto auto; align-items: center; gap: 9px; }
.inline-policy-form input[type="number"] { width: 90px; }
.candidate-count { color: #345d58; }
.check-control { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 7px; font-weight: 600; }
.check-control input[type="checkbox"] { width: auto; margin: 0; }
.compliance-create-form { grid-template-columns: minmax(240px, 2fr) minmax(180px, 1fr) minmax(170px, 1fr) auto; align-items: end; padding: 18px; margin-bottom: 20px; border: 1px solid #d9e4e2; border-radius: 16px; background: #f8fbfa; }
.compliance-create-form .form-actions { margin: 0; }
.request-stack, .incident-stack { display: grid; gap: 14px; }
.request-card, .incident-card { padding: 18px; border: 1px solid #d8e2e0; border-radius: 17px; background: #fff; }
.request-card.is-overdue, .incident-card.deadline-danger { border-color: #df9d8a; box-shadow: inset 4px 0 0 #b95d47; }
.request-card-head, .incident-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.request-card-head > div, .incident-card-head > div { display: grid; gap: 4px; }
.request-card-head > div:last-child { justify-items: end; }
.request-card-head span, .incident-card-head span { color: var(--muted); }
.request-update-form { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(180px, 1fr) auto auto auto; gap: 12px; align-items: end; padding-top: 14px; border-top: 1px solid #edf1f0; }
.request-update-form .wide { grid-column: 1 / -1; }
.request-actions { margin-top: 14px; }
.request-actions form { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; }
.erase-confirm { display: flex; align-items: center; gap: 8px; font-size: calc(12px * var(--font-scale)); }
.erase-confirm input { width: 135px; }
.incident-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; padding: 0; margin: 0 0 22px; counter-reset: incident-step; list-style: none; }
.incident-steps li { position: relative; padding: 45px 14px 14px; border: 1px solid #dce5e3; border-radius: 15px; background: #f8fbfa; }
.incident-steps li::before { counter-increment: incident-step; content: counter(incident-step); position: absolute; top: 12px; left: 14px; width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: #335d58; color: #fff; font-weight: 800; }
.incident-steps span { display: block; margin-top: 7px; color: var(--muted); font-size: calc(12px * var(--font-scale)); }
.incident-create-form, .backup-test-form { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 18px; margin-bottom: 20px; border: 1px solid #d9e4e2; border-radius: 16px; background: #f8fbfa; }
.incident-create-form .wide, .backup-test-form .wide { grid-column: 1 / -1; }
.incident-create-form .form-actions, .backup-test-form .form-actions { grid-column: 1 / -1; margin: 0; }
.incident-card > p { margin: 0 0 12px; line-height: 1.55; }
.incident-deadline { margin: 12px 0; padding: 10px 12px; border-radius: 10px; background: #f4f7f6; }
.deadline-danger .incident-deadline { background: #fff0eb; color: #8e3e2d; }
.incident-update-form { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(180px, 1fr) auto; gap: 12px; align-items: end; padding-top: 14px; border-top: 1px solid #edf1f0; }
.incident-update-form .wide { grid-column: 1 / -1; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

@media (max-width: 1250px) {
  .compliance-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .incident-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .compliance-create-form, .incident-create-form, .backup-test-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inline-policy-form { grid-template-columns: 90px auto 1fr; }
  .inline-policy-form .check-control, .inline-policy-form .button { grid-row: 2; }
}
@media (max-width: 760px) {
  .compliance-hero, .request-card-head, .incident-card-head { align-items: stretch; flex-direction: column; }
  .compliance-score { min-width: 0; }
  .compliance-metrics, .incident-steps, .compliance-create-form, .incident-create-form, .backup-test-form, .request-update-form, .incident-update-form { grid-template-columns: 1fr; }
  .request-update-form .wide, .incident-update-form .wide, .incident-create-form .wide, .backup-test-form .wide, .incident-create-form .form-actions, .backup-test-form .form-actions { grid-column: auto; }
  .request-card-head > div:last-child { justify-items: start; }
  .inline-policy-form { min-width: 600px; }
}

/* ETAPA 11 · instalovatelná PWA */
.topbar-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.topbar-actions .status-pill { margin-left: 0; }
.pwa-top-install { display: inline-grid; place-items: center; color: var(--primary-dark); border: 1px solid #b9d5d2; background: #fff; }
.pwa-top-install:hover { color: #fff; background: var(--primary); }
.mobile-bottom-nav { display: none; }

.pwa-hero { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(220px, .6fr); align-items: center; gap: 32px; overflow: hidden; background: radial-gradient(circle at 88% 14%, rgba(44,177,166,.18), transparent 27%), linear-gradient(145deg, #fff, #f1faf8); border-color: #b8d9d4; }
.pwa-hero-copy h2 { margin-bottom: 12px; font-size: clamp(calc(26px * var(--font-scale)), calc(3vw * var(--font-scale)), calc(42px * var(--font-scale))); }
.pwa-hero-copy > p { max-width: 780px; color: var(--muted); }
.pwa-install-state { min-height: 22px; margin: 12px 0 0; color: var(--primary-dark); font-size: calc(12px * var(--font-scale)); font-weight: 700; }
.pwa-install-assurance { max-width: 760px; display: flex; align-items: flex-start; gap: 10px; margin-top: 10px; padding: 10px 12px; border: 1px solid #c8dfdb; border-radius: 12px; color: #46615d; background: rgba(255,255,255,.74); font-size: calc(11px * var(--font-scale)); line-height: 1.45; }
.pwa-install-assurance strong { flex: 0 0 auto; color: var(--primary-dark); }
.pwa-phone-preview { justify-self: center; width: 210px; min-height: 360px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; padding: 28px 18px; border: 8px solid #153b39; border-radius: 38px; color: #fff; background: linear-gradient(160deg, #173b57, #123c3a 68%, #0b2928); box-shadow: 0 28px 58px rgba(14, 62, 59, .24); }
.pwa-phone-speaker { position: absolute; width: 76px; height: 7px; margin-top: -310px; border-radius: 99px; background: rgba(255,255,255,.22); }
.pwa-phone-icon { width: 92px; height: 92px; display: grid; place-items: center; margin-bottom: 10px; border-radius: 24px; background: linear-gradient(145deg, #2cb1a6, #147d75); box-shadow: 0 16px 35px rgba(0,0,0,.25); }
.pwa-phone-icon span { font-size: 34px; font-weight: 900; letter-spacing: -.05em; }
.pwa-phone-preview strong { font-size: calc(18px * var(--font-scale)); }
.pwa-phone-preview small { color: #b8d8d5; text-align: center; }
.pwa-status-list { margin-bottom: 18px; }
.pwa-push-message { margin-top: 16px; }
.pwa-push-actions { margin-bottom: 12px; }
.pwa-quick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pwa-quick-card { min-height: 110px; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 18px; border: 1px solid #cfe0dd; border-radius: 15px; text-decoration: none; background: #f8fbfa; transition: transform .15s, border-color .15s, box-shadow .15s; }
.pwa-quick-card:hover { transform: translateY(-2px); border-color: #8fc9c1; box-shadow: 0 12px 26px rgba(18,60,58,.08); }
.pwa-quick-card strong { color: var(--primary-dark); }
.pwa-quick-card span { color: var(--muted); font-size: calc(12px * var(--font-scale)); line-height: 1.5; }
.pwa-instruction-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.pwa-instruction-grid article { position: relative; padding: 22px; border: 1px solid #d4e2e0; border-radius: 17px; background: #f8fbfa; }
.pwa-instruction-grid h3 { margin: 0 0 13px 48px; }
.pwa-instruction-grid ol { margin: 0; padding-left: 22px; color: var(--muted); line-height: 1.75; }
.pwa-step-number { position: absolute; top: 17px; left: 18px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; color: #fff; background: var(--primary); font-weight: 900; }
.pwa-offline-panel { border-style: dashed; }

.pwa-qr-hero { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin-bottom: 22px; background: linear-gradient(145deg, #fff, #f4faf9); }
.pwa-scanner-panel { overflow: hidden; }
.pwa-camera-frame { position: relative; width: 100%; aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden; margin-bottom: 16px; border: 1px solid #bfd3d0; border-radius: 18px; background: #102c2b; }
.pwa-camera-frame video { width: 100%; height: 100%; object-fit: cover; }
.pwa-camera-placeholder { max-width: 320px; padding: 28px; color: #c8dedd; text-align: center; }
.pwa-camera-placeholder > span { width: 74px; height: 74px; display: grid; place-items: center; margin: 0 auto 14px; border: 2px solid #5ea69f; border-radius: 18px; color: #fff; font-size: 24px; font-weight: 900; }
.pwa-camera-placeholder p { margin: 0; }
.pwa-camera-target { position: absolute; width: min(58%, 250px); aspect-ratio: 1; pointer-events: none; border: 3px solid rgba(255,255,255,.88); border-radius: 20px; box-shadow: 0 0 0 999px rgba(0,0,0,.16); }
.pwa-camera-target::before, .pwa-camera-target::after { content: ''; position: absolute; inset: 12px; border-color: #42c7ba; }
.pwa-camera-target::before { border-top: 4px solid #42c7ba; border-bottom: 4px solid #42c7ba; }
.pwa-camera-target::after { border-left: 4px solid #42c7ba; border-right: 4px solid #42c7ba; }
.pwa-manual-qr-form { display: grid; gap: 14px; }
.pwa-manual-qr-form label { display: grid; gap: 7px; font-weight: 700; }
.pwa-manual-qr-form textarea { width: 100%; resize: vertical; }

.pwa-offline-body { display: grid; min-height: 100vh; place-items: center; padding: 24px; }
.pwa-offline-body .public-main { width: min(560px, 100%); }
.pwa-offline-card { text-align: center; }
.pwa-offline-card h1 { margin: 10px 0; }
.pwa-offline-card p { color: var(--muted); }
.pwa-offline-icon { width: 82px; height: 82px; display: grid; place-items: center; margin: 0 auto 18px; border-radius: 24px; color: #fff; background: linear-gradient(145deg, #2cb1a6, #147d75); font-size: 28px; font-weight: 900; }

@media (display-mode: standalone) {
  body { padding-top: env(safe-area-inset-top); }
  .sidebar { padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
  .mobile-bottom-nav { padding-bottom: env(safe-area-inset-bottom); }
  .pwa-top-install { display: none !important; }
}

@media (max-width: 980px) {
  .pwa-hero { grid-template-columns: 1fr; }
  .pwa-phone-preview { display: none; }
}

@media (max-width: 820px) {
  .topbar-actions { margin-left: auto; }
  .pwa-top-install { display: inline-grid; }
  .content { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
  .mobile-bottom-nav { position: fixed; right: 0; bottom: 0; left: 0; z-index: 18; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(62px, 1fr); align-items: stretch; min-height: 68px; padding: 7px 8px calc(7px + env(safe-area-inset-bottom)); border-top: 1px solid #cddbd9; background: rgba(255,255,255,.96); backdrop-filter: blur(18px); box-shadow: 0 -10px 28px rgba(17,60,57,.10); }
  .mobile-bottom-nav a { min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 5px 3px; border-radius: 10px; color: #607774; text-decoration: none; font-size: calc(9px * var(--font-scale)); font-weight: 800; }
  .mobile-bottom-nav a.active { color: var(--primary-dark); background: var(--primary-soft); }
  .mobile-nav-icon { font-size: calc(20px * var(--font-scale)); line-height: 1; }
  .pwa-qr-hero { align-items: stretch; flex-direction: column; }
}

@media (max-width: 620px) {
  .pwa-hero { padding: 22px; }
  .pwa-hero .button-row, .pwa-hero .button { width: 100%; }
  .pwa-install-assurance { display: grid; gap: 4px; }
  .pwa-quick-grid, .pwa-instruction-grid { grid-template-columns: 1fr; }
  .pwa-push-actions { align-items: stretch; flex-direction: column; }
  .pwa-push-actions .button { width: 100%; }
  .pwa-camera-target { width: min(70%, 230px); }
  .mobile-bottom-nav { overflow-x: auto; }
  .mobile-bottom-nav a { min-width: 62px; }
  .button, button, input, select, textarea { min-height: 46px; }
}

/* Upozornění uvnitř otevřené aplikace */
.in-app-notification-center { position: relative; }
.in-app-notification-toggle { position: relative; display: inline-grid; place-items: center; color: var(--primary-dark); border: 1px solid #bfd6d3; background: #fff; }
.in-app-notification-toggle:hover, .in-app-notification-toggle[aria-expanded="true"] { color: #fff; background: var(--primary); }
.in-app-notification-toggle > span:first-child { font-size: calc(16px * var(--font-scale)); line-height: 1; }
.in-app-notification-badge { position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; display: grid; place-items: center; padding: 0 5px; border: 2px solid #fff; border-radius: 999px; color: #fff; background: #d8394c; font-size: 10px; font-weight: 900; line-height: 1; box-shadow: 0 5px 12px rgba(146, 31, 48, .25); }
.in-app-notification-badge[hidden] { display: none; }
.in-app-notification-panel { position: absolute; top: calc(100% + 12px); right: 0; z-index: 60; width: min(410px, calc(100vw - 34px)); max-height: min(620px, 72vh); overflow: hidden; border: 1px solid #cbdcda; border-radius: 18px; background: #fff; box-shadow: 0 24px 60px rgba(18, 57, 55, .22); }
.in-app-notification-panel[hidden] { display: none; }
.in-app-notification-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 17px 18px; border-bottom: 1px solid var(--line); background: #f8fbfa; }
.in-app-notification-panel-head strong { display: block; font-size: calc(15px * var(--font-scale)); }
.in-app-notification-panel-head small { display: block; margin-top: 3px; color: var(--muted); font-size: calc(10px * var(--font-scale)); }
.text-button { min-height: 0; padding: 3px 0; border: 0; color: var(--primary-dark); background: transparent; font: inherit; font-size: calc(10px * var(--font-scale)); font-weight: 800; cursor: pointer; }
.text-button:hover { text-decoration: underline; }
.in-app-notification-list { max-height: min(520px, 62vh); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.in-app-notification-item { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 12px; padding: 14px 16px; border-bottom: 1px solid #edf2f1; color: inherit; text-decoration: none; background: #fff; transition: background .15s; }
.in-app-notification-item:hover { background: #f2f9f7; }
.in-app-notification-item:last-child { border-bottom: 0; }
.in-app-notification-item-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; color: #fff; background: linear-gradient(145deg, #2cb1a6, #147d75); font-size: 18px; box-shadow: 0 8px 18px rgba(20, 125, 117, .18); }
.in-app-notification-item-copy { min-width: 0; display: grid; gap: 4px; }
.in-app-notification-item-copy strong { overflow: hidden; font-size: calc(13px * var(--font-scale)); text-overflow: ellipsis; white-space: nowrap; }
.in-app-notification-item-copy > span { display: -webkit-box; overflow: hidden; color: #4f6663; font-size: calc(11px * var(--font-scale)); line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.in-app-notification-item-copy small { color: var(--muted); font-size: calc(9px * var(--font-scale)); }
.in-app-notification-empty { margin: 0; padding: 28px 18px; color: var(--muted); text-align: center; font-size: calc(12px * var(--font-scale)); }

.in-app-toast-stack { position: fixed; top: calc(18px + env(safe-area-inset-top)); right: 20px; z-index: 100; width: min(410px, calc(100vw - 40px)); display: grid; gap: 12px; pointer-events: none; }
.in-app-toast { display: grid; grid-template-columns: 48px minmax(0, 1fr) 30px; gap: 13px; align-items: start; padding: 16px; border: 1px solid #afd6d1; border-left: 5px solid var(--primary); border-radius: 18px; background: rgba(255,255,255,.98); box-shadow: 0 24px 58px rgba(16, 63, 59, .26); backdrop-filter: blur(16px); opacity: 0; transform: translateY(-14px) scale(.97); transition: opacity .2s ease, transform .2s ease; pointer-events: auto; }
.in-app-toast.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.in-app-toast.is-leaving { opacity: 0; transform: translateY(-10px) scale(.98); }
.in-app-toast-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; color: #fff; background: linear-gradient(145deg, #2cb1a6, #147d75); font-size: 20px; box-shadow: 0 10px 22px rgba(20, 125, 117, .22); }
.in-app-toast-copy { min-width: 0; }
.in-app-toast-copy small { display: block; margin-bottom: 3px; color: var(--primary-dark); font-size: calc(9px * var(--font-scale)); font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.in-app-toast-copy strong { display: block; font-size: calc(15px * var(--font-scale)); line-height: 1.3; }
.in-app-toast-copy p { margin: 6px 0 9px; color: #4c625f; font-size: calc(12px * var(--font-scale)); line-height: 1.5; }
.in-app-toast-open { color: var(--primary-dark); font-size: calc(11px * var(--font-scale)); font-weight: 850; text-decoration: none; }
.in-app-toast-open:hover { text-decoration: underline; }
.in-app-toast-close { width: 30px; min-height: 30px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 9px; color: #607572; background: transparent; font-size: 22px; line-height: 1; cursor: pointer; }
.in-app-toast-close:hover { color: var(--primary-dark); background: #eef5f4; }

@media (max-width: 820px) {
  .in-app-notification-panel { position: fixed; top: calc(76px + env(safe-area-inset-top)); right: 12px; left: 12px; width: auto; max-height: calc(100vh - 160px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  .in-app-notification-list { max-height: calc(100vh - 245px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  .in-app-toast-stack { top: calc(82px + env(safe-area-inset-top)); right: 12px; left: 12px; width: auto; }
}

@media (max-width: 560px) {
  .in-app-notification-panel-head { align-items: stretch; flex-direction: column; gap: 6px; }
  .text-button { align-self: flex-start; min-height: 30px; }
  .in-app-toast { grid-template-columns: 42px minmax(0, 1fr) 28px; gap: 10px; padding: 13px; }
  .in-app-toast-icon { width: 42px; height: 42px; border-radius: 13px; }
}

/* Živá synchronizace dat */
.live-sync-status { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 11px; border: 1px solid #c8dcd9; border-radius: 999px; color: #355b57; background: #f7fbfa; font-size: calc(10px * var(--font-scale)); font-weight: 800; white-space: nowrap; }
.live-sync-status > span { width: 8px; height: 8px; border-radius: 50%; background: #28a17c; box-shadow: 0 0 0 4px rgba(40,161,124,.12); }
.live-sync-status.is-checking > span { animation: live-sync-pulse 1s ease-in-out infinite; }
.live-sync-status.is-offline { color: #7d5b25; border-color: #e8d4a7; background: #fff8e8; }
.live-sync-status.is-offline > span { background: #c4872a; box-shadow: 0 0 0 4px rgba(196,135,42,.12); }
.live-sync-status.is-pending { color: #8c2f3b; border-color: #e2b5bc; background: #fff2f4; }
.live-sync-status.is-pending > span { background: #c53b4e; box-shadow: 0 0 0 4px rgba(197,59,78,.12); }
@keyframes live-sync-pulse { 0%,100% { opacity: .45; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.15); } }
.live-update-banner { position: sticky; top: 10px; z-index: 16; display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; padding: 14px 16px; border: 1px solid #e2b5bc; border-left: 5px solid #c53b4e; border-radius: 14px; background: #fff7f8; box-shadow: 0 10px 30px rgba(92,36,44,.12); }
.live-update-banner[hidden] { display: none; }
.live-update-banner div { min-width: 0; display: grid; gap: 3px; }
.live-update-banner strong { color: #7d2733; font-size: calc(13px * var(--font-scale)); }
.live-update-banner span { color: #76565a; font-size: calc(11px * var(--font-scale)); line-height: 1.45; }

/* Hodnocení přímo v docházkové listině */
.attendance-rating-block { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.attendance-rating-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.attendance-rating-head > div { min-width: 0; }
.attendance-rating-head strong { display: block; font-size: calc(13px * var(--font-scale)); }
.attendance-rating-head small { display: block; margin-top: 3px; color: var(--muted); font-size: calc(10px * var(--font-scale)); }
.attendance-rating-form { display: grid; grid-template-columns: minmax(150px,.45fr) minmax(280px,1.55fr) auto; align-items: end; gap: 12px; }
.attendance-rating-form label { margin: 0; }

@media (max-width: 980px) {
  .attendance-rating-form { grid-template-columns: 1fr 2fr; }
  .attendance-rating-form .button { grid-column: 1 / -1; justify-self: start; }
}

@media (max-width: 820px) {
  .live-sync-status { display: none; }
}

@media (max-width: 620px) {
  .live-update-banner { position: static; align-items: stretch; flex-direction: column; }
  .live-update-banner .button { width: 100%; }
  .attendance-rating-head { align-items: flex-start; flex-direction: column; }
  .attendance-rating-form { grid-template-columns: 1fr; }
  .attendance-rating-form .button { grid-column: auto; width: 100%; }
}

/* Rozcestník pozvánek brigádníka */
.invitation-overview-panel { background: linear-gradient(145deg, #fff, #f4faf9); }
.invitation-hub { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.invitation-hub-card { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 16px; border: 1px solid var(--line); border-radius: 16px; color: inherit; background: #fff; text-decoration: none; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.invitation-hub-card:hover { transform: translateY(-2px); border-color: #9dcac5; box-shadow: 0 12px 26px rgba(21, 91, 85, .1); }
.invitation-hub-card > span { color: var(--muted); font-size: calc(10px * var(--font-scale)); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.invitation-hub-card > strong { grid-row: 1 / 3; grid-column: 2; font-size: calc(28px * var(--font-scale)); color: var(--primary-dark); }
.invitation-hub-card > small { color: #506865; font-size: calc(10px * var(--font-scale)); line-height: 1.4; }
.invitation-hub-card--success { border-color: #abd5cc; background: #f4fbf8; }
.invitation-hub-card--warning { border-color: #ead3a0; background: #fffaf0; }
.invitation-section { scroll-margin-top: 24px; }

/* Schválený výplatní podklad v docházce */
.attendance-payment-statement { margin-top: 16px; padding: 16px; border: 1px solid #abd5cc; border-radius: 15px; background: linear-gradient(145deg, #f8fdfb, #eef8f5); }
.attendance-payment-statement--self { margin-top: 14px; }
.attendance-payment-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.attendance-payment-head > div { min-width: 0; }
.attendance-payment-head .eyebrow { display: block; margin-bottom: 2px; }
.attendance-payment-head strong { display: block; font-size: calc(14px * var(--font-scale)); }
.attendance-payment-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 10px; }
.attendance-payment-grid > div { min-width: 0; padding: 10px 12px; border: 1px solid rgba(171, 213, 204, .75); border-radius: 12px; background: rgba(255,255,255,.78); }
.attendance-payment-grid dt { margin-bottom: 4px; color: var(--muted); font-size: calc(9px * var(--font-scale)); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.attendance-payment-grid dd { margin: 0; overflow-wrap: anywhere; font-size: calc(12px * var(--font-scale)); font-weight: 800; }
.attendance-payment-grid .attendance-payment-total { border-color: #78bcb2; background: #fff; }
.attendance-payment-grid .attendance-payment-total dd { color: var(--primary-dark); font-size: calc(14px * var(--font-scale)); }
.attendance-payment-statement > .muted { display: block; line-height: 1.45; }

/* Nápověda k retenčním pravidlům */
.retention-guide { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.retention-guide article { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 15px; border: 1px solid var(--line); border-radius: 15px; background: #f8fbfa; }
.retention-guide article > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--primary); font-weight: 900; }
.retention-guide strong { display: block; margin-bottom: 4px; }
.retention-guide p { margin: 0; color: var(--muted); font-size: calc(10px * var(--font-scale)); line-height: 1.5; }
.retention-warning { margin-bottom: 16px; }
.retention-footnote { margin: 14px 0 0; line-height: 1.55; }

@media (max-width: 1100px) {
  .invitation-hub { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .attendance-payment-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .retention-guide { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .invitation-hub { grid-template-columns: 1fr; }
  .attendance-payment-head { align-items: flex-start; flex-direction: column; }
  .attendance-payment-grid { grid-template-columns: 1fr; }
}

/* HR hodinová sazba pro výplatní podklady */
.event-hourly-rate-cell{min-width:250px}
.event-hourly-rate-current{display:flex;flex-wrap:wrap;align-items:center;gap:7px 10px}
.event-hourly-rate-current>strong{white-space:nowrap}
.event-hourly-rate-form{display:grid;grid-template-columns:minmax(125px,1fr) auto;align-items:end;gap:8px;margin-top:10px}
.event-hourly-rate-form label{margin:0}
.event-hourly-rate-form label>span{font-size:calc(9px * var(--font-scale))}
.event-hourly-rate-form input{min-width:120px;padding:8px 10px}
.event-hourly-rate-form .button-row{gap:6px;flex-wrap:nowrap}
@media(max-width:720px){.event-hourly-rate-form{grid-template-columns:1fr}.event-hourly-rate-form .button-row{flex-wrap:wrap}}

/* Povinná aktualizace mobilní aplikace */
body.pwa-update-required { overflow: hidden; }
.pwa-required-update { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: max(20px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); background: rgba(10, 36, 34, .74); backdrop-filter: blur(8px); }
.pwa-required-update[hidden] { display: none; }
.pwa-required-update-card { width: min(520px, 100%); display: grid; gap: 14px; padding: 26px; border: 1px solid #abd5cc; border-radius: 22px; background: #fff; box-shadow: 0 28px 80px rgba(4, 27, 25, .35); }
.pwa-required-update-card h2 { margin: 0; color: var(--primary-dark); font-size: calc(24px * var(--font-scale)); line-height: 1.15; }
.pwa-required-update-card p { margin: 0; color: #4c6663; line-height: 1.55; }
.pwa-required-update-version { padding: 11px 13px; border: 1px solid var(--line); border-radius: 12px; background: #f5faf9; color: #49635f; font-size: calc(11px * var(--font-scale)); }
.pwa-required-update-card .button { width: 100%; min-height: 48px; }
.pwa-required-update-card small { color: var(--muted); text-align: center; line-height: 1.45; }
@media (max-width: 560px) {
  .pwa-required-update-card { padding: 22px 18px; border-radius: 18px; }
  .pwa-required-update-card h2 { font-size: calc(21px * var(--font-scale)); }
}


/* Ruční řízení e-mailové fronty */
.mail-queue-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 16px 0 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: #f7fbfa; }
.mail-queue-actions > div:first-child { min-width: 0; }
.mail-queue-actions strong { display: block; margin-bottom: 3px; }
.mail-queue-actions small { display: block; color: var(--muted); line-height: 1.45; }
.mail-queue-actions .button-row { justify-content: flex-end; flex-wrap: wrap; }
.mail-queue-actions button:disabled { opacity: .48; cursor: not-allowed; }
.email-log-table .worker-select-column { width: 42px; }

/* Schválení nové sazby z Eventformu */
.event-hourly-rate-pending { display: grid; gap: 3px; margin-top: 8px; padding: 9px 11px; border: 1px solid #ead3a0; border-radius: 11px; background: #fffaf0; }
.event-hourly-rate-pending strong { color: #79571a; font-size: calc(11px * var(--font-scale)); }
.event-hourly-rate-pending small { color: #7a6843; line-height: 1.4; }

@media (max-width: 840px) {
  .mail-queue-actions { align-items: stretch; flex-direction: column; }
  .mail-queue-actions .button-row { justify-content: flex-start; }
}

/* Eventy a pozvánky – oddělené provozní přehledy */
.event-section-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}
.event-section-tab {
  display: grid;
  gap: 4px;
  padding: 15px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--muted);
  background: var(--surface);
  text-decoration: none;
}
.event-section-tab span { color: var(--ink); font-size: calc(14px * var(--font-scale)); font-weight: 800; }
.event-section-tab small { font-size: calc(10px * var(--font-scale)); }
.event-section-tab:hover,
.event-section-tab.active { border-color: #8fc9c3; background: #eef8f6; }
.event-section-tab.active { box-shadow: inset 0 -3px 0 var(--primary); }
.event-section-tab.active span { color: var(--primary-dark); }

.event-staffing-todo { padding: 20px; border-color: #d8c68b; background: linear-gradient(150deg, #fffef9, #fff); }
.event-staffing-todo__head { align-items: flex-start; gap: 14px; }
.event-staffing-todo__head h2 { margin-bottom: 4px; }
.event-staffing-todo__head .muted { max-width: 980px; margin-top: 6px; line-height: 1.45; }
.event-staffing-todo__summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
.event-staffing-todo__summary article { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 50px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.event-staffing-todo__summary span { display: block; color: var(--muted); font-size: calc(9px * var(--font-scale)); line-height: 1.25; }
.event-staffing-todo__summary strong { display: block; flex: 0 0 auto; margin: 0; font-size: calc(20px * var(--font-scale)); line-height: 1; }
.event-staffing-todo__summary-order { border-color: #e1b6ab !important; background: #fff8f6 !important; }
.event-staffing-todo__empty { margin: 0; }
.event-staffing-todo__empty p { margin-bottom: 0; }
.event-staffing-todo__list { display: grid; gap: 10px; }
.event-staffing-todo__event { overflow: hidden; border: 1px solid #e0d5b2; border-radius: 13px; background: #fff; box-shadow: 0 6px 18px rgba(77, 58, 11, .045); }
.event-staffing-todo__event-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 11px 13px; background: #fffdf6; }
.event-staffing-todo__event-main h3 { margin: 2px 0 0; font-size: calc(15px * var(--font-scale)); }
.event-staffing-todo__event-main p { margin: 4px 0 0; color: var(--muted); font-size: calc(10px * var(--font-scale)); line-height: 1.35; }
.event-staffing-todo__event-action { display: grid; grid-template-columns: auto auto; gap: 3px 7px; align-items: center; min-width: 0; text-align: right; }
.event-staffing-todo__event-action strong { display: block; margin: 0; font-size: calc(10px * var(--font-scale)); white-space: nowrap; }
.event-staffing-todo__event-action .badge { grid-column: 1 / -1; justify-self: end; }
.event-staffing-todo__order-number { display: block; font-size: calc(27px * var(--font-scale)); font-weight: 800; line-height: .95; color: var(--danger); }
.event-staffing-todo__event-totals { display: flex; flex-wrap: wrap; gap: 5px; padding: 7px 13px; border-top: 1px solid #eee5ca; border-bottom: 1px solid #eee5ca; background: #fff; }
.event-staffing-todo__event-totals span { padding: 4px 7px; border-radius: 999px; background: #f3f7f6; color: var(--muted); font-size: calc(9px * var(--font-scale)); line-height: 1.2; }
.event-staffing-todo__event-totals span strong { color: var(--ink); }
.event-staffing-todo__event-totals .has-question { background: #fff1d8; color: #725111; }
.event-staffing-todo__positions { display: grid; gap: 6px; padding: 9px 13px; background: #fcfdfd; }
.event-staffing-todo__position { display: grid; grid-template-columns: minmax(150px, 1.25fr) repeat(4, minmax(72px, .5fr)) minmax(145px, .85fr); gap: 6px; align-items: stretch; }
.event-staffing-todo__position > div { min-width: 0; padding: 7px 8px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.event-staffing-todo__position span { display: block; color: var(--muted); font-size: calc(8px * var(--font-scale)); text-transform: uppercase; letter-spacing: .04em; line-height: 1.2; }
.event-staffing-todo__position strong { display: block; margin-top: 3px; overflow-wrap: anywhere; font-size: calc(12px * var(--font-scale)); line-height: 1.15; }
.event-staffing-todo__position small { display: block; margin-top: 2px; color: #725111; font-size: calc(8px * var(--font-scale)); line-height: 1.25; }
.event-staffing-todo__position--order .event-staffing-todo__position-order { border-color: #e1b6ab; background: #fff8f6; }
.event-staffing-todo__position-order strong { font-size: calc(18px * var(--font-scale)); color: var(--danger); }
.event-staffing-todo__position-order .button { margin-top: 5px; }
.event-staffing-todo__buttons { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 7px; padding: 0 13px 10px; background: #fcfdfd; }

.event-invitation-metrics { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.event-invitation-filter { grid-template-columns: minmax(260px, 1.2fr) minmax(190px, .8fr) minmax(190px, .8fr) auto; }
.event-invitation-event-list { display: grid; gap: 14px; margin-top: 22px; }
.event-invitation-event { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 8px 22px rgba(9, 54, 50, .04); }
.event-invitation-event[open] { border-color: #9ccdc7; box-shadow: 0 12px 30px rgba(9, 54, 50, .08); }
.event-invitation-event-summary { position: relative; display: grid; grid-template-columns: minmax(280px, 1.25fr) minmax(150px, .42fr) minmax(280px, .9fr) 28px; gap: 18px; align-items: center; min-height: 104px; padding: 18px 20px; cursor: pointer; list-style: none; background: linear-gradient(145deg, #fff, #f5faf9); }
.event-invitation-event-summary::-webkit-details-marker { display: none; }
.event-invitation-event-summary:hover { background: #f0f8f6; }
.event-invitation-event[open] > .event-invitation-event-summary { border-bottom: 1px solid var(--line); background: #eef8f6; }
.event-invitation-event-main { min-width: 0; }
.event-invitation-event-main h3 { margin: 4px 0 0; overflow-wrap: anywhere; font-size: calc(17px * var(--font-scale)); }
.event-invitation-event-main p { margin: 7px 0 0; color: var(--muted); font-size: calc(11px * var(--font-scale)); }
.event-invitation-event-owner { min-width: 0; }
.event-invitation-event-owner span { display: block; color: var(--muted); font-size: calc(9px * var(--font-scale)); text-transform: uppercase; letter-spacing: .06em; }
.event-invitation-event-owner strong { display: block; margin-top: 6px; overflow-wrap: anywhere; font-size: calc(12px * var(--font-scale)); }
.event-invitation-event-counts { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 7px; }
.event-invitation-event-toggle { position: relative; width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 50%; background: #fff; }
.event-invitation-event-toggle::before,
.event-invitation-event-toggle::after { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 2px; border-radius: 2px; background: var(--primary-dark); transform: translate(-50%, -50%); transition: transform .18s ease; }
.event-invitation-event-toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
.event-invitation-event[open] .event-invitation-event-toggle::after { transform: translate(-50%, -50%) rotate(0deg); }
.event-invitation-event-body { padding: 18px; background: #fbfdfd; }
.event-invitation-event-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.event-invitation-event-toolbar p { margin: 0; }
.event-invitation-worker-list { display: grid; gap: 14px; }
.event-invitation-card { padding: 17px; border: 1px solid var(--line); border-radius: 15px; background: linear-gradient(145deg, #fff, #f7fbfa); }
.event-invitation-card--inactive { background: #fcf8f8; border-color: #ead4d6; }
.event-invitation-worker-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.event-invitation-worker-head h4 { margin: 4px 0 0; font-size: calc(15px * var(--font-scale)); }
.event-invitation-login-email { display: inline-block; margin-top: 5px; overflow-wrap: anywhere; color: var(--primary-dark); font-size: calc(11px * var(--font-scale)); }
.event-invitation-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 15px; }
.event-invitation-summary-grid > div { min-width: 0; padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.event-invitation-summary-grid span,
.event-individual-rate-info > span { display: block; color: var(--muted); font-size: calc(9px * var(--font-scale)); text-transform: uppercase; letter-spacing: .06em; }
.event-invitation-summary-grid strong { display: block; margin-top: 5px; overflow-wrap: anywhere; font-size: calc(11px * var(--font-scale)); }
.event-individual-rate-box { display: grid; grid-template-columns: minmax(250px, .72fr) minmax(420px, 1.28fr); gap: 18px; align-items: end; margin-top: 14px; padding: 15px; border: 1px solid #b8d9d5; border-radius: 13px; background: #f2faf8; }
.event-individual-rate-info { display: grid; gap: 7px; min-width: 0; }
.event-individual-rate-info > strong { font-size: calc(16px * var(--font-scale)); }
.event-individual-rate-info small,
.event-individual-rate-inactive small { color: var(--muted); line-height: 1.45; }
.event-individual-rate-form { display: grid; grid-template-columns: minmax(170px, .65fr) minmax(310px, 1.35fr); gap: 10px; align-items: end; }
.event-individual-rate-form label { margin: 0; }
.event-individual-rate-form .button-row { align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.event-individual-rate-inactive { display: grid; justify-items: end; gap: 7px; text-align: right; }
.event-invitation-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 9px; margin-top: 12px; }
.text-danger { color: #a92734; }

@media (max-width: 1250px) {
  .event-staffing-todo__position { grid-template-columns: minmax(170px, 1.3fr) repeat(2, minmax(78px, .55fr)) minmax(150px, .85fr); }
  .event-staffing-todo__position-name { grid-column: span 1; }
  .event-invitation-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .event-invitation-event-summary { grid-template-columns: minmax(260px, 1fr) minmax(150px, .45fr) minmax(220px, .8fr) 28px; }
  .event-invitation-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .event-individual-rate-box { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .event-staffing-todo { padding: 16px; }
  .event-staffing-todo__summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .event-staffing-todo__event-head { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
  .event-staffing-todo__event-action { min-width: 0; text-align: right; }
  .event-staffing-todo__position { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .event-staffing-todo__position-name,
  .event-staffing-todo__position-order { grid-column: 1 / -1; }
  .event-staffing-todo__position-order { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; align-items: center; }
  .event-staffing-todo__position-order > span,
  .event-staffing-todo__position-order > small { grid-column: 1; }
  .event-staffing-todo__position-order > strong { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
  .event-staffing-todo__position-order > .button { grid-column: 1 / -1; width: 100%; }
  .event-section-tabs,
  .event-invitation-filter,
  .event-invitation-summary-grid,
  .event-individual-rate-form { grid-template-columns: 1fr; }
  .event-invitation-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .event-invitation-event-summary { grid-template-columns: 1fr 28px; gap: 12px; }
  .event-invitation-event-owner,
  .event-invitation-event-counts { grid-column: 1 / -1; }
  .event-invitation-event-counts { justify-content: flex-start; }
  .event-invitation-event-toggle { grid-column: 2; grid-row: 1; }
  .event-invitation-event-toolbar,
  .event-invitation-worker-head { align-items: stretch; flex-direction: column; }
  .event-invitation-event-toolbar .button,
  .event-individual-rate-form .button,
  .event-invitation-actions form,
  .event-invitation-actions .button { width: 100%; }
  .event-individual-rate-form .button-row,
  .event-invitation-actions { width: 100%; justify-content: stretch; }
  .event-individual-rate-inactive { justify-items: start; text-align: left; }
}
@media (max-width: 520px) {
  .event-staffing-todo { padding: 12px; border-radius: 14px; }
  .event-staffing-todo__head { gap: 8px; }
  .event-staffing-todo__head .muted { display: none; }
  .event-staffing-todo__head .badge { font-size: calc(9px * var(--font-scale)); }
  .event-staffing-todo__summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 9px 0; }
  .event-staffing-todo__summary article { min-height: 44px; padding: 7px 8px; }
  .event-staffing-todo__summary span { font-size: calc(8px * var(--font-scale)); }
  .event-staffing-todo__summary strong { font-size: calc(18px * var(--font-scale)); }
  .event-staffing-todo__list { gap: 8px; }
  .event-staffing-todo__event { border-radius: 11px; }
  .event-staffing-todo__event-head { grid-template-columns: minmax(0, 1fr) auto; gap: 7px; padding: 9px 10px; }
  .event-staffing-todo__event-main .eyebrow { font-size: calc(8px * var(--font-scale)); }
  .event-staffing-todo__event-main h3 { font-size: calc(14px * var(--font-scale)); }
  .event-staffing-todo__event-main p { margin-top: 3px; font-size: calc(9px * var(--font-scale)); }
  .event-staffing-todo__event-action { gap: 2px 5px; }
  .event-staffing-todo__event-action strong { font-size: calc(8px * var(--font-scale)); }
  .event-staffing-todo__order-number { font-size: calc(24px * var(--font-scale)); }
  .event-staffing-todo__event-totals { gap: 4px; padding: 6px 10px; }
  .event-staffing-todo__event-totals span { padding: 3px 6px; font-size: calc(8px * var(--font-scale)); }
  .event-staffing-todo__positions { gap: 5px; padding: 7px 10px; }
  .event-staffing-todo__position { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
  .event-staffing-todo__position > div { padding: 6px 7px; border-radius: 8px; }
  .event-staffing-todo__position-name,
  .event-staffing-todo__position-order { grid-column: 1 / -1; }
  .event-staffing-todo__position-name { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .event-staffing-todo__position-name strong { margin: 0; text-align: right; }
  .event-staffing-todo__position-order { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; align-items: center; }
  .event-staffing-todo__position-order > span,
  .event-staffing-todo__position-order > small { grid-column: 1; }
  .event-staffing-todo__position-order > strong { grid-column: 2; grid-row: 1 / span 2; margin: 0; font-size: calc(20px * var(--font-scale)); }
  .event-staffing-todo__position-order > .button { grid-column: 1 / -1; width: 100%; margin-top: 4px; }
  .event-staffing-todo__buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 0 10px 8px; }
  .event-staffing-todo__buttons .button { width: 100%; padding-left: 8px; padding-right: 8px; }
  .event-invitation-metrics { grid-template-columns: 1fr; }
  .event-invitation-event-summary { min-height: 0; padding: 15px; }
  .event-invitation-event-body { padding: 12px; }
  .event-invitation-card { padding: 13px; }
  .event-individual-rate-box { padding: 12px; }
}

.pwa-ios-install-guide { position: fixed; inset: 0; z-index: 10020; display: grid; place-items: center; padding: max(20px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); background: rgba(10, 36, 34, .76); backdrop-filter: blur(8px); }
.pwa-ios-install-guide[hidden] { display: none; }
.pwa-ios-install-guide-card { position: relative; width: min(580px, 100%); max-height: min(820px, calc(100vh - 32px)); overflow: auto; display: grid; gap: 16px; padding: 28px; border: 1px solid #abd5cc; border-radius: 24px; background: #fff; box-shadow: 0 28px 80px rgba(4, 27, 25, .38); }
.pwa-ios-install-guide-card h2 { margin: 0; color: var(--primary-dark); font-size: calc(25px * var(--font-scale)); line-height: 1.15; }
.pwa-ios-install-note { margin: 0; color: #49635f; line-height: 1.55; }
.pwa-ios-install-assurance { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px; border: 1px solid #b8d9d4; border-radius: 15px; background: #f2faf8; }
.pwa-ios-install-assurance-icon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 15px; color: #fff; background: linear-gradient(145deg, #2cb1a6, #147d75); font-weight: 900; letter-spacing: -.04em; box-shadow: 0 8px 18px rgba(20,125,117,.18); }
.pwa-ios-install-assurance > span:last-child { min-width: 0; display: grid; gap: 3px; }
.pwa-ios-install-assurance strong { color: var(--primary-dark); }
.pwa-ios-install-assurance small { color: var(--muted); line-height: 1.4; }
.pwa-ios-install-steps { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: ios-install-step; }
.pwa-ios-install-steps li { position: relative; display: grid; gap: 3px; min-height: 54px; padding: 11px 12px 11px 54px; border: 1px solid var(--line); border-radius: 14px; background: #f7fbfa; counter-increment: ios-install-step; }
.pwa-ios-install-steps li::before { content: counter(ios-install-step); position: absolute; left: 12px; top: 12px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 700; }
.pwa-ios-install-steps strong { color: var(--primary-dark); }
.pwa-ios-install-steps span { color: var(--muted); font-size: calc(12px * var(--font-scale)); line-height: 1.45; }
.pwa-ios-install-guide-card > .button { width: 100%; min-height: 48px; }
.pwa-ios-install-guide-card > small { color: var(--muted); text-align: center; line-height: 1.45; }
.pwa-ios-install-close { position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--primary-dark); font-size: 24px; line-height: 1; cursor: pointer; }
.pwa-push-first-launch { outline: 3px solid rgba(21, 139, 126, .18); box-shadow: 0 18px 52px rgba(18, 93, 84, .14); }
@media (max-width: 640px) {
  .pwa-ios-install-guide-card { padding: 24px 18px 20px; border-radius: 20px; }
  .pwa-ios-install-guide-card h2 { padding-right: 34px; font-size: calc(22px * var(--font-scale)); }
  .pwa-ios-install-steps li { padding-left: 50px; }
}

/* 2026-08 grouped navigation, compact Eventform-style login and dashboard analytics */
.nav { gap: 7px; margin-top: 30px; }
.nav-primary-link { flex: 0 0 auto; font-weight: 800; }
.nav-group {
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid rgba(199, 220, 217, .09);
  border-radius: 13px;
  background: rgba(255,255,255,.025);
}
.nav-group[open] { border-color: rgba(126, 225, 215, .15); background: rgba(255,255,255,.045); }
.nav-group summary {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 13px;
  color: #c7dcd9;
  font-size: calc(12px * var(--font-scale));
  font-weight: 800;
  letter-spacing: .035em;
  list-style: none;
  cursor: pointer;
  user-select: none;
  transition: color .18s ease, background .18s ease;
}
.nav-group summary::-webkit-details-marker { display: none; }
.nav-group summary:hover,
.nav-group[open] > summary { color: #fff; background: rgba(255,255,255,.055); }
.nav-group-chevron {
  position: relative;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border-radius: 6px;
  background: rgba(255,255,255,.06);
}
.nav-group-chevron::before,
.nav-group-chevron::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 1.5px;
  border-radius: 999px;
  background: currentColor;
  transition: transform .18s ease;
}
.nav-group-chevron::before { transform: translate(-72%, -50%) rotate(42deg); }
.nav-group-chevron::after { transform: translate(-28%, -50%) rotate(-42deg); }
.nav-group[open] .nav-group-chevron::before { transform: translate(-72%, -50%) rotate(-42deg); }
.nav-group[open] .nav-group-chevron::after { transform: translate(-28%, -50%) rotate(42deg); }
.nav-group-items { display: grid; gap: 2px; padding: 3px 5px 6px; }
.nav-group-items a {
  min-height: 39px;
  gap: 10px;
  padding: 8px 10px 8px 12px;
  border-radius: 9px;
  font-size: calc(12px * var(--font-scale));
}
.nav-group-items a::before { content: none; }
.nav-group-items a > svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: #81aaa6;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: color .18s ease, stroke .18s ease, transform .18s ease;
}
.nav-group-items a:hover > svg,
.nav-group-items a.active > svg {
  stroke: #7ee1d7;
  transform: translateY(-1px);
}
.nav-group-items a.active > svg { filter: drop-shadow(0 0 5px rgba(126, 225, 215, .26)); }

.personal-login-page {
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 12%, rgba(44,177,166,.14), transparent 29%),
    radial-gradient(circle at 92% 88%, rgba(20,125,117,.10), transparent 31%),
    #edf5f3;
}
.personal-login-page .public-main {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 20px;
}
.personal-login-shell {
  position: relative;
  z-index: 1;
  width: min(1120px, 100%);
  height: min(700px, calc(100vh - 40px));
  height: min(700px, calc(100dvh - 40px));
  min-height: 560px;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(400px, .92fr);
  overflow: hidden;
  border: 1px solid rgba(13, 77, 72, .13);
  border-radius: 30px;
  background: #fff;
  box-shadow: 0 30px 80px rgba(10, 58, 54, .17);
  animation: personalLoginShellIn .55s cubic-bezier(.2,.75,.25,1) both;
}
.personal-login-intro {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 34px 38px;
  color: #fff;
  background:
    radial-gradient(circle at 82% 18%, rgba(83,211,198,.20), transparent 27%),
    linear-gradient(145deg, #0c3331 0%, #124743 58%, #17665f 100%);
}
.personal-login-intro::after {
  content: '';
  position: absolute;
  right: -130px;
  bottom: -170px;
  width: 420px;
  height: 420px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 50%;
  box-shadow: 0 0 0 48px rgba(255,255,255,.025), 0 0 0 96px rgba(255,255,255,.018);
  pointer-events: none;
}
.personal-login-brand {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 13px;
  animation: personalLoginFadeUp .55s .08s both;
}
.personal-login-brand__mark {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(145deg, #38bdb1, #147d75);
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -.04em;
}
.personal-login-brand__text { display: grid; gap: 2px; }
.personal-login-brand__text small {
  color: #7ee1d7;
  font-size: calc(9px * var(--font-scale));
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.personal-login-brand__text strong { font-size: calc(14px * var(--font-scale)); line-height: 1.2; }
.personal-login-intro__decoration { position: absolute; inset: 0; pointer-events: none; }
.personal-login-intro__decoration span {
  position: absolute;
  border: 1px solid rgba(126,225,215,.18);
  border-radius: 50%;
  animation: personalLoginOrbit 14s linear infinite;
}
.personal-login-intro__decoration span:nth-child(1) { width: 180px; height: 180px; right: 9%; top: 8%; }
.personal-login-intro__decoration span:nth-child(2) { width: 86px; height: 86px; right: 23%; top: 22%; animation-duration: 10s; animation-direction: reverse; }
.personal-login-intro__decoration span:nth-child(3) { width: 14px; height: 14px; right: 35%; top: 14%; border: 0; background: rgba(126,225,215,.42); box-shadow: 0 0 28px rgba(126,225,215,.45); animation-duration: 7s; }
.personal-login-intro__content {
  position: relative;
  z-index: 2;
  max-width: 570px;
  margin: auto 0;
  padding: 42px 0 28px;
  animation: personalLoginFadeUp .62s .14s both;
}
.personal-login-intro__eyebrow {
  display: block;
  margin-bottom: 15px;
  color: #7ee1d7;
  font-size: calc(10px * var(--font-scale));
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.personal-login-intro h1 {
  max-width: 10ch;
  margin: 0;
  color: #fff;
  font-size: clamp(2.9rem, 4.9vw, 4.75rem);
  line-height: .94;
  letter-spacing: -.035em;
}
.personal-login-intro__content > p {
  max-width: 48ch;
  margin: 22px 0 0;
  color: rgba(255,255,255,.74);
  font-size: calc(14px * var(--font-scale));
  line-height: 1.65;
}
.personal-login-benefits { display: grid; gap: 12px; max-width: 500px; margin-top: 26px; }
.personal-login-benefit {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 16px;
  background: rgba(255,255,255,.055);
  backdrop-filter: blur(10px);
  animation: personalLoginFadeUp .5s both;
}
.personal-login-benefit:nth-child(1) { animation-delay: .25s; }
.personal-login-benefit:nth-child(2) { animation-delay: .34s; }
.personal-login-benefit__icon {
  width: 37px;
  height: 37px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #8ce8df;
  background: rgba(255,255,255,.09);
}
.personal-login-benefit__icon svg { width: 20px; height: 20px; }
.personal-login-benefit > span:last-child { display: grid; gap: 2px; }
.personal-login-benefit strong { font-size: calc(12px * var(--font-scale)); }
.personal-login-benefit small { color: rgba(255,255,255,.62); font-size: calc(10px * var(--font-scale)); line-height: 1.4; }
.personal-login-intro__footer {
  position: relative;
  z-index: 2;
  color: rgba(255,255,255,.43);
  font-size: calc(9px * var(--font-scale));
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.personal-login-panel {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: auto;
  padding: 42px 48px;
  background: linear-gradient(180deg, #fff 0%, #f9fcfb 100%);
  animation: personalLoginPanelIn .58s .08s both;
}
.personal-login-panel__inner { width: min(390px, 100%); }
.personal-login-header { margin-bottom: 26px; }
.personal-login-security {
  display: inline-flex;
  align-items: center;
  margin-bottom: 15px;
  padding: 6px 10px;
  border: 1px solid #bfe2de;
  border-radius: 999px;
  color: var(--primary-dark);
  background: #eef9f7;
  font-size: calc(9px * var(--font-scale));
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.personal-login-header h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(2.35rem, 4vw, 3.25rem);
  line-height: .97;
  letter-spacing: -.035em;
}
.personal-login-header p { margin: 13px 0 0; color: var(--muted); font-size: calc(11px * var(--font-scale)); line-height: 1.55; }
.personal-login-panel .alert { margin: 0 0 16px; padding: 11px 13px; border-radius: 12px; font-size: calc(11px * var(--font-scale)); }
.personal-login-form { display: grid; gap: 16px; }
.personal-login-field { display: grid; gap: 6px; }
.personal-login-control {
  --personal-login-control-background: #fff;
  position: relative;
  display: block;
  min-width: 0;
  border-radius: 12px;
}
.personal-login-control::after {
  content: '';
  position: absolute;
  z-index: 2;
  right: 50%;
  bottom: 0;
  left: 50%;
  height: 2px;
  border-radius: 999px;
  background: var(--primary);
  opacity: 0;
  pointer-events: none;
  transition: left .24s ease, right .24s ease, opacity .18s ease;
}
.personal-login-control:focus-within::after { right: 12px; left: 12px; opacity: .72; }
.personal-login-control input {
  width: 100%;
  min-height: 52px;
  padding: 17px 14px 9px;
  border: 1px solid #cfdedc;
  border-radius: 12px;
  background: var(--personal-login-control-background);
  color: var(--ink);
  font-size: calc(13px * var(--font-scale));
  line-height: 1.2;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.personal-login-control input:hover { border-color: #9fc5c0; }
.personal-login-control input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(20,125,117,.11); }
.personal-login-control input::placeholder { color: transparent; }
.personal-login-control label {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 14px;
  max-width: calc(100% - 28px);
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: #758b88;
  background: transparent;
  font-size: calc(12px * var(--font-scale));
  font-weight: 700;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
  transform: translateY(-50%) scale(1);
  transform-origin: left center;
  transition: top .2s cubic-bezier(.2,.75,.25,1), left .2s ease, transform .2s cubic-bezier(.2,.75,.25,1), padding .2s ease, color .18s ease, background-color .18s ease;
}
.personal-login-control input:focus + label,
.personal-login-control input:not(:placeholder-shown) + label,
.personal-login-control input:-webkit-autofill + label {
  top: 0;
  left: 12px;
  max-width: calc(100% - 24px);
  padding: 0 6px;
  color: #4f6966;
  background: var(--personal-login-control-background);
  transform: translateY(-50%) scale(.82);
}
.personal-login-control input:focus + label { color: var(--primary-dark); }
.personal-login-password input { padding-right: 50px; }
.personal-login-password label { max-width: calc(100% - 62px); }
.personal-login-password input:focus + label,
.personal-login-password input:not(:placeholder-shown) + label,
.personal-login-password input:-webkit-autofill + label { max-width: calc(100% - 74px); }
.personal-login-password__toggle {
  position: absolute;
  z-index: 4;
  top: 50%;
  right: 7px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 9px;
  color: #607a77;
  background: transparent;
  transform: translateY(-50%);
  transition: color .18s ease, background .18s ease, box-shadow .18s ease;
}
.personal-login-password__toggle:hover { color: var(--primary-dark); background: rgba(20,125,117,.09); }
.personal-login-password__toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(20,125,117,.16); }
.personal-login-password__icon { width: 21px; height: 21px; }
.personal-login-password__icon--hide { display: none; }
.personal-login-password__toggle[aria-pressed="true"] .personal-login-password__icon--show { display: none; }
.personal-login-password__toggle[aria-pressed="true"] .personal-login-password__icon--hide { display: block; }
.personal-login-submit { min-height: 49px; margin-top: 1px; border-radius: 12px; box-shadow: 0 12px 24px rgba(14,94,89,.20); }
.personal-login-help { margin: 19px 0 0; color: #849693; font-size: calc(9px * var(--font-scale)); line-height: 1.5; text-align: center; }

.dashboard-analytics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 22px;
}
.dashboard-chart-card { min-width: 0; margin: 0 !important; overflow: hidden; }
.dashboard-chart-card .panel-head { margin-bottom: 18px; }
.dashboard-chart-card .panel-head h2 { font-size: calc(18px * var(--font-scale)); }
.dashboard-readiness-layout { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 22px; align-items: center; }
.dashboard-donut {
  --dashboard-chart-value: 0%;
  position: relative;
  width: 150px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--primary) var(--dashboard-chart-value), #e2edeb 0);
  box-shadow: inset 0 0 0 1px rgba(20,125,117,.05);
  animation: dashboardChartReveal .7s .12s both;
}
.dashboard-donut::before { content: ''; position: absolute; inset: 18px; border-radius: 50%; background: #fff; box-shadow: 0 8px 24px rgba(21,76,72,.07); }
.dashboard-donut > div { position: relative; z-index: 1; display: grid; gap: 2px; text-align: center; }
.dashboard-donut strong { font-size: calc(27px * var(--font-scale)); letter-spacing: -.05em; }
.dashboard-donut span { color: var(--muted); font-size: calc(9px * var(--font-scale)); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.dashboard-chart-legend { display: grid; gap: 8px; margin: 0; }
.dashboard-chart-legend div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.dashboard-chart-legend div:last-child { padding-bottom: 0; border-bottom: 0; }
.dashboard-chart-legend dt { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--muted); font-size: calc(10px * var(--font-scale)); }
.dashboard-chart-legend dd { margin: 0; font-size: calc(13px * var(--font-scale)); font-weight: 800; }
.dashboard-legend-dot { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: #adc7c4; }
.dashboard-legend-dot--approved { background: var(--primary); }
.dashboard-legend-dot--pending { background: #e2a735; }
.dashboard-legend-dot--returned { background: #cb6670; }
.dashboard-legend-dot--other { background: #9eb1af; }
.dashboard-bar-chart { display: grid; gap: 14px; }
.dashboard-bar-row { display: grid; gap: 7px; }
.dashboard-bar-label { display: flex; align-items: center; justify-content: space-between; gap: 14px; color: var(--muted); font-size: calc(10px * var(--font-scale)); }
.dashboard-bar-label strong { color: var(--ink); font-size: calc(12px * var(--font-scale)); }
.dashboard-bar-track { height: 11px; overflow: hidden; border-radius: 999px; background: #e7f0ee; }
.dashboard-bar-track span {
  display: block;
  width: var(--dashboard-bar-size, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #39b9ad, var(--primary));
  transform: scaleX(0);
  transform-origin: left center;
  animation: dashboardBarGrow .7s cubic-bezier(.2,.75,.25,1) forwards;
}
.dashboard-bar-row:nth-child(2) .dashboard-bar-track span { animation-delay: .08s; }
.dashboard-bar-row:nth-child(3) .dashboard-bar-track span { animation-delay: .16s; }
.dashboard-bar-row:nth-child(4) .dashboard-bar-track span { animation-delay: .24s; }
.dashboard-chart-note { margin: 17px 0 0; color: var(--muted); font-size: calc(9px * var(--font-scale)); line-height: 1.5; }
.dashboard-signal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.dashboard-signal-grid > div { min-width: 0; padding: 13px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(145deg, #fff, #f4faf8); }
.dashboard-signal-grid span,
.dashboard-signal-grid small { display: block; color: var(--muted); }
.dashboard-signal-grid span { min-height: 28px; font-size: calc(9px * var(--font-scale)); font-weight: 800; line-height: 1.4; }
.dashboard-signal-grid strong { display: block; margin: 8px 0 5px; font-size: calc(25px * var(--font-scale)); line-height: 1; letter-spacing: -.04em; }
.dashboard-signal-grid small { font-size: calc(8px * var(--font-scale)); line-height: 1.35; }
.dashboard-attention-line { height: 7px; margin-top: 17px; overflow: hidden; border-radius: 999px; background: #e7f0ee; }
.dashboard-attention-line span { display: block; width: var(--dashboard-attention, 8%); height: 100%; border-radius: inherit; background: linear-gradient(90deg, #56c9bd, #e2a735); transform: scaleX(0); transform-origin: left; animation: dashboardBarGrow .75s .2s forwards; }

@keyframes personalLoginShellIn { from { opacity: 0; transform: translateY(12px) scale(.992); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes personalLoginPanelIn { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: translateX(0); } }
@keyframes personalLoginFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes personalLoginOrbit { from { transform: rotate(0deg) translateX(4px) rotate(0deg); } to { transform: rotate(360deg) translateX(4px) rotate(-360deg); } }
@keyframes dashboardBarGrow { to { transform: scaleX(1); } }
@keyframes dashboardChartReveal { from { opacity: 0; transform: scale(.88) rotate(-12deg); } to { opacity: 1; transform: scale(1) rotate(0); } }

@media (max-height: 690px) and (min-width: 901px) {
  .personal-login-page .public-main { padding: 12px; }
  .personal-login-shell { height: calc(100vh - 24px); height: calc(100dvh - 24px); min-height: 0; }
  .personal-login-intro { padding: 25px 30px; }
  .personal-login-intro__content { padding: 24px 0 16px; }
  .personal-login-intro h1 { font-size: clamp(2.5rem, 4.4vw, 4rem); }
  .personal-login-intro__content > p { margin-top: 16px; }
  .personal-login-benefits { margin-top: 18px; gap: 8px; }
  .personal-login-benefit { padding: 9px 12px; }
  .personal-login-panel { padding: 28px 40px; }
  .personal-login-header { margin-bottom: 20px; }
  .personal-login-header h2 { font-size: 2.55rem; }
  .personal-login-form { gap: 13px; }
}
@media (max-width: 1250px) {
  .dashboard-analytics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-chart-card--signals { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .nav { margin-top: 26px; }
  .personal-login-page { overflow: auto; }
  .personal-login-page .public-main { display: block; min-height: 100vh; padding: 16px; }
  .personal-login-shell { width: 100%; height: auto; min-height: calc(100vh - 32px); grid-template-columns: 1fr; border-radius: 24px; }
  .personal-login-intro { min-height: 310px; padding: 24px 26px; }
  .personal-login-intro__content { padding: 38px 0 18px; }
  .personal-login-intro h1 { max-width: 13ch; font-size: clamp(2.7rem, 9vw, 4.1rem); }
  .personal-login-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 22px; }
  .personal-login-benefit { align-items: flex-start; }
  .personal-login-intro__footer { display: none; }
  .personal-login-panel { overflow: visible; padding: 38px 28px 44px; }
  .dashboard-analytics { grid-template-columns: 1fr; }
  .dashboard-chart-card--signals { grid-column: auto; }
}
@media (max-width: 620px) {
  .personal-login-page .public-main { padding: 0; }
  .personal-login-shell { min-height: 100vh; min-height: 100dvh; border: 0; border-radius: 0; box-shadow: none; }
  .personal-login-intro { min-height: 275px; padding: 20px 20px 24px; }
  .personal-login-brand__mark { width: 43px; height: 43px; border-radius: 13px; }
  .personal-login-intro__content { padding: 30px 0 4px; }
  .personal-login-intro h1 { font-size: clamp(2.45rem, 12vw, 3.45rem); }
  .personal-login-intro__content > p { margin-top: 15px; font-size: calc(12px * var(--font-scale)); }
  .personal-login-benefits { display: none; }
  .personal-login-panel { padding: 33px 21px 42px; }
  .personal-login-header { margin-bottom: 23px; }
  .personal-login-header h2 { font-size: 2.55rem; }
  .dashboard-readiness-layout { grid-template-columns: 1fr; justify-items: center; }
  .dashboard-chart-legend { width: 100%; }
  .dashboard-signal-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .personal-login-shell,
  .personal-login-brand,
  .personal-login-intro__content,
  .personal-login-benefit,
  .personal-login-panel,
  .personal-login-intro__decoration span,
  .dashboard-donut,
  .dashboard-bar-track span,
  .dashboard-attention-line span { animation: none !important; }
  .personal-login-control::after,
  .personal-login-control label,
  .nav-group-chevron::before,
  .nav-group-chevron::after { transition: none !important; }
  .dashboard-bar-track span,
  .dashboard-attention-line span { transform: none; }
}


/* Dashboard v2 */
.dashboard-insights {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 22px;
}
.dashboard-insight {
  position: relative;
  min-width: 0;
  padding: 24px;
  overflow: hidden;
  border: 1px solid #d4e2e0;
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(246,251,250,.98));
  box-shadow: 0 14px 38px rgba(20,67,63,.08);
}
.dashboard-insight::after {
  content: '';
  position: absolute;
  width: 170px;
  height: 170px;
  right: -85px;
  top: -95px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(49,177,166,.12), rgba(49,177,166,0) 70%);
  pointer-events: none;
}
.dashboard-insight--operations { grid-column: 1 / -1; }
.dashboard-insight-head,
.dashboard-insight-title,
.dashboard-operation-top,
.dashboard-insight-footer { display: flex; align-items: center; }
.dashboard-insight-head { position: relative; z-index: 1; justify-content: space-between; gap: 18px; margin-bottom: 23px; }
.dashboard-insight-title { min-width: 0; gap: 12px; }
.dashboard-insight-title h2 { margin: 3px 0 0; font-size: calc(19px * var(--font-scale)); letter-spacing: -.025em; }
.dashboard-insight-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid #b9ddd8;
  border-radius: 13px;
  color: #0e716b;
  background: linear-gradient(145deg, #ecf9f7, #dff2ef);
  font-size: calc(19px * var(--font-scale));
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.dashboard-insight-badge {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 11px;
  border: 1px solid #d5e1df;
  border-radius: 999px;
  color: #56716e;
  background: rgba(255,255,255,.8);
  font-size: calc(9px * var(--font-scale));
  font-weight: 850;
  white-space: nowrap;
}
.dashboard-insight-badge.is-good { color: #0d7164; border-color: #b9ddd5; background: #eaf8f4; }
.dashboard-insight-badge.is-medium { color: #8a641b; border-color: #ead9ad; background: #fff8e8; }
.dashboard-insight-badge.is-low { color: #a34953; border-color: #ecc8cc; background: #fff1f2; }
.dashboard-readiness-layout { position: relative; z-index: 1; display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 24px; align-items: center; }
.dashboard-donut {
  --dashboard-chart-value: 0%;
  position: relative;
  width: 168px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(#169a90 var(--dashboard-chart-value), #deebe9 0);
  box-shadow: 0 18px 34px rgba(17,113,106,.14), inset 0 0 0 1px rgba(17,113,106,.08);
  animation: dashboardChartReveal .7s .08s both;
}
.dashboard-donut::before { content: ''; position: absolute; inset: 18px; border-radius: 50%; background: linear-gradient(145deg, #fff, #f7fbfa); box-shadow: inset 0 0 0 1px #e1ecea; }
.dashboard-donut > div { position: relative; z-index: 1; display: grid; gap: 4px; text-align: center; }
.dashboard-donut strong { font-size: calc(31px * var(--font-scale)); line-height: 1; letter-spacing: -.055em; }
.dashboard-donut span { color: var(--muted); font-size: calc(9px * var(--font-scale)); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.dashboard-chart-legend { display: grid; gap: 2px; margin: 0; }
.dashboard-chart-legend div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid #e3ecea; }
.dashboard-chart-legend div:last-child { border-bottom: 0; }
.dashboard-chart-legend dt { display: flex; align-items: center; gap: 9px; min-width: 0; color: #5e7471; font-size: calc(10px * var(--font-scale)); }
.dashboard-chart-legend dd { margin: 0; font-size: calc(14px * var(--font-scale)); font-weight: 900; }
.dashboard-legend-dot { width: 10px; height: 10px; flex: 0 0 auto; border-radius: 50%; box-shadow: 0 0 0 4px rgba(115,143,139,.09); }
.dashboard-legend-dot.is-approved { background: #169a90; }
.dashboard-legend-dot.is-pending { background: #dfa83c; }
.dashboard-legend-dot.is-returned { background: #d56d78; }
.dashboard-legend-dot.is-other { background: #94aaa7; }
.dashboard-bar-chart { position: relative; z-index: 1; display: grid; gap: 17px; padding: 3px 0 2px; }
.dashboard-bar-row { display: grid; gap: 8px; }
.dashboard-bar-label { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: #5e7471; font-size: calc(10px * var(--font-scale)); font-weight: 700; }
.dashboard-bar-label strong { color: var(--ink); font-size: calc(13px * var(--font-scale)); }
.dashboard-bar-track { height: 13px; overflow: hidden; border-radius: 999px; background: #e4efed; box-shadow: inset 0 1px 2px rgba(34,87,82,.05); }
.dashboard-bar-track span {
  display: block;
  width: var(--dashboard-bar-size, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #4bc5ba, #14877f);
  box-shadow: 0 4px 12px rgba(20,135,127,.25);
  transform: scaleX(0);
  transform-origin: left center;
  animation: dashboardBarGrow .75s var(--bar-delay, 0ms) cubic-bezier(.2,.75,.25,1) forwards;
}
.dashboard-insight-footer { position: relative; z-index: 1; justify-content: space-between; gap: 14px; margin-top: 22px; padding-top: 15px; border-top: 1px solid #e0ebe9; color: #778b88; font-size: calc(9px * var(--font-scale)); }
.dashboard-insight-footer strong { color: #324f4c; font-size: calc(10px * var(--font-scale)); text-align: right; }
.dashboard-operation-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.dashboard-operation-card {
  min-width: 0;
  padding: 17px;
  border: 1px solid #dce8e6;
  border-radius: 17px;
  background: rgba(255,255,255,.86);
  box-shadow: 0 8px 22px rgba(20,67,63,.055);
}
.dashboard-operation-top { justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.dashboard-operation-top strong { font-size: calc(27px * var(--font-scale)); line-height: 1; letter-spacing: -.05em; }
.dashboard-operation-symbol { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; font-size: calc(13px * var(--font-scale)); font-weight: 900; }
.dashboard-operation-card > span { display: block; min-height: 32px; color: #294a47; font-size: calc(10px * var(--font-scale)); font-weight: 850; line-height: 1.45; }
.dashboard-operation-card > small { display: block; margin-top: 4px; color: #7a8e8b; font-size: calc(8px * var(--font-scale)); line-height: 1.4; }
.dashboard-operation-meter { height: 7px; margin-top: 15px; overflow: hidden; border-radius: 999px; background: #e5efed; }
.dashboard-operation-meter i { display: block; width: var(--operation-size, 0%); height: 100%; border-radius: inherit; transform: scaleX(0); transform-origin: left; animation: dashboardBarGrow .7s var(--bar-delay, 0ms) forwards; }
.dashboard-operation-card.is-teal .dashboard-operation-symbol { color: #0b756d; background: #e5f6f3; }
.dashboard-operation-card.is-teal .dashboard-operation-meter i { background: #179b91; }
.dashboard-operation-card.is-amber .dashboard-operation-symbol { color: #8c6417; background: #fff5dc; }
.dashboard-operation-card.is-amber .dashboard-operation-meter i { background: #d9a238; }
.dashboard-operation-card.is-rose .dashboard-operation-symbol { color: #a34b55; background: #fff0f1; }
.dashboard-operation-card.is-rose .dashboard-operation-meter i { background: #cf6873; }
.dashboard-operation-card.is-blue .dashboard-operation-symbol { color: #3e668f; background: #edf4fb; }
.dashboard-operation-card.is-blue .dashboard-operation-meter i { background: #5b82aa; }

@media (max-width: 1120px) {
  .dashboard-readiness-layout { grid-template-columns: 145px minmax(0, 1fr); gap: 18px; }
  .dashboard-donut { width: 145px; }
  .dashboard-operation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .dashboard-insights { grid-template-columns: 1fr; }
  .dashboard-insight--operations { grid-column: auto; }
}
@media (max-width: 620px) {
  .dashboard-insight { padding: 19px; border-radius: 18px; }
  .dashboard-insight-head { align-items: flex-start; flex-direction: column; margin-bottom: 20px; }
  .dashboard-readiness-layout { grid-template-columns: 1fr; justify-items: center; }
  .dashboard-chart-legend { width: 100%; }
  .dashboard-operation-grid { grid-template-columns: 1fr; }
  .dashboard-insight-footer { align-items: flex-start; flex-direction: column; }
  .dashboard-insight-footer strong { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .dashboard-donut,
  .dashboard-bar-track span,
  .dashboard-operation-meter i { animation: none !important; transform: none !important; }
}

/* Kompaktní docházková listina pro větší eventy */
.attendance-roster-head { align-items: center; }
.attendance-roster-meta { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.attendance-roster--compact { gap: 8px; }
.attendance-compact-head,
.attendance-worker-summary {
  display: grid;
  grid-template-columns: minmax(190px, 1.35fr) minmax(120px, .78fr) minmax(185px, 1.12fr) minmax(145px, .9fr) minmax(105px, .62fr) minmax(115px, .7fr) minmax(150px, .88fr);
  align-items: center;
  gap: 12px;
}
.attendance-compact-head { padding: 0 44px 7px 14px; color: var(--muted); font-size: calc(9px * var(--font-scale)); font-weight: 850; letter-spacing: .045em; text-transform: uppercase; }
.attendance-worker-card { padding: 0; overflow: hidden; border-radius: 14px; }
.attendance-worker-card > summary { list-style: none; }
.attendance-worker-card > summary::-webkit-details-marker { display: none; }
.attendance-worker-summary { position: relative; min-height: 66px; padding: 9px 44px 9px 12px; cursor: pointer; transition: background .16s ease; }
.attendance-worker-summary:hover { background: #f7fbfa; }
.attendance-worker-card[open] > .attendance-worker-summary { border-bottom: 1px solid var(--line); background: #f7fbfa; }
.attendance-summary-person { min-width: 0; display: flex; align-items: center; gap: 10px; }
.attendance-summary-person > span:last-child { min-width: 0; display: grid; gap: 2px; }
.attendance-summary-person strong,
.attendance-summary-person small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attendance-summary-person strong { font-size: calc(12px * var(--font-scale)); }
.attendance-summary-person small { color: var(--muted); font-size: calc(9px * var(--font-scale)); }
.attendance-avatar-placeholder { flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #c5d8d5; border-radius: 11px; color: var(--primary-dark); background: #edf7f5; font-size: calc(10px * var(--font-scale)); font-weight: 900; }
.attendance-worker-summary .worker-avatar-mini { width: 34px; height: 34px; border-radius: 11px; }
.attendance-summary-cell { min-width: 0; display: grid; gap: 2px; }
.attendance-summary-cell small { display: none; color: var(--muted); font-size: calc(8px * var(--font-scale)); font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.attendance-summary-cell strong { overflow: hidden; font-size: calc(10px * var(--font-scale)); line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.attendance-summary-gross strong { color: var(--primary-dark); font-size: calc(11px * var(--font-scale)); }
.attendance-summary-status { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 9px; }
.attendance-summary-status .badge { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attendance-summary-chevron { position: absolute; top: 50%; right: 15px; width: 9px; height: 9px; border-right: 2px solid #6c817e; border-bottom: 2px solid #6c817e; transform: translateY(-65%) rotate(45deg); transition: transform .18s ease; }
.attendance-worker-card[open] .attendance-summary-chevron { transform: translateY(-30%) rotate(225deg); }
.attendance-worker-detail { padding: 12px 14px 14px; }
.attendance-worker-detail .attendance-worker-times { margin: 0 0 12px; }
.attendance-worker-detail .attendance-worker-times > div { padding: 8px 10px; }
.attendance-confirmed-meta { display: block; margin-top: 7px; }
.attendance-worker-detail .attendance-manager-actions { padding-top: 12px; }
.attendance-worker-detail .attendance-payment-statement { margin-top: 12px; padding: 13px; }
.attendance-worker-detail .attendance-rating-block { margin-top: 12px; padding-top: 12px; }

@media (max-width: 1320px) {
  .attendance-compact-head,
  .attendance-worker-summary { grid-template-columns: minmax(180px, 1.35fr) minmax(110px, .75fr) minmax(170px, 1.05fr) minmax(130px, .82fr) minmax(100px, .6fr) minmax(145px, .85fr); }
  .attendance-compact-head > :nth-child(6),
  .attendance-summary-gross { display: none; }
}

@media (max-width: 1040px) {
  .attendance-compact-head { display: none; }
  .attendance-worker-summary { grid-template-columns: minmax(190px, 1.35fr) minmax(120px, .8fr) minmax(160px, 1fr) minmax(110px, .65fr) minmax(145px, .85fr); }
  .attendance-summary-cell small { display: block; }
  .attendance-worker-summary > .attendance-summary-cell:nth-of-type(3) { display: none; }
}

@media (max-width: 760px) {
  .attendance-roster-head { align-items: flex-start; }
  .attendance-roster-meta { justify-content: flex-start; }
  .attendance-worker-summary { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; padding: 11px 42px 11px 11px; }
  .attendance-summary-person { grid-column: 1; }
  .attendance-summary-status { grid-column: 2; grid-row: 1; align-self: start; }
  .attendance-worker-summary > .attendance-summary-cell { display: grid; grid-column: 1 / -1; grid-template-columns: 92px minmax(0, 1fr); align-items: baseline; gap: 8px; padding-left: 44px; }
  .attendance-worker-summary > .attendance-summary-cell:nth-of-type(2),
  .attendance-worker-summary > .attendance-summary-cell:nth-of-type(3),
  .attendance-summary-gross { display: none; }
  .attendance-summary-cell small { display: block; }
  .attendance-summary-cell strong { white-space: normal; }
  .attendance-worker-detail { padding: 11px; }
}

@media (max-width: 520px) {
  .attendance-summary-status .badge { max-width: 118px; font-size: calc(8px * var(--font-scale)); }
  .attendance-worker-summary > .attendance-summary-cell { grid-template-columns: 78px minmax(0, 1fr); padding-left: 0; }
  .attendance-summary-person small { display: none; }
}

/* Měsíční mzdová uzávěrka, výplatní pásky a ostrá GDPR konfigurace */
.payroll-hero,
.payroll-profile-hero,
.payroll-statement-hero,
.privacy-config-hero {
  position: relative;
  overflow: hidden;
  border-color: #c8dfdc;
  background:
    radial-gradient(circle at 92% 8%, rgba(64, 190, 177, .15), transparent 26%),
    linear-gradient(145deg, #ffffff 0%, #f1faf8 100%);
}
.payroll-hero::after,
.payroll-profile-hero::after,
.payroll-statement-hero::after,
.privacy-config-hero::after {
  content: "";
  position: absolute;
  right: -46px;
  bottom: -74px;
  width: 180px;
  height: 180px;
  border: 24px solid rgba(20, 125, 117, .055);
  border-radius: 50%;
  pointer-events: none;
}
.payroll-hero > *,
.payroll-profile-hero > *,
.payroll-statement-hero > *,
.privacy-config-hero > * { position: relative; z-index: 1; }

.payroll-period-filter {
  display: grid;
  grid-template-columns: minmax(125px, 170px) minmax(170px, 230px) auto;
  align-items: end;
  gap: 12px;
  max-width: 620px;
  margin: 4px 0 18px;
  padding: 14px;
  border: 1px solid #d3e5e2;
  border-radius: 14px;
  background: rgba(255, 255, 255, .82);
}
.payroll-period-filter label,
.payroll-rule-approval label,
.payroll-component-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: calc(11px * var(--font-scale));
  font-weight: 800;
}
.payroll-period-filter label > span,
.payroll-rule-approval label > span,
.payroll-component-form label > span {
  color: var(--muted);
  letter-spacing: .025em;
}
.payroll-action-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.payroll-action-row form { margin: 0; }
.payroll-close-form { display: flex; align-items: center; flex: 1 1 540px; gap: 10px; }
.payroll-close-form input { flex: 1 1 320px; }
.payroll-close-form .payroll-due-date { display: grid; flex: 0 0 175px; gap: 5px; }
.payroll-close-form .payroll-due-date > span { color: var(--muted); font-size: calc(8px * var(--font-scale)); font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.payroll-close-form .payroll-due-date input { width: 100%; min-width: 0; }
.button:disabled,
button:disabled { opacity: .5; cursor: not-allowed; transform: none !important; }

.payroll-metrics { margin-top: 22px; }
.payroll-metric {
  position: relative;
  min-height: 145px;
  overflow: hidden;
  border: 0;
  color: #fff;
  box-shadow: 0 17px 35px rgba(26, 64, 61, .12);
}
.payroll-metric::before,
.payroll-metric::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.10);
}
.payroll-metric::before { width: 125px; height: 125px; top: -58px; right: -24px; }
.payroll-metric::after { width: 105px; height: 105px; right: 18px; bottom: -58px; border: 18px solid rgba(255,255,255,.08); background: transparent; }
.payroll-metric > * { position: relative; z-index: 1; }
.payroll-metric span,
.payroll-metric small { color: rgba(255,255,255,.86); }
.payroll-metric span { font-size: calc(10px * var(--font-scale)); font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.payroll-metric strong { margin-top: 20px; font-size: clamp(calc(24px * var(--font-scale)), calc(2.4vw * var(--font-scale)), calc(37px * var(--font-scale))); }
.payroll-metric-blue { background: linear-gradient(135deg, #2f7fcb, #5ca8e3); }
.payroll-metric-red { background: linear-gradient(135deg, #ba4c5a, #e47680); }
.payroll-metric-orange { background: linear-gradient(135deg, #d17c0b, #ecaa3c); }
.payroll-metric-green { background: linear-gradient(135deg, #0d8a7f, #2bb8a8); }

.payroll-rule-panel { border-width: 1px; }
.payroll-rule-panel.is-approved { border-color: #9fd7c6; background: linear-gradient(145deg, #fff, #f0fbf6); }
.payroll-rule-panel.is-pending { border-color: #ebd093; background: linear-gradient(145deg, #fff, #fffaf0); }
.payroll-rule-statuses { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.payroll-rule-values {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 6px 0 18px;
}
.payroll-rule-values > span {
  display: grid;
  gap: 7px;
  padding: 15px;
  border: 1px solid rgba(150, 190, 184, .42);
  border-radius: 14px;
  background: rgba(255,255,255,.82);
}
.payroll-rule-values small { color: var(--muted); font-size: calc(9px * var(--font-scale)); line-height: 1.45; }
.payroll-rule-values strong { font-size: calc(17px * var(--font-scale)); }
.payroll-rule-approval {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  align-items: end;
  gap: 12px;
  margin-top: 15px;
}
.payroll-rule-approved-meta { margin: 14px 0 0; color: #55706d; font-size: calc(11px * var(--font-scale)); }

.payroll-list-panel { overflow: hidden; }
.payroll-table { min-width: 1120px; }
.payroll-table td:first-child strong,
.payroll-table td:first-child small { display: block; }
.payroll-table td:first-child small { margin-top: 4px; color: var(--muted); font-size: calc(9px * var(--font-scale)); }
.payroll-row-blocked td { background: #fff5f5; }
.payroll-row-stale td { background: #fffaf0; }
.payroll-blocking-row td { padding-top: 7px; padding-bottom: 13px; color: #a23943; font-size: calc(10px * var(--font-scale)); }
.payroll-blocking-row ul { margin: 0; padding-left: 20px; }
.payroll-component-row td { background: #f7fbfa; }
.payroll-component-form {
  display: grid;
  grid-template-columns: minmax(180px, .8fr) minmax(210px, 1.2fr) minmax(130px, .55fr) auto;
  align-items: end;
  gap: 10px;
}
.payroll-component-form input,
.payroll-component-form select { min-height: 40px; }
.payroll-component-form .button { min-height: 40px; }

.payroll-method-panel { border-color: #d9e7e5; background: #f9fcfb; }
.payroll-method-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.payroll-method-grid > article {
  position: relative;
  padding: 18px 17px 17px 50px;
  border: 1px solid #d8e7e4;
  border-radius: 15px;
  background: #fff;
}
.payroll-method-grid > article::before {
  content: counter(payroll-step);
  counter-increment: payroll-step;
  position: absolute;
  top: 16px;
  left: 15px;
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #fff;
  background: var(--primary);
  font-size: calc(10px * var(--font-scale));
  font-weight: 900;
}
.payroll-method-grid { counter-reset: payroll-step; }
.payroll-method-grid strong { display: block; margin-bottom: 7px; font-size: calc(12px * var(--font-scale)); }
.payroll-method-grid p { margin: 0; color: var(--muted); font-size: calc(10px * var(--font-scale)); line-height: 1.55; }

.payroll-profile-form,
.privacy-config-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.payroll-profile-form textarea,
.privacy-config-form textarea {
  width: 100%;
  padding: 12px 13px;
  border: 1px solid #c9d9d7;
  border-radius: 11px;
  outline: none;
  resize: vertical;
  color: var(--ink);
  background: #fff;
  font: inherit;
  line-height: 1.5;
  transition: border-color .15s, box-shadow .15s;
}
.payroll-profile-form textarea:focus,
.privacy-config-form textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(20,125,117,.10); }
.form-section {
  margin-top: 4px;
  padding: 16px 18px;
  border: 1px solid #d8e8e5;
  border-radius: 14px;
  background: linear-gradient(145deg, #f7fcfb, #fff);
}
.form-section h3 { margin-top: 5px; }
.form-section p { margin: 7px 0 0; }
.form-grid .wide { grid-column: 1 / -1; }
.form-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding-top: 6px; }
.check-control {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start;
  gap: 10px !important;
  padding: 12px 14px;
  border: 1px solid #d9e6e4;
  border-radius: 12px;
  background: #fafdfc;
  line-height: 1.5;
}
.check-control input[type="checkbox"] { width: 18px; min-width: 18px; height: 18px; min-height: 18px; margin-top: 1px; accent-color: var(--primary); }

.payroll-self-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 17px;
}
.payroll-self-card {
  position: relative;
  overflow: hidden;
  padding: 21px;
  border: 1px solid #cfe2df;
  border-radius: 18px;
  background: linear-gradient(150deg, #fff, #eef9f7);
  box-shadow: 0 10px 27px rgba(23, 72, 68, .07);
  text-decoration: none;
  transition: transform .17s ease, box-shadow .17s ease, border-color .17s ease;
}
.payroll-self-card:hover { transform: translateY(-3px); border-color: #8fc9c1; box-shadow: 0 16px 33px rgba(23, 72, 68, .12); }
.payroll-self-card::after {
  content: "";
  position: absolute;
  right: -28px;
  bottom: -45px;
  width: 115px;
  height: 115px;
  border: 18px solid rgba(20,125,117,.07);
  border-radius: 50%;
}
.payroll-self-card > * { position: relative; z-index: 1; }
.payroll-self-month { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.payroll-self-month strong { font-size: calc(15px * var(--font-scale)); }
.payroll-self-net { margin: 26px 0 7px; }
.payroll-self-net span { display: block; color: var(--muted); font-size: calc(9px * var(--font-scale)); font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.payroll-self-net strong { display: block; margin-top: 8px; color: var(--primary-dark); font-size: calc(28px * var(--font-scale)); letter-spacing: -.045em; }

.payroll-slip {
  padding: 0;
  overflow: hidden;
  border-color: #b9d8d3;
}
.payroll-slip-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 25px 27px 20px;
  color: #fff;
  background: linear-gradient(135deg, #0e5f59, #169387);
}
.payroll-slip-head h2 { color: #fff; }
.payroll-slip-head .eyebrow { color: #a7eee5; }
.payroll-slip-head p { margin: 6px 0 0; color: rgba(255,255,255,.76); }
.payroll-slip-meta {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  border-bottom: 1px solid #d7e6e4;
}
.payroll-slip-meta > div { padding: 17px 20px; border-right: 1px solid #d7e6e4; }
.payroll-slip-meta > div:last-child { border-right: 0; }
.payroll-slip-meta dt,
.payroll-slip-breakdown dt { color: var(--muted); font-size: calc(9px * var(--font-scale)); font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.payroll-slip-meta dd,
.payroll-slip-breakdown dd { margin: 6px 0 0; font-weight: 850; }
.payroll-slip-net {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  margin: 22px;
  padding: 24px;
  border: 1px solid #a9d5cf;
  border-radius: 17px;
  background: linear-gradient(135deg, #e9f8f5, #f9fffe);
}
.payroll-slip-net span { color: var(--primary-dark); font-size: calc(11px * var(--font-scale)); font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.payroll-slip-net strong { color: #075c55; font-size: clamp(calc(31px * var(--font-scale)), calc(4vw * var(--font-scale)), calc(52px * var(--font-scale))); letter-spacing: -.055em; white-space: nowrap; }
.payroll-slip-breakdown {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 0 22px 24px;
}
.payroll-slip-breakdown > div {
  padding: 15px;
  border: 1px solid #dce8e6;
  border-radius: 13px;
  background: #fbfdfd;
}
.payroll-slip-breakdown .payroll-positive-line { border-color: #afdcd2; background: #eefaf7; }
.payroll-items-table { min-width: 780px; }
.payroll-audit-panel code { word-break: break-all; }
.payroll-audit-panel { border-style: dashed; background: #fafcfc; }

.privacy-retention-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
}
.privacy-retention-grid article {
  display: grid;
  gap: 6px;
  padding: 15px;
  border: 1px solid #d7e6e4;
  border-radius: 13px;
  background: #fbfdfd;
}
.privacy-retention-grid article strong { font-size: calc(11px * var(--font-scale)); }
.privacy-retention-grid article span { color: var(--primary-dark); font-size: calc(11px * var(--font-scale)); font-weight: 850; }
.privacy-retention-grid article small { color: var(--muted); font-size: calc(9px * var(--font-scale)); line-height: 1.5; }
.privacy-published-meta { margin: 14px 0 0; color: #416762; font-size: calc(11px * var(--font-scale)); }
.privacy-publish-panel { border-color: #aed9d2; background: linear-gradient(145deg, #fff, #f0faf8); }
.privacy-publish-panel form { margin: 0; }

@media (max-width: 1180px) {
  .payroll-rule-values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .payroll-method-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .payroll-self-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .privacy-retention-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .payroll-slip-breakdown { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .payroll-period-filter { grid-template-columns: 1fr 1fr; max-width: none; }
  .payroll-period-filter .button { grid-column: 1 / -1; }
  .payroll-close-form { align-items: stretch; flex-direction: column; }
  .payroll-profile-form,
  .privacy-config-form { grid-template-columns: 1fr; }
  .payroll-profile-form > *,
  .privacy-config-form > *,
  .form-grid .wide { grid-column: auto; }
  .payroll-slip-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .payroll-slip-meta > div:nth-child(2) { border-right: 0; }
  .payroll-slip-meta > div:nth-child(-n+2) { border-bottom: 1px solid #d7e6e4; }
  .payroll-slip-breakdown { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .payroll-period-filter,
  .payroll-rule-approval,
  .payroll-component-form { grid-template-columns: 1fr; }
  .payroll-action-row { align-items: stretch; flex-direction: column; }
  .payroll-action-row .button,
  .payroll-action-row form { width: 100%; }
  .payroll-rule-statuses { justify-content: flex-start; }
  .payroll-rule-values,
  .payroll-method-grid,
  .payroll-self-grid,
  .privacy-retention-grid,
  .payroll-slip-breakdown { grid-template-columns: 1fr; }
  .payroll-slip-head { flex-direction: column; }
  .payroll-slip-meta { grid-template-columns: 1fr; }
  .payroll-slip-meta > div { border-right: 0; border-bottom: 1px solid #d7e6e4; }
  .payroll-slip-meta > div:last-child { border-bottom: 0; }
  .payroll-slip-net { grid-template-columns: 1fr; }
  .payroll-slip-net strong { white-space: normal; }
}

@media print {
  body { background: #fff; }
  .sidebar,
  .topbar,
  .payroll-statement-hero .button-row,
  .payroll-audit-panel,
  .payroll-items-table form { display: none !important; }
  .app-area { width: 100%; margin: 0; }
  .content { max-width: none; padding: 0; }
  .panel { box-shadow: none; break-inside: avoid; }
  .payroll-slip { border: 1px solid #999; }
}
.alert.danger { color: #8f2731; background: var(--danger-bg); border-color: #efbdc3; }
.payroll-expert-confirm { border-color: #a9d5cf; background: #eefaf7; }
.payroll-expert-confirm > span { display: grid; gap: 4px; }
.payroll-expert-confirm strong { color: var(--primary-dark); }
.payroll-expert-confirm small { color: var(--muted); font-size: calc(10px * var(--font-scale)); font-weight: 500; line-height: 1.5; }
.payroll-revision-history { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.payroll-revision-history > strong { display: block; margin-bottom: 10px; }
.payroll-revision-history > div { display: flex; flex-wrap: wrap; gap: 9px; }
.payroll-revision-history a { display: grid; gap: 3px; min-width: 170px; padding: 10px 12px; border: 1px solid #d3e2df; border-radius: 11px; background: #fff; text-decoration: none; }
.payroll-revision-history a.active { border-color: var(--primary); background: var(--primary-soft); }
.payroll-revision-history a span { font-size: calc(10px * var(--font-scale)); font-weight: 850; }
.payroll-revision-history a small { color: var(--muted); font-size: calc(8px * var(--font-scale)); }
/* Přesné přizpůsobení skutečné struktury výplatní pásky */
.payroll-slip-head > div { display: grid; gap: 6px; }
.payroll-slip-head > div > span { color: rgba(255,255,255,.72); font-size: calc(9px * var(--font-scale)); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.payroll-slip-head > div > strong { font-size: calc(21px * var(--font-scale)); }
.payroll-slip-meta > span { display: grid; gap: 6px; padding: 17px 20px; border-right: 1px solid #d7e6e4; color: var(--muted); font-size: calc(9px * var(--font-scale)); font-weight: 800; text-transform: uppercase; }
.payroll-slip-meta > span:last-child { border-right: 0; }
.payroll-slip-meta > span strong { color: var(--ink); font-size: calc(11px * var(--font-scale)); text-transform: none; }
.payroll-slip-breakdown > dl { margin: 0; padding: 5px 15px; border: 1px solid #dce8e6; border-radius: 14px; background: #fbfdfd; }
.payroll-slip-breakdown > dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding: 12px 0; border-bottom: 1px solid #e3eceb; }
.payroll-slip-breakdown > dl > div:last-child { border-bottom: 0; }
.payroll-slip-breakdown > dl dt { max-width: 65%; }
.payroll-slip-breakdown > dl dd { white-space: nowrap; text-align: right; }
.payroll-slip-breakdown > dl .payroll-positive-line { margin: 4px -8px; padding: 11px 8px; border: 1px solid #afdcd2; border-radius: 10px; background: #eefaf7; }
.payroll-slip-net > small { grid-column: 1 / -1; color: #52706c; }
.payroll-self-card > span:not(.payroll-self-month):not(.badge) { display: grid; gap: 5px; margin-top: 18px; }
.payroll-self-card > span:not(.payroll-self-month):not(.badge) small { color: var(--muted); font-size: calc(9px * var(--font-scale)); }
.payroll-self-card > span:not(.payroll-self-month):not(.badge) strong { font-size: calc(15px * var(--font-scale)); }
.payroll-self-month { display: block; color: var(--primary-dark); font-size: calc(14px * var(--font-scale)); font-weight: 900; }
@media (max-width: 820px) {
  .payroll-slip-meta > span:nth-child(2) { border-right: 0; }
  .payroll-slip-meta > span:nth-child(-n+2) { border-bottom: 1px solid #d7e6e4; }
}
@media (max-width: 620px) {
  .payroll-slip-meta > span { border-right: 0; border-bottom: 1px solid #d7e6e4; }
  .payroll-slip-meta > span:last-child { border-bottom: 0; }
  .payroll-slip-breakdown > dl > div { align-items: flex-start; flex-direction: column; gap: 4px; }
  .payroll-slip-breakdown > dl dt { max-width: none; }
  .payroll-slip-breakdown > dl dd { white-space: normal; text-align: left; }
}
.payroll-global-component-form {
  display: grid;
  grid-template-columns: minmax(170px, 1.05fr) minmax(210px, 1.25fr) minmax(220px, 1.5fr) minmax(120px, .7fr) auto;
  align-items: end;
  gap: 10px;
  margin: 0 0 18px;
  padding: 14px;
  border: 1px solid #cfe3df;
  border-radius: 14px;
  background: linear-gradient(135deg, #f6fbfa, #fff);
}
.payroll-global-component-form label { display: grid; gap: 6px; min-width: 0; }
.payroll-global-component-form label > span { color: var(--muted); font-size: calc(9px * var(--font-scale)); font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.payroll-profile-table { min-width: 760px; }
.payroll-profile-table td:nth-child(3) small { display: block; margin-top: 5px; color: var(--muted); font-size: calc(8px * var(--font-scale)); }
@media (max-width: 1180px) {
  .payroll-global-component-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .payroll-global-component-form .button { align-self: stretch; }
}
@media (max-width: 620px) {
  .payroll-global-component-form { grid-template-columns: 1fr; }
  .payroll-global-component-form .button { width: 100%; }
}
.retention-policy-editor .retention-criterion-input {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
  min-width: 0;
}
.retention-policy-editor .retention-criterion-input > span {
  color: var(--muted);
  font-size: calc(8px * var(--font-scale));
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.retention-policy-editor .retention-criterion-input textarea {
  width: 100%;
  min-height: 64px;
  resize: vertical;
}

@media (max-width: 820px) { .payroll-close-form .payroll-due-date { width: 100%; flex-basis: auto; } }

/* Mzdové podklady pro externí mzdovou firmu */
.payroll-prep-hero {
  overflow: hidden;
  background: linear-gradient(135deg, #ffffff 0%, #f8fcfb 62%, #f2f9f7 100%);
}
.payroll-prep-head { align-items: flex-start; }
.payroll-prep-head .badge { white-space: nowrap; }
.payroll-prep-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-top: 22px; }
.payroll-prep-toolbar .payroll-period-filter { margin: 0; }
.payroll-prep-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin: 0 0 20px; }
.payroll-prep-stat { position: relative; overflow: hidden; min-height: 132px; padding: 20px 22px; border-radius: 20px; color: #fff; box-shadow: 0 16px 34px rgba(18, 55, 75, .13); }
.payroll-prep-stat::before,
.payroll-prep-stat::after { content: ""; position: absolute; border: 22px solid rgba(255,255,255,.11); border-radius: 50%; pointer-events: none; }
.payroll-prep-stat::before { width: 106px; height: 106px; right: -35px; top: -46px; }
.payroll-prep-stat::after { width: 76px; height: 76px; right: 18px; bottom: -48px; }
.payroll-prep-stat > * { position: relative; z-index: 1; }
.payroll-prep-stat span { display: block; min-height: 28px; font-size: calc(9px * var(--font-scale)); font-weight: 850; letter-spacing: .035em; text-transform: uppercase; }
.payroll-prep-stat strong { display: block; margin: 7px 0 6px; font-size: calc(27px * var(--font-scale)); line-height: 1; }
.payroll-prep-stat small { display: block; color: rgba(255,255,255,.82); font-size: calc(8px * var(--font-scale)); font-weight: 650; }
.payroll-prep-stat--blue { background: linear-gradient(135deg, #2586cf, #62afe4); }
.payroll-prep-stat--violet { background: linear-gradient(135deg, #7355c9, #9b85dd); }
.payroll-prep-stat--green { background: linear-gradient(135deg, #079889, #40c0ae); }
.payroll-prep-stat--orange { background: linear-gradient(135deg, #d67a06, #f1b54c); }
.payroll-prep-stat--navy { background: linear-gradient(135deg, #173f5f, #397ca8); }
.payroll-prep-panel { padding-bottom: 16px; }
.payroll-prep-list { display: grid; gap: 10px; }
.payroll-prep-worker { overflow: hidden; border: 1px solid #d8e7e5; border-radius: 16px; background: #fff; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.payroll-prep-worker:hover { border-color: #b5d9d4; box-shadow: 0 9px 26px rgba(17, 62, 75, .08); }
.payroll-prep-worker[open] { border-color: #9ed1ca; box-shadow: 0 13px 32px rgba(17, 62, 75, .1); }
.payroll-prep-worker.needs-review { border-left: 5px solid #e4a02d; }
.payroll-prep-worker.is-ready { border-left: 5px solid #14a28f; }
.payroll-prep-worker > summary { display: grid; grid-template-columns: minmax(220px, 1.8fr) repeat(5, minmax(90px, .72fr)) auto 18px; align-items: center; gap: 14px; min-height: 78px; padding: 13px 16px; cursor: pointer; list-style: none; }
.payroll-prep-worker > summary::-webkit-details-marker { display: none; }
.payroll-prep-person { display: flex; align-items: center; min-width: 0; gap: 11px; }
.payroll-prep-person > span:last-child { display: grid; min-width: 0; gap: 3px; }
.payroll-prep-person strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.payroll-prep-person small,
.payroll-prep-cell small,
.payroll-prep-shift small { display: block; color: var(--muted); font-size: calc(8px * var(--font-scale)); line-height: 1.35; }
.payroll-prep-avatar { display: grid; flex: 0 0 40px; width: 40px; height: 40px; place-items: center; border-radius: 12px; background: linear-gradient(135deg, #0d8f82, #45bdb0); color: #fff; font-size: calc(11px * var(--font-scale)); font-weight: 900; }
.payroll-prep-cell { display: grid; min-width: 0; gap: 4px; }
.payroll-prep-cell strong { overflow: hidden; font-size: calc(10px * var(--font-scale)); text-overflow: ellipsis; white-space: nowrap; }
.payroll-prep-chevron { width: 10px; height: 10px; border-right: 2px solid #668984; border-bottom: 2px solid #668984; transform: rotate(45deg); transition: transform .18s ease; }
.payroll-prep-worker[open] .payroll-prep-chevron { transform: rotate(225deg); }
.payroll-prep-detail { padding: 0 16px 16px; border-top: 1px solid #e5efed; background: linear-gradient(180deg, #fbfdfd, #fff); }
.payroll-prep-detail > .alert { margin: 14px 0; }
.payroll-prep-detail .alert ul { margin: 7px 0 0 18px; }
.payroll-prep-shifts { overflow-x: auto; border: 1px solid #dce9e7; border-radius: 13px; background: #fff; }
.payroll-prep-shift { display: grid; grid-template-columns: minmax(210px, 1.5fr) minmax(120px, .8fr) 90px 140px minmax(170px, 1.1fr) 145px; align-items: center; min-width: 950px; gap: 14px; padding: 12px 14px; border-bottom: 1px solid #e6efee; font-size: calc(9px * var(--font-scale)); }
.payroll-prep-shift:last-child { border-bottom: 0; }
.payroll-prep-shift > span { min-width: 0; }
.payroll-prep-shift > span:first-child strong { display: block; margin-bottom: 3px; }
.payroll-prep-shift--header { padding-top: 9px; padding-bottom: 9px; background: #f2f8f7; color: #52716c; font-size: calc(8px * var(--font-scale)); font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.payroll-prep-shift.is-unresolved { background: #fffaf1; }
.payroll-prep-process-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.payroll-prep-process-grid article { position: relative; min-height: 150px; padding: 19px; border: 1px solid #dbe9e7; border-radius: 16px; background: #fbfdfd; }
.payroll-prep-process-grid article > span { display: grid; width: 32px; height: 32px; margin-bottom: 13px; place-items: center; border-radius: 10px; background: #dff5f1; color: #087f73; font-weight: 900; }
.payroll-prep-process-grid strong { display: block; margin-bottom: 7px; }
.payroll-prep-process-grid p { margin: 0; color: var(--muted); font-size: calc(9px * var(--font-scale)); line-height: 1.55; }
.payroll-prep-self-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 15px; }
.payroll-prep-self-summary > div { display: grid; gap: 6px; padding: 16px; border: 1px solid #d9e8e6; border-radius: 14px; background: #fbfdfd; }
.payroll-prep-self-summary small { color: var(--muted); font-size: calc(8px * var(--font-scale)); }
.payroll-prep-self-summary strong { font-size: calc(15px * var(--font-scale)); }
.payroll-prep-shifts--self .payroll-prep-shift { grid-template-columns: minmax(220px, 1.5fr) minmax(130px, .8fr) 105px minmax(180px, 1fr) 155px; min-width: 850px; }

@media (max-width: 1320px) {
  .payroll-prep-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .payroll-prep-worker > summary { grid-template-columns: minmax(220px, 1.6fr) repeat(3, minmax(90px, .7fr)) auto 18px; }
  .payroll-prep-worker > summary .payroll-prep-cell:nth-of-type(5),
  .payroll-prep-worker > summary .payroll-prep-cell:nth-of-type(6) { display: none; }
}
@media (max-width: 920px) {
  .payroll-prep-toolbar { align-items: stretch; flex-direction: column; }
  .payroll-prep-toolbar form:last-child .button { width: 100%; }
  .payroll-prep-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .payroll-prep-process-grid,
  .payroll-prep-self-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .payroll-prep-worker > summary { grid-template-columns: minmax(210px, 1.5fr) 80px 110px auto 18px; }
  .payroll-prep-worker > summary .payroll-prep-cell:nth-of-type(2),
  .payroll-prep-worker > summary .payroll-prep-cell:nth-of-type(5),
  .payroll-prep-worker > summary .payroll-prep-cell:nth-of-type(6) { display: none; }
}
@media (max-width: 620px) {
  .payroll-prep-head { gap: 10px; flex-direction: column; }
  .payroll-prep-stats { grid-template-columns: 1fr 1fr; gap: 9px; }
  .payroll-prep-stat { min-height: 112px; padding: 16px; border-radius: 16px; }
  .payroll-prep-stat strong { font-size: calc(22px * var(--font-scale)); }
  .payroll-prep-stat--navy { grid-column: 1 / -1; }
  .payroll-prep-worker > summary { grid-template-columns: 1fr auto 16px; gap: 9px; min-height: 72px; }
  .payroll-prep-worker > summary .payroll-prep-cell { display: none !important; }
  .payroll-prep-person small { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .payroll-prep-worker > summary .badge { padding-left: 8px; padding-right: 8px; }
  .payroll-prep-process-grid,
  .payroll-prep-self-summary { grid-template-columns: 1fr; }
}

/* Předání mzdových podkladů a import výsledků externí mzdové firmy */
.payroll-export-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }
.payroll-export-actions form { margin: 0; }
.payroll-period-discovery { display: grid; grid-template-columns: minmax(250px, .7fr) minmax(0, 1.8fr); align-items: center; gap: 20px; padding-top: 18px; padding-bottom: 18px; }
.payroll-period-discovery > div:first-child { display: grid; gap: 5px; }
.payroll-period-discovery > div:first-child p { margin: 0; }
.payroll-period-chips { display: flex; overflow-x: auto; gap: 9px; padding: 2px 2px 7px; scrollbar-width: thin; }
.payroll-period-chip { display: grid; flex: 0 0 auto; min-width: 155px; gap: 3px; padding: 11px 13px; border: 1px solid #d7e7e4; border-radius: 13px; background: #fff; color: var(--ink); text-decoration: none; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.payroll-period-chip:hover { border-color: #86c9bf; background: #f3fbf9; transform: translateY(-1px); }
.payroll-period-chip.is-active { border-color: #169b8b; background: #eaf9f6; box-shadow: inset 0 0 0 1px rgba(22,155,139,.12); }
.payroll-period-chip strong { font-size: calc(9px * var(--font-scale)); }
.payroll-period-chip small { color: var(--muted); font-size: calc(8px * var(--font-scale)); }
.payroll-test-guide { padding-top: 14px; padding-bottom: 14px; }
.payroll-test-guide .alert { margin: 0; }
.payroll-test-import-alert { margin: 0 0 16px; }
.payroll-test-csv-form { display: grid; align-items: start; gap: 6px; margin-top: 13px; padding: 12px; border: 1px dashed #75bfb5; border-radius: 12px; background: #f1faf8; }
.payroll-test-csv-form .button { justify-self: start; }
.payroll-test-csv-form small { color: var(--muted); font-size: calc(8px * var(--font-scale)); line-height: 1.45; }
.payroll-exchange-panel { overflow: hidden; }
.payroll-exchange-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 2px 0 20px; }
.payroll-exchange-steps article { display: flex; align-items: center; min-width: 0; gap: 10px; padding: 13px; border: 1px solid #dce9e7; border-radius: 14px; background: #f8fbfb; }
.payroll-exchange-steps article > span { display: grid; flex: 0 0 30px; width: 30px; height: 30px; place-items: center; border-radius: 10px; background: #e7efee; color: #6c8581; font-weight: 900; }
.payroll-exchange-steps article.is-complete { border-color: #a8d9d1; background: #f0fbf8; }
.payroll-exchange-steps article.is-complete > span { background: #139c8b; color: #fff; }
.payroll-exchange-steps article div { display: grid; min-width: 0; gap: 3px; }
.payroll-exchange-steps strong { overflow: hidden; font-size: calc(9px * var(--font-scale)); text-overflow: ellipsis; white-space: nowrap; }
.payroll-exchange-steps small { overflow: hidden; color: var(--muted); font-size: calc(8px * var(--font-scale)); text-overflow: ellipsis; white-space: nowrap; }
.payroll-exchange-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.payroll-exchange-card { min-width: 0; padding: 18px; border: 1px solid #d8e8e5; border-radius: 16px; background: linear-gradient(145deg, #fff, #f8fcfb); }
.payroll-exchange-card h3 { margin: 5px 0 12px; overflow-wrap: anywhere; }
.payroll-exchange-card > p { margin-bottom: 0; }
.payroll-exchange-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
.payroll-exchange-meta > div { display: grid; gap: 3px; padding: 10px 12px; border: 1px solid #e0ecea; border-radius: 11px; background: #fff; }
.payroll-exchange-meta dt { color: var(--muted); font-size: calc(8px * var(--font-scale)); }
.payroll-exchange-meta dd { margin: 0; font-size: calc(10px * var(--font-scale)); font-weight: 850; }
.payroll-sent-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px; margin-top: 13px; }
.payroll-sent-form label,
.payroll-import-form,
.payroll-file-field { display: grid; gap: 6px; }
.payroll-sent-form label > span,
.payroll-file-field > span { color: var(--muted); font-size: calc(8px * var(--font-scale)); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.payroll-import-form { align-items: start; }
.payroll-import-form .button { justify-self: start; }
.payroll-file-field { padding: 13px; border: 1px dashed #9bcfc7; border-radius: 12px; background: #f2fbf9; }
.payroll-file-field input[type="file"] { width: 100%; padding: 9px; border: 1px solid #d4e5e2; border-radius: 9px; background: #fff; }
.payroll-file-field small,
.payroll-last-import { color: var(--muted); font-size: calc(8px * var(--font-scale)); line-height: 1.45; }
.payroll-last-import { margin: 12px 0 0; }
.payroll-result-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 18px 0 14px; padding-top: 18px; border-top: 1px solid var(--line); }
.payroll-result-summary > div { display: grid; gap: 5px; padding: 14px; border: 1px solid #dce9e7; border-radius: 13px; background: #fbfdfd; }
.payroll-result-summary > div.is-primary { border-color: #8dd0c5; background: linear-gradient(135deg, #eaf9f6, #f7fdfc); }
.payroll-result-summary small { color: var(--muted); font-size: calc(8px * var(--font-scale)); }
.payroll-result-summary strong { font-size: calc(14px * var(--font-scale)); }
.payroll-results-wrap { margin-top: 14px; border: 1px solid #dce9e7; border-radius: 14px; }
.payroll-results-table { min-width: 1180px; }
.payroll-results-table td { white-space: nowrap; }
.payroll-results-table td:first-child { white-space: normal; }
.payroll-results-table td:first-child small { display: block; margin-top: 4px; color: var(--muted); font-size: calc(8px * var(--font-scale)); }
.payroll-money-primary { color: #087d71; }
.payroll-publish-form { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 14px; padding: 15px; border: 1px solid #9dd4cc; border-radius: 14px; background: #effaf8; }
.payroll-publish-form p { margin: 4px 0 0; }
.payroll-self-result { background: linear-gradient(135deg, #fff 0%, #f4fbf9 100%); }
.payroll-self-net { display: grid; grid-template-columns: minmax(240px, .75fr) minmax(0, 1.55fr); gap: 18px; }
.payroll-self-net > div { display: grid; align-content: center; min-height: 220px; padding: 25px; border-radius: 20px; background: linear-gradient(145deg, #0b8f81, #38b7a8); color: #fff; box-shadow: 0 18px 38px rgba(11, 106, 97, .18); }
.payroll-self-net > div small { color: rgba(255,255,255,.75); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.payroll-self-net > div strong { margin: 10px 0 7px; font-size: calc(36px * var(--font-scale)); line-height: 1; }
.payroll-self-net > div span { color: rgba(255,255,255,.82); }
.payroll-self-net dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
.payroll-self-net dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 13px; border: 1px solid #dce9e7; border-radius: 12px; background: #fff; }
.payroll-self-net dt { color: var(--muted); font-size: calc(8px * var(--font-scale)); }
.payroll-self-net dd { margin: 0; font-size: calc(10px * var(--font-scale)); font-weight: 850; white-space: nowrap; }
.payroll-self-net dl > div.is-total { grid-column: 1 / -1; border-color: #9bd3cb; background: #eefaf7; }
.payroll-self-net dl > div.is-total dt,
.payroll-self-net dl > div.is-total dd { color: #087d71; font-size: calc(12px * var(--font-scale)); font-weight: 900; }
.payroll-reference { margin: 14px 0 0; color: var(--muted); }
.payroll-result-pending { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 17px; }
.payroll-result-pending-icon { display: grid; width: 50px; height: 50px; place-items: center; border-radius: 15px; background: #eaf4f2; color: #40827a; font-size: 25px; font-weight: 900; }
.payroll-result-pending h2 { margin: 4px 0; }
.payroll-result-pending p { margin: 0; }

@media (max-width: 1180px) {
  .payroll-exchange-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .payroll-result-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .payroll-self-net { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .payroll-export-actions,
  .payroll-export-actions form,
  .payroll-export-actions .button { width: 100%; }
  .payroll-exchange-actions { grid-template-columns: 1fr; }
  .payroll-exchange-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .payroll-result-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .payroll-publish-form { align-items: stretch; flex-direction: column; }
  .payroll-publish-form .button { width: 100%; }
}
@media (max-width: 620px) {
  .payroll-exchange-steps,
  .payroll-result-summary,
  .payroll-exchange-meta,
  .payroll-self-net dl { grid-template-columns: 1fr; }
  .payroll-sent-form { grid-template-columns: 1fr; }
  .payroll-sent-form .button,
  .payroll-import-form .button,
  .payroll-test-csv-form .button { width: 100%; }
  .payroll-self-net > div { min-height: 180px; padding: 20px; }
  .payroll-self-net > div strong { font-size: calc(29px * var(--font-scale)); }
  .payroll-self-net dl > div.is-total { grid-column: auto; }
  .payroll-result-pending { grid-template-columns: 1fr; }
}

/* Mzdový profil v detailu brigádníka */
.worker-payroll-profile-panel { scroll-margin-top: 22px; }
.worker-payroll-profile-head { align-items: flex-start; }
.worker-payroll-profile-details {
  overflow: hidden;
  border: 1px solid #cfe2df;
  border-radius: 15px;
  background: #fbfefd;
}
.worker-payroll-profile-details > summary {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 18px;
  cursor: pointer;
  list-style: none;
  background: linear-gradient(145deg, #f4fbf9, #fff);
}
.worker-payroll-profile-details > summary::-webkit-details-marker { display: none; }
.worker-payroll-profile-details > summary span:first-child { display: grid; gap: 4px; }
.worker-payroll-profile-details > summary strong { font-size: calc(12px * var(--font-scale)); }
.worker-payroll-profile-details > summary small { color: var(--muted); font-size: calc(9px * var(--font-scale)); }
.worker-payroll-profile-chevron {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-right: 2px solid var(--primary);
  border-bottom: 2px solid var(--primary);
  transform: rotate(45deg);
  transition: transform .18s ease;
}
.worker-payroll-profile-details[open] .worker-payroll-profile-chevron { transform: rotate(225deg); }
.worker-payroll-profile-body { padding: 18px; border-top: 1px solid #dbe9e7; background: #fff; }
.payroll-profile-form--compact { margin: 0; padding: 0; border: 0; box-shadow: none; background: transparent; }
.payroll-profile-form--compact .form-section { margin-top: 0; }
.payroll-prep-warning {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.payroll-prep-warning > div { min-width: 0; }
.payroll-prep-warning .button { flex: 0 0 auto; }

@media (max-width: 760px) {
  .worker-payroll-profile-head { align-items: flex-start; }
  .worker-payroll-profile-details > summary,
  .payroll-prep-warning { align-items: stretch; flex-direction: column; }
  .payroll-prep-warning .button { width: 100%; }
}

/* Payroll Excel export settings */
.payroll-export-settings { scroll-margin-top: 24px; }
.payroll-export-settings-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.payroll-export-settings-card { border: 1px solid var(--line, #d7e4e2); border-radius: 18px; padding: 18px; background: linear-gradient(145deg, #ffffff 0%, #f7fbfa 100%); box-shadow: 0 12px 28px rgba(13, 55, 52, .06); }
.payroll-export-settings-card > p { margin: 6px 0 16px; }
.payroll-export-field-group { border: 0; margin: 0 0 15px; padding: 0; }
.payroll-export-field-group:last-child { margin-bottom: 0; }
.payroll-export-field-group legend { width: 100%; padding: 0 0 7px; color: #147f78; font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; border-bottom: 1px solid #dfebe9; }
.payroll-export-field-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding-top: 9px; }
.payroll-export-field { display: flex; align-items: flex-start; gap: 9px; min-height: 52px; padding: 10px 11px; border: 1px solid #dce9e7; border-radius: 12px; background: #fff; cursor: pointer; }
.payroll-export-field:hover { border-color: #95cec8; background: #f5fbfa; }
.payroll-export-field.is-required { background: #f3f7f7; cursor: default; }
.payroll-export-field input[type="checkbox"] { width: 18px; min-width: 18px; height: 18px; min-height: 18px; flex: 0 0 18px; margin: 1px 0 0; padding: 0; accent-color: #168f86; }
.payroll-export-field input[type="checkbox"]:disabled { opacity: .72; }
.payroll-export-field span { display: grid; gap: 2px; min-width: 0; }
.payroll-export-field strong { font-size: .86rem; line-height: 1.25; }
.payroll-export-field small { color: #728582; font-size: .72rem; line-height: 1.3; }
.payroll-export-settings-form .sticky-actions { margin-top: 18px; }
.payroll-export-actions .button.secondary { white-space: nowrap; }
@media (max-width: 1100px) {
  .payroll-export-settings-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .payroll-export-field-list { grid-template-columns: 1fr; }
  .payroll-export-settings-card { padding: 14px; }
}


/* MFA recovery */
.mfa-challenge-card { max-width: 560px; }
.mfa-recovery-divider { display: flex; align-items: center; gap: 12px; margin: 22px 0 14px; color: #6f7e87; font-size: .82rem; text-align: center; }
.mfa-recovery-divider::before, .mfa-recovery-divider::after { content: ""; flex: 1; height: 1px; background: #dce5e8; }
.mfa-recovery-box { display: grid; gap: 14px; padding: 16px; border: 1px solid #c9dfe0; border-radius: 14px; background: #f4faf9; }
.mfa-recovery-box p { margin: 5px 0 0; }
.mfa-recovery-box form { margin: 0; }
.text-button { appearance: none; border: 0; padding: 4px 0; background: transparent; color: #176d6a; font: inherit; font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.text-button:hover { color: #0e4e4c; }

/* Samostatný krok HR pro schválení a zveřejnění výsledků mezd */
.payroll-exchange-step-link a {
  color: inherit;
  text-decoration: none;
}
.payroll-exchange-step-link:hover {
  border-color: #8ecfc5;
  box-shadow: 0 8px 20px rgba(15, 96, 86, .08);
}
.payroll-publication-panel {
  scroll-margin-top: 24px;
  border-color: #b9ddd7;
  background: linear-gradient(145deg, #fff 0%, #f4fbfa 100%);
}
.payroll-publication-state {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
  border: 1px solid #d9e8e5;
  border-radius: 14px;
  background: #f8fbfb;
}
.payroll-publication-state > span {
  display: grid;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 11px;
  background: #e5f1ef;
  color: #176f64;
  font-weight: 900;
}
.payroll-publication-state p {
  margin: 5px 0 0;
  color: var(--muted);
}
.payroll-publication-panel .payroll-publish-form {
  margin-top: 0;
}


/* Administrace testovacich mzdovych podkladu a retence e-mailoveho logu */
.payroll-export-actions .button.danger { white-space: nowrap; }
.mail-log-maintenance { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 18px 0 12px; padding: 15px 16px; border: 1px solid var(--line); border-radius: 14px; background: #f7fbfa; }
.mail-log-maintenance > div { min-width: 0; max-width: 720px; }
.mail-log-maintenance strong, .mail-log-maintenance small { display: block; }
.mail-log-maintenance small { margin-top: 4px; color: var(--muted); line-height: 1.45; }
.mail-log-retention-form { display: flex; align-items: end; justify-content: flex-end; gap: 10px; flex: 0 0 auto; }
.mail-log-retention-form > label:not(.check-control) { display: grid; gap: 5px; min-width: 116px; font-size: calc(10px * var(--font-scale)); font-weight: 800; }
.mail-log-retention-days { display: flex; align-items: center; gap: 7px; }
.mail-log-retention-days input { width: 88px; min-height: 40px; padding: 8px 10px; }
.mail-log-retention-days > span { color: var(--muted); font-size: calc(10px * var(--font-scale)); }
.mail-log-auto-check { min-height: 40px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; white-space: nowrap; }
.button.outline-danger { border-color: #ddb5b9; color: var(--danger); background: #fff; }
.button.outline-danger:hover { border-color: var(--danger); background: var(--danger-bg); }
@media (max-width: 1050px) {
  .mail-log-maintenance { align-items: stretch; flex-direction: column; }
  .mail-log-retention-form { justify-content: flex-start; flex-wrap: wrap; }
}
@media (max-width: 620px) {
  .mail-log-retention-form { align-items: stretch; flex-direction: column; }
  .mail-log-retention-form > label:not(.check-control), .mail-log-retention-form .button { width: 100%; }
  .mail-log-retention-days input { flex: 1 1 auto; width: auto; }
}

/* Role access matrix */
.role-access-settings { scroll-margin-top: 24px; }
.role-access-head { align-items: flex-start; }
.role-access-head .badge { flex: 0 0 auto; }
.role-access-notes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 16px 0; }
.role-access-notes > div { display: grid; gap: 4px; padding: 12px 13px; border: 1px solid #d9e7e5; border-radius: 12px; background: #f8fbfb; }
.role-access-notes strong { color: #167c75; font-size: .8rem; }
.role-access-notes span { color: var(--muted); font-size: .75rem; line-height: 1.4; }
.role-access-protection-note { margin-top: 12px; }
.role-access-role-list { display: grid; gap: 12px; margin-top: 16px; }
.role-access-role { overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.role-access-role > summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 16px; cursor: pointer; list-style: none; background: linear-gradient(145deg, #fff 0%, #f7fbfa 100%); }
.role-access-role > summary::-webkit-details-marker { display: none; }
.role-access-role > summary::after { content: "⌄"; flex: 0 0 auto; color: #47706d; font-size: 1.1rem; transition: transform .18s ease; }
.role-access-role[open] > summary::after { transform: rotate(180deg); }
.role-access-role > summary > span:first-child { display: grid; gap: 3px; min-width: 0; }
.role-access-role > summary strong { font-size: .95rem; }
.role-access-role > summary small { color: var(--muted); line-height: 1.4; }
.role-access-role-meta { display: flex; align-items: center; gap: 9px; margin-left: auto; color: var(--muted); font-size: .72rem; white-space: nowrap; }
.role-access-table-wrap { overflow-x: auto; border-top: 1px solid var(--line); }
.role-access-table { width: 100%; min-width: 820px; border-collapse: collapse; table-layout: fixed; }
.role-access-table th, .role-access-table td { padding: 11px 12px; border-bottom: 1px solid #e5eeec; vertical-align: middle; }
.role-access-table thead th { background: #f5f9f8; color: #54716f; font-size: .72rem; font-weight: 800; text-align: center; text-transform: uppercase; letter-spacing: .05em; }
.role-access-table thead th:first-child { width: 56%; text-align: left; }
.role-access-table thead th:not(:first-child) { width: 11%; }
.role-access-group-row th { padding-top: 14px; padding-bottom: 7px; background: #fff; color: #14837b; font-size: .7rem; letter-spacing: .08em; text-align: left; text-transform: uppercase; }
.role-access-module-copy { text-align: left; }
.role-access-module-copy strong, .role-access-module-copy small { display: block; }
.role-access-module-copy strong { font-size: .84rem; }
.role-access-module-copy small { margin-top: 2px; color: var(--muted); font-size: .72rem; line-height: 1.35; }
.role-access-check-cell { text-align: center; }
.role-access-check { display: inline-grid; width: 34px; height: 34px; place-items: center; margin: 0; border: 1px solid #d5e4e2; border-radius: 9px; background: #fff; cursor: pointer; }
.role-access-check:hover { border-color: #8bc9c3; background: #f4fbfa; }
.role-access-check input[type="checkbox"] { width: 18px; min-width: 18px; height: 18px; min-height: 18px; margin: 0; padding: 0; accent-color: #168f86; }
.role-access-check input[type="checkbox"]:disabled { cursor: not-allowed; opacity: .7; }
.role-access-check:has(input:disabled) { cursor: not-allowed; background: #f2f6f5; }
.role-access-na { color: #a0afad; font-size: .9rem; }
.role-access-save { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; }
.role-access-form.is-readonly .role-access-check { cursor: default; }

@media (max-width: 980px) {
  .role-access-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .role-access-role > summary { align-items: flex-start; }
  .role-access-role-meta { flex-wrap: wrap; justify-content: flex-end; white-space: normal; }
}

@media (max-width: 700px) {
  .role-access-notes { grid-template-columns: 1fr; }
  .role-access-role > summary { flex-wrap: wrap; }
  .role-access-role-meta { width: 100%; justify-content: flex-start; margin-left: 0; }
  .role-access-table { min-width: 0; table-layout: auto; }
  .role-access-table thead { display: none; }
  .role-access-table tbody, .role-access-table tr, .role-access-table td, .role-access-table th { display: block; width: 100%; }
  .role-access-group-row th { border-bottom: 1px solid #dce8e6; }
  .role-access-table tr:not(.role-access-group-row) { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 11px 12px; border-bottom: 1px solid #e5eeec; }
  .role-access-table tr:not(.role-access-group-row) td { border: 0; padding: 6px 4px; }
  .role-access-module-copy { grid-column: 1 / -1; padding: 0 4px 9px !important; }
  .role-access-check-cell::before { content: attr(data-label); display: block; margin-bottom: 5px; color: #6d817f; font-size: .65rem; font-weight: 800; text-transform: uppercase; }
  .role-access-save { align-items: stretch; flex-direction: column; }
  .role-access-save .button { width: 100%; }
}

/* Nápověda / dokumentace */
/* Samostatná položka Nápověda je mimo .nav-group-items, proto potřebuje stejné rozměry SVG jako ostatní menu. */
.nav-primary-link > svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  fill: none;
  stroke: #81aaa6;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .18s ease, transform .18s ease;
}
.nav-primary-link:hover > svg,
.nav-primary-link.active > svg { stroke: #7ee1d7; transform: translateY(-1px); }
.nav-primary-link.active > svg { filter: drop-shadow(0 0 5px rgba(126,225,215,.26)); }

.help-hero { display: grid; gap: 18px; }
.help-hero-head { align-items: flex-start; gap: 20px; }
.help-hero-head > div:first-child { max-width: 980px; }
.help-hero-head h2 { margin-bottom: 7px; }
.help-hero-head p { margin: 0; line-height: 1.65; }
.help-hero-metrics { display: grid; grid-template-columns: repeat(2,minmax(100px,1fr)); gap: 8px; flex: 0 0 auto; }
.help-hero-metrics > span { display: grid; gap: 3px; min-width: 110px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); }
.help-hero-metrics strong { color: var(--primary-dark); font-size: 1.18rem; line-height: 1; }
.help-hero-metrics small { color: var(--muted); font-size: .7rem; line-height: 1.25; }
.help-search { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; align-items: end; }
.help-search label { margin: 0; }
.help-search .filter-actions { margin: 0; align-self: end; }

/* Hlavní rozcestník */
.help-hub { margin-top: 18px; }
.help-hub-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 0 2px 12px; }
.help-hub-head h2 { margin: 2px 0 5px; }
.help-hub-head p { margin: 0; max-width: 900px; line-height: 1.55; }
.help-hub-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.help-hub-card {
  position: relative;
  min-width: 0;
  min-height: 210px;
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  grid-template-rows: 1fr auto;
  gap: 12px 13px;
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(39,73,68,.045);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.help-hub-card:hover,
.help-hub-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(21,139,126,.48);
  background: linear-gradient(180deg,#fff 0%,rgba(21,139,126,.025) 100%);
  box-shadow: 0 13px 30px rgba(39,73,68,.09);
  outline: none;
}
.help-hub-card-mark {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: rgba(21,139,126,.09);
  color: var(--primary-dark);
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .04em;
}
.help-hub-card-copy { min-width: 0; display: grid; align-content: start; gap: 6px; }
.help-hub-card-kicker { color: var(--primary); font-size: .68rem; font-weight: 800; letter-spacing: .055em; text-transform: uppercase; }
.help-hub-card-copy > strong { font-size: 1.02rem; line-height: 1.3; }
.help-hub-card-copy > small { color: var(--muted); font-size: .8rem; line-height: 1.48; }
.help-hub-card-preview { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }
.help-hub-card-preview > span { display: inline-flex; max-width: 100%; padding: 4px 7px; border-radius: 999px; background: var(--surface-soft); color: #607875; font-size: .65rem; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.help-hub-card-action { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 11px; border-top: 1px solid var(--line); color: var(--primary-dark); font-size: .78rem; font-weight: 800; }
.help-hub-card-action span { font-size: 1rem; transition: transform .16s ease; }
.help-hub-card:hover .help-hub-card-action span { transform: translateX(3px); }
.help-start-note { margin-top: 18px; display: grid; grid-template-columns: minmax(220px,.45fr) minmax(0,1fr); gap: 24px; align-items: start; }
.help-start-note h2 { margin: 3px 0 0; font-size: 1.05rem; }
.help-start-note p { margin: 0; line-height: 1.65; }

/* Vybraná oblast / výsledky vyhledávání */
.help-content-section { margin-top: 18px; scroll-margin-top: 86px; }
.help-content-head { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 14px 20px; align-items: end; margin: 0 2px 12px; }
.help-content-head > div:not(.help-breadcrumb) { min-width: 0; }
.help-content-head h2 { margin: 2px 0 5px; }
.help-content-head p { margin: 0; line-height: 1.55; }
.help-breadcrumb { grid-column: 1 / -1; display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: .76rem; }
.help-breadcrumb a { color: var(--primary); text-decoration: none; font-weight: 700; }
.help-breadcrumb a:hover { text-decoration: underline; }
.help-breadcrumb strong { color: var(--ink); }
.help-area-index { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface-soft); }
.help-area-index a { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 11px; border: 1px solid transparent; border-radius: 11px; background: #fff; color: var(--ink); text-decoration: none; }
.help-area-index a:hover { border-color: rgba(21,139,126,.35); color: var(--primary-dark); }
.help-area-index span { min-width: 0; font-size: .78rem; font-weight: 800; line-height: 1.35; }
.help-area-index small { flex: 0 0 auto; color: var(--muted); font-size: .65rem; white-space: nowrap; }

/* Kapitoly */
.help-group { scroll-margin-top: 90px; }
.help-group-title { display: flex; align-items: center; gap: 10px; margin: 22px 2px 10px; }
.help-group-title .eyebrow { margin-right: auto; }
.help-group-title h2 { margin: 0; font-size: 1.08rem; }
.help-chapter-list { display: grid; gap: 10px; }
.help-chapter { padding: 0; overflow: hidden; scroll-margin-top: 84px; }
.help-chapter:target { outline: 2px solid rgba(21,139,126,.28); outline-offset: 2px; }
.help-chapter > summary { list-style: none; display: flex; align-items: center; gap: 16px; padding: 15px 17px; cursor: pointer; }
.help-chapter > summary::-webkit-details-marker { display: none; }
.help-chapter[open] > summary { border-bottom: 1px solid var(--line); background: rgba(21,139,126,.025); }
.help-chapter-summary-copy { display: grid; gap: 3px; min-width: 0; flex: 1; }
.help-chapter-summary-copy strong { color: var(--ink); font-size: 1rem; line-height: 1.3; }
.help-chapter-summary-copy small { color: var(--muted); line-height: 1.5; max-width: 1050px; }
.help-chapter-summary-meta { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.help-access-badges { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.help-chevron { display: inline-block; width: 18px; height: 18px; border: 0; transform: none; }
.help-chapter[open] .help-chevron { transform: none; }
.help-chapter .help-chevron::before { transform: translate(-72%,-50%) rotate(42deg); }
.help-chapter .help-chevron::after { transform: translate(-28%,-50%) rotate(-42deg); }
.help-chapter[open] .help-chevron::before { transform: translate(-72%,-50%) rotate(-42deg); }
.help-chapter[open] .help-chevron::after { transform: translate(-28%,-50%) rotate(42deg); }
.help-chapter-body { padding: 14px 17px 17px; }
.help-chapter-toolbar { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; align-items: start; margin-bottom: 12px; }
.help-chapter-toc { display: flex; flex-wrap: wrap; gap: 5px; }
.help-chapter-toc span { display: inline-flex; padding: 5px 8px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--muted); font-size: .7rem; line-height: 1.25; }
.help-block-list { display: grid; gap: 10px; }
.help-block { border: 1px solid var(--line); border-radius: 14px; background: var(--surface-soft); padding: 13px 14px; }
.help-block-heading { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.help-block-heading > span { display: inline-grid; place-items: center; width: 24px; height: 24px; flex: 0 0 24px; border-radius: 7px; background: rgba(21,139,126,.10); color: var(--primary); font-size: .72rem; font-weight: 900; }
.help-block h3 { margin: 0; font-size: .92rem; }
.help-block ul { margin: 0; padding-left: 19px; display: grid; gap: 7px; }
.help-block li { color: var(--muted); line-height: 1.56; }
.help-block li::marker { color: var(--primary); }
.help-back-index { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line); font-size: .76rem; }
.help-back-index a { color: var(--primary); text-decoration: none; font-weight: 700; }
.help-back-index a:hover { text-decoration: underline; }
.help-back-index span { color: var(--muted); }

@media (max-width: 1100px) {
  .help-hub-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .help-area-index { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 760px) {
  .help-hero { gap: 14px; }
  .help-hero-head { display: grid; }
  .help-hero-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); width: 100%; }
  .help-hero-metrics > span { min-width: 0; }
  .help-search { grid-template-columns: 1fr; }
  .help-search .filter-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .help-search .filter-actions .button { width: 100%; }
  .help-hub { margin-top: 14px; }
  .help-hub-grid { grid-template-columns: 1fr; gap: 9px; }
  .help-hub-card { min-height: 0; grid-template-columns: 34px minmax(0,1fr); gap: 10px; padding: 13px; border-radius: 14px; }
  .help-hub-card-mark { width: 34px; height: 34px; border-radius: 10px; }
  .help-hub-card-copy > strong { font-size: .96rem; }
  .help-hub-card-copy > small { font-size: .76rem; }
  .help-hub-card-preview { display: none; }
  .help-hub-card-action { padding-top: 9px; font-size: .74rem; }
  .help-start-note { margin-top: 14px; grid-template-columns: 1fr; gap: 9px; }
  .help-content-head { grid-template-columns: 1fr; align-items: stretch; }
  .help-content-head .button { width: 100%; }
  .help-area-index { grid-template-columns: 1fr; padding: 8px; }
  .help-group-title { margin-top: 18px; }
  .help-chapter > summary { padding: 13px 14px; align-items: flex-start; }
  .help-chapter-summary-copy small { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .help-chapter-summary-meta { display: grid; justify-items: end; }
  .help-access-badges { display: none; }
  .help-chapter-body { padding: 12px 13px 14px; }
  .help-chapter-toolbar { grid-template-columns: 1fr; }
  .help-chapter-toolbar .button { width: 100%; }
  .help-chapter-toc { order: 2; }
  .help-block { padding: 11px 12px; }
}

@media (max-width: 420px) {
  .help-search .filter-actions { grid-template-columns: 1fr; }
  .help-hero-metrics { gap: 6px; }
  .help-hero-metrics > span { padding: 9px 10px; }
  .help-hub-card { grid-template-columns: 31px minmax(0,1fr); }
  .help-hub-card-mark { width: 31px; height: 31px; font-size: .68rem; }
  .help-chapter-summary-copy strong { font-size: .95rem; }
}

/* ===== Nápověda: rejstřík kapitol + čtečka ===== */
.help-hero-directory { margin-bottom: 16px; }
.help-directory-layout {
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.help-directory {
  padding: 0;
  overflow: hidden;
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 32px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}
.help-directory-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 17px 13px;
  border-bottom: 1px solid var(--line);
}
.help-directory-head h2 { margin: 2px 0 0; font-size: 1.03rem; }
.help-directory-nav { overflow: auto; overscroll-behavior: contain; padding: 6px 0 10px; }
.help-directory-group { border-bottom: 1px solid rgba(205,221,219,.72); }
.help-directory-group:last-child { border-bottom: 0; }
.help-directory-group > summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 15px;
  cursor: pointer;
  background: #fff;
  user-select: none;
}
.help-directory-group > summary::-webkit-details-marker { display: none; }
.help-directory-group > summary:hover { background: var(--surface-soft); }
.help-directory-group[open] > summary { background: rgba(21,139,126,.055); }
.help-directory-group > summary > span:first-child { min-width: 0; display: grid; gap: 2px; }
.help-directory-group > summary strong { font-size: .83rem; line-height: 1.3; }
.help-directory-group > summary small { color: var(--muted); font-size: .66rem; }
.help-directory-group .nav-group-chevron { flex: 0 0 18px; }
.help-directory-chapters { padding: 3px 7px 8px 18px; background: #fff; }
.help-directory-chapter {
  position: relative;
  display: grid;
  gap: 2px;
  padding: 8px 10px 8px 15px;
  border-radius: 9px;
  color: var(--ink);
  text-decoration: none;
}
.help-directory-chapter::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 13px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #a7b9b6;
}
.help-directory-chapter:hover { background: var(--surface-soft); color: var(--primary-dark); }
.help-directory-chapter.active { background: rgba(21,139,126,.10); color: var(--primary-dark); }
.help-directory-chapter.active::before { width: 5px; height: 14px; top: 10px; border-radius: 4px; background: var(--primary); }
.help-directory-chapter > span { font-size: .78rem; font-weight: 700; line-height: 1.35; }
.help-directory-chapter > small { color: var(--muted); font-size: .63rem; }

.help-reader { min-width: 0; scroll-margin-top: 84px; }
.help-reader-panel { min-height: 300px; }
.help-reader-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}
.help-reader-head h2 { margin: 3px 0 6px; }
.help-reader-summary { max-width: 1000px; line-height: 1.62; }
.help-reader-article-head .help-access-badges { flex: 0 0 auto; padding-top: 3px; }
.help-reader-toc {
  padding: 13px 14px;
  margin-bottom: 15px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface-soft);
}
.help-reader-toc > strong { display: block; margin-bottom: 8px; font-size: .76rem; }
.help-reader-toc > div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
.help-reader-toc a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 8px;
  color: var(--ink);
  text-decoration: none;
  font-size: .73rem;
  line-height: 1.35;
}
.help-reader-toc a:hover { background: #fff; color: var(--primary-dark); }
.help-reader-toc a span {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  border-radius: 6px;
  background: rgba(21,139,126,.11);
  color: var(--primary);
  font-size: .66rem;
  font-weight: 900;
}
.help-reader-blocks { display: grid; gap: 12px; }
.help-reader-block { scroll-margin-top: 90px; padding: 15px 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.help-reader-block:target { outline: 2px solid rgba(21,139,126,.25); outline-offset: 2px; }
.help-reader-block-title { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.help-reader-block-title > span { display: inline-grid; place-items: center; width: 26px; height: 26px; flex: 0 0 26px; border-radius: 8px; background: rgba(21,139,126,.11); color: var(--primary); font-size: .72rem; font-weight: 900; }
.help-reader-block-title h3 { margin: 0; font-size: .94rem; }
.help-reader-block ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.help-reader-block li { color: var(--muted); line-height: 1.62; }
.help-reader-block li::marker { color: var(--primary); }
.help-reader-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--line); }

.help-search-results { display: grid; gap: 9px; }
.help-search-results > a { display: grid; gap: 4px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); text-decoration: none; background: #fff; }
.help-search-results > a:hover { border-color: rgba(21,139,126,.38); box-shadow: 0 8px 20px rgba(27,67,63,.05); }
.help-search-results strong { font-size: .93rem; }
.help-search-results small { color: var(--muted); line-height: 1.48; }
.help-search-result-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 3px; color: var(--primary-dark); font-size: .7rem; font-weight: 800; }
.help-empty-state { min-height: 180px; }
.help-reader-welcome { display: grid; justify-items: start; align-content: start; }
.help-reader-welcome-icon { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 12px; border-radius: 12px; background: rgba(21,139,126,.11); color: var(--primary); font-size: 1.2rem; font-weight: 900; }
.help-reader-welcome h2 { margin: 3px 0 8px; }
.help-reader-welcome > p { max-width: 850px; margin: 0; line-height: 1.62; }
.help-reader-welcome-grid { width: 100%; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 18px; }
.help-reader-welcome-grid > div { display: grid; gap: 4px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-soft); }
.help-reader-welcome-grid strong { font-size: .78rem; }
.help-reader-welcome-grid small { color: var(--muted); font-size: .69rem; line-height: 1.4; }
.help-role-note { margin-top: 16px !important; font-size: .74rem; }

@media (max-width: 980px) {
  .help-directory-layout { grid-template-columns: minmax(240px, 300px) minmax(0,1fr); }
  .help-reader-toc > div { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .help-directory-layout { grid-template-columns: 1fr; gap: 12px; }
  .help-directory { position: static; max-height: none; }
  .help-directory-nav { max-height: 48vh; }
  .help-reader-head { display: grid; gap: 10px; }
  .help-reader-article-head .help-access-badges { justify-content: flex-start; }
  .help-reader-footer { display: grid; grid-template-columns: 1fr; }
  .help-reader-footer .button { width: 100%; }
  .help-reader-welcome-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .help-directory-head { padding: 13px 14px 11px; }
  .help-directory-group > summary { padding: 10px 12px; }
  .help-directory-chapters { padding-left: 13px; }
  .help-directory-chapter { padding-top: 7px; padding-bottom: 7px; }
  .help-reader-panel { min-height: 0; }
  .help-reader-block { padding: 12px; }
  .help-reader-toc { padding: 10px; }
}

/* ===== Nápověda: rozbalovací rejstřík přímo v hlavním menu ===== */
/* Nápověda je součástí skupiny Účet. */
.nav-account-help {
  overflow: hidden;
  margin-top: 2px;
  border-top: 1px solid rgba(199,220,217,.09);
}
.nav-account-help > summary {
  min-height: 39px;
  padding: 8px 10px 8px 12px;
  border-radius: 9px;
  color: #c7dcd9;
  font-size: calc(12px * var(--font-scale));
  font-weight: 800;
  letter-spacing: 0;
}
.nav-account-help[open] > summary {
  color: #fff;
  background: rgba(255,255,255,.055);
}
.nav-account-help .nav-help-items {
  display: grid;
  gap: 3px;
  padding: 3px 2px 7px 8px;
}

.nav-help-group > summary {
  min-height: 44px;
}
.nav-help-summary-label {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav-help-summary-label > svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  fill: none;
  stroke: #81aaa6;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nav-help-group[open] > summary .nav-help-summary-label > svg,
.nav-help-group > summary:hover .nav-help-summary-label > svg {
  stroke: #7ee1d7;
}
.nav-help-items {
  gap: 3px;
  padding-bottom: 7px;
}
.nav-help-overview {
  margin-bottom: 2px;
}
.nav-help-index-group {
  overflow: hidden;
  border-top: 1px solid rgba(199,220,217,.08);
}
.nav-help-index-group:first-of-type {
  border-top: 0;
}
.nav-help-index-group > summary {
  min-height: 35px;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto 14px;
  align-items: center;
  gap: 7px;
  padding: 7px 9px 7px 12px;
  border-radius: 8px;
  color: #a9c8c4;
  background: transparent;
  font-size: calc(10.5px * var(--font-scale));
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.25;
  cursor: pointer;
}
.nav-help-index-group > summary:hover,
.nav-help-index-group[open] > summary {
  color: #eef8f7;
  background: rgba(255,255,255,.05);
}
.nav-help-index-group > summary > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-help-index-group > summary > small {
  min-width: 20px;
  padding: 2px 5px;
  border-radius: 999px;
  color: #90b8b3;
  background: rgba(255,255,255,.055);
  font-size: calc(8.5px * var(--font-scale));
  font-weight: 800;
  text-align: center;
}
.nav-help-index-chevron {
  position: relative;
  width: 12px;
  height: 12px;
  color: #7fa7a3;
}
.nav-help-index-chevron::before,
.nav-help-index-chevron::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 1.25px;
  border-radius: 999px;
  background: currentColor;
  transition: transform .18s ease;
}
.nav-help-index-chevron::before { transform: translate(-70%,-50%) rotate(42deg); }
.nav-help-index-chevron::after { transform: translate(-30%,-50%) rotate(-42deg); }
.nav-help-index-group[open] .nav-help-index-chevron::before { transform: translate(-70%,-50%) rotate(-42deg); }
.nav-help-index-group[open] .nav-help-index-chevron::after { transform: translate(-30%,-50%) rotate(42deg); }
.nav-help-index-chapters {
  display: grid;
  gap: 1px;
  padding: 2px 4px 6px 13px;
}
.nav-group-items .nav-help-index-chapters .nav-help-chapter {
  position: relative;
  min-height: 0;
  display: block;
  padding: 6px 8px;
  border-radius: 7px;
  color: #9dbdb9;
  font-size: calc(10.5px * var(--font-scale));
  font-weight: 650;
  line-height: 1.3;
}
.nav-group-items .nav-help-index-chapters .nav-help-chapter::before { content: none; }
.nav-group-items .nav-help-index-chapters .nav-help-chapter:hover {
  color: #fff;
  background: rgba(255,255,255,.055);
}
.nav-group-items .nav-help-index-chapters .nav-help-chapter.active {
  color: #fff;
  background: rgba(66,199,186,.13);
  box-shadow: inset 3px 0 0 #42c7ba;
}

.help-reader-full {
  width: 100%;
}
.help-menu-guide {
  min-height: 360px;
}
.help-menu-guide-steps {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 10px;
  margin-top: 20px;
}
.help-menu-guide-steps > div {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 15px 15px 15px 48px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface-soft);
}
.help-menu-guide-steps > div > span {
  position: absolute;
  left: 13px;
  top: 14px;
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--primary);
  background: rgba(21,139,126,.11);
  font-size: .72rem;
  font-weight: 900;
}
.help-menu-guide-steps strong { font-size: .82rem; }
.help-menu-guide-steps small { color: var(--muted); font-size: .7rem; line-height: 1.45; }

@media (max-width: 760px) {
  .help-menu-guide-steps { grid-template-columns: 1fr; }
  .nav-help-index-group > summary { min-height: 38px; }
  .nav-group-items .nav-help-index-chapters .nav-help-chapter { padding-top: 7px; padding-bottom: 7px; }
}