/* RA Factory UI Standard v1
   Эталон: Connection Vault / аккуратный фабричный dark UI.
   Не трогает URL, токены и названия сервисов.
*/

:root{
  --ra-bg:#0d0f14;
  --ra-bg-deep:#080a0f;
  --ra-panel:#13161e;
  --ra-panel-soft:#171b25;
  --ra-line:rgba(255,255,255,.07);
  --ra-line-strong:rgba(107,127,215,.30);
  --ra-text:#e8eaf0;
  --ra-muted:#8892a4;
  --ra-dim:rgba(136,146,164,.55);
  --ra-blue:#6b7fd7;
  --ra-green:#4dbf9f;
  --ra-teal:#5bbfb5;
  --ra-yellow:#d4a843;
  --ra-radius:9px;
  --ra-radius-card:12px;
  --ra-font:Inter,sans-serif;
  --ra-mono:"JetBrains Mono",monospace;
}

html,
body{
  background:var(--ra-bg)!important;
  color:var(--ra-text)!important;
  font-family:var(--ra-font)!important;
  font-size:16px!important;
  font-weight:400!important;
  line-height:normal!important;
  letter-spacing:normal!important;
}

*{
  box-sizing:border-box;
}

button,
input,
select,
textarea{
  font-family:system-ui!important;
}

input,
select,
textarea{
  background:rgba(255,255,255,.04)!important;
  border:1px solid var(--ra-line)!important;
  border-radius:7px!important;
  color:var(--ra-text)!important;
  font-size:11px!important;
  font-weight:400!important;
  padding:6px 10px!important;
}

button,
.btn,
a.btn{
  min-height:29px!important;
  border-radius:7px!important;
  font-size:12px!important;
  font-weight:600!important;
  padding:6px 14px!important;
  border:1px solid rgba(107,127,215,.25)!important;
  background:rgba(107,127,215,.12)!important;
  color:var(--ra-blue)!important;
  text-decoration:none!important;
}

.app{
  background:var(--ra-bg)!important;
}

.sidebar{
  background:#13161e!important;
  border-right:1px solid var(--ra-line)!important;
  color:var(--ra-text)!important;
}

.brand-title{
  color:var(--ra-text)!important;
  font-family:var(--ra-font)!important;
  font-size:16px!important;
  font-weight:700!important;
  letter-spacing:.14em!important;
}

.brand-subtitle{
  color:var(--ra-muted)!important;
  font-family:var(--ra-font)!important;
  font-size:10px!important;
  font-weight:400!important;
  letter-spacing:.22em!important;
}

.nav-section{
  color:var(--ra-muted)!important;
  font-size:9px!important;
  font-weight:400!important;
  letter-spacing:1.35px!important;
  padding:16px 16px 4px!important;
}

.nav-item{
  min-height:38px!important;
  height:38px!important;
  padding:9px 16px!important;
  gap:10px!important;
  color:var(--ra-muted)!important;
  font-size:13px!important;
  font-weight:400!important;
  line-height:normal!important;
  background:transparent!important;
  border-left:3px solid transparent!important;
  text-decoration:none!important;
}

.nav-item.active{
  color:var(--ra-blue)!important;
  background:rgba(107,127,215,.10)!important;
  border-left-color:var(--ra-blue)!important;
}

.nav-icon{
  width:18px!important;
  color:inherit!important;
  font-size:15px!important;
  line-height:normal!important;
}

.nav-badge{
  min-width:16px!important;
  height:14px!important;
  padding:1px 6px!important;
  border-radius:10px!important;
  background:var(--ra-blue)!important;
  color:#fff!important;
  font-size:10px!important;
  font-weight:400!important;
  line-height:12px!important;
}

.profile{
  min-height:81px!important;
  padding:19px 16px!important;
  border-top:1px solid var(--ra-line)!important;
  color:var(--ra-text)!important;
}

.profile-name{
  font-size:13px!important;
  font-weight:600!important;
  color:var(--ra-text)!important;
}

.profile-role{
  font-size:11px!important;
  font-weight:400!important;
  color:var(--ra-yellow)!important;
}

.topbar{
  min-height:56px!important;
  height:56px!important;
  background:#13161e!important;
  border-bottom:1px solid var(--ra-line)!important;
  padding:0 28px!important;
}

.title{
  font-size:18px!important;
  font-weight:700!important;
  color:var(--ra-text)!important;
  letter-spacing:normal!important;
  line-height:normal!important;
}

.subtitle{
  font-size:13px!important;
  font-weight:400!important;
  color:var(--ra-muted)!important;
}

.stat-card,
.card,
.service-card,
.detail,
.detail-panel,
.server-card,
.info-row,
.desc-box{
  background:var(--ra-panel)!important;
  border:1px solid var(--ra-line)!important;
  border-radius:var(--ra-radius-card)!important;
  color:var(--ra-text)!important;
}

.stat-card{
  min-height:104px!important;
  padding:18px 20px!important;
}

