/* ===================================
   Poterie — Light/Dark Theme CSS
   Redouté-inspired: elegant serif typography,
   natural color palette, smooth animations
   =================================== */

/* === Theme Variables === */
.light {
  --bg-page: #faf9f6;
  --bg-card: #ffffff;
  --bg-accent: #e8f0e4;
  --bg-accent-subtle: #f0f5ee;
  --bg-muted: #f5f5f5;
  --text-primary: #2d3a2d;
  --text-secondary: #5a6b5a;
  --border-color: #e0e6e0;
  --border-thriller: #e8716e;
  --border-filler: #6aaa6a;
  --border-spiller: #6b9dc2;
  --text-thriller: #c04040;
  --text-filler: #3d7a3d;
  --text-spiller: #4a7ba0;
  --text-accent: #4a7b50;
  --btn-primary-bg: #4a7b50;
  --btn-primary-text: #ffffff;
  --btn-primary-hover: #3d6543;
  --vine-color: rgba(74, 123, 80, 0.2);
}

.dark {
  --bg-page: #1a1f1a;
  --bg-card: #252d25;
  --bg-accent: #3a4a3a;
  --bg-accent-subtle: #2e3a2e;
  --bg-muted: #2a322a;
  --text-primary: #e8ede8;
  --text-secondary: #a0b0a0;
  --border-color: #3a453a;
  --border-thriller: #e8716e;
  --border-filler: #8aca8a;
  --border-spiller: #7ebcd2;
  --text-thriller: #f09090;
  --text-filler: #a0daa0;
  --text-spiller: #a0d0f0;
  --text-accent: #80c080;
  --btn-primary-bg: #5a9a60;
  --btn-primary-text: #1a1f1a;
  --btn-primary-hover: #70b078;
  --vine-color: rgba(128, 192, 128, 0.15);
}

/* === Base === */
.bot-font-serif { font-family: 'Playfair Display', Georgia, serif; }
.bot-font-body { font-family: 'Lora', Georgia, serif; }

/* === Theme Classes (applied via Alpine) === */
body.light {
  background-color: var(--bg-page);
  color: var(--text-primary);
  /* Watercolor paper / Redouté parchment effect */
  background-image:
    radial-gradient(ellipse at 15% 25%, rgba(180, 140, 120, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse at 85% 75%, rgba(160, 130, 110, 0.08) 0%, transparent 55%),
    radial-gradient(ellipse at 55% 15%, rgba(170, 145, 125, 0.06) 0%, transparent 50%);
}
body.dark {
  background-color: var(--bg-page);
  color: var(--text-primary);
}

/* === Utility === */
.bot-bg-card { background-color: var(--bg-card); }
.bot-bg-accent { background-color: var(--bg-accent); }
.bot-bg-accent-subtle { background-color: var(--bg-accent-subtle); }
.bot-bg-muted { background-color: var(--bg-muted); }
.bot-text-primary { color: var(--text-primary); }
.bot-text-secondary { color: var(--text-secondary); }
.bot-text-accent { color: var(--text-accent); }
.bot-text-thriller { color: var(--text-thriller); }
.bot-text-filler { color: var(--text-filler); }
.bot-text-spiller { color: var(--text-spiller); }
.bot-border { border-color: var(--border-color); }
.bot-border-thriller { border-color: var(--border-thriller); }
.bot-border-filler { border-color: var(--border-filler); }
.bot-border-spiller { border-color: var(--border-spiller); }

/* Rounded / shadows */
.bot-rounded { border-radius: 0.75rem; }
.bot-rounded-2xl { border-radius: 1rem; }
.bot-rounded-full { border-radius: 9999px; }
.bot-shadow { box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04); }
.bot-shadow-xl { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.05); }

body.dark .bot-shadow { box-shadow: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2); }
body.dark .bot-shadow-xl { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.4), 0 4px 6px -4px rgba(0,0,0,0.3); }
body.dark .bot-option-card { background-color: var(--bg-card); }
body.dark .bot-select { color-scheme: dark; }
body.dark .fst-pot-rim, body.dark .fst-bed-rim { stroke-opacity: 0.5; }
body.dark .fst-pot-soil, body.dark .fst-bed-soil { fill-opacity: 0.2; }

