/* Laercio Consultoria - ajuste automatico para o app desktop.
   A tela fisica em polegadas nao e exposta de forma confiavel pelo Windows/WebView;
   por isso o ajuste usa a area util da janela e a resolucao disponivel. */

:root {
  --app-font-size: 14px;
  --app-control-h: 36px;
  --app-content-pad: 18px;
  --app-view-gap: 18px;
  --app-card-gap: 12px;
  --app-module-head-y: 14px;
  --app-module-head-x: 16px;
  --app-module-body-pad: 16px;
  --app-topbar-y: 8px;
  --app-topbar-x: 18px;
  --app-tab-y: 9px;
  --app-tab-x: 22px;
  --rail-w: 76px;
  --rail-expanded-w: 286px;
  --app-sidebar-pad-y: 18px;
  --app-sidebar-pad-x: 14px;
  --app-sidebar-gap: 16px;
  --app-kpi-min-h: 104px;
  --app-kpi-min-w: 158px;
  --app-ribbon-min-w: 120px;
  --app-table-font: 12px;
  --app-table-pad-y: 9px;
  --app-table-pad-x: 10px;
  --app-notes-offset: 300px;
  --app-notes-min: 600px;
  --app-chat-w: 440px;
  --app-chat-h: 680px;
  --app-chat-safe-top: 92px;
  --app-chat-open-bottom: 14px;
  --app-chat-rest-bottom: 72px;
  --app-chat-right: clamp(10px, 1.35vw, 18px);
  --lc-chat-w: min(var(--app-chat-w), calc(100vw - 28px));
  --lc-chat-h: min(var(--app-chat-h), calc(100dvh - 96px));
}

:root[data-app-fit="compact"] {
  --app-font-size: 13px;
  --app-control-h: 34px;
  --app-content-pad: 12px;
  --app-view-gap: 12px;
  --app-card-gap: 9px;
  --app-module-head-y: 11px;
  --app-module-head-x: 13px;
  --app-module-body-pad: 13px;
  --app-topbar-y: 7px;
  --app-topbar-x: 12px;
  --app-tab-y: 7px;
  --app-tab-x: 12px;
  --rail-w: 72px;
  --rail-expanded-w: 258px;
  --app-sidebar-pad-y: 12px;
  --app-sidebar-pad-x: 8px;
  --app-sidebar-gap: 10px;
  --app-kpi-min-h: 86px;
  --app-kpi-min-w: 140px;
  --app-ribbon-min-w: 112px;
  --app-table-font: 11.5px;
  --app-table-pad-y: 7px;
  --app-table-pad-x: 8px;
  --app-notes-offset: 248px;
  --app-notes-min: 460px;
  --app-chat-w: clamp(348px, 29.8vw, 382px);
  --app-chat-h: 900px;
  --app-chat-open-bottom: 12px;
  --app-chat-rest-bottom: 60px;
}

:root[data-app-fit="wide"] {
  --app-font-size: 14px;
  --app-content-pad: 22px;
  --app-view-gap: 20px;
  --app-card-gap: 14px;
  --app-module-body-pad: 18px;
  --app-topbar-y: 10px;
  --app-topbar-x: 22px;
  --rail-w: 78px;
  --rail-expanded-w: 304px;
  --app-sidebar-pad-y: 18px;
  --app-sidebar-pad-x: 14px;
  --app-kpi-min-h: 108px;
  --app-kpi-min-w: 170px;
  --app-ribbon-min-w: 150px;
  --app-notes-offset: 315px;
  --app-notes-min: 640px;
  --app-chat-w: 520px;
  --app-chat-h: 760px;
}

