/* ============================================================
   Pivot TechX :: Global Mobile Responsiveness + Tile tables
   Loaded after the template style.css in layouts/header
   ============================================================ */

/* ---------- Kill horizontal shake / overflow ---------- */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}
body {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
#main.main, main {
    min-width: 0;
    overflow-x: hidden;
}
.card, .card-body, .section, .row, .col, [class*="col-"] {
    min-width: 0;
    overflow-wrap: break-word;
    word-wrap: break-word;
}
img, svg, video, canvas {
    max-width: 100%;
    height: auto;
}
table { max-width: 100%; }

/* ---------- Login: dynamic viewport height + no bouncing scroll ---------- */
.ptx-login {
    height: 100vh;
    overflow-x: hidden;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    max-width: 100vw;
}
@supports (height: 100dvh) {
    .ptx-login { height: 100dvh; }
}
@media (max-width: 575.98px) {
    .ptx-login { min-height: 100dvh; }
    .ptx-form { align-items: flex-start; padding: 2.5rem 1.15rem 1.75rem; }
    .ptx-card__head h2 { font-size: 1.4rem; }
    .ptx-brand,
    .ptx-form,
    .ptx-card { overflow-x: hidden; max-width: 100%; box-sizing: border-box; }
}
@supports (min-height: 100dvh) {
    @media (max-width: 575.98px) { .ptx-login { min-height: 100dvh; } }
}

/* ---------- Fluid controls on very small screens ---------- */
@media (max-width: 575.98px) {
    .d-flex.flex-md-row { flex-direction: column !important; align-items: stretch !important; }
    .btn, .btn-sm { white-space: normal; }
    .card-title, .pagetitle h1 { font-size: 1.15rem; }
    .form-control, .form-select { font-size: 16px; } /* prevents iOS zoom on focus */
}

/* ============================================================
   Wide/dynamic tables that are NOT tiled never stretch the page —
   they scroll horizontally inside their wrapper (desktop/wide).
   ============================================================ */
@media (min-width: 768px) {
    .table-responsive,
    .ptx-table-wrap,
    .report-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ============================================================
   Card / tile view for data tables on phones AND portrait tablets
   (<=768px), matching the AmliyaDeck "product-types" look. The JS
   auto-adds `ptx-tile` + a `data-label` (its column header) to every
   td, and flags the actions cell (`ptx-tile-actions`) and empty rows
   (`ptx-tile-empty`) so they get the right treatment.
   ============================================================ */
@media (max-width: 767.98px) {
    table.ptx-tile {
        display: block;
        width: 100%;
        border: 0;
    }
    table.ptx-tile > thead { display: none !important; }
    table.ptx-tile > tbody { display: block; }

    /* each table row renders as one stacked card */
    table.ptx-tile > tbody > tr {
        display: block;
        width: 100%;
        margin: 0 0 .85rem;
        padding: .45rem .15rem;
        border: 1px solid #ece7f3;
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 4px 14px -10px rgba(10, 12, 62, .25);
    }

    table.ptx-tile > tbody > tr > td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: .85rem;
        width: 100% !important;
        padding: .45rem .75rem;
        border: 0;
        border-bottom: 1px dashed #ece7f3;
        text-align: right;
        white-space: normal !important;
        font-size: .92rem;
    }
    table.ptx-tile > tbody > tr > td:last-child { border-bottom: 0; }

    /* the label bubble (column header name) beside the value */
    table.ptx-tile > tbody > tr > td::before {
        content: attr(data-label);
        color: #899bbd;
        font-weight: 600;
        font-size: .74rem;
        text-transform: uppercase;
        letter-spacing: .4px;
        line-height: 1.2;
        flex: 0 0 auto;
        max-width: 45%;
        text-align: left;
        padding-top: 2px;
    }

    /* cells without a label / colspan rows span the card width */
    table.ptx-tile > tbody > tr > td[data-label=""]::before { content: none; }
    table.ptx-tile > tbody > tr > td.ptx-tile-full {
        display: block;
        text-align: left;
    }
    table.ptx-tile > tbody > tr > td.ptx-tile-full::before { content: none; }

    /* the ACTIONS cell -> its own full-width bottom row */
    table.ptx-tile > tbody > tr > td.ptx-tile-actions {
        display: block;
        text-align: left;
        border-top: 1px dashed #ece7f3;
        border-bottom: 0;
        margin-top: .3rem;
        padding-top: .6rem !important;
    }
    table.ptx-tile > tbody > tr > td.ptx-tile-actions::before {
        margin-bottom: .45rem;
    }
    table.ptx-tile > tbody > tr > td.ptx-tile-actions form { width: 100%; }
    table.ptx-tile > tbody > tr > td.ptx-tile-actions .btn,
    table.ptx-tile > tbody > tr > td.ptx-tile-actions a.btn {
        flex: 1 1 auto;
        min-width: 0;
    }
    table.ptx-tile > tbody > tr > td.ptx-tile-actions .d-flex,
    table.ptx-tile > tbody > tr > td.ptx-tile-actions .d-inline-flex {
        display: flex !important;
        flex-wrap: wrap;
        gap: .5rem;
        /* spread icon actions evenly across the full card width */
        justify-content: space-evenly;
    }
    /* icon action buttons (view/edit/offboard/delete etc.) share the row equally */
    table.ptx-tile > tbody > tr > td.ptx-tile-actions .ptx-action {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        width: auto !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: .25rem;
    }
    /* a wrapped icon-action <form> (offboard/onboard) centers its button in its slot */
    table.ptx-tile > tbody > tr > td.ptx-tile-actions form:has(.ptx-action) {
        width: auto;
        display: flex;
        justify-content: center;
    }
    table.ptx-tile > tbody > tr > td.ptx-tile-actions > * { max-width: 100%; }

    /* an empty / message row should never render as a card */
    table.ptx-tile > tbody > tr.ptx-tile-empty {
        border: 0;
        background: transparent;
        box-shadow: none;
        margin: 0;
    }
    table.ptx-tile > tbody > tr.ptx-tile-empty > td {
        justify-content: center;
        text-align: center;
    }
    table.ptx-tile > tbody > tr.ptx-tile-empty > td::before { content: none; }
}

