/* =============================================================
   PintarRPH Mobile CSS — Option A (CSS Switch, no template split)
   Breakpoints:
     mobile  : max-width 768px
     sm-phone: max-width 420px
     desktop : min-width 769px
   ============================================================= */

/* ------------------------------------------------------------
   1. UTILITY CLASSES
   ------------------------------------------------------------ */
@media (max-width: 768px) {
    .desktop-only { display: none !important; }
    .mobile-stack { flex-direction: column !important; }
    .mobile-center { text-align: center !important; }
    .mobile-fullwidth { width: 100% !important; display: block !important; }
}

@media (min-width: 769px) {
    .mobile-only { display: none !important; }
}

/* ------------------------------------------------------------
   2. BASE MOBILE RULES
   ------------------------------------------------------------ */
@media (max-width: 768px) {
    html {
        font-size: 16px;
        -webkit-text-size-adjust: 100%;
    }

    body {
        line-height: 1.5;
        overflow-x: hidden;
    }

    /* Allow tables to scroll horizontally */
    .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Prevent horizontal overflow */
    img, video, iframe {
        max-width: 100%;
    }

    /* Slideshow iframes are scaled via JS transform — exempt from max-width */
    .infografik-slide iframe {
        max-width: none !important;
    }

    /* Ensure tap targets meet 44px minimum */
    a, button, [role="button"] {
        min-height: 44px;
    }

    /* Tighten container padding */
    .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Section spacing */
    section {
        padding-top: 36px !important;
        padding-bottom: 36px !important;
    }

    /* Cards gap */
    .row .col-md-4, .row .col-lg-4, .row .col-md-6 {
        margin-bottom: 16px;
    }
}

/* ------------------------------------------------------------
   3. TYPOGRAPHY — SCALE DOWN ON SMALL PHONES
   ------------------------------------------------------------ */
@media (max-width: 420px) {
    h1, .display-4 { font-size: 1.6rem !important; }
    h2 { font-size: 1.4rem !important; }
    h3 { font-size: 1.2rem !important; }
}

/* ------------------------------------------------------------
   4. BUTTONS
   ------------------------------------------------------------ */
@media (max-width: 768px) {
    /* Primary full-width CTA */
    .btn-mobile-primary {
        height: 52px;
        font-size: 17px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        border-radius: 50px;
        font-weight: 700;
    }

    /* All hero CTA buttons become full-width */
    .btn-hero {
        display: block !important;
        width: 100% !important;
        margin-bottom: 12px !important;
        margin-right: 0 !important;
    }

    /* Download section step buttons */
    .download-card .btn {
        width: 100% !important;
    }
}

/* ------------------------------------------------------------
   5. HAMBURGER NAV — SHARED RULES
   ------------------------------------------------------------ */

/* Hamburger toggle button */
.hamburger-btn {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    min-height: 44px;
    min-width: 44px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    border-radius: 8px;
    transition: background 0.2s;
}

.hamburger-btn:hover {
    background: rgba(99, 102, 241, 0.1);
}

.hamburger-btn span {
    display: block;
    width: 24px;
    height: 2px;
    background: #374151;
    border-radius: 2px;
    transition: all 0.25s ease;
}

.hamburger-btn[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.hamburger-btn[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}
.hamburger-btn[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 768px) {
    .hamburger-btn { display: flex; }
}

/* Mobile fullscreen menu overlay */
#mobileMenu {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(15, 15, 26, 0.92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    flex-direction: column;
    overflow-y: auto;
}

#mobileMenu.open {
    display: flex;
}

.mobile-menu-inner {
    background: white;
    width: 100%;
    max-width: 420px;
    margin: auto 0 0 auto; /* slide from right, bottom-aligned like a drawer */
    min-height: 100vh;
    padding: 24px 20px 40px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: -4px 0 24px rgba(0,0,0,0.2);
}

.mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.mobile-menu-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #374151;
    min-height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.mobile-menu-close:hover {
    background: #f3f4f6;
}

.mobile-menu-divider {
    border: none;
    border-top: 1px solid #e5e7eb;
    margin: 8px 0;
}

/* Primary CTA in menu */
.mobile-menu-cta-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: white !important;
    border: none;
    border-radius: 12px;
    padding: 14px 20px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    min-height: 52px;
    width: 100%;
    transition: opacity 0.2s;
}

.mobile-menu-cta-primary:hover {
    opacity: 0.9;
    color: white;
    text-decoration: none;
}

.mobile-menu-cta-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #f0fdf4;
    color: #059669 !important;
    border: 2px solid #059669;
    border-radius: 12px;
    padding: 12px 20px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    min-height: 52px;
    width: 100%;
    transition: background 0.2s;
}

.mobile-menu-cta-secondary:hover {
    background: #dcfce7;
    color: #059669;
    text-decoration: none;
}

.mobile-menu-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: #374151 !important;
    text-decoration: none;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 500;
    min-height: 44px;
    transition: background 0.15s;
}

.mobile-menu-link:hover,
.mobile-menu-link.active {
    background: #f3f4f6;
    color: #6366f1 !important;
    text-decoration: none;
}

.mobile-menu-link.active {
    font-weight: 700;
    background: #ede9fe;
}

.mobile-menu-link i {
    width: 20px;
    text-align: center;
    color: #6366f1;
}

.mobile-menu-link-voucher {
    background: #fffbeb;
    border: 1px dashed #f59e0b;
    color: #92400e !important;
}

.mobile-menu-link-voucher:hover {
    background: #fef3c7;
    color: #92400e !important;
}

/* ------------------------------------------------------------
   6. STICKY BOTTOM CTA BAR (landing page only)
   ------------------------------------------------------------ */
.mobile-sticky-bar {
    display: none;              /* hidden on desktop always */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 998;
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    color: white;
    padding: 10px 16px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-shadow: 0 -4px 16px rgba(99, 102, 241, 0.4);
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Show only on mobile AND only after scroll threshold (JS adds .visible) */
@media (max-width: 768px) {
    .mobile-sticky-bar.visible {
        display: flex;
        opacity: 1;
        transform: translateY(0);
    }
}

.mobile-sticky-bar .sticky-btn {
    background: white;
    color: #4f46e5;
    border: none;
    border-radius: 50px;
    padding: 10px 20px;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    min-height: 44px;
    white-space: nowrap;
    transition: opacity 0.2s;
}

.mobile-sticky-bar .sticky-btn:hover {
    opacity: 0.9;
}

.mobile-sticky-bar .sticky-sub {
    font-size: 0.75rem;
    opacity: 0.85;
    line-height: 1.3;
    flex: 1;
    text-align: right;
}

/* ------------------------------------------------------------
   7. "DOWNLOAD ON PC" MODAL
   ------------------------------------------------------------ */
#downloadModal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.65);
    align-items: center;
    justify-content: center;
    padding: 16px;
}

#downloadModal.open {
    display: flex;
}

#downloadModal .modal-box {
    background: white;
    border-radius: 20px;
    padding: 32px 24px;
    max-width: 360px;
    width: 100%;
    text-align: center;
    box-shadow: 0 24px 60px rgba(0,0,0,0.35);
}

#downloadModal .modal-icon {
    font-size: 3rem;
    margin-bottom: 12px;
}

#downloadModal h3 {
    font-size: 1.2rem;
    font-weight: 800;
    color: #1f2937;
    margin-bottom: 10px;
}

#downloadModal p {
    font-size: 0.9rem;
    color: #6b7280;
    margin-bottom: 20px;
    line-height: 1.5;
}

.modal-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.modal-btn-copy {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: white;
    border: none;
    border-radius: 50px;
    padding: 14px 20px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    min-height: 52px;
    width: 100%;
    transition: opacity 0.2s;
}

.modal-btn-copy:hover { opacity: 0.9; }

.modal-btn-wa {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #25d366;
    color: white;
    border: none;
    border-radius: 50px;
    padding: 14px 20px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    min-height: 52px;
    width: 100%;
    text-decoration: none;
    transition: opacity 0.2s;
}

.modal-btn-wa:hover { opacity: 0.9; color: white; text-decoration: none; }

.modal-btn-dismiss {
    background: none;
    border: none;
    color: #9ca3af;
    font-size: 0.85rem;
    cursor: pointer;
    padding: 8px;
    min-height: 44px;
}

.modal-btn-dismiss:hover { color: #374151; }

/* ------------------------------------------------------------
   8. LANDING PAGE — HERO
   ------------------------------------------------------------ */
@media (max-width: 768px) {
    .hero {
        padding: 16px 0 18px !important;
    }

    .hero h1 {
        font-size: 1.5rem !important;
        margin-bottom: 0.5rem !important;
    }

    .hero p {
        font-size: 1rem !important;
        margin-bottom: 1rem !important;
    }

    .hero .btn-hero {
        padding: 14px 24px !important;
        font-size: 1rem !important;
    }

    /* Demote "Learn More" to text link weight */
    .hero .btn-outline-light.btn-hero {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        font-size: 0.9rem !important;
        opacity: 0.85;
        padding: 10px 16px !important;
        text-decoration: underline;
    }
}

@media (max-width: 420px) {
    .hero h1 { font-size: 1.6rem !important; }
}

/* Slideshow placed inside hero on mobile */
.hero-mobile-slideshow {
    margin-top: 1.25rem !important;
    margin-bottom: 0 !important;
}


/* ------------------------------------------------------------
   9. LANDING PAGE — STATS BAR
   ------------------------------------------------------------ */
@media (max-width: 768px) {
    .stat-value {
        font-size: 1.75rem !important;
    }

    .stat-item {
        padding: 20px 16px !important;
    }
}

/* ------------------------------------------------------------
   10. LANDING PAGE — INFOGRAFIK SLIDESHOW
   ------------------------------------------------------------ */
@media (max-width: 576px) {
    .infografik-arrow {
        width: 44px !important;
        height: 44px !important;
        font-size: 24px !important;
    }

    .infografik-arrow-left  { left: 6px !important; }
    .infografik-arrow-right { right: 6px !important; }
    .infografik-label { font-size: 0.65rem !important; }
}

@media (max-width: 768px) {
    .infografik-slideshow-wrapper {
        border-radius: 12px !important;
        margin-bottom: 0.5rem !important;
    }

    /* Hide slide label pill on mobile — cards have their own titles */
    #mobileInfografikWrapper .infografik-label,
    #mobileInfografikWrapperSM .infografik-label {
        display: none !important;
    }

    /* Compact dot nav on mobile — hide entirely, use progress bar instead */
    #mobileInfografikWrapper .infografik-dots,
    #mobileInfografikWrapperSM .infografik-dots,
    #mobileInfografikWrapperPRA .infografik-dots {
        display: none !important;
    }
}

