/* 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;
}

:root {
  --vc-primary: #003b70;
  --vc-primary-hover: #055297;
  --vc-secondary: #0c6e0f;
  --vc-secondary-hover: #0a5a0c;
  --vc-bg: #f8f9ff;
  --vc-surface: #ffffff;
  --vc-text: #0d1c2f;
  --vc-text-muted: #424751;
  --vc-border: #c2c6d2;
  --vc-danger: #ba1a1a;

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

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);
}
.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;
}
.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(0, 59, 112, 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(194, 198, 210, 0.3);
  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: #e6eeff;
  color: var(--vc-primary);
}

/* 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 */
.hero-section {
  position: relative;
  padding: 160px 0 120px;
  overflow: hidden;
  color: white;
}
.hero-bg {
  position: absolute;
  top: -20px;
  left: -20px;
  right: -20px;
  bottom: -20px;
  background-size: cover;
  background-position: center;
  filter: blur(3px);
  z-index: -2;
}
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 59, 112, 0.75);
  z-index: -1;
}
.hero-section h1 {
  color: white;
}

/* Stats & Pricing */
.stats-section {
  background-color: #e6eeff;
  border-top: 1px solid rgba(194, 198, 210, 0.3);
  border-bottom: 1px solid rgba(194, 198, 210, 0.3);
}
.stat-number {
  font-size: 3rem;
  font-weight: 700;
  color: var(--vc-primary);
}
.pricing-card.pro {
  border: 2px solid var(--vc-primary);
  position: relative;
}
.badge-popular {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--vc-primary);
  color: white;
  padding: 4px 16px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
}

/* Tabs */
.nav-pills .nav-link {
  border-radius: 50px;
  color: var(--vc-text-muted);
  padding: 10px 30px;
  font-weight: 600;
}
.nav-pills .nav-link.active {
  background-color: var(--vc-primary);
  color: white;
}

/* CTA */
.cta-section {
  background-color: var(--vc-primary);
  color: white;
  padding: 80px 0;
}
.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(194, 198, 210, 0.3);
}
.split-card {
  max-width: 1000px;
  width: 100%;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid rgba(194, 198, 210, 0.3);
  box-shadow: 0 10px 30px rgba(0, 59, 112, 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: #e6eeff;
}
.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(0, 59, 112, 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;
}

/* 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;
}
.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 */