/* MTP docs — appended last in /css/bundle.css */

:root {
  --docs-sidebar-width: 280px;
  --docs-toc-width: 240px;
  --docs-content-max: 720px;
  --docs-gap: 32px;
}

.docs-page { padding-top: 32px; padding-bottom: 80px; }

.docs-breadcrumb { font-size: 14px; color: var(--medium-gray); margin-bottom: 16px; }
.docs-breadcrumb a { color: var(--base-color); text-decoration: none; }
.docs-breadcrumb a:hover { text-decoration: underline; }

/* Hero-less docs pages: navbar sits on white, so flip to the dark wordmark logo */
body.docs-light header .navbar-brand .default-logo { visibility: hidden; opacity: 0; width: 0; }
body.docs-light header .navbar-brand .alt-logo     { visibility: visible; opacity: 1; width: auto; }

.docs-layout {
  display: grid;
  grid-template-columns: var(--docs-sidebar-width) minmax(0, 1fr);
  gap: var(--docs-gap);
}
.docs-layout--article {
  grid-template-columns: var(--docs-sidebar-width) minmax(0, 1fr) var(--docs-toc-width);
}
@media (max-width: 991.98px) {
  .docs-layout, .docs-layout--article { grid-template-columns: 1fr; }
  .docs-sidebar { display: none; }
  .docs-toc { display: none; }
}

.docs-sidebar { position: sticky; top: 80px; align-self: start; max-height: calc(100vh - 100px); overflow-y: auto; }
.docs-sidebar h6 { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--medium-gray); margin: 16px 0 8px; }
.docs-sidebar ul { list-style: none; padding: 0; margin: 0 0 8px; }
.docs-sidebar li a { display: block; padding: 6px 12px; border-radius: 6px; color: var(--dark-gray); text-decoration: none; font-size: 15px; }
.docs-sidebar li a:hover { background: var(--very-light-gray); }
.docs-sidebar li a.active { background: var(--very-light-gray); color: var(--base-color); font-weight: 600; }

.docs-toc { position: sticky; top: 80px; align-self: start; max-height: calc(100vh - 100px); overflow-y: auto; }
.docs-toc h6 { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--medium-gray); margin: 0 0 12px; }
.docs-toc ol { list-style: none; padding: 0; margin: 0; }
.docs-toc li a { display: block; padding: 4px 0; color: var(--medium-gray); text-decoration: none; font-size: 14px; border-left: 2px solid transparent; padding-left: 12px; }
.docs-toc li a:hover, .docs-toc li a.active { color: var(--base-color); border-left-color: var(--base-color); }
.docs-toc li.depth-3 a { padding-left: 24px; font-size: 13px; }

.docs-article { max-width: var(--docs-content-max); }
.docs-article h1 { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 36px; line-height: 1.2; margin-bottom: 16px; }
.docs-article h2 { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 24px; margin: 40px 0 12px; }
.docs-article h3 { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; font-size: 18px; margin: 24px 0 8px; }
.docs-article p, .docs-article li { font-size: 17px; line-height: 30px; }
.docs-article a { color: var(--base-color); text-decoration: underline; }
.docs-article img { max-width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--extra-medium-gray); margin: 16px 0; }
.docs-article code { background: var(--very-light-gray); padding: 2px 6px; border-radius: 4px; font-size: 0.92em; }
.docs-article pre { background: var(--charcoal-blue); color: #fff; padding: 16px; border-radius: 8px; overflow-x: auto; }
.docs-article pre code { background: transparent; padding: 0; color: inherit; }
.docs-article table { width: 100%; border-collapse: collapse; margin: 16px 0; }
.docs-article th, .docs-article td { border-bottom: 1px solid var(--extra-medium-gray); padding: 8px 12px; text-align: left; }
.docs-article th { font-weight: 600; }

.docs-meta { color: var(--medium-gray); font-size: 14px; margin-bottom: 24px; }
.docs-meta time { margin-left: 12px; }

.docs-role-badge { display: inline-block; padding: 2px 10px; font-size: 12px; font-weight: 600; border-radius: 999px; background: var(--very-light-gray); color: var(--dark-gray); text-transform: uppercase; letter-spacing: 0.03em; margin-right: 4px; }
.docs-role-badge--admin { background: #fde68a; }
.docs-role-badge--dispatcher { background: #bbf7d0; }
.docs-role-badge--accountant { background: #bfdbfe; }
.docs-role-badge--seller { background: #fbcfe8; }
.docs-role-badge--driver { background: #ddd6fe; }
.docs-role-badge--warehouse { background: #fed7aa; }

.docs-role-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.docs-role-filter a { display: inline-block; padding: 6px 14px; font-size: 14px; border-radius: 999px; background: var(--very-light-gray); color: var(--dark-gray); text-decoration: none; }
.docs-role-filter a.active { background: var(--base-color); color: #fff; }

.docs-callout { border-radius: 8px; padding: 16px 20px; margin: 24px 0; border-left: 4px solid; }
.docs-callout__label { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; }
.docs-callout__body p:last-child { margin-bottom: 0; }
.docs-callout--tip { background: #ecfdf5; border-color: var(--base-color); }
.docs-callout--tip .docs-callout__label { color: #047857; }
.docs-callout--warning { background: #fef3c7; border-color: #d97706; }
.docs-callout--warning .docs-callout__label { color: #92400e; }
.docs-callout--example { background: #eff6ff; border-color: #2563eb; }
.docs-callout--example .docs-callout__label { color: #1d4ed8; }
.docs-callout--note { background: var(--very-light-gray); border-color: var(--medium-gray); }
.docs-callout--note .docs-callout__label { color: var(--dark-gray); }

.docs-section-card { display: block; padding: 24px; background: #fff; border-radius: 10px; box-shadow: 0 2px 12px rgba(0,0,0,0.05); text-decoration: none; color: inherit; transition: transform 0.2s, box-shadow 0.2s; height: 100%; }
.docs-section-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
.docs-section-card__icon { font-size: 32px; background: linear-gradient(50deg, #09AFEA 0%, #19E089 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 12px; display: block; }
.docs-section-card__title { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 20px; color: var(--dark-gray); margin-bottom: 8px; }
.docs-section-card__desc { font-size: 15px; color: var(--medium-gray); margin-bottom: 12px; }
.docs-section-card__count { font-size: 13px; color: var(--base-color); font-weight: 600; }
.docs-section-card--stub .docs-section-card__count { color: var(--medium-gray); font-style: italic; }

.docs-related { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--extra-medium-gray); }
.docs-related h2 { font-size: 18px; }
.docs-related ul { list-style: none; padding: 0; }
.docs-related li { margin: 8px 0; }

.docs-search-input { width: 100%; max-width: 600px; padding: 14px 20px; font-size: 17px; border: 2px solid var(--extra-medium-gray); border-radius: 999px; }
.docs-search-input:focus { outline: none; border-color: var(--base-color); }