/* v0.8.1: readable actions without enlarging the fixed mobile panels. */
:root {
  --button-font-size: 15px;
  --button-compact-font-size: 14px;
  --button-font-weight: 700;
  --button-radius: 10px;
}

.btn,
.quick-toolbar .btn,
.page-heading .heading-actions .btn,
.page[data-page="cash"] .heading-actions .btn,
.warehouse-page .heading-actions .btn,
.finance-page-actions .btn,
.finance-payroll-actions .btn,
.docs-folders > .btn,
.docs-filters > .btn,
.representative-match .btn,
.image-crop-tools .btn,
.image-upload-controls .btn {
  font-size: var(--button-font-size);
  font-weight: var(--button-font-weight);
  line-height: 1.35;
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

.btn.small,
.catalog-card-actions .btn,
.docs-actions .btn,
.tariff-version-row .btn,
.warehouse-panel-heading .btn,
.warehouse-row-actions .btn,
.warehouse-table td .btn,
.warehouse-pagination .btn,
.finance-line-amount .btn {
  font-size: var(--button-compact-font-size);
  font-weight: var(--button-font-weight);
  line-height: 1.35;
  min-height: 38px;
}

.tab,
.catalog-tabs .tab,
.finance-tabs .tab,
.warehouse-tabs .warehouse-tab,
.contact-mode-options button,
.contact-mode-options button[aria-pressed="true"],
.docs-folder,
.docs-folder[aria-current="true"],
.docs-folder[aria-pressed="true"],
.date-controls .today-button,
.date-controls .btn.ghost,
.calendar-shortcuts .btn.ghost,
.mobile-calendar .calendar-shortcuts .btn.ghost,
.mobile-calendar-panel .calendar-shortcuts .btn.ghost,
.metrics-toggle,
.warehouse-more > summary {
  font-size: var(--button-compact-font-size);
  font-weight: var(--button-font-weight);
  line-height: 1.35;
}

.tab,
.catalog-tabs .tab,
.contact-mode-options button {
  min-height: 40px;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Names and labels remain readable when the whole row is interactive. */
.text-link,
.warehouse-product .text-link,
.table-wrap td:first-child .text-link,
.sheet-item-content strong,
.quick-action span,
.sale-product-option > strong {
  font-size: var(--button-font-size);
  font-weight: var(--button-font-weight);
}

.btn > span,
.quick-action span,
.nav a,
.branch-chip,
.sheet-item-content strong,
.sale-product-option > b {
  font-weight: var(--button-font-weight);
}

.branch-chip { font-size: var(--button-compact-font-size); }
.panel-link { font-size: var(--button-compact-font-size); font-weight: 700; }
.calendar-day, .calendar-card .calendar-day { font-size: 13px; font-weight: 700; }
.sidebar-calendar .calendar-day { font-size: 12px; font-weight: 700; }

.dialog-footer .btn,
.auth-form .btn {
  font-size: 16px;
  font-weight: var(--button-font-weight);
  line-height: 1.35;
}

.field input[type="file"]::file-selector-button {
  font-size: var(--button-compact-font-size);
  font-weight: var(--button-font-weight);
}

/* Long action labels wrap inside the available width rather than widening cards. */
.heading-actions,
.warehouse-panel-heading .actions,
.warehouse-row-actions,
.catalog-card-actions,
.docs-actions,
.finance-filter-actions {
  min-width: 0;
  flex-wrap: wrap;
}
.warehouse-panel-heading { flex-wrap: wrap; }

@media (max-width: 860px) {
  .btn,
  .btn.small,
  .catalog-card-actions .btn,
  .docs-actions .btn,
  .tariff-version-row .btn,
  .warehouse-panel-heading .btn,
  .warehouse-row-actions .btn,
  .warehouse-table td .btn,
  .warehouse-pagination .btn,
  .finance-line-amount .btn,
  .image-crop-tools .btn,
  .image-upload-controls .btn,
  .finance-filter-actions .btn,
  .tab,
  .catalog-tabs .tab,
  .finance-tabs .tab,
  .warehouse-tabs .warehouse-tab,
  .contact-mode-options button,
  .metrics-toggle,
  .warehouse-more > summary {
    min-height: 44px;
  }

  .quick-toolbar .btn { font-size: 15px; padding-inline: 10px; }
  .topbar .branch-chip, .mobile-date-trigger { font-size: 13px; font-weight: 700; }
  .mobile-nav > a, .mobile-nav > button { font-size: 14px; font-weight: 700; line-height: 1.2; }
  .mobile-nav > .mobile-sell-button { font-weight: 700; }
  .mobile-nav > a span, .mobile-nav > button span { max-width: 100%; overflow-wrap: anywhere; }
  .mobile-calendar-panel .calendar-day { min-height: 44px; font-size: 14px; font-weight: 700; }

  .dialog-footer .btn { min-width: 0; white-space: normal; }
  .docs-filters { flex-wrap: wrap; }
  .docs-filters > .btn { flex: 1 1 140px; padding-inline: 10px; }
  .finance-filter-actions { width: 100%; }
  .finance-filter-actions .btn { flex: 1 1 auto; }
}

@media (max-width: 374px) {
  /* Five navigation destinations still fit the narrowest supported phone. */
  .mobile-nav > a, .mobile-nav > button { font-size: 13px; }
  .topbar .branch-chip { font-size: 12px; }
}

/* v0.8.2: approved option 3 — solid main action and clearly outlined alternatives.
   Repeating .btn intentionally beats older contextual colours without !important.
   Calendar controls, zoom glyphs and icon-only buttons keep their compact treatment. */
.btn.btn:not(:where(.icon-btn, .calendar-day, .stat, .date-controls .btn, .calendar-shortcuts .btn, .image-crop-zoom .btn)) {
  border: 2px solid var(--accent);
  background: var(--accent);
  color: #fff;
  box-shadow: none;
  transition: background-color .15s ease, color .15s ease, filter .15s ease;
}

.btn.btn:is(.secondary, .ghost):not(:where(.icon-btn, .calendar-day, .stat, .date-controls .btn, .calendar-shortcuts .btn, .image-crop-zoom .btn)) {
  background: #fff;
  border-color: var(--accent);
  color: var(--accent-ink);
}

/* Former text-only actions need breathing room inside their new outline. */
.btn.btn.ghost:not(:where(.date-controls .btn, .calendar-shortcuts .btn, .image-crop-zoom .btn)) {
  padding: 8px 12px;
}
.btn.btn.ghost.small:not(:where(.date-controls .btn, .calendar-shortcuts .btn, .image-crop-zoom .btn)) {
  padding: 6px 9px;
}

.btn.btn.danger {
  background: #fff0f3;
  border-color: var(--danger);
  color: var(--danger);
}

.quick-toolbar .btn:not(:where(.secondary, .ghost, .danger)) > svg {
  color: currentColor;
}

/* A selected crop mode remains visibly selected, not another main action. */
.image-crop-tools .btn.btn[aria-pressed="true"] {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-ink);
}

@media (hover: hover) {
  .btn.btn:hover:not(:where(:disabled, [aria-disabled="true"], .icon-btn, .calendar-day, .stat, .date-controls .btn, .calendar-shortcuts .btn, .image-crop-zoom .btn)) {
    filter: brightness(.94);
  }
  .quick-toolbar .btn:not(:where(.secondary, .ghost, .danger, :disabled, [aria-disabled="true"])):hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
  }
  .btn.btn:is(.secondary, .ghost):hover:not(:where(:disabled, [aria-disabled="true"], .danger, .date-controls .btn, .calendar-shortcuts .btn, .image-crop-zoom .btn)) {
    background: var(--accent-soft);
    border-color: var(--accent);
    filter: none;
  }
}

