/* Mobile / responsive layer for TRGBI Attendance.
   Below 768px the desktop 230px sidebar is replaced by a dark bottom tab bar +
   a "More" drawer, and content reflows to a single narrow column. Desktop
   (>=768px) is completely unaffected — every rule here is inside the media
   query, except the default-hidden state of the mobile-only chrome. */

/* Mobile-only chrome is hidden by default (desktop). */
.oh-bottom-nav { display: none; }
.oh-drawer { display: none; }

@media (max-width: 768px) {
  /* ---- layout swap ---- */
  .oh-sidebar { display: none; }
  .oh-wrapper { display: block; }
  .oh-main { min-height: 100vh; }
  .oh-content { padding: 1rem; padding-bottom: 5.5rem; } /* clear the bottom nav */
  /* pages with a floating action button need extra room so the last list item
     isn't hidden behind the FAB (FAB sits at bottom:72px, ~50px tall). */
  .oh-content:has(.oh-m-fab) { padding-bottom: 8.5rem; }

  .oh-topbar { padding: 0 1rem; }
  .oh-topbar__title { font-size: 0.95rem; }
  .oh-topbar__name { display: none; } /* keep the top bar compact */

  /* ---- content reflow ---- */
  .oh-card-grid { grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-bottom: 1rem; }
  .oh-chart-grid { grid-template-columns: 1fr; margin-bottom: 1rem; }
  .oh-page-header { margin-bottom: 1rem; }
  .oh-page-title { font-size: 1.15rem; }
  .oh-page-header--row { flex-direction: column; align-items: stretch; gap: 0.7rem; }
  .oh-form-inline { flex-direction: column; align-items: stretch; gap: 0.7rem; }
  .oh-form-inline .oh-input-group { width: 100%; }
  /* narrow utility widths (code/time) shouldn't shrink the stacked field */
  .oh-form-inline .oh-input--code { max-width: none; }
  /* the trailing submit button in a stacked inline form goes full-width */
  .oh-form-inline > .oh-btn { width: 100%; }
  .oh-form-card, .oh-form-card--wide { max-width: 100%; }
  .oh-row-2 { grid-template-columns: 1fr; gap: 0.7rem; }
  .oh-card__value { font-size: 1.4rem; }
  /* form-actions: align as a tidy full-width row; primary action grows */
  .oh-form-actions { gap: 0.5rem; }
  .oh-form-actions > .oh-btn--secondary,
  .oh-form-actions > .oh-btn--success,
  .oh-form-actions > .oh-btn--danger { flex: 1; }
  /* page-header action clusters (inline "style=display:flex" rows + .oh-form-actions
     inside a header) wrap and stretch instead of overflowing; their buttons share
     the row evenly for a tidy, intentional control bar */
  .oh-page-header--row > div[style*="flex"],
  .oh-page-header--row > .oh-form-actions { flex-wrap: wrap; }
  .oh-page-header--row > div[style*="flex"] > .oh-btn,
  .oh-page-header--row > .oh-form-actions > .oh-btn { flex: 1 1 auto; }
  /* wide tables scroll inside their card instead of breaking the layout
     (per-screen table→card layouts replace this progressively) */
  .oh-card { overflow-x: auto; }
  /* cards whose content is already a responsive card-table or mobile card list
     must not trap that content in a horizontal scrollbar */
  .oh-card:has(.oh-table--cards),
  .oh-card:has(.oh-m-list) { overflow-x: visible; }

  /* ---- filter tabs: wrap to a tidy grid of pills, no horizontal scroll ---- */
  .oh-filter-tabs { flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.85rem; }
  .oh-filter-tab {
    flex: 1 1 auto;
    text-align: center;
    padding: 0.5rem 0.7rem; /* ~38px tall pill, comfortable thumb target */
    white-space: nowrap;
  }
  /* tab-switch (e.g. Scheduled OT / Offload) fills the row evenly */
  .oh-tabs-switch { gap: 0.4rem; }
  .oh-tabs-switch > .oh-btn { flex: 1; }

  /* section header: keep title + meta aligned; let long meta wrap under */
  .oh-section-header { flex-wrap: wrap; gap: 0.15rem 0.6rem; }

  /* assigned-location chips wrap cleanly under their label */
  .oh-loc-bar { margin-bottom: 1rem; }

  /* dashboard site-picker select fills the header row width */
  .oh-dash-filter .oh-select { min-width: 0; width: 100%; }

  /* ---- bottom tab bar ---- */
  .oh-bottom-nav {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: 60px;
    background: var(--c-brand);
    border-top: 1px solid var(--c-brand-light);
    z-index: 50;
  }
  .oh-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 44px;
    background: none;
    border: none;
    border-top: 3px solid transparent; /* active indicator sits here (no layout shift) */
    color: #9aa0a6;
    text-decoration: none;
    font: inherit;
    font-size: 0.62rem;
    cursor: pointer;
  }
  .oh-tab .material-icons { font-size: 22px; }
  .oh-tab--active { color: #fff; border-top-color: var(--c-accent); }

  /* ---- "More" bottom-sheet drawer (matches prototype: white sheet) ---- */
  .oh-drawer { display: none; position: fixed; inset: 0; z-index: 60; }
  .oh-drawer.oh-drawer--open { display: flex; flex-direction: column; justify-content: flex-end; }
  .oh-drawer__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); }
  .oh-drawer__sheet {
    position: relative;
    background: var(--c-surface);
    max-height: 82%;
    display: flex;
    flex-direction: column;
  }
  .oh-drawer__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid var(--c-border-light);
    font-weight: 600; font-size: 0.95rem; color: var(--c-text);
  }
  .oh-drawer__x { background: none; border: none; color: var(--c-icon); cursor: pointer; display: flex; }
  .oh-drawer__list { overflow-y: auto; padding: 0.25rem 0 0.5rem; }
  .oh-drawer__link {
    display: flex; align-items: center; gap: 0.9rem;
    padding: 0.85rem 1.15rem; min-height: 44px;
    color: var(--c-text); text-decoration: none;
    border-bottom: 1px solid #f1f3f6;
  }
  .oh-drawer__icon { font-size: 22px; color: var(--c-icon); }
  .oh-drawer__label { flex: 1; font-size: 0.9rem; }
  .oh-drawer__chev { font-size: 18px; color: var(--c-placeholder); }
  .oh-drawer__hint {
    font-size: 0.58rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--c-text-muted); background: #f1f3f6; padding: 3px 6px;
  }
  .oh-drawer__link.oh-tab--active { background: #eef3fa; }
  .oh-drawer__link.oh-tab--active .oh-drawer__label { color: var(--c-accent); font-weight: 600; }
  .oh-drawer__logout { padding: 0.85rem 1.15rem; margin: 0; }
}

