/**
 * SuraqHub Reference Data Management (RDM) Styling
 * Adaptive Dark/Light Theme for Tabulator 6.3.0 & Dictionary Views
 */

/* --- Master-Detail View Containers --- */
#dict-view-catalog,
#dict-view-editor {
    transition: opacity 0.2s ease-in-out;
}

/* Breadcrumb & Navigation */
.dict-breadcrumb-bar {
    background: var(--bg-card, #1e293b);
    border-bottom: 1px solid var(--border-color, #334155);
    padding: 12px 18px;
    border-radius: 10px 10px 0 0;
}

.dict-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 6px;
    transition: all 0.15s ease;
}

.dict-title-text {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-main, #f1f5f9);
    letter-spacing: -0.01em;
}

.dict-code-pill {
    background: rgba(59, 130, 246, 0.14);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.3);
    padding: 2px 8px;
    border-radius: 5px;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: monospace;
}

/* --- Status Badges (No Neon Yellow) --- */
.dict-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
    line-height: 1.4;
}

.dict-status-pill i {
    font-size: 0.85rem;
}

.dict-status-published {
    background: rgba(16, 185, 129, 0.16) !important;
    color: #34d399 !important;
    border: 1px solid rgba(16, 185, 129, 0.35) !important;
}

.dict-status-changed {
    background: rgba(56, 189, 248, 0.14) !important;
    color: #38bdf8 !important;
    border: 1px solid rgba(56, 189, 248, 0.35) !important;
}

.dict-status-draft {
    background: rgba(148, 163, 184, 0.14) !important;
    color: #cbd5e1 !important;
    border: 1px solid rgba(148, 163, 184, 0.3) !important;
}

.dict-status-dirty {
    background: rgba(244, 63, 94, 0.16) !important;
    color: #fda4af !important;
    border: 1px solid rgba(244, 63, 94, 0.35) !important;
    animation: dictPulse 2s infinite ease-in-out;
}

@keyframes dictPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.65; }
}

