/* ================================================
   HEDDER NAS - Tema Dark v4
   FileBrowser 2.61.x
   bg: #0a0a0a | sidebar: #111 | accent: #ff6b00
   ================================================ */

* { box-sizing: border-box; }

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

/* ── TOPBAR (barra superior escura) ── */
#nav-bar {
  background: #111 !important;
  border-bottom: 2px solid rgba(255, 107, 0, 0.35) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.6) !important;
  height: 52px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 16px !important;
}

/* Esconder ícone disquete padrão */
#nav-bar img[src*="logo"],
#nav-bar .logo,
#nav-bar svg,
.branding-logo { display: none !important; }

/* Logo customizado via logo.png */
#nav-bar::before {
  content: '';
  display: inline-block;
  width: 120px;
  height: 36px;
  background-image: url('/img/logo.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
  margin-right: 12px;
  flex-shrink: 0;
}

#nav-bar .title, #nav-bar span.name {
  color: #ff6b00 !important;
  font-weight: 900 !important;
  font-size: 1.1rem !important;
}

/* Campo de busca na topbar */
#nav-bar input,
#nav-bar .search input {
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: #e0e0e0 !important;
  border-radius: 8px !important;
}

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

/* Botão upload/ação na topbar */
#nav-bar .action,
#nav-bar button,
#nav-bar .button {
  background: #ff6b00 !important;
  border: none !important;
  color: #fff !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  transition: background 0.2s !important;
}

#nav-bar .action:hover,
#nav-bar button:hover {
  background: #e65c00 !important;
}

/* ── SIDEBAR (menu lateral escuro) ── */
#sidebar,
.sidebar,
aside {
  background: #111 !important;
  border-right: 1px solid rgba(255, 107, 0, 0.15) !important;
  padding: 8px 0 !important;
}

/* Itens do menu lateral */
#sidebar ul,
#sidebar li,
.sidebar ul,
.sidebar li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#sidebar li a,
#sidebar a,
.sidebar a,
aside a {
  display: flex !important;
  align-items: center !important;
  padding: 10px 16px !important;
  color: #bbb !important;
  text-decoration: none !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  border-left: 3px solid transparent !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  transition: all 0.18s !important;
  margin: 0 !important;
}

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

/* Ícones do sidebar */
#sidebar .material-icons,
#sidebar i,
aside .material-icons,
aside i {
  color: #ff6b00 !important;
  margin-right: 8px !important;
  font-size: 1.1rem !important;
}

/* Barra de uso de disco */
#sidebar .usage,
.sidebar .usage {
  padding: 12px 16px !important;
  border-top: 1px solid rgba(255,255,255,0.07) !important;
  color: #777 !important;
  font-size: 0.8rem !important;
}

#sidebar progress,
.sidebar progress {
  background: rgba(255,255,255,0.1) !important;
  border-radius: 4px !important;
  height: 4px !important;
  width: 100% !important;
}

#sidebar progress::-webkit-progress-value,
.sidebar progress::-webkit-progress-value {
  background: #ff6b00 !important;
}

/* ── ÁREA DE CONTEÚDO ── */
#main, main, .main, .column.main {
  background: #0a0a0a !important;
}

/* Breadcrumb */
.breadcrumbs, .breadcrumb {
  background: transparent !important;
  padding: 8px 16px !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}

.breadcrumbs a, .breadcrumb a { color: #ff6b00 !important; }
.breadcrumbs span, .breadcrumb li.is-active a { color: #aaa !important; }
.breadcrumbs .separator { color: #555 !important; }

/* Listagem de arquivos */
#listing {
  background: #0a0a0a !important;
}

.item {
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
  transition: background 0.15s !important;
}

.item:hover {
  background: rgba(255, 107, 0, 0.05) !important;
}

.item .name { color: #e0e0e0 !important; }
.item .size, .item .modified { color: #777 !important; font-size: 0.85rem !important; }

/* Cabeçalho da tabela */
#listing .header, .listing-header {
  background: rgba(255,107,0,0.04) !important;
  border-bottom: 2px solid rgba(255,107,0,0.15) !important;
  color: #ff6b00 !important;
  font-size: 0.8rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

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

/* ── MODAIS ── */
.modal-card, .card, .box {
  background: #111 !important;
  border: 1px solid rgba(255,107,0,0.2) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.7) !important;
}

.modal-card-head, .modal-card-foot {
  background: #161616 !important;
  border-color: rgba(255,255,255,0.08) !important;
}

.modal-card-title { color: #fff !important; font-weight: 700 !important; }
.modal-background { background: rgba(0,0,0,0.85) !important; }

/* ── INPUTS ── */
input, select, textarea,
.input, .textarea, .select select {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: #e0e0e0 !important;
  border-radius: 8px !important;
}

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

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

/* ── BOTÕES ── */
.button.is-primary, button.is-primary {
  background: #ff6b00 !important;
  border-color: #ff6b00 !important;
  color: #fff !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
}

.button.is-primary:hover { background: #e65c00 !important; }

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

.button:hover, button:hover {
  background: rgba(255,107,0,0.1) !important;
  border-color: #ff6b00 !important;
  color: #ff6b00 !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;
}
.notification.is-danger {
  background: rgba(220,38,38,0.1) !important;
  border: 1px solid rgba(220,38,38,0.3) !important;
  color: #f87171 !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;
}

/* ── LOGIN ── */
#login, .login-overlay, .login {
  background: #0a0a0a !important;
}

/* Logo no login */
#login img,
.login img,
.login-overlay img {
  content: url('/img/logo.png');
  max-width: 180px !important;
  margin-bottom: 24px !important;
}

.login .card, #login .card {
  background: #111 !important;
  border: 1px solid rgba(255,107,0,0.2) !important;
  border-radius: 16px !important;
  padding: 2rem !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.6) !important;
}

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

/* ── SELEÇÃO ── */
::selection { background: rgba(255,107,0,0.3) !important; color: #fff !important; }

/* ── UPLOAD DROP ZONE ── */
.dropzone, [class*="upload"], .upload {
  border: 2px dashed rgba(255,107,0,0.3) !important;
  background: rgba(255,107,0,0.04) !important;
  border-radius: 10px !important;
}
.dropzone:hover, .upload:hover {
  border-color: #ff6b00 !important;
  background: rgba(255,107,0,0.07) !important;
}

/* ── TEXTOS ── */
h1, h2, h3, h4, h5 { color: #fff !important; }
p { color: #ccc !important; }
a { color: #ff6b00 !important; }
a:hover { color: #ff8c33 !important; }

/* ── DROPDOWN ── */
.dropdown-content {
  background: #161616 !important;
  border: 1px solid rgba(255,107,0,0.2) !important;
  border-radius: 8px !important;
}
.dropdown-item:hover {
  background: rgba(255,107,0,0.08) !important;
  color: #ff6b00 !important;
}

/* ── PROGRESS ── */
progress { background: rgba(255,255,255,0.08) !important; }
progress::-webkit-progress-value { background: #ff6b00 !important; }