/* Bridge between ERP AI Agent legacy styles and the Velzon theme. */

/* Legacy CSS variables (used by chat.css / documents / favorites) → Velzon tokens,
   so those pages keep working and follow the theme's light/dark/presets. */
:root{
  --accent: var(--vz-primary);
  --ink:    var(--vz-body-color);
  --line:   var(--vz-border-color);
  --muted:  var(--vz-secondary-color);
  --bg:     var(--vz-secondary-bg);
}

.note{ color: var(--vz-secondary-color); font-size: .8125rem; }
#cSales,#cClients,#cTop,#cUsers{ width:100%; height:320px; }

/* Full-height app pages (chat / documents / favorites): pin the work area to the viewport to the RIGHT of
   the fixed sidebar and BELOW the fixed topbar, independent of Velzon's .main-content flow. This keeps the
   internal scroll working no matter the sidebar size (expanded / collapsed / hover) — collapsing the menu
   changes .main-content's margin, which used to break a height:100vh page-content; fixed positioning
   removes that dependency. */
body.app-fullheight .page-content{
  position: fixed; top: var(--vz-header-height, 70px); left: var(--erp-mw); right: 0; bottom: 0;
  height: auto; padding: 0; overflow: hidden; z-index: 1;
}
[data-sidebar-size=md] body.app-fullheight .page-content{ left: var(--erp-mw-md); }
[data-sidebar-size=sm] body.app-fullheight .page-content{ left: var(--erp-mw-sm); }
body.app-fullheight .page-content > .container-fluid{ padding: 0; max-width: none; height: 100%; overflow: hidden; min-height: 0; }
body.app-fullheight .footer{ display: none; }
body.app-fullheight .layout{ height: 100%; min-height: 0; overflow: hidden; }
body.app-fullheight .shell{ height: 100%; min-height: 0; }
/* Critical flexbox fix: a flex child won't scroll (it grows to its content) unless min-height:0 is set.
   Without this the messages area grew and pushed the whole page to scroll, taking the header + input box
   out of view. With it, only #messages scrolls; the header and the composer stay pinned. */
body.app-fullheight .shell > main,
body.app-fullheight .shell main{ min-height: 0; }
@media (max-width: 1024.98px){
  body.app-fullheight .page-content{ left: 0; }
}
@media (max-width: 767.98px){
  body.app-fullheight .page-content{ position: static; height: auto; overflow: visible; }
  body.app-fullheight .page-content > .container-fluid{ height: auto; overflow: visible; }
}

/* ============================================================
   Self-managed Velzon VERTICAL layout (Velzon's app.js removed).
   Guarantees a fixed, full-height sidebar with its own background
   so menu icons never float over page content on scroll/collapse.
   ============================================================ */
:root{ --erp-mw:250px; --erp-mw-md:180px; --erp-mw-sm:70px; --erp-hh:70px; }

