:root {
  --suprinet-primary: #0f4c81;
  --suprinet-secondary: #0d1b2a;
  --suprinet-accent: #22c55e;
  --suprinet-warning: #f59e0b;
  --suprinet-surface: #f4f7fb;
  --suprinet-card: #ffffff;
  --suprinet-text: #1f2937;
  --suprinet-muted: #6b7280;
}

body {
  background: var(--suprinet-surface);
  color: var(--suprinet-text);
}

.layout-navbar-fixed .wrapper .main-header {
  border-bottom: 0;
}

.main-sidebar {
  background: linear-gradient(180deg, #0d1b2a 0%, #102c45 100%);
}

.brand-link {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.brand-text-suprinet {
  display: block;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.2;
}

.brand-text-suprinet small {
  display: block;
  margin-top: 0.25rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.72rem;
  letter-spacing: 0.08rem;
  text-transform: uppercase;
}

.sidebar .nav-link {
  border-radius: 0.65rem;
  margin-bottom: 0.2rem;
}

.sidebar .nav-link.active {
  background: rgba(255, 255, 255, 0.12);
}

.content-header h1 {
  font-size: 1.85rem;
  font-weight: 700;
}

.content-wrapper {
  background:
    radial-gradient(circle at top right, rgba(34, 197, 94, 0.08), transparent 22%),
    linear-gradient(180deg, #f4f7fb 0%, #eef3f9 100%);
}

.dashboard-hero {
  background: linear-gradient(135deg, #0f4c81 0%, #12365a 55%, #0d1b2a 100%);
  border-radius: 1rem;
  color: #fff;
  overflow: hidden;
  position: relative;
}

.dashboard-hero::after {
  content: "";
  position: absolute;
  inset: auto -60px -60px auto;
  width: 180px;
  height: 180px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 50%;
}

.dashboard-hero p {
  color: rgba(255, 255, 255, 0.82);
}

.metric-card,
.equipment-card,
.system-card,
.quick-card {
  border: 0;
  border-radius: 1rem;
  box-shadow: 0 15px 35px rgba(15, 76, 129, 0.08);
  overflow: hidden;
}

.metric-card .icon-wrap {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

.equipment-card img,
.system-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 0.8rem;
}

.table thead th {
  border-bottom-width: 1px;
  font-size: 0.82rem;
  letter-spacing: 0.04rem;
  text-transform: uppercase;
}

.table-responsive-soft {
  border: 1px solid rgba(15, 76, 129, 0.08);
  border-radius: 1rem;
  overflow: hidden;
  background: #fff;
}

.table-adaptive td[data-label]::before {
  display: none;
  content: attr(data-label);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.05rem;
  text-transform: uppercase;
  color: var(--suprinet-muted);
  margin-bottom: 0.35rem;
}

.login-page {
  background:
    radial-gradient(circle at top left, rgba(34, 197, 94, 0.18), transparent 25%),
    linear-gradient(135deg, #07111d 0%, #0f4c81 45%, #12365a 100%);
}

.login-box .card {
  border: 0;
  border-radius: 1rem;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.28);
}

.login-brand {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--suprinet-secondary);
}

.info-box.soft {
  border-radius: 1rem;
  box-shadow: 0 12px 28px rgba(15, 76, 129, 0.08);
}

.footer-note {
  color: var(--suprinet-muted);
  font-size: 0.92rem;
}

.section-kicker {
  display: inline-block;
  margin-bottom: 0.65rem;
  color: var(--suprinet-primary);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12rem;
  text-transform: uppercase;
}

.equipment-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem 1.75rem;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, #ffffff 0%, #eef5fb 100%);
  border: 1px solid rgba(15, 76, 129, 0.08);
  border-radius: 1.2rem;
  box-shadow: 0 16px 40px rgba(15, 76, 129, 0.08);
}

.equipment-hero h1 {
  margin: 0 0 0.35rem;
  font-size: 2rem;
  line-height: 1.1;
}

.equipment-hero p {
  margin: 0;
  max-width: 720px;
  color: var(--suprinet-muted);
}

.equipment-toolbar {
  display: grid;
  grid-template-columns: minmax(280px, 1.6fr) minmax(180px, 0.7fr) minmax(160px, 0.6fr) auto;
  gap: 0.85rem;
  align-items: center;
}

.equipment-search {
  position: relative;
}

.equipment-search i {
  position: absolute;
  top: 50%;
  left: 1rem;
  transform: translateY(-50%);
  color: var(--suprinet-muted);
}

.equipment-search .form-control {
  height: 52px;
  padding-left: 2.7rem;
  border: 1px solid rgba(15, 76, 129, 0.12);
  border-radius: 999px;
  background: #f8fbfe;
}

.equipment-filter-select {
  height: 52px;
  border-radius: 999px;
  border: 1px solid rgba(15, 76, 129, 0.12);
  background: #f8fbfe;
}

.equipment-toolbar-meta {
  margin-top: 1rem;
  color: var(--suprinet-muted);
}

.localidade-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.7rem;
  border-radius: 999px;
  background: rgba(15, 76, 129, 0.08);
  color: var(--suprinet-primary);
  font-weight: 600;
  line-height: 1.2;
}

.localidade-badge.muted {
  background: rgba(107, 114, 128, 0.12);
  color: var(--suprinet-muted);
}

.localidade-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 1.25rem;
}

