/* =====================================================================
   Seed Savers Network Kenya — brand override
   ---------------------------------------------------------------------
   Loaded AFTER the DashLite skin (theme-*.css) so equal-specificity
   rules win without !important spam.
   ALL brand colour flows from the :root tokens below — retint the whole
   app by editing these seven values only.
   ===================================================================== */
:root {
  --ss-green:        #2F4B26; /* deep forest — primary brand            */
  --ss-green-dark:   #233A1C; /* hover / pressed                        */
  --ss-green-accent: #6CA84F; /* active-nav highlight (legible on dark) */
  --ss-green-soft:   #EAF1E6; /* soft bg / active row tint / toast bg   */
  --ss-green-line:   #C9DBBE; /* borders, dividers                      */
  --ss-danger:       #E5532E; /* failure toast / destructive            */
  --ss-warning:      #E0A92E; /* warning toast / overdue                */

  /* Bootstrap remap so anything using --bs-primary turns green too */
  --bs-primary:           #2F4B26;
  --bs-primary-rgb:       47, 75, 38;
  --bs-link-color:        #2F4B26;
  --bs-link-color-rgb:    47, 75, 38;
  --bs-link-hover-color:  #233A1C;
}

/* ---- Primary / outline buttons ------------------------------------ */
.btn-primary {
  background-color: var(--ss-green);
  border-color: var(--ss-green);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
  background-color: var(--ss-green-dark);
  border-color: var(--ss-green-dark);
  color: #fff;
}
.btn-primary.btn-dim {
  color: var(--ss-green);
  background-color: var(--ss-green-soft);
  border-color: var(--ss-green-soft);
}
.btn-outline-primary {
  color: var(--ss-green);
  border-color: var(--ss-green);
}
.btn-outline-primary:hover {
  background-color: var(--ss-green);
  border-color: var(--ss-green);
  color: #fff;
}

/* ---- Links / text-primary ----------------------------------------- */
.text-primary { color: var(--ss-green) !important; }
.link-list a:hover, .nk-news-item:hover .nk-news-text .icon { color: var(--ss-green); }

/* ---- Sidebar active nav (the small thing that matters) ------------- */
.nk-menu-link:hover,
.nk-menu-link:hover .nk-menu-icon,
.nk-menu-item.active > .nk-menu-link,
.nk-menu-item.active > .nk-menu-link .nk-menu-icon,
.nk-menu-item.current-menu > .nk-menu-link,
.nk-menu-item.current-menu > .nk-menu-link .nk-menu-icon,
.nk-menu-sub .active > .nk-menu-link,
.nk-menu-main .nk-menu-item.active > .nk-menu-link,
.nk-menu-main .nk-menu-item.current-menu > .nk-menu-link,
.active > .nk-menu-link {
  color: var(--ss-green-accent);
}
/* left accent bar + soft tint for the active top-level item */
.nk-menu > .nk-menu-item.active > .nk-menu-link,
.nk-menu > .nk-menu-item.current-menu > .nk-menu-link {
  background: var(--ss-green-soft);
  box-shadow: inset 3px 0 0 var(--ss-green);
  border-radius: 4px;
}
/* dark-sidebar variant: keep tint subtle, accent stays bright */
.is-dark .nk-menu > .nk-menu-item.active > .nk-menu-link,
.is-dark .nk-menu > .nk-menu-item.current-menu > .nk-menu-link {
  background: rgba(108, 168, 79, .14);
  box-shadow: inset 3px 0 0 var(--ss-green-accent);
}

/* ---- Tabs / pagination -------------------------------------------- */
.nav-tabs .nav-link:focus,
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.active .nav-link { color: var(--ss-green); }
.page-link:hover { color: var(--ss-green); }
.page-item.active .page-link { background: var(--ss-green); border-color: var(--ss-green); }

/* ---- Avatars (header / user-card) --------------------------------- */
.user-avatar, [class^=user-avatar]:not([class*=-group]) {
  background: var(--ss-green);
}

