:root {
  /* =========================
     LAYOUT
  ========================= */

  --sidebar-width: 280px;
  --sidebar-collapsed-width: 88px;

  --topbar-height: 72px;

  --transition-speed: 0.25s;

  /* =========================
     SIDEBAR
  ========================= */

  --sidebar-bg: var(--bs-body-bg);
  --sidebar-color: var(--bs-body-color);
  --sidebar-hover: rgba(255, 255, 255, 0.06);

  /* =========================
     TOPBAR
  ========================= */

  --topbar-bg: var(--bs-body-bg);

  /* =========================
     BORDAS
  ========================= */

  --border-color-soft: var(--bs-border-color);
}

/* =========================================================
   GERAL
========================================================= */

a {
  text-decoration: none;
}

html,
body {
  height: 100%;
  margin: 0;
}

/* =========================================================
   SIDEBAR
========================================================= */

#sidebar {
  width: var(--sidebar-width);
  background: var(--sidebar-bg);
  color: var(--sidebar-color);

  /* FIXA A SIDEBAR NA TELA */
  position: sticky;
  top: 0;
  height: 100vh; /* Altura total da janela */

  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  transition: width var(--transition-speed) ease;
  border-right: 1px solid var(--border-color-soft);
}

/* =========================================================
   SIDEBAR COLLAPSED
========================================================= */

body.sidebar-collapsed #sidebar {
  width: var(--sidebar-collapsed-width);
}

/*
|--------------------------------------------------------------------------
| Esconde textos ao minimizar
|--------------------------------------------------------------------------
*/

body.sidebar-collapsed .sidebar-brand span,
body.sidebar-collapsed .nav-label,
body.sidebar-collapsed .nav-title,
body.sidebar-collapsed .sidebar-footer,
body.sidebar-collapsed .sidebar-footer-label,
body.sidebar-collapsed .sidebar-footer-text {
  opacity: 0;

  visibility: hidden;

  width: 0;

  height: 0;

  overflow: hidden;

  display: none !important;
}

/*
|--------------------------------------------------------------------------
| Ajusta alinhamento ao minimizar
|--------------------------------------------------------------------------
*/

body.sidebar-collapsed .sidebar-header {
  justify-content: center;
}

body.sidebar-collapsed .sidebar-brand {
  justify-content: center;
}

body.sidebar-collapsed .sidebar-nav {
  padding-left: 0.5rem;

  padding-right: 0.5rem;
}

body.sidebar-collapsed .nav-link {
  justify-content: center;

  padding-left: 0.5rem;

  padding-right: 0.5rem;
}

body.sidebar-collapsed .nav-icon {
  margin: 0;
}

/*
|--------------------------------------------------------------------------
| Rotação botão
|--------------------------------------------------------------------------
*/

body.sidebar-collapsed .sidebar-toggler i {
  transform: rotate(180deg);
}

/* =========================================================
   SIDEBAR INNER
========================================================= */

.sidebar-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

/* =========================================================
   SIDEBAR HEADER
========================================================= */

.sidebar-header {
  height: var(--topbar-height);

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 0 1rem;

  border-bottom: 1px solid var(--border-color-soft);

  flex-shrink: 0;

  text-decoration: none;
}

/* =========================================================
   SIDEBAR BRAND
========================================================= */

.sidebar-brand {
  display: flex;

  align-items: center;

  gap: 0.75rem;

  color: inherit;

  font-weight: 700;

  font-size: 1.05rem;

  transition: 0.2s;
}

.sidebar-brand:hover {
  color: inherit;

  opacity: 0.9;
}

.sidebar-brand i {
  font-size: 1.8rem;

  flex-shrink: 0;
}

/* =========================================================
   SIDEBAR TOGGLER
========================================================= */

.sidebar-toggler {
  width: 36px;

  height: 36px;

  border: 0;

  border-radius: 0.5rem;

  background: transparent;

  color: inherit;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: 0.2s;
}

.sidebar-toggler:hover {
  background: rgba(255, 255, 255, 0.08);
}

.sidebar-toggler i {
  transition: transform 0.2s ease;
}

/* =========================================================
   SIDEBAR NAV
========================================================= */

.sidebar-nav {
  list-style: none;

  padding: 1rem 0.75rem;

  margin: 0;

  display: flex;

  flex-direction: column;

  gap: 0.15rem;

  transition: 0.2s;
}

/* =========================================================
   NAV TITLE
========================================================= */

