/* ==========================================================================
   MOBILE CALENDAR APP
   ========================================================================== */
:root {
    --color-primary: #0C1B52; /* primary blue */
    --color-secondary: #0046AD; /* used for subtext */
    --color-tertiary: #33A0F9; /* used for hovered assets */
    --color-darkblue: #091238;
    --color-royalblue: #005CA8;
    /* extras for smoother blues */
    --blue-50: #eef6ff;
    --blue-100: #d9ecff;
    --blue-200: #bfe0ff;
    --blue-300: #99cdff;
    --blue-400: #66b5ff;
    --blue-500: #3399ff;
    --blue-600: #1e7fe5;
    --blue-700: #0f62c9;
    --blue-800: #0a4ea5;
    --cyan-400: #34d3f6;
    --teal-400: #2cc5c0;
    --bg: #f6f8fc;
    --card: #ffffff;
    --ink: #0e1a33;
    --muted: #6b7a99;
    --primary: #2f6cf6;
    --danger: #FF3B3B;
    --primary-ink: #fff;
    --chip: #eef3ff;
    --pill: #eff3fb;
    --line: #e6ecf6;
    --shadow: 0 8px 24px rgba(14,26,51,.08);
    --radius: 16px;
}
* {
    box-sizing: border-box
}
html, body {
    height: 100%
}
body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 15px/1.45 system-ui, -apple-system, 'Poppins', sans-serif;
}
/* Sticky header wrapper */
header.top {
    position: sticky;
    top: 0;
    z-index: 50;
    padding: 12px 18px 6px;
    background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0));
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    border-bottom: 1px solid rgba(255,255,255,.25);
}

/* Optional: a little drop shadow when page is scrolled */
body.is-scrolled header.top {
    box-shadow: 0 8px 24px rgba(9,18,56,.12);
}

.app {
    max-width: 430px;
    margin-inline: auto;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.hello {
    font-weight: 700;
    font-size: 22px
}

.subnote {
    color: var(--muted);
    font-size: 13px;
    margin-top: 4px
}

/* segmented (Home header) */
.seg {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    background: var(--pill);
    padding: 4px;
    border-radius: 999px;
    width: max-content;
}

    .seg button {
        border: 0;
        background: transparent;
        padding: 8px 12px;
        border-radius: 999px;
        font-weight: 600;
        color: var(--muted);
    }

        .seg button.is-active {
            background: var(--card);
            color: var(--ink);
            box-shadow: var(--shadow);
        }

/* pages */
.pages {
    flex: 1;
    padding: 12px 14px 20px;
}

.page {
    display: none
}

    .page.is-active {
        display: block
    }

/* cards */
.card {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

/* calendar (Home) */
.cal-wrap {
    padding: 14px
}

.cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    font-weight: 700;
}

    .cal-head .nav {
        display: flex;
        gap: 8px;
    }

        .cal-head .nav button {
            border: 0;
            background: var(--pill);
            width: 32px;
            height: 32px;
            border-radius: 50%
        }

.cal-btn i {
    font-size: 8px;
    line-height: 1;
}

.dow, .dates {
    display: grid;
    grid-template-columns: repeat(7,1fr);
    gap: 8px;
    text-align: center;
}

.dow {
    color: var(--muted);
    font-size: 12px;
    margin: 8px 0 6px
}

.day {
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #f2f5fb;
    color: #334;
    font-weight: 700;
}

    .day.has-event {
        background: #198754;
        color: #fff;
    }
    /* days with trainings */
    .day.is-today {
        background: #0046AD;
        color: #fff;
    }
    /* today (overrides)  */
    .day.is-selected {
        outline: 2px solid rgba(0,70,173,.25);
    }
/* click selection ring */



.schedule {
    margin-top: 12px;
    padding: 12px
}

.sec-title {
    font-weight: 800;
    margin: 4px 2px 10px
}

.item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--chip);
    margin: 8px 0;
}

    .item .bar {
        width: 4px;
        align-self: stretch;
        border-radius: 999px;
        background: var(--primary)
    }
    .item .barUp {
        width: 4px;
        align-self: stretch;
        border-radius: 999px;
        background: var(--danger)
    }

    .item .meta {
        font-size: 12px;
        color: var(--muted)
    }

    .item .title {
        font-weight: 700
    }

