/* =========================================================
   Portal de Monitoramento IOB – CSS Base (portal.css)
   Tema global corrigido: primário azul, headers azuis
   ========================================================= */

/* ========= Paleta e base ========= */
:root{
  --mmg-navy: var(--main-blue, #031794);
  --mmg-cyan: var(--sky-blue, #1aebdd);
  --mmg-red:  var(--red, #fe0001);
  --mmg-bg:   var(--light-grey, #F4F5F7);
  --mmg-text: var(--grey, #4d4d4d);
  --mmg-head: var(--font-head, "AASmartSansHead", sans-serif);
  --mmg-main: var(--font-main, "AASmartSans", Arial, Helvetica, sans-serif);

  /* NOVO: primário de marca do portal (azul padrão do template) */
  --brand-primary: var(--mmg-navy, #031794);
}

body.mmg-skin{
  background:var(--mmg-bg);
  color:var(--mmg-text);
  font-family:var(--mmg-main);
}

/* ========= Títulos ========= */
.mmg-skin h1,.mmg-skin .h1,
.mmg-skin .h2,.mmg-skin .h3{
  font-family:var(--mmg-head);
  color:var(--main-blue, #031794);
}

/* ========= Top Banner ========= */
.brand-hero{
  background-image:url('/imagens/mmg-hero.jpg');
  background-size:cover; background-position:center; background-repeat:no-repeat;
  position:relative; min-height:120px; display:flex; align-items:center;
  padding:12px 16px; isolation:isolate;
}
.brand-hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(11,42,63,.15) 0%, rgba(11,42,63,.05) 60%, rgba(11,42,63,0) 100%);
  z-index:0;
}
.brand-logo{
  position:relative; z-index:1; height:56px; width:auto; object-fit:contain;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.15));
}

/* ========= Topbar ========= */
.topbar{ background:var(--mmg-navy); color:var(--white, #fff); }
.topbar .menu{ display:flex; gap:.5rem; align-items:stretch; margin:0; padding:0; }
.topbar .menu > li{ position:relative; list-style:none; }
.topbar .btn-root{
  display:flex; align-items:center; gap:.5rem;
  padding:.65rem 1rem; border:0; background:transparent; color:var(--white, #fff);
  font-weight:600; letter-spacing:.2px;
}
.topbar .btn-root:hover,.topbar .btn-root:focus{ background:rgba(255,255,255,.08); outline:none; }
.topbar .material-icons{ font-size:20px; opacity:.95; }

/* Dropdown */
.dropdown{ position:relative; }
.dropdown-menu{
  position:absolute; top:100%; left:0; z-index:1000;
  min-width:220px; padding:.35rem 0; margin-top:0;
  background:var(--white, #fff); color:var(--mmg-text);
  border:1px solid rgba(0,0,0,.08); border-radius:.5rem;
  box-shadow:0 10px 24px rgba(0,0,0,.12); display:none;
}
.dropdown:hover > .dropdown-menu,
.dropdown:focus-within > .dropdown-menu{ display:block; }
.dropdown-item{
  display:flex; gap:.6rem; align-items:center;
  padding:.55rem .9rem; text-decoration:none; color:inherit;
}
.dropdown-item:hover,.dropdown-item:focus{ background:var(--light-grey-2, #f6f8fb); color:inherit; }
.dropdown-item .material-icons{ font-size:18px; color:var(--mmg-navy); }

/* ========= Conteúdo / Toolbar ========= */
.content-wrap{ padding:1.25rem 0 2rem; }
.lead-note{
  color:var(--mmg-text); background:var(--white, #fff); border:1px dashed var(--grey-3, #D7D4D5);
  border-radius:.75rem; padding:1rem 1.25rem;
}
.toolbar .form-label{ font-size:.8rem; color:var(--dark-grey-2, #797979); margin-bottom:.25rem; }
.toolbar .form-control,.toolbar .form-select{ border-color:var(--grey-4, #ccc); }

/* CORRIGIDO: foco azul (antes estava vermelho) */
.toolbar .form-control:focus,.toolbar .form-select:focus{
  /* Dica: ajuste o RGBA se personalizar --brand-primary */
  box-shadow:0 0 0 .2rem rgba(3,23,148,.25) !important; /* ~ var(--brand-primary) at 25% */
  border-color:var(--brand-primary) !important;
}

/* ========= Botões ========= */
/* CORRIGIDO: .btn-primary volta a ser azul do template (em todo o portal) */
.mmg-skin .btn-primary{
  background:var(--brand-primary) !important;
  border-color:var(--brand-primary) !important;
  color:var(--white, #fff);
}
.mmg-skin .btn-primary:hover,
.mmg-skin .btn-primary:focus{
  filter:brightness(.95);
}

/* ========= Card base ========= */
/* CORRIGIDO: headers deixam de ser vermelhos e passam a ser azuis do tema */
.printer-card .card-header,
.ups-card .card-header{
  background:var(--brand-primary) !important;
  color:var(--white, #fff) !important;
  padding:.6rem .75rem;
}

/* O título no header do card permanece branco para contraste */
.printer-card .card-header .fw-semibold{ color:var(--white, #fff) !important; }
.printer-card .card-header .header-kv{ color:var(--white, #fff) !important; opacity:.95; line-height:1.1rem; }

.badge{
  text-transform:uppercase; letter-spacing:.6px; font-weight:700;
  border-radius:999px; padding:.25rem .5rem; font-size:.7rem;
}

/* Estados (mantidos) */
.badge-ok{ background:#198754; color:var(--white, #fff); }
.badge-warning{ background:#fd7e14; color:var(--grey, #4d4d4d); }
/* Crítico continua vermelho institucional */
.badge-critical{ background:var(--mmg-red); color:var(--white, #fff); }

.card-body{ font-size:.95rem; line-height:1.25rem; }
.field-line{ font-size:.95rem; }
.field-label{ font-weight:600; }
.card-footer{ font-size:.85rem; color:var(--dark-grey-2, #797979); }

/* ========= Barras (genéricas) ========= */
.meter-row{ display:flex; align-items:center; gap:.5rem; margin-bottom:.5rem; }
.meter-tag{ font-size:.85rem; font-weight:500; min-width:52px; }
.meter-pct{ font-size:.85rem; font-weight:500; min-width:38px; text-align:right; }
.meter-bar{ flex:1; height:10px; background:var(--grey-3, #D7D4D5); border-radius:999px; overflow:hidden; }
.meter-fill{ height:100%; width:0; border-radius:inherit; transition:width .3s ease; background-blend-mode:overlay; }
.meter-fill.ok{ background-color:#198754; }
.meter-fill.warning{ background-color:#fd7e14; }
/* Crítico permanece vermelho */
.meter-fill.critical{ background-color:var(--mmg-red); }

/* ========= Link do IP (contraste no header azul) ========= */
.printer-card .card-header a,
.printer-card .card-header a:visited,
.ups-card .card-header a{
  color:var(--white, #fff) !important; text-decoration:underline; text-underline-offset:2px;
}
.printer-card .card-header a:hover,
.printer-card .card-header a:focus,
.ups-card .card-header a:hover,
.ups-card .card-header a:focus{
  color:var(--light-blue, #1E7CFF) !important; text-decoration:underline;
}

/* ========= Imagens ========= */
.switch-media{ display:flex; justify-content:center; align-items:center; margin-top:1rem; }
.switch-shot,.printer-img{ display:block; max-width:100%; height:auto; object-fit:contain; }
.printer-img{ max-width:140px; max-height:120px; }
@media (min-width:1400px){
  .printer-img{ max-width:160px; max-height:120px; }
}

/* ========= Ícone localização ========= */
.material-symbols-outlined{
  font-size:20px; vertical-align:middle; color:var(--white, #fff); margin-left:.25rem; cursor:pointer;
}
.material-symbols-outlined:hover{ filter:brightness(.9); }

/* ========= Utilitários ========= */
.small-mono{ font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size:.875rem; }
.summary{ font-size:.9rem; color:var(--dark-grey-2, #797979); }
.updated{ font-size:.85rem; color:var(--dark-grey-2, #797979); }

/* =========================================================
   IMPRESSORAS – SUPRIMENTOS (toners) – layout final
   ========================================================= */

/* Linha geral (barras \n imagem) sem limites artificiais */
.printer-card .card-body .row.align-items-center{
  margin-left:0 !important; margin-right:0 !important; row-gap:.5rem;
  position:relative;
}
.printer-card .card-body .row.align-items-center > .col,
.printer-card .card-body .row.align-items-center > .col-auto{
  padding-left:0 !important; padding-right:0 !important; max-width:none !important;
}

/* Cada suprimento: flex estável (nome \n barra \n %) */
.supply-row{
  display:flex; align-items:center; gap:.5rem; margin:.15rem 0;
}
.supply-name{
  flex:0 0 84px; font-weight:600; font-size:.85rem;
  padding-left:.125rem; white-space:nowrap;
}
.supply-val{
  flex:0 0 48px; text-align:right; font-variant-numeric:tabular-nums;
  font-size:.80rem; white-space:nowrap;
}

/* Barra: espessa e com comprimento limitado (não entra na imagem) */
.gauge-wrap{ flex:1 1 auto; max-width:clamp(180px, 45vw, 240px); }
.gauge-wrap .progress{ width:100%; height:12px; background:var(--grey-3, #D7D4D5); }
.gauge-wrap .progress .progress-bar{ transition:width .25s ease; }

/* =========================================================
   Responsividade
   ========================================================= */
@media (max-width:768px){
  .topbar .menu{ flex-wrap:wrap; }
  .dropdown-menu{
    position:static; width:100%; box-shadow:none;
    border-radius:.35rem; border:1px solid var(--grey-4, #ccc);
  }
}

/* ==============================
   DASHBOARD UPS
   ============================== */
.ups-toolbar .form-label { font-size: .8rem; margin-right: .35rem; }
.ups-toolbar .form-select,
.ups-toolbar .form-control { height: calc(1.5rem + 10px); padding: .25rem .5rem; }

/* Header de UPS também AZUL (antes vermelho) */
.ups-card .card-header {
  background: var(--brand-primary) !important;
  color: var(--white, #fff) !important;
}

.ups-card .card-header a {
  color: var(--white, #fff) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.badge.sev-ok   { background: #198754 !important; }
.badge.sev-warn { background: #fd7e14 !important; color: var(--grey, #4d4d4d); }
/* Crítico permanece vermelho */
.badge.sev-crit { background: var(--mmg-red) !important; }

.gauge .progress { height: 10px; background: var(--grey-3, #D7D4D5); }
.gauge .progress-bar { transition: width .3s ease; }
.gauge.ok   .progress-bar { background: #198754; }   /* >=80%  */
.gauge.warn .progress-bar { background: #fd7e14; }   /* 40–79% */
.gauge.crit .progress-bar { background: var(--mmg-red); } /* <40%  */

.ups-img {
  max-width: 160px;
  height: auto;
  object-fit: contain;
}

.small-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

.kv-line .label {
  opacity: .85;
  margin-right: .25rem;
}

/* Grid responsivo para cards UPS */
#ups-cards .col { display: flex; }
#ups-cards .card { width: 100%; }

/* ==== Patch UPS (Anglo American theme) – mantido, ajustado ao azul global ==== */
/* 1) Garantir fundo branco no herói (fallback) */
.brand-hero {
  background: #fff !important;
  background-image: none !important;
}

/* 2) Acento visual nos ícones dentro dos cards de UPS (azul institucional) */
.ups-card .material-icons,
.ups-card .material-symbols-outlined {
  color: #005DAA !important; /* Anglo blue - ajuste se desejar unificar com --brand-primary */
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

/* 3) Progress bars: usar classes existentes, garantindo contraste/coerência */
.progress-bar.badge-ok       { background-color: #0B72B5 !important; } /* azul + forte */
.progress-bar.badge-warning  { background-color: #F5A623 !important; } /* âmbar */
.progress-bar.badge-critical { background-color: #EE2724 !important; } /* vermelho institucional */

/* 4) Badges de status (mantendo paleta do template) */
.badge.badge-ok {
  background-color: #0B72B5 !important;
  color: #fff !important;
}
.badge.badge-warning {
  background-color: #F5A623 !important;
  color: #222 !important;
}
.badge.badge-critical {
  background-color: #EE2724 !important;
  color: #fff !important;
}

/* 5) Toolbar mais enxuta (sem mudar o HTML) */
@media (min-width: 768px) {
  #toolbar .row { row-gap: .5rem; }
  #toolbar #searchHost { max-width: 260px; } /* encolhe o campo de busca */
  #toolbar #sortMode  { max-width: 220px; }
  #toolbar .btn.btn-primary.btn-sm { white-space: nowrap; }
}

/* 6) Espaçamentos e tipografia dos cards (sutil) */
.ups-card .card-header .fw-semibold { font-weight: 600; }
.ups-card .small.text-muted { opacity: .9; }
.ups-card .progress { height: 10px; } /* mais grossa para melhor leitura */


.badge.badge-ok,
.badge-ok {
  background-color: #198754 !important; /* Verde */
  color: #fff !important;
}
.badge.badge-warning,
.badge-warning {
  background-color: #fd7e14 !important; /* Laranja */
  color: #222 !important;
}
.badge.badge-critical,
.badge-critical {
  background-color: #EE2724 !important; /* Vermelho */
  color: #fff !important;
}