/**
 * OTOGO 9 AM — Mobile Phone Specific Stylesheet (< 768px)
 * Responsive CSS Architecture — Device & Responsibility Separation
 * 
 * Target viewports: 320px, 360px, 375px, 390px, 414px, 430px.
 * Focus: Mobile ergonomics, thumb-reach navigation, touch targets (>= 44px),
 * clean app-style topbars without desktop clutter, and zero horizontal overflow.
 */

@media (max-width: 767px) {
  /* --- 1. Mobile Ergonomics & Safe Area Padding --- */
  body.portal-account,
  body.portal-staff {
    padding-bottom: calc(var(--dash-bottom-nav-height, 64px) + env(safe-area-inset-bottom, 16px) + 24px) !important;
  }

  /* --- 2. Mobile Topbar Header Cleanliness --- */
  /* In account & staff portals, hide redundant raw "Sign out" button from topbar */
  .portal-account .topbar .nav-actions,
  .portal-staff .topbar .nav-actions {
    display: none !important;
  }

  .topbar {
    padding: 10px 14px;
    min-height: 62px;
    gap: 10px;
  }

  .topbar .logo {
    order: 1 !important;
    margin-right: auto !important;
  }

  .topbar .logo img {
    width: 142px;
    max-width: 142px;
    height: auto;
    aspect-ratio: 1536 / 517;
    object-fit: contain;
  }

  .topbar-app-controls {
    order: 2 !important;
    margin-left: auto !important;
    gap: 8px;
  }

  .topbar .menu-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    order: 3 !important;
  }

  .btn-bell-notification {
    width: 38px;
    height: 38px;
  }

  .user-avatar-chip {
    width: 36px;
    height: 36px;
    font-size: 0.85rem;
  }

  /* --- 3. Mobile Single-Column Stacking --- */
  .page-wrap {
    padding: 16px 12px 36px;
  }

  .dash-mobile-wrapper {
    padding: 12px 12px 28px;
  }

  .grid-2,
  .grid-3,
  .grid-4,
  .kpi-grid {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  /* --- 4. Staff Job Cards & Narrow Viewport Fixes (320px - 360px) --- */
  .staff-plan-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
  }

  .staff-plan-badge {
    word-break: break-word;
    max-width: 100%;
  }

  .staff-details-link {
    white-space: nowrap !important;
    display: inline-flex;
    align-items: center;
  }

  .staff-actions-row {
    display: flex;
    gap: 8px;
  }

  .staff-actions-row .btn {
    min-height: var(--touch-target-min, 44px);
    font-size: 0.875rem;
    padding: 10px 8px;
  }

  /* --- 5. Touch Target Standards (>= 44px) --- */
  .dash-segmented-tabs,
  .segmented-control {
    min-height: 48px;
  }

  .dash-segmented-tab,
  .segmented-btn {
    min-height: 42px;
    font-size: 0.85rem;
  }

  .btn {
    min-height: var(--touch-target-min, 44px);
  }

  /* --- 6. Form Optimization on Mobile --- */
  .form-group {
    margin-bottom: 14px;
  }

  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  input[type="date"],
  select,
  textarea {
    font-size: 16px !important; /* Prevents auto-zoom on iOS Safari */
    min-height: var(--touch-target-min, 44px);
  }

  /* --- 7. Full-Width CTA on Small Phones --- */
  .btn-mobile-full {
    width: 100% !important;
  }
}

/* Specific micro-tuning for ultra-narrow phones (<= 360px: iPhone SE, Galaxy Fold cover) */
@media (max-width: 360px) {
  .topbar {
    padding: 8px 10px;
  }

  .topbar .logo img {
    width: 128px;
    max-width: 128px;
    height: auto;
    aspect-ratio: 1536 / 517;
  }

  .dash-mobile-wrapper {
    padding: 8px 8px 24px;
  }

  .card,
  .card-white,
  .dash-card {
    padding: 14px;
    border-radius: 16px;
  }

  .staff-actions-row {
    flex-direction: column;
    gap: 8px;
  }

  .staff-actions-row .btn {
    width: 100%;
  }

  .dash-quick-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
}