/* =====================================================================
   KILIMO STORE - DESIGN SYSTEM
   ---------------------------------------------------------------------
   Own identity, built for this brief: a Kenyan agrovet & livestock
   supply store. Palette draws from the harvest, not a stock template -
   deep cassava-leaf green for structure, marigold for action/price,
   soil brown for the veterinary/service line. Display type is a warm
   serif (Fraunces) paired with a clean grotesque (Work Sans) for body
   text, and a mono face (IBM Plex Mono) for SKUs, bull codes and
   request numbers - a "stamped warehouse label" signature that shows
   up throughout the product and stock pages.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Work+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root {
  /* Palette */
  --ks-green: #1E4620;
  --ks-green-dark: #12300F;
  --ks-marigold: #E0A100;
  --ks-marigold-dark: #B57F00;
  --ks-soil: #6B4226;
  --ks-soil-light: #F1E6DA;
  --ks-bg: #F6F7F2;
  --ks-white: #FFFFFF;
  --ks-text: #21261F;
  --ks-text-muted: #6B7268;
  --ks-border: #E3E5DC;
  --ks-danger: #B4322E;
  --ks-warn: #C97A16;
  --ks-success: #2C7A3D;
  --ks-info: #2D6E8E;

  /* Layout */
  --ks-radius: 16px;
  --ks-radius-sm: 10px;
  --ks-shadow: 0 10px 30px rgba(30, 70, 32, 0.08);
  --ks-shadow-sm: 0 3px 10px rgba(30, 70, 32, 0.06);

  /* Type */
  --ks-font-display: 'Fraunces', Georgia, serif;
  --ks-font-body: 'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --ks-font-mono: 'IBM Plex Mono', 'Courier New', monospace;
}

* { box-sizing: border-box; }

body {
  background: var(--ks-bg);
  color: var(--ks-text);
  font-family: var(--ks-font-body);
  font-size: 15.5px;
  line-height: 1.55;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ks-font-display);
  font-weight: 600;
  color: var(--ks-text);
  letter-spacing: -0.01em;
}

a { color: var(--ks-green); text-decoration: none; }
a:hover { color: var(--ks-green-dark); }

code, .ks-mono { font-family: var(--ks-font-mono); }

/* ---------------------------------------------------------------------
   Navbar
   --------------------------------------------------------------------- */
.ks-navbar {
  background: var(--ks-green);
  box-shadow: 0 2px 12px rgba(0,0,0,0.12);
}
.ks-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--ks-font-display);
  font-weight: 700;
  font-size: 1.35rem;
  color: #fff !important;
}
.ks-logo-mark {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--ks-marigold);
  color: var(--ks-green-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}
.ks-navbar .nav-link {
  color: rgba(255,255,255,0.85) !important;
  font-weight: 500;
  font-size: 0.92rem;
  padding: 0.5rem 0.9rem !important;
  border-radius: 999px;
  transition: all .15s ease;
}
.ks-navbar .nav-link:hover,
.ks-navbar .nav-link.active {
  background: rgba(255,255,255,0.14);
  color: #fff !important;
}

