@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/roboto-400.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/roboto-500.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/roboto-700.ttf') format('truetype');
}

:root {
    --nav-mini-width: 56px;
    --dialog-width: 320px;
}

*,
::after,
::before {
    font-family: 'Roboto', Helvetica, sans-serif;
}

button:focus {
    outline: 0 !important;
}

/* ========================================
   SPLITTERS & LAYOUT
   ======================================== */
.compact-splitter .dxbl-splitter-pane-content {
    padding: 4px !important;
}

.compact-splitter .dxbl-splitter-separator {
    flex-basis: 6px !important;
}

/* ========================================
   NAVIGATION TREE
   ======================================== */
.navigation-tree {
    height: 100% !important;
}

.navigation-tree .dxbl-treeview-item {
    padding: 0 !important;
    border-radius: 0;
    margin: 0;
    min-height: unset !important;
    transition: background-color 0.15s ease;
}

.navigation-tree .dxbl-treeview-item-content {
    padding: 1px 4px !important;
    min-height: 20px !important;
}

.navigation-tree .dxbl-treeview-node {
    padding: 0 !important;
    margin: 0 !important;
}

.navigation-tree .dxbl-treeview-item:hover {
    background-color: rgba(0, 0, 0, 0.04);
}

.navigation-tree .dxbl-treeview-item-selected {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.08) !important;
}

.navigation-tree .nav-node-version {
    font-size: 0.75rem;
    line-height: 1;
    align-self: center;
}

.navigation-tree .mud-chip {
    margin: 0 !important;
}

/* ========================================
   TABLES
   ======================================== */
.value-streams-table .mud-table-container {
    overflow-y: auto !important;
}

.value-streams-table .mud-table-row:hover {
    background-color: rgba(0, 0, 0, 0.04) !important;
}

.value-streams-table .mud-table-row.mud-selected {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.08) !important;
}

.value-streams-table.mud-table-striped tbody tr:nth-of-type(odd) {
    background-color: transparent;
}

.value-streams-table > div:first-child > table > thead > tr > th:first-child {
    width: 32px;
}

/* ========================================
   VALUE STREAMS GRID (DxGrid)
   ======================================== */
.value-streams-grid {
    height: 100%;
}

.value-streams-grid .dxbl-grid-table {
    font-size: 0.875rem;
}

/* Striped rows - apply to cells */
.value-streams-grid .dxbl-grid-table tbody tr:nth-of-type(odd) td {
    background-color: rgba(0, 0, 0, 0.02);
}

/* Hover effect - apply to cells */
.value-streams-grid .dxbl-grid-table tbody tr:hover td {
    background-color: rgba(0, 0, 0, 0.04);
}

/* Dense padding for cells */
.value-streams-grid .dxbl-grid-table td,
.value-streams-grid .dxbl-grid-table th {
    padding: 2px 6px;
}

/* Edit cell padding */
.value-streams-grid .dxbl-grid-edit-cell {
    padding: 2px 4px;
}

/* Header styling */
.value-streams-grid .dxbl-grid-table th {
    font-weight: 500;
    background-color: var(--mud-palette-surface);
}

/* ========================================
   WORKPLACE GRID (DxGrid)
   ======================================== */
.workplace-grid {
    height: 100%;
}

.workplace-grid .dxbl-grid-table {
    font-size: 0.875rem;
}

/* Hover effect */
.workplace-grid .dxbl-grid-table tbody tr:hover td {
    background-color: rgba(0, 0, 0, 0.04);
}

/* Dense padding for cells - let DxGrid calculate row height for virtual scrolling */
.workplace-grid .dxbl-grid-table td,
.workplace-grid .dxbl-grid-table th {
    padding: 2px 6px;
}

/* Header styling */
.workplace-grid .dxbl-grid-table th {
    font-weight: 500;
    background-color: var(--mud-palette-surface);
}

/* Table layout utilities (from content.css) */
.tbl {
    display: table;
    width: 100%;
}

.tbl-row {
    display: table-row;
}

.tbl-col {
    display: table-cell;
    vertical-align: middle;
}

/* ========================================
   FORM INPUTS
   ======================================== */
.formula-input .mud-input-slot {
    padding: 0 !important;
    min-height: unset !important;
    font-size: 0.875rem !important;
}

.formula-input .mud-input-control {
    margin: 0 !important;
}

.formula-input .mud-input {
    margin: 0 !important;
}

.formula-input .mud-input-root {
    padding: 0 !important;
}

.formula-input input {
    padding: 4px 0 !important;
}

.alias-input {
    max-width: 100px;
}

.alias-input .mud-input-slot {
    padding: 2px 6px !important;
    font-size: 0.8rem !important;
}

.alias-input .mud-input-control {
    margin-top: 0 !important;
}

/* ========================================
   NAVIGATION DRAWER
   ======================================== */
.mud-drawer-content {
    overflow-x: hidden;
}

/* ========================================
   UTILITIES
   ======================================== */
.item-container {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.divider {
    margin: 12px 8px;
    border-color: rgba(0, 0, 0, 0.33);
}

.hi-folder {
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23212121'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.hi-plus {
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23212121'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 4.5v15m7.5-7.5h-15'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.hi-arrow-up-tray {
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23212121'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5m-13.5-9L12 3m0 0 4.5 4.5M12 3v13.5'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.hi-chart-bar {
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23212121'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.hi-chevron-down {
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23212121'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.hi-chevron-up {
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23212121'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m4.5 15.75 7.5-7.5 7.5 7.5'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.hi-pencil-square {
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23212121'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.hi-trash {
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23212121'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.hi-check {
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23212121'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m4.5 12.75 6 6 9-13.5'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.hi-star {
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23212121'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.hi-x-mark {
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23212121'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 18 18 6M6 6l12 12'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* ========================================
   OVERLAY DIALOG (for DevExpress compatibility)
   ======================================== */
.overlay-dialog {
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    border-radius: 4px;
}

.overlay-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.overlay-dialog-content {
    flex: 1;
    overflow: auto;
    padding: 24px;
}

.overlay-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 8px 24px 16px;
}