/* Navicor brand color overrides for the Metronic demo8 theme.
   Loaded after style.bundle.css/plugins.bundle.css so these variables win.
   Source: Navicor UI styleguide — Primary #021C32, Secondary #0096FB. */
:root,
[data-bs-theme="light"] {
    --bs-primary: #0096FB;
    --bs-primary-rgb: 0, 150, 251;
    --bs-primary-active: #0088e7;
    --bs-primary-light: #e6f5ff;

    --bs-dark: #021C32;
    --bs-dark-rgb: 2, 28, 50;
    --bs-dark-active: #011423;
}

[data-bs-theme="dark"] {
    --bs-primary: #0096FB;
    --bs-primary-rgb: 0, 150, 251;
    --bs-primary-active: #0088e7;

    --bs-dark: #021C32;
    --bs-dark-rgb: 2, 28, 50;
}

/* style.bundle.css bakes the aside/header-brand dark chrome as a literal
   hex (#1e1e2d), not a CSS variable — override the selectors directly. */
.aside,
.header-brand,
.menu-sub-lg-dropdown {
    background-color: #021C32;
}

/* ---------------------------------------------------------------------------
   2026-07-19 consistency/whitespace pass — applied globally (one change,
   verified once) instead of hand-editing padding utility classes across 32
   individual Razor views, which had drifted inconsistent (py-4 on some pages,
   none at all on others). !important is deliberate: this is a standing design
   decision that should win over whatever ad-hoc utility class a given page
   happens to carry, not something meant to be overridden per-page.
   --------------------------------------------------------------------------- */
.card-body {
    padding: 1.75rem 2rem !important;
}
.card-header {
    padding: 1.375rem 2rem !important;
    min-height: 4.25rem;
}
.card {
    margin-bottom: 1.5rem;
}
.row.g-5,
.row.g-6 {
    --bs-gutter-x: 2rem;
    --bs-gutter-y: 2rem;
}

/* Shared empty-state pattern (see Views/Shared/_EmptyState.cshtml) — icon +
   message instead of bare "None found"/"Loading..." text, consistent across
   every list/table page. */
.navicor-empty-state {
    padding: 3rem 1rem;
    text-align: center;
}
.navicor-empty-state img {
    max-width: 150px;
    opacity: 0.85;
    margin-bottom: 1.25rem;
}
.navicor-empty-state .navicor-empty-state-text {
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--bs-gray-600);
}

/* ---------------------------------------------------------------------------
   Global micro-interactions (design-eng pass). Site-wide, not page-scoped —
   the whole point of "unseen details compound" is that they're consistent
   everywhere, not bolted onto whichever page someone last touched. Every one
   of these targets Bootstrap classes already used on every page in the app,
   so nothing needs to opt in.
   --------------------------------------------------------------------------- */
:root {
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

/* Press feedback — confirms the interface heard the click. Buttons are
   clicked constantly across this app (every list row, every modal submit),
   so this is exactly the "tens of times a day" tier the animation framework
   says to keep SHORT and cheap: transform only (GPU, no layout/paint), no
   keyframes (interruptible if clicked again mid-transition). btn-icon gets a
   touch less scale — a small icon button visibly deforming reads as broken,
   not responsive. */
.btn:not(.disabled):not(:disabled) {
    transition: transform 120ms var(--ease-out);
}
.btn:not(.disabled):not(:disabled):active {
    transform: scale(0.97);
}
.btn-icon:not(.disabled):not(:disabled):active {
    transform: scale(0.94);
}

/* Card hover lift — every list page in this app (Role cards, Crew Pool rows,
   dashboard widgets) is a grid of clickable/scannable cards. A subtle lift on
   hover answers "is this interactive" before the user commits to a click,
   without being loud enough to notice consciously. transform+shadow only. */
.card.card-flush,
.card-flush.h-100 {
    transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.card.card-flush:hover,
.card-flush.h-100:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1.5rem 0.25rem rgba(0, 0, 0, 0.08);
}

/* Dropdowns/select popovers — Bootstrap ships these with no transition at
   all (they just appear). @starting-style animates the entry without any JS;
   scale starts at 0.95 (never 0 — nothing in the real world pops in from
   nothing) so it reads as "unfolding from the trigger" rather than "snapping
   into place". Modals are deliberately NOT touched here — they're centered
   in the viewport, not anchored to a trigger, so this treatment is wrong for
   them (see Bootstrap's own modal.fade transition, left alone below). */
.dropdown-menu {
    transition: opacity 150ms var(--ease-out), transform 150ms var(--ease-out);
}
@starting-style {
    .dropdown-menu.show {
        opacity: 0;
        transform: scale(0.95);
    }
}

/* ---------------------------------------------------------------------------
   Role Management cards (Views/Roles/Index.cshtml). Left accent bar carries
   the tier color at a glance without needing to read the badge text first —
   the badge is still there for the explicit label, this is the fast/ambient
   read. Stagger-in is capped at 8 cards' worth of delay (320ms) so a long
   list doesn't make the last card visibly lag behind the interaction.
   --------------------------------------------------------------------------- */
.navicor-role-card {
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(6px);
    animation: navicor-card-in 240ms var(--ease-out) forwards;
}
.navicor-role-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--role-accent, var(--bs-gray-400));
}
.navicor-role-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
}
@keyframes navicor-card-in {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@media (prefers-reduced-motion: reduce) {
    .navicor-role-card {
        animation: none;
        opacity: 1;
        transform: none;
    }
}