:root {
  /* Paleta ultra-minimalista */
  --bg: #fafafa;            /* Fundo ligeiramente off-white para conforto */
  --card: #ffffff;
  --text: #1e293b;          /* Cinza chumbo suave (menos agressivo que preto puro) */
  --muted: #94a3b8;         /* Cinza claro para textos secundários */
  
  /* Bordas: A chave para "linhas finas" é a cor suave */
  --border: #f1f5f9;        
  --border-hover: #e2e8f0;

  /* Cores da marca refinadas */
  --brand: #2563eb;
  --brand-weak: #eff6ff;
  
  --radius: 8px;            /* Raio um pouco menor para ficar mais "sério" e limpo */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Reset & Base */
* { box-sizing: border-box; }
html, body { 
  margin: 0; 
  height: 100%; 
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; 
  background: var(--bg); 
  color: var(--text);
  -webkit-font-smoothing: antialiased; /* Texto mais fino e nítido */
}

/* Navbar: Removemos a borda pesada, usamos backdrop leve */
.gd-navbar {
  position: sticky; top: 0; z-index: 20;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 10px; padding: 12px 20px;
  background: rgba(255, 255, 255, 0.85); /* Semitransparente */
  backdrop-filter: blur(8px);            /* Efeito vidro */
  border-bottom: 1px solid var(--border);
}
.gd-left { display: flex; align-items: center; gap: 12px; }
.gd-title { font-size: 14px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; margin: 0; }
.gd-center { display: flex; justify-content: center; }
.gd-logo { height: 20px; object-fit: contain; opacity: 0.9; }
.gd-right { display: flex; justify-content: flex-end; align-items: center; }
.gd-user { font-size: 12px; color: var(--muted); font-weight: 500; }

/* Botões de Ícone: Bordas quase invisíveis */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 6px; 
  border: 1px solid transparent; /* Sem borda por padrão */
  background: transparent; color: var(--muted); 
  cursor: pointer; transition: all 0.2s ease;
}
.icon-btn:hover { 
  background: #fff; 
  color: var(--text); 
  border-color: var(--border-hover);
  box-shadow: var(--shadow-sm);
}

/* Layout Principal */
.gd-main { max-width: 1200px; margin: 24px auto; padding: 0 20px; }

/* Breadcrumbs: Limpo, sem linhas abaixo */
.gd-breadcrumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; 
  margin-bottom: 20px; padding-bottom: 0;
  font-size: 13px; color: var(--muted);
}
.gd-breadcrumbs a { 
  color: var(--text); text-decoration: none; font-weight: 500; transition: opacity 0.2s;
}
.gd-breadcrumbs a:hover { opacity: 0.7; }
.gd-breadcrumbs .bc-sep { font-size: 10px; opacity: 0.4; margin: 0 2px; }
.gd-breadcrumbs .bc-current { color: var(--muted); font-weight: 400; }
.gd-breadcrumbs .bc-home i { width: 14px; height: 14px; opacity: 0.6; transform: translateY(-1px); }

/* Toolbar */
.gd-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px;
}
.gd-actions-left, .gd-actions-right, .gd-new-actions { display: flex; align-items: center; gap: 8px; }

/* Toggle View: Design unificado */
.view-toggle {
  display: inline-flex; padding: 2px; gap: 2px;
  border: 1px solid var(--border); border-radius: 8px; background: #fff;
}
.view-toggle button {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 28px;
  border: none; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer;
  transition: all 0.2s;
}
.view-toggle button i { width: 14px; height: 14px; }
.view-toggle button.active { background: var(--bg); color: var(--text); font-weight: 600; box-shadow: var(--shadow-sm); }

/* Botões Principais: Design Flat e Linhas Finas */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 8px; cursor: pointer; 
  font-size: 13px; font-weight: 500; letter-spacing: -0.01em;
  transition: all 0.2s ease;
}
.btn i { width: 16px; height: 16px; stroke-width: 2px; }

/* Primário (Azul) */
.btn.btn-blue {
  background: var(--brand); color: #fff; border: 1px solid var(--brand);
}
.btn.btn-blue:hover { opacity: 0.9; box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25); }

/* Secundário (Outline) */
.btn.btn-outline-blue {
  background: #fff; color: var(--text);
  border: 1px solid var(--border-hover); /* Borda cinza suave em vez de azul */
}
.btn.btn-outline-blue:hover {
  border-color: var(--brand); color: var(--brand); background: #fff;
}

/* GRID & LISTA */
.gd-list { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px; }
.gd-list.is-empty { display: flex !important; height: 60vh; justify-content: center; align-items: center; flex-direction: column; }

