/* 
  Redesign sTIP - Estilos Customizados
  Este arquivo estende as classes padrões do Bulma CSS
  com regras específicas para o projeto de inspeção e monitoramento sTIP.
  Modernizado para o padrão Google Material Design com alta densidade de informação ("justified density").
*/

/* 1. VARIÁVEIS DO TEMA GOOGLE E BULMA OVERRIDES */
:root {
  /* Cores de Destaque Google */
  --google-blue: #1a73e8;
  --google-blue-hover: #1557b0;
  --google-blue-light: #e8f0fe;
  --google-green: #1e8e3e;
  --google-green-hover: #137333;
  --google-green-light: #e6f4ea;
  --google-red: #d93025;
  --google-red-hover: #b0120a;
  --google-red-light: #fce8e6;
  --google-yellow: #f9ab00;
  --google-yellow-hover: #e39a00;
  --google-yellow-light: #fef7e0;
  
  /* Cores Neutras Modernas */
  --google-text-primary: #202124;
  --google-text-secondary: #5f6368;
  --google-text-disabled: #9aa0a6;
  --google-bg: #f8f9fa;
  --google-surface: #ffffff;
  --google-border: #dadce0;
  --google-border-light: #e8eaed;
  
  /* Gradients sTIP originais adaptados para maior harmonia */
  --stip-success-gradient: linear-gradient(135deg, #1e8e3e 0%, #137333 100%);
  --stip-danger-gradient: linear-gradient(135deg, #d93025 0%, #b0120a 100%);

  /* Sobrescrição de Variáveis CSS Bulma v1.x */
  --bulma-primary: var(--google-blue) !important;
  --bulma-link: var(--google-blue) !important;
  --bulma-success: var(--google-green) !important;
  --bulma-danger: var(--google-red) !important;
  --bulma-warning: var(--google-yellow) !important;
  --bulma-info: var(--google-blue) !important;
  --bulma-light: var(--google-bg) !important;
  --bulma-dark: var(--google-text-primary) !important;
  --bulma-text: var(--google-text-primary) !important;
  --bulma-border: var(--google-border) !important;
  --bulma-body-background-color: var(--google-bg) !important;
}

/* 2. TIPOGRAFIA ESCALÁVEL E REDE DEFINIÇÃO DO BODY */
html {
  font-size: clamp(13px, 0.8rem + 0.15vw, 15px) !important;
  background-color: var(--google-bg) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  color: var(--google-text-primary) !important;
  background-color: var(--google-bg) !important;
  line-height: 1.45 !important;
}

html, body {
    height: 100%;
    min-height: 100vh;
    /* Uses the system variable fallback to map the clean unified gray background */
    background-color: var(--google-bg, #f8f9fa) !important; 
    margin: 0;
    padding: 0;
}

/* Ensures that the primary generic wrapper section inside your layout (often wrapped in Bulma's .section) 
  also enforces a high-density footprint so children layout grids can map comfortably.
*/
main, .main-content, section.section {
    min-height: calc(100vh - 60px); /* Subtracts typical standard top navbar height estimates */
}


/* Títulos Compactos e Elegantes */
.title {
  color: var(--google-text-primary) !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
}
.title.is-1 { font-size: clamp(1.6rem, 2vw, 2.2rem) !important; }
.title.is-2 { font-size: clamp(1.35rem, 1.7vw, 1.75rem) !important; }
.title.is-3 { font-size: clamp(1.15rem, 1.4vw, 1.45rem) !important; }
.title.is-4 { font-size: clamp(1rem, 1.2vw, 1.2rem) !important; }
.title.is-5 { font-size: clamp(0.85rem, 1vw, 1.05rem) !important; }
.title.is-6 { font-size: clamp(0.75rem, 0.85vw, 0.9rem) !important; }

.subtitle {
  color: var(--google-text-secondary) !important;
  font-weight: 400 !important;
}
.subtitle.is-1 { font-size: clamp(1.15rem, 1.4vw, 1.35rem) !important; }
.subtitle.is-2 { font-size: clamp(1.05rem, 1.2vw, 1.25rem) !important; }
.subtitle.is-3 { font-size: clamp(0.95rem, 1.1vw, 1.15rem) !important; }
.subtitle.is-4 { font-size: clamp(0.85rem, 1vw, 1rem) !important; }
.subtitle.is-5 { font-size: clamp(0.75rem, 0.9vw, 0.85rem) !important; }
.subtitle.is-6 { font-size: clamp(0.7rem, 0.8vw, 0.78rem) !important; }

/* 3. ARREDONDAMENTO SUAVE (8px–12px) E ELEVAÇÃO DIFUSA */
.card, .box, .modal-card, .modal-content {
  border-radius: 12px !important;
  border: 1px solid var(--google-border-light) !important;
  box-shadow: 0 1px 3px rgba(60, 64, 67, 0.1), 0 1px 2px rgba(60, 64, 67, 0.15) !important;
  background-color: var(--google-surface) !important;
  transition: box-shadow 0.22s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.22s ease !important;
  overflow: hidden;
}

.box {
  padding: 1rem !important; /* Mais denso do que os 1.25rem do Bulma original */
}

/* Hover sutil no padrão Google */
.card:hover, .box:hover {
  box-shadow: 0 4px 8px rgba(60, 64, 67, 0.12), 0 1px 3px rgba(60, 64, 67, 0.18) !important;
  border-color: var(--google-border) !important;
  transform: none !important; /* Sem efeito 3D pesado para manter fidelidade ao Google flat UI */
}

/* Arredondamento Pequeno para Interações */
.button, .input, .select, .select select, .textarea, .pagination-link, .pagination-next, .pagination-previous {
  border-radius: 8px !important;
}

/* 4. DENSIDADE JUSTIFICADA (ALTA DENSIDADE SEM POLUIÇÃO VISUAL) */
.section {
  padding: 1rem 1rem !important; /* Extrema otimização do whitespace lateral/vertical */
}
@media screen and (min-width: 769px) {
  .section {
    padding: 1.25rem 1.5rem !important;
  }
}

/* Campos de Formulários mais Compactos */
.field:not(:last-child) {
  margin-bottom: 0.45rem !important;
}

.label {
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  color: var(--google-text-secondary) !important;
  margin-bottom: 0.15rem !important;
  letter-spacing: 0.01em !important;
}

/* Elementos de Formulário */
.input, .select select, .textarea {
  height: 2.15rem !important; /* Altura compacta Google de 34px aprox */
  font-size: 0.825rem !important;
  padding-left: 0.75rem; /* Removido !important para permitir que as classes de ícones funcionem */
  padding-right: 0.75rem; /* Removido !important para permitir que as classes de ícones funcionem */
  border: 1px solid var(--google-border) !important;
  box-shadow: none !important;
  background-color: var(--google-surface) !important;
  color: var(--google-text-primary) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

/* Margem de segurança para campos com ícones (evita que o texto fique sob o ícone no Bulma) */
.control.has-icons-left .input,
.control.has-icons-left .select select {
  padding-left: 2.25rem !important;
}

.control.has-icons-right .input,
.control.has-icons-right .select select {
  padding-right: 2.25rem !important;
}

.textarea {
  height: auto !important;
  min-height: 4.5rem !important;
}

.input:hover, .select select:hover, .textarea:hover {
  border-color: var(--google-text-secondary) !important;
}

.input:focus, .select select:focus, .textarea:focus, 
.input.is-focused, .select select.is-focused, .textarea.is-focused {
  border-color: var(--google-blue) !important;
  box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.15) !important;
}

/* Tabelas Ultra Densas para Grande Volume de Dados */
.table {
  background-color: transparent !important;
}
.table-container {
  margin-bottom: 0px !important;
}

.table th {
  border-bottom: 2px solid var(--google-border-light) !important;
  color: var(--google-text-secondary) !important;
  font-size: 0.725rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 0.45rem 0.65rem !important; /* Altamente otimizado */
  vertical-align: middle !important;
}

.table td {
  border-bottom: 1px solid var(--google-border-light) !important;
  padding: 0.45rem 0.65rem !important;
  vertical-align: middle !important;
  font-size: 0.825rem !important;
  color: var(--google-text-primary) !important;
}

/* Transições suaves hover para tabelas e cartões */
.table tbody tr {
  transition: background-color 0.1s ease-in-out;
}
.table tbody tr:hover {
  background-color: #f1f3f4 !important; /* Google hover default row */
}

/* Botões do Formulário e Painéis */
.button {
  height: 2.15rem !important;
  font-size: 0.825rem !important;
  font-weight: 500 !important;
  padding-left: 0.85rem !important;
  padding-right: 0.85rem !important;
  border: 1px solid var(--google-border) !important;
  box-shadow: none !important;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
}

.button:hover {
  border-color: var(--google-border) !important;
  background-color: #f8f9fa !important;
}

/* Botões com Variante de Cor Estilo Google flat-modern */
.button.is-primary, .button.is-link {
  background-color: var(--google-blue) !important;
  border-color: transparent !important;
  color: #ffffff !important;
}
.button.is-primary:hover, .button.is-link:hover {
  background-color: var(--google-blue-hover) !important;
}
.button.is-primary:active, .button.is-link:active {
  background-color: #124996 !important;
}

.button.is-success {
  background-color: var(--google-green) !important;
  border-color: transparent !important;
  color: #ffffff !important;
}
.button.is-success:hover {
  background-color: var(--google-green-hover) !important;
}

.button.is-danger {
  background-color: var(--google-red) !important;
  border-color: transparent !important;
  color: #ffffff !important;
}
.button.is-danger:hover {
  background-color: var(--google-red-hover) !important;
}

.button.is-warning {
  background-color: var(--google-yellow) !important;
  border-color: transparent !important;
  color: var(--google-text-primary) !important;
}
.button.is-warning:hover {
  background-color: var(--google-yellow-hover) !important;
}

.button.is-light {
  background-color: #f1f3f4 !important;
  border-color: transparent !important;
  color: var(--google-text-primary) !important;
}
.button.is-light:hover {
  background-color: var(--google-border-light) !important;
}

/* Botões pequenos para tabelas */
.button.is-small {
  height: 1.7rem !important;
  font-size: 0.725rem !important;
  border-radius: 4px !important;
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}

/* 5. GRELHA GOOGLE DA ALTA DENSIDADE (CSS Grid Utilities) */
.stip-google-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: 0.65rem !important;
}

.stip-google-grid-2 {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0.65rem !important;
}

.stip-google-grid-3 {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0.65rem !important;
}

@media screen and (min-width: 769px) {
  .stip-google-grid-2 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .stip-google-grid-3 {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* 6. POLIMENTO MODERNO, BADGES E COMPONENTES */
/* Progression indicators */
.progress {
  height: 5px !important;
  background-color: var(--google-border-light) !important;
  margin-bottom: 0.35rem !important;
}

/* Redefinição dos Tags / Badges Google Flat */
.tag:not(.is-rounded) {
  border-radius: 4px !important;
  font-weight: 500 !important;
  font-size: 0.725rem !important;
  height: 1.35rem !important;
}

.tag.is-success {
  background-color: var(--google-green-light) !important;
  color: var(--google-green) !important;
  border: 1px solid rgba(30, 142, 62, 0.15) !important;
}

.tag.is-danger {
  background-color: var(--google-red-light) !important;
  color: var(--google-red) !important;
  border: 1px solid rgba(217, 48, 37, 0.15) !important;
}

.tag.is-warning {
  background-color: var(--google-yellow-light) !important;
  color: #b06000 !important;
  border: 1px solid rgba(249, 171, 0, 0.2) !important;
}

.tag.is-link, .tag.is-info {
  background-color: var(--google-blue-light) !important;
  color: var(--google-blue) !important;
  border: 1px solid rgba(26, 115, 232, 0.15) !important;
}

/* Abas de Navegação (Tabs) */
.tabs {
  margin-bottom: 0.75rem !important;
}
.tabs ul {
  border-bottom-color: var(--google-border-light) !important;
}
.tabs.is-boxed li.is-active a {
  background-color: var(--google-surface) !important;
  border-color: var(--google-border-light) var(--google-border-light) transparent !important;
  color: var(--google-blue) !important;
  font-weight: 500 !important;
}
.tabs.is-boxed a {
  border-radius: 8px 8px 0 0 !important;
  font-size: 0.85rem !important;
  padding: 0.45rem 0.85rem !important;
  color: var(--google-text-secondary) !important;
}
.tabs.is-boxed a:hover {
  background-color: var(--google-border-light) !important;
  color: var(--google-text-primary) !important;
}

/* Notificações / Alertas */
.notification {
  padding: 0.85rem 1.25rem 0.85rem 1rem !important;
  font-size: 0.85rem !important;
  line-height: 1.4 !important;
  margin-bottom: 0.5rem !important;
}
.notification.is-link, .notification.is-info {
  background-color: var(--google-blue-light) !important;
  color: var(--google-blue-hover) !important;
  border: 1px solid rgba(26, 115, 232, 0.15) !important;
}
.notification.is-link .title, .notification.is-info .title {
  color: var(--google-blue) !important;
}

.notification.is-success {
  background-color: var(--google-green-light) !important;
  color: var(--google-green-hover) !important;
  border: 1px solid rgba(30, 142, 62, 0.15) !important;
}
.notification.is-danger {
  background-color: var(--google-red-light) !important;
  color: var(--google-red-hover) !important;
  border: 1px solid rgba(217, 48, 37, 0.15) !important;
}

/* Modals */
.modal-card-head {
  border-bottom: 1px solid var(--google-border-light) !important;
  background-color: var(--google-surface) !important;
  padding: 1rem !important;
}
.modal-card-foot {
  border-top: 1px solid var(--google-border-light) !important;
  background-color: var(--google-bg) !important;
  padding: 0.85rem 1rem !important;
}
.modal-card-title {
  font-size: 1.15rem !important;
  font-weight: 600 !important;
}

/* Elementos de Cabeçalho Fixos / Layout sTIP do Usuário */
.card-header {
  border-bottom: 1px solid var(--google-border-light) !important;
  box-shadow: none !important;
}
.card-header-title {
  padding: 0.65rem 1rem !important;
  font-weight: 500 !important;
  font-size: 0.9rem !important;
}

/* Utilitários Extras para os Painéis sTIP com Gradientes Suaves */
.box.is-gradient-success {
  background: var(--stip-success-gradient) !important;
  color: #ffffff !important;
  border: none !important;
}
.box.is-gradient-success .title, 
.box.is-gradient-success .heading {
  color: #ffffff !important;
}

.box.is-gradient-danger {
  background: var(--stip-danger-gradient) !important;
  color: #ffffff !important;
  border: none !important;
}
.box.is-gradient-danger .title, 
.box.is-gradient-danger .heading {
  color: #ffffff !important;
}

.stip-badge-verified {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-weight: 600;
  color: var(--google-green);
}

/* 7. SOBRESCRIÇÕES DE UTILITÁRIOS DE COR E COMPONENTES GERAIS (OPÇÃO B - PURE CSS REDESIGN) */
.has-background-info-light {
  background-color: var(--google-blue-light) !important;
  color: var(--google-blue-hover) !important;
}

/* Ajuste de contraste para títulos e ícones de seção (muda a cor para azul escuro) */
.card-header.has-background-info-light .card-header-title,
.card-header.has-background-info-light .card-header-title.has-text-info,
.card-header.has-background-info-light .card-header-title .icon,
.card-header.has-background-info-light .card-header-title i {
  color: #0d47a1 !important; /* Azul escuro para melhorar contraste e legibilidade */
}

/* Evita sobreposição de título pequeno (is-6) com subtítulo grande (is-4) na taxa de presença do aluno */
.title.is-6 + .subtitle.is-4 {
  margin-top: 0.25rem !important;
}

.has-background-light {
  background-color: var(--google-bg) !important;
}

.has-background-white-ter {
  background-color: var(--google-border-light) !important;
}

/* Scrollbars modernos de largura reduzida para alta densidade sem poluição */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--google-bg);
}
::-webkit-scrollbar-thumb {
  background: var(--google-border);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--google-text-secondary);
}

/* Zebra striping ultra-suave e sutil para melhorar contraste de linhas nas tabelas sTIP */
.table.is-striped tbody tr:nth-child(even) {
  background-color: #fbfcff !important;
}

/* Garante que os títulos de colunas de tabela herdem estilo Google Modern-flat sem quebras */
.table thead th {
  background-color: var(--google-blue-light) !important;
  color: var(--google-blue) !important;
}

/* ==========================================================================
   Bulma Masked Date Picker Overlay
   ========================================================================== */
.custom-date-anchor {
  position: relative;
  display: inline-block;
  width: 100%;
}

.custom-date-anchor .js-visual-mask {
  position: relative;
  z-index: 2;
  background: #ffffff !important;
}

.custom-date-anchor .input[type="date"] {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0 !important;
  z-index: 1;
  pointer-events: none;
}

.custom-date-anchor .icon.is-right-trigger {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  cursor: pointer;
  pointer-events: auto;
  color: #4a4a4a;
}

.custom-date-anchor .icon.is-right-trigger:hover {
  color: #000000;
}