/* =========================== */
/* MODERN TABLE COMPONENT */
/* =========================== */

/* CSS Variables (Design System) */
:root {
    --table_bg: #ffffff;
    --table_header_bg: #f9fafb;
    --table_row_hover: #f9fafb;
    --table_border: #e5e7eb;
    --table_border_hover: #d1d5db;
    --table_text: #111827;
    --table_text_secondary: #6b7280;
    --table_text_tertiary: #9ca3af;
    --table_primary: #7c3aed;
    --table_primary_light: rgba(124, 58, 237, 0.05);
    --table_shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --table_radius: 0.5rem;
    --table_transition: 200ms ease;
}

[data-theme="dark"] {
    --table_bg: #171717;
    --table_header_bg: #1f1f1f;
    --table_row_hover: #262626;
    --table_border: #262626;
    --table_border_hover: #404040;
    --table_text: #f5f5f5;
    --table_text_secondary: #a3a3a3;
    --table_text_tertiary: #737373;
    --table_primary_light: rgba(124, 58, 237, 0.1);
}

/* Modern Table */
.table_modern {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--table_bg);
    border: 1px solid var(--table_border);
    border-radius: var(--table_radius);
    overflow: hidden;
    box-shadow: var(--table_shadow);
}

/* Table Header */
.table_modern_header {
    background-color: var(--table_header_bg);
}

.table_modern_header_cell {
    padding: 0.75rem 1rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--table_text_secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--table_border);
    white-space: nowrap;
}

.table_modern_header_cell:first-child {
    padding-left: 1.5rem;
}

.table_modern_header_cell:last-child {
    padding-right: 1.5rem;
}

/* Table Body */
.table_modern_body {
    background-color: var(--table_bg);
}

/* Table Row */
.table_modern_row {
    border-bottom: 1px solid var(--table_border);
    transition: all var(--table_transition);
}

.table_modern_row:last-child {
    border-bottom: none;
}

.table_modern_row:hover {
    background-color: var(--table_row_hover);
}

/* Table Cell */
.table_modern_cell {
    padding: 1rem;
    font-size: 0.875rem;
    color: var(--table_text);
    vertical-align: middle;
}

.table_modern_cell:first-child {
    padding-left: 1.5rem;
}

.table_modern_cell:last-child {
    padding-right: 1.5rem;
}

/* Text Alignment */
.text_center {
    text-align: center !important;
}

.text_end {
    text-align: right !important;
}

.text_start {
    text-align: left !important;
}

/* Vertical Alignment */
.align_middle {
    vertical-align: middle !important;
}

.align_top {
    vertical-align: top !important;
}

.align_bottom {
    vertical-align: bottom !important;
}

/* Font Sizes */
.text_sm {
    font-size: 0.875rem;
}

.text_xs {
    font-size: 0.75rem;
}

.small {
    font-size: 0.875rem;
    color: var(--table_text_secondary);
}

.text_muted {
    color: var(--table_text_tertiary) !important;
}

/* Badge/Status Indicator */
.badge_modern {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 0.375rem;
    white-space: nowrap;
}

/* Table Link Tag (for clickable tags/labels) */
.table_link_tag {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--table_primary);
    background-color: var(--table_primary_light);
    border: 1px solid transparent;
    border-radius: 0.25rem;
    text-decoration: none;
    white-space: nowrap;
    transition: all var(--table_transition);
}

.table_link_tag:hover {
    background-color: var(--table_primary);
    color: white;
    border-color: var(--table_primary);
}

.badge_success {
    background-color: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.badge_danger {
    background-color: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.badge_warning {
    background-color: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.badge_info {
    background-color: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.badge_secondary {
    background-color: var(--table_header_bg);
    color: var(--table_text_secondary);
}

/* On/Off Status */
.status_indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
}

.status_indicator::before {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.status_on::before {
    background-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

.status_off::before {
    background-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

/* Table Actions */
.table_actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: flex-end;
}

.table_action_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--table_border);
    border-radius: 0.375rem;
    background-color: transparent;
    color: var(--table_text_secondary);
    cursor: pointer;
    transition: all var(--table_transition);
    text-decoration: none;
}

.table_action_btn:hover {
    background-color: var(--table_primary_light);
    border-color: var(--table_primary);
    color: var(--table_primary);
}

.table_action_btn i {
    font-size: 0.875rem;
}

/* Empty State */
.table_empty {
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--table_text_tertiary);
    font-size: 0.875rem;
}

.table_empty i {
    font-size: 2rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

/* Compact Size */
.table_compact .table_modern_header_cell {
    padding: 0.5rem 0.75rem;
}

.table_compact .table_modern_cell {
    padding: 0.75rem;
}

.table_compact .table_modern_cell:first-child {
    padding-left: 1rem;
}

.table_compact .table_modern_cell:last-child {
    padding-right: 1rem;
}

/* Striped Rows */
.table_striped .table_modern_row:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.02);
}

[data-theme="dark"] .table_striped .table_modern_row:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.02);
}

