/* =============================================================================
   FinCare Design System - Comprehensive CSS Stylesheet

   Primary Color: #d00000 (Red)
   Secondary Color: #005aad (Blue)
   Header Font: Montserrat
   Body Font: Open Sans (Regular & Italic)

   Uses --color-* variables from variables.css for consistency
   ============================================================================= */

/* =============================================================================
   OVERRIDE ABLE PRO THEME - PRIMARY COLOR TO RED
   ============================================================================= */

:root {
    /* ===== Override Able Pro Theme Primary Colors ===== */
    --primary-50: rgb(254 242 242);
    --primary-100: rgb(254 226 226);
    --primary-200: rgb(254 202 202);
    --primary-300: rgb(252 165 165);
    --primary-400: rgb(248 113 113);
    --primary-500: rgb(208, 0, 0);
    --primary-600: rgb(176, 0, 0);
    --primary-700: rgb(153, 0, 0);
    --primary-800: rgb(127, 0, 0);
    --primary-900: rgb(102, 0, 0);
    --primary-950: rgb(69 10 10);
    --primary: rgb(208, 0, 0);
}

/* Sidebar Menu Text - Black for all items */
.pc-sidebar .pc-navbar .pc-link {
    color: #333333 !important;
}

/* Sidebar Active State - Red highlight */
.pc-sidebar .pc-navbar > .pc-item.active > .pc-link {
    color: var(--color-primary) !important;
}
.pc-sidebar .pc-navbar > .pc-item.active > .pc-link::after {
    background: var(--color-primary) !important;
}

/* Override bg-primary-500 classes */
.bg-primary-500,
.\!bg-primary-500 {
    background-color: var(--color-primary) !important;
}

.bg-primary-500\/10 {
    background-color: var(--color-primary-light) !important;
}

/* Override text-primary-500 classes */
.text-primary-500,
.\!text-primary-500 {
    color: var(--color-primary) !important;
}

/* Override border-primary-500 classes */
.border-primary-500,
.\!border-primary-500 {
    border-color: var(--color-primary) !important;
}

/* Loader/Progress bar */
.loader-fill,
.loader-track .loader-fill {
    background-color: var(--color-primary) !important;
}

.loader-track {
    background-color: var(--color-primary-light) !important;
}

/* =============================================================================
   TYPOGRAPHY
   ============================================================================= */

/* Text Colors */
.text-primary { color: var(--color-primary) !important; }
.text-primary-500 { color: var(--color-primary) !important; }
.text-secondary { color: var(--color-secondary) !important; }
.text-secondary-500 { color: var(--color-secondary) !important; }
.text-success { color: var(--color-success) !important; }
.text-success-500 { color: var(--color-success) !important; }
.text-warning { color: var(--color-warning) !important; }
.text-warning-500 { color: var(--color-warning) !important; }
.text-danger { color: var(--color-danger) !important; }
.text-danger-500 { color: var(--color-danger) !important; }
.text-info { color: var(--color-info) !important; }
.text-info-500 { color: var(--color-info) !important; }

/* =============================================================================
   LINKS
   ============================================================================= */
a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-primary-hover);
}

.forgot-link {
    color: var(--color-primary);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
}

.forgot-link:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
}

/* =============================================================================
   BUTTONS
   ============================================================================= */

/* Primary Button */
.btn-primary {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #ffffff !important;
}

.btn-primary:hover {
    background-color: var(--color-primary-hover) !important;
    border-color: var(--color-primary-hover) !important;
    color: #ffffff !important;
}

.btn-primary:focus {
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

/* Secondary Button */
.btn-secondary {
    background-color: var(--color-secondary) !important;
    border-color: var(--color-secondary) !important;
    color: #ffffff !important;
}

.btn-secondary:hover {
    background-color: var(--color-secondary-hover) !important;
    border-color: var(--color-secondary-hover) !important;
    color: #ffffff !important;
}

.btn-secondary:focus {
    box-shadow: 0 0 0 3px var(--color-secondary-light);
}

/* Success Button */
.btn-success {
    background-color: var(--color-success) !important;
    border-color: var(--color-success) !important;
    color: #ffffff !important;
}

.btn-success:hover {
    background-color: var(--color-success-hover) !important;
    border-color: var(--color-success-hover) !important;
    color: #ffffff !important;
}

/* Danger Button */
.btn-danger {
    background-color: var(--color-danger) !important;
    border-color: var(--color-danger) !important;
    color: #ffffff !important;
}

.btn-danger:hover {
    background-color: var(--color-danger-hover) !important;
    border-color: var(--color-danger-hover) !important;
    color: #ffffff !important;
}

/* Outline Buttons */
.btn-outline-primary {
    background-color: transparent !important;
    border: 2px solid var(--color-primary) !important;
    color: var(--color-primary) !important;
}

.btn-outline-primary:hover {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #ffffff !important;
}

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

.btn-outline-secondary:hover {
    background-color: var(--color-secondary) !important;
    border-color: var(--color-secondary) !important;
    color: #ffffff !important;
}

/* Light Buttons */
.btn-light-primary {
    background-color: var(--color-primary-light) !important;
    border: none !important;
    color: var(--color-primary) !important;
}

.btn-light-primary:hover {
    background-color: var(--color-primary) !important;
    color: #ffffff !important;
}

.btn-light-danger {
    background-color: var(--color-danger-light);
    border: none;
    color: var(--color-danger);
}

.btn-light-danger:hover {
    background-color: var(--color-danger);
    color: #ffffff;
}

/* =============================================================================
   FORMS
   ============================================================================= */
.form-control:focus {
    outline: none;
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px var(--color-primary-light) !important;
}

.form-select:focus {
    outline: none;
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px var(--color-primary-light) !important;
}

/* Form Check */
.form-check-input:checked {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

.form-check-input:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--color-primary-light) !important;
}

