/* ========================================
   SERVICE STATUS
   ======================================== */

.status-container{

    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:22px;

    align-items:start;

    max-width:1200px;
    margin:0 auto;

}

/* ========================================
   TODAY STATUS CARD
   ======================================== */

.status-card{

    width:100%;

    background:#f5f7fb;

    border-radius:var(--radius);

    padding:32px;

    box-shadow:var(--shadow);

}

.status-card h3{

    margin-bottom:20px;

    color:var(--primary);

}

.info-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:12px 0;

    border-bottom:1px solid #e4e4e4;

}


/* ========================================
   CALENDAR
   ======================================== */

.calendar-card{

    background:#fff;

    border-radius:var(--radius);

    padding:28px;

    box-shadow:var(--shadow);

}


/* Header */

.calendar-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:20px;

}

.month-btn{

    width:36px;
    height:36px;

    border:none;

    border-radius:50%;

    background:#f3f3f3;

    cursor:pointer;

    transition:var(--transition);

}

.month-btn:hover{

    background:var(--primary);

    color:white;

}

#monthYear{

    font-size:clamp(1.35rem, 2vw, 1.75rem);

    font-weight:700;

}


/* Legend */

.calendar-legend{

    display:flex;

    gap:18px;

    margin-bottom:18px;

    flex-wrap:wrap;

}

.calendar-legend span{

    display:flex;

    align-items:center;

    gap:6px;

    font-size:var(--text-sm);

}

.dot{

    width:10px;

    height:10px;

    border-radius:50%;

}


/* Week Title */

.calendar-week{

    display:grid;

    grid-template-columns:repeat(7,1fr);

    text-align:center;

    margin-bottom:10px;

    color:#666;

    font-size:var(--text-sm);

    font-weight:600;

}


/* Calendar Body */

.calendar-grid{

    display:grid;

    grid-template-columns:repeat(7,1fr);

    gap:8px;

}

.calendar-day{

    width:40px;

    height:40px;

    margin:auto;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:14px;

    color:white;

    cursor:pointer;

    transition:var(--transition);

}

.calendar-day:hover{

    transform:scale(1.08);

}

.empty{

    visibility:hidden;

}

.today{

    outline:3px solid var(--primary);

}


/* ========================================
   CALENDAR STATUS COLOR
   ======================================== */

.green{

    background:var(--green);

}

.yellow{

    background:var(--yellow);

}

.red{

    background:var(--red);

}

.gray{

    background:var(--gray);

}

/* ========================================
   HOME OVERVIEW
======================================== */

.home-overview-card{

    background:
        radial-gradient(circle at top right, rgba(0,119,255,.08), transparent 26%),
        linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
    border:1px solid rgba(0,53,102,.08);
    overflow:hidden;

}

.overview-header{

    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:18px;
    margin-bottom:24px;

}

.overview-kicker{

    display:inline-flex;
    padding:8px 14px;
    margin-bottom:14px;
    border-radius:999px;
    background:rgba(0,119,255,.10);
    color:var(--primary);
    font-size:12px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;

}

.overview-cta{

    border:none;
    border-radius:999px;
    padding:14px 18px;
    background:linear-gradient(135deg, var(--accent), #0062cc);
    color:#fff;
    font-weight:700;
    cursor:pointer;
    transition:var(--transition);
    box-shadow:0 12px 22px rgba(0,119,255,.18);

}

.overview-cta:hover{

    transform:translateY(-2px);
    box-shadow:0 16px 30px rgba(0,119,255,.22);

}

.home-booking-overview{

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

}

.overview-summary{

    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:18px;

}

.overview-highlight,
.overview-metric,
.overview-day{

    border:1px solid rgba(0,53,102,.08);
    border-radius:24px;
    background:rgba(255,255,255,.88);
    box-shadow:0 14px 34px rgba(12,33,71,.05);

}

.overview-highlight{

    padding:28px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    min-height:190px;
    position:relative;
    overflow:hidden;

}

.overview-highlight::after{

    content:"";
    position:absolute;
    inset:auto -20px -30px auto;
    width:150px;
    height:150px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(0,119,255,.12), transparent 70%);

}

.overview-highlight.status-green{

    border-color:rgba(46,204,113,.18);

}