/* ---- Progress / primary badges ------------------------------------ */
.progress-bar { background-color: var(--ss-green); }
.badge.bg-primary, .badge-primary { background-color: var(--ss-green) !important; }

/* ---- Form focus ring ---------------------------------------------- */
.form-control:focus, .form-select:focus {
  border-color: var(--ss-green-accent);
  box-shadow: 0 0 0 3px rgba(47, 75, 38, .12);
}

/* =====================================================================
   Welcome greeting block (dashboard)
   ===================================================================== */
.seed-greeting { margin-bottom: 1.25rem; }
.seed-greeting .seed-greeting__hi { color: var(--ss-green); font-weight: 600; }
.seed-greeting .seed-greeting__meta { color: #8094ae; font-size: .8125rem; }
.seed-greeting .seed-greeting__cta { color: var(--ss-green-dark); font-weight: 500; }

/* =====================================================================
   Breadcrumb (<x-breadcrumb>) — class referenced but never styled
   ===================================================================== */
.seed-breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .35rem; padding: 0; margin: 0 0 1rem; list-style: none;
  font-size: .8125rem;
}
.seed-breadcrumb li { display: inline-flex; align-items: center; gap: .35rem; }
.seed-breadcrumb a { color: #8094ae; text-decoration: none; }
.seed-breadcrumb a:hover { color: var(--ss-green); }
.seed-breadcrumb .crumb-sep { font-size: .7rem; color: #b6c6e3; }
.seed-breadcrumb li.active { color: var(--ss-green); font-weight: 500; }

/* =====================================================================
   Empty state (<x-empty-state>) — classes referenced but never styled
   ===================================================================== */
.empty-state-block { color: #8094ae; }
.empty-state-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--ss-green-soft); color: var(--ss-green);
  font-size: 1.75rem;
}
.empty-state-title { margin: .25rem 0; color: #364a63; font-weight: 600; }
.empty-state-text  { margin: 0 auto; max-width: 420px; font-size: .875rem; }

/* =====================================================================
   Toasts (<x-toast-host>)
   ===================================================================== */
.seed-toast-host {
  position: fixed; top: 1rem; right: 1rem; z-index: 1080;
  display: flex; flex-direction: column; gap: .5rem;
  max-width: min(360px, calc(100vw - 2rem));
  pointer-events: none;
}
.seed-toast {
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .75rem .85rem; border-radius: 8px;
  background: #fff; color: #364a63;
  box-shadow: 0 6px 24px rgba(43, 55, 72, .18);
  border-left: 4px solid var(--ss-green);
  opacity: 0; transform: translateY(-6px);
  transition: opacity .25s ease, transform .25s ease;
}
.seed-toast.show { opacity: 1; transform: none; }
.seed-toast.hide { opacity: 0; transform: translateY(-6px); }
.seed-toast__icon  { font-size: 1.15rem; line-height: 1.4; }
.seed-toast__body  { flex: 1; font-size: .875rem; }
.seed-toast__title { font-weight: 600; display: block; }
.seed-toast__close {
  background: none; border: 0; color: #8094ae; cursor: pointer;
  font-size: 1rem; line-height: 1; padding: 0 .1rem;
}
.seed-toast--success { border-left-color: var(--ss-green); }
.seed-toast--success .seed-toast__icon { color: var(--ss-green); }
.seed-toast--error   { border-left-color: var(--ss-danger); }
.seed-toast--error .seed-toast__icon   { color: var(--ss-danger); }
.seed-toast--warning { border-left-color: var(--ss-warning); }
.seed-toast--warning .seed-toast__icon { color: var(--ss-warning); }
.seed-toast--info    { border-left-color: var(--ss-green-accent); }
.seed-toast--info .seed-toast__icon    { color: var(--ss-green-accent); }

@media (prefers-reduced-motion: reduce) {
  .seed-toast { transition: none; }
}