@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');

:root {
    --blue: #003DA5;
    --navy: #151F6D;
    --warm: #F5EFEB;
    --green: #008540;
    --pink: #DEA8E8;
    --orange: #FF7439;
    --light: #69A3E8;
    --ink: #30261E;

    --blue-soft: rgba(0, 61, 165, 0.10);
    --navy-soft: rgba(21, 31, 109, 0.10);
    --green-soft: rgba(0, 133, 64, 0.12);
    --pink-soft: rgba(222, 168, 232, 0.22);
    --orange-soft: rgba(255, 116, 57, 0.14);
    --light-soft: rgba(105, 163, 232, 0.15);

    --bs-primary: #003DA5;
    --bs-primary-rgb: 0, 61, 165;

    --bs-secondary: #151F6D;
    --bs-secondary-rgb: 21, 31, 109;

    --bs-success: #008540;
    --bs-success-rgb: 0, 133, 64;

    --bs-danger: #FF7439;
    --bs-danger-rgb: 255, 116, 57;

    --bs-warning: #DEA8E8;
    --bs-warning-rgb: 222, 168, 232;

    --bs-info: #69A3E8;
    --bs-info-rgb: 105, 163, 232;

    --bs-body-bg: #F5EFEB;
    --bs-body-color: #151F6D;

    --bs-border-color: rgba(21, 31, 109, 0.14);
    --bs-secondary-color: rgba(21, 31, 109, 0.72);
    --bs-tertiary-bg: rgba(105, 163, 232, 0.10);

    --bs-link-color: #003DA5;
    --bs-link-hover-color: #151F6D;

    --bs-success-bg-subtle: rgba(0, 133, 64, 0.12);
    --bs-success-text-emphasis: #006A34;

    --bs-secondary-bg-subtle: rgba(21, 31, 109, 0.10);
    --bs-secondary-text-emphasis: #151F6D;

    --bs-danger-bg-subtle: rgba(255, 116, 57, 0.14);
    --bs-danger-text-emphasis: #B84B1D;

    --bs-warning-bg-subtle: rgba(222, 168, 232, 0.22);
    --bs-warning-text-emphasis: #7B4B83;

    --bs-info-bg-subtle: rgba(105, 163, 232, 0.18);
    --bs-info-text-emphasis: #2F5F97;
}

html,
body {
    min-height: 100%;
}

body {
    font-family: 'Outfit', sans-serif;
    background: var(--warm);
    color: var(--navy);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6,
label,
.navbar-brand,
.btn,
.form-label,
.card-title,
.modal-title {
    color: var(--navy);
    font-family: 'Outfit', sans-serif;
}

a {
    color: var(--blue);
}

a:hover {
    color: var(--navy);
}

.text-secondary {
    color: var(--bs-secondary-color) !important;
}



/* ==========================================================
   Cards
   ========================================================== */

.card {
    border-radius: 1rem;
    background: #fff;
}

.card-header {
    color: var(--navy);
}

.shadow-sm {
    box-shadow: 0 0.35rem 1rem rgba(21, 31, 109, 0.08) !important;
}

.calendar-stat-card {
    position: relative;
    overflow: hidden;
    border-top: 4px solid var(--blue);
}

.calendar-stat-card:nth-child(2) {
    border-top-color: var(--green);
}

.calendar-stat-card:nth-child(3) {
    border-top-color: var(--pink);
}

.calendar-stat-card:nth-child(4) {
    border-top-color: var(--orange);
}

/* ==========================================================
   Forms
   ========================================================== */

.form-control,
.form-select,
.btn,
.alert,
.modal-content,
.dropdown-menu {
    border-radius: 0.75rem;
}

.form-control,
.form-select,
textarea {
    border-color: rgba(21, 31, 109, 0.18);
    color: var(--navy);
    background: #fff;
}

.form-control::placeholder,
textarea::placeholder {
    color: rgba(21, 31, 109, 0.45);
}

.form-control:focus,
.form-select:focus,
textarea:focus {
    border-color: var(--light);
    box-shadow: 0 0 0 0.2rem rgba(105, 163, 232, 0.20);
}

.form-check-input {
    border-color: rgba(21, 31, 109, 0.3);
}

.form-check-input:checked {
    background-color: var(--blue);
    border-color: var(--blue);
}

.form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 61, 165, 0.15);
}

/* ==========================================================
   Buttons
   ========================================================== */

.btn {
    font-weight: 600;
    letter-spacing: 0.01em;
}

