/**
 * Vibo Brand Colors & Variables
 * Modern E-Commerce Platform for Wholesalers
 * 
 * Usage: Include this file in your layout to access Vibo brand colors
 * Example: <link rel="stylesheet" href="{{ asset('css/vibo-brand.css') }}">
 */

:root {
    /* Primary Brand Colors */
    --vibo-red: #FE0000;
    --vibo-dark-green: #024C33;
    --vibo-lime: #97C00E;
    --vibo-white: #FEFEFE;
    
    /* Semantic Colors */
    --vibo-primary: #FE0000;
    --vibo-secondary: #024C33;
    --vibo-accent: #97C00E;
    
    /* Extended Palette */
    --vibo-dark-green-hover: #035A44;
    --vibo-lime-dark: #7da00b;
    --vibo-red-dark: #cc0000;
    
    /* Gradients */
    --vibo-gradient-primary: linear-gradient(135deg, #FE0000 0%, #FF3333 100%);
    --vibo-gradient-secondary: linear-gradient(135deg, #024C33 0%, #035A44 100%);
    --vibo-gradient-accent: linear-gradient(135deg, #97C00E 0%, #7da00b 100%);
    
    /* Shadows */
    --vibo-shadow-red: 0 4px 6px rgba(254, 0, 0, 0.2);
    --vibo-shadow-green: 0 4px 6px rgba(2, 76, 51, 0.2);
    --vibo-shadow-lime: 0 4px 6px rgba(151, 192, 14, 0.2);
    
    /* Opacity Variants */
    --vibo-red-10: rgba(254, 0, 0, 0.1);
    --vibo-red-20: rgba(254, 0, 0, 0.2);
    --vibo-green-10: rgba(2, 76, 51, 0.1);
    --vibo-green-20: rgba(2, 76, 51, 0.2);
    --vibo-lime-10: rgba(151, 192, 14, 0.1);
    --vibo-lime-20: rgba(151, 192, 14, 0.2);
}

/* Utility Classes */
.vibo-bg-primary {
    background-color: var(--vibo-primary) !important;
}

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

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

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

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

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

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

/* Button Styles */
.btn-vibo-primary {
    background: var(--vibo-gradient-primary);
    color: var(--vibo-white);
    border: none;
    font-weight: 600;
    box-shadow: var(--vibo-shadow-red);
    transition: all 0.3s ease;
}

.btn-vibo-primary:hover {
    background: var(--vibo-red-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(254, 0, 0, 0.3);
}

.btn-vibo-secondary {
    background: var(--vibo-gradient-secondary);
    color: var(--vibo-white);
    border: none;
    font-weight: 600;
    box-shadow: var(--vibo-shadow-green);
    transition: all 0.3s ease;
}

.btn-vibo-secondary:hover {
    background: var(--vibo-dark-green-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(2, 76, 51, 0.3);
}

.btn-vibo-accent {
    background: var(--vibo-accent);
    color: var(--vibo-secondary);
    border: none;
    font-weight: 600;
    box-shadow: var(--vibo-shadow-lime);
    transition: all 0.3s ease;
}

.btn-vibo-accent:hover {
    background: var(--vibo-lime-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(151, 192, 14, 0.3);
}

/* Badge Styles */
.badge-vibo-primary {
    background-color: var(--vibo-primary);
    color: var(--vibo-white);
}

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

.badge-vibo-accent {
    background-color: var(--vibo-accent);
    color: var(--vibo-secondary);
}

/* Card Styles */
.card-vibo {
    border: none;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    transition: all 0.3s ease;
}

.card-vibo:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.card-vibo-header {
    background: var(--vibo-gradient-secondary);
    color: var(--vibo-white);
    padding: 1rem 1.5rem;
    border: none;
}

/* Alert Styles */
.alert-vibo-success {
    background: linear-gradient(135deg, var(--vibo-lime-10), var(--vibo-green-10));
    border-left: 4px solid var(--vibo-accent);
    color: var(--vibo-secondary);
}

.alert-vibo-danger {
    background: linear-gradient(135deg, var(--vibo-red-10), rgba(255, 51, 51, 0.1));
    border-left: 4px solid var(--vibo-primary);
    color: var(--vibo-secondary);
}

.alert-vibo-info {
    background: linear-gradient(135deg, var(--vibo-green-10), var(--vibo-lime-10));
    border-left: 4px solid var(--vibo-accent);
    color: var(--vibo-secondary);
}

/* Link Styles */
.vibo-link {
    color: var(--vibo-white);
    text-decoration: none;
    transition: color 0.3s ease;
}

.vibo-link:hover {
    color: var(--vibo-accent);
}

/* Gradient Backgrounds */
.vibo-gradient-primary {
    background: var(--vibo-gradient-primary);
}

.vibo-gradient-secondary {
    background: var(--vibo-gradient-secondary);
}

.vibo-gradient-accent {
    background: var(--vibo-gradient-accent);
}
/* Vibo Modern Table Branding */
.vibo-table {
    background: var(--vibo-white);
    border-radius: 12px;
    box-shadow: var(--vibo-shadow-green);
    overflow: hidden;
    font-family: 'Nunito', sans-serif;
}
.vibo-table th {
    background: var(--vibo-gradient-secondary);
    color: var(--vibo-white);
    font-weight: 700;
    border: none;
    font-size: 1rem;
    padding: 1rem;
}
.vibo-table td {
    color: var(--vibo-dark-green);
    padding: 1rem;
    font-size: 0.98rem;
}

/* ===================================
   GLOBAL BUTTON FIX - CRITICAL
   =================================== */
/* Make direct button children (icons, text) pass through clicks */
button > i,
button > span,
button > strong,
button > small,
button > em,
.btn > i,
.btn > span,
.btn > strong,
.btn > small,
.btn > em,
a.btn > i,
a.btn > span,
a.btn > strong,
a.btn > small,
input[type="button"] > *,
input[type="submit"] > * {
    pointer-events: none !important;
}

/* Ensure buttons and interactive elements work */
button,
.btn,
a.btn,
input[type="button"],
input[type="submit"] {
    cursor: pointer !important;
}