/* ===================================================================
   Sidebar compartilhada dos paineis (todos os perfis).
   Markup em templates/app_base.html; comportamento em
   static/js/components/sidebar.js.
   Acento por perfil: sobrescrever --sidebar-active-bg /
   --sidebar-active-text no CSS do app (ex.: administracao).
   =================================================================== */

/* -------------------------------------------------------------------
   1) Tokens de tema da sidebar (default light)
   ------------------------------------------------------------------- */
:root {
  --nav-bg: #ffffff;
  --sidebar-bg: #f8f9fa;
  --sidebar-text: #212529;
  --sidebar-muted: #6c757d;
  --sidebar-hover: rgba(0,0,0,0.05);
  --sidebar-active-bg: #0d6efd;
  --sidebar-active-text: #ffffff;
}

/* dark (Dracula) */
:root[data-theme="dark"] {
  --nav-bg: #21222c;
  --sidebar-bg: #21222c;
  --sidebar-text: #f8f8f2;
  --sidebar-muted: #bfbfbf;
  --sidebar-hover: rgba(255,255,255,0.10);
  --sidebar-active-bg: #bd93f9;
  --sidebar-active-text: #282a36;
}

/* override manual light */
:root[data-theme="light"] {
  --nav-bg: #ffffff;
  --sidebar-bg: #f8f9fa;
  --sidebar-text: #212529;
  --sidebar-muted: #6c757d;
  --sidebar-hover: rgba(0,0,0,0.05);
  --sidebar-active-bg: #0d6efd;
  --sidebar-active-text: #ffffff;
}

/* dark do sistema (quando nao existe data-theme manual) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --nav-bg: #21222c;
    --sidebar-bg: #21222c;
    --sidebar-text: #f8f8f2;
    --sidebar-muted: #bfbfbf;
    --sidebar-hover: rgba(255,255,255,0.10);
    --sidebar-active-bg: #bd93f9;
    --sidebar-active-text: #282a36;
  }
}

/* Mapeamento para os aliases usados pelos CSS dos apps */
:root {
  --bg-nav: var(--nav-bg);
  --bg-sidebar: var(--sidebar-bg);
  --bg-active: var(--sidebar-active-bg);

  --text-color: var(--sidebar-text);
  --text-muted: var(--sidebar-muted);
  --hover-bg: var(--sidebar-hover);

  --icon-size: 1.15rem;

  --radius-lg: 14px;
  --radius-md: 12px;
}

/* -------------------------------------------------------------------
   2) Navbar mobile (topo)
   ------------------------------------------------------------------- */
.navbar-mobile {
  background: var(--bg-nav);
  padding: 12px 18px;
}

.navbar-mobile .brand {
  color: var(--bg-active);
  font-weight: 700;
}

.menu-toggle-btn {
  border: 1px solid rgba(128,128,128,.35);
  color: var(--text-color);
  background: transparent;
  border-radius: 10px;
  padding: 8px 10px;
  transition: .2s ease;
}
.menu-toggle-btn:hover { filter: brightness(1.05); }

/* -------------------------------------------------------------------
   3) Sidebar desktop + area de conteudo
   ------------------------------------------------------------------- */
.app-sidebar {
  width: 260px;
  min-height: 100vh;
  background: var(--bg-sidebar);
  color: var(--text-color);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  padding: 20px 15px;
  transition: transform .3s ease;
  display: none;
}

@media (min-width: 992px) {
  /* coluna flex com scroll interno no menu e logout ancorado embaixo */
  .app-sidebar {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
  }

  .app-sidebar .app-menu {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 6px;
  }

  .app-sidebar form {
    margin-top: auto;
  }

  .content-area { margin-left: 260px; }
}

.app-sidebar.hidden {
  transform: translateX(-100%);
}

.content-area.full {
  margin-left: 0 !important;
  transition: margin-left .3s ease;
}

.sidebar-title {
  color: var(--bg-active);
}

.sidebar-sep {
  border-color: rgba(128,128,128,.35) !important;
}

/* -------------------------------------------------------------------
   4) Botoes fechar / reabrir
   ------------------------------------------------------------------- */
