/*
 * 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-visible{
  outline: none;
  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);
}

.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; right:.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);
}
.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); }