/* Forms, typography, and application-wide normalization */
.app-layout,
.app-layout button,
.app-layout input,
.app-layout select,
.app-layout textarea,
.modal,
.modal button,
.modal input,
.modal select,
.modal textarea {
  font-family: var(--font-body);
}

.page-hdr-title,
.page-title,
.modal-title,
.card-title,
.section-title {
  letter-spacing: 0;
}

.page-hdr-title,
.page-title {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.25;
}

.page-hdr-sub,
.page-subtitle,
.empty-sub,
.customer-meta,
.contact-meta,
.cost-lbl,
.stat-sub,
.dash-stat-sub,
.purch-stat-sub,
.rpt-stat-sub {
  font-size: 12px;
  line-height: 1.45;
}

.card,
.stat-card,
.info-cell,
.cost-panel,
.cap-card,
.activity-note-row,
.contact-card,
.module-toolbar,
.page-hdr .module-actions,
#custTablePane,
#customerDetailPanel,
.modal,
.sched-week-grid,
.sched-month-grid {
  background: #FFFFFF;
  border: 1.5px solid var(--surface-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
}

.card-hdr,
.modal-hdr,
.section-title,
.data-table th,
.sched-wc-label,
.sched-day-wc-label {
  background: var(--surface-header);
}

.card-hdr {
  min-height: 42px;
  padding: 10px 14px;
  border-bottom: 1.5px solid var(--surface-border);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}

.card-title,
.section-title,
.form-label,
.dash-action-hdr,
.rpt-section-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.35px;
}

.card-body {
  padding: 14px;
  font-size: 14px;
  line-height: 1.55;
}

.form-control,
.tbl-input,
.tbl-select,
.po-line-select,
.po-line-input {
  min-height: 38px;
  border: 1.5px solid var(--control-border);
  border-radius: var(--radius-control);
  background: #FFFFFF;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  padding: 8px 10px;
}

textarea.form-control {
  min-height: 82px;
}

select.form-control,
.tbl-select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 34px;
}

.data-table td.mono,
.mono,
.q-num,
.cust-id,
.cust-id-badge {
  font-family: var(--font-mono);
}

.stat-lbl,
.dash-stat-label,
.purch-stat-label,
.rpt-stat-label,
.info-lbl,
.health-label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 800;
  letter-spacing: 0.35px;
}

.stat-val,
.dash-stat-num,
.purch-stat-val,
.rpt-stat-val,
.info-val,
.health-val {
  color: var(--text);
  font-weight: 800;
}

.dash-action-row,
.rcv-line-row,
.inv-adj-row,
.sched-queue-item,
.cust-card {
  font-size: 13px;
  line-height: 1.4;
}

.badge,
.qdb-status,
.po-status,
.sbadge,
.inv-status-badge {
  border-radius: var(--radius-badge);
  font-size: 11px;
  font-weight: 800;
  padding: 3px 9px;
}

.modal {
  max-height: calc(100vh - 40px);
  overflow: hidden;
}

.modal-body {
  overflow-y: auto;
}

.modal-ftr {
  flex-shrink: 0;
  background: #FFFFFF;
  border-top: 1.5px solid var(--surface-border);
}

.module-toolbar,
.page-hdr .module-actions {
  background: #FFFFFF;
}

.quote-tabs,
.quote-subtabs,
.module-tabs,
.subnav,
.settings-tabs,
.purch-tabs,
.report-tabs {
  background: #FFFFFF;
  border: 1.5px solid var(--surface-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  padding: 6px;
  gap: 6px;
}

.qtab,
.module-tab,
.subnav button,
.settings-tabs button,
.purch-tabs button,
.report-tabs button {
  border-radius: var(--radius-control);
  min-height: 34px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 700;
  background: #FFFFFF;
  border: 1px solid transparent;
}

.qtab:hover,
.module-tab:hover,
.subnav button:hover,
.settings-tabs button:hover,
.purch-tabs button:hover,
.report-tabs button:hover {
  background: #F4F6F8;
  border-color: var(--surface-border);
  color: var(--text);
}

.qtab.active,
.module-tab.active,
.subnav button.active,
.settings-tabs button.active,
.purch-tabs button.active,
.report-tabs button.active {
  background: var(--accent);
  border-color: var(--accent-dark);
  color: #FFFFFF;
}

.app-layout .form-control,
.modal .form-control,
.page.active input.form-control,
.page.active select.form-control,
.page.active textarea.form-control,
.module-actions input.form-control,
.module-actions select.form-control,
.module-toolbar input.form-control,
.module-toolbar select.form-control,
.app-layout .tbl-input,
.app-layout .tbl-select {
  font-size: 14px;
}

.sched-day-corner,
.sched-day-hour-hdr,
.sched-corner,
.sched-day-name,
.sched-day-date,
.sched-wc-cap,
.djob-num,
.djob-sub,
.scard-num,
.scard-hrs,
.scard-ship,
.month-stats,
.month-late-warn,
.month-job-dot,
.cap-card-sub {
  font-size: 12px;
  line-height: 1.35;
}

.sched-wc-name,
.scard-title,
.djob-title,
.sqi-num,
.sqi-hrs,
.sqi-status {
  font-size: 13px;
  line-height: 1.35;
}

/* Form and control formatting */
:root {
  --ui-font-size: var(--font-size-body);
  --ui-font-size-sm: var(--font-size-meta);
  --ui-label-size: var(--font-size-label);
  --ui-control-h: 38px;
  --ui-cell-pad-y: 10px;
  --ui-cell-pad-x: 12px;
  --filter-control-height: 36px;
  --filter-search-width: 320px;
  --filter-select-width: 180px;
  --filter-date-width: 160px;
}

body,
.app-layout,
.page,
.modal {
  font-size: var(--ui-font-size);
  line-height: 1.45;
}

.page {
  color: var(--text);
}

.page-hdr {
  align-items: center;
  gap: 16px;
  min-height: 70px;
}

.page-hdr > div:first-child {
  min-width: 220px;
}

.page-hdr-title,
.page-title {
  margin: 0;
}

.page-hdr-sub,
.page-subtitle {
  margin-top: 3px;
  color: var(--text-muted);
  font-weight: 600;
}

.module-toolbar,
.page-hdr .module-actions,
.modal-foot,
.modal-ftr,
.card-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
}