/* Responsividade */
@media (max-width: 1024px) { .gd-list { grid-template-columns: repeat(8, 1fr); } }
@media (max-width: 640px) { .gd-list { grid-template-columns: repeat(4, 1fr); } }

/* Cards e Rows: A mágica do minimalismo */
.card, .row {
  background: #fff;
  border: 1px solid transparent; /* Truque: Borda transparente para layout */
  box-shadow: 0 0 0 1px var(--border); /* Simula borda de 1px ultra fina */
  border-radius: var(--radius);
  cursor: pointer; user-select: none;
  transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Hover refinado: Sobe levemente e ganha sombra, sem mudar cor de borda agressivamente */
.card:hover, .row:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px var(--border-hover), var(--shadow-hover);
  background: #fff;
}

/* Card Específico */
.card {
  grid-column: span 3; padding: 16px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  position: relative;
}
/* Layout interno do card para ficar mais clean */
.card .icon { width: 20px; height: 20px; color: var(--text); opacity: 0.6; margin-bottom: 4px; }
.card[data-type="dir"] .icon { color: var(--brand); opacity: 1; fill: var(--brand-weak); } /* Pastas com leve preenchimento */

.card .name { font-size: 13px; font-weight: 500; color: var(--text); line-height: 1.4; }
.card .meta { font-size: 11px; color: var(--muted); margin-top: auto; }

/* Row Específico */
.row {
  grid-column: 1 / -1; padding: 10px 16px;
  display: grid; grid-template-columns: 32px 1fr 150px 100px; gap: 12px; align-items: center;
}
.row .icon { width: 18px; height: 18px; color: var(--muted); }
.row[data-type="dir"] .icon { color: var(--brand); fill: var(--brand-weak); }
.row .name { font-size: 13px; font-weight: 500; }
.row .meta { font-size: 12px; }

/* Botão "..." (Mais ações) */
.dot-btn, .item-actions button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 4px;
  border: none; background: transparent; color: var(--muted);
  opacity: 0; transition: opacity 0.2s, background 0.2s;
}
/* Só aparece quando passa o mouse no card/row para limpar visual */
.card:hover .dot-btn, .row:hover .item-actions button { opacity: 1; }
.dot-btn:hover, .item-actions button:hover { background: var(--bg); color: var(--text); }

/* Posicionamento do botão no card */
.card .dot-btn { position: absolute; top: 12px; right: 12px; }

/* Row Meta Info */
.right { text-align: right; }
.right-overline { display: none; } /* Removido para minimalismo */
.date-label { display: none; }     /* Removido para minimalismo */
.date-value { font-size: 12px; color: var(--muted); font-family: monospace; }

/* Toggles de visualização */
.gd-list.list-mode .card { display: none; }
.gd-list:not(.list-mode) .row { display: none; }

/* Empty State */
.gd-empty-icon { color: var(--border-hover); width: 48px; height: 48px; margin-bottom: 12px; stroke-width: 1px; }
.gd-empty-text { font-size: 14px; color: var(--muted); font-weight: 400; }

/* Utilities */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* Popover Refinado */
.gd-popover {
  border: 1px solid var(--border); box-shadow: var(--shadow-hover);
  border-radius: 8px; padding: 4px; background: #fff;
}
.gd-popover button {
  border-radius: 4px; font-size: 13px; color: var(--text); padding: 8px 12px;
}
.gd-popover button:hover { background: var(--bg); }
.gd-popover button i { width: 14px; height: 14px; color: var(--muted); }

/* Toast */
.gd-toast {
  background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow-hover);
  font-size: 13px; font-weight: 500; padding: 12px 16px; border-radius: 8px;
}
/* Popover Refinado - CORRIGIDO */
.gd-popover {
  position: fixed; /* Alterado de absolute para fixed */
  z-index: 1000;
  border: 1px solid var(--border); 
  box-shadow: var(--shadow-hover);
  border-radius: 8px; 
  padding: 4px; 
  background: #fff;
  min-width: 160px;
  display: flex;
  flex-direction: column;
}

.gd-popover button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: none;
  background: none;
  border-radius: 6px; 
  font-size: 13px; 
  color: var(--text); 
  padding: 8px 12px;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s;
}

.gd-popover button:hover { 
  background: var(--bg); 
}

