/*
  ============================================================
  ServiceOS — THEME UI CONTROL FILE  (Look & feel ki file)
  ============================================================
  Bana: 30 Aug 2026, UX & Design Audit ke baad.

  Yeh file theme-colors.css ki jodidar hai.
    theme-colors.css  →  RANG kaunsa hai
    theme-ui.css      →  KITNA BADA hai, kaisa mehsoos hota hai

  ── ISKO AISE HI KYU LIKHA GAYA HAI (zaroori) ────────────────
  Project compiled Tailwind use karta hai (assets/tailwind.css),
  CDN nahi. Matlab `text-[13px]` jaisi koi NAYI class markup me
  likhne se kuch nahi hoga — wo CSS me hai hi nahi, text default
  16px ho jayega aur design toot jayega.

  Isliye yahan markup nahi badla gaya. Jo classes PEHLE SE
  project me hain (text-xs, text-[10px], text-gray-400 …) unki
  VALUE yahan badli gayi hai. Faayda: 300+ files ko haath lagaye
  bina poore project ka font size aur contrast ek jagah se
  control hota hai — bilkul waise jaise colour hota hai.

  Isliye yeh file tailwind.css ke BAAD load honi chahiye.
  ============================================================
*/

/* ============================================================
   1. FONT SIZE SCALE  (font ka size)
   ============================================================
   Audit me mila: poore project me 1,052 jagah text 12px ya usse
   chhota tha — admin me ek jagah 8px tak. Phone pe, khaaskar
   technician ke liye dhoop me, woh padha hi nahi jata.

   Naya scale (sirf 5 steps, isse bahar mat jao):
       11px  badge / chip / bahut chhota label
       12px  secondary line (date, time, hint)
       13px  normal body text aur buttons
       15px  card title, important text
       16px+ screen heading (text-base se upar sab waise ka waisa)

   Neeche number badal kar poore project ka text bada/chhota kar
   sakte ho. 11px se neeche kabhi mat jaana.
   ============================================================ */

.text-\[8px\]  { font-size: 11px; }   /* pehle 8px  — admin me 1 jagah */
.text-\[9px\]  { font-size: 11px; }   /* pehle 9px  — 53 jagah */
.text-\[10px\] { font-size: 11px; }   /* pehle 10px — 238 jagah */
.text-\[11px\] { font-size: 12px; }   /* pehle 11px — 317 jagah */
.text-\[12px\] { font-size: 13px; }   /* pehle 12px */
.text-xs       { font-size: 13px; }   /* pehle 12px — 435 jagah, sabse zyada use hone wali */
.text-sm       { font-size: 15px; }   /* pehle 14px — 329 jagah */
/* text-base (16px) aur usse upar sab waise ka waisa hai. */


/* ============================================================
   2. TEXT KA RANG  (contrast)
   ============================================================
   Audit me mila: app ka default label colour #9CA3AF tha, jiska
   white background pe contrast 2.54:1 hai. Padhne ke liye kam se
   kam 4.5:1 chahiye (WCAG AA) — yaani woh officially unreadable
   tha. Yeh rang har section heading, har form label, har hint aur
   technician card ki har date pe laga hua tha.
   ============================================================ */

