/* Shared visual refinement for the main workspace and embedded cabinet pages. */
/* Unslop workflow by Damir Sokolovsky (@heydamir), CC BY 4.0.
   https://github.com/heydamir/unslop. Adapted for the existing business workspace. */
body.app-mode,
body.embedded-mode {
  --ui-opacity: var(--panel-opacity, var(--cabinet-panel-opacity, 1));
  --ui-rule: rgba(130, 147, 153, .22);
  --ui-hover: rgba(8, 127, 117, calc(var(--ui-opacity) * .045));
  letter-spacing: 0;
}

body.app-mode #mobileNavigationDrawer {
  box-shadow: none;
  border-right-color: var(--ui-rule);
}

body.app-mode #mobileNavigationDrawer .sidebar-brand {
  border-bottom-color: var(--ui-rule);
}

body.app-mode #mobileNavigationDrawer .top-nav :is(.tab-button, .sidebar-submenu-button) {
  border-radius: 6px !important;
  font-weight: 400 !important;
  line-height: 1.5;
  text-align: left;
  transition: background-color .15s ease, color .15s ease;
}

body.app-mode #mobileNavigationDrawer .top-nav .tab-button.active {
  border-color: transparent !important;
  background: rgba(8, 127, 117, calc(var(--ui-opacity) * .09)) !important;
  box-shadow: inset 3px 0 0 rgba(8, 127, 117, var(--ui-opacity)) !important;
}

body.app-mode #mobileNavigationDrawer .top-nav .sidebar-submenu-button.active {
  background: rgba(8, 127, 117, calc(var(--ui-opacity) * .08)) !important;
  box-shadow: none !important;
}

body.app-mode #mobileNavigationDrawer .top-nav button > .nav-icon {
  border-color: transparent;
  color: inherit;
  background: transparent;
  box-shadow: none;
}

body.app-mode #mobileNavigationDrawer .sidebar-submenu {
  border-left-color: var(--ui-rule);
}

body.app-mode #appShell > .view > .page-header :is(h1, .section-kicker) {
  letter-spacing: 0 !important;
}

body.app-mode #appShell > .view > .page-header h1 {
  font-weight: 600 !important;
}

body.app-mode #appShell > .view > .page-header .section-kicker {
  display: block !important;
}

body.app-mode #appShell > .view > :is(
  .calculation-dashboard, .records-workspace, .inventory-dashboard,
  .repair-dashboard, .finance-dashboard, .admin-panel,
  .operation-log-panel, .blank-view-panel, .cabinet-info-host
) {
  border-radius: 8px !important;
  box-shadow: none !important;
}

body.app-mode #appShell :is(
  .entry-panel, .records-panel, .finance-chart-card, .finance-ranking-card,
  .finance-detail-card, .finance-intelligence-card, .inventory-summary-card,
  .repair-overview-card, .finance-kpi
) {
  border-radius: 8px !important;
  box-shadow: none !important;
}

body.app-mode #appShell :is(.inventory-summary-card, .repair-overview-card, .finance-kpi) {
  background: rgba(255, 255, 255, var(--theme-card-opacity)) !important;
}

body.app-mode #appShell :is(.inventory-summary-card, .repair-overview-card, .finance-kpi)::after {
  display: none !important;
}

body.app-mode #appShell :is(.toolbar, .panel-head) {
  border-color: var(--ui-rule);
}

body.app-mode #appShell :is(.toolbar, .panel-head) :is(label, button) {
  font-weight: 400;
}

body.app-mode #appShell :is(
  .primary-button, .secondary-button, .danger-button, .row-button,
  .site-select-button, .search-box
) {
  border-radius: 6px !important;
}

body.app-mode #appShell :is(.primary-button, .secondary-button, .danger-button) {
  box-shadow: none !important;
  transition: background-color .15s ease, border-color .15s ease;
}

body.app-mode #appShell :is(.primary-button, .secondary-button, .danger-button):hover {
  transform: none;
}

