/* ================================
   Editor-only fallbacks for Bootstrap CSS variables
   (keeps linters quiet; won't override Bootstrap at runtime)
   ================================ */
@layer bootstrap-var-fallbacks {
    :root{
        --bs-border-color: #dee2e6;
        --bs-body-bg: #ffffff;
        --bs-body-tertiary: #f8f9fa;
        --bs-body-secondary: #f0f2f5;
        --bs-info-border-subtle: #b6e0fe;
        --bs-info-bg-subtle: #e7f5ff;
        --bs-info-text-emphasis: #055160;
        --bs-primary: #0d6efd;
        --bs-secondary-color: #6c757d;
    }
}

/* ================================
   Global / shared styles
   ================================ */
body {
    font-family: 'Segoe UI', Arial, sans-serif;
    background-color: #f8f9fa;
    color: #333;
}

h1, h2, h5 { font-weight: 600; }

/* Buttons */
.btn-custom {
    background-color: rgb(255, 131, 39);
    border: none; color: #fff; font-weight: bold;
    border-radius: 8px; padding: .5rem 1.2rem;
    transition: transform .3s ease;
}
.btn-custom:hover {
    background: #ff8e00; color: #fff;
    transform: translateY(-1px);
    transition: transform .1s ease-in-out;
}
.btn-custom2 {
    background: rgb(39,100,255); border: none; color: #fff; font-weight: bold;
    border-radius: 8px; padding: .5rem 1.2rem; transition: transform .3s ease;
}
.btn-custom2:hover {
    background: #0d64d5; color: #fff; transform: translateY(-1px);
    transition: transform .1s ease-in-out;
}
.btn-danger-custom {
    background: #dc3545; color: #fff; border: none; font-weight: bold;
    border-radius: 8px; padding: .5rem 1.2rem; transition: background-color .3s ease;
}
.btn-danger-custom:hover { background: #bb2d3b; color: #fff; }

.btn-sleek:active { transform: translateY(1px); }

/* Cards */
.card { border-radius: 12px; transition: transform .3s ease, box-shadow .3s ease; }
@media (hover: hover) {
    .card:hover { transform: translateY(-5px); box-shadow: 0 8px 24px rgba(0,0,0,.1); }
}

/* Forms */
form .form-control { border-radius: 8px; padding: 10px; }
form button { width: 100%; }

/* Hero / sections used elsewhere */
.hero-gradient { background: linear-gradient(135deg,#ffecd2 0%,#fcb69f 100%); }
.section-light { background: #f8f9fa; }
.section-accent { background: #fff7f0; }
.section-tight { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.measure { max-width: 60ch; }

/* Image helpers */
.card-img-top {
    height: 250px; object-fit: cover;
    border-top-left-radius: 12px; border-top-right-radius: 12px;
}
.playful-images img { height: 320px; }
@media (max-width: 768px){ .playful-images img { height: 220px; } }

/* Hero spacing variants (used elsewhere) */
.hero.hero--top { align-items: flex-start; }
.hero.hero--top .hero-content { padding-top: clamp(3rem, 12vh, 8rem); }
.hero-lead { margin-top: clamp(1.75rem, 6vh, 4.5rem); }
.hero-ctas { display:flex; flex-direction:column; align-items:center; gap: clamp(.85rem,2.2vh,1.25rem); margin-top: clamp(2.25rem,8vh,6rem); }
.btn-plush { font-size: 1.15rem; padding: .9rem 1.6rem; border-radius: .85rem; min-width: 18.5rem; }

/* Service page CTA (kept for other pages) */
.section-header h1 { letter-spacing: .2px; margin-bottom: clamp(.25rem,.6vh,.5rem); }
.section-header .intro-text {
    color:#6c757d; font-size: clamp(.95rem,1.1vw,1.05rem);
    line-height:1.6; max-width:62ch;
    margin-top: clamp(.6rem,1.5vh,1rem);
    margin-bottom: clamp(1.25rem,3vh,1.75rem);
}
.cta-row{ display:flex; flex-direction:column; gap:.55rem; align-items:center; margin-bottom:.25rem; }
.cta-line{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; justify-content:center; }
.cta-label{ font-weight:600; color:#495057; }
.btn-compact{ font-size:.92rem; padding:.5rem .9rem; border-radius:.55rem; line-height:1.25; box-shadow:0 2px 6px rgba(0,0,0,.06); }

/* Weekly banners always visible */
.alert.alert-static { animation:none!important; transition:none!important; opacity:1!important; visibility:visible!important; max-height:none!important; }

/* Mobile button fit */
@media (max-width: 768px){
    body.page-eval .btn,
    body.page-booking .btn { width: 100%; margin-bottom: 10px; }
    .card-img-top { height: 200px; }
    .hero-gradient .container { padding: 20px; }
    .hero-gradient h1 { font-size: 2rem; }
    .hero-gradient p { font-size: 1rem; }
    .hero.hero--top .hero-content { padding-top: 3rem; }
    .hero-lead { margin-top: 1.25rem; }
    .hero-ctas { margin-top: 1.5rem; gap: .75rem; width: 100%; }
    .btn-plush { min-width: 0; width: 100%; }
}

/* ================================
   Booking page structural styles
   ================================ */

/* Section card shell */
.section-card{
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 1rem;
    background: var(--bs-body-bg, #fff);
}
.section-card .section-head{
    border-bottom: 1px dashed var(--bs-border-color, #dee2e6);
    padding: .9rem 1.1rem;
    background: var(--bs-body-tertiary, #f8f9fa);
    border-top-left-radius: 1rem; border-top-right-radius: 1rem;
}
.section-card .section-body{ padding: 1rem; }

/* Planning banner */
.planner-banner{
    border: 1px solid var(--bs-info-border-subtle, #b6e0fe);
    background: var(--bs-info-bg-subtle, #e7f5ff);
    color: var(--bs-info-text-emphasis, #055160);
    border-radius: .75rem;
}

/* Day tiles */
.day-tile{
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .75rem;
    padding: 1rem;            /* consolidated (was .75rem earlier) */
    height: 100%;
    background: var(--bs-body-bg, #fff);
    min-height: 180px;        /* roomier touch targets */
}
.day-tile .tile-head{
    border-bottom: 1px dashed var(--bs-border-color, #dee2e6);
    padding-bottom: .35rem; margin-bottom: .6rem;
}
.svc-btn.active{ box-shadow: 0 0 0 .2rem rgba(0,0,0,.08); }

/* “Your Bookings” panel */
.bookings-wrap{
    background: var(--bs-body-secondary, #f0f2f5);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 1rem;
}
.bookings-wrap .wrap-head{
    border-bottom: 1px dashed var(--bs-border-color, #dee2e6);
    padding: .9rem 1.1rem;
    background: var(--bs-body-tertiary, #f8f9fa);
    border-top-left-radius: 1rem; border-top-right-radius: 1rem;
}
.bookings-wrap .wrap-body{ padding: 1rem; }

/* Utility */
.badge-status{ font-weight: 500; }
.hr-dashed{ border-top: 1px dashed var(--bs-border-color, #dee2e6); opacity: .7; }
.text-compact{ max-width: 70ch; margin-inline: auto; }

/* ================================
   Calendar-like two-week layout
   ================================ */
.calendar-head{
    display:flex; align-items:center; justify-content:center;
    padding:.4rem 0 .6rem;
    border-bottom:1px dashed var(--bs-border-color, #dee2e6);
    margin-bottom:.8rem;
    background: var(--bs-body-bg, #fff);
}
.calendar-grid{
    display:grid;
    /* Base: 7 columns for md+ so large screens line up with weekday labels */
    grid-template-columns: repeat(7, 1fr);
    gap: 1rem;
    align-items:start;
}
.calendar-label{
    font-size:.85rem; font-weight:600;
    color: var(--bs-secondary-color, #6c757d);
    text-align:center;
    padding:.25rem 0 .35rem;
    border-bottom:1px dashed var(--bs-border-color, #dee2e6);
}
.calendar-cell{ min-width:0; }

/* Phones: 2-up grid, hide weekday labels */
@media (max-width: 767.98px){
    .calendar-grid{ grid-template-columns: repeat(2, 1fr); }
    .calendar-label{ display:none; }
}

/* Tablets (768–991px): 3-up grid, also hide weekday labels
   (each tile already shows "Mon Mar 1" in its header) */
@media (min-width: 768px) and (max-width: 991.98px){
    .calendar-grid{ grid-template-columns: repeat(3, 1fr); }
    .calendar-label{ display:none; }
}

/* XL screens: give tiles a bit more height */
@media (min-width: 1400px){
    .day-tile { min-height: 200px; }
}

/* ================================
   “Today” highlight
   ================================ */
.day-tile.is-today {
    background-color: #f0f7ff; /* fallback */
    border-color: #9ec5fe;
    box-shadow: 0 0 0 .15rem rgba(13,110,253,.12);
}
@supports (color: color-mix(in oklab, black 10%, white)) {
    .day-tile.is-today{
        background: color-mix(in oklab, var(--bs-primary, #0d6efd) 8%, var(--bs-body-bg, #fff) 92%);
        border-color: color-mix(in oklab, var(--bs-primary, #0d6efd) 35%, var(--bs-border-color, #dee2e6) 65%);
        box-shadow: 0 0 0 .18rem color-mix(in oklab, var(--bs-primary, #0d6efd) 18%, transparent);
    }
}
.day-tile.is-today .tile-head{ background:#e8f1ff; border-bottom-color:#9ec5fe; }

/* Booked day (neutral gray) */
.day-tile.is-booked{
    background: var(--bs-body-secondary, #f0f2f5);
    border-color: var(--bs-border-color, #dee2e6);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
}
.day-tile.is-booked .tile-head{
    background: var(--bs-body-tertiary, #f8f9fa);
    border-bottom-color: var(--bs-border-color, #dee2e6);
}

/* Today: remove side bar */
.day-tile.is-today::before{ display: none !important; }

/* If a day is both today and booked, keep Today’s blue */
.day-tile.is-today.is-booked {
    background-color: #f0f7ff;
    border-color: #9ec5fe;
    box-shadow: 0 0 0 .15rem rgba(13,110,253,.12);
}
@supports (color: color-mix(in oklab, black 10%, white)) {
    .day-tile.is-today.is-booked{
        background: color-mix(in oklab, var(--bs-primary, #0d6efd) 8%, var(--bs-body-bg, #fff) 92%);
        border-color: color-mix(in oklab, var(--bs-primary, #0d6efd) 35%, var(--bs-border-color, #dee2e6) 65%);
        box-shadow: 0 0 0 .18rem color-mix(in oklab, var(--bs-primary, #0d6efd) 18%, transparent);
    }
}

/* Booked badge shown ABOVE the tile (normal flow) */
.calendar-cell .badge-booked{
    display: inline-block;
    margin: 0 0 .40rem .10rem;   /* <-- space between badge and the tile */
    font-size: .70rem;
    line-height: 1;
    padding: .15rem .45rem;
    border-radius: .5rem;
    opacity: .95;
}

/* ================================
   Mobile-first booking refinements
   (Safe: does not alter desktop)
   ================================ */

/* 1) Collapsible banner polish */
@media (max-width: 767.98px){
    .planner-banner { text-align: left; }
    .planner-banner .text-compact { max-width: none; }
    .planner-banner h4 { margin-bottom: .25rem; }
    .planner-banner .small { font-size: .95rem; line-height: 1.45; }
}

/* 2) Bigger tap targets for service buttons & form controls */
@media (max-width: 575.98px){
    .calendar-grid { gap: .75rem; }
    .day-tile { padding: .85rem; }
    .day-tile .tile-head strong { font-size: 1rem; }
    .svc-btn.btn-sm { font-size: 1rem; padding: .65rem .9rem; line-height: 1.15; }
    .day-form .form-select.form-select-sm,
    .day-form .form-control.form-control-sm{
        font-size: 1rem; padding: .5rem .75rem; height: auto;
    }
    .day-form .form-label.small { font-size: .95rem; }
    .day-form .btn.btn-sm { padding: .6rem .95rem; font-size: 1rem; }
}

/* 3) Tabs: wider hit area + sticky on phones */
.nav-tabs .nav-link { white-space: nowrap; }
@media (max-width: 575.98px){
    .nav-tabs .nav-link {
        padding: .75rem 1rem;
        font-weight: 600;
        text-align: center;
    }
    .mobile-sticky-tabs{
        position: sticky;
        top: 56px;           /* below navbar height */
        z-index: 1010;       /* above content, below modals */
        background: var(--bs-body-bg, #fff);
    }
}

/* 4) Your Bookings: roomier items on phones */
@media (max-width: 575.98px){
    .bookings-wrap h3 { font-size: 1.25rem; }
    .bookings-wrap .list-group-item { padding: .85rem 1rem; }
    .bookings-wrap .badge-status { font-size: .85rem; }
}

/* 5) Navbar: larger tap targets without changing layout */
@media (max-width: 575.98px){
    .navbar .nav-link{
        padding-top: .8rem; padding-bottom: .8rem;
    }
    .navbar .btn { padding: .55rem .9rem; }
}

/* 6) Optional subtle improvement: make calendar 2-up a bit tighter on phones */
@media (max-width: 575.98px){
    .calendar-grid{ grid-template-columns: repeat(2, 1fr); gap: .75rem; }
}

/* 7) Ensure sticky elements don't collide with Bootstrap toasts/alerts */
@media (max-width: 575.98px){
    body { scroll-padding-top: 64px; } /* so anchored jumps don't hide under sticky tabs */
}

/* ===============================
   Evaluation page mobile polish
   (scoped via body.page-eval)
   =============================== */
@media (max-width: 767.98px){
    body.page-eval .intro-text{
        font-size: 1rem;
        line-height: 1.5;
    }
    body.page-eval .card{
        padding: 1rem !important; /* tighten padding on phones only */
    }
    body.page-eval .form-label{
        font-size: 1rem;
    }
    body.page-eval .form-control,
    body.page-eval .btn{
        min-height: 44px; /* better tap targets */
    }
    body.page-eval #upload-section .upload-input-row{
        flex-wrap: wrap;
    }
    body.page-eval #upload-section .upload-input-row .btn{
        margin-top: .5rem;
    }
}

/* ===============================
   Services page mobile polish
   (scoped via body.page-services)
   =============================== */
@media (max-width: 767.98px){
    body.page-services .card-body { padding: 1rem; }
    body.page-services .card-title { font-size: 1.1rem; margin-bottom: .5rem; }
    body.page-services .card-text { font-size: .95rem; line-height: 1.45; }
    body.page-services .card-img-top { height: 220px; }
    body.page-services .btn { min-height: 36px; }
}

/* ===============================
   About page mobile polish
   (scoped via body.page-about)
   =============================== */
@media (max-width: 767.98px){
    body.page-about h1 { font-size: 1.6rem; margin-bottom: 1rem; }
    body.page-about h3 { font-size: 1.2rem; margin-top: 1.5rem; }
    body.page-about p { font-size: 1rem; line-height: 1.5; }
    body.page-about .img-fluid { margin-top: 1rem; max-height: 260px; object-fit: cover; }
    body.page-about .btn { min-height: 44px; }
}

/* ===============================
   Login page mobile polish
   (scoped via body.page-login)
   =============================== */
@media (max-width: 767.98px){
    body.page-login .card { padding: 1rem !important; }
    body.page-login .form-label { font-size: 1rem; }
    body.page-login .form-control,
    body.page-login .btn { min-height: 44px; }
    body.page-login .btn { width: 100%; }
}
/* ===============================
   Admin dashboard (scoped via page-admin)
   =============================== */
@media (max-width: 767.98px){
    body.page-admin .card { padding: 1rem !important; }
    body.page-admin .btn,
    body.page-admin .form-control,
    body.page-admin .form-select { min-height: 44px; }
    body.page-admin .btn { width: 100%; }
    body.page-admin .nav-tabs .nav-link { padding: .75rem 1rem; }
    body.page-admin .table-responsive { margin-bottom: 1rem; }
    /* If you have toolbars above tables */
    body.page-admin .toolbar,
    body.page-admin .filters { gap: .5rem; flex-wrap: wrap; }
}

/* Make any admin data tables scroll instead of squish on phones */
body.page-admin .table-wrap { overflow-x: auto; }
body.page-admin .table-wrap table { min-width: 640px; }

/* ===============================
   Admin emergency page
   =============================== */
@media (max-width: 767.98px){
    body.page-admin-emergency .card { padding: 1rem !important; }
    body.page-admin-emergency .btn,
    body.page-admin-emergency .form-control,
    body.page-admin-emergency .form-select { min-height: 44px; }
    body.page-admin-emergency .btn { width: 100%; }
}

/* ===============================
   Uploads page
   =============================== */
@media (max-width: 767.98px){
    body.page-uploads .card { padding: 1rem !important; }
    body.page-uploads input[type="file"] { min-height: 44px; }
    body.page-uploads .btn { min-height: 44px; width: 100%; }
}

/* ===============================
   Success / Error pages
   =============================== */
@media (max-width: 767.98px){
    body.page-success .card,
    body.page-error .card { padding: 1rem !important; }
    body.page-success .btn,
    body.page-error .btn { min-height: 44px; width: 100%; }
}

/* If you display long stack traces or logs on error pages */
body.page-error pre,
body.page-error code { white-space: pre-wrap; word-break: break-word; }

/* ===============================
   Admin page (mobile-only slimming + sticky controls)
   =============================== */
@media (max-width: 575.98px){
    /* make all admin buttons sleeker on phones, incl. top-right, all tabs */
    .page-admin .btn{
        padding: .45rem .7rem;
        font-size: .9rem;
        line-height: 1.1;
        border-radius: .5rem;
    }

    /* sticky toolbar in Bookings (below the sticky tabs) */
    .page-admin .admin-sticky-controls{
        position: sticky;
        top: 104px; /* ~56px navbar + ~48px tabs */
        z-index: 1005;
        background: var(--bs-body-bg, #fff);
        padding-top: .25rem;
        padding-bottom: .25rem;
        border-bottom: 1px dashed var(--bs-border-color, #dee2e6);
    }

    /* tables read better without sideways scroll */
    .page-admin .table{
        font-size: .92rem;
    }
    .page-admin .table td,
    .page-admin .table th{
        white-space: normal;
        word-break: break-word;
        vertical-align: middle;
    }
}

/* Center the group header rows your JS inserts (tr.table-light) */
.page-admin #bookingTableBody tr.table-light td{
    text-align: center;
}

/* Phone-specific overrides for sleeker buttons + inline toolbar buttons */
@media (max-width: 575.98px){
    .page-admin .btn{
        min-height: 36px;          /* override 44px so buttons feel slimmer */
    }
    /* Keep toolbar buttons inline (not full-width) so they sit side-by-side */
    .page-admin .admin-sticky-controls .btn{
        width: auto;               /* override the 100% width from the 767.98px block */
    }
}
/* Give the Invoicing table more horizontal room */
.page-admin #invoicing .table-wrap {
    overflow-x: auto;     /* enables horizontal scrolling if needed */
}

.page-admin #invoicing table {
    min-width: 900px;     /* more graceful spacing, keeps text horizontal */
}

/* ===============================
   Admin Dashboard: Bookings tab table spacing
   =============================== */
body.page-admin .tab-pane#bookings table {
    min-width: 900px; /* give enough width so columns stay horizontal */
}

@media (max-width: 991.98px){
    body.page-admin .tab-pane#bookings .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    body.page-admin .tab-pane#bookings table {
        min-width: 800px;
        font-size: .9rem;
    }
}
/* --- Admin > Bookings: make "Mark Paid" button compact --- */
.page-admin #bookings .btn-mark-paid{
    width: auto !important;           /* never full width */
    display: inline-block;
    white-space: nowrap;
    padding: .35rem .6rem;            /* a hair smaller than .btn-sm */
    font-size: .875rem;               /* ~14px */
    line-height: 1.1;
    border-radius: .45rem;
}

/* --- Admin > Bookings: refine "Mark Paid" for mobile only --- */
@media (max-width: 767.98px){
    .page-admin #bookings .btn-mark-paid {
        width: auto !important;
        padding: .3rem .5rem;            /* smaller tap area */
        font-size: .8rem;                /* slightly smaller text */
        line-height: 1;                  /* tighter */
        border-radius: .4rem;
        display: block;
        margin: 0.25rem auto;            /* centers it horizontally */
        text-align: center;
    }

    /* tighten the action cell */
    .page-admin #bookings td:last-child {
        text-align: center;
        vertical-align: middle;
    }
}

/* --- FINAL tweak: center the Mark Paid button perfectly on mobile --- */
@media (max-width: 575.98px){
    .page-admin #bookings .btn-mark-paid {
        display: block !important;         /* allows margin auto centering */
        margin-left: auto !important;
        margin-right: auto !important;
        padding-top: .15rem !important;
        padding-bottom: .15rem !important;
        line-height: 1 !important;
        min-height: auto !important;
        font-size: .8rem !important;
        border-radius: .35rem !important;
    }

    .page-admin #bookings td:last-child {
        text-align: center !important;
        vertical-align: middle !important;
    }
}