.pill {
    background: #edf4ff;
    color: #2c61e8;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    margin-left: auto
}

/* horizontal day scroller (Trainings) */
.dayrail {
    display: flex;
    gap: 10px;
    overflow: auto;
    padding: 12px 12px 6px;
}

.chip-day {
    min-width: 66px;
    text-align: center;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 8px 8px;
    line-height: 1.1;
}

    .chip-day small {
        color: var(--muted)
    }

    .chip-day strong {
        display: block;
        margin-top: 4px
    }

    .chip-day.is-active {
        background: var(--primary);
        color: #fff;
        border-color: transparent
    }

        .chip-day.is-active small {
            color: #eef
        }

.list {
    padding: 10px 12px 4px
}

.train {
    display: flex;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--card);
    margin-bottom: 10px;
}

.icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: #eef3ff;
    color: #2a55e6;
    font-weight: 800;
}

.t-title {
    font-weight: 700
}

.t-sub {
    color: var(--muted);
    font-size: 12px
}

.badge {
    background: #e9f7ef;
    color: #198754;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700
}

/* bottom nav */
.tabbar {
    position: relative;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    max-width: 430px;
    width: calc(100% - 24px);
    box-shadow: var(--shadow);
    border-radius: 999px;
    padding: 8px;
    display: flex;
    justify-content: space-around;
    /*z-index: 5;*/
    background: rgba(255,255,255,0.85); /* mild transparency */
    backdrop-filter: saturate(160%) blur(8px); /* glass effect (Safari/Chromium) */
    -webkit-backdrop-filter: saturate(160%) blur(8px);
    border: 1px solid rgba(0,0,0,0.06); /* subtle edge */
    box-shadow: 0 8px 24px rgba(14,26,51,.12); /* a touch more depth */
}

    .tabbar button {
        flex: 1;
        border: 0;
        background: transparent;
        padding: 10px 6px;
        border-radius: 999px;
        color: var(--muted);
        font-weight: 700;
        cursor: pointer;
        transition: background-color .2s ease, color .2s ease, transform .1s ease;
        color: var(--muted);
    }

        .tabbar button.is-active {
            background: var(--primary);
            color: var(--primary-ink);
        }

        /* Optional: keyboard focus ring */
        .tabbar button:focus-visible {
            outline: 0;
            box-shadow: 0 0 0 3px rgba(47,108,246,.25);
        }

/* helpers */
.sr {
    position: absolute;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    width: 1px;
    height: 1px;
    overflow: hidden;
    white-space: nowrap
}

.icon {
    border-radius: 50%;
}

