:root { /* Tricom palette */
  --brand: #006cfc;      /* bright blue (R stroke) */
  --brand-dark: #0057cc;
  --side: #012268;       /* navy wordmark */
  --accent: #11bf05;     /* signal green */
}
.btn-primary { --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand); --bs-btn-hover-bg: var(--brand-dark);
  --bs-btn-hover-border-color: var(--brand-dark); --bs-btn-active-bg: var(--brand-dark); --bs-btn-active-border-color: var(--brand-dark); }
.btn-outline-primary { --bs-btn-color: var(--brand); --bs-btn-border-color: var(--brand); --bs-btn-hover-bg: var(--brand);
  --bs-btn-hover-border-color: var(--brand); --bs-btn-active-bg: var(--brand-dark); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--side); }
a { color: var(--brand); }
body { background: #f4f6fa; font-size: .925rem; }
.sidebar { width: 240px; min-height: 100vh; background: var(--side); color: #cfd8ea; flex-shrink: 0; }
.sidebar .brand { padding: 1rem 1.25rem; font-weight: 700; color: var(--side); background: #fff; border-bottom: 3px solid var(--accent); }
.sidebar .brand-logo { display: block; width: 100%; max-width: 190px; height: auto; }
.sidebar .brand-sub { margin-top: .35rem; font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #5b6b8c; }
.sidebar .nav-link { color: #cfd8ea; padding: .55rem 1.25rem; border-left: 3px solid transparent; }
.sidebar .nav-link i { width: 1.4rem; display: inline-block; }
.sidebar .nav-link:hover { color: #fff; background: rgba(255,255,255,.05); }
.sidebar .nav-link.active { color: #fff; background: rgba(255,255,255,.1); border-left-color: var(--accent); }
.topbar { background: #fff; padding: .85rem 1.5rem; border-bottom: 1px solid #e3e7ef; }
.content { padding: 1.5rem; }
.card { border: 1px solid #e3e7ef; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.stat .value { font-size: 1.6rem; font-weight: 700; color: var(--side); }
.stat .label { color: #6b7280; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.table th { font-size: .78rem; text-transform: uppercase; color: #6b7280; white-space: nowrap; }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--side) 0%, var(--side) 55%, var(--brand) 100%); }
.login-card { border-top: 4px solid var(--accent); }
.login-logo { display: block; width: 100%; max-width: 260px; height: auto; margin: 0 auto; }
.login-card p.text-muted { text-align: center; }
.payslip-logo { height: 34px; width: auto; }
.logo-preview { width: 200px; min-height: 48px; display: flex; align-items: center; justify-content: center; border: 1px dashed #c7cfdd; border-radius: 6px; padding: .5rem; background: #fff; }
.logo-preview img { max-width: 100%; max-height: 60px; }
.login-card { width: 100%; max-width: 380px; }
.payslip { max-width: 820px; margin: 0 auto; background: #fff; padding: 2rem; border: 1px solid #ddd; }
.payslip h2 { font-size: 1.1rem; }
.payslip table td { padding: .2rem .4rem; }
@media (max-width: 768px) { .sidebar { display: none; } }
@media print {
  body { background: #fff; }
  .content { padding: 0; }
  .payslip { border: 0; }
  .card { border: 0; box-shadow: none; }
}