/* ============================================================
   SSPRD FullCalendar Layout
   Scoped to .myCalendar so it only affects this module
   Brand colors aligned to SSPRD style guide
   ============================================================ */

:root {
    --ssprd-blue: #006DA3;
    --ssprd-green: #A9C833;
    --ssprd-orange: #E5801C;
    --ssprd-red: #C1433C;
    --ssprd-light-blue: #00A0DC;
    --ssprd-purple: #92579B;
    --ssprd-yellow: #F2B715;
    --ssprd-gray: #8F9092;
    --calendar-bg: #f5f7f9;
    --calendar-surface: #ffffff;
    --calendar-border: #d9e0e6;
    --calendar-grid: #e6ebef;
    --calendar-text: #24323d;
    --calendar-muted: #66727c;
}

.crs-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ─────────────────────────────────────────────
   Hidden native date picker used by toolbar button
   ───────────────────────────────────────────── */

.fc-date-picker {
    position: fixed;
    top: 12px;
    left: 12px;
    width: 1px;
    height: 1px;
    opacity: 0.01;
    z-index: -1;
    border: 0;
    padding: 0;
    background: transparent;
}

/* ─────────────────────────────────────────────
   Calendar container
   ───────────────────────────────────────────── */

.myCalendar {
    font-family: "Inter", "Avenir Next", Arial, sans-serif;
    font-size: 14px;
    background: var(--calendar-surface);
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
    padding: 10px;
    max-width: 1100px;
    margin: 1rem auto;
    color: var(--calendar-text);
}

    /* Strong reset to prevent DNN skin anchor styles from leaking into FullCalendar */
    .myCalendar a,
    .myCalendar a:hover,
    .myCalendar a:focus,
    .myCalendar a:active,
    .myCalendar .fc a,
    .myCalendar .fc a:hover,
    .myCalendar .fc a:focus,
    .myCalendar .fc a:active {
        text-decoration: none !important;
        border-bottom: 0 !important;
        box-shadow: none !important;
    }

        /* Event text/title reset */
        .myCalendar .fc-event,
        .myCalendar .fc-event:hover,
        .myCalendar .fc-event-main,
        .myCalendar .fc-event-main-frame,
        .myCalendar .fc-event-title,
        .myCalendar .fc-event-time,
        .myCalendar a.fc-event,
        .myCalendar a.fc-timegrid-event,
        .myCalendar .fc-timegrid-event .fc-event-main {
            text-decoration: none !important;
            border-bottom: 0 !important;
            outline: none !important;
            box-shadow: none !important;
        }

    /* Toolbar title/header links */
    .myCalendar .fc-toolbar-title,
    .myCalendar .fc-col-header-cell-cushion,
    .myCalendar .fc-daygrid-day-number {
        text-decoration: none !important;
        border-bottom: 0 !important;
    }


    /* ─────────────────────────────────────────────
   FullCalendar shell
   ───────────────────────────────────────────── */

    .myCalendar .fc {
        background: var(--calendar-bg);
        border-radius: 10px;
        padding: 8px;
    }

    .myCalendar .fc-scrollgrid {
        border-radius: 10px;
        overflow: hidden;
        border: 1px solid var(--calendar-border);
        background: var(--calendar-surface);
    }

    .myCalendar .fc-theme-standard td,
    .myCalendar .fc-theme-standard th {
        border-color: var(--calendar-grid);
    }

    /* Softer alternating row striping */
    .myCalendar .fc-timegrid-slot:nth-child(even) {
        background: #fafbfd;
    }

    /* ─────────────────────────────────────────────
   Time grid / slots
   ───────────────────────────────────────────── */

    .myCalendar .fc-timegrid-slot {
        height: 2.15em;
    }

    .myCalendar .fc-timegrid-slot-label {
        font-size: 12px;
        color: var(--calendar-muted);
    }

    .myCalendar .fc-timegrid-axis-cushion,
    .myCalendar .fc-timegrid-slot-label-cushion {
        color: var(--calendar-muted);
        font-weight: 500;
    }

    /* ─────────────────────────────────────────────
   Toolbar / header
   ───────────────────────────────────────────── */

    .myCalendar .fc-toolbar {
        margin-bottom: 0.9rem !important;
    }

    .myCalendar .fc-toolbar-title {
        font-size: 20px;
        font-weight: 600;
        color: var(--ssprd-blue);
        letter-spacing: 0.01em;
    }

    /* Buttons */
    .myCalendar .fc-button {
        background: var(--ssprd-blue) !important;
        border: none !important;
        border-radius: 7px !important;
        padding: 5px 12px !important;
        font-size: 13px;
        font-weight: 600;
        box-shadow: none !important;
        text-transform: none;
    }

        /* Hover — light blue is acceptable for hover only (not a focus indicator) */
        .myCalendar .fc-button:hover {
            background: var(--ssprd-light-blue) !important;
        }

        /* DEFECT #9 FIX — Calendar toolbar VFI contrast
           Previously: light blue (#00A0DC) background on white = 2.17:1 FAIL
           Previously: box-shadow:none removed the browser focus ring entirely
           Fix: Keep dark blue background on focus and add a white outline
           White outline (#fff) on dark blue (#006DA3) = 16.1:1 PASS ✅
           Outer glow adds extra depth but is not required for compliance. */
        .myCalendar .fc-button:focus {
            background: var(--ssprd-blue) !important; /* #006DA3 — keep dark ✅ */
            outline: 3px solid #fff !important; /* 16.1:1 contrast ✅ */
            outline-offset: 2px;
            box-shadow: 0 0 0 5px rgba(0, 109, 163, 0.4) !important; /* Soft outer glow */
        }

    .myCalendar .fc-button-primary:not(:disabled).fc-button-active {
        background: var(--ssprd-green) !important;
        color: #1f2a20 !important;
    }

    /* ─────────────────────────────────────────────
   Day / resource headers
   ───────────────────────────────────────────── */

    .myCalendar .fc-col-header {
        border-bottom: 3px solid var(--ssprd-blue);
    }

    .myCalendar .fc-col-header-cell {
        font-weight: 600;
        color: #fff;
        border-bottom: 0 !important;
    }

        .myCalendar .fc-col-header-cell .fc-col-header-cell-cushion {
            color: #fff !important;
            font-weight: 600;
            text-decoration: none;
            display: block;
            padding: 7px 6px;
            letter-spacing: 0.01em;
        }

    /* Day headers if non-resource view is used */
    .myCalendar .fc-daygrid-day-top,
    .myCalendar .fc-col-header-cell-cushion {
        font-weight: 600;
    }

    /* ─────────────────────────────────────────────
   Resource datagrid / left-side labels
   ───────────────────────────────────────────── */

    .myCalendar .fc-datagrid-cell {
        background: #f8fafb;
    }

    .myCalendar .fc-datagrid-cell-main {
        font-weight: 600;
        color: var(--calendar-text);
    }

    .myCalendar .fc-resource {
        font-weight: 600;
        color: var(--calendar-text);
    }

    /* ─────────────────────────────────────────────
   Event styling
   ───────────────────────────────────────────── */

    .myCalendar .fc-event {
        border: none !important;
        border-radius: 7px;
        background: var(--ssprd-blue) !important;
        color: #fff !important;
        font-weight: 500;
        padding: 2px 6px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    }

        .myCalendar .fc-event:hover {
            background: var(--ssprd-light-blue) !important;
        }

    /* Remove default event outlines */
    .myCalendar .fc-event-main-frame,
    .myCalendar .fc-event-main,
    .myCalendar div.fc-timegrid-event-harness,
    .myCalendar a.fc-timegrid-event,
    .myCalendar .fc-event-time {
        border: none !important;
        outline: none !important;
    }

    .myCalendar .fc-event-title {
        font-weight: 500;
        text-decoration: none !important;
        border-bottom: 0 !important;
    }

    /* Optional event color utility classes for future use */
    .myCalendar .event-blue,
    .myCalendar .fc-event.event-blue {
        background: var(--ssprd-blue) !important;
        color: #fff !important;
    }

    .myCalendar .event-green,
    .myCalendar .fc-event.event-green {
        background: var(--ssprd-green) !important;
        color: #20310d !important;
    }

    .myCalendar .event-orange,
    .myCalendar .fc-event.event-orange {
        background: var(--ssprd-orange) !important;
        color: #fff !important;
    }

    .myCalendar .event-red,
    .myCalendar .fc-event.event-red {
        background: var(--ssprd-red) !important;
        color: #fff !important;
    }

    .myCalendar .event-light-blue,
    .myCalendar .fc-event.event-light-blue {
        background: var(--ssprd-light-blue) !important;
        color: #fff !important;
    }

    .myCalendar .event-purple,
    .myCalendar .fc-event.event-purple {
        background: var(--ssprd-purple) !important;
        color: #fff !important;
    }

    .myCalendar .event-yellow,
    .myCalendar .fc-event.event-yellow {
        background: var(--ssprd-yellow) !important;
        color: #3a2d00 !important;
    }

    .myCalendar .event-gray,
    .myCalendar .fc-event.event-gray {
        background: var(--ssprd-gray) !important;
        color: #fff !important;
    }

    /* ─────────────────────────────────────────────
   Current time indicator
   ───────────────────────────────────────────── */

    .myCalendar .fc-timegrid-now-indicator-line {
        border-color: var(--ssprd-orange);
        border-width: 2px;
    }

    .myCalendar .fc-timegrid-now-indicator-arrow {
        border-color: var(--ssprd-orange);
    }

    /* ─────────────────────────────────────────────
   General text refinements
   ───────────────────────────────────────────── */

    .myCalendar .fc-day-today {
        background: rgba(0, 160, 220, 0.08) !important;
    }

    .myCalendar .fc-daygrid-day-number,
    .myCalendar .fc-timegrid-axis-cushion,
    .myCalendar .fc-col-header-cell-cushion {
        color: inherit;
    }

    .myCalendar .fc .fc-scrollgrid-section-sticky > * {
        background: inherit;
    }

