/* ======================================================================
   Merged in from theme.css / theme-override.css.
   These loaded BEFORE this file did, so they sit at the top: everything
   below still overrides them, exactly as it did when they lived in the
   two old sheets.
   ====================================================================== */
/* ----- from theme.css ----- */


  

  

  

  

  

  

    

  

    

/*     Nav Pill     */
.nav-pills > li:first-child > .nav-link {
  border-radius: 4px 0 0 4px !important; }
.nav-pills > li:last-child > .nav-link {
  border-radius: 0 4px 4px 0 !important; }
.nav-pills .nav-link {
  padding: 10px 20px; }
.nav-pills > li > .nav-link {
  margin-left: -1px;
  border-radius: 0 !important;
  margin-top: 5px;
  margin-bottom: 5px;
  border: 1px solid var(--color-blue);
  color: #585c5d; }
  .nav-pills > li > .nav-link.active {
    background: var(--color-blue); }
  .nav-pills > li > .nav-link:hover {
    background: rgba(222, 222, 222, 0.4); }
.nav-pills.nav-pills-no-bd li {
  margin-right: 15px !important; }
  .nav-pills.nav-pills-no-bd li .nav-link {
    border: 0px !important;
    border-radius: 50px !important;
    background: rgba(222, 222, 222, 0.4); }
    .nav-pills.nav-pills-no-bd li .nav-link.active {
      border-radius: 50px !important; }
  .nav-pills.nav-pills-no-bd li:first-child {
    margin-left: 0px !important; }
.nav-pills.flex-column .nav-link {
  border-radius: 0 !important;
  border: 1px solid var(--color-blue);
  color: #585c5d;
  margin-top: -1px;
  text-align: center;
  word-wrap: normal;
  padding: 10px 0; }
  .nav-pills.flex-column .nav-link:hover {
    background: rgba(222, 222, 222, 0.4); }
  .nav-pills.flex-column .nav-link.active {
    background: var(--color-blue); }
  .nav-pills.flex-column .nav-link:first-child {
    border-radius: 4px 4px 0 0 !important; }
  .nav-pills.flex-column .nav-link:last-child {
    border-radius: 0 0 4px 4px !important; }
.nav-pills.flex-column.nav-pills-no-bd .nav-link {
  border: 0px !important;
  border-radius: 50px !important;
  background: rgba(222, 222, 222, 0.4);
  margin-top: 5px;
  margin-bottom: 5px; }
  .nav-pills.flex-column.nav-pills-no-bd .nav-link.active {
    border-radius: 50px !important; }
.nav-pills.nav-primary .nav-link, .nav-pills.nav-secondary .nav-link {
  border: 1px solid #eeeeee; }
.nav-pills.nav-primary .nav-link.active, .nav-pills.nav-secondary .nav-link.active {
  color: #ffffff !important; }
.nav-pills.nav-primary .nav-link.active {
  background: var(--color-blue);
  border: 1px solid var(--color-blue); }
.nav-pills.nav-secondary .nav-link.active {
  background: var(--color-purple);
  border: 1px solid var(--color-purple); }

/* Size Nav */
.nav-sm .nav-link {
  font-size: 11px !important;
  padding: 8px 16px !important; }

    
      
    body[data-background-color="dark"] .nav-pills .nav-link:not(.active) {
      background: #fff; }

/* ============================================================
   NAV TABS & PILLS

   Every project-authored rule for Bootstrap nav components lives here:
   the segmented `.nav-tabs` control, its JS-driven fitting/collapse states
   (see js/components/nav-tabs.js), `.nav-pills` and the shared size variants.

   Baselines this file overrides — do not edit either, they are vendor:
     bootstrap.min.css  stock .nav / .nav-tabs / .nav-pills / .tab-content
     theme.css          Kaiadmin theme; several nav rules use !important,
                        notably `.nav-sm .nav-link` (font-size + padding),
                        which is what the !important declarations below are
                        fighting.
   ============================================================ */

/* ============================================
   TABS — segmented control
   ============================================ */

/* Segmented-control style nav-tabs: tabs grouped in a rounded container,
   active tab has a filled background. No underline. */
.nav-tabs {
    display: inline-flex;
    border: 1px solid var(--border-normal);
    background: var(--tabs-track-bg);
    border-radius: 8px;
    padding: 4px;
    gap: 4px;
}

.nav-tabs .nav-item {
    margin: 0;
}

.nav-tabs .nav-link {
    color: var(--text-tertiary);
    border: none;
    padding: 0.35rem 0.7rem;
    font-size: 0.85rem;
    font-weight: 500;
    border-radius: 5px;
    background: transparent;
    /* Color-only transition: animating all would include font-size, which
       breaks nav-tabs.js measurements mid-toggle. */
    transition: color 0.15s ease, background-color 0.15s ease;
}

.nav-tabs .nav-link:hover {
    color: var(--text-secondary);
    background: var(--surface-2);
}

/* Active tab reads as the selected segment. Dark fills it with the accent
   and drops near-black text on it; light lifts a white chip out of the grey
   track (iOS-style), which is a fill and a shadow rather than a colour.
   A tab with its dropdown open (`.nav-item.show`) reads the same — Bootstrap
   otherwise drops a white chip on it in both themes. */
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: var(--tab-active-fg);
    background: var(--tab-active-bg);
    box-shadow: var(--tab-active-shadow);
    font-weight: 600;
}

.nav-tabs .nav-link .fa,
.nav-tabs .nav-link .fas,
.nav-tabs .nav-link .far {
    opacity: 0.75;
    margin-right: 0.35rem;
}

.nav-tabs .nav-link.active .fa,
.nav-tabs .nav-link.active .fas,
.nav-tabs .nav-link.active .far {
    opacity: 1;
    color: inherit;
}

/* ============================================
   TABS — fitting & icon-only collapse (nav-tabs.js)
   ============================================ */

/* Opt-in fitting: `nav-tabs-fit` lets nav-tabs.js collapse this bar to icons
   when its labels don't fit. The script adds `nav-tabs-fitting` to the bars
   it can actually collapse (every tab has an icon) — only those are held to
   one row, since a bar that can't collapse would spill past its border
   instead of wrapping. */
.nav-tabs.nav-tabs-fitting {
    flex-wrap: nowrap;
    max-width: 100%;
}

.nav-tabs.nav-tabs-fit .nav-link {
    white-space: nowrap;
}

/* Icon-only compact mode, toggled by nav-tabs.js when the full-label tabs
   would overflow their row. Labels are bare text nodes after the icon, so
   they're hidden via font-size: 0 with the icon's size restored; the script
   gives each tab a tooltip carrying its label while collapsed.

   letter/word-spacing must be zeroed too: theme.css sets `letter-spacing`
   in em on body, which computes to an absolute px value there and inherits
   as that value, so at font-size 0 each hidden character still adds its
   spacing — a label's worth of dead space after the icon.

   !important beats theme.css `.nav-sm .nav-link`, which sets font-size and
   padding !important; without it labels stay visible and a lone icon keeps
   label-width padding. The equal side padding keeps each icon pill square. */
.nav-tabs.nav-tabs-icons .nav-link {
    font-size: 0 !important;
    letter-spacing: 0;
    word-spacing: 0;
    padding: 0.35rem 0.5rem !important;
}

/* svg covers FontAwesome's JS renderer, which replaces the <i> with an <svg>. */
.nav-tabs.nav-tabs-icons .nav-link i,
.nav-tabs.nav-tabs-icons .nav-link em,
.nav-tabs.nav-tabs-icons .nav-link svg {
    font-size: 0.85rem;
    margin: 0;
}

/* ============================================
   PILLS
   ============================================ */

/* A pill is a wash of --ink-rgb, so the whole ladder flips with the page
   and only the alphas are written here.
   Every declaration is !important to beat theme.css `.nav-pills .nav-link`,
   which is itself !important. */
.nav-pills .nav-link {
    color: rgba(var(--ink-rgb), 0.85) !important;
    background: rgba(var(--ink-rgb), 0.08) !important;
    border: 1px solid rgba(var(--ink-rgb), 0.25) !important;
    border-radius: 20px !important;
    transition: all 0.2s ease !important;
}

.nav-pills .nav-link:hover {
    background: rgba(var(--ink-rgb), 0.12) !important;
    border-color: rgba(var(--ink-rgb), 0.35) !important;
    color: rgba(var(--ink-rgb), 0.95) !important;
}

.nav-pills .nav-link.active {
    background: rgba(var(--bs-primary-rgb), 0.35) !important;
    color: var(--on-tint-fg) !important;
    border-color: var(--color-blue) !important;
    font-weight: 600 !important;
}

.nav-pills {
    row-gap: 0.5rem;
}

.nav-pills.nav-pills-no-bd li {
    margin-right: .75rem !important;
}

/* No trailing gap after the last pill. !important to beat the rule above,
   which is itself !important to beat theme.css. */
.nav-pills.nav-pills-no-bd li:last-child {
    margin-right: 0 !important;
}

/* ============================================
   SIZE VARIANTS
   ============================================ */

/* Padding only: theme.css `.nav-sm .nav-link` sets font-size 11px !important,
   so a font-size here could never apply. */
.nav-sm .nav-link {
    padding: 0.2rem 0.7rem !important;
}