/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* ---------- THEME TOKENS ---------- */
:root {
  --background: rgb(249, 249, 250);
  --foreground: rgb(51, 51, 51);
  --card: rgb(255, 255, 255);
  --card-foreground: rgb(51, 51, 51);
  --popover: rgb(255, 255, 255);
  --popover-foreground: rgb(51, 51, 51);
  --primary: rgb(52, 168, 90);
  --primary-foreground: rgb(255, 255, 255);
  --secondary: rgb(100, 149, 237);
  --secondary-foreground: rgb(255, 255, 255);
  --muted: rgb(221, 217, 196);
  --muted-foreground: rgb(110, 110, 110);
  --accent: rgb(102, 217, 239);
  --accent-foreground: rgb(51, 51, 51);
  --destructive: rgb(239, 68, 68);
  --destructive-foreground: rgb(255, 255, 255);
  --border: rgb(212, 212, 212);
  --input: rgb(212, 212, 212);
  --ring: rgb(52, 168, 90);
  --chart-1: rgb(52, 168, 90);
  --chart-2: rgb(100, 149, 237);
  --chart-3: rgb(102, 217, 239);
  --chart-4: rgb(70, 130, 180);
  --chart-5: rgb(26, 150, 65);
  --sidebar: rgb(249, 249, 250);
  --sidebar-foreground: rgb(51, 51, 51);
  --sidebar-primary: rgb(52, 168, 90);
  --sidebar-primary-foreground: rgb(255, 255, 255);
  --sidebar-accent: rgb(102, 217, 239);
  --sidebar-accent-foreground: rgb(51, 51, 51);
  --sidebar-border: rgb(212, 212, 212);
  --sidebar-ring: rgb(52, 168, 90);
  --font-sans: Plus Jakarta Sans, ui-sans-serif, system-ui, sans-serif;
  --font-serif: Source Serif 4, ui-serif, Georgia, serif;
  --font-mono: JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, monospace;
  --radius: 0.5rem;
  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
  --tracking-normal: 0em;
  --spacing: 0.25rem;
}

/* ---------- BASE ---------- */
html, body { height: 100%; }
body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  letter-spacing: var(--tracking-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- PRIMITIVES ---------- */
.card {
  border-radius: calc(var(--radius) + 4px);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--card-foreground);
  box-shadow: var(--shadow-sm);
}

.btn {
  display:inline-flex; align-items:center; gap:.5rem;
  border-radius: calc(var(--radius) + 2px);
  padding:.55rem 0.9rem;
  border:1px solid var(--border);
  background: var(--card);
  color: var(--foreground);
  cursor:pointer; white-space:nowrap;
  box-shadow: var(--shadow-2xs);
  transition: background-color .15s ease, box-shadow .15s ease;
}
/* Ховер для обычных (нецветных) и не-стеклянных */
.btn:hover:not(.btn-primary):not(.btn-secondary):not(.btn-destructive):not(.btn-glass) {
  background: color-mix(in oklab, var(--card) 92%, var(--foreground) 8%);
}
/* Фокус-кольцо */
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 28%, transparent), var(--shadow-xs);
}
/* Имитация «нажатия» без transform, чтобы не ломать translateX(-50%) у overlay-кнопок */
.btn:active {
  box-shadow: inset 0 1px 0 hsl(0 0% 0% / 0.06), var(--shadow-2xs);
}

/* Варианты */
.btn-primary {
  border-color: transparent;
  background: var(--primary);
  color: var(--primary-foreground);
}
.btn-primary:hover { background: color-mix(in oklab, var(--primary) 90%, black 10%); }

.btn-secondary {
  border-color: transparent;
  background: var(--secondary);
  color: var(--secondary-foreground);
}
.btn-secondary:hover { background: color-mix(in oklab, var(--secondary) 90%, black 10%); }

.btn-destructive {
  border-color: transparent;
  background: var(--destructive);
  color: var(--destructive-foreground);
}
.btn-destructive:hover { background: color-mix(in oklab, var(--destructive) 90%, black 10%); }

.btn-glass {
  background: color-mix(in oklab, var(--primary) 88%, transparent);
  color: var(--primary-foreground);
  border-color: transparent;
  backdrop-filter: saturate(140%) blur(2px);
}
.btn-glass:hover { background: color-mix(in oklab, var(--primary) 95%, transparent); }
/* overlay-кнопки не двигаются при активном состоянии */
.btn-overlay:active { box-shadow: var(--shadow-2xs); }

