/* ================================================================
   DEECLIQ — COMPREHENSIVE MOBILE RESPONSIVE
   Covers: dashboard, tool pages, admin panel, public pages
   Applied globally via base.php and pdf_tools_nav.php
   ================================================================ */

/* ── 1. GLOBAL FIXES ─────────────────────────────────────────── */
@media (max-width: 768px) {
    /* No horizontal overflow anywhere */
    body, html { overflow-x: hidden; max-width: 100vw; }
    img, video, canvas, svg, iframe { max-width: 100%; }

    /* Bottom nav clearance — every page */
    body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important; }

    /* Tool containers: remove heavy top padding on mobile */
    [class$="-fit"][class$="-scope"],
    [class*="-fit"][class*="-scope"] { padding-top: 20px !important; }

    /* ...except on guest tool pages: .pthnav (pdf_tools_nav.php's top bar)
       is `position: fixed` at 60px tall, so a blanket 20px here tucks the
       page's own heading straight under it — this was the actual cause of
       the title/hamburger/logo pile-up on every guest tool page at mobile
       widths. Higher specificity than the rule above, so it wins wherever
       a .pthnav is actually present (an ordinary sibling in the DOM, not
       necessarily adjacent — several drawer/panel elements sit between
       them — hence `~` rather than `+`). */
    .pthnav ~ [class$="-fit"][class$="-scope"],
    .pthnav ~ [class*="-fit"][class*="-scope"] { padding-top: 76px !important; }

    /* Cards: reduce padding */
    .tool-container, .tool-container.card { padding: 16px !important; }
}

/* ── 2. PROCESSING RING — all tools ─────────────────────────── */
/* Ring SVG is 140px on desktop; shrink on mobile */
@media (max-width: 480px) {
    /* Generic ring-wrap pattern used across all tools */
    [class*="-ring-wrap"] {
        width: 100px !important;
        height: 100px !important;
        margin-bottom: 12px !important;
    }
    [class*="-ring-count"] { font-size: 1.5rem !important; }
    [class*="-ring-percent"] { font-size: .85rem !important; }

    /* Process steps — compress on tiny screens */
    [class*="-process-steps"] { gap: 3px !important; margin-bottom: 14px !important; }
    [class*="-process-icon"]  { width: 30px !important; height: 30px !important; font-size: .75rem !important; }
    [class*="-process-line"]  { width: 18px !important; }
    [class*="-process-step"]  { font-size: .62rem !important; }

    /* Progress text */
    [class*="-progress-text"] { font-size: .82rem !important; }
    [class*="-progress-meta"] { font-size: .75rem !important; }
}

/* ── 3. TOOL HERO / HEADER ───────────────────────────────────── */
@media (max-width: 600px) {
    [class*="-hero"] h1 { font-size: 1.25rem !important; margin-bottom: 4px !important; }
    [class*="-hero"] p  { font-size: .82rem !important; }

    /* Tool card padding */
    [class*="-card"].tool-container,
    .tool-container { padding: 14px 14px !important; border-radius: 14px !important; }

    /* Modal boxes */
    [class*="-modal-box"] {
        margin: 10px !important;
        padding: 16px 14px !important;
        border-radius: 14px !important;
        max-height: 85dvh !important;
        overflow-y: auto !important;
    }

    /* Settings grid inside modals */
    [class*="-settings-grid"] {
        grid-template-columns: 1fr !important;
    }
}

/* ── 4. FILE ROW / UPLOAD ZONE ───────────────────────────────── */
@media (max-width: 600px) {
    [class*="-file-row"],
    [class*="-file-item"] {
        flex-wrap: wrap;
        gap: 6px !important;
    }
    [class*="-file-name"] { font-size: .82rem !important; }
    [class*="-file-size"],
    [class*="-file-meta"] { font-size: .75rem !important; }
}

/* ── 5. DASHBOARD (home.php) ─────────────────────────────────── */
@media (max-width: 768px) {
    /* Dashboard hero */
    .dl-hero { padding: 24px 16px 0 !important; min-height: auto !important; }
    .dl-hero-title { font-size: 1.4rem !important; }
    .dl-hero-sub   { font-size: .85rem !important; }

    /* Stats row */
    .dash-stats-row { gap: 10px !important; flex-wrap: wrap; }
    .dash-stat-chip { flex: 1 1 calc(50% - 5px); min-width: 100px; }

    /* Quick action grid */
    .dash-quick-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }

    /* Weather card */
    .dash-weather-card { padding: 14px !important; }
}

@media (max-width: 480px) {
    .dl-hero-title { font-size: 1.2rem !important; }
    .dash-quick-grid { grid-template-columns: 1fr !important; }
    .dash-stat-chip  { flex: 1 1 100%; }

    /* Recently used tools list */
    .dash-recent-tool { padding: 10px 12px !important; }
}

