/* ─── Google Fonts: Sora ─────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600&display=swap');

@font-face {
  font-family: 'Quetine';
  src: url('/assets/fonts/Quetine-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

/* ─── CSS Variables ─────────────────────────────────────────── */
:root {
  --recanto-blue:        #1d19c7;
  --recanto-blue-hover:  #1612a8;
  --recanto-blue-light:  rgba(29, 25, 199, 0.08);
  --recanto-blue-dark:   #002051;

  --recanto-orange:       #f6650f;
  --recanto-orange-hover: #d85708;
  --recanto-orange-light: rgba(246, 101, 15, 0.1);

  --recanto-text:       #1a1a1a;
  --recanto-bg:         #eaeceb;
  --recanto-card:       #ffffff;
  --recanto-border:     #e5e7eb;
  --recanto-text-muted: #6b7280;

  --color-success: #16A34A;
  --color-warning: #f6650f;
  --color-danger:  #DC2626;
  --color-info:    var(--recanto-blue);

  /* Aliases */
  --primary:       var(--recanto-blue);
  --primary-hover: var(--recanto-blue-hover);
  --bg:            var(--recanto-bg);
  --surface:       var(--recanto-card);
  --border:        var(--recanto-border);
  --text:          var(--recanto-text);
  --muted:         var(--recanto-text-muted);
  --radius:        8px;
  --success:       var(--color-success);
  --danger:        var(--color-danger);
  --warning:       var(--color-warning);
}

/* ─── Typography ─────────────────────────────────────────────── */
body {
  font-family: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

/* ─── Page transition ────────────────────────────────────────── */
@keyframes sbPageIn {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: translateY(0);   }
}

/* ─── App Shell ─────────────────────────────────────────────── */
.app-shell {
  display: flex;
  height: 100vh;
  overflow: hidden;
  background: var(--recanto-bg);
}

.app-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  animation: sbPageIn 210ms ease forwards;
}
.app-content > header  { flex-shrink: 0; }
.app-content > main    { flex: 1; overflow-y: auto; }
.app-content > .layout { flex: 1; overflow: hidden; display: flex; }

/* ─── Backdrop ───────────────────────────────────────────────── */
#sb-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 15;
}
#sb-backdrop.open { display: block; }

/* ─── Sidebar: trilho + painel (v8) ──────────────────────────
   #app-sidebar deixou de ser a coluna única de 240px: agora é o CONTÊINER
   flex-row que abriga o trilho de módulos (navy, 92px) e o painel de itens
   (branco, 248px). O markup das páginas NÃO mudou — quem monta os dois
   dentro dele é o sidebar.js.                                             */
:root {
  --sb-rail-w:  92px;
  --sb-panel-w: 248px;
  --sb-tint:    #ececfa;   /* fundo do item ativo */
  --sb-ease:    cubic-bezier(.2, .8, .2, 1);
}

/* O projeto não tem `*{box-sizing:border-box}` global — sem isto, o padding do
   trilho somaria 16px à largura e a borda do painel somaria 1px, estourando as
   medidas de --sb-rail-w / --sb-panel-w. Escopado só na subárvore do menu de
   propósito: uma regra global mudaria o layout de todas as páginas. */
#app-sidebar,
#app-sidebar *,
.sb-account-pop,
.sb-account-pop * { box-sizing: border-box; }

#app-sidebar {
  display: flex;
  flex-direction: row;
  flex-shrink: 0;
  width: auto;
  height: 100%;
  overflow: visible;
  position: relative;
  z-index: 20;
  background: none;
  border-right: 0;
  box-shadow: none;
}

/* ── Trilho de módulos ─────────────────────────────────────── */
.sb-rail {
  width: var(--sb-rail-w);
  flex: none;
  background: var(--recanto-blue-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 8px;
  gap: 4px;
  position: relative;
  z-index: 2;
}

.sb-rail-logo {
  height: 54px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}
/* Símbolo branco sobre a navy. brightness(0) achata azul e laranja para preto e
   invert(1) leva para branco; o alpha é preservado, então o vazado interno do
   símbolo continua transparente e a forma se mantém (o PNG é 76,7% transparente
   e não tem branco opaco — verificado).
   Se entrar o arquivo oficial do símbolo em branco (manual de marca), trocar o
   src no sidebar.js e remover este filtro. */
.sb-rail-logo img {
  width: 40px;
  height: auto;
  display: block;
  filter: brightness(0) invert(1);
}
.sb-logo-fallback {
  width: 38px; height: 38px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.14);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 17px;
  font-family: 'Sora', sans-serif;
}

