/* Consolidated responsive rules for CarServicePal
   -- Purpose: centralize and order media queries (desktop -> tablet -> mobile)
   -- Breakpoints: 1200px (large), 992px (medium), 768px (small), 480px (x-small)
*/

/* Large screens (≥1200px) */
@media (min-width: 1200px) {
    .dashboard-grid { grid-template-columns: repeat(2, 1fr); }
    .dashboard-card { max-height: 500px; }
}

/* Medium / tablet (≤992px) */
@media (max-width: 992px) {
    .dashboard-grid, .ai-assistant_grid, .reports-grid { grid-template-columns: 1fr; }
    .header-background-graphic { top: 50%; /* right: calc(0.2rem + 56px) !important; */ transform: translateY(calc(-50% + 5px)); opacity: 0.28; height: 90%; }
    .auth-wrapper { flex-direction: column; min-height: auto; }
    .auth-branding { display: none; }
    .auth-panel { padding: 2rem; }
}

/* Small (≤768px) */
@media (max-width: 768px) {
    .app-container { padding: .1rem; }
    .header-content { flex-wrap: wrap; gap: 0.5rem; }
    .logo h1 { font-size: 1.5rem; }
    .logo img { height: 40px; margin: 0; }
    .section-slogan { font-size: 0.78rem; }
    /* enforce header-actions mobile placement */
    .header-actions { right: 0.2rem; bottom: 0.2rem; gap: 0.18rem; z-index: 2; }
    .header-actions .header-action-btn { padding: 6px 3px; height: 25px; min-width: 25px; font-size: 0.7rem; }
    /* Let JS set horizontal position so it is identical across viewports */
    .header-background-graphic { top: 50%; transform: translateY(calc(-50% + 5px)); width: 300px; opacity: 0.28; background-position: right 20% center; right: auto; }
    .empty-state-graphic { width: 80px; height: 80px; }
    .vehicle-card::after { width: 100px; height: 100px; }
    .form-grid { grid-template-columns: 1fr; }
    .tab-header .btn, .maintenance-controls .btn { padding: 0.3rem 0.3rem; font-size: 0.5rem; }
    .maintenance-controls select, .troubleshooting-form select { padding: 0.5rem 0.8rem; font-size: 0.8rem; background-position: right 0.6rem center; background-size: 0.7rem; }
    .tab-header .btn .btn-text, .maintenance-controls .btn .btn-text { display: none; }
    .dashboard-card, .vehicle-card, .report-card, .maintenance-record, .ai-card { font-size: 0.88rem; }
    .dashboard-card h3, .card-header h3, .vehicle-title, .maintenance-title, .report-card h3 { font-size: 0.98rem; }
    .info-item .info-label { font-size: 0.72rem; }
    .info-item .info-value, .maintenance-meta, .maintenance-date, .cost-value { font-size: 0.82rem; }
    .chat-message { font-size: 0.85rem; max-width: 90%; }
    .receipt-thumbnail { width: 84px; height: 84px; }
    .settings-tabs { gap: 0.2rem; }
    .settings-tab { padding: 0.5rem 0.4rem; font-size: 0.8rem; }
    .header-background-graphic { position: absolute; }
}

/* Extra small (≤480px) */
@media (max-width: 480px) {
    .nav-tabs { gap: 0.14rem; }
    .section-slogan { font-size: 0.77rem; }
    .nav-button { padding: 0.15rem 0.12rem 0.15rem 0.15rem; font-size: 0.61em; border-radius: 2px; }
    .logo h1 { font-size: 0.94rem; }
    .logo img { height: 35px; margin: 10px 0 0 7px; }
    .app-container { padding: 0.1rem; }
    .header { padding: 0.2rem; }
    .header-actions { right: 0.2rem; bottom: 0.2rem; gap: 0.12rem; }
    .header-actions .header-action-btn { padding: 0.18rem 0.22rem; font-size: 0.7rem; min-width: 25px; height: 25px; }
    .header-background-graphic { display: block; top: 50%; transform: translateY(calc(-50% + 5px)); width: 88px; opacity: 0.35; background-position: right center; right: auto; }
    .receipt-thumbnail { width: 72px; height: 72px; }
    .empty-state-graphic { width: 64px; height: 64px; }
    .header-slogan { font-size: 0.58rem; }
}

/* Small delay enforcement */
.header-background-graphic { position: absolute; transform: translateY(calc(-50% + 5px)); }

/* Ensure logo image, title and slogan remain identical to mobile sizing/positioning across all breakpoints */
.header-content {
    align-items: center !important;
    padding-left: 2px !important;
}

/* enforce mobile baseline layout for the logo elements */
.logo img {
    height: 35px !important;
    margin: 10px 0 0 4px !important;
    max-height: 35px !important;
}

/* Ensure header action buttons keep the exact mobile placement across all viewports */
.header-actions {
    position: absolute !important;
    right: 0.2rem !important;
    bottom: 0.2rem !important;
    gap: 0.12rem !important;
    z-index: 2 !important;
}

/* Force mobile logo and slogan sizing across all viewports */
@media (min-width: 0px) {
  .logo img { height: 35px; margin: 10px 0 0 4px; }
  .logo h1 { font-size: 1.163rem; margin: 10px 0 0 0; }
  .header-slogan { font-size: 0.54rem; margin: 0.5rem 0 0 0.4rem; }
}

/* Utility: ensure header-action btn text hidden on very small screens */
@media (max-width: 768px) {
    .header-actions .btn-text { display: none; }
    .header-actions { z-index: 2; }
}