/* Presentation only: existing routes, controls and role permissions stay in app.js. */
.app-shell {
  --bg: #f5f7f7;
  --surface: #ffffff;
  --surface-soft: #f5f7f7;
  --ink: #202a30;
  --muted: #657078;
  --line: #dce3e5;
  --line-strong: #cbd5d9;
  --brand: #247b94;
  --brand-strong: #064092;
  --brand-soft: #edf5f7;
  --success: #23754c;
  --warning: #95620e;
  --danger: #b33e38;
  --shadow: none;
  --shadow-soft: none;
  --shadow-pop: none;
  min-height: 100vh;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0;
}

.app-shell *,
.app-shell *::before,
.app-shell *::after {
  letter-spacing: 0;
}

.app-shell .sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  padding: 24px 16px 16px;
  gap: 20px;
  overflow-y: auto;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  background: #ffffff;
  box-shadow: none;
}

.app-shell .sidebar::after,
.app-shell .panel::before,
.app-shell .metric::before,
.app-shell .metric::after,
.app-shell .module-hero::after,
.app-shell .comparison-command::after,
.app-shell .client-list-card::before,
.app-shell .client-list-card::after {
  content: none !important;
  display: none !important;
}

.app-shell .sidebar-brand {
  padding: 0 2px 12px;
  justify-content: flex-start;
}

.app-shell .sidebar-brand .brand-logo {
  width: 200px;
  height: 50px;
  max-height: none;
  object-fit: contain;
  filter: none;
}

.app-shell .nav {
  gap: 4px;
}

.app-shell .nav button {
  min-height: 42px;
  padding: 10px;
  gap: 11px;
  border: 0;
  border-radius: 6px;
  color: #58656d;
  background: transparent;
  font-size: 13px;
  font-weight: 550;
  line-height: 1.35;
  box-shadow: none;
  transform: none;
}

.app-shell .nav button:hover {
  color: var(--ink);
  background: #f2f5f5;
}

.app-shell .nav button.active {
  color: #165586;
  background: #edf5f7;
  font-weight: 650;
  box-shadow: inset 3px 0 #247b94;
}

.workspace-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  vertical-align: middle;
}

