body {
  background: var(--color-base-100);
}

/* Toolbars are rendered inside the page body and then mounted into the shared
   navbar. Never paint the temporary source position; otherwise the controls
   visibly jump when the DOM mount runs. */
[data-main-toolbar]:not(.app-navbar-toolbar) {
  display: none !important;
}

@media (max-width: 767px), (pointer: coarse) {
  :root {
    /* `dvh` follows the software keyboard and resizes the complete app shell.
       `svh` stays stable while the keyboard is shown, so only the form's own
       scroll container moves to reveal the focused field. */
    --mobile-app-viewport-height: 100svh;
  }

  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
  }

  html.mobile-modal-viewport-locked {
    width: 100%;
    height: var(--mobile-app-viewport-height);
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  html.mobile-modal-viewport-locked body {
    position: fixed !important;
    top: var(--mobile-modal-scroll-offset, 0);
    right: 0;
    left: 0;
    width: 100%;
    height: var(--mobile-app-viewport-height);
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  html.mobile-keyboard-viewport-restoring,
  html.mobile-keyboard-viewport-restoring * {
    scroll-behavior: auto !important;
  }

  /* iOS zooms the visual viewport whenever a focused control is below 16 px.
     Keeping mobile form controls at 16 px prevents the persistent shifted view. */
  :is(input, select, textarea) {
    font-size: 16px !important;
  }

  body.app-shell,
  body.app-shell > .application-drawer,
  body.app-shell > .application-drawer > .drawer-content,
  .application-tabs-ready:not(.application-embedded) .app-content,
  body.has-application-tabs:not(.application-embedded),
  body.has-application-tabs:not(.application-embedded) > .drawer,
  body.has-application-tabs:not(.application-embedded) > .drawer > .drawer-content,
  .has-application-tabs:not(.application-embedded) .app-content,
  .has-application-tabs:not(.application-embedded) .application-panels {
    height: var(--mobile-app-viewport-height) !important;
    min-height: var(--mobile-app-viewport-height) !important;
  }

  dialog.modal {
    height: var(--mobile-app-viewport-height);
    max-height: var(--mobile-app-viewport-height);
  }
}

.auth-remember-login {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  width: fit-content;
  color: color-mix(in srgb, var(--color-base-content) 78%, transparent);
  font-size: 0.875rem;
  cursor: pointer;
}

.auth-sessions-stack {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  gap: 1rem;
  overflow: hidden;
}

.auth-sessions-toolbar-panel {
  display: contents;
}

.auth-sessions-toolbar-panel[hidden],
.auth-sessions-panel[hidden] {
  display: none !important;
}

.auth-sessions-panel {
  flex: 1 1 auto;
  min-height: 0;
}

.auth-sessions-panel > .admin-grid-card {
  height: 100%;
}

.auth-sessions-table {
  min-width: 86rem;
}

.auth-sessions-table :is(th, td):first-child {
  min-width: 20rem;
}

.auth-session-device {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.auth-session-device-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: var(--radius-field);
  background: color-mix(in srgb, var(--color-primary) 12%, var(--color-base-200));
  color: var(--color-primary);
}

.auth-session-device-title,
.auth-session-device-meta {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.auth-session-device-title {
  font-weight: 700;
}

.auth-session-device-meta {
  margin-top: 0.15rem;
  color: color-mix(in srgb, var(--color-base-content) 55%, transparent);
  font-size: 0.72rem;
}

.auth-sessions-toolbar .btn-error.btn-outline {
  margin-left: auto;
}

/* Global SMTP administration */
.smtp-admin-stack {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  gap: 1rem;
  overflow: hidden;
}

.smtp-toolbar-panel {
  display: contents;
}

.smtp-toolbar-panel[hidden],
.smtp-admin-panel[hidden] {
  display: none !important;
}

.smtp-admin-panel {
  flex: 1 1 auto;
  min-height: 0;
}

.smtp-admin-panel > .admin-grid-card {
  height: 100%;
}

.smtp-delivery-panel {
  padding: 0;
}

.smtp-delivery-table {
  min-width: 82rem;
}

.smtp-delivery-table .smtp-delivery-time-column {
  width: 1%;
  white-space: nowrap;
}

.smtp-delivery-table .smtp-delivery-actions-column {
  width: 5.5rem;
  min-width: 5.5rem;
  max-width: 5.5rem;
}

.smtp-delivery-actions {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
}

.smtp-delivery-actions > [data-hint-tooltip] {
  display: inline-flex;
}

.iam-grid-table td [data-hint-tooltip] {
  display: inline-flex;
}

.iam-choice-list.is-invalid {
  border-color: var(--color-error);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-error) 55%, transparent);
}

.iam-field-error {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.6rem;
  color: var(--color-error);
  font-size: 0.78rem;
  font-weight: 600;
}

.iam-field-error[hidden] {
  display: none;
}

.smtp-delivery-actions .btn:disabled {
  opacity: 0.35;
}

.smtp-section-heading,
.smtp-form-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.smtp-section-heading {
  margin-bottom: 0.75rem;
}

.smtp-server-modal-box {
  width: min(94vw, 62rem);
  max-width: 62rem;
}

.smtp-server-form {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.smtp-server-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 1rem;
}

.smtp-server-modal-body > fieldset {
  display: grid;
  gap: 0.85rem;
  min-width: 0;
}

.smtp-server-modal-body > fieldset[disabled] {
  cursor: not-allowed;
}

.smtp-form-section {
  min-width: 0;
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-box);
  background: color-mix(in srgb, var(--color-base-100) 96%, var(--color-base-200));
  padding: 0.9rem;
}

.smtp-form-section-heading {
  margin-bottom: 0.7rem;
}

.smtp-form-section-heading > i {
  font-size: 1.05rem;
}

.smtp-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 8rem minmax(11rem, 0.55fr) minmax(11rem, 0.55fr);
  gap: 0.7rem;
  align-items: end;
}

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

.smtp-field-wide {
  grid-column: 1 / -1;
}

.smtp-options-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(9rem, 0.45fr);
  gap: 0.7rem;
  align-items: stretch;
}

.smtp-tls-verification {
  display: grid;
  grid-template-columns: minmax(16rem, 0.75fr) minmax(0, 1.25fr);
  align-items: stretch;
  gap: 0.7rem;
  margin-top: 0.7rem;
}

.smtp-tls-verification[hidden] {
  display: none;
}

.smtp-tls-warning {
  min-height: 100%;
  font-size: 0.78rem;
}

.smtp-option-card {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-field);
  background: var(--color-base-100);
  padding: 0.65rem 0.75rem;
}

.smtp-option-card > span {
  display: grid;
  min-width: 0;
  gap: 0.1rem;
}

.smtp-option-card small {
  color: color-mix(in srgb, var(--color-base-content) 55%, transparent);
  font-size: 0.72rem;
}

.smtp-scope-summary {
  display: grid;
  justify-items: start;
  gap: 0.25rem;
  min-width: 12rem;
}

.smtp-scope-table-wrap {
  max-height: 20rem;
  margin-top: 0.85rem;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-field);
  background: var(--color-base-100);
}

.smtp-scope-table {
  min-width: 46rem;
}

.smtp-scope-table thead {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--color-base-200);
}

.smtp-scope-table thead th:not(:first-child) > span {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.68rem;
  white-space: nowrap;
}

.smtp-log-modal-box {
  width: min(94vw, 58rem);
  max-width: 58rem;
  max-height: min(90dvh, 52rem);
}

.smtp-preview-modal-box {
  display: flex;
  flex-direction: column;
  width: min(96vw, 72rem);
  max-width: 72rem;
  height: min(92dvh, 58rem);
  max-height: 92dvh;
  padding: 0;
  overflow: hidden;
}

.smtp-preview-modal-body {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  padding: 1rem;
  overflow: hidden;
  background: var(--color-base-200);
}

.smtp-preview-stage,
.smtp-preview-frame {
  min-width: 0;
}

.smtp-preview-frame,
.smtp-preview-modal-body > .smtp-preview-text {
  width: 100%;
  height: 100%;
  min-height: 24rem;
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-box);
  background: #fff;
}

.smtp-preview-modal-body > .smtp-preview-text {
  margin: 0;
  padding: 1rem;
  overflow: auto;
  color: #111827;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.smtp-preview-loading {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  color: color-mix(in srgb, var(--color-base-content) 60%, transparent);
}

.smtp-preview-loading[hidden] {
  display: none;
}

.smtp-log-modal-body {
  display: grid;
  gap: 0.85rem;
  min-height: 0;
  overflow-y: auto;
  padding: 1rem;
}

.smtp-log-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
}

.smtp-log-detail-grid > div {
  min-width: 0;
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-field);
  background: var(--color-base-100);
  padding: 0.55rem 0.65rem;
}

.smtp-log-detail-grid dt {
  color: color-mix(in srgb, var(--color-base-content) 55%, transparent);
  font-size: 0.7rem;
}

.smtp-log-detail-grid dd {
  margin-top: 0.15rem;
  overflow-wrap: anywhere;
  font-weight: 600;
}

.smtp-log-message {
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-field);
  background: var(--color-base-200);
  padding: 0.7rem;
}

.smtp-log-message pre,
.smtp-log-diagnostics {
  margin-top: 0.45rem;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.72rem;
}

.smtp-server-modal-footer {
  justify-content: flex-start;
}

/* E-mail template administration */
.email-template-grid {
  min-height: clamp(26rem, 68dvh, 58rem);
}

.email-template-modal-box {
  display: flex;
  flex-direction: column;
  width: min(97vw, 92rem);
  max-width: 92rem;
  height: min(95dvh, 72rem);
  max-height: 95dvh;
  padding: 0;
  overflow: hidden;
}

.email-template-form {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.email-template-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 1rem;
}

.email-template-modal-body > fieldset {
  min-width: 0;
  border: 0;
  padding: 0;
}

.email-template-modal-body > fieldset:disabled {
  cursor: not-allowed;
}

.email-template-modal-body > fieldset:disabled :is(.input, .select, .textarea) {
  border-color: color-mix(in srgb, var(--color-base-300) 78%, transparent);
  background: var(--color-base-200);
  color: var(--color-base-content);
  opacity: 1;
}

.email-template-editor-layout {
  display: grid;
  grid-template-columns: minmax(30rem, 0.95fr) minmax(34rem, 1.05fr);
  gap: 1rem;
  min-width: 68rem;
  min-height: 100%;
}

.email-template-editor-column {
  display: grid;
  align-content: start;
  gap: 1rem;
  min-width: 0;
}

.email-template-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
  align-items: end;
}

.email-template-meta-wide {
  grid-column: span 2;
}

.email-template-enabled {
  grid-column: span 2;
}

.email-template-code-editor {
  min-height: 20rem;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.75rem;
  line-height: 1.5;
  tab-size: 2;
}

.email-template-text-editor {
  min-height: 9rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.75rem;
}

.email-template-variable-legend {
  display: grid;
  gap: 0.65rem;
  margin-top: 0.85rem;
  border: 1px dashed color-mix(in srgb, var(--color-secondary) 55%, var(--color-base-300));
  border-radius: var(--radius-box);
  background: color-mix(in srgb, var(--color-secondary) 7%, var(--color-base-100));
  padding: 0.8rem;
}

.email-template-variable-legend p {
  margin-top: 0.1rem;
  color: color-mix(in srgb, var(--color-base-content) 56%, transparent);
  font-size: 0.72rem;
}

.email-template-variable-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.email-template-variable {
  width: auto;
  height: auto;
  min-height: 2rem;
  cursor: pointer;
  gap: 0.4rem;
  padding: 0.35rem 0.55rem;
}

.email-template-variable code {
  color: var(--color-secondary);
  font-size: 0.68rem;
  font-weight: 800;
}

.email-template-variable span {
  color: color-mix(in srgb, var(--color-base-content) 65%, transparent);
  font-size: 0.68rem;
}

.email-template-preview-panel {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: calc(min(95dvh, 72rem) - 10.5rem);
  min-height: 36rem;
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-box);
  background: var(--color-base-200);
  overflow: hidden;
}

.email-template-preview-heading {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--color-base-300);
  background: var(--color-base-100);
  padding: 0.75rem 0.85rem;
}

.email-template-preview-heading h4 {
  max-width: 30rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.email-template-preview-stage {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  justify-content: center;
  overflow: auto;
  padding: 1rem;
  transition: padding 0.18s ease;
}

.email-template-preview-stage iframe {
  width: 100%;
  min-height: 100%;
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-box);
  background: #fff;
  box-shadow: 0 0.75rem 2rem color-mix(in srgb, #000 13%, transparent);
  transition: width 0.18s ease;
}

.email-template-preview-stage.is-mobile iframe {
  width: min(100%, 25rem);
}

.email-template-preview-note {
  display: flex;
  flex: 0 0 auto;
  align-items: flex-start;
  gap: 0.5rem;
  border-top: 1px solid var(--color-base-300);
  background: var(--color-base-100);
  padding: 0.65rem 0.8rem;
  color: color-mix(in srgb, var(--color-base-content) 58%, transparent);
  font-size: 0.72rem;
}

.email-template-modal-footer {
  flex: 0 0 auto;
  justify-content: flex-start;
}

@media (max-width: 767px) {
  .smtp-admin-stack {
    gap: 0.75rem;
  }

  .smtp-server-modal-box {
    width: min(96vw, 62rem);
    max-height: 96dvh;
  }

  .smtp-server-modal-body {
    padding: 0.75rem;
  }

  .smtp-form-grid,
  .smtp-form-grid-halves,
  .smtp-options-grid,
  .smtp-tls-verification {
    grid-template-columns: minmax(0, 1fr);
  }

  .smtp-field-wide,
  .smtp-field-host,
  .smtp-field-port {
    grid-column: auto;
  }

  .smtp-server-modal-footer {
    overflow-x: auto;
    white-space: nowrap;
  }

  .smtp-log-detail-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .smtp-preview-modal-box {
    width: calc(100vw - 0.75rem);
    height: calc(100dvh - 0.75rem);
    max-height: calc(100dvh - 0.75rem);
  }

  .smtp-preview-modal-body {
    padding: 0.75rem;
  }

  .email-template-modal-box {
    width: calc(100vw - 0.75rem);
    height: calc(100dvh - 0.75rem);
    max-height: calc(100dvh - 0.75rem);
  }

  .email-template-modal-body {
    padding: 0.75rem;
  }

  .email-template-editor-layout,
  .email-template-meta-grid {
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
  }

  .email-template-meta-wide,
  .email-template-enabled {
    grid-column: auto;
  }

  .email-template-code-editor {
    min-height: 18rem;
  }

  .email-template-preview-panel {
    position: static;
    height: min(70dvh, 38rem);
    min-height: 28rem;
  }

  .email-template-modal-footer {
    overflow-x: auto;
    white-space: nowrap;
  }
}

/* Invoice centre/project token multi-select.  It intentionally uses DaisyUI's
   input, checkbox and base colour variables so it follows both light and dark
   themes without a second component skin. */
.invoice-multiselect {
  position: relative;
  min-width: 0;
}

.invoice-multiselect-trigger {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 2.5rem !important;
  min-height: 2.5rem !important;
  max-height: 2.5rem !important;
  width: 100%;
  gap: 0.35rem;
  padding-block: 0;
  padding-inline: 0.75rem;
  overflow: hidden;
  cursor: pointer;
  font: inherit;
  font-size: 0.875rem;
  text-align: left;
}

.invoice-multiselect-trigger:focus,
.invoice-multiselect-trigger:focus-visible,
.invoice-multiselect-trigger[aria-expanded="true"] {
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
}

.invoice-multiselect-trigger:disabled {
  cursor: not-allowed;
}

.invoice-multiselect-summary {
  flex: 0 0 auto;
  color: color-mix(in srgb, var(--color-base-content) 58%, transparent);
  font-size: 0.78rem;
  white-space: nowrap;
}

.invoice-multiselect-chips {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  align-items: center;
  justify-content: flex-start;
  gap: 0.25rem;
  overflow: hidden;
  flex-wrap: nowrap;
}

.invoice-multiselect-chip {
  display: inline-flex;
  min-width: 0;
  max-width: 12rem;
  align-items: center;
  gap: 0.25rem;
  border: 1px solid color-mix(in srgb, var(--color-primary) 42%, var(--color-base-300));
  border-radius: var(--radius-field);
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-base-100));
  padding: 0.14rem 0.28rem 0.14rem 0.42rem;
  color: var(--color-base-content);
  font-size: 0.72rem;
  line-height: 1.2;
  white-space: nowrap;
}

.invoice-multiselect-chip > :first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.invoice-multiselect-chip-remove {
  display: inline-grid;
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: currentColor;
  cursor: pointer;
  font-size: 0.62rem;
}

.invoice-multiselect-chip-remove:hover {
  background: color-mix(in srgb, var(--color-base-content) 13%, transparent);
}

.invoice-multiselect-chevron {
  margin-left: auto;
  flex: 0 0 auto;
  color: color-mix(in srgb, var(--color-base-content) 52%, transparent);
  font-size: 0.72rem;
  transition: transform 120ms ease;
}

.invoice-multiselect-trigger[aria-expanded="true"] .invoice-multiselect-chevron {
  transform: rotate(180deg);
}

.invoice-multiselect-menu {
  position: absolute;
  z-index: 80;
  top: calc(100% + 0.35rem);
  right: 0;
  left: 0;
  display: grid;
  max-height: min(24rem, 55dvh);
  gap: 0.45rem;
  overflow: hidden;
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-box);
  background: var(--color-base-100);
  padding: 0.55rem;
  box-shadow: 0 0.8rem 2.4rem rgb(0 0 0 / 18%);
}

.invoice-multiselect-menu[hidden] {
  display: none;
}

.invoice-multiselect.invoice-multiselect-open-up .invoice-multiselect-menu {
  top: auto;
  bottom: calc(100% + 0.35rem);
}

.invoice-multiselect-search-wrap {
  min-height: 2.25rem;
}

.invoice-multiselect-search-wrap input {
  min-width: 0;
  outline: none;
}

.invoice-multiselect-options {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.invoice-multiselect-option {
  display: flex;
  min-height: 2.35rem;
  align-items: center;
  gap: 0.55rem;
  border-radius: var(--radius-field);
  padding: 0.3rem 0.45rem;
  cursor: pointer;
  font-size: 0.86rem;
}

.invoice-multiselect-option:hover {
  background: var(--color-base-200);
}

.invoice-multiselect-option[hidden],
.invoice-multiselect-option.hidden {
  display: none;
}

.invoice-multiselect-empty {
  padding: 0.45rem;
  color: color-mix(in srgb, var(--color-base-content) 58%, transparent);
  font-size: 0.8rem;
  text-align: center;
}

@media (max-width: 767px) {
  .invoice-multiselect-menu {
    position: absolute;
    top: calc(100% + 0.35rem);
    right: 0;
    bottom: auto;
    left: 0;
    max-height: min(20rem, 48dvh);
  }

  .invoice-multiselect.invoice-multiselect-open-up .invoice-multiselect-menu {
    top: auto;
    bottom: calc(100% + 0.35rem);
  }

  .invoice-multiselect-chip {
    max-width: 8rem;
  }
}

/* IAM uses the same interaction and modal language as the invoicing address book. */
.iam-grid-open {
  display: grid;
  width: max-content;
  max-width: 28rem;
  min-width: 0;
  justify-items: start;
  gap: 0.1rem;
  padding: 0;
  text-align: left;
}

.iam-grid-open > span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.iam-grid-open > small {
  max-width: 100%;
  overflow: hidden;
  color: color-mix(in srgb, var(--color-base-content) 58%, transparent);
  font-size: 0.72rem;
  font-weight: 400;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.iam-admin-page .admin-grid-card {
  padding: 0;
  overflow: hidden;
}

.iam-admin-page .admin-grid-table-wrap {
  min-height: 0;
  overscroll-behavior: contain;
}

.iam-admin-page .admin-grid-footer {
  flex: 0 0 auto;
  z-index: 3;
  margin-top: 0;
  background: var(--color-base-100);
  padding: 0.8rem 1rem;
}

.iam-detail-modal-box {
  width: min(97vw, 92rem);
  max-width: 92rem;
  height: min(96dvh, 70rem);
  max-height: 96dvh;
  padding: 0;
  overflow: hidden;
}

.iam-invitation-modal-box {
  width: min(97vw, 58rem);
  max-width: 58rem;
}

.iam-detail-fields {
  display: grid;
  min-height: 0;
  gap: 1rem;
  border: 0;
  padding: 0;
}

.iam-detail-fields.is-disabled {
  opacity: 1;
}

.iam-detail-fields.is-disabled :is(.input, .select, .textarea) {
  border-color: color-mix(in srgb, var(--color-base-300) 78%, transparent);
  background: var(--color-base-200);
  color: var(--color-base-content);
  opacity: 1;
}

.iam-detail-fields.is-disabled :is(.checkbox, .radio) {
  cursor: not-allowed;
  opacity: 1;
}

.iam-detail-footer {
  justify-content: flex-end;
}

.iam-detail-footer > :last-child {
  margin-left: 0;
}

.iam-overrides-section > summary {
  margin-bottom: 0;
}

.iam-overrides-section[open] > summary {
  margin-bottom: 1rem;
}

@media (max-width: 767px) {
  .iam-detail-modal-box,
  .iam-invitation-modal-box {
    width: calc(100vw - 0.5rem);
    max-width: calc(100vw - 0.5rem);
    height: calc(100dvh - 0.5rem);
    max-height: calc(100dvh - 0.5rem);
  }

  .iam-grid-open {
    max-width: 15rem;
  }
}

@media (max-width: 767px) {
  body.app-shell:not(.application-embedded) .mobile-menu-trigger-floating {
    position: fixed;
    z-index: 60;
    display: inline-flex;
  }

  body.app-shell:not(.application-embedded) > .application-drawer > .drawer-side {
    width: 100vw !important;
    height: 100dvh;
    opacity: 0;
    transform: none !important;
    transition: opacity 0.16s ease, visibility 0s linear 0.16s;
  }

  body.app-shell:not(.application-embedded) > .application-drawer > #app-drawer:checked ~ .drawer-side {
    opacity: 1;
    transition: opacity 0.16s ease;
  }

  body.app-shell:not(.application-embedded) > .application-drawer > .drawer-side > * {
    transform: none !important;
    translate: 0 !important;
  }

  body.app-shell:not(.application-embedded) > .application-drawer > .drawer-side > .sidebar-shell {
    width: 100vw !important;
    max-width: 100vw;
    height: 100dvh !important;
    min-height: 100dvh !important;
    border-right: 0;
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }

  body.app-shell:not(.application-embedded) [data-desktop-sidebar] > [data-sidebar-user-row] {
    width: 100% !important;
    max-width: 100%;
  }

  body.app-shell:not(.application-embedded) [data-desktop-sidebar] > [data-partner-menu-dropdown] {
    width: 100% !important;
    max-width: 100%;
  }

  body.app-shell:not(.application-embedded) [data-user-menu-dropdown] .user-menu-button,
  body.app-shell:not(.application-embedded) [data-user-menu-dropdown] .dropdown-content,
  body.app-shell:not(.application-embedded) [data-partner-menu-dropdown] .partner-menu-button,
  body.app-shell:not(.application-embedded) [data-partner-menu-dropdown] .dropdown-content {
    width: 100%;
    max-width: 100%;
  }

  body.app-shell:not(.application-embedded) [data-user-menu-dropdown] [data-profile-avatar-preview],
  body.app-shell:not(.application-embedded) [data-user-menu-dropdown] .avatar,
  body.app-shell:not(.application-embedded) [data-user-menu-dropdown] .avatar > div {
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 2.5rem;
  }

  .partner-admin-page > .admin-report-toolbar {
    display: flex;
    grid-template-columns: none;
    align-items: center;
    overflow-x: auto;
    padding-bottom: 0.7rem;
    scrollbar-width: none;
  }

  .partner-admin-page > .admin-report-toolbar::-webkit-scrollbar {
    display: none;
  }

  .partner-admin-page > .admin-report-toolbar > * {
    flex: 0 0 auto;
  }

  .partner-module-heading,
  .partner-switch-card {
    align-items: flex-start;
  }

  .partner-module-heading > div {
    align-items: flex-start;
  }

  .partner-foundation-grid {
    grid-template-columns: 1fr;
  }
}

/* Prázdný odznak (vlastník 29. 10. 2026): odznak bez textu (role, stav, název, který u záznamu chybí, nebo počítadlo
   čekající na skript) se neukazuje jako prázdná pilulka; kde má prázdná hodnota význam, píše odznak text („Bez role“). */
.badge:empty {
  display: none;
}

/* Čísla v polích (vlastník 29. 10. 2026): zarovnaná doprava se stejně širokými číslicemi, psaná zleva doprava.
   Dřívější směr zprava doleva (šipky krokování vlevo) obracelo editaci – kurzor po kliknutí skákal a číslice se psaly
   na nečekané místo. Variabilní, konstantní a specifický symbol jsou kódy, ne částky: doleva. */
input[type="number"] {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

input[type="number"]:is([data-invoice-field="vs"], [data-invoice-field="ks"], [data-invoice-field="ss"]) {
  text-align: left;
  -moz-appearance: textfield;
  appearance: textfield;
}

input[type="number"]:is([data-invoice-field="vs"], [data-invoice-field="ks"], [data-invoice-field="ss"])::-webkit-inner-spin-button,
input[type="number"]:is([data-invoice-field="vs"], [data-invoice-field="ks"], [data-invoice-field="ss"])::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.app-shell {
  min-height: 100vh;
  background: var(--color-base-100);
}

.auth-shell {
  min-height: 100vh;
  background: var(--color-base-200);
}

.auth-layout {
  width: min(72rem, calc(100% - 2rem));
  min-height: 100vh;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(22rem, 27rem);
  gap: 3rem;
  align-items: center;
  padding: 3rem 0;
}

.auth-brand {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Logo tenanta domény nad názvem (Appearance, docs/architecture/appearance.md). */
.auth-brand-logo {
  max-width: 14rem;
  max-height: 4.5rem;
  display: block;
  margin-bottom: 1.25rem;
  object-fit: contain;
  object-position: left center;
}

.auth-status {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-box);
  background: var(--color-base-100);
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  color: color-mix(in srgb, var(--color-base-content) 72%, transparent);
}

.auth-panel {
  min-width: 0;
  border: 1px solid var(--color-base-300);
  background: var(--color-base-100);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.12);
  padding: 1.5rem;
}

.invitation-public-shell {
  background:
    radial-gradient(circle at 12% 10%, color-mix(in srgb, var(--color-primary) 16%, transparent), transparent 34rem),
    radial-gradient(circle at 88% 88%, color-mix(in srgb, var(--color-secondary) 13%, transparent), transparent 32rem),
    var(--color-base-200);
}

.invitation-public-page {
  display: grid;
  width: min(58rem, calc(100% - 2rem));
  min-height: 100dvh;
  margin: 0 auto;
  align-content: center;
  gap: 1rem;
  padding: 2rem 0;
}

.invitation-public-brand {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.75rem;
  padding: 0 0.25rem;
}

.invitation-public-brand > div {
  display: grid;
  min-width: 0;
}

.invitation-public-brand strong,
.invitation-public-brand span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.invitation-public-brand > div > span {
  color: color-mix(in srgb, var(--color-base-content) 58%, transparent);
  font-size: 0.78rem;
}

.invitation-brand-icon {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: var(--radius-box);
  background: var(--color-primary);
  color: var(--color-primary-content);
  font-size: 1.05rem;
}

.invitation-public-card {
  overflow: hidden;
}

.invitation-public-card .card-body {
  gap: 1.25rem;
  padding: clamp(1.25rem, 3vw, 2rem);
}

.invitation-card-heading {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.invitation-state-icon {
  display: grid;
  width: 3.25rem;
  height: 3.25rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: var(--radius-box);
  font-size: 1.3rem;
}

.invitation-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

.invitation-detail-grid > div {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.7rem;
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-field);
  background: color-mix(in srgb, var(--color-base-200) 64%, var(--color-base-100));
  padding: 0.75rem;
}

.invitation-detail-grid > div > i {
  width: 1.2rem;
  flex: 0 0 auto;
  color: var(--color-primary);
  text-align: center;
}

.invitation-detail-grid span {
  display: grid;
  min-width: 0;
}

.invitation-detail-grid small {
  color: color-mix(in srgb, var(--color-base-content) 55%, transparent);
  font-size: 0.68rem;
}

.invitation-detail-grid strong {
  overflow-wrap: anywhere;
  font-size: 0.85rem;
}

.invitation-account-mode {
  display: flex;
  width: 100%;
}

.invitation-account-mode .btn {
  min-width: 0;
  flex: 1 1 50%;
  white-space: nowrap;
}

.invitation-account-mode .btn:checked {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-primary-content);
}

.invitation-account-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}

.invitation-account-actions[hidden],
.invitation-selected-profile[hidden],
.invitation-identity-modal [hidden] {
  display: none !important;
}

.invitation-account-actions .btn {
  min-width: 0;
  white-space: normal;
}

.invitation-selected-account-stage {
  display: grid;
  width: min(100%, 30rem);
  margin-inline: auto;
  gap: 1rem;
}

.invitation-selected-profile {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--color-primary) 62%, var(--color-base-300));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 9%, var(--color-base-100)), var(--color-base-100) 72%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--color-primary) 9%, transparent),
    0 .55rem 1.35rem color-mix(in srgb, var(--color-primary) 10%, transparent);
}

.invitation-selected-profile-body {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-direction: row;
  gap: .8rem;
  padding: .85rem 1rem;
  text-align: left;
}

.invitation-selected-profile-content {
  display: grid;
  min-width: 0;
  flex: 1 1 auto;
  gap: .08rem;
}

.invitation-selected-profile-body .avatar > div {
  display: grid;
  place-items: center;
}

.invitation-selected-profile-avatar > div {
  overflow: hidden;
  box-shadow: 0 0 0 2px var(--color-base-100), 0 0 0 3px color-mix(in srgb, var(--color-primary) 35%, transparent);
}

.invitation-selected-profile-content .badge {
  width: fit-content;
  margin-bottom: .2rem;
  font-size: .65rem;
}

.invitation-selected-profile-content strong {
  font-size: .9rem;
  line-height: 1.2;
}

.invitation-selected-profile-body strong,
.invitation-selected-profile-body small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.invitation-selected-profile-body small {
  color: color-mix(in srgb, var(--color-base-content) 58%, transparent);
  font-size: .76rem;
}

.invitation-identity-modal-box {
  display: flex;
  width: min(calc(100vw - 2rem), 34rem);
  max-width: 34rem;
  max-height: min(90dvh, 46rem);
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--color-base-300);
  background: var(--color-base-100);
}

.invitation-identity-modal-header {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--color-base-300);
  padding: 1rem;
}

.invitation-identity-modal-header > div {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: .75rem;
}

.invitation-identity-modal-header .invitation-state-icon {
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1rem;
}

.invitation-identity-modal-header small,
.invitation-identity-modal-header h2 {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.invitation-identity-modal-header small {
  color: color-mix(in srgb, var(--color-base-content) 56%, transparent);
  font-size: .7rem;
}

.invitation-identity-modal-header h2 {
  font-size: 1.05rem;
  font-weight: 700;
}

.invitation-identity-modal-header > .btn {
  flex: 0 0 auto;
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-field);
}

.invitation-identity-modal-body {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: .85rem;
  padding: 1rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.invitation-identity-modal-body .fieldset {
  min-width: 0;
}

.invitation-identity-modal-footer {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  border-top: 1px solid var(--color-base-300);
  background: color-mix(in srgb, var(--color-base-200) 42%, var(--color-base-100));
  padding: .8rem 1rem;
}

.invitation-modal-error {
  align-items: flex-start;
  font-size: .82rem;
}

.invitation-accept-form [data-invitation-mode-panel] {
  display: grid;
  gap: 0.75rem;
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-box);
  background: color-mix(in srgb, var(--color-base-200) 55%, var(--color-base-100));
  padding: 1rem;
}

.invitation-accept-form [hidden] {
  display: none !important;
}

.invitation-signed-account {
  display: grid;
  gap: 0.55rem;
}

.invitation-signed-account > label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-field);
  background: var(--color-base-100);
  padding: 0.75rem;
  cursor: pointer;
}

.invitation-signed-account > label:has(input:checked) {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary);
}

.invitation-signed-account span {
  display: grid;
  min-width: 0;
}

.invitation-signed-account small,
.invitation-signed-account em {
  color: color-mix(in srgb, var(--color-base-content) 55%, transparent);
  font-size: 0.72rem;
  font-style: normal;
}

.invitation-security-note {
  display: flex;
  justify-content: center;
  gap: 0.45rem;
  color: color-mix(in srgb, var(--color-base-content) 55%, transparent);
  font-size: 0.75rem;
  text-align: center;
}

@media (max-width: 640px) {
  .invitation-public-page {
    width: min(100% - 1rem, 58rem);
    align-content: start;
    padding: 0.75rem 0 1.25rem;
  }

  .invitation-card-heading {
    display: grid;
  }

  .invitation-detail-grid {
    grid-template-columns: 1fr;
  }

  .invitation-account-mode {
    display: grid;
  }

  .invitation-account-mode .btn {
    width: 100%;
  }

  .invitation-account-actions {
    grid-template-columns: 1fr;
  }

  .invitation-identity-modal-box {
    width: calc(100vw - .5rem);
    max-width: calc(100vw - .5rem);
    max-height: calc(100dvh - .5rem);
  }

  .invitation-identity-modal-footer {
    justify-content: flex-end;
  }
}

.calendar-panel,
.summary-ribbon,
.side-panel,
.top-panel {
  min-width: 0;
  border: 1px solid var(--color-base-300);
  background: var(--color-base-100);
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
}

.app-navbar {
  flex: 0 0 auto;
  min-height: var(--app-toolbar-height, 4.5rem);
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 1rem;
  border-bottom-color: var(--color-base-300) !important;
  background-color: var(--color-base-100) !important;
  opacity: 1;
}

.nav-target {
  display: none !important;
}

.app-navbar-toolbar {
  min-width: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.app-toolbar-flow {
  --app-toolbar-control-gap: 0.5rem;
  --app-toolbar-zone-gap: clamp(1.5rem, 4vw, 5rem);
  min-width: 0;
  width: 100%;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--app-toolbar-control-gap);
}

.app-toolbar-section {
  min-width: 0;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--app-toolbar-control-gap);
  white-space: nowrap;
}

.app-toolbar-spacer {
  min-width: var(--app-toolbar-zone-gap);
  height: 1px;
  flex: 1 1 var(--app-toolbar-zone-gap);
  pointer-events: none;
}

.mobile-user-menu-slot {
  display: none !important;
}

.application-tabbar {
  --application-content-inline-padding: 1rem;
  min-width: 0;
  min-height: var(--application-tabs-height, 3.05rem);
  position: sticky;
  top: 0;
  z-index: 31;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  border-bottom: 1px solid var(--color-base-300);
  background: var(--color-base-200);
  padding-inline: var(--application-content-inline-padding);
}

.application-tabbar.has-scroll-controls {
  grid-template-columns: minmax(0, 1fr);
}

.mobile-menu-dock {
  display: none;
}

.mobile-menu-trigger-floating {
  display: none;
}

.mobile-menu-icon {
  width: 1.15rem;
  height: 0.9rem;
  position: relative;
  display: block;
  color: currentColor;
}

.mobile-menu-icon > span {
  width: 100%;
  height: 2px;
  position: absolute;
  left: 0;
  display: block;
  border-radius: 999px;
  background: currentColor;
  transform-origin: center;
  transition: top 0.22s ease, bottom 0.22s ease, opacity 0.14s ease, transform 0.22s ease;
}

.mobile-menu-icon > span:nth-child(1) {
  top: 0;
}

.mobile-menu-icon > span:nth-child(2) {
  top: calc(50% - 1px);
}

.mobile-menu-icon > span:nth-child(3) {
  bottom: 0;
}

#app-drawer:checked + .mobile-menu-trigger-floating .mobile-menu-icon > span:nth-child(1) {
  top: calc(50% - 1px);
  transform: rotate(45deg);
}

#app-drawer:checked + .mobile-menu-trigger-floating .mobile-menu-icon > span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0.15);
}

#app-drawer:checked + .mobile-menu-trigger-floating .mobile-menu-icon > span:nth-child(3) {
  bottom: calc(50% - 1px);
  transform: rotate(-45deg);
}

.application-tabs-viewport {
  min-width: 0;
  overflow: hidden;
}

.application-tabs-list {
  min-width: 0;
  display: flex;
  align-items: end;
  gap: 0.25rem;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  padding: 0.45rem 0 0;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.application-tabs-list::-webkit-scrollbar {
  display: none;
}

.application-tab {
  max-width: 15.5rem;
  height: 2.6rem;
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--color-base-300);
  border-bottom: 0;
  border-radius: 0.62rem 0.62rem 0 0;
  background: var(--color-base-200);
  padding: 0.55rem 0.55rem 0.5rem 0.7rem;
  color: color-mix(in srgb, var(--color-base-content) 72%, transparent);
  font-size: 0.78rem;
  font-weight: 750;
  line-height: 1;
  text-decoration: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.application-tab:hover,
.application-tab:focus-visible {
  border-color: var(--color-base-300);
  background: var(--color-base-300);
  color: var(--color-base-content);
  outline: none;
}

.application-tab.is-active {
  border-color: var(--color-base-300);
  background: var(--color-base-100);
  color: var(--color-base-content);
}

.application-tab.is-active::before {
  content: none;
}

.application-tab-link {
  min-width: 0;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 0.5rem;
  color: inherit;
  text-decoration: none;
}

.application-tab > i,
.application-tab-link > i {
  flex: 0 0 auto;
  width: 1rem;
  text-align: center;
}

.application-tab-label {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.application-tab-close {
  flex: 0 0 auto;
  width: 1.35rem;
  height: 1.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--color-base-content) 44%, transparent);
  font-size: 0.65rem;
}

/* Popisek tabu aplikace (vlastník 26. 10. 2026): ořez jen do šířky (výpustka) a řádek 1.3 – při line-height 1 a
   overflow: hidden písmo s větším dotahem (Segoe UI potřebuje 1.33) usekne spodek „j“, „p“. Křížek (vlastník
   28. 10. 2026) se ukáže místo ikony při najetí nebo zaměření tabu, na dotykovém zařízení u aktivního tabu po klepnutí na něj, takže
   tab nepotřebuje místo navíc a je jen tak široký jako ikona s popiskem. Platí pro všechny styly tabů (:root kvůli
   appearance.css). */
:root .application-tabbar .application-tab {
  --application-tab-pad: 0.75rem;
  min-width: 0;
  justify-content: center;
  padding-inline: var(--application-tab-pad);
}

.application-tab-link {
  justify-content: center;
}

.application-tab-link > i {
  transition: opacity 0.12s ease;
}

.application-tab-label {
  flex: 0 1 auto;
  overflow: visible;
  overflow-x: clip;
  line-height: 1.3;
}

.application-tab-close {
  position: absolute;
  top: 50%;
  left: calc(var(--application-tab-pad, 0.75rem) + 0.5rem);
  translate: -50% -50%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}

/* Najetí jen se zařízením s myší (vlastník 28. 10. 2026): na dotykovém by změna při dotyku stála první klepnutí
   a přepnutí tabu by chtělo dvě. Klávesnice ukáže křížek u zaměřeného tabu všude. */
@media (hover: hover) {
  .application-tab:is(:hover, :focus-within) .application-tab-close:not(:disabled) {
    opacity: 1;
    pointer-events: auto;
  }

  .application-tab:is(:hover, :focus-within):has(.application-tab-close:not(:disabled)) .application-tab-link > i {
    opacity: 0;
  }
}

.application-tab:has(:focus-visible) .application-tab-close:not(:disabled) {
  opacity: 1;
  pointer-events: auto;
}

.application-tab:has(:focus-visible):has(.application-tab-close:not(:disabled)) .application-tab-link > i {
  opacity: 0;
}

/* Dotykové zařízení (vlastník 28. 10. 2026): křížek místo ikony jen u aktivního tabu po klepnutí na něj; klepnutí
   nebo posun jinde ho schová (app.js, is-close-revealed). */
@media (hover: none) {
  .application-tab.is-active.is-close-revealed .application-tab-close:not(:disabled) {
    opacity: 1;
    pointer-events: auto;
  }

  .application-tab.is-active.is-close-revealed:has(.application-tab-close:not(:disabled)) .application-tab-link > i {
    opacity: 0;
  }
}

.application-tab-close:hover,
.application-tab-close:focus-visible {
  color: var(--color-error);
  outline: none;
}

.application-tab-close:disabled {
  opacity: 0;
  pointer-events: none;
}

.application-tab.is-long-pressing {
  border-color: var(--color-primary);
  background: var(--color-base-300);
}

.application-tab-context-menu {
  width: min(16rem, calc(100vw - 1rem));
  max-height: calc(100dvh - 1rem);
  position: fixed;
  inset: auto;
  top: var(--application-tab-context-y, 0);
  left: var(--application-tab-context-x, 0);
  z-index: 1000;
  overflow-y: auto;
  margin: 0;
  color: var(--color-base-content);
}

.application-tab-context-menu::backdrop {
  background: transparent;
}

/* Closed menu hidden (owner 26. 10. 2026): DaisyUI `.menu` sets display: flex, which wins over the hiding of
   a closed popover by the browser – without the former `.dropdown` class the closed menu stayed on screen
   over the tabs (on a phone it could not be closed at all). */
.application-tab-context-menu:not(:popover-open) {
  display: none;
}

.application-tab-context-menu .application-tab-context-title {
  min-width: 0;
}

.application-tab-context-menu .application-tab-context-title > span {
  display: block;
  overflow: hidden;
  color: color-mix(in srgb, var(--color-base-content) 58%, transparent);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.application-tab-context-menu [role="menuitem"] {
  display: grid;
  grid-template-columns: 1.15rem minmax(0, 1fr);
  align-items: center;
}

.application-tab-context-menu [role="menuitem"] > i {
  width: 1.15rem;
  color: color-mix(in srgb, var(--color-base-content) 62%, transparent);
  text-align: center;
}

.application-tab-context-separator {
  height: 1px;
  min-height: 1px;
  margin: 0.35rem 0.5rem;
  background: var(--color-base-300);
}

.application-tab-context-menu button:disabled {
  opacity: 0.38;
  pointer-events: none;
}

.application-tab-scroll {
  width: var(--application-content-inline-padding);
  height: 2.6rem;
  position: absolute;
  bottom: 0;
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--color-base-content) 56%, transparent);
}

.application-tab-scroll[data-application-tabs-scroll="previous"] {
  left: 0;
}

.application-tab-scroll[data-application-tabs-scroll="next"] {
  right: 0;
}

.application-tabbar.has-scroll-controls .application-tab-scroll {
  display: inline-flex;
}

.application-tab-scroll:disabled {
  opacity: 0.25;
  cursor: default;
}

@media (min-width: 640px) {
  .application-tabbar {
    --application-content-inline-padding: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .application-tabbar {
    --application-content-inline-padding: 2rem;
  }
}

@media (max-width: 700px) {
  .application-tabbar,
  .application-tabbar.has-scroll-controls {
    grid-template-columns: minmax(0, 1fr);
    padding-inline: 0;
  }

  .application-tabbar.has-scroll-controls .application-tab-scroll,
  .application-tab-scroll {
    display: none;
  }

  .application-tabs-list {
    padding-inline: 0.45rem;
  }

  .application-tab {
    min-width: 8rem;
    max-width: 12rem;
    touch-action: pan-x;
  }

  .application-tab-context-menu.is-mobile {
    width: min(16rem, calc(100vw - 1rem)) !important;
    max-width: calc(100vw - 1rem);
    max-height: calc(100dvh - 4.5rem);
    position: fixed !important;
    inset: auto !important;
    top: var(--application-tab-context-y, 0) !important;
    left: var(--application-tab-context-x, 0) !important;
    margin: 0 !important;
    border-radius: var(--radius-box);
    padding: 0.5rem;
  }

  .application-tab-context-menu.is-mobile [role="menuitem"] {
    min-height: 2.75rem;
    align-content: center;
  }
}

.application-panels {
  display: none;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  position: relative;
  overflow: hidden;
  background: transparent;
}

.application-tabs-ready:not(.application-embedded) .app-content {
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
}

body.has-application-tabs:not(.application-embedded) {
  height: 100dvh;
  overflow: hidden;
}

body.has-application-tabs:not(.application-embedded) > .drawer,
body.has-application-tabs:not(.application-embedded) > .drawer > .drawer-content {
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

.has-application-tabs:not(.application-embedded) .app-content {
  --application-tabs-height: 3.05rem;
  --application-toolbar-height: 4.5rem;
  position: relative;
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
}

.has-application-tabs:not(.application-embedded) .application-tabbar,
.has-application-tabs:not(.application-embedded) .app-navbar {
  position: absolute;
  right: 0;
  left: 0;
}

.has-application-tabs:not(.application-embedded) .application-tabbar {
  top: 0;
  z-index: 31;
}

.has-application-tabs:not(.application-embedded) .app-navbar {
  top: var(--application-tabs-height);
  z-index: 30;
}

.has-application-tabs:not(.application-embedded) .application-panels {
  display: block;
  height: 100dvh;
  flex: 1 1 100dvh;
}

.has-application-tabs:not(.application-embedded) .app-navbar,
.has-application-tabs:not(.application-embedded) .app-main[data-application-root] {
  display: none !important;
}

.application-tabs-ready .application-panels {
  display: block;
}

.application-tabs-ready:not(.application-embedded) .app-main[data-application-root] {
  display: none;
}

.application-panel {
  position: absolute;
  inset: 0;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.application-panel[hidden] {
  display: none;
}

.application-panel-frame {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  background: transparent;
  opacity: 0;
  transition: opacity 0.18s ease;
}

.application-panel.is-loaded .application-panel-frame {
  opacity: 1;
}

/* Skeleton načítané aplikace (vlastník 28. 10. 2026, DaisyUI skeleton): pod lištou tabů toolbar a hlavní obsah
   v geometrii stránky v rámu – toolbar výšky lišty s okrajem jako toolbar, panel gridu (záhlaví, řádky, patička)
   nebo souhrn a kalendář Docházky s okraji .app-main. Šířky podle rámu (container query = media queries stránky
   v rámu): telefon od kraje ke kraji, od 640 px okraj 1.5rem, od 1024 px 2rem. */
.application-panel {
  container-type: inline-size;
}

.application-panel-loading {
  --application-skeleton-gutter: 1rem;
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-top: var(--application-tabs-height, 3.05rem);
  background: var(--color-base-100);
  pointer-events: none;
}

.application-skeleton-toolbar {
  flex: 0 0 var(--app-toolbar-height, 4.5rem);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  overflow: hidden;
  border-bottom: 1px solid var(--sk-line, var(--color-base-300));
  padding-inline: var(--application-skeleton-gutter);
}

.application-skeleton-bar {
  flex: 0 0 auto;
  width: var(--skeleton-width, 6rem);
  height: 2.5rem;
  border-radius: var(--radius-field);
}

.application-skeleton-spacer {
  flex: 1 1 auto;
}

.application-skeleton-main {
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0;
}

.application-skeleton-panel {
  min-height: 0;
  overflow: hidden;
  background: var(--color-base-100);
}

.application-skeleton-grid {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.application-skeleton-rows {
  min-height: 0;
  flex: 1 1 0;
  overflow: hidden;
}

.application-skeleton-row {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(6, minmax(6rem, 1fr));
  align-items: center;
  gap: 1rem;
  min-height: 3.2rem;
  border-bottom: 1px solid var(--sk-line-soft, var(--color-base-200));
  padding-inline: var(--application-skeleton-gutter);
}

.application-skeleton-head {
  min-height: 2.8rem;
  background: var(--sk-head, color-mix(in oklab, var(--color-base-200) 55%, var(--color-base-100)));
}

.application-skeleton-cell {
  width: var(--skeleton-width, 60%);
  height: 0.8rem;
  border-radius: 999px;
}

.application-skeleton-head .application-skeleton-cell {
  height: 0.6rem;
}

.application-skeleton-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.7rem;
  border-top: 1px solid var(--sk-line, var(--color-base-300));
  padding-inline: var(--application-skeleton-gutter);
}

.application-skeleton-footer .application-skeleton-bar {
  height: 2rem;
}

.application-skeleton-summary {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(17rem, 0.9fr) minmax(0, 2.4fr);
  min-height: 10rem;
}

.application-skeleton-overview {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.75rem;
  border-right: 1px solid var(--sk-line, var(--color-base-300));
  padding: 1rem;
}

.application-skeleton-overview > .skeleton:first-child {
  height: 1.75rem;
}

.application-skeleton-overview > .skeleton:nth-child(2) {
  max-width: 100%;
  height: 0.9rem;
}

.application-skeleton-overview > .skeleton:last-child {
  height: 2rem;
}

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

.application-skeleton-stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.6rem;
  padding: 1rem;
}

.application-skeleton-stat > .skeleton {
  width: 45%;
  height: 0.8rem;
  border-radius: 999px;
}

.application-skeleton-stat > .skeleton:nth-child(2) {
  width: 65%;
  height: 2.25rem;
  border-radius: var(--radius-field);
}

.application-skeleton-calendar {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.application-skeleton-weekdays,
.application-skeleton-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.application-skeleton-weekdays {
  flex: 0 0 2.55rem;
  align-items: center;
  justify-items: center;
  border-bottom: 1px solid var(--sk-line, var(--color-base-300));
}

.application-skeleton-weekdays > .skeleton {
  width: 1.6rem;
  height: 0.7rem;
  border-radius: 999px;
}

.application-skeleton-days {
  flex: 1 1 auto;
  grid-auto-rows: minmax(7.5rem, 1fr);
}

.application-skeleton-day {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-right: 1px solid var(--sk-line-soft, var(--color-base-200));
  border-bottom: 1px solid var(--sk-line-soft, var(--color-base-200));
  padding: 0.75rem;
}

.application-skeleton-day > .skeleton {
  width: 1.5rem;
  height: 0.9rem;
  border-radius: 999px;
}

.application-skeleton-day > .skeleton + .skeleton {
  width: 70%;
  height: 0.7rem;
}

@container (max-width: 900px) {
  .application-skeleton-summary {
    grid-template-columns: minmax(0, 1fr);
  }

  .application-skeleton-overview {
    min-height: 9.45rem;
    border-right: 0;
    border-bottom: 1px solid var(--sk-line, var(--color-base-300));
  }

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

  .application-skeleton-stat {
    min-height: 6.45rem;
  }
}

/* Další bloky skeletonu (vlastník 28. 10. 2026) – rozměry změřené na stránkách v rámu 1120 px. */
.application-skeleton-pagetabs {
  flex: 0 0 3.2rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-inline: 1rem;
}

.application-skeleton-pagetabs > .skeleton {
  width: 6rem;
  height: 0.8rem;
  border-radius: 999px;
}

.application-skeleton-notice {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 3.65rem;
  padding: 0.75rem 1rem;
}

.app-insurance-claims-new .application-skeleton-notice {
  min-height: 5.375rem;
}

.application-skeleton-notice > .skeleton {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
}

.application-skeleton-notice-text {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.application-skeleton-notice-text > .skeleton {
  width: 70%;
  height: 0.75rem;
  border-radius: 999px;
}

.application-skeleton-notice-text > .skeleton + .skeleton {
  width: 45%;
}

.application-skeleton-notice .application-skeleton-bar {
  height: 2rem;
}

.application-skeleton-tiles {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.625rem;
}

.application-skeleton-tile,
.application-skeleton-kpi {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.35rem;
  min-height: 3.95rem;
  padding: 0.75rem 1rem;
}

.application-skeleton-tile > .skeleton,
.application-skeleton-kpi > .skeleton,
.application-skeleton-chart-card > .skeleton {
  width: 40%;
  height: 0.7rem;
  border-radius: 999px;
}

.application-skeleton-tile > .skeleton + .skeleton,
.application-skeleton-kpi > .skeleton + .skeleton {
  width: 55%;
  height: 1.25rem;
  border-radius: var(--radius-field);
}

.app-holidays .application-skeleton-summary {
  min-height: 8.7rem;
}

.application-skeleton-columns {
  min-height: 0;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(20rem, 0.95fr);
  gap: 1rem;
  align-items: stretch;
}

.application-skeleton-side {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
}

.application-skeleton-side > .application-skeleton-bar {
  height: 1.5rem;
}

.application-skeleton-side-row {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.application-skeleton-side-row > .skeleton {
  width: 75%;
  height: 0.8rem;
  border-radius: 999px;
}

.application-skeleton-side-row > .skeleton + .skeleton {
  width: 45%;
  height: 0.65rem;
}

.application-skeleton-vacation {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
}

.application-skeleton-vacation-head {
  flex: 0 0 4.3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.application-skeleton-vacation-head > .application-skeleton-bar {
  height: 2.25rem;
}

.application-skeleton-vacation-rows {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  overflow: hidden;
}

.application-skeleton-vacation-row {
  display: grid;
  grid-template-columns: 12rem repeat(14, minmax(1.75rem, 1fr));
  gap: 0.35rem;
  align-items: center;
  min-height: 3rem;
}

.application-skeleton-vacation-row > .skeleton {
  height: 2rem;
  border-radius: var(--radius-field);
}

.application-skeleton-vacation-row > .skeleton:first-child {
  height: 2.5rem;
}

.application-skeleton-chart {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.application-skeleton-chart-nodes {
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
}

.application-skeleton-chart-nodes .skeleton,
.application-skeleton-chart-nodes > .skeleton {
  width: 10rem;
  height: 3.5rem;
  border-radius: var(--radius-box);
}

.application-skeleton-chart-level {
  display: flex;
  gap: 1.5rem;
}

.application-skeleton-chart-status {
  flex: 0 0 2.375rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--sk-line, var(--color-base-300));
  padding-inline: 1rem;
}

.application-skeleton-chart-status > .application-skeleton-bar {
  height: 0.75rem;
}

.is-care .application-skeleton-main {
  gap: 0.875rem;
}

.application-skeleton-care-head {
  flex: 0 0 10.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.25rem;
}

.application-skeleton-care-head > .application-skeleton-bar:first-child {
  height: 1.75rem;
}

.application-skeleton-care-head > .application-skeleton-bar + .application-skeleton-bar {
  height: 2.5rem;
}

.application-skeleton-kpis {
  flex: 0 0 6.5rem;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
}

.application-skeleton-charts {
  min-height: 0;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(16rem, 1fr);
  gap: 1rem;
}

.application-skeleton-chart-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
}

.application-skeleton-chart-card > .skeleton + .skeleton {
  width: 100%;
  height: auto;
  flex: 1 1 auto;
  border-radius: var(--radius-field);
}

.application-skeleton-profile-head {
  flex: 0 0 6.875rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
}

.application-skeleton-avatar {
  flex: 0 0 auto;
  width: 4rem;
  height: 4rem;
  border-radius: 999px;
}

.application-skeleton-profile-columns {
  min-height: 0;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 306fr) minmax(0, 719fr);
  gap: 1rem;
  align-items: start;
}

.application-skeleton-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 1rem;
  padding: 1rem;
}

.application-skeleton-form-wide {
  flex: 1 1 auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.application-skeleton-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.application-skeleton-field > .skeleton {
  width: 35%;
  height: 0.7rem;
  border-radius: 999px;
}

.application-skeleton-field > .skeleton + .skeleton {
  width: 100%;
  height: 2.5rem;
  border-radius: var(--radius-field);
}

@container (min-width: 640px) {
  .application-panel-loading {
    --application-skeleton-gutter: 1.5rem;
  }
}

@container (min-width: 768px) {
  .application-skeleton-main {
    padding: 1rem var(--application-skeleton-gutter);
  }

  .application-skeleton-panel {
    border: 1px solid var(--sk-line, var(--color-base-300));
    border-radius: var(--radius-box);
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
  }

  .application-skeleton-panel .application-skeleton-row,
  .application-skeleton-panel .application-skeleton-footer {
    padding-inline: 1rem;
  }
}

@container (min-width: 1024px) {
  .application-panel-loading {
    --application-skeleton-gutter: 2rem;
  }
}

/* Tablet (rám 768–1023 px): toolbar gridu 78 px přes odsazení obsahu (panel začíná 10 px pod ním), patička
   stránkování se zalomí do dvou řádků. */
@container (min-width: 768px) and (max-width: 1023px) {
  .application-panel-loading.has-full-toolbar .application-skeleton-toolbar {
    flex-basis: 4.875rem;
  }

  .application-panel-loading.has-full-toolbar .application-skeleton-main {
    padding-top: 0.625rem;
  }

  .application-panel-loading .application-skeleton-grid .application-skeleton-footer {
    min-height: 5.5rem;
  }
}

@container (max-width: 767px) {
  .application-skeleton-main {
    gap: 0;
  }

  .application-skeleton-summary {
    border-bottom: 1px solid var(--sk-line, var(--color-base-300));
  }

  /* Toolbar gridu na telefonu je vyšší (celý toolbar s vlastním odsazením), patička nižší. */
  .application-panel-loading.has-full-toolbar .application-skeleton-toolbar {
    flex-basis: 4.875rem;
  }

  .application-panel-loading .application-skeleton-grid .application-skeleton-footer {
    min-height: 3.2rem;
  }

  /* Telefon: panely od kraje ke kraji bez okraje, taby stránky 49 px, upozornění se zalomí, souhrn Svátků bez
     rozsahu, dlaždice katalogu a karty statistik po dvou (lichá poslední přes celou šířku). */
  .application-skeleton-pagetabs {
    flex-basis: 3.0625rem;
  }

  .application-skeleton-notice {
    flex-wrap: wrap;
    align-content: center;
  }

  .app-insurance-claims-new .application-skeleton-notice {
    min-height: 12.0625rem;
  }

  :is(.app-client-portal-requests, .app-client-portal-documents) .application-skeleton-notice {
    min-height: 9.0625rem;
  }

  .app-holidays .application-skeleton-summary {
    min-height: 0;
  }

  .app-holidays .application-skeleton-overview {
    min-height: 6.25rem;
    padding-block: 0.75rem;
  }

  .app-holidays .application-skeleton-overview > .skeleton:nth-child(2) {
    display: none;
  }

  .app-holidays .application-skeleton-stat {
    min-height: 5.95rem;
  }

  .application-skeleton-tile {
    min-height: 3.375rem;
    padding-block: 0.5rem;
  }

  .application-skeleton-kpis {
    flex-basis: auto;
  }

  .application-skeleton-kpi {
    min-height: 6.375rem;
  }

  .application-skeleton-kpi:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .application-skeleton-care-head {
    flex-basis: 17.7rem;
  }

  .application-skeleton-columns,
  .application-skeleton-profile-columns,
  .application-skeleton-charts,
  .application-skeleton-form-wide {
    grid-template-columns: minmax(0, 1fr);
  }

  .application-skeleton-tiles,
  .application-skeleton-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
  }

  .application-skeleton-vacation-row {
    grid-template-columns: 9rem repeat(14, 1.75rem);
  }

  /* Kalendář na telefonu je široký 38rem a posouvá se do strany; řádky 9rem, záhlaví nižší, statistiky nižší. */
  .application-skeleton-calendar {
    min-width: 38rem;
  }

  .application-skeleton-stat {
    gap: 0.45rem;
    padding-block: 0.6rem;
  }

  .application-skeleton-stat > .skeleton:nth-child(2) {
    height: 1.9rem;
  }

  .application-skeleton-weekdays {
    flex-basis: 2.06rem;
  }

  .application-skeleton-days {
    grid-auto-rows: 9rem;
  }
}

.application-tabs-empty {
  height: 100%;
  min-height: 20rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.5rem;
  padding: 2rem;
  color: color-mix(in srgb, var(--color-base-content) 58%, transparent);
  text-align: center;
}

.application-tabs-empty[hidden] {
  display: none;
}

.application-tabs-empty > i {
  margin-bottom: 0.35rem;
  font-size: 2rem;
}

.application-tabs-empty > strong {
  color: var(--color-base-content);
  font-size: 1rem;
}

.application-tabs-empty > span {
  font-size: 0.82rem;
}

.application-embedded {
  --application-tabs-height: 3.05rem;
  --embedded-modal-edge-gap: 1rem;
  --embedded-modal-max-height: calc(100dvh - var(--application-tabs-height) - var(--embedded-modal-edge-gap) - var(--embedded-modal-edge-gap));
  min-height: 100dvh;
  background: transparent;
}

.application-embedded .modal {
  inset: var(--application-tabs-height) 0 0;
  height: auto;
  max-height: none;
}

.application-embedded .modal > .modal-box {
  max-height: var(--embedded-modal-max-height) !important;
}

.application-embedded .invoice-detail-form,
.application-embedded .insurance-service-detail-form {
  max-height: calc(var(--embedded-modal-max-height) - 5.4rem);
}

.application-embedded .drawer {
  min-height: 100dvh;
  display: block !important;
}

.application-embedded .drawer-toggle,
.application-embedded .drawer-side,
.application-embedded .application-tabbar {
  display: none !important;
}

.application-embedded .drawer-content {
  width: 100% !important;
  min-height: 100dvh;
  display: block !important;
  overflow: visible;
}

.application-embedded .app-main {
  min-height: 100dvh;
  padding-top: calc(var(--application-tabs-height) + var(--app-toolbar-height, 4.5rem) + var(--application-main-edge-gap)) !important;
}

body.without-application-toolbar .app-navbar {
  display: none !important;
}

.has-application-tabs.without-application-toolbar:not(.application-embedded) .app-main[data-application-root] {
  padding-top: calc(var(--application-tabs-height) + 2rem) !important;
}

.application-embedded.without-application-toolbar .app-main {
  padding-top: calc(var(--application-tabs-height) + var(--application-main-edge-gap)) !important;
}

.application-embedded .app-main-contained-scroll {
  height: 100dvh;
}

.btn .fa-solid,
.btn .fa-regular {
  font-size: 0.92em;
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.app-toast-container {
  position: fixed !important;
  inset: max(0.75rem, env(safe-area-inset-top)) 0.75rem auto auto !important;
  z-index: 2147483647 !important;
  align-items: flex-end;
  width: max-content;
  max-width: min(28rem, calc(100vw - 1rem));
  padding: 0;
  pointer-events: none;
}

.app-toast {
  --app-toast-duration: 5000ms;
  position: relative;
  width: min(28rem, calc(100vw - 1rem));
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  overflow: hidden;
  box-shadow: 0 18px 48px color-mix(in srgb, var(--color-base-content) 24%, transparent);
  pointer-events: auto;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.app-toast::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 0.22rem;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.55;
  transform: scaleX(1);
  transform-origin: left center;
  animation: app-toast-countdown var(--app-toast-duration) linear forwards paused;
}

.app-toast.is-counting::after {
  animation-play-state: running;
}

@keyframes app-toast-countdown {
  to {
    transform: scaleX(0);
  }
}

.app-toast.is-hiding {
  opacity: 0;
  transform: translateY(-0.35rem);
}

.app-toast > span {
  min-width: 0;
}

@media (max-width: 700px) {
  .app-toast-container {
    inset: max(0.5rem, env(safe-area-inset-top)) auto auto 50% !important;
    align-items: center;
    width: min(28rem, calc(100vw - 1rem));
    transform: translateX(-50%);
  }

  .app-toast {
    width: 100%;
  }
}

.czech-date-field {
  position: relative;
  display: block;
  min-width: 0;
  width: 100%;
}

.czech-date-field > input {
  padding-right: 2.75rem;
}

.czech-date-trigger {
  position: absolute;
  top: 50%;
  right: 0.3rem;
  z-index: 1;
  min-height: 2rem;
  height: 2rem;
  width: 2rem;
  transform: translateY(-50%);
}

.czech-date-field.is-open > input {
  border-color: var(--color-primary);
  outline: 2px solid color-mix(in srgb, var(--color-primary) 18%, transparent);
  outline-offset: 1px;
}

.czech-date-picker {
  position: fixed;
  z-index: 2147483646;
  width: min(20rem, calc(100vw - 1rem));
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-box);
  background: var(--color-base-100);
  box-shadow: 0 20px 55px color-mix(in srgb, var(--color-base-content) 24%, transparent);
  padding: 0.75rem;
  color: var(--color-base-content);
}

.czech-date-picker[hidden] {
  display: none !important;
}

.czech-date-picker-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.55rem;
}

.czech-date-picker-header strong {
  overflow: hidden;
  font-size: 0.9rem;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.czech-date-weekdays,
.czech-date-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.2rem;
}

.czech-date-weekdays {
  margin-bottom: 0.25rem;
  color: color-mix(in srgb, var(--color-base-content) 55%, transparent);
  font-size: 0.68rem;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
}

.czech-date-weekdays span {
  padding-block: 0.2rem;
}

.czech-date-day.btn {
  min-width: 0;
  min-height: 2.15rem;
  height: 2.15rem;
  padding: 0;
  border-radius: 0.55rem;
  font-size: 0.78rem;
  font-weight: 600;
}

.czech-date-day.is-outside-month {
  color: color-mix(in srgb, var(--color-base-content) 34%, transparent);
}

.czech-date-day.is-today {
  box-shadow: inset 0 0 0 1px var(--color-primary);
  color: var(--color-primary);
}

.czech-date-day.is-selected {
  border-color: var(--color-primary);
  background: var(--color-primary);
  box-shadow: none;
  color: var(--color-primary-content);
}

.czech-date-picker-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  border-top: 1px solid var(--color-base-300);
  margin-top: 0.65rem;
  padding-top: 0.65rem;
}

@media (max-width: 420px) {
  .czech-date-picker {
    padding: 0.6rem;
  }

  .czech-date-day.btn {
    min-height: 2rem;
    height: 2rem;
  }
}

.action-popover {
  position: relative;
  display: inline-flex;
}

.action-popover-content {
  position: absolute;
  top: calc(100% + 0.55rem);
  left: 50%;
  z-index: 60;
  width: min(18rem, calc(100vw - 2rem));
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-box);
  background: var(--color-base-100);
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.14);
  padding: 0.75rem;
  color: color-mix(in srgb, var(--color-base-content) 72%, transparent);
  font-size: 0.78rem;
  line-height: 1.35;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(-0.25rem);
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s ease;
  visibility: hidden;
}

.action-popover-content::before {
  content: "";
  position: absolute;
  top: -0.35rem;
  left: 50%;
  width: 0.7rem;
  height: 0.7rem;
  border-left: 1px solid var(--color-base-300);
  border-top: 1px solid var(--color-base-300);
  background: var(--color-base-100);
  transform: translateX(-50%) rotate(45deg);
}

.action-popover:hover .action-popover-content,
.action-popover:focus-within .action-popover-content {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  visibility: visible;
}

/* Hint of an action in the bar (owner 28. 10. 2026): placed fixed under its button by app.js (initializeNavbarDropdowns),
   so the bar scrolling sideways on a phone does not clip it; the arrow points at the button. */
.app-navbar .action-popover-content.is-placed {
  position: fixed;
  max-width: calc(100vw - 1rem);
  transform: translateY(-0.25rem);
  white-space: normal;
}

.app-navbar .action-popover:is(:hover, :focus-within) .action-popover-content.is-placed {
  transform: translateY(0);
}

.app-navbar .action-popover-content.is-placed::before {
  left: var(--action-popover-arrow, 50%);
  transform: translateX(-50%) rotate(45deg);
}

/* Shown in the top layer (app.js raise): keep the look of the page against the defaults of a popover. */
.app-navbar [data-navbar-layer] {
  color: var(--color-base-content);
}

.app-navbar .action-popover-content[data-navbar-layer] {
  overflow: visible;
  color: color-mix(in srgb, var(--color-base-content) 72%, transparent);
}

.app-navbar [data-navbar-layer]::backdrop {
  display: none;
}

.nav-third {
  min-width: 0;
  flex: 1 1 0;
  display: flex;
  align-items: center;
}

.nav-third-left {
  justify-content: flex-start;
  gap: 1rem;
}

.nav-third-center {
  justify-content: center;
}

.nav-third-right {
  justify-content: flex-end;
}

.app-navbar.has-main-toolbar-right .nav-third-left {
  display: none;
}

.app-navbar.has-main-toolbar-right .nav-third-center {
  flex: 0 0 auto;
  justify-content: flex-start;
}

.app-navbar.has-main-toolbar-right .app-navbar-toolbar {
  flex: 0 0 auto;
  margin-left: auto;
}

.app-navbar.has-main-toolbar-right .mobile-menu-dock-toolbar {
  margin-left: 0;
}

.app-navbar.has-main-toolbar-right:has(.attendance-toolbar-flow) .nav-third-center {
  min-width: 0;
  flex: 1 1 auto;
}

.app-navbar.has-main-toolbar-right:has(.attendance-toolbar-flow) .app-navbar-toolbar {
  margin-left: 0;
}

.attendance-toolbar-flow,
.attendance-toolbar-actions {
  flex-wrap: nowrap;
}

.attendance-toolbar-settings {
  justify-content: center;
}

:is(.user-menu-button, .partner-menu-button) {
  min-height: 3.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  list-style: none;
  border-radius: var(--radius-field);
  padding: 0.35rem 0.55rem;
  color: var(--color-base-content);
  cursor: pointer;
  transition: background 0.16s ease;
}

:is(.user-menu-button, .partner-menu-button)::-webkit-details-marker {
  display: none;
}

:is(.user-menu-button, .partner-menu-button):hover,
:is(.user-menu-button, .partner-menu-button):focus-visible {
  background: var(--color-base-200);
  outline: none;
}

.dropdown-chevron {
  width: 1rem;
  height: 1rem;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  color: color-mix(in srgb, var(--color-base-content) 55%, transparent);
  font-size: 0.85rem;
  line-height: 1;
}

.dropdown-chevron > i {
  grid-area: 1 / 1;
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.dropdown-chevron .user-menu-angle-down {
  opacity: 0;
  transform: translateY(-0.15rem);
}

[data-user-menu-dropdown][open] .dropdown-chevron .user-menu-angle-up {
  opacity: 0;
  transform: translateY(0.15rem);
}

[data-user-menu-dropdown][open] .dropdown-chevron .user-menu-angle-down {
  opacity: 1;
  transform: translateY(0);
}

.partner-menu-chevron .partner-menu-angle-up {
  opacity: 0;
  transform: translateY(0.15rem);
}

[data-partner-menu-dropdown][open] .partner-menu-chevron .partner-menu-angle-down {
  opacity: 0;
  transform: translateY(-0.15rem);
}

[data-partner-menu-dropdown][open] .partner-menu-chevron .partner-menu-angle-up {
  opacity: 1;
  transform: translateY(0);
}

.sidebar-application-tooltip {
  max-width: min(18rem, calc(100vw - 7rem));
  position: fixed;
  z-index: 90;
  border-radius: var(--radius-field);
  background: var(--color-neutral);
  padding: 0.35rem 0.55rem;
  color: var(--color-neutral-content);
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.2;
  pointer-events: none;
  white-space: nowrap;
}

.sidebar-application-tooltip::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  position: absolute;
  top: 50%;
  left: -0.2rem;
  background: inherit;
  transform: translateY(-50%) rotate(45deg);
}

.sidebar-application-tooltip[hidden] {
  display: none;
}

.user-display-name {
  min-width: 0;
  max-width: 100%;
  display: inline-flex;
  align-items: baseline;
  gap: 0.24em;
  vertical-align: baseline;
}

.user-name-core {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-title {
  flex: 0 0 auto;
  color: color-mix(in srgb, var(--color-base-content) 62%, transparent);
  font-size: 0.82em;
  font-weight: 600;
}

.iti {
  width: 100%;
}

.iti .input {
  width: 100%;
}

.iti__country-list {
  z-index: 80;
}

:root {
  --iti-hover-color: color-mix(in srgb, var(--color-base-content) 7%, transparent);
  --iti-border-color: var(--color-base-300);
  --iti-dialcode-color: color-mix(in srgb, var(--color-base-content) 62%, transparent);
  --iti-dropdown-bg: var(--color-base-100);
  --iti-search-icon-color: color-mix(in srgb, var(--color-base-content) 58%, transparent);
  --iti-arrow-color: color-mix(in srgb, var(--color-base-content) 72%, transparent);
}

.iti__dropdown-content,
.iti__search-input {
  background: var(--color-base-100);
  color: var(--color-base-content);
}

.iti__search-input {
  min-height: 2.5rem;
  outline: none;
}

.iti__search-input:focus {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--color-primary) 55%, transparent);
}

html[data-theme="dark"] {
  --iti-hover-color: color-mix(in srgb, var(--color-base-content) 12%, transparent);
  --iti-border-color: var(--color-base-300);
  --iti-dialcode-color: color-mix(in srgb, var(--color-base-content) 72%, transparent);
  --iti-dropdown-bg: var(--color-base-100);
  --iti-search-icon-color: color-mix(in srgb, var(--color-base-content) 68%, transparent);
  --iti-arrow-color: color-mix(in srgb, var(--color-base-content) 82%, transparent);
}

.profile-heading {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.profile-avatar {
  flex: 0 0 auto;
}

.profile-avatar-form {
  margin-top: 1rem;
  border-top: 1px solid var(--color-base-300);
  padding-top: 1rem;
}

[data-profile-avatar-preview] {
  display: inline-flex;
  flex: 0 0 auto;
}

.profile-avatar-actions {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.upload-preview-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.upload-preview-row .avatar,
.upload-preview-row .tenant-logo-preview {
  flex: 0 0 auto;
}

.tenant-logo-preview {
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-field);
  background: var(--color-base-100);
  object-fit: contain;
}

.tenant-logo-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--color-base-content) 58%, transparent);
  background: var(--color-base-200);
}

@media (max-width: 640px) {
  .upload-preview-row {
    align-items: flex-start;
    flex-direction: column;
  }
}

.app-content {
  min-height: 100vh;
  overflow: visible;
}

/* Volné místo nad a pod obsahem aplikace jako nad a pod obsahem toolbaru (vlastník 26. 10. 2026): 1rem,
   na telefonu dole 0.625rem – blíž liště prohlížeče. Po stranách zůstává okraj stránky (p-4 / sm:p-6 /
   lg:p-8, stejný jako okraj toolbaru). V rámu aplikace je nahoře navíc lišta tabů a toolbar. */
body {
  --application-main-edge-gap: 1rem;
  --application-main-bottom-gap: 1rem;
}

.app-main[data-application-root] {
  padding-top: var(--application-main-edge-gap);
  padding-bottom: var(--application-main-bottom-gap);
}

.app-main {
  box-sizing: border-box;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: auto;
  overflow: visible;
}

.app-main-contained-scroll {
  height: calc(100dvh - var(--app-toolbar-height, 4.5rem));
  min-height: 0;
  overflow: hidden;
}

.has-application-tabs .app-main-contained-scroll {
  height: calc(100dvh - 7.55rem);
}

.summary-ribbon {
  display: grid;
  grid-template-columns: minmax(17rem, 0.9fr) minmax(0, 2.4fr);
  overflow: visible;
  /* Souhrn nad kalendářem se zaoblením panelu kalendáře (rounded-box) podle vzhledu (vlastník 28. 10. 2026). */
  border-radius: var(--radius-box);
}

.month-approval-notice {
  display: grid;
  gap: 1rem;
  border-bottom: 1px solid var(--color-base-300);
  background: var(--color-base-200);
  padding: 1rem;
  color: color-mix(in srgb, var(--color-base-content) 72%, transparent);
}

.month-approval-flow-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.month-approval-heading {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-width: 0;
}

.month-approval-heading > i {
  flex: 0 0 auto;
  width: 2.3rem;
  font-size: 2.15rem;
  line-height: 1;
  text-align: center;
  color: color-mix(in srgb, var(--color-base-content) 52%, transparent);
}

.month-approval-heading > div {
  min-width: 0;
  display: grid;
  gap: 0.25rem;
}

.month-approval-notice span,
.month-workflow-meta {
  font-size: 0.78rem;
}

.month-workflow-area {
  flex: 2 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.month-workflow-timeline {
  min-width: 0;
  width: 100%;
  margin: 0;
}

.month-workflow-timeline > li {
  flex: 1 1 0;
  min-width: 0;
}

@media (min-width: 1024px) {
  .month-workflow-timeline {
    grid-auto-columns: minmax(0, 1fr);
  }
}

.month-workflow-return-button {
  justify-self: start;
  width: fit-content;
  margin-top: 0.25rem;
}

.month-workflow-action-form {
  width: fit-content;
}

.month-workflow-step {
  min-width: 0;
}

.month-workflow-step .timeline-start,
.month-workflow-step .timeline-end {
  justify-self: center;
}

.month-workflow-step hr {
  background: var(--color-base-300);
}

.month-workflow-step.is-complete hr {
  background: color-mix(in srgb, var(--color-success) 46%, var(--color-base-300));
}

.month-workflow-meta {
  min-width: min(10rem, 100%);
  display: grid;
  justify-items: center;
  gap: 0.15rem;
  color: color-mix(in srgb, var(--color-base-content) 60%, transparent);
  line-height: 1.25;
  text-align: center;
}

.month-workflow-meta strong {
  color: var(--color-base-content);
  font-size: 0.78rem;
}

.month-workflow-dot {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-base-300);
  border-radius: 999px;
  background: var(--color-base-100);
  color: color-mix(in srgb, var(--color-base-content) 42%, transparent);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

.month-workflow-step.is-complete .month-workflow-dot {
  border-color: color-mix(in srgb, var(--color-success) 55%, var(--color-base-300));
  background: color-mix(in srgb, var(--color-success) 14%, var(--color-base-100));
  color: color-mix(in srgb, var(--color-success) 84%, var(--color-base-content));
}

.month-workflow-step.is-current .month-workflow-dot {
  border-color: color-mix(in srgb, var(--color-warning) 62%, var(--color-base-300));
  background: color-mix(in srgb, var(--color-warning) 18%, var(--color-base-100));
  color: color-mix(in srgb, var(--color-warning) 80%, var(--color-base-content));
}

.month-workflow-step.is-returned .month-workflow-dot {
  border-color: color-mix(in srgb, var(--color-error) 48%, var(--color-base-300));
  background: color-mix(in srgb, var(--color-error) 12%, var(--color-base-100));
  color: color-mix(in srgb, var(--color-error) 76%, var(--color-base-content));
}

.month-workflow-box {
  min-width: min(13rem, 100%);
  width: fit-content;
  max-width: min(13rem, 100%);
  border-color: var(--color-base-300);
  background: var(--color-base-100);
  padding: 0.65rem 0.75rem;
  text-align: center;
}

.month-workflow-box strong {
  display: block;
}

.month-workflow-box strong {
  color: var(--color-base-content);
  font-size: 0.86rem;
}

.month-workflow-step.is-complete .month-workflow-box {
  border-color: color-mix(in srgb, var(--color-success) 36%, var(--color-base-300));
}

.month-workflow-step.is-current .month-workflow-box {
  border-color: color-mix(in srgb, var(--color-warning) 42%, var(--color-base-300));
}

.month-workflow-step.is-returned .month-workflow-box {
  border-color: color-mix(in srgb, var(--color-error) 36%, var(--color-base-300));
}

.month-workflow-return-note {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  border: 1px solid color-mix(in srgb, var(--color-warning) 34%, var(--color-base-300));
  border-radius: var(--radius-box);
  background: color-mix(in srgb, var(--color-warning) 9%, var(--color-base-100));
  padding: 0.75rem;
}

.month-workflow-return-note > i {
  margin-top: 0.15rem;
  color: color-mix(in srgb, var(--color-warning) 82%, var(--color-base-content));
}

.month-workflow-return-note > div {
  min-width: 0;
  display: grid;
  gap: 0.15rem;
}

.month-workflow-return-note strong {
  color: var(--color-base-content);
  font-size: 0.82rem;
}

.month-workflow-return-note span {
  color: color-mix(in srgb, var(--color-base-content) 68%, transparent);
  line-height: 1.35;
}

.is-month-awaiting-approval {
  filter: saturate(0.32);
  opacity: 0.78;
}

.month-overview {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  border-right: 1px solid var(--color-base-300);
  padding: 1rem;
}

.month-title-row {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.month-title-row h2 {
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.15;
}

.month-title-row span {
  color: color-mix(in srgb, var(--color-base-content) 58%, transparent);
  font-size: 0.85rem;
  font-weight: 500;
}

.month-nav {
  width: 100%;
  flex-shrink: 0;
}

.month-nav .btn {
  flex: 1 1 0;
}

.summary-stats {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.summary-stats .stat {
  min-width: 0;
  padding: 1rem;
  border: 0;
}

/* Přerušované čáry statistik DaisyUI (vlastník 28. 10. 2026): na desktopu jen svislé mezi statistikami, na
   telefonu a tabletu (2 × 2) vnitřní kříž – svislá mezi sloupci a vodorovná mezi řádky, bez čar po okrajích. */
.summary-stats {
  --summary-stats-line: var(--border, 1px) dashed color-mix(in oklab, var(--color-base-content) 10%, transparent);
}

.summary-stats .stat + .stat {
  border-left: var(--summary-stats-line);
}

.stat-title-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.stat-desc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.meal-voucher-summary-badge {
  flex: 0 0 auto;
  gap: 0.3rem;
}

.summary-preview-button {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  min-height: 2rem;
}

.summary-preview-button .fa-solid {
  font-size: 1.15rem;
}

[data-sidebar-toggle] {
  display: none;
}

@media (min-width: 768px) {
  html {
    --application-sidebar-width: 20rem;
  }

  html[data-sidebar-state="collapsed"] {
    --application-sidebar-width: 6rem;
  }

  body.app-shell:not(.application-embedded) > .application-drawer {
    grid-template-columns: var(--application-sidebar-width) minmax(0, 1fr) !important;
  }

  body.app-shell:not(.application-embedded) > .application-drawer > .drawer-content {
    min-width: 0;
    grid-column: 2;
    grid-row: 1;
  }

  body.app-shell:not(.application-embedded) > .application-drawer > .drawer-side {
    width: var(--application-sidebar-width);
    height: 100vh;
    position: sticky;
    inset: auto;
    top: 0;
    grid-column: 1;
    grid-row: 1;
    display: block !important;
    overflow: visible;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    translate: 0 !important;
    visibility: visible !important;
  }

  body.app-shell:not(.application-embedded) > .application-drawer > .drawer-side > .drawer-overlay {
    display: none !important;
  }

  body.app-shell:not(.application-embedded) > .application-drawer > .drawer-side > *:not(.drawer-overlay) {
    transform: translateX(0) !important;
    translate: 0 !important;
  }

  body.app-shell:not(.application-embedded) > .application-drawer .sidebar-shell {
    width: var(--application-sidebar-width);
    overflow: visible;
  }

  [data-sidebar-toggle] {
    display: grid;
  }

  .sidebar-collapse-toggle.tooltip::before {
    z-index: 82;
    font-family: inherit;
    font-weight: 400;
    letter-spacing: 0;
    white-space: nowrap;
  }

  .sidebar-collapse-toggle.tooltip::after {
    z-index: 81;
  }
}

@media (min-width: 1024px) {
  body.app-shell:not(.application-embedded) .app-navbar.has-main-toolbar-full {
    padding-inline: 0;
  }

  body.app-shell:not(.application-embedded) .app-navbar.has-main-toolbar-full > .nav-third {
    display: none !important;
  }

  body.app-shell:not(.application-embedded) .modal {
    right: 0;
    left: var(--application-sidebar-width);
    width: calc(100vw - var(--application-sidebar-width));
    grid-template-columns: minmax(0, 1fr);
  }

  body.app-shell:not(.application-embedded) .modal > .modal-box {
    max-width: calc(100vw - var(--application-sidebar-width) - 2rem);
  }

  body.app-shell:not(.application-embedded) .modal::backdrop {
    background: transparent;
  }

  .admin-modal-management > .admin-list-panel .admin-section-heading > .btn {
    display: none;
  }

  .application-tabs-ready:not(.application-embedded) .app-navbar {
    display: none;
  }

  .application-embedded .app-navbar {
    position: fixed;
    top: var(--application-tabs-height);
    right: 0;
    left: 0;
    z-index: 30;
    display: flex !important;
    border-bottom: 1px solid var(--color-base-300);
    background-color: var(--color-base-100) !important;
    padding-inline: 2rem;
  }

  .application-embedded [data-main-toolbar="full"] {
    min-height: var(--app-toolbar-height, 4.5rem);
    position: fixed;
    top: var(--application-tabs-height);
    right: 0;
    left: 0;
    z-index: 31;
    margin: 0;
    border: 0;
    border-bottom: 1px solid var(--color-base-300);
    border-radius: 0;
    background: var(--color-base-100);
    box-shadow: none;
    padding: 0.6rem 2rem;
  }

  .application-embedded:has([data-main-toolbar="full"]) .app-navbar {
    display: flex !important;
  }

  .application-embedded:has([data-main-toolbar="full"]) .app-navbar > .nav-third {
    display: none !important;
  }

  .application-embedded [data-main-toolbar="left"] {
    min-height: var(--app-toolbar-height, 4.5rem);
    position: fixed;
    top: var(--application-tabs-height);
    left: 1rem;
    z-index: 31;
    width: max-content;
    max-width: calc(100% - 2rem);
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
    pointer-events: none;
  }

  .application-embedded:has([data-main-toolbar="left"]) .nav-third-left {
    flex: 1.5 1 0;
  }

  .application-embedded:has([data-main-toolbar="left"]) .nav-third-center {
    flex: 1 1 0;
  }

  .application-embedded:has([data-main-toolbar="left"]) .nav-third-right {
    flex: 0 0 auto;
  }

  .app-navbar.has-main-toolbar-full .nav-third-left,
  .app-navbar.has-main-toolbar-full .nav-third-center,
  .app-navbar.has-main-toolbar-full .nav-third-right {
    flex: 0 0 auto;
  }

  .app-navbar.has-main-toolbar-full .nav-third-center {
    display: none;
  }

  .app-navbar.has-main-toolbar-full .app-navbar-toolbar {
    flex: 1 1 auto;
  }

  .app-navbar.has-main-toolbar-left .nav-third-left {
    gap: 0;
  }

  .app-navbar.has-main-toolbar-left .nav-third-left .app-navbar-toolbar {
    width: max-content;
  }

  .app-navbar.has-main-toolbar-left .calendar-view-switch {
    pointer-events: auto;
  }

  .app-navbar-toolbar.report-toolbar {
    padding-inline: 2rem;
  }

  /* One size of the controls of the bar in every application (owner 28. 10. 2026): also the actions of
     Docházka and Profil in the middle of the bar, which used to be btn-sm. */
  .application-embedded [data-main-toolbar] .btn,
  .application-embedded [data-main-toolbar] .input,
  .application-embedded [data-main-toolbar] .select,
  .application-embedded .app-navbar .nav-third-center .btn {
    min-height: 2.5rem;
    height: 2.5rem;
  }

  .application-embedded [data-main-toolbar] .btn,
  .application-embedded .app-navbar .nav-third-center .btn {
    padding-inline: 0.7rem;
    font-size: 0.78rem;
  }

  .application-embedded .report-toolbar {
    grid-template-columns: minmax(13rem, 1fr) auto auto auto auto;
    gap: 0.4rem;
  }

  .mobile-user-menu-slot {
    display: none;
  }

  .sidebar-scroll-region {
    scrollbar-gutter: stable;
  }
}

.sidebar-brand-mark {
  display: flex;
  flex: 0 0 auto;
}

.sidebar-partner-switch-label {
  min-width: 0;
  flex: 1 1 auto;
  text-align: left;
}

.partner-menu-icon {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  flex: 0 0 2.5rem;
  place-items: center;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--color-primary) 14%, var(--color-base-100));
  color: var(--color-primary);
}

.partner-menu-panel {
  max-height: min(30rem, calc(100dvh - 11rem));
  overflow: hidden;
}

.partner-menu-form {
  display: flex;
  min-height: 0;
  flex-direction: column;
}

.partner-menu-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.partner-menu-bulk {
  display: flex;
  flex: 0 0 auto;
  gap: 0.125rem;
}

.partner-menu-options {
  display: grid;
  min-height: 0;
  gap: 0.25rem;
  max-height: min(19rem, calc(100dvh - 20rem));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-block: 0.25rem;
}

.partner-menu-option {
  display: flex;
  min-height: 3rem;
  align-items: center;
  gap: 0.7rem;
  border-radius: var(--radius-field);
  padding: 0.45rem 0.5rem;
  cursor: pointer;
  transition: background 0.16s ease;
}

.partner-menu-option:hover {
  background: var(--color-base-200);
}

.partner-menu-option:has(:focus-visible) {
  outline: 2px solid color-mix(in srgb, var(--color-primary) 45%, transparent);
  outline-offset: -2px;
}

[data-sidebar-brand-icon] {
  display: none;
}

.modal-box.tenant-switch-modal-box{display:flex;flex-direction:column;width:min(94vw,38rem);max-width:38rem;max-height:92dvh;padding:0;overflow:hidden}
.workspace-context-body{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;display:grid;gap:.85rem;padding:1rem}
.workspace-context-group{display:grid;gap:.5rem}
.workspace-subject-group{margin:0 0 0 .4rem;padding-left:.85rem}
.workspace-tenant-node{display:grid;gap:.5rem;border:1px solid var(--color-base-300);border-radius:var(--radius-box);padding:.8rem;background:var(--color-base-100)}
.workspace-tenant-heading{display:flex;align-items:center;justify-content:space-between;gap:.8rem}
.workspace-context-name{display:flex;align-items:center;gap:.55rem;min-width:0;font-size:.9rem;font-weight:600;overflow-wrap:anywhere}
.workspace-context-name>i{flex:none;color:color-mix(in oklab,var(--color-base-content) 55%,transparent)}
.workspace-context-name>div{min-width:0;display:grid;gap:.1rem}
.workspace-all-label{font-size:.72rem;line-height:1.3;font-weight:400;color:color-mix(in oklab,var(--color-base-content) 55%,transparent)}
.workspace-entity-list{display:grid;gap:.5rem;margin-left:.4rem;padding-left:.85rem}
.workspace-selection-node{position:relative;display:flex;align-items:center;justify-content:space-between;gap:.75rem;min-height:3.5rem;padding:.5rem;border-radius:var(--radius-field)}
/* Per-row connectors adapt to wrapped names. No full-height list border:
   the final elbow ends exactly at the last subject's vertical midpoint. */
.workspace-entity-node::before{content:"";position:absolute;left:-.85rem;top:0;width:.85rem;height:50%;border-left:1px solid var(--color-base-300);border-bottom:1px solid var(--color-base-300);pointer-events:none}
.workspace-entity-node::after{content:"";position:absolute;left:-.85rem;top:50%;bottom:-.5rem;border-left:1px solid var(--color-base-300);pointer-events:none}
.workspace-entity-node:last-child::before{border-bottom-left-radius:.35rem}
.workspace-entity-node:last-child::after{display:none}
.workspace-selection-node.is-current{background:color-mix(in oklab,var(--color-primary) 9%,var(--color-base-100))}
.workspace-entity-list.is-single{margin-left:0;padding-left:0;border:0}
.workspace-entity-list.is-single .workspace-entity-node::before,.workspace-entity-list.is-single .workspace-entity-node::after{display:none}
.workspace-subject-name{display:flex;align-items:center;gap:.6rem;min-width:0;overflow-wrap:anywhere;font-size:.85rem}
.workspace-subject-name>i{flex:none;width:1rem;text-align:center;color:var(--color-primary)}
.workspace-subject-name>div{min-width:0;display:grid;gap:.1rem}
.workspace-subject-name small{font-size:.7rem;color:color-mix(in oklab,var(--color-base-content) 55%,transparent)}
.workspace-context-action,.workspace-current{flex:none}
.workspace-current-label{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;overflow-wrap:anywhere}
.workspace-current-label>i{font-size:.65rem}
.tenant-switch-modal-box>.invoice-detail-toolbar,.tenant-switch-modal-box>.invoice-detail-footer{flex:none}
@media(max-width:639px){.workspace-context-body{padding:.75rem;gap:.65rem}.workspace-tenant-node{padding:.65rem}.workspace-tenant-heading{gap:.5rem}.workspace-context-action .btn{padding-inline:.55rem}.workspace-selection-node{gap:.45rem}.workspace-subject-group{margin-left:.2rem;padding-left:.65rem}.workspace-context-name{font-size:.85rem}.workspace-subject-name{font-size:.8rem}}

@media (min-width: 768px) {
  .tenant-switch-modal-box {
    width: min(38rem, calc(100vw - 2rem));
    max-width: 38rem;
  }

  html[data-sidebar-state="collapsed"] .sidebar-shell {
    width: 6rem;
    gap: 0.75rem;
    padding: 0.75rem;
  }

  html[data-sidebar-state="collapsed"] [data-sidebar-brand] {
    justify-content: center;
    padding-left: 0.25rem;
  }

  html[data-sidebar-state="collapsed"] [data-sidebar-brand-copy],
  html[data-sidebar-state="collapsed"] .sidebar-user-copy,
  html[data-sidebar-state="collapsed"] .dropdown-chevron {
    display: none;
  }

  html[data-sidebar-state="collapsed"] [data-sidebar-brand-logo] {
    display: none;
  }

  html[data-sidebar-state="collapsed"] [data-sidebar-brand-icon] {
    display: flex;
  }

  html[data-sidebar-state="collapsed"] .partner-menu-button {
    justify-content: center;
    padding-inline: 0;
  }

  html[data-sidebar-state="collapsed"] :is([data-user-menu-dropdown], [data-partner-menu-dropdown]) {
    position: relative;
    overflow: visible;
  }

  html[data-sidebar-state="collapsed"] :is([data-user-menu-dropdown], [data-partner-menu-dropdown]) > .dropdown-content {
    right: auto;
    left: calc(100% + 0.75rem);
    width: min(22rem, calc(100vw - 7.5rem)) !important;
    max-width: min(22rem, calc(100vw - 7.5rem)) !important;
    margin: 0;
    transform: none;
  }

  html[data-sidebar-state="collapsed"] [data-partner-menu-dropdown] > .dropdown-content {
    top: 0;
    bottom: auto;
  }

  html[data-sidebar-state="collapsed"] [data-user-menu-dropdown] > .dropdown-content {
    top: auto;
    bottom: 0;
  }

  html[data-sidebar-state="collapsed"] body.app-shell:not(.application-embedded) > .application-drawer > .drawer-side:has(:is([data-user-menu-dropdown], [data-partner-menu-dropdown])[open]) {
    z-index: 90;
  }

  html[data-sidebar-state="collapsed"] [data-partner-menu-dropdown] :is(.sidebar-partner-switch-label, .dropdown-chevron) {
    display: none;
  }

  /* The menu items on the centre line of the logo icon, the partner, the avatar and the settings (owner 28. 10. 2026):
     the scrollbar of the menu (transparent, but ~11 px wide on the right) moved them 5 px to the left. The room is
     kept on both sides; overlay scrollbars take none. */
  html[data-sidebar-state="collapsed"] .sidebar-scroll-region {
    scrollbar-gutter: stable both-edges;
  }

  html[data-sidebar-state="collapsed"] .app-menu-tree {
    width: 100%;
    margin: 0;
    padding: 0.25rem 0;
  }

  html[data-sidebar-state="collapsed"] .app-menu-tree {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 0.125rem;
    overflow: visible;
    background: transparent;
  }

  html[data-sidebar-state="collapsed"] .app-menu-tree li,
  html[data-sidebar-state="collapsed"] .app-menu-tree details,
  html[data-sidebar-state="collapsed"] .app-menu-tree ul {
    display: contents;
  }

  html[data-sidebar-state="collapsed"] .app-menu-tree summary {
    display: none;
  }

  html[data-sidebar-state="collapsed"] .app-menu-tree li::before,
  html[data-sidebar-state="collapsed"] .app-menu-tree details::before,
  html[data-sidebar-state="collapsed"] .app-menu-tree ul::before {
    content: none !important;
    display: none !important;
  }

  html[data-sidebar-state="collapsed"] .app-menu-tree a {
    width: 2.5rem;
    min-width: 2.5rem;
    height: 2.5rem;
    min-height: 2.5rem;
    display: grid;
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr;
    grid-auto-flow: row;
    place-items: center;
    gap: 0;
    margin: 0;
    border-radius: var(--radius-field);
    padding: 0;
    font-size: 0;
    /* The hidden name is an anonymous grid item in the next row; without a height of its own the
       icon keeps the whole 2.5rem cell and stays in its middle (it was pushed up by 10 px). */
    line-height: 0;
    grid-auto-rows: 0;
  }

  html[data-sidebar-state="collapsed"] .app-menu-tree a > i {
    width: 1rem;
    height: 1rem;
    grid-area: 1 / 1;
    align-self: center;
    justify-self: center;
    font-size: 0.9rem;
    line-height: 1;
    text-align: center;
  }

  html[data-sidebar-state="collapsed"] .user-menu-button {
    justify-content: center;
    padding-inline: 0;
  }

  /* Collapsed (and the rail): Inbox, the theme and Nastavení aplikace above the avatar, the floating tooltip of the menu. */
  html[data-sidebar-state="collapsed"] .sidebar-user-row {
    flex-direction: column-reverse;
    gap: 0.25rem;
  }

  html[data-sidebar-state="collapsed"] .sidebar-user-row > [data-user-menu-dropdown] {
    width: 100%;
    flex: 0 0 auto;
  }

  html[data-sidebar-state="collapsed"] .sidebar-user-actions {
    flex-direction: column;
  }

  html[data-sidebar-state="collapsed"] .sidebar-user-actions .tooltip::before,
  html[data-sidebar-state="collapsed"] .sidebar-user-actions .tooltip::after {
    display: none;
  }

  html[data-sidebar-state="collapsed"] [data-sidebar-brand] {
    flex-direction: column;
    gap: 0.5rem;
  }

}

/* Postranní menu podle vzoru vlastníka (24. 10. 2026): šedý podklad bez okraje vedle bílého obsahu,
   logo a sbalení nahoře, vzdušné sekce s tichými popisky (šipka jen při najetí), lehké ikony,
   vnořené skupiny jako rozbalovací položka s odsazenými podpoložkami, aktivní aplikace jako tmavá
   „pilulka“ (ve tmavém režimu světlá), nastavení a uživatel dole. Stavba je původní menu
   (details/summary, menu-active, data-sidebar-*). */
.sidebar-shell.sidebar-shell {
  border-right: 0;
  background: var(--color-base-200);
}

/* The logo on the line of the menu icons, the partner icon and the avatar (owner 28. 10. 2026). */
[data-sidebar-brand] {
  padding: 0.25rem 0.25rem 0.5rem 0.625rem;
}

.sidebar-collapse-toggle {
  border: 1px solid var(--color-base-300);
  background: var(--color-base-100);
  color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
  box-shadow: none;
}

.sidebar-scroll-region {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

.sidebar-scroll-region:hover {
  scrollbar-color: color-mix(in oklab, var(--color-base-content) 22%, transparent) transparent;
}

.app-menu-tree {
  gap: 0.125rem;
  padding: 0;
  font-size: 0.875rem;
  background: transparent;
}

.app-menu-tree ul {
  margin-inline-start: 0;
  padding-inline-start: 0;
}

.app-menu-tree ul::before {
  display: none;
}

.app-menu-tree li > a,
.app-menu-tree ul details > summary {
  gap: 0.75rem;
  border-radius: 0.65rem;
  padding: 0.5rem 0.7rem;
  line-height: 1.25rem;
  color: color-mix(in oklab, var(--color-base-content) 88%, transparent);
}

.app-menu-tree li > a > i,
.app-menu-tree ul details > summary > i {
  width: 1rem;
  font-size: 0.85rem;
  text-align: center;
  color: color-mix(in oklab, var(--color-base-content) 45%, transparent);
}

.app-menu-tree li > a:hover,
.app-menu-tree ul details > summary:hover {
  background: color-mix(in oklab, var(--color-base-content) 6%, transparent);
  color: var(--color-base-content);
}

.app-menu-tree li > a.menu-active,
.app-menu-tree li > a.menu-active:hover {
  background: var(--color-base-content);
  color: var(--color-base-100);
  font-weight: 500;
  box-shadow: 0 1px 3px color-mix(in oklab, var(--color-base-content) 30%, transparent);
}

.app-menu-tree li > a.menu-active > i {
  color: inherit;
}

/* Section labels (Personalistika, Pojištění …): quiet text with room above; the arrow shows on hover. */
.app-menu-tree > li > details > summary {
  margin-top: 1.1rem;
  padding: 0.25rem 0.7rem;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1rem;
  color: color-mix(in oklab, var(--color-base-content) 48%, transparent);
  background: transparent !important;
}

.app-menu-tree > li:first-child > details > summary {
  margin-top: 0.25rem;
}

.app-menu-tree > li > details > summary > i {
  display: none;
}

.app-menu-tree > li > details > summary::after {
  opacity: 0;
  transition: opacity 0.15s ease;
}

.app-menu-tree > li > details > summary:is(:hover, :focus-visible)::after,
.app-menu-tree > li > details:not([open]) > summary::after {
  opacity: 1;
}

.app-menu-tree > li > details > summary:hover {
  color: var(--color-base-content);
}

/* A nested group (Finanční reporty, Administrace in Pojištění): an item with its arrow, children indented. */
.app-menu-tree ul details > ul {
  margin: 0.125rem 0 0.25rem 1.2rem;
  border-left: 1px solid color-mix(in oklab, var(--color-base-content) 12%, transparent);
  padding-left: 0.45rem;
}

.partner-menu-button {
  min-height: 2.75rem;
  border: 1px solid var(--color-base-300);
  background: var(--color-base-100);
}

.partner-menu-button:hover,
.partner-menu-button:focus-visible {
  background: var(--color-base-100);
  border-color: color-mix(in oklab, var(--color-base-content) 22%, transparent);
}

.partner-menu-icon {
  width: 2rem;
  height: 2rem;
  flex-basis: 2rem;
}

/* The user with Inbox, the theme and Nastavení aplikace beside them; the menu of the user opens over the whole row. */
.sidebar-user-row {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.25rem;
  width: 100%;
  border-top: 1px solid var(--color-base-300);
  padding-top: 0.6rem;
}

.sidebar-user-row > [data-user-menu-dropdown] {
  position: static;
}

.sidebar-user-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.125rem;
}

.sidebar-user-actions .btn {
  color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
}

.sidebar-user-actions .btn:hover {
  color: var(--color-base-content);
}

.user-menu-button:hover,
.user-menu-button:focus-visible {
  background: color-mix(in oklab, var(--color-base-content) 6%, transparent);
}

.schedule-modal-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.schedule-week-total {
  min-width: 9rem;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-field);
  background: var(--color-base-200);
  padding: 0.65rem 0.8rem;
}

.schedule-form {
  display: flex;
  min-height: 0;
  flex-direction: column;
}

.schedule-days {
  display: grid;
  gap: 0.5rem;
}

.schedule-day-row {
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-box);
  background: var(--color-base-100);
  padding: 0.65rem;
}

.schedule-day-row.is-off {
  background: var(--color-base-200);
}

.schedule-day-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  cursor: pointer;
}

.schedule-day-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.78rem;
  font-weight: 650;
  color: color-mix(in srgb, var(--color-base-content) 62%, transparent);
  white-space: nowrap;
}

.schedule-day-row:not(.is-off) .schedule-day-switch {
  color: var(--color-primary);
}

.schedule-time-fields {
  width: min(100%, 25rem);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
  margin-right: auto;
  margin-top: 0.65rem;
}

.schedule-time-fields.hidden {
  display: none;
}

.schedule-time-fields label {
  display: grid;
  gap: 0.25rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: color-mix(in srgb, var(--color-base-content) 58%, transparent);
}

.calendar-weekdays,
.calendar-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(var(--calendar-columns, 7), minmax(0, 1fr));
}

.calendar-toolbar {
  min-height: 3.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-box);
  background: var(--color-base-100);
  padding: 0.65rem 0.75rem;
}

.app-navbar .calendar-toolbar {
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.calendar-view-switch {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.calendar-panel {
  transition: opacity 0.15s ease;
}

.calendar-panel.is-calendar-loading {
  opacity: 0.55;
  pointer-events: none;
}

.calendar-toolbar.is-calendar-loading [data-calendar-view-link] {
  pointer-events: none;
}

.calendar-toolbar.is-calendar-loading [data-calendar-view-trigger] {
  opacity: 0.65;
  pointer-events: none;
}

.calendar-scroll {
  width: 100%;
  max-width: 100%;
  min-height: auto;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  overflow-x: auto;
  overflow-y: visible;
}

.calendar-view-month .calendar-scroll .calendar-weekdays,
.calendar-view-month .calendar-scroll .calendar-grid,
.calendar-view-week .calendar-scroll .calendar-weekdays,
.calendar-view-week .calendar-scroll .calendar-grid {
  min-width: 42rem;
}

.calendar-view-work_month .calendar-scroll .calendar-weekdays,
.calendar-view-work_month .calendar-scroll .calendar-grid {
  min-width: 32rem;
}

.calendar-weekdays {
  flex: 0 0 auto;
  border-bottom: 1px solid var(--color-base-300);
}

.calendar-panel {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  min-height: auto;
}

.calendar-grid {
  flex: 0 0 auto;
  min-height: auto;
  grid-auto-rows: minmax(9rem, auto);
}

.calendar-view-week .calendar-grid,
.calendar-view-work_week .calendar-grid {
  grid-auto-rows: minmax(22rem, auto);
}

.calendar-view-day .calendar-grid {
  grid-auto-rows: minmax(18rem, auto);
}

.calendar-view-agenda .calendar-grid {
  grid-auto-rows: auto;
}

.calendar-weekday {
  min-height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: color-mix(in srgb, var(--color-base-content) 65%, transparent);
}

.calendar-day {
  color: inherit;
  text-align: left;
  appearance: none;
  min-height: 9rem;
  border-right: 1px solid var(--color-base-300);
  border-top: 0;
  border-left: 0;
  border-bottom: 1px solid var(--color-base-300);
  background: var(--color-base-100);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.75rem;
  position: relative;
  overflow: visible;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.calendar-panel:not(.calendar-view-work_week, .calendar-view-work_month) .calendar-day:nth-child(7n),
:is(.calendar-view-work_week, .calendar-view-work_month) .calendar-day:nth-child(5n) {
  border-right: 0;
}

/* Kalendář na desktopu (vlastník 28. 10. 2026): jako gridy se vejde do okna s okrajem stránky – stránka má výšku
   okna (výšky jako .app-main-contained-scroll), panel kalendáře zabere zbytek pod souhrnem, řádky si volné místo
   rozdělí (auto stopy se roztahují) a delší obsah se posouvá uvnitř panelu (záhlaví dnů zůstává nahoře). Agenda zůstává podle obsahu. */
@media (min-width: 1024px) {
  .app-main:has(> .calendar-panel:not(.calendar-view-agenda)) {
    height: calc(100dvh - var(--app-toolbar-height, 4.5rem));
  }

  .has-application-tabs .app-main:has(> .calendar-panel:not(.calendar-view-agenda)) {
    height: calc(100dvh - 7.55rem);
  }

  .application-embedded .app-main:has(> .calendar-panel:not(.calendar-view-agenda)) {
    height: 100dvh;
  }

  .app-main > .calendar-panel:not(.calendar-view-agenda) {
    flex: 1 1 0;
    min-height: 20rem;
  }

  .app-main > .calendar-panel:not(.calendar-view-agenda) > .calendar-scroll {
    flex: 1 1 0;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
  }

  .app-main > .calendar-panel:not(.calendar-view-agenda) .calendar-weekdays {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--color-base-100);
  }

  .app-main > .calendar-panel:not(.calendar-view-agenda) .calendar-grid {
    flex: 1 0 auto;
  }

  .app-main > .calendar-panel:is(.calendar-view-month, .calendar-view-work_month) .calendar-grid {
    grid-auto-rows: minmax(7.5rem, auto);
  }

  .app-main > .calendar-panel:is(.calendar-view-week, .calendar-view-work_week) .calendar-grid {
    grid-auto-rows: minmax(16rem, auto);
  }

  .app-main > .calendar-panel.calendar-view-day .calendar-grid {
    grid-auto-rows: minmax(16rem, auto);
  }

  .app-main > .calendar-panel:not(.calendar-view-agenda) .calendar-day {
    min-height: 0;
  }
}

.calendar-day:not(.is-readonly):hover {
  z-index: 2;
  transform: translateY(-1px);
  box-shadow: 0 16px 30px rgba(15, 23, 42, 0.12);
}

.calendar-day:not(.is-readonly).is-planned-vacation-chain-active {
  z-index: 4;
  transform: translateY(-1px);
  box-shadow: 0 16px 30px rgba(15, 23, 42, 0.12);
}

.calendar-day:not(.is-readonly):focus-visible {
  z-index: 3;
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

.calendar-day.is-weekend {
  background: color-mix(in srgb, var(--color-base-200) 72%, var(--color-base-100));
}

.calendar-day.is-outside {
  opacity: 0.48;
}

.calendar-day.is-readonly {
  cursor: default;
}

.calendar-day.is-company-event-locked {
  background: color-mix(in srgb, var(--color-warning) 7%, var(--color-base-100));
}

.calendar-day.is-today {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

.calendar-day.is-selected {
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-base-100));
}

.calendar-day.is-holiday {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, #7c3aed 62%, var(--color-base-100));
}

.holiday-admin-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(20rem, 0.95fr);
  gap: 1rem;
  align-items: start;
}

.holiday-calendar-column {
  display: grid;
  gap: 1rem;
}

.holiday-admin-day {
  min-height: 7.75rem;
}

.holiday-admin-day.is-outside .holiday-empty-day {
  display: none;
}

.holiday-empty-day {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  width: fit-content;
  max-width: 100%;
  border: 1px dashed var(--color-base-300);
  border-radius: var(--radius-field);
  padding: 0.35rem 0.5rem;
  color: color-mix(in srgb, var(--color-base-content) 42%, transparent);
  font-size: 0.75rem;
  font-weight: 800;
}

.calendar-day.is-working::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #2563eb, #0f766e);
}

.day-title {
  align-items: center;
  min-height: 1.55rem;
}

.day-number {
  font-size: 1rem;
  font-weight: 800;
}

.calendar-agenda-date-label {
  display: none;
}

.calendar-view-agenda .calendar-day {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(8.5rem, 0.42fr) minmax(0, 2.3fr);
  align-items: start;
  gap: 0.5rem 1rem;
  border-right: 0;
  padding: 0.85rem 1rem;
}

.calendar-view-agenda .calendar-day .day-title {
  grid-column: 1;
  grid-row: 1 / span 20;
  justify-content: flex-start;
}

.calendar-view-agenda .calendar-day > :not(.day-title) {
  grid-column: 2;
}

.calendar-view-agenda .day-number {
  display: none;
}

.calendar-view-agenda .calendar-agenda-date-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 850;
  color: color-mix(in srgb, var(--color-base-content) 72%, transparent);
}

.calendar-view-day .entry-pill-planned-vacation.planned-vacation-chain,
.calendar-view-agenda .entry-pill-planned-vacation.planned-vacation-chain {
  width: 100%;
  min-width: 0;
  margin-left: 0;
  border: 1px solid color-mix(in srgb, #f59e0b 35%, var(--color-base-100));
  border-radius: var(--radius-field);
}

.calendar-agenda-empty {
  grid-column: 1 / -1;
  min-height: 15rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 2rem;
  text-align: center;
  color: color-mix(in srgb, var(--color-base-content) 52%, transparent);
}

.calendar-agenda-empty i {
  margin-bottom: 0.35rem;
  font-size: 2rem;
}

.calendar-agenda-empty strong {
  color: var(--color-base-content);
}

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

.calendar-day-status {
  min-height: 1.25rem;
}

.day-note {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.delete-entry-button {
  position: relative;
  z-index: 4;
}

.entry-action-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.entry-action-row .entry-pill {
  min-width: 0;
}

.calendar-entry-stack {
  display: grid;
  gap: 0.25rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.calendar-entry-stack .entry-action-row {
  gap: 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  transition: gap 0.16s ease;
}

.calendar-entry-stack .entry-action-row > .entry-pill {
  flex: 1 1 100%;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  transition: width 0.16s ease, max-width 0.16s ease;
}

.calendar-entry-stack .entry-pill-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-day .calendar-entry-stack .delete-entry-button {
  width: 0;
  min-width: 0;
  flex: 0 0 0;
  border-width: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0;
  pointer-events: none;
  transform: translateX(0.35rem);
  transition:
    width 0.16s ease,
    min-width 0.16s ease,
    flex-basis 0.16s ease,
    border-width 0.16s ease,
    opacity 0.12s ease,
    transform 0.16s ease;
}

.calendar-day:not(.is-readonly):hover .calendar-entry-stack .entry-action-row,
.calendar-day:not(.is-readonly):focus-within .calendar-entry-stack .entry-action-row {
  gap: 0.5rem;
}

.calendar-day:not(.is-readonly):hover .calendar-entry-stack .delete-entry-button,
.calendar-day:not(.is-readonly):focus-within .calendar-entry-stack .delete-entry-button {
  width: 2rem;
  min-width: 2rem;
  flex-basis: 2rem;
  border-width: 1px;
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.planned-vacation-chain-stack {
  position: relative;
  z-index: 3;
}

.planned-vacation-chain-stack .entry-action-row {
  overflow: visible;
}

.entry-pill-planned-vacation.planned-vacation-chain {
  min-height: 1.9rem;
  max-width: none;
  justify-content: flex-start;
  width: 100%;
}

.entry-pill-planned-vacation.planned-vacation-chain.continues-to-next {
  flex: 0 0 auto;
  min-width: calc(100% + 0.95rem);
  max-width: none;
  width: calc(100% + 0.95rem);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right-color: transparent;
}

.entry-pill-planned-vacation.planned-vacation-chain.continues-from-previous {
  flex: 0 0 auto;
  margin-left: -0.95rem;
  min-width: calc(100% + 0.95rem);
  max-width: none;
  width: calc(100% + 0.95rem);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left-color: transparent;
}

.entry-pill-planned-vacation.planned-vacation-chain.continues-from-previous.continues-to-next {
  min-width: calc(100% + 1.9rem);
  width: calc(100% + 1.9rem);
}

.calendar-day:not(.is-readonly):hover .entry-pill-planned-vacation.planned-vacation-chain.continues-from-previous.is-run-end,
.calendar-day:not(.is-readonly):focus-within .entry-pill-planned-vacation.planned-vacation-chain.continues-from-previous.is-run-end {
  min-width: calc(100% - 1.55rem);
  width: calc(100% - 1.55rem);
}

.entry-pill-planned-vacation.planned-vacation-chain.continues-from-previous .entry-emoji,
.entry-pill-planned-vacation.planned-vacation-chain.continues-from-previous .entry-pill-label {
  opacity: 0;
}

.planned-vacation-chain-detail-muted {
  visibility: hidden;
}

.calendar-meal-voucher-row {
  display: flex;
  justify-content: flex-end;
  margin-top: auto;
  padding-top: 0.15rem;
}

.meal-voucher-badge {
  gap: 0.3rem;
  white-space: nowrap;
}

.meal-voucher-badge.is-eligible {
  border-color: color-mix(in srgb, #16a34a 42%, var(--color-base-100));
  background: color-mix(in srgb, #16a34a 15%, var(--color-base-100));
  color: #166534;
}

.meal-voucher-badge.is-ineligible {
  border-color: var(--color-base-300);
  background: var(--color-base-200);
  color: color-mix(in srgb, var(--color-base-content) 52%, transparent);
}

.holiday-entry-row {
  margin-top: 0.1rem;
}

.day-entry-modal-box {
  display: flex;
  flex-direction: column;
  width: min(94vw, 42rem);
  max-width: 42rem;
  max-height: 94dvh;
  padding: 0;
  overflow: hidden;
}

.day-entry-form {
  min-height: 0;
  max-height: 94dvh;
  display: flex;
  flex-direction: column;
}

.day-add-entry-modal-box {
  display: flex;
  flex-direction: column;
  width: min(94vw, 44rem);
  max-width: 44rem;
  max-height: 94dvh;
  padding: 0;
  overflow: hidden;
}

.day-add-entry-form {
  display: flex;
  min-height: 0;
  max-height: 94dvh;
  flex: 1 1 auto;
  flex-direction: column;
}

.day-add-entry-modal-header {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  flex: 0 0 auto;
  align-items: center;
  gap: 1rem;
  border-bottom: 1px solid var(--color-base-300);
  background: var(--color-base-100);
  padding: 0.8rem 1rem;
}

.day-add-entry-modal-content {
  display: grid;
  min-height: 0;
  flex: 1 1 auto;
  gap: 1rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1rem;
}

.day-add-entry-modal-footer {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem;
  border-top: 1px solid var(--color-base-300);
  background: var(--color-base-100);
  padding: 0.75rem 1rem;
}

.day-modal-heading {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  flex: 0 0 auto;
  align-items: center;
  gap: 1rem;
  border-bottom: 1px solid var(--color-base-300);
  background: var(--color-base-100);
  padding: 1rem 1.25rem;
}

.day-entry-modal-content {
  min-height: 0;
  display: grid;
  gap: 1rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1rem 1.25rem 1.25rem;
}

.day-working-switch {
  min-height: 2.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: color-mix(in srgb, var(--color-base-content) 62%, transparent);
  font-size: 0.8rem;
  font-weight: 800;
  white-space: nowrap;
}

.day-working-switch:not(.is-off) {
  color: var(--color-primary);
}

.day-entry-editor,
.entry-slots {
  display: grid;
  gap: 0.75rem;
}

.day-section-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.55rem;
}

.day-existing-entries,
.day-add-entry-panel {
  min-width: 0;
}

.day-existing-entry-list {
  display: grid;
  gap: 0.45rem;
}

.day-existing-entry-card {
  display: grid;
  gap: 0.5rem;
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-field);
  background: var(--color-base-100);
  padding: 0.55rem;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.day-existing-entry-card.is-editing {
  border-color: color-mix(in srgb, var(--color-primary) 42%, var(--color-base-300));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 12%, transparent);
}

.day-existing-entry-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
}

.day-existing-entry-main {
  min-width: 0;
  display: grid;
  gap: 0.25rem;
}

.day-existing-entry-line {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.day-existing-entry-detail {
  color: color-mix(in srgb, var(--color-base-content) 58%, transparent);
  font-size: 0.75rem;
  font-weight: 700;
}

.day-existing-entry-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex: 0 0 auto;
}

.edit-entry-button {
  color: color-mix(in srgb, var(--color-base-content) 62%, transparent);
  border-color: var(--color-base-300);
}

.edit-entry-button:hover,
.edit-entry-button:focus-visible,
.edit-entry-button.btn-active {
  background: var(--color-base-200);
  border-color: color-mix(in srgb, var(--color-base-content) 28%, transparent);
  color: var(--color-base-content);
}

.day-existing-entry-empty {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px dashed var(--color-base-300);
  border-radius: var(--radius-field);
  padding: 0.65rem;
  color: color-mix(in srgb, var(--color-base-content) 52%, transparent);
  font-size: 0.85rem;
  font-weight: 700;
}

.day-existing-entry-empty[hidden] {
  display: none;
}

.entry-add-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.entry-add-button-groups {
  display: grid;
  gap: 0.45rem;
}

.entry-add-buttons.is-separated {
  margin-top: 0.2rem;
  border-top: 1px solid var(--color-base-300);
  padding-top: 0.7rem;
}

.entry-add-button {
  min-height: 2.2rem;
  height: auto;
  gap: 0.35rem;
  padding-inline: 0.75rem;
  line-height: 1.1;
}

/* Keep the light palette; dark mode uses the native DaisyUI outline states. */
html[data-theme="light"] .entry-add-button-work {
  border-color: color-mix(in srgb, #16a34a 48%, white);
  color: #166534;
}

html[data-theme="light"] .entry-add-button-work:hover,
html[data-theme="light"] .entry-add-button-work:focus-visible {
  border-color: #16a34a;
  background: color-mix(in srgb, #16a34a 12%, white);
  color: #166534;
}

html[data-theme="light"] .entry-add-button-vacation {
  border-color: color-mix(in srgb, #7c3aed 48%, white);
  color: #5b21b6;
}

html[data-theme="light"] .entry-add-button-vacation:hover,
html[data-theme="light"] .entry-add-button-vacation:focus-visible {
  border-color: #7c3aed;
  background: color-mix(in srgb, #7c3aed 12%, white);
  color: #5b21b6;
}

html[data-theme="light"] .entry-add-button-sick {
  border-color: color-mix(in srgb, #2563eb 48%, white);
  color: #1d4ed8;
}

html[data-theme="light"] .entry-add-button-sick:hover,
html[data-theme="light"] .entry-add-button-sick:focus-visible {
  border-color: #2563eb;
  background: color-mix(in srgb, #2563eb 12%, white);
  color: #1d4ed8;
}

html[data-theme="light"] .entry-add-button-other {
  --absence-color: #f59e0b;
  border-color: color-mix(in srgb, var(--absence-color) 55%, white);
  color: color-mix(in srgb, var(--absence-color) 74%, #111827);
}

html[data-theme="light"] .entry-add-button-other:hover,
html[data-theme="light"] .entry-add-button-other:focus-visible {
  border-color: var(--absence-color);
  background: color-mix(in srgb, var(--absence-color) 16%, white);
  color: color-mix(in srgb, var(--absence-color) 78%, #111827);
}

html[data-theme="light"] .entry-add-button-business-trip {
  border-color: color-mix(in srgb, #0f766e 48%, white);
  color: #0f766e;
}

html[data-theme="light"] .entry-add-button-business-trip:hover,
html[data-theme="light"] .entry-add-button-business-trip:focus-visible {
  border-color: #0f766e;
  background: color-mix(in srgb, #0f766e 12%, white);
  color: #115e59;
}

.entry-slot-card {
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-box);
  background: var(--color-base-100);
  padding: 0.85rem;
}

.entry-slot-card.is-disabled {
  background: var(--color-base-200);
}

.day-existing-entry-editor.entry-slot-card {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.day-existing-entry-editor > .entry-slot-header {
  display: none;
}

.day-existing-entry-editor > .entry-slot-body {
  margin-top: 0;
  border-top: 1px solid var(--color-base-300);
  padding-top: 0.75rem;
}

.entry-slot-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
}

.entry-slot-title {
  min-width: 0;
  display: grid;
  gap: 0.3rem;
}

.entry-slot-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex: 0 0 auto;
}

.entry-duration-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}

.entry-duration-presets .btn {
  min-height: 1.9rem;
  height: auto;
}

.entry-slot-body {
  margin-top: 0.8rem;
}

.entry-slot-body.hidden {
  display: none;
}

.entry-slot-submit-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.85rem;
}

.entry-request-action .action-popover-content {
  top: auto;
  right: 0;
  bottom: calc(100% + 0.55rem);
  left: auto;
  transform: translateY(0.25rem);
}

.entry-request-action .action-popover-content::before {
  top: auto;
  right: 1rem;
  bottom: -0.35rem;
  left: auto;
  border: 0;
  border-right: 1px solid var(--color-base-300);
  border-bottom: 1px solid var(--color-base-300);
  transform: rotate(45deg);
}

.entry-request-action:hover .action-popover-content,
.entry-request-action:focus-within .action-popover-content {
  transform: translateY(0);
}

.entry-work-time-grid,
.entry-multi-day-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 0.65rem;
}

.entry-work-time-grid .fieldset,
.entry-multi-day-grid .fieldset {
  min-width: 0;
}

.entry-multi-day-summary {
  min-height: 3rem;
  display: flex;
  align-items: center;
  border: 1px dashed var(--color-base-300);
  border-radius: var(--radius-field);
  padding: 0.5rem 0.65rem;
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1.15;
}

.entry-multi-day-fields.hidden {
  display: none;
}

.is-day-disabled {
  opacity: 0.55;
}

.day-modal-actions {
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.day-modal-action-group {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-left: auto;
}

.entry-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  width: fit-content;
  max-width: 100%;
  border-radius: var(--radius-field);
  padding: 0.35rem 0.5rem;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.15;
}

.entry-pill > span:not(.entry-emoji):not(.entry-pill-popover) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.entry-emoji {
  flex: 0 0 auto;
}

.entry-pill-work {
  border: 1px solid color-mix(in srgb, #16a34a 34%, white);
  background: color-mix(in srgb, #16a34a 14%, white);
  color: #166534;
}

.entry-pill-business-trip {
  border: 1px solid color-mix(in srgb, #0f766e 38%, white);
  background: color-mix(in srgb, #0f766e 13%, white);
  color: #115e59;
}

.entry-pill-vacation {
  border: 1px solid color-mix(in srgb, #7c3aed 36%, white);
  background: color-mix(in srgb, #7c3aed 13%, white);
  color: #5b21b6;
}

.entry-pill-planned-vacation {
  border: 1px dashed color-mix(in srgb, #7c3aed 58%, white);
  background: transparent;
  color: #5b21b6;
}

.entry-pill-sick {
  border: 1px solid color-mix(in srgb, #2563eb 34%, white);
  background: color-mix(in srgb, #2563eb 12%, white);
  color: #1d4ed8;
}

.entry-pill-other {
  --absence-color: #f59e0b;
  border: 1px solid color-mix(in srgb, var(--absence-color) 42%, white);
  background: color-mix(in srgb, var(--absence-color) 15%, white);
  color: color-mix(in srgb, var(--absence-color) 74%, #111827);
}

.entry-pill-holiday {
  border: 1px solid color-mix(in srgb, var(--absence-color, #7c3aed) 36%, white);
  background: color-mix(in srgb, var(--absence-color, #7c3aed) 13%, white);
  color: color-mix(in srgb, var(--absence-color, #7c3aed) 74%, #111827);
}

.entry-pill-popover {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.5rem);
  z-index: 40;
  min-width: 11rem;
  max-width: 14rem;
  border: 1px solid color-mix(in srgb, #7c3aed 28%, var(--color-base-300));
  border-radius: var(--radius-field);
  background: var(--color-base-100);
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.14);
  color: color-mix(in srgb, var(--color-base-content) 72%, transparent);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.2;
  opacity: 0;
  padding: 0.55rem 0.65rem;
  pointer-events: none;
  text-align: left;
  transform: translate(-50%, 0.2rem);
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s ease;
  visibility: hidden;
  white-space: normal;
}

.planned-vacation-chain-popover {
  left: var(--planned-chain-popover-left, 50%);
}

.entry-pill-popover::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.35rem;
  width: 0.65rem;
  height: 0.65rem;
  border-right: 1px solid color-mix(in srgb, #7c3aed 28%, var(--color-base-300));
  border-bottom: 1px solid color-mix(in srgb, #7c3aed 28%, var(--color-base-300));
  background: var(--color-base-100);
  transform: translateX(-50%) rotate(45deg);
}

.entry-pill:hover .entry-pill-popover,
.entry-pill:focus-within .entry-pill-popover,
.calendar-day.is-planned-vacation-chain-active .planned-vacation-chain-popover {
  opacity: 1;
  transform: translate(-50%, 0);
  visibility: visible;
}

@media (min-width: 768px) {
  .attendance-toolbar-actions .action-popover-content {
    left: 0;
    width: max-content;
    min-width: 0;
    max-width: min(32rem, calc(100vw - var(--application-sidebar-width) - 2rem));
    transform: translateY(-0.25rem);
    white-space: normal;
  }

  .attendance-toolbar-actions .action-popover-content::before {
    left: 1rem;
    transform: rotate(45deg);
  }

  .attendance-toolbar-actions .action-popover:hover .action-popover-content,
  .attendance-toolbar-actions .action-popover:focus-within .action-popover-content {
    transform: translateY(0);
  }

  .calendar-day .entry-pill-popover {
    left: 0;
    width: max-content;
    min-width: 0;
    max-width: min(24rem, calc(100vw - var(--application-sidebar-width) - 2rem));
    transform: translateY(0.2rem);
  }

  .calendar-day .entry-pill-popover::after {
    left: 1rem;
    transform: rotate(45deg);
  }

  .calendar-day .entry-pill:hover .entry-pill-popover,
  .calendar-day .entry-pill:focus-within .entry-pill-popover,
  .calendar-day.is-planned-vacation-chain-active .planned-vacation-chain-popover {
    transform: translateY(0);
  }

  .calendar-view-month .calendar-day:nth-child(7n + 5) .entry-pill-popover,
  .calendar-view-month .calendar-day:nth-child(7n + 6) .entry-pill-popover,
  .calendar-view-month .calendar-day:nth-child(7n) .entry-pill-popover,
  .calendar-view-week .calendar-day:nth-child(7n + 5) .entry-pill-popover,
  .calendar-view-week .calendar-day:nth-child(7n + 6) .entry-pill-popover,
  .calendar-view-week .calendar-day:nth-child(7n) .entry-pill-popover,
  :is(.calendar-view-work_week, .calendar-view-work_month) .calendar-day:nth-child(5n + 4) .entry-pill-popover,
  :is(.calendar-view-work_week, .calendar-view-work_month) .calendar-day:nth-child(5n) .entry-pill-popover {
    right: 0;
    left: auto;
  }

  .calendar-view-month .calendar-day:nth-child(7n + 5) .entry-pill-popover::after,
  .calendar-view-month .calendar-day:nth-child(7n + 6) .entry-pill-popover::after,
  .calendar-view-month .calendar-day:nth-child(7n) .entry-pill-popover::after,
  .calendar-view-week .calendar-day:nth-child(7n + 5) .entry-pill-popover::after,
  .calendar-view-week .calendar-day:nth-child(7n + 6) .entry-pill-popover::after,
  .calendar-view-week .calendar-day:nth-child(7n) .entry-pill-popover::after,
  :is(.calendar-view-work_week, .calendar-view-work_month) .calendar-day:nth-child(5n + 4) .entry-pill-popover::after,
  :is(.calendar-view-work_week, .calendar-view-work_month) .calendar-day:nth-child(5n) .entry-pill-popover::after {
    right: 1rem;
    left: auto;
  }
}

.absence-pill {
  --absence-color: #2563eb;
  color: color-mix(in srgb, var(--absence-color) 74%, #111827);
  background: color-mix(in srgb, var(--absence-color) 15%, white);
  border: 1px solid color-mix(in srgb, var(--absence-color) 36%, white);
}

/* One dark palette for the picker, unsaved editor, day detail and calendar pills.
   Vacation deliberately stays violet, independent of the theme's primary hue. */
html[data-theme="dark"] :is(.entry-add-button-work, .entry-pill-work) {
  --entry-color: var(--color-success);
}

html[data-theme="dark"] :is(.entry-add-button-vacation, .entry-pill-vacation, .entry-pill-planned-vacation) {
  --entry-color: color-mix(in oklab, #7c3aed 60%, var(--color-base-content));
}

html[data-theme="dark"] :is(.entry-add-button-sick, .entry-pill-sick) {
  --entry-color: var(--color-info);
}

html[data-theme="dark"] :is(.entry-add-button-business-trip, .entry-pill-business-trip) {
  --entry-color: var(--color-accent);
}

html[data-theme="dark"] :is(.entry-add-button-other, .entry-pill-other) {
  --absence-color: var(--color-warning);
  --entry-color: var(--color-warning);
}

html[data-theme="dark"] .entry-pill-holiday {
  --absence-color: #7c3aed;
}

html[data-theme="dark"] :is(.entry-add-button-other[style], .entry-pill-other[style], .entry-pill-holiday, .absence-pill) {
  --entry-color: color-mix(in oklab, var(--absence-color, var(--color-warning)) 30%, var(--color-base-content));
}

/* Feed DaisyUI's tokens only: its hover, focus, active and disabled states stay native. */
html[data-theme="dark"] :is(.entry-add-button-vacation, .entry-add-button-other) {
  --btn-color: var(--entry-color);
  --btn-fg: var(--color-base-100);
}

html[data-theme="dark"] :is(.entry-pill, .absence-pill, .timeline-entry-icon) {
  color: var(--entry-color, var(--color-base-content));
  border-color: color-mix(in oklab, var(--entry-color, var(--color-base-content)) 45%, var(--color-base-100));
  background: color-mix(in oklab, var(--entry-color, var(--color-base-content)) 8%, var(--color-base-100));
}

/* Planned leave keeps its existing dashed, unfilled appearance. */
html[data-theme="dark"] .entry-pill-planned-vacation {
  background: transparent;
}

.entries-preview-panels {
  margin-top: 1.5rem;
  max-height: min(60vh, 34rem);
  overflow-y: auto;
  padding: 0.25rem 0.35rem 0.25rem 0;
}

.entries-timeline {
  margin-inline: 0;
}

.entries-timeline hr {
  background: var(--color-base-300);
}

.timeline-entry-icon {
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  box-shadow: 0 0 0 4px var(--color-base-100);
  font-size: 1rem;
  line-height: 1;
}

.entry-timeline-box {
  min-width: min(17rem, 100%);
  border-color: var(--color-base-300);
  background: var(--color-base-100);
}

.entry-timeline-note {
  margin-top: 0.55rem;
  border-top: 1px solid var(--color-base-300);
  padding-top: 0.55rem;
  color: color-mix(in srgb, var(--color-base-content) 62%, transparent);
  font-size: 0.78rem;
  line-height: 1.35;
}

.entry-timeline-empty {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  border: 1px dashed var(--color-base-300);
  border-radius: var(--radius-box);
  background: var(--color-base-200);
  padding: 1rem;
  color: color-mix(in srgb, var(--color-base-content) 62%, transparent);
  font-size: 0.9rem;
}

.holiday-admin-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.8rem;
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-field);
  background: var(--color-base-100);
  padding: 0.65rem 0.75rem;
}

.holiday-year-panel {
  padding: 1rem;
}

.holiday-year-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
}

.holiday-month-timeline {
  margin-top: 1rem;
  display: grid;
  gap: 1rem;
}

.holiday-month-section {
  display: grid;
  gap: 0.65rem;
  border-top: 1px solid var(--color-base-300);
  padding-top: 1rem;
}

.holiday-month-section:first-child {
  border-top: 0;
  padding-top: 0;
}

.holiday-month-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-weight: 900;
}

.holiday-timeline {
  margin-inline: 0;
}

.holiday-timeline hr {
  background: var(--color-base-300);
}

.holiday-timeline-card {
  width: min(18rem, 100%);
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-box);
  background: var(--color-base-100);
  padding: 0.75rem;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.holiday-timeline-card:hover,
.holiday-timeline-card:focus-visible {
  border-color: color-mix(in srgb, var(--color-secondary) 46%, var(--color-base-300));
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.1);
  outline: none;
  transform: translateY(-1px);
}

.holiday-working-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-box);
  background: var(--color-base-100);
  padding: 0.9rem;
}

.holiday-toggle-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.holiday-target-section {
  display: grid;
  gap: 0.75rem;
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-box);
  background: var(--color-base-200);
  padding: 0.9rem;
}

.holiday-target-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.9rem;
}

.holiday-target-heading h4 {
  font-size: 0.95rem;
  font-weight: 900;
  line-height: 1.2;
}

.holiday-target-heading p {
  margin-top: 0.18rem;
  color: color-mix(in srgb, var(--color-base-content) 58%, transparent);
  font-size: 0.78rem;
  font-weight: 650;
}

.holiday-target-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.holiday-scope-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
}

.holiday-scope-option,
.holiday-target-option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-field);
  background: var(--color-base-100);
  padding: 0.65rem 0.75rem;
}

.holiday-scope-option strong,
.holiday-scope-option small,
.holiday-target-option span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.holiday-scope-option small {
  color: color-mix(in srgb, var(--color-base-content) 55%, transparent);
  font-size: 0.75rem;
  font-weight: 700;
}

.holiday-target-panel {
  display: grid;
  gap: 0.65rem;
  max-height: min(22rem, 46vh);
  overflow: auto;
  padding-right: 0.15rem;
}

.holiday-target-panel.hidden {
  display: none;
}

.holiday-target-group {
  display: grid;
  gap: 0;
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-field);
  background: var(--color-base-100);
  overflow: visible;
}

.holiday-target-group-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 900;
  color: color-mix(in srgb, var(--color-base-content) 72%, transparent);
  list-style: none;
  padding: 0.7rem 0.75rem;
}

.holiday-target-group-title::-webkit-details-marker {
  display: none;
}

.holiday-target-group-name,
.holiday-target-group-actions {
  display: flex;
  align-items: center;
  min-width: 0;
}

.holiday-target-group-name {
  gap: 0.5rem;
}

.holiday-target-group-name > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.holiday-target-group-actions {
  flex-shrink: 0;
  gap: 0.35rem;
}

.holiday-target-chevron {
  color: color-mix(in srgb, var(--color-base-content) 52%, transparent);
  font-size: 0.75rem;
  transition: transform 0.16s ease;
}

.holiday-target-group[open] .holiday-target-chevron {
  transform: rotate(180deg);
}

.holiday-target-group.is-selected {
  border-color: color-mix(in srgb, var(--color-primary) 48%, var(--color-base-300));
}

.holiday-target-group.is-partial {
  border-color: color-mix(in srgb, var(--color-warning) 55%, var(--color-base-300));
}

.holiday-target-user-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
  border-top: 1px solid var(--color-base-300);
  padding: 0.65rem;
}

.holiday-target-empty {
  grid-column: 1 / -1;
  color: color-mix(in srgb, var(--color-base-content) 55%, transparent);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.25rem 0.1rem;
}

.holiday-entry-modal-box {
  display: flex;
  flex-direction: column;
  height: min(94dvh, 60rem);
  max-height: 94dvh;
  padding: 0;
  overflow: hidden;
}

.holiday-entry-form {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 1.25rem;
}

/* Opens below the field like a normal select. Top layer, so the modal's own
   overflow cannot clip it. The actual anchor is set per instance via an
   inline `position-anchor` style, since a page can hold many emoji fields. */
.holiday-emoji-popover {
  position: absolute;
  position-area: bottom span-left;
  position-try-fallbacks: flip-block;
  margin: 0.35rem 0;
  padding: 0;
  overflow: hidden;
}

.holiday-emoji-popover emoji-picker {
  width: min(90vw, 22rem);
  height: min(70vh, 26rem);
}

.emoji-field-action {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.emoji-field-input {
  width: 4rem;
  flex: 0 0 auto;
}

.app-main.vacation-plan-page {
  height: 100dvh;
  min-height: 0;
  flex: 0 0 100dvh;
}

.vacation-plan-panel {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  gap: 1rem;
  overflow: hidden;
  padding: 1rem;
}

.admin-page-shell {
  display: grid;
  gap: 1rem;
}

.admin-profile-summary,
.admin-section-panel,
.admin-list-panel {
  padding: 1rem;
}

.admin-profile-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.admin-two-column,
.admin-management-grid {
  display: grid;
  grid-template-columns: minmax(18rem, 0.85fr) minmax(0, 2fr);
  gap: 1rem;
  align-items: start;
}

.admin-modal-management {
  display: block;
}

.admin-modal-management > .admin-list-panel {
  width: 100%;
  min-height: 0;
}

.admin-grid-card {
  min-width: 0;
  overflow: hidden;
  padding: 0;
}

.admin-grid-card > .admin-section-heading {
  min-height: 4.5rem;
  border-bottom: 1px solid var(--color-base-300);
  background: var(--color-base-100);
  padding: 1rem 1.25rem;
}

.application-embedded .admin-grid-card > .admin-section-heading > .btn {
  display: none;
}

.admin-grid-table-wrap {
  width: 100%;
  min-width: 0;
  max-height: calc(100dvh - 17rem);
  overflow: auto;
}

.admin-grid-table {
  width: 100%;
  min-width: 58rem;
  font-size: 0.82rem;
}

.admin-grid-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  border-bottom: 1px solid var(--color-base-300);
  background: var(--color-base-200);
  padding: 0.85rem 0.9rem;
  color: color-mix(in srgb, var(--color-base-content) 76%, transparent);
  font-size: 0.72rem;
  font-weight: 800;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.admin-grid-table tbody tr {
  border-bottom: 1px solid color-mix(in srgb, var(--color-base-300) 72%, transparent);
  transition: background-color 140ms ease;
}

/* Row highlight for every table in the application, so a grid behaves the same
   whichever module it belongs to. The colour comes from the tenants and users
   grids, which had it first. Kept global rather than a list of grid classes,
   which would need extending with every new table.

   .is-active keeps the selected row in the admin grids highlighted. */
.table tbody tr {
  transition: background-color 140ms ease;
}

.table tbody tr:hover,
.admin-grid-table tbody tr.is-active {
  background: color-mix(in srgb, var(--color-primary) 7%, var(--color-base-100));
}

.admin-grid-table td {
  padding: 0.85rem 0.9rem;
  vertical-align: middle;
  white-space: nowrap;
}

.admin-grid-table :is(th, td):first-child {
  min-width: 16rem;
}

.admin-grid-action-column {
  width: 4rem;
  min-width: 4rem;
  text-align: center !important;
}

.admin-grid-identity,
.admin-grid-name {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.admin-grid-identity > span {
  min-width: 0;
  display: grid;
  gap: 0.12rem;
}

.admin-grid-identity strong,
.admin-grid-identity small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-grid-identity small {
  color: color-mix(in srgb, var(--color-base-content) 55%, transparent);
  font-size: 0.72rem;
}

.admin-grid-footer {
  margin-top: 0;
  padding: 0.8rem 1rem;
}

.admin-report-toolbar {
  grid-template-columns: minmax(13rem, 18rem) minmax(0, 1fr) auto;
}

.admin-grid-filters {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.admin-grid-filters > .select {
  width: 10.5rem;
  min-width: 10.5rem;
  flex: 0 0 10.5rem;
}

.admin-modal-management[data-admin-grid-root] {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  overflow: hidden;
}

.admin-modal-management[data-admin-grid-root] > .admin-grid-card {
  width: 100%;
  min-height: 0;
  padding: 0;
}

.admin-modal-management[data-admin-grid-root][hidden] {
  display: none;
}

.admin-grid-subject {
  min-height: 2.5rem;
  height: auto;
  max-width: 24rem;
  justify-content: flex-start;
  padding: 0.25rem 0.5rem;
  text-align: left;
  white-space: normal;
}

.admin-grid-subject .admin-grid-identity,
.admin-grid-subject .admin-grid-name {
  width: 100%;
}

.admin-grid-subject .admin-grid-name strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-entity-modal-box {
  width: min(96vw, 72rem);
  max-width: 72rem;
}

.tenant-settings-tabpanel {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  outline: none;
}

.tenant-settings-tabpanel[hidden] {
  display: none;
}

.tenant-settings-tabpanel > .insurance-service-detail-form {
  overflow: visible;
}

.tenant-settings-form {
  min-width: 0;
}

.tenant-settings-tabpanel .business-trip-settings-form {
  margin: 0;
}

.admin-entity-modal-box :is(.input, .select, .textarea, .file-input):disabled,
[data-admin-user-detail-modal] :is(.input, .select, .textarea, .file-input):disabled {
  border-color: color-mix(in srgb, var(--color-base-300) 78%, transparent);
  background: var(--color-base-200);
  color: color-mix(in srgb, var(--color-base-content) 70%, transparent);
  opacity: 1;
  cursor: default;
}

.partner-admin-page {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 1rem;
}

.partner-admin-page > .admin-report-toolbar {
  grid-template-columns: minmax(13rem, 18rem) minmax(0, 1fr) auto auto;
}

.partner-grid-table {
  min-width: 72rem;
}

.partner-module-badges {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}

.partner-module-badges .badge {
  gap: 0.3rem;
}

.partner-module-panel.is-active {
  display: grid;
  gap: 1rem;
}

.partner-module-heading {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-box);
  background: var(--color-base-100);
  padding: 1rem;
}

.partner-module-heading > div,
.partner-module-heading > div > span:last-child {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.partner-module-heading > div > span:last-child {
  align-items: flex-start;
  flex-direction: column;
  gap: 0.1rem;
}

.partner-module-heading strong,
.partner-module-heading small,
.partner-switch-card strong,
.partner-switch-card small {
  display: block;
}

.partner-module-heading small,
.partner-switch-card small,
.partner-foundation-grid small {
  color: color-mix(in srgb, var(--color-base-content) 58%, transparent);
  font-size: 0.73rem;
}

.partner-module-fields {
  transition: opacity 140ms ease, background-color 140ms ease;
}

.partner-module-fields.is-disabled {
  background: color-mix(in srgb, var(--color-base-200) 74%, var(--color-base-100));
  opacity: 0.62;
}

.partner-switch-card {
  min-width: 0;
  min-height: 4.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-box);
  background: var(--color-base-100);
  padding: 0.75rem 0.9rem;
}

.partner-foundation-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.partner-foundation-grid > div {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border: 1px dashed var(--color-base-300);
  border-radius: var(--radius-box);
  background: var(--color-base-200);
  padding: 0.9rem;
}

.partner-foundation-grid > div > i {
  color: var(--color-primary);
  font-size: 1.15rem;
}

.partner-foundation-grid strong,
.partner-foundation-grid small {
  display: block;
}

.admin-modal-management .admin-user-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: 0.55rem;
}

.admin-modal-management .admin-user-list-item {
  min-height: 4.25rem;
  position: relative;
  border-color: var(--color-base-300);
  background: var(--color-base-100);
  padding-right: 5.25rem;
}

.admin-modal-management .admin-user-list-item::after {
  content: "Upravit";
  position: absolute;
  right: 0.75rem;
  color: var(--color-primary);
  font-size: 0.72rem;
  font-weight: 800;
}

.admin-modal-management .admin-user-list-item:hover,
.admin-modal-management .admin-user-list-item:focus-visible {
  border-color: var(--color-primary);
  background: var(--color-base-200);
  outline: none;
}

.admin-editor-modal-panel {
  max-height: 94dvh;
  width: min(96vw, 88rem);
  max-width: 88rem;
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 121;
  display: none !important;
  flex-direction: column;
  overflow: hidden;
  transform: translate(-50%, -50%);
  box-shadow: var(--shadow-xl);
  padding: 0;
}

.admin-editor-modal-panel.is-open {
  display: flex !important;
}

.admin-editor-modal-panel > .admin-section-heading {
  flex: 0 0 auto;
  border-bottom: 1px solid var(--color-base-300);
  background: var(--color-base-100);
  padding: 1rem 4.5rem 1rem 1.25rem;
}

.admin-editor-modal-panel > .alert {
  flex: 0 0 auto;
  margin: 1rem 1.25rem 0;
}

.admin-editor-modal-panel > .admin-form-grid {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 1.25rem;
}

.admin-editor-modal-panel > .admin-form-grid > .admin-form-actions:last-child {
  position: sticky;
  bottom: -1.25rem;
  z-index: 5;
  border-top: 1px solid var(--color-base-300);
  margin: 1rem -1.25rem -1.25rem;
  background: var(--color-base-100);
  padding: 1rem 1.25rem;
}

.admin-modal-management:has(.admin-editor-modal-panel.is-open)::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 120;
  background: color-mix(in srgb, var(--color-neutral) 55%, transparent);
}

.admin-editor-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 6;
  background: var(--color-base-100);
}

.application-embedded .admin-modal-management:has(.admin-editor-modal-panel.is-open)::before {
  inset: var(--application-tabs-height) 0 0;
}

.application-embedded .admin-editor-modal-panel {
  top: calc(50% + (var(--application-tabs-height) / 2));
  max-height: var(--embedded-modal-max-height);
}

.admin-settings-standalone::before {
  content: none !important;
}

.admin-settings-standalone .admin-editor-modal-panel {
  max-height: none;
  width: 100%;
  position: static;
  display: block !important;
  overflow: visible;
  transform: none;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
}

.admin-settings-standalone .admin-editor-modal-panel > .admin-form-grid {
  overflow: visible;
}

.admin-section-panel,
.admin-list-panel {
  display: grid;
  gap: 1rem;
}

.admin-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.admin-badge-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
}

.admin-pill-row {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.35rem;
}

.admin-read-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.admin-read-grid > div {
  min-width: 0;
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-box);
  background: var(--color-base-200);
  padding: 0.75rem;
}

.admin-read-grid span {
  display: block;
  color: color-mix(in srgb, var(--color-base-content) 58%, transparent);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.admin-read-grid strong {
  display: block;
  min-width: 0;
  margin-top: 0.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 1rem;
}

.admin-field-full,
.admin-form-divider,
.admin-form-actions {
  grid-column: 1 / -1;
}

/* Titul před jménem a za příjmením (vlastník 26. 10. 2026): na řádku se jménem, resp. příjmením, dvojice zabere
   šířku jednoho pole formuláře; titul má úzké pole. */
.admin-name-pair {
  display: grid;
  min-width: 0;
  gap: 0.5rem;
}

.admin-name-pair-before {
  grid-template-columns: 6.5rem minmax(0, 1fr);
}

.admin-name-pair-after {
  grid-template-columns: minmax(0, 1fr) 6.5rem;
}

.admin-form-divider {
  border-top: 1px solid var(--color-base-300);
  padding-top: 1rem;
  color: color-mix(in srgb, var(--color-base-content) 60%, transparent);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.tenant-member-mini-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.6rem;
  margin-top: 0.75rem;
}

.tenant-member-mini-card {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-field);
  background: var(--color-base-100);
  padding: 0.6rem 0.7rem;
}

.tenant-member-mini-avatar {
  flex: 0 0 auto;
}

.tenant-member-mini-info {
  min-width: 0;
}

.tenant-member-mini-info strong,
.tenant-member-mini-info small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tenant-member-mini-info small {
  color: color-mix(in srgb, var(--color-base-content) 58%, transparent);
  font-size: 0.75rem;
}

.admin-weekly-hours-input[readonly],
.admin-weekly-hours-input.is-readonly {
  background: var(--color-base-200);
  cursor: not-allowed;
}

.admin-entitlement-grid,
.admin-benefit-grid {
  display: grid;
  gap: 0.75rem;
}

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

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

.admin-entitlement-card,
.admin-benefit-card {
  border: 1px solid color-mix(in srgb, var(--absence-color, var(--color-primary)) 28%, var(--color-base-300));
  border-radius: var(--radius-box);
  background: color-mix(in srgb, var(--absence-color, var(--color-primary)) 7%, var(--color-base-100));
  padding: 0.75rem;
}

.admin-entitlement-head,
.admin-benefit-title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.admin-entitlement-head > div,
.admin-benefit-name strong {
  min-width: 0;
}

.admin-entitlement-head strong,
.admin-benefit-title strong {
  display: block;
  font-size: 0.92rem;
  font-weight: 900;
}

.admin-entitlement-head small {
  display: block;
  color: color-mix(in srgb, var(--color-base-content) 58%, transparent);
  font-size: 0.72rem;
  font-weight: 700;
}

.admin-entitlement-controls,
.admin-benefit-fields {
  display: grid;
  gap: 0.55rem;
  margin-top: 0.65rem;
}

.admin-entitlement-controls {
  grid-template-columns: minmax(0, 1fr) minmax(7rem, 0.7fr);
}

.admin-benefit-fields {
  grid-template-columns: minmax(11rem, 1fr) minmax(4.5rem, 0.28fr) minmax(5.5rem, 0.32fr) minmax(7rem, 0.42fr) minmax(9rem, 0.58fr);
}

.admin-entitlement-days {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.admin-entitlement-days input {
  min-width: 0;
}

.admin-entitlement-days input[readonly],
.admin-entitlement-days input.is-readonly {
  cursor: not-allowed;
}

.admin-benefit-title {
  justify-content: space-between;
}

.admin-benefit-name,
.admin-benefit-actions,
.admin-benefit-add {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.admin-benefit-name {
  min-width: 0;
}

.admin-benefit-actions {
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.admin-benefit-title .admin-check-row {
  flex: 0 0 auto;
}

.admin-benefit-card.hidden {
  display: none;
}

.admin-benefit-card.is-new {
  border-style: dashed;
  background: var(--color-base-100);
}

.admin-policy-note {
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-box);
  background: var(--color-base-200);
  padding: 0.75rem;
  color: color-mix(in srgb, var(--color-base-content) 66%, transparent);
  font-size: 0.82rem;
}

.admin-user-list {
  display: grid;
  gap: 0.45rem;
}

.admin-user-list-item {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.65rem;
  border: 1px solid transparent;
  border-radius: var(--radius-field);
  padding: 0.65rem;
  color: var(--color-base-content);
}

.admin-user-list-item:hover,
.admin-user-list-item.is-active {
  border-color: var(--color-base-300);
  background: var(--color-base-200);
}

.admin-modal-management .admin-user-list-item.is-active:not(:hover) {
  border-color: var(--color-base-300);
  background: var(--color-base-100);
}

.admin-user-list-item strong,
.admin-user-list-item small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-user-list-item small {
  color: color-mix(in srgb, var(--color-base-content) 58%, transparent);
  font-size: 0.75rem;
}

.admin-list-avatar {
  flex: 0 0 auto;
}

.vacation-user-avatar,
.vacation-user-avatar > div {
  width: 2.25rem;
  min-width: 2.25rem;
  max-width: 2.25rem;
  height: 2.25rem;
  min-height: 2.25rem;
  max-height: 2.25rem;
}

.vacation-user-avatar {
  flex: 0 0 2.25rem;
  overflow: hidden;
  border-radius: 999px;
}

.vacation-user-avatar > div {
  flex: 0 0 2.25rem;
  overflow: hidden;
}

.vacation-user-avatar img {
  width: 100% !important;
  height: 100% !important;
  display: block;
  object-fit: cover;
}

.admin-checkbox-field {
  align-items: flex-start;
}

.admin-check-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-field);
  padding: 0.7rem 0.75rem;
  font-size: 0.9rem;
}

.application-tabs-tenant-setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-field);
  background: var(--color-base-200);
  padding: 0.85rem 0.9rem;
}

.application-tabs-tenant-setting > span {
  min-width: 0;
}

.application-tabs-tenant-setting .toggle {
  flex: 0 0 auto;
}

.vacation-plan-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  flex: 0 0 auto;
  gap: 1rem;
}

.vacation-plan-month {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-self: center;
  gap: 0.65rem;
  width: 18rem;
  max-width: 100%;
  min-width: 0;
}

.vacation-plan-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.55rem 0.9rem;
  color: color-mix(in srgb, var(--color-base-content) 58%, transparent);
  font-size: 0.75rem;
  font-weight: 800;
}

.vacation-plan-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}

.vacation-legend-box {
  width: 0.85rem;
  height: 0.85rem;
  border: 1px solid var(--color-base-300);
  border-radius: 0.22rem;
  background: var(--color-base-100);
}

.vacation-legend-box.has-vacation {
  border-color: color-mix(in srgb, #7c3aed 50%, var(--color-base-100));
  background: color-mix(in srgb, #7c3aed 18%, var(--color-base-100));
}

.vacation-legend-box.is-half {
  border-color: color-mix(in srgb, #7c3aed 50%, var(--color-base-100));
  background: linear-gradient(135deg, color-mix(in srgb, #7c3aed 20%, var(--color-base-100)) 0 50%, var(--color-base-100) 50% 100%);
}

.vacation-legend-box.is-holiday {
  border-color: color-mix(in srgb, #7c3aed 54%, var(--color-base-100));
  background: color-mix(in srgb, #7c3aed 16%, var(--color-base-100));
}

.vacation-legend-box.is-off {
  background: var(--color-base-200);
}

.vacation-plan-scroll {
  container-type: inline-size;
  flex: 1 1 auto;
  overflow: auto;
  max-height: none;
  min-height: 0;
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0.35rem;
  overscroll-behavior: contain;
}

.vacation-plan-grid {
  --vacation-row-size: 3.3rem;
  --vacation-day-size: var(--vacation-row-size);
  --vacation-user-column-size: max-content;
  --vacation-user-detail-opacity: 1;
  --vacation-user-extra-width: 14rem;
  --vacation-user-position-height: 1rem;
  min-width: max-content;
  display: grid;
  grid-template-columns: var(--vacation-user-column-size) repeat(var(--vacation-days), var(--vacation-day-size));
  gap: 0.25rem;
  align-items: stretch;
}

.vacation-department-row {
  grid-column: 1 / -1;
  position: sticky;
  left: 0;
  z-index: 3;
  justify-self: start;
  width: 100cqw;
  max-width: 100cqw;
  min-height: 2rem;
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-field);
  background: var(--color-base-200);
  color: color-mix(in srgb, var(--color-base-content) 68%, transparent);
  font-size: 0.78rem;
  font-weight: 900;
}

.vacation-department-content {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 2rem;
  padding: 0.35rem 0.65rem;
}

.vacation-department-row.is-mine {
  border-color: color-mix(in srgb, var(--color-primary) 38%, var(--color-base-300));
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-base-100));
  color: color-mix(in srgb, var(--color-primary) 72%, var(--color-base-content));
}

.vacation-user-header,
.vacation-user-cell,
.vacation-day-header,
.vacation-day-button {
  min-width: 0;
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-field);
}

.vacation-user-header,
.vacation-user-cell {
  position: sticky;
  left: 0;
  min-width: 16rem;
  width: max-content;
  z-index: 2;
  background: var(--color-base-100);
  box-shadow: 8px 0 12px rgba(15, 23, 42, 0.04);
  height: var(--vacation-row-size);
  min-height: var(--vacation-row-size);
}

.vacation-user-header {
  top: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  min-height: 2.65rem;
  padding: 0.55rem 0.7rem;
  color: color-mix(in srgb, var(--color-base-content) 64%, transparent);
  font-size: 0.75rem;
  font-weight: 900;
  text-transform: uppercase;
}

.vacation-user-cell {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.15rem;
  padding: 0.35rem 0.55rem;
}

.vacation-user-meta {
  min-width: 0;
  display: grid;
  gap: 0.08rem;
}

.vacation-user-name,
.vacation-user-cell .user-display-name,
.vacation-user-cell .user-name-core {
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}

.vacation-user-position {
  display: block;
  max-width: 18rem;
  overflow: hidden;
  color: color-mix(in srgb, var(--color-base-content) 55%, transparent);
  font-size: 0.75rem;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vacation-user-first-name {
  white-space: nowrap;
}

.vacation-day-header {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: var(--vacation-day-size);
  height: var(--vacation-row-size);
  background: var(--color-base-100);
  font-weight: 900;
  line-height: 1.05;
}

.vacation-day-header small {
  margin-top: 0.12rem;
  color: color-mix(in srgb, var(--color-base-content) 48%, transparent);
  font-size: 0.58rem;
  font-weight: 800;
}

.vacation-day-header.is-weekend,
.vacation-day-header.is-holiday {
  background: var(--color-base-200);
  color: color-mix(in srgb, var(--color-base-content) 52%, transparent);
}

.vacation-day-header.is-holiday {
  border-color: color-mix(in srgb, #7c3aed 54%, var(--color-base-100));
  background: color-mix(in srgb, #7c3aed 15%, var(--color-base-100));
  color: #5b21b6;
}

.vacation-day-header.is-holiday small {
  color: color-mix(in srgb, #5b21b6 72%, transparent);
}

.vacation-day-header.is-today {
  border-color: color-mix(in srgb, var(--color-primary) 55%, var(--color-base-300));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 28%, transparent);
}

.vacation-day-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--vacation-day-size);
  height: var(--vacation-day-size);
  background: var(--color-base-100);
  color: var(--color-base-content);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.vacation-day-button:hover,
.vacation-day-button:focus-visible {
  border-color: color-mix(in srgb, var(--color-primary) 50%, var(--color-base-300));
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
  outline: none;
  transform: translateY(-1px);
}

.vacation-day-button.is-off {
  background: var(--color-base-200);
  color: color-mix(in srgb, var(--color-base-content) 38%, transparent);
}

.vacation-day-button.is-holiday:not(.has-vacation) {
  border-color: color-mix(in srgb, #7c3aed 54%, var(--color-base-100));
  background: color-mix(in srgb, #7c3aed 15%, var(--color-base-100));
  color: #5b21b6;
}

.vacation-day-button.has-vacation {
  border-color: color-mix(in srgb, #7c3aed 56%, var(--color-base-100));
  background: color-mix(in srgb, #7c3aed 16%, var(--color-base-100));
  color: #5b21b6;
}

.vacation-day-button.has-vacation.is-half,
.vacation-day-button.has-vacation.is-half.is-morning {
  background: linear-gradient(135deg, color-mix(in srgb, #7c3aed 19%, var(--color-base-100)) 0 50%, var(--color-base-100) 50% 100%);
}

.vacation-day-button.has-vacation.is-half.is-afternoon {
  background: linear-gradient(135deg, var(--color-base-100) 0 50%, color-mix(in srgb, #7c3aed 19%, var(--color-base-100)) 50% 100%);
}

.vacation-day-button.is-selected {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--color-primary) 42%, transparent);
}

.vacation-day-button small {
  position: absolute;
  right: 0.2rem;
  bottom: 0.08rem;
  font-size: 0.5rem;
  font-weight: 900;
}

.vacation-day-button.has-vacation.is-half.is-afternoon .vacation-half-label {
  top: 0.08rem;
  right: auto;
  bottom: auto;
  left: 0.2rem;
}

.vacation-plan-popover {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.55rem);
  z-index: 30;
  display: grid;
  gap: 0.18rem;
  justify-items: center;
  width: max-content;
  min-width: 0;
  max-width: min(18rem, calc(100vw - 2rem));
  border: 1px solid color-mix(in srgb, #7c3aed 28%, var(--color-base-300));
  border-radius: var(--radius-field);
  background: var(--color-base-100);
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.14);
  color: var(--color-base-content);
  opacity: 0;
  padding: 0.55rem 0.65rem;
  pointer-events: none;
  text-align: center;
  transform: translate(-50%, 0.25rem);
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s ease;
  visibility: hidden;
  white-space: normal;
}

.vacation-plan-popover::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.35rem;
  width: 0.65rem;
  height: 0.65rem;
  border-right: 1px solid color-mix(in srgb, #7c3aed 28%, var(--color-base-300));
  border-bottom: 1px solid color-mix(in srgb, #7c3aed 28%, var(--color-base-300));
  background: var(--color-base-100);
  transform: translateX(-50%) rotate(45deg);
}

.vacation-plan-popover strong {
  color: #5b21b6;
  font-size: clamp(0.72rem, 0.68rem + 0.18vw, 0.86rem);
  line-height: 1.15;
  white-space: nowrap;
}

.vacation-plan-popover span {
  color: color-mix(in srgb, var(--color-base-content) 62%, transparent);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.2;
}

.vacation-day-header:hover .vacation-plan-popover,
.vacation-day-button:hover .vacation-plan-popover,
.vacation-day-button:focus-visible .vacation-plan-popover {
  opacity: 1;
  transform: translate(-50%, 0);
  visibility: visible;
}

.vacation-day-button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  transform: none;
}

.vacation-day-button.is-holiday:disabled,
.vacation-day-button.has-vacation:disabled {
  opacity: 1;
}

.vacation-day-button:disabled:hover,
.vacation-day-button:disabled:focus-visible {
  border-color: var(--color-base-300);
  box-shadow: none;
}

.vacation-day-button.is-holiday:disabled:hover,
.vacation-day-button.is-holiday:disabled:focus-visible,
.vacation-day-button.is-holiday:disabled {
  border-color: color-mix(in srgb, #7c3aed 54%, var(--color-base-100));
}

.vacation-day-button.has-vacation:disabled:hover,
.vacation-day-button.has-vacation:disabled:focus-visible,
.vacation-day-button.has-vacation:disabled {
  border-color: color-mix(in srgb, #7c3aed 56%, var(--color-base-100));
}

/* Dark theme (owner 28. 10. 2026): the violet days, holidays and the meal voucher badge were mixed with white and
   kept their dark text, so they lit up as light patches. Their tints now mix with the page colour (white in the
   light theme, unchanged there) and the text takes the dark palette of the calendar entries. */
html[data-theme="dark"] :is(.vacation-day-header.is-holiday, .vacation-day-button.is-holiday:not(.has-vacation), .vacation-day-button.has-vacation, .vacation-plan-popover strong) {
  color: color-mix(in oklab, #7c3aed 60%, var(--color-base-content));
}

html[data-theme="dark"] .vacation-day-header.is-holiday small {
  color: color-mix(in oklab, color-mix(in oklab, #7c3aed 60%, var(--color-base-content)) 72%, transparent);
}

html[data-theme="dark"] .meal-voucher-badge.is-eligible {
  border-color: color-mix(in oklab, var(--color-success) 45%, var(--color-base-100));
  background: color-mix(in oklab, var(--color-success) 8%, var(--color-base-100));
  color: var(--color-success);
}

.vacation-modal-actions {
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.vacation-modal-action-group {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-left: auto;
}

.report-ribbon .month-overview {
  align-items: stretch;
}

.insurance-contract-app {
  min-width: 0;
  display: grid;
  gap: 1rem;
}

.insurance-admin-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.insurance-field-legend-action {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.insurance-partner-admin .insurance-price-table th:first-child,
.insurance-partner-admin .insurance-price-table td:first-child {
  width: 3.25rem;
}

.insurance-reference-editor-card {
  min-height: 0;
  max-height: min(62dvh, 42rem);
}

.insurance-reference-table-wrap {
  min-height: 0;
  max-height: min(52dvh, 34rem);
}

.insurance-reference-table {
  min-width: 44rem;
}

.insurance-service-names-card[hidden] {
  display: none;
}

.insurance-service-names-wrap {
  max-height: min(65dvh, 44rem);
}

.insurance-service-names-table {
  min-width: 52rem;
}

.insurance-service-name-identity {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-field);
  background: var(--color-base-200);
  padding: 0.75rem 0.85rem;
}

.insurance-admin-app {
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 1rem;
}

.insurance-contract-heading,
.insurance-contract-footer {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.insurance-contract-badges {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.insurance-contract-form {
  min-width: 0;
  display: grid;
  gap: 1rem;
}

.insurance-card-title {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.insurance-card-title p {
  margin: 0.1rem 0 0;
  color: color-mix(in srgb, var(--color-base-content) 58%, transparent);
  font-size: 0.88rem;
}

.insurance-card-icon {
  flex: 0 0 auto;
  width: 2.6rem;
  height: 2.6rem;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  font-size: 1.08rem;
}

.insurance-device-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8rem;
  align-items: stretch;
}

.insurance-device-grid .fieldset,
.insurance-service-fields .fieldset {
  min-width: 0;
}

.insurance-field-wide {
  grid-column: span 2;
}

.insurance-device-tail-stack {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-self: stretch;
  justify-content: flex-start;
  gap: 0;
}

.insurance-device-tail-stack > .fieldset {
  margin: 0;
}

.insurance-device-tail-textarea {
  display: flex;
  flex-direction: column;
  align-self: stretch;
}

.insurance-device-tail-textarea > .textarea {
  flex: 1 1 auto;
}

.insurance-device-switches {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  align-items: end;
  margin-top: 1.25rem;
}

.insurance-device-switches.hidden {
  display: none;
}

.insurance-retroactive-toggle {
  min-width: 0;
  min-height: var(--size-field, 2.5rem);
  flex: 0 0 auto;
  align-self: stretch;
  margin: 0.45rem 0;
}

.insurance-retroactive-date {
  flex: 0 0 auto;
  margin: 0;
}

.insurance-device-count-error {
  color: var(--color-error);
  font-size: 0.86rem;
  font-weight: 750;
  line-height: 1.35;
}

.field-hint-icon.insurance-serials-hint {
  background: color-mix(in srgb, var(--color-primary) 18%, transparent);
  color: var(--color-primary);
}

.field-hint-icon.insurance-serials-hint:hover,
.field-hint-icon.insurance-serials-hint:focus-visible {
  background: var(--color-primary);
  color: var(--color-primary-content);
}

.field-hint-icon.insurance-serials-hint.hidden {
  display: none;
}

.insurance-original-serial {
  margin: 0;
}

.insurance-retroactive-date {
  margin: 0;
}

.insurance-retroactive-date.is-concealed {
  visibility: hidden;
  pointer-events: none;
}

.insurance-service-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.insurance-service-card {
  min-width: 0;
  transition: opacity 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}

.insurance-service-card.is-disabled {
  opacity: 0.72;
  background: color-mix(in srgb, var(--color-base-200) 72%, var(--color-base-100));
}

.insurance-service-card-heading {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.insurance-service-controls {
  min-width: 0;
  display: grid;
  gap: 0.75rem;
}

.insurance-service-controls.hidden {
  display: none;
}

.insurance-service-duration-field {
  min-width: 0;
  margin: 0;
}

.insurance-service-duration-join {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  align-items: stretch;
  gap: 0.45rem;
}

.insurance-service-duration-option {
  width: 100%;
  min-width: 0;
  min-height: var(--size);
  height: auto;
  margin: 0;
  border-radius: var(--radius-field);
  padding: 0.55rem 0.85rem;
  line-height: 1.2;
  white-space: normal;
  overflow-wrap: anywhere;
}

.insurance-service-fields {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.insurance-service-derived {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.7rem;
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-box);
  background: color-mix(in srgb, var(--color-base-200) 52%, var(--color-base-100));
  padding: 0.75rem;
}

.insurance-service-derived .fieldset {
  min-width: 0;
  margin: 0;
}

.insurance-service-derived .insurance-contract-price {
  grid-column: 1 / -1;
}

.insurance-service-readonly {
  background: var(--color-base-200);
  color: color-mix(in srgb, var(--color-base-content) 68%, transparent);
  cursor: default;
}

.insurance-contract-price {
  min-width: 0;
  color: color-mix(in srgb, var(--color-base-content) 66%, transparent);
  font-size: 0.92rem;
  font-weight: 600;
}

.insurance-contract-price.is-warning,
.insurance-contract-footer .is-warning {
  color: var(--color-warning-content);
}

/* Pojištění › Zařízení: the catalog as a bracket Kategorie → Výrobci → Modely joined by curves (25. 10. 2026). */
.insurance-bracket-panel {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  padding: 1rem;
  overflow: hidden;
}

.insurance-bracket-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.insurance-bracket {
  position: relative;
}

.insurance-bracket-lines {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

.insurance-bracket-lines path {
  fill: none;
  stroke: color-mix(in srgb, var(--color-base-content) 30%, transparent);
  stroke-width: 1.5;
}

.insurance-bracket-lines path.is-blocked {
  stroke-dasharray: 4 4;
  opacity: 0.45;
}

.insurance-bracket-head {
  position: absolute;
  top: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-base-content) 55%, transparent);
}

.insurance-bracket-node {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  height: 30px;
}

.insurance-bracket-label {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  height: 100%;
  padding: 0 0.625rem;
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-field);
  background: var(--color-base-100);
  font-size: 0.85rem;
  text-align: left;
}

button.insurance-bracket-label {
  cursor: pointer;
}

.insurance-bracket-label:not(:disabled):hover,
.insurance-bracket-label:focus-visible {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 6%, var(--color-base-100));
}

.insurance-bracket-label:disabled {
  cursor: default;
  font-style: italic;
  color: color-mix(in srgb, var(--color-base-content) 65%, transparent);
}

.insurance-bracket-node.is-category .insurance-bracket-label {
  border-left: 3px solid var(--color-primary);
  font-weight: 700;
}

.insurance-bracket-node.is-manufacturer .insurance-bracket-label {
  border-left: 3px solid var(--color-info);
  font-weight: 600;
}

.insurance-bracket-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.insurance-bracket-node.is-inactive .insurance-bracket-name {
  opacity: 0.55;
}

.insurance-bracket-node.is-blocked .insurance-bracket-label {
  background: var(--color-base-200);
  opacity: 0.55;
}

.insurance-bracket-node.is-blocked .insurance-bracket-name {
  text-decoration: line-through;
}

.insurance-bracket-node.is-match .insurance-bracket-label {
  border-color: var(--color-warning);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-warning) 30%, transparent);
}

.insurance-bracket-node.is-more .insurance-bracket-label,
.insurance-bracket-node.is-placeholder .insurance-bracket-label {
  border-style: dashed;
  background: transparent;
  font-size: 0.8rem;
  color: color-mix(in srgb, var(--color-base-content) 62%, transparent);
}

.insurance-bracket-excluded {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-error);
}

.insurance-bracket-add {
  flex: none;
  opacity: 0.6;
}

/* Order of manufacturers in a category and models of a manufacturer: the hand drags, the arrows step. */
.insurance-bracket-grip {
  flex: none;
  cursor: grab;
  opacity: 0.55;
}

.insurance-bracket-grip:active {
  cursor: grabbing;
}

.insurance-bracket-order {
  flex: none;
  opacity: 0.7;
}

.insurance-bracket-node:hover :is(.insurance-bracket-grip, .insurance-bracket-order),
.insurance-bracket-node:focus-within :is(.insurance-bracket-grip, .insurance-bracket-order) {
  opacity: 1;
}

.insurance-bracket-node.is-dragging {
  opacity: 0.35;
}

/* The place of a dragged record: a line in the middle of the gap between two records. */
.insurance-bracket-drop {
  position: absolute;
  z-index: 2;
  height: 2px;
  margin-top: -1px;
  border-radius: 1px;
  background: var(--color-primary);
  pointer-events: none;
  transition: top 0.08s ease-out;
}

.insurance-bracket-drop::before,
.insurance-bracket-drop::after {
  content: "";
  position: absolute;
  top: -3px;
  width: 8px;
  height: 8px;
  border: 2px solid var(--color-primary);
  border-radius: 50%;
  background: var(--color-base-100);
}

.insurance-bracket-drop::before {
  left: -4px;
}

.insurance-bracket-drop::after {
  right: -4px;
}

/* The record just moved: its border lights up and fades back. */
.insurance-bracket-node .insurance-bracket-label {
  transition: border-color 0.6s ease, background-color 0.6s ease;
}

.insurance-bracket-node.is-moved .insurance-bracket-label {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-base-100));
}

/* Partners of a catalog record: switches like Aktivní, two columns. */
.insurance-catalog-partner-toggles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.25rem 1rem;
}

@media (max-width: 767px) {
  .insurance-catalog-partner-toggles {
    grid-template-columns: minmax(0, 1fr);
  }
}

.insurance-bracket-node:hover .insurance-bracket-add,
.insurance-bracket-add:focus-visible {
  opacity: 1;
}

.insurance-bracket-loose {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-base-300);
  font-size: 0.8rem;
  color: color-mix(in srgb, var(--color-base-content) 62%, transparent);
}

.insurance-bracket-loose > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.insurance-bracket-loose[hidden] {
  display: none;
}

.insurance-catalog-empty {
  padding: 1rem;
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--color-base-content) 60%, transparent);
  text-align: center;
}

.insurance-catalog-detail-box.iam-detail-modal-box {
  width: min(97vw, 52rem);
  max-width: 52rem;
  height: auto;
}

@media (max-width: 767px) {
  .insurance-bracket-panel {
    padding: 0.75rem;
  }

  .insurance-catalog-detail-box.iam-detail-modal-box {
    width: calc(100vw - 0.5rem);
    max-width: calc(100vw - 0.5rem);
    height: calc(100dvh - 0.5rem);
  }
}

.insurance-price-editor-card {
  min-height: 0;
  overflow: hidden;
}

.insurance-price-editor-card .card-body {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow: hidden;
}

.insurance-price-table-wrap {
  flex: 1 1 auto;
  min-height: 0;
  max-width: 100%;
  overflow: auto;
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-box);
}

.insurance-price-table {
  min-width: 88rem;
  border-collapse: separate;
  border-spacing: 0;
}

.insurance-lookup-table {
  min-width: 54rem;
}

.insurance-price-table th,
.insurance-price-table td {
  border-color: var(--color-base-300);
  vertical-align: middle;
}

.insurance-price-table thead th {
  position: sticky;
  top: 0 !important;
  z-index: 3 !important;
  background: var(--color-base-200);
}

.insurance-price-table thead tr:first-child th {
  top: 0 !important;
  color: color-mix(in srgb, var(--color-base-content) 58%, transparent) !important;
  font-size: 0.68rem !important;
  font-weight: 900 !important;
  text-transform: uppercase;
  padding: 0.4rem 0.9rem !important;
}

.insurance-price-table thead tr:nth-child(2) th {
  top: 1.85rem !important;
}

.insurance-price-action-column {
  position: sticky;
  left: 0;
  z-index: 4;
  width: 4.5rem !important;
  min-width: 4.5rem !important;
  max-width: 4.5rem !important;
  background: var(--color-base-100);
  box-shadow: 8px 0 12px rgba(15, 23, 42, 0.05);
  text-align: center;
}

/* Ceníky: úprava řádku přímo v tabulce, filtr produktu skrývá sloupce druhého produktu */
.insurance-price-table td[data-insurance-price-actions] {
  padding-inline: 0.25rem;
  white-space: nowrap;
}

.insurance-price-table tr.is-editing td {
  background: color-mix(in srgb, var(--color-primary) 5%, var(--color-base-100));
  vertical-align: top;
}

.insurance-price-inline-pair {
  display: grid;
  gap: 0.25rem;
}

.insurance-price-inline-pair .input-xs {
  width: 7.2rem;
  min-width: 7.2rem;
}

.insurance-price-category-button {
  max-width: 13rem;
  justify-content: space-between;
  font-weight: 500;
}

.insurance-price-category-button > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.insurance-price-category-popover {
  position: fixed;
  inset: auto;
  margin: 0;
  min-width: 15rem;
  max-height: 18rem;
  overflow: auto;
  padding: 0.6rem 0.8rem;
}

.insurance-price-category-popover:popover-open {
  display: grid;
  gap: 0.35rem;
}

.insurance-price-table[data-product] {
  min-width: 60rem;
}

.insurance-price-table[data-product="td"] .insurance-price-group-ew,
.insurance-price-table[data-product="ew"] .insurance-price-group-td {
  display: none;
}

.insurance-price-service-title {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  white-space: nowrap;
}

.insurance-price-service-code {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  color: color-mix(in srgb, var(--color-base-content) 50%, transparent);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.68rem;
  font-weight: 600;
}

.insurance-price-service-heading.is-inactive .insurance-price-service-title {
  color: color-mix(in srgb, var(--color-base-content) 45%, transparent);
}

.insurance-price-category-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
}

.insurance-price-category-option {
  gap: 0.45rem;
  color: var(--color-base-content);
}

.insurance-price-service-field .fieldset-legend {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.insurance-price-service-field.is-inactive [data-insurance-price-service-name] {
  color: color-mix(in srgb, var(--color-base-content) 45%, transparent);
}

.insurance-price-service-inputs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
}

.insurance-price-table thead .insurance-price-action-column {
  z-index: 5 !important;
  background: var(--color-base-200);
}

.insurance-price-input {
  width: 7.2rem;
  min-width: 7.2rem;
  background: var(--color-base-100);
}

.insurance-price-number {
  text-align: right;
}

.insurance-price-column-partner .insurance-price-input,
.insurance-price-column-identifikace_kategorie .insurance-price-input,
.insurance-price-column-identifikace_model .insurance-price-input {
  width: 10rem;
  min-width: 10rem;
}

.insurance-price-column-range_priznak .insurance-price-input {
  width: 4.2rem;
  min-width: 4.2rem;
  text-transform: uppercase;
}

.insurance-price-modal-box {
  width: min(66rem, calc(100vw - 1rem));
  max-width: 66rem;
}

.insurance-price-modal-form {
  margin-top: 1rem;
}

.insurance-price-modal-content {
  display: grid;
  gap: 0.9rem;
  max-height: min(66vh, 42rem);
  overflow: auto;
  padding-right: 0.2rem;
}

.insurance-price-modal-section {
  --insurance-price-section-color: var(--color-primary);
  border-color: color-mix(in srgb, var(--insurance-price-section-color) 30%, var(--color-base-300));
  background: color-mix(in srgb, var(--insurance-price-section-color) 5%, var(--color-base-100));
}

.insurance-price-modal-section-td {
  --insurance-price-section-color: var(--color-info);
}

.insurance-price-modal-section-ew {
  --insurance-price-section-color: var(--color-success);
}

.insurance-price-modal-section .card-body {
  gap: 0.8rem;
  padding: 0.9rem;
}

.insurance-price-modal-section-head {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.insurance-price-modal-section-icon {
  flex: 0 0 auto;
  width: 2.1rem;
  height: 2.1rem;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--insurance-price-section-color) 16%, var(--color-base-100));
  color: color-mix(in srgb, var(--insurance-price-section-color) 78%, var(--color-base-content));
}

.insurance-price-modal-section-head h4 {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 900;
  line-height: 1.15;
}

.insurance-price-modal-section-head p {
  margin: 0.15rem 0 0;
  color: color-mix(in srgb, var(--color-base-content) 58%, transparent);
  font-size: 0.78rem;
  font-weight: 650;
}

.insurance-price-modal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
}

.insurance-price-service-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
  align-items: start;
}

.insurance-price-card-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.55rem;
}

.insurance-price-modal-grid .fieldset,
.insurance-price-card-grid .fieldset {
  min-width: 0;
  margin: 0;
}

.insurance-price-modal-grid .insurance-price-input,
.insurance-price-card-grid .insurance-price-input {
  width: 100%;
  min-width: 0;
}

.insurance-price-editor-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.insurance-lookup-card-heading {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.insurance-admin-table-footer {
  flex: 0 0 auto;
}

.insurance-lookup-modal-box {
  width: min(42rem, calc(100vw - 1rem));
  max-width: 42rem;
}

.insurance-lookup-modal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}

.insurance-lookup-modal-grid .fieldset {
  min-width: 0;
  margin: 0;
}

.insurance-lookup-modal-grid .insurance-price-input {
  width: 100%;
  min-width: 0;
}

.report-toolbar {
  display: grid;
  grid-template-columns: 15rem auto auto auto auto;
  align-items: center;
  gap: 0.65rem;
  padding: 0.85rem;
}

.report-toolbar-form {
  min-width: 0;
  width: 15rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.55rem;
}

/* Shared application-toolbar geometry.
   The same responsive gutter is used by page content (`p-4`, `sm:p-6`,
   `lg:p-8`), full-width CRUD toolbars and split calendar/attendance toolbars. */
.app-navbar {
  --app-toolbar-edge-gutter: 1rem;
  --app-toolbar-control-gap: 0.45rem;
}

.app-navbar:not(.has-main-toolbar-full) {
  padding-right: var(--app-toolbar-edge-gutter) !important;
  padding-left: var(--app-toolbar-edge-gutter) !important;
}

.app-navbar.has-main-toolbar-full .report-toolbar {
  padding-right: 0 !important;
  padding-left: var(--app-toolbar-edge-gutter) !important;
}

.app-navbar.has-main-toolbar-full .report-toolbar::after {
  content: "";
  /* The flex gap before this real end spacer is part of the visible trailing
     gutter. Subtract it so left and right edges both resolve to exactly the
     same responsive gutter instead of `gutter + gap` on the right. */
  width: calc(var(--app-toolbar-edge-gutter) - var(--app-toolbar-control-gap));
  min-width: calc(var(--app-toolbar-edge-gutter) - var(--app-toolbar-control-gap));
  height: 1px;
  flex: 0 0 calc(var(--app-toolbar-edge-gutter) - var(--app-toolbar-control-gap));
  pointer-events: none;
}

.application-embedded .app-navbar.has-main-toolbar-full {
  padding-right: 0;
  padding-left: 0;
}

@media (min-width: 640px) {
  .app-navbar {
    --app-toolbar-edge-gutter: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .app-navbar {
    --app-toolbar-edge-gutter: 2rem;
  }
}

/*
 * Toolbars are moved into the shared navbar. Keep their geometry identical in
 * the shell and in the embedded application so loading the iframe cannot
 * change control widths or alignment.
 */
.app-navbar.has-main-toolbar-full {
  padding-inline: 0;
}

.app-navbar.has-main-toolbar-full > .nav-third {
  display: none !important;
}

.app-navbar.has-main-toolbar-full > .app-navbar-toolbar {
  width: 100%;
  flex: 1 1 auto;
}

.app-navbar .report-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 0.45rem;
  white-space: nowrap;
}

.app-navbar.has-main-toolbar-full .report-toolbar {
  padding: 0.6rem 2rem;
}

.app-navbar .report-toolbar > * {
  flex: 0 0 auto;
}

.app-navbar.has-main-toolbar-full .report-toolbar-form,
.app-navbar.has-main-toolbar-full .invoice-contact-search-form,
.app-navbar.has-main-toolbar-full .admin-report-toolbar > .report-search {
  width: 15rem;
  min-width: 15rem;
  flex: 0 0 15rem;
}

.app-navbar .report-view-switch,
.app-navbar .report-config-actions,
.app-navbar .admin-grid-filters {
  width: auto;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  grid-template-columns: none;
}

.app-navbar .report-view-switch .btn,
.app-navbar .report-config-actions .btn {
  width: auto;
  flex: 0 0 auto;
  white-space: nowrap;
}

.app-navbar.has-main-toolbar-full .admin-grid-filters > .select {
  width: 10.5rem;
  min-width: 10.5rem;
  flex: 0 0 10.5rem;
}

/* --- Lišta gridu ve třech zónách (vlastník 25. 10. 2026) ----------------------------------------
   Vlevo nový záznam a rychlé hledání, uprostřed přepínač Tabulka/Souhrn/Graf a kousek od něj
   nastavení gridu (Sloupce, Filtr, Seskupit, Pohledy, filtry, reset), vpravo API, PDF a Export.
   Pořadí určuje `order` nad stávajícím markupem stránek; dvě pružné mezery vkládá a dorovnává
   layoutToolbarZones (index.php), aby střed zůstal uprostřed lišty. Na mobilu lišta roluje jako
   dosud, jen s menšími mezerami mezi zónami. */
.app-navbar .toolbar-zones {
  --toolbar-zone-min: 1.5rem;
}

.app-navbar .toolbar-zones > *,
.app-navbar .toolbar-zones > .catalog-toolbar-actions > * {
  order: 50;
}

.app-navbar .toolbar-zones > .catalog-toolbar-actions {
  display: contents;
}

.app-navbar .toolbar-zones > .btn-success:not(.btn-outline),
.app-navbar .toolbar-zones > .catalog-toolbar-actions > .btn-success:not(.btn-outline) {
  order: 10;
}

.app-navbar .toolbar-zones > :is(.report-toolbar-form, .report-search, .invoice-contact-search-form) {
  order: 20;
}

.app-navbar .toolbar-zones > [data-toolbar-zone-gap] {
  min-width: var(--toolbar-zone-min);
  height: 1px;
  pointer-events: none;
}

.app-navbar .toolbar-zones > [data-toolbar-zone-gap="start"] {
  order: 30;
  flex: 1 1 calc(var(--toolbar-zone-min) + var(--toolbar-zone-balance-start, 0px));
}

.app-navbar .toolbar-zones > .report-view-switch {
  order: 40;
  margin-right: 0.5rem;
}

.app-navbar .toolbar-zones > :is([data-report-reset], [data-admin-grid-reset]) {
  order: 60;
}

.app-navbar .toolbar-zones > [data-toolbar-zone-gap="end"] {
  order: 80;
  flex: 1 1 calc(var(--toolbar-zone-min) + var(--toolbar-zone-balance-end, 0px));
}

.app-navbar .toolbar-zones > :is([data-integration-import-open], .btn:has(> .fa-file-pdf)),
.app-navbar .toolbar-zones > .catalog-toolbar-actions > [data-integration-import-open] {
  order: 85;
}

.app-navbar .toolbar-zones > :is(:has(.fa-file-export), .org-toolbar-actions) {
  order: 90;
}

/* The trailing gutter of the bar stays last; a section of the bar with zones fills it. */
.app-navbar.has-main-toolbar-full .report-toolbar::after {
  order: 100;
}

.app-navbar .app-navbar-toolbar > .toolbar-zones {
  flex: 1 0 auto;
}

@media (max-width: 767px) {
  .app-navbar .toolbar-zones {
    --toolbar-zone-min: 0.75rem;
  }
}

.report-search {
  width: 15rem;
  max-width: 100%;
  flex: 0 0 15rem;
}

/* Rychlé hledání (vlastník 25. 10. 2026): jedno pole ve všech aplikacích – velikost z Pojištěných
   zařízení (15 rem × výška pole, i na mobilu), placeholder „Rychlé hledání“; chování app.js
   (appLiveTableSearch: okamžitě, bez diakritiky, shody označené). Ve formuláři lišty pole vyplní
   formulář o stejné šířce. */
.report-toolbar-form .report-search {
  width: 100%;
  flex: none;
}

.report-per-page {
  width: 5.25rem;
}

.report-view-switch,
.report-config-actions {
  white-space: nowrap;
}

.report-config-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.report-config-panel {
  padding: 0.85rem;
}

.report-config-panel summary {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  cursor: pointer;
  font-weight: 800;
  list-style: none;
}

.report-config-panel summary::-webkit-details-marker {
  display: none;
}

.report-checkbox-grid,
.report-checkbox-stack,
.report-filter-list,
.report-sort-list {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.8rem;
}

.report-checkbox-grid,
.report-checkbox-stack {
  max-height: 16rem;
  overflow-y: auto;
  padding-right: 0.2rem;
}

.report-check-row {
  justify-content: flex-start;
  gap: 0.55rem;
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-field);
  background: var(--color-base-100);
  padding: 0.45rem 0.55rem;
  font-size: 0.82rem;
  font-weight: 700;
}

.report-check-row span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.report-filter-row {
  display: grid;
  grid-template-columns: minmax(7rem, 1fr) minmax(7rem, 1fr) minmax(6rem, 1fr) minmax(5rem, 0.75fr) auto;
  gap: 0.4rem;
  align-items: center;
}

.report-sort-row,
.report-chart-options {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(7rem, 0.7fr);
  gap: 0.45rem;
}

.report-chart-type-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.6rem, 1fr));
  gap: 0.45rem;
}

.report-chart-type-option {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 2rem;
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-field);
  background: var(--color-base-100);
  color: color-mix(in srgb, var(--color-base-content) 82%, transparent);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 850;
  line-height: 1.1;
  padding: 0.35rem 0.55rem;
  text-align: center;
}

.report-chart-type-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.report-chart-type-option:hover,
.report-chart-type-option:focus-within {
  border-color: color-mix(in srgb, var(--color-primary) 55%, var(--color-base-300));
}

.report-chart-type-option.is-active,
.report-chart-type-option:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-primary-content);
}

.report-two-column-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.report-option-title {
  margin-top: 0.8rem;
  color: color-mix(in srgb, var(--color-base-content) 62%, transparent);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.report-profile-panel {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.8rem;
}

.report-profile-save,
.report-profile-list,
.report-profile-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.report-profile-save .input {
  width: min(18rem, 100%);
}

.report-profile-list {
  justify-content: flex-end;
}

.report-profile-item {
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-field);
  background: var(--color-base-100);
  padding: 0.15rem;
}

.report-view-chip-group {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.report-view-chip-label {
  color: color-mix(in srgb, var(--color-base-content) 58%, transparent);
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.report-data-panel {
  padding: 1rem;
}

.report-table-scroll {
  max-width: 100%;
  overflow-x: auto;
}

.report-table {
  min-width: 52rem;
}

.report-table th {
  white-space: nowrap;
}

.report-table td {
  max-width: 20rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.report-sort-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: inherit;
}

.report-sort-link > i {
  opacity: 0;
  transition: opacity 140ms ease;
}

.report-sort-link:hover > i,
.report-sort-link:focus-visible > i {
  opacity: 1;
}

.insurance-services-panel {
  padding: 0;
  overflow: hidden;
}

.insurance-services-panel .report-table-scroll {
  max-height: calc(100dvh - 18rem);
  overflow: auto;
}

.insurance-services-table {
  min-width: 108rem;
  font-size: 0.82rem;
}

.insurance-services-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  border-bottom: 1px solid var(--color-base-300);
  background: var(--color-base-200);
  padding: 0.85rem 0.9rem;
  color: color-mix(in srgb, var(--color-base-content) 76%, transparent);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  text-align: left;
}

.insurance-services-table tbody tr {
  border-bottom: 1px solid color-mix(in srgb, var(--color-base-300) 72%, transparent);
}

.insurance-services-table td {
  min-width: 7rem;
  padding: 1rem 0.9rem;
  vertical-align: middle;
  text-align: left;
}

/* Widths by the column (Zařízení, the two services), not by its position: with more partners the
   Partner column follows the ID and the 19rem of Zařízení went to Pojistné (owner 25. 10. 2026). */
.insurance-services-table .insurance-col-device {
  min-width: 19rem;
}

.insurance-services-table .insurance-col-service {
  min-width: 15rem;
}

.insurance-service-id {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid color-mix(in srgb, var(--color-primary) 32%, var(--color-base-300));
  border-radius: var(--radius-field);
  background: color-mix(in srgb, var(--color-primary) 9%, var(--color-base-100));
  padding: 0.45rem 0.6rem;
  color: var(--color-primary);
  font-weight: 850;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease, transform 140ms ease;
}

.insurance-service-id:hover {
  border-color: color-mix(in srgb, var(--color-primary) 62%, var(--color-base-300));
  background: color-mix(in srgb, var(--color-primary) 16%, var(--color-base-100));
}

.insurance-service-id:active {
  transform: translateY(1px);
}

.insurance-service-id:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.insurance-service-id-link {
  min-height: 0;
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  font-family: inherit;
  line-height: inherit;
  white-space: nowrap;
  cursor: pointer;
}

.insurance-service-id-link:focus-visible {
  border-radius: var(--radius-field);
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

.invoice-grid-open-column {
  min-width: 9rem;
}

.invoice-grid-open {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 18rem;
}

.invoice-grid-open > span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.insurance-service-flag {
  border-color: color-mix(in srgb, var(--color-warning) 55%, var(--color-base-300));
  background: color-mix(in srgb, var(--color-warning) 12%, var(--color-base-100));
  font-weight: 800;
}

.insurance-service-date,
.insurance-service-premium {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.insurance-service-premium {
  text-align: left;
  font-weight: 800;
}

.insurance-service-details {
  display: grid;
  gap: 0.32rem;
  margin: 0;
}

.insurance-service-details > div {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.4rem;
}

.insurance-service-details dt {
  color: color-mix(in srgb, var(--color-base-content) 55%, transparent);
  font-size: 0.74rem;
}

.insurance-service-details dt::after {
  content: ':';
}

.insurance-service-details dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  font-weight: 650;
}

.insurance-model-tooltip {
  cursor: help;
  text-decoration: underline dotted color-mix(in srgb, var(--color-base-content) 38%, transparent);
  text-underline-offset: 0.18rem;
}

.insurance-service-empty {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: color-mix(in srgb, var(--color-base-content) 45%, transparent);
  font-weight: 700;
}

.insurance-service-note {
  max-width: 16rem;
  white-space: normal;
}

.insurance-services-panel > .report-table-footer {
  margin-top: 0;
  padding: 0.8rem 1rem;
}

/* Pojištění › Pojistné události: page in the contained-scroll layout. */
[data-insurance-claims-new-root] {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 1rem;
  overflow: hidden;
}

[data-insurance-claims-new-root] > .report-toolbar,
[data-insurance-claims-new-root] > .insurance-claims-new-notice {
  flex: 0 0 auto;
}

[data-insurance-claims-new-root] > .report-view-container {
  margin-top: 0;
}

.insurance-claims-new-notice {
  align-items: flex-start;
}

.insurance-claims-new-notice strong {
  display: block;
}

.insurance-claims-new-panel > .report-table-scroll {
  min-height: 0;
  flex: 0 1 auto;
  overflow: auto;
  overscroll-behavior: contain;
}

.insurance-claims-new-table {
  min-width: 88rem;
}

/* Zařízení like in Pojištěná zařízení (category, model, serial number), Pojištěný on two lines. */
.insurance-claims-new-table td.insurance-claims-new-device {
  min-width: 17rem;
}

.insurance-claims-new-table td.insurance-claims-new-insured-cell {
  min-width: 12rem;
}

.insurance-claims-new-table th,
.insurance-claims-new-table td {
  vertical-align: middle;
}

/* Zpracování (owner 27. 10. 2026): a ring of the steps (insurance_claims_new_processing_cell) – done steps light
   up green, a failed one red, waiting and skipped ones stay grey; a converted claim is one quiet full ring – and
   a badge for each failed or waiting step next to it. */
.insurance-claims-new-processing {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.insurance-claims-new-step-badges {
  display: grid;
  justify-items: start;
  gap: 0.25rem;
}

.insurance-claims-new-steps {
  display: inline-flex;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
}

.insurance-claims-new-steps svg {
  width: 100%;
  height: 100%;
  rotate: -90deg;
}

.insurance-claims-new-steps circle {
  fill: none;
  stroke: color-mix(in oklab, var(--color-base-content) 20%, transparent);
  stroke-width: 5;
}

.insurance-claims-new-steps circle.is-done {
  stroke: var(--color-success);
}

.insurance-claims-new-steps circle.is-converted {
  stroke: var(--color-success);
  stroke-opacity: 0.45;
}

.insurance-claims-new-steps circle.is-error {
  stroke: var(--color-error);
}

/* Pojištěný: the firm and the person (contact) on two lines. */
.insurance-claims-new-insured {
  display: grid;
  gap: 0.1rem;
  min-width: 10rem;
  line-height: 1.25;
}

.insurance-claims-new-insured strong {
  font-weight: 600;
}

.insurance-claims-new-insured strong + span {
  font-size: 0.85rem;
  color: color-mix(in srgb, var(--color-base-content) 70%, transparent);
}

.insurance-claims-new-status {
  height: auto;
  min-height: 1.25rem;
  white-space: normal;
  text-align: left;
}

.insurance-claims-new-subtitle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.15rem;
  color: color-mix(in srgb, var(--color-base-content) 65%, transparent);
  font-size: 0.85rem;
}

.insurance-claims-new-loading {
  display: flex;
  min-height: 12rem;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  color: color-mix(in srgb, var(--color-base-content) 65%, transparent);
}

.insurance-claims-new-loading[hidden] {
  display: none;
}

.insurance-claims-new-body {
  display: grid;
  align-content: start;
  gap: 1rem;
}

/* Nahlášené údaje: karty sekcí ve sloupcích pod sebou (každá hned pod předchozí), barevný proužek a ikona sekce */
.insurance-claims-new-sections {
  columns: 2 24rem;
  column-gap: 1rem;
}

.insurance-claims-new-section {
  display: inline-flex;
  width: 100%;
  margin-bottom: 1rem;
  break-inside: avoid;
  border-top: 3px solid var(--claims-section-tone, var(--color-base-300));
}

.insurance-claims-new-section .card-body {
  gap: 0.75rem;
}

.insurance-claims-new-section-primary { --claims-section-tone: var(--color-primary); }
.insurance-claims-new-section-secondary { --claims-section-tone: var(--color-secondary); }
.insurance-claims-new-section-accent { --claims-section-tone: var(--color-accent); }
.insurance-claims-new-section-info { --claims-section-tone: var(--color-info); }
.insurance-claims-new-section-success { --claims-section-tone: var(--color-success); }
.insurance-claims-new-section-warning { --claims-section-tone: var(--color-warning); }
.insurance-claims-new-section-neutral { --claims-section-tone: var(--color-neutral); }

.insurance-claims-new-section-dl {
  gap: 0;
}

.insurance-claims-new-section-dl dt,
.insurance-claims-new-section-dl dd {
  border-bottom: 1px solid color-mix(in srgb, var(--color-base-300) 70%, transparent);
  padding-block: 0.4rem;
}

.insurance-claims-new-section-dl dt:last-of-type,
.insurance-claims-new-section-dl dd:last-of-type {
  border-bottom: 0;
}

.insurance-claims-new-dl {
  display: grid;
  grid-template-columns: minmax(9rem, 40%) minmax(0, 1fr);
  gap: 0.35rem 0.9rem;
  font-size: 0.9rem;
}

.insurance-claims-new-dl dt {
  color: color-mix(in srgb, var(--color-base-content) 62%, transparent);
}

.insurance-claims-new-dl dd {
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: pre-line;
}

.insurance-claims-new-dl-compact {
  grid-template-columns: minmax(6rem, auto) minmax(0, 1fr);
  font-size: 0.82rem;
}

.insurance-claims-new-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  color: color-mix(in srgb, var(--color-base-content) 62%, transparent);
  font-size: 0.8rem;
}

.insurance-claims-new-note {
  display: grid;
  gap: 0.5rem;
}

/* Dokumenty škody: the title with „Nahrát dokumenty“ on the right; files dropped on the card open the upload. */
.insurance-claims-new-documents-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
}

.insurance-claims-new-documents {
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.insurance-claims-new-documents.is-dragover {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 35%, transparent);
}

/* ---- Upload of documents (upload-pond.js, render_upload_pond; owner 30. 10. 2026) ------------------
   The field of the online claim form (adjusted FilePond of maxima-hlaseni_skody): dashed field with
   rounded corners, a cloud, bold „Přetáhněte soubory sem“, „nebo použijte tlačítko“ and a pill button;
   under it a row per file (rounded panel, grey once uploaded, red on refusal) with the charge
   animation on a canvas behind its text, and a select of the category in each row. */
.upload-pond-modal {
  display: flex;
  flex-direction: column;
  width: min(94vw, 50rem);
  max-width: 50rem;
  max-height: min(92dvh, 52rem);
  padding: 0;
  overflow: hidden;
}

.upload-pond-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1rem 1.25rem;
}

.upload-pond-modal .invoice-detail-footer-actions {
  margin-left: auto;
}

.upload-pond {
  display: grid;
  gap: 0.75rem;
}

.upload-pond-bulk[hidden] {
  display: none;
}

.upload-pond-field {
  display: grid;
  gap: 0.5rem;
  border: 1px dashed color-mix(in srgb, var(--color-base-content) 42%, transparent);
  border-radius: 1.25rem;
  padding: 0.5rem;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.upload-pond-field.is-dragover {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 6%, var(--color-base-100));
}

.upload-pond-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  min-height: 13.5rem;
  border-radius: 0.9rem;
  padding: 1rem;
  text-align: center;
  cursor: pointer;
  transition: min-height 0.25s ease;
}

.upload-pond-drop:has(:focus-visible) {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.upload-pond-field.is-locked .upload-pond-drop {
  cursor: default;
  opacity: 0.55;
}

.upload-pond-drop-icon {
  margin-bottom: 0.4rem;
  color: var(--color-primary);
  font-size: 2.75rem;
}

.upload-pond-drop-title {
  font-weight: 700;
  font-size: 1.06rem;
}

.upload-pond-drop-text {
  color: color-mix(in srgb, var(--color-base-content) 70%, transparent);
  font-size: 0.82rem;
}

.upload-pond-drop-button {
  margin-top: 1rem;
  border-radius: 999px;
  padding-inline: 1.25rem;
  pointer-events: none;
}

/* With files the field stays, only lower (FilePond grows by its rows). */
.upload-pond.has-items .upload-pond-drop {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  min-height: 4.5rem;
  padding: 0.6rem 1rem;
}

.upload-pond.has-items .upload-pond-drop-icon {
  margin: 0;
  font-size: 1.6rem;
}

.upload-pond.has-items .upload-pond-drop-button {
  margin: 0;
}

.upload-pond-items {
  display: grid;
  gap: 0.5rem;
}

.upload-pond-items:empty {
  display: none;
}

.upload-pond-item {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(11rem, 17rem) auto;
  align-items: center;
  gap: 0.65rem;
  min-height: 3.5rem;
  border-radius: 0.5em;
  background: color-mix(in srgb, var(--color-base-content) 5%, var(--color-base-100));
  padding: 0.5rem 0.5rem 0.5rem 0.85rem;
  transition: background-color 0.3s ease;
}

.upload-pond-item > :not(.upload-pond-anim) {
  position: relative;
  z-index: 1;
}

.upload-pond-anim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}

.upload-pond-item-icon {
  font-size: 1.25rem;
}

.upload-pond-item-info {
  display: grid;
  min-width: 0;
  gap: 0.1rem;
}

.upload-pond-item-name {
  overflow: hidden;
  font-weight: 600;
  font-size: 0.9rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upload-pond-item-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.6rem;
  color: color-mix(in srgb, var(--color-base-content) 62%, transparent);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

.upload-pond-item-type {
  width: 100%;
}

.upload-pond-item-remove {
  color: var(--color-error);
}

.upload-pond-item-remove[hidden] {
  display: inline-flex;
  visibility: hidden;
}

.upload-pond-item.is-missing-type [data-upload-pond-status],
.upload-pond-item[data-state="error"] [data-upload-pond-status] {
  color: var(--color-error);
  font-weight: 600;
}

/* Uploaded right after adding (staged) the row turns grey as in the online claim form, then registered. */
.upload-pond-item[data-state="staged"],
.upload-pond-item[data-state="done"] {
  background: color-mix(in srgb, var(--color-base-content) 12%, var(--color-base-100));
}

.upload-pond-item[data-state="staged"]:not(.is-missing-type) [data-upload-pond-status],
.upload-pond-item[data-state="done"] [data-upload-pond-status] {
  color: var(--color-success);
  font-weight: 600;
}

.upload-pond-item[data-state="error"] {
  background: color-mix(in srgb, var(--color-error) 14%, var(--color-base-100));
}

.upload-pond-hint {
  margin: 0;
  color: color-mix(in srgb, var(--color-base-content) 58%, transparent);
  font-size: 0.8rem;
}

/* Registration done: the modal steps aside (box fades, no dimming) and the rows fly into the grid. */
.upload-pond-dialog.is-flying {
  background-color: transparent !important;
  transition: background-color 0.25s ease;
}

.upload-pond-dialog.is-flying > .modal-box {
  opacity: 0;
  transition: opacity 0.18s ease;
}

.upload-pond-ghost {
  position: fixed;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  overflow: hidden;
  border-radius: 0.5em;
  background: color-mix(in srgb, var(--color-primary) 12%, var(--color-base-100));
  box-shadow: 0 0.6rem 1.6rem color-mix(in srgb, var(--color-base-content) 22%, transparent);
  padding: 0 0.85rem;
  pointer-events: none;
  white-space: nowrap;
  will-change: transform, opacity;
}

.upload-pond-ghost-name {
  overflow: hidden;
  font-weight: 600;
  font-size: 0.9rem;
  text-overflow: ellipsis;
}

.upload-pond-ghost-type {
  margin-left: auto;
  color: color-mix(in srgb, var(--color-base-content) 62%, transparent);
  font-size: 0.78rem;
}

tr.upload-pond-arriving {
  opacity: 0;
}

tr.upload-pond-arrived > td {
  animation: upload-pond-arrived 2.6s ease-out;
}

@keyframes upload-pond-arrived {
  0%,
  25% {
    background-color: color-mix(in srgb, var(--color-primary) 16%, transparent);
  }

  100% {
    background-color: transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  tr.upload-pond-arrived > td {
    animation-duration: 4s;
  }
}

@media (max-width: 767px) {
  .upload-pond-modal-body {
    padding: 0.85rem 1rem;
  }

  .upload-pond-item {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .upload-pond-item-type {
    grid-column: 2 / -1;
    grid-row: 2;
  }

  .upload-pond-item > span:empty {
    display: none;
  }

  .upload-pond-drop {
    min-height: 11rem;
  }
}

.insurance-claims-new-file-name {
  min-width: 10rem;
  overflow-wrap: anywhere;
}

.insurance-claims-new-notes {
  display: grid;
  gap: 0.75rem;
}

.insurance-claims-new-step-result {
  max-width: 28rem;
  overflow-wrap: anywhere;
  font-size: 0.8rem;
}


@media (max-width: 767px) {
  /* Notice with an action: text beside the icon in full width, the button below it. */
  .insurance-claims-new-notice {
    grid-auto-flow: row;
    grid-template-columns: auto minmax(0, 1fr);
  }

  .insurance-claims-new-notice > .btn {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .insurance-claims-new-dl {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.1rem;
  }

  .insurance-claims-new-dl dd {
    margin-bottom: 0.4rem;
  }

  .insurance-claims-new-section-dl dt {
    border-bottom: 0;
    padding-bottom: 0;
  }

  .insurance-claims-new-section-dl dd {
    margin-bottom: 0;
    padding-top: 0.1rem;
  }
}

.insurance-claim-detail-modal-box {
  width: min(96vw, 92rem);
  max-width: 92rem;
  height: min(96dvh, 70rem);
  max-height: 96dvh;
}

.insurance-claim-tabs {
  flex: 0 0 auto;
  border-bottom: 1px solid var(--color-base-300);
  background: var(--color-base-100);
  padding: 0 1.25rem;
}

.insurance-claim-tab-panel {
  min-width: 0;
  display: grid;
  gap: 1rem;
}

.insurance-claim-tab-panel > .card,
.insurance-claim-tab-panel .card-body,
.insurance-claim-document-card-header {
  min-width: 0;
}

.insurance-claim-tab-panel[hidden] {
  display: none;
}

.insurance-claim-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem 1rem;
}

.insurance-claim-field-wide {
  grid-column: 1 / -1;
}

.insurance-claim-document-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.insurance-claim-document-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: flex-end;
  white-space: nowrap;
}

.insurance-claim-document-table-wrap {
  max-height: min(50dvh, 28rem);
}

.insurance-claim-upload-file-list {
  display: grid;
  gap: 0.35rem;
  font-size: 0.85rem;
  color: color-mix(in srgb, var(--color-base-content) 70%, transparent);
}

.insurance-claim-upload-file-list:empty {
  display: none;
}

.insurance-claim-document-edit-filename {
  font-weight: 600;
  word-break: break-word;
}

.insurance-claim-document-viewer-box {
  display: flex;
  flex-direction: column;
  width: min(98vw, 100rem);
  max-width: 100rem;
  height: min(96dvh, 76rem);
  max-height: 96dvh;
  padding: 0;
  overflow: hidden;
  background: var(--color-base-200);
}

.insurance-claim-document-viewer-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  flex: 0 0 auto;
  align-items: center;
  gap: 1rem;
  border-bottom: 1px solid var(--color-base-300);
  background: var(--color-base-100);
  padding: 0.85rem 1rem;
}

.insurance-claim-document-viewer-toolbar {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.35rem;
  border-bottom: 1px solid var(--color-base-300);
  background: var(--color-base-100);
  padding: 0.55rem 1rem;
}

.insurance-claim-document-viewer-toolbar .btn-active,
.invoice-preview-view-controls .btn-active {
  color: var(--color-primary-content);
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.insurance-claim-document-zoom,
.insurance-claim-document-page-count {
  min-width: 4rem;
  color: color-mix(in srgb, var(--color-base-content) 65%, transparent);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
  white-space: nowrap;
}

.insurance-claim-document-viewer-stage {
  position: relative;
  min-height: 0;
  flex: 1 1 auto;
  overflow: auto;
  overscroll-behavior: contain;
  background:
    radial-gradient(circle at top, color-mix(in srgb, var(--color-primary) 7%, transparent), transparent 34rem),
    var(--color-base-200);
  padding: 1.25rem;
}

.insurance-claim-document-viewer-loading,
.insurance-claim-document-unsupported {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.8rem;
  background: color-mix(in srgb, var(--color-base-200) 90%, transparent);
  color: color-mix(in srgb, var(--color-base-content) 68%, transparent);
  text-align: center;
}

.insurance-claim-document-unsupported > i {
  color: var(--color-primary);
  font-size: 3rem;
}

.insurance-claim-document-viewer-loading.hidden,
.insurance-claim-document-unsupported.hidden,
.insurance-claim-document-pages.hidden,
.insurance-claim-document-image.hidden {
  display: none;
}

.insurance-claim-document-pages {
  display: grid;
  justify-items: center;
  gap: 1.25rem;
}

/* Škody – nové: náhled e-mailu (.eml) – hlavička, přílohy a tělo v izolovaném rámu */
.insurance-claims-new-email-box {
  width: min(96vw, 72rem);
}

.insurance-claims-new-email-head {
  display: grid;
  flex: 0 0 auto;
  gap: 0.75rem;
  max-height: 45%;
  overflow: auto;
  border-bottom: 1px solid var(--color-base-300);
  background: var(--color-base-100);
  padding: 0.75rem 1rem;
}

.insurance-claims-new-email-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.insurance-claims-new-email-attachments:empty {
  display: none;
}

.insurance-claims-new-email-attachment-name {
  max-width: 18rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.insurance-claims-new-email-stage {
  padding: 0.5rem 0.75rem;
  background: #fff;
}

.insurance-claims-new-email-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

.insurance-claims-new-email-frame.hidden {
  display: none;
}

@media (max-width: 640px) {
  .insurance-claims-new-email-attachment-name {
    max-width: 10rem;
  }
}

.insurance-claim-document-page {
  position: relative;
  width: max-content;
  max-width: none;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--color-base-content) 14%, transparent);
  border-radius: 0.3rem;
  background: #fff;
  box-shadow: 0 1rem 2.75rem color-mix(in srgb, #000 18%, transparent);
}

.insurance-claim-document-page canvas {
  display: block;
}

.insurance-claim-document-page-label {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 1;
  border-radius: 999px;
  background: color-mix(in srgb, #111 74%, transparent);
  padding: 0.2rem 0.55rem;
  color: #fff;
  font-size: 0.7rem;
  opacity: 0;
  transition: opacity 140ms ease;
}

.insurance-claim-document-page:hover .insurance-claim-document-page-label {
  opacity: 1;
}

.insurance-claim-document-image {
  display: block;
  height: auto;
  margin: 0 auto;
  transform-origin: center;
  border-radius: var(--radius-box);
  background: #fff;
  box-shadow: 0 1rem 2.75rem color-mix(in srgb, #000 18%, transparent);
  transition: width 120ms ease, transform 120ms ease;
}

.insurance-claim-mini-meta {
  color: color-mix(in srgb, var(--color-base-content) 62%, transparent);
  font-size: 0.78rem;
}

.insurance-claim-empty {
  border: 1px dashed var(--color-base-300);
  border-radius: var(--radius-field);
  padding: 1rem;
  color: color-mix(in srgb, var(--color-base-content) 58%, transparent);
  text-align: center;
}

.insurance-claim-timeline {
  display: grid;
  gap: 0.75rem;
}

.insurance-claim-timeline-item {
  display: grid;
  grid-template-columns: 0.75rem minmax(0, 1fr);
  gap: 0.75rem;
}

.insurance-claim-timeline-dot {
  width: 0.7rem;
  height: 0.7rem;
  margin-top: 0.35rem;
  border-radius: 999px;
  background: var(--color-primary);
}

.insurance-service-detail-modal-box {
  display: flex;
  flex-direction: column;
  width: min(96vw, 88rem);
  max-width: 88rem;
  height: min(94dvh, 70rem);
  max-height: 94dvh;
  padding: 0;
  overflow: hidden;
}

.insurance-centres-management-modal-box {
  width: min(96vw, 78rem);
  max-width: 78rem;
}

.insurance-centres-management-body,
.insurance-centre-management {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.insurance-centres-management-body {
  gap: 1rem;
  overflow: hidden;
  padding: 1rem;
}

.insurance-centre-management {
  gap: 1rem;
}

.insurance-centre-management > .admin-management-grid {
  flex: 1 1 auto;
  min-height: 0;
}

.insurance-centre-management .admin-grid-card,
.insurance-centre-management .admin-grid-table-wrap {
  height: 100%;
  min-height: 0;
}

.insurance-centre-editor-modal-box {
  width: min(94vw, 42rem);
  max-width: 42rem;
  height: auto;
  max-height: min(92dvh, 42rem);
}

.insurance-centre-editor-form {
  display: grid;
  flex: 1 1 auto;
  align-content: start;
  gap: 1rem;
  min-height: 0;
  overflow-y: auto;
  padding: 1.25rem;
}

.insurance-service-detail-toolbar {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  flex: 0 0 auto;
  align-items: center;
  gap: 1rem;
  border-bottom: 1px solid var(--color-base-300);
  background: var(--color-base-100);
  padding: 1rem 1.25rem;
}

.insurance-service-detail-actions,
.insurance-service-detail-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.65rem;
}

[data-insurance-service-save].hidden {
  display: none;
}

.insurance-service-detail-form {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  padding: 1.25rem;
}

.insurance-service-detail-form.hidden {
  display: none;
}

.insurance-service-detail-form > fieldset {
  display: grid;
  min-width: 0;
  gap: 1rem;
  border: 0;
  padding: 0;
}

.insurance-service-detail-form > fieldset:disabled {
  opacity: 1;
}

.insurance-service-detail-form > fieldset:disabled :is(.input, .select, .textarea) {
  border-color: color-mix(in srgb, var(--color-base-300) 78%, transparent);
  background: var(--color-base-200);
  color: var(--color-base-content);
  opacity: 1;
}

/* Match unselected locked durations to the other read-only form fields. */
.insurance-service-detail-form > fieldset:disabled .insurance-service-duration-option {
  border-color: color-mix(in srgb, var(--color-base-300) 78%, transparent);
  background-color: var(--color-base-200);
  color: var(--color-base-content);
  opacity: 1;
  cursor: not-allowed;
}

.insurance-service-detail-form > fieldset:disabled .insurance-service-duration-option:checked {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
  color: var(--color-primary-content);
}

.insurance-service-detail-footer {
  position: relative;
  flex: 0 0 auto;
  z-index: 4;
  border-top: 1px solid var(--color-base-300);
  margin: 0;
  background: var(--color-base-100);
  padding: 1rem 1.25rem;
}

.insurance-service-cancel-modal-box {
  padding: 0;
  overflow: hidden;
}

.insurance-service-cancel-form {
  display: grid;
  gap: 1rem;
  padding: 1.25rem;
}

[data-insurance-service-active-field].is-cancelled {
  cursor: not-allowed;
}

[data-insurance-service-active-field].is-cancelled [data-insurance-service-active-label] {
  color: var(--color-error);
  font-weight: 700;
}

.report-row-action-column {
  width: 2.8rem;
  min-width: 2.8rem;
  text-align: center;
}

.invoice-detail-modal-box {
  display: flex;
  flex-direction: column;
  width: min(97vw, 94rem);
  max-width: 94rem;
  height: min(96dvh, 70rem);
  max-height: 96dvh;
  padding: 0;
  overflow: hidden;
}

/* Invisible top-layer host; the child uses the original issued invoice modal. */
.invoice-linked-modal-host { height: 100dvh; max-height: none; max-width: none; margin: 0; padding: 0; border: 0; background: transparent; overflow: hidden; transition: none; animation: none; }
.application-embedded .invoice-linked-modal-host { inset: 0; }
.invoice-linked-modal-host::backdrop { background: transparent; }
.invoice-linked-modal-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; visibility: hidden; }
.invoice-linked-modal-host.is-ready .invoice-linked-modal-frame { visibility: visible; }
html:has(body.invoice-modal-only), body.invoice-modal-only, body.invoice-modal-only :is(.drawer, .drawer-content, .app-main) { background: transparent; }
body.invoice-modal-only .app-navbar, body.invoice-modal-only .mobile-menu-trigger { display: none !important; }

.invoice-detail-toolbar {
  position: relative;
  z-index: 8;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  flex: 0 0 auto;
  align-items: center;
  gap: 1rem;
  border-bottom: 1px solid var(--color-base-300);
  background: var(--color-base-100);
  padding: 1rem 1.25rem;
}

.invoice-detail-toolbar-actions,
.invoice-detail-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.65rem;
}

.invoice-detail-toolbar-actions {
  flex-wrap: wrap;
}

/* Anchored under the print button. The popover attribute puts it in the top
   layer, so the toolbar's overflow-x scroller cannot clip it. */
.invoice-print-menu {
  margin: 0;
  margin-top: 0.5rem;
}

.modal-toolbar-close {
  flex: 0 0 auto;
  justify-self: end;
}

.invoice-document-actions,
/* Amount that carries a converted-value tooltip. Looks like plain text — the
   dotted underline is the only cue that there is more to see. */
/* Defaults for new documents. Grouped by document kind, because received
   documents and offers will get the same treatment next to issued invoices. */
.invoice-defaults-subsection {
  margin-top: 1rem;
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-box);
  padding: 1rem 1.1rem 1.15rem;
}

.invoice-defaults-subtitle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  color: color-mix(in srgb, var(--color-base-content) 78%, transparent);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2px;
  text-transform: uppercase;
}

.invoice-defaults-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.6rem 0.9rem;
}

@media (max-width: 640px) {
  .invoice-defaults-grid {
    grid-template-columns: 1fr;
  }
}

/* Currency settings: one row per currency, its toggle, placement and preview. */
.currency-settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: 0.5rem;
  margin-top: 0.9rem;
}

.currency-settings-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-field);
  padding: 0.5rem 0.65rem;
  opacity: 0.55;
}

.currency-settings-row.is-enabled {
  border-color: color-mix(in srgb, var(--color-primary) 34%, var(--color-base-300));
  background: color-mix(in srgb, var(--color-primary) 5%, transparent);
  opacity: 1;
}

.currency-settings-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  cursor: pointer;
}

.currency-settings-code {
  font-weight: 700;
}

.currency-settings-symbol {
  color: color-mix(in srgb, var(--color-base-content) 55%, transparent);
}

.currency-settings-preview {
  grid-column: 1 / -1;
  color: color-mix(in srgb, var(--color-base-content) 62%, transparent);
  font-size: 0.8rem;
}

.currency-rates-block {
  margin-top: 1.5rem;
  border-top: 1px solid var(--color-base-300);
  padding-top: 1rem;
}

/* Thirty-five year columns: the currency column stays put so a row can still be
   read after scrolling right. */
.currency-rates-scroll {
  max-height: 26rem;
  margin-top: 0.75rem;
  overflow: auto;
}

.currency-rates-table .currency-rates-sticky {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--color-base-100);
}

.currency-rates-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--color-base-200);
  white-space: nowrap;
}

.currency-rates-table thead th.currency-rates-sticky {
  z-index: 3;
  background: var(--color-base-200);
}

.currency-rates-table td {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.report-amount-tooltip {
  border: 0;
  border-bottom: 1px dotted color-mix(in srgb, var(--color-base-content) 45%, transparent);
  background: none;
  padding: 0;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  cursor: help;
}

/* Only a <button> carries browser styling that has to be normalised. Totals are
   marked up as <strong> and must keep their own weight, so the amount looks the
   same in a foreign currency as it does in the home one. */
button.report-amount-tooltip {
  font-weight: inherit;
}

/* Marks the default record in a list — used for number series, and available to
   anything else that needs the same meaning. Warning is daisyUI's amber, so it
   follows the theme instead of a hard-coded yellow. */
.default-star {
  flex: 0 0 auto;
  color: var(--color-warning);
  font-size: 0.8rem;
}

/* Series picker attached to the document number field, mirroring the contact
   pencil so the two read as the same kind of control. */
.invoice-series-button {
  flex: 0 0 auto;
  gap: 0.4rem;
  font-weight: 500;
}

.invoice-series-button.hidden {
  display: none;
}

.invoice-series-caret {
  font-size: 0.65rem;
  opacity: 0.7;
}

/* Opens below the field like a normal select. Top layer, so the modal's own
   overflow cannot clip it. */
.invoice-number-series-menu {
  position: absolute;
  position-anchor: --invoice-series-anchor;
  position-area: bottom span-left;
  position-try-fallbacks: flip-block;
  margin: 0.35rem 0;
  padding: 0.35rem;
  width: max-content;
  min-width: 18rem;
  max-width: min(26rem, calc(100vw - 2rem));
  max-height: min(22rem, 60vh);
  overflow-y: auto;
}

.invoice-number-series-menu::backdrop {
  background: transparent;
}

.invoice-number-series-option,
.invoice-number-series-new {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  border: 0;
  border-radius: var(--radius-field);
  background: none;
  padding: 0.55rem 0.65rem;
  color: var(--color-base-content);
  text-align: left;
  cursor: pointer;
}

.invoice-number-series-option {
  justify-content: space-between;
}

.invoice-number-series-option:hover,
.invoice-number-series-option:focus-visible,
.invoice-number-series-new:hover,
.invoice-number-series-new:focus-visible {
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
}

.invoice-number-series-option.is-selected {
  background: color-mix(in srgb, var(--color-primary) 16%, transparent);
}

.invoice-number-series-option-name {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  font-weight: 600;
}

.invoice-number-series-option-preview {
  flex: 0 0 auto;
  color: color-mix(in srgb, var(--color-base-content) 60%, transparent);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
}

/* Set apart from the series themselves: these act rather than select. */
.invoice-number-series-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.35rem;
  border-top: 1px solid var(--color-base-300);
  padding-top: 0.35rem;
}

.invoice-number-series-new {
  color: var(--color-primary);
  font-weight: 600;
}

.invoice-number-series-settings {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex: 0 0 auto;
  border: 0;
  border-radius: var(--radius-field);
  background: none;
  padding: 0.55rem 0.65rem;
  color: color-mix(in srgb, var(--color-base-content) 65%, transparent);
  cursor: pointer;
}

.invoice-number-series-settings:hover,
.invoice-number-series-settings:focus-visible {
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  color: var(--color-base-content);
}

/* The manager keeps the settings-page layout; the modal supplies the room around
   it. Wider than the series editor, because the cards carry a name, the format
   description and a preview number side by side. */
.document-number-settings-body {
  overflow-y: auto;
  padding: 1.25rem 1.5rem 0.5rem;
}

.document-number-settings-body .client-settings-section-heading {
  margin-bottom: 1rem;
}

@media (max-width: 640px) {
  .document-number-settings-body {
    padding: 1rem 1rem 0.5rem;
  }
}

/* Small question mark next to a field label, opening the shared hint popover. */
.field-hint-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 0.95rem;
  height: 0.95rem;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-base-content) 16%, transparent);
  padding: 0;
  color: color-mix(in srgb, var(--color-base-content) 72%, transparent);
  font-size: 0.6rem;
  line-height: 1;
  cursor: help;
}

.field-hint-icon:hover,
.field-hint-icon:focus-visible {
  background: color-mix(in srgb, var(--color-primary) 26%, transparent);
  color: var(--color-primary);
}

.fieldset-legend:has(.field-hint-icon) {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.report-amount-tooltip:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Sits in the top layer, anchored above its trigger, so neither a grid cell nor
   a modal can clip it. */
.hint-popover {
  position: absolute;
  position-anchor: --hint-anchor;
  /* Above the trigger, flipping below when it sits near the top edge. */
  position-area: top center;
  position-try-fallbacks: flip-block;
  margin: 0.4rem 0;
  border-width: 1px;
  padding: 0.35rem 0.6rem;
  /* position-area limits the box to the space around a small anchor, so the
     width has to be taken from the content instead. */
  width: max-content;
  max-width: min(22rem, calc(100vw - 2rem));
  color: var(--color-base-content);
  font-size: 0.8rem;
  /* Short hints stay on one line; a sentence wraps instead of stretching. */
  white-space: normal;
  text-wrap: pretty;
}

/* A hint of several lines (data-hint-multiline), e.g. the steps of a claim. */
.hint-popover.is-multiline {
  white-space: pre-line;
}

.hint-popover::backdrop {
  background: transparent;
}

.invoice-preview-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.invoice-preview-view-controls {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  min-width: 0;
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-field);
  background: var(--color-base-200);
  padding: 0.15rem;
}

.invoice-preview-zoom {
  min-width: 3.7rem;
  padding-inline: 0.2rem;
  color: color-mix(in srgb, var(--color-base-content) 68%, transparent);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}

/* Faktura / Pokladní doklad switch in the preview toolbar. daisyUI's .join sets
   its own display, so [hidden] has to win explicitly. */
.invoice-preview-kind-switch {
  flex: 0 0 auto;
}

.invoice-preview-kind-switch[hidden] {
  display: none;
}

.invoice-document-actions {
  min-height: 2.55rem;
  border: 1px solid color-mix(in srgb, var(--color-primary) 22%, var(--color-base-300));
  border-radius: var(--radius-field);
  background: color-mix(in srgb, var(--color-primary) 4%, var(--color-base-100));
  padding: 0.3rem;
}

.invoice-document-actions.hidden {
  display: none;
}

.invoice-template-control {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding-left: 0.35rem;
  color: color-mix(in srgb, var(--color-base-content) 62%, transparent);
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
}

.invoice-template-control .select {
  min-width: 8.2rem;
  background: var(--color-base-100);
  color: var(--color-base-content);
}

.invoice-template-status {
  max-width: 8.5rem;
  padding-right: 0.35rem;
  color: var(--color-success);
  font-size: 0.68rem;
  font-weight: 750;
  line-height: 1.15;
}

.invoice-template-status:empty {
  display: none;
}

.invoice-template-status.is-error {
  color: var(--color-error);
}

[data-invoice-save].hidden {
  display: none;
}

.invoice-detail-form {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 1.25rem;
}

.invoice-preview-modal-box {
  display: flex;
  flex-direction: column;
  width: min(96vw, 76rem);
  max-width: 76rem;
  height: min(95dvh, 70rem);
  max-height: 95dvh;
  padding: 0;
  overflow: hidden;
}

.invoice-preview-toolbar {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 1rem;
  min-height: 4.5rem;
  border-bottom: 1px solid var(--color-base-300);
  padding: 0.8rem 1rem;
}

.invoice-preview-stage {
  position: relative;
  height: auto;
  min-height: 0;
  flex: 1 1 auto;
  overflow: auto;
  overscroll-behavior: contain;
  touch-action: pan-x pan-y;
  background: color-mix(in srgb, var(--color-base-300) 55%, var(--color-base-200));
  padding: 1.5rem;
}

.invoice-preview-pages {
  display: grid;
  justify-items: center;
  gap: 1.5rem;
  width: 100%;
  margin: 0 auto;
}

.invoice-preview-modal-box .invoice-preview-pages {
  width: max-content;
  min-width: 100%;
}

.invoice-preview-modal-box .invoice-preview-page {
  width: max-content;
  max-width: none;
}

.invoice-preview-modal-box .invoice-preview-page canvas {
  max-width: none;
  transition: width 100ms ease, height 100ms ease;
}

.invoice-preview-pages.is-loading {
  opacity: 0.18;
}

.invoice-preview-page {
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  width: min(100%, 56rem);
}

.invoice-preview-page-label {
  justify-self: end;
  color: color-mix(in srgb, var(--color-base-content) 62%, transparent);
  font-size: 0.75rem;
  font-weight: 600;
}

.invoice-preview-page canvas {
  display: block;
  max-width: 100%;
  height: auto;
  background: #fff;
  box-shadow: 0 0.8rem 2.5rem rgba(15, 23, 42, 0.18);
}

.invoice-preview-loading {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.8rem;
  color: color-mix(in srgb, var(--color-base-content) 72%, transparent);
  pointer-events: none;
}

.invoice-preview-loading.hidden {
  display: none;
}

.invoice-design-modal-box {
  width: min(98vw, 110rem);
  max-width: 110rem;
  height: min(97dvh, 78rem);
  max-height: 97dvh;
  padding: 0;
  overflow: hidden;
}

.client-settings-page {
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow: hidden;
  padding-bottom: 0.25rem;
}

.client-settings-page > .admin-page-tabs-panel {
  flex: 0 0 auto;
}

.client-settings-panels {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.client-settings-tab-panel {
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.client-settings-tab-panel[hidden] { display: none !important; }
.client-settings-tab-panel > .client-settings-section {
  flex: 0 0 auto;
  grid-template-columns: minmax(0, 1fr);
}

.client-settings-section {
  padding: 1.25rem;
}

.client-settings-section {
  display: grid;
  gap: 1rem;
}

.client-settings-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.client-settings-document-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.invoice-date-format-form {
  display: grid;
  gap: 1rem;
}

.invoice-date-format-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(8rem, max-content));
  gap: 0.6rem;
  overflow-x: auto;
  padding: 0.15rem;
  scrollbar-width: thin;
}

.invoice-date-format-option {
  min-height: var(--size-field, 2.5rem);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-field);
  background: var(--color-base-100);
  padding: 0.55rem 0.8rem;
  color: var(--color-base-content);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.14s ease, background-color 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
}

.invoice-date-format-option:hover {
  border-color: color-mix(in srgb, var(--color-primary) 55%, var(--color-base-300));
}

.invoice-date-format-option:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-primary-content);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 18%, transparent);
}

.invoice-date-format-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.invoice-date-format-option:has(input:focus-visible) {
  outline: 2px solid color-mix(in srgb, var(--color-primary) 55%, transparent);
  outline-offset: 2px;
}

.invoice-date-format-status {
  min-height: 1.25rem;
  color: color-mix(in srgb, var(--color-base-content) 62%, transparent);
  font-size: 0.78rem;
}

.invoice-date-format-status.is-error {
  color: var(--color-error);
}

@media (max-width: 640px) {
  .invoice-date-format-heading {
    align-items: flex-start;
  }

  .invoice-date-format-options {
    margin-inline: -0.15rem;
  }
}

.integration-connection-list {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}

.integration-connection-card {
  display: grid;
  gap: 0.65rem;
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-box);
  padding: 0.9rem 1rem;
}

.integration-connection-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.integration-connection-meta {
  display: grid;
  gap: 0.35rem 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}

.integration-connection-meta dt {
  color: color-mix(in srgb, var(--color-base-content) 55%, transparent);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.integration-connection-meta dd {
  font-size: 0.82rem;
  font-weight: 600;
}

.integration-connection-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  border-top: 1px solid var(--color-base-300);
  padding-top: 0.65rem;
}

.integration-log summary {
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 700;
  color: color-mix(in srgb, var(--color-base-content) 70%, transparent);
}

.integration-modal-box {
  display: flex;
  flex-direction: column;
  width: min(94vw, 34rem);
  max-width: 34rem;
  max-height: 92dvh;
  padding: 0;
  overflow: hidden;
}

.integration-modal-form {
  display: grid;
  gap: 0.7rem;
  overflow-y: auto;
  padding: 1.25rem;
}

.integration-form-divider {
  border-top: 1px solid var(--color-base-300);
  padding-top: 0.85rem;
  color: color-mix(in srgb, var(--color-base-content) 60%, transparent);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.integration-check-field {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
}

.integration-field-hint {
  color: color-mix(in srgb, var(--color-base-content) 55%, transparent);
  font-size: 0.72rem;
  margin-top: 0.25rem;
}

.document-number-group + .document-number-group {
  margin-top: 0.85rem;
}

.document-number-group-title {
  color: color-mix(in srgb, var(--color-base-content) 60%, transparent);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  margin-bottom: 0.45rem;
  text-transform: uppercase;
}

.document-number-list {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

.document-number-card {
  display: grid;
  gap: 0.6rem;
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-box);
  padding: 0.85rem 1rem;
}

.document-number-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.document-number-preview {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  border-radius: var(--radius-field);
  background: var(--color-base-200);
  padding: 0.5rem 0.7rem;
}

.document-number-preview > span {
  color: color-mix(in srgb, var(--color-base-content) 55%, transparent);
  font-size: 0.68rem;
  text-transform: uppercase;
}

.document-number-preview > strong {
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}

.document-number-preview > small {
  color: color-mix(in srgb, var(--color-base-content) 55%, transparent);
  font-size: 0.7rem;
  margin-left: auto;
}

.document-number-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  border-top: 1px solid var(--color-base-300);
  padding-top: 0.6rem;
}

.document-number-modal-box {
  display: flex;
  flex-direction: column;
  width: min(94vw, 34rem);
  max-width: 34rem;
  max-height: 92dvh;
  padding: 0;
  overflow: hidden;
}

/* Wider than the series editor: the cards carry a name, the format description
   and a preview number side by side. Must come after .document-number-modal-box,
   whose max-width would otherwise win on source order. */
.document-number-settings-modal-box {
  width: min(94vw, 52rem);
  max-width: 52rem;
}

.document-number-form {
  display: grid;
  gap: 0.7rem;
  overflow-y: auto;
  padding: 1.25rem;
}

.document-number-live {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  border: 1px dashed var(--color-base-300);
  border-radius: var(--radius-field);
  background: var(--color-base-200);
  padding: 0.65rem 0.85rem;
}

.document-number-live > span {
  color: color-mix(in srgb, var(--color-base-content) 55%, transparent);
  font-size: 0.7rem;
  text-transform: uppercase;
}

.document-number-live > strong {
  font-size: 1.15rem;
  letter-spacing: 0.03em;
}

.document-number-live > strong.is-too-long {
  color: var(--color-error);
}

/* The import launcher lives inside the toolbar, which sets white-space: nowrap;
   its modals must not inherit it or their prose refuses to wrap. */
.integration-import-modal-box,
#integration_import_confirm_modal .modal-box {
  white-space: normal;
}

.integration-import-modal-box {
  display: flex;
  flex-direction: column;
  width: min(96vw, 64rem);
  max-width: 64rem;
  height: min(92dvh, 52rem);
  max-height: 92dvh;
  padding: 0;
  overflow: hidden;
}

.integration-import-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 1rem;
  min-height: 0;
  padding: 1.25rem;
}

.integration-import-controls {
  display: grid;
  align-items: end;
  gap: 0.75rem;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
}

.integration-import-result {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-box);
  overflow: hidden;
}

.integration-import-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  border-bottom: 1px solid var(--color-base-300);
  background: var(--color-base-200);
  padding: 0.6rem 0.85rem;
}

.integration-import-stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  color: color-mix(in srgb, var(--color-base-content) 65%, transparent);
  font-size: 0.75rem;
}

.integration-import-stats strong {
  color: var(--color-base-content);
}

.integration-import-stats > i {
  color: color-mix(in srgb, var(--color-base-content) 40%, transparent);
  font-size: 0.7rem;
}

/* Empty legend above the button keeps it on the same baseline as the selects. */
.integration-import-controls > .fieldset > .fieldset-legend[aria-hidden="true"] {
  visibility: hidden;
}

.integration-import-table {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.integration-import-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--color-base-200);
  font-size: 0.7rem;
  white-space: nowrap;
}

.integration-import-table td {
  font-size: 0.76rem;
}

@media (max-width: 768px) {
  .integration-import-controls {
    grid-template-columns: minmax(0, 1fr);
  }
}

.client-settings-document-button {
  flex: 0 0 auto;
  white-space: nowrap;
}

.client-settings-preview-source {
  color: color-mix(in srgb, var(--color-base-content) 58%, transparent);
  font-size: 0.78rem;
}

.invoice-design-app {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--color-base-300);
  background: var(--color-base-100);
}

.invoice-design-app-toolbar {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 1rem;
  min-height: 4.5rem;
  overflow-x: auto;
  overflow-y: hidden;
  border-bottom: 1px solid var(--color-base-300);
  padding: 0.8rem 1rem;
  scrollbar-width: thin;
}

.invoice-design-app-heading {
  flex: 0 0 clamp(15rem, 22vw, 21rem);
}

.invoice-design-app-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
  white-space: nowrap;
}

.invoice-design-document-switcher {
  display: flex;
  flex: 0 0 auto;
  gap: 0.5rem;
  white-space: nowrap;
}

.invoice-design-document-switcher .btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.invoice-design-app-workspace {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
}

.invoice-design-modal-toolbar {
  display: flex;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

.invoice-design-modal-toolbar > .min-w-0 {
  flex: 0 0 clamp(14rem, 24vw, 24rem);
}

.invoice-design-modal-toolbar .invoice-preview-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  width: auto;
  margin-left: auto;
  white-space: nowrap;
}

.invoice-design-modal-toolbar .invoice-preview-actions .btn {
  flex: 0 0 auto;
  width: auto;
}

.invoice-design-modal-toolbar .modal-toolbar-close {
  flex: 0 0 auto;
  position: sticky;
  right: 0;
  z-index: 1;
  background: var(--color-base-100);
}

.invoice-design-controls > fieldset {
  display: contents;
}

.invoice-design-controls > fieldset:disabled {
  opacity: 0.55;
}

.invoice-design-workspace {
  display: grid;
  grid-template-columns: minmax(20rem, 23rem) minmax(36rem, 1fr);
  height: calc(100% - 4.5rem);
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}

.invoice-design-controls {
  min-width: 20rem;
  height: 100%;
  overflow-y: auto;
  border-right: 1px solid var(--color-base-300);
  background: var(--color-base-100);
  padding: 1rem;
}

.invoice-design-control-section {
  display: grid;
  gap: 0.75rem;
  border-bottom: 1px solid var(--color-base-300);
  padding: 0 0 1rem;
  margin-bottom: 1rem;
}

.invoice-design-section-title {
  display: grid;
  gap: 0.15rem;
}

.invoice-design-section-title strong {
  font-size: 0.92rem;
}

.invoice-design-section-title span {
  color: color-mix(in srgb, var(--color-base-content) 58%, transparent);
  font-size: 0.72rem;
}

.invoice-template-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}

.invoice-design-assets {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.6rem;
}

.invoice-template-card {
  position: relative;
  display: grid;
  gap: 0.45rem;
  min-width: 0;
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-box);
  background: var(--color-base-100);
  padding: 0.55rem;
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.invoice-template-card:has(input:checked) {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 18%, transparent);
}

.invoice-template-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.invoice-template-card > span:last-child {
  display: grid;
  gap: 0.12rem;
}

.invoice-template-card small {
  color: color-mix(in srgb, var(--color-base-content) 55%, transparent);
  font-size: 0.62rem;
  line-height: 1.25;
}

.invoice-template-card-preview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr repeat(3, 0.32fr);
  gap: 0.17rem;
  width: 100%;
  aspect-ratio: 1.42;
  border: 1px solid color-mix(in srgb, var(--color-base-content) 14%, transparent);
  background: white;
  padding: 0.4rem;
}

.invoice-template-card-preview i {
  display: block;
  border-radius: 999px;
  background: #d7dde2;
}

.invoice-template-card-preview i:first-child {
  background: var(--color-primary);
}

.invoice-template-card-preview i:nth-child(n + 3) {
  grid-column: 1 / -1;
}

.invoice-template-card-preview.is-solaris i:first-child {
  width: 42%;
  border-radius: 0;
  transform: rotate(-8deg);
}

.invoice-design-color-row {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 0.6rem;
}

.invoice-design-color-row input[type="color"] {
  width: 3rem;
  height: 2rem;
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-field);
  background: transparent;
  padding: 0.12rem;
  cursor: pointer;
}

.invoice-design-asset {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 0.55rem;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--color-base-content) 12%, transparent);
  border-radius: var(--radius-box);
  background: var(--color-base-100);
  padding: 0.65rem;
}

.invoice-design-asset-heading,
.invoice-design-asset-heading label,
.invoice-design-asset-heading-actions {
  display: flex;
  align-items: center;
}

.invoice-design-asset-heading {
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 2rem;
  font-size: 0.78rem;
}

.invoice-design-asset-heading label {
  gap: 0.45rem;
  font-size: 0.72rem;
  font-weight: 500;
}

.invoice-design-asset-heading-actions {
  gap: 0.35rem;
}

.invoice-design-asset-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
  min-width: 0;
}

.invoice-design-asset-choice {
  position: relative;
  display: grid;
  grid-template-rows: minmax(4.25rem, auto) auto;
  gap: 0.35rem;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-field);
  background: var(--color-base-100);
  padding: 0.35rem;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}

.invoice-design-asset-choice:hover {
  border-color: color-mix(in srgb, var(--color-primary) 58%, var(--color-base-300));
  background: color-mix(in srgb, var(--color-primary) 5%, var(--color-base-100));
}

.invoice-design-asset-choice.is-selected {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-base-100));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 22%, transparent);
}

.invoice-design-asset-choice-media {
  display: grid;
  place-items: center;
  min-height: 4.25rem;
  overflow: hidden;
  border-radius: calc(var(--radius-field) * 0.7);
  background: var(--color-base-200);
  color: color-mix(in srgb, var(--color-base-content) 45%, transparent);
  font-size: 1rem;
}

.invoice-design-asset-choice-media img {
  width: auto;
  height: auto;
  max-width: calc(100% - 0.5rem);
  max-height: 4rem;
  object-fit: contain;
}

.invoice-design-asset-choice-label {
  overflow: hidden;
  font-size: 0.68rem;
  font-weight: 650;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.invoice-design-asset-choice-check {
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
  display: none;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  background: var(--color-primary);
  color: var(--color-primary-content);
  font-size: 0.65rem;
  box-shadow: 0 1px 4px color-mix(in srgb, black 24%, transparent);
}

.invoice-design-asset-choice.is-selected .invoice-design-asset-choice-check {
  display: grid;
}

.invoice-asset-library-modal-box,
.invoice-asset-editor-modal-box,
.invoice-asset-archive-modal-box {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  padding: 0;
  background: var(--color-base-100);
}

.invoice-asset-library-modal-box {
  width: min(68rem, calc(100vw - 2rem));
  height: min(44rem, calc(100dvh - 2rem));
  max-width: none;
  max-height: calc(100dvh - 2rem);
}

.invoice-asset-library-content {
  min-height: 0;
  overflow-y: auto;
  padding: 0 1rem 1rem;
}

.invoice-asset-library-tabs {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--color-base-100);
  padding-top: 0.5rem;
}

.invoice-asset-library-tabs .tab {
  gap: 0.45rem;
  outline: none;
}

.invoice-asset-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: 0.75rem;
  padding-top: 1rem;
}

.invoice-asset-library-card {
  display: grid;
  grid-template-rows: 7.5rem auto auto;
  gap: 0.55rem;
  min-width: 0;
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-box);
  background: var(--color-base-100);
  padding: 0.55rem;
}

.invoice-asset-library-card-preview {
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--radius-field);
  background:
    linear-gradient(45deg, color-mix(in srgb, var(--color-base-300) 55%, transparent) 25%, transparent 25%),
    linear-gradient(-45deg, color-mix(in srgb, var(--color-base-300) 55%, transparent) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, color-mix(in srgb, var(--color-base-300) 55%, transparent) 75%),
    linear-gradient(-45deg, transparent 75%, color-mix(in srgb, var(--color-base-300) 55%, transparent) 75%);
  background-color: var(--color-base-200);
  background-position: 0 0, 0 6px, 6px -6px, -6px 0;
  background-size: 12px 12px;
}

.invoice-asset-library-card-preview img {
  width: auto;
  height: auto;
  max-width: calc(100% - 0.75rem);
  max-height: 6.75rem;
  object-fit: contain;
}

.invoice-asset-library-card-meta {
  display: grid;
  min-width: 0;
}

.invoice-asset-library-card-meta strong,
.invoice-asset-library-card-meta span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.invoice-asset-library-card-meta strong {
  font-size: 0.78rem;
}

.invoice-asset-library-card-meta span {
  min-height: 1rem;
  color: color-mix(in srgb, var(--color-base-content) 55%, transparent);
  font-size: 0.65rem;
}

.invoice-asset-library-card-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.invoice-asset-library-card-actions .btn-primary {
  flex: 1 1 auto;
}

.invoice-asset-library-empty {
  place-items: center;
  gap: 0.45rem;
  min-height: 18rem;
  color: color-mix(in srgb, var(--color-base-content) 58%, transparent);
  text-align: center;
}

.invoice-asset-library-empty:not(.hidden) {
  display: grid;
}

.invoice-asset-library-empty > i {
  font-size: 2rem;
}

.invoice-asset-library-empty span {
  font-size: 0.78rem;
}

.invoice-asset-editor-modal-box {
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(66rem, calc(100vw - 2rem));
  height: min(48rem, calc(100dvh - 2rem));
  max-width: none;
  max-height: calc(100dvh - 2rem);
}

.invoice-asset-archive-modal-box {
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(32rem, calc(100vw - 2rem));
  max-width: none;
  padding: 0;
}

.invoice-asset-archive-content {
  padding: 1.25rem 1rem;
  font-size: 0.86rem;
  line-height: 1.5;
}

.invoice-asset-editor-content {
  display: grid;
  grid-template-rows: auto minmax(14rem, 1fr) auto;
  gap: 0.75rem;
  min-height: 0;
  overflow: hidden;
  padding: 1rem;
}

.invoice-asset-editor-content.profile-avatar-editor-content {
  grid-template-rows: minmax(14rem, 1fr) auto;
}

.invoice-asset-editor-label {
  width: min(26rem, 100%);
}

.invoice-asset-editor-canvas {
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-box);
  background: var(--color-base-200);
}

.invoice-asset-editor-canvas > img {
  display: block;
  max-width: 100%;
}

.invoice-asset-editor-tools,
.invoice-asset-editor-background,
.invoice-asset-editor-footer,
.invoice-asset-editor-footer > div {
  display: flex;
  align-items: center;
}

.invoice-asset-editor-tools {
  flex-wrap: wrap;
  gap: 0.25rem;
}

.invoice-asset-editor-background {
  gap: 0.5rem;
  margin-left: auto;
  padding-left: 0.75rem;
  font-size: 0.75rem;
}

.invoice-asset-editor-footer {
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid var(--color-base-300);
  background: var(--color-base-100);
  padding: 0.75rem 1rem;
}

.invoice-asset-editor-footer > div {
  gap: 0.5rem;
}

[data-invoice-asset-editor-status] {
  min-width: 0;
  color: var(--color-success);
  font-size: 0.72rem;
}

[data-profile-avatar-editor-status] {
  min-width: 0;
  color: var(--color-success);
  font-size: 0.72rem;
}

[data-profile-avatar-editor-status].is-error {
  color: var(--color-error);
}

[data-invoice-asset-editor-status].is-error {
  color: var(--color-error);
}

.invoice-design-toggles {
  display: grid;
  gap: 0.45rem;
}

.invoice-design-toggles > label,
.invoice-design-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.8rem;
}

.invoice-design-toggle-branch {
  display: grid;
  gap: 0.55rem;
}

.invoice-design-qr-settings {
  position: relative;
  display: grid;
  gap: 0.65rem;
  margin-left: 0.45rem;
  border-left: 2px solid color-mix(in srgb, var(--color-primary) 48%, var(--color-base-300));
  border-radius: 0 var(--radius-field) var(--radius-field) 0;
  background: color-mix(in srgb, var(--color-base-200) 72%, transparent);
  padding: 0.65rem 0.65rem 0.65rem 0.85rem;
}

.invoice-design-qr-settings::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 0.75rem;
  border-top: 2px solid color-mix(in srgb, var(--color-primary) 48%, var(--color-base-300));
  content: "";
}

.invoice-design-qr-settings.hidden {
  display: none;
}

.invoice-design-qr-settings > .fieldset {
  min-width: 0;
  margin: 0;
}

.invoice-design-qr-background {
  display: flex;
  width: 100%;
}

.invoice-design-qr-background .btn {
  flex: 1 1 0;
  gap: 0.35rem;
  border-color: var(--color-base-300);
  background: transparent;
  color: var(--color-base-content);
  font-size: 0.7rem;
  font-weight: 600;
}

.invoice-design-qr-background .btn:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-primary-content);
}

.invoice-design-qr-color-row {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.55rem;
}

.invoice-design-qr-color-row[hidden] {
  display: none;
}

.invoice-design-qr-color-row input[type="color"] {
  width: 2.5rem;
  height: 2rem;
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-field);
  background: var(--color-base-100);
  padding: 0.15rem;
  cursor: pointer;
}

.invoice-design-qr-color-row .input {
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  text-transform: uppercase;
}

.invoice-design-control-footer {
  display: grid;
  gap: 0.5rem;
  padding-bottom: 0.5rem;
}

[data-invoice-design-status] {
  min-height: 1.1rem;
  color: var(--color-success);
  font-size: 0.72rem;
  font-weight: 700;
}

[data-invoice-design-status].is-error {
  color: var(--color-error);
}

.invoice-design-preview-stage {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-width: 36rem;
  height: 100%;
  overflow: auto;
  background: color-mix(in srgb, var(--color-base-300) 56%, var(--color-base-200));
  padding: 1.5rem;
}

.invoice-design-preview-stage .invoice-preview-pages {
  flex: 0 0 auto;
}

.invoice-design-unavailable {
  align-self: center;
  display: grid;
  justify-items: center;
  gap: 0.65rem;
  width: min(100%, 34rem);
  margin: auto;
  color: color-mix(in srgb, var(--color-base-content) 64%, transparent);
  text-align: center;
}

.invoice-design-unavailable.hidden {
  display: none;
}

.invoice-design-unavailable > i {
  color: var(--color-secondary);
  font-size: 2rem;
}

.invoice-design-unavailable > strong {
  color: var(--color-base-content);
}

.invoice-design-preview-stage iframe {
  display: block;
  flex: 0 0 auto;
  width: 794px;
  height: 1123px;
  border: 0;
  background: #fff;
  box-shadow: 0 0.8rem 2.5rem rgba(15, 23, 42, 0.18);
  transition: opacity 100ms ease;
}

.invoice-design-preview-stage iframe.is-loading {
  opacity: 0.3;
}

.invoice-design-preview-loading {
  position: sticky;
  z-index: 2;
  left: 50%;
  top: 45%;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.65rem;
  width: 0;
  height: 0;
  color: color-mix(in srgb, var(--color-base-content) 72%, transparent);
  pointer-events: none;
}

.invoice-design-preview-loading.hidden {
  display: none;
}

.invoice-detail-form > fieldset {
  display: grid;
  min-width: 0;
  gap: 1rem;
  border: 0;
  padding: 0;
}

.invoice-detail-form > [data-recurring-history-section] { margin-top: 1rem; }
[data-recurring-history-section] > .invoice-detail-section-heading { flex-direction: row; align-items: center; }
[data-recurring-history-section] > .invoice-detail-section-heading > label { flex-shrink: 0; }
.recurring-history-footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .5rem; margin-top: .75rem; }
.recurring-history-footer > :last-child { justify-self: end; white-space: nowrap; }
.recurring-history-footer nav { min-width: 0; overflow-x: auto; }
.recurring-email-attachments { flex: 0 0 auto; }
.recurring-email-attachments[hidden] { display: none; }
.recurring-email-attachment { position: relative; display: flex; align-items: center; gap: .75rem; padding: .7rem 1rem; border: 1px solid var(--color-base-300); border-radius: var(--radius-box); background: var(--color-base-100); text-align: left; max-width: 100%; }
.recurring-email-attachment > .fa-file-pdf { font-size: 1.5rem; color: var(--color-error); }
.recurring-email-attachment-preview { display: flex; align-items: center; gap: .4rem; font-size: .75rem; color: var(--color-primary); opacity: 0; }
.recurring-email-attachment:is(:hover,:focus-visible) { border-color: var(--color-primary); }
.recurring-email-attachment:is(:hover,:focus-visible) .recurring-email-attachment-preview { opacity: 1; }
@media (hover: none) { .recurring-email-attachment-preview { opacity: 1; } }

.invoice-detail-form > fieldset:disabled {
  opacity: 1;
}

.invoice-detail-form > fieldset:disabled :is(.input, .select, .textarea) {
  border-color: color-mix(in srgb, var(--color-base-300) 78%, transparent);
  background: var(--color-base-200);
  color: var(--color-base-content);
  opacity: 1;
}

.invoice-detail-section,
.invoice-graphic-settings {
  min-width: 0;
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-box);
  background: var(--color-base-100);
  padding: 1rem;
}

.invoice-detail-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--color-base-300) 72%, transparent);
  margin: -0.2rem -0.2rem 1rem;
  padding: 0.2rem 0.2rem 0.85rem;
}

.invoice-detail-section-heading > div,
.invoice-detail-section-heading.compact > div {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.invoice-detail-section-heading h4 {
  font-size: 1rem;
  font-weight: 850;
}

.invoice-detail-section-heading p {
  margin-top: 0.12rem;
  color: color-mix(in srgb, var(--color-base-content) 58%, transparent);
  font-size: 0.78rem;
}

.invoice-discounts-toolbar {
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem;
  margin-left: auto;
}

.invoice-item-columns-dropdown {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  align-self: center;
}

.invoice-item-columns-dropdown > .btn {
  align-self: center;
  white-space: nowrap;
}

.invoice-item-columns-chevron {
  font-size: 0.7em;
  transition: transform 0.16s ease;
}

.invoice-item-columns-dropdown.is-open .invoice-item-columns-chevron {
  transform: rotate(180deg);
}

.invoice-item-columns-menu {
  width: 15.5rem;
  position: absolute;
  top: calc(100% + 0.45rem);
  right: 0;
  z-index: 70;
  display: grid;
  gap: 0.15rem;
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-box);
  background: var(--color-base-100);
  box-shadow: 0 0.75rem 2rem color-mix(in srgb, var(--color-base-content) 14%, transparent);
  padding: 0.45rem;
}

.invoice-item-columns-menu[hidden] {
  display: none;
}

.invoice-item-column-option {
  min-height: 2.35rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  border-radius: var(--radius-field);
  padding: 0.4rem 0.55rem;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.invoice-item-column-option:hover {
  background: var(--color-base-200);
}

.invoice-item-column-option[hidden] {
  display: none;
}

.invoice-discounts-switch {
  min-height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  color: var(--color-base-content);
  font-size: 0.78rem;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
}

.invoice-discounts-switch .toggle {
  flex: 0 0 auto;
}

.invoice-section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.65rem;
}

.invoice-main-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8rem;
  align-items: end;
}

.invoice-issue-date-group {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  gap: 0.45rem;
}

.invoice-issue-date-group.is-with-vat {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.invoice-issue-date-group > .fieldset,
.invoice-issue-date-group .input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.invoice-counterparty-field {
  grid-column: span 2;
}

.invoice-detail-section-heading > .invoice-total-highlight {
  width: max-content;
  min-width: max-content;
  min-height: 2.25rem;
  flex: 0 0 auto;
  display: grid;
  justify-items: end;
  margin-left: auto;
  padding: 0.25rem 0.7rem;
  text-align: right;
  white-space: nowrap;
}

.invoice-total-highlight {
  display: grid;
  align-content: center;
  min-height: 3rem;
  border: 1px solid color-mix(in srgb, var(--color-primary) 28%, var(--color-base-300));
  border-radius: var(--radius-field);
  background: color-mix(in srgb, var(--color-primary) 7%, var(--color-base-100));
  padding: 0.55rem 0.8rem;
}

.invoice-total-highlight span {
  color: color-mix(in srgb, var(--color-base-content) 56%, transparent);
  font-size: 0.72rem;
  font-weight: 750;
}

.invoice-total-highlight strong {
  color: var(--color-primary);
  font-size: 1.08rem;
  font-variant-numeric: tabular-nums;
}

.invoice-detail-split {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(19rem, 0.65fr);
  gap: 1rem;
}

[data-invoice-recurring="true"] .invoice-detail-split {
  grid-template-columns: minmax(0, 1fr);
}

.invoice-settings-grid,
.invoice-payment-grid,
.invoice-graphic-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.invoice-payment-section-heading .btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.invoice-payment-section-heading .btn.hidden {
  display: none;
}

.invoice-payment-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  margin-bottom: 0.8rem;
}

.invoice-payment-summary > div {
  display: grid;
  gap: 0.15rem;
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-field);
  background: var(--color-base-200);
  padding: 0.55rem 0.7rem;
}

.invoice-payment-summary span,
.invoice-payment-outstanding span {
  color: color-mix(in srgb, var(--color-base-content) 58%, transparent);
  font-size: 0.7rem;
  font-weight: 700;
}

.invoice-payment-summary strong,
.invoice-payment-outstanding strong {
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
}

.invoice-payment-summary > div:last-child,
.invoice-payment-outstanding {
  text-align: right;
}

.invoice-payment-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-field);
}

.invoice-payment-table {
  min-width: 25rem;
  font-size: 0.76rem;
}

.invoice-payment-table th {
  color: color-mix(in srgb, var(--color-base-content) 60%, transparent);
  font-size: 0.67rem;
  text-transform: uppercase;
  white-space: nowrap;
}

.invoice-payment-table th,
.invoice-payment-table td {
  padding: 0.48rem 0.58rem;
}

.invoice-payment-table :is(th, td):nth-child(2) {
  text-align: center;
}

.invoice-payment-table td:nth-child(3) {
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.invoice-payment-action-column {
  width: 2.5rem;
  min-width: 2.5rem;
  padding-inline: 0.25rem !important;
  text-align: center;
}

.invoice-payment-action-column[hidden] {
  display: none;
}

.invoice-payment-source {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  color: color-mix(in srgb, var(--color-base-content) 70%, transparent);
  white-space: nowrap;
}

.invoice-payment-empty {
  padding: 0.8rem 0.25rem 0;
  color: color-mix(in srgb, var(--color-base-content) 55%, transparent);
  font-size: 0.78rem;
}

.invoice-payment-empty[hidden],
.invoice-payment-table-wrap[hidden] {
  display: none;
}

.invoice-payment-modal-box {
  display: flex;
  flex-direction: column;
  width: min(94vw, 42rem);
  max-width: 42rem;
  max-height: min(92dvh, 42rem);
  padding: 0;
  overflow: hidden;
}

.invoice-payment-form {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 1.25rem;
}

.invoice-payment-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: 0.8rem;
}

.invoice-payment-full-control {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.5rem;
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-field);
  background: var(--color-base-200);
  padding: 0.65rem 0.8rem;
  cursor: pointer;
}

.invoice-payment-full-control > span {
  display: grid;
  gap: 0.1rem;
}

.invoice-payment-full-control small {
  color: color-mix(in srgb, var(--color-base-content) 58%, transparent);
  font-size: 0.72rem;
}

.invoice-payment-outstanding {
  display: grid;
  align-content: center;
  gap: 0.12rem;
  min-height: var(--size-selector, 3rem);
  border: 1px solid color-mix(in srgb, var(--color-primary) 28%, var(--color-base-300));
  border-radius: var(--radius-field);
  background: color-mix(in srgb, var(--color-primary) 7%, var(--color-base-100));
  padding: 0.55rem 0.75rem;
}

.invoice-payment-footer {
  justify-content: flex-end;
}

.invoice-payment-remove-modal-box {
  display: flex;
  flex-direction: column;
  width: min(94vw, 38rem);
  max-width: 38rem;
  max-height: min(92dvh, 34rem);
  padding: 0;
  overflow: hidden;
}

.invoice-payment-remove-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 1.25rem;
}

.invoice-payment-remove-content > p:first-child {
  color: color-mix(in srgb, var(--color-base-content) 75%, transparent);
  line-height: 1.55;
}

.invoice-payment-remove-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  margin-top: 1rem;
}

.invoice-payment-remove-summary > div {
  display: grid;
  gap: 0.2rem;
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-field);
  background: var(--color-base-200);
  padding: 0.65rem 0.7rem;
}

.invoice-payment-remove-summary dt {
  color: color-mix(in srgb, var(--color-base-content) 55%, transparent);
  font-size: 0.7rem;
  font-weight: 700;
}

.invoice-payment-remove-summary dd {
  font-size: 0.82rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.invoice-payment-remove-note {
  margin-top: 0.85rem;
  color: color-mix(in srgb, var(--color-base-content) 58%, transparent);
  font-size: 0.75rem;
  line-height: 1.45;
}

.invoice-items-section {
  padding-bottom: 0.75rem;
}

.invoice-items-scroll {
  max-width: 100%;
  overflow-x: auto;
}

.invoice-items-table {
  min-width: 82rem;
  font-size: 0.78rem;
}

.invoice-items-table.is-without-vat {
  min-width: 74rem;
}

.invoice-items-table th {
  padding: 0.55rem 0.4rem;
  color: color-mix(in srgb, var(--color-base-content) 62%, transparent);
  font-size: 0.68rem;
  text-transform: uppercase;
  white-space: nowrap;
}

.invoice-items-table [data-invoice-item-column][hidden] {
  display: none;
}

.invoice-items-table td {
  padding: 0.4rem;
  vertical-align: middle;
}

.invoice-items-table .select,
.invoice-items-table .input {
  min-width: 6.5rem;
}

.invoice-items-table .invoice-item-name {
  min-width: 22rem;
}

.invoice-items-table .invoice-item-vat {
  min-width: 5.2rem;
  width: 5.2rem;
}

.invoice-item-number-heading {
  text-align: right;
}

.invoice-item-money-heading,
.invoice-item-total-heading {
  text-align: right;
}

.invoice-item-money-heading[data-invoice-item-column="unit_price_net"],
.invoice-item-money-heading[data-invoice-item-column="unit_price_gross"],
.invoice-item-money-cell {
  min-width: 7.8rem;
  width: 7.8rem;
  max-width: 7.8rem;
}

.invoice-item-money-heading[data-invoice-item-column="unit_price_net"],
.invoice-item-money-heading[data-invoice-item-column="unit_price_gross"] {
  line-height: 1.15;
  white-space: normal;
}

.invoice-item-vat-heading,
.invoice-item-discount-heading {
  text-align: center;
}

.invoice-item-number-cell,
.invoice-item-unit-cell {
  min-width: 4.5rem;
  width: 4.5rem;
}

.invoice-items-table .invoice-item-number,
.invoice-items-table .invoice-item-unit {
  min-width: 4.5rem;
  width: 4.5rem;
}

.invoice-items-table .invoice-item-number {
  text-align: right;
}

.invoice-items-table .invoice-item-unit {
  text-align: left;
}

.invoice-item-calculated {
  min-width: 7rem;
  width: 7rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.invoice-item-quantity-unit-cell {
  min-width: 6.4rem;
  width: 6.4rem;
}

.invoice-item-quantity-unit {
  width: 6.4rem;
  display: grid;
  grid-template-columns: minmax(3.2rem, 1fr) minmax(3.2rem, 1fr);
}

.invoice-items-table .invoice-item-quantity-unit .invoice-item-number,
.invoice-items-table .invoice-item-quantity-unit .invoice-item-unit {
  min-width: 0;
  width: 100%;
}

.invoice-items-table .invoice-item-quantity-unit .invoice-item-number {
  padding-right: 0.4rem;
  padding-left: 0.35rem;
  text-align: right;
}

.invoice-items-table .invoice-item-quantity-unit .invoice-item-unit {
  border-left-color: color-mix(in srgb, var(--color-base-content) 28%, var(--color-base-300));
  padding-right: 0.35rem;
  padding-left: 0.4rem;
  text-align: left;
}
.invoice-items-table .invoice-item-money,
.invoice-item-discount-cell {
  min-width: 7rem;
  width: 7rem;
}

.invoice-items-table .invoice-item-money {
  max-width: 7rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.invoice-item-discount-trigger {
  width: 100%;
  min-width: 4.5rem;
  display: inline-flex;
  appearance: none;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  border-color: var(--color-base-300);
  background: var(--color-base-100);
  color: var(--color-base-content);
  box-shadow: none;
  cursor: pointer;
  font: inherit;
  font-weight: 500;
  white-space: nowrap;
}

.invoice-item-discount-trigger:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--color-primary) 54%, var(--color-base-300));
}

.invoice-item-discount-trigger:focus-visible {
  border-color: var(--color-primary);
  outline: 2px solid color-mix(in srgb, var(--color-primary) 24%, transparent);
  outline-offset: 1px;
}

.invoice-item-discount-trigger:disabled {
  cursor: not-allowed;
}

.invoice-item-discount-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.invoice-item-discount-trigger.has-discount {
  border-color: var(--color-warning);
  background: color-mix(in srgb, var(--color-warning) 16%, var(--color-base-100));
  color: color-mix(in srgb, var(--color-warning) 82%, var(--color-base-content));
}

.invoice-item-discount-row > td {
  border-top: 0;
}

.invoice-item-discount-spacer {
  padding: 0;
}

.invoice-item-discount-bubble-cell {
  padding: 0.45rem 0.4rem 0.75rem 0;
}

.invoice-item-discount-editor {
  --invoice-discount-pointer-x: 50%;
  position: relative;
  border: 1px solid var(--color-base-300);
  border-radius: 0.85rem;
  background: color-mix(in srgb, var(--color-base-200) 72%, var(--color-base-100));
  box-shadow: 0 0.45rem 1.2rem color-mix(in srgb, var(--color-base-content) 8%, transparent);
  margin-left: -0.4rem;
  padding: 0.65rem 0.7rem 0.7rem calc(0.4rem - 1px);
}

.invoice-document-discount-editor {
  border: 1px solid var(--color-base-300);
  border-radius: 0.85rem;
  background: color-mix(in srgb, var(--color-base-200) 72%, var(--color-base-100));
  box-shadow: 0 0.45rem 1.2rem color-mix(in srgb, var(--color-base-content) 8%, transparent);
  margin: -0.8rem 0 0.85rem auto;
  padding: 0.65rem 0.7rem 0.7rem;
  width: min(100%, 28rem);
}

.invoice-item-discount-editor::before {
  content: "";
  position: absolute;
  top: -0.42rem;
  left: var(--invoice-discount-pointer-x);
  width: 0.78rem;
  height: 0.78rem;
  border-top: 1px solid var(--color-base-300);
  border-left: 1px solid var(--color-base-300);
  background: color-mix(in srgb, var(--color-base-200) 72%, var(--color-base-100));
  transform: translateX(-50%) rotate(45deg);
}

.invoice-item-discount-header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.45rem;
}

.invoice-item-discount-title {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.invoice-item-discount-icon {
  width: 1.75rem;
  height: 1.75rem;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-warning) 18%, var(--color-base-100));
  color: color-mix(in srgb, var(--color-warning) 84%, var(--color-base-content));
}

.invoice-item-discount-title strong,
.invoice-item-discount-title small {
  display: block;
  white-space: nowrap;
}

.invoice-item-discount-title strong {
  font-size: 0.78rem;
}

.invoice-item-discount-title small {
  color: color-mix(in srgb, var(--color-base-content) 56%, transparent);
  font-size: 0.68rem;
}

.invoice-item-discount-fields {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 0.55rem;
}

.invoice-item-discount-field {
  flex: 0 0 7rem;
  width: 7rem;
}

.invoice-item-discount-field .fieldset-legend {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  text-align: right;
}

.invoice-item-discount-field .input {
  width: 7rem;
  min-width: 7rem;
}

.invoice-item-discount-or {
  min-height: 2rem;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  align-self: flex-end;
  margin-bottom: 0.25rem;
  color: color-mix(in srgb, var(--color-base-content) 52%, transparent);
  font-size: 0.7rem;
  font-weight: 650;
  text-transform: none;
}

.invoice-item-discount-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
}

@media (max-width: 640px) {
  .invoice-item-discount-header {
    align-items: flex-start;
  }

  .invoice-item-discount-actions .btn span {
    display: none;
  }
}

.invoice-item-total {
  min-width: 8rem;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.invoice-item-total-input {
  width: 100%;
  min-width: 7.8rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.invoice-item-total-input[hidden] { display: none; }

.invoice-items-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  border-top: 1px solid var(--color-base-300);
  margin-top: 0.65rem;
  padding-top: 0.65rem;
}

.invoice-items-add-button {
  margin-left: 0.4rem;
}

.invoice-items-total-summary {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.7rem;
  margin-left: auto;
}

.invoice-items-total-summary span {
  color: color-mix(in srgb, var(--color-base-content) 58%, transparent);
  font-size: 0.78rem;
  font-weight: 800;
}

.invoice-items-total-summary strong {
  color: var(--color-primary);
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
}

.invoice-additional-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8rem;
}

.invoice-timestamp-value {
  display: flex;
  align-items: center;
  min-height: 3rem;
  padding-inline: 0.1rem;
  color: var(--color-base-content);
  font-variant-numeric: tabular-nums;
}

.invoice-graphic-settings {
  padding: 0;
}

.invoice-graphic-settings summary {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
  font-weight: 850;
  cursor: pointer;
}

.invoice-graphic-grid {
  border-top: 1px solid var(--color-base-300);
  padding: 1rem;
}

.invoice-detail-footer {
  position: relative;
  flex: 0 0 auto;
  z-index: 7;
  border-top: 1px solid var(--color-base-300);
  margin: 0;
  background: var(--color-base-100);
  padding: 1rem 1.25rem;
  flex-wrap: wrap;
  justify-content: space-between;
}

.invoice-detail-footer-left,
.invoice-detail-footer-actions {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.invoice-detail-footer-left {
  margin-right: auto;
}

.invoice-detail-footer-actions {
  margin-left: auto;
}

.report-table-footer {
  display: grid;
  grid-template-columns: minmax(10rem, 1fr) auto minmax(10rem, 1fr);
  align-items: center;
  gap: 1rem;
  border-top: 1px solid var(--color-base-300);
  margin-top: 0.8rem;
  padding-top: 0.8rem;
}

.report-page-size-form {
  justify-self: start;
}

.report-page-size-control {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: color-mix(in srgb, var(--color-base-content) 62%, transparent);
  font-size: 0.8rem;
  font-weight: 800;
}

.report-pagination {
  justify-self: center;
}

.report-pagination .btn {
  min-width: 2.25rem;
}

.report-pagination-ellipsis {
  pointer-events: none;
}

.report-page-status {
  justify-self: end;
  color: color-mix(in srgb, var(--color-base-content) 58%, transparent);
  font-size: 0.8rem;
  font-weight: 800;
}

.report-page-range {
  font-weight: 500;
}

.report-empty {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: color-mix(in srgb, var(--color-base-content) 58%, transparent);
  font-weight: 700;
}

.report-section-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.report-total-pills {
  display: flex;
  justify-content: flex-end;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.report-view-container {
  position: relative;
  min-width: 0;
}

.report-grid-view-container {
  min-height: 0;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  overflow: hidden;
}

.report-grid-view-container > .report-view-pane[data-report-view-pane="grid"] {
  min-height: 0;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  overflow: hidden;
}

/* Souhrn a Graf na stránkách se zamčeným posunem (report-grid-view-container) se posouvají uvnitř
   pohledu; souhrn s vlastní tabulkou (Kontrola provizí) se chová jako grid – posouvá se jeho tabulka. */
.report-grid-view-container > .report-view-pane:not([data-report-view-pane="grid"]) {
  min-height: 0;
  flex: 1 1 auto;
  overflow: auto;
}

.report-grid-view-container > .report-view-pane[data-report-view-pane="summary"]:has(> .report-grid-panel) {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.report-view-pane[hidden],
.report-view-loading[hidden],
.report-view-error[hidden] {
  display: none;
}

.report-view-loading {
  position: absolute;
  inset: 0;
  z-index: 20;
  min-height: 10rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.7rem;
  border-radius: var(--radius-box);
  background: var(--color-base-100);
  color: color-mix(in srgb, var(--color-base-content) 70%, transparent);
  font-size: 0.85rem;
  font-weight: 750;
}

.report-view-error {
  margin-top: 1rem;
}

.report-chart-panel {
  min-height: 28rem;
}

.report-chart-heading-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.report-chart-type-switch {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.report-chart-type-switch .btn {
  min-height: 2rem;
  height: 2rem;
  gap: 0.35rem;
  font-size: 0.78rem;
  line-height: 1;
}

.report-chart-canvas-wrap {
  position: relative;
  width: 100%;
  height: min(58vh, 28rem);
  min-height: 22rem;
}

.report-chart-canvas-wrap canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.report-chart-canvas-wrap canvas[hidden],
.report-chart-error[hidden] {
  display: none;
}

.report-chart-error {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(34rem, calc(100% - 2rem));
  transform: translate(-50%, -50%);
}

.report-settings-modal {
  display: flex;
  flex-direction: column;
  width: min(92rem, calc(100vw - 2rem));
  max-width: none;
  height: min(52rem, calc(100dvh - 2rem));
  max-height: calc(100dvh - 2rem);
  padding: 0;
  overflow: hidden;
}

.report-settings-modal-toolbar {
  grid-template-columns: minmax(0, 1fr) auto;
}

.report-settings-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1rem 1.25rem;
}

.report-settings-views-body {
  display: grid;
  align-content: start;
  gap: 1rem;
}

.report-settings-modal-footer .invoice-detail-footer-actions {
  margin-left: auto;
}

.report-groups-modal {
  width: min(92rem, calc(100vw - 2rem));
  height: min(52rem, calc(100dvh - 2rem));
}

.report-settings-form {
  display: grid;
  gap: 1rem;
  margin-top: 0;
}

.report-groups-form {
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 0;
}

.report-settings-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 0;
}

.report-groups-layout {
  min-height: 0;
  margin-top: 0;
}

.report-settings-section {
  min-width: 0;
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-box);
  background: var(--color-base-100);
  padding: 0.9rem;
}

.report-settings-section-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.8rem;
}

.report-settings-section-heading h4 {
  font-size: 1rem;
  font-weight: 900;
}

.report-settings-section-heading p {
  margin-top: 0.15rem;
  color: color-mix(in srgb, var(--color-base-content) 58%, transparent);
  font-size: 0.78rem;
  line-height: 1.35;
}

.report-groups-column {
  display: flex;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
}

.report-field-select-list {
  display: grid;
  min-height: 0;
  align-content: start;
  gap: 0.4rem;
  overflow-y: auto;
  padding-right: 0.25rem;
}

.report-field-select-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(9rem, 0.72fr);
  align-items: center;
  gap: 0.75rem;
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-field);
  background: var(--color-base-100);
  padding: 0.35rem 0.45rem 0.35rem 0.65rem;
  font-size: 0.82rem;
  font-weight: 700;
}

.report-field-select-row > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.report-field-select-row .select {
  width: 100%;
}

.report-groups-chart-options {
  grid-template-columns: minmax(0, 1fr) 8rem;
  align-items: center;
}

.report-groups-modal .modal-action {
  margin-top: 1rem;
}

.report-column-dual-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.report-column-panel {
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(18rem, 32vh);
  gap: 0.55rem;
}

/* Sloupce (vlastník 25. 10. 2026): oba seznamy na celou výšku okna jako Seskupit data – formulář vyplní
   tělo okna a seznamy se posouvají samy (dřív končily na 32vh v půlce okna). */
.report-settings-modal-body:has(> .report-settings-form .report-column-dual-list) {
  display: flex;
  flex-direction: column;
}

.report-settings-modal-body > .report-settings-form:has(.report-column-dual-list) {
  flex: 1 1 auto;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr);
}

.report-settings-form .report-settings-section:has(> .report-column-dual-list) {
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.report-settings-section > .report-column-dual-list {
  flex: 1 1 auto;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr);
}

.report-settings-section > .report-column-dual-list > .report-column-panel {
  min-height: 0;
  grid-template-rows: auto minmax(16rem, 1fr);
}

.report-settings-section > .report-column-dual-list .report-column-list {
  min-height: 0;
}

/* Pod sebou (do 900 px) se oba seznamy dělí o výšku okna rovným dílem. */
@media (max-width: 900px) {
  .report-settings-section > .report-column-dual-list {
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  .report-settings-section > .report-column-dual-list > .report-column-panel {
    grid-template-rows: auto minmax(10rem, 1fr);
  }
}

.report-column-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  font-size: 0.82rem;
  font-weight: 900;
}

.report-column-list {
  min-height: 16rem;
  overflow-y: auto;
  display: grid;
  align-content: start;
  gap: 0.45rem;
  border: 1px dashed var(--color-base-300);
  border-radius: var(--radius-box);
  background: var(--color-base-200);
  padding: 0.55rem;
}

.report-column-list.is-drag-over {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-base-100));
}

.report-column-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.55rem;
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-field);
  background: var(--color-base-100);
  padding: 0.45rem 0.5rem;
}

.report-column-item.is-dragging {
  opacity: 0.45;
}

.report-column-grip {
  color: color-mix(in srgb, var(--color-base-content) 45%, transparent);
  cursor: grab;
}

.report-column-label {
  min-width: 0;
  display: grid;
  line-height: 1.15;
}

.report-column-label strong,
.report-column-label small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.report-column-label strong {
  font-size: 0.82rem;
}

.report-column-label small {
  color: color-mix(in srgb, var(--color-base-content) 48%, transparent);
  font-size: 0.68rem;
}

.report-filter-save {
  display: grid;
  gap: 0.75rem;
}

.report-filter-cards {
  display: grid;
  gap: 0.55rem;
  max-height: 22rem;
  overflow-y: auto;
  padding-right: 0.2rem;
}

.report-filter-card {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.7rem;
  align-items: start;
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-field);
  background: var(--color-base-100);
  padding: 0.65rem;
}

.report-filter-card-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.report-view-edit-panel {
  grid-column: 1 / -1;
  border-top: 1px solid var(--color-base-300);
  padding-top: 0.65rem;
}

.report-view-edit-panel summary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: color-mix(in srgb, var(--color-base-content) 62%, transparent);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 850;
  list-style: none;
}

.report-view-edit-panel summary::-webkit-details-marker {
  display: none;
}

.report-view-edit-form {
  display: grid;
  gap: 0.65rem;
  margin-top: 0.65rem;
}

.report-access-pills {
  min-height: 2.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.report-access-pills.is-empty::before {
  content: attr(data-empty-text);
  color: color-mix(in srgb, var(--color-base-content) 48%, transparent);
  font-size: 0.8rem;
  font-weight: 700;
}

.report-access-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  max-width: 100%;
  border: 1px solid color-mix(in srgb, #0f766e 34%, var(--color-base-300));
  border-radius: 999px;
  background: color-mix(in srgb, #0f766e 10%, var(--color-base-100));
  color: color-mix(in srgb, #0f766e 78%, var(--color-base-content));
  padding: 0.32rem 0.45rem 0.32rem 0.55rem;
  font-size: 0.76rem;
  font-weight: 850;
  line-height: 1.15;
}

.report-access-pill > span:not(.report-access-popover) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.report-access-popover {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.5rem);
  z-index: 80;
  width: max-content;
  max-width: min(22rem, calc(100vw - 2rem));
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-field);
  background: var(--color-base-100);
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.14);
  color: color-mix(in srgb, var(--color-base-content) 72%, transparent);
  font-size: 0.72rem;
  font-weight: 750;
  line-height: 1.25;
  opacity: 0;
  padding: 0.55rem 0.65rem;
  pointer-events: none;
  transform: translate(-50%, 0.2rem);
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s ease;
  visibility: hidden;
  white-space: normal;
}

.report-access-popover::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.35rem;
  width: 0.65rem;
  height: 0.65rem;
  border-right: 1px solid var(--color-base-300);
  border-bottom: 1px solid var(--color-base-300);
  background: var(--color-base-100);
  transform: translateX(-50%) rotate(45deg);
}

.report-access-pill:hover .report-access-popover,
.report-access-pill:focus-within .report-access-popover {
  opacity: 1;
  transform: translate(-50%, 0);
  visibility: visible;
}

.report-export-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.mini-meter {
  height: 0.45rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--color-base-300);
}

.mini-meter > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #2563eb, #16a34a);
}

.invoice-contact-toolbar {
  grid-template-columns: 15rem auto auto auto;
}

[data-invoice-contacts-root] {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  overflow: hidden;
}

.invoice-contact-search-form {
  width: 15rem;
}

.invoice-contact-filters {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.report-data-panel.invoice-contact-panel {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.live-search-highlight {
  border-radius: 0.15rem;
  background: color-mix(in srgb, var(--color-error) 24%, transparent);
  padding-inline: 0.08em;
  color: var(--color-error);
  font-weight: 700;
}

.live-search-empty td {
  padding: 1.25rem;
  color: color-mix(in srgb, var(--color-base-content) 58%, transparent);
  text-align: center;
}

.invoice-contact-panel > .report-empty {
  min-height: 0;
  flex: 1 1 auto;
}

.invoice-contact-panel > .report-table-scroll {
  min-height: 0;
  flex: 0 1 auto;
  overflow: auto;
  overscroll-behavior: contain;
}

.invoice-contact-table {
  min-width: 94rem;
  border-collapse: separate;
  border-spacing: 0;
}

.invoice-contact-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  border-bottom: 1px solid var(--color-base-300);
  background: var(--color-base-200);
  padding: 0.85rem 0.9rem;
  color: color-mix(in srgb, var(--color-base-content) 76%, transparent);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.invoice-contact-table td {
  padding: 0.85rem 0.9rem;
  vertical-align: middle;
}

.invoice-contact-panel > .report-table-footer {
  flex: 0 0 auto;
  z-index: 3;
  margin-top: 0;
  background: var(--color-base-100);
  padding: 0.8rem 1rem;
}

.invoice-contact-panel :is(.report-page-size-control, .report-page-status) {
  font-weight: 400;
}

.report-grid-panel {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  overflow: hidden;
}

.report-data-panel.report-grid-panel {
  padding: 0;
}

.report-grid-panel > .report-empty {
  min-height: 0;
  flex: 1 1 auto;
}

.report-grid-panel > .report-table-scroll {
  min-height: 0;
  flex: 1 1 auto;
  max-height: none;
  overflow: auto;
  overscroll-behavior: contain;
}

.report-grid-table {
  border-collapse: separate;
  border-spacing: 0;
}

.report-grid-panel > .report-table-scroll > .report-grid-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  border-bottom: 1px solid var(--color-base-300);
  background: var(--color-base-200);
  padding: 0.85rem 0.9rem;
  color: color-mix(in srgb, var(--color-base-content) 76%, transparent);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  vertical-align: middle;
}

.report-grid-panel > .report-table-scroll > .report-grid-table td {
  padding: 0.85rem 0.9rem;
  vertical-align: middle;
}

.report-grid-panel > .report-table-footer {
  flex: 0 0 auto;
  z-index: 3;
  margin-top: 0;
  background: var(--color-base-100);
  padding: 0.8rem 1rem;
}

.report-grid-panel :is(.report-page-size-control, .report-page-status) {
  font-weight: 400;
}

.insurance-premium-breakdown-date {
  width: 12.25rem;
  flex: 0 0 12.25rem;
}

.insurance-premium-breakdown-date-form {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.45rem;
}

.insurance-premium-breakdown-table {
  width: max-content;
  min-width: 100%;
  font-size: 0.8rem;
}

.insurance-premium-breakdown-table th,
.insurance-premium-breakdown-table td {
  min-width: 8rem;
  max-width: 18rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.insurance-premium-breakdown-table th:first-child,
.insurance-premium-breakdown-table td:first-child {
  min-width: 9.5rem;
}

.insurance-premium-breakdown-table :is(th, td).premium-breakdown-np-column {
  background: color-mix(in srgb, var(--color-success) 17%, var(--color-base-100));
}

.insurance-premium-breakdown-table :is(th, td).premium-breakdown-pz-column {
  background: color-mix(in srgb, var(--color-info) 17%, var(--color-base-100));
}

.insurance-premium-breakdown-table :is(th, td).premium-breakdown-lcd-column {
  background: color-mix(in srgb, var(--color-secondary) 15%, var(--color-base-100));
}

.insurance-premium-breakdown-table tbody tr:nth-child(even) td.premium-breakdown-np-column {
  background: color-mix(in srgb, var(--color-success) 17%, var(--color-base-200));
}

.insurance-premium-breakdown-table tbody tr:nth-child(even) td.premium-breakdown-pz-column {
  background: color-mix(in srgb, var(--color-info) 17%, var(--color-base-200));
}

.insurance-premium-breakdown-table tbody tr:nth-child(even) td.premium-breakdown-lcd-column {
  background: color-mix(in srgb, var(--color-secondary) 15%, var(--color-base-200));
}

.insurance-premium-breakdown-table :is(th, td).premium-breakdown-date-column {
  color: var(--color-error);
  font-weight: 750;
}

.insurance-premium-breakdown-table :is(th, td).premium-breakdown-money-column {
  text-align: right;
}

.insurance-premium-breakdown-table th.premium-breakdown-money-column .report-sort-link {
  width: 100%;
  justify-content: flex-end;
}

.insurance-summary-panel,
.insurance-commission-summary-panel {
  min-height: 0;
}

.insurance-summary-table tbody tr[data-report-infinite-sentinel] td {
  height: 3rem;
  padding: 0;
  text-align: center;
}

.insurance-summary-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: color-mix(in srgb, var(--color-base-content) 68%, transparent);
  font-size: 0.78rem;
}

.insurance-commission-heading {
  flex: 0 0 auto;
}

.insurance-commission-summary-table {
  width: max-content;
  min-width: 100%;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

.insurance-commission-summary-table :is(th, td) {
  min-width: 8.5rem;
  white-space: nowrap;
}

.insurance-commission-summary-table .commission-group-column {
  color: color-mix(in srgb, var(--color-base-content) 78%, transparent);
  font-weight: 650;
}

.insurance-commission-summary-table .commission-metric-column {
  text-align: right;
}

.insurance-commission-summary-table :is(th, td).commission-np-column {
  background: color-mix(in srgb, var(--color-success) 16%, var(--color-base-100));
}

.insurance-commission-summary-table :is(th, td).commission-pz-column {
  background: color-mix(in srgb, var(--color-info) 16%, var(--color-base-100));
}

.insurance-commission-summary-table :is(th, td).commission-lcd-column {
  background: color-mix(in srgb, var(--color-secondary) 14%, var(--color-base-100));
}

.insurance-commission-summary-table :is(th, td).commission-total-column {
  background: color-mix(in srgb, var(--color-warning) 14%, var(--color-base-100));
  font-weight: 750;
}

.insurance-commission-summary-table tbody tr:nth-child(even) :is(td.commission-np-column, td.commission-pz-column, td.commission-lcd-column, td.commission-total-column) {
  background-color: color-mix(in srgb, currentColor 4%, var(--color-base-200));
}

.insurance-commission-summary-table tfoot th {
  position: sticky;
  bottom: 0;
  z-index: 2;
  border-top: 2px solid var(--color-base-300);
  background: var(--color-base-200);
  font-weight: 800;
}

@media (max-width: 767px) {
  .insurance-summary-footer {
    justify-content: flex-end;
  }

  .insurance-summary-footer > :last-child {
    display: none;
  }
}

.invoice-contact-open {
  min-width: 0;
  max-width: 24rem;
}

.invoice-contact-open span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.invoice-contact-address {
  min-width: 18rem;
  max-width: 26rem;
  color: color-mix(in srgb, var(--color-base-content) 66%, transparent);
  font-size: 0.76rem;
  line-height: 1.4;
}

.invoice-contact-column-center {
  text-align: center;
}

.invoice-contact-column-center .invoice-contact-vat-cell {
  justify-items: center;
}

.invoice-contact-role-badges {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
}

.invoice-contact-role-trigger {
  display: inline-flex;
  cursor: help;
}

.invoice-contact-role-trigger:focus-visible {
  border-radius: var(--radius-field);
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.invoice-contact-role-tooltip {
  position: fixed;
  z-index: 100;
  border-radius: var(--radius-field);
  background: var(--color-neutral);
  padding: 0.3rem 0.5rem;
  color: var(--color-neutral-content);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--color-base-content) 18%, transparent);
}

.invoice-contact-role-tooltip::after {
  position: absolute;
  bottom: -0.22rem;
  left: 50%;
  width: 0.45rem;
  height: 0.45rem;
  background: inherit;
  content: "";
  transform: translateX(-50%) rotate(45deg);
}

.invoice-contact-role-tooltip[hidden] {
  display: none;
}

.invoice-contact-channels,
.invoice-contact-vat-cell {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.invoice-contact-vat-value {
  max-width: 24rem;
  overflow: hidden;
  color: color-mix(in srgb, var(--color-base-content) 66%, transparent);
  font-size: 0.76rem;
  font-weight: 400;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.invoice-contact-channels span {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.76rem;
}

.invoice-contact-channels i {
  width: 0.9rem;
  color: color-mix(in srgb, var(--color-base-content) 48%, transparent);
  text-align: center;
}

.invoice-contact-modal-box {
  display: flex;
  flex-direction: column;
  width: min(97vw, 92rem);
  max-width: 92rem;
  height: min(96dvh, 70rem);
  max-height: 96dvh;
  padding: 0;
  overflow: hidden;
}

.invoice-contact-form {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 1.25rem;
}

.invoice-contact-form > [data-invoice-contact-fields] {
  display: grid;
  min-width: 0;
  gap: 1rem;
  border: 0;
  padding: 0;
}

.invoice-contact-form > [data-invoice-contact-fields].is-disabled {
  opacity: 1;
}

.invoice-contact-form > [data-invoice-contact-fields].is-disabled :is(.input, .select, .textarea) {
  border-color: color-mix(in srgb, var(--color-base-300) 78%, transparent);
  background: var(--color-base-200);
  color: var(--color-base-content);
  opacity: 1;
}

.invoice-contact-footer {
  justify-content: space-between;
}

.invoice-contact-footer > :last-child {
  margin-left: auto;
}

.invoice-contact-main-grid {
  --invoice-contact-alignment-column: calc((100% - 2.4rem) / 4);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8rem;
  align-items: end;
}

.invoice-contact-subject-layout {
  min-width: 0;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(var(--invoice-contact-alignment-column), max-content) max-content;
  align-items: end;
  justify-content: start;
  gap: 0.8rem;
}

.invoice-contact-subject-layout > :is(.invoice-contact-type-field, .invoice-contact-role-field) {
  grid-column: auto;
}

.invoice-contact-type-field {
  grid-column: span 2;
  min-width: 0;
}

.invoice-contact-role-field {
  min-width: 0;
}

.invoice-contact-type-scroll {
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  padding: 2px;
  scrollbar-width: none;
}

.invoice-contact-type-scroll::-webkit-scrollbar {
  display: none;
}

.invoice-contact-type-options {
  width: max-content;
  min-width: max-content;
}

/* Same look and locked behaviour as the item type switch in the catalog,
   so both type pickers in the app read as one control. */
.invoice-contact-type-options[data-invoice-contact-type-locked="true"] {
  cursor: not-allowed;
}

.invoice-contact-type-options[data-invoice-contact-type-locked="true"] .btn {
  cursor: inherit;
  pointer-events: none;
}

.invoice-contact-type-options .btn {
  height: 3rem;
  min-height: 3rem;
  min-width: auto;
  padding-inline: 1rem;
  transition: none;
  white-space: nowrap;
}

.invoice-contact-type-options .btn:disabled {
  cursor: default;
  opacity: 1;
}

/* Same breakpoint as the catalog switch, so both behave identically when narrow. */
@media (max-width: 800px) {
  .invoice-contact-type-options {
    display: flex;
    width: 100%;
  }

  .invoice-contact-type-options .btn {
    flex: 1 1 auto;
    padding-inline: 0.4rem;
  }
}

.invoice-contact-field-action {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
  gap: 0.5rem;
}

.invoice-contact-field-action > :is(.input, .btn) {
  min-width: 0;
}

.invoice-contact-field-action > .btn {
  white-space: nowrap;
}

.invoice-contact-identity-layout {
  min-width: 0;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: 0.8rem;
}

/* A choice card that cannot be ticked (e.g. individual contracts, being prepared). */
.invoice-contact-checkbox-card:has(> input:disabled) {
  cursor: not-allowed;
}

/* Insurance address book: no legal form beside the name of a company. */
.invoice-contact-identity-layout.is-name-only {
  grid-template-columns: minmax(0, 1fr);
}

.invoice-contact-form.is-private-person .invoice-contact-identity-layout {
  min-width: 0;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: 0.8rem;
}

.invoice-contact-identity-layout > :is(.invoice-contact-name-field, .invoice-contact-legal-form-field) {
  grid-column: auto;
}

.invoice-contact-role-field {
  grid-column: span 2;
}

.invoice-contact-role-options {
  min-height: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  gap: 0.25rem;
}

.invoice-contact-checkbox-card {
  display: flex;
  min-height: 3rem;
  align-items: center;
  justify-content: flex-start;
  gap: 0.6rem;
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-field);
  background: var(--color-base-100);
  padding: 0.55rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 800;
}

.invoice-contact-role-options .invoice-contact-checkbox-card {
  min-height: 2.5rem;
  border: 0;
  padding-left: 0;
}

.invoice-contact-vat-payer-control {
  min-height: 2.5rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  overflow: hidden;
}

.invoice-contact-vat-payer-control > .invoice-contact-checkbox-card {
  min-height: 0;
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  padding: 0;
}

.invoice-contact-vat-state {
  min-width: 0;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 0.55rem;
  overflow: hidden;
}

.invoice-contact-vat-state[hidden] {
  display: none;
}

.invoice-contact-vat-state small {
  min-width: 0;
  overflow: hidden;
  color: color-mix(in srgb, var(--color-base-content) 58%, transparent);
  font-size: 0.65rem;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.invoice-contact-vat-state .badge {
  flex: 0 0 auto;
  min-height: 1.4rem;
  height: 1.4rem;
  padding-inline: 0.45rem;
  font-size: 0.65rem;
}

.invoice-contact-detail-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.invoice-contact-form.is-private-person .invoice-contact-detail-split {
  grid-template-columns: minmax(0, 1fr);
}

.invoice-contact-address-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8rem;
}

.invoice-contact-street-field {
  grid-column: span 3;
}

.invoice-contact-city-field {
  grid-column: span 2;
}

.invoice-contact-country-field {
  grid-column: span 1;
}

.invoice-contact-section-heading > .btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.invoice-contact-delivery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: 0.8rem;
}

.invoice-delivery-address-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-box);
  background: var(--color-base-200);
  padding: 0.85rem;
}

.invoice-delivery-address-card-heading {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.65rem;
}

.invoice-delivery-address-card-heading > div {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}

.invoice-delivery-address-card-heading h5 {
  min-width: 0;
  overflow: hidden;
  font-size: 0.88rem;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.invoice-delivery-address-card-body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.24rem;
  color: color-mix(in srgb, var(--color-base-content) 72%, transparent);
  font-size: 0.78rem;
  line-height: 1.45;
}

.invoice-delivery-address-card-body strong {
  color: var(--color-base-content);
}

.invoice-delivery-address-channels {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: 0.35rem 0.8rem;
  margin-top: 0.25rem;
}

.invoice-delivery-address-channels span {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 0.35rem;
  overflow-wrap: anywhere;
}

.invoice-delivery-address-channels i {
  color: color-mix(in srgb, var(--color-base-content) 48%, transparent);
}

.invoice-delivery-address-note {
  border-top: 1px solid color-mix(in srgb, var(--color-base-300) 75%, transparent);
  margin-top: 0.35rem;
  padding-top: 0.55rem;
  color: color-mix(in srgb, var(--color-base-content) 62%, transparent);
}

.invoice-delivery-address-modal-box {
  display: flex;
  flex-direction: column;
  width: min(96vw, 58rem);
  max-width: 58rem;
  height: min(92dvh, 52rem);
  max-height: 92dvh;
  padding: 0;
  overflow: hidden;
}

/* Nastavení aplikace (vlastník 25. 10. 2026): širší okno s posuvným obsahem, logické skupiny jako
   rámečkové sekce detailů, přepínače ve dvou sloupcích, když se vejdou (jinak v jednom). */
.app-settings-modal-box {
  display: flex;
  flex-direction: column;
  width: min(94vw, 54rem);
  max-width: 54rem;
  max-height: min(92dvh, 48rem);
  padding: 0;
  overflow: hidden;
}

.app-settings-form {
  display: grid;
  flex: 1 1 auto;
  align-content: start;
  gap: 1rem;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.25rem;
}

.app-settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
  gap: 0.35rem 1.25rem;
}

.app-settings-grid > .fieldset {
  min-width: 0;
}

.app-settings-grid .join-item.btn {
  padding-inline: 0.75rem;
  font-size: 0.8125rem;
}

.app-settings-grid > .app-settings-wide {
  grid-column: 1 / -1;
}

/* Výchozí volba tenanta (AppSettings::render, data-tenant-default): domeček před popiskem přepínače
   (popisek je ::after DaisyUI); vysvětlení dává bublina náhledu. */
.app-settings-grid .join-item.btn[data-tenant-default]::before {
  content: "\f015";
  margin-right: 0.35em;
  font-family: "Font Awesome 7 Free";
  font-size: 0.75em;
  font-weight: 900;
  opacity: 0.7;
}

/* Barevný režim (vlastník 28. 10. 2026, AppSettings::renderThemeMode): přepínač se sluncem a měsícem a vedle
   „Podle systému“; pod ním u uživatele výchozí volba tenanta. */
.app-settings-theme-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  min-height: 2.5rem;
}

.app-settings-theme-switch > i {
  display: grid;
  place-items: center;
  font-size: 0.8rem;
}

.app-settings-theme-system {
  gap: 0.5rem;
  cursor: pointer;
  color: var(--color-base-content);
  font-size: 0.875rem;
}

.app-settings-tenant-note {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.25rem;
  color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
  font-size: 0.75rem;
}

.app-settings-tenant-note > i {
  font-size: 0.7rem;
  opacity: 0.8;
}

/* Organizace a subjekty › tenant › Nastavení aplikace: sekce bez vlastního posuvníku (posouvá okno). */
.app-settings-tenant-form {
  overflow: visible;
  padding: 0;
}

@media (max-width: 767px) {
  .app-settings-modal-box {
    width: calc(100vw - 0.5rem);
    max-width: calc(100vw - 0.5rem);
    max-height: calc(100dvh - 0.5rem);
  }

  .app-settings-form {
    padding: 0.75rem;
  }

  .app-settings-section {
    padding: 0.85rem;
  }

  .app-settings-grid .join-item.btn {
    padding-inline: 0.35rem;
  }

  /* The label of a radio switch is its ::after; the 16 px of mobile inputs (iOS zoom) is for typing. */
  .app-settings-grid .join-item.btn::after {
    font-size: 0.75rem;
  }
}

/* Náhled voleb vzhledu (vlastník 25. 10. 2026, app.js initializeAppearancePreviews): miniatura IS
   kreslená z voleb barvami motivu (data-theme světlý / tmavý, Přehled vlastní paletou) a značky tenanta.
   V Nastavení aplikace (uživatele i tenanta) jako bublina nad formulářem (popover v horní vrstvě, šipka
   k volbě). Rozměry v em podle šířky kontejneru, takže se miniatura škáluje celá. */
.appearance-preview-bubble {
  position: fixed;
  inset: auto;
  width: min(21rem, calc(100vw - 1rem));
  margin: 0;
  overflow: visible;
  container-type: inline-size;
  gap: 0.5rem;
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-box);
  background: var(--color-base-100);
  padding: 0.6rem;
  color: var(--color-base-content);
  box-shadow: 0 18px 40px -12px rgb(16 24 40 / 0.3), 0 4px 10px -4px rgb(16 24 40 / 0.12);
  pointer-events: none;
  transition: left 0.14s ease, top 0.14s ease;
}

.appearance-preview-bubble:popover-open {
  display: grid;
  animation: appearance-preview-in 0.16s ease-out;
}

.appearance-preview-bubble::before {
  content: "";
  width: 0.8rem;
  height: 0.8rem;
  position: absolute;
  left: clamp(1rem, var(--appearance-preview-arrow, 50%), calc(100% - 1rem));
  border: inherit;
  border-radius: 0.15rem;
  background: inherit;
  transform: translateX(-50%) rotate(45deg);
}

.appearance-preview-bubble[data-side="below"]::before {
  top: -0.45rem;
  border-right: 0;
  border-bottom: 0;
}

.appearance-preview-bubble[data-side="above"]::before {
  bottom: -0.45rem;
  border-top: 0;
  border-left: 0;
}

@keyframes appearance-preview-in {
  from {
    opacity: 0;
    transform: translateY(var(--appearance-preview-shift, -4px)) scale(0.97);
  }
}

.appearance-preview-bubble[data-side="above"] {
  --appearance-preview-shift: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .appearance-preview-bubble {
    transition: none;
  }

  .appearance-preview-bubble:popover-open {
    animation: none;
  }
}

.appearance-preview-caption {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.4rem;
  font-size: 0.75rem;
}

.appearance-preview-caption > strong {
  font-weight: 700;
}

.appearance-preview-caption > span {
  color: color-mix(in srgb, var(--color-base-content) 62%, transparent);
}

.appearance-preview-caption > .appearance-preview-tenant {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  margin-left: auto;
  color: var(--color-primary);
  font-weight: 600;
}

/* --- Miniatura: mřížka horní lišta / menu / obsah, palety, zaoblení -------------------------- */
.appearance-preview-window {
  --ap-canvas: var(--color-base-100);
  --ap-line: var(--color-base-300);
  --ap-muted: color-mix(in srgb, var(--color-base-content) 64%, transparent);
  --ap-side-width: 8.5em;
  --ap-row: 2.15em;
  --ap-radius-box: calc(var(--radius-box) * 0.5);
  --ap-radius-field: calc(var(--radius-field) * 0.55);
  width: 100%;
  aspect-ratio: 16 / 10;
  display: grid;
  grid-template-areas: "top top" "side main";
  grid-template-columns: var(--ap-side-width) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--ap-line);
  border-radius: calc(var(--radius-box) * 0.6);
  background: var(--ap-canvas);
  color: var(--color-base-content);
  font-size: 7px;
  font-size: calc(100cqi / 42);
  line-height: 1.2;
  user-select: none;
  pointer-events: none;
}

.appearance-preview-window[data-ap-skin="overview"][data-theme="light"] {
  --color-base-100: #ffffff;
  --color-base-200: #f2f4f7;
  --color-base-300: #eaecf0;
  --color-base-content: #101828;
  --color-primary: #1d4f91;
  --color-primary-content: #ffffff;
  --ap-canvas: #eef2f7;
  --radius-field: 0.5rem;
  --radius-box: 0.75rem;
}

.appearance-preview-window[data-ap-skin="overview"][data-theme="dark"] {
  --color-base-100: #161b26;
  --color-base-200: #1f242f;
  --color-base-300: #2a303c;
  --color-base-content: #f5f5f6;
  --color-primary: #528bff;
  --color-primary-content: #0c111d;
  --ap-canvas: #0c111d;
  --radius-field: 0.5rem;
  --radius-box: 0.75rem;
}

.appearance-preview-window[data-ap-radius="sharp"][data-theme] {
  --radius-field: 0.25rem;
  --radius-box: 0.25rem;
}

.appearance-preview-window[data-ap-radius="rounded"][data-theme] {
  --radius-field: 1rem;
  --radius-box: 1.25rem;
}

.appearance-preview-window[data-ap-density="compact"] {
  --ap-row: 1.65em;
}

.appearance-preview-window[data-ap-density="spacious"] {
  --ap-row: 2.75em;
}

.appearance-preview-window .ap-bar {
  min-width: 0;
  height: 0.5em;
  flex: 1 1 auto;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-base-content) 16%, transparent);
}

.appearance-preview-window .ap-logo {
  width: 1.7em;
  height: 1.7em;
  flex: 0 0 auto;
  border-radius: var(--ap-radius-field);
  background: var(--color-primary);
}

/* Menu: boční, sbalené / úzká lišta jen s ikonami, horní lišta se sekcemi jako pilulky. */
.appearance-preview-window .ap-top {
  grid-area: top;
  display: none;
  min-width: 0;
  align-items: center;
  gap: 0.45em;
  overflow: hidden;
  border-bottom: 1px solid var(--ap-line);
  background: var(--color-base-100);
  padding: 0.65em 0.9em;
}

.appearance-preview-window .ap-top-item {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 0.45em 0.85em;
  color: var(--ap-muted);
  font-weight: 650;
  white-space: nowrap;
}

.appearance-preview-window .ap-top-item.is-active {
  background: color-mix(in srgb, var(--color-primary) 12%, var(--color-base-100));
  color: var(--color-primary);
}

.appearance-preview-window .ap-avatar {
  width: 1.7em;
  height: 1.7em;
  flex: 0 0 auto;
  margin-left: auto;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-base-content) 18%, transparent);
}

.appearance-preview-window .ap-side {
  grid-area: side;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3em;
  overflow: hidden;
  border-right: 1px solid var(--ap-line);
  background: var(--color-base-200);
  padding: 0.9em 0.65em;
}

.appearance-preview-window .ap-side-head {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-bottom: 0.7em;
}

.appearance-preview-window .ap-side-row {
  height: 2.1em;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.55em;
  border-radius: var(--ap-radius-field);
  padding-inline: 0.55em;
}

.appearance-preview-window .ap-side-row > i {
  width: 0.95em;
  height: 0.95em;
  flex: 0 0 auto;
  border-radius: 0.25em;
  background: color-mix(in srgb, var(--color-base-content) 32%, transparent);
}

.appearance-preview-window .ap-side-row.is-active {
  background: var(--color-base-content);
}

.appearance-preview-window .ap-side-row.is-active > * {
  background: color-mix(in srgb, var(--color-base-100) 80%, transparent);
}

.appearance-preview-window[data-ap-skin="overview"] .ap-side {
  background: var(--color-base-100);
}

.appearance-preview-window[data-ap-skin="overview"] .ap-side-row.is-active {
  background: color-mix(in srgb, var(--color-primary) 12%, var(--color-base-100));
}

.appearance-preview-window[data-ap-skin="overview"] .ap-side-row.is-active > * {
  background: var(--color-primary);
}

/* Ignis (vlastník 28. 10. 2026): miniatura Terry ve tvaru skin-ignis.css – oblé panely a pole, vlasové linky. */
.appearance-preview-window[data-ap-skin-variant="ignis"][data-ap-radius="default"][data-theme] {
  --radius-field: 2rem;
  --radius-box: 2rem;
  --border: 0.5px;
}

.appearance-preview-window:is([data-ap-sidebar="collapsed"], [data-ap-nav="rail"]) {
  --ap-side-width: 3.5em;
}

.appearance-preview-window:is([data-ap-sidebar="collapsed"], [data-ap-nav="rail"]) .ap-side :is(.ap-bar, .ap-side-head .ap-bar) {
  display: none;
}

.appearance-preview-window:is([data-ap-sidebar="collapsed"], [data-ap-nav="rail"]) .ap-side-row {
  justify-content: center;
  padding-inline: 0;
}

.appearance-preview-window:is([data-ap-sidebar="collapsed"], [data-ap-nav="rail"]) .ap-side-head {
  justify-content: center;
}

.appearance-preview-window[data-ap-nav="top"] {
  grid-template-areas: "top" "main";
  grid-template-columns: minmax(0, 1fr);
}

.appearance-preview-window[data-ap-nav="top"] .ap-top {
  display: flex;
}

.appearance-preview-window[data-ap-nav="top"] .ap-side {
  display: none;
}

/* Taby aplikací: klasické, podtržené, pilulky, čipy (jako appearance.css). */
.appearance-preview-window .ap-main {
  grid-area: main;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.appearance-preview-window .ap-apptabs {
  height: 3.1em;
  display: flex;
  flex: 0 0 auto;
  align-items: flex-end;
  overflow: hidden;
  border-bottom: 1px solid var(--ap-line);
  background: var(--color-base-200);
  padding-inline: 0.9em;
}

.appearance-preview-window[data-ap-apptabs="disabled"] .ap-apptabs {
  display: none;
}

.appearance-preview-window .ap-apptabs-list {
  min-width: 0;
  display: flex;
  align-items: inherit;
  align-self: stretch;
  gap: 0.3em;
}

.appearance-preview-window .ap-apptab {
  height: 2.5em;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  align-self: flex-end;
  gap: 0.45em;
  border: 1px solid var(--ap-line);
  border-bottom: 0;
  border-radius: 0.5em 0.5em 0 0;
  background: var(--color-base-200);
  padding-inline: 0.8em;
  color: var(--ap-muted);
  font-weight: 700;
  white-space: nowrap;
}

.appearance-preview-window .ap-apptab > i {
  width: 0.85em;
  height: 0.85em;
  border-radius: 0.2em;
  background: currentColor;
  opacity: 0.6;
}

.appearance-preview-window .ap-apptab.is-active {
  background: var(--color-base-100);
  color: var(--color-base-content);
}

.appearance-preview-window:is([data-ap-tabs="underline"], [data-ap-tabs="pills"], [data-ap-tabs="chips"]) .ap-apptabs {
  background: var(--color-base-100);
}

.appearance-preview-window[data-ap-tabs="underline"] .ap-apptab {
  height: auto;
  align-self: stretch;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: inset 0 -0.2em 0 transparent;
}

.appearance-preview-window[data-ap-tabs="underline"] .ap-apptab.is-active {
  color: var(--color-primary);
  box-shadow: inset 0 -0.2em 0 var(--color-primary);
}

.appearance-preview-window:is([data-ap-tabs="pills"], [data-ap-tabs="chips"]) .ap-apptabs-list {
  align-items: center;
  align-self: center;
}

.appearance-preview-window[data-ap-tabs="pills"] .ap-apptabs-list {
  gap: 0.15em;
  border-radius: 999px;
  background: var(--color-base-200);
  padding: 0.22em;
}

.appearance-preview-window:is([data-ap-tabs="pills"], [data-ap-tabs="chips"]) .ap-apptab {
  height: 2.1em;
  align-self: center;
  border-bottom: 1px solid var(--ap-line);
}

.appearance-preview-window[data-ap-tabs="pills"] .ap-apptab {
  border: 0;
  border-radius: 999px;
  background: transparent;
}

.appearance-preview-window[data-ap-tabs="pills"] .ap-apptab.is-active {
  background: var(--color-primary);
  color: var(--color-primary-content);
}

.appearance-preview-window[data-ap-tabs="chips"] .ap-apptab {
  border-radius: var(--ap-radius-field);
  background: var(--color-base-100);
}

.appearance-preview-window[data-ap-tabs="chips"] .ap-apptab.is-active {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 6%, var(--color-base-100));
  color: var(--color-primary);
}

.appearance-preview-window[data-ap-skin="overview"] .ap-apptabs {
  background: var(--ap-canvas);
}

/* Stránka: hlavička, taby stránek (podtržené, pilulky, čipy), tabulka s hustotou řádků. */
.appearance-preview-window .ap-page {
  min-height: 0;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.75em;
  overflow: hidden;
  background: var(--color-base-100);
  padding: 1em 1.1em;
}

.appearance-preview-window[data-ap-skin="overview"] .ap-page {
  background: var(--ap-canvas);
}

.appearance-preview-window .ap-head {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 0.6em;
}

.appearance-preview-window .ap-head > strong {
  min-width: 0;
  overflow: hidden;
  font-size: 1.35em;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Pole hledání v hlavičce ukazuje obrys aktivního pole (barevný, obyčejný, žádný). */
.appearance-preview-window .ap-search {
  min-width: 0;
  display: inline-flex;
  flex: 0 1 9em;
  align-items: center;
  gap: 0.45em;
  margin-left: auto;
  overflow: hidden;
  border: 1px solid var(--ap-line);
  border-radius: var(--ap-radius-field);
  background: var(--color-base-100);
  padding: 0.35em 0.6em;
  color: var(--ap-muted);
  white-space: nowrap;
}

.appearance-preview-window .ap-search > i {
  width: 0.8em;
  height: 0.8em;
  flex: 0 0 auto;
  border: 0.15em solid currentColor;
  border-radius: 999px;
}

.appearance-preview-window[data-ap-outline="color"] .ap-search {
  outline: 0.18em solid var(--color-primary);
  outline-offset: 0.15em;
}

.appearance-preview-window[data-ap-outline="plain"] .ap-search {
  outline: 0.18em solid var(--color-base-content);
  outline-offset: 0.15em;
}

.appearance-preview-window[data-ap-skin="overview"][data-ap-outline="color"] .ap-search {
  border-color: color-mix(in srgb, var(--color-primary) 55%, var(--ap-line));
  outline: 0;
  box-shadow: 0 0 0 0.3em color-mix(in srgb, var(--color-primary) 22%, transparent);
}

.appearance-preview-window[data-ap-skin="overview"][data-ap-outline="plain"] .ap-search {
  outline: 0;
  box-shadow: 0 0 0 0.3em color-mix(in srgb, var(--color-base-content) 12%, transparent);
}

.appearance-preview-window .ap-btn {
  flex: 0 0 auto;
  border-radius: var(--ap-radius-field);
  background: var(--color-primary);
  padding: 0.45em 0.85em;
  color: var(--color-primary-content);
  font-weight: 700;
}

.appearance-preview-window .ap-pagetabs {
  display: flex;
  flex: 0 0 auto;
  align-items: flex-end;
  gap: 1.3em;
  border-bottom: 1px solid var(--ap-line);
}

.appearance-preview-window .ap-pagetabs > span {
  padding-block: 0.5em;
  color: var(--ap-muted);
  font-weight: 650;
  box-shadow: inset 0 -0.2em 0 transparent;
}

.appearance-preview-window .ap-pagetabs > .is-active {
  color: var(--color-primary);
  box-shadow: inset 0 -0.2em 0 var(--color-primary);
}

.appearance-preview-window[data-ap-pagetabs="classic"] .ap-pagetabs {
  gap: 0.25em;
  border-bottom: 0;
  box-shadow: inset 0 -1px 0 var(--ap-line);
}

.appearance-preview-window[data-ap-pagetabs="classic"] .ap-pagetabs > span {
  border: 1px solid var(--ap-line);
  border-radius: 0.5em 0.5em 0 0;
  background: var(--color-base-200);
  padding: 0.4em 0.8em;
  box-shadow: none;
}

.appearance-preview-window[data-ap-pagetabs="classic"] .ap-pagetabs > .is-active {
  border-bottom-color: var(--color-base-100);
  background: var(--color-base-100);
  color: var(--color-base-content);
}

.appearance-preview-window:is([data-ap-pagetabs="pills"], [data-ap-pagetabs="chips"]) .ap-pagetabs {
  align-items: center;
  gap: 0.35em;
  padding-bottom: 0.5em;
}

.appearance-preview-window[data-ap-pagetabs="pills"] .ap-pagetabs > span {
  border-radius: 999px;
  padding: 0.4em 0.9em;
  box-shadow: none;
}

.appearance-preview-window[data-ap-pagetabs="pills"] .ap-pagetabs > .is-active {
  background: color-mix(in srgb, var(--color-primary) 12%, var(--color-base-100));
}

.appearance-preview-window[data-ap-pagetabs="chips"] .ap-pagetabs > span {
  border: 1px solid var(--ap-line);
  border-radius: var(--ap-radius-field);
  background: var(--color-base-100);
  padding: 0.3em 0.8em;
  box-shadow: none;
}

.appearance-preview-window[data-ap-pagetabs="chips"] .ap-pagetabs > .is-active {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 6%, var(--color-base-100));
}

.appearance-preview-window .ap-table {
  min-height: 0;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--ap-line);
  border-radius: var(--ap-radius-box);
  background: var(--color-base-100);
}

.appearance-preview-window[data-ap-skin="overview"] .ap-table {
  box-shadow: 0 1px 2px rgb(16 24 40 / 0.06);
}

.appearance-preview-window .ap-tr {
  height: var(--ap-row);
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: 1.2fr 1fr 0.8fr 2.4em;
  align-items: center;
  gap: 0.9em;
  border-top: 1px solid var(--ap-line);
  padding-inline: 0.9em;
}

.appearance-preview-window .ap-tr:first-child {
  border-top: 0;
}

.appearance-preview-window .ap-th {
  background: var(--color-base-200);
}

.appearance-preview-window .ap-th .ap-bar {
  height: 0.4em;
  background: color-mix(in srgb, var(--color-base-content) 30%, transparent);
}

.appearance-preview-window .ap-tr:not(.ap-th) .ap-bar:first-child {
  background: color-mix(in srgb, var(--color-primary) 55%, transparent);
}

.appearance-preview-window .ap-badge {
  height: 1em;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-primary) 18%, var(--color-base-100));
}

/* Zvýraznění části, které se volba týká (ostatní ztlumené). */
.appearance-preview-window :is(.ap-top, .ap-side, .ap-apptabs, .ap-head, .ap-pagetabs, .ap-table) {
  transition: opacity 0.15s ease;
}

.appearance-preview-window:is([data-ap-focus="nav"], [data-ap-focus="sidebar"]) .ap-main,
.appearance-preview-window:is([data-ap-focus="apptabs"], [data-ap-focus="tabs"]) :is(.ap-top, .ap-side, .ap-page),
.appearance-preview-window[data-ap-focus="pagetabs"] :is(.ap-top, .ap-side, .ap-apptabs, .ap-head, .ap-table),
.appearance-preview-window[data-ap-focus="density"] :is(.ap-top, .ap-side, .ap-apptabs, .ap-head, .ap-pagetabs),
.appearance-preview-window[data-ap-focus="outline"] :is(.ap-top, .ap-side, .ap-apptabs, .ap-head > strong, .ap-btn, .ap-pagetabs, .ap-table) {
  opacity: 0.38;
}

.invoice-delivery-address-form {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 1.25rem;
}

.invoice-delivery-address-form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
  gap: 0.8rem;
}

.invoice-delivery-address-label-field,
.invoice-delivery-address-default-field,
.invoice-delivery-address-form-grid > .fieldset:not(
  .invoice-delivery-address-street-field,
  .invoice-delivery-address-building-field,
  .invoice-delivery-address-detail-field,
  .invoice-delivery-address-postal-field,
  .invoice-delivery-address-city-field,
  .invoice-delivery-address-country-field,
  .invoice-delivery-address-instructions-field
) {
  grid-column: span 2;
}

.invoice-delivery-address-default-field {
  min-height: 2.65rem;
  align-items: center;
  justify-content: flex-start;
  gap: 0.7rem;
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-field);
  background: var(--color-base-200);
  padding: 0.45rem 0.7rem;
}

.invoice-delivery-address-default-field > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  line-height: 1.2;
}

.invoice-delivery-address-default-field small {
  color: color-mix(in srgb, var(--color-base-content) 56%, transparent);
  font-size: 0.67rem;
}

.invoice-delivery-address-street-field {
  grid-column: span 3;
}

.invoice-delivery-address-building-field,
.invoice-delivery-address-postal-field,
.invoice-delivery-address-country-field {
  grid-column: span 1;
}

.invoice-delivery-address-detail-field,
.invoice-delivery-address-instructions-field {
  grid-column: 1 / -1;
}

.invoice-delivery-address-city-field {
  grid-column: span 2;
}

.invoice-delivery-address-footer > :last-child {
  margin-left: auto;
}

.invoice-contact-channel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.invoice-contact-person-field {
  grid-column: 1 / -1;
}

.invoice-contact-documents-table td {
  white-space: nowrap;
}

.invoice-contact-vat-modal-box {
  width: min(94vw, 58rem);
  max-width: 58rem;
}

.invoice-contact-vat-heading {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.invoice-contact-vat-heading h3 {
  min-width: 0;
}

.invoice-contact-vat-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 1rem;
  background: var(--color-base-200);
  font-size: 1.4rem;
}

.invoice-contact-vat-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
  margin-top: 1rem;
}

.invoice-contact-vat-meta > div {
  display: grid;
  gap: 0.15rem;
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-field);
  background: var(--color-base-200);
  padding: 0.65rem 0.75rem;
}

.invoice-contact-vat-meta dt {
  color: color-mix(in srgb, var(--color-base-content) 56%, transparent);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.invoice-contact-vat-meta dd {
  font-weight: 800;
}

.invoice-contact-vat-history-note {
  margin-top: 1rem;
}

.role-dot {
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 999px;
  display: inline-block;
  background: #64748b;
}

.role-dot.admin {
  background: #dc2626;
}

.role-dot.superadmin {
  background: #111827;
}

.role-dot.tenant_admin {
  background: #7c3aed;
}

.role-dot.accountant {
  background: #0891b2;
}

.role-dot.hr {
  background: #db2777;
}

.role-dot.manager {
  background: #2563eb;
}

.role-dot.employee {
  background: #0f766e;
}

@media (max-width: 1200px) and (min-width: 701px) {
  .invoice-contact-main-grid {
    --invoice-contact-alignment-column: calc((100% - 0.8rem) / 2);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .invoice-preview-toolbar.invoice-design-modal-toolbar {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .invoice-design-modal-toolbar .invoice-preview-actions {
    grid-column: auto;
    grid-row: auto;
    flex-wrap: nowrap;
  }

  .invoice-design-modal-toolbar .modal-toolbar-close {
    grid-column: auto;
    grid-row: auto;
  }

  .invoice-design-app-toolbar {
    align-items: center;
    flex-direction: row;
  }

  .invoice-design-app-actions {
    width: auto;
  }

  .invoice-design-app-actions .btn {
    flex: 0 0 auto;
  }

  .invoice-contact-toolbar {
    grid-template-columns: 1fr;
  }

  .invoice-detail-toolbar,
  .insurance-service-detail-toolbar,
  .invoice-preview-toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .invoice-detail-toolbar-actions,
  .insurance-service-detail-actions,
  .invoice-preview-actions {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .invoice-preview-view-controls {
    grid-column: 1 / -1;
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  .invoice-preview-view-controls::-webkit-scrollbar {
    display: none;
  }

  .invoice-preview-actions .invoice-preview-view-controls .btn {
    width: auto;
    flex: 0 0 auto;
  }

  .modal-toolbar-close {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
  }

  .invoice-contact-detail-split {
    grid-template-columns: 1fr;
  }

  .invoice-design-workspace {
    grid-template-columns: minmax(20rem, 23rem) minmax(36rem, 1fr);
    grid-template-rows: minmax(0, 1fr);
  }

  .invoice-design-app-workspace {
    height: auto;
  }

  .invoice-design-controls {
    border-right: 1px solid var(--color-base-300);
    border-bottom: 0;
  }

  .invoice-design-preview-stage {
    justify-content: center;
  }

  .invoice-detail-toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 0.5rem;
    row-gap: 0.75rem;
    padding: 0.75rem;
  }

  .invoice-detail-toolbar > .min-w-0 {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
  }

  .invoice-detail-toolbar > .modal-toolbar-close {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
  }

  .invoice-detail-toolbar-actions {
    width: 100%;
    max-width: 100%;
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding-bottom: 0.15rem;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
  }

  .invoice-detail-toolbar-actions:not(:has(> .btn:not(.hidden):not([hidden]))),
  .insurance-service-detail-actions:not(:has(> :not(.hidden):not([hidden]))),
  .catalog-modal-header-actions:not(:has(> :not(.hidden):not([hidden]))) {
    display: none;
  }

  .invoice-detail-toolbar:not(:has(> .invoice-detail-toolbar-actions > .btn:not(.hidden):not([hidden]))) {
    grid-template-rows: auto;
    row-gap: 0;
  }

  .invoice-detail-toolbar-actions::before,
  .insurance-service-detail-actions::before,
  .catalog-modal-header-actions::before {
    content: "";
    flex: 0 0 0;
    margin-left: auto;
  }

  .invoice-detail-toolbar-actions::-webkit-scrollbar,
  .invoice-detail-footer::-webkit-scrollbar,
  .insurance-service-detail-actions::-webkit-scrollbar,
  .insurance-service-detail-footer::-webkit-scrollbar,
  .catalog-modal-header-actions::-webkit-scrollbar,
  .catalog-modal-footer::-webkit-scrollbar,
  .business-trip-modal-footer::-webkit-scrollbar {
    display: none;
  }

  .invoice-detail-toolbar-actions .btn {
    flex: 0 0 auto;
    scroll-snap-align: start;
    white-space: nowrap;
  }

  .invoice-detail-footer {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding: 0.75rem;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
  }

  .invoice-detail-footer-left,
  .invoice-detail-footer-actions {
    min-width: max-content;
    flex: 0 0 auto;
    margin-right: 0;
    margin-left: 0;
    flex-wrap: nowrap;
  }

  .invoice-detail-footer-actions {
    margin-left: auto;
    justify-content: flex-end;
  }

  .invoice-detail-footer .btn {
    flex: 0 0 auto;
    scroll-snap-align: start;
    white-space: nowrap;
  }

  /* The same single-row action strip is shared by the other CRUD modal
     families. Primary actions start at the right edge after opening, while a
     horizontal swipe still exposes every secondary action on the left. */
  .insurance-service-detail-actions,
  .insurance-service-detail-footer,
  .catalog-modal-header-actions,
  .catalog-modal-footer,
  .business-trip-modal-footer {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
  }

  .invoice-document-actions {
    flex-wrap: wrap;
  }

  .invoice-preview-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .invoice-preview-actions {
    flex-wrap: wrap;
  }

  .invoice-preview-stage {
    height: auto;
  }

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

  .invoice-detail-split {
    grid-template-columns: 1fr;
  }

  .app-navbar {
    gap: 0.75rem;
  }

  .nav-third-left {
    flex: 1.4 1 0;
  }

  .nav-third-center {
    display: none;
  }

  .nav-third-right {
    flex: 0 0 auto;
  }

  .app-main {
    min-height: calc(100dvh - 4.5rem);
  }

  .month-approval-flow-row {
    align-items: stretch;
    flex-direction: column;
  }

  .month-approval-heading {
    flex-basis: auto;
    min-width: 0;
    width: 100%;
  }

  .month-workflow-timeline {
    width: 100%;
  }

  .month-workflow-area {
    width: 100%;
  }

  .month-workflow-return-button {
    width: 100%;
  }

  .month-workflow-action-form {
    width: 100%;
  }

  .summary-ribbon {
    grid-template-columns: 1fr;
  }

  .admin-entitlement-grid,
  .admin-benefit-grid,
  .admin-entitlement-controls,
  .admin-benefit-fields {
    grid-template-columns: 1fr;
  }

  .month-overview {
    border-right: 0;
    border-bottom: 1px solid var(--color-base-300);
  }

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

  .summary-stats .stat + .stat {
    border-left: 0;
  }

  .summary-stats .stat:nth-child(even) {
    border-left: var(--summary-stats-line);
  }

  .summary-stats .stat:nth-child(n + 3) {
    border-top: var(--summary-stats-line);
  }

  .holiday-admin-grid {
    grid-template-columns: 1fr;
  }

  .vacation-plan-heading {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .vacation-plan-legend {
    justify-content: flex-start;
  }

  .report-toolbar,
  .report-toolbar-form,
  .report-table-footer,
  .report-config-grid,
  .report-settings-layout,
  .report-column-dual-list,
  .insurance-device-grid,
  .insurance-device-switches,
  .insurance-service-grid,
  .insurance-service-fields,
  .insurance-service-derived,
  .insurance-price-modal-grid,
  .insurance-price-service-cards,
  .insurance-lookup-modal-grid,
  .admin-two-column,
  .admin-management-grid {
    grid-template-columns: 1fr;
  }

  .report-toolbar-form,
  .invoice-contact-search-form {
    width: min(100%, 15rem);
  }

  .insurance-contract-heading,
  .insurance-contract-footer,
  .insurance-service-card-heading,
  .insurance-lookup-card-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .insurance-contract-badges {
    justify-content: flex-start;
  }

  .insurance-field-wide {
    grid-column: auto;
  }

  .insurance-price-editor-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .insurance-price-editor-footer .btn {
    width: 100%;
  }

  .insurance-service-duration-join {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .report-toolbar {
    align-items: stretch;
  }

  .report-view-switch,
  .report-config-actions {
    display: grid;
    width: 100%;
  }

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

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

  .report-view-switch .btn,
  .report-config-actions .btn {
    min-width: 0;
    width: 100%;
    white-space: normal;
  }

  .report-view-switch .btn span,
  .report-config-actions .btn span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .report-per-page {
    width: 100%;
  }

  .report-page-size-form,
  .report-pagination,
  .report-page-status {
    justify-self: stretch;
  }

  .report-page-size-control {
    width: 100%;
    justify-content: space-between;
  }

  .report-pagination .btn {
    min-width: 1.95rem;
    padding-inline: 0.5rem;
  }

  .report-page-status {
    text-align: center;
  }

  .report-profile-panel,
  .report-section-heading,
  .admin-profile-summary,
  .admin-section-heading,
  .admin-form-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .report-profile-list,
  .report-total-pills,
  .admin-badge-row {
    justify-content: flex-start;
  }

  .day-modal-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .day-modal-action-group {
    width: 100%;
  }

  .auth-layout {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: start;
    padding: 2rem 0;
  }

  .auth-panel {
    width: 100%;
  }

  .calendar-day {
    min-height: 7rem;
    padding: 0.55rem;
  }
}

@media (max-width: 700px) {
  .invoice-design-app-toolbar {
    padding-right: 0.75rem;
    padding-left: 0.75rem;
  }

  .invoice-design-app-actions {
    display: flex;
  }

  .invoice-design-app-workspace {
    height: auto;
    grid-template-rows: minmax(0, 1fr);
  }

  .application-embedded {
    --embedded-modal-edge-gap: 0.25rem;
  }

  :is(.invoice-contact-panel, .report-grid-panel) > .report-table-footer {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.4rem;
    padding: 0.55rem 0.6rem;
  }

  :is(.invoice-contact-panel, .report-grid-panel) .report-page-size-form {
    width: auto;
    justify-self: start;
  }

  :is(.invoice-contact-panel, .report-grid-panel) .report-page-size-control {
    width: auto;
    gap: 0;
  }

  :is(.invoice-contact-panel, .report-grid-panel) .report-page-size-control > span {
    display: none;
  }

  :is(.invoice-contact-panel, .report-grid-panel) .report-per-page {
    width: 3.75rem;
    min-width: 3.75rem;
  }

  :is(.invoice-contact-panel, .report-grid-panel) .report-pagination {
    width: 100%;
    max-width: 100%;
    justify-self: stretch;
    justify-content: flex-start;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
  }

  :is(.invoice-contact-panel, .report-grid-panel) .report-pagination::-webkit-scrollbar {
    display: none;
  }

  :is(.invoice-contact-panel, .report-grid-panel) .report-pagination .btn {
    min-width: 1.75rem;
    min-height: 2rem;
    height: 2rem;
    padding-inline: 0.35rem;
  }

  :is(.invoice-contact-panel, .report-grid-panel) .report-page-status {
    justify-self: end;
    font-size: 0.72rem;
    text-align: right;
    white-space: nowrap;
  }

  .invoice-contact-modal-box {
    width: calc(100vw - 0.5rem);
    max-height: calc(100dvh - 0.5rem);
  }

  .invoice-contact-form {
    padding: 0.75rem;
  }

  .invoice-delivery-address-modal-box {
    width: calc(100vw - 0.5rem);
    height: calc(100dvh - 0.5rem);
    max-height: calc(100dvh - 0.5rem);
  }

  .invoice-delivery-address-form {
    padding: 0.75rem;
  }

  .invoice-delivery-address-label-field,
  .invoice-delivery-address-default-field,
  .invoice-delivery-address-form-grid > .fieldset:not(
    .invoice-delivery-address-street-field,
    .invoice-delivery-address-building-field,
    .invoice-delivery-address-detail-field,
    .invoice-delivery-address-postal-field,
    .invoice-delivery-address-city-field,
    .invoice-delivery-address-country-field,
    .invoice-delivery-address-instructions-field
  ) {
    grid-column: 1 / -1;
  }

  .invoice-delivery-address-street-field {
    grid-column: 1 / 4;
  }

  .invoice-delivery-address-building-field {
    grid-column: 4 / 5;
  }

  .invoice-delivery-address-postal-field {
    grid-column: 1 / 2;
  }

  .invoice-delivery-address-city-field {
    grid-column: 2 / 4;
  }

  .invoice-delivery-address-country-field {
    grid-column: 4 / 5;
  }

  .invoice-delivery-address-footer {
    padding: 0.75rem;
  }

  .invoice-delivery-address-footer .btn {
    min-width: 0;
  }

  .invoice-contact-main-grid,
  .invoice-contact-address-grid,
  .invoice-contact-channel-grid,
  .invoice-contact-role-options,
  .invoice-contact-vat-meta {
    grid-template-columns: 1fr;
  }

  .invoice-contact-name-field,
  .invoice-contact-legal-form-field,
  .invoice-contact-type-field,
  .invoice-contact-role-field,
  .invoice-contact-street-field,
  .invoice-contact-country-field,
  .invoice-contact-person-field {
    grid-column: auto;
  }

  .invoice-contact-identity-layout,
  .invoice-contact-form.is-private-person .invoice-contact-identity-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .invoice-contact-subject-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.8rem;
  }

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

  .invoice-contact-street-field {
    grid-column: 1 / 4;
    grid-row: 1;
  }

  .invoice-contact-building-field {
    grid-column: 4 / 5;
    grid-row: 1;
  }

  .invoice-contact-postal-field {
    grid-column: 1 / 2;
    grid-row: 2;
  }

  .invoice-contact-city-field {
    grid-column: 2 / 4;
    grid-row: 2;
  }

  .invoice-contact-country-field {
    grid-column: 4 / 5;
    grid-row: 2;
  }

  .invoice-contact-detail-split {
    grid-template-columns: 1fr;
  }

  .invoice-detail-modal-box {
    width: calc(100vw - 0.5rem);
    max-height: calc(100dvh - 0.5rem);
  }

  .invoice-detail-form {
    max-height: calc(100dvh - 9rem);
    padding: 0.75rem;
  }

  .invoice-preview-modal-box {
    width: calc(100vw - 0.5rem);
    height: calc(100dvh - 0.5rem);
    max-height: calc(100dvh - 0.5rem);
  }

  .invoice-design-modal-box {
    width: calc(100vw - 0.5rem);
    height: calc(100dvh - 0.5rem);
    max-height: calc(100dvh - 0.5rem);
  }

  .invoice-design-workspace {
    height: calc(100% - 4.5rem);
  }

  .invoice-template-cards,
  .invoice-design-assets {
    grid-template-columns: 1fr;
  }

  .invoice-document-actions,
  .invoice-preview-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .invoice-template-control,
  .invoice-template-status {
    grid-column: 1 / -1;
  }

  .invoice-preview-actions .btn,
  .invoice-document-actions .btn {
    width: 100%;
  }

  .invoice-preview-kind-switch {
    grid-column: 1 / -1;
  }

  .invoice-preview-kind-switch .btn {
    width: auto;
    flex: 1 1 0;
  }

  .invoice-main-grid,
  .invoice-settings-grid,
  .invoice-payment-grid,
  .invoice-additional-grid,
  .invoice-graphic-grid {
    grid-template-columns: 1fr;
  }

  .invoice-payment-modal-box,
  .invoice-payment-remove-modal-box {
    width: calc(100vw - 0.5rem);
    max-height: calc(100dvh - 0.5rem);
  }

  .invoice-payment-form {
    padding: 0.75rem;
  }

  .invoice-payment-form-grid {
    grid-template-columns: 1fr;
  }

  .invoice-payment-full-control,
  .invoice-payment-form-grid > * {
    grid-column: 1;
  }

  .invoice-payment-remove-summary {
    grid-template-columns: 1fr;
  }

  .invoice-counterparty-field {
    grid-column: auto;
  }

  .invoice-detail-section-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .invoice-payment-section-heading {
    align-items: center;
    flex-direction: row;
    gap: 0.5rem;
  }

  .invoice-payment-section-heading > div {
    min-width: 0;
  }

  .invoice-payment-section-heading .btn {
    width: auto;
  }

  .invoice-summary-heading {
    align-items: center;
    flex-direction: row;
  }

  .invoice-summary-heading > :first-child {
    min-width: 0;
  }

  .invoice-items-section-heading .invoice-discounts-toolbar {
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-left: 0;
  }

  .invoice-items-section-heading .invoice-discounts-switch {
    margin-left: auto;
  }

  .invoice-document-discount-editor {
    width: 100%;
  }

  .calendar-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .calendar-view-switch {
    display: flex;
  }

  .calendar-view-switch .btn {
    width: auto;
  }

  .month-overview {
    align-items: stretch;
    flex-direction: column;
    padding: 0.75rem;
  }

  .month-nav {
    width: 100%;
  }

  .month-nav .btn {
    flex: 1 1 0;
  }

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

  .summary-stats .stat {
    padding: 0.75rem;
  }

  .summary-stats .stat-value {
    font-size: 1.45rem;
  }

  .summary-stats .stat + .stat {
    border-left: 0;
  }

  .summary-stats .stat:nth-child(even) {
    border-left: var(--summary-stats-line);
  }

  .summary-stats .stat:nth-child(n + 3) {
    border-top: var(--summary-stats-line);
  }

  .calendar-panel {
    min-height: 0;
  }

  .calendar-view-month .calendar-scroll .calendar-weekdays,
  .calendar-view-month .calendar-scroll .calendar-grid,
  .calendar-view-week .calendar-scroll .calendar-weekdays,
  .calendar-view-week .calendar-scroll .calendar-grid {
    min-width: 38rem;
  }

  .calendar-weekday {
    min-height: 2rem;
  }

  .calendar-day {
    min-height: 4.75rem;
    gap: 0.35rem;
    padding: 0.45rem;
  }

  .calendar-view-agenda .calendar-day {
    grid-template-columns: 1fr;
    padding: 0.75rem;
  }

  .calendar-view-agenda .calendar-day .day-title,
  .calendar-view-agenda .calendar-day > :not(.day-title) {
    grid-column: 1;
    grid-row: auto;
  }

  .holiday-admin-day {
    min-height: 5.25rem;
  }

  .holiday-toggle-grid,
  .holiday-scope-grid,
  .holiday-target-user-grid {
    grid-template-columns: 1fr;
  }

  .holiday-target-heading,
  .holiday-target-group-title {
    align-items: stretch;
    flex-direction: column;
  }

  .holiday-target-group-actions {
    flex-wrap: wrap;
  }

  .vacation-plan-grid {
    --vacation-user-column-size: min(68vw, 16rem);
    grid-template-columns: var(--vacation-user-column-size) repeat(var(--vacation-days), var(--vacation-day-size));
  }

  .vacation-user-header,
  .vacation-user-cell {
    width: var(--vacation-user-column-size);
    min-width: var(--vacation-user-column-size);
    max-width: var(--vacation-user-column-size);
    padding-inline: 0.45rem;
  }

  .vacation-user-meta,
  .vacation-user-name,
  .vacation-user-name-core {
    max-width: 100%;
    overflow: hidden;
  }

  .vacation-user-name-extra {
    display: inline-block;
    max-width: var(--vacation-user-extra-width);
    overflow: hidden;
    opacity: var(--vacation-user-detail-opacity);
    vertical-align: bottom;
  }

  .vacation-user-position {
    max-width: 100%;
    max-height: var(--vacation-user-position-height);
    opacity: var(--vacation-user-detail-opacity);
  }

  .vacation-plan-grid.is-user-column-compact .vacation-user-name-extra,
  .vacation-plan-grid.is-user-column-compact .vacation-user-position {
    display: none;
  }

  .vacation-modal-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .vacation-modal-action-group {
    width: 100%;
  }

  .report-filter-row,
  .report-sort-row,
  .report-two-column-options,
  .report-chart-options,
  .report-export-grid,
  .report-filter-card,
  .admin-form-grid,
  .admin-read-grid {
    grid-template-columns: 1fr;
  }

  .report-settings-modal {
    width: calc(100vw - 1rem);
    height: calc(100dvh - 1rem);
    max-height: calc(100dvh - 1rem);
    padding: 0;
  }

  .report-groups-modal {
    height: calc(100dvh - 1rem);
  }

  .report-settings-modal-body {
    padding: 0.75rem;
  }

  .report-settings-modal-footer .invoice-detail-footer-actions {
    margin-left: auto;
  }

  .report-groups-layout {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }

  .report-groups-column {
    min-height: 18rem;
  }

  .report-groups-chart-options {
    grid-template-columns: minmax(0, 1fr) 7rem;
  }

  .report-groups-chart-options .report-chart-type-options {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .report-groups-chart-options .report-chart-type-options::-webkit-scrollbar {
    display: none;
  }

  .report-groups-chart-options .report-chart-type-option {
    flex: 0 0 7.6rem;
  }

  .report-column-panel {
    grid-template-rows: auto minmax(12rem, 26vh);
  }

  .report-chart-heading-actions,
  .report-chart-type-switch {
    justify-content: flex-start;
  }

  .report-chart-type-switch .btn {
    flex: 1 1 8rem;
  }

  .report-data-panel {
    padding: 0.75rem;
  }

  .vacation-plan-panel {
    padding: 0.75rem;
  }

  .day-number {
    font-size: 0.9rem;
  }
}

@media (max-width: 520px) {
  .entry-work-time-grid,
  .entry-multi-day-grid {
    grid-template-columns: 1fr;
  }

  .day-modal-heading {
    gap: 0.55rem;
    padding: 0.75rem;
  }

  .day-entry-modal-content {
    padding: 0.75rem;
  }

  .day-working-switch {
    gap: 0.4rem;
    font-size: 0.72rem;
  }

  .schedule-modal-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .schedule-week-total {
    min-width: 0;
  }
}

@media (max-width: 1023px) {
  .app-navbar {
    min-height: var(--app-toolbar-height, 4.5rem);
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    padding: 0.55rem 1rem;
    scroll-behavior: smooth;
    scrollbar-width: none;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .app-navbar::-webkit-scrollbar {
    display: none;
  }

  .app-navbar .nav-third,
  .app-navbar .nav-third-left,
  .app-navbar .nav-third-center {
    width: max-content;
    flex: 0 0 auto;
    display: flex;
  }

  .app-navbar .nav-third-center > div {
    display: flex !important;
    flex-wrap: nowrap;
  }

  .app-navbar .app-toolbar-flow {
    --app-toolbar-zone-gap: 0.75rem;
    min-width: max-content;
    width: max-content;
    justify-content: flex-start;
  }

  .app-navbar .app-toolbar-spacer {
    min-width: var(--app-toolbar-zone-gap);
    flex: 0 0 var(--app-toolbar-zone-gap);
  }

  .app-navbar.has-main-toolbar-right:has(.attendance-toolbar-flow) .nav-third-center {
    width: max-content;
    flex: 0 0 auto;
  }

  .app-navbar .nav-third-right {
    display: none !important;
  }

  .mobile-menu-dock {
    align-items: center;
    justify-content: center;
  }

  /* The hamburger on the right (owner 28. 10. 2026): its dock ends the toolbar and the tab bar, the tools and the
     tabs start on the left. The dock has no ground or line of its own – the colour of its bar (owner 28. 10. 2026,
     first in Přehled, then in every skin). Only on a phone: from 768 px the menu stays beside the content and the
     hamburger had nothing to open (owner 28. 10. 2026), the dock is shown in the phone block. */
  .mobile-menu-dock-toolbar {
    position: sticky;
    right: 0;
    left: auto;
    z-index: 5;
    order: 999;
    align-self: stretch;
    flex: 0 0 auto;
    margin-right: 0;
    margin-left: auto;
    border: 0;
    background: inherit;
    padding-right: 0;
    padding-left: 0.35rem;
  }

  /* A full toolbar is as wide as the bar and its tools overflow it; the box grows with them, so the dock after it
     stays at the end of the scrolled bar (otherwise it scrolled away with the box). */
  body.app-shell:not(.application-embedded) .app-navbar.has-main-toolbar-full > .app-navbar-toolbar {
    min-width: max-content;
  }

  .mobile-menu-trigger {
    position: static;
    flex: 0 0 auto;
  }

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

  .application-tab-scroll {
    display: none;
  }

  .mobile-menu-dock-tabs {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    z-index: 5;
    width: 3.9rem;
    border: 0;
    background: inherit;
    box-shadow: inherit;
  }

  .application-tabs-ready:not(.application-embedded) .app-navbar {
    display: none !important;
  }

  .application-embedded .app-navbar {
    position: fixed;
    top: var(--application-tabs-height);
    right: 0;
    left: 0;
    z-index: 30;
    padding-right: 1rem;
    padding-left: 1rem;
  }

  .application-embedded .mobile-menu-dock-toolbar,
  .application-embedded .mobile-menu-trigger {
    display: none !important;
  }

  .application-embedded .app-navbar.has-main-toolbar-full .nav-third-left,
  .application-embedded .app-navbar.has-main-toolbar-full .nav-third-center {
    display: none !important;
  }

  .app-navbar-toolbar,
  .app-navbar .calendar-toolbar,
  .app-navbar .report-toolbar {
    width: max-content;
    flex: 0 0 auto;
  }

  .app-navbar .calendar-toolbar {
    min-height: 2.75rem;
    align-items: center;
    flex-direction: row;
    justify-content: center;
    gap: 0.75rem;
    border: 0;
    padding: 0;
  }

  .app-navbar .calendar-view-switch {
    width: max-content;
    display: flex !important;
    flex-wrap: nowrap;
  }

  .app-navbar .calendar-view-switch .btn {
    width: auto;
    flex: 0 0 auto;
  }

  .app-navbar .report-toolbar {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0;
  }

  .app-navbar .report-toolbar-form {
    width: 15rem;
    flex: 0 0 15rem;
    display: block;
  }

  .app-navbar .invoice-contact-toolbar .report-toolbar-form {
    width: 15rem;
    flex-basis: 15rem;
  }

  .app-navbar .invoice-contact-toolbar .invoice-contact-filter-reset span {
    display: none;
  }

  .app-navbar .report-view-switch,
  .app-navbar .report-config-actions {
    width: auto;
    display: flex;
    grid-template-columns: none;
  }

  .app-navbar .report-view-switch .btn,
  .app-navbar .report-config-actions .btn {
    width: auto;
    white-space: nowrap;
  }

}

@media (max-width: 639px) {
  body {
    --application-main-bottom-gap: 0.625rem;
  }
}

@media (max-width: 1023px) {
  .app-navbar .admin-report-toolbar {
    flex-wrap: nowrap;
  }

  .app-navbar .admin-report-toolbar .admin-grid-filters {
    width: max-content;
    flex: 0 0 auto;
  }

  .app-navbar .admin-report-toolbar .admin-grid-filters > .select {
    width: 10.5rem;
    min-width: 10.5rem;
    flex: 0 0 10.5rem;
  }

  .app-navbar .admin-report-toolbar > .btn {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .admin-grid-footer .report-page-size-control {
    width: max-content;
    justify-content: flex-start;
    gap: 0.55rem;
  }

  .admin-grid-footer .report-per-page {
    width: 5.25rem;
    min-width: 5.25rem;
    flex: 0 0 5.25rem;
  }

  .admin-grid-footer .report-pagination {
    width: max-content;
    justify-self: center;
    justify-content: center;
  }
}

@media (max-width: 700px) {
  .report-table-footer.admin-grid-footer {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }

  .admin-grid-footer .report-page-size-control {
    gap: 0;
  }

  .admin-grid-footer .report-per-page {
    width: 3.75rem;
    min-width: 3.75rem;
    flex-basis: 3.75rem;
  }

  .admin-grid-footer .report-pagination {
    width: max-content;
    max-width: none;
    justify-self: center;
    justify-content: center;
  }

  .admin-grid-table {
    min-width: 50rem;
  }

  .admin-grid-table td,
  .admin-grid-table thead th {
    padding-inline: 0.7rem;
  }

  .admin-grid-subject {
    max-width: 16rem;
  }

  .admin-entity-modal-box,
  [data-admin-user-detail-modal] > .insurance-service-detail-modal-box {
    width: calc(100vw - 0.5rem);
    height: calc(100dvh - 0.5rem);
    max-height: calc(100dvh - 0.5rem);
  }

  .admin-entity-modal-box .insurance-service-detail-form,
  [data-admin-user-detail-modal] .insurance-service-detail-form {
    padding: 0.75rem;
  }

  .admin-entity-modal-box .insurance-service-detail-toolbar,
  [data-admin-user-detail-modal] .insurance-service-detail-toolbar {
    padding: 0.75rem;
  }

  .admin-entity-modal-box .insurance-service-detail-footer,
  [data-admin-user-detail-modal] .insurance-service-detail-footer {
    flex-wrap: wrap;
    padding: 0.75rem;
  }

  .admin-entity-modal-box .insurance-service-detail-footer > .mr-auto,
  [data-admin-user-detail-modal] .insurance-service-detail-footer > .mr-auto {
    min-width: 0;
    flex: 1 1 auto;
  }

  .invoice-design-asset-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .invoice-design-asset-heading-actions {
    justify-content: space-between;
    width: 100%;
  }

  .invoice-design-asset-choice-grid {
    display: flex;
    overflow-x: auto;
    padding: 0.15rem 0.15rem 0.45rem;
    scroll-snap-type: x proximity;
  }

  .invoice-design-asset-choice {
    flex: 0 0 8rem;
    scroll-snap-align: start;
  }

  .invoice-asset-library-modal-box,
  .invoice-asset-editor-modal-box {
    width: calc(100vw - 0.5rem);
    height: calc(100dvh - 0.5rem);
    max-height: calc(100dvh - 0.5rem);
  }

  .invoice-asset-library-modal-box > .invoice-design-modal-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    overflow: visible;
  }

  .invoice-asset-library-modal-box > .invoice-design-modal-toolbar > .min-w-0 {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    flex-basis: auto;
  }

  .invoice-asset-library-modal-box > .invoice-design-modal-toolbar > .modal-toolbar-close {
    position: static;
    grid-column: 2;
    grid-row: 1;
    align-self: center;
  }

  .invoice-asset-library-modal-box > .invoice-design-modal-toolbar > .invoice-preview-actions {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: flex-start;
    width: 100%;
    margin-left: 0;
    overflow-x: auto;
    padding-top: 0.5rem;
  }

  .invoice-asset-library-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
  }

  .invoice-asset-library-card {
    grid-template-rows: 6rem auto auto;
  }

  .invoice-asset-library-card-preview img {
    max-height: 5.25rem;
  }

  .invoice-asset-editor-content {
    grid-template-rows: auto minmax(10rem, 1fr) auto;
    padding: 0.75rem;
  }

  .invoice-asset-editor-content.profile-avatar-editor-content {
    grid-template-rows: minmax(10rem, 1fr) auto;
  }

  .invoice-asset-editor-tools {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 0.25rem;
  }

  .invoice-asset-editor-tools .btn,
  .invoice-asset-editor-background {
    flex: 0 0 auto;
  }

  .invoice-asset-editor-background {
    margin-left: 0.5rem;
  }

  .invoice-asset-editor-footer {
    align-items: flex-start;
    flex-direction: column;
    padding: 0.75rem;
  }

  .invoice-asset-editor-footer > div {
    justify-content: flex-end;
    width: 100%;
  }
}

@media (max-width: 700px) {
  .app-navbar.has-main-toolbar-full .report-toolbar {
    padding-inline: 1rem;
  }
}

/* Bezpečné okraje (env(safe-area-inset-*)) – nulové, dokud stránka nesahá pod lištu a stavový řádek
   (viewport-fit=cover, zatím jen zkouška ?ios_cover=1). Okraj prohlížeče v Safari: blok „Safari na iPhonu“. */
body.app-shell:not(.application-embedded) {
  padding-inline: env(safe-area-inset-left, 0px) env(safe-area-inset-right, 0px);
}

@media (max-width: 767px) {
  /* Kompaktní lišta (owner 26. 10. 2026): 44 px jako navigační lišta iOS, hamburger 44 px v docku
     48 px, taby 36 px. Řádek se značkou v otevřeném menu má výšku lišty, křížek tak zůstává na místě
     hamburgeru. Bez tabů je lištou toolbar aplikace (4.5rem). Bezpečný okraj nahoře (env) je 0, dokud
     stránka nesahá pod stavový řádek (viewport-fit=cover). */
  .has-application-tabs:not(.application-embedded) .app-content,
  .application-embedded {
    --application-tabs-height: calc(2.75rem + env(safe-area-inset-top, 0px));
  }

  body.app-shell:not(.application-embedded) {
    --mobile-menu-bar-height: 4.5rem;
  }

  body.app-shell.has-application-tabs:not(.application-embedded) {
    --mobile-menu-bar-height: 2.75rem;
  }

  /* Leave room for the mobile menu/tabs even when this application has no toolbar (without tabs the
     floating hamburger sits in a 4.5rem bar: Svátky, Plán dovolených, Statistiky, Nastavení klienta). */
  body.without-application-toolbar.app-shell .app-main[data-application-root] {
    padding-top: calc(var(--application-tabs-height, 4.5rem) + var(--application-main-edge-gap, 1rem)) !important;
  }

  body.app-shell:not(.application-embedded) .mobile-menu-trigger-floating {
    width: 2.75rem;
    min-width: 2.75rem;
    height: 2.75rem;
    min-height: 2.75rem;
    top: calc(env(safe-area-inset-top, 0px) + (var(--mobile-menu-bar-height) - 2.75rem) / 2);
    right: calc(env(safe-area-inset-right, 0px) + 0.125rem);
    padding: 0;
  }

  body.app-shell:not(.application-embedded) .app-navbar {
    padding-top: env(safe-area-inset-top, 0px);
    padding-right: 0;
  }

  body.app-shell:not(.application-embedded) .application-tabbar {
    min-height: var(--application-tabs-height);
    height: var(--application-tabs-height);
    padding-top: env(safe-area-inset-top, 0px);
  }

  .mobile-menu-dock-toolbar,
  .mobile-menu-dock-tabs {
    display: flex;
    width: 3rem;
    min-width: 3rem;
    padding-right: 0;
    padding-left: 0;
  }

  /* The room for the dock is kept by the viewport, not the list: a tab style may set the list's own padding (pills). */
  .application-tabs-viewport {
    padding-right: 3.25rem;
  }

  .application-tabs-list {
    padding-right: 0;
    padding-left: 0.45rem;
  }

  .application-tab {
    max-width: 11rem;
    height: 2.25rem;
    gap: 0.4rem;
    padding: 0.4rem 0.35rem 0.4rem 0.6rem;
    font-size: 0.75rem;
  }

  :root .application-tabbar .application-tab {
    --application-tab-pad: 0.6rem;
  }

  .application-tab-close {
    width: 1.25rem;
    height: 1.25rem;
  }

  html[data-tabs="pills"] .application-tabbar .application-tabs-list,
  html[data-tabs="chips"] .application-tabbar .application-tabs-list {
    padding-block: 0.2rem;
  }

  html[data-tabs="pills"] .application-tabbar .application-tab,
  html[data-tabs="chips"] .application-tabbar .application-tab {
    height: 1.9rem;
  }

  html[data-tabs="underline"] .application-tabbar .application-tab {
    height: 2.45rem;
  }

  body.app-shell:not(.application-embedded) > .application-drawer > .drawer-side > .sidebar-shell {
    padding-top: env(safe-area-inset-top, 0px);
  }

  body.app-shell:not(.application-embedded) [data-desktop-sidebar] > [data-sidebar-brand] {
    min-height: var(--mobile-menu-bar-height);
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 2.5rem;
    /* The logo on the line of the menu icons, the partner icon and the avatar (owner 28. 10. 2026). */
    padding-left: 0.625rem;
  }

  .insurance-claim-tabs {
    padding-inline: 0.75rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  .insurance-claim-tabs::-webkit-scrollbar {
    display: none;
  }

  .insurance-claim-tabs .catalog-tab {
    flex: 0 0 auto;
  }

  .insurance-claim-form-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .insurance-claim-field-wide {
    grid-column: auto;
  }

  .insurance-claim-document-card-header {
    align-items: stretch;
    flex-direction: column;
  }

  .insurance-claim-document-viewer-toolbar::-webkit-scrollbar {
    display: none;
  }

  .insurance-claim-document-viewer-toolbar > * {
    flex: 0 0 auto;
  }

  .insurance-claim-document-viewer-box {
    width: calc(100vw - 0.5rem);
    height: calc(100dvh - 0.5rem);
    max-height: calc(100dvh - 0.5rem);
  }

  .insurance-claim-document-viewer-toolbar {
    overflow-x: auto;
    padding-inline: 0.65rem;
    scrollbar-width: none;
  }

  .insurance-claim-document-viewer-stage {
    padding: 0.65rem;
  }
}
.insurance-service-readonly-label {
  display: flex;
  align-items: center;
  overflow: hidden;
  color: color-mix(in oklab, var(--color-base-content) 72%, transparent);
  background: var(--color-base-200);
  cursor: not-allowed;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Stable mobile application viewport
   ----------------------------------
   Full-height workspaces must not follow the software keyboard. The keyboard
   changes the visual viewport on iOS/Android; `svh` deliberately keeps these
   shells at their original height and lets only their inner form scroll. */
@media (max-width: 767px), (pointer: coarse) {
  .application-embedded {
    --embedded-modal-max-height: calc(
      var(--mobile-app-viewport-height)
      - var(--application-tabs-height)
      - var(--embedded-modal-edge-gap)
      - var(--embedded-modal-edge-gap)
    );
  }

  body.app-shell:not(.application-embedded) > .application-drawer > .drawer-side,
  body.app-shell:not(.application-embedded) > .application-drawer > .drawer-side > .sidebar-shell,
  .app-main.vacation-plan-page {
    height: var(--mobile-app-viewport-height) !important;
    min-height: var(--mobile-app-viewport-height) !important;
  }

  .app-main-contained-scroll {
    height: calc(var(--mobile-app-viewport-height) - 4.5rem);
  }

  .has-application-tabs .app-main-contained-scroll {
    height: calc(var(--mobile-app-viewport-height) - 7.55rem);
  }

  dialog.modal > :is(
    .smtp-preview-modal-box,
    .email-template-modal-box,
    .iam-detail-modal-box,
    .iam-invitation-modal-box,
    .invoice-delivery-address-modal-box,
    .invoice-detail-modal-box,
    .invoice-preview-modal-box,
    .invoice-design-modal-box,
    .report-settings-modal,
    .report-groups-modal,
    .admin-entity-modal-box,
    .insurance-service-detail-modal-box,
    .invoice-asset-library-modal-box,
    .invoice-asset-editor-modal-box,
    .insurance-claim-document-viewer-box
  ) {
    height: calc(var(--mobile-app-viewport-height) - 0.5rem) !important;
    max-height: calc(var(--mobile-app-viewport-height) - 0.5rem) !important;
  }

  dialog.modal > :is(
    .invoice-contact-modal-box,
    .invoice-payment-modal-box,
    .invoice-payment-remove-modal-box,
    .invitation-identity-modal-box
  ) {
    max-height: calc(var(--mobile-app-viewport-height) - 0.5rem) !important;
  }

  .invoice-detail-form {
    max-height: calc(var(--mobile-app-viewport-height) - 9rem) !important;
  }
}

/* Telefon: obsah od kraje ke kraji jednou barvou (vlastník 26. 10. 2026; první krok byly gridy, pak „ať je
   to prostě všechno až ke kraji“): obsah začíná hned pod toolbarem (bez toolbaru pod lištou tabů), po
   stranách bez okraje stránky, stránka v barvě karet (base-100). Karty nejvyšší úrovně – panely, kalendář,
   souhrnný pás, upozornění – bez zaoblení, bočního rámečku a stínu a bez mezery mezi sebou; odděluje je
   jejich spodní linka. Dlaždice v mřížce (statistiky katalogu, diagnostika Viva) dělí linky 1px. Vnořené
   prvky a modaly beze změny. Stránka s vlastním posuvem (grid, Nastavení klienta, Viva POS…) sahá až
   k dolnímu okraji – odsazení by jen ořízlo obsah výš; karta gridu bez linky. Výšku toolbaru měří app.js
   (--application-navbar-height). */
@media (max-width: 767px) {
  body {
    --application-main-edge-gap: 0px;
  }

  .app-main[data-application-root] {
    padding-right: 0;
    padding-left: 0;
    background: var(--color-base-100);
  }

  .application-embedded:not(.without-application-toolbar) .app-main[data-application-root] {
    padding-top: calc(var(--application-tabs-height) + var(--application-navbar-height, 4.5rem)) !important;
  }

  .app-main-contained-scroll[data-application-root],
  .client-settings-page {
    padding-bottom: 0;
  }

  .app-main :is(.top-panel, .side-panel, .calendar-panel, .summary-ribbon, .card, .alert):not(:is(.top-panel, .side-panel, .calendar-panel, .summary-ribbon, .card, .alert, .modal, dialog) *) {
    border-width: 0 0 1px;
    border-radius: 0;
    box-shadow: none;
  }

  .app-main .top-panel:is(.report-data-panel, .admin-list-panel, .insurance-bracket-panel, .admin-page-tabs-panel) {
    border-width: 0;
  }

  .app-main:has(> :is(.top-panel, .side-panel, .calendar-panel, .summary-ribbon, .card, .alert)),
  .app-main :has(> :is(.top-panel, .side-panel, .calendar-panel, .summary-ribbon, .card, .alert)):not(:is(.top-panel, .side-panel, .calendar-panel, .summary-ribbon, .card, .alert, .modal, dialog), :is(.top-panel, .side-panel, .calendar-panel, .summary-ribbon, .card, .alert, .modal, dialog) *) {
    gap: 0;
  }

  .app-main :is(.catalog-stat-grid, .viva-pos-diagnostics) {
    gap: 1px;
    border-bottom: 1px solid var(--color-base-300);
    background: var(--color-base-300);
  }

  .app-main :is(.catalog-stat, .viva-pos-diagnostic) {
    border-width: 0;
    border-radius: 0;
  }

  /* Statistiky pojištění mají vlastní vzhled (care-statistics.css, načtený až po app.css – proto .app-main). */
  .app-main .care-stats {
    border-radius: 0;
    background: var(--card);
  }

  .app-main .care-stats .stat-main {
    margin: 0;
    padding: 0;
  }

  .app-main .care-stats :is(.panel, .kpis, .cs-card) {
    margin: 0;
    border-width: 0 0 1px;
    border-radius: 0;
    box-shadow: none;
  }

  .app-main .care-stats .cs-grid {
    gap: 0;
  }
}

/* ==========================================================================================
   Safari na iPhonu – okraj prohlížeče (vlastník 26. 10. 2026, ověřeno jen na iPhonu)
   ------------------------------------------------------------------------------------------
   Pravidlo jen pro iPhone: @supports (-webkit-touch-callout: none) (vlastnost má jen iOS) + šířka
   telefonu; app.js initializeBrowserChromeColor běží jen tam (CSS.supports se stejnou podmínkou).
   Jiná zařízení zatím testovaná nejsou a zůstávají u původního chování. Vrácení: smazat tento blok
   a v app.js podmínku initializeBrowserChromeColor (docs/ui-design-and-qa.md, „Safari na iPhonu“).

   Jak WebKit barví okraj (LocalFrameView::fixedContainerEdges, Page::updateFixedContainerEdges):
   u horní i dolní hrany vzorkuje bod uprostřed 4 px od okraje a hledá nejbližšího předka fixed/sticky.
   Prvek přes celou šířku s pozadím (vyšší než 10 px) dá svou barvu, přepočet při překreslení pevné
   vrstvy; prvek přes celou obrazovku (menu, modal) bere jako vrstvu přes stránku a drží dřívější barvu
   (preferExistingColor); dříve nalezený prvek drží, dokud je viditelný. Bez pevného prvku ukáže živé
   pozadí stránky (html + body). theme-color Safari 26 ignoruje.
   ========================================================================================== */
@supports (-webkit-touch-callout: none) {
  /* Pozadí stránky shellu s taby = dole za lištou Safari: base-100 – v Klasickém barva stránky, v Přehledu
     barva lišty a karet (stránka --sk-bg je tam tmavší; vlastník 26. 10. 2026 zvolil lištu); vzhled může
     dát vlastní --app-chrome-page. S otevřeným menu barva lišty (menu ji má také). S modalem aplikace se
     nemění – pruh dole zůstává jako bez modalu (vlastník 26. 10. 2026). */
  html:has(> body.app-shell.has-application-tabs:not(.application-embedded)) {
    --app-chrome-edge: var(--app-chrome-page, var(--color-base-100));
  }

  html:has(> body.app-shell.has-application-tabs:not(.application-embedded) #app-drawer:checked) {
    --app-chrome-edge: var(--app-chrome-top, var(--color-base-200));
  }

  @media (max-width: 767px) {
    html:has(> body.app-shell.has-application-tabs:not(.application-embedded)) {
      --root-bg: var(--app-chrome-edge);
    }

    body.app-shell.has-application-tabs:not(.application-embedded) {
      background: var(--app-chrome-edge);
    }

    /* Nahoře barvu nese pevná lišta tabů, i pod otevřeným menu (menu má její barvu). Skrytá lišta pod
       menu (do 29. 10. 2026) na iPhonu zmizela dřív, než menu doběhlo, a problikl horní pruh aplikace. */
    body.app-shell.has-application-tabs:not(.application-embedded) .application-tabbar {
      position: fixed;
    }

    /* Menu není fixed (WebKit by si jako vrstva přes obrazovku držel starou barvu) – absolute na stejném
       místě, shell se neposouvá. Zavřené je display: none (skryté pevné prvky WebKit vzorkuje); prolnutí
       zůstává (allow-discrete, @starting-style), posun menu drží app.js. Menu má barvu lišty, bez
       tmavého overlaye. */
    body.app-shell.has-application-tabs:not(.application-embedded) > .application-drawer > .drawer-side {
      position: absolute;
      display: none;
      transition: opacity 0.16s ease, visibility 0s linear 0.16s, display 0.16s allow-discrete;
    }

    body.app-shell.has-application-tabs:not(.application-embedded) > .application-drawer > #app-drawer:checked ~ .drawer-side {
      display: grid;
      transition: opacity 0.16s ease, display 0s allow-discrete;
    }

    @starting-style {
      body.app-shell.has-application-tabs:not(.application-embedded) > .application-drawer > #app-drawer:checked ~ .drawer-side {
        opacity: 0;
      }
    }

    body.app-shell.has-application-tabs:not(.application-embedded) > .application-drawer > .drawer-side > .drawer-overlay {
      display: none;
    }

    body.app-shell.has-application-tabs:not(.application-embedded) > .application-drawer > .drawer-side > .sidebar-shell {
      background: var(--app-chrome-top, var(--color-base-200));
    }

    /* Bez zámku DaisyUI pod otevřeným menu (přechod barvy kořene 0,3 s, animation-timeline: scroll(),
       ztmavení) – s ním Safari novou barvu po přepnutí režimu nezachytil. Modal ho dál zapne. */
    html:has(> body.app-shell.has-application-tabs:not(.application-embedded) #app-drawer:checked):not(:has(.modal-open, .modal[open], .modal:target, .modal-toggle:checked)) {
      --page-scroll-lock: initial;
    }
  }
}

/* Identity and access management */
.iam-admin-page {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 1rem;
  overflow: hidden;
}

.iam-toolbar {
  align-items: center;
  gap: .75rem;
}

.iam-toolbar-context {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: .5rem;
  color: color-mix(in oklab, var(--color-base-content) 65%, transparent);
  font-size: .875rem;
  margin-inline-end: auto;
}

.iam-summary-panel {
  padding: 0;
  overflow: hidden;
}

.iam-summary-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem .75rem;
}

.iam-summary-heading > div {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: .75rem;
}

.iam-summary-heading h2 {
  font-size: 1.05rem;
  font-weight: 700;
}

.iam-summary-heading p {
  color: color-mix(in oklab, var(--color-base-content) 58%, transparent);
  font-size: .82rem;
}

.iam-summary-icon {
  display: inline-flex;
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-field);
}

.iam-subsystems-form {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex: 1 1 auto;
}

.iam-subsystems-panel {
  width: 100%;
  padding: 1rem 1.25rem 1.25rem;
  overflow: auto;
}

.iam-subsystems-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.iam-subsystems-heading > div,
.iam-permission-subsystem-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: .75rem;
}

.iam-subsystems-heading h2 {
  font-size: 1.05rem;
  font-weight: 700;
}

.iam-subsystems-heading p,
.iam-permission-subsystem-heading small {
  color: color-mix(in oklab, var(--color-base-content) 58%, transparent);
  font-size: .8rem;
}

.iam-subsystem-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.iam-subsystem-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .85rem;
  min-height: 8.5rem;
  padding: 1rem;
  cursor: pointer;
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-box);
  background: var(--color-base-100);
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}

.iam-subsystem-card:hover {
  border-color: color-mix(in oklab, var(--color-primary) 48%, var(--color-base-300));
}

.iam-subsystem-card:has(input:checked) {
  border-color: var(--color-primary);
  background: color-mix(in oklab, var(--color-primary) 5%, var(--color-base-100));
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--color-primary) 22%, transparent);
}

.iam-subsystem-card > .toggle {
  position: absolute;
  inset-block-start: .8rem;
  inset-inline-end: .8rem;
}

.iam-subsystem-card-icon {
  display: inline-flex;
  width: 2.55rem;
  height: 2.55rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-field);
}

.iam-subsystem-card-copy,
.iam-permission-subsystem-heading > div {
  display: grid;
  min-width: 0;
  gap: .2rem;
}

.iam-subsystem-card-copy strong {
  font-size: 1rem;
}

.iam-subsystem-card-copy small {
  color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
  font-size: .78rem;
  line-height: 1.4;
}

.iam-subsystem-card-state {
  align-self: end;
  grid-column: 2 / -1;
  color: color-mix(in oklab, var(--color-base-content) 52%, transparent);
  font-size: .75rem;
}

.iam-subsystem-card:has(input:checked) .iam-subsystem-off,
.iam-subsystem-card:not(:has(input:checked)) .iam-subsystem-on {
  display: none;
}

.iam-subsystem-card:has(input:checked) .iam-subsystem-on {
  color: var(--color-success);
  font-weight: 700;
}

.iam-subsystem-note {
  margin-top: 1rem;
}

.organization-license-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

.organization-license-grid [data-license-history] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
}

.organization-license-grid [data-license-history] > * {
  min-width: 0;
}

.organization-license-entry {
  background: color-mix(in srgb, var(--color-base-200) 55%, var(--color-base-100));
}

.organization-license-results {
  max-height: 11rem;
}

@media (max-width: 40rem) {
  .organization-license-grid [data-license-history] {
    grid-template-columns: 1fr;
  }
}

/* Shared page tabs: never shrink with the grid, and counters must not change
   the height. Modal tabs retain their original compact catalog styling. */
.catalog-modal-tabs.admin-page-tabs {
  flex: 0 0 auto;
  overflow-x: auto;
  overflow-y: hidden;
  padding-inline: 1rem;
  scrollbar-width: none;
}

.admin-page-tabs .catalog-tab {
  flex: 0 0 auto;
  min-height: 3rem;
  white-space: nowrap;
}

.iam-admin-page .admin-management-grid {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  overflow: hidden;
}

.iam-admin-page .admin-grid-card {
  display: flex;
  min-height: 0;
  width: 100%;
  flex: 1 1 auto;
  flex-direction: column;
}

.iam-admin-page .admin-grid-table-wrap {
  min-height: 0;
  flex: 1 1 auto;
  max-height: none;
  overflow: auto;
  overscroll-behavior: contain;
}

.iam-grid-table .admin-grid-name small {
  max-width: 28rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.iam-role-modal-box,
.iam-group-modal-box,
.iam-member-modal-box {
  width: min(76rem, calc(100vw - 2rem));
  max-width: 76rem;
}

.iam-invitation-modal-box {
  width: min(46rem, calc(100vw - 2rem));
  max-width: 46rem;
}

.iam-permission-matrix {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.iam-permission-subsystem {
  grid-column: 1 / -1;
  overflow: hidden;
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-box);
  background: color-mix(in oklab, var(--color-base-200) 35%, var(--color-base-100));
}

.iam-permission-subsystem-heading {
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--color-base-300);
}

.iam-permission-subsystem-heading > .badge {
  margin-inline-start: auto;
}

.iam-permission-subsystem-modules {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  padding: 1rem;
}

.iam-permission-module {
  overflow: hidden;
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-box);
  background: var(--color-base-100);
}

.iam-permission-module-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .75rem 1rem;
  background: var(--color-base-200);
}

.iam-permission-module-heading span {
  color: color-mix(in oklab, var(--color-base-content) 52%, transparent);
  font-size: .75rem;
}

.iam-permission-list,
.iam-choice-list {
  display: grid;
  max-height: 25rem;
  overflow: auto;
}

.iam-permission-option,
.iam-choice-row {
  display: flex;
  cursor: pointer;
  align-items: flex-start;
  gap: .75rem;
  padding: .75rem 1rem;
  border-top: 1px solid color-mix(in oklab, var(--color-base-300) 70%, transparent);
}

.iam-permission-option:hover,
.iam-choice-row:hover {
  background: color-mix(in oklab, var(--color-primary) 7%, var(--color-base-100));
}

.iam-permission-option > span,
.iam-choice-row > span,
.iam-connection-card > div {
  display: grid;
  min-width: 0;
  gap: .125rem;
}

.iam-permission-option small,
.iam-choice-row small,
.iam-connection-card small {
  color: color-mix(in oklab, var(--color-base-content) 58%, transparent);
  font-size: .78rem;
}

.iam-permission-option code {
  color: color-mix(in oklab, var(--color-base-content) 45%, transparent);
  font-size: .7rem;
}

.iam-group-columns,
.iam-role-choice-grid,
.iam-idm-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

/* Bez SSO (sso_available) zůstává jen provisioning – přes celou šířku. */
.iam-idm-layout > :only-child {
  grid-column: 1 / -1;
}

.iam-choice-list {
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-box);
}

.iam-choice-row:first-child {
  border-top: 0;
}

.iam-empty-state {
  display: grid;
  place-items: center;
  gap: .5rem;
  min-height: 12rem;
  color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
  text-align: center;
}

.iam-empty-state > i {
  color: var(--color-primary);
  font-size: 2rem;
}

.iam-connection-card {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem;
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-box);
}

.iam-connection-card .badge {
  margin-inline-start: auto;
}

.iam-overrides-section > summary {
  list-style: none;
}

.iam-overrides-section > summary::-webkit-details-marker {
  display: none;
}

.iam-overrides-section[open] > summary > .fa-chevron-down {
  transform: rotate(180deg);
}

.iam-override-matrix {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.iam-override-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .65rem .75rem;
  border-top: 1px solid color-mix(in oklab, var(--color-base-300) 70%, transparent);
}

.iam-override-row > span {
  display: grid;
  min-width: 0;
}

.iam-override-row small {
  color: color-mix(in oklab, var(--color-base-content) 48%, transparent);
  font-size: .68rem;
}

/* Exceptions: the standard segmented control (radios as join buttons); a chosen allow / deny in its colour in every look
   (the selector outweighs the segmented look of Přehled). */
.iam-override-options {
  flex: none;
}

.iam-override-options .btn {
  white-space: nowrap;
}

html .join.iam-override-options:has(> .btn.join-item) > input.btn.join-item[value="allow"]:checked {
  --btn-color: var(--color-success);
  --btn-fg: var(--color-success-content);
  border-color: var(--color-success);
  background: var(--color-success);
  color: var(--color-success-content);
}

html .join.iam-override-options:has(> .btn.join-item) > input.btn.join-item[value="deny"]:checked {
  --btn-color: var(--color-error);
  --btn-fg: var(--color-error-content);
  border-color: var(--color-error);
  background: var(--color-error);
  color: var(--color-error-content);
}

.iam-department-role-form .dropdown-content {
  max-height: min(30rem, 70vh);
  overflow: auto;
}

@media (max-width: 767px) {
  .iam-toolbar {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
  }
  .iam-toolbar-context {
    display: none;
  }
  .iam-summary-heading {
    align-items: flex-start;
  }
  .iam-summary-heading > .badge {
    display: none;
  }
  .iam-permission-matrix,
  .iam-override-matrix,
  .iam-group-columns,
  .iam-role-choice-grid,
  .iam-idm-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .iam-subsystem-grid,
  .iam-permission-subsystem-modules {
    grid-template-columns: minmax(0, 1fr);
  }
  .iam-subsystems-heading {
    align-items: flex-start;
  }
  .iam-subsystems-heading > .badge {
    display: none;
  }
  .iam-role-modal-box,
  .iam-group-modal-box,
  .iam-member-modal-box,
  .iam-invitation-modal-box {
    width: 100vw;
    max-width: 100vw;
  }
}

/* Keep the shared address-book modal dimensions after the legacy IAM rules. */
.iam-role-modal-box.iam-detail-modal-box,
.iam-group-modal-box.iam-detail-modal-box,
.iam-member-modal-box.iam-detail-modal-box {
  width: min(97vw, 92rem);
  max-width: 92rem;
}

.iam-invitation-modal-box.iam-detail-modal-box {
  width: min(97vw, 58rem);
  max-width: 58rem;
}

.admin-page-tabs-panel {
  flex: 0 0 auto;
  padding: 0;
  overflow: hidden;
  /* Flat navigation: the generic top-panel shadow must not bleed into the grid. */
  box-shadow: none;
}

.iam-tab-panel:not([hidden]) {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

.iam-tab-panel > .admin-management-grid,
.iam-tab-panel > .iam-idm-layout {
  min-width: 0;
  width: 100%;
}

.iam-tab-panel[data-iam-panel="idm"] {
  overflow: auto;
  overscroll-behavior: contain;
}

.iam-admin-page .hidden,
[data-iam-modal] .hidden {
  display: none !important;
}

.iam-detail-footer {
  justify-content: flex-end;
}

.iam-detail-footer > .invoice-detail-footer-actions {
  margin-right: 0;
  margin-left: auto;
}

@media (max-width: 767px) {
  .iam-role-modal-box.iam-detail-modal-box,
  .iam-group-modal-box.iam-detail-modal-box,
  .iam-member-modal-box.iam-detail-modal-box,
  .iam-invitation-modal-box.iam-detail-modal-box {
    width: calc(100vw - 0.5rem);
    max-width: calc(100vw - 0.5rem);
  }

  .iam-detail-footer {
    justify-content: flex-end;
  }

  .iam-detail-footer > .invoice-detail-footer-actions {
    margin-left: auto;
  }
}

/* Canonical grid footer alignment.
   Equal flexible edge columns keep pagination on the geometric centre of the
   whole grid, regardless of the different widths of the page-size control and
   the range label. Infinite-scroll/status-only footers remain untouched. */
.report-table-footer:has(> .report-pagination) {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
}

.report-table-footer:has(> .report-pagination) > :is(.report-page-size-form, .report-page-size-control) {
  grid-column: 1;
  justify-self: start;
}

.report-table-footer:has(> .report-pagination) > .report-pagination {
  width: max-content;
  max-width: 100%;
  grid-column: 2;
  justify-self: center;
  justify-content: center;
}

.report-table-footer:has(> .report-pagination) > .report-page-status {
  grid-column: 3;
  justify-self: end;
  text-align: right;
}
/* Canonical tenant / subject administration. */
.organization-model-page,
.people-admin-page {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  gap: 1rem;
  min-height: 0;
}

.organization-tabs-shell {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.organization-panel {
  min-height: 0;
  flex: 1 1 auto;
}

.organization-panel:not(.is-active) {
  display: none;
}

.organization-panel.is-active {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.organization-panel.report-data-panel {
  padding: 0;
}

.organization-panel[data-organization-panel="macro"] > .grid {
  min-height: 0;
  overflow: auto;
}

.organization-group-strip {
  display: flex;
  gap: .5rem;
  padding: .75rem 1rem;
  overflow-x: auto;
  border-bottom: 1px solid color-mix(in oklab, var(--color-base-content) 10%, transparent);
}

.organization-panel .report-table-scroll {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  max-height: none;
  overflow: auto;
}

/* One application shell, unchanged tenant/partner toolbars and grids. */
[data-organization-toolbar] > [data-organization-toolbar-section],
[data-people-toolbar] > [data-people-toolbar-section] {
  display: flex;
  align-items: center;
  gap: inherit;
  flex: 0 0 auto;
  min-width: max-content;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

[data-organization-toolbar] > [data-organization-toolbar-section][hidden],
[data-people-toolbar] > [data-people-toolbar-section][hidden] {
  display: none;
}

[data-organization-toolbar] [data-organization-filter] {
  width: 14rem;
  flex: 0 0 14rem;
}

.organization-integrated-panel.is-active {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.organization-integrated-panel > .admin-management-grid,
.organization-integrated-panel > .partner-admin-page {
  flex: 1 1 auto;
  min-height: 0;
}

.organization-integrated-panel .report-table-scroll {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
  max-height: none;
}

.organization-integrated-panel .report-table-footer {
  flex: 0 0 auto;
}

.people-admin-panel {
  display: none;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.people-admin-panel.is-active {
  display: flex;
  flex-direction: column;
}

.people-admin-panel > .admin-management-grid {
  flex: 1 1 auto;
  min-height: 0;
}

.people-admin-panel .report-table-scroll {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  max-height: none;
}

.people-admin-panel .report-table-footer {
  flex: 0 0 auto;
}

.organization-modal-box {
  display: flex;
  flex-direction: column;
  height: auto;
  max-height: min(92dvh, 58rem);
  padding: 0;
  overflow: hidden;
}

.modal-box.organization-modal-box.organization-modal-box-compact {
  width: min(94vw, 42rem);
  max-width: 42rem;
}

.modal-box.organization-modal-box.organization-modal-box-medium {
  width: min(94vw, 54rem);
  max-width: 54rem;
}

.modal-box.organization-modal-box.organization-modal-box-billing {
  width: min(94vw, 60rem);
  max-width: 60rem;
}

.modal-box.organization-modal-box.organization-modal-box-license {
  width: min(94vw, 48rem);
  max-width: 48rem;
}

.catalog-form-grid.organization-entity-grid,
.catalog-form-grid.organization-billing-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

.organization-billing-grid .organization-license-grid {
  grid-template-columns: minmax(0, 1fr);
}

.organization-billing-grid .organization-license-grid [data-license-history] {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}

.organization-license-card-heading {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.organization-license-card-heading > strong {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.organization-license-card-heading > :is(span, button) {
  flex-shrink: 0;
}

.organization-license-entry :is(strong, p) {
  min-width: 0;
  overflow-wrap: anywhere;
}

.organization-license-entry strong {
  flex-basis: 100%;
}

@media (max-width: 52rem) {
  .catalog-form-grid.organization-entity-grid,
  .catalog-form-grid.organization-billing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .organization-billing-grid .organization-license-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Klientský portál: samostatné gridy a detail požadavku. */
.client-portal-page {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 1rem;
  overflow: hidden;
}

.client-portal-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: .45rem;
}

.client-portal-toolbar > .report-toolbar-form {
  width: 15rem;
  min-width: 15rem;
  flex: 0 0 15rem;
}

.client-portal-toolbar-filters {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: .45rem;
}

.client-portal-toolbar-filters > .select {
  width: 10.5rem;
  min-width: 10.5rem;
  flex: 0 0 10.5rem;
}

.client-portal-grid { min-height: 0; flex: 1 1 auto; }
.client-portal-table { min-width: 68rem; }
.client-portal-table td:first-child { width: 9rem; max-width: 9rem; }
.client-portal-table td:nth-child(2) { min-width: 13rem; max-width: 22rem; }
.client-portal-grid tr[hidden] { display: none; }
.client-portal-row-link {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--color-primary);
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.client-portal-row-link:hover { color: var(--color-secondary); text-decoration: underline; }
.client-portal-row-link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: .15rem; }
.client-portal-priority { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
.client-portal-priority-low { color: var(--color-info); }
.client-portal-priority-normal { color: var(--color-base-content); }
.client-portal-priority-high { color: var(--color-warning); }
.client-portal-priority-urgent { color: var(--color-error); }
.client-portal-empty { padding: 2.5rem 1rem; color: color-mix(in oklab, var(--color-base-content) 58%, transparent); text-align: center; }
.client-portal-grid .report-per-page { width: 5.25rem; min-width: 5.25rem; }

.client-portal-issue-modal,
.client-portal-form-modal,
.client-portal-unsaved-modal {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
.client-portal-issue-modal { width: min(94vw, 54rem); max-width: 54rem; max-height: min(92dvh, 58rem); }
.client-portal-form-modal { width: min(94vw, 44rem); max-width: 44rem; max-height: min(90dvh, 44rem); }
.client-portal-unsaved-modal { width: min(92vw, 28rem); max-width: 28rem; }
.client-portal-form-modal > .catalog-modal-form { flex: 0 1 auto; overflow-y: auto; overscroll-behavior: contain; }
.client-portal-form-modal .catalog-modal-body { flex: 0 0 auto; min-height: auto; overflow: visible; padding: .85rem; }
.client-portal-form-modal .invoice-detail-section { margin: 0; padding: .85rem; }
.client-portal-form-modal .catalog-form-grid { gap: .65rem .8rem; }
/* Upload of documents (UploadPond): the fields of the whole batch above the field of the files. */
.client-portal-upload-form { gap: .65rem .8rem; margin-bottom: 1rem; }
.client-portal-upload-form [hidden] { display: none; }
.client-portal-upload-form[inert] { opacity: .6; }
.client-portal-grid.is-dragover { border-color: var(--color-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 35%, transparent); }
.client-portal-form-modal .textarea { min-height: 5.5rem; }
.client-portal-form-modal .invoice-detail-toolbar,
.client-portal-form-modal .invoice-detail-footer,
.client-portal-unsaved-modal .invoice-detail-toolbar,
.client-portal-unsaved-modal .invoice-detail-footer { padding: .75rem 1rem; }
.client-portal-form-modal .invoice-detail-footer-actions,
.client-portal-unsaved-modal .invoice-detail-footer-actions { margin-left: auto; }
.client-portal-issue-header { gap: 1rem; }
.client-portal-issue-key { display: flex; gap: .4rem; align-items: center; margin-bottom: .3rem; color: var(--color-primary); font-size: .76rem; font-weight: 700; letter-spacing: .03em; }
.client-portal-issue-layout { display: grid !important; flex: 1 1 auto; min-height: 0; grid-template-columns: minmax(0, 1.8fr) minmax(16rem, .9fr); align-items: start; gap: .85rem !important; overflow-y: auto; }
.client-portal-issue-main, .client-portal-issue-sidebar { display: grid; min-width: 0; gap: 1rem; }
.client-portal-issue-sidebar { position: sticky; top: 0; }
.client-portal-issue-layout .invoice-detail-section { margin: 0; }
.client-portal-issue-layout .invoice-detail-section > h3,
.client-portal-section-heading h3 { display: flex; align-items: center; gap: .5rem; margin: 0 0 .85rem; }
.client-portal-section-heading { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.client-portal-section-heading h3 { margin-bottom: 0; }
.client-portal-description { line-height: 1.55; overflow-wrap: anywhere; }
.client-portal-attachments { display: grid; gap: .5rem; }
.client-portal-attachment { display: flex; align-items: center; gap: .75rem; min-width: 0; padding: .7rem .8rem; border: 1px solid var(--color-base-300); border-radius: var(--radius-field); color: var(--color-base-content); background: var(--color-base-100); text-decoration: none; }
.client-portal-attachment:hover { border-color: var(--color-primary); }
.client-portal-attachment > i:first-child { color: var(--color-primary); }
.client-portal-attachment > span { flex: 1; min-width: 0; }
.client-portal-attachment strong, .client-portal-attachment small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.client-portal-attachment small { color: color-mix(in oklab, var(--color-base-content) 58%, transparent); }
.client-portal-activity { display: flex; flex-direction: column; gap: .8rem; }
.client-portal-timeline { width: 100%; max-width: 100%; padding: .25rem 0 0; }
.client-portal-timeline > li { min-width: 0; grid-template-columns: 2rem minmax(0, 1fr); }
.client-portal-timeline > li > hr { grid-column: 1; background: var(--color-base-300); }
.client-portal-timeline .timeline-middle { grid-column: 1; align-self: start; padding-top: .3rem; }
.client-portal-avatar { display: grid; width: 2rem; height: 2rem; flex: 0 0 2rem; place-items: center; overflow: hidden; border-radius: 50%; background: color-mix(in oklab, var(--color-primary) 15%, var(--color-base-100)); color: var(--color-primary); font-size: .7rem; font-weight: 800; }
.client-portal-avatar img { width: 100%; height: 100%; object-fit: cover; }
.client-portal-timeline-event-icon { display: grid; width: 2rem; height: 2rem; place-items: center; border: 1px solid var(--color-base-300); border-radius: 50%; background: var(--color-base-100); color: var(--color-primary); font-size: .7rem; }
.client-portal-timeline .timeline-end { grid-column: 2; min-width: 0; width: calc(100% - .55rem); margin: 0 0 .8rem .55rem; }
.client-portal-timeline-card { max-width: none; padding: .7rem .85rem; border: 1px solid var(--color-base-300); background: var(--color-base-100); box-shadow: none; overflow-wrap: anywhere; }
.client-portal-timeline-card.is-internal { border-color: color-mix(in oklab, var(--color-warning) 55%, var(--color-base-300)); border-left: 3px solid var(--color-warning); background: color-mix(in oklab, var(--color-warning) 10%, var(--color-base-100)); }
.client-portal-timeline-system { padding: .4rem .65rem; color: color-mix(in oklab, var(--color-base-content) 72%, transparent); font-size: .8rem; }
.client-portal-timeline-text { line-height: 1.5; }
.client-portal-timeline-event-text { margin: 0; line-height: 1.45; }
.client-portal-message-meta { display: flex; align-items: center; gap: .35rem .5rem; flex-wrap: wrap; margin-bottom: .35rem; font-size: .76rem; }
.client-portal-message-meta time { color: color-mix(in oklab, var(--color-base-content) 55%, transparent); }
.client-portal-internal-badge { gap: .3rem; border-color: var(--color-warning); background: var(--color-warning); color: var(--color-warning-content); font-weight: 700; }
.client-portal-composer { padding: .8rem; border: 1px solid var(--color-base-300); border-radius: var(--radius-box); background: var(--color-base-100); }
.client-portal-composer .textarea { min-height: 5rem; }
.client-portal-composer-actions { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-top: .65rem; }
.client-portal-detail-row { display: grid; grid-template-columns: minmax(6rem, .7fr) minmax(0, 1fr); gap: .75rem; padding: .55rem 0; border-bottom: 1px solid var(--color-base-300); font-size: .85rem; }
.client-portal-detail-row > span { color: color-mix(in oklab, var(--color-base-content) 60%, transparent); }
.client-portal-detail-row > strong { min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.client-portal-edit-form { display: grid; gap: .55rem; }
.client-portal-edit-form[hidden], .client-portal-issue-modal [hidden] { display: none !important; }

@media (max-width: 800px) {
  .client-portal-issue-layout { grid-template-columns: minmax(0, 1fr); }
  .client-portal-issue-sidebar { position: static; }
  .client-portal-issue-header { flex-wrap: wrap; }
}

@media (max-width: 600px) {
  .client-portal-issue-modal,
  .client-portal-form-modal { width: calc(100vw - .75rem); max-width: calc(100vw - .75rem); max-height: calc(100dvh - .75rem); }
  .client-portal-form-modal .catalog-form-grid { grid-template-columns: minmax(0, 1fr); }
  .client-portal-form-modal .catalog-span-full { grid-column: 1; }
  .client-portal-issue-header .invoice-detail-toolbar-actions { justify-content: flex-end; }
  .client-portal-timeline .timeline-end { width: calc(100% - .4rem); margin-left: .4rem; }
}

.organization-modal-box .catalog-modal-form {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.organization-modal-box .catalog-modal-body {
  display: grid;
  gap: .8rem;
  padding: 1rem;
}

.organization-modal-box .catalog-modal-form.is-disabled {
  opacity: 1;
}

.organization-modal-box .catalog-modal-form.is-disabled :is(.input, .select, .textarea) {
  border-color: color-mix(in srgb, var(--color-base-300) 78%, transparent);
  background: var(--color-base-200);
  color: var(--color-base-content);
  opacity: 1;
  cursor: not-allowed;
}

.organization-modal-box .catalog-modal-form.is-disabled :is(.checkbox, .toggle) {
  cursor: not-allowed;
}

.organization-modal-footer {
  justify-content: flex-end;
}

.organization-modal-footer .invoice-detail-footer-actions {
  margin-left: auto;
}

.organization-check-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
}

@media (max-width: 768px) {
  .organization-billing-grid .organization-license-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .organization-tabs-shell {
    min-height: 0;
  }

  .organization-integrated-panel .report-table-scroll {
    max-height: none;
  }

  .modal-box.organization-modal-box {
    width: calc(100vw - .75rem);
    max-width: calc(100vw - .75rem);
    max-height: calc(100dvh - .75rem);
  }
}

@media (max-width: 40rem) {
  .organization-license-card-heading {
    flex-wrap: wrap;
    gap: .5rem;
  }

  .organization-license-card-heading > strong {
    flex: 1 0 auto;
    overflow-wrap: normal;
  }

  .organization-license-card-heading > .iam-subsystem-card-icon {
    width: 2rem;
    height: 2rem;
  }

  .organization-license-card-heading > button {
    margin-left: auto;
  }

  .organization-check-grid,
  .catalog-form-grid.organization-entity-grid,
  .catalog-form-grid.organization-billing-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Organizace › Partneři: logo partnera (nabídka pojištění) */
.partner-logo-field {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.partner-logo-field .file-input {
  flex: 1 1 16rem;
}

.partner-logo-preview {
  max-width: 9rem;
  max-height: 3.5rem;
  object-fit: contain;
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-field);
  background: #fff;
  padding: 0.25rem;
}

/* Primární barva tenanta (Vzhled a rozložení, Appearance.php): nativní výběr barvy v rámečku pole. */
.appearance-color-input {
  width: 3.5rem;
  height: 2.25rem;
  flex: none;
  cursor: pointer;
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-field);
  background: var(--color-base-100);
  padding: 0.2rem;
}

.appearance-color-input:disabled {
  cursor: default;
  opacity: 0.6;
}

/* Písma tenanta (vlastník 26. 10. 2026, TenantFonts.php): seznam vlastních písem a jejich přidání z Google Fonts
   nebo ze souborů pod přepínačem Písma; řádky přidání se na úzké šířce zalamují. */
.tenant-font-list {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tenant-font-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-field);
  background: var(--color-base-100);
  padding: 0.35rem 0.35rem 0.35rem 0.75rem;
}

.tenant-font-item > div {
  display: grid;
}

.tenant-font-item small,
.tenant-font-empty {
  color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
  font-size: 0.75rem;
}

.tenant-font-add {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.35rem;
}

.tenant-font-add-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.tenant-font-add-row > .tenant-font-input {
  flex: 1 1 16rem;
  min-width: 0;
}

.tenant-font-add-row > .tenant-font-files {
  flex: 1 1 14rem;
  min-width: 0;
}

/* Telefon: jedna svislá linka od krajů (vlastník 28. 10. 2026) – 1rem zleva i zprava: první tab (klasické a
   podtržené taby), hamburger, toolbar (vlevo i na konci posunu, .report-toolbar::after), první a poslední sloupec
   gridů, přepínač počtu a stav stránkování pod gridem a souhrn docházky. Na konci souboru, aby přebil dřívější
   telefonní odsazení (0.45rem tabů, 0.9rem buněk, 0.6rem patičky, 0.75rem souhrnu). */
@media (max-width: 767px) {
  :root {
    --mobile-edge-gutter: 1rem;
  }

  html:is([data-tabs="classic"], [data-tabs="underline"]) .application-tabbar .application-tabs-list {
    padding-left: var(--mobile-edge-gutter);
  }

  /* Čáry hamburgeru (18.4 px) jsou o 0.8rem uvnitř tlačítka 2.75rem. */
  body.app-shell:not(.application-embedded) .mobile-menu-trigger-floating {
    right: calc(env(safe-area-inset-right, 0px) + var(--mobile-edge-gutter) - 0.8rem);
  }

  .app-main .table :is(thead, tbody, tfoot) > tr > :is(th, td):first-child {
    padding-left: var(--mobile-edge-gutter);
  }

  .app-main .table :is(thead, tbody, tfoot) > tr > :is(th, td):last-child {
    padding-right: var(--mobile-edge-gutter);
  }

  .app-main .report-table-footer {
    padding-right: var(--mobile-edge-gutter);
    padding-left: var(--mobile-edge-gutter);
  }

  .app-main .summary-ribbon .month-overview {
    padding-right: var(--mobile-edge-gutter);
    padding-left: var(--mobile-edge-gutter);
  }

  .app-main .summary-stats .stat:nth-child(odd) {
    padding-left: var(--mobile-edge-gutter);
  }

  .app-main .summary-stats .stat:nth-child(even) {
    padding-right: var(--mobile-edge-gutter);
  }
}

/* Spojené pole (vlastník 28. 10. 2026): pole nebo výběr s připojeným tlačítkem (číselná řada u čísla dokladu,
   proklik na partnera) má vypadat jako jedno pole – tlačítko je jeho součást. Rámeček, podklad a obrys
   aktivního pole kreslí skupina, pole i tlačítko jsou průhledné bez vlastních okrajů a bez švu; Lux tu skupinu
   nebere jako segmentový přepínač (podklad, mezera, vnitřní okraj). Platí pro všechny vzhledy a oba režimy;
   :root[data-theme] přebije segmentová pravidla Luxu i obrysy pole v appearance.css. */
:root[data-theme] .join:has(> :is(input:not(.btn), select, .input, .select)):has(> .btn.join-item) {
  --field-join-line: color-mix(in oklab, var(--color-base-content) 20%, transparent);
  --field-join-shadow: 0 1px color-mix(in oklab, var(--field-join-line) calc(var(--depth, 1) * 10%), transparent) inset;
  gap: 0;
  overflow: hidden;
  border-radius: var(--radius-field);
  background: var(--color-base-100);
  padding: 0;
  box-shadow: inset 0 0 0 var(--border, 1px) var(--field-join-line), var(--field-join-shadow);
}

:root[data-skin="overview"][data-theme] .join:has(> :is(input:not(.btn), select, .input, .select)):has(> .btn.join-item) {
  --field-join-line: var(--sk-control);
  --field-join-shadow: var(--sk-shadow-xs);
}

:root[data-theme] .join:has(> :is(input:not(.btn), select, .input, .select)):has(> .btn.join-item) > :is(.input, .select, input:not(.btn), select),
:root[data-theme] .join:has(> :is(input:not(.btn), select, .input, .select)):has(> .btn.join-item) > :is(.input, .select, input:not(.btn), select):is(:focus, :focus-within, :open) {
  border-color: transparent;
  border-radius: 0;
  background-color: transparent;
  outline: none;
  box-shadow: none;
}

:root[data-theme] .join:has(> :is(input:not(.btn), select, .input, .select)):has(> .btn.join-item) > .btn.join-item {
  --btn-color: transparent;
  --btn-border: transparent;
  --btn-fg: color-mix(in oklab, var(--color-base-content) 62%, transparent);
  --btn-shadow: none;
  --btn-noise: none;
  border-color: transparent;
  border-radius: 0 !important;
  background: transparent;
  color: var(--btn-fg);
  box-shadow: none;
}

:root[data-theme] .join:has(> :is(input:not(.btn), select, .input, .select)):has(> .btn.join-item) > .btn.join-item:not(:is(.btn-disabled, :disabled, [aria-disabled="true"])):hover {
  --btn-fg: var(--color-base-content);
  background: color-mix(in oklab, var(--color-base-content) 6%, transparent);
}

:root[data-theme] .join:has(> :is(input:not(.btn), select, .input, .select)):has(> .btn.join-item) > :is(.btn-disabled, .btn:disabled, .btn[aria-disabled="true"]).join-item {
  --btn-fg: color-mix(in oklab, var(--color-base-content) 32%, transparent);
  background: transparent;
  color: var(--btn-fg);
}

/* Rozbalený seznam výběru ve skupině (DaisyUI appearance: base-select) dědí podklad výběru – ten je tu průhledný,
   seznam by byl průhledný; dostane podklad stránky jako select-ghost DaisyUI. */
:root[data-theme] .join:has(> :is(input:not(.btn), select, .input, .select)):has(> .btn.join-item) > :is(.select, select)::picker(select) {
  background-color: var(--color-base-100);
  color: var(--color-base-content);
}

/* Zamčené pole (formulář před „Upravit“, zakázané pole): skupina převezme vzhled zamčeného pole – podklad base-200,
   tlumená linka; Lux si nechává jemný stín svých polí. */
:root[data-theme] .join:has(> :is(input:not(.btn), select, .input, .select):disabled):has(> .btn.join-item) {
  --field-join-line: color-mix(in srgb, var(--color-base-300) 78%, transparent);
  --field-join-shadow: 0 0 transparent;
  background: var(--color-base-200);
  cursor: not-allowed;
}

:root[data-skin="overview"][data-theme] .join:has(> :is(input:not(.btn), select, .input, .select):disabled):has(> .btn.join-item) {
  --field-join-shadow: var(--sk-shadow-xs);
}

/* Obrys aktivního pole kolem celé skupiny podle volby (appearance.css): barevný / obyčejný obrys DaisyUI, v Luxu
   kroužek; žádný = bez obrysu. */
:root[data-theme]:not([data-outline="none"]) .join:has(> :is(input:not(.btn), select, .input, .select):is(:focus, :focus-within, :open)):has(> .btn.join-item) {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

:root[data-theme][data-outline="plain"] .join:has(> :is(input:not(.btn), select, .input, .select):is(:focus, :focus-within, :open)):has(> .btn.join-item) {
  outline-color: var(--color-base-content);
}

:root[data-skin="overview"][data-theme]:not([data-outline="none"]) .join:has(> :is(input:not(.btn), select, .input, .select):is(:focus, :focus-within, :open)):has(> .btn.join-item) {
  --field-join-line: color-mix(in srgb, var(--color-primary) 55%, var(--sk-control));
  --field-join-shadow: var(--sk-focus);
  outline: none;
}

:root[data-skin="overview"][data-theme][data-outline="plain"] .join:has(> :is(input:not(.btn), select, .input, .select):is(:focus, :focus-within, :open)):has(> .btn.join-item) {
  --field-join-line: color-mix(in srgb, var(--color-base-content) 30%, var(--color-base-100));
  --field-join-shadow: 0 0 0 3px color-mix(in srgb, var(--color-base-content) 12%, transparent);
}

/* Doprava (owner 31. 10. 2026): the chosen pickup point, the detail list and the history of a shipment. */
.shipping-point-card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border: 1px solid color-mix(in srgb, var(--color-primary) 35%, var(--color-base-300));
  border-radius: var(--radius-box);
  background: color-mix(in srgb, var(--color-primary) 6%, var(--color-base-100));
}
.shipping-point-card > i {
  margin-top: 0.2rem;
  font-size: 1.1rem;
}
.shipping-detail-list {
  display: grid;
  grid-template-columns: minmax(7rem, max-content) minmax(0, 1fr);
  gap: 0.35rem 1rem;
  margin: 0;
}
.shipping-detail-list dt {
  color: color-mix(in srgb, var(--color-base-content) 60%, transparent);
}
.shipping-detail-list dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.shipping-history {
  display: grid;
  gap: 0.35rem;
  font-size: 0.875rem;
}

/* Doprava: logos of the carriers – the official logo in white on a rectangle of the brand colour (the same in both modes), the choice of the carrier, the map of Zásilkovna. */
.shipping-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  padding: 0.3rem 0.55rem;
  border-radius: var(--radius-field, 0.4rem);
  line-height: 0;
}
.shipping-logo-ppl { background: #004b93; }
.shipping-logo-packeta { background: #ba1b02; }
.shipping-logo img {
  display: block;
  width: auto;
  height: 1rem;
}
.shipping-logo-xs { padding: 0.18rem 0.35rem; }
.shipping-logo-xs img { height: 0.7rem; }
.shipping-logo-sm { padding: 0.25rem 0.45rem; }
.shipping-logo-sm img { height: 0.85rem; }
.shipping-logo-md { padding: 0.45rem 0.8rem; }
.shipping-logo-md img { height: 1.35rem; }
.shipping-logo-lg { width: 100%; padding: 0.85rem 1rem; }
.shipping-logo-lg img { height: 1.5rem; max-width: 100%; }
/* Grid of the shipments: columns as wide as their content, the delivery takes the rest (owner 31. 10. 2026). */
.shipping-shipments-table :is(th, td),
.shipping-shipments-table :is(th, td):first-child {
  width: 1%;
  min-width: 0;
  white-space: nowrap;
}
.shipping-shipments-table :is(th, td).shipping-col-grow {
  width: auto;
  min-width: 14rem;
  white-space: normal;
}
.shipping-carrier-grid {
  display: grid;
  gap: 0.75rem;
}
.shipping-carrier-card {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-box);
  background: var(--color-base-100);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.shipping-carrier-card:hover,
.shipping-carrier-card:focus-visible {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
  outline: none;
}
.shipping-carrier-card .shipping-logo { justify-content: center; }
@media (max-width: 30rem) {
  .shipping-carrier-card { grid-template-columns: 6.5rem minmax(0, 1fr) auto; gap: 0.75rem; padding: 0.875rem; }
  .shipping-carrier-card .shipping-logo-lg { padding: 0.65rem 0.6rem; }
  .shipping-carrier-card .shipping-logo-lg img { height: 1.1rem; }
}
.shipping-carrier-chosen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.shipping-map-overlay {
  position: fixed;
  inset: 3vh 3vw;
  z-index: 20;
  border-radius: var(--radius-box);
  background: var(--color-base-100);
  box-shadow: 0 20px 50px rgb(0 0 0 / 0.35);
  overflow: hidden;
}
.shipping-map-overlay.hidden { display: none; }
.shipping-map-frame {
  width: 100%;
  height: 100%;
}
.shipping-map-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 1;
}