/* MailX — shared responsive breakpoints */

/* Every table on the site is wrapped in this (see public/**.php and assets/js/*.js)
   so a wide table scrolls horizontally within its own box instead of forcing the
   whole page to scroll sideways — the single biggest mobile-breakage risk here.
   No forced min-width: a simple 3-column table should stay full-width and not
   scroll unnecessarily; this only kicks in once content genuinely can't shrink
   further (many columns, unbreakable mono/email/host text, action buttons). */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-responsive table {
    white-space: nowrap;
}

.table-responsive table td,
.table-responsive table th {
    white-space: nowrap;
}

@media (max-width: 900px) {
    .app-shell {
        padding-left: 0;
    }

    .grid-cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sidebar-toggle-btn {
        display: inline-flex;
    }

    .editor-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 900px) {
    .topbar-controls .logout-button {
        display: none;
    }

    .sidebar {
        position: fixed;
        right: 0;
        left: auto;
        top: 0;
        bottom: 0;
        z-index: 40;
        display: flex;
        flex-direction: column;
        width: min(280px, 85vw);
        height: 100vh;
        height: 100dvh;
        padding-bottom: max(18px, env(safe-area-inset-bottom));
        background: var(--bg-panel);
        border-left: 1px solid var(--border-subtle);
        transform: translateX(100%);
        visibility: hidden;
        transition: transform 0.2s ease, visibility 0.2s;
        box-shadow: -12px 0 32px rgba(0, 0, 0, 0.4);
    }

    .sidebar > * {
        flex-shrink: 0;
    }

    .sidebar-close-btn {
        display: inline-flex;
        align-self: flex-end;
        width: 44px;
        height: 44px;
        padding: 0;
        margin-bottom: 18px;
    }

    .sidebar-footer {
        display: flex;
        margin-top: auto;
        padding-top: 18px;
        border-top: 1px solid var(--border-subtle);
    }

    .sidebar.open {
        transform: translateX(0);
        visibility: visible;
    }
}

@media (max-width: 900px) {
    .dashboard-split-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .grid-cols-4,
    .grid-cols-2 {
        grid-template-columns: minmax(0, 1fr);
    }

    .topbar {
        padding: 12px 16px;
        flex-wrap: wrap;
        gap: 10px;
    }

    .app-topbar {
        height: 110px;
        align-content: center;
    }

    /* .topbar-actions already has justify-content:flex-end, but as a lone
       flex item on its own wrapped line it only takes its content width, so
       flex-end has nothing to push against and it sits left-aligned.
       Forcing it full width and switching to space-between keeps the user
       name/badge pinned left while the theme toggle/hamburger group
       sits flush right. */
    .topbar-actions {
        width: 100%;
        justify-content: space-between;
    }

    .container {
        padding: 0 14px;
    }

    .main-content {
        padding: 18px 16px 40px;
    }

    .app-shell {
        flex-direction: column;
        padding-left: 0;
        padding-top: 110px;
        /* .app-shell's default align-items:flex-start (needed so the desktop
           sidebar/main-content pair don't stretch to match each other's
           height) has a different effect once flex-direction flips to
           column here: flex-start now governs the CROSS axis (width), so
           without this override .main-content sizes to its own content's
           natural width instead of the screen — this was the actual cause
           of every "table/form overflowing" report, not the tables/forms
           themselves. */
        align-items: stretch;
    }

    .tab-pill input.tab-rename-input {
        width: 80px;
    }

    .topbar-username {
        max-width: 90px;
    }

    .modal-overlay {
        padding: 10px;
        align-items: flex-end;
    }

    .modal {
        max-height: 85vh;
    }

    .modal-body {
        padding: 16px;
    }

    /* Small in-table action buttons (Edit/Delete/Test/etc.) get a slightly taller
       tap target on touch screens — the desktop 4px vertical padding is too tight. */
    td .btn {
        padding-top: 7px;
        padding-bottom: 7px;
    }
}

@media (max-width: 400px) {
    .topbar-username {
        display: none;
    }
}