/* Reset is a secondary action beside the primary create/save command. */
body.app-mode :is(
  #purchaseFilterReset, #inventoryFilterReset, #repairFilterReset,
  #calculationClear, #resetFormDefaults
),
body.app-mode :is(
  #purchaseFilterReset, #inventoryFilterReset, #repairFilterReset,
  #calculationClear, #resetFormDefaults
):is(:hover, :focus-visible) {
  border-color: rgba(130, 147, 153, calc(var(--ui-opacity) * .4)) !important;
  color: #526579 !important;
  -webkit-text-fill-color: currentColor !important;
  background: rgba(255, 255, 255, calc(var(--ui-opacity) * .72)) !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

body.app-mode .record-form-dialog :is(input, textarea, .site-select-button) {
  border-radius: 6px !important;
  box-shadow: none;
}

body.app-mode .record-form-dialog .site-select-button:not(:hover):not([aria-expanded="true"]) {
  background-image: none !important;
}

body.app-mode #appShell table,
body.embedded-mode table {
  font-variant-numeric: tabular-nums;
}

body.app-mode #appShell table th,
body.embedded-mode table th {
  font-weight: 500;
  line-height: 1.5;
}

body.app-mode #appShell table tbody tr:hover > td,
body.embedded-mode table tbody tr:hover > td {
  background-color: var(--ui-hover);
}

body.embedded-mode :is(
  .workspace, .report-panel, .booking-plan-workspace, .quote-card,
  .metric, .settlement-metric
) {
  border-radius: 8px !important;
  box-shadow: none !important;
}

body.embedded-mode :is(.btn, .booking-select-button, .search) {
  border-radius: 6px;
}

body.embedded-mode .btn {
  font-weight: 500;
  transition: background-color .15s ease, border-color .15s ease;
}

body.embedded-mode .booking-plan-toolbar {
  gap: 12px;
}

body.embedded-mode .booking-plan-summary {
  padding-block: 16px;
}

body.embedded-mode .booking-plan-summary strong {
  font-size: 22px;
}

body.embedded-mode .booking-plan-week-options button {
  border-radius: 6px;
  box-shadow: none;
}

body.embedded-mode .booking-plan-week-options button[aria-pressed="true"] {
  background: rgba(8, 127, 117, calc(var(--ui-opacity) * .08));
}

body.embedded-mode :is(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

@media (min-width: 761px) {
  body.app-mode #appShell > .view > .page-header .section-kicker {
    display: block !important;
    margin-bottom: 3px !important;
    font-size: 9px !important;
    line-height: 1.2 !important;
  }

  body.app-mode #appShell > .view > .page-header h1 {
    margin-bottom: 3px !important;
    font-size: 22px !important;
    line-height: 1.15 !important;
  }
}

@media (max-width: 760px) {
  body.app-mode #appShell > .view > .page-header p {
    overflow-wrap: anywhere;
  }

  body.app-mode #appShell :is(.toolbar, .panel-head) button,
  body.embedded-mode :is(.toolbar, .booking-plan-toolbar, .table-footer) button {
    min-height: 44px;
  }

  body.app-mode #appShell .toolbar-action-group {
    flex-wrap: wrap;
    gap: 8px;
  }

  body.app-mode #appShell .toolbar-action-group > button {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  body.embedded-mode .table-footer {
    flex-wrap: wrap;
    gap: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.app-mode *, body.app-mode *::before, body.app-mode *::after,
  body.embedded-mode *, body.embedded-mode *::before, body.embedded-mode *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Pass 1: spacing. */
