/* ============================================================================
   ProZall UI — components added in the feedback pass, plus the shared
   responsive layer.

   BREAKPOINTS. The codebase had accumulated twelve different max-widths
   (480/640/680/760/768/900/1000/1024/1050/1100/1180), so a layout could break
   at one width and recover at another with nothing in between designed for it.
   Everything here uses exactly four, and new work should too:

       480px   phone
       768px   large phone / small tablet
       1024px  tablet / small laptop
       1280px  laptop

   Loaded after style.css and freelancer-dashboard.css, so rules here win on
   equal specificity.
   ========================================================================= */

/* ── 1. Overflow guards ───────────────────────────────────────────────────
   The reported symptom was having to pinch-zoom to see a whole page, which is
   always horizontal overflow: one element wider than the viewport stretches
   the document and shrinks everything else. These rules stop any single child
   from doing that, and the sections below fix the specific offenders so the
   guards stay a safety net rather than the actual fix. */

html {
    /* Never let a stray wide child widen the document itself. */
    overflow-x: hidden;
    /* Stop iOS Safari inflating text in landscape, which reflows layouts. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
    min-width: 0;
}

/* Media never overflows its column. */
img,
svg,
video,
canvas,
iframe {
    max-width: 100%;
}

img,
video {
    height: auto;
}

/* Long unbroken strings (URLs, emails, IDs) are a classic overflow source. */
p,
h1, h2, h3, h4, h5, h6,
li,
dd,
td,
th,
.card-body,
.fl-content {
    overflow-wrap: anywhere;
    word-break: normal;
}

/* Flex and grid children default to min-width:auto, which refuses to shrink
   below their content and pushes the container wide. */
.fl-content > *,
.fl-header-inner > *,
.fl-subnav-inner > *,
.dashboard-content > * {
    min-width: 0;
}

/* Preformatted content scrolls inside itself rather than widening the page. */
pre,
code {
    overflow-x: auto;
    max-width: 100%;
}

/* ── 2. Tables ────────────────────────────────────────────────────────────
   .data-table is width:100% with generous cell padding across 5–7 columns, so
   on a 360px phone it cannot fit and drags the page wider. Tables are wrapped
   at runtime (see dashboard-shell-scripts.php) in .pz-table-scroll, which
   confines the scrolling to the table itself. */

.pz-table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Hint that the region scrolls sideways on touch devices. */
    overscroll-behavior-x: contain;
}

.pz-table-scroll > table {
    min-width: 640px;
}

@media (max-width: 768px) {
    .data-table thead th,
    .data-table tbody td {
        padding: 10px 12px;
        white-space: nowrap;
    }

    /* Cells that hold wrapped prose keep wrapping — only the layout columns
       are nowrap, otherwise a description column forces a very wide table. */
    .data-table td.wrap,
    .data-table td.truncate {
        white-space: normal;
        max-width: 220px;
    }
}

/* ── 3. Dashboard shell ───────────────────────────────────────────────── */

.fl-content {
    padding-inline: 24px;
}

@media (max-width: 1024px) {
    .fl-content { padding-inline: 20px; }
}

@media (max-width: 768px) {
    .fl-content { padding: 16px 14px; }
}

@media (max-width: 480px) {
    .fl-content { padding: 14px 12px; }
}

/* The header keeps its actions on one row and lets the logo shrink first. */
.fl-header-inner {
    gap: 10px;
    flex-wrap: nowrap;
}

.fl-header-logo {
    flex-shrink: 1;
    min-width: 0;
}

.fl-header-logo img {
    max-height: 34px;
    width: auto;
}

.fl-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    min-width: 0;
}

/* The menu toggle is the last action, matching the public header's hamburger
   position so the button does not jump sides between the two shells. */
