/*
 * Desktop ERP UI contract.
 *
 * Feature styles stay in app.css. This file is the single, last-loaded place for
 * shared tokens, layout primitives and cross-feature desktop composition rules.
 */

/* 1. Tokens */
:root {
  /* Existing palette aliases: the visual theme stays unchanged. */
  --surface: var(--panel);
  --ui-bg: var(--bg);
  --ui-surface: var(--panel);
  --ui-surface-muted: var(--panel2);
  --ui-card: var(--card);
  --ui-field: rgba(148, 163, 184, .09);
  --ui-border: var(--border);
  --ui-text: var(--text);
  --ui-muted: var(--muted);
  --ui-accent: var(--accent);
  --ui-accent-soft: rgba(79, 140, 255, .12);
  --ui-success-soft: rgba(34, 197, 94, .10);
  --ui-warning-soft: rgba(245, 158, 11, .10);
  --ui-danger-soft: rgba(239, 68, 68, .10);

  /* ERP density scale. */
  --erp-space-1: 4px;
  --erp-space-2: 8px;
  --erp-space-3: 12px;
  --erp-space-4: 16px;
  --erp-space-5: 20px;
  --erp-space-6: 24px;
  --erp-section-gap: 14px;
  --erp-field-gap: 10px;
  --erp-control-height: 40px;
  --erp-control-height-dense: 34px;
  --erp-font-xs: 11px;
  --erp-font-sm: 12px;
  --erp-font-body: 13px;
  --erp-font-title: 18px;
  --erp-content-max: 1440px;
  --erp-sidebar-width: 230px;
  --erp-actionbar-height: 56px;
  --erp-radius-sm: 4px;
  --erp-radius-md: 6px;
  --erp-radius-lg: 8px;
  --erp-shadow-dialog: 0 20px 60px rgba(0, 0, 0, .32);

  /* Compatibility names consumed by existing feature styles. */
  --ui-radius: var(--erp-radius-md);
  --ui-shadow: none;
}

.app-light {
  --ui-field: #eef3f8;
  --ui-accent-soft: rgba(37, 99, 235, .08);
  --ui-success-soft: rgba(34, 197, 94, .08);
  --ui-warning-soft: rgba(245, 158, 11, .08);
  --ui-danger-soft: rgba(239, 68, 68, .08);
}

/* 2. Reusable layout primitives */
.erp-section-stack {
  display: grid;
  gap: var(--erp-section-gap);
}

.erp-field-grid,
.two-cols,
.three-cols {
  display: grid;
  gap: var(--erp-field-gap);
  min-width: 0;
}

.erp-field-grid > *,
.two-cols > *,
.three-cols > * {
  min-width: 0;
}

