/* VicaFinance theme — VICA Brand Identity Guidelines, 2026 Revision
   Vine International Christian Academy.
   Colour: magenta #A22280 is the primary (headings, active navigation, links, primary buttons,
   the sidebar); blue #0871B9 is the secondary for informational states (pending-approval counts,
   info chips); purple #6F2576 carries the signature button text; lime #C1D82F is the signature
   accent and is reserved for ONE element per screen (never the default primary button).
   Status colours: approved/paid dark green #006838, pending golden #FBBF0E (dark text),
   rejected crimson #C61E4A, overdue dark red #881518. The page background is the soft lavender
   tint of the VICA website (#F6F1F8); body copy stays a dark neutral so it meets WCAG AA on it,
   and magenta-on-lavender is used for headings only.
   Type: Helvetica Neue / Arial / sans-serif; headings are bold (Helvetica Neue 75 Bold).
   Every colour lives in the :root tokens below — add no hex values elsewhere in this file. */

:root {
  /* Brand */
  --vf-primary: #A22280;          /* magenta */
  --vf-primary-dark: #7F1A64;     /* hover / active magenta */
  --vf-primary-tint: #F3E4EF;     /* magenta at ~12% on white: hover washes, tinted cards */
  --vf-secondary: #0871B9;        /* blue: informational */
  --vf-secondary-dark: #065A93;
  --vf-secondary-tint: #E3EFF8;
  --vf-purple: #6F2576;           /* brand purple: text on the lime signature element */
  --vf-accent: #C1D82F;           /* lime: one signature element per screen */
  --vf-accent-dark: #ABC122;
  /* Surfaces and text */
  --vf-bg: #F6F1F8;               /* lavender page background */
  --vf-surface: #ffffff;
  --vf-border: #E6DFEA;
  --vf-table-head: #FAF7FB;
  --vf-input-border: #CFC6D4;
  --vf-text: #141D23;
  --vf-muted: #5F6368;
  --vf-neutral-tint: #E7E4EA;     /* draft / other chips */
  --vf-neutral-text: #3E4247;
  /* Status */
  --vf-status-approved: #006838;
  --vf-status-pending: #FBBF0E;
  --vf-status-rejected: #C61E4A;
  --vf-status-overdue: #881518;
  --vf-status-rejected-tint: #FBE4EA;
  --vf-danger: var(--vf-status-rejected);
  /* Shape */
  --vf-radius-card: 1rem;
  --vf-radius-control: 0.5rem;
  --vf-shadow-1: 0 1px 12px rgba(162, 34, 128, 0.06);
  --vf-focus-ring: rgba(162, 34, 128, 0.2);
  /* Bootstrap remaps */
  --bs-body-bg: var(--vf-bg);
  --bs-body-color: var(--vf-text);
  --bs-body-font-family: "Helvetica Neue", Arial, sans-serif;
  --bs-primary: var(--vf-primary);
  --bs-primary-rgb: 162, 34, 128;
  --bs-secondary: var(--vf-secondary);
  --bs-secondary-rgb: 8, 113, 185;
  --bs-success: var(--vf-status-approved);
  --bs-success-rgb: 0, 104, 56;
  --bs-danger: var(--vf-status-rejected);
  --bs-danger-rgb: 198, 30, 74;
  --bs-warning: var(--vf-status-pending);
  --bs-warning-rgb: 251, 191, 14;
  --bs-info: var(--vf-secondary);
  --bs-info-rgb: 8, 113, 185;
  --bs-link-color: var(--vf-primary);
  --bs-link-color-rgb: 162, 34, 128;
  --bs-link-hover-color: var(--vf-primary-dark);
  --bs-link-hover-color-rgb: 127, 26, 100;
  --bs-border-color: var(--vf-border);
}

html {
  font-size: 14px;
  position: relative;
  min-height: 100%;
}

@media (min-width: 768px) {
  html { font-size: 16px; }
}

body {
  font-family: "Helvetica Neue", Arial, sans-serif;
  background-color: var(--vf-bg);
  color: var(--vf-text);
}

