/* Phone fixes injected into the older staff pages (accountant, warehouse). */
body{ padding-top:calc(12px + env(safe-area-inset-top))!important; padding-bottom:calc(84px + env(safe-area-inset-bottom))!important; }
input[type=date], input[type=datetime-local], input[type=time], input[type=month]{ direction:ltr; text-align:start; color-scheme:dark; }
.pill{ font-size:12px!important; }
thead th{ font-size:12px!important; }

.tip{ display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; border:1px solid #232f4d;
  background:#1c2844; color:#a9b2cc; font:700 12px 'Space Grotesk',sans-serif; cursor:pointer; padding:0; margin-inline-start:6px; vertical-align:middle; }
.tip-pop{ position:fixed; z-index:120; max-width:min(320px, calc(100vw - 32px)); background:#1c2844; border:1px solid #f59e0b; color:#eef1fb;
  font:13px/1.7 'IBM Plex Sans Arabic',sans-serif; padding:10px 12px; border-radius:12px; box-shadow:0 10px 28px rgba(0,0,0,.55); }

@media (max-width:820px){
  .section{ overflow-x:visible!important; }
  table.mcards{ min-width:0!important; }
  table.mcards thead{ display:none; }
  table.mcards, table.mcards tbody, table.mcards tr, table.mcards td{ display:block; width:100%; }
  table.mcards tbody{ padding:8px 10px; }
  table.mcards tr{ background:#101a30; border:1px solid #232f4d; border-radius:12px; margin:0 0 8px; padding:6px 12px; }
  table.mcards td{ display:flex; justify-content:space-between; align-items:center; gap:12px; border:none!important; padding:6px 0!important; text-align:end!important; white-space:normal; }
  table.mcards td::before{ content:attr(data-label); color:#8a93b0; font-size:12px; text-align:start; flex:none; }
  table.mcards td:not([data-label])::before, table.mcards td[data-label=""]::before{ content:none; }
  table.mcards td[colspan]{ display:block; text-align:center!important; }
  table.mcards td[colspan]::before{ content:none; }
}

/* Readable sizes on phones and on the computer: nothing under 12px. */
.field label{ font-size:12.5px !important; }
.kpi .l{ font-size:12.5px !important; }
thead th{ font-size:12px !important; }
.pill{ font-size:11.5px !important; }
.btn-sm, .act-btn{ font-size:12.5px !important; }
.topbar p, .login-card p, .error{ font-size:12.5px !important; }