:root{
    --ink:#13212e;
    --muted:#71808e;
    --teal:#5c9b96;
    --teal2:#e8f4f2;
    --line:#e5ebef;
    --bg:#f6f8f9;
    --danger:#b95555;
    --gold:#c48d2e;
}

*{
    box-sizing:border-box
}

body{
    margin:0;
    font-family:Manrope,Arial,sans-serif;
    background:var(--bg);
    color:var(--ink)
}

a{
    text-decoration:none;
    color:inherit
}

.topbar{
    height:72px;
    background:#fff;
    border-bottom:1px solid var(--line);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 5%;
    position:sticky;
    top:0;
    z-index:10
}

.brand{
    display:flex;
    gap:10px;
    align-items:center;
    font-size:20px
}

.lotus{
    font-size:34px;
    color:var(--teal)
}

nav{
    display:flex;
    align-items:center;
    gap:22px;
    font-size:14px;
    margin-left:auto;
}
.hello{
    color:var(--muted)
}

.btn{
    border:0;
    border-radius:9px;
    padding:11px 17px;
    background:var(--teal);
    color:#fff;
    font-weight:700;
    cursor:pointer;
    display:inline-block
}

.btn:hover{
    filter:brightness(.95)
}

.btn.ghost{
    background:#eef3f5;
    color:var(--ink)
}

.btn.danger{
    background:#f9eaea;
    color:var(--danger)
}

.btn.small{
    padding:8px 12px;
    font-size:12px
}

.btn[disabled]{
    background:#aeb7bd;
    cursor:not-allowed
}

.hero{
    background:linear-gradient(120deg,#f4ede5,#e8f2ef);
    padding:55px 7%
}

.hero h1{
    font-size:44px;
    max-width:600px;
    margin:0 0 10px
}

.hero p{
    color:#52616d;
    font-size:17px
}

.wrap{
    width:min(1180px,92%);
    margin:28px auto
}

.card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:14px;
    padding:20px;
    box-shadow:0 3px 14px rgba(20,40,55,.04)
}

.weekhead{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:18px
}

.weeknav{
    display:flex;
    gap:8px;
    align-items:center
}

.weeknav a{
    background:#fff;
    border:1px solid var(--line);
    padding:8px 12px;
    border-radius:8px
}



.day{
    margin:24px 0 12px;
    font-size:20px
}

.session{
    display:grid;
    grid-template-columns:100px 1fr 120px 140px;
    align-items:center;
    gap:16px;
    padding:15px 18px;
    border:1px solid var(--line);
    border-radius:12px;
    margin:10px 0;
    background:#fff
}

.time{
    font-size:22px;
    font-weight:800
}

.muted{
    color:var(--muted);
    font-size:13px
}

.tag{
    background:var(--teal2);
    color:#3f7773;
    border-radius:7px;
    padding:5px 9px;
    font-size:12px;
    display:inline-block
}

.full{
    background:#f5e6e6;
    color:#a64f4f
}

.flash{
    padding:12px 15px;
    border-radius:9px;
    margin:15px 0;
    background:#e7f5ee;
    color:#28724f
}

.flash.error{
    background:#faeaea;
    color:#9d4545
}

.loginbox{
    width:min(460px,92%);
    margin:60px auto
}

.loginbox h1{
    margin-top:0
}

.formgrid{
    display:grid;
    gap:13px
}

.formgrid label{
    font-size:13px;
    font-weight:700
}

.formgrid input,
.formgrid select,
.formgrid textarea{
    width:100%;
    padding:11px;
    border:1px solid #ccd6dc;
    border-radius:8px;
    font:inherit
}

.hint{
    font-size:12px;
    color:var(--muted);
    line-height:1.5
}

.google{
    background:#fff;
    color:#263746;
    border:1px solid #ccd6dc;
    width:100%;
    text-align:center;
    margin-bottom:12px
}

.google.disabled{
    opacity:.55;
    cursor:not-allowed
}


/* =========================================================
   ADMIN BASE
   ========================================================= */

.admin-shell{
    display:grid;
    grid-template-columns:220px 1fr;
    min-height:calc(100vh - 72px)
}

.sidebar{
    background:#172635;
    color:#dbe4ea;
    padding:25px 15px
}

.sidebar h3{
    padding:0 10px
}

.sidebar a{
    display:block;
    padding:11px 12px;
    border-radius:8px;
    margin:4px 0
}

.sidebar a:hover{
    background:#253849
}

.admin-content{
    padding:28px
}

.stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:15px;
    margin:18px 0
}

.stat strong{
    font-size:28px;
    display:block;
    margin-top:7px
}

.grid2{
    display:grid;
    grid-template-columns:1.2fr .8fr;
    gap:18px
}

