/* ===== Elo sidebar shell ===== */
.elo-app { display: flex; min-height: 100vh; }

.elo-sidebar {
    width: 305px; min-width: 305px; background: var(--elo-dark-grey);
    color: #fff; display: flex; flex-direction: column;
    transition: width .2s ease, min-width .2s ease;
}
.elo-app.collapsed .elo-sidebar { width: 80px; min-width: 80px; }

.elo-sidebar-header {
    background: var(--elo-grad-header); padding: var(--sp-3) var(--sp-2);
    text-align: center;
}
.elo-sidebar-header img { max-width: 120px; height: auto; }
.elo-sidebar-header .elo-app-title {
    color: #fff; font-weight: 700; font-size: var(--fs-sm);
    margin-top: var(--sp-1); letter-spacing: .02em;
}
.elo-app.collapsed .elo-sidebar-header .elo-app-title { display: none; }
.elo-app.collapsed .elo-sidebar-header img { max-width: 40px; }

.elo-nav { list-style: none; margin: 0; padding: var(--sp-1) 0; flex: 1; }
.elo-nav a {
    display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem var(--sp-2);
    color: rgba(255,255,255,.85); text-decoration: none; font-weight: 500;
    border-left: 3px solid transparent; transition: background .15s ease, color .15s ease;
}
.elo-nav a:hover, .elo-nav a:focus-visible { background: rgba(255,255,255,.06); color: #fff; }
.elo-nav a .bi { font-size: 1.15rem; }
.elo-nav a.active {
    color: #fff; border-left-color: var(--elo-logo-blue);
    background: linear-gradient(90deg, rgba(59,166,239,.28) 0%, transparent 80%);
}
.elo-app.collapsed .elo-nav a { justify-content: center; }
.elo-app.collapsed .elo-nav a span.label { display: none; }

/* Logo Bar used as a divider (sanctioned use) */
.elo-bar-divider {
    height: 3px; margin: var(--sp-1) var(--sp-2);
    background: var(--elo-grad-page); border-radius: 2px;
}

.elo-sidebar-footer { padding: var(--sp-2); border-top: 1px solid rgba(255,255,255,.08); }
.elo-sidebar-footer .elo-user { color: rgba(255,255,255,.85); font-size: var(--fs-sm); }
.elo-sidebar-footer .elo-user-name { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.elo-app.collapsed .elo-sidebar-footer .elo-user-name,
.elo-app.collapsed .elo-sidebar-footer .label { display: none; }

.elo-collapse-toggle {
    background: none; border: 0; color: rgba(255,255,255,.7);
    padding: var(--sp-1) var(--sp-2); cursor: pointer; text-align: left;
}
.elo-collapse-toggle:hover { color: #fff; }
.elo-collapse-toggle:focus-visible, .elo-mobile-topbar button:focus-visible { outline: 2px solid var(--elo-logo-blue); outline-offset: 2px; }

.elo-content { flex: 1; min-width: 0; background: var(--elo-white); }
.elo-content > main { padding: var(--sp-3); }

.elo-footer-bar {
    border-top: 1px solid var(--elo-light-gray); padding: var(--sp-1) var(--sp-3);
    color: var(--elo-medium-gray); font-size: var(--fs-xs);
}

/* Off-canvas under 768px */
.elo-backdrop { display: none; }
.elo-mobile-topbar { display: none; align-items: center; gap: .5rem;
    background: var(--elo-midnight); color: #fff; padding: .5rem var(--sp-2); }
.elo-mobile-topbar button { background: none; border: 0; color: #fff; font-size: 1.4rem; }

@media (max-width: 767.98px) {
    .elo-app { flex-direction: column; }
    .elo-sidebar {
        position: fixed; top: 0; left: 0; height: 100vh; z-index: 1045;
        transform: translateX(-100%); transition: transform .2s ease;
    }
    .elo-app.mobile-open .elo-sidebar { transform: translateX(0); }
    .elo-mobile-topbar { display: flex; }
    .elo-app.mobile-open .elo-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 1040; }
}

/* ===== Signed-out shell ===== */
.elo-signedout {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: var(--elo-grad-page); padding: var(--sp-3);
}
.elo-signedout-inner { max-width: 460px; width: 100%; text-align: center; }
.elo-signedout-logo { display: block; max-width: 110px; height: auto; margin: 0 auto var(--sp-2); }
.elo-signedout .elo-card {
    background: var(--elo-light-gray); border-radius: var(--radius-card); box-shadow: 0 8px 30px rgba(0,0,0,.18);
    padding: var(--sp-4); width: 100%; text-align: center;
    border-top: 3px solid var(--elo-logo-blue);
}
.elo-signedout .elo-card h1 { font-size: var(--fs-xl); color: var(--elo-dark-grey); }
.elo-signedout .elo-card p { color: var(--elo-blue-gray); font-size: var(--fs-md); }

/* Subtle entrance: logo then card rise on load */
.elo-signedout-logo { animation: elo-fade-in .4s ease both; }
.elo-signedout .elo-card { animation: elo-card-rise .45s ease .08s both; }
@keyframes elo-card-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes elo-fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .elo-signedout-logo, .elo-signedout .elo-card { animation: none; }
}

/* Light-gray card + always-white fields, so inputs read as active (not disabled). */
.elo-signedout .form-control { background-color: #fff; border-color: var(--elo-cool-gray); }
/* Field helper labels one shade darker than the app default for readability. */
.elo-signedout .form-floating > label { color: var(--elo-blue-gray); }