/*
 * PlayMeu Owner — Bookings V6
 * Phase 2A-R3
 * Scoped to .pm-owner-bookings-v6
 */

.pm-owner-bookings-v6{
    --ob-navy:#071336;
    --ob-text:#17233f;
    --ob-muted:#6c7890;
    --ob-border:#dfe5ee;
    --ob-panel:#fff;
    --ob-soft:#f6f8fb;
    --ob-danger:#b63247;
    width:100%;
    color:var(--ob-text);
}

.pm-ob-page-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    margin-bottom:14px;
}

.pm-ob-page-copy h1{
    margin:0;
    color:var(--ob-navy);
    font-size:24px;
    font-weight:800;
    line-height:1.18;
    letter-spacing:-.02em;
}

.pm-ob-page-copy p{
    margin:5px 0 0;
    color:var(--ob-muted);
    font-size:13px;
    line-height:1.45;
}

.pm-ob-page-actions{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    justify-content:flex-end;
}

.pm-ob-btn{
    min-height:36px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid #d6deea;
    border-radius:8px;
    background:#fff;
    color:#1b2945;
    padding:8px 12px;
    font:inherit;
    font-size:12px;
    font-weight:750;
    cursor:pointer;
    transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease,background .16s ease;
}

.pm-ob-btn:hover:not(:disabled){
    border-color:#aeb9cb;
    box-shadow:0 4px 13px rgba(15,32,68,.08);
}

.pm-ob-btn:active:not(:disabled){
    transform:translateY(1px);
}

.pm-ob-btn:focus-visible,
.pm-ob-search input:focus-visible,
.pm-ob-filters select:focus-visible,
.pm-ob-filters input:focus-visible,
.pm-ob-clear:focus-visible,
.pm-ob-close:focus-visible,
.pm-ob-receipt-thumb:focus-visible,
.pm-ob-receipt-close:focus-visible{
    outline:3px solid rgba(67,119,255,.22);
    outline-offset:2px;
}

.pm-ob-btn:disabled{
    opacity:.55;
    cursor:not-allowed;
}

.pm-ob-btn-primary{
    color:#fff;
    background:var(--ob-navy);
    border-color:var(--ob-navy);
}

.pm-ob-btn-primary:hover:not(:disabled){
    background:#0c1d4b;
    border-color:#0c1d4b;
}

.pm-ob-btn-danger{
    color:var(--ob-danger);
    border-color:#e9c4ca;
    background:#fff8f9;
}

.pm-ob-btn-small{
    min-height:31px;
    padding:6px 9px;
    font-size:10.5px;
}

.pm-ob-alert{
    margin:0 0 11px;
    border:1px solid;
    border-radius:9px;
    padding:9px 11px;
    font-size:11.5px;
    font-weight:650;
}

.pm-ob-alert-error{
    color:#9d2738;
    border-color:#efc7cd;
    background:#fff5f6;
}

.pm-ob-alert-success{
    color:#1b6643;
    border-color:#c3e1d1;
    background:#f2fbf6;
}

.pm-ob-kpis{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
    margin-bottom:12px;
}

.pm-ob-kpi{
    min-width:0;
    border:1px solid var(--ob-border);
    border-radius:10px;
    background:#fff;
    padding:12px 13px;
    box-shadow:0 1px 2px rgba(17,35,70,.025);
}

.pm-ob-kpi-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}

.pm-ob-kpi-head span{
    color:#627087;
    font-size:10.5px;
    font-weight:800;
}

.pm-ob-kpi-head i{
    width:27px;
    height:27px;
    display:grid;
    place-items:center;
    border-radius:8px;
    background:#f0f3f8;
    color:#52617b;
    font-style:normal;
    font-size:13px;
    font-weight:900;
}

.pm-ob-kpi > strong{
    display:block;
    margin-top:7px;
    color:var(--ob-navy);
    font-size:24px;
    font-weight:850;
    line-height:1;
    letter-spacing:-.03em;
}

.pm-ob-kpi > small{
    display:block;
    margin-top:5px;
    color:#8b96a9;
    font-size:9.5px;
    line-height:1.35;
}

.pm-ob-workspace{
    overflow:hidden;
    border:1px solid var(--ob-border);
    border-radius:10px;
    background:var(--ob-panel);
}

.pm-ob-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:10px;
    border-bottom:1px solid var(--ob-border);
    background:#fbfcfe;
}