/* ---- responsive visibility toggles (per-screen mobile vs desktop blocks) ---- */
.oh-only-mobile { display: none; }
@media (max-width: 768px) {
  .oh-only-desktop { display: none !important; }
  .oh-only-mobile { display: block; }
}

/* ---- reusable mobile card components (match the prototype) ---- */
@media (max-width: 768px) {
  /* .oh-m-section always lives inside .oh-content (which already supplies the
     1rem page gutter), so it only needs vertical rhythm — no extra side padding,
     otherwise the cards sit double-indented and look cramped. */
  .oh-m-section { padding: 0.15rem 0 0.25rem; }
  .oh-m-list { display: flex; flex-direction: column; gap: 0.7rem; }
  .oh-m-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border-light);
    box-shadow: var(--shadow-card);
    padding: 0.8rem;
  }
  .oh-m-row { display: flex; align-items: center; gap: 0.7rem; }
  .oh-m-link { text-decoration: none; color: inherit; }
  .oh-m-avatar {
    width: 38px; height: 38px; flex: none; border-radius: 50%;
    background: var(--c-border-light);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.8rem; color: var(--c-icon); overflow: hidden;
  }
  .oh-m-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .oh-m-grow { flex: 1; min-width: 0; }
  .oh-m-name { display: block; font-weight: 600; font-size: 0.875rem; color: var(--c-text); }
  .oh-m-sub { display: block; font-size: 0.7rem; color: var(--c-text-muted); margin-top: 1px; }
  .oh-m-badge {
    font-weight: 700; font-size: 0.56rem; letter-spacing: 0.05em;
    padding: 4px 7px; text-transform: uppercase; flex: none; white-space: nowrap;
  }
  .oh-m-boxes { display: flex; gap: 0.6rem; margin-top: 0.7rem; }
  .oh-m-box { flex: 1; border: 1px solid var(--c-border); background: #fafafa; padding: 0.45rem 0.6rem; }
  .oh-m-box__k { font-weight: 700; font-size: 0.5rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-placeholder); }
  .oh-m-box__v { font-weight: 700; font-size: 0.875rem; color: var(--c-text); }
  .oh-m-box input { width: 100%; border: none; background: transparent; padding: 2px 0 0; margin: 0; font: inherit; font-weight: 700; font-size: 0.875rem; color: var(--c-text); outline: none; }
  .oh-m-actions { display: flex; gap: 0.5rem; margin-top: 0.7rem; }
  .oh-m-actions > .oh-btn, .oh-m-actions > form { flex: 1; }
  .oh-m-actions form .oh-btn { width: 100%; }
  .oh-m-filterbar {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.7rem 1rem; background: var(--c-surface);
    border-bottom: 1px solid var(--c-border-light);
    position: sticky; top: 56px; z-index: 3;
  }
  .oh-m-pill {
    display: flex; align-items: center; gap: 0.4rem;
    border: 1px solid var(--c-border); background: #fafafa; padding: 0.5rem 0.6rem;
    font-size: 0.78rem; color: var(--c-text); flex: 1; min-width: 0;
  }
  .oh-m-fab {
    position: fixed; left: 1rem; right: 1rem; bottom: 72px;
    padding: 0.85rem; background: var(--c-accent); color: #fff; text-align: center;
    font-weight: 600; box-shadow: rgba(0, 0, 0, 0.18) 0 3px 10px;
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    text-decoration: none; z-index: 40;
  }
}