.infografik-swipe-hint {
    text-align: center;
    font-size: 0.82rem;
    color: #9ca3af;
    margin-top: 8px;
    margin-bottom: 0;
}

/* ------------------------------------------------------------
   11. LANDING PAGE — DOWNLOAD STEPS
   ------------------------------------------------------------ */
@media (max-width: 768px) {
    .download-card {
        padding: 24px 20px !important;
    }
}

/* ------------------------------------------------------------
   12. LANDING PAGE — MINI FAQ
   ------------------------------------------------------------ */
.mobile-faq-section {
    padding: 28px 0;
    background: #f5f0ff;
}

.mobile-faq-section h3 {
    font-size: 1.1rem;
    font-weight: 800;
    color: #4f46e5;
    margin-bottom: 16px;
    text-align: center;
}

.mobile-faq-section details {
    margin-bottom: 10px;
    border: 1px solid #e0d9fb;
    border-radius: 10px;
    background: white;
    overflow: hidden;
}

.mobile-faq-section details summary {
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    padding: 14px 16px;
    list-style: none;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
}

.mobile-faq-section details summary::-webkit-details-marker {
    display: none;
}

.mobile-faq-section details summary::after {
    content: '﹢';
    margin-left: auto;
    font-size: 1.1rem;
    color: #6366f1;
}

.mobile-faq-section details[open] summary::after {
    content: '﹣';
}

.mobile-faq-section details p {
    padding: 0 16px 14px;
    font-size: 0.88rem;
    color: #6b7280;
    line-height: 1.6;
    margin: 0;
}

/* ------------------------------------------------------------
   13. DOCS VIEWER — SIDEBAR
   ------------------------------------------------------------ */
@media (max-width: 768px) {
    .doc-container {
        flex-direction: column !important;
        margin: 0 !important;
        padding: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    .doc-sidebar {
        display: none !important;
    }

    .doc-content {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    .doc-article {
        padding: 1rem !important;
        box-sizing: border-box !important;
        width: 100% !important;
        overflow-x: hidden !important;
    }

    .doc-body pre {
        overflow-x: auto;
        white-space: pre-wrap;
        word-break: break-word;
    }

    .doc-body table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Docs Contents accordion */
.docs-toc-mobile {
    margin-bottom: 20px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    background: white;
}

.docs-toc-mobile summary {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: white;
    padding: 14px 16px;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
}

.docs-toc-mobile summary::-webkit-details-marker {
    display: none;
}

.docs-toc-mobile .toc-body {
    padding: 12px 16px;
}

.docs-toc-mobile ul {
    padding-left: 0;
    margin: 0;
    list-style: none;
}

.docs-toc-mobile li {
    margin-bottom: 4px;
}

.docs-toc-mobile a {
    display: block;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.88rem;
    color: #374151;
    text-decoration: none;
    min-height: 36px;
    line-height: 1.4;
}

.docs-toc-mobile a:hover {
    background: #f3f4f6;
    color: #6366f1;
}

.docs-toc-mobile .toc-category-name {
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #9ca3af;
    padding: 8px 12px 4px;
    margin-top: 8px;
}

/* ------------------------------------------------------------
   14. SCROLL TO TOP BUTTON (mobile docs)
   ------------------------------------------------------------ */
#scrollToTopBtn {
    display: none;
    position: fixed;
    bottom: 88px; /* above sticky bar */
    right: 16px;
    z-index: 997;
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 1.1rem;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.45);
    transition: opacity 0.25s, transform 0.25s;
}

#scrollToTopBtn.visible {
    display: flex;
}

#scrollToTopBtn:hover {
    opacity: 0.85;
    transform: translateY(-2px);
}

/* ------------------------------------------------------------
   15. LOGIN & REGISTER — FULL WIDTH ON MOBILE
   ------------------------------------------------------------ */