body.app-mode #mobileNavigationDrawer .top-nav {
  gap: 4px !important;
  padding-inline: 12px !important;
}
body.app-mode #mobileNavigationDrawer .top-nav :is(.tab-button, .sidebar-submenu-button) {
  min-height: 36px !important;
  padding: 8px 12px !important;
  gap: 8px !important;
}
body.app-mode #mobileNavigationDrawer .sidebar-submenu {
  gap: 4px !important;
  margin: 0 0 8px 20px !important;
  padding-left: 12px !important;
}
body.app-mode #mobileNavigationDrawer .sidebar-submenu-label {
  margin: 16px 0 4px !important;
  padding: 0 12px !important;
}
body.app-mode #mobileNavigationDrawer .sidebar-brand { gap: 12px; padding: 16px !important; }
body.app-mode #appShell > .view > .page-header > div { gap: 4px !important; }
body.app-mode #appShell :is(.toolbar, .panel-head) { gap: 12px; }
body.embedded-mode .booking-plan-toolbar { padding: 16px 20px; gap: 12px 16px; }
body.embedded-mode .booking-plan-month-weeks { padding: 16px 20px; gap: 16px; }
body.embedded-mode .booking-plan-week-options { gap: 8px; }
body.embedded-mode .booking-plan-week-options button { padding: 8px; gap: 4px; }
body.embedded-mode .booking-plan-summary { padding: 24px 20px; gap: 16px; }
body.embedded-mode .booking-plan-summary > div { gap: 8px; padding-left: 16px; }
body.embedded-mode .booking-plan-table :is(th, td) { padding: 16px; }
body.embedded-mode .booking-plan-workspace > .table-footer { padding: 16px 20px; }
@media (max-width: 760px) {
  body.app-mode #mobileNavigationDrawer .top-nav :is(.tab-button, .sidebar-submenu-button) { min-height: 44px !important; }
  body.embedded-mode :is(.booking-plan-toolbar, .booking-plan-month-weeks, .booking-plan-summary) { padding: 16px; }
}

/* Pass 2: color. Surfaces continue to use the saved theme opacity. */
body.app-mode, body.embedded-mode {
  --ink: #252c2c;
  --muted: #616b6b;
  --ui-rule: rgba(42, 55, 55, .14);
  --ui-accent: #08786f;
  --ui-soft: rgba(243, 245, 244, var(--ui-opacity));
  --line: rgba(42, 55, 55, .14);
  color: var(--ink);
}
body.app-mode #mobileNavigationDrawer.topbar {
  background: rgba(248, 249, 248, var(--ui-opacity)) !important;
}
body.app-mode #mobileNavigationDrawer .brand-logo {
  color: var(--ui-accent) !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.app-mode #mobileNavigationDrawer .top-nav :is(.tab-button, .sidebar-submenu-button) {
  color: var(--muted) !important;
  background: transparent !important;
}
body.app-mode #mobileNavigationDrawer .top-nav :is(.tab-button, .sidebar-submenu-button):hover {
  background: rgba(42, 55, 55, calc(var(--ui-opacity) * .045)) !important;
  color: var(--ink) !important;
}
body.app-mode #mobileNavigationDrawer .top-nav :is(.tab-button, .sidebar-submenu-button).active {
  background: rgba(8, 120, 111, calc(var(--ui-opacity) * .07)) !important;
  color: var(--ui-accent) !important;
}
body.app-mode #mobileNavigationDrawer .top-nav button > .nav-icon {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
}
body.app-mode .profile-avatar {
  background: var(--ui-accent) !important;
  box-shadow: none !important;
}
body.app-mode #appShell > .view > .page-header :is(h1, p) { color: var(--ink) !important; }
body.app-mode #appShell > .view > .page-header p { color: var(--muted) !important; }
body.embedded-mode .booking-plan-workspace { border-color: var(--ui-rule) !important; }
body.embedded-mode :is(.booking-plan-toolbar, .booking-plan-month-weeks, .booking-plan-summary) { background: transparent; }
body.embedded-mode .booking-plan-period-tabs button[aria-pressed="true"] {
  background: rgba(8, 120, 111, calc(var(--ui-opacity) * .08));
  color: var(--ui-accent);
}
body.embedded-mode .booking-plan-week-options button[aria-pressed="true"] {
  border-color: rgba(8, 120, 111, .4);
  color: var(--ui-accent);
  background: rgba(8, 120, 111, calc(var(--ui-opacity) * .055));
}
body.embedded-mode .booking-plan-table th { background: var(--ui-soft); color: var(--muted); }
body.embedded-mode .booking-plan-summary > div { border-color: var(--ui-rule); }
body.embedded-mode #bookingPlanTotal { color: var(--ui-accent); }
body.embedded-mode .btn.primary { background: var(--ui-accent); border-color: transparent; }
body.embedded-mode .btn.primary:hover { background: #06675f; }

/* Pass 3: icons. Keep the existing shared sprite and name matching. */
body.app-mode #mobileNavigationDrawer .top-nav button > .nav-icon {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  flex: 0 0 18px !important;
  padding: 0 !important;
  stroke-width: 1.5 !important;
}
body.app-mode .brand-logo svg { width: 24px; height: 24px; stroke-width: 1.5; }
body.app-mode #mobileNavigationDrawer .sidebar-menu-caret { color: var(--muted); }
body.app-mode #appShell :is(.menu-icon, .button-icon),
body.embedded-mode .btn svg { width: 16px; height: 16px; stroke-width: 1.5; }