.btn-primary,
.btn-eulist-primary {
    color: #fff;
    background-color: var(--blue);
    border-color: var(--blue);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-eulist-primary:hover,
.btn-eulist-primary:focus {
    color: #fff;
    background-color: var(--navy);
    border-color: var(--navy);
}

.btn-success {
    color: #fff;
    background-color: var(--green);
    border-color: var(--green);
}

.btn-success:hover,
.btn-success:focus {
    color: #fff;
    background-color: #006a34;
    border-color: #006a34;
}

.btn-danger {
    color: #fff;
    background-color: var(--orange);
    border-color: var(--orange);
}

.btn-danger:hover,
.btn-danger:focus {
    color: #fff;
    background-color: #d85c28;
    border-color: #d85c28;
}

.btn-warning {
    color: var(--navy);
    background-color: var(--pink);
    border-color: var(--pink);
}

.btn-warning:hover,
.btn-warning:focus {
    color: var(--navy);
    background-color: #cf95da;
    border-color: #cf95da;
}

.btn-info {
    color: var(--navy);
    background-color: var(--light);
    border-color: var(--light);
}

.btn-info:hover,
.btn-info:focus {
    color: #fff;
    background-color: var(--blue);
    border-color: var(--blue);
}

.btn-outline-primary {
    color: var(--blue);
    border-color: var(--blue);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    color: #fff;
    background-color: var(--blue);
    border-color: var(--blue);
}

.btn-outline-secondary {
    color: var(--navy);
    border-color: rgba(21, 31, 109, 0.3);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    color: #fff;
    background-color: var(--navy);
    border-color: var(--navy);
}

.btn-outline-danger {
    color: var(--orange);
    border-color: var(--orange);
}

.btn-outline-danger:hover,
.btn-outline-danger:focus {
    color: #fff;
    background-color: var(--orange);
    border-color: var(--orange);
}

.btn-eulist-light {
    color: var(--blue);
    background: #fff;
    border: 1px solid #fff;
}

.btn-eulist-light:hover,
.btn-eulist-light:focus {
    color: #fff;
    background: transparent;
    border-color: rgba(255, 255, 255, 0.8);
}

/* ==========================================================
   Alerts
   ========================================================== */

.alert-success {
    color: #005d2c;
    background: var(--green-soft);
    border-color: rgba(0, 133, 64, 0.30);
}

.alert-danger {
    color: #a43d17;
    background: var(--orange-soft);
    border-color: rgba(255, 116, 57, 0.35);
}

.alert-warning {
    color: #6f4777;
    background: var(--pink-soft);
    border-color: rgba(222, 168, 232, 0.45);
}

.alert-info {
    color: #2f5f97;
    background: var(--light-soft);
    border-color: rgba(105, 163, 232, 0.40);
}

.alert-primary {
    color: var(--navy);
    background: var(--blue-soft);
    border-color: rgba(0, 61, 165, 0.28);
}

/* ==========================================================
   Badges
   ========================================================== */

.badge {
    font-weight: 600;
    padding: 0.45em 0.7em;
    border-radius: 999px;
}

.text-bg-success {
    color: #fff !important;
    background-color: var(--green) !important;
}

.text-bg-secondary {
    color: #fff !important;
    background-color: var(--navy) !important;
}

.text-bg-danger {
    color: #fff !important;
    background-color: var(--orange) !important;
}

.text-bg-warning {
    color: var(--navy) !important;
    background-color: var(--pink) !important;
}

.text-bg-info {
    color: var(--navy) !important;
    background-color: var(--light) !important;
}

.text-bg-primary {
    color: #fff !important;
    background-color: var(--blue) !important;
}

/* ==========================================================
   Tables
   ========================================================== */

.table > :not(caption) > * > * {
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
    color: var(--navy);
    border-color: rgba(21, 31, 109, 0.10);
}

.table-light,
.table-light > th,
.table-light > td {
    --bs-table-bg: var(--blue);
    --bs-table-color: #fff;
}

.table thead th {
    color: #fff;
    font-weight: 600;
    border-bottom: 0;
}

.table tbody tr {
    transition: background-color 0.12s ease;
}

.table tbody tr:hover {
    background: rgba(105, 163, 232, 0.07);
}

.event-thumb {
    width: 72px;
    height: 48px;
    object-fit: cover;
    border-radius: 0.45rem;
}

.admin-sidebar {
    top: 1rem;
}



/* ==========================================================
   Branding
   ========================================================== */

.eulist-topbar {
    background: var(--blue);
    box-shadow: 0 2px 14px rgba(21, 31, 109, 0.18);
}

.eulist-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    color: var(--warm) !important;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: 0.01em;
}

