:root{
    --dot-size: .35rem;
    --pfp-size: 4rem;
    --icon-size: 1.4rem;
}

/* Boilerplate */
body{
    font-family: system-ui, sans-serif;
    color: black;
    padding: 0;
    margin: 0;
}


/* Basic Card CSS */
.bg{
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url("/assets/bg.svg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;

}

.card{
    max-width: 600px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    margin-bottom: 5vh;
    background: #ffffff;
    border: 2px solid rgba(0, 0, 0, 0.303);
    backdrop-filter: blur(10px);
    padding: 2rem;
    border-radius: 1rem;
}


.card h1{
    font-size: 2rem;
    margin-top: 0;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.card h1 img{
    background-color: #becfe2;
    border-radius: 50%;
    width: var(--pfp-size);
    height: var(--pfp-size);
    padding: 0.5rem;
}

.card > p{
    font-size: 1rem;
    margin-bottom: 1rem;
    text-align: center;
}


/* Form boilerplate */
input, textarea, select, button{
    width: 100%;
    padding: 0.5rem;
    margin-bottom: 1rem;
    border: 1px solid rgba(0, 0, 0, 0.303);
    border-radius: 0.5rem;
    font-size: 1rem;
    display: block;
}

input[type="submit"], button{
    background-color: #064C9A;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s ease;
}


button.loading, input[type="submit"].loading{
    cursor: default;
    color: transparent;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjZmZmIj48cmVjdCB4PSIxMSIgeT0iMSIgd2lkdGg9IjIiIGhlaWdodD0iNSIgb3BhY2l0eT0iLjE0Ii8+PHJlY3QgeD0iMTEiIHk9IjEiIHdpZHRoPSIyIiBoZWlnaHQ9IjUiIHRyYW5zZm9ybT0icm90YXRlKDMwIDEyIDEyKSIgb3BhY2l0eT0iLjI5Ii8+PHJlY3QgeD0iMTEiIHk9IjEiIHdpZHRoPSIyIiBoZWlnaHQ9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDEyIDEyKSIgb3BhY2l0eT0iLjQzIi8+PHJlY3QgeD0iMTEiIHk9IjEiIHdpZHRoPSIyIiBoZWlnaHQ9IjUiIHRyYW5zZm9ybT0icm90YXRlKDkwIDEyIDEyKSIgb3BhY2l0eT0iLjU3Ii8+PHJlY3QgeD0iMTEiIHk9IjEiIHdpZHRoPSIyIiBoZWlnaHQ9IjUiIHRyYW5zZm9ybT0icm90YXRlKDEyMCAxMiAxMikiIG9wYWNpdHk9Ii43MSIvPjxyZWN0IHg9IjExIiB5PSIxIiB3aWR0aD0iMiIgaGVpZ2h0PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgMTIgMTIpIiBvcGFjaXR5PSIuODYiLz48cmVjdCB4PSIxMSIgeT0iMSIgd2lkdGg9IjIiIGhlaWdodD0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTgwIDEyIDEyKSIvPjxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgdHlwZT0icm90YXRlIiBjYWxjTW9kZT0iZGlzY3JldGUiIGR1cj0iMC43NXMiIHZhbHVlcz0iMCAxMiAxMjszMCAxMiAxMjs2MCAxMiAxMjs5MCAxMiAxMjsxMjAgMTIgMTI7MTUwIDEyIDEyOzE4MCAxMiAxMjsyMTAgMTIgMTI7MjQwIDEyIDEyOzI3MCAxMiAxMjszMDAgMTIgMTI7MzMwIDEyIDEyOzM2MCAxMiAxMiIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48L2c+PC9zdmc+");
    background-position: center;
    background-size: 1.5rem;
    background-repeat: no-repeat;
    pointer-events: none;
}



/* Ban Menue Stuff */
.btn-start-appeal{
    display: block;
    width: auto;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    background-color: #064C9A;
    margin: 0;
}
.h-1{
    height: 1rem;
}
.h-2{
    height: 2rem;
}
.h-3{
    height: 3rem;
}
.h-4{
    height: 4rem;
}

.bans-main{
    margin-left: calc(var(--pfp-size)/2 - var(--dot-size)/2);
}
.dotted-vertical{
    mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDEwMCAyMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxjaXJjbGUgY3g9IjUwIiBjeT0iNTAiIHI9IjUwIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K");
    mask-size: 100% var(--dot-size);
    mask-repeat: repeat-y;
    background-color: #00000036;

    width: var(--dot-size);
    display: inline-block;
    margin-left: calc(var(--icon-size)/2 - var(--dot-size)/2);
}

.bans-main > p {
    margin: 0;
    color: #0000009e;
    margin-bottom: 0.5rem;
}
.bans-main > p > span{
    font-weight: bold;
    color: #000000;
    margin-left: 0.25rem;
}
.icon{
    display: flex;
    align-items: center;
}
.appeal-form-container{
    display: flex;
    align-items: flex-start !important;
}
.icon::before{
    content: "";
    display: inline-block;
    width: var(--icon-size);
    height: var(--icon-size);
    margin-right: 0.5rem;
    mask-size: cover;
    mask-repeat: no-repeat;
    mask-position: center;
    background-color: #0000009e;
}
.icon-date::before{
    mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktY2FsZW5kYXItZXZlbnQiIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPHBhdGggZD0iTTExIDYuNWEuNS41IDAgMCAxIC41LS41aDFhLjUuNSAwIDAgMSAuNS41djFhLjUuNSAwIDAgMS0uNS41aC0xYS41LjUgMCAwIDEtLjUtLjV6Ii8+CiAgPHBhdGggZD0iTTMuNSAwYS41LjUgMCAwIDEgLjUuNVYxaDhWLjVhLjUuNSAwIDAgMSAxIDBWMWgxYTIgMiAwIDAgMSAyIDJ2MTFhMiAyIDAgMCAxLTIgMkgyYTIgMiAwIDAgMS0yLTJWM2EyIDIgMCAwIDEgMi0yaDFWLjVhLjUuNSAwIDAgMSAuNS0uNU0xIDR2MTBhMSAxIDAgMCAwIDEgMWgxMmExIDEgMCAwIDAgMS0xVjR6Ii8+Cjwvc3ZnPg==");
}
.icon-reason::before{
    mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktY2hhdC1sZWZ0LWRvdHMiIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPHBhdGggZD0iTTE0IDFhMSAxIDAgMCAxIDEgMXY4YTEgMSAwIDAgMS0xIDFINC40MTRBMiAyIDAgMCAwIDMgMTEuNTg2bC0yIDJWMmExIDEgMCAwIDEgMS0xek0yIDBhMiAyIDAgMCAwLTIgMnYxMi43OTNhLjUuNSAwIDAgMCAuODU0LjM1M2wyLjg1My0yLjg1M0ExIDEgMCAwIDEgNC40MTQgMTJIMTRhMiAyIDAgMCAwIDItMlYyYTIgMiAwIDAgMC0yLTJ6Ii8+CiAgPHBhdGggZD0iTTUgNmExIDEgMCAxIDEtMiAwIDEgMSAwIDAgMSAyIDBtNCAwYTEgMSAwIDEgMS0yIDAgMSAxIDAgMCAxIDIgMG00IDBhMSAxIDAgMSAxLTIgMCAxIDEgMCAwIDEgMiAwIi8+Cjwvc3ZnPg==");
}
.icon-create-appeal::before{
    mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktcGVuY2lsIiB2aWV3Qm94PSIwIDAgMTYgMTYiPgogIDxwYXRoIGQ9Ik0xMi4xNDYuMTQ2YS41LjUgMCAwIDEgLjcwOCAwbDMgM2EuNS41IDAgMCAxIDAgLjcwOGwtMTAgMTBhLjUuNSAwIDAgMS0uMTY4LjExbC01IDJhLjUuNSAwIDAgMS0uNjUtLjY1bDItNWEuNS41IDAgMCAxIC4xMS0uMTY4ek0xMS4yMDcgMi41IDEzLjUgNC43OTMgMTQuNzkzIDMuNSAxMi41IDEuMjA3em0xLjU4NiAzTDEwLjUgMy4yMDcgNCA5LjcwN1YxMGguNWEuNS41IDAgMCAxIC41LjV2LjVoLjVhLjUuNSAwIDAgMSAuNS41di41aC4yOTN6bS05Ljc2MSA1LjE3NS0uMTA2LjEwNi0xLjUyOCAzLjgyMSAzLjgyMS0xLjUyOC4xMDYtLjEwNkEuNS41IDAgMCAxIDUgMTIuNVYxMmgtLjVhLjUuNSAwIDAgMS0uNS0uNVYxMWgtLjVhLjUuNSAwIDAgMS0uNDY4LS4zMjUiLz4KPC9zdmc+");
}
.icon-waiting::before{
    mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktY2xvY2siIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPHBhdGggZD0iTTggMy41YS41LjUgMCAwIDAtMSAwVjlhLjUuNSAwIDAgMCAuMjUyLjQzNGwzLjUgMmEuNS41IDAgMCAwIC40OTYtLjg2OEw4IDguNzF6Ii8+CiAgPHBhdGggZD0iTTggMTZBOCA4IDAgMSAwIDggMGE4IDggMCAwIDAgMCAxNm03LThBNyA3IDAgMSAxIDEgOGE3IDcgMCAwIDEgMTQgMCIvPgo8L3N2Zz4=");
}
.icon-accepted::before{
    mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktY2hlY2stY2lyY2xlIiB2aWV3Qm94PSIwIDAgMTYgMTYiPgogIDxwYXRoIGQ9Ik04IDE1QTcgNyAwIDEgMSA4IDFhNyA3IDAgMCAxIDAgMTRtMCAxQTggOCAwIDEgMCA4IDBhOCA4IDAgMCAwIDAgMTYiLz4KICA8cGF0aCBkPSJtMTAuOTcgNC45Ny0uMDIuMDIyLTMuNDczIDQuNDI1LTIuMDkzLTIuMDk0YS43NS43NSAwIDAgMC0xLjA2IDEuMDZMNi45NyAxMS4wM2EuNzUuNzUgMCAwIDAgMS4wNzktLjAybDMuOTkyLTQuOTlhLjc1Ljc1IDAgMCAwLTEuMDcxLTEuMDUiLz4KPC9zdmc+");
}
.icon-warning::before{
    mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktZXhjbGFtYXRpb24tY2lyY2xlIiB2aWV3Qm94PSIwIDAgMTYgMTYiPgogIDxwYXRoIGQ9Ik04IDE1QTcgNyAwIDEgMSA4IDFhNyA3IDAgMCAxIDAgMTRtMCAxQTggOCAwIDEgMCA4IDBhOCA4IDAgMCAwIDAgMTYiLz4KICA8cGF0aCBkPSJNNy4wMDIgMTFhMSAxIDAgMSAxIDIgMCAxIDEgMCAwIDEtMiAwTTcuMSA0Ljk5NWEuOTA1LjkwNSAwIDEgMSAxLjggMGwtLjM1IDMuNTA3YS41NTIuNTUyIDAgMCAxLTEuMSAweiIvPgo8L3N2Zz4=");
}
.icon-denied::before{
    mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktZGFzaC1jaXJjbGUiIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPHBhdGggZD0iTTggMTVBNyA3IDAgMSAxIDggMWE3IDcgMCAwIDEgMCAxNG0wIDFBOCA4IDAgMSAwIDggMGE4IDggMCAwIDAgMCAxNiIvPgogIDxwYXRoIGQ9Ik00IDhhLjUuNSAwIDAgMSAuNS0uNWg3YS41LjUgMCAwIDEgMCAxaC03QS41LjUgMCAwIDEgNCA4Ii8+Cjwvc3ZnPg==");
}


.hidden{
    display: none !important;
}
#error-message{
    color: red;
    text-align: center;
}

textarea{
    resize:vertical;
    width: 95%;
    height: 50px;
    max-height: 200px;
    min-height: 30px;
    font-family: system-ui, sans-serif;
    margin-bottom: 0;
}
.textarea-counter{
    display: block;
    text-align: right;
    font-size: 0.8rem;
    color: #0000009e;
}
.appeal-form-container form{
    width: 100%;
}

.case-list{
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 50vh;
    overflow-y: auto;
}

#card-welcome,
#ban-appeal-card{
    max-width: 760px;
}