/* Pass 5: type. Native CJK families avoid an external font dependency. */
body.app-mode, body.embedded-mode {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
body.app-mode #mobileNavigationDrawer :is(button, .sidebar-submenu-label) { letter-spacing: 0 !important; }
body.app-mode #mobileNavigationDrawer .top-nav :is(.tab-button, .sidebar-submenu-button) {
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
}
body.app-mode #mobileNavigationDrawer .sidebar-submenu-label { font-size: 12px !important; font-weight: 400 !important; }
body.app-mode #mobileNavigationDrawer .brand-copy strong { font-size: 16px !important; font-weight: 600 !important; letter-spacing: 0 !important; }
body.app-mode #appShell > .view > .page-header .section-kicker {
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 16px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
body.app-mode #appShell > .view > .page-header h1 {
  font-size: 24px !important;
  font-weight: 500 !important;
  line-height: 28px !important;
  letter-spacing: 0 !important;
}
body.app-mode #appShell > .view > .page-header p { font-size: 13px !important; line-height: 20px !important; }
body.app-mode #appShell :is(button, label, input, textarea),
body.embedded-mode :is(button, label, input, textarea) { letter-spacing: 0 !important; }
body.embedded-mode .booking-plan-summary strong { font-size: 28px; line-height: 32px; font-weight: 500; }
body.embedded-mode .booking-plan-summary span { font-size: 13px; line-height: 20px; }
body.embedded-mode .booking-plan-week-options small { font-size: 12px; }
body.embedded-mode :is(.booking-plan-table th, .booking-plan-table td) { font-size: 13px; line-height: 20px; }
body.embedded-mode .booking-plan-period-caption small { font-size: 12px; }
@media (max-width: 760px) {
  body.app-mode #appShell > .view > .page-header h1 { font-size: 22px !important; }
}

