/* ==========================================================================
   Evolution ERP Documentation — theme overrides
   Loaded after Bootstrap in head.inc.php.
   ========================================================================== */

:root {
  --docs-topbar-height: 56px;
  --docs-accent: #2563eb;
  --docs-accent-soft: #eff4ff;
  --docs-sidebar-bg: #f7f8fa;
  --docs-border: #e6e8eb;
  --docs-text-muted: #6b7280;
}

body {
  padding-top: var(--docs-topbar-height);
  color: #1f2933;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  -webkit-font-smoothing: antialiased;
}

/* ---------- Top header bar ------------------------------------------------ */

.docs-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--docs-topbar-height);
  z-index: 1030;
  display: flex;
  align-items: center;
  padding: 0 1.25rem;
  background: #ffffff;
  border-bottom: 1px solid var(--docs-border);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.docs-topbar-inner {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
}

/* Placeholder for the company logo — swap the inner text/markup for an <img> */
.docs-logo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  min-width: 110px;
  padding: 0 0.75rem;
  border: 1px dashed #c4cad3;
  border-radius: 8px;
  background: var(--docs-accent-soft);
  color: var(--docs-accent);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.docs-logo {
  height: 36px;
  width: auto;
  display: block;
}

.docs-topbar-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: #111827;
}

.docs-topbar-title .docs-topbar-sub {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--docs-text-muted);
}

/* ---------- Top-bar search ------------------------------------------------ */
.docs-topbar-search .input-group-text {
  background: #fff;
  border-right: 0;
  color: var(--docs-text-muted);
}
.docs-topbar-search .form-control {
  border-left: 0;
  box-shadow: none;
}
.docs-topbar-search .input-group-text .material-symbols-rounded {
  font-size: 1.15rem;
}
/* The "go to results" button — keep the icon centred in the small control. */
.docs-topbar-search #docsSearchGo {
  display: flex;
  align-items: center;
  padding: 0 0.5rem;
}
.docs-topbar-search #docsSearchGo .material-symbols-rounded {
  font-size: 1.15rem;
}
#docsSearchResults .list-group-item {
  padding: 0.5rem 0.75rem;
}
#docsSearchResults .badge {
  font-weight: 500;
}
#docsSearchResults small mark,
.docs-search-results mark,
main article mark {
  background: #fff3b0;
  padding: 0 0.1em;
  border-radius: 2px;
}

/* Below the sidebar breakpoint the title crowds the search — drop the title. */
@media (max-width: 767.98px) {
  .docs-topbar-title { display: none; }
  .docs-topbar-search { max-width: none; }
}

/* ---------- Sidebar — tighter, modern ------------------------------------- */

#docsSidebar {
  background: var(--docs-sidebar-bg) !important;
}

/* Kill Bootstrap's roomy .p-3; sit the sticky rail just under the top bar. */
#docsSidebar .position-sticky {
  top: var(--docs-topbar-height);
  height: calc(100vh - var(--docs-topbar-height));
  overflow-y: auto;
  padding: 1rem 0.85rem 2rem;
}

/* Section headings between nav groups */
#docsSidebar .h5,
#docsSidebar h6 {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--docs-text-muted);
  margin: 1.1rem 0.5rem 0.35rem;
}

#docsSidebar h6:first-child,
#docsSidebar .position-sticky > .h5:first-child {
  margin-top: 0;
}

/* Expand all / Collapse all controls at the top of the rail */
#docsSidebar .docs-nav-controls {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0 0.5rem 0.6rem;
  margin-bottom: 0.35rem;
  border-bottom: 1px solid var(--docs-border);
}

#docsSidebar .docs-nav-ctrl {
  background: none;
  border: 0;
  padding: 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--docs-text-muted);
  cursor: pointer;
}

#docsSidebar .docs-nav-ctrl:hover {
  color: var(--docs-accent);
}

#docsSidebar .docs-nav-ctrl-sep {
  color: #cbd0d6;
  font-size: 0.7rem;
}

/* Collapsible section toggle (a <button> wearing the .h5 heading style) */
#docsSidebar .docs-nav-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  padding: 0.15rem 0.5rem;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
}

#docsSidebar .docs-nav-section:hover {
  color: #111827;
}

#docsSidebar .docs-nav-caret {
  font-size: 1.2rem;
  color: #9aa1ab;
  transition: transform 0.15s ease;
}

/* Bootstrap adds .collapsed to a toggle whose target is closed */
#docsSidebar .docs-nav-section.collapsed .docs-nav-caret {
  transform: rotate(-90deg);
}

/* Compact the gaps between nav groups (was mb-4 = 1.5rem) */
#docsSidebar .nav {
  margin-bottom: 0.35rem !important;
  gap: 1px;
}

#docsSidebar .nav-link {
  padding: 0.3rem 0.6rem;
  font-size: 0.875rem;
  line-height: 1.3;
  color: #374151;
  border-radius: 6px;
  transition: background-color 0.12s ease, color 0.12s ease;
}

#docsSidebar .nav-link:hover {
  background: #eceef1;
  color: #111827;
}