/* ============================================================
   Compact, professional mobile experience for the app pages
   (filters, buttons, forms). Applies to phones + portrait tablets
   (~<=768px). Left alone, Bootstrap's "card" pages get too airy and
   buttons get cut off; this pulls them together like AmliyaDeck.
   ============================================================ */
@media (max-width: 767.98px) {
    /* Contain the main content nicely instead of hugging the edges */
    #main.main, main {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .card, .card-body, .section {
        border-radius: 12px;
    }

    /* Tighter card breathing room = more professional density */
    .card-body {
        padding-top: 1rem !important;
        padding-right: 1rem !important;
        padding-bottom: 1rem !important;
        padding-left: 1rem !important;
    }

    .card-title, .card-title h5 {
        font-size: 1.05rem;
        margin-bottom: .6rem !important;
    }

    /* Page heading toolbar */
    .pagetitle h1, #main h1 { font-size: 1.3rem; }
    .breadcrumb { display: none; }

    /* Labels: small, tight to the field (kills the big label-field gap) */
    .form-label, label.form-label {
        font-size: .78rem;
        font-weight: 600;
        color: #56607a;
        margin-bottom: .25rem !important;
        line-height: 1.3;
    }

    /* Fields: comfortable tap size but not oversized */
    .form-control, .form-select {
        height: 44px;
        font-size: .9rem;
        padding-top: .35rem !important;
        padding-bottom: .35rem !important;
    }
    textarea.form-control { height: auto; }

    /* Tighten the gap between stacked form rows */
    .row.g-3, .row.g-2 { --bs-gutter-y: .6rem; }
    .row.g-3 > [class*="col-"] { margin-bottom: .15rem; }

    /* Primary in-card buttons / action links */
    .ptx-title { font-size: 1.1rem; }

    /* Filter + action button rows: buttons split the row EQUALLY, side by side
       (chip the AmliyaDeck .jdx-actions pattern: each button flex:1). */
    .card .d-flex.justify-content-end,
    .card .text-end.d-flex,
    .card form .d-flex.justify-content-end,
    .card form .text-end.d-flex,
    .card form .btn-group.justify-content-end {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        gap: .6rem !important;
        margin-top: .15rem !important;
    }
    .card .d-flex.justify-content-end .btn,
    .card .text-end.d-flex .btn,
    .card form .d-flex.justify-content-end .btn,
    .card form .text-end.d-flex .btn {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        width: auto !important;
        white-space: nowrap;
    }
    /* .btn-group (Edit / Delete / action dropdowns) stretches + splits equally */
    .btn-group { width: 100% !important; }
    .btn-group .btn { flex: 1 1 0 !important; min-width: 0 !important; }

    /* Exempt segmented toggles (e.g. Board/Table) from the full-width stretch —
       they must stay compact and inline with their toolbar. */
    .view-toggle {
        width: auto !important;
        flex: 0 0 auto !important;
        white-space: nowrap;
    }
    .view-toggle .btn {
        flex: 0 0 auto !important;
        min-width: 0 !important;
        white-space: nowrap;
    }

    /* Leads toolbar on mobile: Pipeline on its own line, then Board / Table on
       the next line, and Add Lead full-width below it. All evenly spaced. */
    .ptx-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: .6rem;
    }
    .ptx-toolbar-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        gap: .6rem;
        width: 100%;
    }
    .ptx-toolbar-actions > .btn,
    .ptx-toolbar-actions .view-toggle .btn {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        white-space: nowrap;
        height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    /* Board / Table share one line, Add Lead wraps full-width below */
    .ptx-toolbar-actions .view-toggle {
        display: flex;
        gap: .6rem;
        flex: 1 1 100% !important;
        width: auto !important;
    }
    .ptx-toolbar-actions > .btn {
        flex: 1 1 100% !important;
    }
    .ptx-toolbar-actions .view-toggle .btn {
        min-width: 0 !important;
    }

    /* Select2 filters: full width + right height on mobile */
    .card .select2-container, .select2-container { width: 100% !important; }
    .select2-container .select2-selection--single {
        height: 44px !important;
        border-radius: 8px !important;
    }
    .select2-container .select2-selection--single .select2-selection__rendered {
        line-height: 44px !important;
        padding-left: 12px !important;
    }
    .select2-container .select2-selection--single .select2-selection__arrow {
        height: 44px !important;
    }

    /* Modal footer (Save / Cancel etc.): buttons split equally side by side */
    .modal-footer {
        flex-wrap: wrap;
        gap: .5rem !important;
    }
    .modal-footer .btn {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        width: auto !important;
        margin-left: 0 !important;
    }

    /* Stat boxes / summary chips wrap cleanly */
    .ptx-stats, .stat-box, .summary-box { gap: .5rem !important; }
}

