@import "constants.css";
@import "body.css";
@import "animations.css";
@import url("components/inputs.css");
@import url("components/buttons.css");
@import url("components/modals.css");

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal-content {
    background-color: var(--dark-purple);
    color: var(--off-white);
    margin: 10% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
    overflow: hidden;
}

#modalBody {
    overflow-y: auto;
    padding: 1em;
    max-height: 50vh;
}

.delete-btn {
    background-color: var(--dark-red);
    color: var(--off-white);
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth transition */
}

.delete-btn:hover {
    background-color: var(--red);
    transform: scale(1.01); /* Slight zoom effect */
}

.delete-btn:focus {
    outline: 2px dashed #f9c74f; /* Clear focus outline */
}

/* SCROLLBAR STYLES */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-thumb {
    background-color: var(--duolingo-grey-border);
    border-radius: 10px;
}

::-webkit-scrollbar-track {
    background-color: var(--light-purple);
    border-radius: 10px;
}
/* ---------------- */


@media (max-width: 1180px) and (min-width: 780px) {
    .combined-container {
        overflow: auto;
    }

    .urgent-widget h2 {
        font-size: 1em;
    }

    .no-urgent-tasks {
        font-weight: normal;
        padding: 1em;
    }

    .no-upcoming-events {
        padding-top: 1em;
    }

    .upcoming-events-widget h2 {
        font-size: 1em;
    }

    .monthly-cashflow-widget h2 {
        font-size: 1em;
    }

    .month-specifier {
        padding-bottom: 0.75em;
        font-size: 0.8em;
    }

    .amount {
        font-size: 1.5em;
    }

    .bottom-widgets {
        flex-direction: column;
        gap: 20px;
    }

    .calendar {
        overflow: visible;
    }

    .upgrade-to-unlock {
        min-height: 400px;
    }

    .email-container {
        grid-template-columns: 1fr 3fr 1fr; /* Slightly less space for the sender, subject, and date */
    }
}

@media (max-width: 780px) {
    .combined-container {
        overflow: auto;
    }

    .urgent {
        min-height: 200px;
    }

    .urgent-task {
        font-size: 0.75em;
        padding: 0.75em;
        margin: 0.75em;
    }

    .upcoming-events {
        min-height: 200px;
    }

    .email-container {
        font-size: 0.85em;
        grid-template-columns: 1fr 2fr 1fr;
    }

    .calendar, .e-mail {
        width: 100%;
        margin: 10px 0;
    }

    /* Adjust the font size and padding for smaller screens */
    .upcoming-event-card p:first-child {
        font-size: 0.8em;
    }

    .upcoming-event-card p:last-child {
        font-size: 1em;
    }

    .monthly-cashflow-widget h2 {
        font-size: 1.1em;
    }

    .fc-center {
        font-size: 0.7em;
    }

    .fc-day-header {
        font-size: 0.7em;
    }
}

@media (max-width: 390px) {
    .email-container {
        font-size: 0.75em;
        grid-template-columns: 1fr;
    }

    .calendar, .e-mail {
        width: 100%;
        margin: 10px 0;
    }

    .urgent-task {
        font-size: 0.75em;
        padding: 0.75em;
        margin: 0.75em;
    }

    .upcoming-event-card p:first-child {
        font-size: 0.75em;
    }

    .upcoming-event-card p:last-child {
        font-size: 0.9em;
    }

    .monthly-cashflow-widget h2 {
        font-size: 1em;
    }

    .fc-center {
        font-size: 0.65em;
    }

    .fc-day-header {
        font-size: 0.65em;
    }

    /* Hide certain elements for mobile */
    .fc-left, .fc-right {
        display: block;
    }
}