/* public/assets/css/chopda-vitran-polish.css
   UI/UX polish layer for Chopda Vitran public pages and VAdmin.
   No database changes required. */

:root {
  --cv-emerald: #059669;
  --cv-emerald-dark: #047857;
  --cv-indigo: #4f46e5;
  --cv-amber: #f59e0b;
  --cv-ink: #0f172a;
  --cv-soft: #f8fafc;
}

.cv-page {
  position: relative;
  isolation: isolate;
}

.cv-page::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 8% 12%, rgba(16, 185, 129, .18), transparent 24rem),
    radial-gradient(circle at 88% 8%, rgba(79, 70, 229, .12), transparent 24rem),
    radial-gradient(circle at 60% 85%, rgba(245, 158, 11, .10), transparent 28rem);
  pointer-events: none;
}

.cv-noise::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .22;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(15, 23, 42, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, .035) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(to bottom, black, transparent 80%);
}

.cv-hero-card,
.cv-glass-card {
  position: relative;
  border: 1px solid rgba(148, 163, 184, .24);
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(18px);
  box-shadow: 0 24px 80px rgba(15, 23, 42, .10);
}

.dark .cv-hero-card,
.dark .cv-glass-card {
  background: rgba(15, 23, 42, .72);
  border-color: rgba(51, 65, 85, .78);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .35);
}

.cv-3d-card {
  transform-style: preserve-3d;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.cv-3d-card:hover {
  transform: translateY(-6px) rotateX(1.2deg) rotateY(-1.2deg);
  box-shadow: 0 26px 70px rgba(15, 23, 42, .16);
}

.cv-pill {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  border-radius: 999px;
  padding: .42rem .78rem;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .02em;
}

.cv-step-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 1rem;
  color: white;
  font-weight: 900;
  background: linear-gradient(135deg, var(--cv-emerald), var(--cv-indigo));
  box-shadow: 0 12px 32px rgba(5, 150, 105, .25);
}

.cv-input {
  width: 100%;
  border-radius: 1.15rem;
  border: 1px solid rgb(203 213 225);
  background: rgba(255,255,255,.92);
  padding: .88rem 1rem;
  font-size: .92rem;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.dark .cv-input {
  border-color: rgb(51 65 85);
  background: rgba(2, 6, 23, .86);
  color: rgb(241 245 249);
}

.cv-input:focus {
  border-color: var(--cv-emerald);
  box-shadow: 0 0 0 4px rgba(16, 185, 129, .16);
  transform: translateY(-1px);
}

.cv-input[aria-invalid="true"],
.cv-input.cv-invalid {
  border-color: rgb(239 68 68);
  box-shadow: 0 0 0 4px rgba(239, 68, 68, .12);
}

.cv-upload-zone {
  position: relative;
  overflow: hidden;
  border: 1.5px dashed rgba(16, 185, 129, .45);
  border-radius: 1.5rem;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.cv-upload-zone:hover,
.cv-upload-zone.cv-dragover {
  border-color: rgba(5, 150, 105, .95);
  background: rgba(16, 185, 129, .08);
  transform: translateY(-2px);
}

.cv-progress {
  height: .55rem;
  border-radius: 999px;
  background: rgba(148, 163, 184, .25);
  overflow: hidden;
}

.cv-progress > span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cv-emerald), var(--cv-indigo));
  transition: width .25s ease;
}

.cv-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .65s ease, transform .65s ease;
}

.cv-reveal.cv-visible {
  opacity: 1;
  transform: translateY(0);
}

.cv-floating-action {
  position: sticky;
  bottom: 1rem;
  z-index: 25;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, .35);
  background: rgba(15, 23, 42, .92);
  color: white;
  box-shadow: 0 20px 50px rgba(15, 23, 42, .24);
  backdrop-filter: blur(14px);
}

.cv-toast-modern {
  border-radius: 1.25rem !important;
  box-shadow: 0 26px 70px rgba(15, 23, 42, .28) !important;
}

.cv-admin-shell {
  background:
    radial-gradient(circle at 0% 0%, rgba(16, 185, 129, .13), transparent 24rem),
    radial-gradient(circle at 100% 0%, rgba(79, 70, 229, .10), transparent 22rem),
    #020617;
}

