/* =====================================================
   WIMM Design System
   ===================================================== */

body {
  font-family: 'Inter', sans-serif;
}

/* ── Skip-to-content link (accessibility) ── */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 9999;
}
.skip-link:focus {
  position: fixed;
  left: 1rem;
  top: 1rem;
  width: auto;
  height: auto;
  overflow: visible;
  padding: 0.5rem 1rem;
  background: var(--color-primary);
  color: var(--color-primary-content);
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

/* ── Dark Theme ── */
[data-theme="dark"] {
  --color-base-100: oklch(16% 0.030 266);     /* navy cards */
  --color-base-200: oklch(9% 0.025 266);      /* page background — very dark */
  --color-base-300: oklch(7% 0.020 266);      /* darkest elements */
  --color-base-content: oklch(88% 0.032 255);
  --color-primary: oklch(66% 0.27 268);        /* vibrant indigo */
  --color-primary-content: oklch(100% 0 0);
  --color-secondary: oklch(58% 0.24 295);      /* violet-purple */
  --color-secondary-content: oklch(100% 0 0);
  --color-neutral: oklch(23% 0.024 266);
  --color-neutral-content: oklch(88% 0.032 255);
  --color-info:    oklch(68% 0.19 240);
  --color-info-content: oklch(10% 0 0);
  --color-success: oklch(72% 0.21 162);        /* emerald */
  --color-success-content: oklch(10% 0 0);
  --color-warning: oklch(82% 0.18 75);         /* amber */
  --color-warning-content: oklch(10% 0 0);
  --color-error:   oklch(66% 0.24 22);         /* coral-red */
  --color-error-content: oklch(100% 0 0);
  --radius-box: 1rem;
  --radius-field: 0.5rem;
  --radius-selector: 0.5rem;
}

/* ── Light Theme ── */
[data-theme="light"] {
  --color-base-100: oklch(100% 0.004 265);    /* near-white, tiny blue tint */
  --color-base-200: oklch(96.5% 0.011 265);   /* page background */
  --color-base-300: oklch(92% 0.016 265);     /* borders, dividers */
  --color-base-content: oklch(17% 0.030 262);
  --color-primary: oklch(55% 0.27 268);        /* indigo */
  --color-primary-content: oklch(100% 0 0);
  --color-secondary: oklch(50% 0.22 295);
  --color-secondary-content: oklch(100% 0 0);
  --color-success: oklch(50% 0.21 162);
  --color-success-content: oklch(100% 0 0);
  --color-error: oklch(52% 0.26 22);
  --color-error-content: oklch(100% 0 0);
  --color-warning: oklch(65% 0.18 75);
  --color-warning-content: oklch(10% 0 0);
  --radius-box: 1rem;
  --radius-field: 0.5rem;
  --radius-selector: 0.5rem;
}

/* ── Page background — position:fixed div вместо background-attachment:fixed
   (Safari не поддерживает background-attachment:fixed корректно — даёт
   полосы и дёргание при скролле. position:fixed на отдельном div
   работает везде без артефактов.) ── */
body {
  background: transparent;
}

#glow-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

[data-theme="dark"] #glow-bg {
  /* SVG-шум поверх градиента убирает оставшийся бандинг (дизеринг) */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.04'/%3E%3C%2Fsvg%3E"),
    radial-gradient(
      in oklch ellipse 110% 65% at 50% -5%,
      color-mix(in oklch, var(--color-secondary) 30%, transparent)  0%,
      color-mix(in oklch, var(--color-secondary) 22%, transparent) 15%,
      color-mix(in oklch, var(--color-primary)   16%, transparent) 30%,
      color-mix(in oklch, var(--color-primary)    8%, transparent) 48%,
      color-mix(in oklch, var(--color-primary)    2%, transparent) 60%,
      transparent 68%
    );
  background-size: 200px 200px, cover;
}

