/**
 * MARA - Monin AR Accelerator
 * Custom Monin Brand Color Theme
 * 
 * Based on Monin's brand guidelines:
 * - Brown logo for light backgrounds
 * - White logo for dark backgrounds
 * 
 * Brand Brown: #5C3D2E (warm espresso brown from Monin logo)
 */

@charset "UTF-8";

/* ============================================
   LIGHT MODE - Monin Brown Primary
   ============================================ */
:root, [data-bs-theme=light], [data-menu-theme=light] {
    /* Monin Brand Brown as Primary */
    --tblr-primary: #5C3D2E;
    --tblr-primary-rgb: 92, 61, 46;
    
    /* Adjusted tints for UI elements */
    --tblr-primary-text-emphasis: #3D2A1F;
    --tblr-primary-bg-subtle: #F5EDE9;
    --tblr-primary-border-subtle: #D4C4BC;
    
    /* Link colors using brand brown */
    --tblr-link-color: #5C3D2E;
    --tblr-link-color-rgb: 92, 61, 46;
    --tblr-link-hover-color: #8B5E48;
    --tblr-link-hover-color-rgb: 139, 94, 72;
    
    /* Focus ring */
    --tblr-focus-ring-color: rgba(92, 61, 46, 0.25);
    
    /* Tabler accent (used for various UI elements) */
    --tblr-tabler: #5C3D2E;
    --tblr-tabler-rgb: 92, 61, 46;
    
    /* Gray scale - warm tinted to complement brown */
    --tblr-gray: #5C5249;
    --tblr-gray-dark: #3D352E;
    --tblr-gray-100: #FAF8F7;
    --tblr-gray-200: #F0EDEB;
    --tblr-gray-300: #DDD8D4;
    --tblr-gray-400: #B8AFA8;
    --tblr-gray-500: #8C8178;
    --tblr-gray-600: #5C5249;
    --tblr-gray-700: #4A4239;
    --tblr-gray-800: #3D352E;
    --tblr-gray-900: #2E2721;
    
    /* Body */
    --tblr-body-color: #2E2721;
    --tblr-body-color-rgb: 46, 39, 33;
    --tblr-body-bg: #FAF8F7;
    --tblr-body-bg-rgb: 250, 248, 247;
    
    /* Secondary */
    --tblr-secondary: #6B5D54;
    --tblr-secondary-rgb: 107, 93, 84;
    --tblr-secondary-color: rgba(46, 39, 33, 0.75);
    --tblr-secondary-color-rgb: 46, 39, 33;
    --tblr-secondary-bg: #F0EDEB;
    --tblr-secondary-bg-rgb: 240, 237, 235;
    
    /* Tertiary */
    --tblr-tertiary-color: rgba(46, 39, 33, 0.5);
    --tblr-tertiary-color-rgb: 46, 39, 33;
    --tblr-tertiary-bg: #FAF8F7;
    --tblr-tertiary-bg-rgb: 250, 248, 247;
    
    /* Muted */
    --tblr-muted: #8C8178;
    --tblr-muted-rgb: 140, 129, 120;
    
    /* Light/Dark */
    --tblr-light: #FAF8F7;
    --tblr-light-rgb: 250, 248, 247;
    --tblr-dark: #2E2721;
    --tblr-dark-rgb: 46, 39, 33;
    
    /* Keep standard semantic colors but warm-tinted */
    --tblr-success: #3D8B6C;
    --tblr-success-rgb: 61, 139, 108;
    --tblr-info: #4A7BAF;
    --tblr-info-rgb: 74, 123, 175;
    --tblr-warning: #D4A333;
    --tblr-warning-rgb: 212, 163, 51;
    --tblr-danger: #C44D4D;
    --tblr-danger-rgb: 196, 77, 77;
    
    /* Border colors */
    --tblr-border-color: #E8E2DE;
    --tblr-border-color-translucent: rgba(92, 61, 46, 0.12);
    
    /* Form states */
    --tblr-form-valid-color: #3D8B6C;
    --tblr-form-valid-border-color: #3D8B6C;
    --tblr-form-invalid-color: #C44D4D;
    --tblr-form-invalid-border-color: #C44D4D;
    
    /* Misc */
    --tblr-danger-text: var(--tblr-danger);
    --tblr-navbar-border-color: transparent;
    --bg-switch-checked-color: var(--tblr-primary);
}

