/*
 * Training area screens (design ops-02 … ops-08, ops-18, ops-26, ops-28, ops-30, ops-31, ops-34): the parts that only
 * these screens draw. Shared tokens and components are in ../lms.css; use the variables, never a hard-coded colour.
 */

/* ---------------------------------------------------------------- Lists: chips inside a text cell (ops-02 "Level 2") */
.fi-ta-text-item .neft-chip { margin-inline-start: 4px; vertical-align: 1px; }

/* ---------------------------------------------------------------- Class screen (ops-03 / ops-30) */
/* Page head: chips after "Class BTH-…" on the title line, "Saved …" in grey. */
.neft-head-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.neft-head-chips .neft-saved { font-size: 13px; color: var(--ink-3); margin-inline-start: 4px; }
.fi-header-heading .neft-mono { font-family: var(--font-num); font-size: 18px; font-weight: 600; }

/* Step 1 · Class: dense label/value grid like the design's form-grid (labels 12px grey, values 13.5px). */
.neft-class-head .fi-section-header { display: flex; align-items: center; gap: 8px; }
.neft-class-head .fi-section-header-description { display: inline-flex; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 11.5px; color: var(--ink-2); }
.neft-class-head .fi-section-content { padding: 12px 14px; row-gap: 12px; column-gap: 14px; }
.neft-class-head .fi-in-entry-label { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.neft-class-head .fi-in-text-item, .neft-class-head .fi-in-text { font-size: 13.5px; }
.neft-class-head .fi-in-entry-content-ctn { min-height: 34px; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--r-xs); background: var(--surface-2); align-items: center; }
.neft-class-head .fi-in-entry .fi-in-entry-helper-text, .neft-class-head .fi-sc-text, .neft-class-head [class*="helper-text"] { font-size: 11.5px; color: var(--ink-3); }

