:root {
  --ri-primary: #0b3d6b;      /* corporate deep blue */
  --ri-primary-2: #10538f;
  --ri-accent: #f5a623;       /* radiant gold */
  --ri-bg: #f4f6f9;
  --ri-sidebar-w: 250px;
}

* { font-family: "Segoe UI", system-ui, -apple-system, sans-serif; }
body { background: var(--ri-bg); }

/* ---------- Sidebar ---------- */
.ri-sidebar {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: var(--ri-sidebar-w);
  background: linear-gradient(180deg, var(--ri-primary) 0%, #072a4a 100%);
  color: #cdd9e6;
  display: flex; flex-direction: column;
  z-index: 1030;
}
.ri-brand {
  padding: 18px 20px; display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.ri-brand .logo {
  width: 40px; height: 40px; border-radius: 8px;
  background: var(--ri-accent); color: var(--ri-primary);
  display: grid; place-items: center; font-weight: 800; font-size: 18px;
}
.ri-brand small { color: #8fa7bf; font-size: .68rem; letter-spacing: .5px; }
.ri-brand strong { color: #fff; font-size: .95rem; line-height: 1.1; }

.ri-nav { padding: 12px 10px; overflow-y: auto; flex: 1; }
.ri-nav .nav-label { color: #6f8aa6; font-size: .68rem; text-transform: uppercase; letter-spacing: 1px; padding: 14px 12px 6px; }
.ri-nav a {
  display: flex; align-items: center; gap: 12px;
  color: #cdd9e6; text-decoration: none;
  padding: 10px 12px; border-radius: 8px; font-size: .9rem; margin-bottom: 2px;
}
.ri-nav a:hover { background: rgba(255,255,255,.07); color: #fff; }
.ri-nav a.active { background: var(--ri-accent); color: var(--ri-primary); font-weight: 600; }
.ri-nav a .bi { font-size: 1.05rem; }

.ri-sidebar-foot { padding: 14px 18px; border-top: 1px solid rgba(255,255,255,.08); font-size: .72rem; color: #6f8aa6; }

/* ---------- Main ---------- */
.ri-main { margin-left: var(--ri-sidebar-w); min-height: 100vh; }
.ri-topbar {
  background: #fff; height: 62px; display: flex; align-items: center;
  justify-content: space-between; padding: 0 24px;
  border-bottom: 1px solid #e6ebf1; position: sticky; top: 0; z-index: 1020;
}
.ri-topbar .page-title { font-weight: 700; color: var(--ri-primary); font-size: 1.1rem; }
.ri-content { padding: 24px; }

/* ---------- Stat cards ---------- */
.stat-card { border: none; border-radius: 14px; overflow: hidden; }
.stat-card .card-body { padding: 18px 20px; }
.stat-card .stat-ico { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 1.3rem; }
.stat-card .stat-val { font-size: 1.6rem; font-weight: 700; color: var(--ri-primary); }
.stat-card .stat-lbl { color: #7a8aa0; font-size: .82rem; }

.bg-soft-blue { background: #e7f0fb; color: #10538f; }
.bg-soft-green { background: #e4f7ec; color: #1f9d55; }
.bg-soft-orange { background: #fdf0dc; color: #d78a12; }
.bg-soft-red { background: #fde7e7; color: #d64545; }

/* ---------- Table ---------- */
.card-ri { border: none; border-radius: 14px; box-shadow: 0 1px 3px rgba(16,40,70,.06); }
.card-ri .card-header { background: #fff; border-bottom: 1px solid #eef1f5; font-weight: 600; color: var(--ri-primary); border-radius: 14px 14px 0 0; padding: 16px 20px; }
.table thead th { color: #7a8aa0; font-size: .74rem; text-transform: uppercase; letter-spacing: .5px; border-bottom: 2px solid #eef1f5; }
.table td { vertical-align: middle; font-size: .88rem; }

.badge-soft { padding: .4em .7em; border-radius: 20px; font-weight: 600; font-size: .72rem; white-space: nowrap; }
/* 10-stage lifecycle */
.st-draft { background:#eef1f5; color:#6b7a90; }
.st-validated { background:#e7f0fb; color:#10538f; }
.st-pi { background:#e0f2f4; color:#0d94a8; }
.st-ars { background:#dcecfb; color:#2563c9; }
.st-waiting { background:#fdf0dc; color:#d78a12; }
.st-approved { background:#e4f7ec; color:#1f9d55; }
.st-rfi { background:#e9e4fb; color:#6a4fd0; }
.st-issued { background:#e7e0fb; color:#7b3ff2; }
.st-sent { background:#dfeffe; color:#1273d4; }
.st-paid { background:#d7f5e3; color:#0f8f4c; }
.st-rejected { background:#fde7e7; color:#d64545; }
/* legacy aliases */
.st-erp { background:#e7f0fb; color:#10538f; }
.st-review { background:#fdf0dc; color:#d78a12; }

.btn-ri { background: var(--ri-primary); border-color: var(--ri-primary); color:#fff; }
.btn-ri:hover { background: var(--ri-primary-2); border-color: var(--ri-primary-2); color:#fff; }
.text-ri { color: var(--ri-primary) !important; }

.avatar-sm { width:34px; height:34px; border-radius:50%; background:var(--ri-primary); color:#fff; display:grid; place-items:center; font-size:.8rem; font-weight:600; }

/* ---------- Print doc ---------- */
.doc-sheet { background:#fff; max-width: 850px; margin: 0 auto; border-radius:8px; box-shadow:0 2px 12px rgba(16,40,70,.08); }

@media print {
  .ri-sidebar, .ri-topbar, .no-print { display: none !important; }
  .ri-main { margin-left: 0; }
  .ri-content { padding: 0; }
  .doc-sheet { box-shadow: none; }
}

@media (max-width: 991px) {
  .ri-sidebar { transform: translateX(-100%); transition: .2s; }
  .ri-sidebar.show { transform: none; }
  .ri-main { margin-left: 0; }
}

/* ---------- Guided tour ---------- */
.guide-overlay { position:fixed; inset:0; background:rgba(7,30,55,.55); z-index:3000; pointer-events:none; animation:gfade .2s; }
.guide-target { position:relative; z-index:3001; border-radius:8px; box-shadow:0 0 0 4px var(--ri-accent); animation:gpulse 1.4s infinite; }
@keyframes gpulse { 0%,100%{box-shadow:0 0 0 4px var(--ri-accent)} 50%{box-shadow:0 0 0 8px rgba(245,166,35,.5)} }
.ri-sidebar.guide-top { z-index:3001; }
.ri-sidebar.guide-top .ri-nav { overflow:visible; }
@keyframes gfade { from{opacity:0} to{opacity:1} }

.guide-coach { position:fixed; right:24px; bottom:24px; width:350px; background:#fff; border-radius:14px; box-shadow:0 10px 40px rgba(7,30,55,.4); z-index:3002; overflow:hidden; animation:gslide .25s; }
@keyframes gslide { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} }
.guide-coach .gc-head { color:#fff; padding:12px 16px; font-weight:700; font-size:.9rem; display:flex; justify-content:space-between; align-items:center; }
.guide-coach .gc-x { background:none; border:none; color:#fff; font-size:1.3rem; line-height:1; opacity:.8; cursor:pointer; }
.guide-coach .gc-x:hover { opacity:1; }
.guide-coach .gc-body { padding:14px 16px; }
.guide-coach .gc-step { font-size:.72rem; color:#9fb2c8; font-weight:600; text-transform:uppercase; letter-spacing:.5px; }
.guide-coach .gc-progress { height:5px; background:#eef1f5; border-radius:4px; margin:5px 0 10px; overflow:hidden; }
.guide-coach .gc-progress div { height:100%; transition:width .3s; }
.guide-coach .gc-title { font-weight:700; color:#33475b; font-size:1rem; margin-bottom:4px; }
.guide-coach .gc-text { font-size:.85rem; color:#5a6b80; margin-bottom:12px; line-height:1.45; }
.guide-coach .gc-tupoksi { margin-bottom:10px; }
.guide-coach .gc-tupoksi summary { font-size:.78rem; color:#7a8aa0; cursor:pointer; font-weight:600; }
.guide-coach .gc-tupoksi ul { margin:6px 0 0; padding-left:18px; font-size:.78rem; color:#5a6b80; }
.guide-coach .gc-tupoksi li { margin-bottom:3px; }