/* ── Navbar ── */
.navbar-wrap {
  background: color-mix(in oklch, var(--color-base-200) 45%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid color-mix(in oklch, var(--color-base-content) 6%, transparent);
}

[data-theme="light"] .navbar-wrap {
  background: color-mix(in oklch, var(--color-base-100) 70%, transparent);
  border-bottom: 1px solid color-mix(in oklch, var(--color-base-content) 7%, transparent);
}

/* Nav pill links */
.nav-pill {
  padding: 0.4rem 0.875rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: color-mix(in oklch, var(--color-base-content) 55%, transparent);
  transition: background 0.15s, color 0.15s;
}

.nav-pill:hover {
  background: color-mix(in oklch, var(--color-base-content) 8%, transparent);
  color: var(--color-base-content);
}

/* ── Active nav link ── */
.nav-link-active {
  color: var(--color-primary) !important;
  background-color: color-mix(in oklch, var(--color-primary) 14%, transparent) !important;
  font-weight: 600;
}

/* ── Primary Button ── */
.btn-primary {
  box-shadow: 0 2px 12px color-mix(in oklch, var(--color-primary) 35%, transparent);
  transition: box-shadow 0.2s, transform 0.1s;
}
.btn-primary:hover {
  box-shadow: 0 4px 20px color-mix(in oklch, var(--color-primary) 50%, transparent);
  transform: translateY(-1px);
}
.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 1px 6px color-mix(in oklch, var(--color-primary) 30%, transparent);
}

/* Ghost/icon buttons in table rows */
.btn-action {
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0.375rem;
  border-radius: 0.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  background: transparent;
  color: inherit;
  transition: background 0.15s, color 0.15s;
}
.btn-action:hover {
  background-color: color-mix(in oklch, var(--color-base-content) 8%, transparent);
}
.btn-action-danger {
  color: var(--color-error);
}
.btn-action-danger:hover {
  background-color: color-mix(in oklch, var(--color-error) 10%, transparent);
}

/* ── Cards ── */
.card {
  border-radius: var(--radius-box);
}

[data-theme="dark"] .card {
  border: 1px solid color-mix(in oklch, var(--color-base-content) 9%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in oklch, var(--color-base-content) 5%, transparent) inset,
    0 4px 20px color-mix(in oklch, oklch(0% 0 0) 30%, transparent),
    0 1px 4px  color-mix(in oklch, oklch(0% 0 0) 20%, transparent);
}

[data-theme="light"] .card {
  border: 1px solid color-mix(in oklch, var(--color-base-content) 6%, transparent);
  box-shadow:
    0 1px 3px  color-mix(in oklch, var(--color-base-content) 6%, transparent),
    0 6px 28px color-mix(in oklch, var(--color-base-content) 5%, transparent);
}

/* ── Inputs & Selects ── */
.input, .select {
  border-radius: var(--radius-field);
}

[data-theme="dark"] .input,
[data-theme="dark"] .select,
[data-theme="dark"] .textarea {
  border-color: color-mix(in oklch, var(--color-base-content) 13%, transparent);
  background-color: color-mix(in oklch, var(--color-base-300) 80%, transparent);
  transition: border-color 0.15s, box-shadow 0.15s;
}

[data-theme="dark"] .input:focus,
[data-theme="dark"] .select:focus {
  border-color: var(--color-primary);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-primary) 18%, transparent);
}

[data-theme="light"] .input:focus,
[data-theme="light"] .select:focus {
  border-color: var(--color-primary);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-primary) 12%, transparent);
}

