/* ==========================================================================
   Logitrac — hosted application shell, login and Settings (hosted mode only)
   Loaded after index.css; uses its colors (navy, blue, gold) and components.
   The static index.html never loads this file.
   ========================================================================== */

/* ---- login: centered split screen (structure after AWS Study) ---- */
body.login-page{ margin:0; min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--bg); padding:2.5rem 1rem; position:relative; }
body.login-page::before{ content:""; position:absolute; top:0; left:0; right:0; height:4px; background:var(--gold); }
.login-split{ display:grid; grid-template-columns:1fr 1fr; width:100%; max-width:1050px; min-height:620px; background:var(--paper); border-radius:6px; overflow:hidden; box-shadow:0 20px 60px rgba(15,30,60,.18); }
.login-form{ display:flex; align-items:center; justify-content:center; padding:3rem 2.5rem; }
.login-form-inner{ width:100%; max-width:360px; text-align:center; }
.login-form .login-logo{ height:34px; width:auto; margin:0 auto 2.2rem; }
.login-form h1{ font-size:1.9rem; color:var(--navy); }
.login-form .login-sub{ color:var(--muted); font-size:.9rem; margin:.4rem 0 2rem; }
.login-btn{ display:flex; align-items:center; justify-content:center; gap:.7rem; width:100%; margin-top:.75rem; padding:.8rem 1rem; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--navy); font:inherit; font-size:.92rem; font-weight:700; text-decoration:none; }
.login-btn:hover{ border-color:var(--blue); color:var(--blue-dark); background:var(--blue-bg); }
.login-btn:focus-visible{ outline:3px solid #9cc0ff; outline-offset:2px; }
.login-btn svg{ width:20px; height:20px; flex-shrink:0; }
.login-btn.is-primary{ background:var(--blue); border-color:var(--blue); color:#fff; }
.login-btn.is-primary:hover{ background:var(--blue-dark); border-color:var(--blue-dark); color:#fff; }
.login-form .note{ text-align:left; margin-bottom:1rem; }
.login-foot{ margin-top:2rem; font-size:.75rem; color:var(--muted); }
.login-art{ position:relative; background:#000 url('/g/login.png') center / cover no-repeat; color:#fff; }
.login-art::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,31,59,.15) 0%, rgba(11,31,59,.25) 45%, rgba(11,31,59,.88) 100%); }
.login-art-inner{ position:relative; z-index:1; height:100%; display:flex; flex-direction:column; justify-content:space-between; padding:3rem; }
.login-art .art-logo{ height:30px; width:auto; }
.login-art .art-hello{ font-size:2.6rem; font-weight:300; line-height:1; color:#fff; }
.login-art h2{ font-size:3.2rem; color:#fff; line-height:1.05; margin-top:.4rem; }
.login-art .art-text{ color:#dbe6fb; margin-top:1.6rem; max-width:24rem; line-height:1.6; }
.login-art .program-pills{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.4rem; }
.login-art .pill{ background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25); color:#fff; padding:.35rem .75rem; border-radius:999px; font-size:.75rem; font-weight:600; }
.login-page-foot{ position:absolute; bottom:1rem; left:0; right:0; text-align:center; font-size:.75rem; color:var(--muted); }
@media (max-width: 900px){ .login-split{ grid-template-columns:1fr; min-height:0; } .login-art{ display:none; } }

/* ---- application shell: top bar, collapsible sidebar, main area ---- */
body.shell{ margin:0; background:var(--bg); }
.topbar{ position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:.75rem; height:56px; padding:0 1rem; background:var(--navy); color:#fff; border-bottom:3px solid var(--gold); box-sizing:border-box; }
.side-toggle{ font:inherit; font-size:1.15rem; line-height:1; color:#fff; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.25); border-radius:8px; padding:.35rem .6rem; cursor:pointer; }
.side-toggle:hover{ background:rgba(255,255,255,.16); }
.side-toggle:focus-visible{ outline:3px solid #9cc0ff; outline-offset:2px; }
.topbar .brand{ display:flex; align-items:center; gap:.6rem; color:#fff; text-decoration:none; }
.topbar .brand img{ height:22px; width:auto; }
.topbar .brand span{ font-weight:700; font-size:.95rem; color:#cfe0ff; border-left:1px solid rgba(255,255,255,.25); padding-left:.6rem; }
.topbar-user{ margin-left:auto; display:flex; align-items:center; gap:.7rem; font-size:.82rem; color:#b9cdf2; }
.topbar-user .who{ text-align:right; line-height:1.25; }
.topbar-user .who strong{ display:block; color:#fff; }
.topbar-user form{ margin:0; }
.topbar-user .btn{ padding:.35rem .8rem; font-size:.8rem; }
.shell-body{ display:flex; align-items:stretch; min-height:calc(100vh - 56px); }
.sidebar{ flex:0 0 236px; background:var(--paper); border-right:1px solid var(--line); padding:.6rem .6rem 1.2rem; box-sizing:border-box; }
body.side-collapsed .sidebar{ display:none; }
.side-group{ font-size:.66rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:1rem .6rem .35rem; }
.side-link{ display:block; padding:.5rem .7rem; border-radius:8px; border-left:3px solid transparent; color:var(--ink); font-size:.88rem; font-weight:700; text-decoration:none; }
.side-link:hover{ background:var(--bg); color:var(--blue-dark); }
.side-link.is-active{ background:var(--blue-bg); color:var(--navy); border-left-color:var(--blue); }
.side-details{ margin-top:.4rem; }
.side-details summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; margin:1rem .6rem .35rem; font-size:.66rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.side-details summary::-webkit-details-marker{ display:none; }
.side-details summary::after{ content:"+"; font-size:.9rem; }
.side-details[open] summary::after{ content:"\2013"; }
.side-details .side-link{ padding-left:1.1rem; font-weight:600; }
.shell-main{ flex:1; min-width:0; }
.shell-content{ padding:2rem 0 1rem; }
.games-frame{ display:block; width:100%; height:calc(100vh - 56px); border:0; background:var(--bg); }
@media (max-width: 860px){
  .topbar .brand span{ display:none; }
  .topbar-user .who small{ display:none; }
  .sidebar{ position:fixed; left:0; top:56px; bottom:0; z-index:35; overflow-y:auto; box-shadow:0 8px 24px rgba(15,30,60,.18); }
  body:not(.side-open) .sidebar{ display:none; }
}

/* ---- landing and Settings content ---- */
.welcome-card{ max-width:720px; }
.welcome-card .btn{ text-decoration:none; display:inline-block; margin-top:1rem; }
.admin-form{ display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:.7rem 1rem; align-items:end; margin-top:.8rem; }
.admin-form select, .admin-table select, .admin-form input[type=text], .admin-form input[type=email]{ font:inherit; font-size:.88rem; padding:.4rem .5rem; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--ink); width:100%; }
.admin-checks{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:.35rem 1rem; margin-top:.6rem; }
.admin-checks label{ display:flex; align-items:center; gap:.45rem; font-size:.86rem; }
.admin-msg{ min-height:1.2em; }