/* === Buttons === */
.bot-btn-primary {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 500;
  transition: all 0.2s ease;
  display: inline-block;
  text-align: center;
}
.bot-btn-primary:hover {
  background-color: var(--btn-primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(74, 123, 80, 0.2);
}

.bot-btn-secondary {
  background-color: transparent;
  color: var(--btn-primary-bg);
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 500;
  border: 1px solid var(--border-color);
  transition: all 0.2s ease;
}
.bot-btn-secondary:hover {
  background-color: var(--bg-accent);
}

.bot-btn-ghost {
  color: var(--text-secondary);
  padding: 0.5rem 1rem;
  transition: color 0.2s ease;
}
.bot-btn-ghost:hover { color: var(--text-primary); }

.bot-btn-lg { font-size: 1.1rem; padding: 0.9rem 2rem; }
.bot-btn-sm { padding: 0.4rem 0.8rem; font-size: 0.85rem; }

.bot-btn-icon {
  color: var(--text-primary);
  border-radius: 9999px;
  transition: background-color 0.2s ease;
  border: none;
  background: none;
  cursor: pointer;
}
.bot-btn-icon:hover { background-color: var(--bg-accent); }

.bot-btn-theme {
  background-color: var(--bg-accent);
  color: var(--text-accent);
  font-size: 0.85rem;
  cursor: pointer;
  border: none;
  transition: all 0.2s ease;
}
.bot-btn-theme:hover { background-color: var(--bg-accent-subtle); }

/* === Links === */
.bot-link {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.2s ease;
  font-weight: 500;
}
.bot-link:hover { color: var(--text-accent); }

/* === Navigation === */
.bot-nav {
  background-color: var(--bg-card);
  border-bottom: 1px solid var(--border-color);
  backdrop-filter: blur(8px);
  background-color: color-mix(in srgb, var(--bg-card) 90%, transparent);
}

/* === Badges === */
.bot-badge {
  display: inline-block;
  background-color: var(--bg-accent);
  color: var(--text-accent);
  padding: 0.25rem 0.6rem;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 500;
  margin-right: 0.25rem;
}

.bot-badge-thriller {
  background-color: #fce8e8;
  color: var(--text-thriller);
}
.bot-badge-filler {
  background-color: #e8f5e8;
  color: var(--text-filler);
}
.bot-badge-spiller {
  background-color: #e8f0f8;
  color: var(--text-spiller);
}

body.dark .bot-badge-thriller { background-color: #3a2020; }
body.dark .bot-badge-filler { background-color: #1e301e; }
body.dark .bot-badge-spiller { background-color: #1e2830; }

/* === Form Elements === */
.bot-label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
  font-size: 0.9rem;
}

.bot-select {
  appearance: none;
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  padding: 0.6rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.95rem;
  transition: border-color 0.2s ease;
}
.bot-select:focus {
  border-color: var(--text-accent);
  outline: none;
  box-shadow: 0 0 0 2px var(--bg-accent);
}

/* === Option Cards === */
.bot-option-card {
  cursor: pointer;
  border: 2px solid var(--border-color);
  border-radius: 0.75rem;
  padding: 1rem;
  text-align: center;
  transition: all 0.2s ease;
  display: block;
}
.bot-option-card:has(input:checked) {
  border-color: var(--btn-primary-bg);
  background-color: var(--bg-accent);
}
.bot-option-card:has(input:checked) .bot-option-text {
  font-weight: 600;
  color: var(--text-primary);
}
.bot-option-text {
  font-size: 0.85rem;
  color: var(--text-secondary);
  transition: all 0.2s ease;
}

/* === SVG Layout Elements === */
.fst-svg {
  width: 100%;
  max-width: 400px;
}

.fst-pot-rim {
  stroke: var(--border-color);
  fill: var(--bg-card);
  stroke-opacity: 0.5;
}
.fst-pot-soil {
  fill: var(--text-secondary);
  fill-opacity: 0.04;
}
.fst-pot-inner {
  stroke: var(--border-color);
  stroke-opacity: 0.4;
}
.fst-bed-rim {
  stroke: var(--border-color);
  fill: var(--bg-card);
  stroke-opacity: 0.5;
}
.fst-bed-soil {
  fill: var(--text-secondary);
  fill-opacity: 0.03;
}
body.dark .fst-pot-rim, body.dark .fst-bed-rim { stroke-opacity: 0.4; }
body.dark .fst-pot-soil, body.dark .fst-bed-soil { fill-opacity: 0.15; }

.fst-plant-circle {
  fill: var(--bg-card);
  stroke: var(--border-color);
  stroke-width: 0.8;
}
.fst-plant-lg {
  fill: var(--bg-accent-subtle);
  stroke: var(--border-thriller);
  stroke-width: 1.5;
}

.fst-emoji {
  font-size: 18px;
  font-family: serif;
}
.fst-emoji-lg {
  font-size: 24px;
}
.fst-label {
  font-size: 10px;
  fill: var(--text-secondary);
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500;
  /* Subtle outline for readability over any background */
  stroke: var(--bg-accent);
  stroke-width: 1.5px;
  paint-order: stroke;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.06));
}
.fst-sublabel {
  font-size: 8px;
  fill: var(--text-secondary);
  font-family: 'Lora', Georgia, serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  stroke: var(--bg-card);
  stroke-width: 2px;
  paint-order: stroke;
}

.fst-cascade {
  stroke: var(--border-spiller);
  stroke-width: 1.5;
  stroke-dasharray: 3,5;
  opacity: 0.6;
}

.fst-legend-bg {
  fill: var(--bg-card);
  stroke: var(--border-color);
  stroke-width: 1;
}
.fst-legend-thriller { fill: var(--border-thriller); }
.fst-legend-filler { fill: var(--border-filler); }
.fst-legend-spiller { fill: var(--border-spiller); }
.fst-legend-label {
  font-size: 11px;
  fill: var(--text-secondary);
  font-family: 'Lora', Georgia, serif;
}

.fst-bed-label {
  font-size: 11px;
  fill: var(--text-secondary);
  font-family: 'Lora', Georgia, serif;
  font-style: italic;
}

.fst-grid line {
  stroke: var(--border-color);
}

/* === Vine Animations === */
.vine-path {
  stroke: var(--vine-color);
  transition: stroke-dashoffset 0.5s ease;
}

.vine-leaf {
  fill: var(--vine-color);
  transition: opacity 0.3s ease;
}

.vine-berry {
  fill: var(--vine-color);
  opacity: 0.8;
}

.vine-leaves {
  transition: opacity 0.8s ease;
}

/* === Animations === */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes vineGrow {
  from { stroke-dashoffset: 100%; }
  to { stroke-dashoffset: 0; }
}

.animate-fade-in {
  animation: fadeInUp 0.3s ease-out;
}

/* === HTMX Loading Indicator === */
/* Alpine.js handles the spinner visibility — see planner.html x-data */
.htmx-request {} /* HTMX marker class, no default style */

/* Dark-mode SVG text readability */
body.dark .fst-label {
  fill: #f0f4f0;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
  font-weight: 700;
}
body.dark .fst-sublabel {
  fill: #c5d5c5;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.4));
}
body.dark .fst-plant-circle {
  fill: rgba(58, 74, 58, 0.7);
  stroke-width: 1.5;
}
body.dark .fst-emoji {
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}

/* === Print Page (/planner/print) === */
.print-page {
  max-width: 36rem;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
  font-family: 'Lora', Georgia, serif;
  color: #333;
}
.print-header {
  text-align: center;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid #333;
}
.print-header h1 {
  font-family: 'Playfair Display', Georgia, serif;
  margin: 0 0 0.5rem;
}
.print-meta {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.badge {
  padding: 0.2rem 0.6rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
}
.badge-z { background: #7FBA63; }
.badge-s { background: #E1833A; }
.badge-so { background: #E8B846; color: #333; }
.badge-l { background: #B4D164; }
.notes { font-style: italic; color: #666; margin-top: 0.75rem; font-size: 0.9rem; }

.fst-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}
.fst-card {
  padding: 1rem;
  border: 2px solid #ddd;
  border-radius: 0.75rem;
  text-align: center;
}
.fst-card h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1rem;
  margin: 0 0 0.75rem;
}
.thriller-card { border-color: #e8716e; }
.thriller-card h2 { color: #c04040; }
.filler-card { border-color: #6aaa6a; }
.filler-card h2 { color: #3d7a3d; }
.spiller-card { border-color: #6b9dc2; }
.spiller-card h2 { color: #4a7ba0; }

.plant-list { text-align: left; }
.plant-entry {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0;
  font-size: 0.85rem;
  border-bottom: 1px solid #eee;
}
.plant-entry:last-child { border-bottom: none; }
.plant-entry .emoji { font-size: 1rem; }
.plant-entry .name { font-weight: 600; flex: 1; }
.plant-entry .botanical { font-style: italic; color: #888; font-size: 0.75rem; }
.plant-entry .qty { font-weight: 700; font-size: 0.85rem; }

.instructions {
  background: #f9f9f9;
  padding: 1rem 1.25rem;
  border-radius: 0.75rem;
  margin-bottom: 2rem;
}
.instructions h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1rem;
  margin: 0 0 0.75rem;
  color: #333;
}
.instructions ul {
  margin: 0;
  padding-left: 1.25rem;
  font-size: 0.85rem;
  color: #555;
  line-height: 1.7;
}

footer { text-align: center; color: #999; font-size: 0.8rem; }
footer .back-link {
  display: inline-block;
  margin-top: 1rem;
  color: #4a7b50;
  text-decoration: none;
  font-weight: 500;
}
footer .back-link:hover { text-decoration: underline; }

/* Print-specific: hide navigation/footer, just the page */
@media print {
  .bot-nav, footer, .vine-svg, .botanical-decor { display: none !important; }
  .print-page { max-width: 100%; padding: 0; }
  .back-link { display: none !important; }
  body { background: white !important; }
}

/* === Print Styles (legacy media query from fst.html) === */
@page {
  margin: 1.5cm;
  size: A4;
}

@media print {
  /* Reset body for paper */
  body { background: white !important; color: #222 !important; font-size: 11pt; }

  /* Hide structural UI */
  .bot-nav, footer, #vine-svg, .botanical-decor, .vine-path { display: none !important; }

  /* Hide planner form */
  form#fst-form { display: none !important; }

  /* When printing — hide all result-area children EXCEPT shopping list */
  #result-area > *:not(#shopping-list-print) { display: none !important; }

  /* Hide buttons in print */
  #shopping-list-print button { display: none !important; }

  /* Force shopping list visible with proper layout */
  #shopping-list-print { display: block !important; }
  #shopping-list-print .flex { display: flex !important; }
  #shopping-list-print .grid { display: grid !important; }
  #shopping-list-print ul { display: block !important; list-style: disc; margin-left: 1.5rem !important; }
  #shopping-list-print li { display: list-item !important; }

  /* Card styling for paper */
  .bot-bg-card {
    border: 1px solid #ddd;
    background: white !important;
    box-shadow: none !important;
  }
  .bot-border-b { border-bottom: 2px solid #333 !important; }
  .bot-border-thriller { border-color: #c04040 !important; }
  .bot-border-filler { border-color: #3d7a3d !important; }
  .bot-border-spiller { border-color: #4a7ba0 !important; }
  .bot-bg-accent-subtle { background: #f5f7f5 !important; }
  .bot-bg-muted { background: #f9f9f9 !important; }

  /* Ensure colors print nicely */
  .bot-text-thriller { color: #c04040 !important; }
  .bot-text-filler { color: #3d7a3d !important; }
  .bot-text-spiller { color: #4a7ba0 !important; }
  .bot-text-primary { color: #222 !important; }
  .bot-text-secondary { color: #555 !important; }
}