/* /Components/Pages/Admin/UserManagement.razor.rz.scp.css */
/* =========================================================
 * User Management — admin/users
 * Mirrors design_handoff/.../UserMgmtScreen layout:
 * eyebrow + h1 + subtitle, 5 stat chips, two-column grid
 * (users table left, sticky detail panel right).
 * ========================================================= */

/* ---- Header ---- */
.um-header[b-jse2qxvwdv] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.um-header__title-block[b-jse2qxvwdv] { flex: 1; min-width: 320px; }
.um-eyebrow[b-jse2qxvwdv] {
    font-size: 11.5px;
    color: var(--color-text-muted);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.um-title[b-jse2qxvwdv] {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--color-text);
}
.um-description[b-jse2qxvwdv] {
    font-size: 13px;
    color: var(--color-text-muted);
    margin-top: 4px;
    margin-bottom: 0;
    max-width: 720px;
    line-height: 1.5;
}
.um-header__actions[b-jse2qxvwdv] {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* ---- Stat chips row ---- */
.um-stats[b-jse2qxvwdv] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.um-stat[b-jse2qxvwdv] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    min-width: 150px;
}
.um-stat--admin[b-jse2qxvwdv]   { background: color-mix(in srgb, var(--color-danger) 8%, transparent); }
.um-stat--brand[b-jse2qxvwdv]   { background: color-mix(in srgb, var(--color-brand)  8%, transparent); }
.um-stat--success[b-jse2qxvwdv] { background: color-mix(in srgb, var(--color-success) 8%, transparent); }
.um-stat__icon[b-jse2qxvwdv] {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: var(--color-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
}
.um-stat__icon--admin[b-jse2qxvwdv]   { color: var(--color-danger); }
.um-stat__icon--brand[b-jse2qxvwdv]   { color: var(--color-brand); }
.um-stat__icon--success[b-jse2qxvwdv] { color: var(--color-success); }
.um-stat__label[b-jse2qxvwdv] {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--color-text-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.um-stat__value[b-jse2qxvwdv] {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--color-text);
    font-feature-settings: "tnum";
}
.um-stat__value--admin[b-jse2qxvwdv]   { color: var(--color-danger); }
.um-stat__value--brand[b-jse2qxvwdv]   { color: var(--color-brand); }
.um-stat__value--success[b-jse2qxvwdv] { color: var(--color-success); }

/* ---- Layout grid: users table + detail panel ---- */
.um-grid[b-jse2qxvwdv] {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 14px;
    align-items: flex-start;
}
@media (max-width: 1100px) {
    .um-grid[b-jse2qxvwdv] { grid-template-columns: 1fr; }
    .um-detail-card[b-jse2qxvwdv] { position: static !important; }
}

/* ---- Users card (left) ---- */
.um-list-card[b-jse2qxvwdv] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    overflow: hidden;
}
.um-list-head[b-jse2qxvwdv] {
    padding: 10px 14px;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    gap: 10px;
}
.um-list-head__icon[b-jse2qxvwdv] { color: var(--color-brand); }
.um-list-head__title[b-jse2qxvwdv] { font-size: 13px; font-weight: 600; flex: 1; }
.um-list-body[b-jse2qxvwdv] { padding: 10px 12px; }

/* ---- Search bar ---- */
.um-search[b-jse2qxvwdv] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    margin-bottom: 12px;
}
.um-search__input[b-jse2qxvwdv] {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 13px;
    color: var(--color-text);
    font-family: inherit;
}

/* ---- User table rows ---- */
.um-table-head[b-jse2qxvwdv] {
    display: grid;
    grid-template-columns: 1.4fr 1.5fr 1.2fr 90px;
    gap: 6px;
    padding: 8px 10px;
    font-size: 10px;
    font-weight: 700;
    color: var(--color-text-muted);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    align-items: center;
}
.um-table-head__actions[b-jse2qxvwdv] { text-align: right; }

.um-rows[b-jse2qxvwdv] { max-height: 560px; overflow: auto; }

.um-row[b-jse2qxvwdv] {
    display: grid;
    grid-template-columns: 1.4fr 1.5fr 1.2fr 90px;
    gap: 6px;
    padding: 10px;
    align-items: center;
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
    font-size: 12.5px;
    transition: background 100ms ease;
}
.um-row:hover[b-jse2qxvwdv] { background: var(--color-surface-alt); }
.um-row--selected[b-jse2qxvwdv] { background: color-mix(in srgb, var(--color-brand) 10%, transparent); }
.um-row--selected:hover[b-jse2qxvwdv] { background: color-mix(in srgb, var(--color-brand) 14%, transparent); }
.um-row:last-child[b-jse2qxvwdv] { border-bottom: 0; }

.um-row__user[b-jse2qxvwdv] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.um-avatar[b-jse2qxvwdv] {
    width: 28px;
    height: 28px;
    border-radius: 99px;
    background: linear-gradient(135deg, var(--color-brand), color-mix(in srgb, var(--color-brand) 60%, var(--color-info)));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
    font-family: inherit;
}
.um-row__name[b-jse2qxvwdv] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.um-row__name-self[b-jse2qxvwdv] {
    color: var(--color-brand);
    font-size: 10.5px;
    margin-left: 6px;
    font-weight: 500;
}
.um-row__email[b-jse2qxvwdv] {
    font-size: 11.5px;
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.um-row__roles[b-jse2qxvwdv] { display: flex; gap: 4px; flex-wrap: wrap; }
.um-row__actions[b-jse2qxvwdv] {
    display: flex;
    gap: 3px;
    justify-content: flex-end;
}
.um-row__icon-btn[b-jse2qxvwdv] {
    background: transparent;
    border: 0;
    color: var(--color-text-soft);
    cursor: pointer;
    padding: 5px;
    border-radius: 4px;
    font-size: 12px;
}
.um-row__icon-btn:hover[b-jse2qxvwdv] { background: var(--color-surface); color: var(--color-text); }
.um-row__icon-btn--danger:hover[b-jse2qxvwdv] { color: var(--color-danger); }

/* ---- Detail panel (right) ---- */
.um-detail-card[b-jse2qxvwdv] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    overflow: hidden;
    align-self: flex-start;
    position: sticky;
    top: 12px;
}
.um-detail__empty[b-jse2qxvwdv] {
    padding: 40px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 13px;
}
.um-detail__head[b-jse2qxvwdv] {
    padding: 16px 18px;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    gap: 12px;
}
.um-detail__avatar[b-jse2qxvwdv] {
    width: 44px;
    height: 44px;
    border-radius: 99px;
    background: linear-gradient(135deg, var(--color-brand), color-mix(in srgb, var(--color-brand) 60%, var(--color-info)));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}
.um-detail__name[b-jse2qxvwdv] {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--color-text);
}
.um-detail__email[b-jse2qxvwdv] {
    font-size: 12px;
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.um-detail__body[b-jse2qxvwdv] {
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.um-field[b-jse2qxvwdv] {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 10px;
    align-items: center;
}
.um-field__label[b-jse2qxvwdv] {
    font-size: 11px;
    color: var(--color-text-muted);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.um-field__value[b-jse2qxvwdv] {
    font-size: 12.5px;
    color: var(--color-text);
}
.um-field__value--mono[b-jse2qxvwdv] { font-family: var(--font-mono); }

/* ---- Roles section ---- */
.um-section-label[b-jse2qxvwdv] {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--color-text-muted);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.um-roles[b-jse2qxvwdv] { display: flex; flex-direction: column; gap: 6px; }
.um-role-pill[b-jse2qxvwdv] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: 7px;
    background: var(--color-surface-alt);
}
.um-role-pill__icon[b-jse2qxvwdv] { font-size: 14px; }
.um-role-pill__icon--admin[b-jse2qxvwdv]   { color: var(--color-danger); }
.um-role-pill__icon--brand[b-jse2qxvwdv]   { color: var(--color-brand); }
.um-role-pill__icon--success[b-jse2qxvwdv] { color: var(--color-success); }
.um-role-pill__name[b-jse2qxvwdv] { flex: 1; font-size: 12.5px; font-weight: 500; }
.um-role-pill__remove[b-jse2qxvwdv] {
    background: transparent;
    border: 0;
    color: var(--color-text-soft);
    cursor: pointer;
    padding: 3px;
    font-size: 11px;
}
.um-role-pill__remove:hover[b-jse2qxvwdv] { color: var(--color-danger); }

.um-add-role-btn[b-jse2qxvwdv] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border: 1px dashed var(--color-border);
    border-radius: 7px;
    background: transparent;
    color: var(--color-brand);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    width: 100%;
    justify-content: center;
}
.um-add-role-btn:hover[b-jse2qxvwdv] { border-color: var(--color-brand); }

/* ---- Tenant access section ---- */
.um-tenant-banner[b-jse2qxvwdv] {
    padding: 10px 12px;
    background: color-mix(in srgb, var(--color-success) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-success) 30%, transparent);
    border-radius: 7px;
    font-size: 12px;
    color: var(--color-success);
    display: flex;
    align-items: center;
    gap: 8px;
}
.um-tenant-list[b-jse2qxvwdv] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 200px;
    overflow: auto;
    padding: 4px;
    border: 1px solid var(--color-border);
    border-radius: 7px;
}
.um-tenant-row[b-jse2qxvwdv] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    font-size: 12px;
    color: var(--color-text);
}
.um-tenant-row__dot[b-jse2qxvwdv] {
    width: 6px;
    height: 6px;
    border-radius: 99px;
}
.um-tenant-row__dot--prod[b-jse2qxvwdv] { background: var(--color-danger); }
.um-tenant-row__dot--test[b-jse2qxvwdv] { background: var(--color-info); }
.um-tenant-row__name[b-jse2qxvwdv] { flex: 1; }

/* ---- Detail bottom action row ---- */
.um-detail__actions[b-jse2qxvwdv] {
    display: flex;
    gap: 6px;
    align-items: center;
}
.um-detail__actions-spacer[b-jse2qxvwdv] { flex: 1; }
/* /Components/Pages/DeploymentHistory.razor.rz.scp.css */
/* =========================================================
 * Deployment History page
 * Mirrors design_handoff/.../DeploymentHistoryScreen layout:
 * eyebrow + h1 + description, single toolbar with status filter
 * pills + tenant select + actions, table with mono ID column,
 * tenant tone badge, relative "when".
 * ========================================================= */

/* ---- Header (eyebrow + h1 + description) ---- */
.dh-header[b-jlmasu2f61] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.dh-header__title-block[b-jlmasu2f61] {
    flex: 1;
    min-width: 320px;
}

.dh-eyebrow[b-jlmasu2f61] {
    font-size: 11.5px;
    color: var(--color-text-muted);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.dh-title[b-jlmasu2f61] {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--color-text);
}

.dh-description[b-jlmasu2f61] {
    font-size: 13px;
    color: var(--color-text-muted);
    margin-top: 4px;
    margin-bottom: 0;
    max-width: 720px;
    line-height: 1.5;
}

.dh-header__actions[b-jlmasu2f61] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ---- Toolbar (filter pills + tenant select) ---- */
.dh-toolbar[b-jlmasu2f61] {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
    flex-wrap: wrap;
}

.dh-pills[b-jlmasu2f61] {
    display: flex;
    gap: 6px;
}

.dh-pill[b-jlmasu2f61] {
    padding: 6px 12px;
    font-size: 12.5px;
    font-weight: 600;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-muted);
    border-radius: 99px;
    cursor: pointer;
    font-family: inherit;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.dh-pill:hover[b-jlmasu2f61] {
    border-color: var(--color-text-muted);
    color: var(--color-text);
}

.dh-pill--active[b-jlmasu2f61] {
    background: var(--color-text);
    border-color: var(--color-text);
    color: #fff;
}

.dh-pill--active:hover[b-jlmasu2f61] {
    background: var(--color-text);
    color: #fff;
}

.dh-tenant[b-jlmasu2f61] {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.dh-tenant__label[b-jlmasu2f61] {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dh-tenant__select[b-jlmasu2f61] {
    min-width: 240px;
}

.dh-toolbar__spacer[b-jlmasu2f61] { flex: 1; }

/* ---- Table ---- */
.dh-table thead th[b-jlmasu2f61] {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--color-surface-alt);
    padding: 10px 14px;
}

.dh-col-commit[b-jlmasu2f61]  { width: 110px; }
.dh-col-service[b-jlmasu2f61] { width: 280px; }
.dh-col-version[b-jlmasu2f61] { width: 240px; }
.dh-col-tenant[b-jlmasu2f61]  { width: 140px; }
.dh-col-by[b-jlmasu2f61]      { width: 1fr; }
.dh-col-when[b-jlmasu2f61]    { width: 110px; }
.dh-col-status[b-jlmasu2f61]  { width: 130px; text-align: right; }
.dh-col-actions[b-jlmasu2f61] { width: 36px; text-align: right; }

/* Commit cell — short hash mono brand-tinted; fallback "#<id>" softer. */
.dh-cell-commit[b-jlmasu2f61] { padding-left: 14px; }
.dh-commit-hash[b-jlmasu2f61] {
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--color-brand);
    letter-spacing: -0.01em;
}
.dh-commit-hash--fallback[b-jlmasu2f61] {
    color: var(--color-text-soft);
    font-weight: 500;
}

/* Reverted-by / reverts-from chip next to the commit hash */
.dh-commit-meta[b-jlmasu2f61] {
    display: block;
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--color-warning);
    margin-top: 2px;
}

/* Service cell */
.dh-cell-service[b-jlmasu2f61] { font-size: 12.5px; }
.dh-service-name[b-jlmasu2f61] {
    color: var(--color-text);
    font-weight: 600;
}
.dh-service-hint[b-jlmasu2f61] {
    color: var(--color-text-soft);
    font-size: 12px;
    font-style: italic;
    margin-left: var(--sp-2);
}

/* Version from→to */
.dh-cell-version[b-jlmasu2f61] {
    font-size: 11.5px;
    font-family: var(--font-mono);
}
.dh-vfrom[b-jlmasu2f61] {
    display: inline-block;
    padding: 2px 6px;
    background: color-mix(in srgb, var(--color-danger) 14%, transparent);
    color: var(--color-danger);
    border-radius: 4px;
    border: 1px solid color-mix(in srgb, var(--color-danger) 30%, transparent);
}
.dh-vto[b-jlmasu2f61] {
    display: inline-block;
    padding: 2px 6px;
    background: color-mix(in srgb, var(--color-success) 14%, transparent);
    color: var(--color-success);
    border-radius: 4px;
    border: 1px solid color-mix(in srgb, var(--color-success) 30%, transparent);
    font-weight: 600;
}
/* Stack-deploy rows snapshot every service even if nothing moved.
   For unchanged ones we still want to communicate "running this
   version" but in a muted tone so the eye locks onto the actually-
   upgraded rows. */
.dh-vto--unchanged[b-jlmasu2f61] {
    background: var(--color-surface-alt);
    color: var(--color-text-muted);
    border-color: var(--color-border);
    font-weight: 500;
}
.dh-vsep[b-jlmasu2f61] {
    margin: 0 6px;
    color: var(--color-text-soft);
    font-size: 9px;
}

/* Inline expand for stack/tenant deploys — lists only the services that
   actually changed in this event with their from→to. Service-level rows
   skip this and open the commit detail modal instead. */
.dh-detail-row td[b-jlmasu2f61] {
    background: var(--color-bg);
    padding: 0 !important;
}