.gd-popover button i { 
  width: 14px; 
  height: 14px; 
  color: var(--muted); 
}
/* Garante que o popover fique acima de tudo */
.gd-popover {
  z-index: 9999 !important; /* Valor alto para ficar acima de tudo */
}
/* Garante que o popover funcione corretamente */
.gd-popover {
  position: fixed !important;
  z-index: 9999 !important;
  border: 1px solid var(--border);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  padding: 6px;
  background: #fff;
  min-width: 150px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.gd-popover button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: none;
  background: none;
  border-radius: 6px;
  font-size: 13px;
  color: var(--text);
  padding: 8px 12px;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s;
  white-space: nowrap;
}

.gd-popover button:hover {
  background: var(--bg);
}

.gd-popover button i {
  width: 14px;
  height: 14px;
  color: var(--muted);
}

/* Garante que outros elementos não cubram o popover */
.card, .row {
  position: relative;
  z-index: 1;
}
/* ============================================
   POPOVER CORRIGIDO - Versão Final
   ============================================ */

/* Remova todas as outras definições de .gd-popover e substitua por estas: */

.gd-popover {
  /* POSICIONAMENTO CORRETO */
  position: fixed !important;
  top: 0;
  left: 0;
  
  /* VISIBILIDADE */
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  
  /* ESTILOS VISUAIS */
  border: 1px solid var(--border);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  background: #fff;
  
  /* DIMENSÕES */
  min-width: 150px;
  max-width: 200px;
  
  /* LAYOUT */
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  
  /* Z-INDEX (acima de tudo) */
  z-index: 99999 !important;
  
  /* TRANSFORMAÇÕES */
  transform: none !important;
  
  /* ANIMAÇÃO */
  animation: popoverFadeIn 0.15s ease-out;
}

/* Animação de entrada */
@keyframes popoverFadeIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Estado escondido */
.gd-popover[hidden] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Botões dentro do popover */
.gd-popover button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: none;
  background: none;
  border-radius: 6px;
  font-size: 13px;
  color: var(--text);
  padding: 8px 12px;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s;
  white-space: nowrap;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
}

.gd-popover button:hover {
  background: var(--bg);
  color: var(--text);
}

.gd-popover button:active {
  background: var(--border-hover);
  transform: translateY(1px);
}

.gd-popover button i {
  width: 14px;
  height: 14px;
  color: var(--muted);
  flex-shrink: 0;
}

/* Ajustes para botões específicos */
.gd-popover button[data-action="rename"]:hover i {
  color: var(--brand);
}

.gd-popover button[data-action="delete"]:hover i {
  color: #dc2626;
}

.gd-popover button[data-action="delete"]:hover {
  color: #dc2626;
}

/* ============================================
   AJUSTES PARA GARANTIR QUE POPOVER FUNCIONE
   ============================================ */

/* Garante que outros elementos não cubram o popover */
.gd-navbar {
  z-index: 100 !important;
}

.gdz-modal {
  z-index: 100000 !important; /* Modais acima do popover */
}

.gdz-loader {
  z-index: 100001 !important; /* Loader acima de tudo */
}

/* Garante que cards e rows tenham z-index menor */
.card, .row {
  position: relative;
  z-index: 1;
}

/* Ajusta o botão de menu para garantir que o clique funcione */
.dot-btn, .item-actions button {
  position: relative;
  z-index: 2 !important;
  pointer-events: auto !important;
}

/* Remove qualquer overflow que possa cortar o popover */
.gd-main,
.gd-list,
body,
html {
  overflow: visible !important;
}

/* Garante que o popover não seja afetado por transformações dos pais */
.card, .row, .gd-list, .gd-main {
  transform: none !important;
}

/* ============================================
   TOAST (ajuste para não conflitar)
   ============================================ */

.gd-toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-hover);
  font-size: 13px;
  font-weight: 500;
  padding: 12px 16px;
  border-radius: 8px;
  z-index: 99998 !important; /* Abaixo do popover */
  max-width: 300px;
  word-wrap: break-word;
}

.gd-toast.show {
  animation: toastSlideIn 0.3s ease-out;
}

@keyframes toastSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ============================================
   BREADCRUMBS - TAMANHO AUMENTADO PARA MELHOR VISIBILIDADE
   ============================================ */

.gd-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px; /* Aumentado de 6px */
  margin-bottom: 24px; /* Aumentado de 20px */
  padding-bottom: 0;
  font-size: 15px; /* Aumentado de 13px */
  color: var(--text); /* Alterado de var(--muted) para mais visibilidade */
  font-weight: 500;
  min-height: 32px; /* Altura mínima para melhor toque */
}

/* Links do breadcrumb */
.gd-breadcrumbs a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
  text-decoration: none;
  font-weight: 600; /* Mais negrito */
  padding: 6px 10px; /* Adicionado padding para área de clique maior */
  border-radius: 6px;
  transition: all 0.2s ease;
  background: transparent;
}

