/* Mobile-only overrides for NLD Timekeeper (loaded with media="(max-width: 900px)") */

/* Stop accidental horizontal scrolling on iOS when content-box widths + padding add up */
*, *::before, *::after { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }
.shell, .main, .content, .panel, .card { max-width: 100%; }

/* Improve touch targets and spacing */
.content { padding: 0 12px 24px; }
.panel { padding: 12px; margin: 12px 0; }

/* Forms: stack fields and make buttons easier to tap */
.row { align-items: stretch; }
.row > * { flex: 1 1 100% !important; min-width: 0 !important; width: 100% !important; }

.btn, button {
  width: 100%;
  padding: 14px 14px;
  border-radius: 12px;
}

/* Keep small inline buttons (like table actions) from becoming huge */
table .btn, table button { width: auto; padding: 10px 12px; }

/* KPIs stack nicely */
.kpis { flex-direction: column; }
.kpi { min-width: 0; }

/* Tables: horizontal scroll when needed */
table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Make wide tables actually scroll (otherwise they try to shrink too hard) */
table thead, table tbody { white-space: nowrap; }

/* Allow long description cells to wrap if the table is wider */
td { white-space: normal; }

/* Login screen: make the card and logo responsive */
body.bg .card.narrow { width: 100%; max-width: 520px; margin: 12px auto; }
body.bg .card.narrow img {
  width: min(260px, 70vw) !important;
  height: auto !important;
}

/* Long headings can force overflow if they don't wrap */
h1, h2, h3 { overflow-wrap: anywhere; }

/* Sidebar overlay + focus */
body.sidebarOpen::after {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 9; /* below sidebar (z=10), above content */
}

/* Reduce sidebar width a bit on phones */
.sidebar { width: 240px; }
.brand img { width: 216px; }

/* Page title spacing */
.mainTop { padding: 12px 12px; }
.mainTop h1 { font-size: 1.25rem; }

/* Make modal fit smaller screens */
.modal { padding: 12px; }
.modalCard { padding: 14px; }