.btn-outline-enroll {
    margin-left: 8px;
    align-self: center;
    padding: 6px 10px;
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
    background: transparent;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

    .btn-outline-enroll:hover {
        background: var(--color-primary);
        color: var(--color-white);
    }

.train {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .train .grow {
        flex: 1;
        min-width: 0; /* prevents weird wrapping */
    }

    /* keep these from stretching */
    .train .badge,
    .train .icon {
        flex-shrink: 0;
    }

    /* push the ENROLL button all the way to the right */
    .train .enroll-btn {
        margin-left: auto;
        flex-shrink: 0;
    }
/* keep the title block flexible and push the button to the right */
.schedule .item {
    display: flex;
    align-items: center;
}

    .schedule .item .grow {
        flex: 1;
        min-width: 0;
    }

.schedule .enroll-btn {
    margin-left: auto;
    padding: 6px 10px;
    font-weight: 700;
    align-self: center;
    font-size: 12px;
    cursor: pointer;
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
    background: transparent;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

    .schedule .enroll-btn:hover {
        background: var(--color-primary);
        color: var(--color-white);
    }
/* ----------------- Google-Calendar-like list (scoped) ----------------- */
/* ===== Google-Calendar style alignment ===== */
.gcl {
    --sidePad: 12px; /* left/right padding on the card */
    --gap: 10px; /* gap between date column and events */
    --dateCol: 56px; /* width of the date column */
}

    /* ===== Month banner (gradient, no image) ===== */
    .gcl .gcl-monthBanner {
        position: relative; /* nice feel while scrolling */
        overflow: hidden;
        top: 0;
        z-index: 1;
        display: grid;
        align-items: end;
        min-height: 120px;
        padding: 22px 18px 16px;
        border-radius: var(--radius) var(--radius) 0 0;
        color: #0C1B52;
        font-weight: 800;
        font-size: 22px;
        box-shadow: inset 0 -1px 0 rgba(0,0,0,.05);
        background-repeat: no-repeat, no-repeat;
        background-size: 100% 100%, cover;
        background-position: 0 0, center;
        background-blend-mode: multiply;
        opacity: .6;
    }

        .gcl .gcl-monthBanner::before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            background: rgba(0,0,0,.45); /* adjust darkness here */
            z-index: 0; /* behind the label */
            pointer-events: none;
        }
    /* optional softer month title style */
    .gcl .gcl-monthTitle {
        text-shadow: 0 1px 0 rgba(255,255,255,.6);
        position: relative;
        z-index: 1; /* above ::before */
        color: #fff;
        text-shadow: 0 2px 8px rgba(0,0,0,.4);
    }
    /* Month header (simple gradient banner) */
    .gcl .gcl-month {
        position: relative;
        padding: 10px 10px 6px;
        font-size: 18px;
        font-weight: 800;
        color: #0C1B52;
        background: linear-gradient(180deg,#fff 0%, #f6f8fc 100%);
        border-radius: var(--radius) var(--radius) 0 0;
    }

    /* Week separator should align with the start of the EVENTS column */
    .gcl .gcl-week {
        padding: 10px var(--sidePad) 6px;
        /* push it so its text starts where the events column begins */
        padding-left: calc(var(--sidePad) + var(--dateCol) + var(--gap));
        color: #000000;
        font-size: 14px;
        font-weight: 400;
    }

    /* Day row: two columns (date | events) */
    .gcl .gcl-row {
        display: grid;
        grid-template-columns: var(--dateCol) 1fr;
        gap: var(--gap);
        padding: 3px var(--sidePad);
    }

    /* Date column: left-aligned, compact badge */
    .gcl .gcl-date {
        text-align: center;
        line-height: 1;
    }

    .gcl .gcl-dow {
        color: #7a879e;
        font-weight: 700;
        font-size: 12px;
        margin-bottom: 4px;
    }

    .gcl .gcl-day {
        display: inline-grid;
        place-items: center;
        width: 36px;
        height: 36px; /* tighter than before */
        border-radius: 14px;
        background: #0C1B52;
        color: #fff;
        font-weight: 700;
        font-size: 15px;
    }

    /* Today (empty state) badge stays slightly bigger but follows same column) */
    .gcl .gcl-today {
        display: inline-grid;
        place-items: center;
        width: 44px;
        height: 44px;
        border-radius: 40px;
        background: var(--color-tertiary) !important;
        color: #fff;
        font-weight: 800;
        font-size: 17px;
    }

    /* Events column */
    .gcl .gcl-events {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-items: center;
    }

    .gcl .gcl-pill {
        border: 0;
        border-radius: 14px;
        padding: 6px 10px;
        font-weight: 600;
        color: #fff;
        box-shadow: 0 3px 10px rgba(0,0,0,.10);
        cursor: pointer;
    }

        .gcl .gcl-pill.is-orange {
            background: var(--color-secondary) !important;
        }

        .gcl .gcl-pill.is-green {
            background: #2aa66b;
        }

    /* If a day has multiple courses, list them vertically (like Google Calendar) */
    .gcl .gcl-row.is-stack .gcl-events {
        flex-direction: column;
        gap: 8px;
        align-items: stretch;
    }

    .gcl .gcl-row.is-stack .gcl-pill {
        width: 100%;
        text-align: left;
        border-radius: 12px;
    }

    /* Empty state text (e.g., "No training schedule today.") */
    .gcl .gcl-empty {
        color: #71809b;
        font-size: 13px;
    }


    /* Nice footer rounding if the last row happens to be the end */
    .gcl #gclList {
        padding-bottom: 12px;
        border-radius: 0 0 var(--radius) var(--radius);
    }
/* Make the Trainings card scrollable (height that fits your layout) */
#gclScroll {
    max-height: 90vh;
    overflow: auto;
}

/* A month block contains a header + its days */
.gcl-monthblock {
    padding-bottom: 10px;
}

/* Use your existing .gcl-month, .gcl-week, .gcl-row, etc. */
.gcl-more {
    width: 100%;
    border: 0;
    border-radius: 12px;
    padding: 10px 14px;
    font-weight: 700;
    background: #eef3ff;
    color: #0C1B52;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

    .gcl-more:active {
        transform: translateY(1px);
    }

    /* loading state for the "Show more" buttons */
    .gcl-more[disabled] {
        opacity: .6;
        cursor: not-allowed;
    }

    .gcl-more.is-loading {
        position: relative;
    }

    .gcl-more .spinner {
        display: none;
        width: 18px;
        height: 18px;
        border: 2px solid #cfd6e4;
        border-top-color: var(--color-secondary);
        border-radius: 50%;
        animation: spin .8s linear infinite;
        margin-right: 8px;
        vertical-align: middle;
    }

    .gcl-more.is-loading .spinner {
        display: inline-block;
    }

    .gcl-more.is-loading .label {
        visibility: hidden;
    }
/* hide text while spinning */

/* --- PROGRESS BAR --- */
.gcl-progress {
    display: none; /* shown while loading */
    height: 10px;
    background: #e9eef7;
    border-radius: 999px;
    overflow: hidden;
    margin-top: 8px;
    box-shadow: inset 0 1px 2px rgba(14,26,51,.08);
}

    .gcl-progress .bar {
        height: 100%;
        width: 0%; /* animated to 100% */
        border-radius: inherit;
        background: repeating-linear-gradient( 45deg, rgba(255,255,255,.25) 0 12px, rgba(255,255,255,.05) 12px 24px ), linear-gradient(90deg, #66c2ff, #1e90ff);
        background-size: 24px 24px, 100% 100%;
        animation: gclStripes 1s linear infinite; /* diagonal movement */
        transition: width 2s linear; /* fill duration */
        border: 1px solid rgba(255,255,255,.35);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 6px 16px rgba(30,144,255,.20);
    }

@@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@@keyframes gclStripes {
    to {
        background-position: 24px 0, 0 0;
    }
}
/* keep your logic; just nicer visuals */
.day {
    @@apply font-semibold text-slate-700 bg-slate-50 rounded-xl;
}

    .day.has-event {
        @@apply bg-emerald-600 text-white shadow-sm;
    }

    .day.is-today {
        @@apply bg-secondary text-white shadow-sm;
    }

    .day.is-selected {
        outline: 2px solid rgba(0,70,173,.25);
    }

/* ---------- APP BACKDROP (mockup-like gradient blobs) ---------- */
/* Frosted, blue glassy background */
.bkup_bg-art {
    position: fixed;
    inset: 0;
    z-index: -2;
    /* multi-blob BLUE gradients only */
    background: radial-gradient(1200px 600px at -10% -10%, var(--blue-300) 0%, transparent 60%), radial-gradient(900px 550px at 110% 10%, var(--cyan-400) 0%, transparent 60%), radial-gradient(800px 600px at 20% 110%, var(--teal-400) 0%, transparent 60%), linear-gradient(180deg, var(--blue-50) 0%, #eaf4ff 50%, #e6f0ff 100%);
    filter: saturate(115%);
}

    /* (optional) add a soft vignette for depth */
    .bkup_bg-art::after {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(120% 80% at 50% 10%, transparent 0 70%, rgba(9,18,56,.25) 100%);
        pointer-events: none;
    }


/* subtle film grain over everything (very light) */
.bkup_bg-grain {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,\
          <svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>\
            <filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/></filter>\
            <rect width='100%' height='100%' filter='url(%23n)' opacity='0.045'/>\
          </svg>");
    background-size: 300px 300px;
    mix-blend-mode: soft-light;
}

.bg-art {
    position: fixed;
    inset: 0;
    z-index: -2;
    background: linear-gradient(180deg, #f8f8f8 0%, #adcfea 100%);
    filter: none;
}

    .bg-art::after {
        display: none;
    }
/* remove vignette */

/* ---------- GLASS SHELLS ---------- */
.glass {
    background: rgba(255,255,255,0.24);
    border: 1px solid rgba(255,255,255,0.45);
    box-shadow: 0 20px 50px rgba(15, 23, 42, .12), inset 0 1px 0 rgba(255,255,255,.35);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-radius: 22px;
}

    /* extra lift for inner cards (home calendar/search/trainings blocks) */
    .glass.soft {
        background: rgba(255,255,255,0.30);
        border-color: rgba(255,255,255,0.55);
        box-shadow: 0 10px 30px rgba(15, 23, 42, .10), inset 0 1px 0 rgba(255,255,255,.45);
    }

/* tabbar – frosted pill */
.tabbar.is-glassy {
    background: rgba(255,255,255,0.70);
    border: 1px solid rgba(255,255,255,0.55);
    box-shadow: 0 14px 40px rgba(15, 23, 42, .18);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
}

/* rounded calendar cells to match mockup */
.day {
    border-radius: 14px;
    background: rgba(255,255,255,0.65);
    border: 1px solid rgba(255,255,255,0.7);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 6px 14px rgba(15,23,42,.06);
}

    .day.has-event {
        background: linear-gradient(180deg,#1e9e72,#16865f);
        color: #fff;
        border-color: transparent;
    }

    .day.is-today {
        background: linear-gradient(180deg,#2563eb,#1d4ed8);
        color: #fff;
        border-color: transparent;
    }

/* pill buttons look glossy */
.enroll-btn {
    background: linear-gradient(135deg, #5aa2ff, #4353ff);
    color: #fff;
    border: 0;
    box-shadow: 0 8px 20px rgba(67,83,255,.25), inset 0 1px 0 rgba(255,255,255,.4);
    border-radius: 999px; /* keep ENROLL oblong */
}

.gcl .gcl-pill {
    background: linear-gradient(135deg, #5aa2ff, #4353ff);
    color: #fff;
    border: 0;
    box-shadow: 0 8px 20px rgba(67,83,255,.25), inset 0 1px 0 rgba(255,255,255,.4);
    border-radius: 12px; /* or 14px - pick ONE */
}


    .enroll-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 12px 24px rgba(67,83,255,.28), inset 0 1px 0 rgba(255,255,255,.5);
    }
/* Header row layout */
.hdr-row {
    display: flex;
    align-items: center;
    gap: 12px
}

/* Avatar ring */
.hdr-avatar {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    overflow: hidden;
    border: 3px solid rgba(255,255,255,.65);
    box-shadow: 0 6px 16px rgba(15,23,42,.12)
}

    .hdr-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

/* Micro badge on the right (conic ring) */
.hdr-micro {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: conic-gradient(#60a5fa 0 240deg,#fde68a 0 300deg,#fca5a5 0);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6),0 6px 16px rgba(15,23,42,.12)
}
/* use this on your glass cards/headers */
.shadow-card {
    box-shadow: 0 10px 30px rgba(12,27,82,.10), inset 0 1px 0 rgba(255,255,255,.35);
}

.bg-glass {
    background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.42));
    border: 1px solid rgba(255,255,255,.55);
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
}

/* pill accents & progress bars */
.pill-accent {
    background: linear-gradient(90deg, var(--blue-500), var(--blue-700));
    color: #fff;
}

.progress-blue {
    background: #e8f1ff;
    border-radius: 999px;
    overflow: hidden;
}

    .progress-blue > span {
        display: block;
        height: 10px;
        width: 0%;
        background: repeating-linear-gradient(45deg, rgba(255,255,255,.25) 0 12px, rgba(255,255,255,.05) 12px 24px), linear-gradient(90deg, var(--blue-400), var(--blue-700));
        background-size: 24px 24px, 100% 100%;
        animation: stripes 1s linear infinite;
        transition: width 2s linear;
    }

@@keyframes stripes {
    to {
        background-position: 24px 0, 0 0;
    }
}

/* Dim + disable past/today pills */
.gcl .gcl-pill[disabled] {
    opacity: .45;
    cursor: not-allowed;
    pointer-events: none; /* guarantees no click */
    box-shadow: none;
    filter: saturate(.7);
}

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

    .range-chips button {
        border: 0;
        padding: 6px 10px;
        border-radius: 999px;
        background: #eef3ff;
        color: #0C1B52;
        font-weight: 700;
        cursor: pointer;
    }

        .range-chips button:active {
            transform: translateY(1px);
        }

/* ---------- Schedule cards (Home) - redesigned ---------- */
.schedule .item {
    align-items: stretch; /* better vertical layout */
}

    .schedule .item .grow {
        flex: 1;
        min-width: 0; /* CRITICAL: prevents title collapsing */
    }

    /* top line: title left, button right */
    .schedule .item .topline {
        display: flex;
        align-items: flex-start;
        gap: 10px;
    }

    /* title should take remaining space and clamp */
    .schedule .item .title {
        flex: 1;
        min-width: 0;
        font-weight: 700;
        font-size: 14px;
        line-height: 1.2;
    }

        /* 2-line clamp for long titles */
        .schedule .item .title.clamp-2 {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
        }

    /* category under title (like your screenshot) */
    .schedule .item .cat {
        margin-top: 2px;
        font-size: 10px;
        font-weight: 600;
        color: var(--color-secondary);
        text-transform: uppercase;
        letter-spacing: .02em;
    }

    /* meta spacing like the mockup */
    .schedule .item .meta {
        margin-top: 2px;
    }

    /* enroll button: fixed width, never squishes title */
    .schedule .item .enroll-btn {
        flex-shrink: 0;
        white-space: nowrap;
        padding: 8px 14px;
        border-radius: 999px;
    }

/* ===== Make ENROLL pill compact (without renaming classes) ===== */
.schedule .item {
    padding: 8px 10px; /* tighter card */
    gap: 10px;
}

    .schedule .item .topline {
        align-items: center; /* stop tall header feel */
    }

    .schedule .item .title {
        font-size: 13px; /* smaller title */
        line-height: 1.15;
    }

    .schedule .item .meta {
        margin-top: 4px; /* reduce vertical spacing */
    }

    /* override your earlier big pill */
    .schedule .item .enroll-btn {
        padding: 4px 10px; /* smaller */
        font-size: 11px;
        line-height: 1;
        box-shadow: 0 4px 10px rgba(67,83,255,.18); /* lighter */
    }

    /* make the calendar badge smaller too */
    .schedule .item .meta .badge {
        padding: 3px 8px;
        font-size: 11px;
    }

.schedule .enroll-btn {
    background: transparent;
    color: var(--color-primary);
    border: 1px solid rgba(12,27,82,.35);
    box-shadow: none;
}

    .schedule .enroll-btn:hover {
        background: rgba(12,27,82,.08);
    }

/* Align ENROLL to the date row */
.schedule .item .meta.meta-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap; /* allows wrap on small widths */
}

    /* Keep the badge and button sized nicely */
    .schedule .item .meta.meta-row .badge {
        flex: 0 0 auto;
    }

    .schedule .item .meta.meta-row .enroll-btn {
        margin-left: 0; /* stop pushing it away */
        flex: 0 0 auto;
        padding: 4px 10px;
        font-size: 11px;
        line-height: 1;
    }

/* ENROLL hover -> primary */
.schedule .enroll-btn:hover,
.schedule .item .enroll-btn:hover {
    background: var(--primary);
    color: var(--primary-ink);
    box-shadow: 0 8px 20px rgba(47,108,246,.25), inset 0 1px 0 rgba(255,255,255,.4);
}

    /* optional: make the ">" icon/arrow inherit */
    .schedule .enroll-btn:hover * {
        color: inherit;
    }

/*SEARCH BAR STYLING*/
.date-field {
    position: relative;
    display: flex;
    align-items: center;
}

    .date-field input[type="date"] {
        padding-right: 44px; /* space for the icon button */
    }

.date-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    display: grid;
    place-items: center;
    color: #344054;
}

    .date-btn:active {
        transform: translateY(-50%) scale(0.98);
    }

.gcl-pill {
    text-align: left;
}

.gcl-pill-main {
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1.1;
}
.gcl-pill-title {
    font-size: 13px;
}

.gcl-pill-sub {
    margin-left: 25px; /* aligns under title after icon */
    margin-top: 2px;
    opacity: .85;
    line-height: 1;
}

    .gcl-pill-sub sub {
        font-size: 11px; /* adjust as you like */
    }


.calendar-mobile .app {
    height: 100dvh;
}

.calendar-mobile .pages {
    flex: 1;
    overflow: hidden; /* prevent page stretching */
    /*padding-bottom: 90px;*/ /* keep space for tabbar */
}

/* ---- CALENDAR TAB: fixed-height card with scrollable schedule ---- */
#page-home .cal-wrap {
    /* keep the card inside the visible viewport */
    max-height: calc(100dvh - 100px); /* adjust 140px if header/tabbar differs */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* critical: prevents the card from expanding */
}

/* calendar parts stay "fixed" (not scroll) */
#page-home .cal-head,
#page-home .dow,
#page-home .dates {
    flex: 0 0 auto;
}

/* the schedule area takes remaining space and scrolls */
#page-home .schedule-scroll {
    flex: 1 1 auto;
    min-height: 0; /* CRITICAL for flex + overflow scroll */
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: 12px;
    padding: 12px;
    border-radius: 14px;
    background: rgba(255,255,255,0.25); /* optional (matches glass) */
    border: 1px solid rgba(255,255,255,0.35); /* optional */
}
    #page-home .schedule-scroll.is-empty {
        flex: 0 0 auto;
        min-height: 0;
        max-height: 0;
        padding: 0;
        margin-top: 0;
        overflow: hidden;
        border: 0;
        background: transparent;
    }

/* remove padding from .schedule since scroll wrapper now owns it */
#page-home .schedule {
    margin-top: 0;
    padding: 0;
}

