/* Quadrix Admin — component styles & animations (vanilla CSS).
   Tailwind Play CDN handles utilities in markup; this file owns the
   reusable component classes and keyframe animations. */

:root {
  --brand-50:#eef2ff; --brand-100:#e0e7ff; --brand-400:#818cf8;
  --brand-500:#6366f1; --brand-600:#4f46e5; --brand-700:#4338ca;
  --violet-600:#7c3aed;
}

* { -webkit-tap-highlight-color: transparent; }
::selection { background: var(--brand-100); color: var(--brand-700); }

/* ---- scrollbars ---------------------------------------------------------- */
.sidebar-scroll::-webkit-scrollbar,
.modal-scroll::-webkit-scrollbar { width: 6px; }
.sidebar-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 99px; }
.modal-scroll::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 99px; }

/* ---- sidebar nav --------------------------------------------------------- */
.nav-link {
  position: relative; display: flex; align-items: center; gap: .7rem;
  padding: .58rem .8rem; border-radius: .8rem; font-size: .875rem; font-weight: 500;
  color: #94a3b8; transition: color .18s, background .18s, transform .18s;
}
.nav-link:hover { color: #fff; background: rgba(255,255,255,.05); }
.nav-link:active { transform: scale(.98); }
.nav-ico { width: 1.1rem; height: 1.1rem; flex-shrink: 0; }
.nav-active {
  color: #fff;
  background: linear-gradient(100deg, rgba(99,102,241,.22), rgba(124,58,237,.14));
  box-shadow: inset 0 0 0 1px rgba(129,140,248,.25);
}
.nav-active::before {
  content:""; position:absolute; left:-12px; top:50%; transform:translateY(-50%);
  height: 60%; width: 3px; border-radius: 99px;
  background: linear-gradient(var(--brand-400), var(--violet-600));
}

/* ---- surfaces / cards ---------------------------------------------------- */
.surface {
  background:#fff; border:1px solid #f1f5f9; border-radius:1.25rem;
  padding:1.25rem 1.5rem; box-shadow:0 1px 2px rgba(15,23,42,.04), 0 8px 24px -16px rgba(15,23,42,.12);
}
.stat-card {
  position:relative; overflow:hidden; background:#fff; border:1px solid #f1f5f9;
  border-radius:1.25rem; padding:1.25rem; opacity:0;
  box-shadow:0 1px 2px rgba(15,23,42,.04), 0 10px 30px -20px rgba(15,23,42,.25);
  animation: popIn .55s cubic-bezier(.21,1.02,.55,1) forwards;
  transition: transform .25s, box-shadow .25s;
}
.stat-card:hover { transform: translateY(-3px); box-shadow:0 20px 40px -24px rgba(79,70,229,.45); }
.card-sheen {
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.5) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .9s;
}
.stat-card:hover .card-sheen { transform: translateX(120%); }

