@charset "UTF-8";
/* theme-name: AtendeCidadão — Monte Sião */
/*
 * Tema institucional da Prefeitura de Monte Sião sobre o GLPI 11.
 * Carregado sobre todas as páginas (ThemeManager). Rebranda a cor da plataforma
 * para o azul do brasão e moderniza alguns componentes — sem editar o core.
 * Cores do brasão: azul #0048a8 / #0090c0, verde #00a848, ouro #ffd800.
 */
:root {
  /* ----- cor institucional (primária) ----- */
  --tblr-primary: #0048a8;
  --tblr-primary-rgb: 0, 72, 168;
  --tblr-primary-fg: #ffffff;
  /* links */
  --tblr-link-color: #0056c7;
  --tblr-link-color-rgb: 0, 86, 199;
  --tblr-link-hover-color: #00337a;
  /* menu lateral / cabeçalho do helpdesk em azul profundo */
  --glpi-mainmenu-bg: #04234f;
  /* cabeçalho de formulários na cor institucional */
  --glpi-form-header-fg: #0048a8;
  /* ----- logotipos institucionais (substituem o "GLPI") ----- */
  /* completo, sobre fundo escuro (sidebar/cabeçalho) */
  --glpi-logo-light: url("/plugins/montesiao/img/logo-branca.png");
  /* reduzido (menu recolhido), fundo escuro -> brasão */
  --glpi-logo-light-reduced: url("/plugins/montesiao/img/brasao-64.png");
  /* completo, sobre fundo claro */
  --glpi-logo-dark: url("/plugins/montesiao/img/logo-cor.webp");
  /* reduzido, fundo claro -> brasão */
  --glpi-logo-dark-reduced: url("/plugins/montesiao/img/brasao-64.png");
  /* páginas de login/anônimas (o login já tem tratamento próprio) */
  --glpi-logo-dark-login: url("/plugins/montesiao/img/logo-cor.webp");
  --glpi-logo-light-login: url("/plugins/montesiao/img/logo-branca.png");
}

/* ============================================================= */
/*  LOGOTIPO maior e proporcional                                */
/* ============================================================= */
/* O box padrão do GLPI é 100x55; o lockup horizontal encolhia. */
.page .glpi-logo {
  width: 188px;
  height: 52px;
  background-size: contain;
  background-position: left center;
}

/* menu recolhido continua com o brasão em 40x40 (regra do core, mais específica) */
/* ============================================================= */
/*  POLIMENTO — tasteful e de baixo risco                        */
/* ============================================================= */
/* Botões: cantos mais macios; primário com leve profundidade. */
.btn {
  border-radius: 8px;
}

.btn-primary {
  box-shadow: 0 6px 14px -8px rgba(0, 72, 168, 0.6);
}

.btn-primary:hover {
  filter: brightness(1.05);
}

/* Cartões: cantos arredondados e sombra suave e coesa. */
.card {
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(16, 42, 67, 0.04), 0 10px 26px -20px rgba(16, 42, 67, 0.28);
}

/* Campos: foco na cor institucional e cantos suaves. */
.form-control, .form-select, .form-multiselect {
  border-radius: 8px;
}

.form-control:focus, .form-select:focus, .form-multiselect:focus {
  border-color: var(--tblr-primary);
  box-shadow: 0 0 0 0.2rem rgba(0, 72, 168, 0.15);
}

/* Barra lateral: itens com cantos suaves, hover discreto e acento
   ciano no item ativo. */
.sidebar .nav-link,
.navbar-vertical .nav-link {
  border-radius: 8px;
}

.sidebar .nav-item .nav-link:hover,
.navbar-vertical .nav-item .nav-link:hover {
  background: rgba(255, 255, 255, 0.06);
}

.sidebar .nav-item .nav-link.active,
.navbar-vertical .nav-item .nav-link.active {
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 3px 0 0 0 #0090c0;
}

/* Cabeçalhos de bloco / seção: peso e cor institucionais. */
.datagrid-title, .card-title {
  letter-spacing: 0.01em;
}

/* Abas ativas na cor institucional (herdam --tblr-primary, reforço leve). */
.nav-tabs .nav-link.active {
  border-bottom-color: var(--tblr-primary);
}

/* Badges e links já herdam a cor institucional via --tblr-*. */
/* ============================================================= */
/*  DASHBOARDS — modernização dos cards e widgets                */
/* ============================================================= */
/* Todos os cards do dashboard: cantos arredondados, sem borda,
   sombra suave e leve elevação no hover. */
.dashboard .card {
  border-radius: 16px !important;
  border: 0 !important;
  box-shadow: 0 1px 2px rgba(16, 42, 67, 0.05), 0 14px 30px -22px rgba(16, 42, 67, 0.4);
  transition: transform 0.16s ease, box-shadow 0.22s ease;
  overflow: hidden;
}

