/* ==========================================================================
   VIBEBUY INVOICE AI — MOBILE & TABLET RESPONSIVE OVERRIDES
   v2.1 — Polished for seamless breakpoint behavior across all views.
   Compliant with GEMINI.md: No !important, scoped selectors, 6px rounding.
   ========================================================================== */

/* ==========================================================================
   1. TABLET & MOBILE OVERRIDES (Viewport < 1024px)
   ========================================================================== */
@media (max-width: 1023px) {
  /* --- Dynamic Viewport Height for Mobile Chrome/Safari --- */
  body,
  #vibe-invoice-dashboard {
    height: 100dvh;
    min-height: 100dvh;
  }

  /* --- Prevent Mobile Input Focus Zoom (iOS Safari) --- */
  #vibe-invoice-dashboard input[type="text"],
  #vibe-invoice-dashboard input[type="number"],
  #vibe-invoice-dashboard input[type="email"],
  #vibe-invoice-dashboard input[type="tel"],
  #vibe-invoice-dashboard input[type="search"],
  #vibe-invoice-dashboard input[type="date"],
  #vibe-invoice-dashboard select,
  #vibe-invoice-dashboard textarea,
  #vibe-invoice-dashboard .vb-input,
  #vibe-invoice-dashboard .editor-input {
    font-size: 16px;
  }

  /* --- Prevent Line Pattern background from shrinking/disappearing on Mobile/Tablet --- */
  #vibe-invoice-dashboard .centered-container {
    background-size: 1269px auto;
    background-position: center top;
    background-repeat: repeat-y;
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
  }

  /* --- Unified View Container Padding --- */
  #vibe-invoice-dashboard .vb-view-container {
    padding-top: 16px;
    padding-bottom: 32px;
  }

  /* --- Extractor Hero: Compressed typography for tablet/mobile --- */
  #vibe-invoice-dashboard .extractor-hero {
    margin-bottom: 24px;
  }
  #vibe-invoice-dashboard .extractor-hero h1 {
    font-size: 1.375rem; /* ~22px */
    margin-bottom: 6px;
  }
  #vibe-invoice-dashboard .extractor-hero p {
    font-size: 0.6875rem; /* ~11px */
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.5;
  }

  /* --- Extractor prompt box: tighter height for mobile --- */
  #vibe-invoice-dashboard .extractor-textarea {
    min-height: 90px;
    font-size: 16px; /* Avoid mobile focus zoom */
  }

  /* --- Quick suggestion buttons: tighter gap on touch --- */
  #vibe-invoice-dashboard .vb-suggestions-container {
    margin-top: 20px;
    gap: 8px;
  }

  /* --- Results View: Editor panel goes full-width on mobile --- */
  #vibe-invoice-dashboard #editor-panel {
    flex-direction: column;
  }

  /* --- Results panel: remove side border when stacked --- */
  #vibe-invoice-dashboard #editor-panel,
  #vibe-invoice-dashboard .editor-sidebar {
    width: 100%;
    max-width: 100%;
    border-right: none;
    border-left: none;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
  }

  /* --- Canvas zoom controls: wrap tightly on narrow viewports --- */
  #vibe-invoice-dashboard #canvas-zoom-controls {
    max-width: calc(100vw - 24px);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  #vibe-invoice-dashboard #canvas-zoom-controls::-webkit-scrollbar {
    display: none;
  }

  /* --- Canvas top action bar: tighter layout --- */
  #vibe-invoice-dashboard .vb-canvas-color-picker {
    display: none; /* hidden on tablet, shown back at 640+ by overriding with sm: */
  }
}

/* ==========================================================================
   2. DESKTOP FLEX ENFORCEMENT (Viewport >= 1024px)
   ========================================================================== */
@media (min-width: 1024px) {
  #vibe-invoice-dashboard #editor-panel {
    display: flex;
    flex-direction: column;
  }

  /* Show color picker back on desktop */
  #vibe-invoice-dashboard .vb-canvas-color-picker {
    display: flex;
  }
}

/* ==========================================================================
   3. SMALL MOBILE OVERRIDES (Viewport < 640px)
   ========================================================================== */