.localidade-card-note {
  color: var(--suprinet-muted);
  font-size: 0.93rem;
}

.equipment-card-modern {
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  border: 1px solid rgba(15, 76, 129, 0.08);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.equipment-card-modern:hover {
  transform: translateY(-3px);
  border-color: rgba(15, 76, 129, 0.18);
  box-shadow: 0 18px 34px rgba(15, 76, 129, 0.14);
}

.equipment-card-media {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 1rem;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.84), rgba(239, 246, 255, 0.92)),
    repeating-linear-gradient(45deg, rgba(15, 76, 129, 0.04) 0, rgba(15, 76, 129, 0.04) 1px, transparent 1px, transparent 10px);
  border: 1px solid rgba(15, 76, 129, 0.08);
}

.equipment-card-media img {
  width: 100%;
  height: 100%;
  padding: 0.8rem;
  object-fit: contain;
  border-radius: 0;
  transition: transform 0.18s ease;
}

.equipment-card-modern:hover .equipment-card-media img {
  transform: scale(1.03);
}

.equipment-photo-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 180px;
  border-radius: 1rem;
  background: linear-gradient(135deg, #eef5fb, #dde8f2);
  color: var(--suprinet-primary);
  font-size: 2.1rem;
}

.equipment-photo-fallback-lg {
  height: 280px;
  font-size: 3rem;
}

.equipment-detail-media {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 280px;
  padding: 1rem;
  border: 1px solid rgba(15, 76, 129, 0.08);
  border-radius: 1rem;
  background:
    linear-gradient(135deg, #ffffff, #f1f7fc),
    repeating-linear-gradient(45deg, rgba(15, 76, 129, 0.035) 0, rgba(15, 76, 129, 0.035) 1px, transparent 1px, transparent 12px);
}

.equipment-detail-media img {
  width: 100%;
  max-height: 320px;
  object-fit: contain;
}

.equipment-card-title {
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.25;
}

.equipment-card-subtitle {
  color: var(--suprinet-muted);
  font-size: 0.92rem;
}

.equipment-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.equipment-card-tags .badge {
  border: 1px solid rgba(15, 76, 129, 0.08);
  background: #f7fafc;
  color: #334155;
  font-weight: 600;
}

.equipment-card-copy {
  color: var(--suprinet-muted);
  line-height: 1.5;
}

.equipment-spec-grid,
.equipment-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.equipment-spec-grid div,
.equipment-detail-grid div {
  padding: 0.85rem 0.95rem;
  background: #f8fbfe;
  border: 1px solid rgba(15, 76, 129, 0.08);
  border-radius: 0.9rem;
}

.equipment-spec-grid span,
.equipment-detail-grid span {
  display: block;
  margin-bottom: 0.2rem;
  color: var(--suprinet-muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04rem;
}

.equipment-spec-grid strong,
.equipment-detail-grid strong {
  display: block;
  color: var(--suprinet-text);
}

.equipment-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.equipment-card-actions .btn {
  border-radius: 0.65rem;
  font-weight: 700;
}

.empty-state {
  padding: 2.5rem 1.5rem;
  text-align: center;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbfe 100%);
  border: 1px dashed rgba(15, 76, 129, 0.16);
  border-radius: 1rem;
}

.empty-state-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  margin-bottom: 0.85rem;
  border-radius: 50%;
  background: #eef5fb;
  color: var(--suprinet-primary);
  font-size: 1.4rem;
}

