/*
  ============================================================
  ServiceOS — THEME COLOR CONTROL FILE  (केंद्रीय कलर फाइल)
  ============================================================
  Yeh EK file hai jise badalne se poori site (customer app,
  admin panel, technician panel — sab) ka color badal jayega.

  Har variable ke upar Hindi me likha hai woh kahan/kis liye
  use hota hai. Sirf hex code (#xxxxxx) change karo, naam
  (--color-xxx) mat chedo, warna site break ho jayegi.
  ============================================================
*/

:root {

  /* ============ 1. BRAND / PRIMARY (मुख्य रंग) ============
     Yeh aapka asli brand color hai — header, buttons, links,
     icons, selected tabs, prices — sabse zyada jagah yahi
     dikhta hai. Abhi: Bright Blue. */
  --color-primary: #0185FC;

  /* Primary ka thoda halka shade — hover effect (mouse le
     jaane par) aur gradients me dusra color ke liye. */
  --color-primary-light: #4DAAFD;

  /* Primary ka aur gehra (dark) shade — pressed/active button
     state ke liye. */
  --color-primary-dark: #016ACA;

  /* Primary ka RGB version — kabhi transparent shadow/overlay
     banane ke liye chahiye hota hai (rgba ke through). */
  --color-primary-rgb: 1, 133, 252;
  /* Raw channels, so a colour can be used at partial opacity in a Tailwind arbitrary value:
     shadow-[rgb(var(--color-primary-rgb)/0.2)]. Writing bg-[var(--color-primary)]/20 does
     NOT work — Tailwind cannot split an alpha channel out of a var() it can't see inside,
     so those classes silently produced no CSS at all. */
  --color-warning-rgb: 245, 158, 11;
  --color-danger-rgb:  239, 68, 68;

  /* Bahut halka tint (lightest background) — jaise badge ka
     background, icon circle ka background, selected card/
     address/slot ka light background. Pehle "teal-50" /
     "#e0f0ff" tha. */
  --color-primary-tint: #EBF5FF;

  /* Primary tint ke upar likha jaane wala text (jaise "Order
     Received" badge ka text, ya light bg par dark text). */
  --color-primary-tint-text: #0185FC;

  /* Gradient banners (jaise homepage ke offer cards, "Schedule
     Booking" header banner) me primary ke sath dusra color —
     ek halka samudri/sky blue jo gradient ko khoobsurat
     banata hai. Pehle "#0E7DA8" tha. */
  --color-secondary: #0E7DA8;

  /* Gradient banner ke andar likha gaya halka/faint text
     (jaise "Verified Nashik Technicians" jaisी subtitle).
     Pehle "teal-100" tha. */
  --color-secondary-soft: #CBD9E8;


  /* ============ 2. SUCCESS (सफलता / पॉज़िटिव रंग) ============
     Jahan kaam safaltapoorvak hua ho — jaise "Completed"
     status, WhatsApp button, OTP verify button, "Work
     Completed" button, sahi (✓) icon. Pehle "emerald" tha. */
  --color-success: #10B981;
  --color-success-dark: #059669;   /* hover/pressed state */
  --color-success-tint: #ECFDF5;   /* halka success background */
  --color-success-soft: #D1FAE5;   /* gradient banner ka light text */


  /* ============ 3. WARNING (चेतावनी / पीला रंग) ============
     Jahan thoda dhyan dene ki zarurat ho — jaise "Pending"
     status, alert/warning message. Pehle "amber" tha. */
  --color-warning: #F59E0B;
  --color-warning-dark: #D97706;   /* hover/pressed state */
  --color-warning-tint: #FFFBEB;   /* halka warning background */
  --color-warning-soft: #FEF3C7;   /* gradient/badge ka light shade */


  /* ============ 4. DANGER (खतरा / गलती / लाल रंग) ============
     Error message, "Cancelled/Rejected" status, delete button,
     galat OTP jaisी jagah. Pehle "red" tha. */
  --color-danger: #EF4444;
  --color-danger-dark: #DC2626;    /* hover/pressed state */
  --color-danger-tint: #FEF2F2;    /* halka error background */
  --color-danger-soft: #FEE2E2;    /* gradient/badge ka light shade */


  /* ============ 5. INFO (जानकारी / बैंगनी-नीला रंग) ============
     Extra informational badges/highlights ke liye (purple/
     indigo wali jagah). Kam use hota hai. */
  --color-info: #7C3AED;
  --color-info-dark: #6D28D9;      /* hover/pressed state */
  --color-info-tint: #F5F3FF;      /* halka info background */
  --color-info-soft: #EDE9FE;      /* gradient/badge ka light shade */

}


