/**
 * JBA Admin Dashboard - CSS Variables
 *
 * Extends the homepage CSS variables with admin-specific variables
 */

:root {
    /* Colors from homepage (matching brand) */
    --primary-color: #C8102E;
    --primary: #C8102E;  /* Alias for components using --primary */
    --secondary-color: #012169;
    --text-dark: #333;
    --text-light: #666;
    --text-muted: #6b7280;
    --bg-light: #f8f9fa;
    --background-secondary: #f3f4f6;
    --white: #ffffff;
    --shadow: 0 2px 10px rgba(0,0,0,0.1);
    --shadow-lg: 0 4px 20px rgba(0,0,0,0.15);

    /* Admin Layout */
    --sidebar-width: 260px;
    --sidebar-collapsed-width: 70px;
    --header-height: 65px;
    --content-padding: 24px;

    /* Typography */
    --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-size-xs: 0.75rem;    /* 12px */
    --font-size-sm: 0.875rem;   /* 14px */
    --font-size-base: 1rem;     /* 16px */
    --font-size-lg: 1.125rem;   /* 18px */
    --font-size-xl: 1.25rem;    /* 20px */
    --font-size-2xl: 1.5rem;    /* 24px */
    --font-size-3xl: 1.875rem;  /* 30px */

    /* Spacing */
    --spacing-xs: 0.25rem;   /* 4px */
    --spacing-sm: 0.5rem;    /* 8px */
    --spacing-md: 1rem;      /* 16px */
    --spacing-lg: 1.5rem;    /* 24px */
    --spacing-xl: 2rem;      /* 32px */
    --spacing-2xl: 3rem;     /* 48px */

    /* Border Radius */
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;
    --border-radius-xl: 16px;
    --border-radius-full: 9999px;

    /* Status Colors */
    --success: #28a745;
    --success-light: #d4edda;
    --success-dark: #1e7e34;
    --success-bg: #d4edda;
    --success-text: #155724;

    --warning: #ffc107;
    --warning-light: #fff3cd;
    --warning-dark: #d39e00;
    --warning-bg: #fff3cd;
    --warning-text: #856404;

    --danger: #dc3545;
    --danger-light: #f8d7da;
    --danger-dark: #bd2130;
    --danger-bg: #f8d7da;
    --danger-text: #721c24;

    --info: #17a2b8;
    --info-light: #d1ecf1;
    --info-dark: #117a8b;
    --info-bg: #d1ecf1;
    --info-text: #0c5460;

    /* Text semantic aliases */
    --text-primary: var(--text-dark);
    --text-secondary: var(--text-light);

    /* Primary color variants */
    --primary-dark: #a00d25;

    /* Shadow variants */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.1);

    /* Border variants */
    --border-light: var(--gray-100);

    /* Neutral Colors */
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;

    /* Borders */
    --border-color: var(--gray-200);
    --border-width: 1px;

    /* Transitions */
    --transition-fast: all 0.15s ease;
    --transition-base: all 0.3s ease;
    --transition-slow: all 0.5s ease;

    /* Z-index */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    --z-notification: 1080;

    /* Component-specific */
    --card-bg: var(--white);
    --card-border: var(--border-color);
    --card-shadow: var(--shadow);

    --input-bg: var(--white);
    --input-border: var(--gray-300);
    --input-focus-border: var(--primary-color);
    --input-height: 40px;

    --button-height: 40px;
    --button-padding-x: 1rem;
    --button-padding-y: 0.5rem;

    --table-border: var(--gray-200);
    --table-stripe-bg: var(--gray-50);
    --table-hover-bg: var(--gray-100);

    /* Sidebar */
    --sidebar-bg: var(--white);
    --sidebar-border: var(--border-color);
    --sidebar-item-hover: var(--gray-100);
    --sidebar-item-active: var(--primary-color);
    --sidebar-item-active-bg: rgba(200, 16, 46, 0.1);

    /* Header */
    --header-bg: var(--white);
    --header-border: var(--border-color);

    /* Animations */
    --animation-spin: spin 1s linear infinite;
    --animation-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    --animation-bounce: bounce 1s infinite;
}

