/*
 * NEFT Training Ops · Set-up, registry and insight screens (design ops-09 … ops-17, ops-27, ops-35). Loaded after
 * lms.css by OpsPanelProvider. Only what these screens add; the shared tokens and components are in lms.css
 * (docs/ui-components.md). Use the variables, never a hard-coded colour (card template colours excepted).
 *
 *  1. Small helpers          4. Card preview / designer (ops-11, ops-14)
 *  2. Trainee (ops-09/10)    5. Reports, sync, feedback (ops-16, ops-17, ops-35)
 *  3. Field history (ops-32) 6. TVTC export (ops-27)
 */

/* ================================================================ 1. Small helpers */
.neft-sr, .neft-sr-head > * { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.neft-ui { font-family: var(--font-ui); }
.neft-hint { font-size: 12px; color: var(--ink-3); }
.neft-spacer { flex: 1; }
.neft-pager-row { display: flex; gap: 8px; align-items: center; justify-content: flex-end; }
.neft-pager-row > span { margin-inline-end: auto; }
.neft-tag-row { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.neft-timeline { list-style: none; margin: 0; padding: 0 0 0 4px; }
.neft-timeline li { position: relative; padding: 0 0 12px 20px; font-size: 13px; }
.neft-timeline li::before { content: ""; position: absolute; inset-inline-start: 3px; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.neft-timeline li::after { content: ""; position: absolute; inset-inline-start: 7px; top: 17px; bottom: 0; width: 1px; background: var(--line-strong); }
.neft-timeline li:last-child { padding-bottom: 0; }
.neft-timeline li:last-child::after { display: none; }
.neft-timeline .when { font-size: 11.5px; color: var(--ink-3); font-family: var(--font-num); }
table.neft-t.neft-t-inline { max-width: 420px; border: 1px solid var(--line); border-radius: var(--r-xs); }
.neft-hist-lg.fi-icon-btn, .fi-ac-icon-btn-action.neft-hist-lg { width: 34px; height: 34px; border: 1px solid var(--line-strong); background: var(--surface); }
.neft-panel-head .neft-chip { font-weight: 600; }
/* Design tabs (neft.css .tabs) for hand-written pages: underlined links. */
.neft-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.neft-tabs a, .neft-tabs button { padding: 9px 14px; border: 0; background: none; border-bottom: 2px solid transparent; margin-bottom: -1px; font: inherit; font-size: 13.5px; color: var(--ink-3); text-decoration: none; cursor: pointer; white-space: nowrap; display: inline-flex; gap: 6px; align-items: center; }
.neft-tabs a:hover, .neft-tabs button:hover { color: var(--ink); }
.neft-tabs [aria-current='page'], .neft-tabs [aria-selected='true'] { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }
.neft-tabs .n { font-family: var(--font-num); font-size: 11.5px; color: var(--ink-3); font-weight: 400; }
/* Filter row for hand-written pages (ops.css .filters). */
.neft-filters { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.neft-filters .neft-input { width: auto; min-width: 150px; }
select.neft-input { padding-inline-end: 28px; }
/* Two-side layouts drawn as list + 520px editor (ops-12, ops-13) and the 3-column designer (ops-14). */
.neft-cols-side { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr) 520px; align-items: start; }
@media (max-width: 1300px) { .neft-cols-side { grid-template-columns: minmax(0, 1fr); } }

/* ================================================================ 2. Trainee (ops-09 photo placeholder, ops-10 identity card) */
.neft-photo { width: 54px; aspect-ratio: 17.7 / 22.6; border-radius: 5px; background: var(--surface-2); border: 1px solid var(--line); display: inline-grid; place-items: center; color: var(--ink-3); flex-shrink: 0; overflow: hidden; vertical-align: middle; }
.neft-photo svg { width: 70%; height: 70%; fill: currentColor; }
.neft-photo-sm { width: 30px; }
.neft-photo-lg { width: 150px; }
.neft-photo-lg svg { width: 60%; height: 60%; }
.neft-photo.missing { background: var(--bad-soft); color: var(--bad); border-color: var(--bad); border-style: dashed; }
.neft-idcard { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 900px) { .neft-idcard { grid-template-columns: 1fr; } }
/* A trainee list row: the name is a bold link (ops-09), the Arabic name under it. */
.fi-ta-cell .fi-ta-text-item.fi-color-primary.fi-font-bold { text-decoration: underline; text-underline-offset: 2px; }

/* ================================================================ 3. Field history (ops-32 `.kv dd.fh` + `.pop`) */
.neft-kv dd.neft-fh { display: flex; align-items: center; gap: 6px; position: relative; border-radius: 4px; margin-inline-start: -4px; padding-inline-start: 4px; min-height: 26px; }
.neft-kv dd.neft-fh .neft-hist { opacity: 0; }
.neft-kv dd.neft-fh:hover { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.neft-kv dd.neft-fh:hover .neft-hist, .neft-kv dd.neft-fh:focus-within .neft-hist, .neft-kv dd.neft-fh .neft-hist[aria-expanded='true'] { opacity: 1; }
.neft-kv dd.neft-fh .neft-hist[aria-expanded='true'] { color: var(--accent); background: var(--accent-soft); border-color: var(--accent); }
.neft-pop { position: absolute; top: calc(100% + 6px); inset-inline-start: 0; z-index: 20; width: 380px; max-width: 86vw; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-sm); box-shadow: var(--shadow); padding: 10px 12px; font-size: 12.5px; }
.neft-pop h3 { font-size: 12.5px; font-weight: 600; margin: 0 0 6px; }
.neft-pop ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.neft-pop li { display: grid; grid-template-columns: 74px 1fr; gap: 8px; }
.neft-pop .w { font-family: var(--font-num); font-size: 11px; color: var(--ink-3); }
.neft-pop .new { color: var(--ok); background: var(--ok-soft); border-radius: 3px; padding: 0 3px; font-size: 12px; }
.neft-pop .foot { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; font-size: 11.5px; }
[x-cloak] { display: none !important; }

/* ================================================================ 4. Card drawings (ops.css .cr80; App\Filament\Support\CardFace) */
.neft-cr80 { position: relative; aspect-ratio: 85.6 / 54; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: var(--shadow); font-family: Arial, 'Libre Franklin', sans-serif; direction: ltr; color: #000; container-type: inline-size; }
.neft-cr80 > img.bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.neft-cr80 .f, .neft-cr80 .img, .neft-cr80 .box, .neft-cr80 .rule, .neft-cr80 .ob { position: absolute; left: calc(var(--x) * 100cqw / var(--cw, 85.6)); top: calc(var(--y) * 100cqw / var(--cw, 85.6));
    width: calc(var(--w) * 100cqw / var(--cw, 85.6)); height: calc(var(--h) * 100cqw / var(--cw, 85.6)); }
.neft-cr80 .f { font-size: calc(var(--pt, 7) * 0.3528 * 100cqw / var(--cw, 85.6)); display: flex; align-items: center; justify-content: center; overflow: hidden; white-space: normal; line-height: 1.15; text-align: center; }
.neft-cr80 .img { object-fit: contain; }
.neft-cr80 .photo-slot { background: #E6EAEC; display: grid; place-items: center; color: #8A979D; }
.neft-cr80 .photo-slot svg { width: 70%; height: 70%; fill: currentColor; }
.neft-cr80 .box { border: 1px dashed #9AA6AB; color: #59666C; display: grid; place-items: center; font: 600 calc(6 * 0.3528 * 100cqw / var(--cw, 85.6)) Arimo, Arial, sans-serif; letter-spacing: .05em; background: rgba(255,255,255,.7); }
.neft-cr80 .rule { background: #17365D; }
.neft-cr80.back { background: #fff; }
.neft-cr80 .grid-ov { position: absolute; inset: 0; pointer-events: none;
    background-image: linear-gradient(rgba(29,93,143,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(29,93,143,.18) 1px, transparent 1px);
    background-size: calc(100cqw / var(--cw, 85.6) * 5) calc(100cqw / var(--cw, 85.6) * 5); }
.neft-cr80 .ob { outline: 1px dashed rgba(11,122,124,.7); background: transparent; border: 0; padding: 0; cursor: pointer; }
.neft-cr80 .ob.on { outline: 2px solid #0B7A7C; background: rgba(11,122,124,.08); }
.neft-card-pair { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
.neft-card-cap { font-size: 11.5px; color: var(--ink-3); margin-top: 6px; text-align: center; }

/* Certificate page (ops-11): actions list, public preview, version diffs, the selected version row. */
.neft-act { display: flex; gap: 12px; align-items: flex-start; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.neft-act:last-child { border-bottom: 0; }
.neft-act .d { flex: 1; font-size: 12.5px; color: var(--ink-3); }
.neft-act .d strong { color: var(--ink); display: block; font-size: 13.5px; }
.neft-public { border: 1px dashed var(--line-strong); border-radius: 6px; padding: 10px 12px; font-size: 12.5px; }
.neft-diff del { color: var(--bad); } .neft-diff ins { color: var(--ok); text-decoration: none; font-weight: 600; }
table.neft-t tr.neft-selected td { background: var(--accent-soft); }
table.neft-t td > a:not(.neft-mono):not(.neft-btn) { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* ================================================================ 5. Reports, sync, feedback */
/* A row still unacknowledged after five minutes (ops-17). */
table.neft-t tr.neft-stale td { background: var(--warn-soft); }
table.neft-t tr.neft-stale:hover td { background: var(--warn-soft); }
.neft-panel-head .neft-seg > button { min-height: 28px; }
/* Page header: the title block shrinks before the actions wrap under it (design .page-head keeps .acts at the end). */
.fi-header > div:first-child { flex: 1 1 0; min-width: 0; }
/* Reports (ops-16): tab links + filters on one row, plain-HTML vertical bars with the value on each bar. */
.neft-report-bar { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: flex-end; justify-content: space-between; border-bottom: 1px solid var(--line); }
.neft-report-bar .neft-tabs { border-bottom: 0; }
.neft-report-bar .neft-filters { padding-bottom: 6px; }
.neft-vbars { display: grid; gap: 12px; height: 200px; align-items: end; }
.neft-vbar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; }
.neft-vbar .b { width: 60%; max-width: 46px; background: var(--accent); border-radius: 3px 3px 0 0; min-height: 1px; }
.neft-vbar.partial .b { opacity: .55; }
table.neft-t tr.neft-total td { background: var(--surface-2); }
.neft-tabs a:not([aria-current='page']), .neft-tabs button:not([aria-selected='true']) { color: var(--ink-3); }
.neft-tabs a[aria-current='page'] { color: var(--ink); }

/* Card designer (ops-14): fields · canvas · properties, rulers, swatch. */
.neft-designer { display: grid; grid-template-columns: 250px minmax(0, 1fr) 290px; gap: 14px; align-items: start; }
@media (max-width: 1380px) { .neft-designer { grid-template-columns: 230px minmax(0, 1fr); } .neft-designer > :last-child { grid-column: 1 / -1; } }
@media (max-width: 1000px) { .neft-designer { grid-template-columns: minmax(0, 1fr); } }
.neft-fields li { padding: 0; }
.neft-fields li > button { display: flex; width: 100%; gap: 8px; align-items: center; padding: 6px 10px; font: inherit; font-size: 12.5px; background: none; border: 0; text-align: start; cursor: pointer; color: var(--ink); }
.neft-fields li > button:hover { background: var(--surface-2); }
.neft-fields li > button.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.neft-fields li .neft-mono { margin-inline-start: auto; font-size: 11px; color: var(--ink-3); }
.neft-fields li.neft-muted { padding: 6px 10px; }
.neft-stage { padding: 14px; background: var(--surface-2); overflow: auto; }
.neft-ruler { position: relative; display: grid; grid-template-columns: 22px auto; grid-template-rows: 18px auto; width: max-content; margin: 0 auto; direction: ltr; }
.neft-ruler .rt, .neft-ruler .rl { position: relative; font-family: var(--font-num); font-size: 9.5px; color: var(--ink-3); }
.neft-ruler .rt { grid-column: 2; border-bottom: 1px solid var(--line-strong); }
.neft-ruler .rl { grid-row: 2; border-right: 1px solid var(--line-strong); }
.neft-ruler .rt span { position: absolute; top: 0; transform: translateX(2px); }
.neft-ruler .rl span { position: absolute; left: 2px; transform: translateY(1px); }
.neft-ruler .neft-card-fig { grid-row: 2; grid-column: 2; }
.neft-ruler .neft-cr80 { border-radius: 4px; box-shadow: 0 0 0 1px var(--line-strong); }
.neft-check { display: inline-flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--ink-2); }
.neft-swatch { width: 18px; height: 18px; border-radius: 4px; border: 1px solid var(--line-strong); display: inline-block; vertical-align: middle; }

/* Card fonts for the on-screen card drawings (the OFL substitutes the card PDFs embed; resources/fonts/cards, copied
   to public/neft/fonts/cards). Loaded by the browser only when a card is drawn. */
@font-face { font-family: 'Cinzel Decorative'; font-weight: 400; font-display: swap; src: url('../fonts/cards/cinzel-decorative/CinzelDecorative-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Cinzel Decorative'; font-weight: 700; font-display: swap; src: url('../fonts/cards/cinzel-decorative/CinzelDecorative-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Fondamento'; font-weight: 400 700; font-display: swap; src: url('../fonts/cards/fondamento/Fondamento-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Source Sans 3'; font-weight: 400; font-display: swap; src: url('../fonts/cards/source-sans-3/SourceSans3-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Source Sans 3'; font-weight: 600 700; font-display: swap; src: url('../fonts/cards/source-sans-3/SourceSans3-Semibold.ttf') format('truetype'); }
@font-face { font-family: 'Libre Franklin'; font-weight: 400; font-display: swap; src: url('../fonts/cards/libre-franklin/LibreFranklin-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Libre Franklin'; font-weight: 600 700; font-display: swap; src: url('../fonts/cards/libre-franklin/LibreFranklin-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Arimo'; font-weight: 400; font-display: swap; src: url('../fonts/cards/arimo/Arimo-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Arimo'; font-weight: 600 700; font-display: swap; src: url('../fonts/cards/arimo/Arimo-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Carlito'; font-weight: 400; font-display: swap; src: url('../fonts/cards/carlito/Carlito-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Carlito'; font-weight: 600 700; font-display: swap; src: url('../fonts/cards/carlito/Carlito-Bold.ttf') format('truetype'); }

/* ================================================================ 6. TVTC export (ops-27) */
table.neft-tv { min-width: 1180px; }
table.neft-tv tr.is-up td { color: var(--ink-2); }
table.neft-tv tr.is-excluded td { color: var(--ink-3); text-decoration: line-through; }
table.neft-tv tr.is-excluded td.keep { text-decoration: none; }
table.neft-tv td.neft-mono { white-space: nowrap; }

/* Classroom feedback (ops-35): averages, mini meters, star distributions, comments. */
.neft-avg { font-family: var(--font-num); font-weight: 700; }
.neft-avg.lo { color: var(--bad); }
.neft-mini-meter { display: inline-block; width: 70px; height: 6px; border-radius: 999px; background: var(--line); vertical-align: middle; margin-inline-start: 6px; overflow: hidden; }
.neft-mini-meter > span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.neft-dist-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1100px) { .neft-dist-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.neft-dist { margin: 0; }
.neft-dist h3 { font-size: 13px; display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px; font-weight: 600; }
.neft-dist h3 .neft-avg { font-size: 20px; margin-inline-start: auto; }
.neft-dist .neft-bar-h { margin: 3px 0; }
.neft-dist .lbl { width: 26px; color: var(--ink-3); font-family: var(--font-num); }
.neft-cmt { list-style: none; margin: 0; padding: 0; }
.neft-cmt li { padding: 10px 14px; border-bottom: 1px solid var(--line); display: flex; gap: 12px; align-items: flex-start; }
.neft-cmt li:last-child { border-bottom: 0; }
.neft-cmt .stars { font-family: var(--font-num); font-size: 12px; font-weight: 700; color: var(--ink-2); white-space: nowrap; min-width: 52px; }
.neft-cmt .txt { flex: 1; font-size: 13px; }
.neft-cmt .meta { font-size: 11.5px; color: var(--ink-3); display: block; margin-top: 2px; }
.neft-cmt li.low { box-shadow: inset 3px 0 0 var(--bad); }
.neft-linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }