/**
 * Hotel ERP - Dark Theme
 *
 * Planner template 기반 다크 테마입니다.
 * Tailwind gray-950/900/800 계열 색상, Blue primary 색상.
 *
 * @see design_guide.md
 */

[data-theme="dark"] {
    /* ==========================================
     * Background Colors (Tailwind gray-950 base)
     * ========================================== */
    --bg-body: #030712;
    --bg-sidebar: #050814;
    --bg-sidebar-hover: rgba(255, 255, 255, 0.05);
    --bg-sidebar-active: transparent;
    --bg-card: #030712;
    --bg-card-hover: #111827;
    --bg-card-active: #1f2937;
    --bg-input: #030712;
    --bg-input-disabled: #111827;
    --bg-table-header: #111827;
    --bg-table-row-hover: #0d1117;
    --bg-table-row-striped: #060b14;
    --bg-dropdown: #111827;
    --bg-modal: #111827;
    --bg-modal-overlay: rgba(0, 0, 0, 0.75);
    --bg-tooltip: #374151;
    --bg-badge: #1f2937;
    --bg-code: #111827;

    /* Surface Colors (PrimeVue compatibility) */
    --surface-ground: #030712;
    --surface-section: #111827;
    --surface-card: #111827;
    --surface-hover: #1f2937;
    --surface-border: #1f2937;
    --surface-200: #1f2937;

    /* ==========================================
     * Text Colors (Tailwind gray-50/400/500 scale)
     * ========================================== */
    --text-main: #f9fafb;
    --text-sub: #9ca3af;
    --text-muted: #6b7280;
    --text-disabled: #374151;
    --text-inverse: #030712;
    --text-link: #60a5fa;
    --text-link-hover: #93c5fd;
    --text-sidebar: #d1d5db;
    --text-sidebar-muted: #6b7280;
    --text-sidebar-active: #60a5fa;
    --text-tooltip: #f9fafb;
    --text-placeholder: #4b5563;

    /* ==========================================
     * Semantic Color Overrides (Dark Mode — opacity patterns)
     * ========================================== */
    --primary-light: rgba(59, 130, 246, 0.15);
    --success-light: rgba(16, 185, 129, 0.15);
    --danger-light: rgba(239, 68, 68, 0.15);
    --warning-light: rgba(245, 158, 11, 0.15);
    --info-light: rgba(59, 130, 246, 0.15);
    --secondary-light: rgba(139, 92, 246, 0.15);

    /* ==========================================
     * Border Colors (Tailwind gray-800/900)
     * ========================================== */
    --border-color: #1f2937;
    --border-light: #111827;
    --border-dark: #374151;
    --border-focus: #3b82f6;
    --border-error: #f87171;

    /* ==========================================
     * Grayscale Override (inverted for dark contexts)
     * ========================================== */
    --gray-50: #111827;
    --gray-100: #1f2937;
    --gray-200: #374151;
    --gray-300: #4b5563;
    --gray-400: #6b7280;
    --gray-500: #9ca3af;
    --gray-600: #d1d5db;
    --gray-700: #e5e7eb;
    --gray-800: #f3f4f6;
    --gray-900: #f9fafb;

    /* ==========================================
     * Shadows (enhanced for dark backgrounds)
     * ========================================== */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5), 0 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.55), 0 10px 10px rgba(0, 0, 0, 0.4);

    /* ==========================================
     * Component-Specific Colors
     * ========================================== */

    /* Buttons */
    --btn-primary-bg: #3b82f6;
    --btn-primary-text: #ffffff;
    --btn-primary-hover-bg: #2563eb;
    --btn-secondary-bg: #1f2937;
    --btn-secondary-text: var(--text-main);
    --btn-secondary-border: #1f2937;
    --btn-secondary-hover-bg: #374151;

    /* Inputs */
    --input-bg: var(--bg-input);
    --input-text: var(--text-main);
    --input-border: #1f2937;
    --input-focus-border: #3b82f6;
    --input-focus-ring: rgba(59, 130, 246, 0.15);

    /* Tables */
    --table-header-bg: var(--bg-table-header);
    --table-header-text: #d1d5db;
    --table-border: var(--border-color);
    --table-row-hover: var(--bg-table-row-hover);

    /* Cards */
    --card-bg: var(--bg-card);
    --card-border: var(--border-color);
    --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);

    /* Modals */
    --modal-bg: var(--bg-modal);
    --modal-border: #1f2937;
    --modal-shadow: 0 20px 25px rgba(0, 0, 0, 0.6), 0 10px 10px rgba(0, 0, 0, 0.4);

    /* Tabs */
    --tab-bg: transparent;
    --tab-active-bg: transparent;
    --tab-active-border: #3b82f6;
    --tab-text: #6b7280;
    --tab-active-text: #60a5fa;

    /* Badges — ring-1 ring-inset opacity pattern */
    --badge-default-bg: #1f2937;
    --badge-default-text: #9ca3af;
    --badge-primary-bg: rgba(59, 130, 246, 0.15);
    --badge-primary-text: #60a5fa;
    --badge-success-bg: rgba(16, 185, 129, 0.15);
    --badge-success-text: #34d399;
    --badge-danger-bg: rgba(239, 68, 68, 0.15);
    --badge-danger-text: #f87171;
    --badge-warning-bg: rgba(245, 158, 11, 0.15);
    --badge-warning-text: #fbbf24;
    --badge-info-bg: rgba(59, 130, 246, 0.15);
    --badge-info-text: #60a5fa;
    --badge-secondary-bg: rgba(139, 92, 246, 0.15);
    --badge-secondary-text: #a78bfa;
    --badge-orange-bg: rgba(249, 115, 22, 0.15);
    --badge-orange-text: #fb923c;

    /* Secondary Colors */
    --secondary: #a78bfa;
    --secondary-hover: #8b5cf6;
    --secondary-light: rgba(139, 92, 246, 0.15);
    --secondary-dark: #c4b5fd;

    /* Accent Gold */
    --accent-gold: #d4b872;
    --accent-gold-hover: #c9a962;
    --accent-gold-light: rgba(201, 169, 98, 0.2);
    --accent-gold-dark: #e5c98a;

    /* Sidebar Active Indicator */
    --sidebar-active-indicator: #3b82f6;

    /* Scrollbar */
    --scrollbar-track: #111827;
    --scrollbar-thumb: #374151;
    --scrollbar-thumb-hover: #4b5563;

    /* Focus Ring */
    --focus-ring-color: #3b82f6;
    --focus-ring-offset: 2px;

    /* Selection */
    --selection-bg: rgba(59, 130, 246, 0.25);
    --selection-text: inherit;
}

/* ==========================================
 * Scrollbar Styling
 * ========================================== */
[data-theme="dark"] ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 3px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

/* ==========================================
 * Selection Styling
 * ========================================== */
[data-theme="dark"] ::selection {
    background: var(--selection-bg);
    color: var(--selection-text);
}

/* ==========================================
 * Image Brightness Adjustment
 * ========================================== */
[data-theme="dark"] img:not([src*=".svg"]) {
    filter: brightness(0.85);
}