/* ---- SEARCH TAB: fixed-height card with scrollable results ---- */
#page-search .card {
    max-height: calc(100dvh - 100px); /* tune like Calendar tab */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* prevents stretching */
}

/* keep the form area fixed (top) */
#page-search .search-form {
    flex: 0 0 auto;
}

/* keep the divider fixed */
#page-search hr {
    flex: 0 0 auto;
}

/* results fill remaining space and scroll */
#page-search .search-results-scroll {
    flex: 1 1 auto;
    min-height: 0; /* CRITICAL for scroll in flex layouts */
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px; /* small breathing room */
}

/* optional: avoid extra padding that adds height */
#page-search #searchResults {
    padding-bottom: 0 !important;
}

/* ==========================================================
   SEARCH TAB (Compact, more room for results)
   ========================================================== */

/* card sizing + layout */
#page-search .search-card{
    padding: 10px; /* smaller than 12px */
    max-height: calc(100dvh - 100px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* reduce overall vertical spacing */
#page-search .search-form{
    display: grid;
    gap: 8px; /* was 10px */
}

/* labels tighter */
#page-search .search-form .subnote{
    font-size: 12px;
    margin: 2px 2px 4px !important; /* overrides inline */
    line-height: 1.1;
}

/* inputs more compact */
#page-search .search-form input[type="search"],
#page-search .search-form input[type="date"],
#page-search .search-form select{
    padding: 10px 12px !important; /* was 12px */
    border-radius: 12px;
    font-size: 14px;
}