.staff-list-toolbar{
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.staff-list-toolbar button{
    width: auto;
    margin: 0;
    padding: 0.6rem 1rem;
}

.staff-list-count{
    color: #000000a8;
    font-size: 0.9rem;
}

.case-item{
    text-align: left;
    margin-bottom: 0;
    background: #f7fafd;
    color: black;
    border: 1px solid #dce5ef;
    transition: transform .15s ease, box-shadow .2s ease;
}

.case-item:hover{
    transform: translateY(-1px);
    box-shadow: 0 6px 14px #0000001a;
}

.case-item-top{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.3rem;
}

.case-item-reason,
.case-item-meta{
    display: block;
    color: #0000009e;
    font-size: 0.9rem;
}

.status-pill{
    font-size: 0.75rem;
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
    font-weight: 600;
}

.status-active{
    background-color: #e4f7e9;
    color: #0f6b2f;
}

.status-inactive{
    background-color: #f3f4f6;
    color: #3f3f46;
}

.staff-case-meta{
    display: flex;
    gap: 0.75rem;
    align-items: center;
    justify-content: center;
    margin-top: -0.3rem;
}

.staff-detail-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.staff-detail-box{
    background: #f7fafd;
    border: 1px solid #dce5ef;
    border-radius: 0.6rem;
    padding: 0.75rem;
}

.staff-detail-box h3{
    margin: 0 0 0.4rem;
    font-size: 0.95rem;
}

.staff-detail-box p{
    margin: 0;
    color: #1f2937;
    white-space: pre-wrap;
}

.staff-action-panel{
    margin-top: 1.25rem;
    border-top: 1px solid #0000001f;
    padding-top: 1rem;
}

.staff-action-panel h2{
    margin-top: 0;
    font-size: 1.2rem;
}

.staff-actions-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
    margin-top: 0.75rem;
}

