/* ==========================================================================
   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.
   ========================================================================== */

:root{ --logo-blue:#247BFE; }   /* the Logitrac logo's pin (white-logo.svg): the accent line under the top bar and the dark page headers */

/* ---- 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(--logo-blue); }
.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-btn.is-dark{ background:var(--navy); border-color:var(--navy); color:#fff; }   /* GitHub: inverse; the icon follows the text colour */
.login-btn.is-dark:hover{ background:var(--navy-2); border-color:var(--navy-2); 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(--logo-blue); box-sizing:border-box; }
header.hero{ border-bottom-color:var(--logo-blue); }
footer.page-footer{ border-top-color:var(--logo-blue); }   /* the line above the dark footer (index.css keeps gold for the static page) */   /* hosted dark page headers (index.css keeps gold for the static page) */
.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; }
.topbar-data{ margin-left:auto; display:flex; align-items:center; gap:.6rem; font-size:.78rem; color:#b9cdf2; }
.topbar-data + .topbar-user{ margin-left:.4rem; }
.topbar-data .btn{ padding:.35rem .8rem; font-size:.8rem; }
.topbar-data .btn[disabled]{ opacity:.7; cursor:progress; }
/* "Update data" result: the comparison with Apply / Discard (administrators only) */
.data-panel{ position:fixed; top:64px; right:1rem; z-index:45; width:min(720px, calc(100vw - 2rem)); max-height:calc(100vh - 88px); overflow:auto; box-sizing:border-box;
  background:var(--paper); border:1px solid var(--line); border-top:3px solid var(--logo-blue); border-radius:10px; box-shadow:0 12px 32px rgba(11,31,59,.22); padding:1rem 1.1rem; }
.data-panel h2{ font-size:1.05rem; margin-bottom:.4rem; }
.data-panel table{ font-size:.82rem; }
.data-panel-actions{ display:flex; gap:.6rem; margin-top:.8rem; }
.data-panel .bad{ color:#a12a2a; }
.shell-body{ display:flex; align-items:stretch; min-height:calc(100vh - 56px); }
.sidebar{ flex:0 0 248px; background:var(--paper); border-right:1px solid var(--line); padding:.6rem .6rem 1.2rem; box-sizing:border-box;
  position:sticky; top:56px; align-self:flex-start; height:calc(100vh - 56px); overflow-y:auto; }   /* stays in view; scrolls on its own */
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:.2rem; }
#nav-client > .side-details, #nav-client > .side-pending{ margin-left:.6rem; }   /* Client Management: its two groups sit one step in */
/* Group headers (Customer Support, its areas, Settings) look and behave like the links: same size, hover, focus;
   a chevron shows the state. Indentation keeps the grouping. */
.side-details > summary, .side-area > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  padding:.5rem .7rem; border-radius:8px; border-left:3px solid transparent; font-size:.88rem; font-weight:700; color:var(--ink); }
.side-details > summary::-webkit-details-marker, .side-area > summary::-webkit-details-marker{ display:none; }
.side-label{ display:flex; align-items:center; gap:.5rem; min-width:0; }
.side-icon{ flex:0 0 16px; color:var(--muted); }
/* Chevron on the right edge of every group header: right when closed, down when open. */
.side-chevron{ flex:0 0 16px; margin-left:.5rem; color:var(--muted); transition:transform .15s ease; }
.side-details[open] > summary > .side-chevron, .side-area[open] > summary > .side-chevron{ transform:rotate(90deg); }
@media (prefers-reduced-motion: reduce){ .side-chevron{ transition:none; } }
.side-details > summary:hover, .side-area > summary:hover{ background:var(--bg); color:var(--blue-dark); }
.side-details .side-link{ padding-left:1.1rem; font-weight:600; }
/* Customer Support areas and their tab items */
.side-area{ margin:.05rem 0 .05rem .5rem; }
.side-area > summary{ font-size:.86rem; }
.side-details .side-item{ padding:.36rem .7rem .36rem 1.45rem; font-size:.84rem; font-weight:600; }
.side-badge{ margin-left:.35rem; font-size:.6rem; vertical-align:middle; }
.side-dot{ display:inline-block; width:.45rem; height:.45rem; padding:0; border-radius:50%; background:#b91c1c; border-color:#b91c1c; }   /* Training page without content yet (training.manage) */
.sidebar .side-link:focus-visible, .sidebar summary:focus-visible{ outline:3px solid #9cc0ff; outline-offset:1px; }
.games-view .tabs[hidden]{ display:none !important; }   /* hosted: the sidebar lists the tabs */
.shell-main{ flex:1; min-width:0; }
.shell-content{ padding:2rem 0 1rem; }
/* Games views inside the shell: Home keeps the full hero; area pages get a slim one and a sample-data line. */
.games-view .hero.hero-slim{ padding:1.4rem 0 1.3rem; }
.games-view .hero.hero-slim h1{ font-size:1.9rem; margin:.5rem 0 0; }
.games-view .sample-line{ margin:1rem 0 .4rem; }
.side-home{ margin-top:.6rem; }
@media (max-width: 860px){
  .topbar .brand span{ display:none; }
  .topbar-data small{ display:none; }
  .topbar-user .who small{ display:none; }
  .sidebar{ position:fixed; left:0; top:56px; bottom:0; height:auto; 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], .admin-form input[type=date]{ 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-checks label.admin-locked{ opacity:.45; }   /* outside the profile's access level */
.admin-msg{ min-height:1.2em; }

/* ---- Email + password sign-in and setup links ---- */
.login-password{ display:grid; gap:.7rem; margin:1rem 0 .4rem; }
.login-password input{ font:inherit; font-size:.95rem; padding:.55rem .65rem; border:1px solid var(--line); border-radius:8px; width:100%; box-sizing:border-box; }
.login-password .login-btn{ cursor:pointer; }
.login-or{ display:flex; align-items:center; gap:.6rem; color:var(--muted); font-size:.82rem; margin:.6rem 0; }
.login-or::before, .login-or::after{ content:""; flex:1; border-top:1px solid var(--line); }
.setup-link input{ font:inherit; font-size:.82rem; padding:.4rem .5rem; border:1px solid var(--line); border-radius:8px; width:min(100%, 640px); }

/* ---- Settings: what a profile grants; actions with their explanation ---- */
.admin-grants{ display:block; margin-top:.25rem; color:var(--muted); }
.admin-actions label{ align-items:flex-start; }
.admin-actions label span{ display:flex; flex-direction:column; gap:.1rem; }

/* ---- Training plan (training/tracker.blade.php): the Metrics tables, badges and buttons, laid out for forms ---- */
.btn-small{ padding:.25rem .65rem; font-size:.8rem; }
.training-inline{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; margin-top:.35rem; }
.training-inline select, .training-inline input[type=text], .training-inline input[type=date]{ font:inherit; font-size:.85rem; padding:.3rem .5rem; border:1px solid var(--line); border-radius:8px; background:#fff; }
.training-inline input[type=text]{ flex:1; min-width:10rem; }
.training-signoff > summary, .log-reply > summary{ list-style:none; display:inline-block; cursor:pointer; }
.training-signoff > summary::-webkit-details-marker, .log-reply > summary::-webkit-details-marker{ display:none; }
.training-print{ margin-left:auto; }
.training-start{ display:inline-block; margin-left:.35rem; vertical-align:middle; }
.training-print-only{ display:none; }
.training-tabs{ margin-bottom:1rem; }
.side-link.side-pending{ color:var(--muted); opacity:.65; cursor:default; pointer-events:none; }   /* sidebar label with no page yet */
.ax-toggle a.btn{ text-decoration:none; }
.ax-toggle .btn[aria-current="page"]{ background:var(--blue-bg); color:var(--navy); font-weight:700; }   /* as aria-pressed (index.css), for links */
.roster-actions{ margin:0 0 .5rem; }
table.plan-table tr.not-counted td, table.plan-table tr.not-counted td.num{ color:var(--muted); }   /* report table: not counted (greyed) */
.roster-list{ margin:.2rem 0 0 1.1rem; font-size:.88rem; }
.team-dialog-body{ padding:1rem 1.2rem; }
/* Team board (training/team-board.blade.php): per department a card column and a focus column; linked to a trainee: green, opens their plan. */
.team-grid{ border-collapse:separate; border-spacing:.6rem .5rem; margin-top:.4rem; }
.team-grid th{ text-align:left; color:var(--navy); font-size:.74rem; text-transform:uppercase; letter-spacing:.05em; padding:0 .2rem; }
.team-cell{ width:15rem; min-width:12rem; padding:0; vertical-align:top; }
.team-focus{ min-width:7rem; padding:.6rem .4rem 0 0; font-size:.86rem; color:var(--ink); vertical-align:top; }
.team-menu{ position:relative; }
.team-card{ display:flex; flex-direction:column; align-items:center; gap:.15rem; text-align:center; border:1px solid var(--line); border-radius:10px; padding:.55rem .7rem; background:var(--paper); cursor:pointer; list-style:none; }
.team-card::-webkit-details-marker{ display:none; }
.team-card:hover, .team-menu[open] > .team-card{ border-color:var(--blue); }
.team-card small{ font-size:.76rem; color:var(--muted); }
.team-progress{ margin-top:.15rem; }
.team-bar{ display:block; width:80%; height:4px; border-radius:2px; background:var(--line); overflow:hidden; }
.team-bar > span{ display:block; height:100%; background:var(--blue); }
.team-wrap{ overflow:visible; }   /* no inner scroll: the board grows with its content */
.team-pop{ position:fixed; z-index:50; top:0; left:0; min-width:15rem; background:var(--paper); border:1px solid var(--line); border-radius:10px;
  box-shadow:0 6px 18px rgba(15,30,60,.12); padding:.4rem .6rem; display:flex; flex-direction:column; gap:.25rem; font-size:.86rem; text-align:left; }
.team-act-link{ cursor:pointer; color:var(--blue-dark); padding:.2rem 0; }
.team-act-link{ display:block; text-decoration:none; background:none; border:0; font:inherit; text-align:left; }
.team-remove{ color:#b91c1c; }
.team-dialog{ border:1px solid var(--line); border-radius:12px; padding:0; width:min(30rem, calc(100vw - 2rem)); max-height:none; overflow:visible;
  background:var(--paper); color:var(--ink); box-shadow:0 20px 60px rgba(15,30,60,.25); }
.team-dialog::backdrop{ background:rgba(11,31,59,.45); }
.team-dialog form{ padding:1rem 1.2rem; }
.team-dialog h3{ margin:0 0 .6rem; }
.team-dialog .admin-form{ display:flex; flex-direction:column; gap:.6rem; }
.team-dialog .field input, .team-dialog .field select, .team-dialog .field textarea{ width:100%; box-sizing:border-box; }
/* Links & Resources (training/links.blade.php): Featured highlighted; Manage links (admins) lists each link with its buttons. */
.links-featured{ border-color:var(--blue); background:var(--blue-bg); }
.training-doc + .training-doc, .links-manage{ margin-top:.8rem; }
.links-manage h4{ margin:.8rem 0 .3rem; }
.links-row{ display:flex; flex-wrap:wrap; align-items:center; gap:.35rem; padding:.25rem 0; border-top:1px solid var(--line); font-size:.88rem; }
.links-row-title{ flex:1 1 12rem; }
.links-row form{ margin:0; }
.team-dialog-actions{ display:flex; justify-content:flex-end; gap:.5rem; margin-top:1rem; }
.team-controls{ vertical-align:top; padding-top:.4rem; }
.team-controls > details{ display:block; margin-bottom:.35rem; }
.team-controls .admin-form{ margin-top:.4rem; }
/* Shared chart (ax-chart.js) bars on the Training report, from the page tokens. */
.ax-bar{ fill:var(--blue); } .ax-swatch.ax-bar{ background:var(--blue); height:10px; }
.ax-group{ font-weight:700; fill:var(--navy); }
.log-new{ display:flex; flex-direction:column; gap:.2rem; margin:.4rem 0 .8rem; }
.log-new textarea{ width:100%; box-sizing:border-box; font:inherit; padding:.5rem .6rem; border:1px solid var(--line); border-radius:8px; background:#fff; }
.log-card{ border:1px solid var(--line); border-radius:10px; padding:.6rem .8rem; margin-top:.6rem; background:var(--paper); }
.log-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; margin:0; font-size:.85rem; color:var(--muted); }
.log-meta strong{ color:var(--ink); }
.log-body{ white-space:pre-line; }
.log-comments{ margin:.4rem 0 0 1.25rem; padding-left:.7rem; border-left:2px solid var(--line); }
.log-comment{ margin:.25rem 0; font-size:.88rem; }
.log-reply{ margin:.35rem 0 0 1.25rem; }
.log-reply > summary{ font-size:.8rem; color:var(--blue-dark); }

@media print{
  .topbar, .sidebar, .training-print, .training-nav, .training-flash, #training-saved, #training form, .training-signoff, .log-new, .log-reply, #training [data-ax-view], .team-pop, .team-dialog{ display:none !important; }
  .shell-main{ margin:0 !important; padding:0 !important; }
  #training section.block{ break-inside:auto; }
  #training .card{ break-inside:avoid; box-shadow:none; }
  .training-print-only{ display:inline; }
  #training details > summary{ list-style:none; }
}

/* ---- Training Library pages (training/library.blade.php): Markdown content in a card ---- */
.training-doc h2{ margin:1.2rem 0 .5rem; font-size:1.2rem; } .training-doc h2:first-child{ margin-top:0; }
.training-doc h3{ margin:1rem 0 .4rem; } .training-doc h4, .training-doc h5{ margin:.8rem 0 .3rem; }
.training-doc p, .training-doc li{ line-height:1.55; }
.training-doc blockquote{ margin:.6rem 0; padding:.5rem .8rem; border-left:3px solid var(--blue); background:var(--blue-bg); border-radius:6px; }
.training-doc blockquote p{ margin:0; }
.training-doc img{ display:block; max-width:100%; height:auto; margin:.6rem 0 .2rem; border:1px solid var(--line); border-radius:8px; }
.training-doc img + em{ display:block; font-size:.82rem; color:var(--muted); }

/* ---- Settings: collapsible access profiles and page groups (admin.js) ---- */
.admin-profile > summary{ cursor:pointer; }
.admin-group{ margin:.35rem 0; }
.admin-group > summary{ cursor:pointer; padding:.2rem 0; }
.admin-group .admin-checks{ margin:.3rem 0 .5rem 1.1rem; }
.admin-sub{ margin:.4rem 0 .6rem 1.1rem; }
.admin-sub-head{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin:0; font-size:.88rem; }
.admin-sub-all{ display:inline-flex; align-items:center; gap:.3rem; font-size:.8rem; color:var(--muted); }
.admin-sub .admin-checks{ margin:.3rem 0 0; }
.admin-checks.admin-col{ display:block; columns:220px; column-gap:1rem; }   /* top to bottom, then the next column */
.admin-checks.admin-col label{ break-inside:avoid; margin-bottom:.35rem; }