/* =========================================================
 *  Zing Ops — mobile / tablet optimisations
 *  Loaded AFTER styles.css; only adds/overrides for touch use.
 * ========================================================= */

/* Prevent iOS zoom-on-focus: form controls must be >=16px on touch widths. */
@media (max-width: 820px){
  .field input, .field select, .field textarea,
  input, select, textarea { font-size: 16px; }
  .main-pane .wrap { padding: 14px 12px; }
}

/* Comfortable tap targets on touch. */
@media (max-width: 820px){
  .btn { min-height: 44px; }
  .btn-sm { min-height: 36px; }
  .dnav { padding: 13px 14px; font-size: 15px; }
  .field input, .field select { min-height: 46px; }
}

/* KPI tiles: always fit the width (overrides any fixed inline column count). */
.kpi-grid.kpi-auto { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important; }

/* ---- Attendance rows ---- */
.att-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-top:1px solid var(--border); }
.att-row.absent { opacity:.55; }
.att-name { font-size:15px; }
.att-seg { display:inline-flex; background:var(--surface-2); border-radius:10px; padding:3px; gap:3px; }
.att-seg button { border:none; background:none; font:inherit; font-size:13px; padding:8px 14px; border-radius:8px; color:var(--text-soft); cursor:pointer; min-height:38px; }
.att-seg button.on { background:var(--surface); color:var(--text); font-weight:600; box-shadow:0 0 0 1px var(--border); }
.att-seg button.on.present { background:var(--green-bg); color:var(--green-fg); box-shadow:none; }
.att-seg button.on.late { background:var(--amber-bg); color:var(--amber-fg); box-shadow:none; }
.att-seg button.on.absent { background:var(--red-bg); color:var(--red-fg); box-shadow:none; }

/* On phones, stack the name above a full-width segmented control. */
@media (max-width: 560px){
  .att-row { flex-direction:column; align-items:stretch; gap:8px; }
  .att-seg { width:100%; }
  .att-seg button { flex:1; min-height:46px; }
}

/* ---- Attendance v2: one row per person, single tappable status pill ---- */
.att-row2 { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 2px; border-top:1px solid var(--border); }
.att-row2:first-child { border-top:none; }
.att-row2 .att-name { font-size:15px; line-height:1.35; }
.att-row2.off .att-name { opacity:.5; }
.att-pill { border:none; font:inherit; font-size:13px; font-weight:600; padding:8px 0; width:96px; text-align:center; border-radius:999px; cursor:pointer; min-height:38px; flex-shrink:0; transition:background .12s; }
.att-pill.present { background:var(--green-bg); color:var(--green-fg); }
.att-pill.late    { background:var(--amber-bg); color:var(--amber-fg); }
.att-pill.absent  { background:var(--red-bg);   color:var(--red-fg); }
@media (max-width: 820px){ .att-pill { min-height:42px; width:104px; } }

/* ---- Sticky action bar (phones/tablets) ---- */
@media (max-width: 900px){
  .sticky-actions {
    position: sticky; bottom: 0; z-index: 30;
    margin: 18px -12px 0; padding: 10px 12px;
    background: var(--surface); border-top: 1px solid var(--border);
    box-shadow: 0 -4px 16px rgba(20,25,50,.07);
    display: flex; gap: 10px;
  }
  .sticky-actions .btn { flex:1; min-height:48px; font-size:15px; }
}

/* Template editor grip is drag-anywhere on touch; disable native scroll there. */
.te-grip { touch-action: none; user-select: none; }

/* Template list / cards breathe a bit more on touch. */
@media (max-width: 820px){
  .te-card { padding: 14px; }
}