.nav-title {
  padding: 0.75rem 0.75rem 0.35rem;

  font-size: 0.72rem;

  text-transform: uppercase;

  font-weight: 700;

  opacity: 0.55;

  letter-spacing: 0.04rem;

  transition: 0.2s;

  white-space: nowrap;
}

/* =========================================================
   NAV ITEM
========================================================= */

.nav-item {
  list-style: none;
}

/* =========================================================
   NAV LINK
========================================================= */

.nav-link {
  display: flex;

  align-items: center;

  gap: 0.75rem;

  min-height: 46px;

  padding: 0.65rem 0.85rem;

  border-radius: 0.7rem;

  color: var(--sidebar-color);

  transition: all 0.2s ease;

  white-space: nowrap;
}

.nav-link:hover {
  background: var(--sidebar-hover);

  color: var(--sidebar-color);
}

.nav-link.active {
  background: var(--bs-primary);

  color: #fff;
}

/* =========================================================
   NAV ICON
========================================================= */

.nav-icon {
  width: 22px;

  min-width: 22px;

  display: flex;

  justify-content: center;

  align-items: center;

  flex-shrink: 0;

  font-size: 1.1rem;
}

/* =========================================================
   NAV LABEL
========================================================= */

.nav-label {
  white-space: nowrap;

  transition: 0.2s;
}

/* =========================================================
   SIDEBAR FOOTER
========================================================= */

.sidebar-footer {
  margin-top: auto;

  padding: 1rem;

  border-top: 1px solid var(--border-color-soft);

  flex-shrink: 0;
}

.sidebar-footer-label {
  font-size: 0.72rem;

  text-transform: uppercase;

  opacity: 0.6;

  font-weight: 700;
}

.sidebar-footer-text {
  font-size: 0.85rem;

  opacity: 0.8;
}

/* =========================================================
   TOPBAR
========================================================= */

.topbar {
  height: var(--topbar-height);

  background: var(--topbar-bg);

  position: sticky;

  top: 0;

  z-index: 1020;

  backdrop-filter: blur(10px);
}

/* =========================================================
   TOPBAR INNER
========================================================= */

.topbar-inner {
  height: 100%;

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 0 1.25rem;
}

/* =========================================================
   TOP LINK HOME
========================================================= */

.top-link-home {
  text-decoration: none;

  color: inherit;

  transition: 0.2s;
}

.top-link-home:hover {
  opacity: 0.8;
}

/* =========================================================
   USER AVATAR
========================================================= */

.user-avatar {
  width: 40px;

  height: 40px;

  border-radius: 50%;

  background: var(--bs-primary);

  color: #fff;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 0.9rem;

  font-weight: 600;
}

/* =========================================================
   THEME BUTTON
========================================================= */

.theme-toggle-btn {
  width: 38px;

  height: 38px;

  border: 0;

  border-radius: 50%;

  background: transparent;

  color: inherit;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: 0.2s;
}

.theme-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* =========================================================
   OFFCANVAS
========================================================= */

.offcanvas {
  background: var(--sidebar-bg);

  color: var(--sidebar-color);
}

.offcanvas-header {
  border-bottom: 1px solid var(--border-color-soft);
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 991px) {
  #sidebar {
    display: none !important;
  }

  .topbar-inner {
    padding: 0 1rem;
  }
}

/* Opcional: Melhora o scroll caso o menu seja muito grande */
nav.flex-grow-1 {
  flex-grow: 1;
  overflow-y: auto;
}

.sidebar-footer {
  margin-top: auto; /* Empurra para o final */
  flex-shrink: 0; /* Impede que o footer seja esmagado se o menu crescer */
}

body.sidebar-collapsed .sidebar-footer {
  display: none !important;
}
[data-bs-theme='dark'] {
  --ck-custom-foreground: #000;
  color: var(--ck-custom-foreground) !important;
}

[data-bs-theme='dark'] {
  --ck-custom-background: #212529;
  --ck-custom-foreground: #f8f9fa;
  --ck-custom-border: #495057;
}

[data-bs-theme='dark'] .ck-reset_all,
[data-bs-theme='dark'] .ck.ck-editor__main > .ck-editor__editable {
  background: var(--ck-custom-background) !important;
  color: var(--ck-custom-foreground) !important;
  border-color: var(--ck-custom-border) !important;
}

[data-bs-theme='dark'] .ck.ck-toolbar {
  background: #343a40 !important;
  border-color: var(--ck-custom-border) !important;
}

[data-bs-theme='dark'] .ck.ck-button {
  color: var(--ck-custom-foreground) !important;
}