/* Import Sidebar Menu Styles */
@import url('/assets/leobase/css/init_sidebar.css');

/* Font Declarations
-------------------------------------------------- */
@font-face {
  font-family: 'Roboto';
  src: url('/assets/leolia/fonts/roboto-regular.woff2') format('woff2'), 
       url('/assets/leo/fonts/roboto-regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'SegoeUI';
  src: url('/assets/leobase/fonts/SegoeUI.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Montserrat';
  src: url('/assets/leobase/fonts/montserrat-regular.woff2') format('woff2'),
       url('/assets/leobase/fonts/montserrat-regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Figtree';
  src: url('/assets/leobase/fonts/Figtree_weight.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

/* Base Styles
-------------------------------------------------- */
body {
  font-family: 'Figtree', sans-serif;
}

html, body {
  height: calc(100% - 30px);
  margin: 0; 
  padding: 0;
  display: flex;
  flex-direction: column;
  font-size: 96%;
}

html[data-theme-mode="light"] .desk-sidebar .standard-sidebar-item a[title="Settings"] .sidebar-item-label,
html[data-theme-mode="light"] .desk-sidebar .standard-sidebar-item a[title="Configuracion"] .sidebar-item-label,
html[data-theme-mode="light"] .desk-sidebar .standard-sidebar-item a[title="Home"] .sidebar-item-label,
html[data-theme-mode="light"] .desk-sidebar .standard-sidebar-item a[title="Inicio"] .sidebar-item-label,
html[data-theme-mode="light"] .desk-sidebar .standard-sidebar-item a[title="LIA"] .sidebar-item-label,
html[data-theme-mode="light"] .desk-sidebar .standard-sidebar-item a[title="Leo Settings"] .sidebar-item-label,
html[data-theme-mode="light"] .desk-sidebar .standard-sidebar-item a[title="Configurador Leo"] .sidebar-item-label {
  font-size: 11pt;
  color: #23415a !important;
  font-weight: 600;
}
html[data-theme-mode="dark"] .desk-sidebar .standard-sidebar-item a[title="Settings"] .sidebar-item-label,
html[data-theme-mode="dark"] .desk-sidebar .standard-sidebar-item a[title="Configuracion"] .sidebar-item-label,
html[data-theme-mode="dark"] .desk-sidebar .standard-sidebar-item a[title="Home"] .sidebar-item-label,
html[data-theme-mode="dark"] .desk-sidebar .standard-sidebar-item a[title="Inicio"] .sidebar-item-label,
html[data-theme-mode="dark"] .desk-sidebar .standard-sidebar-item a[title="LIA"] .sidebar-item-label,
html[data-theme-mode="dark"] .desk-sidebar .standard-sidebar-item a[title="Leo Settings"] .sidebar-item-label,
html[data-theme-mode="dark"] .desk-sidebar .standard-sidebar-item a[title="Configurador Leo"] .sidebar-item-label {
  font-size: 11pt;
  color: --var(green-100) !important;
  font-weight: 600;
}

/* Layout & Workspace Styles
-------------------------------------------------- */
[data-page-route="Workspaces"] .layout-main .layout-main-section {
  background-color: transparent;
  margin: 0px;
  padding: 6px;
  border: none !important;
}

button.standard-sidebar-label,
.desk-sidebar .standard-sidebar-label {
  display: none !important;
}

/* Responsive Adjustments
-------------------------------------------------- */
@media (min-width: 992px) {
  .col-lg-2 {
    flex: 0 0 21%;
    max-width: 21%;
  }
}

@media (max-width: 768px) {
  .layout-side-section {
    all: revert;
  }
}

@media (max-width: 480px) {
  [data-page-route="Workspaces"] .workspace-footer {
    display: none !important;
  }
}

/* Anti-flicker */
.desk-sidebar * {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Hide navbar visually but keep in DOM for JavaScript access */
body .navbar,
body.desk .navbar,
.frappe-desk .navbar {
  position: absolute !important;
  top: -9999px !important;
  left: -9999px !important;
  visibility: hidden !important;
  display: block !important; /* Keep in DOM but hidden */
}

/* Adjust layout when navbar is hidden */
body.desk .layout-main {
  margin-top: 0 !important;
}

/* Position the entire page-head at the top */
.page-head {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  background: var(--bg-color);
  box-shadow: var(--shadow-sm);
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Ensure proper spacing and alignment in page header */
.page-head .page-head-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 15px !important;
  height: auto !important;
  position: relative; /* For absolute positioning of navbar items */
  margin-left: 0;
  margin-right: 0;
}

/* Reduce hamburger menu left spacing on desktop */
@media (min-width: 769px) {
  .page-head .sidebar-toggle-btn {
    margin-left: -5px !important;
  }
}

/* Add padding to the layout-main to account for fixed header */
.layout-main {
  padding-top: 60px;
}

/* Adjust sidebar to start below fixed header */
.desk-sidebar {
  top: 60px !important;
  height: calc(100vh - 60px) !important;
}

/* Make page container and body full width */
.page-container,
.page-body {
  max-width: 100% !important;
  width: 100% !important;
}

/* Ensure the hamburger icon itself is properly sized */
.page-head .sidebar-toggle-btn svg {
  width: 24px !important;
  height: 24px !important;
}

/* Add padding to the layout-main to account for fixed header */
.layout-main {
  padding-top: 60px;
}

/* Adjust sidebar to start below fixed header */
.desk-sidebar {
  top: 60px !important;
  height: calc(100vh - 60px) !important;
}

/* Remove container constraints from page-head */
.page-head .container {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Fix for page-head direct children positioning */
.page-head > div {
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Style for navbar items when moved to page header */
.page-head .moved-navbar-nav {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  padding-right: 15px !important; /* Add padding to prevent cut-off */
  margin-left: auto !important; /* Push to the right */
  margin-right: 0 !important;
  gap: 10px;
  position: absolute;
  right: 0; /* Align to right edge */
  top: 50%;
  transform: translateY(-50%);
}

.page-head .moved-navbar-nav > li {
  display: flex !important;
  align-items: center;
  margin: 0;
}

.page-head .moved-navbar-nav .nav-item {
  position: relative;
  display: flex !important;
  align-items: center;
}

.page-head .moved-navbar-nav .dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 5px;
}

/* Ensure vertical separator is visible and styled */
.page-head .moved-navbar-nav .vertical-bar {
  display: block !important;
  width: 1px;
  height: 20px;
  background-color: var(--gray-300);
  margin: 0 5px;
}

/* Ensure buttons and links are properly styled */
.page-head .moved-navbar-nav .nav-link,
.page-head .moved-navbar-nav button {
  display: flex !important;
  align-items: center;
  white-space: nowrap;
}

/* Mobile responsive styles */
@media (max-width: 768px) {
  /* Reset page-head positioning on mobile */
  .page-head {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Remove any container constraints on mobile */
  .page-head .container,
  .page-head .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Fix any inner divs that might be causing offset */
  .page-head > div {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Adjust page header for mobile */
  .page-head .page-head-content {
    flex-wrap: nowrap !important;
    padding: 8px 15px !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Remove margin from hamburger menu - padding handles spacing */
  .page-head .sidebar-toggle-btn {
    margin-left: 0 !important;
  }
  
  /* Make page title take less space on mobile */
  .page-head .page-title {
    flex: 0 1 auto !important;
    max-width: 50% !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
  }
  
  /* Ensure navbar items stay on same line */
  .page-head .moved-navbar-nav {
    flex: 1 1 auto;
    justify-content: flex-end;
    gap: 5px;
    margin-left: 5px !important;
    margin-right: 0 !important;
    position: static !important;
    right: auto !important;
    transform: none !important;
  }
  
  /* Hide text labels on mobile, show only icons */
  .page-head .moved-navbar-nav .dropdown-help span:not(.icon) {
    display: none;
  }
  
  /* Smaller buttons on mobile */
  .page-head .moved-navbar-nav .nav-link,
  .page-head .moved-navbar-nav button {
    padding: 4px 8px;
    font-size: 14px;
  }
  
  /* Hide vertical separators on mobile */
  .page-head .moved-navbar-nav .vertical-bar {
    display: none !important;
  }
}

/* For very small screens */
@media (max-width: 480px) {
  /* Even more compact layout */
  .page-head .moved-navbar-nav {
    gap: 2px;
  }
  
  /* Hide page actions that are not essential */
  .page-head .page-actions .menu-btn-group,
  .page-head .page-actions .actions-btn-group {
    display: none !important;
  }
}

/* Make page container and body full width */
.page-container,
.page-body {
  max-width: 100% !important;
  width: 100% !important;
}

/* Back button styles */
.return-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 4px !important;
  min-width: auto !important;
  height: auto !important;
  margin-right: 6px !important;
  flex-shrink: 0;
  background: none !important;
  border: none !important;
  color: var(--text-muted);
  transition: color 0.2s ease;
}

.return-button:hover {
  color: var(--text-color);
  background: none !important;
}

.return-button svg {
  width: 14px;
  height: 14px;
}

/* When back button is in page-head-content before moved navbar */
.page-head-content > .return-button {
  margin-left: auto !important;
  margin-right: 6px !important;
}

/* Adjust moved navbar when back button is present */
.page-head-content > .return-button + .moved-navbar-nav {
  position: static !important;
  transform: none !important;
  margin-left: 0 !important;
}

/* Ensure workspace content doesn't overlap */
/*
[data-page-route="Workspaces"] .layout-main {
  padding-top: 0;
}
*/

/* Hide workspace footer */
/*
[data-page-route="Workspaces"] .workspace-footer {
  display: none;
}
*/