/* =========================================================
   DEWPOINT OWNER DASHBOARD
   OPERATIONS CONTROL CENTER
   ========================================================= */

.owner-dashboard-v3{
    --od3-text:#172033;
    --od3-muted:#68758a;
    --od3-line:#e4e9f2;
    --od3-soft:#f7f9fc;
    --od3-card:#ffffff;
    --od3-shadow:0 8px 24px rgba(25,36,60,.055);

    display:flex;
    flex-direction:column;
    gap:18px;

    color:var(--od3-text);
}


/* =========================================================
   VENUE HEADER
   ========================================================= */

.od3-welcome{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;

    padding:22px 25px;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #ffffff 64%,
            #f6f8ff 100%
        );

    border:1px solid var(--od3-line);
    border-radius:18px;

    box-shadow:var(--od3-shadow);
}

.od3-welcome-main{
    min-width:0;

    display:flex;
    align-items:center;
    gap:18px;
}

.od3-venue-avatar{
    width:66px;
    height:66px;
    flex:0 0 66px;

    display:grid;
    place-items:center;

    border:1px solid #dce4f8;
    border-radius:16px;

    background:#eef3ff;
    color:#365dc6;

    font-size:27px;
    font-weight:900;
}

.od3-welcome-main>div:last-child{
    min-width:0;
}

.od3-welcome-main p{
    margin:0 0 4px;

    color:var(--od3-muted);

    font-size:13px;
    line-height:1.35;
    font-weight:600;
}

.od3-welcome-main h2{
    margin:0;

    color:var(--od3-text);

    font-size:26px;
    line-height:1.15;
    font-weight:900;

    letter-spacing:-.02em;
}

.od3-welcome-main small{
    display:block;

    margin-top:6px;

    color:var(--od3-muted);

    font-size:11px;
    line-height:1.45;
}


/* VENUE STATUS */

.od3-venue-status{
    min-width:220px;

    display:flex;
    flex-direction:column;
    gap:5px;

    padding:15px 18px;

    background:rgba(255,255,255,.9);

    border:1px solid var(--od3-line);
    border-radius:13px;
}

.od3-venue-status>span{
    color:#566278;

    font-size:10px;
    font-weight:900;

    letter-spacing:.06em;
    text-transform:uppercase;
}

.od3-venue-status>span>i{
    display:inline-block;

    width:8px;
    height:8px;

    margin-right:7px;

    border-radius:50%;

    background:#18a65c;
}

.od3-venue-status>b{
    color:#14854c;

    font-size:18px;
    font-weight:900;
}

.od3-venue-status>small{
    color:var(--od3-muted);

    font-size:10px;
}


/* =========================================================
   KPI CARDS
   ========================================================= */

.od3-kpis{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:15px;
}

.od3-kpis article{
    min-width:0;
    min-height:112px;

    display:flex;
    align-items:center;
    gap:15px;

    padding:18px;

    background:var(--od3-card);

    border:1px solid var(--od3-line);
    border-radius:16px;

    box-shadow:var(--od3-shadow);

    transition:
        transform .15s ease,
        box-shadow .15s ease;
}

.od3-kpis article:hover{
    transform:translateY(-1px);

    box-shadow:
        0 12px 28px rgba(25,36,60,.075);
}

.od3-kpis article>i{
    width:52px;
    height:52px;
    flex:0 0 52px;

    display:grid;
    place-items:center;

    border-radius:13px;

    font-size:21px;
    font-style:normal;
    font-weight:900;
}

.od3-kpis i.green{
    color:#13854f;
    background:#eaf8f0;
}

.od3-kpis i.blue{
    color:#176bb4;
    background:#e9f3ff;
}

.od3-kpis i.orange{
    color:#c16b08;
    background:#fff3dc;
}

.od3-kpis i.purple{
    color:#7847bc;
    background:#f1eafd;
}

.od3-kpis article>div{
    min-width:0;

    display:flex;
    flex-direction:column;
    gap:3px;
}

