/* ============================================================
   FLAIR COMMUNITY KNOWLEDGEBASE — CUSTOM STYLES
   All visual formatting is controlled here.
   Change a rule once → propagates across every document.
   ============================================================ */

/* ── Active top nav tab: bold white ── */
.md-tabs__item--active .md-tabs__link {
  font-weight: 700;
  color: #fff !important;
  opacity: 1 !important;
}

/* ── Grey out Chapters tab in top nav (not ready yet) ── */
.md-tabs__item a[href*="chapters"] {
  opacity: 0.4;
  pointer-events: none;
  cursor: default;
}

/* ── Remove TOC right-hand sidebar on all pages ── */
.md-sidebar--secondary { display: none !important; }

/* ── Left border only on pages that have the left nav sidebar ── */
.md-sidebar--primary ~ .md-main .md-content {
  border-left: 3px solid var(--md-primary-fg-color);
}

/* ── Prevent nav sidebar from jumping/scrolling on navigation ── */
.md-sidebar--primary .md-sidebar__scrollwrap {
  scroll-behavior: auto !important;
  overflow-anchor: none;
}

/* ---- CSS Custom Properties (change these to restyle everything) ---- */
:root {
  --kb-font-issue-title: 1.6rem;
  --kb-font-section:     1.1rem;
  --kb-font-solution:    1.05rem;
  --kb-font-body:        0.95rem;
  --kb-font-code:        0.85rem;

  --kb-color-confirmed:       #2e7d32;  /* dark green */
  --kb-color-confirmed-bg:    #e8f5e9;
  --kb-color-likely:          #e65100;  /* deep orange */
  --kb-color-likely-bg:       #fff3e0;
  --kb-color-experimental:    #1565c0;  /* blue */
  --kb-color-experimental-bg: #e3f2fd;
  --kb-color-dangerous:       #b71c1c;  /* dark red */
  --kb-color-dangerous-bg:    #ffebee;
  --kb-color-firmware:        #4a148c;  /* purple */
  --kb-color-firmware-bg:     #f3e5f5;
  --kb-color-workaround:      #827717;  /* yellow-brown */
  --kb-color-workaround-bg:   #f9fbe7;

  --kb-color-tag-flair-classic:  #5d4037;
  --kb-color-tag-flair7:         #0277bd;
  --kb-color-tag-both:           #2e7d32;
  --kb-color-tag-hardware:       #37474f;
  --kb-color-tag-status:         #6a1b9a;

  --kb-tag-radius: 3px;
  --kb-tag-padding: 2px 7px;
  --kb-tag-font-size: 0.78em;

  --kb-source-bg: #f5f5f5;
  --kb-source-border: #bdbdbd;
  --kb-source-font-size: 0.84rem;
}

/* Keep the top navigation available while scrolling. */
.md-header {
  position: sticky;
  top: 0;
  z-index: 20;
}

.md-tabs {
  position: sticky;
  top: 2.4rem;
  z-index: 10;
}

.md-search__output {
  z-index: 30;
}

.kb-exact-search {
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
  background: var(--md-code-bg-color);
  padding: 0.45rem 0;
}

.kb-exact-search__title {
  color: var(--md-default-fg-color--light);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.2rem 1rem 0.35rem;
  text-transform: uppercase;
}

.kb-exact-search__item {
  display: block;
  padding: 0.45rem 1rem 0.55rem;
  text-decoration: none;
}

.kb-exact-search__item:hover {
  background: var(--md-accent-fg-color--transparent);
}

.kb-exact-search__item-title {
  color: var(--md-default-fg-color);
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.35;
}

.kb-exact-search__section {
  color: var(--md-accent-fg-color);
  display: block;
  font-size: 0.64rem;
  line-height: 1.35;
  margin-top: 0.1rem;
}

.kb-exact-search__snippet {
  color: var(--md-default-fg-color--light);
  display: block;
  font-size: 0.68rem;
  line-height: 1.45;
  margin-top: 0.18rem;
}

