/* ============================================
    CSS Custom Properties
   ============================================ */

:root {
    /* ----------------------------------------
       Font System
       ---------------------------------------- */
    --font-family-base: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans KR', sans-serif;
    --font-family-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
    --font-size-xs: 0.75rem; /* 12px */
    --font-size-sm: 0.8125rem; /* 13px */
    --font-size-base: 0.875rem; /* 14px */
    --font-size-md: 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 */

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    --iz-font-size: 13px;
    /* ----------------------------------------
       Spacing System (8px 기반)
       ---------------------------------------- */
    --spacing-0: 0;
    --spacing-1: 0.25rem; /* 4px */
    --spacing-2: 0.5rem; /* 8px */
    --spacing-3: 0.75rem; /* 12px */
    --spacing-4: 1rem; /* 16px */
    --spacing-5: 1.25rem; /* 20px */
    --spacing-6: 1.5rem; /* 24px */
    --spacing-8: 2rem; /* 32px */
    --spacing-10: 2.5rem; /* 40px */
    --spacing-12: 3rem; /* 48px */
    --spacing-16: 4rem; /* 64px */
    /* ----------------------------------------
       Border Radius
       ---------------------------------------- */
    --radius-none: 0;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
    --radius-full: 9999px;
    /* ----------------------------------------
       Shadows
       ---------------------------------------- */
    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
    /* ----------------------------------------
       Transitions
       ---------------------------------------- */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slower: 500ms cubic-bezier(0.4, 0, 0.2, 1);
    /* ----------------------------------------
       Z-Index Scale
       ---------------------------------------- */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    --z-header: 1501;
    /* ----------------------------------------
       Breakpoints (참조용)
       ---------------------------------------- */
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;
    /* ----------------------------------------
       Sidebar Colors (항상 고정 - 다크모드 영향 없음)
       ---------------------------------------- */
    --sidebar-bg: #1e293b;
    --sidebar-bg-hover: rgba(255, 255, 255, 0.1);
    --sidebar-bg-active: rgba(255, 255, 255, 0.15);
    --sidebar-text: #ffffff;
    --sidebar-text-muted: rgba(255, 255, 255, 0.6);
    --sidebar-text-hover: #ffffff;
    --sidebar-border: rgba(255, 255, 255, 0.1);
    --sidebar-icon: #ffffff;
    --sidebar-icon-muted: rgba(255, 255, 255, 0.7);
}

/* ============================================
   2. Light Theme (기본)
   ============================================ */

:root,
[data-theme="light"],
html[data-theme="light"],
body[data-theme="light"] {
    /* Primary Colors */
    --color-primary: #0ea5e9;
    --color-primary-hover: #0284c7;
    --color-primary-active: #0369a1;
    --color-primary-light: #e0f2fe;
    --color-primary-dark: #075985;
    /* Brand Colors */
    --color-iz-main: #0ea5e9;
    --color-accent: #f97316;
    --color-accent-hover: #ea580c;
    --color-accent-light: #ffedd5;
    /* Semantic Colors */
    --color-success: #22c55e;
    --color-success-light: #dcfce7;
    --color-warning: #f59e0b;
    --color-warning-light: #fef3c7;
    --color-error: #ef4444;
    --color-error-light: #fee2e2;
    --color-info: #3b82f6;
    --color-info-light: #dbeafe;
    /* Neutral Colors */
    --color-white: #ffffff;
    --color-black: #000000;
    --color-gray-50: #f9fafb;
    --color-gray-100: #f3f4f6;
    --color-gray-200: #e5e7eb;
    --color-gray-300: #d1d5db;
    --color-gray-400: #9ca3af;
    --color-gray-500: #6b7280;
    --color-gray-600: #4b5563;
    --color-gray-700: #374151;
    --color-gray-800: #1f2937;
    --color-gray-900: #111827;
    --color-gray-950: #030712;
    /* Background Colors */
    --color-bg-body: #f8fafc;
    --color-bg-surface: #ffffff;
    --color-bg-elevated: #ffffff;
    --color-bg-sunken: #f1f5f9;
    --color-bg-overlay: rgba(0, 0, 0, 0.5);
    /* Layout Backgrounds */
    --color-bg-layout-header: #ffffff;
    --color-bg-layout-toolbar: #ffffff;
    --color-bg-drawer: #ffffff;
    --color-bg-sidebar: #1e293b;
    --color-bg-darkgray: #334155;
    /* Component Backgrounds */
    --color-bg-tab-search: #f0f9ff;
    --color-bg-tab-selected: #ffffff;
    --color-bg-panel: #ffffff;
    --color-bg-panel-content: #f8fafc;
    --color-bg-card: #ffffff;
    --color-bg-form: transparent;
    --color-bg-grid-header: var(--color-iz-main);
    /* Input Backgrounds */
    --color-bg-input: #ffffff;
    --color-bg-input-disabled: #f1f5f9;
    --color-bg-edit-basic: #fef3c7;
    --color-bg-edit-readonly: #f1f5f9;
    --color-bg-edit: #f1f5f9;
    /* Text Colors */
    --color-text-primary: #0f172a;
    --color-text-secondary: #475569;
    --color-text-tertiary: #64748b;
    --color-text-muted: #94a3b8;
    --color-text-inverse: #ffffff;
    --color-text-link: #0ea5e9;
    --color-text-link-hover: #0284c7;
    /* Legacy Text Colors (호환성) */
    --color-default: #0f172a;
    --color-top-logo-txt: #0ea5e9;
    --color-footer: #64748b;
    --color-readonly-text: rgba(0, 0, 0, 0.7);
    --color-graph-label: rgba(0, 0, 0, 0.87);
    /* Border Colors */
    --color-border: #e2e8f0;
    --color-border-light: #f1f5f9;
    --color-border-dark: #cbd5e1;
    --color-border-focus: #0ea5e9;
    /* Legacy Border Colors (호환성) */
    --color-common-border: #e2e8f0;
    --color-common-header-border: #e2e8f0;
    --color-footer-border: #e2e8f0;
    --color-card-border: #f1f5f9;
    --color-card-header-border: #e2e8f0;
    --color-grid-header-border: #e2e8f0;
    --color-bg-panel-boxshadow: #e2e8f0;
    /* Special Colors */
    --color-submenu-bg: #38bdf8;
    --color-tablist-bg: #ffffff;
    --color-header-required: #f59e0b;
    --color-zero: #94a3b8;
    --color-group-caption: #0ea5e9;
    /* Filter & Effects */
    --color-banner: saturate(1) sepia(0) grayscale(0) brightness(1);
    --color-tab-icon: invert(1);
    --color-tab-icon-selected: invert(0);
    --color-bg-popup-title: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    --color-current-form-bg: #ffffff;
    --color-current-form-bd: #e2e8f0;
}