/* Pass 6: layout. The table remains a real, horizontally scrollable ledger. */
body.embedded-mode .booking-plan-workspace {
  border: 0 !important;
  border-radius: 0 !important;
}
body.embedded-mode .booking-plan-week-options button { min-height: 72px; }
body.embedded-mode .booking-plan-period-tabs { align-self: center; }
body.embedded-mode .booking-plan-period-caption { margin-left: auto; }
body.embedded-mode #bookingPlanAddBtn { margin-left: 0; flex: 0 0 auto; }
body.embedded-mode .booking-plan-workspace > .table-wrap { max-width: 100%; overflow: auto; }
body.embedded-mode .booking-plan-summary > div:first-child { border-left: 0; padding-left: 0; }
body.embedded-mode .booking-plan-workspace .booking-plan-empty { padding: 64px 16px; }
@media (min-width: 761px) {
  body.app-mode.sidebar-collapsed #mobileNavigationDrawer .top-nav { padding-inline: 4px !important; }
  body.app-mode.sidebar-collapsed #mobileNavigationDrawer .top-nav .tab-button { padding: 8px !important; }
  body.app-mode .shell::before { height: 88px; box-shadow: none; }
  body.app-mode:not(.sidebar-collapsed) #appShell > .view:not(.hidden) { padding-top: 100px !important; }
  body.app-mode #appShell > .view > .page-header {
    height: 88px !important;
    min-height: 88px !important;
    padding-block: 8px !important;
  }
  body.app-mode #appShell > .view > .page-header :is(h1, .section-kicker) { margin-bottom: 4px !important; }
}
@media (min-width: 761px) and (max-width: 1000px) {
  body.app-mode #appShell > .view > .page-header p { font-size: 12px !important; }
  body.embedded-mode .booking-plan-period-caption { flex-basis: 60%; margin-left: 0; }
  body.embedded-mode #bookingPlanAddBtn { margin-left: auto; }
}
@media (max-width: 760px) {
  body.embedded-mode .booking-plan-toolbar { align-items: flex-start; }
  body.embedded-mode .booking-plan-period-tabs { width: 100%; display: flex; }
  body.embedded-mode .booking-plan-period-tabs button { flex: 1; min-width: 0; min-height: 44px; padding-inline: 8px; }
  body.embedded-mode .booking-plan-week-picker { width: 100%; gap: 8px; }
  body.embedded-mode .booking-plan-period-caption { flex: 1 1 160px; margin-left: 0; }
  body.embedded-mode #bookingPlanAddBtn { min-height: 44px; margin-left: auto; }
  body.embedded-mode .booking-plan-month-weeks > label { width: 100%; }
  body.embedded-mode .booking-plan-week-options { flex-basis: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.embedded-mode .booking-plan-week-options button { min-width: 0; min-height: 80px; }
  body.embedded-mode .booking-plan-week-options small { white-space: normal; }
}

/* Pass 7: details. */
body.app-mode :is(button, a, input, select, textarea, [tabindex]):focus-visible,
body.embedded-mode :is(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--ui-accent);
  outline-offset: 3px;
}
body.embedded-mode .booking-plan-table tbody tr:hover > td { background: var(--ui-hover); }
body.embedded-mode .booking-plan-table tbody tr:focus-within > td { background: rgba(8, 120, 111, calc(var(--ui-opacity) * .06)); }
body.embedded-mode .booking-plan-table .booking-plan-count { min-height: 36px; text-underline-offset: 4px; }
body.embedded-mode .booking-plan-table .booking-plan-count:hover { text-decoration-thickness: 2px; }
body.embedded-mode :is(.booking-plan-week-options button, .booking-plan-period-tabs, .booking-plan-week-picker input) { border-radius: 6px; }
body.app-mode #mobileNavigationDrawer .mobile-drawer-collapse {
  border-radius: 6px;
  background: transparent;
  box-shadow: none;
}
@media (max-width: 760px) {
  body.embedded-mode :is(.booking-plan-row-actions button, .booking-plan-count) { min-height: 44px; }
}

/* Pass 8: visuals. Business content, rather than decorative chrome, leads. */
body.app-mode #appShell :is(.records-workspace, .calculation-dashboard, .inventory-dashboard, .repair-dashboard, .finance-dashboard, .admin-panel) {
  box-shadow: none !important;
  border-radius: 0 !important;
}
body.app-mode #appShell :is(.toolbar, .panel-head, .finance-kpi, .inventory-summary-card, .repair-overview-card),
body.embedded-mode :is(.booking-plan-week-options button, .booking-plan-period-tabs, .booking-plan-summary) {
  background-image: none !important;
  box-shadow: none !important;
}
body.app-mode #appShell :is(.primary-button, .secondary-button, .danger-button),
body.embedded-mode .btn {
  background-image: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
body.app-mode #appShell .primary-button {
  background-color: var(--ui-accent) !important;
  color: #fff !important;
  -webkit-text-fill-color: currentColor !important;
}
body.app-mode #appShell .primary-button:hover { background-color: #06675f !important; }
body.app-mode #appShell .danger-button { background-color: #a63d40 !important; color: #fff !important; }
body.embedded-mode .booking-plan-week-options button[aria-pressed="true"] {
  box-shadow: inset 0 -2px 0 var(--ui-accent) !important;
}
body.app-mode #appShell .cabinet-info-host { border-radius: 0 !important; box-shadow: none !important; }

