:root {
    --primary-color: #4e73df;
    --secondary-color: #858796;
    --success-color: #1cc88a;
    --info-color: #36b9cc;
    --warning-color: #f6c23e;
    --danger-color: #e74a3b;
    --dark-bg: #f8f9fc;
}

body {
    background-color: var(--dark-bg);
    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #5a5c69;
}

.card {
    border: none;
    border-radius: 10px;
    box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
}

.card-header {
    background-color: #fff;
    border-bottom: 1px solid #e3e6f0;
    font-weight: bold;
    color: var(--primary-color);
}

.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    padding: 0.5rem 1.5rem;
    border-radius: 5px;
}

.navbar {
    box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
    background: linear-gradient(90deg, #4e73df 0%, #224abe 100%);
}

.stats-card {
    transition: transform 0.2s;
    border-left: 0.25rem solid transparent;
}

.stats-card:hover {
    transform: translateY(-5px);
}

.border-left-primary { border-left-color: var(--primary-color) !important; }
.border-left-success { border-left-color: var(--success-color) !important; }
.border-left-info { border-left-color: var(--info-color) !important; }
.border-left-warning { border-left-color: var(--warning-color) !important; }
.border-left-danger { border-left-color: var(--danger-color) !important; }

.text-xs { font-size: .7rem; font-weight: 700; text-transform: uppercase; }

@media (max-width: 768px) {
    .navbar-brand { font-size: 1.2rem; }
    .nav-link { font-size: 0.9rem; }
    .btn-sm { font-size: 0.75rem; padding: 0.25rem 0.5rem; }
    .table { font-size: 0.85rem; }
    .form-control, .form-select { font-size: 1rem; }
}

/* Toast Notifications */
.toast-container {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 10000;
    width: calc(100% - 40px);
    max-width: 400px;
    pointer-events: none;
}

.toast-notification {
    display: flex;
    align-items: center;
    padding: 1rem;
    margin-bottom: 10px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    animation: slideInRight 0.3s ease-out;
    word-wrap: break-word;
    background-color: #fff;
    border-left: 4px solid;
    gap: 12px;
    pointer-events: auto;
}

.toast-notification.success {
    border-left-color: var(--success-color);
    background-color: #d4edda;
    color: #155724;
}

.toast-notification.error,
.toast-notification.danger {
    border-left-color: var(--danger-color);
    background-color: #f8d7da;
    color: #721c24;
}

.toast-notification.warning {
    border-left-color: var(--warning-color);
    background-color: #fff3cd;
    color: #856404;
}

.toast-notification.info {
    border-left-color: var(--info-color);
    background-color: #d1ecf1;
    color: #0c5460;
}

.toast-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toast-content {
    flex: 1;
    font-size: 0.95rem;
    font-weight: 500;
}

.toast-close {
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    font-size: 1.2rem;
    padding: 0;
    flex-shrink: 0;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.toast-close:hover {
    opacity: 1;
}

@keyframes slideInRight {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(400px);
        opacity: 0;
    }
}

.toast-notification.removing {
    animation: slideOutRight 0.3s ease-out forwards;
}

@media (max-width: 768px) {
    .toast-container {
        top: 70px;
        left: 10px;
        right: 10px;
        max-width: none;
        width: calc(100% - 20px);
    }
    
    .toast-notification {
        padding: 0.85rem;
        font-size: 0.9rem;
    }
}

@media (max-width: 576px) {
    .container { padding-left: 10px; padding-right: 10px; }
    .container-fluid { padding-left: 0.75rem; padding-right: 0.75rem; }
    .card-body { padding: 1rem; }
    .card-header { padding: 0.75rem 1rem; }
    h2, h3 { font-size: 1.3rem; }
    h4, h5, h6 { font-size: 1rem; }
    .table-responsive { border: 0; overflow-x: auto; }
    .table th, .table td { padding: 0.5rem 0.25rem; }
    .btn { font-size: 0.85rem; padding: 0.4rem 0.6rem; }
    .btn-lg { font-size: 0.9rem; padding: 0.5rem 1rem; }
    .col-md-6, .col-lg-4, .col-lg-6, .col-lg-8 { margin-bottom: 1rem; }
    .navbar-toggler { padding: 0.25rem 0.5rem; }
    .navbar-brand { padding: 0.25rem 0; }
    .flex-wrap { flex-wrap: wrap !important; }

    .toast-container {
        top: 60px;
        left: 8px;
        right: 8px;
        max-width: none;
        width: calc(100% - 16px);
    }
    
    .toast-notification {
        padding: 0.75rem;
        font-size: 0.85rem;
    }
}