* {
    font-family: "Geist", sans-serif;
}

body {
    background-color: #F8FAFC;
}

/* Open issue  */
.issue-box.open {
    border-top: 4px solid #00A96E;
}

/* Closed issue */
.issue-box.closed {
    border-top: 4px solid #A855F7;
}

/* Active filter button */
.filter-btn.active-tab {
    background-color: #4A00FF;
    color: white;
}

/* ===== Mobile responsive ===== */
@media (max-width: 639px) {

    body > div.container {
        width: 100% !important;
        max-width: 100%;
        padding: 1.5rem;
        margin: 0 auto;
        box-sizing: border-box;
    }

    body.flex {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    main {
        max-width: 95% !important;
    }

    #tab-container {
        padding: 0.75rem;
    }

    #tab-container .filter-btn {
        width: auto !important;
        flex: 1;
        min-width: 0;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    #issue-container > div:first-child {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        padding: 1rem;
    }

    #issues-grid {
        padding: 0.75rem;
    }
    .navbar .input {
        max-width: 140px;
    }

    .modal-box .flex.items-center.gap-2 {
        flex-wrap: wrap;
    }

    .modal-box .grid-cols-2 {
        grid-template-columns: 1fr;
    }
}