/* ============================================================
   Pacenote · Second Brain — tema do File Browser
   Front-end only. Identidade Pacenote: tinta + vermelho-fogo + verde.
   Recomendado usar junto com:  --branding.theme dark
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root,
[data-theme="dark"],
[data-theme="light"] {
  /* troca o azul padrão do File Browser pelo vermelho-fogo */
  --blue: #E11507 !important;
  --dark-blue: #A50D04 !important;
  --primary: #E11507 !important;
  --accent: #E11507 !important;

  --pn-fogo: #E11507;
  --pn-fogo-deep: #A50D04;
  --pn-alta: #0ECB81;
  --pn-tinta: #131417;

  /* checkboxes / inputs nativos */
  accent-color: #E11507;
}

/* ---------- tipografia ---------- */
body, input, button, textarea, select, .message, .card, td, th {
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}
h1, h2, h3, .breadcrumbs, .card-title, nav > .title, header .title {
  font-family: 'Space Grotesk', sans-serif !important;
  letter-spacing: -0.3px;
}
.size, .modified, .name code, code, .clip, #editor .ace_editor {
  font-family: 'JetBrains Mono', monospace !important;
}

/* ---------- botões primários ---------- */
.button--flat { color: var(--pn-fogo) !important; }
.button.button--flat.button--blue,
.button.button--blue,
.action.copy-toggle,
input[type="submit"] {
  background: var(--pn-fogo) !important;
  color: #fff !important;
  border-color: var(--pn-fogo) !important;
}
.button.button--blue:hover,
input[type="submit"]:hover { background: var(--pn-fogo-deep) !important; }

/* ações positivas em verde (criar pasta, upload, salvar) */
.action#upload-button:hover i,
.action#save-button i { color: var(--pn-alta) !important; }

/* ---------- tela de login ---------- */
#login {
  background:
    radial-gradient(1200px 480px at 50% -10%, rgba(225,21,7,.10), transparent 60%),
    var(--pn-tinta) !important;
}
#login .card {
  border-top: 3px solid var(--pn-fogo) !important;
  border-radius: 10px !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.45) !important;
}
#login .card .button,
#login button[type="submit"],
#login input[type="submit"] {
  background: var(--pn-fogo) !important;
  color: #fff !important;
  font-family: 'Space Grotesk', sans-serif !important;
  letter-spacing: .3px;
}
#login .card .button:hover { background: var(--pn-fogo-deep) !important; }
#login .wrong { background: var(--pn-fogo-deep) !important; }

/* logo do login um pouco maior e centralizado */
#login img { height: 64px !important; width: auto !important; }

/* ---------- links / estados ativos ---------- */
a, .link, .breadcrumbs a { color: var(--pn-fogo) !important; }
nav .active,
nav a.active,
#sidebar .active,
.active > * { color: var(--pn-fogo) !important; }
nav .active::before { background: var(--pn-fogo) !important; }

/* item selecionado na listagem */
#listing .item[aria-selected="true"] {
  background: rgba(225,21,7,.14) !important;
  border-color: rgba(225,21,7,.45) !important;
}
#listing .item[aria-selected="true"] .material-icons,
#listing .item[aria-selected="true"] .name { color: #fff !important; }

/* pastas no tom da marca para reforçar identidade */
#listing .item[data-dir="true"] div i { color: var(--pn-fogo) !important; }

/* ---------- barra de progresso / loaders ---------- */
.progress div { background: var(--pn-fogo) !important; }
#progress, .spinner .bounce1, .spinner .bounce2, .spinner .bounce3 {
  background: var(--pn-fogo) !important;
}

/* ---------- checkbox custom do File Browser ---------- */
.checkbox label::after { border-color: #fff !important; }
input[type="checkbox"]:checked + label,
.checkbox input:checked ~ label::before {
  background: var(--pn-fogo) !important;
  border-color: var(--pn-fogo) !important;
}

/* ---------- scrollbar ---------- */
::-webkit-scrollbar-thumb { background: rgba(225,21,7,.55) !important; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--pn-fogo) !important; }

/* ---------- foco de inputs ---------- */
input:focus, textarea:focus, .input:focus {
  border-color: var(--pn-fogo) !important;
  box-shadow: 0 0 0 2px rgba(225,21,7,.25) !important;
}