.tablewrap{
    overflow:auto
}

table{
    width:100%;
    border-collapse:collapse;
    font-size:13px
}

th,
td{
    padding:11px;
    border-bottom:1px solid var(--line);
    text-align:left
}

th{
    color:#61717e
}

.actions{
    display:flex;
    gap:7px;
    flex-wrap:wrap
}

.section-title{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:14px
}

.badge{
    font-size:11px;
    padding:5px 8px;
    border-radius:20px;
    background:#e8f4f2;
    color:#34746e
}

.badge.cancelled{
    background:#faeaea;
    color:#a64f4f
}


@media(max-width:800px){

    .topbar{
        padding:0 4%;
    }

    nav{
        gap:12px;
        font-size:12px;
    }

    .hello{
        display:none;
    }
    .hero h1{
        font-size:34px
    }

    .session{
        grid-template-columns:80px 1fr
    }

    .session>div:nth-child(3),
    .session>div:nth-child(4){
        grid-column:2
    }

    .admin-shell{
        grid-template-columns:1fr
    }

    .sidebar{
        display:flex;
        overflow:auto;
        padding:8px
    }

    .sidebar h3{
        display:none
    }

    .sidebar a{
        white-space:nowrap
    }

    .stats{
        grid-template-columns:1fr 1fr
    }

    .grid2{
        grid-template-columns:1fr
    }

    .admin-content{
        padding:15px
    }
}


/* =========================================================
   RICH V2
   ========================================================= */

.hero-rich{
    padding:58px 7%;
    background:
        radial-gradient(circle at 85% 25%,rgba(92,155,150,.22),transparent 25%),
        linear-gradient(125deg,#f8f2ec 0%,#edf6f4 60%,#f7faf9 100%)
}

.hero-grid{
    width:min(1180px,100%);
    margin:auto;
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:35px;
    align-items:center
}

.hero-rich h1{
    font-size:52px;
    line-height:1.05;
    margin:8px 0 15px;
    letter-spacing:-2px
}

.eyebrow{
    font-size:12px;
    font-weight:800;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:var(--teal)
}

.hero-panel{
    background:rgba(255,255,255,.82);
    backdrop-filter:blur(10px);
    border:1px solid #fff;
    border-radius:24px;
    padding:24px;
    box-shadow:0 20px 60px rgba(30,65,70,.12)
}

.hero-mini{
    display:flex;
    justify-content:space-between;
    padding:12px 0;
    border-bottom:1px solid var(--line)
}

.hero-mini:last-child{
    border:0
}

.quickstats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
    margin-top:22px
}

.quickstats div{
    background:#fff;
    border:1px solid var(--line);
    padding:13px;
    border-radius:12px
}

.quickstats strong{
    display:block;
    font-size:20px
}

.toolbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin-bottom:20px
}

.filters{
    display:flex;
    gap:8px;
    flex-wrap:wrap
}

.filter{
    border:1px solid var(--line);
    background:#fff;
    padding:8px 12px;
    border-radius:999px;
    font-size:12px
}

.filter.active{
    background:var(--ink);
    color:#fff
}

.session{
    transition:.18s ease
}

.session:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 25px rgba(20,40,55,.08);
    border-color:#cfdddf
}

.capacity{
    height:5px;
    background:#edf1f2;
    border-radius:8px;
    overflow:hidden;
    margin-top:7px
}

.capacity span{
    display:block;
    height:100%;
    background:var(--teal);
    border-radius:8px
}

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

.avatar{
    width:42px;
    height:42px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:var(--teal2);
    font-weight:800;
    color:#39756f
}

.kpi{
    position:relative;
    overflow:hidden
}

.kpi:after{
    content:'';
    position:absolute;
    width:75px;
    height:75px;
    border-radius:50%;
    background:var(--teal2);
    right:-20px;
    bottom:-25px
}

.progress{
    height:8px;
    background:#edf1f2;
    border-radius:10px;
    overflow:hidden
}

.progress span{
    height:100%;
    display:block;
    background:var(--teal)
}

.notice{
    border-left:4px solid var(--gold);
    background:#fff9ed;
    padding:13px 16px;
    border-radius:8px;
    margin:15px 0;
    color:#70551f
}