/* date button smaller + aligned */
#page-search .date-btn{
    width: 32px;
    height: 32px;
    right: 8px;
    border-radius: 10px;
}

/* place From/To side-by-side on mobile too (still fits well) */
#page-search .search-form{
    grid-template-columns: 1fr;
}

/* Make From + To a 2-col row by targeting their wrappers:
   Assumes your markup order is:
   Course (1st), From (2nd), To (3rd), Quick range (4th), (hidden On), Category, Search button
*/
#page-search .search-form > div:nth-child(2),
#page-search .search-form > div:nth-child(3){
    /* allow them to be placed in a 2-column layout */
}

@media (min-width: 0px){
    #page-search .search-form{
        grid-template-columns: 1fr 1fr;
        column-gap: 10px;
        row-gap: 8px;
    }

    /* Course full width */
    #page-search .search-form > div:nth-child(1){
        grid-column: 1 / -1;
    }

    /* From left, To right (2 and 3) naturally occupy col 1 and col 2 */

    /* Quick range full width */
    #page-search .search-form > div:nth-child(4){
        grid-column: 1 / -1;
    }

    /* Hidden On (5th) ignore */

    /* Category full width (6th visible block depends on your hidden div;
       safest is to target by id wrapper: we’ll use the select itself) */
    #page-search #searchCategory{
        width: 100%;
    }
    #page-search #searchCategory{
        grid-column: 1 / -1;
    }

    /* Search button full width */
    #page-search #searchBtn{
        grid-column: 1 / -1;
    }
}