.btn.btn:active:not(:where(:disabled, [aria-disabled="true"], .icon-btn, .calendar-day, .stat, .date-controls .btn, .calendar-shortcuts .btn, .image-crop-zoom .btn)) {
  filter: brightness(.9);
}
.btn.btn:focus-visible,
.image-upload-controls label.btn:focus-within {
  outline: 3px solid var(--accent-ink);
  outline-offset: 3px;
}

/* Disabled controls stay legible but cannot be mistaken for available actions. */
.btn.btn:disabled,
.btn.btn[aria-disabled="true"],
.image-crop-tools .btn.btn:disabled,
.image-crop-tools .btn.btn[aria-disabled="true"] {
  background: #edf1f5;
  border-color: #bdc8d4;
  color: #657386;
  opacity: 1;
  box-shadow: none;
  filter: none;
  cursor: not-allowed;
}
.btn.btn:disabled > svg,
.btn.btn[aria-disabled="true"] > svg { color: currentColor; }

@media (prefers-reduced-motion: reduce) {
  .btn.btn { transition: none; }
}

/* v0.8.3: one staff directory, with trainer controls beside their own section. */
.staff-trainers.has-staff-accounts {
  border-top: 1px solid var(--line);
  margin-top: 4px;
  padding-top: 18px;
}
.staff-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 6px;
}
.staff-section-head h3 { font-size: 14px; font-weight: 700; margin: 0; }
.staff-section-head > .actions { min-width: 0; flex-wrap: wrap; }
.staff-trainers > .small-print { margin-top: 12px; }

/* v0.8.4: focus follows the complete rounded search field, including its icon. */
.search:focus-within,
.warehouse-search:focus-within,
.global-search:focus-within,
.app-shell .global-search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent);
}
.search input:focus,
.search input:focus-visible,
.warehouse-search input:focus,
.warehouse-search input:focus-visible,
.global-search input:focus,
.global-search input:focus-visible {
  outline: none;
  box-shadow: none;
}
.search > svg, .warehouse-search > svg { flex-shrink: 0; }

/* Keep a visible replacement focus indicator when shadows are suppressed. */
@media (forced-colors: active) {
  .search:focus-within,
  .warehouse-search:focus-within,
  .global-search:focus-within {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }
}

