/* ══════════════════════════════════════════════════════════════════════
   Blooming Meadows Farm — Main Stylesheet
   Shared by dashboard.html and portal.html
   ══════════════════════════════════════════════════════════════════════ */

/* ── Brand Tokens ─────────────────────────────────────────────────── */
:root {
  /* Sage green — nav, accents, badges */
  --bmf-sage:        #9AAB87;
  --bmf-sage-dark:   #7A8F6A;
  --bmf-sage-light:  #D8E8D0;
  --bmf-sage-xlight: #EDF5E8;

  /* Warm brown — headings, body text, primary buttons */
  --bmf-brown:       #603F10;
  --bmf-brown-light: #8B6432;
  --bmf-brown-xlight:#BF9462;

  /* Cream — page backgrounds */
  --bmf-cream:       #F8F8E7;
  --bmf-cream-dark:  #EEEECE;

  /* Sky blue — section backgrounds, selected states, borders, highlights */
  --bmf-sky:         #EAF3FA;
  --bmf-sky-mid:     #C8DFF0;
  --bmf-sky-dark:    #4A7FA0;

  /* Supporting tones */
  --bmf-gold:        #A0842E;
  --bmf-gold-light:  #FEF9E7;
  --bmf-white:       #FFFFFF;
  --bmf-gray:        #7A7A6E;
  --bmf-gray-light:  #CCCCBB;
  --bmf-border:      #D4C9A0;
  --bmf-error:       #A93226;
  --bmf-error-bg:    #FDEDEC;
  --bmf-success:     #2E7D4F;
  --bmf-success-bg:  #E8F5EE;
  --bmf-warn:        #8B5000;
  --bmf-warn-bg:     #FEF3E2;

  /* Typography — Gilda Display headings, PT Serif body */
  --font-body:    'PT Serif', Georgia, serif;
  --font-heading: 'Gilda Display', Georgia, serif;
  --font-mono:    'Courier New', monospace;

  /* Spacing */
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 16px;
  --sp-lg: 24px;
  --sp-xl: 40px;

  /* Borders */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,.10), 0 2px 4px rgba(0,0,0,.06);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
}

/* ── Reset ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  background:  var(--bmf-cream);
  color:       var(--bmf-brown);
  line-height: 1.6;
  min-height:  100vh;
}

/* ── Typography ───────────────────────────────────────────────────── */
h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--bmf-brown); }
h1 { font-size: 2rem;   line-height: 1.2; }
h2 { font-size: 1.4rem; line-height: 1.3; }
h3 { font-size: 1.1rem; line-height: 1.4; }
h4 { font-size: 0.95rem; }

