/**
 * Shared admin styling for the Purchase Ticket and Reports screens.
 *
 * Scoped to .wbbm-report-page / .wbbm-purchase-page so nothing here leaks into
 * the rest of wp-admin. Tokens mirror assets/admin/bus-configuration.css in the
 * free plugin so all three screens read as one product.
 */
:root {
    --wbbm-accent: #f97316;
    --wbbm-accent-dark: #ea580c;
    --wbbm-ink: #172033;
    --wbbm-muted: #64748b;
    --wbbm-line: #e2e8f0;
    --wbbm-soft: #f8fafc;
    --wbbm-danger: #dc2626;
    --wbbm-radius: 14px;
}

/* ---------------------------------------------------------------- masthead */
.wbbm-report-masthead,
.wbbm-purchase-masthead {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 0 0 18px;
    padding: 20px 24px;
    background: linear-gradient(135deg, #fff 0%, #fffaf6 100%);
    border: 1px solid var(--wbbm-line);
    border-radius: var(--wbbm-radius);
    box-shadow: 0 10px 30px rgba(15, 23, 42, .04);
}

.wbbm-report-mark,
.wbbm-purchase-mark {
    display: grid;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    place-items: center;
    color: #fff;
    background: var(--wbbm-accent);
    border-radius: 12px;
    box-shadow: 0 8px 18px rgba(249, 115, 22, .22);
}

.wbbm-report-mark .dashicons,
.wbbm-purchase-mark .dashicons {
    width: 24px;
    height: 24px;
    font-size: 24px;
}

.wbbm-report-masthead h1,
.wbbm-purchase-masthead h1 {
    margin: 0;
    padding: 0;
    color: var(--wbbm-ink);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
}

.wbbm-report-masthead p,
.wbbm-purchase-masthead p {
    margin: 4px 0 0;
    color: var(--wbbm-muted);
    font-size: 13px;
}

/* ------------------------------------------------------------ report shell */
.wbbm-report-page {
    margin: 20px 20px 0 0;
    color: var(--wbbm-ink);
}

.wbbm-report-page .wbbm_page_filter_wrapper,
.wbbm-report-page .wbbm_page_content_wrapper {
    margin-bottom: 18px;
    background: #fff;
    border: 1px solid var(--wbbm-line);
    border-radius: var(--wbbm-radius);
    box-shadow: 0 10px 30px rgba(15, 23, 42, .04);
}

.wbbm-report-page .wbbm_page_filter_inner {
    padding: 0;
    border: 0;
    box-shadow: none;
}

.wbbm-report-page .wbbm_page_filter_top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--wbbm-line);
}

.wbbm-report-page .wbbm_page_filter_top ul {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    gap: 6px;
    list-style: none;
}

.wbbm-report-page .wbbm_page_filter_top ul li {
    margin: 0;
}

.wbbm-report-page .wbbm_page_filter_top ul li a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 14px;
    color: var(--wbbm-muted);
    background: var(--wbbm-soft);
    border: 1px solid var(--wbbm-line);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: color .18s, background .18s, border-color .18s;
}

.wbbm-report-page .wbbm_page_filter_top ul li a:hover,
.wbbm-report-page .wbbm_page_filter_top ul li a:focus {
    color: var(--wbbm-accent-dark);
    background: #fff;
    border-color: var(--wbbm-accent);
    outline: none;
}

.wbbm-report-page .wbbm_page_filter_top ul li.filter_active a {
    color: #fff;
    background: var(--wbbm-accent);
    border-color: var(--wbbm-accent);
}

.wbbm-report-page .wbbm_page_filter_bottom {
    padding: 18px 20px;
}

