/* Cashbuddy brand on top of Bootstrap 5.
 * Brand navy from the legacy site: #2C4182 (nav strip), #3B4C80 (headings)
 */
:root {
  --cb-navy: #2C4182;
  --cb-navy-dark: #1F2E5C;
  --cb-accent: #3B4C80;
  --cb-tint: #F0F3FA;
  --bs-primary: #2C4182;
  --bs-primary-rgb: 44, 65, 130;
  --bs-link-color: var(--cb-accent);
  --bs-link-hover-color: var(--cb-navy-dark);
}

html, body { overflow-x: hidden; }

.cb-navbar { background: var(--cb-navy) !important; border-bottom: 3px solid var(--cb-navy-dark); }
.cb-navbar .navbar-brand { padding-top: .25rem; padding-bottom: .25rem; }
.cb-navbar__logo { height: 26px; width: auto; display: block; }   /* white logo on navy bar */
.cb-navbar .nav-link { color: rgba(255, 255, 255, 0.88); }
.cb-navbar .nav-link:hover { color: #fff; }
.cb-navbar .cb-userchip { font-size: 0.85rem; opacity: 0.9; }

/* Brand colour overrides for the bits we use */
.btn-primary { --bs-btn-bg: var(--cb-navy); --bs-btn-border-color: var(--cb-navy);
               --bs-btn-hover-bg: var(--cb-navy-dark); --bs-btn-hover-border-color: var(--cb-navy-dark);
               --bs-btn-active-bg: var(--cb-navy-dark); --bs-btn-active-border-color: var(--cb-navy-dark); }
h1, h2, h3, h4, h5 { color: var(--cb-accent); }
h1 { font-size: 1.65rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.1rem; }

/* Page header strip (used on edit screens) */
.cb-context { background: var(--cb-tint); border-radius: 4px; padding: 0.55rem 0.85rem;
              font-size: 0.85rem; color: #555; margin: 0 0 1rem; }
.cb-context code { color: var(--cb-navy); background: #fff; padding: 0.05rem 0.35rem; border-radius: 3px; }

/* Audit footer on edit screens */
.cb-audit { margin-top: 1.5rem; padding-top: 0.6rem; border-top: 1px solid #e6e8ee;
            font-size: 0.78rem; color: #6c757d; }

/* Auth screens: narrow centred card */
.cb-auth { max-width: 28rem; margin: 4rem auto; }

/* ============================================================
   Login landing — brand hero (left) + sign-in (right)
   ============================================================ */
:root { --cb-bright: #4f8ff5; }

.cb-landing {
  /* Fill the viewport exactly, ignoring the parent .container. */
  position: fixed; inset: 0; z-index: 1; overflow-y: auto;
  display: grid; grid-template-columns: 1.08fr 0.92fr;
}
.cb-landing > * { min-width: 0; }   /* let grid tracks shrink, no blow-out */
@media (max-width: 900px) {
  .cb-landing { grid-template-columns: 1fr; grid-auto-rows: min-content; }
}

/* ---------- LEFT: hero ---------- */
.cb-hero {
  position: relative; overflow: hidden; color: #fff;
  padding: clamp(2rem, 4vw, 4rem) clamp(2rem, 4.5vw, 4.5rem);
  background:
    radial-gradient(900px 480px at 78% 8%, rgba(86,124,210,.30), transparent 60%),
    radial-gradient(700px 500px at 12% 110%, rgba(40,60,130,.45), transparent 55%),
    linear-gradient(135deg, #243a73 0%, #1c2c5e 50%, #15203f 100%);
}
/* faint geometric arcs, like the mockup */
.cb-hero::before {
  content: ""; position: absolute; right: -18%; top: 8%;
  width: 70%; height: 120%;
  background:
    radial-gradient(closest-side, transparent 68%, rgba(255,255,255,.05) 69%, transparent 72%),
    radial-gradient(closest-side, transparent 80%, rgba(255,255,255,.04) 81%, transparent 84%);
  transform: rotate(-8deg); pointer-events: none;
}
.cb-hero__inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; min-height: 100%;
  max-width: 36rem;
}
.cb-hero__logo { height: clamp(34px, 3.4vw, 46px); width: auto; margin-bottom: clamp(1.5rem, 4vh, 3rem); }

.cb-hero__body { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
.cb-hero__title {
  color: #fff; font-size: clamp(2.1rem, 3.6vw, 3.1rem); font-weight: 800;
  line-height: 1.05; margin: 0 0 1.1rem; letter-spacing: -.01em;
}
.cb-hero__title .accent { color: var(--cb-bright); }
.cb-hero__lead { font-size: 1.05rem; line-height: 1.55; color: rgba(255,255,255,.80); margin: 0 0 1.2rem; max-width: 30rem; }
.cb-hero__divider { display: block; width: 56px; height: 3px; border-radius: 2px; background: var(--cb-bright); margin-bottom: 1.6rem; }

.cb-hero__features { list-style: none; padding: 0; margin: 0 0 1.8rem; }
.cb-hero__features li {
  display: flex; align-items: center; gap: .75rem;
  margin-bottom: .85rem; color: rgba(255,255,255,.92); font-size: 1rem;
}
.cb-hero__features .tick {
  flex: 0 0 auto; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--cb-bright); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 10px -3px rgba(79,143,245,.7);
}
.cb-hero__features .tick svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.cb-hero__assure {
  display: flex; gap: 1rem; align-items: center;
  border: 1px solid rgba(255,255,255,.16); border-radius: 12px;
  background: rgba(255,255,255,.05); padding: 1.1rem 1.25rem; max-width: 32rem;
}
.cb-hero__shield { flex: 0 0 auto; }
.cb-hero__shield svg { width: 38px; height: 38px; fill: rgba(79,143,245,.22); stroke: var(--cb-bright); stroke-width: 1.2; }
.cb-hero__shield svg .chk { stroke: var(--cb-bright); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cb-hero__assure .t { margin: 0 0 .15rem; font-weight: 700; color: #fff; }
.cb-hero__assure .s { margin: 0; font-size: .85rem; color: rgba(255,255,255,.65); line-height: 1.4; }

.cb-hero__footer { margin-top: clamp(1.5rem, 4vh, 2.5rem); }
.cb-hero__trust {
  display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; align-items: center;
  padding-bottom: .9rem; border-bottom: 1px solid rgba(255,255,255,.1); margin-bottom: .8rem;
}
.cb-hero__trust span { display: inline-flex; align-items: center; gap: .45rem; font-size: .8rem; color: rgba(255,255,255,.72); }
.cb-hero__trust .ic { width: 15px; height: 15px; fill: none; stroke: rgba(255,255,255,.72); stroke-width: 1.6; }
.cb-hero__trust .ic[viewBox="0 0 24 24"] path[fill="none"] { stroke: rgba(255,255,255,.72); }
.cb-hero__trust svg path:not([fill="none"]) { fill: rgba(255,255,255,.72); stroke: none; }
.cb-hero__trust .flag { font-size: 1rem; line-height: 1; }
.cb-hero__foot { margin: 0; font-size: .78rem; color: rgba(255,255,255,.55); }
.cb-hero__foot strong { color: rgba(255,255,255,.8); font-weight: 600; }

/* ---------- RIGHT: sign-in ---------- */
.cb-auth-panel {
  position: relative; display: flex; align-items: center; justify-content: center;
  padding: clamp(2rem, 4vw, 4rem);
  background:
    radial-gradient(60% 50% at 85% 12%, rgba(79,143,245,.06), transparent 60%),
    linear-gradient(160deg, #eef2fa 0%, #e6ecf7 100%);
}
/* handshake watermark behind the card */
.cb-auth-panel::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url('/static/img/background-shake.png') center / cover no-repeat;
  opacity: .55; mix-blend-mode: multiply;
}
/* dot-grid decoration */
.cb-auth-panel::before {
  content: ""; position: absolute; top: 9%; right: 8%; width: 120px; height: 90px; z-index: 1;
  background-image: radial-gradient(rgba(44,65,130,.18) 1.6px, transparent 1.6px);
  background-size: 14px 14px; pointer-events: none;
}
.cb-login-card {
  position: relative; z-index: 2; width: 100%; max-width: 26rem; background: #fff;
  border: 1px solid #e7eaf2; border-radius: 18px;
  box-shadow: 0 30px 60px -30px rgba(31,46,92,.4);
  padding: clamp(1.75rem, 3vw, 2.5rem);
}
.cb-login-card__title { font-size: 1.7rem; font-weight: 800; color: var(--cb-navy); margin: 0 0 .2rem; }
.cb-login-card__sub { color: #6c757d; margin: 0 0 1.6rem; }
.cb-field-label { display: block; font-size: .9rem; font-weight: 600; color: #344; margin-bottom: .4rem; }
.cb-input { position: relative; margin-bottom: 1.1rem; }
.cb-input input {
  width: 100%; padding: .7rem 2.6rem .7rem .9rem; font-size: .95rem;
  border: 1px solid #d7dce8; border-radius: 10px; background: #fff; color: #222;
  transition: border-color .15s, box-shadow .15s;
}
.cb-input input::placeholder { color: #9aa3b2; }
.cb-input input:focus { outline: none; border-color: var(--cb-bright); box-shadow: 0 0 0 3px rgba(79,143,245,.18); }
.cb-input__icon { position: absolute; right: .85rem; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; stroke: #9aa3b2; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.cb-signin {
  width: 100%; padding: .8rem; margin-top: .3rem; border: none; border-radius: 10px;
  font-size: 1rem; font-weight: 700; color: #fff; cursor: pointer;
  background: linear-gradient(135deg, #2c4182, #21356c);
  box-shadow: 0 12px 24px -10px rgba(33,53,108,.7); transition: filter .15s, transform .05s;
}
.cb-signin:hover { filter: brightness(1.08); }
.cb-signin:active { transform: translateY(1px); }
.cb-secure-note {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  margin: 1.3rem 0 0; font-size: .78rem; color: #6c757d; text-align: center;
}
.cb-secure-note svg { width: 14px; height: 14px; stroke: #6c757d; fill: none; stroke-width: 1.6; }

.cb-pasa { position: absolute; z-index: 2; right: clamp(1.5rem, 4vw, 3.5rem); bottom: clamp(1.25rem, 3vh, 2.25rem);
  display: flex; align-items: center; gap: .7rem; }
.cb-pasa img { height: 34px; width: auto; border-radius: 4px; }
.cb-pasa__txt { font-size: .72rem; line-height: 1.25; color: #6c757d; border-left: 1px solid #cfd6e4; padding-left: .7rem; }
.cb-pasa__txt span { display: block; }
.cb-pasa__txt strong { color: var(--cb-navy); font-size: .82rem; }

@media (max-width: 900px) {
  .cb-hero__inner { min-height: 0; }
  .cb-pasa { position: static; margin: 1.5rem auto 0; justify-content: center; }
  .cb-auth-panel { flex-direction: column; }
}

/* The big "New temp password" reveal banner */
.cb-pwd-reveal { display: inline-block; padding: 0.4rem 0.8rem; background: #fff;
                 border: 1px solid var(--cb-navy); color: var(--cb-navy);
                 font-size: 1.05rem; user-select: all; cursor: text; border-radius: 3px; }

/* "overdue" tag in Day End */
.cb-overdue { background: #FFF6BD; color: var(--cb-accent); font-size: 0.72rem;
              padding: 0.1rem 0.4rem; border-radius: 3px; margin-left: 0.4rem; }

/* Global footer licence line */
.cb-footer { text-align: center; padding: 1.25rem 1rem; font-size: .72rem; color: #98a0ad; }

/* Login hero licence line */
.cb-hero__legal { margin: .4rem 0 0; font-size: .72rem; color: rgba(255,255,255,.45); }

/* Cookie notice bar */
.cb-cookie {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  background: #fff; border-top: 1px solid #e3e7f0;
  box-shadow: 0 -8px 24px -16px rgba(31,46,92,.45);
  padding: .85rem clamp(1rem, 4vw, 2rem);
}
.cb-cookie__txt { margin: 0; flex: 1 1 320px; font-size: .85rem; color: #444; line-height: 1.45; }
.cb-cookie a { color: var(--cb-navy); font-weight: 600; }
.cb-cookie .btn { flex: 0 0 auto; }

/* Legal / policy pages */
.cb-legal { max-width: 800px; margin: 0 auto; }
.cb-legal h1 { font-size: 1.8rem; margin-bottom: .25rem; }
.cb-legal h2 { font-size: 1.1rem; margin-top: 1.8rem; }
.cb-legal p, .cb-legal li { color: #333; line-height: 1.6; }
.cb-legal ul { padding-left: 1.2rem; }

/* Sortable column headers */
th.sortable { white-space: nowrap; }
th.sortable a { color: inherit; text-decoration: none; }
th.sortable a:hover { color: var(--cb-navy); text-decoration: underline; }
.cb-sort { color: var(--cb-navy); font-size: 0.75rem; }