/* quick range chips: smaller + denser */
#page-search .range-chips{
    gap: 6px;
}

#page-search .range-chips button{
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 999px;
    font-weight: 700;
}

/* Search button: slightly shorter */
#page-search #searchBtn{
    padding: 10px 14px !important; /* was 12px */
    border-radius: 12px;
    font-size: 14px;
}

/* divider tighter */
#page-search hr{
    margin: 10px 0 !important;
}

/* results scroll area takes remaining space */
#page-search .search-results-scroll{
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
}


.cat-search-row {
    display: flex;
    gap: 10px;
    align-items: flex-end; /* button aligns with the select */
}

.cat-field {
    flex: 1;
}
/* category takes remaining space */

#searchCategory {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
}

#searchBtn {
    width: 140px; /* fixed button width (change if you want) */
    padding: 12px 14px;
    border: 0;
    border-radius: 12px;
    background: var(--primary);
    color: #fff;
    font-weight: 700;
    flex: 0 0 auto;
}
/* Make the Category+Search row occupy the full grid width */
#page-search .cat-search-row {
    grid-column: 1 / -1;
    width: 100%;
    display: flex;
    gap: 10px;
    align-items: flex-end;
}
@media (max-width: 360px) {
    #page-search .cat-search-row {
        flex-direction: column;
        align-items: stretch;
    }

    #page-search #searchBtn {
        width: 100%;
    }
}

