/*
 * WSA "Pro" felület — CoreUI Free Bootstrap Admin Template (coreui/coreui,
 * MIT licenc) alapú sidebar+topbar váz, STIHL márkaszínekre és a meglévő
 * betűtípusra/logóra hangolva. Ez az egyetlen, végleges felület-variáns.
 * A CoreUI forrása (Pug/SCSS, Node build) nem került be a repóba — csak a
 * lefordított CSS/JS van bevendorolva a static/vendor/coreui alatt, ugyanúgy
 * ahogy korábban az AdminLTE (lásd static/vendor/coreui/LICENSE-NOTE.txt).
 *
 * Betöltési sorrend: bootstrap-icons -> coreui.min.css -> styles.css
 * (STIHL @font-face + néhány brand elem) -> workbench.css (WSA saját
 * tartalmi komponensei) -> ez a fájl (a legvégén, hogy mindent felülírhasson).
 */

/* ================= 1. Márkaszínek (CoreUI --cui-* változók) ================= */
/* A CoreUI a Bootstrap --bs-* egyedi tulajdonságait mindenhol --cui-*-ra
   nevezte át fordításkor (nincs --bs-* a vendorolt coreui.min.css-ben),
   ezért itt is --cui-*-t kell felülírni, különben a purple CoreUI
   alapszín (#5856d6) marad látható mindenhol. */
:root {
  --cui-primary: #f36f21;
  --cui-primary-rgb: 243, 111, 33;
  --cui-link-color: #f36f21;
  --cui-link-color-rgb: 243, 111, 33;
  --cui-link-hover-color: #d85f16;
}

/* A CoreUI-komponensek (.btn-primary, .form-check-input:checked stb.)
   saját --cui-btn-* / literál színeket fordítanak be build-időben, ezért a
   fenti --cui-primary önmagában NEM elég - ezeket külön felül kell írni. */
.btn-primary {
  --cui-btn-bg: #f36f21;
  --cui-btn-border-color: #f36f21;
  --cui-btn-hover-bg: #d85f16;
  --cui-btn-hover-border-color: #d85f16;
  --cui-btn-active-bg: #c2530f;
  --cui-btn-active-border-color: #c2530f;
  --cui-btn-disabled-bg: #f36f21;
  --cui-btn-disabled-border-color: #f36f21;
  --cui-btn-focus-shadow-rgb: 243, 111, 33;
}
.form-check-input:checked {
  background-color: #f36f21;
  border-color: #f36f21;
}
.form-check-input:focus {
  border-color: #f36f21;
  box-shadow: 0 0 0 0.25rem rgba(243, 111, 33, .25);
}

#sidebar {
  --cui-sidebar-bg: #1f2327;
  --cui-sidebar-color: #b9bec3;
  --cui-sidebar-brand-color: #ffffff;
  --cui-sidebar-nav-link-color: #b9bec3;
  --cui-sidebar-nav-link-hover-bg: rgba(243, 111, 33, .16);
  --cui-sidebar-nav-link-hover-color: #ffffff;
  --cui-sidebar-nav-link-active-bg: rgba(243, 111, 33, .22);
  --cui-sidebar-nav-link-active-color: #ffffff;
  --cui-sidebar-nav-link-icon-color: #b9bec3;
  --cui-sidebar-nav-link-hover-icon-color: #f36f21;
  --cui-sidebar-nav-link-active-icon-color: #f36f21;
  --cui-sidebar-nav-link-icon-bullet-border-color: #6b7378;
  --cui-sidebar-nav-link-hover-icon-bullet-border-color: #f36f21;
  --cui-sidebar-nav-link-active-icon-bullet-border-color: #f36f21;
  --cui-sidebar-nav-link-active-icon-bullet-bg: #f36f21;
}

#sidebar .nav-link.active {
  box-shadow: inset 3px 0 0 #f36f21;
}

/* #63 — Az oldalsáv menüpontjainál a <p> alapértelmezett alsó margója
   eltolta a feliratot az ikonhoz képest. A CoreUI flex igazítása csak akkor
   tud valóban középre rendezni, ha a címke nem visz magával külső margót. */
#sidebar .sidebar-nav .nav-link > p {
  margin: 0;
  font-size: 12px;
  line-height: 1.2;
}
#sidebar .sidebar-nav .nav-link > .nav-icon {
  font-size: 14px;
  line-height: 1;
}
/* Kompakt oldalmenü: kisebb betű, szűkebb sorok (sok menüpont fér el görgetés nélkül). */
#sidebar .sidebar-nav .nav-link {
  padding-top: .38rem;
  padding-bottom: .38rem;
  font-size: 12px;
}