.eulist-brand-logo {
    width: 42px;
    height: 42px;
    object-fit: contain;
    display: block;
}

.eulist-brand-text {
    color: var(--warm);
    font-weight: 700;
    line-height: 1;
}

.eulist-user-name {
    color: var(--warm);
    font-weight: 500;
}

.eulist-footer {
    background: rgba(255, 255, 255, 0.75);
    color: var(--navy);
    border-color: rgba(21, 31, 109, 0.12) !important;
}

/* ==========================================================
   Login
   ========================================================== */

.login-page {
    background:
        linear-gradient(
            180deg,
            rgba(0, 61, 165, 0.12) 0%,
            rgba(245, 239, 235, 1) 32%
        );
}

.login-brand-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 128px;
    height: 128px;
    /* background: #fff;
    border-radius: 1.25rem;
    box-shadow: 0 10px 26px rgba(21, 31, 109, 0.12); */
}

.login-brand-logo {
    width: 128px;
    height: 128px;
    object-fit: contain;
}

.login-brand-title {
    color: var(--navy);
    font-size: 2rem;
    font-weight: 800;
}

.login-brand-subtitle {
    color: var(--bs-secondary-color);
    font-weight: 400;
}

.login-card {
    background: rgba(255, 255, 255, 0.96);
    border-top: 4px solid var(--blue) !important;
}

/* ==========================================================
   Monthly event calendar
   ========================================================== */

.calendar-page {
    margin: 0 auto;
}

.calendar-card {
    overflow: hidden;
}

.calendar-month-title {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--navy);
}

.calendar-wrapper {
    width: 100%;
    overflow-x: auto;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(140px, 1fr));
    min-width: 980px;
    border-top: 1px solid var(--bs-border-color);
}

.calendar-weekday {
    padding: 0.8rem 0.5rem;
    text-align: center;
    font-weight: 700;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #fff;
    background: var(--blue);
    border-right: 1px solid rgba(255, 255, 255, 0.20);
}

.calendar-weekday:last-child {
    border-right: none;
}

.calendar-day {
    position: relative;
    min-height: 155px;
    padding: 0.5rem;
    background: #fff;
    border-right: 1px solid var(--bs-border-color);
    border-bottom: 1px solid var(--bs-border-color);
}

.calendar-day:nth-child(7n) {
    border-right: none;
}

.calendar-day:nth-child(7n + 8),
.calendar-day:nth-child(7n + 14) {
    background: rgba(105, 163, 232, 0.07);
}

.calendar-day-other-month {
    background: rgba(105, 163, 232, 0.11);
}

.calendar-day-other-month .calendar-day-number {
    color: rgba(21, 31, 109, 0.45);
}

.calendar-day-today {
    background: rgba(222, 168, 232, 0.18);
}

.calendar-day-header {
    min-height: 32px;
}

.calendar-day-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--navy);
    border-radius: 50%;
}

.calendar-day-today .calendar-day-number {
    color: #fff;
    background: var(--blue);
}

