/* ===== Toasts ===== */
#elo-toast-wrap { position: fixed; bottom: 1rem; right: 1rem; z-index: 1080; display: flex; flex-direction: column; gap: .5rem; }
.elo-toast {
    background: var(--elo-dark-grey); color: #fff; border-radius: var(--radius-card);
    padding: .65rem .9rem; font-size: var(--fs-sm); display: flex; align-items: center; gap: .5rem;
    box-shadow: 0 4px 12px rgba(0,0,0,.2); opacity: 0; transform: translateY(8px); transition: all .2s ease;
}
.elo-toast.show { opacity: 1; transform: translateY(0); }
.elo-toast-success .bi { color: var(--elo-ui-green); }
.elo-toast-error .bi { color: var(--elo-ui-red); }

/* ===== Role badges ===== */
.elo-badge { display: inline-block; padding: .2rem .6rem; border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: 600; }
.elo-badge-pending { background: var(--elo-ui-yellow); color: var(--elo-dark-grey); }
.elo-badge-user    { background: var(--elo-ui-green);  color: var(--elo-dark-grey); }
.elo-badge-admin   { background: var(--elo-cta-blue);  color: #fff; }

/* ===== Manage nav pills ===== */
.nav-pills .nav-link { color: var(--elo-cta-blue); border-radius: var(--radius-pill); }
.nav-pills .nav-link.active { background: var(--elo-cta-blue); color: #fff; }

/* ===== Data table (no zebra; hover only) ===== */
.elo-table { width: 100%; border-collapse: collapse; }
.elo-table thead th { background: var(--elo-light-gray); color: var(--elo-dark-grey); font-weight: 600;
    padding: .65rem .75rem; text-align: left; border-bottom: 1px solid var(--elo-cool-gray); }
.elo-table tbody td { padding: .65rem .75rem; border-bottom: 1px solid var(--elo-light-gray); font-size: var(--fs-sm); }
.elo-table tbody tr:hover { background: var(--elo-light-gray); }
.elo-table .num, .elo-table .actions { text-align: right; white-space: nowrap; }
.elo-table .bi-folder2, .elo-table .bi-folder { color: var(--elo-cta-blue); }
.elo-table .bi-file-earmark { color: var(--elo-blue-gray); }
.elo-table thead th a { color: var(--elo-dark-grey); }
.elo-table thead th a:hover { color: var(--elo-cta-blue); text-decoration: underline; }
/* Subtle hover cue so users discover sortable columns. Hidden when an
   active sort arrow (an inline <i>) is already rendered in the header. */
.elo-table thead th a::after { content: "\F229"; font-family: "bootstrap-icons";
    font-size: .75em; margin-left: .25rem; color: var(--elo-medium-gray);
    opacity: 0; transition: opacity .12s ease; }
.elo-table thead th a:hover::after { opacity: 1; }
.elo-table thead th a:has(.bi)::after { content: none; }

/* ===== Search pill ===== */
.elo-search { display: flex; align-items: center; background: #fff; border: 1px solid var(--elo-cool-gray);
    border-radius: var(--radius-pill); padding: .15rem .15rem .15rem .75rem; }
.elo-search .bi { color: var(--elo-logo-blue); }
.elo-search input { border: 0; outline: none; padding: .35rem .5rem; font-size: var(--fs-sm); background: transparent; }
.elo-search button { border: 0; border-radius: var(--radius-pill); background: var(--elo-cta-blue); color: #fff; padding: .35rem 1rem; font-size: var(--fs-sm); }
.elo-search:focus-within { border-color: var(--elo-logo-blue); box-shadow: 0 0 0 3px rgba(59,166,239,.25); }

/* ===== Empty / loading ===== */
.elo-empty { text-align: center; padding: var(--sp-4) var(--sp-2); color: var(--elo-blue-gray); }
.elo-empty .bi { font-size: 4rem; color: var(--elo-cool-gray); display: block; margin-bottom: var(--sp-1); }
.elo-empty h3 { color: var(--elo-dark-grey); font-size: var(--fs-lg); }
.elo-skeleton-row { height: 2.4rem; border-radius: 6px; margin-bottom: .5rem;
    background: linear-gradient(90deg, var(--elo-light-gray) 25%, var(--elo-cool-gray) 37%, var(--elo-light-gray) 63%);
    background-size: 400% 100%; animation: elo-shimmer 1.2s ease-in-out infinite; }
@keyframes elo-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* ===== Home dashboard + callout ===== */
.elo-callout { background: #fff; border: 1px solid var(--elo-cool-gray); border-left: 4px solid var(--elo-ui-yellow);
    border-radius: var(--radius-card); padding: var(--sp-2) var(--sp-3); }

.elo-home-header h1 { font-size: var(--fs-xl); color: var(--elo-dark-grey); margin-bottom: .15rem; }
.elo-home-header .elo-home-sub { color: var(--elo-blue-gray); font-size: var(--fs-sm); }
.elo-home-accent { height: 3px; width: 46px; border-radius: 2px; background: var(--elo-grad-page); margin: var(--sp-1) 0 var(--sp-3); }

.elo-action-banner { background: var(--elo-grad-deep); color: #fff; border-radius: var(--radius-card);
    padding: var(--sp-3); display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2);
    margin-bottom: var(--sp-3); flex-wrap: wrap; }
.elo-action-banner h2 { color: #fff; font-size: var(--fs-lg); margin: 0; }
.elo-action-banner p { color: #fff; font-size: var(--fs-sm); margin: .2rem 0 0; }
.elo-action-banner .btn-light { background: #fff; color: var(--elo-cta-blue); border-color: #fff; font-weight: 600; border-radius: var(--radius-pill); }

.elo-howto-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-2); }
.elo-howto { border: 1px solid var(--elo-light-gray); border-radius: var(--radius-card); padding: var(--sp-2);
    transition: box-shadow .15s ease, border-color .15s ease; }
.elo-howto:hover { box-shadow: 0 4px 12px rgba(0,0,0,.07); border-color: var(--elo-cool-gray); }
.elo-howto .bi { font-size: 1.6rem; color: var(--elo-cta-blue); }
.elo-howto h3 { font-size: var(--fs-md); color: var(--elo-dark-grey); margin: .5rem 0 .25rem; }
.elo-howto p { font-size: var(--fs-sm); color: var(--elo-blue-gray); margin: 0; }
.elo-pending-card { max-width: 520px; margin: var(--sp-4) auto; text-align: center; }

/* ===== Pre-login landing ===== */
.elo-landing { min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: var(--elo-grad-page); padding: var(--sp-3); text-align: center; }
.elo-landing-inner { max-width: 560px; color: #fff;
    /* Subtle brand-tinted scrim lifts white text contrast over the lightest gradient stop */
    background: rgba(1,33,105,.40); border-radius: var(--radius-card);
    padding: var(--sp-4) var(--sp-3); }
.elo-landing-logo { display: block; max-width: 110px; height: auto; margin: 0 auto var(--sp-2); }
.elo-landing h1 { color: #fff; font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -.01em;
    margin-bottom: .5rem; text-shadow: 0 2px 14px rgba(0,0,0,.18); }
.elo-landing .lead { color: #fff; font-size: var(--fs-md);
    max-width: 42ch; margin: 0 auto var(--sp-3); }
.elo-landing .btn-light { background: #fff; color: var(--elo-cta-blue); border-color: #fff;
    font-weight: 600; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.elo-landing .btn-light:hover { background: var(--elo-light-gray); color: var(--elo-royal); }
.elo-landing-cta { margin-bottom: var(--sp-3); }
.elo-landing-features { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap;
    margin-top: var(--sp-4); color: #fff; font-size: var(--fs-sm); }
.elo-landing-features div { display: flex; align-items: center; gap: .45rem;
    background: rgba(0,0,0,.30); border: 1px solid rgba(255,255,255,.30);
    border-radius: var(--radius-pill); padding: .35rem .85rem; }
.elo-landing-features .bi { color: #fff; }