/* ============================================================
   APP LAYOUT WIDTH (पूरी साइट की चौड़ाई)
   ============================================================
   --app-max-width: Yeh value CONTENT containers ki max width
   control karti hai. Sab pages ke <main>, content wrappers
   is width se zyada wide nahi honge.

   Abhi: 42rem (672px) = tablet jitni width.
   Mobile look ke liye: 28rem (448px).
   Aur bade layout ke liye: 56rem ya 64rem.

   NOTE: Body full-width rehti hai (gray sides dikhti hain
   wide desktop pe — yeh intentional hai, exactly technician
   panel jaisa look). Width sirf content area ki hoti hai.
   ============================================================ */
:root {
  --app-max-width: 42rem;
}

/* Wide desktop pe content ke baaki sides gray dikhein —
   bilkul technician panel jaisa centered card look */
html {
  background-color: #f1f5f9;
}

/* Body full-width rehti hai. Content containers (main, nav)
   khud max-w-2xl mx-auto se center hote hain — body nahi. */
html, body {
  width: 100%;
  max-width: 100% !important;
  overflow-x: hidden; /* fallback for very old browsers */
}
/* overflow-x:hidden turns html/body into a scroll container, which BREAKS
   position:sticky (that's why sticky headers scrolled away while admin's
   position:fixed header worked). overflow-x:clip prevents horizontal scroll the
   same way WITHOUT creating a scroll container, so sticky headers work again.
   @supports keeps the safe `hidden` fallback for browsers without clip. */
@supports (overflow: clip) {
  html, body { overflow-x: clip; }
}


/* ============================================================
   SLIDER COLOURS (स्लाइडर रंग — एक जगह से सब बदलो)
   ============================================================
   Har slider ke background gradient ke do rang yahan set
   hain — "from" (shuru का रंग) aur "to" (end का रंग).
   Sirf hex code badlo, slider ka background apne aap
   update ho jayega — HTML chhuna nahi padega.

   Sab sliders sky-blue family me hain intentionally.
   ============================================================

   ── HOME PAGE — 4 SLIDERS ──────────────────────────────── */
:root {
  /* Home Slider 1 — Classic sky blue (flagship/main offer) */
  --slider-home-1-from: #0284C7;   /* sky-600 — gahra sky blue shuru */
  --slider-home-1-to:   #38BDF8;   /* sky-400 — halka sky blue end */

  /* Home Slider 2 — Deep navy-sky (premium feel) */
  --slider-home-2-from: #0C4A6E;   /* sky-950 — gehri raat jaise dark */
  --slider-home-2-to:   #0369A1;   /* sky-700 — medium sky blue end */

  /* Home Slider 3 — Bright azure (attention-grabbing offer) */
  --slider-home-3-from: #0EA5E9;   /* sky-500 — roshan sky blue shuru */
  --slider-home-3-to:   #67E8F9;   /* cyan-300 — halka neon blue end */

  /* Home Slider 4 — Twilight sky (soft evening gradient) */
  --slider-home-4-from: #1E40AF;   /* blue-800 — shaam wala neela shuru */
  --slider-home-4-to:   #0EA5E9;   /* sky-500 — sky blue end */

  /* Shop Slider 1 — Classic sky (matches home feel) */
  --slider-shop-1-from: #0284C7;   /* sky-600 */
  --slider-shop-1-to:   #7DD3FC;   /* sky-300 — aur bhi halka */

  /* Shop Slider 2 — Ice blue (clean product feel) */
  --slider-shop-2-from: #0369A1;   /* sky-700 */
  --slider-shop-2-to:   #BAE6FD;   /* sky-200 — almost white blue */
}