.admin-hero{
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:linear-gradient(120deg,#172635,#284556);
    color:#fff;
    padding:24px;
    border-radius:16px;
    margin-bottom:18px
}

.admin-hero .muted{
    color:#c4d0d7
}

.timeline{
    border-left:2px solid var(--line);
    margin-left:8px;
    padding-left:20px
}

.timeline-item{
    position:relative;
    margin:18px 0
}

.timeline-item:before{
    content:'';
    position:absolute;
    left:-27px;
    top:5px;
    width:12px;
    height:12px;
    border-radius:50%;
    background:var(--teal);
    border:3px solid #fff
}

@media(max-width:800px){

    .hero-grid{
        grid-template-columns:1fr
    }

    .hero-rich h1{
        font-size:38px
    }

    .quickstats{
        grid-template-columns:1fr 1fr
    }

    .toolbar,
    .welcome,
    .admin-hero{
        align-items:flex-start;
        flex-direction:column
    }
}


/* =========================================================
   V3 ADMIN MONTHLY CALENDAR
   ========================================================= */

.calendar-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 280px;
    gap:18px;
    margin-top:22px
}

.calendar-card{
    padding:0;
    overflow:hidden
}

.calendar-head{
    display:grid;
    grid-template-columns:48px 1fr 48px;
    align-items:center;
    text-align:center;
    padding:18px;
    border-bottom:1px solid var(--line)
}

.calendar-head strong{
    font-size:21px
}

.cal-arrow{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border:1px solid var(--line);
    border-radius:9px;
    background:#fff;
    font-size:24px
}

.calendar-grid{
    display:grid;
    grid-template-columns:repeat(7,1fr)
}

.calendar-weekdays{
    background:#f8fafb;
    border-bottom:1px solid var(--line)
}

.calendar-weekdays div{
    text-align:center;
    padding:10px;
    font-size:12px;
    font-weight:800;
    color:#5d6d79
}

.cal-day{
    min-height:105px;
    border-right:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding:10px;
    position:relative;
    background:#fff;
    transition:.15s
}

.cal-day:hover{
    background:#f2f8f7
}

.cal-day:nth-child(7n){
    border-right:0
}

.cal-day .daynum{
    font-weight:800
}

.cal-day.other-month{
    color:#aeb9c0;
    background:#fbfcfc
}

.cal-day.today .daynum{
    background:var(--ink);
    color:#fff;
    width:27px;
    height:27px;
    display:grid;
    place-items:center;
    border-radius:50%
}

.cal-day.selected{
    background:linear-gradient(145deg,#e5f4f2,#f4faf9);
    box-shadow:inset 0 0 0 2px var(--teal)
}

.session-count{
    display:block;
    margin-top:17px;
    font-size:11px;
    color:#526874
}

.dots{
    display:flex;
    gap:4px;
    margin-top:7px
}

.dots i{
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--teal)
}

.day-summary{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center
}

.day-summary h2{
    margin:6px 0 14px
}