/* Responsive */
@media (max-width: 768px) {
    .table_modern_header_cell,
    .table_modern_cell {
        padding: 0.75rem;
    }

    .table_modern_header_cell:first-child,
    .table_modern_cell:first-child {
        padding-left: 1rem;
    }

    .table_modern_header_cell:last-child,
    .table_modern_cell:last-child {
        padding-right: 1rem;
    }

    .table_modern {
        font-size: 0.8125rem;
    }
}

/* Table Container (for overflow scroll) */
.table_container {
    width: 100%;
    overflow-x: auto;
    border-radius: var(--table_radius);
}

.table_container::-webkit-scrollbar {
    height: 8px;
}

.table_container::-webkit-scrollbar-track {
    background: var(--table_header_bg);
    border-radius: var(--table_radius);
}

.table_container::-webkit-scrollbar-thumb {
    background: var(--table_border);
    border-radius: var(--table_radius);
    transition: background var(--table_transition);
}

.table_container::-webkit-scrollbar-thumb:hover {
    background: var(--table_border_hover);
}

/* =========================== */
/* FORM ACTION BUTTONS */
/* =========================== */

/* Form Actions Container */
.form_actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: flex-end;
    padding: 1rem;
    margin-top: 1rem;
    border: 1px solid var(--table_border);
    border-radius: var(--table_radius);
    background-color: var(--table_bg);
}

/* Form Button Base */
.form_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    border: 1px solid var(--table_border);
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all var(--table_transition);
    text-decoration: none;
    white-space: nowrap;
}

.form_btn i {
    font-size: 0.875rem;
}

/* Success Button (Save) */
.form_btn_success {
    background-color: #10b981;
    border-color: #10b981;
    color: white;
}

.form_btn_success:hover {
    background-color: #059669;
    border-color: #059669;
    color: white;
}

/* Secondary Button (Close/Cancel) */
.form_btn_secondary {
    background-color: transparent;
    border-color: var(--table_border);
    color: var(--table_text_secondary);
}

.form_btn_secondary:hover {
    background-color: var(--table_header_bg);
    border-color: var(--table_border_hover);
    color: var(--table_text);
}

/* =========================== */
/* MODERN PAGINATION COMPONENT */
/* =========================== */

/* Pagination Container */
.pagination_modern {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 1rem 0;
    list-style: none;
    margin: 0;
}

/* Pagination Item */
.pagination_item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--table_text_secondary);
    background-color: transparent;
    border: 1px solid var(--table_border);
    border-radius: 0.375rem;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--table_transition);
}

.pagination_item:hover:not(.active):not(:disabled) {
    background-color: var(--table_hover_bg);
    border-color: var(--table_border_hover);
    color: var(--table_text);
}

/* Active State */
.pagination_item.active {
    background-color: var(--table_primary);
    border-color: var(--table_primary);
    color: white;
    cursor: default;
    font-weight: 600;
}

/* Disabled State */
.pagination_item:disabled,
.pagination_item.disabled {
    background-color: var(--table_header_bg);
    border-color: var(--table_border);
    color: var(--table_text_tertiary);
    cursor: not-allowed;
    opacity: 0.6;
}

/* Record Count Badge */
.pagination_count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 0.75rem;
    margin-left: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--table_text_secondary);
    background-color: var(--table_header_bg);
    border: 1px solid var(--table_border);
    border-radius: 0.375rem;
}

/* Navigation Arrows */
.pagination_item.nav {
    font-size: 1rem;
}

.pagination_item.nav i {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* First/Last Page Links */
.pagination_item.first,
.pagination_item.last {
    font-weight: 600;
}

/* Responsive */
@media (max-width: 768px) {
    .pagination_modern {
        gap: 0.125rem;
        padding: 0.75rem 0;
    }

    .pagination_item {
        min-width: 32px;
        height: 32px;
        font-size: 0.8125rem;
        padding: 0 0.375rem;
    }

    .pagination_count {
        min-width: 32px;
        height: 32px;
        padding: 0 0.5rem;
        font-size: 0.6875rem;
    }
}

/* =========================== */
/* FILTER HEADER COMPONENT */
/* =========================== */

/* Filter Header */
.filter_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    gap: 1rem;
}

.filter_title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--table_text);
}

