/* =========================================================
   Calendar UI (week chips, day view, month grid + pills)
   ========================================================= */

/* Theme tokens */
:root {
    --cal-border: #e9ecef;
    --cal-muted: #6c757d;
    --cal-bg: #fff;
    --cal-soft: #fafbfc;
    --cal-accent: #0d6efd;
    --chip-bar: #8aa8ff; /* fallback if --bar not set inline */
}

/* ---------------------------
   Week view "chips"
----------------------------*/
.pretty-week .cal-chip {
    background: var(--cal-bg);
    border: 1px solid #e7e7ef;
    border-left: 4px solid var(--bar, var(--chip-bar));
    border-radius: .5rem;
    padding: .5rem .75rem;
    margin-bottom: .5rem;
}

    .pretty-week .cal-chip .title {
        font-weight: 600;
    }

    .pretty-week .cal-chip .time {
        color: #666;
    }

    .pretty-week .cal-chip .room {
        font-size: .95rem;
    }

    .pretty-week .cal-chip .notes {
        font-size: .85rem;
        color: var(--cal-muted);
    }

/* ---------------------------
   Week grid (responsive)
   - Horizontal cards on wide screens
   - Stacked vertically on small screens
----------------------------*/
.week-grid {
    display: grid;
    /* slightly narrower min so five columns fit in wide containers */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    align-items: stretch;
}

    .week-grid .card {
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .week-grid .card-body {
        flex: 1 1 auto;
    }

/* On >= lg screens, lock to 5 equal columns (Mon–Fri) */
@media (min-width: 992px) {
    .week-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

/* ---------------------------
   Day view (grid + events)
----------------------------*/
.cal-day {
    background: var(--cal-bg);
    border: 1px solid var(--cal-border);
    border-radius: .75rem;
    overflow: hidden;
}

.cal-grid {
    display: grid;
    grid-template-columns: 60px 1fr;
}

.cal-day .hours {
    background: var(--cal-soft);
    border-right: 1px solid var(--cal-border);
}

.cal-hour {
    height: 4rem;
    padding: .25rem .5rem;
    font-size: .85rem;
    color: var(--cal-muted);
    border-bottom: 1px dashed #eee;
}

.events {
    position: relative;
    background: var(--cal-bg);
}

/* Event blocks (use --bar inline for colour) */
.cal-event {
    position: absolute;
    left: 8px;
    right: 8px;
    background: var(--cal-bg);
    border: 1px solid #e1e8ff;
    border-left: 4px solid var(--bar, #7aa2ff);
    border-radius: .5rem;
    padding: .5rem .6rem;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

    .cal-event .when {
        font-size: .85rem;
        color: #495057;
    }

    .cal-event .title {
        font-weight: 600;
        line-height: 1.2;
    }

    .cal-event .room {
        font-size: .95rem;
    }

    .cal-event .notes {
        font-size: .85rem;
        color: var(--cal-muted);
    }

/* ---------------------------
   Month grid (Week col + Mon–Sat)
----------------------------*/
.month-grid {
    display: grid;
    grid-template-columns: 90px repeat(6,1fr);
    gap: .5rem;
    background: var(--cal-bg);
    border: 1px solid var(--cal-border);
    border-radius: .75rem;
    padding: .5rem;
}

    .month-grid .dow {
        font-size: .8rem;
        color: var(--cal-muted);
        text-align: center;
        padding: .25rem 0;
    }

    .month-grid .wkcol {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .month-grid .day {
        position: relative;
        min-height: 5rem;
        background: #fafbfc;
        border: 1px solid var(--cal-border);
        border-radius: .5rem;
        padding: .35rem;
        color: inherit;
        text-decoration: none;
    }

        .month-grid .day.out {
            opacity: .45;
        }

        .month-grid .day.has {
            background: #f8fbff;
            border-color: #dbe7ff;
        }
        /* day number (top-right) */
        .month-grid .day .num {
            position: absolute;
            top: .25rem;
            right: .35rem;
            font-size: .85rem;
            color: var(--cal-muted);
        }
        /* Centered colour-count pills */
        .month-grid .day .countgroup {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            display: inline-flex;
            gap: .35rem;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            max-width: 80%;
            pointer-events: none; /* whole tile remains clickable */
        }

        .month-grid .day .pill {
            min-width: 1.6rem;
            height: 1.6rem;
            padding: 0 .35rem;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: .8rem;
            line-height: 1;
            background: var(--bg, var(--cal-accent)); /* set via style="--bg:#RRGGBB" */
            box-shadow: 0 0 0 1px rgba(0,0,0,.05) inset;
        }

/* ---------------------------
   Responsive tweaks
----------------------------*/
@media (max-width: 768px) {
    /* stack week days vertically on small screens */
    .week-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    .cal-grid {
        grid-template-columns: 45px 1fr;
    }

    .cal-hour {
        height: 3.25rem;
    }

    .month-grid {
        grid-template-columns: 68px repeat(6,1fr);
        gap: .35rem;
        padding: .4rem;
    }

        .month-grid .day .pill {
            min-width: 1.1rem;
            height: 1.1rem;
            font-size: .7rem;
            padding: 0 .3rem;
        }
}