/* ============================================================
   Pitchmark client dashboard — responsive overrides
   All rules are scoped to .account-content-dashboard-box so
   nothing here affects other pages on the site.
   ============================================================ */

/* ---------- iPad / tablet (≤ 991px) ---------- */
@media (max-width: 991.98px) {

    .account-content-dashboard-box .container,
    .account-content-dashboard-box {
        padding-left: 16px;
        padding-right: 16px;
    }

    .account-content-dashboard-box h1 {
        font-size: 28px;
        line-height: 1.25;
    }

    .account-content-dashboard-box .lead {
        font-size: 14px;
    }

    /* Modal looks crowded on tablet otherwise */
    .account-content-dashboard-box .modal-dialog.modal-lg {
        max-width: 92%;
    }
}

/* ---------- Mobile (≤ 767px) ---------- */
@media (max-width: 767.98px) {

    /* Container breathing room */
    .account-content-dashboard-box .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Headings */
    .account-content-dashboard-box h1 { font-size: 24px; }
    .account-content-dashboard-box h2 { font-size: 20px; }
    .account-content-dashboard-box h3 { font-size: 18px; }
    .account-content-dashboard-box h4 { font-size: 17px; line-height: 1.3; word-break: break-word; }
    .account-content-dashboard-box h5 { font-size: 15px; }

    .account-content-dashboard-box .lead {
        font-size: 13px;
    }

    /* --- Section headers (title + button on the right) ---
       Pattern: <div class="d-flex justify-content-between align-items-center">
                  <h4>Title</h4>
                  <button>Action</button>
                </div>
       On mobile, button overflows. Stack vertically. */
    .account-content-dashboard-box .account-module > .d-flex.justify-content-between,
    .account-content-dashboard-box .modal-header.d-flex {
        flex-direction: column;
        align-items: flex-start !important;
    }

    .account-content-dashboard-box .account-module > .d-flex.justify-content-between > .btn,
    .account-content-dashboard-box .account-module > .d-flex.justify-content-between > a.btn,
    .account-content-dashboard-box .account-module > .d-flex.justify-content-between > .header___btn {
        margin-top: 8px;
        width: 100%;
        white-space: normal;
    }

    /* --- Withdrawal-method popup rows ("method-box") ---
       Stack icon+text and the Set up/Coming Soon button vertically. */
    .account-content-dashboard-box .method-box.d-flex {
        flex-direction: column;
        align-items: flex-start !important;
    }
    .account-content-dashboard-box .method-box .method-left {
        margin-bottom: 12px;
        width: 100%;
    }
    .account-content-dashboard-box .method-box .header___btn,
    .account-content-dashboard-box .method-box .btn {
        width: 100%;
    }

    /* --- API token block (account-api-access.php) ---
       Stack token and Copy button vertically so the hex string has
       room and Copy stays tappable. */
    .account-content-dashboard-box #apiAccessSection .d-flex.justify-content-between {
        flex-direction: column;
        align-items: stretch !important;
    }
    .account-content-dashboard-box #apiAccessSection #copyApiTokenBtn {
        margin-top: 10px;
        width: 100%;
    }
    .account-content-dashboard-box #apiAccessSection #apiTokenValue {
        font-size: 12px;
    }

    /* --- Modals on the dashboard: hug the viewport on mobile --- */
    .account-content-dashboard-box .modal-dialog,
    .account-content-dashboard-box .modal-dialog.modal-lg,
    .account-content-dashboard-box .modal-dialog.modal-wide {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }

    .account-content-dashboard-box .modal-body {
        padding: 12px;
    }

    /* --- Tables in the dashboard ---
       Convert each row into a stacked card on mobile so users
       don't have to scroll horizontally to read content. --- */
    .account-content-dashboard-box table,
    .account-content-dashboard-box .modal-body table {
        display: block;
        overflow: visible !important;
        max-width: 100%;
        white-space: normal;
        box-shadow: none;
        border: none;
    }

    /* Hide table headers — labels are added via :before on cells */
    .account-content-dashboard-box table > thead {
        display: none;
    }

    /* Cancel explicit colgroup widths from <col width="30%"> etc. */
    .account-content-dashboard-box table > colgroup {
        display: none;
    }

    /* Body, rows, cells all become block elements */
    .account-content-dashboard-box table > tbody {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .account-content-dashboard-box table > tbody > tr {
        display: block;
        margin-bottom: 12px;
        padding: 12px 14px;
        border: 1px solid #e5e5e5;
        border-radius: 8px;
        background: #fff;
    }

    /* Subtle zebra striping preserved as card backgrounds */
    .account-content-dashboard-box table.table-striped > tbody > tr:nth-of-type(odd) {
        background: #fafafa;
    }

    .account-content-dashboard-box table > tbody > tr > td {
        display: block;
        padding: 6px 0;
        border: none;
        white-space: normal;
        text-align: left !important;
        font-size: 13px;
        word-break: break-word;
        vertical-align: top;
    }

    /* Label each cell with the column name via pseudo-element */
    .account-content-dashboard-box table > tbody > tr > td::before {
        content: attr(data-label);
        display: block;
        font-size: 10px;
        font-weight: 700;
        color: #888;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 2px;
    }

    /* Files table (.t2) — Latest Uploads */
    .account-content-dashboard-box table.t2 > tbody > tr > td:nth-of-type(1)::before { content: "Certificate ID"; }
    .account-content-dashboard-box table.t2 > tbody > tr > td:nth-of-type(2)::before { content: "Content"; }
    .account-content-dashboard-box table.t2 > tbody > tr > td:nth-of-type(3)::before { content: "Offers Sent"; }
    .account-content-dashboard-box table.t2 > tbody > tr > td:nth-of-type(4)::before { content: ""; margin: 0; }

    /* Action button cell (4th col in files table) — center, breathe a bit */
    .account-content-dashboard-box table.t2 > tbody > tr > td:nth-of-type(4) {
        text-align: center !important;
        margin-top: 6px;
    }

    /* Payments Received table — 7 columns */
    .account-content-dashboard-box table.mt-4:not(.t2) > tbody > tr > td:nth-of-type(1)::before { content: "ID"; }
    .account-content-dashboard-box table.mt-4:not(.t2) > tbody > tr > td:nth-of-type(2)::before { content: "Gateway"; }
    .account-content-dashboard-box table.mt-4:not(.t2) > tbody > tr > td:nth-of-type(3)::before { content: "Amount Received"; }
    .account-content-dashboard-box table.mt-4:not(.t2) > tbody > tr > td:nth-of-type(4)::before { content: "Offer"; }
    .account-content-dashboard-box table.mt-4:not(.t2) > tbody > tr > td:nth-of-type(5)::before { content: "Status"; }
    .account-content-dashboard-box table.mt-4:not(.t2) > tbody > tr > td:nth-of-type(6)::before { content: "Transaction ID"; }
    .account-content-dashboard-box table.mt-4:not(.t2) > tbody > tr > td:nth-of-type(7)::before { content: "Date"; }

    /* --- Forms inside the dashboard --- */
    .account-content-dashboard-box form .form-control {
        font-size: 14px;
    }

    /* --- Long inline buttons inside flex headers --- */
    .account-content-dashboard-box .header___btn {
        white-space: normal;
        word-wrap: break-word;
    }

    /* --- Section headers with float-right action buttons
       (e.g. "LATEST UPLOADS [Generate] [View all]" using
       Bootstrap 3 .pull-right). On mobile, drop them below the
       title rather than floating awkwardly. --- */
    .account-content-dashboard-box h3 .pull-right,
    .account-content-dashboard-box h4 .pull-right,
    .account-content-dashboard-box h5 .pull-right,
    .account-content-dashboard-box .pull-right {
        float: none !important;
        display: block;
        text-align: left;
        margin-top: 8px;
    }

    .account-content-dashboard-box h3 .pull-right .header___btn,
    .account-content-dashboard-box h4 .pull-right .header___btn,
    .account-content-dashboard-box h5 .pull-right .header___btn,
    .account-content-dashboard-box h3 .pull-right .btn,
    .account-content-dashboard-box h4 .pull-right .btn,
    .account-content-dashboard-box h5 .pull-right .btn {
        display: inline-block;
        margin: 0 6px 6px 0;
        white-space: normal;
        font-size: 12px;
        padding: 6px 10px;
    }
}

/* ---------- Small phones (≤ 480px) ---------- */
@media (max-width: 480px) {

    .account-content-dashboard-box h1 {
        font-size: 22px;
    }

    .account-content-dashboard-box .modal-header h3 {
        font-size: 18px;
    }

    /* Reduce code/monospace fonts further so long hex strings fit */
    .account-content-dashboard-box #apiAccessSection #apiTokenValue,
    .account-content-dashboard-box code {
        font-size: 11px;
    }

    /* Tighter padding inside cards/modules */
    .account-content-dashboard-box .account-module {
        padding-left: 0;
        padding-right: 0;
    }

    .account-content-dashboard-box .modal-body {
        padding: 10px;
    }
}