/* ==========================================================================

   SISTEM CSS GLOBAL & THEME DASHBOARD (Kontras, Elegan & Modern)

   Mendukung semua role: Waka, Guru, Kesiswaan, Siswa

   ========================================================================== */



:root {

    /* Backgrounds */

    --bg-body: #f8fafc;

    --bg-surface: #ffffff;

    --bg-surface-hover: #f1f5f9;

    --bg-subtle: #e2e8f0;



    /* Teks */

    --text-primary: #0f172a;

    --text-secondary: #475569;

    --text-muted: #94a3b8;



    /* Warna Aksen */

    --accent: #4f46e5;

    --accent-hover: #4338ca;

    --accent-light: #eef2ff;



    /* Status & Alerts */

    --success: #10b981;

    --success-bg: #ecfdf5;

    --success-text: #065f46;

    --warning: #f59e0b;

    --warning-bg: #fffbeb;

    --warning-text: #92400e;

    --danger: #ef4444;

    --danger-bg: #fef2f2;

    --danger-text: #991b1b;

    --info: #0284c7;

    --info-bg: #f0f9ff;

    --info-text: #075985;



    /* Border & Shadow */

    --border-color: #e2e8f0;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);

    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);

    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.03);



    /* Dimensi */

    --sidebar-width: 260px;

    --header-height: 64px;

    --radius-sm: 6px;

    --radius-md: 10px;

    --radius-lg: 14px;

    --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

}



/* ==========================================================================

   RESET & BASE STYLING

   ========================================================================== */

*,

*::before,

*::after {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}



body {

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    font-size: 0.9375rem;

    line-height: 1.5;

    color: var(--text-primary);

    background-color: var(--bg-body);

    -webkit-font-smoothing: antialiased;

}



a {

    color: var(--accent);

    text-decoration: none;

    transition: var(--transition);

}



a:hover {

    color: var(--accent-hover);

}



ul {

    list-style: none;

}



/* ==========================================================================

   LAYOUT STRUCTURE (Sidebar & Navbar)

   ========================================================================== */

.app-container {

    display: flex;

    min-height: 100vh;

    width: 100%;

}



.main-wrapper {

    flex: 1;

    display: flex;

    flex-direction: column;

    margin-left: var(--sidebar-width);

    min-width: 0;

}



/* ==========================================================================

   SIDEBAR

   ========================================================================== */

.sidebar {

    position: fixed;

    top: 0;

    left: 0;

    width: var(--sidebar-width);

    height: 100vh;

    background-color: var(--bg-surface);

    border-right: 1px solid var(--border-color);

    display: flex;

    flex-direction: column;

    z-index: 100;

    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.02);

}



.sidebar-header {

    height: var(--header-height);

    display: flex;

    align-items: center;

    padding: 0 1.5rem;

    border-bottom: 1px solid var(--border-color);

    gap: 0.75rem;

}



.brand-logo {

    width: 34px;

    height: 34px;

    background: linear-gradient(135deg, var(--accent) 0%, #06b6d4 100%);

    color: #fff;

    font-weight: 700;

    font-size: 1.1rem;

    border-radius: var(--radius-sm);

    display: flex;

    align-items: center;

    justify-content: center;

    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3);

}



.brand-title {

    font-size: 1.05rem;

    font-weight: 700;

    color: var(--text-primary);

    letter-spacing: -0.01em;

}



.sidebar-content {

    flex: 1;

    overflow-y: auto;

    padding: 1.25rem 0.85rem;

}



.nav-category {

    font-size: 0.7rem;

    font-weight: 700;

    text-transform: uppercase;

    color: var(--text-muted);

    letter-spacing: 0.06em;

    padding: 0.85rem 0.75rem 0.35rem 0.75rem;

}



.nav-menu {

    display: flex;

    flex-direction: column;

    gap: 0.25rem;

}



.nav-item a {

    display: flex;

    align-items: center;

    gap: 0.85rem;

    padding: 0.65rem 0.85rem;

    color: var(--text-secondary);

    border-radius: var(--radius-sm);

    font-weight: 500;

    font-size: 0.9rem;

    transition: var(--transition);

}