.dashboard .grid-stack-item-content:hover > .card,
.dashboard .card:hover {
  transform: translateY(-3px);
  box-shadow: 0 1px 2px rgba(16, 42, 67, 0.06), 0 22px 42px -22px rgba(16, 42, 67, 0.5);
}

/* Cartões de número (big number): número mais forte, rótulo legível,
   ícone como marca-d'água discreta. */
.dashboard .card.big-number .content {
  font-weight: 800;
  letter-spacing: -0.02em;
}

.dashboard .card.big-number .label {
  font-weight: 600;
  letter-spacing: 0.01em;
  opacity: 0.96;
}

.dashboard .card.big-number .main-icon {
  opacity: 0.26;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.dashboard .card.big-number:hover .main-icon {
  opacity: 0.34;
  transform: scale(1.04);
}

/* Títulos dos widgets de gráfico/lista. */
.dashboard .card .card-title,
.dashboard .card > .label {
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* Barra de ferramentas do dashboard (ícones de topo) mais discreta. */
.dashboard .toolbar .btn {
  border-radius: 8px;
}

/* ============================================================= */
/*  LISTAS / BUSCA (search-results)                              */
/* ============================================================= */
/* Cabeçalho da tabela: rótulos em caixa alta, discretos, com base institucional.
   (Sem mexer em overflow/largura das colunas para não quebrar o scroll horizontal
    nem o cabeçalho fixo do GLPI.) */
.search-results.table > thead > tr > th {
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.045em;
  font-weight: 700;
  color: #5a6b7d;
  background: color-mix(in srgb, var(--tblr-primary) 6%, var(--tblr-bg-surface));
  border-bottom: 2px solid color-mix(in srgb, var(--tblr-primary) 22%, transparent);
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}

/* Linhas: respiro e destaque suave no hover na cor institucional. */
.search-results.table > tbody > tr > td {
  padding-top: 0.58rem;
  padding-bottom: 0.58rem;
  vertical-align: middle;
}

.search-results.table.table-hover > tbody > tr:hover > td {
  background: rgba(0, 72, 168, 0.055);
}

/* zebra mais leve para não competir com o hover */
.search-results.table.table-striped > tbody > tr:nth-of-type(odd) > td {
  --tblr-table-accent-bg: rgba(16, 42, 67, .022);
}

/* título do chamado clicável em destaque */
.search-results.table > tbody a {
  font-weight: 600;
}

/* ============================================================= */
/*  FORMULÁRIO DE CHAMADO (ITIL)                                 */
/* ============================================================= */
/* Cartões da timeline: cantos suaves e sombra leve. */
.itil-timeline .timeline-item .card,
.itil-timeline .timeline-item > .card {
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(16, 42, 67, 0.04), 0 8px 20px -16px rgba(16, 42, 67, 0.22);
}

/* Painel de propriedades à direita: leitura mais confortável. */
.itil-right-side .card-body,
.itil-right-side {
  scrollbar-width: thin;
}

.itil-right-side label,
.itil-left-side label {
  font-weight: 600;
}

/* Faixa superior do conteúdo do chamado acompanha a cor institucional
   quando não houver cor de status específica. */
.itil-left-side.border-top {
  border-top-color: color-mix(in srgb, var(--tblr-primary) 45%, transparent) !important;
}

/* Botão "Responder" e ações do rodapé do chamado. */
.timeline-buttons .btn-primary,
.itil-footer .btn-primary {
  border-radius: 9px;
}

/* ============================================================= */
/*  HOME DO ATENDIMENTO AO CIDADÃO (helpdesk)                     */
/* ============================================================= */
/* altura natural: a página acompanha o conteúdo (sem o vão branco quando há
   poucas solicitações). A seção de tickets deixa de "crescer" por flex. */
.helpdesk-home-container {
  height: auto !important;
  background: #fff;
}

.helpdesk-home-container .tickets-banner {
  flex: 0 0 auto !important;
}

.helpdesk-home-container .ms-hd-footer {
  margin-top: 0;
}

/* ----- HERO: degradê institucional + textura + silhueta ----- */
.helpdesk-home-container .search-banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(150deg, #001b45 0%, #012a63 42%, #0048a8 82%, #0090c0 130%) !important;
}

.helpdesk-home-container .search-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: 0.09;
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.6) 0 2px, transparent 2px 10px), repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.6) 0 2px, transparent 2px 10px);
  background-size: 14px 14px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.75), transparent 75%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.75), transparent 75%);
}

