/* =============================================================
   KEEZ HELP — theme override for Sphinx / Read-the-Docs
   Drop-in stylesheet. Load AFTER the RTD theme, e.g. in conf.py:
     html_css_files = ["keez-help-theme.css"]
   (place this file in your _static/ folder)

   Recolors and cleans up the default RTD theme to match the Keez
   brand: purple identity, Roboto type, soft tinted callouts,
   comfortable reading column. No markup changes required.
   ============================================================= */

/* ---- Fonts ---- */
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Roboto+Mono:wght@400;500&display=swap");

/* ---- Brand tokens ---- */
:root {
  --kz-purple:        #6F43D6;
  --kz-purple-dark:   #5B33BF;
  --kz-purple-tint:   #ECE5FB;
  --kz-purple-tint2:  #F5F1FD;
  --kz-purple-border: #EAE3FA;

  --kz-ink:           #212121;
  --kz-ink-head:      #1a1526;
  --kz-body:          #3f3b4d;
  --kz-muted:         #757575;
  --kz-hint:          #9E9E9E;
  --kz-line:          #E0E0E0;
  --kz-line-soft:     #EEEBF5;
  --kz-sidebar-bg:    #FCFBFE;

  --kz-note:      #1565C0; --kz-note-bg:      #EAF4FB; --kz-note-ink:      #33475b;
  --kz-important: #1B7A40; --kz-important-bg: #E9F6EE; --kz-important-ink: #245638;
  --kz-warn:      #E38A1B; --kz-warn-bg:      #FDF2E4; --kz-warn-ink:      #7a4d10; --kz-warn-head: #C77700;

  --kz-radius: 10px;
}

/* =============================================================
   BASE TYPOGRAPHY
   ============================================================= */
body,
.rst-content,
.wy-nav-content {
  font-family: "Roboto", system-ui, sans-serif;
  color: var(--kz-ink);
  -webkit-font-smoothing: antialiased;
}