.nav-item a:hover {

    color: var(--text-primary);

    background-color: var(--bg-surface-hover);

}



.nav-item.active a {

    color: var(--accent);

    background-color: var(--accent-light);

    font-weight: 600;

}



.nav-icon {

    width: 18px;

    height: 18px;

    flex-shrink: 0;

    opacity: 0.85;

}



.sidebar-footer {

    padding: 1rem 1.25rem;

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

    background-color: var(--bg-surface);

}



/* ==========================================================================

   SIDEBAR KHUSUS WAKA (Proporsional, Pas di Layar & Bebas Scroll)

   ========================================================================== */

.sidebar-waka {

    overflow: hidden !important;

}



.sidebar-waka .sidebar-header {

    height: 56px;

    padding: 0 1.25rem;

}



.sidebar-waka .brand-logo {

    width: 32px;

    height: 32px;

    font-size: 1.05rem;

}



.sidebar-waka .sidebar-content {

    overflow-y: auto !important; /* Dapat di-scroll */
    min-height: 0 !important;

    scrollbar-width: thin;

    scrollbar-color: rgba(148, 163, 184, 0.4) transparent;

    padding: 0.5rem 0.75rem !important;

    display: flex !important;

    flex-direction: column !important;

}



.sidebar-waka .sidebar-content::-webkit-scrollbar {

    width: 5px;

    display: block !important;

}



.sidebar-waka .sidebar-content::-webkit-scrollbar-track {

    background: transparent;

}



.sidebar-waka .sidebar-content::-webkit-scrollbar-thumb {

    background: rgba(148, 163, 184, 0.4);

    border-radius: 4px;

}



.sidebar-waka .sidebar-content::-webkit-scrollbar-thumb:hover {

    background: rgba(148, 163, 184, 0.7);

}



.sidebar-waka .nav-category {

    font-size: 0.68rem !important;

    font-weight: 700 !important;

    padding: 0.4rem 0.75rem 0.15rem 0.75rem !important;

    margin-top: 0.25rem !important;

    letter-spacing: 0.05em !important;

}



.sidebar-waka .nav-category:first-child {

    margin-top: 0 !important;

    padding-top: 0.15rem !important;

}



.sidebar-waka .nav-menu {

    gap: 2px !important;

}



.sidebar-waka .nav-item a {

    padding: 0.42rem 0.75rem !important;

    font-size: 0.865rem !important;

    gap: 0.75rem !important;

    border-radius: 6px !important;

    line-height: 1.3 !important;

}



.sidebar-waka .nav-icon {

    width: 17px !important;

    height: 17px !important;

    flex-shrink: 0 !important;

}



.sidebar-waka .sidebar-footer {

    padding: 0.65rem 1rem !important;

}



.sidebar-waka .sidebar-footer .btn {

    padding: 0.45rem 0.85rem !important;

    font-size: 0.85rem !important;

}



/* ==========================================================================

   TOP NAVBAR

   ========================================================================== */

.top-navbar {

    height: var(--header-height);

    background-color: var(--bg-surface);

    border-bottom: 1px solid var(--border-color);

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 1.75rem;

    position: sticky;

    top: 0;

    z-index: 90;

    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);

}



.navbar-left,

.navbar-right {

    display: flex;

    align-items: center;

    gap: 1rem;

}



.search-box {

    position: relative;

    width: 260px;

}



.search-box input {

    width: 100%;

    padding: 0.45rem 0.75rem 0.45rem 2.2rem;

    border-radius: var(--radius-sm);

    border: 1px solid var(--border-color);

    background-color: var(--bg-body);

    color: var(--text-primary);

    outline: none;

    transition: var(--transition);

    font-size: 0.875rem;

}



.search-box input:focus {

    border-color: var(--accent);

    background-color: #fff;

    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);

}



.search-box svg {

    position: absolute;

    left: 0.75rem;

    top: 50%;

    transform: translateY(-50%);

    width: 14px;

    height: 14px;

    fill: var(--text-muted);

}



