/* ============================================================
   KTG HUB — folder-view.css · navegador de pasta (rep + admin)
   Modelado em Google Drive/OneDrive. Design System v1: só tokens
   semânticos (tokens.css). Cards com o mesmo desenho do .item/.atalho.
   ============================================================ */

/* trilha (níveis acima) */
.fv-crumb{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-1); margin:0 0 var(--space-2);
  font-size:var(--text-sm); line-height:var(--lh-sm); color:var(--color-text-muted); }
.fv-crumb a{ display:inline-flex; align-items:center; gap:var(--space-2); min-height:32px; padding:0 var(--space-1);
  border-radius:var(--radius-md); color:var(--color-text-muted); text-decoration:none; }
.fv-crumb a:hover{ background:var(--color-surface); color:var(--color-text); }
.fv-crumb .sep{ display:inline-flex; align-items:center; color:var(--color-text-subtle); }
.ktg-ic{ flex:0 0 auto; }

/* título da pasta + controles */
.fv-bar{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-3) var(--space-4); margin:0 0 var(--space-6); }
.fv-title{ margin:0; min-width:0; font:var(--weight-bold) var(--text-xl)/var(--lh-xl) var(--font); color:var(--color-text); text-wrap:balance; }
.fv-count{ margin-left:var(--space-3); font:var(--weight-regular) var(--text-sm)/var(--lh-sm) var(--font); color:var(--color-text-muted); white-space:nowrap; }
.fv-controls{ display:flex; align-items:center; gap:var(--space-2); margin-left:auto; }
/* A seta do <select> nativo é desenhada pelo navegador colada na borda e ignora o padding.
   Mesmo tratamento dos campos do modal: esconder a nativa e desenhar a nossa, com o mesmo
   respiro das demais pílulas (--space-4). */
.fv-sort{ appearance:none; -webkit-appearance:none;
  height:var(--control-h); padding:0 var(--space-12) 0 var(--space-4); border:0; border-radius:var(--radius-pill); cursor:pointer;
  background-color:var(--color-surface); box-shadow:inset 0 0 0 1px var(--color-border);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6B69' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right var(--space-4) center; background-size:16px 16px;
  font:var(--weight-regular) var(--text-sm)/1 var(--font); color:var(--color-text); }
.fv-sort:hover{ background-color:var(--color-surface-muted); }
/* alternador grade/lista: selecionado = tom de seleção (laranja cheio é reservado para ação) */
.fv-toggle{ display:flex; height:var(--control-h); padding:var(--space-1); gap:var(--space-1); border-radius:var(--radius-pill);
  background:var(--color-surface); box-shadow:inset 0 0 0 1px var(--color-border); }
.fv-toggle button{ width:44px; border:0; border-radius:var(--radius-pill); background:transparent; cursor:pointer;
  color:var(--color-text-muted); display:grid; place-items:center; transition:background var(--dur-fast) var(--ease); }
.fv-toggle button:not([aria-pressed="true"]):hover{ background:var(--color-surface-muted); color:var(--color-text); }
.fv-toggle button[aria-pressed="true"]{ background:var(--color-accent-selected); color:var(--color-accent-text); }
.fv-toggle svg{ width:18px; height:18px; }

/* estados */
.fv-load, .fv-empty, .fv-error{ text-align:center; color:var(--color-text-muted); padding:var(--space-12) var(--space-4); }
.fv-empty .ic, .fv-error .ic{ display:flex; justify-content:center; margin-bottom:var(--space-3); color:var(--color-text-subtle); }
.fv-error .ic{ color:var(--color-accent-text); }
.fv-empty strong, .fv-error strong{ display:block; margin-bottom:var(--space-1); font:var(--weight-bold) var(--text-lg)/var(--lh-lg) var(--font); color:var(--color-text); }
.fv-empty span, .fv-error span{ font-size:var(--text-md); line-height:var(--lh-md); }
.fv-legacy{ display:inline-flex; align-items:center; min-height:var(--control-h); margin-top:var(--space-4); padding:0 var(--space-6);
  border-radius:var(--radius-pill); background:var(--color-accent); color:var(--color-text-inverse);
  font:var(--weight-bold) var(--text-md)/1 var(--font); cursor:pointer; text-decoration:none; }
