/* /Components/AddNoteDialog.razor.rz.scp.css */
.note-overlay[b-jjsvwpy4a5] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(44, 44, 44, 0.4);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 60px;
}

.note-dialog[b-jjsvwpy4a5] {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: 440px;
    max-width: 94vw;
    max-height: calc(100vh - 100px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.note-dialog__header[b-jjsvwpy4a5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid var(--border-light);
}

.note-dialog__title[b-jjsvwpy4a5] {
    font-size: var(--text-base);
    font-weight: var(--font-bold);
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.note-dialog__title i[b-jjsvwpy4a5] {
    color: var(--accent);
    font-size: var(--text-base);
}

.note-dialog__close[b-jjsvwpy4a5] {
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: var(--text-base);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}

.note-dialog__close:hover[b-jjsvwpy4a5] {
    background: var(--danger-bg);
    color: var(--danger);
}

.note-dialog__body[b-jjsvwpy4a5] {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
}

.note-dialog__error[b-jjsvwpy4a5] {
    background: var(--danger-bg);
    color: var(--danger);
    border: 1px solid rgba(192, 57, 43, 0.2);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    font-size: var(--text-base);
    display: flex;
    align-items: center;
    gap: 8px;
}

.note-dialog__field[b-jjsvwpy4a5] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.note-dialog__field label[b-jjsvwpy4a5] {
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    color: var(--text);
}

.note-dialog__req[b-jjsvwpy4a5] {
    color: var(--danger);
}

.note-dialog__field textarea[b-jjsvwpy4a5] {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    font-family: var(--font-family);
    font-size: var(--text-base);
    color: var(--text);
    background: var(--surface);
    outline: none;
    transition: border-color 0.15s;
    width: 100%;
    resize: vertical;
    min-height: 120px;
    line-height: 1.5;
}

.note-dialog__field textarea:focus[b-jjsvwpy4a5] {
    border-color: var(--accent);
}

.note-dialog__footer[b-jjsvwpy4a5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    border-top: 1px solid var(--border-light);
}

.note-dialog__attachment[b-jjsvwpy4a5] {
    color: var(--text-light);
    font-size: var(--text-base);
    cursor: pointer;
    transition: color 0.15s;
}

.note-dialog__attachment:hover[b-jjsvwpy4a5] {
    color: var(--text-muted);
}

.note-dialog__btn--save[b-jjsvwpy4a5] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 24px;
    border-radius: var(--radius-full);
    font-family: var(--font-family);
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    cursor: pointer;
    border: 1px solid var(--accent);
    background: var(--accent);
    color: var(--white);
    transition: background 0.15s, opacity 0.15s;
    white-space: nowrap;
}

.note-dialog__btn--save:hover:not(:disabled)[b-jjsvwpy4a5] {
    background: var(--accent-hover);
}

.note-dialog__btn--save:disabled[b-jjsvwpy4a5] {
    opacity: 0.5;
    cursor: not-allowed;
}
/* /Components/AddTaskDialog.razor.rz.scp.css */
.task-overlay[b-h6iosxilt1] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(44, 44, 44, 0.4);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 60px;
}

.task-dialog[b-h6iosxilt1] {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: 440px;
    max-width: 94vw;
    max-height: calc(100vh - 100px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ── Header ── */

.task-dialog__header[b-h6iosxilt1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #3b4a50;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.task-dialog__header-left[b-h6iosxilt1] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.task-dialog__grip[b-h6iosxilt1] {
    color: rgba(255, 255, 255, 0.35);
    font-size: var(--text-xs);
}

.task-dialog__icon[b-h6iosxilt1] {
    color: var(--white);
    font-size: var(--text-sm);
}

.task-dialog__title[b-h6iosxilt1] {
    color: var(--white);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
}

.task-dialog__close[b-h6iosxilt1] {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    color: rgba(255, 255, 255, 0.6);
    font-size: var(--text-base);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}

.task-dialog__close:hover[b-h6iosxilt1] {
    background: rgba(255, 255, 255, 0.12);
    color: var(--white);
}

/* ── Body ── */

.task-dialog__body[b-h6iosxilt1] {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
}

.task-dialog__error[b-h6iosxilt1] {
    background: var(--danger-bg);
    color: var(--danger);
    border: 1px solid rgba(192, 57, 43, 0.2);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    font-size: var(--text-base);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── Fields ── */

.task-dialog__field[b-h6iosxilt1] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.task-dialog__field label[b-h6iosxilt1] {
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    color: var(--text);
}

.task-dialog__req[b-h6iosxilt1] {
    color: var(--danger);
}

.task-dialog__field textarea[b-h6iosxilt1] {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 9px 10px;
    font-family: var(--font-family);
    font-size: var(--text-base);
    color: var(--text);
    background: var(--surface);
    outline: none;
    transition: border-color 0.15s;
    width: 100%;
    resize: vertical;
    min-height: 80px;
    line-height: 1.5;
}

.task-dialog__field textarea:focus[b-h6iosxilt1] {
    border-color: var(--accent);
}

/* ── Status toggle ── */

.task-dialog__toggle[b-h6iosxilt1] {
    display: flex;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.task-dialog__toggle-btn[b-h6iosxilt1] {
    flex: 1;
    padding: 9px 0;
    font-family: var(--font-family);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    cursor: pointer;
    border: none;
    background: var(--surface);
    color: var(--text);
    transition: background 0.15s, color 0.15s;
}

.task-dialog__toggle-btn--active[b-h6iosxilt1] {
    background: var(--accent);
    color: var(--white);
}

.task-dialog__toggle-btn:not(.task-dialog__toggle-btn--active):hover[b-h6iosxilt1] {
    background: var(--surface-hover);
}

/* ── Footer ── */

.task-dialog__footer[b-h6iosxilt1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    border-top: 1px solid var(--border-light);
    background: var(--surface-alt);
}

.task-dialog__footer-actions[b-h6iosxilt1] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.task-dialog__btn[b-h6iosxilt1] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 22px;
    border-radius: var(--radius-full);
    font-family: var(--font-family);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, opacity 0.15s, color 0.15s;
}

.task-dialog__btn--cancel[b-h6iosxilt1] {
    border: none;
    background: transparent;
    color: var(--text-muted);
}

.task-dialog__btn--cancel:hover[b-h6iosxilt1] {
    color: var(--text);
}

.task-dialog__btn--save[b-h6iosxilt1] {
    border: 1px solid var(--accent);
    background: var(--accent);
    color: var(--white);
}

.task-dialog__btn--save:hover:not(:disabled)[b-h6iosxilt1] {
    background: var(--accent-hover);
}

.task-dialog__btn--save:disabled[b-h6iosxilt1] {
    opacity: 0.5;
    cursor: not-allowed;
}
/* /Components/CaseSection.razor.rz.scp.css */
.case-section[b-ud5qhpsrup] {
    background: var(--surface);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
}

.case-section--collapsed[b-ud5qhpsrup] {
    overflow: hidden;
}

.case-section--expanded[b-ud5qhpsrup] {
    overflow: visible;
}

.case-section + .case-section[b-ud5qhpsrup] {
    margin-top: 8px;
}

/* --- Header --- */

.case-section__header[b-ud5qhpsrup] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    cursor: pointer;
    user-select: none;
    font-weight: var(--font-semibold);
    font-size: var(--text-base);
    color: var(--text);
}

.case-section__header:hover[b-ud5qhpsrup] {
    background: var(--surface-hover);
}

.case-section__icon[b-ud5qhpsrup] {
    font-size: var(--text-base);
    color: var(--text-muted);
}

.case-section__title[b-ud5qhpsrup] {
    white-space: nowrap;
}

.case-section__spacer[b-ud5qhpsrup] {
    flex: 1;
}

.case-section__chevron[b-ud5qhpsrup] {
    font-size: var(--text-base);
    color: var(--text-light);
    transition: transform 0.2s;
}

/* --- Body --- */

.case-section__body[b-ud5qhpsrup] {
    padding: 0 16px 16px;
    font-size: var(--text-base);
    color: var(--text);
    line-height: 1.6;
}

.case-section__body p + p[b-ud5qhpsrup] {
    margin-top: 10px;
}

.case-section__coming-soon[b-ud5qhpsrup] { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; font-size: var(--text-xs); font-weight: var(--font-medium); color: var(--info); background: var(--gray-200); padding: 2px 8px; border-radius: var(--radius-full); }
.case-section__coming-soon i[b-ud5qhpsrup] { font-size: var(--text-xs); }

/* /Components/CaseSplitPanel.razor.rz.scp.css */
/* ── Container for responsive stacking ── */

.case-split-container[b-kx8xacp25s] {
    container-type: inline-size;
    display: flex;
    flex: 1;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.case-split[b-kx8xacp25s] {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.case-split--dragging[b-kx8xacp25s] {
    cursor: col-resize;
}

/* Prevent pointer events on iframes / embedded content while dragging */
.case-split--dragging .case-split__pane[b-kx8xacp25s] {
    pointer-events: none;
}

.case-split__pane[b-kx8xacp25s] {
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
}

.case-split__left[b-kx8xacp25s] {
    flex-shrink: 0;
    flex-grow: 0;
}

.case-split__center[b-kx8xacp25s] {
    flex: 1 1 0;
    min-width: 260px;
}

.case-split__right[b-kx8xacp25s] {
    flex-shrink: 0;
}

/* --- Splitter handle --- */

.case-split__handle[b-kx8xacp25s] {
    flex: 0 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: col-resize;
    background: transparent;
    position: relative;
    z-index: 2;
    margin: 10px 5px 10px 4px;
}

.case-split__handle-bar[b-kx8xacp25s] {
    width: 2px;
    height: 100%;
    border-radius: 2px;
    background: var(--tertiary);
    opacity: 0.4;
    transition: background 0.15s, opacity 0.15s;
}

.case-split__handle:hover .case-split__handle-bar[b-kx8xacp25s],
.case-split--dragging .case-split__handle-bar[b-kx8xacp25s] {
    background: var(--tertiary);
    opacity: 1;
}

/* ── Stacked layout when narrow ── */

@container (max-width: 650px) {
    .case-split[b-kx8xacp25s] {
        flex-direction: column;
        overflow-y: auto;
    }

    .case-split__pane[b-kx8xacp25s] {
        height: auto;
        overflow-y: visible;
    }

    .case-split__left[b-kx8xacp25s] {
        flex-basis: auto !important;
    }

    .case-split__handle--main[b-kx8xacp25s] {
        display: none;
    }

    .case-split__center[b-kx8xacp25s] {
        min-width: 0;
        flex: 0 0 auto;
    }
}
/* /Components/CreateTicketDialog.razor.rz.scp.css */
.create-ticket-overlay[b-hwa3ytfypc] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(44, 44, 44, 0.4);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 60px;
}

.create-ticket[b-hwa3ytfypc] {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: 520px;
    max-width: 94vw;
    max-height: calc(100vh - 100px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.create-ticket__header[b-hwa3ytfypc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid var(--border-light);
    background: var(--primary);
    color: var(--white);
}

.create-ticket__title[b-hwa3ytfypc] {
    font-size: var(--text-base);
    font-weight: var(--font-bold);
    /*color: var(--text);*/
    display: flex;
    align-items: center;
    gap: 8px;
}

.create-ticket__title i[b-hwa3ytfypc] {
    color: var(--white);
    font-size: var(--text-base);
    display: none;
}

.create-ticket__close[b-hwa3ytfypc] {
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: var(--text-base);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}

.create-ticket__close:hover[b-hwa3ytfypc] {
    background: var(--danger-bg);
    color: var(--danger);
}

.create-ticket__body[b-hwa3ytfypc] {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
}

.create-ticket__error[b-hwa3ytfypc] {
    background: var(--danger-bg);
    color: var(--danger);
    border: 1px solid rgba(192, 57, 43, 0.2);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    font-size: var(--text-base);
    display: flex;
    align-items: center;
    gap: 8px;
}

.create-ticket__row[b-hwa3ytfypc] {
    display: flex;
    gap: 12px;
}

.create-ticket__row .create-ticket__field[b-hwa3ytfypc] {
    flex: 1;
}

.create-ticket__field[b-hwa3ytfypc] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.create-ticket__field label[b-hwa3ytfypc] {
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    color: var(--text);
}

.create-ticket__req[b-hwa3ytfypc] {
    color: var(--danger);
}

.create-ticket__field select[b-hwa3ytfypc],
.create-ticket__field textarea[b-hwa3ytfypc] {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    font-family: var(--font-family);
    font-size: var(--text-base);
    color: var(--text);
    background: var(--surface);
    outline: none;
    transition: border-color 0.15s;
    width: 100%;
}

.create-ticket__field select:focus[b-hwa3ytfypc],
.create-ticket__field textarea:focus[b-hwa3ytfypc] {
    border-color: var(--accent);
}

.create-ticket__field textarea[b-hwa3ytfypc] {
    resize: vertical;
    min-height: 70px;
    line-height: 1.5;
}

.create-ticket__footer[b-hwa3ytfypc] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 24px;
    border-top: 1px solid var(--border-light);
    background: var(--primary);
}

.create-ticket__btn[b-hwa3ytfypc] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: var(--radius-full);
    font-family: var(--font-family);
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    cursor: pointer;
    border: 1px solid;
    transition: background 0.15s, opacity 0.15s;
    white-space: nowrap;
}

.create-ticket__btn:disabled[b-hwa3ytfypc] {
    opacity: 0.6;
    cursor: not-allowed;
}

.create-ticket__btn--cancel[b-hwa3ytfypc] {
    background: transparent;
    color: var(--white); 
    border-color: transparent;
}

.create-ticket__btn--cancel:hover[b-hwa3ytfypc] {
    /*background: var(--secondary-hover);*/
    color: var(--white);
    border: 1px solid var(--white);
}

.create-ticket__btn--create[b-hwa3ytfypc] {
    background: var(--secondary);
    color: var(--primary);    
    /*border-color: var(--accent);*/
}

.create-ticket__btn--create:hover:not(:disabled)[b-hwa3ytfypc] {
    background: var(--secondary-hover);
}

.create-ticket__btn--create i[b-hwa3ytfypc] {
    font-size: var(--text-base);
    display: none;
}
/* /Components/DataGrid/DataGrid.razor.rz.scp.css */
/* ============================================
   DataGrid — Scoped Styles
   ============================================ */

/* --- Container --- */
.dg-container[b-ba7o2vbtyu] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: transparent;
    border-radius: 0;
    margin: 0;
    padding: 0;
}

/* --- Toolbar --- */
.dg-toolbar[b-ba7o2vbtyu] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 0px solid var(--border);
    flex-shrink: 0;
}

.dg-search[b-ba7o2vbtyu] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--white);
    border: 1px solid var(--text-muted);
    border-radius: var(--radius-full);
    padding: 2px 3px 2px 12px;
    min-width: 280px;
    transition: border-color 0.15s ease;
    min-height: 2.4rem;

    position: relative;
    padding-right: 90px
}

.dg-search:focus-within[b-ba7o2vbtyu] {
  border-color: var(--secondary);
  box-shadow: 0 0 0 3px var(--secondary);
}

.dg-search-icon[b-ba7o2vbtyu] {
    color: var(--text-muted);
    font-size: var(--text-base);
    flex-shrink: 0;
}

.dg-search input[b-ba7o2vbtyu] {
    border: none;
    background: transparent;
    outline: none;
    font-size: var(--text-base);
    font-family: var(--font-family);
    color: var(--text);
    width: 100%;
}

.dg-search input[b-ba7o2vbtyu]::placeholder {
    color: var(--text-light);
}

.dg-search-clear[b-ba7o2vbtyu] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: var(--text-muted);
    font-size: var(--text-sm);
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    transition: background 0.15s, color 0.15s;

    position: absolute;
    right: 76px;
    top: 50%;
    transform: translateY(-50%);
    
}

.dg-search-clear:hover[b-ba7o2vbtyu] {
    background: var(--surface-hover);
    color: var(--text);
}

.dg-search-apply[b-ba7o2vbtyu] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 16px;
    border: none;
    border-radius: var(--radius-full);
    background: var(--secondary);
    color: var(--primary);
    font-family: var(--font-family);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.15s;

    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    
}

.dg-search-apply:hover[b-ba7o2vbtyu] {
    background: var(--secondary-cell-hover);
}

.dg-count[b-ba7o2vbtyu] {
    font-size: var(--text-base);
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.dg-toolbar-spacer[b-ba7o2vbtyu] {
    display: none;
}

.dg-toolbar-actions[b-ba7o2vbtyu] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.dg-toolbar-btn[b-ba7o2vbtyu] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--text-muted);
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--text-muted);
    font-family: var(--font-family);
    font-size: var(--text-base);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.dg-toolbar-btn:hover[b-ba7o2vbtyu] {
    background: var(--surface-hover);
    color: var(--text);
}

.dg-toolbar-btn.active[b-ba7o2vbtyu] {
    background: transparent;
    border-color: var(--accent);
    color: var(--accent);
}

.dg-badge[b-ba7o2vbtyu] {
    background: var(--accent);
    color: var(--white);
    font-size: var(--text-base);
    padding: 1px 6px;
    border-radius: 10px;
    font-weight: var(--font-normal);
    line-height: 1.4;
}

/* ============================================
   Save Personal Filters
   ============================================ */
.dg-save-wrapper[b-ba7o2vbtyu] {
    position: relative;
}

.dg-save-btn[b-ba7o2vbtyu] {
    gap: 6px;
}

.dg-save-chevron[b-ba7o2vbtyu] {
    font-size: var(--text-base);
    opacity: 0.6;
    margin-left: 2px;
}

.dg-save-backdrop[b-ba7o2vbtyu] {
    position: fixed;
    inset: 0;
    z-index: 99;
}

.dg-save-panel[b-ba7o2vbtyu] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 100;
    width: 260px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 2px;    
}

.dg-save-search[b-ba7o2vbtyu] {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}

.dg-save-search-icon[b-ba7o2vbtyu] {
    color: var(--text-light);
    font-size: var(--text-base);
    flex-shrink: 0;
}

.dg-save-search input[b-ba7o2vbtyu] {
    border: none;
    background: transparent;
    outline: none;
    font-size: var(--text-base);
    font-family: var(--font-family);
    color: var(--text);
    width: 100%;
}

.dg-save-search input[b-ba7o2vbtyu]::placeholder {
    color: var(--text-light);
}

.dg-save-list[b-ba7o2vbtyu] {
    display: flex;
    flex-direction: column;
    max-height: 280px;
    overflow-y: auto;
    padding: 4px;
}

.dg-save-item[b-ba7o2vbtyu] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    font-size: var(--text-base);
    color: var(--text);
    cursor: pointer;
    transition: background 0.1s ease;
}

.dg-save-item:hover[b-ba7o2vbtyu] {
    background: var(--surface-hover);
}

.dg-save-item.active[b-ba7o2vbtyu] {
    background: var(--accent-muted, #6b9e95);
    color: var(--white);
}

.dg-save-item-icon[b-ba7o2vbtyu] {
    font-size: var(--text-base);
    width: 18px;
    text-align: center;
    flex-shrink: 0;
    opacity: 0.7;
}

.dg-save-item.active .dg-qf-item-icon[b-ba7o2vbtyu] {
    opacity: 1;
}

/* ============================================
   Personal Filters
   ============================================ */
.dg-sf-wrapper[b-ba7o2vbtyu] {
    position: relative;
}

.dg-sf-btn[b-ba7o2vbtyu] {
    gap: 6px;
}

.dg-sf-chevron[b-ba7o2vbtyu] {
    font-size: var(--text-base);
    opacity: 0.6;
    margin-left: 2px;
}

.dg-sf-backdrop[b-ba7o2vbtyu] {
    position: fixed;
    inset: 0;
    z-index: 99;
}

.dg-sf-panel[b-ba7o2vbtyu] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 100;
    width: 260px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 2px;    
}

.dg-sf-search[b-ba7o2vbtyu] {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}

.dg-sf-search-icon[b-ba7o2vbtyu] {
    color: var(--text-light);
    font-size: var(--text-base);
    flex-shrink: 0;
}

.dg-sf-search input[b-ba7o2vbtyu] {
    border: none;
    background: transparent;
    outline: none;
    font-size: var(--text-base);
    font-family: var(--font-family);
    color: var(--text);
    width: 100%;
}

.dg-sf-search input[b-ba7o2vbtyu]::placeholder {
    color: var(--text-light);
}

.dg-sf-list[b-ba7o2vbtyu] {
    display: flex;
    flex-direction: column;
    max-height: 280px;
    overflow-y: auto;
    padding: 4px;
}

.dg-sf-item[b-ba7o2vbtyu] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    font-size: var(--text-base);
    color: var(--text);
    cursor: pointer;
    transition: background 0.1s ease;
}

.dg-sf-item:hover[b-ba7o2vbtyu] {
    background: var(--surface-hover);
}

.dg-sf-item.active[b-ba7o2vbtyu] {
    background: var(--accent-muted, #6b9e95);
    color: var(--white);
}

.dg-sf-item-icon[b-ba7o2vbtyu] {
    font-size: var(--text-base);
    width: 18px;
    text-align: center;
    flex-shrink: 0;
    opacity: 0.7;
}

.dg-sf-item.active .dg-qf-item-icon[b-ba7o2vbtyu] {
    opacity: 1;
}

/* ============================================
   Quick Filters
   ============================================ */

.dg-qf-wrapper[b-ba7o2vbtyu] {
    position: relative;
}

.dg-qf-btn[b-ba7o2vbtyu] {
    gap: 6px;
}

.dg-qf-chevron[b-ba7o2vbtyu] {
    font-size: var(--text-base);
    opacity: 0.6;
    margin-left: 2px;
}

.dg-qf-backdrop[b-ba7o2vbtyu] {
    position: fixed;
    inset: 0;
    z-index: 99;
}

.dg-qf-panel[b-ba7o2vbtyu] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 100;
    width: 260px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.dg-qf-search[b-ba7o2vbtyu] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}

.dg-qf-search-icon[b-ba7o2vbtyu] {
    color: var(--text-light);
    font-size: var(--text-base);
    flex-shrink: 0;
}

.dg-qf-search input[b-ba7o2vbtyu] {
    border: none;
    background: transparent;
    outline: none;
    font-size: var(--text-base);
    font-family: var(--font-family);
    color: var(--text);
    width: 100%;
}

.dg-qf-search input[b-ba7o2vbtyu]::placeholder {
    color: var(--text-light);
}

.dg-qf-list[b-ba7o2vbtyu] {
    display: flex;
    flex-direction: column;
    max-height: 280px;
    overflow-y: auto;
    padding: 4px 0;
}

.dg-qf-item[b-ba7o2vbtyu] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    font-size: var(--text-base);
    color: var(--text);
    cursor: pointer;
    transition: background 0.1s ease;
}

.dg-qf-item:hover[b-ba7o2vbtyu] {
    background: var(--surface-hover);
}

.dg-qf-item.active[b-ba7o2vbtyu] {
    background: var(--accent-muted, #6b9e95);
    color: var(--white);
}

.dg-qf-item-icon[b-ba7o2vbtyu] {
    font-size: var(--text-base);
    width: 18px;
    text-align: center;
    flex-shrink: 0;
    opacity: 0.7;
}

.dg-qf-item.active .dg-qf-item-icon[b-ba7o2vbtyu] {
    opacity: 1;
}

/* --- Grid Layout --- */
.dg-grid[b-ba7o2vbtyu] {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

/* --- Header --- */
.dg-header[b-ba7o2vbtyu] {
    display: grid;
    flex-shrink: 0;
    border-bottom: 1px solid var(--tertiary);
    background: var(--surface);
}

.dg-header-cell[b-ba7o2vbtyu] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 12px 12px;
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    color: var(--text);
    cursor: pointer;
    user-select: none;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    transition: background 0.1s ease;
}

.dg-header-cell:hover[b-ba7o2vbtyu] {
    background: var(--white);
}

.dg-header-cell.sorted[b-ba7o2vbtyu] {
    color: var(--accent);
}

.dg-header-cell.drag-over[b-ba7o2vbtyu] {
    background: var(--accent-bg);
    box-shadow: inset 2px 0 0 var(--accent);
}

.dg-header-text[b-ba7o2vbtyu] {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Sort Indicator --- */
.dg-sort-indicator[b-ba7o2vbtyu] {
    font-size: var(--text-base);
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.dg-sort-inactive[b-ba7o2vbtyu] {
    opacity: 0.2;
}

.dg-header-cell:hover .dg-sort-inactive[b-ba7o2vbtyu] {
    opacity: 0.45;
}

/* --- Resize Handle --- */
.dg-resize-handle[b-ba7o2vbtyu] {
    position: absolute;
    right: 0;
    top: 4px;
    bottom: 4px;
    width: 5px;
    cursor: col-resize;
    border-radius: 2px;
    z-index: 2;
    transition: background 0.1s ease;
}

.dg-resize-handle:hover[b-ba7o2vbtyu] {
    background: var(--accent);
    opacity: 0.4;
}

/* --- Body --- */
.dg-body[b-ba7o2vbtyu] {
    flex: 1;
    overflow-y: auto;
    overflow-x: auto;
    min-height: 0;
}

/* --- Row --- */
.dg-row[b-ba7o2vbtyu] {
    display: grid;
    border-bottom: 1px solid var(--border-light);
    cursor: pointer;
    transition: background 0.08s ease;
    background: var(--surface);
}

.dg-row--alt[b-ba7o2vbtyu] {
    background: #f2f4f4;
}

.dg-row:hover[b-ba7o2vbtyu] {
    background: var(--secondary-hover);
}

/* --- Cell --- */
.dg-cell[b-ba7o2vbtyu] {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    font-size: var(--text-base);
    overflow: hidden;
    min-width: 0;
    white-space: nowrap;
}

.dg-cell-text[b-ba7o2vbtyu] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Empty State --- */
.dg-empty[b-ba7o2vbtyu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    color: var(--text-muted);
    gap: 12px;
}

.dg-empty i[b-ba7o2vbtyu] {
    font-size: var(--text-3xl);
    opacity: 0.3;
}

.dg-empty p[b-ba7o2vbtyu] {
    font-size: var(--text-base);
    margin: 0;
}

/* ============================================
   Sort Panel
   ============================================ */

.dg-sort-wrapper[b-ba7o2vbtyu] {
    position: relative;
}

.dg-sort-backdrop[b-ba7o2vbtyu] {
    position: fixed;
    inset: 0;
    z-index: 99;
}

.dg-sort-panel[b-ba7o2vbtyu] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 100;
    width: 420px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
}

.dg-sort-panel-header[b-ba7o2vbtyu] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-light);
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    color: var(--text);
}

.dg-sort-grip[b-ba7o2vbtyu] {
    color: var(--text-light);
    font-size: var(--text-base);
}

.dg-sort-panel-close[b-ba7o2vbtyu] {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
    font-size: var(--text-base);
}

.dg-sort-panel-close:hover[b-ba7o2vbtyu] {
    background: var(--surface-hover);
    color: var(--text);
}

.dg-sort-panel-body[b-ba7o2vbtyu] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 16px;
    max-height: 260px;
    overflow-y: auto;
}

.dg-sort-row[b-ba7o2vbtyu] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dg-sort-row-label[b-ba7o2vbtyu] {
    width: 56px;
    flex-shrink: 0;
    font-size: var(--text-base);
    color: var(--text-muted);
    text-align: right;
}

.dg-sort-select[b-ba7o2vbtyu] {
    flex: 1;
    min-width: 0;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font-family: var(--font-family);
    font-size: var(--text-base);
    outline: none;
    cursor: pointer;
    appearance: auto;
}

.dg-sort-select:focus[b-ba7o2vbtyu] {
    border-color: var(--accent);
}

.dg-sort-dir-group[b-ba7o2vbtyu] {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.dg-sort-dir[b-ba7o2vbtyu] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-size: var(--text-base);
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    transition: all 0.1s ease;
}

.dg-sort-dir input[type="radio"][b-ba7o2vbtyu] {
    accent-color: var(--accent);
    width: 12px;
    height: 12px;
    margin: 0;
    cursor: pointer;
}

.dg-sort-dir.active[b-ba7o2vbtyu] {
    color: var(--text);
    font-weight: var(--font-medium);
}

.dg-sort-row-delete[b-ba7o2vbtyu] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--text-light);
    cursor: pointer;
    border-radius: var(--radius-sm);
    font-size: var(--text-base);
    flex-shrink: 0;
}

.dg-sort-row-delete:hover[b-ba7o2vbtyu] {
    background: var(--danger-bg);
    color: var(--danger);
}

.dg-sort-panel-footer[b-ba7o2vbtyu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-top: 1px solid var(--border-light);
}

.dg-sort-add[b-ba7o2vbtyu] {
    display: flex;
    align-items: center;
    gap: 6px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-family: var(--font-family);
    font-size: var(--text-base);
    cursor: pointer;
    padding: 4px 0;
}

.dg-sort-add:hover[b-ba7o2vbtyu] {
    color: var(--accent);
}

.dg-sort-add i[b-ba7o2vbtyu] {
    font-size: var(--text-base);
}

.dg-sort-apply[b-ba7o2vbtyu] {
    padding: 6px 20px;
    border: none;
    border-radius: var(--radius-md);
    background: var(--accent);
    color: var(--white);
    font-family: var(--font-family);
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    cursor: pointer;
    transition: background 0.15s ease;
}

.dg-sort-apply:hover[b-ba7o2vbtyu] {
    background: var(--accent-hover);
}

/* ============================================
   Filter Panel
   ============================================ */

.dg-filter-wrapper[b-ba7o2vbtyu] {
    position: relative;
}

.dg-filter-backdrop[b-ba7o2vbtyu] {
    position: fixed;
    inset: 0;
    z-index: 99;
}

.dg-filter-panel[b-ba7o2vbtyu] {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    width: 520px;
    height: 380px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    display: flex;
    overflow: hidden;
}

/* --- Left pane: column list --- */
.dg-filter-left[b-ba7o2vbtyu] {
    width: 160px;
    flex-shrink: 0;
    border-right: 1px solid var(--border-light);
    overflow-y: auto;
    padding: 8px 0;
}

.dg-filter-col-item[b-ba7o2vbtyu] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: var(--text-base);
    color: var(--text);
    cursor: pointer;
    transition: all 0.1s ease;
    position: relative;
}

.dg-filter-col-item:hover[b-ba7o2vbtyu] {
    background: var(--surface-hover);
}

.dg-filter-col-item.active[b-ba7o2vbtyu] {
    background: var(--accent-bg);
    color: var(--accent);
    font-weight: var(--font-semibold);
    border-left: 3px solid var(--accent);
    padding-left: 13px;
}

.dg-filter-col-item.has-filter[b-ba7o2vbtyu] {
    font-weight: var(--font-semibold);
}

.dg-filter-col-dot[b-ba7o2vbtyu] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
    margin-left: auto;
}

/* --- Right pane: values --- */
.dg-filter-right[b-ba7o2vbtyu] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dg-filter-search[b-ba7o2vbtyu] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}

.dg-filter-search-icon[b-ba7o2vbtyu] {
    color: var(--text-light);
    font-size: var(--text-base);
    flex-shrink: 0;
}

.dg-filter-search input[b-ba7o2vbtyu] {
    border: none;
    background: transparent;
    outline: none;
    font-size: var(--text-base);
    font-family: var(--font-family);
    color: var(--text);
    width: 100%;
}

.dg-filter-search input[b-ba7o2vbtyu]::placeholder {
    color: var(--text-light);
}

/* --- Value checkboxes --- */
.dg-filter-values[b-ba7o2vbtyu] {
    flex: 1;
    overflow-y: auto;
    padding: 6px 0;
}

.dg-filter-value-row[b-ba7o2vbtyu] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
    cursor: pointer;
    transition: background 0.08s ease;
    font-size: var(--text-base);
    color: var(--text);
}

.dg-filter-value-row:hover[b-ba7o2vbtyu] {
    background: var(--surface-hover);
}

.dg-filter-value-row input[type="checkbox"][b-ba7o2vbtyu] {
    accent-color: var(--accent);
    width: 15px;
    height: 15px;
    margin: 0;
    cursor: pointer;
    flex-shrink: 0;
}

.dg-filter-value-text[b-ba7o2vbtyu] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Footer --- */
.dg-filter-footer[b-ba7o2vbtyu] {
    display: flex;
    align-items: center;
    padding: 8px 14px;
    border-top: 1px solid var(--border-light);
    gap: 0;
    flex-shrink: 0;
}

.dg-filter-footer-btn[b-ba7o2vbtyu] {
    border: none;
    background: transparent;
    font-family: var(--font-family);
    font-size: var(--text-base);
    color: var(--text-light);
    cursor: pointer;
    padding: 4px 8px;
    transition: color 0.1s ease;
}

.dg-filter-footer-btn:hover[b-ba7o2vbtyu] {
    color: var(--text);
}

.dg-filter-footer-btn.select-all[b-ba7o2vbtyu] {
    margin-left: auto;
    color: var(--text-muted);
}

.dg-filter-footer-btn.select-all:hover[b-ba7o2vbtyu] {
    color: var(--accent);
}

/* ============================================
   Date Filter
   ============================================ */

.dg-date-filter[b-ba7o2vbtyu] {
    flex: 1;
    padding: 14px;
    overflow-y: auto;
}

.dg-date-label[b-ba7o2vbtyu] {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text);
    margin-bottom: 10px;
}

.dg-date-presets[b-ba7o2vbtyu] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 16px;
}

.dg-date-preset[b-ba7o2vbtyu] {
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text);
    font-family: var(--font-family);
    font-size: var(--text-base);
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
}

.dg-date-preset:hover[b-ba7o2vbtyu] {
    border-color: var(--text-muted);
    background: var(--surface-hover);
}

.dg-date-preset.active[b-ba7o2vbtyu] {
    background: var(--text);
    color: var(--surface);
    border-color: var(--text);
}

.dg-date-preset--full[b-ba7o2vbtyu] {
    grid-column: 1 / -1;
}

.dg-date-custom[b-ba7o2vbtyu] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dg-date-field[b-ba7o2vbtyu] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dg-date-field-label[b-ba7o2vbtyu] {
    font-size: var(--text-base);
    color: var(--text-muted);
}

.dg-date-input[b-ba7o2vbtyu] {
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font-family: var(--font-family);
    font-size: var(--text-base);
    outline: none;
    width: 100%;
}

.dg-date-input:focus[b-ba7o2vbtyu] {
    border-color: var(--accent);
}

/* ============================================
   Active Filter Chips
   ============================================ */

.dg-active-filters[b-ba7o2vbtyu] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 16px;
    border-bottom: 0px solid var(--border-light);
    background: transparent;
    flex-shrink: 0;
}

.dg-filter-chip[b-ba7o2vbtyu] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 3px 2px 8px;
    border-radius: var(--radius-full);
    background: var(--secondary);
    color: var(--primary);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    white-space: nowrap;
    line-height: 1.3;
}

.dg-filter-chip__label[b-ba7o2vbtyu] {
    color: var(--tertiary);
    
}

.dg-filter-chip__value[b-ba7o2vbtyu] {
    color: var(--primary);    
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}

.dg-filter-chip__remove[b-ba7o2vbtyu] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: none;
    background: none;
    color: var(--gray-400);
    cursor: pointer;
    border-radius: 50%;
    font-size: var(--text-xs);
    padding: 0;
    margin-left: 2px;
    transition: color 0.15s, background 0.15s;
}

.dg-filter-chip__remove:hover[b-ba7o2vbtyu] {
    background: var(--secondary-cell-hover);
    color: var(--danger);
}

.dg-filter-chip-clear[b-ba7o2vbtyu] {
    border: none;
    background: transparent;
    font-family: var(--font-family);
    font-size: var(--text-base);
    color: var(--text-muted);
    cursor: pointer;
    padding: 3px 6px;
    margin-left: 4px;
    transition: color 0.12s;
}

.dg-filter-chip-clear:hover[b-ba7o2vbtyu] {
    color: var(--text);
}

/* ============================================
   Chips Toggle Button
   ============================================ */

.dg-chips-toggle[b-ba7o2vbtyu] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid #d4a574;
    border-radius: var(--radius-full);
    background: transparent;
    color: #9a7b5a;
    font-family: var(--font-family);
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
    margin-left: 6px;
}

.dg-chips-toggle:hover[b-ba7o2vbtyu] {
    background: rgba(212, 165, 116, 0.08);
    color: #7a5c3a;
}

.dg-chips-toggle.collapsed[b-ba7o2vbtyu] {
    border-color: var(--border);
    color: var(--text-muted);
}

.dg-chips-toggle.collapsed:hover[b-ba7o2vbtyu] {
    border-color: #d4a574;
    color: #9a7b5a;
    background: rgba(212, 165, 116, 0.08);
}

/* ============================================
   Cell Context Menu
   ============================================ */

.dg-ctx-backdrop[b-ba7o2vbtyu] {
    position: fixed;
    inset: 0;
    z-index: 299;
}

.dg-ctx-menu[b-ba7o2vbtyu] {
    position: fixed;
    z-index: 300;
    min-width: 200px;
    max-width: 400px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 4px 0;
    overflow: hidden;
}

.dg-ctx-item[b-ba7o2vbtyu] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    font-size: var(--text-base);
    color: var(--text);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 0.1s ease;
    border-left: 3px solid var(--danger, #c0392b);
}

.dg-ctx-item:hover[b-ba7o2vbtyu] {
    background: var(--surface-hover);
}
/* /Components/EditContactNotificationsDialog.razor.rz.scp.css */
.cn-overlay[b-s8m6jripju] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(44, 44, 44, 0.4);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 60px;
}

