/* ---- UI polish layer (loaded after style.css; purely cosmetic) ---- */

/* Colored, slightly elevated top bar with brand accent */
.topbar{
  background:linear-gradient(90deg,#ffffff 0%,#eaf3ff 100%);
  border-bottom:2px solid var(--brand);
  box-shadow:0 1px 5px rgba(20,30,45,.06);
}
.brand a{display:inline-flex;align-items:center;gap:9px;color:var(--brand)}
.brand .logo{display:inline-flex;line-height:0}
.brand .logo svg{display:block}

/* Nav hover in brand tint + active-ish feel */
.mainnav a{transition:background .12s ease,color .12s ease}
.mainnav a:hover{background:#e7f0fb;color:var(--brand)}

/* KPI cards get a thin coloured top accent + coloured figure.
   Each of the four cards a distinct hue so the row reads at a glance. */
.cards .card{border-top:3px solid var(--brand)}
.cards .card .v{color:var(--brand-dark)}
.cards .card:nth-child(2){border-top-color:var(--ok)}
.cards .card:nth-child(2) .v{color:var(--ok)}
.cards .card:nth-child(3){border-top-color:#b7791f}
.cards .card:nth-child(3) .v{color:#b7791f}
.cards .card:nth-child(4){border-top-color:#6b46c1}
.cards .card:nth-child(4) .v{color:#6b46c1}

/* Softer panels + tinted table headers */
.panel{box-shadow:0 1px 3px rgba(20,30,45,.05)}
th{background:#eef5ff}

/* Buttons a touch more tactile */
button,.btn{box-shadow:0 1px 2px rgba(43,108,176,.25)}

/* Login card brand accent + logo */
.login-wrap{border-top:4px solid var(--brand)}
.login-logo{display:flex;justify-content:center;margin-bottom:6px}
.login-logo svg{display:block}