.btn-sidebar-close {
  border: 1px solid rgba(128,128,128,.3);
  color: var(--bg-active);
  background: transparent;
  font-weight: 700;
  border-radius: 10px;
}
.btn-sidebar-close:hover {
  background: var(--hover-bg);
}

.btn-sidebar-open {
  border: 1px solid var(--border-color, rgba(0,0,0,0.2));
  background: var(--bg-card);
  color: var(--text-main);
  border-radius: 10px;
  font-weight: 600;
}

/* Botao flutuante no topo (quando a sidebar esta fechada no desktop) */
.floating-open-btn {
  position: fixed;
  top: 15px;
  left: 15px;
  z-index: 1050;

  border: 1px solid var(--border-color, rgba(0,0,0,0.2));
  background: var(--bg-card);
  color: var(--text-main);

  border-radius: 12px;
  padding: 8px 12px;
  font-weight: 600;

  box-shadow: 0 6px 16px rgba(0,0,0,0.18);
  transition: .2s ease;
}
.floating-open-btn:hover {
  transform: translateY(-2px);
}

/* -------------------------------------------------------------------
   5) Menu (desktop e offcanvas mobile)
   ------------------------------------------------------------------- */
.app-menu a,
.app-menu .menu-dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  color: var(--text-muted);
  text-decoration: none;
  padding: 12px 14px;
  margin-bottom: 8px;
  border-radius: 10px;
  font-weight: 600;
  transition: .25s ease;
  position: relative;
}

.app-menu a i,
.app-menu .menu-dropdown-toggle i {
  font-size: var(--icon-size);
  transition: .25s ease;
}

.app-menu a:hover,
.app-menu .menu-dropdown-toggle:hover {
  background: var(--hover-bg);
  color: var(--text-color);
  transform: translateX(4px);
}

.app-menu a.active {
  background: var(--bg-active);
  color: var(--sidebar-active-text);
  font-weight: 700;
}
.app-menu a.active i {
  transform: scale(1.15) rotate(-3deg);
}

.app-menu a.disabled {
  opacity: .45;
  pointer-events: none;
  transform: none !important;
}

/* Dropdown (details/summary) */
.menu-dropdown { margin-top: 6px; }

.menu-dropdown-toggle {
  background: transparent;
  border: 0;
  cursor: pointer;
  justify-content: space-between;
  margin-bottom: 0; /* o body ja da espaco */
}

.menu-dropdown-toggle span {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* dropdown "da pagina atual" */
.menu-dropdown-toggle.active {
  background: var(--hover-bg);
  color: var(--bg-active);
}

.menu-dropdown .dropdown-arrow {
  transition: transform .2s ease;
}
.menu-dropdown[open] .dropdown-arrow {
  transform: rotate(90deg);
}

.menu-dropdown-body {
  padding: 6px 6px 10px 14px;
}

/* Esconde o marcador nativo de <summary> */
summary.menu-dropdown-toggle {
  list-style: none;
  outline: none;
}
summary.menu-dropdown-toggle::-webkit-details-marker { display: none; }
summary.menu-dropdown-toggle::marker { content: ""; }

/* Submenu */
.submenu-link {
  display: block;
  color: var(--text-muted);
  text-decoration: none;
  padding: 8px 10px;
  margin: 0 0 6px 0;
  border-radius: 10px;
  opacity: .95;
  transition: .25s ease;
}
.submenu-link:hover {
  background: var(--hover-bg);
  color: var(--text-color);
  transform: none;
}
.submenu-link.active {
  background: var(--hover-bg);
  border-left: 3px solid var(--bg-active);
  color: var(--text-color);
  font-weight: 700;
}

/* -------------------------------------------------------------------
   6) Offcanvas mobile
   ------------------------------------------------------------------- */
.app-offcanvas {
  background: var(--bg-sidebar);
  color: var(--text-color);
}
.app-offcanvas .offcanvas-title {
  color: var(--bg-active);
  font-weight: 800;
}
.app-offcanvas .btn-close {
  filter: invert(1);
}
:root[data-theme="light"] .app-offcanvas .btn-close,
body[data-theme="light"] .app-offcanvas .btn-close {
  filter: none;
}