/* ============================================================
   HEDDER NAS - Tema Dark v6
   Seletores precisos para FileBrowser 2.61.1
   bg: #0a0a0a | sidebar/topbar: #111 | accent: #ff6b00
   ============================================================ */

/* ── BASE ── */
html, body, #app {
  background: #0a0a0a !important;
  color: #e0e0e0 !important;
  font-family: 'Trebuchet MS', 'Segoe UI', sans-serif !important;
}

/* ════════════════════════════════════
   TELA DE LOGIN
   ════════════════════════════════════ */
#login {
  background: linear-gradient(135deg, #0a0a0a 0%, #141414 100%) !important;
}

/* Wrapper do formulário de login */
#login .column.is-one-third-widescreen,
#login .login-wrapper,
#login > div > div {
  background: rgba(17,17,17,0.97) !important;
  border: 1px solid rgba(255,107,0,0.22) !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6) !important;
  padding: 2.5rem 2.5rem !important;
}

/* Ocultar APENAS o ícone de disquete do login (img tag) */
#login img[src*="logo"],
#login img[src*="svg"],
#login figure img { display: none !important; }

/* Logo personalizado no login */
#login .title + br,
#login form::before {
  content: '';
  display: block;
  width: 160px;
  height: 44px;
  background: url('/assets/logo.png') center/contain no-repeat;
  margin: 0 auto 1.2rem;
}

#/* Título "Hedder NAS" */
#login .title {
  display: none !important;
#  color: #ff6b00 !important;
#  font-size: 1.75rem !important;
#  font-weight: 900 !important;
#  text-align: center !important;
#  letter-spacing: 1px !important;
#  margin-bottom: 0.2rem !important;
#}

/* Labels do login */
#login .label, #login label {
  color: #999 !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
}

/* Inputs do login */
#login .input,
#login input[type="text"],
#login input[type="password"] {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 8px !important;
  color: #fff !important;
  font-size: 0.97rem !important;
  padding: 0.8rem 1rem !important;
  transition: border-color 0.25s, box-shadow 0.25s !important;
}

#login .input:focus,
#login input[type="text"]:focus,
#login input[type="password"]:focus {
  border-color: #ff6b00 !important;
  background: rgba(255,107,0,0.05) !important;
  box-shadow: 0 0 0 3px rgba(255,107,0,0.15) !important;
  outline: none !important;
}

/* Botão de login */
#login .button.is-primary,
#login button[type="submit"] {
  width: 100% !important;
  background: #ff6b00 !important;
  border: none !important;
  border-radius: 8px !important;
  color: #fff !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  padding: 0.85rem !important;
  letter-spacing: 0.5px !important;
  transition: background 0.25s, transform 0.2s, box-shadow 0.2s !important;
  cursor: pointer !important;
}

#login .button.is-primary:hover,
#login button[type="submit"]:hover {
  background: #e65c00 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(255,107,0,0.35) !important;
}

/* ════════════════════════════════════
   TOPBAR  (#nav-bar)
   ════════════════════════════════════ */
#nav-bar {
  background: #111 !important;
  border-bottom: 2px solid rgba(255,107,0,0.28) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.5) !important;
}

/* Ocultar ícone de disquete (img dentro do link de logo) */
#nav-bar #logo img,
#nav-bar a#logo img,
#nav-bar > a:first-child img {
  display: none !important;
}

/* Substituir por logo.png via pseudo */
#nav-bar #logo,
#nav-bar a#logo {
  display: inline-flex !important;
  align-items: center !important;
  width: 100px !important;
  height: 34px !important;
  background: url('/assets/logo.png') left center/contain no-repeat !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
}

/* Campo de busca */
#nav-bar #search input,
#nav-bar input[type="search"],
#nav-bar input[type="text"] {
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 8px !important;
  color: #e0e0e0 !important;
}

#nav-bar input:focus {
  border-color: #ff6b00 !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(255,107,0,0.2) !important;
}

/* Botões de ação na topbar (download, upload, etc.) */
#nav-bar .action button,
#nav-bar button {
  color: #aaa !important;
  background: transparent !important;
  border: none !important;
  transition: color 0.2s !important;
}