.filter_actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Filter Footer (buttons in offcanvas) */
.filter_footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

/* Responsive */
@media (max-width: 768px) {
    .filter_header {
        flex-wrap: wrap;
    }

    .filter_actions {
        width: 100%;
        justify-content: flex-end;
    }
}

/* =========================== */
/* FORM INPUT COMPONENT */
/* =========================== */

/* Form Group Container */
.form_group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

/* Form Label */
.form_label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--table_text);
    margin: 0;
}

/* Form Input Base */
.form_input {
    width: 100%;
    padding: 0.625rem 0.75rem;
    font-size: 0.875rem;
    color: var(--table_text);
    background-color: var(--table_bg);
    border: 1px solid var(--table_border);
    border-radius: 0.375rem;
    transition: all var(--table_transition);
    outline: none;
}

.form_input:focus {
    border-color: var(--table_primary);
    box-shadow: 0 0 0 3px var(--table_primary_light);
}

.form_input:disabled {
    background-color: var(--table_header_bg);
    color: var(--table_text_tertiary);
    cursor: not-allowed;
    opacity: 0.7;
}

.form_input:readonly {
    background-color: var(--table_header_bg);
    color: var(--table_text_secondary);
}

.form_input::placeholder {
    color: var(--table_text_tertiary);
}

/* Small Size Variant */
.form_input_sm {
    padding: 0.5rem 0.625rem;
    font-size: 0.8125rem;
}

/* Form Textarea */
.form_textarea {
    width: 100%;
    padding: 0.625rem 0.75rem;
    font-size: 0.875rem;
    color: var(--table_text);
    background-color: var(--table_bg);
    border: 1px solid var(--table_border);
    border-radius: 0.375rem;
    transition: all var(--table_transition);
    outline: none;
    resize: vertical;
    min-height: 100px;
    font-family: inherit;
    line-height: 1.5;
}

.form_textarea:focus {
    border-color: var(--table_primary);
    box-shadow: 0 0 0 3px var(--table_primary_light);
}

.form_textarea:disabled {
    background-color: var(--table_header_bg);
    color: var(--table_text_tertiary);
    cursor: not-allowed;
    opacity: 0.7;
    resize: none;
}

.form_textarea:readonly {
    background-color: var(--table_header_bg);
    color: var(--table_text_secondary);
    resize: none;
}

.form_textarea::placeholder {
    color: var(--table_text_tertiary);
}

/* Segmented Control (Checkbox as Radio Group) */
.form_segmented {
    display: inline-flex;
    background-color: var(--table_header_bg);
    border: 1px solid var(--table_border);
    border-radius: 0.375rem;
    padding: 0.125rem;
    gap: 0.125rem;
}

.form_segmented_item {
    position: relative;
}

.form_segmented_input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.form_segmented_label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.375rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--table_text_secondary);
    background-color: transparent;
    border: none;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: all var(--table_transition);
    white-space: nowrap;
    user-select: none;
}

.form_segmented_label i {
    font-size: 0.8125rem;
}

.form_segmented_label:hover {
    color: var(--table_text);
    background-color: rgba(0, 0, 0, 0.03);
}

[data-theme="dark"] .form_segmented_label:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Checked State */
.form_segmented_input:checked + .form_segmented_label {
    background-color: var(--table_primary);
    color: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.form_segmented_input:checked + .form_segmented_label:hover {
    background-color: #6d28d9;
}

/* Disabled State */
.form_segmented_input:disabled + .form_segmented_label {
    opacity: 0.5;
    cursor: not-allowed;
    color: var(--table_text_tertiary);
}

.form_segmented_input:disabled + .form_segmented_label:hover {
    background-color: transparent;
    color: var(--table_text_tertiary);
}

.form_segmented_input:disabled:checked + .form_segmented_label {
    background-color: var(--table_text_tertiary);
    color: white;
}

/* Readonly State (визуально как disabled, но можно скопировать значение) */
.form_segmented_input:readonly + .form_segmented_label,
.form_segmented_input[readonly] + .form_segmented_label {
    cursor: default;
    opacity: 0.7;
}

/* Focus State (для accessibility) */
.form_segmented_input:focus-visible + .form_segmented_label {
    outline: 2px solid var(--table_primary);
    outline-offset: 2px;
}

/* Responsive */
@media (max-width: 768px) {
    .form_segmented {
        width: 100%;
    }

    .form_segmented_item {
        flex: 1;
    }

    .form_segmented_label {
        width: 100%;
        padding: 0.375rem 0.625rem;
        font-size: 0.8125rem;
    }
}

/* Input Range Container (from-to) */
.form_input_range {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.form_input_range .form_input {
    flex: 1;
}

/* Form Help Text */
.form_help {
    font-size: 0.75rem;
    color: var(--table_text_secondary);
    margin: 0;
    line-height: 1.4;
}

/* Quick Links for Date Inputs */
.form_quick_links {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.form_quick_links a {
    font-size: 0.75rem;
    color: var(--table_primary);
    text-decoration: none;
    transition: color var(--table_transition);
    cursor: pointer;
}

.form_quick_links a:hover {
    color: #6d28d9;
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 768px) {
    .form_input {
        font-size: 0.8125rem;
        padding: 0.5625rem 0.675rem;
    }

    .form_input_range {
        flex-direction: column;
        gap: 0.75rem;
    }

    .form_input_range .form_input {
        width: 100%;
    }
}

/* =========================== */
/* LOGIN FORM COMPONENT */
/* =========================== */

/* Login Container */
.login_container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: var(--table_header_bg);
    padding: 1rem;
}

/* Login Card */
.login_card {
    width: 100%;
    max-width: 420px;
    background-color: var(--table_bg);
    border: 1px solid var(--table_border);
    border-radius: var(--table_radius);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    padding: 2.5rem;
}

/* Login Header */
.login_header {
    text-align: center;
    margin-bottom: 2rem;
}

.login_header h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--table_text);
    margin: 0;
}

