/* Bootstrap scopes tab show/hide to *direct* children of .tab-content:
   `.tab-content > .tab-pane`. The profile edit tabs wrap two tab-panes
   (Personal Details + Professional/Farm Info) inside one shared <form>
   so both submit together in a single POST -- that form sits between
   .tab-content and the panes, so they're a level deeper than Bootstrap
   expects. This descendant-selector rule has identical specificity to
   Bootstrap's, so being declared later (style.css loads after
   bootstrap.min.css) lets it win and keeps show/hide working at any
   nesting depth, including the plain direct-child case elsewhere. */
.tab-content .tab-pane {
  display: none;
}
.tab-content .tab-pane.active {
  display: block;
}

/* Brand palette, sampled from the actual VetConnect mark (green cattle/goat
   + blue map-pin) rather than an unrelated accent color -- the site used to
   be almost entirely --vc-primary blue with the logo's green barely
   appearing anywhere outside the icon itself. Primary and secondary are
   swapped here to match the mark, where green leads. --vc-gold comes from
   the golden-hour tone in the hero photograph, used sparingly as the one
   warm accent. */
:root {
  --vc-primary: #1b6b3a;
  --vc-primary-hover: #14522c;
  --vc-secondary: #1b5fa8;
  --vc-secondary-hover: #144a85;
  --vc-gold: #c68a1e;
  --vc-gold-hover: #a9750f;
  --vc-bg: #f5f6f1;
  --vc-surface: #ffffff;
  --vc-text: #16241c;
  --vc-text-muted: #55635b;
  --vc-border: #dde2d6;
  --vc-danger: #ba1a1a;

  --radius-btn: 0.5rem; /* 8px */
  --radius-card: 1rem; /* 16px */
}

/* Bootstrap's own "primary" utilities (.text-primary, .bg-primary,
   .border-primary, .btn-check:checked, plain link color, the focus ring)
   are driven by these --bs-* variables, completely separate from the
   --vc-* tokens above. They default to Bootstrap's blue (#0d6efd).
   Templates across the app reach for the plain Bootstrap utility as often
   as the --vc-primary-backed .text-primary-custom one, so retinting only
   our own classes would leave Bootstrap's blue showing through on dozens
   of pages -- most visibly on dashboard headings. Overriding the
   variables themselves fixes every one of those usages in one place. */
:root {
  --bs-primary: var(--vc-primary);
  --bs-primary-rgb: 27, 107, 58;
  --bs-primary-text-emphasis: var(--vc-primary-hover);
  --bs-primary-bg-subtle: #e3ede6;
  --bs-primary-border-subtle: #a9c7b2;
  --bs-link-color: var(--vc-primary);
  --bs-link-color-rgb: 27, 107, 58;
  --bs-link-hover-color: var(--vc-primary-hover);
  --bs-link-hover-color-rgb: 20, 82, 44;
}

body {
  font-family: "Inter", sans-serif;
  background-color: var(--vc-bg);
  color: var(--vc-text);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  color: var(--vc-primary);
}
/* Display-scale headings get the heavier, tighter treatment -- the site's
   one typeface earns some personality at hero size instead of reaching for
   a second display face over a slow connection. */
h1,
.display-1,
.display-2,
.display-3,
.display-4,
.display-5 {
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.08;
}
.text-muted {
  color: var(--vc-text-muted) !important;
}
.text-primary-custom {
  color: var(--vc-primary) !important;
}
.text-secondary-custom {
  color: var(--vc-secondary) !important;
}

/* Buttons */
.btn {
  border-radius: var(--radius-btn);
  font-weight: 500;
  padding: 0.6rem 1.5rem;
  transition: all 0.2s ease-in-out;
}
.btn-primary {
  background-color: var(--vc-primary);
  border-color: var(--vc-primary);
  color: white;
}
.btn-primary:hover {
  background-color: var(--vc-primary-hover);
  border-color: var(--vc-primary-hover);
  color: white;
}
.btn-outline-primary {
  color: var(--vc-primary);
  border-color: var(--vc-primary);
}
.btn-outline-primary:hover {
  background-color: var(--vc-primary);
  color: white;
}
/* Bootstrap's own .btn-secondary is flat grey and carries no brand meaning.
   The public site uses it for the "I'm a vet" hero action sitting beside
   the primary "I'm a farmer" one -- both need to read as first-class
   choices, so this points it at the mark's blue instead. */