/* Group details flow within the settings column; the action never breaks apart. */
.settings-groups-list { min-width: 0; }
.settings-group-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px 16px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--line);
}
.settings-group-row:last-child { border-bottom: 0; }
.settings-group-copy { flex: 1 1 240px; min-width: 0; }
.settings-group-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 7px 10px; }
.settings-group-heading > strong { font-size: 14px; line-height: 1.5; font-weight: 700; overflow-wrap: anywhere; }
.settings-group-schedule { color: var(--muted); font-size: 12px; line-height: 1.6; margin-top: 5px; overflow-wrap: anywhere; }
.settings-group-facts { display: flex; flex-wrap: wrap; gap: 9px 18px; margin: 12px 0 0; }
.settings-group-facts > div { flex: 1 1 120px; min-width: 0; }
.settings-group-facts dt { color: var(--muted); font-size: 11px; line-height: 1.4; }
.settings-group-facts dd { margin: 3px 0 0; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.settings-group-actions { display: flex; flex: 0 0 auto; max-width: 100%; margin-left: auto; }
.settings-group-actions .btn { white-space: nowrap; overflow-wrap: normal; flex-shrink: 0; }
.settings-group-scope,
.settings-group-branch {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 4px 8px;
  border: 1px solid #b8c6d8;
  border-radius: 6px;
  background: #e8eef5;
  color: #435c78;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: normal;
  white-space: normal;
  overflow-wrap: anywhere;
}
.settings-group-scope { margin-left: 6px; vertical-align: middle; }
:is(.settings-group-scope, .settings-group-branch)[data-branch-tone="mgimo"] {
  background: #dceffc;
  border-color: #97c8e9;
  color: #0b6093;
}
:is(.settings-group-scope, .settings-group-branch)[data-branch-tone="novo"] {
  background: #ffead9;
  border-color: #e4b28b;
  color: #914817;
}
@media (max-width: 580px) {
  .settings-group-row { padding: 16px; }
  .settings-group-heading > strong { font-size: 15px; }
  .settings-group-actions .btn { min-height: 44px; }
}

/* v0.8.5: five clear mobile destinations, with a full-size touch target. */
@media (max-width: 860px) {
  .mobile-nav > a, .mobile-nav > button {
    min-height: 52px;
    padding-inline: 2px;
    gap: 4px;
  }
  .mobile-nav > a svg, .mobile-nav > button svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }
  .mobile-nav > a span, .mobile-nav > button span {
    white-space: nowrap;
    overflow-wrap: normal;
  }
}
@media (max-width: 340px) {
  .mobile-nav > a, .mobile-nav > button { font-size: 12px; }
}

/* v0.8.6: one reading order for desktop rows and the mobile column. */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  align-items: start;
}
.settings-grid > .panel { margin-bottom: 0; }
@media (max-width: 1200px) {
  .settings-grid { gap: 16px; }
}
@media (max-width: 860px) {
  .settings-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}

