/* evot admin skin — final layer aligning look & feel with evot-server admin. */

/* ==========================================================================
   evot admin skin — final layer
   Aligns Wizard Proxy's look with the evot-server admin design system:
   IBM Plex Mono everywhere, dark room + raised surfaces, square panels,
   outline controls with an inverted light primary, quiet text-only accents.
   ========================================================================== */

html, body {
    background: var(--page);
    color: var(--ink);
    font-size: 13px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-weight: 500; letter-spacing: -0.02em; }

::selection { background: #51a2ff3d; }

/* Scrollbars follow the surface, not the room. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--dot);
    border: 2px solid var(--page);
    border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover { background: var(--sk-hi); }

/* ---- sidebar: evot sidenav ----
   Active entries get the evot left ink bar; the hover is a quiet fill. */
.sidebar { border-right: 1px solid var(--border); }
.sidebar-brand { padding: 16px; }
.sidebar-brand h1 {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.02em;
}
.sidebar-nav { padding: 12px 8px; }
.sidebar-item {
    position: relative;
    border-radius: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-tertiary);
    padding: 10px 12px 10px 14px;
}
.sidebar-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: transparent;
}
.sidebar-item:hover { color: var(--ink); background: transparent; }
.sidebar-item.active {
    background: var(--sidebar-active-bg);
    color: var(--ink);
    font-weight: 700;
}
.sidebar-item.active::before { background: var(--ink); }
.sidebar-group-label {
    color: var(--text-muted);
    letter-spacing: 0.6px;
    font-size: 10px;
    font-weight: 500;
}
.sidebar-badge { border-radius: 2px; font-weight: 500; }

/* ---- cards / panels: square, hairline ---- */
.tw-card,
.el-card,
.settings-config-row {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 0;
    box-shadow: none;
}

/* ---- buttons: evot outline + inverted primary ---- */
.el-button {
    border-radius: 3px;
    font-weight: 500;
    font-family: inherit;
}
.el-button--primary {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--primary-foreground);
}
.el-button--primary:hover,
.el-button--primary:focus {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    color: var(--primary-foreground);
}
.el-button--primary:active {
    background: var(--primary-active);
    border-color: var(--primary-active);
    color: var(--primary-foreground);
}
.el-button--primary.is-disabled,
.el-button--primary.is-disabled:hover { background: var(--primary); opacity: 0.45; }
.el-button--danger {
    background: transparent;
    border-color: var(--red-line);
    color: var(--red);
}
.el-button--danger:hover,
.el-button--danger:focus {
    background: var(--red-fill);
    border-color: var(--red-line);
    color: var(--red);
}
.el-button--success { --el-button-text-color: var(--green-ink); }
.el-button.is-text { color: var(--text-secondary); }
.el-button.is-text:hover { color: var(--ink); background: var(--fill); }

/* ---- inputs ---- */
.el-input__wrapper,
.el-textarea__inner {
    background: var(--input);
    border-radius: 3px;
    box-shadow: 0 0 0 1px var(--border) inset;
}
.el-input__wrapper:hover,
.el-textarea__inner:hover { box-shadow: 0 0 0 1px var(--dot) inset; }
.el-input__wrapper.is-focus,
.el-textarea__inner:focus {
    box-shadow: 0 0 0 1px var(--ink) inset;
    background: var(--input);
}
.el-input__inner { color: var(--ink); font-family: inherit; }
.el-input__inner::placeholder,
.el-textarea__inner::placeholder { color: var(--text-muted); }
.el-select__wrapper {
    background: var(--input);
    border-radius: 3px;
    box-shadow: 0 0 0 1px var(--border) inset;
}
.el-select__wrapper.is-hovering { box-shadow: 0 0 0 1px var(--dot) inset; }
.el-select__wrapper.is-focused { box-shadow: 0 0 0 1px var(--ink) inset; }
.el-select__selected-item { color: var(--ink); }
.el-input__count-inner { background: transparent; color: var(--text-muted); }

/* ---- table: uppercase micro headers, hairline rows ---- */
.el-table {
    --el-table-bg-color: var(--card);
    --el-table-tr-bg-color: var(--card);
    --el-table-header-bg-color: transparent;
    --el-table-header-text-color: var(--text-tertiary);
    --el-table-text-color: var(--ink);
    --el-table-border-color: var(--border);
    --el-table-row-hover-bg-color: var(--fill);
    --el-table-current-row-bg-color: var(--fill);
}
.el-table th.el-table__cell {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-tertiary);
    background: transparent;
}
.el-table .el-table__cell { padding: 10px 0; }