.wbbm-report-page .sec-label {
    display: block;
    margin-bottom: 10px;
    color: var(--wbbm-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.wbbm-report-page .wbbm-form-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
}

.wbbm-report-page .wbbm-field-group {
    display: flex;
    flex: 1 1 190px;
    flex-direction: column;
    min-width: 0;
    gap: 6px;
}

.wbbm-report-page .wbbm-field-group label {
    color: var(--wbbm-muted);
    font-size: 12px;
    font-weight: 600;
}

.wbbm-report-page .wbbm-field-group select,
.wbbm-report-page .wbbm-field-group input {
    box-sizing: border-box;
    width: 100%;
    min-height: 42px;
    margin: 0;
    padding: 8px 12px;
    color: var(--wbbm-ink);
    background: var(--wbbm-soft);
    border: 1px solid var(--wbbm-line);
    border-radius: 8px;
    box-shadow: none;
}

.wbbm-report-page .wbbm-field-group select:focus,
.wbbm-report-page .wbbm-field-group input:focus {
    background: #fff;
    border-color: var(--wbbm-accent);
    box-shadow: 0 0 0 2px rgba(249, 115, 22, .12);
    outline: none;
}

.wbbm-report-page .wbbm-field-group .filter_active {
    background: #fff;
    border-color: var(--wbbm-accent);
}

/* --------------------------------------------------------------- buttons */
.wbbm-report-page .wbbm_btn_new,
.wbbm-purchase-page .wbbm-button {
    display: inline-flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 9px 18px;
    gap: 7px;
    color: #fff;
    background: var(--wbbm-accent);
    border: 1px solid var(--wbbm-accent);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    text-decoration: none;
    cursor: pointer;
    transition: background .18s, border-color .18s, transform .18s;
}

.wbbm-report-page .wbbm_btn_new:hover,
.wbbm-report-page .wbbm_btn_new:focus {
    color: #fff;
    background: var(--wbbm-accent-dark);
    border-color: var(--wbbm-accent-dark);
    transform: translateY(-1px);
}

.wbbm-report-page .reset-filter {
    color: var(--wbbm-ink);
    background: #fff;
    border-color: var(--wbbm-line);
}

.wbbm-report-page .reset-filter:hover,
.wbbm-report-page .reset-filter:focus {
    color: var(--wbbm-accent-dark);
    background: #fff;
    border-color: var(--wbbm-accent);
}

.wbbm-report-page :focus-visible {
    outline: 3px solid rgba(249, 115, 22, .28);
    outline-offset: 2px;
}

/* ----------------------------------------------------------- summary bar */
.wbbm-report-page .wbbm-report-heading {
    margin: 0;
    padding: 16px 20px 0;
    color: var(--wbbm-ink);
    font-size: 14px;
    font-weight: 700;
}

.wbbm-report-page .wbbm-table-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 20px;
}