.btn-overlay { padding:.35rem .6rem; gap:.35rem; }
.btn-compact{ padding:.35rem .6rem; gap:.35rem; font-size:.9rem; }

.input{
  width:100%;
  border-radius: calc(var(--radius) + 2px);
  border:1px solid var(--input);
  background: var(--card);
  color: var(--foreground);
  padding:.55rem .75rem;
  box-shadow: var(--shadow-2xs) inset;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input::placeholder{ color: color-mix(in oklab, var(--muted-foreground) 85%, var(--foreground) 15%); }
.input:focus,
.input:focus-visible{
  outline: none !important;
  outline-offset: 0 !important;
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 25%, transparent);
}

.label{ font-size:.875rem; color: var(--muted-foreground); }

.kbd{
  display:inline-flex; align-items:center;
  border-radius:.5rem; border:1px solid var(--border);
  padding:.125rem .5rem; font-size:.75rem;
  background: color-mix(in oklab, var(--muted) 30%, var(--card) 70%);
  color: color-mix(in oklab, var(--muted-foreground) 80%, var(--foreground) 20%);
}

.tab-active{
  color: var(--foreground);
  border-bottom: 2px solid var(--primary);
}

/* Settings tabs with smoother transitions */
.settings-tab {
  transition: all 0.15s ease;
}
.settings-tab:hover {
  color: var(--foreground);
}

/* Hide scrollbar for tabs nav */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

.aspect-3-4{ aspect-ratio:3/4; }
.plant-photo{ object-fit:contain; width:100%; height:100%; background: var(--background); }

dialog{ border:none; padding:0; background: transparent; }
dialog::backdrop{ background: color-mix(in oklab, #000 25%, transparent); }

.photo-del{
  position:absolute; top:.5rem; left:.5rem;
  background: color-mix(in oklab, var(--foreground) 85%, transparent);
  color: var(--card);
  border-radius:.6rem; padding:.25rem;
  display:grid; place-items:center;
  box-shadow: var(--shadow-xs);
  z-index: 10;
}
.photo-del:hover{ background: color-mix(in oklab, var(--foreground) 95%, transparent); }

/* ---------- SMALL TWEAKS ---------- */
.brand-badge{
  background: var(--primary) !important;
  color: var(--primary-foreground) !important;
}
nav.tabs { border-bottom: 1px solid var(--border); }
.table-head { background: color-mix(in oklab, var(--muted) 32%, var(--card) 68%); }
#toasts .card { box-shadow: var(--shadow-md); }

/* ---------- MOBILE FULLSCREEN MODAL with flex layout ---------- */
@media (max-width: 640px) {
  /* Fullscreen dialogs on mobile */
  #modalPlant[open],
  #modalEvent[open],
  #modalStatsPlants[open],
  #modalStatsFerts[open],
  #modalSpeciesDetails[open],
  #modalSpeciesInfo[open],
  #modalNotifications[open],
  #modalSettings[open],
  #modalExchangeView[open],
  #modalExchangeEdit[open],
  #modalExchangeCreate[open],
  #modalSelectPlantForExchange[open] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw !important;
    max-width: 100vw !important;
    /* Use CSS variable set by JS, fallback to viewport height */
    height: calc(var(--app-height, 100vh));
    max-height: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background: var(--card);
    overflow: hidden;
  }

  /* Inner card as flex container taking full height */
  #modalPlant > form.card,
  #modalEvent > form.card,
  #modalStatsPlants > .card,
  #modalStatsFerts > .card,
  #modalSpeciesDetails > .card,
  #modalSpeciesInfo > .card,
  #modalNotifications > .card,
  #modalSettings > .card,
  #modalExchangeView > form.card,
  #modalExchangeEdit > form.card,
  #modalExchangeCreate > form.card,
  #modalSelectPlantForExchange > .card {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
    border: none;
    box-shadow: none;
    overflow: hidden;
    padding: 0 !important;
  }

  /* Scrollable content area */
  #modalPlant .modal-plant-content,
  #modalEvent .modal-content,
  #modalStatsPlants .modal-content,
  #modalStatsFerts .modal-content,
  #modalSpeciesDetails .modal-content,
  #modalSpeciesInfo .modal-content,
  #modalNotifications .modal-content,
  #modalSettings .modal-content,
  #modalExchangeView .modal-content,
  #modalExchangeEdit .modal-content,
  #modalExchangeCreate .modal-content,
  #modalSelectPlantForExchange .modal-content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 1rem;
    touch-action: manipulation; /* Allow panning and pinch-zoom, children can restrict further */
  }

  /* Fixed header */
  #modalPlant .modal-header,
  #modalEvent .modal-header,
  #modalStatsPlants .modal-header,
  #modalStatsFerts .modal-header,
  #modalSpeciesDetails .modal-header,
  #modalSpeciesInfo .modal-header,
  #modalNotifications .modal-header,
  #modalSettings .modal-header,
  #modalExchangeView .modal-header,
  #modalExchangeEdit .modal-header,
  #modalExchangeCreate .modal-header,
  #modalSelectPlantForExchange .modal-header {
    flex-shrink: 0;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
    background: var(--card);
  }

  /* Fixed footer with padding - uses safe-area-inset for iOS home indicator */
  /* Note: --app-height (via visualViewport) already accounts for Android nav bar */
  #modalPlant .modal-plant-footer,
  #modalEvent .modal-footer,
  #modalSpeciesInfo .modal-footer,
  #modalNotifications .modal-footer,
  #modalSettings .modal-footer,
  #modalExchangeView .modal-footer,
  #modalExchangeEdit .modal-footer,
  #modalExchangeCreate .modal-footer,
  #modalSelectPlantForExchange .modal-footer {
    flex-shrink: 0;
    background: var(--card);
    border-top: 1px solid var(--border);
    padding: 0.75rem 1rem;
    /* Add safe-area for iOS home indicator, 0 on Android (visualViewport handles it) */
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
  }

  /* Reduce photo block height on mobile */
  #modalPlant .aspect-3-4,
  #modalExchangeView .aspect-3-4,
  #modalExchangeEdit .aspect-3-4,
  #modalExchangeCreate .aspect-3-4 {
    aspect-ratio: 27 / 16;
  }
}