.cv-admin-panel {
  border: 1px solid rgba(51, 65, 85, .86);
  background: rgba(15, 23, 42, .74);
  backdrop-filter: blur(16px);
  box-shadow: 0 18px 60px rgba(0, 0, 0, .22);
}

.cv-admin-card {
  border: 1px solid rgba(51, 65, 85, .84);
  background: linear-gradient(180deg, rgba(15, 23, 42, .88), rgba(2, 6, 23, .72));
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.cv-admin-card:hover {
  transform: translateY(-3px);
  border-color: rgba(16, 185, 129, .45);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .28);
}

@media (prefers-reduced-motion: reduce) {
  .cv-3d-card,
  .cv-reveal,
  .cv-input,
  .cv-upload-zone,
  .cv-progress > span,
  .cv-admin-card {
    transition: none !important;
    transform: none !important;
  }
}

@media print {
  header, footer, .cv-no-print, .cv-floating-action { display: none !important; }
  body { background: #fff !important; color: #111827 !important; }
  .cv-hero-card, .cv-glass-card { box-shadow: none !important; border: 1px solid #e5e7eb !important; }
}

/* Hotfix v12: light-theme contrast correction.
   Keeps dark mode unchanged while making light mode readable. */
html:not(.dark) .cv-page,
html[data-theme="light"] .cv-page,
html:not(.dark) .cv-light-safe,
html[data-theme="light"] .cv-light-safe {
  color: #0f172a;
}

html:not(.dark) .cv-hero-card,
html:not(.dark) .cv-glass-card,
html[data-theme="light"] .cv-hero-card,
html[data-theme="light"] .cv-glass-card {
  color: #0f172a;
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(203, 213, 225, 0.95);
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.10);
}

html:not(.dark) .cv-hero-card h1,
html:not(.dark) .cv-hero-card h2,
html:not(.dark) .cv-hero-card h3,
html:not(.dark) .cv-glass-card h1,
html:not(.dark) .cv-glass-card h2,
html:not(.dark) .cv-glass-card h3,
html[data-theme="light"] .cv-hero-card h1,
html[data-theme="light"] .cv-hero-card h2,
html[data-theme="light"] .cv-hero-card h3,
html[data-theme="light"] .cv-glass-card h1,
html[data-theme="light"] .cv-glass-card h2,
html[data-theme="light"] .cv-glass-card h3 {
  color: #0f172a;
}

html:not(.dark) .cv-hero-card p,
html:not(.dark) .cv-glass-card p,
html[data-theme="light"] .cv-hero-card p,
html[data-theme="light"] .cv-glass-card p {
  color: #475569;
}

html:not(.dark) .cv-hero-card .font-extrabold,
html:not(.dark) .cv-glass-card .font-extrabold,
html:not(.dark) .cv-hero-card .font-black,
html:not(.dark) .cv-glass-card .font-black,
html[data-theme="light"] .cv-hero-card .font-extrabold,
html[data-theme="light"] .cv-glass-card .font-extrabold,
html[data-theme="light"] .cv-hero-card .font-black,
html[data-theme="light"] .cv-glass-card .font-black {
  color: #0f172a;
}

html:not(.dark) .cv-pill,
html[data-theme="light"] .cv-pill {
  border: 1px solid rgba(148, 163, 184, 0.35);
}

html:not(.dark) .cv-input,
html[data-theme="light"] .cv-input {
  color: #0f172a;
  background: rgba(255, 255, 255, .96);
  border-color: #cbd5e1;
}

html:not(.dark) .cv-input::placeholder,
html[data-theme="light"] .cv-input::placeholder {
  color: #64748b;
}

html:not(.dark) .cv-upload-zone,
html[data-theme="light"] .cv-upload-zone {
  background: rgba(255, 255, 255, .78);
  color: #0f172a;
}

html:not(.dark) .cv-floating-action,
html[data-theme="light"] .cv-floating-action {
  background: rgba(15, 23, 42, .96);
  color: #fff;
}