.permission-matrix th:first-child,
.permission-matrix td:first-child {
  min-width: 220px;
}

.training-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.8fr);
  gap: 1rem;
  margin-bottom: 1rem;
}

.training-panel {
  padding: 1.5rem;
  background: linear-gradient(135deg, #ffffff 0%, #eef5fb 100%);
  border: 1px solid rgba(15, 76, 129, 0.08);
  border-radius: 1.2rem;
  box-shadow: 0 16px 40px rgba(15, 76, 129, 0.08);
}

.training-panel h2,
.training-panel h3 {
  margin-bottom: 0.75rem;
}

.training-panel p {
  color: var(--suprinet-muted);
}

.typing-text-target {
  padding: 1rem 1.1rem;
  background: #f8fbfe;
  border: 1px solid rgba(15, 76, 129, 0.12);
  border-radius: 1rem;
  line-height: 1.8;
  font-size: 1rem;
}

.typing-text-target .char-ok {
  color: #15803d;
}

.typing-text-target .char-bad {
  color: #b91c1c;
  background: rgba(239, 68, 68, 0.12);
}

.typing-text-target .char-current {
  background: rgba(15, 76, 129, 0.14);
  border-radius: 0.2rem;
}

.typing-metrics,
.training-score-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.typing-metrics .metric,
.training-score-grid .metric {
  padding: 0.9rem 1rem;
  background: #f8fbfe;
  border: 1px solid rgba(15, 76, 129, 0.08);
  border-radius: 0.95rem;
}

.typing-metrics .metric span,
.training-score-grid .metric span {
  display: block;
  color: var(--suprinet-muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05rem;
}

.typing-metrics .metric strong,
.training-score-grid .metric strong {
  display: block;
  margin-top: 0.2rem;
  font-size: 1.35rem;
}

.quiz-option {
  border: 1px solid rgba(15, 76, 129, 0.1);
  border-radius: 0.95rem;
  padding: 0.85rem 1rem;
  margin-bottom: 0.7rem;
  background: #fff;
}

.quiz-option.correct {
  border-color: rgba(34, 197, 94, 0.35);
  background: rgba(34, 197, 94, 0.08);
}

.quiz-option.incorrect {
  border-color: rgba(239, 68, 68, 0.32);
  background: rgba(239, 68, 68, 0.08);
}

.training-list {
  display: grid;
  gap: 0.75rem;
}

.training-list-item {
  padding: 0.95rem 1rem;
  border: 1px solid rgba(15, 76, 129, 0.08);
  border-radius: 1rem;
  background: #fff;
}

.links-filter-form label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--suprinet-muted);
  text-transform: uppercase;
  letter-spacing: 0.04rem;
}

.links-filter-form .form-control,
.links-filter-form .btn {
  min-height: 46px;
}

.links-table td,
.links-table th {
  vertical-align: top;
}

.links-table td {
  word-break: break-word;
}

.link-title-cell {
  min-width: 0;
  max-width: 380px;
}

.link-title-text,
.link-meta-text {
  display: block;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.link-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}

.link-actions .btn {
  min-width: 88px;
}

.link-actions form {
  margin: 0;
}

.link-actions-inline {
  flex-wrap: nowrap;
}

.localidade-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.office-card {
  border-top: 4px solid rgba(15, 76, 129, 0.18);
}

.status-row-pendente,
.status-row-aguardando_instalacao {
  background: rgba(245, 158, 11, 0.08);
}

.status-row-em_analise,
.status-row-aguardando_documentacao {
  background: rgba(37, 99, 235, 0.08);
}

.status-row-aprovado,
.status-row-excluido,
.status-row-instalado {
  background: rgba(34, 197, 94, 0.08);
}

.status-row-reprovado,
.status-row-recusado,
.status-row-cadastro_reprovado {
  background: rgba(239, 68, 68, 0.08);
}

.boleto-history {
  white-space: pre-line;
}

.cancelamento-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: 1.75rem;
  margin-bottom: 1.5rem;
  border-radius: 1.4rem;
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.16), transparent 32%),
    linear-gradient(135deg, #ffffff 0%, #eef4fb 100%);
  border: 1px solid rgba(15, 76, 129, 0.08);
  box-shadow: 0 18px 40px rgba(15, 76, 129, 0.08);
}