.login_header p {
    font-size: 0.875rem;
    color: var(--table_text_secondary);
    margin: 0.5rem 0 0 0;
}

/* Login Form */
.login_form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Form Group */
.login_form_group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.login_form_group label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--table_text);
}

/* Input Group */
.login_input_group {
    display: flex;
    align-items: center;
    border: 1px solid var(--table_border);
    border-radius: 0.375rem;
    background-color: var(--table_bg);
    transition: all var(--table_transition);
}

.login_input_group:focus-within {
    border-color: var(--table_primary);
    box-shadow: 0 0 0 3px var(--table_primary_light);
}

.login_input_icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    color: var(--table_text_secondary);
    font-size: 0.875rem;
}

.login_input_group input {
    flex: 1;
    border: none;
    outline: none;
    padding: 0.625rem 0.75rem;
    font-size: 0.875rem;
    color: var(--table_text);
    background-color: transparent;
}

.login_input_group input::placeholder {
    color: var(--table_text_tertiary);
}

/* Login Button */
.login_btn {
    width: 100%;
    padding: 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all var(--table_transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.login_btn_primary {
    background-color: var(--table_primary);
    color: white;
}

.login_btn_primary:hover {
    background-color: #6d28d9;
}

/* Divider */
.login_divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.5rem 0;
}

.login_divider::before,
.login_divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background-color: var(--table_border);
}

.login_divider span {
    font-size: 0.75rem;
    color: var(--table_text_secondary);
    text-transform: uppercase;
    font-weight: 500;
}

/* Telegram Login Container */
.login_telegram {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Responsive */
@media (max-width: 480px) {
    .login_card {
        padding: 1.5rem;
    }

    .login_header h2 {
        font-size: 1.25rem;
    }
}

/* =========================== */
/* DROPDOWN SELECT (DDDW) COMPONENT */
/* =========================== */

/* Видимый блок с выбранными элементами */
.dddw_selected {
    position: relative;
    background-color: var(--table_bg);
    cursor: pointer;
}

.dddw_selected:hover {
    border-color: var(--table_border_hover);
}

.dddw_selected:focus-within {
    border-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

/* Контейнер с badge выбранных элементов */
.dddw_selected [data-type="selected"] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 500;
    background-color: #7c3aed;
    color: #ffffff;
    border-radius: 0.375rem;
    margin-right: 0.375rem;
}

.dddw_selected [data-type="selected"] .btn-close {
    font-size: 0.7rem;
    margin-left: 0.25rem;
    color: #ffffff;
    opacity: 0.8;
}

.dddw_selected [data-type="selected"] .btn-close:hover {
    opacity: 1;
}

/* Стрелка dropdown */
.dddw_angle {
    color: var(--table_text_secondary);
    font-size: 0.875rem;
    transition: transform 200ms ease;
}

/* Выпадающий контейнер */
.dddw_container {
    background-color: var(--table_bg);
    border: 1px solid var(--table_border);
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    min-width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 1060;
}

[data-theme="dark"] .dddw_container {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
}

/* Поле поиска */
.dddw_container > div:first-child {
    padding: var(--spacing_3);
    border-bottom: 1px solid var(--table_border);
    flex-shrink: 0;
}

.dddw_container .form_input {
    margin-bottom: 0;
}

/* Список опций с скроллом */
.dddw_list {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: var(--spacing_2);
    margin: 0;
    list-style: none;
    max-height: calc(10 * 36px);
    overflow-y: auto;
    overflow-x: hidden;
}

/* Стилизация скролла */
.dddw_list::-webkit-scrollbar {
    width: 6px;
}

.dddw_list::-webkit-scrollbar-track {
    background: transparent;
}

.dddw_list::-webkit-scrollbar-thumb {
    background-color: var(--table_border);
    border-radius: 3px;
    transition: background-color 200ms ease;
}

.dddw_list::-webkit-scrollbar-thumb:hover {
    background-color: var(--table_border_hover);
}

/* Элементы списка */
.dddw_option {
    padding: 0 var(--spacing_3);
    height: 36px;
    min-height: 36px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    font-size: var(--font_size_sm);
    color: var(--table_text);
    text-decoration: none;
    cursor: pointer;
    border-radius: var(--radius_md);
    transition: all 150ms ease;
    border: none;
    background-color: transparent;
    text-align: left;
    width: 100%;
    font-family: inherit;
    margin: 2px 0;
    box-sizing: border-box;
}

.dddw_option:hover {
    background-color: #7c3aed;
    color: #ffffff;
    font-weight: 500;
}

.dddw_option.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: transparent;
    color: var(--table_text_tertiary);
    pointer-events: none;
}

