/* Custom styles for the application */

/* Força o espaçamento correto no topo do conteúdo, evitando que ele fique atrás do header */
.page-wrapper {
  padding-top: 90px !important;
  padding-bottom: 80px !important; /* Altura de respiro para o rodapé */
  padding-left: 20px !important;
  padding-right: 20px !important;
}

/* Garante que o header tenha fundo sólido e não fique transparente */
.main-topbar-wrapper {
  background-color: var(--color-white, #ffffff) !important;
  z-index: 1004 !important;
}

.sidebar-wrapper {
  padding: 0px !important;
  margin-top: 15px !important;
}

.navbar-menu {
  padding: 10px !important;
}

.main-layout {
  background-image: url('/assets/images/bg.jpg');
  background-repeat: repeat;
  background-position: right top;
  background-size: 100% auto;
}

.main-footer {
  margin-top: 50px !important;
}

/* Remove o capitalize */
.mud-button-label {
  text-transform: none !important;
}

/* Ajustes de margem responsiva do page-wrapper para respeitar o menu lateral fixo */
@media (min-width: 1024px) {

  /* Layout LTR (Padrão) */
  html[dir="ltr"] .page-wrapper {
    margin-left: var(--spacing-sidebar, 15rem) !important;
    margin-right: 0 !important;
    transition: margin-left 0.2s ease-in-out;
  }

  html[dir="ltr"][data-sidebar="medium"] .page-wrapper {
    margin-left: var(--spacing-sidebar-medium, 10rem) !important;
  }

  html[dir="ltr"][data-sidebar="small"] .page-wrapper {
    margin-left: var(--spacing-sidebar-small, 4.6875rem) !important;
  }

  /* Layout RTL */
  html[dir="rtl"] .page-wrapper {
    margin-right: var(--spacing-sidebar, 15rem) !important;
    margin-left: 0 !important;
    transition: margin-right 0.2s ease-in-out;
  }

  html[dir="rtl"][data-sidebar="medium"] .page-wrapper {
    margin-right: var(--spacing-sidebar-medium, 10rem) !important;
  }

  html[dir="rtl"][data-sidebar="small"] .page-wrapper {
    margin-right: var(--spacing-sidebar-small, 4.6875rem) !important;
  }

  /* Layout Semibox */
  html[data-layout="semibox"][dir="ltr"] .page-wrapper {
    margin-left: calc(var(--spacing-sidebar, 15rem) + 0.75rem) !important;
  }

  html[data-layout="semibox"][dir="ltr"][data-sidebar="medium"] .page-wrapper {
    margin-left: calc(var(--spacing-sidebar-medium, 10rem) + 0.75rem) !important;
  }

  html[data-layout="semibox"][dir="ltr"][data-sidebar="small"] .page-wrapper {
    margin-left: calc(var(--spacing-sidebar-small, 4.6875rem) + 0.75rem) !important;
  }

  /* Layout Horizontal */
  html[data-layout="horizontal"] .page-wrapper {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ==========================================================================
   MUDBLAZOR COMPATIBILITY OVERRIDES
   ========================================================================== */

/* 1. Inputs (Login / Forms do Template) */
input.form-input,
select.form-select {
  border: 1px solid var(--color-gray-200, #e5e7eb) !important;
  background-color: var(--color-white, #ffffff) !important;
  border-radius: 0.375rem !important;
  padding: 0.5625rem 1rem !important;
  height: 2.5rem !important;
  width: 100% !important;
  color: inherit !important;
  outline: none !important;
}

html[data-mode="dark"] input.form-input,
html[data-mode="dark"] select.form-select {
  background-color: var(--color-dark-900, #0f172a) !important;
  border-color: var(--color-dark-800, #1e293b) !important;
}

/* 2. Botões Gerais do Template */
button.btn,
a.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 0.375rem !important;
  font-weight: 500 !important;
  padding: 0.5rem 1rem !important;
  text-align: center !important;
  border: 1px solid transparent !important;
  transition: all 0.2s !important;
  text-decoration: none !important;
  height: auto !important;
  cursor: pointer !important;
}

button.btn-primary,
a.btn-primary {
  background-color: var(--color-primary-500, #3b82f6) !important;
  color: #ffffff !important;
  border-color: var(--color-primary-500, #3b82f6) !important;
}

  button.btn-primary:hover,
  a.btn-primary:hover {
    background-color: var(--color-primary-600, #2563eb) !important;
    border-color: var(--color-primary-600, #2563eb) !important;
  }

button.btn-sub-gray,
a.btn-sub-gray {
  background-color: var(--color-gray-100, #f3f4f6) !important;
  color: var(--color-gray-800, #1f2937) !important;
  border-color: transparent !important;
}

html[data-mode="dark"] button.btn-sub-gray,
html[data-mode="dark"] a.btn-sub-gray {
  background-color: var(--color-dark-850, #1e293b) !important;
  color: var(--color-dark-50, #f8fafc) !important;
}

/* 3. Sidebar Menu (Links e Submenus) */
.main-sidebar a,
.main-sidebar button {
  text-decoration: none !important;
  box-shadow: none !important;
}

.main-sidebar .nav-link {
  color: var(--color-sidebar-text, #6b7280) !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  padding: 0.625rem 1rem !important;
  /* py-2.5 px-4 */
  text-align: left !important;
  justify-content: flex-start !important;
}

  .main-sidebar .nav-link:hover {
    color: var(--color-sidebar-text-hover, #3b82f6) !important;
  }

  .main-sidebar .nav-link.active {
    color: var(--color-sidebar-text-active, #3b82f6) !important;
    background-color: rgba(59, 130, 246, 0.1) !important;
  }

/* Ajustes para quando o menu estiver minimizado (small) */
html[data-sidebar="small"] .main-sidebar .nav-link {
  padding: 0.75rem 0 !important;
  /* py-3 */
  justify-content: center !important;
}

/* Ajustes para quando o menu estiver médio */
html[data-sidebar="medium"] .main-sidebar .nav-link {
  padding: 0.75rem 0.5rem !important;
  flex-direction: column !important;
  justify-content: center !important;
  text-align: center !important;
}

.main-sidebar .dropdown-menu li a,
.main-sidebar .dropdown-menu li button {
  color: var(--color-sidebar-text, #6b7280) !important;
  text-decoration: none !important;
  background: transparent !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  padding: 0.375rem 1rem !important;
  /* py-1.5 px-4 */
  width: 100% !important;
  justify-content: flex-start !important;
  text-align: left !important;
}

  .main-sidebar .dropdown-menu li a:hover,
  .main-sidebar .dropdown-menu li button:hover {
    color: var(--color-sidebar-text-hover, #3b82f6) !important;
  }

  .main-sidebar .dropdown-menu li a.active,
  .main-sidebar .dropdown-menu li button.active {
    color: var(--color-sidebar-text-active, #3b82f6) !important;
  }

/* 4. Topbar & Cabeçalho */
.main-topbar button,
.main-topbar a {
  text-decoration: none !important;
  box-shadow: none !important;
}

.main-topbar .topbar-link,
.main-topbar .sidebar-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */
#print-zone {
  display: none;
}

@media print {

  /* Força fundo da página branco na impressão */
  html,
  body {
    background-color: #ffffff !important;
    background: #ffffff !important;
  }

    /* Oculta tudo na tela */
    body * {
      visibility: hidden !important;
    }

  /* Torna apenas a área de impressão visível */
  #print-zone,
  #print-zone * {
    visibility: visible !important;
  }

  #print-zone {
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: white !important;
    color: black !important;
  }

  /* Estilização da tabela de impressão */
  .print-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
  }

    .print-table th {
      background-color: #cccccc !important;
      /* Cor de fundo escura */
      font-size: 12pt;
      font-weight: bold !important;
      border-bottom: 2px solid #000000 !important;
      /* Borda preta embaixo */
    }

    .print-table th,
    .print-table td {
      border: 1px solid #cccccc !important;
      padding: 8px !important;
      text-align: left !important;
    }

    /* Linhas listradas (Striped) no relatório de impressão */
    .print-table tbody tr:nth-of-type(even) {
      background-color: #eeeeee !important;
    }
}

/* Destaque para o botão ativo no grupo de filtros */
.mud-button-root.active-filter {
  background-color: var(--mud-palette-primary) !important;
  color: #ffffff !important;
}

/* ==========================================================================
   TOPBAR / CABEÇALHO LAYOUT COMPATIBILITY
   ========================================================================== */

/* 1. Correções para o campo de busca (pesquisa) do cabeçalho */
.main-topbar input[type="search"].form-input {
  width: 18rem !important;
  /* w-72 */
  padding-left: 2rem !important;
  /* ltr:pl-8 */
  padding-right: 2rem !important;
  /* rtl:pr-8 */
  border: none !important;
  /* Remove a borda forçada */
  background-color: transparent !important;
  /* Remove fundo branco */
  box-shadow: none !important;
}

/* 2. Distribuição de layout (Garante pesquisa à esquerda e botões à direita) */
html[dir="ltr"] .main-topbar .ltr\:ml-auto {
  margin-left: auto !important;
}

html[dir="rtl"] .main-topbar .rtl\:mr-auto {
  margin-right: auto !important;
}

/* 3. Restaura flexbox para botões e links no cabeçalho contra resets do MudBlazor */
.main-topbar button {
  align-items: center !important;
  justify-content: center !important;
}

  .main-topbar button.flex,
  .main-topbar button.topbar-link {
    display: flex !important;
  }

@media (min-width: 640px) {
  .main-topbar button.sm\:flex {
    display: flex !important;
  }
}

@media (min-width: 768px) {
  .main-topbar button.md\:flex {
    display: flex !important;
  }
}

/* ==========================================================================
   MUDBLAZOR TABLE / DATAGRID CUSTOM STYLING
   ========================================================================== */

/* Cor customizada das linhas listradas (Striped) */
.mud-table-striped .mud-table-body .mud-table-row:nth-of-type(odd) {
  background-color: #f4f8fd !important;
}

/* Cor customizada ao passar o mouse sobre a linha (Hover) */
.mud-table-hover .mud-table-body .mud-table-row:hover {
  background-color: #d9e8fc !important;
}

/* Espaçamento extra no rodapé em dispositivos móveis */
@media (max-width: 768px) {
  .main-footer {
    position: relative !important;
    margin-top: 2rem !important;
    margin-bottom: 1.5rem !important;
    background: transparent !important;
  }
}

/* Efeito de zoom, cor e glow nos cards de clientes ao passar o mouse */
.cliente-card {
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease-in-out, background-color 0.25s ease-in-out !important;
}

  .cliente-card:hover {
    transform: scale(1.03) !important; /* Zoom suave de 3% */
    background-color: rgba(59, 130, 246, 0.04) !important; /* Cor de fundo levemente azulada/clara */
    box-shadow: 0 6px 12px rgba(59, 130, 246, 0.08), 0 0 8px rgba(59, 130, 246, 0.12) !important; /* Glow azul mais sutil */
  }

/* Alinha os modais/diálogos a aproximadamente 20% a 30% do topo da janela */
.mud-dialog-container {
  align-items: flex-start !important;
}

.mud-dialog {
  margin-top: 5vh !important;
}

/* Estilização quadrada para botões de ação do topo */
.top-action-button {
  border-radius: 8px !important;
  color: #ffffff !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* Cor de fundo para o cabeçalho do título */
.page-header-bg {
  background-color: #eff6ff !important;
  padding: 5px !important;
  border-radius: 12px;
}

/* Compatibilidade com o modo escuro */
.mud-theme-dark .page-header-bg,
.dark-theme .page-header-bg,
.dark .page-header-bg {
  background-color: #1e293b !important; /* Slate 800 (cinza escuro premium) */
}

/* ==========================================================================
   SHARED CADASTROS & PREMIUM UI DESIGN SYSTEM
   ========================================================================== */

/* Container com background de curva abstrata */
.page-bg-container {
  background-image: url('../images/bg.jpg');
  background-repeat: no-repeat;
  background-position: right top;
}

/* Filtros em formato de Pills */
.filter-pill {
  display: inline-flex;
  align-items: center;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 6px 14px;
  font-weight: 500;
  color: #4b5563;
  font-size: 0.85rem;
  transition: all 0.2s;
  cursor: pointer;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

  .filter-pill:hover {
    background-color: #f9fafb;
    border-color: #d1d5db;
  }

  .filter-pill.active {
    border-color: #3b82f6;
    background-color: #eff6ff;
    color: #1d4ed8;
    box-shadow: 0 0 0 1px #3b82f6;
  }

  .filter-pill.active-green {
    border-color: #10b981;
    background-color: #ecfdf5;
    color: #047857;
    box-shadow: 0 0 0 1px #10b981;
  }

  .filter-pill.active-red {
    border-color: #ef4444;
    background-color: #fef2f2;
    color: #b91c1c;
    box-shadow: 0 0 0 1px #ef4444;
  }

/* Badges de contadores dentro das pills */
.count-badge {
  background-color: #f3f4f6;
  color: #4b5563;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 9999px;
  padding: 1px 8px;
  margin-left: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.filter-pill.active .count-badge {
  background-color: #dbeafe;
  color: #1e40af;
}

.filter-pill.active-green .count-badge {
  background-color: #d1fae5;
  color: #065f46;
}

.filter-pill.active-red .count-badge {
  background-color: #fee2e2;
  color: #991b1b;
}

/* Wrappers coloridos para ícones dos KPIs */
.kpi-icon-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
}

  .kpi-icon-wrapper.blue-wrapper {
    background-color: #eff6ff;
  }

  .kpi-icon-wrapper.orange-wrapper {
    background-color: #fff7ed;
  }

  .kpi-icon-wrapper.green-wrapper {
    background-color: #ecfdf5;
  }

  .kpi-icon-wrapper.red-wrapper {
    background-color: #fef2f2;
  }

/* Seletor de layout (Cards / Lista) */
.toggle-layout-container {
  display: inline-flex;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background-color: #ffffff;
  padding: 2px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.toggle-layout-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  font-size: 0.85rem;
  font-weight: 500;
  border-radius: 6px;
  color: #4b5563;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  background: transparent;
}

  .toggle-layout-btn.active {
    background-color: #eff6ff;
    color: #2563eb;
    font-weight: 600;
  }

/* Cards premium da listagem em grid */
.custom-card-grid {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  border: 1px solid #e5e7eb;
  border-left: 4px solid #e5e7eb !important;
  background-color: #f8f8f8;
  border-radius: 12px !important;
  box-shadow: 0 1px 3px 0 rgba(0,0,0,0.05) !important;
  transition: transform 0.25s, box-shadow 0.25s, border-left-color 0.25s;
}

  .custom-card-grid .mud-card-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .custom-card-grid:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px 0 rgba(0,0,0,0.07) !important;
    border-left-color: #ea580c !important; /* Borda laranja no hover */
  }

/* Badges de Status Geral */
.active-status {
  background-color: #ecfdf5 !important;
  color: #047857 !important;
}

.inactive-status {
  background-color: #fef2f2 !important;
  color: #b91c1c !important;
}

/* Customização para caixa de pesquisa com cantos transparentes e input branco */
.search-textfield {
  background-color: transparent !important;
}

  .search-textfield .mud-input-outlined {
    background-color: #ffffff !important;
    border-radius: 8px !important;
  }

/* Customização de guias (abas) ativas para projetosadm */
.projetosadm-tabs .mud-tabs-tab.mud-tab-active {
  background-color: var(--mud-palette-primary) !important;
  color: #ffffff !important;
  border-radius: 6px 6px 0 0;
}

.projetosadm-tabs .mud-tabs-tab.mud-tab-active .mud-tab-icon-projected {
  color: #ffffff !important;
}

/* Accordion behavior for dropdown-menu in vertical sidebar (except when minimised) */
html:not([data-sidebar="small"]) .main-sidebar .dropdown-menu {
  position: relative !important;
  left: 0 !important;
  top: 0 !important;
  box-shadow: none !important;
  border: none !important;
  padding-left: 1.5rem !important; /* Indent submenus */
  background: transparent !important;
  width: auto !important;
}

/* Bold active link in sidebar */
.main-sidebar .nav-link.active,
.main-sidebar .dropdown-menu li a.active,
.main-sidebar .dropdown-menu li button.active {
  font-weight: bold !important;
}

/* Forçar fundos sólidos e legíveis nos snackbars */
.mud-snackbar {
  background-color: #1e293b !important; /* Dark slate slate-800 */
  color: #ffffff !important;
  opacity: 1.0 !important;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05) !important;
}
.mud-snackbar.mud-alert-filled-success {
  background-color: #10b981 !important; /* Green emerald-500 */
  color: #ffffff !important;
}
.mud-snackbar.mud-alert-filled-error {
  background-color: #ef4444 !important; /* Red red-500 */
  color: #ffffff !important;
}
.mud-snackbar.mud-alert-filled-info {
  background-color: #3b82f6 !important; /* Blue blue-500 */
  color: #ffffff !important;
}
.mud-snackbar.mud-alert-filled-warning {
  background-color: #f59e0b !important; /* Amber amber-500 */
  color: #ffffff !important;
}