/* ==========================================================================
   Split-screen responsiveness
   Users keep the ERP in half of a laptop screen (~640-960 CSS px) next to
   government portals. Soft UI only goes compact below 1200px, so these rules
   tighten the shell and adapt components to the width they actually get.
   Loaded after custom.css. Desktop (>= 1200px) is intentionally untouched.
   ========================================================================== */

:root {
    --page-gutter: 1.5rem;
}

/* ---------- 1. Global shell ---------------------------------------------- */

@media (max-width: 1199.98px) {
    :root {
        --page-gutter: 0.5rem;
    }

    /* Page padding: Soft UI uses px-4 / py-4 + mx-4 cards which waste ~64px. */
    .main-content > .container-fluid {
        padding-left: var(--page-gutter);
        padding-right: var(--page-gutter);
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }

    .main-content .card.mx-4,
    .main-content .row.mx-4,
    .main-content .row.mx-2,
    .main-content .mx-4:not(.navbar) {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .main-content .navbar-main {
        margin-left: var(--page-gutter) !important;
        margin-right: var(--page-gutter) !important;
    }

    .main-content .card-body.p-4 {
        padding: 0.75rem !important;
    }

    /* Page titles scale with the window. */
    .main-content h5 { font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.25rem); }
    .main-content h6 { font-size: clamp(0.85rem, 0.8rem + 0.3vw, 1rem); }

    /* Buttons and badges must never break letter by letter. */
    .main-content .btn,
    .main-content .badge {
        white-space: nowrap;
    }
    .main-content .badge {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* Breadcrumb + title take a full row on narrow windows; keep it to one line. */
@media (max-width: 991.98px) {
    .main-content .navbar-main .breadcrumb {
        display: none;
    }
}

/* ---------- 2. Tickets list ---------------------------------------------- */

/* Filter bar */
@media (max-width: 1199.98px) {
    #ticketsFilterForm .form-label {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
}

/* Stage pills: wrap onto compact rows so every stage stays visible. */
@media (max-width: 991.98px) {
    .tickets-stage-pills .btn {
        padding: 0.3rem 0.6rem;
        font-size: 0.7rem;
        margin-bottom: 0.25rem;
    }
    .tickets-stage-pills .tickets-stage-pills__label {
        flex: 0 0 100%;
        margin-bottom: 0.25rem;
    }
}

/* The list reacts to the space it actually has, not the screen width. */
.tickets-list {
    container: tickets-list / inline-size;
}

.tickets-table {
    width: 100%;
    table-layout: auto;
}
.tickets-table th {
    white-space: nowrap;
}
.tickets-table td {
    white-space: normal; /* Soft UI forces nowrap on .table td */
    overflow-wrap: anywhere;
}
.tickets-table .tk-no { min-width: 9.5rem; }
.tickets-table .tk-client { min-width: 8rem; }
.tickets-table .tk-services { min-width: 12rem; }
.tickets-table .tk-amount { min-width: 6.5rem; }
.tickets-table .tk-status { min-width: 6.5rem; }
.tickets-table .tk-date { white-space: nowrap; min-width: 5.5rem; }
.tickets-table .tk-action { white-space: nowrap; width: 1%; }
.tickets-table .tk-no .badge { max-width: 100%; }
.tickets-table .tk-meta {
    display: block;
    line-height: 1.5;
}
.tickets-table .tk-date__time {
    display: block;
}

/* Medium: icon-only action, tighter cells. */
@container tickets-list (max-width: 1100px) {
    .tickets-table .tk-action .tk-btn-label { display: none; }
    .tickets-table .tk-action .btn i { margin-right: 0 !important; }
    .tickets-table thead th { white-space: normal; line-height: 1.2; }
    .tickets-table thead th,
    .tickets-table tbody td { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
    .tickets-table .tk-no { min-width: 8.5rem; }
    .tickets-table .tk-services { min-width: 10rem; }
}

/* Narrow: each ticket becomes a card. */
@container tickets-list (max-width: 880px) {
    .tickets-table,
    .tickets-table tbody {
        display: block;
        width: 100%;
        border: 0 !important;
    }
    .tickets-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    .tickets-table tbody tr.tk-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "no      status"
            "client  amount"
            "services services"
            "date    action";
        gap: 0.35rem 0.75rem;
        padding: 0.75rem;
        margin-bottom: 0.75rem;
        border: 1px solid #e9ecef !important;
        border-radius: 0.75rem;
        background: #fff;
    }
    .tickets-table tbody tr.tk-row > td {
        display: block;
        padding: 0 !important;
        min-width: 0 !important;
        width: auto !important;
        border: 0 !important;
        text-align: left !important;
    }
    .tk-row > .tk-no       { grid-area: no; }
    .tk-row > .tk-status   { grid-area: status; }
    .tk-row > .tk-client   { grid-area: client; }
    .tk-row > .tk-amount   { grid-area: amount; text-align: right !important; }
    .tk-row > .tk-services { grid-area: services; padding-top: 0.35rem !important; border-top: 1px dashed #e9ecef !important; }
    .tk-row > .tk-date     { grid-area: date; align-self: center; }
    .tk-row > .tk-action   { grid-area: action; justify-self: end; }

    .tk-row > .tk-status > div {
        flex-direction: row !important;
        flex-wrap: wrap;
        justify-content: flex-end;
    }
    .tk-row .tk-date__time { display: inline; margin-left: 0.25rem; }
    .tk-row > .tk-action .tk-btn-label { display: inline; }
    .tk-row > .tk-action .btn i { margin-right: 0.25rem !important; }

    /* "no results" row spans the card list. */
    .tickets-table tbody tr:not(.tk-row) { display: block; }
    .tickets-table tbody tr:not(.tk-row) > td { display: block; width: 100%; }
}

/* Pagination: wrap instead of overflowing. */
@media (max-width: 991.98px) {
    .tickets-pagination {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.5rem;
    }
    .tickets-pagination .pagination {
        flex-wrap: wrap;
        margin-bottom: 0;
    }
}

/* ---------- 3. Ticket show: service items ---------------------------------
   Eleven columns do not fit a half-screen window, so below ~900px each item
   becomes a card. Purely positional (nth-child) so the rows that JS appends
   after "Add service" get the same layout without extra markup.
   Cell order: 1 #, 2 service, 3 gov app, 4 URN, 5 gov, 6 typing,
   7 staff comm, 8 bank, 9 service fee, 10 VAT, 11 line total,
   12 delete (optional). */
.ticket-items-list {
    container: ticket-items / inline-size;
}

/* Long service names wrap instead of stretching the table */
#ticketServicesTable tbody td:nth-child(2) {
    white-space: normal;
    overflow-wrap: anywhere;
}
#ticketServicesTable tbody td:nth-child(2) h6 {
    line-height: 1.4;
}

@container ticket-items (max-width: 900px) {
    #ticketServicesTable,
    #ticketServicesTable tbody,
    #ticketServicesTable tfoot {
        display: block;
        width: 100%;
    }
    #ticketServicesTable thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }
    #ticketServicesTable tbody tr,
    #ticketServicesTable tfoot tr {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem 0.75rem;
        padding: 0.75rem;
        border-bottom: 1px solid #e9ecef;
        position: relative;
    }
    #ticketServicesTable tbody td,
    #ticketServicesTable tfoot th {
        display: block;
        padding: 0 !important;
        border: 0 !important;
        white-space: normal;
        min-width: 0;
        text-align: left !important;
    }
    #ticketServicesTable tbody td:nth-child(n+3):nth-child(-n+11)::before,
    #ticketServicesTable tfoot th:nth-child(n+2):nth-child(-n+8)::before {
        display: block;
        font-size: 0.62rem;
        font-weight: 700;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        color: #8392ab;
        margin-bottom: 0.1rem;
    }
    #ticketServicesTable tbody td:nth-child(3)::before { content: "Gov Application No."; }
    #ticketServicesTable tbody td:nth-child(4)::before { content: "URN Number"; }
    #ticketServicesTable tbody td:nth-child(5)::before { content: "Gov Fee"; }
    #ticketServicesTable tbody td:nth-child(6)::before { content: "Typing Fee"; }
    #ticketServicesTable tbody td:nth-child(7)::before { content: "Staff Comm"; }
    #ticketServicesTable tbody td:nth-child(8)::before { content: "Bank Fee"; }
    #ticketServicesTable tbody td:nth-child(9)::before { content: "Service Fee"; }
    #ticketServicesTable tbody td:nth-child(10)::before { content: "VAT 5%"; }
    #ticketServicesTable tbody td:nth-child(11)::before { content: "Line Total"; }

    /* Row 1: number, service name, delete */
    #ticketServicesTable tbody td:nth-child(1)  { order: 0; flex: 0 0 1.5rem; }
    #ticketServicesTable tbody td:nth-child(2)  { order: 1; flex: 1 1 calc(100% - 3rem); padding-right: 1.75rem !important; }
    #ticketServicesTable tbody td:nth-child(12) { position: absolute; top: 0.6rem; right: 0.6rem; }
    /* Row 2: identifiers */
    #ticketServicesTable tbody td:nth-child(3),
    #ticketServicesTable tbody td:nth-child(4)  { order: 3; flex: 1 1 40%; }
    /* Rows 3-4: fees, three per line */
    #ticketServicesTable tbody td:nth-child(n+5):nth-child(-n+10) { order: 4; flex: 1 1 28%; }
    /* Last row: total */
    #ticketServicesTable tbody td:nth-child(11) {
        order: 5;
        flex: 1 1 100%;
        padding-top: 0.35rem !important;
        border-top: 1px dashed #e9ecef !important;
        display: flex;
        justify-content: space-between;
        align-items: baseline;
    }
    #ticketServicesTable tbody td:nth-child(11)::before { margin-bottom: 0; }

    /* Totals footer */
    #ticketServicesTable tfoot th:nth-child(1) { flex: 1 1 100%; font-size: 0.75rem; }
    #ticketServicesTable tfoot th:nth-child(n+2):nth-child(-n+7) { flex: 1 1 28%; }
    #ticketServicesTable tfoot th:nth-child(8) { flex: 1 1 100%; }
    #ticketServicesTable tfoot th:nth-child(2)::before { content: "Gov Fee"; }
    #ticketServicesTable tfoot th:nth-child(3)::before { content: "Typing Fee"; }
    #ticketServicesTable tfoot th:nth-child(4)::before { content: "Staff Comm"; }
    #ticketServicesTable tfoot th:nth-child(5)::before { content: "Bank Fee"; }
    #ticketServicesTable tfoot th:nth-child(6)::before { content: "Service Fee"; }
    #ticketServicesTable tfoot th:nth-child(7)::before { content: "VAT 5%"; }
    #ticketServicesTable tfoot th:nth-child(8)::before { content: "Total"; }
    #ticketServicesTable tfoot th:nth-child(9) { display: none; }
}