.donut{
    width:130px;
    height:130px;
    border-radius:50%;
    background:conic-gradient(var(--teal) calc(var(--p)*1%),#edf1f2 0);
    display:grid;
    place-items:center;
    margin:8px auto 18px
}

.donut:before{
    content:'';
    width:94px;
    height:94px;
    background:#fff;
    border-radius:50%;
    position:absolute
}

.donut div{
    z-index:1;
    display:flex;
    flex-direction:column
}

.donut strong{
    font-size:25px
}

.donut span{
    font-size:11px;
    color:var(--muted)
}

.summary-numbers{
    display:grid;
    grid-template-columns:1fr 1fr;
    width:100%;
    border-top:1px solid var(--line);
    padding-top:16px
}

.summary-numbers strong{
    font-size:20px;
    display:block
}

.summary-numbers span{
    font-size:11px;
    color:var(--muted)
}

.day-title{
    margin-top:28px
}

.day-sessions{
    display:grid;
    gap:9px
}

.day-session{
    display:grid;
    grid-template-columns:5px 115px 1fr 180px 90px;
    align-items:center;
    gap:18px;
    padding:12px 16px;
    position:relative
}

.session-accent{
    height:48px;
    border-radius:5px;
    background:var(--teal)
}

.session-bigtime{
    font-size:18px
}

.occupancy .progress{
    margin:5px 0
}

.empty-day{
    text-align:center;
    padding:30px
}

.new-session-card{
    margin-top:28px
}

.session-form{
    display:grid;
    grid-template-columns:1.3fr 1.3fr 1fr 1fr .7fr .7fr;
    gap:12px;
    align-items:end
}

.session-form label{
    font-size:12px;
    font-weight:700
}

.session-form input,
.session-form select{
    width:100%;
    padding:10px;
    border:1px solid #ccd6dc;
    border-radius:8px;
    font:inherit
}

.session-form .btn{
    grid-column:1/-1
}

@media(max-width:1050px){

    .calendar-layout{
        grid-template-columns:1fr
    }

    .day-summary{
        display:grid;
        grid-template-columns:1fr 1fr 1fr
    }

    .day-summary .eyebrow,
    .day-summary h2{
        grid-column:1/-1
    }

    .session-form{
        grid-template-columns:1fr 1fr 1fr
    }

    .day-session{
        grid-template-columns:5px 90px 1fr
    }

    .occupancy,
    .day-session form{
        grid-column:3
    }
}

@media(max-width:700px){

    .cal-day{
        min-height:72px;
        padding:6px
    }

    .session-count{
        font-size:0;
        margin-top:10px
    }

    .session-count:after{
        content:'•';
        font-size:18px;
        color:var(--teal)
    }

    .calendar-weekdays div{
        font-size:10px;
        padding:8px 2px
    }

    .session-form{
        grid-template-columns:1fr
    }

    .day-summary{
        display:flex
    }

    .day-session{
        grid-template-columns:5px 75px 1fr
    }

    .occupancy,
    .day-session form{
        grid-column:2/-1
    }
}


/* =========================================================
   V4 COMPACT ADMIN
   ========================================================= */

@media (min-width:1100px) and (min-height:800px){

    body:has(.calendar-layout){
        overflow-y:auto
    }

    body:has(.calendar-layout) .topbar{
        height:58px;
        padding:0 3%
    }

    body:has(.calendar-layout) .brand{
        font-size:17px
    }

    body:has(.calendar-layout) .lotus{
        font-size:27px
    }

    body:has(.calendar-layout) .admin-shell{
        min-height:calc(100vh - 58px);
        height:auto
    }

    body:has(.calendar-layout) .sidebar{
        padding:18px 12px
    }

    body:has(.calendar-layout) .sidebar h3{
        margin:6px 8px 12px;
        font-size:15px
    }

    body:has(.calendar-layout) .sidebar a{
        padding:8px 10px;
        margin:2px 0;
        font-size:13px
    }

    body:has(.calendar-layout) .admin-content{
        padding:18px 22px;
        overflow:visible
    }

    body:has(.calendar-layout) .section-title{
        margin-bottom:8px
    }

    body:has(.calendar-layout) .section-title h1{
        font-size:25px;
        margin-top:0
    }

    .calendar-layout{
        grid-template-columns:minmax(0,1fr) 220px;
        gap:12px;
        margin-top:10px
    }

    .calendar-head{
        grid-template-columns:38px 1fr 38px;
        padding:9px 12px
    }

    .calendar-head strong{
        font-size:17px
    }

    .cal-arrow{
        width:30px;
        height:30px;
        font-size:19px
    }

    .calendar-weekdays div{
        padding:6px;
        font-size:10px
    }

    .cal-day{
        min-height:57px;
        height:57px;
        padding:5px 7px
    }

    .cal-day .daynum{
        font-size:12px
    }

    .cal-day.today .daynum{
        width:22px;
        height:22px
    }

    .session-count{
        margin-top:5px;
        font-size:9px
    }

    .dots{
        margin-top:3px
    }

    .dots i{
        width:4px;
        height:4px
    }

    .day-summary{
        padding:12px
    }

    .day-summary .eyebrow{
        font-size:9px
    }

    .day-summary h2{
        font-size:17px;
        margin:3px 0 7px
    }

    .donut{
        width:78px;
        height:78px;
        margin:3px auto 8px
    }

    .donut:before{
        width:58px;
        height:58px
    }

    .donut strong{
        font-size:17px
    }

    .donut span{
        font-size:8px
    }

    .summary-numbers{
        padding-top:8px
    }

    .summary-numbers strong{
        font-size:15px
    }

    .summary-numbers span{
        font-size:9px
    }

    .day-title{
        margin-top:12px;
        margin-bottom:6px
    }

    .day-title h2{
        font-size:18px!important
    }

    .day-sessions{
        gap:5px;
        max-height:none;
        overflow:visible;
        padding-right:3px
    }

    .day-session{
        grid-template-columns:4px 90px 1fr 155px 75px;
        gap:11px;
        padding:7px 10px;
        border-radius:9px
    }

    .session-accent{
        height:34px
    }

    .session-bigtime{
        font-size:15px
    }

    .day-session .muted{
        font-size:10px
    }

    body:has(.calendar-layout) footer{
        display:none
    }
}


/* =========================================================
   MODAL
   ========================================================= */

.modal-backdrop{
    position:fixed;
    inset:0;
    background:rgba(11,25,36,.48);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:1000;
    padding:20px;
    backdrop-filter:blur(3px)
}

.modal-backdrop.open{
    display:flex
}

.modal-open{
    overflow:hidden
}

.modal-card{
    width:min(650px,96vw);
    background:#fff;
    border-radius:18px;
    box-shadow:0 25px 80px rgba(0,0,0,.22);
    padding:22px;
    animation:modalIn .16s ease-out
}

@keyframes modalIn{
    from{
        transform:translateY(10px);
        opacity:.5
    }
    to{
        transform:none;
        opacity:1
    }
}

.modal-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    border-bottom:1px solid var(--line);
    padding-bottom:13px;
    margin-bottom:16px
}

