/* =============================================
   Head Office Mobile — Responsive Styles
   ============================================= */

:root {
  --break-sm: 360px;
  --break-md: 480px;
  --break-lg: 768px;
  --break-xl: 1024px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
}

/* ===== Narrow phones (< 360px) ===== */
@media (max-width: 359px) {
  .stat-grid { gap: 6px; }
  .mobile-stat { padding: 10px 12px; }
  .mobile-stat .stat-value { font-size: 18px; }
  .mobile-header { padding: 10px 12px; padding-top: calc(10px + var(--safe-top)); }
  .mobile-header h1 { font-size: 15px; }
  #main-content { padding: 10px; }
  .action-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
  .mobile-btn { font-size: 12px; padding: 8px 12px; min-height: 38px; }
  .mobile-btn-sm { font-size: 11px; padding: 6px 10px; min-height: 32px; }
  .bottom-nav a, .bottom-nav button { min-height: 48px; }
}

/* ===== Standard phones (360px - 480px) ===== */
@media (min-width: 360px) and (max-width: 480px) {
  .stat-grid { gap: 8px; }
  #main-content { padding: 14px; }
}

/* ===== Large phones / small tablets (481px - 768px) ===== */
@media (min-width: 481px) and (max-width: 768px) {
  #main-content { max-width: 600px; padding: 20px; }
  .stat-grid { grid-template-columns: repeat(3, 1fr); }
  .action-grid { grid-template-columns: repeat(3, 1fr); }
  .bottom-nav { max-width: 480px; left: 50%; transform: translateX(-50%); border-radius: 16px 16px 0 0; }
}

/* ===== Tablets (769px - 1024px) ===== */
@media (min-width: 769px) and (max-width: 1024px) {
  #main-content { max-width: 720px; padding: 24px; }
  .stat-grid { grid-template-columns: repeat(3, 1fr); }
  .action-grid { grid-template-columns: repeat(4, 1fr); }
  .bottom-nav { max-width: 560px; left: 50%; transform: translateX(-50%); border-radius: 16px 16px 0 0; }
  .more-sheet { max-width: 420px; left: 50%; transform: translateX(-50%) translateY(100%); }
  .more-sheet.show { transform: translateX(-50%) translateY(0); }
}

/* ===== Desktops (1024px+) ===== */
@media (min-width: 1025px) {
  #main-content { max-width: 800px; padding: 32px; }
  .stat-grid { grid-template-columns: repeat(4, 1fr); }
  .action-grid { grid-template-columns: repeat(4, 1fr); }
  .bottom-nav { max-width: 600px; left: 50%; transform: translateX(-50%); border-radius: 16px 16px 0 0; }
  .more-sheet { max-width: 420px; left: 50%; transform: translateX(-50%) translateY(100%); }
  .more-sheet.show { transform: translateX(-50%) translateY(0); }
}

/* ===== Touch device optimizations ===== */
@media (hover: none) and (pointer: coarse) {
  .mobile-btn, .mobile-list-item, .bottom-nav a, .bottom-nav button, .chip, .header-btn, .back-btn, .more-item {
    cursor: default;
  }
}

/* ===== Dark mode support ===== */
html.dark body { background: #111827; color: #f3f4f6; }
html.dark .mobile-card { background: #1f2937; }
html.dark .mobile-stat { background: #1f2937; }
html.dark .mobile-stat .stat-value { color: #f9fafb; }
html.dark .mobile-stat .stat-label { color: #9ca3af; }
html.dark .mobile-card-header { color: #d1d5db; }
html.dark .bottom-nav { background: #1f2937; border-top-color: #374151; }
html.dark .bottom-nav a, html.dark .bottom-nav button { color: #6b7280; }
html.dark .bottom-nav a.active, html.dark .bottom-nav button.active { color: #818cf8; }
html.dark .bottom-nav a.active svg, html.dark .bottom-nav button.active svg { stroke: #818cf8; }
html.dark .mobile-btn-secondary { background: #374151; color: #d1d5db; }
html.dark .mobile-btn-secondary:active { background: #4b5563; }
html.dark .mobile-input { background: #374151; border-color: #4b5563; color: #f3f4f6; }
html.dark .mobile-select { background: #374151; border-color: #4b5563; color: #f3f4f6; }
html.dark .mobile-list-item { border-bottom-color: #374151; }
html.dark .more-sheet { background: #1f2937; }
html.dark .more-item { color: #d1d5db; }
html.dark .more-item:active { background: #374151; }
html.dark .more-item svg { stroke: #6b7280; }
html.dark .more-divider { background: #374151; }
html.dark .slide { color: #9ca3af; }
html.dark .chip { border-color: #4b5563; color: #9ca3af; background: #374151; }

/* ===== Print ===== */
@media print {
  .bottom-nav, .mobile-header, .more-overlay, .more-sheet, #pwa-install-banner, .offline-banner { display: none !important; }
  body { padding: 0 !important; }
}