/* ========================================
   Dark Theme - shadcn/ui Style
   ======================================== */

/* ---------- Tabs (shadcn style) ---------- */
.dark .tab-active {
  color: hsl(var(--foreground));
  background-color: hsl(var(--background));
  font-weight: 500;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.dark .packing-tab:not(.tab-active),
.dark .souvenir-tab:not(.tab-active) {
  color: hsl(var(--muted-foreground));
}

.dark .packing-tab:not(.tab-active):hover,
.dark .souvenir-tab:not(.tab-active):hover {
  color: hsl(var(--foreground));
  background-color: hsl(var(--accent));
}

/* ---------- Packing Items (shadcn card style) ---------- */
.dark .packing-item {
  background-color: hsl(var(--card));
  border-color: hsl(var(--border));
}

.dark .packing-text {
  color: hsl(var(--card-foreground));
}

/* ---------- Souvenir Items (shadcn card style) ---------- */
.dark .souvenir-item {
  border-color: hsl(var(--border));
  background-color: hsl(var(--card));
}

.dark .souvenir-thumb {
  background-color: hsl(var(--muted));
  border-color: hsl(var(--border));
}

.dark .souvenir-title {
  color: hsl(var(--card-foreground));
  font-weight: 500;
}

.dark .souvenir-desc {
  color: hsl(var(--muted-foreground));
}

/* ---------- Souvenir Modal (shadcn dialog style) ---------- */
.dark .souvenir-modal-dialog {
  background-color: hsl(var(--card));
  border: 1px solid hsl(var(--border));
}

.dark .souvenir-modal-caption {
  color: hsl(var(--muted-foreground));
}

.dark .souvenir-modal-close {
  border-color: hsl(var(--border));
  background-color: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
}

.dark .souvenir-modal-close:hover {
  background-color: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}

/* ---------- Checkbox (shadcn style) ---------- */
.dark input[type="checkbox"] {
  accent-color: hsl(var(--primary));
}

/* ---------- Focus Ring (shadcn style) ---------- */
.dark *:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

/* ---------- Budget Calculator (shadcn style) ---------- */
.dark .expense-row {
  background-color: hsl(var(--background));
  border-color: hsl(var(--border));
}

.dark .expense-row:hover {
  border-color: hsl(var(--ring));
}

.dark .expense-category,
.dark .expense-name,
.dark .expense-price {
  background-color: hsl(var(--background));
  border-color: hsl(var(--input));
  color: hsl(var(--foreground));
}

.dark .expense-category {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

.dark .expense-list:empty::before {
  color: hsl(var(--muted-foreground));
  border-color: hsl(var(--border));
}