/* =========================================================
   ENERGOSKAN DESIGN SYSTEM v1
   Корпоративные компоненты инженерной документации
   ========================================================= */

:root {
  --es-radius-sm: 4px;
  --es-radius-md: 7px;
  --es-shadow-sm: 0 8px 22px rgba(44, 59, 82, 0.08);
  --es-shadow-md: 0 14px 34px rgba(44, 59, 82, 0.12);
  --es-transition: 180ms ease;
}

/* Страница нового формата */
.es-doc-page {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

/* Hero */
.es-doc-hero {
  position: relative;
  overflow: hidden;
  padding: 30px 32px;
  background:
    linear-gradient(
      135deg,
      hsl(var(--primary) / 0.12),
      hsl(var(--card)) 52%
    );
  border: 1px solid hsl(var(--border));
  border-left: 4px solid hsl(var(--primary));
  border-radius: var(--es-radius-md);
  box-shadow: var(--es-shadow-sm);
}

.es-doc-hero::after {
  content: "";
  position: absolute;
  right: -35px;
  top: -55px;
  width: 180px;
  height: 180px;
  border: 1px solid hsl(var(--primary) / 0.16);
  transform: rotate(35deg);
}

.es-doc-kicker {
  margin-bottom: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: hsl(var(--primary));
}

.es-doc-title {
  max-width: 820px;
  margin: 0;
  font-size: clamp(34px, 4vw, 46px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: hsl(var(--foreground));
}

.es-doc-title em {
  font-style: normal;
  color: hsl(var(--primary));
}

.es-doc-lead {
  max-width: 730px;
  margin: 17px 0 0;
  font-size: 16px;
  line-height: 1.72;
  color: hsl(var(--muted-foreground));
}

/* Метаданные страницы */
.es-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.es-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 31px;
  padding: 5px 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: hsl(var(--foreground));
  background: hsl(var(--background) / 0.7);
  border: 1px solid hsl(var(--border));
  border-radius: 999px;
}

.es-meta-dot {
  width: 7px;
  height: 7px;
  background: hsl(var(--primary));
  border-radius: 50%;
  box-shadow: 0 0 0 4px hsl(var(--primary) / 0.12);
}

/* Сетка карточек */
.es-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

/* Основная карточка */
.es-card {
  position: relative;
  overflow: hidden;
  padding: 25px 26px 27px;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--es-radius-md);
  box-shadow: var(--es-shadow-sm);
  transition:
    transform var(--es-transition),
    border-color var(--es-transition),
    box-shadow var(--es-transition);
}

.es-card:hover {
  transform: translateY(-2px);
  border-color: hsl(var(--primary) / 0.48);
  box-shadow: var(--es-shadow-md);
}

.es-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 52px;
  background: hsl(var(--primary));
}

.es-card-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 19px;
  padding-bottom: 16px;
  border-bottom: 1px solid hsl(var(--border));
}

.es-card-index {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: hsl(var(--primary));
  background: hsl(var(--primary) / 0.09);
  border: 1px solid hsl(var(--primary) / 0.25);
  border-radius: var(--es-radius-sm);
}

.es-card-title {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.28;
  color: hsl(var(--foreground));
}

.es-card-subtitle {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.5;
  color: hsl(var(--muted-foreground));
}

/* Чек-лист */
.es-checklist {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.es-check-item {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 11px;
  align-items: start;
  padding: 10px 11px;
  line-height: 1.55;
  background: hsl(var(--muted) / 0.32);
  border: 1px solid transparent;
  border-radius: var(--es-radius-sm);
  transition:
    background-color var(--es-transition),
    border-color var(--es-transition),
    transform var(--es-transition);
}

.es-check-item:hover {
  transform: translateX(2px);
  background: hsl(var(--primary) / 0.06);
  border-color: hsl(var(--primary) / 0.19);
}

.es-check-icon {
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  margin-top: 1px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: hsl(var(--primary));
  background: hsl(var(--primary) / 0.1);
  border: 1px solid hsl(var(--primary) / 0.26);
  border-radius: 50%;
}

/* Информационный блок */
.es-callout {
  position: relative;
  padding: 20px 22px 20px 58px;
  background: hsl(var(--primary) / 0.055);
  border: 1px solid hsl(var(--primary) / 0.22);
  border-radius: var(--es-radius-md);
}

.es-callout-icon {
  position: absolute;
  left: 20px;
  top: 21px;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: hsl(var(--primary));
  border: 1px solid hsl(var(--primary) / 0.3);
  border-radius: 50%;
}

.es-callout-title {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
  color: hsl(var(--foreground));
}

.es-callout-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: hsl(var(--muted-foreground));
}

