/* docs-src/docs/assets/stylesheets/extra.css */
/* FSM Navigator Documentation — Custom Styles */

/* Subscription Tier Badges */
.pro-badge {
  color: #6366f1 !important;
  vertical-align: middle;
}

.enterprise-badge {
  color: #F59E0B !important;
  vertical-align: middle;
}

.free-badge {
  color: #10B981 !important;
  vertical-align: middle;
}

/* Home page grid card enhancements */
.md-typeset .grid.cards > ul > li {
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.md-typeset .grid.cards > ul > li:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

[data-md-color-scheme="slate"] .md-typeset .grid.cards > ul > li:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Feature availability table — only center checkmark columns */
.md-typeset table.feature-table td:nth-child(n+2) {
  text-align: center;
}

/* Default: left-align all table cells */
.md-typeset table:not([class]) td,
.md-typeset table:not([class]) th {
  text-align: left;
}


/* ============================================================
   Top tabs bar horizontal scroll buttons (desktop only)
   ------------------------------------------------------------
   Material's .md-tabs__list is horizontally scrollable but the
   scrollbar is explicitly hidden by Material's stock CSS. With ~20
   top-level sections the bar overflows even on 1920px ultrawide
   displays. These buttons restore visible scroll affordance.
   WCAG 2.1 AA compliant. Mobile drawer untouched.
   ============================================================ */

@media (min-width: 76.25em) {

  /* Establish positioning context for absolutely-positioned buttons.
     Adding position:relative to .md-grid does NOT conflict with
     Material's existing .md-tabs (which is position:sticky); the
     .md-grid child is normally position:static, so promoting it to
     relative is safe. */
  .md-tabs > .md-grid {
    position: relative;
  }

  /* Fade gradient pseudo-elements: gracefully fade the tabs behind the
     scroll buttons so the buttons don't visually clip text. The fade
     is var(--md-primary-fg-color) (the tabs bar background color) so
     it blends seamlessly into the bar. Hidden on the side(s) where
     there's no more content to scroll to. */
  .md-tabs > .md-grid::before,
  .md-tabs > .md-grid::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 64px;
    pointer-events: none; /* clicks pass through to the tabs underneath */
    z-index: 4;            /* below buttons (z-index: 5) but above tab text */
    opacity: 1;
    transition: opacity 0.2s ease;
  }

  .md-tabs > .md-grid::before {
    left: 0;
    background: linear-gradient(
      to right,
      var(--md-primary-fg-color, #4051b5) 30%,
      rgba(64, 81, 181, 0) 100%
    );
  }

  .md-tabs > .md-grid::after {
    right: 0;
    background: linear-gradient(
      to left,
      var(--md-primary-fg-color, #4051b5) 30%,
      rgba(64, 81, 181, 0) 100%
    );
  }

  /* Hide fade on the side where no more scroll is possible */
  .md-tabs > .md-grid.md-tabs__grid--at-start::before,
  .md-tabs > .md-grid.md-tabs__grid--at-end::after,
  .md-tabs > .md-grid.md-tabs__grid--no-overflow::before,
  .md-tabs > .md-grid.md-tabs__grid--no-overflow::after {
    opacity: 0;
  }

  /* Both buttons */
  .md-tabs .md-tabs__scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    background-color: var(--md-primary-fg-color, #4051b5);
    color: var(--md-primary-bg-color, #ffffff);
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    z-index: 5;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    transition: opacity 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .md-tabs .md-tabs__scroll-btn--left {
    left: 4px;
  }

  .md-tabs .md-tabs__scroll-btn--right {
    right: 4px;
  }

  .md-tabs .md-tabs__scroll-btn:hover:not([disabled]) {
    background-color: var(--md-accent-fg-color, #526cfe);
    border-color: rgba(255, 255, 255, 0.7);
  }

  /* WCAG 2.1 AA — visible focus indicator (≥2px outline) */
  .md-tabs .md-tabs__scroll-btn:focus-visible {
    outline: 2px solid var(--md-accent-fg-color, #ffffff);
    outline-offset: 2px;
  }

  .md-tabs .md-tabs__scroll-btn[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
  }
}