/* FPS Solutions Brand Colors and Styles */

/* ==========================================================================
   FPS Solutions Color Palette
   ========================================================================== */
:root {
    --fps-primary: #396c3a;         /* Primary green - main brand color */
    --fps-secondary: #3d3640;       /* Dark charcoal */
    --fps-success: #2a3f26;         /* Dark green for success states */
    --fps-warning: #c8c0b1;         /* Light tan/beige */
    --fps-info: #cad5d8;            /* Light blue-gray */
    --fps-light: #e9e3d8;           /* Cream */
    --fps-dark: #2a3f26;            /* Dark green */
}

/* ==========================================================================
   Text Colors
   ========================================================================== */
.fps-text-primary { color: var(--fps-primary) !important; }
.fps-text-secondary { color: var(--fps-secondary) !important; }
.fps-text-success { color: var(--fps-success) !important; }
.fps-text-warning { color: var(--fps-warning) !important; }
.fps-text-info { color: var(--fps-info) !important; }
.fps-text-light { color: var(--fps-light) !important; }
.fps-text-dark { color: var(--fps-dark) !important; }
.fps-text-white { color: white !important; }

/* ==========================================================================
   Background Colors
   ========================================================================== */
.fps-bg-primary { background-color: var(--fps-primary) !important; color: white; }
.fps-bg-secondary { background-color: var(--fps-secondary) !important; color: white; }
.fps-bg-success { background-color: var(--fps-success) !important; color: white; }
.fps-bg-warning { background-color: var(--fps-warning) !important; color: var(--fps-secondary); }
.fps-bg-info { background-color: var(--fps-info) !important; color: var(--fps-secondary); }
.fps-bg-light { background-color: var(--fps-light) !important; color: var(--fps-secondary); }
.fps-bg-dark { background-color: var(--fps-dark) !important; color: white; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.fps-btn-primary {
    background-color: var(--fps-primary);
    border-color: var(--fps-primary);
    color: white;
}

.fps-btn-primary:hover, .fps-btn-primary:focus {
    background-color: var(--fps-success);
    border-color: var(--fps-success);
    color: white;
}

.fps-btn-success {
    background-color: var(--fps-success);
    border-color: var(--fps-success);
    color: white;
}

.fps-btn-success:hover, .fps-btn-success:focus {
    background-color: var(--fps-dark);
    border-color: var(--fps-dark);
    color: white;
}

.fps-btn-outline-primary {
    border: 1px solid var(--fps-primary);
    color: var(--fps-primary);
    background-color: transparent;
}

.fps-btn-outline-primary:hover, .fps-btn-outline-primary:focus {
    background-color: var(--fps-primary);
    border-color: var(--fps-primary);
    color: white;
}

.fps-btn-outline-secondary {
    border: 1px solid var(--fps-secondary);
    color: var(--fps-secondary);
    background-color: transparent;
}

.fps-btn-outline-secondary:hover, .fps-btn-outline-secondary:focus {
    background-color: var(--fps-secondary);
    border-color: var(--fps-secondary);
    color: white;
}

.fps-btn-outline-success {
    border: 1px solid var(--fps-success);
    color: var(--fps-success);
    background-color: transparent;
}

.fps-btn-outline-success:hover, .fps-btn-outline-success:focus {
    background-color: var(--fps-success);
    border-color: var(--fps-success);
    color: white;
}

/* ==========================================================================
   Headers and Typography
   ========================================================================== */
.fps-header {
    color: var(--fps-primary);
    border-bottom: 3px solid var(--fps-primary);
    padding-bottom: 12px;
    margin-bottom: 24px;
    font-weight: 600;
}

.fps-subheader {
    color: var(--fps-secondary);
    border-bottom: 1px solid var(--fps-warning);
    padding-bottom: 8px;
    margin-bottom: 16px;
    font-weight: 500;
}

.fps-brand-title {
    color: var(--fps-primary);
    font-weight: 700;
}

.fps-brand-subtitle {
    color: var(--fps-secondary);
    font-weight: 400;
}

/* ==========================================================================
   Cards and Containers
   ========================================================================== */
.fps-card-stats {
    border-left: 4px solid var(--fps-primary);
    background-color: var(--fps-light);
    border: 1px solid var(--fps-warning);
    box-shadow: 0 2px 8px rgba(57, 108, 58, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.fps-card-stats:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(57, 108, 58, 0.15);
}

.fps-card-bordered {
    border: 1px solid var(--fps-primary);
    box-shadow: 0 2px 8px rgba(57, 108, 58, 0.1);
}

.fps-card-header {
    background-color: var(--fps-light);
    border-bottom: 2px solid var(--fps-primary);
}

.fps-card-primary {
    background-color: var(--fps-light);
    border: 1px solid var(--fps-primary);
}

.fps-card-success {
    background-color: var(--fps-light);
    border: 1px solid var(--fps-success);
}

/* ==========================================================================
   Tables
   ========================================================================== */
.fps-table-header {
    background-color: var(--fps-light);
    border-bottom: 2px solid var(--fps-primary);
}

.fps-table-row {
    border-bottom: 1px solid var(--fps-warning);
    transition: background-color 0.2s ease;
}

.fps-table-row:hover {
    background-color: var(--fps-light);
}

/* ==========================================================================
   Spinners and Loading
   ========================================================================== */
.fps-spinner {
    color: var(--fps-primary);
    border-color: var(--fps-primary);
}

.fps-spinner-success {
    color: var(--fps-success);
    border-color: var(--fps-success);
}

/* ==========================================================================
   Navigation and Layout
   ========================================================================== */
.fps-nav-brand {
    color: white !important;
    font-weight: 700;
}

.fps-nav-brand small {
    color: var(--fps-light) !important;
    font-weight: 400;
}

.fps-nav-link {
    color: var(--fps-secondary) !important;
    transition: color 0.2s ease;
}

.fps-nav-link:hover, .fps-nav-link:focus {
    color: var(--fps-primary) !important;
}

.fps-nav-link.active {
    color: var(--fps-primary) !important;
    font-weight: 600;
}

/* Ensure navigation bar is FPS green */
.top-row.navbar.fps-bg-primary {
    background-color: var(--fps-primary) !important;
}

/* Override Bootstrap navbar-dark styles */
.navbar-dark.fps-bg-primary {
    background-color: var(--fps-primary) !important;
}

.navbar-dark .navbar-brand,
.navbar-dark .navbar-brand:hover,
.navbar-dark .navbar-brand:focus {
    color: white !important;
}

.navbar-dark .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.3) !important;
}

