/* ===========================================================
   Nauas Cloud — tema escuro moderno (igual ao app/agente)
   =========================================================== */
:root {
  --bg: #0b1220;
  --surface: #0f1b2e;      /* cards */
  --surface-2: #13233b;
  --ink: #e2e8f0;          /* texto principal */
  --muted: #94a3b8;
  --line: #1e293b;
  --accent: #10b981;       /* esmeralda */
  --accent-2: #0ea5e9;     /* ciano */
  --teal: #0d9488;
  --radius: 14px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
  --shadow-md: 0 14px 40px rgba(0,0,0,.45);
}

body {
  background: radial-gradient(1200px 600px at 50% -10%, #15324a 0%, #0b1a2c 55%, var(--bg) 100%) fixed;
  color: var(--ink);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  letter-spacing: -.01em;
  min-height: 100vh;
}
h1,h2,h3,h4,h5,h6,.fw-bold,.fw-semibold { letter-spacing: -.02em; color: var(--ink); }
a { color: #5eead4; }
a:hover { color: #99f6e4; }
.text-muted { color: var(--muted) !important; }

/* ---------- Navbar ---------- */
.navbar.bg-dark {
  background: #0f172a !important;
  border-bottom: 1px solid var(--line);
  backdrop-filter: saturate(140%) blur(8px);
}
.navbar-brand { letter-spacing: -.02em; }
.navbar-brand i { color: var(--accent); }
.navbar-dark .nav-link { border-radius: 10px; padding-left:.7rem; padding-right:.7rem; color:#cbd5e1; }
.navbar-dark .nav-link:hover { background: #ffffff10; color:#fff; }

/* ---------- Cards / superfícies ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
}
.card-header { background: transparent; border-bottom: 1px solid var(--line); font-weight: 600; color: var(--ink); }
.list-group-item { background: var(--surface); border-color: var(--line); color: var(--ink); }
.breadcrumb { --bs-breadcrumb-divider-color: var(--muted); }
.table { --bs-table-color: var(--ink); --bs-table-bg: transparent; --bs-table-border-color: var(--line); }
.table-light, .table > :not(caption) > * > * { background-color: transparent; color: var(--ink); }
thead.table-light th, .table-light th { background: #0e1a2c !important; color: var(--muted) !important; border-color: var(--line) !important; }
.table-hover > tbody > tr:hover > * { background-color: #ffffff08; color: var(--ink); }
.modal-content { background: var(--surface); color: var(--ink); border:1px solid var(--line); }

/* ---------- Botões ---------- */
.btn { border-radius: 11px; font-weight: 500; }
.btn-dark {
  background: linear-gradient(135deg, var(--accent) 0%, var(--teal) 100%);
  border: none; color: #04221a;
  box-shadow: 0 4px 14px rgba(16,185,129,.28);
}
.btn-dark:hover, .btn-dark:focus, .btn-dark:active {
  background: linear-gradient(135deg, #0ea371 0%, #0b7d6e 100%) !important; color:#04221a !important;
}
.btn-outline-dark, .btn-outline-secondary { border-color: var(--line); color: var(--ink); }
.btn-outline-dark:hover, .btn-outline-secondary:hover { background: var(--surface-2); color:#fff; border-color:#334155; }
.btn-light { background:#e2e8f0; color:#0b1220; border:0; }
.btn-outline-light { border-color:#ffffff44; color:#fff; }

/* ---------- Inputs ---------- */
.form-control, .form-select {
  background: #0f1b2e; border-color: var(--line); color: var(--ink); border-radius: 11px; padding:.55rem .85rem;
}
.form-control::placeholder { color:#64748b; }
.form-control:focus, .form-select:focus {
  background:#0f1b2e; color: var(--ink); border-color: var(--accent);
  box-shadow: 0 0 0 .2rem rgba(16,185,129,.2);
}
.input-group-text { background: var(--surface-2); border-color: var(--line); color: var(--muted); }

/* ---------- Badges / paginação ---------- */
.badge.text-bg-light { background:#1e293b !important; color:#cbd5e1 !important; border:1px solid #243247; }
.page-link { color:#5eead4; background: var(--surface); border-color: var(--line); border-radius:10px !important; margin:0 2px; }
.page-item.active .page-link { background: var(--accent); border-color: var(--accent); color:#04221a; }
.page-item.disabled .page-link { background: var(--surface); color:#475569; }

/* ---------- Cartões de arquivo (galeria) ---------- */
.card-arquivo { transition: transform .1s ease, box-shadow .1s ease; overflow:hidden; }
.card-arquivo:hover { transform: translateY(-3px); box-shadow: var(--shadow-md) !important; border-color:#2a3b55; }
.thumb-wrap { height:168px; overflow:hidden; background:#0b1524; display:flex; align-items:center; justify-content:center; }
.thumb-wrap img { width:100%; height:100%; object-fit:cover; }
.thumb-icone { text-align:center; color: var(--muted); }
.thumb-icone i { font-size:3.2rem; display:block; }
.thumb-icone .ext { font-size:.72rem; font-weight:600; letter-spacing:.06em; }
.thumb-video { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#fff; background:linear-gradient(135deg,#0d9488,#0ea5e9); }
.thumb-video i { font-size:3rem; }

/* ---------- Hero / seções ---------- */
.hero { position:relative; overflow:hidden; border-radius:18px; padding:1.6rem 1.8rem; color:#fff;
  background:linear-gradient(100deg,#0d9488 0%,#0ea5e9 100%); box-shadow:0 14px 40px rgba(14,165,233,.22); }
.hero-conteudo { position:relative; z-index:2; display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between; }
.hero-ola { font-size:.95rem; color:#d1fae5; }
.hero-titulo { font-weight:700; margin:.1rem 0 .15rem; color:#fff; }
.hero-sub { color:#ecfeff; opacity:.92; }
.hero-acoes { display:flex; gap:.5rem; flex-wrap:wrap; }
.hero-acoes .btn-light { color:#064e45; }
.hero-marca { position:absolute; right:-1rem; bottom:-2.5rem; font-size:12rem; opacity:.14; z-index:1; transform:rotate(-8deg); }
.secao-titulo { text-transform:uppercase; letter-spacing:.04em; font-size:.8rem; color:var(--muted); font-weight:600; margin:.25rem 0 .9rem; }

/* tiles de estatística */
.stat-tile { display:block; text-decoration:none; color:#fff; border-radius:16px; padding:1.1rem 1.2rem; height:100%;
  box-shadow:var(--shadow-sm); transition:transform .12s ease, box-shadow .12s ease; }
.stat-tile:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); color:#fff; }
.stat-tile > i { font-size:1.5rem; opacity:.95; }
.stat-num { font-size:1.7rem; font-weight:700; line-height:1.1; margin-top:.25rem; }
.stat-rot { font-size:.85rem; opacity:.92; }
.tile-azul  { background:linear-gradient(135deg,#0ea5e9,#38bdf8); }
.tile-roxo  { background:linear-gradient(135deg,#0d9488,#0ea5e9); }
.tile-verde { background:linear-gradient(135deg,#059669,#34d399); }
.tile-rosa  { background:linear-gradient(135deg,#14b8a6,#2dd4bf); }

/* cartões de categoria */
.cat-card { display:flex; flex-direction:column; align-items:center; gap:.35rem; background:var(--surface);
  border:1px solid var(--line); border-radius:16px; padding:1rem .5rem; height:100%; text-align:center; box-shadow:var(--shadow-sm);
  transition:transform .1s ease, box-shadow .1s ease; }
.cat-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:#2a3b55; }
.cat-icone { width:3rem; height:3rem; border-radius:14px; display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; color:#fff !important; background:linear-gradient(135deg,#0d9488,#0ea5e9) !important; }
.cat-nome { font-weight:600; font-size:.9rem; color:var(--ink); }

/* chips de categoria (filtro) */
.chip { display:inline-flex; align-items:center; gap:.3rem; border:1px solid var(--line); border-radius:2rem;
  padding:.3rem .8rem; background:var(--surface); color:var(--ink); text-decoration:none; font-size:.9rem;
  transition:border-color .1s ease, background-color .1s ease; }
.chip:hover { border-color:var(--accent); color:var(--ink); }
.chip.ativa { background:var(--accent); color:#04221a; border-color:var(--accent); }
.chip.ativa .badge { background:#ffffff33 !important; color:#04221a !important; }

/* chips de pasta (drop targets) */
.folder-chip { display:inline-flex; align-items:center; gap:.2rem; border:1px solid var(--line); border-radius:2rem;
  padding:.3rem .85rem; background:var(--surface); box-shadow:var(--shadow-sm); color:var(--ink);
  transition:border-color .1s ease, background-color .1s ease, transform .1s ease; }
.folder-chip.ativa { border-color:var(--accent); }
.folder-chip.alvo { border-color:var(--accent); background:rgba(16,185,129,.15); transform:scale(1.05); }
.card-arquivo.js-arrastar { cursor:grab; }
.card-arquivo.arrastando { opacity:.4; }

/* ---------- Painel de Backup (estilo Veeam, no tema escuro) ---------- */
.veeam-hero { border-radius:16px; overflow:hidden; background:linear-gradient(120deg,#064e3b 0%,#0d9488 55%,#0ea5e9 100%);
  color:#fff; box-shadow:0 10px 30px rgba(0,0,0,.4); }
.vh-topo { display:flex; align-items:center; justify-content:space-between; padding:1rem 1.3rem; border-bottom:1px solid #ffffff1f; flex-wrap:wrap; gap:.5rem; }
.vh-ola { font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; color:#99f6e4; }
.vh-tiles { display:flex; flex-wrap:wrap; }
.vh-tile { flex:1 1 20%; min-width:110px; padding:.9rem 1.2rem; border-right:1px solid #ffffff14; }
.vh-tile:last-child { border-right:0; }
.vh-num { font-size:1.6rem; font-weight:700; line-height:1; color:#fff; }
.vh-rot { font-size:.8rem; color:#c9efe4; margin-top:.2rem; }
.vh-tile.ok .vh-num { color:#6ee7b7; }
.vh-tile.warn .vh-num { color:#fbbf24; }

.job-grid thead th { font-size:.78rem; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); border-bottom:2px solid var(--line); }
.dot { display:inline-block; width:.8rem; height:.8rem; border-radius:50%; }
.dot-success { background:#22c55e; box-shadow:0 0 0 3px #22c55e33; }
.dot-warning { background:#f59e0b; box-shadow:0 0 0 3px #f59e0b33; }
.dot-danger  { background:#ef4444; box-shadow:0 0 0 3px #ef444433; }
.dot-secondary { background:#64748b; box-shadow:0 0 0 3px #64748b33; }

/* ---------- Visualizador de mídia (lightbox) ---------- */
.lightbox { position:fixed; inset:0; z-index:1080; background:rgba(5,8,16,.95); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; }
.lightbox[hidden] { display:none; }
.lb-figura { margin:0; max-width:92vw; max-height:92vh; text-align:center; }
.lb-figura img, .lb-figura video { max-width:92vw; max-height:82vh; object-fit:contain; border-radius:12px; box-shadow:0 12px 48px rgba(0,0,0,.6); background:#000; }
.lb-figura figcaption { color:#e9f5f1; margin-top:.85rem; font-size:.95rem; }
.lb-fechar { position:absolute; top:1rem; right:1rem; font-size:1.4rem; }
.lb-nav { position:absolute; top:50%; transform:translateY(-50%); font-size:1.8rem; }
.lb-ant { left:1.25rem; } .lb-prox { right:1.25rem; }
.lb-fechar, .lb-nav { background:#ffffff1f; color:#fff; border:0; width:3rem; height:3rem; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.lb-fechar:hover, .lb-nav:hover { background:#ffffff36; }
.lb-acoes { position:absolute; bottom:1.4rem; left:50%; transform:translateX(-50%); display:flex; gap:.5rem; }

/* recentes ocultos (olho do painel) */
.recentes-ocultos .card-arquivo { filter:blur(14px); pointer-events:none; user-select:none; }

/* arrastar-e-soltar (envio) */
.dropzone { display:block; width:100%; border:2px dashed #334155; border-radius:14px; padding:1.75rem 1rem; text-align:center; color:var(--muted); cursor:pointer; transition:border-color .1s ease, background-color .1s ease, color .1s ease; }
.dropzone:hover { border-color:var(--accent); }
.dropzone.drag { border-color:var(--accent); background:rgba(16,185,129,.1); color:#6ee7b7; }
.dropzone .bi-cloud-arrow-up { font-size:2rem; display:block; margin-bottom:.25rem; }

/* status coloridos na grade de jobs */
.job-grid .badge.text-bg-success { background-color:#16a34a !important; color:#fff !important; }
.job-grid .badge.text-bg-warning { background-color:#d97706 !important; color:#fff !important; }
.job-grid .badge.text-bg-secondary { background-color:#475569 !important; color:#e2e8f0 !important; }

/* ---------- Responsivo ---------- */
@media (max-width: 575.98px) {
  main.container { padding-left:.75rem; padding-right:.75rem; }
  .thumb-wrap { height:130px; }
  .hero-titulo { font-size:1.25rem; }
  .hero-acoes .btn { flex:1; }
  .vh-tile { flex-basis:50%; }
  .stat-num { font-size:1.35rem; }
}