/* ============ teep Drive - identidade TEEP ============ */
:root {
  --teep-charcoal: #1a2e24;
  --teep-forest: #2d5040;
  --teep-medium: #4a7c5a;
  --teep-light: #6aab7a;
  --teep-bg: #f0f7f2;
  --blue: #2d5040;
  --dark-blue: #1a2e24;
}

/* ---------- LOGIN: palco em gradiente TEEP ---------- */
#login {
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(106,171,122,.35), transparent 60%),
    radial-gradient(900px 500px at 10% 110%, rgba(45,80,64,.5), transparent 60%),
    linear-gradient(135deg, #111a14 0%, #1e3328 40%, #2d5040 70%, #4a7c5a 100%) !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
/* brilho que segue o mouse (posicao via --mx/--my do teep-fx.js; parado no centro sem JS) */
#login::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(360px at calc(var(--mx, 50) * 1%) calc(var(--my, 42) * 1%), rgba(190,235,205,.14), transparent 65%) !important;
}

/* ===== CAMPO DE PARTICULAS EM CANVAS (final): desliga camadas CSS ===== */
#login::before, #login::after { display: none !important; }
#teep-stars {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
#login form { z-index: 1; }

/* entrada orquestrada do cartao */
@keyframes teep-rise {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to { opacity: 1; transform: none; }
}

/* ---------- LOGIN: cartao ---------- */
#login form {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  max-width: 24em !important;
  width: min(92vw, 24em) !important;
  background: #fff !important;
  border-radius: 16px !important;
  padding: 2.4em 2.2em 1.8em !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.12) !important;
  overflow: hidden;
  animation: teep-rise .55s cubic-bezier(.2,.7,.3,1) both;
}

/* barra de destaque no topo do cartao */
#login form::before {
  content: "";
  display: block;
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: linear-gradient(90deg, #2d5040, #4a7c5a, #6aab7a) !important;
}

/* logo horizontal (fundo transparente) */
#login img {
  width: min(13em, 72vw) !important;
  height: auto !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* titulo de texto oculto: o logo ja identifica */
#login h1 {
  display: none !important;
}

/* campos */
#login .input.input--block {
  border: 1.5px solid #c4ddc9 !important;
  border-radius: 10px !important;
  padding: .8em 1em !important;
  font-size: 1em !important;
  margin-top: .9em !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
}
#login .input.input--block:focus {
  border-color: #4a7c5a !important;
  box-shadow: 0 0 0 3px rgba(74,124,90,.18) !important;
  outline: none !important;
}

/* botao entrar */
#login .button.button--block {
  background: linear-gradient(180deg, #4a7c5a, #2d5040) !important;
  border: none !important;
  border-radius: 10px !important;
  padding: .85em !important;
  font-size: 1.02em !important;
  font-weight: 700 !important;
  letter-spacing: .03em;
  margin-top: 1.1em !important;
  box-shadow: 0 6px 16px rgba(45,80,64,.35) !important;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease !important;
}
#login .button.button--block:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(45,80,64,.45) !important;
}
#login .button.button--block:active { transform: translateY(0); }

/* revelacao escalonada dos campos */
#login form input.input, #login form input.button {
  animation: teep-rise .45s ease both;
}
#login form input:nth-of-type(1) { animation-delay: .1s; }
#login form input:nth-of-type(2) { animation-delay: .18s; }
#login form input:nth-of-type(3) { animation-delay: .26s; }
@media (prefers-reduced-motion: reduce) {
  #login form, #login form input.input, #login form input.button { animation: none !important; }
}

/* erro */
#login .wrong {
  border-radius: 10px !important;
  margin-top: .9em !important;
}

/* link criar conta */
#login p {
  color: #4a7c5a !important;
  text-align: center !important;
  margin-top: 1em !important;
}

/* rodape do cartao */
#login form::after {
  content: "Acesso restrito \2022  TEEP";
  display: block;
  text-align: center;
  font-size: .72em;
  letter-spacing: .08em;
  color: #8aa395;
  margin-top: 1.6em;
}