/* ── 6. ADMIN PANEL ──────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Admin user card */
    .admin-user-card,
    [class*="user-card"] { padding: 16px !important; border-radius: 14px !important; }

    /* Stat chips row in admin */
    .admin-stats-row { gap: 8px !important; flex-wrap: wrap !important; }
    .admin-stat-chip { flex: 1 1 calc(50% - 4px) !important; font-size: .75rem !important; }

    /* Admin tables — scroll horizontally */
    .admin-table-wrap, .scroll { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
    table { min-width: 520px; }

    /* Admin action buttons */
    .actions { flex-wrap: wrap !important; gap: 6px !important; }
    .actions .btn { font-size: .75rem !important; padding: 6px 10px !important; }
}

@media (max-width: 480px) {
    /* Admin stat grid: 2 col → 1 col */
    .stats { grid-template-columns: 1fr !important; }
    .stats .stat { padding: 12px !important; }
    .stats .stat h3 { font-size: .82rem !important; }
    .stats .stat p  { font-size: 1.4rem !important; }

    /* Nav tabs wrap */
    .navtabs { gap: 6px !important; }
    .tab-btn { padding: 8px 12px !important; font-size: .8rem !important; }

    /* Table cells shrink */
    th, td { padding: 8px !important; font-size: .8rem !important; }
}

/* ── 7. PUBLIC TOOL NAV (guest tools) ────────────────────────── */
@media (max-width: 600px) {
    /* Public nav bar */
    .pthnav-links { display: none !important; } /* hidden on mobile — burger takes over */

    /* Tool bar (Back + Sound btn) */
    .public-tool-bar { padding: 8px 12px !important; gap: 8px !important; }
    .public-tool-back { font-size: .82rem !important; }

    /* Content area */
    .public-tool-content { padding: 10px !important; }
    .public-tool-shell   { padding-bottom: 70px !important; }
}

/* ── 8. PDF TOOLS HUB ────────────────────────────────────────── */
@media (max-width: 600px) {
    .pth-cat-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
    .pth-tool-card { padding: 12px !important; border-radius: 12px !important; }
    .pth-tool-card-icon { width: 36px !important; height: 36px !important; font-size: .85rem !important; }
    .pth-tool-card-name { font-size: .8rem !important; }
}

@media (max-width: 380px) {
    .pth-cat-grid { grid-template-columns: 1fr !important; }
}

/* ── 9. TOPBAR ON TOOL PAGES (logged-in) ─────────────────────── */
@media (max-width: 600px) {
    /* Hide non-essential topbar items on tools pages */
    .crm-topbar .topbar-search { display: none !important; }
    .topbar-right #soundToggleBtn { display: none !important; }
}

/* ── 10. AUTH PAGES (login/register/forgot) ──────────────────── */
@media (max-width: 480px) {
    .autumn-card { margin: 0 10px !important; padding: 24px 16px 20px !important; }
    .night-card  { margin: 0 10px !important; padding: 24px 16px 20px !important; }
    .ac-btn, .nc-btn { padding: 12px !important; }
}

/* ── 11. CENTERED POPUP (toasts) ─────────────────────────────── */
@media (max-width: 480px) {
    .ctp-popup { align-items: flex-end !important; padding: 0 !important; }
    .ctp-popup-box {
        max-width: 100% !important;
        border-radius: 16px 16px 0 0 !important;
        padding: 18px 18px 24px !important;
    }
}

/* ── 12. REVIEW POPUP ────────────────────────────────────────── */
@media (max-width: 480px) {
    #trPopupWrap { align-items: flex-end !important; padding: 0 !important; }
    #trPopupBox {
        border-radius: 20px 20px 0 0 !important;
        padding: 22px 18px calc(18px + env(safe-area-inset-bottom, 0px)) !important;
        max-width: 100% !important;
    }
}

/* ── 13. RELATED TOOL SUGGESTION CARD ────────────────────────── */
@media (max-width: 480px) {
    #pthRelCard { bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important; right: 10px !important; left: 10px !important; width: auto !important; }
}

/* ── 14. OLD BROWSER BANNER ──────────────────────────────────── */
@media (max-width: 480px) {
    #dlOldBrowserBanner { flex-wrap: wrap !important; font-size: .78rem !important; }
    #dlOldBrowserBanner button { margin-left: 0 !important; width: 100% !important; margin-top: 6px; }
}

/* ── 15. BOTTOM NAV — dark mode ──────────────────────────────── */
@media (max-width: 768px) {
    html[data-theme="dark"] .dk-bnav {
        background: #12121a;
        border-top-color: rgba(255,255,255,.08);
    }
    /* Add safe-area spacing to bottom nav items */
    .dk-bnav-item { min-height: 44px; }
}

/* ── 16. TOOL PAGE SCOPE PADDING ─────────────────────────────── */
/* Tools on logged-in layout have crm-content padding — remove double padding */
@media (max-width: 768px) {
    .crm-content [class*="-scope"][class*="-fit"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* ── 17. KEYBOARD OPEN FIX (iOS) ────────────────────────────── */
/* When keyboard opens, fixed bottom elements should move up */
@supports (height: 100dvh) {
    @media (max-width: 768px) {
        .dk-bnav { bottom: 0; }
    }
}