.fl-mobile-toggle {
    order: 99;
    display: none;
    background: none;
    border: 1px solid var(--gray-200, #e2e8f0);
    border-radius: 10px;
    padding: 7px 9px;
    cursor: pointer;
    color: var(--gray-600, #475569);
    line-height: 0;
}

.fl-mobile-toggle:hover {
    background: var(--gray-50, #f8fafc);
    color: var(--navy, #0b2b5b);
}

@media (max-width: 1024px) {
    .fl-mobile-toggle { display: inline-flex; }
    .fl-header-link--desktop { display: none; }
}

@media (max-width: 768px) {
    .fl-header-inner,
    .fl-subnav-inner { padding-inline: 14px; }
    .fl-header-inner { height: 56px; }
}

@media (max-width: 480px) {
    .fl-header-inner,
    .fl-subnav-inner { padding-inline: 12px; }
}

@media (max-width: 480px) {
    /* Below this the name is the first thing worth dropping — the avatar still
       identifies the account and the dropdown still opens. */
    .fl-user-name { display: none; }
    .fl-header-actions { gap: 6px; }
}

/* Subnav: horizontal scroll on tablets, stacked drawer on phones. */
.fl-subnav-tabs {
    min-width: 0;
}

@media (max-width: 1024px) {
    .fl-subnav-inner {
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }

    .fl-subnav-tabs {
        flex: 1;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap;
    }

    .fl-subnav-tabs::-webkit-scrollbar { display: none; }

    .fl-subnav-tab {
        white-space: nowrap;
        flex-shrink: 0;
    }
}

@media (max-width: 768px) {
    /* On phones the row becomes a toggled drawer so tabs are not hidden
       off-screen behind an easily-missed horizontal scroll. */
    .fl-subnav { position: static; }

    .fl-subnav-tabs {
        display: none;
        flex-direction: column;
        align-items: stretch;
        overflow: visible;
    }

    .fl-subnav.mobile-open .fl-subnav-tabs,
    .fl-subnav-tabs.mobile-open {
        display: flex;
    }

    .fl-subnav-inner {
        flex-direction: column;
        align-items: stretch;
    }

    .fl-nav-dropdown,
    .fl-subnav-cta {
        width: 100%;
    }

    .fl-subnav-cta { justify-content: center; }

    /* Dropdowns become inline lists — hover menus do not work on touch. */
    .fl-nav-dropdown-menu {
        position: static;
        box-shadow: none;
        border: none;
        padding-left: 14px;
        display: none;
    }

    .fl-nav-dropdown.open .fl-nav-dropdown-menu { display: block; }
}

/* ── 4. Return-to-dashboard bar (public pages, logged-in users) ────────── */

.pz-return-bar {
    background: var(--navy, #0b2b5b);
    color: #fff;
    font-size: 0.8125rem;
}

.pz-return-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-block: 8px;
    min-width: 0;
}

.pz-return-bar__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
}

.pz-return-bar__back:hover { color: var(--green, #00a651); }

.pz-return-bar__links {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.pz-return-bar__links::-webkit-scrollbar { display: none; }

.pz-return-bar__links a {
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    white-space: nowrap;
}

.pz-return-bar__links a:hover { color: #fff; }

@media (max-width: 768px) {
    /* The quick links are a convenience; the way back is the priority. */
    .pz-return-bar__links { display: none; }
    .pz-return-bar__inner { justify-content: flex-start; }
}

/* ── 5. Role switcher (dual client/freelancer accounts) ────────────────── */

.pz-role-switch,
.pz-role-add {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.pz-role-switch__current {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gray-500, #64748b);
    white-space: nowrap;
}

.pz-role-switch__btn,
.pz-role-add__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--gray-50, #f8fafc);
    border: 1px solid var(--gray-200, #e2e8f0);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--navy, #0b2b5b);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.pz-role-switch__btn:hover,
.pz-role-add__btn:hover {
    background: var(--green, #00a651);
    border-color: var(--green, #00a651);
    color: #fff;
}

@media (max-width: 1024px) {
    .pz-role-switch__current { display: none; }
}

@media (max-width: 768px) {
    /* Both variants collapse to their icon; the title attribute carries the
       label for anyone who long-presses or uses a screen reader. */
    .pz-role-switch__btn span,
    .pz-role-add__btn span { display: none; }
    .pz-role-switch__btn,
    .pz-role-add__btn { padding: 7px 9px; }
}

/* ── 6. Profile pages ─────────────────────────────────────────────────── */

.pz-profile-page {
    max-width: 760px;
    width: 100%;
}

.pz-profile-heading {
    margin: 0 0 20px;
    font-size: 1rem;
    color: var(--navy, #0b2b5b);
}

.pz-required { color: var(--danger, #dc2626); }

.pz-form-full { grid-column: 1 / -1; }

.pz-profile-actions { margin-top: 20px; }

.pz-lang-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.pz-lang-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    cursor: pointer;
    padding: 6px 12px;
    border: 1px solid var(--gray-200, #e2e8f0);
    border-radius: 8px;
    background: #fff;
    color: var(--gray-700, #334155);
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.pz-lang-chip input { display: none; }

.pz-lang-chip.is-on {
    background: var(--primary, #0b2b5b);
    border-color: var(--primary, #0b2b5b);
    color: #fff;
}

/* Avatar block — shared by the client and freelancer profiles. */
.pz-avatar-card { margin-bottom: 24px; }

.pz-avatar-row {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.pz-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.pz-avatar-img {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--gray-200, #e2e8f0);
    display: block;
}

.pz-avatar-edit {
    position: absolute;
    bottom: 0;
    right: 0;
    background: var(--primary, #0b2b5b);
    color: #fff;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.pz-avatar-edit:hover { background: var(--green, #00a651); }

.pz-avatar-meta { min-width: 0; }

.pz-avatar-name {
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--navy, #0b2b5b);
}

.pz-avatar-email { font-size: 0.875rem; }

.pz-avatar-badge { margin-top: 6px; }

.pz-avatar-hint {
    margin-top: 8px;
    font-size: 0.75rem;
    color: var(--gray-400, #94a3b8);
}

/* The form only exists to carry the file input; the visible control is the
   label pencil, which works from anywhere in the document. */
.pz-avatar-form,
.pz-avatar-form input,
.pz-avatar-form button {
    display: none;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 480px) {
    .pz-avatar-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }
}

/* Subscription panel. */
.pz-sub-card { margin-top: 24px; }

.pz-sub-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.pz-sub-head h3 {
    margin: 0;
    font-size: 1rem;
}

.pz-sub-alllink {
    font-size: 0.8rem;
    color: var(--green, #00a651);
    text-decoration: none;
}

.pz-sub-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: center;
}

.pz-sub-label {
    font-size: 0.75rem;
    color: var(--gray-400, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 4px;
}

.pz-sub-plan {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--navy, #0b2b5b);
}

.pz-sub-note {
    font-size: 0.8rem;
    color: var(--gray-500, #64748b);
    margin-top: 4px;
}

.pz-sub-note--muted { color: var(--gray-400, #94a3b8); }

.pz-sub-active { color: var(--green, #00a651); }

.pz-sub-actions { align-items: flex-end; }

.pz-sub-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pz-sub-cancel {
    background: var(--danger-bg, #fee2e2);
    color: var(--danger-fg, #b91c1c);
    border: 1px solid var(--danger-bg, #fee2e2);
}

.pz-commission-note {
    margin-top: 16px;
    padding: 12px 16px;
    background: var(--success-bg, #f0fdf4);
    border-radius: 10px;
    border: 1px solid #bbf7d0;
    font-size: 0.8rem;
    color: var(--success-fg, #166534);
    display: flex;
    align-items: center;
    gap: 8px;
}

.pz-commission-note svg { flex-shrink: 0; }

@media (max-width: 768px) {
    .pz-sub-grid { grid-template-columns: 1fr; }
    .pz-sub-actions { align-items: stretch; }
}

/* ── 7. Forms ─────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    /* Two-column form rows stack rather than squeezing each field to
       unusable width. */
    .form-row {
        grid-template-columns: 1fr !important;
        display: grid;
    }
}

/* iOS zooms the page when focusing an input under 16px. That zoom never
   reverses on blur, which is one way a user ends up "zoomed in" on a page. */
@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    input[type="date"],
    select,
    textarea,
    .form-control {
        font-size: 16px;
    }
}

/* ── 8. Admin ─────────────────────────────────────────────────────────── */

.admin-capability-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 6px 0 4px;
}

.admin-capability {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--gray-700, #334155);
    cursor: pointer;
}

/* Language tag on admin content fields, so it is obvious at a glance which
   language a field feeds and that the FR one is optional. */
.i18n-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--gray-100, #f1f5f9);
    color: var(--gray-500, #64748b);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    vertical-align: 1px;
}

.i18n-tag--fr {
    background: #eff6ff;
    color: #1d4ed8;
}

.pz-chat-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 6px;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
}

.pz-chat-badge[hidden] { display: none; }

.pz-chat-badge--cta {
    background: #fff;
    color: #ef4444;
}

.notif-mark-read {
    font-size: 0.75rem;
    color: var(--primary, #0b2b5b);
    text-decoration: none;
}

.notif-empty {
    padding: 20px 16px;
    text-align: center;
    color: var(--gray-400, #94a3b8);
    font-size: 0.875rem;
}

/* ── 9. Chat widget ───────────────────────────────────────────────────── */

.quick-q-escalate {
    background: var(--green, #00a651) !important;
    border-color: var(--green, #00a651) !important;
    color: #fff !important;
    font-weight: 600;
}

@media (max-width: 480px) {
    /* A fixed-width panel is the single most common overflow source on
       phones — pin it to the viewport instead. */
    .chatbot-panel {
        width: calc(100vw - 24px);
        max-width: 380px;
        right: 12px;
        left: auto;
    }
}

/* ── 10. Public pages ─────────────────────────────────────────────────── */

.container {
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .container { padding-inline: 16px; }
}

@media (max-width: 480px) {
    .container { padding-inline: 14px; }
}

/* Auto-fit grids handle every width without a breakpoint each. */
@media (max-width: 1024px) {
    .hp-pros-grid,
    .hp-categories-grid,
    .hp-pricing-grid,
    .hp-collab-grid,
    .services-grid-prozall,
    .projects-grid-prozall,
    .blog-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    }
}

@media (max-width: 480px) {
    .hp-pros-grid,
    .hp-categories-grid,
    .hp-pricing-grid,
    .hp-collab-grid,
    .services-grid-prozall,
    .projects-grid-prozall,
    .blog-grid {
        grid-template-columns: 1fr;
    }
}

/* The search/filter bar wraps instead of forcing a minimum row width. */
@media (max-width: 1024px) {
    .pz-search-inner,
    .sc-search-form,
    .pz-adv-row {
        flex-wrap: wrap;
    }

    .pz-search-field,
    .pz-adv-group {
        min-width: 0;
        flex: 1 1 240px;
    }
}

@media (max-width: 768px) {
    .pz-search-btns {
        width: 100%;
        display: flex;
        gap: 8px;
    }

    .pz-search-btns .btn,
    .pz-btn-advanced { flex: 1; }
}

/* Blog post and CMS sidebars sit under the content rather than squeezing it. */
@media (max-width: 1024px) {
    .pg-content-grid,
    .blog-post-grid {
        grid-template-columns: 1fr;
    }
}

/* ── 11. Dual-account upgrade card (profile page) ─────────────────────────
   The header toggle is a shortcut for accounts that already hold both sides;
   this is the explained entry point that makes the feature discoverable. */

.pz-role-card {
    margin-bottom: 24px;
    border-left: 3px solid var(--green, #00a651);
}

.pz-role-card--active {
    border-left-color: var(--gray-300, #cbd5e1);
    background: var(--gray-50, #f8fafc);
}

.pz-role-card__body {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.pz-role-card__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0fdf4;
    color: var(--green, #00a651);
}

.pz-role-card__icon svg { width: 20px; height: 20px; }

.pz-role-card__icon--ok {
    background: var(--gray-100, #f1f5f9);
    color: var(--gray-500, #64748b);
}

.pz-role-card__text { min-width: 0; }

.pz-role-card__text h3 {
    margin: 0 0 6px;
    font-size: 1rem;
    color: var(--navy, #0b2b5b);
}

.pz-role-card__text p {
    margin: 0;
    font-size: 0.875rem;
    color: var(--gray-600, #475569);
    line-height: 1.6;
}

.pz-role-card__points {
    margin: 12px 0 0;
    padding-left: 18px;
    font-size: 0.8125rem;
    color: var(--gray-600, #475569);
    line-height: 1.8;
}

.pz-role-card__cta { margin-top: 16px; }

@media (max-width: 480px) {
    .pz-role-card__body { flex-direction: column; gap: 12px; }
    .pz-role-card__cta { width: 100%; }
}

/* Reassurance under the sign-up role picker. */
.auth-role-note {
    margin: -6px 0 20px;
    font-size: 0.8125rem;
    color: var(--gray-500, #64748b);
    line-height: 1.6;
    text-align: center;
}

/* ── 12. Compact icon actions + hover tooltip ─────────────────────────────
   Table action columns used to stack full-width text buttons, which made the
   column wider than all the data columns put together. Icon-only controls keep
   their label in aria-label (screen readers) and data-tip (hover/focus). */

.pz-icon-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.pz-icon-actions form { margin: 0; display: inline-flex; }

.pz-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--gray-200, #e2e8f0);
    border-radius: 8px;
    background: #fff;
    color: var(--gray-500, #64748b);
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, border-color .15s, color .15s;
}

.pz-icon-btn svg { width: 15px; height: 15px; display: block; }

.pz-icon-btn:hover,
.pz-icon-btn:focus-visible {
    background: var(--navy, #0b2b5b);
    border-color: var(--navy, #0b2b5b);
    color: #fff;
    outline: none;
}

.pz-icon-btn--ok:hover,
.pz-icon-btn--ok:focus-visible {
    background: var(--green, #00a651);
    border-color: var(--green, #00a651);
}

.pz-icon-btn--danger:hover,
.pz-icon-btn--danger:focus-visible {
    background: #dc2626;
    border-color: #dc2626;
}

/* The actions column no longer needs to be the widest one. */
.admin-actions-cell {
    width: 1%;
    white-space: nowrap;
}

/* Shared tooltip element.
   position:fixed rather than absolute-inside-the-button: these buttons live in
   a .pz-table-scroll container (overflow-x:auto), which clips any descendant,
   so an in-flow tooltip would be cut off at the cell edge. Coordinates are set
   in JS — see dashboard-shell-scripts.php. */
.pz-tip {
    position: fixed;
    z-index: 9999;
    padding: 5px 9px;
    border-radius: 6px;
    background: var(--navy, #0b2b5b);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translateY(2px);
    transition: opacity .12s ease, transform .12s ease;
}

.pz-tip.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.pz-tip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -4px;
    border: 4px solid transparent;
    border-top-color: var(--navy, #0b2b5b);
}

.pz-tip.is-below::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: var(--navy, #0b2b5b);
}

@media (hover: none) {
    /* No hover on touch: the tooltip would need a tap that also fires the
       action, so it is suppressed and aria-label carries the meaning. */
    .pz-tip { display: none; }
}