:root {
  --bc-navy: #0b2545;
  --bc-blue: #0056b3;
  --bc-blue-soft: #e8f0fb;
  --bc-bg: #f3f5f9;
  --bc-border: #e3e8ef;
  --bc-text: #1d2733;
  --bc-muted: #6b7785;
  --won: #12805c;
  --won-soft: #e3f5ee;
  --quoted: #b25e00;
  --quoted-soft: #fff3e0;
  --lost: #8a94a3;
  --lost-soft: #eef0f3;
  --bad: #c62828;
}

body { background: var(--bc-bg); color: var(--bc-text); font-size: 0.925rem; }
.num, .table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.muted { color: var(--bc-muted); }
.small-caps { font-size: 0.72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--bc-muted); font-weight: 600; }

/* nav */
.app-nav { background: #fff; border-bottom: 3px solid var(--bc-blue); box-shadow: 0 1px 3px rgba(16,24,40,.06); }
.app-nav .nav-link { color: #3a4654; font-weight: 500; border-radius: 6px; padding: .45rem .8rem !important; }
.app-nav .nav-link.active, .app-nav .nav-link:hover { color: var(--bc-blue); background: var(--bc-blue-soft); }
.brand-logo { height: 34px; width: auto; }
.brand-text { color: var(--bc-navy); font-weight: 700; letter-spacing: .3px; }
.badge-branch { background: var(--bc-blue); color: #fff; font-weight: 600; }

/* cards */
.card { border: 1px solid var(--bc-border); border-radius: 12px; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.card-header { background: #fff; border-bottom: 1px solid var(--bc-border); font-weight: 600; padding: .8rem 1rem;
               border-top-left-radius: 12px !important; border-top-right-radius: 12px !important; }
.card-header .hint { font-weight: 400; color: var(--bc-muted); font-size: .82rem; }
.page-title { font-weight: 700; color: var(--bc-navy); margin: 0; }
.page-sub { color: var(--bc-muted); }

/* KPI tiles */
.kpi { background: #fff; border: 1px solid var(--bc-border); border-radius: 12px; padding: .9rem 1rem; height: 100%; }
.kpi .label { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--bc-muted); font-weight: 600; }
.kpi .value { font-size: 1.45rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.25; margin-top: .15rem; }
.kpi .value .cur { font-size: .8rem; font-weight: 600; color: var(--bc-muted); margin-left: .2rem; }
.kpi .sub { font-size: .8rem; color: var(--bc-muted); margin-top: .1rem; }
.kpi.won { border-left: 4px solid var(--won); }
.kpi.quoted { border-left: 4px solid var(--quoted); }
.kpi.pipe { border-left: 4px solid var(--bc-blue); }
.kpi.lost { border-left: 4px solid var(--lost); }
.cur-block-title { font-weight: 700; color: var(--bc-navy); }

.progress { height: 8px; border-radius: 6px; background: #edf0f4; }
.progress-bar { background: var(--won); }

/* status pills */
.pill { display: inline-block; padding: .18rem .55rem; border-radius: 999px; font-size: .74rem; font-weight: 600; white-space: nowrap; }
.pill-Quoted { background: var(--quoted-soft); color: var(--quoted); }
.pill-Won { background: var(--won-soft); color: var(--won); }
.pill-Lost { background: var(--lost-soft); color: #5d6673; }
.pill-Submitted { background: var(--won-soft); color: var(--won); }
.pill-Pending { background: #fdecec; color: var(--bad); }
.pill-Leave, .pill-Holiday { background: var(--bc-blue-soft); color: var(--bc-blue); }
.pill-Weekend { background: var(--lost-soft); color: #5d6673; }
.pill-Worked { background: var(--won-soft); color: var(--won); }
.pill-late { background: #fff3e0; color: var(--quoted); }

.chg-neg { color: var(--bad); font-weight: 600; }
.chg-pos { color: var(--won); font-weight: 600; }
.gp { color: var(--won); font-weight: 600; }

/* tables */
.table { margin-bottom: 0; }
.table thead th { background: #f7f9fc; color: #4a5664; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em;
                  font-weight: 600; border-bottom: 1px solid var(--bc-border); white-space: nowrap; }
.table td { vertical-align: middle; border-color: #eef1f5; }
.table tfoot td { font-weight: 700; background: #f7f9fc; }
.table-scroll { max-height: 520px; overflow: auto; }
.table-scroll thead th { position: sticky; top: 0; z-index: 1; }
.rank { display:inline-flex; width: 1.5rem; height: 1.5rem; align-items:center; justify-content:center; border-radius:50%;
        font-size:.75rem; font-weight:700; background:#eef1f5; color:#4a5664; }
.rank-1 { background:#ffd54f; color:#5d4300; } .rank-2 { background:#cfd8dc; color:#37474f; } .rank-3 { background:#ffccbc; color:#6d2b12; }

/* forms */
.form-label { font-weight: 600; font-size: .82rem; margin-bottom: .25rem; }
.gp-preview { background: #f7f9fc; border: 1px dashed var(--bc-border); border-radius: 10px; padding: .6rem .9rem; }
.gp-preview .v { font-weight: 700; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.line-row .btn { padding: .2rem .5rem; }
.btn-won { background: var(--won); color: #fff; border: none; }
.btn-won:hover { background: #0d6b4c; color: #fff; }

/* status board */
.status-chip { display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.45rem .7rem;
               border:1px solid var(--bc-border); border-radius:10px; background:#fff; }

.backlog { border: 1px solid #f3c9a1; background: #fff8f0; border-radius: 12px; }
.weekend-note { background: var(--bc-blue-soft); border-radius: 10px; }

.login-wrap { min-height: 80vh; display:flex; align-items:center; justify-content:center; }
.login-card { width: 100%; max-width: 380px; }

@media (max-width: 576px) {
  .kpi .value { font-size: 1.2rem; }
  main.container-fluid { padding-left: .6rem !important; padding-right: .6rem !important; }
}

@media print {
  .app-nav, .no-print, footer { display: none !important; }
  body { background: #fff; }
  .card { box-shadow: none; }
}

/* footer always at the bottom, bold brand blue */
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }
.app-footer { flex-shrink: 0; text-align: center; font-weight: 700; font-size: .9rem; letter-spacing: .2px;
              color: var(--bc-blue); background: #fff; border-top: 3px solid var(--bc-blue);
              padding: 14px 10px; margin-top: 24px; }