.helpdesk-home-container .search-banner::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 120px;
  z-index: -1;
  background: no-repeat bottom/cover url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 130' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' fill-opacity='0.06' d='M0 90 L70 55 L140 85 L210 40 L290 78 L360 44 L440 82 L520 52 L600 84 L600 130 L0 130 Z'/%3E%3Cpath fill='%23ffffff' fill-opacity='0.05' d='M0 108 L90 78 L170 100 L250 70 L340 98 L430 72 L520 96 L600 74 L600 130 L0 130 Z'/%3E%3C/svg%3E");
}

/* ilustrações genéricas do GLPI fora; hero limpo e centralizado */
.helpdesk-home-container .search-banner .scene {
  display: none !important;
}

.helpdesk-home-container .search-banner .search-banner-content {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
  padding-top: 118px !important;
  padding-bottom: 118px !important;
}

/* título com eyebrow institucional */
.helpdesk-home-container .search-banner-content h1 {
  color: #fff !important;
  font-weight: 800;
  font-size: clamp(1.9rem, 4vw, 2.7rem);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.helpdesk-home-container .search-banner-content h1::before {
  content: "Prefeitura de Monte Sião · Atendimento ao Cidadão";
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 0.95rem;
}

/* barra de busca destacada */
.helpdesk-home-container .search-bar-container {
  margin-top: 1.7rem;
}

.helpdesk-home-container .home-search {
  border: 0 !important;
  border-radius: 14px !important;
  height: 60px;
  font-size: 1.05rem;
  background: #fff;
  box-shadow: 0 20px 44px -20px rgba(0, 0, 0, 0.55);
}

.helpdesk-home-container .home-search:focus {
  box-shadow: 0 20px 44px -20px rgba(0, 0, 0, 0.55), 0 0 0 4px rgba(0, 144, 192, 0.35);
}

.helpdesk-home-container .search-bar-container .input-icon-addon {
  color: var(--tblr-primary);
}

/* ----- TILES (acesso rápido) ----- */
.helpdesk-home-container .tiles-banner {
  background: #eef3f9 !important;
  padding-top: 56px !important;
  padding-bottom: 56px !important;
}

.helpdesk-home-container .tiles-banner .card {
  border: 0 !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 2px rgba(16, 42, 67, 0.04), 0 14px 30px -22px rgba(16, 42, 67, 0.4);
  transition: transform 0.16s ease, box-shadow 0.22s ease;
}

.helpdesk-home-container .tiles-banner .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 1px 2px rgba(16, 42, 67, 0.06), 0 24px 46px -22px rgba(16, 42, 67, 0.5);
}

.helpdesk-home-container .tiles-banner .card-body {
  padding: 1.5rem 1.6rem;
}

.helpdesk-home-container .tiles-banner .card-title {
  font-weight: 800;
  color: #12293f;
}

/* moldura institucional para a ilustração do tile */
.helpdesk-home-container .tiles-banner .aspect-ratio-1 {
  background: color-mix(in srgb, var(--tblr-primary) 10%, #fff);
  border-radius: 14px;
  padding: 0.55rem;
  align-self: flex-start;
}

/* cabeçalho de seção "Acesso rápido" (injetado pelo helpdesk.js) */
.helpdesk-home-container .tiles-banner .ms-hd-section {
  font-size: 1.15rem;
  font-weight: 800;
  color: #12293f;
  letter-spacing: -0.01em;
  margin: 0 0 1.1rem;
  padding-left: 0.35rem;
}

/* ----- SEÇÃO DE SOLICITAÇÕES ----- */
.helpdesk-home-container .tickets-banner {
  background: #fff !important;
  padding-top: 48px !important;
  padding-bottom: 56px !important;
}

/* ----- RODAPÉ INSTITUCIONAL (injetado pelo helpdesk.js) ----- */
.helpdesk-home-container .ms-hd-footer {
  background: #04234f;
  color: rgba(255, 255, 255, 0.82);
  padding: 2.4rem clamp(1.2rem, 5vw, 4rem) 1.6rem;
}

.ms-hd-footer__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem 3rem;
  justify-content: space-between;
  align-items: flex-start;
}

.ms-hd-footer__brand strong {
  display: block;
  color: #fff;
  font-size: 1.05rem;
}

.ms-hd-footer__brand span {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
}

.ms-hd-footer__cols {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem 3rem;
}

.ms-hd-footer__col {
  font-size: 0.92rem;
  line-height: 1.7;
}

.ms-hd-footer__label {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #ffd800;
  font-weight: 700;
  margin-bottom: 0.3rem;
}

.ms-hd-footer a {
  color: #fff;
  text-decoration: none;
}

.ms-hd-footer a:hover {
  text-decoration: underline;
}

.ms-hd-footer__sig {
  max-width: 1100px;
  margin: 1.4rem auto 0;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.6);
}

.ms-hd-footer__sig strong {
  color: #a8cf45;
  font-weight: 800;
}