.cn-dialog[b-s8m6jripju] {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: 480px;
    max-width: 94vw;
    max-height: calc(100vh - 100px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cn-dialog__header[b-s8m6jripju] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 22px;
    background: var(--accent-dark, #2c4a55);
    color: #fff;
}

.cn-dialog__title[b-s8m6jripju] {
    font-size: var(--text-base);
    font-weight: var(--font-bold);
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.cn-dialog__close[b-s8m6jripju] {
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    color: #fff;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.cn-dialog__close:hover[b-s8m6jripju] {
    background: rgba(255, 255, 255, 0.15);
}

.cn-dialog__body[b-s8m6jripju] {
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
}

.cn-dialog__loading[b-s8m6jripju],
.cn-dialog__error[b-s8m6jripju] {
    padding: 12px;
    font-size: var(--text-base);
}

.cn-dialog__error[b-s8m6jripju] {
    background: var(--danger-bg);
    color: var(--danger);
    border: 1px solid rgba(192, 57, 43, 0.2);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cn-context[b-s8m6jripju] {
    font-size: var(--text-base);
    font-weight: var(--font-bold);
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.cn-section[b-s8m6jripju] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cn-section__title[b-s8m6jripju] {
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.cn-channels[b-s8m6jripju] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.cn-check[b-s8m6jripju] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--text-base);
    color: var(--text);
}

.cn-check input[b-s8m6jripju] {
    margin: 0;
    cursor: pointer;
}

.cn-days[b-s8m6jripju] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.cn-day[b-s8m6jripju] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--text-sm);
    color: var(--text);
    background: var(--surface);
    user-select: none;
}

.cn-day input[b-s8m6jripju] {
    display: none;
}

.cn-day--on[b-s8m6jripju] {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.cn-day-shortcuts[b-s8m6jripju] {
    display: flex;
    gap: 12px;
}

.cn-link[b-s8m6jripju] {
    background: none;
    border: none;
    color: var(--accent);
    cursor: pointer;
    font-size: var(--text-sm);
    padding: 0;
}

.cn-link:hover[b-s8m6jripju] {
    text-decoration: underline;
}

.cn-link--clear[b-s8m6jripju] {
    align-self: end;
    margin-bottom: 6px;
    color: var(--text-muted);
}

.cn-hours[b-s8m6jripju] {
    display: flex;
    align-items: end;
    gap: 12px;
}

.cn-field[b-s8m6jripju] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
}

.cn-field label[b-s8m6jripju] {
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.cn-field input[b-s8m6jripju] {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    font-family: var(--font-family);
    font-size: var(--text-base);
    color: var(--text);
    background: var(--surface);
    outline: none;
}

.cn-field input:focus[b-s8m6jripju] {
    border-color: var(--accent);
}

.cn-hours-hint[b-s8m6jripju] {
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.cn-dialog__footer[b-s8m6jripju] {
    padding: 14px 22px;
    background: var(--accent-dark, #2c4a55);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.cn-btn[b-s8m6jripju] {
    border: none;
    border-radius: var(--radius-sm);
    padding: 8px 18px;
    font-size: var(--text-base);
    cursor: pointer;
}

.cn-btn--cancel[b-s8m6jripju] {
    background: transparent;
    color: #fff;
}

.cn-btn--cancel:hover[b-s8m6jripju] {
    background: rgba(255, 255, 255, 0.15);
}

.cn-btn--save[b-s8m6jripju] {
    background: rgba(255, 255, 255, 0.85);
    color: var(--text);
}

.cn-btn--save:hover:not(:disabled)[b-s8m6jripju] {
    background: #fff;
}

.cn-btn--save:disabled[b-s8m6jripju] {
    opacity: 0.6;
    cursor: not-allowed;
}
/* /Components/EditContactProfileDialog.razor.rz.scp.css */
.cp-overlay[b-2i35jsr6hz] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(44, 44, 44, 0.4);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 40px;
}

.cp-dialog[b-2i35jsr6hz] {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: 560px;
    max-width: 94vw;
    max-height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cp-dialog__header[b-2i35jsr6hz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 22px;
    background: var(--accent-dark, #2c4a55);
    color: #fff;
}

.cp-dialog__title[b-2i35jsr6hz] {
    font-size: var(--text-base);
    font-weight: var(--font-bold);
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.cp-dialog__close[b-2i35jsr6hz] {
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    color: #fff;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.cp-dialog__close:hover[b-2i35jsr6hz] {
    background: rgba(255, 255, 255, 0.15);
}

.cp-dialog__body[b-2i35jsr6hz] {
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
}

.cp-dialog__loading[b-2i35jsr6hz],
.cp-dialog__error[b-2i35jsr6hz] {
    padding: 12px;
    text-align: center;
    color: var(--text-muted);
    font-size: var(--text-base);
}

.cp-dialog__error[b-2i35jsr6hz] {
    background: var(--danger-bg);
    color: var(--danger);
    border: 1px solid rgba(192, 57, 43, 0.2);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cp-dialog__warning[b-2i35jsr6hz] {
    background: rgba(255, 193, 7, 0.12);
    border: 1px solid rgba(255, 193, 7, 0.4);
    color: #856404;
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    font-size: var(--text-base);
    display: flex;
    align-items: center;
    gap: 8px;
}

.cp-section[b-2i35jsr6hz] {
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.cp-section__header[b-2i35jsr6hz] {
    width: 100%;
    background: var(--surface-alt, #f5f7f9);
    border: none;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-size: var(--text-base);
    font-weight: var(--font-bold);
    color: var(--text);
}

.cp-section__header i[b-2i35jsr6hz] {
    margin-right: 6px;
}

.cp-section__empty[b-2i35jsr6hz] {
    padding: 12px;
    text-align: center;
    color: var(--text-muted);
    font-size: var(--text-base);
}

.cp-sites[b-2i35jsr6hz] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.cp-sites th[b-2i35jsr6hz],
.cp-sites td[b-2i35jsr6hz] {
    text-align: left;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-light);
}

.cp-sites th[b-2i35jsr6hz] {
    font-weight: var(--font-bold);
    color: var(--text);
    background: var(--surface);
}

.cp-sites tr:last-child td[b-2i35jsr6hz] {
    border-bottom: none;
}

.cp-field[b-2i35jsr6hz] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
}

.cp-field label[b-2i35jsr6hz] {
    font-size: var(--text-base);
    color: var(--text);
}

.cp-req[b-2i35jsr6hz] {
    color: var(--danger);
}

.cp-field input[b-2i35jsr6hz],
.cp-field select[b-2i35jsr6hz] {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    font-family: var(--font-family);
    font-size: var(--text-base);
    color: var(--text);
    background: var(--surface);
    outline: none;
    transition: border-color 0.15s;
}

.cp-field input:focus[b-2i35jsr6hz],
.cp-field select:focus[b-2i35jsr6hz] {
    border-color: var(--accent);
}

.cp-row[b-2i35jsr6hz] {
    display: flex;
    gap: 14px;
}

.cp-dialog__footer[b-2i35jsr6hz] {
    padding: 14px 22px;
    background: var(--accent-dark, #2c4a55);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.cp-btn[b-2i35jsr6hz] {
    border: none;
    border-radius: var(--radius-sm);
    padding: 8px 18px;
    font-size: var(--text-base);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, opacity 0.15s;
}

.cp-btn--cancel[b-2i35jsr6hz] {
    background: transparent;
    color: #fff;
}

.cp-btn--cancel:hover[b-2i35jsr6hz] {
    background: rgba(255, 255, 255, 0.15);
}

.cp-btn--save[b-2i35jsr6hz] {
    background: rgba(255, 255, 255, 0.7);
    color: var(--text);
}

.cp-btn--save:hover:not(:disabled)[b-2i35jsr6hz] {
    background: #fff;
}

.cp-btn--save:disabled[b-2i35jsr6hz] {
    opacity: 0.6;
    cursor: not-allowed;
}
/* /Components/HoldTicketDialog.razor.rz.scp.css */
.hold-overlay[b-hqcwewbbii] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(44, 44, 44, 0.4);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 60px;
}

.hold-dialog[b-hqcwewbbii] {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: 440px;
    max-width: 94vw;
    max-height: calc(100vh - 100px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.hold-dialog__header[b-hqcwewbbii] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid var(--border-light);
}

.hold-dialog__title[b-hqcwewbbii] {
    font-size: var(--text-base);
    font-weight: var(--font-bold);
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.hold-dialog__title i[b-hqcwewbbii] {
    color: var(--warning);
    font-size: var(--text-base);
}

.hold-dialog__close[b-hqcwewbbii] {
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: var(--text-base);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}

.hold-dialog__close:hover[b-hqcwewbbii] {
    background: var(--danger-bg);
    color: var(--danger);
}

.hold-dialog__body[b-hqcwewbbii] {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
}

.hold-dialog__error[b-hqcwewbbii] {
    background: var(--danger-bg);
    color: var(--danger);
    border: 1px solid rgba(192, 57, 43, 0.2);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    font-size: var(--text-base);
    display: flex;
    align-items: center;
    gap: 8px;
}

.hold-dialog__field[b-hqcwewbbii] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.hold-dialog__field label[b-hqcwewbbii] {
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    color: var(--text);
}

.hold-dialog__req[b-hqcwewbbii] {
    color: var(--danger);
}

.hold-dialog__hint[b-hqcwewbbii] {
    color: var(--warning);
    font-weight: var(--font-normal);
    font-size: var(--text-base);
}

.hold-dialog__datetime[b-hqcwewbbii] {
    display: flex;
    gap: 8px;
}

.hold-dialog__datetime input[b-hqcwewbbii] {
    flex: 1;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    font-family: var(--font-family);
    font-size: var(--text-base);
    color: var(--text);
    background: var(--surface);
    outline: none;
    transition: border-color 0.15s;
}

.hold-dialog__datetime input:focus[b-hqcwewbbii] {
    border-color: var(--accent);
}

.hold-dialog__field select[b-hqcwewbbii],
.hold-dialog__field textarea[b-hqcwewbbii] {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    font-family: var(--font-family);
    font-size: var(--text-base);
    color: var(--text);
    background: var(--surface);
    outline: none;
    transition: border-color 0.15s;
    width: 100%;
}

.hold-dialog__field select:focus[b-hqcwewbbii],
.hold-dialog__field textarea:focus[b-hqcwewbbii] {
    border-color: var(--accent);
}

.hold-dialog__field textarea[b-hqcwewbbii] {
    resize: vertical;
    min-height: 70px;
    line-height: 1.5;
}

.hold-dialog__footer[b-hqcwewbbii] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    border-top: 1px solid var(--border-light);
}

.hold-dialog__attachment[b-hqcwewbbii] {
    color: var(--text-light);
    font-size: var(--text-base);
    cursor: pointer;
    transition: color 0.15s;
}

.hold-dialog__attachment:hover[b-hqcwewbbii] {
    color: var(--text-muted);
}

.hold-dialog__btn--save[b-hqcwewbbii] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 24px;
    border-radius: var(--radius-full);
    font-family: var(--font-family);
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    cursor: pointer;
    border: 1px solid var(--accent);
    background: var(--accent);
    color: var(--white);
    transition: background 0.15s, opacity 0.15s;
    white-space: nowrap;
}

.hold-dialog__btn--save:hover:not(:disabled)[b-hqcwewbbii] {
    background: var(--accent-hover);
}

.hold-dialog__btn--save:disabled[b-hqcwewbbii] {
    opacity: 0.5;
    cursor: not-allowed;
}
/* /Components/LogCallDialog.razor.rz.scp.css */
.call-overlay[b-7stenxixmi] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(44, 44, 44, 0.4);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 60px;
}

.call-dialog[b-7stenxixmi] {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: 440px;
    max-width: 94vw;
    max-height: calc(100vh - 100px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ── Header: dark bar with grip + icon + title ── */

.call-dialog__header[b-7stenxixmi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #3b4a50;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.call-dialog__header-left[b-7stenxixmi] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.call-dialog__grip[b-7stenxixmi] {
    color: rgba(255, 255, 255, 0.35);
    font-size: var(--text-xs);
}

.call-dialog__icon[b-7stenxixmi] {
    color: var(--white);
    font-size: var(--text-sm);
}

.call-dialog__title[b-7stenxixmi] {
    color: var(--white);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
}

.call-dialog__close[b-7stenxixmi] {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    color: rgba(255, 255, 255, 0.6);
    font-size: var(--text-base);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}

.call-dialog__close:hover[b-7stenxixmi] {
    background: rgba(255, 255, 255, 0.12);
    color: var(--white);
}

/* ── Body ── */

.call-dialog__body[b-7stenxixmi] {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
}

.call-dialog__error[b-7stenxixmi] {
    background: var(--danger-bg);
    color: var(--danger);
    border: 1px solid rgba(192, 57, 43, 0.2);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    font-size: var(--text-base);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── Fields ── */

.call-dialog__field[b-7stenxixmi] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.call-dialog__field label[b-7stenxixmi] {
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    color: var(--text);
}

.call-dialog__req[b-7stenxixmi] {
    color: var(--danger);
}

.call-dialog__field select[b-7stenxixmi],
.call-dialog__field textarea[b-7stenxixmi] {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 9px 10px;
    font-family: var(--font-family);
    font-size: var(--text-base);
    color: var(--text);
    background: var(--surface);
    outline: none;
    transition: border-color 0.15s;
    width: 100%;
    appearance: auto;
}

.call-dialog__field select:focus[b-7stenxixmi],
.call-dialog__field textarea:focus[b-7stenxixmi] {
    border-color: var(--accent);
}

.call-dialog__field textarea[b-7stenxixmi] {
    resize: vertical;
    min-height: 80px;
    line-height: 1.5;
}

/* ── Direction toggle ── */

.call-dialog__toggle[b-7stenxixmi] {
    display: flex;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.call-dialog__toggle-btn[b-7stenxixmi] {
    flex: 1;
    padding: 9px 0;
    font-family: var(--font-family);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    cursor: pointer;
    border: none;
    background: var(--surface);
    color: var(--text);
    transition: background 0.15s, color 0.15s;
}

.call-dialog__toggle-btn--active[b-7stenxixmi] {
    background: var(--accent);
    color: var(--white);
}

.call-dialog__toggle-btn:not(.call-dialog__toggle-btn--active):hover[b-7stenxixmi] {
    background: var(--surface-hover);
}

/* ── Date / Time row ── */

.call-dialog__datetime[b-7stenxixmi] {
    display: flex;
    gap: 8px;
}

.call-dialog__datetime input[b-7stenxixmi] {
    flex: 1;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 9px 10px;
    font-family: var(--font-family);
    font-size: var(--text-base);
    color: var(--text);
    background: var(--surface);
    outline: none;
    transition: border-color 0.15s;
}

.call-dialog__datetime input:focus[b-7stenxixmi] {
    border-color: var(--accent);
}

/* ── Checkbox ── */

.call-dialog__checkbox[b-7stenxixmi] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-base);
    color: var(--text);
    cursor: pointer;
    user-select: none;
}

.call-dialog__checkbox input[type="checkbox"][b-7stenxixmi] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    cursor: pointer;
}

/* ── Footer ── */

.call-dialog__footer[b-7stenxixmi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    border-top: 1px solid var(--border-light);
    background: var(--surface-alt);
}

.call-dialog__attachment[b-7stenxixmi] {
    color: var(--text-light);
    font-size: var(--text-lg);
    cursor: pointer;
    transition: color 0.15s;
}

.call-dialog__attachment:hover[b-7stenxixmi] {
    color: var(--text-muted);
}

.call-dialog__footer-actions[b-7stenxixmi] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.call-dialog__btn[b-7stenxixmi] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 22px;
    border-radius: var(--radius-full);
    font-family: var(--font-family);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, opacity 0.15s, color 0.15s;
}

.call-dialog__btn--cancel[b-7stenxixmi] {
    border: none;
    background: transparent;
    color: var(--text-muted);
}

.call-dialog__btn--cancel:hover[b-7stenxixmi] {
    color: var(--text);
}

.call-dialog__btn--save[b-7stenxixmi] {
    border: 1px solid var(--accent);
    background: var(--accent);
    color: var(--white);
}

.call-dialog__btn--save:hover:not(:disabled)[b-7stenxixmi] {
    background: var(--accent-hover);
}

.call-dialog__btn--save:disabled[b-7stenxixmi] {
    opacity: 0.5;
    cursor: not-allowed;
}
/* /Components/LogEmailDialog.razor.rz.scp.css */
.comm-overlay[b-4c88uqhnuw] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(44, 44, 44, 0.4);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 60px;
}

.comm-dialog[b-4c88uqhnuw] {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: 440px;
    max-width: 94vw;
    max-height: calc(100vh - 100px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ── Header ── */

.comm-dialog__header[b-4c88uqhnuw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #3b4a50;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.comm-dialog__header-left[b-4c88uqhnuw] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.comm-dialog__grip[b-4c88uqhnuw] {
    color: rgba(255, 255, 255, 0.35);
    font-size: var(--text-xs);
}

.comm-dialog__icon[b-4c88uqhnuw] {
    color: var(--white);
    font-size: var(--text-sm);
}

.comm-dialog__title[b-4c88uqhnuw] {
    color: var(--white);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
}

.comm-dialog__close[b-4c88uqhnuw] {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    color: rgba(255, 255, 255, 0.6);
    font-size: var(--text-base);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}

.comm-dialog__close:hover[b-4c88uqhnuw] {
    background: rgba(255, 255, 255, 0.12);
    color: var(--white);
}

/* ── Body ── */

.comm-dialog__body[b-4c88uqhnuw] {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
}

.comm-dialog__error[b-4c88uqhnuw] {
    background: var(--danger-bg);
    color: var(--danger);
    border: 1px solid rgba(192, 57, 43, 0.2);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    font-size: var(--text-base);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── Fields ── */

.comm-dialog__field[b-4c88uqhnuw] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.comm-dialog__field label[b-4c88uqhnuw] {
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    color: var(--text);
}

.comm-dialog__req[b-4c88uqhnuw] {
    color: var(--danger);
}

.comm-dialog__field select[b-4c88uqhnuw],
.comm-dialog__field textarea[b-4c88uqhnuw] {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 9px 10px;
    font-family: var(--font-family);
    font-size: var(--text-base);
    color: var(--text);
    background: var(--surface);
    outline: none;
    transition: border-color 0.15s;
    width: 100%;
    appearance: auto;
}

.comm-dialog__field select:focus[b-4c88uqhnuw],
.comm-dialog__field textarea:focus[b-4c88uqhnuw] {
    border-color: var(--accent);
}

.comm-dialog__field textarea[b-4c88uqhnuw] {
    resize: vertical;
    min-height: 80px;
    line-height: 1.5;
}

/* ── Direction toggle ── */

.comm-dialog__toggle[b-4c88uqhnuw] {
    display: flex;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.comm-dialog__toggle-btn[b-4c88uqhnuw] {
    flex: 1;
    padding: 9px 0;
    font-family: var(--font-family);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    cursor: pointer;
    border: none;
    background: var(--surface);
    color: var(--text);
    transition: background 0.15s, color 0.15s;
}

.comm-dialog__toggle-btn--active[b-4c88uqhnuw] {
    background: var(--accent);
    color: var(--white);
}

.comm-dialog__toggle-btn:not(.comm-dialog__toggle-btn--active):hover[b-4c88uqhnuw] {
    background: var(--surface-hover);
}

/* ── Date / Time row ── */

.comm-dialog__datetime[b-4c88uqhnuw] {
    display: flex;
    gap: 8px;
}

.comm-dialog__datetime input[b-4c88uqhnuw] {
    flex: 1;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 9px 10px;
    font-family: var(--font-family);
    font-size: var(--text-base);
    color: var(--text);
    background: var(--surface);
    outline: none;
    transition: border-color 0.15s;
}

.comm-dialog__datetime input:focus[b-4c88uqhnuw] {
    border-color: var(--accent);
}

/* ── Checkbox ── */

.comm-dialog__checkbox[b-4c88uqhnuw] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-base);
    color: var(--text);
    cursor: pointer;
    user-select: none;
}

.comm-dialog__checkbox input[type="checkbox"][b-4c88uqhnuw] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    cursor: pointer;
}

/* ── Footer ── */

.comm-dialog__footer[b-4c88uqhnuw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    border-top: 1px solid var(--border-light);
    background: var(--surface-alt);
}

.comm-dialog__attachment[b-4c88uqhnuw] {
    color: var(--text-light);
    font-size: var(--text-lg);
    cursor: pointer;
    transition: color 0.15s;
}

.comm-dialog__attachment:hover[b-4c88uqhnuw] {
    color: var(--text-muted);
}

.comm-dialog__footer-actions[b-4c88uqhnuw] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.comm-dialog__btn[b-4c88uqhnuw] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 22px;
    border-radius: var(--radius-full);
    font-family: var(--font-family);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, opacity 0.15s, color 0.15s;
}

.comm-dialog__btn--cancel[b-4c88uqhnuw] {
    border: none;
    background: transparent;
    color: var(--text-muted);
}

.comm-dialog__btn--cancel:hover[b-4c88uqhnuw] {
    color: var(--text);
}

.comm-dialog__btn--save[b-4c88uqhnuw] {
    border: 1px solid var(--accent);
    background: var(--accent);
    color: var(--white);
}

.comm-dialog__btn--save:hover:not(:disabled)[b-4c88uqhnuw] {
    background: var(--accent-hover);
}

.comm-dialog__btn--save:disabled[b-4c88uqhnuw] {
    opacity: 0.5;
    cursor: not-allowed;
}
/* /Components/LoginScreen.razor.rz.scp.css */
.login-overlay[b-rbg2vqka7k] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(44, 44, 44, 0.55);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-card[b-rbg2vqka7k] {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 40px 36px 32px;
    width: 380px;
    max-width: 92vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.login-card__icon[b-rbg2vqka7k] {
    font-size: var(--text-4xl);
    color: var(--accent);
    margin-bottom: 4px;
}

.login-card__title[b-rbg2vqka7k] {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--text);
}

.login-card__subtitle[b-rbg2vqka7k] {
    font-size: var(--text-base);
    color: var(--text-muted);
    margin-bottom: 16px;
}

.login-card__loading[b-rbg2vqka7k] {
    font-size: var(--text-base);
    color: var(--text-muted);
    padding: 20px 0;
}

.login-card__button[b-rbg2vqka7k] {
    padding: 8px 0;
    display: flex;
    justify-content: center;
}

.login-card__error[b-rbg2vqka7k] {
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: var(--radius-md);
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
    font-size: var(--text-sm);
    text-align: center;
    width: 100%;
}
/* /Components/LogMessageDialog.razor.rz.scp.css */
.comm-overlay[b-4xzxi8yzc0] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(44, 44, 44, 0.4);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 60px;
}

.comm-dialog[b-4xzxi8yzc0] {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: 440px;
    max-width: 94vw;
    max-height: calc(100vh - 100px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ── Header ── */

.comm-dialog__header[b-4xzxi8yzc0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #3b4a50;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.comm-dialog__header-left[b-4xzxi8yzc0] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.comm-dialog__grip[b-4xzxi8yzc0] {
    color: rgba(255, 255, 255, 0.35);
    font-size: var(--text-xs);
}

.comm-dialog__icon[b-4xzxi8yzc0] {
    color: var(--white);
    font-size: var(--text-sm);
}

.comm-dialog__title[b-4xzxi8yzc0] {
    color: var(--white);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
}

.comm-dialog__close[b-4xzxi8yzc0] {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    color: rgba(255, 255, 255, 0.6);
    font-size: var(--text-base);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}

.comm-dialog__close:hover[b-4xzxi8yzc0] {
    background: rgba(255, 255, 255, 0.12);
    color: var(--white);
}

/* ── Body ── */

.comm-dialog__body[b-4xzxi8yzc0] {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
}

.comm-dialog__error[b-4xzxi8yzc0] {
    background: var(--danger-bg);
    color: var(--danger);
    border: 1px solid rgba(192, 57, 43, 0.2);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    font-size: var(--text-base);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── Fields ── */

.comm-dialog__field[b-4xzxi8yzc0] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.comm-dialog__field label[b-4xzxi8yzc0] {
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    color: var(--text);
}

.comm-dialog__req[b-4xzxi8yzc0] {
    color: var(--danger);
}

.comm-dialog__field select[b-4xzxi8yzc0],
.comm-dialog__field textarea[b-4xzxi8yzc0] {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 9px 10px;
    font-family: var(--font-family);
    font-size: var(--text-base);
    color: var(--text);
    background: var(--surface);
    outline: none;
    transition: border-color 0.15s;
    width: 100%;
    appearance: auto;
}

.comm-dialog__field select:focus[b-4xzxi8yzc0],
.comm-dialog__field textarea:focus[b-4xzxi8yzc0] {
    border-color: var(--accent);
}

.comm-dialog__field textarea[b-4xzxi8yzc0] {
    resize: vertical;
    min-height: 80px;
    line-height: 1.5;
}

/* ── Direction toggle ── */

.comm-dialog__toggle[b-4xzxi8yzc0] {
    display: flex;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.comm-dialog__toggle-btn[b-4xzxi8yzc0] {
    flex: 1;
    padding: 9px 0;
    font-family: var(--font-family);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    cursor: pointer;
    border: none;
    background: var(--surface);
    color: var(--text);
    transition: background 0.15s, color 0.15s;
}

.comm-dialog__toggle-btn--active[b-4xzxi8yzc0] {
    background: var(--accent);
    color: var(--white);
}

.comm-dialog__toggle-btn:not(.comm-dialog__toggle-btn--active):hover[b-4xzxi8yzc0] {
    background: var(--surface-hover);
}

/* ── Date / Time row ── */

.comm-dialog__datetime[b-4xzxi8yzc0] {
    display: flex;
    gap: 8px;
}

.comm-dialog__datetime input[b-4xzxi8yzc0] {
    flex: 1;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 9px 10px;
    font-family: var(--font-family);
    font-size: var(--text-base);
    color: var(--text);
    background: var(--surface);
    outline: none;
    transition: border-color 0.15s;
}

.comm-dialog__datetime input:focus[b-4xzxi8yzc0] {
    border-color: var(--accent);
}

/* ── Checkbox ── */

.comm-dialog__checkbox[b-4xzxi8yzc0] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-base);
    color: var(--text);
    cursor: pointer;
    user-select: none;
}

.comm-dialog__checkbox input[type="checkbox"][b-4xzxi8yzc0] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    cursor: pointer;
}

/* ── Footer ── */

.comm-dialog__footer[b-4xzxi8yzc0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    border-top: 1px solid var(--border-light);
    background: var(--surface-alt);
}

.comm-dialog__attachment[b-4xzxi8yzc0] {
    color: var(--text-light);
    font-size: var(--text-lg);
    cursor: pointer;
    transition: color 0.15s;
}

.comm-dialog__attachment:hover[b-4xzxi8yzc0] {
    color: var(--text-muted);
}

.comm-dialog__footer-actions[b-4xzxi8yzc0] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.comm-dialog__btn[b-4xzxi8yzc0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 22px;
    border-radius: var(--radius-full);
    font-family: var(--font-family);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, opacity 0.15s, color 0.15s;
}

.comm-dialog__btn--cancel[b-4xzxi8yzc0] {
    border: none;
    background: transparent;
    color: var(--text-muted);
}

.comm-dialog__btn--cancel:hover[b-4xzxi8yzc0] {
    color: var(--text);
}

.comm-dialog__btn--save[b-4xzxi8yzc0] {
    border: 1px solid var(--accent);
    background: var(--accent);
    color: var(--white);
}

.comm-dialog__btn--save:hover:not(:disabled)[b-4xzxi8yzc0] {
    background: var(--accent-hover);
}

.comm-dialog__btn--save:disabled[b-4xzxi8yzc0] {
    opacity: 0.5;
    cursor: not-allowed;
}
/* /Components/NavMenu.razor.rz.scp.css */
/* ============================================
   NavMenu — Sidebar Navigation
   Collapsed: 48px icon rail + hover flyouts
   Expanded:  220px full panel
   ============================================ */

/* --- Container --- */
.nav-menu[b-cym02eux1e] {
    display: flex;
    flex-direction: column;
    background: #3c3a36;
    color: #e0ddd8;
    flex-shrink: 0;
    overflow: visible;
    user-select: none;
    transition: width 0.2s ease;
    z-index: 50;
    position: relative;
}

.nav-menu.collapsed[b-cym02eux1e] {
    width: 48px;
}

.nav-menu.expanded[b-cym02eux1e] {
    width: 220px;
}

/* --- Toggle button --- */
.nav-toggle[b-cym02eux1e] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    cursor: pointer;
    color: #a09b94;
    font-size: var(--text-base);
    transition: color 0.15s ease, background 0.15s ease;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.nav-toggle:hover[b-cym02eux1e] {
    color: #e0ddd8;
    background: rgba(255,255,255,0.05);
}

/* --- Sections container --- */
.nav-sections[b-cym02eux1e] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 0;
    overflow: visible;
    flex: 1;
}

.nav-menu.expanded .nav-sections[b-cym02eux1e] {
    overflow-y: auto;
    overflow-x: hidden;
}

/* --- Section wrapper (needed for flyout positioning) --- */
.nav-section[b-cym02eux1e] {
    position: relative;
}

/* ==================
   COLLAPSED STATE
   ================== */

/* Icon button in collapsed rail */
.nav-section-icon[b-cym02eux1e] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 42px;
    font-size: var(--text-base);
    color: #a09b94;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

.nav-section-icon:hover[b-cym02eux1e] {
    color: #e0ddd8;
    background: rgba(255,255,255,0.06);
}

/* Flyout popup on hover */
.nav-flyout[b-cym02eux1e] {
    position: absolute;
    left: 48px;
    top: -6px;
    min-width: 190px;
    background: var(--surface);
    border: none;
    border-radius: 18px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
    padding: 14px 10px 12px;
    z-index: 100;
    color: var(--text);
}

.nav-flyout-title[b-cym02eux1e] {
    padding: 0 10px 6px;
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    color: var(--text);
}

.nav-flyout-item[b-cym02eux1e] {
    padding: 8px 16px;
    font-size: var(--text-base);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
    border-radius: 20px;
    margin: 2px 0;
    color: var(--text);
}

.nav-flyout-item:hover[b-cym02eux1e] {
    background: var(--surface-hover);
}

.nav-flyout-item.active[b-cym02eux1e] {
    background: #3c3a36;
    color: var(--white);
}

/* ==================
   EXPANDED STATE
   ================== */

/* Section header (label + icon) */
.nav-section-header[b-cym02eux1e] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px 4px;
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    color: #ccc8c1;
    letter-spacing: 0.01em;
}

.nav-section-header-icon[b-cym02eux1e] {
    font-size: var(--text-base);
    width: 16px;
    text-align: center;
    opacity: 0.8;
}

.nav-section-title[b-cym02eux1e] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Sub-items list */
.nav-section-items[b-cym02eux1e] {
    display: flex;
    flex-direction: column;
    padding: 2px 0 6px;
}

.nav-item[b-cym02eux1e] {
    padding: 6px 16px 6px 42px;
    font-size: var(--text-base);
    color: #b5b0a8;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-item:hover[b-cym02eux1e] {
    color: #e0ddd8;
    background: rgba(255,255,255,0.05);
}

.nav-item.active[b-cym02eux1e] {
    background: var(--accent);
    color: var(--white);
    margin: 2px 10px;
    border-radius: 20px;
    padding: 6px 16px 6px 32px;
}

/* --- Scrollbar inside nav --- */
.nav-sections[b-cym02eux1e]::-webkit-scrollbar {
    width: 4px;
}

.nav-sections[b-cym02eux1e]::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.1);
    border-radius: 2px;
}
/* /Components/PendingAccessScreen.razor.rz.scp.css */
.pending-overlay[b-p8hrsjaenx] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(44, 44, 44, 0.55);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pending-card[b-p8hrsjaenx] {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 40px 36px 32px;
    width: 420px;
    max-width: 92vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.pending-card__icon[b-p8hrsjaenx] {
    font-size: var(--text-4xl);
    color: var(--accent);
    margin-bottom: 4px;
}

.pending-card__title[b-p8hrsjaenx] {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--text);
    margin: 0;
}

.pending-card__avatar[b-p8hrsjaenx] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-weight: var(--font-bold);
    font-size: var(--text-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-top: 12px;
}

.pending-card__avatar img[b-p8hrsjaenx] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pending-card__name[b-p8hrsjaenx] {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text);
}

.pending-card__email[b-p8hrsjaenx] {
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.pending-card__message[b-p8hrsjaenx] {
    margin-top: 16px;
    font-size: var(--text-sm);
    color: var(--text-muted);
    text-align: center;
    line-height: 1.5;
}

.pending-card__logout[b-p8hrsjaenx] {
    margin-top: 12px;
    padding: 10px 20px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    cursor: pointer;
    font-size: var(--text-sm);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.pending-card__logout:hover[b-p8hrsjaenx] {
    background: var(--surface-hover, rgba(255, 255, 255, 0.04));
}
/* /Components/ResolutionDialog.razor.rz.scp.css */
.resolution-dialog-overlay[b-arjlzy075m] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(44, 44, 44, 0.4);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 60px;
}

.resolution-dialog[b-arjlzy075m] {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: 720px;
    max-width: 94vw;
    max-height: calc(100vh - 100px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.resolution-dialog__header[b-arjlzy075m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: var(--primary);
    color: var(--white);
}

.resolution-dialog__title[b-arjlzy075m] {
    font-size: var(--text-base);
    font-weight: var(--font-bold);
    color: var(--white);
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.resolution-dialog__close[b-arjlzy075m] {
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    color: var(--white);
    font-size: var(--text-base);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    transition: background 0.15s;
}

.resolution-dialog__close:hover[b-arjlzy075m] {
    background: rgba(255, 255, 255, 0.15);
}

.resolution-dialog__body[b-arjlzy075m] {
    padding: 18px 22px 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
}

.resolution-dialog__error[b-arjlzy075m] {
    background: var(--danger-bg);
    color: var(--danger);
    border: 1px solid rgba(192, 57, 43, 0.2);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-sm);
}

.resolution-dialog__label[b-arjlzy075m] {
    font-size: var(--text-base);
    font-weight: var(--font-bold);
    color: var(--text);
    margin: 6px 0 4px;
}

.resolution-dialog__summary[b-arjlzy075m] {
    width: 100%;
    min-height: 140px;
    padding: 14px 16px;
    border: 1px solid var(--danger);
    border-radius: var(--radius-sm);
    background: var(--danger-bg);
    color: var(--danger);
    font-family: inherit;
    font-size: var(--text-base);
    resize: vertical;
}

.resolution-dialog__summary[b-arjlzy075m]::placeholder {
    color: var(--danger);
    opacity: 0.85;
}

.resolution-dialog__summary:not(.resolution-dialog__summary--invalid)[b-arjlzy075m] {
    border-color: var(--border);
    background: var(--surface);
    color: var(--text);
}

.resolution-dialog__summary:not(.resolution-dialog__summary--invalid)[b-arjlzy075m]::placeholder {
    color: var(--text-muted);
    opacity: 1;
}

.resolution-dialog__select[b-arjlzy075m] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--danger);
    border-radius: var(--radius-sm);
    background: var(--danger-bg);
    color: var(--danger);
    font-family: inherit;
    font-size: var(--text-base);
    cursor: pointer;
}

.resolution-dialog__select:not(.resolution-dialog__select--invalid)[b-arjlzy075m] {
    border-color: var(--border);
    background: var(--surface);
    color: var(--text);
}

.resolution-dialog__grid[b-arjlzy075m] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.resolution-dialog__rows[b-arjlzy075m] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.resolution-dialog__row[b-arjlzy075m] {
    display: grid;
    grid-template-columns: 1fr minmax(220px, 320px);
    align-items: center;
    gap: 16px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-light);
}

.resolution-dialog__row:last-child[b-arjlzy075m] {
    border-bottom: none;
}

.resolution-dialog__question[b-arjlzy075m] {
    font-size: var(--text-base);
    color: var(--text);
    line-height: 1.4;
}

.resolution-dialog__footer[b-arjlzy075m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: var(--primary);
    color: var(--white);
}

.resolution-dialog__attachment[b-arjlzy075m] {
    color: var(--white);
    font-size: var(--text-base);
    opacity: 0.9;
}

.resolution-dialog__actions[b-arjlzy075m] {
    display: flex;
    gap: 10px;
}

.resolution-dialog__btn[b-arjlzy075m] {
    padding: 8px 18px;
    border: none;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    cursor: pointer;
    transition: opacity 0.15s, background 0.15s;
}

.resolution-dialog__btn--cancel[b-arjlzy075m] {
    background: transparent;
    color: var(--white);
}

.resolution-dialog__btn--cancel:hover[b-arjlzy075m] {
    background: rgba(255, 255, 255, 0.15);
}

.resolution-dialog__btn--confirm[b-arjlzy075m] {
    background: var(--white);
    color: var(--primary);
}

.resolution-dialog__btn--confirm:hover:not(:disabled)[b-arjlzy075m] {
    opacity: 0.9;
}

.resolution-dialog__btn--confirm:disabled[b-arjlzy075m] {
    opacity: 0.5;
    cursor: not-allowed;
}
/* /Components/SplitContentPlaceholder.razor.rz.scp.css */
.split-placeholder[b-u0djqdgcfo] {
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.split-placeholder__header[b-u0djqdgcfo] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.split-placeholder__icon[b-u0djqdgcfo] {
    font-size: var(--text-2xl);
    color: var(--accent);
}

.split-placeholder__title[b-u0djqdgcfo] {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--text);
}

.split-placeholder__subtitle[b-u0djqdgcfo] {
    margin: 2px 0 0;
    font-size: var(--text-base);
    color: var(--text-muted);
}

.split-placeholder__hint[b-u0djqdgcfo] {
    margin: 0;
    font-size: var(--text-base);
    color: var(--text-muted);
    font-style: italic;
}
/* /Components/SplitContent/ContactSplitContent.razor.rz.scp.css */
/* ===================================================================
   ContactSplitContent — Contact detail panel with editable fields
   =================================================================== */

.contact-split[b-mefz9prf8g] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.contact-split--loading[b-mefz9prf8g],
.contact-split--error[b-mefz9prf8g] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: var(--text-base);
    height: 100%;
}