/* --- Toolbar Styling --- */
.dict-toolbar-bar {
    background: var(--bg-card, #1e293b);
    border-bottom: 1px solid var(--border-color, #334155);
    padding: 10px 16px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.dict-toolbar-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.dict-search-box {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 220px;
}

.dict-search-icon {
    position: absolute;
    left: 10px;
    font-size: 0.85rem;
    color: #64748b;
    pointer-events: none;
    z-index: 2;
}

.dict-search-input {
    background: var(--bg-body, #0f172a) !important;
    border: 1px solid var(--border-color, #334155) !important;
    color: var(--text-main, #f1f5f9) !important;
    border-radius: 6px !important;
    font-size: 0.82rem !important;
    height: 32px !important;
    width: 100% !important;
    padding-left: 32px !important;
    padding-right: 10px !important;
}

.dict-search-input:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25) !important;
}

/* --- Tabulator Custom Enterprise Dark Theme --- */
.tabulator {
    background-color: var(--bg-card, #1e293b) !important;
    border: 1px solid var(--border-color, #334155) !important;
    border-radius: 0 0 10px 10px;
    color: var(--text-main, #f1f5f9) !important;
    font-size: 0.88rem !important;
}

/* Header */
.tabulator .tabulator-header {
    background-color: var(--bg-body, #0f172a) !important;
    border-bottom: 2px solid var(--border-color, #334155) !important;
    color: var(--text-muted, #94a3b8) !important;
    font-weight: 600 !important;
}

.tabulator .tabulator-header .tabulator-col {
    background-color: var(--bg-body, #0f172a) !important;
    border-right: 1px solid rgba(148, 163, 184, 0.12) !important;
    color: var(--text-muted, #94a3b8) !important;
}

.tabulator .tabulator-header .tabulator-col .tabulator-col-content {
    padding: 8px 10px !important;
}

.tabulator .tabulator-header .tabulator-col .tabulator-col-title {
    font-size: 0.78rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: var(--text-main, #f1f5f9) !important;
}

/* Column Header Filters */
.tabulator .tabulator-header .tabulator-col .tabulator-header-filter input {
    background-color: var(--bg-card, #1e293b) !important;
    border: 1px solid var(--border-color, #475569) !important;
    border-radius: 5px !important;
    color: var(--text-main, #f1f5f9) !important;
    padding: 4px 8px !important;
    font-size: 0.78rem !important;
    height: 26px !important;
    margin-top: 4px !important;
    box-shadow: none !important;
    width: 100% !important;
}

.tabulator .tabulator-header .tabulator-col .tabulator-header-filter input:focus {
    border-color: #3b82f6 !important;
    outline: none !important;
}

/* Table Rows & Cells */
.tabulator .tabulator-tableholder .tabulator-table {
    background-color: transparent !important;
    color: var(--text-main, #f1f5f9) !important;
}

.tabulator-row {
    background-color: var(--bg-card, #1e293b) !important;
    color: var(--text-main, #f1f5f9) !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12) !important;
    min-height: 40px !important;
    transition: background-color 0.1s ease;
}

.tabulator-row.tabulator-row-even {
    background-color: #172234 !important;
}

.tabulator-row:hover {
    background-color: rgba(59, 130, 246, 0.12) !important;
}

.tabulator-row .tabulator-cell {
    color: var(--text-main, #f1f5f9) !important;
    border-right: 1px solid rgba(148, 163, 184, 0.08) !important;
    padding: 8px 12px !important;
    vertical-align: middle !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Editing active cell */
.tabulator-row .tabulator-cell.tabulator-editing {
    border: 2px solid #3b82f6 !important;
    padding: 0 !important;
    background-color: #0f172a !important;
}

.tabulator-row .tabulator-cell.tabulator-editing input:not([type="checkbox"]):not([type="radio"]) {
    background-color: #0f172a !important;
    color: #ffffff !important;
    padding: 6px 10px !important;
    border: none !important;
    outline: none !important;
    font-size: 0.88rem !important;
    width: 100% !important;
}

/* Active switch styling */
.dict-active-switch {
    width: 36px !important;
    height: 20px !important;
    background-color: #334155 !important;
    border-color: #475569 !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2394a3b8'/%3e%3c/svg%3e") !important;
    transition: background-position 0.15s ease-in-out, background-color 0.15s ease-in-out !important;
}

.dict-active-switch:checked {
    background-color: #2563eb !important;
    border-color: #2563eb !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
}

/* Row checkbox / tickCross icon */
.tabulator-cell svg,
.tabulator-cell i {
    font-size: 1rem;
}

/* Empty placeholder */
.tabulator .tabulator-tableholder .tabulator-placeholder .tabulator-placeholder-contents {
    color: var(--text-muted, #94a3b8) !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    padding: 40px 20px !important;
}

/* Footer / Pagination */
.tabulator .tabulator-footer {
    background-color: var(--bg-body, #0f172a) !important;
    border-top: 1px solid var(--border-color, #334155) !important;
    color: var(--text-muted, #94a3b8) !important;
    padding: 8px 16px !important;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
}

.tabulator .tabulator-footer .tabulator-page {
    background: var(--bg-card, #1e293b) !important;
    border: 1px solid var(--border-color, #475569) !important;
    color: var(--text-muted, #cbd5e1) !important;
    border-radius: 5px !important;
    padding: 4px 10px !important;
    margin: 0 2px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    transition: all 0.15s ease;
}

.tabulator .tabulator-footer .tabulator-page.active {
    background: #2563eb !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
}

.tabulator .tabulator-footer .tabulator-page:hover:not(:disabled) {
    background: #334155 !important;
    color: #ffffff !important;
}

.tabulator .tabulator-footer .tabulator-page:disabled {
    opacity: 0.4 !important;
    background: var(--bg-card, #1e293b) !important;
    color: #64748b !important;
}

.tabulator .tabulator-footer .tabulator-page-size {
    background: var(--bg-card, #1e293b) !important;
    border: 1px solid var(--border-color, #475569) !important;
    color: var(--text-main, #f1f5f9) !important;
    border-radius: 5px !important;
    padding: 3px 6px !important;
    font-size: 0.82rem !important;
}

/* Catalog Table Items */
.dict-item-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-main, #f1f5f9);
}

.dict-item-code {
    font-family: monospace;
    font-size: 0.8rem;
    color: #60a5fa;
    background: rgba(59, 130, 246, 0.1);
    padding: 1px 6px;
    border-radius: 4px;
}

/* --- Dictionary workspace v5 --- */
.dictionary-workspace,
#dict-view-editor {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}

.dictionary-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.dictionary-page-heading {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: .75rem;
}

.dictionary-page-icon,
.dictionary-empty-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 12%, transparent);
}

.dictionary-page-icon {
    width: 48px;
    height: 48px;
    border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border));
    border-radius: var(--radius);
    font-size: 1.1rem;
}

.dictionary-page-heading h2,
.dictionary-catalog-card-header h3 {
    margin: 0;
    color: var(--foreground);
    font-weight: 700;
    letter-spacing: -.02em;
}

.dictionary-page-heading h2 {
    font-size: 1.25rem;
}

.dictionary-page-heading p,
.dictionary-catalog-card-header p {
    margin: .2rem 0 0;
    color: var(--muted-foreground);
}

.dictionary-page-heading p {
    font-size: .875rem;
}

.dictionary-page-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: .5rem;
}

.dictionary-page-actions .btn {
    min-height: 40px;
}

.dictionary-refresh-button {
    width: 40px;
    padding-right: 0;
    padding-left: 0;
}

.dictionary-catalog-card,
#dict-view-editor > .card {
    overflow: hidden;
    border: 1px solid var(--border) !important;
    border-radius: calc(var(--radius) + 4px);
    background: var(--card);
    box-shadow: 0 12px 32px color-mix(in srgb, var(--foreground) 7%, transparent) !important;
}

.dictionary-catalog-card-header {
    display: flex;
    min-height: 68px;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .875rem 1rem;
    border-bottom: 1px solid var(--border);
}

.dictionary-catalog-card-header h3 {
    font-size: 1rem;
}

.dictionary-catalog-card-header p {
    font-size: .78rem;
}

.dictionary-catalog-count,
.dict-revision-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border));
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    color: var(--primary);
    font-size: .78rem;
    font-weight: 700;
    white-space: nowrap;
}

.dictionary-catalog-count {
    min-height: 30px;
    padding: .25rem .65rem;
}

.dict-revision-pill {
    min-width: 38px;
    min-height: 28px;
    padding: .2rem .55rem;
}

.dictionary-empty-state {
    display: flex;
    min-height: 260px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 2rem 1rem;
    color: var(--muted-foreground);
    text-align: center;
}

.dictionary-empty-icon {
    width: 56px;
    height: 56px;
    margin-bottom: .875rem;
    border-radius: 50%;
    font-size: 1.35rem;
}

.dictionary-empty-state strong {
    color: var(--foreground);
    font-size: 1rem;
}

.dictionary-empty-state p {
    max-width: 420px;
    margin: .35rem 0 1rem;
}

.dictionary-table-shell {
    overflow: auto;
    scrollbar-gutter: stable;
}

.dictionary-table-shell:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: -2px;
}

.dictionary-catalog-table {
    min-width: 880px;
    color: var(--foreground);
}

.dictionary-catalog-table thead th {
    padding: .75rem 1rem;
    border-top: 0;
    border-bottom: 1px solid var(--border);
    background: var(--muted);
    color: var(--muted-foreground);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .055em;
}

.dictionary-catalog-table tbody td {
    padding: .875rem 1rem;
    border-color: var(--border);
    background: var(--card);
    vertical-align: middle;
}

.dictionary-catalog-table tbody tr:hover td {
    background: color-mix(in srgb, var(--primary) 5%, var(--card));
}

/* Реестр справочников: фиксированный лейаут, чтобы колонки не перестраивались
   при смене статуса, даты синхронизации или языка интерфейса.
   Компактные ширины: статус — иконка с тултипом, прод-версия — пилюль в ячейке
   «Справочник», редкие действия — в меню «⋯». Колонка имени забирает остаток.
   Таблицу назначений (tab-assignments) с этим же базовым классом не трогаем. */
.dictionary-registry-table {
    min-width: 760px;
    table-layout: fixed;
}

.dictionary-registry-table thead th {
    white-space: nowrap;
}

.dictionary-registry-table thead th:nth-child(2) {
    width: 84px;
}

.dictionary-registry-table thead th:nth-child(3) {
    width: 170px;
}

.dictionary-registry-table thead th:nth-child(4) {
    width: 250px;
}

.dict-status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    font-size: .95rem;
}

.dict-revision-inline {
    margin-right: .4rem;
}

.dict-item-title {
    color: var(--foreground);
}

.dict-item-code {
    border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--border));
    background: color-mix(in srgb, var(--primary) 8%, transparent);
    color: var(--primary);
}

.dict-status-published {
    border-color: color-mix(in srgb, var(--chart-2) 38%, var(--border)) !important;
    background: color-mix(in srgb, var(--chart-2) 13%, transparent) !important;
    color: var(--chart-2) !important;
}

.dict-status-changed {
    border-color: color-mix(in srgb, var(--primary) 38%, var(--border)) !important;
    background: color-mix(in srgb, var(--primary) 12%, transparent) !important;
    color: var(--primary) !important;
}

.dict-status-draft {
    border-color: var(--border) !important;
    background: var(--muted) !important;
    color: var(--muted-foreground) !important;
}

.dict-breadcrumb-bar,
.dict-toolbar-bar,
.dict-editor-footer {
    border-color: var(--border);
    background: var(--card);
}

.dict-breadcrumb-bar {
    padding: .875rem 1rem;
    border-radius: 0;
}

.dict-title-text {
    color: var(--foreground);
}

.dict-code-pill {
    border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    color: var(--primary);
}

.dict-toolbar-bar {
    gap: .75rem;
    padding: .75rem 1rem;
}

.dict-search-box {
    width: min(260px, 100%);
}

.dict-search-icon {
    color: var(--muted-foreground);
}

.dict-search-input {
    min-height: 40px !important;
    border-color: var(--border) !important;
    border-radius: var(--radius) !important;
    background: var(--background) !important;
    color: var(--foreground) !important;
    font-size: .875rem !important;
}

.dict-search-input:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 24%, transparent) !important;
}

.dict-editor-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem 1rem;
    color: var(--muted-foreground);
    font-size: .8rem;
}

.dict-editor-footer #dict-total-rows-count {
    color: var(--foreground) !important;
}

@media (max-width: 767.98px) {
    .dictionary-page-header,
    .dictionary-page-actions,
    .dict-toolbar-bar,
    .dict-toolbar-group,
    .dict-editor-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .dictionary-page-actions,
    .dictionary-page-actions .btn,
    .dict-toolbar-group,
    .dict-toolbar-group .btn,
    .dict-search-box {
        width: 100%;
    }

    .dictionary-page-actions .btn,
    .dict-toolbar-group .btn,
    .dict-search-input {
        min-height: 48px !important;
    }

    .dict-search-input {
        font-size: 16px !important;
    }

    .dictionary-refresh-button {
        width: 100%;
    }

    .dictionary-catalog-card-header {
        align-items: flex-start;
    }

    .dictionary-table-shell {
        overflow: visible;
    }

    .dictionary-catalog-table {
        display: block;
        min-width: 0;
    }

    .dictionary-catalog-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }

    .dictionary-catalog-table tbody {
        display: grid;
        gap: .75rem;
        padding: .75rem;
    }

    .dictionary-catalog-table tbody tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        overflow: hidden;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        background: var(--card);
    }

    .dictionary-catalog-table tbody td {
        display: flex;
        min-width: 0;
        align-items: center;
        justify-content: space-between;
        gap: .75rem;
        padding: .75rem;
        border: 0;
        border-bottom: 1px solid var(--border);
        text-align: right !important;
    }

    .dictionary-catalog-table tbody td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        color: var(--muted-foreground);
        font-size: .7rem;
        font-weight: 700;
        letter-spacing: .045em;
        text-transform: uppercase;
    }

    .dictionary-catalog-table tbody td:first-child,
    .dictionary-catalog-table tbody td:nth-child(4),
    .dictionary-catalog-table tbody td:last-child {
        grid-column: 1 / -1;
    }

    .dictionary-catalog-table tbody td:first-child {
        display: block;
        text-align: left !important;
    }

    .dictionary-catalog-table tbody td:first-child::before {
        display: block;
        margin-bottom: .4rem;
    }

    .dictionary-catalog-table tbody td:last-child {
        border-bottom: 0;
    }

    .dictionary-catalog-table .btn-group {
        display: grid;
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .5rem;
    }

    .dictionary-catalog-table .btn-group .btn {
        min-height: 44px;
        border-radius: var(--radius) !important;
    }

    /* Действия реестра: компактная группа (Редактор + 🚀 + ⋯) в строку,
       меню ⋯ позиционируется абсолютно, а не ячейкой grid-раскладки */
    .dictionary-catalog-table .btn-group.dict-actions-group {
        display: inline-flex;
        grid-column: 1 / -1;
        justify-content: flex-end;
    }

    .dict-breadcrumb-bar > div:first-child {
        align-items: flex-start !important;
    }
}

.dictionary-page-icon,
.dictionary-empty-icon {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.dictionary-page-icon,
.dictionary-catalog-count,
.dict-revision-pill {
    border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
}

.dictionary-catalog-count,
.dict-revision-pill,
.dict-item-code {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--accent);
}

.dict-status-published {
    border-color: color-mix(in srgb, var(--success) 38%, var(--border)) !important;
    background: color-mix(in srgb, var(--success) 13%, transparent) !important;
    color: var(--success) !important;
}

.dict-status-changed {
    border-color: color-mix(in srgb, var(--accent) 38%, var(--border)) !important;
    background: color-mix(in srgb, var(--accent) 12%, transparent) !important;
    color: var(--accent) !important;
}

.dict-search-input:focus {
    border-color: var(--accent) !important;
}