/* ---------- FULLSCREEN SELECT MODALS (Parent/Child) ---------- */
/* These modals are always fullscreen, not just on mobile */
#modalSelectParentPlant[open],
#modalSelectChildPlant[open] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw !important;
  max-width: 100vw !important;
  height: calc(var(--app-height, 100vh));
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: var(--card);
  overflow: hidden;
  z-index: 60; /* Above other modals */
}

/* ---------- COLLECTIONS ---------- */

/* Hide scrollbar but keep functionality */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* Collection folder cards - border style instead of filled */
.collection-folder {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1rem;
  border-radius: calc(var(--radius) + 4px);
  border: 2px solid currentColor;
  background: transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  overflow: hidden;
  min-height: 3.5rem;
}

.collection-folder:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.collection-folder .folder-name {
  font-weight: 600;
  font-size: 0.9375rem;
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.collection-folder .folder-count {
  font-weight: 500;
  font-size: 0.875rem;
  color: inherit;
  opacity: 0.7;
  flex-shrink: 0;
  margin-left: 0.5rem;
}

/* Multi-select mode */
.selection-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--card);
  border-top: 1px solid var(--border);
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 100;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.1);
}

.selection-bar.hidden {
  display: none;
}

/* Plant card checkbox */
.plant-checkbox {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 2px solid white;
  background: rgba(0,0,0,0.3);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.15s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.plant-checkbox i {
  width: 1rem;
  height: 1rem;
  color: white;
  display: none;
}

.plant-checkbox.checked {
  background: var(--primary);
  border-color: var(--primary);
}

.plant-checkbox.checked i {
  display: block;
}

/* Show checkboxes in selection mode */
.selection-mode .plant-checkbox {
  display: flex;
}

/* Prevent text selection on plant cards (especially on mobile long-press) */
.plant-card {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Highlight selected cards - 2px border above photo layer */
.plant-card.selected {
  position: relative;
}

.plant-card.selected::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid var(--primary);
  border-radius: inherit;
  pointer-events: none;
  z-index: 20;
}

/* Plant children badge - positioned on photo */
.plant-children-badge {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  background: rgba(255, 255, 255, 0.05); /* white with 5% opacity */
  backdrop-filter: blur(4px);
  border-radius: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: white;
}

.plant-children-badge i {
  width: 0.875rem;
  height: 0.875rem;
}

/* Move to collection modal items */
.move-collection-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: 0.75rem;
  cursor: pointer;
  transition: background 0.15s ease;
}