/* Sidebar: fixed, full viewport height, own background, flex column */
[data-layout=vertical] .app-menu{
  position:fixed !important; top:0; left:0; bottom:0;
  width:var(--erp-mw) !important; height:100vh; z-index:1002; margin:0;
  display:flex; flex-direction:column;
  background-color:var(--vz-vertical-menu-bg, #fff);
  border-right:1px solid var(--vz-border-color, #e9ebec);
  box-shadow:0 2px 6px rgba(15,34,58,.06);
  transition:width .15s ease;
}
[data-layout=vertical][data-sidebar-size=md] .app-menu{ width:var(--erp-mw-md) !important; }
[data-layout=vertical][data-sidebar-size=sm] .app-menu{ width:var(--erp-mw-sm) !important; }
[data-layout=vertical] .app-menu .navbar-brand-box{
  flex:0 0 var(--erp-hh); height:var(--erp-hh); display:flex; align-items:center;
  padding:0 1.25rem; margin:0; position:static;
}
[data-layout=vertical][data-sidebar-size=sm] .app-menu .navbar-brand-box{ justify-content:center; padding:0; }
[data-layout=vertical] .app-menu #scrollbar{ flex:1 1 auto; min-height:0; height:auto !important; }

/* Topbar: fixed, offset by sidebar width */
[data-layout=vertical] #page-topbar{
  position:fixed; top:0; right:0; left:var(--erp-mw); z-index:1001;
  height:var(--erp-hh); background:var(--vz-header-bg, #fff);
  box-shadow:0 1px 2px rgba(56,65,74,.12);
}
[data-layout=vertical][data-sidebar-size=md] #page-topbar{ left:var(--erp-mw-md); }
[data-layout=vertical][data-sidebar-size=sm] #page-topbar{ left:var(--erp-mw-sm); }
[data-layout=vertical] #page-topbar .navbar-header{ height:var(--erp-hh); padding:0 1.5rem; }
[data-layout=vertical] #page-topbar .horizontal-logo{ display:none; }

/* Content: offset for the fixed sidebar (topbar offset comes from Velzon .page-content padding) */
[data-layout=vertical] .main-content{ margin-left:var(--erp-mw) !important; }
[data-layout=vertical][data-sidebar-size=md] .main-content{ margin-left:var(--erp-mw-md) !important; }
[data-layout=vertical][data-sidebar-size=sm] .main-content{ margin-left:var(--erp-mw-sm) !important; }

/* Menu items */
#navbar-nav{ list-style:none; padding:.5rem 0; margin:0; width:100%; }
#navbar-nav .nav-item{ width:100%; }
#navbar-nav .nav-link.menu-link{
  display:flex; align-items:center; gap:.7rem; padding:.6rem 1.25rem;
  color:var(--vz-vertical-menu-item-color, #545a6d); text-decoration:none; white-space:nowrap;
}
#navbar-nav .nav-link.menu-link:hover,
#navbar-nav .nav-link.menu-link:hover > span,
#navbar-nav .nav-link.menu-link:focus,
#navbar-nav .nav-link.menu-link:focus > span{ color:var(--vz-primary) !important; }
#navbar-nav .nav-link.menu-link:hover{ background:rgba(var(--vz-primary-rgb), .08); }
#navbar-nav .nav-link.menu-link:hover i{ color:var(--vz-primary) !important; }
#navbar-nav .nav-link.menu-link.active,
#navbar-nav .nav-link.menu-link.active > span{ color:var(--vz-primary) !important; font-weight:500; }
#navbar-nav .nav-link.menu-link.active{ background:rgba(var(--vz-primary-rgb), .1); }
#navbar-nav .nav-link.menu-link.active i{ color:var(--vz-primary) !important; }
#navbar-nav .nav-link.menu-link i{ font-size:1.05rem; min-width:1.4rem; text-align:center; flex:0 0 auto; }
#navbar-nav .menu-title{
  padding:.7rem 1.25rem .3rem; margin:0; font-size:.6875rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.04em; color:var(--vz-vertical-menu-title-color, #919da9);
}

/* Collapsed (sm): center icons, hide labels + section titles */
[data-sidebar-size=sm] #navbar-nav .nav-link.menu-link{ justify-content:center; padding:.65rem 0; }
[data-sidebar-size=sm] #navbar-nav .nav-link.menu-link span{ display:none; }
[data-sidebar-size=sm] #navbar-nav .nav-link.menu-link i{ min-width:auto; font-size:1.25rem; }
[data-sidebar-size=sm] #navbar-nav .menu-title{ height:0; padding:0; margin:0; overflow:hidden; visibility:hidden; }
[data-sidebar-size=sm] .app-menu .logo-txt{ display:none; }

/* Mobile (<=1024px): sidebar becomes an off-canvas drawer */
.vertical-overlay{ display:none; }
@media (max-width:1024.98px){
  [data-layout=vertical] .app-menu{ left:calc(-1 * var(--erp-mw)) !important; width:var(--erp-mw) !important; transition:left .2s ease; }
  body.vertical-sidebar-enable .app-menu{ left:0 !important; }
  [data-layout=vertical] #page-topbar{ left:0; }
  [data-layout=vertical] .main-content{ margin-left:0 !important; }
  [data-sidebar-size=sm] #navbar-nav .nav-link.menu-link{ justify-content:flex-start; padding:.6rem 1.25rem; }
  [data-sidebar-size=sm] #navbar-nav .nav-link.menu-link span{ display:inline; }
  [data-sidebar-size=sm] #navbar-nav .menu-title{ height:auto; padding:.7rem 1.25rem .3rem; visibility:visible; }
  [data-sidebar-size=sm] .app-menu .logo-txt{ display:inline; }
  .vertical-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:1001; }
  body.vertical-sidebar-enable .vertical-overlay{ display:block; }
}

/* Collapsed (sm): suppress Velzon's hover flyout/expand (our menu is flat — no submenus).
   Velzon expands the item to ~270px on hover and shows a rotated caret (:after) + a
   .menu-dropdown panel to the right; for flat items that just looks like a stray icon. */
[data-sidebar-size=sm] #navbar-nav .nav-item:hover > .nav-link.menu-link{
  width:auto !important; background:rgba(var(--vz-primary-rgb), .08) !important;
}
[data-sidebar-size=sm] #navbar-nav .nav-item:hover > .nav-link.menu-link span{ display:none !important; padding-left:0 !important; }
[data-sidebar-size=sm] #navbar-nav .nav-link.menu-link::after,
[data-sidebar-size=sm] #navbar-nav .nav-item:hover > .nav-link.menu-link::after{ display:none !important; content:none !important; }
[data-sidebar-size=sm] #navbar-nav .nav-item:hover > .menu-dropdown{ display:none !important; }