/* ============================================
   3. Dark Theme
   ============================================ */

[data-theme="dark"],
html[data-theme="dark"],
body[data-theme="dark"],
html[data-theme="dark"] body,
[data-theme="dark"] * {
    /* Primary Colors */
    --color-primary: #38bdf8;
    --color-primary-hover: #0ea5e9;
    --color-primary-active: #0284c7;
    --color-primary-light: #0c4a6e;
    --color-primary-dark: #7dd3fc;
    /* Brand Colors */
    --color-iz-main: #38bdf8;
    --color-accent: #fb923c;
    --color-accent-hover: #f97316;
    --color-accent-light: #7c2d12;
    /* Semantic Colors */
    --color-success: #4ade80;
    --color-success-light: #14532d;
    --color-warning: #fbbf24;
    --color-warning-light: #78350f;
    --color-error: #f87171;
    --color-error-light: #7f1d1d;
    --color-info: #60a5fa;
    --color-info-light: #1e3a8a;
    /* Neutral Colors - Inverted */
    --color-gray-50: #030712;
    --color-gray-100: #111827;
    --color-gray-200: #1f2937;
    --color-gray-300: #374151;
    --color-gray-400: #4b5563;
    --color-gray-500: #6b7280;
    --color-gray-600: #9ca3af;
    --color-gray-700: #d1d5db;
    --color-gray-800: #e5e7eb;
    --color-gray-900: #f3f4f6;
    --color-gray-950: #f9fafb;
    /* Background Colors */
    --color-bg-body: #0f172a;
    --color-bg-surface: #1e293b;
    --color-bg-elevated: #334155;
    --color-bg-sunken: #0f172a;
    --color-bg-overlay: rgba(0, 0, 0, 0.7);
    /* Layout Backgrounds */
    --color-bg-layout-header: #1e293b;
    --color-bg-layout-toolbar: #1e293b;
    --color-bg-drawer: #1e293b;
    --color-bg-sidebar: #1e293b;
    --color-bg-darkgray: #334155;
    /* Component Backgrounds */
    --color-bg-tab-search: #334155;
    --color-bg-tab-selected: #1e293b;
    --color-bg-panel: #1e293b;
    --color-bg-panel-content: #334155;
    --color-bg-card: #1e293b;
    --color-bg-form: transparent;
    --color-bg-grid-header: #334155;
    /* Input Backgrounds */
    --color-bg-input: #1e293b;
    --color-bg-input-disabled: #334155;
    --color-bg-edit-basic: #334155;
    --color-bg-edit-readonly: #334155;
    --color-bg-edit: #334155;
    /* Text Colors */
    --color-text-primary: #f1f5f9;
    --color-text-secondary: #cbd5e1;
    --color-text-tertiary: #94a3b8;
    --color-text-muted: #64748b;
    /* 중요: 다크모드에서도 text-inverse는 흰색 유지 (사이드바용) */
    --color-text-inverse: #ffffff;
    --color-text-link: #38bdf8;
    --color-text-link-hover: #7dd3fc;
    /* Legacy Text Colors (호환성) */
    --color-default: #f1f5f9;
    --color-top-logo-txt: #f1f5f9;
    --color-footer: #94a3b8;
    --color-readonly-text: rgba(255, 255, 255, 0.7);
    --color-graph-label: rgba(255, 255, 255, 0.87);
    /* Border Colors */
    --color-border: #334155;
    --color-border-light: #1e293b;
    --color-border-dark: #475569;
    --color-border-focus: #38bdf8;
    /* Legacy Border Colors (호환성) */
    --color-common-border: #475569;
    --color-common-header-border: #475569;
    --color-footer-border: #334155;
    --color-card-border: #334155;
    --color-card-header-border: #475569;
    --color-grid-header-border: #475569;
    --color-bg-panel-boxshadow: #475569;
    /* Special Colors */
    --color-submenu-bg: #0284c7;
    --color-tablist-bg: #1e293b;
    --color-header-required: #fbbf24;
    --color-zero: #64748b;
    --color-group-caption: #38bdf8;
    /* Filter & Effects */
    --color-banner: saturate(0.8) sepia(0.1) grayscale(0.2) brightness(0.85);
    --color-tab-icon: invert(1);
    --color-tab-icon-selected: invert(1);
    --color-bg-popup-title: linear-gradient(135deg, #334155 0%, #475569 100%);
    --color-current-form-bg: #1e293b;
    --color-current-form-bd: #475569;
}

/* ============================================
   4. Base & Reset Styles
   ============================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    scroll-behavior: smooth;
}

body, html {
    margin: 0;
    padding: 0;
    min-height: 100%;
    height: 100%;
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    color: var(--color-text-primary);
    background-color: var(--color-bg-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color var(--transition-slow), color var(--transition-slow);
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    color: var(--color-text-primary);
}

p {
    margin: 0 0 1rem;
}

a {
    color: var(--color-text-link);
    text-decoration: none;
    transition: color var(--transition-fast);
}

    a:hover {
        color: var(--color-text-link-hover);
        text-decoration: underline;
    }

img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    border-style: none;
}

button {
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
    overflow: visible;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

    button:focus {
        outline: none;
    }

input, select, textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

/* ============================================
   5. Typography
   ============================================ */

.text-xs {
    font-size: var(--font-size-xs);
}

.text-sm {
    font-size: var(--font-size-sm);
}

.text-base {
    font-size: var(--font-size-base);
}

.text-md {
    font-size: var(--font-size-md);
}

.text-lg {
    font-size: var(--font-size-lg);
}

.text-xl {
    font-size: var(--font-size-xl);
}

.text-2xl {
    font-size: var(--font-size-2xl);
}

.text-3xl {
    font-size: var(--font-size-3xl);
}

.font-normal {
    font-weight: var(--font-weight-normal);
}

.font-medium {
    font-weight: var(--font-weight-medium);
}

.font-semibold {
    font-weight: var(--font-weight-semibold);
}

.font-bold {
    font-weight: var(--font-weight-bold);
}

.text-primary {
    color: var(--color-text-primary);
}

.text-secondary {
    color: var(--color-text-secondary);
}

.text-tertiary {
    color: var(--color-text-tertiary);
}

.text-muted {
    color: var(--color-text-muted);
}

/* ============================================
   6. DataGrid Styles
   ============================================ */

/* Grid Header */
.dx-datagrid-headers .dx-datagrid-table .dx-row:not(.dx-datagrid-filter-row) > td {
    padding: 10px 8px !important;
    vertical-align: middle;
    text-align: center !important;
    background-color: var(--color-bg-grid-header) !important;
    color: var(--color-text-inverse) !important;
    font-weight: var(--font-weight-semibold) !important;
    font-size: var(--font-size-sm) !important;
    border-right: 1px solid var(--color-grid-header-border);
    transition: background-color var(--transition-base);
}

/* 다크 모드 그리드 헤더 */
[data-theme="dark"] .dx-datagrid-headers .dx-datagrid-table .dx-row:not(.dx-datagrid-filter-row) > td {
    background-color: #334155 !important;
    color: #f1f5f9 !important;
    border-right-color: #475569;
}

.dx-datagrid-headers .dx-datagrid-table .dx-row > td .dx-sort,
.dx-datagrid-headers .dx-datagrid-table .dx-row > td .dx-sort-indicator,
.dx-datagrid-headers .dx-datagrid-table .dx-row > td:hover .dx-datagrid-text-content {
    color: var(--color-accent);
}

.dx-datagrid .dx-header-filter {
    position: relative;
    color: var(--color-text-inverse);
    font: 14px/1 DXIcons;
}

/* Grid Row */
.dx-datagrid .dx-row > td {
    padding-top: 6px;
    padding-bottom: 6px;
    border-color: var(--color-border);
    transition: background-color var(--transition-fast);
}

/* 다크 모드 그리드 로우 */
[data-theme="dark"] .dx-datagrid .dx-row > td {
    border-color: #334155;
    color: #f1f5f9;
}

[data-theme="dark"] .dx-datagrid-rowsview .dx-row {
    background-color: #1e293b;
}

[data-theme="dark"] .dx-datagrid-rowsview .dx-row-alt {
    background-color: #263445;
}

/* Grid Row Selection */
.dx-datagrid-rowsview .dx-selection.dx-row:not(.dx-row-focused) > td,
.dx-datagrid-rowsview .dx-selection.dx-row:not(.dx-row-focused) > tr > td,
.dx-datagrid-rowsview .dx-selection.dx-row:not(.dx-row-focused):hover > td,
.dx-datagrid-rowsview .dx-selection.dx-row:not(.dx-row-focused):hover > tr > td {
    background-color: var(--color-primary-light);
}

[data-theme="dark"] .dx-datagrid-rowsview .dx-selection.dx-row:not(.dx-row-focused) > td,
[data-theme="dark"] .dx-datagrid-rowsview .dx-selection.dx-row:not(.dx-row-focused) > tr > td {
    background-color: #0c4a6e;
}

/* Grid Row Hover */
.dx-datagrid-rowsview .dx-row:not(.dx-selection):hover > td {
    background-color: var(--color-bg-sunken);
}

[data-theme="dark"] .dx-datagrid-rowsview .dx-row:not(.dx-selection):hover > td {
    background-color: #334155;
}

/* Grid Editor */
.dx-datagrid .dx-editor-with-menu,
.dx-datagrid-container .dx-editor-with-menu {
    height: 32px;
}

/* Grid Checkbox */
.dx-datagrid-headers .dx-checkbox-icon {
    border: 2px solid var(--color-text-inverse);
}

.dx-datagrid-headers .dx-checkbox-checked .dx-checkbox-icon,
.dx-datagrid-headers .dx-checkbox-indeterminate .dx-checkbox-icon {
    border: 1px solid var(--color-text-inverse);
}

/* Grid Inline Block */
.dx-editor-cell.dx-editor-inline-block:not(.dx-command-select)::before {
    padding-top: 5px;
    padding-bottom: 5px;
}

/* Grid Command Edit */
.dx-datagrid .dx-datagrid-content .dx-datagrid-table .dx-row > td:not(.dx-validation-pending):not(.dx-datagrid-select-all).dx-command-edit.dx-command-edit-with-icons .dx-link {
    width: 18px;
    height: 18px;
    background-position: 0 0;
    background-size: 18px 18px;
    padding: 0;
    font-size: var(--iz-font-size);
    text-align: center;
    line-height: var(--iz-font-size);
    margin: 0 3px;
    vertical-align: middle;
}

/* ============================================
   7. Tab Panel Styles
   ============================================ */

/* Tab Wrapper */
.dx-tabpanel .dx-tabs-wrapper {
    display: flex;
    background-color: var(--color-bg-darkgray);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.dx-tabpanel .dx-tab:not(.dx-tab-selected):not(.dx-state-hover) {
    background-color: var(--color-bg-darkgray);
    color: var(--color-text-inverse);
}

/* Tab Icon */
.dx-tabpanel-tabs .dx-item.dx-tab img.icon {
    filter: var(--color-tab-icon);
    transition: filter var(--transition-fast);
}

.dx-tabpanel-tabs .dx-item.dx-tab.dx-tab-selected img.icon {
    filter: var(--color-tab-icon-selected);
}

.dx-tabpanel-tabs .dx-item.dx-tab.dx-state-hover img.icon {
    filter: invert(0);
}

/* Tab Item */
.dx-tabs-wrapper .dx-tab {
    width: auto;
    padding: 8px 16px;
    transition: all var(--transition-fast);
}

.dx-tabpanel .dx-tab {
    min-width: 80px;
}

.dx-tab {
    background-color: var(--color-bg-surface);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.dx-tab-content .dx-icon-close {
    display: inline-block;
    opacity: 0.6;
    margin-right: 0;
    margin-left: 8px;
    transition: opacity var(--transition-fast);
}

    .dx-tab-content .dx-icon-close:hover {
        opacity: 1;
    }

.dx-tab-content span {
    vertical-align: middle;
}

.dx-tab .dx-icon {
    color: inherit;
}

/* Tab States */
.dx-tab.dx-state-hover {
    background-color: var(--color-bg-sunken);
    color: var(--color-text-primary);
}

    .dx-tab.dx-state-hover img {
        filter: invert(0);
    }

.dx-tab.dx-tab-selected {
    background-color: var(--color-bg-tab-selected);
    color: var(--color-text-primary);
}

    .dx-tab.dx-tab-selected,
    .dx-tab.dx-tab-selected .dx-icon {
        color: var(--color-text-primary);
    }

.dx-tab.dx-state-focused.dx-tab.dx-state-focused {
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
}

.dx-tab.dx-tab-selected.dx-state-hover {
    color: inherit;
}

    .dx-tab.dx-tab-selected.dx-state-hover img {
        filter: var(--color-tab-icon-selected);
    }

.dx-tab.dx-tab-selected::before {
    background-color: var(--color-bg-tab-selected);
    color: var(--color-text-primary);
}

/* ============================================
   8. Form & Input Styles
   ============================================ */

/* Form Field */
.dx-field-item:not(.dx-field-item-has-group):not(.dx-field-item-has-tabs):not(.dx-first-row):not(.dx-label-v-align) {
    padding-top: 6px;
    padding-bottom: 6px;
}

.dx-layout-manager .dx-label-h-align.dx-flex-layout:not(.dx-field-item-label-align) {
    padding-bottom: 6px;
}

.dx-layout-manager .dx-field-item {
    font-size: var(--font-size-sm);
}

    .dx-layout-manager .dx-field-item:not(.dx-first-col) {
        padding-left: 0;
    }

    .dx-layout-manager .dx-field-item:not(.dx-last-col) {
        padding-right: 0;
    }

    .dx-layout-manager .dx-field-item:has(.dx-field-item-label):not(.dx-first-col) {
        padding-left: 20px;
    }

.dx-layout-manager .dx-label-h-align.dx-flex-layout {
    align-items: baseline;
}

/* Readonly State */
.dx-state-readonly {
    background-color: var(--color-bg-edit-readonly) !important;
    color: var(--color-readonly-text);
}

    .dx-state-readonly[role=radiogroup],
    .dx-state-readonly[role=checkbox] {
        background-color: transparent !important;
    }

    .dx-state-readonly[role=checkbox] {
        color: var(--color-text-primary);
    }

/* Required Field */
.dx-field-item.dx-field-item-required > .dx-field-item-content > .dx-show-invalid-badge:not(.dx-htmleditor) {
    background-color: var(--color-bg-edit-basic);
}

/* Radio Group */
.dx-radiogroup-horizontal .dx-collection {
    height: 28px;
}

/* Text Editor Padding */
.dx-texteditor.dx-editor-filled .dx-placeholder:before,
.dx-texteditor.dx-editor-filled .dx-texteditor-input,
.dx-texteditor.dx-editor-outlined .dx-placeholder:before,
.dx-texteditor.dx-editor-outlined .dx-texteditor-input {
    padding: 8px 12px;
}

.dx-searchbox.dx-editor-filled .dx-placeholder::before,
.dx-searchbox.dx-editor-filled .dx-texteditor-input,
.dx-searchbox.dx-editor-outlined .dx-placeholder::before,
.dx-searchbox.dx-editor-outlined .dx-texteditor-input {
    padding-left: 36px;
}

/* Readonly Text Input */
.dx-texteditor.dx-editor-outlined.dx-state-disabled .dx-texteditor-input,
.dx-texteditor.dx-editor-outlined.dx-state-readonly .dx-texteditor-input,
.dx-texteditor.dx-editor-outlined.dx-state-readonly.dx-state-hover .dx-texteditor-input,
.dx-texteditor.dx-editor-filled.dx-state-disabled .dx-texteditor-input,
.dx-texteditor.dx-editor-filled.dx-state-readonly .dx-texteditor-input,
.dx-texteditor.dx-editor-filled.dx-state-readonly.dx-state-hover .dx-texteditor-input {
    color: var(--color-readonly-text);
}

/* Form Number Box */
.dx-form .dx-numberbox input {
    text-align: right;
}

/* IZ Form */
.iz-form,
.iz-form-none-border {
    padding: 0;
    border-radius: var(--radius-md);
    background-color: var(--color-bg-form);
}

/* ============================================
   9. Popup & Modal Styles
   ============================================ */

/* Popup Container */
.dx-popup-wrapper > .dx-popup-fullscreen {
    border-radius: 0;
    position: relative;
}

    .dx-popup-wrapper > .dx-popup-fullscreen .dx-popup-bottom.dx-toolbar {
        padding: 0 8px 0 16px;
        overflow: visible;
        position: absolute;
        bottom: 0;
    }

/* Popup Title */
.dx-toolbar.dx-widget.dx-visibility-change-handler.dx-collection.dx-popup-title {
    background: var(--color-bg-popup-title);
    color: var(--color-text-inverse);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.dx-popup-title.dx-toolbar .dx-toolbar-items-container {
    height: 36px;
}

.dx-toolbar-label .dx-toolbar-item-content > div::before {
    content: url("/image/title_icon.png");
    margin-right: 8px;
    font-size: 14px;
}

/* Popup Content */
.dx-popup-content {
    -webkit-user-drag: none;
    padding: 12px 20px;
}

/* 다크 모드 팝업 */
[data-theme="dark"] .dx-popup-wrapper .dx-overlay-content {
    background-color: #1e293b;
    border-color: #475569;
}

[data-theme="dark"] .dx-popup-content {
    background-color: #1e293b;
    color: #f1f5f9;
}

/* Dropdown Popup */
.dx-dropdownlist-popup-wrapper .dx-toolbar.dx-widget.dx-visibility-change-handler.dx-collection.dx-popup-bottom {
    border-top: 1px solid var(--color-border);
}

/* ============================================
   10. Toast & Notification Styles
   ============================================ */

.dx-toast-icon {
    display: table-cell;
    background-size: contain;
    width: 24px;
    height: 24px;
    margin-right: 12px;
    vertical-align: middle;
    background-position: left center;
    background-repeat: no-repeat;
}

.dx-toast-message {
    display: table-cell;
    vertical-align: middle;
    padding-left: 12px;
    line-height: 1.4;
}

.dx-toast-info {
    background-color: var(--color-info);
    border-radius: var(--radius-md);
}

.dx-toast-warning {
    background-color: var(--color-warning);
    border-radius: var(--radius-md);
}

.dx-toast-error {
    background-color: var(--color-error);
    border-radius: var(--radius-md);
}

.dx-toast-success {
    background-color: var(--color-success);
    border-radius: var(--radius-md);
}

.dx-toast-info .dx-toast-icon {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAjCAQAAAC00HvSAAABoklEQVRIx63WPUvDQBjA8QMFsZNLlgpxtINjBsFVqINghm4dRAe/Rpdm6UcQHERwUYdAJ8HvkKHEQdrPEBQUrf7PoabtveSSSbit3PPjeve8RCCsyyMkIiYlAzJSYiJCPPt+248BfRKkdSX0CcoZnx7jAiJfY3r4LqbNsITI15B2EdNlVBGRSEZ0bUyXyQqIRDJZQIu/M1oRmZ2ovcz4zjt558NxR/6C6Vk2fHLPOXtsIhA0aHHGA1/Gvl7OBMYT/3BF05poTS5Be/5gxvQ15JWjgtyerWPelP19hMDTMvabQyciEJwoJ0rwBKF2lutSRCC4UWJCQaQx+5WYAyUmEsQas1WJ2VJiYkGqMTuVmG0lJhVkGnNaiblQYjKhZYHkmY1SpMGLEoN5Gskt605kjTstIjPvRiJ50tuSksePxv7UfKm8HAe0DGKXgZbB85eKHLWdKkjHUpjzvAmdHaUKIgnNmrIzLiTBs1W4ybiQvwq39RuV6TB1jpvA1f1yxo0sdT9XLy5DlF5cPBmmq0yG2uZUbVOzthle2xdFbd83//za+gXw/JH9LjmoAgAAAABJRU5ErkJggg==);
}

.dx-toast-warning .dx-toast-icon {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAjCAQAAAC00HvSAAABJklEQVRIx62WvW2EQBBGpwlSArdgSrBESuKIQhySLJJbcAuXrXTZteCAAG3GlWBRwVsHB+Ykw8zeafVlaPSY/1lBdlXQ0OMJzMBMwNPTUOzb732scAzEXQ04KhtT0jEdIFZNdJQapuZsIFadqY8wLWMiJBIZafcwLdcHIJHIdQNt4YwPQm4e1feYMjkn/3NUbpjuSUgk0q2YSinx5xL0SSl/dcM45V8r5qLYOEQoDjs2FTNQCI0a+deC+VatGqFPwugD0gs+A8YLQTW4LJgf1SoIcxJG751ZIAMGy5sp1ZuQgHkxMMGqVJq81Tdp6q0unnhFeDMK3lgz9b6k+MOaKX3CUzDO3jd2UH/7JtP2y7aLM12GbHcq29XMdsOzvSiyvW+efG39AmPXSbHWZjgLAAAAAElFTkSuQmCC);
}

.dx-toast-error .dx-toast-icon {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAjCAQAAAC00HvSAAABeklEQVRIx62WMWrDQBBFx01I5zQinQ5hdINA3Kp3mUNEnSBIdwgEcgeBC18gVRojjDr7BklUxAE3b1NYihVrdmWbZbpl9FjN/zOzgqgREJNTUFEDNRUFOTGBnq8dRmQsMWosyYiGMSEpawuijTUpoQszZT6AaGPO1IaZsToRYjCsmGmYGZszIAbD5gA6/M7qTMj+RtMuJjy5Jv0ahQdMeiHEYEhbTKRK/KN+9K3IH+0xmZK+4Jb33mnChM/eaYYIgeLYBdcI4yNQgiBM+Oo5OxBi5S5l0ztdUNJoGrPr5cdCrtbgGOSCGHKhsCjQBbkhhkKorFK2oKsBiKESaocnys58sUMMtYDTXA8NZMSbIwv3bZJO/48VH3VuY6/NYwO4V+Tv1aYYgMTsVB8dKZUPQmyG/OcbzcUvijot6IYPzcVaT225UyQuCRjxrGyLwNbhW54Un5S8KrmZa96cGn/zxtP08zaLPW0Gb3vK29b0tsO9vSi8vW8ufG39AnvvGenmMu5AAAAAAElFTkSuQmCC);
}

.dx-toast-success .dx-toast-icon {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAjCAQAAAC00HvSAAABlklEQVRIx62Wv0rDUBSHTxE6uHTKGhDEzS2jg4vUMeBmX8BR8AFiJQEfwck3cAh2cxBcXEup3VoHF3UxS1FBvuvQhPy5N0lTwplyknz33HN+95wriNEsXAJCZkRAxIyQABfL/L3J6eAzRhltjI9Tj7HxmJcgEpvjYVdh+oxqEImN6JdhBkzXhCgUUwYmzIBFA4hCsUhB6XamDSGriPpZjL12TvQc2SnG2xCiUHgJxqktcdbe+SmU31lh/AaQJQ4HfOR8PiJYpYrVDU4RhD1+c8q2BLdBLNdxXW8KflcI1obcs4UgnGlvAiE0/DDhW/O90EMQDnMbWlkozDTnMz2OC6AvdhGEHT4Ny86EqOB6i1fNgv44QhC2mRi3Gwlozqs4kSnoHEHocFdWQT0ahWKYA93GT5elyY9MucmDHukiCCeGuDO5CUteJaAOgrDPskIKYZVuhpkG/1qpqKBaxRcIQpeHGmG6dWfKM0hfnxZW/Ql/qj0k/ib9Rh83Tqvdr7Ve3NJkaG1OtTY1W5vhrd0oWrvfbHjb+gXw/JH9LjmoAgAAAABJRU5ErkJggg==);
}

.dx-rtl .dx-toast-message {
    padding-left: 0;
    padding-right: 12px;
}

/* ============================================
   11. Accordion Styles
   ============================================ */

.dx-accordion-item {
    margin: 8px 0;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    transition: box-shadow var(--transition-fast);
}

    .dx-accordion-item:hover {
        box-shadow: var(--shadow-sm);
    }

.dx-accordion-item-title {
    padding: 12px 16px;
    word-break: keep-all;
    white-space: normal;
    background-color: var(--color-bg-surface);
    transition: background-color var(--transition-fast);
}

.dx-accordion-item-opened.dx-state-hover > .dx-accordion-item-title,
.dx-accordion-item-opened > .dx-accordion-item-title {
    background-color: var(--color-bg-sunken);
    border-bottom: 1px solid var(--color-border);
}

.dx-accordion-item-closed.dx-state-hover > .dx-accordion-item-title,
.dx-accordion-item-closed > .dx-accordion-item-title {
    background-color: var(--color-bg-surface);
}

.dx-accordion-item-title::before {
    background-position: center;
    float: right;
    font-weight: 400;
    color: var(--color-text-tertiary);
    content: "\f016";
    font-family: DXIcons;
    font-size: 18px;
    margin-left: 12px;
    margin-right: 0;
    line-height: 24px;
    transition: transform var(--transition-fast);
}

/* 다크 모드 아코디언 */
[data-theme="dark"] .dx-accordion-item {
    border-color: #475569;
}

[data-theme="dark"] .dx-accordion-item-title {
    background-color: #1e293b;
    color: #f1f5f9;
}

[data-theme="dark"] .dx-accordion-item-opened > .dx-accordion-item-title {
    background-color: #334155;
    border-bottom-color: #475569;
}

/* ============================================
   12. Button Styles
   ============================================ */

.dx-toolbar-button .dx-button-has-text .dx-button-content .dx-icon {
    width: 18px;
    height: 18px;
    background-position: 0 0;
    background-size: 18px 18px;
    padding: 0;
    text-align: center;
    line-height: 18px;
    margin-left: 0;
}

.dx-button.dx-button-has-icon:not(.dx-button-has-text):not(.dx-shape-standard) {
    border-radius: var(--radius-md);
    box-shadow: none;
}

.dx-button-has-icon.dx-button-has-text .dx-button-content {
    padding: 6px 12px;
}

/* Button Danger */
.dx-button.dx-button-danger {
    color: var(--color-text-inverse);
    background-color: var(--color-error);
    border-radius: var(--radius-md);
}

    .dx-button.dx-button-danger .dx-icon {
        color: var(--color-text-inverse);
    }

/* Button Default */
.dx-button.dx-button-default {
    color: var(--color-text-inverse);
    background-color: var(--color-accent);
    border-radius: var(--radius-md);
}

    .dx-button.dx-button-default .dx-icon {
        color: var(--color-text-inverse);
    }

.dx-button-mode-text.dx-button-default {
    background-color: var(--color-accent);
    box-shadow: none;
}

    .dx-button-mode-text.dx-button-default.dx-state-focused,
    .dx-button-mode-text.dx-button-default.dx-state-hover {
        background-color: var(--color-accent-hover);
        box-shadow: none;
    }

/* ============================================
   13. Drawer & Sidebar Styles
   ============================================ */

.dx-drawer-panel-content {
    min-width: 250px;
    background-color: var(--sidebar-bg);
}

#mainmenutree > .dx-item-content.dx-treeview-item-content .dx-item-content.dx-treeview-item-content:hover {
    color: var(--sidebar-text);
}

