/* Scoped UI fixes added after the compiled core/ui bundles. */
/* Shared left-hand author column, including own and dynamically loaded messages. */
.messages-page .message-bubble {
  position: relative;
  align-self: flex-start !important;
  margin-left: 52px !important;
  margin-right: 0 !important;
  max-width: min(calc(100% - 52px), 620px) !important;
}
.message-avatar {
  position: absolute;
  left: -52px;
  top: 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--theme-primary-soft);
  color: var(--theme-text);
  font-size: 14px;
  font-weight: 700;
}
.message-avatar img {display: block; width: 100%; height: 100%; object-fit: cover;}
.messages-page .messages-dialog {position: relative;}
.messages-page .messages-dialog--unread .messages-dialog__top {padding-right: 30px;}
.messages-page .messages-dialog__badge {position: absolute; top: 12px; right: 12px; background: #ff9d3f; color: #512a08;}

/*
 * Shared application structure.
 *
 * Theme rule: this file owns component geometry and common surfaces. Theme
 * selection may only change values of --theme-* variables. The only intended
 * theme-specific structural exception is the decorative dark star layer.
 */

/* -------------------------------------------------------------------------
   Administrative page shell
   ------------------------------------------------------------------------- */

html[data-theme] .admin-page,
html[data-theme] .wide-page,
html[data-theme] .report-admin-page,
html[data-theme] .admin-hub {
  color: var(--theme-text);
}

html[data-theme] .admin-page > .admin-page-header,
html[data-theme] .wide-page > .admin-page-header,
html[data-theme] .report-admin-page > .admin-page-header,
html[data-theme] .admin-hub > .admin-page-header,
html[data-theme] .admin-hub__header {
  box-sizing: border-box;
  width: 100%;
  margin: 0 0 20px;
  padding: 22px 26px;
  color: var(--theme-text);
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--theme-primary) 5%, var(--theme-surface-raised)) 0%,
      var(--theme-surface) 100%
    );
  border: 1px solid var(--theme-border-strong);
  border-radius: 18px;
  box-shadow: var(--theme-shadow);
}

html[data-theme] .admin-page-header > div,
html[data-theme] .admin-hub__header > div {
  min-width: 0;
}

html[data-theme] .admin-page-header h1,
html[data-theme] .admin-page-header h2,
html[data-theme] .admin-hub__header h1,
html[data-theme] .admin-hub__header h2 {
  color: var(--theme-text);
}

html[data-theme] .admin-page-header p,
html[data-theme] .admin-hub__header p {
  color: var(--theme-text-secondary);
}

/* -------------------------------------------------------------------------
   Shared sections/cards
   ------------------------------------------------------------------------- */

html[data-theme] .admin-section {
  box-sizing: border-box;
  color: var(--theme-text);
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--theme-primary) 2.5%, var(--theme-surface)) 0%,
      var(--theme-surface) 100%
    );
  border: 1px solid var(--theme-border);
  border-radius: 18px;
  box-shadow: var(--theme-shadow);
}

html[data-theme] .admin-section:not(:has(> .admin-page-header)) {
  padding: 20px;
}

html[data-theme] .admin-section h2,
html[data-theme] .admin-section h3,
html[data-theme] .admin-section h4 {
  color: var(--theme-text);
}

html[data-theme] .admin-section p {
  color: var(--theme-text-secondary);
}

html[data-theme] .admin-card,
html[data-theme] .section-card,
html[data-theme] .content-card,
html[data-theme] .settings-card,
html[data-theme] .form-card,
html[data-theme] .table-card,
html[data-theme] .summary-card,
html[data-theme] .report-card {
  color: var(--theme-text);
  background: var(--theme-surface);
  border-color: var(--theme-border);
}

/* -------------------------------------------------------------------------
   Forms and filter surfaces
   ------------------------------------------------------------------------- */

html[data-theme] .admin-form,
html[data-theme] .form-card {
  box-sizing: border-box;
  padding: 20px 22px;
  color: var(--theme-text);
  background: var(--theme-surface);
  border: 1px solid var(--theme-border);
  border-radius: 16px;
  box-shadow: var(--theme-shadow);
}

html[data-theme] .form-group {
  margin-bottom: 18px;
}

html[data-theme] .admin-filters,
html[data-theme] .admin-search,
html[data-theme] .filters-row,
html[data-theme] .search-row,
html[data-theme] .filter-card {
  box-sizing: border-box;
  padding: 16px 18px;
  color: var(--theme-text);
  background: var(--theme-surface);
  border: 1px solid var(--theme-border);
  border-radius: 14px;
}

html[data-theme] .admin-form input,
html[data-theme] .admin-form select,
html[data-theme] .admin-form textarea,
html[data-theme] .form-card input,
html[data-theme] .form-card select,
html[data-theme] .form-card textarea,
html[data-theme] .admin-filters input,
html[data-theme] .admin-filters select,
html[data-theme] .admin-search input,
html[data-theme] .search-row input,
html[data-theme] .filters-row input,
html[data-theme] .filters-row select {
  color: var(--theme-text);
  background: var(--theme-surface-raised);
  border-color: var(--theme-border-strong);
}

/* -------------------------------------------------------------------------
   Tabs
   ------------------------------------------------------------------------- */

html[data-theme] .tabs,
html[data-theme] .admin-tabs,
html[data-theme] .filter-tabs {
  gap: 8px;
}

html[data-theme] .tabs a,
html[data-theme] .admin-tabs a,
html[data-theme] .filter-tabs a,
html[data-theme] .tab-button {
  color: var(--theme-text-secondary);
  background: var(--theme-surface-soft);
  border: 1px solid var(--theme-border);
  border-radius: 10px;
}

html[data-theme] .tabs a:hover,
html[data-theme] .admin-tabs a:hover,
html[data-theme] .filter-tabs a:hover,
html[data-theme] .tab-button:hover {
  color: var(--theme-primary);
  background: var(--theme-primary-soft);
  border-color: var(--theme-primary);
}

html[data-theme] .tabs .active,
html[data-theme] .admin-tabs .active,
html[data-theme] .filter-tabs .active,
html[data-theme] .tab-button.active,
html[data-theme] .tab-button.is-active {
  color: var(--theme-primary-text);
  background: var(--theme-primary);
  border-color: var(--theme-primary);
}

/* -------------------------------------------------------------------------
   Administrative tables
   ------------------------------------------------------------------------- */

html[data-theme] .admin-page .table-responsive,
html[data-theme] .wide-page .table-responsive,
html[data-theme] .report-admin-page .table-responsive {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  color: var(--theme-text);
  background: var(--theme-surface);
  border: 1px solid var(--theme-border-strong);
  border-radius: 16px;
  box-shadow: var(--theme-shadow);
}

html[data-theme] .admin-table {
  width: 100%;
  color: var(--theme-text);
  background: var(--theme-surface);
  border-collapse: separate;
  border-spacing: 0;
}

html[data-theme] .admin-table thead,
html[data-theme] .admin-table thead tr,
html[data-theme] .admin-table thead th {
  color: var(--theme-text-secondary);
  background: var(--theme-surface-soft);
}

html[data-theme] .admin-table th,
html[data-theme] .admin-table td {
  border-color: var(--theme-border);
}

html[data-theme] .admin-table tbody tr:hover > th,
html[data-theme] .admin-table tbody tr:hover > td {
  background: var(--theme-surface-hover);
}

/* -------------------------------------------------------------------------
   Empty states and details
   ------------------------------------------------------------------------- */

html[data-theme] .empty-state {
  color: var(--theme-text-secondary);
  background: var(--theme-surface-soft);
  border-color: var(--theme-border-strong);
}

html[data-theme] details,
html[data-theme] details > summary {
  border-color: var(--theme-border);
}

/* -------------------------------------------------------------------------
   Responsive geometry: same breakpoints for every palette
   ------------------------------------------------------------------------- */

@media (max-width: 760px) {
  html[data-theme] .admin-page > .admin-page-header,
  html[data-theme] .wide-page > .admin-page-header,
  html[data-theme] .report-admin-page > .admin-page-header,
  html[data-theme] .admin-hub__header {
    padding: 18px;
    border-radius: 16px;
  }

  html[data-theme] .admin-section:not(:has(> .admin-page-header)) {
    padding: 16px;
  }
}

/*
 * Theme layout consistency layer.
 *
 * Architecture rule:
 *   - green / blue / dark may change palette and decorative color effects;
 *   - geometry, spacing, sizing, wrapping and component structure must remain
 *     identical between themes.
 *
 * This file is intentionally loaded after the legacy theme compatibility
 * layer. Selectors use html[data-theme] (all supported themes), so old
 * dark-only geometry overrides are neutralized without changing theme colors.
 */

/* -------------------------------------------------------------------------
   Shared secondary actions
   ------------------------------------------------------------------------- */

html[data-theme] .btn-secondary,
html[data-theme] .button-secondary,
html[data-theme] .secondary-button,
html[data-theme] .btn-outline {
  color: var(--theme-text) !important;
  background: var(--theme-surface-soft) !important;
  border-color: var(--theme-border-strong) !important;
  box-shadow: none;
}

html[data-theme] .btn-secondary:hover,
html[data-theme] .button-secondary:hover,
html[data-theme] .secondary-button:hover,
html[data-theme] .btn-outline:hover {
  color: var(--theme-primary) !important;
  background: var(--theme-primary-soft) !important;
  border-color: var(--theme-primary) !important;
}

/* -------------------------------------------------------------------------
   My reports
   ------------------------------------------------------------------------- */

html[data-theme]
.admin-page:has(> .table-report-main-tabs)
> .admin-page-header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  margin: 0 0 20px !important;
  padding: 22px 26px !important;
  gap: 10px 12px !important;
  box-sizing: border-box;
  border-radius: 18px !important;
}

html[data-theme]
.admin-page:has(> .table-report-main-tabs)
> .admin-page-header
> div:first-child {
  flex: 1 1 420px;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
}

html[data-theme]
.admin-page:has(> .table-report-main-tabs)
> .admin-page-header
> .btn:first-of-type {
  margin-left: auto;
}

html[data-theme] .table-report-main-tabs,
html[data-theme] .table-report-subtabs,
html[data-theme] .table-report-list-tabs {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
}

html[data-theme] .table-report-main-tabs .btn,
html[data-theme] .table-report-subtabs .btn,
html[data-theme] .table-report-list-tabs .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 38px !important;
  margin: 0 !important;
  padding: 8px 12px !important;
  color: var(--theme-text-secondary) !important;
  background: var(--theme-surface-soft) !important;
  border: 1px solid var(--theme-border) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  font-size: 0.9rem;
  line-height: 1.2;
  transform: none !important;
}

html[data-theme] .table-report-main-tabs .btn:hover,
html[data-theme] .table-report-subtabs .btn:hover,
html[data-theme] .table-report-list-tabs .btn:hover {
  color: var(--theme-primary) !important;
  background: var(--theme-primary-soft) !important;
  border-color: var(--theme-primary) !important;
  transform: none !important;
}

html[data-theme] .table-report-main-tabs .btn.is-active,
html[data-theme] .table-report-subtabs .btn.is-active,
html[data-theme] .table-report-list-tabs .btn.is-active,
html[data-theme] .table-report-main-tabs .btn.btn-primary,
html[data-theme] .table-report-subtabs .btn.btn-primary,
html[data-theme] .table-report-list-tabs .btn.btn-primary {
  color: var(--theme-primary-text) !important;
  background: var(--theme-primary) !important;
  border-color: var(--theme-primary) !important;
}

html[data-theme] .table-report-main-tabs .btn span,
html[data-theme] .table-report-subtabs .btn span,
html[data-theme] .table-report-list-tabs .btn span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 24px;
  height: 22px;
  margin: 0 !important;
  padding: 0 6px !important;
  color: var(--theme-text-muted) !important;
  background: var(--theme-surface) !important;
  border: 1px solid var(--theme-border) !important;
  border-radius: 999px !important;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1;
}

html[data-theme] .table-report-main-tabs .btn.is-active span,
html[data-theme] .table-report-subtabs .btn.is-active span,
html[data-theme] .table-report-list-tabs .btn.is-active span,
html[data-theme] .table-report-main-tabs .btn.btn-primary span,
html[data-theme] .table-report-subtabs .btn.btn-primary span,
html[data-theme] .table-report-list-tabs .btn.btn-primary span {
  color: var(--theme-primary-text) !important;
  background: color-mix(
    in srgb,
    var(--theme-primary-text) 13%,
    transparent
  ) !important;
  border-color: color-mix(
    in srgb,
    var(--theme-primary-text) 22%,
    transparent
  ) !important;
}

html[data-theme] .table-report-fill-archive {
  flex: 0 0 auto;
}

/* -------------------------------------------------------------------------
   Shared admin controls that had dark-only geometry
   ------------------------------------------------------------------------- */

html[data-theme] .admin-filters,
html[data-theme] .admin-search,
html[data-theme] .filters-row,
html[data-theme] .search-row,
html[data-theme] .filter-card {
  padding: 16px 18px !important;
  box-sizing: border-box;
  border-radius: 14px !important;
}

html[data-theme] .tabs,
html[data-theme] .admin-tabs,
html[data-theme] .filter-tabs {
  gap: 8px !important;
}

html[data-theme] .tabs a,
html[data-theme] .admin-tabs a,
html[data-theme] .filter-tabs a,
html[data-theme] .tab-button {
  border-radius: 10px !important;
}

html[data-theme] .admin-page .table-responsive {
  width: 100%;
  max-width: 100%;
  overflow-x: auto !important;
  overflow-y: visible;
  box-sizing: border-box;
  border-radius: 16px !important;
}