.contact-split--error[b-mefz9prf8g] {
    color: var(--danger);
}

/* ── Header ── */

.contact-split__header[b-mefz9prf8g] {
    padding: 16px 20px 0;
    flex-shrink: 0;
}

.contact-split__header-top[b-mefz9prf8g] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.contact-split__header-left[b-mefz9prf8g] {
    flex: 1;
    min-width: 0;
}

.contact-split__header-right[b-mefz9prf8g] {
    flex-shrink: 0;
}

.contact-split__type-label[b-mefz9prf8g] {
    font-size: var(--text-sm);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
}

.contact-split__name[b-mefz9prf8g] {
    margin: 0 0 6px;
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.contact-split__name-icon[b-mefz9prf8g] {
    font-size: var(--text-xl);
    color: var(--text-muted);
}

.contact-split__meta[b-mefz9prf8g] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: var(--text-base);
    color: var(--text-muted);
    margin-bottom: 4px;
}

.contact-split__meta-item[b-mefz9prf8g] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.contact-split__updated[b-mefz9prf8g] {
    font-size: var(--text-sm);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.contact-split__refresh-btn[b-mefz9prf8g] {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 2px 6px;
    border-radius: 4px;
    transition: background 0.15s, color 0.15s;
}

.contact-split__refresh-btn:hover[b-mefz9prf8g] {
    background: var(--surface);
    color: var(--text);
}

/* ── Badges ── */

.contact-split__badges[b-mefz9prf8g] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 8px 0 12px;
}

.contact-split__badge[b-mefz9prf8g] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    padding: 3px 10px;
    border-radius: var(--radius-full);
    white-space: nowrap;
}

.contact-split__badge--assignments[b-mefz9prf8g] {
    background: var(--surface);
    border: 1px solid var(--border-light);
    color: var(--text-muted);
}

/* ── Columns ── */

.contact-split__columns[b-mefz9prf8g] {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    gap: 0;
}

.contact-split__col-left[b-mefz9prf8g] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 12px 32px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.contact-split__col-right[b-mefz9prf8g] {
    width: 340px;
    min-width: 280px;
    min-height: 0;
    border-left: 1px solid var(--border-light);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* ── Card ── */

.contact-split__card[b-mefz9prf8g] {
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius, 8px);
    overflow: hidden;
}

.contact-split__card-header[b-mefz9prf8g] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--bg);
    border-bottom: 1px solid var(--border-light);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text);
}

.contact-split__card-header-title[b-mefz9prf8g] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.contact-split__card-body[b-mefz9prf8g] {
    padding: 8px 14px;
}

.contact-split__card-body  .vg-inline[b-mefz9prf8g] {
    padding: 4px 0;
}

/* ── Empty ── */

.contact-split__empty[b-mefz9prf8g] {
    text-align: center;
    padding: 20px 12px;
    color: var(--text-muted);
    font-size: var(--text-base);
}

/* ── History ── */

.contact-split__history-card[b-mefz9prf8g] {
    flex: 1;
    display: flex;
    flex-direction: column;
    border: none;
    border-radius: 0;
    background: transparent;
}

.contact-split__history-search[b-mefz9prf8g] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--border-light);
}

.contact-split__history-search-icon[b-mefz9prf8g] {
    color: var(--text-muted);
    font-size: var(--text-base);
}

.contact-split__history-input[b-mefz9prf8g] {
    border: none;
    outline: none;
    background: transparent;
    color: var(--text);
    font-size: var(--text-base);
    width: 100%;
}

.contact-split__history-count[b-mefz9prf8g] {
    padding: 4px 14px;
    font-size: var(--text-sm);
    color: var(--text-muted);
    text-align: right;
}

.contact-split__history-tabs[b-mefz9prf8g] {
    display: flex;
    gap: 0;
    padding: 0 14px;
    border-bottom: 1px solid var(--border-light);
}

.contact-split__htab[b-mefz9prf8g] {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 6px 12px;
    font-size: var(--text-base);
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.contact-split__htab:hover[b-mefz9prf8g] {
    color: var(--text);
}

.contact-split__htab--active[b-mefz9prf8g] {
    color: var(--accent);
    border-bottom-color: var(--accent);
    font-weight: var(--font-semibold);
}

.contact-split__history-list[b-mefz9prf8g] {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

.contact-split__history-entry[b-mefz9prf8g] {
    display: flex;
    gap: 10px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--border-light);
}

.contact-split__history-entry:last-child[b-mefz9prf8g] {
    border-bottom: none;
}

.contact-split__history-icon-wrap[b-mefz9prf8g] {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-split__history-icon[b-mefz9prf8g] {
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.contact-split__history-body[b-mefz9prf8g] {
    flex: 1;
    min-width: 0;
}

.contact-split__history-title[b-mefz9prf8g] {
    font-size: var(--text-base);
    color: var(--text);
}

.contact-split__history-meta[b-mefz9prf8g] {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin-top: 2px;
}

.contact-split__history-diff[b-mefz9prf8g] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: var(--text-base);
}

.contact-split__diff-old[b-mefz9prf8g] {
    color: var(--danger);
    text-decoration: line-through;
}

.contact-split__diff-arrow[b-mefz9prf8g] {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.contact-split__diff-new[b-mefz9prf8g] {
    color: var(--success, #2d8a4e);
    font-weight: var(--font-medium);
}

.contact-split__history-note[b-mefz9prf8g] {
    background: var(--bg);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    font-size: var(--text-base);
    color: var(--text);
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    margin-top: 4px;
}
/* /Components/SplitContent/DeviceSplitContent.razor.rz.scp.css */
/* ===================================================================
   DeviceSplitContent — Device detail panel
   =================================================================== */

.dev-split[b-ib7c42vmdj] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.dev-split--loading[b-ib7c42vmdj],
.dev-split--error[b-ib7c42vmdj] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: var(--text-base);
    height: 100%;
}

.dev-split--error[b-ib7c42vmdj] {
    color: var(--danger);
}

/* ── Breadcrumb ── */

.dev-split__breadcrumb[b-ib7c42vmdj] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-base);
    color: var(--text-muted);
    padding: 12px 20px 0;
    flex-shrink: 0;
}

.dev-split__bc-picker[b-ib7c42vmdj] {
    position: relative;
}

.dev-split__bc-item[b-ib7c42vmdj] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.dev-split__bc-item--clickable[b-ib7c42vmdj] {
    cursor: pointer;
    border-radius: 4px;
    padding: 2px 6px;
    transition: background 0.15s;
}

.dev-split__bc-item--clickable:hover[b-ib7c42vmdj] {
    background: var(--surface);
    color: var(--text);
}

.dev-split__bc-edit-icon[b-ib7c42vmdj] {
    font-size: var(--text-xs);
    opacity: 0;
    transition: opacity 0.15s;
    margin-left: 2px;
}

.dev-split__bc-item--clickable:hover .dev-split__bc-edit-icon[b-ib7c42vmdj] {
    opacity: 0.6;
}

.dev-split__bc-backdrop[b-ib7c42vmdj] {
    position: fixed;
    inset: 0;
    z-index: 99;
}

.dev-split__bc-dropdown[b-ib7c42vmdj] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 100;
    background: var(--surface-raised, var(--surface));
    border: 1px solid var(--border-light);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,.15);
    min-width: 240px;
    max-width: 320px;
    overflow: hidden;
}

.dev-split__bc-search-wrap[b-ib7c42vmdj] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-light);
}

.dev-split__bc-search-icon[b-ib7c42vmdj] {
    font-size: var(--text-sm);
    color: var(--text-muted);
    flex-shrink: 0;
}

.dev-split__bc-search[b-ib7c42vmdj] {
    border: none;
    outline: none;
    background: transparent;
    color: var(--text);
    font-size: var(--text-base);
    width: 100%;
}

.dev-split__bc-options[b-ib7c42vmdj] {
    max-height: 240px;
    overflow-y: auto;
    padding: 4px 0;
}

.dev-split__bc-option[b-ib7c42vmdj] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: var(--text-base);
    color: var(--text);
    cursor: pointer;
    transition: background 0.1s;
}

.dev-split__bc-option:hover[b-ib7c42vmdj] {
    background: var(--surface);
}

.dev-split__bc-option--selected[b-ib7c42vmdj] {
    font-weight: var(--font-semibold);
    color: var(--accent);
}

.dev-split__bc-sep[b-ib7c42vmdj] {
    font-size: var(--text-xs);
    color: var(--text-muted);
    opacity: 0.5;
}

/* ── Header ── */

.dev-split__header[b-ib7c42vmdj] {
    flex-shrink: 0;
}

.dev-split__header-top[b-ib7c42vmdj] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 8px 20px 0;
}

.dev-split__device-icon[b-ib7c42vmdj] {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--bg);
    border: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-2xl);
    color: var(--text-muted);
}

.dev-split__header-left[b-ib7c42vmdj] {
    flex: 1;
    min-width: 0;
}

.dev-split__header-right[b-ib7c42vmdj] {
    flex-shrink: 0;
}

.dev-split__type-label[b-ib7c42vmdj] {
    font-size: var(--text-sm);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
}

.dev-split__name-row[b-ib7c42vmdj] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.dev-split__name[b-ib7c42vmdj] {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--text);
    display: flex;
    align-items: center;
}

.dev-split__name-sep[b-ib7c42vmdj] {
    color: var(--text-muted);
    opacity: 0.45;
    flex-shrink: 0;
    font-size: var(--text-lg);
    line-height: 1;
}

.dev-split__desc[b-ib7c42vmdj] {
    font-size: var(--text-base);
    color: var(--text-muted);
    display: flex;
    align-items: center;
}

.dev-split__snid[b-ib7c42vmdj] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--text-base);
    color: var(--text-muted);
    font-family: monospace;
    white-space: nowrap;
}
}

.dev-split__meta-item[b-ib7c42vmdj] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.dev-split__meta-item + .dev-split__meta-item[b-ib7c42vmdj]::before {
    content: "·";
    margin-right: 4px;
    color: var(--text-muted);
    opacity: 0.5;
}

.dev-split__updated[b-ib7c42vmdj] {
    font-size: var(--text-base);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.dev-split__refresh-btn[b-ib7c42vmdj] {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px;
    font-size: var(--text-base);
    transition: color 0.15s;
}

.dev-split__refresh-btn:hover[b-ib7c42vmdj] {
    color: var(--accent);
}

/* ── Status badges ── */

.dev-split__badges[b-ib7c42vmdj] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px 20px 0;
}

.dev-split__badge[b-ib7c42vmdj],
.dev-split__status-badge[b-ib7c42vmdj] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    padding: 3px 10px;
    border-radius: var(--radius-full);
    white-space: nowrap;
    background: var(--surface);
    border: 1px solid var(--border-light);
    color: var(--text);
}

.dev-split__status-badge--active[b-ib7c42vmdj] {
    background: rgba(39, 174, 96, 0.1);
    color: var(--success, #27ae60);
    border-color: rgba(39, 174, 96, 0.25);
}

.dev-split__status-badge--dev[b-ib7c42vmdj] {
    background: rgba(52, 152, 219, 0.1);
    color: #2980b9;
    border-color: rgba(52, 152, 219, 0.25);
}

.dev-split__status-badge--rma[b-ib7c42vmdj] {
    background: rgba(192, 57, 43, 0.1);
    color: var(--danger);
    border-color: rgba(192, 57, 43, 0.25);
}

.dev-split__badge--link[b-ib7c42vmdj] {
    background: var(--surface);
    border: 1px solid var(--border-light);
    color: var(--text);
}

.dev-split__badge--sensors[b-ib7c42vmdj] {
    background: var(--surface);
    border: 1px solid var(--border-light);
    color: var(--text);
}

.dev-split__badge--cases[b-ib7c42vmdj] {
    background: rgba(192, 57, 43, 0.1);
    color: var(--danger);
    border: 1px solid rgba(192, 57, 43, 0.25);
}

.dev-split__badge--connection[b-ib7c42vmdj] {
    background: var(--surface);
    border: 1px solid var(--border-light);
    color: var(--text);
}

/* ── Status dot icon ── */

.dev-split__status-dot[b-ib7c42vmdj] {
    font-size: 0.5rem;
    line-height: 1;
}

.dev-split__badge--device-status[b-ib7c42vmdj] {
    border: none;
    background: transparent;
    padding-left: 0;
}

.dev-split__badge--status-active .dev-split__status-dot[b-ib7c42vmdj] {
    color: var(--success, #27ae60);
}

.dev-split__badge--status-dev .dev-split__status-dot[b-ib7c42vmdj] {
    color: #2980b9;
}

.dev-split__badge--status-rma .dev-split__status-dot[b-ib7c42vmdj] {
    color: var(--danger);
}

.dev-split__badge--status-default .dev-split__status-dot[b-ib7c42vmdj] {
    color: var(--text-muted);
}

/* ── Badge dot separator ── */

.dev-split__badge-sep[b-ib7c42vmdj] {
    color: var(--text-muted);
    opacity: 0.4;
    font-size: var(--text-base);
    line-height: 1;
    flex-shrink: 0;
}

/* ── Latency color classes ── */

.dev-split__badge--latency-green[b-ib7c42vmdj] {
    color: var(--success, #27ae60);
    background: rgba(39, 174, 96, 0.08);
    border-color: rgba(39, 174, 96, 0.2);
}

.dev-split__badge--latency-orange[b-ib7c42vmdj] {
    color: #e67e22;
    background: rgba(230, 126, 34, 0.08);
    border-color: rgba(230, 126, 34, 0.2);
}

.dev-split__badge--latency-red[b-ib7c42vmdj] {
    color: var(--danger, #c0392b);
    background: rgba(192, 57, 43, 0.08);
    border-color: rgba(192, 57, 43, 0.2);
}

.dev-split__badges-spacer[b-ib7c42vmdj] {
    flex: 1;
}

.dev-split__action-btn[b-ib7c42vmdj] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    padding: 5px 14px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
    white-space: nowrap;
}

.dev-split__action-btn:hover[b-ib7c42vmdj] {
    border-color: var(--text-muted);
    background: var(--bg);
}

.dev-split__action-btn:disabled[b-ib7c42vmdj] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ── Clickable latency badge ── */

.dev-split__badge--clickable[b-ib7c42vmdj] {
    cursor: pointer;
    transition: all 0.15s;
}

.dev-split__badge--clickable:hover[b-ib7c42vmdj] {
    filter: brightness(0.92);
    box-shadow: 0 0 0 2px rgba(42, 157, 143, 0.25);
}

/* ── Command status banner ── */

.dev-split__cmd-status[b-ib7c42vmdj] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 20px;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    border-bottom: 1px solid var(--border-light);
}

.dev-split__cmd-status--pending[b-ib7c42vmdj] {
    color: var(--text-muted);
    background: var(--bg);
}

.dev-split__cmd-status--success[b-ib7c42vmdj] {
    color: var(--success);
    background: color-mix(in srgb, var(--success) 8%, var(--surface));
}

.dev-split__cmd-status--error[b-ib7c42vmdj] {
    color: var(--danger);
    background: color-mix(in srgb, var(--danger) 8%, var(--surface));
}

/* ── Tab bar ── */

.dev-split__tabs[b-ib7c42vmdj] {
    display: flex;
    gap: 0;
    padding: 0 20px;
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
    margin-top: 12px;
}

.dev-split__tab[b-ib7c42vmdj] {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 8px 16px;
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    font-family: inherit;
}

.dev-split__tab:hover[b-ib7c42vmdj] {
    color: var(--text);
}

.dev-split__tab--active[b-ib7c42vmdj] {
    color: var(--text);
    border-bottom-color: var(--accent);
    font-weight: var(--font-semibold);
}

/* ── Sticky note ── */

.dev-split__sticky[b-ib7c42vmdj] {
    margin: 14px 20px 0;
    background: var(--sticky-bg);
    border: 1px solid var(--sticky-border);
    border-radius: var(--radius-lg);
    padding: 12px 14px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    flex-shrink: 0;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

.dev-split__sticky:hover[b-ib7c42vmdj] {
    background: var(--sticky-bg-hover);
    cursor: pointer;
}

.dev-split__sticky-icon[b-ib7c42vmdj] {
    color: var(--text);
    font-size: var(--text-base);
    flex-shrink: 0;
    padding-top: 2px;
}

.dev-split__sticky-text[b-ib7c42vmdj] {
    font-size: var(--text-base);
    color: var(--text);
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

.dev-split__sticky--empty[b-ib7c42vmdj] {
    opacity: 0.6;
    cursor: pointer;
}

.dev-split__sticky--empty:hover[b-ib7c42vmdj] {
    /*opacity: 0.85;*/
}

.dev-split__sticky--empty .dev-split__sticky-text em[b-ib7c42vmdj] {
    /*font-style: italic;*/
    color: var(--text);
}

/* ── Two-column layout ── */

.dev-split__columns[b-ib7c42vmdj] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding: 14px 20px 20px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    align-items: start;
}

.dev-split__col-left[b-ib7c42vmdj],
.dev-split__col-right[b-ib7c42vmdj] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── Card ── */

.dev-split__card[b-ib7c42vmdj] {
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 16px;
}

.dev-split__card-header[b-ib7c42vmdj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.dev-split__card-header:last-child[b-ib7c42vmdj] {
    margin-bottom: 0;
}

.dev-split__card-header--collapsible[b-ib7c42vmdj] {
    cursor: pointer;
}

.dev-split__card-header-title[b-ib7c42vmdj] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text);
}

.dev-split__card-header-title i[b-ib7c42vmdj] {
    font-size: var(--text-base);
    color: var(--text-muted);
}

.dev-split__card-header-actions[b-ib7c42vmdj] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.dev-split__icon-btn[b-ib7c42vmdj] {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 6px;
    font-size: var(--text-base);
    border-radius: var(--radius-sm);
    transition: color 0.15s, background 0.15s;
}

.dev-split__icon-btn:hover[b-ib7c42vmdj] {
    color: var(--text);
    background: var(--bg);
}

.dev-split__collapse-icon[b-ib7c42vmdj] {
    font-size: var(--text-base);
    color: var(--text-muted);
}

/* ── Device Insights card ── */

.dev-split__insights-body[b-ib7c42vmdj] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
}

.dev-split__insights-left[b-ib7c42vmdj] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.dev-split__insights-badge[b-ib7c42vmdj] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    color: var(--info);
    background: var(--gray-200);
    border: 0px solid rgba(42, 157, 143, 0.2);
    border-radius: var(--radius-full);
    padding: 4px 12px;
}

.dev-split__insights-right[b-ib7c42vmdj] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.dev-split__hw-label[b-ib7c42vmdj] {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 10px;
}

.dev-split__hw-row[b-ib7c42vmdj] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-light);
}

.dev-split__hw-row:last-child[b-ib7c42vmdj] {
    border-bottom: none;
}

.dev-split__hw-icon[b-ib7c42vmdj] {
    flex-shrink: 0;
    width: 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: var(--text-base);
}

.dev-split__hw-key[b-ib7c42vmdj] {
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    color: var(--text-muted);
    min-width: 100px;
    flex-shrink: 0;
}

.dev-split__hw-val[b-ib7c42vmdj] {
    font-size: var(--text-base);
    color: var(--text);
    word-break: break-all;
    flex: 1;
    min-width: 0;
}

.dev-split__hw-val--mono[b-ib7c42vmdj] {
    font-family: monospace;
    font-size: var(--text-base);
}

.dev-split__hw-row  .vg-inline[b-ib7c42vmdj] {
    flex: 1;
    min-width: 0;
}

.dev-split__hw-row  .vg-inline__display[b-ib7c42vmdj] {
    font-family: monospace;
    font-size: var(--text-base);
}

.dev-split__hw-sep[b-ib7c42vmdj] {
    height: 1px;
    background: var(--border-light);
    margin: 6px 0;
}

/* ── Sensors card ── */

.dev-split__sensor-list[b-ib7c42vmdj] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dev-split__sensor-card[b-ib7c42vmdj] {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    gap: 12px;
    transition: background 0.15s;
}

.dev-split__sensor-card--paused[b-ib7c42vmdj] {
    background: rgba(255, 160, 100, 0.08);
}

.dev-split__sensor-card--disabled[b-ib7c42vmdj] {
    background: rgba(255, 100, 100, 0.08);
}

/* ── Main (left) column ── */

.dev-split__sensor-main[b-ib7c42vmdj] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Row 1: secondary info + statuses */
.dev-split__sensor-row1[b-ib7c42vmdj] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.dev-split__sensor-info[b-ib7c42vmdj] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-base);
    color: var(--text-muted);
}

.dev-split__sensor-type-label[b-ib7c42vmdj],
.dev-split__sensor-unit-label[b-ib7c42vmdj],
.dev-split__sensor-id-label[b-ib7c42vmdj] {
    white-space: nowrap;
}

.dev-split__sensor-sep[b-ib7c42vmdj] {
    color: var(--text-muted);
    opacity: 0.5;
    user-select: none;
}

.dev-split__sensor-statuses[b-ib7c42vmdj] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.dev-split__sensor-icon[b-ib7c42vmdj] {
    font-size: var(--text-base);
    color: var(--text-muted);
}

/* Row 2: name/desc + thresholds + differential */
.dev-split__sensor-row2[b-ib7c42vmdj] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.dev-split__sensor-name-block[b-ib7c42vmdj] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1 1 200px;
}

.dev-split__sensor-name[b-ib7c42vmdj] {
    font-size: var(--text-base);
    font-weight: var(--font-bold);
    color: var(--text);
}

.dev-split__sensor-desc[b-ib7c42vmdj] {
    font-size: var(--text-base);
    color: var(--text-muted);
    margin-bottom: 8px;
    line-height: 1.4;
}

/* ── Thresholds inline ── */

.dev-split__sensor-thresholds[b-ib7c42vmdj] {

    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.dev-split__threshold-lower[b-ib7c42vmdj],
.dev-split__threshold-upper[b-ib7c42vmdj] {
    min-width: 60px;
    white-space: nowrap;
}

.dev-split__threshold-lower .vg-inline__value[b-ib7c42vmdj],
.dev-split__threshold-upper .vg-inline__value[b-ib7c42vmdj] {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text);
}

.dev-split__threshold-lower .vg-inline__placeholder[b-ib7c42vmdj],
.dev-split__threshold-upper .vg-inline__placeholder[b-ib7c42vmdj] {
    font-weight: var(--font-normal);
}

.dev-split__threshold-arrow[b-ib7c42vmdj] {
    font-size: var(--text-base);
    color: var(--text-muted);
    white-space: nowrap;
}

.dev-split__threshold-divider[b-ib7c42vmdj] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 130px;
    justify-content: center;
}

.dev-split__threshold-line[b-ib7c42vmdj] {
    flex: 1;
    height: 1px;
    background: var(--border-light);
}

.dev-split__threshold-label[b-ib7c42vmdj] {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

/* ── Differential ── */

.dev-split__sensor-differential[b-ib7c42vmdj] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.dev-split__diff-symbol[b-ib7c42vmdj] {
    font-size: var(--text-base);
    color: var(--text-muted);
    white-space: nowrap;
}

.dev-split__diff-value[b-ib7c42vmdj] {
    min-width: 60px;
    white-space: nowrap;
}

.dev-split__diff-value .vg-inline__value[b-ib7c42vmdj] {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text);
}

.dev-split__diff-value .vg-inline__placeholder[b-ib7c42vmdj] {
    font-weight: var(--font-normal);
}

/* ── Right aside column: menu + status badges ── */

.dev-split__sensor-aside[b-ib7c42vmdj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    flex-shrink: 0;
}

.dev-split__sensor-menu-wrap[b-ib7c42vmdj] {
    position: relative;
}

.dev-split__sensor-menu-btn[b-ib7c42vmdj] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: var(--text-base);
    transition: all 0.15s;
    font-family: inherit;
}

.dev-split__sensor-menu-btn:hover[b-ib7c42vmdj] {
    background: var(--surface);
    border-color: var(--border-light);
    color: var(--text);
}

.dev-split__sensor-menu-backdrop[b-ib7c42vmdj] {
    position: fixed;
    inset: 0;
    z-index: 99;
}

.dev-split__sensor-menu[b-ib7c42vmdj] {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 100;
    background: var(--surface-raised, var(--surface));
    border: 1px solid var(--border-light);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,.15);
    min-width: 180px;
    overflow: hidden;
    padding: 4px 0;
}

.dev-split__sensor-menu-item[b-ib7c42vmdj] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 14px;
    font-size: var(--text-base);
    font-family: inherit;
    color: var(--text);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background 0.12s;
    white-space: nowrap;
}

.dev-split__sensor-menu-item:hover[b-ib7c42vmdj] {
    background: var(--bg);
}

.dev-split__sensor-menu-item--danger[b-ib7c42vmdj] {
    color: var(--danger, #e74c3c);
}

.dev-split__sensor-menu-item--danger:hover[b-ib7c42vmdj] {
    background: rgba(231, 76, 60, 0.08);
}

/* Status badge icons in aside column */

.dev-split__sensor-status-badge[b-ib7c42vmdj] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
}

.dev-split__sensor-status-badge--paused[b-ib7c42vmdj] {
    color: var(--warning, #f39c12);
    background: rgba(243, 156, 18, 0.12);
}

.dev-split__sensor-status-badge--disabled[b-ib7c42vmdj] {
    color: var(--danger, #e74c3c);
    background: rgba(231, 76, 60, 0.12);
}

/* ── Diag/sync badges (kept from before) ── */

.dev-split__sensor-diag[b-ib7c42vmdj] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    margin-left: 4px;
}

.dev-split__sensor-diag--running[b-ib7c42vmdj] {
    color: var(--success, #27ae60);
    background: rgba(39, 174, 96, 0.1);
}

.dev-split__sensor-diag--disabled[b-ib7c42vmdj] {
    color: var(--text-muted);
    background: var(--bg);
}

.dev-split__sensor-sync[b-ib7c42vmdj] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    margin-left: 4px;
}

.dev-split__sensor-sync--syncing[b-ib7c42vmdj] {
    color: var(--info, #3498db);
    background: rgba(52, 152, 219, 0.1);
}

.dev-split__sensor-sync--failed[b-ib7c42vmdj] {
    color: var(--danger, #e74c3c);
    background: rgba(231, 76, 60, 0.1);
}

.dev-split__sensor-sync--synced[b-ib7c42vmdj] {
    color: var(--success, #27ae60);
    background: rgba(39, 174, 96, 0.1);
}

/* ── Empty state ── */

.dev-split__empty[b-ib7c42vmdj] {
    font-size: var(--text-base);
    color: var(--text-muted);
    text-align: center;
    padding: 16px 0;
}

/* ── History card ── */

.dev-split__history-card[b-ib7c42vmdj] {
    display: flex;
    flex-direction: column;
    max-height: 100%;
    overflow: hidden;
}

.dev-split__history-search[b-ib7c42vmdj] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--white);
    border: 1px solid var(--tertiary);
    border-radius: var(--radius-full);
    padding: 6px 10px;
    margin-bottom: 8px;
    max-width: 400px;
}

.dev-split__history-search-icon[b-ib7c42vmdj] {
    font-size: var(--text-base);
    color: var(--text-muted);
    flex-shrink: 0;
}

.dev-split__history-input[b-ib7c42vmdj] {
    border: none;
    outline: none;
    background: transparent;
    font-size: var(--text-base);
    color: var(--text);
    width: 100%;
    font-family: inherit;
}

.dev-split__history-input[b-ib7c42vmdj]::placeholder {
    color: var(--text-muted);
}

.dev-split__history-count[b-ib7c42vmdj] {
    font-size: var(--text-base);
    color: var(--text-muted);
    margin-bottom: 8px;
    text-align: right;
}

/* ── History filter tabs ── */

.dev-split__history-tabs[b-ib7c42vmdj] {
    display: flex;
    gap: 0px;
    margin-left: auto;
    border-radius: var(--radius-md);
    border: 1px solid var(--tertiary-200);
}

.dev-split__history-tabs:first-child[b-ib7c42vmdj] {
  border-top-left-radius: var(--radius-md);  
  border-bottom-left-radius: var(--radius-md);    
}

.dev-split__history-tabs:last-child[b-ib7c42vmdj] {
  border-top-right-radius: var(--radius-md);  
  border-bottom-right-radius: var(--radius-md);    
}

.dev-split__htab[b-ib7c42vmdj] {
    padding: 8px 16px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--white);
    color: var(--primary);
    font-family: var(--font-family);
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}

.dev-split__htab:hover[b-ib7c42vmdj] {
    background: var(--tertiary);
    color: var(--white);
    border-color: var(--white);
}

.dev-split__htab--active[b-ib7c42vmdj] {
    background: var(--tertiary);
    color: var(--white);
    border-color: var(--white);
}

/* ── History sub-filter badges ── */

.dev-split__history-badges[b-ib7c42vmdj] {
    display: none;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 10px;
}

.dev-split__hbadge[b-ib7c42vmdj] {
    background: var(--bg);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: 2px 8px;
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}

.dev-split__hbadge:hover[b-ib7c42vmdj] {
    color: var(--text);
    border-color: var(--text-muted);
}

.dev-split__hbadge--active[b-ib7c42vmdj] {
    background: var(--accent);
    color: var(--white);
    border-color: var(--accent);
}

.dev-split__history-latest[b-ib7c42vmdj] {
    font-size: var(--text-base);
    color: var(--text-muted);
    text-align: right;
    margin-bottom: 10px;
    font-style: italic;
}

/* ── History entries ── */

.dev-split__history-list[b-ib7c42vmdj] {
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.dev-split__history-entry[b-ib7c42vmdj] {
    display: flex;
    gap: 10px;
    padding: 10px 0;
    border-top: 1px solid var(--border-light);
}

.dev-split__history-entry:first-child[b-ib7c42vmdj] {
    border-top: none;
}

.dev-split__history-icon-wrap[b-ib7c42vmdj] {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.dev-split__history-icon[b-ib7c42vmdj] {
    font-size: var(--text-base);
    color: var(--text-muted);
}

.dev-split__history-body[b-ib7c42vmdj] {
    flex: 1;
    min-width: 0;
}

.dev-split__history-header[b-ib7c42vmdj] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.dev-split__history-title[b-ib7c42vmdj] {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text);
}

.dev-split__history-meta[b-ib7c42vmdj] {
    font-size: var(--text-base);
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Case card inside history ── */

.dev-split__case-card[b-ib7c42vmdj] {
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
}

.dev-split__case-badges[b-ib7c42vmdj] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.dev-split__case-priority[b-ib7c42vmdj] {
    display: inline-flex;
    align-items: center;
    font-size: var(--text-base);
    font-weight: var(--font-bold);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    text-transform: uppercase;
}

.dev-split__case-priority--critical[b-ib7c42vmdj] {
    background: var(--danger);
    color: var(--white);
}

.dev-split__case-priority--high[b-ib7c42vmdj] {
    background: #e67e22;
    color: var(--white);
}

.dev-split__case-priority--medium[b-ib7c42vmdj] {
    background: #f39c12;
    color: var(--white);
}

.dev-split__case-priority--low[b-ib7c42vmdj] {
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border-light);
}

.dev-split__case-status[b-ib7c42vmdj] {
    display: inline-flex;
    align-items: center;
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    text-transform: uppercase;
}

.dev-split__case-category[b-ib7c42vmdj] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-base);
    color: var(--text-muted);
}

.dev-split__case-reason[b-ib7c42vmdj] {
    font-size: var(--text-base);
    color: var(--text);
    line-height: 1.4;
    margin-bottom: 6px;
}

.dev-split__case-context[b-ib7c42vmdj] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: var(--text-base);
    color: var(--text-muted);
}

.dev-split__case-context i[b-ib7c42vmdj] {
    margin-right: 4px;
}

/* ── History diff ── */

.dev-split__history-diff[b-ib7c42vmdj] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: var(--text-base);
    margin-bottom: 4px;
}

.dev-split__diff-old[b-ib7c42vmdj] {
    color: var(--danger);
    text-decoration: line-through;
}

.dev-split__diff-arrow[b-ib7c42vmdj] {
    font-size: var(--text-base);
    color: var(--text-muted);
}

.dev-split__diff-new[b-ib7c42vmdj] {
    color: var(--success, #2d8a4e);
    font-weight: var(--font-medium);
}

.dev-split__history-note[b-ib7c42vmdj] {
    background: var(--bg);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    font-size: var(--text-base);
    color: var(--text);
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ── Placeholder tabs ── */

.dev-split__placeholder[b-ib7c42vmdj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 60px 24px;
    flex: 1;
}

.dev-split__placeholder-icon[b-ib7c42vmdj] {
    font-size: var(--text-3xl);
    color: var(--accent);
}

.dev-split__placeholder-title[b-ib7c42vmdj] {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--text);
}

.dev-split__placeholder-hint[b-ib7c42vmdj] {
    margin: 0;
    font-size: var(--text-base);
    color: var(--text-muted);
}
/* /Components/SplitContent/OrganizationSplitContent.razor.rz.scp.css */
/* ===================================================================
   OrganizationSplitContent — Redesigned org detail panel
   =================================================================== */

.org-split[b-vuhxx02xp0] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.org-split--loading[b-vuhxx02xp0],
.org-split--error[b-vuhxx02xp0] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: var(--text-base);
    height: 100%;
}

.org-split--error[b-vuhxx02xp0] {
    color: var(--danger);
}

/* ── Header ── */

.org-split__header[b-vuhxx02xp0] {
    padding: 16px 20px 0;
    flex-shrink: 0;
}

.org-split__header-top[b-vuhxx02xp0] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.org-split__header-left[b-vuhxx02xp0] {
    flex: 1;
    min-width: 0;
}

.org-split__header-right[b-vuhxx02xp0] {
    flex-shrink: 0;
}

.org-split__type-label[b-vuhxx02xp0] {
    font-size: var(--text-sm);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
}

.org-split__name[b-vuhxx02xp0] {
    margin: 0 0 6px;
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.org-split__name-icon[b-vuhxx02xp0] {
    font-size: var(--text-xl);
    color: var(--text-muted);
}

.org-split__meta[b-vuhxx02xp0] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: var(--text-base);
    color: var(--text-muted);
    margin-bottom: 4px;
}

.org-split__meta-item[b-vuhxx02xp0] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.org-split__tz[b-vuhxx02xp0] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--danger);
    font-weight: var(--font-semibold);
}

.org-split__updated[b-vuhxx02xp0] {
    font-size: var(--text-sm);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.org-split__refresh-btn[b-vuhxx02xp0] {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px;
    font-size: var(--text-sm);
    transition: color 0.15s;
}

.org-split__refresh-btn:hover[b-vuhxx02xp0] {
    color: var(--accent);
}

/* ── Badges ── */

.org-split__badges[b-vuhxx02xp0] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 8px 0 4px;
}

.org-split__badge[b-vuhxx02xp0] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    padding: 3px 10px;
    border-radius: var(--radius-full);
    white-space: nowrap;
}

.org-split__badge--cases[b-vuhxx02xp0] {
    background: rgba(192, 57, 43, 0.1);
    color: var(--danger);
    border: 1px solid rgba(192, 57, 43, 0.25);
}

.org-split__badge--disconnect[b-vuhxx02xp0] {
    background: rgba(192, 57, 43, 0.1);
    color: var(--danger);
    border: 1px solid rgba(192, 57, 43, 0.25);
}

.org-split__badge--contact[b-vuhxx02xp0] {
    background: var(--surface);
    border: 1px solid var(--border-light);
    color: var(--text);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Tab bar ── */

.org-split__tabs[b-vuhxx02xp0] {
    display: flex;
    gap: 0;
    padding: 0 20px;
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
    margin-top: 12px;
}

.org-split__tab[b-vuhxx02xp0] {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 8px 16px;
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    font-family: inherit;
}

.org-split__tab:hover[b-vuhxx02xp0] {
    color: var(--text);
}

.org-split__tab--active[b-vuhxx02xp0] {
    color: var(--text);
    border-bottom-color: var(--accent);
    font-weight: var(--font-semibold);
}

/* ── Sticky note ── */

.org-split__sticky[b-vuhxx02xp0] {
    margin: 14px 20px 0;
    background: #fef9e7;
    border: 1px solid #f0e4a8;
    border-radius: var(--radius-md);
    padding: 12px 14px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    flex-shrink: 0;
}

.org-split__sticky-icon[b-vuhxx02xp0] {
    color: #c49a2a;
    font-size: var(--text-base);
    flex-shrink: 0;
    padding-top: 2px;
}

.org-split__sticky-text[b-vuhxx02xp0] {
    font-size: var(--text-base);
    color: #5c4b1f;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

.org-split__sticky--empty[b-vuhxx02xp0] {
    opacity: 0.6;
    cursor: pointer;
}

.org-split__sticky--empty:hover[b-vuhxx02xp0] {
    opacity: 0.85;
}

.org-split__sticky--empty .org-split__sticky-text em[b-vuhxx02xp0] {
    font-style: italic;
    color: #8a7a4a;
}

/* ── Two-column layout ── */

.org-split__columns[b-vuhxx02xp0] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding: 14px 20px 20px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    align-items: start;
}

.org-split__col-left[b-vuhxx02xp0],
.org-split__col-right[b-vuhxx02xp0] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── Card ── */

.org-split__card[b-vuhxx02xp0] {
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 16px;
}

.org-split__card-header[b-vuhxx02xp0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.org-split__card-header:last-child[b-vuhxx02xp0] {
    margin-bottom: 0;
}

.org-split__card-header--collapsible[b-vuhxx02xp0] {
    cursor: pointer;
}

.org-split__card-header-title[b-vuhxx02xp0] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text);
}

