/* ===========================================================
   Portal de Sistemas — CBMAC
   Complementos ao tema AdminLTE2 (skin-red).
   Carregado DEPOIS do AdminLTE para sobrescrever pontos pontuais.
   =========================================================== */

:root {
  --red:        #C8102E;
  --red-dark:   #9E0C24;
  --green:      #1B6B3A;
  --gold:       #F2A900;
  --muted:      #6c7280;
}

/* Top navbar na skin vermelha */
.skin-red .main-header .navbar { background-color: var(--red); }
.skin-red .main-header .navbar .nav > li > a { color: rgba(255,255,255,.9); }
.skin-red .main-header .navbar .nav > li > a:hover,
.skin-red .main-header .navbar .nav > .active > a,
.skin-red .main-header .navbar .nav .open > a { background-color: var(--red-dark); color: #fff; }

/* Marca com o brasao */
.navbar-brand { display: flex; align-items: center; gap: 8px; font-size: 17px; padding-top: 10px; padding-bottom: 10px; }
.skin-red .main-header .navbar-brand { color: #fff; }
.navbar-brand__logo { height: 30px; width: auto; }
.navbar-brand b { font-weight: 800; }

/* Faixa dourada sob o topo, lembrando o brasao */
.main-header { border-bottom: 3px solid var(--gold); }

/* O dropdown de categorias dentro do topo */
.dropdown-menu .label { margin-left: 10px; }

/* Avatar com inicial (no lugar da foto do usuario) */
.nav-initial {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--gold); color: #3a2a00;
  font-weight: 700; font-size: .82rem; margin-right: 6px;
  vertical-align: middle;
}
.nav-initial--lg {
  width: 56px; height: 56px; font-size: 1.4rem;
  border: 3px solid rgba(255,255,255,.5);
}
.user-header .nav-initial--lg { margin: 0 auto 8px; display: flex; }

/* ===== Grade de sistemas ===== */
.sysgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

/* ===== Card de sistema ===== */
.syscard {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid #e4e4e2;
  border-radius: 4px;
  overflow: hidden;
  color: #333;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.syscard:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
  border-color: var(--gold);
  text-decoration: none; color: #333;
}
.syscard__thumb {
  position: relative; height: 96px;
  background: linear-gradient(135deg, #f3f1ec, #e7e4dc);
  display: grid; place-items: center; overflow: hidden;
}
.syscard__thumb > img:not(.syscard__favicon) { width: 100%; height: 100%; object-fit: cover; }
.syscard__initial { display: none; font-size: 2.2rem; color: var(--red); opacity: .45; }
.syscard__thumb--fallback .syscard__initial,
.syscard__thumb--favicon:not(:has(img)) .syscard__initial { display: block; }

/* ===== Favicon do sistema (cards sem imagem) ===== */
.syscard__thumb--favicon { background: linear-gradient(135deg, #f7f6f2, #ececdf); }
.syscard__favicon {
  width: 52px; height: 52px;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.12));
}

.syscard__body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.syscard__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.syscard__name { font-weight: 600; font-size: .98rem; line-height: 1.25; }
.syscard__desc { margin: 0; font-size: .8rem; color: var(--muted); }
.syscard__url {
  margin-top: auto; font-size: .74rem; color: var(--red-dark);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Acentos da skin nos boxes */
.box.box-danger { border-top-color: var(--red); }
.box-title i { margin-right: 4px; }

/* Miniatura na tabela do admin */
.admin-thumb {
  width: 28px; height: 28px; border-radius: 4px; object-fit: cover;
  border: 1px solid #e4e4e2; margin-right: 8px; vertical-align: middle;
}

/* Formularios inline (botoes de excluir dentro de celulas) */
.inline-form { display: inline; }

/* Labels um pouco maiores para leitura */
.label { font-size: .72em; }