.dh-detail[b-jlmasu2f61] {
    padding: var(--sp-6) var(--sp-7);
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.dh-detail__empty[b-jlmasu2f61] {
    color: var(--color-text-muted);
    font-size: 12.5px;
    font-style: italic;
}

.dh-inner[b-jlmasu2f61] {
    font-size: 12.5px;
}

.dh-inner thead th[b-jlmasu2f61] {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dh-row--expanded[b-jlmasu2f61] {
    background: var(--color-surface-alt);
}

.dh-detail__head[b-jlmasu2f61] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
}

.dh-inner__action[b-jlmasu2f61] {
    text-align: right;
    width: 60px;
}

/* Expand chevron column on the per-service snapshot row — reveals the
   ADO PR/work-item changelog for that one upgrade. Kept narrow so it
   doesn't visually compete with the service name. */
.dh-inner__expand[b-jlmasu2f61] {
    width: 28px;
    text-align: center;
    padding: 0;
}

.dh-snap-expand[b-jlmasu2f61] {
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--color-text-muted);
    padding: 4px 6px;
    line-height: 1;
    border-radius: 4px;
}
.dh-snap-expand:hover[b-jlmasu2f61] {
    color: var(--color-brand);
    background: var(--color-surface-alt);
}

.dh-snap-detail > td[b-jlmasu2f61] {
    padding: 0;
    background: var(--color-bg);
    border-top: 0;
}
.dh-snap-detail__body[b-jlmasu2f61] {
    padding: 10px 14px 12px 32px;
    border-top: 1px solid var(--color-border);
}

.btn-xs[b-jlmasu2f61] {
    padding: 2px 8px;
    font-size: 11px;
    line-height: 1.4;
    border-radius: 4px;
}

.dh-row[b-jlmasu2f61] {
    cursor: pointer;
    transition: background 100ms ease;
}

.dh-row:hover[b-jlmasu2f61] {
    background: var(--color-surface-alt);
}

/* Failed row — soft tint + danger left accent (prototip gibi yumuşak,
   önceki "audit-row--failed" gücünden geri dönüş) */
.dh-row--failed > td:first-child[b-jlmasu2f61] {
    box-shadow: inset 2px 0 0 var(--color-danger);
}

.dh-row--failed[b-jlmasu2f61] {
    background: color-mix(in srgb, var(--color-danger) 4%, transparent);
}

.dh-row--failed:hover[b-jlmasu2f61] {
    background: color-mix(in srgb, var(--color-danger) 8%, transparent);
}

/* Cell-specific styles */
.dh-cell-by[b-jlmasu2f61] {
    font-size: 12.5px;
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
}

.dh-cell-when[b-jlmasu2f61] {
    font-size: 12.5px;
    color: var(--color-text-muted);
    cursor: help;
}

.dh-cell-status[b-jlmasu2f61] {
    text-align: right;
}

.dh-cell-actions[b-jlmasu2f61] {
    text-align: right;
}

.dh-chev[b-jlmasu2f61] {
    font-size: 11px;
    color: var(--color-text-soft);
    transition: color 120ms ease;
}

.dh-row:hover .dh-chev[b-jlmasu2f61] {
    color: var(--color-text);
}


/* /Components/Pages/Home.razor.rz.scp.css */
.home-hero[b-vu2c7686b7] {
    margin-top: 0;
}

.home-stats[b-vu2c7686b7] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-5);
    margin-bottom: var(--sp-8);
}

@media (max-width: 1024px) {
    .home-stats[b-vu2c7686b7] { grid-template-columns: repeat(2, 1fr); }
}

.home-grid[b-vu2c7686b7] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--sp-7);
    margin-bottom: var(--sp-8);
}

@media (max-width: 1024px) {
    .home-grid[b-vu2c7686b7] { grid-template-columns: 1fr; }
}

.tenant-grid[b-vu2c7686b7] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-3);
}

@media (max-width: 640px) {
    .tenant-grid[b-vu2c7686b7] { grid-template-columns: 1fr; }
}

.tenant-chip[b-vu2c7686b7] {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding: var(--sp-5);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    color: var(--color-text);
    text-decoration: none;
    transition: border-color .12s, box-shadow .12s, transform .12s;
}

.tenant-chip:hover[b-vu2c7686b7] {
    border-color: var(--color-brand);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: var(--color-text);
}

.tenant-chip__head[b-vu2c7686b7] {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

.tenant-chip__name[b-vu2c7686b7] {
    flex: 1;
    font-size: var(--fs-13);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tenant-chip__meta[b-vu2c7686b7] {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-12);
    color: var(--color-text-muted);
    font-family: var(--font-mono);
}

.quick-actions[b-vu2c7686b7] {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.quick-action[b-vu2c7686b7] {
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    padding: var(--sp-5);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: var(--color-text);
    transition: border-color .12s, transform .12s;
}

.quick-action:hover[b-vu2c7686b7] {
    border-color: var(--color-brand);
    text-decoration: none;
    color: var(--color-text);
}

.quick-action__icon[b-vu2c7686b7] {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-lg);
    background: var(--color-bg);
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-14);
    flex-shrink: 0;
}

.quick-action__icon--brand[b-vu2c7686b7] { background: var(--color-brand-soft); color: var(--color-brand); }
.quick-action__icon--success[b-vu2c7686b7] { background: var(--color-success-bg); color: var(--color-success); }
.quick-action__icon--warning[b-vu2c7686b7] { background: var(--color-warning-bg); color: var(--color-warning); }

.quick-action__title[b-vu2c7686b7] {
    font-size: var(--fs-13);
    font-weight: 600;
    margin: 0;
}

.quick-action__desc[b-vu2c7686b7] {
    font-size: var(--fs-12);
    color: var(--color-text-muted);
    margin-top: 2px;
}

.home-about[b-vu2c7686b7] {
    margin-top: var(--sp-7);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.home-about summary[b-vu2c7686b7] {
    padding: var(--sp-5) var(--sp-7);
    cursor: pointer;
    font-weight: 600;
    color: var(--color-text);
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

.home-about summary[b-vu2c7686b7]::before {
    content: '\f059';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: var(--color-brand);
}

.home-about[open] summary[b-vu2c7686b7] {
    border-bottom: 1px solid var(--color-border);
}

.home-about__body[b-vu2c7686b7] {
    padding: var(--sp-7);
    font-size: var(--fs-13);
    color: var(--color-text-muted);
    line-height: 1.6;
}

.home-about__body ul[b-vu2c7686b7] {
    margin: var(--sp-3) 0 0;
    padding-left: var(--sp-8);
}

.home-about__body li[b-vu2c7686b7] {
    margin-bottom: var(--sp-2);
}
/* /Components/Pages/Services.razor.rz.scp.css */
/* =====================================================
 * Services page — scoped styles
 * ===================================================== */

/* Legacy (kept for older renders, harmless) */
.services-toolbar[b-sobjfgszo2] {
    margin-top: 0;
    margin-bottom: var(--sp-7);
}

/* ---------- 6.2 Page header ---------- */
.services-page-header[b-sobjfgszo2] {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
    padding: var(--sp-7) 0 var(--sp-6);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--sp-7);
}

.services-breadcrumb[b-sobjfgszo2] {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.services-breadcrumb__link[b-sobjfgszo2] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-text-muted);
    text-decoration: none;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    transition: background .12s, color .12s;
}

.services-breadcrumb__link:hover[b-sobjfgszo2] {
    color: var(--color-text);
    background: var(--color-bg);
    text-decoration: none;
}

.services-breadcrumb__sep[b-sobjfgszo2] {
    color: var(--color-text-soft, var(--color-text-muted));
    opacity: 0.6;
}

.services-breadcrumb__tenant[b-sobjfgszo2] {
    color: var(--color-prod, var(--color-brand));
    background: var(--color-prod-bg, var(--color-brand-soft));
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    letter-spacing: 0.04em;
}

.services-page-header__row[b-sobjfgszo2] {
    display: flex;
    align-items: stretch;        /* equal-height columns so bottom items align */
    gap: var(--sp-7);
    flex-wrap: wrap;
}

.services-page-header__title-block[b-sobjfgszo2] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;   /* commit line pushes to bottom */
    gap: var(--sp-2);
}

.services-page-header__title[b-sobjfgszo2] {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    flex-wrap: wrap;
    font-size: var(--fs-28, 28px);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--color-text);
    margin: 0;
    line-height: 1.2;
}

.services-page-header__meta[b-sobjfgszo2] {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
    font-size: var(--fs-13);
    font-weight: 500;
    letter-spacing: 0;
}

.services-page-header__commit[b-sobjfgszo2] {
    margin: 0;
    font-size: var(--fs-12, 12.5px);
    color: var(--color-text-muted);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.services-page-header__commit code[b-sobjfgszo2] {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 1px 6px;
    font-size: 11.5px;
    color: var(--color-text);
}

.services-page-header__commit-refresh[b-sobjfgszo2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.services-page-header__commit-refresh:hover:not(:disabled)[b-sobjfgszo2] {
    background: var(--color-bg);
    border-color: var(--color-border);
    color: var(--color-text);
}

.services-page-header__commit-refresh:disabled[b-sobjfgszo2] {
    opacity: 0.55;
    cursor: not-allowed;
}

.services-page-header__commit-refresh i[b-sobjfgszo2] {
    font-size: 11px;
}

/* K8s sync/drift rozeti — badge'i tıklanabilir kılan sıfır-stil buton (VBadge içeride görünür). */
.services-page-header__badge-btn[b-sobjfgszo2] {
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    line-height: 1;
}

.services-page-header__actions-stack[b-sobjfgszo2] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;   /* secondary row pushes to bottom, aligns with commit */
    gap: var(--sp-3);
    flex-shrink: 0;
}

.services-page-header__primary-actions[b-sobjfgszo2] {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-shrink: 0;
}

.services-page-header__secondary[b-sobjfgszo2] {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    flex-wrap: wrap;
    justify-content: flex-end;
}

.services-page-header__link[b-sobjfgszo2] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: transparent;
    color: var(--color-text-muted);
    border: 0;
    border-radius: var(--radius-md);
    font-size: 12.5px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background .12s, color .12s;
}

.services-page-header__link:hover:not(:disabled)[b-sobjfgszo2] {
    background: var(--color-bg);
    color: var(--color-text);
}

.services-page-header__link:disabled[b-sobjfgszo2] {
    opacity: 0.5;
    cursor: not-allowed;
}

.services-page-header__link.is-active[b-sobjfgszo2] {
    background: var(--color-brand-soft);
    color: var(--color-brand-text);
}

.services-page-header__link i[b-sobjfgszo2] {
    font-size: 11px;
    opacity: 0.85;
}

.services-page-header__link-sep[b-sobjfgszo2] {
    width: 1px;
    height: 18px;
    background: var(--color-border);
    margin: 0 var(--sp-2);
}

/* ---------- Conditional git drift action row ---------- */
.services-git-actions[b-sobjfgszo2] {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
    padding: var(--sp-4) var(--sp-5);
    background: var(--color-warning-bg, #FFF5E6);
    border: 1px solid var(--color-warning-border, #FED8A3);
    border-radius: var(--radius-md);
    margin-bottom: var(--sp-5);
}

/* ---------- 6.3 Stats strip ---------- */
.services-stats[b-sobjfgszo2] {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: var(--sp-4) 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--sp-6);
    background: var(--color-surface);
}

.services-stats__cell[b-sobjfgszo2] {
    flex: 1 1 0;
    padding: var(--sp-3) var(--sp-6);
    border-right: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.services-stats__cell:last-of-type[b-sobjfgszo2] {
    border-right: 1px solid var(--color-border);
}

.services-stats__label[b-sobjfgszo2] {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.services-stats__value[b-sobjfgszo2] {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-text);
    letter-spacing: -0.015em;
    line-height: 1.1;
}

.services-stats__sub[b-sobjfgszo2] {
    font-size: 11.5px;
    color: var(--color-text-muted);
}

.services-stats__cell--warning .services-stats__value[b-sobjfgszo2] { color: var(--color-warning); }
.services-stats__cell--warning .services-stats__sub[b-sobjfgszo2]   { color: var(--color-warning); }
.services-stats__cell--danger .services-stats__value[b-sobjfgszo2]  { color: var(--color-danger); }
.services-stats__cell--danger .services-stats__sub[b-sobjfgszo2]    { color: var(--color-danger); }

.services-stats__auto[b-sobjfgszo2] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: var(--sp-3) var(--sp-6);
    font-size: 11.5px;
    color: var(--color-text-muted);
    align-self: center;
    white-space: nowrap;
}

.services-stats__auto i[b-sobjfgszo2] {
    font-size: 10.5px;
    opacity: 0.8;
}

/* ---------- 6.4 Production destructive warning banner ---------- */
.services-prod-warning[b-sobjfgszo2] {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
    background: var(--color-warning-bg, #FFF5E6);
    border: 1px solid var(--color-warning-border, #FED8A3);
    color: #8A4C00;
    border-radius: var(--radius-md);
    font-size: var(--fs-13);
    line-height: 1.5;
    margin-bottom: var(--sp-5);
}

.services-prod-warning__icon[b-sobjfgszo2] {
    font-size: 16px;
    color: var(--color-warning, #B45309);
    margin-top: 2px;
    flex-shrink: 0;
}

.services-prod-warning__body[b-sobjfgszo2] {
    flex: 1 1 auto;
    color: #beb8ad;
}

.services-prod-warning__body strong[b-sobjfgszo2] { color: #beb8ad; }
.services-prod-warning__body em[b-sobjfgszo2] { font-style: normal; font-weight: 600; color: #beb8ad; }
.services-prod-warning__body a[b-sobjfgszo2] {
    color: var(--color-brand, #5856D6);
    font-weight: 500;
    text-decoration: underline;
}

.services-prod-warning__dismiss[b-sobjfgszo2] {
    flex-shrink: 0;
    background: transparent;
    border: 0;
    padding: 4px 8px;
    color: var(--color-warning, #B45309);
    opacity: 0.65;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: opacity .12s, background .12s;
    font-size: 14px;
}

.services-prod-warning__dismiss:hover[b-sobjfgszo2] {
    opacity: 1;
    background: rgba(255,255,255,0.5);
}

/* ---------- 6.6 Stack card ---------- */
.stack-card[b-sobjfgszo2] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    margin-bottom: var(--sp-6);
    display: flex;
    flex-direction: column;
}

.stack-card--collapsed[b-sobjfgszo2] {
    /* header only */
}

.stack-card__header[b-sobjfgszo2] {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-6);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-alt);
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
    flex-wrap: wrap;
}

.stack-card--collapsed .stack-card__header[b-sobjfgszo2] {
    border-bottom: 0;
    border-bottom-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
}

.stack-card__toggle[b-sobjfgszo2] {
    width: 28px;
    height: 28px;
    border: 0;
    background: transparent;
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .12s, color .12s;
}

.stack-card__toggle:hover[b-sobjfgszo2] {
    background: var(--color-bg);
    color: var(--color-text);
}

.stack-card__title-block[b-sobjfgszo2] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stack-card__title-row[b-sobjfgszo2] {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
}

.stack-card__icon[b-sobjfgszo2] {
    color: var(--color-brand);
    font-size: 14px;
    opacity: 0.8;
}

.stack-card__name[b-sobjfgszo2] {
    font-size: var(--fs-15, 15px);
    font-weight: 600;
    color: var(--color-text);
    letter-spacing: -0.01em;
}

.stack-card__sub[b-sobjfgszo2] {
    font-size: 11.5px;
    color: var(--color-text-muted);
    padding-left: 22px;
}

.stack-card__actions[b-sobjfgszo2] {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-shrink: 0;
}

/* Keep existing card-body padding consistent inside stack-card */
.stack-card .card-body[b-sobjfgszo2] {
    padding: 0;
}

.stack-card .card-body > .table-responsive[b-sobjfgszo2] {
    padding: 0;
}

/* ---------- 6.7 Service row (table) ---------- */
.services-table[b-sobjfgszo2] {
    border: 0;
    border-radius: 0;
    font-size: var(--fs-13);
}

.services-table thead th[b-sobjfgszo2] {
    font-size: 10.5px;
    letter-spacing: 0.06em;
    padding: var(--sp-3) var(--sp-4);
    background: transparent;
    border-bottom: 1px solid var(--color-border);
}

/* Clickable sort headers */
.services-table__th[b-sobjfgszo2] {
    cursor: pointer;
    user-select: none;
    transition: color .12s, background .12s;
}

.services-table__th:hover[b-sobjfgszo2] {
    color: var(--color-text);
    background: var(--color-surface-alt);
}

.services-table__th--sorted[b-sobjfgszo2] {
    color: var(--color-brand);
}

.services-table__th-arrow[b-sobjfgszo2] {
    font-size: 9px;
    margin-left: 4px;
    vertical-align: baseline;
}

.services-table__th-arrow--muted[b-sobjfgszo2] {
    opacity: 0;
    transition: opacity .12s;
}

.services-table__th:hover .services-table__th-arrow--muted[b-sobjfgszo2] {
    opacity: 0.5;
}

/* Bulk-select first column */
.services-table__select-cell[b-sobjfgszo2] {
    width: 32px;
    padding: var(--sp-3) 0 var(--sp-3) var(--sp-4) !important;
    text-align: center;
}

.services-table__checkbox[b-sobjfgszo2] {
    width: 14px;
    height: 14px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--color-brand);
}

.services-table__row--selected[b-sobjfgszo2] {
    background: var(--color-brand-soft) !important;
}

.services-table__row--selected:hover[b-sobjfgszo2] {
    background: var(--color-brand-soft) !important;
}

.services-table__row--selected td:first-child[b-sobjfgszo2] {
    position: relative;
}


.services-table__row--selected td:first-child[b-sobjfgszo2]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--color-brand);
}

.services-table tbody td[b-sobjfgszo2] {
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}

/* Unwrap the <button class="btn"> pattern so badges render flush */
.services-table td > .btn[b-sobjfgszo2] {
    padding: 0;
    border: 0;
    background: transparent;
    font-size: inherit;
    line-height: inherit;
    box-shadow: none;
}

.services-table td > .btn:hover[b-sobjfgszo2],
.services-table td > .btn:focus[b-sobjfgszo2] {
    background: transparent;
    box-shadow: none;
}

/* Service name cell: name + inline health chips */
.services-table__service-cell[b-sobjfgszo2] {
    min-width: 0;
    max-width: 260px;
}

.services-table__service-name[b-sobjfgszo2] {
    font-weight: 600;
    color: var(--color-text);
    font-size: 13px;
    line-height: 1.3;
}

.services-table__service-meta[b-sobjfgszo2] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 3px;
}

.services-table__chip[b-sobjfgszo2] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--color-text-muted);
    letter-spacing: -0.005em;
    cursor: default;
}