/* ---------- 4. Generic stacked tables --------------------------------------
   <table class="table table-stack"> + split-screen.js (auto-labels cells).
   When a table does not fit its container every row becomes a card with
   "LABEL .... value" lines. */
.table-stack-wrap {
    container: table-stack / inline-size;
}

/* .is-stacked is set by split-screen.js when the table does not fit its container. */
    .table-stack.is-stacked,
    .table-stack.is-stacked tbody {
        display: block;
        width: 100% !important;
    }
    .table-stack.is-stacked thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }
    .table-stack.is-stacked tbody tr {
        display: block;
        margin-bottom: 0.6rem;
        padding: 0.4rem 0.75rem;
        border: 1px solid #e9ecef !important;
        border-radius: 0.65rem;
        background: #fff;
    }
    .table-stack.is-stacked tbody td {
        display: block;
        position: relative;
        padding: 0.4rem 0 0.4rem 40% !important;
        min-height: 1.9rem;
        border: 0 !important;
        border-bottom: 1px dashed #f0f2f5 !important;
        white-space: normal;
        text-align: left !important;
        width: auto !important;
        overflow-wrap: anywhere;
    }
    .table-stack.is-stacked tbody td:last-child { border-bottom: 0 !important; }
    .table-stack.is-stacked tbody td[data-label]::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        top: 0.55rem;
        width: 36%;
        font-size: 0.65rem;
        font-weight: 700;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        color: #8392ab;
    }
    .table-stack.is-stacked tbody td.stack-nolabel { padding-left: 0 !important; }
    .table-stack.is-stacked tbody tr.stack-full td { display: block; text-align: center !important; }

/* Slightly too wide: tighter padding is enough, no need for cards. */
.table-stack.is-compact thead th,
.table-stack.is-compact tbody td {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

/* Roomy but still too narrow for the real table: two cards per row. */
@container table-stack (min-width: 640px) {
    .table-stack.is-stacked tbody {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.6rem;
    }
    .table-stack.is-stacked tbody tr { margin-bottom: 0; }
    .table-stack.is-stacked tbody tr.stack-full { grid-column: 1 / -1; }
    /* Opt-out: one card per row, e.g. line items where side-by-side cards read as one record. */
    .table-stack.table-stack-single.is-stacked tbody { display: block; }
    .table-stack.table-stack-single.is-stacked tbody tr { margin-bottom: 0.6rem; }
}

/* Wide report tables: keep the columns, pin the first one while scrolling. */
@media (max-width: 1199.98px) {
    .table-sticky tbody td:first-child {
        position: sticky;
        left: 0;
        z-index: 1;
        background: #fff;
        box-shadow: 1px 0 0 #e9ecef;
    }
}