.dx-drawer-content {
    overflow: hidden;
    width: 100%;
    height: 100%;
    top: 0;
    background-color: var(--color-bg-drawer);
    transition: background-color var(--transition-slow);
}

.dx-item-content.dx-multiview-item-content {
    padding: 0 12px;
}

/* ============================================
   14. Card Styles
   ============================================ */

.card {
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-card-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-fast);
}

    .card:hover {
        box-shadow: var(--shadow-md);
    }

.card-header {
    border-bottom: 1px solid var(--color-card-header-border);
    padding: 16px 20px;
    background-color: var(--color-bg-surface);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.card .nav.flex-column:not(.nav-sidebar) > li {
    border-bottom: 1px solid var(--color-card-header-border);
}

/* 다크 모드 카드 */
[data-theme="dark"] .card {
    background-color: #1e293b;
    border-color: #334155;
}

[data-theme="dark"] .card-header {
    background-color: #334155;
    border-bottom-color: #475569;
}

/* ============================================
   15. Form Group Caption
   ============================================ */

.dx-form-group-caption {
    color: var(--color-group-caption);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-md);
    padding-top: 8px;
    margin-bottom: 0;
    display: flex;
    flex-basis: 100%;
    align-items: center;
    padding-bottom: 8px;
    cursor: pointer;
    transition: color var(--transition-fast);
}

    .dx-form-group-caption::after {
        content: "";
        flex-grow: 1;
        background: var(--color-border);
        height: 1px;
        font-size: 0;
        line-height: 0;
        margin-left: 12px;
    }

    .dx-form-group-caption::before {
        display: list-item;
        font-size: 2px;
        list-style-type: square;
        list-style-position: inside;
    }