.navbar-dark .navbar-toggler-icon {
    background-color: white !important;
}

/* Force navigation bar background color */
.navbar.fps-bg-primary,
.top-row.fps-bg-primary {
    background-color: #396c3a !important;
}

/* ==========================================================================
   Alerts and Messages
   ========================================================================== */
.fps-alert-primary {
    background-color: rgba(57, 108, 58, 0.1);
    border-color: var(--fps-primary);
    color: var(--fps-primary);
}

.fps-alert-success {
    background-color: rgba(42, 63, 38, 0.1);
    border-color: var(--fps-success);
    color: var(--fps-success);
}

.fps-alert-warning {
    background-color: rgba(200, 192, 177, 0.3);
    border-color: var(--fps-warning);
    color: var(--fps-secondary);
}

.fps-alert-info {
    background-color: rgba(202, 213, 216, 0.3);
    border-color: var(--fps-info);
    color: var(--fps-secondary);
}

/* ==========================================================================
   Status Badges
   ========================================================================== */
.fps-badge-primary {
    background-color: var(--fps-primary);
    color: white;
}

.fps-badge-secondary {
    background-color: var(--fps-secondary);
    color: white;
}

.fps-badge-success {
    background-color: var(--fps-success);
    color: white;
}

.fps-badge-warning {
    background-color: var(--fps-warning);
    color: var(--fps-secondary);
}

.fps-badge-info {
    background-color: var(--fps-info);
    color: var(--fps-secondary);
}

/* ==========================================================================
   Forms and Input Elements
   ========================================================================== */
.fps-form-control:focus {
    border-color: var(--fps-primary);
    box-shadow: 0 0 0 0.2rem rgba(57, 108, 58, 0.25);
}

.fps-form-label {
    color: var(--fps-secondary);
    font-weight: 500;
}

.fps-form-check-input:checked {
    background-color: var(--fps-primary);
    border-color: var(--fps-primary);
}

/* ==========================================================================
   Utilities and Helpers
   ========================================================================== */
.fps-border-primary { border-color: var(--fps-primary) !important; }
.fps-border-secondary { border-color: var(--fps-secondary) !important; }
.fps-border-success { border-color: var(--fps-success) !important; }
.fps-border-warning { border-color: var(--fps-warning) !important; }
.fps-border-info { border-color: var(--fps-info) !important; }
.fps-border-light { border-color: var(--fps-light) !important; }

.fps-shadow-primary {
    box-shadow: 0 4px 12px rgba(57, 108, 58, 0.15);
}

.fps-shadow-success {
    box-shadow: 0 4px 12px rgba(42, 63, 38, 0.15);
}

.fps-solid-primary {
    background-color: var(--fps-primary);
    color: white;
}

.fps-solid-success {
    background-color: var(--fps-success);
    color: white;
}

.fps-solid-light {
    background-color: var(--fps-light);
    color: var(--fps-secondary);
}

/* ==========================================================================
   Responsive Design Enhancements
   ========================================================================== */
@media (max-width: 768px) {
    .fps-header {
        font-size: 1.5rem;
        margin-bottom: 16px;
    }
    
    .fps-card-stats {
        margin-bottom: 1rem;
    }
}

/* ==========================================================================
   Dark Mode Support (Optional)
   ========================================================================== */
@media (prefers-color-scheme: dark) {
    .fps-card-stats {
        background-color: var(--fps-secondary);
    }
    
    .fps-card-header {
        background-color: var(--fps-secondary);
    }
}