/*
 * OptionsGEX System Console V1
 * Presentation + read-only backup health.
 */

.ogex-system-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin:0 0 14px;
  padding:7px;
  border:1px solid #274758;
  border-radius:11px;
  background:#081821;
}

.ogex-system-tabs button{
  min-height:40px;
  padding:8px 13px;
  border:1px solid transparent;
  border-radius:8px;
  background:#0d202b;
  color:#91abba;
  font-size:11px;
  font-weight:800;
  cursor:pointer;
}

.ogex-system-tabs button.active{
  border-color:#3c84a8;
  background:#12354a;
  color:#effaff;
}

.ogex-system-settings-grid{
  display:grid;
  grid-template-columns:
    repeat(2,minmax(0,1fr));
  gap:12px;
  margin:14px 0;
}

.ogex-system-settings-block{
  display:grid;
  gap:10px;
  padding:14px;
  border:1px solid #294b5d;
  border-radius:11px;
  background:#091a24;
}

.ogex-system-settings-block header{
  display:grid;
  gap:3px;
  margin-bottom:3px;
}

.ogex-system-settings-block header small{
  color:#77c9f3;
  font-size:10px;
  font-weight:850;
  letter-spacing:.1em;
}

.ogex-system-settings-block header strong{
  color:#e8f5fc;
  font-size:15px;
}

.ogex-system-settings-block label{
  display:grid;
  gap:6px;
  color:#8facbc;
  font-size:11px;
  font-weight:700;
}

.ogex-system-settings-block input,
.ogex-system-settings-block select{
  width:100%;
  box-sizing:border-box;
}

.ogex-system-settings-note{
  margin:12px 0;
  padding:11px 13px;
  border-left:3px solid #43aede;
  border-radius:7px;
  background:#0b202c;
  color:#9db7c6;
  font-size:11px;
  line-height:1.5;
}

.ogex-system-page-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:14px;
  padding:15px 16px;
  border:1px solid #284b5e;
  border-radius:12px;
  background:#081b25;
}

.ogex-system-page-head small{
  color:#65c2ef;
  font-size:10px;
  font-weight:850;
  letter-spacing:.12em;
}

.ogex-system-page-head h2{
  margin:3px 0 4px;
  color:#edf9ff;
}

.ogex-system-page-head p{
  margin:0;
  color:#91abba;
  font-size:11px;
  line-height:1.5;
}

.ogex-system-page-head button{
  min-height:42px;
  flex:0 0 auto;
}

.ogex-system-kpis{
  display:grid;
  grid-template-columns:
    repeat(4,minmax(0,1fr));
  gap:10px;
  margin-bottom:12px;
}

.ogex-system-kpis article{
  display:grid;
  gap:5px;
  min-width:0;
  padding:13px;
  border:1px solid #294a5c;
  border-radius:10px;
  background:#091b25;
}

.ogex-system-kpis small{
  color:#7899aa;
  font-size:9px;
  font-weight:850;
  letter-spacing:.08em;
}

.ogex-system-kpis strong{
  overflow:hidden;
  color:#e9f6fc;
  font-size:15px;
  text-overflow:ellipsis;
}

.ogex-system-kpis strong.good{
  color:#39dc97;
}

.ogex-system-kpis strong.warn{
  color:#f2bb55;
}

.ogex-system-kpis strong.bad{
  color:#ff6a7c;
}

.ogex-system-grid{
  display:grid;
  grid-template-columns:
    repeat(2,minmax(0,1fr));
  gap:12px;
}

.ogex-system-detail{
  display:grid;
  gap:7px;
}

.ogex-system-row{
  display:grid;
  grid-template-columns:
    minmax(0,1fr)
    auto;
  align-items:center;
  gap:12px;
  min-height:35px;
  padding:7px 9px;
  border:1px solid rgba(55,88,106,.55);
  border-radius:7px;
  background:#081923;
}

.ogex-system-row > span{
  color:#86a4b5;
  font-size:11px;
}

.ogex-system-row > strong{
  color:#e2f1f8;
  font-size:11px;
  text-align:right;
}

.ogex-system-row code{
  color:#b9deef;
  font-size:10px;
}

.ogex-system-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:23px;
  padding:3px 7px;
  border:1px solid;
  border-radius:999px;
  font-size:9px;
  font-weight:900;
  letter-spacing:.05em;
}

.ogex-system-badge.good{
  border-color:#247a59;
  background:rgba(28,105,75,.22);
  color:#52e6a7;
}

.ogex-system-badge.bad{
  border-color:#8a4050;
  background:rgba(116,39,53,.22);
  color:#ff8290;
}

.ogex-system-badge.warn{
  border-color:#846a31;
  background:rgba(110,82,22,.22);
  color:#f3c765;
}

.ogex-system-recovery-lock{
  display:grid;
  gap:8px;
  padding:14px;
  border:1px solid #635629;
  border-radius:9px;
  background:rgba(77,60,16,.18);
}

.ogex-system-recovery-lock strong{
  color:#f0c95f;
  font-size:12px;
}

.ogex-system-recovery-lock span{
  color:#a9b7bc;
  font-size:11px;
  line-height:1.45;
}

.ogex-system-excluded{
  padding:8px 10px;
  border:1px solid #2a4a5a;
  border-radius:7px;
  background:#081923;
  color:#a5c1cf;
  font-family:monospace;
  font-size:10px;
  overflow-wrap:anywhere;
}

.ogex-system-muted{
  color:#8199a6;
  font-size:11px;
}

.ogex-system-raw{
  max-height:300px;
  overflow:auto;
  margin-top:12px;
  padding:12px;
  border:1px solid #29495a;
  border-radius:9px;
  background:#06151d;
  color:#8fb1c1;
  font-size:10px;
}

@media(max-width:900px){

  .ogex-system-settings-grid,
  .ogex-system-grid{
    grid-template-columns:1fr;
  }

  .ogex-system-kpis{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .ogex-system-page-head{
    align-items:flex-start;
    flex-direction:column;
  }

  .ogex-system-page-head button{
    width:100%;
  }
}

@media(max-width:520px){

  .ogex-system-kpis{
    grid-template-columns:1fr;
  }

  .ogex-system-row{
    grid-template-columns:1fr;
    gap:4px;
  }

  .ogex-system-row > strong{
    text-align:left;
  }

  .ogex-system-tabs{
    display:grid;
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }
}