/* ======================================================================
   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;
}

/* The tab strip of a detail page in the pane shell: it sits on a
   hairline that closes the page header, and everything above it holds
   still on every tab. */
.detail-tabs {
    flex: none;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border-normal);
}

/* A tab's count, after its label: the label's size (theme.css sets a
   `.nav-sm` tab to 11px) and a line no taller than its text, so the tab
   keeps the height of the others, with the strip collapsed to icons too,
   where the count is the only text left. Dimmed by opacity, so it reads
   on the active tab's fill as well. */
.tab-count {
    font-size: 11px;
    line-height: 1;
    opacity: 0.65;
}

/* A count that asks for attention (calls awaiting review): a solid red
   chip, which reads on the active tab's fill and on the track alike.
   The one literal white is a label on a solid accent, which is
   theme-invariant (see the topbar badge, layout.css). */
.tab-count--alert {
    display: inline-block;
    min-width: 1.5em;
    padding: 0.2em 0.5em;
    border-radius: 999px;
    background: var(--bs-danger);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    text-align: center;
    font-variant-numeric: tabular-nums;
    opacity: 1;
}