@media (max-width: 639px) {
  /* --- Token stat cards: compact layout --- */
  .token-stat-card {
    padding: 12px 14px;
    gap: 10px;
  }
  .token-stat-icon {
    width: 36px;
    height: 36px;
  }
  .token-stat-icon svg,
  .token-stat-icon img {
    width: 18px;
    height: 18px;
  }
  .token-stat-value {
    font-size: var(--text-base);
  }
  .token-stat-label {
    font-size: 0.5625rem; /* ~9px */
    letter-spacing: var(--tracking-wide);
    margin-bottom: 2px;
  }
  .token-stat-unit {
    font-size: 0.5rem; /* ~8px */
  }

  /* --- Page-level headings: scale down for phone screens --- */
  #vibe-invoice-dashboard h1 {
    font-size: 1.4rem; /* 22.4px — prevent overflow/wrap on narrow viewports */
    letter-spacing: var(--tracking-tighter);
  }
  #vibe-invoice-dashboard h2 {
    font-size: 1rem; /* 16px */
    letter-spacing: var(--tracking-tight);
  }
  #vibe-invoice-dashboard h3 {
    font-size: 0.875rem; /* 14px */
    letter-spacing: var(--tracking-tight);
  }

  /* --- Extractor mic/upload buttons: ensure 44px touch target --- */
  #vibe-invoice-dashboard .magic-ring-inner .vb-plus-btn,
  #vibe-invoice-dashboard .magic-ring-inner .vb-mic-btn {
    height: 44px;
    width: 44px;
  }

  /* --- Primary action button: full-height touch target on phone --- */
  #vibe-invoice-dashboard .button {
    height: 44px;
    padding-left: 16px;
    padding-right: 16px;
    font-size: var(--text-xs);
  }

  /* --- Mobile sidebar stats row: stack on very small screens --- */
  #vibe-invoice-dashboard aside#sidebar-panel .md\:hidden.flex {
    gap: 6px;
  }

  /* --- History/Template card grid: 1 col on very small phones --- */
  /* Uncomment if needed for < 360px devices */
  /* #vibe-invoice-dashboard .grid-cols-2 { grid-template-columns: 1fr; } */

  /* --- Tokens page header stats grid: full-width cells --- */
  #vibe-invoice-dashboard .grid.grid-cols-2.w-full.lg\:w-auto {
    width: 100%;
  }

  /* --- Export modal: full-width on phone --- */
  #vibe-invoice-dashboard .vb-modal-box {
    margin: 0 8px;
    max-height: 95vh;
  }

  /* --- Results floating preview button: clear of system UI --- */
  #vibe-invoice-dashboard .lg\:hidden.fixed.bottom-10 {
    bottom: 80px; /* clear browser chrome / safe-area */
  }

  /* --- Mobile tab bar sticky height: anchor exactly to header bottom --- */
  #vibe-invoice-dashboard .sticky.top-20.z-40 {
    top: 80px; /* h-20 = 80px */
  }
}

/* ==========================================================================
   4. TABLET PADDING TUNING (Viewport >= 768px)
   ========================================================================== */
@media (min-width: 768px) {
  #vibe-invoice-dashboard .centered-container {
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
  }
}

/* Small-phone inner content padding (< 768px) */
@media (max-width: 767px) {
  #vibe-invoice-dashboard .centered-container {
    --container-pad: 10px;
    background-position: 50%;
    background-size: auto;
  }
  #vibe-invoice-dashboard .section-divider {
    background-size: auto;
    height: 24px;
  }
  #vibe-invoice-dashboard .centered-container > * {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* --- Settings / Address form cards: reduce padding --- */
  #vibe-invoice-dashboard .main-card.p-8 {
    padding: 16px;
  }

  /* --- History toolbar: stack search + actions vertically --- */
  #vibe-invoice-dashboard .vb-search-box-wrap {
    min-height: 44px; /* touch-friendly */
  }

  /* --- Address book modal: full-height on phone --- */
  #vibe-invoice-dashboard .vb-modal-backdrop .vb-modal-box {
    max-height: 96vh;
  }

  /* --- Template library filter pills: ensure they don't wrap awkwardly --- */
  #vibe-invoice-dashboard .vb-filter-pills-wrap {
    flex-wrap: nowrap;
    padding-bottom: 4px;
  }

  /* --- Category suggestion buttons: tighter --- */
  #vibe-invoice-dashboard .category-btn {
    padding: 6px 10px;
    font-size: 9px;
    white-space: nowrap;
  }
}

/* ==========================================================================
   5. PRINT SAFEGUARD
   Prevent dashboard chrome from appearing in print view
   ========================================================================== */
@media print {
  #vibe-invoice-dashboard aside#sidebar-panel,
  #vibe-invoice-dashboard header,
  #vibe-invoice-dashboard .lg\:hidden,
  #vibe-invoice-dashboard #canvas-zoom-controls {
    display: none;
  }
}