.org-split__card-header-title i[b-vuhxx02xp0] {
    font-size: var(--text-base);
    color: var(--text-muted);
}

.org-split__card-header-actions[b-vuhxx02xp0] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.org-split__icon-btn[b-vuhxx02xp0] {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 6px;
    font-size: var(--text-sm);
    border-radius: var(--radius-sm);
    transition: color 0.15s, background 0.15s;
}

.org-split__icon-btn:hover[b-vuhxx02xp0] {
    color: var(--text);
    background: var(--bg);
}

.org-split__collapse-icon[b-vuhxx02xp0] {
    font-size: var(--text-sm);
    color: var(--text-muted);
}

/* ── Insights placeholder ── */

.org-split__insights-badge[b-vuhxx02xp0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--accent);
    background: rgba(42, 157, 143, 0.08);
    border: 1px solid rgba(42, 157, 143, 0.2);
    border-radius: var(--radius-full);
    padding: 4px 12px;
}

/* ── Sites list ── */

.org-split__site[b-vuhxx02xp0] {
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    margin-bottom: 8px;
    overflow: hidden;
}

.org-split__site:last-child[b-vuhxx02xp0] {
    margin-bottom: 0;
}

.org-split__site--expanded[b-vuhxx02xp0] {
    border-color: var(--border);
}

.org-split__site-header[b-vuhxx02xp0] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 12px 14px;
    cursor: pointer;
    transition: background 0.1s;
    gap: 10px;
}

.org-split__site-header:hover[b-vuhxx02xp0] {
    background: var(--bg);
}

.org-split__site-info[b-vuhxx02xp0] {
    flex: 1;
    min-width: 0;
}

.org-split__site-name[b-vuhxx02xp0] {
    display: block;
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text);
    margin-bottom: 2px;
}

.org-split__site-address[b-vuhxx02xp0] {
    display: block;
    font-size: var(--text-sm);
    color: var(--text-muted);
    line-height: 1.4;
}

.org-split__site-badges[b-vuhxx02xp0] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.org-split__site-tz[b-vuhxx02xp0] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-sm);
    color: var(--danger);
    font-weight: var(--font-medium);
    white-space: nowrap;
}

/* ── Devices under site ── */

.org-split__site-devices[b-vuhxx02xp0] {
    padding: 0 14px 12px;
    border-top: 1px solid var(--border-light);
}

.org-split__site-devices-label[b-vuhxx02xp0] {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 10px 0 6px;
}

.org-split__device-row[b-vuhxx02xp0] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: var(--text-base);
}

.org-split__device-name[b-vuhxx02xp0] {
    font-weight: var(--font-medium);
    color: var(--text);
}

.org-split__device-sensors[b-vuhxx02xp0] {
    color: var(--text-muted);
    font-size: var(--text-sm);
}

.org-split__device-spacer[b-vuhxx02xp0] {
    flex: 1;
}

.org-split__device-status--online[b-vuhxx02xp0] {
    color: #2d8a4e;
    font-size: var(--text-sm);
}

.org-split__device-status--offline[b-vuhxx02xp0] {
    color: var(--danger);
    font-size: var(--text-sm);
}

.org-split__device-snid[b-vuhxx02xp0] {
    font-size: var(--text-sm);
    color: var(--text-muted);
    font-family: monospace;
    white-space: nowrap;
}

/* ── Empty state ── */

.org-split__empty[b-vuhxx02xp0] {
    font-size: var(--text-base);
    color: var(--text-muted);
    text-align: center;
    padding: 16px 0;
}

.org-split__empty--sm[b-vuhxx02xp0] {
    padding: 8px 0;
    font-size: var(--text-sm);
}

/* ── History card ── */

.org-split__history-card[b-vuhxx02xp0] {
    display: flex;
    flex-direction: column;
    max-height: 100%;
    overflow: hidden;
}

.org-split__history-search[b-vuhxx02xp0] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--white);
    border: 1px solid var(--tertiary);
    border-radius: var(--radius-full);
    padding: 6px 10px;
    margin-bottom: 8px;
    max-width: 400px;
}

.org-split__history-search-icon[b-vuhxx02xp0] {
    font-size: var(--text-base);
    color: var(--text-muted);
    flex-shrink: 0;
}

.org-split__history-input[b-vuhxx02xp0] {
    border: none;
    outline: none;
    background: transparent;
    font-size: var(--text-base);
    color: var(--text);
    width: 100%;
    font-family: inherit;
}

.org-split__history-input[b-vuhxx02xp0]::placeholder {
    color: var(--text-muted);
}

.org-split__history-count[b-vuhxx02xp0] {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin-bottom: 8px;
    text-align: right;
}

/* ── History filter tabs ── */

.org-split__history-tabs[b-vuhxx02xp0] {
    display: flex;
    flex-wrap: wrap;
    gap: 0px;
    margin-bottom: 6px;
    border-radius: var(--radius-md);
    border: 1px solid var(--tertiary-200);
    width: fit-content;
}

.org-split__history-tabs button:first-child[b-vuhxx02xp0] {
  border-top-left-radius: var(--radius-md);  
  border-bottom-left-radius: var(--radius-md);    
}

.org-split__history-tabs button:last-child[b-vuhxx02xp0] {
  border-top-right-radius: var(--radius-md);  
  border-bottom-right-radius: var(--radius-md);    
}

.org-split__htab[b-vuhxx02xp0] {
    background: var(--white);
    border: 1px solid transparent;
    /*border-radius: var(--radius-sm);*/
    padding: 8px 16px;
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    color: var(--primary);
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}

.org-split__htab:hover[b-vuhxx02xp0] {
    background: var(--tertiary);
    color: var(--white);
    border-color: var(--white);
}

.org-split__htab--active[b-vuhxx02xp0] {
    background: var(--tertiary);
    color: var(--white);
    border-color: transparent;
}

/* ── History sub-filter badges ── */

.org-split__history-badges[b-vuhxx02xp0] {
    display: none;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 10px;
}

.org-split__hbadge[b-vuhxx02xp0] {
    background: var(--secondary);
    border: 0px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 2px 8px;
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    color: var(--primary);
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}

.org-split__hbadge:hover[b-vuhxx02xp0] {
    color: var(--text);
    border-color: var(--text-muted);
}

.org-split__hbadge--active[b-vuhxx02xp0] {
    background: var(--accent);
    color: var(--white);
    border-color: var(--accent);
}

.org-split__history-latest[b-vuhxx02xp0] {
    font-size: var(--text-sm);
    color: var(--text-muted);
    text-align: right;
    margin-bottom: 10px;
    font-style: italic;
}

/* ── History entries ── */

.org-split__history-list[b-vuhxx02xp0] {
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.org-split__history-entry[b-vuhxx02xp0] {
    display: flex;
    gap: 10px;
    padding: 10px 0;
    border-top: 1px solid var(--border-light);
}

.org-split__history-entry:first-child[b-vuhxx02xp0] {
    border-top: none;
}

.org-split__history-icon-wrap[b-vuhxx02xp0] {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.org-split__history-icon[b-vuhxx02xp0] {
    font-size: var(--text-sm);
    color: var(--white);
}

.org-split__history-body[b-vuhxx02xp0] {
    flex: 1;
    min-width: 0;
}

.org-split__history-header[b-vuhxx02xp0] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.org-split__history-title[b-vuhxx02xp0] {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text);
}

.org-split__history-meta[b-vuhxx02xp0] {
    font-size: var(--text-sm);
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Case card inside history ── */

.org-split__case-card[b-vuhxx02xp0] {
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
}

.org-split__case-badges[b-vuhxx02xp0] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.org-split__case-priority[b-vuhxx02xp0] {
    display: inline-flex;
    align-items: center;
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    text-transform: uppercase;
}

.org-split__case-priority--critical[b-vuhxx02xp0] {
    background: var(--danger);
    color: var(--white);
}

.org-split__case-priority--high[b-vuhxx02xp0] {
    background: #e67e22;
    color: var(--white);
}

.org-split__case-priority--medium[b-vuhxx02xp0] {
    background: #f39c12;
    color: var(--white);
}

.org-split__case-priority--low[b-vuhxx02xp0] {
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border-light);
}

.org-split__case-status[b-vuhxx02xp0] {
    display: inline-flex;
    align-items: center;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    text-transform: uppercase;
}

.org-split__case-category[b-vuhxx02xp0] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.org-split__case-reason[b-vuhxx02xp0] {
    font-size: var(--text-base);
    color: var(--text);
    line-height: 1.4;
    margin-bottom: 6px;
}

.org-split__case-context[b-vuhxx02xp0] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.org-split__case-context i[b-vuhxx02xp0] {
    margin-right: 4px;
}

/* ── History diff ── */

.org-split__history-diff[b-vuhxx02xp0] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: var(--text-base);
    margin-bottom: 4px;
}

.org-split__diff-old[b-vuhxx02xp0] {
    color: var(--danger);
    text-decoration: line-through;
}

.org-split__diff-arrow[b-vuhxx02xp0] {
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.org-split__diff-new[b-vuhxx02xp0] {
    color: var(--success, #2d8a4e);
    font-weight: var(--font-medium);
}

.org-split__history-note[b-vuhxx02xp0] {
    background: var(--bg);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    font-size: var(--text-base);
    color: var(--text);
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ── Add Site inline ── */

.org-split__add-site[b-vuhxx02xp0] {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-light);
}

.org-split__add-site-row[b-vuhxx02xp0] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.org-split__add-site-icon[b-vuhxx02xp0] {
    color: var(--text-muted);
    font-size: var(--text-base);
    flex-shrink: 0;
}

.org-split__add-site-input[b-vuhxx02xp0] {
    flex: 1;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: var(--text-base);
    background: var(--bg);
    color: var(--text);
    outline: none;
}

.org-split__add-site-input:focus[b-vuhxx02xp0] {
    border-color: var(--accent);
}

.org-split__add-site-btn[b-vuhxx02xp0] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: var(--text-base);
    transition: background 0.15s;
}

.org-split__add-site-btn--confirm[b-vuhxx02xp0] {
    color: var(--success, #2d8a4e);
}

.org-split__add-site-btn--confirm:hover:not(:disabled)[b-vuhxx02xp0] {
    background: rgba(45, 138, 78, 0.1);
}

.org-split__add-site-btn--confirm:disabled[b-vuhxx02xp0] {
    opacity: 0.4;
    cursor: not-allowed;
}

.org-split__add-site-btn--cancel[b-vuhxx02xp0] {
    color: var(--text-muted);
}

.org-split__add-site-btn--cancel:hover[b-vuhxx02xp0] {
    background: var(--surface);
    color: var(--danger);
}

.org-split__add-site-error[b-vuhxx02xp0] {
    font-size: var(--text-base);
    color: var(--danger);
    margin-top: 4px;
    padding-left: 28px;
}
/* /Components/SplitContent/OrgTelemetryPanel.razor.rz.scp.css */
/* ===================================================================
   OrgTelemetryPanel — Org-level telemetry with Site→Device→Sensor tree
   =================================================================== */

.org-telemetry[b-vbnl8slv0f] {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 14px 20px 20px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    container-type: inline-size;
}

/* ── Toolbar (mode + sensor tools) ── */

.org-telemetry__toolbar[b-vbnl8slv0f] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.org-telemetry__mode-bar[b-vbnl8slv0f] {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.org-telemetry__sensor-tools[b-vbnl8slv0f] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--border-light);
    min-width: 0;
    flex-wrap: wrap;
}

.org-telemetry__sensor-count[b-vbnl8slv0f] {
    font-size: var(--text-base);
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.org-telemetry__mode-btn[b-vbnl8slv0f] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: 6px 14px;
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}

.org-telemetry__mode-btn:hover[b-vbnl8slv0f] {
    color: var(--text);
    border-color: var(--text-muted);
}

.org-telemetry__mode-btn--active[b-vbnl8slv0f] {
    background: var(--accent);
    color: var(--white);
    border-color: var(--accent);
}

/* ── Stacked layout (charts on top, sensors below) ── */

.org-telemetry__content[b-vbnl8slv0f] {
    display: flex;
    flex-direction: column;
}

.org-telemetry__charts-col[b-vbnl8slv0f] {
    display: flex;
    flex-direction: column;
    margin-bottom: 8px;
}

.org-telemetry__sensors-col[b-vbnl8slv0f] {
    display: flex;
    flex-direction: column;
}


/* ── Time toolbar ── */

.org-telemetry__time-bar[b-vbnl8slv0f] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    flex-shrink: 0;
}

.org-telemetry__presets[b-vbnl8slv0f] {
    display: flex;
    gap: 4px;
}

.org-telemetry__preset[b-vbnl8slv0f] {
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: 4px 12px;
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}

.org-telemetry__preset:hover[b-vbnl8slv0f] {
    color: var(--text);
    border-color: var(--text-muted);
}

.org-telemetry__preset--active[b-vbnl8slv0f] {
    background: var(--accent);
    color: var(--white);
    border-color: var(--accent);
}

.org-telemetry__date-range[b-vbnl8slv0f] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.org-telemetry__date-input[b-vbnl8slv0f] {
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: 4px 8px;
    font-size: var(--text-base);
    color: var(--text);
    outline: none;
    font-family: inherit;
}

.org-telemetry__date-input:focus[b-vbnl8slv0f] {
    border-color: var(--accent);
}

.org-telemetry__date-sep[b-vbnl8slv0f] {
    font-size: var(--text-base);
    color: var(--text-muted);
}

.org-telemetry__fetch-btn[b-vbnl8slv0f] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--accent);
    color: var(--white);
    border: none;
    border-radius: var(--radius-sm);
    padding: 5px 16px;
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    cursor: pointer;
    transition: opacity 0.15s;
    margin-left: auto;
    font-family: inherit;
}

.org-telemetry__fetch-btn:hover:not(:disabled)[b-vbnl8slv0f] {
    opacity: 0.85;
}

.org-telemetry__fetch-btn:disabled[b-vbnl8slv0f] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Error banner ── */

.org-telemetry__error[b-vbnl8slv0f] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    margin-bottom: 12px;
    background: rgba(220, 60, 60, 0.08);
    border: 1px solid rgba(220, 60, 60, 0.3);
    border-radius: var(--radius-sm);
    font-size: var(--text-base);
    color: var(--danger);
    flex-shrink: 0;
}

.org-telemetry__error i:first-child[b-vbnl8slv0f] {
    flex-shrink: 0;
}

.org-telemetry__error span[b-vbnl8slv0f] {
    flex: 1;
    min-width: 0;
    word-break: break-word;
}

.org-telemetry__error-dismiss[b-vbnl8slv0f] {
    background: none;
    border: none;
    color: var(--danger);
    cursor: pointer;
    padding: 2px 4px;
    opacity: 0.6;
    flex-shrink: 0;
}

.org-telemetry__error-dismiss:hover[b-vbnl8slv0f] {
    opacity: 1;
}

/* ── Chart sections ── */

.org-telemetry__chart-section[b-vbnl8slv0f] {
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    margin-bottom: 12px;
    flex-shrink: 0;
    overflow: hidden;
}

.org-telemetry__chart-header[b-vbnl8slv0f] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text);
    border-bottom: 1px solid var(--border-light);
}

.org-telemetry__chart-header i[b-vbnl8slv0f] {
    font-size: var(--text-base);
    color: var(--text-muted);
}

.org-telemetry__chart-wrap[b-vbnl8slv0f] {
    position: relative;
    aspect-ratio: 16 / 8;
    min-height: 200px;
    max-height: 380px;
    overflow: hidden;
    overscroll-behavior: contain;
}

.org-telemetry__chart-wrap--small[b-vbnl8slv0f] {
    aspect-ratio: 16 / 5;
    min-height: 140px;
    max-height: 260px;
}

.org-telemetry__chart-target[b-vbnl8slv0f] {
    width: 100%;
    height: 100%;
}

.org-telemetry__chart-empty[b-vbnl8slv0f] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: var(--text-base);
    background: var(--surface);
    z-index: 1;
}

.org-telemetry__chart-empty i[b-vbnl8slv0f] {
    font-size: var(--text-2xl);
    opacity: 0.35;
}

/* ── Table section (Site → Device → Sensor tree) ── */

.org-telemetry__table-section[b-vbnl8slv0f] {
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    overflow: hidden;
    flex-shrink: 0;
}

.org-telemetry__type-filter[b-vbnl8slv0f] {
    background: var(--bg);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: 4px 8px;
    font-size: var(--text-base);
    color: var(--text);
    outline: none;
    flex-shrink: 0;
    font-family: inherit;
}

/* ── Column headers ── */

.org-telemetry__col-headers[b-vbnl8slv0f] {
    display: grid;
    grid-template-columns: minmax(120px, 1.4fr) 80px 2fr 50px 80px;
    gap: 8px;
    padding: 6px 14px 6px 42px;
    background: var(--bg);
    border-bottom: 1px solid var(--border-light);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text-muted);
}

.org-telemetry__col-eye-icon[b-vbnl8slv0f] {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin-right: 2px;
}

.org-telemetry__table-loading[b-vbnl8slv0f],
.org-telemetry__table-empty[b-vbnl8slv0f] {
    padding: 20px;
    text-align: center;
    font-size: var(--text-base);
    color: var(--text-muted);
}

/* ── Site list ── */

.org-telemetry__site-list[b-vbnl8slv0f] {
    display: flex;
    flex-direction: column;
}

/* ── Site rows (level 1) ── */

.org-telemetry__site[b-vbnl8slv0f] {
    border-bottom: 1px solid var(--border-light);
}

.org-telemetry__site:last-child[b-vbnl8slv0f] {
    border-bottom: none;
}

.org-telemetry__site-row[b-vbnl8slv0f] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    background: var(--bg);
    border: none;
    cursor: pointer;
    transition: background 0.1s;
    text-align: left;
    font-family: inherit;
    font-size: var(--text-base);
}

.org-telemetry__site-row:hover[b-vbnl8slv0f] {
    background: rgba(var(--accent-rgb, 59, 130, 246), 0.04);
}

.org-telemetry__site-chevron[b-vbnl8slv0f] {
    font-size: var(--text-xs);
    color: var(--text-muted);
    width: 14px;
    text-align: center;
    flex-shrink: 0;
}

.org-telemetry__site-icon[b-vbnl8slv0f] {
    font-size: var(--text-base);
    color: var(--accent);
    flex-shrink: 0;
}

.org-telemetry__site-name[b-vbnl8slv0f] {
    font-weight: var(--font-bold);
    color: var(--text);
}

.org-telemetry__site-count[b-vbnl8slv0f] {
    font-size: var(--text-base);
    color: var(--text-muted);
    white-space: nowrap;
}

/* ── Device rows (level 2) ── */

.org-telemetry__device[b-vbnl8slv0f] {
    border-top: 1px solid var(--border-light);
}

.org-telemetry__device-row[b-vbnl8slv0f] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 14px 8px 28px;
    background: none;
    border: none;
    cursor: pointer;
    transition: background 0.1s;
    text-align: left;
    font-family: inherit;
    font-size: var(--text-base);
}

.org-telemetry__device-row:hover[b-vbnl8slv0f] {
    background: var(--bg);
}

.org-telemetry__device-chevron[b-vbnl8slv0f] {
    font-size: var(--text-xs);
    color: var(--text-muted);
    width: 14px;
    text-align: center;
    flex-shrink: 0;
}

.org-telemetry__device-name[b-vbnl8slv0f] {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text);
}

.org-telemetry__device-count[b-vbnl8slv0f] {
    font-size: var(--text-base);
    color: var(--text-muted);
    white-space: nowrap;
}

.org-telemetry__device-spacer[b-vbnl8slv0f] {
    flex: 1;
}

.org-telemetry__status--online[b-vbnl8slv0f] {
    color: #2d8a4e;
}

.org-telemetry__status--offline[b-vbnl8slv0f] {
    color: var(--danger);
}

.org-telemetry__device-snid[b-vbnl8slv0f] {
    font-size: var(--text-base);
    color: var(--text-muted);
    font-family: monospace;
    white-space: nowrap;
}

/* ── Device description ── */

.org-telemetry__device-desc[b-vbnl8slv0f] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 0 14px 6px 52px;
    font-size: var(--text-base);
    font-style: italic;
    color: var(--text-muted);
}

.org-telemetry__desc-dot[b-vbnl8slv0f] {
    font-size: 5px;
    color: var(--text-muted);
    opacity: 0.5;
    flex-shrink: 0;
}

/* ── Sensor rows (level 3) ── */

.org-telemetry__sensor-list[b-vbnl8slv0f] {
    display: flex;
    flex-direction: column;
}

.org-telemetry__sensor-empty[b-vbnl8slv0f] {
    padding: 10px 14px 10px 56px;
    font-size: var(--text-base);
    color: var(--text-muted);
}

.org-telemetry__sensor-row[b-vbnl8slv0f] {
    display: grid;
    grid-template-columns: minmax(120px, 1.4fr) 80px 2fr 50px 80px;
    gap: 8px;
    align-items: center;
    padding: 5px 14px 5px 56px;
    cursor: pointer;
    transition: background 0.1s;
    font-size: var(--text-base);
    border-top: 1px solid var(--border-light);
}

.org-telemetry__sensor-row:hover[b-vbnl8slv0f] {
    background: rgba(var(--accent-rgb, 59, 130, 246), 0.06);
}

.org-telemetry__sensor-row--selected[b-vbnl8slv0f] {
    background: rgba(var(--accent-rgb, 59, 130, 246), 0.10);
}

/* ── Eye button (sensor row) ── */

.org-telemetry__eye-btn[b-vbnl8slv0f] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    opacity: 0.3;
    cursor: pointer;
    font-size: var(--text-sm);
    flex-shrink: 0;
    transition: all 0.15s;
    padding: 0;
}

.org-telemetry__eye-btn:hover[b-vbnl8slv0f] {
    opacity: 0.7;
    color: var(--accent);
}

.org-telemetry__eye-btn--active[b-vbnl8slv0f] {
    opacity: 1;
    color: var(--accent);
}

/* ── Sensor cells ── */

.org-telemetry__sensor-cell[b-vbnl8slv0f] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
}

.org-telemetry__sensor-cell--name[b-vbnl8slv0f] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: var(--font-medium);
    color: var(--text);
    min-width: 0;
}

.org-telemetry__sensor-cell--desc[b-vbnl8slv0f] {
    color: var(--text-muted);
}

.org-telemetry__sensor-cell--idle[b-vbnl8slv0f] {
    text-align: center;
    font-size: 7px;
    color: var(--text-muted);
    opacity: 0.5;
}

.org-telemetry__sensor-cell--val[b-vbnl8slv0f] {
    text-align: right;
    font-family: monospace;
    font-weight: var(--font-medium);
}

/* ── Global eye (selection summary) ── */

.org-telemetry__global-eye-wrap[b-vbnl8slv0f] {
    position: relative;
    flex-shrink: 0;
}

.org-telemetry__global-eye[b-vbnl8slv0f] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: 4px 10px;
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}

.org-telemetry__global-eye:hover[b-vbnl8slv0f] {
    border-color: var(--text-muted);
    color: var(--text);
}

.org-telemetry__global-eye--active[b-vbnl8slv0f] {
    color: var(--accent);
    border-color: var(--accent);
}

/* ── Selection popover ── */

.org-telemetry__selection-popover[b-vbnl8slv0f] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 100;
    min-width: 300px;
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

.org-telemetry__popover-header[b-vbnl8slv0f] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-light);
}

.org-telemetry__popover-clear[b-vbnl8slv0f] {
    background: none;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: 2px 10px;
    font-size: var(--text-sm);
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
    font-family: inherit;
}

.org-telemetry__popover-clear:hover[b-vbnl8slv0f] {
    color: var(--text);
    border-color: var(--text-muted);
}

.org-telemetry__popover-item[b-vbnl8slv0f] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 14px;
    font-size: var(--text-base);
    color: var(--text);
    border-bottom: 1px solid var(--border-light);
}

.org-telemetry__popover-item:last-child[b-vbnl8slv0f] {
    border-bottom: none;
}

.org-telemetry__popover-remove[b-vbnl8slv0f] {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px 4px;
    font-size: var(--text-sm);
    transition: color 0.15s;
    flex-shrink: 0;
}

.org-telemetry__popover-remove:hover[b-vbnl8slv0f] {
    color: var(--danger);
}

/* ── Search ── */

.org-telemetry__search-wrap[b-vbnl8slv0f] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 120px;
    max-width: 300px;
    background: var(--bg);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: 4px 10px;
    transition: border-color 0.15s;
}

.org-telemetry__search-wrap:focus-within[b-vbnl8slv0f] {
    border-color: var(--accent);
}

.org-telemetry__search-icon[b-vbnl8slv0f] {
    font-size: var(--text-sm);
    color: var(--text-muted);
    flex-shrink: 0;
}

.org-telemetry__search-input[b-vbnl8slv0f] {
    border: none;
    outline: none;
    background: transparent;
    flex: 1;
    min-width: 0;
    font-size: var(--text-base);
    color: var(--text);
    font-family: inherit;
}

.org-telemetry__search-input[b-vbnl8slv0f]::placeholder {
    color: var(--text-muted);
    opacity: 0.6;
}

/* ── Expand all ── */

.org-telemetry__expand-all[b-vbnl8slv0f] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: 4px 10px;
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
    margin-left: auto;
    font-family: inherit;
}

.org-telemetry__expand-all:hover[b-vbnl8slv0f] {
    border-color: var(--text-muted);
    color: var(--text);
}

.org-telemetry__expand-all-text[b-vbnl8slv0f] {
    white-space: nowrap;
}

@container (max-width: 600px) {
    .org-telemetry__expand-all-text[b-vbnl8slv0f] {
        display: none;
    }
}

.org-telemetry__chart-header[b-vbnl8slv0f] { display: flex; align-items: center; gap: 8px; }
.org-telemetry__chart-title[b-vbnl8slv0f] { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--font-medium); }
.org-telemetry__chart-header-spacer[b-vbnl8slv0f] { flex: 1; }
.org-telemetry__chart-controls[b-vbnl8slv0f] { display: inline-flex; align-items: center; gap: 0.4rem; }
.org-telemetry__chart-ctrl-btn[b-vbnl8slv0f] { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: none; background: transparent; color: var(--text-muted); cursor: pointer; border-radius: var(--radius-sm); }
.org-telemetry__chart-ctrl-btn:hover[b-vbnl8slv0f] { background: var(--surface-hover); color: var(--text); }

/* /Components/SplitContent/SiteSplitContent.razor.rz.scp.css */
/* ===================================================================
   SiteSplitContent — Site detail panel with Details / Telemetry tabs
   =================================================================== */

.site-split[b-3y62852wgl] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.site-split--loading[b-3y62852wgl],
.site-split--error[b-3y62852wgl] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: var(--text-base);
    height: 100%;
}

.site-split--error[b-3y62852wgl] {
    color: var(--danger);
}

/* ── Header ── */

.site-split__header[b-3y62852wgl] {
    padding: 16px 20px 0;
    flex-shrink: 0;
}

.site-split__org-name[b-3y62852wgl] {
    font-size: var(--text-base);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
}

.site-split__site-name[b-3y62852wgl] {
    margin: 0 0 8px;
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    color: var(--text);
}

.site-split__badges[b-3y62852wgl] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.site-split__badge[b-3y62852wgl] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    padding: 3px 10px;
    border-radius: var(--radius-full);
    white-space: nowrap;
}

.site-split__badge--cases[b-3y62852wgl] {
    background: var(--danger);
    color: var(--white);
}

.site-split__badge--tz[b-3y62852wgl] {
    background: var(--surface);
    border: 1px solid var(--border-light);
    color: var(--text);
}

.site-split__badge--location[b-3y62852wgl] {
    background: var(--surface);
    border: 1px solid var(--border-light);
    color: var(--text);
}

/* ── Tab bar ── */

.site-split__tabs[b-3y62852wgl] {
    display: flex;
    gap: 0;
    padding: 0 20px;
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
    margin-top: 12px;
}

.site-split__tab[b-3y62852wgl] {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 8px 16px;
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.site-split__tab:hover[b-3y62852wgl] {
    color: var(--text);
}

.site-split__tab--active[b-3y62852wgl] {
    color: var(--text);
    border-bottom-color: var(--accent);
    font-weight: var(--font-semibold);
}

/* ── Sticky note (full-width, top of details) ── */

.site-split__sticky[b-3y62852wgl] {
    margin: 14px 20px 0;
    background: #fef9e7;
    border: 1px solid #f0e4a8;
    border-radius: var(--radius-md);
    padding: 12px 14px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    flex-shrink: 0;
}

.site-split__sticky-icon[b-3y62852wgl] {
    color: #c49a2a;
    font-size: var(--text-base);
    flex-shrink: 0;
    padding-top: 2px;
}

.site-split__sticky-text[b-3y62852wgl] {
    font-size: var(--text-base);
    color: #5c4b1f;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

.site-split__sticky--empty[b-3y62852wgl] {
    opacity: 0.6;
    cursor: pointer;
}

.site-split__sticky--empty:hover[b-3y62852wgl] {
    opacity: 0.85;
}

/* ── Two-column layout ── */

.site-split__columns[b-3y62852wgl] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding: 14px 20px 20px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    align-items: start;
}

/* ── Columns ── */

.site-split__col-left[b-3y62852wgl],
.site-split__col-right[b-3y62852wgl] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── Card ── */

.site-split__card[b-3y62852wgl] {
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 16px;
}

.site-split__card-header[b-3y62852wgl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.site-split__card-header-title[b-3y62852wgl] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text);
}

.site-split__card-header-title i[b-3y62852wgl] {
    font-size: var(--text-base);
    color: var(--text-muted);
}

.site-split__card:has(.site-split__org-info)[b-3y62852wgl] {
  display: none;
}

/* ── Organization info fields ── */

.site-split__org-info[b-3y62852wgl] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.site-split__field[b-3y62852wgl] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.site-split__label[b-3y62852wgl] {
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.site-split__value[b-3y62852wgl] {
    font-size: var(--text-base);
    color: var(--text);
    line-height: 1.45;
}

.site-split__value--bold[b-3y62852wgl] {
    font-weight: var(--font-semibold);
}

.site-split__value--multiline[b-3y62852wgl] {
    white-space: pre-line;
}

/* ── Contact list ── */

.site-split__contact-list[b-3y62852wgl] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.site-split__contact[b-3y62852wgl] {
    padding: 12px 0;
    border-bottom: 1px solid var(--border-light);
}

.site-split__contact:first-child[b-3y62852wgl] {
    padding-top: 0;
}

.site-split__contact:last-child[b-3y62852wgl] {
    padding-bottom: 0;
    border-bottom: none;
}

.site-split__contact-header[b-3y62852wgl] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.site-split__contact-ordinal[b-3y62852wgl] {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text-muted);
    min-width: 24px;
}

.site-split__contact-name[b-3y62852wgl] {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text);
}

.site-split__contact-meta[b-3y62852wgl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 34px;
    margin-bottom: 6px;
}

.site-split__contact-role[b-3y62852wgl] {
    font-size: var(--text-base);
    color: var(--accent);
    font-weight: var(--font-medium);
}

.site-split__contact-lang[b-3y62852wgl] {
    font-size: var(--text-base);
    color: var(--text-muted);
}

.site-split__contact-details[b-3y62852wgl] {
    padding-left: 34px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.site-split__contact-row[b-3y62852wgl] {
    font-size: var(--text-base);
    color: var(--text);
}

.site-split__link[b-3y62852wgl] {
    font-size: var(--text-base);
    color: var(--accent);
    text-decoration: none;
}

.site-split__link:hover[b-3y62852wgl] {
    text-decoration: underline;
}

/* ── Contact picker / assign ── */

.site-split__contact-picker-wrap[b-3y62852wgl] {
    position: relative;
}

.site-split__icon-btn[b-3y62852wgl] {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: var(--text-base);
    padding: 2px 8px;
    border-radius: 4px;
    transition: background 0.15s, color 0.15s;
}

.site-split__icon-btn:hover[b-3y62852wgl] {
    background: var(--surface);
    color: var(--accent);
}

.site-split__picker-backdrop[b-3y62852wgl] {
    position: fixed;
    inset: 0;
    z-index: 99;
}

.site-split__picker-dropdown[b-3y62852wgl] {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 100;
    background: var(--surface-raised, var(--surface));
    border: 1px solid var(--border-light);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,.15);
    min-width: 260px;
    max-width: 340px;
    overflow: hidden;
}

.site-split__picker-search-wrap[b-3y62852wgl] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-light);
}

.site-split__picker-search-icon[b-3y62852wgl] {
    font-size: var(--text-sm);
    color: var(--text-muted);
    flex-shrink: 0;
}

.site-split__picker-search[b-3y62852wgl] {
    border: none;
    outline: none;
    background: transparent;
    color: var(--text);
    font-size: var(--text-base);
    width: 100%;
}

.site-split__picker-options[b-3y62852wgl] {
    max-height: 280px;
    overflow-y: auto;
    padding: 4px 0;
}

.site-split__picker-option[b-3y62852wgl] {
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.1s;
}

.site-split__picker-option:hover[b-3y62852wgl] {
    background: var(--surface);
}

.site-split__picker-option-name[b-3y62852wgl] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-base);
    color: var(--text);
    font-weight: var(--font-medium);
}

.site-split__picker-option-detail[b-3y62852wgl] {
    font-size: var(--text-sm);
    color: var(--text-muted);
    padding-left: 24px;
}

.site-split__picker-empty[b-3y62852wgl] {
    padding: 12px;
    text-align: center;
    font-size: var(--text-base);
    color: var(--text-muted);
}

.site-split__contact-remove[b-3y62852wgl] {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: var(--text-sm);
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: auto;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s, background 0.15s;
}

.site-split__contact:hover .site-split__contact-remove[b-3y62852wgl] {
    opacity: 1;
}

.site-split__contact-remove:hover[b-3y62852wgl] {
    color: var(--danger);
    background: rgba(220, 53, 69, 0.1);
}

.site-split__contact-actions[b-3y62852wgl] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.site-split__contact-action[b-3y62852wgl] {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: var(--text-base);
    width: 28px;
    height: 28px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
}

.site-split__contact-action:hover[b-3y62852wgl] {
    color: var(--accent);
    background: rgba(0, 0, 0, 0.05);
}

.site-split__contact-action--danger:hover[b-3y62852wgl] {
    color: var(--danger);
    background: rgba(220, 53, 69, 0.1);
}

/* ── Empty state ── */

.site-split__empty[b-3y62852wgl] {
    font-size: var(--text-base);
    color: var(--text-muted);
    text-align: center;
    padding: 16px 0;
}

/* ── History card ── */

.site-split__history-card[b-3y62852wgl] {
    display: flex;
    flex-direction: column;
    max-height: 100%;
    overflow: hidden;
}

.site-split__history-search[b-3y62852wgl] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--white);
    border: 1px solid var(--tertiary);
    border-radius: var(--radius-full);
    padding: 6px 10px;
    margin-bottom: 8px;
    max-width: 400px;
}

.site-split__history-search-icon[b-3y62852wgl] {
    font-size: var(--text-base);
    color: var(--text-muted);
    flex-shrink: 0;
}

.site-split__history-input[b-3y62852wgl] {
    border: none;
    outline: none;
    background: transparent;
    font-size: var(--text-base);
    color: var(--text);
    width: 100%;
}

.site-split__history-input[b-3y62852wgl]::placeholder {
    color: var(--text-muted);
}

.site-split__history-count[b-3y62852wgl] {
    font-size: var(--text-base);
    color: var(--text-muted);
    margin-bottom: 8px;
}

.site-split__history-tabs[b-3y62852wgl] {
    display: flex;
    gap: 0px;
    margin-left: auto;
    border-radius: var(--radius-md);
    border: 1px solid var(--tertiary-200);
}

.site-split__htab:first-child[b-3y62852wgl] {
  border-top-left-radius: var(--radius-md);  
  border-bottom-left-radius: var(--radius-md);    
}

.site-split__htab:last-child[b-3y62852wgl] {
  border-top-right-radius: var(--radius-md);  
  border-bottom-right-radius: var(--radius-md);    
}

.site-split__htab[b-3y62852wgl] {
    padding: 8px 16px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--white);
    color: var(--primary);
    font-family: var(--font-family);
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}

.site-split__htab:hover[b-3y62852wgl] {
    background: var(--tertiary);
    color: var(--white);
    border-color: var(--white);
}

.site-split__htab--active[b-3y62852wgl] {
    background: var(--tertiary);
    color: var(--white);
    border-color: var(--white);
}

/* ── History entries ── */

