html,
body {
  min-height: 100%;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:  var(--body);
  color: var(--text-primary);
  font-size:14px!important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
/* a { color: inherit; } */
.link{
  color:var(--text-primary)!important;
}

table{
  color: var(--text-primary)!important;
}

table td{
  border-color:var(--hairline)!important;
}
.text-muted{
  color:var(--text-muted);
}
.text-secondary{
  color:var(--text-secondary);
}
/* Header */
header.top {
  flex: 0 0 auto;
  border-bottom: 1px solid var(--hairline);
  background: var(--header);
  position: sticky;
  top: 0;
  z-index: 40;
}
main {
  flex: 1 0 auto;
}

main.wrap {
  width: 100%;
}

.wrap {
  margin: 0 auto;
  padding: 28px 0 64px;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .wrap {
    max-width: 90%;
    padding: 20px 16px 48px;
  }
}

@media (max-width: 480px) {
  .wrap {
    max-width: 90%;
    padding: 16px 12px 32px;
  }
}

.wrap{
  max-width: 1100px;
}
.history-wrap{
  max-width: 1100px;
}
.admin-wrap {
  max-width: 1300px;
  margin: 0 auto;
  padding: 28px 0 64px;
}
@media (max-width: 480px) {
  .admin-wrap {
    max-width: 90%;
    padding: 16px 12px 32px;
  }
}
.top-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0px;
}
.admin-navbar{
  background:#252f4a;
  border-top:1px solid; 
  border-bottom:1px solid;
  border-color:#252f4a
}
.admin-navbar-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  max-width:1300px;
  margin:0 auto;
}
.admin-navbar-title{
  color:#ffffff;
  font-weight:500;
  font-size:15px; 
  letter-spacing:1px;
  text-transform:uppercase;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 17px;
}
.logo img {
  height: 30px;
}
.logo-mark {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-orange));
  flex-shrink: 0;
}
.logo-sub {
  font-weight: 400;
  color: var(--text-muted);
  font-size: 12px;
  display: block;
  margin-top: 1px;
}
.top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap:wrap;
}

.white-space-nowrap{
  white-space: nowrap;
}

.btn{
 font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.btn-simple {
  border-radius: 8px;
  border: 1px solid var(--hairline);
  background: var(--surface-1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-secondary);
}
.btn-simple:hover {
  background: var(--surface-2);
    color: var(--text-secondary);
}

.theme-btn{
  width: 34px;
  height: 34px;
}
/* Hero */
.hero {
  border-radius: var(--radius);
  padding: 22px 24px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
}
.hero.state-outage {
  background: var(--danger-bg);
}

.hero.state-maintenance {
  background: var(--maintenance-bg);
}
.hero.state-operational {
  background: var(--success-bg);
}
.hero.state-partial-outage{
  background: var(--partial-outage-bg);
}

.hero-title svg{
  width: 22px;
  height: 22px;
  vertical-align:middle;
  margin-right:5px;
}

.hero-title {
  font-size: 19px;
  font-weight: 500;
  margin: 0 0 4px;
  display:flex;
  align-items:center;
}
.hero.state-outage .hero-title {
  color: var(--danger);
}
.hero.state-partial-outage .hero-title {
  color: var(--partial-outage);
}

.hero.state-maintenance .hero-title {
  color: var(--maintenance);
}
.hero.state-operational .hero-title {
  color: var(--success);
}
.hero-sub {
  font-size: 14px;
  color: var(--text-secondary);
  margin:0;
  margin-right:20px;
}
.hero-meta {
  margin-left: auto;
  text-align: right;
  font-size: 12px;
  color: var(--text-secondary-white);
  flex-shrink: 0;
}
.live-dot {
  display: inline-block;
  width:7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
  margin-right: 5px;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
    scale:1;
  }
  50% {
    opacity: 0.5;
    scale:0.9;
  }
}

/* Stat tiles */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
.stat-title {
  border-radius: var(--radius);
  padding: 16px 18px;
}
.stat-label {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 0 8px;
}
.stat-value {
  font-size: 26px;
  font-weight: 400;
  margin: 0;
  line-height: 1;
}