/* ---- Responsive table → cards ----
   Add `oh-table--cards` to any `.oh-table`; on mobile each row becomes a card,
   with each cell shown as "LABEL  value" (label from the cell's data-label).
   Single DOM (no duplicate markup), so it works for tables with form inputs. */
@media (max-width: 768px) {
  .oh-table--cards thead { display: none; }
  .oh-table--cards, .oh-table--cards tbody { display: block; width: 100%; }
  .oh-table--cards tr {
    display: block;
    background: var(--c-surface);
    border: 1px solid var(--c-border-light);
    box-shadow: var(--shadow-card);
    padding: 0.5rem 0.8rem;
    margin-bottom: 0.7rem;
  }
  .oh-table--cards td {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 0.34rem 0; border: none; text-align: right; font-size: 0.82rem;
  }
  .oh-table--cards td::before {
    content: attr(data-label);
    font-weight: 600; font-size: 0.66rem; letter-spacing: 0.03em; text-transform: uppercase;
    color: var(--c-text-muted); text-align: left; flex: 0 0 auto; white-space: nowrap;
    line-height: 1.5;
  }
  /* the value side may wrap (long names, "13:00 – 22:00") without shoving the label */
  .oh-table--cards td > * { min-width: 0; }
  /* first cell = card title (block so a name + reg-no stack left, not space-between) */
  .oh-table--cards td:first-child {
    display: block; text-align: left;
    font-weight: 600; font-size: 0.92rem; line-height: 1.3;
    border-bottom: 1px solid var(--c-border-light); padding-bottom: 0.5rem; margin-bottom: 0.35rem;
  }
  .oh-table--cards td:first-child::before { display: none; }
  /* reg-no / secondary line under the title reads as a quiet subtitle */
  .oh-table--cards td:first-child .oh-muted { display: block; font-weight: 400; font-size: 0.72rem; margin-top: 1px; }
  .oh-table--cards td:first-child br { display: none; }
  .oh-table--cards td:empty { display: none; }
  /* hide an empty generated label (e.g. action cells with no data-label) so the
     value isn't pushed by a phantom column */
  .oh-table--cards td:not([data-label])::before { content: ""; display: none; }
  /* inputs / selects fill the value side comfortably */
  .oh-table--cards td .oh-input,
  .oh-table--cards td .oh-select { width: auto; flex: 1 1 55%; max-width: 65%; }
  /* action cell: button(s) become a confident full-width control under the row */
  .oh-table--cards td.oh-col-action {
    justify-content: flex-end;
    padding-top: 0.5rem; margin-top: 0.15rem;
    border-top: 1px solid var(--c-border-light);
  }
  /* if the action cell directly follows the title, the title's own divider is
     enough — drop the doubled rule */
  .oh-table--cards td:first-child + td.oh-col-action {
    border-top: none; padding-top: 0.15rem; margin-top: 0;
  }
  .oh-table--cards td.oh-col-action > .oh-btn,
  .oh-table--cards td.oh-col-action > form { flex: 1; width: 100%; }
  .oh-table--cards td.oh-col-action > form .oh-btn { width: 100%; }
  .oh-table--cards td.oh-col-action .oh-btn { min-height: 40px; }
  /* inline approve/reject (or reject-with-reason) forms wrap and fill the row */
  .oh-table--cards .oh-ot-actions { flex: 1 1 auto; flex-wrap: wrap; justify-content: flex-end; gap: 0.4rem; }
  .oh-table--cards .oh-ot-actions .oh-input { flex: 1 1 100%; max-width: none; width: 100%; }
  .oh-table--cards .oh-ot-actions .oh-btn { flex: 1; min-height: 40px; }
}

