/**
 * TokuGo Design System
 * Single source of truth for all design tokens (colors, typography, spacing)
 */

/* ============================================================================
   TYPOGRAPHY - Global font settings
   ============================================================================ */

/* Set Montserrat as the default font for all elements (except icons) */
*:not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not(.fad):not(.fa-solid):not(.fa-regular):not(.fa-light):not(.fa-thin):not(.fa-duotone):not(.fa-brands):not([class*="fa-"]) {
    font-family: 'Montserrat', 'Open Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}

/* Ensure all common text elements use Montserrat */
body, html, h1, h2, h3, h4, h5, h6, p, span:not([class*="fa-"]), div, a, button, input, textarea, select, label, th, td, li, ul, ol {
    font-family: 'Montserrat', 'Open Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}

/* Explicitly preserve Font Awesome font family */
.fa, .fas, .far, .fab, .fal, .fad, .fa-solid, .fa-regular, .fa-light, .fa-thin, .fa-duotone, .fa-brands, [class*="fa-"] {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "Font Awesome 6 Brands", "FontAwesome" !important;
}

/* ============================================================================
   DESIGN TOKENS - Single source of truth for all colors
   ============================================================================ */

:root {
    /* ========================================================================
       BRAND COLORS - Primary brand identity
       ======================================================================== */
    --brand-primary: #1EC7D0;
    --brand-secondary: #FFC268;

    /* ========================================================================
       SEMANTIC COLORS - With guaranteed contrast for dark theme
       ======================================================================== */
    --color-success: #2FDE99;      /* Green - main color */
    --color-success-bg: #1a7a56;   /* Green - darker version for backgrounds */
    --color-success-text: #9ff4d4; /* Green - lighter version for text */

    --color-warning: #FF6C5F;      /* Orange/Red - main color */
    --color-warning-bg: #993f37;   /* Orange/Red - darker version for backgrounds */
    --color-warning-text: #ffb5ad; /* Orange/Red - lighter version for text */

    --color-danger: #FF4F81;       /* Pink/Red - main color */
    --color-danger-bg: #99304d;    /* Pink/Red - darker version for backgrounds */
    --color-danger-text: #ffa7c0;  /* Pink/Red - lighter version fo r text */

    --color-info: #1EC7D0;         /* Cyan - main color */
    --color-info-bg: #12777c;      /* Cyan - darker version for backgrounds */
    --color-info-text: #dafdff;    /* Cyan - lighter version for text */

    --color-secondary: #FFC268;    /* Orange - main color */
    --color-secondary-bg: #99743e; /* Orange - darker version for backgrounds */
    --color-secondary-text: #ffe1b4; /* Orange - lighter version for text */

    --color-accent: #FFC268;       /* Accent/highlight color */

    /* ========================================================================
       LAYOUT COLORS - Backgrounds, text, borders
       ======================================================================== */
    --background-primary: #000000;   /* Main dark background */
    --background-secondary: #141414; /* Slightly lighter dark background */
    --background-tertiary: #272727;  /* Card headers, etc. */

    --text-primary: #f9fafb;   /* Light text */
    --text-secondary: #d1d5db; /* Light gray text */
    --text-muted: #9ca3af;     /* Muted light text */

    --border-color: #414141;   /* Dark borders */

    /* ========================================================================
       COMPONENT-SPECIFIC COLORS
       ======================================================================== */
    /* Sidebar */
    --sidebar-bg: ##000000;           /* Darker sidebar */
    --sidebar-bg-highlight: #292929; /* Lighter sidebar highlight */
    --sidebar-text: #d1d5db;         /* Light sidebar text */

    /* Navigation */
    --nav-hover: #60a5fa; /* Lighter blue for hover */

    /* Cards */
    --card-bg: #141414;              /* Dark card background */
    --card-header-bg: #272727;       /* Dark card header */
    --card-border: #757575;          /* Dark card border */
    --card-shadow-light: rgba(0, 0, 0, 0.3);  /* Darker shadow for dark theme */
    --card-shadow-hover: rgba(0, 0, 0, 0.5);  /* Darker hover shadow */

    /* Forms */
    --input-bg: #333333;             /* Dark input background */
    --input-border: #4b5563;         /* Dark input border */
    --input-group-bg: #414141;       /* Dark input group background */
    --focus-shadow-color: rgba(59, 130, 246, 0.25); /* Blue focus shadow */

    /* Lists */
    --list-border: #414141; /* Dark list border */

    /* Footer */
    --footer-border: #414141; /* Dark footer border */

    /* Print */
    --print-border: #414141; /* Dark print border */

    /* ========================================================================
       STATUS COLORS - For status badges and indicators
       ======================================================================== */
    --status-active: var(--color-success);
    --status-active-bg: var(--color-success-bg);
    --status-active-text: var(--color-success-text);

    --status-inactive: var(--color-secondary);
    --status-inactive-bg: var(--color-secondary-bg);
    --status-inactive-text: var(--color-secondary-text);

    --status-pending: var(--color-warning);
    --status-pending-bg: var(--color-warning-bg);
    --status-pending-text: var(--color-warning-text);

    /* ========================================================================
       ROLE COLORS - For role badges and indicators
       ======================================================================== */
    --role-admin: var(--color-danger);
    --role-admin-bg: var(--color-danger-bg);
    --role-admin-text: var(--color-danger-text);

    --role-manager: var(--color-warning);
    --role-manager-bg: var(--color-warning-bg);
    --role-manager-text: var(--color-warning-text);

    --role-staff: var(--color-info);
    --role-staff-bg: var(--color-info-bg);
    --role-staff-text: var(--color-info-text);

    --role-user: var(--color-secondary);
    --role-user-bg: var(--color-secondary-bg);
    --role-user-text: var(--color-secondary-text);

    --role-advertising: #8b5cf6;      /* Purple 500 - distinct color for advertising */
    --role-advertising-bg: #581c87;   /* Purple 800 - dark background */
    --role-advertising-text: #ddd6fe; /* Purple 200 - light text */

    /* ========================================================================
       GENERIC CONTENT COLORS
       ======================================================================== */
    --content-neutral: var(--color-secondary);
    --content-neutral-bg: var(--color-secondary-bg);
    --content-neutral-text: var(--color-secondary-text);

    /* ========================================================================
       LEGACY ALIASES - For backward compatibility (deprecated)
       These map old naming conventions to new design system tokens
       ======================================================================== */
    --primary-color: var(--brand-primary);
    --secondary-color: var(--brand-secondary);
    --success-color: var(--color-success);
    --info-color: var(--color-info);
    --warning-color: var(--color-warning);
    --danger-color: var(--color-danger);
    --accent-color: var(--color-accent);
    --light-color: #1f2937;  /* Dark color for dark theme */
    --dark-color: #f9fafb;   /* Light color for dark theme */
}

/* ============================================================================
   BADGE SYSTEM - Guaranteed contrast and consistency
   ============================================================================ */

/* Base badge styles with forced contrast */
.badge {
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    padding: 0.375rem 0.75rem !important;
    border-radius: 1.5rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.025em !important;
    border: 1px solid transparent !important;
}

/* Status Badges */
.badge-status-active {
    background-color: var(--status-active-bg) !important;
    color: var(--status-active-text) !important;
    border-color: var(--status-active) !important;
}

.badge-status-inactive {
    background-color: var(--status-inactive-bg) !important;
    color: var(--status-inactive-text) !important;
    border-color: var(--status-inactive) !important;
}

.badge-status-pending {
    background-color: var(--status-pending-bg) !important;
    color: var(--status-pending-text) !important;
    border-color: var(--status-pending) !important;
}

/* Role Badges */
.badge-role-admin {
    background-color: var(--role-admin-bg) !important;
    color: var(--role-admin-text) !important;
    border-color: var(--role-admin) !important;
}

.badge-role-manager {
    background-color: var(--role-manager-bg) !important;
    color: var(--role-manager-text) !important;
    border-color: var(--role-manager) !important;
}

.badge-role-staff {
    background-color: var(--role-staff-bg) !important;
    color: var(--role-staff-text) !important;
    border-color: var(--role-staff) !important;
}

.badge-role-user {
    background-color: var(--role-user-bg) !important;
    color: var(--role-user-text) !important;
    border-color: var(--role-user) !important;
}

.badge-role-advertising {
    background-color: var(--role-advertising-bg) !important;
    color: var(--role-advertising-text) !important;
    border-color: var(--role-advertising) !important;
}

/* Generic content badges */
.badge-content-neutral {
    background-color: var(--content-neutral-bg) !important;
    color: var(--content-neutral-text) !important;
    border-color: var(--content-neutral) !important;
}

/* ============================================================================
   ACCESSIBILITY ENFORCEMENT
   ============================================================================ */

/* Force minimum contrast ratios for dark theme */
.text-white {
    color: #ffffff !important;
}

.text-dark {
    color: #f9fafb !important; /* Light gray for dark theme */
}

/* Ensure Bootstrap badge overrides don't break contrast for dark theme */
.badge.bg-primary {
    background-color: var(--brand-primary-bg) !important;
    color: #ffffff !important;
}

.badge.bg-success {
    background-color: var(--color-success-bg) !important;
    color: #ffffff !important;
}

.badge.bg-warning {
    background-color: var(--color-warning-bg) !important;
    color: #ffffff !important;
}

.badge.bg-danger {
    background-color: var(--color-danger-bg) !important;
    color: #ffffff !important;
}

.badge.bg-info {
    background-color: var(--color-info-bg) !important;
    color: #ffffff !important; /* White text on blue background */
}

.badge.bg-secondary {
    background-color: var(--color-secondary) !important;
    color: #ffffff !important;
}

/* ============================================================================
   DEBUGGING UTILITIES
   ============================================================================ */

/* Development mode: highlight potential contrast issues */
[data-debug="contrast"] .badge {
    outline: 2px dashed red !important;
    outline-offset: 2px !important;
}

[data-debug="contrast"] .text-white {
    background-color: rgba(255, 0, 0, 0.1) !important;
}

/* ============================================================================
   COMPONENT-SPECIFIC FIXES
   ============================================================================ */

/* Table badges - ensure they're visible */
.table .badge {
    min-width: 60px !important;
    text-align: center !important;
}

/* Card badges */
.card .badge {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

/* ============================================================================
   RESPONSIVE CONSIDERATIONS
   ============================================================================ */

@media (max-width: 768px) {
    .badge {
        font-size: 0.7rem !important;
        padding: 0.25rem 0.5rem !important;
    }
}

/* ============================================================================
   PRINT STYLES
   ============================================================================ */

@media print {
    .badge {
        border: 1px solid #000 !important;
        background-color: transparent !important;
        color: #000 !important;
    }
}

/* ============================================================================
   TEAM MANAGEMENT COMPONENTS
   ============================================================================ */

/* Avatar circles for team member display */
.avatar-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--brand-primary);
    color: #1f2937; /* Dark text on light background */
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    text-transform: uppercase;
}

/* ============================================================================
   Z-INDEX HIERARCHY - GLOBAL REFERENCE
   ============================================================================ */

/*
 * IMPORTANT: This is the single source of truth for z-index values across the app.
 * DO NOT add z-index values elsewhere without consulting this hierarchy.
 *
 * Z-Index Layers (from bottom to top):
 * ----------------------------------------
 * 0-9:      Normal content flow (cards, buttons, etc.)
 * 10-99:    Elevated content (hover states, dropdowns within cards)
 * 999:      Sidebar navigation
 * 1000:     Fixed header (top-header)
 * 1030:     Dropdown menus (Bootstrap default)
 * 1040:     Bulk action bars and floating UI elements
 * 1050:     Modal backdrops
 * 1055:     Modals (must be above backdrop)
 * 1060:     Popovers (Bootstrap default)
 * 1070:     Tooltips (Bootstrap default)
 * 9999:     Toast notifications (always on top)
 *
 * Rules:
 * 1. Modal backdrop MUST be lower than modal (1050 < 1055)
 * 2. Do NOT set z-index on .modal-dialog or .modal-content (inherit from .modal)
 * 3. Do NOT use transform or isolation on modals (creates stacking context issues)
 * 4. Floating action bars should be below modals (1040 < 1050)
 * 5. Header and sidebar MUST be below modal backdrop (999-1000 < 1050)
 * 6. Modals are automatically moved to body root via JavaScript (dashboard.js)
 */

/* ============================================================================
   MODAL Z-INDEX FIX
   ============================================================================ */

/* Backdrop sits below the modal */
.modal-backdrop {
    z-index: 1050 !important;
}

/* Modal container sits above backdrop */
.modal {
    z-index: 1055 !important;
}

/* Dialog inherits from modal - don't create new stacking context */
.modal-dialog {
    position: relative;
    /* Do NOT set z-index here - let it inherit from .modal */
}

/* Content inherits from modal - don't create new stacking context */
.modal-content {
    position: relative;
    /* Do NOT set z-index here - let it inherit from .modal */
}

/* Ensure backdrop is visible but below modal */
.modal-backdrop.show {
    z-index: 1050 !important;
    opacity: 0.5 !important;
}

/* Ensure modal is always interactive */
.modal.show {
    display: block !important;
}

.modal.show .modal-dialog {
    pointer-events: auto !important;
}

.modal.show .modal-content {
    pointer-events: auto !important;
}