.stat-title.outage {
  background:var(--outage-bg);
  color: var(--outage);
}
.stat-title.partial-outage { 
  background:var(--partial-outage-bg);
  color: var(--partial-outage);
}
.stat-title.total0,
.stat-title.subscribers,
.stat-title.uptime {
  border: 1px solid var(--hairline);
  background: var(--surface-1);
}

.stat-foot {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 6px;
}

/* Section heading */
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 32px 0 12px;
}
.section-head h2 {
  font-size: 15px;
  font-weight: 400;
  margin: 0;
}
.section-head .link,
.card-head .link {
  font-size: 13px;
  font-weight: 500;
  color: var(--info);
  text-decoration: none;
}

/* Incident cards */
.incident-card {
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-left: 4px solid var(--danger);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 10px;
}
.incident-card.maintenance {
  border-left-color: var(--maintenance);
}
.incident-card.ongoing-maintenance {
  border-left-color: var(--maintenance);
}
.incident-top {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.badge2 {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 5px 10px;
  border-radius: 20px;
}

.badge2.maintenance {
  background: var(--maintenance-bg);
  color: var(--maintenance);
}
.badge2.ongoing-maintenance {
  background: var(--maintenance-bg);
  color: var(--maintenance);
}
.incident-title {
  font-weight: 600;
  font-size: 14px;
}
.incident-time {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-muted);
}
.incident-body {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 8px;
}
.incident-affected {
  margin-top: 8px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.chip {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--text-secondary);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Filter bar */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.search-input {
  flex: 1 1 200px;
  font: inherit;
  font-size: 13px;
  padding: 9px 12px 9px 34px;
  border-radius: 8px;
  border: 1px solid var(--hairline);
  background: var(--surface-1)
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" stroke="%23898781" stroke-width="2" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>')
    no-repeat 12px center;
  color: var(--text-primary);
}
.search-input::placeholder {
  color: var(--text-muted);
}
.filter-chip {
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 20px;
  border: 1px solid var(--hairline);
  background: var(--surface-1);
  color: var(--text-secondary);
  cursor: pointer;
}
.filter-chip.active {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  color: #fff;
}
.filter-select {
  font: inherit;
  font-size: 13px;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid var(--hairline);
  background: var(--surface-1);
  color: var(--text-primary);
}

/* Region groups */
.region-group {
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  margin-bottom: 15px;
}

.history-table-card {
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  margin-bottom: 15px;
}
.region-head {
  display: flex;
  align-items: center;
  justify-content:space-between;
  gap: 10px;
  padding: 13px 16px;
  cursor: pointer;
  user-select: none;
}
.region-head:hover {
  background: var(--surface-2);
}
.region-name {
  font-weight: 600;
  font-size: 13.5px;
}
.region-count {
  font-size: 12px;
  color: var(--text-muted);
}
.region-status-summary {
  font-size: 12px;
  font-weight: 400;
  display: flex;
  align-items: center;
  gap: 6px;
  color:var(--text-secondary);
}
.chevron {
  width: 16px;
  height: 16px;
  color: var(--text-secondary-white);
  transition: transform 0.15s ease;
  flex-shrink: 0;
}
.region-group.collapsed .chevron {
  transform: rotate(-90deg);
}

.region-group.collapsed .region-body {
  display: none;
}

.node-row,.node-timeline,tr:not(:last-child) {
  border-bottom: 1px solid var(--hairline);
}
.node-row:last-child {
  border-bottom: none;
}
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-dot.operational {
  background: var(--success);
}
.status-dot.outage {
  background: var(--danger);
  /* box-shadow: 0 0 0 3px var(--danger-bg); */
}
.status-dot.outage-maintenance {
  /* box-shadow: 0 0 0 3px var(--danger-bg); */
  background:linear-gradient(to top, var(--danger) 50%, var(--maintenance) 50%);
}

.status-dot.scheduled-maintenance {
  background: var(--maintenance);
  /* box-shadow: 0 0 0 3px var(--maintenance-bg); */
}
.status-dot.ongoing-maintenance {
  background: var(--maintenance);
  /* box-shadow: 0 0 0 3px var(--maintenance-bg); */
}

.status-dot.partial-outage {
  background: var(--partial-outage);
  /* box-shadow: 0 0 0 3px var(--partial-outage-bg); */
}

.text-operational{
  color:var(--success);
}
.text-outage{
  color:var(--danger);
}
.text-outage-maintenance{
  color:var(--danger);
}
.text-scheduled-maintenance{
  color:var(--maintenance);
}
.text-ongoing-maintenance{
  color:var(--maintenance);
}

.text-partial-outage{
  color:var(--partial-outage);
}

.node-name {
  font-size: 13px;
  font-weight: 600;
  min-width: 150px;
}
.subscription-bell {
  width: 14px;
  height: 14px;
  margin-left: 5px;
  color: var(--brand-blue);
  vertical-align: -2px;
}
.history-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--hairline);
}
.history-item:last-child {
  border-bottom: none;
}
.history-date {
  width: 80px;
  flex-shrink: 0;
  font-size: 12px;
  color: var(--text-muted);
}
.history-dc {
  min-width: 110px;
  font-size: 13px;
  font-weight: 600;
}
.history-label {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: var(--text-secondary);
}
.node-ip {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--text-secondary-white);
  min-width: 110px;
}