/* Pass 9: motion. Loading indicators and functional drawer transforms stay. */
body.app-mode #mobileNavigationDrawer,
body.app-mode #appShell :is(.view, .page-header, .toolbar, .panel-head),
body.embedded-mode :is(.workspace, .booking-plan-summary, .booking-plan-week-options) {
  animation: none !important;
  transition: none !important;
}
body.app-mode :is(button, .primary-button, .secondary-button, .row-button),
body.embedded-mode :is(button, .btn) {
  transition: color 160ms cubic-bezier(.22, 1, .36, 1), background-color 160ms cubic-bezier(.22, 1, .36, 1), border-color 160ms cubic-bezier(.22, 1, .36, 1) !important;
}
body.app-mode #appShell :is(button, .primary-button, .secondary-button, .row-button):hover,
body.embedded-mode :is(.btn, .booking-plan-week-options button):hover { transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  body.app-mode :is(button, .primary-button, .secondary-button, .row-button),
  body.embedded-mode :is(button, .btn) { transition: none !important; }
}

/* Site pass 1: shared spacing, including surfaces outside the main shell. */
body.cabinet-app, body.login-mode {
  --ui-opacity: var(--panel-opacity, var(--cabinet-panel-opacity, 1));
  --ui-accent: #08786f;
  --ui-rule: rgba(130, 147, 153, .22);
}
body.app-mode :is(.account-card, .display-settings-card, .admin-data-card, .log-clear-password-card) { gap: 16px; }
body.cabinet-app :is(.toolbar, .panel-head, .table-footer) { gap: 12px; }
body.cabinet-app :is(.modal-head, .modal-actions) { gap: 12px; }
body.login-mode .login-panel { gap: 18px; padding: 28px; }