.move-collection-item:hover {
  background: color-mix(in oklab, var(--background) 90%, var(--foreground) 10%);
}

/* Icon/Color picker buttons */
.icon-picker-btn,
.color-picker-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
}

.icon-picker-btn {
  background: var(--background);
  color: var(--foreground);
}

.icon-picker-btn:hover {
  background: color-mix(in oklab, var(--background) 90%, var(--foreground) 10%);
}

.icon-picker-btn.active {
  border-color: var(--primary);
  background: color-mix(in oklab, var(--primary) 15%, var(--card) 85%);
}

.color-picker-btn.active {
  border-color: var(--foreground);
  box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--foreground);
}

/* Collection list item */
.collection-list-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: 0.5rem;
  background: var(--background);
  cursor: pointer;
  transition: background 0.15s ease;
}

.collection-list-item:hover {
  background: color-mix(in oklab, var(--background) 90%, var(--foreground) 10%);
}

.collection-list-item .collection-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.collection-list-item .collection-info {
  flex: 1;
  min-width: 0;
}

.collection-list-item .collection-name {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.collection-list-item .collection-count {
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

/* ---------- PHOTO GALLERY ---------- */
/* Photo thumbnails horizontal scroll - override parent touch behavior */
#modalPlant #photoThumbnails,
#modalExchangeView #photoThumbnails,
#modalExchangeEdit #photoThumbnails,
#modalExchangeCreate #photoThumbnails {
  touch-action: pan-x !important;
  -webkit-overflow-scrolling: touch;
  overflow-x: scroll !important;
  overflow-y: hidden !important;
  scroll-snap-type: x proximity;
}



/* Gallery row container - thumbnails + fixed add button */
.photo-gallery-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Scrollable thumbnails container - right-aligned photos */
.gallery-thumbnails-scroll,
#photoThumbnails {
  flex: 1;
  justify-content: flex-start; /* Start from left, scroll to end programmatically */
  align-items: center;
  gap: 0.5rem;
  min-height: 5.33rem; /* Fixed height to prevent layout shift */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x !important; /* Allow horizontal scrolling on touch devices */
  -ms-touch-action: pan-x !important;
}

/* Show thumbnails only when not hidden */
.gallery-thumbnails-scroll:not(.hidden),
#photoThumbnails:not(.hidden) {
  display: flex;
}

.gallery-thumbnails-scroll::-webkit-scrollbar,
#photoThumbnails::-webkit-scrollbar {
  height: 4px;
}

.gallery-thumbnails-scroll::-webkit-scrollbar-thumb,
#photoThumbnails::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 2px;
}

/* Fixed "Add Photo" button - always visible on the right */
.gallery-add-btn-fixed {
  flex-shrink: 0;
  width: 4rem;
  height: 5.33rem; /* 3:4 ratio like thumbnails */
  border-radius: 0.75rem;
  border: 2px dashed var(--primary);
  background: color-mix(in oklab, var(--primary) 8%, var(--background) 92%);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.gallery-add-btn-fixed:hover {
  border-style: solid;
  background: color-mix(in oklab, var(--primary) 15%, var(--background) 85%);
  transform: scale(1.05);
}

.gallery-add-btn-fixed:active {
  transform: scale(0.98);
}

.gallery-add-btn-fixed i {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--primary);
  stroke-width: 2.5;
}

/* Inline source selection panel */
.gallery-source-panel {
  flex: 1;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
  min-height: 5.33rem; /* Match thumbnail height to prevent layout shift */
  animation: fadeSlideIn 0.2s ease-out;
}

/* Show panel only when not hidden */
.gallery-source-panel:not(.hidden) {
  display: flex;
}

@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateX(10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Source selection buttons */
.gallery-source-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  border-radius: 0.75rem;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--foreground);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.gallery-source-btn:hover {
  background: color-mix(in oklab, var(--primary) 10%, var(--card) 90%);
  border-color: var(--primary);
}

.gallery-source-btn:active {
  transform: scale(0.97);
}

.gallery-source-btn i {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--primary);
}

/* Gallery thumbnail item */
.gallery-thumb {
  position: relative;
  width: 4rem;
  height: 5.33rem; /* 3:4 ratio */
  flex-shrink: 0;
  border-radius: 0.5rem;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.gallery-thumb:hover {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--primary) 30%, transparent);
}