.btn-secondary {
  background-color: var(--vc-secondary);
  border-color: var(--vc-secondary);
  color: white;
}
.btn-secondary:hover {
  background-color: var(--vc-secondary-hover);
  border-color: var(--vc-secondary-hover);
  color: white;
}
.btn-outline-secondary {
  color: var(--vc-text-muted);
  border-color: var(--vc-border);
}
.btn-outline-secondary:hover {
  background-color: #f8f9fa;
  color: var(--vc-text);
  border-color: var(--vc-border);
}

/* Form Controls */
.form-control,
.form-select {
  border-radius: var(--radius-btn);
  padding: 0.75rem 1rem;
  border-color: var(--vc-border);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--vc-primary);
  box-shadow: 0 0 0 0.25rem rgba(27, 107, 58, 0.15);
}
.input-group-text {
  background-color: transparent;
  border-color: var(--vc-border);
  color: var(--vc-text-muted);
}
.input-group > .input-group-text {
  border-right: none;
  border-top-left-radius: var(--radius-btn);
  border-bottom-left-radius: var(--radius-btn);
}
.input-group > .form-control {
  border-left: none;
  padding-left: 0;
}

/* General Sections & Cards */
section {
  padding: 80px 0;
}
.pt-hero {
  padding-top: 120px;
}
/* NOTE: no `height: 100%` here, deliberately.
   It used to be set globally so that cards sitting side by side in a grid
   would come out the same height. That works for a single card per column,
   but breaks badly the moment a column stacks two or more: each card then
   resolves 100% against the column's full height, so a column holding two
   cards becomes twice as tall as its content and every card grows a large
   empty tail. It looked like a rendering glitch on the Health Check detail
   page and hit nine templates in total.
   Equal-height grid cards now opt in explicitly with Bootstrap's `h-100`
   utility, which is the idiomatic way to express that intent and does not
   leak onto every card in the project. */
.card {
  background-color: var(--vc-surface);
  border: 1px solid rgba(221, 226, 214, 0.5);
  border-radius: var(--radius-card);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.card.hover-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}
.feature-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 1rem;
  background-color: rgba(27, 107, 58, 0.1);
  color: var(--vc-primary);
}
.feature-icon.feature-icon-blue {
  background-color: rgba(27, 95, 168, 0.1);
  color: var(--vc-secondary);
}
.feature-icon.feature-icon-gold {
  background-color: rgba(198, 138, 30, 0.12);
  color: var(--vc-gold-hover);
}

/* Navbar (public site) */
.navbar {
  background-color: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--vc-border);
}
.navbar-brand {
  font-weight: 700;
  color: var(--vc-primary) !important;
}
.nav-link {
  color: var(--vc-text-muted);
  font-weight: 500;
}
.nav-link:hover,
.nav-link.active {
  color: var(--vc-primary);
}

/* Hero Section
   A left-aligned split (copy / photo) rather than a centered headline over
   a blurred, darkened background photo -- the photo is real reportage of
   the actual service (a vet examining a farmer's cow at sunrise), so it
   earns a clear, unblurred frame instead of being reduced to texture. */
.hero-section {
  position: relative;
  padding: 150px 0 80px;
  overflow: hidden;
  background-color: var(--vc-bg);
}
.hero-photo-frame {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 24px 48px -24px rgba(22, 36, 28, 0.35);
}
.hero-photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  color: var(--vc-text-muted);
  font-size: 0.9rem;
}
.hero-trust-row span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.hero-trust-row i {
  color: var(--vc-primary);
}

/* A thin rolling-hills contour -- Rwanda's own terrain, and the same
   landscape visible behind the vet in the hero photo -- used once as a
   section divider instead of a generic decorative shape. */
.hills-divider {
  display: block;
  width: 100%;
  height: 48px;
}
.hills-divider path {
  fill: none;
  stroke: var(--vc-border);
  stroke-width: 1.5;
}
.hills-divider path.hill-accent {
  stroke: var(--vc-gold);
  opacity: 0.6;
}

/* Stats & Pricing */
.stats-section {
  background-color: var(--vc-bg);
}
.stats-row {
  display: flex;
  flex-wrap: wrap;
}
/* Hairline dividers only once the four stats sit in a single row -- in the
   2x2 mobile layout a left border on every column reads as a stray line
   through the middle of a wrapped pair rather than a divider. */