html[data-theme] .admin-page .admin-table {
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

/* -------------------------------------------------------------------------
   Vacations: filters must not move when the theme changes
   ------------------------------------------------------------------------- */

html[data-theme] .vacation-admin-filter,
html[data-theme] .vacation-public-filter {
  align-items: end !important;
}

html[data-theme] .vacation-admin-filter > .form-group,
html[data-theme] .vacation-admin-filter > .form-actions,
html[data-theme] .vacation-public-filter > .form-group,
html[data-theme] .vacation-public-filter > .form-actions {
  margin: 0 !important;
}

/* -------------------------------------------------------------------------
   Tasks: legacy dark theme changed widths and header spacing
   ------------------------------------------------------------------------- */

html[data-theme] .task-create-page .admin-page-header,
html[data-theme] .task-create-page .page-header,
html[data-theme] .task-create-header,
html[data-theme] .task-form-page .admin-page-header,
html[data-theme] .task-page > .admin-page-header {
  width: 100%;
  margin-bottom: 18px !important;
  padding: 22px 26px !important;
  box-sizing: border-box;
  border-radius: 18px !important;
}

html[data-theme] .task-create-page .admin-page-header > div,
html[data-theme] .task-create-page .page-header > div,
html[data-theme] .task-form-page .admin-page-header > div,
html[data-theme] .task-page > .admin-page-header > div {
  margin: 0 !important;
  padding: 0 !important;
}

html[data-theme] .task-page {
  --task-form-max-width: 900px;
}

html[data-theme] .task-page > .admin-page-header,
html[data-theme] .task-page > form,
html[data-theme] .task-page > .task-form,
html[data-theme] .task-page > .admin-section {
  width: 100% !important;
  max-width: var(--task-form-max-width) !important;
  box-sizing: border-box;
}

/* -------------------------------------------------------------------------
   Login: same card geometry in every theme
   ------------------------------------------------------------------------- */

html[data-theme]
.admin-page:has(.login-form)
> .admin-page-header {
  margin-bottom: 18px !important;
  padding: 22px 26px !important;
  box-sizing: border-box;
  border-radius: 18px !important;
}

html[data-theme] .login-form {
  padding: 24px 26px !important;
  box-sizing: border-box;
  border-radius: 18px !important;
}

html[data-theme] .login-remember-card {
  display: inline-flex !important;
  width: fit-content !important;
  margin-top: 6px !important;
  padding: 10px 13px !important;
  border-radius: 12px !important;
}

html[data-theme] .login-remember-label input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
}

/* -------------------------------------------------------------------------
   Public documents: same nesting and header geometry in every theme
   ------------------------------------------------------------------------- */

