/* ═══════════════════════════════════════════════════════════════
   mobile-polish.css — Trillion-dollar mobile UX layer
   ───────────────────────────────────────────────────────────────
   Additive, defensive polish for the phone / APK experience. Loaded
   AFTER style.css so it wins the cascade. Everything meaningful is
   scoped to ≤768px so desktop is untouched. Targets the app's common
   Tailwind-utility markup (modals: #xModal.fixed.inset-0 > .bg-white
   card; controls: input/select/textarea) so it lifts every screen at
   once — attendance, DPR, GRN entry, forms — without per-module edits.
   ═══════════════════════════════════════════════════════════════ */

/* Global (harmless everywhere): kill the grey tap flash, opt into
   fast taps, smooth momentum scrolling. */
* { -webkit-tap-highlight-color: transparent; }
button, a, [onclick], .cursor-pointer, label, select { touch-action: manipulation; }
.overflow-x-auto, .overflow-auto, .overflow-y-auto { -webkit-overflow-scrolling: touch; }

/* Editable measurement-sheet column headers (Nos / L / B / H) */
.hdr-edit {
  display: inline-block;
  min-width: 1.4em;
  padding: 1px 4px;
  border-radius: 4px;
  border-bottom: 1px dashed #94a3b8;
  cursor: text;
  outline: none;
}
.hdr-edit:hover { background: rgba(37, 99, 235, .08); }
.hdr-edit:focus { background: #fff; border: 1px solid #2563eb; box-shadow: 0 0 0 2px rgba(37, 99, 235, .2); }

@media (max-width: 768px) {

  /* ── 1. Touch-comfortable form controls ─────────────────────────
     16px prevents iOS zoom-on-focus; 48px is the Apple/Material tap
     minimum; a soft radius + clear focus ring reads modern. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="hidden"]),
  select,
  textarea {
    font-size: 16px !important;
    min-height: 48px;
    border-radius: 12px !important;
    padding-top: 10px; padding-bottom: 10px;
    transition: border-color .15s ease, box-shadow .15s ease;
  }
  textarea { min-height: 96px; line-height: 1.5; }
  input:focus, select:focus, textarea:focus {
    outline: none !important;
    border-color: #7c5cfc !important;
    box-shadow: 0 0 0 3px rgba(124, 92, 252, .18) !important;
  }
  select {
    -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2394a3b8' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
  }

  /* ── 2. Comfortable, confident buttons ──────────────────────────
     Full-width and modal buttons carry the primary actions — give
     them real height and a satisfying press. Tiny inline/icon
     buttons (mbn-*, table row actions) are left alone. */
  button[class~="w-full"],
  [id$="Modal"] .flex button,
  [id$="Overlay"] button {
    min-height: 48px;
  }
  button[class~="w-full"] { border-radius: 12px !important; font-weight: 700; }
  button:not(.mbn-item):not(.mbn-fab):active { transform: scale(.97); }
  button, [onclick] { transition: transform .08s ease; }

  /* ── 3. Modals become bottom sheets ─────────────────────────────
     The single biggest "native app" upgrade. The full-screen dim
     backdrop pins its card to the bottom; the card slides up with a
     rounded top and a grab handle, scrolls internally, and keeps its
     last action clear of the home indicator. */
  [id$="Modal"].fixed.inset-0,
  [id$="Overlay"].fixed.inset-0 {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  [id$="Modal"].fixed.inset-0 > div,
  [id$="Overlay"].fixed.inset-0 > div {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    border-radius: 22px 22px 0 0 !important;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    box-shadow: 0 -12px 40px rgba(15, 23, 42, .28) !important;
    animation: mp-sheet-up .3s cubic-bezier(.2, .8, .2, 1);
  }
  /* Grab handle */
  [id$="Modal"].fixed.inset-0 > div::before,
  [id$="Overlay"].fixed.inset-0 > div::before {
    content: "";
    display: block;
    width: 42px; height: 5px;
    border-radius: 3px;
    background: #e2e8f0;
    margin: 0 auto 14px;
  }
  @keyframes mp-sheet-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }

  /* ── 4. Cards & surfaces ────────────────────────────────────────
     Softer corners and a lighter, layered shadow read premium. */
  .bg-white.rounded-2xl, .bg-white.border.rounded-2xl { border-radius: 20px !important; }
  .bg-white.rounded-xl, .bg-white.border.rounded-xl { border-radius: 16px !important; }

  /* ── 5. Dense tables stay usable ────────────────────────────────
     Wrap wide tables so the page body never scrolls sideways, and
     give rows breathing room for fat fingers. */
  table { min-width: max-content; }
  .overflow-x-auto > table, .overflow-auto > table { min-width: 100%; }
  td, th { white-space: nowrap; }

  /* ── 6. Page rhythm ─────────────────────────────────────────────
     A touch more vertical air between stacked blocks. */
  #appContainer main { padding-left: 14px !important; padding-right: 14px !important; }

  /* ── 7. Sticky section headers inside sheets read as native ──── */
  [id$="Modal"].fixed.inset-0 > div > .flex.justify-between.items-center:first-of-type {
    position: sticky; top: 0; z-index: 2;
    background: #fff;
    padding-top: 4px; padding-bottom: 10px;
    margin-bottom: 10px !important;
  }
}

/* ── 8. DPR measurement / overhead entry → large stacked cards ───
   On desktop these are compact spreadsheet-style tables. On a phone
   that means cramped, side-scrolling micro-inputs. Here each row
   becomes a full-width card with big labelled fields — the same easy,
   large-box feel as the mobile measurement sheet. */
@media (max-width: 768px) {
  .dpr-entry-table { min-width: 0 !important; width: 100% !important; }
  .dpr-entry-table thead { display: none; }
  .dpr-entry-table, .dpr-entry-table tbody { display: block; width: 100%; }

  .dpr-entry-table tr {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 12px 8px 4px;
    margin-bottom: 12px;
    box-shadow: 0 4px 16px rgba(15, 23, 42, .06);
    position: relative;
    overflow: hidden;
  }
  .dpr-entry-table td {
    flex: 0 0 100%;
    box-sizing: border-box;
    padding: 0 4px 12px !important;
    text-align: left !important;
  }
  .dpr-entry-table td::before {
    content: attr(data-l);
    display: block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #94a3b8;
    margin-bottom: 4px;
  }
  /* Field sizing */
  .dpr-entry-table td input,
  .dpr-entry-table td select {
    width: 100% !important;
    min-height: 48px;
    font-size: 16px !important;
    text-align: left !important;
    box-sizing: border-box;
  }
  .dpr-entry-table td .dm-otherdesc { margin-top: 8px; }

  /* Column layout inside each card */
  .dpr-entry-table td.dpr-wide { flex: 0 0 100%; }
  .dpr-entry-table td.dpr-dim  { flex: 0 0 25%; }       /* Nos · L · B · H — 4 up */
  .dpr-entry-table td.dpr-half { flex: 0 0 50%; }       /* Qty · Unit / Type · Rate … */
  .dpr-entry-table td.dpr-dim input { text-align: center !important; }

  /* Overhead "Cost" cell is a value, not an input */
  .dpr-entry-table td.dpr-half .oh-cost {
    display: block; min-height: 44px; line-height: 44px;
    font-size: 17px !important;
  }

  /* Delete → full-width "Remove" bar */
  .dpr-entry-table td.dpr-del {
    display: block; width: 100%;
    text-align: center !important;
    padding-top: 4px !important;
    border-top: 1px dashed #f1f5f9;
    margin-top: 2px;
  }
  .dpr-entry-table td.dpr-del::before { content: none; }
  .dpr-entry-table td.dpr-del button {
    width: 100%; min-height: 44px;
    font-size: 13px !important; font-weight: 700;
    color: #ef4444 !important; background: #fef2f2 !important;
    border-radius: 10px !important;
  }
  .dpr-entry-table td.dpr-del button::after { content: " Remove row"; font-size: 13px; }
}

/* Very small phones — tighten type & spacing so nothing clips. */
@media (max-width: 380px) {
  .bg-white.rounded-xl, .bg-white.rounded-2xl { padding: 16px !important; }
  h2, h3 { line-height: 1.2; }
}