.cancelamento-hero h1 {
  margin: 0.4rem 0 0.5rem;
  font-size: 2rem;
}

.cancelamento-hero p {
  margin: 0;
  max-width: 760px;
  color: #5f7285;
}

.cancelamento-results {
  display: grid;
  gap: 0.85rem;
}

.search-result-card {
  width: 100%;
  border: 1px solid rgba(15, 76, 129, 0.1);
  border-radius: 1rem;
  background: #fff;
  padding: 1rem 1rem 0.95rem;
  text-align: left;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.search-result-card:hover,
.search-result-card.active {
  transform: translateY(-1px);
  border-color: rgba(37, 99, 235, 0.34);
  box-shadow: 0 12px 24px rgba(37, 99, 235, 0.1);
}

.search-result-card strong,
.search-result-card span,
.search-result-card small {
  display: block;
}

.search-result-card span {
  color: #546779;
  margin-top: 0.2rem;
}

.search-result-card__pppoe {
  margin: 0.75rem 0 0.7rem;
  padding: 0.8rem 0.9rem;
  border: 2px solid #f59e0b;
  border-left-width: 6px;
  border-radius: 0.65rem;
  background: #fff7ed;
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.18);
}

.search-result-card__pppoe-label,
.search-result-card__pppoe-value {
  display: block;
}

.search-result-card__pppoe-label {
  color: #7c2d12;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.search-result-card__pppoe-value {
  color: #111827;
  font-family: "Courier New", monospace;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.search-result-card__pppoe--empty {
  border-color: #dc2626;
  background: #fef2f2;
}

.search-result-card__pppoe--empty .search-result-card__pppoe-label {
  color: #991b1b;
}

.calc-result-card {
  border: 1px solid rgba(15, 76, 129, 0.08);
}

.calc-result-com_multa {
  border-left: 6px solid #dc3545;
}

.calc-result-sem_multa {
  border-left: 6px solid #28a745;
}

.calc-result-sem_contrato,
.calc-result-pendente_dados {
  border-left: 6px solid #f59e0b;
}

.result-highlight {
  padding: 1.25rem;
  border-radius: 1rem;
  background: linear-gradient(135deg, rgba(15, 76, 129, 0.08), rgba(37, 99, 235, 0.03));
}

.result-highlight h2 {
  margin: 0 0 0.5rem;
  font-size: 1.65rem;
}

.result-highlight p {
  margin: 0;
  color: #41566a;
}

.calc-amount-box {
  height: 100%;
  padding: 1.2rem;
  border-radius: 1rem;
  background: #0f4c81;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 16px 30px rgba(15, 76, 129, 0.18);
}

.calc-amount-box span,
.calc-amount-box small {
  opacity: 0.86;
}

.calc-amount-box strong {
  font-size: 2rem;
  line-height: 1.1;
  margin: 0.35rem 0;
}

.calc-detail-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.9rem;
}

.calc-detail-grid div {
  padding: 0.95rem 1rem;
  background: #f8fbff;
  border-radius: 1rem;
  border: 1px solid rgba(15, 76, 129, 0.07);
}

.calc-detail-grid span,
.calc-detail-grid strong {
  display: block;
}

.calc-detail-grid span {
  font-size: 0.8rem;
  color: #6a7d90;
  margin-bottom: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.calc-detail-grid strong {
  color: #16344d;
}

.status-row-com_multa {
  background: rgba(239, 68, 68, 0.08);
}

.status-row-sem_multa {
  background: rgba(34, 197, 94, 0.08);
}

.status-row-sem_contrato,
.status-row-pendente_dados {
  background: rgba(245, 158, 11, 0.08);
}

.estoque-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: 1.65rem 1.8rem;
  margin-bottom: 1.2rem;
  border-radius: 1.1rem;
  background: #0f4c81;
  color: #fff;
  box-shadow: 0 22px 48px rgba(15, 76, 129, 0.22);
}

.estoque-hero h1 {
  margin: 0.35rem 0 0.45rem;
  font-size: 2rem;
}

.estoque-hero p {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  max-width: 760px;
}

.estoque-hero-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.estoque-card {
  border: 0;
  border-radius: 1rem;
  box-shadow: 0 15px 35px rgba(15, 76, 129, 0.08);
  overflow: hidden;
}

.estoque-kpi {
  display: block;
  height: 100%;
  padding: 1.15rem;
  border-radius: 1rem;
  color: #fff;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.14);
}