/* ================= 2. Alapelrendezés ================= */
body { background: #f4f5f6; }
.app-content { padding: 20px clamp(16px, 3vw, 28px) 32px; }
.app-content-header { padding: 16px clamp(16px, 3vw, 28px) 0; }

.sidebar-header { border-bottom: 1px solid rgba(255,255,255,.08); }
.sidebar-brand-stacked {
  height: auto;
  overflow: visible;
  white-space: normal;
}
.sidebar-brand-stacked .brand-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 14px 12px 12px;
  text-decoration: none;
}
/* Az eredeti, feltöltött STIHL logó (static/stihl_logo.png) változtatás nélkül, saját arányában jelenik meg: nincs
   keret, háttér, lekerekítés, szűrő vagy vágás. */
.sidebar-brand .brand-image-wrap {
  display: block;
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
}
.sidebar-brand .brand-image-wrap img {
  display: block;
  width: 132px;
  height: auto;
  border-radius: 0;
  filter: none;
}
.sidebar-brand .brand-text {
  font-family: "STIHLDisplayTitling", "STIHLText", Arial, sans-serif;
  font-size: 13px;
  line-height: 1.15;
  color: #fff;
}
.sidebar-brand .brand-text small {
  display: block;
  font-family: "STIHLText", Arial, sans-serif;
  font-size: 9px;
  font-weight: 400;
  color: #9aa1a6;
  letter-spacing: .04em;
  margin-top: 2px;
}

/* Beállítások a sáv aljára rögzítve */
#navigation > .mt-auto {
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 6px;
}

.command-bar {
  position: sticky;
  top: var(--wsa-header-h, 64px);
  z-index: 20;
}
.command-bar.hidden { display: none; }

/* Topbar: a meglévő WSA fejléc (státusz-jelvények, felhasználói menü) a
   CoreUI header jobb oldalán jelenik meg, kártya nélkül, laposan. */
.header { border-bottom: 1px solid #e5e7eb; }
.header .wsa-topbar-status { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.header .status, .header .badge { font-size: 11px; padding: 6px 10px; }
.header .user-menu { font-size: 12px; }

.header-icon-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 6px;
  color: #6b7378;
  font-size: 17px;
}
.header-icon-toggle:hover { background: #f1f2f3; color: #23282c; }
.header-icon-toggle::after { display: none; }
.header .dropdown-menu { min-width: 260px; }
.header .dropdown-header { padding: 10px 14px; }

#appUserAvatar {
  background: #f36f21;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .02em;
  flex-shrink: 0;
}
.header .dropdown-item-text { padding: 10px 14px; }

/* ================= 3. Egységes, lapos kártya-/gombnyelv ================= */
/* A régi, nagy sarokkerekítésű "Kompakt előtti" kinézet helyett mindenhol
   ez az egységes, Bootstrap-közeli nyelv érvényes - nem csak a shell-ben. */

.panel {
  border-radius: 8px;
  border-color: #e2e5e8;
  box-shadow: 0 1px 2px rgba(15,23,32,.04);
  padding: 20px;
}
input { border-radius: 6px; }
button { border-radius: 6px; }
textarea { border-radius: 6px; }
.empty-state { border-radius: 6px; }
.product-card { border-radius: 6px; }
.result-block { border-radius: 6px; }
.compatibility-chip { border-radius: 6px; }
.login-card { border-radius: 8px; box-shadow: 0 1px 2px rgba(15,23,32,.10); }
.google-login-button { border-radius: 6px; }
.login-error { border-radius: 6px; }
.ssc-connection-guard-card { border-radius: 8px; box-shadow: 0 1px 3px rgba(15,23,32,.12); }

.product-context { border-radius: 6px; }
.inventory-grid > div { border-radius: 6px; }
.price-card { border-radius: 6px; }
.copy-icon-button { border-radius: 6px; }
.manual-compatibility { border-radius: 6px; }
.profile-inline { border-radius: 6px; }
.priority-card { border-radius: 6px; }
.info-tip::after { border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,.16); }
.product-suggestions { border-radius: 6px; box-shadow: 0 4px 14px rgba(20,24,28,.14); }
.photo-panel { border-radius: 6px; }
.photo-thumbnail { border-radius: 5px; }
.photo-viewer { border-radius: 8px; }
.photo-viewer-stage > button { border-radius: 6px; }
.shop-check { border-radius: 8px; }
.knowledge-editor,
.knowledge-browser { border-radius: 6px; }
.knowledge-form-row select { border-radius: 5px; }
.knowledge-entry { border-radius: 5px; }
.knowledge-edit-visibility { border-radius: 5px; }
.settings-runtime-group { border-radius: 6px; }
.settings-source-form { border-radius: 6px; }
.settings-source-card { border-radius: 5px; }
.settings-empty { border-radius: 5px; }
.stock-card { border-radius: 5px; }
.product-photo-browser { border-radius: 6px; }
.photo-featured { border-radius: 5px; }
.product-photo-browser .photo-thumbnail { border-radius: 5px; }
.product-photo-browser .photo-thumbnail-fallback { border-radius: 5px; }
.copy-value-button { border-radius: 5px; }
.product-middle-column { border-radius: 6px; }
.usage-compatibility-evidence { border-radius: 5px; }
.ai-generation-info { border-radius: 5px; }
.checklist-sql-upload { border-radius: 6px; }
.knowledge-rag-panel { border-radius: 6px; }
.button-link { border-radius: 5px; }
.log-filters input { border-radius: 5px; }
.log-output { border-radius: 6px; }
.info-detail-card { border-radius: 6px; }
.background-worker-panel { border-radius: 6px; }
.background-worker-grid > div { border-radius: 5px; }
.background-job-row { border-radius: 5px; }
.settings-ai-provider-card { border-radius: 5px; }
.ai-cost-summary { border-radius: 5px; }
.ai-cost-grid > div { border-radius: 5px; }
.ai-inline-provider select { border-radius: 5px; }
.ai-saved-version-row { border-radius: 5px; }
.description-profile-controls select { border-radius: 5px; }
.description-rules-panel { border-radius: 6px; }
.description-rule-row { border-radius: 5px; }
.description-snippets-panel { border-radius: 6px; }
.order-list-meta { border-radius: 5px; }
.order-list-warnings { border-radius: 5px; }
.order-list-filters { border-radius: 5px; }
.order-list-filter-toggle { border-radius: 5px; }
.order-list-csv-file { border-radius: 5px; }