.text-gray-400 { color: #6B7280; }   /* pehle #9CA3AF (2.54:1) → ab 4.83:1 ✓ */
.text-gray-300 { color: #98A2B3; }   /* sirf halke icons ke liye, text ke liye nahi */

/* Hover pe bhi wahi rang, warna list rows pe text achanak halka ho jata hai */
.hover\:text-gray-400:hover { color: #6B7280; }


/* ============================================================
   3. FORM FIELDS — iPhone zoom bug
   ============================================================
   iOS Safari ka pakka niyam: focus hone wale input ka font-size
   16px se kam ho to browser poora page zoom kar deta hai — aur
   wapas zoom out NAHI karta. App ke 69 inputs 14px ke the, yaani
   OTP screen aur address form pe har iPhone customer ka page
   zoom ho jata tha.

   16px se neeche kabhi mat karna, chahe design me chhota accha
   lage. Yeh sirf khoobsurti ka nahi, booking rukne ka sawal hai.
   ============================================================ */

/* !important isliye ki markup me har input pe pehle se text-sm laga hua hai
   (329 jagah). Uske bina Tailwind ki class jeet jati aur zoom bug bana rehta. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
select,
textarea {
    font-size: 16px !important;
}


/* ============================================================
   4. TAP KARNE KI JAGAH  (touch targets)
   ============================================================
   Apple aur Google dono ka minimum 44×44 px hai. Audit me sirf
   home screen pe 7 cheezein isse chhoti thi.
   Neeche sirf TAP karne wali cheezein badi ki gayi hain —
   photo/avatar jaisi non-clickable cheezein waise ki waisi hain.
   ============================================================ */

a.w-9.h-9, button.w-9.h-9,
a.w-8.h-8, button.w-8.h-8 {
    width: 2.75rem;    /* 44px */
    height: 2.75rem;
}

/* Header ka city picker: 40px tha, 4px kam. onclick isi div par hai. */
header [onclick] { min-height: 44px; }

/* Bottom nav ke tabs — customer aur technician dono */
#main-bottom-nav a, #main-bottom-nav button,
nav.fixed.bottom-0 a, nav.fixed.bottom-0 button {
    min-height: 48px;
}


/* ============================================================
   4b. BOTTOM NAV KE TABS  (customer app)
   ============================================================
   Pehle active tab poora solid neela pill ban jata tha — bahut
   bhaari, aur wo content se ladta tha. Ab active tab halke neele
   tint pill me hai, icon aur label brand colour me.

   Icon label ke UPAR hai, bagal me nahi — chaar tabs 390px ki
   screen pe sirf isi tarah aate hain.

   NOTE: yahan fa-solid/fa-regular swap NAHI kiya gaya. Project ka
   Font Awesome ek 90-icon subset hai aur usme fa-regular ke sirf
   5 icons hain — fa-regular fa-house exist hi nahi karta, wo
   khaali dabba dikhata. Isliye active/inactive ka farq rang aur
   weight se dikhaya gaya hai.
   ============================================================ */

.sf-navtab {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 7px 2px 6px;
    border-radius: 14px;
    color: #6B7280;
    background: transparent;
    transition: background-color .16s ease, color .16s ease;
}
.sf-navtab i {
    font-size: 18px;
    line-height: 1;
}
.sf-navtab .nav-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .01em;
    white-space: nowrap;
}
.sf-navtab.is-active {
    background: var(--color-primary-tint);
    /* --color-primary halke tint par sirf 3.3:1 deta hai, aur label 11px ka hai —
       chhote text ko 4.5:1 chahiye. --color-primary-dark usi tint par 4.86:1 deta hai
       aur aankh ko wahi neela lagta hai. */
    color: var(--color-primary-dark);
}
.sf-navtab.is-active .nav-label {
    font-weight: 800;
}
/* Dark mode: dark-mode.css sirf Tailwind ki classes ko jaanti hai, .sf-navtab ko nahi —
   isliye uske do rang yahan alag se likhe gaye hain. */
body.dark-mode .sf-navtab { color: #94A3B8; }
body.dark-mode .sf-navtab.is-active {
    background: rgb(var(--color-primary-rgb) / 0.18);
    color: var(--color-primary-light);
}

/* ============================================================
   4c. TECHNICIAN KE JOB TABS  (patli count strip)
   ============================================================
   Rang har tab ke apne --tab-color / --tab-tint se aata hai, jo
   markup me set hote hain aur aage theme-colors.css ko hi point
   karte hain. Yaani brand colour badla to yeh bhi badlega.
   ============================================================ */

/* Ye ab 3x2 grid me baithte hain (technician/index.php), pehle wali scroll patti me nahi.
   Isliye na flex-basis chahiye na min-width — grid har cell ki chaudai khud barabar deta hai,
   aur min-width chhote phone (320px) par grid ko bahar dhakel deta. */
.sf-jobtab {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 9px 12px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #E5E7EB;
    color: #6B7280;
}
.sf-jobtab-count {
    font-size: 18px;
    font-weight: 800;
    line-height: 1.15;
    color: var(--tab-color, var(--color-primary));
}
.sf-jobtab-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space: nowrap;
}
.sf-jobtab.is-active {
    background: var(--tab-tint, var(--color-primary-tint));
    border-color: var(--tab-color, var(--color-primary));
    color: var(--tab-color, var(--color-primary));
}
body.dark-mode .sf-jobtab { background: #1E293B; border-color: #334155; color: #94A3B8; }

/* ============================================================
   5. DABANE KA EHSAAS  (press feedback)
   ============================================================
   Phone pe hover nahi hota. Agar button dabane pe kuch dikhta
   nahi, to user ko pata hi nahi chalta ki tap laga ya nahi —
   aur wo dobara dabata hai. Audit me 196 buttons me se sirf 7
   me yeh tha.
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {
    button, a, [onclick] {
        transition: transform .09s ease-out, background-color .12s ease, color .12s ease;
    }
    button:not(:disabled):active,
    a:active,
    [onclick]:active {
        transform: scale(0.972);
    }
}

/* Sticky "Schedule Booking Order" button pehle se translateX(-50%) use karta hai
   (screen ke beech me rehne ke liye). Upar wala scale usko mita deta, aur button
   daayein khisak jata. Isliye uske liye alag se dono milakar likha gaya hai. */
#detail-cta-btn.is-pinned:active {
    transform: translateX(-50%) scale(0.972);
}


/* ============================================================
   5b. TECHNICIAN KE ACTION BUTTONS
   ============================================================
   Technician customer ke ghar ke bahar khada hai, dhoop me, shayad
   gande haath se. Uske buttons app ke sabse chhote buttons the
   (12px text, ~38px height) aur do barabar-size buttons bagal-bagal
   the — "Accept Job" ke bagal me "Reject", aur "Diagnosis Done" ke
   bagal me "Work Completed". Thaka hua aadmi galat button daba
   sakta hai.

   Ab ek hi bada primary button (48px) jo agla asli kadam hai, aur
   dusra raasta uske neeche chhota aur halka.
   ============================================================ */

.sf-action-primary {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 13px 16px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .01em;
    text-align: center;
}
/* Chhote tap-links (Map, Call, WhatsApp) — 32-40px the, ab 44px.
   Technician ke liye yeh sabse zaroori jagah hai: wo phone ek haath me pakad kar,
   dhoop me, jaldi me tap karta hai. */
.sf-tap44 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
}

.sf-action-secondary {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 10px 16px;
    border-radius: 12px;
    /* background yahan set NAHI kiya jaata: Tailwind preflight pehle se har button ka
       background transparent karti hai, aur agar yahan likh dete to markup me lagi
       bg-[var(--color-warning-tint)] class ko yeh mita deti (dono ki specificity
       barabar hai aur yeh file baad me load hoti hai). */
    font-size: 13px;
    font-weight: 700;
    text-align: center;
}

/* ============================================================
   5c. BHARE HUE BUTTON PE CHHOTA SAFED TEXT
   ============================================================
   Brand blue #0185FC pe safed text ka contrast 3.64:1 hai. Yeh
   BADE text ke liye theek hai (14px bold ya usse bada), lekin
   chhote text ke liye fail hai. Project ke 54 solid buttons me se
   21 pe text chhota tha.

   Brand ka rang badalna sahi nahi lagta — wo logo, OG image aur
   poori pehchaan me hai. Isliye ulta kiya gaya hai: aise buttons
   ka text kam se kam 14px bold kar diya gaya, jisse wo "large
   text" ki shreni me aa jata hai aur 3:1 par pass ho jata hai.

   Sirf UNHI elements par lagta hai jinke paas bhara hua rang AUR
   chhoti text class dono hain — bade text wale buttons chhote
   nahi hote.
   ============================================================ */

button.bg-\[var\(--color-primary\)\].text-xs,
a.bg-\[var\(--color-primary\)\].text-xs,
button.bg-\[var\(--color-primary\)\].text-\[12px\],
a.bg-\[var\(--color-primary\)\].text-\[12px\],
button.bg-\[var\(--color-primary\)\].text-\[11px\],
a.bg-\[var\(--color-primary\)\].text-\[11px\],
button.bg-\[var\(--color-primary\)\].text-\[10px\],
a.bg-\[var\(--color-primary\)\].text-\[10px\],
button.bg-\[var\(--color-primary\)\].text-\[9px\],
a.bg-\[var\(--color-primary\)\].text-\[9px\],
button.bg-\[var\(--color-success-dark\)\].text-xs,
a.bg-\[var\(--color-success-dark\)\].text-xs,
button.bg-\[var\(--color-success-dark\)\].text-\[12px\],
a.bg-\[var\(--color-success-dark\)\].text-\[12px\],
button.bg-\[var\(--color-success-dark\)\].text-\[11px\],
a.bg-\[var\(--color-success-dark\)\].text-\[11px\],
button.bg-\[var\(--color-success-dark\)\].text-\[10px\],
a.bg-\[var\(--color-success-dark\)\].text-\[10px\],
button.bg-\[var\(--color-success-dark\)\].text-\[9px\],
a.bg-\[var\(--color-success-dark\)\].text-\[9px\],
button.bg-\[var\(--color-success\)\].text-xs,
a.bg-\[var\(--color-success\)\].text-xs,
button.bg-\[var\(--color-success\)\].text-\[12px\],
a.bg-\[var\(--color-success\)\].text-\[12px\],
button.bg-\[var\(--color-success\)\].text-\[11px\],
a.bg-\[var\(--color-success\)\].text-\[11px\],
button.bg-\[var\(--color-success\)\].text-\[10px\],
a.bg-\[var\(--color-success\)\].text-\[10px\],
button.bg-\[var\(--color-success\)\].text-\[9px\],
a.bg-\[var\(--color-success\)\].text-\[9px\],
button.bg-\[var\(--color-danger\)\].text-xs,
a.bg-\[var\(--color-danger\)\].text-xs,
button.bg-\[var\(--color-danger\)\].text-\[12px\],
a.bg-\[var\(--color-danger\)\].text-\[12px\],
button.bg-\[var\(--color-danger\)\].text-\[11px\],
a.bg-\[var\(--color-danger\)\].text-\[11px\],
button.bg-\[var\(--color-danger\)\].text-\[10px\],
a.bg-\[var\(--color-danger\)\].text-\[10px\],
button.bg-\[var\(--color-danger\)\].text-\[9px\],
a.bg-\[var\(--color-danger\)\].text-\[9px\],
button.bg-\[var\(--color-warning-dark\)\].text-xs,
a.bg-\[var\(--color-warning-dark\)\].text-xs,
button.bg-\[var\(--color-warning-dark\)\].text-\[12px\],
a.bg-\[var\(--color-warning-dark\)\].text-\[12px\],
button.bg-\[var\(--color-warning-dark\)\].text-\[11px\],
a.bg-\[var\(--color-warning-dark\)\].text-\[11px\],
button.bg-\[var\(--color-warning-dark\)\].text-\[10px\],
a.bg-\[var\(--color-warning-dark\)\].text-\[10px\],
button.bg-\[var\(--color-warning-dark\)\].text-\[9px\],
a.bg-\[var\(--color-warning-dark\)\].text-\[9px\] {
    font-size: 14px;
    font-weight: 700;
}

/* ============================================================
   6. KEYBOARD FOCUS
   ============================================================
   Project me 133 jagah focus:outline-none laga hai aur uski jagah
   kuch nahi. Admin panel desktop pe keyboard se chalta hai — Tab
   dabate hue admin ko pata hi nahi chalta ki cursor kahan hai.

   :focus-visible isliye ki mouse se click karne pe ring NAHI
   dikhegi, sirf keyboard se aane pe. Design bilkul nahi badalta.
   ============================================================ */

:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}


