/**
 * Veno File Manager custom CSS
 */
/* =========================================================
   RT Cloud (Veno File Manager) — Restyle moderno/limpo
   Cole em: Appearance → Custom CSS
   ========================================================= */

/* ---------- Base / Variáveis ---------- */
:root{
  --rt-bg: #f6f7fb;
  --rt-surface: #ffffff;
  --rt-surface-2: #f1f3f9;
  --rt-text: #1f2937;
  --rt-muted: #6b7280;
  --rt-border: rgba(15, 23, 42, .08);

  --rt-primary: #11bfdb;
  --rt-primary-2: #0ea5c0;
  --rt-success: #16a34a;
  --rt-danger: #dc2626;
  --rt-warning: #d97706;

  --rt-radius: 14px;
  --rt-radius-sm: 10px;

  --rt-shadow: 0 12px 30px rgba(17, 24, 39, .08);
  --rt-shadow-sm: 0 8px 18px rgba(17, 24, 39, .08);
  --rt-focus: 0 0 0 .25rem rgba(37, 99, 235, .18);
}

html, body{
  background: var(--rt-bg) !important;
  color: var(--rt-text);
}

/* Tipografia */
.vfm-body{
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  letter-spacing: .1px;
}

/* ---------- Navbar ---------- */
.navbar.bg-dark{
  background: rgba(15, 23, 42, .92) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.navbar .navbar-brand img{
  height: 46px;
  width: auto;
  opacity: 1;
}

.navbar .nav-link{
  color: rgba(255,255,255,.86) !important;
  font-weight: 600;
}

.navbar .nav-link:hover{
  color: #fff !important;
}

.navbar .nav-link i{
  opacity: .95;
}

/* ---------- Layout geral / espaçamentos ---------- */
.vfm-body.pt-5{
  padding-top: 84px !important; /* mais ar abaixo da navbar */
}

.container.mb-auto.pt-3{
  padding-top: 18px !important;
}

.breadcrumb{
  background: transparent !important;
  padding: 10px 14px !important;
}

.breadcrumb .breadcrumb-item a{
  text-decoration: none;
  color: var(--rt-muted);
  font-weight: 600;
}

.breadcrumb .breadcrumb-item a:hover{
  color: var(--rt-text);
}

/* ---------- Blocos / “cards” ---------- */
.vfmblock,
.tableblock,
.uploadarea{
  border-radius: var(--rt-radius) !important;
}

.bg-light-lighter{
  background: var(--rt-surface) !important;
  border: 1px solid var(--rt-border) !important;
  box-shadow: var(--rt-shadow-sm);
}

/* Remove “look pesado” e uniformiza */
.shadow-sm{
  box-shadow: var(--rt-shadow-sm) !important;
}

/* ---------- Botões ---------- */
.btn{
  border-radius: 12px !important;
  font-weight: 700;
  letter-spacing: .2px;
  border-width: 1px;
}

.btn-primary{
  background: var(--rt-primary) !important;
  border-color: rgba(37, 99, 235, .35) !important;
  box-shadow: 0 10px 18px rgba(37, 99, 235, .18);
}

.btn-primary:hover{
  background: var(--rt-primary-2) !important;
  border-color: rgba(29, 78, 216, .45) !important;
  transform: translateY(-1px);
}

.btn-primary:active{
  transform: translateY(0);
  box-shadow: none;
}

.btn:focus, .btn:focus-visible{
  box-shadow: var(--rt-focus) !important;
}

/* Botões circulares (modal share/email) */
.btn-circle{
  border-radius: 999px !important;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Dropdown */
.dropdown-menu{
  border-radius: 14px !important;
  border: 1px solid var(--rt-border) !important;
  box-shadow: var(--rt-shadow) !important;
  padding: 8px;
}

.dropdown-item{
  border-radius: 10px !important;
  padding: 10px 12px;
  font-weight: 600;
}

.dropdown-item:hover{
  background: rgba(37, 99, 235, .08) !important;
}

/* ---------- Inputs ---------- */
.input-group, .table-controls-top.d-flex.w-100.mb-3{
    column-gap: 8px;
}
.form-control,
.form-select,
.input-group-text{
  border-radius: 12px !important;
  border: 1px solid var(--rt-border) !important;
}

.form-control:focus,
.form-select:focus{
  border-color: rgba(37, 99, 235, .45) !important;
  box-shadow: var(--rt-focus) !important;
}

.input-group-text{
  background: var(--rt-surface-2) !important;
  color: var(--rt-muted) !important;
  font-weight: 700;
}

/* Upload box */
#upload_container,
#newdir_container{
  border-radius: var(--rt-radius) !important;
  overflow: hidden;
}

/* ---------- Tabelas ---------- */
.table{
  margin-bottom: 0 !important;
}

#filetable,
#foldertable{
  border-collapse: separate !important;
  border-spacing: 0 10px !important; /* linhas “flutuantes” */
}

#filetable thead td,
#foldertable thead td{
  color: var(--rt-muted) !important;
  font-weight: 800;
  text-transform: none;
  letter-spacing: .2px;
  border: none !important;
  padding: 10px 12px !important;
}

