/* CarGlow Cleaner — v3. Loaded after ../_shared/tokens.css and
   ../_shared/components.css (see index.html). Every pre-v3 class name kept
   exactly (topbar, card, badge, row, stack, button variants, photo-slot,
   skeleton-block, progress-ring-*, celebrate-*) so app.js needs zero logic
   changes — only what each class looks like changes. Field-app priorities
   preserved and reinforced: large touch targets, safe-area padding, a
   single-column phone-width frame even on desktop (this is a field
   worker's app, not a desktop admin surface — intentional, matches
   Uber Driver / Zepto / Blinkit precedent).

   Kannada-first i18n (i18n.js) is untouched by this file — no text content
   lives in CSS. */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { margin: 0; padding: 0; background: var(--color-bg); color: var(--color-ink); font-family: var(--font-body); }
body { min-height: 100vh; min-height: 100dvh; }

#app {
  max-width: 480px; margin: 0 auto; min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; background: var(--color-bg);
  padding-bottom: env(safe-area-inset-bottom);
}

h1, h2, h3 { font-family: var(--font-display); color: var(--color-ink); margin: 0 0 var(--space-2); }
h1 { font-size: 1.4rem; }
h2 { font-size: 1.1rem; }
.mono { font-family: var(--font-mono); }

.topbar {
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4);
  background: var(--slate-800); color: white; position: sticky; top: 0; z-index: 10;
}
.topbar img { width: 32px; height: 32px; border-radius: var(--radius-sm); }
.topbar .title { font-family: var(--font-display); font-weight: 700; flex: 1; font-size: 1.05rem; }
.topbar button.lang-toggle {
  background: rgba(255,255,255,0.15); color: white; border: 1px solid rgba(255,255,255,0.35);
  border-radius: var(--radius-full); padding: 6px 12px; font-size: 0.85rem;
}

.content { flex: 1; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); }

.card {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: var(--space-4); box-shadow: var(--shadow-1);
  transition: box-shadow var(--duration-base) var(--ease-standard);
}

.badge { display: inline-block; font-size: 0.75rem; font-weight: 700; padding: 3px 10px; border-radius: var(--radius-full); background: var(--slate-50); color: var(--slate-500); }
.badge.on { background: var(--success-bg); color: var(--success-text); }
.badge.off { background: var(--slate-50); color: var(--color-ink-muted); }
.badge.warn { background: var(--warning-bg); color: var(--warning-text); }
.badge.info { background: var(--info-bg); color: var(--info-text); }
.badge.error { background: var(--danger-bg); color: var(--danger-text); }

.row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.stack { display: flex; flex-direction: column; gap: var(--space-2); }
.muted { color: var(--color-ink-muted); font-size: 0.85rem; }

button {
  font-family: var(--font-body); font-size: 1rem; font-weight: 600; border: none;
  border-radius: var(--radius-md); padding: var(--space-4); cursor: pointer; min-height: 48px;
  transition: transform var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard);
}
button:active { transform: scale(0.98); }
button.primary { background: var(--color-primary); color: white; width: 100%; box-shadow: var(--shadow-brand); }
button.primary:active { background: var(--color-primary-hover); }
button.accent { background: var(--brand-500); color: var(--brand-900); font-weight: 700; }
button.secondary { background: var(--color-surface); color: var(--color-ink); border: 1.5px solid var(--color-border-strong); }
button.danger { background: var(--danger-500); color: white; }
button.block { width: 100%; }
button:disabled { opacity: 0.5; cursor: not-allowed; }
button + button { margin-top: var(--space-2); }
.btn-row { display: flex; gap: var(--space-2); }
.btn-row button { flex: 1; margin-top: 0 !important; }

input[type="text"], input[type="tel"], input[type="number"] {
  font-family: var(--font-mono); font-size: 1.1rem; padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md); border: 1.5px solid var(--color-border-strong); width: 100%;
  letter-spacing: 1px; background: var(--color-surface); color: var(--color-ink); outline: none;
  transition: border-color var(--duration-fast) var(--ease-standard);
}
input:focus { border-color: var(--color-primary); }