.pm-ob-search{
    width:min(330px,34vw);
    min-width:210px;
    height:34px;
    display:flex;
    align-items:center;
    gap:7px;
    border:1px solid #d8e0eb;
    border-radius:8px;
    background:#fff;
    padding:0 10px;
    color:#7b8799;
}

.pm-ob-search input{
    width:100%;
    min-width:0;
    border:0;
    outline:0;
    background:transparent;
    color:#1c2943;
    font:inherit;
    font-size:11.5px;
}

.pm-ob-search input::placeholder{
    color:#9ca6b5;
}

.pm-ob-filters{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:7px;
    flex-wrap:wrap;
}

.pm-ob-filters select,
.pm-ob-filters input[type="date"]{
    height:34px;
    min-width:135px;
    border:1px solid #d8e0eb;
    border-radius:8px;
    background:#fff;
    color:#35435d;
    padding:0 9px;
    font:inherit;
    font-size:11px;
    font-weight:650;
}

.pm-ob-filters input[type="date"]{
    min-width:142px;
}

.pm-ob-clear{
    height:34px;
    border:0;
    background:transparent;
    color:#596b89;
    padding:0 6px;
    font:inherit;
    font-size:10.5px;
    font-weight:800;
    cursor:pointer;
}

.pm-ob-table-meta{
    min-height:36px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:8px 11px;
    border-bottom:1px solid #e6ebf2;
}

.pm-ob-table-meta strong{
    color:#33415b;
    font-size:10.5px;
}

.pm-ob-table-meta span{
    color:#8792a5;
    font-size:9.5px;
}

.pm-ob-table-wrap{
    width:100%;
    overflow-x:auto;
}

.pm-ob-table{
    width:100%;
    border-collapse:collapse;
    table-layout:auto;
    font-size:11px;
}

.pm-ob-table th{
    padding:8px 9px;
    border-bottom:1px solid #e4e9f1;
    background:#f8fafc;
    color:#7c889b;
    text-align:left;
    white-space:nowrap;
    font-size:9px;
    font-weight:850;
    letter-spacing:.055em;
    text-transform:uppercase;
}

.pm-ob-table td{
    padding:9px;
    border-bottom:1px solid #edf0f5;
    color:#3b4961;
    vertical-align:middle;
}

.pm-ob-table tbody tr:last-child td{
    border-bottom:0;
}

.pm-ob-table tbody tr:hover{
    background:#fbfcff;
}

.pm-ob-ref,
.pm-ob-player,
.pm-ob-when,
.pm-ob-payment-state{
    display:flex;
    flex-direction:column;
    gap:2px;
}

.pm-ob-ref{
    min-width:135px;
}

.pm-ob-ref strong,
.pm-ob-player strong,
.pm-ob-when strong{
    color:#182541;
    font-size:11px;
}

.pm-ob-ref span,
.pm-ob-player span,
.pm-ob-when span,
.pm-ob-payment-state small{
    color:#8b96a7;
    font-size:9px;
}

.pm-ob-courts{
    display:block;
    min-width:85px;
    max-width:150px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.pm-ob-amount{
    color:#1e2e4b;
    white-space:nowrap;
}

.pm-ob-badge{
    display:inline-flex;
    align-items:center;
    min-height:22px;
    border-radius:999px;
    padding:4px 7px;
    white-space:nowrap;
    font-size:9px;
    font-weight:850;
}

.pm-ob-badge-confirmed,
.pm-ob-badge-paid{
    color:#236847;
    background:#e8f7ee;
}

.pm-ob-badge-completed{
    color:#40536f;
    background:#edf1f6;
}

.pm-ob-badge-pending_payment,
.pm-ob-badge-unpaid,
.pm-ob-badge-pending{
    color:#8d5d0e;
    background:#fff3d8;
}

.pm-ob-badge-cancelled,
.pm-ob-badge-refunded{
    color:#a63748;
    background:#fff0f2;
}

.pm-ob-checkin{
    color:#68758a;
    white-space:nowrap;
    font-size:10px;
    font-weight:700;
}

.pm-ob-checkin-checked-in{
    color:#2b7050;
}

.pm-ob-checkin-partial{
    color:#866512;
}

.pm-ob-action-cell{
    text-align:right;
}

.pm-ob-loading,
.pm-ob-empty{
    min-height:230px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:30px;
    color:#78849a;
    font-size:11.5px;
}

.pm-ob-empty{
    flex-direction:column;
    gap:6px;
    text-align:center;
}

.pm-ob-empty-icon{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border-radius:11px;
    background:#f0f3f8;
    color:#53627c;
    font-size:18px;
    font-weight:900;
}

.pm-ob-empty strong{
    color:#263650;
    font-size:13px;
}

.pm-ob-empty span{
    max-width:470px;
    color:#8a95a7;
    font-size:10.5px;
    line-height:1.45;
}

.pm-ob-deferred-note{
    margin-top:8px;
    color:#8a95a7;
    font-size:9.5px;
    line-height:1.4;
}

.pm-ob-modal-backdrop{
    position:fixed;
    inset:0;
    z-index:2500;
    display:grid;
    place-items:center;
    padding:18px;
    background:rgba(4,13,35,.58);
    backdrop-filter:blur(2px);
}

.pm-ob-modal{
    width:min(940px,96vw);
    max-height:min(800px,92vh);
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border:1px solid #dbe2ed;
    border-radius:14px;
    background:#fff;
    box-shadow:0 28px 80px rgba(3,13,35,.28);
}

.pm-ob-modal-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:15px;
    padding:15px 17px 12px;
    border-bottom:1px solid #e5e9f0;
}