/* Remove the floating theme-customizer gear button (bottom-right).
   Light/Dark, language and fullscreen now live in the topbar, so the gear is redundant. */
.customizer-setting{ display:none !important; }

/* ---- App-wide button polish: make .btn-accent a proper Bootstrap variant so hover/active/focus
   never break the colour (previously only a filter was applied, which fought Bootstrap's own hover). */
.btn-accent{
  --bs-btn-color:#fff; --bs-btn-bg:var(--accent,#0f6e56); --bs-btn-border-color:var(--accent,#0f6e56);
  --bs-btn-hover-color:#fff; --bs-btn-hover-bg:#0c5c47; --bs-btn-hover-border-color:#0c5c47;
  --bs-btn-active-color:#fff; --bs-btn-active-bg:#0a4e3c; --bs-btn-active-border-color:#0a4e3c;
  --bs-btn-focus-shadow-rgb:15,110,86;
  --bs-btn-disabled-color:#fff; --bs-btn-disabled-bg:#0f6e56; --bs-btn-disabled-border-color:#0f6e56;
  /* Velzon's .btn reads --vz-btn-* (not --bs-btn-*), so mirror them or the fill never shows. */
  --vz-btn-color:#fff; --vz-btn-bg:var(--accent,#0f6e56); --vz-btn-border-color:var(--accent,#0f6e56);
  --vz-btn-hover-color:#fff; --vz-btn-hover-bg:#0c5c47; --vz-btn-hover-border-color:#0c5c47;
  --vz-btn-active-color:#fff; --vz-btn-active-bg:#0a4e3c; --vz-btn-active-border-color:#0a4e3c;
  --vz-btn-disabled-color:#fff; --vz-btn-disabled-bg:#0f6e56; --vz-btn-disabled-border-color:#0f6e56;
  --vz-btn-focus-shadow-rgb:15,110,86;
  font-weight:600;
}
/* The admin custom buttons keep their colour on hover (fill, not a washed-out filter). */
button.act:hover{ background:var(--vz-primary); filter:none; opacity:.92; }