.gallery-thumb.active {
  border-color: var(--primary);
}

.gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Delete button on thumbnail */
.gallery-thumb .thumb-delete {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  width: 1.25rem;
  height: 1.25rem;
  background: rgba(0, 0, 0, 0.6);
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.gallery-thumb:hover .thumb-delete {
  opacity: 1;
}

.gallery-thumb .thumb-delete i {
  width: 0.75rem;
  height: 0.75rem;
  color: white;
}

/* Pending photo indicator */
.gallery-thumb.pending {
  border-color: var(--primary);
  opacity: 0.8;
}

.gallery-thumb .pending-badge {
  position: absolute;
  bottom: 0.25rem;
  left: 0.25rem;
  background: var(--primary);
  color: white;
  font-size: 0.6rem;
  padding: 0.1rem 0.3rem;
  border-radius: 0.25rem;
  font-weight: 600;
  text-transform: uppercase;
}

/* Marked for deletion indicator */
.gallery-thumb.marked-for-deletion {
  opacity: 0.5;
  border-color: var(--destructive);
}

.gallery-thumb.marked-for-deletion img {
  filter: grayscale(50%);
}

.gallery-thumb .deletion-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--destructive);
  color: white;
  font-size: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
/* ===== Custom Confirm Dialog ===== */#modalConfirm::backdrop {  background: rgba(0, 0, 0, 0.5);  backdrop-filter: blur(2px);}#modalConfirm[open] {  animation: confirmSlideIn 0.2s ease-out;}@keyframes confirmSlideIn {  from {    opacity: 0;    transform: scale(0.95) translateY(-10px);  }  to {    opacity: 1;    transform: scale(1) translateY(0);  }}/* Confirm icon variants */#confirmIcon.confirm-warning {  background: #fef3c7;}#confirmIcon.confirm-warning i {  color: #d97706;}#confirmIcon.confirm-danger {  background: #fee2e2;}#confirmIcon.confirm-danger i {  color: #dc2626;}#confirmIcon.confirm-info {  background: #dbeafe;}#confirmIcon.confirm-info i {  color: #2563eb;}

/* Add photo button
.gallery-add-btn {
  width: 4rem;
  height: 5.33rem;
  flex-shrink: 0;
  border-radius: 0.5rem;
  border: 2px dashed var(--border);
  background: var(--background);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.gallery-add-btn:hover {
  border-color: var(--primary);
  background: color-mix(in oklab, var(--primary) 10%, var(--background) 90%);
}

.gallery-add-btn i {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--muted-foreground);
}

/* Gallery add photo popup */.gallery-add-popup .popup-option {  display: flex;  align-items: center;  gap: 0.75rem;  padding: 0.75rem 1rem;  border: none;  background: transparent;  width: 100%;  text-align: left;  font-size: 0.9rem;  color: var(--foreground);  border-radius: 8px;  cursor: pointer;  transition: background 0.15s;}.gallery-add-popup .popup-option:hover {  background: var(--muted);}.gallery-add-popup .popup-option i {  width: 1.25rem;  height: 1.25rem;  color: var(--muted-foreground);}
/* Fullscreen viewer thumbnails - hide scrollbar */
#imageViewerThumbnails {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}
#imageViewerThumbnails::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}

#imageViewerThumbnails .gallery-thumb {
  width: 3rem;
  height: 4rem;
  border-color: rgba(255, 255, 255, 0.3);
}

#imageViewerThumbnails .gallery-thumb.active {
  border-color: white;
}

#imageViewerThumbnails .gallery-thumb:hover {
  border-color: rgba(255, 255, 255, 0.7);
}

/* Swipe support for fullscreen viewer */
#imageViewerMain {
  touch-action: pan-x;
  user-select: none;
}

/* Fullscreen Image Viewer - force true fullscreen */
#modalImageViewer {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: black !important;
}

#modalImageViewer::backdrop {
  background: black !important;
}

#modalImageViewer[open] {
  display: flex !important;
}

/* ---------- SETTINGS SAVE BUTTON PULSE ---------- */
@keyframes pulse-soft {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(52, 168, 90, 0.5);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(52, 168, 90, 0);
  }
}

.animate-pulse-soft {
  animation: pulse-soft 2s ease-in-out infinite;
}