.dx-form-group-with-caption > .dx-form-group-content {
    border-top: 0;
    padding-bottom: 0;
    padding-top: 0;
    margin-top: 0;
}

/* ============================================
   16. PivotGrid Styles
   ============================================ */

.dx-pivotgrid .dx-pivotgrid-border .dx-pivotgrid-background {
    background-color: var(--color-iz-main);
}

.dx-pivotgrid .dx-area-field-container .dx-pivotgrid-fields-area-head .dx-area-field {
    background-color: transparent !important;
    color: var(--color-text-inverse) !important;
    font-weight: var(--font-weight-semibold) !important;
    text-align: center !important;
}

.dx-pivotgrid .dx-pivotgrid-area td {
    color: var(--color-text-secondary);
}

.dx-pivotgrid .dx-area-column-cell .dx-scrollable-content thead td {
    vertical-align: middle;
    background-color: var(--color-iz-main);
    color: var(--color-text-inverse);
    font-weight: var(--font-weight-bold);
    text-align: center;
}

/* ============================================
   17. TreeView Styles
   ============================================ */

.dx-treeview .dx-treeview-item .dx-treeview-expander-icon-stub {
    display: none;
}

/* ============================================
   18. Links
   ============================================ */

.dx-theme-material-typography a {
    color: var(--color-accent);
    text-decoration: none;
    transition: color var(--transition-fast);
}

    .dx-theme-material-typography a:hover {
        color: var(--color-accent-hover);
        text-decoration: underline;
    }