/* ── Table ── */
.table th {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

[data-theme="dark"] .table th {
  color: color-mix(in oklch, var(--color-base-content) 35%, transparent);
  border-bottom-color: color-mix(in oklch, var(--color-base-content) 8%, transparent);
}

[data-theme="dark"] .table td {
  border-bottom-color: color-mix(in oklch, var(--color-base-content) 5%, transparent);
}

.table td {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

[data-theme="dark"] .table tr.hover:hover td,
[data-theme="dark"] .table tbody tr:hover td {
  background-color: color-mix(in oklch, var(--color-base-content) 3%, transparent);
}

/* ── Badges ── */
[data-theme="dark"] .badge-success {
  background-color: color-mix(in oklch, var(--color-success) 18%, transparent);
  color: var(--color-success);
  border-color: color-mix(in oklch, var(--color-success) 30%, transparent);
}

[data-theme="dark"] .badge-error {
  background-color: color-mix(in oklch, var(--color-error) 18%, transparent);
  color: var(--color-error);
  border-color: color-mix(in oklch, var(--color-error) 30%, transparent);
}

[data-theme="dark"] .badge-neutral {
  background-color: color-mix(in oklch, var(--color-base-content) 12%, transparent);
  color: color-mix(in oklch, var(--color-base-content) 70%, transparent);
  border-color: color-mix(in oklch, var(--color-base-content) 16%, transparent);
}

[data-theme="dark"] .badge-ghost {
  background-color: color-mix(in oklch, var(--color-base-content) 9%, transparent);
  border-color: color-mix(in oklch, var(--color-base-content) 14%, transparent);
}

/* ── Collapse / Details ── */
[data-theme="dark"] .collapse {
  border: 1px solid color-mix(in oklch, var(--color-base-content) 8%, transparent);
}

/* Центрируем стрелку вертикально — DaisyUI ставит её на top:0.9rem,
   что не совпадает с нашим компактным summary (min-h-0 + py-3).
   calc(50% - 0.25rem) = середина родителя минус половина высоты стрелки (0.5rem) */
.collapse-arrow > .collapse-title::after {
  top: calc(50% - 0.1rem) !important;
}

/* ── Alert ── */
[data-theme="dark"] .alert {
  background-color: color-mix(in oklch, var(--color-base-content) 4%, transparent);
  border: 1px solid color-mix(in oklch, var(--color-base-content) 8%, transparent);
}

/* ── Logo text ── */
.logo-text {
  color: var(--color-primary);
  font-weight: 700;
}

/* ── Auth page radial glow ── */
.auth-bg {
  background:
    radial-gradient(
      ellipse 80% 45% at 50% -5%,
      color-mix(in oklch, var(--color-primary) 22%, transparent),
      transparent 70%
    ),
    radial-gradient(
      ellipse 50% 25% at 80% 110%,
      color-mix(in oklch, var(--color-secondary) 12%, transparent),
      transparent 70%
    );
}

/* ── Wallet cards ── */
.wallet-card {
  position: relative;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}

.wallet-card:hover {
  transform: translateY(-2px);
}

[data-theme="dark"] .wallet-card:hover {
  box-shadow:
    0 0 0 1px color-mix(in oklch, var(--color-base-content) 5%, transparent) inset,
    0 12px 40px color-mix(in oklch, oklch(0% 0 0) 50%, transparent),
    0 0 24px color-mix(in oklch, var(--color-primary) 10%, transparent);
}

[data-theme="dark"] .wallet-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 5%,
    color-mix(in oklch, var(--color-primary) 80%, transparent) 50%,
    transparent 95%
  );
}

/* ── Section header in card ── */
.card-section-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-base-content);
  margin-bottom: 1rem;
}

/* ── Page header ── */
.page-title {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.page-subtitle {
  font-size: 0.85rem;
  color: color-mix(in oklch, var(--color-base-content) 40%, transparent);
  margin-top: 0.2rem;
}

/* ── Smooth theme transition ── */
html {
  transition: background-color 0.2s, color 0.2s;
}

/* ── htmx loading ── */
.htmx-indicator { opacity: 0; transition: opacity 0.2s; }
.htmx-request .htmx-indicator { opacity: 1; }

/* ── New row fade-in ── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
#wallets-tbody tr:first-child,
#categories-tbody tr:first-child,
#operations-tbody tr:first-child {
  animation: fadeIn 0.25s ease-out;
}

/* ── Unified form input height ──
   44px — мобильный минимум Apple HIG, чуть меньше DaisyUI default (48px) */
.input-form {
  height: 2.5rem !important;
  min-height: 2.5rem !important;
}

/* ── Form submit button — совпадает по высоте с .op-mode-btn ── */
.btn-form-submit {
  height: auto !important;
  min-height: auto !important;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  font-size: 0.875rem;
  border-radius: 0.5rem;
}

/* ── Form row spacing ── */
.form-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: color-mix(in oklch, var(--color-base-content) 55%, transparent);
  margin-bottom: 0.4rem;
  display: block;
  letter-spacing: 0.01em;
}