.user-profile {

    display: flex;

    align-items: center;

    gap: 0.65rem;

    padding: 0.35rem 0.65rem;

    border-radius: var(--radius-sm);

    border: 1px solid var(--border-color);

    background-color: #fff;

    transition: var(--transition);

}



.user-avatar {

    width: 32px;

    height: 32px;

    border-radius: 50%;

    background: linear-gradient(135deg, var(--accent) 0%, #06b6d4 100%);

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: 700;

    color: #fff;

    font-size: 0.8rem;

}



.user-info {

    display: flex;

    flex-direction: column;

    line-height: 1.15;

}



.user-name {

    font-size: 0.85rem;

    font-weight: 600;

    color: var(--text-primary);

}



.user-role-badge {

    font-size: 0.7rem;

    color: var(--accent);

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.04em;

}



/* ==========================================================================

   CONTENT BODY & HEADERS

   ========================================================================== */

.content-body {

    padding: 1.75rem;

    flex: 1;

}



.page-header {

    margin-bottom: 1.5rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

    flex-wrap: wrap;

    gap: 1rem;

}



.page-title {

    font-size: 1.35rem;

    font-weight: 700;

    color: var(--text-primary);

    letter-spacing: -0.01em;

}



.page-subtitle {

    font-size: 0.875rem;

    color: var(--text-secondary);

    margin-top: 0.2rem;

}



/* ==========================================================================

   CARDS & GRIDS

   ========================================================================== */

.card {

    background-color: var(--bg-surface);

    border: 1px solid var(--border-color);

    border-radius: var(--radius-md);

    box-shadow: var(--shadow-sm);

    padding: 1.5rem;

    margin-bottom: 1.5rem;

}



.card-title {

    font-size: 1.05rem;

    font-weight: 600;

    color: var(--text-primary);

    margin-bottom: 0.85rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

}



.grid-2 {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 1.25rem;

}



.grid-3 {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 1.25rem;

}



.grid-4 {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 1.25rem;

}



@media (max-width: 992px) {



    .grid-2,

    .grid-3,

    .grid-4 {

        grid-template-columns: 1fr;

    }

}



.stat-card {

    background: #fff;

    border: 1px solid var(--border-color);

    border-radius: var(--radius-md);

    padding: 1.25rem;

    box-shadow: var(--shadow-sm);

    display: flex;

    align-items: center;

    gap: 1rem;

}



.stat-icon {

    width: 44px;

    height: 44px;

    border-radius: var(--radius-sm);

    background-color: var(--accent-light);

    color: var(--accent);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.25rem;

}



.stat-value {

    font-size: 1.5rem;

    font-weight: 700;

    color: var(--text-primary);

    line-height: 1.1;

}



.stat-label {

    font-size: 0.8rem;

    color: var(--text-secondary);

    font-weight: 500;

}



/* ==========================================================================

   TABLES (Otomatis Rapih Untuk Semua Tabel)

   ========================================================================== */

.table-container {

    width: 100%;

    overflow-x: auto;

    border-radius: var(--radius-sm);

    border: 1px solid var(--border-color);

    margin-top: 1rem;

    margin-bottom: 1rem;

}



table {

    width: 100%;

    border-collapse: collapse;

    text-align: left;

    font-size: 0.875rem;

    background-color: #fff;

}



table[border] {

    border: none;

}



th {

    background-color: #f8fafc;

    color: var(--text-secondary);

    font-weight: 600;

    font-size: 0.775rem;

    text-transform: uppercase;

    letter-spacing: 0.04em;

    padding: 0.75rem 1rem;

    border-bottom: 1px solid var(--border-color);

    white-space: nowrap;

}



td {

    padding: 0.85rem 1rem;

    border-bottom: 1px solid var(--border-color);

    color: var(--text-primary);

    vertical-align: middle;

}



tr:last-child td {

    border-bottom: none;

}



tr:hover td {

    background-color: #f8fafc;

}



/* ==========================================================================

   BUTTONS (Universal)

   ========================================================================== */

.btn,

button,

input[type="submit"] {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 0.5rem 1rem;

    border-radius: var(--radius-sm);

    font-weight: 500;

    font-size: 0.875rem;

    cursor: pointer;

    border: 1px solid transparent;

    transition: var(--transition);

    gap: 0.4rem;

    line-height: 1.25;

    text-decoration: none;

}



.btn-primary,

button[type="submit"]:not(.btn-danger):not(.btn-secondary) {

    background-color: var(--accent);

    color: #ffffff;

}



.btn-primary:hover,

button[type="submit"]:not(.btn-danger):not(.btn-secondary):hover {

    background-color: var(--accent-hover);

    color: #ffffff;

}



.btn-secondary {

    background-color: #ffffff;

    border-color: var(--border-color);

    color: var(--text-primary);

}



.btn-secondary:hover {

    background-color: var(--bg-surface-hover);

}



.btn-danger {

    background-color: var(--danger);

    color: #ffffff;

}



.btn-danger:hover {

    background-color: #dc2626;

    color: #ffffff;

}



.btn-warning {

    background-color: var(--warning);

    color: #ffffff;

}



.btn-warning:hover {

    background-color: #d97706;

}



.btn-sm {

    padding: 0.35rem 0.65rem;

    font-size: 0.8rem;

}



.btn-back {

    display: inline-flex;

    align-items: center;

    padding: 0.45rem 0.85rem;

    border-radius: var(--radius-sm);

    background-color: #ffffff;

    border: 1px solid var(--border-color);

    color: var(--text-secondary);

    font-weight: 500;

    font-size: 0.85rem;

}



.btn-back:hover {

    background-color: var(--bg-surface-hover);

    color: var(--text-primary);

}



/* ==========================================================================

   FORMS & INPUTS (Universal)

   ========================================================================== */

.form-group {

    margin-bottom: 1.25rem;

}



label {

    display: block;

    font-size: 0.85rem;

    font-weight: 600;

    color: var(--text-primary);

    margin-bottom: 0.4rem;

}



input[type="text"],

input[type="email"],

input[type="password"],

input[type="number"],

input[type="date"],

input[type="time"],

input[type="file"],

select,

textarea {

    width: 100%;

    padding: 0.6rem 0.85rem;

    border-radius: var(--radius-sm);

    border: 1px solid var(--border-color);

    background-color: #ffffff;

    color: var(--text-primary);

    font-size: 0.875rem;

    outline: none;

    transition: var(--transition);

}



input:focus,

select:focus,

textarea:focus {

    border-color: var(--accent);

    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);

}