.dddw_option.disabled:hover {
    background-color: transparent;
    color: var(--table_text_tertiary);
    font-weight: normal;
}

/* =========================== */
/* CATEGORY TREE COMPONENT */
/* =========================== */

.tree-container {
    max-height: 600px;
    overflow-y: auto;
    border: 1px solid var(--table_border);
    border-radius: var(--table_radius);
    background-color: var(--table_bg);
    padding: 0.5rem;
}

.tree-container::-webkit-scrollbar {
    width: 6px;
}

.tree-container::-webkit-scrollbar-track {
    background: transparent;
}

.tree-container::-webkit-scrollbar-thumb {
    background-color: var(--table_border);
    border-radius: 3px;
}

.tree-container::-webkit-scrollbar-thumb:hover {
    background-color: var(--table_border_hover);
}

.tree-node {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    border-radius: var(--radius_md);
    transition: all var(--table_transition);
    user-select: none;
}

.tree-node:hover {
    background-color: var(--table_row_hover);
}

.tree-node.has-children {
    cursor: pointer;
}

.tree-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    flex-shrink: 0;
    color: var(--table_text_secondary);
}

.tree-icon i {
    font-size: 0.75rem;
    transition: transform 200ms ease;
}

.tree-title {
    flex: 1;
    font-size: 0.875rem;
    color: var(--table_text);
    word-break: break-word;
}

.tree-children {
    margin-left: 0.75rem;
    border-left: 1px solid var(--table_border);
    padding-left: 0;
}

/* Highlight for found nodes */
.tree-node-highlighted > .tree-title {
    background-color: rgba(124, 58, 237, 0.1);
    font-weight: 600;
    color: #7c3aed;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius_sm);
}

/* =========================== */
/* FILTER OFFCANVAS COMPONENT */
/* =========================== */

/* Offcanvas Backdrop */
.filter_offcanvas_backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1040;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--table_transition), visibility var(--table_transition);
    backdrop-filter: blur(4px);
}

[data-theme="dark"] .filter_offcanvas_backdrop {
    background-color: rgba(0, 0, 0, 0.7);
}

.filter_offcanvas_backdrop.show {
    opacity: 1;
    visibility: visible;
}

/* Offcanvas Panel */
.filter_offcanvas {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    min-height: 220px;
    max-height: 80vh;
    background-color: var(--table_bg);
    border-bottom: 1px solid var(--table_border);
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.15), 0 4px 6px -2px rgba(0, 0, 0, 0.08);
    z-index: 1050;
    transform: translateY(-100%);
    transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}

[data-theme="dark"] .filter_offcanvas {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
}

.filter_offcanvas.show {
    transform: translateY(0);
}

/* Offcanvas Header */
.filter_offcanvas_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--table_border);
    flex-shrink: 0;
}

.filter_offcanvas_title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--table_text);
    margin: 0;
}

/* Offcanvas Close Button */
.filter_offcanvas_close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--table_border);
    border-radius: 0.375rem;
    background-color: transparent;
    color: var(--table_text_secondary);
    cursor: pointer;
    transition: all var(--table_transition);
    font-size: 1rem;
    padding: 0;
}

.filter_offcanvas_close:hover {
    background-color: var(--table_header_bg);
    border-color: var(--table_border_hover);
    color: var(--table_text);
}

