/* Verdant - Garden Planner custom styles (layered on top of Tailwind CSS) */

body {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.grid-pattern {
  background-size: 24px 24px;
  background-image:
    linear-gradient(to right, rgba(0, 0, 0, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
}

.zone-pattern-sun {
  background: radial-gradient(circle, rgba(254, 240, 138, 0.45) 0%, rgba(254, 240, 138, 0.15) 100%);
  border: 2px dashed #eab308;
}

.zone-pattern-partial {
  background: radial-gradient(circle, rgba(254, 215, 170, 0.45) 0%, rgba(254, 215, 170, 0.15) 100%);
  border: 2px dashed #f97316;
}

.zone-pattern-shade {
  background: radial-gradient(circle, rgba(203, 213, 225, 0.5) 0%, rgba(203, 213, 225, 0.18) 100%);
  border: 2px dashed #64748b;
}

@keyframes pulse-ring {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(76, 135, 114, 0.7); }
  70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(76, 135, 114, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(76, 135, 114, 0); }
}

.marker-active {
  animation: pulse-ring 2s infinite;
}

/* Let JS fully own gesture handling here so custom drag/pan/pinch-zoom
   don't fight with the browser's native touch scrolling/zooming. */
#map-viewport,
#garden-canvas,
[data-plant-id],
.zone-resize-handle {
  touch-action: none;
}

/* User select: illustration split into two tappable halves */
.user-half:focus-visible { outline: none; }
#btn-user-chip { background-repeat: no-repeat; }

/* Pull-to-refresh: keep the browser's native bounce from interfering */
#plant-list-scroll { overscroll-behavior-y: contain; }
@keyframes pull-spin { to { transform: rotate(360deg); } }
#pull-indicator .refreshing { animation: pull-spin 1s linear infinite; }

/* --- Jungle curtain: monstera leaves that close over the screen while the
   user selection opens/closes, then swing away again. --- */
#jungle-curtain {
  position: fixed;
  inset: 0;
  z-index: 80;
  overflow: hidden;
  pointer-events: none;
  transition: opacity 0.32s ease;
}
/* Tail of the opening move: the last leaves dissolve instead of cutting off */
#jungle-curtain.is-fading { opacity: 0; }
#jungle-curtain.is-closed { pointer-events: auto; }
/* iOS/Safari give date inputs an intrinsic min-width that overflows grid cells */
input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 2.375rem;
  text-align: left;
}
input[type="date"]::-webkit-date-and-time-value { text-align: left; }
#jungle-curtain.no-transition .jungle-panel,
#jungle-curtain.no-transition .jungle-leaf { transition: none !important; }
/* User selection sits above the closed curtain and dissolves in/out */
#user-select-overlay {
  background-color: rgba(28, 25, 23, 0);
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
  transition: background-color 0.38s ease, -webkit-backdrop-filter 0.38s ease, backdrop-filter 0.38s ease;
}
#user-select-overlay.is-visible {
  background-color: rgba(28, 25, 23, 0.8);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition-duration: 0.52s;
}
#user-select-overlay .user-select-card {
  opacity: 0;
  transform: translateY(28px) scale(0.94);
  transition: opacity 0.38s ease, transform 0.38s cubic-bezier(0.4, 0, 1, 1);
  will-change: opacity, transform;
}
#user-select-overlay.is-visible .user-select-card {
  opacity: 1;
  transform: none;
  transition: opacity 0.52s ease, transform 0.52s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.jungle-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 72%;
  /* Jungle backdrop fades out towards the middle so the leaves, not two hard
     panels, are what visibly closes the screen. Panels overlap 44%. */
  transition: transform 0.48s cubic-bezier(0.65, 0, 0.35, 1);
}
.jungle-panel.left  { left: 0;  transform: translateX(-102%); background: linear-gradient(to right, #2b5a3a 0%, #2b5a3a 52%, rgba(43, 90, 58, 0.85) 68%, rgba(43, 90, 58, 0.35) 86%, rgba(43, 90, 58, 0) 100%); }
.jungle-panel.right { right: 0; transform: translateX(102%); background: linear-gradient(to left, #2b5a3a 0%, #2b5a3a 52%, rgba(43, 90, 58, 0.85) 68%, rgba(43, 90, 58, 0.35) 86%, rgba(43, 90, 58, 0) 100%); }
#jungle-curtain.is-closed .jungle-panel { transform: translateX(0); }
.jungle-leaf {
  position: absolute;
  overflow: visible;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.5, 0, 0.3, 1);
  will-change: transform;
}
.jungle-leaf svg { width: 100%; height: 100%; overflow: visible; }
.jungle-leaf.left  { transform: translateX(-190%) rotate(var(--rot-out)); }
.jungle-leaf.right { transform: translateX(190%) rotate(var(--rot-out)); }
#jungle-curtain.is-closed .jungle-leaf { transform: translateX(0) rotate(var(--rot)); }
@media (prefers-reduced-motion: reduce) {
  .jungle-panel, .jungle-leaf { transition-duration: 0.01s !important; transition-delay: 0s !important; }
}

/* Garden ground grid, aligned to the map origin. Cell size and origin offset
   come from js/map.js (applyMapGeometry sets the custom properties). */
.map-grid {
  --map-grid: 50px;
  --map-grid-major: 250px;
  --map-ox: 0px;
  --map-oy: 0px;
  background-color: #fafaf9;
  background-image:
    linear-gradient(to right, rgba(35, 60, 53, 0.16) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(35, 60, 53, 0.16) 1px, transparent 1px),
    linear-gradient(to right, rgba(35, 60, 53, 0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(35, 60, 53, 0.07) 1px, transparent 1px);
  background-size: var(--map-grid-major) var(--map-grid-major), var(--map-grid-major) var(--map-grid-major), var(--map-grid) var(--map-grid), var(--map-grid) var(--map-grid);
  background-position: var(--map-ox) var(--map-oy);
}

/* Collapsible specimen list on directory cards */
details.specimens > summary { list-style: none; }
details.specimens > summary::-webkit-details-marker { display: none; }
details.specimens[open] > summary svg { transform: rotate(180deg); }

/* Directory: plant notes collapsed to 4 lines until "Mehr" is tapped */
.notes-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}