.module-toolbar,
.page-hdr .module-actions {
  flex-wrap: wrap;
}

.module-toolbar,
.page-hdr .module-actions {
  min-height: 50px;
}

.module-toolbar {
  margin: 0 0 14px;
  padding: 10px 12px;
}

.module-toolbar.is-attached {
  margin-bottom: 12px;
}

.page-hdr .module-actions {
  justify-content: flex-end;
  padding: 8px;
}

/* Canonical module-filter geometry. Data roles, rather than legacy IDs,
   utility widths, or inline dimensions, own every list filter control. */
.app-layout .module-toolbar > .form-control[data-filter-kind] {
  height: var(--filter-control-height);
  min-height: var(--filter-control-height);
}

.app-layout .module-toolbar > .form-control[data-filter-kind="search"] {
  flex: 0 0 var(--filter-search-width);
  width: var(--filter-search-width);
  min-width: var(--filter-search-width);
  max-width: var(--filter-search-width);
}

.app-layout .module-toolbar > select.form-control[data-filter-kind],
.app-layout .module-toolbar > .form-control[data-filter-kind="party"],
.app-layout .module-toolbar > .form-control[data-filter-kind="item"],
.app-layout .module-toolbar > .form-control[data-filter-kind="user"] {
  flex: 0 0 var(--filter-select-width);
  width: var(--filter-select-width);
  min-width: var(--filter-select-width);
  max-width: var(--filter-select-width);
}

.app-layout .module-toolbar > input.form-control[data-filter-kind="date"] {
  flex: 0 0 var(--filter-date-width);
  width: var(--filter-date-width);
  min-width: var(--filter-date-width);
  max-width: var(--filter-date-width);
}

.app-layout .module-toolbar > .btn {
  min-height: var(--filter-control-height);
}

.app-layout .module-toolbar > .btn:last-child {
  margin-left: auto;
}

.btn {
  min-height: 34px;
  justify-content: center;
  font-weight: 750;
}

.btn-sm,
.btn-xs {
  min-height: 32px;
}

.btn-xs {
  padding: 4px 9px;
}

.btn-icon {
  min-width: 32px;
  min-height: 32px;
  justify-content: center;
}

.form-row {
  gap: 12px;
  margin-bottom: 12px;
}

.form-group {
  min-width: 0;
}

.form-label {
  display: block;
  margin-bottom: 5px;
  color: var(--text-muted);
}

.form-control,
.tbl-input,
.tbl-select,
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  width: 100%;
}

.card,
.modal,
.data-table,
.module-toolbar,
.quote-tabs,
.page-hdr .module-actions {
  border-radius: var(--radius-card);
}

.card + .card,
.rpt-section + .rpt-section {
  margin-top: 14px;
}

.card-hdr {
  justify-content: space-between;
}

.card-hdr .btn,
.section-title .btn {
  margin-left: auto;
}

.data-table td.mono,
.mono {
  white-space: nowrap;
}

.qtab,
.module-tab,
.sched-view-btn {
  white-space: nowrap;
}

.modal {
  width: min(92vw, 760px);
}

.modal-wide {
  width: min(94vw, 1040px);
}

.modal-hdr,
.modal-foot,
.modal-ftr {
  padding-left: 18px;
  padding-right: 18px;
}

.modal-hdr {
  background: #111820;
  border-bottom: 3px solid var(--accent);
}

.modal-title,
.modal-hdr .modal-title,
.modal-hdr span,
.modal-hdr div {
  color: #FFFFFF;
}

.modal-hdr .btn-icon {
  color: rgba(255,255,255,0.82);
}

#loginOverlay .modal-title {
  color: #FFFFFF;
}

.modal-foot,
.modal-ftr {
  justify-content: flex-end;
  min-height: 58px;
}

.modal-body {
  font-size: var(--ui-font-size);
}

.empty-state {
  color: var(--text-muted);
}
.stat-card,
.dash-stat-card,
.purch-stat,
.rpt-stat,
.health-item,
.info-cell {
  padding: 14px;
}

.compact-kpi {
  min-height: 84px;
}

.compact-kpi .dash-stat-num {
  font-size: 24px;
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.page-hdr-title {
  font-size: var(--font-size-page-title);
  line-height: 1.15;
}

.page-hdr-sub,
.page-subtitle {
  font-size: var(--font-size-meta);
}

.card-title,
.form-label,
.section-title {
  font-size: var(--font-size-label);
}

.qtab,
.btn {
  font-size: var(--font-size-button);
}

.form-control,
.tbl-input,
.tbl-select {
  font-size: var(--font-size-control);
}

.dash-grid,
.dash-grid-8,
.info-grid,
.customer-info-grid {
  gap: 14px;
}

#custTablePane {
  width: 100%;
}

#customerDetailPanel {
  display: none;
  overflow-x: hidden;
}

#customerDetailPanel.has-customer {
  display: block;
}

#custTablePane.has-customer-detail {
  width: 55%;
}

.customer-detail-shell {
  max-width: none;
}

.customer-detail-head {
  align-items: flex-start;
  flex-wrap: wrap;
}

.customer-detail-title {
  overflow-wrap: anywhere;
}

.customer-detail-actions {
  flex-wrap: wrap;
}

.customer-detail-shell .info-grid {
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}

.customer-detail-shell .info-cell {
  min-width: 0;
  padding: 11px 12px;
}

.customer-detail-shell .info-lbl,
.customer-detail-shell .info-val {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.customer-detail-shell .info-lbl {
  font-size: var(--font-size-label);
}

.customer-detail-shell .info-val {
  font-size: 16px;
  line-height: 1.2;
}

.customer-info-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.customer-info-grid .card-body > div {
  grid-template-columns: minmax(100px, 32%) minmax(0, 1fr);
}

.customer-info-grid .card-body a,
.customer-info-grid .card-body span,
.customer-info-grid .card-body strong {
  overflow-wrap: anywhere;
}

/* Canonical application type scale. Component-specific emphasis may change
   weight or size, but shared roles do not redefine each other. */
.app-layout,
.modal {
  font-size: var(--font-size-body);
}

.app-layout .page-hdr-sub,
.app-layout .page-subtitle {
  font-size: var(--font-size-meta);
  line-height: 1.3;
}

.app-layout .module-toolbar,
.app-layout .module-actions,
.app-layout .qtab,
.app-layout .btn,
.modal .btn {
  font-size: var(--font-size-button);
  font-weight: var(--font-weight-action);
  line-height: 1.3;
}

.app-layout .form-control,
.app-layout .tbl-input,
.app-layout .tbl-select,
.modal .form-control,
.modal .tbl-input,
.modal .tbl-select {
  font-size: var(--font-size-control);
  line-height: 1.3;
}

.app-layout .card-title,
.app-layout .section-title,
.app-layout .form-label,
.app-layout .stat-lbl,
.app-layout .dash-stat-label,
.app-layout .purch-stat-label,
.app-layout .rpt-stat-label,
.app-layout .info-lbl,
.app-layout .dash-action-hdr {
  font-size: var(--font-size-label);
  line-height: 1.25;
  letter-spacing: 0.35px;
}

.app-layout .cost-row,
.app-layout .cost-lbl,
.app-layout .cost-val {
  font-size: 13px;
  line-height: 1.3;
}

.app-layout .cost-row.grand .cost-lbl {
  font-size: 12px;
}

.app-layout .cost-row.grand .cost-val {
  font-size: 18px;
}

.app-layout .stat-val,
.app-layout .dash-stat-num {
  line-height: 1.05;
}

@media (max-width: 760px) {
  .module-toolbar,
  .page-hdr .module-actions,
  .modal-foot,
  .modal-ftr {
    align-items: stretch;
    flex-direction: column;
  }
  .module-toolbar .form-control,
  .module-toolbar input,
  .module-toolbar select,
  .page-hdr .module-actions .form-control,
  .page-hdr .module-actions input,
  .page-hdr .module-actions select,
  .btn {
    width: 100%;
  }
  .page-hdr > div:first-child {
    min-width: 0;
  }
  .modal {
    width: min(96vw, 760px);
  }

  .app-layout .module-toolbar > .form-control[data-filter-kind] {
    flex: 1 1 100%;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
  }
}