.staff-actions-grid button{
    margin: 0;
}

.staff-actions-grid .action-comment{
    background-color: #334155;
}

.staff-actions-grid .action-notice{
    background-color: #0369a1;
}

.staff-actions-grid .action-deny{
    background-color: #b91c1c;
}

.staff-actions-grid .action-approve{
    background-color: #15803d;
}

.staff-actions-grid .action-block{
    background-color: #7c2d12;
}

.event-time{
    display: block;
    margin-left: 1.9rem;
    margin-top: 0.15rem;
    font-size: 0.78rem;
    color: #0000007f;
}

.icon-comment::before{
    mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktY2hhdC1sZWZ0LWRvdHMiIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPHBhdGggZD0iTTE0IDFhMSAxIDAgMCAxIDEgMXY4YTEgMSAwIDAgMS0xIDFINC40MTRBMiAyIDAgMCAwIDMgMTEuNTg2bC0yIDJWMmExIDEgMCAwIDEgMS0xek0yIDBhMiAyIDAgMCAwLTIgMnYxMi43OTNhLjUuNSAwIDAgMCAuODU0LjM1M2wyLjg1My0yLjg1M0ExIDEgMCAwIDEgNC40MTQgMTJIMTRhMiAyIDAgMCAwIDItMlYyYTIgMiAwIDAgMC0yLTJ6Ii8+CiAgPHBhdGggZD0iTTUgNmExIDEgMCAxIDEtMiAwIDEgMSAwIDAgMSAyIDBtNCAwYTEgMSAwIDEgMS0yIDAgMSAxIDAgMCAxIDIgMG00IDBhMSAxIDAgMSAxLTIgMCAxIDEgMCAwIDEgMiAwIi8+Cjwvc3ZnPg==")
}

.empty-state{
    text-align: center;
    color: #0000009e;
    margin: 0.5rem 0;
}

#error-message-staff{
    color: red;
    text-align: center;
    margin: 0.2rem 0;
}

@media (max-width: 760px) {
    .card{
        max-width: calc(100vw - 2rem);
        padding: 1.2rem;
    }

    .staff-list-toolbar{
        flex-direction: column;
        align-items: flex-start;
    }

    .staff-detail-grid{
        grid-template-columns: 1fr;
    }

    .staff-actions-grid{
        grid-template-columns: 1fr;
    }
}