.erp-field-grid--2,
.two-cols {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.erp-field-grid--3,
.three-cols {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.erp-scroll-body {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.erp-actionbar {
  min-height: var(--erp-actionbar-height);
  padding: var(--erp-space-2) var(--erp-space-4);
  gap: var(--erp-space-2);
  background: var(--ui-surface);
  border-color: var(--ui-border);
}

.ui-surface,
.ui-panel,
.ui-toolbar {
  background: var(--ui-surface);
  color: var(--ui-text);
  border-color: var(--ui-border);
}

.ui-card,
.ui-tile,
.ui-list-item,
.ui-empty,
.ui-state-info,
.ui-state-success,
.ui-state-warning,
.ui-state-danger {
  background: var(--ui-card);
  color: var(--ui-text);
  border: 1px solid var(--ui-border);
  border-radius: var(--erp-radius-md);
  box-shadow: var(--ui-shadow);
}

.ui-state-info { background: var(--ui-accent-soft); }
.ui-state-success { background: var(--ui-success-soft); }
.ui-state-warning { background: var(--ui-warning-soft); }
.ui-state-danger { background: var(--ui-danger-soft); }

/* 3. Quasar shape and density normalization */
.q-card,
.q-menu,
.q-dialog .q-card,
.q-date,
.q-markup-table.q-table__card {
  border-radius: var(--erp-radius-md) !important;
}

.q-dialog .q-card:not(.settings-card):not(.onboarding-card) {
  box-shadow: var(--erp-shadow-dialog) !important;
}

.q-btn:not(.q-btn--round),
.q-btn-toggle,
.q-chip,
.q-field--filled .q-field__control,
.q-field--outlined .q-field__control {
  border-radius: var(--erp-radius-sm) !important;
}

/* Restore the semantic shape after the old broad radius reset. */
.q-btn.q-btn--round,
.q-btn.q-btn--fab,
.q-avatar {
  border-radius: 50% !important;
}

.q-badge { border-radius: var(--erp-radius-sm) !important; }

/* 4. Settings shell */
.settings-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.settings-head {
  flex: 0 0 68px;
  min-height: 68px;
  padding: var(--erp-space-3) var(--erp-space-4);
}

.settings-layout {
  flex: 1 1 auto;
  width: 100%;
  height: auto !important;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: var(--erp-sidebar-width) minmax(0, 1fr);
  overflow: hidden;
}

.settings-tabs,
.settings-nav {
  width: auto;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  border-right: 1px solid var(--ui-border);
}

.settings-nav .q-item {
  min-height: var(--erp-control-height);
  padding: var(--erp-space-2) var(--erp-space-3);
}

.settings-body {
  min-width: 0;
  min-height: 0;
  padding: var(--erp-space-4);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.settings-page {
  width: 100%;
  max-width: var(--erp-content-max);
  margin-inline: auto;
}

.settings-page.compact-form,
.product-settings-page {
  gap: var(--erp-section-gap);
}

.settings-page .section-title {
  min-height: 24px;
  display: flex;
  align-items: center;
  gap: var(--erp-space-2);
  margin: 0;
}

/* 5. Personal planner: content defines height, the viewport only caps it. */
.personal-planner-dialog .q-dialog__inner {
  padding: var(--erp-space-4) var(--erp-space-6);
}

body .q-dialog .q-card.personal-planner-card,
body .personal-planner-card,
.personal-planner-dialog .q-card.personal-planner-card {
  width: min(1320px, calc(100vw - 48px)) !important;
  max-width: min(1320px, calc(100vw - 48px)) !important;
  height: auto !important;
  max-height: calc(100vh - 48px) !important;
  min-height: 0;
  overflow: hidden;
}

.personal-planner-head {
  flex: 0 0 auto;
  min-height: 64px;
  padding: var(--erp-space-3) var(--erp-space-4);
}

.personal-planner-body {
  flex: 0 1 auto;
  min-height: 0;
  max-height: calc(100vh - 114px);
  padding: var(--erp-space-3);
  overflow: auto;
  scrollbar-gutter: stable;
}

.personal-planner-grid,
.personal-planner-grid.period-month {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: minmax(min-content, auto);
  align-items: start;
  gap: var(--erp-space-2);
}

.personal-planner-day {
  min-width: 0;
  min-height: 112px;
  height: auto;
  padding: var(--erp-space-2);
  gap: var(--erp-space-2);
}

.personal-planner-ticket-list {
  display: grid;
  align-content: start;
  gap: var(--erp-space-1);
}

/* 6. Catalog workspace and adaptive product table */
.product-catalog-browser {
  width: 100%;
  min-width: 0;
  container-type: inline-size;
  container-name: product-catalog;
}

.product-settings-subtoolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--erp-space-3);
}

.product-settings-actions {
  margin-left: auto;
  flex-wrap: wrap;
}

.product-catalog-layout {
  grid-template-columns: minmax(190px, 230px) minmax(0, 1fr);
  gap: var(--erp-space-3);
  align-items: stretch;
}

.product-group-sidebar {
  min-width: 0;
  max-height: min(68vh, 760px);
  align-content: start;
  overflow: auto;
  border-radius: var(--erp-radius-md);
}

.product-list-panel {
  width: 100%;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  container-type: inline-size;
  container-name: product-table;
}

.product-catalog-table,
.product-catalog-table.q-table,
.product-catalog-table table {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100%;
  table-layout: fixed;
}

.product-catalog-table.q-markup-table {
  overflow-x: hidden !important;
}

.product-catalog-table th:last-child .product-column-resizer {
  right: 0;
}

.product-catalog-table th,
.product-catalog-table td {
  min-width: 0;
  height: auto;
  min-height: var(--erp-control-height);
  padding: 6px var(--erp-space-2);
}

.product-catalog-table .product-row-actions {
  white-space: nowrap;
  line-height: 1;
}

.product-catalog-table .product-row-actions .q-btn {
  margin: 1px;
}

.product-catalog-table .q-table__middle {
  overflow-x: hidden;
}

.service-catalog-table .service-col-actions {
  position: sticky;
  right: 0;
  z-index: 2;
  background: var(--panel);
  box-shadow: -1px 0 0 var(--border);
}

.service-catalog-table thead .service-col-actions {
  z-index: 4;
  background: var(--surface);
}

.service-catalog-table .service-table-row:hover .service-col-actions {
  background: color-mix(in srgb, var(--panel) 92%, var(--accent));
}

@container product-table (max-width: 1100px) {
  .product-catalog-table .product-col-sku,
  .product-catalog-table .product-col-status,
  .product-catalog-table .product-col-vat {
    display: none;
  }

  .product-catalog-table .product-col-select { width: 5% !important; }
  .product-catalog-table .product-col-product { width: 28% !important; }
  .product-catalog-table .product-col-unit { width: 7% !important; }
  .product-catalog-table .product-col-stock { width: 8% !important; }
  .product-catalog-table .product-col-cost { width: 10% !important; }
  .product-catalog-table .product-col-purchase { width: 11% !important; }
  .product-catalog-table .product-col-price { width: 11% !important; }
  .product-catalog-table .product-col-group { width: 12% !important; }
  .product-catalog-table .product-col-actions { width: 8% !important; }

  .service-catalog-table .service-col-status,
  .service-catalog-table .service-col-group {
    display: none;
  }

  .service-catalog-table .service-col-select { width: 6% !important; }
  .service-catalog-table .service-col-service { width: 47% !important; }
  .service-catalog-table .service-col-price { width: 17% !important; }
  .service-catalog-table .service-col-hours { width: 10% !important; }
  .service-catalog-table .service-col-actions { width: 9% !important; }
}

@container product-table (max-width: 680px) {
  .product-catalog-table .product-col-unit,
  .product-catalog-table .product-col-cost,
  .product-catalog-table .product-col-purchase,
  .product-catalog-table .product-col-group {
    display: none;
  }

  .product-catalog-table .product-col-select { width: 6% !important; }
  .product-catalog-table .product-col-product { width: 60% !important; }
  .product-catalog-table .product-col-stock { width: 12% !important; }
  .product-catalog-table .product-col-price { width: 14% !important; }
  .product-catalog-table .product-col-actions { width: 8% !important; }
  .product-catalog-table .product-compact-pricing { display: block; }

  .service-catalog-table .service-col-hours {
    display: none;
  }

  .service-catalog-table .service-col-select { width: 8% !important; }
  .service-catalog-table .service-col-service { width: 52% !important; }
  .service-catalog-table .service-col-price { width: 18% !important; }
  .service-catalog-table .service-col-actions { width: 10% !important; }
}

@container product-table (max-width: 1100px) {
  .product-catalog-table col[class],
  .service-catalog-table col[class] {
    min-width: 0 !important;
    max-width: none !important;
  }
}

@container product-catalog (max-width: 720px) {
  .product-catalog-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .product-group-sidebar {
    max-height: 220px;
  }
}

/* 7. Ticket form: one scroll owner and a stable action bar. */
body .q-dialog .q-card.create-card,
.q-dialog .create-card,
.create-card {
  width: min(var(--erp-content-max), calc(100vw - 32px)) !important;
  max-width: min(var(--erp-content-max), calc(100vw - 32px)) !important;
  height: min(920px, calc(100vh - 32px));
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.create-head {
  flex: 0 0 auto;
  min-height: 56px;
  padding: var(--erp-space-2) var(--erp-space-4) !important;
}

.create-card > .create-card-body {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  max-height: none !important;
  padding: var(--erp-space-3) var(--erp-space-4) !important;
  overflow: auto !important;
}

.create-card .create-layout {
  width: 100%;
  height: auto;
  min-height: 0;
  align-items: start;
  gap: var(--erp-space-4);
}

.create-layout.with-sidebar,
body.form-regular .create-layout.with-sidebar {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
}

.create-card .create-form {
  width: 100%;
  max-height: none !important;
  min-width: 0;
  overflow: visible !important;
  padding-right: 0;
}

.create-card .ticket-customer-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--erp-space-4);
  min-width: 0;
  align-items: start;
}

.create-card .ticket-customer-layout.with-sidebar {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  align-items: stretch;
}

.create-card .ticket-customer-fields {
  min-width: 0;
}

.create-form > .form-section {
  min-height: 24px;
  margin: var(--erp-space-1) 0 0;
  padding: 0 0 5px;
  border-bottom: 1px solid var(--ui-border);
  display: flex;
  align-items: center;
  gap: var(--erp-space-2);
}

.create-form > .form-section:first-child {
  margin-top: 0;
}

.create-form .ticket-form-problem-area {
  gap: var(--erp-space-2);
}

.create-form .ticket-form-problem-area .form-section {
  margin: 0;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--ui-border);
}