#nav-bar .action button:hover,
#nav-bar button:hover {
  color: #ff6b00 !important;
  background: rgba(255,107,0,0.08) !important;
}

/* ════════════════════════════════════
   SIDEBAR  (#sidebar)
   ════════════════════════════════════ */
#sidebar {
  background: #111 !important;
  border-right: 1px solid rgba(255,107,0,0.1) !important;
}

/* Remover padding/margin padrão das listas */
#sidebar ul, #sidebar ol { padding: 0 !important; margin: 0 !important; }
#sidebar li { list-style: none !important; }

/* Cada item do menu com separador visível */
#sidebar li a,
#sidebar nav a {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 11px 16px !important;
  color: #bbb !important;
  font-size: 0.92rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  border-left: 3px solid transparent !important;
  border-bottom: 1px solid rgba(255,255,255,0.055) !important;
  transition: all 0.17s ease !important;
  margin: 0 !important;
}

#sidebar li a:hover,
#sidebar nav a:hover,
#sidebar li a.router-link-active,
#sidebar nav a.router-link-active,
#sidebar li a.is-active,
#sidebar nav a.is-active {
  color: #ff6b00 !important;
  background: rgba(255,107,0,0.08) !important;
  border-left-color: #ff6b00 !important;
}

/* Ícones do sidebar */
#sidebar .material-icons,
#sidebar i.material-icons {
  color: #ff6b00 !important;
  font-size: 1.05rem !important;
  flex-shrink: 0 !important;
}

/* Info de disco */
#disk-usage {
  padding: 10px 16px 8px !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  color: #666 !important;
  font-size: 0.77rem !important;
}

#disk-usage progress {
  display: block !important;
  width: 100% !important;
  height: 3px !important;
  border-radius: 2px !important;
  border: none !important;
  background: rgba(255,255,255,0.08) !important;
  margin-top: 5px !important;
}

#disk-usage progress::-webkit-progress-bar { background: rgba(255,255,255,0.08) !important; }
#disk-usage progress::-webkit-progress-value { background: #ff6b00 !important; border-radius: 2px !important; }
#disk-usage progress::-moz-progress-bar { background: #ff6b00 !important; }

/* ════════════════════════════════════
   ÁREA DE CONTEÚDO PRINCIPAL
   ════════════════════════════════════ */
#main, main, #listing {
  background: #0a0a0a !important;
}

/* Cabeçalho da tabela de arquivos */
#listing .item.header {
  background: rgba(255,107,0,0.03) !important;
  border-bottom: 1px solid rgba(255,107,0,0.1) !important;
  color: #ff6b00 !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
}

/* Linhas de arquivo */
#listing .item:not(.header) {
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
  transition: background 0.13s !important;
  /* Remover qualquer borda dashed que estava vazando */
  border-top: none !important;
  outline: none !important;
}

#listing .item:not(.header):hover {
  background: rgba(255,107,0,0.045) !important;
}

/* Nome do arquivo */
#listing .item .name { color: #e0e0e0 !important; }
#listing .item .size, #listing .item .modified { color: #666 !important; font-size: 0.81rem !important; }

/* Ícones de arquivo/pasta */
.material-icons { color: #ff6b00 !important; }

/* Breadcrumb */
#breadcrumbs {
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  background: transparent !important;
  padding: 6px 14px !important;
}

#breadcrumbs a, #breadcrumbs .breadcrumb a { color: #ff6b00 !important; }
#breadcrumbs span, #breadcrumbs .separator { color: #555 !important; }

/* ════════════════════════════════════
   MODAIS / CARDS
   ════════════════════════════════════ */
.modal-card {
  background: #111 !important;
  border: 1px solid rgba(255,107,0,0.18) !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 40px rgba(0,0,0,0.7) !important;
}

.modal-card-head {
  background: #161616 !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 12px 12px 0 0 !important;
  padding: 14px 20px !important;
}

.modal-card-foot {
  background: #161616 !important;
  border-top: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 0 0 12px 12px !important;
}

.modal-card-body {
  background: #111 !important;
  padding: 1.5rem !important;
}

.modal-card-title {
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
}

.modal-background { background: rgba(0,0,0,0.88) !important; }

.card, .box, .panel {
  background: #111 !important;
  border: 1px solid rgba(255,107,0,0.15) !important;
  border-radius: 10px !important;
}