.service-card{
  min-height:86px!important;
  padding:14px 16px!important;
  margin-bottom:10px!important;
  gap:14px!important;
}

.service-card.active{
  background:rgba(107,127,215,.07)!important;
  border-color:rgba(107,127,215,.55)!important;
}

.service-card h3,
.service-card strong,
.detail-title,
.server-card h3,
.card h3{
  color:var(--ra-text)!important;
  font-size:13px!important;
  font-weight:600!important;
  line-height:1.25!important;
  letter-spacing:normal!important;
}

.service-card p,
.info-key,
.desc-text,
.card p,
.server-card p{
  color:var(--ra-muted)!important;
  font-size:11px!important;
  font-weight:400!important;
  line-height:1.45!important;
}

.good,
.stat-good,
.online{
  color:var(--ra-green)!important;
}

.warn,
.stat-warn{
  color:var(--ra-yellow)!important;
}

.badge,
.chip,
.tag,
.pill{
  border-radius:20px!important;
  font-size:10px!important;
  font-weight:600!important;
  padding:4px 9px!important;
}

code,
.mono,
.path,
.cell-value code{
  font-family:var(--ra-mono)!important;
  font-size:11px!important;
}

/* Standalone /factory-construction/ preview */
body:has(.service-list) {
  overflow:hidden!important;
}

body:has(.service-list) .app{
  grid-template-columns:220px 1fr!important;
}

body:has(.service-list) .sidebar{
  width:220px!important;
}

body:has(.service-list) .brand{
  height:147px!important;
  padding:18px 20px 14px!important;
}

body:has(.service-list) .logo{
  width:48px!important;
  height:48px!important;
  border-radius:12px!important;
  margin-bottom:14px!important;
}

body:has(.service-list) .main{
  overflow:hidden!important;
  height:100vh!important;
}

body:has(.service-list) .stats{
  padding:28px 28px 18px!important;
  margin:0!important;
  gap:16px!important;
}

body:has(.service-list) .workarea{
  margin:0 28px 0!important;
  height:calc(100vh - 228px)!important;
  overflow:hidden!important;
  border-radius:12px!important;
  border:1px solid var(--ra-line)!important;
  background:rgba(0,0,0,.10)!important;
}

body:has(.service-list) .service-list{
  height:100%!important;
  overflow-y:auto!important;
  padding:74px 22px 22px!important;
  scrollbar-width:thin;
  scrollbar-color:rgba(136,146,164,.35) transparent;
}

body:has(.service-list) .service-list::-webkit-scrollbar,
body:has(.service-list) .detail::-webkit-scrollbar{
  width:8px;
}

body:has(.service-list) .service-list::-webkit-scrollbar-thumb,
body:has(.service-list) .detail::-webkit-scrollbar-thumb{
  background:rgba(136,146,164,.35);
  border-radius:999px;
}

body:has(.service-list) .section-title{
  position:absolute!important;
  top:22px!important;
  left:22px!important;
  right:22px!important;
  z-index:5!important;
  padding:0 0 16px!important;
  background:linear-gradient(180deg,var(--ra-bg) 0%,rgba(13,15,20,.92) 70%,rgba(13,15,20,0) 100%)!important;
  color:var(--ra-muted)!important;
  font-size:10px!important;
  font-weight:600!important;
  letter-spacing:.28em!important;
  text-transform:uppercase!important;
}

body:has(.service-list) .detail{
  height:100%!important;
  overflow-y:auto!important;
  padding:24px!important;
  border-radius:0!important;
  border:0!important;
  border-left:1px solid var(--ra-line)!important;
  background:transparent!important;
}

body:has(.service-list) .detail-head{
  min-height:92px!important;
  margin-bottom:16px!important;
}

body:has(.service-list) .detail-title{
  font-size:16px!important;
  font-weight:700!important;
  line-height:1.25!important;
}

body:has(.service-list) .info-row{
  min-height:54px!important;
  padding:12px 14px!important;
  margin-bottom:8px!important;
}

body:has(.service-list) .info-value{
  font-size:12px!important;
  font-weight:400!important;
  line-height:1.35!important;
}

body:has(.service-list) .info-value code,
body:has(.service-list) .path-value{
  display:inline-block!important;
  max-width:260px!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  vertical-align:bottom!important;
}


/* RA_SERVICE_CARD_SELECT_FIX_START */
.service-card {
  cursor: pointer !important;
  pointer-events: auto !important;
  user-select: none;
}

.service-card * {
  pointer-events: none;
}

.service-card button,
.service-card a,
.service-card input {
  pointer-events: auto;
}

.service-list,
.services-list,
.list-panel,
.workarea > :first-child {
  position: relative;
  z-index: 5;
}

.detail,
.detail-panel,
.workarea > :last-child {
  position: relative;
  z-index: 3;
}
/* RA_SERVICE_CARD_SELECT_FIX_END */