.wbbm-report-page .wbbm-table-top .left {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.wbbm-report-page .wbbm-table-top .item {
    display: flex;
    flex-direction: column;
    min-width: 130px;
    padding: 12px 16px;
    gap: 4px;
    background: var(--wbbm-soft);
    border: 1px solid var(--wbbm-line);
    border-radius: 10px;
}

.wbbm-report-page .wbbm-table-top .item strong {
    color: var(--wbbm-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.wbbm-report-page .wbbm-table-top .item span {
    color: var(--wbbm-ink);
    font-size: 20px;
    font-weight: 700;
}

/* ---------------------------------------------------------------- table */
.wbbm-report-page .wbbm-main-table {
    width: 100%;
    border: 0;
    border-collapse: collapse;
}

.wbbm-report-page .wbbm-main-table > thead > tr > th {
    padding: 14px 20px;
    color: var(--wbbm-muted);
    background: #fbfdff;
    border-top: 1px solid var(--wbbm-line);
    border-bottom: 1px solid var(--wbbm-line);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-align: left;
    text-transform: uppercase;
}

.wbbm-report-page .wbbm-main-table > tbody > tr > td {
    padding: 16px 20px;
    color: #334155;
    border-bottom: 1px solid var(--wbbm-line);
    vertical-align: middle;
}

.wbbm-report-page .wbbm-main-table > tbody > tr:hover > td {
    background: #fffdfb;
}

.wbbm-report-page .wbbm_amount_raw {
    font-weight: 700;
}

.wbbm-report-page .wbbm_amount_down {
    color: #c36182;
}

.wbbm-report-page .wbbm_amount_total td {
    font-weight: 700;
}

.wbbm-report-page .wbbm_report_amount {
    width: auto;
    border-collapse: collapse;
}

.wbbm-report-page .wbbm_report_amount td {
    padding: 2px 6px 2px 0;
    border: 0;
    font-size: 12px;
}

.wbbm-report-page .wbbm-status {
    display: inline-flex;
    padding: 5px 10px;
    color: #475569;
    background: #f1f5f9;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.wbbm-report-page .wbbm-status-completed,
.wbbm-report-page .wbbm-status-processing {
    color: #047857;
    background: #ecfdf5;
}

.wbbm-report-page .wbbm-status-on-hold,
.wbbm-report-page .wbbm-status-pending {
    color: #b45309;
    background: #fffbeb;
}

.wbbm-report-page .wbbm-status-cancelled,
.wbbm-report-page .wbbm-status-failed,
.wbbm-report-page .wbbm-status-refunded {
    color: var(--wbbm-danger);
    background: #fef2f2;
}

.wbbm-report-page .wbbm_detail_inside {
    min-height: 34px;
    padding: 6px 12px;
    color: var(--wbbm-ink);
    background: #fff;
    border: 1px solid var(--wbbm-line);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: color .18s, border-color .18s;
}

.wbbm-report-page .wbbm_detail_inside:hover {
    color: var(--wbbm-accent-dark);
    border-color: var(--wbbm-accent);
}

.wbbm-report-page .wbbm_report_loading {
    display: none;
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

/* ----------------------------------------------------------- empty state */
.wbbm-report-page .wbbm-report-empty-row td {
    padding: 0;
}

.wbbm-report-page .wbbm_no_data_found {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 54px 20px;
    gap: 6px;
    color: var(--wbbm-muted);
    text-align: center;
}

.wbbm-report-page .wbbm_no_data_found .dashicons {
    width: 32px;
    height: 32px;
    color: var(--wbbm-line);
    font-size: 32px;
}

.wbbm-report-page .wbbm_no_data_found strong {
    color: var(--wbbm-ink);
    font-size: 15px;
}

/* ------------------------------------------------------ purchase ticket */
.wbbm-purchase-page {
    margin: 20px 20px 0 0;
    color: var(--wbbm-ink);
}

.wbbm-purchase-page .wbbm-search-form-sec {
    margin-bottom: 18px;
    padding: 20px;
    background: #fff;
    border: 1px solid var(--wbbm-line);
    border-radius: var(--wbbm-radius);
    box-shadow: 0 10px 30px rgba(15, 23, 42, .04);
}

.wbbm-purchase-page .search-fields {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
}

.wbbm-purchase-page .search-fields .fields-li {
    flex: 1 1 190px;
    min-width: 0;
}

.wbbm-purchase-page .search-fields label {
    display: block;
    color: var(--wbbm-muted);
    font-size: 12px;
    font-weight: 600;
}

.wbbm-purchase-page .search-fields label .fa {
    margin-right: 4px;
    color: var(--wbbm-accent);
}

.wbbm-purchase-page .search-fields input[type="text"],
.wbbm-purchase-page .search-fields select {
    box-sizing: border-box;
    width: 100%;
    min-height: 42px;
    margin-top: 6px;
    padding: 8px 12px;
    color: var(--wbbm-ink);
    background: var(--wbbm-soft);
    border: 1px solid var(--wbbm-line);
    border-radius: 8px;
}

.wbbm-purchase-page .search-fields input[type="text"]:focus,
.wbbm-purchase-page .search-fields select:focus {
    background: #fff;
    border-color: var(--wbbm-accent);
    box-shadow: 0 0 0 2px rgba(249, 115, 22, .12);
    outline: none;
}

.wbbm-purchase-page .search-radio-sec {
    display: flex;
    margin-bottom: 8px;
    gap: 14px;
}

.wbbm-purchase-page .search-radio-sec label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--wbbm-ink);
    font-size: 13px;
}

.wbbm-purchase-page .search-fields button[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 9px 20px;
    gap: 7px;
    color: #fff;
    background: var(--wbbm-accent);
    border: 1px solid var(--wbbm-accent);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .18s, transform .18s;
}

.wbbm-purchase-page .search-fields button[type="submit"]:hover {
    background: var(--wbbm-accent-dark);
    transform: translateY(-1px);
}

.wbbm-purchase-page .mage-search-res-wrapper {
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--wbbm-line);
    border-radius: var(--wbbm-radius);
    box-shadow: 0 10px 30px rgba(15, 23, 42, .04);
}

.wbbm-purchase-page .mage-search-res-header {
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.wbbm-purchase-page .wbbm-purchase-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 54px 20px;
    gap: 6px;
    color: var(--wbbm-muted);
    text-align: center;
}

.wbbm-purchase-page .wbbm-purchase-empty .dashicons {
    width: 32px;
    height: 32px;
    color: var(--wbbm-line);
    font-size: 32px;
}

.wbbm-purchase-page .wbbm-purchase-empty strong {
    color: var(--wbbm-ink);
    font-size: 15px;
}

/* --------------------------------------------------------------- mobile */
@media screen and (max-width: 782px) {
    .wbbm-report-page,
    .wbbm-purchase-page {
        margin: 12px 12px 0 0;
    }

    .wbbm-report-page .wbbm-form-inner,
    .wbbm-purchase-page .search-fields {
        flex-direction: column;
        align-items: stretch;
    }

    .wbbm-report-page .wbbm-field-group,
    .wbbm-purchase-page .search-fields .fields-li {
        flex: 1 1 auto;
        width: 100%;
    }

    .wbbm-report-page .wbbm_btn_new,
    .wbbm-purchase-page .search-fields button[type="submit"] {
        width: 100%;
        min-height: 44px;
    }

    .wbbm-report-page .wbbm-table-top .item {
        flex: 1 1 45%;
    }

    /* Each row becomes a labelled card. */
    .wbbm-report-page .wbbm-main-table,
    .wbbm-report-page .wbbm-main-table > tbody,
    .wbbm-report-page .wbbm-main-table > tbody > tr,
    .wbbm-report-page .wbbm-main-table > tbody > tr > td {
        display: block;
        width: 100%;
    }

    .wbbm-report-page .wbbm-main-table > thead {
        position: absolute;
        overflow: hidden;
        clip: rect(1px, 1px, 1px, 1px);
        width: 1px;
        height: 1px;
    }

    .wbbm-report-page .wbbm-main-table > tbody > tr {
        margin: 12px;
        border: 1px solid var(--wbbm-line);
        border-radius: 10px;
    }

    .wbbm-report-page .wbbm-main-table > tbody > tr > td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 11px 14px;
        gap: 14px;
        text-align: right;
    }

    .wbbm-report-page .wbbm-main-table > tbody > tr > td::before {
        flex: 0 0 auto;
        color: var(--wbbm-muted);
        content: attr(data-label);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .04em;
        text-align: left;
        text-transform: uppercase;
    }

    .wbbm-report-page .wbbm-main-table > tbody > tr > td:last-child {
        border-bottom: 0;
    }

    .wbbm-report-page .wbbm-report-empty-row td,
    .wbbm-report-page .wbbm-report-empty-row td::before,
    .wbbm-report-page .wbbm_report_detail td::before {
        display: none;
    }

    .wbbm-report-page .wbbm-report-empty-row td {
        display: block;
    }

    .wbbm-report-page .wbbm_detail_inside {
        min-height: 44px;
    }
}

/* =========================================================================
   Overrides for the legacy admin_style.css palette (pink #f9e9e9, blue
   #1924c6, red #EA2330, green export). Those rules are global and load
   alongside this file, so each is answered here at higher specificity,
   scoped to .wbbm-report-page only.
   ========================================================================= */
.wbbm-report-page .wbbm_page_filter_inner {
    padding: 0;
    background: #fff;
    border: 0;
    border-radius: 0;
}

.wbbm-report-page .sec-label {
    position: static;
    padding: 0;
    background: none;
    color: var(--wbbm-muted);
    font-size: 12px;
}

/* Summary tiles: neutral, not solid blue. */
.wbbm-report-page .wbbm-table-top .left .item {
    margin: 0;
    padding: 12px 16px;
    color: var(--wbbm-ink);
    background: var(--wbbm-soft);
    border: 1px solid var(--wbbm-line);
    border-radius: 10px;
    box-shadow: none;
    line-height: 1.3;
}

.wbbm-report-page .wbbm-table-top .left strong {
    min-width: 0;
    color: var(--wbbm-muted);
    font-size: 11px;
    text-align: left;
}

.wbbm-report-page .wbbm-table-top .left span {
    color: var(--wbbm-ink);
    font-size: 20px;
}

/* Table head: neutral, not red. */
.wbbm-report-page table.wbbm-main-table th {
    padding: 14px 20px;
    color: var(--wbbm-muted) !important;
    background-color: #fbfdff;
    font-size: 12px;
}

/* Row striping: neutral, not pink. */
.wbbm-report-page table.wbbm-main-table tr:nth-child(even),
.wbbm-report-page table.wbbm-main-table tr:nth-child(odd) {
    background-color: transparent;
}

.wbbm-report-page .wbbm_page_wrapper .wbbm-main-table tbody tr:hover,
.wbbm-report-page .wbbm-main-table tbody tr:hover {
    background-color: #fffdfb !important;
}

.wbbm-report-page .wbbm_page_wrapper > table > tbody tr:last-child {
    background-color: transparent;
}

.wbbm-report-page .wbbm_page_wrapper table tbody td {
    padding: 16px 20px;
    color: #334155;
}

.wbbm-report-page .wbbm_page_wrapper label:not(.sec-label) {
    margin-bottom: 6px;
    color: var(--wbbm-muted);
    font-size: 12px;
    font-weight: 600;
    text-transform: none;
}

/* Export button: hub orange, not green. */
.wbbm-report-page .wbbm_outer_export_csv {
    padding: 9px 18px;
    background-color: var(--wbbm-accent);
    border-radius: 8px;
}

.wbbm-report-page .wbbm_outer_export_csv:hover {
    background-color: var(--wbbm-accent-dark);
}

/* The empty state sits on white, never the legacy pink. */
.wbbm-report-page .wbbm-report-empty-row,
.wbbm-report-page .wbbm-report-empty-row td {
    background: #fff !important;
}

/* =========================================================================
   Passenger list export dialog.
   ========================================================================= */
body.wbbm-export-open { overflow: hidden; }

.wbbm-export-modal {
    position: fixed;
    z-index: 100050;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.wbbm-export-modal[hidden] { display: none; }

.wbbm-export-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .45);
}