/* ════════════════════════════════════
   INPUTS E FORMULÁRIOS
   ════════════════════════════════════ */
.input, input[type="text"], input[type="password"],
input[type="email"], input[type="number"], input[type="search"],
textarea, select, .textarea {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 8px !important;
  color: #e0e0e0 !important;
}

.input:focus, input:focus, textarea:focus, select:focus {
  border-color: #ff6b00 !important;
  box-shadow: 0 0 0 3px rgba(255,107,0,0.15) !important;
  outline: none !important;
}

.label, label { color: #999 !important; font-size: 0.875rem !important; }

/* ════════════════════════════════════
   BOTÕES
   ════════════════════════════════════ */
.button.is-primary {
  background: #ff6b00 !important;
  border-color: #ff6b00 !important;
  color: #fff !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
}
.button.is-primary:hover { background: #e65c00 !important; }

.button {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: #ccc !important;
  border-radius: 8px !important;
  transition: all 0.18s !important;
}
.button:hover {
  background: rgba(255,107,0,0.09) !important;
  border-color: #ff6b00 !important;
  color: #ff6b00 !important;
}

.button.is-danger { background: rgba(220,38,38,0.15) !important; border-color: rgba(220,38,38,0.4) !important; color: #f87171 !important; }
.button.is-danger:hover { background: rgba(220,38,38,0.25) !important; }

/* ════════════════════════════════════
   NOTIFICAÇÕES
   ════════════════════════════════════ */
.notification.is-primary { background: rgba(255,107,0,0.1) !important; border: 1px solid rgba(255,107,0,0.3) !important; color: #ff6b00 !important; border-radius: 8px !important; }
.notification.is-danger  { background: rgba(220,38,38,0.1)  !important; border: 1px solid rgba(220,38,38,0.3) !important;  color: #f87171 !important; border-radius: 8px !important; }
.notification.is-success { background: rgba(16,185,129,0.1) !important; border: 1px solid rgba(16,185,129,0.3) !important; color: #34d399 !important; border-radius: 8px !important; }

/* ════════════════════════════════════
   DROPDOWN
   ════════════════════════════════════ */
.dropdown-content {
  background: #161616 !important;
  border: 1px solid rgba(255,107,0,0.18) !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5) !important;
}
.dropdown-item, a.dropdown-item { color: #ccc !important; }
.dropdown-item:hover, a.dropdown-item:hover {
  background: rgba(255,107,0,0.08) !important;
  color: #ff6b00 !important;
}
hr.dropdown-divider { background: rgba(255,255,255,0.07) !important; }

/* ════════════════════════════════════
   UPLOAD (overlay de drag-and-drop)
   Usar seletor bem específico para não
   vazar borda dashed em outros elementos
   ════════════════════════════════════ */
#upload-files,
#drop-overlay,
.overlay-drop {
  border: 2px dashed rgba(255,107,0,0.35) !important;
  background: rgba(255,107,0,0.05) !important;
  border-radius: 10px !important;
}

/* ════════════════════════════════════
   SCROLLBAR
   ════════════════════════════════════ */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: #0a0a0a; }
::-webkit-scrollbar-thumb { background: rgba(255,107,0,0.32); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #ff6b00; }

/* ════════════════════════════════════
   MISC
   ════════════════════════════════════ */
::selection { background: rgba(255,107,0,0.28) !important; color: #fff !important; }

h1, h2, h3, h4 { color: #fff !important; }
a { color: #ff6b00 !important; }
a:hover { color: #ff8c33 !important; }

.tag.is-primary { background: rgba(255,107,0,0.18) !important; color: #ff6b00 !important; }

progress { background: rgba(255,255,255,0.08) !important; border: none !important; }
progress::-webkit-progress-bar  { background: rgba(255,255,255,0.08) !important; }
progress::-webkit-progress-value { background: #ff6b00 !important; }
progress::-moz-progress-bar { background: #ff6b00 !important; }
#login .title { display: none !important; }
h2.title, .login h2, #login h2 { display: none !important; }
h2 { display: none !important; }
#login .title, #login h1, #login h2, #login h2.title, #login > div h2, #login > div h1, #login > div > div > h2, #login > div > div > h1 { display: none !important; }