.numbers { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.offer-card { border-left: 4px solid var(--brand-500); }
.job-card { border-left: 4px solid var(--info-500); }
.error-banner { background: var(--danger-bg); color: var(--danger-text); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); font-size: 0.9rem; }
.offline-banner { background: var(--warning-bg); color: var(--warning-text); text-align: center; padding: var(--space-2); font-size: 0.85rem; font-weight: 700; }

.photo-slot { border: 2px dashed var(--color-border-strong); border-radius: var(--radius-lg); padding: var(--space-4); text-align: center; position: relative; transition: border-color var(--duration-fast) var(--ease-standard); }
.photo-slot.done { border-color: var(--accent-500); border-style: solid; background: var(--success-bg); }
.photo-slot img { max-width: 100%; border-radius: var(--radius-md); margin-top: var(--space-2); }
.photo-slot input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.spacer { flex: 1; }
.center { text-align: center; }
.linklike { color: var(--info-500); text-decoration: underline; cursor: pointer; }

/* ---------- home screen: identity hero + "Today" snapshot ---------- */
.cg-cleaner-hero-top { display: flex; align-items: center; gap: var(--space-3); }
.cg-cleaner-avatar {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  background: var(--success-bg); color: var(--success-text);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px;
}
.cg-cleaner-today-row { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.cg-cleaner-today-stat { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; flex: 1; min-width: 90px; }
.cg-cleaner-today-stat strong { font-size: 1.3rem; font-variant-numeric: tabular-nums; }

/* ---------- skeleton loaders ---------- */
.skeleton-block {
  background: linear-gradient(90deg, var(--color-border) 25%, var(--slate-50) 37%, var(--color-border) 63%);
  background-size: 400% 100%; animation: skeleton-shimmer 1.4s ease infinite; border-radius: var(--radius-md);
}
@keyframes skeleton-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .skeleton-block { animation: none; } }

/* ---------- progress ring ---------- */
.progress-ring-wrap { display: flex; align-items: center; gap: var(--space-4); width: 100%; }
.progress-ring { width: 60px; height: 60px; flex-shrink: 0; transform: rotate(-90deg); }
.progress-ring-bg { fill: none; stroke: var(--slate-50); stroke-width: 6; }
.progress-ring-fg { fill: none; stroke: var(--accent-500); stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset 0.8s var(--ease-decel); }
.progress-ring-label { display: flex; flex-direction: column; }
.progress-ring-label strong { font-family: var(--font-mono); font-size: 1.2rem; color: var(--color-ink); }

/* ---------- celebration state ---------- */
.celebrate { animation: celebrate-pop 0.4s var(--ease-decel); }
@keyframes celebrate-pop { 0% { transform: scale(0.92); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.celebrate-badge {
  width: 56px; height: 56px; border-radius: 50%; background: var(--accent-500); color: white;
  display: flex; align-items: center; justify-content: center; font-size: 1.8rem; font-weight: 700;
  margin: 0 auto 4px; animation: celebrate-bounce 0.6s var(--ease-decel); box-shadow: var(--shadow-brand);
}
@keyframes celebrate-bounce { 0% { transform: scale(0); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
.celebrate-litres { font-family: var(--font-mono); font-weight: 700; color: var(--color-ink); background: var(--color-bg); border-radius: var(--radius-md); padding: var(--space-2) var(--space-4); margin-top: 4px; }
@media (prefers-reduced-motion: reduce) { .celebrate, .celebrate-badge { animation: none; } }

/* ---------- responsive: tablet/desktop viewers get a framed phone card,
   never a stretched desktop layout (this is a field app, not an admin
   surface) ---------- */
@media (min-width: 640px) {
  html, body { background: var(--slate-100); }
  #app { margin: var(--space-6) auto; min-height: calc(100vh - 48px); border-radius: var(--radius-xl); box-shadow: var(--shadow-3); overflow: hidden; }
}