.fv-legacy:hover{ background:var(--color-accent-hover); }
.fv-aviso{ margin:0 0 var(--space-4); padding:var(--space-3) var(--space-4); border-radius:var(--radius-md);
  background:var(--color-warning-soft); color:var(--color-warning); font-size:var(--text-sm); line-height:var(--lh-sm); }

/* GRADE — mesmo desenho do card de item */
.fv-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:var(--space-4); }
.fv-card{ position:relative; display:flex; flex-direction:column; overflow:hidden; text-align:left; cursor:pointer;
  background:var(--color-surface); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);
  transition:box-shadow var(--dur) var(--ease); }
.fv-card:hover{ box-shadow:var(--shadow-md); }
.fv-thumb{ position:relative; aspect-ratio:4/3; display:grid; place-items:center; overflow:hidden; background:var(--color-surface-muted); }
.fv-thumb img{ width:100%; height:100%; object-fit:cover; }
/* sem prévia: fundo neutro; o tipo aparece na etiqueta (PDF, MP4…), não em cor de fundo */
.fv-thumb.ic{ box-shadow:inset 0 -1px 0 var(--color-divider); }
.fv-thumb .bi{ display:grid; place-items:center; color:var(--color-text-subtle); }
.fv-ext{ position:absolute; top:var(--space-2); left:var(--space-2); padding:2px var(--space-2); border-radius:var(--radius-md);
  background:rgba(31,29,28,.72); color:var(--color-text-inverse);
  font:var(--weight-bold) var(--text-xs)/var(--lh-xs) var(--font); text-transform:uppercase; }
.fv-playov{ position:absolute; inset:0; display:grid; place-items:center; }
.fv-playov span{ width:48px; height:48px; border-radius:50%; display:grid; place-items:center;
  background:var(--color-surface); color:var(--color-accent); box-shadow:var(--shadow-md); }
.fv-kebab{ position:absolute; top:var(--space-2); right:var(--space-2); width:36px; height:36px; border:0; border-radius:50%;
  display:grid; place-items:center; cursor:pointer; background:var(--color-surface); color:var(--color-text);
  box-shadow:var(--shadow-sm); opacity:0; transition:opacity var(--dur-fast) var(--ease); }
.fv-card:hover .fv-kebab, .fv-card:focus-within .fv-kebab{ opacity:1; }
.fv-kebab:hover{ background:var(--color-surface-muted); }
.fv-kebab svg{ width:18px; height:18px; }
.fv-meta{ display:flex; align-items:center; padding:var(--space-3) var(--space-4) var(--space-4); }
.fv-meta .mt{ min-width:0; }
.fv-nome{ font:var(--weight-bold) var(--text-sm)/var(--lh-sm) var(--font); color:var(--color-text);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; word-break:break-word; }
.fv-tam{ margin-top:var(--space-1); font-size:var(--text-xs); line-height:var(--lh-xs); color:var(--color-text-muted); }

/* LISTA */
.fv-list{ overflow:hidden; border-radius:var(--radius-lg); background:var(--color-surface); box-shadow:var(--shadow-sm); }
.fv-list table{ width:100%; table-layout:fixed; border-collapse:collapse; font-size:var(--text-sm); line-height:var(--lh-sm); }
.fv-list thead th{ padding:var(--space-3) var(--space-4); text-align:left; border-bottom:1px solid var(--color-divider);
  font:var(--weight-bold) var(--text-xs)/var(--lh-xs) var(--font); letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--color-text-muted); }
.fv-list tbody tr{ border-bottom:1px solid var(--color-divider); cursor:pointer; }
.fv-list tbody tr:last-child{ border-bottom:0; }
.fv-list tbody tr:hover{ background:var(--color-surface-muted); }
.fv-list td{ padding:var(--space-2) var(--space-4); }
.fv-lnome{ display:flex; align-items:center; gap:var(--space-3); min-width:0; }
.fv-lthumb{ width:40px; height:40px; flex:0 0 auto; overflow:hidden; display:grid; place-items:center;
  border-radius:var(--radius-md); background:var(--color-surface-muted); color:var(--color-text-subtle); }