.wbbm-export-dialog {
    position: relative;
    z-index: 1;
    overflow: hidden;
    width: 100%;
    max-width: 520px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .28);
}

.wbbm-export-dialog header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 18px 20px;
    gap: 16px;
    background: linear-gradient(135deg, #fff 0%, #fffaf6 100%);
    border-bottom: 1px solid var(--wbbm-line);
}

.wbbm-export-dialog h2 {
    margin: 0;
    color: var(--wbbm-ink);
    font-size: 17px;
    font-weight: 700;
}

.wbbm-export-dialog header p {
    margin: 3px 0 0;
    color: var(--wbbm-muted);
    font-size: 12px;
}

.wbbm-export-close {
    display: grid;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    place-items: center;
    color: var(--wbbm-muted);
    background: #fff;
    border: 1px solid var(--wbbm-line);
    border-radius: 8px;
    cursor: pointer;
}

.wbbm-export-close:hover {
    color: var(--wbbm-danger);
    border-color: #fca5a5;
}

.wbbm-export-formats {
    display: flex;
    flex-direction: column;
    padding: 16px 20px;
    gap: 10px;
}

.wbbm-export-option { display: block; margin: 0; cursor: pointer; }

.wbbm-export-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.wbbm-export-option-body {
    display: flex;
    align-items: flex-start;
    padding: 12px 14px;
    gap: 12px;
    background: var(--wbbm-soft);
    border: 1px solid var(--wbbm-line);
    border-radius: 10px;
    transition: border-color .15s, background .15s;
}