@media (max-width: 480px) {
    .form-control, .form-select { height: 46px; }
    .card-body { padding: .9rem !important; }
    #main.main, main { padding-left: 8px !important; padding-right: 8px !important; }
}

/* ============================================================
   Tab / pill bars on mobile → a single swipeable row of chips
   (employee setup + settings). Instead of wrapping into messy
   multi-line pills, they scroll horizontally and stay tidy.
   ============================================================ */
@media (max-width: 767.98px) {
    .ptx-setup-tabs,
    .ptx-settings-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin-left: -0.25rem;
        padding-left: .25rem;
    }
    .ptx-setup-tabs::-webkit-scrollbar,
    .ptx-settings-tabs::-webkit-scrollbar { display: none; }

    .ptx-setup-tabs .nav-item,
    .ptx-settings-tabs .nav-item { flex: 0 0 auto; }

    .ptx-setup-tabs .nav-link,
    .ptx-settings-tabs .nav-link {
        white-space: nowrap;
        margin-bottom: 0;
    }

    /* settings nav-tabs → look like rounded chips on mobile */
    .ptx-settings-tabs {
        border-bottom: 0;
        gap: .5rem;
    }
    .ptx-settings-tabs .nav-link {
        border: 1px solid #e4e8f2;
        border-radius: 20px;
        padding: .45rem 1rem;
    }
    .ptx-settings-tabs .nav-link.active {
        background: #0a0c3e;
        border-color: #0a0c3e;
        color: #fff;
    }
    .ptx-settings-tabs .nav-link:not(.active):hover {
        background: #f4ecf7;
        color: #0a0c3e;
    }
}

/* ============================================================
   Setup & Settings section switcher — mobile-first:
   the dropdown (ptx-tab-select) is shown and the pill/tab bar
   (ptx-tab-bar) is HIDDEN by default. These are top-level base
   rules (no media query), so the bar can never appear on a phone
   no matter how a viewport/media-query is evaluated. Only once we
   reach tablets+ do we swap to the pill/tab bar and hide the
   dropdown.
   ============================================================ */
.ptx-tab-select { display: block; }
.ptx-tab-bar    { display: none !important; }

@media (min-width: 768px) {
    .ptx-tab-select { display: none !important; }
    .ptx-tab-bar    { display: flex !important; }
}