/* ---- overlays: dialog / drawer / popper square with hairlines ---- */
.el-overlay { background-color: rgba(4, 6, 8, 0.72); }
.el-dialog,
.el-message-box,
.el-drawer {
    border: 1px solid var(--border);
    border-radius: 0;
    background: var(--card);
}
.el-dialog__title,
.el-message-box__title { color: var(--ink); font-weight: 500; letter-spacing: -0.02em; }
.el-dialog__headerbtn .el-dialog__close,
.el-message-box__headerbtn .el-message-box__close { color: var(--text-tertiary); }
.el-drawer__header { color: var(--ink); margin-bottom: 12px; }
.el-popper {
    border-radius: 0;
    border: 1px solid var(--border);
    background: var(--popover);
    color: var(--ink);
}
.el-popper.is-light { border: 1px solid var(--border); background: var(--popover); color: var(--ink); }
.el-popper.is-light > .el-popper__arrow::before {
    border: 1px solid var(--border);
    background: var(--popover);
}
.el-dropdown-menu { background: var(--popover); }
.el-dropdown-menu__item { color: var(--text-secondary); }
.el-dropdown-menu__item:not(.is-disabled):hover,
.el-dropdown-menu__item:not(.is-disabled):focus {
    background: var(--fill);
    color: var(--ink);
}
.el-select-dropdown { background: var(--popover); border: 1px solid var(--border); }
.el-select-dropdown__item { color: var(--text-secondary); }
.el-select-dropdown__item.is-hovering,
.el-select-dropdown__item.selected { background: var(--fill); color: var(--ink); }
.el-message {
    background: var(--popover);
    border: 1px solid var(--border);
    border-radius: 0;
    color: var(--ink);
}
.el-message--error { border-color: var(--red-line); }
.el-message--success { border-color: var(--green-line); }
.el-message--warning { border-color: var(--amber-line); }
.el-tooltip__popper { max-width: 360px; }

/* ---- tags: quiet outlines instead of candy fills ---- */
.el-tag { border-radius: 2px; font-weight: 500; }
.el-tag:not(.el-tag--dark) { background: transparent; }

/* ---- switch / checkbox / radio ---- */
.el-switch.is-checked .el-switch__core {
    background: var(--green);
    border-color: var(--green);
}
.el-checkbox__inner { background: var(--input); border-color: var(--dot); }
.el-checkbox__input.is-checked .el-checkbox__inner {
    background: var(--primary);
    border-color: var(--primary);
}
.el-checkbox__input.is-checked + .el-checkbox__label { color: var(--ink); }
.el-radio__label { color: var(--text-secondary); }
.el-radio__input.is-checked .el-radio__inner {
    background: var(--primary);
    border-color: var(--primary);
}

/* ---- pagination / pager ---- */
.el-pagination {
    --el-pagination-bg-color: transparent;
    --el-pagination-button-disabled-bg-color: transparent;
    --el-pagination-hover-color: var(--ink);
}
.el-pager li {
    background: transparent;
    color: var(--text-secondary);
    border-radius: 3px;
}
.el-pager li.is-active { color: var(--ink); font-weight: 700; }
.el-pager li:hover:not(.is-active) { background: var(--fill); }
.el-pagination .btn-prev,
.el-pagination .btn-next { background: transparent; color: var(--text-secondary); }

/* ---- tabs ---- */
.el-tabs__item { color: var(--text-tertiary); font-weight: 500; }
.el-tabs__item.is-active { color: var(--ink); }
.el-tabs__item:hover { color: var(--ink); }
.el-tabs__nav-wrap::after {
    height: 1px;
    background: var(--border);
}

/* ---- misc chrome ---- */
.el-loading-mask { background-color: rgba(10, 13, 16, 0.7); }
.el-skeleton__item { background: var(--sk); }
.el-empty__description p { color: var(--text-tertiary); }
.el-divider { background: var(--border); }
.el-divider__text { background: var(--card); color: var(--text-muted); }
.el-alert { border-radius: 0; }
.el-alert--info.is-light { background: var(--fill); color: var(--text-secondary); }
.el-alert--warning.is-light { background: var(--amber-fill); color: var(--amber); }
.el-alert--error.is-light { background: var(--red-fill); color: var(--red); }
.el-alert--success.is-light { background: var(--green-fill); color: var(--green-ink); }
.el-image-viewer__mask { background: rgba(4, 6, 8, 0.8); }

/* numbers read best tabular in a mono UI */
.stat-value,
.settings-plan-window,
.weight-value,
.log-status-code,
.logs-col-size,
.logs-col-duration { font-variant-numeric: tabular-nums; }

/* ---- evot square surfaces ----
   Big panels lose the rounded-card look; pills/dots keep their shape. */
.ui-metric-card,
.ui-surface-card,
.request-insights-card,
.request-insights-stat-card,
.settings-service-tab,
.service-card,
.usage-summary-card,
.usage-service-section,
.auth-card,
.realtime-container,
.logs-container,
.all-logs-table,
.costs-section,
.config-details-panel {
    border-radius: 0;
}