/* ── Tabs (for operations form) ── */
[data-theme="dark"] .tabs-bordered .tab {
  border-color: color-mix(in oklch, var(--color-base-content) 10%, transparent);
}
[data-theme="dark"] .tab:is(.tab-active, [aria-selected=true]) {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* ── Flatpickr dark theme ── */
[data-theme="dark"] .flatpickr-calendar {
  background: var(--color-base-100);
  border-color: color-mix(in oklch, var(--color-base-content) 10%, transparent);
  box-shadow: 0 8px 30px rgba(0,0,0,0.4);
  color: var(--color-base-content);
}
[data-theme="dark"] .flatpickr-calendar.arrowTop::before,
[data-theme="dark"] .flatpickr-calendar.arrowTop::after {
  border-bottom-color: var(--color-base-100);
}
[data-theme="dark"] .flatpickr-calendar.arrowBottom::before,
[data-theme="dark"] .flatpickr-calendar.arrowBottom::after {
  border-top-color: var(--color-base-100);
}
[data-theme="dark"] .flatpickr-months {
  background: var(--color-base-200);
  border-radius: 8px 8px 0 0;
}
[data-theme="dark"] .flatpickr-months .flatpickr-month,
[data-theme="dark"] .flatpickr-months .flatpickr-prev-month,
[data-theme="dark"] .flatpickr-months .flatpickr-next-month {
  background: var(--color-base-200);
  color: var(--color-base-content);
  fill: var(--color-base-content);
}
[data-theme="dark"] .flatpickr-months .flatpickr-prev-month:hover,
[data-theme="dark"] .flatpickr-months .flatpickr-next-month:hover {
  color: var(--color-primary);
  fill: var(--color-primary);
}
[data-theme="dark"] .flatpickr-current-month input.cur-year,
[data-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months {
  color: var(--color-base-content);
  background: transparent;
}
[data-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months option {
  background: var(--color-base-300);
}
[data-theme="dark"] .flatpickr-weekdays {
  background: var(--color-base-100);
}
[data-theme="dark"] span.flatpickr-weekday {
  background: var(--color-base-100);
  color: color-mix(in oklch, var(--color-base-content) 40%, transparent);
}
[data-theme="dark"] .flatpickr-days {
  border-color: color-mix(in oklch, var(--color-base-content) 10%, transparent);
}
[data-theme="dark"] .dayContainer {
  background: var(--color-base-100);
}
[data-theme="dark"] .flatpickr-day {
  color: var(--color-base-content);
  border-color: transparent;
}
[data-theme="dark"] .flatpickr-day:hover,
[data-theme="dark"] .flatpickr-day:focus {
  background: color-mix(in oklch, var(--color-primary) 18%, transparent);
  border-color: transparent;
  color: var(--color-base-content);
}
[data-theme="dark"] .flatpickr-day.today {
  border-color: color-mix(in oklch, var(--color-primary) 55%, transparent);
}
[data-theme="dark"] .flatpickr-day.today:hover {
  background: color-mix(in oklch, var(--color-primary) 25%, transparent);
  border-color: color-mix(in oklch, var(--color-primary) 55%, transparent);
}
[data-theme="dark"] .flatpickr-day.selected,
[data-theme="dark"] .flatpickr-day.selected:hover,
[data-theme="dark"] .flatpickr-day.startRange,
[data-theme="dark"] .flatpickr-day.endRange {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-primary-content);
}
[data-theme="dark"] .flatpickr-day.flatpickr-disabled,
[data-theme="dark"] .flatpickr-day.prevMonthDay,
[data-theme="dark"] .flatpickr-day.nextMonthDay {
  color: color-mix(in oklch, var(--color-base-content) 20%, transparent);
}
[data-theme="dark"] .flatpickr-time {
  background: var(--color-base-100);
  border-top-color: color-mix(in oklch, var(--color-base-content) 10%, transparent);
}
[data-theme="dark"] .flatpickr-time input,
[data-theme="dark"] .flatpickr-time .flatpickr-time-separator,
[data-theme="dark"] .flatpickr-time .flatpickr-am-pm {
  color: var(--color-base-content);
  background: transparent;
}
[data-theme="dark"] .flatpickr-time input:hover,
[data-theme="dark"] .flatpickr-time input:focus,
[data-theme="dark"] .flatpickr-time .flatpickr-am-pm:hover,
[data-theme="dark"] .flatpickr-time .flatpickr-am-pm:focus {
  background: color-mix(in oklch, var(--color-primary) 15%, transparent);
}
[data-theme="dark"] .numInputWrapper:hover {
  background: color-mix(in oklch, var(--color-base-content) 5%, transparent);
}
[data-theme="dark"] .numInputWrapper span.arrowUp::after {
  border-bottom-color: var(--color-base-content);
}
[data-theme="dark"] .numInputWrapper span.arrowDown::after {
  border-top-color: var(--color-base-content);
}

/* ── Hide number input spinners ── */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] { -moz-appearance: textfield; }

/* ── Wallet drag-and-drop ── */
.wallet-drag-ghost {
  opacity: 0.35;
  border: 2px dashed color-mix(in oklch, var(--color-primary) 50%, transparent);
  border-radius: 1rem;
}
.wallet-drag-chosen {
  box-shadow:
    0 8px 20px -4px rgba(0,0,0,0.3),
    0 0 0 2px color-mix(in oklch, var(--color-primary) 40%, transparent);
  transform: scale(1.02);
  transition: box-shadow 0.15s, transform 0.15s;
  z-index: 10;
}

/* ── Toast notifications ── */
@keyframes toastIn {
  from { opacity: 0; transform: translateX(110%) scale(0.92); }
  to   { opacity: 1; transform: translateX(0)   scale(1); }
}
@keyframes toastOut {
  from { opacity: 1; transform: translateX(0)   scale(1);   max-height: 120px; }
  to   { opacity: 0; transform: translateX(110%) scale(0.92); }
}
@keyframes toastProgress {
  from { width: 100%; }
  to   { width: 0%; }
}
.wimm-toast {
  animation: toastIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  position: relative;
  overflow: hidden;
  min-width: 280px;
  max-width: 380px;
  border-radius: 12px;
  padding: 14px 16px 18px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  box-shadow:
    0 4px 6px -1px rgba(0,0,0,0.3),
    0 10px 30px -5px rgba(0,0,0,0.4),
    0 0 0 1px rgba(255,255,255,0.05) inset;
  backdrop-filter: blur(12px);
  cursor: default;
}
.wimm-toast.hiding {
  animation: toastOut 0.25s ease-in forwards;
}
.wimm-toast-error {
  background: color-mix(in oklch, var(--color-error) 12%, var(--color-base-100));
  border: 1.5px solid color-mix(in oklch, var(--color-error) 60%, transparent);
  color: var(--color-base-content);
}
.wimm-toast-warning {
  background: color-mix(in oklch, var(--color-warning) 12%, var(--color-base-100));
  border: 1.5px solid color-mix(in oklch, var(--color-warning) 60%, transparent);
  color: var(--color-base-content);
}
.wimm-toast-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
}
.wimm-toast-error .wimm-toast-icon   { color: var(--color-error); }
.wimm-toast-warning .wimm-toast-icon { color: var(--color-warning); }
.wimm-toast-body {
  flex: 1;
  font-size: 0.875rem;
  line-height: 1.45;
  font-weight: 500;
}
.wimm-toast-close {
  flex-shrink: 0;
  opacity: 0.4;
  cursor: pointer;
  line-height: 1;
  padding: 2px;
  border-radius: 4px;
  transition: opacity 0.15s;
  background: none;
  border: none;
  color: inherit;
}
.wimm-toast-close:hover { opacity: 0.9; }
.wimm-toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  border-radius: 0 0 12px 12px;
  animation: toastProgress linear forwards;
}
.wimm-toast-error   .wimm-toast-progress { background: var(--color-error); }
.wimm-toast-warning .wimm-toast-progress { background: var(--color-warning); }