/* =============================================
   RESPONSIVE BREAKPOINTS
   ============================================= */

/* ---- Very small phones (< 360px) ---- */
@media (max-width: 359px) {
  :root { --page-pad: 8px; }
  .tabs { grid-template-columns: 1fr 1fr; gap: 6px; }
  .tab { padding: 10px; font-size: 14px; }
  input:not(.filter-input), textarea, .btn, .filter-display, .filter-input, .select-display { font-size: 14px; padding: 12px; }
  .workspace-strip { padding: 6px; }
  .ws-slide { min-width: 100px; padding: 8px 4px; font-size: 12px; }
  .action-bar { height: 68px; }
  .action-icon { width: 26px; height: 26px; }
  .action-label { font-size: 8px; margin-top: 2px; }
  .notif-tab { font-size: 11px; padding: 7px 3px; }
  .notif-tab-badge { min-width: 14px; height: 14px; font-size: 9px; padding: 0 3px; }
  .est-act-btn { width: 28px; height: 28px; min-width: 28px; min-height: 28px; font-size: 14px; }
  .est-file-link { padding: 5px 8px; font-size: 11px; }
  .overlay-header { padding: 0 36px; }
  .overlay-title { font-size: 14px; }
  .a5-field { padding: 8px 10px; }
  .a5-field-icon { width: 26px; height: 26px; font-size: 14px; }
  .a5-field-body input, .a5-field-body textarea { font-size: 14px !important; }
  .custom-calendar { width: min(280px, calc(100vw - 24px)); padding: 12px; }
  #favMenu { width: min(240px, calc(100vw - 24px)); min-width: auto; }
  .cell-dropdown-menu { width: min(190px, calc(100vw - 24px)) !important; min-width: auto !important; max-width: calc(100vw - 24px) !important; }
  #fab-estimates { width: 48px; height: 48px; bottom: 16px; right: 16px; border-radius: 14px; }
}

/* ---- Mobile portrait (360 - 480px) ---- */
@media (max-width: 480px) {
  .est-files-row { gap: 6px; }
  .est-card { padding: 10px; }
  .notif-tab { font-size: 12px; padding: 8px 4px; }
  .notif-card { padding: 10px 12px; gap: 10px; }
  .notif-card-icon { width: 24px; font-size: 16px; }
  .est-zoom-scroll-container { padding: 20px 12px 60px; gap: 20px; }
  .est-zoom-controls { flex-wrap: wrap; gap: 6px; }
  .est-zoom-controls-bottom .est-btn-action { font-size: 11px; height: 38px; }
  .est-edit-layout { flex-direction: column; }
  .est-edit-left, .est-edit-right { flex: none; height: 50%; min-height: 200px; }
  .est-photo-controls { flex-wrap: wrap; gap: 6px; }
  .est-btn-icon { width: 40px; height: 36px; }
  .yd-tabs { padding: 6px 6px 0; }
  .yd-tab { font-size: 11px; padding: 8px 6px; }
  .yd-tab svg { width: 16px; height: 16px; }
  .yd-folder-card { padding: 8px 10px; }
  .yd-card-name { font-size: 11.5px; }
}

/* ---- Mobile landscape / short screens ---- */
@media (max-height: 520px) and (orientation: landscape) {
  .card, .card.admin-mode, .overlay-card {
    position: relative !important; top: auto !important; bottom: auto !important;
    left: auto !important; right: auto !important; transform: none !important;
    height: auto !important; margin: 10px auto !important; padding: 10px 14px;
    width: 96% !important; max-width: 96% !important;
  }
  .action-bar { position: relative; transform: none; left: auto; margin: 0 auto; bottom: auto; }
  .brand { display: none; }
  .graph-zone { margin-top: 6px; }
  body { overflow: auto; padding-bottom: 20px; }
}