.overview-highlight.status-yellow{

    border-color:rgba(241,196,15,.18);

}

.overview-highlight.status-red{

    border-color:rgba(231,76,60,.18);

}

.overview-highlight.status-gray{

    border-color:rgba(207,207,207,.22);

}

.overview-label{

    display:inline-flex;
    width:fit-content;
    padding:8px 12px;
    border-radius:999px;
    background:rgba(0,53,102,.06);
    color:var(--primary);
    font-size:12px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;

}

.overview-highlight strong{

    display:block;
    margin-top:10px;
    font-size:clamp(2rem, 4vw, 2.75rem);
    color:var(--primary);
    line-height:1.15;

}

.overview-highlight p{

    max-width:none;
    margin-top:auto;
    color:#677688;
    line-height:var(--line-relaxed);
    position:relative;
    z-index:1;

}

.overview-metrics{

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

}

.overview-metric{

    padding:18px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    min-height:64px;

}

.overview-metric span{

    font-size:var(--text-xs);
    color:#718095;
    letter-spacing:1px;
    text-transform:uppercase;

}

.overview-metric strong{

    margin-top:10px;
    font-size:clamp(1.05rem, 1.6vw, 1.15rem);
    color:var(--primary);

}

.overview-strip{

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:18px;

}

.overview-day{

    padding:20px;
    text-align:left;
    cursor:pointer;
    transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    display:flex;
    flex-direction:column;
    gap:15px;
    min-height:164px;

}

.overview-day:hover{

    transform:translateY(-3px);
    box-shadow:0 18px 40px rgba(12,33,71,.08);

}

.overview-day.status-green{

    border-color:rgba(46,204,113,.18);

}

.overview-day.status-yellow{

    border-color:rgba(241,196,15,.18);

}

.overview-day.status-red{

    border-color:rgba(231,76,60,.18);

}

.overview-day.status-gray{

    border-color:rgba(207,207,207,.22);

}

.overview-day-top{

    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;

}

.overview-day-name{

    display:block;
    font-size:var(--text-sm);
    color:#799;
    letter-spacing:1px;
    text-transform:uppercase;
    margin-bottom:4px;

}

.overview-day-date{

    font-size:1.1rem;
    color:var(--primary);

}

.overview-day-badge{

    padding:7px 11px;
    border-radius:999px;
    background:rgba(0,53,102,.06);
    color:var(--primary);
    font-size:var(--text-xs);
    font-weight:700;

}

.overview-day-status{

    display:flex;
    align-items:center;
    gap:10px;
    color:#627285;
    font-size:var(--text-sm);
    line-height:1.5;
    min-height:44px;

}

.status-dot{

    width:10px;
    height:10px;
    border-radius:50%;
    flex:0 0 auto;

}

.status-dot.green{

    background:var(--green);

}

.status-dot.yellow{

    background:var(--yellow);

}

.status-dot.red{

    background:var(--red);

}

.status-dot.gray{

    background:var(--gray);

}

.overview-day-periods{

    display:flex;
    gap:10px;
    flex-wrap:wrap;

}

.period-chip{

    padding:8px 12px;
    border-radius:999px;
    font-size:var(--text-xs);
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;

}

.period-chip.open{

    background:rgba(46,204,113,.12);
    color:var(--green);

}

.period-chip.closed{

    background:rgba(207,207,207,.24);
    color:#8b95a4;

}

.home-bottom-links{

    display:flex;
    justify-content:center;
    padding:0 24px 52px;

}

.home-admin-link{

    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:128px;
    padding:10px 16px;
    border-radius:999px;
    background:rgba(0,53,102,.06);
    color:rgba(0,53,102,.62);
    font-size:var(--text-sm);
    font-weight:600;
    border:1px solid rgba(0,53,102,.08);
    box-shadow:none;
    text-decoration:none;
    opacity:.72;

}

.home-admin-link:hover{

    transform:translateY(-2px);
    opacity:.95;
    background:rgba(0,53,102,.09);

}

@media(max-width:1100px){

    .overview-strip{

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

    }

}

@media(max-width:768px){

    .overview-header{

        flex-direction:column;

    }

    .overview-cta{

        width:100%;

    }

    .overview-strip{

        grid-template-columns:1fr;

    }

}