/* Base Settings - Simplified to prevent scroll locking */
body {
    overflow-x: hidden; /* Prevent horizontal scroll only */
    background-color: #f5fbff;
}

.font-sans { font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif; }
.font-serif { font-family: 'Merriweather', serif; }

/* Custom Component Classes */
.mock-button { transition: all 0.2s; cursor: pointer; }
.btn-sm { padding: 6px 12px; font-size: 0.875rem; border-radius: 6px; }

.mock-input { 
    border: 1px solid #e2e8f0; 
    padding: 0.6rem 1rem; 
    border-radius: 0.5rem; 
    outline: none; 
    transition: all 0.2s; 
    width: 100%; 
    font-size: 0.9rem; 
}
.mock-input:focus { border-color: #4f46e5; box-shadow: 0 0 0 1px #4f46e5; }

.mock-select { 
    background-color: white; 
    border: 1px solid #e2e8f0; 
    padding: 0.6rem 2rem 0.6rem 1rem; 
    border-radius: 0.5rem; 
    outline: none; 
    appearance: none; 
    width: 100%; 
    font-size: 0.9rem; 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 10.99l3.71-3.76a.75.75 0 111.06 1.06l-4.25 4.3a.75.75 0 01-1.06 0l-4.25-4.3a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E"); 
    background-repeat: no-repeat; 
    background-position: right 0.75rem center; 
    background-size: 1.2em 1.2em; 
}

.btn-gradient { 
    background: linear-gradient(to right, #0b254f, #1d4ed8); 
    color: white; 
    transition: transform 0.2s; 
}
.btn-gradient:hover { transform: translateY(-2px); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }

/* Animation Utils */
.animate-fade-in-up { animation: fadeInUp 0.3s ease-out forwards; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Toast Notification Styles */
#toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toast {
    display: flex;
    align-items: center;
    min-width: 300px;
    padding: 16px;
    border-radius: 8px;
    background: white;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    border-left: 4px solid #333;
}

.toast.show { transform: translateX(0); }
.toast.success { border-left-color: #10b981; }
.toast.error { border-left-color: #ef4444; }

.toast-icon { margin-right: 12px; font-size: 1.2rem; }
.toast-message { font-size: 0.9rem; font-weight: 500; color: #1e293b; }
.animate-spin { animation: spin 1s linear infinite; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Utility: Responsive Table Wrapper */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1rem;
}

/* Scrollbar styling for desktop inside overflow divs */
.custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: #f1f5f9; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Responsive Adjustments */
@media (max-width: 768px) {
    .container-mobile { padding-left: 1rem; padding-right: 1rem; }
    h1 { font-size: 1.75rem !important; line-height: 1.2; }
    h2 { font-size: 1.5rem !important; }
    .text-lg { font-size: 1rem !important; }
}

/* Hide Scrollbar but allow scroll */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}