textarea {

    min-height: 100px;

    resize: vertical;

}



/* ==========================================================================

   BADGES & ALERTS

   ========================================================================== */

.badge {

    display: inline-block;

    padding: 0.25rem 0.6rem;

    border-radius: 9999px;

    font-size: 0.75rem;

    font-weight: 600;

    line-height: 1;

}



.badge-success {

    background-color: var(--success-bg);

    color: var(--success);

}



.badge-warning {

    background-color: var(--warning-bg);

    color: var(--warning);

}



.badge-danger {

    background-color: var(--danger-bg);

    color: var(--danger);

}



.badge-info {

    background-color: var(--info-bg);

    color: var(--info);

}



.alert {

    padding: 0.85rem 1.15rem;

    border-radius: var(--radius-sm);

    margin-bottom: 1.25rem;

    font-size: 0.875rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

}



.alert-success {

    background-color: var(--success-bg);

    color: var(--success-text);

    border: 1px solid #a7f3d0;

}



.alert-danger {

    background-color: var(--danger-bg);

    color: var(--danger-text);

    border: 1px solid #fecaca;

}



.alert-warning {

    background-color: var(--warning-bg);

    color: var(--warning-text);

    border: 1px solid #fde68a;

}



.alert-item {

    background-color: #fff;

    border: 1px solid var(--border-color);

    border-left: 4px solid var(--warning);

    border-radius: var(--radius-sm);

    padding: 1rem;

    margin-bottom: 0.75rem;

}