/* Нижний статусный блок */
.es-result {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: center;
  padding: 21px 23px;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--es-radius-md);
}

.es-result-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 700;
  color: hsl(var(--primary));
  background: hsl(var(--primary) / 0.1);
  border: 1px solid hsl(var(--primary) / 0.28);
  border-radius: 50%;
}

.es-result-title {
  margin: 0 0 3px;
  font-size: 15px;
  font-weight: 700;
  color: hsl(var(--foreground));
}

.es-result-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: hsl(var(--muted-foreground));
}

@media (max-width: 800px) {
  .es-doc-hero {
    padding: 24px 21px;
  }

  .es-doc-title {
    font-size: 32px;
  }

  .es-card-grid {
    grid-template-columns: 1fr;
  }

  .es-card {
    padding: 21px 19px 23px;
  }

  .es-callout {
    padding-right: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .es-card,
  .es-check-item {
    transition: none;
  }
}

/* =========================================================
   ENERGOSKAN DESIGN SYSTEM v1.1
   Компактный Hero и оптимальная ширина документации
   ========================================================= */

.es-doc-page {
  width: 100%;
  max-width: 1240px;
  margin-right: auto;
  margin-left: auto;
  gap: 20px;
}

.es-doc-hero {
  min-height: auto;
  padding: 23px 27px 22px;
}

.es-doc-hero::after {
  right: -52px;
  top: -80px;
  width: 170px;
  height: 170px;
}

.es-doc-kicker {
  margin-bottom: 8px;
  font-size: 10px;
}

.es-doc-title {
  max-width: 760px;
  font-size: clamp(30px, 3.2vw, 40px);
  line-height: 1.05;
}

.es-doc-lead {
  max-width: 700px;
  margin-top: 11px;
  font-size: 14px;
  line-height: 1.6;
}

.es-meta-row {
  gap: 8px;
  margin-top: 15px;
}

.es-meta-chip {
  min-height: 27px;
  padding: 4px 9px;
  font-size: 9px;
}

.es-card-grid {
  gap: 16px;
}

.es-card {
  padding: 21px 22px 22px;
}

.es-card-head {
  gap: 12px;
  margin-bottom: 15px;
  padding-bottom: 13px;
}

.es-card-index {
  flex-basis: 34px;
  width: 34px;
  height: 34px;
}

.es-card-title {
  font-size: 17px;
}

.es-card-subtitle {
  font-size: 12px;
}

.es-checklist {
  gap: 8px;
}

.es-check-item {
  grid-template-columns: 25px 1fr;
  gap: 10px;
  min-height: 45px;
  padding: 9px 10px;
  font-size: 13px;
  line-height: 1.45;
}

.es-check-icon {
  width: 22px;
  height: 22px;
  font-size: 12px;
}

.es-callout {
  padding-top: 17px;
  padding-bottom: 17px;
}

.es-result {
  padding-top: 17px;
  padding-bottom: 17px;
}

@media (max-width: 800px) {
  .es-doc-page {
    gap: 16px;
  }

  .es-doc-hero {
    padding: 20px 18px;
  }

  .es-doc-title {
    font-size: 29px;
  }

  .es-meta-row {
    margin-top: 13px;
  }

  .es-card {
    padding: 18px 16px 19px;
  }
}

/* =========================================================
   ENERGOSKAN SIDEBAR v1
   ========================================================= */

.kb-sidebar {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid hsl(var(--border));
  box-shadow: 0 10px 28px rgba(0,0,0,.12);
}

.kb-sidebar-section-title {
  padding: 16px 18px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
}

.kb-sidebar a,
.kb-sidebar button,
.kb-nav-item {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-left: 3px solid transparent;
  transition: all .18s ease;
  font-size: 14px;
  line-height: 1.35;
}

.kb-sidebar a:hover,
.kb-sidebar button:hover,
.kb-nav-item:hover {
  background: hsl(var(--primary) / .08);
  border-left-color: hsl(var(--primary));
  transform: translateX(2px);
}

.kb-sidebar .active,
.kb-sidebar [aria-current="page"] {
  background: linear-gradient(
      90deg,
      hsl(var(--primary) / .18),
      transparent 80%
  );
  border-left-color: hsl(var(--primary));
  font-weight: 600;
}

.kb-sidebar svg,
.kb-sidebar img,
.kb-sidebar .icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.kb-sidebar hr {
  margin: 10px 14px;
  opacity: .18;
}

/* ==========================================================
   ENERGOSKAN KB SIDEBAR v2
   ========================================================== */

#kb-side{
    padding:10px;
}