/* ============================================
   DARK MODE - Monin Elegant Dark
   ============================================ */
[data-bs-theme=dark], [data-menu-theme=dark] {
    /* Lighter brown for dark mode visibility */
    --tblr-primary: #C4A484;
    --tblr-primary-rgb: 196, 164, 132;
    --tblr-tabler: #C4A484;
    --tblr-tabler-rgb: 196, 164, 132;
    
    /* Body */
    --tblr-body-color: #D4CCC6;
    --tblr-body-color-rgb: 212, 204, 198;
    --tblr-body-bg: #1A1614;
    --tblr-body-bg-rgb: 26, 22, 20;
    
    /* Emphasis */
    --tblr-emphasis-color: #FBF9F8;
    --tblr-emphasis-color-rgb: 251, 249, 248;
    
    /* Secondary */
    --tblr-secondary-color: rgba(212, 204, 198, 0.75);
    --tblr-secondary-color-rgb: 212, 204, 198;
    --tblr-secondary-bg: #2E2621;
    --tblr-secondary-bg-rgb: 46, 38, 33;
    
    /* Tertiary */
    --tblr-tertiary-color: rgba(212, 204, 198, 0.5);
    --tblr-tertiary-color-rgb: 212, 204, 198;
    --tblr-tertiary-bg: #252019;
    --tblr-tertiary-bg-rgb: 37, 32, 25;
    
    /* Text emphasis colors */
    --tblr-primary-text-emphasis: #D9C4AA;
    --tblr-secondary-text-emphasis: #D4CCC6;
    --tblr-success-text-emphasis: #7BC4A6;
    --tblr-info-text-emphasis: #8BB8DB;
    --tblr-warning-text-emphasis: #E8C86B;
    --tblr-danger-text-emphasis: #E09393;
    --tblr-light-text-emphasis: #FAF8F7;
    --tblr-dark-text-emphasis: #D4CCC6;
    
    /* Background subtle colors */
    --tblr-primary-bg-subtle: #2E261F;
    --tblr-secondary-bg-subtle: #252320;
    --tblr-success-bg-subtle: #1A2B24;
    --tblr-info-bg-subtle: #1A242E;
    --tblr-warning-bg-subtle: #2E2614;
    --tblr-danger-bg-subtle: #2E1A1A;
    --tblr-light-bg-subtle: #2E2621;
    --tblr-dark-bg-subtle: #141210;
    
    /* Border subtle colors */
    --tblr-primary-border-subtle: #5C4A3A;
    --tblr-secondary-border-subtle: #4A4540;
    --tblr-success-border-subtle: #2E5C4A;
    --tblr-info-border-subtle: #2E4A6B;
    --tblr-warning-border-subtle: #8B7330;
    --tblr-danger-border-subtle: #6B3333;
    --tblr-light-border-subtle: #3D352E;
    --tblr-dark-border-subtle: #2E2621;
    
    /* Links */
    --tblr-link-color: #D9C4AA;
    --tblr-link-hover-color: #E8D9C4;
    --tblr-link-color-rgb: 217, 196, 170;
    --tblr-link-hover-color-rgb: 232, 217, 196;
    --tblr-code-color: #D9C4AA;
    
    /* Borders */
    --tblr-border-color: #3D352E;
    --tblr-border-color-translucent: var(--tblr-border-color);
    
    /* Forms */
    --tblr-form-valid-color: #7BC4A6;
    --tblr-form-valid-border-color: #7BC4A6;
    --tblr-form-invalid-color: #E09393;
    --tblr-form-invalid-border-color: #E09393;
    
    /* Surfaces */
    --tblr-bg-surface: #221E1A;
    --tblr-navbar-bg: var(--tblr-bg-surface);
    --tblr-dark-mode-border-color: #3D352E;
    --tblr-bg-main-color: #1A1614;
    --tblr-bg-forms: var(--tblr-dark-mode-border-color);
    
    /* Misc */
    --tblr-danger-text: var(--tblr-danger);
    --tblr-danger: #D66B6B;
    --tblr-danger-rgb: 214, 107, 107;
    --tblr-navbar-color: rgba(255, 255, 255, 0.8);
    --tblr-bg-surface-tertiary: #ffffff02;
    --tblr-navbar-border-color: transparent;
}