/* Site pass 2: neutral surfaces; color communicates actions and business states. */
body.app-mode :is(.account-card, .display-settings-card, .admin-data-card, .log-clear-password-card) {
  background: rgba(255, 255, 255, var(--panel-opacity, 1)) !important;
  border-color: var(--ui-rule);
}
body.cabinet-app :is(.workspace, .report-panel, .admin-option-card) {
  background: rgba(255, 255, 255, var(--cabinet-panel-opacity, 1));
}
body.app-mode .primary-button, body.login-mode .primary-button,
body.cabinet-app .btn.primary {
  color: #fff !important;
  -webkit-text-fill-color: currentColor !important;
  background: #08786f !important;
  border-color: #08786f !important;
}
body.app-mode .primary-button:hover, body.login-mode .primary-button:hover,
body.cabinet-app .btn.primary:hover { background: #06675f !important; }
body.app-mode .finance-chart-legend i.purchase { background: #08786f; box-shadow: none; }
body.app-mode .finance-chart-legend i.sale { background: #527da0; box-shadow: none; }

/* Site pass 3: retain the existing icon system, without decorative tiles. */
body.cabinet-app .nav-icon, body.cabinet-app .metric-icon {
  background: transparent !important;
  box-shadow: none !important;
  color: #64736f;
  font-weight: 400;
  border-radius: 0;
}
body.cabinet-app .metric-icon { width: 26px; min-width: 26px; }
body.login-mode .login-panel-brand-logo { background: transparent; box-shadow: none; color: #08786f; }

/* Site passes 4 and 5: preserve product labels and menu-derived titles. */
body.cabinet-app, body.login-mode {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
body:is(.app-mode, .cabinet-app, .login-mode) :is(button, input, select, textarea) { font-family: inherit; letter-spacing: 0 !important; }
body.app-mode :is(.account-popover, .repair-form-card) :is(button, label),
body.cabinet-app :is(.btn, .nav-item, .sidebar-submenu-button, .form-grid label, .badge),
body.login-mode :is(button, label) { font-weight: 400 !important; }
body.app-mode :is(.panel-head, .finance-card-head, .repair-form-head) h2,
body.app-mode .account-popover h2, body.cabinet-app :is(.panel-head, .modal-head) h2 {
  font-size: 18px !important;
  font-weight: 500 !important;
  line-height: 26px;
  letter-spacing: 0 !important;
}
body.cabinet-app .form-section h3 { font-size: 13px; font-weight: 500; }
body.cabinet-app :is(.metric strong, .fee-total strong) { letter-spacing: 0; font-weight: 600; }
body.login-mode .login-panel h1 { font-size: 26px; font-weight: 500; letter-spacing: 0; }
body.app-mode .finance-kpi strong { letter-spacing: 0 !important; }

/* Site pass 6: one work surface; repair forms keep actions in view. */
body.cabinet-app :is(.workspace, .report-panel, .admin-option-card),
body.app-mode #appShell :is(.finance-chart-card, .finance-ranking-card, .finance-detail-card, .finance-intelligence-card) {
  border-radius: 0 !important;
  box-shadow: none !important;
}
body.cabinet-app :is(.report-layout, .report-panel, .provider-analysis-panel) { min-width: 0; max-width: 100%; }
body.cabinet-app .report-layout { grid-template-columns: minmax(0, 1fr); }
body.cabinet-app .report-layout > .workspace { min-width: 0; }
body.cabinet-app .report-panel .panel-head { flex-wrap: wrap; }
body.cabinet-app .app-view:not([hidden]) > :is(.workspace, .report-panel),
body.cabinet-app .app-view:not([hidden]) > .report-layout > :is(.workspace, .report-panel) {
  border-radius: 0 !important;
}
body.cabinet-app .app-view .metric { border-radius: 8px !important; }
body.app-mode #repairFormModal {
  padding: 20px;
  place-items: center;
  background: rgba(30, 44, 42, .32);
  backdrop-filter: blur(8px);
}
body.app-mode #repairView:has(#repairFormModal:not(.hidden)) { z-index: 300; }
body.app-mode #repairForm #repairFormReset {
  color: #526579 !important;
  -webkit-text-fill-color: currentColor !important;
  background: rgba(255, 255, 255, var(--panel-opacity, 1)) !important;
  border-color: var(--ui-rule) !important;
  box-shadow: none !important;
}
body.app-mode #repairForm {
  display: flex;
  flex-direction: column;
  width: min(1120px, 100%);
  max-height: calc(100dvh - 40px);
  overflow: hidden;
  gap: 0;
  padding: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, var(--panel-opacity, 1));
  box-shadow: 0 16px 48px rgba(30, 44, 42, .14);
}
body.app-mode #repairForm .repair-form-head,
body.app-mode #repairForm .repair-form-actions {
  position: static;
  flex: 0 0 auto;
  margin: 0;
  padding: 16px 20px;
  background: rgba(255, 255, 255, var(--panel-opacity, 1));
}
body.app-mode #repairForm .repair-form-head { border-bottom: 1px solid var(--ui-rule); }
body.app-mode #repairForm .repair-form-actions { border-top: 1px solid var(--ui-rule); }
body.app-mode #repairForm .repair-form-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-height: 0;
  overflow: auto;
  gap: 16px;
  margin: 16px 20px;
  padding: 16px;
  border: 1px solid var(--ui-rule);
  border-radius: 6px;
  overscroll-behavior: contain;
}
body.app-mode #repairForm .repair-form-wide { grid-column: 1 / -1; }
body.app-mode #repairForm .repair-form-fields > * { min-width: 0; }
@media (min-width: 761px) and (max-width: 1100px) {
  body.app-mode #repairForm .repair-form-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  body.app-mode #repairFormModal { padding: 10px; }
  body.app-mode #repairForm { max-height: calc(100dvh - 20px); }
  body.app-mode #repairForm .repair-form-fields { grid-template-columns: 1fr; gap: 14px; margin: 12px; padding: 12px; }
  body.app-mode #repairForm :is(.repair-form-head, .repair-form-actions) { padding: 12px; }
  body.app-mode #repairForm .repair-form-actions { display: flex; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  body.app-mode #repairForm .repair-form-actions button { flex: 1; min-width: 0 !important; min-height: 44px; }
  body.login-mode .login-panel { padding: 24px 20px; }
}