.site-split__history-list[b-3y62852wgl] {
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.site-split__history-entry[b-3y62852wgl] {
    display: flex;
    gap: 10px;
    padding: 10px 0;
    border-top: 1px solid var(--border-light);
}

.site-split__history-entry:first-child[b-3y62852wgl] {
    border-top: none;
}

.site-split__history-icon-wrap[b-3y62852wgl] {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.site-split__history-icon[b-3y62852wgl] {
    font-size: var(--text-base);
    color: var(--text-muted);
}

.site-split__history-body[b-3y62852wgl] {
    flex: 1;
    min-width: 0;
}

.site-split__history-title[b-3y62852wgl] {
    font-size: var(--text-base);
    color: var(--text);
    margin-bottom: 2px;
}

.site-split__history-meta[b-3y62852wgl] {
    font-size: var(--text-base);
    color: var(--text-muted);
    margin-bottom: 6px;
}

.site-split__history-diff[b-3y62852wgl] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: var(--text-base);
    margin-bottom: 4px;
}

.site-split__diff-old[b-3y62852wgl] {
    color: var(--danger);
    text-decoration: line-through;
}

.site-split__diff-arrow[b-3y62852wgl] {
    font-size: var(--text-base);
    color: var(--text-muted);
}

.site-split__diff-new[b-3y62852wgl] {
    color: var(--success, #2d8a4e);
    font-weight: var(--font-medium);
}

.site-split__history-note[b-3y62852wgl] {
    background: var(--bg);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    font-size: var(--text-base);
    color: var(--text);
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ── Telemetry placeholder ── */

.site-split__placeholder[b-3y62852wgl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 60px 24px;
    flex: 1;
}

.site-split__placeholder-icon[b-3y62852wgl] {
    font-size: var(--text-3xl);
    color: var(--accent);
}

.site-split__placeholder-title[b-3y62852wgl] {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--text);
}

.site-split__placeholder-hint[b-3y62852wgl] {
    margin: 0;
    font-size: var(--text-base);
    color: var(--text-muted);
}
/* /Components/SplitContent/SiteTelemetryPanel.razor.rz.scp.css */
/* ===================================================================
   SiteTelemetryPanel — Telemetry charts & device/sensor selection
   =================================================================== */

.telemetry-panel[b-n9mv2j72oh] {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 14px 20px 20px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    container-type: inline-size;
}

/* ── Toolbar (mode + sensor tools) ── */

.telemetry-panel__toolbar[b-n9mv2j72oh] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    flex-shrink: 0;
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: 10;
    background: #c2cfd3;
    padding-top: 4px;
    padding-bottom: 4px;
}

.telemetry-panel__mode-bar[b-n9mv2j72oh] {
    display: flex;
    gap: 0px;
    flex-shrink: 0;
}

.telemetry-panel__sensor-tools[b-n9mv2j72oh] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--border-light);
    min-width: 0;
    flex-wrap: wrap;
}

.telemetry-panel__sensor-count[b-n9mv2j72oh] {
    font-size: var(--text-base);
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.telemetry-panel__mode-btn[b-n9mv2j72oh] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}

.telemetry-panel__mode-btn:first-child[b-n9mv2j72oh] {
  border-top-left-radius: var(--radius-md);  
  border-bottom-left-radius: var(--radius-md);    
}

.telemetry-panel__mode-btn:last-child[b-n9mv2j72oh] {
  border-top-right-radius: var(--radius-md);  
  border-bottom-right-radius: var(--radius-md);    
}

.telemetry-panel__mode-btn:hover[b-n9mv2j72oh] {
    color: var(--primary);
    /*border-color: var(--text-muted);*/
    background: var(--secondary-hover);
}

.telemetry-panel__mode-btn--active[b-n9mv2j72oh] {
    background: var(--primary);
    color: var(--white);
    border-color: var(--primary);
}

.telemetry-panel__mode-btn--active:hover[b-n9mv2j72oh] {
    background: var(--primary);
    color: var(--white);
    cursor: default;
    /*border-color: var(--accent);*/
}

/* ── Stacked layout (charts on top, sensors below) ── */

.telemetry-panel__content[b-n9mv2j72oh] {
    display: flex;
    flex-direction: column;
}

.telemetry-panel__content--sidebyside[b-n9mv2j72oh] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@container (max-width: 700px) {
    .telemetry-panel__content--sidebyside[b-n9mv2j72oh] {
        grid-template-columns: 1fr;
    }
}

.telemetry-panel__content--sidebyside .telemetry-panel__sensors-col[b-n9mv2j72oh] {
    grid-column: 1 / -1;
}

.telemetry-panel__charts-col[b-n9mv2j72oh] {
    display: flex;
    flex-direction: column;
    margin-bottom: 8px;
    min-width: 0;
    padding: 12px;
    background: var(--white);
    border-radius: var(--radius-md);
}

.telemetry-panel__sensors-col[b-n9mv2j72oh] {
    display: flex;
    flex-direction: column;
}

/* ── Time toolbar ── */

.telemetry-panel__time-bar[b-n9mv2j72oh] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    flex-shrink: 0;
}

.telemetry-panel__presets[b-n9mv2j72oh] {
    display: flex;
    align-items: center;
    gap: 2px;
    border: 1px solid var(--tertiary-200);
    border-radius: var(--radius-md);  
}

.telemetry-panel__preset[b-n9mv2j72oh] {
    background: transparent;
    border: none;
    border-radius: var(--radius-none);
    padding: 4px 12px;
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}

.telemetry-panel__preset:first-child[b-n9mv2j72oh] {
  border-top-left-radius: var(--radius-md);  
  border-bottom-left-radius: var(--radius-md);    
}

.telemetry-panel__preset:last-child[b-n9mv2j72oh] {
  border-top-right-radius: var(--radius-md);  
  border-bottom-right-radius: var(--radius-md);    
}


.telemetry-panel__preset:hover[b-n9mv2j72oh] {
    color: var(--primary);
    background: var(--secondary-hover);
}

.telemetry-panel__preset--active[b-n9mv2j72oh],
.telemetry-panel__preset--active:hover[b-n9mv2j72oh]{
    background: var(--tertiary);
    color: var(--white);
    cursor: default;
}

.telemetry-panel__date-range[b-n9mv2j72oh] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.telemetry-panel__date-input[b-n9mv2j72oh] {
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    padding: 4px 4px;
    font-size: var(--text-base);
    color: var(--text);
    outline: none;
    font-family: inherit;
}

.telemetry-panel__date-input:focus[b-n9mv2j72oh] {
    background: var(--surface-hover);
}

.telemetry-panel__date-sep[b-n9mv2j72oh] {
    font-size: var(--text-base);
    color: var(--text-muted);
}

.telemetry-panel__fetch-btn[b-n9mv2j72oh] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--primary-surface-tint);
    color: var(--primary);
    border: 0px solid var(--border-light);
    border-radius: var(--radius-full);
    padding: 6px 18px;
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
    flex-shrink: 0;
}

.telemetry-panel__fetch-btn:hover:not(:disabled)[b-n9mv2j72oh] {
    border-color: var(--text-muted);
    background: var(--surface-hover);
}

.telemetry-panel__fetch-btn:disabled[b-n9mv2j72oh] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Error banner ── */

.telemetry-panel__error[b-n9mv2j72oh] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    margin-bottom: 12px;
    background: rgba(220, 60, 60, 0.08);
    border: 1px solid rgba(220, 60, 60, 0.3);
    border-radius: var(--radius-sm);
    font-size: var(--text-base);
    color: var(--danger);
    flex-shrink: 0;
}

.telemetry-panel__error i:first-child[b-n9mv2j72oh] {
    flex-shrink: 0;
}

.telemetry-panel__error span[b-n9mv2j72oh] {
    flex: 1;
    min-width: 0;
    word-break: break-word;
}

.telemetry-panel__error-dismiss[b-n9mv2j72oh] {
    background: none;
    border: none;
    color: var(--danger);
    cursor: pointer;
    padding: 2px 4px;
    opacity: 0.6;
    flex-shrink: 0;
}

.telemetry-panel__error-dismiss:hover[b-n9mv2j72oh] {
    opacity: 1;
}

/* ── Chart sections ── */

.telemetry-panel__chart-section[b-n9mv2j72oh] {
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    margin-bottom: 12px;
    flex-shrink: 0;
    overflow: hidden;
}

.telemetry-panel__chart-header[b-n9mv2j72oh] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text);
    border-bottom: 1px solid var(--border-light);
}

.telemetry-panel__chart-header i[b-n9mv2j72oh] {
    font-size: var(--text-base);
    color: var(--text-muted);
}

.telemetry-panel__chart-wrap[b-n9mv2j72oh] {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 8;
    min-height: 200px;
    max-height: 380px;
    overflow: clip;
}

.telemetry-panel__chart-wrap--small[b-n9mv2j72oh] {
    aspect-ratio: 16 / 5;
    min-height: 140px;
    max-height: 260px;
}

.telemetry-panel__chart-target[b-n9mv2j72oh] {
    width: 100%;
    height: 100%;
}

.telemetry-panel__chart-empty[b-n9mv2j72oh] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: var(--text-base);
    background: var(--surface);
    z-index: 1;
}

.telemetry-panel__chart-empty i[b-n9mv2j72oh] {
    font-size: var(--text-2xl);
    opacity: 0.35;
}

/* ── Telemetry legend ── */

.telemetry-panel__legend[b-n9mv2j72oh] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    padding: 8px 14px;
    margin-bottom: 12px;
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.telemetry-panel__legend-item[b-n9mv2j72oh] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-sm);
    color: var(--text);
    white-space: nowrap;
}

.telemetry-panel__legend-swatch[b-n9mv2j72oh] {
    display: inline-block;
    width: 12px;
    height: 3px;
    border-radius: 2px;
    flex-shrink: 0;
}

/* ── Device / Sensor table ── */

.telemetry-panel__table-section[b-n9mv2j72oh] {
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    overflow: hidden;
    flex-shrink: 0;
}

.telemetry-panel__type-filter[b-n9mv2j72oh] {
    background: var(--bg);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: 4px 8px;
    font-size: var(--text-base);
    color: var(--text);
    outline: none;
    flex-shrink: 0;
}

/* ── Column headers ── */

.telemetry-panel__col-headers[b-n9mv2j72oh] {
    display: grid;
    grid-template-columns: minmax(120px, 1.4fr) 80px 2fr 50px 80px 30px;
    gap: 8px;
    padding: 6px 14px 6px 42px;
    background: var(--bg);
    border-bottom: 1px solid var(--border-light);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text-muted);
}

.telemetry-panel__table-loading[b-n9mv2j72oh],
.telemetry-panel__table-empty[b-n9mv2j72oh] {
    padding: 20px;
    text-align: center;
    font-size: var(--text-base);
    color: var(--text-muted);
}

.telemetry-panel__device-list[b-n9mv2j72oh] {
    display: flex;
    flex-direction: column;
}

/* ── Site rows ── */

.telemetry-panel__site[b-n9mv2j72oh] {
    border-bottom: 1px solid var(--border-light);
    width: 100%;
}

.telemetry-panel__site:last-child[b-n9mv2j72oh] {
    border-bottom: none;
}

.telemetry-panel__site-row[b-n9mv2j72oh] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 14px;
    background: none;
    border: none;
    cursor: pointer;
    transition: background 0.1s;
    text-align: left;
}

.telemetry-panel__site-children[b-n9mv2j72oh] {
    margin-left: 8px
}

/* ── Device rows ── */

.telemetry-panel__device[b-n9mv2j72oh] {
    border-bottom: 1px solid var(--border-light);
}

.telemetry-panel__device:last-child[b-n9mv2j72oh] {
    border-bottom: none;
}

.telemetry-panel__device-row[b-n9mv2j72oh] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 14px;
    background: none;
    border: none;
    cursor: pointer;
    transition: background 0.1s;
    text-align: left;
}

.telemetry-panel__device-row:hover[b-n9mv2j72oh] {
    background: var(--bg);
}

.telemetry-panel__device-chevron[b-n9mv2j72oh] {
    font-size: var(--text-base);
    color: var(--text-muted);
    width: 14px;
    text-align: center;
    flex-shrink: 0;
}

.telemetry-panel__device-name[b-n9mv2j72oh] {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text);
}

.telemetry-panel__device-count[b-n9mv2j72oh] {
    font-size: var(--text-base);
    color: var(--text-muted);
    white-space: nowrap;
}

.telemetry-panel__device-spacer[b-n9mv2j72oh] {
    flex: 1;
}

.telemetry-panel__status--online[b-n9mv2j72oh] {
    color: #2d8a4e;
}

.telemetry-panel__status--offline[b-n9mv2j72oh] {
    color: var(--danger);
}

.telemetry-panel__device-snid[b-n9mv2j72oh] {
    font-size: var(--text-base);
    color: var(--text-muted);
    font-family: monospace;
    white-space: nowrap;
}

/* ── Device-level group-select buttons ── */

.telemetry-panel__device-group-btns[b-n9mv2j72oh] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    margin-left: 4px;
}

/* ── Device description ── */

.telemetry-panel__device-desc[b-n9mv2j72oh] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 0 14px 6px 38px;
    font-size: var(--text-base);
    font-style: italic;
    color: var(--text-muted);
}

.telemetry-panel__desc-dot[b-n9mv2j72oh] {
    font-size: 5px;
    color: var(--text-muted);
    opacity: 0.5;
    flex-shrink: 0;
}

/* ── Sensor rows ── */

.telemetry-panel__sensor-list[b-n9mv2j72oh] {
    display: flex;
    flex-direction: column;
}

.telemetry-panel__sensor-empty[b-n9mv2j72oh] {
    padding: 10px 14px 10px 42px;
    font-size: var(--text-base);
    color: var(--text-muted);
}

.telemetry-panel__sensor-row[b-n9mv2j72oh] {
    display: grid;
    grid-template-columns: minmax(120px, 1.4fr) 80px 2fr 50px 80px 30px;
    gap: 8px;
    align-items: center;
    padding: 5px 14px 5px 42px;
    cursor: pointer;
    transition: background 0.1s;
    font-size: var(--text-base);
    border-top: 1px solid var(--border-light);
}

.telemetry-panel__sensor-row:hover[b-n9mv2j72oh] {
    background: rgba(var(--accent-rgb, 59, 130, 246), 0.06);
}

.telemetry-panel__sensor-row--selected[b-n9mv2j72oh] {
    background: rgba(var(--accent-rgb, 59, 130, 246), 0.10);
}

.telemetry-panel__sensor-row--diag-selected[b-n9mv2j72oh] {
    background: rgba(16, 185, 129, 0.08);
}

.telemetry-panel__sensor-row--selected.telemetry-panel__sensor-row--diag-selected[b-n9mv2j72oh] {
    background: linear-gradient(90deg, rgba(var(--accent-rgb, 59, 130, 246), 0.10) 50%, rgba(16, 185, 129, 0.08) 50%);
}

/* ── Eye button (sensor row) ── */

.telemetry-panel__eye-btn[b-n9mv2j72oh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    opacity: 0.3;
    cursor: pointer;
    font-size: var(--text-sm);
    flex-shrink: 0;
    transition: all 0.15s;
    padding: 0;
}

.telemetry-panel__eye-btn:hover[b-n9mv2j72oh] {
    opacity: 0.7;
    color: var(--accent);
}

.telemetry-panel__eye-btn--active[b-n9mv2j72oh] {
    opacity: 1;
    color: var(--accent);
}

/* ── Diagnostic button (sensor row) ── */

.telemetry-panel__diag-btn[b-n9mv2j72oh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    opacity: 0.3;
    cursor: pointer;
    font-size: var(--text-sm);
    flex-shrink: 0;
    transition: all 0.15s;
    padding: 0;
}

.telemetry-panel__diag-btn:hover[b-n9mv2j72oh] {
    opacity: 0.7;
    color: var(--warning);
}

.telemetry-panel__diag-btn--active[b-n9mv2j72oh] {
    opacity: 1;
    color: var(--warning);
}

.telemetry-panel__sensor-cell--diag[b-n9mv2j72oh] {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Column eye icon ── */

.telemetry-panel__col-eye-icon[b-n9mv2j72oh] {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin-right: 2px;
}

.telemetry-panel__col-diag-icon[b-n9mv2j72oh] {
    font-size: var(--text-sm);
    color: var(--text-muted);
}

/* ── Global eye (historical selection summary) ── */

.telemetry-panel__global-eye-wrap[b-n9mv2j72oh] {
    position: relative;
    flex-shrink: 0;
}

.telemetry-panel__global-eye[b-n9mv2j72oh] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: 4px 10px;
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
}

.telemetry-panel__global-eye:hover[b-n9mv2j72oh] {
    border-color: var(--text-muted);
    color: var(--text);
}

.telemetry-panel__global-eye--active[b-n9mv2j72oh] {
    color: var(--accent);
    border-color: var(--accent);
}

/* ── Global diagnostic (diagnostic selection summary) ── */

.telemetry-panel__global-diag-wrap[b-n9mv2j72oh] {
    position: relative;
    flex-shrink: 0;
}

.telemetry-panel__global-diag[b-n9mv2j72oh] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: 0px solid var(--border-light);
    border-radius: var(--radius-full);
    padding: 4px 10px;
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
}

.telemetry-panel__global-diag:hover[b-n9mv2j72oh] {
    border-color: var(--secondary-hover);
    color: var(--text);
}

.telemetry-panel__global-diag--active[b-n9mv2j72oh] {
    color: var(--warning);    
}

/* ── Selection popover ── */

.telemetry-panel__popover-backdrop[b-n9mv2j72oh] {
    position: fixed;
    inset: 0;
    z-index: 99;
}

.telemetry-panel__selection-popover[b-n9mv2j72oh] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 100;
    min-width: 300px;
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

.telemetry-panel__popover-header[b-n9mv2j72oh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-light);
}

.telemetry-panel__popover-clear[b-n9mv2j72oh] {
    background: none;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: 2px 10px;
    font-size: var(--text-sm);
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
}

.telemetry-panel__popover-clear:hover[b-n9mv2j72oh] {
    color: var(--text);
    border-color: var(--text-muted);
}

.telemetry-panel__popover-item[b-n9mv2j72oh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 14px;
    font-size: var(--text-base);
    color: var(--text);
    border-bottom: 1px solid var(--border-light);
}

.telemetry-panel__popover-item:last-child[b-n9mv2j72oh] {
    border-bottom: none;
}

.telemetry-panel__popover-remove[b-n9mv2j72oh] {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px 4px;
    font-size: var(--text-sm);
    transition: color 0.15s;
    flex-shrink: 0;
}

.telemetry-panel__popover-remove:hover[b-n9mv2j72oh] {
    color: var(--danger);
}

/* ── Search ── */

.telemetry-panel__search-wrap[b-n9mv2j72oh] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 120px;
    max-width: 480px;
    margin: 0 auto;
    background: var(--bg);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: 4px 10px;
    transition: border-color 0.15s;
}

.telemetry-panel__search-wrap:focus-within[b-n9mv2j72oh] {
    border-color: var(--accent);
}

.telemetry-panel__search-icon[b-n9mv2j72oh] {
    font-size: var(--text-sm);
    color: var(--text-muted);
    flex-shrink: 0;
}

.telemetry-panel__search-input[b-n9mv2j72oh] {
    border: none;
    outline: none;
    background: transparent;
    flex: 1;
    min-width: 0;
    font-size: var(--text-base);
    color: var(--text);
}

.telemetry-panel__search-input[b-n9mv2j72oh]::placeholder {
    color: var(--text-muted);
    opacity: 0.6;
}

/* ── Expand all ── */

.telemetry-panel__expand-all[b-n9mv2j72oh] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: 4px 10px;
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
    margin-left: auto;
}

.telemetry-panel__expand-all:hover[b-n9mv2j72oh] {
    border-color: var(--text-muted);
    color: var(--text);
}

.telemetry-panel__expand-all-text[b-n9mv2j72oh] {
    white-space: nowrap;
}

@container (max-width: 600px) {
    .telemetry-panel__expand-all-text[b-n9mv2j72oh] {
        display: none;
    }
}

.telemetry-panel__sensor-cell[b-n9mv2j72oh] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
}

.telemetry-panel__sensor-cell--name[b-n9mv2j72oh] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: var(--font-medium);
    color: var(--text);
    min-width: 0;
}

.telemetry-panel__sensor-cell--desc[b-n9mv2j72oh] {
    color: var(--text-muted);
}

.telemetry-panel__sensor-cell--idle[b-n9mv2j72oh] {
    text-align: center;
    font-size: 7px;
    color: var(--text-muted);
    opacity: 0.5;
}

.telemetry-panel__sensor-cell--val[b-n9mv2j72oh] {
    text-align: right;
    font-family: monospace;
    font-weight: var(--font-medium);
    cursor: default;
}

/* ── Alarm state (value outside thresholds) ── */

.telemetry-panel__sensor-cell--alarm[b-n9mv2j72oh] {
    color: var(--danger) !important;
    font-weight: var(--font-semibold);
}

/* ── Value tooltip (fixed, escapes overflow) ── */

.telemetry-panel__value-tooltip[b-n9mv2j72oh] {
    position: fixed;
    z-index: 100000;
    width: 270px;
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
    padding: 14px 16px;
    pointer-events: none;
}

.telemetry-panel__vt-header[b-n9mv2j72oh] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.telemetry-panel__vt-label[b-n9mv2j72oh] {
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text);
}

.telemetry-panel__vt-ts[b-n9mv2j72oh] {
    font-size: var(--text-xs);
    color: var(--text-muted);
    white-space: nowrap;
}

.telemetry-panel__vt-value[b-n9mv2j72oh] {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--accent);
    margin-bottom: 12px;
}

.telemetry-panel__vt-value--alarm[b-n9mv2j72oh] {
    color: var(--danger);
}

.telemetry-panel__vt-track-wrap[b-n9mv2j72oh] {
    padding: 0 4px;
    margin-bottom: 6px;
}

.telemetry-panel__vt-track[b-n9mv2j72oh] {
    position: relative;
    height: 6px;
    background: #dce2e6;
    border-radius: 3px;
}

.telemetry-panel__vt-thumb[b-n9mv2j72oh] {
    position: absolute;
    top: 50%;
    width: 14px;
    height: 14px;
    background: #2c3e50;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.telemetry-panel__vt-thr-row[b-n9mv2j72oh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px;
    margin-bottom: 2px;
}

.telemetry-panel__vt-arrow[b-n9mv2j72oh] {
    font-size: var(--text-xs);
    color: var(--text-muted);
    opacity: 0.6;
}

.telemetry-panel__vt-thr-label[b-n9mv2j72oh] {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.telemetry-panel__vt-thr-values[b-n9mv2j72oh] {
    display: flex;
    justify-content: space-between;
    padding: 0 4px;
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text);
    margin-bottom: 10px;
}

.telemetry-panel__vt-diff[b-n9mv2j72oh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
    border-top: 1px solid var(--border-light);
}

.telemetry-panel__vt-diff-label[b-n9mv2j72oh] {
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text);
}

.telemetry-panel__vt-diff-badge[b-n9mv2j72oh] {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text);
    background: #e8ecef;
    padding: 3px 10px;
    border-radius: var(--radius-sm);
}

/* ── Diagnostic toolbar ── */

.telemetry-panel__diag-bar[b-n9mv2j72oh] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    flex-shrink: 0;
}

.telemetry-panel__diag-stop-btn[b-n9mv2j72oh] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--danger);
    color: var(--white);
    border: none;
    border-radius: var(--radius-sm);
    padding: 5px 16px;
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    cursor: pointer;
    transition: opacity 0.15s;
}

.telemetry-panel__diag-stop-btn:hover[b-n9mv2j72oh] {
    opacity: 0.85;
}

.telemetry-panel__diag-status[b-n9mv2j72oh] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-base);
    color: var(--text-muted);
}

.telemetry-panel__diag-status i[b-n9mv2j72oh] {
    font-size: 8px;
}

.telemetry-panel__diag-status--live[b-n9mv2j72oh] {
    color: #2d8a4e;
}

.telemetry-panel__diag-status--live i[b-n9mv2j72oh] {
    animation: diag-pulse-b-n9mv2j72oh-b-n9mv2j72oh 1.5s ease-in-out infinite;
}

@keyframes diag-pulse-b-n9mv2j72oh-b-n9mv2j72oh {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.telemetry-panel__diag-cmd-status[b-n9mv2j72oh] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin-left: auto;
}

.telemetry-panel__diag-cmd-status i[b-n9mv2j72oh] {
    font-size: var(--text-xs);
    opacity: 0.6;
}

/* ── Diagnostic event log ── */

.telemetry-panel__diag-log[b-n9mv2j72oh] {
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    margin-bottom: 12px;
    overflow: hidden;
    flex-shrink: 0;
}

.telemetry-panel__diag-log-entries[b-n9mv2j72oh] {
    max-height: 160px;
    overflow-y: auto;
    font-family: 'Cascadia Code', 'Consolas', monospace;
    font-size: var(--text-sm);
}

.telemetry-panel__diag-log-row[b-n9mv2j72oh] {
    display: flex;
    gap: 10px;
    padding: 3px 14px;
    border-bottom: 1px solid var(--border-light);
}

.telemetry-panel__diag-log-row:last-child[b-n9mv2j72oh] {
    border-bottom: none;
}

.telemetry-panel__diag-log-time[b-n9mv2j72oh] {
    color: var(--text-muted);
    min-width: 64px;
    flex-shrink: 0;
}

.telemetry-panel__diag-log-type[b-n9mv2j72oh] {
    font-weight: var(--font-semibold);
    min-width: 50px;
    flex-shrink: 0;
}

.telemetry-panel__diag-log-detail[b-n9mv2j72oh] {
    color: var(--text-muted);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.telemetry-panel__diag-log-row--power .telemetry-panel__diag-log-type[b-n9mv2j72oh] { color: #ff9800; }
.telemetry-panel__diag-log-row--boot .telemetry-panel__diag-log-type[b-n9mv2j72oh] { color: #2196f3; }
.telemetry-panel__diag-log-row--cell .telemetry-panel__diag-log-type[b-n9mv2j72oh] { color: #9c27b0; }
/* ── Date validation messages ── */
.telemetry-panel__date-error[b-n9mv2j72oh] {
    padding: 0.25rem 0.5rem 0;
    font-size: 0.75rem;
    color: var(--danger);
}
.telemetry-panel__date-warning[b-n9mv2j72oh] {
    padding: 0.25rem 0.5rem 0;
    font-size: 0.75rem;
    color: var(--warning);
}

/* ── Search clear button ── */
.telemetry-panel__search-wrap[b-n9mv2j72oh] { position: relative; }
.telemetry-panel__search-clear[b-n9mv2j72oh] {
    position: absolute;
    right: 0.4rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--muted, #888);
    cursor: pointer;
    padding: 0.15rem 0.35rem;
    border-radius: 50%;
    line-height: 1;
}
.telemetry-panel__search-clear:hover[b-n9mv2j72oh] { background: rgba(0,0,0,0.06); color: var(--text); }
.telemetry-panel__search-input[b-n9mv2j72oh] { padding-right: 1.6rem !important; }

/* ── Diagnostic controls (zoom + auto-scroll) ── */
.telemetry-panel__diag-controls[b-n9mv2j72oh] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.telemetry-panel__diag-ctrl-btn[b-n9mv2j72oh] {
    background: transparent;
    border: none;
    color: var(--text, #333);
    cursor: pointer;
    padding: 0.3rem 0.45rem;
    border-radius: 4px;
    font-size: 0.85rem;
}
.telemetry-panel__diag-ctrl-btn:hover[b-n9mv2j72oh] { background: rgba(0,0,0,0.06); }
.telemetry-panel__autoscroll[b-n9mv2j72oh] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    user-select: none;
    position: relative;
}
.telemetry-panel__autoscroll-label[b-n9mv2j72oh] { font-size: 0.8rem; color: var(--text); }
.telemetry-panel__autoscroll-toggle[b-n9mv2j72oh] {
    appearance: none;
    -webkit-appearance: none;
    width: 32px;
    height: 18px;
    background: #ccc;
    border-radius: 9px;
    position: relative;
    cursor: pointer;
    transition: background 0.2s;
    margin: 0;
}
.telemetry-panel__autoscroll-toggle:checked[b-n9mv2j72oh] { background: var(--primary, #0096ff); }
.telemetry-panel__autoscroll-toggle[b-n9mv2j72oh]::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: left 0.2s;
}
.telemetry-panel__autoscroll-toggle:checked[b-n9mv2j72oh]::after { left: 16px; }
.telemetry-panel__autoscroll-slider[b-n9mv2j72oh] { display: none; }


.telemetry-panel__chart-header[b-n9mv2j72oh] { display: flex; align-items: center; gap: 8px; }
.telemetry-panel__chart-title[b-n9mv2j72oh] { font-weight: var(--font-medium); }
.telemetry-panel__chart-header-spacer[b-n9mv2j72oh] { flex: 1; }
.telemetry-panel__diag-controls--inline[b-n9mv2j72oh] { margin-left: 0; }



/* Pin bottom toolbars so Fetch and Go Live/Stop align at column bottom */
.telemetry-panel__time-bar--bottom[b-n9mv2j72oh],
.telemetry-panel__diag-bar--bottom[b-n9mv2j72oh] {
    margin-top: auto;
}

/* /Components/TabBar.razor.rz.scp.css */
.tab-bar[b-472lzxwi8t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    background: var(--surface);
    border-bottom: 1px solid var(--secondary);
    padding: 0;
    gap: 0px;
    user-select: none;
    flex-shrink: 0;
}

.tab-bar-left[b-472lzxwi8t] {
    display: flex;
    align-items: stretch;
    gap: 0px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    height: 100%;
}

.tab-bar-left[b-472lzxwi8t]::-webkit-scrollbar {
    display: none;
}

.tab-bar-right[b-472lzxwi8t] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: auto;
    flex-shrink: 0;
    padding-right: 16px;
}

.tab-item[b-472lzxwi8t] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    border-radius: 0;
    cursor: pointer;
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    color: var(--text-muted);
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
    position: relative;
    height: 100%;
    box-sizing: border-box;
    border-right: 1px solid var(--gray-200);
    border-bottom: 4px solid transparent;
}

.tab-item:hover[b-472lzxwi8t] {
    background: var(--secondary-hover);
    color: var(--text);    
}

.tab-item.active[b-472lzxwi8t] {
    background: var(--white);
    color: var(--primary);
    border-bottom: 4px solid var(--secondary);
    font-weight: var(--font-bold);
}
.tab-item.active:hover[b-472lzxwi8t] {
    cursor: default;
}

.tab-icon[b-472lzxwi8t] {
    font-size: var(--text-base);
    opacity: 0.7;
}

.tab-item.active .tab-icon[b-472lzxwi8t] {
    opacity: 1;
    color: var(--primary);
}

.tab-title[b-472lzxwi8t] {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tab-close[b-472lzxwi8t] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--radius-full);
    font-size: var(--text-base);
    padding: 0;
    margin-left: 2px;
    opacity: 0.3;
    transition: opacity 0.15s ease, background 0.15s ease;
}

.tab-item:hover .tab-close[b-472lzxwi8t] {
    opacity: 0.6;
}

.tab-close:hover[b-472lzxwi8t] {
    opacity: 1 !important;
    background: var(--danger-bg);
    color: var(--danger);
}

/* ── Toolbar icon buttons ── */

.toolbar-btn[b-472lzxwi8t] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
    font-size: var(--text-xl);
    padding: 0;
    transition: background 0.15s ease, color 0.15s ease;
}

.toolbar-btn:hover[b-472lzxwi8t] {
    background: var(--surface-hover);
    color: var(--text);
}

.toolbar-btn--labeled[b-472lzxwi8t] {
    width: auto;
    padding: 0 10px;
    gap: 6px;
    font-size: var(--text-base);
}

.toolbar-btn__label[b-472lzxwi8t] {
    font-size: var(--text-base);
    font-weight: var(--font-medium);
}

/* ── Separator ── */

.toolbar-separator[b-472lzxwi8t] {
    width: 1px;
    height: 40px;
    background: var(--gray-300);
    margin: 0 0 0 8px;
    flex-shrink: 0;
}

/* ── CREATE button ── */

.tab-bar-create[b-472lzxwi8t] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-radius: var(--radius-full);
    border: none;
    background: var(--primary);
    color: var(--white);
    font-family: var(--font-family);
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    letter-spacing: 0.04em;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}

.tab-bar-create:hover[b-472lzxwi8t] {
    background: var(--primary-500);
}

/* ── User avatar + dropdown ── */

.toolbar-user[b-472lzxwi8t] {
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.toolbar-user__avatar[b-472lzxwi8t] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--white);
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: box-shadow 0.15s;
}

.toolbar-user__avatar:hover[b-472lzxwi8t] {
    box-shadow: 0 0 0 2px var(--accent-bg);
}

.toolbar-user__avatar img[b-472lzxwi8t] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* ── User dropdown menu ── */

.user-menu__backdrop[b-472lzxwi8t] {
    position: fixed;
    inset: 0;
    z-index: 199;
}

.user-menu[b-472lzxwi8t] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 240px;
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(0, 0, 0, 0.04);
    z-index: 200;
    overflow: hidden;
}

.user-menu__header[b-472lzxwi8t] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 16px 14px;
    gap: 4px;
}

.user-menu__avatar-lg[b-472lzxwi8t] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--white);
    font-size: var(--text-base);
    font-weight: var(--font-bold);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

.user-menu__avatar-lg img[b-472lzxwi8t] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.user-menu__name[b-472lzxwi8t] {
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    color: var(--text);
}

.user-menu__email[b-472lzxwi8t] {
    font-size: var(--text-base);
    color: var(--text-muted);
}

.user-menu__role[b-472lzxwi8t] {
    font-size: var(--text-base);
    color: var(--text-light);
    margin-top: 2px;
}

.user-menu__divider[b-472lzxwi8t] {
    height: 1px;
    background: var(--border-light);
    margin: 0 12px;
}

.user-menu__item[b-472lzxwi8t] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 12px 20px;
    border: none;
    background: transparent;
    font-family: var(--font-family);
    font-size: var(--text-base);
    cursor: pointer;
    transition: background 0.12s;
    color: var(--text);
}

.user-menu__item:hover[b-472lzxwi8t] {
    background: var(--surface-hover);
}

.user-menu__item--logout[b-472lzxwi8t] {
    color: var(--danger);
}

.user-menu__item--logout:hover[b-472lzxwi8t] {
    background: var(--danger-bg);
}
/* /Components/TabHost.razor.rz.scp.css */
.tab-content[b-pwxh2n5y8k] {
    flex: 1;
    flex-direction: column;
    overflow: auto;
    min-height: 0;
    padding: 6px;
    margin: 0;
    /*============== MUST BE APPLY ONLY IF IN SPLIT VIEW MODE AND IS LEFT VIEW PANEL ==================*/
    box-shadow:
      inset 0 2px 4px rgba(0, 0, 0, 0.1),  
      inset -2px 0 2px rgba(0, 0, 0, 0.1);
    }
/* /Components/WorkSessionTray.razor.rz.scp.css */
.vg-wstray[b-4jx3y4ckzj] {
    position: fixed;
    top: 48px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 999px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    user-select: none;
    transition: background-color 120ms ease;
}

.vg-wstray__handle[b-4jx3y4ckzj] {
    background: transparent;
    border: 0;
    color: #6b7280;
    cursor: grab;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 22px;
    padding: 0;
    font-size: 12px;
}

.vg-wstray__handle:active[b-4jx3y4ckzj] {
    cursor: grabbing;
}

.vg-wstray__add[b-4jx3y4ckzj] {
    position: relative;
    background: transparent;
    border: 0;
    color: #2c2c2c;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    border-radius: 999px;
}

.vg-wstray__add:hover[b-4jx3y4ckzj] {
    background: rgba(0, 0, 0, 0.06);
}

.vg-wstray__add-plus[b-4jx3y4ckzj] {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: #2a9d8f;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    border: 1.5px solid #fff;
}

.vg-wstray__pill[b-4jx3y4ckzj] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px 4px 4px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    transition: background-color 120ms ease, border-color 120ms ease;
    border: 1px solid transparent;
}

.vg-wstray__pill--running[b-4jx3y4ckzj] {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(0, 0, 0, 0.08);
    color: #2c2c2c;
}

.vg-wstray__pill--paused[b-4jx3y4ckzj] {
    background: rgba(110, 130, 140, 0.18);
    border-color: rgba(0, 0, 0, 0.04);
    color: #4a5560;
}

.vg-wstray__playbtn[b-4jx3y4ckzj] {
    background: transparent;
    border: 0;
    color: inherit;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
    border-radius: 999px;
}

.vg-wstray__playbtn:hover[b-4jx3y4ckzj] {
    background: rgba(0, 0, 0, 0.08);
}

.vg-wstray__elapsed[b-4jx3y4ckzj] {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    cursor: pointer;
    min-width: 44px;
    text-align: center;
}

.vg-wstray__caseref[b-4jx3y4ckzj] {
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    font-size: 12px;
    border-radius: 999px;
}

.vg-wstray__caseref:hover[b-4jx3y4ckzj] {
    background: rgba(0, 0, 0, 0.08);
}

.vg-wstray__caseref i[b-4jx3y4ckzj] {
    font-size: 11px;
    opacity: 0.8;
}

.vg-wstray__close[b-4jx3y4ckzj] {
    background: transparent;
    border: 0;
    color: #6b7280;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 999px;
    font-size: 11px;
}

.vg-wstray__close:hover[b-4jx3y4ckzj] {
    background: rgba(0, 0, 0, 0.1);
    color: #c0392b;
}

.vg-wstray__backdrop[b-4jx3y4ckzj] {
    position: fixed;
    inset: 0;
    z-index: 1099;
    background: transparent;
}

.vg-wstray__popover[b-4jx3y4ckzj] {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 1100;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: 12px 14px;
    min-width: 240px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

.vg-wstray__popover-title[b-4jx3y4ckzj] {
    font-weight: 600;
    font-size: 13px;
    color: #2c2c2c;
    margin-bottom: 6px;
}

.vg-wstray__popover-text[b-4jx3y4ckzj] {
    font-size: 12px;
    color: #4a4a4a;
    margin: 0 0 6px 0;
    line-height: 1.4;
}

.vg-wstray__popover-hint[b-4jx3y4ckzj] {
    color: #6b7280;
    font-style: italic;
}

.vg-wstray__popover-actions[b-4jx3y4ckzj] {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}

.vg-wstray__popover-btn[b-4jx3y4ckzj] {
    background: #2a9d8f;
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.vg-wstray__popover-btn:hover[b-4jx3y4ckzj] {
    background: #248575;
}
/* /Layout/MainLayout.razor.rz.scp.css */
.vanguard-shell[b-kqj6m0ioj5] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    background: var(--bg);
}

.main-area[b-kqj6m0ioj5] {
    display: flex;
    flex: 1;
    overflow: hidden;
    min-height: 0;
    min-width: 0;
    margin-top: 0;
    padding-top: 0;
    
}
/* /Pages/Administration.razor.rz.scp.css */
.admin-layout[b-il2qj17w7u] {
    display: flex;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.admin-content[b-il2qj17w7u] {
    flex: 1;
    overflow: auto;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
/* /Pages/Assets.razor.rz.scp.css */
/* =============================================
   Assets — page layout
   ============================================= */

.assets-page[b-ykhotfpvse] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: var(--bg);
    font-size: var(--text-base);
    font-weight: var(--font-normal);
}

.assets-loading[b-ykhotfpvse] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 8px;
    color: var(--text-muted);
    font-size: var(--text-base);
}

/* ── Summary Cards ── */

.assets-summary[b-ykhotfpvse] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 20px 24px 8px;
    flex-shrink: 0;
}