.node-status-label {
  font-size: 12px;
  font-weight: 400;
  min-width: 118px;
  margin-left: auto;
}

.node-status-label.outage {
  color: var(--danger);
}

.node-status-label.partial-outage {
  color: var(--partial-outage);
}
.uptime-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 20px;
  margin-left: auto;
}
.uptime-bars i {
  display: block;
  width: 3px;
  height: 100%;
  border-radius: 4px 4px 0 0;
  background: var(--success);
}
.uptime-bars i.outage {
  background: var(--danger);
}

.uptime-bars i.partial-outage {
  background: var(--partial-outage);
}
.uptime-bars i.maintenance {
  background: var(--maintenance);
}
.uptime-bars i.ongoing-maintenance {
  background: var(--maintenance);
}
.uptime-bars i.scheduled-maintenance {
  background: var(--maintenance);
}
.uptime-bars i.outage-maintenance {
  background:linear-gradient(to top, var(--danger) 50%, var(--maintenance) 50%);
}
.uptime-pct {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--text-secondary-white);
  min-width: 48px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 720px) {
  .stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .node-ip {
    display: none;
  }
  .node-name {
    min-width: 0;
    flex: 1;
  }
  .history-item {
    flex-wrap: wrap;
  }
  .history-date {
    width: auto;
  }
  .history-dc {
    min-width: 0;
  }
  .history-label {
    flex-basis: 100%;
  }
  .hero {
    flex-wrap: wrap;
  }
  .hero-meta {
    margin-left: 0;
    text-align: left;
  }
}

.legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-secondary);
  margin: 4px 0 18px;
}
.legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.legend i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.cursor-pointer {
  cursor: pointer;
}

.rotate-180 {
  transform: rotate(180deg);
}

footer {
  flex: 0 0 auto;
  border-top: 1px solid var(--hairline);
  padding: 20px 0;
  margin-top: 12px;
}

.footer-inner {
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
}

.admin-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 6px 10px 6px 6px;
  border-radius: 20px;
  border: 1px solid var(--hairline);
}

.avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand-orange, #eb6834);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}

table tbody td{
  vertical-align:middle!important;
}
.uptime-table,table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

.uptime-table th,
table th {
  text-align: left!important;;
  color: var(--text-secondary-white)!important;;
  font-size: 11px!important;;
  text-transform: uppercase;
  padding: 10px 12px!important;;
  font-weight: 600!important;;
  border-bottom: 1px solid var(--hairline)!important;
}

.uptime-table td,table td {
  padding: 10px 12px;
}

.uptime-cell {
  width: 22px;
  height: 18px;
  border-radius: 4px;
  display: inline-block;
}

a.uptime-cell {
  /* Every cell with real data now gets a popover (uptime %, plus outage
     details when applicable), not just outage ones - the <a> vs <span>
     choice in the template is what actually gates that, so this just
     needs to reflect "clickable" for any cell rendered as a link. */
  cursor: pointer;
}

.uptime-cell.operational {
  background: var(--success);
  opacity: 0.85;
}