@media (min-width: 768px) {
  .stats-row > div {
    border-left: 1px solid var(--vc-border);
    padding: 0 1.5rem;
  }
  .stats-row > div:first-child {
    border-left: none;
  }
}
.stat-number {
  font-size: 2.75rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--vc-primary);
}
.pricing-card.pro {
  background-color: var(--vc-primary);
  color: white;
  border: 1px solid var(--vc-primary);
}
.pricing-card.pro h2,
.pricing-card.pro h4 {
  color: white;
}
.pricing-card.pro p,
.pricing-card.pro .text-muted {
  color: rgba(255, 255, 255, 0.75) !important;
}
.pricing-card.pro .btn-primary {
  background-color: white;
  border-color: white;
  color: var(--vc-primary);
}
.pricing-card.pro .btn-primary:hover {
  background-color: rgba(255, 255, 255, 0.9);
}
.pricing-tier-label {
  font-size: 0.8rem;
  color: var(--vc-primary);
  font-weight: 600;
}
.pricing-card.pro .pricing-tier-label {
  color: rgba(255, 255, 255, 0.85);
}

/* Tabs: an underline pair (Farmers / Vets), not a pill toggle -- there are
   only two audiences here, so this reads as "two views of the same page"
   rather than a rounded filter control. */
.nav-underline-tabs {
  border-bottom: 1px solid var(--vc-border);
  gap: 2rem;
}
.nav-underline-tabs .nav-link {
  color: var(--vc-text-muted);
  font-weight: 600;
  padding: 0.75rem 0;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
}
.nav-underline-tabs .nav-link.active {
  color: var(--vc-primary);
  border-bottom-color: var(--vc-primary);
  background: none;
}

/* CTA */
.cta-section {
  background-color: var(--vc-primary);
  color: white;
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}
.cta-section h2 {
  color: white;
}

/* Auth & Onboarding Layouts */
.auth-wrapper {
  flex-grow: 1;
  padding-top: 100px;
  padding-bottom: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.auth-card {
  max-width: 450px;
  width: 100%;
  border-radius: var(--radius-card);
  border: 1px solid rgba(221, 226, 214, 0.5);
}
.split-card {
  max-width: 1000px;
  width: 100%;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid rgba(221, 226, 214, 0.5);
  box-shadow: 0 10px 30px rgba(27, 107, 58, 0.08);
}

/* Role Selection Cards */
.role-card input[type="radio"] {
  display: none;
}
.role-card .card {
  border: 2px solid var(--vc-border);
  cursor: pointer;
  transition: all 0.2s ease;
  height: 100%;
  border-radius: var(--radius-card);
}
.role-card input[type="radio"]:checked + .card {
  border-color: var(--vc-primary);
  background-color: rgba(27, 107, 58, 0.08);
}
.role-card input[type="radio"]:checked + .card i,
.role-card input[type="radio"]:checked + .card span {
  color: var(--vc-primary) !important;
}
.role-card .check-icon {
  display: none;
  position: absolute;
  top: 10px;
  right: 10px;
  color: var(--vc-primary);
  font-size: 1.25rem;
}
.role-card input[type="radio"]:checked + .card .check-icon {
  display: block;
}

/* List Group for Onboarding */
.list-group-custom .list-group-item {
  border: 1px solid var(--vc-border);
  margin-bottom: 1rem;
  border-radius: var(--radius-card) !important;
  transition: all 0.2s;
  padding: 1.25rem;
}
.list-group-custom .list-group-item:hover {
  border-color: var(--vc-primary);
  background-color: #f8f9ff;
  cursor: pointer;
}

/* Password Reset Step Animation */
.step-container {
  display: none;
  animation: fadeIn 0.3s ease-in-out;
}
.step-container.active {
  display: block;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===========================================================================
   Authenticated dashboard shell: fixed sidebar + sticky topbar
   ---------------------------------------------------------------------------
   Layout model: the sidebar is taken OUT of normal flow entirely
   (position: fixed) rather than being a Bootstrap grid column. The content
   column next to it is offset with a plain margin-left instead of relying
   on matching col-md-9/col-lg-10 breakpoints to the sidebar's col-md-3/
   col-lg-2 — one fixed number (280px) in one place, instead of two
   breakpoint-matched column widths that have to stay in sync.
   =========================================================================== */

.sidebar-fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 280px;
  height: 100vh;
  background-color: var(--vc-surface);
  border-right: 1px solid var(--vc-border);
  z-index: 1030; /* below Bootstrap's offcanvas (1045) and modal (1055) */
}
.sidebar-brand {
  padding: 1.5rem;
}

.sidebar-nav {
  flex: 1 1 auto;
  overflow-y: auto;
  padding-top: 0.5rem;
}
.sidebar-bottom {
  padding: 0.75rem 1.5rem 1.25rem;
  border-top: 1px solid var(--vc-border);
}

/* Sidebar links: left-border + tinted-background active state (replaces
   the old filled-background active state) so it reads as "currently here"
   without looking like a pressed button. */
.sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--vc-text-muted);
  font-weight: 500;
  padding: 0.75rem 1.5rem;
  border-left: 4px solid transparent;
  text-decoration: none;
  transition: all 0.2s;
}
/* Bootstrap's base `a` styles underline both the resting and :hover
   states by default -- the rule above only overrides the resting state,
   so :hover needs its own text-decoration:none too, or the underline
   reappears the moment you hover a sidebar link. */
