/**
 * COMPANY BRANDING - Dynamic CSS Classes
 *
 * This file contains reusable CSS classes for dynamic company branding.
 * All classes use CSS variables defined in layouts/app.blade.php
 *
 * CSS Variables Available:
 * --primary, --primary-dark, --primary-light
 * --secondary, --secondary-dark, --secondary-light
 * --accent, --success, --warning, --error, --info
 *
 * Generated: 2025-11-15
 * Project: Enterprise Integration Platform - Support Layer Application Access
 */

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

/* Primary Button */
.btn-primary-dynamic {
    background: linear-gradient(to right, var(--primary), var(--primary-dark)) !important;
    color: white !important;
}

.btn-primary-dynamic:hover {
    filter: brightness(1.1) !important;
}

/* Secondary Button */
.btn-secondary-dynamic {
    background-color: color-mix(in srgb, var(--primary) 10%, transparent) !important;
    color: var(--primary) !important;
}

.btn-secondary-dynamic:hover {
    background-color: color-mix(in srgb, var(--primary) 15%, transparent) !important;
}

/* Accent Button */
.btn-accent {
    background: linear-gradient(to right, var(--accent), color-mix(in srgb, var(--accent) 100%, black 10%)) !important;
    color: white !important;
}

.btn-accent:hover {
    filter: brightness(1.1) !important;
}

/* Success Button */
.btn-success {
    background: linear-gradient(to right, var(--success), color-mix(in srgb, var(--success) 100%, black 10%)) !important;
    color: white !important;
}

.btn-success:hover {
    filter: brightness(1.1) !important;
}

/* Warning Button */
.btn-warning {
    background: linear-gradient(to right, var(--warning), color-mix(in srgb, var(--warning) 100%, black 10%)) !important;
    color: white !important;
}

.btn-warning:hover {
    filter: brightness(1.1) !important;
}

/* Error/Danger Button */
.btn-error,
.btn-danger {
    background: linear-gradient(to right, var(--error), color-mix(in srgb, var(--error) 100%, black 10%)) !important;
    color: white !important;
}

.btn-error:hover,
.btn-danger:hover {
    filter: brightness(1.1) !important;
}

/* Danger Outline Button */
.btn-danger-outline {
    background-color: color-mix(in srgb, var(--error) 10%, transparent) !important;
    color: var(--error) !important;
    border: 1px solid var(--error) !important;
    border-radius: 0.5rem !important;
    padding: 0.5rem 1rem !important;
    font-weight: 600 !important;
    transition: all 0.2s !important;
}

.btn-danger-outline:hover {
    background-color: color-mix(in srgb, var(--error) 20%, transparent) !important;
}

/* ========================================
   BADGES
   ======================================== */

/* Admin Badge - Accent Color */
.badge-admin-accent {
    background-color: color-mix(in srgb, var(--accent) 10%, transparent) !important;
    color: var(--accent) !important;
    border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent) !important;
}

/* Admin Badge - Success Color */
.badge-admin-success {
    background-color: color-mix(in srgb, var(--success) 10%, transparent) !important;
    color: color-mix(in srgb, var(--success) 100%, black 20%) !important;
    border: 1px solid color-mix(in srgb, var(--success) 20%, transparent) !important;
}

/* Admin Badge - Warning Color */
.badge-admin-warning {
    background-color: color-mix(in srgb, var(--warning) 10%, transparent) !important;
    color: color-mix(in srgb, var(--warning) 100%, black 20%) !important;
    border: 1px solid color-mix(in srgb, var(--warning) 20%, transparent) !important;
}

/* Admin Badge - Info Color */
.badge-admin-info {
    background-color: color-mix(in srgb, var(--info) 10%, transparent) !important;
    color: var(--info) !important;
    border: 1px solid color-mix(in srgb, var(--info) 20%, transparent) !important;
}

/* Status Badge - Success (Active) */
.badge-success,
.status-badge-active {
    background-color: color-mix(in srgb, var(--success) 10%, transparent) !important;
    color: color-mix(in srgb, var(--success) 100%, black 20%) !important;
    border: 1px solid color-mix(in srgb, var(--success) 20%, transparent) !important;
}