/* Step 2 beside the tabs: 270px company list + the roster (ops-03 .cls-grid). */
.neft-cls-grid > .fi-sc { display: grid !important; grid-template-columns: 270px minmax(0, 1fr) !important; gap: 16px; align-items: start; }
.neft-cls-grid > .fi-sc > .fi-grid-col { grid-column: auto !important; min-width: 0; }
@media (max-width: 1240px) { .neft-cls-grid > .fi-sc { grid-template-columns: minmax(0, 1fr) !important; } }
.neft-co-panel { display: flex; flex-direction: column; gap: 0 !important; padding: 0; overflow: hidden; }
.neft-co-panel .neft-panel-head h2 { font-size: 14px; font-weight: 600; margin: 0; }
.neft-co-list { list-style: none; margin: 0; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.neft-co-item { width: 100%; display: flex; gap: 8px; justify-content: space-between; align-items: flex-start; padding: 9px 10px; border-radius: var(--r-xs);
    border: 1px solid var(--line); color: var(--ink); background: var(--surface); text-align: start; font: inherit; cursor: pointer; }
.neft-co-item:hover { border-color: var(--accent); }
.neft-co-item.is-on { background: var(--accent-soft); border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.neft-co-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.neft-co-name { font-weight: 600; }
.neft-co-counts { white-space: nowrap; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: end; }
.neft-co-n { font-weight: 700; font-size: 15px; }
.neft-add-co { padding: 0 8px 8px; }
.neft-add-co .fi-btn { width: 100%; justify-content: center; }
.neft-co-foot { border-top: 1px solid var(--line); padding: 10px 14px; }
.neft-co-foot p { margin: 0 0 6px; } .neft-co-foot p:last-child { margin: 0; }

/* Activity in this class (ops-30 .log). */
.neft-log { list-style: none; margin: 0; padding: 0; }
.neft-log li { padding: 8px 14px; border-bottom: 1px solid var(--line); font-size: 12.5px; display: flex; gap: 10px; align-items: baseline; }
.neft-log li:last-child { border-bottom: 0; }
.neft-log-when { font-family: var(--font-num); font-size: 11.5px; color: var(--ink-3); white-space: nowrap; min-width: 84px; }
.neft-class-head .fi-section-header-description { width: fit-content; }

/* ---------------------------------------------------------------- Roster (ops-30): role bar, pipeline, queues, rows */
.neft-roster-head { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; color: var(--ink-2); font-size: 13px; font-weight: 400; }
.neft-rolebar { display: flex; gap: 12px; flex-wrap: wrap; padding: 8px 12px; border: 1px solid var(--line); border-inline-start: 3px solid var(--accent); border-radius: var(--r-xs); background: var(--surface); font-size: 12.5px; }
.neft-can { color: var(--ok); font-weight: 600; } .neft-cant { color: var(--bad); font-weight: 600; }
.neft-pipe { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: stretch; }
.neft-pipe li { display: flex; align-items: stretch; }
.neft-pipe-box { display: flex; flex-direction: column; gap: 1px; min-width: 96px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-xs); background: var(--surface); color: var(--ink); }
.neft-pipe .v { font-family: var(--font-num); font-size: 22px; font-weight: 700; line-height: 1.1; }
.neft-pipe .l { font-size: 12px; color: var(--ink-3); }
.neft-pipe-arrow { align-items: center !important; color: var(--ink-3); padding: 0 1px; }
.neft-pipe-gap { width: 14px; }
.neft-pipe .side .neft-pipe-box { border-style: dashed; }
.neft-pipe .side.bad .neft-pipe-box { border-color: var(--bad); } .neft-pipe .side.bad .v { color: var(--bad); }
.neft-pipe .side.warn .neft-pipe-box { border-color: var(--warn); } .neft-pipe .side.warn .v { color: var(--warn); }
.neft-queues { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.neft-queues-lbl { font-size: 12.5px; font-weight: 600; color: var(--ink); margin-inline-end: 4px; }
.neft-queues-lbl .neft-muted { font-weight: 400; }
.neft-queues button { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 999px;
    background: var(--surface); color: var(--ink-2); font: inherit; font-size: 12.5px; cursor: pointer; }
.neft-queues button[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }
.dark .neft-queues button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #0A1B22; }
.neft-queues .n { font-family: var(--font-num); font-weight: 700; }
.neft-queues .own { font-size: 11.5px; opacity: .8; }
.neft-nexta { font-size: 12px; color: var(--ink-2); } .neft-nexta strong { color: var(--ink); }
/* Company group rows inside the roster (ops-30 tr.grp). */
.fi-ta-group-header { background: var(--surface-2); border-top: 1px solid var(--line-strong); padding: 7px 12px; }
.fi-ta-group-header .fi-ta-group-heading { font-weight: 600; font-size: 13px; color: var(--ink); }
.fi-ta-group-header .fi-ta-group-description { font-size: 12px; color: var(--ink-3); }

/* ---------------------------------------------------------------- Print (ops-07) and its tabs; queue (ops-08) */
.neft-head-tabs { display: inline-flex; gap: 2px; margin-inline-start: 16px; vertical-align: middle; }
.neft-head-tabs a { padding: 6px 12px; color: var(--ink-3); text-decoration: none; border-bottom: 2px solid transparent; font-size: 13.5px; display: inline-flex; gap: 6px; align-items: center; }
.neft-head-tabs a[aria-current="page"] { color: var(--ink); font-weight: 600; border-color: var(--accent); }
.neft-print-cols { display: grid; grid-template-columns: minmax(0, 1fr) 470px; gap: 16px; align-items: start; }
@media (max-width: 1280px) { .neft-print-cols { grid-template-columns: minmax(0, 1fr); } }
.neft-basket { list-style: none; margin: 0; padding: 0; }
.neft-basket li { display: flex; gap: 10px; align-items: center; padding: 8px 14px; border-bottom: 1px solid var(--line); }
.neft-basket li:last-child { border-bottom: 0; }
.neft-basket-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.neft-photo { width: 30px; aspect-ratio: 17.7 / 22.6; border-radius: 5px; background: var(--surface-2); border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink-3); flex-shrink: 0; overflow: hidden; }
.neft-photo svg { width: 70%; height: 70%; }
.neft-photo.missing { background: var(--bad-soft); color: var(--bad); border-color: var(--bad); border-style: dashed; }
.neft-icon-btn { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-xs); border: 0; background: none; color: var(--ink-2); cursor: pointer; }
.neft-icon-btn:hover { background: var(--surface-2); }
.neft-icon-btn svg { width: 16px; height: 16px; }
.neft-tpl-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.neft-tpl-row button { min-height: 40px; border-radius: var(--r-xs); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; position: relative; }
.neft-tpl-row button[aria-checked="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }
.dark .neft-tpl-row button[aria-checked="true"] { background: var(--accent); border-color: var(--accent); color: #0A1B22; }
.neft-tpl-row button.suggested::after { content: attr(data-usual); position: absolute; top: -8px; inset-inline-end: 4px; font-size: 9.5px; font-weight: 700; padding: 0 5px; border-radius: 999px; background: var(--ok-soft); color: var(--ok); border: 1px solid var(--ok); }
.neft-prn { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.neft-prn legend { font-size: 12.5px; font-weight: 600; margin-bottom: 6px; }
.neft-prn label { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-xs); cursor: pointer; }
.neft-prn label.is-on { border-color: var(--accent); background: var(--accent-soft); }
.neft-prn label.is-off { opacity: .6; cursor: not-allowed; }
.neft-prn input { accent-color: var(--accent); }
.neft-prn-name { flex: 1; }
.neft-btn-lg { min-height: 44px; font-size: 14.5px; padding: 0 18px; justify-content: center; width: 100%; }
.neft-btn-lg svg { width: 18px; height: 18px; }
.neft-btn[disabled] { opacity: .55; cursor: not-allowed; }
.neft-cols-main-grid > .fi-sc { display: grid !important; grid-template-columns: minmax(0, 1fr) 360px !important; gap: 16px; align-items: start; }
.neft-cols-main-grid > .fi-sc > .fi-grid-col { grid-column: auto !important; min-width: 0; }
@media (max-width: 1240px) { .neft-cols-main-grid > .fi-sc { grid-template-columns: minmax(0, 1fr) !important; } }
.neft-printers { list-style: none; margin: 0; padding: 0; }
.neft-printers li { display: flex; flex-direction: column; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.neft-printers li:last-child { border-bottom: 0; }
.neft-printer-top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.neft-spacer { flex: 1; }

/* ---------------------------------------------------------------- Today board (ops-31) */
.neft-live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ok); font-weight: 600; margin-inline-start: 8px; }
.neft-live .neft-sdot { animation: neft-pulse 1.6s ease-in-out infinite; }
@keyframes neft-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .neft-live .neft-sdot { animation: none; } }
.neft-tot { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.neft-tot li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xs); padding: 10px 12px; display: flex; flex-direction: column; }
.neft-tot .v { font-family: var(--font-num); font-size: 22px; font-weight: 700; line-height: 1.15; }
.neft-tot .l { font-size: 12px; color: var(--ink-3); }
.neft-tot li.side { border-style: dashed; }
.neft-tot li.bad .v { color: var(--bad); } .neft-tot li.warn .v { color: var(--warn); }
.neft-board { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
@media (max-width: 1280px) { .neft-board { grid-template-columns: minmax(0, 1fr); } }
.neft-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); }
@media (max-width: 720px) { .neft-cards { grid-template-columns: minmax(0, 1fr); } }
.neft-cc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xs); display: flex; flex-direction: column; border-top: 3px solid var(--line-strong); }
.neft-cc.is-ok { border-top-color: var(--ok); } .neft-cc.is-info { border-top-color: var(--info); }
.neft-cc-head { padding: 10px 14px 8px; display: flex; flex-direction: column; gap: 2px; }
.neft-cc-head h3 { font-size: 14px; font-weight: 600; margin: 0; }
.neft-cards .neft-cc-head h3 a { color: var(--ink) !important; text-decoration: none; } .neft-cc-head h3 a:hover { color: var(--accent); text-decoration: underline; }
.neft-cc-meta { font-size: 12px; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 4px 12px; }
.neft-cc-top { display: flex; align-items: center; gap: 8px; } .neft-cc-top .neft-chip { margin-inline-start: auto; }
.neft-mp { list-style: none; margin: 0; padding: 6px 14px 10px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; }
.neft-mp li { display: flex; flex-direction: column; align-items: center; padding: 5px 2px 4px; background: var(--surface-2); border: 1px solid var(--line); font-size: 10.5px; color: var(--ink-3); text-align: center; line-height: 1.2; }
.neft-mp li:first-child { border-start-start-radius: 5px; border-end-start-radius: 5px; } .neft-mp li:last-child { border-start-end-radius: 5px; border-end-end-radius: 5px; }
.neft-mp li .v { font-family: var(--font-num); font-size: 15px; font-weight: 700; color: var(--ink); }
.neft-mp li.done { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 30%, var(--line)); }
.neft-mp li.zero .v { color: var(--ink-3); }
.neft-cc-side { padding: 0 14px 8px; display: flex; gap: 6px; flex-wrap: wrap; font-size: 12px; }
.neft-waits { padding: 8px 14px 12px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.neft-waits .lbl { font-size: 11.5px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; margin-inline-end: 2px; }
.neft-waits a.neft-chip { text-decoration: none; } .neft-waits a.neft-chip:hover { outline: 1px solid currentColor; }
.neft-cc-foot { margin-top: auto; padding: 8px 14px; border-top: 1px solid var(--line); display: flex; gap: 8px; align-items: center; font-size: 12px; }
.neft-q, .neft-mgr { list-style: none; margin: 0; padding: 0; }
.neft-q li, .neft-mgr li { display: flex; gap: 10px; align-items: center; padding: 8px 14px; border-bottom: 1px solid var(--line); }
.neft-q li:last-child, .neft-mgr li:last-child { border-bottom: 0; }
.neft-q .n { font-family: var(--font-num); font-weight: 700; font-size: 16px; min-width: 26px; text-align: end; }
.neft-q .t { flex: 1; font-size: 12.5px; }
.neft-mgr li { flex-direction: column; align-items: stretch; gap: 6px; }
.neft-mgr .top { display: flex; gap: 8px; align-items: center; }
.neft-mgr p { margin: 0; font-size: 12.5px; color: var(--ink-2); }
.neft-mgr .neft-acts { display: flex; gap: 6px; }

/* ---------------------------------------------------------------- Check-in review (ops-26) and class QR (ops-28) */
.neft-kpis-meters .neft-kpi .neft-meter { margin-top: 6px; }
.neft-qr-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; margin-bottom: 16px; }
@media (max-width: 1180px) { .neft-qr-grid { grid-template-columns: minmax(0, 1fr); } }
/* The projector stage stays navy in both themes (it is what the room sees). */
.neft-qr-stage { background: var(--brand); color: #fff; border-radius: var(--r-sm); padding: 24px; display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 28px; align-items: center; }
@media (max-width: 900px) { .neft-qr-stage { grid-template-columns: minmax(0, 1fr); } }
.neft-qr-poster { width: 300px; aspect-ratio: 210 / 297; border: 0; border-radius: 10px; background: #fff; }
.neft-qr-text .course { font-size: 28px; font-weight: 700; }
.neft-qr-text .course-ar { font-family: var(--font-ar); font-size: 20px; direction: rtl; text-align: start; color: #D3ECEF; }
.neft-qr-text .when { font-size: 16px; color: #D3ECEF; margin-top: 4px; }
.neft-qr-text .scan { margin-top: 20px; display: flex; flex-direction: column; gap: 6px; }
.neft-qr-text .scan p { margin: 0; font-size: 22px; font-weight: 700; }
.neft-qr-text .scan .ar { font-family: var(--font-ar); direction: rtl; text-align: start; }
.neft-qr-text .scan .ur { font-family: 'Noto Nastaliq Urdu', 'Noto Naskh Arabic', var(--font-ar); direction: rtl; text-align: start; line-height: 2; font-size: 20px; }
.neft-qr-text .scan .en { color: var(--accent-bright); }
.neft-qr-text .count-big { margin-top: 20px; display: flex; align-items: baseline; gap: 10px; }
.neft-qr-text .count-big .v { font-family: var(--font-num); font-size: 44px; font-weight: 700; }
.neft-qr-text .count-big .l { font-size: 15px; color: #D3ECEF; }
.neft-qr-text .neft-meter { background: rgba(255,255,255,.18); height: 8px; max-width: 420px; display: block; }
.neft-qr-text .neft-meter > span { background: var(--accent-bright); }
.neft-qr-text .valid { margin-top: 12px; font-size: 13px; color: #C9DDE2; }
.neft-callout-bad { border-inline-start-color: var(--bad); background: var(--bad-soft); margin-top: 12px; }

/* ---------------------------------------------------------------- Paste from Excel (ops-04, ops-30 merge preview) */
.neft-steps { display: inline-flex; gap: 4px; align-items: center; }
.neft-steps span { font-size: 11.5px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--ink-3); }
.neft-steps .done { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.neft-steps .on { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }
.neft-mp-sum { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13.5px; }
.neft-mp-sum strong { font-family: var(--font-num); }
.neft-raw td, .neft-raw th { font-size: 12px; white-space: nowrap; }
.neft-split li { gap: 10px; }
.neft-split-n { font-weight: 700; min-width: 22px; text-align: end; }
.neft-sumgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.neft-sumgrid > div { display: flex; flex-direction: column; }
.neft-sumgrid .v { font-family: var(--font-num); font-size: 22px; font-weight: 700; }
.fi-ta-row.neft-row-problem > td { background: var(--bad-soft); }
.fi-ta-row.neft-row-same > td { color: var(--ink-3); }

/* ---------------------------------------------------------------- Issue result (ops-05), above the roster */
.neft-issue-report { border: 1px solid var(--line); border-inline-start: 3px solid var(--ok); border-radius: var(--r-xs); background: var(--surface); padding: 12px 14px; }
.neft-issue-top { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.neft-issue-top .big { font-family: var(--font-num); font-size: 28px; font-weight: 700; line-height: 1.1; }
.neft-btn svg { width: 16px; height: 16px; }
.neft-scans { border: 1px solid var(--line); border-radius: var(--r-xs); }
.neft-scans-head { padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--surface-2); }

/* ---------------------------------------------------------------- Photo capture (ops-18) */
.neft-cam { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 14px; align-items: start; }
.neft-cam-stage { background: #10232B; border-radius: var(--r-xs); overflow: hidden; aspect-ratio: 16 / 10; display: grid; place-items: center; position: relative; }
.neft-cam-live { position: relative; width: 100%; height: 100%; }
.neft-cam-live video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The card's photo box (17.7 × 22.6) over the live picture. */
.neft-cam-frame { position: absolute; top: 6%; bottom: 6%; left: 50%; transform: translateX(-50%); aspect-ratio: 177 / 226; border: 2px solid var(--accent-bright); border-radius: 4px; box-shadow: 0 0 0 9999px rgba(0,0,0,.35); }
.neft-cam-state { position: absolute; top: 8px; inset-inline-start: 8px; font-size: 12px; color: #fff; background: rgba(0,0,0,.45); padding: 2px 8px; border-radius: 999px; }
.neft-cam-shot { height: 100%; aspect-ratio: 177 / 226; object-fit: cover; }
.neft-cam-side { display: flex; flex-direction: column; gap: 10px; }
.neft-cam-side label { display: flex; flex-direction: column; gap: 4px; }
.neft-kbd { font-family: var(--font-num); font-size: 11px; padding: 0 5px; border: 1px solid currentColor; border-radius: 4px; opacity: .8; }

/* ---------------------------------------------------------------- Arabic (RTL): arrows point the reading way */
[dir="rtl"] .neft-pipe-arrow { transform: scaleX(-1); }