/* ---- buttons ------------------------------------------------------------- */
.btn-primary, .btn-ghost, .btn-danger {
  display:inline-flex; align-items:center; gap:.5rem; justify-content:center;
  padding:.6rem 1rem; border-radius:.8rem; font-size:.875rem; font-weight:600;
  cursor:pointer; transition: transform .15s, box-shadow .2s, background .2s, opacity .2s;
  white-space:nowrap;
}
.btn-primary {
  color:#fff; border:none;
  background:linear-gradient(100deg, var(--brand-500), var(--violet-600));
  box-shadow:0 8px 20px -8px rgba(79,70,229,.6);
}
.btn-primary:hover { box-shadow:0 12px 26px -8px rgba(79,70,229,.75); transform:translateY(-1px); }
.btn-primary:active { transform:scale(.97); }
.btn-primary[disabled] { opacity:.6; cursor:wait; }
.btn-ghost { color:#475569; background:#fff; border:1px solid #e2e8f0; }
.btn-ghost:hover { background:#f8fafc; }
.btn-danger { color:#fff; background:linear-gradient(100deg,#f43f5e,#e11d48); box-shadow:0 8px 20px -8px rgba(225,29,72,.6); }
.btn-danger:hover { transform:translateY(-1px); }

.icon-btn {
  display:grid; place-items:center; height:2rem; width:2rem; border-radius:.6rem;
  color:#94a3b8; transition: color .15s, background .15s, transform .15s;
}
.icon-btn:hover { background:#f1f5f9; transform:translateY(-1px); }
.page-btn {
  display:grid; place-items:center; height:2rem; width:2rem; border-radius:.6rem;
  color:#475569; border:1px solid #e2e8f0; background:#fff; transition: all .15s;
}
.page-btn:hover { background:var(--brand-50); color:var(--brand-600); border-color:var(--brand-100); }

/* ---- filter selects ------------------------------------------------------ */
.filter-select {
  appearance:none; -webkit-appearance:none; cursor:pointer;
  padding:.45rem 1.9rem .45rem .8rem; border-radius:.7rem; font-size:.8rem; font-weight:600;
  color:#475569; background:#fff; border:1px solid #e2e8f0; transition: all .15s;
}
.filter-select:hover { border-color:#cbd5e1; }
.filter-select:focus { outline:none; border-color:var(--brand-400); box-shadow:0 0 0 4px var(--brand-50); }
.filter-active { color:var(--brand-700); background:var(--brand-50); border-color:var(--brand-200, #c7d2fe); }

/* ---- sortable table headers --------------------------------------------- */
.th-sort {
  display:inline-flex; align-items:center; gap:.3rem; cursor:pointer;
  font:inherit; color:inherit; text-transform:inherit; letter-spacing:inherit;
  transition: color .15s;
}
.th-sort:hover { color:#475569; }
.th-active { color:var(--brand-600); }
.th-hint { opacity:0; transition: opacity .15s; }
.th-sort:hover .th-hint { opacity:.6; }

/* ---- inputs -------------------------------------------------------------- */
.search-input {
  width:16rem; max-width:48vw; padding:.6rem .9rem .6rem 2.25rem;
  border:1px solid #e2e8f0; border-radius:.8rem; background:#fff; font-size:.875rem;
  transition: border .2s, box-shadow .2s;
}
.search-input:focus { outline:none; border-color:var(--brand-400); box-shadow:0 0 0 4px var(--brand-50); }
.login-input {
  width:100%; padding:.7rem .9rem .7rem 2.5rem; border-radius:.8rem; font-size:.9rem;
  color:#fff; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  transition: border .2s, box-shadow .2s, background .2s;
}
.login-input::placeholder { color:#64748b; }
.login-input:focus { outline:none; border-color:var(--brand-400); background:rgba(255,255,255,.08); box-shadow:0 0 0 4px rgba(99,102,241,.18); }

/* ---- badges -------------------------------------------------------------- */
.badge {
  display:inline-flex; align-items:center; gap:.25rem; padding:.2rem .6rem;
  border-radius:99px; font-size:.7rem; font-weight:700; text-transform:capitalize;
  letter-spacing:.01em; background:#f1f5f9; color:#475569; line-height:1;
}
.badge-yes,.badge-completed,.badge-delivered,.badge-verified { background:#dcfce7; color:#15803d; }
.badge-no,.badge-cancelled,.badge-unverified { background:#fee2e2; color:#b91c1c; }
.badge-posted,.badge-broker { background:#e0e7ff; color:#4338ca; }
.badge-booked,.badge-carrier { background:#e0f2fe; color:#0369a1; }
.badge-assigned,.badge-dispatcher { background:#ede9fe; color:#6d28d9; }
.badge-in-transit,.badge-pending,.badge-driver { background:#fef3c7; color:#b45309; }
.badge-shipper { background:#ccfbf1; color:#0f766e; }
.badge-van,.badge-reefer,.badge-flatbed,.badge-stepdeck,.badge-power-only,.badge-other,
.badge-ftl,.badge-ltl,.badge-mc,.badge-usdot,.badge-none { background:#f1f5f9; color:#475569; }

/* ---- lifecycle timeline -------------------------------------------------- */
.timeline { display:flex; flex-direction:column; }
.timeline li { position:relative; display:flex; align-items:center; gap:.8rem; padding:.45rem 0; }
.timeline li:not(:last-child)::after {
  content:""; position:absolute; left:13px; top:30px; bottom:-4px; width:2px; background:#e2e8f0;
}
.timeline li.tl-done:not(:last-child)::after { background:#bbf7d0; }
.tl-dot {
  position:relative; z-index:1; display:grid; place-items:center; height:28px; width:28px;
  border-radius:50%; background:#f1f5f9; color:#94a3b8; box-shadow:0 0 0 1px #e2e8f0;
}
.tl-label { font-size:.875rem; font-weight:600; color:#94a3b8; }
.tl-done .tl-dot { background:#dcfce7; color:#16a34a; box-shadow:0 0 0 1px #bbf7d0; }
.tl-done .tl-label { color:#475569; }
.tl-current .tl-dot {
  background:linear-gradient(135deg, var(--brand-500), var(--violet-600)); color:#fff;
  box-shadow:0 0 0 4px var(--brand-50); animation: pulseDot 1.8s ease-in-out infinite;
}
.tl-current .tl-label { color:var(--brand-700); font-weight:700; }
@keyframes pulseDot { 0%,100% { box-shadow:0 0 0 4px var(--brand-50); } 50% { box-shadow:0 0 0 7px var(--brand-50); } }

/* ---- leaflet maps -------------------------------------------------------- */
.leaflet-map { z-index:0; background:#eef2f6; }
.leaflet-container { font:inherit; }
.leaflet-popup-content-wrapper { border-radius:.9rem; box-shadow:0 12px 30px -12px rgba(15,23,42,.35); }
.leaflet-popup-content { margin:.7rem .9rem; font-size:.8rem; line-height:1.4; }
/* Region choropleth labels (name + load count, centered on each viloyat). */
.leaflet-tooltip.region-label {
  background:transparent; border:none; box-shadow:none; padding:0;
  text-align:center; pointer-events:none; white-space:normal; line-height:1.05;
}
.leaflet-tooltip.region-label::before { display:none; }      /* no arrow */
.region-label .rl-name {
  display:block; font-size:.6rem; font-weight:700; color:#1e293b;
  text-shadow:0 1px 2px rgba(255,255,255,.9), 0 0 2px rgba(255,255,255,.9);
}
.region-label .rl-count {
  display:block; font-size:.95rem; font-weight:800; color:#0f172a;
  text-shadow:0 1px 2px rgba(255,255,255,.9);
}
.leaflet-interactive { transition: fill-opacity .15s; }

/* ---- modal --------------------------------------------------------------- */
.modal-overlay { position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:1rem; }
.modal-backdrop { position:absolute; inset:0; background:rgba(15,23,42,.55); backdrop-filter:blur(4px); }
.modal-panel {
  position:relative; width:100%; max-width:42rem; background:#fff; border-radius:1.5rem;
  box-shadow:0 30px 60px -20px rgba(15,23,42,.4); overflow:hidden;
}

/* ---- login background ---------------------------------------------------- */
.aurora { position:absolute; border-radius:50%; filter:blur(80px); opacity:.55; }
.aurora-1 { width:480px; height:480px; background:#4f46e5; top:-120px; left:-100px; animation: float1 14s ease-in-out infinite; }
.aurora-2 { width:420px; height:420px; background:#7c3aed; bottom:-140px; right:-80px; animation: float2 16s ease-in-out infinite; }
.aurora-3 { width:360px; height:360px; background:#0ea5e9; top:40%; left:55%; animation: float1 18s ease-in-out infinite reverse; }
.bg-grid {
  background-image:linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:44px 44px; mask-image:radial-gradient(ellipse at center, #000 30%, transparent 75%);
}
.login-card { animation: popIn .6s cubic-bezier(.21,1.02,.55,1) both; }

/* ---- entrance animations ------------------------------------------------- */
.page-enter { animation: fadeUp .4s ease both; }
.row-in { animation: fadeUp .42s ease both; }
@keyframes fadeUp { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@keyframes popIn { 0% { opacity:0; transform:translateY(14px) scale(.96); } 100% { opacity:1; transform:translateY(0) scale(1); } }
@keyframes float1 { 0%,100% { transform:translate(0,0); } 50% { transform:translate(40px,30px); } }
@keyframes float2 { 0%,100% { transform:translate(0,0); } 50% { transform:translate(-36px,-28px); } }
@keyframes shake { 0%,100% { transform:translateX(0); } 20%,60% { transform:translateX(-6px); } 40%,80% { transform:translateX(6px); } }
.shake { animation: shake .4s ease; }

/* ---- htmx indicators & view transitions ---------------------------------- */
.htmx-indicator { opacity:0; transition: opacity .2s; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity:1; }
::view-transition-old(root) { animation: vtOut .2s ease both; }
::view-transition-new(root) { animation: fadeUp .28s ease both; }
@keyframes vtOut { to { opacity:0; } }

/* ---- toasts -------------------------------------------------------------- */
.toast {
  pointer-events:auto; display:flex; align-items:center; gap:.7rem; min-width:280px;
  padding:.85rem 1rem; border-radius:1rem; background:#fff; color:#1e293b;
  box-shadow:0 16px 40px -12px rgba(15,23,42,.3); border:1px solid #f1f5f9;
  animation: toastIn .35s cubic-bezier(.21,1.02,.55,1) both;
}
.toast.out { animation: toastOut .3s ease forwards; }
.toast-ico { display:grid; place-items:center; height:2rem; width:2rem; border-radius:.6rem; flex-shrink:0; }
.toast-success .toast-ico { background:#dcfce7; color:#16a34a; }
.toast-danger .toast-ico { background:#fee2e2; color:#dc2626; }
.toast-info .toast-ico { background:var(--brand-50); color:var(--brand-600); }
.toast-bar { position:absolute; left:0; bottom:0; height:3px; border-radius:99px; background:currentColor; opacity:.4; animation: shrink 3.2s linear forwards; }
@keyframes toastIn { from { opacity:0; transform:translateX(40px) scale(.95); } to { opacity:1; transform:translateX(0) scale(1); } }
@keyframes toastOut { to { opacity:0; transform:translateX(40px) scale(.95); } }
@keyframes shrink { from { width:100%; } to { width:0; } }

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { animation-duration:.001ms !important; transition-duration:.001ms !important; }
}