#filetable tbody tr,
#foldertable tbody tr{
  background: var(--rt-surface) !important;
  box-shadow: 0 10px 18px rgba(17, 24, 39, .06);
  border: 1px solid var(--rt-border);
}

#filetable tbody tr td,
#foldertable tbody tr td{
  border: none !important;
  padding: 14px 12px !important;
  vertical-align: middle;
}

/* Arredondar “linhas-card” */
#filetable tbody tr td:first-child,
#foldertable tbody tr td:first-child{
  border-top-left-radius: 14px;
  border-bottom-left-radius: 14px;
}

#filetable tbody tr td:last-child,
#foldertable tbody tr td:last-child{
  border-top-right-radius: 14px;
  border-bottom-right-radius: 14px;
}

/* Hover suave */
#filetable tbody tr:hover,
#foldertable tbody tr:hover{
  transform: translateY(-1px);
  transition: transform .12s ease, box-shadow .12s ease;
  box-shadow: 0 14px 26px rgba(17, 24, 39, .09);
}

/* Nome do ficheiro mais “forte” */
td.name, .h-filename{
  font-weight: 700;
}

/* Ícones mais discretos */
.itemicon i, .bi{
  opacity: .92;
}

/* ---------- Progress bar ---------- */
#progress-up{
  border-radius: 999px !important;
  overflow: hidden;
  border: 1px solid var(--rt-border);
  background: var(--rt-surface) !important;
}

#progress-up .progress-bar{
  border-radius: 999px !important;
}

/* ---------- Modais ---------- */
.modal-content{
  border-radius: 18px !important;
  border: 1px solid var(--rt-border) !important;
  box-shadow: var(--rt-shadow) !important;
}

.modal-header{
  border-bottom: 1px solid var(--rt-border) !important;
}

.modal-footer{
  border-top: 1px solid var(--rt-border) !important;
}

/* ---------- Footer ---------- */
.footer{
  border-top: 1px solid rgba(255,255,255,.06);
}

.footer.small.bg-dark-lighter{
  background: rgba(15, 23, 42, .96) !important;
}

.footer a{
  color: rgba(255,255,255,.86) !important;
  font-weight: 700;
  text-decoration: none;
}

.footer a:hover{
  color: #fff !important;
}

/* ---------- Botão “to top” ---------- */
.to-top{
  border-radius: 999px !important;
  box-shadow: var(--rt-shadow-sm);
  border: 1px solid var(--rt-border);
}

/* ---------- Ajustes pequenos ---------- */
.avatar, .rounded-circle{
  box-shadow: 0 8px 18px rgba(0,0,0,.14);
}

.overload{
  background: rgba(246,247,251,.75) !important;
  backdrop-filter: blur(2px);
}

/* Barra de ações (Ações em massa, Partilhar, vista, etc.) */
.action-group{
  align-items: center !important;
  gap: 10px !important;
}

/* Alguns temas do VFM metem labels/inputs inline e com alturas fixas */
.dataTables_filter,
.dataTables_length{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
}

.dataTables_filter label,
.dataTables_length label{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  white-space: nowrap;
}

/* Input de pesquisa (evita “encavalitar” com ícones) */
.dataTables_filter input,
.dataTables_filter .form-control{
  width: 260px !important;
  min-width: 220px !important;
  height: 38px !important;
  line-height: 38px !important;
  padding: 0 12px !important;
}

/* Select “mostrar X” */
.dataTables_length select,
.dataTables_length .form-select{
  height: 38px !important;
  line-height: 38px !important;
  padding: 0 36px 0 12px !important;
}

/* Se o VFM estiver a usar um ícone de lupa ao lado do input */
.action-group i.bi-search,
.action-group .bi-search{
  position: static !important;
  transform: none !important;
  margin: 0 2px 0 0 !important;
  pointer-events: none;
  opacity: .75;
}

/* Evita que o campo de pesquisa “encoste” no dropdown de ações */
.action-group .btn-group{
  flex: 0 0 auto;
}
.action-group .dataTables_filter{
  flex: 1 1 auto;
}

/* Em ecrãs menores, deixa quebrar linha com espaço */
@media (max-width: 992px){
  .action-group{
    flex-wrap: wrap !important;
  }
  .dataTables_filter input,
  .dataTables_filter .form-control{
    width: 100% !important;
    min-width: 0 !important;
  }
}

i.bi.bi-folder-fill {
    color: #11bfdb;
}
.dataTables_wrapper .sorta:after {
    left: -2px;
}
/* =========================================================
   Ajuste do botão primary com o azul pedido
   ========================================================= */
.btn-primary{
  background: var(--rt-primary) !important;
  border-color: rgba(17, 191, 219, .40) !important;
  box-shadow: 0 10px 18px rgba(17, 191, 219, .20) !important;
}
.btn-primary:hover{
  background: var(--rt-primary-2) !important;
  border-color: rgba(14, 165, 192, .45) !important;
}