/**
 * Custom Brand Styles
 * Tailwind CSS Extension for Dynamic Branding
 * 
 * This file extends Tailwind with brand-specific customizations.
 * CSS variables are set dynamically from database in brand-styles-tailwind.blade.php
 */

/* ========================================
   Tailwind Utilities - Brand Colors
   ======================================== */

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

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

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

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

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

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

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

.border-brand-secondary {
    border-color: var(--brand-secondary) !important;
}

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

/* ========================================
   Brand Buttons
   ======================================== */

.btn-brand-primary {
    @apply inline-flex items-center justify-center gap-2 px-4 py-2.5 text-sm font-semibold text-white transition-all duration-200;
    background-color: var(--brand-primary);
    border-radius: var(--brand-radius, 0.375rem);
}

.btn-brand-primary:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.btn-brand-primary:active {
    opacity: 0.8;
    transform: translateY(0);
}

.btn-brand-secondary {
    @apply inline-flex items-center justify-center gap-2 px-4 py-2.5 text-sm font-semibold text-white transition-all duration-200;
    background-color: var(--brand-secondary);
    border-radius: var(--brand-radius, 0.375rem);
}

.btn-brand-secondary:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.btn-brand-secondary:active {
    opacity: 0.8;
    transform: translateY(0);
}

/* ========================================
   Brand Cards
   ======================================== */

.card-brand {
    @apply bg-white rounded-lg shadow-sm border border-slate-200;
    border-radius: var(--brand-radius, 0.5rem);
}

.card-brand-header {
    @apply px-6 py-4 border-b border-slate-200;
    background-color: var(--brand-bg-alt, #ffffff);
}

.card-brand-body {
    @apply p-6;
}

.card-brand-footer {
    @apply px-6 py-4 border-t border-slate-200 bg-slate-50;
}

/* ========================================
   Brand Forms
   ======================================== */

.input-brand {
    @apply w-full px-3 py-2 text-sm border border-slate-300 rounded-lg transition-colors;
    border-radius: var(--brand-radius, 0.375rem);
}

.input-brand:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb, 59, 130, 246), 0.1);
}

.label-brand {
    @apply block text-sm font-medium text-slate-700 mb-1.5;
}

/* ========================================
   Brand Badges
   ======================================== */

.badge-brand-primary {
    @apply inline-flex items-center px-2.5 py-0.5 text-xs font-semibold text-white;
    background-color: var(--brand-primary);
    border-radius: var(--brand-radius-sm, 0.25rem);
}

.badge-brand-secondary {
    @apply inline-flex items-center px-2.5 py-0.5 text-xs font-semibold text-white;
    background-color: var(--brand-secondary);
    border-radius: var(--brand-radius-sm, 0.25rem);
}

.badge-brand-success {
    @apply inline-flex items-center px-2.5 py-0.5 text-xs font-semibold text-white;
    background-color: var(--brand-success);
    border-radius: var(--brand-radius-sm, 0.25rem);
}

.badge-brand-warning {
    @apply inline-flex items-center px-2.5 py-0.5 text-xs font-semibold text-white;
    background-color: var(--brand-warning);
    border-radius: var(--brand-radius-sm, 0.25rem);
}

.badge-brand-danger {
    @apply inline-flex items-center px-2.5 py-0.5 text-xs font-semibold text-white;
    background-color: var(--brand-danger);
    border-radius: var(--brand-radius-sm, 0.25rem);
}

/* ========================================
   Brand Alerts
   ======================================== */

.alert-brand {
    @apply px-4 py-3 rounded-lg border;
    border-radius: var(--brand-radius, 0.5rem);
}

.alert-brand-primary {
    @apply alert-brand;
    background-color: rgba(var(--brand-primary-rgb, 59, 130, 246), 0.1);
    border-color: var(--brand-primary);
    color: var(--brand-primary-dark);
}

.alert-brand-success {
    @apply alert-brand bg-green-50 border-green-200 text-green-800;
}

.alert-brand-warning {
    @apply alert-brand bg-amber-50 border-amber-200 text-amber-800;
}

.alert-brand-danger {
    @apply alert-brand bg-red-50 border-red-200 text-red-800;
}

/* ========================================
   Brand Links
   ======================================== */

.link-brand {
    color: var(--brand-primary);
    @apply transition-colors duration-200;
}

.link-brand:hover {
    color: var(--brand-primary-dark);
    @apply underline;
}

/* ========================================
   Dark Mode Support
   ======================================== */

[data-theme="dark"] .card-brand {
    @apply bg-slate-800 border-slate-700;
}

[data-theme="dark"] .card-brand-header {
    @apply bg-slate-800 border-slate-700;
}

[data-theme="dark"] .card-brand-footer {
    @apply bg-slate-900 border-slate-700;
}

[data-theme="dark"] .input-brand {
    @apply bg-slate-800 border-slate-600 text-slate-100;
}

[data-theme="dark"] .input-brand:focus {
    @apply border-slate-500;
}

[data-theme="dark"] .label-brand {
    @apply text-slate-300;
}

/* ========================================
   Custom Scrollbar (Brand Colors)
   ======================================== */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    @apply bg-slate-100;
}

::-webkit-scrollbar-thumb {
    background-color: var(--brand-secondary);
    @apply rounded-full;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--brand-primary);
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    @apply bg-slate-900;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    @apply bg-slate-700;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    @apply bg-slate-600;
}