.btn-sequnex-1 {
    background-color: #545454;
    color: white;
    border: none;
}

.btn-sequnex-1:hover {
    background-color: #3e3e3e;
    color: white;
}

.btn-sequnex-changepass {
    background-color: #c72d2d;
    color: white;
    border: none;
}

.btn-sequnex-changepass:hover {
    background-color: #681515;
    color: white;
}

.card-blue {
    border: 2px solid #55c0e9;
    box-shadow: 0 .5rem 1rem rgba(85, 192, 233, 0.35);
}

/* Version badge: fixed bottom-right corner, on top of all other content.
   pointer-events: none ensures it never intercepts mouse clicks. */
.app-version-badge {
    position: fixed;
    bottom: 8px;
    right: 12px;
    font-size: 0.7rem;
    color: #bbb;
    pointer-events: none;
    z-index: 1000;
}

/* License indicator shown in the header next to the greeting block.
   Amber tone signals no-active/expired state on the dark header background (#545454). */
.license-badge-header {
    display: inline-flex;
    align-items: center;
    font-size: 0.70rem;
    color: #fcd34d;
    background-color: rgba(251, 191, 36, 0.13);
    border: 1px solid rgba(251, 191, 36, 0.35);
    border-radius: 4px;
    padding: 4px 10px;
    font-weight: 500;
    letter-spacing: 0.02em;
    user-select: none;
}

/* Active / staff variant: seqUnex light blue (#55c0e9). */
.license-badge-header--active {
    color: #55c0e9;
    background-color: rgba(85, 192, 233, 0.13);
    border-color: rgba(85, 192, 233, 0.40);
}

/* E-mail address shown below the greeting in the header */
.header-user-email {
    font-size: 0.70rem;
    color: #e0e0e0;
    opacity: 0.85;
}

/* Icon-above-label nav buttons in the header */
.header-nav-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 0.25rem 0.65rem;
    font-size: 0.78rem;
    line-height: 1.2;
    border-radius: 8px;
    gap: 2px;
}
.header-nav-btn i {
    font-size: 1.35rem;
    line-height: 1;
}
.header-nav-btn span {
    white-space: nowrap;
}

/* Responsive header: allow the right action area to wrap on narrow viewports
   without creating a horizontal scrollbar. */
@media (max-width: 992px) {
    .header-inner {
        flex-wrap: wrap;
        row-gap: 0.25rem;
    }
    .header-right {
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 0.25rem;
    }
}