/* Status Badge - Error (Inactive) */
.badge-error,
.badge-danger,
.status-badge-inactive {
    background-color: color-mix(in srgb, var(--error) 10%, transparent) !important;
    color: var(--error) !important;
    border: 1px solid color-mix(in srgb, var(--error) 20%, transparent) !important;
}

/* Status Badge - Warning */
.badge-warning {
    background-color: color-mix(in srgb, var(--warning) 10%, transparent) !important;
    color: color-mix(in srgb, var(--warning) 100%, black 20%) !important;
    border: 1px solid color-mix(in srgb, var(--warning) 20%, transparent) !important;
}

/* Status Badge - Info */
.badge-info {
    background-color: color-mix(in srgb, var(--info) 10%, transparent) !important;
    color: var(--info) !important;
    border: 1px solid color-mix(in srgb, var(--info) 20%, transparent) !important;
}

/* Primary Badge */
.badge-primary {
    background-color: color-mix(in srgb, var(--primary) 10%, transparent) !important;
    color: var(--primary) !important;
    border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent) !important;
}

/* ========================================
   TEXT COLORS
   ======================================== */

.text-primary-dynamic {
    color: var(--primary) !important;
}

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

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

.text-success-dynamic {
    color: var(--success) !important;
}

.text-warning-dynamic {
    color: var(--warning) !important;
}

.text-error-dynamic,
.text-danger-dynamic {
    color: var(--error) !important;
}

.text-info-dynamic {
    color: var(--info) !important;
}

/* Text Hover Primary */
.text-hover-primary:hover {
    color: var(--primary) !important;
}

/* ========================================
   BACKGROUNDS
   ======================================== */

.bg-primary-dynamic {
    background-color: var(--primary) !important;
}

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

.bg-accent {
    background-color: var(--accent) !important;
}

.bg-success-dynamic {
    background-color: var(--success) !important;
}

.bg-warning-dynamic {
    background-color: var(--warning) !important;
}

.bg-error-dynamic,
.bg-danger-dynamic {
    background-color: var(--error) !important;
}

.bg-info-dynamic {
    background-color: var(--info) !important;
}

/* Background with Opacity */
.bg-primary-light {
    background-color: color-mix(in srgb, var(--primary) 10%, transparent) !important;
}

.bg-success-light {
    background-color: color-mix(in srgb, var(--success) 10%, transparent) !important;
}

.bg-warning-light {
    background-color: color-mix(in srgb, var(--warning) 10%, transparent) !important;
}

.bg-error-light,
.bg-danger-light {
    background-color: color-mix(in srgb, var(--error) 10%, transparent) !important;
}

.bg-info-light {
    background-color: color-mix(in srgb, var(--info) 10%, transparent) !important;
}

/* ========================================
   BORDERS
   ======================================== */

.border-primary-dynamic {
    border-color: var(--primary) !important;
}

.border-success-dynamic {
    border-color: var(--success) !important;
}

.border-warning-dynamic {
    border-color: var(--warning) !important;
}

.border-error-dynamic,
.border-danger-dynamic {
    border-color: var(--error) !important;
}

.border-info-dynamic {
    border-color: var(--info) !important;
}

/* Border Hover */
.border-hover-primary:hover {
    border-color: color-mix(in srgb, var(--primary) 30%, transparent) !important;
}

.border-hover-secondary:hover {
    border-color: color-mix(in srgb, var(--secondary) 30%, transparent) !important;
}

/* ========================================
   NOTIFICATION CARDS
   ======================================== */

/* Success Notification */
.notification-success-bg {
    background: linear-gradient(to right,
        color-mix(in srgb, var(--success) 5%, transparent),
        color-mix(in srgb, var(--success) 10%, transparent)) !important;
}

.notification-success-border {
    border-color: var(--success) !important;
}

.notification-success-icon {
    color: var(--success) !important;
}

.notification-success-text {
    color: color-mix(in srgb, var(--success) 100%, black 20%) !important;
}

/* Error/Danger Notification */
.notification-error-bg,
.notification-danger-bg {
    background: linear-gradient(to right,
        color-mix(in srgb, var(--error) 5%, transparent),
        color-mix(in srgb, var(--error) 10%, transparent)) !important;
}

.notification-error-border,
.notification-danger-border {
    border-color: var(--error) !important;
}

.notification-error-icon,
.notification-danger-icon {
    color: var(--error) !important;
}