.sb-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 76px;
  min-height: 62px;
  padding: 6px 2px;
  flex: none;
  border: 0;
  border-radius: 14px;
  background: none;
  color: rgba(255, 255, 255, 0.72);
  font-family: 'Sora', sans-serif;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  transition: background 180ms var(--sb-ease), color 180ms var(--sb-ease);
}
.sb-tile-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.15;
  text-align: center;
}
.sb-tile svg { width: 23px; height: 23px; stroke-width: 1.75; }
.sb-tile:hover { background: rgba(255, 255, 255, 0.10); color: #fff; }
.sb-tile:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Branco preenchido = módulo cujo submenu está aberto, ou seja, o que você
   clicou no trilho. É o ÚNICO realce do trilho, de propósito.
   O `aria-current="page"` continua no HTML (semântica correta para leitor de
   tela: diz em qual módulo está a página aberta) mas NÃO tem estilo — dois
   realces competindo confundiam mais do que informavam. */
.sb-tile.panel-open { background: #fff; color: var(--recanto-blue); }

.sb-rail-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

/* Avatar da conta — abre o popover com identidade e "Sair" */
.sb-avatar {
  width: 36px; height: 36px;
  flex: none;
  margin-top: 6px;
  border-radius: 999px;
  border: 2px solid transparent;
  background: var(--recanto-blue);
  color: #fff;
  font-family: 'Sora', sans-serif;
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: border-color 140ms var(--sb-ease);
}
.sb-avatar:hover,
.sb-avatar[aria-expanded="true"] { border-color: rgba(255, 255, 255, 0.55); }
.sb-avatar:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Botão de expandir — só aparece com o painel recolhido, colado na borda
   do trilho. Sem ele, quem estivesse num módulo de item único (Início,
   Resultados) não teria como trazer o painel de volta. */
.sb-expand {
  display: none;
  position: absolute;
  right: -13px; top: 50%;
  transform: translateY(-50%);
  width: 26px; height: 26px;
  border: 1px solid var(--recanto-border);
  border-radius: 999px;
  background: #fff;
  color: var(--recanto-text-muted);
  align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 3;
  box-shadow: 0 2px 8px rgba(0, 32, 81, 0.14);
  transition: color 140ms var(--sb-ease), border-color 140ms var(--sb-ease);
}
.sb-expand svg { width: 15px; height: 15px; }
.sb-expand:hover { color: var(--recanto-blue); border-color: var(--recanto-blue); }
#app-sidebar.panel-collapsed .sb-expand { display: flex; }

/* ── Painel de itens do módulo ──────────────────────────────── */
.sb-panel {
  width: var(--sb-panel-w);
  flex: none;
  background: var(--recanto-card);
  border-right: 1px solid var(--recanto-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width 220ms var(--sb-ease);
}
#app-sidebar.panel-collapsed .sb-panel { width: 0; border-right: 0; }

.sb-panel-head {
  height: 56px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px 0 18px;
  border-bottom: 1px solid var(--recanto-border);
}
.sb-panel-title {
  flex: 1;
  min-width: 0;
  font-family: 'Sora', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--recanto-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sb-collapse {
  width: 32px; height: 32px;
  flex: none;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--recanto-text-muted);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 140ms var(--sb-ease), color 140ms var(--sb-ease);
}
.sb-collapse svg { width: 18px; height: 18px; }
.sb-collapse:hover { background: #f2f3f7; color: var(--recanto-text); }

.sb-nav {
  flex: 1;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--recanto-border) transparent;
}

.sb-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 10px;
  font-family: 'Sora', sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--recanto-text);
  text-align: left;
  text-decoration: none;
  transition: background 160ms var(--sb-ease);
}
.sb-item svg {
  width: 19px; height: 19px;
  flex: none;
  color: var(--recanto-text-muted);
  stroke-width: 1.75;
  transition: color 160ms var(--sb-ease);
}
.sb-label { flex: 1; min-width: 0; }
.sb-item:hover { background: #f2f3f7; }
.sb-item:hover svg { color: var(--recanto-text); }
.sb-item:focus-visible { outline: 2px solid var(--recanto-blue); outline-offset: -2px; }
.sb-item[aria-current="page"] {
  background: var(--sb-tint);
  color: var(--recanto-blue);
  font-weight: 600;
}
.sb-item[aria-current="page"] svg { color: var(--recanto-blue); }

/* ── Popover da conta (avatar do trilho) ────────────────────── */
.sb-account-pop {
  display: none;
  position: fixed;
  z-index: 400;
  min-width: 214px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--recanto-border);
  border-radius: 12px;
  box-shadow: 0 14px 40px rgba(0, 32, 81, 0.20);
  font-family: 'Sora', sans-serif;
}
.sb-account-pop.open { display: block; }
.sb-account-id {
  padding: 10px 12px 11px;
  border-bottom: 1px solid var(--recanto-border);
  margin-bottom: 5px;
}
.sb-account-name {
  font-size: 13px; font-weight: 600;
  color: var(--recanto-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sb-account-role {
  font-size: 11.5px;
  color: var(--recanto-text-muted);
  margin-top: 1px;
}
.sb-account-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 38px;
  padding: 8px 12px;
  border: 0;
  border-radius: 10px;
  background: none;
  font-family: 'Sora', sans-serif;
  font-size: 13px;
  color: var(--recanto-text-muted);
  text-align: left;
  cursor: pointer;
  transition: background 140ms var(--sb-ease), color 140ms var(--sb-ease);
}
.sb-account-item svg { width: 18px; height: 18px; flex: none; }
.sb-account-item:hover { background: #f2f3f7; color: var(--recanto-text); }


/* ─── Login Screen ──────────────────────────────────────────── */
#login-screen {
  min-height: 100vh;
  background: linear-gradient(145deg, var(--recanto-blue-dark) 0%, var(--recanto-blue) 55%, #0d0b5e 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.login-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 48px 40px 36px;
  width: 400px;
  max-width: 100%;
  box-shadow: 0 24px 64px rgba(0,0,0,0.35), 0 4px 16px rgba(0,0,0,0.15);
}

.login-logo {
  text-align: center;
  margin-bottom: 28px;
}
.login-logo img {
  height: 48px;
  width: auto;
}
.login-welcome {
  font-size: 22px;
  font-weight: 600;
  color: var(--recanto-text);
  margin-bottom: 4px;
  font-family: 'Sora', sans-serif;
}
.login-company {
  font-size: 12px;
  color: var(--recanto-text-muted);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: 32px;
  font-family: 'Sora', sans-serif;
}
.login-input {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid #e5e7eb;
  border-radius: 8px;
  font-size: 14px;
  font-family: 'Sora', sans-serif;
  margin-bottom: 12px;
  color: var(--recanto-text);
  background: #fff;
  transition: border-color 200ms ease, box-shadow 200ms ease;
  outline: none;
  box-sizing: border-box;
  display: block;
}
.login-input:focus {
  border-color: var(--recanto-blue);
  box-shadow: 0 0 0 3px rgba(29,25,199,0.12);
}
.login-btn {
  width: 100%;
  padding: 13px;
  background: var(--recanto-blue);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  font-family: 'Sora', sans-serif;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  cursor: pointer;
  transition: background 200ms ease, transform 150ms ease, box-shadow 200ms ease;
  margin-top: 4px;
  display: block;
}
.login-btn:hover {
  background: var(--recanto-blue-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(29,25,199,0.35);
}
.login-btn:active { transform: translateY(0); box-shadow: none; }
.login-error {
  color: var(--color-danger);
  font-size: 13px;
  margin-top: 10px;
  min-height: 18px;
  font-family: 'Sora', sans-serif;
}
.login-version {
  color: rgba(255,255,255,0.4);
  font-size: 12px;
  margin-top: 22px;
  text-align: center;
  font-family: 'Sora', sans-serif;
}

/* ─── Global btn-primary ─────────────────────────────────────── */
.btn-primary {
  background: var(--recanto-blue) !important;
  color: #ffffff !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500 !important;
  transition: background 200ms ease, transform 120ms ease, box-shadow 200ms ease !important;
}
.btn-primary:hover {
  background: var(--recanto-blue-hover) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(29,25,199,0.3);
}

/* ─── Mobile hamburger ──────────────────────────────────────── */
.mobile-menu-btn {
  display: none;
  padding: 6px 10px;
  background: none;
  border: 1px solid var(--recanto-border);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 16px;
  color: var(--recanto-text);
  margin-right: 6px;
  flex-shrink: 0;
  transition: background 150ms ease;
}
.mobile-menu-btn:hover { background: var(--recanto-bg); }

/* ─── Mobile: trilho fixo + painel em drawer ─────────────────
   O trilho fica sempre visível (76px) e o painel entra por cima do conteúdo.
   O botão ☰ das páginas e o #sb-backdrop continuam chamando
   sidebarToggleMobile() — só que agora ele abre/fecha o PAINEL.
   Breakpoint em 820px (era 768) para o trilho + painel não brigarem com
   tablets em retrato.                                                      */
@media (max-width: 820px) {
  :root { --sb-rail-w: 76px; }

  .mobile-menu-btn {
    display: inline-flex;
    align-items: center;
  }

  #app-sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    height: 100%;
    width: auto;
    z-index: 22;
  }

  .sb-tile { width: 64px; min-height: 56px; }
  .sb-tile-label { font-size: 9px; }
  .sb-rail { box-shadow: 2px 0 12px rgba(0, 32, 81, 0.18); }
  /* no mobile o painel é drawer: quem o mostra é sidebarToggleMobile() */
  .sb-expand { display: none !important; }

  .sb-panel {
    position: fixed;
    top: 0; bottom: 0;
    left: var(--sb-rail-w);
    width: var(--sb-panel-w);
    transform: translateX(calc(-100% - var(--sb-rail-w)));
    box-shadow: 8px 0 28px rgba(0, 32, 81, 0.18);
    transition: transform 240ms var(--sb-ease);
  }
  #app-sidebar.drawer-open .sb-panel { transform: translateX(0); }
  /* recolher no desktop não deve zerar a largura do drawer no mobile */
  #app-sidebar.panel-collapsed .sb-panel {
    width: var(--sb-panel-w);
    border-right: 1px solid var(--recanto-border);
  }
  #app-sidebar.no-panel .sb-panel { display: none; }

  /* o trilho é fixed (fora do fluxo) — o conteúdo precisa do recuo */
  .app-content { margin-left: var(--sb-rail-w); }
}

/* ─── Notificações (sino) ────────────────────────────────────
   O sino virou um tile do trilho (id sb-notif-btn preservado, então o
   posicionamento e o polling do painel continuam valendo). Ele saiu do
   rodapé do painel de propósito: o painel pode estar recolhido — ou não
   existir, para perfis cujos módulos têm um item só (Recebedor,
   Solicitante) — e o aviso ficaria inalcançável.                          */
.sb-notif-badge {
  position: absolute;
  top: 4px;
  right: 14px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  border: 2px solid var(--recanto-blue-dark);
  background: var(--recanto-orange);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.sb-notif-panel {
  display: none;
  position: fixed;
  z-index: 400;
  width: 340px;
  max-width: calc(100vw - 24px);
  max-height: 70vh;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--recanto-border);
  border-radius: 10px;
  box-shadow: 0 10px 32px rgba(0,0,0,0.16);
  font-family: 'Sora', sans-serif;
}
.sb-notif-panel.open { display: block; }

.sb-notif-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--recanto-text-muted);
  border-bottom: 1px solid var(--recanto-border);
  position: sticky;
  top: 0;
  background: #fff;
}
.sb-notif-markall {
  background: none;
  border: none;
  color: var(--recanto-blue);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  padding: 0;
}
.sb-notif-markall:hover { text-decoration: underline; }

.sb-notif-list { display: flex; flex-direction: column; }
.sb-notif-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--recanto-border);
  padding: 11px 14px;
  cursor: pointer;
  font-family: inherit;
  transition: background 120ms ease;
}
.sb-notif-item:last-child { border-bottom: none; }
.sb-notif-item:hover { background: var(--recanto-bg); }
.sb-notif-item.unread { background: var(--recanto-blue-light); }
.sb-notif-item.unread:hover { background: rgba(29, 25, 199, 0.14); }
.sb-notif-title { font-size: 12.5px; font-weight: 600; color: var(--recanto-text); }
.sb-notif-item.unread .sb-notif-title { color: var(--recanto-blue); }
.sb-notif-body  { font-size: 12px; color: var(--recanto-text-muted); margin-top: 3px; word-break: break-word; }
.sb-notif-time  { font-size: 10.5px; color: var(--recanto-text-muted); margin-top: 5px; }
.sb-notif-empty { padding: 24px 14px; font-size: 12.5px; color: var(--recanto-text-muted); font-style: italic; text-align: center; }