.uptime-cell.maintenance {
  background: var(--maintenance);
}

.uptime-cell.ongoing-maintenance {
  background: var(--maintenance);
}

.uptime-cell.scheduled-maintenance {
  background: var(--maintenance);
}

.uptime-cell.outage {
  background: var(--danger);
  cursor: pointer;
}

.uptime-cell.partial-outage {
  background: var(--partial-outage);
  cursor: pointer;
}

.uptime-cell.outage-maintenance {
  background:linear-gradient(to top, var(--danger) 50%, var(--maintenance) 50%);
  cursor: pointer;
}

.uptime-pct-cell {
  text-align: right;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.auth-card {
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px;
  max-width: 440px;
  margin: 48px auto;
}

.auth-card .form-control {
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  color: var(--text-primary);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 13px;
}

.auth-card label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}

.alert2 {
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 13px;
  margin-bottom: 14px;
}

.alert2.success {
  background: var(--success-bg);
  color: var(--success);
}

.alert2.danger {
  background: var(--danger-bg);
  color: var(--danger);
}

.form-control{
  font-size:14px;
}



/* self-contained login card - explicit colors, doesn't depend on shared vars resolving correctly */
.login-card {
  max-width: 500px;
  margin: 60px auto;
  padding: 28px;
  border-radius: 12px;
  background: #ffffff;
  color: #1c2b47;
  border: 1px solid #e3e8f0;
  box-shadow:
    0 1px 2px rgba(11, 11, 11, 0.04),
    0 4px 16px rgba(11, 11, 11, 0.06);
}

[data-theme="dark"] .login-card {
  background: #1a1a19;
  color: #ffffff;
  border-color: #2c2c2a;
}

.login-card h1 {
  font-size: 19px;
  margin: 0 0 4px;
  color: inherit;
}

.login-card .sub {
  font-size: 13px;
  margin-bottom: 22px;
  color: #6b7688;
}

[data-theme="dark"] .login-card .sub {
  color: #c3c2b7;
}

.login-card label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: #52514e;
}

[data-theme="dark"] .login-card label {
  color: #c3c2b7;
}

.login-card input {
  width: 100%;
  font: inherit;
  font-size: 14px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #e3e8f0;
  background: #fafbfd;
  color: #1c2b47;
  margin-bottom: 16px;
}

[data-theme="dark"] .login-card input {
  background: #232322;
  color: #ffffff;
  border-color: #2c2c2a;
}

.login-card input:focus {
  outline: none;
  border-color: #14355e;
}

.login-card .login-error {
  background: #fbe9e9;
  color: #d03b3b;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 16px;
}

[data-theme="dark"] .login-card .login-error {
  background: #2e1414;
  color: #e66767;
}

.login-card button[type="submit"] {
  width: 100%;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 11px;
  border-radius: 8px;
  border: 1px solid #14355e;
  background: #14355e;
  color: #ffffff;
  cursor: pointer;
}

[data-theme="dark"] .login-card button[type="submit"] {
  border-color: #6f9bd6;
  background: #6f9bd6;
}

.login-card button[type="submit"]:hover {
  filter: brightness(1.08);
}

.href-style{
  color:var(--primary);
  padding:0;border:none;background:transparent;
}

.href-style:hover{
  color: #0056b3;
}

.maintenance-name{
  font-size:16px; 
  margin-bottom:10px;
  font-weight:bold;
}
.maintenance-line{
  margin-bottom:0px;
  font-size:13px;
}
.maintenance-window{
  margin-bottom:10px;
  font-size:13px;
}
.maintenance-affected{
  margin-bottom:10px;
  font-size:13px;
}

.maintenance-description{
  margin-bottom:0;
  font-size:13px;
}

table th{
  border-color:var(--hairline)!important;
}

.header-link{
  color:var(--text-primary);
  margin:0 12px;
  font-size:14px;
  color:var(--header-link);
}


.cloud-node-parent-header td {
  background: var(--surface-2);
  font-weight: 600;
  font-size: 12.5px;
  color: var(--text-secondary);
  padding: 6px 12px !important;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}