/* Offcanvas Body */
.filter_offcanvas_body {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}

/* When dropdown is open, allow overflow */
.filter_offcanvas_body:has(.dddw_container:not(.d-none)) {
    overflow: visible;
}

.filter_offcanvas_body::-webkit-scrollbar {
    width: 6px;
}

.filter_offcanvas_body::-webkit-scrollbar-track {
    background: transparent;
}

.filter_offcanvas_body::-webkit-scrollbar-thumb {
    background-color: var(--table_border);
    border-radius: 3px;
}

.filter_offcanvas_body::-webkit-scrollbar-thumb:hover {
    background-color: var(--table_border_hover);
}

/* Responsive */
@media (max-width: 768px) {
    .filter_offcanvas {
        max-height: 90vh;
    }

    .filter_offcanvas_header {
        padding: 1rem 1.25rem;
    }

    .filter_offcanvas_body {
        padding: 1.25rem;
    }
}

/* =========================== */
/* TABLE IMAGE COMPONENT */
/* =========================== */

/* Image Thumbnail in Table Cell */
.table_image {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 0.375rem;
    border: 1px solid var(--table_border);
    background-color: var(--table_header_bg);
    transition: all var(--table_transition);
    cursor: pointer;
}

.table_image:hover {
    border-color: var(--table_primary);
    box-shadow: 0 0 0 2px var(--table_primary_light);
    transform: scale(1.05);
}

/* Large Image Variant */
.table_image_lg {
    width: 120px;
    height: 120px;
}

/* Small Image Variant */
.table_image_sm {
    width: 40px;
    height: 40px;
}

/* Image Placeholder (when no image) */
.table_image_placeholder {
    width: 80px;
    height: 80px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    border: 1px dashed var(--table_border);
    background-color: var(--table_header_bg);
    color: var(--table_text_tertiary);
    font-size: 1.25rem;
}

/* Image Loading State */
.table_image_loading {
    width: 80px;
    height: 80px;
    display: inline-block;
    border-radius: 0.375rem;
    background: linear-gradient(
        90deg,
        var(--table_header_bg) 25%,
        var(--table_row_hover) 50%,
        var(--table_header_bg) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Image with Caption */
.table_image_wrapper {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.table_image_caption {
    font-size: 0.75rem;
    color: var(--table_text_secondary);
    line-height: 1.4;
}

/* Responsive */
@media (max-width: 768px) {
    .table_image,
    .table_image_placeholder,
    .table_image_loading {
        width: 64px;
        height: 64px;
    }

    .table_image_placeholder {
        font-size: 1rem;
    }

    .table_image_lg {
        width: 96px;
        height: 96px;
    }

    .table_image_sm {
        width: 32px;
        height: 32px;
    }
}

/* Image Upload/Preview Container */
.table_image_preview {
    position: relative;
    display: inline-block;
    padding: 0.5rem;
    max-width: 220px;
}

.table_image_preview img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0.5rem;
    border: 1px solid var(--table_border);
    background-color: var(--table_header_bg);
}

/* Delete Button Overlay */
.table_image_delete {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 0.375rem;
    background-color: rgba(239, 68, 68, 0.9);
    color: white;
    cursor: pointer;
    transition: all var(--table_transition);
    font-size: 0.875rem;
    backdrop-filter: blur(4px);
}

.table_image_delete:hover {
    background-color: #dc2626;
    border-color: #dc2626;
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

.table_image_delete i {
    font-size: 0.875rem;
}

/* Image Info (date, size, etc.) */
.table_image_info {
    font-size: 0.75rem;
    color: var(--table_text_secondary);
    margin-top: 0.5rem;
}

/* Responsive */
@media (max-width: 768px) {
    .table_image_preview {
        max-width: 180px;
        padding: 0.375rem;
    }

    .table_image_delete {
        width: 28px;
        height: 28px;
        bottom: 0.75rem;
        right: 0.75rem;
    }
}

/* =========================== */
/* IMAGE SIZE VARIANTS */
/* =========================== */

/* Preview Size Variants (for details page, single image) */
.table_image_preview_sm {
    max-width: 150px;
}

.table_image_preview_md {
    max-width: 220px;
}

.table_image_preview_lg {
    max-width: 320px;
}

.table_image_preview_xl {
    max-width: 480px;
}

/* =========================== */
/* IMAGE GALLERY (multiple images) */
/* =========================== */

/* Gallery Container */
.table_image_gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1rem;
    margin: 1rem 0;
}

/* Gallery Item */
.table_image_gallery_item {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--table_border);
    border-radius: 0.5rem;
    background-color: var(--table_bg);
    overflow: hidden;
    transition: all var(--table_transition);
}

.table_image_gallery_item:hover {
    border-color: var(--table_primary);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.15);
    transform: translateY(-2px);
}

