/* ============================================================================
 * Lista-fülsávok (`.navbar-component`) — látható aktív fül
 *
 * A Limitless alapból CSAK a szövegszínt váltja az aktív fülön:
 *     inaktív: rgba(51, 51, 51, 0.75)   →   aktív: #333
 * Ez a különbség a gyakorlatban nem olvasható le, a felhasználók nem látták,
 * melyik fülön állnak. Az aktív fül ezért 4px-es alsó szegélyt kap.
 *
 * A fájl a `bootstrap_limitless.min.css` UTÁN töltődik be (DashboardController::
 * get_styles), tehát az azonos specificitású `.navbar-component` szabály itt nyer.
 * ==========================================================================*/

:root {
    /* Egy helyen cserélhető, ha a kiemelés színe változik. */
    --planit-navbar-active-border: #00acc1;
}

/* A komponens-navbar saját 1px-es (átlátszó) kerete miatt az aluláhúzás nem a
   sáv aljával egy vonalban ülne, hanem 1px-rel feljebb — ezért nullázzuk. */
.navbar-component {
    border-width: 0;
}

/* Minden fül kap 4px ÁTLÁTSZÓ alsó szegélyt, így fülváltáskor nem ugrik a sáv
   magassága, és a fülek felirata sem csúszik el egymáshoz képest. */
.navbar-component .navbar-nav-link {
    border-bottom: 4px solid transparent;
}

/* …és csak az aktív fül festi ki.
   A `.show` állapot SZÁNDÉKOSAN nincs benne: a sávok jobb szélén ülő
   szűrő-legördülők (Ajánlatok szemikon, Szerződések, Szállítólevelek…) nyitáskor
   `.show` osztályt kapnak — azok nem „aktív fülek", nekik nem jár a jelölés.
   Ahol a fül maga legördülő (Raktárak → Virtuális raktárak), ott a fület kezelő
   JS teszi rá az `.active`-ot, tehát az továbbra is jelölve marad. */
.navbar-component .navbar-nav-link.active,
.navbar-component .active > .navbar-nav-link {
    border-bottom-color: var(--planit-navbar-active-border);
}