.summary-card[b-ykhotfpvse] {
    background: var(--surface);
    border-radius: 10px;
    padding: 18px 20px;
    border: 1px solid var(--border-light);
    flex: 1 1 280px;
    min-width: 0;
}

.summary-card__title[b-ykhotfpvse] {
    font-weight: var(--font-semibold);
    font-size: var(--text-base);
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.summary-card__icon[b-ykhotfpvse] {
    font-size: var(--text-base);
    width: 20px;
    text-align: center;
}

.summary-card__icon--quality[b-ykhotfpvse] { color: var(--accent); }
.summary-card__icon--connect[b-ykhotfpvse] { color: #e67e22; }
.summary-card__icon--risk[b-ykhotfpvse]    { color: #8e44ad; }

.summary-card__rows[b-ykhotfpvse] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.summary-card__row[b-ykhotfpvse] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-base);
    color: var(--text);
    line-height: 1.3;
}

.summary-row__icon[b-ykhotfpvse] {
    width: 16px;
    text-align: center;
    font-size: var(--text-sm);
    flex-shrink: 0;
}

.summary-row__icon--accent[b-ykhotfpvse]  { color: var(--accent); }
.summary-row__icon--danger[b-ykhotfpvse]  { color: var(--danger); }
.summary-row__icon--warn[b-ykhotfpvse]    { color: var(--warning) }
.summary-row__icon--success[b-ykhotfpvse] { color: var(--success); }
.summary-row__icon--muted[b-ykhotfpvse]   { color: var(--text-muted); }

.summary-card__label[b-ykhotfpvse] {
    flex: 1;
    min-width: 0;
}

.summary-card__value[b-ykhotfpvse] {
    font-weight: var(--font-semibold);
    margin-left: auto;
    white-space: nowrap;
    color: transparent;
}

/* temporary replacement */
.summary-card__value[b-ykhotfpvse]::after {
  content: "—"; 
  color: var(--gray-300);    
}

.summary-card__value--na[b-ykhotfpvse] {
    /* color: var(--text-light); */
    /* font-weight: var(--font-normal); */
}

/* Coming soon placeholder for summary card body */
.summary-card__coming-soon[b-ykhotfpvse] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
    color: var(--text-muted);
    font-style: italic;
    font-size: var(--text-base);
}

/* ── Filter Tabs + Search ── */

.assets-toolbar[b-ykhotfpvse] {
    flex-shrink: 0;
    padding: 16px 24px 0;
}

.assets-tabs[b-ykhotfpvse] {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 12px;
}

.assets-tab[b-ykhotfpvse] {
    background: none;
    border: none;
    padding: 8px 16px;
    font-size: var(--text-base);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s;
    font-family: inherit;
}

.assets-tab:hover[b-ykhotfpvse] {
    color: var(--text);
}

.assets-tab--active[b-ykhotfpvse] {
    color: var(--accent);
    border-bottom-color: var(--accent);
    font-weight: var(--font-medium);
}

.assets-tab--active i[b-ykhotfpvse] {
    color: var(--accent);
}

.assets-search-row[b-ykhotfpvse] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 8px;
}

.assets-search[b-ykhotfpvse] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--white);
    border: 1px solid var(--text-muted);
    border-radius: var(--radius-full);
    padding: 2px 3px 2px 12px;
    min-width: 280px;
    transition: border-color 0.15s ease;
    min-height: 2.1rem;
    position: relative;
    padding-right: 90px;  
}

.assets-search:focus-visible[b-ykhotfpvse] {
    border-color: var(--secondary); 
    box-shadow: 0 0 0 3px var(--secondary);     
}

.assets-search:focus-within[b-ykhotfpvse] {
  border-color: var(--secondary);
  box-shadow: 0 0 0 3px var(--secondary);
}

.assets-search__icon[b-ykhotfpvse] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-light);
    font-size: var(--text-base);
    pointer-events: none;
}



.assets-search input[b-ykhotfpvse] {
  width: 360px;
    padding: 8px 14px 8px 34px;
    border: none;
    border-radius: 20px;
    font-size: var(--text-base);
    font-family: inherit;
    background: transparent;
    color: var(--text);
    outline: none;
}

.assets-search input[b-ykhotfpvse]::placeholder {
  color: var(--text-light);
}

.assets-search-clear[b-ykhotfpvse] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: var(--text-muted);
    font-size: var(--text-sm);
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    transition: background 0.15s, color 0.15s;

    position: absolute;
    right: 78px;
    top: 50%;
    transform: translateY(-50%);
    
}

.assets-search-clear:hover[b-ykhotfpvse] {
    background: var(--surface-hover);
    color: var(--text);
}

.assets-search-apply[b-ykhotfpvse] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 16px;
    border: none;
    border-radius: var(--radius-full);
    background: var(--secondary);
    color: var(--primary);
    font-family: var(--font-family);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.15s;

    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
}

.assets-search-apply:hover[b-ykhotfpvse] {
    background: var(--secondary-cell-hover);
}

/* ── Filter Chips ── */

.assets-filter-chips[b-ykhotfpvse] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 0 24px 8px;
}

.assets-filter-chip[b-ykhotfpvse] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--secondary);
    color: var(--primary);
    border-radius: var(--radius-full);
    padding: 2px 3px 2px 8px;
    font-size: var(--text-base);
    white-space: nowrap;
    font-weight: var(--font-medium);
}

.assets-filter-chip__label[b-ykhotfpvse] {
    color: var(--tertiary);    
}

.assets-filter-chip__value[b-ykhotfpvse] {
    color: var(--primary); 
}

.assets-filter-chip__remove[b-ykhotfpvse] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--gray-400);
    cursor: pointer;
    padding: 0;
    margin-left: 2px;
    font-size: var(--text-xs);
    width: 16px;
    height: 16px;
    border-radius: var(--radius-full);
    transition: color 0.15s, background 0.15s;
}

.assets-filter-chip__remove:hover[b-ykhotfpvse] {
    background: var(--secondary-cell-hover);
    color: var(--danger);
}

.assets-filter-chip-clear[b-ykhotfpvse] {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: var(--text-sm);
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    transition: color 0.15s;
}

.assets-filter-chip-clear:hover[b-ykhotfpvse] {
    color: var(--text);
}

.assets-count[b-ykhotfpvse] {
    font-size: var(--text-base);
    color: var(--text-muted);
    white-space: nowrap;
}

.assets-add-btn[b-ykhotfpvse] {
    margin-left: auto;
    padding: 7px 18px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--surface);
    color: var(--text);
    font-size: var(--text-base);
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s, background 0.15s;
}

.assets-add-btn:hover[b-ykhotfpvse] {
    border-color: var(--accent);
    background: var(--surface-hover);
}

/* ── Modal ── */

.modal-overlay[b-ykhotfpvse] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-dialog[b-ykhotfpvse] {
    background: var(--surface);
    border-radius: 12px;
    width: 420px;
    max-width: 90vw;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
}

.modal-header[b-ykhotfpvse] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px 0;
}

.modal-title[b-ykhotfpvse] {
    font-weight: var(--font-semibold);
    font-size: var(--text-lg);
    color: var(--text);
}

.modal-close[b-ykhotfpvse] {
    background: none;
    border: none;
    font-size: var(--text-lg);
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    transition: color 0.15s;
}

.modal-close:hover[b-ykhotfpvse] {
    color: var(--text);
}

.modal-body[b-ykhotfpvse] {
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.modal-label[b-ykhotfpvse] {
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    color: var(--text);
}

.modal-required[b-ykhotfpvse] {
    color: var(--danger, #e74c3c);
}

.modal-input[b-ykhotfpvse] {
    padding: 9px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: var(--text-base);
    font-family: inherit;
    background: var(--surface);
    color: var(--text);
    outline: none;
    transition: border-color 0.15s;
}

.modal-input:focus[b-ykhotfpvse] {
    border-color: var(--accent);
}

.modal-error[b-ykhotfpvse] {
    font-size: var(--text-base);
    color: var(--danger, #e74c3c);
}

.modal-footer[b-ykhotfpvse] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 0 22px 18px;
}

.modal-btn[b-ykhotfpvse] {
    padding: 8px 20px;
    border-radius: 8px;
    font-size: var(--text-base);
    font-family: inherit;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.15s, border-color 0.15s;
}

.modal-btn--cancel[b-ykhotfpvse] {
    background: none;
    border-color: var(--border);
    color: var(--text-muted);
}

.modal-btn--cancel:hover[b-ykhotfpvse] {
    background: var(--surface-hover);
    color: var(--text);
}

.modal-btn--submit[b-ykhotfpvse] {
    background: var(--accent);
    color: var(--white);
    border-color: var(--accent);
    min-width: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.modal-btn--submit:hover[b-ykhotfpvse] {
    filter: brightness(1.08);
}

.modal-btn--submit:disabled[b-ykhotfpvse] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Tree / List ── */

.assets-tree[b-ykhotfpvse] {
    flex: 1;
    overflow-y: auto;
    padding: 0 0 24px;
    background: var(--surface);
    margin: 0 24px 24px;
    border-radius: 8px;
}

/* ── Tree rows ── */

.tree-row[b-ykhotfpvse] {
    display: flex;
    align-items: center;
    padding: 9px 12px;
    border-bottom: 1px solid #c0c0c0;
    cursor: pointer;
    gap: 8px;
    transition: background 0.1s;
    min-height: 40px;
    background: var(--surface);
}

.tree-row:nth-child(odd)[b-ykhotfpvse] {
    background: #f0f2f3;
}

.tree-row:hover[b-ykhotfpvse] {
    background: var(--surface-hover);
}

/* Indentation per level */
.tree-row--org[b-ykhotfpvse]     { padding-left: 8px; }
.tree-row--site[b-ykhotfpvse]    { padding-left: 36px; }
.tree-row--section[b-ykhotfpvse] { padding-left: 60px; }
.tree-row--item[b-ykhotfpvse]    { padding-left: 88px; }
.tree-row--flat[b-ykhotfpvse]    { padding-left: 8px; }

/* Chevrons */

.tree-chevron[b-ykhotfpvse] {
    width: 16px;
    text-align: center;
    font-size: var(--text-xs);
    color: var(--text-muted);
    flex-shrink: 0;
    transition: color 0.1s;
}

.tree-row:hover .tree-chevron[b-ykhotfpvse] {
    color: var(--text);
}

.tree-chevron--section[b-ykhotfpvse] {
    font-size: var(--text-xs);
    color: var(--text-light);
}

.tree-chevron--nav[b-ykhotfpvse] {
    font-size: 0.6rem;
    color: var(--text-light);
    opacity: 0;
    transition: opacity 0.15s;
}

.tree-row:hover .tree-chevron--nav[b-ykhotfpvse] {
    opacity: 1;
}

/* Cells */

.tree-cell[b-ykhotfpvse] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tree-cell--name[b-ykhotfpvse] {
    flex: 0 0 38%;
    min-width: 0;
    font-size: var(--text-base);
}

.tree-cell--info[b-ykhotfpvse] {
    flex: 0 0 28%;
    min-width: 0;
    font-size: var(--text-base);
    color: var(--text-muted);
}

/* Name variants */

.tree-name--org[b-ykhotfpvse] {
    font-weight: var(--font-semibold);
    color: var(--text);
}

.tree-name--org:hover[b-ykhotfpvse] {
    color: var(--accent);
    text-decoration: underline;
}

.tree-name--site[b-ykhotfpvse] {
    font-weight: var(--font-medium);
    color: var(--text);
}

.tree-name--site:hover[b-ykhotfpvse] {
    color: var(--accent);
    text-decoration: underline;
}

.tree-name--item[b-ykhotfpvse] {
    color: var(--text);
}

.tree-name--item:hover[b-ykhotfpvse] {
    color: var(--accent);
}

.tree-name--contact[b-ykhotfpvse] {
    color: var(--text);
}

.tree-name--contact:hover[b-ykhotfpvse] {
    color: var(--accent);
}

/* Section headers */

.tree-section-icon[b-ykhotfpvse] {
    font-size: var(--text-sm);
    color: var(--text-muted);
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}

.tree-section-title[b-ykhotfpvse] {
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    color: var(--text-muted);
}

/* ── Flat list header + columns ── */

.flat-header[b-ykhotfpvse] {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 2px solid #b0b0b0;
    gap: 8px;
    font-weight: var(--font-semibold);
    font-size: var(--text-base);
    color: var(--text);
    position: sticky;
    top: 0;
    background: var(--surface);
    z-index: 1;
}

.flat-col[b-ykhotfpvse] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-base);
}

.flat-col--name[b-ykhotfpvse] {
    flex: 1.5;
    font-weight: inherit;
}

.flat-col--narrow[b-ykhotfpvse] {
    flex: 0.6;
}

/* ── Grid-based sortable/resizable header & rows ── */

.flat-header--grid[b-ykhotfpvse] {
    display: grid !important;
    gap: 0;
}

.tree-row--grid[b-ykhotfpvse] {
    display: grid !important;
    gap: 0;
    padding-left: 12px;
}

.flat-col--header[b-ykhotfpvse] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    cursor: pointer;
    user-select: none;
    overflow: hidden;
}

.flat-col--header:hover[b-ykhotfpvse] {
    color: var(--accent);
}

.flat-col__title[b-ykhotfpvse] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sort-icon[b-ykhotfpvse] {
    font-size: var(--text-xs);
    color: var(--accent);
    flex-shrink: 0;
}

.sort-icon--inactive[b-ykhotfpvse] {
    color: var(--text-light);
    opacity: 0.4;
}

.flat-col--header:hover .sort-icon--inactive[b-ykhotfpvse] {
    opacity: 0.7;
}

.col-resize-handle[b-ykhotfpvse] {
    position: absolute;
    right: 0;
    top: 4px;
    bottom: 4px;
    width: 6px;
    cursor: col-resize;
    z-index: 2;
    border-radius: 2px;
    transition: background 0.1s;
}

.col-resize-handle:hover[b-ykhotfpvse] {
    background: var(--accent);
    opacity: 0.4;
}

/* Cells inside a grid row should ellipsis-truncate */
.tree-row--grid .flat-col[b-ykhotfpvse] {
    padding: 0 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Connection status icons ── */

.assets-status--online[b-ykhotfpvse] {
    color: #27ae60;
}

.assets-status--offline[b-ykhotfpvse] {
    color: var(--danger, #e74c3c);
}

/* =============================================
   CaseDetail — page layout
   ============================================= */

.case-detail[b-ykhotfpvse] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: var(--bg);
}

/* ── Header ── */

.case-detail__header[b-ykhotfpvse] {
    flex-shrink: 0;
    padding: 14px 24px 12px;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg);
}

/* Breadcrumb */

.case-detail__breadcrumb[b-ykhotfpvse] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-base);
    color: var(--text-muted);
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.bc-item[b-ykhotfpvse] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.bc-item i[b-ykhotfpvse] {
    font-size: var(--text-base);
}

.bc-sep[b-ykhotfpvse] {
    font-size: var(--text-base);
    color: var(--text-light);
}

/* Title */

.case-detail__title[b-ykhotfpvse] {
    margin-bottom: 12px;
}

.case-detail__title  .vg-inline__label[b-ykhotfpvse] {
    display: none;
}

.case-detail__title  .vg-inline__value[b-ykhotfpvse] {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--text);
    line-height: 1.45;
}

.case-detail__title  .vg-inline__input[b-ykhotfpvse] {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
}

/* Toolbar: badges left, actions right */

.case-detail__toolbar[b-ykhotfpvse] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.case-detail__badges[b-ykhotfpvse] {
    display: flex;
    align-items: stretch;
    gap: 8px;
    flex-wrap: wrap;
}

.case-detail__badge-inline[b-ykhotfpvse] {
    display: flex;
    align-items: center;
    min-width: 0;
}

.case-detail__badge-inline  .vg-inline__label[b-ykhotfpvse] {
    display: none;
}

.case-detail__badge-inline  .vg-inline__display[b-ykhotfpvse] {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    white-space: nowrap;
    cursor: pointer;
    border: 1px solid transparent;
}

.case-detail__badge-inline--priority  .vg-inline__display[b-ykhotfpvse] {
    border-color: transparent;
}

.case-detail__badge-inline--priority  .vg-inline__icon[b-ykhotfpvse] {
    color: inherit;
}

.case-detail__badge-inline--priority  .vg-priority--critical[b-ykhotfpvse] {
    background: var(--priority-critical);
    color: var(--white);
}

.case-detail__badge-inline--priority  .vg-priority--high[b-ykhotfpvse] {
    background: var(--priority-high);
    color: var(--white);
}

.case-detail__badge-inline--priority  .vg-priority--medium[b-ykhotfpvse] {
    background: var(--priority-medium);
    color: var(--white);
}

.case-detail__badge-inline--priority  .vg-priority--low[b-ykhotfpvse] {
    background: var(--priority-low);
    color: var(--white);
}

/* ── Status bar: unified bar wrapping status badge + workflow shortcuts ── */

.case-detail__status-bar[b-ykhotfpvse] {
    display: flex;
    align-items: center;
    gap: 0;
    border-radius: 20px;
    padding: 3px 4px 3px 0;
    flex-shrink: 0;
}

.case-detail__status-bar--idle[b-ykhotfpvse] {
    background: #DBEAFE;
}

.case-detail__status-bar--active[b-ykhotfpvse] {
    background: oklch(40% .04 218.39);
}

.case-detail__status-bar--review[b-ykhotfpvse] {
    background: #EDE9FE;
}

.case-detail__status-bar--done[b-ykhotfpvse] {
    background: #D1FAE5;
}

/* Status badge inside the bar — clickable button */

.status-bar__badge-wrapper[b-ykhotfpvse] {
    position: relative;
}

.status-bar__badge[b-ykhotfpvse] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: none;
    background: transparent;
    font-family: var(--font-family);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    letter-spacing: 0.03em;
    white-space: nowrap;
    cursor: pointer;
    border-radius: 20px;
    transition: opacity 0.15s;
    color: inherit;
}

.status-bar__badge:hover[b-ykhotfpvse] {
    opacity: 0.8;
}

.status-bar__badge i[b-ykhotfpvse] {
    font-size: var(--text-base);
}

.case-detail__status-bar--active .status-bar__badge[b-ykhotfpvse] {
    color: var(--white);
}

.case-detail__status-bar--idle .status-bar__badge[b-ykhotfpvse] {
    color: oklch(35% .06 250);
}

.case-detail__status-bar--done .status-bar__badge[b-ykhotfpvse] {
    color: oklch(35% .08 160);
}

.case-detail__status-bar--review .status-bar__badge[b-ykhotfpvse] {
    color: oklch(35% .08 290);
}

/* ── Status transition panel (dropdown) ── */

.status-panel__backdrop[b-ykhotfpvse] {
    position: fixed;
    inset: 0;
    z-index: 49;
}

.status-panel[b-ykhotfpvse] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 50;
    display: flex;
    gap: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    min-width: 220px;
    overflow: hidden;
}

.status-panel__left[b-ykhotfpvse] {
    display: flex;
    flex-direction: column;
    padding: 10px 0;
    min-width: 220px;
}

.status-panel__suggested[b-ykhotfpvse] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: none;
    background: transparent;
    font-family: var(--font-family);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    color: var(--text);
    cursor: pointer;
    white-space: nowrap;
    text-align: left;
    transition: background 0.12s;
}

.status-panel__suggested:hover[b-ykhotfpvse] {
    background: var(--surface-hover);
}

.status-panel__force-label[b-ykhotfpvse] {
    padding: 10px 16px 4px;
    font-size: var(--text-sm);
    font-weight: var(--font-normal);
    color: var(--text-muted);
    border-top: 1px solid var(--border-light);
    margin-top: 4px;
}

.status-panel__force-item[b-ykhotfpvse] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: none;
    background: transparent;
    font-family: var(--font-family);
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    color: var(--text);
    cursor: pointer;
    white-space: nowrap;
    text-align: left;
    transition: background 0.12s;
}

.status-panel__force-item:hover[b-ykhotfpvse] {
    background: var(--surface-hover);
}

.status-panel__force-item--selected[b-ykhotfpvse] {
    background: var(--surface-alt);
    border-radius: 20px;
    margin: 2px 8px;
    padding: 6px 14px;
    font-weight: var(--font-medium);
}

/* Audit note panel (right side) */

.status-panel__right[b-ykhotfpvse] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    border-left: 1px solid var(--border-light);
    min-width: 200px;
    max-width: 240px;
}

.status-panel__audit-label[b-ykhotfpvse] {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--text);
}

.status-panel__required-star[b-ykhotfpvse] {
    color: var(--danger);
}

.status-panel__audit-input[b-ykhotfpvse] {
    width: 100%;
    min-height: 64px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font-family);
    font-size: var(--text-base);
    color: var(--text);
    resize: vertical;
    background: var(--surface);
}

.status-panel__audit-input:focus[b-ykhotfpvse] {
    outline: none;
    border-color: var(--accent);
}

.status-panel__validation[b-ykhotfpvse] {
    font-size: var(--text-sm);
    color: var(--danger);
    font-weight: var(--font-normal);
}

.status-panel__buttons[b-ykhotfpvse] {
    display: flex;
    gap: 6px;
    margin-top: 4px;
}

.status-panel__btn[b-ykhotfpvse] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 32px;
    border: none;
    border-radius: 20px;
    font-size: var(--text-base);
    cursor: pointer;
    transition: opacity 0.15s;
    font-family: var(--font-family);
}

.status-panel__btn:disabled[b-ykhotfpvse] {
    opacity: 0.4;
    cursor: not-allowed;
}

.status-panel__btn--confirm[b-ykhotfpvse] {
    background: var(--success-bg);
    color: var(--success);
}

.status-panel__btn--confirm:not(:disabled):hover[b-ykhotfpvse] {
    opacity: 0.8;
}

.status-panel__btn--cancel[b-ykhotfpvse] {
    background: var(--surface);
    color: var(--danger);
    border: 1px solid var(--border);
}

.status-panel__btn--cancel:hover[b-ykhotfpvse] {
    background: var(--surface-hover);
}

.case-detail__badge-inline  .vg-inline__edit-icon[b-ykhotfpvse] {
    font-size: var(--text-base);
}

.case-detail__badge-inline  .vg-inline__editor[b-ykhotfpvse] {
    position: relative;
}

.case-detail__badge-inline  .vg-inline__select-panel[b-ykhotfpvse] {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 50;
}

.case-badge[b-ykhotfpvse] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
}

.case-badge--critical[b-ykhotfpvse] {
    background: var(--danger-bg);
    color: var(--danger);
    border: 1px solid rgba(192, 57, 43, 0.2);
}

.case-badge--status[b-ykhotfpvse] {
    background: var(--warning-bg);
    color: var(--warning);
    border: 1px solid rgba(230, 126, 34, 0.2);
}

.case-badge--due[b-ykhotfpvse] {
    background: var(--danger-bg);
    color: var(--danger);
    border: 1px solid rgba(192, 57, 43, 0.2);
}

.case-badge--workflow[b-ykhotfpvse] {
    background: var(--surface-alt);
    color: var(--text);
    border: 1px solid var(--border);
    font-weight: var(--font-medium);
}

.case-badge--workflow strong[b-ykhotfpvse] {
    background: var(--accent-bg);
    color: var(--accent);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: var(--text-base);
}

.case-badge--success[b-ykhotfpvse] {
    background: var(--success-bg);
    color: var(--success);
    border: 1px solid rgba(39, 174, 96, 0.2);
}

/* Avatars */

.case-detail__avatars[b-ykhotfpvse] {
    display: flex;
    gap: 0;
    margin-left: 4px;
}

.case-avatar[b-ykhotfpvse] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--white);
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--surface);
    margin-left: -6px;
}

.case-avatar:first-child[b-ykhotfpvse] {
    margin-left: 0;
}

.case-avatar--alt[b-ykhotfpvse] {
    background: var(--warning);
}

.case-avatar img[b-ykhotfpvse] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* Workflow shortcuts — inner pill inside the status bar */

.case-detail__workflow[b-ykhotfpvse] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: 20px;
    flex-shrink: 0;
}

.case-detail__status-bar--active .case-detail__workflow[b-ykhotfpvse] {
    background: rgba(255, 255, 255, 0.85);
}

.workflow__action[b-ykhotfpvse] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 4px;
    border: none;
    background: transparent;
    color: var(--text);
    font-family: var(--font-family);
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    cursor: pointer;
    white-space: nowrap;
    border-radius: var(--radius-sm);
    transition: background 0.15s;
}

.workflow__action:hover[b-ykhotfpvse] {
    background: var(--surface-hover);
}

.workflow__action i[b-ykhotfpvse] {
    font-size: var(--text-base);
    color: var(--text-muted);
}

.workflow__sep[b-ykhotfpvse] {
    font-size: var(--text-base);
    color: var(--text-light);
    font-weight: var(--font-normal);
}

.workflow__arrow[b-ykhotfpvse] {
    font-size: var(--text-base);
    color: var(--text-light);
}

.workflow__target[b-ykhotfpvse] {
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    padding: 1px 6px;
    border-radius: 4px;
    letter-spacing: 0.03em;
}

.workflow__target--idle[b-ykhotfpvse] {
    background: var(--warning-bg);
    color: var(--warning);
}

.workflow__target--active[b-ykhotfpvse] {
    background: var(--info-bg);
    color: var(--info);
}

.workflow__target--review[b-ykhotfpvse] {
    background: rgba(142, 68, 173, 0.08);
    color: #8e44ad;
}

.workflow__target--done[b-ykhotfpvse] {
    background: var(--success-bg);
    color: var(--success);
}

/* Action buttons */

.case-detail__actions[b-ykhotfpvse] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/*shadow-md hover: hover:*/
.case-action-btn[b-ykhotfpvse] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 5px 12px;
    border: 0px solid var(--border);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-md);
    background: var(--primary-surface-tint);
    color: var(--primary);
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
    font-family: var(--font-family);
}

.case-action-btn:hover[b-ykhotfpvse] {
    background: var(--primary-400);
    color: var(--primary-foreground);
    /*border-color: var(--text-light);*/
}

.case-action-btn i[b-ykhotfpvse] {
    font-size: var(--text-base);
    color: var(--primary);
}

.case-action-btn:hover i[b-ykhotfpvse] {
  color: var(--white);
}

/* ── Left pane content ── */

.case-left[b-ykhotfpvse] {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.case-left__top[b-ykhotfpvse] {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.case-left__fields[b-ykhotfpvse] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 0 0 25%;
    min-width: 140px;
}

.case-field[b-ykhotfpvse] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-base);
    color: var(--text);
    padding: 4px 0;    
    
}

.case-field i[b-ykhotfpvse] {
    font-size: var(--text-base);
    color: var(--text-muted);
    width: 16px;
    text-align: center;    
}

.case-field--inline-select[b-ykhotfpvse] {
    flex: 1;
    min-width: 0;    
    position: relative;
}

.case-field--inline-select > i[b-ykhotfpvse] {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    pointer-events: none; /* prevents blocking clicks */
}

.case-field--inline-select .vg-inline[b-ykhotfpvse] {
    flex: 1;
    min-width: 0;
    width: 100%;
}

.case-field--inline-select  .vg-inline__label[b-ykhotfpvse] {
    display: none;    
}

.case-field--inline-select  .vg-inline__display[b-ykhotfpvse] {
    padding: 2px 4px 2px 28px;
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    border: 1px solid var(--tertiary-300);
    cursor: pointer;
    white-space: nowrap;
}

.case-field--inline-select .vg-inline__display[b-ykhotfpvse] {
    display: flex;       /* or block */
    width: 100%;
}

.case-field--inline-select  .vg-inline__display:hover[b-ykhotfpvse] {
    border-color: var(--text-light);
}

.case-field--inline-select  .vg-inline__editor[b-ykhotfpvse] {
    position: relative;
}

.case-field--inline-select  .vg-inline__select-panel[b-ykhotfpvse] {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 50;
}

.case-field--editable[b-ykhotfpvse] {
    background: var(--accent-bg);
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    padding: 4px 8px;
    position: relative;
}

.case-field__more[b-ykhotfpvse] {
    position: absolute;
    top: -6px;
    right: -10px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    background: var(--accent);
    color: var(--white);
    font-size: var(--text-base);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.case-left__note[b-ykhotfpvse] {
    flex: 1 1 0;
    min-width: 160px;
}

.case-sticky-note[b-ykhotfpvse] {
    background: var(--sticky-bg);
    border: 1px solid var(--sticky-border);
    border-radius: var(--radius-lg);
    padding: 12px 14px;
    display: flex;
    gap: 10px;
    height: 100%;
    min-height: 80px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}
.case-sticky-note:hover[b-ykhotfpvse] {
    background: var(--sticky-bg-hover);
    cursor: pointer;
}

.case-sticky-note__icon[b-ykhotfpvse] {
    color: var(--gray-500);
    font-size: var(--text-base);
    flex-shrink: 0;
    margin-top: 2px;
}

.case-sticky-note__input[b-ykhotfpvse] {
    flex: 1;
    border: none;
    background: transparent;
    font-family: var(--font-family);
    font-size: var(--text-base);
    line-height: 1.55;
    color: var(--text);
    resize: none;
    outline: none;
    min-height: 100%;    
}
.case-sticky-note__input:hover[b-ykhotfpvse] {
    cursor: pointer;    
}

.case-sticky-note__input[b-ykhotfpvse]::placeholder {
    color: var(--text-muted);
    /*opacity: 0.6;*/
}

.case-note-card[b-ykhotfpvse] {
    background: var(--surface-alt);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    display: flex;
    gap: 10px;
    font-size: var(--text-base);
    line-height: 1.5;
    color: var(--text);
}

.case-note-card__icon[b-ykhotfpvse] {
    color: var(--accent);
    font-size: var(--text-base);
    flex-shrink: 0;
    margin-top: 2px;
}

.case-note-card p[b-ykhotfpvse] {
    margin: 0;
}

.case-left__sections[b-ykhotfpvse] {
    display: flex;
    flex-direction: column;
}

/* ── Insights section ── */

.insights[b-ykhotfpvse] {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.insights__ai[b-ykhotfpvse] {
    flex: 1;
    min-width: 350px;
    font-size: var(--text-base);
    line-height: 1.65;
    color: var(--text);
}

.insights__ai p[b-ykhotfpvse] {
    margin: 0 0 10px;
}

.insights__ai ul[b-ykhotfpvse] {
    margin: 0;
    padding-left: 20px;
}

.insights__ai li[b-ykhotfpvse] {
    margin-bottom: 6px;
}

.insights__context[b-ykhotfpvse] {
    flex: 1;
    min-width: 350px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.insights__entity[b-ykhotfpvse] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.insights__entity-header[b-ykhotfpvse] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    color: var(--text);
}

.insights__entity-header i[b-ykhotfpvse] {
    font-size: var(--text-base);
    color: var(--text-muted);
    width: 16px;
    text-align: center;
}

.insights__entity-name[b-ykhotfpvse] {
    flex: 1;
    min-width: 0;
}

.insights__entity-name--muted[b-ykhotfpvse] {
    color: var(--text-muted);
    font-weight: var(--font-normal);
    font-style: italic;
}

.insights__split-btn[b-ykhotfpvse] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    background: none;
    color: var(--text-light);
    cursor: pointer;
    border-radius: var(--radius-sm);
    font-size: var(--text-base);
    padding: 0;
    flex-shrink: 0;
    transition: color 0.15s, background 0.15s;
}

.insights__split-btn:hover[b-ykhotfpvse] {
    color: var(--accent);
    background: var(--accent-bg);
}

.insights__pinned-note[b-ykhotfpvse] {
    background: var(--white);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    display: flex;
    gap: 8px;
    font-size: var(--text-base);
    line-height: 1.5;
    color: var(--text);
    /*box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);*/
}

.insights__pinned-note p[b-ykhotfpvse] {
    margin: 0;
    white-space: pre-line;    
}

.insights__pinned-icon[b-ykhotfpvse] {
    color: var(--gray-300);
    font-size: var(--text-base);
    flex-shrink: 0;
    margin-top: 2px;
}

.insights__no-notes[b-ykhotfpvse] {
    font-size: var(--text-base);
    color: var(--text-muted);
    font-style: italic;
    padding-left: 24px;
}

.insights__alarm-chart-wrapper[b-ykhotfpvse] {
    position: relative;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    height: 180px;
    overflow: hidden;
    background: var(--surface);
}

.insights__alarm-chart[b-ykhotfpvse] {
    width: 100%;
    height: 100%;
}

.insights__alarm-overlay[b-ykhotfpvse] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--text-light);
    font-size: var(--text-base);
    background: var(--surface-alt);
    pointer-events: none;
}

.insights__alarm-overlay i[b-ykhotfpvse] {
    font-size: var(--text-2xl);
    opacity: 0.5;
}

.insights__widgets[b-ykhotfpvse] {
    display: none;
    gap: 8px;
}

.insights__widget[b-ykhotfpvse] {
    flex: 1;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-base);
    color: var(--text);
    white-space: nowrap;
}

.insights__widget i[b-ykhotfpvse] {
    font-size: var(--text-base);
    color: var(--text-muted);
}

/* ── Related section ── */

.related[b-ykhotfpvse] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.related__heading[b-ykhotfpvse] {
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    color: var(--text-muted);
    margin: 10px 0 4px;
}

.related__heading:first-child[b-ykhotfpvse] {
    margin-top: 0;
}

.related__list[b-ykhotfpvse] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.related__item[b-ykhotfpvse] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 9px 14px;
    font-size: var(--text-base);
    color: var(--text);
}

.related__item-icon[b-ykhotfpvse] {
    font-size: var(--text-base);
    color: var(--text-muted);
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}

.related__item-id[b-ykhotfpvse] {
    font-weight: var(--font-semibold);
    color: var(--accent);
    white-space: nowrap;
}

.related__item-label[b-ykhotfpvse] {
    flex: 1;
    min-width: 0;
    color: var(--text-muted);
}

.related__item-badge[b-ykhotfpvse] {
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    padding: 2px 10px;
    border-radius: 20px;
    white-space: nowrap;
    border: 1px solid;
    flex-shrink: 0;
}

.related__item-badge--open[b-ykhotfpvse] {
    color: var(--warning);
    border-color: rgba(230, 126, 34, 0.2);
    background: var(--warning-bg);
}

.related__item-badge--inprogress[b-ykhotfpvse] {
    color: var(--info);
    border-color: rgba(41, 128, 185, 0.2);
    background: var(--info-bg);
}

.related__item-badge--resolved[b-ykhotfpvse] {
    color: var(--success);
    border-color: rgba(39, 174, 96, 0.2);
    background: var(--success-bg);
}

.related__empty[b-ykhotfpvse] {
    font-size: var(--text-base);
    color: var(--text-muted);
    font-style: italic;
    margin: 4px 0;
}

/* ── Center pane content ── */

.case-center[b-ykhotfpvse] {
    padding: 16px;
    display: flex;
    flex-direction: column;
}

.case-metrics-hint[b-ykhotfpvse] {
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 5px;
}

.case-metrics-hint i[b-ykhotfpvse] {
    color: var(--warning);
    font-size: var(--text-base);
}

/* ── Right / third pane content ── */

.case-right[b-ykhotfpvse] {
    padding: 16px;
    display: flex;
    flex-direction: column;
}

.case-right__placeholder[b-ykhotfpvse] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    color: var(--text-light);
    font-size: var(--text-base);
    padding: 40px 16px;
}

.case-right__placeholder i[b-ykhotfpvse] {
    font-size: var(--text-2xl);
    opacity: 0.5;
}

/* ── Field selects ── */

.case-field__select[b-ykhotfpvse] {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 4px 8px;
    font-size: var(--text-base);
    font-family: var(--font-family);
    color: var(--text);
    background: var(--surface);
    cursor: pointer;
    width: 100%;
}

.case-field__select:focus[b-ykhotfpvse] {
    outline: none;
    border-color: var(--accent);
}

/* ── Resolution section ── */

.resolution-grid[b-ykhotfpvse] {
    /*display: grid;
    grid-template-columns: 1fr 1fr;*/
    gap: 16px;
}

.resolution-col[b-ykhotfpvse] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.resolution-label[b-ykhotfpvse] {
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    color: var(--text);
    margin: 8px 0 2px;
}
.resolution-col:first-child[b-ykhotfpvse] {
    display: none;
}

.resolution-label:first-child[b-ykhotfpvse] {
    margin-top: 0;
}

.resolution-summary[b-ykhotfpvse] {
    font-size: var(--text-base);
    color: var(--text);
    line-height: 1.5;
    margin: 0;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    transition: border-color 0.15s;
}

.resolution-summary:hover[b-ykhotfpvse] {
    border-color: var(--border);
}

.resolution-summary-edit[b-ykhotfpvse] {
    position: relative;
}

.resolution-summary-edit__input[b-ykhotfpvse] {
    width: 100%;
    min-height: 120px;
    border: 2px solid var(--accent);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    font-family: var(--font-family);
    font-size: var(--text-base);
    line-height: 1.5;
    color: var(--text);
    background: var(--surface);
    resize: vertical;
    outline: none;
}

.resolution-summary-edit__actions[b-ykhotfpvse] {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    gap: 4px;
}

.resolution-summary-edit__btn[b-ykhotfpvse] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-base);
    cursor: pointer;
    transition: opacity 0.15s;
}

