:root {
  --gp-navy: #0d1b2a;
  --gp-red: #c0392b;
  --gp-gold: #f5a623;
}
body { background: #f4f6f9; }
.gp-navbar { background: var(--gp-navy); }
.gp-footer { background: var(--gp-navy); color: #cfd8e3; margin-top: 40px; }
.card { border: none; box-shadow: 0 2px 10px rgba(0,0,0,.06); border-radius: 12px; }
.hero { background: linear-gradient(135deg, var(--gp-navy), #1b3a5c); color: #fff; border-radius: 16px; padding: 50px 30px; margin-bottom: 30px;}
.hero .btn-red { background: var(--gp-red); color: #fff; border: none; }
.hero .btn-gold { background: var(--gp-gold); color: #1b1b1b; border: none; font-weight: 600; }
.role-tile { display:block; padding: 25px; text-align: center; border-radius: 14px; color: #fff; text-decoration: none; transition: transform .15s ease; }
.role-tile:hover { transform: translateY(-4px); color:#fff; }
.role-tile i { font-size: 2rem; margin-bottom: 10px; display:block; }
.tile-client{ background:#2563eb;} .tile-agent{background:#7c3aed;} .tile-staff{background:#0d9488;} .tile-admin{background:#c0392b;}
.section-title { border-left: 4px solid var(--gp-red); padding-left: 10px; margin: 20px 0 12px; }
table.table thead { background: var(--gp-navy); color:#fff; }
.badge { font-weight: 500; }
.login-box { max-width: 420px; margin: 40px auto; }

/* Progress Report tracking line */
.tracker { display: flex; align-items: flex-start; overflow-x: auto; padding: 14px 4px 6px; }
.tracker-step { flex: 1; min-width: 110px; text-align: center; position: relative; padding-top: 0; }
.tracker-line { position: absolute; top: 18px; left: -50%; width: 100%; height: 3px; background: #dee2e6; z-index: 1; }
.tracker-line.filled { background: #198754; }
.tracker-circle { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  margin: 0 auto 8px; font-size: .9rem; color: #fff; position: relative; z-index: 2; }
.tracker-circle.done { background: #198754; }
.tracker-circle.rejected { background: #c0392b; }
.tracker-circle.pending { background: #f5a623; }
.tracker-circle.skipped { background: #adb5bd; }
.tracker-label { font-size: .8rem; font-weight: 600; color: #212529; }
.tracker-caption { font-size: .72rem; color: #6c757d; }
.tracker-final { text-align: center; margin-top: 8px; }