.calendar-day-events {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

/* ==========================================================
   Calendar event
   ========================================================== */

.calendar-event {
    display: flex;
    position: relative;
    align-items: flex-start;
    gap: 0.35rem;
    width: 100%;
    padding: 0.4rem 0.5rem;
    text-align: left;
    font-size: 0.78rem;
    line-height: 1.25;
    border: 0;
    border-left: 4px solid transparent;
    border-radius: 0.45rem;
    cursor: pointer;
    transition:
        transform 0.1s ease,
        filter 0.1s ease,
        box-shadow 0.1s ease;
}

.calendar-event:hover {
    transform: translateY(-1px);
    filter: brightness(0.98);
    box-shadow: 0 2px 8px rgba(21, 31, 109, 0.10);
}

/* ==========================================================
   Calendar category colours
   ========================================================== */

.calendar-category-conference {
    --event-color: var(--blue);
    --event-background: rgba(0, 61, 165, 0.12);
    --event-text: var(--blue);
}


.calendar-category-workshop {
    --event-color: var(--green);
    --event-background: rgba(0, 133, 64, 0.13);
    --event-text: #006A34;
}


.calendar-category-seminar {
    --event-color: var(--orange);
    --event-background: rgba(255, 116, 57, 0.16);
    --event-text: #A84319;
}


.calendar-category-webinar {
    --event-color: #A866B4;
    --event-background: rgba(222, 168, 232, 0.28);
    --event-text: #75427E;
}


.calendar-category-summer-school {
    --event-color: var(--light);
    --event-background: rgba(105, 163, 232, 0.20);
    --event-text: #275E9B;
}


.calendar-category-meeting {
    --event-color: var(--navy);
    --event-background: rgba(21, 31, 109, 0.12);
    --event-text: var(--navy);
}


.calendar-category-student-event {
    --event-color: #B675C3;
    --event-background: rgba(222, 168, 232, 0.18);
    --event-text: #704479;
}


.calendar-category-research-event {
    --event-color: #00877B;
    --event-background: rgba(0, 135, 123, 0.14);
    --event-text: #00675E;
}


.calendar-category-deadline {
    --event-color: #D94F2B;
    --event-background: rgba(255, 116, 57, 0.23);
    --event-text: #9A341A;
}


.calendar-category-other {
    --event-color: #6B7280;
    --event-background: rgba(107, 114, 128, 0.13);
    --event-text: #4B5563;
}

.calendar-event[class*="calendar-category-"] {
    color: var(--event-text);
    background: var(--event-background);
    border-left-color: var(--event-color);
}


.calendar-event-is-cancelled {
    opacity: 0.48;
    text-decoration: line-through;
}


.calendar-event-is-cancelled:hover {
    opacity: 0.7;
}

.calendar-event-time {
    flex: 0 0 auto;
    font-weight: 700;
    white-space: nowrap;
}

.calendar-event-title {
    flex: 1;
    overflow: hidden;
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.calendar-featured {
    flex: 0 0 auto;
    color: #a45daf;
}


/* ==========================================================
   Calendar category guide
   ========================================================== */

.calendar-category-guide {
    padding: 1rem 1.25rem;

    background:
        rgba(
            245,
            239,
            235,
            0.55
        );

    border-top:
        1px solid
        var(--bs-border-color);
}


.calendar-category-guide-title {
    color: var(--navy);

    font-size: 0.82rem;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 0.04em;
}


.calendar-category-guide-item {
    display: inline-flex;

    align-items: center;

    gap: 0.4rem;

    color: var(--navy);

    font-size: 0.78rem;
    font-weight: 500;
}


.calendar-category-guide-dot {
    display: inline-block;

    width: 11px;
    height: 11px;

    flex: 0 0 11px;

    border-radius: 50%;

    background:
        var(--event-color);
}


.calendar-status-note {
    max-width: 400px;
}



/* ==========================================================
   Legend
   ========================================================== */

.calendar-legend {
    font-size: 0.8rem;
    color: var(--bs-secondary-color);
}

.calendar-legend-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-right: 0.25rem;
    border-radius: 50%;
}

.calendar-legend .bg-success {
    background-color: var(--green) !important;
}

.calendar-legend .bg-secondary {
    background-color: var(--navy) !important;
}

.calendar-legend .bg-danger {
    background-color: var(--orange) !important;
}

/* ==========================================================
   Modal
   ========================================================== */

.modal-content {
    border: 0;
    background: #fff;
    border-top: 5px solid var(--blue);
    box-shadow: 0 1rem 3rem rgba(21, 31, 109, 0.18);
}

.modal-header,
.modal-footer {
    border-color: rgba(21, 31, 109, 0.12);
}

.modal-header {
    background: rgba(105, 163, 232, 0.05);
}

.calendar-modal-image {
    max-height: 360px;
    object-fit: cover;
}

.calendar-modal-description {
    line-height: 1.6;
    color: var(--navy);
}

.calendar-modal-description p:last-child {
    margin-bottom: 0;
}

/* ==========================================================
   TinyMCE framing
   ========================================================== */

.tox-tinymce {
    border-color: rgba(21, 31, 109, 0.18) !important;
    border-radius: 0.75rem !important;
}

.tox .tox-toolbar-overlord,
.tox .tox-toolbar__primary {
    background: rgba(105, 163, 232, 0.05) !important;
}

/* ==========================================================
   Responsive
   ========================================================== */

@media (max-width: 767.98px) {
    .calendar-month-title {
        width: 100%;
        text-align: center;
        order: -1;
        font-size: 1.45rem;
    }

    .calendar-legend {
        width: 100%;
        justify-content: center;
    }

    .calendar-grid {
        grid-template-columns: repeat(7, minmax(120px, 1fr));
        min-width: 840px;
    }

    .calendar-day {
        min-height: 135px;
    }

    .eulist-brand-text {
        font-size: 1rem;
    }

    .eulist-brand-logo {
        width: 36px;
        height: 36px;
    }

    .eulist-user-name {
        display: none;
    }
}

.event-date-summary {
    color: var(--navy);
    background: var(--light-soft);
    border-left: 4px solid var(--light);
    font-weight: 500;
}