/* [project]/src/app/globals.css [app-client] (css) */
* {
  box-sizing: border-box;
}

html, body {
  color: #eaf3ff;
  background: #07111f;
  min-height: 100%;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

body {
  overflow-x: hidden;
}

button {
  font: inherit;
}

.app {
  background: radial-gradient(circle at 40% 0, #007eff14, #0000 35%), #07111f;
  min-height: 100vh;
  display: flex;
}

.sidebar {
  background: linear-gradient(#091a2e, #081626);
  border-right: 1px solid #142941;
  flex: 0 0 150px;
  width: 150px;
  min-height: 100vh;
  padding: 18px 8px;
}

.logo {
  align-items: center;
  gap: 8px;
  padding: 0 10px 24px;
  display: flex;
}

.logo-mark {
  background: #eb2536;
  border-radius: 50%;
  place-items: center;
  width: 35px;
  height: 35px;
  font-size: 22px;
  display: grid;
}

.logo strong {
  font-size: 18px;
  display: block;
}

.logo small {
  color: #9fb1c8;
  font-size: 8px;
}

.sidebar nav {
  flex-direction: column;
  gap: 6px;
  display: flex;
}

.sidebar a {
  color: #aabbd0;
  cursor: pointer;
  border-radius: 5px;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 12px;
  font-size: 12px;
  display: flex;
}

.sidebar a.active {
  color: #fff;
  background: linear-gradient(90deg, #087cff, #0866d7);
  box-shadow: 0 5px 18px #0077ff40;
}

.sidebar a b {
  color: #fff;
  background: #ed4650;
  border-radius: 20px;
  margin-left: auto;
  padding: 3px 6px;
  font-size: 9px;
}

.content {
  width: calc(100% - 150px);
  padding: 0 12px 20px;
}

.topbar {
  border-bottom: 1px solid #132b45;
  justify-content: space-between;
  align-items: center;
  min-height: 62px;
  display: flex;
}

.topbar h1 {
  margin: 0;
  font-size: 20px;
}

.topbar p {
  color: #9eb0c6;
  margin: 3px 0 0;
  font-size: 12px;
}

.header-info {
  align-items: stretch;
  gap: 8px;
  display: flex;
}

.header-info > div {
  background: #0a1b2e;
  border: 1px solid #173452;
  border-radius: 6px;
  min-width: 90px;
  padding: 7px 12px;
}

.header-info small, .header-info strong {
  display: block;
}

.header-info small {
  color: #8095ae;
  font-size: 9px;
}

.header-info strong {
  margin-top: 4px;
  font-size: 11px;
}

.header-info .online {
  color: #36e788;
  background: #073326;
  border-color: #0c6545;
  place-items: center;
  min-width: 78px;
  display: grid;
}

.stats {
  grid-template-columns: repeat(6, minmax(140px, 1fr));
  gap: 9px;
  padding: 10px 0;
  display: grid;
}

.stat-card {
  background: linear-gradient(135deg, #0c2036, #0a1828);
  border: 1px solid #163653;
  border-radius: 8px;
  align-items: center;
  gap: 10px;
  min-height: 92px;
  padding: 12px;
  display: flex;
}

.stat-card.danger {
  background: linear-gradient(135deg, #30171b, #151a27);
  border-color: #5d282d;
}

.stat-icon {
  background: #24384f;
  border-radius: 50%;
  flex: 0 0 38px;
  place-items: center;
  width: 38px;
  height: 38px;
  font-size: 19px;
  display: grid;
}

.green-bg {
  background: #0b613a;
}

.blue-bg {
  background: #0756a4;
}

.red-bg {
  background: #8d3036;
}

.stat-card small {
  color: #b8c6d8;
  font-size: 10px;
}

.stat-card h2 {
  margin: 3px 0;
  font-size: 19px;
}

.stat-card p {
  color: #91a3b8;
  margin: 0;
  font-size: 9px;
}

.green {
  color: #28e681 !important;
}

.red {
  color: #ff6c72 !important;
}

.panel {
  background: linear-gradient(#0b1d31, #091827);
  border: 1px solid #15334f;
  border-radius: 8px;
  padding: 10px;
}

.panel-title {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  display: flex;
}

.panel-title h3 {
  margin: 0;
  font-size: 13px;
}

.panel-title span {
  color: #8da3bc;
  font-size: 9px;
}

.pon-grid {
  grid-template-columns: repeat(8, minmax(105px, 1fr));
  gap: 7px;
  display: grid;
}

.pon-card {
  background: #0a1929;
  border: 1px solid #183653;
  border-radius: 6px;
  min-width: 0;
  padding: 9px;
}

.pon-head {
  justify-content: space-between;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  display: flex;
}

.badge-online {
  color: #35e887;
  font-size: 8px;
}

.badge-idle {
  color: #73879c;
  font-size: 8px;
}

.pon-data {
  margin-top: 9px;
}

.pon-data p {
  color: #c2cede;
  margin: 6px 0;
  font-size: 9px;
}

.download {
  color: #34a7ff !important;
}

.upload {
  color: #ff961a !important;
}

.mini-chart {
  width: 100%;
  height: 32px;
  margin-top: 5px;
}

.charts-row {
  grid-template-columns: 1.6fr .8fr;
  gap: 9px;
  margin-top: 9px;
  display: grid;
}

.chart-panel {
  min-height: 250px;
}

.big-chart {
  background: linear-gradient(#1f3d5859 1px, #0000 1px) 0 0 / 100% 40px, linear-gradient(90deg, #1f3d5859 1px, #0000 1px) 0 0 / 70px 100%;
  height: 205px;
  position: relative;
  overflow: hidden;
}

.big-chart svg {
  width: 100%;
  height: calc(100% - 20px);
  position: absolute;
  inset: 10px 0;
}

.bars {
  justify-content: space-around;
  align-items: flex-end;
  height: 200px;
  padding-top: 20px;
  display: flex;
}

.bar-item {
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 5px;
  width: 11%;
  height: 180px;
  display: flex;
}

.bar-item span {
  color: #bccade;
  font-size: 8px;
}

.bar {
  background: linear-gradient(#42ed7c, #0cac58);
  border-radius: 3px 3px 0 0;
  width: 23px;
  max-height: 130px;
  box-shadow: 0 0 12px #2fe6731f;
}

.bar-item small {
  color: #91a4bb;
  font-size: 8px;
}

.bottom-row {
  grid-template-columns: 1.5fr .9fr;
  gap: 9px;
  margin-top: 9px;
  display: grid;
}

.table-panel {
  min-height: 205px;
}

table {
  border-collapse: collapse;
  width: 100%;
  font-size: 9px;
}

th {
  text-align: left;
  color: #8399b1;
  background: #0d2339;
  padding: 7px;
  font-weight: normal;
}

td {
  border-bottom: 1px solid #142d46;
  padding: 7px;
}

.status-ok, .status-bad, .status-warn {
  text-align: center;
  border-radius: 4px;
  min-width: 48px;
  padding: 3px 5px;
  font-size: 8px;
  display: inline-block;
}

.status-ok {
  background: #11ad59;
}

.status-bad {
  background: #c23943;
}

.status-warn {
  background: #d98c13;
}

.alarm-row {
  border-bottom: 1px solid #142e47;
  gap: 10px;
  padding: 10px 3px;
  display: flex;
}

.alarm-row > span {
  border-radius: 4px;
  place-items: center;
  width: 51px;
  height: 22px;
  font-size: 8px;
  display: grid;
}

.alarm-warning {
  background: #d68d15;
}

.alarm-danger {
  background: #c63742;
}

.alarm-info {
  background: #087cef;
}

.alarm-row strong, .alarm-row small {
  display: block;
}

.alarm-row strong {
  font-size: 10px;
}

.alarm-row small {
  color: #8498b0;
  margin-top: 3px;
  font-size: 8px;
}

@media (max-width: 1300px) {
  .stats {
    grid-template-columns: repeat(3, 1fr);
  }

  .pon-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 850px) {
  .sidebar {
    flex-basis: 60px;
    width: 60px;
  }

  .sidebar span, .sidebar b, .logo div:last-child {
    display: none;
  }

  .content {
    width: calc(100% - 60px);
  }

  .topbar, .header-info {
    flex-wrap: wrap;
  }

  .stats, .pon-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .charts-row, .bottom-row {
    grid-template-columns: 1fr;
  }
}

.header-info .olt-current {
  background: linear-gradient(135deg, #0c2942, #0a1b2e);
  border-color: #1d5380;
  min-width: 125px;
}

.header-info .olt-current strong {
  color: #62baff;
}

.olts-top {
  border-bottom: 1px solid #16324d;
  justify-content: space-between;
  align-items: center;
  min-height: 78px;
  display: flex;
}

.olts-top h1 {
  margin: 0;
  font-size: 24px;
}

.olts-top p {
  color: #8299b3;
  margin: 5px 0 0;
  font-size: 12px;
}

.olt-top-actions, .form-actions, .olt-card-actions {
  gap: 8px;
  display: flex;
}

.btn-primary, .btn-secondary {
  color: #fff;
  cursor: pointer;
  border: 0;
  border-radius: 5px;
  padding: 9px 15px;
}

.btn-primary {
  background: #087cff;
}

.btn-secondary {
  background: #142c44;
  border: 1px solid #28506f;
}

.btn-primary:disabled, .btn-secondary:disabled {
  opacity: .6;
  cursor: wait;
}

.olt-summary {
  grid-template-columns: repeat(3, 180px);
  gap: 10px;
  margin: 15px 0;
  display: grid;
}

.olt-summary > div {
  background: #0a1c2f;
  border: 1px solid #173653;
  border-radius: 7px;
  padding: 15px;
}

.olt-summary small, .olt-summary strong {
  display: block;
}

.olt-summary small {
  color: #859bb3;
  font-size: 10px;
}

.olt-summary strong {
  margin-top: 5px;
  font-size: 24px;
}

.olt-form-panel {
  background: #0a1c2f;
  border: 1px solid #194361;
  border-radius: 8px;
  margin: 12px 0;
  padding: 15px;
}

.olt-form {
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  display: grid;
}

.olt-form label {
  color: #9fb1c5;
  flex-direction: column;
  gap: 6px;
  font-size: 11px;
  display: flex;
}

.olt-form input, .olt-form select, .login-box input {
  color: #fff;
  background: #071523;
  border: 1px solid #214663;
  border-radius: 5px;
  outline: none;
  width: 100%;
  min-height: 39px;
  padding: 8px 10px;
}

.olt-form input:focus, .olt-form select:focus, .login-box input:focus {
  border-color: #1688ff;
}

.olt-form .wide {
  grid-column: span 2;
}

.check-field {
  justify-content: center;
}

.check-field input {
  width: auto;
  min-height: auto;
  margin-right: 6px;
}

.form-actions {
  justify-content: flex-end;
  align-items: flex-end;
}

.form-message {
  background: #0b2940;
  border: 1px solid #225173;
  border-radius: 5px;
  margin: 10px 0;
  padding: 10px 12px;
  font-size: 11px;
}

.olt-list {
  grid-template-columns: repeat(auto-fit, minmax(390px, 1fr));
  gap: 12px;
  margin-top: 14px;
  display: grid;
}

.olt-card {
  background: linear-gradient(145deg, #0b2035, #091827);
  border: 1px solid #173b59;
  border-radius: 8px;
  padding: 15px;
}

.olt-card-head {
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

.olt-card-head h2 {
  margin: 0;
  font-size: 17px;
}

.olt-card-head p {
  color: #859bb2;
  margin: 5px 0;
  font-size: 10px;
}

.olt-online {
  color: #32e685;
  font-size: 10px;
}

.olt-offline {
  color: #ff5c65;
  font-size: 10px;
}

.olt-card-info {
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 14px 0;
  display: grid;
}

.olt-card-info div {
  background: #081725;
  border: 1px solid #142f48;
  border-radius: 5px;
  padding: 9px;
}

.olt-card-info small, .olt-card-info strong {
  display: block;
}

.olt-card-info small {
  color: #7189a3;
  font-size: 8px;
}

.olt-card-info strong {
  margin-top: 4px;
  font-size: 10px;
}

.empty-olts {
  text-align: center;
  background: #091928;
  border: 1px dashed #244866;
  border-radius: 8px;
  grid-column: 1 / -1;
  padding: 70px 20px;
}

.empty-olts h3 {
  margin: 0 0 8px;
}

.empty-olts p {
  color: #7f95ad;
  font-size: 11px;
}

.login-softolts {
  place-items: center;
  min-height: calc(100vh - 100px);
  display: grid;
}

.login-box {
  background: #0a1d30;
  border: 1px solid #1b405f;
  border-radius: 9px;
  width: 360px;
  padding: 25px;
}

.login-icon {
  background: #e72c3a;
  border-radius: 50%;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: 0 auto 12px;
  font-size: 25px;
  display: grid;
}

.login-box h2, .login-box p {
  text-align: center;
}

.login-box h2 {
  margin: 5px 0;
}

.login-box p {
  color: #859ab2;
  margin: 0 0 20px;
  font-size: 11px;
}

.login-box label {
  color: #aab9ca;
  margin: 10px 0 5px;
  font-size: 11px;
  display: block;
}

.login-button {
  width: 100%;
  margin-top: 17px;
}

@media (max-width: 900px) {
  .olt-form {
    grid-template-columns: 1fr;
  }

  .olt-form .wide {
    grid-column: span 1;
  }

  .olt-summary {
    grid-template-columns: repeat(3, 1fr);
  }
}

.access-method {
  background: #081929;
  border: 1px solid #183d5c;
  border-radius: 7px;
  padding: 13px;
}

.access-title {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.access-title span {
  color: #7890a9;
  font-size: 10px;
}

.access-enable {
  align-items: center;
  color: #e9f3ff !important;
  flex-direction: row !important;
}

.access-enable input {
  width: auto !important;
  min-height: auto !important;
}

.access-fields {
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin-top: 12px;
  display: grid;
}

.telnet-warning {
  color: #ff9d3d !important;
}

.detection-panel {
  background: #071725;
  border: 1px solid #22516f;
  border-radius: 8px;
  margin-top: 15px;
  padding: 15px;
}

.detection-panel h3 {
  margin: 0 0 12px;
  font-size: 13px;
}

.detection-access {
  flex-wrap: wrap;
  gap: 8px;
  display: flex;
}

.detection-access > div {
  border-radius: 5px;
  min-width: 150px;
  padding: 9px;
}

.detection-access strong, .detection-access small {
  display: block;
}

.detection-access strong {
  margin-top: 5px;
}

.detection-access small {
  opacity: .8;
  margin-top: 4px;
  font-size: 8px;
}

.access-ok {
  color: #45ec93;
  background: #082a20;
  border: 1px solid #176c49;
}

.access-error {
  color: #ff7178;
  background: #31181d;
  border: 1px solid #72333a;
}

.device-detected {
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin-top: 12px;
  display: grid;
}

.device-detected > div {
  background: #0b2134;
  border: 1px solid #173d5b;
  border-radius: 5px;
  padding: 10px;
}

.device-detected small, .device-detected strong {
  display: block;
}

.device-detected small {
  color: #7f96ae;
  font-size: 8px;
}

.device-detected strong {
  margin-top: 5px;
  font-size: 10px;
}

.connection-badges {
  gap: 5px;
  margin-bottom: 12px;
  display: flex;
}

.connection-badges span {
  color: #5ebcff;
  background: #0b3149;
  border-radius: 4px;
  padding: 4px 7px;
  font-size: 8px;
}

@media (max-width: 1000px) {
  .access-fields {
    grid-template-columns: 1fr;
  }

  .device-detected {
    grid-template-columns: repeat(2, 1fr);
  }
}

.btn-primary {
  text-decoration: none;
}

.device-loading {
  color: #dbeaff;
  background: #07111f;
  place-items: center;
  min-height: 100vh;
  display: grid;
}

.device-header {
  border-bottom: 1px solid #17324b;
  justify-content: space-between;
  align-items: center;
  min-height: 88px;
  display: flex;
}

.device-header h1 {
  margin: 5px 0;
  font-size: 23px;
}

.device-header p {
  color: #8197af;
  margin: 0;
  font-size: 11px;
}

.breadcrumb {
  color: #7190ad;
  gap: 7px;
  font-size: 9px;
  display: flex;
}

.breadcrumb a {
  color: #37a7ff;
  text-decoration: none;
}

.device-header-right {
  gap: 8px;
  display: flex;
}

.device-status, .device-ip {
  background: #0a1e31;
  border: 1px solid #17405f;
  border-radius: 6px;
  padding: 9px 13px;
}

.device-status.online {
  color: #35ed89;
  background: #073426;
  border-color: #116747;
}

.device-status.offline {
  color: #ff7078;
  background: #32191d;
  border-color: #6d343b;
}

.device-ip small, .device-ip strong {
  display: block;
}

.device-ip small {
  color: #758ba3;
  font-size: 8px;
}

.device-ip strong {
  margin-top: 4px;
  font-size: 11px;
}

.device-cards {
  grid-template-columns: repeat(6, 1fr);
  gap: 9px;
  margin: 12px 0;
  display: grid;
}

.device-cards article {
  background: #0a1c2e;
  border: 1px solid #173a58;
  border-radius: 7px;
  padding: 12px;
}

.device-cards small, .device-cards strong {
  display: block;
}

.device-cards small {
  color: #768da5;
  font-size: 8px;
}

.device-cards strong {
  margin-top: 5px;
  font-size: 12px;
}

.device-access {
  margin-bottom: 10px;
}

.access-list {
  gap: 8px;
  display: flex;
}

.access-card {
  background: #082336;
  border: 1px solid #185071;
  border-radius: 6px;
  min-width: 180px;
  padding: 10px;
}

.access-card strong, .access-card span {
  display: block;
}

.access-card strong {
  color: #55beff;
}

.access-card span {
  color: #91a8be;
  margin-top: 5px;
  font-size: 9px;
}

.device-monitor-grid {
  grid-template-columns: .7fr 1.3fr;
  gap: 10px;
  display: grid;
}

.monitor-placeholder {
  min-height: 230px;
}

.monitor-placeholder h3 {
  margin: 0 0 10px;
}

.monitor-placeholder p {
  color: #8499b0;
  font-size: 11px;
  line-height: 1.7;
}

.pon-placeholders {
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  display: grid;
}

.pon-placeholders div {
  background: #081a29;
  border: 1px solid #173c58;
  border-radius: 5px;
  min-height: 75px;
  padding: 10px;
}

.pon-placeholders strong, .pon-placeholders span {
  display: block;
}

.pon-placeholders span {
  color: #70869d;
  margin-top: 9px;
  font-size: 8px;
}

.live-summary {
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  display: grid;
}

.live-summary > div {
  background: #081a29;
  border: 1px solid #173a56;
  border-radius: 6px;
  padding: 11px;
}

.live-summary small, .live-summary strong {
  display: block;
}

.live-summary small {
  color: #778fa7;
  font-size: 8px;
}

.live-summary strong {
  margin-top: 5px;
  font-size: 18px;
}

.live-green {
  color: #32e883 !important;
}

.live-red {
  color: #ff626b !important;
}

.live-orange {
  color: #ffa22e !important;
}

.collection-footer {
  color: #70879f;
  margin-top: 10px;
  font-size: 8px;
}

.live-error {
  color: #ff7a80;
  background: #30181c;
  border: 1px solid #6d3439;
  border-radius: 6px;
  padding: 20px;
  font-size: 10px;
}

.pon-live-head {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.pon-live-head span {
  font-size: 8px;
}

.pon-placeholders p {
  color: #9aabc0;
  margin: 7px 0 0;
  font-size: 9px;
}

.panel-title button {
  color: #fff;
  cursor: pointer;
  background: #087cff;
  border: 0;
  border-radius: 4px;
  padding: 5px 9px;
  font-size: 8px;
}

.onu-summary {
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  gap: 9px;
  margin: 12px 0;
  display: grid;
}

.onu-summary article {
  background: #0a1d30;
  border: 1px solid #173b59;
  border-radius: 7px;
  padding: 12px;
}

.onu-summary small, .onu-summary strong {
  display: block;
}

.onu-summary small {
  color: #748ba4;
  font-size: 9px;
}

.onu-summary strong {
  margin-top: 5px;
  font-size: 20px;
}

.onu-panel {
  margin-top: 10px;
}

.onu-filterbar {
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 10px;
  display: grid;
}

.onu-filterbar input, .onu-filterbar select {
  color: #e8f2ff;
  background: #071726;
  border: 1px solid #1a405f;
  border-radius: 5px;
  outline: none;
  min-height: 38px;
  padding: 8px 10px;
}

.onu-filterbar input:focus, .onu-filterbar select:focus {
  border-color: #1689ff;
}

.onu-table-wrap {
  overflow-x: auto;
}

.onu-table {
  min-width: 950px;
}

.onu-table th {
  padding: 10px;
  font-size: 9px;
}

.onu-table td {
  padding: 9px 10px;
  font-size: 10px;
}

.onu-table tbody tr:hover {
  background: #0d263d;
}

.onu-status {
  text-align: center;
  border-radius: 4px;
  min-width: 74px;
  padding: 4px 7px;
  font-size: 8px;
  display: inline-block;
}

.onu-online {
  color: #49ed95;
  background: #073923;
  border: 1px solid #126845;
}

.onu-dying {
  color: #ffb145;
  background: #3d2810;
  border: 1px solid #77501b;
}

.onu-offline {
  color: #ff747b;
  background: #39191e;
  border: 1px solid #74323a;
}

.onu-mono {
  font-family: Consolas, Courier New, monospace;
}

.onu-empty {
  text-align: center;
  color: #70869d;
  padding: 35px;
}

@media (max-width: 1000px) {
  .onu-summary {
    grid-template-columns: repeat(2, 1fr);
  }

  .onu-filterbar {
    grid-template-columns: 1fr;
  }
}

.olt-context-bar {
  background: #081a2b;
  border: 1px solid #17415f;
  border-radius: 7px;
  justify-content: space-between;
  align-items: stretch;
  gap: 12px;
  margin: 12px 0;
  padding: 10px;
  display: flex;
}

.olt-context-select {
  flex: 1;
  align-items: center;
  gap: 14px;
  display: flex;
}

.olt-context-select > div {
  min-width: 125px;
}

.olt-context-select small, .olt-context-select strong {
  display: block;
}

.olt-context-select small {
  color: #6e8ba5;
  font-size: 8px;
}

.olt-context-select strong {
  margin-top: 3px;
  font-size: 10px;
}

.olt-context-select select {
  color: #edf6ff;
  background: #061727;
  border: 1px solid #176499;
  border-radius: 5px;
  outline: none;
  width: 100%;
  max-width: 460px;
  min-height: 38px;
  padding: 7px 10px;
  font-weight: 600;
}

.olt-context-select select:focus {
  border-color: #168cff;
}

.olt-context-tabs {
  align-items: center;
  gap: 5px;
  display: flex;
}

.olt-context-tabs a {
  color: #88a3bb;
  background: #071827;
  border: 1px solid #183c58;
  border-radius: 5px;
  padding: 9px 15px;
  font-size: 10px;
  font-weight: 600;
  text-decoration: none;
}

.olt-context-tabs a:hover {
  color: #fff;
  border-color: #176da4;
}

.olt-context-tabs a.active {
  color: #fff;
  background: #087cff;
  border-color: #087cff;
}

@media (max-width: 900px) {
  .olt-context-bar {
    flex-direction: column;
  }

  .olt-context-select {
    flex-direction: column;
    align-items: stretch;
  }

  .olt-context-select select {
    max-width: none;
  }
}

.pon-summary {
  grid-template-columns: repeat(6, 1fr);
  gap: 9px;
  margin: 12px 0;
  display: grid;
}

.pon-summary article {
  background: #0a1d30;
  border: 1px solid #173c59;
  border-radius: 7px;
  padding: 12px;
}

.pon-summary small, .pon-summary strong {
  display: block;
}

.pon-summary small {
  color: #748ba4;
  font-size: 8px;
}

.pon-summary strong {
  margin-top: 5px;
  font-size: 19px;
}

.pon-grid-page {
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 12px;
  display: grid;
}

.pon-card-page {
  color: #eaf4ff;
  background: #091c2e;
  border: 1px solid #17415e;
  border-radius: 7px;
  padding: 14px;
  text-decoration: none;
  transition: border-color .15s, transform .15s, background .15s;
  display: block;
}

.pon-card-page:hover {
  background: #0c243a;
  border-color: #1688db;
  transform: translateY(-1px);
}

.pon-card-top {
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

.pon-card-top small {
  color: #7088a0;
  font-size: 8px;
  display: block;
}

.pon-card-top h2 {
  margin: 4px 0 0;
  font-size: 18px;
}

.pon-card-top > span {
  border-radius: 4px;
  padding: 4px 7px;
  font-size: 8px;
}

.pon-state-ok {
  color: #39ed8a;
  background: #073724;
  border: 1px solid #126845;
}

.pon-state-warning {
  color: #ffb342;
  background: #3b2810;
  border: 1px solid #77521d;
}

.pon-state-empty {
  color: #8095a9;
  background: #111f2d;
  border: 1px solid #294055;
}

.pon-health {
  margin: 16px 0;
}

.pon-health > div {
  background: #07131f;
  border-radius: 10px;
  height: 5px;
  overflow: hidden;
}

.pon-health > div > span {
  background: #14cf78;
  border-radius: 10px;
  height: 100%;
  display: block;
}

.pon-health small {
  color: #758ba2;
  margin-top: 5px;
  font-size: 8px;
  display: block;
}

.pon-card-stats {
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  display: grid;
}

.pon-card-stats > div {
  text-align: center;
  background: #071725;
  border: 1px solid #15354e;
  border-radius: 5px;
  padding: 8px 5px;
}

.pon-card-stats small, .pon-card-stats strong {
  display: block;
}

.pon-card-stats small {
  color: #70869c;
  font-size: 7px;
}

.pon-card-stats strong {
  margin-top: 4px;
  font-size: 13px;
}

.pon-card-footer {
  color: #47adff;
  border-top: 1px solid #15344c;
  justify-content: space-between;
  margin-top: 13px;
  padding-top: 10px;
  font-size: 9px;
  font-weight: 600;
  display: flex;
}

@media (max-width: 1200px) {
  .pon-grid-page {
    grid-template-columns: repeat(2, 1fr);
  }

  .pon-summary {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 700px) {
  .pon-grid-page {
    grid-template-columns: 1fr;
  }

  .pon-summary {
    grid-template-columns: repeat(2, 1fr);
  }
}

.onu-open-btn {
  color: #fff;
  background: #087cff;
  border-radius: 4px;
  padding: 5px 10px;
  font-size: 8px;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
}

.onu-open-btn:hover {
  background: #2491ff;
}

.onu-detail-actions {
  align-items: center;
  gap: 9px;
  display: flex;
}

.onu-detail-main {
  grid-template-columns: 1.5fr .7fr;
  gap: 10px;
  margin-top: 12px;
  display: grid;
}

.onu-identity-card, .onu-optical-card {
  min-height: 190px;
}

.onu-detail-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  display: grid;
}

.onu-detail-grid > div {
  background: #071827;
  border: 1px solid #173750;
  border-radius: 5px;
  padding: 11px;
}

.onu-detail-grid small, .onu-detail-grid strong {
  display: block;
}

.onu-detail-grid small {
  color: #7189a1;
  font-size: 8px;
}

.onu-detail-grid strong {
  margin-top: 5px;
  font-size: 11px;
}

.onu-signal-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  display: grid;
}

.onu-signal-grid > div {
  text-align: center;
  background: #071827;
  border: 1px solid #173a55;
  border-radius: 6px;
  padding: 16px;
}

.onu-signal-grid small, .onu-signal-grid strong {
  display: block;
}

.onu-signal-grid small {
  color: #7089a0;
  font-size: 9px;
}

.onu-signal-grid strong {
  margin-top: 7px;
  font-size: 22px;
}

.onu-signal-note {
  color: #718aa2;
  background: #071725;
  border-radius: 5px;
  margin-top: 9px;
  padding: 9px;
  font-size: 8px;
}

.onu-detail-secondary {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
  display: grid;
}

.onu-info-list {
  grid-template-columns: repeat(2, 1fr);
  gap: 7px;
  display: grid;
}

.onu-info-list > div {
  background: #071827;
  border: 1px solid #173750;
  border-radius: 5px;
  padding: 10px;
}

.onu-info-list span, .onu-info-list strong {
  display: block;
}

.onu-info-list span {
  color: #728aa2;
  font-size: 8px;
}

.onu-info-list strong {
  margin-top: 5px;
  font-size: 10px;
}

.onu-provision-lock {
  background: #111d28;
  border: 1px solid #354658;
  border-radius: 6px;
  min-height: 105px;
  padding: 14px;
}

.onu-provision-lock strong {
  color: #ffbf54;
}

.onu-provision-lock p {
  color: #8095a8;
  margin: 9px 0 0;
  font-size: 9px;
  line-height: 1.6;
}

.onu-history-empty {
  color: #70869c;
  place-items: center;
  min-height: 80px;
  font-size: 9px;
  display: grid;
}

@media (max-width: 900px) {
  .onu-detail-main, .onu-detail-secondary {
    grid-template-columns: 1fr;
  }

  .onu-detail-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.onu-history {
  margin-top: 10px;
}

.history-range {
  gap: 5px;
  display: flex;
}

.history-range button {
  color: #8199b0;
  cursor: pointer;
  background: #071827;
  border: 1px solid #1a405d;
  border-radius: 4px;
  padding: 5px 10px;
  font-size: 8px;
}

.history-range button.active {
  color: #fff;
  background: #087cff;
  border-color: #087cff;
}

.history-chart-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 10px;
  display: grid;
}

.history-chart-card {
  background: #071827;
  border: 1px solid #173a55;
  border-radius: 6px;
  padding: 11px;
}

.history-chart-title {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.history-chart-title strong {
  font-size: 11px;
}

.history-chart-title span {
  color: #7891a9;
  font-size: 8px;
}

.history-svg {
  width: 100%;
  height: 210px;
  margin-top: 8px;
  display: block;
}

.history-grid-line {
  stroke: #153047;
  stroke-width: 1px;
}

.history-axis-text {
  fill: #617b93;
  font-size: 11px;
}

.history-rx {
  color: #28df86;
}

.history-temp {
  color: #ffb03d;
}

.history-chart-line {
  stroke: currentColor;
}

.history-time-axis {
  color: #617a91;
  justify-content: space-between;
  font-size: 8px;
  display: flex;
}

.history-no-data {
  color: #6f879e;
  place-items: center;
  min-height: 150px;
  font-size: 9px;
  display: grid;
}

.history-events {
  border: 1px solid #17384f;
  border-radius: 6px;
  margin-top: 10px;
  overflow: hidden;
}

.history-events-head {
  background: #091b2b;
  justify-content: space-between;
  padding: 10px;
  display: flex;
}

.history-events-head strong {
  font-size: 10px;
}

.history-events-head span {
  color: #70889e;
  font-size: 8px;
}

.history-event-row {
  border-top: 1px solid #132e43;
  justify-content: space-between;
  padding: 9px 10px;
  display: flex;
}

.history-event-row span {
  color: #7890a6;
  font-size: 8px;
}

.history-event-row strong {
  font-size: 9px;
}

.history-event-empty {
  text-align: center;
  color: #70879d;
  padding: 22px;
  font-size: 9px;
}

@media (max-width: 900px) {
  .history-chart-grid {
    grid-template-columns: 1fr;
  }
}

.onu-services-panel {
  margin-top: 10px;
}

.onu-services-table-wrap {
  overflow-x: auto;
}

.onu-services-table {
  border-collapse: collapse;
  width: 100%;
}

.onu-services-table th {
  text-align: left;
  color: #718aa2;
  background: #071827;
  border-bottom: 1px solid #17364e;
  padding: 9px 10px;
  font-size: 8px;
}

.onu-services-table td {
  border-bottom: 1px solid #132f45;
  padding: 10px;
  font-size: 9px;
}

.onu-services-table tbody tr:hover {
  background: #0b2236;
}

.onu-services-table tbody tr:last-child td {
  border-bottom: 0;
}

.service-vlan {
  color: #39e98b;
  font-weight: 700;
}

.onu-services-empty {
  text-align: center;
  color: #71889e;
  padding: 25px;
  font-size: 9px;
}

.onu-service-actions {
  align-items: center;
  gap: 10px;
  display: flex;
}

.onu-service-refresh {
  color: #62baff;
  cursor: pointer;
  background: #08243b;
  border: 1px solid #17619a;
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 8px;
  font-weight: 600;
}

.onu-service-refresh:hover {
  background: #0b3150;
}

.onu-service-refresh:disabled {
  opacity: .55;
  cursor: wait;
}

.onu-inventory-panel {
  margin-top: 10px;
}

.inventory-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  margin-top: 10px;
  display: grid;
}

.inventory-grid > div {
  background: #071827;
  border: 1px solid #173850;
  border-radius: 5px;
  padding: 9px;
}

.inventory-grid small, .inventory-grid strong {
  display: block;
}

.inventory-grid small {
  color: #71899f;
  font-size: 8px;
}

.inventory-grid strong {
  margin-top: 5px;
  font-size: 10px;
}

.inventory-section-title {
  color: #8eb4d3;
  border-bottom: 1px solid #163650;
  margin-top: 16px;
  padding-bottom: 6px;
  font-size: 10px;
  font-weight: 700;
}

.inventory-empty {
  color: #6d879d;
  text-align: center;
  padding: 18px;
  font-size: 8px;
}

.inventory-raw-count {
  color: #5e788f;
  margin-top: 10px;
  font-size: 7px;
}

.onu-services-panel {
  display: none;
}

@media (max-width: 1000px) {
  .inventory-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.outage-panel {
  margin-top: 10px;
}

.outage-cards {
  grid-template-columns: repeat(6, 1fr);
  gap: 7px;
  margin-top: 10px;
  display: grid;
}

.outage-cards > div {
  background: #071827;
  border: 1px solid #173850;
  border-radius: 5px;
  padding: 9px;
}

.outage-cards small, .outage-cards strong {
  display: block;
}

.outage-cards small {
  color: #71899f;
  font-size: 8px;
}

.outage-cards strong {
  margin-top: 5px;
  font-size: 10px;
}

.outage-footnote {
  color: #60798f;
  margin-top: 7px;
  font-size: 7px;
}

.onu-active-alarms {
  gap: 5px;
  margin-top: 10px;
  display: grid;
}

.onu-alarm {
  border-radius: 5px;
  justify-content: space-between;
  padding: 9px;
  font-size: 9px;
  display: flex;
}

.onu-alarm.critical {
  color: #ff747b;
  background: #32171d;
  border: 1px solid #77313b;
}

.onu-alarm.warning {
  color: #ffc15b;
  background: #352611;
  border: 1px solid #76521b;
}

@media (max-width: 1000px) {
  .outage-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

.alarm-summary {
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 12px 0;
  display: grid;
}

.alarm-summary article {
  background: #091d2f;
  border: 1px solid #173d59;
  border-radius: 6px;
  padding: 12px;
}

.alarm-summary small, .alarm-summary strong {
  display: block;
}

.alarm-summary small {
  color: #718aa1;
  font-size: 8px;
}

.alarm-summary strong {
  margin-top: 5px;
  font-size: 20px;
}

.alarm-filter {
  gap: 6px;
  margin-bottom: 9px;
  display: flex;
}

.alarm-filter button {
  color: #8098ae;
  cursor: pointer;
  background: #071827;
  border: 1px solid #173d59;
  border-radius: 4px;
  padding: 7px 14px;
}

.alarm-filter button.active {
  color: #fff;
  background: #087cff;
  border-color: #087cff;
}

.alarm-table-wrap {
  overflow-x: auto;
}

.alarm-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 1000px;
}

.alarm-table th, .alarm-table td {
  text-align: left;
  border-bottom: 1px solid #143148;
  padding: 10px;
  font-size: 9px;
}

.alarm-table th {
  color: #718aa1;
}

.alarm-table td small {
  color: #71879b;
  margin-top: 3px;
  display: block;
}

.alarm-badge {
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 7px;
  font-weight: 700;
  display: inline-block;
}

.alarm-critical {
  color: #ff747b;
  background: #35181e;
  border: 1px solid #77333c;
}

.alarm-warning {
  color: #ffc15b;
  background: #382711;
  border: 1px solid #77531d;
}

.alarm-empty {
  text-align: center;
  color: #71889e;
  padding: 35px;
}

.btn-danger {
  color: #fff;
  cursor: pointer;
  background: #9e2630;
  border: 1px solid #c53b47;
  border-radius: 5px;
  justify-content: center;
  align-items: center;
  min-height: 34px;
  padding: 7px 13px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
}

.btn-danger:hover {
  background: #bb2d3a;
}

.btn-danger:disabled {
  opacity: .55;
  cursor: wait;
}

.olt-delete-link {
  margin-left: 4px;
}

.olt-edit-page {
  color: #edf6ff;
  background: #061525;
  min-height: 100vh;
  padding: 14px;
}

.olt-edit-header {
  border-bottom: 1px solid #173a54;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 13px;
  display: flex;
}

.olt-edit-header h1 {
  margin: 5px 0 2px;
}

.olt-edit-header p {
  color: #7390aa;
  margin: 0;
  font-size: 10px;
}

.olt-edit-header-actions {
  gap: 7px;
  display: flex;
}

.olt-edit-section {
  margin-top: 12px;
}

.olt-edit-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
  display: grid;
}

.olt-edit-grid label, .olt-access-edit > label {
  display: block;
}

.olt-edit-grid label > span, .olt-access-edit > label > span {
  color: #7893aa;
  margin-bottom: 5px;
  font-size: 8px;
  display: block;
}

.olt-edit-grid input, .olt-access-edit input, .olt-access-edit select {
  color: #fff;
  background: #061727;
  border: 1px solid #1a496a;
  border-radius: 5px;
  outline: none;
  width: 100%;
  min-height: 37px;
  padding: 8px 9px;
}

.olt-edit-grid input:focus, .olt-access-edit input:focus, .olt-access-edit select:focus {
  border-color: #1488df;
}

.olt-access-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin-top: 10px;
  display: grid;
}

.olt-access-edit {
  gap: 10px;
  display: grid;
}

.edit-check {
  align-items: center;
  gap: 7px;
  display: flex !important;
}

.edit-check input {
  width: auto;
  min-height: auto;
}

.edit-check span {
  margin: 0 !important;
}

.credential-ok {
  color: #27df83;
  font-size: 8px;
}

.edit-success {
  color: #44eb91;
  background: #073321;
  border: 1px solid #176841;
  border-radius: 5px;
  margin-top: 10px;
  padding: 9px;
}

.delete-olt-page {
  color: #edf6ff;
  background: #061525;
  place-items: center;
  min-height: 100vh;
  padding: 20px;
  display: grid;
}

.delete-olt-card {
  background: #091d2f;
  border: 1px solid #62313a;
  border-radius: 8px;
  width: min(560px, 100%);
  padding: 25px;
}

.delete-icon {
  color: #ff767e;
  background: #3a181e;
  border: 1px solid #74303a;
  border-radius: 50%;
  place-items: center;
  width: 42px;
  height: 42px;
  font-size: 21px;
  font-weight: 700;
  display: grid;
}

.delete-olt-card h1 {
  margin: 13px 0 5px;
}

.delete-olt-card > p {
  color: #8499ad;
}

.delete-olt-info {
  background: #071827;
  border: 1px solid #173b56;
  border-radius: 5px;
  margin: 15px 0;
  padding: 13px;
}

.delete-olt-info strong, .delete-olt-info span {
  display: block;
}

.delete-olt-info span {
  color: #8197aa;
  margin-top: 5px;
  font-size: 9px;
}

.delete-warning {
  color: #ff9ca2;
  background: #2c171b;
  border: 1px solid #65313a;
  border-radius: 5px;
  padding: 12px;
  font-size: 9px;
  line-height: 1.5;
}

.delete-actions {
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
  display: flex;
}

@media (max-width: 900px) {
  .olt-access-grid, .olt-edit-grid {
    grid-template-columns: 1fr;
  }
}

.unauth-page {
  color: #eef7ff;
  background: #061525;
  min-height: 100vh;
  padding: 10px;
}

.unauth-selector {
  grid-template-columns: minmax(300px, 1fr) 260px 180px;
  align-items: end;
  gap: 10px;
  margin: 12px 0;
  display: grid;
}

.unauth-selector label span {
  color: #7790a7;
  margin-bottom: 5px;
  font-size: 8px;
  display: block;
}

.unauth-selector select {
  color: #fff;
  background: #061827;
  border: 1px solid #195077;
  border-radius: 5px;
  width: 100%;
  min-height: 38px;
  padding: 8px;
}

.unauth-scan, .unauth-count {
  background: #071827;
  border: 1px solid #173c57;
  border-radius: 5px;
  min-height: 62px;
  padding: 9px 11px;
}

.unauth-scan small, .unauth-scan strong, .unauth-scan span, .unauth-count small, .unauth-count strong {
  display: block;
}

.unauth-scan small, .unauth-count small {
  color: #708ba2;
  font-size: 8px;
}

.unauth-scan strong {
  margin-top: 3px;
  font-size: 10px;
}

.unauth-scan span {
  color: #708ba2;
  margin-top: 3px;
  font-size: 7px;
}

.unauth-scan.ok strong {
  color: #30e889;
}

.unauth-scan.error strong {
  color: #ff6e76;
}

.unauth-count strong {
  margin-top: 4px;
  font-size: 24px;
}

.unauth-empty {
  color: #718ba2;
  text-align: center;
  align-content: center;
  place-items: center;
  gap: 6px;
  min-height: 220px;
  font-size: 9px;
  display: grid;
}

.unauth-empty strong {
  color: #b7c8d8;
  font-size: 11px;
}

.unauth-last-scan {
  color: #60798f;
  margin-top: 8px;
  font-size: 7px;
}

@media (max-width: 900px) {
  .unauth-selector {
    grid-template-columns: 1fr;
  }
}

.provision-page {
  color: #eef7ff;
  background: #061525;
  min-height: 100vh;
  padding: 10px;
}

.provision-onu-summary {
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  margin: 12px 0;
  display: grid;
}

.provision-onu-summary > div {
  background: #071827;
  border: 1px solid #173a55;
  border-radius: 5px;
  padding: 9px;
}

.provision-onu-summary small, .provision-onu-summary strong {
  display: block;
}

.provision-onu-summary small {
  color: #718ba2;
  font-size: 8px;
}

.provision-onu-summary strong {
  margin-top: 5px;
  font-size: 10px;
}

.provision-section {
  margin-top: 9px;
}

.provision-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 10px;
  display: grid;
}

.provision-grid label > span {
  color: #7892a9;
  margin-bottom: 5px;
  font-size: 8px;
  display: block;
}

.provision-grid input, .provision-grid select {
  color: #fff;
  background: #061827;
  border: 1px solid #194765;
  border-radius: 5px;
  outline: none;
  width: 100%;
  min-height: 36px;
  padding: 8px;
}

.provision-grid input:focus, .provision-grid select:focus {
  border-color: #1388df;
}

.provision-preview {
  margin-top: 9px;
}

.command-preview {
  gap: 4px;
  margin-top: 10px;
  display: grid;
}

.command-line {
  background: #04131f;
  border: 1px solid #15344b;
  border-radius: 4px;
  grid-template-columns: 32px 1fr;
  align-items: center;
  min-height: 35px;
  padding: 4px 8px;
  display: grid;
}

.command-line > span {
  color: #58758c;
  font-size: 8px;
}

.command-line code {
  color: #55e799;
  font-size: 10px;
}

.provision-empty {
  text-align: center;
  color: #70879d;
  padding: 35px;
  font-size: 9px;
}

.provision-execution-lock {
  color: #ffc45e;
  background: #30240e;
  border: 1px solid #69501b;
  border-radius: 5px;
  margin-top: 10px;
  padding: 10px;
  font-size: 9px;
}

@media (max-width: 1000px) {
  .provision-grid, .provision-onu-summary {
    grid-template-columns: repeat(2, 1fr);
  }
}

.svcprov-page {
  color: #eef7ff;
  background: #061525;
  min-height: 100vh;
  padding: 10px;
}

.svcprov-select {
  grid-template-columns: minmax(260px, .8fr) minmax(420px, 1.5fr);
  gap: 10px;
  margin: 12px 0 9px;
  display: grid;
}

.svcprov-select label > span, .svcprov-fields label > span {
  color: #7893aa;
  margin-bottom: 5px;
  font-size: 8px;
  display: block;
}

.svcprov-select select, .svcprov-fields input, .svcprov-fields select {
  color: #eef7ff;
  background: #061827;
  border: 1px solid #194866;
  border-radius: 5px;
  outline: none;
  width: 100%;
  min-height: 38px;
  padding: 8px 9px;
}

.svcprov-select select:focus, .svcprov-fields input:focus, .svcprov-fields select:focus {
  border-color: #168ce0;
}

.svcprov-onu {
  grid-template-columns: repeat(6, 1fr);
  gap: 7px;
  margin-bottom: 9px;
  display: grid;
}

.svcprov-onu > div, .svcprov-current-grid > div {
  background: #071827;
  border: 1px solid #173a54;
  border-radius: 5px;
  padding: 9px 10px;
}

.svcprov-onu small, .svcprov-onu strong, .svcprov-current-grid small, .svcprov-current-grid strong {
  display: block;
}

.svcprov-onu small, .svcprov-current-grid small {
  color: #6e899f;
  font-size: 7px;
}

.svcprov-onu strong, .svcprov-current-grid strong {
  margin-top: 4px;
  font-size: 10px;
}

.svcprov-online {
  color: #36e993;
}

.svcprov-current {
  margin-bottom: 9px;
}

.svcprov-current-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  margin-top: 10px;
  display: grid;
}

.svcprov-portvlans {
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  display: flex;
}

.svcprov-portvlans span {
  color: #7ed0ff;
  background: #071d2d;
  border: 1px solid #194765;
  border-radius: 4px;
  padding: 5px 8px;
  font-size: 8px;
}

.svcprov-services {
  margin-bottom: 9px;
}

.svcprov-service-list {
  gap: 8px;
  margin-top: 10px;
  display: grid;
}

.svcprov-service {
  background: #061827;
  border: 1px solid #19415d;
  border-radius: 6px;
  padding: 10px;
}

.svcprov-service-title {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 9px;
  display: flex;
}

.svcprov-service-title strong, .svcprov-service-title small {
  display: block;
}

.svcprov-service-title strong {
  font-size: 10px;
}

.svcprov-service-title small {
  color: #6e879c;
  margin-top: 3px;
  font-size: 7px;
}

.svcprov-remove {
  color: #ff848a;
  cursor: pointer;
  background: #281116;
  border: 1px solid #673039;
  border-radius: 4px;
  padding: 5px 8px;
  font-size: 8px;
}

.svcprov-fields {
  grid-template-columns: 1fr .7fr .7fr .6fr;
  gap: 8px;
  display: grid;
}

.svcprov-flow {
  background: #04131f;
  border: 1px solid #14364d;
  border-radius: 5px;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 9px;
  display: flex;
}

.svcprov-flow span {
  color: #9bb2c5;
  background: #071c2b;
  border-radius: 4px;
  padding: 5px 7px;
  font-size: 8px;
}

.svcprov-flow b {
  color: #287cad;
  font-size: 9px;
}

.svcprov-actions {
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
  display: flex;
}

.svcprov-actions .btn-primary {
  min-width: 170px;
}

.svcprov-warnings {
  color: #f6c569;
  border-color: #675220;
  margin-bottom: 9px;
}

.svcprov-warnings h3 {
  margin-bottom: 6px;
  font-size: 10px;
}

.svcprov-warnings div {
  padding: 3px 0;
  font-size: 8px;
}

.svcprov-vlan-checks {
  gap: 6px;
  margin-top: 10px;
  display: grid;
}

.svcprov-vlan-checks > div {
  background: #061827;
  border: 1px solid #173a54;
  border-radius: 4px;
  grid-template-columns: 100px 1fr;
  gap: 8px;
  padding: 7px 9px;
  display: grid;
}

.svcprov-vlan-checks strong {
  color: #45df93;
  font-size: 9px;
}

.svcprov-vlan-checks span {
  color: #819bae;
  font-size: 8px;
}

.svcprov-preview {
  margin-top: 9px;
}

.svcprov-expanded {
  background: #071827;
  border: 1px solid #173a54;
  border-radius: 5px;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  padding: 8px;
  display: flex;
}

.svcprov-expanded strong, .svcprov-expanded span {
  border-radius: 3px;
  padding: 4px 6px;
  font-size: 8px;
}

.svcprov-expanded strong {
  color: #fff;
  background: #12324a;
}

.svcprov-expanded span {
  color: #8fc9ec;
  background: #071e2e;
}

@media (max-width: 1100px) {
  .svcprov-onu {
    grid-template-columns: repeat(3, 1fr);
  }

  .svcprov-fields {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 800px) {
  .svcprov-select, .svcprov-onu, .svcprov-current-grid, .svcprov-fields {
    grid-template-columns: 1fr;
  }
}

.recovery-test-page {
  color: #eef7ff;
  background: #061525;
  min-height: 100vh;
  padding: 10px;
}

.recovery-target {
  grid-template-columns: 1.6fr .5fr .5fr 1fr 1.2fr;
  gap: 7px;
  margin: 12px 0 9px;
  display: grid;
}

.recovery-target > div, .recovery-state > div {
  background: #071827;
  border: 1px solid #173b55;
  border-radius: 5px;
  padding: 9px;
}

.recovery-target small, .recovery-target strong, .recovery-state small, .recovery-state strong {
  display: block;
}

.recovery-target small, .recovery-state small {
  color: #70899f;
  font-size: 8px;
}

.recovery-target strong, .recovery-state strong {
  margin-top: 5px;
  font-size: 10px;
}

.recovery-state {
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  margin-top: 10px;
  display: grid;
}

.recovery-services {
  gap: 7px;
  margin-top: 10px;
  display: grid;
}

.recovery-services > div {
  background: #061827;
  border: 1px solid #173b55;
  border-radius: 5px;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  padding: 10px;
  display: flex;
}

.recovery-services strong {
  min-width: 100px;
  font-size: 10px;
}

.recovery-services span {
  color: #8fd1f5;
  background: #071e2e;
  border-radius: 4px;
  padding: 5px 8px;
  font-size: 8px;
}

.recovery-note {
  color: #f1c86d;
  background: #29200c;
  border: 1px solid #5f4a18;
  border-radius: 5px;
  margin-top: 10px;
  padding: 9px;
  font-size: 8px;
}

.recovery-action {
  justify-content: flex-end;
  margin-top: 12px;
  display: flex;
}

.recovery-action .btn-primary {
  min-width: 270px;
}

.recovery-running {
  color: #62e5a0;
  white-space: pre-wrap;
  background: #03111c;
  border: 1px solid #17364d;
  border-radius: 5px;
  max-height: 420px;
  margin-top: 10px;
  padding: 12px;
  font-size: 9px;
  overflow: auto;
}

@media (max-width: 900px) {
  .recovery-target, .recovery-state {
    grid-template-columns: repeat(2, 1fr);
  }
}

.svcprod-page {
  color: #eef7ff;
  background: #061525;
  min-height: 100vh;
  padding: 10px;
}

.svcprod-select {
  grid-template-columns: minmax(260px, .8fr) minmax(430px, 1.5fr);
  gap: 10px;
  margin: 12px 0 9px;
  display: grid;
}

.svcprod-select label > span, .svcprod-fields label > span, .svcprod-description > span {
  color: #7893aa;
  margin-bottom: 5px;
  font-size: 8px;
  display: block;
}

.svcprod-select select, .svcprod-fields input, .svcprod-fields select, .svcprod-description input {
  color: #eef7ff;
  background: #061827;
  border: 1px solid #194866;
  border-radius: 5px;
  width: 100%;
  min-height: 38px;
  padding: 8px;
}

.svcprod-onu {
  grid-template-columns: repeat(6, 1fr);
  gap: 7px;
  margin-bottom: 9px;
  display: grid;
}

.svcprod-onu > div {
  background: #071827;
  border: 1px solid #173a54;
  border-radius: 5px;
  padding: 9px;
}

.svcprod-onu small, .svcprod-onu strong {
  display: block;
}

.svcprod-onu small {
  color: #718ca2;
  font-size: 7px;
}

.svcprod-onu strong {
  margin-top: 5px;
  font-size: 9px;
}

.svcprod-current, .svcprod-new {
  margin-bottom: 9px;
}

.svcprod-existing {
  gap: 6px;
  margin-top: 10px;
  display: grid;
}

.svcprod-existing > div {
  background: #061827;
  border: 1px solid #173a54;
  border-radius: 5px;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 8px;
  display: flex;
}

.svcprod-existing strong, .svcprod-existing span {
  border-radius: 3px;
  padding: 4px 7px;
  font-size: 8px;
}

.svcprod-existing strong {
  color: #fff;
  min-width: 75px;
}

.svcprod-existing span {
  color: #89cbed;
  background: #071e2e;
}

.svcprod-empty {
  color: #718a9e;
  text-align: center;
  background: #061827;
  border-radius: 5px;
  margin-top: 10px;
  padding: 25px;
  font-size: 9px;
}

.svcprod-description {
  max-width: 520px;
  margin-top: 10px;
  display: block;
}

.svcprod-services {
  gap: 8px;
  margin-top: 10px;
  display: grid;
}

.svcprod-service {
  background: #061827;
  border: 1px solid #19415d;
  border-radius: 6px;
  padding: 10px;
}

.svcprod-service-head {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 9px;
  display: flex;
}

.svcprod-service-head strong, .svcprod-service-head small {
  display: block;
}

.svcprod-service-head strong {
  font-size: 10px;
}

.svcprod-service-head small {
  color: #71889b;
  margin-top: 3px;
  font-size: 7px;
}

.svcprod-remove {
  color: #ff858c;
  cursor: pointer;
  background: #281116;
  border: 1px solid #673039;
  border-radius: 4px;
  padding: 5px 8px;
  font-size: 8px;
}

.svcprod-fields {
  grid-template-columns: 1fr .7fr .7fr .55fr .55fr;
  gap: 8px;
  display: grid;
}

.svcprod-info {
  color: #88a7bd;
  background: #04131f;
  border: 1px solid #17374e;
  border-radius: 5px;
  margin-top: 10px;
  padding: 9px;
  font-size: 8px;
}

.svcprod-actions {
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
  display: flex;
}

.svcprod-actions .btn-primary {
  min-width: 190px;
}

.svcprod-preview {
  margin-top: 9px;
}

.svcprod-plan {
  gap: 6px;
  margin-top: 10px;
  display: grid;
}

.svcprod-plan > div {
  background: #061827;
  border: 1px solid #173a54;
  border-radius: 5px;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px;
  display: flex;
}

.svcprod-plan strong, .svcprod-plan span {
  border-radius: 3px;
  padding: 4px 7px;
  font-size: 8px;
}

.svcprod-plan strong {
  color: #fff;
}

.svcprod-plan span {
  color: #8fd0f3;
  background: #071e2e;
}

@media (max-width: 1100px) {
  .svcprod-onu {
    grid-template-columns: repeat(3, 1fr);
  }

  .svcprod-fields {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 800px) {
  .svcprod-select, .svcprod-onu, .svcprod-fields {
    grid-template-columns: 1fr;
  }
}

.onu-svc-wrapper {
  gap: 9px;
  margin-top: 9px;
  display: grid;
}

.onu-svc-panel, .onu-svc-history {
  margin: 0;
}

.onu-svc-title-actions {
  align-items: center;
  gap: 7px;
  display: flex;
}

.onu-svc-message {
  margin-top: 9px;
}

.onu-svc-summary {
  grid-template-columns: 1.5fr .7fr .6fr .8fr;
  gap: 7px;
  margin-top: 10px;
  display: grid;
}

.onu-svc-summary > div {
  background: #061827;
  border: 1px solid #173a54;
  border-radius: 5px;
  padding: 8px 9px;
}

.onu-svc-summary small, .onu-svc-summary strong {
  display: block;
}

.onu-svc-summary small {
  color: #71899e;
  font-size: 7px;
}

.onu-svc-summary strong {
  color: #dcecff;
  margin-top: 4px;
  font-size: 9px;
}

.onu-svc-existing {
  gap: 5px;
  margin-top: 9px;
  display: grid;
}

.onu-svc-existing-row {
  background: #061827;
  border: 1px solid #173a54;
  border-radius: 5px;
  grid-template-columns: minmax(160px, 1.4fr) repeat(4, minmax(80px, .6fr)) minmax(100px, .7fr);
  align-items: center;
  gap: 6px;
  padding: 7px;
  display: grid;
}

.onu-svc-existing-main {
  align-items: center;
  gap: 7px;
  display: flex;
}

.onu-svc-existing-main > strong {
  font-size: 9px;
}

.onu-svc-vlan {
  color: #43e396;
  background: #08271d;
  border: 1px solid #14583c;
  border-radius: 3px;
  padding: 4px 6px;
  font-size: 8px;
}

.onu-svc-chip {
  color: #7d98ad;
  background: #071e2e;
  border-radius: 3px;
  padding: 5px 6px;
  font-size: 7px;
}

.onu-svc-chip strong {
  color: #a9d8f3;
  font-size: 8px;
}

.onu-svc-port {
  justify-content: space-between;
  gap: 5px;
  display: flex;
}

.onu-svc-port > strong {
  color: #fff;
}

.onu-svc-port > span {
  color: #4ce499;
}

.onu-svc-empty {
  text-align: center;
  background: #061827;
  border: 1px dashed #1b4966;
  border-radius: 5px;
  place-items: center;
  gap: 6px;
  min-height: 130px;
  margin-top: 9px;
  padding: 20px;
  display: grid;
}

.onu-svc-empty strong {
  font-size: 10px;
}

.onu-svc-empty span {
  color: #718ba0;
  font-size: 8px;
}

.onu-svc-editor {
  background: #04131f;
  border: 1px solid #1a506f;
  border-radius: 6px;
  margin-top: 10px;
  padding: 10px;
}

.onu-svc-editor-head {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  display: flex;
}

.onu-svc-editor-head strong, .onu-svc-editor-head span {
  display: block;
}

.onu-svc-editor-head strong {
  font-size: 11px;
}

.onu-svc-editor-head span {
  color: #718ca1;
  margin-top: 3px;
  font-size: 7px;
}

.onu-svc-close, .onu-svc-remove {
  cursor: pointer;
  border-radius: 4px;
  padding: 5px 8px;
  font-size: 8px;
}

.onu-svc-close {
  color: #9bb7ca;
  background: #071d2c;
  border: 1px solid #224b66;
}

.onu-svc-remove {
  color: #ff858c;
  background: #281116;
  border: 1px solid #69313a;
}

.onu-svc-description {
  max-width: 520px;
  margin-top: 10px;
  display: block;
}

.onu-svc-description > span, .onu-svc-fields label > span {
  color: #7892a7;
  margin-bottom: 5px;
  font-size: 7px;
  display: block;
}

.onu-svc-description input, .onu-svc-fields input, .onu-svc-fields select {
  color: #eef7ff;
  background: #061827;
  border: 1px solid #194866;
  border-radius: 4px;
  outline: none;
  width: 100%;
  min-height: 35px;
  padding: 7px 8px;
}

.onu-svc-description input:focus, .onu-svc-fields input:focus, .onu-svc-fields select:focus {
  border-color: #168ce0;
}

.onu-svc-new-list {
  gap: 7px;
  margin-top: 10px;
  display: grid;
}

.onu-svc-new {
  background: #061827;
  border: 1px solid #173f5b;
  border-radius: 5px;
  padding: 9px;
}

.onu-svc-new-head {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  display: flex;
}

.onu-svc-new-head strong, .onu-svc-new-head span {
  display: block;
}

.onu-svc-new-head strong {
  font-size: 9px;
}

.onu-svc-new-head span {
  color: #6e879b;
  margin-top: 3px;
  font-size: 7px;
}

.onu-svc-fields {
  grid-template-columns: 1.1fr .7fr .7fr .55fr .55fr;
  gap: 7px;
  display: grid;
}

.onu-svc-add-more {
  margin-top: 8px;
}

.onu-svc-transport-note {
  color: #88a6ba;
  background: #061827;
  border: 1px solid #17374e;
  border-radius: 5px;
  margin-top: 9px;
  padding: 8px 9px;
  font-size: 8px;
}

.onu-svc-actions {
  justify-content: flex-end;
  gap: 7px;
  margin-top: 10px;
  display: flex;
}

.onu-svc-actions .btn-primary {
  min-width: 180px;
}

.onu-svc-preview {
  border-top: 1px solid #17384e;
  margin-top: 10px;
  padding-top: 10px;
}

.onu-svc-preview-title strong, .onu-svc-preview-title span {
  display: block;
}

.onu-svc-preview-title strong {
  font-size: 10px;
}

.onu-svc-preview-title span {
  color: #738ca0;
  margin-top: 3px;
  font-size: 7px;
}

.onu-svc-preview-services {
  gap: 5px;
  margin-top: 8px;
  display: grid;
}

.onu-svc-preview-services > div {
  background: #061827;
  border: 1px solid #173a54;
  border-radius: 4px;
  flex-wrap: wrap;
  gap: 5px;
  padding: 7px;
  display: flex;
}

.onu-svc-preview-services strong, .onu-svc-preview-services span {
  border-radius: 3px;
  padding: 4px 6px;
  font-size: 7px;
}

.onu-svc-preview-services strong {
  color: #fff;
}

.onu-svc-preview-services span {
  color: #8fcff2;
  background: #071e2e;
}

.onu-svc-command-preview {
  margin-top: 8px;
}

.onu-svc-history-list {
  gap: 5px;
  margin-top: 9px;
  display: grid;
}

.onu-svc-history-row {
  background: #061827;
  border: 1px solid #173a54;
  border-radius: 5px;
  grid-template-columns: 160px 90px 110px 1fr;
  align-items: center;
  gap: 7px;
  padding: 7px;
  display: grid;
}

.onu-svc-history-id strong, .onu-svc-history-id span, .onu-svc-history-user small, .onu-svc-history-user strong {
  display: block;
}

.onu-svc-history-id strong {
  font-size: 9px;
}

.onu-svc-history-id span, .onu-svc-history-user small {
  color: #70899d;
  margin-top: 3px;
  font-size: 7px;
}

.onu-svc-history-user strong {
  margin-top: 3px;
  font-size: 8px;
}

.onu-svc-history-status {
  text-align: center;
  color: #d2e4ef;
  background: #132a39;
  border-radius: 4px;
  padding: 5px 7px;
  font-size: 7px;
  font-weight: 700;
}

.onu-svc-history-status.success {
  color: #46ea9b;
  background: #08271d;
}

.onu-svc-history-status.failed {
  color: #ff8188;
  background: #2a1116;
}

.onu-svc-history-services {
  flex-wrap: wrap;
  gap: 5px;
  display: flex;
}

.onu-svc-history-services span {
  color: #8ecceb;
  background: #071e2e;
  border-radius: 3px;
  padding: 4px 6px;
  font-size: 7px;
}

.onu-svc-history-error {
  color: #ff858b;
  background: #281217;
  border-radius: 4px;
  grid-column: 1 / -1;
  padding: 7px;
  font-size: 7px;
}

.onu-svc-history-empty, .onu-svc-loading {
  color: #71899c;
  text-align: center;
  padding: 25px;
  font-size: 8px;
}

@media (max-width: 1100px) {
  .onu-svc-existing-row {
    grid-template-columns: repeat(3, 1fr);
  }

  .onu-svc-fields, .onu-svc-history-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 760px) {
  .onu-svc-summary, .onu-svc-existing-row, .onu-svc-fields, .onu-svc-history-row {
    grid-template-columns: 1fr;
  }

  .onu-svc-title-actions, .onu-svc-actions {
    flex-wrap: wrap;
  }
}

.noc2-page {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding: 22px;
}

.noc2-header {
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-bottom: 18px;
  display: flex;
}

.noc2-brand {
  color: #3ab7ef;
  letter-spacing: 1.5px;
  font-size: 11px;
  font-weight: 900;
}

.noc2-brand span {
  color: #5ee5a3;
  background: #08271d;
  border-radius: 4px;
  margin-left: 7px;
  padding: 3px 6px;
  font-size: 9px;
}

.noc2-header h1 {
  color: #f0f7fc;
  margin: 5px 0 0;
  font-size: 25px;
  line-height: 1.15;
}

.noc2-header p {
  color: #7895a9;
  margin: 6px 0 0;
  font-size: 12px;
}

.noc2-header-actions {
  align-items: center;
  gap: 9px;
  display: flex;
}

.noc2-last-update {
  background: #071b29;
  border: 1px solid #19415b;
  border-radius: 7px;
  align-items: center;
  gap: 9px;
  min-width: 190px;
  padding: 9px 11px;
  display: flex;
}

.noc2-last-update i {
  background: #3ce49a;
  border-radius: 50%;
  flex: none;
  width: 8px;
  height: 8px;
  box-shadow: 0 0 10px #3ce49aa6;
}

.noc2-last-update strong, .noc2-last-update span {
  display: block;
}

.noc2-last-update strong {
  color: #d8e9f3;
  font-size: 10px;
}

.noc2-last-update span {
  color: #728ea0;
  margin-top: 2px;
  font-size: 9px;
}

.noc2-refresh {
  color: #dff4ff;
  cursor: pointer;
  background: #0a2b40;
  border: 1px solid #22678d;
  border-radius: 6px;
  height: 42px;
  padding: 0 14px;
  font-size: 10px;
  font-weight: 800;
}

.noc2-refresh:hover {
  background: #0d3752;
}

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

.noc2-summary-card {
  background: #071a27;
  border: 1px solid #19415b;
  border-radius: 7px;
  min-height: 105px;
  padding: 13px 14px;
}

.noc2-summary-card.attention {
  border-color: #6f323a;
}

.noc2-summary-card.alarm {
  border-color: #6e5a20;
}

.noc2-summary-label {
  color: #7f9bad;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 800;
}

.noc2-summary-main {
  align-items: flex-end;
  gap: 15px;
  margin-top: 13px;
  display: flex;
}

.noc2-summary-main > strong {
  color: #eef8ff;
  min-width: 54px;
  font-size: 34px;
  line-height: .9;
}

.noc2-summary-main div {
  padding-bottom: 1px;
}

.noc2-summary-main b, .noc2-summary-main small {
  display: block;
}

.noc2-summary-main b {
  font-size: 11px;
}

.noc2-summary-main small {
  color: #728c9e;
  margin-top: 5px;
  font-size: 10px;
}

.good {
  color: #42df96 !important;
}

.bad {
  color: #ff727c !important;
}

.warn {
  color: #efbf5d !important;
}

.noc2-box {
  background: #061823;
  border: 1px solid #183f58;
  border-radius: 7px;
  padding: 14px;
}

.noc2-box + .noc2-box {
  margin-top: 0;
}

.noc2-box-head {
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
  display: flex;
}

.noc2-box-head h2 {
  color: #e9f5fb;
  margin: 0;
  font-size: 15px;
}

.noc2-box-head p {
  color: #708b9e;
  margin: 3px 0 0;
  font-size: 10px;
}

.noc2-text-link {
  color: #7dd0f7;
  background: #08283d;
  border: 1px solid #1c5c7e;
  border-radius: 5px;
  padding: 6px 9px;
  font-size: 9px;
  font-weight: 800;
  text-decoration: none;
}

.noc2-text-link:hover {
  color: #fff;
  border-color: #35a7df;
}

.noc2-olt-list {
  gap: 8px;
  display: grid;
}

.noc2-olt {
  background: #071d2a;
  border: 1px solid #17415b;
  border-radius: 6px;
  grid-template-columns: minmax(260px, 1.5fr) 155px 300px 260px;
  align-items: center;
  gap: 14px;
  padding: 12px;
  display: grid;
}

.noc2-olt-identity {
  align-items: center;
  gap: 11px;
  min-width: 0;
  display: flex;
}

.noc2-device-icon {
  color: #8fa8b8;
  background: #112837;
  border: 1px solid #315064;
  border-radius: 7px;
  flex: none;
  place-items: center;
  width: 42px;
  height: 42px;
  font-size: 9px;
  font-weight: 900;
  display: grid;
}

.noc2-device-icon.online {
  color: #45e09a;
  background: #09271d;
  border-color: #1c6b4a;
}

.noc2-device-icon.problem {
  color: #f2c263;
  background: #2a240f;
  border-color: #65531e;
}

.noc2-olt-identity h3 {
  color: #ecf6fc;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
  font-size: 13px;
  overflow: hidden;
}

.noc2-olt-identity p {
  color: #7894a7;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 5px 0 0;
  font-size: 10px;
  overflow: hidden;
}

.noc2-olt-status {
  text-align: center;
}

.noc2-state {
  border-radius: 5px;
  align-items: center;
  gap: 5px;
  padding: 5px 7px;
  font-size: 9px;
  font-weight: 800;
  display: inline-flex;
}

.noc2-state i {
  border-radius: 50%;
  width: 6px;
  height: 6px;
}

.noc2-state.ok {
  color: #43e097;
  background: #09291e;
  border: 1px solid #1d6949;
}

.noc2-state.ok i {
  background: #43e097;
}

.noc2-state.warning {
  color: #efbd5c;
  background: #2b240f;
  border: 1px solid #65521e;
}

.noc2-state.warning i {
  background: #efbd5c;
}

.noc2-olt-status small {
  color: #6e899b;
  margin-top: 6px;
  font-size: 9px;
  display: block;
}

.noc2-olt-metrics {
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  display: grid;
}

.noc2-olt-metrics div {
  text-align: center;
  background: #061722;
  border-radius: 5px;
  padding: 7px;
}

.noc2-olt-metrics span, .noc2-olt-metrics strong {
  display: block;
}

.noc2-olt-metrics span {
  color: #708b9d;
  font-size: 9px;
}

.noc2-olt-metrics strong {
  color: #dcebf4;
  margin-top: 4px;
  font-size: 15px;
}

.noc2-olt-actions {
  gap: 6px;
  display: flex;
}

.noc2-olt-actions a {
  color: #99cae4;
  text-align: center;
  background: #082638;
  border: 1px solid #1c5574;
  border-radius: 5px;
  flex: 1;
  padding: 8px 7px;
  font-size: 9px;
  font-weight: 800;
  text-decoration: none;
}

.noc2-olt-actions a.primary {
  color: #fff;
  background: #087bd3;
  border-color: #087bd3;
}

.noc2-olt-actions a:hover {
  filter: brightness(1.15);
}

.noc2-bottom-grid {
  grid-template-columns: minmax(0, 1.45fr) minmax(340px, .8fr);
  gap: 10px;
  margin-top: 10px;
  display: grid;
}

.noc2-alarm-list {
  gap: 6px;
  display: grid;
}

.noc2-alarm {
  background: #071c28;
  border: 1px solid #153b53;
  border-radius: 5px;
  grid-template-columns: 90px minmax(0, 1fr) 55px;
  align-items: center;
  gap: 10px;
  padding: 8px 9px;
  display: grid;
}

.noc2-severity {
  text-align: center;
  border-radius: 4px;
  padding: 5px 6px;
  font-size: 8px;
  font-weight: 900;
}

.noc2-severity.critical {
  color: #ff858c;
  background: #311318;
}

.noc2-severity.warning {
  color: #f3c463;
  background: #302810;
}

.noc2-severity.info {
  color: #72c9f3;
  background: #09293c;
}

.noc2-alarm-info {
  min-width: 0;
}

.noc2-alarm-info strong, .noc2-alarm-info span {
  display: block;
}

.noc2-alarm-info strong {
  color: #e1edf4;
  font-size: 11px;
}

.noc2-alarm-info span {
  color: #718d9f;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 3px;
  font-size: 9px;
  overflow: hidden;
}

.noc2-alarm time {
  color: #708b9d;
  text-align: right;
  font-size: 9px;
}

.noc2-jobs {
  gap: 7px;
  display: grid;
}

.noc2-job {
  background: #071c28;
  border: 1px solid #153b53;
  border-radius: 5px;
  padding: 10px;
}

.noc2-job-top {
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  display: flex;
}

.noc2-job-top strong, .noc2-job-top span {
  display: block;
}

.noc2-job-top strong {
  color: #e2eff7;
  font-size: 11px;
}

.noc2-job-top span {
  color: #7590a2;
  margin-top: 3px;
  font-size: 9px;
}

.noc2-job-top > b {
  border-radius: 4px;
  padding: 5px 7px;
  font-size: 8px;
}

.noc2-job-top > b.success {
  color: #42e097;
  background: #09281d;
}

.noc2-job-top > b.failed {
  color: #ff7d84;
  background: #311318;
}

.noc2-job-top > b.running {
  color: #7ed0f7;
  background: #092a3d;
}

.noc2-job-bottom {
  border-top: 1px solid #17374c;
  justify-content: space-between;
  align-items: flex-end;
  gap: 10px;
  margin-top: 9px;
  padding-top: 8px;
  display: flex;
}

.noc2-job-vlans {
  flex-wrap: wrap;
  gap: 5px;
  display: flex;
}

.noc2-job-vlans span {
  color: #7fd0f4;
  background: #08283a;
  border-radius: 4px;
  padding: 4px 6px;
  font-size: 8px;
}

.noc2-job-bottom small {
  color: #6f899a;
  text-align: right;
  font-size: 8px;
}

.noc2-empty {
  color: #708b9d;
  text-align: center;
  padding: 28px 10px;
  font-size: 10px;
}

.good-text {
  color: #41d894;
}

.noc2-footer {
  color: #607b8f;
  justify-content: space-between;
  gap: 15px;
  padding: 10px 2px 2px;
  font-size: 9px;
  display: flex;
}

.noc2-loading {
  color: #7793a6;
  text-align: center;
  padding: 100px 20px;
}

.noc2-error, .noc2-inline-error {
  color: #ff969d;
  background: #2d1217;
  border: 1px solid #70313a;
  border-radius: 6px;
}

.noc2-error {
  gap: 9px;
  max-width: 550px;
  margin: 80px auto;
  padding: 16px;
  display: grid;
}

.noc2-inline-error {
  margin-bottom: 10px;
  padding: 9px 11px;
  font-size: 10px;
}

@media (max-width: 1250px) {
  .noc2-olt {
    grid-template-columns: minmax(260px, 1fr) 150px 260px;
  }

  .noc2-olt-actions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 950px) {
  .noc2-summary {
    grid-template-columns: repeat(2, 1fr);
  }

  .noc2-bottom-grid {
    grid-template-columns: 1fr;
  }

  .noc2-olt {
    grid-template-columns: 1fr 160px;
  }

  .noc2-olt-metrics, .noc2-olt-actions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 650px) {
  .noc2-page {
    padding: 11px;
  }

  .noc2-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .noc2-header-actions {
    width: 100%;
  }

  .noc2-last-update {
    flex: 1;
  }

  .noc2-summary, .noc2-olt {
    grid-template-columns: 1fr;
  }

  .noc2-olt-status, .noc2-olt-metrics, .noc2-olt-actions {
    grid-column: auto;
  }

  .noc2-olt-status {
    text-align: left;
  }

  .noc2-olt-metrics {
    grid-template-columns: repeat(3, 1fr);
  }

  .noc2-alarm {
    grid-template-columns: 80px minmax(0, 1fr);
  }

  .noc2-alarm time {
    text-align: left;
    grid-column: 2;
  }

  .noc2-footer {
    flex-direction: column;
  }
}

.sidebar .softolts-oltmenu {
  width: 100%;
  margin: 0;
}

.sidebar .softolts-oltmenu-trigger {
  color: #d9ecf8;
  cursor: pointer;
  text-align: left;
  width: 100%;
  font-family: inherit;
  font-size: inherit;
  background: none;
  border: 1px solid #0000;
  border-radius: 6px;
  grid-template-columns: 22px minmax(0, 1fr) 18px;
  align-items: center;
  padding: 11px 10px;
  display: grid;
}

.sidebar .softolts-oltmenu-trigger:hover {
  background: #0a2c43;
  border-color: #174e6d;
}

.sidebar .softolts-oltmenu.open .softolts-oltmenu-trigger {
  color: #fff;
  background: #0b73d8;
  border-color: #1382ed;
}

.softolts-oltmenu-icon {
  font-size: 13px;
}

.softolts-oltmenu-label {
  font-size: 11px;
  font-weight: 700;
}

.softolts-oltmenu-arrow {
  color: #9cc4dd;
  text-align: center;
  font-size: 13px;
  transition: transform .18s;
  display: inline-block;
}

.softolts-oltmenu-arrow.opened {
  color: #fff;
  transform: rotate(180deg);
}

.softolts-oltmenu-list {
  background: #051824;
  border: 1px solid #143f58;
  border-radius: 6px;
  gap: 4px;
  margin-top: 5px;
  padding: 5px;
  display: grid;
}

.sidebar .softolts-oltmenu-item {
  color: #b8d1e0;
  background: none;
  border: 1px solid #0000;
  border-radius: 5px;
  grid-template-columns: 9px minmax(0, 1fr) 12px;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 8px 7px;
  text-decoration: none;
  display: grid;
}

.sidebar .softolts-oltmenu-item:hover {
  background: #082538;
  border-color: #174c69;
}

.sidebar .softolts-oltmenu-item.active {
  color: #fff;
  background: #092d45;
  border-color: #1b648a;
}

.softolts-oltmenu-dot {
  background: #728896;
  border-radius: 50%;
  width: 7px;
  height: 7px;
}

.softolts-oltmenu-dot.ok {
  background: #3fe29a;
  box-shadow: 0 0 7px #3fe29a8c;
}

.softolts-oltmenu-dot.warning {
  background: #efbf5e;
}

.softolts-oltmenu-dot.neutral {
  background: #718998;
}

.softolts-oltmenu-text {
  min-width: 0;
}

.softolts-oltmenu-text strong, .softolts-oltmenu-text small {
  display: block;
}

.softolts-oltmenu-text strong {
  color: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
  font-weight: 700;
  overflow: hidden;
}

.softolts-oltmenu-text small {
  color: #68899e;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 3px;
  font-size: 7px;
  overflow: hidden;
}

.softolts-oltmenu-chevron {
  color: #668da5;
  text-align: center;
  font-size: 14px;
}

.sidebar .softolts-oltmenu-all {
  color: #69bde8;
  text-align: center;
  padding: 7px 8px;
  font-size: 8px;
  font-weight: 700;
  text-decoration: none;
  display: block;
}

.sidebar .softolts-oltmenu-all:hover {
  color: #fff;
}

.softolts-oltmenu-loading {
  color: #688799;
  text-align: center;
  padding: 10px 6px;
  font-size: 8px;
}

.noc2-alarm {
  min-height: 62px;
  color: inherit;
  grid-template-columns: 90px minmax(0, 1fr) 64px;
  padding: 9px 10px;
  text-decoration: none;
  transition: background .12s, border-color .12s;
}

.noc2-alarm:hover {
  background: #092536;
  border-color: #227098;
}

.noc2-alarm-info strong {
  font-size: 11px;
}

.noc2-alarm-info > span {
  color: #7795a8;
  margin-top: 3px;
  font-size: 9px;
}

.noc2-alarm-problem {
  color: #b9cbd6;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 5px;
  font-size: 9px;
  display: block;
  overflow: hidden;
}

.noc2-alarm-problem b {
  color: #829fb2;
  font-weight: 700;
}

.noc2-alarm-time {
  text-align: right;
  gap: 3px;
  display: grid;
}

.noc2-alarm-time small, .noc2-alarm-time strong {
  display: block;
}

.noc2-alarm-time small {
  color: #667f90;
  font-size: 7px;
}

.noc2-alarm-time strong {
  color: #89a5b6;
  font-size: 9px;
}

@media (max-width: 650px) {
  .noc2-alarm {
    grid-template-columns: 78px minmax(0, 1fr);
  }

  .noc2-alarm-time {
    text-align: left;
    grid-column: 2;
    margin-top: 3px;
  }

  .noc2-alarm-problem {
    white-space: normal;
  }
}

.softolts-global-shell {
  min-height: 100vh;
}

.softolts-global-sidebar {
  z-index: 2000;
  background: #071929;
  border-right: 1px solid #173950;
  flex-direction: column;
  width: 205px;
  padding: 14px 10px;
  display: flex;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  overflow-y: auto;
}

.softolts-global-content {
  width: calc(100% - 205px);
  min-height: 100vh;
  margin-left: 205px;
}

.softolts-global-content :has( > .sidebar) {
  grid-template-columns: 1fr !important;
  width: 100% !important;
  max-width: none !important;
  display: block !important;
}

.softolts-global-content .main-content, .softolts-global-content .content {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
}

.softolts-global-brand {
  align-items: center;
  gap: 9px;
  padding: 7px 9px 16px;
  display: flex;
}

.softolts-brand-symbol {
  color: #fff;
  background: #ff3150;
  border-radius: 50%;
  place-items: center;
  width: 34px;
  height: 34px;
  font-size: 12px;
  font-weight: 900;
  display: grid;
}

.softolts-global-brand strong {
  color: #f2f7fb;
  font-size: 16px;
  line-height: 1.05;
  display: block;
}

.softolts-global-brand span {
  color: #6f8da1;
  letter-spacing: .5px;
  margin-top: 4px;
  font-size: 7px;
  display: block;
}

.softolts-global-nav {
  gap: 4px;
  display: grid;
}

.softolts-global-navitem {
  color: #9fc2d7;
  cursor: pointer;
  text-align: left;
  background: none;
  border: 1px solid #0000;
  border-radius: 6px;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  width: 100%;
  min-height: 39px;
  padding: 8px 9px;
  font-family: inherit;
  font-size: 10px;
  text-decoration: none;
  display: grid;
}

.softolts-global-navitem:hover {
  color: #fff;
  background: #0a2a3e;
}

.softolts-global-navitem.active {
  color: #fff;
  background: #0878db;
  border-color: #1788ec;
}

.softolts-global-navitem.compact {
  min-height: 32px;
  margin-left: 9px;
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 9px;
}

.softolts-global-arrow {
  font-size: 12px;
  transition: transform .15s;
}

.softolts-global-arrow.open {
  transform: rotate(180deg);
}

.softolts-global-olt-list {
  background: #051520;
  border: 1px solid #143b52;
  border-radius: 6px;
  gap: 4px;
  margin: 4px 0 6px;
  padding: 5px;
  display: grid;
}

.softolts-global-olt {
  color: #a9c4d4;
  border: 1px solid #0000;
  border-radius: 5px;
  grid-template-columns: 8px minmax(0, 1fr) 12px;
  align-items: center;
  gap: 7px;
  padding: 7px;
  text-decoration: none;
  display: grid;
}

.softolts-global-olt:hover, .softolts-global-olt.selected {
  background: #082538;
  border-color: #1a5776;
}

.softolts-global-olt i {
  background: #718898;
  border-radius: 50%;
  width: 7px;
  height: 7px;
}

.softolts-global-olt i.ok {
  background: #3fe399;
  box-shadow: 0 0 8px #3fe3998c;
}

.softolts-global-olt i.warning {
  background: #f0b943;
}

.softolts-global-olt span {
  min-width: 0;
}

.softolts-global-olt strong, .softolts-global-olt small {
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  overflow: hidden;
}

.softolts-global-olt strong {
  color: inherit;
  font-size: 8px;
}

.softolts-global-olt small {
  color: #648399;
  margin-top: 3px;
  font-size: 7px;
}

.softolts-global-olt b {
  color: #7796aa;
}

.softolts-global-manage {
  color: #65bce9;
  text-align: center;
  padding: 7px;
  font-size: 8px;
  text-decoration: none;
  display: block;
}

.softolts-global-empty {
  color: #668497;
  text-align: center;
  padding: 10px;
  font-size: 8px;
}

.softolts-context-nav {
  border-top: 1px solid #123349;
  gap: 2px;
  margin-top: 5px;
  padding-top: 6px;
  display: grid;
}

.softolts-context-title {
  color: #58768b;
  letter-spacing: .8px;
  padding: 4px 10px;
  font-size: 6px;
  font-weight: 800;
}

.softolts-global-separator {
  background: #14364b;
  height: 1px;
  margin: 8px 5px;
}

.softolts-global-footer {
  border-top: 1px solid #14364b;
  justify-content: space-between;
  align-items: center;
  gap: 5px;
  margin-top: auto;
  padding: 12px 5px 4px;
  display: flex;
}

.softolts-global-version span, .softolts-global-version small {
  display: block;
}

.softolts-global-version span {
  color: #66869a;
  font-size: 7px;
}

.softolts-global-version small {
  color: #466478;
  margin-top: 2px;
  font-size: 6px;
}

.softolts-global-footer button {
  color: #b9cfda;
  cursor: pointer;
  background: #092337;
  border: 1px solid #1c4c68;
  border-radius: 4px;
  padding: 6px 9px;
  font-size: 8px;
}

.dash3-page {
  width: 100%;
  max-width: 1800px;
  margin: 0 auto;
  padding: 22px 24px;
}

.dash3-header {
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 15px;
  display: flex;
}

.dash3-kicker {
  color: #32b9f0;
  letter-spacing: 1px;
  font-size: 9px;
  font-weight: 900;
}

.dash3-header h1 {
  color: #f1f8fc;
  margin: 5px 0 0;
  font-size: 24px;
}

.dash3-header p {
  color: #7392a6;
  margin: 5px 0 0;
  font-size: 10px;
}

.dash3-update {
  grid-template-columns: auto auto;
  align-items: center;
  gap: 3px 12px;
  display: grid;
}

.dash3-update > span {
  color: #b8cfdb;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  display: flex;
}

.dash3-update > span i {
  background: #39e09a;
  border-radius: 50%;
  width: 7px;
  height: 7px;
}

.dash3-update strong {
  color: #638296;
  font-size: 8px;
}

.dash3-update button {
  color: #d8effb;
  cursor: pointer;
  background: #082a40;
  border: 1px solid #1d5d7e;
  border-radius: 5px;
  grid-area: 1 / 2 / 3;
  height: 37px;
  padding: 0 13px;
  font-size: 9px;
  font-weight: 800;
}

.dash3-summary {
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
  display: grid;
}

.dash3-summary article {
  background: #071c29;
  border: 1px solid #184057;
  border-radius: 7px;
  padding: 12px 13px;
}

.dash3-summary article > span {
  color: #7594a8;
  text-transform: uppercase;
  font-size: 8px;
  font-weight: 800;
}

.dash3-summary article > strong {
  color: #edf7fc;
  margin-top: 8px;
  font-size: 29px;
  display: block;
}

.dash3-summary article > small {
  margin-top: 5px;
  font-size: 8px;
  display: block;
}

.dash3-main-grid, .dash3-secondary-grid {
  grid-template-columns: 1fr 1.35fr;
  gap: 9px;
  margin-top: 9px;
  display: grid;
}

.dash3-secondary-grid {
  grid-template-columns: .8fr 1.55fr;
}

.dash3-panel {
  background: #061823;
  border: 1px solid #173f57;
  border-radius: 7px;
  min-width: 0;
  padding: 13px;
}

.dash3-panel-head {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  display: flex;
}

.dash3-panel-head h2 {
  color: #e7f3f9;
  margin: 0;
  font-size: 13px;
}

.dash3-panel-head p {
  color: #6d899c;
  margin: 3px 0 0;
  font-size: 8px;
}

.dash3-panel-head > a {
  color: #72c9f1;
  background: #08263a;
  border: 1px solid #1b5877;
  border-radius: 4px;
  padding: 5px 8px;
  font-size: 8px;
  text-decoration: none;
}

.dash3-donut-layout {
  justify-content: center;
  align-items: center;
  gap: 45px;
  min-height: 210px;
  display: flex;
}

.dash3-donut {
  border-radius: 50%;
  place-items: center;
  width: 160px;
  height: 160px;
  display: grid;
}

.dash3-donut-center {
  background: #061823;
  border-radius: 50%;
  place-items: center;
  width: 105px;
  height: 105px;
  display: grid;
}

.dash3-donut-center strong {
  color: #fff;
  font-size: 26px;
}

.dash3-donut-center span {
  color: #6f8da1;
  margin-top: -24px;
  font-size: 8px;
}

.dash3-legend {
  gap: 9px;
  min-width: 155px;
  display: grid;
}

.dash3-legend > div {
  grid-template-columns: 8px 1fr auto;
  align-items: center;
  gap: 8px;
  display: grid;
}

.dash3-legend i {
  border-radius: 2px;
  width: 8px;
  height: 8px;
}

.dash3-legend i.online {
  background: #28df91;
}

.dash3-legend i.offline {
  background: #ff5e68;
}

.dash3-legend i.dying {
  background: #f0af3e;
}

.dash3-legend i.unknown {
  background: #647c8b;
}

.dash3-legend span {
  color: #8ba5b6;
  font-size: 9px;
}

.dash3-legend strong {
  color: #e2eef5;
  font-size: 11px;
}

.dash3-olt-chart {
  gap: 10px;
  display: grid;
}

.dash3-olt-chart-row {
  background: #071d2a;
  border-radius: 5px;
  grid-template-columns: minmax(180px, .8fr) minmax(220px, 1.4fr) minmax(220px, 1fr);
  align-items: center;
  gap: 11px;
  padding: 9px;
  display: grid;
}

.dash3-olt-chart-title strong, .dash3-olt-chart-title span {
  display: block;
}

.dash3-olt-chart-title strong {
  color: #dcebf3;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
  overflow: hidden;
}

.dash3-olt-chart-title span {
  color: #678497;
  margin-top: 3px;
  font-size: 7px;
}

.dash3-stacked {
  background: #102935;
  border-radius: 3px;
  width: 100%;
  height: 13px;
  display: flex;
  overflow: hidden;
}

.dash3-stacked .online {
  background: #28df91;
}

.dash3-stacked .offline {
  background: #ff5e68;
}

.dash3-stacked .dying {
  background: #f0af3e;
}

.dash3-olt-chart-values {
  justify-content: flex-end;
  gap: 10px;
  font-size: 7px;
  display: flex;
}

.dash3-alarm-bars {
  gap: 14px;
  padding: 7px 4px;
  display: grid;
}

.dash3-alarm-bars header {
  color: #809bac;
  justify-content: space-between;
  margin-bottom: 5px;
  font-size: 9px;
  display: flex;
}

.dash3-bar {
  background: #102935;
  border-radius: 3px;
  width: 100%;
  height: 10px;
  overflow: hidden;
}

.dash3-bar i {
  height: 100%;
  display: block;
}

.dash3-bar .critical {
  background: #ff5e68;
}

.dash3-bar .warning {
  background: #f0af3e;
}

.dash3-alarm-total {
  border-top: 1px solid #16394d;
  justify-content: space-between;
  padding-top: 8px;
  display: flex;
}

.dash3-alarm-total span {
  color: #738fa1;
  font-size: 9px;
}

.dash3-alarm-total strong {
  color: #fff;
  font-size: 16px;
}

.dash3-problems {
  gap: 5px;
  display: grid;
}

.dash3-problem {
  background: #071d2a;
  border-radius: 4px;
  grid-template-columns: 72px minmax(0, 1fr) 45px;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  display: grid;
}

.dash3-severity {
  text-align: center;
  border-radius: 3px;
  padding: 4px 5px;
  font-size: 7px;
  font-weight: 900;
}

.dash3-severity.critical {
  color: #ff8a90;
  background: #321318;
}

.dash3-severity.warning {
  color: #efbf61;
  background: #302710;
}

.dash3-problem > div {
  min-width: 0;
}

.dash3-problem strong, .dash3-problem span, .dash3-problem small {
  display: block;
}

.dash3-problem strong {
  color: #e1edf4;
  font-size: 9px;
}

.dash3-problem span {
  color: #69879a;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 2px;
  font-size: 7px;
  overflow: hidden;
}

.dash3-problem small {
  color: #a2b7c4;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 3px;
  font-size: 7px;
  overflow: hidden;
}

.dash3-problem time {
  color: #6e899a;
  text-align: right;
  font-size: 7px;
}

.dash3-last-jobs {
  margin-top: 9px;
}

.dash3-jobs {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  display: grid;
}

.dash3-jobs > div {
  background: #071d2a;
  border-radius: 4px;
  padding: 8px;
  position: relative;
}

.dash3-jobs strong, .dash3-jobs span {
  display: block;
}

.dash3-jobs strong {
  color: #deebf3;
  font-size: 8px;
}

.dash3-jobs span {
  color: #6b899b;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 3px;
  font-size: 7px;
  overflow: hidden;
}

.dash3-jobs b {
  border-radius: 3px;
  padding: 3px 5px;
  font-size: 6px;
  position: absolute;
  top: 7px;
  right: 7px;
}

.dash3-jobs b.success {
  color: #40df96;
  background: #08271d;
}

.dash3-jobs b.failed {
  color: #ff757d;
  background: #321318;
}

.dash3-footer {
  color: #5f7b8f;
  justify-content: space-between;
  padding: 9px 2px;
  font-size: 7px;
  display: flex;
}

.dash3-inline-error, .dash3-error {
  color: #ff8b91;
  background: #2c1116;
  border: 1px solid #71313a;
  border-radius: 5px;
  padding: 10px;
}

.dash3-loading {
  color: #7290a2;
  text-align: center;
  padding: 100px;
}

@media (max-width: 1100px) {
  .dash3-summary {
    grid-template-columns: repeat(2, 1fr);
  }

  .dash3-main-grid, .dash3-secondary-grid {
    grid-template-columns: 1fr;
  }

  .dash3-jobs {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 760px) {
  .softolts-global-sidebar {
    width: 175px;
  }

  .softolts-global-content {
    width: calc(100% - 175px);
    margin-left: 175px;
  }

  .dash3-page {
    padding: 12px;
  }

  .dash3-summary, .dash3-olt-chart-row {
    grid-template-columns: 1fr;
  }

  .dash3-donut-layout {
    flex-direction: column;
    gap: 20px;
  }

  .dash3-jobs {
    grid-template-columns: 1fr;
  }
}

.softolts-global-sidebar {
  width: 220px;
  padding-left: 12px;
  padding-right: 12px;
}

.softolts-global-content {
  width: calc(100% - 220px);
  margin-left: 220px;
}

.softolts-global-brand strong {
  font-size: 17px;
}

.softolts-global-brand span {
  font-size: 9px;
}

.softolts-brand-symbol {
  width: 36px;
  height: 36px;
  font-size: 13px;
}

.softolts-global-navitem {
  min-height: 42px;
  padding: 9px 10px;
  font-size: 12px;
}

.softolts-global-navitem.compact {
  min-height: 36px;
  font-size: 11px;
}

.softolts-nav-icon {
  font-size: 14px;
}

.softolts-global-olt {
  padding: 9px 8px;
}

.softolts-global-olt strong {
  font-size: 10px;
}

.softolts-global-olt small {
  margin-top: 4px;
  font-size: 9px;
}

.softolts-global-manage {
  padding: 9px 5px;
  font-size: 10px;
}

.softolts-context-title {
  font-size: 8px;
}

.softolts-global-version span {
  font-size: 9px;
}

.softolts-global-version small {
  font-size: 8px;
}

.softolts-global-footer button {
  padding: 7px 10px;
  font-size: 10px;
}

.dash3-page {
  padding: 20px 22px;
}

.dash3-kicker {
  font-size: 11px;
}

.dash3-header h1 {
  font-size: 27px;
}

.dash3-header p {
  font-size: 12px;
}

.dash3-update > span {
  font-size: 11px;
}

.dash3-update strong {
  font-size: 10px;
}

.dash3-update button {
  height: 40px;
  padding: 0 15px;
  font-size: 11px;
}

.dash3-summary article {
  min-height: 105px;
  padding: 15px 16px;
}

.dash3-summary article > span {
  font-size: 10px;
}

.dash3-summary article > strong {
  margin-top: 9px;
  font-size: 32px;
}

.dash3-summary article > small {
  margin-top: 6px;
  font-size: 10px;
}

.dash3-panel {
  padding: 15px;
}

.dash3-panel-head {
  margin-bottom: 14px;
}

.dash3-panel-head h2 {
  font-size: 16px;
}

.dash3-panel-head p {
  margin-top: 4px;
  font-size: 10px;
}

.dash3-panel-head > a {
  padding: 7px 10px;
  font-size: 10px;
}

.dash3-donut-center strong {
  font-size: 29px;
}

.dash3-donut-center span {
  font-size: 10px;
}

.dash3-legend {
  gap: 11px;
  min-width: 185px;
}

.dash3-legend > div {
  grid-template-columns: 10px 1fr auto;
  gap: 9px;
}

.dash3-legend i {
  width: 9px;
  height: 9px;
}

.dash3-legend span {
  font-size: 11px;
}

.dash3-legend strong {
  font-size: 13px;
}

.dash3-olt-chart-row {
  padding: 11px;
}

.dash3-olt-chart-title strong {
  font-size: 11px;
}

.dash3-olt-chart-title span {
  margin-top: 4px;
  font-size: 9px;
}

.dash3-stacked {
  height: 15px;
}

.dash3-olt-chart-values {
  gap: 12px;
  font-size: 9px;
}

.dash3-alarm-bars {
  gap: 17px;
}

.dash3-alarm-bars header {
  font-size: 11px;
}

.dash3-bar {
  height: 12px;
}

.dash3-alarm-total span {
  font-size: 11px;
}

.dash3-alarm-total strong {
  font-size: 19px;
}

.dash3-problems {
  gap: 7px;
}

.dash3-problem {
  grid-template-columns: 82px minmax(0, 1fr) 52px;
  min-height: 58px;
  padding: 9px 10px;
}

.dash3-severity {
  padding: 5px 6px;
  font-size: 9px;
}

.dash3-problem strong {
  font-size: 11px;
}

.dash3-problem span {
  margin-top: 3px;
  font-size: 9px;
}

.dash3-problem small {
  white-space: normal;
  margin-top: 4px;
  font-size: 9px;
  line-height: 1.35;
}

.dash3-problem time {
  font-size: 9px;
}

.dash3-jobs > div {
  min-height: 55px;
  padding: 10px;
}

.dash3-jobs strong {
  font-size: 10px;
}

.dash3-jobs span {
  margin-top: 4px;
  font-size: 9px;
}

.dash3-jobs b {
  padding: 4px 6px;
  font-size: 8px;
}

.dash3-footer {
  padding-top: 11px;
  font-size: 9px;
}

.softolts-global-content .panel-title h3 {
  font-size: 14px;
}

.softolts-global-content .panel-title span {
  font-size: 9px;
}

.softolts-global-content label, .softolts-global-content small {
  line-height: 1.35;
}

.softolts-global-olt-list {
  gap: 5px;
}

.softolts-global-olt b {
  font-size: 14px;
}

@media (min-width: 1600px) {
  .dash3-page {
    max-width: 1900px;
  }

  .dash3-summary article > span, .dash3-summary article > small {
    font-size: 11px;
  }

  .dash3-panel-head h2 {
    font-size: 17px;
  }

  .dash3-panel-head p {
    font-size: 11px;
  }

  .dash3-legend span, .dash3-problem strong {
    font-size: 12px;
  }

  .dash3-problem span, .dash3-problem small {
    font-size: 10px;
  }
}

@media (max-width: 900px) {
  .softolts-global-sidebar {
    width: 190px;
  }

  .softolts-global-content {
    width: calc(100% - 190px);
    margin-left: 190px;
  }
}

.dash3-summary-link {
  color: inherit;
  text-decoration: none;
  display: block;
}

.dash3-summary-link article {
  height: 100%;
  transition: border-color .15s, background .15s, transform .15s;
  position: relative;
}

.dash3-summary-link:hover article {
  background: #092231;
  border-color: #27779d;
  transform: translateY(-1px);
}

.dash3-open-hint {
  color: #5899bb;
  opacity: .75;
  font-size: 9px;
  font-weight: 700;
  position: absolute;
  bottom: 11px;
  right: 13px;
}

.dash3-summary-link:hover .dash3-open-hint {
  color: #8bd8ff;
  opacity: 1;
}

.dash3-clickable {
  color: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, border-color .15s;
}

.dash3-clickable:hover {
  background: #092636;
  outline: 1px solid #226d91;
}

.dash3-olt-chart-values b {
  color: #66bde7;
  font-size: 9px;
}

.dash3-alarm-bar-link {
  color: inherit;
  border-radius: 4px;
  padding: 5px;
  text-decoration: none;
  display: block;
}

.dash3-alarm-bar-link:hover {
  background: #092331;
}

.dash3-problem-link {
  color: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, outline .15s;
}

.dash3-problem-link:hover {
  background: #0a2939;
  outline: 1px solid #236b8c;
}

.dash3-problem-link time {
  gap: 4px;
  display: grid;
}

.dash3-problem-link time b {
  color: #58acd5;
  font-size: 8px;
  font-weight: 700;
}

.dash3-job-link {
  min-height: 55px;
  color: inherit;
  background: #071d2a;
  border: 1px solid #0000;
  border-radius: 4px;
  padding: 10px;
  text-decoration: none;
  transition: background .15s, border-color .15s;
  display: block;
  position: relative;
}

.dash3-job-link:hover {
  background: #092536;
  border-color: #1f6484;
}

.dash3-job-link > strong, .dash3-job-link > span {
  display: block;
}

.dash3-job-link > strong {
  color: #deebf3;
  font-size: 10px;
}

.dash3-job-link > span {
  color: #6b899b;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 4px;
  font-size: 9px;
  overflow: hidden;
}

.dash3-job-link > b {
  border-radius: 3px;
  padding: 4px 6px;
  font-size: 8px;
  position: absolute;
  top: 8px;
  right: 8px;
}

.dash3-job-link > b.success {
  color: #40df96;
  background: #08271d;
}

.dash3-job-link > b.failed {
  color: #ff757d;
  background: #321318;
}

.softolts-global-shell {
  width: 100% !important;
  min-height: 100vh !important;
  display: block !important;
  position: relative !important;
}

.softolts-global-sidebar {
  z-index: 9999 !important;
  visibility: visible !important;
  opacity: 1 !important;
  background: #071929 !important;
  border-right: 1px solid #173950 !important;
  flex-direction: column !important;
  width: 220px !important;
  min-width: 220px !important;
  height: 100vh !important;
  display: flex !important;
  position: fixed !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  overflow: hidden auto !important;
}

.softolts-global-content {
  overflow-x: hidden;
  width: calc(100% - 220px) !important;
  min-width: 0 !important;
  min-height: 100vh !important;
  margin-left: 220px !important;
  display: block !important;
}

.softolts-global-content .sidebar {
  display: none !important;
}

.softolts-global-shell > .softolts-global-sidebar {
  display: flex !important;
}

.softolts-global-content .app-shell, .softolts-global-content .layout, .softolts-global-content .page-layout {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
}

.softolts-global-content .dash3-page {
  width: 100% !important;
  max-width: 1900px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 900px) {
  .softolts-global-sidebar {
    width: 190px !important;
    min-width: 190px !important;
  }

  .softolts-global-content {
    width: calc(100% - 190px) !important;
    margin-left: 190px !important;
  }
}

.olt2-page, .alarm2-page {
  width: 100%;
  max-width: 1750px;
  margin: 0 auto;
  padding: 22px 24px;
}

.olt2-header, .alarm2-header {
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 15px;
  display: flex;
}

.olt2-kicker, .alarm2-kicker {
  color: #36baf0;
  letter-spacing: 1px;
  font-size: 10px;
  font-weight: 900;
}

.olt2-header h1, .alarm2-header h1 {
  color: #eef8fd;
  margin: 4px 0 0;
  font-size: 26px;
}

.olt2-header p, .alarm2-header p {
  color: #7694a8;
  margin: 5px 0 0;
  font-size: 11px;
}

.olt2-header-actions {
  gap: 8px;
  display: flex;
}

.olt2-header-actions button, .alarm2-header > button {
  color: #bcd9e8;
  cursor: pointer;
  background: #09293c;
  border: 1px solid #1d5f80;
  border-radius: 5px;
  padding: 9px 12px;
  font-size: 10px;
}

.olt2-register {
  color: #fff;
  background: #0780e8;
  border: 1px solid #168cf3;
  border-radius: 5px;
  padding: 10px 13px;
  font-size: 10px;
  font-weight: 800;
  text-decoration: none;
}

.olt2-summary, .alarm2-summary {
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 11px;
  display: grid;
}

.alarm2-summary {
  grid-template-columns: repeat(3, 1fr);
}

.olt2-summary article, .alarm2-summary article {
  background: #071c29;
  border: 1px solid #184158;
  border-radius: 6px;
  padding: 11px 13px;
}

.olt2-summary span, .alarm2-summary span {
  color: #7594a8;
  text-transform: uppercase;
  font-size: 9px;
  font-weight: 800;
}

.olt2-summary strong, .alarm2-summary strong {
  color: #eaf5fb;
  margin-top: 6px;
  font-size: 24px;
  display: block;
}

.olt2-toolbar {
  background: #061823;
  border: 1px solid #173e56;
  border-radius: 6px;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  padding: 10px;
  display: flex;
}

.olt2-search {
  background: #071d2a;
  border: 1px solid #1a4d69;
  border-radius: 5px;
  align-items: center;
  width: min(450px, 100%);
  display: flex;
}

.olt2-search span {
  color: #7395aa;
  padding-left: 10px;
  font-size: 14px;
}

.olt2-search input {
  color: #e5f2f8;
  background: none;
  border: 0;
  outline: 0;
  width: 100%;
  padding: 9px 10px;
  font-size: 10px;
}

.olt2-filters {
  flex-wrap: wrap;
  gap: 5px;
  display: flex;
}

.olt2-filters button {
  color: #8eb3c7;
  cursor: pointer;
  background: #082436;
  border: 1px solid #174b67;
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 9px;
}

.olt2-filters button.active {
  color: #fff;
  background: #087dde;
  border-color: #1689ec;
}

.olt2-list {
  gap: 9px;
  display: grid;
}

.olt2-card {
  background: #061823;
  border: 1px solid #19445d;
  border-radius: 7px;
  padding: 13px;
}

.olt2-card-top {
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  display: flex;
}

.olt2-identity {
  align-items: center;
  gap: 11px;
  min-width: 0;
  display: flex;
}

.olt2-icon {
  color: #8aa6b7;
  background: #102834;
  border: 1px solid #385366;
  border-radius: 6px;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  font-size: 9px;
  font-weight: 900;
  display: grid;
}

.olt2-icon.ok {
  color: #42e09a;
  background: #09291e;
  border-color: #1d704e;
}

.olt2-icon.warning {
  color: #efbd5e;
  background: #30270f;
  border-color: #6c591e;
}

.olt2-identity h2 {
  color: #edf7fc;
  margin: 0;
  font-size: 15px;
}

.olt2-identity p {
  color: #7593a6;
  margin: 4px 0 0;
  font-size: 10px;
}

.olt2-state-area {
  text-align: right;
}

.olt2-state {
  border-radius: 4px;
  align-items: center;
  gap: 5px;
  padding: 5px 7px;
  font-size: 9px;
  font-weight: 800;
  display: inline-flex;
}

.olt2-state i {
  border-radius: 50%;
  width: 6px;
  height: 6px;
}

.olt2-state.ok {
  color: #43df97;
  background: #09281e;
  border: 1px solid #1d6748;
}

.olt2-state.ok i {
  background: #43df97;
}

.olt2-state.warning {
  color: #efbd5d;
  background: #30270f;
  border: 1px solid #69571e;
}

.olt2-state.warning i {
  background: #efbd5d;
}

.olt2-state-area small {
  color: #6d899c;
  margin-top: 5px;
  font-size: 8px;
  display: block;
}

.olt2-card-body {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-top: 11px;
  display: grid;
}

.olt2-metrics {
  grid-template-columns: repeat(6, minmax(85px, 1fr));
  gap: 5px;
  display: grid;
}

.olt2-metrics > div {
  text-align: center;
  background: #071d2a;
  border-radius: 5px;
  padding: 8px 7px;
}

.olt2-metrics span, .olt2-metrics strong {
  display: block;
}

.olt2-metrics span {
  color: #718ea1;
  font-size: 8px;
}

.olt2-metrics strong {
  color: #dcebf3;
  margin-top: 4px;
  font-size: 15px;
}

.olt2-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
  display: flex;
}

.olt2-actions a {
  color: #9fcce2;
  background: #082638;
  border: 1px solid #1b5371;
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 9px;
  font-weight: 700;
  text-decoration: none;
}

.olt2-actions a.primary {
  color: #fff;
  background: #087fe6;
  border-color: #148cf4;
}

.olt2-actions a:hover {
  filter: brightness(1.15);
}

.olt2-attention {
  color: #cfdae0;
  background: #241e0e;
  border: 1px solid #58491a;
  border-radius: 4px;
  align-items: center;
  gap: 6px;
  margin-top: 9px;
  padding: 7px 9px;
  font-size: 9px;
  display: flex;
}

.olt2-attention strong {
  color: #f2bf5e;
}

.olt2-attention a {
  color: #78c9ed;
  margin-left: auto;
  font-size: 9px;
  text-decoration: none;
}

.olt2-empty, .olt2-loading {
  color: #7391a4;
  text-align: center;
  padding: 50px;
}

.olt2-error, .alarm2-error {
  color: #ff9298;
  background: #2d1217;
  border: 1px solid #71323b;
  border-radius: 5px;
  margin-bottom: 10px;
  padding: 9px;
}

.alarm2-tools {
  grid-template-columns: auto minmax(250px, 1fr) 170px;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  display: grid;
}

.alarm2-tabs {
  gap: 4px;
  display: flex;
}

.alarm2-tabs button {
  color: #86a9bd;
  cursor: pointer;
  background: #082335;
  border: 1px solid #174a66;
  border-radius: 4px;
  padding: 9px 12px;
  font-size: 10px;
}

.alarm2-tabs button.active {
  color: #fff;
  background: #087fe6;
  border-color: #148cf4;
}

.alarm2-search input, .alarm2-tools select {
  color: #dcecf4;
  background: #071d2a;
  border: 1px solid #194c68;
  border-radius: 4px;
  outline: none;
  width: 100%;
  padding: 9px 10px;
  font-size: 10px;
}

.alarm2-list {
  background: #061823;
  border: 1px solid #173f57;
  border-radius: 7px;
  gap: 5px;
  padding: 10px;
  display: grid;
}

.alarm2-row {
  background: #071d2a;
  border: 1px solid #153a51;
  border-radius: 4px;
  grid-template-columns: 90px minmax(220px, 1.4fr) minmax(180px, .9fr) 165px 90px 90px;
  align-items: center;
  gap: 9px;
  min-height: 65px;
  padding: 8px 9px;
  display: grid;
}

.alarm2-severity {
  text-align: center;
  border-radius: 4px;
  padding: 5px 6px;
  font-size: 8px;
  font-weight: 900;
}

.alarm2-severity.critical {
  color: #ff838b;
  background: #321318;
}

.alarm2-severity.warning {
  color: #f2c05f;
  background: #31280f;
}

.alarm2-severity.info {
  color: #75c9f0;
  background: #09293c;
}

.alarm2-problem strong, .alarm2-problem span, .alarm2-location strong, .alarm2-location span, .alarm2-start small, .alarm2-start strong {
  display: block;
}

.alarm2-problem strong {
  color: #e7f1f6;
  font-size: 11px;
}

.alarm2-problem span {
  color: #a0b6c3;
  margin-top: 4px;
  font-size: 9px;
  line-height: 1.35;
}

.alarm2-location strong {
  color: #bed3df;
  font-size: 9px;
}

.alarm2-location span {
  color: #708ea1;
  margin-top: 4px;
  font-size: 9px;
}

.alarm2-start small {
  color: #6f8c9f;
  font-size: 8px;
}

.alarm2-start strong {
  color: #b6ccd8;
  margin-top: 4px;
  font-size: 9px;
}

.alarm2-status span {
  border-radius: 4px;
  padding: 5px 7px;
  font-size: 8px;
  font-weight: 800;
  display: inline-block;
}

.alarm2-status span.active {
  color: #f2c15d;
  background: #2e270f;
}

.alarm2-status span.resolved {
  color: #42df97;
  background: #09281e;
}

.alarm2-open {
  color: #fff;
  text-align: center;
  background: #087fe6;
  border-radius: 4px;
  padding: 7px 8px;
  font-size: 9px;
  font-weight: 800;
  text-decoration: none;
}

.alarm2-empty {
  color: #708da0;
  text-align: center;
  padding: 40px;
}

@media (max-width: 1200px) {
  .olt2-metrics {
    grid-template-columns: repeat(3, 1fr);
  }

  .olt2-card-body {
    grid-template-columns: 1fr;
  }

  .olt2-actions {
    justify-content: flex-start;
  }

  .alarm2-row {
    grid-template-columns: 80px minmax(200px, 1fr) minmax(150px, .7fr) 140px;
  }

  .alarm2-status, .alarm2-open {
    grid-column: auto;
  }
}

@media (max-width: 760px) {
  .olt2-page, .alarm2-page {
    padding: 12px;
  }

  .olt2-header, .alarm2-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .olt2-summary, .alarm2-summary {
    grid-template-columns: repeat(2, 1fr);
  }

  .olt2-toolbar, .alarm2-tools {
    grid-template-columns: 1fr;
    display: grid;
  }

  .olt2-card-top {
    flex-direction: column;
    align-items: flex-start;
  }

  .olt2-state-area {
    text-align: left;
  }

  .olt2-metrics {
    grid-template-columns: repeat(2, 1fr);
  }

  .alarm2-row {
    grid-template-columns: 1fr;
  }
}

.dash4-page {
  color: #e9f4fa;
  width: 100%;
  max-width: 1840px;
  margin: 0 auto;
  padding: 20px 22px 12px;
}

.dash4-header {
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-bottom: 17px;
  display: flex;
}

.dash4-kicker {
  color: #25c6f5;
  letter-spacing: 1.2px;
  font-size: 11px;
  font-weight: 900;
}

.dash4-header h1 {
  color: #f5f9fc;
  margin: 5px 0 0;
  font-size: 30px;
  line-height: 1.08;
}

.dash4-header p {
  color: #8ba7b9;
  margin: 7px 0 0;
  font-size: 13px;
}

.dash4-header-actions {
  align-items: center;
  gap: 10px;
  display: flex;
}

.dash4-auto {
  align-items: center;
  gap: 9px;
  min-width: 190px;
  padding: 7px 10px;
  display: flex;
}

.dash4-auto > i {
  background: #2be3a0;
  border-radius: 50%;
  flex: none;
  width: 8px;
  height: 8px;
  box-shadow: 0 0 11px #2be3a0a6;
}

.dash4-auto strong, .dash4-auto span {
  display: block;
}

.dash4-auto strong {
  color: #cbe0ea;
  font-size: 10px;
}

.dash4-auto span {
  color: #708fa2;
  margin-top: 2px;
  font-size: 9px;
}

.dash4-refresh {
  color: #eef9ff;
  cursor: pointer;
  background: linear-gradient(#0c4b84, #083661);
  border: 1px solid #147bd1;
  border-radius: 7px;
  align-items: center;
  gap: 7px;
  height: 42px;
  padding: 0 14px;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  box-shadow: inset 0 1px #ffffff0f;
}

.dash4-refresh span {
  font-size: 18px;
  line-height: 1;
}

.dash4-refresh:hover {
  filter: brightness(1.12);
}

.dash4-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 11px;
  display: grid;
}

.dash4-stat {
  min-height: 118px;
  color: inherit;
  background: linear-gradient(145deg, #082231, #061923);
  border: 1px solid #17445f;
  border-radius: 8px;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  padding: 14px;
  text-decoration: none;
  transition: transform .15s, border-color .15s, background .15s;
  display: grid;
  position: relative;
  overflow: hidden;
}

.dash4-stat:after {
  content: "";
  background: linear-gradient(90deg, #0000, #2abef438, #0000);
  height: 1px;
  position: absolute;
  inset: auto 0 0;
}

.dash4-stat:hover {
  background: linear-gradient(145deg, #0a2a3b, #071d29);
  border-color: #2781aa;
  transform: translateY(-2px);
}

.dash4-stat-icon {
  border-radius: 8px;
  place-items: center;
  width: 56px;
  height: 56px;
  display: grid;
}

.dash4-stat-icon svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8px;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 31px;
  height: 31px;
}

.dash4-stat-icon.green {
  color: #24e2a0;
  background: #0a6a4b47;
  border: 1px solid #129966;
}

.dash4-stat-icon.teal {
  color: #28d7c4;
  background: #0a5f5642;
  border: 1px solid #147d71;
}

.dash4-stat-icon.red {
  color: #ff4961;
  background: #7c1b2b45;
  border: 1px solid #8a2e3d;
}

.dash4-stat-icon.yellow {
  color: #f6b73f;
  background: #7e580d40;
  border: 1px solid #8d6818;
}

.dash4-stat-content {
  min-width: 0;
}

.dash4-stat-content > span {
  color: #b9d0dc;
  font-size: 11px;
  font-weight: 800;
  display: block;
}

.dash4-stat-content > strong {
  color: #f2f9fc;
  margin-top: 5px;
  font-size: 34px;
  line-height: 1;
  display: block;
}

.dash4-stat-content > small {
  color: #819dad;
  white-space: nowrap;
  margin-top: 8px;
  font-size: 9px;
  display: block;
}

.dash4-stat-content small b {
  font-weight: 700;
}

.dash4-stat-side {
  flex-direction: column;
  justify-content: space-between;
  align-self: stretch;
  align-items: flex-end;
  padding: 3px 0;
  display: flex;
}

.dash4-stat-side > span {
  color: #5597ba;
  font-size: 8px;
}

.dash4-pill {
  white-space: nowrap;
  border-radius: 12px;
  padding: 5px 8px;
  font-size: 9px;
  font-weight: 900;
  display: inline-block;
}

.dash4-pill.green, .dash4-pill.teal {
  color: #2de4a0;
  background: #082b21;
  border: 1px solid #0c8e5d;
}

.dash4-pill.red {
  color: #ff6476;
  background: #32141a;
  border: 1px solid #7a2836;
}

.dash4-pill.yellow {
  color: #f8bd44;
  background: #302610;
  border: 1px solid #725718;
}

.green-text {
  color: #27dea0 !important;
}

.red-text {
  color: #ff5a6b !important;
}

.yellow-text {
  color: #f3b73e !important;
}

.dash4-network-grid {
  grid-template-columns: minmax(420px, .92fr) minmax(560px, 1.15fr);
  gap: 11px;
  margin-top: 11px;
  display: grid;
}

.dash4-panel {
  background: linear-gradient(145deg, #061d2a, #051823);
  border: 1px solid #17425b;
  border-radius: 8px;
  min-width: 0;
  padding: 15px;
  box-shadow: inset 0 1px #ffffff05;
}

.dash4-panel-head {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 13px;
  display: flex;
}

.dash4-panel-head h2 {
  color: #f1f7fb;
  margin: 0;
  font-size: 17px;
}

.dash4-panel-head p {
  color: #7895a7;
  margin: 4px 0 0;
  font-size: 10px;
}

.dash4-panel-head > a {
  color: #7dd5fa;
  background: #082b41;
  border: 1px solid #1b658a;
  border-radius: 5px;
  padding: 6px 9px;
  font-size: 9px;
  font-weight: 700;
  text-decoration: none;
}

.dash4-panel-head > a:hover {
  color: #fff;
  border-color: #2ea4d7;
}

.dash4-onu-state {
  grid-template-columns: minmax(0, 1.25fr) minmax(165px, .62fr);
  align-items: center;
  gap: 18px;
  min-height: 250px;
  display: grid;
}

.dash4-donut-area {
  justify-content: center;
  align-items: center;
  gap: 33px;
  display: flex;
}

.dash4-donut {
  filter: drop-shadow(0 8px 20px #0000002e);
  border-radius: 50%;
  flex: none;
  place-items: center;
  width: 178px;
  height: 178px;
  display: grid;
}

.dash4-donut-inner {
  background: radial-gradient(circle at 50% 35%, #0a2a38, #061824 70%);
  border-radius: 50%;
  place-items: center;
  width: 116px;
  height: 116px;
  display: grid;
  box-shadow: inset 0 0 0 1px #163c51;
}

.dash4-donut-inner strong {
  color: #fff;
  font-size: 34px;
  line-height: 1;
}

.dash4-donut-inner span {
  color: #72a0b8;
  margin-top: -24px;
  font-size: 9px;
}

.dash4-donut-legend {
  gap: 8px;
  min-width: 180px;
  display: grid;
}

.dash4-donut-legend > div {
  grid-template-columns: 10px 1fr 28px 43px;
  align-items: center;
  gap: 7px;
  min-height: 26px;
  display: grid;
}

.dash4-donut-legend i {
  border-radius: 2px;
  width: 9px;
  height: 9px;
}

.dash4-donut-legend i.online {
  background: #2d9;
}

.dash4-donut-legend i.offline {
  background: #ff5768;
}

.dash4-donut-legend i.power {
  background: #f6b43b;
}

.dash4-donut-legend i.unknown {
  background: #688495;
}

.dash4-donut-legend span {
  color: #9eb8c7;
  font-size: 10px;
}

.dash4-donut-legend strong {
  color: #ecf5f9;
  text-align: right;
  font-size: 11px;
}

.dash4-donut-legend small {
  color: #6e8b9c;
  text-align: right;
  font-size: 8px;
}

.dash4-state-cards {
  gap: 7px;
  display: grid;
}

.dash4-state-cards article {
  border-radius: 6px;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 8px;
  min-height: 50px;
  padding: 8px 10px;
  display: grid;
}

.dash4-state-cards article.online {
  background: linear-gradient(90deg, #0a553d6b, #07281f4d);
  border: 1px solid #146c4a;
}

.dash4-state-cards article.offline {
  background: linear-gradient(90deg, #5a162373, #2f0d134d);
  border: 1px solid #71303b;
}

.dash4-state-cards article.power {
  background: linear-gradient(90deg, #61460e75, #2e230b4d);
  border: 1px solid #715619;
}

.dash4-state-cards article.unknown {
  background: #0a2635;
  border: 1px solid #294758;
}

.dash4-state-symbol {
  color: #9dc3d6;
  text-align: center;
  font-size: 20px;
}

.dash4-state-cards article.online .dash4-state-symbol {
  color: #2ae4a2;
}

.dash4-state-cards article.offline .dash4-state-symbol {
  color: #ff5f71;
}

.dash4-state-cards article.power .dash4-state-symbol {
  color: #f5b73f;
}

.dash4-state-cards article strong, .dash4-state-cards article span {
  display: block;
}

.dash4-state-cards article strong {
  color: #eef7fb;
  font-size: 16px;
}

.dash4-state-cards article div > span {
  color: #89a7b8;
  margin-top: 2px;
  font-size: 8px;
}

.dash4-state-cards article > b {
  font-size: 10px;
}

.dash4-state-cards article.online > b {
  color: #2ee4a4;
}

.dash4-state-cards article.offline > b {
  color: #ff6576;
}

.dash4-state-cards article.power > b {
  color: #f8bd48;
}

.dash4-state-cards article.unknown > b {
  color: #87a1b0;
}

.dash4-olt-list {
  gap: 7px;
  display: grid;
}

.dash4-olt-row {
  color: inherit;
  background: linear-gradient(90deg, #082330, #071d29);
  border: 1px solid #0000;
  border-radius: 6px;
  grid-template-columns: minmax(210px, .82fr) minmax(300px, 1.35fr) 55px 78px;
  align-items: center;
  gap: 12px;
  padding: 12px;
  text-decoration: none;
  transition: background .15s, border-color .15s;
  display: grid;
}

.dash4-olt-row:hover {
  background: #0a2a39;
  border-color: #20698d;
}

.dash4-olt-name {
  align-items: center;
  gap: 9px;
  min-width: 0;
  display: flex;
}

.dash4-olt-name > i {
  border-radius: 3px;
  flex: none;
  width: 10px;
  height: 10px;
}

.dash4-olt-name > i.ok {
  background: #21dc98;
  box-shadow: 0 0 8px #21dc9866;
}

.dash4-olt-name > i.warning {
  background: #f4b53e;
}

.dash4-olt-name div {
  min-width: 0;
}

.dash4-olt-name strong, .dash4-olt-name span {
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  overflow: hidden;
}

.dash4-olt-name strong {
  color: #eef7fb;
  font-size: 11px;
}

.dash4-olt-name span {
  color: #6f90a3;
  margin-top: 4px;
  font-size: 8px;
}

.dash4-olt-health {
  min-width: 0;
}

.dash4-olt-bar {
  background: #0d2a37;
  border-radius: 5px;
  width: 100%;
  height: 14px;
  display: flex;
  overflow: hidden;
}

.dash4-olt-bar i {
  height: 100%;
  display: block;
}

.dash4-olt-bar i.online {
  background: #25dc9b;
}

.dash4-olt-bar i.offline {
  background: #ff5b6b;
}

.dash4-olt-bar i.power {
  background: #f3b33a;
}

.dash4-olt-health-legend {
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 7px;
  display: flex;
}

.dash4-olt-health-legend span {
  font-size: 8px;
}

.dash4-olt-total {
  text-align: center;
}

.dash4-olt-total strong, .dash4-olt-total span {
  display: block;
}

.dash4-olt-total strong {
  color: #f1f8fb;
  font-size: 14px;
}

.dash4-olt-total span {
  color: #6e8b9c;
  font-size: 8px;
}

.dash4-open-button {
  color: #fff;
  text-align: center;
  background: linear-gradient(#0788f2, #076dcb);
  border-radius: 5px;
  padding: 7px 9px;
  font-size: 9px;
  font-weight: 800;
  display: inline-block;
}

.dash4-bottom-grid {
  grid-template-columns: minmax(380px, .78fr) minmax(600px, 1.42fr);
  gap: 11px;
  margin-top: 11px;
  display: grid;
}

.dash4-left-column {
  gap: 11px;
  display: grid;
}

.dash4-severity-cards {
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  display: grid;
}

.dash4-severity-cards > a {
  min-height: 103px;
  color: inherit;
  border-radius: 7px;
  grid-template-columns: 32px 1fr;
  align-items: center;
  gap: 8px;
  padding: 10px;
  text-decoration: none;
  display: grid;
}

.dash4-severity-cards > a.critical {
  background: linear-gradient(145deg, #64172775, #2d0c126b);
  border: 1px solid #7a2b3b;
}

.dash4-severity-cards > a.warning {
  background: linear-gradient(145deg, #61470e6b, #2b200966);
  border: 1px solid #705719;
}

.dash4-severity-cards > a.info {
  background: linear-gradient(145deg, #0a436b6e, #06233666);
  border: 1px solid #1e5d83;
}

.dash4-severity-icon {
  border-radius: 50%;
  place-items: center;
  width: 30px;
  height: 30px;
  font-size: 16px;
  font-weight: 900;
  display: grid;
}

.dash4-severity-cards .critical .dash4-severity-icon {
  color: #ff5c6d;
}

.dash4-severity-cards .warning .dash4-severity-icon {
  color: #f4b43c;
}

.dash4-severity-cards .info .dash4-severity-icon {
  color: #43baff;
}

.dash4-severity-cards strong {
  color: #f4f9fc;
  font-size: 20px;
}

.dash4-severity-cards small {
  color: #b7c8d1;
  grid-column: 2;
  margin-top: -8px;
  font-size: 9px;
}

.dash4-severity-cards > a > i {
  background: #ffffff12;
  border-radius: 5px;
  grid-column: 1 / -1;
  width: 100%;
  height: 7px;
  display: block;
  overflow: hidden;
}

.dash4-severity-cards > a > i > b {
  border-radius: 5px;
  height: 100%;
  display: block;
}

.dash4-severity-cards .critical > i > b {
  background: #ff5367;
}

.dash4-severity-cards .warning > i > b {
  background: #f3b63f;
}

.dash4-severity-cards .info > i > b {
  background: #2aaef2;
}

.dash4-operations {
  min-height: 200px;
}

.dash4-job-list {
  gap: 5px;
  display: grid;
}

.dash4-job {
  min-height: 42px;
  color: inherit;
  background: #08212e;
  border: 1px solid #0000;
  border-radius: 4px;
  grid-template-columns: 25px minmax(125px, .8fr) minmax(70px, .55fr) 60px 105px;
  align-items: center;
  gap: 7px;
  padding: 6px 7px;
  text-decoration: none;
  display: grid;
}

.dash4-job:hover {
  border-color: #1c5e7d;
}

.dash4-job-symbol {
  border-radius: 50%;
  place-items: center;
  width: 22px;
  height: 22px;
  font-size: 11px;
  font-weight: 900;
  display: grid;
}

.dash4-job-symbol.success {
  color: #eafff6;
  background: #0eaa72;
}

.dash4-job-symbol.failed {
  color: #fff;
  background: #d84b5b;
}

.dash4-job-symbol.running {
  color: #fff;
  background: #148ad0;
}

.dash4-job-main {
  min-width: 0;
}

.dash4-job-main strong, .dash4-job-main span {
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  overflow: hidden;
}

.dash4-job-main strong {
  color: #e9f3f8;
  font-size: 9px;
}

.dash4-job-main span {
  color: #7292a5;
  margin-top: 3px;
  font-size: 7px;
}

.dash4-job-vlans {
  flex-wrap: wrap;
  gap: 3px;
  display: flex;
}

.dash4-job-vlans span {
  color: #6ed0f7;
  background: #082d43;
  border-radius: 3px;
  padding: 3px 5px;
  font-size: 6px;
}

.dash4-job > b {
  text-align: center;
  border-radius: 4px;
  padding: 4px 5px;
  font-size: 7px;
}

.dash4-job > b.success {
  color: #2de0a0;
  background: #082b20;
}

.dash4-job > b.failed {
  color: #ff6979;
  background: #321419;
}

.dash4-job time {
  color: #668698;
  text-align: right;
  font-size: 7px;
}

.dash4-attention-panel {
  min-height: 100%;
}

.dash4-alert-list {
  gap: 6px;
  display: grid;
}

.dash4-alert {
  min-height: 65px;
  color: inherit;
  background: linear-gradient(90deg, #08222f, #071d29);
  border: 1px solid #0000;
  border-radius: 5px;
  grid-template-columns: 76px minmax(0, 1fr) 45px 66px;
  align-items: center;
  gap: 9px;
  padding: 9px 9px 9px 15px;
  text-decoration: none;
  transition: background .15s, border-color .15s;
  display: grid;
  position: relative;
  overflow: hidden;
}

.dash4-alert:hover {
  background: #0a2a39;
  border-color: #216889;
}

.dash4-alert-line {
  border-radius: 0 4px 4px 0;
  width: 4px;
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 0;
}

.dash4-alert.critical .dash4-alert-line {
  background: #ff435b;
}

.dash4-alert.warning .dash4-alert-line {
  background: #f4b43d;
}

.dash4-alert.info .dash4-alert-line {
  background: #32aee9;
}

.dash4-alert-badge {
  text-align: center;
  border-radius: 4px;
  padding: 6px;
  font-size: 8px;
  font-weight: 900;
}

.dash4-alert-badge.critical {
  color: #ff6778;
  background: #35141a;
  border: 1px solid #712a38;
}

.dash4-alert-badge.warning {
  color: #f6bd48;
  background: #30270f;
  border: 1px solid #6a5319;
}

.dash4-alert-badge.info {
  color: #6ccaff;
  background: #09293d;
  border: 1px solid #1b597d;
}

.dash4-alert-main {
  min-width: 0;
}

.dash4-alert-main strong, .dash4-alert-main span, .dash4-alert-main small {
  display: block;
}

.dash4-alert-main strong {
  color: #edf6fa;
  font-size: 11px;
}

.dash4-alert-main span {
  color: #7796a8;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 3px;
  font-size: 8px;
  overflow: hidden;
}

.dash4-alert-main small {
  color: #a9bec9;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 4px;
  font-size: 8px;
  line-height: 1.3;
  overflow: hidden;
}

.dash4-alert time {
  color: #6c8b9e;
  text-align: right;
  font-size: 8px;
}

.dash4-alert-open {
  color: #fff;
  text-align: center;
  background: linear-gradient(#0788f2, #076dcb);
  border-radius: 5px;
  padding: 7px;
  font-size: 8px;
  font-weight: 800;
  display: inline-block;
}

.dash4-footer {
  color: #58788c;
  justify-content: space-between;
  gap: 15px;
  padding: 10px 2px 2px;
  font-size: 8px;
  display: flex;
}

.dash4-footer strong {
  color: #7897aa;
}

.dash4-empty {
  color: #67879a;
  text-align: center;
  place-items: center;
  min-height: 80px;
  padding: 15px;
  font-size: 9px;
  display: grid;
}

.dash4-empty-ok strong, .dash4-empty-ok span {
  display: block;
}

.dash4-empty-ok strong {
  color: #29d999;
  font-size: 11px;
}

.dash4-empty-ok span {
  color: #718fa2;
  margin-top: 4px;
  font-size: 8px;
}

.dash4-inline-error, .dash4-load-error {
  color: #ff8690;
  background: #2e1117;
  border: 1px solid #71303a;
  border-radius: 6px;
}

.dash4-inline-error {
  margin-bottom: 10px;
  padding: 9px 11px;
  font-size: 10px;
}

.dash4-load-error {
  gap: 8px;
  max-width: 600px;
  margin: 80px auto;
  padding: 16px;
  display: grid;
}

.dash4-load-error button {
  width: fit-content;
}

.dash4-loading {
  color: #7595a8;
  text-align: center;
  padding: 100px 20px;
}

@media (max-width: 1350px) {
  .dash4-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .dash4-network-grid, .dash4-bottom-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1000px) {
  .dash4-onu-state {
    grid-template-columns: 1fr;
  }

  .dash4-state-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .dash4-olt-row {
    grid-template-columns: 1fr;
  }

  .dash4-olt-total {
    text-align: left;
  }

  .dash4-open-button {
    width: fit-content;
  }
}

@media (max-width: 720px) {
  .dash4-page {
    padding: 12px;
  }

  .dash4-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .dash4-header-actions {
    width: 100%;
  }

  .dash4-auto {
    flex: 1;
  }

  .dash4-stats {
    grid-template-columns: 1fr;
  }

  .dash4-stat {
    grid-template-columns: 50px minmax(0, 1fr);
  }

  .dash4-stat-side {
    flex-direction: row;
    grid-column: 1 / -1;
  }

  .dash4-donut-area {
    flex-direction: column;
  }

  .dash4-state-cards, .dash4-severity-cards {
    grid-template-columns: 1fr;
  }

  .dash4-alert {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .dash4-alert time {
    text-align: left;
    grid-column: 2;
  }

  .dash4-alert-open {
    grid-column: 2;
    width: fit-content;
  }

  .dash4-job {
    grid-template-columns: 25px 1fr auto;
  }

  .dash4-job-vlans, .dash4-job time {
    grid-column: 2 / -1;
  }

  .dash4-footer {
    flex-direction: column;
  }
}

.epon-page {
  width: 100%;
  max-width: 1800px;
  margin: 0 auto;
  padding: 22px;
}

.epon-header {
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 15px;
  display: flex;
}

.epon-header > div > span {
  color: #29c6f0;
  letter-spacing: 1px;
  font-size: 10px;
  font-weight: 900;
}

.epon-header h1 {
  color: #f1f8fc;
  margin: 4px 0 0;
  font-size: 26px;
}

.epon-header p {
  color: #7895a7;
  margin: 5px 0 0;
  font-size: 11px;
}

.epon-header button {
  color: #fff;
  cursor: pointer;
  background: #087de0;
  border: 1px solid #168ceb;
  border-radius: 5px;
  padding: 10px 14px;
  font-size: 10px;
  font-weight: 800;
}

.epon-summary {
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 10px;
  display: grid;
}

.epon-summary article {
  background: #071c29;
  border: 1px solid #19425a;
  border-radius: 6px;
  padding: 12px;
}

.epon-summary span {
  color: #7694a7;
  font-size: 9px;
  font-weight: 800;
  display: block;
}

.epon-summary strong {
  color: #edf7fb;
  margin-top: 6px;
  font-size: 25px;
  display: block;
}

.epon-summary strong.ok {
  color: #2ae09c;
}

.epon-summary strong.bad {
  color: #ff6070;
}

.epon-summary strong.warn {
  color: #f3b83f;
}

.epon-summary strong.driver {
  color: #58c8f4;
}

.epon-summary small {
  color: #718fa1;
  font-size: 8px;
}

.epon-note {
  background: #082434;
  border: 1px solid #1a536f;
  border-radius: 6px;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding: 10px 12px;
  font-size: 9px;
  display: flex;
}

.epon-note strong {
  color: #6dd1f6;
}

.epon-note span {
  color: #a5bbc7;
}

.epon-note b {
  color: #f1bd50;
  white-space: nowrap;
  margin-left: auto;
}

.epon-toolbar {
  grid-template-columns: minmax(300px, 1fr) 150px 160px 110px;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
  display: grid;
}

.epon-toolbar input, .epon-toolbar select {
  color: #deedf4;
  background: #071d2a;
  border: 1px solid #194c68;
  border-radius: 4px;
  outline: none;
  width: 100%;
  padding: 9px 10px;
  font-size: 10px;
}

.epon-toolbar > span {
  color: #7895a8;
  text-align: right;
  font-size: 9px;
}

.epon-table-wrap {
  background: #061823;
  border: 1px solid #173f57;
  border-radius: 7px;
  overflow: auto;
}

.epon-table {
  border-collapse: collapse;
  width: 100%;
}

.epon-table th {
  z-index: 2;
  color: #7393a7;
  text-align: left;
  background: #092337;
  border-bottom: 1px solid #1a4b67;
  padding: 10px 11px;
  font-size: 9px;
  font-weight: 800;
  position: sticky;
  top: 0;
}

.epon-table td {
  color: #bdd0da;
  border-bottom: 1px solid #12374c;
  padding: 9px 11px;
  font-size: 9px;
}

.epon-table tbody tr:hover {
  background: #092433;
}

.epon-table td strong {
  color: #e8f2f7;
  font-size: 10px;
}

.epon-state {
  border-radius: 4px;
  align-items: center;
  gap: 5px;
  padding: 4px 6px;
  font-size: 8px;
  font-weight: 800;
  display: inline-flex;
}

.epon-state i {
  border-radius: 50%;
  width: 6px;
  height: 6px;
}

.epon-state.online {
  color: #2ee09c;
  background: #082a20;
}

.epon-state.online i {
  background: #2ee09c;
}

.epon-state.offline {
  color: #ff6676;
  background: #32141a;
}

.epon-state.offline i {
  background: #ff6676;
}

.epon-state.power_loss {
  color: #f4b93f;
  background: #30270f;
}

.epon-state.power_loss i {
  background: #f4b93f;
}

.epon-state.unknown {
  color: #8da6b4;
  background: #102a37;
}

.epon-state.unknown i {
  background: #718b99;
}

.epon-loading {
  color: #7895a7;
  text-align: center;
  padding: 100px;
}

@media (max-width: 1000px) {
  .epon-summary {
    grid-template-columns: repeat(2, 1fr);
  }

  .epon-toolbar {
    grid-template-columns: 1fr;
  }

  .epon-toolbar > span {
    text-align: left;
  }

  .epon-note {
    flex-direction: column;
    align-items: flex-start;
  }

  .epon-note b {
    margin-left: 0;
  }
}

.epon-reason-power {
  color: #f5ba42;
  font-weight: 700;
}

.epon-reason-link {
  color: #94afbe;
}

.epon-table td {
  white-space: nowrap;
}

.epon-rx-warning {
  font-weight: 900;
  color: #f5b93f !important;
}

.epon-rx-critical {
  font-weight: 900;
  color: #ff5d70 !important;
}

.epon-rx-ok {
  font-weight: 800;
  color: #2ae09d !important;
}

.olt-resolver {
  justify-content: center;
  align-items: center;
  min-height: 70vh;
  display: flex;
}

.olt-resolver-box {
  color: #7898aa;
  background: #071c29;
  border: 1px solid #17445f;
  border-radius: 8px;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 30px 50px;
  display: flex;
}

.olt-resolver-box strong {
  color: #eaf6fb;
  font-size: 18px;
}

.epon-summary-page {
  width: 100%;
  max-width: 1800px;
  margin: 0 auto;
  padding: 22px;
}

.epon-summary-header {
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 14px;
  display: flex;
}

.epon-summary-header > div:first-child > span {
  color: #31c9ef;
  letter-spacing: 1px;
  font-size: 10px;
  font-weight: 900;
}

.epon-summary-header h1 {
  color: #f2f8fb;
  margin: 4px 0 0;
  font-size: 27px;
}

.epon-summary-header p {
  color: #7c9aab;
  margin: 4px 0 0;
  font-size: 11px;
}

.epon-summary-actions {
  gap: 7px;
  display: flex;
}

.epon-summary-actions button, .epon-summary-actions a {
  color: #dff5ff;
  cursor: pointer;
  background: #08283a;
  border: 1px solid #1676aa;
  border-radius: 5px;
  align-items: center;
  padding: 10px 14px;
  font-size: 10px;
  font-weight: 800;
  text-decoration: none;
  display: inline-flex;
}

.epon-summary-actions button {
  background: #087fe5;
  border-color: #168eec;
}

.epon-kpis {
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 10px;
  display: grid;
}

.epon-kpis article {
  background: #071d2a;
  border: 1px solid #19455e;
  border-radius: 7px;
  padding: 14px;
}

.epon-kpis article > span {
  color: #7695a8;
  text-transform: uppercase;
  font-size: 9px;
  font-weight: 800;
  display: block;
}

.epon-kpis article > strong {
  color: #edf8fc;
  margin-top: 5px;
  font-size: 27px;
  display: block;
}

.epon-kpis article > small {
  color: #718d9d;
  margin-top: 3px;
  font-size: 8px;
  display: block;
}

.epon-summary-page .good {
  color: #25df9c !important;
}

.epon-summary-page .warning {
  color: #f4b63d !important;
}

.epon-summary-page .critical {
  color: #ff5e70 !important;
}

.epon-summary-page .driver {
  color: #43c6f5 !important;
}

.epon-summary-grid {
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-bottom: 9px;
  display: grid;
}

.epon-summary-card {
  background: #061c28;
  border: 1px solid #19465f;
  border-radius: 7px;
  margin-bottom: 9px;
  padding: 14px;
}

.epon-card-title {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  display: flex;
}

.epon-card-title h2 {
  color: #eef8fc;
  margin: 0;
  font-size: 16px;
}

.epon-card-title p {
  color: #7090a3;
  margin: 3px 0 0;
  font-size: 9px;
}

.epon-card-title a {
  color: #5dcbf6;
  border: 1px solid #1c5d7c;
  border-radius: 4px;
  padding: 7px 10px;
  font-size: 9px;
  text-decoration: none;
}

.epon-optical-big {
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  display: grid;
}

.epon-optical-item {
  background: #071923;
  border: 1px solid #163b50;
  border-radius: 6px;
  padding: 15px;
}

.epon-optical-item strong {
  font-size: 28px;
  display: block;
}

.epon-optical-item span {
  color: #d9e9ef;
  margin-top: 2px;
  font-size: 10px;
  font-weight: 800;
  display: block;
}

.epon-optical-item small {
  color: #718d9c;
  font-size: 8px;
}

.epon-operation {
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  display: grid;
}

.epon-operation > div {
  background: #071923;
  border: 1px solid #153b50;
  border-radius: 5px;
  padding: 11px;
}

.epon-operation span {
  color: #728fa0;
  font-size: 8px;
  display: block;
}

.epon-operation strong {
  color: #ebf6fa;
  margin-top: 4px;
  font-size: 11px;
  display: block;
}

.epon-operation-note {
  color: #f0bd52;
  background: #27220f;
  border: 1px solid #5b4a15;
  border-radius: 4px;
  margin-top: 8px;
  padding: 9px 10px;
  font-size: 9px;
}

.epon-pon-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  display: grid;
}

.epon-pon-card {
  color: inherit;
  background: #071923;
  border: 1px solid #16435a;
  border-radius: 6px;
  padding: 12px;
  text-decoration: none;
  display: block;
}

.epon-pon-card:hover {
  background: #082231;
  border-color: #1689bd;
}

.epon-pon-head {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 11px;
  display: flex;
}

.epon-pon-head strong {
  color: #eef8fc;
  font-size: 14px;
}

.epon-pon-head > span {
  color: #7b99aa;
  font-size: 9px;
}

.epon-pon-values {
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  display: grid;
}

.epon-pon-values > div {
  text-align: center;
  background: #082130;
  border-radius: 4px;
  padding: 7px;
}

.epon-pon-values b {
  font-size: 16px;
  display: block;
}

.epon-pon-values span {
  color: #7996a6;
  font-size: 8px;
}

.epon-pon-optical {
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 9px;
  font-size: 8px;
  display: flex;
}

.epon-pon-card > small {
  color: #42c8fa;
  margin-top: 9px;
  font-size: 8px;
  display: block;
}

.epon-problem-list {
  flex-direction: column;
  gap: 5px;
  display: flex;
}

.epon-problem-row {
  background: #071923;
  border: 1px solid #143b50;
  border-radius: 5px;
  grid-template-columns: 82px minmax(250px, 1fr) 105px 65px;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  text-decoration: none;
  display: grid;
}

.epon-problem-row:hover {
  background: #082535;
  border-color: #176889;
}

.epon-problem-badge {
  text-align: center;
  border-radius: 3px;
  padding: 5px 7px;
  font-size: 8px;
  font-weight: 900;
}

.epon-problem-badge.critical {
  background: #3a141a;
  color: #ff7582 !important;
}

.epon-problem-badge.warning {
  background: #342a0e;
  color: #f5c04f !important;
}

.epon-problem-row strong {
  color: #ebf5f9;
  font-size: 10px;
}

.epon-problem-row p {
  color: #718fa1;
  margin: 2px 0 0;
  font-size: 8px;
}

.epon-problem-rx {
  color: #d9e8ee;
  text-align: right;
  font-size: 10px;
  font-weight: 800;
}

.epon-problem-open {
  color: #46c9f7;
  text-align: right;
  font-size: 8px;
}

.epon-summary-loading {
  color: #7897a8;
  text-align: center;
  padding: 100px;
}

@media (max-width: 1100px) {
  .epon-kpis {
    grid-template-columns: repeat(2, 1fr);
  }

  .epon-summary-grid {
    grid-template-columns: 1fr;
  }

  .epon-pon-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.auto-epon-page {
  width: 100%;
  max-width: 1900px;
  margin: 0 auto;
  padding: 16px;
}

.auto-epon-header {
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 12px;
  display: flex;
}

.auto-epon-header > div > span {
  color: #36c9f5;
  letter-spacing: 1px;
  font-size: 10px;
  font-weight: 900;
}

.auto-epon-header h1 {
  color: #f4f9fc;
  margin: 4px 0 2px;
  font-size: 25px;
}

.auto-epon-header p {
  color: #7d9aaa;
  margin: 0;
  font-size: 10px;
}

.auto-epon-header button {
  color: #fff;
  cursor: pointer;
  background: #087fe1;
  border: 1px solid #168be8;
  border-radius: 5px;
  padding: 10px 16px;
  font-weight: 800;
}

.auto-epon-kpis {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
  display: grid;
}

.auto-epon-kpis article {
  background: #071d2a;
  border: 1px solid #19465e;
  border-radius: 6px;
  padding: 13px;
}

.auto-epon-kpis span {
  color: #7796a7;
  font-size: 8px;
  font-weight: 800;
  display: block;
}

.auto-epon-kpis strong {
  color: #eff9fc;
  margin-top: 5px;
  font-size: 25px;
  display: block;
}

.auto-epon-good {
  font-weight: 800;
  color: #27dfa0 !important;
}

.auto-epon-warning {
  font-weight: 800;
  color: #f4b83f !important;
}

.auto-epon-critical {
  font-weight: 800;
  color: #ff6072 !important;
}

.auto-epon-unknown {
  font-weight: 700;
  color: #83a0af !important;
}

.auto-epon-info, .auto-epon-inventory-warning {
  border-radius: 5px;
  margin-bottom: 10px;
  padding: 10px 12px;
  font-size: 10px;
}

.auto-epon-info {
  color: #dceef5;
  background: #082638;
  border: 1px solid #185873;
}

.auto-epon-info strong, .auto-epon-inventory-warning strong {
  margin-right: 8px;
}

.auto-epon-inventory-warning {
  color: #f6c75a;
  background: #2c240e;
  border: 1px solid #67521a;
}

.auto-epon-operation {
  background: #071d2a;
  border: 1px solid #19465e;
  border-radius: 5px;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding: 10px 12px;
  font-size: 9px;
  display: flex;
}

.auto-epon-operation strong {
  color: #53cff6;
}

.auto-epon-operation span {
  color: #b9d1dc;
  background: #092534;
  border-radius: 3px;
  padding: 4px 7px;
}

.auto-epon-filters {
  grid-template-columns: minmax(300px, 1fr) 180px 120px;
  align-items: center;
  gap: 7px;
  margin-bottom: 9px;
  display: grid;
}

.auto-epon-filters input, .auto-epon-filters select {
  color: #dcebf2;
  background: #071d2a;
  border: 1px solid #19465e;
  border-radius: 4px;
  height: 37px;
  padding: 0 10px;
}

.auto-epon-filters > span {
  color: #7694a4;
  text-align: right;
  font-size: 9px;
}

.auto-epon-table-wrap {
  border: 1px solid #19465e;
  border-radius: 5px;
  overflow-x: auto;
}

.auto-epon-table {
  border-collapse: collapse;
  background: #061b27;
  width: 100%;
  font-size: 9px;
}

.auto-epon-table th {
  color: #7fa2b5;
  text-align: left;
  white-space: nowrap;
  background: #082333;
  padding: 10px;
}

.auto-epon-table td {
  color: #d8e9ef;
  white-space: nowrap;
  border-top: 1px solid #123d54;
  padding: 10px;
}

.auto-epon-table tr:hover td {
  background: #082432;
}

.auto-epon-loading {
  color: #7f9eae;
  text-align: center;
  padding: 80px;
}

@media (max-width: 1200px) {
  .auto-epon-kpis {
    grid-template-columns: repeat(3, 1fr);
  }
}

.readings-sync-control {
  z-index: 9998;
  align-items: center;
  gap: 8px;
  display: flex;
  position: fixed;
  bottom: 18px;
  right: 18px;
}

.readings-sync-control button {
  color: #fff;
  cursor: pointer;
  background: #087fde;
  border: 1px solid #168ce8;
  border-radius: 6px;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 14px;
  font-size: 10px;
  font-weight: 900;
  display: flex;
  box-shadow: 0 5px 20px #00000052;
}

.readings-sync-control button:hover {
  background: #0c8cf1;
}

.readings-sync-control button:disabled {
  opacity: .72;
  cursor: wait;
}

.readings-sync-control button > span {
  font-size: 18px;
  line-height: 1;
}

.readings-sync-message {
  color: #d9edf5;
  background: #071e2c;
  border: 1px solid #19516c;
  border-radius: 5px;
  max-width: 360px;
  padding: 9px 11px;
  font-size: 9px;
  box-shadow: 0 5px 18px #00000047;
}

.readings-sync-message.success {
  color: #50e4ae;
  border-color: #16865f;
}

.readings-sync-message.partial {
  color: #f2c557;
  border-color: #87681d;
}

.readings-sync-message.failed {
  color: #ff7786;
  border-color: #7d2531;
}

/*# sourceMappingURL=src_app_globals_162hn9o.css.map*/