@tailwind base;
@tailwind components;
@tailwind utilities;

@import url("https://fonts.googleapis.com/css2?family=Oxanium:wght@400;600;700&display=swap");

@layer base {
  :root {
    --ha-ink: 30 21 16;
    --ha-ink-soft: 84 60 45;
    --ha-surface: 248 241 227;
    --ha-surface-2: 239 229 212;
    --ha-surface-3: 214 197 176;
    --ha-teal: 80 196 201;
    --ha-cyan: 143 220 240;
    --ha-ember: 240 138 43;
    --ha-gold: 244 192 106;
    --ha-ring: 114 214 222;
    --ha-shadow: 12 8 6;
    --ha-danger: 244 63 94;
    --ha-success: 16 185 129;
    --ha-warning: 245 158 11;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --ha-ink: 245 231 214;
      --ha-ink-soft: 210 186 162;
      --ha-surface: 22 16 14;
      --ha-surface-2: 34 24 20;
      --ha-surface-3: 62 44 36;
      --ha-teal: 90 210 214;
      --ha-cyan: 154 228 244;
      --ha-ember: 248 142 52;
      --ha-gold: 250 205 130;
      --ha-ring: 154 228 244;
      --ha-shadow: 6 4 3;
      --ha-danger: 248 113 113;
      --ha-success: 52 211 153;
      --ha-warning: 251 191 36;
    }
  }
}