/* ============================================
   19. List Panel
   ============================================ */

.iz-panel-right .dx-list .dx-list-item {
    border-top: 1px solid var(--color-border);
    color: var(--color-text-primary);
    transition: background-color var(--transition-fast);
}

    .iz-panel-right .dx-list .dx-list-item:first-of-type {
        border-top: 1px solid var(--color-border);
    }

    .iz-panel-right .dx-list .dx-list-item:last-of-type {
        border-bottom: 1px solid var(--color-border);
    }

    .iz-panel-right .dx-list .dx-list-item:hover {
        background-color: var(--color-bg-sunken);
    }

/* 다크 모드 리스트 패널 */
[data-theme="dark"] .iz-panel-right .dx-list .dx-list-item {
    border-color: #475569;
    color: #f1f5f9;
}

    [data-theme="dark"] .iz-panel-right .dx-list .dx-list-item:hover {
        background-color: #334155;
    }

/* ============================================
   20. Miscellaneous
   ============================================ */

.flex-column {
    margin-top: 0;
}

/* Search Container Button Style */
.tab-container-search .dx-editor-filled .dx-texteditor-buttons-container:last-child > .dx-button:last-child,
.tab-container-search .dx-editor-filled .dx-texteditor-buttons-container:last-child > .dx-clear-button-area:last-child,
.tab-container-search .dx-editor-outlined .dx-texteditor-buttons-container:last-child > .dx-button:last-child,
.tab-container-search .dx-editor-outlined .dx-texteditor-buttons-container:last-child > .dx-clear-button-area:last-child,
.tab-container-search .dx-editor-underlined .dx-texteditor-buttons-container:last-child > .dx-button:last-child,
.tab-container-search .dx-editor-underlined .dx-texteditor-buttons-container:last-child > .dx-clear-button-area:last-child {
    margin-right: 0;
}