.tooltip-trigger {
  position: relative;
  display: inline-block;
  cursor:pointer;
}

.custom-tooltip {
  position: absolute;
  bottom: 100%;              /* sits directly above the trigger */
  left: 50%;
  transform: translateX(-50%); /* centers regardless of tooltip width */
  margin-bottom: 10px;        /* gap between tooltip and trigger, leaves room for the arrow */
  width: max-content;
  min-width: 280px;
  background: var(--body);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  z-index: 1000;
  font-style:normal;
  color:var(--text-primary);
  font-family: 'Inter';
  text-align: left;
}
.popover{
  border: 1px solid var(--hairline);;
}
/* Visual twin of .custom-tooltip's own box styling, for the single
   shared #tooltip-portal element in common.js - only its innerHTML
   (title/content) is swapped per hover, so the outer box needs its own
   copy of that look since it isn't a .custom-tooltip itself. */
.custom-tooltip-portal {
  width: max-content;
  min-width: 280px;
  background: var(--body);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  font-style: normal;
  color: var(--text-primary);
  font-family: 'Inter';
  text-align: left;
}
/* the arrow */
.custom-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;                 /* just below the tooltip box */
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: var(--body) transparent transparent transparent; /* points down */
  filter: drop-shadow(0 2px 1px rgba(0,0,0,0.05));
}

.custom-tooltip-title,.popover-header {
  padding: 8px 12px;
  border-radius: 8px 8px 0 0;
  background-color:var(--gray200);
}

.custom-tooltip-content,.popover-body {
  padding: 8px 14px;
}

.bg-operational {
  background-color:var(--success-bg);
}
.bg-outage {
  background-color:var(--outage-bg);
}
.bg-partial-outage{
  background-color:var(--partial-outage-bg);
}
.bg-scheduled-maintenance,
.bg-ongoing-maintenance,
.bg-outage-maintenance {
  background-color:var(--maintenance-bg);
}


.table-responsive{
  overflow-x:visible;
}


button:disabled{
  opacity:0.5!important;
}
input[readonly]{
  pointer-events:none;
}


.flatpickr-day.selected,
.flatpickr-day.selected:hover {
  background: #4a90d9;
  border-color: #4a90d9;
}

.flatpickr-time input:hover,
.flatpickr-time .flatpickr-am-pm:hover {
  background: #f0f6ff;
}

/* tinymce WYSIWYG editor */
.tox-editor-header {
  display: inline-flex !important;
}

.tox .tox-listboxfield .tox-listbox--select {
  width: 50% !important;
  border: 1px solid !important;
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}

.tox-dialog__header {
  padding: 16px 20px 16px 20px !important;
}

.flatpickr-calendar {
  border: 1px solid var(--hairline);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.flatpickr-input:hover {
  cursor: pointer;
  border-color: var(--brand-blue);
}

/* ── Admin dashboard layout ── */
main.wrap {
  padding: 24px 0 64px;
}

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 18px;
  flex-wrap: wrap;
  gap: 12px;
}

.page-head h1 {
  font-size: 20px;
  margin: 0 0 4px;
}

.page-head p {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}

.layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 18px;
  align-items: start;
}

@media (max-width: 980px) {
  .layout {
    grid-template-columns: 1fr;
  }
}

.card {
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius:var(--radius)!important;
  margin-bottom: 25px;
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 16px;
  border-bottom: 1px solid var(--hairline);
  /* background:var(--gray100); */
}

.card-head h2 {
  font-size: 14.5px;
  font-weight: 700;
  margin: 0;
}

.card-head .count,
.section-head .count {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
  margin-left: 8px;
}

.card-body {
  padding: 0;
}

table.admin-table tr:last-child td {
  border-bottom: none;
}

table.admin-table td.ip-cell,
table.admin-table td.mono,
.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--text-muted);
  font-size: 12.5px;
}

table.admin-table td.actions,
.actions {
  white-space: nowrap;
}


.badge {
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  /* padding: 5px 10px; */
  border-radius: 20px;
  display: inline-block;
}

.badge.scheduled {
  /* background: var(--maintenance-bg); */
  color: var(--maintenance);
}

.badge.completed {
  /* background: var(--gray200); */
  color: var(--gray600);
}