@media (max-width: 768px) {
    /* col-6 cards (login, register, password reset) become full-width */
    .col-6[style*="max-width: 450px"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Tighten card body padding on small screens */
    .card-body[style*="padding: 2rem"] {
        padding: 1.25rem !important;
    }

    /* Register / Login page — card wrapper row */
    .row.fade-in[style*="margin-top"] {
        margin-top: 0.25rem !important;
    }

    /* Make the card column full-width (register/login — scoped to auth page rows with margin-top) */
    .row.fade-in[style*="margin-top"] > [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Prevent iOS Safari from zooming into form inputs (must be >= 16px) */
    .form-control,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    select,
    textarea {
        font-size: 16px !important;
        color: #1f2937 !important;
        -webkit-text-fill-color: #1f2937 !important;
    }

    /* Fix select clipping on mobile — match desktop height treatment */
    select,
    select.form-control {
        height: 52px !important;
        line-height: 52px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        display: block !important;
    }

    /* Submit button — full-width touch target */
    .card-body .btn-primary[style*="width: 100%"] {
        padding: 14px 20px !important;
        font-size: 1rem !important;
        min-height: 52px !important;
        border-radius: 10px !important;
    }

    /* Reduce top margin inside main container on auth pages */
    main.container {
        padding-top: 0.5rem !important;
    }
}

@media (max-width: 420px) {
    /* Extra-small phones: minimal card border radius */
    .row.fade-in .card {
        border-radius: 12px !important;
    }

    /* Reduce form-group spacing so the form fits without scrolling */
    .form-group {
        margin-bottom: 0.875rem !important;
    }
}

/* ------------------------------------------------------------
   16. SEARCH PAGE — CONTAINER & HEADING
   ------------------------------------------------------------ */
@media (max-width: 768px) {
    .search-container {
        margin: 1rem auto !important;
        padding: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .search-header h1 {
        font-size: 1.6rem !important;
    }

    .search-header {
        margin-bottom: 1.5rem !important;
    }

    .search-result-title {
        font-size: 1rem !important;
    }
}

/* ------------------------------------------------------------
   17. DOC LIST — GRID ON NARROW SCREENS
   ------------------------------------------------------------ */
@media (max-width: 480px) {
    .doc-list {
        grid-template-columns: 1fr !important;
        padding: 1rem !important;
    }

    .doc-category-header {
        padding: 1rem 1.25rem !important;
    }

    .doc-category-icon {
        font-size: 1.8rem !important;
        margin-right: 1rem !important;
    }

    .doc-category-title {
        font-size: 1.2rem !important;
    }
}

/* ------------------------------------------------------------
   18. PERFORMANCE DASHBOARD — TOOLTIP & METRICS
   ------------------------------------------------------------ */
@media (max-width: 768px) {
    /* Header */
    .dashboard-header {
        margin-bottom: 1.25rem !important;
        padding: 0.5rem 0 !important;
    }

    .dashboard-header h1 {
        font-size: 1.4rem !important;
    }

    .dashboard-header p {
        font-size: 0.9rem !important;
    }

    /* Product tab switcher — horizontal scroll row on mobile */
    .product-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        justify-content: flex-start !important;
        gap: 0.4rem !important;
        padding-bottom: 4px !important;
        /* hide scrollbar visually */
        scrollbar-width: none !important;
        margin-bottom: 1.25rem !important;
    }

    .product-tabs::-webkit-scrollbar {
        display: none !important;
    }

    .product-tab {
        flex-shrink: 0 !important;
        padding: 0.4rem 1rem !important;
        font-size: 0.82rem !important;
        min-height: 36px !important;
        white-space: nowrap !important;
    }

    .product-tab .tab-badge {
        font-size: 0.62rem !important;
        padding: 0.08rem 0.35rem !important;
    }

    /* Year level chart title badge */
    .year-label-badge {
        font-size: 0.65rem !important;
        padding: 0.1rem 0.4rem !important;
    }

    /* Metric cards — 2-column grid */
    .metrics-row {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    .metric-col {
        margin-bottom: 0 !important;
        padding: 0 !important;
    }

    .metric-col .card-body {
        padding: 1rem 0.75rem !important;
    }

    .metric-col .card-body i {
        font-size: 1.4rem !important;
        margin-bottom: 0.25rem !important;
    }

    .metric-value {
        font-size: 1.6rem !important;
    }

    .metric-label {
        font-size: 0.75rem !important;
    }

    /* Tooltip — prevent overflow on small screens */
    .info-tooltip .tooltip-text {
        width: 180px !important;
        margin-left: -90px !important;
        font-size: 0.7rem !important;
    }

    /* Charts — stack vertically, shorter height */
    .charts-row {
        flex-direction: column !important;
    }

    .chart-col {
        width: 100% !important;
        padding: 0 !important;
    }

    .chart-container {
        height: 200px !important;
    }

    /* Active educators banner */
    .active-educators-card .card-body {
        padding: 1rem 1.25rem !important;
    }

    .active-educators-heading {
        font-size: 1.3rem !important;
    }

    .active-educators-heading i {
        font-size: 1.3rem !important;
    }

    .active-educators-subtext {
        font-size: 0.8rem !important;
        margin-top: 0.5rem !important;
        line-height: 1.5 !important;
    }

    /* Methodology section — hide italic footer note, tighten everything */
    .methodology-section .card-body {
        padding: 1rem 1.25rem !important;
    }

    .methodology-section h5 {
        font-size: 0.95rem !important;
        margin-bottom: 0.5rem !important;
    }

    .methodology-section > .card-body > p:first-of-type {
        font-size: 0.8rem !important;
        margin-bottom: 0.75rem !important;
    }

    .methodology-item {
        font-size: 0.8rem !important;
        margin-bottom: 0.5rem !important;
    }

    /* Hide the long italic footnote on mobile — redundant on small screen */
    .methodology-section .card-body > p:last-of-type {
        display: none !important;
    }
}

@media (max-width: 420px) {
    .metric-value {
        font-size: 1.4rem !important;
    }

    .metrics-row {
        gap: 8px !important;
    }

    .product-tab {
        padding: 0.35rem 0.85rem !important;
        font-size: 0.78rem !important;
    }

    .product-tab .tab-badge {
        display: none !important;  /* hide badge text on tiny screens to save space */
    }
}

/* ------------------------------------------------------------
   19. FOOTER — MOBILE
   ------------------------------------------------------------ */
@media (max-width: 768px) {
    /* Compact footer: hide Quick Links + Contact columns */
    footer .col-4:nth-child(2),
    footer .col-4:nth-child(3) {
        display: none !important;
    }

    /* Hide the long description paragraph in the brand column */
    footer .col-4:first-child > p {
        display: none !important;
    }

    /* Tight padding — bottom absorbs sticky bar so body shows no white gap */
    footer {
        padding: 1.25rem 0 calc(1rem + 72px) !important;
        margin-top: 2rem !important;
    }

    footer hr {
        margin: 0.75rem 0 0.6rem !important;
    }

    /* Bottom bar: stack copyright, hide "Built with" line */
    footer > .container > div:last-child {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.2rem !important;
    }

    footer > .container > div:last-child > div:last-child {
        display: none !important;
    }
}

/* ------------------------------------------------------------
   20. LINKS PAGE — MOBILE
   ------------------------------------------------------------ */
@media (max-width: 768px) {
    /* Remove top padding duplication (main.container already pads) */
    .links-page {
        padding-top: 0.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    /* Tighter profile block */
    .links-profile {
        margin-bottom: 1.25rem !important;
    }

    .links-profile img {
        width: 64px !important;
        height: 64px !important;
        margin-bottom: 0.625rem !important;
    }

    .links-profile h1 {
        font-size: 1.2rem !important;
    }

    .links-profile p {
        font-size: 0.875rem !important;
    }

    /* Section spacing */
    .links-section {
        margin-bottom: 1.25rem !important;
    }

    /* Enforce 44px min touch target on link cards */
    .link-card {
        min-height: 52px !important;
        padding: 0.75rem 1rem !important;
    }

    /* Disable hover transform on touch — no hover state on mobile */
    .link-card:hover {
        transform: none !important;
    }

    /* No sticky bar on links page */
    .links-page ~ .mobile-sticky-bar,
    body:has(.links-page) .mobile-sticky-bar {
        display: none !important;
    }
}

@media (max-width: 420px) {
    .link-card-icon {
        width: 36px !important;
        height: 36px !important;
        font-size: 1rem !important;
        border-radius: 8px !important;
    }
}

/* ------------------------------------------------------------
   22. BUYER DASHBOARD — MOBILE
   ------------------------------------------------------------ */

/* Suppress sticky-bar body padding on dashboard pages */
body:has(.dashboard-header) {
    padding-bottom: 0 !important;
}

@media (max-width: 768px) {
    /* Main content area */
    .main-content {
        padding: 1rem 0.875rem !important;
    }

    /* Dashboard header */
    .dashboard-header {
        margin-bottom: 1rem !important;
        padding: 0 !important;
    }

    .dashboard-header h1 {
        font-size: 1.3rem !important;
    }

    /* Metric card rows — 2-column grid on mobile */
    .dashboard-metrics-row {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0.75rem !important;
        margin-bottom: 0.75rem !important;
        /* Override Bootstrap .row negative margins */
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Remove Bootstrap col padding inside the grid */
    .dashboard-metrics-row > [class*="col-"] {
        padding: 0 !important;
        margin-bottom: 0 !important;
        max-width: 100% !important;
        flex: none !important;
        width: auto !important;
    }

    /* 3rd card in each row spans full width (Buy License & Referral) */
    .dashboard-metrics-row > .metric-card-wide {
        grid-column: 1 / -1 !important;
    }

    /* Full-width metric card — horizontal layout (Buy License only, not referral) */
    .metric-card-wide:not(:has(.progress)) .metric-card {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 0.75rem !important;
        padding: 0.75rem 1rem !important;
    }

    .metric-card-wide:not(:has(.progress)) .metric-icon {
        margin-bottom: 0 !important;
        flex-shrink: 0 !important;
    }

    .metric-card-wide:not(:has(.progress)) .metric-value {
        font-size: 1.1rem !important;
        margin: 0 !important;
    }

    .metric-card-wide:not(:has(.progress)) .metric-label {
        margin-bottom: 0.15rem !important;
    }

    /* Metric cards — compact for 2-col grid */
    .metric-card {
        padding: 0.75rem !important;
        margin-bottom: 0 !important;
    }

    .metric-card .metric-icon {
        width: 36px !important;
        height: 36px !important;
        font-size: 1rem !important;
        margin-bottom: 0.4rem !important;
    }

    .metric-card .metric-value {
        font-size: 1.4rem !important;
    }

    .metric-card .metric-label {
        font-size: 0.65rem !important;
        margin-bottom: 0.25rem !important;
    }

    /* Mobile menu toggle — proper tap target */
    .mobile-menu-toggle {
        min-height: 44px !important;
        min-width: 44px !important;
    }

    /* Card headers with flex row — wrap on mobile */
    .card-header.d-flex {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }

    /* Table font size */
    .table thead th,
    .table tbody td {
        font-size: 0.8rem !important;
        padding: 0.5rem !important;
    }

    /* Recent Activity list items — compact */
    .list-group-item.p-2 {
        padding: 0.625rem 0.5rem !important;
    }

    /* Dashboard footer */
    footer[style*="margin-top: 4rem"] {
        margin-top: 1.5rem !important;
    }

    footer[style*="margin-top: 4rem"] span:last-of-type {
        display: none !important;
    }
}

@media (max-width: 420px) {
    /* Referral card progress text */
    .metric-card small {
        font-size: 0.72rem !important;
    }
}

/* ------------------------------------------------------------
   21. CATALOG PAGE — MOBILE
   ------------------------------------------------------------ */
@media (max-width: 768px) {
    /* Header */
    .catalog-header {
        margin-bottom: 1.25rem !important;
        padding: 0.5rem 0 !important;
    }

    .catalog-header h1 {
        font-size: 1.4rem !important;
        margin-bottom: 0.5rem !important;
    }

    .catalog-header p {
        font-size: 0.9rem !important;
    }

    /* Metadata stat row (version + date) — 2 columns */
    .catalog-meta-stats {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        flex-wrap: unset !important;
    }

    /* Per-tab stats (textbooks / DSKP / TOC) — 3 equal columns */
    .catalog-tab-panel .catalog-stats {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        flex-wrap: unset !important;
    }

    /* All stat cards — full width, compact */
    .catalog-stat-card {
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 0.75rem 0.375rem !important;
        border-radius: 8px !important;
    }

    .catalog-stat-value {
        font-size: 1.35rem !important;
    }

    .catalog-stat-label {
        font-size: 0.65rem !important;
        margin-top: 0.25rem !important;
    }

    /* Tabs — pill style, 2-column grid */
    .catalog-tabs {
        gap: 0.5rem !important;
        margin-bottom: 1.5rem !important;
    }

    .catalog-tab-btn {
        padding: 0.75rem 0.5rem !important;
        border-radius: 8px !important;
        min-height: 64px !important;
    }

    .catalog-tab-btn .tab-main {
        font-size: 0.9375rem !important;
    }

    .catalog-tab-btn .tab-sub {
        font-size: 0.7rem !important;
    }

    /* Section titles */
    .catalog-section {
        margin-bottom: 1.75rem !important;
    }

    .catalog-section-title {
        font-size: 1.1rem !important;
        margin-bottom: 0.75rem !important;
        gap: 0.5rem !important;
    }

    /* TOC description line */
    .catalog-section > p {
        font-size: 0.85rem !important;
        margin-bottom: 0.75rem !important;
    }

    /* Info box */
    .catalog-info-box {
        padding: 1.25rem 1rem !important;
        border-radius: 10px !important;
    }

    .catalog-info-box h4 {
        font-size: 1rem !important;
    }

    .catalog-info-box p {
        font-size: 0.85rem !important;
        margin-top: 0.5rem !important;
    }

    /* Tables — handled by .table-responsive wrapper */
    .catalog-table {
        min-width: 480px !important;
    }

    .catalog-table th,
    .catalog-table td {
        padding: 0.5rem 0.5rem !important;
        font-size: 0.75rem !important;
    }

    .availability-badge {
        padding: 0.2rem 0.4rem !important;
        font-size: 0.68rem !important;
        gap: 0.2rem !important;
    }
}

@media (max-width: 420px) {
    .catalog-header h1 {
        font-size: 1.2rem !important;
    }

    .catalog-stat-value {
        font-size: 1.15rem !important;
    }

    .catalog-tab-btn .tab-main {
        font-size: 0.875rem !important;
    }
}

/* ------------------------------------------------------------
   23. QUICK ACTIONS GRID (buyer dashboard)
   ------------------------------------------------------------ */
.quick-actions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.quick-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.75rem 0.5rem;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
    transition: all 0.2s ease;
    border: 1.5px solid transparent;
}

.quick-action-btn i {
    font-size: 1.1rem;
}

.quick-action-btn.primary {
    background: var(--md-primary);
    color: white;
    grid-column: 1 / -1;
    flex-direction: row;
    gap: 0.5rem;
    font-size: 0.85rem;
    padding: 0.65rem;
}

.quick-action-btn.primary:hover {
    background: var(--md-primary-dark);
    color: white;
    text-decoration: none;
}

.quick-action-btn.outline {
    background: white;
    color: var(--md-primary);
    border-color: var(--md-primary);
}

.quick-action-btn.outline:hover {
    background: var(--md-primary);
    color: white;
    text-decoration: none;
}

/* ------------------------------------------------------------
   24. ORDERS PAGE — MOBILE CARD LIST
   ------------------------------------------------------------ */
@media (max-width: 768px) {
    .orders-card-list {
        padding: 0.75rem;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .order-card {
        background: white;
        border: 1px solid var(--md-gray-200, #e5e7eb);
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    }

    .order-card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.75rem 1rem;
        background: var(--md-gray-50, #f9fafb);
        border-bottom: 1px solid var(--md-gray-200, #e5e7eb);
    }

    .order-ref {
        font-size: 0.78rem;
        color: var(--md-gray-700, #374151);
        word-break: break-all;
        margin-right: 0.5rem;
    }

    .order-card-body {
        padding: 0.75rem 1rem;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .order-card-detail {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 0.85rem;
    }

    .order-detail-label {
        color: var(--md-gray-500, #6b7280);
        font-size: 0.78rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }

    .order-detail-value {
        color: var(--md-gray-800, #1f2937);
        font-size: 0.875rem;
    }

    .order-card-footer {
        padding: 0.625rem 1rem;
        border-top: 1px solid var(--md-gray-100, #f3f4f6);
    }

    .order-card-footer .btn-block {
        margin-bottom: 0 !important;
        min-height: 44px;
        font-size: 0.875rem;
    }

    /* Status guide card — compact on mobile */
    .card.mt-4 .card-body ul {
        padding-left: 1.25rem;
    }

    .card.mt-4 .card-body li {
        font-size: 0.875rem;
        margin-bottom: 0.4rem;
    }
}

/* ------------------------------------------------------------
   25. LICENSE DETAIL PAGE — MOBILE
   ------------------------------------------------------------ */
@media (max-width: 768px) {
    /* Activation history scroll area — remove fixed height on mobile */
    .activation-history-body {
        max-height: none !important;
        overflow-y: visible !important;
    }

    /* Activation history items */
    .activation-item {
        padding: 0.625rem 0;
        margin-bottom: 0.25rem;
    }

    .activation-item strong {
        font-size: 0.875rem;
    }

    .activation-item small {
        font-size: 0.78rem;
        line-height: 1.6;
    }

    /* Usage stats mobile card list */
    .usage-card-list {
        padding: 0.75rem;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .usage-card {
        background: var(--md-gray-50, #f9fafb);
        border: 1px solid var(--md-gray-200, #e5e7eb);
        border-radius: 8px;
        padding: 0.75rem 1rem;
    }

    .usage-card-header {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        flex-wrap: wrap;
        margin-bottom: 0.35rem;
    }

    .usage-subject {
        font-size: 0.875rem;
        color: var(--md-gray-800, #1f2937);
        flex: 1;
        min-width: 0;
    }

    .usage-year {
        font-size: 0.78rem;
        color: var(--md-gray-500, #6b7280);
        white-space: nowrap;
    }

    .usage-card-meta {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 0.8rem;
        color: var(--md-gray-600, #4b5563);
    }
}

/* ------------------------------------------------------------
   26. BUY LICENSE PAGE — MOBILE
   ------------------------------------------------------------ */
@media (max-width: 768px) {
    /* Plan card — scale down heading */
    #paymentForm .card.bg-light .card-body h5 {
        font-size: 1rem !important;
        line-height: 1.4;
    }

    #paymentForm .card.bg-light .card-body small {
        font-size: 0.8rem !important;
    }

    /* Referral / Voucher input-group — stack on very small screens */
    .input-group {
        flex-wrap: nowrap !important;
    }

    .input-group .form-control {
        min-width: 0 !important;
        font-size: 16px !important; /* prevent iOS zoom */
    }

    .input-group-append .btn {
        white-space: nowrap;
        padding: 0.375rem 0.625rem !important;
        font-size: 0.8rem !important;
    }

    /* Amount summary card */
    .card.bg-light .card-body .h5 {
        font-size: 1.1rem !important;
    }

    /* Submit button — ensure 52px tap target */
    #paymentForm .btn-lg.btn-block {
        min-height: 52px !important;
        font-size: 1rem !important;
    }

    /* What's Included list */
    .card .card-body ul li {
        font-size: 0.875rem !important;
        margin-bottom: 0.4rem;
    }

    /* Trust card — badge column centres under text on mobile */
    .card[style*="border-left"] .col-md-4 {
        margin-top: 1rem;
    }

    .card[style*="border-left"] .col-md-8 p {
        font-size: 0.82rem !important;
    }

    /* Alert banners in form — compact */
    #paymentForm .alert {
        font-size: 0.85rem !important;
        padding: 0.625rem 0.875rem !important;
    }
}

/* ------------------------------------------------------------
   27. ACTIVATION HISTORY PAGE — MOBILE
   ------------------------------------------------------------ */
@media (max-width: 768px) {
    .activation-card-list {
        padding: 0.75rem;
        display: flex;
        flex-direction: column;
        gap: 0.625rem;
    }

    .activation-hist-card {
        background: white;
        border: 1px solid var(--md-gray-200, #e5e7eb);
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    }

    .activation-hist-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.625rem 0.875rem;
        background: var(--md-gray-50, #f9fafb);
        border-bottom: 1px solid var(--md-gray-100, #f3f4f6);
    }

    .activation-time-ago {
        font-size: 0.75rem;
        white-space: nowrap;
        margin-left: 0.5rem;
    }

    .activation-hist-body {
        padding: 0.625rem 0.875rem;
        display: flex;
        flex-direction: column;
        gap: 0.375rem;
    }

    .activation-hist-row {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 0.5rem;
        font-size: 0.825rem;
    }

    .activation-hist-label {
        color: var(--md-gray-500, #6b7280);
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .activation-hist-value {
        color: var(--md-gray-800, #1f2937);
        text-align: right;
        word-break: break-all;
    }
}

/* ------------------------------------------------------------
   28. REFERRAL DASHBOARD — MOBILE
   ------------------------------------------------------------ */
@media (max-width: 768px) {
    /* Share buttons — wrap to 2-col grid on mobile */
    .referral-share-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }

    .referral-share-btn {
        min-height: 44px !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        font-size: 0.875rem !important;
    }

    /* Facebook button spans full width (3rd item in 2-col grid) */
    .referral-share-btn:last-child {
        grid-column: 1 / -1;
    }

    /* Counter display — scale down the large h1 */
    .referral-counter-display {
        font-size: 2rem !important;
    }

    /* Redeem button — full-width already via btn-block */
    .referral-redeem-btn {
        font-size: 1rem !important;
        padding: 0.75rem !important;
        min-height: 52px;
    }

    /* How It Works list — compact */
    .referral-how-list {
        font-size: 0.875rem !important;
        padding-left: 1.25rem;
    }

    .referral-how-list li {
        margin-bottom: 0.4rem;
    }

    /* Activity card list */
    .referral-activity-list {
        padding: 0.75rem;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .referral-activity-card {
        background: white;
        border: 1px solid var(--md-gray-200, #e5e7eb);
        border-radius: 10px;
        overflow: hidden;
    }

    .referral-activity-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.625rem 0.875rem;
        background: var(--md-gray-50, #f9fafb);
        border-bottom: 1px solid var(--md-gray-100, #f3f4f6);
        gap: 0.5rem;
    }

    .referral-activity-header small {
        white-space: nowrap;
        font-size: 0.75rem;
    }

    .referral-activity-body {
        padding: 0.5rem 0.875rem;
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
    }

    .referral-activity-row {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 0.5rem;
        font-size: 0.82rem;
    }

    .referral-activity-label {
        color: var(--md-gray-500, #6b7280);
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .referral-activity-value {
        color: var(--md-gray-800, #1f2937);
        text-align: right;
        word-break: break-all;
        font-size: 0.82rem;
    }

    /* Referred users card list */
    .referral-users-list {
        padding: 0.75rem;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .referral-user-card {
        background: white;
        border: 1px solid var(--md-gray-200, #e5e7eb);
        border-radius: 10px;
        padding: 0.75rem 0.875rem;
    }

    .referral-user-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        margin-bottom: 0.3rem;
    }

    .referral-user-email {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--md-gray-800, #1f2937);
        word-break: break-all;
        flex: 1;
    }

    .referral-user-meta {
        display: flex;
        justify-content: space-between;
        font-size: 0.78rem;
    }
}

/* ------------------------------------------------------------
   29. CHANGELOG PAGE — MOBILE
   ------------------------------------------------------------ */
@media (max-width: 768px) {
    /* Card header — stack: [version + badges] on top row, date below */
    .changelog-card-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.3rem !important;
        padding: 0.625rem 0.875rem !important;
    }

    .changelog-card-header-top {
        gap: 0.4rem !important;
    }

    /* Date — left-aligned, smaller */
    .changelog-card-date {
        font-size: 0.72rem !important;
        color: #9ca3af !important;
    }

    /* Card body — tighter horizontal padding */
    .changelog-content {
        padding: 1rem 0.875rem !important;
        font-size: 0.9rem !important;
    }

    /* Scale down headings inside changelog */
    .changelog-content h1 { font-size: 1.2rem !important; }
    .changelog-content h2 { font-size: 1.05rem !important; }
    .changelog-content h3 { font-size: 0.95rem !important; }

    /* List items — tighter */
    .changelog-content li {
        margin-bottom: 0.35rem !important;
    }

    /* Tables inside changelog — make scrollable */
    .changelog-content table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        font-size: 0.82rem !important;
    }

    /* Code blocks — tighter padding */
    .changelog-content pre {
        padding: 0.75rem !important;
        font-size: 0.8rem !important;
    }

    /* Badges — prevent overflow */
    .changelog-card-header-top .badge {
        white-space: nowrap !important;
        font-size: 0.68rem !important;
        padding: 0.28em 0.5em !important;
    }
}

/* ------------------------------------------------------------
   30. BUY LICENSE PAGE — MOBILE
   ------------------------------------------------------------ */
@media (max-width: 768px) {
    /* Product cards — tighter padding, readable font */
    .product-card .card-body {
        padding: 0.75rem 0.5rem !important;
    }

    .product-card .font-weight-bold {
        font-size: 0.875rem !important;
    }

    /* Amount summary rows — ensure they don't overflow */
    #baseAmount, #finalAmount, #voucherDiscountAmount, #referralDiscountAmount {
        font-size: 0.95rem;
    }

    /* Trust badges — wrap horizontally (already done in template) */
    /* input-group Apply button — ensure min tap target */
    .input-group-append .btn {
        min-height: 44px !important;
    }
}

/* ------------------------------------------------------------
   31. REVIEW ORDER PAGE — MOBILE
   ------------------------------------------------------------ */
@media (max-width: 768px) {
    /* Total payable — scale down slightly on small screens */
    .h4.text-primary.font-weight-bold {
        font-size: 1.3rem !important;
    }

    /* Confirm button — full width, big tap target */
    .review-order-confirm {
        min-height: 52px !important;
        font-size: 1rem !important;
    }

    /* Order ref code — allow wrap */
    .alert-light code {
        word-break: break-all;
        font-size: 0.8rem;
    }
}

/* ------------------------------------------------------------
   32. LICENSE DETAIL PAGE — INSTALLER BUTTONS MOBILE
   ------------------------------------------------------------ */
@media (max-width: 576px) {
    /* Installer download buttons — full width on mobile */
    .installer-btn {
        width: 100% !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* ------------------------------------------------------------
   33. ADMIN APPVERSION / VERSIONPING FILTER TABS — MOBILE
   ------------------------------------------------------------ */
@media (max-width: 768px) {
    /* Filter tabs on admin pages — tighter padding */
    .nav-tabs .nav-link {
        padding: 0.45rem 0.7rem !important;
        font-size: 0.82rem !important;
    }
}

/* ------------------------------------------------------------
   34. ADMIN BROADCAST MANAGER — MOBILE
   ------------------------------------------------------------ */
@media (max-width: 768px) {
    /* Broadcast form controls — ensure 44px min-height */
    .lf-control {
        min-height: 44px !important;
    }

    /* Submit buttons — full width, thumb-friendly */
    .lf-submit {
        min-height: 52px !important;
        font-size: 1rem !important;
        width: 100% !important;
    }

    /* Tips panel — collapse columns to single */
    .broadcast-tips .col-md-4 {
        margin-bottom: 1rem;
    }
}

/* ------------------------------------------------------------
   35. PROFILE PAGE — MOBILE
   ------------------------------------------------------------ */
@media (max-width: 768px) {
    /* Save Changes button — full width on mobile */
    .card-body form > .btn-lg {
        width: 100% !important;
        min-height: 52px !important;
        font-size: 1rem !important;
    }

    /* Email verification badge — slightly smaller */
    .badge-pill[style*="font-size: 1rem"] {
        font-size: 0.875rem !important;
        padding: 0.4rem 1rem !important;
    }

    /* Resend verification button — full width */
    .card-body .btn-outline-primary.btn-sm {
        display: block !important;
        width: 100% !important;
        min-height: 44px !important;
        text-align: center !important;
    }

    /* Dashboard header subtitle spacing */
    .dashboard-header > p.text-muted {
        margin-top: 0.25rem !important;
    }

    /* Compact status strip — no extra padding on card */
    .profile-status-strip .card {
        border-radius: 10px !important;
    }

    .profile-status-strip .card-body {
        padding: 0.75rem 1rem !important;
    }
}

/* Desktop: restore equal-height side-by-side layout */
@media (min-width: 1200px) {
    /* Both xl-6 columns: use flex stretch so cards fill equal height */
    .row.fade-in > .col-xl-6 {
        display: flex;
        flex-direction: column;
    }

    .row.fade-in > .col-xl-6 > .card {
        flex: 1;
    }
}

/* ============================================================
   31. ADMIN PANEL — MOBILE (breakpoint: 992px, same as navbar)
   ============================================================ */

/*
 * Admin uses a 992px breakpoint (not 768px) because the navbar has
 * many items. .desktop-only-992 / .mobile-only-992 are scoped
 * utility classes that don't interfere with public-page breakpoints.
 */

/* desktop-only-992: shown on desktop (>992px), hidden on mobile */
@media (max-width: 992px) {
    .desktop-only-992 { display: none !important; }
}

/* mobile-only-992: shown on mobile (≤992px), hidden on desktop */
@media (min-width: 993px) {
    .mobile-only-992  { display: none !important; }
    #userNavDesktop   { display: flex !important; }
}

/* ── Admin Hamburger Button ──────────────────────────────── */
/* Visual style inherited from .hamburger-btn; only breakpoint differs */
.admin-hamburger-btn {
    display: none;
}

@media (max-width: 992px) {
    .admin-hamburger-btn { display: flex; }
}

/* ── Admin Mobile Drawer Overlay ─────────────────────────── */
.admin-drawer-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(15, 15, 26, 0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.admin-drawer-overlay.open {
    display: block;
}

/* Drawer panel — slides from right */
.admin-drawer-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 320px;
    max-width: 92vw;
    background: white;
    box-shadow: -4px 0 24px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.25s ease;
}

.admin-drawer-overlay.open .admin-drawer-panel {
    transform: translateX(0);
}

/* ── Drawer Header ───────────────────────────────────────── */
.admin-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.75rem 0 1.25rem;
    border-bottom: 1px solid #e5e7eb;
    min-height: 56px;
    flex-shrink: 0;
}

.admin-drawer-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1rem;
    font-weight: 700;
    color: #6366f1;
    text-decoration: none;
}

.admin-drawer-brand i { font-size: 1.1rem; }

.admin-drawer-brand:hover {
    color: #4f46e5;
    text-decoration: none;
}

.admin-drawer-close {
    background: none;
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
    color: #6b7280;
    min-height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: background 0.15s, color 0.15s;
}

.admin-drawer-close:hover {
    background: #f3f4f6;
    color: #1f2937;
}

/* ── User card (below header) ────────────────────────────── */
.admin-drawer-user {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f5f3ff;
    border-radius: 10px;
    margin: 12px 16px 4px;
    padding: 12px 14px;
    flex-shrink: 0;
}

.admin-drawer-user i {
    font-size: 1.75rem;
    color: #6366f1;
}

.admin-drawer-user-info {
    display: flex;
    flex-direction: column;
}

.admin-drawer-user-name {
    font-weight: 700;
    font-size: 0.9rem;
    color: #1f2937;
}

.admin-drawer-user-role {
    font-size: 0.75rem;
    color: #6b7280;
}

/* ── Drawer Nav ──────────────────────────────────────────── */
.admin-drawer-nav {
    display: flex;
    flex-direction: column;
    padding: 4px 12px 2rem;
    gap: 2px;
    flex: 1;
}

/* Section label */
.admin-drawer-section-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #9ca3af;
    padding: 8px 4px 4px;
}

/* Top-level link */
.admin-drawer-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: #374151;
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 500;
    min-height: 44px;
    border-radius: 10px;
    transition: background 0.15s, color 0.15s;
}

.admin-drawer-link:hover,
.admin-drawer-link.active {
    background: #f3f4f6;
    color: #6366f1;
    text-decoration: none;
}

.admin-drawer-link.active {
    font-weight: 700;
    background: #ede9fe;
}

.admin-drawer-link i {
    width: 20px;
    text-align: center;
    color: #6366f1;
    flex-shrink: 0;
}

.admin-drawer-logout {
    color: #ef4444 !important;
}

.admin-drawer-logout i {
    color: #ef4444 !important;
}

.admin-drawer-logout:hover {
    background: #fef2f2 !important;
    color: #ef4444 !important;
}

/* Divider */
.admin-drawer-divider {
    border: none;
    border-top: 1px solid #e5e7eb;
    margin: 6px 0;
}

/* Group toggle (accordion header) */
.admin-drawer-group-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 16px;
    background: none;
    border: none;
    border-radius: 10px;
    color: #374151;
    font-size: 0.9375rem;
    font-weight: 500;
    min-height: 44px;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s, color 0.15s;
}

.admin-drawer-group-toggle:hover,
.admin-drawer-group-toggle.open {
    background: #f3f4f6;
    color: #6366f1;
}

.admin-drawer-group-toggle > span {
    display: flex;
    align-items: center;
    gap: 12px;
}

.admin-drawer-group-toggle > span i {
    width: 20px;
    text-align: center;
    color: #6366f1;
    font-size: 0.9rem;
}

.admin-drawer-chevron {
    font-size: 0.65rem;
    color: #9ca3af;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.admin-drawer-group-toggle.open .admin-drawer-chevron {
    transform: rotate(180deg);
}

/* Group container — collapsed by default, open via JS class */
.admin-drawer-group {
    display: none;
    flex-direction: column;
    gap: 2px;
    padding: 0 0 4px 0;
}

.admin-drawer-group.open {
    display: flex;
}

/* Sub-links inside a group */
.admin-drawer-sublink {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px 10px 48px;
    color: #4b5563;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    min-height: 44px;
    border-radius: 10px;
    transition: background 0.15s, color 0.15s;
}

.admin-drawer-sublink:hover,
.admin-drawer-sublink.active {
    background: #f3f4f6;
    color: #6366f1;
    text-decoration: none;
}

.admin-drawer-sublink.active {
    font-weight: 700;
    background: #ede9fe;
}

.admin-drawer-sublink i {
    width: 16px;
    text-align: center;
    color: #6366f1;
    font-size: 0.8rem;
    flex-shrink: 0;
}

/* Mobile: tighten main content padding */
@media (max-width: 992px) {
    .main-content {
        padding: 1rem 0.875rem !important;
    }

    /* Dashboard header */
    .dashboard-header h1 {
        font-size: 1.3rem !important;
    }
}

@media (max-width: 768px) {
    /* Admin metric cards — 2-column grid */
    .row.fade-in > .col-xl-3,
    .row.fade-in > .col-md-6 {
        width: 50% !important;
        max-width: 50% !important;
        flex: 0 0 50% !important;
    }

    /* Compact metric cards */
    .metric-card {
        padding: 0.875rem !important;
    }

    .metric-card .metric-icon {
        width: 36px !important;
        height: 36px !important;
        font-size: 1rem !important;
        margin-bottom: 0.4rem !important;
    }

    .metric-card .metric-value {
        font-size: 1.5rem !important;
    }

    .metric-card .metric-label {
        font-size: 0.7rem !important;
    }

    /* Table font size in admin */
    .main-content .table thead th,
    .main-content .table tbody td {
        font-size: 0.8rem !important;
        padding: 0.5rem !important;
    }

    /* Card headers with View All button — wrap cleanly */
    .main-content .card-header.d-flex {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }

    /* Security alert action buttons — stack on small screens */
    .main-content .d-flex.gap-2 {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }

    /* Admin footer — compact */
    footer[style*="margin-top: 4rem"] {
        margin-top: 1.5rem !important;
        padding: 1rem 0 !important;
    }

    footer[style*="margin-top: 4rem"] span:last-of-type {
        display: none !important;
    }
}

@media (max-width: 480px) {
    /* Very small: stack metric cards single-column */
    .row.fade-in > .col-xl-3,
    .row.fade-in > .col-md-6 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    .metric-card .metric-value {
        font-size: 1.3rem !important;
    }
}

/* ------------------------------------------------------------
   32. METRIC CARD — SUB TEXT (shared, all dashboards)
   ------------------------------------------------------------ */
.metric-card .metric-sub {
    font-size: 0.72rem;
    color: var(--md-gray-500, #6b7280);
    margin-top: 0.25rem;
}

/* ------------------------------------------------------------
   33. ADMIN REFERRAL LEADERBOARD — MOBILE CARDS
   ------------------------------------------------------------ */

/* Top Referrers card list */
.referral-lb-list {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 0.25rem 0;
}

.referral-lb-card {
    background: white;
    border: 1px solid var(--md-gray-200, #e5e7eb);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.referral-lb-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 0.875rem;
    background: var(--md-gray-50, #f9fafb);
    border-bottom: 1px solid var(--md-gray-100, #f3f4f6);
    gap: 0.5rem;
}

.referral-lb-body {
    padding: 0.5rem 0.875rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.referral-lb-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.825rem;
}

.referral-lb-label {
    color: var(--md-gray-500, #6b7280);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    flex-shrink: 0;
}

.referral-lb-value {
    color: var(--md-gray-800, #1f2937);
    text-align: right;
    word-break: break-all;
    font-size: 0.825rem;
}

/* Recent Activity card list — reuses referral-activity-* from section 28
   (already defined) — no extra CSS needed */

/* Page header on mobile — scale ALL admin page h1 titles
   Covers every structural variant:
   - .d-flex.fade-in > h1            (activation_list, user_list, suspicion_list)
   - .fade-in > .d-flex h1           (referral_leaderboard)
   - .fade-in > div > div.d-flex h1  (referral_activity, users_ready, users_used)
   - .container-fluid .d-flex h1     (support pages, broadcast)
   - plain .d-flex > h1              (license_list, license_detail, etc.)
*/
@media (max-width: 768px) {
    .d-flex h1.h3,
    .d-flex h1.h4 {
        font-size: 1.2rem !important;
        line-height: 1.3 !important;
    }
}

@media (max-width: 420px) {
    .d-flex h1.h3,
    .d-flex h1.h4 {
        font-size: 1.05rem !important;
    }
}

/* ------------------------------------------------------------
   34. MONITORING PAGE — MOBILE
   ------------------------------------------------------------ */
@media (max-width: 768px) {
    /* Header row — wrap action buttons below title on mobile */
    .monitoring-header {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        margin-bottom: 1rem !important;
    }

    .monitoring-header h1 {
        font-size: 1.2rem !important;
        margin-bottom: 0 !important;
    }

    /* Icon-only action buttons — square tap targets */
    .monitoring-icon-btn {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Stat cards — reduce padding for 2-col grid */
    .monitoring-stats-row .card-body {
        padding: 0.625rem 0.75rem !important;
    }

    .monitoring-stats-row .text-xs {
        font-size: 0.7rem !important;
    }

    .monitoring-stats-row .h5 {
        font-size: 0.9rem !important;
        margin-bottom: 0 !important;
    }

    /* Card header — wrap subtitle gracefully */
    .card-header.flex-wrap {
        padding: 0.75rem 1rem !important;
    }

    /* Netdata iframe container — allow vertical scroll on mobile */
    .card-body:has(#netdata-iframe-mobile) {
        overflow: hidden;
    }
}

@media (max-width: 420px) {
    .monitoring-stats-row .card-body {
        padding: 0.5rem !important;
    }

    .monitoring-stats-row .h5 {
        font-size: 0.82rem !important;
    }
}

/* ------------------------------------------------------------
   35. ADMIN USER LIST PAGE — MOBILE
   ------------------------------------------------------------ */

/* Search row — always a flex row, input grows to fill */
.user-search-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.user-search-input {
    flex: 1;
    min-width: 0;
    font-size: 16px !important; /* prevent iOS zoom */
}

.user-search-btn,
.user-search-clear {
    flex-shrink: 0;
    min-height: 44px;
    min-width: 44px;
}

/* Mobile card list */
.user-card-list {
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.user-card {
    background: white;
    border: 1px solid var(--md-gray-200, #e5e7eb);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.user-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 0.875rem;
    background: var(--md-gray-50, #f9fafb);
    border-bottom: 1px solid var(--md-gray-100, #f3f4f6);
    gap: 0.5rem;
    flex-wrap: wrap;
}

.user-card-username {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--md-gray-800, #1f2937);
}

.user-card-body {
    padding: 0.625rem 0.875rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.user-card-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.825rem;
}

.user-card-label {
    color: var(--md-gray-500, #6b7280);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    flex-shrink: 0;
}

.user-card-value {
    color: var(--md-gray-800, #1f2937);
    text-align: right;
    word-break: break-all;
    font-size: 0.825rem;
}

.user-card-footer {
    padding: 0.5rem 0.875rem;
    border-top: 1px solid var(--md-gray-100, #f3f4f6);
}

.user-card-footer .btn-block {
    min-height: 44px;
    font-size: 0.875rem;
    margin-bottom: 0 !important;
}

/* ------------------------------------------------------------
   36. ADMIN USER DETAIL PAGE — MOBILE
   ------------------------------------------------------------ */

/* Definition list replacing the info table — works on all sizes */
.user-detail-dl {
    margin: 0;
    padding: 0;
}

.user-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
    border-bottom: 1px solid var(--md-gray-100, #f3f4f6);
}

.user-detail-row:last-child {
    border-bottom: none;
}

.user-detail-row dt {
    color: var(--md-gray-500, #6b7280);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 100px;
}

.user-detail-row dd {
    color: var(--md-gray-800, #1f2937);
    font-size: 0.875rem;
    text-align: right;
    margin: 0;
    word-break: break-word;
}

.user-detail-break {
    word-break: break-all !important;
}

/* License key truncated in mobile card header */
.user-detail-license-key {
    font-size: 0.75rem;
    word-break: break-all;
    flex: 1;
    margin-right: 0.5rem;
}

@media (max-width: 768px) {
    .user-detail-row dt {
        min-width: 80px;
        font-size: 0.72rem;
    }

    .user-detail-row dd {
        font-size: 0.82rem;
    }

    .user-detail-row {
        padding: 0.5rem 0.875rem;
    }
}

/* ------------------------------------------------------------
   37. ADMIN LICENSE DETAIL PAGE — MOBILE CARD COMPONENTS
   (ld-card = license-detail card, shared by suspicions/devices/history)
   ------------------------------------------------------------ */

.ld-card-list {
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.ld-card {
    background: white;
    border: 1px solid var(--md-gray-200, #e5e7eb);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.ld-card-warn {
    border-color: #f59e0b;
    background: #fffbeb;
}

.ld-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 0.875rem;
    background: var(--md-gray-50, #f9fafb);
    border-bottom: 1px solid var(--md-gray-100, #f3f4f6);
    gap: 0.5rem;
    flex-wrap: wrap;
}

.ld-card-warn .ld-card-header {
    background: #fef3c7;
    border-bottom-color: #fde68a;
}

.ld-card-body {
    padding: 0.5rem 0.875rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.ld-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.825rem;
}

.ld-label {
    color: var(--md-gray-500, #6b7280);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    flex-shrink: 0;
}

.ld-value {
    color: var(--md-gray-800, #1f2937);
    text-align: right;
    word-break: break-all;
    font-size: 0.825rem;
}

.ld-card-footer {
    padding: 0.5rem 0.875rem;
    border-top: 1px solid var(--md-gray-100, #f3f4f6);
}

.ld-card-footer .btn-block {
    margin-bottom: 0 !important;
}

/* ------------------------------------------------------------
   38. ADMIN LICENSE LIST PAGE — MOBILE
   ------------------------------------------------------------ */

/* Filter form — desktop: single flex row; mobile: stacked */
.license-filter-form {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.license-filter-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.license-filter-search {
    flex: 2;
    min-width: 140px;
    font-size: 16px !important; /* prevent iOS zoom */
}

.license-filter-select {
    flex: 1;
    min-width: 120px;
    font-size: 16px !important;
}

.license-filter-actions {
    display: flex;
    gap: 0.5rem;
}

.license-filter-btn {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
}

@media (max-width: 420px) {
    .license-filter-search,
    .license-filter-select {
        min-width: 0;
        width: 100%;
        flex: none;
    }

    .license-filter-row {
        flex-direction: column;
    }
}

/* ------------------------------------------------------------
   39. ADMIN LICENSE FORM (CREATE) — MOBILE
   ------------------------------------------------------------ */

/* All form controls: 16px prevents iOS auto-zoom */
.lf-control {
    font-size: 16px !important;
    min-height: 44px;
}

/* Textarea doesn't need min-height override */
textarea.lf-control {
    min-height: auto;
}

/* Submit button — full-width on mobile, natural width on desktop */
.lf-submit {
    min-height: 52px;
    font-size: 1rem;
}

@media (max-width: 768px) {
    .lf-submit {
        width: 100%;
        display: block;
    }

    /* Tighten card body padding on mobile */
    .col-lg-8 .card-body {
        padding: 1rem !important;
    }

    /* form-group spacing */
    .col-lg-8 .form-group {
        margin-bottom: 1rem !important;
    }
}

/* ------------------------------------------------------------
   40. ADMIN VOUCHER LIST — MOBILE CARD ACTIONS
   ------------------------------------------------------------ */

/* Two action buttons side by side in card footer */
.voucher-card-actions {
    display: flex;
    gap: 0.5rem;
}

.voucher-action-btn {
    flex: 1;
    min-height: 44px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    margin-bottom: 0 !important;
}

/* ------------------------------------------------------------
   41. ADMIN VOUCHER CREATE / EDIT FORM — MOBILE
   ------------------------------------------------------------ */

/* Submit + Cancel side by side, equal width on mobile */
.vf-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.vf-actions .lf-submit {
    flex: 1;
    min-width: 120px;
}

/* Datetime-local inputs — ensure touch-friendly height */
input[type="datetime-local"].lf-control {
    padding: 0.375rem 0.5rem;
}

@media (max-width: 420px) {
    /* Very small phones: stack submit buttons */
    .vf-actions {
        flex-direction: column;
    }

    .vf-actions .lf-submit {
        width: 100%;
    }
}

/* ------------------------------------------------------------
   43. ADMIN ACTIVATION LIST PAGE — MOBILE
   ------------------------------------------------------------ */

/* Filter form — flex row on desktop, stacked on mobile */
.activation-filter-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.activation-filter-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.activation-filter-search {
    flex: 2;
    min-width: 140px;
    font-size: 16px !important; /* prevent iOS zoom */
}

.activation-filter-select {
    flex: 1;
    min-width: 120px;
    font-size: 16px !important;
}

.activation-filter-actions {
    display: flex;
    gap: 0.5rem;
}

@media (min-width: 769px) {
    /* Desktop: single-line filter form */
    .activation-filter-form {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
    }

    .activation-filter-row {
        flex-wrap: nowrap;
    }
}

@media (max-width: 420px) {
    .activation-filter-search,
    .activation-filter-select {
        min-width: 0;
        width: 100%;
        flex: none;
    }

    .activation-filter-row {
        flex-direction: column;
    }
}

/* Mobile card list */
.act-card-list {
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.act-card {
    background: white;
    border: 1px solid var(--md-gray-200, #e5e7eb);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.act-card-deny {
    border-color: #fca5a5;
    background: #fff5f5;
}

.act-card-ok {
    border-color: #6ee7b7;
    background: #f0fdf4;
}

.act-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 0.875rem;
    background: var(--md-gray-50, #f9fafb);
    border-bottom: 1px solid var(--md-gray-100, #f3f4f6);
    gap: 0.5rem;
    flex-wrap: wrap;
}

.act-card-deny .act-card-header {
    background: #fee2e2;
    border-bottom-color: #fca5a5;
}

.act-card-ok .act-card-header {
    background: #dcfce7;
    border-bottom-color: #bbf7d0;
}

.act-ts {
    font-size: 0.75rem;
    white-space: nowrap;
}

.act-card-body {
    padding: 0.5rem 0.875rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.act-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.825rem;
}

.act-label {
    color: var(--md-gray-500, #6b7280);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 52px;
}

.act-value {
    color: var(--md-gray-800, #1f2937);
    text-align: right;
    word-break: break-all;
    font-size: 0.825rem;
}

.act-details {
    color: var(--md-gray-600, #4b5563);
    font-size: 0.78rem;
    word-break: break-word;
}

/* ------------------------------------------------------------
   44. ADMIN SUSPICION LIST PAGE — MOBILE
   ------------------------------------------------------------ */

/* Filter form — reuses activation-filter-actions; just needs the select */
.susp-filter-form {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.susp-filter-row {
    display: flex;
    gap: 0.5rem;
}

.susp-filter-select {
    min-width: 120px;
    font-size: 16px !important;
}

/* Mobile card list */
.susp-card-list {
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.susp-card {
    background: white;
    border: 1px solid var(--md-gray-200, #e5e7eb);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

/* High severity (8+, unreviewed) — red tint */
.susp-card-high {
    border-color: #fca5a5;
    background: #fff5f5;
}

/* Pending (below 8) — yellow tint */
.susp-card-warn {
    border-color: #fcd34d;
    background: #fffbeb;
}

.susp-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 0.875rem;
    background: var(--md-gray-50, #f9fafb);
    border-bottom: 1px solid var(--md-gray-100, #f3f4f6);
    gap: 0.5rem;
    flex-wrap: wrap;
}

.susp-card-high .susp-card-header {
    background: #fee2e2;
    border-bottom-color: #fca5a5;
}

.susp-card-warn .susp-card-header {
    background: #fef9c3;
    border-bottom-color: #fde68a;
}

.susp-card-badges {
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
    align-items: center;
}

.susp-card-body {
    padding: 0.625rem 0.875rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

/* Details collapsible */
.susp-details-toggle {
    margin-top: 0.5rem;
    border: 1px solid var(--md-gray-200, #e5e7eb);
    border-radius: 8px;
    overflow: hidden;
}

.susp-details-toggle summary {
    padding: 0.5rem 0.75rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--md-gray-600, #4b5563);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--md-gray-50, #f9fafb);
    min-height: 40px;
    user-select: none;
}

.susp-details-toggle summary::-webkit-details-marker { display: none; }

.susp-details-chevron {
    font-size: 0.65rem;
    transition: transform 0.2s ease;
    color: var(--md-gray-400, #9ca3af);
}

.susp-details-toggle[open] .susp-details-chevron {
    transform: rotate(180deg);
}

.susp-details-body {
    padding: 0.5rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    background: white;
}

.susp-detail-item {
    font-size: 0.8rem;
    color: var(--md-gray-700, #374151);
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
    flex-wrap: wrap;
}

.susp-detail-item .act-label {
    min-width: 72px;
}

/* Card footer actions */
.susp-card-footer {
    padding: 0.625rem 0.875rem;
    border-top: 1px solid var(--md-gray-100, #f3f4f6);
}

.susp-card-actions {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}

.susp-action-btn {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    margin-bottom: 0 !important;
    font-size: 0.875rem;
}

/* ------------------------------------------------------------
   45. ADMIN APPVERSION FORM (CREATE / EDIT) — MOBILE
   ------------------------------------------------------------ */

/* Page header — always a single flex row, title shrinks to fit */
.av-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: nowrap;
}

.av-page-title {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 768px) {
    .av-page-title {
        font-size: 1.1rem !important;
    }
}

@media (max-width: 420px) {
    .av-page-title {
        font-size: 1rem !important;
    }
}

/* ------------------------------------------------------------
   46. VERSION ADOPTION PAGE — MOBILE
   ------------------------------------------------------------ */

/* Ping card list — reuses act-row / act-label / act-value / act-ts from §43 */
.vp-card-list {
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.vp-card {
    background: white;
    border: 1px solid var(--md-gray-200, #e5e7eb);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.vp-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.875rem;
    background: var(--md-gray-50, #f9fafb);
    border-bottom: 1px solid var(--md-gray-100, #f3f4f6);
    gap: 0.5rem;
}

.vp-card-body {
    padding: 0.375rem 0.875rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* Adoption summary cards — tighter on small phones */
@media (max-width: 420px) {
    .col-sm-6.mb-4 {
        margin-bottom: 0.625rem !important;
    }
}

/* Textarea inside lf-control: don't apply the min-height meant for inputs */
textarea.lf-control {
    min-height: auto !important;
    height: auto !important;
    line-height: 1.5 !important;
}

/* ------------------------------------------------------------
   42. ADMIN RELEASES PAGE — MOBILE
   ------------------------------------------------------------ */

/* Active release card — green tint */
.release-card-active {
    border-color: #10b981 !important;
    background: #f0fdf4 !important;
}

.release-card-active .ld-card-header {
    background: #dcfce7 !important;
    border-bottom-color: #bbf7d0 !important;
}

/* Three action buttons (Edit / Telegram / Delete) in card footer */
.release-card-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* Edit button grows to fill remaining space */
.release-card-actions > a.release-action-btn {
    flex: 1;
}

.release-action-btn {
    min-height: 44px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    margin-bottom: 0 !important;
}

/* Telegram and Delete are icon-only — fixed 44px square */
.release-card-actions form .release-action-btn {
    width: 44px;
    min-width: 44px;
    flex: none;
}

/* ------------------------------------------------------------
   47. SUPPORT TICKET LIST PAGE — MOBILE
   ------------------------------------------------------------ */

/* Filter form — flex row on desktop, stacked on mobile */
.supp-filter-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.supp-filter-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.supp-filter-search {
    flex: 2;
    min-width: 160px;
    font-size: 16px !important; /* prevent iOS zoom */
}

.supp-filter-select {
    flex: 1;
    min-width: 120px;
    font-size: 16px !important;
}

@media (min-width: 769px) {
    /* Desktop: single-line filter form */
    .supp-filter-form {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
    }

    .supp-filter-row {
        flex-wrap: nowrap;
        flex: 1;
    }
}

@media (max-width: 420px) {
    .supp-filter-search,
    .supp-filter-select {
        min-width: 0;
        width: 100%;
        flex: none;
    }

    .supp-filter-row {
        flex-direction: column;
    }
}

/* Mobile ticket card list */
.supp-card-list {
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.supp-ticket-card {
    background: white;
    border: 1px solid var(--md-gray-200, #e5e7eb);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.supp-card-open {
    border-color: #fca5a5;
    background: #fff5f5;
}

.supp-card-inprog {
    border-color: #fcd34d;
    background: #fffbeb;
}

.supp-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0.625rem 0.875rem;
    background: var(--md-gray-50, #f9fafb);
    border-bottom: 1px solid var(--md-gray-100, #f3f4f6);
    gap: 0.5rem;
    flex-wrap: wrap;
}

.supp-card-open .supp-card-header {
    background: #fee2e2;
    border-bottom-color: #fca5a5;
}

.supp-card-inprog .supp-card-header {
    background: #fef9c3;
    border-bottom-color: #fde68a;
}

.supp-ticket-id {
    font-size: 0.875rem;
    font-weight: 700;
    word-break: break-all;
}

.supp-card-ts {
    font-size: 0.72rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.supp-card-body {
    padding: 0.625rem 0.875rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.supp-summary {
    font-size: 0.85rem;
    color: var(--md-gray-700, #374151);
    line-height: 1.5;
}

.supp-card-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.825rem;
}

.supp-card-label {
    color: var(--md-gray-500, #6b7280);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    flex-shrink: 0;
}

.supp-card-value {
    color: var(--md-gray-800, #1f2937);
    text-align: right;
    word-break: break-word;
    font-size: 0.825rem;
}

.supp-card-footer {
    padding: 0.5rem 0.875rem;
    border-top: 1px solid var(--md-gray-100, #f3f4f6);
}

.supp-view-btn {
    min-height: 44px;
    margin-bottom: 0 !important;
}

/* ------------------------------------------------------------
   48. SUPPORT TICKET DETAIL PAGE — MOBILE
   ------------------------------------------------------------ */

/* Collapsible ticket info accordion (mobile only) */
.supp-info-accordion {
    border: 1px solid var(--md-gray-200, #e5e7eb);
    border-radius: 12px;
    overflow: hidden;
    background: white;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.supp-info-summary {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: white;
    padding: 14px 16px;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 48px;
    user-select: none;
}

.supp-info-summary::-webkit-details-marker { display: none; }

.supp-details-chevron {
    font-size: 0.7rem;
    transition: transform 0.2s ease;
    opacity: 0.85;
}

.supp-info-accordion[open] .supp-details-chevron {
    transform: rotate(180deg);
}

.supp-info-body {
    padding: 0;
    background: white;
}

/* Message thread — prevent very wide bubbles on mobile */
@media (max-width: 768px) {
    .supp-thread-body {
        padding: 0.75rem !important;
    }

    .supp-msg-bubble {
        max-width: 88% !important;
        font-size: 0.9rem !important;
    }

    .supp-msg-bubble[data-sender="CUSTOMER"] {
        background: #f3f4f6 !important;
        color: #374151 !important;
    }

    .supp-msg-bubble[data-sender="ADMIN"] {
        background: #6366f1 !important;
        color: white !important;
    }

    .supp-msg-bubble[data-sender="BOT"] {
        background: #e5e7eb !important;
        color: #374151 !important;
    }

    .supp-attachment-img {
        max-width: 100% !important;
        max-height: 220px !important;
        border-radius: 8px;
        cursor: pointer;
    }

    /* Reply button — full width on mobile */
    .supp-reply-btn {
        width: 100%;
        min-height: 52px;
        font-size: 1rem;
    }
}

/* Desktop: keep original bubble widths via inline style (no override needed) */
@media (min-width: 769px) {
    .supp-msg-bubble {
        max-width: 85%;
    }

    .supp-msg-bubble[data-sender="CUSTOMER"] {
        background: #f3f4f6;
        color: #374151;
    }

    .supp-msg-bubble[data-sender="ADMIN"] {
        background: #6366f1;
        color: white;
    }

    .supp-msg-bubble[data-sender="BOT"] {
        background: #e5e7eb;
        color: #374151;
    }

    .supp-attachment-img {
        max-width: 300px;
        max-height: 300px;
        border-radius: 8px;
        cursor: pointer;
    }
}

/* ------------------------------------------------------------
   49. SUPPORT ANALYTICS PAGE — MOBILE
   ------------------------------------------------------------ */

/* Trend chart wrapper — gives Chart.js a fixed height to measure */
.supp-trend-wrap {
    position: relative;
    height: 260px;
}

/* Donut chart wrapper — constrain on all sizes */
.supp-donut-wrap {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    /* Charts row — force both cols full-width so they stack */
    .supp-charts-row > [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    /* Trend chart: shorter height on mobile */
    .supp-trend-wrap {
        height: 180px;
    }

    /* Donut: smaller cap on narrow screens */
    .supp-donut-wrap {
        max-width: 240px;
    }
}

/* Mobile status strip — 3 items in a horizontal row */
.supp-status-strip {
    display: flex;
    padding: 0.875rem 1rem;
    gap: 0.75rem;
}

.supp-status-item {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.supp-status-count {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.1;
}

.supp-status-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--md-gray-500, #6b7280);
    margin-top: 0.15rem;
}

.supp-status-bar {
    height: 6px;
    width: 100%;
    border-radius: 3px;
}

@media (max-width: 420px) {
    .supp-status-count {
        font-size: 1.35rem;
    }
}

/* ------------------------------------------------------------
   35. Resource Access Log — compact mobile stat strip
   ------------------------------------------------------------ */
.ra-stat-strip {
    display: flex;
    align-items: stretch;
    padding: 0.75rem 0;
}

.ra-stat-item {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0.25rem 0.5rem;
}

.ra-stat-count {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.1;
}

.ra-stat-label {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
    margin-top: 0.15rem;
}

.ra-stat-divider {
    width: 1px;
    background: #e5e7eb;
    align-self: stretch;
    margin: 0.25rem 0;
}

@media (max-width: 420px) {
    .ra-stat-count { font-size: 1.35rem; }
}

/* ─── Doc / Docs page product label ────────────────────────────────── */
.doc-product-pill-wrap {
    margin-bottom: 1.25rem;
}

.doc-product-pill-track {
    display: flex;
    justify-content: center;
}

.doc-pill-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    border-radius: 999px;
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.2);
    color: #4f46e5;
    line-height: 1.2;
    text-align: center;
}

.doc-pill-btn .tab-main {
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.doc-pill-btn .tab-sub {
    font-size: 0.7rem;
    opacity: 0.7;
    color: #6b7280;
}

/* Mobile: tighter text */
@media (max-width: 576px) {
    .doc-pill-btn .tab-main {
        font-size: 0.78rem;
    }

    .doc-pill-btn .tab-sub {
        font-size: 0.62rem;
    }
}

/* ------------------------------------------------------------
   PRICING CARDS — Mobile compact (matches download-card style)
   ------------------------------------------------------------ */
@media (max-width: 768px) {
    .pricing-section {
        padding: 28px 0 20px;
    }
    .pricing-section .section-badge {
        font-size: 0.7rem;
        padding: 5px 14px;
        margin-bottom: 0.5rem;
    }
    .pricing-section h2.display-4 {
        font-size: 1.3rem !important;
        line-height: 1.2;
        margin-bottom: 0.25rem !important;
    }
    .pricing-section .lead {
        font-size: 0.8rem;
        margin-bottom: 0 !important;
    }
    .pricing-section .mb-5 {
        margin-bottom: 0.75rem !important;
    }
    /* Show Free card first on mobile (override inline column-reverse) */
    .pricing-section .row {
        flex-direction: column !important;
    }
    .pricing-section .col-lg-5 {
        margin-bottom: 0.75rem !important;
        padding-bottom: 0 !important;
    }

    /* Compact card layout — wrap for multi-row content */
    .pricing-card {
        flex-wrap: wrap;
        flex-direction: row !important;
        align-items: center;
        padding: 16px;
        border-radius: 14px;
        gap: 4px 10px;
        text-align: left !important;
    }
    .pricing-card:hover {
        transform: none;
    }

    /* Popular tag: inline banner instead of absolute */
    .pricing-popular-tag {
        position: static;
        transform: none;
        font-size: 0.6rem;
        padding: 2px 10px;
        display: inline-block;
        margin-bottom: 2px;
        width: 100%;
        text-align: left;
    }

    .pricing-plan-name {
        font-size: 1.1rem;
        margin-bottom: 0;
        margin-right: 8px;
        white-space: nowrap;
    }
    .pricing-price {
        font-size: 1.5rem;
        margin-bottom: 0;
        white-space: nowrap;
    }
    .pricing-price small {
        font-size: 0.7rem;
    }
    .pricing-price .pricing-strikethrough {
        font-size: 0.8rem;
    }
    .pricing-subtitle {
        font-size: 0.7rem;
        margin-bottom: 0.5rem;
    }

    /* Quota boxes — inline pill style */
    .pricing-quota-boxes {
        width: 100%;
        display: flex !important;
        gap: 8px;
        margin-bottom: 0.4rem;
    }
    .pricing-quota-box {
        flex: 1;
        display: flex !important;
        flex-direction: row !important;
        align-items: baseline;
        justify-content: center;
        gap: 5px;
        padding: 6px 10px;
        border-radius: 8px;
    }
    .pricing-quota-num {
        font-size: 1.1rem;
        line-height: 1;
    }
    .pricing-quota-label {
        display: none !important;
    }
    .pricing-quota-type {
        font-size: 0.8rem;
    }
    .pricing-features {
        display: none !important;
    }

    /* CTA button: compact */
    .pricing-cta-btn {
        padding: 8px 14px;
        font-size: 0.85rem;
        white-space: nowrap;
        width: 100%;
        text-align: center;
    }

    .pricing-note {
        font-size: 0.7rem;
        margin-top: 0.75rem;
    }
}