/* Native date controls need an explicit inline size in WebKit flex/grid children. */
@media screen {
  .workspace-ui .field { min-inline-size: 0; }
  .workspace-ui :is(input[type='date'],input[type='month'],input[type='datetime-local']) {
    display: block; inline-size: 100%; min-inline-size: 0; max-inline-size: 100%;
    box-sizing: border-box; appearance: none; -webkit-appearance: none;
  }
  .workspace-ui input::-webkit-date-and-time-value { text-align: left; min-height: 1.25em; }
  .workspace-ui input::-webkit-datetime-edit { min-width: 0; padding: 0; }
  .filter-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-left: auto; }
}
@media screen and (max-width: 600px) {
  .workspace-ui .main { padding: 18px 14px calc(28px + env(safe-area-inset-bottom,0px)); }
  .workspace-ui .button, .workspace-ui .button.small, .workspace-ui .table-icon-link { min-height: 44px; }
  .workspace-ui .topbar { padding-inline: 14px; }
  .workspace-ui .page-heading { gap: 16px; margin-bottom: 22px; }
  .workspace-ui .toolbar > .field { min-width: 0; max-width: 100%; }
  .workspace-ui .toolbar :is(input,select) { width: 100%; min-width: 0; }
  .workspace-ui .toolbar .search-field { flex-basis: 100%; max-width: none; }
  .workspace-ui .toolbar .compact-filter { min-width: 0; }
  .workspace-ui .mobile-filter-label {
    position: static; display: block; width: auto; height: auto; padding: 0;
    overflow: visible; clip: auto; clip-path: none; white-space: normal;
    font-size: 12px; line-height: 20px; color: var(--muted); margin: 0 0 6px;
  }
  .workspace-ui .billing-filter-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px 12px; padding: 16px; align-items: start; }
  .workspace-ui .billing-filter-form :is(.search-field,.month-filter,.filter-actions) { grid-column: 1 / -1; width: 100%; }
  .workspace-ui .billing-filter-form .field { margin: 0; min-width: 0; max-width: none; }
  .workspace-ui .billing-filter-form .filter-actions { margin: 2px 0 0; gap: 10px; border-top: 1px solid var(--line); padding-top: 14px; }
  .billing-filter-form .filter-actions > .button:first-child { flex: 1; background: #f4f1ee; border-color: #e7ddd6; color: #783b2b; }
  .billing-filter-form .toolbar-end { margin-left: auto; padding-inline: 8px; }
  .workspace-ui .expense-filter-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; gap: 14px 12px; }
  .expense-filter-form :is(.search-field,.compact-filter) { grid-column: 1 / -1; width: 100%; }
  .expense-filter-form > .button { width: 100%; }
  .billing-list-page .list-tabs { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 0; padding-inline: 6px; overflow: visible; }
  .billing-list-page .list-tabs > a { min-width: 0; justify-content: center; gap: 5px; font-size: 12px; padding: 13px 4px; }
  .billing-list-page .list-tabs > a > span { min-width: 16px; padding: 0 3px; font-size: 11px; }
  .workspace-ui .list-caption { padding: 12px 16px; gap: 8px; line-height: 1.7; }
  .workspace-ui .record-form > .form-actions { padding-bottom: calc(20px + env(safe-area-inset-bottom,0px)); }
  .workspace-ui .sticky-actions { padding-bottom: calc(18px + env(safe-area-inset-bottom,0px)); }
  .workspace-ui .monthly-selection .toolbar { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: start; }
  .monthly-selection .toolbar > .button { margin-top: 28px; }
  .monthly-selection .toolbar > .small-note { grid-column: 1 / -1; min-width: 0; }
  .workspace-ui .form-actions > .action-start { flex-basis: 100%; }
  /* Keep the same bill links and permission-controlled actions in a readable mobile card. */
  .billing-list-page .invoice-list-wrap { overflow: visible; padding: 0 14px 14px; }
  .billing-list-page .invoice-table { display: block; min-width: 0; width: 100%; border: 0; }
  .billing-list-page .invoice-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .billing-list-page .invoice-table tbody { display: grid; gap: 14px; }
  .billing-list-page .invoice-table tbody tr { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px 16px; padding: 18px 16px 0; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
  .billing-list-page .invoice-table tbody td { display: block; height: auto; padding: 0; min-width: 0; max-width: none; border: 0; text-align: left; white-space: normal; overflow-wrap: anywhere; font-size: 14px; }
  .billing-list-page .invoice-table td[data-label]::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 400; color: var(--muted); line-height: 1.5; margin-bottom: 5px; }
  .billing-list-page .invoice-table :is(.bill-card-identity,.period-cell,.unpaid-amount,.bill-card-status,.bill-card-actions) { grid-column: 1 / -1; }
  .billing-list-page .invoice-table .bill-number { font-size: 13px; overflow-wrap: anywhere; }
  .billing-list-page .invoice-table .period-cell > span { display: inline; }
  .billing-list-page .invoice-table .period-cell > span + span::before { content: ' — '; color: var(--muted); }
  .billing-list-page .invoice-table .row-amount { font-size: 16px; font-variant-numeric: tabular-nums; }
  .billing-list-page .invoice-table .unpaid-amount { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; background: #f8f5f2; border-radius: 6px; padding: 10px 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
  .billing-list-page .invoice-table .unpaid-amount::before { margin: 0; flex-shrink: 0; }
  .billing-list-page .invoice-table .bill-card-status { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
  .billing-list-page .invoice-table .bill-card-status .invoice-due { flex-basis: 100%; }
  .billing-list-page .invoice-table .bill-card-actions { border-top: 1px solid var(--line); padding: 8px 0; }
  .billing-list-page .invoice-row-actions { display: flex; width: 100%; flex-direction: row; justify-content: space-between; align-items: center; gap: 12px; }
  .billing-list-page .invoice-row-actions .list-row-action { min-height: 44px; display: inline-flex; align-items: center; }
  .billing-list-page .invoice-row-actions .table-icon-link { min-width: 44px; width: auto; gap: 6px; padding: 8px; }
  .billing-list-page .invoice-row-actions .table-icon-link::after { content: "PDF"; font-size: 12px; }
}
@media screen and (max-width: 360px) {
  .billing-list-page .list-tabs { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .workspace-ui .financial-metrics .metric-currency { font-size: 17px; }
}

@media screen and (min-width: 601px) {
  .workspace-ui .field .mobile-filter-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
}

/* Lease saving stays compact; secondary destinations retain their normal submit values. */
@media screen {
  .workspace-ui .editor-save-more > summary { min-width: 44px; padding-inline: 12px; }
  .workspace-ui .editor-save-more .menu-popover { top: auto; bottom: calc(100% + 8px); width: 210px; max-width: calc(100vw - 40px); }
  .workspace-ui .editor-save-more .menu-popover button { min-height: 44px; }
  .workspace-ui .editor-errors li { margin-block: 8px; line-height: 1.7; }
}
@media screen and (max-width: 760px) {
  .workspace-ui :is(.term-shortcuts,.cycle-shortcuts) button { min-height: 44px; min-width: 44px; padding: 10px 14px; }
  .workspace-ui :is(.editor-step,.editor-errors) { scroll-margin-top: 80px; }
  .workspace-ui .editor-footer { position: sticky; bottom: 0; z-index: 30; padding: 10px 14px calc(10px + env(safe-area-inset-bottom,0px)); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 -4px 18px #30251e08; }
  .workspace-ui .editor-footer .button { min-height: 44px; font-size: 13px; }
  .workspace-ui .editor-footer .editor-save-state { flex-basis: 100%; margin: 0; font-size: 11px; }
  .workspace-ui .editor-footer > [data-save-actions] { margin-left: auto; flex-wrap: nowrap; gap: 8px; }
  /* Let the on-screen keyboard have the viewport while a field is being edited. */
  .workspace-ui #lease-editor:has(:is(input,select,textarea):focus) .editor-footer,
  .workspace-ui .record-form:has(:is(input,select,textarea):focus) > .form-actions { position: static; }
  .workspace-ui .settlement-preview { grid-template-columns: minmax(0,1fr); gap: 14px; }
  .workspace-ui .settlement-preview > div { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; min-width: 0; }
  .workspace-ui .settlement-preview span { margin: 0; }
  .workspace-ui .settlement-preview strong { font-size: 20px; overflow-wrap: anywhere; }
  .workspace-ui .settlement-preview > div:nth-child(3) { padding-top: 14px; border-top: 1px solid #ddd3cc; }
  .workspace-ui .settlement-preview > div:nth-child(3) strong { color: #873927; font-size: 24px; }
}
@media screen and (max-width: 760px) and (max-height: 520px) {
  .workspace-ui .editor-footer, .workspace-ui .record-form > .form-actions { position: static; }
}