.modal-head h2{
    margin:3px 0 0
}

.modal-close{
    border:0;
    background:#eef3f5;
    width:34px;
    height:34px;
    border-radius:9px;
    font-size:24px;
    cursor:pointer;
    color:var(--ink)
}

.modal-form{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:13px
}

.modal-form label{
    font-size:12px;
    font-weight:700
}

.modal-form input,
.modal-form select{
    width:100%;
    padding:11px;
    border:1px solid #ccd6dc;
    border-radius:8px;
    font:inherit
}

.modal-actions{
    grid-column:1/-1;
    display:flex;
    justify-content:flex-end;
    gap:8px;
    border-top:1px solid var(--line);
    padding-top:14px;
    margin-top:4px
}

@media(max-width:650px){

    .modal-form{
        grid-template-columns:1fr
    }
}


/* =========================================================
   V5 BALANCED 1920x1080 ADMIN
   ========================================================= */

@media (min-width:1100px) and (min-height:800px){

    body:has(.calendar-layout) .topbar{
        height:62px
    }

    body:has(.calendar-layout) .admin-shell{
        height:calc(100vh - 62px);
        min-height:calc(100vh - 62px)
    }

    body:has(.calendar-layout) .admin-content{
        padding:20px 26px 14px
    }

    body:has(.calendar-layout) .sidebar{
        padding:20px 13px
    }

    body:has(.calendar-layout) .sidebar a{
        padding:9px 11px;
        font-size:13px
    }

    .calendar-page-title{
        margin-bottom:10px!important
    }

    .calendar-page-title h1{
        font-size:27px!important
    }

    .calendar-layout{
        grid-template-columns:minmax(0,1fr) 250px;
        gap:14px;
        margin-top:8px
    }

    .calendar-card{
        border-radius:15px
    }

    .calendar-head{
        padding:11px 14px
    }

    .calendar-head strong{
        font-size:19px
    }

    .calendar-weekdays div{
        padding:7px
    }

    .cal-day{
        height:65px;
        min-height:65px;
        padding:7px 9px
    }

    .cal-day .daynum{
        font-size:13px
    }

    .session-count{
        margin-top:7px;
        font-size:10px
    }

    .dots i{
        width:5px;
        height:5px
    }

    .day-summary{
        padding:15px 17px;
        border-radius:15px;
        justify-content:flex-start
    }

    .day-summary .eyebrow{
        font-size:9px
    }

    .day-summary h2{
        font-size:19px;
        line-height:1.25;
        margin:4px 0 8px
    }

    .donut{
        width:88px;
        height:88px;
        margin:4px auto 10px
    }

    .donut:before{
        width:64px;
        height:64px
    }

    .donut strong{
        font-size:19px
    }

    .summary-numbers{
        padding-top:10px;
        margin-top:2px
    }

    .summary-numbers strong{
        font-size:16px
    }

    .day-add-btn{
        width:100%;
        margin-top:12px;
        padding:9px 12px;
        font-size:12px
    }

    .day-title{
        margin-top:15px;
        margin-bottom:7px
    }

    .day-title h2{
        font-size:20px!important
    }

    .day-sessions{
        gap:7px;
        max-height:none;
        overflow:visible
    }

    .day-session{
        grid-template-columns:5px 95px minmax(220px,1fr) 175px 82px;
        gap:14px;
        padding:9px 12px;
        border-radius:12px;
        box-shadow:0 2px 9px rgba(20,40,55,.035)
    }

    .session-accent{
        height:39px
    }

    .session-bigtime{
        font-size:16px
    }

    .day-session:hover{
        box-shadow:0 5px 16px rgba(20,40,55,.07);
        transform:translateY(-1px)
    }
}

.day-add-btn{
    box-shadow:0 5px 14px rgba(92,155,150,.18)
}


/* =========================================================
   FINAL ADMIN SIDEBAR
   ΙΔΙΟ ΣΕ ΟΛΕΣ ΤΙΣ ADMIN ΣΕΛΙΔΕΣ
   ========================================================= */