/* ==========================================================================

   LOGIN PAGE STYLING

   ========================================================================== */

.login-body {

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);

    padding: 1.5rem;

}



.login-card {

    width: 100%;

    max-width: 420px;

    background: #ffffff;

    border-radius: var(--radius-lg);

    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.25), 0 8px 10px -6px rgba(0, 0, 0, 0.2);

    padding: 2.25rem;

}



.login-header {

    text-align: center;

    margin-bottom: 2rem;

}



.login-header h1 {

    font-size: 1.5rem;

    font-weight: 700;

    color: var(--text-primary);

    margin-top: 0.75rem;

    letter-spacing: -0.02em;

}



.login-header p {

    color: var(--text-secondary);

    font-size: 0.875rem;

    margin-top: 0.35rem;

}



/* ==========================================================================

   RESPONSIVE DESIGN

   ========================================================================== */

@media (max-width: 992px) {

    .sidebar {

        transform: translateX(-100%);

        transition: transform 0.25s ease;

    }



    .sidebar.open {

        transform: translateX(0);

    }



    .main-wrapper {

        margin-left: 0;

    }



    #mobileToggle {

        display: inline-flex !important;

    }



    .search-box {

        display: none;

    }

}



/* ==========================================================================

   MODAL DIALOG SYSTEM (In-Page Popups Tanpa Berpindah Halaman)

   ========================================================================== */

.modal-overlay {

    position: fixed;

    top: 0;

    left: 0;

    width: 100vw;

    height: 100vh;

    background-color: rgba(15, 23, 42, 0.65);

    backdrop-filter: blur(4px);

    -webkit-backdrop-filter: blur(4px);

    z-index: 1000;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 1rem;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.25s ease;

}



.modal-overlay.active {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

}



.modal-card {

    background: #ffffff;

    width: 100%;

    max-width: 620px;

    border-radius: var(--radius-lg);

    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25), 0 0 0 1px rgba(15, 23, 42, 0.05);

    display: flex;

    flex-direction: column;

    max-height: 90vh;

    overflow: hidden;

    transform: scale(0.95) translateY(10px);

    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);

}



.modal-card.modal-lg {

    max-width: 760px;

}



.modal-card.modal-sm {

    max-width: 440px;

}



.modal-card>form {

    display: flex;

    flex-direction: column;

    flex: 1;

    min-height: 0;

    overflow: hidden;

}



.modal-overlay.active .modal-card {

    transform: scale(1) translateY(0);

}



.modal-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 1.25rem 1.5rem;

    border-bottom: 1px solid var(--border-color);

    background-color: var(--bg-surface);

    flex-shrink: 0;

}



.modal-header-info {

    display: flex;

    align-items: center;

    gap: 0.85rem;

}



.modal-header-icon {

    width: 40px;

    height: 40px;

    border-radius: var(--radius-md);

    background-color: var(--accent-light);

    color: var(--accent);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.25rem;

}



.modal-title {

    font-size: 1.15rem;

    font-weight: 700;

    color: var(--text-primary);

    line-height: 1.2;

    margin: 0;

}



.modal-subtitle {

    font-size: 0.8rem;

    color: var(--text-secondary);

    margin-top: 0.2rem;

}



.modal-close-btn {

    background: transparent;

    border: none;

    color: var(--text-muted);

    cursor: pointer;

    padding: 0.4rem;

    border-radius: var(--radius-sm);

    display: flex;

    align-items: center;

    justify-content: center;

    transition: var(--transition);

}



.modal-close-btn:hover {

    color: var(--text-primary);

    background-color: var(--bg-surface-hover);

}



.modal-body {

    padding: 1.5rem;

    overflow-y: auto;

    flex: 1;

    min-height: 0;

}



.modal-footer {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 0.75rem;

    padding: 1rem 1.5rem;

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

    background-color: #f8fafc;

    flex-shrink: 0;

}