.od3-kpis article div>b{
    color:var(--od3-text);

    font-size:25px;
    line-height:1.05;
    font-weight:900;
}

.od3-kpis article div>span{
    color:#303a4e;

    font-size:12px;
    line-height:1.3;
    font-weight:800;
}

.od3-kpis article div>small{
    color:var(--od3-muted);

    font-size:10px;
    line-height:1.35;
}


/* =========================================================
   COMMON CARDS
   ========================================================= */

.od3-card{
    min-width:0;

    padding:20px;

    background:var(--od3-card);

    border:1px solid var(--od3-line);
    border-radius:16px;

    box-shadow:var(--od3-shadow);
}

.od3-over{
    display:block;

    color:#526075;

    font-size:10px;
    line-height:1.3;
    font-weight:900;

    letter-spacing:.075em;
    text-transform:uppercase;
}

.od3-card>p{
    margin:6px 0 18px;

    color:var(--od3-muted);

    font-size:11px;
    line-height:1.45;
}


/* =========================================================
   ANALYTICS
   ========================================================= */

.od3-analytics{
    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(0,1.1fr)
        minmax(0,1.1fr);

    gap:15px;
}


/* DEMOGRAPHICS */

.od3-demographics{
    min-height:185px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:27px;
}

.od3-donut{
    --od3-returning:0%;

    width:140px;
    height:140px;
    flex:0 0 140px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            #fff 0 55%,
            transparent 56%
        ),
        conic-gradient(
            #3868e8 0 var(--od3-returning),
            #e5ebf8 var(--od3-returning) 100%
        );
}

.od3-donut strong{
    color:#3155b8;

    font-size:24px;
    line-height:1;
    font-weight:900;
}

.od3-donut small{
    margin-top:4px;

    color:var(--od3-muted);

    font-size:10px;
}

.od3-demo-legend{
    flex:1;

    display:flex;
    flex-direction:column;
    gap:13px;
}

.od3-demo-legend span{
    display:grid;
    grid-template-columns:10px 1fr auto;
    align-items:center;
    gap:9px;
}

.od3-demo-legend i{
    width:9px;
    height:9px;

    border-radius:50%;
}

.od3-demo-legend i.returning{
    background:#3868e8;
}

.od3-demo-legend i.new{
    background:#dce5fb;
}

.od3-demo-legend label{
    color:#4d586d;

    font-size:11px;
}

.od3-demo-legend b{
    color:var(--od3-text);

    font-size:12px;
    font-weight:900;
}

.od3-card>footer{
    margin-top:12px;
    padding-top:13px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    border-top:1px solid var(--od3-line);

    color:var(--od3-muted);

    font-size:10px;
}


/* POPULAR HOURS + COURT PERFORMANCE */

.od3-bar-list,
.od3-performance{
    display:flex;
    flex-direction:column;
    gap:15px;
}

.od3-bar-list>div{
    display:grid;
    grid-template-columns:88px 1fr 42px;
    align-items:center;
    gap:11px;
}

.od3-performance>div{
    display:grid;
    grid-template-columns:118px 1fr 44px;
    align-items:center;
    gap:11px;
}

.od3-bar-list label,
.od3-performance label{
    min-width:0;

    display:flex;
    flex-direction:column;
    gap:2px;
}

.od3-bar-list label>b,
.od3-performance label>b{
    overflow:hidden;

    color:#303a4e;

    font-size:11px;
    line-height:1.3;
    font-weight:800;

    text-overflow:ellipsis;
    white-space:nowrap;
}

.od3-bar-list label>small,
.od3-performance label>small{
    color:var(--od3-muted);

    font-size:9px;
}

.od3-bar-list>div>span,
.od3-performance>div>span{
    height:8px;

    overflow:hidden;

    background:#edf0f5;

    border-radius:999px;
}

.od3-bar-list span i,
.od3-performance span i{
    display:block;

    height:100%;

    border-radius:999px;

    background:
        linear-gradient(
            90deg,
            #3868e8,
            #7556df
        );
}