p { margin-bottom: var(--sp-md); color: var(--bmf-brown); }
a { color: var(--bmf-sage-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Utility Classes ──────────────────────────────────────────────── */
.hidden    { display: none !important; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
}
.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-muted  { color: var(--bmf-gray); font-size: 0.875rem; }
.text-error  { color: var(--bmf-error); }
.text-success{ color: var(--bmf-success); }
.flex        { display: flex; }
.flex-col    { display: flex; flex-direction: column; }
.items-center{ align-items: center; }
.justify-between { justify-content: space-between; }
.gap-sm      { gap: var(--sp-sm); }
.gap-md      { gap: var(--sp-md); }
.mt-sm       { margin-top: var(--sp-sm); }
.mt-md       { margin-top: var(--sp-md); }
.mb-md       { margin-bottom: var(--sp-md); }

/* ── Shared Brand Banner / Map Assets ─────────────────────────────── */
.bmf-brand-banner {
  background: var(--bmf-sky);
  border: 1px solid var(--bmf-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  line-height: 0;
  margin-bottom: var(--sp-lg);
  overflow: hidden;
}

.bmf-brand-banner img {
  display: block;
  height: clamp(96px, 16vw, 190px);
  object-fit: cover;
  object-position: center;
  width: 100%;
}

.bmf-logo-img {
  display: block;
  height: auto;
  max-width: 100%;
}

.bmf-logo-card {
  align-items: center;
  background: var(--bmf-sky);
  border: 1px solid rgba(212,201,160,.75);
  border-radius: var(--radius-md);
  display: flex;
  justify-content: center;
  padding: var(--sp-sm);
}

.bmf-logo-card .bmf-logo-img {
  max-height: 110px;
  object-fit: contain;
}

.bmf-farm-layout {
  background: var(--bmf-white);
  border: 1px solid var(--bmf-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.bmf-farm-layout img {
  display: block;
  height: auto;
  width: 100%;
}

.bmf-farm-layout figcaption {
  color: var(--bmf-gray);
  font-size: .82rem;
  line-height: 1.4;
  padding: var(--sp-sm) var(--sp-md);
}

.bmf-visual-grid {
  display: grid;
  gap: var(--sp-md);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bmf-visual-card {
  background: var(--bmf-white);
  border: 1px solid var(--bmf-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.bmf-visual-card img {
  aspect-ratio: 4 / 3;
  display: block;
  object-fit: cover;
  width: 100%;
}

.bmf-visual-card-body {
  padding: var(--sp-md);
}

.bmf-visual-card-body h3 {
  font-size: 1.05rem;
  margin: 0 0 var(--sp-xs);
}

.bmf-visual-card-body p {
  color: var(--bmf-gray);
  font-size: .88rem;
  margin: 0;
}

@media (max-width: 720px) {
  .bmf-visual-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Buttons ──────────────────────────────────────────────────────── */
.btn {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--sp-sm);
  padding:         10px 20px;
  border:          none;
  border-radius:   var(--radius-pill);
  font-family:     var(--font-body);
  font-size:       0.9rem;
  font-weight:     600;
  cursor:          pointer;
  text-decoration: none;
  transition:      background 0.15s, transform 0.1s, box-shadow 0.15s;
  white-space:     nowrap;
}
.btn:active { transform: scale(0.98); }
.btn:disabled {
  opacity: 0.55;
  cursor:  not-allowed;
  transform: none;
}

.btn-primary {
  background: var(--bmf-brown);
  color:      var(--bmf-white);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover:not(:disabled) {
  background: var(--bmf-brown-light);
  box-shadow: var(--shadow-md);
}

.btn-secondary {
  background: var(--bmf-cream-dark);
  color:      var(--bmf-brown);
  border:     1px solid var(--bmf-border);
}
.btn-secondary:hover:not(:disabled) { background: var(--bmf-border); }

.btn-danger {
  background: var(--bmf-error-bg);
  color:      var(--bmf-error);
  border:     1px solid rgba(169,50,38,.25);
}
.btn-danger:hover:not(:disabled) { background: #fad4d0; }

.btn-ghost {
  background: transparent;
  color:      var(--bmf-sage-dark);
  padding:    8px 14px;
}
.btn-ghost:hover:not(:disabled) { background: var(--bmf-sage-xlight); }

.btn-sm { padding: 6px 14px; font-size: 0.8rem; }
.btn-full { width: 100%; justify-content: center; }

/* ── Form Elements ────────────────────────────────────────────────── */
.form-group { margin-bottom: var(--sp-md); }
.form-label {
  display:     block;
  font-size:   0.85rem;
  font-weight: 600;
  color:       var(--bmf-brown);
  margin-bottom: var(--sp-xs);
}
.form-input,
.form-select,
.form-textarea {
  width:        100%;
  padding:      10px 14px;
  border:       1.5px solid var(--bmf-border);
  border-radius: var(--radius-sm);
  font-family:  var(--font-body);
  font-size:    0.9rem;
  color:        var(--bmf-brown);
  background:   var(--bmf-white);
  transition:   border-color 0.15s, box-shadow 0.15s;
  appearance:   none;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline:      none;
  border-color: var(--bmf-sage);
  box-shadow:   0 0 0 3px rgba(92,138,92,.18);
}
.form-textarea { min-height: 100px; resize: vertical; }
.form-hint {
  font-size:  0.78rem;
  color:      var(--bmf-gray);
  margin-top: 4px;
}
.form-error-msg {
  font-size:  0.78rem;
  color:      var(--bmf-error);
  margin-top: 4px;
}

/* ── Card ─────────────────────────────────────────────────────────── */
.card {
  background:    var(--bmf-white);
  border:        1px solid var(--bmf-border);
  border-radius: var(--radius-md);
  box-shadow:    var(--shadow-sm);
  padding:       var(--sp-lg);
}
.card-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   var(--sp-md);
  padding-bottom:  var(--sp-md);
  border-bottom:   1px solid var(--bmf-cream-dark);
}
.card-title { font-family: var(--font-heading); font-size: 1.1rem; }

/* ── Status Badges ────────────────────────────────────────────────── */
.badge {
  display:       inline-block;
  padding:       3px 10px;
  border-radius: var(--radius-pill);
  font-size:     0.72rem;
  font-weight:   700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.badge-pending   { background: var(--bmf-gold-light);  color: var(--bmf-gold);    border: 1px solid rgba(160,132,46,.3);  }
.badge-confirmed { background: var(--bmf-sage-light);  color: var(--bmf-sage-dark); border: 1px solid rgba(122,143,106,.3); }
.badge-completed { background: var(--bmf-success-bg);  color: var(--bmf-success);  border: 1px solid rgba(30,132,73,.25); }
.badge-cancelled { background: var(--bmf-error-bg);    color: var(--bmf-error);    border: 1px solid rgba(169,50,38,.25); }
.badge-archived  { background: #F5F5F5;                color: var(--bmf-gray);     border: 1px solid #CCC; }

/* ── Alert Banners ────────────────────────────────────────────────── */
.alert {
  padding:       var(--sp-md);
  border-radius: var(--radius-sm);
  border-left:   4px solid;
  margin-bottom: var(--sp-md);
  font-size:     0.88rem;
}
.alert-error   { background: var(--bmf-error-bg);   border-color: var(--bmf-error);   color: var(--bmf-error);   }
.alert-success { background: var(--bmf-success-bg); border-color: var(--bmf-success); color: var(--bmf-success); }
.alert-warn    { background: var(--bmf-warn-bg);    border-color: var(--bmf-warn);    color: var(--bmf-warn);    }
.alert-info    { background: var(--bmf-sage-xlight);border-color: var(--bmf-sage);    color: var(--bmf-sage-dark); }

/* ── Offline Banner ───────────────────────────────────────────────── */
#offline-banner {
  display:         none;
  position:        fixed;
  top:             0;
  left:            0;
  right:           0;
  padding:         12px var(--sp-lg);
  background:      var(--bmf-warn);
  color:           var(--bmf-white);
  font-size:       0.875rem;
  font-weight:     600;
  text-align:      center;
  z-index:         9999;
  box-shadow:      var(--shadow-md);
}
#offline-banner.visible { display: block; }

/* ── Spinner / Loading ────────────────────────────────────────────── */
.spinner {
  display:       inline-block;
  width:         20px;
  height:        20px;
  border:        3px solid rgba(255,255,255,.35);
  border-top:    3px solid currentColor;
  border-radius: 50%;
  animation:     spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.loading-overlay {
  position:        fixed;
  inset:           0;
  background:      rgba(250,247,242,.75);
  display:         flex;
  align-items:     center;
  justify-content: center;
  z-index:         999;
}
.loading-overlay .spinner {
  width:       36px;
  height:      36px;
  border-width: 4px;
  border-color: rgba(61,94,53,.3);
  border-top-color: var(--bmf-sage-dark);
}

/* ── Responsive Helpers ───────────────────────────────────────────── */
@media (max-width: 768px) {
  :root { --sp-lg: 16px; --sp-xl: 24px; }
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.2rem; }
}

/* ── Print ────────────────────────────────────────────────────────── */
@media print {
  .btn, #offline-banner, nav { display: none !important; }
  body { background: white; color: black; }
}