:root {
    --color-m1: #ff8a80; /* Red-ish */
--color-m2-a: #1976d2; /* Blue - Includes Subawards (T-20) */

    --color-m2-b: #ffe082; /* Yellow - No Subawards */
    --color-m3: #a5d6a7; /* Green */
    --color-m4: #80deea; /* Cyan */
    --color-m5:  #ab47bc; /* Purple - Sponsor Due Date (T-0) */
    --text-dark: #333;
    --bg-color: #f4f7f6;
    --card-bg: #ffffff;
}

.proposal-deadline-calendar-wrapper {
    
    padding: 20px;
    background-color: var(--bg-color);
    color: var(--text-dark);
    max-width: 1200px;
    margin: 0 auto 40px; /* center and add bottom space */
}

 
.proposal-deadline-calendar-wrapper h1 {
    color: #2c3e50;
    margin-bottom: 10px;
    text-align: center !important;
}

 .proposal-deadline-calendar-wrapper h2 {
    color: #2c3e50;
    margin-bottom: 10px;
    text-align: center !important;
}

.proposal-deadline-calendar-wrapper p.subtitle {
    text-align: center !important;
    max-width: 700px;
    margin: 0 auto 20px;
}

 

        /* --- INPUT SECTION --- */

        .controls {

            background: var(--card-bg);

            padding: 20px;

            border-radius: 10px;

            box-shadow: 0 4px 6px rgba(0,0,0,0.1);

            margin-bottom: 30px;

            display: flex;

            flex-direction: column;

            align-items: center;

            gap: 10px;

        }

 

        label {

            font-weight: bold;

            color: #2c3e50;

        }

 

        input[type="date"] {

            padding: 10px;

            font-size: 16px;

            border: 2px solid #ddd;

            border-radius: 5px;

            outline: none;

        }

 

        input[type="date"]:focus {

            border-color: var(--color-m5);

        }

 

        /* --- CALENDAR GRID STYLES --- */

        .calendar-wrapper {

            display: flex;

            gap: 20px;

            flex-wrap: wrap;

            justify-content: center;

            width: 100%;

            max-width: 1000px;

        }

 

        .month-container {

            background: var(--card-bg);

            border-radius: 10px;

            box-shadow: 0 4px 15px rgba(0,0,0,0.05);

            padding: 20px;

            width: 320px;

        }

 

        .month-header {

            text-align: center;

            font-weight: bold;

            font-size: 1.2em;

            margin-bottom: 15px;

            color: #2c3e50;

        }

 

        .calendar-grid {

            display: grid;

            grid-template-columns: repeat(7, 1fr);

            gap: 5px;

            text-align: center;

        }

 

        .day-label {

            font-size: 0.8em;

            font-weight: bold;

            color: #999;

            margin-bottom: 5px;

        }

 

        .day-cell {

            height: 40px;

            display: flex;

            align-items: center;

            justify-content: center;

            border-radius: 50%;

            font-size: 0.9em;

            cursor: default;

            position: relative;

        }

 

        .day-cell:hover {

            background-color: #f0f0f0;

        }

 

        .day-cell.empty {

            background: transparent;

            cursor: default;

        }

 

        .weekend {

            color: #ccc;

        }

 

        /* --- EVENT INDICATORS --- */

        .event-dot {

            position: absolute;

            bottom: 2px;

            width: 6px;

            height: 6px;

            border-radius: 50%;

        }

 

        .has-event {

            color: #000;

            font-weight: bold;

        }

       

        .has-event.m5 { background-color: var(--color-m5); border: 2px solid #1565c0; }

        .has-event.m4 { background-color: var(--color-m4); }

        .has-event.m3 { background-color: var(--color-m3); }

        .has-event.m2a { background-color: var(--color-m2-a); }

        .has-event.m2b { background-color: var(--color-m2-b); }

        .has-event.m1 { background-color: var(--color-m1); }

 

        /* --- LEGEND / LIST --- */

        .legend-container {

            margin-top: 30px;

            width: 100%;

            max-width: 800px;

            background: var(--card-bg);

            border-radius: 10px;

            padding: 20px;

            box-shadow: 0 4px 15px rgba(0,0,0,0.05);

        }

 

        .legend-item {

            display: flex;

            align-items: center;

            padding: 10px;

            border-bottom: 1px solid #eee;

        }

 

        .legend-item:last-child {

            border-bottom: none;

        }

 

        .date-badge {

            font-weight: bold;

            padding: 5px 10px;

            border-radius: 5px;

            min-width: 100px;

            text-align: center;

            margin-right: 15px;

            font-size: 0.9em;

        }

 

        .legend-desc {

            flex: 1;

        }

       

        .legend-title {

            font-weight: bold;

            display: block;

        }

       

        .legend-sub {

            font-size: 0.85em;

            color: #666;

        }

 

        .l-m1 { background-color: var(--color-m1); }

        .l-m2a { background-color: var(--color-m2-a); }

        .l-m2b { background-color: var(--color-m2-b); }

        .l-m3 { background-color: var(--color-m3); }

        .l-m4 { background-color: var(--color-m4); }

     
        
        .l-m5 {
    background-color: var(--color-m5);
    border: 2px solid #6a1b9a;
}

        
        /* Holiday gray-out styling */
.proposal-deadline-calendar-wrapper .holiday {
    background-color: #e5e5e5 !important;
    color: #999 !important;
    opacity: 0.8;
}

.holiday-legend {
    margin-top: 15px;
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    color: #555;
}

.holiday-legend .holiday-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #e5e5e5;
    border: 1px solid #bbb;
    margin-right: 8px;
}