/* Left-nav section group labels (Issues categories, Tutorial Videos playlists, etc.) */
.md-sidebar--primary .md-nav[data-md-level="1"]
  > .md-nav__list
  > .md-nav__item--section
  > label.md-nav__link {
  font-family: inherit;
  font-size: inherit;
  font-weight: 700;
  color: var(--md-primary-fg-color);
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

/* Embedded operators map. */
.kb-map-embed {
  width: 100%;
  height: calc(100vh - 100px);
  min-height: 520px;
  border: 1px solid var(--md-default-fg-color--lighter);
  border-radius: 6px;
  overflow: hidden;
  background: var(--md-code-bg-color);
}

.kb-map-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---- Issue Title ---- */
.md-typeset h1 {
  font-size: var(--kb-font-issue-title);
  border-bottom: 2px solid var(--md-primary-fg-color);
  padding-bottom: 0.3em;
}

/* ---- Section Headers (## level) ---- */
.md-typeset h2 {
  font-size: var(--kb-font-section);
  font-weight: 700;
  color: var(--md-primary-fg-color);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--md-default-fg-color--lighter);
  padding-bottom: 0.2em;
  margin-top: 2em;
}

/* ---- Solution Headers (### level) ---- */
.md-typeset h3 {
  font-size: var(--kb-font-solution);
  font-weight: 600;
  margin-top: 1.5em;
}

/* ---- Sub-headers (#### level) ---- */
.md-typeset h4 {
  font-size: var(--kb-font-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--md-default-fg-color--light);
  margin-top: 1em;
}

/* ====================================================
   RELIABILITY / STATUS TAG PILLS
   ==================================================== */