.notification-error-text,
.notification-danger-text {
    color: var(--error) !important;
}

/* Info Notification */
.notification-info-bg {
    background: linear-gradient(to right,
        color-mix(in srgb, var(--info) 5%, transparent),
        color-mix(in srgb, var(--info) 10%, transparent)) !important;
}

.notification-info-border {
    border-color: color-mix(in srgb, var(--info) 30%, transparent) !important;
}

.notification-info-icon-bg {
    background-color: var(--info) !important;
}

.notification-info-close {
    color: color-mix(in srgb, var(--info) 60%, transparent) !important;
}

.notification-info-close:hover {
    color: var(--info) !important;
}

.notification-info-button {
    background: linear-gradient(to right,
        color-mix(in srgb, var(--info) 90%, transparent),
        var(--info)) !important;
}

.notification-info-button:hover {
    background: linear-gradient(to right,
        var(--info),
        color-mix(in srgb, var(--info) 100%, black 10%)) !important;
}

/* Warning Notification */
.notification-warning-bg {
    background: linear-gradient(to right,
        color-mix(in srgb, var(--warning) 5%, transparent),
        color-mix(in srgb, var(--warning) 10%, transparent)) !important;
}

.notification-warning-border {
    border-color: color-mix(in srgb, var(--warning) 30%, transparent) !important;
}

.notification-warning-icon-bg {
    background-color: var(--warning) !important;
}

.notification-warning-close {
    color: color-mix(in srgb, var(--warning) 60%, transparent) !important;
}

.notification-warning-close:hover {
    color: var(--warning) !important;
}

.notification-warning-button {
    background: linear-gradient(to right,
        color-mix(in srgb, var(--warning) 90%, transparent),
        var(--warning)) !important;
}

.notification-warning-button:hover {
    background: linear-gradient(to right,
        var(--warning),
        color-mix(in srgb, var(--warning) 100%, black 10%)) !important;
}

/* ========================================
   LINKS
   ======================================== */

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

.link-primary:hover {
    color: var(--primary-dark) !important;
}

/* ========================================
   FORM INPUTS
   ======================================== */

.input-focus-primary:focus {
    border-color: var(--primary) !important;
    --tw-ring-color: color-mix(in srgb, var(--primary) 10%, transparent) !important;
}

/* ========================================
   ADMIN CARDS
   ======================================== */

.admin-card-hover-accent:hover {
    border-color: color-mix(in srgb, var(--accent) 30%, transparent) !important;
}

.admin-card-hover-success:hover {
    border-color: color-mix(in srgb, var(--success) 30%, transparent) !important;
}

.admin-card-hover-warning:hover {
    border-color: color-mix(in srgb, var(--warning) 30%, transparent) !important;
}

/* ========================================
   GRADIENTS
   ======================================== */

.gradient-primary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%) !important;
}

.gradient-secondary {
    background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-light) 100%) !important;
}

/* Primary Dark Gradient (for headers) */
.gradient-primary-dark {
    background: linear-gradient(to right,
        color-mix(in srgb, var(--primary) 100%, black 30%),
        color-mix(in srgb, var(--primary) 100%, black 20%),
        color-mix(in srgb, var(--primary) 100%, black 30%)) !important;
}

/* Success Dark Gradient (for headers) */
.gradient-success-dark {
    background: linear-gradient(to right,
        color-mix(in srgb, var(--success) 100%, black 30%),
        color-mix(in srgb, var(--success) 100%, black 20%),
        color-mix(in srgb, var(--success) 100%, black 30%)) !important;
}

/* ========================================
   UTILITIES
   ======================================== */

/* Loading Spinner */
.loading-spinner {
    border-color: var(--primary) !important;
    border-top-color: transparent !important;
}

/* Pulse Ring */
.pulse-ring-primary {
    color: var(--primary) !important;
}

/* Security/2FA Elements */
.security-icon-bg {
    background-color: color-mix(in srgb, var(--info) 10%, transparent) !important;
}

.security-icon-color {
    color: var(--info) !important;
}

.security-text-emphasis {
    color: var(--info) !important;
}

.security-checkbox {
    color: var(--info) !important;
}

.security-checkbox:focus {
    --tw-ring-color: color-mix(in srgb, var(--info) 10%, transparent) !important;
}