.wbbm-export-option:hover .wbbm-export-option-body {
    background: #fff;
    border-color: var(--wbbm-accent);
}

.wbbm-export-option input:checked + .wbbm-export-option-body {
    background: #fff7ed;
    border-color: var(--wbbm-accent);
    box-shadow: 0 0 0 2px rgba(249, 115, 22, .14);
}

.wbbm-export-option input:focus-visible + .wbbm-export-option-body {
    outline: 3px solid rgba(249, 115, 22, .28);
    outline-offset: 2px;
}

.wbbm-export-option-body .dashicons {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    color: var(--wbbm-accent-dark);
    font-size: 22px;
}

.wbbm-export-option-text { display: flex; flex-direction: column; gap: 2px; }

.wbbm-export-option-text strong {
    color: var(--wbbm-ink);
    font-size: 14px;
}

.wbbm-export-option-text small {
    color: var(--wbbm-muted);
    font-size: 12px;
    line-height: 1.4;
}

.wbbm-export-dialog footer {
    display: flex;
    justify-content: flex-end;
    padding: 14px 20px;
    gap: 10px;
    background: var(--wbbm-soft);
    border-top: 1px solid var(--wbbm-line);
}

.wbbm-export-dialog footer .dashicons {
    width: 18px;
    height: 18px;
    margin-right: 6px;
    font-size: 18px;
    vertical-align: text-bottom;
}