/* Site pass 7: consistent edges and visible keyboard focus. */
body.app-mode :is(.account-card, .display-settings-card, .admin-data-card, .log-clear-password-card),
body.login-mode .login-panel,
body.cabinet-app :is(.metric, .quote-card, .fcl-analysis-card, dialog:not(.image-dialog), dialog .form-section) { border-radius: 8px !important; }
body.app-mode :is(.account-popover, .repair-form-card) :is(input, textarea, .site-select-button, .secondary-button, .primary-button),
body.login-mode :is(input, .primary-button, .secondary-button),
body.cabinet-app :is(.btn, .booking-select-button, .search, .form-grid input, .form-grid textarea, .upload-button) { border-radius: 6px !important; }
body:is(.cabinet-app, .login-mode) :is(button, a, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid #08786f; outline-offset: 3px; }
body.cabinet-app table th { font-weight: 500; }
body.cabinet-app table { font-variant-numeric: tabular-nums; }
@media (pointer: coarse) {
  body.cabinet-app :is(.btn, .close-btn, .nav-item),
  body.login-mode :is(button, input) { min-height: 44px; }
}

/* Site pass 8: remove decorative glow, not user-selected imagery. */
body.app-mode :is(.account-card, .display-settings-card, .admin-data-card, .log-clear-password-card),
body.login-mode .login-panel { box-shadow: 0 12px 36px rgba(30, 44, 42, .08) !important; }
body.app-mode :is(#accountPopover, #displaySettingsPopover, #adminDataPopover, #logClearPasswordPopover) {
  background: rgba(30, 44, 42, .18) !important;
}
body.app-mode :is(#accountPopover, #displaySettingsPopover, #adminDataPopover, #logClearPasswordPopover) > :is(.account-card, .display-settings-card, .admin-data-card, .log-clear-password-card) {
  border-radius: 8px !important;
  background: rgba(255, 255, 255, var(--panel-opacity, 1)) !important;
  box-shadow: 0 12px 36px rgba(30, 44, 42, .08) !important;
}
body.login-mode :is(.login-panel, .portal-link, .login-panel button),
body.cabinet-app :is(.metric, .quote-card, .report-panel, .fcl-analysis-card, .btn) { background-image: none !important; box-shadow: none !important; text-shadow: none !important; }
body.app-mode #financeView :is(.finance-chart-card, .finance-ranking-card, .finance-detail-card, .finance-intelligence-card) { background-image: none !important; }
body.app-mode #financeView .finance-kpi::after,
body.app-mode #financeView .finance-intelligence-card::after,
body.login-mode .login-panel::before, body.login-mode .login-panel::after { display: none !important; }
body.app-mode #financeView .finance-range-strip {
  border-color: var(--ui-rule);
  border-radius: 6px;
  background: rgba(8, 120, 111, calc(var(--panel-opacity, 1) * .04));
}
body.app-mode #financeView .finance-rank-row i b { background: #08786f; box-shadow: none; }
body.app-mode #financeView .finance-intel-ring { box-shadow: none; animation: none; }
body.app-mode #financeView .finance-intel-ring strong { letter-spacing: 0; }
body.app-mode #financeView .finance-intel-overview { border-radius: 6px; }
body.login-mode .login-portal { border-radius: 0; box-shadow: none; }
body.login-mode .portal-links { gap: 0; }
body.login-mode .portal-link {
  min-height: 56px;
  padding: 12px 16px;
  gap: 12px;
  border: 0;
  border-bottom: 1px solid rgba(130, 147, 153, calc(var(--login-panel-opacity, 1) * .22));
  border-radius: 0;
  box-shadow: none;
}
body.login-mode .portal-link span:not(.portal-dot) { font-size: 14px; font-weight: 400; }
body.login-mode .portal-link small { font-size: 12px; font-weight: 400; }
body.login-mode .portal-link .portal-dot { width: 7px; box-shadow: none; }
body.login-mode .login-status-mini-dot { box-shadow: none; }
body.cabinet-app dialog:not(.image-dialog) { box-shadow: 0 16px 48px rgba(30, 44, 42, .14) !important; }

/* Site pass 9: restrained feedback; never animate layout or entire surfaces. */
body.login-mode :is(.login-panel, .portal-link),
body.cabinet-app :is(.workspace, .metric, .report-panel) { animation: none !important; }
body.login-mode :is(button, .portal-link):hover,
body.cabinet-app :is(.btn, .metric, .quote-card):hover { transform: none !important; }
body.cabinet-app .btn, body.login-mode button {
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease !important;
}
@media (prefers-reduced-motion: reduce) {
  body.cabinet-app *, body.cabinet-app *::before, body.cabinet-app *::after,
  body.login-mode *, body.login-mode *::before, body.login-mode *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}