/* Lugoda Sentinel — Training (Service line ④) view styling.
   Dark theme, red accent. Builds on shared card / pill / chip / kpi / scrim / modal / btn
   from theme.css + components.css. Selectors namespaced .trn-* to avoid collisions. */

/* ====================  HEAD  ==================== */
.trn-head .sub{flex-basis:100%;margin-top:4px}

/* KPI band: 4 tiles instead of the default 6 */
.kpis.trn-kpis{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.kpis.trn-kpis{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.kpis.trn-kpis{grid-template-columns:1fr}}

/* ====================  FILTER ROW  ==================== */
.trn-filters{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.trn-fbtn{background:var(--panel2);border:1px solid var(--line);color:var(--muted);
  border-radius:999px;padding:7px 16px;font-size:13px;font-weight:600;cursor:pointer;transition:.15s;font-family:inherit}
.trn-fbtn:hover{border-color:#50505c;color:var(--txt)}
.trn-fbtn.active{background:var(--red);border-color:var(--red);color:#fff}

/* ====================  CARD GRID  ==================== */
.trn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
@media(max-width:520px){.trn-grid{grid-template-columns:1fr}}

.trn-card{display:flex;flex-direction:column;transition:.2s;overflow:hidden}
.trn-card:hover{border-color:#50505c;transform:translateY(-2px)}
.trn-card.is-dev{border-style:dashed;opacity:.96}

.trn-cardhead{padding:14px 16px 10px;border-bottom:1px solid var(--line)}
.trn-codeline{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.trn-title{font-size:16px;line-height:1.35;color:var(--txt)}

.trn-cbody{display:flex;flex-direction:column;gap:10px;flex:1}

.trn-meta{font-size:12px;color:#cfcfd6;display:flex;flex-wrap:wrap;align-items:center;gap:5px;line-height:1.7}
.trn-dot{color:var(--grey)}

.trn-blurb{font-size:13px;margin:0;line-height:1.55}

/* ----  modules expander  ---- */
.trn-modwrap{margin-top:2px}
.trn-modtoggle{display:inline-flex;align-items:center;gap:8px;background:var(--panel2);
  border:1px solid var(--line);color:var(--txt);border-radius:9px;padding:8px 12px;font-size:12px;
  font-weight:600;cursor:pointer;transition:.15s;font-family:inherit;width:100%;justify-content:flex-start}
.trn-modtoggle:hover{border-color:var(--red)}
.trn-modn-count{background:#33333c;color:#cfcfd6;border-radius:999px;font-size:11px;padding:1px 8px}
.trn-caret{margin-left:auto;color:var(--muted);transition:transform .2s}
.trn-modtoggle.open .trn-caret{transform:rotate(180deg)}
.trn-modtoggle.open{border-color:var(--red);background:#241416}

.trn-mods{list-style:none;margin:8px 0 0;padding:6px 4px 0;border-top:1px solid var(--ink2);
  animation:trn-modin .22s ease}
.trn-mods[hidden]{display:none}
@keyframes trn-modin{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.trn-mod{display:flex;align-items:center;gap:10px;padding:6px 4px;font-size:13px;color:var(--txt)}
.trn-modn{flex:0 0 22px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  font-size:11px;font-weight:700;background:#33333c;color:#cfcfd6}
.trn-modt{flex:1}

/* ----  card foot (live / scheduled)  ---- */
.trn-cardfoot{margin-top:auto;padding-top:6px}

/* ====================  IN-DEVELOPMENT PROGRESS  ==================== */
.trn-devbar{margin-top:auto;padding-top:6px}
.trn-devlabel{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:7px;flex-wrap:wrap}
.trn-soon{font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px;
  background:#2c2c34;color:#b9b9c2;border:1px solid var(--line)}
.trn-devpct{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.trn-track{height:8px;border-radius:999px;background:#2c2c34;overflow:hidden;position:relative}
.trn-fill{height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--red-dark),var(--red));position:relative;overflow:hidden}
.trn-fill::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  transform:translateX(-100%);animation:trn-shimmer 1.8s infinite}
@keyframes trn-shimmer{to{transform:translateX(100%)}}

/* ====================  SCHEDULE MODAL FORM  ==================== */
.trn-modal{width:min(480px,100%)}
.trn-modal .mhead .chip.line{flex:0 0 auto}
.trn-form{display:flex;flex-direction:column;gap:14px}
.trn-ffield{display:flex;flex-direction:column;gap:6px}
.trn-flabel{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.trn-finput{width:100%;background:var(--ink);border:1px solid var(--line);color:var(--txt);
  border-radius:9px;padding:9px 11px;font-size:13px;font-family:inherit}
.trn-finput:focus{outline:none;border-color:var(--red)}
select.trn-finput{cursor:pointer}
input.trn-finput[type="date"]{color-scheme:dark}
.trn-note{margin:0}

/* ====================  TOAST  ==================== */
.trn-toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(0);
  background:#13362a;border:1px solid var(--green);color:var(--green);font-weight:600;font-size:13px;
  padding:11px 20px;border-radius:999px;z-index:90;box-shadow:var(--shadow);
  animation:trn-toastin .3s ease;max-width:min(92vw,520px);text-align:center}
.trn-toast.out{opacity:0;transform:translateX(-50%) translateY(10px);transition:.5s ease}
@keyframes trn-toastin{from{opacity:0;transform:translateX(-50%) translateY(14px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}

/* ===== training enhancements: audience targeting, CPD, notifications ===== */
.trn-audience{margin-top:8px}
.trn-next{font-size:11px;color:var(--muted);margin-left:auto;align-self:center}
.trn-cardfoot{display:flex;gap:8px;flex-wrap:wrap}
.trn-marketing{margin-bottom:16px}
.trn-pingbar{display:flex;gap:8px}
.trn-pingbar .qr-in{flex:1}