/* v0.8.7: recognizable trainers and readable age / schedule in group settings. */
.settings-group-heading > strong { color: #253242; font-size: 19px; line-height: 1.4; }
.settings-group-timing { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; }
.settings-group-age { padding: 5px 9px; border-radius: 7px; background: #e1eff8; color: #155979; font-size: 16px; font-weight: 700; line-height: 1.45; overflow-wrap: anywhere; }
.settings-group-schedule { display: flex; align-items: flex-start; gap: 7px; margin: 0; color: #253242; font-size: 16px; font-weight: 650; line-height: 1.5; }
.settings-group-schedule svg { flex: 0 0 18px; margin-top: 3px; color: #176d94; }
.settings-group-facts { align-items: flex-start; gap: 14px 18px; margin-top: 16px; }
.settings-group-facts dt { color: #586675; font-size: 12px; }
.settings-group-facts dd { font-size: 14px; line-height: 1.5; }
.settings-group-facts .settings-group-trainer { flex-basis: 170px; }
.settings-group-trainer dd { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.staff-portrait.group-trainer-portrait { width: 44px; height: 55px; flex: 0 0 44px; border-radius: 9px; }
.group-trainer-portrait .staff-initials { font-size: 15px; }
.trainer-picker { min-width: 0; }
.trainer-picker-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
.trainer-choice { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 72px; padding: 8px 10px; border: 1px solid #aabac6; border-radius: 10px; background: #fff; color: #253242; font: inherit; font-size: 14px; font-weight: 600; line-height: 1.4; text-align: left; cursor: pointer; }
.trainer-choice > span:not(.staff-portrait) { overflow-wrap: anywhere; }
.trainer-choice:hover { background: #f0f7fb; border-color: #277da4; }
.trainer-choice[aria-pressed="true"] { background: #e3f2fb; border-color: #137aaa; box-shadow: inset 0 0 0 1px #137aaa; }
.trainer-choice:focus-visible { outline: 3px solid #137aaa; outline-offset: 3px; }
.trainer-choice-check { display: flex; flex: 0 0 18px; margin-left: auto; color: #0b658c; visibility: hidden; }
.trainer-choice[aria-pressed="true"] .trainer-choice-check { visibility: visible; }
.trainer-choice:disabled { cursor: wait; opacity: .65; }
@media (max-width: 580px) {
  .settings-group-heading > strong { font-size: 18px; }
  .trainer-picker-options { grid-template-columns: minmax(0, 1fr); }
}

/* v0.8.8: three account balances, followed by customer payments and debt. */
.cash-stats { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.cash-stats > .stat { grid-column: span 2; }
.cash-stats > .stat:nth-child(n+4) { grid-column: span 3; }
@media (max-width: 860px) {
  .cash-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cash-stats > .stat, .cash-stats > .stat:nth-child(n+4) { grid-column: auto; }
  .cash-stats > .stat:nth-child(3) { grid-column: 1 / -1; }
}

/* v0.8.9: compact settings; panels keep their reading order and own height. */
.page[data-page="settings"] { max-width: none; }
.settings-workspace { --settings-gap: 12px; }
.settings-workspace .page-heading { margin-bottom: 12px; }
.settings-workspace .panel { min-width: 0; margin-bottom: 12px; }
.settings-workspace .panel-head { padding: 12px 14px; gap: 8px; }
.settings-workspace .panel-head h2 { font-size: 16px; line-height: 1.4; }
.settings-workspace .panel-body { padding: 12px 14px; }
.settings-workspace .btn { min-height: 38px; padding: 7px 10px; font-size: 13px; gap: 5px; }
.settings-workspace .actions { gap: 6px; }
.settings-workspace .settings-row { padding: 10px 0; gap: 8px; }
.settings-workspace .settings-row:first-child { padding-top: 0; }
.settings-workspace .settings-row:last-child { padding-bottom: 0; }
.settings-workspace .settings-row small { margin-top: 2px; line-height: 1.4; }
.settings-workspace .staff-identity { gap: 9px; flex-basis: 160px; }
.settings-workspace .staff-identity .text-link { font-size: 15px; line-height: 1.4; }
.settings-workspace .staff-portrait { width: 44px; height: 55px; border-radius: 9px; }
.settings-workspace .staff-initials { font-size: 15px; }
.settings-workspace .staff-trainers.has-staff-accounts { padding-top: 10px; margin-top: 10px; }
.settings-workspace .staff-section-head { gap: 6px; margin-bottom: 8px; }
.settings-workspace .staff-row > .actions { flex-wrap: wrap; }
.settings-workspace .setting-actions { margin-top: 10px; gap: 6px; }
.settings-workspace .backup-status { margin-top: 8px; gap: 4px; }
.settings-workspace .backup-more { margin-top: 10px; padding-top: 6px; }
.settings-workspace .notice { padding: 10px 12px; margin-bottom: 12px; }
.settings-workspace .empty { padding: 22px 16px; gap: 8px; }
.settings-grid { gap: var(--settings-gap, 12px); }
.settings-grid > .panel { margin-bottom: 0; }
.settings-grid.settings-grid-packed { grid-auto-rows: 1px; row-gap: 0; grid-auto-flow: row; }
.settings-grid.settings-grid-packed > .panel { align-self: start; }
.settings-account > .panel { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; }
.settings-account .panel-head { border-bottom: 0; }
.settings-account .panel-body { padding-left: 0; }
.settings-account .settings-row { padding: 0; }
.settings-workspace .settings-group-row { display: block; padding: 12px 14px; }
.settings-group-top { display: flex; align-items: flex-start; gap: 10px; }
.settings-group-top .settings-group-heading { flex: 1; min-width: 0; gap: 5px 8px; }
.settings-workspace .settings-group-heading > strong { font-size: 18px; line-height: 1.35; }
.settings-group-top .settings-group-actions { flex: 0 0 auto; }
.settings-workspace .settings-group-actions .btn { font-size: 12px; padding-inline: 8px; }
.settings-workspace .settings-group-timing { gap: 5px 10px; margin-top: 8px; }
.settings-workspace .settings-group-age { padding: 3px 7px; font-size: 16px; }
.settings-workspace .settings-group-schedule { font-size: 16px; line-height: 1.4; }
.settings-workspace .settings-group-facts { margin-top: 10px; gap: 8px 12px; }
.settings-workspace .settings-group-facts > div { flex-basis: 120px; }
.settings-workspace .settings-group-facts dd { font-size: 14px; line-height: 1.4; }
.settings-workspace .settings-group-trainer dd { gap: 8px; }
.settings-workspace .action-log-entry { padding: 8px 0; }
.settings-workspace .action-log-title { margin-top: 3px; }
.settings-workspace .action-log-description { margin-top: 3px; line-height: 1.45; }
.settings-workspace .action-log-branch { margin-top: 3px; }
.settings-workspace .action-log-preview-count { padding-top: 8px; }
.settings-workspace th { padding: 10px 14px; white-space: normal; }
.settings-workspace td { padding: 10px 14px; }
@media (min-width: 1600px) {
  .settings-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .settings-grid, .settings-grid.settings-grid-packed { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; row-gap: 12px; }
  .settings-grid.settings-grid-packed > .panel { grid-row: auto !important; }
  .settings-workspace .btn { min-height: 44px; }
  .settings-account > .panel { display: block; }
  .settings-account .panel-head { padding-bottom: 4px; }
  .settings-account .panel-body { padding: 8px 14px 12px; }
  .settings-workspace .staff-row > .actions { gap: 6px; }
}
@media (max-width: 580px) {
  .settings-workspace .panel-head { padding: 10px 12px; }
  .settings-workspace .panel-body, .settings-workspace .settings-group-row { padding: 10px 12px; }
  .settings-account .panel-head { padding-bottom: 2px; }
  .settings-workspace .settings-row { padding-block: 8px; }
  .settings-workspace .settings-group-actions .btn { min-height: 44px; }
  .settings-workspace .table-wrap tr { padding: 10px 12px; gap: 8px 10px; }
  .settings-workspace .settings-group-scope { margin-left: 3px; padding: 3px 6px; }
}

/* Compact work screens: keep primary controls visible and details available. */
.page:is([data-page="home"],[data-page="clients"],[data-page="client"],[data-page="finance"],[data-page="subscriptions"]){padding-top:14px}
.page:is([data-page="clients"],[data-page="finance"],[data-page="subscriptions"]) .desk-heading{margin-bottom:10px}
.quick-toolbar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr;align-items:stretch;gap:8px;margin-bottom:12px}
.quick-toolbar .btn{width:100%;height:100%;min-height:56px;justify-content:center;padding:10px 12px}
.clients-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:12px}
.clients-toolbar .search{flex:1 1 260px;min-width:0}
.clients-toolbar-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.client-file-actions{font-size:13px}
.client-file-actions summary{cursor:pointer;padding:12px 8px;min-height:44px}
.client-file-actions>div{display:flex;flex-wrap:wrap;gap:8px;padding:6px 0}
.page[data-page="clients"] .panel-head{padding:12px 16px}
.page[data-page="clients"] .table-wrap :is(th,td){padding:10px 14px}
.page[data-page="clients"] .table-wrap .text-link{min-height:32px;display:inline-flex;align-items:center}
.client-summary-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:12px;align-items:start}
.client-summary-grid>.panel{min-width:0;margin-bottom:12px}
.client-summary-grid .panel-head{padding:12px 16px}
.client-summary-grid .panel-body{padding:12px 16px}
.catalog-unified>.panel{margin-bottom:12px}
.dashboard-activity>summary{cursor:pointer;padding:14px 16px;font-weight:600}
.dashboard-finance{margin-bottom:12px;min-width:0}
.dashboard-finance .panel-head{padding:12px 16px;gap:10px}
.dashboard-finance .finance-stats{padding:0 12px;gap:8px;margin-bottom:10px}
.dashboard-finance .finance-stat{padding:10px 12px;min-height:0;gap:4px}
.dashboard-finance .finance-stat strong{font-size:20px}
.dashboard-finance .finance-table :is(td,th){padding:10px 14px}
.dashboard-finance-more{padding:0 16px 12px;margin:0}
.sales-plan-summary{padding:12px 16px;margin-bottom:12px}
.sales-plan-card{padding-top:10px;margin-top:8px}
.sales-plan-values{margin:10px 0;gap:10px}
.sales-plan-card .small-print{font-size:12px;line-height:1.45}
.finance-payroll-grid{align-items:start;gap:12px}
.finance-payroll-card .panel-head{padding:12px;flex-wrap:wrap;gap:8px}
.finance-payroll-card .panel-head p{margin:4px 0 0;line-height:1.4}
.finance-payroll-card .finance-stats{padding:0 12px;gap:6px}
.finance-payroll-card .finance-stat{padding:10px 6px;gap:4px;min-height:0}
.finance-payroll-card .finance-stat strong{font-size:16px;letter-spacing:-.25px}
.finance-payroll-details{padding:0 12px 10px}
.finance-payroll-details summary{min-height:44px;display:flex;align-items:center;gap:6px}
.finance-payroll-details summary:before{content:'▸'}
.finance-payroll-details[open] summary:before{content:'▾'}
.finance-payroll-details .finance-salary-components{grid-template-columns:1fr;padding:8px 0}
.finance-payroll-details .finance-plan-progress{margin:6px 0}
.finance-payroll-actions{padding:10px 12px;gap:6px}
.finance-payroll-actions .btn{flex:1 1 120px;min-height:44px;white-space:normal;padding:8px}
.finance-approval-note{font-size:11px;padding:0 12px 10px}
.finance-rule-history{padding:10px 14px;margin-bottom:10px}
.finance-rule-history>summary{min-height:36px;padding-top:8px}
@media(min-width:1180px){
 .finance-payroll-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 .finance-page[data-finance-view="payroll"]{display:grid;grid-template-columns:minmax(160px,1fr) auto;column-gap:12px;align-items:start}
 .finance-page[data-finance-view="payroll"]>*{grid-column:1/-1}
 .finance-page[data-finance-view="payroll"]>.finance-filters{grid-column:1;padding:10px;margin-bottom:12px}
 .finance-page[data-finance-view="payroll"]>.finance-page-actions{grid-column:2;align-self:center;margin-bottom:12px}
 .finance-page[data-finance-view="payroll"] .finance-tabs{margin-bottom:12px}
}
@media(min-width:761px) and (max-width:1179px){.finance-payroll-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){
 .finance-payroll-grid,.client-summary-grid{grid-template-columns:1fr}
 .clients-toolbar-actions{width:100%;justify-content:space-between}
 .quick-toolbar{grid-template-columns:repeat(2,minmax(0,1fr))}
 .quick-toolbar .btn{min-height:60px;font-size:14px}
}
@media(max-width:580px){
 .page:is([data-page="home"],[data-page="clients"],[data-page="client"],[data-page="finance"],[data-page="subscriptions"]){padding:12px 12px 24px}
 .clients-toolbar .search{flex-basis:100%}
 .page[data-page="clients"] .table-wrap tr{gap:8px;padding:12px}
 .page[data-page="clients"] .table-wrap td{padding:0}
 .page[data-page="clients"] .table-wrap .text-link{min-height:44px}
 .finance-payroll-card .finance-stat strong{font-size:17px}
 .dashboard-finance .finance-stat strong{font-size:17px}
 .dashboard-finance .finance-stat{padding:9px 6px}
 .dashboard-finance .finance-table tr{padding:12px;gap:8px}
 .catalog-unified .catalog-card .btn{min-height:44px}
 .sales-plan-heading input{font-size:16px;min-height:44px}
}

/* One action shape across work screens; labels wrap at words. */
.btn,
.quick-toolbar .btn,
.topbar .branch-chip,
.date-controls button,
.calendar-head button,
.calendar-shortcuts button,
.mobile-nav > a,
.mobile-nav > button,
.app-shell .funnel-page .funnel-edit-button,
.app-shell .funnel-page .funnel-inline-editor .funnel-inline-actions .btn.small,
.top-controls .icon-btn,
.icon-btn,
.branch-switch .branch-chip,
.branch-chip,
.mobile-date-trigger,
.catalog-tabs .tab,
.tab,
.finance-tabs .tab,
.warehouse-tabs .warehouse-tab,
.contact-mode-options button,
.image-crop-tools .btn,
.image-upload-controls .btn {
  border-radius: var(--button-radius);
}
.btn {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
.btn > svg, .icon-btn > svg { flex-shrink: 0; }
@media (min-width: 1280px) {
  .quick-toolbar { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* v0.9.18: compact workspace, a persistent account entry and vertical details. */
.brand, .mobile-brand { background: transparent; text-align: left; color: var(--ink); }
.brand { display: block; width: 100%; }
.app-shell .wordmark span { margin-inline: 0; }
.topbar { position: sticky; top: 0; z-index: 25; min-height: 60px; padding: 8px 22px; gap: 14px; }
.top-controls { margin-left: auto; gap: 8px; flex-shrink: 0; }
.top-profile { display: flex; align-items: center; gap: 8px; min-width: 44px; min-height: 44px; max-width: 220px; padding: 4px 9px 4px 5px; border: 1px solid var(--chrome-line); border-radius: var(--button-radius); background: #ffffffb3; color: var(--ink); }
.top-profile:hover, .top-profile.active { background: #fff; border-color: var(--accent); }
.top-profile .profile-portrait { width: 30px; height: 34px; flex: none; }
.top-profile-copy { min-width: 0; display: grid; gap: 2px; }
.top-profile-copy strong { font-size: 12px; font-weight: 700; line-height: 1.3; }
.top-profile-copy small { font-size: 11px; line-height: 1.3; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.top-controls .notification-control { width: 44px; min-width: 44px; height: 44px; padding: 10px; }
.topbar .branch-chip { min-height: 40px; padding: 8px 10px; }
.page { padding-inline: 22px; }
.app-shell .desk-heading { gap: 16px; margin-bottom: 10px; }
.page[data-page="home"] .quick-toolbar { gap: 8px; margin-bottom: 12px; }
.page[data-page="home"] .quick-toolbar .btn { min-height: 48px; padding: 8px 10px; font-size: 14px; }
.page[data-page="home"] .dashboard-finance { margin-bottom: 14px; }
.page[data-page="home"] .dashboard-finance .panel-head { padding: 10px 14px; }
.page[data-page="home"] .dashboard-finance .finance-empty { padding: 24px 16px; min-height: 0; font-size: 13px; line-height: 1.5; }
.page[data-page="home"] .dashboard-summary { margin-bottom: 12px; }
.page[data-page="home"] .dashboard-summary-heading { margin-bottom: 8px; }
.page[data-page="home"] .dashboard-metrics { gap: 8px; }
.page[data-page="home"] .dashboard-metric { min-height: 112px; padding: 12px; }
.page[data-page="home"] .dashboard-metric-label { font-size: 12px; line-height: 1.4; }
.page[data-page="home"] .dashboard-metric-value { margin-top: 8px; font-size: clamp(22px, 1.9vw, 28px); line-height: 1.2; }
.page[data-page="home"] .dashboard-metric-note { margin-top: 6px; font-size: 11px; line-height: 1.4; }
.dashboard-activity > summary { padding: 12px 14px; }

.events-page { min-width: 0; }
.events-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 10px 16px; margin-bottom: 14px; }
.events-toolbar .calendar-list-actions { margin: 0; align-items: center; }
.events-date-filter { display: flex; flex-direction: column; gap: 6px; margin: 0; flex: 0 1 190px; min-width: 0; }
.events-date-filter > span { font-size: 12px; font-weight: 600; color: var(--muted); }
.events-date-filter input { width: 100%; min-width: 0; min-height: 44px; padding: 9px 10px; border: 1px solid var(--line); border-radius: var(--button-radius); background: #fff; color: var(--ink); font-size: 14px; }
.events-content { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.events-content:has(.events-range-picker) { grid-template-columns: 270px minmax(0, 1fr); }
.events-range-picker, .events-list-panel { min-width: 0; margin: 0; }
.events-range-picker .calendar-card { padding: 12px; }
.events-range-picker .calendar-head button { min-width: 36px; min-height: 36px; }
.events-range-picker .calendar-day { min-height: 36px; font-size: 13px; }
.events-range-picker .calendar-selection-note { margin-top: 10px; }
.events-list-panel .calendar-events-list { gap: 8px; }
.events-list-panel > .small-print { margin: 0 0 10px; font-size: 12px; line-height: 1.5; }
.events-list-panel .calendar-event-row { padding: 12px 14px; }
.calendar-event-row > span, .calendar-event-row > small { overflow-wrap: anywhere; }

dialog { max-width: calc(100vw - 24px); }
.dialog-header { padding: 16px 18px 12px; gap: 12px; }
.dialog-header > div { min-width: 0; }
.dialog-header h2 { font-size: 20px; line-height: 1.3; overflow-wrap: anywhere; }
.dialog-header p { margin-top: 5px; line-height: 1.5; }
.dialog-header .icon-btn { flex: none; min-width: 44px; min-height: 44px; margin: -5px -7px 0 0; }
.dialog-fields { padding: 14px 18px 4px; min-width: 0; }
.dialog-footer { padding: 10px 18px; gap: 8px; }
dialog[data-layout="dashboard"] { width: min(760px, calc(100vw - 24px)); }
dialog[data-layout="dashboard"] .notice { padding: 10px 12px; margin-bottom: 10px; font-size: 13px; line-height: 1.5; }
dialog[data-layout="dashboard"] .small-print { font-size: 12px; line-height: 1.5; margin-bottom: 12px; }
.dashboard-detail-list { display: grid; gap: 8px; min-width: 0; margin-bottom: 12px; }
.dashboard-detail-note { margin-bottom: 10px; }
.dashboard-detail-note > summary { cursor: pointer; color: var(--muted); font-size: 13px; line-height: 1.5; padding: 9px 0; min-height: 38px; }
.dashboard-detail-note > .small-print { margin-top: 4px; }
.dashboard-detail-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, 210px); align-items: center; gap: 10px 16px; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.dashboard-detail-row:not(:has(.dashboard-detail-value)) { grid-template-columns: minmax(0, 1fr); }
.dashboard-detail-copy { min-width: 0; display: grid; gap: 4px; overflow-wrap: anywhere; }
.dashboard-detail-copy > strong, .dashboard-detail-copy > a, .dashboard-detail-copy .text-link { font-size: 15px; line-height: 1.4; }
.dashboard-detail-copy > a:hover { text-decoration: underline; text-underline-offset: 3px; }
.dashboard-detail-copy > small, .dashboard-detail-copy > span { font-size: 12px; line-height: 1.5; color: var(--muted); }
.dashboard-detail-value, .debt-amounts { min-width: 0; text-align: right; font-size: 16px; line-height: 1.4; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dashboard-detail-value > strong, .dashboard-detail-value > small { display: block; }
.dashboard-detail-value > small { margin-top: 4px; font-size: 12px; line-height: 1.5; }
.debt-amounts { display: grid; gap: 4px; max-width: 215px; }
.debt-amounts strong { font-size: 16px; color: var(--danger); }
.debt-amounts small { font-size: 12px; line-height: 1.5; }
.dashboard-detail-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.dashboard-detail-actions .btn { min-height: 40px; }

@media (min-width: 861px) {
  .sidebar { overflow-y: auto; }
  .sidebar .brand { min-height: 36px; padding-bottom: 10px; }
  .sidebar-calendar { margin-bottom: 10px; }
  .sidebar .nav a { min-height: 38px; padding-block: 9px; }
}
@media (min-width: 861px) and (max-width: 1100px) {
  .top-profile-copy { display: none; }
  .top-profile { padding: 4px 6px; justify-content: center; }
  .topbar { gap: 10px; }
}
@media (max-width: 860px) {
  .topbar { position: fixed; z-index: 35; padding: calc(8px + env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left)); gap: 8px; }
  .topbar .mobile-brand { display: block; padding: 8px 0; font-size: 19px; min-height: 44px; }
  .topbar .branch-chip { min-height: 44px; padding: 7px 6px; }
  .topbar .top-controls { gap: 6px; }
  .top-profile { padding: 4px 6px; justify-content: center; width: 44px; }
  .top-profile-copy { display: none; }
  .page[data-page="home"] .quick-toolbar .btn { min-height: 52px; padding: 8px; }
  .page[data-page="home"] .dashboard-metric { min-height: 108px; padding: 11px; }
  .page[data-page="home"] .dashboard-metric-value { font-size: 24px; }
  .events-content:has(.events-range-picker) { grid-template-columns: minmax(0, 1fr); }
  .events-range-picker { width: min(100%, 360px); }
  .events-range-picker .calendar-day, .events-range-picker .calendar-head button { min-height: 44px; }
}
@media (max-width: 600px) {
  .app-shell { --mobile-topbar-height: 106px; }
  .topbar { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 44px 44px; column-gap: 10px; row-gap: 2px; }
  .topbar .mobile-brand { grid-column: 1; grid-row: 1; display: block; font-size: 19px; }
  .topbar .top-controls { grid-column: 2; grid-row: 1; margin-left: auto; gap: 6px; }
  .topbar .branch-switcher { grid-column: 1 / -1; grid-row: 2; width: 100%; gap: 6px; }
  .topbar .branch-chip { flex: 1 1 0; font-size: 13px; padding-inline: 6px; }
  .mobile-date-trigger { min-width: 72px; font-size: 12px; }
  .page, .page[data-page="events"] { padding-inline: 12px; }
  .events-toolbar { align-items: stretch; }
  .events-toolbar .calendar-list-actions { width: 100%; }
  .events-toolbar .calendar-list-actions .btn { flex: 1 1 130px; min-height: 44px; }
  .events-date-filter { flex: 1 1 100%; }
  .events-date-filter input { font-size: 16px; }
  .dashboard-detail-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .dashboard-detail-value, .debt-amounts { text-align: left; max-width: none; }
  .dashboard-detail-actions { grid-column: 1; }
  .dashboard-detail-actions .btn { flex: 1 1 110px; min-height: 44px; }
  .dashboard-detail-note > summary { min-height: 44px; padding-block: 12px; }
  dialog { max-width: calc(100vw - 20px); max-height: calc(100dvh - 24px); }
  dialog[data-layout="dashboard"] { width: calc(100vw - 20px); }
  .dialog-header { padding: 14px 14px 10px; }
  .dialog-header h2 { font-size: 18px; }
  .dialog-fields { padding: 12px 14px 4px; }
  .dialog-footer { padding: 10px 14px max(10px, env(safe-area-inset-bottom)); }
}

/* v0.9.19: readable event colours and configurable calendar reminders. */
.wordmark span, .app-shell .wordmark span { color: #000; }
.calendar-event-row.has-type-color { border-left-color: var(--event-color); background: var(--event-tint); }
.calendar-event-row.has-type-color .calendar-event-type { color: var(--ink); }
.calendar-type-swatch { display: inline-block; width: 12px; height: 12px; flex: none; border: 1px solid #7b879480; border-radius: 3px; vertical-align: middle; }
.calendar-event-date .calendar-type-swatch { margin-right: 8px; }
.calendar-notification-color { color: var(--ink); background: var(--event-tint); border-left: 4px solid var(--event-color); }
/* v0.9.21: round day numbers, independently of the rectangular hit target. */
.calendar-card .calendar-day,
.calendar-card .calendar-day:hover,
.calendar-card .calendar-day.is-selected,
.calendar-card .calendar-day[aria-pressed="true"],
.calendar-card .calendar-day.is-today:not(.is-selected):not([aria-pressed="true"]) {
  background: transparent; box-shadow: none;
}
.calendar-card .calendar-day {
  display: grid; place-items: center; min-height: 30px; padding: 3px 0 5px;
}
.calendar-card .calendar-day-number {
  display: inline-grid; place-items: center; width: 22px; height: 22px;
  flex: none; border-radius: 50%; line-height: 1; color: var(--ink);
}
.calendar-card .calendar-day.is-muted .calendar-day-number { color: #8c97a7; }
.calendar-card .calendar-day:hover .calendar-day-number { background: var(--accent-soft); }
.calendar-card .calendar-day.is-selected .calendar-day-number,
.calendar-card .calendar-day[aria-pressed="true"] .calendar-day-number { background: var(--accent); color: #fff; font-weight: 800; }
.calendar-card .calendar-day.has-event-colors .calendar-day-number { background: var(--event-color, #71818e); color: var(--calendar-day-ink, #fff); box-shadow: inset 0 0 0 1px #00000026; }
.calendar-card .calendar-day.is-selected .calendar-day-number,
.calendar-card .calendar-day[aria-pressed="true"] .calendar-day-number { outline: 2px solid var(--calendar-day-ink, #fff); outline-offset: -2px; }
.calendar-card .calendar-day.is-today .calendar-day-number { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 2px; }
.mobile-calendar-panel .calendar-day, .events-range-picker .calendar-day { min-height: 44px; }
.mobile-calendar-panel .calendar-day-number, .events-range-picker .calendar-day-number { width: 28px; height: 28px; }
.calendar-event-markers { position: absolute; left: 3px; right: 3px; bottom: 0; height: 3px; display: flex; gap: 1px; pointer-events: none; }
.calendar-event-strip { flex: 1 1 0; min-width: 0; background: var(--event-color, #71818e); border-radius: 2px; }
.calendar-event-more { font-size: 7px; line-height: 7px; align-self: center; color: var(--ink); background: white; border-radius: 2px; }
.calendar-card .calendar-day .calendar-dot { left: 1px; top: 2px; bottom: auto; transform: none; background: var(--accent); }
.calendar-type-swatch { background: var(--event-color, #71818e); }
.calendar-card .calendar-shortcuts .calendar-colors-button { padding-inline: 7px; }
.mobile-calendar-panel .calendar-shortcuts button { min-width: 44px; min-height: 44px; }
.calendar-card .calendar-legend { display: flex; align-items: center; justify-content: flex-start; gap: 4px 8px; }
.calendar-card .calendar-legend > .calendar-legend-item { display: inline-flex; align-items: center; gap: 4px; width: auto; height: auto; min-width: 0; max-width: 100%; flex: 0 1 auto; line-height: 1.4; background: transparent; overflow-wrap: anywhere; }
.calendar-card .calendar-legend .calendar-type-swatch { width: 8px; height: 8px; border-radius: 2px; }
.calendar-card .calendar-legend .calendar-dot { position: static; display: inline-block; flex: none; transform: none; }
.calendar-types-actions { margin-bottom: 12px; }
.calendar-types-list { display: grid; gap: 8px; }
.calendar-type-row { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; }
.calendar-type-row strong { overflow-wrap: anywhere; font-size: 14px; line-height: 1.4; }
.calendar-type-row .btn { min-height: 40px; }
.field input[type="color"] { width: 100%; min-height: 44px; padding: 5px; cursor: pointer; }
@media (max-width: 600px) {
  .calendar-type-row { gap: 8px; padding: 9px; }
  .calendar-type-row .btn { min-height: 44px; }
  .calendar-event-more { font-size: 9px; }
}