.resolution-summary-edit__btn:hover[b-ykhotfpvse] {
    opacity: 0.85;
}

.resolution-summary-edit__btn--confirm[b-ykhotfpvse] {
    background: var(--success);
    color: var(--white);
    border-color: var(--success);
}

.resolution-summary-edit__btn--cancel[b-ykhotfpvse] {
    background: var(--surface);
    color: var(--danger);
    border-color: var(--danger);
}

.resolution-inline-select  .vg-inline__label[b-ykhotfpvse] {
    display: none;
}

.resolution-inline-select  .vg-inline__display[b-ykhotfpvse] {
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    font-size: var(--text-base);
    border: 1px solid var(--border);
    cursor: pointer;
    width: 100%;
}

.resolution-inline-select  .vg-inline__display:hover[b-ykhotfpvse] {
    border-color: var(--text-light);
}

.resolution-inline-select  .vg-inline__editor[b-ykhotfpvse] {
    position: relative;
}

.resolution-inline-select  .vg-inline__select-panel[b-ykhotfpvse] {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 50;
}

.resolution-empty[b-ykhotfpvse] {
    font-size: var(--text-base);
    color: var(--text-muted);
    font-style: italic;
}

.resolution-fields-grid[b-ykhotfpvse] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

/* ── Resolution checklist ── */

.resolution-checklist[b-ykhotfpvse] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.resolution-task[b-ykhotfpvse] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-base);
    color: var(--text);
}

.resolution-task input[type="checkbox"][b-ykhotfpvse] {
    accent-color: var(--accent);
    cursor: pointer;
    width: 15px;
    height: 15px;
}

.resolution-task--done span[b-ykhotfpvse] {
    text-decoration: line-through;
    color: var(--text-muted);
}

/* ── Metrics row ── */

.case-metrics-row[b-ykhotfpvse] {
    font-size: var(--text-base);
    color: var(--text);
    padding: 4px 0;
}

/* ── Success badge variant ── */

.case-badge--success[b-ykhotfpvse] {
    background: var(--success-bg, #e8f5e9);
    color: var(--success);
    border: 1px solid rgba(39, 174, 96, 0.2);
}

/* ── History section ── */

.history[b-ykhotfpvse] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.history__toolbar[b-ykhotfpvse] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.history__search[b-ykhotfpvse] {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    padding: 5px 10px;
    background: var(--surface);
    flex: 1;
    min-width: 160px;
    max-width: 320px;
}

.history__search i[b-ykhotfpvse] {
    color: var(--text-muted);
    font-size: var(--text-base);
}

.history__search input[b-ykhotfpvse] {
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--font-family);
    font-size: var(--text-base);
    color: var(--text);
    width: 100%;
}

.history__search input[b-ykhotfpvse]::placeholder {
    color: var(--text-light);
}

.history__count[b-ykhotfpvse] {
    font-size: var(--text-base);
    color: var(--text-muted);
    white-space: nowrap;
}

.history__tabs[b-ykhotfpvse] {
    display: flex;
    gap: 0px;
    margin-left: auto;
    border-radius: var(--radius-md);
    border: 1px solid var(--tertiary-200);
}

.history__tabs button:first-child[b-ykhotfpvse] {
  border-top-left-radius: var(--radius-md);  
  border-bottom-left-radius: var(--radius-md);    
}

.history__tabs button:last-child[b-ykhotfpvse] {
  border-top-right-radius: var(--radius-md);  
  border-bottom-right-radius: var(--radius-md);    
}

.history__tab[b-ykhotfpvse] {
    padding: 8px 16px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--white);
    color: var(--primary);
    font-family: var(--font-family);
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}

.history__tab:hover[b-ykhotfpvse] {
    background: var(--tertiary);
    color: var(--white);
    border-color: var(--white);
}

.history__tab--active[b-ykhotfpvse] {
    background: var(--tertiary);
    color: var(--white);
    border-color: var(--white);
}

.history__tab--active:hover[b-ykhotfpvse] {
    background: var(--tertiary);
}

.history__sub-filters[b-ykhotfpvse] {
    display: none;
    gap: 4px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.history__badge[b-ykhotfpvse] {
    padding: 2px 8px;
    border: 0px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--secondary);
    color: var(--primary);
    font-family: var(--font-family);
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}

.history__badge:hover[b-ykhotfpvse] {
    background: var(--surface-hover);
}

.history__badge--active[b-ykhotfpvse] {
    background: var(--accent);
    color: var(--white);
    border-color: var(--accent);
}

.history__last-update[b-ykhotfpvse] {
    text-align: right;
    font-size: var(--text-base);
    color: var(--accent);
    font-weight: var(--font-normal);
}

.history__entries[b-ykhotfpvse] {
    display: flex;
    flex-direction: column;
}

.history__entry[b-ykhotfpvse] {
    display: flex;
    gap: 12px;
    padding: 14px 0;
    border-top: 1px solid var(--border-light);
}

.history__entry:first-child[b-ykhotfpvse] {
    border-top: none;
}

.history__entry-icon[b-ykhotfpvse] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: var(--text-base);
}

.history__entry-icon--fieldchange[b-ykhotfpvse] {
    background: var(--accent);
    color: var(--white);
}

.history__entry-icon--note[b-ykhotfpvse] {
    background: var(--primary);
    color: var(--white);
    border: 1px solid var(--border-light);
}

.history__entry-icon--timelogged[b-ykhotfpvse] {
    background: var(--warning-bg);
    color: var(--warning);
    border: 1px solid rgba(230, 126, 34, 0.15);
}

.history__entry-icon--call[b-ykhotfpvse] {
    background: rgba(42, 157, 143, 0.12);
    color: var(--accent);
    border: 1px solid rgba(42, 157, 143, 0.2);
}

.history__entry-icon--message[b-ykhotfpvse] {
    background: rgba(41, 128, 185, 0.1);
    color: var(--info);
    border: 1px solid rgba(41, 128, 185, 0.2);
}

.history__entry-icon--email[b-ykhotfpvse] {
    background: rgba(155, 89, 182, 0.1);
    color: #9b59b6;
    border: 1px solid rgba(155, 89, 182, 0.2);
}

.history__entry-icon--task[b-ykhotfpvse] {
    background: rgba(52, 73, 94, 0.1);
    color: #34495e;
    border: 1px solid rgba(52, 73, 94, 0.2);
}

.history__entry-content[b-ykhotfpvse] {
    flex: 1;
    min-width: 0;
}

.history__entry-header[b-ykhotfpvse] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 6px;
}

.history__entry-title[b-ykhotfpvse] {
    font-weight: var(--font-normal);
    font-size: var(--text-base);
    color: var(--text);
}

.history__entry-meta[b-ykhotfpvse] {
    font-size: var(--text-base);
    color: var(--text-muted);
    white-space: nowrap;
}

.history__field-change[b-ykhotfpvse] {
    background: var(--surface-alt);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 8px 14px;
    display: flex;
    align-items: center;
    gap: 0;
    font-size: var(--text-base);
}

.history__old-value[b-ykhotfpvse] {
    color: var(--text-muted);
    text-decoration: line-through;
}

.history__arrow[b-ykhotfpvse] {
    color: var(--text-muted);
    padding: 0 12px;
    flex-shrink: 0;
}

.history__new-value[b-ykhotfpvse] {
    font-weight: var(--font-bold);
    color: var(--text);
}

.history__note-content[b-ykhotfpvse] {
    background: rgba(42, 157, 143, 0.06);
    border: 1px solid rgba(42, 157, 143, 0.12);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    font-size: var(--text-base);
    line-height: 1.55;
    color: var(--text);
}

.history__time-content[b-ykhotfpvse] {
    background: var(--warning-bg);
    border: 1px solid rgba(230, 126, 34, 0.12);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    font-size: var(--text-base);
    line-height: 1.55;
    color: var(--text);
}

.history__comm-content[b-ykhotfpvse] {
    background: rgba(42, 157, 143, 0.06);
    border: 1px solid rgba(42, 157, 143, 0.12);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    font-size: var(--text-base);
    line-height: 1.55;
    color: var(--text);
    white-space: pre-line;
}

.history__task-content[b-ykhotfpvse] {
    background: rgba(52, 73, 94, 0.06);
    border: 1px solid rgba(52, 73, 94, 0.12);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    font-size: var(--text-base);
    line-height: 1.55;
    color: var(--text);
}

.history__empty[b-ykhotfpvse] {
    font-size: var(--text-base);
    color: var(--text-muted);
    font-style: italic;
    padding: 12px 0;
}
/* /Pages/CaseDetail.razor.rz.scp.css */
/*========== HIDDING FEATURES =========*/
.toolbar-btn:has(i.fa-gear)[b-hkx9z84ytv],
.toolbar-btn:has(i.fa-gear)[b-hkx9z84ytv],
/*.case-action-btn:has(i.fa-clock),*/
/*.case-action-btn:has(i.fa-envelope),*/
.case-action-btn:has(i.fa-list-check)[b-hkx9z84ytv] {
  display: none;
}

.case-section:has(.case-section__icon.fa-note-sticky)[b-hkx9z84ytv] {
  display: none;
}

.workflow__action:has(i.fa-pause)[b-hkx9z84ytv] {
    font-weight: var(--font-normal);
    background: transparent;
    box-shadow: none;
}

.workflow__action:has(i.fa-pause):hover[b-hkx9z84ytv] {
    font-weight: var(--font-normal);
    color: var(--primary);
    background: var(--secondary-cell-hover);
    box-shadow: var(--shadow-md);
}

.search-page .search-icon[b-hkx9z84ytv] {
  display: none;
}

/*.case-action-btn i.fa-solid.fa-phone,*/
/*.case-sticky-note i.fa-thumbtack,*/
.case-action-btn i.fa-solid.fa-comment[b-hkx9z84ytv],
.case-action-btn i.fa-solid.fa-note-sticky[b-hkx9z84ytv] {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: var(--font-normal) !important;
}

/* =============================================
   CaseDetail — page layout
   ============================================= */

.case-detail[b-hkx9z84ytv] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: var(--bg);
}

/* ── Header ── */

.case-detail__header[b-hkx9z84ytv] {
    flex-shrink: 0;
    padding: 14px 24px 12px;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg);
}

/* Breadcrumb */

.case-detail__breadcrumb[b-hkx9z84ytv] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-base);
    color: var(--text-muted);
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.bc-item[b-hkx9z84ytv] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.bc-item i[b-hkx9z84ytv] {
    font-size: var(--text-base);
}

.bc-sep[b-hkx9z84ytv] {
    font-size: var(--text-base);
    color: var(--text-light);
}

/* Title */

.case-detail__title[b-hkx9z84ytv] {
    margin-bottom: 12px;
}

.case-detail__title[b-hkx9z84ytv]  .vg-inline__label {
    display: none;
}

.case-detail__title[b-hkx9z84ytv]  .vg-inline__value {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--text);
    line-height: 1.45;
}

.case-detail__title[b-hkx9z84ytv]  .vg-inline__input {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
}

/* Toolbar: badges left, actions right */

.case-detail__toolbar[b-hkx9z84ytv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.case-detail__badges[b-hkx9z84ytv] {
    display: flex;
    align-items: stretch;
    gap: 8px;
    flex-wrap: wrap;
}

.case-detail__badge-inline[b-hkx9z84ytv] {
    display: flex;
    align-items: center;
    min-width: 0;
}

.case-detail__badge-inline[b-hkx9z84ytv]  .vg-inline__label {
    display: none;
}

.case-detail__badge-inline[b-hkx9z84ytv]  .vg-inline__display {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    white-space: nowrap;
    cursor: pointer;
    border: 1px solid transparent;
}

.case-detail__badge-inline--priority[b-hkx9z84ytv]  .vg-inline__display {
    border-color: transparent;
}

.case-detail__badge-inline--priority[b-hkx9z84ytv]  .vg-inline__icon {
    color: inherit;
}

.case-detail__badge-inline--priority[b-hkx9z84ytv]  .vg-priority--critical {
    background: var(--priority-critical);
    color: #fff;
}

.case-detail__badge-inline--priority:hover[b-hkx9z84ytv]  .vg-priority--critical {
    background: oklch(0.550 0.1100 22.46);    
}

.case-detail__badge-inline--priority[b-hkx9z84ytv]  .vg-priority--high {
    background: var(--priority-high);
    color: #fff;
}

.case-detail__badge-inline--priority:hover[b-hkx9z84ytv]  .vg-priority--high {
    background: oklch(0.7500 0.1300 62.22);
}

.case-detail__badge-inline--priority[b-hkx9z84ytv]  .vg-priority--medium {
    background: var(--priority-medium);
    color: #fff;
}

.case-detail__badge-inline--priority:hover[b-hkx9z84ytv]  .vg-priority--medium {
    background: oklch(0.5500 0.0500 239.28);
}

.case-detail__badge-inline--priority[b-hkx9z84ytv]  .vg-priority--low {
    background: var(--priority-low);
    color: #fff;
}

.case-detail__badge-inline--priority:hover[b-hkx9z84ytv]  .vg-priority--low {
    background: oklch(0.7800 0 0);
}

/* ── Status bar: unified bar wrapping status badge + workflow shortcuts ── */

.case-detail__status-bar[b-hkx9z84ytv] {
    display: flex;
    align-items: center;
    gap: 0;
    border-radius: var(--radius-md);
    padding: 4px 4px 4px 8px;
    flex-shrink: 0; 
    border: 1px solid transparent;
    z-index: 10;
}

.case-detail__status-bar:hover[b-hkx9z84ytv] {
    border: 1px solid var(--tertiary);
}

.case-detail__status-bar--idle[b-hkx9z84ytv] {
    background: #DBEAFE;
}

.case-detail__status-bar--idle:hover[b-hkx9z84ytv] {
    background: oklch(0.900 0.0300 255.59)
}

.case-detail__status-bar--active[b-hkx9z84ytv] {
    background: var(--primary);
}

.case-detail__status-bar--active:hover[b-hkx9z84ytv] {
    background: oklch(0.5000 0.0400 218.39);
}

.case-detail__status-bar--review[b-hkx9z84ytv] {
    background: #EDE9FE;
}

.case-detail__status-bar--review:hover[b-hkx9z84ytv] {
    background: oklch(0.9000 0.0300 294.59);
}

.case-detail__status-bar--done[b-hkx9z84ytv] {
    background: #D1FAE5;
}

.case-detail__status-bar--done:hover[b-hkx9z84ytv] {
    background: oklch(0.9 0.05 163.05)
}

/* Status badge inside the bar — clickable button */

.status-bar__badge-wrapper[b-hkx9z84ytv] {
    position: relative;
}

.status-bar__badge[b-hkx9z84ytv] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: none;
    background: transparent;
    font-family: var(--font-family);
    font-size: var(--text-base);
    font-weight: var(--font-normal.);
    letter-spacing: 0.03em;
    white-space: nowrap;
    cursor: pointer;
    border-radius: 20px;
    transition: opacity 0.15s;
    color: inherit;
    margin-right: 6px;
}

.status-bar__badge:hover[b-hkx9z84ytv] {
    opacity: 0.8;
}

.status-bar__badge i[b-hkx9z84ytv] {
    font-size: var(--text-base);
}

.case-detail__status-bar--active .status-bar__badge[b-hkx9z84ytv] {
    color: #fff;
}

.case-detail__status-bar--idle .status-bar__badge[b-hkx9z84ytv] {
    color: oklch(35% .06 250);
}

.case-detail__status-bar--done .status-bar__badge[b-hkx9z84ytv] {
    color: oklch(35% .08 160);
}

.case-detail__status-bar--review .status-bar__badge[b-hkx9z84ytv] {
    color: oklch(35% .08 290);
}

/*.case-detail__status-bar--done */
.status-bar__badge:hover[b-hkx9z84ytv] {
    background-color: var(--secondary-hover);    
    box-shadow: var(--shadow-md);
    color: var(--primary);
}

/* ── Status transition panel (dropdown) ── */

.status-panel__backdrop[b-hkx9z84ytv] {
    position: fixed;
    inset: 0;
    z-index: 49;
}

.status-panel[b-hkx9z84ytv] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 50;
    display: flex;
    gap: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    min-width: 220px;
    overflow: hidden;
}

.status-panel__left[b-hkx9z84ytv] {
    display: flex;
    flex-direction: column;
    padding: 10px 0;
    min-width: 220px;
}

.status-panel__suggested[b-hkx9z84ytv] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: none;
    background: transparent;
    font-family: var(--font-family);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    color: var(--text);
    cursor: pointer;
    white-space: nowrap;
    text-align: left;
    transition: background 0.12s;
}

.status-panel__suggested:hover[b-hkx9z84ytv] {
    background: var(--surface-hover);
}

.status-panel__force-label[b-hkx9z84ytv] {
    padding: 10px 16px 4px;
    font-size: 0.8rem;
    font-weight: var(--font-normal);
    color: var(--text-muted);
    border-top: 1px solid var(--border-light);
    margin-top: 4px;
}

.status-panel__force-item[b-hkx9z84ytv] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: none;
    background: transparent;
    font-family: var(--font-family);
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    color: var(--text);
    cursor: pointer;
    white-space: nowrap;
    text-align: left;
    transition: background 0.12s;
}

.status-panel__force-item:hover[b-hkx9z84ytv] {
    background: var(--surface-hover);
}

.status-panel__force-item--selected[b-hkx9z84ytv] {
    background: var(--surface-alt);
    border-radius: 20px;
    margin: 2px 8px;
    padding: 6px 14px;
    font-weight: var(--font-medium);
}

/* Audit note panel (right side) */

.status-panel__right[b-hkx9z84ytv] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    border-left: 1px solid var(--border-light);
    min-width: 200px;
    max-width: 240px;
}

.status-panel__audit-label[b-hkx9z84ytv] {
    font-size: 0.85rem;
    font-weight: var(--font-medium);
    color: var(--text);
}

.status-panel__required-star[b-hkx9z84ytv] {
    color: var(--danger);
}

.status-panel__audit-input[b-hkx9z84ytv] {
    width: 100%;
    min-height: 64px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font-family);
    font-size: 0.9rem;
    color: var(--text);
    resize: vertical;
    background: var(--surface);
}

.status-panel__audit-input:focus[b-hkx9z84ytv] {
    outline: none;
    border-color: var(--accent);
}

.status-panel__validation[b-hkx9z84ytv] {
    font-size: 0.78rem;
    color: var(--danger);
    font-weight: var(--font-normal);
}

.status-panel__buttons[b-hkx9z84ytv] {
    display: flex;
    gap: 6px;
    margin-top: 4px;
}

.status-panel__btn[b-hkx9z84ytv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 32px;
    border: none;
    border-radius: 20px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: opacity 0.15s;
    font-family: var(--font-family);
}

.status-panel__btn:disabled[b-hkx9z84ytv] {
    opacity: 0.4;
    cursor: not-allowed;
}

.status-panel__btn--confirm[b-hkx9z84ytv] {
    background: var(--success-bg);
    color: var(--success);
}

.status-panel__btn--confirm:not(:disabled):hover[b-hkx9z84ytv] {
    opacity: 0.8;
}

.status-panel__btn--cancel[b-hkx9z84ytv] {
    background: var(--surface);
    color: var(--danger);
    border: 1px solid var(--border);
}

.status-panel__btn--cancel:hover[b-hkx9z84ytv] {
    background: var(--surface-hover);
}

.case-detail__badge-inline[b-hkx9z84ytv]  .vg-inline__edit-icon {
    font-size: var(--text-base);
}

.case-detail__badge-inline[b-hkx9z84ytv]  .vg-inline__editor {
    position: relative;
}

.case-detail__badge-inline[b-hkx9z84ytv]  .vg-inline__select-panel {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 50;
}

.case-badge[b-hkx9z84ytv] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
}

.case-badge--critical[b-hkx9z84ytv] {
    background: var(--danger-bg);
    color: var(--danger);
    border: 1px solid rgba(192, 57, 43, 0.2);
}

.case-badge--status[b-hkx9z84ytv] {
    background: var(--warning-bg);
    color: var(--warning);
    border: 1px solid rgba(230, 126, 34, 0.2);
}

.case-badge--due[b-hkx9z84ytv] {
    background: var(--danger-bg);
    color: var(--danger);
    border: 1px solid rgba(192, 57, 43, 0.2);
}

.case-badge--workflow[b-hkx9z84ytv] {
    background: var(--surface-alt);
    color: var(--text);
    border: 1px solid var(--border);
    font-weight: var(--font-medium);
}

.case-badge--workflow strong[b-hkx9z84ytv] {
    background: var(--accent-bg);
    color: var(--accent);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: var(--text-base);
}

.case-badge--success[b-hkx9z84ytv] {
    background: var(--success-bg);
    color: var(--success);
    border: 1px solid rgba(39, 174, 96, 0.2);
}

/* Avatars */

.case-detail__avatars[b-hkx9z84ytv] {
    display: flex;
    gap: 0;
    margin-left: 4px;
}

.case-avatar[b-hkx9z84ytv] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--surface);
    margin-left: -6px;
}

.case-avatar:first-child[b-hkx9z84ytv] {
    margin-left: 0;
}

.case-avatar--alt[b-hkx9z84ytv] {
    background: var(--warning);
}

.case-avatar img[b-hkx9z84ytv] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* Workflow shortcuts — inner pill inside the status bar */

.case-detail__workflow[b-hkx9z84ytv] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px;
    border: 0px solid var(--border);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
    border-radius: 20px;
    flex-shrink: 0;
}

.case-detail__status-bar--active .case-detail__workflow[b-hkx9z84ytv] {
    background: var(--white);
}

.workflow__action[b-hkx9z84ytv] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 12px;
    border: none;
    background: var(--primary-surface-tint);
    color: var(--primary);
    font-family: var(--font-family);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    cursor: pointer;
    white-space: nowrap;
    border-radius: var(--radius-full);
    transition: background 0.15s;
    box-shadow: var(--shadow);
}

.workflow__hold-btn[b-hkx9z84ytv] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 12px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text);
    font-family: var(--font-family);
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    cursor: pointer;
    white-space: nowrap;
    border-radius: var(--radius-full);
    transition: background 0.15s, color 0.15s;
    margin: 0 0 0 0px;
}

.workflow__hold-btn:hover[b-hkx9z84ytv] {
    font-weight: var(--font-normal);
    color: var(--primary);
    background: var(--secondary-cell-hover);
    box-shadow: var(--shadow-md);
}

.workflow__hold-btn--danger[b-hkx9z84ytv] {
    color: var(--danger);
    border-color: var(--danger);
}

.workflow__hold-btn--danger:hover[b-hkx9z84ytv] {
    background: color-mix(in srgb, var(--danger) 10%, transparent);
}

.workflow__action:hover[b-hkx9z84ytv] {
    background: var(--primary-400);
    color: var(--primary-foreground);
}

.workflow__action i[b-hkx9z84ytv] {
    font-size: var(--text-base);
    color: var(--text-muted);
}

.workflow__sep[b-hkx9z84ytv] {
    font-size: var(--text-base);
    color: var(--text-light);
    font-weight: var(--font-normal);
}

.workflow__arrow[b-hkx9z84ytv] {
    font-size: var(--text-base);
    color: var(--primary);
}

.workflow__target[b-hkx9z84ytv] {
    font-size: var(--text-sm);
    font-weight: var(--font-normal);
    padding: 1px 6px;
    border-radius: 4px;
    letter-spacing: 0.03em;
}

.workflow__target--idle[b-hkx9z84ytv] {
    background: #DBEAFE;
    color: var(--info);
}

.workflow__target--active[b-hkx9z84ytv] {
    background: var(--primary);
    color: var(--white);
}

.workflow__target--review[b-hkx9z84ytv] {
    background: #EDE9FE;
    color: #8e44ad;
}

.workflow__target--done[b-hkx9z84ytv] {
    background: #D1FAE5;
    color: var(--success);
}

/* Action buttons */

.case-detail__actions[b-hkx9z84ytv] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/*shadow-md hover: hover:*/
.case-action-btn[b-hkx9z84ytv] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 5px 12px;
    border: 0px solid var(--border);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-md);
    background: var(--primary-surface-tint);
    color: var(--primary);
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
    font-family: var(--font-family);
}

.case-action-btn:hover[b-hkx9z84ytv] {
    background: var(--primary-400);
    color: var(--primary-foreground);
    /*border-color: var(--text-light);*/
}

.case-action-btn i[b-hkx9z84ytv] {
    font-size: var(--text-base);
    color: var(--primary);
}

.case-action-btn:hover i[b-hkx9z84ytv] {
  color: var(--white);
}

/* ── Left pane content ── */

.case-left[b-hkx9z84ytv] {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.case-left__top[b-hkx9z84ytv] {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.case-left__fields[b-hkx9z84ytv] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 0 0 25%;
    min-width: 140px;
}

.case-field[b-hkx9z84ytv] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-base);
    color: var(--text);
    padding: 4px 0;
}

.case-field i[b-hkx9z84ytv] {
    font-size: var(--text-base);
    color: var(--text-muted);
    width: 16px;
    text-align: center;
}

.case-field--inline-select[b-hkx9z84ytv] {
    flex: 1;
    min-width: 0;
}

.case-field--inline-select[b-hkx9z84ytv]  .vg-inline__label {
    display: none;
}

.case-field--inline-select[b-hkx9z84ytv]  .vg-inline__display {
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-size: var(--text-base);
    border: 1px solid var(--border);
    cursor: pointer;
    white-space: nowrap;
}

.case-field--inline-select[b-hkx9z84ytv]  .vg-inline__display:hover {
    border-color: var(--text-light);
}

.case-field--inline-select[b-hkx9z84ytv]  .vg-inline__editor {
    position: relative;
}

.case-field--inline-select[b-hkx9z84ytv]  .vg-inline__select-panel {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 50;
}

.case-field--editable[b-hkx9z84ytv] {
    background: var(--accent-bg);
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    padding: 4px 8px;
    position: relative;
}

.case-field__more[b-hkx9z84ytv] {
    position: absolute;
    top: -6px;
    right: -10px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    background: var(--accent);
    color: #fff;
    font-size: var(--text-base);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.case-left__note[b-hkx9z84ytv] {
    flex: 1 1 0;
    min-width: 160px;
}

.case-sticky-note[b-hkx9z84ytv] {
    background: var(--sticky-bg);
    border: 1px solid var(--sticky-border);
    border-radius: var(--radius-lg);
    padding: 12px 14px;
    display: flex;
    gap: 10px;
    height: 100%;
    min-height: 80px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}
.case-sticky-note:hover[b-hkx9z84ytv] {
    background: var(--sticky-bg-hover);
    cursor: pointer;
}

.case-sticky-note__icon[b-hkx9z84ytv] {
    color: var(--text);
    font-size: var(--text-base);
    flex-shrink: 0;
    margin-top: 2px;
}

.case-sticky-note__input[b-hkx9z84ytv] {
    flex: 1;
    border: none;
    background: transparent;
    font-family: var(--font-family);
    font-size: var(--text-base);
    line-height: 1.55;
    color: var(--text);
    resize: none;
    outline: none;
    min-height: 100%;    
}
.case-sticky-note__input:hover[b-hkx9z84ytv] {
    cursor: pointer;    
}

.case-sticky-note__input[b-hkx9z84ytv]::placeholder {
    color: var(--text-muted);
    /*opacity: 0.6;*/
}

.case-note-card[b-hkx9z84ytv] {
    background: var(--surface-alt);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    display: flex;
    gap: 10px;
    font-size: var(--text-base);
    line-height: 1.5;
    color: var(--text);
}

.case-note-card__icon[b-hkx9z84ytv] {
    color: var(--accent);
    font-size: var(--text-base);
    flex-shrink: 0;
    margin-top: 2px;
}

.case-note-card p[b-hkx9z84ytv] {
    margin: 0;
}

.case-left__sections[b-hkx9z84ytv] {
    display: flex;
    flex-direction: column;
}

/* ── Insights section ── */

.insights[b-hkx9z84ytv] {
    display: flex;
    gap: 20px;
    flex-wrap: nowrap;
    align-items: stretch;
}

.insights__ai[b-hkx9z84ytv] {
    flex: 0 0 auto;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
}

.insights__coming-soon[b-hkx9z84ytv] {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 8px;
    min-height: 220px;
    border-radius: 999px;
    background: var(--surface-alt);
    border: 1px solid var(--border-light);
    color: var(--text-muted);
    font-size: var(--text-sm);
    font-style: italic;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
    user-select: none;
}

.insights__coming-soon i[b-hkx9z84ytv] {
    font-size: var(--text-base);
    writing-mode: horizontal-tb;
    transform: rotate(180deg);
}

.insights__ai p[b-hkx9z84ytv] {
    margin: 0 0 10px;
}

.insights__ai ul[b-hkx9z84ytv] {
    margin: 0;
    padding-left: 20px;
}

.insights__ai li[b-hkx9z84ytv] {
    margin-bottom: 6px;
}

.insights__context[b-hkx9z84ytv] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.insights__entity[b-hkx9z84ytv] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.insights__entity-header[b-hkx9z84ytv] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    color: var(--text);
}

.insights__entity-header i[b-hkx9z84ytv] {
    font-size: var(--text-base);
    color: var(--text-muted);
    width: 16px;
    text-align: center;
}

.insights__entity-name[b-hkx9z84ytv] {
    flex: 1;
    min-width: 0;
}

.insights__entity-name--muted[b-hkx9z84ytv] {
    color: var(--text-muted);
    font-weight: var(--font-normal);
    font-style: italic;
}

.insights__split-btn[b-hkx9z84ytv] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    background: none;
    color: var(--text-light);
    cursor: pointer;
    border-radius: var(--radius-sm);
    font-size: var(--text-base);
    padding: 0;
    flex-shrink: 0;
    transition: color 0.15s, background 0.15s;
}

.insights__split-btn:hover[b-hkx9z84ytv] {
    color: var(--accent);
    background: var(--accent-bg);
}

.insights__pinned-note[b-hkx9z84ytv] {
    background: #fdf6e3;
    border: 1px solid #e8dfc4;
    border-radius: var(--radius-md);
    padding: 10px 12px;
    display: flex;
    gap: 8px;
    font-size: var(--text-base);
    line-height: 1.5;
    color: var(--text);
}

.insights__pinned-note p[b-hkx9z84ytv] {
    margin: 0;
    white-space: pre-line;
}

.insights__pinned-icon[b-hkx9z84ytv] {
    color: #c4a84e;
    font-size: var(--text-base);
    flex-shrink: 0;
    margin-top: 2px;
}

.insights__no-notes[b-hkx9z84ytv] {
    font-size: var(--text-base);
    color: var(--text-muted);
    font-style: italic;
    padding-left: 24px;
}

.insights__alarm-block[b-hkx9z84ytv] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.insights__alarm-header[b-hkx9z84ytv] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.insights__alarm-icon[b-hkx9z84ytv] {
    color: var(--text-muted);
    font-size: var(--text-base);
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}

.insights__alarm-sensor-name[b-hkx9z84ytv] {
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.insights__alarm-sensor-desc[b-hkx9z84ytv] {
    font-size: var(--text-sm);
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.insights__alarm-spacer[b-hkx9z84ytv] {
    flex: 1 1 auto;
}

.insights__run-diag-btn[b-hkx9z84ytv] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 999px;
    border: 1px solid var(--border-light);
    background: var(--surface-alt);
    color: var(--text);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    letter-spacing: 0.04em;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}

.insights__run-diag-btn:hover:not([disabled])[b-hkx9z84ytv] {
    background: var(--surface);
    border-color: var(--border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.insights__run-diag-btn:disabled[b-hkx9z84ytv] {
    opacity: 0.5;
    cursor: not-allowed;
}

.insights__run-diag-btn i[b-hkx9z84ytv] {
    font-size: var(--text-base);
    color: var(--text-muted);
}

.insights__alarm-meta[b-hkx9z84ytv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 4px 0 2px;
    text-align: center;
}

.insights__alarm-meta-line[b-hkx9z84ytv] {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    font-size: var(--text-base);
    color: var(--text);
    line-height: 1.4;
}

.insights__alarm-meta-icon[b-hkx9z84ytv] {
    color: var(--text-muted);
    font-size: var(--text-sm);
    margin-left: 2px;
}

.insights__alarm-value[b-hkx9z84ytv] {
    color: var(--danger);
    font-weight: var(--font-semibold);
}

.insights__alarm-threshold[b-hkx9z84ytv] {
    color: var(--text);
    font-weight: var(--font-semibold);
}

.insights__alarm-limit-word[b-hkx9z84ytv] {
    color: var(--text-muted);
    font-weight: var(--font-normal);
}

.insights__alarm-chart-wrapper[b-hkx9z84ytv] {
    position: relative;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    height: 220px;
    overflow: hidden;
    background: var(--surface);
}

.insights__alarm-chart[b-hkx9z84ytv] {
    width: 100%;
    height: 100%;
}

.insights__alarm-overlay[b-hkx9z84ytv] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--text-light);
    font-size: var(--text-base);
    background: var(--surface-alt);
    pointer-events: none;
}

.insights__alarm-overlay i[b-hkx9z84ytv] {
    font-size: var(--text-2xl);
    opacity: 0.5;
}

.insights__widgets[b-hkx9z84ytv] {
    display: flex;
    gap: 8px;
}

.insights__widget[b-hkx9z84ytv] {
    flex: 1;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-base);
    color: var(--text);
    white-space: nowrap;
}

.insights__widget i[b-hkx9z84ytv] {
    font-size: var(--text-base);
    color: var(--text-muted);
}

/* ── Related section ── */

.related[b-hkx9z84ytv] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.related__heading[b-hkx9z84ytv] {
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    color: var(--text-muted);
    margin: 10px 0 4px;
}

.related__heading:first-child[b-hkx9z84ytv] {
    margin-top: 0;
}

.related__list[b-hkx9z84ytv] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.related__item[b-hkx9z84ytv] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 9px 14px;
    font-size: var(--text-base);
    color: var(--text);
}

.related__item-icon[b-hkx9z84ytv] {
    font-size: var(--text-base);
    color: var(--text-muted);
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}

.related__item-id[b-hkx9z84ytv] {
    font-weight: var(--font-semibold);
    color: var(--accent);
    white-space: nowrap;
}

.related__item-label[b-hkx9z84ytv] {
    flex: 1;
    min-width: 0;
    color: var(--text-muted);
}

.related__item-badge[b-hkx9z84ytv] {
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    padding: 2px 10px;
    border-radius: 20px;
    white-space: nowrap;
    border: 1px solid;
    flex-shrink: 0;
}

.related__item-badge--open[b-hkx9z84ytv] {
    color: var(--warning);
    border-color: rgba(230, 126, 34, 0.2);
    background: var(--warning-bg);
}

.related__item-badge--inprogress[b-hkx9z84ytv] {
    color: var(--info);
    border-color: rgba(41, 128, 185, 0.2);
    background: var(--info-bg);
}

.related__item-badge--resolved[b-hkx9z84ytv] {
    color: var(--success);
    border-color: rgba(39, 174, 96, 0.2);
    background: var(--success-bg);
}

.related__item-open[b-hkx9z84ytv] {
    background: transparent;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 6px;
    margin-left: 4px;
    font-size: var(--text-sm);
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.related__item-open:hover[b-hkx9z84ytv] {
    background: var(--surface-hover);
    color: var(--accent);
    border-color: var(--accent);
}

.related__empty[b-hkx9z84ytv] {
    font-size: var(--text-base);
    color: var(--text-muted);
    font-style: italic;
    margin: 4px 0;
}

/* ── Center pane content ── */

.case-center[b-hkx9z84ytv] {
    padding: 16px;
    display: flex;
    flex-direction: column;
}

.case-metrics-hint[b-hkx9z84ytv] {
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 5px;
}

.case-metrics-hint i[b-hkx9z84ytv] {
    color: var(--warning);
    font-size: var(--text-base);
}

/* ── Right / third pane content ── */

.case-right[b-hkx9z84ytv] {
    padding: 16px;
    display: flex;
    flex-direction: column;
}

.case-right__placeholder[b-hkx9z84ytv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    color: var(--text-light);
    font-size: var(--text-base);
    padding: 40px 16px;
}

.case-right__placeholder i[b-hkx9z84ytv] {
    font-size: var(--text-2xl);
    opacity: 0.5;
}

/* ── Field selects ── */

.case-field__select[b-hkx9z84ytv] {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 4px 8px;
    font-size: var(--text-base);
    font-family: var(--font-family);
    color: var(--text);
    background: var(--surface);
    cursor: pointer;
    width: 100%;
}

.case-field__select:focus[b-hkx9z84ytv] {
    outline: none;
    border-color: var(--accent);
}

/* ── Resolution section ── */

.resolution-grid[b-hkx9z84ytv] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.resolution-col[b-hkx9z84ytv] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.resolution-label[b-hkx9z84ytv] {
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    color: var(--text);
    margin: 8px 0 2px;
}

.resolution-label:first-child[b-hkx9z84ytv] {
    margin-top: 0;
}

.resolution-summary[b-hkx9z84ytv] {
    font-size: var(--text-base);
    color: var(--text);
    line-height: 1.5;
    margin: 0;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    transition: border-color 0.15s;
}

.resolution-summary:hover[b-hkx9z84ytv] {
    border-color: var(--border);
}

.resolution-summary-edit[b-hkx9z84ytv] {
    position: relative;
}

.resolution-summary-edit__input[b-hkx9z84ytv] {
    width: 100%;
    min-height: 120px;
    border: 2px solid var(--accent);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    font-family: var(--font-family);
    font-size: var(--text-base);
    line-height: 1.5;
    color: var(--text);
    background: var(--surface);
    resize: vertical;
    outline: none;
}

.resolution-summary-edit__actions[b-hkx9z84ytv] {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    gap: 4px;
}

.resolution-summary-edit__btn[b-hkx9z84ytv] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-base);
    cursor: pointer;
    transition: opacity 0.15s;
}

