/* ============================================================
   portal.css – Muller Pneus Portal
   Only what Bootstrap 5.3 cannot provide natively.
   ============================================================ */

:root {
    --mp: #008230;
    --mp-dark: #006625;
    --mp-rgb: 0, 130, 48;
}

/* Brand button */
.btn-mp {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--mp);
    --bs-btn-border-color: var(--mp);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--mp-dark);
    --bs-btn-hover-border-color: var(--mp-dark);
    --bs-btn-focus-shadow-rgb: var(--mp-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--mp-dark);
    --bs-btn-active-border-color: var(--mp-dark);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--mp);
    --bs-btn-disabled-border-color: var(--mp);
}

/* Navbar top stripe */
.navbar-mp-stripe {
    border-top: 3px solid var(--mp);
}

/* Avatar */
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--mp);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    flex-shrink: 0;
    user-select: none;
}

.avatar-lg {
    width: 3rem;
    height: 3rem;
    font-size: 1rem;
}

/* Brand focus ring */
.form-control:focus,
.form-select:focus {
    border-color: var(--mp);
    box-shadow: 0 0 0 0.2rem rgba(var(--mp-rgb), 0.2);
}

/* Language switcher – active state */
.text-mp-active {
    color: var(--mp) !important;
}

.border-mp {
    border-color: var(--mp) !important;
}

.btn-mp-active {
    color: #fff;
    background-color: var(--mp);
    border-color: var(--mp);
}

.btn-mp-active:hover {
    background-color: var(--mp-dark);
    border-color: var(--mp-dark);
}

/* Active nav link – bottom-border approach, no layout shift */
.navbar-nav .nav-link {
    font-weight: 600;
    box-shadow: inset 0 -2px 0 transparent;
    transition: box-shadow 0.15s ease, color 0.15s ease;
}

.nav-link.active-mp {
    color: var(--mp) !important;
    box-shadow: inset 0 -2px 0 var(--mp);
}

/* Sortable table headers */
.table-sortable thead th.sortable-th {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.table-sortable thead th.sortable-th .sort-icon {
    margin-left: .35em;
    color: #adb5bd;
    font-size: .85em;
    vertical-align: middle;
}

.table-sortable thead th.sort-asc .sort-icon,
.table-sortable thead th.sort-desc .sort-icon {
    color: var(--mp);
}