/* ===== FINAL OVERRIDES (put at bottom of file) ===== */

/* Day with schedule */
.day.has-event {
    background: linear-gradient(180deg, var(--color-secondary), var(--color-secondary));
    color: #fff;
    border-color: transparent;
}

/* Today */
.day.is-today {
    background: linear-gradient(180deg, var(--color-primary), var(--color-primary));
    color: #fff;
    border-color: transparent;
}

    /* If today ALSO has schedule, keep Today color as priority */
    .day.is-today.has-event {
        background: linear-gradient(180deg, var(--color-primary), var(--color-secondary));
        color: #fff;
    }

/* ===== Course Mode pill (Home: Today + Upcoming) ===== */
.cm-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .02em;
    line-height: 1;
    border: 1px solid rgba(12,27,82,.18);
    background: rgba(255,255,255,.65);
    color: var(--color-primary);
}

/* reserve colors by courseModeID (1-4) */
.cm-1 {
    background: rgba(47,108,246,.12);
    border-color: rgba(47,108,246,.25);
    color: #1d4ed8;
}

.cm-2 {
    background: rgba(25,135,84,.12);
    border-color: rgba(25,135,84,.25);
    color: #137a4b;
}

.cm-3 {
    background: rgba(255,193,7,.18);
    border-color: rgba(255,193,7,.30);
    color: #8a6a00;
}

.cm-4 {
    background: rgba(220,53,69,.12);
    border-color: rgba(220,53,69,.25);
    color: #b42318;
}

/* category + mode line wrapper */
.catline {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
    flex-wrap: wrap;
}


/* === Reduce the "yellow line" spacing (Schedule + Search) === */
#gclScroll.gcl,
#page-search #searchResults.gcl {
    --sidePad: 6px; /* left/right inner padding */
    --gap: 6px; /* space between date column and event card */
    --dateCol: 48px; /* date column width */
}

    /* tighter rows */
    #gclScroll.gcl .gcl-row,
    #page-search #searchResults.gcl .gcl-row {
        padding: 2px var(--sidePad);
    }

    /* week header aligned with events column */
    #gclScroll.gcl .gcl-week,
    #page-search #searchResults.gcl .gcl-week {
        padding-left: calc(var(--sidePad) + var(--dateCol) + var(--gap));
    }

.gcl .gcl-events {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
}

.gcl .gcl-pill {
    width: 100%;
    text-align: left;
    display: block;
}