/* ==========================================================================

   FLOATING TOAST NOTIFICATION SYSTEM ("Seperti Notifikasi")

   ========================================================================== */

.toast-container {

    position: fixed;

    top: 1.25rem;

    right: 1.25rem;

    z-index: 99999;

    display: flex;

    flex-direction: column;

    gap: 0.75rem;

    max-width: 420px;

    width: calc(100% - 2.5rem);

    pointer-events: none;

}



.toast {

    pointer-events: auto;

    background: #ffffff;

    border-radius: var(--radius-md);

    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.15), 0 4px 6px -2px rgba(15, 23, 42, 0.05);

    border: 1px solid var(--border-color);

    padding: 1rem 1.25rem;

    display: flex;

    align-items: flex-start;

    gap: 0.85rem;

    position: relative;

    overflow: hidden;

    animation: toastSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;

    transition: all 0.3s ease;

}



.toast.toast-closing {

    opacity: 0;

    transform: translateX(120%);

}



@keyframes toastSlideIn {

    from {

        opacity: 0;

        transform: translateX(100%) scale(0.95);

    }



    to {

        opacity: 1;

        transform: translateX(0) scale(1);

    }

}



.toast-icon {

    width: 28px;

    height: 28px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    font-size: 0.9rem;

    font-weight: 700;

}



.toast-content {

    flex: 1;

    min-width: 0;

}



.toast-title {

    font-size: 0.875rem;

    font-weight: 700;

    color: var(--text-primary);

    line-height: 1.2;

    margin-bottom: 0.2rem;

}



.toast-message {

    font-size: 0.825rem;

    color: var(--text-secondary);

    line-height: 1.35;

    word-break: break-word;

}



.toast-close {

    background: transparent;

    border: none;

    color: var(--text-muted);

    cursor: pointer;

    padding: 0.2rem;

    border-radius: var(--radius-sm);

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

}



.toast-close:hover {

    color: var(--text-primary);

    background-color: var(--bg-surface-hover);

}



.toast-progress {

    position: absolute;

    bottom: 0;

    left: 0;

    height: 3px;

    width: 100%;

    animation: toastProgress 4s linear forwards;

}



@keyframes toastProgress {

    from {

        width: 100%;

    }



    to {

        width: 0%;

    }

}



/* Toast Color Variants */

.toast-success {

    border-left: 4px solid var(--success);

}



.toast-success .toast-icon {

    background-color: var(--success-bg);

    color: var(--success);

}



.toast-success .toast-progress {

    background-color: var(--success);

}



.toast-danger {

    border-left: 4px solid var(--danger);

}



.toast-danger .toast-icon {

    background-color: var(--danger-bg);

    color: var(--danger);

}



.toast-danger .toast-progress {

    background-color: var(--danger);

}



.toast-warning {

    border-left: 4px solid var(--warning);

}



.toast-warning .toast-icon {

    background-color: var(--warning-bg);

    color: var(--warning);

}



.toast-warning .toast-progress {

    background-color: var(--warning);

}



.toast-info {

    border-left: 4px solid var(--info);

}



.toast-info .toast-icon {

    background-color: var(--info-bg);

    color: var(--info);

}



.toast-info .toast-progress {

    background-color: var(--info);

}


/* Pagination Buttons (Seragam dengan Data Siswa) */
.btn-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 0.5rem;
    font-size: 0.825rem;
    font-weight: 500;
    color: var(--text-primary, #1e293b);
    background: #ffffff;
    border: 1px solid var(--border-color, #cbd5e1);
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.15s ease;
}
.btn-page:hover:not(.disabled):not(.active) {
    background-color: #f1f5f9;
    border-color: #94a3b8;
}
.btn-page.active {
    background-color: var(--accent, #4f46e5);
    color: #ffffff;
    border-color: var(--accent, #4f46e5);
    font-weight: 700;
}
.btn-page.disabled {
    color: #94a3b8;
    background-color: #f8fafc;
    border-color: #e2e8f0;
    cursor: not-allowed;
    opacity: 0.6;
}