@media (max-width: 991.98px) {
  .app-content { padding-left: 14px; padding-right: 14px; }
}

/* ================= 4. Cikkszámkereső: a fejlécben, kompakt mezőként ================= */
.header-search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 420px;
  max-width: 480px;
  margin: 0 16px;
  min-width: 0;
}
.header-search .lookup-input-wrap { flex: 1 1 auto; min-width: 0; }

#articleNumber {
  width: 100%;
  font-size: 13px;
  font-weight: 400;
  padding: 7px 12px;
  border: 1px solid #dde1e4;
  border-radius: 6px;
}
#articleNumber::placeholder { color: #9aa1a6; font-weight: 400; }

.header-search-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: #f36f21;
  color: #fff;
  font-size: 15px;
}
.header-search-submit:hover { background: #d85f16; }

@media (max-width: 767.98px) {
  .header-search {
    order: 10;
    flex-basis: 100%;
    max-width: none;
    margin: 8px 0 0;
  }
}

.product-panel-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 360px) auto;
  gap: 20px;
  align-items: center;
}
.product-panel-title { min-width: 0; }
.product-panel-head .product-title-heading { margin-bottom: 0; }
.product-panel-head .product-head-status { justify-self: end; }
.product-barcode-panel {
  min-width: 0;
  padding: 0;
  background: transparent;
}
.product-barcode-svg {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  overflow: hidden;
}
.product-barcode-svg svg {
  display: block;
  width: min(100%, 250px);
  height: auto;
}

