.ugrad-upcoming-deadline-container {
    display: flex;
    flex-direction: column;
    gap: 30px;
    container-type: inline-size; /* enable container queries based on width */
    container-name: deadline;    /* optional, lets you target it by name */
}

.ugrad-upcoming-deadlines-event-list-single-column {
    display: grid;
    grid-template-columns: repeat(1, 1fr);  
    justify-content: center; 
    gap: 44px;
}

.ugrad-upcoming-deadline-with-subcategory-section {
    display: block;
}

.ugrad-upcoming-deadline-no-subcategory-section {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 44px;  
    margin-bottom: 60px; 
}

.ugrad-upcoming-dates-subcategory-title {
    color: #000 !important;
    font-size: 20px !important;
    margin-bottom: 0px !important;
    margin-left: 0 !important;
}

.ugrad-upcoming-deadline-tab-list-wrapper {
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    gap: 20px;
    align-self: stretch;
    flex-wrap: wrap;
}

.ugrad-tablist-navigation-button {
    display: flex;
    height: 40px;
    padding: 10px 25px;
    align-items: center;
    border-radius: var(--umbc-radius-xl, 24px);
    border: 2px solid #007176;
    background: #007176;
    color: #FFF;
    text-align: center;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    transition: background 0.3s ease; /* Smooth transition when toggling */
    text-decoration: none !important;
}

.ugrad-tablist-navigation-button:hover {
    color: #000 !important;
    background: #C6E1E2 !important;
    border-color: #C6E1E2 !important;
}

.ugrad-tablist-navigation-button.active {
    color: #000;
    background: #FDB515;
    border-color: #FDB515 !important;
}

.ugrad-upcoming-deadline-season-tablist {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 24px;
    border-bottom: 1px solid #ACACAC;
    margin-bottom: 24px;
}

.ugrad-season-tablist-navigation-button {
    display: flex;
    align-items: center;
    padding: 0 0 10px 0;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: #555;
    text-align: center;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-bottom: -1px; /* sit flush on top of the tablist's own bottom border */
    transition: color 0.3s ease, border-color 0.3s ease;
}

.ugrad-season-tablist-navigation-button:hover {
    color: #007176;
}

.ugrad-season-tablist-navigation-button.active {
    color: #007176;
    border-bottom-color: #007176;
}

.ugrad-upcoming-deadline-event-list {
    display: flex;
    max-width: 554px;
    padding: 20px 24px;
    align-items: center;
    gap: 24px;
    
    border-radius: var(--umbc-radius-xl, 24px);
    background: #FFF;
    box-shadow: var(--umbc-shadow-pop);   
}

.ugrad-upcoming-deadline-calender-date {
    display: flex;
    width: 69.538px;
    height: 140px;
    flex-shrink: 0;
    gap: 24px;
    align-items: center;
}

.decorative-calender-date {
    width: 47px;
    height: 68.077px;
    flex-shrink: 0;
}

.calender-month {
    color: #000;
    text-align: center;
    font-family: Inter;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.calender-day {
    color: #000;
    text-align: center;
    font-family: Inter;
    font-size: 35px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.decorative-calender-date-icon{
    width: 4px;
    height: 140px;
    flex-shrink: 0;
    background: #FDB515;
    border: 0;
}

.ugrad-upcoming-deadline-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 16px;
    flex: 1 0 0;
    white-space: normal;        /* allow wrapping at spaces */
    overflow-wrap: break-word;  /* break long words if needed */
    word-break: break-word;     /* legacy support */
    min-width: 0;               /* prevents flex/grid overflow */
}

.ugrad-upcoming-deadline-content :first-child {
    color: #252525;
    font-family: Inter;
    font-size: 18px !important;
    font-style: normal;
    font-weight: 700 !important;
    line-height: 24px;
    margin: 0px;
}

.ugrad-upcoming-deadline-content :last-child {
    color: #252525;
    font-family: Inter;
    font-size: 16px !important;
    font-style: normal;
    font-weight: 400 !important;
    line-height: normal;
    margin: 0px;
}

.ugrad-upcoming-deadline-event-list .ugrad-upcoming-deadline-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #F5F5F5;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ugrad-tablist-content {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.event-list-content {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.ugrad-upcoming-deadline-content ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.ugrad-upcoming-deadline-content ul li {
    padding-block: 0.25rem;
    border-bottom: 1px solid #e8e8e8;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.3;
}

.ugrad-upcoming-deadline-content ul li:last-child {
    border-bottom: none;
}

.ugrad-upcoming-deadline-content b,
.ugrad-upcoming-deadline-content strong {
    font-weight: 700 !important;
}

.ugrad-upcoming-deadline-content i,
.ugrad-upcoming-deadline-content em {
    font-style: italic !important;
}

.ugrad-upcoming-deadline-content ul li strong,
.ugrad-upcoming-deadline-content ul li b {
    font-weight: 800 !important;
}

.ugrad-upcoming-deadline-content ul + p {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid #e8e8e8;
    color: #555 !important;
    font-size: 14px !important;
    font-style: italic;
    font-weight: 400 !important;
    line-height: 1.4;
}

.horizontal-line-for-no-subcategory {
    height: 1px;
    background: #ACACAC;
    margin-bottom: 30px !important;
}