/* Headings: Helvetica Neue 75 Bold, magenta. Keep titles to two lines and no trailing full stop. */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: 700;
  color: var(--vf-primary);
  letter-spacing: 0;
}

/* ---- App shell: fixed magenta sidebar (desktop) / offcanvas (mobile), scrolling main area ---- */
.vf-app { min-height: 100vh; }
.vf-sidebar {
  --vf-sidebar-w: 240px;
  background-color: var(--vf-primary);
  color: #ffffff;
}
aside.vf-sidebar {
  width: var(--vf-sidebar-w);
  flex: 0 0 var(--vf-sidebar-w);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.offcanvas.vf-sidebar {
  --bs-offcanvas-width: 280px;
  --bs-offcanvas-bg: var(--vf-primary);
  --bs-offcanvas-color: #ffffff;
  --bs-offcanvas-border-width: 0;
}
.offcanvas.vf-sidebar .offcanvas-header { padding: 0.35rem 1rem 0.35rem 0; }
.vf-main {
  min-width: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background-color: var(--vf-bg);
}

/* Brand: the standalone VICA mark (currentColor) followed by the product name as plain text. */
.vf-brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 1.1rem 1.25rem;
  color: #ffffff;
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: 0;
  line-height: 1.2;
  text-decoration: none;
}
.vf-brand-mark { width: 28px; height: 28px; flex: 0 0 28px; }
.vf-brand:hover { color: #ffffff; opacity: 0.92; }
.vf-brand:focus-visible { outline: 2px solid #ffffff; outline-offset: -2px; }

/* Grouped navigation: the active item is a white pill with magenta text (magenta navigation, reversed). */
.vf-nav { padding: 0.25rem 0.75rem 1rem; }
.vf-nav-group + .vf-nav-group { margin-top: 1.1rem; }
.vf-nav-label {
  padding: 0 0.75rem;
  margin-bottom: 0.35rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}
.vf-nav-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--vf-radius-control);
  color: rgba(255, 255, 255, 0.92);
  font-weight: 500;
  text-decoration: none;
}
.vf-nav-link:hover { background-color: rgba(255, 255, 255, 0.12); color: #ffffff; }
.vf-nav-link.active {
  background-color: #ffffff;
  color: var(--vf-primary);
  font-weight: 700;
}
.vf-nav-link.active::before {
  content: "";
  position: absolute;
  left: -0.75rem;
  top: 0.4rem;
  bottom: 0.4rem;
  width: 3px;
  border-radius: 2px;
  background-color: #ffffff;
}
.vf-nav-link:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
.vf-nav-link.active:focus-visible { outline-color: var(--vf-accent); }
.vf-nav-icon { width: 18px; height: 18px; flex: 0 0 18px; }

/* User + sign out, pinned to the bottom of the sidebar */
.vf-sidebar-footer {
  margin-top: auto;
  padding: 1rem 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.vf-user-name { font-size: 0.9rem; font-weight: 600; color: #ffffff; }
.vf-user-role { font-size: 0.78rem; color: rgba(255, 255, 255, 0.78); }
.vf-signout {
  width: 100%;
  padding: 0.35rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--vf-radius-control);
  background: none;
  color: #ffffff;
  font-weight: 500;
}
.vf-signout:hover { background-color: rgba(255, 255, 255, 0.12); color: #ffffff; }
.vf-signout:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }

/* Slim top bar: hamburger + brand on mobile; brand only on anonymous pages */
.vf-topbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 3.25rem;
  padding: 0.4rem 0.75rem;
  background-color: var(--vf-surface);
  border-bottom: 1px solid var(--vf-border);
}
.vf-topbar .vf-brand { padding: 0.25rem 0.5rem; color: var(--vf-primary); }
.vf-topbar .vf-brand:hover { color: var(--vf-primary-dark); opacity: 1; }
.vf-topbar .vf-brand:focus-visible { outline-color: var(--vf-primary); outline-offset: 2px; }
.vf-topbar-anon { padding-left: 1rem; }
.vf-menu-btn {
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--vf-border);
  color: var(--vf-primary);
  line-height: 1;
}
.vf-menu-btn:hover { background-color: var(--vf-primary-tint); color: var(--vf-primary); }

