/* Fit Fortress learning platform.
   Loaded AFTER styles.css + theme.css and built on their variables (--navy, --green = brand
   red, --sky, --light, --line, --muted, --ink), fonts and .button, so a change to the site
   theme carries into the platform. Everything here is scoped under body.lms. */

.lms{background:var(--light);font-size:14px;overflow-x:hidden}
.lms h1,.lms h2,.lms h3{letter-spacing:-.03em;margin:0}
.lms h1{font-size:clamp(1.35rem,2.4vw,1.75rem);line-height:1.2}
.lms h2{font-size:1.1rem;line-height:1.3}
.lms h3{font-size:.98rem;line-height:1.35}
.lms p{margin:0 0 10px}
.lms i{color:inherit}
.lms a{color:inherit}
.lms .muted{color:var(--muted)}
.lms .small{font-size:12px}
.lms :focus-visible{outline:2px solid var(--sky);outline-offset:2px}
.lms .link{color:#c5112f;font-weight:600}
.lms .link:hover{text-decoration:underline}

/* ---------- shell ---------- */
.app{display:grid;grid-template-columns:236px minmax(0,1fr);min-height:100vh}
.app-nav{background:#fff;border-right:1px solid var(--line);padding:18px 14px;display:flex;flex-direction:column;gap:6px;position:sticky;top:0;height:100vh;overflow-y:auto}
.app-nav .logo-link{margin:0 6px 10px}
.app-nav-label{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#8a96a6;margin:6px 10px 4px !important}
.app-nav nav{display:grid;gap:2px}
.app-nav nav a{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-radius:7px;font-weight:600;font-size:13.5px;color:#3a475a;min-height:42px}
.app-nav nav a:hover{background:var(--light)}
.app-nav nav a.active{background:#fff0f2;color:#c5112f}
.app-nav-user{margin-top:auto;border-top:1px solid var(--line);padding-top:12px;display:grid;gap:10px}
.user-chip{display:flex;align-items:center;gap:10px;padding:4px 6px;border-radius:7px;min-width:0}
.user-chip:hover{background:var(--light)}
.user-chip b,.user-chip small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px}
.user-chip b{font-size:13px}.user-chip small{font-size:11px;color:var(--muted)}
.count{background:var(--green);color:#fff;border-radius:20px;font-size:10.5px;font-weight:700;padding:1px 7px;line-height:1.6}

.app-main{min-width:0;display:flex;flex-direction:column}
.app-top{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--line);height:60px;display:flex;align-items:center;gap:14px;padding:0 24px}
.app-top-logo{display:none;width:120px;height:36px}
.top-search{flex:1;max-width:460px}
.top-search input{width:100%;border:1px solid var(--line);background:var(--light);border-radius:7px;padding:9px 12px;font:13px "DM Sans",sans-serif}
.top-spacer{flex:1}
.bell{position:relative;margin-left:auto;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;color:#3a475a}
.bell:hover{background:var(--light)}
.bell .count{position:absolute;top:2px;right:0}
.app-content{padding:26px 24px 60px;max-width:1240px;width:100%;margin:0 auto}
.lms .menu-toggle{display:none}

/* ---------- page furniture ---------- */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.page-head p{color:var(--muted);margin:4px 0 0}
.page-actions{display:flex;gap:8px;flex-wrap:wrap}
.crumbs{font-size:12px;color:var(--muted);margin-bottom:6px}
.crumbs a:hover{text-decoration:underline}
.card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:20px}
.card + .card,.card + .grid-2,.grid-2 + .card,.stat-grid + .card,.stat-grid + .grid-2{margin-top:18px}
.card-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.card-flush{padding:0;overflow:hidden}
.card-flush .card-head{padding:16px 20px 0}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.grid-2 > .card{margin-top:0}
.grid-main{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;align-items:start}
.grid-main > *{margin-top:0 !important}
.stack{display:grid;gap:18px}
.stack > *{margin-top:0 !important}

.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.stat{background:#fff;border:1px solid var(--line);border-radius:10px;padding:16px}
.stat b{display:block;font:800 26px/1.1 "Plus Jakarta Sans",sans-serif;letter-spacing:-.03em;color:var(--navy)}
.stat span{display:block;font-size:12px;color:var(--muted);margin-top:4px}
.stat.is-accent{border-color:#ffc9d1;background:#fff7f8}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:7px;padding:10px 16px;min-height:40px;font:700 13px "DM Sans",sans-serif;cursor:pointer;transition:.15s;text-align:center;line-height:1.2;white-space:nowrap}
.btn-primary{background:var(--green);color:#fff !important}
.btn-primary:hover{background:#df1031}
.btn-dark{background:var(--navy);color:#fff !important}
.btn-dark:hover{background:#1e293b}
.btn-ghost{background:#fff;border-color:var(--line);color:var(--navy)}
.btn-ghost:hover{border-color:#b9c4d0;background:var(--light)}
.btn-danger{background:#fff;border-color:#f3c1c9;color:#c5112f}
.btn-danger:hover{background:#fff0f2}
.btn-sm{padding:6px 11px;min-height:32px;font-size:12px}
.btn-lg{padding:14px 22px;min-height:50px;font-size:15px}
.btn-block{width:100%}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.inline-form{display:inline}
.actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center}

/* ---------- forms (same look as the site's contact form) ---------- */
.field{display:block;margin-bottom:14px}
.field > span,.field-label{display:block;font-size:11px;font-weight:700;color:#526176;text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px}
.field input:not([type=checkbox]):not([type=radio]):not([type=file]),.field select,.field textarea,.input{width:100%;display:block;border:1px solid #d8e0e9;border-radius:5px;background:#fff;padding:11px 12px;font:14px "DM Sans",sans-serif;color:var(--ink);outline-color:var(--sky)}
.field textarea{resize:vertical;min-height:96px;line-height:1.5}
.field input[type=file]{font:13px "DM Sans",sans-serif;width:100%}
.field small,.hint{display:block;font-size:12px;color:var(--muted);margin-top:5px;font-weight:400;text-transform:none;letter-spacing:0}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
.form-grid .span-2{grid-column:span 2}
.check{display:flex;align-items:flex-start;gap:9px;margin-bottom:12px;font-size:14px;cursor:pointer}
.check input{width:18px;height:18px;margin-top:1px;accent-color:#ff193d;flex:none}
.check small{display:block;color:var(--muted);font-size:12px}
.form-foot{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px;padding-top:16px;border-top:1px solid var(--line)}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.toolbar .input{width:auto;min-width:150px;padding:9px 11px;font-size:13px}
.toolbar input[type=search]{flex:1;min-width:190px}
fieldset.plain{border:0;padding:0;margin:0 0 6px}
fieldset.plain legend{font:700 15px "Plus Jakarta Sans",sans-serif;padding:0;margin-bottom:12px}

/* ---------- alerts, badges, progress ---------- */
.alert{border-radius:8px;padding:12px 14px;margin-bottom:16px;font-size:13.5px;border:1px solid;line-height:1.5}
.alert-ok{background:#ecfdf5;border-color:#a7f3d0;color:#065f46}
.alert-bad{background:#fff0f2;border-color:#fecdd3;color:#9f1239}
.alert-info{background:#eff6ff;border-color:#bfdbfe;color:#1e40af}
.alert-warn{background:#fffbeb;border-color:#fde68a;color:#92400e}
.badge{display:inline-block;border-radius:20px;padding:2px 9px;font-size:11px;font-weight:700;white-space:nowrap}
.badge-ok{background:#ecfdf5;color:#047857}
.badge-done{background:#eff6ff;color:#1d4ed8}
.badge-info{background:#eff6ff;color:#1d4ed8}
.badge-warn{background:#fffbeb;color:#b45309}
.badge-bad{background:#fff0f2;color:#be123c}
.badge-muted{background:#f1f5f9;color:#52607a}
.progress{height:8px;background:#e8edf3;border-radius:20px;overflow:hidden;min-width:70px}
.progress-fill{height:100%;background:var(--green);border-radius:20px;transition:width .4s}
.progress-fill.is-done{background:#10b981}
.progress-label{font-size:12px;color:var(--muted);margin-top:5px}
.progress-row{display:flex;align-items:center;gap:10px}
.progress-row .progress{flex:1}
.progress-row b{font-size:12px;min-width:36px;text-align:right}

/* ---------- tables (override the marketing compare-table colours) ---------- */
.lms .table-wrap{border-radius:10px;border:1px solid var(--line);background:#fff;overflow-x:auto}
.card-flush .table-wrap{border:0;border-radius:0}
.lms table{font-size:13px}
.lms th{white-space:nowrap;padding:11px 14px}
.lms td{padding:12px 14px;vertical-align:middle}
.lms td:not(:first-child){color:inherit;font-weight:400}
.lms td strong{font-size:inherit}
.lms tbody tr:last-child td{border-bottom:0}
.lms tbody tr:hover{background:#fbfcfd}
.cell-main b{display:block;font-weight:700;color:var(--navy)}
.cell-main small{color:var(--muted);font-size:12px;font-weight:400}
.nowrap{white-space:nowrap}
.empty{text-align:center;color:var(--muted);padding:34px 18px}
.empty b{display:block;color:var(--navy);font:700 15px "Plus Jakarta Sans",sans-serif;margin-bottom:4px}
.pager{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:14px}
.pager-info{font-size:12px;color:var(--muted)}
.tabs{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap}
.tabs a{border:1px solid var(--line);background:#fff;border-radius:20px;padding:7px 14px;font-weight:600;font-size:12.5px}
.tabs a.active{background:var(--navy);border-color:var(--navy);color:#fff}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--navy);color:#fff;display:inline-grid;place-items:center;font-weight:700;font-size:12px;object-fit:cover;flex:none}
.avatar-lg{width:76px;height:76px;font-size:24px}
.dl{display:grid;grid-template-columns:140px 1fr;gap:8px 14px;font-size:13.5px;margin:0}
.dl dt{color:var(--muted)}.dl dd{margin:0;word-break:break-word}

/* ---------- course cards ---------- */
.course-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px}
.course-card{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .2s,transform .2s}
.course-card:hover{box-shadow:0 12px 28px rgba(15,23,42,.07);transform:translateY(-2px)}
.course-thumb{aspect-ratio:16/9;background:linear-gradient(135deg,#0f172a,#334155) center/cover;position:relative;display:block}
.course-thumb .badge{position:absolute;top:10px;left:10px}
.course-body{padding:16px;display:flex;flex-direction:column;gap:8px;flex:1}
.course-body .card-label{margin:0;font-size:10px;color:#c5112f}
.course-body p{color:var(--muted);font-size:13px;margin:0}
.course-meta{display:flex;gap:6px;flex-wrap:wrap;font-size:11.5px;color:var(--muted)}
.course-meta span{background:var(--light);border-radius:20px;padding:3px 9px}
.course-foot{margin-top:auto;padding-top:10px;display:grid;gap:10px}
.thumb-sm{width:64px;height:40px;border-radius:5px;object-fit:cover;background:linear-gradient(135deg,#0f172a,#334155);flex:none;display:block}
.media-row{display:flex;gap:12px;align-items:center;min-width:0}

/* ---------- course landing ---------- */
.course-hero{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:22px;align-items:start}
.course-hero .lead{font-size:15px;color:var(--muted);max-width:none}
.hero-thumb{border-radius:10px;aspect-ratio:16/9;background:linear-gradient(135deg,#0f172a,#334155) center/cover}
.outline details{border:1px solid var(--line);border-radius:8px;background:#fff;margin-bottom:10px;overflow:hidden}
.outline summary{padding:14px 16px;font:700 14px "Plus Jakarta Sans",sans-serif;cursor:pointer;display:flex;justify-content:space-between;gap:10px;list-style:none}
.outline summary::-webkit-details-marker{display:none}
.outline summary small{font:400 12px "DM Sans",sans-serif;color:var(--muted);white-space:nowrap}
.outline ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.outline li{border-bottom:1px solid var(--line)}
.outline li:last-child{border-bottom:0}
.outline li > a,.outline li > span{display:flex;align-items:center;gap:10px;padding:12px 16px;font-size:13.5px;min-height:46px}
.outline li > a:hover{background:var(--light)}
.outline li.current > a{background:#fff0f2;font-weight:700}
.outline li .grow{flex:1;min-width:0}
.outline li small{color:var(--muted);font-size:11.5px;white-space:nowrap}
.tick{width:20px;height:20px;border-radius:50%;border:2px solid #c9d3de;flex:none;display:grid;place-items:center;font-size:11px;color:#fff}
.tick.done{background:#10b981;border-color:#10b981}
.tick.lock{border-style:dashed}

/* ---------- lesson player ---------- */
.lesson-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:22px;align-items:start}
.player{background:#000;border-radius:10px;overflow:hidden;aspect-ratio:16/9;position:relative}
.player video,.player iframe{width:100%;height:100%;display:block;border:0;background:#000}
.player-empty{color:#cbd5e1;display:grid;place-items:center;height:100%;text-align:center;padding:20px;font-size:14px}
.lesson-head{margin:16px 0 14px}
.lesson-head .crumbs{margin-bottom:4px}
.lesson-nav{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.lesson-complete{margin-top:16px;display:grid;gap:10px}
.done-note{display:flex;align-items:center;gap:10px;background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46;border-radius:8px;padding:12px 14px;font-weight:600}
.safety{border-left:4px solid #f59e0b;background:#fffbeb;border-radius:0 8px 8px 0;padding:14px 16px;color:#78350f}
.safety h2{color:#92400e;margin-bottom:6px}
.prose{font-size:15px;line-height:1.7;color:#2a3648}
.preview-bar{background:var(--navy);color:#fff;border-radius:8px;padding:10px 14px;margin-bottom:16px;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px}
.preview-bar .btn{min-height:32px;padding:6px 12px}
.side-sticky{position:sticky;top:78px;max-height:calc(100vh - 96px);overflow-y:auto}

/* ---------- content editor ---------- */
.module-block{background:#fff;border:1px solid var(--line);border-radius:10px;margin-bottom:14px}
.module-head{display:flex;align-items:center;gap:10px;padding:14px 16px;flex-wrap:wrap}
.module-head h2{flex:1;min-width:150px}
.lesson-rows{border-top:1px solid var(--line)}
.lesson-row{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--line);background:#fff}
.lesson-row .grow{flex:1;min-width:0}
.lesson-row .grow b{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis}
.lesson-row small{color:var(--muted);font-size:12px}
.module-foot{padding:12px 16px}
.handle{cursor:grab;color:#9aa7b7;font-size:18px;line-height:1;padding:4px 2px;user-select:none;touch-action:none}
.dragging{opacity:.45}
.drop-target{box-shadow:inset 0 2px 0 var(--green)}
.icon-btn{border:1px solid var(--line);background:#fff;border-radius:6px;width:32px;height:32px;cursor:pointer;font-size:13px;color:#3a475a;display:inline-grid;place-items:center}
.icon-btn:hover{background:var(--light)}
.upload-bar{display:none;margin-top:10px}
.upload-bar.on{display:block}
.steps{display:flex;gap:6px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-bottom:16px;padding:0;list-style:none}
.steps li{background:#fff;border:1px solid var(--line);border-radius:20px;padding:5px 12px}
.steps li.on{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:700}

/* ---------- notifications ---------- */
.note-list{list-style:none;margin:0;padding:0}
.note-list li{border-bottom:1px solid var(--line)}
.note-list li:last-child{border-bottom:0}
.note-list a{display:block;padding:14px 18px}
.note-list a:hover{background:var(--light)}
.note-list li.unread a{border-left:3px solid var(--green);background:#fffafb}
.note-list b{display:block}
.note-list small{color:var(--muted)}

/* ---------- auth ---------- */
.lms-auth{display:grid;min-height:100vh;place-items:center;padding:24px 16px}
.auth-wrap{width:100%;max-width:460px}
.auth-logo{margin:0 auto 18px}
.auth-card{padding:28px}
.auth-card h1{margin-bottom:6px}
.auth-card > p{color:var(--muted);margin-bottom:18px}
.auth-foot{text-align:center;font-size:13px;color:var(--muted);margin-top:16px}
.hp{position:absolute !important;left:-9999px !important}

/* modal reuses .modal/.modal-content from styles.css */
.lms .modal-content{max-width:520px}
.lms .modal-content h2{margin-bottom:14px;font-size:1.15rem}

/* ---------- tablet ---------- */
@media(max-width:1020px){
  .grid-main,.course-hero,.lesson-layout{grid-template-columns:minmax(0,1fr)}
  .side-sticky{position:static;max-height:none}
}

/* ---------- phone: off-canvas menu, big touch targets ---------- */
@media(max-width:800px){
  .app{grid-template-columns:minmax(0,1fr)}
  .app-nav{position:fixed;left:0;top:0;bottom:0;width:270px;z-index:40;transform:translateX(-100%);transition:transform .25s;box-shadow:0 0 40px rgba(15,23,42,.2)}
  .app-nav.open{transform:none}
  .lms .nav-overlay{z-index:35}
  .lms .menu-toggle{display:flex;flex-direction:column;gap:4px;padding:10px 8px}
  .lms .menu-toggle span{width:21px;height:2px;background:var(--navy)}
  .app-top{padding:0 12px;gap:8px}
  .app-top-logo{display:flex}
  .top-search{display:none}
  .top-spacer{display:block;flex:1}
  .app-content{padding:18px 14px 70px}
  .grid-2,.form-grid{grid-template-columns:minmax(0,1fr)}
  .form-grid .span-2{grid-column:auto}
  .dl{grid-template-columns:110px 1fr}
  .page-head{align-items:flex-start}
  /* Lesson page: the video goes edge to edge and the main action is thumb-sized. */
  .lesson-layout .player{border-radius:0;margin:-18px -14px 0}
  .lesson-complete .btn,.lesson-nav .btn{min-height:52px;font-size:15px}
  .prose{font-size:16px}
  .course-grid{grid-template-columns:minmax(0,1fr)}
  .toolbar .input,.toolbar .btn{flex:1 1 140px}
  .lesson-row{flex-wrap:wrap}
}
@media print{.app-nav,.app-top,.no-print{display:none !important}.app{display:block}}