@media screen and (max-width: 600px) {
    .wbbm-export-modal { padding: 12px; align-items: flex-end; }
    .wbbm-export-dialog { max-width: none; }
    .wbbm-export-dialog footer { flex-direction: column-reverse; }
    .wbbm-export-dialog footer .btn { width: 100%; }
}

/* Export scope: service and date range. */
.wbbm-export-scope {
    display: grid;
    padding: 16px 20px 0;
    gap: 12px;
    grid-template-columns: 1fr 1fr;
}

.wbbm-export-field { display: flex; flex-direction: column; gap: 5px; }

.wbbm-export-field[hidden] { display: none; }

.wbbm-export-field label {
    color: var(--wbbm-muted);
    font-size: 12px;
    font-weight: 600;
}

.wbbm-export-field select,
.wbbm-export-field input[type="date"] {
    box-sizing: border-box;
    width: 100%;
    min-height: 40px;
    padding: 8px 12px;
    color: var(--wbbm-ink);
    background: var(--wbbm-soft);
    border: 1px solid var(--wbbm-line);
    border-radius: 8px;
}

.wbbm-export-field select:focus,
.wbbm-export-field input[type="date"]:focus {
    background: #fff;
    border-color: var(--wbbm-accent);
    box-shadow: 0 0 0 2px rgba(249, 115, 22, .12);
    outline: none;
}

@media screen and (max-width: 600px) {
    .wbbm-export-scope { grid-template-columns: 1fr; }
}


/* ------------------------------------------------------------------
   Bookings screens: rules lifted from the PRO plugin's admin_style.css
   when the Bookings page moved into this plugin. Only the selectors these
   screens actually use came across -- the rest of that file styles
   PRO-only screens and stayed there.
   ------------------------------------------------------------------ */

.wbbm_page_wrapper .wbbm-main-table>tbody>tr .wbbm_bus_detail--report {
    position: relative;
}

.wbbm_report_detail_active {
    background: #bdbdbd;
}

.wbbm_bus_detail--report button {
    border: 1px solid rgb(59, 201, 124);
    padding: 5px 10px;
    color: #fff;
    cursor: pointer;
    width: max-content;
    background-color: rgb(59, 201, 124);
    border-radius: 5px;
    transition: 0.2s;
}

.wbbm_bus_detail--report button:hover {
    background-color: #0FA218;
    color: #fff;
    transition: 0.2s;
}

.wbbm_bus_detail--report button:nth-of-type(1) {
    margin-bottom: 1px;
}