/* Sub-nav strip (staff back office) */
.ks-subnav {
  background: var(--ks-white);
  border-bottom: 1px solid var(--ks-border);
}
.ks-subnav-link {
  white-space: nowrap;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ks-text-muted);
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  transition: all .15s ease;
}
.ks-subnav-link:hover { background: var(--ks-soil-light); color: var(--ks-soil); }
.ks-subnav-link.active { background: var(--ks-green); color: #fff; }

/* ---------------------------------------------------------------------
   Cards / stats
   --------------------------------------------------------------------- */
.ks-card {
  background: var(--ks-white);
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius);
  box-shadow: var(--ks-shadow-sm);
}
.ks-stat-card { padding: 1.25rem; }
.ks-stat-icon {
  width: 42px; height: 42px;
  border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.15rem;
  margin-bottom: 0.6rem;
}
.ks-stat-icon.bg-green   { background: #E7F0E4; color: var(--ks-success); }
.ks-stat-icon.bg-marigold{ background: #FCEFCB; color: var(--ks-marigold-dark); }
.ks-stat-icon.bg-soil    { background: var(--ks-soil-light); color: var(--ks-soil); }
.ks-stat-icon.bg-info    { background: #E3F0F6; color: var(--ks-info); }
.ks-stat-icon.bg-warn    { background: #FBE9D2; color: var(--ks-warn); }
.ks-stat-label { font-size: 0.8rem; color: var(--ks-text-muted); font-weight: 500; margin-bottom: 0.2rem; }
.ks-stat-value { font-family: var(--ks-font-display); font-size: 1.6rem; font-weight: 700; }

.ks-page-title { font-size: 1.6rem; font-weight: 700; }

.ks-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: #FCEFCB; color: var(--ks-marigold-dark);
  font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em;
  padding: 3px 10px; border-radius: 999px;
}

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */
.btn-ks-primary {
  background: linear-gradient(135deg, var(--ks-marigold) 0%, var(--ks-marigold-dark) 100%);
  border: none; color: var(--ks-green-dark); font-weight: 700;
  border-radius: var(--ks-radius-sm); padding: 0.62rem 1.3rem;
  box-shadow: 0 6px 16px rgba(224, 161, 0, 0.32);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn-ks-primary:hover { transform: translateY(-2px); color: var(--ks-green-dark); box-shadow: 0 10px 20px rgba(224,161,0,0.36); }
.btn-ks-primary:disabled { opacity: .65; transform: none; }

.btn-ks-outline {
  border: 1.5px solid var(--ks-green);
  color: var(--ks-green); font-weight: 600;
  border-radius: var(--ks-radius-sm); background: transparent;
  padding: 0.58rem 1.2rem; transition: all .15s ease;
}
.btn-ks-outline:hover { background: var(--ks-green); color: #fff; }

.btn-ks-dark {
  background: var(--ks-green-dark); color: #fff; font-weight: 600;
  border: none; border-radius: var(--ks-radius-sm); padding: 0.58rem 1.2rem;
}
.btn-ks-dark:hover { background: #0C210A; color: #fff; }

/* ---------------------------------------------------------------------
   Forms
   --------------------------------------------------------------------- */
.ks-input {
  border: 1.5px solid var(--ks-border);
  border-radius: var(--ks-radius-sm);
  padding: 0.55rem 0.85rem;
  font-size: 0.92rem;
  background: var(--ks-white);
}
.ks-input:focus {
  border-color: var(--ks-green);
  box-shadow: 0 0 0 3px rgba(30, 70, 32, 0.12);
  outline: none;
}

/* ---------------------------------------------------------------------
   Signature motif: "sack-stitch" dashed edge, used on the storefront
   hero and receipt-style cards (purchase requests) - a nod to the
   stitched seam on a feed sack / market ticket.
   --------------------------------------------------------------------- */
.ks-stitched {
  position: relative;
  border-top: 2px dashed rgba(255,255,255,0.55);
}
.ks-stitched::before {
  content: "";
  position: absolute; top: -5px; left: 0; right: 0;
  height: 8px;
  background-image: radial-gradient(circle, rgba(255,255,255,0.55) 1.5px, transparent 1.5px);
  background-size: 14px 8px;
  background-repeat: repeat-x;
}
.ks-receipt {
  border-top: 2px dashed var(--ks-border);
  margin-top: 0.75rem;
  padding-top: 0.75rem;
}

/* Hero banner (Vet AI flagship service) */
.ks-banner {
  background: linear-gradient(120deg, var(--ks-green-dark) 0%, var(--ks-green) 60%, #2E5A31 130%);
  color: #fff;
  border-radius: var(--ks-radius);
  padding: 1.9rem 2.1rem;
  box-shadow: var(--ks-shadow);
  position: relative;
  overflow: hidden;
}
.ks-banner::after {
  content: "";
  position: absolute; right: -40px; bottom: -60px;
  width: 220px; height: 220px;
  background: rgba(224, 161, 0, 0.16);
  border-radius: 50%;
}
.ks-banner h3 { color: #fff; margin-bottom: 0.3rem; }
.ks-bull-row {
  display: flex; justify-content: space-between; align-items: center;
  background: rgba(255,255,255,0.12);
  border-radius: var(--ks-radius-sm);
  padding: 0.55rem 0.9rem; margin-bottom: 0.5rem;
}
.ks-bull-row .ks-bull-rank {
  background: var(--ks-marigold); color: var(--ks-green-dark);
  font-family: var(--ks-font-mono); font-weight: 700;
  border-radius: 50%; width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.76rem; margin-right: 0.6rem;
}
.ks-bull-row code { color: #FCEFCB; }

/* Storefront layout */
.ks-category-link {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.55rem 0.8rem; border-radius: var(--ks-radius-sm);
  color: var(--ks-text); font-weight: 500; font-size: 0.92rem;
}
.ks-category-link:hover { background: var(--ks-soil-light); color: var(--ks-soil); }
.ks-category-link.active { background: var(--ks-green); color: #fff; }

.ks-product-card {
  background: var(--ks-white); border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius); overflow: hidden; height: 100%;
  transition: transform .15s ease, box-shadow .15s ease;
}
.ks-product-card:hover { transform: translateY(-3px); box-shadow: var(--ks-shadow); }
.ks-product-img {
  height: 140px; background: var(--ks-bg);
  display: flex; align-items: center; justify-content: center;
  color: var(--ks-text-muted); font-size: 2rem; overflow: hidden;
}
.ks-product-img img { width: 100%; height: 100%; object-fit: cover; }
.ks-product-price { color: var(--ks-marigold-dark); font-weight: 700; font-family: var(--ks-font-display); }
.ks-sku-tag {
  font-family: var(--ks-font-mono);
  font-size: 0.72rem;
  background: var(--ks-soil-light);
  color: var(--ks-soil);
  padding: 1px 7px;
  border-radius: 5px;
  letter-spacing: 0.02em;
}

/* ---------------------------------------------------------------------
   Catalogue toolbar (search / sort / breadcrumb / count)
   --------------------------------------------------------------------- */
.ks-breadcrumb {
  font-size: 0.82rem;
  color: var(--ks-text-muted);
}
.ks-breadcrumb a { color: var(--ks-text-muted); }
.ks-breadcrumb a:hover { color: var(--ks-green); }
.ks-breadcrumb .current { color: var(--ks-text); font-weight: 600; }

.ks-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.ks-sort-select {
  border: 1.5px solid var(--ks-border);
  border-radius: var(--ks-radius-sm);
  padding: 0.45rem 0.8rem;
  font-size: 0.85rem;
  background: var(--ks-white);
  color: var(--ks-text);
}
.ks-sort-select:focus { border-color: var(--ks-green); outline: none; }

.ks-filter-fab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1.5px solid var(--ks-border);
  background: var(--ks-white);
  border-radius: 999px;
  padding: 0.45rem 1rem;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--ks-text);
}

/* Sticky sidebar (desktop only) */
.ks-sidebar-sticky { position: sticky; top: 90px; }

/* ---------------------------------------------------------------------
   Product card v2 - larger image zone with hover zoom, quick specs row,
   stock ribbon, and an inline quantity stepper.
   --------------------------------------------------------------------- */
.ks-product-card-v2 {
  background: var(--ks-white);
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ks-product-card-v2:hover {
  transform: translateY(-4px);
  box-shadow: var(--ks-shadow);
  border-color: rgba(30, 70, 32, 0.15);
}
.ks-product-card-v2 .ks-pimg-wrap {
  position: relative;
  height: 152px;
  background: linear-gradient(150deg, var(--ks-bg) 0%, #ECEEE4 100%);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #C7CBB9;
  font-size: 2.1rem;
}
.ks-product-card-v2 .ks-pimg-wrap img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .35s ease;
}
.ks-product-card-v2:hover .ks-pimg-wrap img { transform: scale(1.07); }
.ks-pimg-ribbon {
  position: absolute; top: 8px; right: 8px;
  font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
  padding: 3px 9px; border-radius: 999px;
}
.ks-pcard-body { padding: 0.9rem 1rem 1rem; display: flex; flex-direction: column; gap: 0.4rem; flex: 1; }
.ks-pcard-cat { font-size: 0.7rem; color: var(--ks-text-muted); text-transform: uppercase; letter-spacing: .03em; }
.ks-pcard-name {
  font-size: 0.93rem; font-weight: 600; color: var(--ks-text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.4em; line-height: 1.2;
}
.ks-pcard-meta { font-size: 0.74rem; color: var(--ks-text-muted); }
.ks-pcard-footer { margin-top: auto; }
.ks-pcard-price-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.55rem; }

.ks-qty-stepper {
  display: inline-flex; align-items: stretch;
  border: 1.5px solid var(--ks-border); border-radius: var(--ks-radius-sm);
  overflow: hidden; height: 36px; flex-shrink: 0;
}
.ks-qty-stepper button {
  width: 30px; border: none; background: var(--ks-bg); color: var(--ks-text);
  font-weight: 700; font-size: 0.95rem; line-height: 1;
}
.ks-qty-stepper button:hover { background: var(--ks-soil-light); }
.ks-qty-stepper input {
  width: 38px; border: none; text-align: center; font-size: 0.85rem; font-weight: 600;
  -moz-appearance: textfield;
}
.ks-qty-stepper input::-webkit-outer-spin-button,
.ks-qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ks-qty-stepper input:focus { outline: none; }

.ks-add-row { display: flex; gap: 0.4rem; }
.ks-add-row .btn-ks-primary { flex: 1; padding: 0.5rem 0.6rem; font-size: 0.85rem; }

/* Empty state */
.ks-empty-state {
  border: 1.5px dashed var(--ks-border);
  border-radius: var(--ks-radius);
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--ks-text-muted);
  background: var(--ks-white);
}
.ks-empty-state i { font-size: 2.2rem; color: var(--ks-border); }

/* ---------------------------------------------------------------------
   Store Keeper catalogue grid (staff-facing) - same card language plus
   an edit affordance on hover.
   --------------------------------------------------------------------- */
.ks-admin-card { position: relative; }
.ks-admin-card .ks-pimg-wrap { cursor: pointer; }
.ks-admin-card .ks-edit-overlay {
  position: absolute; inset: 0;
  background: rgba(18, 48, 15, 0.55);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .18s ease;
  color: #fff; font-weight: 600; font-size: 0.85rem; gap: 0.4rem;
}
.ks-admin-card .ks-pimg-wrap:hover .ks-edit-overlay { opacity: 1; }
.ks-view-toggle .btn { font-size: 0.82rem; }

.ks-service-card {
  border: 1.5px solid var(--ks-border); border-radius: var(--ks-radius);
  padding: 1.1rem 1.25rem; height: 100%; background: var(--ks-white);
}
.ks-service-card.featured { border-color: var(--ks-marigold); background: #FFFBF0; }

/* ---------------------------------------------------------------------
   Tables, alerts, misc
   --------------------------------------------------------------------- */
.table { font-size: 0.92rem; }
.table thead th { border-bottom-width: 1px; font-weight: 600; color: var(--ks-text-muted); }

.ks-footer { color: var(--ks-text-muted); font-size: 0.85rem; text-align: center; padding: 1.75rem 0; }

.ks-animate-in { animation: ksFadeUp .5s ease both; }
@keyframes ksFadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .ks-animate-in { animation: none; }
}

.ks-auth-shell {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, var(--ks-green-dark) 0%, var(--ks-green) 100%);
  padding: 2rem 1rem;
}
.ks-auth-card {
  background: var(--ks-white);
  border-radius: var(--ks-radius);
  box-shadow: 0 25px 60px rgba(0,0,0,0.28);
  padding: 2.2rem;
  width: 100%;
  max-width: 420px;
}

/* ---------- Month-view calendar (includes/calendar.php) ---------- */
.ks-calendar {
  background: var(--ks-white);
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius);
  box-shadow: var(--ks-shadow-sm);
  padding: 1.25rem;
}
.ks-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.9rem;
}
.ks-cal-title {
  font-family: var(--ks-font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--ks-green-dark);
}
.ks-cal-nav {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--ks-border);
  color: var(--ks-green-dark);
  text-decoration: none;
  font-weight: 700;
}
.ks-cal-nav:hover { background: var(--ks-soil-light); }
.ks-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.ks-cal-dow { margin-bottom: 4px; }
.ks-cal-dow-cell {
  text-align: center;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ks-text-muted);
  padding: 0.25rem 0;
}
.ks-cal-cell {
  min-height: 68px;
  border-radius: var(--ks-radius-sm);
  border: 1px solid transparent;
  padding: 0.3rem;
  background: var(--ks-bg);
}
.ks-cal-cell--empty { background: transparent; }
.ks-cal-cell--today { border-color: var(--ks-marigold); background: #fdf6e3; }
.ks-cal-cell--has-events { background: #eaf3ec; }
.ks-cal-daynum {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ks-text-muted);
  margin-bottom: 0.2rem;
}
.ks-cal-cell--today .ks-cal-daynum { color: var(--ks-marigold-dark); }
.ks-cal-event {
  font-size: 0.62rem;
  font-weight: 600;
  padding: 0.1rem 0.35rem;
  border-radius: 5px;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Default fill only applies when no Bootstrap text-bg-* badge class is
   present on the event. Written with :where() (zero specificity) so a
   per-event status colour (text-bg-warning, text-bg-success, etc. -
   see includes/calendar.php) always wins the cascade instead of being
   silently overridden by this rule just because style.css loads after
   bootstrap.min.css. Previously every calendar event rendered the same
   flat green regardless of its actual status. */
:where(.ks-cal-event) {
  background: var(--ks-green);
  color: #fff;
}
.ks-cal-more { font-size: 0.6rem; color: var(--ks-text-muted); font-weight: 600; }

@media (max-width: 576px) {
  .ks-cal-cell { min-height: 44px; }
  .ks-cal-event { display: none; }
  .ks-cal-cell--has-events .ks-cal-daynum::after { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--ks-marigold); margin-left: 4px; }
}