/* ============================================================
   Notifications (navbar bell dropdown + notifications page)
   ============================================================ */
.ptx-nav-unread { background: #f4f2fb; border-left: 3px solid #6f42c1; }

.ptx-notifications-list .pty-notification-item { padding: 1rem 1.15rem; }
.ptx-notification-unread { background: #faf8ff; border-left: 3px solid #6f42c1; }
.ptx-notification-icon {
    width: 40px; height: 40px; border-radius: 10px; flex: 0 0 40px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #f1edf9; color: #6f42c1; font-size: 1.1rem;
}
.ptx-notification-time { color: #98a2c3; margin-top: 2px; }
.ptx-notification-open .btn { white-space: nowrap; }

/* ============================================================
   Employee create/edit wizard � keep the step bar swipeable
   on phones instead of wrapping onto messy multi-line pills.
   ============================================================ */
@media (max-width: 767.98px) {
    .ptx-wizard-nav {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        justify-content: flex-start !important;
        padding: 10px 12px !important;
        gap: 8px !important;
    }
    .ptx-wizard-nav .wizard-step {
        flex: 0 0 auto !important;
        padding: 8px 10px !important;
        font-size: .8rem;
    }
    .ptx-wizard-nav::-webkit-scrollbar { display: none; }
    .ptx-wizard-nav .wizard-step .step-num {
        width: 22px; height: 22px; font-size: .72rem;
    }
}

/* ============================================================
   Admin form pages (col-sm-N label + col-sm-N field rows) on
   phones/tablets: kill the big empty gaps. On <=768px these
   `col-sm-*` admin forms render as a narrow 2-col label + 4-col
   field, leaving the rest of the row empty. We stack label above
   field and let the field own the full row width, and compact the
   label to hug the field (same as .form-label).
   ============================================================ */
/* Leads toolbar: title + actions. Desktop = two things on one row. */
@media (min-width: 768px) {
    .ptx-toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
    }
    .ptx-toolbar .ptx-title { margin-bottom: 0; white-space: nowrap; }
    .ptx-toolbar-actions {
        display: flex;
        align-items: center;
        gap: .6rem;
    }
    .ptx-toolbar-actions .view-toggle {
        display: flex;
        align-items: center;
        gap: .6rem;
    }
    .ptx-toolbar-actions .view-toggle .btn {
        white-space: nowrap;
    }
}

@media (max-width: 767.98px) {
    label.col-form-label,
    label[class*="col-sm-"].col-form-label {
        padding: 0 !important;
        margin-bottom: .3rem !important;
        font-size: .78rem;
        font-weight: 600;
        color: #56607a;
        line-height: 1.3;
    }

    /* Narrow admin form columns (label + field) expand to the full row width so
       there is no trailing empty space (the row is one label + one field). Leave
       real two-up columns (col-sm-6/col-md-*) alone. */
    form .col-sm-1, form .col-sm-2, form .col-sm-3, form .col-sm-4, form .col-sm-5,
    .ptx-form .col-sm-1, .ptx-form .col-sm-2, .ptx-form .col-sm-3, .ptx-form .col-sm-4, .ptx-form .col-sm-5 {
        -webkit-box-flex: 0 !important;
        -ms-flex: 0 0 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* ============================================================
   Align admin create/edit form pages with list-page density.
   Editors use <div class="card-body p-2"><form class="p-4">,
   which stacks to ~2rem of inner padding. Pull it back to a
   tighter list-page feel on both mobile and web.
   ============================================================ */
.card-body.p-2 > form.p-4,
.card-body.p-2 form.p-4 { padding: 1rem 1rem 1.25rem !important; }

/* Wizard step headings: no huge blocks of white space between sections */
h4.text-center.p-4 { padding: .75rem .5rem 1rem !important; }

/* Preview & Submit wizard step: the nested card-body stacks its padding on the
   form padding, doubling the inner whitespace vs other steps. Tighten it. */
.wizard-step[data-step="7"] > .px-3 { padding-left: 0 !important; padding-right: 0 !important; margin-bottom: 0 !important; }
.wizard-step[data-step="7"] .ptx-filter-card .card-body { padding: 1rem 1rem .75rem !important; }
.wizard-step[data-step="7"] h4.text-center.p-4 { padding: .5rem .5rem .9rem !important; }
.wizard-step[data-step="7"] .ptx-filter-card #previewDocs, 
.wizard-step[data-step="7"] .ptx-filter-card #previewDocList { margin-top: 0 !important; }