/* ============================================================
   YEAPIGo Design System — CID visual language, app-wide.
   Source of truth: Creative Intelligence Designer incentive tracker.
   Loads AFTER the Tailwind CDN script so these rules win ties.
   Component classes are yp-* to coexist with Tailwind utilities.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800;900&display=swap');

:root{
  --blue:#2196D6;--orange:#F26522;--purple:#9C3F9E;--teal:#29B6A8;--gold:#F5B622;
  --ink:#2b323c;--muted:#7d8794;--line:#e9ebee;--bg:#eef1f5;--soft:#f8f9fa;
  --hero-a:#1c2530;--hero-b:#2b323c;
}

body{
  font-family:'Montserrat',ui-sans-serif,system-ui,sans-serif;
  background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font-family:inherit}

/* ===== Cards / panels ===== */
.yp-card{background:#fff;border:1px solid var(--line);border-radius:18px;
  box-shadow:0 6px 22px rgba(43,50,60,.06);overflow:hidden}
.yp-panel{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;
  box-shadow:0 6px 22px rgba(43,50,60,.06)}
.yp-panel h3,.yp-h3{font-size:13px;font-weight:900;text-transform:uppercase;
  letter-spacing:.05em;color:var(--muted);margin-bottom:16px}

/* Card header bar (coloured band with icon + title) */
.yp-cbar{display:flex;align-items:center;gap:12px;padding:15px 20px;color:#fff;background:var(--blue)}
.yp-cbar.orange{background:var(--orange)} .yp-cbar.purple{background:var(--purple)}
.yp-cbar.teal{background:var(--teal)} .yp-cbar.ink{background:var(--ink)}
.yp-cbar .ic{font-size:22px}
.yp-cbar .t{font-weight:900;font-size:18px;letter-spacing:.03em}
.yp-cbar .d{font-size:11px;font-weight:700;opacity:.9}
.yp-cbar .tag{margin-left:auto;background:rgba(255,255,255,.22);padding:6px 13px;
  border-radius:20px;font-weight:800;font-size:11.5px;white-space:nowrap}
.yp-cin{padding:20px}

/* ===== Hero (dark gradient panel) ===== */
.yp-hero{background:linear-gradient(135deg,var(--hero-a),var(--hero-b));border-radius:22px;
  padding:26px 28px;color:#fff;position:relative;overflow:hidden}
.yp-hero::after{content:"";position:absolute;right:-60px;top:-60px;width:240px;height:240px;
  border-radius:50%;background:radial-gradient(circle,rgba(33,150,214,.35),transparent 70%)}
.yp-hero>*{position:relative;z-index:2}
.yp-hero .greet{font-weight:700;font-size:12px;opacity:.7}
.yp-hero .nm{font-weight:900;font-size:24px;letter-spacing:-.01em;line-height:1.1}
.yp-grad-text{background:linear-gradient(90deg,#5ec6ff,#ffd36b);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ===== Buttons ===== */
.yp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 26px;border:none;border-radius:12px;font-weight:900;font-size:13px;
  letter-spacing:.03em;color:#fff;cursor:pointer;
  background:linear-gradient(90deg,var(--blue),var(--purple));
  box-shadow:0 8px 22px rgba(33,150,214,.35);transition:transform .1s,box-shadow .2s}
.yp-btn:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(33,150,214,.45)}
.yp-btn:active{transform:translateY(0)}
.yp-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.yp-btn.teal{background:linear-gradient(90deg,var(--blue),var(--teal));box-shadow:0 8px 20px rgba(33,150,214,.3)}
.yp-btn.orange{background:linear-gradient(90deg,var(--gold),var(--orange));box-shadow:0 8px 20px rgba(242,101,34,.3)}
.yp-btn.danger{background:linear-gradient(90deg,#e0524a,#c0392b);box-shadow:0 8px 20px rgba(192,57,43,.3)}
.yp-btn.sm{padding:9px 16px;font-size:12px;border-radius:10px}
.yp-ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 22px;border:none;border-radius:12px;font-weight:800;font-size:13px;
  background:var(--soft);color:var(--ink);cursor:pointer;transition:background .15s}
.yp-ghost:hover{background:#eceef1}
.yp-ghost.sm{padding:9px 16px;font-size:12px;border-radius:10px}

/* ===== Forms ===== */
.yp-field{margin-bottom:14px}
.yp-field label,.yp-label{display:block;font-size:11px;font-weight:800;color:var(--muted);
  text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.yp-field input,.yp-field select,.yp-field textarea,
.yp-input,.yp-select{width:100%;padding:11px 13px;border:1.5px solid var(--line);
  border-radius:10px;font-size:13px;font-weight:700;background:#fff;color:var(--ink);transition:border .15s}
.yp-field input:focus,.yp-field select:focus,.yp-field textarea:focus,
.yp-input:focus,.yp-select:focus{outline:none;border-color:var(--blue)}
.yp-toggle{border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;
  display:flex;align-items:center;gap:10px;cursor:pointer;font-weight:800;font-size:13px;transition:.15s;background:#fff}
.yp-toggle input{width:20px;height:20px;accent-color:var(--orange)}
.yp-toggle.on{border-color:var(--orange);background:#fff8ee}

/* ===== Badges & pills ===== */
.yp-badge{display:inline-block;padding:3px 9px;border-radius:12px;font-weight:900;
  font-size:10.5px;letter-spacing:.03em}
.yp-badge.b{background:#eaf5fc;color:var(--blue)}
.yp-badge.g{background:#fdf3e7;color:var(--orange)}
.yp-badge.p{background:#f6ecf7;color:var(--purple)}
.yp-badge.t{background:#e8f7f5;color:var(--teal)}
.yp-badge.m{background:#f3f4f6;color:var(--muted)}
.yp-badge.ok{background:#edf7ef;color:#2d7a3a}
.yp-badge.warn{background:#fdf3e7;color:#9a6100}
.yp-badge.bad{background:#fdecea;color:#c0392b}
.yp-pill{display:inline-block;background:var(--purple);color:#fff;font-size:11px;
  font-weight:900;padding:5px 12px;border-radius:20px;letter-spacing:.04em}
.yp-pill.blue{background:var(--blue)} .yp-pill.orange{background:var(--orange)}

/* ===== Progress ===== */
.yp-xp{height:14px;border-radius:8px;background:#eef0f3;overflow:hidden;position:relative}
.yp-xp span{display:block;height:100%;border-radius:8px;
  background:linear-gradient(90deg,var(--blue),var(--teal));width:0;
  transition:width 1s cubic-bezier(.2,.8,.2,1)}
.yp-xp.purple span{background:linear-gradient(90deg,var(--purple),#c266c4)}
.yp-xp-lab{display:flex;justify-content:space-between;font-size:10.5px;font-weight:800;color:var(--muted);margin-top:6px}

/* ===== Tables ===== */
.yp-table{width:100%;border-collapse:collapse;font-size:12.5px}
.yp-table th{text-align:left;font-weight:900;color:var(--muted);text-transform:uppercase;
  font-size:10.5px;letter-spacing:.04em;padding:8px 10px;border-bottom:2px solid var(--line);background:#fff}
.yp-table td{padding:10px;border-bottom:1px solid var(--line);font-weight:700}
.yp-table tr:hover td{background:var(--soft)}

/* ===== Toast ===== */
.yp-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);
  background:var(--ink);color:#fff;padding:13px 22px;border-radius:12px;font-weight:800;
  font-size:13px;box-shadow:0 12px 30px rgba(0,0,0,.3);transition:transform .35s;z-index:60}
.yp-toast.show{transform:translateX(-50%) translateY(0)}

/* ===== Sidebar / chrome (used by js/layout.js) ===== */
.yp-side{background:linear-gradient(180deg,var(--hero-a),var(--hero-b));color:#fff}
.yp-side-brand{display:flex;align-items:center;gap:12px;padding:20px;border-bottom:1px solid rgba(255,255,255,.08)}
.yp-side-logo{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--blue),var(--purple));font-weight:900;font-size:18px;color:#fff;
  box-shadow:0 6px 16px rgba(33,150,214,.35)}
.yp-side-title{font-weight:900;font-size:17px;line-height:1.15;letter-spacing:-.01em}
.yp-side-sub{font-size:10px;font-weight:800;color:rgba(255,255,255,.45);text-transform:uppercase;letter-spacing:.08em}
.yp-nav{padding:14px 12px;display:flex;flex-direction:column;gap:2px;overflow-y:auto;flex:1}
.yp-nav-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:11px;
  font-weight:800;font-size:13px;color:rgba(255,255,255,.72);text-decoration:none;transition:.15s;width:100%;
  background:none;border:none;text-align:left;cursor:pointer}
.yp-nav-item:hover{background:rgba(255,255,255,.07);color:#fff}
.yp-nav-item.active{background:linear-gradient(90deg,rgba(33,150,214,.9),rgba(156,63,158,.85));
  color:#fff;box-shadow:0 6px 16px rgba(33,150,214,.3)}
.yp-nav-item svg{width:19px;height:19px;flex-shrink:0}
.yp-nav-arrow{margin-left:auto;transition:transform .2s}
.yp-nav-arrow.open{transform:rotate(90deg)}
.yp-nav-sub{margin:2px 0 4px 18px;padding-left:13px;border-left:2px solid rgba(255,255,255,.1);
  display:flex;flex-direction:column;gap:1px}
.yp-nav-subitem{display:block;padding:7px 10px;border-radius:8px;font-weight:700;font-size:12.5px;
  color:rgba(255,255,255,.55);text-decoration:none;transition:.15s}
.yp-nav-subitem:hover{color:#fff;background:rgba(255,255,255,.06)}
.yp-nav-subitem.active{color:#fff;font-weight:900;background:rgba(33,150,214,.25)}
.yp-side-foot{padding:14px;border-top:1px solid rgba(255,255,255,.08);
  font-size:10px;font-weight:700;color:rgba(255,255,255,.35);text-align:center}
.yp-topbar{background:#fff;border-bottom:1px solid var(--line);box-shadow:0 2px 12px rgba(43,50,60,.05)}
.yp-avatar{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:900;font-size:14px;background:linear-gradient(135deg,var(--blue),var(--purple))}

/* ===== Score-grade colour helpers (shared HOD / dashboard semantics) ===== */
.yp-grade-excellent{background:#edf7ef;color:#2d7a3a}
.yp-grade-good{background:#e8f1fb;color:#1a5f9e}
.yp-grade-improve{background:#fdecea;color:#c0392b}
.yp-grade-na{background:#f3f4f6;color:var(--muted)}

/* ===== Misc ===== */
.yp-empty{text-align:center;padding:50px 20px;color:var(--muted)}
.yp-empty .ei{font-size:40px;margin-bottom:10px}
.yp-empty .em{font-weight:800;font-size:14px}
@keyframes yp-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
.yp-pulse{animation:yp-pulse 2s infinite}