/* ============================================
   21. DevExtreme 다크 모드 오버라이드
   ============================================ */

/* DevExtreme Overlay - 다크 모드에서 팝업이 body 외부에 렌더링될 때도 적용 */
[data-theme="dark"] .dx-overlay-wrapper,
html[data-theme="dark"] .dx-overlay-wrapper,
body[data-theme="dark"] .dx-overlay-wrapper {
    /* 오버레이 래퍼 기본 스타일 */
}

[data-theme="dark"] .dx-overlay-content,
html[data-theme="dark"] .dx-overlay-content,
body[data-theme="dark"] .dx-overlay-content {
    background-color: #1e293b;
    color: #f1f5f9;
    border-color: #475569;
}

/* List 컴포넌트 다크 모드 */
[data-theme="dark"] .dx-list,
[data-theme="dark"] .dx-list-item {
    background-color: #1e293b;
    color: #f1f5f9;
}

    [data-theme="dark"] .dx-list-item:hover,
    [data-theme="dark"] .dx-list-item.dx-state-hover {
        background-color: #334155;
    }

    [data-theme="dark"] .dx-list-item.dx-state-focused {
        background-color: #334155;
    }

/* Scrollable 다크 모드 */
[data-theme="dark"] .dx-scrollable-content {
    background-color: inherit;
}

