/* ObraGestão V8.8.3.11 — drawer mobile com o mesmo tema do menu desktop */
@media (min-width:801px){
  /* A fonte de verdade é data-shell-mode / sidebar-pinned. Arquivos não altera esse estado. */
  #nav[data-shell-mode="compact"]{
    width:var(--shell-sidebar-compact,68px)!important;
    min-width:var(--shell-sidebar-compact,68px)!important;
    max-width:var(--shell-sidebar-compact,68px)!important;
  }
  #nav[data-shell-mode="pinned"]{
    width:var(--shell-sidebar-expanded,238px)!important;
    min-width:var(--shell-sidebar-expanded,238px)!important;
    max-width:var(--shell-sidebar-expanded,238px)!important;
  }
  #nav[data-shell-mode="compact"]:hover,
  #nav[data-shell-mode="compact"].force-open{
    width:var(--shell-sidebar-expanded,238px)!important;
    min-width:var(--shell-sidebar-expanded,238px)!important;
    max-width:var(--shell-sidebar-expanded,238px)!important;
  }
  body.sidebar-compact header,
  body:not(.sidebar-pinned) header{
    margin-left:var(--shell-sidebar-compact,68px)!important;
    width:calc(100% - var(--shell-sidebar-compact,68px))!important;
  }
  body.sidebar-compact main,
  body:not(.sidebar-pinned) main{
    margin-left:var(--shell-sidebar-compact,68px)!important;
    width:calc(100% - var(--shell-sidebar-compact,68px))!important;
  }
  body.sidebar-pinned header{
    margin-left:var(--shell-sidebar-expanded,238px)!important;
    width:calc(100% - var(--shell-sidebar-expanded,238px))!important;
  }
  body.sidebar-pinned main{
    margin-left:var(--shell-sidebar-expanded,238px)!important;
    width:calc(100% - var(--shell-sidebar-expanded,238px))!important;
  }
  body.sidebar-compact:has(#nav:hover) header,
  body.sidebar-compact:has(#nav.force-open) header,
  body.sidebar-compact:has(#nav:hover) main,
  body.sidebar-compact:has(#nav.force-open) main{
    margin-left:var(--shell-sidebar-compact,68px)!important;
    width:calc(100% - var(--shell-sidebar-compact,68px))!important;
  }
}

@media (max-width:800px){
  :root{
    --mobile-drawer-w:min(300px,84vw);
    --mobile-bottom-h:60px;
    --mobile-drawer-bg:var(--shell-side,#0e2238);
    --mobile-drawer-bg2:var(--shell-side-deep,#0a1b2d);
    --mobile-drawer-hover:var(--shell-side-hover,#173653);
    --mobile-drawer-text:var(--shell-side-text,#f4f8fc);
    --mobile-drawer-muted:var(--shell-side-muted,#9eb2c8);
    --mobile-drawer-active:#69aefc;
  }
  html,body{overflow-x:hidden!important}

  /* Drawer real: escuro, opaco e sempre fora da tela quando fechado. */
  #nav,
  aside#nav{
    display:flex!important;
    flex-direction:column!important;
    position:fixed!important;
    left:0!important;
    top:0!important;
    bottom:var(--mobile-bottom-h)!important;
    width:var(--mobile-drawer-w)!important;
    min-width:0!important;
    max-width:var(--mobile-drawer-w)!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
    transform:translateX(-105%)!important;
    visibility:hidden!important;
    opacity:1!important;
    overflow:hidden!important;
    z-index:12050!important;
    background:linear-gradient(180deg,var(--mobile-drawer-bg) 0%,var(--mobile-drawer-bg2) 100%)!important;
    color:var(--mobile-drawer-text)!important;
    border:0!important;
    border-right:1px solid rgba(255,255,255,.08)!important;
    box-shadow:12px 0 34px rgba(5,19,37,.28)!important;
    transition:transform .2s ease,visibility .2s ease!important;
  }
  #nav.open,
  aside#nav.open{
    transform:translateX(0)!important;
    visibility:visible!important;
  }
  #nav.compact,
  aside#nav.compact{
    transform:translateX(-105%)!important;
    visibility:hidden!important;
  }

  #nav .nav-brand-mini{
    order:0!important;
    height:64px!important;
    min-height:64px!important;
    flex:0 0 64px!important;
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
    padding:0 14px!important;
    background:transparent!important;
    color:#fff!important;
    border-bottom:1px solid rgba(255,255,255,.10)!important;
    overflow:hidden!important;
  }
  #nav .brand-app-icon{width:38px!important;height:38px!important;min-width:38px!important;border-radius:9px!important}
  #nav .nav-brand-mini b{display:block!important;opacity:1!important;visibility:visible!important;width:auto!important;max-width:170px!important;color:#fff!important;font-size:18px!important;overflow:visible!important}
  #nav .nav-brand-mini b span{color:#5ba6ff!important}
  #nav .mobile-nav-close{
    display:grid!important;place-items:center!important;margin-left:auto!important;
    width:38px!important;height:38px!important;min-width:38px!important;
    padding:0!important;border:0!important;border-radius:9px!important;
    background:rgba(255,255,255,.08)!important;color:#fff!important;
    font-size:26px!important;line-height:1!important;cursor:pointer!important;
  }
  #nav .mobile-nav-close:active{background:rgba(255,255,255,.16)!important}

  #nav .nav-fixed-top{order:1!important;flex:0 0 auto!important;padding:8px 0!important;background:transparent!important;border-bottom:1px solid rgba(255,255,255,.08)!important}
  #nav .nav-scroll{order:2!important;flex:1 1 auto!important;min-height:0!important;padding:8px 0 12px!important;overflow-y:auto!important;overflow-x:hidden!important;background:transparent!important;scrollbar-width:thin!important;scrollbar-color:#54708d transparent!important}
  #nav .nav-fixed-bottom{order:3!important;flex:0 0 auto!important;padding:7px 0!important;background:transparent!important;border-top:1px solid rgba(255,255,255,.08)!important}
  #nav .nav-version-footer{order:4!important;flex:0 0 auto!important;padding:11px 16px 14px!important;background:transparent!important;border-top:1px solid rgba(255,255,255,.08)!important;color:#fff!important;display:flex!important;flex-direction:column!important;gap:2px!important}
  #nav .nav-version-footer strong{color:#fff!important;font-size:13px!important}
  #nav .nav-version-footer span{color:var(--mobile-drawer-muted)!important;font-size:11px!important}

  #nav>button,
  #nav .nav-fixed-top>button,
  #nav .nav-scroll>button,
  #nav .nav-fixed-bottom>button,
  #nav.open>button,
  #nav.open .nav-fixed-top>button,
  #nav.open .nav-scroll>button,
  #nav.open .nav-fixed-bottom>button{
    display:flex!important;align-items:center!important;justify-content:flex-start!important;
    width:calc(100% - 16px)!important;min-width:0!important;
    height:44px!important;min-height:44px!important;
    margin:2px 8px!important;padding:0 11px!important;gap:12px!important;
    border:0!important;border-radius:9px!important;
    background:transparent!important;color:var(--mobile-drawer-text)!important;
    box-shadow:none!important;white-space:nowrap!important;overflow:hidden!important;
  }
  #nav button:hover,#nav button:active{background:var(--mobile-drawer-hover)!important;color:#fff!important}
  #nav button.active,#nav button[aria-current="page"]{background:rgba(20,94,172,.20)!important;color:var(--mobile-drawer-active)!important}
  #nav button.active .nav-icon,#nav button.active .nav-label,#nav button[aria-current="page"] .nav-icon,#nav button[aria-current="page"] .nav-label{color:var(--mobile-drawer-active)!important}
  #nav .nav-icon{display:grid!important;place-items:center!important;width:28px!important;min-width:28px!important;height:28px!important;margin:0!important;color:inherit!important;opacity:1!important}
  #nav .nav-icon svg{width:21px!important;height:21px!important;stroke:currentColor!important;fill:none!important}
  #nav .nav-label{display:block!important;opacity:1!important;visibility:visible!important;width:auto!important;max-width:190px!important;color:inherit!important;font-size:13px!important;font-weight:600!important;overflow:hidden!important;text-overflow:ellipsis!important}
  #nav .nav-section{height:auto!important;padding:10px 17px 5px!important;color:var(--mobile-drawer-muted)!important;border:0!important;font-size:10px!important;font-weight:800!important;letter-spacing:.07em!important;text-indent:0!important;overflow:visible!important}

  #nav #sidebarWorkCurrent{
    width:calc(100% - 16px)!important;height:54px!important;min-height:54px!important;
    margin:4px 8px!important;padding:6px 8px!important;gap:10px!important;
    justify-content:flex-start!important;background:rgba(255,255,255,.06)!important;
    border:1px solid rgba(255,255,255,.10)!important;color:#fff!important;border-radius:10px!important;
  }
  #nav #sidebarWorkCurrent .sidebar-work-copy{display:flex!important;flex:1 1 auto!important;min-width:0!important;opacity:1!important;visibility:visible!important;color:#fff!important}
  #nav #sidebarWorkCurrent .sidebar-work-copy small{color:var(--mobile-drawer-muted)!important}
  #nav #sidebarWorkCurrent .sidebar-work-copy b{color:#fff!important}
  #nav #sidebarWorkCurrent .sidebar-work-arrow{display:grid!important;color:#d7e8fa!important;background:rgba(255,255,255,.06)!important;border-color:rgba(255,255,255,.18)!important}
  #nav .sidebar-work-submenu{background:transparent!important}
  #nav .sidebar-work-option{color:var(--mobile-drawer-text)!important;background:transparent!important}
  #nav .sidebar-work-option b{color:var(--mobile-drawer-text)!important}
  #nav .sidebar-work-option small{color:var(--mobile-drawer-muted)!important}

  .mobile-overlay,
  #mobileOverlay{
    display:none!important;
    position:fixed!important;
    inset:0 0 var(--mobile-bottom-h) 0!important;
    background:rgba(5,18,35,.58)!important;
    backdrop-filter:none!important;
    z-index:12040!important;
  }
  .mobile-overlay.open,#mobileOverlay.open{display:block!important}

  .mobile-bottom-nav{
    z-index:12060!important;
    height:var(--mobile-bottom-h)!important;
    background:linear-gradient(180deg,var(--shell-side,#0e2238) 0%,var(--shell-side-deep,#0a1b2d) 100%)!important;
    border-top:1px solid rgba(255,255,255,.08)!important;
  }
  .mobile-bottom-nav button{background:transparent!important;color:#8fa9c4!important}
  .mobile-bottom-nav button.active,.mobile-bottom-nav button:active{color:#fff!important;background:rgba(255,255,255,.06)!important}
  .mobile-bottom-nav .quick-add-mobile{background:transparent!important}
  .mobile-bottom-nav .quick-plus{background:#1268e8!important;color:#fff!important}

  /* Não deixa estados desktop vazarem para o drawer. */
  body.sidebar-pinned #nav,body.sidebar-compact #nav{width:var(--mobile-drawer-w)!important;max-width:var(--mobile-drawer-w)!important}
  header{margin-left:0!important;width:100%!important}
  main{margin-left:0!important;width:100%!important}

  /* V8.8.3.11: o drawer mobile usa EXATAMENTE a paleta do sidebar desktop. */
  #nav,aside#nav,#nav.open,aside#nav.open{
    background:linear-gradient(180deg,var(--shell-side,#0e2238) 0%,var(--shell-side-deep,#0a1b2d) 100%)!important;
    background-color:var(--shell-side,#0e2238)!important;
    color:var(--shell-side-text,#f4f8fc)!important;
  }
  #nav .nav-brand-mini,#nav .nav-fixed-top,#nav .nav-scroll,#nav .nav-fixed-bottom,#nav .nav-version-footer{
    background:transparent!important;
  }
  #nav button,#nav .nav-label,#nav .nav-icon,#nav .sidebar-work-option,#nav .sidebar-work-option b{
    color:#d9e5f0!important;
  }
  #nav button:hover,#nav button:active{background:var(--shell-side-hover,#173653)!important;color:#fff!important}
  #nav button.active,#nav button[aria-current="page"]{background:rgba(105,174,252,.10)!important;color:#69aefc!important}
  #nav button.active .nav-icon,#nav button.active .nav-label,#nav button[aria-current="page"] .nav-icon,#nav button[aria-current="page"] .nav-label{color:#69aefc!important}
  #nav .nav-section,#nav .nav-version-footer span,#nav #sidebarWorkCurrent .sidebar-work-copy small,#nav .sidebar-work-option small{color:var(--shell-side-muted,#9eb2c8)!important}
  #nav #sidebarWorkCurrent{background:rgba(255,255,255,.06)!important;border-color:rgba(255,255,255,.10)!important;color:#fff!important}
  #nav #sidebarWorkCurrent .sidebar-work-copy,#nav #sidebarWorkCurrent .sidebar-work-copy b{color:#fff!important}
  #nav #sidebarWorkCurrent .sidebar-work-arrow{color:#cfe1f4!important;background:rgba(255,255,255,.06)!important;border-color:rgba(255,255,255,.18)!important}
}