/* ============================================================
   counter-mobile.css
   Append to the bottom of counter/style.css
   OR load as a separate file after style.css:
   <link rel="stylesheet" href="counter-mobile.css">

   Adds tab-based mobile layout for screens under 900px.
   Three columns collapse into one panel at a time.
   Tabs at bottom mirror native app patterns.
============================================================ */

/* ── Mobile tab bar (hidden on desktop) ─────────────────── */
.counter-mobile-tabs {
  display:        none; /* shown via media query below */
  position:       fixed;
  bottom:         0;
  left:           0;
  right:          0;
  height:         58px;
  background:     var(--bg-raised);
  border-top:     1px solid var(--border);
  z-index:        200;
  flex-direction: row;
}

.counter-mobile-tab {
  flex:            1;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             3px;
  font-size:       0.58rem;
  font-weight:     700;
  text-transform:  uppercase;
  letter-spacing:  0.05em;
  color:           var(--text-faint);
  border:          none;
  background:      none;
  cursor:          pointer;
  position:        relative;
  transition:      color var(--t-fast);
}

.counter-mobile-tab i {
  font-size: 1.1rem;
  transition: color var(--t-fast);
}

.counter-mobile-tab.active {
  color: var(--accent);
}

.counter-mobile-tab.active i {
  color: var(--accent);
}

/* Badge on queue tab */
.counter-mobile-tab__badge {
  position:   absolute;
  top:        6px;
  right:      calc(50% - 18px);
  min-width:  16px;
  height:     16px;
  background: var(--accent);
  color:      #000;
  border-radius: var(--r-pill);
  font-size:  0.58rem;
  font-weight:800;
  display:    flex;
  align-items:center;
  justify-content:center;
  padding:    0 4px;
  opacity:    0;
  transform:  scale(0.7);
  transition: opacity var(--t-base), transform var(--t-base);
}

.counter-mobile-tab__badge.visible {
  opacity:   1;
  transform: scale(1);
}


/* ============================================================
   RESPONSIVE BREAKPOINT — 900px and below
   Applies to tablets and phones.
============================================================ */
@media (max-width: 900px) {

  /* ── Body and html need to scroll on mobile ────────────── */
  html, body {
    overflow: auto;
    height:   auto;
  }

  /* ── App shell — flex column, full height ──────────────── */
  .counter-app {
    height:     auto;
    min-height: 100dvh;
    overflow:   visible;
    display:    flex;
    flex-direction: column;
  }

  /* ── Header — simplified on mobile ────────────────────── */
  .counter-header {
    grid-template-columns: 1fr auto;
    padding:               0 12px;
    height:                52px;
  }

  /* Hide stats bar on mobile — shown per-panel instead */
  .counter-stats {
    display: none;
  }

  /* ── Main — single column, full height ─────────────────── */
  .counter-main {
    display:        block;
    flex:           1;
    overflow:       visible;
    padding-bottom: 58px; /* clear mobile tab bar */
  }

  /* ── All panels hidden by default ──────────────────────── */
  .queue-panel,
  .detail-panel,
  .payment-panel {
    display:     none;
    border:      none;
    height:      auto;
    min-height:  calc(100dvh - 52px - 58px);
    overflow:    visible;
  }

  /* Active panel shown */
  .queue-panel.mobile-active,
  .detail-panel.mobile-active,
  .payment-panel.mobile-active {
    display: flex;
  }

  /* ── Queue panel on mobile ──────────────────────────────── */
  .queue-panel {
    flex-direction: column;
    background:     var(--bg);
  }

  .queue-list {
    flex:       1;
    overflow-y: auto;
    min-height: 0;
    max-height: none;
  }

  /* ── Detail panel on mobile ─────────────────────────────── */
  .detail-panel {
    flex-direction: column;
    background:     var(--bg);
  }

  .detail-content {
    flex:       1;
    height:     auto;
    overflow:   visible;
    display:    flex;
    flex-direction: column;
  }

  .detail-items {
    flex:       none;
    overflow-y: visible;
    max-height: none;
    min-height: 0;
  }

  /* Session bill on mobile */
  .session-bill {
    flex:       none;
    overflow:   visible;
    min-height: 0;
  }

  .session-tickets {
    overflow-y: visible;
    max-height: none;
  }

  /* ── Payment panel on mobile ─────────────────────────────── */
  .payment-panel {
    flex-direction: column;
    background:     var(--bg);
    border-left:    none;
    border-top:     1px solid var(--border);
  }

  .payment-form {
    flex:       1;
    overflow-y: visible;
    max-height: none;
  }

  /* ── Show mobile tab bar ─────────────────────────────────── */
  .counter-mobile-tabs {
    display: flex;
  }

  /* ── Detail empty state — add back button hint ───────────── */
  .detail-empty p::after {
    content:     '\A← Tap Queue to browse orders';
    white-space: pre;
    display:     block;
    font-size:   0.7rem;
    color:       var(--text-faint);
    margin-top:  8px;
  }

  /* ── Toast — adjust for tab bar ─────────────────────────── */
  .counter-toast {
    bottom: 72px;
  }

}


/* ============================================================
   SMALL PHONE — 480px and below
   Tighten spacing further.
============================================================ */
@media (max-width: 480px) {

  .counter-header {
    padding: 0 10px;
  }

  .counter-brand-name {
    font-size: 0.9rem;
  }

  .counter-brand-role {
    display: none; /* too cramped */
  }

  .counter-staff-chip {
    padding: 4px 8px 4px 4px;
  }

  .counter-staff-name {
    font-size: 0.72rem;
  }

  .detail-meta {
    padding: 12px;
  }

  .detail-table-badge {
    width:  40px;
    height: 40px;
    font-size: 0.88rem;
  }

  .detail-actions {
    flex-direction: column;
    padding: 10px 12px;
  }

  .action-btn {
    height: 42px;
  }

  .payment-methods {
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
  }

  .pay-method-btn {
    height:    50px;
    font-size: 0.6rem;
  }

  .pay-method-btn i {
    font-size: 1rem;
  }

  .process-payment-btn {
    height:    46px;
    font-size: 0.88rem;
  }

  .queue-toolbar {
    padding: 8px 10px;
  }

  .qf-pill {
    font-size: 0.62rem;
    padding:   0 8px;
    height:    22px;
  }

}