.od3-bar-list strong,
.od3-performance strong{
    color:#4054a9;

    text-align:right;

    font-size:10px;
    font-weight:900;
}


/* =========================================================
   OPERATIONAL LOWER GRID

   PRIMARY:
   PAYMENT VERIFICATION QUEUE
   UPCOMING BOOKINGS

   SECONDARY:
   TODAY AT A GLANCE
   REVENUE SNAPSHOT
   ========================================================= */

.od3-bottom{
    display:grid;

    grid-template-columns:repeat(12,minmax(0,1fr));

    grid-template-areas:
        "confirm confirm confirm confirm confirm confirm confirm next next next next next"
        "glance glance glance glance revenue revenue revenue revenue revenue revenue revenue revenue";

    gap:15px;
}

.od3-bottom>article:nth-child(1){
    grid-area:glance;
}

.od3-bottom>article:nth-child(2){
    grid-area:revenue;
}

.od3-bottom>article:nth-child(3){
    grid-area:confirm;
}

.od3-bottom>article:nth-child(4){
    grid-area:next;
}


/* =========================================================
   TODAY AT A GLANCE
   ========================================================= */

.od3-glance{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

.od3-glance>span{
    min-width:0;

    display:flex;
    align-items:center;
    gap:10px;

    padding:12px;

    background:#fbfcfe;

    border:1px solid var(--od3-line);
    border-radius:11px;
}

.od3-glance>span>i{
    width:36px;
    height:36px;
    flex:0 0 36px;

    display:grid;
    place-items:center;

    border:1px solid #e1e7f6;
    border-radius:9px;

    background:#f0f4ff;
    color:#4160bf;

    font-size:14px;
    font-style:normal;
}

.od3-glance label{
    min-width:0;

    display:flex;
    flex-direction:column;
    gap:2px;
}

.od3-glance label>b{
    color:var(--od3-text);

    font-size:14px;
    font-weight:900;
}

.od3-glance label>small{
    color:var(--od3-muted);

    font-size:9px;
}


/* =========================================================
   REVENUE SNAPSHOT
   ========================================================= */

.od3-revenue>div{
    display:flex;
    flex-direction:column;
}

.od3-revenue>div>span{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;

    padding:14px 0;

    border-bottom:1px solid var(--od3-line);

    color:#4d586c;

    font-size:11px;
}

.od3-revenue>div>span>b{
    color:#2459bb;

    font-size:14px;
    font-weight:900;
}

.od3-revenue>footer{
    margin-top:14px;
    padding:12px 13px;

    border:1px solid #ffe0d5;
    border-radius:10px;

    background:#fff5f1;
    color:#bc4f2c;

    font-size:10px;
    font-weight:800;
}

.od3-revenue>footer>b{
    font-size:12px;
}


/* =========================================================
   PAYMENT VERIFICATION QUEUE
   ========================================================= */

.od3-confirmations{
    min-height:320px;
}

.od3-confirmation-list{
    display:flex;
    flex-direction:column;
}

.od3-confirmation-row{
    display:grid;

    grid-template-columns:
        58px
        minmax(0,1fr)
        auto;

    gap:13px;
    align-items:center;

    padding:13px 0;

    border-bottom:1px solid var(--od3-line);
}

.od3-confirmation-row:last-child{
    border-bottom:0;
}

.od3-confirmation-row>img{
    width:54px;
    height:66px;

    object-fit:cover;

    border:1px solid var(--od3-line);
    border-radius:8px;

    cursor:pointer;

    transition:
        transform .15s ease,
        box-shadow .15s ease;
}

.od3-confirmation-row>img:hover{
    transform:scale(1.025);

    box-shadow:
        0 7px 18px rgba(20,32,58,.12);
}

.od3-no-receipt{
    width:54px;
    height:66px;

    display:grid;
    place-items:center;

    padding:5px;

    border:1px dashed #ccd4e1;
    border-radius:8px;

    background:#fafbfc;

    color:var(--od3-muted);

    text-align:center;

    font-size:8px;
    line-height:1.3;
}

.od3-confirmation-main{
    min-width:0;
}

.od3-confirmation-title{
    display:grid;

    grid-template-columns:
        minmax(90px,1fr)
        minmax(100px,1fr)
        auto;

    align-items:center;
    gap:10px;
}

.od3-confirmation-title>b,
.od3-confirmation-title>strong{
    overflow:hidden;

    color:#273146;

    font-size:11px;
    line-height:1.3;
    font-weight:800;

    text-overflow:ellipsis;
    white-space:nowrap;
}

.od3-confirmation-title>em{
    color:#d65a19;

    font-size:12px;
    font-style:normal;
    font-weight:900;
}

.od3-confirmation-main>small{
    display:block;

    margin-top:5px;

    color:var(--od3-muted);

    font-size:10px;
    line-height:1.45;
}

.od3-receipt-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;

    margin-top:8px;
}

