/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* ── Global form input focus ring ───────────────────────────────────────── */
/* Applies a consistent purple focus ring to all text-like inputs app-wide. */
input:not([type=submit]):not([type=button]):not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: rgb(168 85 247);
  box-shadow: 0 0 0 3px rgb(168 85 247 / 0.15);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* ── Modern soft shadows (override Tailwind defaults) ───────────────────── */
.shadow-sm { box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.04); }
.shadow    { box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 12px rgba(0,0,0,0.05); }
.shadow-md { box-shadow: 0 2px 6px rgba(0,0,0,0.05), 0 6px 20px rgba(0,0,0,0.07); }
.shadow-lg { box-shadow: 0 4px 12px rgba(0,0,0,0.06), 0 12px 32px rgba(0,0,0,0.08); }
.shadow-xl { box-shadow: 0 8px 24px rgba(0,0,0,0.08), 0 24px 48px rgba(0,0,0,0.08); }

/* ── Toast notification animations ──────────────────────────────────────── */
@keyframes toast-in {
  from { transform: translateX(calc(-100% - 1.5rem)); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
@keyframes toast-out {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-1rem); }
}
.toast-enter { animation: toast-in  0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.toast-exit  { animation: toast-out 0.25s ease-in forwards; }

/* ── Flyout menu: animated Siri-style gradient border + bounce entry ─────── */
@property --flyout-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes spin-flyout-border {
  to { --flyout-angle: 360deg; }
}

@keyframes flyout-enter {
  0%   { opacity: 0; transform: translateY(-8px) scale(0.95); }
  55%  { opacity: 1; transform: translateY(3px) scale(1.018); }
  75%  { transform: translateY(-1.5px) scale(0.997); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.flyout-border-wrap {
  padding: 2px;
  border-radius: 18px;
  background: conic-gradient(
    from var(--flyout-angle) at 50% 50%,
    #60a5fa 0%,
    #a855f7 30%,
    #f472b6 55%,
    #818cf8 75%,
    #60a5fa 100%
  );
  animation:
    flyout-enter 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both,
    spin-flyout-border 5s linear infinite;
  box-shadow:
    0 0 28px rgba(168, 85, 247, 0.35),
    0 0 56px rgba(96, 165, 250, 0.18),
    0 12px 40px rgba(0, 0, 0, 0.1);
}

/* ── KPI generation shimmer skeleton ────────────────────────────────────── */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
.kpi-skeleton {
  background: linear-gradient(90deg,
    #f3f4f6 25%, #e9eaf0 50%, #f3f4f6 75%);
  background-size: 200% 100%;
  animation: shimmer 1.6s ease-in-out infinite;
}

/* ── Standardised button base ────────────────────────────────────────────── */
/* Usage: class="btn btn-primary | btn-secondary | btn-danger | btn-ghost"   */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center; /* centers text horizontally — critical for input[type=submit] */
  text-align: center;
  gap: 0.5rem;             /* gap-2 */
  padding: 0.625rem 1.25rem; /* py-2.5 px-5 */
  font-size: 0.875rem;     /* text-sm */
  font-weight: 500;        /* font-medium */
  border-radius: 0.5rem;   /* rounded-lg */
  border: 1px solid transparent;
  line-height: 1.25rem;
  transition: opacity 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
  cursor: pointer;
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn:disabled, .btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }

.btn-primary {
  background: linear-gradient(to right, #4f46e5, #2563eb);
  color: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.04);
}
.btn-primary:hover { opacity: 0.9; }

.btn-secondary {
  background: #fff;
  color: #374151;         /* text-gray-700 */
  border-color: #e5e7eb;  /* border-gray-200 */
}
.btn-secondary:hover { background: #f9fafb; border-color: #d1d5db; }

.btn-danger {
  background: #dc2626;
  color: #fff;
}
.btn-danger:hover { opacity: 0.9; }

.btn-danger-outline {
  background: #fff;
  color: #dc2626;
  border-color: #fecaca;
}
.btn-danger-outline:hover { background: #fef2f2; }

.btn-ghost {
  background: transparent;
  color: #6b7280;
  border-color: transparent;
}
.btn-ghost:hover { background: #f3f4f6; color: #111827; }

/* ── Standardised form controls ─────────────────────────────────────────── */
/* Ensures select height / appearance matches text inputs everywhere.        */
select {
  appearance: none;
  -webkit-appearance: none;
  /* Height is driven by padding + line-height to match text inputs.
     Tailwind py-* classes on individual selects will override padding
     but appearance:none + the arrow image are the critical fixes.   */
  padding: 0.5rem 2.25rem 0.5rem 0.75rem; /* py-2 equivalent + right room for arrow */
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #111827;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 1.25rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
}
select:disabled { opacity: 0.5; background-color: #f9fafb; cursor: not-allowed; }