.fv-lthumb img{ width:100%; height:100%; object-fit:cover; }
.fv-ltitle{ font-weight:var(--weight-bold); color:var(--color-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fv-list .col-tipo, .fv-list .col-data, .fv-list .col-tam{ color:var(--color-text-muted); }
.fv-list .col-tipo{ width:130px; }
.fv-list .col-data{ width:118px; white-space:nowrap; }
.fv-list .col-tam{ width:96px; }
.fv-list .col-acoes{ text-align:right; width:56px; }
.fv-lkebab{ width:36px; height:36px; border:0; border-radius:50%; background:transparent; color:var(--color-text-muted);
  cursor:pointer; display:inline-grid; place-items:center; }
.fv-lkebab:hover{ background:var(--color-surface-muted); color:var(--color-text); }
.fv-lkebab svg{ width:18px; height:18px; }

/* popmenu (ações por papel) */
.fv-pop{ position:fixed; z-index:130; min-width:200px; padding:var(--space-2); border-radius:var(--radius-md);
  background:var(--color-surface); box-shadow:var(--shadow-lg); }
.fv-pop button{ display:flex; align-items:center; gap:var(--space-3); width:100%; min-height:40px; padding:0 var(--space-3);
  border:0; border-radius:var(--radius-md); background:transparent; cursor:pointer; text-align:left;
  font:var(--weight-regular) var(--text-sm)/1 var(--font); color:var(--color-text); }
.fv-pop button:hover{ background:var(--color-surface-muted); }
.fv-pop button.danger{ color:var(--color-danger); }
.fv-pop button.danger:hover{ background:var(--color-danger-soft); }
.fv-pop .sep{ height:1px; margin:var(--space-1); background:var(--color-divider); }
.fv-pop svg{ width:16px; height:16px; flex:0 0 auto; }

/* LIGHTBOX (fundo escuro de propósito: a atenção vai para o arquivo) */
.fv-lb{ position:fixed; inset:0; z-index:150; display:none; grid-template-rows:auto 1fr auto;
  background:rgba(18,14,12,.96); opacity:1; animation:fv-lbin .2s ease forwards; }
.fv-lb.on{ display:grid; }
@keyframes fv-lbin{ from{ opacity:0; } }
.fv-lb-top{ display:flex; align-items:center; gap:var(--space-3); padding:var(--space-4) var(--space-6); color:var(--color-text-inverse); }
.fv-lb-top .ic{ width:36px; height:36px; flex:0 0 auto; display:grid; place-items:center; border-radius:var(--radius-md); background:rgba(255,255,255,.12); }
.fv-lb-top .nm{ max-width:46vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:var(--weight-bold) var(--text-md)/var(--lh-md) var(--font); }
.fv-lb-top .mt{ font-size:var(--text-xs); line-height:var(--lh-xs); color:var(--color-text-inverse-muted); }
.fv-lb-top .grow{ flex:1; }
.fv-lbtn{ display:inline-flex; align-items:center; gap:var(--space-2); flex:0 0 auto; min-height:40px; padding:0 var(--space-4);
  border:0; border-radius:var(--radius-pill); cursor:pointer; white-space:nowrap;
  background:rgba(255,255,255,.12); color:var(--color-text-inverse); font:var(--weight-medium) var(--text-sm)/1 var(--font); }
.fv-lbtn svg{ width:16px; height:16px; flex:0 0 auto; }
.fv-lbtn:hover{ background:rgba(255,255,255,.2); }
.fv-lbtn.primary{ background:var(--color-accent); font-weight:var(--weight-bold); }
.fv-lbtn.primary:hover{ background:var(--color-accent-hover); }
.fv-lb-x{ width:44px; height:44px; flex:0 0 auto; display:grid; place-items:center; border:0; border-radius:50%;
  background:rgba(255,255,255,.12); color:var(--color-text-inverse); cursor:pointer; }
.fv-lb-x:hover{ background:rgba(255,255,255,.2); }
.fv-lb-stage{ position:relative; display:grid; place-items:center; padding:var(--space-2) 60px; min-height:0; }
.fv-lb-stage img{ max-width:100%; max-height:74dvh; object-fit:contain; border-radius:var(--radius-md); }
.fv-lb-stage iframe{ width:min(900px,100%); height:74dvh; border:0; border-radius:var(--radius-md); background:var(--color-surface); }
.fv-lb-stage video{ max-width:min(900px,100%); max-height:74dvh; border-radius:var(--radius-md); background:#000; }
.fv-lb-msg{ width:min(520px,90%); padding:var(--space-12) var(--space-6); text-align:center; border-radius:var(--radius-lg);
  background:var(--color-surface); color:var(--color-text-muted); }
.fv-lb-msg .ic{ display:flex; justify-content:center; margin-bottom:var(--space-3); color:var(--color-text-subtle); }
.fv-lb-msg strong{ display:block; margin-bottom:var(--space-4); color:var(--color-text); }
.fv-nav{ position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border:0; border-radius:50%;
  display:grid; place-items:center; cursor:pointer; background:rgba(255,255,255,.12); color:var(--color-text-inverse);
  font:var(--weight-regular) var(--text-xl)/1 var(--font); }
.fv-nav:hover{ background:rgba(255,255,255,.24); }
.fv-nav.prev{ left:var(--space-3); } .fv-nav.next{ right:var(--space-3); }
.fv-nav[hidden]{ display:none; }
.fv-lb-foot{ display:flex; justify-content:center; flex-wrap:wrap; gap:var(--space-2); padding:var(--space-4); }
.fv-dot{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.28); }
.fv-dot.on{ width:24px; border-radius:var(--radius-pill); background:var(--color-accent); }

/* ============================================================
   FOCO DE TECLADO — o mesmo anel do sistema em todos os controles
   ============================================================ */
.fv-card:focus-visible, .fv-sort:focus-visible, .fv-toggle button:focus-visible, .fv-kebab:focus-visible,
.fv-lkebab:focus-visible, .fv-crumb a:focus-visible, .fv-legacy:focus-visible{ outline:none; box-shadow:var(--focus-ring); }
.fv-list tbody tr:focus-visible{ outline:2px solid var(--color-accent); outline-offset:-2px; }   /* linha: anel interno p/ não cortar */
.fv-pop button:focus-visible{ outline:none; background:var(--color-surface-muted); }
/* botões sobre o fundo escuro do lightbox: anel branco (laranja sumiria no .primary) */
.fv-lbtn:focus-visible, .fv-lb-x:focus-visible, .fv-nav:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

@media (prefers-reduced-motion:reduce){
  .fv-lb{ animation:none; }
  .fv-card{ transition:none; }
}

/* dispositivos de toque: sem hover "grudento" (último item tocado parecendo selecionado) */
@media (hover:none){
  .fv-list tbody tr:hover{ background:transparent; }
  .fv-card:hover{ box-shadow:var(--shadow-sm); }
}

/* ============================================================
   MOBILE (≤560px)
   ============================================================ */
@media (max-width:560px){
  /* controles descem para uma linha própria, ocupando a largura */
  .fv-controls{ margin-left:0; width:100%; }
  .fv-sort{ flex:1; }
  /* lightbox */
  .fv-lb-top{ padding:var(--space-3) var(--space-4); }
  .fv-lb-top .nm{ max-width:34vw; }
  .fv-lbtn span{ display:none; }
  .fv-lbtn{ width:44px; height:44px; padding:0; justify-content:center; }   /* fileira de círculos iguais */
  .fv-lb-stage{ padding:var(--space-2) var(--space-3); }
  .fv-lb-stage img{ max-height:82svh; }
  /* grade: 2 colunas no celular (a prévia das imagens importa aqui) */
  .fv-grid{ grid-template-columns:repeat(2,1fr); gap:var(--space-3); }
  .fv-meta{ padding:var(--space-3); }
  /* ⋮ sempre visível (não há hover no toque) */
  .fv-kebab{ opacity:1; }
  /* lista cabe na tela: esconde Tipo, aperta padding */
  .fv-list .col-tipo{ display:none; }
  .fv-list td, .fv-list thead th{ padding:var(--space-2) var(--space-3); }
  .fv-list .col-data{ width:86px; }
  .fv-list .col-tam{ width:84px; }
  .fv-list .col-acoes{ width:48px; }
  .fv-lkebab{ width:44px; height:44px; }
}

/* ---- toolbar de dono (admin · podeEditar) ---- */
.fv-owner{ display:flex; align-items:center; gap:var(--space-2); margin-right:var(--space-1); }
.fv-upload, .fv-detail{ display:inline-flex; align-items:center; gap:var(--space-2); height:var(--control-h); padding:0 var(--space-4);
  border:0; border-radius:var(--radius-pill); cursor:pointer; font:var(--weight-medium) var(--text-sm)/1 var(--font);
  transition:background var(--dur-fast) var(--ease); }
.fv-upload{ background:var(--color-accent); color:var(--color-text-inverse); font-weight:var(--weight-bold); }
.fv-upload:hover{ background:var(--color-accent-hover); }
.fv-detail{ background:var(--color-surface); color:var(--color-text); box-shadow:inset 0 0 0 1px var(--color-border); }
.fv-detail:hover{ background:var(--color-surface-muted); }
.fv-upload:focus-visible, .fv-detail:focus-visible{ outline:none; box-shadow:var(--focus-ring); }
.fv-upload svg, .fv-detail svg{ width:18px; height:18px; }
a.fv-detail{ text-decoration:none; }
@media (max-width:560px){ .fv-upload span, .fv-detail span{ display:none; } .fv-upload, .fv-detail{ width:44px; padding:0; justify-content:center; } }

/* ---- overlay de drag-drop (admin) — o container é posicionado em JS (wireDrop) ---- */
.fv-drop-overlay{ position:absolute; inset:0; z-index:30; display:grid; place-items:center; pointer-events:none;
  background:var(--color-accent-soft); /* fallback p/ navegadores sem color-mix */
  background:color-mix(in srgb, var(--color-accent-soft) 88%, transparent);
  border:2px dashed var(--color-accent); border-radius:var(--radius-lg); }
.fv-drop-msg{ display:flex; flex-direction:column; align-items:center; gap:var(--space-2);
  color:var(--color-accent-text); font:var(--weight-bold) var(--text-md)/var(--lh-md) var(--font); }
.fv-drop-msg svg{ width:34px; height:34px; }

/* ---- mini-dialog de renomear (admin) ---- */
.fv-rename{ position:fixed; inset:0; z-index:210; display:grid; place-items:center; opacity:1;
  background:rgba(31,29,28,.45); animation:fvfade .15s var(--ease-out) forwards; }
.fv-rename-box{ width:min(420px,calc(100vw - 40px)); display:flex; flex-direction:column; gap:var(--space-3); padding:var(--space-6);
  border-radius:var(--radius-lg); background:var(--color-surface); box-shadow:var(--shadow-lg); }
.fv-rename-lbl{ font:var(--weight-bold) var(--text-md)/var(--lh-md) var(--font); color:var(--color-text); }
.fv-rename-input{ height:var(--control-h); padding:0 var(--space-3); border:0; border-radius:var(--radius-md);
  background:var(--color-surface-muted); box-shadow:inset 0 0 0 1px var(--color-border);
  font:var(--weight-regular) var(--text-md)/1 var(--font); color:var(--color-text); outline:none; }
.fv-rename-input:focus{ box-shadow:inset 0 0 0 1px var(--color-accent), 0 0 0 3px var(--color-accent-selected); }
.fv-rename-acts{ display:flex; justify-content:flex-end; gap:var(--space-2); }
.fv-rn-btn{ height:var(--control-h); padding:0 var(--space-6); border:0; border-radius:var(--radius-pill); cursor:pointer;
  background:var(--color-accent); color:var(--color-text-inverse); font:var(--weight-bold) var(--text-sm)/1 var(--font); }
.fv-rn-btn:hover{ background:var(--color-accent-hover); }
.fv-rn-btn.ghost{ background:var(--color-surface); color:var(--color-text); font-weight:var(--weight-medium); box-shadow:inset 0 0 0 1px var(--color-border); }
.fv-rn-btn.ghost:hover{ background:var(--color-surface-muted); }
@keyframes fvfade{ from{opacity:0} to{opacity:1} }