.badge.ongoing {
  /* background: var(--warning-bg); */
  color: var(--warning);
}

.badge.verified {
  /* background: var(--success-bg); */
  color: var(--success);
}

.badge.incident {
  /* background: var(--danger-bg); */
  color: var(--danger);
}

.count-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 20px;
  background: var(--surface-2);
  color: var(--text-secondary);
  font-size: 11.5px;
  font-weight: 700;
}

.count-chip.zero {
  color: var(--text-muted);
}

.count-chip.alert {
  background: var(--danger-bg);
  color: var(--danger);
}

.region-issue-badge {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
}

.region-issue-badge.clean {
  background: var(--success-bg);
  color: var(--success);
}

.region-issue-badge.issues {
  background: var(--danger-bg);
  color: var(--danger);
}

.region-issue-badge.maintenance {
  background: var(--maintenance-bg);
  color: var(--maintenance);
}

.status-dot.maintenance {
  background: var(--maintenance);
  box-shadow: 0 0 0 3px var(--maintenance-bg);
}

.node-timeline {
  flex-basis: 100%;
  margin-top: 6px;
  padding-left: 20px;
}

.node-timeline .ack-line {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 2px 0;
}

.node-timeline .ack-line .ack-time {
  color: var(--text-muted);
  margin-right: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.node-update-box {
  flex-basis: 100%;
  margin-top: 6px;
  padding-left: 20px;
  display: none;
  gap: 6px;
}

.node-update-box.open {
  display: flex;
}

.node-update-box input {
  flex: 1;
  font: inherit;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--hairline);
  background: var(--surface-0);
  color: var(--text-primary);
}

.node-update-box .btn-simple {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}

.node-note {
  font-size: 12px;
  color: var(--text-secondary);
  flex: 1;
}

.node-actions {
  display: flex;
  gap: 4px;
  margin-left: auto;
  flex-shrink: 0;
}

.node-actions .btn-simple {
  width: 26px;
  height: 26px;
}

.node-actions .btn-simple svg {
  width: 13px;
  height: 13px;
}

.side-card {
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  margin-bottom: 14px;
}

.side-card h3 {
  font-size: 13px;
  font-weight: 700;
  margin: 0;
  padding: 13px 16px;
  border-bottom: 1px solid var(--hairline);
}

.quick-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
}

.quick-actions .btn {
  justify-content: flex-start;
}

.region-issue-card {
  padding: 12px 16px;
  border-bottom: 1px solid var(--hairline);
}

.region-issue-card:last-child {
  border-bottom: none;
}

.region-issue-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.region-issue-name {
  font-weight: 600;
  font-size: 13px;
}

.region-issue-count {
  margin-left: auto;
  font-size: 15px;
  font-weight: 700;
}

.region-issue-count.zero {
  color: var(--success);
}

.region-issue-count.some {
  color: var(--danger);
}

.region-issue-sub {
  font-size: 10.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.region-issue-detail {
  margin-top: 8px;
  padding-left: 2px;
}

.region-issue-detail-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 3px 0;
  color: var(--text-secondary);
}

.region-issue-detail-row .mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--text-muted);
  font-size: 11px;
}

.region-issue-detail-row .n {
  margin-left: auto;
  font-weight: 700;
}

.region-issue-detail-row .n.zero {
  color: var(--text-muted);
  font-weight: 500;
}

.region-issue-detail-row .n.some {
  color: var(--danger);
}

@media (max-width: 720px) {
  .node-ip {
    display: none;
  }
}

.btn-sm {
  padding: 6px 12px;
}

.modal-content {
  background: #ffffff !important;
  color: #1c2b47 !important;
  border-color: #e3e8f0 !important;
}

.modal-header {
  border-color: #e3e8f0 !important;
}

.modal-header .close {
  color: #1c2b47 !important;
}

.modal-body .form-control,
.modal-body input,
.modal-body textarea,
.modal-body select {
  background: #ffffff !important;
  color: #1c2b47 !important;
  border-color: #e3e8f0 !important;
}

.modal-body label {
  color: #5f6468 !important;
}
@media (min-width: 992px) {
  .modal-lg, .modal-xl {
      max-width: 1000px;
  }
}
.modal-xxl {
  max-width: 80vw !important;
}