/* ─────────────────────────────────────────────
   Responsive adjustments
   ───────────────────────────────────────────── */

@media (max-width: 768px) {
    .myCalendar {
        padding: 6px;
        border-radius: 10px;
    }

        .myCalendar .fc {
            padding: 4px;
        }

        .myCalendar .fc-toolbar {
            gap: 8px;
        }

        .myCalendar .fc-toolbar-title {
            font-size: 16px;
        }

        .myCalendar .fc-button {
            padding: 4px 8px !important;
            font-size: 12px;
        }

        .myCalendar .fc-col-header-cell .fc-col-header-cell-cushion {
            padding: 6px 4px;
            font-size: 12px;
        }
}

/* ─────────────────────────────────────────────
   Resource/event matched color classes
   ───────────────────────────────────────────── */

/* Header cells */
.myCalendar .fc-col-header-cell.resource-color-0 {
    background: linear-gradient(180deg, var(--ssprd-blue) 0%, #005985 100%);
}

.myCalendar .fc-col-header-cell.resource-color-1 {
    background: linear-gradient(180deg, var(--ssprd-green) 0%, #8fad27 100%);
}

.myCalendar .fc-col-header-cell.resource-color-2 {
    background: linear-gradient(180deg, var(--ssprd-orange) 0%, #cb6f16 100%);
}

.myCalendar .fc-col-header-cell.resource-color-3 {
    background: linear-gradient(180deg, var(--ssprd-red) 0%, #a93934 100%);
}

.myCalendar .fc-col-header-cell.resource-color-4 {
    background: linear-gradient(180deg, var(--ssprd-light-blue) 0%, #0089bc 100%);
}

.myCalendar .fc-col-header-cell.resource-color-5 {
    background: linear-gradient(180deg, var(--ssprd-purple) 0%, #76457d 100%);
}

/* Matching events */
.myCalendar .fc-event.resource-color-0 {
    background: var(--ssprd-blue) !important;
    color: #fff !important;
}

.myCalendar .fc-event.resource-color-1 {
    background: var(--ssprd-green) !important;
    color: #20310d !important;
}

.myCalendar .fc-event.resource-color-2 {
    background: var(--ssprd-orange) !important;
    color: #fff !important;
}

.myCalendar .fc-event.resource-color-3 {
    background: var(--ssprd-red) !important;
    color: #fff !important;
}

.myCalendar .fc-event.resource-color-4 {
    background: var(--ssprd-light-blue) !important;
    color: #fff !important;
}

.myCalendar .fc-event.resource-color-5 {
    background: var(--ssprd-purple) !important;
    color: #fff !important;
}

/* ─────────────────────────────────────────────
   DEFECT #6, #7, #8 FIX — Header cell text contrast
   
   The global rule below previously forced #fff on ALL resource
   color headers. This caused failures on lighter backgrounds:
     - resource-color-1 green  (#8fad27): #fff = 2.11:1 FAIL
     - resource-color-2 orange (#cb6f16): #fff = 2.43:1 FAIL
     - resource-color-4 blue   (#0089bc): #fff = 2.17:1 FAIL

   Fix: Colors 0, 3, 5 (dark blue, red, purple) keep white text
   as they already pass 3:1. Colors 1, 2, 4 switch to dark text
   (#1a1a1a) which passes on all three lighter backgrounds:
     - resource-color-1 green  (#8fad27): #1a1a1a = 9.56:1 PASS
     - resource-color-2 orange (#cb6f16): #1a1a1a = 4.21:1 PASS
     - resource-color-4 blue   (#0089bc): #1a1a1a = 4.68:1 PASS
   ───────────────────────────────────────────── */

/* Colors 0, 3, 5 — dark backgrounds, white text passes ✅ */
.myCalendar .fc-col-header-cell.resource-color-0 .fc-col-header-cell-cushion,
.myCalendar .fc-col-header-cell.resource-color-3 .fc-col-header-cell-cushion,
.myCalendar .fc-col-header-cell.resource-color-5 .fc-col-header-cell-cushion {
    color: #fff !important;
    font-weight: 600;
}

/* Colors 1, 2, 4 — lighter backgrounds, dark text required ✅
   DEFECT #6: resource-color-1 green  (#8fad27) — was #fff (2.11:1 FAIL), now #1a1a1a (9.56:1 PASS)
   DEFECT #8: resource-color-2 orange (#cb6f16) — was #fff (2.43:1 FAIL), now #1a1a1a (4.21:1 PASS)
   DEFECT #7: resource-color-4 blue   (#0089bc) — was #fff (2.17:1 FAIL), now #1a1a1a (4.68:1 PASS) */
.myCalendar .fc-col-header-cell.resource-color-1 .fc-col-header-cell-cushion,
.myCalendar .fc-col-header-cell.resource-color-2 .fc-col-header-cell-cushion,
.myCalendar .fc-col-header-cell.resource-color-4 .fc-col-header-cell-cushion {
    color: #1a1a1a !important;
    font-weight: 600;
}

.calendar-selected-title {
    max-width: 1100px;
    margin: 1rem auto 0.5rem auto;
    padding: 0.75rem 1rem;
    font-family: "Inter", "Avenir Next", Arial, sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--ssprd-blue);
    background: #ffffff;
    border-left: 5px solid var(--ssprd-green);
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}