/* ---- Dashboard redesign — mobile (first-class) ---- */
@media (max-width: 768px) {
  .oh-dash-branches { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  /* Branch boxes: 1–2 per row; whole box stays a ≥44px tap target. Reserve room
     on the head row so the flag chip never collides with the caret. */
  .oh-dash-box { padding: 0.75rem 0.85rem 0.85rem; }
  .oh-dash-box__count { font-size: 1.6rem; }
  .oh-dash-box__count-unit { font-size: 0.72rem; }
  .oh-dash-box__sub { font-size: 0.72rem; }
  /* Move the flag chip to the bottom-right corner (clear of the header caret). */
  .oh-dash-box__chip { top: auto; bottom: 0.6rem; right: 0.7rem; }
  /* Keep the count/sub clear of the chip's corner. */
  .oh-dash-box:has(.oh-dash-box__chip) { padding-right: 3rem; }
  /* Expanded site tiles: single column, full bleed under the boxes. */
  .oh-dash-sites { grid-template-columns: 1fr; padding: 0.7rem; gap: 0.6rem; }
  /* Drill-in site tile: lay it out as a tidy header + big number row. */
  .oh-dash-sites .oh-hier__tile { padding: 0.8rem 0.9rem 0.9rem; }

  /* Single-site header reflows; meta wraps without horizontal scroll. */
  .oh-dash-sitehead { padding: 0.95rem 1rem; margin-bottom: 1rem; }
  .oh-dash-sitehead__name { font-size: 1.15rem; }
  .oh-dash-sitehead__meta { gap: 0.3rem 0.5rem; }

  /* These cards hold tables that become cards — don't trap them in x-scroll. */
  .oh-dash-stat { overflow-x: visible; }
}

/* Phones: one branch box per row (very narrow screens). */
@media (max-width: 430px) {
  .oh-dash-branches { grid-template-columns: 1fr; }
}