@media (min-width:801px){

    .admin-shell{
        grid-template-columns:220px minmax(0,1fr)!important
    }

    .sidebar{
        width:220px!important;
        padding:25px 15px!important;
        background:#172635;
        color:#dbe4ea
    }

    .sidebar h3{
        margin:1em 0!important;
        padding:0 10px!important;
        font-family:Manrope,Arial,sans-serif!important;
        font-size:1.17em!important;
        font-weight:700!important;
        line-height:normal!important
    }

    .sidebar a{
        display:block!important;
        padding:11px 12px!important;
        margin:4px 0!important;
        border-radius:8px!important;
        font-family:Manrope,Arial,sans-serif!important;
        font-size:16px!important;
        font-weight:400!important;
        line-height:normal!important;
        color:#dbe4ea!important;
        white-space:nowrap
    }

    .sidebar a:hover{
        background:#253849!important;
        color:#fff!important
    }
}


/* =========================================================
   FIX SESSION OCCUPANCY + ACTION BUTTONS
   ========================================================= */

@media (min-width:1100px){

    .day-session{
        grid-template-columns:
            5px
            95px
            minmax(220px,1fr)
            150px
            190px!important;

        gap:14px!important
    }

    .day-session .occupancy{
        width:100%;
        min-width:0
    }

    .day-session .occupancy .progress{
        width:100%;
        max-width:150px
    }

    .day-session form{
        width:190px;
        display:flex;
        justify-content:flex-end;
        align-items:center;
        gap:7px;
        white-space:nowrap
    }

    .day-session form .btn{
        flex:0 0 auto
    }
}


/* =========================================================
   BALANCE PILATES
   CUSTOMER / BOOKING THEME
   ---------------------------------------------------------
   ΠΡΟΣΟΧΗ:
   ΟΛΟ ΤΟ ΠΑΡΑΚΑΤΩ ΕΦΑΡΜΟΖΕΤΑΙ ΜΟΝΟ ΣΤΙΣ USER ΣΕΛΙΔΕΣ.
   ΤΟ ADMIN ΔΕΝ ΑΛΛΑΖΕΙ.
   ========================================================= */


/* ---------------------------------------------------------
   CUSTOMER COLOR SYSTEM
   --------------------------------------------------------- */

body:not(:has(.admin-shell)){
    --ink:#302722;
    --muted:#82756d;
    --teal:#20b99e;
    --teal2:#e7f7f3;
    --line:#eadfd5;
    --bg:#fbf8f4;
    --danger:#b85e58;
    --gold:#b88d68;

    background:#fbf8f4;
    color:#302722
}


/* ---------------------------------------------------------
   CUSTOMER HEADER
   --------------------------------------------------------- */

body:not(:has(.admin-shell)) .topbar{
    background:#fffdf9;
    border-bottom:1px solid #eadfd5;
    box-shadow:0 2px 14px rgba(69,51,42,.025)
}

body:not(:has(.admin-shell)) .topbar nav{
    color:#51443e
}

body:not(:has(.admin-shell)) .topbar nav > a:not(.btn){
    color:#51443e;
    transition:color .18s ease
}

body:not(:has(.admin-shell)) .topbar nav > a:not(.btn):hover{
    color:#15957f
}

body:not(:has(.admin-shell)) .hello{
    color:#82756d
}


/* ---------------------------------------------------------
   MAIN CUSTOMER AREA
   --------------------------------------------------------- */

body:not(:has(.admin-shell)) main{
    background:#fbf8f4
}

body:not(:has(.admin-shell)) .wrap{
    color:#302722
}


/* ---------------------------------------------------------
   CUSTOMER TYPOGRAPHY
   --------------------------------------------------------- */

body:not(:has(.admin-shell)) h1,
body:not(:has(.admin-shell)) h2,
body:not(:has(.admin-shell)) h3,
body:not(:has(.admin-shell)) h4{
    color:#302722
}

body:not(:has(.admin-shell)) .muted{
    color:#8a7c73
}


/* ---------------------------------------------------------
   WEEK HEADER
   --------------------------------------------------------- */

body:not(:has(.admin-shell)) .weekhead h1,
body:not(:has(.admin-shell)) .weekhead h2{
    color:#302722
}

body:not(:has(.admin-shell)) .weeknav a{
    background:#fffdf9;
    border:1px solid #e7dacf;
    color:#51443e;
    transition:
        border-color .18s ease,
        color .18s ease,
        background .18s ease
}

body:not(:has(.admin-shell)) .weeknav a:hover{
    border-color:#20b99e;
    color:#168a76;
    background:#f4fbf9
}


/* ---------------------------------------------------------
   DAYS
   --------------------------------------------------------- */

body:not(:has(.admin-shell)) .day{
    color:#302722
}

body:not(:has(.admin-shell)) .day .muted{
    color:#95877e
}


/* ---------------------------------------------------------
   SESSION CARDS
   --------------------------------------------------------- */

