/**
 * Agent Portal Custom CSS
 *
 * This file contains CSS overrides specifically for the agent portal pages.
 * It fixes Bootstrap 5 CSS custom property conflicts without modifying global SCSS.
 *
 * Theme Colors:
 * - Primary: #CF3425 (red)
 * - Secondary: #98AA30 (green)
 *
 * See: docs/AGENT_PORTAL_CSS.md for details
 */

/* ==========================================================================
   Button Overrides - Fix Bootstrap 5 CSS Variable Conflicts
   ========================================================================== */

/* Primary Button */
.btn.btn-primary,
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #CF3425;
    --bs-btn-border-color: #CF3425;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #b02d20;
    --bs-btn-hover-border-color: #a52a1e;
    --bs-btn-focus-shadow-rgb: 207, 52, 37;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #a52a1e;
    --bs-btn-active-border-color: #9a271c;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #CF3425;
    --bs-btn-disabled-border-color: #CF3425;
    background-color: #CF3425 !important;
    border-color: #CF3425 !important;
    color: #fff !important;
}

.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: #b02d20 !important;
    border-color: #a52a1e !important;
    color: #fff !important;
}

/* Secondary Button */
.btn.btn-secondary,
.btn-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #98AA30;
    --bs-btn-border-color: #98AA30;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #829228;
    --bs-btn-hover-border-color: #7a8926;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #7a8926;
    --bs-btn-active-border-color: #728024;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #98AA30;
    --bs-btn-disabled-border-color: #98AA30;
    background-color: #98AA30 !important;
    border-color: #98AA30 !important;
    color: #fff !important;
}

.btn.btn-secondary:hover,
.btn.btn-secondary:focus,
.btn.btn-secondary:active,
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
    background-color: #829228 !important;
    border-color: #7a8926 !important;
    color: #fff !important;
}

/* Outline Primary Button */
.btn.btn-outline-primary,
.btn-outline-primary {
    --bs-btn-color: #CF3425;
    --bs-btn-border-color: #CF3425;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #CF3425;
    --bs-btn-hover-border-color: #CF3425;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #CF3425;
    --bs-btn-active-border-color: #CF3425;
    color: #CF3425 !important;
    border-color: #CF3425 !important;
    background-color: transparent !important;
}

.btn.btn-outline-primary:hover,
.btn.btn-outline-primary:focus,
.btn.btn-outline-primary:active,
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    background-color: #CF3425 !important;
    border-color: #CF3425 !important;
    color: #fff !important;
}

/* Outline Secondary Button */
.btn.btn-outline-secondary,
.btn-outline-secondary {
    --bs-btn-color: #98AA30;
    --bs-btn-border-color: #98AA30;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #98AA30;
    --bs-btn-hover-border-color: #98AA30;
    color: #98AA30 !important;
    border-color: #98AA30 !important;
    background-color: transparent !important;
}

.btn.btn-outline-secondary:hover,
.btn.btn-outline-secondary:focus,
.btn.btn-outline-secondary:active,
.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active {
    background-color: #98AA30 !important;
    border-color: #98AA30 !important;
    color: #fff !important;
}

/* ==========================================================================
   Agent Sidebar Styling Fixes
   ========================================================================== */

.user-sidebar.agent-sidebar .user-sidebar-body > ul > li > a:hover,
.user-sidebar.agent-sidebar .user-sidebar-body > ul > li > a.active {
    background-color: #CF3425 !important;
    color: #fff !important;
}

.user-sidebar.agent-sidebar .user-sidebar-body > ul > li.submenu a.subdrop,
.user-sidebar.agent-sidebar .user-sidebar-body > ul > li.submenu a.active {
    background-color: #CF3425 !important;
    color: #fff !important;
}

.user-sidebar.agent-sidebar .user-sidebar-body > ul > li.submenu ul li a.active {
    color: #CF3425 !important;
    background: transparent !important;
}

.user-sidebar.agent-sidebar .user-sidebar-body > ul > li.logout-link a {
    color: #dc3545 !important;
}

.user-sidebar.agent-sidebar .user-sidebar-body > ul > li.logout-link a:hover {
    color: #c82333 !important;
    background: transparent !important;
}

/* ==========================================================================
   Badge Styling
   ========================================================================== */

.badge-soft-primary,
.badge.badge-soft-primary {
    background-color: rgba(207, 52, 37, 0.1) !important;
    color: #CF3425 !important;
}

.badge-soft-secondary,
.badge.badge-soft-secondary {
    background-color: rgba(152, 170, 48, 0.1) !important;
    color: #98AA30 !important;
}

.badge-soft-success,
.badge.badge-soft-success {
    background-color: rgba(25, 135, 84, 0.1) !important;
    color: #198754 !important;
}

/* ==========================================================================
   Link Colors
   ========================================================================== */

.link-primary,
a.link-primary {
    color: #CF3425 !important;
}

.link-primary:hover,
a.link-primary:hover {
    color: #b02d20 !important;
}

/* ==========================================================================
   Background Colors
   ========================================================================== */

.bg-primary {
    background-color: #CF3425 !important;
}

.bg-secondary {
    background-color: #98AA30 !important;
}

/* ==========================================================================
   Text Colors
   ========================================================================== */

.text-primary {
    color: #CF3425 !important;
}

.text-secondary {
    color: #98AA30 !important;
}

/* ==========================================================================
   Form Controls - Focus States
   ========================================================================== */

.form-control:focus,
.form-select:focus {
    border-color: #CF3425;
    box-shadow: 0 0 0 0.25rem rgba(207, 52, 37, 0.25);
}

/* ==========================================================================
   Alert Styling
   ========================================================================== */

.alert-primary {
    background-color: rgba(207, 52, 37, 0.1);
    border-color: rgba(207, 52, 37, 0.2);
    color: #CF3425;
}