:root[data-app-fit="spacious"] {
  --app-font-size: 15px;
  --app-control-h: 38px;
  --app-content-pad: 26px;
  --app-view-gap: 22px;
  --app-card-gap: 16px;
  --app-module-head-y: 16px;
  --app-module-head-x: 18px;
  --app-module-body-pad: 20px;
  --app-topbar-y: 11px;
  --app-topbar-x: 26px;
  --app-tab-y: 10px;
  --app-tab-x: 26px;
  --rail-w: 82px;
  --rail-expanded-w: 320px;
  --app-sidebar-pad-y: 20px;
  --app-sidebar-pad-x: 16px;
  --app-sidebar-gap: 18px;
  --app-kpi-min-h: 116px;
  --app-kpi-min-w: 190px;
  --app-ribbon-min-w: 170px;
  --app-table-font: 13px;
  --app-table-pad-y: 10px;
  --app-table-pad-x: 12px;
  --app-notes-offset: 335px;
  --app-notes-min: 720px;
  --app-chat-w: 600px;
  --app-chat-h: 820px;
}

body {
  font-size: var(--app-font-size) !important;
}

button,
a.button,
.field input,
.field select,
.global-search,
.top-company,
.workspace-switch select {
  min-height: var(--app-control-h) !important;
}

.shell {
  grid-template-columns: var(--rail-w) minmax(0, 1fr) !important;
}

.shell.nav-expanded,
.shell.nav-pinned {
  grid-template-columns: var(--rail-expanded-w) minmax(0, 1fr) !important;
}

.sidebar {
  width: var(--rail-w) !important;
  padding: var(--app-sidebar-pad-y) var(--app-sidebar-pad-x) !important;
  gap: var(--app-sidebar-gap) !important;
}

.shell.nav-expanded .sidebar,
.shell.nav-pinned .sidebar {
  width: var(--rail-expanded-w) !important;
}

.main,
.content,
.view.active {
  min-width: 0 !important;
  min-height: 0 !important;
}

.topbar {
  padding: var(--app-topbar-y) var(--app-topbar-x) !important;
}

.top-view-tabs {
  padding: var(--app-tab-y) var(--app-tab-x) 0 !important;
}

.content {
  padding: var(--app-content-pad) !important;
  gap: var(--app-view-gap) !important;
}

.view.active,
.module-grid,
.module-grid.equal,
.module-grid.three {
  gap: var(--app-view-gap) !important;
}

.kpi-strip,
.quick-ribbon,
.board,
.task-board,
.control-grid,
.record-grid,
.metrics,
#fiscalCards {
  gap: var(--app-card-gap) !important;
}

.kpi-strip {
  grid-template-columns: repeat(auto-fit, minmax(var(--app-kpi-min-w), 1fr)) !important;
}

.metric {
  min-height: var(--app-kpi-min-h) !important;
  padding: calc(var(--app-module-body-pad) - 3px) !important;
}

.quick-ribbon {
  grid-template-columns: repeat(auto-fit, minmax(var(--app-ribbon-min-w), 1fr)) !important;
}

.module-head {
  padding: var(--app-module-head-y) var(--app-module-head-x) !important;
}

.module-body,
.lane,
.record,
.mini,
.upload-zone {
  padding: var(--app-module-body-pad) !important;
}

.toolbar {
  gap: var(--app-card-gap) !important;
}

table {
  font-size: var(--app-table-font) !important;
}

th,
td {
  padding: var(--app-table-pad-y) var(--app-table-pad-x) !important;
}

.nota-vspacer td {
  padding: 0 !important;
}

.notes-table-wrap {
  max-height: none !important;
  min-height: 0 !important;
}

#fiscalTableWrap {
  max-height: none !important;
  min-height: 0 !important;
}

.dp-detail-table-wrap.table-modern {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 220px !important;
  max-height: clamp(260px, calc(100dvh - 360px), 620px) !important;
  overflow-x: scroll !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-gutter: stable both-edges !important;
  padding-bottom: 10px !important;
}

.dp-detail-table-wrap.table-modern table.data-table {
  width: max-content !important;
  min-width: 100% !important;
  table-layout: auto !important;
}

.dp-detail-table-wrap.table-modern th,
.dp-detail-table-wrap.table-modern td {
  white-space: nowrap !important;
}

.content:has(> #view-dp.active) {
  display: block !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-gutter: stable !important;
}