body:not(:has(.admin-shell)) .session{
    background:#fffdfb;
    border:1px solid #eadfd5;
    border-radius:16px;

    box-shadow:
        0 3px 12px rgba(74,54,44,.025);

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease
}

body:not(:has(.admin-shell)) .session:hover{
    transform:translateY(-2px);
    border-color:#ddcfc3;

    box-shadow:
        0 10px 28px rgba(74,54,44,.07)
}


/* ---------------------------------------------------------
   SESSION TIME
   --------------------------------------------------------- */

body:not(:has(.admin-shell)) .time{
    color:#302722
}


/* ---------------------------------------------------------
   SESSION ACCENT
   --------------------------------------------------------- */

body:not(:has(.admin-shell)) .session-accent{
    background:#20b99e
}


/* ---------------------------------------------------------
   AVAILABLE SEATS TAG
   --------------------------------------------------------- */

body:not(:has(.admin-shell)) .tag{
    background:#e7f7f3;
    color:#168a76;
    border-radius:999px;
    font-weight:600
}

body:not(:has(.admin-shell)) .tag.full,
body:not(:has(.admin-shell)) .full{
    background:#faece9;
    color:#b45d57
}


/* ---------------------------------------------------------
   CAPACITY BAR
   --------------------------------------------------------- */

body:not(:has(.admin-shell)) .capacity{
    background:#eee6df
}

body:not(:has(.admin-shell)) .capacity span{
    background:#20b99e
}


/* ---------------------------------------------------------
   PRIMARY CUSTOMER BUTTONS
   --------------------------------------------------------- */

body:not(:has(.admin-shell)) .btn{
    background:#20b99e;
    color:#fff;

    border-radius:999px;

    box-shadow:
        0 7px 18px rgba(32,185,158,.17);

    transition:
        background .18s ease,
        transform .18s ease,
        box-shadow .18s ease
}

body:not(:has(.admin-shell)) .btn:hover{
    background:#18a78e;
    filter:none;

    transform:translateY(-1px);

    box-shadow:
        0 9px 22px rgba(32,185,158,.23)
}

body:not(:has(.admin-shell)) .btn:active{
    transform:translateY(0)
}


/* ---------------------------------------------------------
   GHOST BUTTON
   --------------------------------------------------------- */

body:not(:has(.admin-shell)) .btn.ghost{
    background:#f5eee8;
    color:#51443e;
    box-shadow:none
}

body:not(:has(.admin-shell)) .btn.ghost:hover{
    background:#eee4dc;
    color:#302722
}


/* ---------------------------------------------------------
   DANGER / CANCEL BUTTON
   --------------------------------------------------------- */

body:not(:has(.admin-shell)) .btn.danger{
    background:#faece9;
    color:#b45d57;
    box-shadow:none
}

body:not(:has(.admin-shell)) .btn.danger:hover{
    background:#f6dfdc;
    color:#a84f49
}


/* ---------------------------------------------------------
   DISABLED BUTTON
   --------------------------------------------------------- */

body:not(:has(.admin-shell)) .btn[disabled]{
    background:#cfc8c3;
    color:#fff;
    box-shadow:none;
    cursor:not-allowed;
    transform:none
}


/* ---------------------------------------------------------
   CARDS
   --------------------------------------------------------- */

body:not(:has(.admin-shell)) .card{
    background:#fffdfb;
    border:1px solid #eadfd5;

    box-shadow:
        0 5px 20px rgba(73,53,43,.04)
}


/* ---------------------------------------------------------
   USER BOOKING TABLE
   --------------------------------------------------------- */

body:not(:has(.admin-shell)) table{
    color:#443832
}

body:not(:has(.admin-shell)) th{
    color:#796b63;
    font-weight:700
}

body:not(:has(.admin-shell)) th,
body:not(:has(.admin-shell)) td{
    border-bottom-color:#eee4dc
}


/* ---------------------------------------------------------
   STATUS BADGES
   --------------------------------------------------------- */

body:not(:has(.admin-shell)) .badge{
    background:#e7f7f3;
    color:#168a76
}

body:not(:has(.admin-shell)) .badge.cancelled{
    background:#faece9;
    color:#b45d57
}


/* ---------------------------------------------------------
   FLASH MESSAGES
   --------------------------------------------------------- */

body:not(:has(.admin-shell)) .flash{
    background:#e8f7f2;
    color:#167861;
    border:1px solid #d3eee7
}

body:not(:has(.admin-shell)) .flash.error{
    background:#faece9;
    color:#a9514c;
    border-color:#f1d6d2
}


/* ---------------------------------------------------------
   CUSTOMER WELCOME / PACKAGE
   --------------------------------------------------------- */