/* ============================================================
   7. LOADING SKELETON
   ============================================================
   Pehle har loading ya to plain text tha ("Loading services…") ya
   poori screen ka blocking spinner. Skeleton me layout pehle se
   dikhta hai, isliye content aane pe page uchhalta nahi.
   ============================================================ */

.sf-skel {
    background: linear-gradient(90deg, #EDF0F4 25%, #E1E6EC 37%, #EDF0F4 63%);
    background-size: 400% 100%;
    border-radius: 10px;
    animation: sfSkel 1.3s ease-in-out infinite;
}
.sf-skel-card {
    height: 210px;
    border-radius: 16px;
}
.sf-skel-row {
    height: 92px;
    border-radius: 16px;
    margin-bottom: 12px;
}
@keyframes sfSkel {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}
body.dark-mode .sf-skel {
    background: linear-gradient(90deg, #1E293B 25%, #273548 37%, #1E293B 63%);
    background-size: 400% 100%;
}


/* ============================================================
   8. SCREEN BADALNE KA ANIMATION
   ============================================================
   Customer app me 14 screens hain aur unke beech ek bhi
   transition nahi tha — screen ek frame me kat jati thi. Yeh
   sabse bada "app premium lagta hai" wala farq hai.

   Sirf opacity + halka upar-neeche. Zyada bada movement mobile pe
   dheema mehsoos hota hai.
   ============================================================ */

@keyframes sfViewIn {
    from { opacity: 0; transform: translateY(9px); }
    to   { opacity: 1; transform: none; }
}
.sf-view-in {
    animation: sfViewIn .2s cubic-bezier(.22,.7,.3,1) both;
}


/* ============================================================
   9. KHAALI SCREEN  (empty states)
   ============================================================
   "No saved addresses yet." jaise 12 messages the — sirf plain
   grey text, na icon na koi aage badhne ka raasta.
   ============================================================ */

.sf-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    padding: 34px 20px;
}
.sf-empty-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary-tint);
    color: var(--color-primary);
    font-size: 21px;
}
.sf-empty-text {
    font-size: 14px;
    font-weight: 600;
    color: #6B7280;
    max-width: 30ch;
    line-height: 1.5;
}