/* ---- Tablet portrait (541 - 768px) ---- */
@media (min-width: 541px) and (max-width: 768px) {
  :root {
    --mobile-width: clamp(460px, 95vw, 720px);
    --page-pad: 16px;
  }
  .card.admin-mode { max-width: var(--mobile-width) !important; }
  .action-bar { max-width: var(--mobile-width); }
  .overlay-card { max-width: var(--mobile-width); }
  .ws-slide { min-width: 130px; }
  .est-edit-layout { flex-direction: row; }
  .est-zoom-scroll-container { padding: 12px 14px 16px; }
}

/* ---- Tablet landscape / small laptop (769 - 1079px) ---- */
@media (min-width: 769px) and (max-width: 1079px) {
  :root {
    --mobile-width: clamp(700px, 85vw, 960px);
    --page-pad: 20px;
  }
  .card.admin-mode { max-width: var(--mobile-width) !important; }
  .action-bar { max-width: var(--mobile-width); }
  .overlay-card { max-width: var(--mobile-width); }
  .ws-slide { min-width: 140px; font-size: 14px; }
  .action-icon { width: 34px; height: 34px; }
  .action-label { font-size: 9px; }
  .a5-result-area-v2 { height: 260px; }
  .a5-queue-item { width: 72px; height: 72px; }
}

/* ---- Desktop (1080px+) ---- */
@media (min-width: 1080px) {
  :root {
    /* 3 equal panels (left + center + right) + 2 gaps(12px) + 2 page-pads must fit viewport */
    --mobile-width: clamp(300px, calc((100vw - 72px) / 3), 540px);
    --page-pad: 24px;
  }
  .action-icon { width: 36px; height: 36px; }
  .action-label { font-size: 10px; }
  .ws-slide { min-width: 150px; font-size: 14px; }
  .a5-result-area-v2 { height: 280px; }
  .a5-queue-item { width: 80px; height: 80px; }
  .est-zoom-scroll-container { padding: 12px 20px 16px; gap: 20px; }
}

/* ---- Large desktop (1440px+) ---- */
@media (min-width: 1440px) {
  :root {
    --mobile-width: clamp(300px, calc((100vw - 80px) / 3), 580px);
    --page-pad: 28px;
  }
}

/* ---- Extra large desktop (1920px+) ---- */
@media (min-width: 1920px) {
  :root {
    --mobile-width: clamp(300px, calc((100vw - 88px) / 3), 640px);
    --page-pad: 32px;
  }
}

/* ---- Touch device optimizations ---- */
@media (hover: none) and (pointer: coarse) {
  .filter-option, .select-option, .fav-option { padding: 12px 14px; min-height: 44px; }
  .cal-day { min-height: 36px; min-width: 36px; }
  .cal-nav-btn { width: 36px; height: 36px; }
  .est-act-btn { width: 36px; height: 36px; min-width: 36px; min-height: 36px; }
  .overlay-close { width: 36px; height: 36px; }
  .est-modal-close { width: 36px; height: 36px; }
  .est-upload-close { width: 34px; height: 34px; }
  .fav-ctx-btn { padding: 12px 14px; min-height: 44px; }
  .cam-action-btn.small { width: 48px; height: 48px; }
  .settings-btn { padding: 16px; min-height: 48px; }
  .a5-action-btn { padding: 12px 8px; min-height: 44px; }
  .sch-nav-arrow { min-height: 44px; }
  .sch-filter-btn .filter-display { min-height: 36px; }
  .est-slide-btn { min-height: 40px; padding: 0 14px; }
  .ya-sel-item { padding: 14px 16px; min-height: 44px; }
  .cam-sel-item { padding: 16px; min-height: 48px; }
}

/* ---- Prefer reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .marquee-inner { animation: none !important; }
  .action-btn, .action-btn-bg, .action-icon, .action-label,
  .ws-slide, .overlay-close, .sch-now-marker,
  .a5-queue-item, .a5-thumb, .yd-folder-card { 
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}