body:not(:has(.admin-shell)) .welcome{
    color:#302722
}

body:not(:has(.admin-shell)) .avatar{
    background:#e7f7f3;
    color:#168a76
}

body:not(:has(.admin-shell)) .eyebrow{
    color:#15957f
}


/* ---------------------------------------------------------
   PACKAGE SUMMARY
   --------------------------------------------------------- */

body:not(:has(.admin-shell)) .package-summary{
    background:#f5fbf9!important;
    border-color:#dceee9!important
}

body:not(:has(.admin-shell)) .package-label{
    color:#15957f!important
}

body:not(:has(.admin-shell)) .package-balance strong{
    color:#302722!important
}

body:not(:has(.admin-shell)) .package-balance span{
    color:#82756d!important
}

body:not(:has(.admin-shell)) .package-footer{
    color:#8a7c73!important
}

body:not(:has(.admin-shell)) .package-footer strong{
    color:#51443e!important
}


/* ---------------------------------------------------------
   LOGIN / FORMS
   --------------------------------------------------------- */

body:not(:has(.admin-shell)) .loginbox .card{
    background:#fffdfb
}

body:not(:has(.admin-shell)) .formgrid input,
body:not(:has(.admin-shell)) .formgrid select,
body:not(:has(.admin-shell)) .formgrid textarea{
    background:#fff;
    border-color:#dfd3c9;
    color:#302722;
    outline:none;
    transition:
        border-color .18s ease,
        box-shadow .18s ease
}

body:not(:has(.admin-shell)) .formgrid input:focus,
body:not(:has(.admin-shell)) .formgrid select:focus,
body:not(:has(.admin-shell)) .formgrid textarea:focus{
    border-color:#20b99e;
    box-shadow:0 0 0 3px rgba(32,185,158,.10)
}


/* ---------------------------------------------------------
   GOOGLE BUTTON
   --------------------------------------------------------- */

body:not(:has(.admin-shell)) .google{
    background:#fff;
    color:#443832;
    border-color:#dfd3c9;
    box-shadow:none
}

body:not(:has(.admin-shell)) .google:hover{
    background:#faf6f2;
    border-color:#d4c4b8
}


/* ---------------------------------------------------------
   FILTERS
   --------------------------------------------------------- */

body:not(:has(.admin-shell)) .filter{
    background:#fffdf9;
    border-color:#e5d8ce;
    color:#65574f
}

body:not(:has(.admin-shell)) .filter:hover{
    border-color:#20b99e;
    color:#168a76
}

body:not(:has(.admin-shell)) .filter.active{
    background:#302722;
    border-color:#302722;
    color:#fff
}


/* ---------------------------------------------------------
   PROGRESS
   --------------------------------------------------------- */

body:not(:has(.admin-shell)) .progress{
    background:#eee6df
}

body:not(:has(.admin-shell)) .progress span{
    background:#20b99e
}


/* ---------------------------------------------------------
   NOTICE
   --------------------------------------------------------- */

body:not(:has(.admin-shell)) .notice{
    border-left-color:#d3a57f;
    background:#fff6ed;
    color:#725743
}


/* ---------------------------------------------------------
   CUSTOMER SECTION TITLE
   --------------------------------------------------------- */

body:not(:has(.admin-shell)) .section-title h1,
body:not(:has(.admin-shell)) .section-title h2{
    color:#302722
}


/* ---------------------------------------------------------
   CUSTOMER FOOTER
   --------------------------------------------------------- */

body:not(:has(.admin-shell)) footer{
    color:#8b7e75
}


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

@media(max-width:800px){

    body:not(:has(.admin-shell)) .wrap{
        width:min(94%,1180px);
        margin-top:20px
    }

    body:not(:has(.admin-shell)) .session{
        border-radius:14px
    }

    body:not(:has(.admin-shell)) .btn{
        border-radius:999px
    }
}

/* =========================================
   FINAL DEFINITIVE MOBILE CUSTOMER HEADER
   Keeps booking link visible on mobile
   ========================================= */
@media (max-width:800px){
    body:not(:has(.admin-shell)) .topbar{
        padding:0 15px !important;
        justify-content:flex-end !important;
    }

    body:not(:has(.admin-shell)) .topbar nav{
        display:flex !important;
        align-items:center !important;
        justify-content:flex-end !important;
        gap:12px !important;
        width:100% !important;
        font-size:13px !important;
    }

    body:not(:has(.admin-shell)) .topbar nav > a,
    body:not(:has(.admin-shell)) .topbar nav > a:not(.btn){
        display:inline-flex !important;
        align-items:center !important;
    }

    body:not(:has(.admin-shell)) .topbar .hello{
        display:none !important;
    }
}