/* UI1: layout only. IDs, event handlers and RC3 persistence remain unchanged. */
@media screen {
  :root { --form-gap:16px; --dialog-pad:24px; }
  .content, .panel, .grid2 > *, .formgrid > *, .purchase-total-layout > * { min-width:0; }
  .sidebar { overflow-y:auto; overscroll-behavior:contain; padding-bottom:36px; }
  .content { min-width:0; }
  .content > header { gap:16px; flex-wrap:wrap; }
  .content > header > div { min-width:0; }
  .content > header h2 { overflow-wrap:anywhere; line-height:1.25; }
  .top-actions { align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:10px; }
  #connectionStatusBar {
    position:static!important; inset:auto!important; z-index:auto!important;
    max-width:100%; min-height:36px; flex-wrap:wrap; box-shadow:none;
    border-radius:10px; line-height:1.4; font-size:11px;
  }
  #connectionStatusText { min-width:0; overflow-wrap:anywhere; }
  #connectionStatusBar .connection-retry { min-height:32px!important; padding:6px 10px!important; }
  #mysqlBuildMark { z-index:1!important; pointer-events:none; }
  body.nirvana-offline .content, body.nirvana-offline main { filter:none; }

  .formgrid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-items:start; }
  .grid2 { grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; }
  label { min-width:0; font-size:13px; line-height:1.45; align-content:start; gap:7px; }
  input, select, textarea { min-width:0; max-width:100%; font:inherit; line-height:1.45; }
  input:not([type=checkbox]):not([type=radio]), select { min-height:42px; }
  textarea { resize:vertical; min-height:92px; }
  input[type=checkbox], input[type=radio] { width:18px; height:18px; min-height:18px; flex:0 0 18px; margin:0; padding:0; }
  label:has(>input[type=checkbox]), label:has(>input[type=radio]) { display:flex; align-items:center; gap:10px; }
  input[readonly], textarea[readonly] { background:#f6f8fa; color:#4b5563; }
  button { font:inherit; font-size:13px; line-height:1.4; white-space:normal; overflow-wrap:anywhere; cursor:pointer; }
  button:disabled { cursor:wait; opacity:.65; }
  button:focus-visible { outline:3px solid #ff5a1f80; outline-offset:3px; }
  .primary, .secondary, .success, .ghost, .danger, .danger-btn, .print-btn, .wa-btn { min-height:40px; padding:10px 14px; }
  .actions, .modal-actions, .item-footer, .panel-head {
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
  }
  .panel-head { margin-bottom:18px; }
  .panel-head h3 { margin-bottom:4px; line-height:1.3; }
  .panel-head > div { min-width:0; }
  .actions, .modal-actions { justify-content:flex-end; margin-top:20px; }
  .actions > button, .modal-actions > button { flex:0 1 auto; min-width:104px; max-width:100%; }
  .item-footer { padding:14px 0; margin:6px 0 12px; border-top:1px solid #edf0f3; }
  .item-footer > strong { min-width:0; overflow-wrap:anywhere; }
  .inline { align-items:stretch; min-width:0; gap:10px; }
  .inline > input, .inline > select { flex:1 1 0; width:0; }
  .inline > button { flex:0 0 auto; max-width:50%; }
  .toolbar, .search { min-width:0; flex-wrap:wrap; align-items:stretch; }
  .search input { min-width:0; flex:1 1 220px; }
  .toolbar > button { flex:0 1 auto; }
  .selected, .selected-box, .preview, .muted, .notice-box { overflow-wrap:anywhere; line-height:1.5; }
  .tablewrap { max-width:100%; min-width:0; overscroll-behavior-x:contain; }
  th, td { vertical-align:middle; }
  td:has(>button) { min-width:150px; }
  td > button { margin:3px 3px 3px 0; }
  .db-action-cell { flex-wrap:wrap; }
  .tabs { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .tab, .so-tab { min-width:0; min-height:40px; }
  .box { width:min(420px,100%); }
  .box > div, .purchase-total-box > div { gap:12px; min-width:0; flex-wrap:wrap; }
  .box > .payment-input-row, .payment-input-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .so-total-box { justify-content:space-between; gap:12px; flex-wrap:wrap; }
  .grand, .so-total-box strong { overflow-wrap:anywhere; }
  .formgrid label:has(.suggestions), .formgrid label:has([id$="Sug"]), .formgrid label:has([id$="Suggestions"]) { position:relative; }
  .suggestions { max-width:100%; width:100%; left:0; }

  /* A fixed header/footer surrounds one scrollable body in every dialog. */
  body:has(.modal.open) { overflow:hidden; }
  .modal { padding:16px; overflow:hidden; z-index:1000; }
  .modal.open { display:grid; place-items:center; }
  .modal .modalcard, #userModal .user-modal-card {
    display:flex; flex-direction:column; width:min(640px,100%); min-width:0;
    max-width:100%; max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px);
    margin:0; padding:0; overflow:hidden; border-radius:18px;
  }
  .modal .user-modal-card { width:min(760px,100%); }
  #userModal .user-modal-card { width:min(760px,100%); }
  .modal .crm-modalcard, .modal .db-edit-modal-card { width:min(780px,100%); }
  .modal .nota-card { width:min(900px,100%); }
  .modal .customer-detail-card { width:min(1000px,100%); }
  .modal .so-modal-card { width:min(1100px,100%); }
  .modal .modalhead, #userModal .modalhead, .modal .crm-modalhead {
    position:static; flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
    gap:16px; margin:0; padding:18px var(--dialog-pad); background:#fff;
    border-bottom:1px solid #e5e7eb; min-width:0;
  }
  .modalhead > div { min-width:0; }
  .modal .modalhead h3 { margin:0; font-size:19px; line-height:1.35; overflow-wrap:anywhere; }
  .modal .modalhead .muted { margin-top:4px; font-size:12px; }
  .modal .modalhead button, .modal .crm-modalhead .iconbtn {
    flex:0 0 40px; width:40px; height:40px; min-height:40px; padding:0;
    display:grid; place-items:center; border:1px solid #e5e7eb; background:#f4f6f8;
    border-radius:10px; font-size:24px; line-height:1;
  }
  .modalbody { flex:1 1 auto; min-height:0; min-width:0; overflow:auto; overscroll-behavior:contain; padding:20px var(--dialog-pad); }
  .modalcard > .actions, .modalcard > .modal-actions, .modalcard > .nota-actions, #userModal .modal-actions {
    position:static; flex:0 0 auto; margin:0; padding:16px var(--dialog-pad);
    border-top:1px solid #e5e7eb; background:#fff; gap:10px;
  }
  #userModal .access-section { flex:none; overflow:visible; max-height:none; padding-right:0; }
  #userModal .modal-actions .primary { min-width:104px; }
  #crmModal .formgrid { gap:16px; }
  #dbEditJson { min-height:220px; }
  .payment-history-panel { min-width:0; }
  .login-screen { overflow-y:auto; padding:24px; }
  .login-card { width:min(460px,100%); max-height:calc(100dvh - 48px); overflow:auto; }

  @media(max-width:1100px) {
    .grid2, .purchase-total-layout { grid-template-columns:minmax(0,1fr); }
    .cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
  }
  @media(max-width:700px) {
    :root { --dialog-pad:16px; }
    .sidebar { max-height:300px; padding:16px; }
    .sidebar nav { grid-template-columns:minmax(0,1fr); align-items:start; }
    .content { padding:14px; }
    .content > header { align-items:flex-start; }
    .top-actions { justify-content:flex-start; width:100%; }
    .formgrid, #crmModal .formgrid { grid-template-columns:minmax(0,1fr); }
    .span2, #crmModal .span2 { grid-column:1/-1; }
    .tabs { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .so-summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .search input { flex-basis:auto; }
    .modal { padding:12px; }
    .modal .modalcard, #userModal .user-modal-card { max-height:calc(100vh - 24px); max-height:calc(100dvh - 24px); }
    .modal .modalhead { padding:14px var(--dialog-pad); }
    .modal .modalhead h3 { font-size:17px; }
    .modalcard > .actions, .modalcard > .modal-actions { display:flex; }
    .modalcard > .actions > button, .modalcard > .modal-actions > button { flex:1 1 120px; }
    .nota-actions { grid-template-columns:minmax(0,1fr); }
    .panel-head { align-items:flex-start; }
    .panel-head > button { max-width:100%; }
    .period-filter label, .daily-period-controls label { min-width:0; }
    .nota-head { flex-wrap:wrap; }
    .nota-head h2 { font-size:20px; overflow-wrap:anywhere; }
    .nota-meta { grid-template-columns:minmax(80px,1fr) minmax(0,2fr); }
  }
  @media(max-width:420px) {
    .box > .payment-input-row, .payment-input-row { grid-template-columns:minmax(0,1fr); }
    .cards { grid-template-columns:minmax(0,1fr); }
    .so-summary-grid { grid-template-columns:minmax(0,1fr); }
    .inline { flex-wrap:wrap; }
    .inline > input, .inline > select { flex-basis:100%; width:100%; }
    .inline > button { max-width:100%; }
  }
}
/* Purchase receipt stays beside the reference without stretching the row. */
.purchase-number-proof{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;min-width:215px}
.purchase-receipt-thumb{display:inline-flex;align-items:center;gap:6px;max-width:150px;white-space:normal}
.purchase-receipt-thumb img{width:48px;height:48px;object-fit:contain;border-radius:4px}
.purchase-receipt-thumb img[hidden]{display:none}