/* ── PMO Gate Review Portal — Shared Styles ─────────────────── */

/* ── CSS Variables ─────────────────────────────────────────── */
:root{
  --primary:#C8102E;--primary-l:#D93344;--primary-dark:#A00C24;--primary-pale:#FEF0F0;
  --bg:#F5F5F5;--card:#fff;--text:#1A1A1A;--muted:#6B7280;--border:#E5E7EB;
  --danger:#991B1B;--warn:#D97706;--success:#059669;--info:#2563EB;
  --radius:8px;--shadow:0 1px 4px rgba(0,0,0,.08);
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(--text);font-size:14px;}

/* ── Top Bar ────────────────────────────────────────────────── */
.top-bar{background:#fff;color:#1A1A1A;padding:13px 24px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #E5E7EB;box-shadow:0 1px 3px rgba(0,0,0,.06);}
.top-bar h1{font-size:17px;font-weight:700;letter-spacing:-.2px;color:#1A1A1A;}
.top-bar .logo{font-size:11px;font-weight:500;color:#6B7280;}

/* ── Layout ────────────────────────────────────────────────── */
.container{max-width:1280px;margin:0 auto;padding:24px;}
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px 24px;margin-bottom:18px;}

/* ── Badges ────────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600;}
.badge.sda{background:#DBEAFE;color:#1E40AF;}
.badge.ssda{background:#F3E8FF;color:#6B21A8;}
.badge.dept{background:#F3F4F6;color:#374151;}

/* ── Status Pills ──────────────────────────────────────────── */
.pill{font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;}
.pill-approved,.p-approved{background:#DCFCE7;color:#166534;}
.pill-rejected,.p-rejected{background:#FEE2E2;color:#991B1B;}
.pill-pending,.p-pending{background:#DBEAFE;color:#1E40AF;}
.pill-in_progress,.p-in_progress{background:#FEF3C7;color:#92400E;}
.pill-not_started,.p-not_started{background:#F3F4F6;color:#6B7280;}

/* ── Buttons ───────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;border:none;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;text-decoration:none;transition:all .18s;}
.btn i{font-size:15px;}
.btn-primary{background:#0F2040;color:#fff;}
.btn-primary:hover{background:#1a3260;}
.btn-secondary{background:#fff;color:var(--primary);border:1.5px solid var(--primary);}
.btn-secondary:hover{background:var(--primary-pale);}
.btn-ghost{background:#F3F4F6;color:#374151;border:1px solid #E5E7EB;}
.btn-ghost:hover{background:#E5E7EB;color:#1A1A1A;}
.btn:disabled{opacity:.5;cursor:not-allowed;}

/* ── Spinner / Loading ─────────────────────────────────────── */
.spinner{display:inline-block;width:30px;height:30px;border:3px solid var(--primary-pale);border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.loading-wrap,.error-wrap{text-align:center;padding:60px 20px;}

/* ── Data Tables (shared header/cell style) ────────────────── */
.data-tbl-head{background:var(--primary-pale);color:var(--primary);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:8px 12px;border-bottom:2px solid #F9D0D5;}

/* ── Modal Overlay ─────────────────────────────────────────── */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:500;align-items:center;justify-content:center;}
.modal-overlay.open{display:flex;}
.modal{background:#fff;border-radius:10px;width:500px;max-width:95vw;max-height:85vh;overflow-y:auto;padding:28px;box-shadow:0 12px 40px rgba(0,0,0,.15);}
.modal h3{font-size:16px;font-weight:700;margin-bottom:16px;}

/* ── SSO User Profile Component ──────────────────────────────── */
.sso-profile{display:flex;align-items:center;gap:10px;}
.sso-avatar{width:36px;height:36px;border-radius:50%;background:var(--primary);color:#fff;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;line-height:1;}
.sso-info{display:flex;flex-direction:column;min-width:0;}
.sso-name{font-size:13px;font-weight:600;color:#1A1A1A;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sso-email{font-size:11px;color:#6B7280;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}