/* ─────────────────────────────────────────────────────────────
   Qly.my — Custom CSS
   Brand palette:  Teal #0CBDB5  |  Navy #0F2460
                   Orange #F97316 |  Pink #EC4899 | Purple #7C3AED
   ───────────────────────────────────────────────────────────── */

/* ── CSS Variables ─────────────────────────────────────────── */
:root {
  --qly-teal:       #0CBDB5;
  --qly-teal-dark:  #0A9E97;
  --qly-teal-light: #E0F7F6;
  --qly-navy:       #0F2460;
  --qly-navy-mid:   #1B3580;
  --qly-orange:     #F97316;
  --qly-pink:       #EC4899;
  --qly-purple:     #7C3AED;

  /* camelCase aliases for inline style compatibility */
  --qly-tealLight:  #E0F7F6;
  --qly-tealDark:   #0A9E97;
  --qly-navyMid:    #1B3580;
}

/* ── Font ──────────────────────────────────────────────────── */
body {
  font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Scrollbar ──────────────────────────────────────────────── */
::-webkit-scrollbar        { width: 5px; height: 5px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  { background: #0CBDB5; border-radius: 10px; opacity: 0.5; }
::-webkit-scrollbar-thumb:hover { background: #0A9E97; }

/* ── Page fade-in ───────────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.qly-fade-in { animation: fadeIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) both; }

/* ── Scroll reveal ─────────────────────────────────────────── */
.qly-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.qly-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ── Float animation (hero mockup) ─────────────────────────── */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-10px); }
}
@keyframes floatAlt {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50%       { transform: translateY(-7px) rotate(0.5deg); }
}
.qly-float       { animation: float    4s ease-in-out infinite; }
.qly-float-delay { animation: floatAlt 4s ease-in-out infinite 1.2s; }
.qly-float-delay2{ animation: float    4s ease-in-out infinite 2.4s; }

/* ── Spin slow (decorative ring) ───────────────────────────── */
@keyframes spinSlow {
  from { transform: translate(-50%,-50%) rotate(0deg); }
  to   { transform: translate(-50%,-50%) rotate(360deg); }
}
.qly-spin-slow { animation: spinSlow 25s linear infinite; }

/* ── Count-up pulse ─────────────────────────────────────────── */
@keyframes countPop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}
.qly-count[data-counted="1"] { animation: countPop 0.3s ease-out; }

/* ── Gradient text helper ───────────────────────────────────── */
.qly-gradient-text {
  background: linear-gradient(135deg, #0CBDB5 0%, #7C3AED 60%, #EC4899 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.qly-gradient-text-warm {
  background: linear-gradient(135deg, #F97316 0%, #EC4899 50%, #7C3AED 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Animated gradient background ──────────────────────────── */
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.qly-animated-gradient {
  background: linear-gradient(-45deg, #0F2460, #1B3580, #0A4060, #0CBDB5, #0F2460);
  background-size: 400% 400%;
  animation: gradientShift 12s ease infinite;
}

/* ── Skeleton loading ───────────────────────────────────────── */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.qly-skeleton {
  background: linear-gradient(90deg, #F1F5F9 25%, #E2E8F0 50%, #F1F5F9 75%);
  background-size: 800px 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: 0.5rem;
}

/* ── Status badges ─────────────────────────────────────────── */
.qly-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.65rem;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  text-transform: capitalize;
}
.qly-badge-pending         { background: #FEF3C7; color: #92400E; border-color: #FDE68A; }
.qly-badge-confirmed       { background: #E0F7F6; color: #0A6E69; border-color: #9EE9E6; }
.qly-badge-rejected        { background: #FEE2E2; color: #991B1B; border-color: #FECACA; }
.qly-badge-rescheduled     { background: #EDE9FE; color: #5B21B6; border-color: #DDD6FE; }
.qly-badge-vehicle_arrived { background: #E8EDF8; color: #1B3580; border-color: #C7D2FE; }
.qly-badge-in_service      { background: #FFF3E8; color: #9A3412; border-color: #FDBA74; }
.qly-badge-ready           { background: #ECFDF5; color: #065F46; border-color: #6EE7B7; }
.qly-badge-collected       { background: #ECFDF5; color: #065F46; border-color: #6EE7B7; }
.qly-badge-completed       { background: #E0F7F6; color: #0A6E69; border-color: #5EEAD4; }
.qly-badge-cancelled       { background: #F1F5F9; color: #475569; border-color: #E2E8F0; }
.qly-badge-no_show         { background: #FEE2E2; color: #991B1B; border-color: #FECACA; }

/* ── Card hover lift ───────────────────────────────────────── */
.qly-card-hover {
  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.qly-card-hover:hover {
  box-shadow: 0 12px 32px -6px rgb(12 189 181 / 0.15), 0 4px 8px -4px rgb(0 0 0 / 0.06);
  transform: translateY(-3px);
}

/* ── Form inputs ───────────────────────────────────────────── */
.qly-input {
  width: 100%;
  padding: 0.6rem 0.875rem;
  background: #F8FAFC;
  border: 1.5px solid #E2E8F0;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  color: #0F172A;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  outline: none;
}
.qly-input:focus {
  border-color: #0CBDB5;
  box-shadow: 0 0 0 3px rgb(12 189 181 / 0.15);
  background: #fff;
}
.qly-input::placeholder { color: #94A3B8; }

/* ── Buttons ───────────────────────────────────────────────── */
.qly-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 1.25rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
  cursor: pointer;
  border: none;
}
.qly-btn:active { transform: scale(0.97); }

/* Primary — teal */
.qly-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 1.25rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  background: var(--qly-teal);
  color: #fff;
  box-shadow: 0 2px 8px rgb(12 189 181 / 0.35);
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.qly-btn-primary:hover {
  background: var(--qly-teal-dark);
  box-shadow: 0 4px 14px rgb(12 189 181 / 0.45);
}
.qly-btn-primary:active { transform: scale(0.97); }

/* Outline */
.qly-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 1.25rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  background: #fff;
  color: #334155;
  border: 1.5px solid #E2E8F0;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.qly-btn-outline:hover { background: #F8FAFC; border-color: #CBD5E1; }
.qly-btn-outline:active { transform: scale(0.97); }

/* Danger */
.qly-btn-danger {
  border-radius: 0.75rem;
  background: #EF4444;
  color: #fff;
  box-shadow: 0 2px 8px rgb(239 68 68 / 0.25);
}
.qly-btn-danger:hover { background: #DC2626; }

/* Navy */
.qly-btn-navy {
  border-radius: 0.75rem;
  background: var(--qly-navy);
  color: #fff;
  box-shadow: 0 2px 8px rgb(15 36 96 / 0.25);
}
.qly-btn-navy:hover { background: var(--qly-navy-mid); }

/* ── Flash alerts ───────────────────────────────────────────── */
.qly-flash { transition: opacity 0.3s ease; }

/* ── Sidebar active item glow ───────────────────────────────── */
.sidebar-active-item {
  background: rgba(12, 189, 181, 0.15);
  color: #0CBDB5;
}

/* ── Gradient orb ───────────────────────────────────────────── */
.qly-orb {
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  opacity: 0.35;
}

/* ── Dashboard top bar search ───────────────────────────────── */
.qly-dash-avatar {
  background: linear-gradient(135deg, #0CBDB5, #7C3AED);
}