.create-card .customer-sidebar {
  position: sticky;
  top: 0;
  height: auto !important;
  max-height: calc(100vh - 170px);
  min-height: 0;
  padding: var(--erp-space-3);
  overflow: hidden;
  border-radius: var(--erp-radius-md) !important;
}

.create-card .ticket-customer-layout.with-sidebar > .customer-sidebar {
  align-self: stretch;
  height: 0 !important;
  min-height: 100%;
  max-height: none;
}

.create-card .customer-sidebar-scroll {
  min-height: 0;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.create-card .ticket-customer-layout .customer-match-section {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  display: flex;
  flex-direction: column;
  gap: var(--erp-space-2);
}

.create-card .ticket-customer-layout .customer-match-list {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  align-content: start;
}

.create-card .customer-match-company {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.create-actions {
  flex: 0 0 auto;
  min-height: var(--erp-actionbar-height);
  padding-inline: var(--erp-space-4);
}

/* 8. Desktop breakpoints */
@media (max-width: 1200px) {
  .create-layout.with-sidebar,
  body.form-regular .create-layout.with-sidebar {
    grid-template-columns: minmax(0, 1fr);
  }

  .create-card .ticket-customer-layout.with-sidebar {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .create-card .customer-sidebar {
    position: static;
    max-height: 320px;
  }

  .create-card .ticket-customer-layout.with-sidebar > .customer-sidebar {
    height: auto !important;
    min-height: 0;
  }

  .create-card .customer-sidebar-scroll {
    max-height: 300px;
  }
}

@media (max-width: 900px) {
  :root { --erp-sidebar-width: 196px; }

  .settings-body { padding: var(--erp-space-3); }

  .erp-field-grid--3,
  .three-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .personal-planner-dialog .q-dialog__inner {
    padding: var(--erp-space-2);
  }

  body .q-dialog .q-card.personal-planner-card,
  body .personal-planner-card,
  .personal-planner-dialog .q-card.personal-planner-card {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100vh - 16px) !important;
  }
}

@media (max-width: 720px) {
  .settings-layout {
    grid-template-columns: 168px minmax(0, 1fr);
  }

  .erp-field-grid--2,
  .erp-field-grid--3,
  .two-cols,
  .three-cols {
    grid-template-columns: minmax(0, 1fr);
  }

  .personal-planner-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .personal-planner-actions {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
  }
}

@media (max-height: 760px) {
  .settings-head {
    flex-basis: 50px;
    min-height: 50px;
  }

  .personal-planner-body {
    max-height: calc(100vh - 98px);
  }

  body .q-dialog .q-card.create-card,
  .q-dialog .create-card,
  .create-card {
    height: calc(100vh - 16px);
    max-height: calc(100vh - 16px);
  }
}

/* 9. Shared desktop form contract */
.q-dialog .q-form,
.q-dialog .q-card__section,
.settings-page,
.settings-form-row,
.detail-form,
.create-form {
  min-width: 0;
}

.q-dialog .q-form .q-field,
.q-dialog .q-form .q-field__inner,
.q-dialog .q-form .q-field__control,
.settings-page .q-field,
.settings-page .q-field__inner,
.settings-page .q-field__control {
  min-width: 0;
  max-width: 100%;
}

.q-dialog .q-toggle,
.settings-page .q-toggle {
  min-height: var(--erp-control-height-dense);
  align-content: center;
}

/* Keep credentials in complete rows instead of leaving an orphaned password
   field beside the single-user switch. */
.onboarding-no-password-toggle {
  grid-column: 1 / -1;
  margin: 0;
}

.onboarding-spec-head {
  display: grid;
  grid-template-columns: minmax(150px, 1.15fr) minmax(112px, .75fr) minmax(170px, 1fr) 32px;
  align-items: start;
  gap: var(--erp-space-2);
}

.onboarding-spec-name,
.onboarding-spec-color,
.onboarding-spec-domain {
  width: 100%;
  min-width: 0;
}

.onboarding-spec-remove {
  align-self: center;
  justify-self: end;
}

/* Ticket create/details share this compact editor. A named layout prevents
   Quasar gutter margins from exposing the page background between fields. */
.quick-service-editor-card {
  width: min(560px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  overflow: hidden;
  background: var(--ui-surface) !important;
}

.quick-service-editor-card > .q-form {
  display: flex;
  min-height: 0;
  flex-direction: column;
  background: inherit;
}

.quick-service-editor-body {
  display: grid;
  gap: var(--erp-field-gap);
  background: var(--ui-surface) !important;
}

.quick-service-values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--erp-field-gap);
}

.quick-service-values > * {
  min-width: 0;
}

.quick-service-active {
  justify-self: start;
}

/* Legacy technician dialog is still shipped and can be reused by extensions.
   Keep its fields in named rows instead of one overflowing implicit grid. */
.tech-card {
  width: min(980px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
}

.tech-card .ext-tech-form {
  display: grid;
  grid-template-columns: 72px repeat(2, minmax(0, 1fr)) minmax(130px, .72fr);
  grid-template-areas:
    "avatar name role active"
    "avatar color specs specs"
    "avatar lunch lunch lunch"
    "avatar actions actions actions";
  gap: var(--erp-field-gap);
  align-items: start;
  min-width: 0;
}

.tech-dialog-avatar { grid-area: avatar; justify-content: center; }
.tech-dialog-name { grid-area: name; }
.tech-dialog-role { grid-area: role; }
.tech-dialog-color { grid-area: color; }
.tech-dialog-specs { grid-area: specs; }
.tech-dialog-active { grid-area: active; align-self: center; white-space: nowrap; }
.tech-card .tech-lunch-row { grid-area: lunch; min-width: 0; }
.tech-dialog-actions { grid-area: actions; justify-self: end; }

.tech-card .tech-dialog-name,
.tech-card .tech-dialog-role,
.tech-card .tech-dialog-color,
.tech-card .tech-dialog-specs,
.tech-card .tech-lunch-row > * {
  min-width: 0;
}

/* Full-screen service book owns both scroll axes. `100vw` plus the dialog
   border previously created a stray page-level horizontal scrollbar. */
body .q-dialog .service-book-card,
.q-dialog .service-book-card,
.service-book-card {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
}

.service-book-body {
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.service-book-tabs {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  box-sizing: border-box;
  contain: inline-size;
}

.service-book-grid > *,
.service-book-history-filters > *,
.service-book-vehicle-grid > *,
.service-book-fields-grid > *,
.service-book-replacement-form > * {
  min-width: 0;
}

@media (max-width: 1280px) {
  .onboarding-page .spec-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .service-book-history-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .service-book-history-filters > :first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 620px) {
  .onboarding-spec-head {
    grid-template-columns: minmax(0, 1fr) 32px;
  }

  .onboarding-spec-name,
  .onboarding-spec-color,
  .onboarding-spec-domain {
    grid-column: 1;
  }

  .onboarding-spec-remove {
    grid-column: 2;
    grid-row: 1;
  }

  .quick-service-values {
    grid-template-columns: minmax(0, 1fr);
  }

  .tech-card .ext-tech-form {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "avatar"
      "name"
      "role"
      "color"
      "specs"
      "active"
      "lunch"
      "actions";
  }

  .tech-card .tech-lunch-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .tech-dialog-avatar { justify-content: flex-start; }
  .tech-dialog-actions { justify-self: stretch; }
}

/* 10. Form visual standard. Ticket field order is owned by the templates; this
   layer only normalizes geometry, rhythm and information hierarchy. */
:root {
  --erp-form-control-height: 40px;
  --erp-form-gap: 10px;
  --erp-form-section-gap: 14px;
  --erp-form-label-size: 12px;
  --erp-form-value-size: 14px;
  --erp-form-help-size: 11px;
}

body.form-compact {
  --erp-form-control-height: 36px;
  --erp-form-gap: 8px;
  --erp-form-section-gap: 12px;
}

:where([data-ui-form]) {
  min-width: 0;
  letter-spacing: 0;
}

:where([data-ui-form]) :where(.q-field, .q-field__inner, .q-field__control, .q-field__control-container),
:where([data-ui-form]) :where(.row, .col, [class*="col-"]) {
  min-width: 0;
  max-width: 100%;
}

:where([data-ui-form]) :where(.q-field--dense:not(.q-field--auto-height):not(.q-textarea)) > .q-field__inner > .q-field__control,
:where([data-ui-form]) :where(.q-field--dense:not(.q-field--auto-height):not(.q-textarea)) .q-field__marginal {
  min-height: var(--erp-form-control-height);
  height: var(--erp-form-control-height);
}

:where([data-ui-form]) :where(.q-field--dense.q-textarea) .q-field__control {
  min-height: 72px;
  height: auto;
}

:where([data-ui-form]) :where(.q-field__native, .q-field__input) {
  min-width: 0;
  color: var(--ui-text);
  font-size: var(--erp-form-value-size);
  line-height: 1.35;
  letter-spacing: 0;
}

:where([data-ui-form]) .q-field__label {
  max-width: calc(100% - 12px);
  color: var(--ui-muted);
  font-size: var(--erp-form-label-size);
  line-height: 1.2;
  letter-spacing: 0;
}

:where([data-ui-form]) :where(.q-field__bottom, .text-caption, .muted) {
  overflow-wrap: anywhere;
  font-size: var(--erp-form-help-size);
  line-height: 1.3;
  letter-spacing: 0;
}

:where([data-ui-form]) .q-field__bottom {
  min-height: 0;
  padding: 4px 8px 0;
}

:where([data-ui-form]) .q-field--error .q-field__bottom {
  min-height: 18px;
}

:where([data-ui-form]) .q-field--disabled {
  opacity: .68;
}

:where([data-ui-form]) .q-field--readonly:not(.q-field--disabled) .q-field__control {
  background: var(--ui-surface-muted) !important;
}

:where([data-ui-form]) :where(.q-toggle, .q-checkbox, .q-radio) {
  min-height: var(--erp-form-control-height);
  align-content: center;
}

:where([data-ui-form]) :where(
  .section-title,
  .form-section,
  .receipt-section-title,
  .product-editor-section-title,
  .payroll-panel-title
) {
  min-height: 24px;
  margin-top: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ui-muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0;
}

:where([data-ui-form]) :where(.text-h6, .create-title) {
  min-width: 0;
  font-size: var(--erp-font-title);
  line-height: 1.25;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

:where([data-ui-form]) :where(.compact-form, .detail-form, .create-form, .payment-dialog-body) {
  gap: var(--erp-form-gap);
}

:where([data-ui-form]) :where(.two-cols, .three-cols, .erp-field-grid, .settings-form-row) {
  gap: var(--erp-form-gap);
  align-items: start;
}

:where([data-ui-form]) :where(.q-card__actions, .erp-actionbar) {
  min-height: var(--erp-actionbar-height);
  gap: var(--erp-space-2);
  padding: var(--erp-space-2) var(--erp-space-4);
  flex-wrap: wrap;
  background: var(--ui-surface);
  border-top: 1px solid var(--ui-border);
}

:where([data-ui-form]) :where(.q-card__actions, .erp-actionbar) .q-btn:not(.q-btn--round) {
  min-height: 36px;
}

:where([data-ui-form].q-card) > .q-card__section:first-child:has(:where(.text-h6, .text-subtitle1, .create-title)) {
  min-height: 56px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--ui-border);
}

:where([data-ui-form]) :where(.q-chip, .q-badge, .q-btn, .q-tab__label) {
  letter-spacing: 0;
}

:where([data-ui-form]) .q-field__native > span,
:where([data-ui-form]) .q-field__input,
:where([data-ui-form]) .q-item__label {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* 11. РитмДела brand layer.
   The flyer is the palette authority; icon 06 is the product symbol. */
:root {
  --q-primary: #015b27;
  --q-secondary: #087a3d;
  --q-accent: #149653;
  --q-positive: #16834f;
  --q-negative: #c43d48;
  --q-info: #2f7d5a;
  --q-warning: #b7791f;
  --brand-green: #015b27;
  --brand-green-strong: #00471f;
  --brand-green-bright: #149653;
  --brand-green-soft: #e8f4ec;
  --brand-ink: #101713;
  --brand-paper: #fcfdfc;
}

html.app-dark,
body.app-dark,
.app-dark {
  --bg: #0d1712;
  --panel: #111f18;
  --panel2: #17271f;
  --border: rgba(210, 232, 218, .14);
  --text: #eef6f1;
  --muted: #9fb2a7;
  --slot: #0b1510;
  --slot-hover: #1a3024;
  --card: #16271e;
  --accent: #48c781;
  --topbar-bg: linear-gradient(105deg, #07150e 0%, #0d2719 58%, #103522 100%);
  --topbar-text: #f7fbf8;
  --topbar-muted: #b7c8bd;
  --input-bg: rgba(222, 239, 228, .07);
  --input-bg-focus: rgba(72, 199, 129, .10);
  --hint-bg: rgba(72, 199, 129, .09);
  --hint-border: rgba(72, 199, 129, .24);
  --ui-field: rgba(222, 239, 228, .07);
  --ui-accent-soft: rgba(72, 199, 129, .10);
}

html.app-light,
body.app-light,
.app-light {
  --bg: #f2f6f3;
  --panel: #ffffff;
  --panel2: #f6f9f7;
  --border: rgba(20, 55, 36, .15);
  --text: #142019;
  --muted: #64746a;
  --slot: #fbfdfb;
  --slot-hover: #eaf5ee;
  --card: #ffffff;
  --accent: #015b27;
  --topbar-bg: linear-gradient(105deg, #ffffff 0%, #f7fbf8 62%, #eaf5ee 100%);
  --topbar-text: #142019;
  --topbar-muted: #5f7166;
  --input-bg: #f7faf8;
  --input-bg-focus: #ffffff;
  --hint-bg: #edf7f0;
  --hint-border: rgba(1, 91, 39, .20);
  --ui-field: #f7faf8;
  --ui-accent-soft: rgba(1, 91, 39, .08);
}

.app-light .page-root,
body.app-light .page-root {
  background:
    radial-gradient(circle at 18% 0%, rgba(20, 150, 83, .08), transparent 34%),
    radial-gradient(circle at 94% 8%, rgba(1, 91, 39, .06), transparent 30%),
    linear-gradient(180deg, #fbfdfb 0%, var(--bg) 54%, #edf3ef 100%);
}

.topbar {
  background: var(--topbar-bg) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
  box-shadow: 0 5px 18px rgba(0, 48, 21, .08);
}

.database-chooser-app-icon {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.brand-big {
  width: 58px;
  height: 58px;
  padding: 0;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Inputs share one restrained surface, border and focus treatment. */
:where([data-ui-form]) .q-field--filled .q-field__control,
:where([data-ui-form]) .q-field--outlined .q-field__control {
  min-width: 0;
  background: var(--ui-field) !important;
  border: 1px solid var(--ui-border);
  box-shadow: none !important;
  transition: border-color .14s ease, box-shadow .14s ease, background .14s ease;
}

:where([data-ui-form]) .q-field--filled .q-field__control::before,
:where([data-ui-form]) .q-field--filled .q-field__control::after,
:where([data-ui-form]) .q-field--outlined .q-field__control::before,
:where([data-ui-form]) .q-field--outlined .q-field__control::after {
  border: 0 !important;
}

:where([data-ui-form]) .q-field--focused .q-field__control,
:where([data-ui-form]) .q-field:focus-within .q-field__control {
  border-color: color-mix(in srgb, var(--q-primary) 72%, var(--ui-border));
  background: var(--panel) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--q-primary) 11%, transparent) !important;
}

/* One button hierarchy: compact primary, quiet secondary, identical utilities. */
.q-btn {
  letter-spacing: 0 !important;
  text-transform: none;
}

.q-btn:not(.q-btn--round):not(.q-btn--fab) {
  min-height: 36px;
  padding-inline: 12px;
  font-size: 12px;
  font-weight: 700;
  box-shadow: none !important;
}

.q-btn.q-btn--round:not(.q-btn--fab),
:where([data-ui-form]) .q-btn.q-btn--round:not(.q-btn--fab) {
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
}

.q-btn.q-btn--flat.q-btn--round {
  border: 1px solid transparent;
}

.q-btn.q-btn--flat.q-btn--round:hover,
.q-btn.q-btn--flat.q-btn--round:focus-visible {
  border-color: var(--ui-border);
  background: var(--ui-accent-soft) !important;
  color: var(--accent) !important;
}

:where([data-ui-form]) .q-btn.bg-primary:not(.q-btn--round),
:where([data-ui-form]) .q-btn.bg-positive:not(.q-btn--round) {
  background: var(--q-primary) !important;
  color: #fff !important;
}

:where([data-ui-form]) .q-btn.bg-negative:not(.q-btn--round) {
  background: transparent !important;
  color: var(--q-negative) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--q-negative) 55%, transparent) !important;
}

:where([data-ui-form]) .q-btn.bg-warning:not(.q-btn--round) {
  background: color-mix(in srgb, var(--q-warning) 12%, transparent) !important;
  color: var(--q-warning) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--q-warning) 36%, transparent) !important;
}

:where([data-ui-form]) :where(.bg-blue-1, .bg-blue-2, .bg-blue-10) {
  background: var(--brand-green-soft) !important;
  color: var(--brand-green-strong) !important;
}

.technician-workspace .ticket-card,
.technician-workspace .queue-panel,
.technician-workspace .details-panel {
  border-color: color-mix(in srgb, var(--accent) 18%, var(--ui-border));
}

.restricted-client-card {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--ui-border));
  border-radius: var(--erp-radius-md);
  background: var(--brand-green-soft);
}

.restricted-client-card > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.restricted-client-card b {
  color: var(--brand-green-strong);
}

.restricted-client-card span {
  color: #315b42;
  font-size: 12px;
}

.q-notification {
  max-width: min(520px, calc(100vw - 32px));
  min-height: 44px;
  border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
  border-radius: var(--erp-radius-md) !important;
  box-shadow: 0 12px 30px rgba(0, 32, 14, .16) !important;
}

.app-splash {
  background:
    radial-gradient(circle at 50% 24%, rgba(20, 150, 83, .42), transparent 34%),
    linear-gradient(155deg, #06120b 0%, #0b2b19 58%, #015b27 100%);
}

.master-workday {
  height: 100%;
  padding: 18px;
  overflow: auto;
  background: var(--ui-bg);
}

.master-workday-head {
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.master-workday-head > img,
.master-work-dialog-head > img {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  object-fit: contain;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.master-workday-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.master-workday-summary .q-card,
.master-ticket-card,
.master-work-dialog .q-list {
  border-color: var(--ui-border) !important;
  background: var(--ui-surface) !important;
  box-shadow: none !important;
}

.master-workday-summary .q-card__section {
  min-height: 78px;
  padding: 12px;
}

.master-state {
  min-height: 42px;
  margin-bottom: 8px;
  padding: 8px 12px;
  border: 1px solid var(--ui-border);
  border-left-width: 3px;
  border-radius: var(--erp-radius-md);
  background: var(--ui-surface-muted);
  color: var(--ui-text);
}

.master-state-neutral { border-left-color: var(--ui-muted); }
.master-state-info { border-left-color: var(--q-primary); background: var(--ui-accent-soft); }
.master-state-success { border-left-color: var(--q-positive); background: var(--ui-success-soft); }
.master-state-warning { border-left-color: var(--q-warning); background: var(--ui-warning-soft); }
.master-state-danger { border-left-color: var(--q-negative); background: var(--ui-danger-soft); }

.master-workday-tickets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.master-ticket-head {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.master-ticket-actions,
.master-work-dialog-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.master-work-dialog {
  width: min(760px, calc(100vw - 32px));
  max-width: 760px;
  max-height: calc(100vh - 32px);
  overflow: hidden;
  background: var(--ui-surface) !important;
  color: var(--ui-text) !important;
}

.master-work-dialog-head {
  min-height: 62px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.master-work-dialog-body {
  max-height: calc(100vh - 98px);
  overflow: auto;
}

.master-inline-action {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--erp-form-gap);
}

.master-product-action {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 130px auto;
  align-items: start;
  gap: var(--erp-form-gap);
}

.master-inline-action > .q-btn,
.master-product-action > .q-btn {
  min-height: var(--erp-form-control-height);
}

@media (max-width: 760px) {
  .master-workday-summary,
  .master-workday-tickets {
    grid-template-columns: 1fr;
  }

  .master-product-action {
    grid-template-columns: minmax(0, 1fr) 110px;
  }

  .master-product-action > .q-btn {
    grid-column: 1 / -1;
    justify-self: end;
  }
}

.community-dialog-card {
  background: var(--ui-bg) !important;
  color: var(--ui-text) !important;
}

.community-dialog-toolbar {
  flex: 0 0 auto;
  min-height: 48px;
  padding-inline: 10px;
  border-bottom: 1px solid var(--ui-border);
  background: var(--ui-surface) !important;
  color: var(--ui-text) !important;
}

.community-dialog-toolbar > img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.community-dialog-card > .q-tabs {
  flex: 0 0 auto;
  min-height: 44px;
  border-bottom: 1px solid var(--ui-border);
  background: var(--ui-surface);
}

.community-dialog-card > .q-tab-panels,
.community-dialog-card > .q-tab-panels > .q-panel {
  min-height: 0;
  background: var(--ui-bg);
  color: var(--ui-text);
}

.community-form-card {
  width: min(540px, calc(100vw - 32px));
  max-width: 540px;
  max-height: calc(100vh - 32px);
  overflow: auto;
  background: var(--ui-surface) !important;
  color: var(--ui-text) !important;
}

.community-form-card-wide {
  width: min(660px, calc(100vw - 32px));
  max-width: 660px;
}

.community-form-body {
  display: grid;
  align-content: start;
  gap: var(--erp-form-gap);
}

/* Tables must occupy their whole seating area even with only one or two rows. */
:where([data-ui-form]) :where(.q-markup-table, .q-table__container),
.report-table,
.payroll-history-table,
.receipt-register-table,
.receipt-lines-table {
  width: 100%;
  max-width: 100%;
  align-self: stretch;
}

:where([data-ui-form]) :where(.q-table__middle),
:where([data-ui-form]) :where(.q-markup-table > .q-table__middle),
:where([data-ui-form]) :where(.q-markup-table table),
.report-table table,
.payroll-history-table table,
.receipt-register-table table,
.receipt-lines-table table {
  width: 100%;
}

.settings-page.product-settings-page,
.settings-page.service-catalog-page {
  max-width: none;
  margin-inline: 0;
}

.schedule-picker-grid.day {
  grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 1100px) {
  .technician-list-card-content {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 12. Light-theme neutral scale.
   Keep the green-neutral character, but leave enough separation from the
   text for long workdays: fields and secondary controls are two steps lighter
   than the workspace chrome. */
html.app-light,
body.app-light,
.app-light {
  --brand-gray-100: #eef1ef;
  --brand-gray-200: #dce2de;
  --brand-gray-300: #c3cbc6;
  --brand-gray-400: #98a39c;
  --brand-gray-500: #707b74;
  --brand-gray-600: #4d5850;
  --brand-gray-700: #303a33;
  --brand-paper: var(--brand-gray-100);
  --bg: var(--brand-gray-200);
  --panel: var(--brand-gray-100);
  --panel2: #d2dad5;
  --border: var(--brand-gray-400);
  --muted: var(--brand-gray-600);
  --slot: #d2dad5;
  --slot-hover: var(--brand-gray-300);
  --card: #e6ebe8;
  --topbar-bg: linear-gradient(105deg, var(--brand-gray-100) 0%, #dbe2dd 62%, #ced8d1 100%);
  --topbar-muted: var(--brand-gray-600);
  --input-bg: #edf1ee;
  --input-bg-focus: var(--brand-gray-100);
  --ui-bg: var(--brand-gray-200);
  --ui-surface: var(--brand-gray-100);
  --ui-surface-muted: #d2dad5;
  --ui-card: #e6ebe8;
  --ui-field: #edf1ee;
  --ui-border: var(--brand-gray-400);
  --ui-muted: var(--brand-gray-600);
}

.app-light .page-root,
body.app-light .page-root {
  background:
    radial-gradient(circle at 18% 0%, rgba(20, 150, 83, .08), transparent 34%),
    radial-gradient(circle at 94% 8%, rgba(1, 91, 39, .06), transparent 30%),
    linear-gradient(180deg, var(--brand-gray-100) 0%, var(--brand-gray-200) 54%, var(--brand-gray-300) 100%);
}

/* Outlined gray choices must remain readable in glare and for low-vision users. */
.app-light .login-users-list .q-chip.q-chip--outline {
  opacity: 1;
  background: var(--brand-gray-200) !important;
  color: var(--brand-gray-700) !important;
  border: 1px solid var(--brand-gray-600) !important;
}

.app-light :where(.text-grey-5, .text-grey-6, .text-grey-7) {
  color: var(--brand-gray-700) !important;
}

/* Keep free working time bright and reserve the saturated gray for bookings. */
.app-light .slot-cell:not(.has-ticket):not(.outside-work),
body.app-light .slot-cell:not(.has-ticket):not(.outside-work),
.app-light .slot-cell:not(.has-ticket):not(.outside-work) > .empty-slot,
body.app-light .slot-cell:not(.has-ticket):not(.outside-work) > .empty-slot {
  background: #fff !important;
}

.app-light .slot-cell.has-ticket:not(.outside-work),
body.app-light .slot-cell.has-ticket:not(.outside-work) {
  background: var(--slot) !important;
}

/* Week, two-week, month and personal calendars follow the same free/busy rule. */
.app-light .scheduler-calendar-day:not(.has-ticket),
body.app-light .scheduler-calendar-day:not(.has-ticket),
.app-light .personal-planner-day:not(.has-ticket),
body.app-light .personal-planner-day:not(.has-ticket),
.app-light .scheduler-month-day:not(.has-ticket):not(.outside),
body.app-light .scheduler-month-day:not(.has-ticket):not(.outside) {
  background: #fff !important;
}

.app-light .scheduler-calendar-day.has-ticket,
body.app-light .scheduler-calendar-day.has-ticket,
.app-light .personal-planner-day.has-ticket,
body.app-light .personal-planner-day.has-ticket,
.app-light .scheduler-month-day.has-ticket,
body.app-light .scheduler-month-day.has-ticket {
  background: var(--ui-card) !important;
}

.app-light .scheduler-month-day.outside:not(.has-ticket),
body.app-light .scheduler-month-day.outside:not(.has-ticket) {
  background: #fff !important;
  opacity: 1 !important;
}

.app-light .scheduler-month-day.outside.has-ticket,
body.app-light .scheduler-month-day.outside.has-ticket {
  opacity: 1 !important;
}

/* Details are a reading surface, so they stay white even with darker chrome. */
.app-light .details-panel,
body.app-light .details-panel,
.app-light .details-panel .panel-head,
body.app-light .details-panel .panel-head,
.app-light .details-panel .details-body,
body.app-light .details-panel .details-body,
.app-light .details-panel .detail-form,
body.app-light .details-panel .detail-form {
  background: #fff !important;
}

/* The scheduling dialog follows the same free/busy color contract. */
.app-light .schedule-picker-slot:not(.busy),
body.app-light .schedule-picker-slot:not(.busy) {
  background: #fff !important;
}

.app-light .schedule-picker-slot.busy,
body.app-light .schedule-picker-slot.busy {
  background: var(--ui-card) !important;
}

/* Modal dialogs are reading and decision surfaces: keep them bright in the light theme. */
.app-light .q-dialog .q-card,
body.app-light .q-dialog .q-card,
.app-light .q-dialog .q-card > :where(.q-card__section, .q-toolbar),
body.app-light .q-dialog .q-card > :where(.q-card__section, .q-toolbar) {
  background: #fff !important;
  color: var(--ui-text) !important;
  border-color: var(--ui-border) !important;
}

.app-light .q-dialog .q-card > .q-card__actions,
body.app-light .q-dialog .q-card > .q-card__actions,
.app-light .q-dialog :where(.schedule-picker-section, .schedule-picker-tech, .schedule-picker-day, .schedule-picker-person, .schedule-picker-hint, .schedule-picker-inline-empty, .schedule-picker-empty, .schedule-picker-tech-empty),
body.app-light .q-dialog :where(.schedule-picker-section, .schedule-picker-tech, .schedule-picker-day, .schedule-picker-person, .schedule-picker-hint, .schedule-picker-inline-empty, .schedule-picker-empty, .schedule-picker-tech-empty) {
  background: #f7f9f8 !important;
  border-color: var(--ui-border) !important;
}