/* TextBox, NumberBox 등 입력 컴포넌트 다크 모드 */
[data-theme="dark"] .dx-texteditor {
    background-color: #1e293b;
}

[data-theme="dark"] .dx-texteditor-input {
    color: #f1f5f9;
    background-color: transparent;
}

[data-theme="dark"] .dx-texteditor.dx-editor-outlined {
    background-color: #1e293b;
    border-color: #475569;
}

[data-theme="dark"] .dx-texteditor.dx-editor-filled {
    background-color: #334155;
}

[data-theme="dark"] .dx-placeholder::before {
    color: #94a3b8;
}

/* SelectBox, DropDownBox 다크 모드 */
[data-theme="dark"] .dx-dropdowneditor-icon {
    color: #94a3b8;
}

[data-theme="dark"] .dx-dropdowneditor.dx-state-hover .dx-dropdowneditor-icon {
    color: #f1f5f9;
}

/* Button 다크 모드 */
[data-theme="dark"] .dx-button-mode-contained {
    background-color: #475569;
    color: #f1f5f9;
}

    [data-theme="dark"] .dx-button-mode-contained.dx-state-hover {
        background-color: #64748b;
    }

[data-theme="dark"] .dx-button-mode-outlined {
    border-color: #475569;
    color: #f1f5f9;
}