#kb-side .kb-group-h{

    margin:18px 0 8px;

    padding:0 12px;

    font-size:11px;

    font-weight:700;

    letter-spacing:.12em;

    text-transform:uppercase;

    color:hsl(var(--muted-foreground));
}

#kb-side .kb-item{

    display:flex;

    align-items:center;

    gap:12px;

    min-height:46px;

    margin:4px 0;

    padding:10px 14px;

    border-radius:8px;

    border-left:3px solid transparent;

    cursor:pointer;

    transition:.18s;
}

#kb-side .kb-item:hover{

    background:hsl(var(--primary)/.08);

    border-left-color:hsl(var(--primary));

    transform:translateX(3px);
}

#kb-side .kb-item.active{

    background:linear-gradient(
        90deg,
        hsl(var(--primary)/.18),
        transparent
    );

    border-left-color:hsl(var(--primary));

    font-weight:600;

    box-shadow:0 3px 10px rgba(0,0,0,.08);
}

#kb-side .kb-item span:first-child{

    width:24px;

    text-align:center;

    font-size:18px;

    flex:none;
}

#kb-side .kb-item span:last-child{

    line-height:1.35;

    font-size:14px;
}


/* Коррекция расстояния между разделителем и заголовком группы */
#kb-side .kb-group-h {
  margin-top: 24px;
  padding-top: 4px;
}

#kb-side .kb-group-h:first-child {
  margin-top: 8px;
  padding-top: 0;
}

/* Portal version under Energoskan brand */
.navbar-brand {
  position: relative;
}

.brand-version {
  display: block;
  margin-top: 2px;
  font-size: 8px;
  line-height: 1;
  letter-spacing: 0.12em;
  color: var(--accent, #22d3ee);
  opacity: 0.72;
  text-transform: uppercase;
  white-space: nowrap;
}


/* =========================================================
   ENERGOSKAN DESIGN SYSTEM V2 — LIGHT FOUNDATION
   Основано на фирменной системе Energoskan
   ========================================================= */

:root:not(.dark) {
  --background: 200 20% 97%;
  --foreground: 203 30% 10%;

  --card: 0 0% 100%;
  --card-foreground: 203 30% 10%;

  --primary: 185 100% 24%;
  --primary-foreground: 0 0% 100%;

  --secondary: 190 22% 92%;
  --secondary-foreground: 203 30% 10%;

  --muted: 195 18% 93%;
  --muted-foreground: 203 24% 24%;

  --accent: 28 91% 54%;
  --accent-foreground: 0 0% 100%;

  --border: 195 18% 74%;
  --input: 195 18% 74%;
  --ring: 185 100% 24%;

  --smui-surface-0: 210 20% 98%;
  --smui-surface-1: 0 0% 100%;
  --smui-surface-2: 195 14% 96%;
  --smui-surface-3: 195 12% 92%;

  --es-shadow-sm:
    0 1px 2px rgba(26, 32, 38, 0.04),
    0 8px 24px rgba(0, 89, 107, 0.055);

  --es-shadow-md:
    0 3px 8px rgba(26, 32, 38, 0.06),
    0 16px 36px rgba(0, 89, 107, 0.08);
}

/* Общий светлый фон */
:root:not(.dark) body {
  background-color: #f6f8fa;
  color: #1d252c;
}

/* Техническая сетка должна быть почти незаметной */
:root:not(.dark) body::before,
:root:not(.dark) body::after {
  opacity: 0.035 !important;
}

/* Рабочая область базы знаний */
:root:not(.dark) .kb-layout {
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 34px;
}

/* Левая панель */
:root:not(.dark) .kb-side {
  padding: 10px;
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fbfcfc 100%
    );
  border: 1px solid #d9e2e4;
  border-radius: 6px;
  box-shadow: var(--es-shadow-sm);
}

/* Пункт меню */
:root:not(.dark) .kb-item {
  position: relative;
  min-height: 43px;
  margin: 2px 0;
  padding: 10px 12px;
  gap: 11px;
  color: #53636b;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  transition:
    color 160ms ease,
    background-color 160ms ease,
    border-color 160ms ease,
    transform 160ms ease;
}

:root:not(.dark) .kb-item:hover {
  color: #00596b;
  background: rgba(0, 110, 120, 0.045);
  border-color: rgba(0, 110, 120, 0.12);
  transform: translateX(2px);
}

/* Активный раздел */
:root:not(.dark) .kb-item.active {
  color: #17343b;
  font-weight: 700;
  background:
    linear-gradient(
      90deg,
      rgba(0, 110, 120, 0.105),
      rgba(0, 110, 120, 0.025)
    );
  border-color: rgba(0, 110, 120, 0.12);
  box-shadow: none;
}

:root:not(.dark) .kb-item.active::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 7px;
  bottom: 7px;
  width: 3px;
  background: #006e78;
  border-radius: 0 3px 3px 0;
}

:root:not(.dark) .kb-item.active::after {
  content: "";
  position: absolute;
  right: 9px;
  top: 50%;
  width: 5px;
  height: 5px;
  background: #f58220;
  border-radius: 50%;
  transform: translateY(-50%);
}

/* Иконки */
:root:not(.dark) .kb-item-icon {
  color: #5f747b;
}

:root:not(.dark) .kb-item:hover .kb-item-icon,
:root:not(.dark) .kb-item.active .kb-item-icon {
  color: #006e78;
}

/* Поиск */
:root:not(.dark) .kb-search,
:root:not(.dark) #kb-search {
  background: #ffffff;
  border-color: #d7e0e2;
  box-shadow: 0 2px 10px rgba(0, 89, 107, 0.035);
}

:root:not(.dark) .kb-search:focus,
:root:not(.dark) #kb-search:focus {
  border-color: rgba(0, 110, 120, 0.58);
  box-shadow: 0 0 0 3px rgba(0, 110, 120, 0.09);
}

/* Контент */
:root:not(.dark) .materials-page {
  color: #1d252c;
}

:root:not(.dark) .materials-page h1,
:root:not(.dark) .materials-page h2,
:root:not(.dark) .materials-page h3 {
  color: #17343b;
}

:root:not(.dark) .page-meta {
  color: #006e78;
}

/* Информационная плашка вместо ярко-голубого блока */
:root:not(.dark) .article-lead {
  padding: 18px 20px;
  color: #35464d;
  background:
    linear-gradient(
      90deg,
      rgba(0, 110, 120, 0.07),
      rgba(0, 110, 120, 0.025)
    );
  border: 1px solid rgba(0, 110, 120, 0.14);
  border-left: 3px solid #006e78;
  border-radius: 6px;
}

/* Оранжевый используется только как акцент */
:root:not(.dark) .materials-page h2::after {
  content: "";
  display: block;
  width: 44px;
  height: 2px;
  margin-top: 8px;
  background: #f58220;
}