/* Content area */
.vf-content { flex: 1 1 auto; padding: 1.25rem 1rem 3rem; }
.vf-container { max-width: 1200px; margin: 0 auto; }
@media (min-width: 768px) {
  .vf-content { padding: 2rem 2rem 3rem; }
}

/* Cards: white, 16px radius, hairline border, soft ambient shadow */
.card {
  background-color: var(--vf-surface);
  border: 1px solid var(--vf-border);
  border-radius: var(--vf-radius-card);
  box-shadow: var(--vf-shadow-1);
}
.card.border-danger { border-color: var(--vf-status-overdue); }
.card.border-warning { border-color: var(--vf-status-pending); }

/* Stat cards */
.vf-stat-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--vf-muted);
}
.vf-stat-value {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.vf-stat-sub { font-size: 0.8rem; color: var(--vf-muted); }

/* Page header: breadcrumb, title, subtitle, one action */
.vf-page-title {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0;
  margin-bottom: 0.15rem;
}
.vf-page-subtitle { font-size: 0.95rem; }
.breadcrumb a { text-decoration: none; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--vf-muted); }
.breadcrumb-item.active { color: var(--vf-muted); }

/* Stat tiles (summary strip above a list) */
.vf-stat-tile .card-body { padding: 1rem 1.25rem; }
.vf-stat-currency { font-size: 1rem; font-weight: 600; color: var(--vf-muted); }

/* Empty state inside a card */
.vf-empty { padding: 3rem 1.5rem; text-align: center; }
.vf-empty-icon { color: var(--vf-primary); }
.vf-empty-title { margin: 1rem 0 0.35rem; font-size: 1.1rem; font-weight: 700; }
.vf-empty-text { max-width: 36rem; margin: 0 auto 1.25rem; }

/* Tinted summary chips (finance row) */
.vf-chip-card {
  border: 1px solid var(--vf-border);
  border-radius: var(--vf-radius-card);
  background-color: var(--vf-primary-tint);
  padding: 0.9rem 1.1rem;
}
.vf-chip-card.vf-chip-danger { background-color: var(--vf-status-rejected-tint); border-color: var(--vf-status-rejected); }
.vf-chip-card.vf-chip-danger .vf-stat-label,
.vf-chip-card.vf-chip-danger .vf-stat-value { color: var(--vf-status-overdue); }
.vf-chip-card .vf-stat-value { font-size: 1.25rem; }

/* Tables: horizontal dividers only, subtle header, tabular numbers */
.table { --bs-table-color: var(--vf-text); }
.table thead th {
  background-color: var(--vf-table-head);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--vf-muted);
  border-bottom: 1px solid var(--vf-border);
}
.table td {
  border-color: var(--vf-border);
  font-variant-numeric: tabular-nums;
}
.table-danger { --bs-table-bg: var(--vf-status-rejected-tint); --bs-table-color: var(--vf-text); }
.card .table { margin-bottom: 0; }
.card .table > :not(caption) > * > * { padding: 0.65rem 1rem; }

/* Section cards that wrap tables */
.vf-table-card .card-header {
  background-color: var(--vf-surface);
  border-bottom: 1px solid var(--vf-border);
  border-radius: var(--vf-radius-card) var(--vf-radius-card) 0 0;
  font-weight: 600;
  padding: 0.9rem 1rem;
}

/* ---- Buttons ----
   .btn-vf-primary   magenta, white text: the one primary action on a page.
   .btn-vf-secondary white, magenta border and text: every other action, including print links.
   .btn-vf-signature lime, purple text: the single signature element on a screen (Purchases: "New purchase request").
   .vf-add           prepends "+" to any of the three.
   Legacy Bootstrap classes used by untouched forms resolve to the same system: .btn-success and
   .btn-primary are magenta (never lime), .btn-outline-success/.btn-outline-primary are magenta outlines,
   .btn-danger/.btn-outline-danger are crimson. */