[data-theme="dark"] .dx-button-mode-text {
    color: #f1f5f9;
}

/* Toolbar 다크 모드 */
[data-theme="dark"] .dx-toolbar {
    background-color: #1e293b;
}

/* Form 다크 모드 */
[data-theme="dark"] .dx-form {
    background-color: transparent;
}

[data-theme="dark"] .dx-field-item-label-text {
    color: #cbd5e1;
}

/* Checkbox, RadioButton 다크 모드 */
[data-theme="dark"] .dx-checkbox-text,
[data-theme="dark"] .dx-radiobutton-text {
    color: #f1f5f9;
}

[data-theme="dark"] .dx-checkbox-icon {
    border-color: #64748b;
}

[data-theme="dark"] .dx-radiobutton-icon {
    border-color: #64748b;
}

/* Switch 다크 모드 */
[data-theme="dark"] .dx-switch-off .dx-switch-container {
    background-color: #475569;
}

/* ============================================
   22. Responsive Design
   ============================================ */

/* Small devices (landscape phones, 576px and up) */
@media (max-width: 640px) {
    :root {
        --font-size-base: 0.8125rem;
    }

    .dx-popup-content {
        padding: 8px 12px;
    }

    .dx-toolbar-label .dx-toolbar-item-content > div::before {
        display: none;
    }

    .dx-tabpanel .dx-tab {
        min-width: 60px;
        padding: 6px 10px;
    }

    .dx-tabs-wrapper .dx-tab {
        padding: 6px 10px;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 641px) and (max-width: 1024px) {
    .dx-popup-content {
        padding: 10px 16px;
    }

    .dx-tabpanel .dx-tab {
        min-width: 70px;
    }
}

/* Large devices (desktops, 1024px and up) */
@media (min-width: 1025px) {
    /* Default styles apply */
}

/* Extra large devices (large desktops, 1280px and up) */
@media (min-width: 1281px) {
    /* Enhanced spacing for larger screens */
    .dx-popup-content {
        padding: 16px 24px;
    }
}

/* Print styles */
@media print {
    body {
        background-color: white !important;
        color: black !important;
    }

    .dx-drawer-panel-content,
    .layout-header,
    .content-footer {
        display: none !important;
    }

    .layout-body .content {
        width: 100% !important;
        margin: 0 !important;
    }
}