/* Wahand Portal - Multi-tenant institute app styling */
.fsa-portal-app{
  /* ── DARK THEME (default) ── */
  --fp-bg:#050a0f; --fp-s1:#0a1520; --fp-s2:#0f1e2e;
  --fp-ac:#00d4ff; --fp-gr:#00ff88; --fp-rd:#ff4466; --fp-or:#ffaa00;
  --fp-tx:#c8e8ff; --fp-muted:#4a7a9b; --fp-bo:rgba(0,212,255,.2);
  --fp-input-bg:#030810; --fp-topbar-bg:#030810; --fp-grid-line:rgba(0,212,255,.025);
  --fp-shadow:rgba(0,0,0,.4); --fp-overlay-bg:rgba(0,0,0,.65);
  font-family:'Rajdhani',Arial,sans-serif; background:var(--fp-bg); color:var(--fp-tx);
  border-radius:16px; overflow:hidden; box-shadow:0 0 40px var(--fp-shadow);
  height:100vh; max-height:100vh; display:flex; flex-direction:column; position:relative;
  transition:background .3s, color .3s;
}

/* ── LIGHT THEME ── */
.fsa-portal-app.fp-light{
  --fp-bg:#f4f8fb; --fp-s1:#ffffff; --fp-s2:#eaf1f7;
  --fp-ac:#0088b3; --fp-gr:#0a9b52; --fp-rd:#d6304a; --fp-or:#c47800;
  --fp-tx:#16232f; --fp-muted:#5b7285; --fp-bo:rgba(0,120,160,.18);
  --fp-input-bg:#ffffff; --fp-topbar-bg:#ffffff; --fp-grid-line:rgba(0,120,160,.05);
  --fp-shadow:rgba(30,60,80,.12); --fp-overlay-bg:rgba(20,35,45,.5);
}
.fsa-portal-app.fp-light .fp-video-wrap{background:#000} /* camera area always stays dark for the feed itself */
.fsa-portal-app.fp-light .fp-badge{background:rgba(0,0,0,.72)}
.fsa-portal-app.fp-light #fp-modal{background:var(--fp-overlay-bg)}
.fsa-portal-app.fp-light #fp-match-overlay{background:var(--fp-overlay-bg)}
.fsa-portal-app.fp-light #fp-geofence-overlay{background:rgba(20,35,45,.55)}
.fsa-portal-app *{box-sizing:border-box}
.fsa-portal-app::before{content:'';position:absolute;inset:0;background-image:linear-gradient(var(--fp-grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--fp-grid-line) 1px,transparent 1px);background-size:40px 40px;pointer-events:none;z-index:0}

/* TOPBAR */
.fp-topbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:14px 20px;background:var(--fp-topbar-bg);border-bottom:1px solid var(--fp-bo);position:relative;z-index:2;flex-shrink:0}
.fp-topbar-left{display:flex;align-items:center;gap:12px;min-width:0}
.fp-logo{font-family:'Orbitron',monospace;font-size:14px;color:var(--fp-ac);letter-spacing:2px;font-weight:700}
.fp-client-logo{height:32px;max-width:120px;object-fit:contain;border-radius:4px}
.fp-inst-name{font-size:13px;color:var(--fp-muted);padding:4px 12px;background:var(--fp-s2);border-radius:20px;max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fp-topbar-right{margin-left:auto;justify-self:end;display:flex;align-items:center;gap:14px}
.fp-status-pill{display:flex;align-items:center;gap:6px;background:var(--fp-s2);border:1px solid var(--fp-bo);border-radius:20px;padding:4px 12px;font-size:12px;color:var(--fp-muted)}
.fp-dot{width:8px;height:8px;border-radius:50%;background:var(--fp-muted)}
.fp-dot.ready{background:var(--fp-gr);box-shadow:0 0 8px rgba(0,255,136,.6)}
.fp-logout{color:var(--fp-rd);text-decoration:none;font-size:13px;padding:5px 12px;border:1px solid rgba(255,68,102,.3);border-radius:8px;background:rgba(255,68,102,.08)}
.fp-logout:hover{background:rgba(255,68,102,.15)}
.fp-theme-toggle{width:34px;height:34px;border-radius:50%;border:1px solid var(--fp-bo);background:var(--fp-s2);color:var(--fp-tx);font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0}
.fp-theme-toggle:hover{border-color:var(--fp-ac);transform:rotate(15deg)}

/* BODY LAYOUT — .fp-content is the ONLY element that scrolls. min-height:0 on
   every flex parent in this chain is required, otherwise flex items default
   to min-height:auto and ignore max-height/overflow, letting the whole page
   grow to fit content and leaving a tall blank tail below the fold. */
.fp-body{display:flex;flex:1;min-height:0;position:relative;z-index:1;overflow:hidden}
.fp-sidebar{width:190px;background:var(--fp-s1);border-right:1px solid var(--fp-bo);padding:14px 8px;flex-shrink:0;overflow-y:auto}
.fp-nav-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;cursor:pointer;color:var(--fp-muted);font-size:13px;font-weight:600;margin-bottom:2px;transition:all .2s;text-decoration:none}
.fp-nav-divider{height:1px;background:var(--fp-bo);margin:10px 4px}
.fp-nav-item:hover{background:var(--fp-s2);color:var(--fp-tx)}
.fp-nav-item.active{background:var(--fp-s2);color:var(--fp-ac);border:1px solid var(--fp-bo)}