@media (max-width: 760px) {
  :root:not(.dark) .kb-layout {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* ===== Energoskan Light Theme Quick Fix ===== */

:root:not(.dark) body::before,
:root:not(.dark) body::after{
    opacity:.018!important;
}

:root:not(.dark){
    --smui-surface-0:#f6f8fa;
    --smui-surface-1:#ffffff;
    --smui-surface-2:#f3f5f7;
}

:root:not(.dark) .kb-side{
    background:#fff;
    border:1px solid #dde5e8;
    box-shadow:0 2px 12px rgba(0,0,0,.04);
}

:root:not(.dark) .kb-item.active{
    background:#eef8f9;
    border-left:3px solid #006E78;
}

:root:not(.dark) .article-lead{
    background:#f7fbfb;
    border-left:3px solid #006E78;
}

:root:not(.dark) .materials-page{
    color:#1d252c;
}

:root:not(.dark) h1,
:root:not(.dark) h2,
:root:not(.dark) h3{
    color:#1d252c;
}

:root:not(.dark) .page-meta{
    color:#006E78;
}

:root:not(.dark) .materials-page h2::after{
    background:#F58220;
}


/* ===== Typography Quick Fix ===== */

:root:not(.dark) .materials-page{
    color:#2b3640!important;
    font-weight:500;
}

:root:not(.dark) .materials-page p,
:root:not(.dark) .materials-page li{
    color:#36424c!important;
    font-weight:500;
    line-height:1.75;
}

:root:not(.dark) .materials-page h1{
    color:#1d252c!important;
    font-weight:800;
    letter-spacing:-0.02em;
}

:root:not(.dark) .materials-page h2{
    color:#1d252c!important;
    font-weight:700;
}

:root:not(.dark) .page-meta{
    color:#006E78!important;
    font-weight:700;
    letter-spacing:.12em;
}

:root:not(.dark) .kb-item{
    color:#2f3c46!important;
    font-weight:500;
}

:root:not(.dark) .kb-item.active{
    color:#12242c!important;
    font-weight:700;
}

:root:not(.dark) .kb-item-icon{
    color:#4c5f69!important;
}

:root:not(.dark) .article-lead{
    color:#2b3640!important;
}

:root:not(.dark) strong{
    color:#1d252c!important;
    font-weight:700;
}


/* =========================================================
   ENERGOSKAN UI STEP 2
   Карточки и контейнеры
   ========================================================= */

html:not(.dark) .materials-layout,
html:not(.dark) .kb-layout,
html:not(.dark) .docs-layout{
    gap:24px;
}

html:not(.dark) .materials-content,
html:not(.dark) .kb-content,
html:not(.dark) .docs-content,
html:not(.dark) .materials-main{
    background:#ffffff;
    border:1px solid #d7e2e6;
    border-radius:12px;
    box-shadow:0 4px 14px rgba(20,35,52,.05);
    padding:32px 40px;
}

html:not(.dark) #kb-side,
html:not(.dark) #docs-side,
html:not(.dark) #admin-side{
    background:#ffffff;
    border:1px solid #d7e2e6;
    border-radius:12px;
    box-shadow:0 4px 14px rgba(20,35,52,.05);
}

html:not(.dark) .navbar,
html:not(.dark) .topbar{
    background:#ffffff;
    border-bottom:1px solid #d7e2e6;
    box-shadow:0 2px 8px rgba(20,35,52,.04);
}

html:not(.dark) body{
    background:#eef3f5;
}


/* =========================================================
   ENERGOSKAN UI STEP 3
   Лёгкая доводка контейнеров
   ========================================================= */

html:not(.dark) .materials-content,
html:not(.dark) .kb-content,
html:not(.dark) .docs-content,
html:not(.dark) .materials-main{
    border-radius:8px;
    box-shadow:0 2px 8px rgba(20,35,52,.04);
    padding:30px 34px;
}

html:not(.dark) #kb-side,
html:not(.dark) #docs-side,
html:not(.dark) #admin-side{
    border-radius:8px;
    box-shadow:0 2px 8px rgba(20,35,52,.04);
}

html:not(.dark) .knowledge-article,
html:not(.dark) .kb-article,
html:not(.dark) .content-article{
    max-width:1120px;
}