.services-table__chip i[b-sobjfgszo2] {
    font-size: 9px;
    opacity: 0.9;
}

.services-table__chip--warn[b-sobjfgszo2] {
    color: var(--color-warning);
}

.services-table__chip--info[b-sobjfgszo2] {
    color: var(--color-info);
}

.services-table__chip--danger[b-sobjfgszo2] {
    color: var(--color-danger);
}

/* "config durumu bilinmiyor" — iddiasız hâl: ne temiz ne drift, bu yüzden soluk. */
.services-table__chip--muted[b-sobjfgszo2] {
    color: var(--color-text-muted, #9aa0a6);
}

/* Legacy: the old `<strong>` wrapper in other service name cells */
.services-table td > strong[b-sobjfgszo2] {
    font-weight: 600;
    color: var(--color-text);
    font-size: 13px;
}

/* Image column: compact monospace, truncated with tooltip */
.services-table td > code[b-sobjfgszo2],
.services-table td code[b-sobjfgszo2] {
    font-size: 11.5px;
    background: transparent;
    color: var(--color-text-muted);
    padding: 0;
    border: 0;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
}

.services-table tbody td:nth-child(2)[b-sobjfgszo2] {
    max-width: 280px;
    min-width: 0;
}

.services-table tbody td:nth-child(2) > code[b-sobjfgszo2] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: normal;
}

/* Version pills (Running / Selected / Latest) */
.services-table .badge[b-sobjfgszo2] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    font-size: 11.5px;
    font-weight: 600;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    letter-spacing: -0.005em;
    line-height: 1.4;
    white-space: nowrap;
}

.services-table .badge i[b-sobjfgszo2] {
    font-size: 9px;
    opacity: 0.85;
}

.services-table .badge small[b-sobjfgszo2] {
    font-family: var(--font-sans);
    font-weight: 500;
    opacity: 0.85;
}

/* Status cell: dot-prefix illusion using ::before */
.services-table td .badge.bg-success[b-sobjfgszo2] { background: var(--color-success-bg); color: var(--color-success); border: 1px solid var(--color-success-border); }
.services-table td .badge.bg-danger[b-sobjfgszo2],
.services-table td .badge.bg-secondary[b-sobjfgszo2] { background: var(--color-bg); color: var(--color-text-muted); border: 1px solid var(--color-border); }
.services-table td .badge.bg-warning[b-sobjfgszo2] { background: var(--color-warning-bg); color: var(--color-warning); border: 1px solid var(--color-warning-border); }
.services-table td .badge.bg-info[b-sobjfgszo2] { background: var(--color-info-bg); color: var(--color-info); border: 1px solid var(--color-info-border); }
.services-table td .badge.bg-light[b-sobjfgszo2] { background: var(--color-bg); color: var(--color-text-muted); border: 1px solid var(--color-border); }

/* Action row: clean ghost icons + single primary accent + overflow (6.7) */
.services-table__actions-cell[b-sobjfgszo2] {
    white-space: nowrap;
}

.services-row-actions[b-sobjfgszo2] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    justify-content: flex-end;
}

.services-row-actions__btn[b-sobjfgszo2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    cursor: pointer;
    font-size: 12px;
    position: relative;
    transition: background .12s, color .12s, border-color .12s;
}

.services-row-actions__btn:hover:not(:disabled)[b-sobjfgszo2] {
    background: var(--color-bg);
    color: var(--color-text);
    border-color: var(--color-border);
}

.services-row-actions__btn:disabled[b-sobjfgszo2] {
    opacity: 0.45;
    cursor: not-allowed;
}

.services-row-actions__btn--primary[b-sobjfgszo2] {
    color: var(--color-success);
}
.services-row-actions__btn--primary:hover:not(:disabled)[b-sobjfgszo2] {
    background: var(--color-success-bg);
    color: var(--color-success);
    border-color: var(--color-success-border);
}

.services-row-actions__btn--warn[b-sobjfgszo2] {
    color: var(--color-warning);
}
.services-row-actions__btn--warn:hover:not(:disabled)[b-sobjfgszo2] {
    background: var(--color-warning-bg);
    color: var(--color-warning);
    border-color: var(--color-warning-border);
}

.services-row-actions__btn--logs:hover:not(:disabled)[b-sobjfgszo2] {
    background: var(--color-info-bg);
    color: var(--color-info);
    border-color: var(--color-info-border);
}

.services-row-actions__badge[b-sobjfgszo2] {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    background: var(--color-warning);
    color: #fff;
    border-radius: 99px;
    font-size: 9px;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
}

.services-table tbody tr:hover[b-sobjfgszo2] {
    background: var(--color-surface-alt);
}

/* Remove table-responsive extra padding */
.services-table-wrap[b-sobjfgszo2] {
    padding: 0;
    border-radius: 0;
}

/* ---------- 6.5 Filter bar ---------- */
.services-filterbar[b-sobjfgszo2] {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-5);
    flex-wrap: wrap;
}

.services-filterbar__search[b-sobjfgszo2] {
    position: relative;
    flex: 1 1 320px;
    min-width: 240px;
}

.services-filterbar__search-icon[b-sobjfgszo2] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-muted);
    font-size: 12px;
    pointer-events: none;
}

.services-filterbar__input[b-sobjfgszo2] {
    width: 100%;
    height: 36px;
    padding: 0 40px 0 36px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--fs-13);
    font-family: inherit;
    color: var(--color-text);
    transition: border-color .12s, box-shadow .12s;
}

.services-filterbar__input:focus[b-sobjfgszo2] {
    outline: none;
    border-color: var(--color-brand);
    box-shadow: 0 0 0 3px var(--color-brand-soft);
}

.services-filterbar__input[b-sobjfgszo2]::placeholder {
    color: var(--color-text-muted);
}

.services-filterbar__kbd[b-sobjfgszo2] {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 1px 7px;
    font-size: 11px;
    font-family: var(--font-mono, monospace);
    color: var(--color-text-muted);
    pointer-events: none;
}

.services-filterbar__clear[b-sobjfgszo2] {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background: transparent;
    border: 0;
    color: var(--color-text-muted);
    cursor: pointer;
    font-size: 11px;
    border-radius: var(--radius-sm);
}

.services-filterbar__clear:hover[b-sobjfgszo2] {
    color: var(--color-text);
    background: var(--color-bg);
}

.services-filterbar__select[b-sobjfgszo2] {
    height: 36px;
    padding: 0 28px 0 10px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--fs-13);
    font-family: inherit;
    color: var(--color-text);
    cursor: pointer;
    min-width: 140px;
}

.services-filterbar__group[b-sobjfgszo2] {
    display: flex;
    gap: 2px;
}

.services-filterbar__icon-btn[b-sobjfgszo2] {
    width: 36px;
    height: 36px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .12s, color .12s;
}

.services-filterbar__icon-btn:hover[b-sobjfgszo2] {
    background: var(--color-bg);
    color: var(--color-text);
}

.services-filterbar__count[b-sobjfgszo2] {
    font-size: var(--fs-12);
    color: var(--color-text-muted);
    margin: -8px 0 var(--sp-4);
}

.services-filterbar__count strong[b-sobjfgszo2] {
    color: var(--color-text);
    font-weight: 600;
}

.services-filterbar__count code[b-sobjfgszo2] {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    font-size: 11px;
}

/* ---------- Uptime cell (6.7) ---------- */
.services-table__uptime-cell[b-sobjfgszo2] {
    line-height: 1.3;
    min-width: 140px;
}

.services-table__uptime[b-sobjfgszo2] {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text);
    letter-spacing: -0.005em;
}

.services-table__uptime--muted[b-sobjfgszo2] {
    color: var(--color-text-muted);
    font-weight: 400;
}

.services-table__uptime-sub[b-sobjfgszo2] {
    display: block;
    font-size: 11px;
    color: var(--color-text-muted);
    margin-top: 1px;
}

/* ---------- Status pill (6.7) ---------- */
.services-status-pill[b-sobjfgszo2] {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 2px 4px !important;
    background: transparent !important;
    border: 0 !important;
    font-size: 12px !important;
    color: var(--color-text) !important;
    text-transform: capitalize;
    cursor: pointer;
    border-radius: var(--radius-sm);
}

.services-status-pill:hover[b-sobjfgszo2] {
    background: var(--color-bg) !important;
}

.services-status-pill span[b-sobjfgszo2] {
    font-weight: 500;
    letter-spacing: -0.005em;
}

/* Sticky bulk-actions bar — design_handoff/screen_services.jsx */
.bulk-bar[b-sobjfgszo2] {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: #0E1116;
    color: #F6F7FA;
    border: 1px solid #242833;
    border-radius: 12px;
    box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.45), 0 4px 12px rgba(0, 0, 0, 0.25);
    font-size: 12.5px;
}

:root[data-theme="dark"] .bulk-bar[b-sobjfgszo2] {
    background: #1C2029;
    border-color: #323745;
}

.bulk-bar__count[b-sobjfgszo2] {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    background: #1C2029;
    border: 1px solid #2A2F3A;
    border-radius: 6px;
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: #F6F7FA;
}

.bulk-bar__label[b-sobjfgszo2] {
    color: #C8CCD6;
    font-size: 12.5px;
}

.bulk-bar__btn[b-sobjfgszo2] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: #1C2029;
    border: 1px solid #242833;
    border-radius: 6px;
    color: #F6F7FA;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.12s, border-color 0.12s;
}

.bulk-bar__btn:hover:not(:disabled)[b-sobjfgszo2] {
    background: #272C38;
    border-color: #343A48;
}

.bulk-bar__btn:disabled[b-sobjfgszo2] {
    opacity: 0.55;
    cursor: not-allowed;
}

.bulk-bar__btn--primary[b-sobjfgszo2] {
    background: var(--color-brand);
    border-color: var(--color-brand);
    color: #FFFFFF;
}

.bulk-bar__btn--primary:hover:not(:disabled)[b-sobjfgszo2] {
    background: var(--color-brand-hover);
    border-color: var(--color-brand-hover);
}

.bulk-bar__btn--danger[b-sobjfgszo2] {
    color: #FCA5A5;
}

.bulk-bar__btn--danger:hover:not(:disabled)[b-sobjfgszo2] {
    background: #3A1D1D;
    border-color: #6B2828;
    color: #FECACA;
}

.bulk-bar__btn--ghost[b-sobjfgszo2] {
    background: transparent;
    border-color: transparent;
    color: #C8CCD6;
}

.bulk-bar__btn--ghost:hover:not(:disabled)[b-sobjfgszo2] {
    background: #1C2029;
    color: #F6F7FA;
}

/* ── Live usage column (host metrics stream / docker stats) ────────────────── */

.services-table__usage-cell[b-sobjfgszo2] { white-space: nowrap; }

.services-usage[b-sobjfgszo2] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
}

.services-usage--none[b-sobjfgszo2] { color: var(--color-text-muted); }

.services-usage__item[b-sobjfgszo2] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--color-text);
}

.services-usage__item i[b-sobjfgszo2] {
    font-size: 0.62rem;
    color: var(--color-text-muted);
}

.services-usage__item--hot[b-sobjfgszo2],
.services-usage__item--hot i[b-sobjfgszo2] { color: var(--color-warning); font-weight: 700; }

/* on-demand watch control */
.services-usage-watch[b-sobjfgszo2] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 10px;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-muted);
    font-size: 0.7rem;
    cursor: pointer;
}

.services-usage-watch:hover[b-sobjfgszo2] {
    color: var(--color-text);
    border-color: var(--color-text-muted);
    border-style: solid;
}

.services-usage-live[b-sobjfgszo2] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.services-usage-live__rows[b-sobjfgszo2] {
    display: flex;
    flex-wrap: wrap;
    column-gap: 10px;
    row-gap: 2px;
    max-width: 340px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
}

.services-usage__item--sub[b-sobjfgszo2],
.services-usage__item--sub i[b-sobjfgszo2] { color: var(--color-text-muted); font-size: 0.66rem; }

.services-usage-stop[b-sobjfgszo2] {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-muted);
    font-size: 0.7rem;
    cursor: pointer;
    opacity: 0.4;
}