.btn-vf-primary, .btn-vf-secondary, .btn-vf-signature {
  --bs-btn-padding-y: 0.5rem;
  --bs-btn-padding-x: 1rem;
  --bs-btn-font-weight: 500;
}
.btn-vf-primary {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: var(--vf-primary);
  --bs-btn-border-color: var(--vf-primary);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: var(--vf-primary-dark);
  --bs-btn-hover-border-color: var(--vf-primary-dark);
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: var(--vf-primary-dark);
  --bs-btn-active-border-color: var(--vf-primary-dark);
  --bs-btn-disabled-color: #ffffff;
  --bs-btn-disabled-bg: var(--vf-primary);
  --bs-btn-disabled-border-color: var(--vf-primary);
}
.btn-vf-secondary {
  --bs-btn-color: var(--vf-primary);
  --bs-btn-bg: var(--vf-surface);
  --bs-btn-border-color: var(--vf-primary);
  --bs-btn-hover-color: var(--vf-primary-dark);
  --bs-btn-hover-bg: var(--vf-primary-tint);
  --bs-btn-hover-border-color: var(--vf-primary-dark);
  --bs-btn-active-color: var(--vf-primary-dark);
  --bs-btn-active-bg: var(--vf-primary-tint);
  --bs-btn-active-border-color: var(--vf-primary-dark);
  --bs-btn-disabled-color: var(--vf-muted);
  --bs-btn-disabled-bg: var(--vf-surface);
  --bs-btn-disabled-border-color: var(--vf-border);
}
.btn-vf-signature {
  --bs-btn-color: var(--vf-purple);
  --bs-btn-bg: var(--vf-accent);
  --bs-btn-border-color: var(--vf-accent);
  --bs-btn-hover-color: var(--vf-purple);
  --bs-btn-hover-bg: var(--vf-accent-dark);
  --bs-btn-hover-border-color: var(--vf-accent-dark);
  --bs-btn-active-color: var(--vf-purple);
  --bs-btn-active-bg: var(--vf-accent-dark);
  --bs-btn-active-border-color: var(--vf-accent-dark);
  --bs-btn-disabled-color: var(--vf-purple);
  --bs-btn-disabled-bg: var(--vf-accent);
  --bs-btn-disabled-border-color: var(--vf-accent);
  --bs-btn-font-weight: 700;
}
.btn-vf-primary.vf-add::before,
.btn-vf-secondary.vf-add::before,
.btn-vf-signature.vf-add::before { content: "+"; margin-right: 0.4rem; font-weight: 700; }
.btn-vf-primary:focus-visible,
.btn-vf-secondary:focus-visible,
.btn-vf-signature:focus-visible { outline: 2px solid var(--vf-primary); outline-offset: 2px; }

.btn { border-radius: var(--vf-radius-control); font-weight: 500; }
.btn-success, .btn-primary {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: var(--vf-primary);
  --bs-btn-border-color: var(--vf-primary);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: var(--vf-primary-dark);
  --bs-btn-hover-border-color: var(--vf-primary-dark);
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: var(--vf-primary-dark);
  --bs-btn-active-border-color: var(--vf-primary-dark);
  --bs-btn-disabled-color: #ffffff;
  --bs-btn-disabled-bg: var(--vf-primary);
  --bs-btn-disabled-border-color: var(--vf-primary);
}
.btn-outline-success, .btn-outline-primary {
  --bs-btn-color: var(--vf-primary);
  --bs-btn-border-color: var(--vf-primary);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: var(--vf-primary);
  --bs-btn-hover-border-color: var(--vf-primary);
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: var(--vf-primary-dark);
  --bs-btn-active-border-color: var(--vf-primary-dark);
}
.btn-danger {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: var(--vf-status-rejected);
  --bs-btn-border-color: var(--vf-status-rejected);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: var(--vf-status-overdue);
  --bs-btn-hover-border-color: var(--vf-status-overdue);
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: var(--vf-status-overdue);
  --bs-btn-active-border-color: var(--vf-status-overdue);
}
.btn-outline-danger {
  --bs-btn-color: var(--vf-status-rejected);
  --bs-btn-border-color: var(--vf-status-rejected);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: var(--vf-status-rejected);
  --bs-btn-hover-border-color: var(--vf-status-rejected);
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: var(--vf-status-overdue);
  --bs-btn-active-border-color: var(--vf-status-overdue);
}
.btn-outline-secondary {
  --bs-btn-color: var(--vf-neutral-text);
  --bs-btn-border-color: var(--vf-input-border);
  --bs-btn-hover-color: var(--vf-primary);
  --bs-btn-hover-bg: var(--vf-primary-tint);
  --bs-btn-hover-border-color: var(--vf-primary);
  --bs-btn-active-color: var(--vf-primary);
  --bs-btn-active-bg: var(--vf-primary-tint);
  --bs-btn-active-border-color: var(--vf-primary);
}
a { color: var(--vf-primary); }
a:hover { color: var(--vf-primary-dark); }
.form-control, .form-select {
  background-color: var(--vf-surface); /* Bootstrap defaults inputs to --bs-body-bg, which is now lavender */
  border-radius: var(--vf-radius-control);
  border-color: var(--vf-input-border);
}
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: var(--vf-primary);
  box-shadow: 0 0 0 0.25rem var(--vf-focus-ring);
}
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus {
  box-shadow: 0 0 0 0.25rem var(--vf-focus-ring);
}
.form-check-input:checked { background-color: var(--vf-primary); border-color: var(--vf-primary); }