.app-shell .sidebar-profile {
  margin-top: auto;
  padding: 16px 0 0;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 2px 10px;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.app-shell .profile-avatar {
  grid-row: span 4;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  background: #edf5f7;
  color: #165586;
  font-size: 13px;
  font-weight: 650;
  box-shadow: none;
}

.app-shell .sidebar-profile strong {
  margin: 0;
  font-size: 13px;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.app-shell .sidebar-profile :is(small, em) {
  grid-column: 2;
  font-size: 11px;
}

.app-shell .sidebar-footer {
  padding: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.8;
  overflow-wrap: anywhere;
}

.app-shell .server-status {
  width: 6px;
  height: 6px;
  box-shadow: none;
}

.app-shell .push-control {
  margin: 0;
  padding: 10px;
  border-color: var(--line);
  border-radius: 6px;
  background: #f8faf9;
  box-shadow: none;
}

.app-shell .main {
  min-width: 0;
  min-height: 100vh;
  border: 0;
  border-radius: 0;
  background: var(--bg);
  box-shadow: none;
  overflow: visible;
}

.app-shell .topbar {
  min-height: 112px;
  padding: 24px 28px;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: #ffffff;
  backdrop-filter: none;
}

.app-shell .topbar-title {
  min-width: 0;
}

.app-shell .topbar-title > span {
  color: #247b94;
  font-size: 11px;
  font-weight: 650;
}

.app-shell .topbar h1 {
  margin: 4px 0 0;
  font-size: 24px;
  font-weight: 650;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.app-shell .topbar p {
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.5;
}

.app-shell .topbar-actions {
  gap: 12px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.app-shell .user-chip {
  padding: 0 8px 0 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.app-shell .user-avatar {
  background: #edf5f7;
  color: #165586;
  font-weight: 650;
  border-radius: 6px;
}

.app-shell .user-chip strong {
  font-weight: 650;
}

.app-shell .content {
  width: 100%;
  max-width: 1840px;
  margin-inline: auto;
  padding: 24px 28px 40px;
  gap: 24px;
}

.app-shell :is(.primary-btn, .secondary-btn, .icon-btn, .danger-btn) {
  min-height: 40px;
  gap: 8px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
  text-align: center;
  white-space: normal;
  box-shadow: none;
  transform: none;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.app-shell :is(.primary-btn, .secondary-btn, .icon-btn)::after {
  content: none;
}

.app-shell .primary-btn {
  border: 1px solid #064092;
  background: #064092;
  color: #ffffff;
}

.app-shell .primary-btn:hover:not(:disabled) {
  border-color: #053476;
  background: #053476;
}

.app-shell :is(.secondary-btn, .icon-btn) {
  border: 1px solid var(--line-strong);
  background: #ffffff;
  color: #34454e;
}

.app-shell :is(.secondary-btn, .icon-btn):hover:not(:disabled) {
  border-color: #8d9ea6;
  background: #f5f7f7;
  color: var(--ink);
}

.app-shell .icon-btn {
  width: 40px;
  height: 40px;
  padding: 0;
  flex: 0 0 40px;
}

.app-shell .icon-btn.small {
  width: 32px;
  height: 32px;
  min-height: 32px;
  flex-basis: 32px;
}

.app-shell .compact-btn {
  min-height: 34px;
  padding: 6px 10px;
  font-size: 12px;
}

.app-shell :is(.danger-btn, .danger-inline) {
  border-color: #e3b7b4;
  background: #fff5f4;
  color: #a4352f;
}

.app-shell :is(.danger-btn, .danger-inline):hover:not(:disabled) {
  border-color: #cf8883;
  background: #ffebe9;
  color: #8e2e28;
}

.app-shell :is(button, input, select, textarea, a):focus-visible {
  outline: 2px solid #247b94;
  outline-offset: 3px;
}

.app-shell :is(.field input, .field select, .field textarea, .search-input, .mini-form-grid input, .mini-form-grid select) {
  min-width: 0;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: #ffffff;
  color: var(--ink);
  font-size: 14px;
  font-weight: 400;
  box-shadow: none;
}

.app-shell :is(.field input, .field select, .search-input) {
  height: 42px;
}

.app-shell :is(.field input, .field select, .field textarea, .search-input):focus {
  border-color: #247b94;
  outline: none;
  box-shadow: 0 0 0 3px rgba(36, 123, 148, 0.13);
}

.app-shell .field label {
  color: #34454e;
  font-size: 12px;
  font-weight: 600;
}

.app-shell .field { align-content: start; }

.app-shell .field :is(input, select, textarea):disabled {
  color: #68757c;
  background: #f2f5f5;
}

.app-shell input[type="file"] {
  height: auto;
  min-height: 42px;
  padding: 7px;
  font-size: 13px;
}

.app-shell input[type="file"]::file-selector-button {
  margin-right: 10px;
  padding: 5px 9px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: #f5f7f7;
  color: var(--ink);
  cursor: pointer;
}

.app-shell input[type="checkbox"] {
  accent-color: #247b94;
}

.app-shell .task-user-field .user-checkbox-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 165px), 1fr));
}

.app-shell .task-user-field .user-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  margin: 0;
  padding: 0;
}

.app-shell .task-user-field .user-check span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.app-shell :is(.panel, .module-hero, .comparison-command, .form-section-panel, .client-card) {
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: #ffffff;
  box-shadow: none;
  transform: none;
}

.app-shell :is(.panel, .module-hero, .comparison-command, .form-section-panel, .client-card):hover {
  border-color: var(--line);
  box-shadow: none;
  transform: none;
}

.app-shell .panel-header {
  min-height: 64px;
  padding: 18px 20px;
  border-bottom: 1px solid #e9eeee;
  background: #ffffff;
  flex-wrap: wrap;
}

.app-shell :is(.panel-header h2, .form-section-head h2, .form-section-head h3) {
  color: var(--ink);
  font-size: 16px;
  font-weight: 650;
  line-height: 1.4;
}

.app-shell .panel-header p {
  font-size: 12px;
  line-height: 1.6;
}

.app-shell .panel-body {
  padding: 20px;
}

.app-shell .panel > .module-form { padding: 20px; }
.app-shell .record-row small { display: block; color: var(--muted); }
.app-shell .record-row > div { min-width: 0; overflow-wrap: anywhere; }

.app-shell :is(.module-hero, .comparison-command) {
  padding: 20px;
}

.app-shell :is(.module-hero h2, .comparison-command h2) {
  margin-top: 6px;
  font-size: 22px;
  line-height: 1.4;
}

.app-shell :is(.module-hero p, .comparison-command p) {
  max-width: 720px;
  color: var(--muted);
  font-size: 13px;
}

.app-shell :is(.module-hero-stats span, .comparison-command-kpis span) {
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.app-shell :is(.module-hero-stats strong, .comparison-command-kpis strong) {
  font-size: 24px;
  font-weight: 650;
}

.app-shell .metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

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

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

.app-shell .metrics.five .metric strong { font-size: 25px; }

.app-shell .metric {
  min-height: 102px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
  box-shadow: none;
  transform: none;
}

.app-shell .metric span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
}

.app-shell .metric strong {
  margin-top: 8px;
  font-size: 30px;
  font-weight: 650;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.app-shell .dashboard-charts {
  grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
  gap: 12px;
  margin-bottom: 0;
}

.app-shell .chart-card {
  min-height: 150px;
  padding: 18px;
  border-color: var(--line);
  border-radius: 6px;
  background: #ffffff;
  box-shadow: none;
}

.app-shell .chart-card h3 {
  margin-top: 0;
  font-size: 14px;
  font-weight: 650;
}

.app-shell .chart-row span {
  color: #4c5c65;
  font-weight: 500;
}

.app-shell .chart-row {
  grid-template-columns: minmax(0, 1.2fr) minmax(36px, 1fr) max-content;
  gap: 8px;
}

.app-shell .chart-row div {
  height: 6px;
  background: #edf1f2;
}

.app-shell .chart-row i {
  background: #348ba3;
}

.app-shell .chart-row strong {
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.app-shell :is(.summary-metric-card, .summary-stat, .precheck-summary div, .validation-badge, .event-line) {
  border-color: var(--line);
  border-radius: 6px;
  background: #f7f9f9;
  box-shadow: none;
}

.app-shell .summary-metrics-grid { padding: 16px 20px; }
.app-shell .summary-metric-card strong { font-size: 26px; font-weight: 650; }
.app-shell .summary-metric-card :is(span, small) { font-weight: 500; }
.app-shell .summary-metric-card.danger strong { color: #a4352f; }
.app-shell .summary-metric-card.warn strong { color: #95620e; }
.app-shell .summary-breakdown { border: 0; border-radius: 0; background: #ffffff; }
.app-shell .summary-breakdown-row { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
.app-shell .validation-badge.ok { border-color: #d3e8dc; background: #eff8f2; }
.app-shell .validation-badge.warn { border-color: #edddbc; background: #fdf7e9; }
.app-shell .validation-badge.off { border-color: #edc9c6; background: #fff5f4; }

.app-shell :is(.calendar-cell, .event-create, .future-tasks, .task-manage, .record-row, .ledger-row, .document-row, .client-list-card, .tool-card, .document-tile) {
  border-color: var(--line);
  border-radius: 6px;
  background: #ffffff;
  box-shadow: none;
  transform: none;
}

.app-shell :is(.calendar-cell, .event-card, .task-row, .record-row, .ledger-row, .document-row, .client-list-card, .tool-card, .document-tile):hover {
  box-shadow: none;
  transform: none;
}

.app-shell .calendar-cell.today {
  border-color: #247b94;
  background: #edf5f7;
}

.app-shell .calendar-cell strong {
  font-weight: 600;
}

.app-shell :is(.event-create summary, .future-tasks summary, .task-manage summary) {
  padding: 12px;
  color: #34454e;
  font-size: 13px;
  font-weight: 600;
}

.app-shell :is(.event-card, .task-row) {
  border-color: var(--line);
  border-left: 3px solid #94a3a9;
  border-radius: 6px;
  background: #ffffff;
  box-shadow: none;
}

.app-shell :is(.event-card.reminder, .task-row.pendientes) { border-left-color: #b78631; }
.app-shell :is(.event-card.meeting, .task-row.futuras) { border-left-color: #348ba3; }
.app-shell :is(.event-card.work, .task-row.completadas) { border-left-color: #719584; }
.app-shell .event-card.other-user-task {
  border-left-color: #3466ad;
  background: #f4f7fd;
}

.app-shell :is(.event-card strong, .task-main > strong) {
  font-size: 14px;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.app-shell :is(.event-date, .task-meta, .event-category, .event-owner-badge) {
  font-size: 11px;
  font-weight: 600;
}

.app-shell :is(.event-form, .task-edit-form, .form-section-panel, .tool-card) {
  gap: 16px;
}

.app-shell .form-section-panel {
  padding: 20px;
}

.app-shell :is(.tool-form.compact, .assistant-strip, .precheck-panel, .tool-result, .workflow-edit-block) {
  border-color: var(--line);
  border-radius: 6px;
  background: #f5f8f8;
  box-shadow: none;
}

.app-shell :is(.tool-card, .tool-form) {
  align-content: start;
}

.app-shell .tool-card > h3 {
  margin: 0;
  font-size: 16px;
}

.app-shell .tool-card.highlight {
  background: #f8fbfb;
}

.app-shell .tool-card .tool-form {
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  padding: 14px 0 0;
  background: transparent;
}

.app-shell .client-list-card {
  min-height: 88px;
  padding: 14px;
}

.app-shell .client-filters {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr) minmax(0, 1.25fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, .8fr) 90px;
}

.app-shell :is(.client-list-card:hover, .client-list-card.selected) {
  border-color: #9ebfc9;
  background: #f7fbfc;
}

.app-shell :is(.client-avatar, .client-list-card .client-avatar) {
  background: #edf5f7;
  color: #165586;
  font-weight: 650;
  box-shadow: none;
}

.app-shell .client-list-title {
  flex-wrap: wrap;
}

.app-shell .client-list-title strong {
  font-size: 14px;
  font-weight: 650;
  white-space: normal;
  overflow-wrap: anywhere;
}

.app-shell .client-list-subtitle {
  color: #596972;
  font-weight: 500;
}

.app-shell .client-list-meta span {
  padding: 2px 6px;
  border: 0;
  border-radius: 4px;
  background: #f2f5f5;
  font-weight: 500;
}

.app-shell .client-list-card .client-list-action span {
  padding: 4px 0;
  border-radius: 0;
  background: transparent;
  color: #165586;
  font-weight: 600;
}

.app-shell .active-client-banner {
  padding: 20px;
  border: 0;
  border-left: 3px solid #247b94;
  border-radius: 0;
  background: #ffffff;
  box-shadow: none;
  transform: none;
}

.app-shell .active-client-banner h2 {
  font-size: 21px;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.app-shell .active-client-banner .client-cups-chip {
  padding: 4px 8px;
  border-color: var(--line);
  border-radius: 4px;
  background: #f5f8f8;
  color: #4c5c65;
  font-size: 13px;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.app-shell :is(.client-card-grid div, .detail-item) {
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid #e9eeee;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}

.app-shell :is(.client-card-grid strong, .detail-item strong) {
  font-weight: 600;
}

.app-shell :is(.client-card-grid span, .detail-item span) {
  font-weight: 500;
}

.app-shell .pill {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}

.app-shell .pill.ok { border-color: #d3e8dc; background: #eff8f2; color: #23754c; }
.app-shell .pill.warn { border-color: #edddbc; background: #fdf7e9; color: #95620e; }
.app-shell .pill.off { border-color: var(--line); background: #f2f5f5; color: #657078; }
.app-shell :is(.segmented-actions, .segmented label, .status-strip label) { border-radius: 6px; background: #f5f7f7; box-shadow: none; }
.app-shell .segmented label { font-weight: 600; }

.app-shell .table-wrap {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.app-shell .clients-table {
  border-spacing: 0;
}

.app-shell .clients-table th {
  padding: 12px;
  border-bottom: 1px solid var(--line);
  background: #f5f7f7;
  color: #52636c;
  font-weight: 600;
}

.app-shell .clients-table tbody td,
.app-shell .clients-table tbody td:first-child,
.app-shell .clients-table tbody td:last-child {
  padding: 12px;
  border: 0;
  border-bottom: 1px solid #e9eeee;
  border-radius: 0;
  background: #ffffff;
}

.app-shell .clients-table tbody tr:hover td {
  background: #f7fafb;
}

.app-shell .clients-table tbody tr.selected td { background: #edf5f7; }
.app-shell .tariff-editor-table .tariff-row-new td { background: #eff8f2; }
.app-shell .ledger-row.income { border-left-color: #438967; }
.app-shell .ledger-row.expense { border-left-color: #b78631; }

.app-shell :is(.catalog-price-summary, .commission-summary, .tariff-kind-table, .mini-table article) {
  border-color: var(--line);
  border-radius: 6px;
  background: #f5f8f8;
  box-shadow: none;
}

.app-shell .catalog-price-summary.empty {
  border-color: #edddbc;
  background: #fdf7e9;
}

.app-shell .tariff-kind-table.price-kind { border-top: 2px solid #348ba3; }
.app-shell .tariff-kind-table.commission-kind { border-top: 2px solid #b78631; }
.app-shell .wolfcrm-global-banner { border-color: #edddbc; background: #fdf7e9; box-shadow: none; }
.app-shell .wolfcrm-panel { border-left: 3px solid #94a3a9; }
.app-shell .wolfcrm-panel.ok { border-left-color: #438967; }
.app-shell .wolfcrm-panel.warn { border-left-color: #b78631; }
.app-shell .wolfcrm-panel.danger { border-left-color: #b33e38; }
.app-shell .wolfcrm-panel.info { border-left-color: #348ba3; }

.app-shell :is(.price-section-tabs, .price-company-folder, .price-category, .price-library-toolbar) {
  border-color: var(--line);
  border-radius: 6px;
  background: #ffffff;
  box-shadow: none;
}

.app-shell .price-section-tabs {
  padding: 3px;
  background: #f2f5f5;
}

.app-shell .price-section-tab {
  border-radius: 4px;
  font-weight: 600;
}

.app-shell .price-section-tab.active {
  background: #ffffff;
  color: #165586;
  box-shadow: 0 1px 3px rgba(32, 42, 48, 0.08);
}

.app-shell .price-document {
  background: #ffffff;
  box-shadow: none;
  transform: none;
}

.app-shell .price-document:hover {
  background: #f7fafb;
}

.app-shell .price-current {
  margin: 0;
  padding: 20px;
  border-radius: 0;
  background: #f5f8f8;
  color: var(--ink);
  box-shadow: none;
}

.app-shell .price-current :is(span, strong) { color: var(--ink); }
.app-shell .price-current p { color: var(--muted); }
.app-shell .price-chart { background: #ffffff; }
.app-shell .price-bar { border-radius: 3px 3px 0 0; background: #348ba3; box-shadow: none; }

.app-shell .assistant-message {
  border-color: var(--line);
  border-radius: 6px;
  background: #f8faf9;
  box-shadow: none;
}

.app-shell .assistant-message.user { background: #edf5f7; }
.app-shell .assistant-strip { grid-template-columns: minmax(0, 1fr); }
.app-shell .assistant-strip .assistant-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.app-shell .assistant-strip input[type="file"] { grid-column: 1 / -1; min-width: 0; width: 100%; border: 1px solid var(--line-strong); border-radius: 6px; background: #ffffff; }
.app-shell .comparison-period-block { min-width: 0; overflow-x: auto; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
.app-shell .comparison-input-table { min-width: 480px; }
.app-shell .comparison-input-table input { height: 38px; border-color: var(--line-strong); border-radius: 4px; background: #ffffff; color: var(--ink); }
.app-shell .document-tile:hover { border-color: #9ebfc9; }
.app-shell .document-preview { border-color: var(--line); border-radius: 4px; background: #f7f9f9; }
.app-shell .document-preview::before { border-color: var(--line); background: #e9eeee; }
.app-shell .document-delete { border-radius: 4px; background: #ffffff; box-shadow: none; }
.app-shell .document-delete .workspace-icon { width: 16px; height: 16px; }
.app-shell .document-tile:focus-within .document-delete { opacity: 1; transform: none; }
.app-shell :is(.empty-state, .notice) { border-color: var(--line); border-radius: 6px; background: #f7f9f9; font-weight: 400; }
.app-shell .notice.success { border-color: #d3e8dc; background: #eff8f2; color: #23754c; }
.app-shell .notice.error { border-color: #edc9c6; background: #fff5f4; color: #a4352f; }

.toast-card {
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 8px 28px rgba(32, 42, 48, 0.12);
}

.price-preview-dialog {
  border: 1px solid #dce3e5;
  border-radius: 8px;
  background: #ffffff;
  color: #202a30;
  box-shadow: 0 16px 48px rgba(32, 42, 48, 0.16);
}

.price-preview-header { background: #ffffff; border-bottom-color: #dce3e5; }
.price-preview-close { border-radius: 6px; background: #f5f7f7; color: #34454e; }

@media (max-width: 1180px) {
  .app-shell .dashboard-charts { grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); }
  .app-shell .form-grid.four,
  .app-shell .form-grid.six { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-shell .topbar-actions { gap: 8px; }
  .app-shell .client-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .app-shell { grid-template-columns: minmax(0, 1fr); }
  .app-shell .sidebar {
    position: relative;
    top: auto;
    height: auto;
    padding: 14px 16px;
    gap: 12px;
    overflow: hidden;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .app-shell .sidebar-brand { padding: 0; }
  .app-shell .sidebar-brand .brand-logo { width: 180px; height: 45px; }
  .app-shell .sidebar-profile,
  .app-shell .sidebar-footer { display: none; }
  .app-shell .nav {
    position: relative;
    display: flex;
    gap: 5px;
    overflow-x: auto;
    padding: 3px 0 7px;
    overscroll-behavior-inline: contain;
  }
  .app-shell .nav button { flex: 0 0 auto; min-height: 44px; white-space: nowrap; }
  .app-shell .push-control { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
  .app-shell .topbar { min-height: 0; padding: 20px; flex-direction: row; align-items: center; flex-wrap: wrap; }
  .app-shell .topbar-actions { width: auto; flex-wrap: wrap; }
  .app-shell .content { padding: 20px; }
}

@media (max-width: 640px) {
  .app-shell .content { padding: 16px 12px 28px; gap: 18px; }
  .app-shell .topbar { padding: 18px 16px; gap: 14px; }
  .app-shell .topbar h1 { font-size: 22px; }
  .app-shell .topbar-actions { width: 100%; justify-content: flex-end; }
  .app-shell .user-chip { display: flex; margin-right: auto; }
  .app-shell .user-chip strong { max-width: 124px; }
  .app-shell .topbar-actions #logout { padding: 8px 10px; }
  .app-shell .metrics,
  .app-shell .metrics.three,
  .app-shell .metrics.five,
  .app-shell .summary-metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-shell .metric { min-height: 94px; padding: 14px; }
  .app-shell .metric strong { font-size: 26px; }
  .app-shell .dashboard-charts,
  .app-shell .form-grid.four,
  .app-shell .form-grid.three,
  .app-shell .form-grid.two,
  .app-shell .form-grid.six { grid-template-columns: minmax(0, 1fr); }
  .app-shell :is(.panel-header, .panel-body, .form-section-panel, .module-hero, .comparison-command, .active-client-banner) { padding: 16px; }
  .app-shell .panel > .module-form { padding: 16px; }
  .app-shell :is(.field input, .field select, .field textarea) { font-size: 16px; }
  .app-shell .calendar-cell { min-width: 0; min-height: 64px; padding: 5px; }
  .app-shell .calendar-cell strong { font-size: 12px; }
  .app-shell .calendar-grid { gap: 4px; }
  .app-shell .client-list-card { padding: 12px; gap: 10px; }
  .app-shell .client-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-shell .client-list-subtitle { white-space: normal; overflow-wrap: anywhere; }
  .app-shell .active-client-banner { flex-wrap: wrap; }
  .app-shell .active-client-banner h2 { font-size: 19px; }
  .app-shell .form-actions { flex-wrap: wrap; }
}

@media (max-width: 360px) {
  .app-shell .topbar-actions { gap: 8px; }
  .app-shell .user-chip { gap: 6px; padding: 0; }
  .app-shell .user-chip strong { max-width: 90px; }
  .app-shell .user-avatar { width: 28px; height: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .app-shell *, .app-shell *::before, .app-shell *::after { animation: none !important; transition: none !important; }
}

@media (hover: none) {
  .app-shell .document-delete { opacity: 1; transform: none; }
}