/* =============================================================================
   ALERTS
   ============================================================================= */
.alert-success {
    background-color: var(--color-success-light);
    border-color: rgba(34, 197, 94, 0.3);
    color: #166534;
}

.alert-danger,
.alert-error {
    background-color: var(--color-danger-light);
    border-color: rgba(239, 68, 68, 0.3);
    color: #991b1b;
}

.alert-warning {
    background-color: var(--color-warning-light);
    border-color: rgba(245, 158, 11, 0.5);
    color: #854d0e;
}

.alert-info {
    background-color: var(--color-info-light);
    border-color: rgba(59, 130, 246, 0.3);
    color: #1e40af;
}

/* =============================================================================
   BADGES & BACKGROUNDS
   ============================================================================= */
.bg-primary { background-color: var(--color-primary) !important; }
.bg-primary-500 { background-color: var(--color-primary) !important; }
.bg-secondary { background-color: var(--color-secondary) !important; }
.bg-secondary-500 { background-color: var(--color-secondary) !important; }
.bg-success { background-color: var(--color-success) !important; }
.bg-success-500 { background-color: var(--color-success) !important; }
.bg-warning { background-color: var(--color-warning) !important; }
.bg-warning-500 { background-color: var(--color-warning) !important; }
.bg-danger { background-color: var(--color-danger) !important; }
.bg-danger-500 { background-color: var(--color-danger) !important; }
.bg-info { background-color: var(--color-info) !important; }
.bg-info-500 { background-color: var(--color-info) !important; }

/* Light backgrounds */
.bg-light-primary {
    background-color: var(--color-primary-light) !important;
}

/* =============================================================================
   AVATAR
   ============================================================================= */
.user-avatar.bg-primary { background-color: var(--color-primary) !important; }

/* =============================================================================
   BREADCRUMB
   ============================================================================= */
.breadcrumb a {
    color: var(--color-primary);
    text-decoration: none;
}

.breadcrumb a:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
}

/* =============================================================================
   UPLOAD ZONE
   ============================================================================= */
.upload-zone:hover,
.upload-zone.dragover {
    border-color: var(--color-primary);
    background-color: var(--color-primary-light);
}

.upload-icon {
    color: var(--color-primary);
}

/* =============================================================================
   PAYMENT OPTIONS
   ============================================================================= */
.payment-option:hover {
    border-color: var(--color-primary);
    background-color: var(--color-primary-light);
}

.payment-option.selected {
    border-color: var(--color-primary);
    background-color: var(--color-primary-light);
}

.payment-option input[type="radio"] {
    accent-color: var(--color-primary);
}

/* =============================================================================
   DATATABLE CUSTOMIZATION
   ============================================================================= */
.dataTables_wrapper .dataTables_filter input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

.dataTables_wrapper .dataTables_length select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

.page-item.active .page-link {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

.page-link {
    color: var(--color-primary);
}

.page-link:hover {
    color: var(--color-primary-hover);
}

/* =============================================================================
   SWITCHES & TOGGLES
   ============================================================================= */
.form-switch .form-check-input:checked {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

/* =============================================================================
   TABS & NAVIGATION
   ============================================================================= */
.nav-link.active {
    color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

.nav-tabs .nav-link.active {
    border-bottom-color: var(--color-primary) !important;
}

/* =============================================================================
   PROGRESS BARS
   ============================================================================= */
.progress-bar {
    background-color: var(--color-primary);
}

/* =============================================================================
   SELECTION & HIGHLIGHT
   ============================================================================= */
/* Using browser default selection style */

/* =============================================================================
   CARD HOVER EFFECTS
   ============================================================================= */
.card-hover:hover {
    border-color: var(--color-primary);
}

/* =============================================================================
   ICONS WITH PRIMARY COLOR
   ============================================================================= */
.icon-primary {
    color: var(--color-primary) !important;
}

.icon-box-primary {
    background-color: var(--color-primary-light);
    color: var(--color-primary);
}

/* =============================================================================
   END OF FINCARE DESIGN SYSTEM STYLESHEET
   ============================================================================= */