.pm-ob-kicker{
    color:#758299;
    font-size:8.5px;
    font-weight:850;
    letter-spacing:.12em;
}

.pm-ob-modal-head h2{
    margin:3px 0 0;
    color:var(--ob-navy);
    font-size:19px;
    line-height:1.2;
}

.pm-ob-modal-head p{
    margin:4px 0 0;
    color:#8490a4;
    font-size:10.5px;
}

.pm-ob-close{
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border:0;
    border-radius:8px;
    background:transparent;
    color:#68758b;
    font-size:25px;
    cursor:pointer;
}

.pm-ob-close:hover{
    background:#f2f5f9;
}

.pm-ob-modal-body{
    min-height:0;
    overflow:auto;
    padding:14px 17px 18px;
}

.pm-ob-detail-summary{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px;
}

.pm-ob-detail-summary > div,
.pm-ob-payment-grid > div{
    min-width:0;
    border:1px solid #e1e6ee;
    border-radius:9px;
    background:#fbfcfe;
    padding:9px 10px;
}

.pm-ob-detail-summary span,
.pm-ob-payment-grid span{
    display:block;
    color:#8692a5;
    font-size:8.5px;
    font-weight:800;
    letter-spacing:.04em;
    text-transform:uppercase;
}

.pm-ob-detail-summary strong,
.pm-ob-payment-grid strong{
    display:block;
    margin-top:4px;
    color:#23314b;
    overflow-wrap:anywhere;
    font-size:11px;
    line-height:1.4;
}

.pm-ob-detail-section{
    margin-top:14px;
}

.pm-ob-section-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:7px;
}

.pm-ob-section-head h3{
    margin:0;
    color:#25344f;
    font-size:12px;
}

.pm-ob-section-head span{
    color:#8b96a8;
    font-size:9.5px;
}

.pm-ob-schedule-list{
    display:grid;
    gap:7px;
}

.pm-ob-schedule{
    display:grid;
    grid-template-columns:minmax(150px,1fr) minmax(170px,1fr) minmax(105px,.55fr);
    gap:10px;
    align-items:center;
    border:1px solid #e2e7ef;
    border-radius:9px;
    background:#fff;
    padding:9px 10px;
}

.pm-ob-schedule > div{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:2px;
}

.pm-ob-schedule strong{
    color:#26354f;
    overflow-wrap:anywhere;
    font-size:10.5px;
}

.pm-ob-schedule span{
    color:#8994a6;
    font-size:9px;
}

.pm-ob-payment-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:7px;
}

.pm-ob-receipt-row{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:9px;
}

.pm-ob-receipt-thumb{
    width:74px;
    height:74px;
    flex:0 0 74px;
    display:grid;
    place-items:center;
    overflow:hidden;
    border:1px solid #dce3ec;
    border-radius:9px;
    background:#f6f8fb;
    padding:4px;
    cursor:zoom-in;
}

.pm-ob-receipt-thumb img{
    max-width:100%;
    max-height:100%;
    object-fit:contain;
}

.pm-ob-receipt-row > div{
    display:flex;
    flex-direction:column;
    gap:3px;
}

.pm-ob-receipt-row strong{
    color:#26354f;
    font-size:10.5px;
}

.pm-ob-receipt-row span{
    color:#8994a6;
    font-size:9.5px;
}

