/* ==========================================================================
   ATS Resume Builder - responsive.css
   Mobile responsiveness for the site chrome and the builder workspace
   (project rule 12). Desktop-first: builder.css defines the wide,
   three-panel layout; these breakpoints progressively simplify it for
   narrower viewports. Below 900px the builder switches paradigm
   entirely - from "sidebar + editor + preview all visible" to "one tab
   panel visible at a time, switched via the tab bar/bottom action bar".
   ========================================================================== */

/* Laptop: still three-panel, just tighter - a 240px sidebar and a wide
   A4 preview both start competing for space before the mobile
   breakpoint is reached. */
@media (max-width: 1200px) {
    :root {
        --rb-sidebar-width: 200px;
    }

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

    .rb-panel--ats {
        width: 320px;
    }
}

/* Keep the sticky action row usable on common laptop widths. Document
   actions remain fully named to assistive technology through their
   aria-label/title attributes while their visible labels collapse. */
@media (min-width: 901px) and (max-width: 1400px) {
    .rb-toolbar {
        gap: var(--rb-space-2);
    }

    .rb-toolbar-group {
        gap: var(--rb-space-1);
    }

    .rb-toolbar-group--document .rb-btn-label {
        display: none;
    }

    .rb-toolbar-group--document .rb-btn {
        padding-inline: 10px;
    }
}

/* Tablet/phone: the mobile paradigm. Only one of Edit / Preview / ATS
   Check is visible at a time, switched by .rb-mobile-tabs and mirrored
   by the sticky bottom action bar. */
@media (max-width: 900px) {
    /* ---- Toolbar: mobile tabs and the bottom action bar take over
       navigation/quick-actions, so the top toolbar only needs to keep
       the document-level actions (New/Load/Import/Export/Settings) -
       ATS Check and Download PDF are dropped here since the bottom
       action bar already covers them, and every remaining button
       collapses to icon-only (each already has a title/aria-label). ---- */
    .rb-toolbar {
        padding: var(--rb-space-1) var(--rb-space-2);
        gap: var(--rb-space-1);
        overflow-x: auto;
    }

    .rb-btn-label {
        display: none;
    }

    .rb-save-status {
        display: none;
    }

    #ats-check-btn,
    #download-pdf-btn {
        display: none;
    }

    .rb-mobile-tabs,
    .rb-mobile-action-bar {
        display: flex;
    }

    /* ---- Workspace: single-panel-at-a-time ---- */
    .rb-workspace {
        display: block;
        padding: 0;
        padding-bottom: calc(var(--rb-mobile-actionbar-height) + env(safe-area-inset-bottom, 0px));
        gap: 0;
    }

    .rb-panel {
        display: none;
    }

    .rb-panel.is-active-panel {
        display: block;
    }

    /* Note: no standalone ".rb-panel--edit { display: block }" rule here
       - that would tie in specificity with ".rb-panel { display: none }"
       above and win by source order regardless of .is-active-panel,
       permanently showing the Edit panel on mobile. The two-class
       ".rb-panel.is-active-panel" rule above already provides the block
       display this panel needs once it is the active tab; the desktop
       grid layout it overrides (.rb-panel--edit's own display:grid in
       builder.css) only ever applies above the 900px breakpoint anyway. */

    .rb-sidebar {
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        border-top: 0;
        max-height: none;
        overflow-y: visible;
    }

    .rb-section-nav {
        flex-direction: column;
        flex-wrap: nowrap;
        overflow-x: visible;
        gap: var(--rb-space-1);
        padding-bottom: 4px;
    }

    .rb-section-nav-btn {
        white-space: normal;
    }

    .rb-editor-panel {
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        border-top: 0;
        box-shadow: none;
        max-height: none;
        overflow-y: visible;
    }

    .rb-field-grid {
        grid-template-columns: 1fr;
    }

    .rb-preview-panel {
        border-radius: 0;
        border: 0;
        box-shadow: none;
    }

    .rb-print-area {
        max-width: 100%;
        min-width: 0;
    }

    /* ---- ATS panel: reset the desktop drawer treatment back to a
       normal full-width in-flow tab panel; visibility is now controlled
       purely by the shared .is-active-panel mechanism above. ---- */
    .rb-panel--ats {
        position: static;
        width: 100%;
        max-width: none;
        transform: none;
        visibility: visible;
        transition: none;
        box-shadow: none;
        border-left: 0;
        padding: var(--rb-space-3);
        overflow-wrap: anywhere;
    }

    .rb-ats-drawer-backdrop {
        display: none !important;
    }

    .rb-modal {
        max-width: 100%;
    }
}

@media (min-width: 901px) and (max-width: 1500px) {
    .rb-preview-panel-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .rb-format-panel {
        width: 100%;
        min-width: 0;
    }

    .rb-template-cards,
    .rb-format-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Site-level top navigation (shared by every page, not just the
   builder): collapses behind a toggle button once there is no longer
   room for the full link list next to the brand. */
@media (max-width: 640px) {
    .rb-site-header-inner {
        flex-wrap: wrap;
        height: auto;
        padding: var(--rb-space-2) var(--rb-space-3);
    }

    .rb-nav-toggle {
        display: block;
    }

    .rb-site-nav {
        width: 100%;
        margin-left: 0;
    }

    .rb-site-nav[data-collapsed="true"] {
        display: none;
    }

    .rb-site-nav ul {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--rb-space-2);
        padding: var(--rb-space-2) 0;
    }
}

/* Small phone: a little extra breathing room reclaimed from the tab
   bar/action bar labels and the printable page's own padding. */
@media (max-width: 480px) {
    .rb-entry-header {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .rb-entry-controls {
        flex: 1 1 100%;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .rb-mobile-tab span,
    .rb-action-bar-btn span {
        font-size: 0.62rem;
    }

    .rb-print-area {
        padding: 0;
    }

    .rb-editor-panel,
    .rb-ats-panel {
        padding: var(--rb-space-3);
    }
}

@media (max-width: 360px) {
    .rb-toolbar {
        scrollbar-width: thin;
    }

    .rb-toolbar .rb-btn {
        min-width: 40px;
        min-height: 40px;
        padding-inline: 10px;
    }

    .rb-template-cards {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 720px) {
    .rb-preview-panel-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .rb-format-panel,
    .rb-format-panel {
        width: 100%;
    }

    .rb-template-cards {
        grid-template-columns: repeat(2, minmax(110px, 1fr));
    }

    .rb-format-grid {
        grid-template-columns: repeat(2, minmax(120px, 1fr));
    }
}

@media (max-width: 430px) {
    .rb-format-grid {
        grid-template-columns: 1fr;
    }
}