/* ── PRODUCT GRID — ODD LAYOUT FIX ─────────────────────── */
/*
  Agar grid me odd items hain (1, 3, 5, 7...) to last item
  DONO column ki jagah occupy karta hai — jaise 2 cards ki
  width barabar 1 hi card ban jata hai (wide/bada card).

  Cards ki height ab FIXED nahi hai. Har card ki image
  aspect-[4/3] hai, to card apni image + text se height leta
  hai. Wide (odd-last) card ki width zyada hai, to uski image
  bhi proportionally tall ho jati hai — height apne aap sahi.

  Isliye yahan height set karne ki zaroorat NAHI. Pehle yahan
  "height: 16rem !important" tha, jo wide card ki image ko flat
  kar deta tha (width barhti thi, height nahi). Woh hata diya.

  CSS :last-child:nth-child(odd) = "agar last item odd number
  par hai" = total count odd hai = last card ko full-width karo.
*/
.product-grid > *:last-child:nth-child(odd) {
  grid-column: 1 / -1;       /* dono columns ki poori width le */
}

/* ============================================================
   SQUARE UI — ONE consistent corner radius across ALL 3 sites
   (customer app, technician portal, admin — every page loads
   this file). Cards, containers, form fields, buttons, borders
   all use Tailwind rounded-* classes, so overriding those here
   squares the entire UI in one place — nothing gets missed.

   >>> THE ONLY KNOB: change --sf-radius below. <<<
   0px = perfectly sharp square · 4px = crisp square (current)
   6-8px = soft square · 12px = rounded again.

   rounded-full is deliberately NOT overridden, so circular
   avatars / profile photos / tech photos stay round.
   ============================================================ */
:root { --sf-radius: 4px; }

.rounded-sm, .rounded, .rounded-md, .rounded-lg,
.rounded-xl, .rounded-2xl, .rounded-3xl {
  border-radius: var(--sf-radius) !important;
}
/* top-only / bottom-only rounded (bottom sheets, tab strips) keep the flat side flat */
.rounded-t-lg, .rounded-t-xl, .rounded-t-2xl, .rounded-t-3xl {
  border-radius: var(--sf-radius) var(--sf-radius) 0 0 !important;
}
.rounded-b-lg, .rounded-b-xl, .rounded-b-2xl, .rounded-b-3xl {
  border-radius: 0 0 var(--sf-radius) var(--sf-radius) !important;
}

/* ============================================================
   BOLD STAT NUMBERS (bade, rangeen numbers — jaise wallet balance,
   price, booking count) — class="sf-stat" jahan bhi ek number ko
   "confident/fresh" dikhana ho, jaise reference screenshot ka ₹0.
   ============================================================ */
.sf-stat {
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--color-primary);
}
.sf-stat-success { color: var(--color-success-dark); }
.sf-stat-white { color: #fff; }

/* Gradient hero/header treatment — flat single-color header ki jagah
   thoda depth wala gradient, jaise reference screenshot ka green header. */
.sf-hero-gradient {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 55%, var(--color-secondary) 130%);
}
.sf-hero-gradient-success {
  background: linear-gradient(135deg, var(--color-success-dark) 0%, var(--color-success) 100%);
}

/* Vibrant accent pill/badge — saturated, high-contrast (jaise screenshot ka blue "+₹12.5" pill) */
.sf-pill-primary  { background: var(--color-primary);  color: #fff; font-weight: 800; }
.sf-pill-success  { background: var(--color-success);  color: #fff; font-weight: 800; }
.sf-pill-warning  { background: var(--color-warning);  color: #fff; font-weight: 800; }

/* ============================================================
   CRISP WHITE (dull off-white ki jagah pure white — customer,
   admin, technician sab jagah)
   ============================================================
   NOTE: yeh ab CSS force-override se NAHI, balki har page ki
   asli class (bg-gray-50 -> bg-white) directly badal ke kiya
   gaya hai — taaki yeh "default" ho, kisi override pe depend
   na kare. bg-gray-100/200/300 aur hover:/active: wale states
   jaanbujhke nahi chhue gaye (progress bars, muted buttons,
   tap-feedback ke liye gray zaroori hai).
   ============================================================ */