#docsSidebar .nav-link.active {
  background: var(--docs-accent);
  color: #fff;
  font-weight: 600;
}

/* Sub-heading inside a section (Plugins -> Shopify / HubSpot).
   Its left edge lines up with the section heading above it: that text sits at
   1rem, being the heading's own 0.5rem margin plus the 0.5rem padding on the
   button wrapping it. Match that and the rail reads as one straight column
   instead of the sub-heading hanging out to the left. */
#docsSidebar .docs-nav-subhead {
  padding: 0.5rem 0.6rem 0.15rem 1rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--docs-text-muted);
}

/* ...and its pages step in from it, so the nesting reads at a glance. The indent
   is padding rather than a margin so the hover/active pill still spans the full
   width of the rail. */
#docsSidebar .docs-nav-grouped .nav-link {
  padding-left: 1.5rem;
  padding-right: 0.35rem;
}

/* Thin scrollbar for the rail */
#docsSidebar .position-sticky::-webkit-scrollbar {
  width: 7px;
}
#docsSidebar .position-sticky::-webkit-scrollbar-thumb {
  background: #d3d7dd;
  border-radius: 4px;
}

/* ---------- Main content polish ------------------------------------------- */

/* Headings use the sidebar grey scale:
   #111827 (strongest) → #374151 → #6b7280 (muted). */
main h1,
main h2,
main h3,
main h4,
main h5,
main h6 {
  color: #111827;
  font-weight: 700;
  line-height: 1.2;
}

main h1 {
  font-size: 2.15rem;
  letter-spacing: -0.025em;
  margin-bottom: 0.35rem;
}

main h2 {
  font-size: 1.5rem;
  letter-spacing: -0.015em;
  color: #1f2933;
  margin-top: 2.25rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--docs-border);
}

main h3 {
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  color: #374151;
  margin-top: 1.5rem;
}

main h4 {
  font-size: 1.02rem;
  color: #374151;
  margin-top: 1.25rem;
}

main h5:not(.card-title),
main h6:not(.card-title) {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--docs-text-muted);
}

/* Card titles keep a readable heading size, not the uppercase label style */
main .card-title {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  color: #1f2933;
}

/* The page subtitle set in header.inc.php */
main header .lead {
  color: var(--docs-text-muted) !important;
  font-size: 1.05rem;
}

main .card {
  border: 1px solid var(--docs-border);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

main .card:hover {
  box-shadow: 0 6px 18px rgba(16, 24, 40, 0.08);
  transform: translateY(-2px);
}

main .btn-primary {
  --bs-btn-bg: var(--docs-accent);
  --bs-btn-border-color: var(--docs-accent);
  --bs-btn-hover-bg: #1d4fd7;
  --bs-btn-hover-border-color: #1d4fd7;
}

/* ---------- "What's on this page" contents block --------------------------
   Rendered by docPageNav() in includes/pagenav.inc.php. See that file for how
   to add it to a page.
   -------------------------------------------------------------------------- */

/* Anchor targets land under the fixed topbar without this, which puts the
   heading the reader just clicked underneath the bar and looks like the jump
   missed. Applies to every in-page anchor on the docs site, not just the
   contents block. */
main [id] {
  scroll-margin-top: calc(var(--docs-topbar-height) + 1.25rem);
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

.docs-pagenav {
  margin: 0 0 2.5rem;
  padding: 1.1rem 1.35rem 1.25rem;
  background: var(--docs-accent-soft);
  border: 1px solid #d8e3fb;
  border-radius: 12px;
}

/* Beats `main h2`, which carries a top margin and a rule underneath. */
main .docs-pagenav-title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.85rem;
  padding: 0;
  border: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1d4fd7;
}

.docs-pagenav-title .material-symbols-rounded {
  font-size: 1.05rem;
}

.docs-pagenav-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: docsPageNav;
}

@media (max-width: 767.98px) {
  .docs-pagenav-list { grid-template-columns: minmax(0, 1fr); }
}

.docs-pagenav-list li {
  counter-increment: docsPageNav;
}

.docs-pagenav-list a {
  display: block;
  padding: 0.4rem 0.55rem 0.4rem 2rem;
  position: relative;
  border-radius: 7px;
  text-decoration: none;
  color: #1f2933;
  transition: background-color 0.12s ease;
}

/* The number is generated rather than typed, so reordering the array in the
   page cannot leave the list numbered 1, 2, 2, 4. */
.docs-pagenav-list a::before {
  content: counter(docsPageNav);
  position: absolute;
  left: 0.5rem;
  top: 0.45rem;
  width: 1.15rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--docs-accent);
  text-align: right;
}

.docs-pagenav-list a:hover,
.docs-pagenav-list a:focus-visible {
  background: #ffffff;
}

.docs-pagenav-label {
  display: block;
  font-weight: 600;
  line-height: 1.35;
}

.docs-pagenav-list a:hover .docs-pagenav-label {
  color: #1d4fd7;
}

.docs-pagenav-desc {
  display: block;
  font-size: 0.85rem;
  line-height: 1.35;
  color: var(--docs-text-muted);
}