/* =========================================================================
   LMS DASHBOARD — shared FullCalendar visual upgrade
   -------------------------------------------------------------------------
   Applies to every FullCalendar grid on the LMS dashboard (Logbook, Lesson
   Plan, Week Plan, Events, Log Status, Class Status). Pure CSS on top of
   FullCalendar's own generated markup/classes — no JS/behavior changes.
   Uses the --lms-* theme variables from lms-theme.css, so it re-colors
   automatically with the active skin.
   ========================================================================= */

/* ---- Grid lines: lighter, calmer ---- */
.fc-border-separate th,
.fc-border-separate td {
    border-color: #edf1f5 !important;
}

.fc-widget-header {
    background: var(--lms-tint-soft, #eef5fb) !important;
    border-color: #edf1f5 !important;
}

    .fc-widget-header th {
        padding: 6px 0 !important;
        font-weight: 600;
        color: var(--lms-heading, #112A46);
        font-size: 12px;
    }

/* ---- Today cell: colored ring on the day number instead of flat fill ---- */
.fc-today {
    background: var(--lms-tint-soft, #fcf8e3) !important;
}

.fc-day-number {
    padding: 4px 6px !important;
    font-size: 12px;
    color: #555;
    transition: background .12s ease, color .12s ease;
    border-radius: 50%;
}

.fc-today .fc-day-number {
    background: var(--lms-primary, #3C8DBC);
    color: #fff !important;
    font-weight: 700;
    box-shadow: 0 2px 5px -1px var(--lms-shadow, rgba(0,0,0,.2));
}

.fc-day-number.fc-other-month {
    color: #ccc !important;
}

/* ---- Weekend columns: subtle tint (grid is always Sun...Sat, 7 cols) ---- */
.fc-day-grid .fc-row td.fc-day:first-child,
.fc-day-grid .fc-row td.fc-day:last-child {
    background: rgba(0,0,0,.015);
}

.fc-day-grid .fc-row td.fc-day.fc-today:first-child,
.fc-day-grid .fc-row td.fc-day.fc-today:last-child {
    background: var(--lms-tint-soft, #fcf8e3) !important;
}

/* Hover highlight on the day cell being pointed at */
.fc-day-grid .fc-row .fc-day:hover {
    background: var(--lms-tint-soft, #f5f8fb);
    cursor: pointer;
}

/* ---- Event pills: rounded, left accent bar, gentle lift on hover ---- */
.fc-event {
    border: none !important;
    border-left: 3px solid rgba(0,0,0,.18) !important;
    border-radius: 5px !important;
    padding: 1px 5px !important;
    margin: 1px 2px !important;
    font-size: 11px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.08);
    transition: transform .12s ease, box-shadow .12s ease;
}

    .fc-event:hover {
        transform: translateY(-1px);
        box-shadow: 0 3px 8px rgba(0,0,0,.16);
        filter: brightness(1.04);
    }

    .fc-event .fc-title {
        font-weight: 500;
    }

/* "+N more" popover link — themed to match instead of default blue */
.fc-more {
    color: var(--lms-primary-dark, #367fa9) !important;
    font-weight: 600;
    font-size: 11px;
}

.fc-popover .fc-header {
    background: var(--lms-tint-soft, #eef5fb) !important;
}

.fc-popover {
    border-radius: 8px !important;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0,0,0,.15) !important;
    border-color: var(--lms-border, #ddd) !important;
}

/* ---- Toolbar title ---- */
.fc-header-title h2 {

    font-size: 16px !important;
    font-weight: 700;
    color: var(--lms-heading, #112A46);
}

/* ---- Prev/Next buttons: rounded, consistent with the rest of the dashboard
   (colors are still applied per-calendar via inline JS to match the active
   skin exactly; this just rounds/pads them consistently) ---- */
.fc-button {
    border-radius: 6px !important;
    box-shadow: none !important;
    text-shadow: none !important;
    border: none !important;
    padding: 3px 10px !important;
    transition: opacity .12s ease;
}

    .fc-button:hover {
        opacity: .88;
    }

/* ---- Scrollbar inside calendar bodies: slim + themed (matches rest of dashboard) ---- */
.fc-scroller::-webkit-scrollbar {
    width: 6px;
}

.fc-scroller::-webkit-scrollbar-thumb {
    background: var(--lms-border, #ccc);
    border-radius: 3px;
}

.fc-scroller::-webkit-scrollbar-track {
    background: var(--lms-tint-soft, #f5f5f5);
}