/* ============================================================
   modal.css
   Part of KineticAI Frontend — split from v6_updated.html
   ============================================================ */


/* ---- Generic Modal Overlay (used by report + logout modals) ---- */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:9000;align-items:center;justify-content:center;backdrop-filter:blur(3px);}
.modal-overlay.SHOW{display:flex!important;}
.modal-box{background:#fff;border-radius:16px;padding:32px;max-width:420px;width:90%;box-shadow:var(--shadow-xl);position:relative;animation:modalIn .22s ease;}
.modal-close-btn{position:absolute;top:14px;right:14px;background:var(--bg0);border:1px solid var(--border);border-radius:8px;width:32px;height:32px;cursor:pointer;font-size:14px;color:var(--text2);}
@keyframes modalIn{from{opacity:0;transform:scale(.92) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}

/* ---- Report Modal ---- */
#report-modal .modal-title{font-size:18px;font-weight:700;margin-bottom:20px;color:var(--text);}
.report-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px;}
.report-stat-box{background:var(--bg0);padding:16px;border-radius:10px;border:1px solid var(--border);text-align:center;}
.report-stat-box .num{font-size:32px;font-weight:800;color:var(--text);}
.report-stat-box .lbl{font-size:12px;color:var(--text3);margin-top:4px;}
#rm-form{color:var(--neon);}
.report-alerts-box{background:var(--red-bg);border:1px solid var(--red-border);border-radius:10px;padding:14px;margin-bottom:16px;}
.report-alerts-box .lbl{font-size:12px;font-weight:700;color:var(--red);margin-bottom:6px;}
.report-alerts-box .num{font-size:24px;font-weight:700;color:var(--red);}
.report-alerts-box .sub{font-size:12px;color:var(--text2);margin-top:4px;}
.report-actions{display:flex;gap:10px;}

/* ---- Logout Modal ---- */
#logout-modal .modal-box{max-width:380px;padding:36px 32px 28px;text-align:center;box-shadow:0 24px 60px rgba(0,0,0,.18);}
.logout-icon{width:60px;height:60px;background:var(--red-bg);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 18px;font-size:26px;}
.logout-title{font-size:20px;font-weight:800;color:var(--text);margin-bottom:8px;}
.logout-body{font-size:14px;color:var(--text2);line-height:1.6;margin-bottom:24px;}
.logout-actions{display:flex;gap:10px;}
.logout-stay-btn{flex:1;padding:12px;background:var(--bg0);border:1px solid var(--border2);border-radius:10px;font-size:14px;font-weight:600;color:var(--text2);cursor:pointer;font-family:var(--font);transition:all .2s;}
.logout-stay-btn:hover{background:var(--bg2);}
.logout-signout-btn{flex:1;padding:12px;background:var(--red);border:none;border-radius:10px;font-size:14px;font-weight:700;color:#fff;cursor:pointer;font-family:var(--font);transition:all .2s;}
.logout-signout-btn:hover{opacity:.85;}