/* Shared screen controls only; print templates and map markers retain their layout. */
@layer phasuta-typography {
  @media screen and (max-width:820px) {
    html :is(button:not(.map-marker),select,textarea,input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not(.pst-thai-date-native))[data-ph-type],html a[data-ph-type="control"] { min-height:44px !important; }
    html :is(input:not(.pst-thai-date-native),select,textarea)[data-ph-type] { font-size:max(16px,var(--ph-font-control)) !important; }
  }
}
@media screen and (max-width:820px) {
  body { --mobile-nav-space: 82px; }
  /* The developer inspector must not cover mobile form controls. */
  #phasuta-typography-inspector { display:none !important; }
  button:not(.map-marker), a:is(.primary,.secondary,.ghost,.btn,.button,.tab,.quick-bill-trigger), input[type=submit] {
    box-sizing:border-box; min-height:44px !important; min-width:44px;
    max-width:100%; padding:10px 12px; line-height:1.4;
    white-space:normal; overflow-wrap:anywhere; touch-action:manipulation;
  }
  :is(button,a,input,select,textarea):focus-visible { outline:3px solid #c69438; outline-offset:2px; }
  :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea) {
    box-sizing:border-box; max-width:100%; min-width:0; min-height:44px !important; font-size:16px !important;
  }
  :is(.toolbar,.form-actions,.modal-actions,.actions,.row-actions,.period-actions,.top-actions,.panel-title-row,.evidence-upload,.batch-upload,.offcycle-upload,.slip-toolbar) {
    flex-wrap:wrap; gap:10px; min-width:0; max-width:100%;
  }
  :is(.form-actions,.modal-actions,.actions,.row-actions) > :is(button,a) { flex:0 1 auto; }
  :is(.entry-tabs,.tabs,[role=tablist]) { flex-wrap:wrap; gap:8px; max-width:100%; }
  :is(.entry-tabs,.tabs,[role=tablist]) > :is(button,a) { min-height:44px; height:auto; white-space:normal; }
  :is(.modal,.employee-modal,[role=dialog]) { box-sizing:border-box; max-width:calc(100vw - 20px); max-height:calc(100dvh - 20px); overflow-y:auto; overscroll-behavior:contain; }
  :is(.modal-head,.modal-footer) { flex-wrap:wrap; gap:10px; }
  :is(.table,.table-wrap,.table-scroll) { max-width:100%; overflow-x:auto; }
  :is(.grid,.form-grid,.inline-form,.line-main,.destination-box,.split-row) > * { min-width:0; }
  input[type=file],.bill-file-row { max-width:100%; min-width:0; width:100%; }
  body:has(.employee-modal) #phasuta-typography-inspector { display:none; }
  :is(.app-head,body > header) { flex-wrap:wrap; gap:12px; }
  .app-head nav a { display:inline-flex; align-items:center; min-height:44px; }
  .topbar { flex-wrap:wrap; height:auto; gap:8px; }
  .topbar .top-actions { width:100%; }
  .topbar .top-actions :is(button,a) { min-height:44px; font-size:14px; }
  .page-content { min-width:0; padding-bottom:calc(var(--mobile-nav-space) + 64px + env(safe-area-inset-bottom)); }
  .sidebar { padding-bottom:env(safe-area-inset-bottom); }
  .sidebar nav { display:flex; overflow-x:auto; flex-wrap:nowrap; justify-content:flex-start; gap:4px; width:100%; }
  .sidebar nav button { flex:0 0 74px; min-width:74px; min-height:64px; padding:6px 4px; }
  .sidebar nav button .nav-short { font-size:12px; white-space:normal; line-height:1.3; }
}
@media screen and (max-width:480px) {
  :is(.form-actions,.modal-actions,.actions) > :is(button,a) { flex:1 1 130px; }
  :is(.evidence-upload,.batch-upload,.offcycle-upload) { flex-direction:column; align-items:stretch; }
  :is(.evidence-upload,.batch-upload,.offcycle-upload) input[type=file] { width:100%; max-width:100%; }
  .panel-title-row { flex-direction:column; }
}