.gd-breadcrumbs a:hover {
  background: var(--bg);
  color: var(--brand); /* Muda para cor da marca no hover */
  transform: translateY(-1px);
}

.gd-breadcrumbs a:active {
  transform: translateY(0);
}

/* Separador entre breadcrumbs */
.gd-breadcrumbs .bc-sep {
  font-size: 14px; /* Aumentado de 10px */
  color: var(--muted);
  margin: 0 4px; /* Aumentado de 2px */
  opacity: 0.6;
  font-weight: 400;
}

/* Breadcrumb atual (não clicável) */
.gd-breadcrumbs .bc-current {
  color: var(--text);
  font-weight: 700; /* Mais negrito que os links */
  padding: 6px 12px;
  background: var(--bg);
  border-radius: 6px;
  border: 1px solid var(--border);
}

/* Ícone da home */
.gd-breadcrumbs .bc-home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; /* Aumentado de tamanho automático */
  height: 34px;
  border-radius: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  transition: all 0.2s ease;
}

.gd-breadcrumbs .bc-home:hover {
  background: var(--brand-weak);
  border-color: var(--brand);
  transform: translateY(-1px);
}

.gd-breadcrumbs .bc-home i {
  width: 18px; /* Aumentado de 14px */
  height: 18px; /* Aumentado de 14px */
  color: var(--text);
  opacity: 0.8;
  transform: translateY(0); /* Removido -1px */
}

.gd-breadcrumbs .bc-home:hover i {
  color: var(--brand);
  opacity: 1;
}

/* Para breadcrumbs muito longos em telas pequenas */
@media (max-width: 768px) {
  .gd-breadcrumbs {
    font-size: 14px;
    gap: 6px;
  }
  
  .gd-breadcrumbs a,
  .gd-breadcrumbs .bc-current {
    padding: 5px 8px;
  }
  
  .gd-breadcrumbs .bc-home {
    width: 32px;
    height: 32px;
  }
  
  .gd-breadcrumbs .bc-home i {
    width: 16px;
    height: 16px;
  }
}

/* Efeito de foco para acessibilidade */
.gd-breadcrumbs a:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* ============================================
   LINHA SEPARADORA ABAIXO DO BREADCRUMB
   ============================================ */

.gd-line {
  height: 1px;
  background: var(--border);
  margin-bottom: 24px;
  width: 100%;
}

/* ============================================
   CARDS E ROWS - CORREÇÃO PARA QUEBRA DE LINHA
   ============================================ */

/* Card Específico - CORRIGIDO */
.card {
  grid-column: span 3;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  position: relative;
  min-height: 120px; /* Altura mínima para consistência */
  word-wrap: break-word;
  overflow: hidden; /* Garante que nada ultrapasse */
}

/* NOME DO ARQUIVO/PASTA NO CARD - CORRIGIDO */
.card .name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.4;
  width: 100%; /* Ocupa toda a largura */
  margin: 0; /* Remove margens extras */
  padding: 0;
  
  /* Propriedades de quebra de linha */
  word-break: break-word; /* Quebra palavras longas */
  overflow-wrap: break-word; /* Suporte moderno */
  hyphens: auto; /* Adiciona hífens quando necessário */
  display: -webkit-box; /* Para ellipsis multi-linha */
  -webkit-line-clamp: 2; /* Máximo de 2 linhas */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 2.8em; /* 2 linhas * line-height */
}

