/**
 * ============================================
 * 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 - Pure Red */
    --mauzo-red: #ff0000;
    --mauzo-red-rgb: 255, 0, 0;
    --mauzo-red-hover: #cc0000;
    --mauzo-red-light: #ff3333;
    --mauzo-red-dark: #990000;
    
    /* 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: 255, 0, 0;
    
    /* 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(255, 0, 0, 0.1);
}

/* ============================================
   FORM ELEMENTS
   ============================================ */
.form-control:focus,
.form-select:focus {
    border-color: var(--mauzo-red);
    box-shadow: 0 0 0 0.25rem rgba(255, 0, 0, 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(255, 0, 0, 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(255, 0, 0, 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(255, 0, 0, 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(255, 0, 0, 0.1);
    --tblr-alert-border-color: rgba(255, 0, 0, 0.2);
}

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

/* ============================================
   AVATAR
   ============================================ */
.avatar-primary {
    --tblr-avatar-bg: rgba(255, 0, 0, 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(255, 0, 0, 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;
}

/* ============================================
   LIGHT MODE SPECIFIC OVERRIDES
   Ensures buttons and UI elements work in light mode
   ============================================ */
[data-bs-theme="light"] {
    /* Ensure primary buttons have proper contrast in light mode */
    --tblr-btn-color: #ffffff;
}

[data-bs-theme="light"] .btn-primary {
    color: #ffffff !important;
    background-color: var(--mauzo-red) !important;
    border-color: var(--mauzo-red) !important;
}

[data-bs-theme="light"] .btn-primary:hover,
[data-bs-theme="light"] .btn-primary:focus {
    color: #ffffff !important;
    background-color: var(--mauzo-red-hover) !important;
    border-color: var(--mauzo-red-hover) !important;
}

[data-bs-theme="light"] .btn-outline-primary {
    color: var(--mauzo-red) !important;
    border-color: var(--mauzo-red) !important;
    background-color: transparent !important;
}

[data-bs-theme="light"] .btn-outline-primary:hover,
[data-bs-theme="light"] .btn-outline-primary:focus {
    color: #ffffff !important;
    background-color: var(--mauzo-red) !important;
    border-color: var(--mauzo-red) !important;
}

/* Card styling for light mode */
[data-bs-theme="light"] .card {
    background-color: #ffffff;
    border-color: rgba(98, 105, 118, 0.16);
}

[data-bs-theme="light"] .card-header {
    background-color: transparent;
    border-bottom-color: rgba(98, 105, 118, 0.16);
}

/* Text colors for light mode */
[data-bs-theme="light"] .text-secondary {
    color: #626976 !important;
}

[data-bs-theme="light"] .subheader {
    color: #626976;
}

/* Ensure h1-h6 have proper contrast in light mode */
[data-bs-theme="light"] .h1,
[data-bs-theme="light"] .h2,
[data-bs-theme="light"] .h3,
[data-bs-theme="light"] .h4,
[data-bs-theme="light"] .h5,
[data-bs-theme="light"] .h6,
[data-bs-theme="light"] h1,
[data-bs-theme="light"] h2,
[data-bs-theme="light"] h3,
[data-bs-theme="light"] h4,
[data-bs-theme="light"] h5,
[data-bs-theme="light"] h6 {
    color: #1d273b;
}

/* Badge backgrounds - ensure consistent colors across themes */
.badge.bg-green, .bg-green { background-color: #2fb344 !important; }
.badge.bg-red, .bg-red { background-color: #d63939 !important; }
.badge.bg-yellow, .bg-yellow { background-color: #f59f00 !important; }
.badge.bg-blue, .bg-blue { background-color: #206bc4 !important; }
.badge.bg-azure, .bg-azure { background-color: #4299e1 !important; }
.badge.bg-cyan, .bg-cyan { background-color: #17a2b8 !important; }

/* Text colors - ensure consistent colors across themes */
.text-green { color: #2fb344 !important; }
.text-red { color: #d63939 !important; }
.text-yellow { color: #f59f00 !important; }
.text-blue { color: #206bc4 !important; }
.text-azure { color: #4299e1 !important; }
.text-cyan { color: #17a2b8 !important; }

/* Progress bar colors */
.progress-bar.bg-green { background-color: #2fb344 !important; }
.progress-bar.bg-red { background-color: #d63939 !important; }
.progress-bar.bg-yellow { background-color: #f59f00 !important; }
.progress-bar.bg-blue { background-color: #206bc4 !important; }
.progress-bar.bg-azure { background-color: #4299e1 !important; }

/* Avatar light backgrounds */
.avatar.bg-green-lt { background-color: rgba(47, 179, 68, 0.1) !important; color: #2fb344 !important; }
.avatar.bg-red-lt { background-color: rgba(214, 57, 57, 0.1) !important; color: #d63939 !important; }
.avatar.bg-yellow-lt { background-color: rgba(245, 159, 0, 0.1) !important; color: #f59f00 !important; }
.avatar.bg-blue-lt { background-color: rgba(32, 107, 196, 0.1) !important; color: #206bc4 !important; }
.avatar.bg-primary-lt { background-color: rgba(255, 0, 0, 0.1) !important; color: var(--mauzo-red) !important; }

/* Divider styling for divide-y */
.divide-y > * {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.divide-y > *:first-child {
    padding-top: 0;
}

.divide-y > *:last-child {
    padding-bottom: 0;
}

.divide-y > * + * {
    border-top: 1px solid rgba(98, 105, 118, 0.16);
}

/* HR text divider */
.hr-text {
    display: flex;
    align-items: center;
    margin: 1rem 0;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1rem;
    color: #626976;
}

.hr-text::before,
.hr-text::after {
    flex: 1;
    height: 1px;
    background-color: rgba(98, 105, 118, 0.16);
    content: "";
}

.hr-text::before {
    margin-right: 0.5rem;
}

.hr-text::after {
    margin-left: 0.5rem;
}

/* Empty state styling */
.empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
}

.empty-title {
    margin: 0 0 0.25rem;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
}

.empty-subtitle {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
}

/* ============================================
   AUTH PAGE BRAND TEXT
   Ensures proper visibility on auth pages
   (login, register, forgot-password, etc.)
   ============================================ */
.auth-brand-text {
    font-family: var(--mauzo-font-headings);
    font-weight: 700;
    color: #1d273b; /* Dark text for light backgrounds */
}

[data-bs-theme="dark"] .auth-brand-text {
    color: #ffffff; /* White text for dark backgrounds */
}