#wbbm_report_table_main {
    width: 100%;
    overflow-x: auto;
}

.wbbm_download_btn {
    background-color: rgb(59, 201, 124);
    border-radius: 5px;
    border: 1px solid rgb(59, 201, 124);
    color: #fff;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    padding: 5px;
}

.wbbm_download_btn:hover {
    background-color: #0FA218;
    border-color: #0FA218;
    color: #fff;
}

.mage-pagination .mage_paginate_link {
    background: #0073aa;
    text-decoration: none;
    color: #fff;
    font-size: 19px;
    width: 33px;
    height: 31px;
    display: inline-block;
    text-align: center;
}

.wbbm-list-filters-card.mage-custom-filter-area {
    background: #ffffff !important;
    padding: 24px 24px 16px !important;
    border: 1px solid #e2e8f0 !important;
    border-top: none !important;
    border-radius: 0 0 12px 12px !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
    margin-bottom: 20px !important;
    display: block !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    max-height: 2000px !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform-origin: top !important;
    transform: scaleY(1) !important;
}

.wbbm-list-filters-card.mage-custom-filter-area.collapsed {
    max-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    opacity: 0 !important;
    border-bottom: 0 !important;
    transform: scaleY(0) !important;
    pointer-events: none !important;
}

.wbbm-list-filter-wrapper {
    width: 100%;
}

.sh-filter-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 12px;
}

@media (max-width: 1280px) {
    .sh-filter-grid {
            grid-template-columns: repeat(3, 1fr);
        }
}

@media (max-width: 900px) {
    .sh-filter-grid {
            grid-template-columns: repeat(2, 1fr);
        }
}

.sh-filter-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid #e2e8f0;
}

.sh-filter-left {
    display: flex;
    align-items: center;
}

.sh-filter-right {
    display: flex;
    gap: 16px;
    align-items: center;
}

.removed-passengers-link {
    font-size: 14px;
    color: #ef4444 !important;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    transition: all 0.2s;
    padding: 10px 16px;
    border-radius: 8px;
}

.removed-passengers-link:hover {
    background-color: #fef2f2 !important;
    color: #dc2626 !important;
}

.removed-passengers-link .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
}

@media (max-width: 900px) {
    .sh-filter-grid,
        .extra-filters-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        }
}

@media (max-width: 600px) {
    .wbbm-list-header,
        .wbbm-list-filters-card,
        .extra-filters-grid {
            padding: 14px !important;
        }

    .sh-filter-grid,
        .extra-filters-grid {
            grid-template-columns: minmax(0, 1fr) !important;
        }
}

.extra-filters-toggle-wrap {
    margin-top: 10px;
    margin-bottom: 0px;
}

.btn-extra-filters-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #f8fafc;
    border: 1px solid var(--sh-border);
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--sh-text-soft);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn-extra-filters-toggle:hover {
    background: #fff;
    border-color: var(--sh-primary);
    color: var(--sh-primary);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.btn-extra-filters-toggle .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
    line-height: 1;
}

.btn-extra-filters-toggle .toggle-icon {
    transition: transform 0.3s ease;
}

.extra-filters-grid {
    display: none;
    margin-top: 20px;
    padding: 24px;
    background: #fdfdff;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    animation: slideDownFade 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.sh-filter-grid {
    align-items: end;
}


/* Tokens and keyframes the rules above depend on. */

:root {
    --sh-primary: #f97316;
    --sh-border: #e2e8f0;
    --sh-text-soft: #64748b;
}