@media (max-width: 980px) {
  .product-panel-head {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .product-panel-head .product-barcode-panel {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
  }
}

@media (max-width: 640px) {
  .product-panel-head {
    grid-template-columns: 1fr;
  }
  .product-panel-head .product-head-status,
  .product-panel-head .product-barcode-panel {
    grid-column: 1;
    justify-self: start;
  }
  .product-panel-head .product-barcode-panel { grid-row: auto; }
}

.telemetry-ssc-panel { margin-top: 16px; }
.telemetry-ssc-head h4 { margin: 0; }
.telemetry-ssc-panel .ssc-result { margin-top: 12px; }
.telemetry-ssc-panel .ssc-result.hidden { display: none; }
.telemetry-ssc-panel .technical-data pre {
  max-height: 420px;
  margin: 12px 0 0;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 11px;
}
.telemetry-ssc-empty { margin: 10px 0 0; font-size: 12px; }

/* ================= 5. Beállítások: lapos, sor-alapú felület ================= */
/* Nincs dobozos kártya-keret a szekciókon belül - csak vékony elválasztó
   vonalak a soroknál, ahogy egy áttekinthető admin-beállítások oldalon. */

.settings-runtime-group {
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}
.settings-runtime-group h3 {
  padding: 0 0 8px;
  border-bottom: 0;
  background: transparent;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #40484e;
}
.settings-runtime-item {
  grid-template-columns: minmax(220px, 1fr) minmax(160px, auto);
  padding: 12px 0;
  border-bottom: 1px solid #e9ecee;
}
.settings-runtime-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.settings-runtime-label { font-size: 13px; font-weight: 700; color: #23282c; }
.settings-runtime-item code {
  font-size: 11px;
  color: #8a939a;
}
.settings-runtime-value { text-align: right; font-weight: 600; }

.settings-source-form {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}
.settings-source-form > label,
.settings-source-options > label { gap: 5px; }
.settings-source-form input,
.settings-source-form select,
.settings-source-form textarea {
  border-color: #dfe3e6;
  background: #fff;
}

.settings-display-field { max-width: none; }

/* ================= 6. Beállítások: nav-pills + Bootstrap kártyák =================
 * Bal oldali nav-pills váltó + jobb oldalon valódi Bootstrap .card /
 * .form-control / .form-select / .btn / .form-check.form-switch
 * komponensek. A színek (--bs-primary stb.) az 1. szakaszból automatikusan
 * öröklődnek. Minden itt van skálázva #workspaceSettings-re - más fület
 * nem érint. */

#workspaceSettings .settings-header { margin-bottom: 18px; }
#workspaceSettings .settings-header h2 { font-size: 22px; font-weight: 600; margin-bottom: 4px; }
#workspaceSettings .settings-header .muted { font-size: 13px; margin: 0; }

#settingsNav .list-group-item {
  border: 0;
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  color: #40484e;
}
#settingsNav .list-group-item.active {
  background-color: var(--cui-primary);
  border-color: var(--cui-primary);
  color: #fff;
}
#settingsNav .list-group-item:not(.active):hover {
  background-color: #eef0f2;
}

#workspaceSettings .card { border-color: #e2e5e8; box-shadow: none; }
#workspaceSettings .card-header {
  background: transparent;
  border-bottom: 1px solid #e2e5e8;
  padding: 10px 16px;
}
#workspaceSettings .card-title {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 0;
}
#workspaceSettings .card-body { padding: 16px; }
#workspaceSettings .form-label {
  font-size: 12px;
  font-weight: 700;
  color: #40484e;
  margin-bottom: 4px;
}
#workspaceSettings .form-control,
#workspaceSettings .form-select {
  font-size: 13px;
  padding: 6px 10px;
}
#workspaceSettings .btn { font-size: 12px; }

#workspaceSettings .settings-ai-provider-card {
  padding: 0;
  border: 0;
  background: transparent;
}
#workspaceSettings .settings-secret-status {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 13px;
  flex-wrap: wrap;
}
#workspaceSettings .settings-secret-status code { font-size: 10px; color: #8a939a; }

#workspaceSettings .settings-runtime-group h3 {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #8a939a;
  margin-bottom: 4px;
}
#workspaceSettings .settings-state { font-size: 12px; }

/* Beállítások mostantól teljes szélességű (a bal oldali fülváltó a fő
   sidebar-ba költözött almenüként), és nincs benne felső plafon-szélesség. */
.settings-tab-content-wrap { width: 100%; }

/* Beállítások almenü: vízszintes fülsor a Beállítások oldal tetején (nem a fő sidebar-ban).
   A ".nav" osztály a listán szándékos: a Bootstrap Tab/Pill komponens csak ".nav"/".list-group"
   ősben tudja megtalálni a testvér-elemeket az exkluzív aktív-állapothoz. */
.settings-subnav {
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e2e5e8;
}
.settings-subnav .settings-sidebar-link {
  font-size: 13px;
  padding: 6px 14px;
  border: 1px solid #d5d9dd;
  border-radius: 4px;
  color: #3b4349;
  background: #fff;
}
.settings-subnav .settings-sidebar-link:hover { background: #f3f4f6; }
.settings-subnav .settings-sidebar-link.active {
  color: #fff;
  background-color: #f36f21;
  border-color: #f36f21;
}

.nav-section-divider {
  margin: 6px 12px 2px;
  padding: 8px 8px 4px;
  border-top: 1px solid rgba(255,255,255,.12);
  color: #8d969d;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}

/* UNAS termékparaméterek tábla: nincs lapozás, teljes szöveg, kisebb betű */
#unasParametersTable {
  font-size: 12px;
}
#unasParametersTable .tabulator-cell,
#unasParametersTable .tabulator-col-title {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  word-break: break-word;
}
#unasParametersTable .tabulator-cell { padding-top: 6px; padding-bottom: 6px; }
#unasParametersTable .tabulator-header { font-size: 12px; }