.modal-xxl .modal-body {
  height: 75vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.modal-body.with-tabs {
  background: var(--gray200);
  padding: 0;
}

.modal-body .col-10 {
  background: #ffffff;
  padding: 1.5rem !important;
  overflow-y: auto;
  height: 100%;
}

.modal-body .col-2 {
  padding: 1.5rem !important;
}

.modal-body .count-chip {
  background: var(--info-bg, #eef3ff);
  color: var(--info, var(--navy-light));
}

/* ── Step wizard (Create/Edit Maintenance, Create Incident) ── */
.modal-body.with-steps {
  background: #ffffff;
  padding: 1.5rem !important;
  display: flex;
  flex-direction: column;
}

.step-indicator {
  display: flex;
  align-items: center;
  margin-bottom: 1.5rem;
  flex-shrink: 0;
  padding: 10px 30px 0px 0px;
}

.step-indicator .step-dot {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #9aa3b2;
}

.step-indicator .step-dot .step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid #d7dce5;
  font-weight: 600;
  font-size: 13px;
  flex-shrink: 0;
}

.step-indicator .step-dot .step-label {
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
}

.step-indicator .step-dot.active {
  color: var(--navy, #1c2b47);
}

.step-indicator .step-dot.active .step-num {
  border-color: var(--info, #3366ff);
  background: var(--info, #3366ff);
  color: #ffffff;
}

.step-indicator .step-dot.completed .step-num {
  border-color: var(--info, #3366ff);
  color: var(--info, #3366ff);
  background: #ffffff;
}

.step-indicator .step-line {
  flex: 1;
  height: 2px;
  background: #e3e8f0;
  margin: 0 12px;
}

.wizard-error {
  background: var(--danger-bg, #fdeceb);
  color: var(--danger, #c0392b);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 1rem;
  flex-shrink: 0;
}

.wizard-pane {
  display: none;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  padding:10px 30px 0px 0px;
}

.wizard-pane.active {
  display: block;
}

.wizard-footer {
  display: flex;
  justify-content: space-between;
}

.wizard-footer .wizard-footer-right {
  display: flex;
  gap: 8px;
}

.uptime-cell {
  width: 17px !important;
  height: 15px !important;
}

/* ── Admin action toast ─────────────────────────────────── */
.admin-toast {
  position: fixed;
  top: 150px;
  right: 24px;
  z-index: 1100;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .18);
  font-size: 14px;
  line-height: 1.4;
  animation: adminToastIn .2s ease-out;
}

.admin-toast-success {
  background: var(--success-bg);
  color: var(--success);
  border:2px solid var(--success);
}

.admin-toast-error {
  background: var(--danger-bg);
  color: var(--danger);
  border:2px solid var(--danger);
}

.admin-toast-close {
  margin-left: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  opacity: .7;
}

.admin-toast-close:hover {
  opacity: 1;
}

@keyframes adminToastIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.admin-section{
  margin-bottom:30px;
}


.picker_label {
  display: flex;
  align-items: center;
  margin-bottom: 2px;
  font-size: 13px;
  color: var(--text-secondary);
}
.font-weight-500{
  font-weight:500;
}
.font-weight-600{
  font-weight:600;
}
.pl-10 {
  padding-left: 10px;
}

.pl-20 {
  padding-left: 20px;
}

.pl-40 {
  padding-left: 40px;
}

input[type=checkbox] {
  margin-right:4px;
}

.dc-cloud-box {
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 12px 16px;
  background: var(--surface-2);
}

.admin-group-child-name{
  font-weight:400;
}
/* ── Full incidents page (Zabbix-style problem list) ─────── */
.incidents-table td {
  vertical-align: top;
  font-size:12px;
 
}
.incidents-table td,
.incidents-table th{
 /* padding:6px 8px!important;; */
}

.incident-state {
  font-size: 12px;
  letter-spacing: .02em;
}
.incident-state.resolved {
  color: var(--success);
}
.incident-state.problem {
  color: var(--danger);
}
.severity-5 {
  color: var(--danger);
}
.severity-4 {
  color: var(--partial-outage);
}
.vertical-align-super{
  vertical-align: super;
  font-size:8px;
}

.card-head a{
   color:var(--primary)!important;
   font-size:13px;
   font-weight:400!important;
   cursor:pointer;
}

.card-head a.bottom-border{
  border-bottom:1px solid;
}
.actions{
  text-align:right;
}

.actions button{
   border:none;
   background:transparent;
   padding:0;
   color:var(--primary);
   white-space:nowrap;
   /* border-bottom:1px solid; */
   line-height:normal;
   margin-left:10px;
}
.actions button.danger{
   color:var(--danger);
}
.actions button.muted{
   color:var(--text-muted);
}
.actions button:hover{
   border-bottom:1px dotted;
}
.admin-navbar-link{
  color:white;
  margin-left:20px;
}
.admin-navbar-link:hover{
  color:white!important;
}

.btn{
  font-weight: 500;
  padding: 4px 10px;
  border-radius:6px;
}
/* ── Admin log ───────────────────────────────────────────── */
.admin-log-table td {
  vertical-align: top;
}
.admin-log-table .log-value {
  min-width: 260px;
  max-width: 520px;
  overflow-wrap: anywhere;
  font-size: 12.5px;
}
.admin-log-table .json-log div {
  margin-bottom: 2px;
}
.admin-log-table .json-log .json-log {
  margin: 2px 0 4px 12px;
  padding-left: 8px;
  border-left: 2px solid var(--hairline);
}
.log-more summary {
  cursor: pointer;
  list-style: none;
}
.log-more summary::-webkit-details-marker {
  display: none;
}
.log-more[open] summary {
  display: none;
}
.log-action {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
}
.log-action-create {
  color: var(--success);
}
.log-action-delete {
  color: var(--danger);
}
.log-action-change {
  color: var(--maintenance);
}

/* ── Mobile layout ───────────────────────────────────────────
   Phone/tablet overrides, kept last so they win over the desktop rules above. */
@media (max-width: 991px) {
  /* Wide tables (48h bars, 12 month columns) scroll inside their card instead of widening the page.
     Tooltips render in a fixed portal, so they don't need overflow:visible here. */
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .modal-xxl {
    max-width: calc(100vw - 16px) !important;
  }
  .modal-xxl .modal-body {
    height: auto !important;
    max-height: 75vh;
  }
}

@media (max-width: 768px) {
  /* main.wrap is listed explicitly: the desktop "main.wrap { padding: 24px 0 }" rule outranks a plain .wrap */
  .wrap,
  main.wrap,
  .admin-wrap,
  .history-wrap {
    max-width: 100% !important;
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Header: logo on its own line, links wrap underneath */
  .top-inner {
    flex-wrap: wrap;
    gap: 4px 12px;
  }
  .top-actions {
    gap: 6px 0;
  }
  .header-link {
    margin: 0 8px 0 0;
    font-size: 13px;
  }
  .logo img {
    height: 26px;
  }

  .admin-navbar-inner {
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 16px;
  }
  .admin-navbar-inner > div {
    flex-wrap: wrap;
    gap: 6px 12px;
  }

  .hero {
    flex-direction: column;
    padding: 18px 16px;
  }

  .section-head {
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 24px;
  }

  .card-head {
    flex-wrap: wrap;
    gap: 8px;
  }

  .search-input,
  .filter-select {
    flex: 1 1 100%;
    width: 100%;
  }

  .region-head {
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 12px;
  }
  .region-head > .d-flex {
    flex-wrap: wrap;
    width: 100%;
    padding-left: 26px;
  }

  .login-card {
    margin: 24px auto;
    padding: 20px;
  }

  .footer-inner {
    padding-left: 16px;
    padding-right: 16px;
  }
}

@media (max-width: 480px) {
  .stats {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  /* Live status rows: the dot already shows the status, so drop the text column and slim the 48h bars. */
  .region-body table th:nth-child(3),
  .region-body table td.node-status-label {
    display: none;
  }
  .uptime-bars {
    gap: 1px;
  }
  .uptime-bars i {
    width: 2px;
  }

  .legend {
    gap: 10px;
  }
}