.od3-receipt-actions button,
.od3-receipt-actions a{
    padding:0;

    border:0;

    background:transparent;
    color:#2c65c8;

    font-size:10px;
    font-weight:800;

    cursor:pointer;
    text-decoration:none;
}

.od3-receipt-actions button:hover,
.od3-receipt-actions a:hover{
    text-decoration:underline;
}

.od3-confirm-actions{
    display:flex;
    flex-direction:column;
    gap:7px;
}

.od3-confirm-actions button{
    min-width:76px;

    padding:8px 11px;

    border-radius:8px;

    background:#fff;

    font-size:10px;
    font-weight:900;

    cursor:pointer;

    transition:
        transform .15s ease,
        background .15s ease;
}

.od3-confirm-actions button:hover{
    transform:translateY(-1px);
}

.od3-confirm-actions button.confirm{
    border:1px solid #72c691;
    color:#13743e;
}

.od3-confirm-actions button.confirm:hover{
    background:#effaf3;
}

.od3-confirm-actions button.decline{
    border:1px solid #f0a09a;
    color:#c9473e;
}

.od3-confirm-actions button.decline:hover{
    background:#fff4f3;
}


/* =========================================================
   UPCOMING BOOKINGS
   ========================================================= */

.od3-bottom>article:nth-child(4){
    min-height:320px;
}

.od3-next{
    display:flex;
    flex-direction:column;
}

.od3-next>div{
    display:grid;

    grid-template-columns:
        150px
        minmax(90px,1fr)
        minmax(80px,1fr);

    align-items:center;
    gap:11px;

    padding:14px 0;

    border-bottom:1px solid var(--od3-line);
}

.od3-next>div:last-child{
    border-bottom:0;
}

.od3-next time{
    min-width:0;

    display:flex;
    flex-direction:column;
    gap:3px;
}

.od3-next time>small{
    color:var(--od3-muted);

    font-size:9px;
    font-weight:700;
}

.od3-next time>b{
    color:#28344d;

    font-size:11px;
    font-weight:900;
}

.od3-next>div>strong{
    overflow:hidden;

    color:#303b51;

    font-size:11px;
    font-weight:800;

    text-overflow:ellipsis;
    white-space:nowrap;
}

.od3-next>div>span{
    overflow:hidden;

    color:var(--od3-muted);

    font-size:10px;

    text-overflow:ellipsis;
    white-space:nowrap;
}


/* =========================================================
   EMPTY / ERROR STATES
   ========================================================= */

.owner-dashboard-v3 .empty-state{
    padding:20px 10px;

    color:var(--od3-muted);

    font-size:11px;
    line-height:1.45;

    text-align:center;
}


/* =========================================================
   REFRESH FOOTER
   ========================================================= */

.od3-refresh{
    padding:11px 15px;

    background:rgba(255,255,255,.72);

    border:1px solid var(--od3-line);
    border-radius:11px;

    color:#758094;

    font-size:9px;

    text-align:right;
}