/* ============================================
   SIDEBAR CUSTOMIZATION
   ============================================ */
[data-bs-theme=light] .navbar-vertical,
[data-menu-theme=light] .navbar-vertical {
    background-color: #F5F0ED !important;
}

[data-bs-theme=light] .navbar-vertical .nav-link:hover,
[data-menu-theme=light] .navbar-vertical .nav-link:hover {
    background-color: rgba(92, 61, 46, 0.08);
}

[data-bs-theme=light] .navbar-vertical .nav-link.active,
[data-menu-theme=light] .navbar-vertical .nav-link.active {
    background-color: rgba(92, 61, 46, 0.12);
    color: #5C3D2E;
}

/* Dark mode sidebar */
[data-bs-theme=dark] .navbar-vertical,
[data-menu-theme=dark] .navbar-vertical {
    background-color: #1E1916 !important;
}

[data-bs-theme=dark] .navbar-vertical .nav-link:hover,
[data-menu-theme=dark] .navbar-vertical .nav-link:hover {
    background-color: rgba(196, 164, 132, 0.1);
}

[data-bs-theme=dark] .navbar-vertical .nav-link.active,
[data-menu-theme=dark] .navbar-vertical .nav-link.active {
    background-color: rgba(196, 164, 132, 0.15);
    color: #C4A484;
}

/* ============================================
   BUTTON ENHANCEMENTS
   ============================================ */
.btn-primary {
    background-color: var(--tblr-primary);
    border-color: var(--tblr-primary);
}

.btn-primary:hover {
    background-color: #4A3125;
    border-color: #4A3125;
}

[data-bs-theme=dark] .btn-primary:hover {
    background-color: #D4B494;
    border-color: #D4B494;
}

.btn-outline-primary {
    color: var(--tblr-primary);
    border-color: var(--tblr-primary);
}

.btn-outline-primary:hover {
    background-color: var(--tblr-primary);
    color: #fff;
}

/* ============================================
   CARD ENHANCEMENTS
   ============================================ */
[data-bs-theme=light] .card {
    background-color: #FFFFFF;
    border-color: var(--tblr-border-color);
}

[data-bs-theme=dark] .card {
    background-color: #221E1A;
    border-color: var(--tblr-border-color);
}

/* ============================================
   NAV TITLE (Sidebar Section Headers)
   ============================================ */
.nav-title {
    color: var(--tblr-primary);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    padding-left: 1rem;
}

/* Sidebar menu items padding */
.navbar-vertical .nav-link {
    padding-left: 1rem;
}

/* ============================================
   BADGE CUSTOMIZATION
   ============================================ */
.badge.bg-primary {
    background-color: var(--tblr-primary) !important;
}

/* Ensure badges with dark backgrounds have white text */
.badge.bg-success,
.badge.bg-info,
.badge.bg-danger,
.badge.bg-primary,
.badge.bg-secondary,
.badge.bg-dark {
    color: #fff !important;
}

/* Badges with light backgrounds need dark/colored text */
.badge.bg-warning,
.badge.bg-white,
.badge.bg-light {
    color: inherit; /* Allow text-success etc to work */
}

/* Specific fix for warning to ensure readability */
.badge.bg-warning {
    color: #2E2721 !important;
}

/* ============================================
   LOGIN PAGE BRANDING
   ============================================ */
.auth-logo {
    color: var(--tblr-primary);
}

/* ============================================
   LOGO - DARK MODE INVERSION
   Turns brown logo to white in dark mode
   ============================================ */
[data-bs-theme=dark] .navbar-brand img,
[data-bs-theme=dark] .navbar-brand .sidebar-logo {
    filter: brightness(0) invert(1);
}

/* Ensure logo looks crisp */
.navbar-brand img,
.navbar-brand .sidebar-logo {
    transition: filter 0.2s ease;
}

/* Logo container styling */
.navbar-brand > div {
    text-align: center;
}

/* AR Accelerator tagline color */
[data-bs-theme=light] .navbar-brand span {
    color: var(--tblr-primary);
}

[data-bs-theme=dark] .navbar-brand span {
    color: var(--tblr-body-color);
}