/* WriteToSell — responsive layer.
   The app views were authored desktop-first with inline-style grids. Rather than
   rewrite every view, this sheet (a) turns the sidebar into an off-canvas drawer
   on tablet/mobile and (b) collapses the known inline grid patterns at
   breakpoints via attribute-substring selectors + !important (which beats a
   non-important inline declaration). Breakpoints: tablet ≤1024px, mobile ≤640px. */

/* ---- Shell defaults (desktop) ---- */
.app-burger { display: none; }
.app-overlay { display: none; }

/* ================= TABLET (≤1024px) ================= */
@media (max-width: 1024px) {
    /* Sidebar → off-canvas drawer */
    .app-shell { grid-template-columns: 1fr !important; }
    .app-sidebar {
        position: fixed !important;
        top: 0; left: 0;
        width: 250px; height: 100vh;
        z-index: 70;
        transform: translateX(-100%);
        transition: transform .22s ease;
        box-shadow: var(--shadow);
    }
    body.sidebar-open .app-sidebar { transform: none; }

    .app-overlay {
        position: fixed; inset: 0;
        background: rgba(0, 0, 0, .5);
        z-index: 60;
    }
    body.sidebar-open .app-overlay { display: block; }
    body.sidebar-open { overflow: hidden; }

    .app-burger { display: inline-flex; }

    /* Two-pane / wide layouts stack below tablet */
    [style*="grid-template-columns:1fr 320px"],
    [style*="grid-template-columns:1fr 340px"],
    [style*="grid-template-columns:1fr 360px"],
    [style*="grid-template-columns:1.6fr 1fr"],
    [style*="grid-template-columns:1.4fr 1fr"],
    [style*="grid-template-columns:1.1fr .9fr"],
    [style*="grid-template-columns:1.05fr .95fr"],
    [style*="grid-template-columns:1fr 1.6fr 40px"] { grid-template-columns: 1fr !important; }

    /* Dense card grids thin out */
    [style*="grid-template-columns:repeat(7,1fr)"] { grid-template-columns: repeat(3, 1fr) !important; }
    [style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ================= MOBILE (≤640px) ================= */
@media (max-width: 640px) {
    /* Everything multi-column becomes a single column */
    [style*="grid-template-columns:1fr 1fr"],
    [style*="grid-template-columns:repeat(3,1fr)"],
    [style*="grid-template-columns:repeat(4,1fr)"],
    [style*="grid-template-columns:repeat(7,1fr)"] { grid-template-columns: 1fr !important; }

    /* DNS records grid: keep 4 tracks aligned but shrink to fit */
    [style*="grid-template-columns:90px 1.4fr 1.8fr 70px"] {
        grid-template-columns: 52px 1fr 1.3fr 40px !important;
        gap: 8px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        font-size: 11px !important;
    }

    /* Tighter shell chrome */
    .app-main main { padding: 20px 15px 48px !important; }
    .app-main header { padding: 0 15px !important; gap: 10px !important; }
    .app-main header .btn { padding: 8px 12px !important; font-size: 12px !important; }

    /* Real tables scroll horizontally instead of overflowing */
    .app-main table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

    body { overflow-x: hidden; }
}

/* ---- Landing nav (self-contained, not reliant on the Tailwind CDN variants) ---- */
.lp-burger { display: none; }
@media (max-width: 1024px) {
    .lp-nav { display: none !important; }                 /* desktop section links */
    .lp-burger { display: inline-flex !important; align-items: center; justify-content: center; }
}
@media (min-width: 1025px) {
    #lp-menu { display: none !important; }                 /* mobile dropdown never on desktop */
    .lp-spacer { display: none !important; }               /* mobile-only flex spacer */
}
@media (max-width: 640px) {
    .lp-hide-sm { display: none !important; }              /* inline CTAs move into the menu */
}

/* ---- Auth split screen: hide the brand panel on small screens ---- */
@media (max-width: 768px) {
    .auth-split { grid-template-columns: 1fr !important; }
    .auth-brand { display: none !important; }
}