.resolution-summary-edit__btn:hover[b-hkx9z84ytv] {
    opacity: 0.85;
}

.resolution-summary-edit__btn--confirm[b-hkx9z84ytv] {
    background: var(--success);
    color: #fff;
    border-color: var(--success);
}

.resolution-summary-edit__btn--cancel[b-hkx9z84ytv] {
    background: var(--surface);
    color: var(--danger);
    border-color: var(--danger);
}

.resolution-inline-select[b-hkx9z84ytv]  .vg-inline__label {
    display: none;
}

.resolution-inline-select[b-hkx9z84ytv]  .vg-inline__display {
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    font-size: var(--text-base);
    border: 1px solid var(--border);
    cursor: pointer;
    width: 100%;
}

.resolution-inline-select[b-hkx9z84ytv]  .vg-inline__display:hover {
    border-color: var(--text-light);
}

.resolution-inline-select[b-hkx9z84ytv]  .vg-inline__editor {
    position: relative;
}

.resolution-inline-select[b-hkx9z84ytv]  .vg-inline__select-panel {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 50;
}

.resolution-empty[b-hkx9z84ytv] {
    font-size: var(--text-base);
    color: var(--text-muted);
    font-style: italic;
}

.resolution-fields-grid[b-hkx9z84ytv] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

/* ── Resolution checklist ── */

.resolution-checklist[b-hkx9z84ytv] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.resolution-task[b-hkx9z84ytv] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-base);
    color: var(--text);
}

.resolution-task input[type="checkbox"][b-hkx9z84ytv] {
    accent-color: var(--accent);
    cursor: pointer;
    width: 15px;
    height: 15px;
}

.resolution-task--done span[b-hkx9z84ytv] {
    text-decoration: line-through;
    color: var(--text-muted);
}

/* ── Metrics row ── */

.case-metrics-row[b-hkx9z84ytv] {
    font-size: var(--text-base);
    color: var(--text);
    padding: 4px 0;
}

/* ── Success badge variant ── */

.case-badge--success[b-hkx9z84ytv] {
    background: var(--success-bg, #e8f5e9);
    color: var(--success);
    border: 1px solid rgba(39, 174, 96, 0.2);
}

/* ── History section ── */

.history[b-hkx9z84ytv] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.history__toolbar[b-hkx9z84ytv] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.history__search[b-hkx9z84ytv] {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    padding: 5px 10px;
    background: var(--surface);
    flex: 1;
    min-width: 160px;
    max-width: 320px;
}

.history__search i[b-hkx9z84ytv] {
    color: var(--text-muted);
    font-size: var(--text-base);
}

.history__search input[b-hkx9z84ytv] {
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--font-family);
    font-size: var(--text-base);
    color: var(--text);
    width: 100%;
}

.history__search input[b-hkx9z84ytv]::placeholder {
    color: var(--text-light);
}

.history__count[b-hkx9z84ytv] {
    font-size: var(--text-base);
    color: var(--text-muted);
    white-space: nowrap;
}

.history__tabs[b-hkx9z84ytv] {
    display: flex;
    gap: 0px;
    margin-left: auto;
    border-radius: var(--radius-md);
    border: 1px solid var(--tertiary-200);
}

.history__tabs button:first-child[b-hkx9z84ytv] {
  border-top-left-radius: var(--radius-md);  
  border-bottom-left-radius: var(--radius-md);    
}

.history__tabs button:last-child[b-hkx9z84ytv] {
  border-top-right-radius: var(--radius-md);  
  border-bottom-right-radius: var(--radius-md);    
}

.history__tab[b-hkx9z84ytv] {
    padding: 8px 16px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--white);
    color: var(--primary);
    font-family: var(--font-family);
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}

.history__tab:hover[b-hkx9z84ytv] {
    background: var(--tertiary);
    color: var(--white);
    border-color: var(--white);
}

.history__tab--active[b-hkx9z84ytv] {
    background: var(--tertiary);
    color: var(--white);
    border-color: var(--white);
}

.history__tab--active:hover[b-hkx9z84ytv] {
    background: var(--tertiary);
}

.history__sub-filters[b-hkx9z84ytv] {
    display: none;
    gap: 4px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.history__badge[b-hkx9z84ytv] {
    padding: 3px 10px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--surface);
    color: var(--text);
    font-family: var(--font-family);
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}

.history__badge:hover[b-hkx9z84ytv] {
    background: var(--surface-hover);
}

.history__badge--active[b-hkx9z84ytv] {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.history__last-update[b-hkx9z84ytv] {
    text-align: right;
    font-size: var(--text-base);
    color: var(--accent);
    font-weight: var(--font-normal);
}

.history__entries[b-hkx9z84ytv] {
    display: flex;
    flex-direction: column;
}

.history__entry[b-hkx9z84ytv] {
    display: flex;
    gap: 12px;
    padding: 14px 0;
    border-top: 1px solid var(--border-light);
}

.history__entry:first-child[b-hkx9z84ytv] {
    border-top: none;
}

.history__entry-icon[b-hkx9z84ytv] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: var(--text-base);
}

.history__entry-icon--fieldchange[b-hkx9z84ytv] {
    background: var(--accent);
    color: #fff;
}

.history__entry-icon--note[b-hkx9z84ytv] {
    background: var(--surface-alt);
    color: var(--text-muted);
    border: 1px solid var(--border-light);
}

.history__entry-icon--timelogged[b-hkx9z84ytv] {
    background: var(--warning-bg);
    color: var(--warning);
    border: 1px solid rgba(230, 126, 34, 0.15);
}

.history__entry-icon--call[b-hkx9z84ytv] {
    background: rgba(42, 157, 143, 0.12);
    color: var(--accent);
    border: 1px solid rgba(42, 157, 143, 0.2);
}

.history__entry-icon--message[b-hkx9z84ytv] {
    background: rgba(41, 128, 185, 0.1);
    color: var(--info);
    border: 1px solid rgba(41, 128, 185, 0.2);
}

.history__entry-icon--email[b-hkx9z84ytv] {
    background: rgba(155, 89, 182, 0.1);
    color: #9b59b6;
    border: 1px solid rgba(155, 89, 182, 0.2);
}

.history__entry-icon--task[b-hkx9z84ytv] {
    background: rgba(52, 73, 94, 0.1);
    color: #34495e;
    border: 1px solid rgba(52, 73, 94, 0.2);
}

.history__entry-content[b-hkx9z84ytv] {
    flex: 1;
    min-width: 0;
}

.history__entry-header[b-hkx9z84ytv] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 6px;
}

.history__entry-title[b-hkx9z84ytv] {
    font-weight: var(--font-normal);
    font-size: var(--text-base);
    color: var(--text);
}

.history__entry-meta[b-hkx9z84ytv] {
    font-size: var(--text-base);
    color: var(--text-muted);
    white-space: nowrap;
}

.history__field-change[b-hkx9z84ytv] {
    background: var(--surface-alt);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 8px 14px;
    display: flex;
    align-items: center;
    gap: 0;
    font-size: var(--text-base);
}

.history__old-value[b-hkx9z84ytv] {
    color: var(--text-muted);
    text-decoration: line-through;
}

.history__arrow[b-hkx9z84ytv] {
    color: var(--text-muted);
    padding: 0 12px;
    flex-shrink: 0;
}

.history__new-value[b-hkx9z84ytv] {
    font-weight: var(--font-bold);
    color: var(--text);
}

.history__note-content[b-hkx9z84ytv] {
    background: rgba(42, 157, 143, 0.06);
    border: 1px solid rgba(42, 157, 143, 0.12);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    font-size: var(--text-base);
    line-height: 1.55;
    color: var(--text);
}

.history__time-content[b-hkx9z84ytv] {
    background: var(--warning-bg);
    border: 1px solid rgba(230, 126, 34, 0.12);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    font-size: var(--text-base);
    line-height: 1.55;
    color: var(--text);
}

.history__comm-content[b-hkx9z84ytv] {
    background: rgba(42, 157, 143, 0.06);
    border: 1px solid rgba(42, 157, 143, 0.12);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    font-size: var(--text-base);
    line-height: 1.55;
    color: var(--text);
    white-space: pre-line;
}

.history__task-content[b-hkx9z84ytv] {
    background: rgba(52, 73, 94, 0.06);
    border: 1px solid rgba(52, 73, 94, 0.12);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    font-size: var(--text-base);
    line-height: 1.55;
    color: var(--text);
}

.history__empty[b-hkx9z84ytv] {
    font-size: var(--text-base);
    color: var(--text-muted);
    font-style: italic;
    padding: 12px 0;
}

.case-action-btn--active[b-hkx9z84ytv] {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.case-action-btn--active:hover[b-hkx9z84ytv] {
    background: var(--accent-dark, #1f7a70);
    border-color: var(--accent-dark, #1f7a70);
}

.case-timer-badge[b-hkx9z84ytv] {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* Resolution Client Interaction labeled rows */
.resolution-fields-list[b-hkx9z84ytv] { display: flex; flex-direction: column; gap: 4px; }
.resolution-field-row[b-hkx9z84ytv] { display: grid; grid-template-columns: 1fr minmax(220px, 320px); align-items: center; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--border-light); }
.resolution-field-row:last-child[b-hkx9z84ytv] { border-bottom: none; }
.resolution-field-question[b-hkx9z84ytv] { font-size: var(--text-base); color: var(--text); line-height: 1.4; }
/* /Pages/Dashboard.razor.rz.scp.css */
/* ============================================
   DASHBOARD — Two-section layout (upper + lower)
   ============================================ */

.dashboard[b-bw5vb6j6m8] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    padding: 0;
}

/* ── Top bar (timestamp + refresh) ── */
.dash-topbar[b-bw5vb6j6m8] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 8px 20px 4px 20px;
    flex-shrink: 0;
}

.updated-label[b-bw5vb6j6m8] {
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.icon-btn[b-bw5vb6j6m8] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: var(--text-sm);
    transition: background 0.15s ease, color 0.15s ease;
}

.icon-btn:hover[b-bw5vb6j6m8]{
    background: var(--secondary-hover);
    
},
.icon-btn.active[b-bw5vb6j6m8] {
    /*background: var(--surface-hover);*/
    color: var(--text);
}

/* ── Body: flex column with upper + lower ── */
.dash-body[b-bw5vb6j6m8] {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 16px;
    padding: 4px 16px 16px 16px;
    overflow: hidden;
    min-height: 0;
}

/* ── Upper section: My Work + Right sidebar ── */
.dash-upper[b-bw5vb6j6m8] {
    display: flex;
    flex: 3;
    gap: 24px;
    min-height: 0;
}

.dash-left[b-bw5vb6j6m8] {
    flex: 3;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.dash-right[b-bw5vb6j6m8] {
    flex: 2;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 320px;
    max-width: 33%;
    overflow-y: auto;
}

/* ── Lower section: Three bottom widgets ── */
.dash-lower[b-bw5vb6j6m8] {
    display: flex;
    flex: 2;
    gap: 24px;
    min-height: 0;
}

.dash-lower > .widget[b-bw5vb6j6m8] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* ── Widget structure (title on grey bg, content in white card) ── */
.widget[b-bw5vb6j6m8] {
    display: flex;
    flex-direction: column;
}

.widget-stretch[b-bw5vb6j6m8] {
    flex: 1;
    min-height: 0;
}

.widget-header[b-bw5vb6j6m8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    margin-top: 0;
    flex-shrink: 0;
}

.widget-title[b-bw5vb6j6m8] {
    font-size: var(--text-xl);
    font-weight: var(--font-medium);
    color: var(--primary);
    margin: 0;
    padding: 0;
}

.widget-card[b-bw5vb6j6m8] {
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    padding: 0;
    margin: 18px 0 12px 0;
}

.my-work-card[b-bw5vb6j6m8] {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: 0;
}

.dash-left > .widget[b-bw5vb6j6m8] {
    flex: 1;
    min-height: 0;
}

.my-work-actions[b-bw5vb6j6m8] {
    display:flex;
    position: relative;
}

.my-work-actions[b-bw5vb6j6m8] {
    display: inline-flex;
    align-items: center;
    position: relative;
    flex: 0 0 auto;
    width: auto;
}

/* icon button */
.my-work-actions .icon-btn[b-bw5vb6j6m8] {
    flex: 0 0 auto;
}

/* expanded: place icon inside input */
.my-work-actions:has(.icon-btn.active) .icon-btn[b-bw5vb6j6m8] {
    position: absolute;
    left: 2px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    background: transparent;
    border: 0;
    padding: 0;
}

/* collapsed: keep button in normal flow */
.my-work-actions:not(:has(.icon-btn.active)) .icon-btn[b-bw5vb6j6m8] {
    position: static;
    transform: none;
}

.my-work-search[b-bw5vb6j6m8] {
    flex: 1;
    max-width: 360px;
    padding: 4px 10px 4px 30px;
    font-family: var(--font-family);
    font-size: var(--text-base);
    color: var(--text);
    background: var(--surface-alt);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-full);
    outline: none;
    transition:
        border-color 0.15s ease,
        width 0.18s ease,
        opacity 0.12s ease,
        padding 0.18s ease;
}

.my-work-search:focus[b-bw5vb6j6m8] {
    border-color: var(--accent);
}

.my-work-search[b-bw5vb6j6m8]::placeholder {
    color: var(--text-light);
}

/* collapsed state */
.my-work-actions:not(:has(.icon-btn.active)) .my-work-search[b-bw5vb6j6m8] {
    width: 0;
    min-width: 0;
    max-width: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    flex: 0 0 auto;
}

/* expanded state */
.my-work-actions:has(.icon-btn.active) .my-work-search[b-bw5vb6j6m8] {
    width: 260px;
    max-width: 260px;
    opacity: 1;
    pointer-events: auto;
}

/* ── Coming soon badge ── */
.coming-soon-badge[b-bw5vb6j6m8] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    color: var(--info);
    background: var(--gray-200);
    padding: 6px 12px;
    border-radius: var(--radius-full);
    white-space: nowrap;
    margin-left: 10px;
    position: relative;
    top: -2px;
}



.coming-soon-badge i[b-bw5vb6j6m8] {
    font-size: var(--text-xs);
}

/* ── Widget tabs (24h / 7d / 30d) ── */
.widget-tabs[b-bw5vb6j6m8] {
    display: flex;
    gap: 0px;
}

.widget-tab[b-bw5vb6j6m8] {
    padding: 3px 12px;
    font-family: var(--font-family);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--text-muted);
    background: transparent;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-none);
    cursor: pointer;
    transition: all 0.15s ease;
}

.widget-tabs .widget-tab:first-child[b-bw5vb6j6m8] {
  border-top-left-radius: var(--radius-md);
  border-bottom-left-radius: var(--radius-md);
}

.widget-tabs .widget-tab:last-child[b-bw5vb6j6m8] {
  border-top-right-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}

.widget-tab:hover[b-bw5vb6j6m8] {
    background: var(--surface-hover);
    color: var(--text);
}

.widget-tab.active[b-bw5vb6j6m8] {
    background: var(--accent);
    color: var(--white);
    border-color: var(--accent);
}

/* ── Loading state ── */
.dash-loading[b-bw5vb6j6m8] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 48px 0;
    color: var(--text-muted);
    font-size: var(--text-base);
}

/* ── Status badges (piped into DataGrid via ::deep) ── */
  .cell-type-icon[b-bw5vb6j6m8] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-base);
    color: var(--text-muted);
}

  .status-badge[b-bw5vb6j6m8] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

  .status-badge i[b-bw5vb6j6m8] {
    font-size: var(--text-base);
}

  .status-created[b-bw5vb6j6m8]       { color: var(--text); }
  .status-3rdparty[b-bw5vb6j6m8]      { color: #e67e22; }
  .status-clientresp[b-bw5vb6j6m8]    { color: #e67e22; }
  .status-internal[b-bw5vb6j6m8]      { color: #e67e22; }
  .status-todo[b-bw5vb6j6m8]          { color: var(--text); }
  .status-inprogress[b-bw5vb6j6m8]    { color: #2980b9; }
  .status-resolved[b-bw5vb6j6m8]      { color: #27ae60; }
  .status-reopened[b-bw5vb6j6m8]      { color: #c0392b; }
  .status-closed[b-bw5vb6j6m8]        { color: #c0392b; text-decoration: line-through; }
  .status-review[b-bw5vb6j6m8]        { color: #2a9d8f; }

  .priority-badge[b-bw5vb6j6m8] {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 4px;
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    white-space: nowrap;
    line-height: 1.4;
}

  .badge-critical[b-bw5vb6j6m8] { background: var(--priority-critical); color: var(--white); }
  .badge-high[b-bw5vb6j6m8]     { background: var(--priority-high);     color: var(--white); }
  .badge-medium[b-bw5vb6j6m8]   { background: var(--priority-medium);   color: var(--white); }
  .badge-low[b-bw5vb6j6m8]      { background: var(--priority-low);      color: #2c2c2c; }

/* ============================================
   GLOBAL SEARCH
   ============================================ */
.search-box[b-bw5vb6j6m8] {
    position: relative;
    margin-top: 0px;
}

.search-icon[b-bw5vb6j6m8] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-light);
    font-size: var(--text-base);
    pointer-events: none;
}

.search-input[b-bw5vb6j6m8] {
    width: 100%;
    padding: 10px 12px 10px 36px;
    font-family: var(--font-family);
    font-size: var(--text-base);
    color: var(--text);
    background: var(--surface-alt);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    outline: none;
    transition: border-color 0.15s ease;
}

.search-input:disabled[b-bw5vb6j6m8] {
    opacity: 0.5;
    cursor: not-allowed;
}

.search-input[b-bw5vb6j6m8]::placeholder {
    color: var(--text-light);
}

.search-input:focus[b-bw5vb6j6m8] {
    border-color: var(--accent);
}

/* ============================================
   ALARMS TABLE
   ============================================ */
.alarm-table[b-bw5vb6j6m8] {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0px;
    /*font-size: var(--text-base);*/
    border-radius: var(--radius-lg);
}

.alarm-table thead th[b-bw5vb6j6m8] {
    background: var(--white);
    color: var(--primary);
    font-weight: var(--font-medium);
    padding: 8px 12px;
    text-align: center;
    white-space: nowrap;    
}

.alarm-table thead th:first-child[b-bw5vb6j6m8] {
    border-radius: var(--radius-lg) 0 0 0;
    text-align: left;    
}

.alarm-table thead th:last-child[b-bw5vb6j6m8] {
    border-radius: 0 var(--radius-lg) 0 0;
}

.alarm-table tbody td[b-bw5vb6j6m8] {
    padding: 7px 12px;
    /*border-bottom: 1px solid var(--border-light);*/
    color: var(--text);
}

.alarm-table tbody tr td:not(.alarm-label)[b-bw5vb6j6m8] {
  text-align: center;
}

.alarm-table tbody tr[b-bw5vb6j6m8] {
    border-top: 1px solid var(--border-light);
}

.alarm-table tbody tr:nth-child(even)[b-bw5vb6j6m8] {
    background: var(--white);    
}

.alarm-label[b-bw5vb6j6m8] {
    /*font-weight: var(--font-medium);*/
}

.alarm-clickable[b-bw5vb6j6m8] {
    cursor: pointer;
    /* font-weight: var(--font-semibold); */
    color: var(--primary);
}

    .alarm-clickable:hover[b-bw5vb6j6m8] {
        text-decoration: underline;
        background: var(--hover-bg);
    }

.alarm-header-clickable[b-bw5vb6j6m8] {
    cursor: pointer;
    transition: background 0.15s ease;
}

    .alarm-header-clickable:hover[b-bw5vb6j6m8] {
        background: var(--accent-hover, #3aaa8a);
        text-decoration: underline;
    }

.alarm-footer-clickable[b-bw5vb6j6m8] {
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background 0.15s ease;
}

    .alarm-footer-clickable:hover[b-bw5vb6j6m8] {
        background: var(--hover-bg);
    }

.alarm-table tfoot td[b-bw5vb6j6m8] {
    padding: 8px 12px 8px 12px;
    text-align: left;
    vertical-align: top;
}

.alarm-footer td[b-bw5vb6j6m8] {
    border-top: 1px solid var(--border-light);
}

.alarm-period[b-bw5vb6j6m8] {
    display: block;
    font-size: var(--text-sm);
    color: var(--text-muted);
    font-weight: var(--font-normal);
}

.alarm-total[b-bw5vb6j6m8] {
    display: block;
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text);
}

/* ============================================
   SENSORS TABLE
   ============================================ */
.sensor-card[b-bw5vb6j6m8] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sensor-scroll[b-bw5vb6j6m8] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.sensor-table[b-bw5vb6j6m8] {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0px;
    font-size: var(--text-base);
}

.sensor-table thead th[b-bw5vb6j6m8] {
    background: var(--white);
    color: var(--primary);
    font-weight: var(--font-medium);
    padding: 8px 12px;
    text-align: left;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
}

.sensor-table thead th:first-child[b-bw5vb6j6m8] {
    border-radius: var(--radius-lg) 0 0 0;
}

.sensor-table thead th:last-child[b-bw5vb6j6m8] {
    border-radius: 0 var(--radius-lg) 0 0;
}

.sort-icon[b-bw5vb6j6m8] {
    font-size: var(--text-xs);
    margin-left: 4px;
    opacity: 0.6;
}

sensor-table tbody tr[b-bw5vb6j6m8] {    
    border-top: 1px solid var(--border-light);    
}

.sensor-table tbody td[b-bw5vb6j6m8] {
    padding: 7px 12px;
    border-bottom: 1px solid var(--border-light);
    color: var(--text);
}

.sensor-row[b-bw5vb6j6m8] {
    cursor: pointer;
    transition: background 0.12s ease;
}

.sensor-row:hover[b-bw5vb6j6m8] {
    background: var(--surface-hover);
}

.empty-state[b-bw5vb6j6m8] {
    text-align: center;
    padding: 32px 12px !important;
    color: var(--text-light);
    font-style: italic;
}

.sensor-footer[b-bw5vb6j6m8] {
    display: flex;
    justify-content: space-around;
    padding: 12px;
    /* margin-top: 8px; */
    border-top: 1px solid var(--border-light);
}

.sensor-stat[b-bw5vb6j6m8] {
    text-align: center;
}

.stat-label[b-bw5vb6j6m8] {
    display: block;
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.stat-value[b-bw5vb6j6m8] {
    display: block;
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--text);
}

/* ============================================
   RANKED LIST WIDGETS (bottom row)
   ============================================ */
.ranked-list-card[b-bw5vb6j6m8] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 8px 12px;
}

.ranked-row[b-bw5vb6j6m8] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid var(--border-light);
    font-size: var(--text-sm);
}

.ranked-row:last-child[b-bw5vb6j6m8] {
    border-bottom: none;
}

.ranked-row--clickable[b-bw5vb6j6m8] {
    cursor: pointer;
    transition: background 0.12s ease;
    border-radius: var(--radius-sm);
    padding: 6px 4px;
    margin: 0 -4px;
}

.ranked-row--clickable:hover[b-bw5vb6j6m8] {
    background: var(--surface-hover);
}

.ranked-number[b-bw5vb6j6m8] {
    font-weight: var(--font-bold);
    font-size: var(--text-sm);
    min-width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.ranked-bar[b-bw5vb6j6m8] {
    height: 6px;
    border-radius: 3px;
    flex-shrink: 0;
    min-width: 4px;
    max-width: 60px;
    opacity: 0.8;
}

.ranked-name[b-bw5vb6j6m8] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
}

.ranked-count[b-bw5vb6j6m8] {
    font-weight: var(--font-semibold);
    white-space: nowrap;
    color: var(--text);
    flex-shrink: 0;
}

.ranked-placeholder[b-bw5vb6j6m8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 40px 16px;
    color: var(--text-light);
    font-size: var(--text-base);
    font-style: italic;
}

.ranked-placeholder-icon[b-bw5vb6j6m8] {
    font-size: var(--text-3xl);
    opacity: 0.3;
}

.ranked-placeholder-sub[b-bw5vb6j6m8] {
    font-size: var(--text-sm);
    opacity: 0.6;
}
/* /Pages/DesignSystem/ButtonsShowcase.razor.rz.scp.css */
/* =============================================
   Buttons Showcase — page layout
   ============================================= */

.ds-page[b-kpwq650hbl] {
    padding: 28px 32px;
    overflow-y: auto;
    height: 100%;
}

.ds-header[b-kpwq650hbl] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 28px;
}

.ds-header-icon[b-kpwq650hbl] {
    font-size: var(--text-2xl);
    color: var(--accent);
    opacity: 0.7;
}

.ds-header h2[b-kpwq650hbl] {
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    color: var(--text);
    margin: 0;
}

.ds-subtitle[b-kpwq650hbl] {
    font-size: var(--text-base);
    color: var(--text-muted);
    margin: 2px 0 0;
}

/* ---------- Showcase section container ---------- */
.ds-showcase[b-kpwq650hbl] {
    background: #eceee9;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
    margin-bottom: 28px;
}

.ds-showcase-title[b-kpwq650hbl] {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text);
    margin: 0 0 4px;
}

.ds-showcase-desc[b-kpwq650hbl] {
    font-size: var(--text-base);
    color: var(--text-muted);
    margin: 0 0 20px;
}

/* ---------- Sizes — 2-col grid ---------- */
.ds-size-grid[b-kpwq650hbl] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* ---------- Variants — 4-col grid ---------- */
.ds-variant-grid[b-kpwq650hbl] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

/* ---------- Card ---------- */
.ds-card[b-kpwq650hbl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 16px 20px;
}

.ds-card--variant[b-kpwq650hbl] {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}

.ds-card-info[b-kpwq650hbl] {
    display: flex;
    flex-direction: column;
}

.ds-card-title[b-kpwq650hbl] {
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    color: var(--text);
}

.ds-card-desc[b-kpwq650hbl] {
    font-size: var(--text-base);
    color: var(--text-muted);
    margin-top: 2px;
}

.ds-card-row[b-kpwq650hbl] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
/* /Pages/DesignSystem/InlineFieldsShowcase.razor.rz.scp.css */
/* =============================================
   Inline Fields Showcase — page layout
   ============================================= */

.ds-page[b-qyie9k6khb] {
    padding: 28px 32px;
    overflow-y: auto;
    height: 100%;
}

.ds-header[b-qyie9k6khb] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 28px;
}

.ds-header-icon[b-qyie9k6khb] {
    font-size: var(--text-2xl);
    color: var(--accent);
    opacity: 0.7;
}

.ds-header h2[b-qyie9k6khb] {
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    color: var(--text);
    margin: 0;
}

.ds-subtitle[b-qyie9k6khb] {
    font-size: var(--text-base);
    color: var(--text-muted);
    margin: 2px 0 0;
}

/* ---------- Showcase section container ---------- */
.ds-showcase[b-qyie9k6khb] {
    background: #eceee9;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
    margin-bottom: 28px;
}

.ds-showcase-title[b-qyie9k6khb] {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text);
    margin: 0 0 4px;
}

.ds-showcase-desc[b-qyie9k6khb] {
    font-size: var(--text-base);
    color: var(--text-muted);
    margin: 0 0 20px;
}

/* ---------- 2-col grid ---------- */
.ds-inline-grid[b-qyie9k6khb] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* ---------- Card ---------- */
.ds-card[b-qyie9k6khb] {
    display: flex;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 16px 20px;
}

.ds-card--inline[b-qyie9k6khb] {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}

.ds-card-title[b-qyie9k6khb] {
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    color: var(--text);
}

.ds-card-desc[b-qyie9k6khb] {
    font-size: var(--text-base);
    color: var(--text-muted);
    margin-top: 2px;
}
/* /Pages/GlobalSearch.razor.rz.scp.css */
.search-page[b-ecayawhre1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: top;
    height: 100%;
    gap: 12px;
    color: var(--text-muted);
}

.search-icon[b-ecayawhre1] {
    font-size: var(--text-4xl);
    opacity: 0.3;
}

.search-page h2[b-ecayawhre1] {
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    color: var(--text);
    margin: 0;
    display:  none;
}

.search-hint[b-ecayawhre1] {
    font-size: var(--text-base);
    margin-top: 50px;
}

.search-bar-placeholder[b-ecayawhre1] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    padding: 10px 20px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-light);
    font-size: var(--text-base);
    min-width: 360px;
}

.search-bar-placeholder i[b-ecayawhre1] {
    font-size: var(--text-base);
    opacity: 0.5;
}

.search-bar-placeholder input[b-ecayawhre1] {
    border: none;
    background: transparent;
    outline: none;
    font-size: var(--text-base);
    font-family: inherit;
    color: var(--text-light);
    width: 100%;
    cursor: not-allowed;
}

.coming-soon-overlay[b-ecayawhre1] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.coming-soon-label[b-ecayawhre1] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 14px;
    border-radius: 999px;
    background: #fdf0e2;
    color: #b07020;
    font-size: 0.85rem;
    font-weight: var(--font-semibold);
    white-space: nowrap;
}
/* /Pages/LiveSniffer.razor.rz.scp.css */
.live-sniffer[b-xj3nfiyl0d] {
    display: flex;
    flex-direction: column;
    height: 100%;
    font-family: 'Segoe UI', sans-serif;
    color: #e0e0e0;
    background: #1e1e2e;
    padding: 16px;
    gap: 12px;
}

.sniffer-header[b-xj3nfiyl0d] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.sniffer-header h2[b-xj3nfiyl0d] {
    margin: 0;
    font-size: var(--text-xl);
    color: #c0c0d0;
}

.sniffer-controls[b-xj3nfiyl0d] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.connection-status[b-xj3nfiyl0d] {
    font-size: var(--text-base);
    padding: 4px 10px;
    border-radius: 12px;
}

.connection-status.connected[b-xj3nfiyl0d] {
    background: rgba(76, 175, 80, 0.15);
    color: #4caf50;
}

.connection-status.disconnected[b-xj3nfiyl0d] {
    background: rgba(244, 67, 54, 0.15);
    color: #f44336;
}

.filter-input[b-xj3nfiyl0d] {
    background: #2a2a3e;
    border: 1px solid #3a3a50;
    border-radius: 6px;
    color: #e0e0e0;
    padding: 6px 12px;
    font-size: var(--text-base);
    width: 200px;
}

.filter-input[b-xj3nfiyl0d]::placeholder {
    color: #666;
}

.sniffer-btn[b-xj3nfiyl0d] {
    background: #3a3a50;
    border: 1px solid #4a4a60;
    border-radius: 6px;
    color: #e0e0e0;
    padding: 6px 14px;
    font-size: var(--text-base);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}

.sniffer-btn:hover[b-xj3nfiyl0d] {
    background: #4a4a60;
}

.sniffer-stats[b-xj3nfiyl0d] {
    display: flex;
    gap: 16px;
    font-size: var(--text-base);
    color: #888;
    padding: 4px 0;
    border-bottom: 1px solid #2a2a3e;
}

.sniffer-messages[b-xj3nfiyl0d] {
    flex: 1;
    overflow-y: auto;
    font-family: 'Cascadia Code', 'Consolas', monospace;
    font-size: var(--text-base);
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.sniffer-row[b-xj3nfiyl0d] {
    display: flex;
    gap: 12px;
    padding: 3px 8px;
    border-radius: 3px;
    background: #252535;
}

.sniffer-row:hover[b-xj3nfiyl0d] {
    background: #2e2e42;
}

.msg-time[b-xj3nfiyl0d] {
    color: #666;
    min-width: 90px;
}

.msg-device[b-xj3nfiyl0d] {
    color: #7aa2f7;
    min-width: 160px;
    font-weight: var(--font-semibold);
}

.msg-type[b-xj3nfiyl0d] {
    min-width: 60px;
    font-weight: var(--font-semibold);
}

.msg-detail[b-xj3nfiyl0d] {
    color: #a0a0b0;
    flex: 1;
}

.type-telemetry .msg-type[b-xj3nfiyl0d] { color: #4caf50; }
.type-power .msg-type[b-xj3nfiyl0d] { color: #ff9800; }
.type-boot .msg-type[b-xj3nfiyl0d] { color: #2196f3; }
.type-cell .msg-type[b-xj3nfiyl0d] { color: #9c27b0; }
.type-unknown .msg-type[b-xj3nfiyl0d] { color: #f44336; }

.sniffer-empty[b-xj3nfiyl0d] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    color: #555;
    font-size: var(--text-base);
}
/* /Pages/PlaceholderPage.razor.rz.scp.css */
.placeholder-page[b-g89ihwz95q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 12px;
    color: var(--text-muted);
}

.placeholder-icon[b-g89ihwz95q] {
    font-size: var(--text-4xl);
    opacity: 0.3;
}

.placeholder-page h2[b-g89ihwz95q] {
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    color: var(--text);
    margin: 0;
}

.placeholder-hint[b-g89ihwz95q] {
    font-size: var(--text-base);
    margin: 0;
}
/* /Pages/SensorConfig.razor.rz.scp.css */
.sensor-config[b-vgjsx80q7z] {
    padding: 24px;
    max-width: 1100px;
}

.sensor-config h2[b-vgjsx80q7z] {
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    margin: 0 0 4px;
    color: var(--text);
}

.sensor-config__hint[b-vgjsx80q7z] {
    font-size: var(--text-base);
    color: var(--text-muted, #888);
    margin: 0 0 20px;
}

.sensor-config__device-picker[b-vgjsx80q7z] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.sensor-config__device-picker label[b-vgjsx80q7z] {
    font-weight: var(--font-normal);
    font-size: var(--text-base);
}

.sensor-config__device-picker select[b-vgjsx80q7z] {
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid var(--border, #ddd);
    font-size: var(--text-base);
    min-width: 320px;
    background: var(--surface, #fff);
}

.sensor-config__table[b-vgjsx80q7z] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-base);
}

.sensor-config__table th[b-vgjsx80q7z] {
    text-align: left;
    padding: 8px 10px;
    font-weight: var(--font-normal);
    border-bottom: 2px solid var(--border, #ddd);
    color: var(--text-muted, #888);
    font-size: var(--text-base);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.sensor-config__table td[b-vgjsx80q7z] {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-light, #eee);
    vertical-align: middle;
}

.sensor-config__table input[type="number"][b-vgjsx80q7z] {
    width: 90px;
    padding: 4px 8px;
    border: 1px solid var(--border, #ddd);
    border-radius: 4px;
    font-size: var(--text-base);
    background: var(--surface, #fff);
}

.sensor-config__table input[type="checkbox"][b-vgjsx80q7z] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.sensor-config__row--disabled td[b-vgjsx80q7z] {
    opacity: 0.5;
}

.sensor-config__save[b-vgjsx80q7z] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border: none;
    border-radius: var(--radius-full);
    background: var(--accent, #2a9d8f);
    color: var(--white);
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    cursor: pointer;
    transition: background 0.15s;
}

.sensor-config__save:hover[b-vgjsx80q7z] {
    background: color-mix(in srgb, var(--accent, #2a9d8f) 85%, black);
}

.sensor-config__error[b-vgjsx80q7z] {
    padding: 12px 16px;
    background: color-mix(in srgb, var(--danger, #c0392b) 10%, transparent);
    color: var(--danger, #c0392b);
    border-radius: 8px;
    font-size: var(--text-base);
}

.sensor-config__result[b-vgjsx80q7z] {
    margin-top: 16px;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: var(--text-base);
}

.sensor-config__result--ok[b-vgjsx80q7z] {
    background: color-mix(in srgb, var(--success, #27ae60) 10%, transparent);
    color: var(--success, #27ae60);
}

.sensor-config__result--err[b-vgjsx80q7z] {
    background: color-mix(in srgb, var(--danger, #c0392b) 10%, transparent);
    color: var(--danger, #c0392b);
}
/* /Pages/Tickets.razor.rz.scp.css */
.tickets-page[b-a1fyh8wwtb] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* --- Cell with icon (rendered inside DataGrid) --- */
 [b-a1fyh8wwtb] .cell-with-icon {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    min-width: 0;
}

 [b-a1fyh8wwtb] .cell-icon {
    font-size: var(--text-base);
    flex-shrink: 0;
    opacity: 0.6;
    width: 16px;
    text-align: center;
}

 [b-a1fyh8wwtb] .cell-type-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-base);
    color: var(--text-muted);
}

/* --- Status Badges --- */
[b-a1fyh8wwtb] .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[b-a1fyh8wwtb] .status-badge i {
    font-size: var(--text-base);
}

[b-a1fyh8wwtb] .status-created       { color: var(--text); }
[b-a1fyh8wwtb] .status-3rdparty      { color: #e67e22; }
[b-a1fyh8wwtb] .status-clientresp    { color: #e67e22; }
[b-a1fyh8wwtb] .status-internal      { color: #e67e22; }
[b-a1fyh8wwtb] .status-todo          { color: var(--text); }
[b-a1fyh8wwtb] .status-inprogress    { color: #2980b9; }
[b-a1fyh8wwtb] .status-resolved      { color: #27ae60; }
[b-a1fyh8wwtb] .status-reopened      { color: #c0392b; }
[b-a1fyh8wwtb] .status-closed        { color: #c0392b; text-decoration: line-through; }
[b-a1fyh8wwtb] .status-review        { color: #2a9d8f; }

/* --- Priority Badges --- */
[b-a1fyh8wwtb] .priority-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 4px;
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    white-space: nowrap;
    line-height: 1.4;
}

[b-a1fyh8wwtb] .badge-critical {
    background: var(--priority-critical);
    color: var(--white);
}

[b-a1fyh8wwtb] .badge-high {
    background: var(--priority-high);
    color: var(--white);
}

[b-a1fyh8wwtb] .badge-medium {
    background: var(--priority-medium);
    color: var(--white);
}

[b-a1fyh8wwtb] .badge-low {
    background: var(--priority-low);
    color: #2c2c2c;
}