/* ============================================================
   10. CORNER RADIUS
   ============================================================
   Ek hi tarah ki cheezein alag-alag corner pe thi. Ab do hi
   value: cards 16px, buttons/inputs/chips 12px.
   ============================================================ */

.rounded-md { border-radius: 0.5rem; }   /* 6px → 8px, chips ke liye */
.rounded-lg { border-radius: 0.75rem; }  /* 8px → 12px, buttons ke barabar */


/* ============================================================
   11. HARDCODED RANG → THEME FILE KE ANDAR
   ============================================================
   103 jagah aise rang the jo theme-colors.css ko bypass karte
   the. Matlab brand colour badalne pe woh 103 jagah purane rang
   me reh jati. Neeche unhe theme ke variables se jod diya gaya
   hai — ab sach me "ek file badlo, poori site badal jayegi".
   ============================================================ */

/* Hara (success) */
.text-emerald-400, .text-emerald-500,
.text-emerald-600, .text-emerald-700  { color: var(--color-success-dark); }
.bg-emerald-50                        { background-color: var(--color-success-tint); }
.bg-emerald-500                       { background-color: var(--color-success); }
.border-emerald-100                   { border-color: var(--color-success-tint); }
.border-emerald-400                   { border-color: var(--color-success); }

/* Peela (warning) */
.text-amber-500, .text-amber-600,
.text-amber-700, .text-amber-800      { color: var(--color-warning-dark); }
.text-amber-100                       { color: var(--color-warning-soft); }
.bg-amber-50                          { background-color: var(--color-warning-tint); }
.border-amber-100                     { border-color: var(--color-warning-tint); }
.text-orange-100                      { color: var(--color-warning-soft); }

/* Laal (danger) */
.text-red-500, .text-red-600,
.text-red-700                         { color: var(--color-danger-dark); }
.bg-red-50                            { background-color: var(--color-danger-tint); }
.border-red-100                       { border-color: var(--color-danger-tint); }
.text-rose-100                        { color: var(--color-danger-soft); }

/* Neela (primary / info) */
.bg-blue-50                           { background-color: var(--color-primary-tint); }
.text-cyan-100                        { color: var(--color-info-soft); }


/* ============================================================
   12. REDUCED MOTION
   ============================================================
   Jin logon ne phone ki settings me "Reduce Motion" on kiya hai
   (chakkar aana, motion sickness) unke liye saara animation band.
   Yeh block sabse neeche hona chahiye taaki sab par bhaari pade.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}