/* Tayoly custom styles */

/* ===== Custom DaisyUI Theme (OKLCH) ===== */
[data-theme="tayoly"] {
  /* Primary: Trust Blue */
  --p: 0.5 0.15 250;
  --pc: 0.98 0.01 250;

  /* Secondary: Slate */
  --s: 0.6 0.1 200;
  --sc: 0.98 0.01 200;

  /* Accent: Warm Amber */
  --a: 0.75 0.18 85;
  --ac: 0.2 0.05 85;

  /* Neutral: Dark Charcoal */
  --n: 0.25 0.02 250;
  --nc: 0.98 0.01 250;

  /* Base: Clean whites with slight blue tint */
  --b1: 0.99 0.01 250;
  --b2: 0.96 0.02 250;
  --b3: 0.92 0.02 250;
  --bc: 0.2 0.05 250;

  /* State Colors */
  --su: 0.7 0.18 150;
  --suc: 0.98 0.01 150;
  --wa: 0.75 0.18 85;
  --wac: 0.2 0.05 85;
  --er: 0.6 0.2 25;
  --erc: 0.98 0.01 25;
  --in: 0.65 0.15 250;
  --inc: 0.98 0.01 250;

  /* DaisyUI Tokens */
  --rounded-box: 0.75rem;
  --rounded-btn: 0.375rem;
  --rounded-badge: 1.9rem;
  --animation-btn: 0.2s;
  --animation-input: 0.2s;
  --btn-focus-scale: 0.98;
  --border-btn: 1px;
  --tab-border: 2px;
  --tab-radius: 0.375rem;
}

/* ===== Global Progress Bar ===== */
.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: oklch(var(--p));
  width: 0%;
  transition: width 0.2s, opacity 0.4s;
  opacity: 0;
  z-index: 9999;
}

.htmx-request .progress-bar,
.htmx-request.progress-bar {
  width: 100%;
  opacity: 1;
  transition: width 2s;
}

/* ===== View Transitions ===== */
@keyframes fade-in {
  from { opacity: 0; }
}

@keyframes fade-out {
  to { opacity: 0; }
}

@keyframes slide-from-right {
  from { transform: translateX(30px); }
}

@keyframes slide-to-left {
  to { transform: translateX(-30px); }
}

::view-transition-old(page-transition) {
  animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
             300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}

::view-transition-new(page-transition) {
  animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
             300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}

#main-content {
  view-transition-name: page-transition;
}

/* ===== Alpine.js x-cloak ===== */
[x-cloak] {
  display: none !important;
}

/* ===== HTMX Button Indicator ===== */
.btn .htmx-indicator {
  display: none;
}

.btn.htmx-request .submit-text {
  display: none;
}

.btn.htmx-request .htmx-indicator {
  display: inline-flex;
}

/* Non-button indicators */
:not(.btn) > .htmx-indicator {
  display: none;
}

.htmx-request > .htmx-indicator {
  display: inline-flex;
}

/* ===== HTMX Swap Transitions ===== */
.htmx-swapping {
  opacity: 0;
  transition: opacity 0.2s ease-out;
}

.htmx-settling {
  opacity: 1;
  transition: opacity 0.2s ease-in;
}