/* ==========================================================================
   Shared UI components — system-wide building blocks.

   Loaded globally (after brand.css) so every page composes the same cards,
   buttons, form fields, section headers and side panels instead of each
   template shipping its own <style> block. Uses the brand token from brand.css.

   Namespace: `.nf-*` (form/detail primitives). Reuse these classes anywhere;
   do not redefine them per page.
   ========================================================================== */
:root { --brand-soft:#fdeaea; --brand-d:#7d0e0d; }

.nf { --acc:var(--brand); --acc-dark:var(--brand-d); --acc-soft:var(--brand-soft); }

/* breadcrumb */
.nf-bc { display:flex; align-items:center; gap:.4rem; font-size:.82rem; color:#64748b; margin-bottom:.9rem; flex-wrap:wrap; }
.nf-bc a { color:var(--acc); text-decoration:none; font-weight:600; } .nf-bc a:hover { text-decoration:underline; }
.nf-bc .sep { color:#cbd5e0; } .nf-bc .cur { color:#1e293b; font-weight:700; }

/* page hero */
.nf-hero { display:flex; align-items:center; gap:1rem; margin-bottom:1.3rem; }
.nf-hero .ic { width:52px; height:52px; border-radius:15px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:1.5rem; background:var(--acc-soft); color:var(--acc); overflow:hidden; }
.nf-hero .ic img { width:100%; height:100%; object-fit:cover; }
.nf-hero h4 { margin:0; font-weight:900; font-size:1.4rem; color:#1e293b; letter-spacing:-.02em; }
.nf-hero p { margin:.2rem 0 0; font-size:.85rem; color:#94a3b8; }
.nf-hero .spacer { margin-left:auto; }

/* two-column work area */
.nf-grid { display:grid; grid-template-columns:1fr 340px; gap:1.3rem; align-items:start; }
@media (max-width:960px){ .nf-grid { grid-template-columns:1fr; } }

/* card */
.nf-card { background:#fff; border:1px solid #e9eef5; border-radius:16px; box-shadow:0 1px 3px rgba(15,23,42,.04); margin-bottom:1.1rem; overflow:hidden; }
.nf-card-h { display:flex; align-items:center; gap:.7rem; padding:.9rem 1.2rem; border-bottom:1px solid #f4f7fa; }
.nf-card-h .n { width:30px; height:30px; border-radius:9px; background:var(--acc-soft); color:var(--acc); display:flex; align-items:center; justify-content:center; font-size:.9rem; font-weight:800; flex-shrink:0; }
.nf-card-h h6 { margin:0; font-weight:800; color:#1e293b; font-size:.92rem; }
.nf-card-h .sub { margin-left:auto; font-size:.72rem; color:#cbd5e1; font-weight:600; }
.nf-card-b { padding:1.2rem; }

/* form fields */
.nf-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:.9rem 1rem; }
@media (max-width:640px){ .nf-grid2 { grid-template-columns:1fr; } }
.nf-f { display:flex; flex-direction:column; min-width:0; }
.nf-f + .nf-f { margin-top:1.1rem; }
.nf-grid2 .nf-f + .nf-f { margin-top:0; }
.nf-f.wide { grid-column:1 / -1; }
.nf-f label { font-size:.75rem; font-weight:700; color:#475569; margin-bottom:.3rem; }
.nf-f .req { color:var(--acc); }
.nf-f .form-control, .nf-f .form-select, .nf-f input, .nf-f select, .nf-f textarea {
  width:100%; border-radius:10px; font-size:.86rem; padding:.5rem .75rem; border:1px solid #e2e8f0; background:#fff; color:#1e293b; }
.nf-f .form-control:focus, .nf-f .form-select:focus, .nf-f input:focus, .nf-f select:focus, .nf-f textarea:focus {
  outline:none; border-color:var(--acc); box-shadow:0 0 0 3px var(--acc-soft); }
.nf-help { font-size:.72rem; color:#94a3b8; margin-top:.3rem; line-height:1.45; }
.nf-err { font-size:.74rem; color:#b91c1c; font-weight:700; margin-top:.3rem; }
.nf-nonfield { background:#fef2f2; border:1px solid #fecaca; color:#b91c1c; border-radius:12px; padding:.8rem 1rem; font-size:.83rem; margin-bottom:1.1rem; display:flex; gap:.5rem; }

/* photo picker */
.nf-photo { display:flex; align-items:center; gap:1rem; }
.nf-photo .prev { width:64px; height:64px; border-radius:16px; flex-shrink:0; object-fit:cover; overflow:hidden;
  background:var(--acc); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1.35rem; letter-spacing:.5px; box-shadow:0 2px 8px rgba(151,17,16,.18); }
.nf-photo .prev img { width:100%; height:100%; object-fit:cover; }
.nf-photo .pick { flex:1; }
.nf-photo .pick .btn { display:inline-flex; align-items:center; gap:.4rem; font-size:.78rem; font-weight:700; color:#475569; border:1px solid #e2e8f0; border-radius:9px; padding:.4rem .7rem; cursor:pointer; background:#fbfcfe; }
.nf-photo .pick .btn:hover { border-color:var(--acc); color:var(--acc); }
.nf-photo input[type=file] { display:none; }

/* password strength meter + reveal toggle */
.nf-meter { display:flex; gap:.3rem; margin-top:.45rem; }
.nf-meter span { height:4px; flex:1; border-radius:2px; background:#eef2f7; transition:background .2s; }
.nf-meter.s1 span:nth-child(-n+1){background:#ef4444}
.nf-meter.s2 span:nth-child(-n+2){background:#f59e0b}
.nf-meter.s3 span:nth-child(-n+3){background:#eab308}
.nf-meter.s4 span:nth-child(-n+4){background:#22c55e}
.nf-strength { font-size:.7rem; font-weight:700; margin-top:.25rem; color:#94a3b8; }
.nf-reveal-wrap { position:relative; }
.nf-reveal-wrap input { padding-right:2.3rem !important; }
.nf-reveal { position:absolute; right:.6rem; top:50%; transform:translateY(-50%); background:none; border:none; color:#94a3b8; cursor:pointer; font-size:1.05rem; padding:.15rem; }
.nf-reveal:hover { color:var(--acc); }

/* role picker cards */
.nf-roles { display:grid; grid-template-columns:1fr 1fr; gap:.55rem; }
@media (max-width:560px){ .nf-roles { grid-template-columns:1fr; } }
.nf-roles label { display:flex; align-items:flex-start; gap:.6rem; padding:.65rem .8rem; border:1px solid #e9eef5;
  border-radius:12px; font-size:.83rem; color:#334155; cursor:pointer; margin:0; transition:border-color .12s, background .12s, box-shadow .12s; }
.nf-roles label:hover { border-color:#cbd5e1; background:#fbfcfe; }
.nf-roles label:has(input:checked) { border-color:var(--acc); background:var(--acc-soft); box-shadow:0 1px 4px rgba(151,17,16,.1); }
.nf-roles input { accent-color:var(--acc); width:16px; height:16px; margin-top:.15rem; flex-shrink:0; }
.nf-roles .rn { font-weight:800; color:#1e293b; display:block; line-height:1.25; }
.nf-roles .rm { font-size:.7rem; color:#94a3b8; font-weight:600; }
.nf-empty { font-size:.78rem; color:#94a3b8; background:#fbfcfe; border:1px dashed #e2e8f0; border-radius:10px; padding:.7rem .8rem; }

/* toggle row */
.nf-toggle { display:flex; align-items:center; gap:.7rem; margin-top:.7rem; padding:.75rem .85rem; border:1px solid #e9eef5; border-radius:12px; }
.nf-toggle input { width:18px; height:18px; accent-color:var(--acc); flex-shrink:0; }
.nf-toggle .t { font-weight:700; color:#1e293b; font-size:.84rem; }
.nf-toggle .d { font-size:.72rem; color:#94a3b8; }

/* side panel: identity preview + tips */
.nf-aside { position:sticky; top:1rem; }
.nf-prevcard { background:linear-gradient(160deg,#fff,#fdf6f6); border:1px solid #f3dede; border-radius:16px; padding:1.2rem; text-align:center; margin-bottom:1rem; }
.nf-prevcard .av { width:76px; height:76px; border-radius:22px; margin:0 auto .8rem; object-fit:cover; overflow:hidden; background:var(--acc); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1.7rem; letter-spacing:.5px; box-shadow:0 6px 16px rgba(151,17,16,.22); }
.nf-prevcard .av img { width:100%; height:100%; object-fit:cover; }
.nf-prevcard .nm { font-weight:900; color:#1e293b; font-size:1.02rem; letter-spacing:-.01em; }
.nf-prevcard .em { font-size:.78rem; color:#94a3b8; margin-top:.15rem; word-break:break-all; }
.nf-prevcard .un { font-size:.72rem; color:#cbd5e1; font-weight:700; margin-top:.1rem; }
.nf-prevrow { display:flex; align-items:center; justify-content:space-between; margin-top:.9rem; padding-top:.9rem; border-top:1px dashed #f0dede; font-size:.78rem; }
.nf-prevrow .k { color:#94a3b8; font-weight:600; } .nf-prevrow .v { color:#1e293b; font-weight:800; }
.nf-pill { font-size:.66rem; font-weight:800; padding:.15rem .5rem; border-radius:999px; }
.nf-pill.on { background:#dcfce7; color:#15803d; } .nf-pill.off { background:#fef3c7; color:#b45309; }

.nf-tips { background:#fbfcfe; border:1px solid #eef2f7; border-radius:16px; padding:1.1rem; }
.nf-tips h6 { font-size:.7rem; text-transform:uppercase; letter-spacing:.5px; color:#94a3b8; font-weight:800; margin:0 0 .7rem; }
.nf-tips ul { list-style:none; padding:0; margin:0; }
.nf-tips li { display:flex; gap:.5rem; font-size:.78rem; color:#475569; line-height:1.5; margin-bottom:.55rem; }
.nf-tips li:last-child { margin-bottom:0; }
.nf-tips li i { color:var(--acc); font-size:.95rem; margin-top:.05rem; flex-shrink:0; }

/* readiness checklist */
.nf-check { list-style:none; padding:0; margin:0; }
.nf-check li { display:flex; align-items:center; gap:.5rem; font-size:.79rem; color:#94a3b8; font-weight:600; margin-bottom:.5rem; }
.nf-check li:last-child { margin-bottom:0; }
.nf-check li i { color:#dbe3ee; font-size:1.05rem; transition:color .15s; }
.nf-check li.done { color:#1e293b; } .nf-check li.done i { color:#22c55e; }

/* note callout */
.nf-note { display:flex; gap:.6rem; align-items:flex-start; background:#fffbeb; border:1px solid #fde68a; color:#92620a; border-radius:12px; padding:.8rem .95rem; font-size:.79rem; line-height:1.55; margin-top:1rem; }
.nf-note i { color:#d97706; font-size:1.05rem; margin-top:.05rem; flex-shrink:0; }

/* actions bar */
.nf-actions { display:flex; justify-content:flex-end; gap:.6rem; margin-top:.4rem; position:sticky; bottom:0;
  padding:1rem 0; }
/* actions stacked inside a side rail (below a panel) — uses Bootstrap buttons */
.nf-rail-actions { display:flex; flex-direction:column; gap:.5rem; margin-top:1rem; }
.nf-rail-actions .btn { width:100%; }

/* responsive equal-card grid */
.nf-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1.1rem; }

/* status banner (protected / attention) */
.nf-banner { display:flex; align-items:center; gap:1rem; border-radius:16px; padding:1.1rem 1.3rem; margin-bottom:1.2rem; border:1px solid #e9eef5; background:#fff; box-shadow:0 1px 3px rgba(15,23,42,.04); }
.nf-banner .shield { width:52px; height:52px; border-radius:14px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:1.55rem; }
.nf-banner.ok .shield { background:#dcfce7; color:#15803d; }
.nf-banner.warn .shield { background:#fef3c7; color:#b45309; }
.nf-banner h4 { margin:0; font-weight:900; font-size:1.15rem; color:#1e293b; letter-spacing:-.015em; }
.nf-banner p { margin:.2rem 0 0; font-size:.83rem; color:#94a3b8; line-height:1.5; }
.nf-banner .state { margin-left:auto; flex-shrink:0; font-size:.72rem; font-weight:800; padding:.32rem .75rem; border-radius:999px; white-space:nowrap; display:inline-flex; align-items:center; gap:.35rem; }
.nf-banner.ok .state { background:#dcfce7; color:#15803d; }
.nf-banner.warn .state { background:#fef3c7; color:#b45309; }

/* stat tiles */
.nf-stats { display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:1.2rem; }
.nf-stat { flex:1; min-width:150px; background:#fff; border:1px solid #e9eef5; border-radius:14px; padding:.85rem 1rem; }
.nf-stat .n { font-weight:900; font-size:1.35rem; color:#1e293b; line-height:1; font-variant-numeric:tabular-nums; }
.nf-stat .l { font-size:.68rem; color:#94a3b8; text-transform:uppercase; letter-spacing:.4px; font-weight:800; margin-top:.35rem; }
.nf-stat.ok .n { color:#15803d; } .nf-stat.warn .n { color:#b45309; }

/* QR + setup key (authenticator) */
.nf-qr { background:#fff; border:1px solid #e9eef5; border-radius:14px; padding:.9rem; display:inline-block; line-height:0; box-shadow:0 1px 3px rgba(15,23,42,.05); }
.nf-qr img { width:190px; height:190px; display:block; image-rendering:pixelated; }
.nf-steps { list-style:none; padding:0; margin:0; counter-reset:step; }
.nf-steps li { position:relative; padding:0 0 .7rem 2rem; font-size:.82rem; color:#475569; line-height:1.55; }
.nf-steps li:last-child { padding-bottom:0; }
.nf-steps li::before { counter-increment:step; content:counter(step); position:absolute; left:0; top:-.05rem; width:1.35rem; height:1.35rem; border-radius:50%; background:var(--acc-soft); color:var(--acc); font-size:.72rem; font-weight:800; display:flex; align-items:center; justify-content:center; }
.nf-secret { display:flex; align-items:center; gap:.5rem; background:#f8fafc; border:1px dashed #e2e8f0; border-radius:9px; padding:.5rem .7rem; margin-top:.4rem; }
.nf-secret code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.82rem; color:#334155; letter-spacing:.5px; word-break:break-all; flex:1; }
.nf-copy { border:1px solid #e2e8f0; background:#fff; border-radius:7px; cursor:pointer; color:#64748b; font-size:.9rem; padding:.25rem .45rem; line-height:1; flex-shrink:0; }
.nf-copy:hover { color:var(--acc); border-color:var(--acc); }

/* one-time recovery codes */
.nf-codes { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.5rem; }
.nf-codes .code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.92rem; letter-spacing:1px; color:#1e293b; background:#f8fafc; border:1px solid #eef2f7; border-radius:8px; padding:.55rem .7rem; text-align:center; }

/* generic item rows (keys, devices …) */
.nf-list { border:1px solid #e9eef5; border-radius:14px; overflow:hidden; }
.nf-listrow { display:flex; align-items:center; gap:.85rem; padding:.85rem 1.1rem; border-bottom:1px solid #f1f5f9; }
.nf-listrow:last-child { border-bottom:none; }
.nf-listrow .ic { width:38px; height:38px; border-radius:11px; background:var(--acc-soft); color:var(--acc); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.nf-listrow .bd { flex:1; min-width:0; }
.nf-listrow .t { font-size:.86rem; font-weight:800; color:#1e293b; display:flex; align-items:center; gap:.45rem; flex-wrap:wrap; }
.nf-listrow .d { font-size:.74rem; color:#94a3b8; margin-top:.1rem; }
.nf-listrow .rt { display:flex; gap:.4rem; flex-shrink:0; }

/* centered auth screen (login-stage / confirm) */
.nf-auth { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:1.5rem; background:#f6f8fb; }
.nf-auth-card { width:100%; max-width:440px; }
.nf-auth-logo { text-align:center; margin-bottom:1.2rem; }
.nf-auth-logo img { height:34px; }
/* Logo on the sign-in / password pages: a normal logo height, never the image's full size */
.login-card .logo img { height:44px; width:auto; max-width:100%; }
.nf-auth-ic { display:inline-flex; width:60px; height:60px; border-radius:18px; background:var(--acc-soft); color:var(--acc); align-items:center; justify-content:center; font-size:1.8rem; margin-bottom:.8rem; }

/* large one-time-code input */
.nf-otp input { width:100%; font-size:1.5rem; text-align:center; letter-spacing:.45rem; font-weight:800;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; padding:.75rem .5rem; border:1px solid #e2e8f0; border-radius:12px; color:#1e293b; }
.nf-otp input:focus { outline:none; border-color:var(--acc); box-shadow:0 0 0 3px var(--acc-soft); }
.nf-auth-div { display:flex; align-items:center; gap:.7rem; margin:1.1rem 0; }
.nf-auth-div span.l { flex:1; height:1px; background:#eef2f7; }
.nf-auth-div span.t { font-size:.7rem; font-weight:800; color:#cbd5e1; text-transform:uppercase; letter-spacing:.5px; }

/* centered focused column (reauth / confirm gates) */
.nf-narrow { max-width:520px; margin:0 auto; }

/* signed-in identity chip */
.nf-idchip { display:flex; align-items:center; gap:.75rem; padding:.7rem .9rem; border:1px solid #e9eef5; border-radius:12px; background:#fbfcfe; }
.nf-idchip .av { width:42px; height:42px; border-radius:12px; object-fit:cover; overflow:hidden; flex-shrink:0; background:var(--acc); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1rem; }
.nf-idchip .av img { width:100%; height:100%; object-fit:cover; }
.nf-idchip .nm { font-weight:800; color:#1e293b; font-size:.86rem; line-height:1.2; }
.nf-idchip .em { font-size:.76rem; color:#94a3b8; }
.nf-idchip .tag { margin-left:auto; font-size:.62rem; font-weight:800; color:#94a3b8; text-transform:uppercase; letter-spacing:.4px; }