/* HamMelk v94 – CENTRAL UI DESIGN LAYER
   All new pages should consume the --hm-ui-* tokens and .hm-ui-* components.
   Existing widgets (Jalali picker, calendars, popovers) retain their own geometry.
   Screen only: never alter A4/PDF/print layout. */
@media screen {
  :root {
    --hm-ui-text: #24364c;
    --hm-ui-muted: #526780;
    --hm-ui-soft: #f6f9fd;
    --hm-ui-surface: #fff;
    --hm-ui-border: #d8e2ee;
    --hm-ui-border-strong: #bfcee0;
    --hm-ui-accent: #386bb8;
    --hm-ui-accent-soft: #eef4fd;
    --hm-ui-shadow: 0 3px 12px rgba(28, 51, 83, .045);
    --hm-ui-radius: 14px;
    --hm-ui-gap: 14px;
    --hm-ui-section-gap: 18px;
    --hm-ui-control-height: 46px;
    --hm-ui-body: max(15px, calc(15px * var(--ds-body-scale, 1)));
    --hm-ui-label: max(14px, calc(14px * var(--ds-body-scale, 1)));
    --hm-ui-meta: max(14px, calc(14px * var(--ds-meta-scale, 1)));
    --hm-ui-title: max(18px, calc(18px * var(--ds-title-scale, 1)));
  }
  body .app-shell .page-content { min-width: 0; color: var(--hm-ui-text); }
  body .app-shell .page-content :is(.panel,.settings-section-card,.acct-v48-chart-card,.acct-v48-report-panel,.settings-clean-group,.owner-tab-panel,.receipt-step-v68,.stay-v58-field-section) { min-width: 0; }
  /* Reusable section building blocks, opt-in for new/converted forms. */
  body .app-shell .page-content .hm-ui-section {
    min-width: 0; padding: 16px; background: var(--hm-ui-soft);
    border: 1px solid var(--hm-ui-border); border-radius: var(--hm-ui-radius);
  }
  body .app-shell .page-content .hm-ui-section + .hm-ui-section { margin-top: var(--hm-ui-section-gap); }
  body .app-shell .page-content .hm-ui-section-head {
    min-width: 0; display: grid; gap: 4px; margin: 0 0 14px;
    padding: 0 0 11px; border-bottom: 1px solid var(--hm-ui-border);
  }
  body .app-shell .page-content .hm-ui-section-head h2,
  body .app-shell .page-content .hm-ui-section-head h3 {
    margin: 0; color: var(--hm-ui-text); font-size: var(--hm-ui-title) !important;
    line-height: 1.6; overflow-wrap: anywhere;
  }
  body .app-shell .page-content .hm-ui-section-head p {
    margin: 0; color: var(--hm-ui-muted); font-size: var(--hm-ui-meta) !important;
    font-weight: 650; line-height: 1.75;
  }
  body .app-shell .page-content .hm-ui-fields {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start; gap: var(--hm-ui-gap); min-width: 0;
  }
  body .app-shell .page-content .hm-ui-fields > * { min-width: 0; }
  body .app-shell .page-content .hm-ui-fields > .wide,
  body .app-shell .page-content .hm-ui-fields > .span-3 { grid-column: 1 / -1; }
  body .app-shell .page-content .hm-ui-actions {
    display: flex; flex-wrap: wrap; justify-content: flex-end;
    align-items: center; gap: 9px; margin-top: var(--hm-ui-section-gap);
    padding-top: 14px; border-top: 1px solid var(--hm-ui-border);
  }
  /* Consistent field visual hierarchy; excludes choice-only and icon controls. */
  body .app-shell .page-content :is(.hm-ui-fields,.owner-fields,.user-fields,.settings-fields-grid,.account-field-grid,.smart-entry-grid-v52,.stay-v58-dates-grid,.stay-v58-counts-grid,.form-grid,.cc92-fields,.cc92-settings-form) :is(label,.settings-field) {
    min-width: 0; overflow-wrap: break-word; color: var(--hm-ui-text);
    font-size: var(--hm-ui-label) !important; font-weight: 750; line-height: 1.65;
  }
  body .app-shell .page-content :is(.hm-ui-fields,.owner-fields,.user-fields,.settings-fields-grid,.account-field-grid,.smart-entry-grid-v52,.stay-v58-dates-grid,.stay-v58-counts-grid,.form-grid) > label {
    display: flex; flex-direction: column; align-items: stretch; gap: 7px;
  }
  body .app-shell .page-content :is(.hm-ui-fields,.owner-fields,.user-fields,.settings-fields-grid,.account-field-grid,.smart-entry-grid-v52,.stay-v58-dates-grid,.stay-v58-counts-grid,.form-grid,.cc92-settings-form) :is(input:not([type='hidden']):not([type='checkbox']):not([type='radio']):not([type='color']):not([type='range']),select,textarea) {
    min-width: 0; max-width: 100%; color: var(--hm-ui-text);
    border-color: var(--hm-ui-border-strong);
    font-size: var(--hm-ui-body) !important; line-height: 1.55;
  }
  body .app-shell .page-content :is(.hm-ui-fields,.user-fields,.owner-fields) :is(input:not([type='hidden']):not([type='checkbox']):not([type='radio']):not([type='color']),select) { min-height: var(--hm-ui-control-height); }
  body .app-shell .page-content :is(.hm-ui-fields,.owner-fields,.user-fields,.settings-fields-grid,.account-field-grid,.smart-entry-grid-v52,.stay-v58-dates-grid,.stay-v58-counts-grid,.form-grid,.cc92-settings-form) :is(input,select,textarea):focus-visible {
    border-color: var(--hm-ui-accent); outline: 2px solid rgba(56,107,184,.2); outline-offset: 1px;
  }
  body .app-shell .page-content :is(.hm-ui-fields,.settings-fields-grid,.account-field-grid,.smart-entry-grid-v52,.form-grid) :is(small,.field-help,.form-hint) {
    color: var(--hm-ui-muted); font-size: var(--hm-ui-meta) !important; line-height: 1.75;
    font-weight: 600; overflow-wrap: anywhere;
  }
  body .app-shell .page-content :is(.hm-ui-fields,.settings-fields-grid,.account-field-grid,.smart-entry-grid-v52,.form-grid) :is(input,textarea)::placeholder { color: #667b93; opacity: 1; }
  /* Custom choice controls are not ordinary text fields. */
  body .app-shell .page-content .hm-ui-fields :is(input[type='checkbox'],input[type='radio']) { width: 18px; min-width: 18px; height: 18px; flex: 0 0 auto; }
  body .app-shell .page-content :is(.field-help,.form-hint,.acct-v49-date-hint,.cc92-kicker,.cc92-view-heading p,.cc92-provider-heading-copy p) {
    color: var(--hm-ui-muted); font-size: var(--hm-ui-meta) !important; line-height: 1.75;
  }
  /* Other proven section structures share spacing and readable headings, without restructuring their DOM. */
  body .app-shell .page-content :is(.settings-subsection,.owner-subsection-v44,.account-subsection,.stay-v58-field-section,.smart-entry-card-v52,.receipt-step-v68) { min-width: 0; }
  body .app-shell .page-content :is(.settings-subsection,.owner-subsection-v44,.account-subsection) { border: 1px solid var(--hm-ui-border); border-radius: var(--hm-ui-radius); background: var(--hm-ui-soft); padding: 14px; }
  body .app-shell .page-content :is(.owner-tab-panel,.settings-section-card) :is(.section-title,.settings-subsection-title) { min-width: 0; }
  body .app-shell .page-content :is(.owner-tab-panel,.settings-section-card,.account-subsection) :is(.section-title > div,.settings-subsection-title > div) { min-width: 0; }
  body .app-shell .page-content :is(.owner-tab-panel,.settings-section-card,.account-subsection) :is(.section-title span,.settings-subsection-title p) { color: var(--hm-ui-muted); font-size: var(--hm-ui-meta) !important; line-height: 1.7; }
  body .app-shell .page-content :is(.owner-tab-panel,.settings-section-card,.account-subsection) :is(.section-title b,.settings-subsection-title h3) { font-size: var(--hm-ui-title) !important; }
  /* Readable lists, labels and badges in normal screen tables; allow natural horizontal table scrolling. */
  body .app-shell .page-content :is(.table-wrap,.sb84-table-wrap,.acct-v48-table-wrap,.bank-ledger-table) { max-width: 100%; min-width: 0; }
  body .app-shell .page-content :is(.table-wrap,.sb84-table-wrap,.acct-v48-table-wrap,.bank-ledger-table) :is(th,td) { font-size: var(--hm-ui-body) !important; line-height: 1.65; }
  body .app-shell .page-content :is(.table-wrap,.sb84-table-wrap,.acct-v48-table-wrap,.bank-ledger-table) th { color: var(--hm-ui-muted); font-weight: 850; }
  body .app-shell .page-content :is(.status-chip,.ds-badge,.acct-v48-status) { font-size: var(--hm-ui-meta) !important; line-height: 1.55; }
  body .app-shell .page-content :is(.settings-clean-copy small,.settings-center-intro-v74,.owner-usage-v26 small,.owner-card-v26 small,.user-card-v26 small) { color: var(--hm-ui-muted); font-size: var(--hm-ui-meta) !important; line-height: 1.75; }
  /* Form operations: maintain intended variants/colors; improve click area and wrapping. */
  body .app-shell .page-content :is(.hm-ui-actions,.form-footer,.acct-v48-filter-actions) :is(.button,button) { min-height: 44px; min-width: 0; white-space: normal; }
  body .app-shell .page-content :is(.hm-ui-actions,.form-footer,.acct-v48-filter-actions) { min-width: 0; }
  @media (max-width: 740px) {
    :root { --hm-ui-gap: 12px; --hm-ui-section-gap: 14px; --hm-ui-control-height: 48px; --hm-ui-body: max(15px,calc(15px * var(--ds-body-scale,1))); }
    body .app-shell .page-content .hm-ui-section { padding: 13px; }
    body .app-shell .page-content .hm-ui-fields { grid-template-columns: minmax(0,1fr); }
    body .app-shell .page-content .hm-ui-fields > :is(.wide,.span-3) { grid-column: auto; }
    body .app-shell .page-content :is(.settings-subsection,.owner-subsection-v44,.account-subsection) { padding: 12px; }
    body .app-shell .page-content .hm-ui-actions > :is(.button,button) { flex: 1 1 140px; }
    body .app-shell .page-content :is(.hm-ui-fields,.owner-fields,.user-fields,.settings-fields-grid,.account-field-grid,.smart-entry-grid-v52,.stay-v58-dates-grid,.stay-v58-counts-grid,.form-grid,.cc92-settings-form) :is(input:not([type='hidden']):not([type='checkbox']):not([type='radio']):not([type='color']):not([type='range']),select,textarea) { font-size: max(16px,var(--hm-ui-body)) !important; }
  }
  @media (max-width: 380px) {
    body .app-shell .page-content :is(.hm-ui-actions,.form-footer,.acct-v48-filter-actions) { flex-wrap: wrap; }
    body .app-shell .page-content .hm-ui-actions > :is(.button,button,a.button) { width: 100%; flex: 1 1 100%; }
  }
}