@keyframes slideDownFade {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ==================================================================
   Passenger List filter panel
   ------------------------------------------------------------------
   Scoped to .mage-custom-filter-area-outer, the wrapper only this
   screen renders, for two reasons: the Bus/Stop/Type list screens use
   the same .filter-group name for a quite different control (one
   bordered pill holding an icon and a borderless input), and
   wbbm-list-tables.css styles it that way with !important. This panel
   instead stacks a label above an ordinary field inside a grid, so it
   needs to out-specify that sheet without disturbing it.
   ================================================================== */

.wrap.wbbm-list-wrap.mage-custom-filter-area-outer .wbbm-list-filters-card {
    padding: 20px 22px 18px !important;
    margin-bottom: 16px;
    background: var(--sh-card-bg, #fff);
    border: 1px solid var(--sh-border, #e6e9ef);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

/* Must stay stronger than the card rule above, which is later in the
   cascade, or the Show/Hide Filters toggle cannot close the panel. */
.wrap.wbbm-list-wrap.mage-custom-filter-area-outer .wbbm-list-filters-card.collapsed {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    border-width: 0 !important;
}

.wrap.wbbm-list-wrap.mage-custom-filter-area-outer .wbbm-list-filter-wrapper {
    width: 100%;
}

/* ---- the field grid ---- */
.wrap.wbbm-list-wrap.mage-custom-filter-area-outer .sh-filter-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px 20px;
    align-items: end;
    margin: 0;
}

.wrap.wbbm-list-wrap.mage-custom-filter-area-outer .sh-filter-grid .filter-group {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    width: auto;
    height: auto;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.wrap.wbbm-list-wrap.mage-custom-filter-area-outer .sh-filter-grid .filter-group label {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--sh-text-soft, #64748b);
}

.wrap.wbbm-list-wrap.mage-custom-filter-area-outer .sh-filter-grid .filter-group .form-control {
    box-sizing: border-box !important;
    display: block;
    width: 100% !important;
    min-width: 0;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    border: 1px solid var(--sh-border, #e6e9ef) !important;
    border-radius: 8px !important;
    background-color: #fff !important;
    font-size: 13.5px !important;
    line-height: normal !important;
    color: var(--sh-text-main, #17203a) !important;
    box-shadow: none !important;
    transition: border-color .15s, box-shadow .15s;
}

.wrap.wbbm-list-wrap.mage-custom-filter-area-outer .sh-filter-grid .filter-group .form-control:focus {
    border-color: var(--sh-primary, #b30c3b) !important;
    box-shadow: 0 0 0 3px rgba(179, 12, 59, .12) !important;
    outline: none !important;
}

/* the chevron the list sheet paints sits flush without room reserved */
.wrap.wbbm-list-wrap.mage-custom-filter-area-outer .sh-filter-grid .filter-group select.form-control {
    padding-right: 30px !important;
    background-position: right 10px center !important;
}

/* ---- extra passenger filters ---- */
.wrap.wbbm-list-wrap.mage-custom-filter-area-outer .extra-filters-wrapper {
    margin-top: 18px;
}

.wrap.wbbm-list-wrap.mage-custom-filter-area-outer .extra-filters-toggle-wrap {
    margin: 0;
}

.wrap.wbbm-list-wrap.mage-custom-filter-area-outer .extra-filters-grid {
    margin-top: 14px !important;
    padding: 18px !important;
    border-top: 0;
}

/* ---- actions row ---- */
.wrap.wbbm-list-wrap.mage-custom-filter-area-outer .sh-filter-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--sh-border, #e6e9ef);
}

.wrap.wbbm-list-wrap.mage-custom-filter-area-outer .sh-filter-left {
    display: flex;
    align-items: center;
}

/* the link carries its own 10px/16px padding for its hover pill, so pull
   it back to the panel's left edge rather than letting it sit indented */
.wrap.wbbm-list-wrap.mage-custom-filter-area-outer .sh-filter-left .removed-passengers-link {
    margin-left: -16px;
}

.wrap.wbbm-list-wrap.mage-custom-filter-area-outer .sh-filter-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

@media screen and (max-width: 1200px) {
    .wrap.wbbm-list-wrap.mage-custom-filter-area-outer .sh-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media screen and (max-width: 782px) {
    .wrap.wbbm-list-wrap.mage-custom-filter-area-outer .sh-filter-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .wrap.wbbm-list-wrap.mage-custom-filter-area-outer .sh-filter-actions {
        align-items: stretch;
    }

    .wrap.wbbm-list-wrap.mage-custom-filter-area-outer .sh-filter-right {
        justify-content: flex-end;
    }
}