@layer components {
  .text-sizes {
    @apply text-xs sm:text-sm md:text-base lg:text-lg
  }

  .ha-shell {
    @apply relative overflow-visible rounded-2xl border border-brand-surface-3 bg-brand-surface/90 text-brand-ink shadow-brand-lg;
  }

  .ha-body {
    background-color: rgb(var(--ha-surface));
    background-image:
      radial-gradient(circle at 14% 12%, rgba(var(--ha-cyan) / 0.35), transparent 38%),
      radial-gradient(circle at 90% 5%, rgba(var(--ha-ember) / 0.25), transparent 34%),
      radial-gradient(circle at 12% 88%, rgba(var(--ha-teal) / 0.22), transparent 42%),
      linear-gradient(180deg, rgba(var(--ha-surface) / 0.98), rgba(var(--ha-surface-2) / 0.95));
    background-attachment: fixed;
  }

  .ha-body h1 {
    @apply font-display text-3xl md:text-4xl font-bold text-brand-ink;
  }

  .ha-body h2 {
    @apply font-display text-2xl font-semibold text-brand-ink;
  }

  .ha-body h3 {
    @apply font-display text-xl font-semibold text-brand-ink;
  }

  .ha-text {
    color: rgb(var(--ha-ink));
  }

  .ha-text-muted {
    color: rgb(var(--ha-ink-soft));
  }

  .ha-text-subtle {
    color: rgba(var(--ha-ink-soft) / 0.8);
  }

  .ha-text-danger {
    color: rgb(var(--ha-danger));
  }

  .ha-text-success {
    color: rgb(var(--ha-success));
  }

  .ha-text-warning {
    color: rgb(var(--ha-warning));
  }

  .ha-text-link {
    color: rgb(var(--ha-teal));
    text-decoration: underline;
    text-decoration-color: rgba(var(--ha-teal) / 0.35);
    text-underline-offset: 3px;
  }

  .ha-text-accent {
    color: rgb(var(--ha-gold));
  }

  .ha-text-invert {
    color: #fff;
  }

  .ha-text-link:hover {
    color: rgb(var(--ha-ember));
    text-decoration-color: rgba(var(--ha-ember) / 0.6);
  }

  .ha-text-danger:hover {
    color: rgba(var(--ha-danger) / 0.85);
  }

  .ha-text-warning:hover {
    color: rgba(var(--ha-warning) / 0.9);
  }

  .ha-hero-title {
    @apply text-4xl md:text-6xl !important;
    color: rgba(251 244 233 / 0.98) !important;
  }

  .ha-body .text-gray-900 {
    color: rgb(var(--ha-ink));
  }

  .ha-body .text-gray-800 {
    color: rgb(var(--ha-ink));
  }

  .ha-body .text-gray-700 {
    color: rgb(var(--ha-ink-soft));
  }

  .ha-body .text-gray-600 {
    color: rgb(var(--ha-ink-soft));
  }

  .ha-body .text-gray-500 {
    color: rgba(var(--ha-ink-soft) / 0.85);
  }

  .ha-body .text-gray-400 {
    color: rgba(var(--ha-ink-soft) / 0.75);
  }

  .ha-body .text-gray-300 {
    color: rgba(var(--ha-ink-soft) / 0.7);
  }

  .ha-body .bg-white {
    background-color: rgb(var(--ha-surface));
  }

  .ha-body .bg-gray-50 {
    background-color: rgba(var(--ha-surface-2) / 0.8);
  }

  .ha-body .bg-gray-100 {
    background-color: rgba(var(--ha-surface-2) / 0.85);
  }

  .ha-body .bg-gray-700 {
    background-color: rgba(var(--ha-surface-2) / 0.9);
  }

  .ha-body .bg-gray-800 {
    background-color: rgba(var(--ha-surface-2) / 0.95);
  }

  .ha-body .border-gray-200 {
    border-color: rgba(var(--ha-ink-soft) / 0.2);
  }

  .ha-body .border-gray-300 {
    border-color: rgba(var(--ha-ink-soft) / 0.25);
  }

  .ha-body .border-gray-700 {
    border-color: rgba(var(--ha-ink-soft) / 0.3);
  }

  .ha-form {
    @apply space-y-6 text-sm text-brand-ink;
  }

  .ha-form .field {
    @apply flex flex-col gap-2;
  }

  .ha-form .help {
    @apply text-xs text-brand-ink-soft;
  }

  .ha-form .error {
    @apply text-xs text-rose-500;
  }

  .ha-nav {
    @apply border-b border-brand-surface-3 bg-brand-surface/90 text-brand-ink shadow-brand-sm backdrop-blur-md;
  }

  .ha-nav-pill {
    @apply inline-flex items-center gap-2 rounded-full border border-brand-surface-3 px-3 py-1 text-xs font-semibold uppercase tracking-wide text-brand-ink-soft transition leading-none h-7;
  }

  .ha-nav-pill-compact {
    @apply px-2 py-0.5 text-[10px] tracking-[0.18em] h-6 leading-none;
  }

  .ha-nav-icon {
    @apply text-[10px] leading-none;
  }

  .ha-logo {
    @apply w-10 h-10 md:h-12 md:w-12;
  }

  .ha-nav-pill:hover {
    border-color: rgba(var(--ha-ember) / 0.6);
    color: rgb(var(--ha-ink));
  }

  .ha-menu-card {
    @apply rounded-2xl border border-brand-surface-3 bg-brand-surface text-brand-ink shadow-brand-lg;
  }

  .ha-menu-item {
    @apply flex items-center gap-2 rounded-lg px-3 py-2 text-sm font-semibold tracking-wide text-brand-ink-soft transition;
  }

  .ha-menu-item:hover {
    background-color: rgba(var(--ha-teal) / 0.15);
    color: rgb(var(--ha-ink));
  }

  .ha-menu-tile {
    @apply flex flex-col items-center justify-center gap-2 rounded-xl border border-brand-surface-3 bg-brand-surface-2/80 px-4 py-5 text-center text-sm font-semibold text-brand-ink transition;
  }

  .ha-menu-tile:hover {
    border-color: rgba(var(--ha-teal) / 0.6);
    background-color: rgba(var(--ha-teal) / 0.12);
  }

  .ha-menu-section {
    @apply text-[10px] font-semibold uppercase tracking-[0.3em] text-brand-ink-soft;
  }

  .ha-menu-divider {
    border-color: rgba(var(--ha-ink-soft) / 0.2);
  }

  .ha-footer {
    @apply mt-10 border-t border-brand-surface-3 bg-brand-surface-2/80 text-brand-ink;
  }

  .ha-footer-title {
    @apply font-display text-lg font-semibold tracking-wide text-brand-ink;
  }

  .ha-footer-link {
    @apply inline-flex items-center gap-2 text-sm text-brand-ink-soft transition underline decoration-transparent decoration-1 underline-offset-4;
  }

  .ha-footer-link:hover {
    color: rgb(var(--ha-ember));
    text-decoration-color: rgba(var(--ha-ember) / 0.6);
  }

  .ha-footer-legal .ha-footer-link {
    text-decoration-color: rgba(var(--ha-ember) / 0.5);
  }

  .ha-icon-button-danger {
    @apply inline-flex h-7 w-9 items-center justify-center rounded border border-rose-500/40 text-rose-500 transition;
  }

  .ha-icon-button-danger:hover {
    border-color: rgb(244 63 94);
    background-color: rgba(244 63 94 / 0.12);
  }

  .ha-coin {
    @apply text-brand-gold;
  }

  .ha-dropdown {
    z-index: 9999;
  }

  .ha-cta {
    background-image: linear-gradient(120deg, rgba(var(--ha-ember) / 0.95), rgba(var(--ha-teal) / 0.95));
  }

  .ha-cta:hover {
    background-image: linear-gradient(120deg, rgba(var(--ha-ember) / 0.85), rgba(var(--ha-teal) / 0.85));
  }

  .ha-hero-overlay {
    background-image:
      linear-gradient(rgba(0 0 0 / 0.55), rgba(0 0 0 / 0.75)),
      radial-gradient(circle at 20% 15%, rgba(var(--ha-ember) / 0.18), transparent 60%),
      radial-gradient(circle at 80% 20%, rgba(var(--ha-teal) / 0.18), transparent 60%);
  }

  @media (prefers-color-scheme: dark) {
    .ha-hero-overlay {
      background-image:
        linear-gradient(rgba(0 0 0 / 0.24), rgba(0 0 0 / 0.84)),
        radial-gradient(circle at 20% 15%, rgba(var(--ha-ember) / 0.2), transparent 60%),
        radial-gradient(circle at 80% 20%, rgba(var(--ha-teal) / 0.2), transparent 60%);
    }
  }

  .ha-auth-hero {
    background-image:
      linear-gradient(120deg, rgba(var(--ha-ink) / 0.4), rgba(var(--ha-ink) / 0.3)),
      radial-gradient(circle at 20% 10%, rgba(var(--ha-ember) / 0.35), transparent 50%),
      radial-gradient(circle at 80% 20%, rgba(var(--ha-teal) / 0.35), transparent 50%),
      url(/assets/home-bg/02-ClientArtwork2024_3627x2040.jpg);
    background-size: cover;
    background-position: center;
  }

  @media (prefers-color-scheme: dark) {
    .ha-auth-hero {
      background-image:
        linear-gradient(120deg, rgba(var(--ha-ink) / 0.15), rgba(var(--ha-ink) / 0.2)),
        radial-gradient(circle at 25% 10%, rgba(var(--ha-ember) / 0.25), transparent 30%),
        radial-gradient(circle at 85% 20%, rgba(var(--ha-teal) / 0.25), transparent 30%),
        url(/assets/home-bg/02-ClientArtwork2024_3627x2040.jpg);
    }
  }

  .ha-auth-hero-alt {
    background-image:
      linear-gradient(120deg, rgba(var(--ha-ink) / 0.4), rgba(var(--ha-ink) / 0.3)),
      radial-gradient(circle at 25% 10%, rgba(var(--ha-ember) / 0.35), transparent 30%),
      radial-gradient(circle at 85% 20%, rgba(var(--ha-teal) / 0.35), transparent 30%),
      url(/assets/home-bg/01-SummerUpdate2012.jpg);
    background-size: cover;
    background-position: center;
  }

  @media (prefers-color-scheme: dark) {
    .ha-auth-hero-alt {
      background-image:
        linear-gradient(120deg, rgba(var(--ha-ink) / 0.15), rgba(var(--ha-ink) / 0.2)),
        radial-gradient(circle at 25% 10%, rgba(var(--ha-ember) / 0.25), transparent 30%),
        radial-gradient(circle at 85% 20%, rgba(var(--ha-teal) / 0.25), transparent 30%),
        url(/assets/home-bg/01-SummerUpdate2012.jpg);
    }
  }

  .ha-hero-scroll {
    animation: ha-hero-scroll 40s linear infinite;
  }

  .ha-home-nav {
    background-color: rgba(var(--ha-shadow) / 0.72);
    border-bottom: 1px solid rgba(250 233 212 / 0.2);
    backdrop-filter: blur(10px);
  }

  .ha-home-nav .ha-nav-pill {
    border-color: rgba(250 233 212 / 0.34);
    color: rgba(250 233 212 / 0.95);
  }

  .ha-home-nav .ha-nav-pill:hover {
    border-color: rgba(var(--ha-ember) / 0.7);
    color: rgba(255 247 234 / 1);
    background-color: rgba(255 255 255 / 0.06);
  }

  .ha-home-nav .ha-nav-icon {
    color: rgba(var(--ha-teal) / 0.95);
  }

  .ha-hero {
    background-color: rgb(var(--ha-surface));
    background-image:
      radial-gradient(circle at 18% -8%, rgba(var(--ha-cyan) / 0.35), transparent 45%),
      radial-gradient(circle at 100% 6%, rgba(var(--ha-ember) / 0.25), transparent 42%),
      radial-gradient(circle at 8% 75%, rgba(var(--ha-teal) / 0.25), transparent 46%),
      linear-gradient(180deg, rgba(var(--ha-surface) / 0.96), rgba(var(--ha-surface-2) / 0.9));
  }

  .ha-panel {
    @apply rounded-xl border border-brand-surface-3 bg-brand-surface/90 text-brand-ink shadow-brand-sm;
  }

  .ha-panel-header {
    @apply font-display text-lg tracking-wide text-brand-ink;
  }

  .ha-card {
    @apply rounded-xl border border-brand-surface-3 bg-brand-surface/95 text-brand-ink shadow-brand-sm transition;
  }

  .ha-card:hover {
    border-color: rgba(var(--ha-teal) / 0.65);
    box-shadow: 0 12px 28px rgba(var(--ha-shadow) / 0.25);
  }

  .ha-row {
    @apply rounded-lg border border-brand-surface-3 bg-brand-surface-2/80 text-brand-ink;
  }

  .ha-tabs {
    @apply flex flex-wrap gap-2 border-b border-brand-surface-3;
  }

  .ha-tab {
    @apply rounded px-4 py-2 text-sm font-semibold transition;
  }

  .ha-tab-active {
    @apply bg-brand-surface-3 text-brand-ink shadow-brand-sm;
  }

  .ha-tab-inactive {
    @apply text-brand-ink-soft hover:bg-brand-surface-2/70;
  }

  .ha-dropdown-surface {
    @apply rounded-lg border border-brand-surface-3 bg-brand-surface text-brand-ink shadow-brand-sm;
  }

  .ha-card-top {
    @apply inline-flex items-center border border-brand-surface-3 bg-brand-surface-2/90 px-3 text-xs font-semibold tracking-wide text-brand-ink shadow-brand-sm;
    height: 1.5rem;
  }

  .ha-card-top-left {
    @apply rounded-tl-lg rounded-br-lg;
  }

  .ha-card-top-right {
    @apply rounded-tr-lg rounded-bl-lg;
  }

  .ha-card-bottom-right {
    @apply rounded-br-lg rounded-bl-lg;
  }

  .ha-tag {
    @apply inline-flex items-center rounded-full border border-brand-surface-3 bg-brand-surface-2/80 px-2 py-0.5 text-[11px] font-semibold tracking-wide text-brand-ink;
  }

  .ha-input {
    @apply rounded-md border border-brand-surface-3 bg-brand-surface/90 text-brand-ink shadow-sm focus:border-brand-teal focus:ring-2 focus:ring-brand-ring/40;
  }

  .ha-button {
    @apply inline-flex items-center gap-2 rounded-md bg-brand-ember px-4 py-2 text-xs font-semibold uppercase tracking-wide text-white shadow-brand-sm transition font-display;
  }

  .ha-button:hover {
    background-color: rgba(var(--ha-ember) / 0.85);
  }

  .ha-button-secondary {
    @apply inline-flex items-center gap-2 rounded-md border border-brand-surface-3 bg-brand-surface-2/80 px-4 py-2 text-xs font-semibold uppercase tracking-wide text-brand-ink transition;
  }

  .ha-button-secondary:hover {
    background-color: rgba(var(--ha-teal) / 0.12);
    border-color: rgba(var(--ha-teal) / 0.6);
  }

  .ha-button-secondary-peer-checked {
    background-color: rgba(var(--ha-teal) / 0.12);
    border-color: rgba(var(--ha-teal) / 0.6);
  }

  .ha-button-secondary-checked {
    background-color: rgba(var(--ha-teal) / 0.12);
    border-color: rgba(var(--ha-teal) / 0.6);
  }

  .ha-button-danger {
    @apply inline-flex items-center gap-2 rounded-md border border-rose-500/40 bg-rose-500/10 px-4 py-2 text-xs font-semibold uppercase tracking-wide ha-text-danger transition;
  }

  .ha-button-danger:hover {
    background-color: rgba(var(--ha-danger) / 0.2);
    border-color: rgb(var(--ha-danger));
  }

  .ha-body form label {
    @apply text-xs font-semibold uppercase tracking-wide text-brand-ink-soft mb-1;
  }

  .ha-body form input[type="text"],
  .ha-body form input[type="email"],
  .ha-body form input[type="password"],
  .ha-body form input[type="number"],
  .ha-body form input[type="date"],
  .ha-body form input[type="search"],
  .ha-body form input[type="tel"],
  .ha-body form input[type="url"],
  .ha-body form select,
  .ha-body form textarea {
    @apply ha-input w-full px-3 py-2 text-sm;
  }

  /* .ha-body form input[type="checkbox"], */
  /* .ha-body form input[type="radio"] { */
  /*   @apply h-4 w-4 rounded border-brand-surface-3 bg-brand-surface-3/90 text-brand-teal focus:ring-brand-ring/40; */
  /*   accent-color: rgb(var(--ha-ember)); */
  /* } */

  .ha-checkbox {
    @apply h-4 w-4 rounded border border-brand-surface-3 bg-brand-surface-2;
    appearance: none;
    -webkit-appearance: none;
    display: inline-grid;
    place-content: center;
    outline: none;
  }

  .ha-checkbox:hover {
    border-color: rgba(var(--ha-ember) / 0.7);
    background-color: rgba(var(--ha-ember) / 0.1);
    box-shadow: 0 0 0 2px rgba(var(--ha-ember) / 0.25);
  }

  .ha-checkbox:focus,
  .ha-checkbox:focus-visible {
    box-shadow: 0 0 0 2px rgba(var(--ha-ember) / 0.35);
  }

  .ha-checkbox:checked {
    background-color: rgb(var(--ha-ember)) !important;
    border-color: rgb(var(--ha-ember)) !important;
    box-shadow: 0 0 0 2px rgba(var(--ha-ember) / 0.35);
  }

  .ha-checkbox:checked::after {
    content: "";
    width: 0.35rem;
    height: 0.6rem;
    border: 2px solid #fff;
    border-top: 0;
    border-left: 0;
    transform: rotate(45deg);
    margin-top: -1px;
  }

  .ha-checkbox:checked:hover {
    background-color: rgba(var(--ha-ember) / 0.95);
    border-color: rgba(var(--ha-ember) / 0.95);
  }

  .ha-body form legend {
    @apply text-xs font-semibold uppercase tracking-wide text-brand-ink-soft;
  }

  .ha-frame {
    position: relative;
  }

  .ha-frame-loading {
    display: none;
  }

  turbo-frame[busy] .ha-frame-loading {
    display: flex;
  }

  turbo-frame[busy] .ha-frame-content {
    opacity: 0.35;
    filter: blur(0.4px);
  }
}

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/

/* Tooltip container */
.tooltip {
  position: relative;
}

/* Tooltip text */
.tooltip-text {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0.3s, opacity 0.3s ease-in-out;
}

/* Show tooltip text on hover */
.tooltip:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

@layer utilities {
  .text-primary {
    color: rgb(var(--ha-teal));
  }

  .text-secondary {
    color: rgb(var(--ha-ember));
  }

  .bg-primary {
    background-color: rgb(var(--ha-teal));
  }

  .bg-secondary {
    background-color: rgb(var(--ha-ember));
  }

  .border-primary {
    border-color: rgb(var(--ha-teal));
  }
}

@keyframes ha-hero-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-66.666%);
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */
.custom-dropdown-height {
    height: 300px; /* or any height you prefer */
    overflow-y: auto; /* Allows scrolling inside the dropdown */
}
.footer-links a {
    color: inherit;
    text-decoration: none;
}

.footer-links a:hover {
    text-decoration: underline;
}

.animated-label {
  color: #006400; /* Default color for light mode */
  display: inline-block;
  animation: pulse 2s infinite;
}

@media (prefers-color-scheme: dark) {
  .animated-label {
    color: #00FF00; /* Neon green for dark mode */
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}