// Custom application styles
// This file contains styles specific to the Seraph3 application

// Global variables
$primary-color: #007bff;
$secondary-color: #6c757d;
$success-color: #28a745;
$warning-color: #ffc107;
$danger-color: #dc3545;

// Custom utility classes
.text-primary-custom {
    color: $primary-color !important;
}

.bg-primary-custom {
    background-color: $primary-color !important;
}

// Responsive utilities
@media (max-width: 768px) {
    .mobile-hidden {
        display: none !important;
    }
}

@media (min-width: 769px) {
    .desktop-hidden {
        display: none !important;
    }
}

// Form styles
.form-control:focus {
    border-color: $primary-color;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

// Button styles
.btn-primary {
    background-color: $primary-color;
    border-color: $primary-color;

    &:hover {
        background-color: darken($primary-color, 10%);
        border-color: darken($primary-color, 10%);
    }
}

// Table styles
.table {
    th {
        background-color: #f8f9fa;
        border-top: none;
    }
}

// Card styles
.card {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    border: 1px solid rgba(0, 0, 0, 0.125);
}

// Navigation styles
.navbar {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

// Sidebar styles
.sidebar {
    background-color: #f8f9fa;
    border-right: 1px solid #dee2e6;
}

// Dashboard styles
.dashboard-widget {
    background: white;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    margin-bottom: 1rem;
}

// Status indicators
.status-active {
    color: $success-color;
}

.status-inactive {
    color: $secondary-color;
}

.status-warning {
    color: $warning-color;
}

.status-danger {
    color: $danger-color;
}

// Loading states
.loading {
    opacity: 0.6;
    pointer-events: none;
}

.spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}