/* ---------- INTERNA: header e destaques ---------- */
body, #app { background: var(--teep-bg) !important; }
header, .header, nav.navbar, #navbar {
  background: linear-gradient(135deg, #1a2e24 0%, #2d5040 100%) !important;
  border-bottom: 2px solid #4a7c5a !important;
}
/* logo do header em pilula branca: o texto grafite some no fundo escuro */
header img {
  background: #fff !important;
  padding: .3em .8em !important;
  border-radius: 9px !important;
  height: 2.1em !important;
  width: auto !important;
  max-width: 34vw;
  object-fit: contain;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
header a, header button, header .action i, .header a { color: #fff !important; }
a { color: #2d5040 !important; }
a:hover { color: #4a7c5a !important; }
.button--primary, button.primary, button[type="submit"] {
  background: linear-gradient(180deg, #4a7c5a, #2d5040) !important;
  border-color: #2d5040 !important;
}
::-webkit-scrollbar-thumb { background: #4a7c5a !important; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #2d5040 !important; }

/* ---------- responsivo ---------- */
@media (max-width: 480px) {
  #login form { padding: 2em 1.4em 1.5em !important; }
}

/* ================================================================
   AREA LOGADA — visual moderno (contornos suaves + profundidade)
   ================================================================ */

/* botoes e campos: fim do "quadrado 0.1em" */
.button {
  border-radius: 10px !important;
  font-weight: 600 !important;
  padding: .6em 1.2em !important;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease !important;
}
.button:not([disabled]):hover { transform: translateY(-1px); filter: brightness(1.06); }
.button:not([disabled]):active { transform: translateY(0); }
.input {
  border-radius: 10px !important;
  padding: .6em 1em !important;
}
.input:focus {
  border-color: #4a7c5a !important;
  box-shadow: 0 0 0 3px rgba(74,124,90,.16) !important;
  outline: none !important;
}

/* lista de arquivos: linhas viram cartoes com respiro */
#listing.list { gap: .55em !important; padding: .9em .9em 5em !important; }
#listing.list .item:not(.header):not([aria-selected="true"]) {
  border: 1px solid rgba(26,46,36,.08) !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(26,46,36,.06) !important;
  transition: transform .13s ease, box-shadow .13s ease, border-color .13s ease !important;
}
#listing.list .item:not(.header):hover {
  transform: translateY(-1px);
  border-color: rgba(74,124,90,.45) !important;
  box-shadow: 0 8px 20px rgba(26,46,36,.12) !important;
}
#listing.list .item .name { font-weight: 600 !important; color: #1a2e24 !important; }
#listing.list .item .size, #listing.list .item .modified { color: #6b8c78 !important; }
/* cabecalho de ordenacao: flutuante e discreto */
#listing.list .item.header {
  border: 0 !important;
  border-radius: 10px !important;
  background: rgba(26,46,36,.05) !important;
}
/* selecionado: seletor propositalmente mais especifico que a regra branca acima */
#listing.list .item[aria-selected="true"]:not(.header) {
  background: linear-gradient(135deg, #1e3328, #2d5040) !important;
  border-color: #4a7c5a !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 20px rgba(26,46,36,.35) !important;
}
/* selecionado: texto e icones sempre brancos sobre o fundo escuro */
#listing.list .item[aria-selected="true"] .name,
#listing.list .item[aria-selected="true"] .size,
#listing.list .item[aria-selected="true"] .modified,
#listing.list .item[aria-selected="true"] p,
#listing.list .item[aria-selected="true"] i,
#listing.list .item[aria-selected="true"] a {
  color: #fff !important;
}

/* mosaico: cartoes mais suaves */
#listing.mosaic .item {
  border-radius: 16px !important;
  border: 1px solid rgba(26,46,36,.08) !important;
  transition: transform .13s ease, box-shadow .13s ease !important;
}
#listing.mosaic .item:hover { transform: translateY(-2px); }

/* busca no header: pilula translucida */
#search #input {
  border-radius: 999px !important;
  background: rgba(255,255,255,.13) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
}
#search input { color: #fff !important; }
#search #input input::placeholder { color: rgba(255,255,255,.65) !important; }
#search #input > i, #search #input > .action { color: #fff !important; }
#search #input > .action:hover { background: rgba(255,255,255,.18) !important; }

/* barra lateral: itens arredondados com micro-interacao */
nav .action {
  border-radius: 12px !important;
  transition: background .13s ease, transform .13s ease !important;
}
nav .action:hover { background: rgba(74,124,90,.13) !important; transform: translateX(2px); }
/* sidebar: rolagem vertical discreta, nunca horizontal */
nav {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-width: thin;
  scrollbar-color: #4a7c5a transparent;
  padding-bottom: 1em !important;
}
nav::-webkit-scrollbar { width: 6px !important; }
nav::-webkit-scrollbar-track { background: transparent !important; }
nav::-webkit-scrollbar-thumb { background: rgba(74,124,90,.45) !important; border-radius: 3px; }
nav::-webkit-scrollbar-thumb:hover { background: #2d5040 !important; }
/* rodape "File Browser / Ajuda" oculto (medidor de disco preservado) */
nav p.credits { display: none !important; }

/* modais e cartoes: cantos suaves + entrada com escala */
.card { border-radius: 18px !important; }
.card.floating {
  border-radius: 18px !important;
  box-shadow: 0 24px 60px rgba(26,46,36,.28) !important;
  border: 1px solid rgba(26,46,36,.08) !important;
  animation: teep-pop .22s cubic-bezier(.2,.7,.3,1.2) both;
}
@keyframes teep-pop {
  from { opacity: 0; transform: scale(.96) translateY(8px); }
  to { opacity: 1; transform: none; }
}
/* barra de selecao multipla: flutuante arredondada */
#listing #multiple-selection {
  border-radius: 16px 16px 0 0 !important;
  background: linear-gradient(135deg, #1a2e24, #2d5040) !important;
}

@media (prefers-reduced-motion: reduce) {
  .button, #listing.list .item, #listing.mosaic .item,
  nav .action, .card.floating { animation: none !important; transition: none !important; }
  .button:not([disabled]):hover, #listing.list .item:not(.header):hover,
  #listing.mosaic .item:hover { transform: none !important; }
}