/* Colorful sidebar — same Google palette as the stat cards. Dark theme uses
   full saturated tiles with white text; light theme swaps to a pastel tint
   of the same color with dark text, so contrast stays solid either way
   instead of forcing one text color that only works on one background. */
.fp-nav-item.nv-blue{background:rgba(66,133,244,.14);color:#8ab4f8}
.fp-nav-item.nv-green{background:rgba(52,168,83,.14);color:#81c995}
.fp-nav-item.nv-red{background:rgba(234,67,53,.14);color:#f28b82}
.fp-nav-item.nv-yellow{background:rgba(251,188,5,.14);color:#fdd663}
.fp-nav-item.nv-teal{background:rgba(0,172,193,.14);color:#4dd0e1}
.fp-nav-item.nv-purple{background:rgba(156,39,176,.14);color:#ce93d8}
.fp-nav-item.nv-indigo{background:rgba(92,107,192,.14);color:#9fa8da}
.fp-nav-item.nv-gray{background:rgba(84,110,122,.14);color:#b0bec5}

.fp-nav-item.nv-blue.active{background:#4285F4;color:#fff;border-color:#4285F4}
.fp-nav-item.nv-green.active{background:#34A853;color:#fff;border-color:#34A853}
.fp-nav-item.nv-red.active{background:#EA4335;color:#fff;border-color:#EA4335}
.fp-nav-item.nv-yellow.active{background:#F29900;color:#fff;border-color:#F29900}
.fp-nav-item.nv-teal.active{background:#00ACC1;color:#fff;border-color:#00ACC1}
.fp-nav-item.nv-purple.active{background:#9C27B0;color:#fff;border-color:#9C27B0}
.fp-nav-item.nv-indigo.active{background:#5C6BC0;color:#fff;border-color:#5C6BC0}
.fp-nav-item.nv-gray.active{background:#546E7A;color:#fff;border-color:#546E7A}

.fp-nav-item.nv-blue:hover, .fp-nav-item.nv-green:hover, .fp-nav-item.nv-red:hover,
.fp-nav-item.nv-yellow:hover, .fp-nav-item.nv-teal:hover, .fp-nav-item.nv-purple:hover,
.fp-nav-item.nv-indigo:hover, .fp-nav-item.nv-gray:hover{filter:brightness(1.2)}

/* Light theme: swap to pastel-tint backgrounds with dark, readable text */
.fsa-portal-app.fp-light .fp-nav-item.nv-blue{background:#d2e3fc;color:#174ea6}
.fsa-portal-app.fp-light .fp-nav-item.nv-green{background:#ceead6;color:#0d652d}
.fsa-portal-app.fp-light .fp-nav-item.nv-red{background:#fad2cf;color:#a50e0e}
.fsa-portal-app.fp-light .fp-nav-item.nv-yellow{background:#feefc3;color:#7f5200}
.fsa-portal-app.fp-light .fp-nav-item.nv-teal{background:#b2ebf2;color:#00525c}
.fsa-portal-app.fp-light .fp-nav-item.nv-purple{background:#e9d2f4;color:#5c1266}
.fsa-portal-app.fp-light .fp-nav-item.nv-indigo{background:#d3d7f5;color:#28308c}
.fsa-portal-app.fp-light .fp-nav-item.nv-gray{background:#d3dbdf;color:#263238}
.fsa-portal-app.fp-light .fp-nav-item.nv-blue.active{background:#4285F4;color:#fff;border-color:#4285F4}
.fsa-portal-app.fp-light .fp-nav-item.nv-green.active{background:#34A853;color:#fff;border-color:#34A853}
.fsa-portal-app.fp-light .fp-nav-item.nv-red.active{background:#EA4335;color:#fff;border-color:#EA4335}
.fsa-portal-app.fp-light .fp-nav-item.nv-yellow.active{background:#F29900;color:#fff;border-color:#F29900}
.fsa-portal-app.fp-light .fp-nav-item.nv-teal.active{background:#00ACC1;color:#fff;border-color:#00ACC1}
.fsa-portal-app.fp-light .fp-nav-item.nv-purple.active{background:#9C27B0;color:#fff;border-color:#9C27B0}
.fsa-portal-app.fp-light .fp-nav-item.nv-indigo.active{background:#5C6BC0;color:#fff;border-color:#5C6BC0}
.fsa-portal-app.fp-light .fp-nav-item.nv-gray.active{background:#546E7A;color:#fff;border-color:#546E7A}
.fp-content{flex:1;min-height:0;min-width:0;overflow-y:auto;padding:24px}
.fp-panel{display:none}
.fp-panel.active{display:block;animation:fpFade .25s}
@keyframes fpFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.fp-page-head{margin-bottom:20px}
.fp-page-head h2{font-family:'Orbitron',monospace;font-size:18px;color:var(--fp-ac);margin:0 0 4px;letter-spacing:1px}
.fp-page-head p{font-size:12px;color:var(--fp-muted);margin:0;text-transform:uppercase;letter-spacing:1px}

/* LOADER */
.fp-loader{background:var(--fp-s1);border:1px solid var(--fp-bo);border-radius:10px;height:5px;overflow:hidden;margin-bottom:6px}
.fp-loader-bar{height:100%;background:linear-gradient(90deg,var(--fp-ac),var(--fp-gr));width:0%;transition:width .4s}
.fp-loader-msg{font-size:11px;color:var(--fp-muted);margin-bottom:18px}

/* STATS */
.fp-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:20px}
.fp-stat{background:var(--fp-s1);border:1px solid var(--fp-bo);border-radius:12px;padding:16px;text-align:center}
.fp-stat-n{font-family:'Orbitron',monospace;font-size:24px;font-weight:700;color:var(--fp-ac)}
.fp-stat-n.g{color:var(--fp-gr)} .fp-stat-n.r{color:var(--fp-rd)} .fp-stat-n.o{color:var(--fp-or)}
.fp-stat-l{font-size:10px;color:var(--fp-muted);text-transform:uppercase;letter-spacing:1px;margin-top:4px}

/* Google-palette colorful stat cards — solid gradient tiles with white text,
   used on the Dashboard and Reports summary cards for a livelier look than
   the flat dark tiles everywhere else. */
.fp-stat.gg-blue{background:linear-gradient(135deg,#4285F4,#3367D6);border-color:#4285F4}
.fp-stat.gg-red{background:linear-gradient(135deg,#EA4335,#C5221F);border-color:#EA4335}
.fp-stat.gg-yellow{background:linear-gradient(135deg,#FBBC05,#F29900);border-color:#FBBC05}
.fp-stat.gg-green{background:linear-gradient(135deg,#34A853,#1E8E3E);border-color:#34A853}
.fp-stat.gg-teal{background:linear-gradient(135deg,#00ACC1,#00838F);border-color:#00ACC1}
.fp-stat.gg-blue .fp-stat-n, .fp-stat.gg-red .fp-stat-n, .fp-stat.gg-yellow .fp-stat-n, .fp-stat.gg-green .fp-stat-n, .fp-stat.gg-teal .fp-stat-n{color:#fff}
.fp-stat.gg-blue .fp-stat-l, .fp-stat.gg-red .fp-stat-l, .fp-stat.gg-yellow .fp-stat-l, .fp-stat.gg-green .fp-stat-l, .fp-stat.gg-teal .fp-stat-l{color:rgba(255,255,255,.9)}
.fp-stat.gg-blue, .fp-stat.gg-red, .fp-stat.gg-yellow, .fp-stat.gg-green, .fp-stat.gg-teal{box-shadow:0 4px 14px rgba(0,0,0,.18);transition:transform .15s}
.fp-stat.gg-blue:hover, .fp-stat.gg-red:hover, .fp-stat.gg-yellow:hover, .fp-stat.gg-green:hover, .fp-stat.gg-teal:hover{transform:translateY(-2px)}

/* GRID/CARD */
.fp-grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.fp-card{background:var(--fp-s1);border:1px solid var(--fp-bo);border-radius:14px;padding:20px;position:relative;overflow:hidden}
.fp-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--fp-ac),transparent);opacity:.5}
.fp-card-title{font-family:'Orbitron',monospace;font-size:11px;letter-spacing:2px;color:var(--fp-ac);text-transform:uppercase;margin-bottom:14px}
.fp-divider{height:1px;background:var(--fp-bo);margin:14px 0}

/* VIDEO */
.fp-video-wrap{position:relative;width:100%;height:0;padding-bottom:75%;max-height:360px;background:#000;border-radius:10px;overflow:hidden;border:1px solid var(--fp-bo);margin-bottom:10px}
.fp-video-wrap video,.fp-video-wrap canvas,.fp-video-wrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fp-video-wrap canvas{pointer-events:none;z-index:5}
.fp-flipped{transform:scaleX(-1)}
.fp-corner{position:absolute;width:18px;height:18px;border-color:var(--fp-ac);border-style:solid;opacity:.7;z-index:8}
.fp-corner.tl{top:9px;left:9px;border-width:2px 0 0 2px}.fp-corner.tr{top:9px;right:9px;border-width:2px 2px 0 0}
.fp-corner.bl{bottom:9px;left:9px;border-width:0 0 2px 2px}.fp-corner.br{bottom:9px;right:9px;border-width:0 2px 2px 0}
.fp-scanline{position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--fp-ac),transparent);animation:fpScan 3s linear infinite;opacity:0;z-index:7}
.fp-scanline.active{opacity:.8}
@keyframes fpScan{from{top:0}to{top:100%}}
.fp-badge{position:absolute;bottom:9px;left:9px;background:rgba(0,0,0,.75);border:1px solid var(--fp-ac);border-radius:5px;padding:3px 9px;font-size:11px;color:var(--fp-ac);z-index:10}

/* BUTTONS */
.fp-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border:none;border-radius:8px;font-family:'Rajdhani',sans-serif;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;text-transform:uppercase}
.fp-btn-p{background:rgba(0,212,255,.12);border:1px solid var(--fp-ac);color:var(--fp-ac)}
.fp-btn-g{background:rgba(0,255,136,.1);border:1px solid var(--fp-gr);color:var(--fp-gr)}
.fp-btn-r{background:rgba(255,68,102,.1);border:1px solid var(--fp-rd);color:var(--fp-rd)}
.fp-btn-o{background:rgba(255,170,0,.1);border:1px solid var(--fp-or);color:var(--fp-or)}
.fp-btn:hover{filter:brightness(1.3)}.fp-btn:disabled{opacity:.35;cursor:not-allowed;filter:none}
.fp-flip-btn.on{background:rgba(0,212,255,.28)!important}
.fp-btn-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}

/* FORMS */
.fg{margin-bottom:13px}
.fg label{display:block;font-size:10px;letter-spacing:1.5px;color:var(--fp-muted);text-transform:uppercase;margin-bottom:5px}
.fg input,.fg select{width:100%;background:var(--fp-input-bg) !important;border:1px solid var(--fp-bo);border-radius:7px;padding:8px 12px;color:var(--fp-tx) !important;font-family:'Rajdhani',sans-serif;font-size:14px;outline:none;-webkit-text-fill-color:var(--fp-tx);caret-color:var(--fp-tx)}
.fg input:focus,.fg select:focus{border-color:var(--fp-ac)}
.fg input[type=checkbox]{width:18px;height:18px;accent-color:var(--fp-gr)}
.fg input::placeholder{color:var(--fp-muted);opacity:1}
.fg input:-webkit-autofill,
.fg input:-webkit-autofill:hover,
.fg input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px var(--fp-input-bg) inset !important;
  -webkit-text-fill-color:var(--fp-tx) !important;
  caret-color:var(--fp-tx) !important;
  transition:background-color 9999s ease-in-out 0s;
}
.fg select option{background:var(--fp-input-bg);color:var(--fp-tx)}
.fp-tip{font-size:11px;color:var(--fp-muted);margin-top:4px;line-height:1.5}
.fp-toggle-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--fp-bo);gap:12px;margin-bottom:8px}
.fp-daychip{display:flex;align-items:center;gap:5px;background:var(--fp-s2);border:1px solid var(--fp-bo);border-radius:20px;padding:7px 14px;font-size:12px;font-weight:600;color:var(--fp-muted);cursor:pointer;user-select:none;transition:all .15s}
.fp-daychip:has(input:checked), .fp-daychip.on{background:#5e72e4;border-color:#5e72e4;color:#fff}
.fp-daychip input{margin:0;accent-color:#5e72e4}
.fp-cam-device-row{margin-top:10px}
.fp-cam-device-row label{display:block;font-size:10px;letter-spacing:1px;color:var(--fp-muted);text-transform:uppercase;margin-bottom:5px}
.fp-cam-device-row select{width:100%;background:var(--fp-input-bg) !important;border:1px solid var(--fp-bo);border-radius:7px;padding:8px 12px;color:var(--fp-tx) !important;font-size:13px;outline:none}
.fp-cam-device-row select option{background:var(--fp-input-bg);color:var(--fp-tx)}

/* DOTS (capture progress) */
.fp-dots{display:flex;gap:5px;flex-wrap:wrap;margin:8px 0}
.fp-dot-cap{width:11px;height:11px;border-radius:50%;background:rgba(0,212,255,.12);transition:all .3s}
.fp-dot-cap.on{background:var(--fp-gr);box-shadow:0 0 7px rgba(0,255,136,.5)}

/* LIST */
.fp-list{display:flex;flex-direction:column;gap:8px;max-height:400px;overflow-y:auto}
.fp-item{display:flex;align-items:center;gap:10px;background:var(--fp-s2);border:1px solid var(--fp-bo);border-radius:8px;padding:9px 12px}
.fp-avatar{width:38px;height:38px;border-radius:50%;background:var(--fp-bg);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.fp-item-name{font-weight:600;font-size:14px}
.fp-item-meta{font-size:11px;color:var(--fp-muted)}
.fp-badge2{padding:2px 8px;border-radius:20px;font-size:10px;font-weight:700;text-transform:uppercase}
.fp-b-present{background:rgba(0,255,136,.12);color:var(--fp-gr);border:1px solid var(--fp-gr)}
.fp-b-absent{background:rgba(255,68,102,.08);color:var(--fp-muted);border:1px solid rgba(255,68,102,.2)}
.fp-b-leave{background:rgba(255,170,0,.1);color:var(--fp-or);border:1px solid var(--fp-or)}
.fp-b-late{background:rgba(255,170,0,.15);color:var(--fp-or);border:1px solid var(--fp-or)}

/* TABLE */
.fp-table-wrap{border-radius:8px;border:1px solid var(--fp-bo);overflow:auto;max-height:420px;margin-top:12px;background:var(--fp-bg) !important}
.fsa-portal-app table{width:100%;border-collapse:collapse;font-size:12px;background:var(--fp-bg) !important}
.fsa-portal-app th{background:var(--fp-s2) !important;color:var(--fp-ac) !important;font-family:'Orbitron',monospace;font-size:9px;letter-spacing:1.5px;padding:10px 12px;text-align:left;border-bottom:1px solid var(--fp-bo);text-transform:uppercase;white-space:nowrap}
.fsa-portal-app td{background:var(--fp-bg) !important;color:var(--fp-tx) !important;padding:8px 12px;border-bottom:1px solid rgba(0,212,255,.05)}
.fsa-portal-app tr:nth-child(even) td{background:var(--fp-s1) !important}
.fsa-portal-app tr:hover td{background:var(--fp-s2) !important}

/* FILTERS */
.fp-filters{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:14px;padding:14px;background:var(--fp-s2);border-radius:10px;border:1px solid var(--fp-bo)}
.fp-filters .fg{margin:0;flex:1;min-width:140px}
.fp-qf-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.fp-qf{padding:5px 12px;font-size:11px;border:1px solid var(--fp-bo);border-radius:6px;background:var(--fp-s2);color:var(--fp-muted);cursor:pointer}
.fp-qf:hover{border-color:var(--fp-ac);color:var(--fp-ac)}

/* EMPTY */
.fp-empty{text-align:center;padding:30px;color:var(--fp-muted);font-size:13px}

/* MODAL */
#fp-modal{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.65);backdrop-filter:blur(5px)}
#fp-modal.show{display:flex}
.fp-modal-box{position:relative;background:var(--fp-s1);border:1px solid var(--fp-bo);border-radius:16px;padding:28px;width:90%;max-width:520px;max-height:88vh;box-shadow:0 0 40px rgba(0,0,0,.6);display:flex;flex-direction:column}
.fp-modal-x{position:absolute;top:14px;right:14px;width:30px;height:30px;border:1px solid var(--fp-bo);background:var(--fp-s2);color:var(--fp-muted);border-radius:8px;cursor:pointer;font-size:15px;flex-shrink:0}
.fp-modal-x:hover{color:var(--fp-rd);border-color:var(--fp-rd)}
.fp-modal-title{font-family:'Orbitron',monospace;font-size:14px;color:var(--fp-ac);margin-bottom:18px;flex-shrink:0}
#fp-modal-body{overflow-y:auto;flex:1;min-height:0;padding-right:4px}
.fp-modal-footer{display:flex;gap:10px;justify-content:flex-end;margin-top:18px;flex-shrink:0;padding-top:14px;border-top:1px solid var(--fp-bo)}

/* MATCH OVERLAY */
#fp-match-overlay{position:fixed;inset:0;z-index:99998;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.6);backdrop-filter:blur(6px)}
#fp-match-overlay.show{display:flex;animation:fpFade .3s}
.fp-match-card{background:var(--fp-s1);border:2px solid var(--fp-gr);border-radius:18px;padding:36px 48px;text-align:center;box-shadow:0 0 40px rgba(0,255,136,.25)}
#fp-match-overlay.late .fp-match-card{border-color:var(--fp-or);box-shadow:0 0 40px rgba(255,170,0,.25)}
.fp-match-icon{font-size:48px;margin-bottom:10px}
.fp-match-icon.has-photo{font-size:0}
.fp-match-icon img{width:84px;height:84px;border-radius:50%;object-fit:cover;border:3px solid var(--fp-gr)}
#fp-match-overlay.late .fp-match-icon img{border-color:var(--fp-or)}
.fp-match-name{font-family:'Orbitron',monospace;font-size:20px;color:var(--fp-gr);margin-bottom:6px}
#fp-match-overlay.late .fp-match-name{color:var(--fp-or)}
.fp-match-time{font-size:13px;color:var(--fp-muted)}
.fp-match-conf{font-size:12px;color:var(--fp-ac);margin-top:4px}

/* Borderline-match confirmation — same visual language as the match overlay,
   but stays open until the person taps Yes/No (no auto-dismiss timer, since
   this needs an actual decision, not just a glanceable confirmation). */
#fp-confirm-overlay{position:fixed;inset:0;z-index:99998;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.7);backdrop-filter:blur(6px)}
#fp-confirm-overlay.show{display:flex;animation:fpFade .3s}
#fp-confirm-overlay .fp-match-icon{border:3px solid #ffaa00;border-radius:50%;width:84px;height:84px;line-height:78px;margin:0 auto 10px}
#fp-confirm-overlay .fp-match-icon.has-photo{line-height:0}
#fp-confirm-overlay .fp-match-name{color:#ffaa00}

/* GEOFENCE OVERLAY */
#fp-geofence-overlay{position:fixed;inset:0;z-index:99997;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.7);backdrop-filter:blur(8px)}
#fp-geofence-overlay.show{display:flex;animation:fpFade .3s}
.fp-geofence-card{background:var(--fp-s1);border:2px solid var(--fp-rd);border-radius:18px;padding:36px 48px;text-align:center;box-shadow:0 0 40px rgba(255,68,102,.3);max-width:360px}
.fp-geofence-icon{font-size:48px;margin-bottom:10px}
.fp-geofence-title{font-family:'Orbitron',monospace;font-size:18px;color:var(--fp-rd);margin-bottom:8px}
.fp-geofence-msg{font-size:13px;color:var(--fp-tx);line-height:1.6}
.fp-geofence-banner{background:rgba(255,68,102,.1);border:1px solid var(--fp-rd);border-radius:8px;padding:10px 16px;color:var(--fp-rd);font-size:13px;margin-bottom:16px}

/* TOASTS */
#fp-toasts{position:fixed;top:20px;right:20px;z-index:999999;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.fp-toast{background:var(--fp-s1);border-left:3px solid var(--fp-gr);border-radius:8px;padding:9px 15px;font-size:13px;color:var(--fp-tx);box-shadow:0 4px 20px rgba(0,0,0,.5);max-width:300px}
.fp-toast.e{border-left-color:var(--fp-rd)}.fp-toast.w{border-left-color:var(--fp-or)}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — tablets and phones
   ══════════════════════════════════════════════════════════ */

/* Tablet / small laptop */
@media(max-width:900px){
  .fp-grid2{grid-template-columns:1fr}
  .fp-stats{grid-template-columns:repeat(3,1fr)}
  .fp-body{flex-direction:column;overflow-y:auto}
  .fp-sidebar{width:100%;display:flex;overflow-x:auto;padding:8px;flex-shrink:0;border-right:none;border-bottom:1px solid var(--fp-bo)}
  .fp-nav-item{flex-shrink:0;white-space:nowrap}
  .fp-content{max-height:none}
  .fsa-portal-app{height:auto;min-height:100vh;max-height:none}
  #fsa-portal-fullscreen-root .fsa-portal-app{height:auto;min-height:100vh;max-height:none}
}

/* Phone */
@media(max-width:600px){
  .fp-topbar{
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-areas:"left right" "center center";
    align-items:center;
    padding:8px 12px;
    gap:4px 8px;
  }
  .fp-topbar-left{grid-area:left;gap:6px;min-width:0;line-height:1}
  .fp-topbar-right{grid-area:right;justify-self:end;gap:6px;margin-left:0;line-height:1}
  .fp-logo{grid-area:center;font-size:11px;text-align:center;line-height:1;padding-top:2px}
  .fp-client-logo{height:20px;max-width:60px;display:block}
  .fp-inst-name{font-size:10px;padding:2px 7px;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.4}
  .fp-status-pill{display:none} /* hidden on phone to keep the header to two tight rows — the dashboard already shows system status */
  .fp-theme-toggle{width:26px;height:26px;font-size:12px;padding:0}
  .fp-logout{font-size:10px;padding:4px 7px;line-height:1.4}

  .fp-sidebar{gap:4px}
  .fp-nav-item{padding:8px 10px;font-size:12px}
  .fp-nav-item span{font-size:14px}

  .fp-content{padding:14px}
  .fp-page-head h2{font-size:15px}
  .fp-page-head p{font-size:10px}

  .fp-stats{grid-template-columns:repeat(2,1fr);gap:8px}
  .fp-stat{padding:12px}
  .fp-stat-n{font-size:19px}
  .fp-stat-l{font-size:9px}

  .fp-card{padding:14px}
  .fp-card-title{font-size:10px;margin-bottom:10px}

  .fp-video-wrap{max-height:260px}
  .fp-btn{padding:8px 12px;font-size:12px}
  .fp-btn-row{gap:6px}

  .fp-filters{flex-direction:column;align-items:stretch}
  .fp-filters .fg{min-width:0}
  .fp-qf-row{gap:5px}
  .fp-qf{padding:6px 10px;font-size:10px}

  .fp-table-wrap{max-height:320px}
  .fsa-portal-app th,.fsa-portal-app td{padding:7px 8px;font-size:11px}

  .fp-modal-box{padding:20px;width:94%}
  .fp-modal-title{font-size:13px}

  .fp-match-card,.fp-geofence-card{padding:26px 24px;max-width:90vw}
  .fp-match-name{font-size:16px}
  .fp-match-icon{font-size:38px}
  .fp-match-icon img{width:64px;height:64px}

  #fp-geo-map{height:200px !important}

  .fp-item{padding:8px 10px}
  .fp-avatar{width:32px;height:32px;font-size:14px}
  .fp-item-name{font-size:13px}
  .fp-item-meta{font-size:10px}

  #fp-toasts{top:10px;right:10px;left:10px}
  .fp-toast{max-width:none}
}

/* Very small phones */
@media(max-width:380px){
  .fp-inst-name{display:none}
  .fp-stats{grid-template-columns:repeat(2,1fr)}
  .fp-nav-item span{margin-right:0}
}

/* ── KIOSK MODE (same visual language, own overlay IDs since it's a
   standalone page with no login/sidebar) ── */
.fsa-kiosk-app{height:100vh;max-height:100vh}
.fsa-kiosk-app .fp-body{flex-direction:column;overflow-y:auto;min-height:0}
#fk-match-overlay{position:fixed;inset:0;z-index:99998;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.6);backdrop-filter:blur(6px)}
#fk-match-overlay.show{display:flex;animation:fpFade .3s}
#fk-match-overlay.late .fp-match-card{border-color:var(--fp-or);box-shadow:0 0 40px rgba(255,170,0,.25)}
#fk-match-overlay.late .fp-match-icon img{border-color:var(--fp-or)}
#fk-match-overlay.late .fp-match-name{color:var(--fp-or)}

#fk-confirm-overlay{position:fixed;inset:0;z-index:99998;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.7);backdrop-filter:blur(6px)}
#fk-confirm-overlay.show{display:flex;animation:fpFade .3s}
#fk-confirm-overlay .fp-match-icon{border:3px solid #ffaa00;border-radius:50%;width:84px;height:84px;line-height:78px;margin:0 auto 10px}
#fk-confirm-overlay .fp-match-icon.has-photo{line-height:0}
#fk-confirm-overlay .fp-match-name{color:#ffaa00}
#fk-geofence-overlay{position:fixed;inset:0;z-index:99997;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.7);backdrop-filter:blur(8px)}
#fk-geofence-overlay.show{display:flex;animation:fpFade .3s}
#fk-toasts{position:fixed;top:20px;right:20px;z-index:999999;display:flex;flex-direction:column;gap:8px;pointer-events:none}