/* Meta info no card */
.card .meta {
  font-size: 11px;
  color: var(--muted);
  margin-top: auto;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Row Específico - CORRIGIDO */
.row {
  grid-column: 1 / -1;
  padding: 12px 16px; /* Aumentado padding para melhor visualização */
  display: grid;
  grid-template-columns: 32px minmax(200px, 1fr) 120px 100px 80px; /* Ajuste de colunas */
  gap: 16px; /* Aumentado gap */
  align-items: center;
  min-height: 60px;
}

/* NOME DO ARQUIVO/PASTA NA ROW - CORRIGIDO */
.row .name {
  font-size: 14px; /* Aumentado de 13px */
  font-weight: 500;
  line-height: 1.4;
  margin: 0;
  padding: 0;
  
  /* Propriedades de quebra de linha */
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* Máximo de 2 linhas */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 2.8em;
}

/* Meta info na row */
.row .meta {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Ajuste para modo lista */
.gd-list.list-mode .row {
  grid-template-columns: 32px minmax(250px, 1fr) 150px 120px 80px;
}

/* Responsividade para telas menores */
@media (max-width: 1024px) {
  .gd-list {
    grid-template-columns: repeat(8, 1fr);
  }
  
  .card {
    grid-column: span 4; /* Cards maiores em tablets */
    min-height: 130px;
  }
  
  .card .name {
    -webkit-line-clamp: 3; /* 3 linhas em tablets */
    max-height: 4.2em;
  }
  
  .row {
    grid-template-columns: 32px minmax(150px, 1fr) 100px 80px;
  }
  
  .row .right,
  .row .date-label,
  .row .date-value {
    display: none; /* Esconde info extra em tablets */
  }
}

@media (max-width: 768px) {
  .gd-list {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .card {
    grid-column: span 4; /* Cards ocupam toda a linha */
    min-height: 140px;
  }
  
  .card .name {
    -webkit-line-clamp: 3;
    max-height: 4.2em;
    font-size: 14px; /* Texto um pouco maior em mobile */
  }
  
  .row {
    grid-template-columns: 32px 1fr 60px;
    padding: 10px 12px;
  }
  
  .row .meta {
    display: none; /* Esconde meta em mobile */
  }
}

@media (max-width: 480px) {
  .gd-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  
  .card {
    grid-column: span 2;
    padding: 12px;
    min-height: 120px;
  }
  
  .card .name {
    -webkit-line-clamp: 2;
    max-height: 2.8em;
    font-size: 12px;
  }
  
  .row {
    grid-template-columns: 24px 1fr 40px;
    padding: 8px 10px;
    gap: 8px;
  }
  
  .row .icon {
    width: 16px;
    height: 16px;
  }
}

/* ============================================
   MELHORIAS VISUAIS ADICIONAIS
   ============================================ */

/* Ícones com tamanho consistente */
.card .icon {
  width: 24px; /* Aumentado de 20px */
  height: 24px; /* Aumentado de 20px */
  color: var(--text);
  opacity: 0.7;
  margin-bottom: 8px; /* Aumentado de 4px */
  flex-shrink: 0; /* Impede que o ícone diminua */
}

.row .icon {
  width: 20px; /* Aumentado de 18px */
  height: 20px; /* Aumentado de 18px */
  color: var(--muted);
  flex-shrink: 0;
}

/* Pastas com destaque */
.card[data-type="dir"] .icon {
  color: var(--brand);
  opacity: 1;
}

.row[data-type="dir"] .icon {
  color: var(--brand);
}

/* Botão de ações ajustado */
.card .dot-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px; /* Aumentado de 24px */
  height: 28px; /* Aumentado de 24px */
  border-radius: 6px; /* Aumentado de 4px */
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(4px);
  border: 1px solid var(--border);
  opacity: 0;
  transition: all 0.2s;
  z-index: 2;
}

.card:hover .dot-btn {
  opacity: 1;
}

.card .dot-btn:hover {
  background: var(--bg);
  border-color: var(--border-hover);
  box-shadow: var(--shadow-sm);
}

/* Container do nome no card para melhor layout */
.card > div {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0; /* Importante para que o texto não force o container */
}

/* Tooltip para nome completo quando truncado */
.card .name[title],
.row .name[title] {
  cursor: help;
  position: relative;
}

/* Efeito hover nos cards e rows para melhor UX */
.card:hover .name,
.row:hover .name {
  color: var(--brand);
}

/* Ajuste para arquivos de link */
.card[data-type="file"] .name:contains(".glink.txt")::after,
.row[data-type="file"] .name:contains(".glink.txt")::after {
  content: " 🔗";
  font-size: 0.9em;
  opacity: 0.7;
}

/* Garantir que o texto nunca saia do container */
.card, .row {
  overflow: hidden !important;
}

/* Ajuste para quando estiver vazio */
.gd-list.is-empty .gd-empty-text {
  font-size: 16px;
  color: var(--muted);
  font-weight: 400;
  text-align: center;
  max-width: 300px;
  line-height: 1.5;
  margin: 0 auto;
}
/* ============================================
   ESTILOS PARA MODAL DE CONTROLE DE ACESSO
   ============================================ */

.funcionario-acesso-item:hover {
  border-color: #cfe0ff;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.1);
  transform: translateY(-1px);
}

.btn-acesso-sim:hover:not(.btn-acesso-sim-active) {
  background: #eff6ff !important;
}

.btn-acesso-nao:hover:not(.btn-acesso-nao-active) {
  background: #fef2f2 !important;
}

/* Scrollbar personalizada para a lista */
#gdz-acesso-lista::-webkit-scrollbar {
  width: 6px;
}

#gdz-acesso-lista::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 3px;
}

#gdz-acesso-lista::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

#gdz-acesso-lista::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}
/* No seu arquivo rdo.css ou dentro da tag <style> */
[data-lucide="file-text"] { color: #e11d48; }        /* Vermelho para PDF */
[data-lucide="file-spreadsheet"] { color: #16a34a; } /* Verde para Excel/Sheets */
[data-lucide="image"] { color: #2563eb; }            /* Azul para Imagens */
[data-lucide="folder"] { color: #facc15; }           /* Amarelo para Pastas */

/* Container da Árvore */
.gd-list.tree-mode {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 20px;
    background: #fff;
}

/* Item da Árvore */
.tree-item {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent;
    position: relative;
}

.tree-item:hover {
    background-color: #f3f7ff;
}

/* Destaque para a Pasta Principal (que está no topo da view atual) */
.tree-item.is-parent {
    background: #f8fafc;
    border-color: #e2e8f0;
    margin-bottom: 8px;
    font-weight: 700;
}

.tree-item.is-parent .icon {
    color: #2563eb;
    transform: scale(1.1);
}

/* Indentação das Subpastas */
.tree-item.is-child {
    margin-left: 24px; /* O deslocamento para a direita */
    border-left: 1px solid #e2e8f0; /* Linha vertical guia */
    border-radius: 0 6px 6px 0;
}

.tree-item .icon {
    width: 18px;
    height: 18px;
    margin-right: 10px;
    color: #64748b;
}

.tree-item .name {
    font-size: 14px;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Botão de ações na árvore */
.tree-item .dot-btn {
    margin-left: auto;
    opacity: 0;
}

.tree-item:hover .dot-btn {
    opacity: 1;
}

/* Container da Árvore */
.gd-list.tree-mode {
    display: flex;
    flex-direction: column;
    padding: 10px;
    background: #fff;
    gap: 2px;
}

/* Linha de cada item */
.tree-row {
    display: flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s;
    user-select: none;
}

.tree-row:hover { background: #f1f5f9; }

/* Setinha Minimalista */
.tree-chevron {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 4px;
    transition: transform 0.2s;
    color: #94a3b8;
}

.tree-chevron.is-open {
    transform: rotate(90deg);
}

.tree-row .icon {
    width: 18px;
    height: 18px;
    margin-right: 8px;
}

.tree-row .name {
    font-size: 14px;
    color: #1e293b;
    flex: 1;
}

/* Container das subpastas (onde a mágica acontece) */
.tree-children {
    display: none; /* Começa fechado */
    padding-left: 20px; /* Deslocamento para subpastas */
    border-left: 1px solid #e2e8f0;
    margin-left: 10px;
}

.tree-children.show {
    display: block;
}

/* Estilo para arquivos dentro da árvore */
.tree-row[data-type="file"] {
    padding-left: 30px; /* Alinha com pastas que tem seta */
}

/* Torna a linha da árvore um pouco mais alta para o botão respirar */
.tree-row {
    display: flex;
    align-items: center;
    padding: 8px 12px; /* Aumentado */
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
    position: relative;
    border: 1px solid transparent;
}

.tree-row:hover { 
    background: #f8fafc; 
    border-color: #e2e8f0;
}

/* Botão de Três Pontinhos - ESTILO EVIDENTE */
.tree-row .dot-btn {
    opacity: 1 !important; /* Garante que está sempre visível */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: #ffffff; /* Fundo branco para destacar do fundo da linha */
    border: 1px solid #e2e8f0; /* Borda fina */
    color: #475569; /* Cor cinza escura (Slate-600) */
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: 12px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05); /* Sombra bem leve */
}

.tree-row .dot-btn:hover {
    background: #2563eb; /* Azul da sua marca no hover */
    color: #ffffff;
    border-color: #2563eb;
    transform: scale(1.05);
}

.tree-row .dot-btn i {
    width: 18px;
    height: 18px;
}
/* Linha da árvore */
.tree-row {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
    position: relative;
    gap: 8px; /* Espaço entre os elementos */
}

.tree-row:hover {
    background: #f1f5f9;
}

/* O nome ocupa todo o espaço central, empurrando o botão para a direita */
.tree-row .name {
    flex: 1; 
    font-size: 14px;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Botão de Três Pontinhos (Menu) */
.tree-row .dot-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px; /* Garante que não diminua */
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #64748b;
    border-radius: 6px;
    cursor: pointer;
    z-index: 10;
}

.tree-row .dot-btn:hover {
    background: #2563eb !important;
    color: #ffffff !important;
    border-color: #2563eb;
}
/* =========================================
   BREADCRUMBS (CAMINHO DAS PASTAS)
   ========================================= */
.gd-breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 12px 20px;
    background-color: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    font-size: 14px;
    color: #64748b;
    gap: 6px; /* Espaço entre itens */
}

/* Botão Home */
.bc-home {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    text-decoration: none;
    padding: 4px;
    border-radius: 6px;
    transition: all 0.2s;
}

.bc-home:hover {
    background-color: #eff6ff;
    color: #2563eb;
}

.bc-home i {
    width: 18px;
    height: 18px;
}

/* Separador (>) */
.bc-sep {
    color: #cbd5e1;
    font-size: 12px;
    font-weight: bold;
    user-select: none;
}

/* Links das pastas intermediárias */
.bc-link {
    color: #475569;
    text-decoration: none;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.2s;
    cursor: pointer;
}

.bc-link:hover {
    background-color: #f1f5f9;
    color: #2563eb;
    text-decoration: underline;
}

/* Pasta Atual (Última) - Não clicável */
.bc-current {
    color: #0f172a; /* Cor escura forte */
    font-weight: 700;
    padding: 4px 8px;
    background: #f8fafc;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}
/* Destaque para a pasta selecionada/ativa */
.tree-row.active {
    background-color: #e0e7ff; /* Azul bem clarinho */
    border: 1px solid #6366f1; /* Borda azul indigo */
    color: #312e81;
    font-weight: 500;
}

.tree-row.active .icon {
    color: #4f46e5;
}

.tree-row.active .tree-chevron {
    color: #4f46e5;
}

/* Garante que o corpo não role, apenas a lista interna */
body, html {
    height: 100%;
    overflow: hidden; /* Remove rolagem da página inteira */
}

.gd-main {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 60px); /* Altura total menos a Navbar (~60px) */
}

/* O container da lista deve crescer e rolar internamente */
.gd-list {
    flex: 1; /* Ocupa todo espaço sobrando */
    overflow-y: auto; /* Habilita rolagem vertical */
    overflow-x: hidden;
    padding-bottom: 60px; /* Espaço extra no final para não cortar o último item */
}

/* Scrollbar mais elegante (Opcional, mas recomendado) */
.gd-list::-webkit-scrollbar { width: 8px; }
.gd-list::-webkit-scrollbar-track { background: transparent; }
.gd-list::-webkit-scrollbar-thumb { background-color: #cbd5e1; border-radius: 4px; }

/* 1. Trava a altura da página na janela do navegador */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden; /* Impede que a página inteira role */
    display: flex;       /* Transforma o body em flexbox */
    flex-direction: column;
    font-family: 'Inter', sans-serif;
}

/* 2. O Header (Topo) fica fixo e não encolhe */
.gd-navbar {
    flex-shrink: 0; 
    z-index: 20;
}

/* 3. O Main ocupa todo o espaço restante abaixo do Header */
.gd-main {
    flex: 1;             /* Cresce para ocupar o resto da tela */
    display: flex;       /* Vira um container flex também */
    flex-direction: column;
    overflow: hidden;    /* Impede vazamento de conteúdo */
    position: relative;
    min-height: 0;       /* Truque essencial para o scroll funcionar no filho */
}

/* 4. Breadcrumbs e Toolbar ficam fixos no topo do Main */
.gd-breadcrumbs, 
.gd-line, 
.gd-toolbar {
    flex-shrink: 0; /* Não deixamos eles encolherem */
    background: #fff;
    z-index: 10;
}

/* 5. A Lista é o ÚNICO elemento que rola */
.gd-list {
    flex: 1;             /* Ocupa todo o espaço vertical que sobrar */
    overflow-y: auto;    /* Habilita a rolagem vertical AQUI */
    overflow-x: hidden;
    padding: 10px 20px 60px 20px; /* Padding bottom extra para não cortar o último item */
}

/* Estilização da Barra de Rolagem (Opcional - deixa mais bonito) */
.gd-list::-webkit-scrollbar {
    width: 8px;
}
.gd-list::-webkit-scrollbar-track {
    background: transparent;
}
.gd-list::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 4px;
    border: 2px solid #fff;
}

/* =========================================
   LAYOUT CENTRALIZADO (80%)
   ========================================= */

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden; /* A página não rola, só a lista interna */
    display: flex;
    flex-direction: column;
    font-family: 'Inter', sans-serif;
    
    /* Cor de fundo da janela para destacar o conteúdo */
    background-color: #f1f5f9; 
}

/* --- NAVBAR (Topo) --- */
.gd-navbar {
    flex-shrink: 0;
    z-index: 20;
    
    /* Configuração de Largura 80% */
    width: 80%;
    max-width: 1600px; /* Limite para telas ultra-wide */
    margin: 20px auto 0 auto; /* Centraliza e dá espaço no topo */
    
    /* Estilo de "Cartão" */
    background-color: #fff;
    border: 1px solid #cbd5e1;
    border-bottom: 1px solid #e2e8f0;
    border-radius: 12px 12px 0 0; /* Arredonda apenas em cima */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

/* --- MAIN (Corpo com Breadcrumbs, Toolbar e Lista) --- */
.gd-main {
    /* Flexbox para ocupar a altura restante */
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0; /* Essencial para o scroll interno funcionar */
    
    /* Configuração de Largura 80% (Igual Navbar) */
    width: 80%;
    max-width: 1600px;
    margin: 0 auto 20px auto; /* Centraliza e dá espaço embaixo */
    
    /* Estilo de "Cartão" */
    background-color: #fff;
    border: 1px solid #cbd5e1;
    border-top: none; /* Conecta com a Navbar */
    border-radius: 0 0 12px 12px; /* Arredonda apenas embaixo */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
}

/* Garante que os elementos fixos dentro do Main respeitem a largura */
.gd-breadcrumbs, 
.gd-line, 
.gd-toolbar {
    flex-shrink: 0;
    background: #fff;
    z-index: 10;
    width: 100%; /* Ocupa 100% do pai (.gd-main), ou seja, os 80% da tela */
}

/* A Lista continua sendo o único lugar que rola */
.gd-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px 20px 60px 20px;
}

/* =========================================
   LAYOUT ESTRUTURAL (CORRIGIDO PARA SCROLL)
   ========================================= */

html, body {
    height: 100%;       /* Ocupa 100% da altura da janela */
    margin: 0;
    padding: 0;
    overflow: hidden;   /* Impede que a página inteira role */
    display: flex;
    flex-direction: column;
    font-family: 'Inter', sans-serif;
    background-color: #f1f5f9; /* Fundo cinza */
}

/* --- NAVBAR (Topo fixo) --- */
.gd-navbar {
    /* Tamanho e Posição */
    width: 80%;
    max-width: 1600px;
    margin: 20px auto 0 auto; /* Centralizado horizontalmente */
    flex-shrink: 0; /* Não encolhe */
    
    /* Estilo Visual */
    background-color: #fff;
    border: 1px solid #cbd5e1;
    border-bottom: 1px solid #e2e8f0;
    border-radius: 12px 12px 0 0; /* Arredonda em cima */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    z-index: 20;
    
    /* Layout Interno */
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    padding: 0 24px;
}

/* --- MAIN (Corpo que contém a lista) --- */
.gd-main {
    /* Tamanho e Posição */
    width: 80%;
    max-width: 1600px;
    margin: 0 auto 20px auto; /* Centralizado, encosta na navbar */
    
    /* Flexbox Mágico para Scroll */
    flex: 1;                 /* Ocupa todo o espaço vertical restante */
    display: flex;           /* Torna-se um container flexível também */
    flex-direction: column;  /* Organiza os filhos em coluna */
    min-height: 0;           /* ESSENCIAL: Permite que o scroll funcione */
    
    /* Estilo Visual */
    background-color: #fff;
    border: 1px solid #cbd5e1;
    border-top: none;        /* Remove borda duplicada com a navbar */
    border-radius: 0 0 12px 12px; /* Arredonda embaixo */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
    overflow: hidden;        /* Garante que nada saia das bordas arredondadas */
    position: relative;
}

/* --- ITENS FIXOS DENTRO DO MAIN (Toolbar, Breadcrumbs) --- */
.gd-breadcrumbs, 
.gd-line, 
.gd-toolbar {
    flex-shrink: 0; /* Garante que não sejam esmagados */
    background: #fff;
    width: 100%;
    z-index: 10;
}

/* --- LISTA (A única parte que rola) --- */
.gd-list {
    flex: 1;             /* Cresce para ocupar todo o espaço que sobrar */
    overflow-y: auto;    /* Habilita o scroll vertical APENAS aqui */
    overflow-x: hidden;  /* Evita scroll lateral */
    
    /* Espaçamento interno */
    padding: 10px 20px 40px 20px;
    
    /* Comportamento de rolagem suave */
    scroll-behavior: smooth;
}

/* Estilização da Barra de Rolagem (Fica mais bonito) */
.gd-list::-webkit-scrollbar {
    width: 8px;
}
.gd-list::-webkit-scrollbar-track {
    background: #f1f5f9;
}
.gd-list::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 4px;
    border: 2px solid #fff;
}
.gd-list::-webkit-scrollbar-thumb:hover {
    background-color: #94a3b8;
}