/* ---- Status chips ----
   Solid fills, text colour chosen for AA: white on green/crimson/dark red/blue, dark on golden and neutral.
   .vf-chip-approved  approved, paid, cleared, accepted, active season
   .vf-chip-pending   pending, submitted, due soon, planning season
   .vf-chip-rejected  rejected
   .vf-chip-overdue   overdue (aging buckets)
   .vf-chip-info      informational: open advance, ordered/delivered, season badge
   .vf-chip-neutral   draft, closed, fully utilised, anything else */
.badge {
  border-radius: 50rem;
  font-weight: 600;
  padding: 0.4em 0.75em;
}
.vf-chip {
  display: inline-block;
  border-radius: 50rem;
  padding: 0.35em 0.75em;
  font-size: 0.78em;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  vertical-align: baseline;
  color: #ffffff;
  background-color: var(--vf-neutral-text);
}
.vf-chip-approved { background-color: var(--vf-status-approved); color: #ffffff; }
.vf-chip-pending { background-color: var(--vf-status-pending); color: var(--vf-text); }
.vf-chip-rejected { background-color: var(--vf-status-rejected); color: #ffffff; }
.vf-chip-overdue { background-color: var(--vf-status-overdue); color: #ffffff; }
.vf-chip-info { background-color: var(--vf-secondary); color: #ffffff; }
.vf-chip-neutral { background-color: var(--vf-neutral-tint); color: var(--vf-neutral-text); }
/* Any Bootstrap badge still in a view resolves to the same palette. */
.badge.bg-success { background-color: var(--vf-status-approved) !important; color: #ffffff; }
.badge.bg-danger { background-color: var(--vf-status-rejected) !important; color: #ffffff; }
.badge.bg-warning { background-color: var(--vf-status-pending) !important; color: var(--vf-text); }
.badge.bg-secondary { background-color: var(--vf-neutral-tint) !important; color: var(--vf-neutral-text); }
.badge.bg-primary { background-color: var(--vf-primary) !important; color: #ffffff; }
.badge.bg-info { background-color: var(--vf-secondary) !important; color: #ffffff; }

/* Alerts follow the card language; informational alerts are blue, success is dark green. */
.alert { border-radius: var(--vf-radius-card); }
.alert-info {
  --bs-alert-color: var(--vf-secondary-dark);
  --bs-alert-bg: var(--vf-secondary-tint);
  --bs-alert-border-color: var(--vf-secondary);
  --bs-alert-link-color: var(--vf-secondary-dark);
}
.alert-success { --bs-alert-color: var(--vf-status-approved); --bs-alert-link-color: var(--vf-status-approved); }
.alert-danger { --bs-alert-color: var(--vf-status-overdue); --bs-alert-link-color: var(--vf-status-overdue); }
.alert-warning { --bs-alert-link-color: var(--vf-primary); }

.text-muted, .form-text { color: var(--vf-muted) !important; }

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}