/* ================================================
   BRANDING CSS
   Utility classes and typography for customizable branding
   ================================================ */

/* ============================================
   TYPOGRAPHY - HEADINGS
   ============================================ */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.heading,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6, .display-7 {
    font-family: var(--branding-font-heading);
}

/* ============================================
   TYPOGRAPHY - BODY TEXT
   ============================================ */
body,
p, span, div, li, td, th, label,
input, textarea, select, button,
.form-control, .form-select, .btn,
.text-body, .lead {
    font-family: var(--branding-font-body);
}

/* ============================================
   BANNER UTILITY CLASSES
   ============================================ */

/* Primary banner gradient background */
.bg-branding-banner {
    background: var(--branding-banner-gradient) !important;
    color: #ffffff;
}

.bg-branding-banner:hover {
    background: var(--branding-banner-gradient-hover) !important;
}

/* Banner with full-page background */
.bg-branding-banner-full {
    background: var(--branding-banner-gradient) !important;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

/* ============================================
   PRIMARY COLOR UTILITIES
   ============================================ */

/* Text colors */
.text-branding-primary {
    color: var(--branding-primary) !important;
}

.text-branding-secondary {
    color: var(--branding-secondary) !important;
}

.text-branding-neutral {
    color: var(--branding-neutral) !important;
}

/* Background colors */
.bg-branding-primary {
    background-color: var(--branding-primary) !important;
    color: #ffffff;
}

.bg-branding-secondary {
    background-color: var(--branding-secondary) !important;
    color: var(--branding-neutral);
}

.bg-branding-neutral {
    background-color: var(--branding-neutral) !important;
    color: #ffffff;
}

/* ============================================
   PORTAL-SPECIFIC GRADIENTS
   ============================================ */

.bg-portal-agent {
    background: var(--branding-portal-agent) !important;
    color: #ffffff;
}

.bg-portal-underwriting {
    background: var(--branding-portal-underwriting) !important;
    color: #ffffff;
}

.bg-portal-merchant {
    background: var(--branding-portal-merchant) !important;
    color: #ffffff;
}

.bg-portal-finance {
    background: var(--branding-portal-finance) !important;
    color: #ffffff;
}

/* ============================================
   SIDEBAR ACTIVE STATE
   ============================================ */

.sidebar-active {
    background: var(--branding-sidebar-active) !important;
    box-shadow: 0 4px 8px var(--branding-sidebar-active-shadow);
}

/* ============================================
   BOOTSTRAP BUTTON OVERRIDES
   Maps Bootstrap button colors to our branding
   ============================================ */

/* Primary → Branding Red */
.btn-primary {
    --bs-btn-bg: var(--branding-primary) !important;
    --bs-btn-border-color: var(--branding-primary) !important;
    --bs-btn-hover-bg: #8B1623 !important;
    --bs-btn-hover-border-color: #8B1623 !important;
    --bs-btn-active-bg: #7A131F !important;
    --bs-btn-active-border-color: #7A131F !important;
    background-color: var(--branding-primary) !important;
    border-color: var(--branding-primary) !important;
}

.btn-primary:hover, .btn-primary:focus {
    background-color: #8B1623 !important;
    border-color: #8B1623 !important;
}

.btn-outline-primary {
    --bs-btn-color: var(--branding-primary) !important;
    --bs-btn-border-color: var(--branding-primary) !important;
    --bs-btn-hover-bg: var(--branding-primary) !important;
    --bs-btn-hover-border-color: var(--branding-primary) !important;
    color: var(--branding-primary) !important;
    border-color: var(--branding-primary) !important;
}

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

.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-check:checked + .btn-outline-primary {
    background-color: var(--branding-primary) !important;
    border-color: var(--branding-primary) !important;
    color: #ffffff !important;
}

/* Success → Configurable via Branding */
.btn-success {
    background-color: var(--branding-success, #198754) !important;
    border-color: var(--branding-success, #198754) !important;
    color: var(--branding-success-text, #ffffff) !important;
}

.btn-success:hover, .btn-success:focus {
    filter: brightness(0.9);
}

.btn-outline-success {
    color: var(--branding-success, #198754) !important;
    border-color: var(--branding-success, #198754) !important;
}

.btn-outline-success:hover, .btn-outline-success:focus {
    background-color: var(--branding-success, #198754) !important;
    border-color: var(--branding-success, #198754) !important;
    color: var(--branding-success-text, #ffffff) !important;
}

.btn-outline-success:active,
.btn-outline-success.active,
.btn-check:checked + .btn-outline-success {
    background-color: var(--branding-success, #198754) !important;
    border-color: var(--branding-success, #198754) !important;
    color: var(--branding-success-text, #ffffff) !important;
}

/* Danger → Configurable via Branding */
.btn-danger {
    background-color: var(--branding-danger, #1B1B1B) !important;
    border-color: var(--branding-danger, #1B1B1B) !important;
    color: var(--branding-danger-text, #ffffff) !important;
}

.btn-danger:hover, .btn-danger:focus {
    filter: brightness(1.2);
}

.btn-outline-danger {
    color: var(--branding-danger, #1B1B1B) !important;
    border-color: var(--branding-danger, #1B1B1B) !important;
}

.btn-outline-danger:hover, .btn-outline-danger:focus {
    background-color: var(--branding-danger, #1B1B1B) !important;
    border-color: var(--branding-danger, #1B1B1B) !important;
    color: var(--branding-danger-text, #ffffff) !important;
}

.btn-outline-danger:active,
.btn-outline-danger.active,
.btn-check:checked + .btn-outline-danger {
    background-color: var(--branding-danger, #1B1B1B) !important;
    border-color: var(--branding-danger, #1B1B1B) !important;
    color: var(--branding-danger-text, #ffffff) !important;
}

/* Info → Configurable via Branding */
.btn-info {
    background-color: var(--branding-info, #FFD720) !important;
    border-color: var(--branding-info, #FFD720) !important;
    color: var(--branding-info-text, #1B1B1B) !important;
}

.btn-info:hover, .btn-info:focus {
    filter: brightness(0.9);
}

.btn-outline-info {
    color: var(--branding-info, #FFD720) !important;
    border-color: var(--branding-info, #FFD720) !important;
}

.btn-outline-info:hover, .btn-outline-info:focus {
    background-color: var(--branding-info, #FFD720) !important;
    border-color: var(--branding-info, #FFD720) !important;
    color: var(--branding-info-text, #1B1B1B) !important;
}

.btn-outline-info:active,
.btn-outline-info.active,
.btn-check:checked + .btn-outline-info {
    background-color: var(--branding-info, #FFD720) !important;
    border-color: var(--branding-info, #FFD720) !important;
    color: var(--branding-info-text, #1B1B1B) !important;
}

/* Warning → Configurable via Branding */
.btn-warning {
    background-color: var(--branding-warning, #4B4B4B) !important;
    border-color: var(--branding-warning, #4B4B4B) !important;
    color: var(--branding-warning-text, #ffffff) !important;
}

.btn-warning:hover, .btn-warning:focus {
    filter: brightness(1.2);
}

.btn-outline-warning {
    color: var(--branding-warning, #4B4B4B) !important;
    border-color: var(--branding-warning, #4B4B4B) !important;
}

.btn-outline-warning:hover, .btn-outline-warning:focus {
    background-color: var(--branding-warning, #4B4B4B) !important;
    border-color: var(--branding-warning, #4B4B4B) !important;
    color: var(--branding-warning-text, #ffffff) !important;
}

.btn-outline-warning:active,
.btn-outline-warning.active,
.btn-check:checked + .btn-outline-warning {
    background-color: var(--branding-warning, #4B4B4B) !important;
    border-color: var(--branding-warning, #4B4B4B) !important;
    color: var(--branding-warning-text, #ffffff) !important;
}

/* ============================================
   BOOTSTRAP BADGE OVERRIDES
   ============================================ */

.badge.bg-primary, .bg-primary {
    background-color: var(--branding-primary) !important;
}

.badge.bg-success, .bg-success {
    background-color: var(--branding-success, #198754) !important;
    color: var(--branding-success-text, #ffffff) !important;
}

.badge.bg-danger, .bg-danger {
    background-color: var(--branding-danger, #1B1B1B) !important;
    color: var(--branding-danger-text, #ffffff) !important;
}

.badge.bg-info, .bg-info {
    background-color: var(--branding-info, #FFD720) !important;
    color: var(--branding-info-text, #1B1B1B) !important;
}

.badge.bg-warning, .bg-warning {
    background-color: var(--branding-warning, #4B4B4B) !important;
    color: var(--branding-warning-text, #ffffff) !important;
}

/* Text color utilities */
.text-primary {
    color: var(--branding-primary) !important;
}

.text-success {
    color: var(--branding-success, #198754) !important;
}

.text-danger {
    color: var(--branding-danger, #1B1B1B) !important;
}

.text-info {
    color: var(--branding-info, #FFD720) !important;
}

.text-warning {
    color: var(--branding-warning, #4B4B4B) !important;
}

/* Border color utilities */
.border-primary {
    border-color: var(--branding-primary) !important;
}

.border-success {
    border-color: var(--branding-success, #198754) !important;
}

.border-danger {
    border-color: var(--branding-danger, #1B1B1B) !important;
}

.border-info {
    border-color: var(--branding-info, #FFD720) !important;
}

.border-warning {
    border-color: var(--branding-warning, #4B4B4B) !important;
}

/* ============================================
   BUTTON VARIANTS
   ============================================ */

.btn-branding-primary {
    background: var(--branding-banner-gradient) !important;
    border: none !important;
    color: #ffffff !important;
    transition: all 0.2s ease;
}

.btn-branding-primary:hover,
.btn-branding-primary:focus {
    background: var(--branding-banner-gradient-hover) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--branding-sidebar-active-shadow);
}

.btn-branding-primary:active {
    transform: translateY(0);
}

.btn-outline-branding-primary {
    background: transparent;
    border: 2px solid var(--branding-primary);
    color: var(--branding-primary);
    transition: all 0.2s ease;
}

.btn-outline-branding-primary:hover,
.btn-outline-branding-primary:focus {
    background: var(--branding-primary);
    border-color: var(--branding-primary);
    color: #ffffff;
}

.btn-branding-neutral {
    background-color: var(--branding-neutral) !important;
    border: none !important;
    color: #ffffff !important;
    transition: all 0.2s ease;
}

.btn-branding-neutral:hover,
.btn-branding-neutral:focus {
    background-color: #2d2d2d !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}

.btn-branding-neutral:active {
    transform: translateY(0);
}

/* ============================================
   ON-BRANDING BUTTONS
   For buttons placed on branding gradient headers/backgrounds
   These automatically provide proper contrast
   ============================================ */

/* Solid light button on branding background */
.btn-on-branding {
    --bs-btn-bg: rgba(255, 255, 255, 0.95);
    --bs-btn-color: var(--branding-primary);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-bg: #ffffff;
    --bs-btn-hover-color: var(--branding-primary);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-bg: rgba(255, 255, 255, 0.9);
    --bs-btn-active-color: var(--branding-primary);
    background-color: rgba(255, 255, 255, 0.95) !important;
    color: var(--branding-primary) !important;
    border-color: transparent !important;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-on-branding:hover,
.btn-on-branding:focus {
    background-color: #ffffff !important;
    color: var(--branding-primary) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}

.btn-on-branding:active {
    background-color: rgba(255, 255, 255, 0.9) !important;
    transform: translateY(0);
}

/* Outline button on branding background */
.btn-outline-on-branding {
    --bs-btn-color: rgba(255, 255, 255, 0.9);
    --bs-btn-border-color: rgba(255, 255, 255, 0.5);
    --bs-btn-hover-bg: rgba(255, 255, 255, 0.15);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-border-color: rgba(255, 255, 255, 0.8);
    --bs-btn-active-bg: rgba(255, 255, 255, 0.2);
    --bs-btn-active-color: #ffffff;
    background-color: transparent !important;
    color: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    transition: all 0.2s ease;
}

.btn-outline-on-branding:hover,
.btn-outline-on-branding:focus {
    background-color: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.8) !important;
    color: #ffffff !important;
}

.btn-outline-on-branding:active {
    background-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

/* Ghost button (text only with subtle hover) on branding background */
.btn-ghost-on-branding {
    --bs-btn-color: rgba(255, 255, 255, 0.85);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-bg: rgba(255, 255, 255, 0.1);
    --bs-btn-hover-color: #ffffff;
    background-color: transparent !important;
    color: rgba(255, 255, 255, 0.85) !important;
    border-color: transparent !important;
    transition: all 0.2s ease;
}

.btn-ghost-on-branding:hover,
.btn-ghost-on-branding:focus {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

/* ============================================
   BADGE VARIANTS
   ============================================ */

.badge-branding-primary {
    background: var(--branding-banner-gradient);
    color: #ffffff;
}

.badge-branding-secondary {
    background-color: var(--branding-secondary);
    color: var(--branding-neutral);
}

.badge-branding-neutral {
    background-color: var(--branding-neutral) !important;
    color: #ffffff !important;
}

/* ============================================
   CARD WITH BRANDING HEADER
   ============================================ */

.card-branding-header {
    background: var(--branding-banner-gradient);
    color: #ffffff;
    border-bottom: none;
}

.card-branding-header .card-title,
.card-branding-header h5,
.card-branding-header h6 {
    color: #ffffff;
}

/* ============================================
   LINK COLORS
   ============================================ */

.link-branding-primary {
    color: var(--branding-primary);
    text-decoration: none;
    transition: color 0.15s ease;
}

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

/* ============================================
   FORM FOCUS STATES
   ============================================ */

.form-control:focus,
.form-select:focus {
    border-color: var(--branding-primary);
    box-shadow: 0 0 0 0.2rem rgba(190, 32, 49, 0.15);
}

/* ============================================
   FORM SWITCH/TOGGLE WITH BRANDING
   ============================================ */

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

.form-check-input:focus {
    border-color: var(--branding-primary);
    box-shadow: 0 0 0 0.2rem rgba(190, 32, 49, 0.25);
}

.form-switch .form-check-input:checked {
    background-color: var(--branding-primary) !important;
    border-color: var(--branding-primary) !important;
}

/* ============================================
   PAGINATION WITH BRANDING
   ============================================ */

.pagination .page-item.active .page-link {
    background: var(--branding-banner-gradient);
    border-color: var(--branding-primary);
}

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

/* ============================================
   NAV TABS WITH BRANDING
   ============================================ */

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

.nav-pills .nav-link.active {
    background: var(--branding-banner-gradient);
}

/* ============================================
   PROGRESS BAR WITH BRANDING
   ============================================ */

.progress-bar-branding {
    background: var(--branding-banner-gradient);
}

/* ============================================
   ALERT WITH BRANDING
   ============================================ */

.alert-branding {
    background: linear-gradient(135deg, rgba(190, 32, 49, 0.1) 0%, rgba(139, 22, 35, 0.1) 100%);
    border-color: var(--branding-primary);
    color: var(--branding-neutral);
}

.alert-branding .alert-heading {
    color: var(--branding-primary);
}

/* ============================================
   SPINNER/LOADER WITH BRANDING
   ============================================ */

.spinner-branding {
    color: var(--branding-primary);
}

/* ============================================
   HEADER SECTION (pagination headers)
   ============================================ */

.header-section {
    background: var(--branding-banner-gradient);
}

.header-section .page-link,
.header-section .btn {
    background: var(--branding-banner-gradient);
    border-color: transparent;
    color: #ffffff;
}

.header-section .page-link:hover,
.header-section .btn:hover {
    background: var(--branding-banner-gradient-hover);
}