/* Gallery Image */
.table_image_gallery_img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    background-color: var(--table_header_bg);
    cursor: pointer;
}

/* Gallery Delete Button */
.table_image_gallery_delete {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 0.375rem;
    background-color: rgba(239, 68, 68, 0.9);
    color: white;
    cursor: pointer;
    transition: all var(--table_transition);
    font-size: 0.75rem;
    backdrop-filter: blur(4px);
    opacity: 0;
}

.table_image_gallery_item:hover .table_image_gallery_delete {
    opacity: 1;
}

.table_image_gallery_delete:hover {
    background-color: #dc2626;
    border-color: #dc2626;
    transform: scale(1.1);
}

/* Gallery Info */
.table_image_gallery_info {
    padding: 0.75rem;
    font-size: 0.75rem;
    color: var(--table_text_secondary);
    border-top: 1px solid var(--table_border);
}

/* Gallery Size Variants */
.table_image_gallery_sm {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

.table_image_gallery_sm .table_image_gallery_img {
    height: 120px;
}

.table_image_gallery_lg {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.table_image_gallery_lg .table_image_gallery_img {
    height: 200px;
}

.table_image_gallery_xl {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.table_image_gallery_xl .table_image_gallery_img {
    height: 240px;
}

/* Responsive Gallery */
@media (max-width: 768px) {
    .table_image_gallery {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 0.75rem;
    }

    .table_image_gallery_img {
        height: 120px;
    }

    .table_image_gallery_item {
        border-radius: 0.375rem;
    }

    .table_image_gallery_info {
        padding: 0.5rem;
        font-size: 0.6875rem;
    }

    .table_image_gallery_delete {
        width: 24px;
        height: 24px;
        font-size: 0.6875rem;
    }
}

/* =========================== */
/* IMAGE UPLOAD DROPZONE */
/* =========================== */

/* Dropzone Container */
.table_image_dropzone {
    border: 2px dashed var(--table_border);
    border-radius: 0.5rem;
    padding: 2rem;
    text-align: center;
    background-color: var(--table_header_bg);
    cursor: pointer;
    transition: all var(--table_transition);
}

.table_image_dropzone:hover {
    border-color: var(--table_primary);
    background-color: var(--table_primary_light);
}

.table_image_dropzone.dragover {
    border-color: var(--table_primary);
    background-color: var(--table_primary_light);
    border-style: solid;
}

.table_image_dropzone_icon {
    font-size: 2rem;
    color: var(--table_text_tertiary);
    margin-bottom: 0.75rem;
}

.table_image_dropzone_text {
    font-size: 0.875rem;
    color: var(--table_text_secondary);
    margin-bottom: 0.5rem;
}

.table_image_dropzone_hint {
    font-size: 0.75rem;
    color: var(--table_text_tertiary);
}

/* Responsive Dropzone */
@media (max-width: 768px) {
    .table_image_dropzone {
        padding: 1.5rem;
    }

    .table_image_dropzone_icon {
        font-size: 1.5rem;
    }

    .table_image_dropzone_text {
        font-size: 0.8125rem;
    }
}

/* =========================== */
/* COLOR CARD GRID COMPONENT */
/* =========================== */

/* Color Cards Grid Container */
.color_card_grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

/* Color Card Button */
.color_card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 1.75rem 0.75rem 0.5rem 0.75rem;
    background-color: var(--table_bg);
    border: 1px solid var(--table_border);
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all var(--table_transition);
    text-decoration: none;
    font-family: inherit;
}

.color_card:hover {
    border-color: var(--table_primary);
    box-shadow: 0 4px 6px rgba(124, 58, 237, 0.15);
    transform: translateY(-2px);
}

.color_card.active {
    background-color: var(--table_primary);
    border-color: var(--table_primary);
    color: white;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}

/* Color Card Icon */
.color_card_icon {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    font-size: 1.25rem;
    opacity: 0.8;
}

.color_card.active .color_card_icon {
    opacity: 1;
}

/* Color Card Title (Russian name) */
.color_card_title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--table_text);
    text-align: left;
    margin-bottom: 0.25rem;
    line-height: 1.3;
    padding-right: 0.5rem;
}

.color_card.active .color_card_title {
    color: white;
}

/* Color Card Subtitle (English name) */
.color_card_subtitle {
    font-size: 0.75rem;
    color: var(--table_text_secondary);
    text-align: left;
    margin-bottom: 0.5rem;
    line-height: 1.2;
    padding-right: 0.5rem;
}

