@import url('app.css'); /* Ensures all base styles from app.css are applied */

body {
    background-color: var(--light-bg);
    color: var(--light-text);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex-grow: 1;
}

/* Specific styles for the permissions list within the card */
.card ul {
    list-style-type: none;
    padding-left: 0;
    margin-top: 1rem;
    font-size: 0.9rem;
}

.card ul li {
    margin-bottom: 0.5rem;
    color: var(--light-text-secondary);
}

.card ul li::before {
    content: "\f058"; /* Font Awesome check-circle icon */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--light-primary);
    margin-right: 0.5rem;
}

/* Dark Mode overrides */
.dark-mode body {
    background-color: var(--dark-bg);
    color: var(--dark-text);
}

.dark-mode .card {
    background-color: var(--dark-card-bg);
}

.dark-mode .text-primary {
    color: var(--dark-primary) !important;
}

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

.dark-mode .card ul li {
    color: var(--dark-text-secondary);
}

.dark-mode .card ul li::before {
    color: var(--dark-primary);
}