.wy-nav-content-wrap { background: #fff; }

.wy-nav-content {
  max-width: 100%;
  padding: 26px 40px 90px;
  background: #fff;
}

.rst-content { font-size: 13.5px; line-height: 1.68; }

.rst-content p {
  color: var(--kz-body);
  font-size: 13.5px;
  line-height: 1.68;
  margin-bottom: 12px;
}
/* Bullet/numbered list items: no extra margin on the <li> itself — the
   theme already zeroes the inner <p>'s margin between consecutive bullets
   (that's intentional and correct), so only recolor/resize text here,
   don't add spacing that would separate one bullet from the next. */
.rst-content li {
  color: var(--kz-body);
  font-size: 13.5px;
  line-height: 1.68;
}
.rst-content .line-block .line { font-size: 13.5px; }
.rst-content .line-block { margin-bottom: 12px; }

/* Headings — Roboto, no serif, tight scale */
.rst-content h1, .rst-content h2, .rst-content h3,
.rst-content h4, .rst-content h5, .rst-content h6 {
  font-family: "Roboto", system-ui, sans-serif;
  color: var(--kz-ink-head);
  font-weight: 700;
  letter-spacing: -.005em;
}
.rst-content h1 { font-size: 26px; line-height: 1.25; letter-spacing: -.01em; margin: 0 0 12px; }
.rst-content h2 { font-size: 18px; margin: 32px 0 10px; }
.rst-content h3 { font-size: 14.5px; margin: 22px 0 8px; }

.rst-content strong { color: var(--kz-ink); font-weight: 700; }

/* Links */
.rst-content a,
.rst-content a:visited { color: var(--kz-purple); text-decoration: none; }
.rst-content a:hover   { color: var(--kz-purple-dark); text-decoration: underline; }

/* Headerlinks (¶) — hide until hover, purple */
.rst-content .headerlink {
  color: var(--kz-purple);
  opacity: 0;
  font-size: .7em;
  margin-left: .4em;
  transition: opacity .15s;
  text-decoration: none;
}
.rst-content h1:hover .headerlink,
.rst-content h2:hover .headerlink,
.rst-content h3:hover .headerlink,
.rst-content h4:hover .headerlink,
.rst-content dt:hover .headerlink { opacity: 1; }

/* Lists */
.rst-content ol,
.rst-content ul { line-height: 1.85; }
.rst-content ul { line-height: 1.9; }

/* Selection + search highlight — soft purple, not harsh yellow */
::selection { background: var(--kz-purple-tint); color: var(--kz-ink); }
.rst-content .highlighted,
.rst-content mark {
  background: var(--kz-purple-tint);
  color: var(--kz-purple-dark);
  padding: 1px 5px;
  border-radius: 5px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Inline code / literals */
.rst-content code.literal,
.rst-content tt.literal {
  font-family: "Roboto Mono", monospace;
  background: var(--kz-purple-tint2);
  color: var(--kz-purple-dark);
  border: 1px solid var(--kz-purple-border);
  border-radius: 6px;
  padding: 1px 6px;
  font-size: .86em;
}

/* =============================================================
   TOP BAR  (.wy-nav-top — the mobile purple band)
   Cleaned to a white bar; also restyle any custom keez header band.
   ============================================================= */
.wy-nav-top {
  background: #fff;
  color: var(--kz-ink);
  border-bottom: 1px solid var(--kz-line);
  box-shadow: 0 1px 2px rgba(111,67,214,.04);
}
.wy-nav-top a { color: var(--kz-purple); font-weight: 500; }
.wy-nav-top i { color: var(--kz-muted); }

/* =============================================================
   SIDEBAR  (.wy-nav-side)
   ============================================================= */
.wy-nav-side {
  background: var(--kz-sidebar-bg);
  border-right: 1px solid var(--kz-line-soft);
}
.wy-side-nav-search {
  background: var(--kz-sidebar-bg);
  border-bottom: 1px solid var(--kz-line-soft);
}
.wy-side-nav-search > a,
.wy-side-nav-search .wy-dropdown > a { color: var(--kz-purple); font-weight: 700; }
.wy-side-nav-search > div.version { color: var(--kz-hint); }

/* Search box in sidebar */
.wy-side-nav-search input[type="text"] {
  border: 1px solid transparent;
  border-radius: var(--kz-radius);
  background: #F5F5F5;
  box-shadow: none;
  color: var(--kz-ink);
}
.wy-side-nav-search input[type="text"]:focus {
  background: #fff;
  border-color: var(--kz-purple);
  box-shadow: 0 0 0 3px var(--kz-purple-tint);
  outline: none;
}

/* Menu section captions */
.wy-menu-vertical p.caption,
.wy-menu-vertical .caption-text {
  color: var(--kz-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Menu links */
.wy-menu-vertical a {
  color: #5b5670;
  font-size: 13.5px;
  line-height: 14.4px; /* theme default 18px, -20% */
  padding: 5.6px 24px; /* theme default 7px, -20% */
  border-radius: 0;
}
.wy-menu-vertical a:hover {
  background: var(--kz-purple-tint2);
  color: var(--kz-purple-dark);
}
.wy-menu-vertical li.toctree-l1 > a { color: #4a4658; }

/* Active / current item — purple pill */
.wy-menu-vertical li.current           { background: transparent; }
.wy-menu-vertical li.current > a,
.wy-menu-vertical li.toctree-l1.current > a {
  background: var(--kz-purple-tint);
  color: var(--kz-purple);
  font-weight: 600;
  border: none;
  border-top: none;
  border-bottom: none;
}
.wy-menu-vertical li.current a:hover { background: var(--kz-purple-tint); }
.wy-menu-vertical li.current > a > .toctree-expand,
.wy-menu-vertical li.toctree-l2.current > a { background: var(--kz-purple-tint2); }
.wy-menu-vertical li.on a,
.wy-menu-vertical li.current > a { border-color: transparent; }

/* Expand carets */
.wy-menu-vertical .toctree-expand { color: var(--kz-hint); }

/* =============================================================
   BREADCRUMBS + PREV/NEXT
   ============================================================= */
.rst-content div[role="navigation"][aria-label="breadcrumbs navigation"] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}
.wy-breadcrumbs {
  font-size: 13px;
  color: var(--kz-hint);
  margin-bottom: 0;
}
.wy-breadcrumbs li a { color: var(--kz-muted); font-weight: 400; }
.wy-breadcrumbs li a:hover { color: var(--kz-purple); }
.wy-breadcrumbs li:last-child { color: var(--kz-ink-head); font-weight: 600; }
.wy-breadcrumbs .wy-breadcrumb-sep {
  color: var(--kz-hint);
  margin: 0 2px;
  font-weight: 400;
}
.wy-breadcrumbs-aside { font-size: 13px; }
.rst-content .rst-breadcrumbs-buttons { margin-top: 0; }

/* The theme has an old hardcoded rule forcing the mobile top bar
   (hamburger + project name) permanently visible, even on desktop, which
   is what was showing "keez-help" as a title on every page. We now have a
   real header (logo + search) and slash-style breadcrumbs instead, so hide
   it on desktop; mobile keeps it (see _templates/layout.html for the
   logo-instead-of-project-name swap there). */
@media screen and (min-width: 769px) {
  .wy-nav-top { display: none !important; }
}
.wy-nav-top img.logo {
  height: 22px;
  width: auto;
  border-radius: 0;
  padding: 0;
  margin-right: 8px;
}

/* Prev / next footer buttons */
.rst-footer-buttons { margin-top: 30px; }
.rst-content .btn-neutral,
.rst-content a.btn {
  background: #fff !important;
  color: #5b5670 !important;
  border: 1px solid var(--kz-line);
  border-radius: var(--kz-radius);
  box-shadow: none;
  font-weight: 500;
  padding: 9px 14px;
  line-height: 1.2;
  transition: all .15s;
  text-transform: none;
  /* Some page titles include an emoji (e.g. "\1F4F1 \00CEnregistrare"); emoji
     glyphs render taller than the surrounding text and were pushing that
     one button out of vertical alignment with its sibling. Flex + a fixed
     line-height keeps both buttons the same height regardless. */
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.rst-content .btn-neutral:hover,
.rst-content a.btn:hover {
  background: var(--kz-purple-tint2) !important;
  color: var(--kz-purple) !important;
  border-color: var(--kz-purple);
}
.rst-content .btn .fa { color: inherit; }

/* =============================================================
   ADMONITIONS / CALLOUTS
   Soft tint + 3px colored left border + refined header.
   ============================================================= */
.rst-content .admonition,
.rst-content .admonition.note,
.rst-content .admonition.important,
.rst-content .admonition.warning,
.rst-content .admonition.tip,
.rst-content .admonition.hint,
.rst-content .admonition.attention,
.rst-content .admonition.caution,
.rst-content .admonition.danger,
.rst-content .admonition.error {
  background: var(--kz-note-bg);
  border: none;
  border-left: 3px solid var(--kz-note);
  border-radius: 0 var(--kz-radius) var(--kz-radius) 0;
  box-shadow: none;
  padding: 13px 16px;
  margin: 16px 0;
}
.rst-content .admonition-title {
  background: transparent !important;
  color: var(--kz-note);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 0;
  margin: 0 0 6px;
}
.rst-content .admonition-title::before { display: none; } /* hide RTD's fa icon block bg */
.rst-content .admonition p:last-child { margin-bottom: 0; }
.rst-content .admonition p { color: var(--kz-note-ink); font-size: 13px; line-height: 1.6; }

/* Note / info / seealso — blue */
.rst-content .note,
.rst-content .seealso {
  background: var(--kz-note-bg);
  border-left-color: var(--kz-note);
}
.rst-content .note .admonition-title,
.rst-content .seealso .admonition-title { color: var(--kz-note); }
.rst-content .note p,
.rst-content .seealso p { color: var(--kz-note-ink); }

/* Important / tip / hint — green */
.rst-content .important,
.rst-content .tip,
.rst-content .hint {
  background: var(--kz-important-bg);
  border-left-color: var(--kz-important);
}
.rst-content .important .admonition-title,
.rst-content .tip .admonition-title,
.rst-content .hint .admonition-title { color: var(--kz-important); }
.rst-content .important p,
.rst-content .tip p,
.rst-content .hint p { color: var(--kz-important-ink); }

/* Warning / attention / caution / danger / error — amber */
.rst-content .warning,
.rst-content .attention,
.rst-content .caution,
.rst-content .danger,
.rst-content .error {
  background: var(--kz-warn-bg);
  border-left-color: var(--kz-warn);
}
.rst-content .warning .admonition-title,
.rst-content .attention .admonition-title,
.rst-content .caution .admonition-title,
.rst-content .danger .admonition-title,
.rst-content .error .admonition-title { color: var(--kz-warn-head); }
.rst-content .warning p,
.rst-content .attention p,
.rst-content .caution p,
.rst-content .danger p,
.rst-content .error p { color: var(--kz-warn-ink); }

/* =============================================================
   TABLES
   ============================================================= */
.rst-content table.docutils {
  border: 1px solid var(--kz-line-soft);
  border-radius: var(--kz-radius);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  font-size: 13px;
}
.rst-content table.docutils thead th {
  background: var(--kz-purple-tint2);
  color: var(--kz-ink-head);
  border: none;
  font-weight: 700;
}
.rst-content table.docutils td,
.rst-content table.docutils th {
  border: none;
  border-bottom: 1px solid var(--kz-line-soft);
}
.rst-content table.docutils tr:last-child td { border-bottom: none; }
.wy-table-odd td,
.rst-content table.docutils tbody tr:nth-child(odd) td { background: #fff; }
.rst-content table.docutils tbody tr:nth-child(even) td { background: #FCFBFE; }

/* =============================================================
   ON-PAGE TOC (contents directive)  — right-rail feel
   ============================================================= */
.rst-content .contents.topic,
.rst-content .toctree-wrapper.compound {
  background: #F7F5FC;
  border: 1px solid var(--kz-purple-border);
  border-radius: 12px;
  padding: 14px 18px;
}
/* `.. toctree:: :hidden:` (used purely to build the sidebar nav, not to
   show inline) renders as a <div class="toctree-wrapper compound"> with
   no real content — just a whitespace text node, which is why plain
   `:empty` doesn't catch it (CSS :empty excludes elements with ANY text
   node, even whitespace-only ones). That was showing up as blank lavender
   bars wherever a page has several hidden toctrees (e.g. the homepage).
   `:has()` lets us check for content properly: only box a wrapper that
   actually contains a list. keez-nav-collapse.js does the same check via
   JS and hides these divs outright, for browsers without :has() support. */
.rst-content .toctree-wrapper.compound:empty,
.rst-content .toctree-wrapper.compound:not(:has(ul)):not(:has(ol)) {
  display: none;
  padding: 0;
  border: none;
  background: none;
}
.rst-content .contents .topic-title {
  color: var(--kz-hint);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* =============================================================
   CODE BLOCKS
   ============================================================= */
.rst-content div[class^="highlight"] {
  border: 1px solid var(--kz-line-soft);
  border-radius: var(--kz-radius);
  background: #FAFAFC;
}
.rst-content .highlight pre { font-family: "Roboto Mono", monospace; font-size: 13px; }

/* =============================================================
   FOOTNOTES / CITATIONS
   Keep these compact and out of the fancy card-table styling above
   (they share the "docutils" class with regular tables, but should
   read as small print, not boxed cards).
   ============================================================= */
.rst-content table.docutils.footnote,
.rst-content table.docutils.citation,
.rst-content aside.footnote-list,
.rst-content aside.footnote,
.rst-content aside.citation {
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 12px;
  color: var(--kz-muted);
  margin: 4px 0;
}
.rst-content table.docutils.footnote td,
.rst-content table.docutils.citation td {
  background: transparent !important;
  border: none;
  border-bottom: 1px solid var(--kz-line-soft);
  padding: 3px 6px;
}
.rst-content table.docutils.footnote tr:last-child td,
.rst-content table.docutils.citation tr:last-child td { border-bottom: none; }
.rst-content table.docutils.footnote td.label,
.rst-content aside.footnote > .label,
.rst-content aside.citation > .label {
  color: var(--kz-purple);
  font-weight: 600;
  white-space: nowrap;
  padding-right: 6px;
}
.rst-content aside.footnote p,
.rst-content aside.citation p { font-size: 12px; margin: 0; }

/* =============================================================
   DEFINITION LISTS
   "**Term**" followed by an indented paragraph (no blank line) —
   render as a single rounded card: bold purple term on top,
   regular body text below, no left-border accent.
   ============================================================= */
.rst-content dl:not(.docutils.footnote):not(.field-list) {
  margin: 14px 0;
}
.rst-content dl:not(.docutils.footnote):not(.field-list) dt {
  background: var(--kz-purple-tint2);
  border: 1px solid var(--kz-purple-border);
  border-bottom: none;
  border-radius: var(--kz-radius) var(--kz-radius) 0 0;
  color: var(--kz-purple-dark);
  font-size: 13px;
  font-weight: 700;
  padding: 10px 16px 2px;
  margin: 10px 0 0;
}
.rst-content dl:not(.docutils.footnote):not(.field-list) dt:first-child {
  margin-top: 0;
}
.rst-content dl:not(.docutils.footnote):not(.field-list) dd {
  background: var(--kz-purple-tint2);
  border: 1px solid var(--kz-purple-border);
  border-top: none;
  border-radius: 0 0 var(--kz-radius) var(--kz-radius);
  color: var(--kz-body);
  font-size: 13px;
  line-height: 1.6;
  margin: 0 0 10px;
  padding: 4px 16px 12px;
}

/* =============================================================
   TOP HEADER
   Turn the sidebar's logo+search block into a persistent, full-width
   header bar: small purple logo + "help" label on the left, search
   on the right. Desktop only — mobile keeps the theme's own top bar.
   ============================================================= */
@media screen and (min-width: 769px) {
  :root { --kz-header-h: 54px; }

  .wy-side-nav-search {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 600;
    width: 100%;
    height: var(--kz-header-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: #fff;
    border-bottom: 1px solid var(--kz-line-soft);
    padding: 0 24px;
  }

  .wy-side-nav-search > a {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
  }
  .wy-side-nav-search > a img.logo {
    height: 26px;
    width: auto;
    max-width: none;
  }
  .wy-side-nav-search > a::after {
    content: "help";
    color: var(--kz-hint);
    font-size: 14px;
    font-weight: 400;
    padding-left: 12px;
    border-left: 1px solid var(--kz-line);
    line-height: 1;
  }

  .wy-side-nav-search div[role="search"] {
    margin: 0;
    width: 260px;
    max-width: 40vw;
  }
  .wy-side-nav-search input[type="text"] {
    height: 34px;
    padding: 6px 14px;
    margin: 0;
  }

  /* push sidebar menu + main content below the fixed header */
  .wy-nav-side .wy-side-scroll { padding-top: var(--kz-header-h); box-sizing: border-box; }
  .wy-nav-content-wrap { padding-top: var(--kz-header-h); box-sizing: border-box; }
}

/* =============================================================
   SIDEBAR CHEVRONS
   Flat chevrons instead of the theme's default plus/minus squares,
   for both per-item expand toggles and the collapsible section
   captions added by keez-nav-collapse.js.
   ============================================================= */
.wy-menu-vertical li span.toctree-expand {
  font-size: 11px;
  color: var(--kz-hint);
}
.wy-menu-vertical li span.toctree-expand:before {
  font-family: "FontAwesome" !important;
  content: "\f054" !important; /* chevron-right — collapsed */
}
.wy-menu-vertical li.current > a span.toctree-expand:before,
.wy-menu-vertical li.on > a span.toctree-expand:before {
  content: "\f078" !important; /* chevron-down — expanded */
}

.wy-menu-vertical p.caption.kz-caption-toggle {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}
.wy-menu-vertical p.caption.kz-caption-toggle .caption-text { flex: 1; }
.wy-menu-vertical p.caption.kz-caption-toggle::before {
  font-family: "FontAwesome";
  content: "\f078"; /* chevron-down — expanded */
  font-size: 10px;
  color: var(--kz-hint);
  flex-shrink: 0;
}
.wy-menu-vertical p.caption.kz-caption-toggle.kz-caption-collapsed::before {
  content: "\f054"; /* chevron-right — collapsed */
}

/* =============================================================
   MOBILE
   ============================================================= */
@media screen and (max-width: 768px) {
  .wy-nav-content { padding: 20px 18px 70px; }
  .rst-content h1 { font-size: 22px; }
  .rst-content h2 { font-size: 17px; }
}