.color_card.active .color_card_subtitle {
    color: rgba(255, 255, 255, 0.85);
}

/* Color Card Badge */
.color_card_badge {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 0.375rem;
    white-space: nowrap;
}

/* Color Card Image Indicator (Triangle in top-left) */
.color_card.has-images::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 22px 22px 0 0;
    border-color: var(--table_primary) transparent transparent transparent;
    border-top-left-radius: 0.5rem;
}

.color_card.active.has-images::before {
    border-color: rgba(255, 255, 255, 0.3) transparent transparent transparent;
}

/* Responsive */
@media (max-width: 1024px) {
    .color_card_grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    }
}

@media (max-width: 768px) {
    .color_card_grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 0.75rem;
        margin-bottom: 0.75rem;
    }

    .color_card {
        padding: 1.5rem 0.625rem 0.5rem 0.625rem;
    }

    .color_card_title {
        font-size: 0.8125rem;
        margin-bottom: 0.2rem;
    }

    .color_card_subtitle {
        font-size: 0.7rem;
        margin-bottom: 0.375rem;
    }

    .color_card_badge {
        top: 0.375rem;
        right: 0.375rem;
        padding: 0.2rem 0.5rem;
        font-size: 0.7rem;
    }
}

/* =========================== */
/* IMAGE GALLERY COMPONENT */
/* =========================== */

/* Gallery Container */
.image_gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}

/* Gallery Item Wrapper */
.image_gallery_item {
    position: relative;
    display: inline-block;
    max-width: 120px;
    border: 1px solid var(--table_border);
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    cursor: grab;
    transition: all var(--table_transition);
}

.image_gallery_item:hover {
    border-color: var(--table_primary);
    box-shadow: 0 2px 6px rgba(124, 58, 237, 0.15);
}

/* Gallery Image */
.image_gallery_img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0.375rem;
    transition: opacity var(--table_transition);
}

.image_gallery_img.disabled {
    opacity: 0.25;
}

/* Gallery Buttons Base */
.image_gallery_btn {
    position: absolute;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--table_transition);
    font-size: 0.875rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.image_gallery_btn:hover {
    transform: scale(1.1);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
}

/* Enable/Disable Button (Yellow/Orange - Top Left) */
.image_gallery_btn_enable {
    top: 0.375rem;
    left: 0.375rem;
    background-color: #ffc107;
    color: #333;
}

.image_gallery_btn_enable:hover {
    background-color: #ffb300;
}

/* Delete Button (Red - Top Right) */
.image_gallery_btn_delete {
    top: 0.375rem;
    right: 0.375rem;
    background-color: #dc3545;
    color: white;
}

.image_gallery_btn_delete:hover {
    background-color: #c82333;
}

/* Responsive */
@media (max-width: 1024px) {
    .image_gallery_item {
        max-width: 110px;
    }

    .image_gallery_btn {
        width: 26px;
        height: 26px;
        font-size: 0.8125rem;
    }
}

@media (max-width: 768px) {
    .image_gallery {
        gap: 0.75rem;
        margin-bottom: 0.75rem;
    }

    .image_gallery_item {
        max-width: 100px;
    }

    .image_gallery_btn {
        width: 24px;
        height: 24px;
        font-size: 0.75rem;
        top: 0.25rem;
    }

    .image_gallery_btn_enable {
        left: 0.25rem;
    }

    .image_gallery_btn_delete {
        right: 0.25rem;
    }
}

/* =========================== */
/* MODERN TABS COMPONENT */
/* =========================== */

/* Tabs Navigation Container */
.tab_modern_nav {
    display: flex;
    gap: 1rem;
    border-bottom: 1px solid var(--table_border);
    margin-bottom: 1rem;
}

/* Tab Link */
.tab_modern_link {
    padding: 0.75rem 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--table_text_secondary);
    background-color: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all var(--table_transition);
    text-decoration: none;
    white-space: nowrap;
    font-family: inherit;
}

.tab_modern_link:hover:not(.active) {
    color: var(--table_text);
}

.tab_modern_link.active {
    color: var(--table_primary);
    border-bottom-color: var(--table_primary);
    font-weight: 600;
}

/* Tabs Content Container */
.tab_modern_content {
    width: 100%;
}

/* Tab Pane */
.tab_modern_pane {
    display: none;
}

.tab_modern_pane.active {
    display: block;
}

/* Responsive */
@media (max-width: 768px) {
    .tab_modern_nav {
        gap: 0.75rem;
        margin-bottom: 0.75rem;
    }

    .tab_modern_link {
        padding: 0.625rem 0.375rem;
        font-size: 0.8125rem;
    }
}