.horizontal-line-for-mobile-version {
    display: none;
    height: 1px;
    background: #ACACAC;
    margin-bottom: 14px !important;   
}

/* Container query: if the container width < 500px */
@container deadline (max-width: 500px) {
    .ugrad-upcoming-deadline-no-subcategory-section {
        grid-template-columns: repeat(1, 1fr);
        margin-bottom: 22px;
    }
}

/* =============================================================
   Dark Mode — Upcoming Deadlines Block
   ============================================================= */

/* Subcategory heading */
[data-theme="dark"] .ugrad-upcoming-dates-subcategory-title {
    color: #e0e0e0 !important;
}

/* Nav tab buttons in dark mode: teal-on-near-black reads poorly, so inactive
   tabs become "ghost" buttons (transparent fill, light outline, white label)
   and the active tab stays solid gold. !important is required because the
   block's JS hardcodes inline background/border/color on every button on
   load and on click — inline styles would otherwise win. */
[data-theme="dark"] .ugrad-tablist-navigation-button {
    background: transparent !important;
    border-color: #e0e0e0 !important;
    color: #fff !important;
}

[data-theme="dark"] .ugrad-tablist-navigation-button:hover {
    background: #e0e0e0 !important;
    border-color: #e0e0e0 !important;
    color: #000 !important;
}

[data-theme="dark"] .ugrad-tablist-navigation-button.active {
    background: #FDB515 !important;
    border-color: #FDB515 !important;
    color: #000 !important;
}

/* Season sub-tabs: underline style, light-grey rule + muted label by
   default, gold underline + gold label when active. */
[data-theme="dark"] .ugrad-upcoming-deadline-season-tablist {
    border-bottom-color: #444;
}

[data-theme="dark"] .ugrad-season-tablist-navigation-button {
    color: #a0a0a0;
}

[data-theme="dark"] .ugrad-season-tablist-navigation-button:hover {
    color: #FDB515;
}

[data-theme="dark"] .ugrad-season-tablist-navigation-button.active {
    color: #FDB515;
    border-bottom-color: #FDB515;
}

/* Event card */
[data-theme="dark"] .ugrad-upcoming-deadline-event-list {
    background: var(--umbc-surface-card, #2d2d2d);
    box-shadow: var(--umbc-shadow-pop);
}

/* Calendar date text */
[data-theme="dark"] .calender-month,
[data-theme="dark"] .calender-day {
    color: #e0e0e0;
}

/* Gold vertical bar accent stays — gold on dark card is valid */

/* Content text — also override Astra palette class (has-ast-global-color-7-color = #000)
   which otherwise forces black text on the dark card surface. */
[data-theme="dark"] .ugrad-upcoming-deadline-content :first-child,
[data-theme="dark"] .ugrad-upcoming-deadline-content :last-child,
[data-theme="dark"] .ugrad-upcoming-deadline-content .has-ast-global-color-7-color,
[data-theme="dark"] .ugrad-upcoming-deadline-content .has-text-color {
    color: #c0c0c0 !important;
}

/* Icon circle */
[data-theme="dark"] .ugrad-upcoming-deadline-event-list .ugrad-upcoming-deadline-icon {
    background: var(--umbc-surface-card, #2d2d2d);
}

/* Horizontal dividers */
[data-theme="dark"] .horizontal-line-for-no-subcategory,
[data-theme="dark"] .horizontal-line-for-mobile-version {
    background: #444;
}

/* List item separators and decision text in dark mode */
[data-theme="dark"] .ugrad-upcoming-deadline-content ul li {
    border-bottom-color: #444;
}

[data-theme="dark"] .ugrad-upcoming-deadline-content ul + p {
    border-top-color: #444;
    color: #a0a0a0 !important;
}

@media (max-width: 991px) {
    .ugrad-upcoming-deadline-no-subcategory-section {
        grid-template-columns: repeat(1, 1fr);
        margin-bottom: 22px;
    }

    .ugrad-upcoming-deadline-tab-list-wrapper {
        gap: 12px;
    }

    .ugrad-upcoming-deadline-season-tablist {
        gap: 16px;
        margin-bottom: 16px;
    }

    .ugrad-season-tablist-navigation-button {
        padding-bottom: 8px;
        font-size: 14px;
    }

    .ugrad-tablist-content {
        gap: 14px;
    }

    .ugrad-upcoming-dates-subcategory-title {
        font-size: 18px !important;
    }

    .ugrad-upcoming-deadline-event-list {
        /* height: 100px; */
        padding: 12px;
    }

    .ugrad-upcoming-deadline-calender-date {
        width: 53.804px;
    }

    .decorative-calender-date-icon {
        width: 3.279px !important;
        height: 76px !important;
    }

    .decorative-calender-date {
        width: 38.525px;
        height: 36.956px;
    }

    .calender-month {
        font-size: 14px !important;
    }

    .calender-day {
        font-size: 24px !important;
    }

    .ugrad-upcoming-deadline-content {
        gap: 8px;
    }

    .ugrad-upcoming-deadline-content :first-child {
        font-size: 14px !important;
    }

    .ugrad-upcoming-deadline-content :last-child {
        font-size: 12px !important;
    }

    .horizontal-line-for-no-subcategory {
        margin-bottom: 14px !important;
    }

    .horizontal-line-for-mobile-version {
        display: block;
    }
}