#view-dp.view.active {
  display: grid !important;
  height: auto !important;
  min-height: max-content !important;
  overflow: visible !important;
  padding-bottom: 44px !important;
}

#view-dp > .module {
  display: block !important;
  min-height: 0 !important;
  overflow: visible !important;
}

#view-dp > .module > .module-body {
  display: block !important;
  min-height: 0 !important;
  overflow: visible !important;
}

#view-dp #dpEntregas {
  min-height: 0 !important;
  overflow: visible !important;
  padding-bottom: 24px !important;
}

body.gfl-beta-frame .content:has(> #view-dp.active) {
  height: 100% !important;
  max-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body.role-dp .content,
body.gfl-beta-frame.role-dp .content,
body.role-dp .content:has(> #view-dp.active),
body.gfl-beta-frame.role-dp .content:has(> #view-dp.active) {
  overflow-x: hidden !important;
  overflow-y: scroll !important;
  overscroll-behavior-y: contain !important;
  scrollbar-gutter: stable !important;
}

body.role-dp #view-dp.view.active,
body.gfl-beta-frame.role-dp #view-dp.view.active {
  height: auto !important;
  min-height: max-content !important;
  overflow: visible !important;
  padding-bottom: 96px !important;
}

body.role-dp #view-dp #dpEntregas,
body.gfl-beta-frame.role-dp #view-dp #dpEntregas {
  overflow: visible !important;
  padding-bottom: 96px !important;
}

/* Revisao SPED: a pagina inteira e o scroller. Funciona no web, oficial e beta. */
.content:has(> #view-sped-segunda.active),
body.gfl-beta-frame .content:has(> #view-sped-segunda.active) {
  display: block !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain !important;
  scrollbar-gutter: stable !important;
}

#view-sped-segunda.view.active,
body.gfl-beta-frame #view-sped-segunda.view.active {
  display: grid !important;
  height: auto !important;
  min-height: max-content !important;
  overflow: visible !important;
  padding-bottom: 96px !important;
}

#view-sped-segunda > .module,
#view-sped-segunda > .module > .module-body,
body.gfl-beta-frame #view-sped-segunda > .module,
body.gfl-beta-frame #view-sped-segunda > .module > .module-body {
  min-height: 0 !important;
  overflow: visible !important;
}

.chat-panel,
.laercio-chat-panel {
  right: var(--app-chat-right) !important;
  bottom: var(--app-chat-rest-bottom) !important;
  width: min(var(--app-chat-w), calc(100vw - 36px)) !important;
  height: min(var(--app-chat-h), calc(100dvh - var(--app-chat-safe-top) - var(--app-chat-rest-bottom))) !important;
  max-height: min(var(--app-chat-h), calc(100dvh - var(--app-chat-safe-top) - var(--app-chat-rest-bottom))) !important;
}

.chat-panel.open,
.laercio-chat-panel.open {
  bottom: var(--app-chat-open-bottom) !important;
  height: min(var(--app-chat-h), calc(100dvh - var(--app-chat-safe-top) - var(--app-chat-open-bottom))) !important;
  max-height: min(var(--app-chat-h), calc(100dvh - var(--app-chat-safe-top) - var(--app-chat-open-bottom))) !important;
}

@media (min-width: 1500px) {
  .module-grid {
    grid-template-columns: minmax(0, 1.48fr) minmax(340px, .52fr) !important;
  }
}

@media (min-width: 1860px) {
  .module-grid {
    grid-template-columns: minmax(0, 1.58fr) minmax(390px, .42fr) !important;
  }
}

