/* Standard button size for the whole application.
   Height 38px (same as form fields), 13.5px text, 18px side padding, minimum width 88px.
   Width follows the text, so a longer label simply makes the button wider.
   Buttons inside table rows use a compact 30px height so rows stay tidy. */
html body :is(button.primary,button.ghost,button.danger,button.btn,button.btn-ghost,button.btn-danger,button.btn-save,
              .btn,.btn-ghost,.btn-danger,.mp-btn-primary,.mp-btn-ghost,.vb-btn-print,.vb-btn-close,.fold-btn,
              button.sheet-cancel,button.btn-done,button.back-link-module,button.rn-save,button.rn-cancel,button.del-cancel,button.del-confirm){
  box-sizing:border-box;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:38px; height:auto; min-width:88px;
  padding:0 18px; font-size:13.5px; font-weight:600; font-family:inherit; line-height:1.2;
  border-radius:8px; white-space:nowrap; cursor:pointer; text-decoration:none;
}
html body :is(td,th) :is(button.primary,button.ghost,button.danger,button.btn,button.btn-ghost,button.btn-danger,.btn,.btn-ghost,.btn-danger,.fold-btn){
  min-height:30px; min-width:0; padding:0 12px; font-size:12.5px; border-radius:7px;
}
@media (max-width:640px){
  html body :is(button.primary,button.ghost,button.danger,button.btn,button.btn-ghost,button.btn-danger,button.btn-save,.btn,.btn-ghost,.btn-danger,.mp-btn-primary,.mp-btn-ghost){ min-height:42px; }
}
/* Fallback colours (zero specificity, so any page that styles its own buttons still wins) */
:where(button.primary,button.btn,.btn,.mp-btn-primary){background:var(--maroon,#5D8F5B); color:#fff; border:1px solid var(--maroon,#5D8F5B);}
:where(button.ghost,button.btn-ghost,.btn-ghost,.mp-btn-ghost){background:#fff; color:var(--ink,#1c2531); border:1px solid var(--border,#d9d4c7);}
:where(button.danger,button.btn-danger,.btn-danger){background:#fff; color:var(--red,#b3261e); border:1px solid var(--red,#b3261e);}
:where(button.primary,button.ghost,button.danger,button.btn,button.btn-ghost,button.btn-danger):disabled{opacity:.55; cursor:not-allowed;}

/* ---- Read-only vs editable fields: one look for every module ------------------------------------------------------
   While a record is only being VIEWED (or a value is auto-filled / not allowed to be changed) the field is greyed with the same
   light grey everywhere. Fields the person can edit are white. Page-specific tints no longer apply. */
html body :is(input,select,textarea):disabled:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]):not([type=file]):not([type=range]):not([type=color]) {
  background-color:#ECEEF2 !important; color:#2b2f36 !important; -webkit-text-fill-color:#2b2f36; opacity:1; cursor:default; }
/* date boxes show a read-only text twin next to the real date input: grey it when the date input is locked */
html body div:has(> input[type=date]:disabled) > input[readonly] { background-color:#ECEEF2 !important; color:#2b2f36 !important; }
/* editable fields on the New / record forms are white */
html body #page-new :is(input,select,textarea):enabled:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]):not([type=file]):not([type=hidden]):not([type=color]) { background-color:#fff; }
html body #page-new div:has(> input[type=date]:enabled) > input[readonly] { background-color:#fff !important; }

/* ---- Phones: record-view action buttons and First / Prev / Next / Last, one standard layout in every module -----------
   Any row of two or more buttons in a page header (Back / Edit / Clone / Delete, Save / Cancel ...) stays on ONE row on a phone,
   every button the same height and an equal share of the width. A long row wraps as a whole (never one button alone on its own
   full-width line). The record navigator (First / Prev  1 of N  Next / Last) shrinks to fit inside the screen. */
@media (max-width:640px){
  html body :is(.page-head div:has(> button ~ button), .grv-header-actions, .rec-actions){
    display:flex !important; flex-wrap:wrap; gap:6px !important; width:100% !important; margin-top:6px; align-items:stretch; }
  html body :is(.page-head div:has(> button ~ button), .grv-header-actions, .rec-actions) > button{
    flex:1 1 76px !important; width:auto !important; min-width:0 !important; margin:0 !important;
    height:42px !important; min-height:42px !important; padding:0 6px !important; font-size:13px !important; line-height:1.1; }
  html body .ticket-nav-bar-row{ width:100%; margin:12px 0; }
  html body .ticket-nav-bar{ width:100%; box-sizing:border-box; gap:4px; justify-content:center; }
  html body .ticket-nav-bar > button{
    flex:1 1 0 !important; min-width:0 !important; width:auto !important; height:40px !important; min-height:40px !important;
    padding:0 2px !important; font-size:12px !important; }
  html body .ticket-nav-bar > span{ flex:0 0 auto; white-space:nowrap; font-size:13px !important; padding:0 4px !important; }
}