.owner-dashboard-v3 .owner-wall{
    display:none !important;
}



/* =========================================================
   DEWPOINT OWNER LIVE OPERATIONS V1
   ========================================================= */

.od3-operations{
display:grid;

    grid-template-columns:
        minmax(315px,.70fr)
        minmax(0,2fr);

    gap:15px;

    align-items:start;
}


/* LIVE COURT STATUS */

.od3-live-courts{
    min-width:0;
}

.od3-live-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

.od3-live-court{
    min-width:0;
    padding:13px;

    background:#fbfcff;

    border:1px solid var(--od3-line);
    border-radius:12px;

    transition:
        transform .15s ease,
        box-shadow .15s ease;
}

.od3-live-court:hover{
    transform:translateY(-1px);

    box-shadow:
        0 7px 18px rgba(25,36,60,.06);
}

.od3-live-court.in-use{
    border-color:#b8e3c7;
}

.od3-live-court.reserved{
    border-color:#efd19a;
}

.od3-live-court.blocked{
    border-color:#efbdb9;
}

.od3-live-court.offline{
    background:#f5f6f8;
}

.od3-live-court>header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px;

    margin-bottom:10px;
}

.od3-live-court>header>strong{
    overflow:hidden;

    color:#222d43;

    font-size:12px;
    font-weight:900;

    text-overflow:ellipsis;
    white-space:nowrap;
}

.od3-court-status{
    flex:0 0 auto;

    padding:4px 7px;

    border-radius:999px;

    font-size:7px;
    line-height:1;
    font-weight:900;

    letter-spacing:.04em;
}

.od3-court-status.available{
    color:#14784a;
    background:#e7f7ef;
}

.od3-court-status.in-use{
    color:#106d44;
    background:#dff5e8;
}

.od3-court-status.reserved{
    color:#a46007;
    background:#fff0d1;
}

.od3-court-status.blocked{
    color:#b33e37;
    background:#fde7e5;
}

.od3-court-status.offline{
    color:#697386;
    background:#e9ecf1;
}

.od3-current-activity{
    min-height:56px;

    display:flex;
    flex-direction:column;
    gap:3px;
}

.od3-current-activity>b{
    color:#202b41;
    font-size:10px;
    font-weight:900;
}

.od3-current-activity>span{
    overflow:hidden;

    color:#4d596e;

    font-size:9px;

    text-overflow:ellipsis;
    white-space:nowrap;
}

.od3-current-activity>small{
    color:var(--od3-muted);
    font-size:8px;
}

.od3-current-activity.available>b{
    color:#15764a;
}

.od3-live-court>footer{
    margin-top:8px;
    padding-top:8px;

    display:flex;
    gap:7px;

    border-top:1px solid var(--od3-line);
}

.od3-live-court>footer>small{
color:#8792a5;

    font-size:8px;
    line-height:1.25;
    font-weight:900;
}

.od3-live-court>footer>span{
overflow:hidden;

    color:#515e73;

    font-size:9px;
    line-height:1.3;
    font-weight:600;

    text-overflow:ellipsis;
    white-space:nowrap;
}


/* TODAY'S COURT SCHEDULE */

.od3-today-schedule{
    min-width:0;
}

.od3-schedule-title{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
}

.od3-schedule-title>div:first-child>p{
    margin:6px 0 15px;

    color:var(--od3-muted);
    font-size:11px;
}

.od3-schedule-legend{
    display:flex;
    justify-content:flex-end;
    flex-wrap:wrap;
    gap:10px;
}

.od3-schedule-legend>span{
    display:flex;
    align-items:center;
    gap:5px;

    color:#657186;

    font-size:8px;
    font-weight:700;
}

.od3-schedule-legend i{
    width:8px;
    height:8px;

    border-radius:3px;
}

.od3-schedule-legend i.booking{
    background:#24955a;
}