@media (max-width: 1180px) and (min-width: 901px) {
  .toolbar {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 900px) {
  .shell {
    display: block !important;
  }

  .sidebar {
    width: auto !important;
  }

  .content {
    overflow: visible !important;
  }

  .chat-panel,
  .laercio-chat-panel {
    width: auto !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
  }
}

@media (max-width: 640px) {
  .dialog:has(.dp-detail-shell) {
    max-height: calc(100dvh - 18px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .dialog:has(.dp-detail-shell) > #modalBody {
    overflow: visible !important;
  }

  .dialog:has(.dp-detail-shell) > #modalBody > .dp-detail-shell {
    height: auto !important;
    min-height: 0 !important;
    grid-template-rows: auto auto auto auto !important;
  }

  .dp-detail-kpis.kpi-strip {
    grid-template-columns: 1fr !important;
  }

  .dp-detail-table-wrap.table-modern {
    min-height: 180px !important;
    max-height: min(42dvh, 340px) !important;
  }

  .chat-panel,
  .chat-panel.open,
  .laercio-chat-panel {
    inset: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    top: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    transform: none !important;
  }
}

@media (max-height: 760px) and (min-width: 901px) {
  :root:not([data-app-fit]) {
    --app-font-size: 13px;
    --app-content-pad: 12px;
    --app-view-gap: 12px;
    --app-notes-offset: 248px;
    --app-notes-min: 460px;
  }
}

@media (max-height: 820px) and (min-width: 901px) {
  .chat-head,
  .laercio-chat-header {
    min-height: 54px !important;
    padding: 8px 10px !important;
  }

  .chat-face,
  .laercio-chat-header .laercio-badge-mark {
    width: 42px !important;
    height: 42px !important;
    flex-basis: 42px !important;
  }

  .chat-head strong,
  .laercio-chat-title {
    font-size: 13px !important;
  }

  .chat-head span,
  .laercio-chat-subtitle {
    font-size: 10px !important;
  }

  .chat-close,
  .chat-head .icon-btn,
  .laercio-chat-close {
    width: 34px !important;
    height: 34px !important;
  }

  .chat-quickbar,
  .laercio-chat-quickbar {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 6px !important;
    padding: 7px 8px !important;
    scrollbar-width: thin;
  }

  .chat-tool,
  .laercio-chat-tool {
    flex: 0 0 auto !important;
    min-height: 30px !important;
    padding: 6px 9px !important;
    font-size: 10.5px !important;
    white-space: nowrap !important;
  }

  .chat-messages,
  .laercio-chat-messages {
    padding: 11px 10px 9px !important;
    gap: 10px !important;
  }

  .msg.ai,
  .laercio-msg-ai {
    grid-template-columns: 30px minmax(0, 1fr) !important;
    column-gap: 7px !important;
  }

  .msg-avatar,
  .laercio-msg-avatar {
    width: 30px !important;
    height: 30px !important;
  }

  .bubble,
  .laercio-msg-bubble {
    padding: 9px 10px !important;
    font-size: 12.5px !important;
    line-height: 1.48 !important;
  }

  .chat-suggestions,
  .laercio-chat-suggestions {
    max-height: 58px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 7px 8px !important;
    gap: 5px !important;
    scrollbar-width: thin;
  }

  .chip,
  .laercio-suggestion,
  .laercio-suggestion-chip {
    flex: 0 0 auto !important;
    max-width: 230px !important;
    min-height: 28px !important;
    padding: 5px 9px !important;
    font-size: 10.5px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .chat-input,
  .laercio-chat-input-area {
    padding: 8px !important;
    gap: 7px !important;
  }

  .chat-input textarea,
  .laercio-chat-input {
    min-height: 44px !important;
    height: 44px !important;
    max-height: 72px !important;
    padding: 8px 9px !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  .chat-input .icon-btn,
  .laercio-chat-send {
    width: 40px !important;
    min-width: 40px !important;
    height: 44px !important;
  }

  .prompt-library.open {
    top: 54px !important;
    bottom: 60px !important;
  }
}

/* Sidebar glass beta: trilho limpo fechado e painel de vidro aberto. */
@media (min-width: 901px) {
  :root {
    --sidebar-glass-bg: rgba(5, 42, 34, .82);
    --sidebar-glass-line: rgba(187, 247, 208, .34);
    --sidebar-glass-glow: rgba(34, 197, 94, .42);
  }

  .sidebar {
    position: sticky !important;
    top: 0 !important;
    height: calc(100dvh - var(--gfl-beta-titlebar-h, 0px)) !important;
    min-height: calc(100dvh - var(--gfl-beta-titlebar-h, 0px)) !important;
    max-height: calc(100dvh - var(--gfl-beta-titlebar-h, 0px)) !important;
    isolation: isolate;
    display: flex !important;
    flex-direction: column;
    background: transparent !important;
    border-right-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow: visible !important;
  }

  .sidebar::before {
    content: "";
    position: absolute;
    inset: 8px 5px;
    border-radius: 24px;
    background:
      radial-gradient(circle at 22% 4%, rgba(255,255,255,.38), transparent 20%),
      radial-gradient(circle at 86% 34%, rgba(74,222,128,.20), transparent 34%),
      linear-gradient(145deg, rgba(255,255,255,.18), rgba(31,95,71,.60) 38%, rgba(4,47,37,.78) 100%),
      linear-gradient(180deg, rgba(2,44,34,.84), rgba(8,71,48,.74));
    border: 1px solid rgba(187,247,208,.34);
    box-shadow:
      0 34px 76px -38px rgba(0,0,0,.88),
      18px 0 56px -30px rgba(5,46,22,.58),
      -10px 0 30px -24px rgba(255,255,255,.30),
      inset 0 1px 0 rgba(255,255,255,.36),
      inset 0 -1px 0 rgba(4,120,87,.24),
      inset -1px 0 0 rgba(255,255,255,.12);
    backdrop-filter: blur(20px) saturate(156%);
    -webkit-backdrop-filter: blur(20px) saturate(156%);
    pointer-events: none;
    z-index: -2;
  }

  .shell:not(.nav-expanded):not(.nav-pinned) .sidebar::before {
    inset: 8px 10px 8px 9px;
    border-radius: 999px;
    background:
      radial-gradient(circle at 30% 0%, rgba(255,255,255,.34), transparent 23%),
      linear-gradient(180deg, rgba(255,255,255,.17), rgba(255,255,255,.06) 42%, rgba(34,197,94,.12)),
      linear-gradient(180deg, rgba(6,56,45,.90), rgba(5,78,54,.72));
    border-color: rgba(187,247,208,.30);
    box-shadow:
      0 26px 54px -34px rgba(0,0,0,.88),
      12px 0 34px -22px rgba(5,46,22,.62),
      inset 0 1px 0 rgba(255,255,255,.30),
      inset 0 0 0 1px rgba(255,255,255,.075),
      inset -1px 0 0 rgba(187,247,208,.12);
  }

  .sidebar::after {
    content: "";
    position: absolute;
    inset: 8px 5px;
    border-radius: 24px;
    background:
      radial-gradient(circle at 20% 5%, rgba(255,255,255,.26), transparent 19%),
      radial-gradient(circle at 84% 28%, rgba(134,239,172,.20), transparent 30%),
      linear-gradient(118deg, transparent 0 22%, rgba(255,255,255,.18) 24%, rgba(255,255,255,.04) 29%, transparent 36% 100%),
      linear-gradient(28deg, transparent 0 62%, rgba(187,247,208,.10) 67%, transparent 76%);
    background-size: 100% 100%, 100% 100%, 190% 190%, 150% 150%;
    opacity: .86;
    pointer-events: none;
    z-index: -1;
    animation: sidebarLiquidLight 7s ease-in-out infinite;
  }

  .shell:not(.nav-expanded):not(.nav-pinned) .sidebar::after {
    display: none;
  }

  .shell.nav-expanded .sidebar,
  .shell.nav-pinned .sidebar {
    background: transparent !important;
    border-right-color: transparent !important;
    box-shadow: none !important;
  }

  @keyframes sidebarLiquidLight {
    0%, 100% {
      background-position: 0 0, 0 0, 0% 18%, 0% 50%;
      opacity: .72;
    }
    50% {
      background-position: 0 0, 0 0, 96% 72%, 100% 50%;
      opacity: .95;
    }
  }

  .sidebar .brand {
    border-bottom: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .sidebar .brand-mark {
    background: rgba(255,255,255,.90) !important;
    box-shadow:
      0 0 0 1px rgba(187,247,208,.26),
      0 14px 30px -20px rgba(34,197,94,.85) !important;
  }

  .shell.nav-expanded .sidebar .brand,
  .shell.nav-pinned .sidebar .brand {
    min-height: 88px !important;
    padding: 8px 14px 13px !important;
  }

  .shell.nav-expanded .sidebar .brand::after,
  .shell.nav-pinned .sidebar .brand::after {
    content: "";
    display: block;
    height: 1px;
    width: 100%;
    margin-top: 13px;
    background: linear-gradient(90deg, transparent, rgba(187,247,208,.36), rgba(255,255,255,.18), transparent);
    box-shadow: 0 0 18px rgba(34,197,94,.20);
  }

  .sidebar .nav {
    flex: 1 1 auto;
    min-height: 0;
    gap: 8px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    padding-bottom: 10px !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(187,247,208,.28) transparent;
  }

  .sidebar .nav::-webkit-scrollbar { width: 7px; }
  .sidebar .nav::-webkit-scrollbar-track { background: transparent; }
  .sidebar .nav::-webkit-scrollbar-thumb {
    background: rgba(187,247,208,.20);
    border-radius: 999px;
  }

  .sidebar .nav-version-badge {
    width: 44px;
    min-width: 44px;
    height: 24px;
    margin: 7px auto 2px !important;
    padding: 0 !important;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    border: 1px solid rgba(187,247,208,.20);
    color: rgba(220,252,231,.82);
    background:
      radial-gradient(circle at 30% 0%, rgba(255,255,255,.20), transparent 42%),
      rgba(6,78,59,.22);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.12),
      0 12px 24px -20px rgba(34,197,94,.54);
    font: 850 0/1 Inter, system-ui, sans-serif;
    letter-spacing: 0;
    overflow: hidden;
    pointer-events: none;
  }

  .sidebar .nav-version-badge::before {
    content: "v";
    font-size: 10.5px;
    font-weight: 950;
    color: rgba(220,252,231,.86);
  }

  .shell.nav-expanded .sidebar .nav-version-badge,
  .shell.nav-pinned .sidebar .nav-version-badge {
    width: calc(100% - 12px);
    min-width: 0;
    height: 27px;
    margin: 8px 6px 0 !important;
    padding: 0 10px !important;
    justify-content: center;
    color: rgba(226,255,246,.88);
    background:
      linear-gradient(145deg, rgba(255,255,255,.11), rgba(255,255,255,.035)),
      rgba(6,78,59,.18);
    border-color: rgba(187,247,208,.18);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.11),
      0 12px 26px -22px rgba(34,197,94,.48);
    font-size: 10.5px;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .shell.nav-expanded .sidebar .nav-version-badge::before,
  .shell.nav-pinned .sidebar .nav-version-badge::before {
    content: none;
  }

  .sidebar .nav-group,
  .shell.nav-expanded .sidebar .nav-group,
  .shell.nav-pinned .sidebar .nav-group {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .shell.nav-expanded .sidebar .nav-group,
  .shell.nav-pinned .sidebar .nav-group {
    margin: 2px 6px 7px !important;
    display: grid !important;
    gap: 4px !important;
  }

  .shell.nav-expanded .sidebar .nav-group + .nav-group,
  .shell.nav-pinned .sidebar .nav-group + .nav-group {
    padding-top: 8px !important;
    border-top: 1px solid rgba(187,247,208,.10) !important;
  }

  .shell.nav-expanded .sidebar .nav-title,
  .shell.nav-pinned .sidebar .nav-title {
    display: inline-flex !important;
    align-items: center;
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 0 3px 2px !important;
    padding: 0 9px !important;
    min-height: 22px;
    border-radius: 999px;
    color: rgba(219,234,254,.95) !important;
    background: rgba(6,78,59,.30);
    border: 1px solid rgba(187,247,208,.16);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
    font-size: 9.5px !important;
    letter-spacing: .105em;
    line-height: 1;
  }

  .sidebar .nav-item {
    border: 1px solid transparent !important;
    background: transparent !important;
    color: rgba(230,255,246,.82) !important;
    box-shadow: none !important;
  }

  .shell:not(.nav-expanded):not(.nav-pinned) .sidebar .nav-item {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    border-radius: 16px !important;
    margin: 3px auto !important;
  }

  .sidebar .nav-item:hover {
    color: #fff !important;
    background:
      linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.035)) !important;
    border-color: rgba(187,247,208,.18) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.10),
      0 14px 28px -24px rgba(34,197,94,.60),
      0 0 22px rgba(134,239,172,.10) !important;
  }

  .sidebar .nav-item.active {
    color: #ecfdf5 !important;
    background:
      linear-gradient(145deg, rgba(22,163,74,.46), rgba(6,78,59,.24)) !important;
    border-color: rgba(134,239,172,.35) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.12),
      inset 0 0 0 1px rgba(34,197,94,.16),
      0 18px 34px -26px rgba(34,197,94,.84),
      0 0 30px rgba(34,197,94,.18) !important;
  }

  .sidebar .nav-item.active::before {
    left: 5px !important;
    top: 50% !important;
    bottom: auto !important;
    width: 3px !important;
    height: 18px !important;
    border-radius: 999px !important;
    transform: translateY(-50%) !important;
    background: linear-gradient(180deg, #86efac, #22c55e) !important;
    box-shadow: 0 0 14px rgba(34,197,94,.72) !important;
  }

  .shell.nav-expanded .sidebar .nav-item,
  .shell.nav-pinned .sidebar .nav-item {
    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    margin: 1px 0 !important;
    padding: 0 13px !important;
    border-radius: 14px !important;
    gap: 12px !important;
  }

  .shell.nav-expanded .sidebar .nav-item:hover,
  .shell.nav-pinned .sidebar .nav-item:hover {
    transform: translateX(2px) !important;
  }

  .sidebar .nav-item i,
  .sidebar .nav-item svg.lucide {
    width: 19px !important;
    height: 19px !important;
    flex: 0 0 19px !important;
    opacity: .86;
  }

  .sidebar .nav-item.active i,
  .sidebar .nav-item.active svg.lucide {
    color: #bbf7d0 !important;
    opacity: 1;
  }

  .shell.nav-expanded .sidebar .brand-lockup span,
  .shell.nav-pinned .sidebar .brand-lockup span {
    color: rgba(226,255,246,.88) !important;
    text-shadow: 0 1px 12px rgba(0,0,0,.28);
  }

  .nav-collapser {
    right: -8px !important;
    background: rgba(12,74,53,.78) !important;
    border: 1px solid rgba(187,247,208,.18) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.12),
      0 12px 26px -18px rgba(0,0,0,.72) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  .nav-collapser:hover,
  .nav-collapser[aria-pressed="true"] {
    background: rgba(21,128,61,.92) !important;
    border-color: rgba(187,247,208,.32) !important;
  }

  .sidebar .side-status {
    flex: 0 0 auto;
    border-top: 1px solid rgba(187,247,208,.10) !important;
  }
}

@media (max-width: 900px) {
  .shell .sidebar {
    background:
      linear-gradient(180deg, rgba(6,24,29,.88), rgba(3,31,23,.84)) !important;
    border-right: 1px solid rgba(187,247,208,.16) !important;
    backdrop-filter: blur(18px) saturate(138%);
    -webkit-backdrop-filter: blur(18px) saturate(138%);
  }

  .shell .sidebar .nav-group {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .shell .sidebar .nav-item {
    border-radius: 14px !important;
    background: transparent !important;
    border: 1px solid transparent !important;
  }

  .shell .sidebar .nav-item.active,
  .shell .sidebar .nav-item:hover {
    background: linear-gradient(145deg, rgba(22,163,74,.42), rgba(6,78,59,.22)) !important;
    border-color: rgba(134,239,172,.30) !important;
  }
}