.services-usage-stop:hover[b-sobjfgszo2] { opacity: 1; color: var(--color-danger, #d64545); }

/* ── Usage hücresi görselleri: bar'lar + CPU sparkline ─────────────────────── */
.services-usage-live__body[b-sobjfgszo2] { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.services-usage-visual[b-sobjfgszo2] { display: flex; align-items: center; gap: 6px; }

.services-usage-bar[b-sobjfgszo2] {
    display: inline-block;
    width: 54px;
    height: 5px;
    border-radius: 3px;
    background: var(--color-border, #e3e3e3);
    overflow: hidden;
    flex: none;
}

.services-usage-bar__fill[b-sobjfgszo2] {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: var(--color-primary, #4c8bf5);
    transition: width 0.4s ease;
}

.services-usage-bar__fill--mem[b-sobjfgszo2] { background: var(--color-success, #3aa66b); }
.services-usage-bar__fill.is-warn[b-sobjfgszo2] { background: var(--color-warning, #e0a132); }
.services-usage-bar__fill.is-danger[b-sobjfgszo2] { background: var(--color-danger, #d64545); }

.services-usage-spark[b-sobjfgszo2] { width: 60px; height: 16px; flex: none; overflow: visible; }
.services-usage-spark polyline[b-sobjfgszo2] {
    stroke: var(--color-primary, #4c8bf5);
    stroke-width: 1.4;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.services-usage-expand[b-sobjfgszo2] {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-muted);
    font-size: 0.7rem;
    cursor: pointer;
    opacity: 0.4;
    transition: transform 0.15s ease;
}

.services-usage-expand:hover[b-sobjfgszo2] { opacity: 1; color: var(--color-primary, #4c8bf5); }
.services-usage-expand--open[b-sobjfgszo2] { opacity: 0.9; transform: rotate(180deg); }

/* ── Genişletilmiş Usage satırı: son ~10 dk chart'ları ─────────────────────── */
.services-usage-detail-row td[b-sobjfgszo2] {
    background: var(--color-bg-subtle, rgba(0, 0, 0, 0.02));
    padding: 8px 12px;
}

.services-usage-detail[b-sobjfgszo2] {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.services-usage-detail__chart[b-sobjfgszo2] { min-width: 220px; flex: 1 1 220px; max-width: 340px; }

.services-usage-detail__title[b-sobjfgszo2] {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    margin-bottom: 2px;
}

.services-usage-detail__legend[b-sobjfgszo2] { font-weight: 400; text-transform: none; opacity: 0.8; }

.services-usage-detail__svg[b-sobjfgszo2] {
    width: 100%;
    height: 56px;
    display: block;
    background: var(--color-bg, #fff);
    border: 1px solid var(--color-border, #e3e3e3);
    border-radius: var(--radius-sm);
}

.services-usage-detail__line[b-sobjfgszo2] { fill: none; stroke: var(--color-primary, #4c8bf5); stroke-width: 1.4; }
.services-usage-detail__area[b-sobjfgszo2] { fill: var(--color-primary, #4c8bf5); opacity: 0.12; }
.services-usage-detail__line--mem[b-sobjfgszo2] { stroke: var(--color-success, #3aa66b); }
.services-usage-detail__area--mem[b-sobjfgszo2] { fill: var(--color-success, #3aa66b); }
.services-usage-detail__line--rx[b-sobjfgszo2] { stroke: var(--color-primary, #4c8bf5); }
.services-usage-detail__line--tx[b-sobjfgszo2] { stroke: var(--color-warning, #e0a132); }

.services-usage-detail__meta[b-sobjfgszo2] {
    display: flex;
    justify-content: space-between;
    font-size: 0.64rem;
    color: var(--color-text-muted);
    margin-top: 2px;
}

.services-usage-detail__empty[b-sobjfgszo2] { color: var(--color-text-muted); font-size: 0.75rem; }

/* "Tanımlı config çalışmıyor" bandı — sürüm uyarısından ayrı bir soru, ayrı bir bant. */
.services-config-banner[b-sobjfgszo2] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    margin-bottom: 12px;
    border: 1px solid var(--color-warning);
    border-radius: 8px;
    background: color-mix(in srgb, var(--color-warning) 10%, transparent);
}

.services-config-banner__icon[b-sobjfgszo2] { color: var(--color-warning); }
.services-config-banner__body[b-sobjfgszo2] { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.services-config-banner__hint[b-sobjfgszo2] { font-size: 12px; color: var(--color-text-muted, #9aa0a6); }

/* ── "Config'i uygula" diyaloğu: üç durumlu karar listesi ──────────────────────────
   Amaç GÖZLE TAKİP: her satırın kararı hem ikonla, hem renkle, hem de sağdaki
   yazıyla görünür. Tek bir işaret (yalnız renk ya da yalnız ikon) yanlış okumaya
   açıktı — burada yanlış karar prod'da restart demek. */
.cfg-apply-toolbar[b-sobjfgszo2] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.cfg-apply-summary[b-sobjfgszo2] {
    display: flex;
    gap: 12px;
    font-size: 12px;
    margin-left: auto;
}

.cfg-apply-summary__apply[b-sobjfgszo2] { color: var(--color-success, #3fb950); }
.cfg-apply-summary__ignore[b-sobjfgszo2] { color: var(--color-text-muted, #9aa0a6); }
.cfg-apply-summary__pending[b-sobjfgszo2] { color: var(--color-warning, #e0a132); }

.cfg-apply-list[b-sobjfgszo2] {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 6px;
    max-height: 340px;
    overflow-y: auto;
}

.cfg-apply-section__head[b-sobjfgszo2] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 4px 4px;
    border-top: 1px solid var(--color-border);
    margin-top: 6px;
}

.cfg-apply-section__head:first-child[b-sobjfgszo2] { border-top: 0; margin-top: 0; }
.cfg-apply-section__head--suspect[b-sobjfgszo2] { color: var(--color-text-muted, #9aa0a6); }

.cfg-apply-section__hint[b-sobjfgszo2] {
    font-weight: 400;
    font-size: 11px;
    color: var(--color-text-muted, #9aa0a6);
}

.cfg-apply-stack[b-sobjfgszo2] {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 4px 2px;
    color: var(--color-text-muted, #9aa0a6);
}

.cfg-apply-row[b-sobjfgszo2] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 6px;
    border-left: 3px solid transparent;
    border-radius: 4px;
    font-size: 13px;
}

.cfg-apply-row--apply[b-sobjfgszo2] {
    border-left-color: var(--color-success, #3fb950);
    background: color-mix(in srgb, var(--color-success, #3fb950) 10%, transparent);
}

/* Susturulan satır "kapalı" görünür: sönük, soğuk gri — dikkat çekmemeli. */
.cfg-apply-row--ignore[b-sobjfgszo2] {
    border-left-color: var(--color-text-muted, #9aa0a6);
    background: color-mix(in srgb, var(--color-text-muted, #9aa0a6) 8%, transparent);
    opacity: 0.72;
}

/* Karar BEKLEYEN satır dikkat rengiyle: kullanıcının bakması gereken yer burası.
   Arka planı yok — 40 satırın hepsi sarı zemin olsaydı hiçbir şey öne çıkmazdı;
   sol şerit + sarı dolu saat düğmesi seçili olduğunu tek bakışta söyler. */
.cfg-apply-row--pending[b-sobjfgszo2] {
    border-left-color: var(--color-warning, #e0a132);
}

/* Bootstrap'in btn-dark'ı koyu temada outline'a çok yakın; kenarlıkla ayrıştır. */
.cfg-decide--ignore[b-sobjfgszo2] {
    border-color: var(--color-text-muted, #9aa0a6);
}

.cfg-apply-row--muted[b-sobjfgszo2] { opacity: 0.75; }

.cfg-apply-row__decide[b-sobjfgszo2] { flex: 0 0 auto; }
.cfg-apply-row__body[b-sobjfgszo2] { flex: 1; min-width: 0; display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.cfg-apply-row__service[b-sobjfgszo2] { font-weight: 500; }
.cfg-apply-row__keys[b-sobjfgszo2] { font-family: var(--font-mono); font-size: 11px; color: var(--color-text-muted, #9aa0a6); word-break: break-all; }
.cfg-apply-row__suspect[b-sobjfgszo2] { font-size: 11px; color: var(--color-text-muted, #9aa0a6); }
.cfg-apply-row__state[b-sobjfgszo2] { flex: 0 0 auto; font-size: 11px; color: var(--color-text-muted, #9aa0a6); }

.cfg-apply-ignored[b-sobjfgszo2] { margin-top: 10px; }
.cfg-apply-ignored__hint[b-sobjfgszo2] { font-size: 11px; color: var(--color-text-muted, #9aa0a6); margin-bottom: 4px; }

/* Bantta şüphe/yoksayma satırları: başlıkla aynı ağırlıkta OLMAMALI — asıl sayı ölçülen fark. */
.services-config-banner__aside[b-sobjfgszo2] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--color-text-muted, #9aa0a6);
}

.services-config-banner__link[b-sobjfgszo2] {
    padding: 0;
    font-size: 12px;
    vertical-align: baseline;
}

.cfg-apply-ignored__head[b-sobjfgszo2] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

/* "Bu uygulama sürümü de taşıyor" etiketi — deploy compose'da yazan tag'i çeker. */
.cfg-apply-row__version[b-sobjfgszo2] {
    font-size: 11px;
    color: var(--color-warning, #e0a132);
    white-space: nowrap;
}
/* /Components/Pages/ServiceVersionComparison.razor.rz.scp.css */
/* =========================================================
 * Version Comparison page (matrix view)
 * Mirrors the design prototype's VersionCompareScreen layout:
 * eyebrow + h1 + inline-legend description, view toggle,
 * 4-stat row, toolbar, single sticky-header matrix table.
 * ========================================================= */

/* ---- Header ---- */
.vc-header[b-zb7jsvhb1y] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.vc-header__title-block[b-zb7jsvhb1y] {
    flex: 1;
    min-width: 320px;
}

.vc-eyebrow[b-zb7jsvhb1y] {
    font-size: 11.5px;
    color: var(--color-text-muted);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.vc-title[b-zb7jsvhb1y] {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--color-text);
}

.vc-description[b-zb7jsvhb1y] {
    font-size: 13px;
    color: var(--color-text-muted);
    margin-top: 4px;
    margin-bottom: 0;
    max-width: 720px;
    line-height: 1.5;
}

/* Inline color legend words inside the description ("Green" / "blue" / "amber"). */
.vc-leg[b-zb7jsvhb1y] { font-weight: 700; }
.vc-leg--success[b-zb7jsvhb1y] { color: var(--color-success); }
.vc-leg--info[b-zb7jsvhb1y]    { color: var(--color-info); }
.vc-leg--warning[b-zb7jsvhb1y] { color: var(--color-warning); }

.vc-header__actions[b-zb7jsvhb1y] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ---- View toggle (segmented control) ---- */
.vc-viewtoggle[b-zb7jsvhb1y] {
    display: inline-flex;
    padding: 2px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.vc-viewtoggle__btn[b-zb7jsvhb1y] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    border-radius: 5px;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.12s, color 0.12s;
}

.vc-viewtoggle__btn:hover:not(:disabled):not(.vc-viewtoggle__btn--active)[b-zb7jsvhb1y] {
    color: var(--color-text);
}

.vc-viewtoggle__btn--active[b-zb7jsvhb1y] {
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-xs);
}

.vc-viewtoggle__btn:disabled[b-zb7jsvhb1y] {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ---- Stats row ---- */
.vc-stats[b-zb7jsvhb1y] {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.vc-stat[b-zb7jsvhb1y] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    min-width: 160px;
}

.vc-stat__icon[b-zb7jsvhb1y] {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
}

.vc-stat__label[b-zb7jsvhb1y] {
    font-size: 10.5px;
    color: var(--color-text-muted);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.vc-stat__value[b-zb7jsvhb1y] {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.015em;
    font-feature-settings: "tnum";
    color: var(--color-text);
}

.vc-stat--success .vc-stat__icon[b-zb7jsvhb1y] { color: var(--color-success); }
.vc-stat--success .vc-stat__value[b-zb7jsvhb1y] { color: var(--color-success); }

.vc-stat--warning .vc-stat__icon[b-zb7jsvhb1y] { color: var(--color-warning); }
.vc-stat--warning .vc-stat__value[b-zb7jsvhb1y] { color: var(--color-warning); }

/* ---- Toolbar ---- */
.vc-toolbar[b-zb7jsvhb1y] {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.vc-search[b-zb7jsvhb1y] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    flex: 0 1 360px;
    min-width: 220px;
}

.vc-search:focus-within[b-zb7jsvhb1y] {
    border-color: var(--color-brand);
    box-shadow: 0 0 0 3px rgba(91, 91, 230, 0.15);
}

.vc-search__icon[b-zb7jsvhb1y] { color: var(--color-text-soft); font-size: 13px; }

.vc-search__input[b-zb7jsvhb1y] {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    font-size: 12.5px;
    background: transparent;
    color: var(--color-text);
    font-family: inherit;
}

.vc-search__input[b-zb7jsvhb1y]::placeholder { color: var(--color-text-soft); }

.vc-search__clear[b-zb7jsvhb1y] {
    background: transparent;
    border: 0;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 0 2px;
}
.vc-search__clear:hover[b-zb7jsvhb1y] { color: var(--color-text); }

.vc-toolbar__check[b-zb7jsvhb1y] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--color-text-muted);
    cursor: pointer;
    user-select: none;
}

.vc-toolbar__check input[b-zb7jsvhb1y] { accent-color: var(--color-brand); }

.vc-toolbar__spacer[b-zb7jsvhb1y] { flex: 1; }

.vc-toolbar__legend[b-zb7jsvhb1y] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    color: var(--color-text-muted);
    flex-wrap: wrap;
}

.vc-swatch[b-zb7jsvhb1y] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    border: 1px solid var(--color-border);
    margin-right: 4px;
    vertical-align: -1px;
}

.vc-swatch--success[b-zb7jsvhb1y] { background: var(--color-success-bg); border-color: var(--color-success-border); }
.vc-swatch--info[b-zb7jsvhb1y]    { background: var(--color-info-bg);    border-color: var(--color-info-border); }
.vc-swatch--warning[b-zb7jsvhb1y] { background: var(--color-warning-bg); border-color: var(--color-warning-border); }
.vc-swatch--neutral[b-zb7jsvhb1y] { background: var(--color-bg);         border-color: var(--color-border); }

/* ---- Matrix table ---- */
.vc-matrix-wrap[b-zb7jsvhb1y] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    overflow: auto;
    max-height: calc(100vh - 320px);
}

.vc-matrix[b-zb7jsvhb1y] {
    border-collapse: separate;
    border-spacing: 0;
    font-size: 11px;
    width: 100%;
}

.vc-matrix thead th[b-zb7jsvhb1y] {
    position: sticky;
    top: 0;
    background: var(--color-surface-alt);
    border-bottom: 1px solid var(--color-border);
    padding: 10px 8px;
    text-align: center;
    z-index: 2;
}

/* First column header — sticky in both axes so the corner stays put. */
.vc-matrix thead .vc-matrix__service-th[b-zb7jsvhb1y] {
    position: sticky;
    left: 0;
    z-index: 3;
    text-align: left;
    padding: 10px 14px;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--color-text-muted);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-right: 1px solid var(--color-border);
    width: 260px;
    min-width: 260px;
}

.vc-matrix__tenant-th[b-zb7jsvhb1y] {
    min-width: 100px;
    width: 110px;
}

.vc-tenant-head[b-zb7jsvhb1y] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.vc-tenant-dot[b-zb7jsvhb1y] {
    width: 6px;
    height: 6px;
    border-radius: 99px;
}

.vc-tenant-dot--prod[b-zb7jsvhb1y]    { background: var(--color-danger); }
.vc-tenant-dot--test[b-zb7jsvhb1y]    { background: var(--color-info); }
.vc-tenant-dot--neutral[b-zb7jsvhb1y] { background: var(--color-text-soft); }

.vc-tenant-head__name[b-zb7jsvhb1y] {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-text);
    letter-spacing: -0.005em;
    text-align: center;
    line-height: 1.1;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- Stack separator row ---- */
.vc-matrix__stack-row td.vc-matrix__stack-cell[b-zb7jsvhb1y] {
    padding: 9px 14px;
    background: var(--color-surface-alt);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    font-size: 10.5px;
    font-weight: 700;
    color: var(--color-text);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    /* Stack-row spans the whole table — sticky-left fights with colspan, so
       drop sticky here and let the row scroll horizontally with the rest. */
    position: relative;
    z-index: 0;
}

.vc-matrix__stack-cell i[b-zb7jsvhb1y] {
    color: var(--color-brand);
    margin-right: 6px;
}

/* ---- Service rows ---- */
.vc-matrix tbody tr:not(.vc-matrix__stack-row):hover .vc-cell[b-zb7jsvhb1y] {
    filter: brightness(1.04);
}

.vc-matrix tbody tr:not(.vc-matrix__stack-row):hover .vc-matrix__service-cell[b-zb7jsvhb1y] {
    background: var(--color-surface-alt);
}

.vc-matrix__service-cell[b-zb7jsvhb1y] {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
    padding: 7px 14px;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--color-text);
    width: 260px;
    min-width: 260px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.vc-matrix__service-name[b-zb7jsvhb1y] {
    font-family: var(--font-mono);
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.vc-drift-dot[b-zb7jsvhb1y] {
    width: 5px;
    height: 5px;
    border-radius: 99px;
    background: var(--color-warning);
    flex-shrink: 0;
}

/* ---- Cells (tinted by tone) ---- */
.vc-cell[b-zb7jsvhb1y] {
    border-bottom: 1px solid var(--color-border);
    padding: 3px;
    text-align: center;
    /* Cells form most of the visual rhythm — keep them tight so a wide
       tenant set still fits. */
}

.vc-cell__version[b-zb7jsvhb1y] {
    display: inline-flex;
    padding: 3px 6px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 600;
    border-radius: 4px;
    letter-spacing: -0.02em;
}

.vc-cell__empty[b-zb7jsvhb1y] {
    color: var(--color-text-soft);
    font-family: var(--font-mono);
    font-size: 10.5px;
}

.vc-cell--success[b-zb7jsvhb1y] { background: var(--color-success-bg); }
.vc-cell--success .vc-cell__version[b-zb7jsvhb1y] { color: var(--color-success); }

.vc-cell--info[b-zb7jsvhb1y] { background: var(--color-info-bg); }
.vc-cell--info .vc-cell__version[b-zb7jsvhb1y] { color: var(--color-info); }

.vc-cell--warning[b-zb7jsvhb1y] { background: var(--color-warning-bg); }
.vc-cell--warning .vc-cell__version[b-zb7jsvhb1y] { color: var(--color-warning); }

.vc-cell--neutral[b-zb7jsvhb1y] { background: var(--color-bg); }
.vc-cell--neutral .vc-cell__version[b-zb7jsvhb1y] { color: var(--color-text-muted); }

/* ---- Pair view ---- */
.vc-pair[b-zb7jsvhb1y] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.vc-pair__selectors[b-zb7jsvhb1y] {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    padding: 14px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    flex-wrap: wrap;
}

.vc-pair__selector[b-zb7jsvhb1y] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 220px;
    min-width: 180px;
}

.vc-pair__label[b-zb7jsvhb1y] {
    font-size: 10.5px;
    color: var(--color-text-muted);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.vc-pair__select[b-zb7jsvhb1y] {
    padding: 7px 10px;
    font-size: 13px;
    border: 1px solid var(--color-border);
    border-radius: 7px;
    background: var(--color-surface);
    color: var(--color-text);
    outline: none;
    font-family: inherit;
    transition: border-color 0.12s, box-shadow 0.12s;
}

.vc-pair__select:focus[b-zb7jsvhb1y] {
    border-color: var(--color-brand);
    box-shadow: 0 0 0 3px rgba(91, 91, 230, 0.15);
}

.vc-pair__arrow[b-zb7jsvhb1y] {
    color: var(--color-text-soft);
    font-size: 14px;
    align-self: center;
    margin-bottom: 4px;
}

.vc-pair__summary[b-zb7jsvhb1y] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    align-self: center;
    flex-wrap: wrap;
}

.vc-pair__check[b-zb7jsvhb1y] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--color-text-muted);
    cursor: pointer;
    user-select: none;
}

.vc-pair__check input[b-zb7jsvhb1y] { accent-color: var(--color-brand); }

.vc-pair__chip[b-zb7jsvhb1y] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: var(--radius-pill);
    font-size: 11.5px;
    font-weight: 600;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
}

.vc-pair__chip--success[b-zb7jsvhb1y] {
    background: var(--color-success-bg);
    border-color: var(--color-success-border);
    color: var(--color-success);
}

.vc-pair__chip--warning[b-zb7jsvhb1y] {
    background: var(--color-warning-bg);
    border-color: var(--color-warning-border);
    color: var(--color-warning);
}

.vc-pair__table-wrap[b-zb7jsvhb1y] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    overflow: auto;
}

.vc-pair__table[b-zb7jsvhb1y] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12.5px;
}

.vc-pair__table thead th[b-zb7jsvhb1y] {
    padding: 10px 16px;
    background: var(--color-surface-alt);
    border-bottom: 1px solid var(--color-border);
    font-size: 10.5px;
    font-weight: 600;
    color: var(--color-text-muted);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: left;
}

.vc-pair__col-svc[b-zb7jsvhb1y] { width: 32%; }
.vc-pair__col-ver[b-zb7jsvhb1y] { width: 22%; }
.vc-pair__col-arrow[b-zb7jsvhb1y] { width: 50px; text-align: center; }
.vc-pair__col-actions[b-zb7jsvhb1y] { width: 110px; text-align: right; }

.vc-pair__table tbody td[b-zb7jsvhb1y] {
    padding: 9px 16px;
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
    color: var(--color-text);
}

.vc-pair__table tbody tr:last-child td[b-zb7jsvhb1y] { border-bottom: 0; }

/* Highlight rows where the two tenants disagree — subtle warning tint so the
   eye lands there first when scanning a long list. */
.vc-pair__row--diff td[b-zb7jsvhb1y] {
    background: color-mix(in srgb, var(--color-warning-bg) 55%, transparent);
}

.vc-pair__svc[b-zb7jsvhb1y] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.vc-pair__svc-stack[b-zb7jsvhb1y] {
    font-size: 10px;
    font-weight: 600;
    color: var(--color-text-soft);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.vc-pair__svc-name[b-zb7jsvhb1y] {
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 500;
}

.vc-pair__chip-ver[b-zb7jsvhb1y] {
    /* Reuse .vc-cell__version typography but give it a bordered chip look so
       it stands out against the pair-row background instead of fading in. */
    border: 1px solid var(--color-border);
    background: var(--color-surface-alt);
}

.vc-pair__chip-ver--success[b-zb7jsvhb1y] {
    background: var(--color-success-bg);
    border-color: var(--color-success-border);
    color: var(--color-success);
}

.vc-pair__chip-ver--warning[b-zb7jsvhb1y] {
    background: var(--color-warning-bg);
    border-color: var(--color-warning-border);
    color: var(--color-warning);
}

.vc-pair__arrow-cell[b-zb7jsvhb1y] {
    text-align: center;
    color: var(--color-text-soft);
}

.vc-pair__arrow-icon[b-zb7jsvhb1y] { color: var(--color-warning); }
.vc-pair__equals[b-zb7jsvhb1y] { color: var(--color-text-soft); font-weight: 700; }

.vc-pair__actions[b-zb7jsvhb1y] { text-align: right; }
/* /Components/Pages/StatCard.razor.rz.scp.css */
.stat-card[b-aafmskiwfe] {
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    padding: var(--sp-5) var(--sp-7);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
}

.stat-card__icon[b-aafmskiwfe] {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg);
    color: var(--color-text-muted);
    font-size: var(--fs-16);
    flex-shrink: 0;
}

.stat-card__value[b-aafmskiwfe] {
    font-size: var(--fs-24);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-text);
    line-height: 1.1;
}

.stat-card__label[b-aafmskiwfe] {
    font-size: var(--fs-12);
    color: var(--color-text-muted);
    font-weight: 500;
    margin-top: 2px;
}

.stat-card--prod .stat-card__icon[b-aafmskiwfe]    { background: var(--color-prod-bg);    color: var(--color-prod); }
.stat-card--test .stat-card__icon[b-aafmskiwfe]    { background: var(--color-test-bg);    color: var(--color-test); }
.stat-card--brand .stat-card__icon[b-aafmskiwfe]   { background: var(--color-brand-soft); color: var(--color-brand); }
.stat-card--success .stat-card__icon[b-aafmskiwfe] { background: var(--color-success-bg); color: var(--color-success); }
.stat-card--warning .stat-card__icon[b-aafmskiwfe] { background: var(--color-warning-bg); color: var(--color-warning); }
.stat-card--danger .stat-card__icon[b-aafmskiwfe]  { background: var(--color-danger-bg);  color: var(--color-danger); }
/* /Components/Pages/Tenants.razor.rz.scp.css */
.tenants-card[b-5nbj5rg1hy] {
    margin-bottom: var(--sp-7);
}

.tenants-card--muted[b-5nbj5rg1hy] {
    background: var(--color-surface-alt);
}

.tenants-card--muted .v-table tbody tr td[b-5nbj5rg1hy] {
    color: var(--color-text-muted);
}

/* ----- Search input ----- */
.tenants-search[b-5nbj5rg1hy] {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 0 var(--sp-5);
    height: 32px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    min-width: 320px;
    color: var(--color-text-muted);
}

.tenants-search:focus-within[b-5nbj5rg1hy] {
    border-color: var(--color-brand);
    box-shadow: 0 0 0 3px rgba(91, 91, 230, 0.15);
}

.tenants-search input[b-5nbj5rg1hy] {
    flex: 1;
    border: 0;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: var(--fs-13);
    color: var(--color-text);
}

.tenants-search input[b-5nbj5rg1hy]::placeholder { color: var(--color-text-soft); }

.tenants-search__clear[b-5nbj5rg1hy] {
    background: transparent;
    border: 0;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 0 var(--sp-1);
}

.tenants-search__hint[b-5nbj5rg1hy] {
    font-size: var(--fs-12);
    color: var(--color-text-muted);
}

/* ----- Loading ----- */
.tenants-loading[b-5nbj5rg1hy] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    padding: var(--sp-10);
    color: var(--color-text-muted);
    font-size: var(--fs-13);
}

/* ----- Cell details ----- */
.tenant-name[b-5nbj5rg1hy] {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.tenant-name__link[b-5nbj5rg1hy] {
    font-weight: 600;
    color: var(--color-text);
    text-decoration: none;
}

.tenant-name__link:hover[b-5nbj5rg1hy] {
    color: var(--color-brand);
    text-decoration: none;
}

.tenant-name__sub[b-5nbj5rg1hy] {
    font-size: 11px;
    color: var(--color-text-soft);
    font-family: var(--font-mono);
    margin-top: 2px;
}

.tenant-name--archived[b-5nbj5rg1hy] {
    color: var(--color-text-muted);
}

.tenant-repo[b-5nbj5rg1hy] {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--color-text-muted);
}

.tenant-status[b-5nbj5rg1hy] {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: 12.5px;
}

.tenant-branch[b-5nbj5rg1hy] {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--color-text-muted);
}

.tenant-docker[b-5nbj5rg1hy] {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: 12.5px;
}

.tenant-docker__label[b-5nbj5rg1hy] {
    color: var(--color-text);
}

.tenant-docker__recheck[b-5nbj5rg1hy] {
    background: transparent;
    border: 0;
    color: var(--color-text-soft);
    cursor: pointer;
    padding: 2px 4px;
    font-size: 11px;
}

.tenant-docker__recheck:hover[b-5nbj5rg1hy] { color: var(--color-brand); }

.tenant-relative[b-5nbj5rg1hy] {
    font-size: 12px;
    color: var(--color-text-muted);
}

.tenant-reason[b-5nbj5rg1hy] {
    font-size: 12.5px;
    max-width: 320px;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

/* ----- Archived section ----- */
.tenants-archive[b-5nbj5rg1hy] {
    margin-top: var(--sp-8);
}

.tenants-archive__toggle[b-5nbj5rg1hy] {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-5);
    background: transparent;
    border: 0;
    font-size: var(--fs-13);
    font-weight: 600;
    color: var(--color-text-muted);
    cursor: pointer;
    font-family: inherit;
    margin-bottom: var(--sp-3);
}

.tenants-archive__toggle:hover[b-5nbj5rg1hy] { color: var(--color-text); }
/* /Components/Shared/ApprovalTrackerDock.razor.rz.scp.css */
/* Onay takip paneli — sağ altta sabit dock.
   Tasarım kararları:
   - Sağ alt köşe: içeriği kapatmaz, göz oraya alışkın (bildirim/görev alanı).
   - Katlanabilir: uzun süren bir talep çalışırken ekranı meşgul etmesin, ama sayaç görünsün.
   - Durum rengi tek yerden (tone): bekliyor/hazır/çalışıyor/tamam/hata.
   - Değişen satır kısa süre nabız atar; kalıcı animasyon rahatsız eder. */

.atk[b-d090gt4qtb] {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 1080;              /* modal (1050) üstünde: onay gelince modal açıkken de görünür */
    width: 380px;
    max-width: calc(100vw - 36px);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    font-size: var(--fs-12);
}

.atk__head[b-d090gt4qtb] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 12px;
    background: var(--color-surface-alt);
    border: 0;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
    cursor: pointer;
    text-align: left;
}
.atk--collapsed .atk__head[b-d090gt4qtb] { border-bottom: 0; }
.atk__head:hover[b-d090gt4qtb] { background: var(--color-bg); }

.atk__head-left[b-d090gt4qtb] { display: flex; align-items: center; gap: 8px; min-width: 0; }
.atk__title[b-d090gt4qtb] { font-weight: 600; }
.atk__chev[b-d090gt4qtb] { color: var(--color-text-muted); font-size: var(--fs-10); }

.atk__count[b-d090gt4qtb] {
    min-width: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: var(--fs-10);
    text-align: center;
}
/* Aktif (bekleyen/çalışan) iş varsa sayaç marka rengine geçer — göz oraya gitsin. */
.atk__count--live[b-d090gt4qtb] {
    background: var(--color-brand);
    border-color: var(--color-brand);
    color: #fff;
    font-weight: 600;
}

.atk__body[b-d090gt4qtb] { max-height: min(52vh, 460px); overflow-y: auto; }

.atk__row[b-d090gt4qtb] {
    padding: 10px 12px;
    border-bottom: 1px solid var(--color-border);
    border-left: 3px solid transparent;
}
.atk__row:last-child[b-d090gt4qtb] { border-bottom: 0; }

.atk__row--wait[b-d090gt4qtb] { border-left-color: var(--color-warning); }
.atk__row--ready[b-d090gt4qtb] { border-left-color: var(--color-success); }
.atk__row--run[b-d090gt4qtb] { border-left-color: var(--color-brand); }
.atk__row--ok[b-d090gt4qtb] { border-left-color: var(--color-success); }
.atk__row--fail[b-d090gt4qtb] { border-left-color: var(--color-danger); }
.atk__row--dim[b-d090gt4qtb] { border-left-color: var(--color-border-strong, var(--color-border)); }

/* Durum değişince tek seferlik nabız — "bir şey oldu" sinyali. */
@keyframes atk-pulse-b-d090gt4qtb {
    0% { background: var(--color-brand-soft); }
    100% { background: transparent; }
}
.atk__row--pulse[b-d090gt4qtb] { animation: atk-pulse-b-d090gt4qtb 3.2s ease-out 1; }

.atk__row-top[b-d090gt4qtb] { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }

.atk__status[b-d090gt4qtb] { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; font-size: var(--fs-11); }
.atk__status--wait[b-d090gt4qtb] { color: var(--color-warning); }
.atk__status--ready[b-d090gt4qtb] { color: var(--color-success); }
.atk__status--run[b-d090gt4qtb] { color: var(--color-brand-text, var(--color-brand)); }
.atk__status--ok[b-d090gt4qtb] { color: var(--color-success); }
.atk__status--fail[b-d090gt4qtb] { color: var(--color-danger); }
.atk__status--dim[b-d090gt4qtb] { color: var(--color-text-muted); }

.atk__meta[b-d090gt4qtb] { font-size: var(--fs-10); color: var(--color-text); }
.atk__meta--dim[b-d090gt4qtb] { color: var(--color-text-muted); }

.atk__x[b-d090gt4qtb] {
    margin-left: auto;
    background: none; border: 0; padding: 2px 4px;
    color: var(--color-text-muted); cursor: pointer; border-radius: 4px; line-height: 1;
    font-size: var(--fs-10);
}
.atk__x:hover[b-d090gt4qtb] { color: var(--color-text); background: var(--color-bg); }

.atk__summary[b-d090gt4qtb] {
    font-family: var(--font-mono);
    font-size: var(--fs-11);
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
}

.atk__reason[b-d090gt4qtb] {
    margin-top: 4px;
    font-size: var(--fs-10);
    color: var(--color-danger);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
}

.atk__actions[b-d090gt4qtb] { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }

.atk__btn[b-d090gt4qtb] {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 9px; border-radius: 5px; cursor: pointer;
    font-size: var(--fs-11);
    background: var(--color-surface); color: var(--color-text);
    border: 1px solid var(--color-border);
}
.atk__btn:hover:not(:disabled)[b-d090gt4qtb] { border-color: var(--color-brand); color: var(--color-brand); }
.atk__btn:disabled[b-d090gt4qtb] { opacity: .55; cursor: not-allowed; }
.atk__btn--primary[b-d090gt4qtb] {
    background: var(--color-brand); border-color: var(--color-brand); color: #fff; font-weight: 600;
}
.atk__btn--primary:hover:not(:disabled)[b-d090gt4qtb] { filter: brightness(1.08); color: #fff; }
.atk__btn--ghost[b-d090gt4qtb] { background: transparent; color: var(--color-text-muted); }

.atk__spinner[b-d090gt4qtb] {
    width: 9px; height: 9px; display: inline-block; vertical-align: -1px;
    border: 2px solid var(--color-border-strong, var(--color-border));
    border-top-color: var(--color-brand);
    border-radius: 50%;
    animation: atk-spin-b-d090gt4qtb .8s linear infinite;
}
@keyframes atk-spin-b-d090gt4qtb { to { transform: rotate(360deg); } }

@media (max-width: 560px) {
    .atk[b-d090gt4qtb] { right: 10px; left: 10px; bottom: 10px; width: auto; }
}

/* İki bölüm: "onayımı bekleyenler" ve "taleplerim". Ayrı başlıklar olmadan onaycı
   kendi talebiyle başkasının talebini karıştırıyordu. */
.atk__section[b-d090gt4qtb] {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    font-size: var(--fs-10); font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: var(--color-text-muted);
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
}

.atk__requester[b-d090gt4qtb] {
    margin-top: 3px;
    font-size: var(--fs-10);
    color: var(--color-text-muted);
    display: flex; align-items: center; gap: 5px;
}

/* İki adımlı onay: köşedeki bir düğmeye yanlışlıkla basıp canlıya dokunan bir aksiyonu
   serbest bırakmak kabul edilebilir değil. */
.atk__confirm[b-d090gt4qtb] { font-size: var(--fs-11); color: var(--color-warning); align-self: center; }
/* /Components/Shared/CommitFileDiffEditor.razor.rz.scp.css */
/* Two layout modes:
   .is-fill — fills the parent's height. Used in the master-detail
     layout where the dialog is a CSS flex column and the diff
     pane is `flex: 1`. Monaco owns the scroll, no fight with a
     parent.
   .is-fixed — pixel height set inline from line count (legacy
     inline-card mode kept for any caller that still wants the
     long-vertical-page reading style). */

.commit-file-diff[b-scuj2qsn9q] {
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    overflow: hidden;
}
.commit-file-diff.is-fill[b-scuj2qsn9q] {
    height: 100%;
}

/* Monaco creates an inner container that needs height: 100% to fill
   the inline height our component owns. ::deep crosses the
   component-CSS-isolation boundary so the rule reaches Monaco's
   own DOM. */
[b-scuj2qsn9q] .monaco-editor-container,
[b-scuj2qsn9q] .monaco-diff-editor {
    height: 100%;
}
/* /Components/Shared/DeployDetailDialog.razor.rz.scp.css */
/* =========================================================
 * DeployDetailDialog — single-service deployment detail modal.
 * Decoupled from git commit detail; revert here goes through the
 * deploy-revert pipeline.
 * ========================================================= */

.ddd-backdrop[b-55ysd3rvpk] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1050;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 60px 24px;
    overflow-y: auto;
}

.ddd-card[b-55ysd3rvpk] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    width: 100%;
    /* Widened from 720 → 880 to give the inline ADO changelog
       (tabs + PR/work item lists) enough breathing room. */
    max-width: 880px;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.18);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    color: var(--color-text);
}

/* Inline ADO changelog block — sits between the metadata
   section and the action footer. Visual rhythm matches the
   "Notes" card so it doesn't look like a foreign widget. */
.ddd-changelog[b-55ysd3rvpk] {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 12px 14px 14px;
    background: var(--color-bg);
}

.ddd-changelog__head[b-55ysd3rvpk] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--color-text-muted);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

/* Header */
.ddd-header[b-55ysd3rvpk] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
}

.ddd-header__icon[b-55ysd3rvpk] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--color-brand) 14%, transparent);
    color: var(--color-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.ddd-header__title[b-55ysd3rvpk] {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text);
    letter-spacing: -0.01em;
}

.ddd-header__sub[b-55ysd3rvpk] {
    font-size: 13px;
    color: var(--color-text-muted);
    margin-top: 2px;
}

.ddd-close[b-55ysd3rvpk] {
    background: transparent;
    border: 0;
    color: var(--color-text-soft);
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
}
.ddd-close:hover[b-55ysd3rvpk] { background: var(--color-surface-alt); color: var(--color-text); }

/* 4-card row */
.ddd-cards[b-55ysd3rvpk] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
@media (min-width: 600px) {
    .ddd-cards[b-55ysd3rvpk] { grid-template-columns: repeat(4, 1fr); }
}

.ddd-card-cell[b-55ysd3rvpk] {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 10px 12px;
    background: var(--color-bg);
}

.ddd-card-cell__label[b-55ysd3rvpk] {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--color-text-muted);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.ddd-card-cell__value[b-55ysd3rvpk] {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ddd-status[b-55ysd3rvpk] {
    font-size: 12px;
    font-weight: 700;
}
.ddd-status--success[b-55ysd3rvpk] { color: var(--color-success); }
.ddd-status--danger[b-55ysd3rvpk]  { color: var(--color-danger); }
.ddd-status--warning[b-55ysd3rvpk] { color: var(--color-warning); }

/* Version line */
.ddd-version-row[b-55ysd3rvpk] {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 12px 14px;
    background: var(--color-bg);
    font-family: var(--font-mono);
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ddd-version-svc[b-55ysd3rvpk] {
    color: var(--color-text);
    font-weight: 600;
    margin-right: 8px;
}

.ddd-vfrom[b-55ysd3rvpk] {
    padding: 3px 8px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--color-danger) 14%, transparent);
    color: var(--color-danger);
    border: 1px solid color-mix(in srgb, var(--color-danger) 30%, transparent);
}
.ddd-vto[b-55ysd3rvpk] {
    padding: 3px 8px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--color-success) 14%, transparent);
    color: var(--color-success);
    border: 1px solid color-mix(in srgb, var(--color-success) 30%, transparent);
    font-weight: 600;
}
.ddd-vsep[b-55ysd3rvpk] {
    color: var(--color-text-soft);
    font-size: 10px;
}

.ddd-meta[b-55ysd3rvpk] {
    font-size: 12px;
    color: var(--color-text-muted);
}
.ddd-meta code[b-55ysd3rvpk] {
    font-family: var(--font-mono);
    background: var(--color-surface-alt);
    padding: 1px 6px;
    border-radius: 3px;
    color: var(--color-brand);
}

.ddd-notes[b-55ysd3rvpk] {
    font-size: 12.5px;
    color: var(--color-text);
    background: color-mix(in srgb, var(--color-info) 8%, transparent);
    border-left: 3px solid var(--color-info);
    padding: 8px 12px;
    border-radius: 4px;
}

.ddd-actions[b-55ysd3rvpk] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    border-top: 1px solid var(--color-border);
    padding-top: 16px;
    margin-top: 4px;
}
/* /Components/Shared/EnvVarsManagerDialog.razor.rz.scp.css */
/* Env Vars Manager — full-viewport two-pane modal.
   Uses position:fixed instead of Bootstrap's .modal because we need a
   wide, flexible-height layout that the standard modal-dialog
   max-width caps too aggressively. */

.evm-overlay[b-1u2u5e3bsx] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1055;
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 24px;
}

.evm-shell[b-1u2u5e3bsx] {
    background: var(--bs-body-bg, #1f2128);
    color: var(--bs-body-color, #e2e2e2);
    border-radius: 12px;
    width: min(1400px, 100%);
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.evm-head[b-1u2u5e3bsx] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
}
.evm-head__title[b-1u2u5e3bsx] { font-size: 1.05rem; font-weight: 600; }
.evm-head__tenant[b-1u2u5e3bsx] { font-size: 0.85rem; color: var(--bs-secondary-color, #9aa); }
.evm-head__spacer[b-1u2u5e3bsx] { flex: 1; }
.evm-head__close[b-1u2u5e3bsx] {
    background: transparent;
    border: 0;
    color: inherit;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 6px;
}
.evm-head__close:hover[b-1u2u5e3bsx] { background: rgba(255, 255, 255, 0.08); }

.evm-body[b-1u2u5e3bsx] {
    display: flex;
    flex: 1;
    min-height: 0; /* lets the panes scroll independently */
}

.evm-left[b-1u2u5e3bsx] {
    width: 320px;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.evm-left__search[b-1u2u5e3bsx] {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.evm-left__search input[b-1u2u5e3bsx] {
    width: 100%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: inherit;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.85rem;
}
.evm-left__tree[b-1u2u5e3bsx] {
    flex: 1;
    overflow-y: auto;
    padding: 6px 4px;
}
.evm-tree-group[b-1u2u5e3bsx] {
    padding: 4px 6px 8px;
}
.evm-tree-group__header[b-1u2u5e3bsx] {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bs-secondary-color, #aaa);
    padding: 4px 8px;
}
.evm-tree-node[b-1u2u5e3bsx] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.88rem;
    color: inherit;
    background: transparent;
    border: 0;
    width: 100%;
    text-align: left;
}
.evm-tree-node:hover[b-1u2u5e3bsx] { background: rgba(255, 255, 255, 0.06); }
.evm-tree-node.is-active[b-1u2u5e3bsx] { background: rgba(99, 132, 255, 0.18); color: #cfd8ff; }
.evm-tree-node__count[b-1u2u5e3bsx] { margin-left: auto; font-size: 0.72rem; opacity: 0.65; }
.evm-tree-node__dot[b-1u2u5e3bsx] {
    width: 7px; height: 7px; border-radius: 50%;
    background: #ffb84d;
    display: inline-block;
}
.evm-tree-stack-label[b-1u2u5e3bsx] { padding: 8px 12px 2px; font-size: 0.78rem; font-weight: 600; color: #cbd0d8; }

.evm-right[b-1u2u5e3bsx] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}
.evm-right__head[b-1u2u5e3bsx] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.evm-right__title[b-1u2u5e3bsx] { font-weight: 600; font-size: 0.95rem; }
.evm-right__sub[b-1u2u5e3bsx] { font-size: 0.78rem; color: var(--bs-secondary-color, #9aa); }
/* Whole right-side action group. margin-left: auto lives here (not on
   each button) so the cluster stays pinned to the right edge of the
   header regardless of how many buttons it contains — "Editing" stays
   put when the "Add Global Var" button appears/disappears. */
.evm-right__actions[b-1u2u5e3bsx] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

/* Per-node filter input. Lives at the left edge of the actions cluster
   in Table mode so big variable lists can be narrowed without leaving
   the right pane. Sized small enough not to crowd the lock toggle. */
.evm-right__filter[b-1u2u5e3bsx] {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: inherit;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.78rem;
    width: 220px;
    max-width: 100%;
}
.evm-right__filter:focus[b-1u2u5e3bsx] {
    outline: none;
    border-color: rgba(99, 132, 255, 0.45);
    background: rgba(255, 255, 255, 0.08);
}

.evm-editlock[b-1u2u5e3bsx] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: inherit;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.78rem;
    cursor: pointer;
}
.evm-editlock:hover[b-1u2u5e3bsx] { background: rgba(255, 255, 255, 0.08); }
.evm-editlock.is-on[b-1u2u5e3bsx] {
    background: rgba(98, 196, 98, 0.18);
    border-color: rgba(98, 196, 98, 0.45);
    color: #c9f0c9;
}

.evm-modetabs[b-1u2u5e3bsx] {
    display: inline-flex;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    padding: 2px;
    margin-left: 12px;
}
.evm-modetabs button[b-1u2u5e3bsx] {
    border: 0; background: transparent; color: inherit;
    padding: 4px 12px; font-size: 0.8rem; border-radius: 4px; cursor: pointer;
}
.evm-modetabs button.is-active[b-1u2u5e3bsx] { background: rgba(99, 132, 255, 0.4); color: #fff; }

.evm-right__body[b-1u2u5e3bsx] {
    flex: 1;
    overflow: auto;
    padding: 12px 16px;
}

.evm-save-bar[b-1u2u5e3bsx] {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 10px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
}
.evm-save-bar__diff[b-1u2u5e3bsx] {
    background: rgba(255, 184, 77, 0.18);
    color: #ffd791;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
}
.evm-save-bar__spacer[b-1u2u5e3bsx] { flex: 1; }

/* Table mode rows */
.evm-table[b-1u2u5e3bsx] { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.evm-table th[b-1u2u5e3bsx] {
    text-align: left;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #9aa;
    padding: 4px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.evm-table td[b-1u2u5e3bsx] {
    padding: 4px 8px;
    vertical-align: top;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.evm-table tr.is-modified td[b-1u2u5e3bsx] { background: rgba(255, 184, 77, 0.05); }
.evm-table tr.is-new td[b-1u2u5e3bsx]      { background: rgba(98, 196, 98, 0.07); }
.evm-table tr.is-deleted td[b-1u2u5e3bsx]  { background: rgba(255, 87, 87, 0.05); text-decoration: line-through; opacity: 0.6; }
.evm-table input[b-1u2u5e3bsx] {
    width: 100%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: inherit;
    padding: 3px 6px;
    border-radius: 4px;
    font-family: var(--bs-font-monospace, monospace);
    font-size: 0.82rem;
}
/* Readonly inputs get a subtler look so the user can tell at a glance
   that the table is in view-only mode. Still selectable / copyable. */
.evm-table input[readonly][b-1u2u5e3bsx] {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.04);
    cursor: default;
}
.evm-table input[readonly]:focus[b-1u2u5e3bsx] { outline: none; box-shadow: none; }
.evm-table__source-chip[b-1u2u5e3bsx] {
    font-size: 0.7rem;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(99, 132, 255, 0.2);
    color: #cfd8ff;
    cursor: pointer;
    border: 0;
}
.evm-table__source-literal[b-1u2u5e3bsx] {
    font-size: 0.7rem;
    color: var(--bs-secondary-color, #9aa);
}
.evm-table__resolved[b-1u2u5e3bsx] {
    font-size: 0.72rem;
    color: var(--bs-secondary-color, #9aa);
    font-family: var(--bs-font-monospace, monospace);
    padding-top: 2px;
}
.evm-table__resolved--masked[b-1u2u5e3bsx] { letter-spacing: 0.15em; }

/* Value cell with an inline eye toggle. Input takes the remaining
   width; the button stays a fixed icon-sized chip on the right. */
.evm-table__value-cell[b-1u2u5e3bsx] {
    display: flex;
    gap: 4px;
    align-items: center;
}
.evm-table__value-cell input[b-1u2u5e3bsx] { flex: 1; }
.evm-table__eye[b-1u2u5e3bsx] {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: inherit;
    border-radius: 4px;
    width: 30px;
    height: 28px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
    flex-shrink: 0;
}
.evm-table__eye:hover[b-1u2u5e3bsx] { opacity: 1; background: rgba(255, 255, 255, 0.08); }
.evm-row-actions[b-1u2u5e3bsx] { display: flex; gap: 4px; }
.evm-row-actions button[b-1u2u5e3bsx] {
    border: 0; background: transparent; color: inherit;
    padding: 2px 6px; cursor: pointer; border-radius: 4px; opacity: 0.6;
}
.evm-row-actions button:hover[b-1u2u5e3bsx] { opacity: 1; background: rgba(255, 255, 255, 0.06); }

.evm-raw-textarea[b-1u2u5e3bsx], .evm-json-textarea[b-1u2u5e3bsx] {
    width: 100%;
    min-height: 60vh;
    font-family: var(--bs-font-monospace, monospace);
    font-size: 0.85rem;
    background: rgba(0, 0, 0, 0.25);
    color: inherit;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 10px;
    resize: vertical;
}

/* Monaco editor host — Monaco needs an explicit height to render
   (it doesn't auto-grow to content). We give it a viewport-relative
   height that matches the textarea it replaced, and let
   AutomaticLayout=true handle width changes when the right pane
   resizes. The id selector targets the inner <div> Monaco creates. */
.evm-monaco-host[b-1u2u5e3bsx] {
    height: 60vh;
    min-height: 360px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    overflow: hidden;
}
[b-1u2u5e3bsx] .monaco-editor-container,
[b-1u2u5e3bsx] #evm-json-editor {
    height: 100%;
}

.evm-search-results[b-1u2u5e3bsx] {
    padding: 10px 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    max-height: 240px;
    overflow-y: auto;
    font-size: 0.78rem;
}
.evm-search-results__row[b-1u2u5e3bsx] {
    padding: 4px 6px;
    border-radius: 4px;
    cursor: pointer;
}
.evm-search-results__row:hover[b-1u2u5e3bsx] { background: rgba(255, 255, 255, 0.06); }
.evm-search-results__key[b-1u2u5e3bsx] { font-family: var(--bs-font-monospace, monospace); }
.evm-search-results__path[b-1u2u5e3bsx] { color: #9aa; font-size: 0.7rem; }

.evm-empty[b-1u2u5e3bsx] {
    text-align: center;
    color: var(--bs-secondary-color, #9aa);
    padding: 60px 20px;
    font-size: 0.9rem;
}


/* "Sizin" rozeti — kısıtlı kullanıcının kendi eklediği (sahip olduğu) secret satırı */
.evm-owned-badge[b-1u2u5e3bsx] {
    display: inline-flex; align-items: center; margin-left: 6px; padding: 1px 6px;
    font-size: 10px; border-radius: var(--radius-sm, 6px);
    background: var(--color-success-bg, #12301a); color: var(--color-success, #4ec77a);
    border: 1px solid var(--color-success-border, #1f5a33); white-space: nowrap;
}

/* ── Yeni değişken satırı ─────────────────────────────────────────────────────
   Eski hali: iki input + son kolonda %60 opaklıkta bir "+" ikonu. Kullanıcı yazıp
   devam ediyor, satır kaybolduğu için "eklendi" sanıyordu. Artık düğme ETİKETLİ ve
   anahtar yazıldığı an vurgulu; satır yazılırken çerçeveleniyor ve altında ne
   yapılması gerektiği yazıyor. */
.evm-newrow--pending > td[b-1u2u5e3bsx] {
    background: rgba(91, 91, 230, 0.07);
    box-shadow: inset 0 1px 0 rgba(91, 91, 230, 0.35);
}

.evm-addbtn[b-1u2u5e3bsx] {
    display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
    border: 1px solid rgba(255, 255, 255, 0.14); background: transparent; color: inherit;
    padding: 3px 9px; border-radius: 5px; cursor: pointer; font-size: 0.78rem; opacity: 0.55;
}
.evm-addbtn:disabled[b-1u2u5e3bsx] { cursor: not-allowed; }
/* Anahtar yazılır yazılmaz düğme "hazır" görünür — asıl aksiyonun burada olduğu belli olsun. */
.evm-addbtn--ready[b-1u2u5e3bsx] {
    opacity: 1; background: var(--color-brand, #5B5BE6); border-color: var(--color-brand, #5B5BE6);
    color: #fff; font-weight: 600;
}
.evm-addbtn--ready:hover[b-1u2u5e3bsx] { filter: brightness(1.08); }

.evm-newrow-hint > td[b-1u2u5e3bsx] {
    padding: 2px 8px 6px; font-size: 0.74rem; border-top: 0;
}
.evm-newrow-hint__ready[b-1u2u5e3bsx] { color: var(--color-brand-text, #B5B5FF); display: inline-flex; align-items: center; gap: 5px; }
.evm-newrow-hint__warn[b-1u2u5e3bsx] { color: #f0b429; display: inline-flex; align-items: center; gap: 5px; }

/* ── Key Vault düğümü ─────────────────────────────────────────────────────────
   Ayrı bir tablo: kaynağı dosya değil AKV, yazımlar anında gider. Üstteki not bu
   farkı söylüyor; env.sh/compose'daki "Save all" beklentisiyle karışmasın. */
.evm-akv__note[b-1u2u5e3bsx] {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 8px 10px; margin-bottom: 10px;
    font-size: 0.78rem; color: var(--color-text-muted, #9aa4b2);
    background: rgba(91, 91, 230, 0.08);
    border: 1px solid rgba(91, 91, 230, 0.25);
    border-radius: 6px;
}
.evm-akv__empty[b-1u2u5e3bsx] { padding: 14px 8px; color: var(--color-text-muted, #9aa4b2); font-size: 0.82rem; }
.evm-akv__confirm[b-1u2u5e3bsx] { font-size: 0.74rem; color: #f0b429; align-self: center; margin-right: 4px; }
.evm-akv__danger[b-1u2u5e3bsx] {
    border: 1px solid rgba(239, 68, 68, .5); background: rgba(239, 68, 68, .12);
    color: #f87171; border-radius: 4px; padding: 2px 7px; cursor: pointer; font-size: 0.74rem;
}
.evm-akv__danger:disabled[b-1u2u5e3bsx] { opacity: .55; cursor: not-allowed; }
/* "env.sh'ta da referans ver" onay kutusu — yeni sır satırının Kaynak hücresinde.
   Etiket dar hücrede sığsın diye küçük punto + tek satır. */
.evm-akv__link[b-1u2u5e3bsx] {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.72rem; color: var(--color-text-muted, #9aa4b2);
    cursor: pointer; white-space: nowrap; user-select: none;
}
.evm-akv__link input[type="checkbox"][b-1u2u5e3bsx] { cursor: pointer; accent-color: var(--color-brand, #5b5be6); }

/* "Key Vault'ta düzenle"den atlanan satır kısa süre işaretli kalsın. */
.evm-table tr.is-highlight > td[b-1u2u5e3bsx] { background: rgba(91, 91, 230, 0.12); }
/* /Components/Shared/HostMetricsPanel.razor.rz.scp.css */
/* Host metrics strip — compact single-row telemetry above the services stats.
   Uses the same design tokens as the rest of the portal (tokens.css). */

.hostmetrics[b-bl81wte8op] {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    margin-bottom: var(--sp-4);
    font-size: 0.8rem;
}

.hostmetrics--collapsed[b-bl81wte8op] {
    border-style: dashed;
    background: transparent;
}

.hostmetrics__reveal[b-bl81wte8op] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 12px;
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: 0.78rem;
    cursor: pointer;
    text-align: left;
}

.hostmetrics__reveal:hover[b-bl81wte8op] { color: var(--color-text); }

.hostmetrics__reveal-host[b-bl81wte8op] {
    font-family: var(--font-mono);
    opacity: 0.7;
}

.hostmetrics__strip[b-bl81wte8op] {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 8px 14px;
    flex-wrap: wrap;
}

.hostmetrics__id[b-bl81wte8op] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text);
    font-weight: 600;
    min-width: 0;
}

.hostmetrics__host[b-bl81wte8op] { font-family: var(--font-mono); font-size: 0.78rem; }

.hostmetrics__uptime[b-bl81wte8op] {
    color: var(--color-text-muted);
    font-weight: 400;
    font-size: 0.72rem;
    white-space: nowrap;
}

.hostmetrics__dot[b-bl81wte8op] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.hostmetrics__dot--ok[b-bl81wte8op]   { background: var(--color-success, #2fb344); box-shadow: 0 0 4px var(--color-success, #2fb344); }
.hostmetrics__dot--wait[b-bl81wte8op] { background: var(--color-warning, #d9a406); animation: hostmetrics-pulse-b-bl81wte8op 1.2s ease-in-out infinite; }
.hostmetrics__dot--err[b-bl81wte8op]  { background: var(--color-danger, #d64545); }

@keyframes hostmetrics-pulse-b-bl81wte8op {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.hostmetrics__loading[b-bl81wte8op] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text-muted);
}

.hostmetrics__error[b-bl81wte8op] {
    font-size: 0.7rem;
    color: var(--color-danger, #d64545);
    max-width: 480px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hostmetrics__cell[b-bl81wte8op] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.hostmetrics__label[b-bl81wte8op] {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
}

.hostmetrics__bar[b-bl81wte8op] {
    width: 64px;
    height: 6px;
    border-radius: 3px;
    background: var(--color-border);
    overflow: hidden;
    flex: 0 0 auto;
}

.hostmetrics__bar-fill[b-bl81wte8op] {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: var(--color-brand, #4f7cff);
    transition: width 0.5s ease;
}

.hostmetrics__bar-fill.is-warn[b-bl81wte8op]   { background: var(--color-warning, #d9a406); }
.hostmetrics__bar-fill.is-danger[b-bl81wte8op] { background: var(--color-danger, #d64545); }

.hostmetrics__value[b-bl81wte8op] {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: var(--color-text);
    white-space: nowrap;
}

.hostmetrics__value--net i[b-bl81wte8op] {
    font-size: 0.6rem;
    color: var(--color-text-muted);
    margin: 0 2px 0 6px;
}

.hostmetrics__value--net i:first-child[b-bl81wte8op] { margin-left: 0; }

.hostmetrics__spark[b-bl81wte8op] {
    width: 60px;
    height: 16px;
    color: var(--color-brand, #4f7cff);
    opacity: 0.8;
    flex: 0 0 auto;
}

.hostmetrics__actions[b-bl81wte8op] {
    margin-left: auto;
    display: inline-flex;
    gap: 6px;
}

.hostmetrics__btn[b-bl81wte8op] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-muted);
    font-size: 0.72rem;
    cursor: pointer;
}

.hostmetrics__btn:hover[b-bl81wte8op],
.hostmetrics__btn.is-active[b-bl81wte8op] {
    color: var(--color-text);
    border-color: var(--color-text-muted);
}

.hostmetrics__chev[b-bl81wte8op] { font-size: 0.6rem; }

.hostmetrics__detail[b-bl81wte8op] { border-top: 1px solid var(--color-border); padding: 8px 14px 12px; }

/* ── trend charts ─────────────────────────────────────────────────────────── */

.hostmetrics__charts[b-bl81wte8op] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin: 4px 0 14px;
}

.hostmetrics__chart[b-bl81wte8op] {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 8px 10px 6px;
    background: var(--color-surface-alt, transparent);
}

.hostmetrics__chart-head[b-bl81wte8op] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 4px;
}

.hostmetrics__chart-title[b-bl81wte8op] {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
}

.hostmetrics__chart-cur[b-bl81wte8op] {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: var(--color-text);
}

.hostmetrics__chart-rx[b-bl81wte8op] { color: var(--color-brand, #4f7cff); }
.hostmetrics__chart-tx[b-bl81wte8op] { color: var(--color-warning, #d9a406); margin-left: 6px; }

.hostmetrics__chart-svg[b-bl81wte8op] {
    display: block;
    width: 100%;
    height: 56px;
}

.hostmetrics__chart-line[b-bl81wte8op] {
    fill: none;
    stroke: var(--color-brand, #4f7cff);
    stroke-width: 1.4;
    vector-effect: non-scaling-stroke;
}

.hostmetrics__chart-line--rx[b-bl81wte8op] { stroke: var(--color-brand, #4f7cff); }
.hostmetrics__chart-line--tx[b-bl81wte8op] { stroke: var(--color-warning, #d9a406); }

.hostmetrics__chart-area[b-bl81wte8op] {
    fill: var(--color-brand, #4f7cff);
    opacity: 0.12;
    stroke: none;
}

.hostmetrics__chart-foot[b-bl81wte8op] {
    display: flex;
    justify-content: space-between;
    margin-top: 2px;
    font-size: 0.64rem;
    color: var(--color-text-muted);
}

.hostmetrics__detail-head[b-bl81wte8op] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 6px;
    color: var(--color-text);
    font-weight: 600;
    font-size: 0.76rem;
}

.hostmetrics__detail-sub[b-bl81wte8op] {
    color: var(--color-text-muted);
    font-weight: 400;
    font-size: 0.7rem;
}

.hostmetrics__proc-table[b-bl81wte8op] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.74rem;
}

.hostmetrics__proc-table th[b-bl81wte8op] {
    text-align: left;
    padding: 4px 10px 4px 0;
    color: var(--color-text-muted);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}

.hostmetrics__proc-sortable[b-bl81wte8op] { cursor: pointer; }
.hostmetrics__proc-sortable.is-active[b-bl81wte8op] { color: var(--color-text); }

.hostmetrics__proc-table td[b-bl81wte8op] {
    padding: 3px 10px 3px 0;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
    white-space: nowrap;
}

.hostmetrics__proc-table tbody tr:last-child td[b-bl81wte8op] { border-bottom: none; }

.hostmetrics__mono[b-bl81wte8op] { font-family: var(--font-mono); font-size: 0.72rem; }

.hostmetrics__hot[b-bl81wte8op] { color: var(--color-warning, #d9a406); font-weight: 700; }

.hostmetrics__cmd[b-bl81wte8op] {
    max-width: 420px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Process tablosu filtresi — başlığın hemen yanında, belirgin */
.hostmetrics__proc-filter[b-bl81wte8op] {
    width: 260px;
    padding: 3px 10px;
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--color-text);
    background: var(--color-bg, #fff);
    border: 1px solid var(--color-border-strong, var(--color-border, #c8c8c8));
    border-radius: var(--radius-sm);
    outline: none;
}

.hostmetrics__proc-filter[b-bl81wte8op]::placeholder { color: var(--color-text-muted); }

.hostmetrics__proc-filter:focus[b-bl81wte8op] {
    border-color: var(--color-primary, #4c8bf5);
    box-shadow: 0 0 0 2px rgba(76, 139, 245, 0.18);
}

/* Process → container/servis rozeti; "host" = container dışı process */
.hostmetrics__proc-ctr[b-bl81wte8op] {
    display: inline-block;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
    padding: 0 6px;
    border-radius: 8px;
    background: var(--color-primary-subtle, rgba(76, 139, 245, 0.12));
    color: var(--color-primary, #3567c4);
    font-size: 0.66rem;
    font-weight: 600;
}

.hostmetrics__proc-ctr--host[b-bl81wte8op] {
    background: var(--color-bg-subtle, rgba(0, 0, 0, 0.05));
    color: var(--color-text-muted);
    font-weight: 400;
}
/* /Components/Shared/K8sEnvEditorDialog.razor.rz.scp.css */
/* Env Vars Manager — full-viewport two-pane modal.
   Uses position:fixed instead of Bootstrap's .modal because we need a
   wide, flexible-height layout that the standard modal-dialog
   max-width caps too aggressively. */

.evm-overlay[b-80pt7ykjc5] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1055;
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 24px;
}

.evm-shell[b-80pt7ykjc5] {
    background: var(--bs-body-bg, #1f2128);
    color: var(--bs-body-color, #e2e2e2);
    border-radius: 12px;
    width: min(1400px, 100%);
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.evm-head[b-80pt7ykjc5] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
}
.evm-head__title[b-80pt7ykjc5] { font-size: 1.05rem; font-weight: 600; }
.evm-head__tenant[b-80pt7ykjc5] { font-size: 0.85rem; color: var(--bs-secondary-color, #9aa); }
.evm-head__spacer[b-80pt7ykjc5] { flex: 1; }
.evm-head__close[b-80pt7ykjc5] {
    background: transparent;
    border: 0;
    color: inherit;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 6px;
}
.evm-head__close:hover[b-80pt7ykjc5] { background: rgba(255, 255, 255, 0.08); }

.evm-body[b-80pt7ykjc5] {
    display: flex;
    flex: 1;
    min-height: 0; /* lets the panes scroll independently */
}

.evm-left[b-80pt7ykjc5] {
    width: 320px;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.evm-left__search[b-80pt7ykjc5] {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.evm-left__search input[b-80pt7ykjc5] {
    width: 100%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: inherit;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.85rem;
}
.evm-left__tree[b-80pt7ykjc5] {
    flex: 1;
    overflow-y: auto;
    padding: 6px 4px;
}
.evm-tree-group[b-80pt7ykjc5] {
    padding: 4px 6px 8px;
}
.evm-tree-group__header[b-80pt7ykjc5] {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bs-secondary-color, #aaa);
    padding: 4px 8px;
}
.evm-tree-node[b-80pt7ykjc5] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.88rem;
    color: inherit;
    background: transparent;
    border: 0;
    width: 100%;
    text-align: left;
}
.evm-tree-node:hover[b-80pt7ykjc5] { background: rgba(255, 255, 255, 0.06); }
.evm-tree-node.is-active[b-80pt7ykjc5] { background: rgba(99, 132, 255, 0.18); color: #cfd8ff; }
.evm-tree-node__count[b-80pt7ykjc5] { margin-left: auto; font-size: 0.72rem; opacity: 0.65; }
.evm-tree-node__dot[b-80pt7ykjc5] {
    width: 7px; height: 7px; border-radius: 50%;
    background: #ffb84d;
    display: inline-block;
}
.evm-tree-stack-label[b-80pt7ykjc5] { padding: 8px 12px 2px; font-size: 0.78rem; font-weight: 600; color: #cbd0d8; }

.evm-right[b-80pt7ykjc5] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}
.evm-right__head[b-80pt7ykjc5] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.evm-right__title[b-80pt7ykjc5] { font-weight: 600; font-size: 0.95rem; }
.evm-right__sub[b-80pt7ykjc5] { font-size: 0.78rem; color: var(--bs-secondary-color, #9aa); }
/* Whole right-side action group. margin-left: auto lives here (not on
   each button) so the cluster stays pinned to the right edge of the
   header regardless of how many buttons it contains — "Editing" stays
   put when the "Add Global Var" button appears/disappears. */
.evm-right__actions[b-80pt7ykjc5] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

/* Per-node filter input. Lives at the left edge of the actions cluster
   in Table mode so big variable lists can be narrowed without leaving
   the right pane. Sized small enough not to crowd the lock toggle. */
.evm-right__filter[b-80pt7ykjc5] {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: inherit;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.78rem;
    width: 220px;
    max-width: 100%;
}
.evm-right__filter:focus[b-80pt7ykjc5] {
    outline: none;
    border-color: rgba(99, 132, 255, 0.45);
    background: rgba(255, 255, 255, 0.08);
}

.evm-editlock[b-80pt7ykjc5] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: inherit;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.78rem;
    cursor: pointer;
}
.evm-editlock:hover[b-80pt7ykjc5] { background: rgba(255, 255, 255, 0.08); }
.evm-editlock.is-on[b-80pt7ykjc5] {
    background: rgba(98, 196, 98, 0.18);
    border-color: rgba(98, 196, 98, 0.45);
    color: #c9f0c9;
}

.evm-modetabs[b-80pt7ykjc5] {
    display: inline-flex;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    padding: 2px;
    margin-left: 12px;
}
.evm-modetabs button[b-80pt7ykjc5] {
    border: 0; background: transparent; color: inherit;
    padding: 4px 12px; font-size: 0.8rem; border-radius: 4px; cursor: pointer;
}
.evm-modetabs button.is-active[b-80pt7ykjc5] { background: rgba(99, 132, 255, 0.4); color: #fff; }

.evm-right__body[b-80pt7ykjc5] {
    flex: 1;
    overflow: auto;
    padding: 12px 16px;
}

.evm-save-bar[b-80pt7ykjc5] {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 10px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
}
.evm-save-bar__diff[b-80pt7ykjc5] {
    background: rgba(255, 184, 77, 0.18);
    color: #ffd791;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
}
.evm-save-bar__spacer[b-80pt7ykjc5] { flex: 1; }

/* Table mode rows */
.evm-table[b-80pt7ykjc5] { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.evm-table th[b-80pt7ykjc5] {
    text-align: left;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #9aa;
    padding: 4px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.evm-table td[b-80pt7ykjc5] {
    padding: 4px 8px;
    vertical-align: top;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.evm-table tr.is-modified td[b-80pt7ykjc5] { background: rgba(255, 184, 77, 0.05); }
.evm-table tr.is-new td[b-80pt7ykjc5]      { background: rgba(98, 196, 98, 0.07); }
.evm-table tr.is-deleted td[b-80pt7ykjc5]  { background: rgba(255, 87, 87, 0.05); text-decoration: line-through; opacity: 0.6; }
.evm-table input[b-80pt7ykjc5] {
    width: 100%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: inherit;
    padding: 3px 6px;
    border-radius: 4px;
    font-family: var(--bs-font-monospace, monospace);
    font-size: 0.82rem;
}
/* Readonly inputs get a subtler look so the user can tell at a glance
   that the table is in view-only mode. Still selectable / copyable. */
.evm-table input[readonly][b-80pt7ykjc5] {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.04);
    cursor: default;
}
.evm-table input[readonly]:focus[b-80pt7ykjc5] { outline: none; box-shadow: none; }
.evm-table__source-chip[b-80pt7ykjc5] {
    font-size: 0.7rem;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(99, 132, 255, 0.2);
    color: #cfd8ff;
    cursor: pointer;
    border: 0;
}
.evm-table__source-literal[b-80pt7ykjc5] {
    font-size: 0.7rem;
    color: var(--bs-secondary-color, #9aa);
}
.evm-table__resolved[b-80pt7ykjc5] {
    font-size: 0.72rem;
    color: var(--bs-secondary-color, #9aa);
    font-family: var(--bs-font-monospace, monospace);
    padding-top: 2px;
}
.evm-table__resolved--masked[b-80pt7ykjc5] { letter-spacing: 0.15em; }

/* Value cell with an inline eye toggle. Input takes the remaining
   width; the button stays a fixed icon-sized chip on the right. */
.evm-table__value-cell[b-80pt7ykjc5] {
    display: flex;
    gap: 4px;
    align-items: center;
}
.evm-table__value-cell input[b-80pt7ykjc5] { flex: 1; }
.evm-table__eye[b-80pt7ykjc5] {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: inherit;
    border-radius: 4px;
    width: 30px;
    height: 28px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
    flex-shrink: 0;
}
.evm-table__eye:hover[b-80pt7ykjc5] { opacity: 1; background: rgba(255, 255, 255, 0.08); }
.evm-row-actions[b-80pt7ykjc5] { display: flex; gap: 4px; }
.evm-row-actions button[b-80pt7ykjc5] {
    border: 0; background: transparent; color: inherit;
    padding: 2px 6px; cursor: pointer; border-radius: 4px; opacity: 0.6;
}
.evm-row-actions button:hover[b-80pt7ykjc5] { opacity: 1; background: rgba(255, 255, 255, 0.06); }

.evm-raw-textarea[b-80pt7ykjc5], .evm-json-textarea[b-80pt7ykjc5] {
    width: 100%;
    min-height: 60vh;
    font-family: var(--bs-font-monospace, monospace);
    font-size: 0.85rem;
    background: rgba(0, 0, 0, 0.25);
    color: inherit;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 10px;
    resize: vertical;
}

/* Monaco editor host — Monaco needs an explicit height to render
   (it doesn't auto-grow to content). We give it a viewport-relative
   height that matches the textarea it replaced, and let
   AutomaticLayout=true handle width changes when the right pane
   resizes. The id selector targets the inner <div> Monaco creates. */
.evm-monaco-host[b-80pt7ykjc5] {
    height: 60vh;
    min-height: 360px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    overflow: hidden;
}
[b-80pt7ykjc5] .monaco-editor-container,
[b-80pt7ykjc5] #evm-json-editor {
    height: 100%;
}

.evm-search-results[b-80pt7ykjc5] {
    padding: 10px 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    max-height: 240px;
    overflow-y: auto;
    font-size: 0.78rem;
}
.evm-search-results__row[b-80pt7ykjc5] {
    padding: 4px 6px;
    border-radius: 4px;
    cursor: pointer;
}
.evm-search-results__row:hover[b-80pt7ykjc5] { background: rgba(255, 255, 255, 0.06); }
.evm-search-results__key[b-80pt7ykjc5] { font-family: var(--bs-font-monospace, monospace); }
.evm-search-results__path[b-80pt7ykjc5] { color: #9aa; font-size: 0.7rem; }

.evm-empty[b-80pt7ykjc5] {
    text-align: center;
    color: var(--bs-secondary-color, #9aa);
    padding: 60px 20px;
    font-size: 0.9rem;
}


/* ---- K8s'e özgü ekler ---- */
.evm-src[b-80pt7ykjc5] { font-size: .62rem; padding: 1px 6px; border-radius: 999px; font-weight: 600; }
.evm-src--base[b-80pt7ykjc5]    { background: rgba(150,150,150,.25); color: #d7d7d7; }
.evm-src--config[b-80pt7ykjc5]  { background: rgba(45,180,220,.22); color: #a9e6f5; }
.evm-src--secret[b-80pt7ykjc5]  { background: rgba(220,70,70,.22); color: #f4b4b4; }
.evm-src--field[b-80pt7ykjc5]   { background: rgba(255,255,255,.08); color: #b9c0cc; }
.evm-src--override[b-80pt7ykjc5]{ background: rgba(255,184,77,.22); color: #ffd791; }
.evm-refkey[b-80pt7ykjc5] { font-size: .6rem; color: #8a92a0; font-family: var(--bs-font-monospace, monospace); }
.evm-badge-gitops[b-80pt7ykjc5] { font-size:.58rem; letter-spacing:.05em; background:rgba(99,132,255,.25); color:#cfd8ff; padding:2px 6px; border-radius:6px; vertical-align:middle; }
.evm-inherited-toggle[b-80pt7ykjc5] { border:0; background:transparent; color:#9aa; cursor:pointer; font-size:.8rem; padding:6px 2px; }
.evm-inherited-toggle:hover[b-80pt7ykjc5] { color:#cfd8ff; }

/* Secret değerleri görme yetkisi yokken (PO/Dev + prod) toolbar rozeti */
.evm-secret-locked[b-80pt7ykjc5] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 8px;
    padding: 2px 8px;
    font-size: 11px;
    border-radius: var(--radius-sm, 6px);
    background: var(--color-warning-bg, #3a2f10);
    color: var(--color-warning, #e0a83e);
    border: 1px solid var(--color-warning-border, #6b551a);
    white-space: nowrap;
}

/* "Sizin" rozeti — kısıtlı kullanıcının kendi eklediği (sahip olduğu) secret satırı */
.evm-owned-badge[b-80pt7ykjc5] {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    padding: 1px 6px;
    font-size: 10px;
    border-radius: var(--radius-sm, 6px);
    background: var(--color-success-bg, #12301a);
    color: var(--color-success, #4ec77a);
    border: 1px solid var(--color-success-border, #1f5a33);
    white-space: nowrap;
}
/* /Components/Shared/NewEnvShVarInline.razor.rz.scp.css */
/* Co-located scoped CSS for NewEnvShVarInline.razor. Lives next to
   the .razor so the styles ship wherever the component is dropped in
   (Env Vars Manager + Service Config dialog right now). */

.evm-new-envsh[b-o81fkn8091] {
    background: rgba(98, 196, 98, 0.08);
    border: 1px dashed rgba(98, 196, 98, 0.35);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 12px;
}
.evm-new-envsh__head[b-o81fkn8091] {
    font-size: 0.85rem;
    margin-bottom: 6px;
}
.evm-new-envsh__row[b-o81fkn8091] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.evm-new-envsh__row input[b-o81fkn8091] {
    max-width: 280px;
    font-family: var(--bs-font-monospace, monospace);
}
.evm-new-envsh__error[b-o81fkn8091] {
    color: #f08c8c;
    font-size: 0.78rem;
    margin-top: 6px;
}