/**
 * ============================================
 * MAUZO BRAND CSS
 * Minimal overrides for Tabler UI Framework
 * Based on Vision 2028 Document
 * ============================================
 * 
 * This file ONLY overrides:
 * - Primary brand color (mauzo red)
 * - Fonts (Inter & Plus Jakarta Sans)
 * - Brand utility classes
 * 
 * Tabler handles everything else including:
 * - Dark/Light mode switching
 * - Card backgrounds
 * - Body backgrounds
 * - All other theme variables
 * 
 * ============================================
 */

/* ============================================
   GOOGLE FONTS
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ============================================
   BRAND COLOR VARIABLES
   ============================================ */
:root {
    /* Primary Brand Color */
    --mauzo-red: #E31837;
    --mauzo-red-rgb: 227, 24, 55;
    --mauzo-red-hover: #C41430;
    --mauzo-red-light: #FF4D6A;
    --mauzo-red-dark: #A01025;
    
    /* Product Colors (Vision 2028) */
    --mauzo-product: #E31837;
    --mymauzo-product: #FFFFFF;
    --octopus-product: #1A1A1A;
    --tentacles-product: #808080;
    
    /* Fonts */
    --mauzo-font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --mauzo-font-headings: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ============================================
   TABLER PRIMARY COLOR OVERRIDE
   Works automatically with light & dark mode
   ============================================ */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
    /* Override Tabler's primary color */
    --tblr-primary: var(--mauzo-red);
    --tblr-primary-rgb: 227, 24, 55;
    
    /* Links */
    --tblr-link-color: var(--mauzo-red);
    --tblr-link-hover-color: var(--mauzo-red-hover);
    
    /* Fonts */
    --tblr-font-sans-serif: var(--mauzo-font-primary);
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
body {
    font-family: var(--mauzo-font-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--mauzo-font-headings);
}

.card-title,
.page-title,
.modal-title {
    font-family: var(--mauzo-font-headings);
}

/* ============================================
   BUTTONS
   ============================================ */
.btn-primary {
    --tblr-btn-bg: var(--mauzo-red);
    --tblr-btn-border-color: var(--mauzo-red);
    --tblr-btn-hover-bg: var(--mauzo-red-hover);
    --tblr-btn-hover-border-color: var(--mauzo-red-hover);
    --tblr-btn-active-bg: var(--mauzo-red-dark);
    --tblr-btn-active-border-color: var(--mauzo-red-dark);
}

.btn-outline-primary {
    --tblr-btn-color: var(--mauzo-red);
    --tblr-btn-border-color: var(--mauzo-red);
    --tblr-btn-hover-bg: var(--mauzo-red);
    --tblr-btn-hover-border-color: var(--mauzo-red);
    --tblr-btn-active-bg: var(--mauzo-red-hover);
    --tblr-btn-active-border-color: var(--mauzo-red-hover);
}

.btn-ghost-primary {
    color: var(--mauzo-red);
}

.btn-ghost-primary:hover {
    color: var(--mauzo-red-hover);
    background-color: rgba(227, 24, 55, 0.1);
}

/* ============================================
   FORM ELEMENTS
   ============================================ */
.form-control:focus,
.form-select:focus {
    border-color: var(--mauzo-red);
    box-shadow: 0 0 0 0.25rem rgba(227, 24, 55, 0.25);
}

.form-check-input:checked {
    background-color: var(--mauzo-red);
    border-color: var(--mauzo-red);
}

.form-check-input:focus {
    border-color: var(--mauzo-red);
    box-shadow: 0 0 0 0.25rem rgba(227, 24, 55, 0.25);
}

.form-switch .form-check-input:checked {
    background-color: var(--mauzo-red);
}

/* ============================================
   BADGES
   ============================================ */
.badge.bg-primary {
    background-color: var(--mauzo-red) !important;
}

.badge.bg-primary-lt {
    background-color: rgba(227, 24, 55, 0.1) !important;
    color: var(--mauzo-red) !important;
}

/* Role Badges */
.badge-owner { background-color: var(--mauzo-red) !important; }
.badge-admin { background-color: #6366F1 !important; }
.badge-accountant { background-color: #4299E1 !important; }
.badge-member { background-color: #6B7280 !important; }
.badge-viewer { background-color: #9CA3AF !important; }

/* ============================================
   NAVIGATION
   ============================================ */
.nav-link.active {
    color: var(--mauzo-red);
}

.nav-pills .nav-link.active {
    background-color: var(--mauzo-red);
}

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

/* Sidebar Active State */
.navbar-dark .nav-link.active,
.navbar-dark .nav-item.active > .nav-link {
    color: var(--mauzo-red) !important;
    background-color: rgba(227, 24, 55, 0.1);
}

/* ============================================
   PAGINATION
   ============================================ */
.page-item.active .page-link {
    background-color: var(--mauzo-red);
    border-color: var(--mauzo-red);
}

.page-link:hover {
    color: var(--mauzo-red);
}

/* ============================================
   PROGRESS & STATUS
   ============================================ */
.progress-bar {
    background-color: var(--mauzo-red);
}

.status-primary,
.status-dot-primary {
    color: var(--mauzo-red);
    background-color: var(--mauzo-red);
}

/* ============================================
   ALERTS
   ============================================ */
.alert-primary {
    --tblr-alert-color: var(--mauzo-red-dark);
    --tblr-alert-bg: rgba(227, 24, 55, 0.1);
    --tblr-alert-border-color: rgba(227, 24, 55, 0.2);
}

/* ============================================
   DROPDOWN
   ============================================ */
.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--mauzo-red);
}

/* ============================================
   AVATAR
   ============================================ */
.avatar-primary {
    --tblr-avatar-bg: rgba(227, 24, 55, 0.1);
    --tblr-avatar-color: var(--mauzo-red);
}

/* ============================================
   RIBBON
   ============================================ */
.ribbon.bg-primary {
    background-color: var(--mauzo-red) !important;
}

/* ============================================
   SPINNER
   ============================================ */
.spinner-border.text-primary,
.spinner-grow.text-primary {
    color: var(--mauzo-red) !important;
}

/* ============================================
   BRAND LOGO
   ============================================ */
.navbar-brand,
.navbar-brand a {
    text-decoration: none;
}

/* Brand Text - App Name (WHITE) */
.brand-text {
    color: #FFFFFF !important;
    font-family: var(--mauzo-font-headings);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.5px;
}

/* Brand Icon - Arrow/Chart Icon (MAUZO RED) */
.brand-icon {
    color: var(--mauzo-red) !important;
    stroke: var(--mauzo-red) !important;
}

/* Legacy support for other selectors */
.navbar-brand-text,
.navbar-brand span {
    color: #FFFFFF !important;
    font-family: var(--mauzo-font-headings);
    font-weight: 700;
}

.navbar-brand .icon,
.navbar-brand svg {
    color: var(--mauzo-red) !important;
    stroke: var(--mauzo-red) !important;
}

/* Dark mode sidebar - same styling */
.navbar-dark .brand-text,
.navbar-dark .navbar-brand span,
[data-bs-theme="dark"] .brand-text {
    color: #FFFFFF !important;
}

.navbar-dark .brand-icon,
.navbar-dark .navbar-brand svg,
[data-bs-theme="dark"] .brand-icon {
    color: var(--mauzo-red) !important;
    stroke: var(--mauzo-red) !important;
}

/* Light mode header - text should be dark for visibility */
.navbar-light .brand-text,
[data-bs-theme="light"] .navbar:not(.navbar-dark) .brand-text {
    color: var(--mauzo-text-dark, #1F2937) !important;
}

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

/* Text Colors */
.text-primary { color: var(--mauzo-red) !important; }
.text-mauzo { color: var(--mauzo-red) !important; }

/* Background Colors */
.bg-primary { background-color: var(--mauzo-red) !important; }
.bg-mauzo { background-color: var(--mauzo-red) !important; }
.bg-mauzo-soft { background-color: rgba(227, 24, 55, 0.1) !important; }

/* Border Colors */
.border-primary { border-color: var(--mauzo-red) !important; }
.border-mauzo { border-color: var(--mauzo-red) !important; }

/* Product Utility Classes */
.bg-product-mauzo { background-color: var(--mauzo-product) !important; }
.bg-product-mymauzo { background-color: var(--mymauzo-product) !important; }
.bg-product-octopus { background-color: var(--octopus-product) !important; }
.bg-product-tentacles { background-color: var(--tentacles-product) !important; }

.text-product-mauzo { color: var(--mauzo-product) !important; }
.text-product-octopus { color: var(--octopus-product) !important; }
.text-product-tentacles { color: var(--tentacles-product) !important; }

/* ============================================
   SELECTION HIGHLIGHT
   ============================================ */
::selection {
    background-color: var(--mauzo-red);
    color: #FFFFFF;
}

::-moz-selection {
    background-color: var(--mauzo-red);
    color: #FFFFFF;
}