html[data-theme]
.admin-section:has(.document-public-grid) {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html[data-theme]
.admin-section:has(.document-public-grid)
> .admin-page-header,
html[data-theme] .documents-public-header {
  width: 100%;
  margin: 0 0 20px !important;
  padding: 22px 26px !important;
  box-sizing: border-box;
  border-radius: 18px !important;
}

html[data-theme] .documents-public-page {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* -------------------------------------------------------------------------
   Dashboard birthdays: spacing was previously different only in dark mode
   ------------------------------------------------------------------------- */

html[data-theme]
.dashboard-staffing-card
.dashboard-department-birthdays {
  padding: 14px 16px !important;
  border-radius: 15px !important;
}

html[data-theme]
.dashboard-staffing-card
.dashboard-department-birthdays__list {
  gap: 8px !important;
}

html[data-theme]
.dashboard-staffing-card
.dashboard-department-birthday {
  padding: 8px 10px !important;
  border-radius: 11px !important;
}

/* -------------------------------------------------------------------------
   Responsive geometry is also theme-independent
   ------------------------------------------------------------------------- */

@media (max-width: 760px) {
  html[data-theme]
  .admin-page:has(> .table-report-main-tabs)
  > .admin-page-header {
    align-items: stretch !important;
    flex-direction: column !important;
    padding: 18px !important;
  }

  html[data-theme]
  .admin-page:has(> .table-report-main-tabs)
  > .admin-page-header
  > div:first-child {
    flex-basis: auto;
    width: 100%;
  }

  html[data-theme]
  .admin-page:has(> .table-report-main-tabs)
  > .admin-page-header
  > .btn {
    width: 100% !important;
    margin-left: 0 !important;
  }

  html[data-theme] .table-report-main-tabs,
  html[data-theme] .table-report-subtabs,
  html[data-theme] .table-report-list-tabs {
    align-items: stretch !important;
  }

  html[data-theme] .table-report-main-tabs .btn,
  html[data-theme] .table-report-subtabs .btn,
  html[data-theme] .table-report-list-tabs .btn {
    flex: 1 1 180px;
  }
}

/* Desktop sidebar navigation, 2026-08-15.
 * The existing header markup is intentionally reused so all permission checks
 * and mobile navigation remain unchanged.
 */

:root {
  --app-sidebar-collapsed: 82px;
  --app-sidebar-expanded: 248px;
  --app-sidebar-gap: 10px;
}

@media (min-width: 901px) {
  body {
    padding-left: var(--app-sidebar-collapsed);
  }

  .topbar {
    position: fixed !important;
    z-index: 1200;
    inset: 0 auto 0 0 !important;
    width: var(--app-sidebar-collapsed) !important;
    height: 100dvh !important;
    min-height: 100vh;
    overflow: visible;
    border: 0 !important;
    border-right: 1px solid var(--theme-border, rgba(100, 116, 139, 0.18)) !important;
    box-shadow: 10px 0 32px rgba(15, 23, 42, 0.08);
    transition: width 180ms ease, box-shadow 180ms ease;
  }

  html[data-theme="green"] .topbar,
  html[data-theme="blue"] .topbar {
    background: color-mix(in srgb, var(--theme-surface, #fff) 96%, transparent) !important;
    backdrop-filter: blur(18px);
  }

  html[data-theme="dark"] .topbar {
    background: color-mix(in srgb, var(--theme-surface, #0d1915) 94%, #020806 6%) !important;
    border-right-color: color-mix(in srgb, var(--theme-primary, #49ddb1) 20%, transparent) !important;
    box-shadow:
      12px 0 38px rgba(0, 0, 0, 0.34),
      inset -1px 0 rgba(111, 255, 204, 0.035);
    backdrop-filter: blur(18px);
  }

  .topbar:hover,
  .topbar:has(.nav-links.show) {
    width: var(--app-sidebar-expanded) !important;
    box-shadow: 14px 0 42px rgba(15, 23, 42, 0.14);
  }

  html[data-theme="dark"] .topbar:hover,
  html[data-theme="dark"] .topbar:has(.nav-links.show) {
    box-shadow:
      16px 0 46px rgba(0, 0, 0, 0.46),
      inset -1px 0 rgba(111, 255, 204, 0.05);
  }

  .topbar-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 12px 10px !important;
    gap: 0 !important;
  }

  .logo-block {
    width: 100%;
    min-width: 0;
    margin: 0 !important;
  }

  .logo-link {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 11px !important;
    width: 100%;
    min-height: 54px;
    padding: 6px 8px !important;
    overflow: hidden;
    border-radius: 16px;
    text-decoration: none !important;
  }

  .site-logo {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px;
    object-fit: contain;
  }

  .logo-text {
    width: 0;
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    white-space: nowrap;
    color: var(--theme-text, inherit) !important;
    font-size: 0.94rem !important;
    font-weight: 800 !important;
    transform: translateX(-4px);
    transition: opacity 130ms ease, transform 160ms ease, max-width 160ms ease;
  }

  .topbar:hover .logo-text,
  .topbar:has(.nav-links.show) .logo-text {
    width: auto;
    max-width: 160px;
    opacity: 1;
    transform: translateX(0);
  }

  .menu-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    min-width: 0 !important;
    height: 34px !important;
    margin: 4px 0 6px !important;
    padding: 0 !important;
    color: var(--theme-text-muted, #64748b) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    font-size: 0 !important;
    cursor: pointer;
  }

  .menu-toggle::before {
    content: "›";
    font-size: 1.7rem;
    font-weight: 350;
    line-height: 1;
    transition: transform 160ms ease;
  }

  .topbar:hover .menu-toggle::before,
  .topbar:has(.nav-links.show) .menu-toggle::before {
    content: "‹";
  }

  .menu-toggle:hover {
    color: var(--theme-primary, #238c84) !important;
    background: var(--theme-surface-hover, rgba(35, 140, 132, 0.08)) !important;
  }

  .nav-links,
  .nav-links.show {
    position: static !important;
    display: flex !important;
    flex: 1 1 auto;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 6px 0 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .nav-links > .nav-btn {
    position: relative;
    display: flex !important;
    flex: 0 0 auto;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    overflow: hidden;
    color: var(--theme-text-secondary, #475569) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    font-size: 0 !important;
    font-weight: 750 !important;
    line-height: 1.2;
    text-decoration: none !important;
    white-space: nowrap;
    transition:
      color 150ms ease,
      background 150ms ease,
      border-color 150ms ease,
      transform 150ms ease;
  }

  .topbar:hover .nav-links > .nav-btn,
  .topbar:has(.nav-links.show) .nav-links > .nav-btn {
    font-size: 0.86rem !important;
  }

  .nav-links > .nav-btn:hover,
  .nav-links > .nav-btn:focus-visible {
    color: var(--theme-primary, #238c84) !important;
    background: var(--theme-primary-soft, rgba(35, 140, 132, 0.10)) !important;
    border-color: color-mix(in srgb, var(--theme-primary, #238c84) 18%, transparent) !important;
    transform: translateX(1px);
    outline: none;
  }

  html[data-theme="dark"] .nav-links > .nav-btn:hover,
  html[data-theme="dark"] .nav-links > .nav-btn:focus-visible {
    color: #eafff8 !important;
    background: color-mix(in srgb, var(--theme-primary, #49ddb1) 11%, transparent) !important;
    border-color: color-mix(in srgb, var(--theme-primary, #49ddb1) 20%, transparent) !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.025);
  }

  /* A monochrome icon is created with CSS masks. This keeps all themes clean. */
  .nav-links > .nav-btn::before {
    content: "";
    width: 22px;
    height: 22px;
    min-width: 22px;
    background: currentColor;
    opacity: 0.92;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 21px 21px;
    mask-size: 21px 21px;
  }

  .nav-btn[href*="documents"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 2h8l4 4v16H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2Zm7 1.5V7h3.5L13 3.5ZM8 11v1.5h8V11H8Zm0 4v1.5h8V15H8Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 2h8l4 4v16H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2Zm7 1.5V7h3.5L13 3.5ZM8 11v1.5h8V11H8Zm0 4v1.5h8V15H8Z'/%3E%3C/svg%3E");
  }

  .nav-btn[href*="algorithms"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a4 4 0 0 1 4 4v1h1a4 4 0 1 1 0 8h-1v1a4 4 0 1 1-8 0v-1H7A4 4 0 1 1 7 7h1V6a4 4 0 0 1 4-4Zm-2 7H7a2 2 0 1 0 0 4h3v3a2 2 0 1 0 4 0v-3h3a2 2 0 1 0 0-4h-3V6a2 2 0 1 0-4 0v3Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a4 4 0 0 1 4 4v1h1a4 4 0 1 1 0 8h-1v1a4 4 0 1 1-8 0v-1H7A4 4 0 1 1 7 7h1V6a4 4 0 0 1 4-4Zm-2 7H7a2 2 0 1 0 0 4h3v3a2 2 0 1 0 4 0v-3h3a2 2 0 1 0 0-4h-3V6a2 2 0 1 0-4 0v3Z'/%3E%3C/svg%3E");
  }

  .nav-btn[href*="duties"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 2h10v2h3v18H4V4h3V2Zm2 2h6V3H9v1Zm-3 3v13h12V7H6Zm2 3h8v2H8v-2Zm0 4h5v2H8v-2Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 2h10v2h3v18H4V4h3V2Zm2 2h6V3H9v1Zm-3 3v13h12V7H6Zm2 3h8v2H8v-2Zm0 4h5v2H8v-2Z'/%3E%3C/svg%3E");
  }

  .nav-btn[href*="vacation"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 2h2v2h6V2h2v2h3v18H4V4h3V2ZM6 9v11h12V9H6Zm2 2h3v3H8v-3Zm5 0h3v3h-3v-3Zm-5 5h3v2H8v-2Zm5 0h3v2h-3v-2Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 2h2v2h6V2h2v2h3v18H4V4h3V2ZM6 9v11h12V9H6Zm2 2h3v3H8v-3Zm5 0h3v3h-3v-3Zm-5 5h3v2H8v-2Zm5 0h3v2h-3v-2Z'/%3E%3C/svg%3E");
  }

  .nav-btn[href*="deferred"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 1-7.07 2.93L3.5 3.5H8v4.5L6.34 6.34A8 8 0 1 0 12 4V2Zm-1 5h2v5.17l3.24 1.87-1 1.73L11 13.32V7Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 1-7.07 2.93L3.5 3.5H8v4.5L6.34 6.34A8 8 0 1 0 12 4V2Zm-1 5h2v5.17l3.24 1.87-1 1.73L11 13.32V7Z'/%3E%3C/svg%3E");
  }

  .nav-btn[href*="tasks"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 3h16v18H4V3Zm2 2v14h12V5H6Zm2 3h2v2H8V8Zm4 0h4v2h-4V8Zm-4 4h2v2H8v-2Zm4 0h4v2h-4v-2Zm-4 4h2v2H8v-2Zm4 0h4v2h-4v-2Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 3h16v18H4V3Zm2 2v14h12V5H6Zm2 3h2v2H8V8Zm4 0h4v2h-4V8Zm-4 4h2v2H8v-2Zm4 0h4v2h-4v-2Zm-4 4h2v2H8v-2Zm4 0h4v2h-4v-2Z'/%3E%3C/svg%3E");
  }

  .nav-btn[href*="table-reports"]::before,
  .nav-btn[href*="reports"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 3h16v18H4V3Zm2 2v14h12V5H6Zm2 9h2v3H8v-3Zm3-5h2v8h-2V9Zm3 3h2v5h-2v-5Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 3h16v18H4V3Zm2 2v14h12V5H6Zm2 9h2v3H8v-3Zm3-5h2v8h-2V9Zm3 3h2v5h-2v-5Z'/%3E%3C/svg%3E");
  }

  .nav-btn[href="/admin/"],
  .nav-btn[href$="/admin"] {
    margin-top: 5px !important;
  }

  .nav-btn[href="/admin/"]::before,
  .nav-btn[href$="/admin"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m13.85 2 .45 2.05c.48.18.94.44 1.36.76l2-.64 1.5 2.6-1.55 1.4c.04.27.06.55.06.83s-.02.56-.06.83l1.55 1.4-1.5 2.6-2-.64c-.42.32-.88.58-1.36.76L13.85 16h-3.7l-.45-2.05a6.1 6.1 0 0 1-1.36-.76l-2 .64-1.5-2.6 1.55-1.4A5.9 5.9 0 0 1 6.33 9c0-.28.02-.56.06-.83l-1.55-1.4 1.5-2.6 2 .64c.42-.32.88-.58 1.36-.76L10.15 2h3.7ZM12 6a3 3 0 1 0 0 6 3 3 0 0 0 0-6Zm-7 12h14v4H5v-4Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m13.85 2 .45 2.05c.48.18.94.44 1.36.76l2-.64 1.5 2.6-1.55 1.4c.04.27.06.55.06.83s-.02.56-.06.83l1.55 1.4-1.5 2.6-2-.64c-.42.32-.88.58-1.36.76L13.85 16h-3.7l-.45-2.05a6.1 6.1 0 0 1-1.36-.76l-2 .64-1.5-2.6 1.55-1.4A5.9 5.9 0 0 1 6.33 9c0-.28.02-.56.06-.83l-1.55-1.4 1.5-2.6 2 .64c.42-.32.88-.58 1.36-.76L10.15 2h3.7ZM12 6a3 3 0 1 0 0 6 3 3 0 0 0 0-6Zm-7 12h14v4H5v-4Z'/%3E%3C/svg%3E");
  }

  .header-status-icons {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px !important;
    width: 100%;
    margin: auto 0 0 !important;
    padding-top: 10px;
    border-top: 1px solid var(--theme-border, rgba(100, 116, 139, 0.15));
  }

  .message-header-icon,
  .notification-bell {
    width: 100% !important;
    min-width: 0 !important;
    height: 42px !important;
    margin: 0 !important;
    border-radius: 12px !important;
  }

  .header-user {
    width: 100%;
    margin: 6px 0 0 !important;
  }

  .header-account-link {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 9px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    padding: 7px 10px !important;
    overflow: hidden;
    border-radius: 14px !important;
  }

  .header-account-link__icon {
    flex: 0 0 auto;
  }

  .header-account-link__body {
    width: 0;
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateX(-3px);
    transition: opacity 130ms ease, transform 160ms ease, max-width 160ms ease;
  }

  .topbar:hover .header-account-link__body,
  .topbar:has(.nav-links.show) .header-account-link__body {
    width: auto;
    max-width: 170px;
    opacity: 1;
    transform: translateX(0);
  }

  .app-developer-footer {
    margin-left: 0 !important;
  }

  /* Wide centered pages must account for the permanent 82px rail. */
  .ui-page--wide {
    width: min(1380px, calc(100vw - var(--app-sidebar-collapsed) - 36px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: none !important;
  }

  @media (prefers-reduced-motion: reduce) {
    .topbar,
    .logo-text,
    .nav-links > .nav-btn,
    .header-account-link__body {
      transition: none !important;
    }
  }
}

@media (min-width: 901px) {
  .nav-links > .nav-btn.is-active {
    color: var(--theme-primary, #238c84) !important;
    background: color-mix(in srgb, var(--theme-primary, #238c84) 12%, transparent) !important;
    border-color: color-mix(in srgb, var(--theme-primary, #238c84) 22%, transparent) !important;
    box-shadow:
      inset 3px 0 0 var(--theme-primary, #238c84),
      inset 0 1px rgba(255, 255, 255, 0.08) !important;
  }

  html[data-theme="dark"] .nav-links > .nav-btn.is-active {
    color: #eafff8 !important;
    background: color-mix(in srgb, var(--theme-primary, #49ddb1) 14%, transparent) !important;
    border-color: color-mix(in srgb, var(--theme-primary, #49ddb1) 25%, transparent) !important;
    box-shadow:
      inset 3px 0 0 var(--theme-primary, #49ddb1),
      0 0 18px color-mix(in srgb, var(--theme-primary, #49ddb1) 4%, transparent),
      inset 0 1px rgba(255, 255, 255, 0.035) !important;
  }
}

/* Sidebar refinements: click-only expansion, larger icons, desktop utility header. */

:root {
  --app-sidebar-collapsed: 94px;
  --app-sidebar-expanded: 268px;
}

.app-utility-header {
  display: none;
}

@media (min-width: 901px) {
  body {
    padding-top: 66px;
  }

  /* Hover may highlight individual buttons, but never expands the rail. */
  .topbar:hover {
    width: var(--app-sidebar-collapsed) !important;
    box-shadow: 10px 0 32px rgba(15, 23, 42, 0.08) !important;
  }

  html[data-theme="dark"] .topbar:hover {
    box-shadow:
      12px 0 38px rgba(0, 0, 0, 0.34),
      inset -1px 0 rgba(111, 255, 204, 0.035) !important;
  }

  .topbar:has(.nav-links.show) {
    width: var(--app-sidebar-expanded) !important;
    box-shadow: 14px 0 42px rgba(15, 23, 42, 0.14) !important;
  }

  html[data-theme="dark"] .topbar:has(.nav-links.show) {
    box-shadow:
      16px 0 46px rgba(0, 0, 0, 0.46),
      inset -1px 0 rgba(111, 255, 204, 0.05) !important;
  }

  .topbar:hover .logo-text {
    width: 0 !important;
    max-width: 0 !important;
    opacity: 0 !important;
    transform: translateX(-4px) !important;
  }

  .topbar:has(.nav-links.show) .logo-text {
    width: auto !important;
    max-width: 180px !important;
    opacity: 1 !important;
    transform: translateX(0) !important;
  }

  .topbar:hover .nav-links > .nav-btn {
    font-size: 0 !important;
  }

  .topbar:has(.nav-links.show) .nav-links > .nav-btn {
    font-size: 0.9rem !important;
  }

  .topbar:hover .menu-toggle::before {
    content: "›" !important;
  }

  .topbar:has(.nav-links.show) .menu-toggle::before {
    content: "‹" !important;
  }

  .nav-links > .nav-btn {
    min-height: 58px !important;
    gap: 14px !important;
    padding-inline: 14px !important;
  }

  .nav-links > .nav-btn::before {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    -webkit-mask-size: 30px 30px !important;
    mask-size: 30px 30px !important;
  }

  .menu-toggle {
    height: 40px !important;
  }

  .menu-toggle::before {
    font-size: 2rem !important;
  }

  /* Messages, notifications and account stay in a compact header at top right. */
  .app-utility-header {
    position: fixed;
    z-index: 1180;
    top: 0;
    right: 0;
    left: var(--app-sidebar-collapsed);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    height: 64px;
    padding: 8px 18px;
    background: color-mix(in srgb, var(--theme-surface, #fff) 94%, transparent);
    border-bottom: 1px solid var(--theme-border, rgba(100, 116, 139, 0.16));
    box-shadow: 0 8px 26px rgba(15, 23, 42, 0.045);
    backdrop-filter: blur(16px);
  }

  html[data-theme="dark"] .app-utility-header {
    background: color-mix(in srgb, var(--theme-surface, #0d1915) 91%, #020806 9%);
    border-bottom-color: color-mix(in srgb, var(--theme-primary, #49ddb1) 13%, transparent);
    box-shadow: 0 9px 30px rgba(0, 0, 0, 0.22);
  }

  .app-utility-header .header-status-icons {
    position: static !important;
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center !important;
    gap: 6px !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  .app-utility-header .message-header-icon,
  .app-utility-header .notification-bell {
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    margin: 0 !important;
    border-radius: 14px !important;
  }

  .app-utility-header .header-user {
    width: auto !important;
    margin: 0 !important;
  }

  .app-utility-header .header-account-link {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 9px !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 48px !important;
    padding: 7px 11px !important;
    overflow: visible !important;
    border-radius: 14px !important;
  }

  .app-utility-header .header-account-link__body {
    width: auto !important;
    max-width: 210px !important;
    overflow: visible !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .ui-page--wide {
    width: min(1380px, calc(100vw - var(--app-sidebar-collapsed) - 36px)) !important;
  }
}

/* Final sidebar overrides: click-only state, stable width, visible utility header. */

@media (min-width: 901px) {
  /* The rail width is controlled only by an explicit html class. */
  .topbar,
  .topbar:hover,
  .topbar:focus-within {
    width: var(--app-sidebar-collapsed) !important;
  }

  html.app-sidebar-expanded .topbar,
  html.app-sidebar-expanded .topbar:hover,
  html.app-sidebar-expanded .topbar:focus-within {
    width: var(--app-sidebar-expanded) !important;
    box-shadow: 14px 0 42px rgba(15, 23, 42, 0.14) !important;
  }

  html[data-theme="dark"].app-sidebar-expanded .topbar,
  html[data-theme="dark"].app-sidebar-expanded .topbar:hover,
  html[data-theme="dark"].app-sidebar-expanded .topbar:focus-within {
    box-shadow:
      16px 0 46px rgba(0, 0, 0, 0.46),
      inset -1px 0 rgba(111, 255, 204, 0.05) !important;
  }

  /* Hover never changes labels or the arrow. */
  .topbar .logo-text,
  .topbar:hover .logo-text,
  .topbar:focus-within .logo-text {
    width: 0 !important;
    max-width: 0 !important;
    opacity: 0 !important;
    transform: translateX(-4px) !important;
  }

  html.app-sidebar-expanded .topbar .logo-text,
  html.app-sidebar-expanded .topbar:hover .logo-text,
  html.app-sidebar-expanded .topbar:focus-within .logo-text {
    width: auto !important;
    max-width: 180px !important;
    opacity: 1 !important;
    transform: translateX(0) !important;
  }

  .topbar .nav-links > .nav-btn,
  .topbar:hover .nav-links > .nav-btn,
  .topbar:focus-within .nav-links > .nav-btn {
    font-size: 0 !important;
  }

  html.app-sidebar-expanded .topbar .nav-links > .nav-btn,
  html.app-sidebar-expanded .topbar:hover .nav-links > .nav-btn,
  html.app-sidebar-expanded .topbar:focus-within .nav-links > .nav-btn {
    font-size: 0.9rem !important;
  }

  .topbar .menu-toggle::before,
  .topbar:hover .menu-toggle::before,
  .topbar:focus-within .menu-toggle::before {
    content: "›" !important;
  }

  html.app-sidebar-expanded .topbar .menu-toggle::before,
  html.app-sidebar-expanded .topbar:hover .menu-toggle::before,
  html.app-sidebar-expanded .topbar:focus-within .menu-toggle::before {
    content: "‹" !important;
  }

  /* Make the requested larger icons authoritative. */
  .nav-links > .nav-btn {
    min-height: 58px !important;
    gap: 14px !important;
    padding-inline: 14px !important;
  }

  .nav-links > .nav-btn::before {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    -webkit-mask-size: 30px 30px !important;
    mask-size: 30px 30px !important;
  }

  /* Utility actions are physically moved to this body-level header by JS. */
  .app-utility-header {
    position: fixed !important;
    z-index: 1400 !important;
    top: 0 !important;
    right: 0 !important;
    left: var(--app-sidebar-collapsed) !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    width: auto !important;
    height: 64px !important;
    min-height: 64px !important;
    padding: 8px 18px !important;
    overflow: visible !important;
    pointer-events: auto !important;
    background: color-mix(in srgb, var(--theme-surface, #fff) 94%, transparent) !important;
    border-bottom: 1px solid var(--theme-border, rgba(100, 116, 139, 0.16)) !important;
    box-shadow: 0 8px 26px rgba(15, 23, 42, 0.045) !important;
    backdrop-filter: blur(16px);
  }

  html[data-theme="dark"] .app-utility-header {
    background: color-mix(in srgb, var(--theme-surface, #0d1915) 91%, #020806 9%) !important;
    border-bottom-color: color-mix(in srgb, var(--theme-primary, #49ddb1) 13%, transparent) !important;
    box-shadow: 0 9px 30px rgba(0, 0, 0, 0.22) !important;
  }

  .app-utility-header .header-status-icons {
    position: static !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    gap: 6px !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
  }

  .app-utility-header .message-header-icon,
  .app-utility-header .notification-bell {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    margin: 0 !important;
    border-radius: 14px !important;
  }

  .app-utility-header .header-user {
    position: static !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  .app-utility-header .header-account-link {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    gap: 9px !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 48px !important;
    padding: 7px 11px !important;
    overflow: visible !important;
    border-radius: 14px !important;
  }

  .app-utility-header .header-account-link__body {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    max-width: 230px !important;
    overflow: visible !important;
    transform: none !important;
  }

  /* The utility header stays aligned to the collapsed rail even when the rail opens. */
  html.app-sidebar-expanded .app-utility-header {
    left: var(--app-sidebar-collapsed) !important;
  }
}

/* Keep viewport-wide workspaces outside the desktop sidebar. */

@media screen and (min-width: 901px) {
  html {
    --app-sidebar-current: var(--app-sidebar-collapsed);
    /* 28px per side; reserve enough space even with a classic scrollbar. */
    --app-workspace-width: calc(100vw - var(--app-sidebar-current) - 56px);
  }

  html.app-sidebar-expanded {
    --app-sidebar-current: var(--app-sidebar-expanded);
  }

  body {
    padding-left: var(--app-sidebar-current) !important;
    transition: padding-left 180ms ease;
  }

  .app-utility-header {
    left: var(--app-sidebar-current) !important;
    transition: left 180ms ease;
  }

  main.wrap,
  .wrap {
    min-width: 0;
    max-width: min(980px, calc(100vw - var(--app-sidebar-current) - 36px));
  }

  /* Generic legacy full-width page. Used by vacations and several workspaces. */
  .wide-page {
    position: relative !important;
    left: 50% !important;
    width: var(--app-workspace-width) !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: translateX(-50%) !important;
  }

  /* Schedules and timesheets are calendar workspaces and need the whole
     width that remains to the right of the sidebar. Their wide tables scroll
     inside the workspace instead of being clipped by the legacy 980px wrap. */
  .schedule-page,
  .schedule-settings-page,
  .receiving-page,
  .timesheet-page {
    position: relative !important;
    left: 50% !important;
    width: var(--app-workspace-width) !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: translateX(-50%) !important;
  }

  .schedule-matrix-card,
  .schedule-matrix-wrap,
  .timesheet-table-card,
  .timesheet-table-scroll {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .schedule-matrix-wrap,
  .timesheet-table-scroll {
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
  }

  /* Employee administration used a hard-coded negative margin before sidebar. */
  .employees-page {
    position: relative !important;
    left: 50% !important;
    width: min(1380px, var(--app-workspace-width)) !important;
    max-width: 1380px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: translateX(-50%) !important;
  }

  /* Vacancy report workspace. */
  .vacancy-report-page {
    position: relative !important;
    left: 50% !important;
    width: var(--app-workspace-width) !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: translateX(-50%) !important;
  }

  .vacancy-report-page > .admin-page-header,
  .vacancy-report-page > .vacancy-position-tabs,
  .vacancy-report-page > .vacancy-report-list-card,
  .vacancy-report-page > .vacancy-report-create-form,
  .vacancy-report-filters {
    width: min(1500px, var(--app-workspace-width)) !important;
    max-width: 100% !important;
  }

  .vacancy-report-page > .vacancy-section-card {
    width: var(--app-workspace-width) !important;
    max-width: 100% !important;
  }

  /* Shared wide UI helper. */
  .ui-page--wide {
    position: relative !important;
    left: 50% !important;
    width: min(1380px, var(--app-workspace-width)) !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: translateX(-50%) !important;
  }

  /* Freeform report constructor/summary layouts are centred independently. */
  .table-report-freeform-settings-grid,
  .table-report-freeform-section {
    width: min(1600px, var(--app-workspace-width)) !important;
    max-width: none !important;
  }

  /* Wide tables must scroll inside their own workspace, not beneath the rail. */
  .wide-page .vacation-scroll,
  .wide-page .table-scroll,
  .employees-page .table-scroll,
  .vacancy-report-page .table-scroll,
  .table-report-freeform-settings-grid,
  .table-report-freeform-section {
    max-width: 100%;
  }

  .wide-page .vacation-scroll,
  .wide-page .table-scroll,
  .employees-page .table-scroll,
  .vacancy-report-page .table-scroll {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
  }

  @media (prefers-reduced-motion: reduce) {
    body,
    .app-utility-header {
      transition: none !important;
    }
  }
}

/* First-paint desktop sidebar/header layout.
 * Loaded from ui-patches in <head>, so no navigation reflow is required after DOM ready.
 */

@media (min-width: 901px) {
  html {
    --app-sidebar-current: var(--app-sidebar-collapsed);
  }

  html.app-sidebar-expanded {
    --app-sidebar-current: var(--app-sidebar-expanded);
  }

  body {
    padding-left: var(--app-sidebar-current) !important;
    padding-top: 66px !important;
  }

  /* Sidebar always owns the whole left strip, including its expanded header area. */
  .topbar,
  .topbar:hover,
  .topbar:focus-within {
    z-index: 1500 !important;
    width: var(--app-sidebar-current) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* The utility header background never covers the sidebar. */
  body::before {
    content: "";
    position: fixed;
    z-index: 1300;
    top: 0;
    right: 0;
    left: var(--app-sidebar-current);
    height: 64px;
    pointer-events: none;
    background: #ffffff;
    border-bottom: 1px solid var(--theme-border, rgba(100, 116, 139, 0.16));
    box-shadow: 0 8px 26px rgba(15, 23, 42, 0.045);
  }

  html[data-theme="dark"] body::before {
    background: color-mix(in srgb, var(--theme-surface, #0d1915) 91%, #020806 9%);
    border-bottom-color: color-mix(in srgb, var(--theme-primary, #49ddb1) 13%, transparent);
    box-shadow: 0 9px 30px rgba(0, 0, 0, 0.22);
  }

  /* Utility actions stay in the server-rendered markup and are positioned immediately. */
  .nav-links > .header-status-icons,
  .header-status-icons {
    position: fixed !important;
    z-index: 1420 !important;
    top: 8px !important;
    right: 258px !important;
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center !important;
    gap: 6px !important;
    width: auto !important;
    height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
  }

  .header-status-icons .message-header-icon,
  .header-status-icons .notification-bell {
    display: inline-flex !important;
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    margin: 0 !important;
    border-radius: 14px !important;
  }

  .nav-links > .header-user,
  .header-user {
    position: fixed !important;
    z-index: 1420 !important;
    top: 8px !important;
    right: 18px !important;
    display: block !important;
    width: 226px !important;
    height: 48px !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  .header-user .header-account-link {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 9px !important;
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 7px 11px !important;
    overflow: hidden !important;
    border-radius: 14px !important;
  }

  .header-user .header-account-link__body {
    display: flex !important;
    width: auto !important;
    max-width: 170px !important;
    min-width: 0 !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* The clinic title belongs to the sidebar, not to the utility header. */
  html.app-sidebar-expanded .logo-link {
    overflow: hidden !important;
  }

  html.app-sidebar-expanded .logo-text {
    display: block !important;
    width: auto !important;
    max-width: calc(var(--app-sidebar-expanded) - 82px) !important;
    min-width: 0 !important;
    overflow: hidden !important;
    opacity: 1 !important;
    text-overflow: ellipsis;
    white-space: nowrap;
    transform: none !important;
  }

  /* Old JS-created wrapper is no longer part of the layout. */
  .app-utility-header {
    display: none !important;
  }

  /* Workspace widths live in sidebar-wide-layout-20260815.css. Do not
     duplicate them here: the later import used to undo the shared gutters. */

}

/* Mobile navigation must remain inside the visible browser viewport. */
@media (max-width: 900px) {
  body.pz-mobile-menu-open {
    overflow: hidden !important;
  }

  .topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 1600 !important;
    overflow: visible !important;
  }

  .topbar-inner {
    position: relative !important;
  }

  .nav-links,
  .nav-links.show {
    position: fixed !important;
    z-index: 1700 !important;
    top: var(--pz-mobile-menu-top, 64px) !important;
    right: 10px !important;
    left: 10px !important;
    display: none !important;
    width: auto !important;
    height: auto !important;
    max-height: var(--pz-mobile-menu-max-height, calc(100dvh - 76px)) !important;
    margin: 0 !important;
    padding: 10px 10px max(10px, env(safe-area-inset-bottom)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    color: var(--theme-text) !important;
    background: var(--theme-surface, #ffffff) !important;
    border: 1px solid var(--theme-border, #dfe6ed) !important;
    border-radius: 16px !important;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.18) !important;
  }

  .nav-links.show {
    display: flex !important;
  }

  .nav-links > .nav-btn {
    flex: 0 0 auto !important;
  }

  .nav-links > .header-status-icons,
  .nav-links > .header-user {
    flex: 0 0 auto !important;
  }

  .nav-links > .header-user {
    margin-bottom: 2px !important;
  }

  html[data-theme="dark"] .nav-links,
  html[data-theme="dark"] .nav-links.show {
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.42) !important;
  }
}

/* Reliable desktop utility-header surface.
 * Uses the server-rendered sidebar as the paint anchor instead of body::before.
 */

@media (min-width: 901px) {
  /* The previous body pseudo-element proved unreliable with themed background layers. */
  body::before {
    content: none !important;
    display: none !important;
  }

  .topbar,
  .topbar:hover,
  .topbar:focus-within {
    overflow: visible !important;
  }

  .topbar::after {
    content: "";
    position: fixed;
    z-index: 0;
    top: 0;
    right: 0;
    left: var(--app-sidebar-current);
    height: 64px;
    pointer-events: none;
    background: #ffffff !important;
    border-bottom: 1px solid rgba(100, 116, 139, 0.18);
    box-shadow: 0 7px 22px rgba(15, 23, 42, 0.07);
  }

  html[data-theme="dark"] .topbar::after {
    background: #07110e !important;
    border-bottom-color: rgba(73, 221, 177, 0.16);
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.34);
  }

  /* Keep the real utility controls above the painted surface. */
  .header-status-icons,
  .header-user {
    z-index: 3 !important;
  }

  /* Sidebar content itself stays above its header extension. */
  .topbar-inner {
    position: relative;
    z-index: 2;
  }
}

/* Dashboard surface depth, 2026-08-15.
 * Light themes use layered shadows; dark theme uses contrast, inset highlights
 * and a restrained primary glow so cards read as raised surfaces.
 */

.dashboard-card,
.dashboard-hero {
  transition:
    transform 170ms ease,
    box-shadow 170ms ease,
    border-color 170ms ease,
    filter 170ms ease !important;
}

.dashboard-card.is-clickable:hover,
.dashboard-card.is-clickable:focus-within {
  transform: translateY(-3px) !important;
}

html[data-theme="green"] .dashboard-card,
html[data-theme="blue"] .dashboard-card {
  border-color: color-mix(in srgb, var(--theme-border, #d9e2e7) 78%, #ffffff 22%) !important;
  box-shadow:
    0 1px 1px rgba(15, 23, 42, 0.035),
    0 5px 13px rgba(15, 23, 42, 0.055),
    0 16px 34px rgba(15, 23, 42, 0.075),
    inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}

html[data-theme="green"] .dashboard-hero,
html[data-theme="blue"] .dashboard-hero {
  border-color: color-mix(in srgb, var(--theme-border, #d9e2e7) 74%, #ffffff 26%) !important;
  box-shadow:
    0 2px 3px rgba(15, 23, 42, 0.035),
    0 9px 22px rgba(15, 23, 42, 0.065),
    0 24px 46px rgba(15, 23, 42, 0.075),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

html[data-theme="green"] .dashboard-card.is-clickable:hover,
html[data-theme="green"] .dashboard-card.is-clickable:focus-within,
html[data-theme="blue"] .dashboard-card.is-clickable:hover,
html[data-theme="blue"] .dashboard-card.is-clickable:focus-within {
  box-shadow:
    0 2px 4px rgba(15, 23, 42, 0.04),
    0 11px 25px rgba(15, 23, 42, 0.08),
    0 24px 52px rgba(15, 23, 42, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
}

html[data-theme="dark"] .dashboard-card {
  border-color: color-mix(in srgb, var(--theme-primary, #49ddb1) 14%, var(--theme-border, #26453a) 86%) !important;
  box-shadow:
    0 2px 3px rgba(0, 0, 0, 0.30),
    0 10px 24px rgba(0, 0, 0, 0.30),
    0 24px 52px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(208, 255, 239, 0.045),
    inset 0 -1px 0 rgba(0, 0, 0, 0.24) !important;
}

html[data-theme="dark"] .dashboard-hero {
  border-color: color-mix(in srgb, var(--theme-primary, #49ddb1) 16%, var(--theme-border, #26453a) 84%) !important;
  box-shadow:
    0 3px 6px rgba(0, 0, 0, 0.32),
    0 16px 36px rgba(0, 0, 0, 0.30),
    0 30px 62px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(214, 255, 241, 0.052),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28) !important;
}

html[data-theme="dark"] .dashboard-card.is-clickable:hover,
html[data-theme="dark"] .dashboard-card.is-clickable:focus-within {
  border-color: color-mix(in srgb, var(--theme-primary, #49ddb1) 31%, var(--theme-border, #26453a) 69%) !important;
  box-shadow:
    0 3px 7px rgba(0, 0, 0, 0.34),
    0 16px 34px rgba(0, 0, 0, 0.34),
    0 30px 64px rgba(0, 0, 0, 0.26),
    0 0 24px color-mix(in srgb, var(--theme-primary, #49ddb1) 5%, transparent),
    inset 0 1px 0 rgba(220, 255, 243, 0.065) !important;
}

/* Inner dashboard elements should look embedded rather than like flat cards. */
html[data-theme="dark"] .dashboard-event,
html[data-theme="dark"] .dashboard-report-item,
html[data-theme="dark"] .dashboard-birthday-item,
html[data-theme="dark"] .dashboard-absence-item,
html[data-theme="dark"] .dashboard-announcement-item {
  border-color: color-mix(in srgb, var(--theme-border, #26453a) 86%, transparent) !important;
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-card,
  .dashboard-hero {
    transition: none !important;
  }
}

/* Dashboard staffing card: clearer spacing and explicit state when staffing plan is missing. */

/* In department mode there is no occupancy badge in the card header, so keep
 * the department short name on the same line as the card title. */
.dashboard-staffing-card
.dashboard-card__header:not(:has(> .dashboard-badge))
> div:first-child {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.dashboard-staffing-card
.dashboard-card__header:not(:has(> .dashboard-badge))
.dashboard-card__subtitle {
  flex: 0 0 auto;
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.2;
  text-align: right;
  white-space: nowrap;
}

.dashboard-staffing-card .dashboard-card__header {
  margin-bottom: 14px;
}

.dashboard-staffing-card .dashboard-staffing-summary {
  margin-bottom: 16px;
}

.dashboard-staffing-card .dashboard-staffing-list {
  gap: 18px;
}

.dashboard-staffing-card .dashboard-staffing-row {
  padding: 2px 0 3px;
}

.dashboard-staffing-card .dashboard-staffing-row__name {
  font-size: 0.82rem;
  line-height: 1.3;
}

.dashboard-staffing-card .dashboard-staffing-row__values {
  font-size: 0.72rem;
  line-height: 1.3;
  white-space: nowrap;
}

/* A missing planned staffing value must not look like a broken progress bar.
 * Keep the same visual rhythm, but use a neutral track and explain why the
 * percentage cannot be calculated. */
.dashboard-staffing-card
.dashboard-staffing-row:not(:has(.dashboard-progress))
.dashboard-staffing-row__values::after {
  content: " · план не задан";
  color: var(--dashboard-text-muted);
  font-style: italic;
}

.dashboard-staffing-card
.dashboard-staffing-row:not(:has(.dashboard-progress))::after {
  content: "";
  display: block;
  height: 6px;
  margin-top: 7px;
  border: 1px dashed color-mix(
    in srgb,
    var(--dashboard-text-muted) 42%,
    transparent
  );
  border-radius: 999px;
  background: color-mix(
    in srgb,
    var(--dashboard-text-muted) 10%,
    transparent
  );
}

@media (min-width: 1101px) {
  .dashboard-staffing-card .dashboard-staffing-list {
    max-height: 190px;
  }
}

@media (max-width: 620px) {
  .dashboard-staffing-card
  .dashboard-card__header:not(:has(> .dashboard-badge))
  > div:first-child {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .dashboard-staffing-card
  .dashboard-card__header:not(:has(> .dashboard-badge))
  .dashboard-card__subtitle {
    text-align: left;
  }

  .dashboard-staffing-card .dashboard-staffing-row__top {
    gap: 8px;
  }

  .dashboard-staffing-card .dashboard-staffing-row__values {
    white-space: normal;
    text-align: right;
  }
}

/* Compact working summary cards on the dashboard, 2026-09-04. */
.dashboard-quick-grid {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, 210px);
  gap: 20px;
  min-width: 0;
}

.dashboard-quick-card {
  display: flex;
  min-width: 0;
  padding: 20px 22px;
  flex-direction: column;
}

.dashboard-quick-card--patients {
  grid-column: 1;
  grid-row: 1;
}

.dashboard-quick-card--algorithms {
  grid-column: 1;
  grid-row: 2;
}

.dashboard-quick-card--deferred {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.dashboard-quick-patient-metrics {
  display: grid;
  gap: 13px;
}

.dashboard-quick-metric {
  display: flex;
  min-width: 0;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
}

.dashboard-quick-metric span {
  min-width: 0;
  color: var(--dashboard-text);
  font-size: 0.91rem;
  font-weight: 650;
  line-height: 1.3;
}

.dashboard-quick-metric strong {
  flex: 0 0 auto;
  color: var(--dashboard-primary);
  font-size: 1.65rem;
  font-weight: 760;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.dashboard-quick-footer {
  margin-top: auto;
  padding-top: 11px;
}

.dashboard-quick-card--algorithms .dashboard-card__title {
  margin-bottom: 10px;
}

.dashboard-quick-algorithm-list {
  display: grid;
  min-height: 0;
  gap: 5px;
}

.dashboard-quick-algorithm-link {
  overflow: hidden;
  color: var(--dashboard-text);
  font-size: 0.79rem;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-quick-algorithm-link:hover,
.dashboard-quick-algorithm-link:focus-visible {
  color: var(--dashboard-primary);
  text-decoration: underline;
}

.dashboard-quick-deferred-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
}

.dashboard-quick-deferred-total {
  flex: 0 0 auto;
  color: var(--dashboard-primary);
  font-size: 2.35rem;
  font-weight: 760;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.dashboard-quick-card--deferred > .dashboard-card__subtitle {
  margin-top: 5px;
}

.dashboard-quick-services {
  display: grid;
  margin-top: 22px;
  gap: 11px;
}

.dashboard-quick-service {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--dashboard-border);
}

.dashboard-quick-service span {
  min-width: 0;
  overflow: hidden;
  color: var(--dashboard-text);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-quick-service strong {
  color: var(--dashboard-primary);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

.dashboard-quick-loading,
.dashboard-quick-empty {
  margin: 0;
  color: var(--dashboard-text-muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

@media (min-width: 1101px) {
  .dashboard-quick-grid {
    order: 5;
  }
}

@media (min-width: 901px) and (max-width: 1100px) {
  .dashboard-quick-grid {
    order: 19;
  }
}

@media (max-width: 900px) {
  .dashboard-quick-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 14px;
    order: initial;
  }

  .dashboard-quick-card--patients,
  .dashboard-quick-card--algorithms,
  .dashboard-quick-card--deferred {
    grid-column: 1;
    grid-row: auto;
    min-height: 180px;
  }

  .dashboard-quick-card--deferred {
    min-height: 320px;
  }
}

@media (max-width: 520px) {
  .dashboard-quick-card {
    padding: 18px;
  }

  .dashboard-quick-metric {
    gap: 10px;
  }

  .dashboard-quick-metric span {
    font-size: 0.84rem;
  }

  .dashboard-quick-deferred-total {
    font-size: 2rem;
  }
}


/* Personal dashboard visibility: close grid gaps after hidden quick cards. */
.dashboard-quick-grid--adaptive{
  grid-template-rows:210px;
}
.dashboard-quick-grid--adaptive .dashboard-quick-card{
  grid-column:auto;
  grid-row:auto;
  min-height:210px;
}
.dashboard-quick-grid--adaptive.dashboard-quick-grid--one{
  grid-template-columns:1fr;
}
@media(max-width:900px){
  .dashboard-quick-grid--adaptive{
    grid-template-columns:1fr;
    grid-template-rows:none;
  }
  .dashboard-quick-grid--adaptive .dashboard-quick-card{
    min-height:180px;
  }
  .dashboard-quick-grid--adaptive .dashboard-quick-card--deferred{
    min-height:320px;
  }
}

/* Dashboard visual polish, 2026-09-05.
 * The patch is deliberately presentation-only for existing cards: it does not
 * reorder them, change spans or duplicate their data. New quick cards keep
 * their existing fixed grid and receive compact visual summaries.
 */

.dashboard-page .dashboard-card {
  --dashboard-card-accent: var(--dashboard-primary);
}

.dashboard-page .dashboard-card::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  left: 22px;
  width: 92px;
  height: 2px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(
    90deg,
    var(--dashboard-card-accent),
    color-mix(in srgb, var(--dashboard-card-accent) 25%, transparent)
  );
  opacity: 0.82;
  pointer-events: none;
}

.dashboard-page .dashboard-card::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: 18px;
  bottom: 10px;
  color: var(--dashboard-card-accent);
  font-size: 5.2rem;
  font-weight: 700;
  line-height: 1;
  opacity: 0.035;
  pointer-events: none;
  transform: rotate(-7deg);
}

.dashboard-page .dashboard-card > * {
  position: relative;
  z-index: 1;
}

.dashboard-card--announcement {
  --dashboard-card-accent: var(--dashboard-info);
}

.dashboard-card--announcement::after {
  content: "◈";
}

.dashboard-birthdays-card {
  --dashboard-card-accent: var(--dashboard-warning);
}

.dashboard-birthdays-card::after {
  content: "✦";
}

.dashboard-card--actions {
  --dashboard-card-accent: var(--dashboard-warning);
}

.dashboard-card--actions::after {
  content: "✓";
}

.dashboard-card--tasks {
  --dashboard-card-accent: var(--dashboard-info);
}

.dashboard-card--tasks::after {
  content: "☑";
}

.dashboard-user-statistics {
  --dashboard-card-accent: var(--dashboard-primary);
}

.dashboard-user-statistics::after {
  content: "●";
}

.dashboard-today-absences {
  --dashboard-card-accent: var(--dashboard-warning);
}

.dashboard-today-absences::after {
  content: "−";
}

.dashboard-vacation {
  --dashboard-card-accent: var(--dashboard-success);
}

.dashboard-vacation::after {
  content: "◇";
}

.dashboard-duties {
  --dashboard-card-accent: var(--dashboard-info);
}

.dashboard-duties::after {
  content: "◷";
}

.dashboard-staffing-card {
  --dashboard-card-accent: var(--dashboard-primary);
}

.dashboard-staffing-card::after {
  content: "≋";
}

.dashboard-quick-card--patients {
  --dashboard-card-accent: var(--dashboard-primary);
}

.dashboard-quick-card--patients::after {
  content: "◎";
}

.dashboard-quick-card--algorithms {
  --dashboard-card-accent: var(--dashboard-info);
}

.dashboard-quick-card--algorithms::after {
  content: "▤";
}

.dashboard-quick-card--deferred {
  --dashboard-card-accent: var(--dashboard-warning);
}

.dashboard-quick-card--deferred::after {
  content: "⌛";
}

/* Common title and footer rhythm. */
.dashboard-page .dashboard-card__title {
  letter-spacing: -0.012em;
}

.dashboard-page .dashboard-card__footer {
  border-top-color: color-mix(
    in srgb,
    var(--dashboard-border) 72%,
    transparent
  );
}

.dashboard-page .dashboard-card__link {
  transition:
    color 150ms ease,
    transform 150ms ease;
}

.dashboard-page .dashboard-card__link:hover,
.dashboard-page .dashboard-card__link:focus-visible {
  transform: translateX(2px);
}

/* Announcement icon: same visual language as metric accents. */
.dashboard-announcement-card__icon,
.dashboard-user-statistics__icon {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border: 1px solid color-mix(
    in srgb,
    var(--dashboard-card-accent, var(--dashboard-primary)) 18%,
    var(--dashboard-border)
  );
  border-radius: 13px;
  background: color-mix(
    in srgb,
    var(--dashboard-card-accent, var(--dashboard-primary)) 9%,
    var(--dashboard-surface)
  );
}

.dashboard-announcement-card__icon--link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease,
    background 150ms ease;
}

.dashboard-announcement-card__icon--link:hover,
.dashboard-announcement-card__icon--link:focus-visible {
  transform: translateY(-1px);
  border-color: color-mix(
    in srgb,
    var(--dashboard-card-accent, var(--dashboard-primary)) 48%,
    var(--dashboard-border)
  );
  background: color-mix(
    in srgb,
    var(--dashboard-card-accent, var(--dashboard-primary)) 14%,
    var(--dashboard-surface)
  );
  box-shadow: 0 8px 20px color-mix(
    in srgb,
    var(--dashboard-card-accent, var(--dashboard-primary)) 12%,
    transparent
  );
}

.dashboard-announcement-card__icon--link:focus-visible {
  outline: 2px solid var(--dashboard-card-accent, var(--dashboard-primary));
  outline-offset: 3px;
}

/* Birthdays already have date blocks; make the calendar cue stronger without
 * adding another textual label. */
.dashboard-birthdays-card .dashboard-event__date {
  border-color: color-mix(
    in srgb,
    var(--dashboard-warning) 22%,
    var(--dashboard-border)
  );
  background: color-mix(
    in srgb,
    var(--dashboard-warning) 7%,
    var(--dashboard-surface-soft)
  );
}

.dashboard-birthdays-card .dashboard-event__day {
  color: color-mix(
    in srgb,
    var(--dashboard-warning) 78%,
    var(--dashboard-text)
  );
}

/* "Требуют действия" remains reports only. The header badge is the only
 * counter; individual reports get a quiet visual rail instead of a duplicate
 * summary block. */
.dashboard-card--actions .dashboard-report-item {
  padding-left: 15px;
}

.dashboard-card--actions .dashboard-report-item::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  border-radius: 999px;
  background: color-mix(
    in srgb,
    var(--dashboard-warning) 62%,
    var(--dashboard-border)
  );
}

.dashboard-card--actions .dashboard-report-item--notice::before {
  background: color-mix(
    in srgb,
    var(--dashboard-info) 66%,
    var(--dashboard-border)
  );
}

/* Tasks stay in their dedicated card. */
.dashboard-card--tasks .dashboard-task-item {
  border-radius: 12px;
  transition:
    background 150ms ease,
    transform 150ms ease;
}

.dashboard-card--tasks .dashboard-task-item:hover,
.dashboard-card--tasks .dashboard-task-item:focus-within {
  background: color-mix(
    in srgb,
    var(--dashboard-info) 6%,
    transparent
  );
  transform: translateX(2px);
}

.dashboard-card--tasks .dashboard-task-item--overdue {
  box-shadow: inset 2px 0 0 color-mix(
    in srgb,
    var(--dashboard-danger) 72%,
    transparent
  );
}

/* Absence reason becomes a compact status pill. The literal dash between name
 * and reason is presentation-only and is hidden. */
.dashboard-today-absences__row > span:nth-child(2) {
  display: none;
}

.dashboard-today-absences__row {
  gap: 9px;
  border-color: color-mix(
    in srgb,
    var(--dashboard-warning) 12%,
    var(--dashboard-border)
  );
}

.dashboard-today-absences__reason {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  padding: 3px 8px;
  border-radius: 999px;
  background: color-mix(
    in srgb,
    var(--dashboard-warning) 8%,
    transparent
  );
}

/* Staffing: stronger hierarchy, same source values and same row order. */
.dashboard-staffing-card .dashboard-staffing-stat {
  position: relative;
  overflow: hidden;
  border-color: color-mix(
    in srgb,
    var(--dashboard-primary) 13%,
    var(--dashboard-border)
  );
}

.dashboard-staffing-card .dashboard-staffing-stat::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: color-mix(
    in srgb,
    var(--dashboard-primary) 68%,
    transparent
  );
}

.dashboard-staffing-card .dashboard-progress {
  height: 7px;
  background: color-mix(
    in srgb,
    var(--dashboard-primary) 8%,
    var(--dashboard-surface-soft)
  );
}

.dashboard-staffing-card .dashboard-progress__bar {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--dashboard-primary) 82%, #ffffff),
    var(--dashboard-primary)
  );
}

.dashboard-staffing-card .dashboard-progress__bar--over {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--dashboard-warning) 76%, #ffffff),
    var(--dashboard-warning)
  );
}

/* Vacation and duty dates use slightly richer depth but keep dimensions. */
.dashboard-vacation__date,
.dashboard-duty-item__date {
  box-shadow: inset 0 1px 0 color-mix(
    in srgb,
    #ffffff 60%,
    transparent
  );
}

.dashboard-vacation__date {
  border-color: color-mix(
    in srgb,
    var(--dashboard-success) 16%,
    var(--dashboard-border)
  );
}

.dashboard-duty-item__date {
  border-color: color-mix(
    in srgb,
    var(--dashboard-info) 16%,
    var(--dashboard-border)
  );
}

/* User metric: one focal number, no extra nested cards. */
.dashboard-user-statistics__value {
  font-size: clamp(2.1rem, 3.2vw, 2.8rem) !important;
  letter-spacing: -0.045em;
}

.dashboard-user-statistics__metric {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

/* =========================================================
   New quick cards
   ========================================================= */

.dashboard-quick-card--patients .dashboard-quick-patient-metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.dashboard-quick-card--patients .dashboard-quick-metric {
  position: relative;
  display: flex;
  min-height: 74px;
  padding: 13px 14px 12px 46px;
  flex-direction: column-reverse;
  align-items: flex-start;
  justify-content: center;
  gap: 5px;
  border: 1px solid color-mix(
    in srgb,
    var(--dashboard-primary) 13%,
    var(--dashboard-border)
  );
  border-radius: 14px;
  background: color-mix(
    in srgb,
    var(--dashboard-primary) 4%,
    var(--dashboard-surface-soft)
  );
}

.dashboard-quick-card--patients .dashboard-quick-metric::before {
  position: absolute;
  left: 14px;
  top: 15px;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 8px;
  color: var(--dashboard-primary);
  background: color-mix(
    in srgb,
    var(--dashboard-primary) 11%,
    transparent
  );
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1;
}

.dashboard-quick-card--patients .dashboard-quick-metric--observation::before {
  content: "◎";
}

.dashboard-quick-card--patients .dashboard-quick-metric--passport::before {
  content: "▤";
}

.dashboard-quick-card--patients .dashboard-quick-metric__label {
  color: var(--dashboard-text-muted);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
}

.dashboard-quick-card--patients .dashboard-quick-metric strong {
  font-size: 1.55rem;
}

.dashboard-quick-patient-attention {
  display: flex;
  min-width: 0;
  margin-top: 10px;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
  color: var(--dashboard-text-muted);
  font-size: 0.7rem;
  line-height: 1.3;
}

.dashboard-quick-patient-attention span {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  white-space: nowrap;
}

.dashboard-quick-patient-attention strong {
  color: var(--dashboard-warning);
  font-size: 0.84rem;
}

.dashboard-quick-patient-attention__overdue strong {
  color: var(--dashboard-danger);
}

.dashboard-quick-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.dashboard-quick-title-row::before {
  content: "▤";
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
  border-radius: 9px;
  color: var(--dashboard-info);
  background: color-mix(
    in srgb,
    var(--dashboard-info) 10%,
    transparent
  );
  font-size: 0.86rem;
  font-weight: 800;
}

.dashboard-quick-card--algorithms .dashboard-card__title {
  margin-bottom: 0;
}

.dashboard-quick-algorithm-list {
  gap: 3px;
}

.dashboard-quick-algorithm-link {
  position: relative;
  display: block;
  min-height: 22px;
  padding: 4px 8px 4px 19px;
  border-radius: 8px;
  transition:
    color 150ms ease,
    background 150ms ease,
    transform 150ms ease;
}

.dashboard-quick-algorithm-link::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 7px;
  width: 5px;
  height: 9px;
  border: 1px solid color-mix(
    in srgb,
    var(--dashboard-info) 72%,
    var(--dashboard-text-muted)
  );
  border-radius: 1px;
}

.dashboard-quick-algorithm-link:hover,
.dashboard-quick-algorithm-link:focus-visible {
  background: color-mix(
    in srgb,
    var(--dashboard-info) 6%,
    transparent
  );
  transform: translateX(2px);
}

.dashboard-quick-card--deferred .dashboard-quick-deferred-heading {
  align-items: flex-start;
}

.dashboard-quick-deferred-number {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}

.dashboard-quick-deferred-number > span {
  color: var(--dashboard-text-muted);
  font-size: 0.64rem;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.dashboard-quick-card--deferred .dashboard-card__subtitle {
  max-width: 280px;
}

.dashboard-quick-attention {
  width: fit-content;
  margin-top: 12px;
  padding: 5px 9px;
  border: 1px solid color-mix(
    in srgb,
    var(--dashboard-warning) 22%,
    var(--dashboard-border)
  );
  border-radius: 999px;
  color: color-mix(
    in srgb,
    var(--dashboard-warning) 80%,
    var(--dashboard-text)
  );
  background: color-mix(
    in srgb,
    var(--dashboard-warning) 8%,
    transparent
  );
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.2;
}

.dashboard-quick-card--deferred .dashboard-quick-services {
  margin-top: 18px;
  gap: 13px;
}

.dashboard-quick-card--deferred .dashboard-quick-service {
  display: block;
  padding: 0;
  border-bottom: 0;
}

.dashboard-quick-service__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 12px;
}

.dashboard-quick-service__name {
  min-width: 0;
  overflow: hidden;
  color: var(--dashboard-text);
  font-size: 0.8rem;
  font-weight: 620;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-quick-service__head strong {
  color: var(--dashboard-warning);
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
}

.dashboard-quick-service__track {
  height: 6px;
  margin-top: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(
    in srgb,
    var(--dashboard-warning) 8%,
    var(--dashboard-surface-soft)
  );
}

.dashboard-quick-service__bar {
  display: block;
  height: 100%;
  min-width: 8px;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--dashboard-warning) 64%, var(--dashboard-primary)),
    var(--dashboard-warning)
  );
}

/* Dark theme: keep accents readable but restrained. */
html[data-theme="dark"] .dashboard-page .dashboard-card::after {
  opacity: 0.055;
}

html[data-theme="dark"] .dashboard-quick-card--patients .dashboard-quick-metric,
html[data-theme="dark"] .dashboard-quick-algorithm-link:hover,
html[data-theme="dark"] .dashboard-quick-algorithm-link:focus-visible,
html[data-theme="dark"] .dashboard-card--tasks .dashboard-task-item:hover,
html[data-theme="dark"] .dashboard-card--tasks .dashboard-task-item:focus-within {
  background-color: color-mix(
    in srgb,
    var(--dashboard-card-accent, var(--dashboard-primary)) 7%,
    var(--dashboard-surface)
  );
}

@media (max-width: 620px) {
  .dashboard-page .dashboard-card::before {
    left: 18px;
  }

  .dashboard-quick-card--patients .dashboard-quick-patient-metrics {
    grid-template-columns: 1fr;
  }

  .dashboard-quick-card--patients .dashboard-quick-metric {
    min-height: 64px;
  }

  .dashboard-quick-patient-attention {
    flex-wrap: wrap;
  }

  .dashboard-quick-card--deferred .dashboard-quick-deferred-heading {
    gap: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-page .dashboard-card__link,
  .dashboard-quick-algorithm-link,
  .dashboard-card--tasks .dashboard-task-item {
    transition: none;
  }
}

/* Competition metadata shares the existing responsive section header.
 * The chart and the ten readable labels keep their original height. */
[data-competition-card] .dashboard-card__header {
  margin-bottom: 12px;
}

[data-competition-card] .dashboard-card__header > div {
  flex: 1 1 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

[data-competition-meta] {
  text-align: right;
}

[data-competition-footer] {
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  [data-competition-meta] {
    text-align: left;
  }
}

/* Algorithm metadata and print action, 2026-09-04. */
.algorithm-meta-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin-bottom: 14px;
}

.algorithm-meta-line > span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
}

.algorithm-meta-line .algorithm-print-action {
  min-height: 34px;
  margin: 0;
  padding: 6px 13px;
  font-size: 0.78rem;
  line-height: 1.1;
  white-space: nowrap;
}

@media (max-width: 620px) {
  .algorithm-meta-line {
    gap: 6px 12px;
  }
}

/* Patient accounting: scoped styles + sidebar icon. */

@media (min-width: 901px) {
  .nav-btn[href*="patient-accounting"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 2h10a2 2 0 0 1 2 2v16H5V4a2 2 0 0 1 2-2Zm1 3v2h8V5H8Zm4 4a3 3 0 1 0 0 6 3 3 0 0 0 0-6Zm-5 9v1h10v-1c0-1.6-2.3-2.5-5-2.5S7 16.4 7 18Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 2h10a2 2 0 0 1 2 2v16H5V4a2 2 0 0 1 2-2Zm1 3v2h8V5H8Zm4 4a3 3 0 1 0 0 6 3 3 0 0 0 0-6Zm-5 9v1h10v-1c0-1.6-2.3-2.5-5-2.5S7 16.4 7 18Z'/%3E%3C/svg%3E");
  }
}

.patient-accounting-page {
  display: grid;
  gap: 18px;
}

.patient-accounting-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.patient-accounting-header h1 {
  margin-bottom: 7px;
}

.patient-accounting-header p {
  margin: 0;
  color: var(--theme-text-muted, var(--muted));
}

.patient-accounting-actions,
.patient-accounting-tabs,
.patient-accounting-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
}

.patient-accounting-tabs {
  padding-bottom: 2px;
}

.patient-accounting-tab {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--theme-border, var(--border));
  border-radius: 12px;
  background: var(--theme-surface, var(--card));
  color: var(--theme-text-secondary, var(--text));
  font-weight: 750;
  text-decoration: none;
}

.patient-accounting-tab.is-active {
  color: var(--theme-primary-contrast, #fff);
  background: var(--theme-primary, var(--primary));
  border-color: var(--theme-primary, var(--primary));
}

.patient-accounting-owner {
  display: grid;
  grid-template-columns: minmax(220px, 420px) auto;
  gap: 12px;
  align-items: end;
  padding: 14px 16px;
  border: 1px solid var(--theme-border, var(--border));
  border-radius: 16px;
  background: var(--theme-surface, var(--card));
}

.patient-accounting-owner label,
.patient-accounting-filter label,
.patient-accounting-form label {
  margin-top: 0;
}

.patient-accounting-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.patient-accounting-stat {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 112px;
  padding: 16px 17px;
  overflow: hidden;
  border: 1px solid var(--theme-border, var(--border));
  border-radius: 18px;
  background: var(--theme-surface, var(--card));
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.055);
}

.patient-accounting-stat strong {
  display: block;
  margin-top: auto;
  padding-top: 9px;
  font-size: 1.65rem;
  line-height: 1;
}

.patient-accounting-stat span {
  display: block;
  line-height: 1.4;
  min-height: 2.8em;
  overflow-wrap: anywhere;
  color: var(--theme-text-muted, var(--muted));
  font-size: 0.82rem;
}

.patient-accounting-stat--attention {
  border-color: color-mix(in srgb, #d97706 35%, var(--theme-border, var(--border)));
}

.patient-accounting-stat--danger {
  border-color: color-mix(in srgb, #dc2626 35%, var(--theme-border, var(--border)));
}

html[data-theme="dark"] .patient-accounting-stat,
html[data-theme="dark"] .patient-accounting-panel,
html[data-theme="dark"] .patient-accounting-patient-card,
html[data-theme="dark"] .patient-accounting-observation-card {
  box-shadow:
    0 18px 34px rgba(0, 0, 0, 0.26),
    inset 0 1px rgba(255, 255, 255, 0.025);
}

.patient-accounting-panel,
.patient-accounting-patient-card,
.patient-accounting-observation-card {
  padding: 18px;
  border: 1px solid var(--theme-border, var(--border));
  border-radius: 18px;
  background: var(--theme-surface, var(--card));
}

.patient-accounting-panel h2,
.patient-accounting-patient-card h2,
.patient-accounting-observation-card h3 {
  margin: 0 0 8px;
}

.patient-accounting-due-list {
  display: grid;
  gap: 8px;
  margin-top: 13px;
}

.patient-accounting-due-item {
  display: grid;
  grid-template-columns: minmax(100px, 0.65fr) minmax(180px, 1.4fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid var(--theme-border, var(--border));
  border-radius: 13px;
  text-decoration: none;
  background: color-mix(in srgb, var(--theme-surface, var(--card)) 92%, var(--theme-primary, #238c84) 8%);
}

.patient-accounting-due-item.is-overdue {
  border-color: color-mix(in srgb, #dc2626 38%, var(--theme-border, var(--border)));
}

.patient-accounting-date--overdue {
  color: #dc2626;
  font-weight: 800;
}

.patient-accounting-filter {
  display: grid !important;
  grid-template-columns: minmax(180px, 1.1fr) minmax(190px, 1fr) minmax(180px, 0.8fr) auto !important;
  gap: 12px !important;
  align-items: end !important;
  margin: 0 !important;
  padding: 15px !important;
  box-shadow: none !important;
}

.patient-accounting-filter > * {
  margin: 0 !important;
}

.patient-accounting-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--theme-border, var(--border));
  border-radius: 16px;
  background: var(--theme-surface, var(--card));
}

.patient-accounting-table {
  width: 100%;
  border-collapse: collapse;
}

.patient-accounting-table th,
.patient-accounting-table td {
  padding: 12px 13px;
  border-bottom: 1px solid var(--theme-border, var(--border));
  text-align: left;
  vertical-align: middle;
}

.patient-accounting-table th {
  color: var(--theme-text-muted, var(--muted));
  font-size: 0.78rem;
  font-weight: 800;
}

.patient-accounting-table tr:last-child td {
  border-bottom: 0;
}

.patient-accounting-table tbody tr {
  cursor: pointer;
}

.patient-accounting-table tbody tr:hover {
  background: color-mix(in srgb, var(--theme-primary, #238c84) 6%, transparent);
}

.patient-accounting-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.patient-accounting-badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 8px;
  border: 1px solid var(--theme-border, var(--border));
  border-radius: 999px;
  color: var(--theme-text-secondary, var(--text));
  background: var(--theme-surface-raised, var(--card));
  font-size: 0.75rem;
  line-height: 1.15;
}

.patient-accounting-badge--due {
  color: #9a5a00;
  border-color: rgba(217, 119, 6, 0.35);
  background: rgba(245, 158, 11, 0.10);
}

.patient-accounting-badge--overdue {
  color: #b91c1c;
  border-color: rgba(220, 38, 38, 0.35);
  background: rgba(239, 68, 68, 0.10);
}

html[data-theme="dark"] .patient-accounting-badge--due {
  color: #ffd58a;
}

html[data-theme="dark"] .patient-accounting-badge--overdue {
  color: #ffaaaa;
}

.patient-accounting-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.patient-accounting-form {
  display: grid;
  gap: 16px;
  max-width: 980px;
  margin: 0 auto;
  padding: 20px !important;
}

.patient-accounting-category-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.patient-accounting-category-option {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 9px;
  align-items: start;
  margin: 0 !important;
  padding: 12px;
  border: 1px solid var(--theme-border, var(--border));
  border-radius: 14px;
  background: var(--theme-surface-raised, var(--card));
  cursor: pointer;
}

.patient-accounting-category-option input {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
}

.patient-accounting-category-option strong,
.patient-accounting-category-option small {
  display: block;
}

.patient-accounting-category-option small {
  margin-top: 4px;
  color: var(--theme-text-muted, var(--muted));
  font-weight: 400;
  line-height: 1.35;
}

.patient-accounting-detail-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: start;
}

.patient-accounting-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  color: var(--theme-text-muted, var(--muted));
}

.patient-accounting-observations {
  display: grid;
  gap: 12px;
}

.patient-accounting-observation-card.is-overdue {
  border-color: rgba(220, 38, 38, 0.38);
}

.patient-accounting-observation-description {
  margin: 8px 0 13px;
  padding: 10px 12px;
  border-left: 3px solid var(--theme-primary, var(--primary));
  color: var(--theme-text-secondary, var(--text));
  background: color-mix(in srgb, var(--theme-primary, #238c84) 6%, transparent);
  white-space: pre-line;
}

.patient-accounting-observation-form {
  display: grid !important;
  grid-template-columns: minmax(200px, 0.8fr) minmax(170px, 0.6fr) minmax(220px, 1.2fr) auto !important;
  gap: 10px !important;
  align-items: end !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.patient-accounting-observation-form > * {
  margin: 0 !important;
}

.patient-accounting-add-form,
.patient-accounting-compact-form {
  display: grid !important;
  grid-template-columns: minmax(220px, 1fr) minmax(170px, 0.55fr) auto !important;
  gap: 10px !important;
  align-items: end !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.patient-accounting-compact-form {
  grid-template-columns: minmax(220px, 1fr) auto !important;
}

.patient-accounting-empty {
  padding: 24px;
  text-align: center;
  color: var(--theme-text-muted, var(--muted));
  border: 1px dashed var(--theme-border, var(--border));
  border-radius: 16px;
}

.patient-accounting-search-box {
  position: relative;
}

.patient-accounting-search-results {
  position: absolute;
  z-index: 50;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  display: grid;
  gap: 4px;
  padding: 7px;
  border: 1px solid var(--theme-border, var(--border));
  border-radius: 12px;
  background: var(--theme-surface-raised, var(--card));
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.14);
}

.patient-accounting-search-results[hidden] {
  display: none;
}

.patient-accounting-search-result {
  width: 100%;
  min-height: 38px;
  justify-content: flex-start;
  padding: 8px 10px;
  color: var(--theme-text, var(--text));
  background: transparent;
  border: 0;
  border-radius: 9px;
  font-weight: 650;
  text-align: left;
}

.patient-accounting-search-result:hover {
  color: var(--theme-text, var(--text));
  background: var(--theme-primary-soft, rgba(35, 140, 132, 0.09));
  transform: none;
}

.patient-accounting-category-admin-grid,
.patient-accounting-stat-tables {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.patient-accounting-category-edit {
  display: grid !important;
  grid-template-columns: minmax(170px, 0.8fr) minmax(240px, 1.4fr) minmax(120px, 0.45fr) auto !important;
  gap: 9px !important;
  align-items: end !important;
  margin: 8px 0 0 !important;
  padding: 10px !important;
  box-shadow: none !important;
}

.patient-accounting-category-edit textarea {
  min-height: 48px;
  resize: vertical;
}

@media (max-width: 1100px) {
  .patient-accounting-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .patient-accounting-filter,
  .patient-accounting-observation-form,
  .patient-accounting-category-edit {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .patient-accounting-header,
  .patient-accounting-detail-head {
    grid-template-columns: 1fr;
    display: grid;
  }

  .patient-accounting-stats,
  .patient-accounting-category-picker,
  .patient-accounting-category-admin-grid,
  .patient-accounting-stat-tables {
    grid-template-columns: 1fr;
  }

  .patient-accounting-owner,
  .patient-accounting-filter,
  .patient-accounting-observation-form,
  .patient-accounting-add-form,
  .patient-accounting-compact-form,
  .patient-accounting-category-edit {
    grid-template-columns: 1fr !important;
  }

  .patient-accounting-due-item {
    grid-template-columns: 1fr 1fr;
  }
}

/* Patient accounting detail: keep summary, editors and category cards readable. */

html[data-theme] .patient-accounting-panel > .patient-accounting-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 16px 0 18px !important;
}

html[data-theme] .patient-accounting-panel > .patient-accounting-stats .patient-accounting-stat {
  min-width: 0;
  min-height: 94px !important;
  padding: 14px 16px !important;
}

html[data-theme] .patient-accounting-panel > .patient-accounting-stats .patient-accounting-stat span {
  display: block;
  line-height: 1.3;
}

html[data-theme] .patient-accounting-panel > .patient-accounting-stats .patient-accounting-stat strong {
  margin-top: 8px !important;
  font-size: 1.22rem !important;
  line-height: 1.18 !important;
  overflow-wrap: anywhere;
}

html[data-theme] .patient-accounting-observation-form {
  grid-template-columns: minmax(240px, 0.8fr) minmax(320px, 1.35fr) auto !important;
  gap: 16px !important;
  align-items: end !important;
  margin: 0 0 18px !important;
  padding: 14px 16px !important;
  border: 1px solid var(--theme-border, var(--border)) !important;
  border-radius: 14px !important;
  background: color-mix(in srgb, var(--theme-surface, var(--card)) 94%, var(--theme-primary, #238c84) 6%) !important;
  box-shadow: none !important;
}

html[data-theme] .patient-accounting-observation-form > .muted {
  align-self: center !important;
  max-width: 600px;
  font-size: 0.88rem;
  line-height: 1.42;
}

html[data-theme] .patient-accounting-observation-form > .btn {
  align-self: end;
  min-height: 44px;
  white-space: nowrap;
}

html[data-theme] .patient-accounting-observations {
  gap: 14px;
}

html[data-theme] .patient-accounting-observation-card {
  padding: 17px 18px !important;
  border-radius: 15px !important;
  box-shadow: none !important;
}

html[data-theme] .patient-accounting-observation-card .patient-accounting-detail-head {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
}

html[data-theme] .patient-accounting-observation-card h3 {
  margin-bottom: 7px !important;
  font-size: 1.08rem;
  line-height: 1.3;
}

html[data-theme] .patient-accounting-observation-card .patient-accounting-observation-description {
  margin: 12px 0 14px;
  line-height: 1.45;
}

html[data-theme] .patient-accounting-observation-card .patient-accounting-compact-form {
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 12px !important;
  align-items: end !important;
}

html[data-theme] .patient-accounting-add-form {
  grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr) auto !important;
  gap: 14px !important;
  align-items: end !important;
}

html[data-theme] .patient-accounting-add-form > .muted {
  align-self: center !important;
  font-size: 0.88rem;
  line-height: 1.42;
}

html[data-theme] .patient-accounting-add-form > .btn {
  min-height: 44px;
  white-space: nowrap;
}

/* Passport categories on the patient card should read as records, not cramped pills. */
html[data-theme] .patient-accounting-panel:has(#passport-category-add) > .patient-accounting-badges,
html[data-theme] .patient-accounting-panel:has(form[action*="passport"]) > .patient-accounting-badges {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
  margin: 12px 0 4px;
}

html[data-theme] .patient-accounting-panel:has(#passport-category-add) > .patient-accounting-badges > .patient-accounting-badge,
html[data-theme] .patient-accounting-panel:has(form[action*="passport"]) > .patient-accounting-badges > .patient-accounting-badge {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 48px;
  padding: 10px 12px;
  border-radius: 13px;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.3;
}

html[data-theme] .patient-accounting-panel:has(#passport-category-add) > .patient-accounting-badges .btn,
html[data-theme] .patient-accounting-panel:has(form[action*="passport"]) > .patient-accounting-badges .btn {
  width: 30px;
  min-width: 30px;
  min-height: 30px !important;
  height: 30px;
  padding: 0 !important;
  border-radius: 8px;
}

html[data-theme] .patient-accounting-panel:has(#passport-category-add) .patient-accounting-compact-form {
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 12px !important;
  align-items: end !important;
}

html[data-theme] .patient-accounting-panel:has(#passport-category-add) hr,
html[data-theme] .patient-accounting-panel:has(.patient-accounting-add-form) hr {
  margin: 16px 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--theme-border, var(--border)) !important;
}

@media (max-width: 980px) {
  html[data-theme] .patient-accounting-observation-form {
    grid-template-columns: minmax(240px, 1fr) auto !important;
  }

  html[data-theme] .patient-accounting-observation-form > .muted {
    grid-column: 1 / -1;
    grid-row: 2;
    max-width: none;
  }

  html[data-theme] .patient-accounting-add-form {
    grid-template-columns: minmax(260px, 1fr) auto !important;
  }

  html[data-theme] .patient-accounting-add-form > .muted {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

@media (max-width: 760px) {
  html[data-theme] .patient-accounting-panel > .patient-accounting-stats,
  html[data-theme] .patient-accounting-observation-form,
  html[data-theme] .patient-accounting-add-form,
  html[data-theme] .patient-accounting-observation-card .patient-accounting-detail-head,
  html[data-theme] .patient-accounting-observation-card .patient-accounting-compact-form,
  html[data-theme] .patient-accounting-panel:has(#passport-category-add) .patient-accounting-compact-form {
    grid-template-columns: 1fr !important;
  }

  html[data-theme] .patient-accounting-observation-form > .muted,
  html[data-theme] .patient-accounting-add-form > .muted {
    grid-column: auto;
    grid-row: auto;
  }

  html[data-theme] .patient-accounting-observation-form > .btn,
  html[data-theme] .patient-accounting-add-form > .btn,
  html[data-theme] .patient-accounting-observation-card .patient-accounting-detail-head > form .btn {
    width: 100%;
  }
}

/* Deferred entries: keep dates and status badges readable in the list table. */

@media (min-width: 761px) {
  .deferred-table th:nth-child(3),
  .deferred-table td:nth-child(3) {
    width: 118px;
    min-width: 118px;
  }

  .deferred-table th:nth-child(6),
  .deferred-table td:nth-child(6) {
    width: 190px;
    min-width: 190px;
  }
}

.deferred-table td:nth-child(3),
.deferred-overdue-text {
  white-space: nowrap;
}

.deferred-overdue-text {
  display: inline-block;
  font-size: inherit !important;
  font-weight: 750;
  line-height: 1.25;
}

.deferred-status {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.2;
  overflow-wrap: normal;
  word-break: normal;
}

@media (max-width: 760px) {
  .deferred-table td[data-label="Срок"] {
    white-space: nowrap;
  }

  .deferred-status {
    justify-content: flex-start;
  }
}


/* Public documents: keep the page header, context note and form away from the card edge. */
.admin-section.document-fill-page {
  padding: 24px !important;
}

@media (max-width: 700px) {
  .admin-section.document-fill-page {
    padding: 16px !important;
  }
}

/* Vacations: keep filter actions on the same baseline as the visible fields. */
html[data-theme] .vacation-admin-filter,
html[data-theme] .vacation-public-filter {
  align-items: end;
}

html[data-theme] .vacation-admin-filter > .form-group,
html[data-theme] .vacation-admin-filter > .form-actions,
html[data-theme] .vacation-public-filter > .form-group,
html[data-theme] .vacation-public-filter > .form-actions {
  margin: 0;
}

/* Vacations: manual approved period entry.
 * The card surface is intentionally owned by vacations-polish-20260905.css.
 * Keep only the form geometry here so an older !important reset cannot
 * flatten the card after a customer update.
 */
.vacation-manual-form {
  grid-template-columns:
    minmax(280px, 1.55fr)
    minmax(220px, 0.72fr)
    minmax(190px, 0.58fr)
    minmax(290px, auto) !important;
  align-items: end !important;
  gap: var(--pz-control-gap, 12px) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.vacation-manual-form > .form-group,
.vacation-manual-form > .form-actions {
  margin: 0 !important;
}

.vacation-manual-end {
  grid-column: 4 !important;
  grid-row: 1 !important;
  align-self: start !important;
  min-height: 18px;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--muted, #64748b) !important;
  font-size: 0.84rem;
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
}

.vacation-manual-end strong {
  color: inherit !important;
  font-weight: 600;
}

.vacation-manual-form > .form-actions {
  grid-column: 4 !important;
  grid-row: 1 !important;
  align-self: end !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.vacation-manual-form > .form-actions .btn {
  min-height: var(--pz-control-height, 44px);
  height: var(--pz-control-height, 44px);
  margin: 0;
  white-space: nowrap;
}

@media (max-width: 1050px) {
  .vacation-manual-form {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .vacation-manual-end,
  .vacation-manual-form > .form-actions {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }
}

@media (max-width: 600px) {
  .vacation-manual-form {
    grid-template-columns: 1fr !important;
  }

  .vacation-manual-end,
  .vacation-manual-form > .form-actions {
    grid-column: 1 !important;
    grid-row: 4 !important;
  }
}

/* Dashboard: the badge in the card header is the only action counter.
 * The subtitle stays visible so it is explicit that this card contains
 * reports, while tasks remain in their own separate card. */
.dashboard-card--actions .dashboard-action-count {
  display: none;
}

.dashboard-card--actions .dashboard-card__header {
  margin-bottom: 10px;
}

.dashboard-card--actions .dashboard-report-list {
  max-height: 270px;
}

/* Employee card: keep permission actions readable without widening the table. */
.employee-effective-permissions-table th:nth-child(2),
.employee-effective-permissions-table td:nth-child(2) {
  width: 18%;
  white-space: nowrap;
}

.employee-effective-permissions-table th:nth-child(4),
.employee-effective-permissions-table td:nth-child(4) {
  width: 24%;
}

/* Vacation list printing is document output, not themed UI. */
@media print {
  @page {
    size: A4 portrait;
    margin: 12mm;
  }

  html,
  html[data-theme="green"],
  html[data-theme="blue"],
  html[data-theme="dark"],
  body {
    color-scheme: light !important;
    background: #ffffff !important;
    color: #000000 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  [data-vacation-view="list"],
  [data-vacation-view="list"] .table-scroll,
  .vacation-print-heading,
  .vacation-print-table,
  .vacation-date-table {
    background: #ffffff !important;
    color: #000000 !important;
    box-shadow: none !important;
  }

  [data-vacation-view="list"] *,
  .vacation-print-heading *,
  .vacation-print-table *,
  .vacation-date-table * {
    color: #000000 !important;
    text-shadow: none !important;
    box-shadow: none !important;
  }

  .vacation-print-table,
  .vacation-date-table {
    width: 100% !important;
    min-width: 0 !important;
    border: 1px solid #000000 !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
  }

  .vacation-print-table th,
  .vacation-print-table td,
  .vacation-date-table th,
  .vacation-date-table td {
    border: 1px solid #000000 !important;
    background: #ffffff !important;
    color: #000000 !important;
  }

  .vacation-date-period,
  .vacation-date-periods,
  .vacation-print-table .muted,
  .vacation-print-table .text-muted,
  .vacation-date-table .muted,
  .vacation-date-table .text-muted {
    background: transparent !important;
    color: #000000 !important;
    border-radius: 0 !important;
  }
}

/* Employee import: keep the page inside the available content column. */
.employee-import-page {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  transform: none;
}

.employee-import-page .ui-surface,
.employee-import-page .ui-form,
.employee-import-page .ui-table-wrap {
  min-width: 0;
  max-width: 100%;
}

.employee-import-page .ui-table-wrap {
  overflow-x: auto;
}

.employee-import-page .ui-table select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

/* Employee import: preview headers stay intact; the wrapper scrolls if needed. */
.employee-import-preview-table {
  min-width: 1040px;
  table-layout: auto;
}

.employee-import-preview-table th {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.employee-import-preview-table td {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

/* Employee card: assignments wrap only between words, never inside them. */
.employee-assignments-table {
  min-width: 900px;
  table-layout: auto;
}

.employee-assignments-table th,
.employee-assignments-table td {
  width: auto;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.employee-assignments-table th,
.employee-assignments-table td:nth-child(4),
.employee-assignments-table td:nth-child(6),
.employee-assignments-table td:nth-child(7) {
  white-space: nowrap;
}

@media (max-width: 760px) {
  .employee-import-preview-table {
    min-width: 0;
  }
}


/* Competitions: compact one-line list filter with system control geometry. */
html[data-theme] .competition-filter-toolbar {
  display: grid;
  grid-template-columns:
    minmax(280px, 1.6fr)
    minmax(220px, 0.9fr)
    auto;
  align-items: end;
  gap: 14px;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 18px;
}

html[data-theme] .competition-filter-toolbar > .ui-field {
  min-width: 0;
  margin: 0;
}

html[data-theme] .competition-filter-toolbar input,
html[data-theme] .competition-filter-toolbar select,
html[data-theme] .competition-filter-toolbar__submit {
  min-height: var(--pz-control-height, 44px);
  height: var(--pz-control-height, 44px);
  box-sizing: border-box;
}

html[data-theme] .competition-filter-toolbar__submit {
  margin: 0;
  padding-inline: 18px;
  white-space: nowrap;
}

html[data-theme] .competition-filter-toolbar__message {
  grid-column: 1 / -1;
  min-height: 0;
  margin: 0;
}

html[data-theme] .competition-filter-toolbar__message:empty {
  display: none;
}

@media (max-width: 760px) {
  html[data-theme] .competition-filter-toolbar {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 16px;
  }

  html[data-theme] .competition-filter-toolbar__submit {
    width: 100%;
  }

  html[data-theme] .competition-filter-toolbar__message {
    grid-column: 1;
  }
}


/* Account: personal interface choices keep native checkboxes at one size.
 * Long labels must wrap without shrinking the checkbox itself. */
#account-interface .account-interface-choice{
  display:flex;
  align-items:flex-start;
  gap:10px;
  width:100%;
  min-width:0;
}
#account-interface .account-interface-choice > input[type="checkbox"]{
  flex:0 0 18px;
  width:18px;
  min-width:18px;
  max-width:18px;
  height:18px;
  min-height:18px;
  max-height:18px;
  margin:1px 0 0;
  box-sizing:border-box;
}
#account-interface .account-interface-choice > span{
  min-width:0;
}
#account-interface .account-interface-choice--required{
  cursor:default;
}
#account-interface .account-interface-choice--required > input[type="checkbox"]{
  opacity:1;
  cursor:not-allowed;
}
#account-interface .account-interface-required{
  flex:0 0 auto;
  margin-left:auto;
  color:var(--theme-text-muted);
  font-size:.74rem;
  font-weight:650;
}


/* Notifications: the header bell opens an in-place modal. */
.notification-modal{
  width:min(760px,calc(100vw - 32px));
  max-height:calc(100vh - 48px);
  padding:0;
  overflow:auto;
  color:var(--theme-text);
  background:var(--theme-surface);
  border:1px solid var(--theme-border);
  border-radius:16px;
  box-shadow:var(--theme-shadow-strong);
}
.notification-modal::backdrop{
  background:var(--theme-overlay,rgba(0,0,0,.42));
}
.notification-modal__surface{
  display:grid;
  gap:16px;
  padding:20px;
}
.notification-modal__header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}
.notification-modal__title-row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.notification-modal__title-row h2{
  margin:0;
  color:var(--theme-text);
}
.notification-modal__counter{
  margin:6px 0 0;
  color:var(--theme-text-muted);
}
.notification-modal__list{
  display:grid;
  gap:10px;
  min-height:70px;
}
.notification-modal__loading,
.notification-modal__empty{
  margin:0;
  padding:18px;
  color:var(--theme-text-muted);
  text-align:center;
  background:var(--theme-surface-soft);
  border:1px dashed var(--theme-border);
  border-radius:12px;
}
.notification-modal__footer{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.notification-modal__footer .ui-ajax-status{
  margin-left:auto;
}
.notification-modal .notification-card{
  margin:0;
}
@media(max-width:600px){
  .notification-modal{
    width:calc(100vw - 20px);
    max-height:calc(100vh - 20px);
  }
  .notification-modal__surface{
    padding:14px;
  }
  .notification-modal__header{
    display:grid;
  }
  .notification-modal__footer{
    display:grid;
  }
  .notification-modal__footer .btn{
    width:100%;
  }
  .notification-modal__footer .ui-ajax-status{
    margin-left:0;
  }
}

/* Dashboard personal-card compaction: hidden cards must not reserve grid slots. */
@media (min-width: 1101px) {
  .dashboard-grid {
    grid-auto-flow: row dense;
  }

  /*
   * The legacy wrappers keep their DOM role, but stop reserving a whole
   * half/full row. Their visible cards participate directly in the main
   * 12-column grid, so a hidden card is immediately replaced by the next one.
   */
  .dashboard-grid > .dashboard-left-stack,
  .dashboard-grid > .dashboard-quick-grid {
    display: contents;
  }

  .dashboard-grid > .dashboard-left-stack[hidden] {
    display: none !important;
  }

  .dashboard-grid > .dashboard-duties,
  .dashboard-grid > .dashboard-staffing-card,
  .dashboard-grid > .dashboard-birthdays-card,
  .dashboard-grid > .dashboard-user-statistics,
  .dashboard-grid > .dashboard-left-stack > .dashboard-card,
  .dashboard-grid > .dashboard-quick-grid > .dashboard-quick-card {
    grid-column: span 6 !important;
  }

  /*
   * Preserve the compact two-row pairs when every companion is visible.
   * With grid-auto-flow:dense, any missing companion is filled by the next
   * visible personal card instead of leaving an empty reserved cell.
   */
  .dashboard-grid > .dashboard-duties {
    order: 4;
    grid-row: span 2 !important;
  }

  .dashboard-grid > .dashboard-left-stack > .dashboard-today-absences {
    order: 5;
    grid-row: auto !important;
  }

  .dashboard-grid > .dashboard-left-stack > .dashboard-vacation {
    order: 6;
    grid-row: auto !important;
  }

  .dashboard-grid > .dashboard-quick-grid > .dashboard-quick-card--patients {
    order: 7;
    grid-row: auto !important;
  }

  .dashboard-grid > .dashboard-quick-grid > .dashboard-quick-card--deferred {
    order: 8;
    grid-row: span 2 !important;
  }

  .dashboard-grid > .dashboard-quick-grid > .dashboard-quick-card--algorithms {
    order: 9;
    grid-row: auto !important;
  }

  .dashboard-grid > .dashboard-staffing-card {
    order: 10 !important;
    grid-row: span 2 !important;
  }

  .dashboard-grid > .dashboard-birthdays-card {
    order: 11 !important;
    grid-row: auto !important;
  }

  .dashboard-grid > .dashboard-user-statistics {
    order: 12 !important;
    grid-row: auto !important;
  }

  .dashboard-grid
  > .dashboard-quick-grid:not(.dashboard-quick-grid--adaptive)
  > .dashboard-quick-card--patients,
  .dashboard-grid
  > .dashboard-quick-grid:not(.dashboard-quick-grid--adaptive)
  > .dashboard-quick-card--algorithms {
    box-sizing: border-box;
    height: 210px;
    min-height: 210px;
    max-height: 210px;
  }

  .dashboard-grid
  > .dashboard-quick-grid:not(.dashboard-quick-grid--adaptive)
  > .dashboard-quick-card--deferred {
    box-sizing: border-box;
    height: 440px;
    min-height: 440px;
    max-height: 440px;
  }

  .dashboard-grid
  > .dashboard-quick-grid.dashboard-quick-grid--adaptive
  > .dashboard-quick-card {
    height: auto;
    min-height: 210px;
    max-height: none;
    grid-row: auto !important;
  }
}