.pm-ob-modal-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    flex-wrap:wrap;
    padding:10px 17px;
    border-top:1px solid #e4e8ef;
    background:#fbfcfe;
}

.pm-ob-modal-actions .pm-ob-btn-danger{
    margin-right:auto;
}

.pm-ob-receipt-zoom{
    position:fixed;
    inset:0;
    z-index:2700;
    display:grid;
    place-items:center;
    padding:28px;
    background:rgba(1,8,24,.9);
}

.pm-ob-receipt-zoom img{
    max-width:min(1080px,94vw);
    max-height:90vh;
    object-fit:contain;
    border-radius:10px;
    box-shadow:0 20px 70px rgba(0,0,0,.36);
}

.pm-ob-receipt-close{
    position:fixed;
    top:18px;
    right:20px;
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    border:0;
    border-radius:999px;
    background:rgba(255,255,255,.12);
    color:#fff;
    font-size:27px;
    cursor:pointer;
}

@media (max-width:1180px){
    .pm-ob-toolbar{
        align-items:stretch;
        flex-direction:column;
    }

    .pm-ob-search{
        width:100%;
    }

    .pm-ob-filters{
        justify-content:flex-start;
    }
}

@media (max-width:900px){
    .pm-ob-kpis{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .pm-ob-detail-summary,
    .pm-ob-payment-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media (max-width:760px){
    .pm-ob-page-head{
        align-items:stretch;
        flex-direction:column;
    }

    .pm-ob-page-actions{
        justify-content:flex-start;
    }

    .pm-ob-filters{
        align-items:stretch;
        flex-direction:column;
    }

    .pm-ob-filters select,
    .pm-ob-filters input[type="date"]{
        width:100%;
        min-width:0;
    }

    .pm-ob-table-meta{
        align-items:flex-start;
        flex-direction:column;
        gap:3px;
    }

    .pm-ob-table-wrap{
        overflow:visible;
    }

    .pm-ob-table,
    .pm-ob-table tbody,
    .pm-ob-table tr,
    .pm-ob-table td{
        display:block;
        width:100%;
    }

    .pm-ob-table thead{
        display:none;
    }

    .pm-ob-table tbody{
        display:grid;
        gap:8px;
        padding:8px;
        background:#f6f8fb;
    }

    .pm-ob-table tbody tr{
        overflow:hidden;
        border:1px solid #dfe5ee;
        border-radius:10px;
        background:#fff;
    }

    .pm-ob-table td{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:14px;
        padding:8px 10px;
        border-bottom:1px solid #edf0f5;
        text-align:right;
    }

    .pm-ob-table td::before{
        content:attr(data-label);
        flex:0 0 38%;
        color:#8490a3;
        text-align:left;
        font-size:8.5px;
        font-weight:850;
        letter-spacing:.045em;
        text-transform:uppercase;
    }

    .pm-ob-table td:last-child{
        border-bottom:0;
    }

    .pm-ob-ref,
    .pm-ob-player,
    .pm-ob-when,
    .pm-ob-payment-state{
        align-items:flex-end;
        min-width:0;
    }

    .pm-ob-courts{
        max-width:52vw;
        text-align:right;
    }

    .pm-ob-action-cell .pm-ob-btn{
        width:100%;
    }

    .pm-ob-modal-backdrop{
        align-items:end;
        padding:0;
    }

    .pm-ob-modal{
        width:100%;
        max-height:94vh;
        border-radius:15px 15px 0 0;
    }

    .pm-ob-modal-head,
    .pm-ob-modal-body{
        padding-left:13px;
        padding-right:13px;
    }

    .pm-ob-schedule{
        grid-template-columns:1fr;
    }

    .pm-ob-modal-actions{
        position:sticky;
        bottom:0;
        padding:9px 13px calc(9px + env(safe-area-inset-bottom));
    }

    .pm-ob-modal-actions .pm-ob-btn{
        flex:1 1 calc(50% - 5px);
    }

    .pm-ob-modal-actions .pm-ob-btn-danger{
        margin-right:0;
    }
}

@media (max-width:480px){
    .pm-ob-page-copy h1{
        font-size:21px;
    }

    .pm-ob-kpis,
    .pm-ob-detail-summary,
    .pm-ob-payment-grid{
        grid-template-columns:1fr;
    }

    .pm-ob-modal-actions{
        flex-direction:column;
        align-items:stretch;
    }

    .pm-ob-modal-actions .pm-ob-btn{
        width:100%;
        flex:auto;
    }
}