/* os-33 · Orange chrome — MiR directive (2026-11-03):
   "side bar or oper login me black color na ho — main theme
   hmara orange hai, is ke ilawa baki is ke sath jo color thek
   lage wo rakho."
   os-22 ke black surfaces (desktop sidebar #111, header login
   pill #111/#000) yahan khatam hain. Naya chrome: WHITE sidebar
   + orange brand accents (desktop), orange gradient header
   (mobile dark), orange login pill har width par. Content
   areas, status colors aur money green/red untouched.
   Ye sheet index.html mein SAB se aakhir load hoti hai. */

/* ── Header cloud/login button: ORANGE pill, har width ─────── */
#cloudButton{
  background:linear-gradient(120deg,#ed612d,#fb542b) !important;
  color:#fff !important; border:1px solid #ed612d !important;
  border-radius:999px !important; font-weight:700; box-shadow:none !important;
}
#cloudButton:hover{background:#d63c1e !important; border-color:#d63c1e !important}
/* Sync dots orange pill par: pending = safed, offline = halka safed */
#cloudButton[data-sync="pending"]::after{background:#fff !important}
#cloudButton[data-sync="offline"]::after{background:rgba(255,255,255,.55) !important}

/* ── Desktop (≥900px): WHITE sidebar, orange brand ─────────── */
@media (min-width:900px){
  /* os-35: chhote sidebar labels ka contrast white par ≥4.5:1 —
     wahi warm brown family, sirf gehray shades; layout wohi. */
  aside{
    background:#fff; border-right:1px solid #f3e3d7; color:#2b2320;
  }
  .brand .brand-name{color:#1c1c1e}
  .brand .brand-name b{color:#fb542b}
  .brand .brand-name i{color:#886b58}
  aside .business{
    background:#fff4ed; border:1px solid #f6ddcb; color:#2b2320;
  }
  aside .business small{color:#846450} /* os-37: tinted card (#fff4ed) par 4.49 tha — gehra warm shade, ab 4.95:1 */
  aside nav a{color:#57493f}
  aside nav a:hover{background:#fff7f1; color:#c74719}
  aside nav a.active{background:#ed612d; color:#fff}
  aside nav label{color:#8e6a51}
  aside .foot{color:#8a6b57; border-top:1px solid #f6e8dd}
  aside .foot a{color:#c74719}
}

/* ── Tablet (651–899px) LIGHT: sidebar text contrast ──────────
   os-36 (Round 2, item 2): is darmiyani width par ≥900 wala
   contrast block nahi lagta tha aur base halke rang (#65736b /
   #929b95) white sidebar par 4.5:1 se neeche thay. os-35 ke
   desktop par parkhe hue wohi warm shades yahan bhi — sirf
   light theme par, taake dark (DK) sidebar se takrao na ho. */
@media (min-width:651px) and (max-width:899px){
  body[data-theme=light] aside nav a{color:#57493f}
  body[data-theme=light] aside nav label{color:#8e6a51}
  body[data-theme=light] aside .business small{color:#846450} /* os-37: tinted card (#f5f5ee) par 4.44 tha — ab 4.89:1 */
  body[data-theme=light] aside .foot{color:#8a6b57}
  body[data-theme=light] aside .brand-name i{color:#886b58}
}

/* ── Mobile (≤899px) dark: header = orange gradient brand bar ──
   Content neeche dark hi rehta hai (DigiKhata references);
   sirf upar wali chrome orange hai — black header khatam. */
@media (max-width:899px){
  body[data-theme=dark] main>header{
    background:linear-gradient(120deg,#d63c1e 0%,#fb542b 100%) !important;
    color:#fff; border-bottom:0; box-shadow:none !important;
  }
  body[data-theme=dark] main>header .page-options>summary{color:#fff}
  body[data-theme=dark] main>header .support-icon{color:#fff !important}
  body[data-theme=dark] main>header .pill{background:rgba(255,255,255,.22); color:#fff}
  body[data-theme=dark] main>header .header-brand .brand-name{color:#fff !important}
  body[data-theme=dark] main>header .header-brand .brand-name b{color:#fff !important}
  body[data-theme=dark] main>header .shell-business{color:#fff}
  body[data-theme=dark] main>header .shell-business small{color:#ffe3d3}
  /* Orange header par login pill safed — saaf contrast */
  body[data-theme=dark] main>header #cloudButton{
    background:#fff !important; color:#c74719 !important; border-color:#fff !important;
  }
  body[data-theme=dark] main>header #cloudButton:hover{background:#fff0e9 !important}
  body[data-theme=dark] main>header #cloudButton[data-sync="pending"]::after{background:#ed612d !important}
  body[data-theme=dark] main>header #cloudButton[data-sync="offline"]::after{background:#c9a28d !important}
  body[data-theme=dark] main>header #cloudButton[data-sync="synced"]::after{color:#2f9e44 !important}
}