.sidebar-link:hover,
.sidebar-link:focus {
  text-decoration: none;
}
.sidebar-link:hover {
  background-color: var(--vc-bg);
  color: var(--vc-primary);
}
.sidebar-link.active {
  background-color: rgba(27, 107, 58, 0.08);
  color: var(--vc-primary);
  border-left-color: var(--vc-primary);
  font-weight: 600;
}
.sidebar-link i {
  width: 1.25rem;
  text-align: center;
}

/* Content column sits to the right of the fixed sidebar on desktop; full
   width on mobile, where the sidebar becomes the offcanvas instead. */
.content-with-sidebar {
  margin-left: 0;
}
@media (min-width: 992px) {
  .content-with-sidebar {
    margin-left: 280px;
  }
}

/* base.html renders <main class="flex-grow-1 p-4 d-flex flex-column">, which
   makes every top-level block on a page a flex item. Flex items default to
   flex-shrink: 1, so on any page with more than one such block (e.g. a tall
   table card followed by a pagination nav) the browser squashes the taller
   item below its content height — the content then overflows its own box and
   paints over whatever follows it, which is the footer. Pinning shrink off
   means these blocks always keep their natural height and main grows instead.
   This bit the Health Checks list; it would have bitten every future page
   that grows a second block. */
.content-with-sidebar > main > * {
  flex-shrink: 0;
}

/* Sticky, not fixed: this header lives INSIDE .content-with-sidebar, so
   position:sticky keeps it correctly bound to that column's left/right
   edges as the page scrolls. position:fixed would instead anchor it to
   the viewport's left edge (x=0), sliding it back underneath the sidebar
   and undoing the content offset above — sticky is what makes "starts
   after the sidebar" work without a manual pixel offset. */
.topbar-auth {
  position: sticky;
  top: 0;
  z-index: 1020;
}

/* FAQ accordion: Bootstrap's own accordion variables bake its default blue
   into inline SVG chevrons and the expanded-state background/focus ring.
   Left alone, opening a question is the one moment on the page that shows
   the old, unrelated brand color. */
.accordion {
  --bs-accordion-active-bg: rgba(27, 107, 58, 0.06);
  --bs-accordion-active-color: var(--vc-primary);
  --bs-accordion-border-color: var(--vc-border);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(27, 107, 58, 0.15);
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2355635b'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231b6b3a'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* Toast fade effect */
.toast {
    opacity: 1 !important;
    transition: opacity 0.3s ease;
}
.toast.hide {
    opacity: 0 !important;
}
/* ===== Profile Tabs (Edit Profile / Password) ===== */
.profile-hero {
  border-radius: var(--radius-card);
}
.profile-avatar-ring {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--vc-primary);
  padding: 3px;
  background: #fff;
}

.profile-field-group {
  margin-bottom: 1.75rem;
}
.profile-field-group:last-child {
  margin-bottom: 0;
}
.form-control-plaintext.bg-light {
  border-radius: var(--radius-btn);
  padding: 0.75rem 1rem !important;
  color: var(--vc-text-muted);
}
.field-hint {
  font-size: 0.78rem;
  color: var(--vc-text-muted);
  margin-top: 0.35rem;
}
.status-chip {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
}
/* Profile-card section headers ("Contact", "Clinic / Office", "Account"...).
   Previously tracked-out ALL CAPS, which reads as generic template chrome.
   A hairline rule under sentence-case text marks the same "new section
   starts here" boundary without shouting it. */
.section-label {
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--vc-text-muted);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--vc-border);
}
.main-content {
    flex: 1 0 auto;
}
.card-header .nav-tabs {
  margin-bottom: -1px;
}
/* Social Media Brand Colors on Hover */
.social-icon {
  transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;
  text-decoration: none;
}

.social-icon:hover {
  transform: translateY(-2px);
}

/* Official Brand Colors */
.social-icon.wa:hover { color: #25D366 !important; }       /* WhatsApp Green */
.social-icon.fb:hover { color: #1877F2 !important; }       /* Facebook Blue */
.social-icon.tw:hover { color: #1DA1F2 !important; }       /* Twitter/X Blue */
.social-icon.ig:hover { color: #E4405F !important; }       /* Instagram Pink */
.social-icon.li:hover { color: #0A66C2 !important; }       /* LinkedIn Blue */
.social-icon.yt:hover { color: #FF0000 !important; }       /* YouTube Red */