/* Dark mode support - follows system theme */
@media (prefers-color-scheme: dark) {
    :root {
        /* Background colors */
        --bg-light: #0f172a;
        --background-secondary: #0f172a;
        --white: #1e293b;

        /* Text colors */
        --text-dark: #f1f5f9;
        --text-light: #94a3b8;
        --text-muted: #64748b;

        /* Primary colors - slightly lighter for dark mode */
        --primary-color: #ef4444;
        --primary: #ef4444;
        --secondary-color: #3b82f6;

        /* Shadows for dark mode */
        --shadow: 0 2px 10px rgba(0,0,0,0.3);
        --shadow-lg: 0 4px 20px rgba(0,0,0,0.4);

        /* Neutral Colors - inverted */
        --gray-50: #1e293b;
        --gray-100: #334155;
        --gray-200: #475569;
        --gray-300: #64748b;
        --gray-400: #94a3b8;
        --gray-500: #cbd5e1;
        --gray-600: #e2e8f0;
        --gray-700: #f1f5f9;
        --gray-800: #f8fafc;
        --gray-900: #ffffff;

        /* Borders */
        --border-color: #334155;

        /* Status Colors - adjusted for dark mode */
        --success: #22c55e;
        --success-light: #166534;
        --success-dark: #4ade80;
        --success-bg: #166534;
        --success-text: #86efac;

        --warning: #eab308;
        --warning-light: #713f12;
        --warning-dark: #facc15;
        --warning-bg: #713f12;
        --warning-text: #fde68a;

        --danger: #ef4444;
        --danger-light: #7f1d1d;
        --danger-dark: #f87171;
        --danger-bg: #7f1d1d;
        --danger-text: #fca5a5;

        --info: #06b6d4;
        --info-light: #164e63;
        --info-dark: #22d3ee;
        --info-bg: #164e63;
        --info-text: #67e8f9;

        /* Text semantic aliases for dark mode */
        --text-primary: var(--text-dark);
        --text-secondary: var(--text-light);

        /* Primary color variants */
        --primary-dark: #dc2626;

        /* Shadow variants for dark mode */
        --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
        --shadow-md: 0 4px 12px rgba(0,0,0,0.3);

        /* Border variants */
        --border-light: var(--gray-100);

        /* Component-specific */
        --card-bg: #1e293b;
        --card-border: #334155;

        --input-bg: #0f172a;
        --input-border: #475569;
        --input-focus-border: var(--primary-color);

        --table-border: #334155;
        --table-stripe-bg: #0f172a;
        --table-hover-bg: #334155;

        /* Sidebar */
        --sidebar-bg: #1e293b;
        --sidebar-border: #334155;
        --sidebar-item-hover: #334155;
        --sidebar-item-active-bg: rgba(239, 68, 68, 0.15);

        /* Header */
        --header-bg: #1e293b;
        --header-border: #334155;
    }

    /* Additional dark mode overrides */
    body {
        background-color: var(--bg-light);
        color: var(--text-dark);
    }

    /* Fix Quill editor in dark mode */
    .ql-toolbar.ql-snow,
    .ql-container.ql-snow {
        border-color: var(--border-color) !important;
        background: var(--input-bg);
    }

    .ql-editor {
        color: var(--text-dark);
    }

    .ql-snow .ql-stroke {
        stroke: var(--text-light) !important;
    }

    .ql-snow .ql-fill {
        fill: var(--text-light) !important;
    }

    .ql-snow .ql-picker {
        color: var(--text-light) !important;
    }

    .ql-snow .ql-picker-options {
        background: var(--card-bg) !important;
        border-color: var(--border-color) !important;
    }

    /* Fix select dropdowns */
    select option {
        background: var(--card-bg);
        color: var(--text-dark);
    }

    /* Fix modals */
    .modal-content {
        background: var(--card-bg) !important;
        border-color: var(--border-color) !important;
    }

    /* Fix tables */
    table th {
        background: var(--gray-100) !important;
    }

    /* Fix code/pre elements */
    code, pre {
        background: var(--gray-100);
        color: var(--text-dark);
    }

    /* Fix links */
    a {
        color: var(--primary-color);
    }

    /* Fix pagination */
    .pagination button,
    .pagination span {
        color: var(--text-dark) !important;
        background: var(--card-bg) !important;
        border-color: var(--border-color) !important;
    }

    .pagination button:hover:not(:disabled) {
        background: var(--gray-100) !important;
    }

    /* Fix stats cards */
    .stat-card,
    .stats-card {
        background: var(--card-bg) !important;
        border-color: var(--border-color) !important;
    }

    .stat-value,
    .stats-value {
        color: var(--text-dark) !important;
    }

    .stat-label,
    .stats-label {
        color: var(--text-light) !important;
    }

    /* Fix data tables */
    .data-table th {
        background: var(--gray-100) !important;
        color: var(--text-dark) !important;
        border-color: var(--border-color) !important;
    }

    .data-table td {
        color: var(--text-dark) !important;
        border-color: var(--border-color) !important;
    }

    .data-table tr:hover {
        background: var(--gray-100) !important;
    }

    /* Fix member detail sections */
    .detail-section,
    .section-card {
        background: var(--card-bg) !important;
        border-color: var(--border-color) !important;
    }

    .detail-label,
    .section-header {
        color: var(--text-light) !important;
        border-color: var(--border-color) !important;
    }

    .detail-value {
        color: var(--text-dark) !important;
    }

    /* Fix tabs */
    .tabs,
    .tab-list {
        border-color: var(--border-color) !important;
    }

    .tab,
    .tab-button {
        color: var(--text-light) !important;
        background: transparent !important;
    }

    .tab:hover,
    .tab-button:hover {
        color: var(--text-dark) !important;
        background: var(--gray-100) !important;
    }

    .tab.active,
    .tab-button.active {
        color: var(--primary-color) !important;
        border-color: var(--primary-color) !important;
    }

    /* Fix search inputs */
    .search-input,
    .filter-input,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    input[type="datetime-local"],
    input[type="tel"],
    input[type="url"],
    textarea,
    select {
        background: var(--input-bg) !important;
        color: var(--text-dark) !important;
        border-color: var(--input-border) !important;
    }

    input::placeholder,
    textarea::placeholder {
        color: var(--text-light) !important;
    }

    /* Fix dropdowns */
    .dropdown-menu,
    .select-dropdown {
        background: var(--card-bg) !important;
        border-color: var(--border-color) !important;
    }

    .dropdown-item {
        color: var(--text-dark) !important;
    }

    .dropdown-item:hover {
        background: var(--gray-100) !important;
    }

    /* Fix member cards */
    .member-card,
    .contact-card,
    .event-card,
    .document-card {
        background: var(--card-bg) !important;
        border-color: var(--border-color) !important;
    }

    .member-name,
    .card-title {
        color: var(--text-dark) !important;
    }

    .member-email,
    .card-subtitle {
        color: var(--text-light) !important;
    }

    /* Fix list items */
    .list-item {
        border-color: var(--border-color) !important;
    }

    .list-item:hover {
        background: var(--gray-100) !important;
    }

    /* Fix ticket and message cards */
    .ticket-card,
    .message-card {
        background: var(--card-bg) !important;
        border-color: var(--border-color) !important;
    }

    .message-content {
        color: var(--text-dark) !important;
    }

    .message-meta {
        color: var(--text-light) !important;
    }

    /* Fix timeline */
    .timeline-item {
        border-color: var(--border-color) !important;
    }

    .timeline-content {
        background: var(--card-bg) !important;
        color: var(--text-dark) !important;
    }

    /* Fix form sections */
    .form-section-title {
        color: var(--text-dark) !important;
        border-color: var(--border-color) !important;
    }

    /* Fix loading states */
    .skeleton {
        background: var(--gray-200) !important;
    }

    /* Fix empty states */
    .empty-state {
        color: var(--text-light) !important;
    }

    .empty-state-title {
        color: var(--text-dark) !important;
    }

    /* Fix file upload areas */
    .file-upload-area,
    .drop-zone {
        background: var(--gray-100) !important;
        border-color: var(--border-color) !important;
        color: var(--text-light) !important;
    }

    /* Fix accordion */
    .accordion-header {
        background: var(--card-bg) !important;
        color: var(--text-dark) !important;
        border-color: var(--border-color) !important;
    }

    .accordion-content {
        background: var(--card-bg) !important;
        border-color: var(--border-color) !important;
    }

    /* Fix chips/tags */
    .chip,
    .tag {
        background: var(--gray-100) !important;
        color: var(--text-dark) !important;
    }

    /* Fix tooltips */
    .tooltip {
        background: var(--gray-800) !important;
        color: var(--white) !important;
    }

    /* Fix breadcrumbs */
    .breadcrumb {
        color: var(--text-light) !important;
    }

    .breadcrumb a {
        color: var(--text-dark) !important;
    }

    /* Fix sidebar nav items - more specific */
    app-sidebar .sidebar-nav a,
    app-sidebar .nav-item {
        color: var(--text-dark) !important;
    }

    app-sidebar .sidebar-nav a:hover,
    app-sidebar .nav-item:hover {
        background: var(--sidebar-item-hover) !important;
    }

    /* Fix Chart.js */
    .chart-container {
        background: var(--card-bg) !important;
    }

    /* Fix calendar/date picker */
    .calendar,
    .date-picker {
        background: var(--card-bg) !important;
        border-color: var(--border-color) !important;
    }

    /* Fix notifications list */
    .notification-item {
        border-color: var(--border-color) !important;
    }

    .notification-item:hover {
        background: var(--gray-100) !important;
    }

    /* Fix inline styles in components that use hardcoded colors */
    [style*="color: #111827"],
    [style*="color: #374151"],
    [style*="color: #1f2937"],
    [style*="color: rgb(17, 24, 39)"],
    [style*="color: rgb(55, 65, 81)"],
    [style*="color: rgb(31, 41, 55)"] {
        color: var(--text-dark) !important;
    }

    [style*="color: #6b7280"],
    [style*="color: #9ca3af"],
    [style*="color: rgb(107, 114, 128)"],
    [style*="color: rgb(156, 163, 175)"] {
        color: var(--text-light) !important;
    }

    [style*="background: #fff"],
    [style*="background: white"],
    [style*="background-color: #fff"],
    [style*="background-color: white"],
    [style*="background: rgb(255, 255, 255)"],
    [style*="background-color: rgb(255, 255, 255)"] {
        background: var(--card-bg) !important;
    }

    [style*="background: #f9fafb"],
    [style*="background: #f3f4f6"],
    [style*="background-color: #f9fafb"],
    [style*="background-color: #f3f4f6"] {
        background: var(--gray-100) !important;
    }

    [style*="border-color: #e5e7eb"],
    [style*="border: 1px solid #e5e7eb"] {
        border-color: var(--border-color) !important;
    }
}

/* Animations */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(-25%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}