.od3-schedule-legend i.openplay{
    background:var(--dp-accent,#7c3aed);
}

.od3-schedule-legend i.pending{
    background:#dc9827;
}

.od3-schedule-legend i.block{
    background:#d4534b;
}


/* TIMELINE */

.od3-schedule-scroll{
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
}

.od3-schedule-chart{
min-width:760px;
}

.od3-schedule-axis{
    display:grid;
    grid-template-columns:88px minmax(0,1fr);

    margin-bottom:4px;
}

.od3-schedule-court-head{
    padding:0 8px 7px 0;

    color:#8791a4;

    font-size:7px;
    font-weight:900;

    letter-spacing:.07em;
}

.od3-schedule-axis-track{
    position:relative;

    height:25px;

    border-bottom:1px solid var(--od3-line);
}

.od3-schedule-axis-track>span{
position:absolute;
    bottom:7px;

    transform:translateX(-50%);

    color:#6f7b90;

    font-size:8px;
    line-height:1;
    font-weight:600;

    white-space:nowrap;
}

.od3-schedule-axis-track>span.first{
    transform:none;
}

.od3-schedule-axis-track>span.last{
    transform:translateX(-100%);
}

.od3-schedule-row{
    display:grid;
    grid-template-columns:88px minmax(0,1fr);

    min-height:53px;

    border-bottom:1px solid #eef1f6;
}

.od3-schedule-row:last-child{
    border-bottom:0;
}

.od3-schedule-court-name{
    min-width:0;

    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:2px;

    padding-right:10px;
}

.od3-schedule-court-name>strong{
overflow:hidden;

    color:#273146;

    font-size:11px;
    line-height:1.25;
    font-weight:800;

    text-overflow:ellipsis;
    white-space:nowrap;
}

.od3-schedule-court-name>small{
    color:#7c8798;

    font-size:7px;
    font-weight:900;
}

.od3-schedule-track{
    position:relative;

    min-height:53px;

    background:
        linear-gradient(
            180deg,
            rgba(248,250,253,.6),
            rgba(255,255,255,.8)
        );
}

.od3-schedule-gridline{
    position:absolute;

    top:0;
    bottom:0;

    width:1px;

    background:#edf0f5;

    pointer-events:none;
}


/* EVENT BARS */

.od3-schedule-event{
position:absolute;

    top:9px;

    min-width:7px;
    height:34px;

    overflow:hidden;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:0 5px;

    border-radius:7px;

    z-index:2;

    box-shadow:
        0 2px 5px rgba(25,36,60,.08);

    cursor:default;
}

.od3-schedule-event>strong{
display:block;

    width:100%;

    overflow:hidden;

    color:#fff;

    font-size:9px;
    line-height:1.15;
    font-weight:600;
    letter-spacing:0;

    text-align:center;

    text-overflow:ellipsis;
    white-space:nowrap;
}

.od3-schedule-event>small{
display:none;
}

.od3-schedule-event.booking{
    background:#24955a;
}

.od3-schedule-event.openplay{
    background:
        linear-gradient(
            90deg,
            var(--dp-accent,#7c3aed),
            var(--dp-accent-2,#a855f7)
        );
}

.od3-schedule-event.pending{
    background:#dc9827;
}

.od3-schedule-event.block{
    background:#d4534b;
}



.od3-schedule-event.block>strong{
    font-size:8px;
    font-weight:600;
}

/* COMPACT EMPTY PAYMENT VERIFICATION QUEUE */

.od3-bottom{
    align-items:start;
}

.od3-confirmations:has(.empty-state){
    min-height:0 !important;
}

.od3-confirmations:has(.empty-state)
.od3-confirmation-list{
    min-height:72px;

    display:grid;
    place-items:center;

    background:#fbfcfe;

    border:1px dashed #e0e5ee;
    border-radius:10px;
}

.od3-confirmations:has(.empty-state)
.empty-state{
    padding:14px;
}


/* RESPONSIVE */

@media(max-width:1250px){

    .od3-operations{
        grid-template-columns:1fr;
    }

    .od3-live-grid{
        grid-template-columns:
            repeat(4,minmax(0,1fr));
    }

}


@media(max-width:900px){

    .od3-live-grid{
        grid-template-columns:1fr 1fr;
    }

    .od3-schedule-title{
        flex-direction:column;
        gap:2px;
    }

    .od3-schedule-legend{
        justify-content:flex-start;
        margin-bottom:8px;
    }

}


@media(max-width:560px){

    .od3-live-grid{
        grid-template-columns:1fr;
    }

    .od3-schedule-chart{
        min-width:620px;
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:1200px){

    .od3-kpis{
        grid-template-columns:1fr 1fr;
    }

    .od3-analytics{
        grid-template-columns:1fr 1fr;
    }

    .od3-analytics>article:nth-child(3){
        grid-column:1 / -1;
    }

    .od3-bottom{
        grid-template-columns:1fr 1fr;

        grid-template-areas:
            "confirm confirm"
            "next next"
            "glance revenue";
    }

}


/* =========================================================
   SMALL TABLET
   ========================================================= */

@media(max-width:900px){

    .od3-analytics{
        grid-template-columns:1fr;
    }

    .od3-analytics>article:nth-child(3){
        grid-column:auto;
    }

    .od3-bottom{
        grid-template-columns:1fr;

        grid-template-areas:
            "confirm"
            "next"
            "glance"
            "revenue";
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:700px){

    .owner-dashboard-v3{
        gap:13px;
    }

    .od3-welcome{
        flex-direction:column;
        align-items:stretch;

        padding:18px;

        border-radius:14px;
    }

    .od3-welcome-main{
        align-items:flex-start;
    }

    .od3-venue-avatar{
        width:54px;
        height:54px;
        flex-basis:54px;

        border-radius:13px;

        font-size:22px;
    }

    .od3-welcome-main p{
        font-size:11px;
    }

    .od3-welcome-main h2{
        font-size:21px;
    }

    .od3-welcome-main small{
        font-size:10px;
    }

    .od3-venue-status{
        min-width:0;
    }

    .od3-kpis{
        grid-template-columns:1fr 1fr;
        gap:10px;
    }

    .od3-kpis article{
        min-height:105px;

        align-items:flex-start;

        padding:14px;
    }

    .od3-kpis article>i{
        width:42px;
        height:42px;
        flex-basis:42px;

        font-size:17px;
    }

    .od3-kpis article div>b{
        font-size:20px;
    }

    .od3-kpis article div>span{
        font-size:10px;
    }

    .od3-kpis article div>small{
        font-size:9px;
    }

    .od3-card{
        padding:16px;

        border-radius:14px;
    }

    .od3-demographics{
        flex-direction:column;

        min-height:0;
    }

    .od3-glance{
        grid-template-columns:1fr;
    }

    .od3-confirmation-row{
        grid-template-columns:
            54px
            minmax(0,1fr);
    }

    .od3-confirm-actions{
        grid-column:1 / -1;

        flex-direction:row;
        justify-content:flex-end;
    }

    .od3-confirmation-title{
        grid-template-columns:1fr;
        gap:3px;
    }

    .od3-confirmation-title>b,
    .od3-confirmation-title>strong{
        white-space:normal;
    }

    .od3-next>div{
        grid-template-columns:1fr;

        gap:4px;

        padding:12px 0;
    }

    .od3-next>div>strong,
    .od3-next>div>span{
        white-space:normal;
    }

    .od3-refresh{
        text-align:left;
    }

}


/* =========================================================
   NARROW MOBILE
   ========================================================= */

@media(max-width:480px){

    .od3-kpis{
        grid-template-columns:1fr;
    }

    .od3-kpis article{
        min-height:auto;
    }

    .od3-bar-list>div,
    .od3-performance>div{
        grid-template-columns:
            80px
            1fr
            38px;

        gap:7px;
    }

}