/* ═══════════════════════════════════════════════════════════════
   PintarRPH Dark Theme — Mobile Responsive Overrides
   Color-only overrides for mobile breakpoints
   ═══════════════════════════════════════════════════════════════ */

/* ── All Mobile Sizes ──────────────────────────────────────── */
@media (max-width: 992px) {
    /* Body background fix for mobile */
    body {
        background: var(--dark-bg-gradient, linear-gradient(160deg, #0d0d1f 0%, #16103a 45%, #0a1628 100%)) !important;
        background-attachment: fixed !important;
    }

    /* Container padding */
    main.container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Cards - remove backdrop-filter on mobile for performance */
    .card {
        background: rgba(20, 16, 40, 0.95) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* Form inputs - more opaque background for readability */
    .form-control,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    textarea,
    select {
        background: rgba(22, 16, 58, 0.8) !important;
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
    }

    .form-control:focus,
    input:focus,
    textarea:focus,
    select:focus {
        background: rgba(30, 24, 72, 0.9) !important;
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
    }

    /* Tables - horizontal scroll wrapper */
    .table-responsive {
        border: 1px solid rgba(255, 255, 255, 0.06) !important;
        border-radius: 8px;
    }

    /* Footer - static on mobile */
    footer,
    #site-footer {
        background: rgba(13, 13, 31, 0.98) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    }
}

/* ── Small Phones ──────────────────────────────────────────── */
@media (max-width: 420px) {
    /* Tighter card padding */
    .card-body {
        padding: 1rem !important;
    }

    /* Smaller metric values */
    .metric-card .metric-value {
        font-size: 1.5rem !important;
    }

    /* Stack buttons vertically */
    .btn-group-mobile {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
}

/* ── Tablet ────────────────────────────────────────────────── */
@media (min-width: 769px) and (max-width: 992px) {
    /* 2-column grid for metric cards */
    .metric-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}

/* ── Mobile Menu Dark Overrides ────────────────────────────── */
@media (max-width: 768px) {
    /* Public navbar mobile */
    .navbar {
        background: rgba(13, 13, 31, 0.95) !important;
        backdrop-filter: blur(12px) !important;
    }

    /* Hamburger bars */
    .hamburger-btn span {
        background: rgba(255, 255, 255, 0.7) !important;
    }

    .hamburger-btn:hover span,
    .hamburger-btn.active span {
        background: var(--dark-accent, #fbbf24) !important;
    }
}

/* ── Docs TOC Mobile Accordion Dark Overrides ─────────────── */
.docs-toc-mobile {
    background: #0a0f1f !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.docs-toc-mobile summary {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
    color: #1a1a2e !important;
}

.docs-toc-mobile .toc-body {
    background: #0a0f1f !important;
}

.docs-toc-mobile a {
    color: rgba(255, 255, 255, 0.85) !important;
    border-left: 3px solid rgba(251, 191, 36, 0.3) !important;
    border-radius: 0 8px 8px 0 !important;
    transition: all 0.2s ease !important;
}

.docs-toc-mobile a:hover {
    background: rgba(251, 191, 36, 0.08) !important;
    color: #fbbf24 !important;
    border-left-color: #fbbf24 !important;
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.15) !important;
}

.docs-toc-mobile .toc-category-name {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* ── Mobile Activation History Cards Dark Overrides ───────── */
@media (max-width: 768px) {
    .activation-hist-card {
        background: #0a0f1f !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
    }

    .activation-hist-header {
        background: rgba(255, 255, 255, 0.04) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    }

    .activation-time-ago {
        color: rgba(255, 255, 255, 0.5) !important;
    }

    .activation-hist-label {
        color: rgba(255, 255, 255, 0.5) !important;
    }

    .activation-hist-value {
        color: rgba(255, 255, 255, 0.9) !important;
    }
}

/* ── Mobile Order Cards Dark Overrides ─────────────────────── */
@media (max-width: 768px) {
    .order-card {
        background: #0a0f1f !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
    }

    .order-card-header {
        background: rgba(255, 255, 255, 0.04) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    }

    .order-card-header .order-ref {
        color: rgba(255, 255, 255, 0.7) !important;
    }

    .order-card-body {
        color: rgba(255, 255, 255, 0.8) !important;
    }

    .order-detail-label {
        color: rgba(255, 255, 255, 0.5) !important;
    }

    .order-detail-value {
        color: rgba(255, 255, 255, 0.9) !important;
    }

    .order-card-footer {
        border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    }
}

/* ── Landing Page: Mobile FAQ Dark Overrides ──────────────── */
@media (max-width: 768px) {
    .mobile-faq-section {
        background: #0a0f1f !important;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
    }

    .mobile-faq-section h3 {
        color: #fbbf24 !important;
    }

    .mobile-faq-section details {
        background: rgba(13, 13, 31, 0.9) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
    }

    .mobile-faq-section details summary {
        color: rgba(255, 255, 255, 0.9) !important;
    }

    .mobile-faq-section details summary::after {
        color: #fbbf24 !important;
    }

    .mobile-faq-section details p {
        color: rgba(255, 255, 255, 0.6) !important;
    }
}

/* ── Landing Page: Mobile Sticky CTA Bar Dark Overrides ───── */
.mobile-sticky-bar {
    background: rgba(10, 15, 31, 0.95) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(12px) !important;
}

.mobile-sticky-bar .sticky-btn {
    background: #fbbf24 !important;
    color: #0d0d1f !important;
}

.mobile-sticky-bar .sticky-sub {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* ── Scroll-to-Top Button (override mobile.css purple) ────── */
#scrollToTopBtn {
    background: #fbbf24 !important;
    color: #0d0d1f !important;
    box-shadow: 0 4px 16px rgba(251, 191, 36, 0.3) !important;
}

#scrollToTopBtn:hover {
    background: #f59e0b !important;
    box-shadow: 0 6px 24px rgba(251, 191, 36, 0.5) !important;
}

/* ── Touch-friendly hover states ───────────────────────────── */
@media (hover: none) {
    /* Remove hover effects on touch devices */
    .card:hover {
        transform: none !important;
        box-shadow: var(--dark-shadow-sm) !important;
    }

    .metric-card:hover {
        transform: none !important;
    }

    .dark-hover-lift:hover {
        transform: none !important;
    }
}

/* ── Landscape phone ───────────────────────────────────────── */
@media (max-height: 500px) and (orientation: landscape) {
    /* Compact navbar */
    .navbar {
        padding: 0.4rem 0 !important;
    }

    .dashboard-topnav {
        padding: 0 !important;
    }
}

/* ── Print (dark → light for printing) ─────────────────────── */
@media print {
    body {
        background: white !important;
        color: black !important;
    }

    .navbar,
    .dashboard-topnav,
    footer,
    #site-footer,
    #scrollToTopBtn,
    .hamburger-btn {
        display: none !important;
    }

    .card {
        background: white !important;
        border: 1px solid #ddd !important;
        box-shadow: none !important;
    }

    h1, h2, h3, h4, h5, h6 {
        color: black !important;
    }

    p, td, th, li, span {
        color: #333 !important;
    }
}

/* ===================================================================
   Mobile Touch-Target Enforcement (48px min for all interactive)
   =================================================================== */
@media (max-width: 992px) {
  .btn, .nav-link, a.btn {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  .form-control,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  textarea,
  select {
    min-height: 44px !important;
    font-size: 16px !important;
    padding: 10px 14px !important;
  }

  input[type="checkbox"],
  input[type="radio"] {
    width: 22px !important;
    height: 22px !important;
  }
}

/* ===================================================================
   Sticky Submit Buttons on Mobile
   =================================================================== */
@media (max-width: 992px) {
    form .btn-primary[type="submit"],
    .form-actions {
        position: sticky;
        bottom: 0;
        z-index: 10;
        background: rgba(13, 13, 31, 0.95) !important;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        padding: 12px 16px !important;
        border-top: 1px solid rgba(96,165,250,0.15);
    }
}

/* ===================================================================
   Skeleton Loaders
   =================================================================== */
.skeleton {
    background: linear-gradient(90deg,
        rgba(255,255,255,0.04) 25%,
        rgba(255,255,255,0.08) 50%,
        rgba(255,255,255,0.04) 75%) !important;
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: 8px;
}
.skeleton-text { height: 14px; margin-bottom: 8px; border-radius: 4px; }
.skeleton-text:last-child { width: 60%; }
.skeleton-title { height: 22px; width: 50%; margin-bottom: 14px; border-radius: 6px; }
.skeleton-card { height: 140px; border-radius: 12px; margin-bottom: 12px; }
.skeleton-avatar { width: 40px; height: 40px; border-radius: 50%; }

@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ===================================================================
   Haptic Touch Feedback
   =================================================================== */
.btn:active { transform: scale(0.97) !important; transition: transform 0.1s ease !important; }
.nav-link:active { transform: scale(0.95); transition: transform 0.1s ease; }
.card:active, .metric-card:active { transform: scale(0.99); transition: transform 0.15s ease; }

/* ===================================================================
   Card Reveal Animations
   =================================================================== */
.card-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.card-reveal.visible { opacity: 1; transform: translateY(0); }
.card-reveal:nth-child(2) { transition-delay: 0.06s; }
.card-reveal:nth-child(3) { transition-delay: 0.12s; }
.card-reveal:nth-child(4) { transition-delay: 0.18s; }
.card-reveal:nth-child(5) { transition-delay: 0.24s; }
.card-reveal:nth-child(6) { transition-delay: 0.30s; }

/* ===================================================================
   Mobile Bottom Navigation
   =================================================================== */
.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(10, 15, 31, 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(99, 102, 241, 0.1);
    padding: 6px 0 max(6px, env(safe-area-inset-bottom));
    z-index: 1050;
    justify-content: space-around;
    align-items: center;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
}

@media (max-width: 768px) {
    .mobile-bottom-nav {
        display: flex;
    }
}

.mobile-bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 600;
    color: var(--md-gray-400, #9ca3af);
    text-decoration: none;
    padding: 8px 6px 6px;
    min-width: 56px;
    min-height: 48px;
    border-radius: 10px;
    transition: color 0.2s ease, background 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.mobile-bottom-nav-item i {
    font-size: 20px;
    transition: transform 0.2s ease;
}

.mobile-bottom-nav-item:hover {
    color: var(--md-primary, #6366f1);
    text-decoration: none;
}

.mobile-bottom-nav-item.active {
    color: var(--md-primary, #6366f1);
}

.mobile-bottom-nav-item.active i {
    transform: scale(1.1);
}

.mobile-bottom-nav-item:active {
    transform: scale(0.92);
    background: rgba(99, 102, 241, 0.08);
}

/* Bottom padding to prevent content from hiding behind fixed bottom nav */
@media (max-width: 768px) {
    .main-content,
    main.container {
        padding-bottom: 80px !important;
    }
}

/* ===================================================================
   Reduced Motion Preference
   =================================================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .skeleton { animation: none !important; }
    .card-reveal { opacity: 1; transform: none; transition: none; }
}