.kb-tags {
  margin: 0.5em 0 1.2em 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.kb-tag {
  display: inline-block;
  padding: var(--kb-tag-padding);
  border-radius: var(--kb-tag-radius);
  font-size: var(--kb-tag-font-size);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Reliability tags */
.kb-tag-confirmed    { background: var(--kb-color-confirmed-bg);    color: var(--kb-color-confirmed);    border: 1px solid var(--kb-color-confirmed); }
.kb-tag-likely       { background: var(--kb-color-likely-bg);       color: var(--kb-color-likely);       border: 1px solid var(--kb-color-likely); }
.kb-tag-experimental { background: var(--kb-color-experimental-bg); color: var(--kb-color-experimental); border: 1px solid var(--kb-color-experimental); }
.kb-tag-dangerous    { background: var(--kb-color-dangerous-bg);    color: var(--kb-color-dangerous);    border: 1px solid var(--kb-color-dangerous); }
.kb-tag-firmware     { background: var(--kb-color-firmware-bg);     color: var(--kb-color-firmware);     border: 1px solid var(--kb-color-firmware); }
.kb-tag-workaround   { background: var(--kb-color-workaround-bg);   color: var(--kb-color-workaround);   border: 1px solid var(--kb-color-workaround); }

/* Status tags */
.kb-tag-resolved   { background: #e8f5e9; color: #1b5e20; border: 1px solid #1b5e20; }
.kb-tag-open       { background: #fce4ec; color: #880e4f; border: 1px solid #880e4f; }
.kb-tag-ongoing    { background: #fff8e1; color: #f57f17; border: 1px solid #f57f17; }
.kb-tag-historical { background: #eeeeee; color: #424242; border: 1px solid #9e9e9e; }

/* Software ecosystem tags */
.kb-tag-flair-classic { background: #efebe9; color: var(--kb-color-tag-flair-classic); border: 1px solid var(--kb-color-tag-flair-classic); }
.kb-tag-flair7        { background: #e1f5fe; color: var(--kb-color-tag-flair7);        border: 1px solid var(--kb-color-tag-flair7); }
.kb-tag-both          { background: #f1f8e9; color: var(--kb-color-tag-both);          border: 1px solid var(--kb-color-tag-both); }

/* Hardware tags */
.kb-tag-hardware { background: #eceff1; color: var(--kb-color-tag-hardware); border: 1px solid #90a4ae; }

/* ====================================================
   ADMONITION OVERRIDES (Reliability Callouts)
   ==================================================== */

/* CONFIRMED — green */
.md-typeset .admonition.confirmed,
.md-typeset details.confirmed {
  border-color: var(--kb-color-confirmed);
}
.md-typeset .confirmed > .admonition-title,
.md-typeset .confirmed > summary {
  background-color: var(--kb-color-confirmed-bg);
  color: var(--kb-color-confirmed);
}
.md-typeset .confirmed > .admonition-title::before,
.md-typeset .confirmed > summary::before {
  background-color: var(--kb-color-confirmed);
}

/* LIKELY — orange */
.md-typeset .admonition.likely,
.md-typeset details.likely {
  border-color: var(--kb-color-likely);
}
.md-typeset .likely > .admonition-title,
.md-typeset .likely > summary {
  background-color: var(--kb-color-likely-bg);
  color: var(--kb-color-likely);
}

/* DANGEROUS — red */
.md-typeset .admonition.danger {
  border-color: var(--kb-color-dangerous);
}

/* ====================================================
   SOURCE CONTEXT BLOCKS
   ==================================================== */

.kb-source {
  background: var(--kb-source-bg);
  border-left: 4px solid var(--kb-source-border);
  border-radius: 4px;
  padding: 0.8em 1em;
  font-family: var(--md-code-font-family, monospace);
  font-size: var(--kb-source-font-size);
  white-space: pre-wrap;
  word-break: break-word;
  margin: 1em 0;
}

/* ====================================================
   REVISION HISTORY TABLE
   ==================================================== */

.md-typeset table.revision-history {
  font-size: 0.85em;
  width: auto;
}
.md-typeset table.revision-history th {
  background: var(--md-primary-fg-color);
  color: white;
}

/* ====================================================
   MEDIA GALLERY  (kb-media-gallery + kb-media-thumb)
   Change the values below to restyle every gallery
   on every page simultaneously.
   ==================================================== */

/* Container — flex row, wraps to new lines */
.kb-media-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 1.2em 0;
}

/* Every thumbnail cell — image thumbnails */
.kb-media-thumb {
  display: block;
  width: 150px;
  height: 112px;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid var(--md-default-fg-color--lighter);
  background: var(--md-code-bg-color);
  text-decoration: none;
  position: relative;
  flex-shrink: 0;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.kb-media-thumb:hover {
  border-color: var(--md-primary-fg-color);
  box-shadow: 0 0 0 2px var(--md-primary-fg-color--light);
}

.kb-media-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.15s;
}

.kb-media-thumb:hover img {
  opacity: 0.85;
}

/* Zoom icon on hover (inserted via JS lightbox) */
.kb-media-thumb::after {
  content: "⤢";
  position: absolute;
  bottom: 4px;
  right: 5px;
  font-size: 0.75em;
  color: rgba(255,255,255,0.9);
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
}

.kb-media-thumb:hover::after {
  opacity: 1;
}

/* Video placeholder cell */
.kb-media-video-thumb {
  width: 150px;
  height: 112px;
  border-radius: 5px;
  border: 1px solid var(--md-default-fg-color--lighter);
  background: var(--md-code-bg-color);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kb-media-video-thumb video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.72;
}

.kb-media-video-thumb a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 100%;
  text-decoration: none;
  padding: 6px;
}

a.kb-media-video-thumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 112px;
  text-decoration: none;
  padding: 6px;
}

.kb-video-play {
  font-size: 2em;
  color: var(--md-primary-fg-color);
  line-height: 1;
  z-index: 1;
  width: 2.2em;
  height: 2.2em;
  border-radius: 999px;
  background: rgba(0,0,0,0.58);
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: 0 1px 4px rgba(0,0,0,0.75);
}

.kb-video-label {
  font-size: 0.6em;
  color: var(--md-default-fg-color--light);
  word-break: break-all;
  text-align: center;
  line-height: 1.3;
}

/* Inline thumbnail inside evidence tables */
.kb-table-thumb {
  height: 60px;
  width: auto;
  border-radius: 3px;
  display: block;
  object-fit: cover;
  border: 1px solid var(--md-default-fg-color--lighter);
}

.kb-table-video {
  font-size: 0.8em;
  color: var(--md-primary-fg-color);
  text-decoration: none;
}

/* Lightbox overlay (added by gallery-lightbox.js) */
.kb-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.88);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}

.kb-lightbox img,
.kb-lightbox video {
  max-width: 92vw;
  max-height: 92vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 8px 48px rgba(0,0,0,0.6);
  cursor: default;
}

.kb-lightbox video { background: #000; }

.kb-lightbox-close {
  position: absolute;
  top: 16px;
  right: 20px;
  color: #fff;
  font-size: 2em;
  line-height: 1;
  cursor: pointer;
  opacity: 0.8;
  background: none;
  border: none;
  padding: 0;
}

.kb-lightbox-close:hover { opacity: 1; }

/* ── Legacy kb-media-grid (older issue files) — match new style ── */
.kb-media-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 1.2em 0;
}

.kb-media-item {
  width: 150px;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid var(--md-default-fg-color--lighter);
  flex-shrink: 0;
  cursor: zoom-in;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.kb-media-item:hover {
  border-color: var(--md-primary-fg-color);
  box-shadow: 0 0 0 2px var(--md-primary-fg-color--light);
}

.kb-media-item img {
  width: 100%;
  height: 112px;
  object-fit: cover;
  display: block;
  transition: opacity 0.15s;
}
.kb-media-item:hover img { opacity: 0.85; }

/* Captions shown below each item in the old grid format */
.kb-media-caption {
  font-size: 0.75em;
  color: var(--md-default-fg-color--light);
  padding: 4px 6px;
  line-height: 1.35;
  background: var(--md-code-bg-color);
  border-top: 1px solid var(--md-default-fg-color--lighter);
}

/* ====================================================
   MEDIA DESCRIPTION TABLE (below gallery blocks)
   Used to provide searchable captions for media items.
   ==================================================== */

.kb-media-desc {
  margin: 0.6em 0 1.4em 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

.kb-media-desc ul {
  margin-top: 0.45em;
  margin-bottom: 0;
  padding-left: 1.25em;
}

.kb-media-desc li {
  margin-bottom: 0.25em;
  font-size: inherit;
  line-height: inherit;
}

.kb-media-desc code {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: transparent;
  padding: 0;
  border-radius: 0;
}

.kb-media-desc table {
  width: 100%;
  font-size: 0.88em;
}

.kb-media-desc th {
  background: var(--md-primary-fg-color);
  color: #fff;
  font-weight: 600;
  padding: 4px 10px;
}

.kb-media-desc td {
  padding: 4px 10px;
  vertical-align: top;
}

.kb-media-desc td:first-child {
  width: 2em;
  text-align: center;
  color: var(--md-default-fg-color--light);
  white-space: nowrap;
}

/* Inline thumbnail in description table */
.kb-media-desc .kb-desc-thumb {
  width: 80px;
  height: 56px;
  object-fit: cover;
  border-radius: 3px;
  border: 1px solid var(--md-default-fg-color--lighter);
  cursor: zoom-in;
  display: block;
}

/* ====================================================
   SOURCE PROVENANCE TAGS (WhatsApp / YouTube / Manual)
   ==================================================== */

/* Source type label pill */
.kb-source-label {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 3px;
  font-size: 0.72em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: 6px;
  vertical-align: middle;
}

.kb-source-whatsapp {
  background: #e8f5e9;
  color: #1b5e20;
  border: 1px solid #2e7d32;
}
.kb-source-youtube {
  background: #ffebee;
  color: #b71c1c;
  border: 1px solid #c62828;
}
.kb-source-manual {
  background: #e3f2fd;
  color: #0d47a1;
  border: 1px solid #1565c0;
}

/* ====================================================
   TUTORIAL REFERENCE BLOCKS
   ==================================================== */

.kb-tutorial-ref {
  background: #fff8e1;
  border-left: 4px solid #f9a825;
  border-radius: 4px;
  padding: 0.75em 1em;
  margin: 0.6em 0;
  font-size: 0.9rem;
}

.kb-tutorial-ref .kb-tutorial-title {
  font-weight: 700;
  font-size: 0.95em;
  margin-bottom: 0.3em;
}

.kb-tutorial-ref .kb-tutorial-meta {
  font-size: 0.82em;
  color: var(--md-default-fg-color--light);
}

.kb-tutorial-ref a {
  color: #e65100;
  font-weight: 600;
}

/* Dark mode */
[data-md-color-scheme="slate"] .kb-tutorial-ref {
  background: #2a2200;
  border-left-color: #f9a825;
}

/* ====================================================
   TUTORIAL VIDEO INDEX
   ==================================================== */

.kb-video-card {
  border-left: 3px solid var(--md-accent-fg-color);
  background: rgba(78, 91, 196, 0.08);
  padding: 0.9rem 1rem;
  margin: 0.7rem 0 1.4rem;
}

.kb-video-section {
  color: var(--md-accent-fg-color);
  border-bottom: 2px solid var(--md-accent-fg-color);
  padding-bottom: 0.25rem;
  font-weight: 700;
}

.kb-video-header {
  display: grid;
  grid-template-columns: minmax(180px, 280px) minmax(0, 1fr);
  gap: 0.9rem;
  align-items: start;
  margin-bottom: 0.75rem;
}

/* markdown="1" wraps the thumb in a <p> — strip its margin so thumb top = text top */
.kb-video-header > p {
  margin: 0;
  padding: 0;
  line-height: 0;
}

.kb-video-thumb {
  display: block;
  width: 100%;
  margin: 0;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--md-default-fg-color--lightest);
}

.kb-video-thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.kb-video-meta {
  text-align: left;
}

.kb-video-meta p {
  margin: 0 0 0.35rem;
}

/* Remove gap between "Chapters" bold heading and the chapter list */
.kb-video-card ul {
  margin-top: 0 !important;
}

/* Reduce bottom margin on the paragraph immediately before a list in the card */
.kb-video-card p:has(+ ul) {
  margin-bottom: 0.2em;
}

/* Tighten spacing between chapter list items */
.kb-video-card ul li {
  margin-top: 0 !important;
  margin-bottom: 0.1em !important;
}

[data-md-color-scheme="slate"] .kb-video-card {
  background: rgba(78, 91, 196, 0.16);
}

@media screen and (max-width: 680px) {
  .kb-video-header {
    grid-template-columns: 1fr;
  }
}

/* ====================================================
   PDF DOCUMENT REFERENCE BLOCKS
   ==================================================== */

.kb-pdf-ref {
  background: #e8eaf6;
  border-left: 4px solid #3949ab;
  border-radius: 4px;
  padding: 0.6em 1em;
  margin: 0.4em 0;
  font-size: 0.88rem;
}

.kb-pdf-ref a {
  font-weight: 600;
  color: #1a237e;
}

/* Dark mode */
[data-md-color-scheme="slate"] .kb-pdf-ref {
  background: #1a1e3a;
  border-left-color: #7986cb;
}
[data-md-color-scheme="slate"] .kb-pdf-ref a {
  color: #9fa8da;
}

/* ====================================================
   DARK MODE ADJUSTMENTS
   ==================================================== */

[data-md-color-scheme="slate"] {
  --kb-source-bg:     #2d2d2d;
  --kb-source-border: #555;
}

[data-md-color-scheme="slate"] .kb-tag-confirmed    { background: #1b3a1b; }
[data-md-color-scheme="slate"] .kb-tag-likely       { background: #3a2000; }
[data-md-color-scheme="slate"] .kb-tag-experimental { background: #0d1f3c; }
[data-md-color-scheme="slate"] .kb-tag-dangerous    { background: #3a0a0a; }
[data-md-color-scheme="slate"] .kb-tag-resolved     { background: #1b3a1b; }
[data-md-color-scheme="slate"] .kb-tag-open         { background: #3a0a1f; }
[data-md-color-scheme="slate"] .kb-tag-ongoing      { background: #3a2e00; }