/* Shared screen controls, based on the purchase-invoice review. Document print styles stay independent. */
@media screen {
  #modal .modal-card:has(.purchase-item-picker) { width: min(1320px, calc(100vw - 24px)); }
  #modalForm.purchase-item-picker > .field { margin: 0; padding: 12px 16px; }
  #modalForm.purchase-item-picker table { table-layout: fixed; width: 1160px; }
  #modalForm.purchase-item-picker th:first-child { width: 48px; }
  #modalForm.purchase-item-picker th:nth-child(2) { width: 260px; }
  #modalForm.purchase-item-picker th:nth-child(3) { width: 64px; }
  #modalForm.purchase-item-picker :is(th,td) { white-space: normal; overflow-wrap: anywhere; }
  #modalForm.purchase-item-picker input[type=number] { width: 100%; min-width: 0; }
  #modalForm.purchase-item-picker input[type=checkbox] { width: 16px; height: 16px; min-height: 16px; padding: 0; }
  :root {
    --control-border: #aebfcd;
    --control-primary: #1e527d;
    --control-ink: #243746;
    --control-focus: #24649a;
    --table-heading: #cbdbe8;
    --table-heading-ink: #203e56;
    --control-radius: 4px;
    --dialog-surface: #f3f6f8;
  }

  :is(#content, #modal, .import-review-dialog) table thead th {
    background-color: var(--table-heading);
    color: var(--table-heading-ink);
    border-color: #afc2d2;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
  }
  :is(#content, #modal, .import-review-dialog) table {
    font-variant-numeric: tabular-nums;
  }
  #content .table-scroll td > .data-value {
    display: block;
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .invoice-filter-popup .form-actions button,
  #modal .form-actions button:not(.primary):not(.danger) {
    min-height: 32px;
    padding: 5px 10px;
    border: 1px solid var(--control-border);
    border-radius: var(--control-radius);
    background: #fff;
    color: #234864;
    font: inherit;
    line-height: 20px;
  }
  .invoice-filter-popup .form-actions [data-apply] {
    background: var(--control-primary);
    border-color: var(--control-primary);
    color: #fff;
  }
  .invoice-filter-popup button:focus-visible {
    outline: 2px solid var(--control-focus);
    outline-offset: 2px;
  }
  :is(#content, #modal, .import-review-dialog) :is(.table-scroll, .wide-table-wrap, .report-table-wrap) {
    max-width: 100%;
    min-width: 0;
    overscroll-behavior-x: contain;
  }

  :is(#content, #modal, .import-review-dialog) :is(button.primary, button.secondary, button.danger, button.mini):not(.login-stage button) {
    box-sizing: border-box;
    min-height: 32px;
    padding: 5px 10px;
    border: 1px solid var(--control-border);
    border-radius: var(--control-radius);
    font-family: inherit;
    font-size: 13px;
    line-height: 20px;
    letter-spacing: 0;
    box-shadow: none;
    overflow-wrap: anywhere;
  }
  :is(#content, #modal, .import-review-dialog) button.primary:not(.login-stage button) {
    background: var(--control-primary);
    border-color: var(--control-primary);
    color: #fff;
  }
  :is(#content, #modal, .import-review-dialog) :is(button.secondary, button.mini):not(.login-stage button) {
    background: #fff;
    color: #234864;
  }
  :is(#content, #modal, .import-review-dialog) button.danger {
    background: #fff7f6;
    border-color: #d69b96;
    color: #a32d2d;
  }
  :is(#content, #modal, .import-review-dialog) button.primary:enabled:hover { background: #174363; }
  :is(#content, #modal, .import-review-dialog) :is(button.secondary, button.mini):enabled:hover { background: #eaf1f6; }
  :is(#content, #modal, .import-review-dialog) button.danger:enabled:hover { background: #fcebea; }
  :is(#content, #modal, .import-review-dialog) button:disabled { opacity: .55; cursor: not-allowed; }
  :is(#content, #modal, .import-review-dialog) :is(button, input, select, textarea, summary, a):focus-visible {
    outline: 2px solid var(--control-focus);
    outline-offset: 2px;
  }

  #modal .modal-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-height: calc(100dvh - 32px);
    border: 1px solid var(--control-border);
    border-radius: 6px;
    color: var(--control-ink);
  }
  #modal .modal-head, .import-review-dialog > h3 {
    flex: 0 0 auto;
    margin: 0;
    padding: 12px 16px;
    background: var(--dialog-surface);
    color: var(--control-ink);
    border-bottom: 1px solid #cbd7e0;
  }
  #modal .modal-head h2, .import-review-dialog > h3 {
    color: var(--control-ink);
    font-size: 16px;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }
  #modal .modal-head .icon-button {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border: 1px solid var(--control-border);
    border-radius: var(--control-radius);
    background: #fff;
    color: var(--control-ink);
  }
  #modalForm {
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    scroll-padding-block: 12px 90px;
  }
  #modalForm .field { min-width: 0; overflow-wrap: anywhere; }
  #modalForm .field :is(input, select, textarea) { min-width: 0; max-width: 100%; box-sizing: border-box; }
  #content [data-readiness-version] { min-width: 0; max-width: 100%; width: min(620px, 100%); box-sizing: border-box; min-height: 32px; }
  #content[data-rendered-module="businessReadyOrders"] .action-row { flex-wrap: wrap; min-width: 0; }
  #content[data-rendered-module="businessReadyOrders"] :is([data-import-readiness], [data-readiness-clear], [data-readiness-page]) {
    min-height: 32px; padding: 5px 10px; border: 1px solid var(--control-border); border-radius: 4px; background: #fff; color: #234864; font: inherit;
  }
  #content[data-rendered-module="businessReadyOrders"] [data-import-readiness] { background: var(--control-primary); color: #fff; }
  #content[data-rendered-module="businessReadyOrders"] .table-scroll table { table-layout: fixed; width: 2600px; }
  #content[data-rendered-module="businessReadyOrders"] th { width: 140px; white-space: normal; }
  #content[data-rendered-module="businessReadyOrders"] th:first-child { width: 60px; }
  #content[data-rendered-module="businessReadyOrders"] th:is(:nth-child(4), :nth-child(8), :last-child) { width: 280px; }
  #content[data-rendered-module="businessReadyOrders"] td, #content[data-rendered-module="businessReadyOrders"] td > span { white-space: normal; overflow-wrap: anywhere; }
  #content[data-rendered-module="businessReadyOrders"] [data-readiness-ddd] { box-sizing: border-box; width: 100%; min-width: 0; }
  @media (max-width: 1100px) {
    #content .insole-table-controls { flex-wrap: wrap; overflow: visible; }
    #content .insole-table-controls .insole-bulk-toolbar { flex-wrap: wrap; flex-shrink: 1; width: 100%; margin-left: 0; white-space: normal; }
    #content .insole-table-controls .insole-bulk-toolbar :is(button, label) { height: auto; white-space: normal; }
  }
  #modalForm > .form-actions, .import-review-dialog > .form-actions {
    position: sticky;
    bottom: 0;
    z-index: 6;
    margin: 0;
    padding: 12px 16px;
    gap: 8px;
    background: var(--dialog-surface);
    border-top: 1px solid #cbd7e0;
  }
  @media (max-width: 600px) {
    #modalForm .meta-table, #modalForm .meta-table tbody, #modalForm .meta-table tr { display: block; width: 100%; }
    #modalForm .meta-table :is(th, td) { display: block; box-sizing: border-box; width: 100%; min-width: 0; text-align: left; white-space: normal; overflow-wrap: anywhere; }
    #modalForm .meta-table :is(input, select, textarea) { min-width: 0; max-width: 100%; box-sizing: border-box; }
    #modalForm.form-grid { grid-template-columns: minmax(0, 1fr); }
    #modalForm.form-grid > .field { grid-column: 1 / -1; }
    #modal { padding: 8px; }
    #modal .modal-card { max-height: calc(100dvh - 16px); }
    #modal .modal-head, .import-review-dialog > h3 { padding: 10px 12px; }
    #modalForm > .form-actions, .import-review-dialog > .form-actions { padding: 10px; }
    :is(#modal, .import-review-dialog) .form-actions > button { min-height: 40px; white-space: normal; }
  }
}