@import "tailwindcss";

/*
 * Custom theme overrides for Calendink ESP32 dashboard.
 * TailwindCSS v4 uses CSS-based configuration via @theme.
 */
@theme {
  --color-bg-primary: #0f172a;
  --color-bg-card: #1e293b;
  --color-bg-card-hover: #263548;
  --color-text-primary: #f1f5f9;
  --color-text-secondary: #94a3b8;
  --color-accent: #38bdf8;
  --color-accent-hover: #7dd3fc;
  --color-border: #334155;
  --color-success: #22c55e;
  --color-danger: #ef4444;
  --color-danger-hover: #f87171;
}

/*
 * Global utility: main content radial gradient background.
 * Can't be expressed as a Tailwind arbitrary value due to multiple background layers.
 */
.main-gradient-bg {
  background: radial-gradient(circle at top right, var(--color-bg-card), transparent 40%),
              var(--color-bg-primary);
}

/*
 * Global utility: makes the native date picker icon cover the full input area.
 * This is a vendor pseudo-element — cannot be done with Tailwind utilities.
 */
.date-input::-webkit-calendar-picker-indicator {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  height: auto;
  opacity: 0;
  cursor: pointer;
}