.estoque-kpi:hover {
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
}

.estoque-kpi span,
.estoque-kpi small {
  display: block;
  opacity: 0.9;
}

.estoque-kpi strong {
  display: block;
  font-size: 1.7rem;
  line-height: 1.1;
  margin: 0.35rem 0;
}

.kpi-blue { background: #2563eb; }
.kpi-green { background: #0f766e; }
.kpi-orange { background: #d97706; }
.kpi-red { background: #dc2626; }

.estoque-chart-wrap {
  position: relative;
  height: 260px;
  padding: 1rem;
  border: 1px solid rgba(15, 76, 129, 0.08);
  border-radius: 0.9rem;
  background: #f8fbff;
}

.estoque-table td {
  vertical-align: middle;
}

.estoque-row-alerta {
  background: #fff7ed;
}

.estoque-stock-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.42rem 0.58rem;
  border-radius: 0.65rem;
  font-weight: 800;
}

.estoque-stock-pill.is-ok {
  background: #dcfce7;
  color: #166534;
}

.estoque-stock-pill.is-low {
  background: #fee2e2;
  color: #991b1b;
}

.estoque-timeline {
  max-height: 620px;
  overflow: auto;
}

.estoque-timeline-item {
  padding: 1rem 1.15rem;
  border-bottom: 1px solid rgba(15, 76, 129, 0.08);
}

.estoque-timeline-item strong {
  display: block;
  margin: 0.4rem 0 0.2rem;
}

@media (max-width: 991.98px) {
  .equipment-hero {
    flex-direction: column;
    align-items: flex-start;
  }

  .equipment-toolbar {
    grid-template-columns: 1fr;
  }

  .training-hero {
    grid-template-columns: 1fr;
  }

  .links-filter-form .row {
    row-gap: 0.25rem;
  }

  .cancelamento-hero {
    flex-direction: column;
    align-items: flex-start;
  }

  .estoque-hero {
    flex-direction: column;
    align-items: flex-start;
  }

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

  .localidade-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767.98px) {
  .table-adaptive thead {
    display: none;
  }

  .table-adaptive,
  .table-adaptive tbody,
  .table-adaptive tr,
  .table-adaptive td {
    display: block;
    width: 100%;
  }

  .table-adaptive tr {
    padding: 1rem;
    margin: 0.75rem;
    background: #fff;
    border: 1px solid rgba(15, 76, 129, 0.08);
    border-radius: 1rem;
    border-bottom: 1px solid rgba(15, 76, 129, 0.08);
  }

  .table-adaptive td {
    border: 0;
    padding: 0.35rem 0;
    white-space: normal;
  }

  .table-adaptive td[data-label]::before {
    display: block;
  }

  .table-responsive-soft {
    border: 0;
    background: transparent;
  }

  .links-filter-form .btn {
    width: 100%;
  }

  .link-actions .btn {
    flex: 1 1 calc(50% - 0.45rem);
    min-width: 0;
  }

  .typing-metrics,
  .training-score-grid {
    grid-template-columns: 1fr;
  }

.calc-detail-grid {
  grid-template-columns: 1fr;
}

.estoque-hero {
  display: grid;
  padding: 1.25rem;
}

.estoque-hero h1 {
  font-size: 1.55rem;
}

.estoque-hero-actions .btn {
  flex: 1 1 auto;
}

.estoque-chart-wrap {
  height: 230px;
}
}

.metrics-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: 1.75rem 1.85rem;
  margin-bottom: 1.2rem;
  border-radius: 1.3rem;
  background: linear-gradient(135deg, #11131c 0%, #171924 100%);
  color: #f4f6fb;
  box-shadow: 0 22px 48px rgba(3, 8, 18, 0.32);
}

.metrics-brand {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.metrics-brand span {
  color: #ff8d3b;
}

.metrics-hero h1 {
  margin: 0.45rem 0 0.35rem;
  font-size: 2rem;
}

.metrics-hero p {
  margin: 0;
  color: rgba(244, 246, 251, 0.72);
  max-width: 760px;
}

.metrics-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.metrics-chip {
  padding: 0.62rem 0.9rem;
  border-radius: 0.85rem;
  border: 1px solid rgba(255, 202, 40, 0.35);
  background: rgba(255, 202, 40, 0.12);
  color: #ffd04a;
  font-size: 0.9rem;
  font-weight: 700;
}

.metrics-chip.danger {
  border-color: rgba(255, 99, 99, 0.35);
  background: rgba(255, 99, 99, 0.12);
  color: #ff8f8f;
}

.metrics-chip.info {
  border-color: rgba(59, 130, 246, 0.32);
  background: rgba(59, 130, 246, 0.12);
  color: #8cc0ff;
}

.metrics-surface {
  padding: 1rem;
  border-radius: 1.4rem;
  background: #10131b;
  color: #e9eef7;
}

.metrics-alert {
  padding: 0.9rem 1rem;
  border-radius: 0.9rem;
  margin-bottom: 0.9rem;
  font-weight: 600;
}

.metrics-alert.danger {
  background: rgba(154, 52, 60, 0.45);
  color: #ffb7b7;
}

.metrics-alert.warning {
  background: rgba(124, 126, 27, 0.45);
  color: #fff0a6;
}

.metrics-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin: 1rem 0 1.2rem;
}

.metrics-nav a {
  color: #dce3f0;
  text-decoration: none;
  font-size: 0.94rem;
}

.metrics-summary-grid,
.metrics-charts-grid,
.metrics-tables-grid {
  display: grid;
  gap: 1rem;
}

.metrics-summary-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 1rem;
}

.metrics-mini-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.metrics-charts-grid,
.metrics-tables-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 1rem;
}

.metrics-charts-grid-wide {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.metrics-tables-grid-wide {
  grid-template-columns: 1fr;
}

.metrics-card,
.metrics-panel {
  background: #232632;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 1.15rem;
  padding: 1.1rem 1.15rem;
}

.metrics-card {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.metrics-card.support-off { border-top: 3px solid #ff5c66; }
.metrics-card.install { border-top: 3px solid #f8bf3f; }
.metrics-card.other { border-top: 3px solid #3b82f6; }
.metrics-card.removal { border-top: 3px solid #b7b7b7; }

.metrics-card span,
.metrics-panel h3 {
  color: #d8dde8;
}

.metrics-card strong {
  display: block;
  font-size: 2.2rem;
  margin: 0.55rem 0 0.35rem;
  color: #fff;
}

.metrics-card small {
  color: #9faabd;
}

.metrics-mini-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.015));
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 1rem;
  padding: 0.95rem 1rem;
}

.metrics-mini-card span {
  display: block;
  color: #9fb0c6;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.metrics-mini-card strong {
  display: block;
  margin-top: 0.35rem;
  color: #fff;
  font-size: 1.7rem;
}

.metrics-panel h3 {
  margin: 0 0 1rem;
  font-size: 1.1rem;
  font-weight: 700;
}

.metrics-panel-tall {
  grid-column: span 2;
}

.metrics-panel-wide {
  grid-column: span 2;
}

.metrics-table-wrap {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.06);
}

.metrics-table-wrap .table {
  color: #e8edf8;
  background: transparent;
}

.metrics-table-wrap .table thead th {
  color: #95a3b8;
  border-color: rgba(255, 255, 255, 0.06);
}

.metrics-table-wrap .table td {
  border-color: rgba(255, 255, 255, 0.05);
}

.metrics-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 0.4rem;
}

.metrics-dot.red { background: #ff3347; }
.metrics-dot.yellow { background: #f8bf3f; }
.metrics-dot.green { background: #22c55e; }

.predictive-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
  margin-bottom: 1rem;
}

.predictive-kpis div {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 0.95rem;
  padding: 0.95rem 1rem;
}

.predictive-kpis span,
.predictive-kpis strong {
  display: block;
}

.predictive-kpis span {
  color: #98a7bb;
  font-size: 0.8rem;
  text-transform: uppercase;
}

.predictive-kpis strong {
  margin-top: 0.35rem;
  color: #fff;
  font-size: 1.35rem;
}

.predictive-list {
  margin: 0;
  padding-left: 1.25rem;
  color: #d9e2f2;
}

.predictive-list li + li {
  margin-top: 0.55rem;
}

@media (max-width: 991.98px) {
  .metrics-hero,
  .metrics-summary-grid,
  .metrics-mini-grid,
  .metrics-charts-grid,
  .metrics-tables-grid,
  .predictive-kpis {
    grid-template-columns: 1fr;
  }

  .metrics-hero {
    display: grid;
  }

  .metrics-panel-tall,
  .metrics-panel-wide {
    grid-column: auto;
  }
}