/* ═══════════════════════════════════════════════════════════════
   Thermosyn — Complete Design System CSS
   Multi-Tenant Refrigeration Service ERP Platform
   Version: 1.1.0 — Responsive Fix
   ═══════════════════════════════════════════════════════════════ */

/* ─── FONTS ─── */
@import url("inter.css"); /* self-hosted Inter — Google Fonts se local kiya */

/* ─── CSS VARIABLES (Design Tokens) ─── */
:root {
  --bg: #0b0f1a;
  --surface: #111827;
  --surface-alt: #1a2235;
  --card: #161e2e;
  --card-hover: #1c2640;
  --border: #1e293b;
  --border-light: #2a3752;
  --text: #e8ecf4;
  --text-muted: #8b9dc3;
  --text-dim: #5a6b8a;
  --primary: #3b82f6;
  --primary-glow: rgba(59, 130, 246, 0.15);
  --primary-20: rgba(59, 130, 246, 0.2);
  --primary-33: rgba(59, 130, 246, 0.33);
  --accent: #06d6a0;
  --accent-glow: rgba(6, 214, 160, 0.12);
  --accent-20: rgba(6, 214, 160, 0.2);
  --accent-33: rgba(6, 214, 160, 0.3);
  --warning: #f59e0b;
  --warning-glow: rgba(245, 158, 11, 0.12);
  --warning-20: rgba(245, 158, 11, 0.2);
  --warning-33: rgba(245, 158, 11, 0.3);
  --danger: #ef4444;
  --danger-glow: rgba(239, 68, 68, 0.12);
  --danger-20: rgba(239, 68, 68, 0.2);
  --danger-33: rgba(239, 68, 68, 0.3);
  --purple: #8b5cf6;
  --purple-glow: rgba(139, 92, 246, 0.12);
  --purple-20: rgba(139, 92, 246, 0.2);
  --purple-33: rgba(139, 92, 246, 0.3);
  --cyan: #22d3ee;
  --cyan-glow: rgba(34, 211, 238, 0.12);

  /*
   * ── UNIT KE SAFAR KE RANG ──
   *
   * Ek stage, ek rang — chart ki bar, legend ka nuqta aur pipeline ka chip
   * teeno yahi uthate hain. Pehle chart me rang JS me likhe hue the, is
   * liye wo theme ke saath badalte hi nahi the aur chips se unka koi
   * rishta nahi tha.
   *
   * Naam LABEL se banta hai (`Service` → `--stage-service`), taake PHP aur
   * JS dono bina kisi doosre naqshe ke ek hi naam nikaal lein.
   *
   * Tarteeb wahi jo pipeline ki hai.
   */
  --cyan-20: rgba(34, 211, 238, 0.2);
  --cyan-33: rgba(34, 211, 238, 0.3);
  --font-body: "Inter", sans-serif;
  --font-display: "Inter", sans-serif;
  --font-mono: "Inter", sans-serif;
  --stage-in-stock: var(--cyan);        /* .badge--in-stock */
  --stage-issued: var(--primary);       /* .badge--primary  */
  --stage-dispatched: #ec4899;          /* .badge--pink — sold ka purana naam */
  --stage-installed: var(--accent);     /* .badge--active   */
  --stage-active: var(--accent);        /* .badge--active   */
  --stage-service: var(--warning);      /* .badge--warning  */
  --stage-sold: #ec4899;                /* .badge--pink     */
  --stage-transferred: #6366f1;         /* .badge--indigo   */
  --stage-returned: #f97316;            /* .badge--orange   */
  --stage-faulty: var(--danger);        /* .badge--danger   */

  /*
   * Warranty lifecycle ka marhala nahi — wo TAREEKH se nikalti hai. Us ka
   * rang wahi jo unit ki row par warranty ke nishaan ka hai: hara chal
   * rahi hai, laal guzar gayi (views/units/index.php ka warrantyIcon).
   */
  --stage-warranty: var(--accent);
  --stage-out-of-warranty: var(--danger);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 9999px;
  --sidebar-width: 220px;
  --sidebar-collapsed: 60px;
  --topbar-height: 56px;

  /* ─── Thermosyn brand pack (v3.0) ────────────────────────────────
     Brand ke apne rang. Ye alag file me NAHI hain — ek hi token layer
     rehni chahiye, warna do palette waqt ke saath alag ho jaati hain.

     ── Maujooda tokens se rishta ──
     Palette pehle se brand ke mutabiq hai; sirf naam alag the:

       --ts-cyan  #22D3EE  =  --cyan  (bilkul wahi)
       --ts-blue  #2563EB  =  --primary  LIGHT theme me (bilkul wahi)

     Dark theme me `--primary` #3b82f6 (halka) rehta hai — wo galti NAHI
     hai: brand ka gehra neela dark background par padhne layak nahi
     rehta. Isliye semantic tokens jaan-boojh kar nahi badle gaye.

     `--ts-*` sirf wahan istemal hon jahan BRAND khud dikhana ho (logo ke
     aas-paas, marketing, PDF) — app ke normal UI ke liye upar wale
     semantic tokens hi rahen. */
  --ts-gradient: linear-gradient(135deg, #2563EB 0%, #3B9BF0 55%, #22D3EE 100%);
  --ts-blue: #2563EB;
  --ts-cyan: #22D3EE;
  --ts-ink: #0B1220;
  --ts-tile-ink: #0E1729;
  --ts-snow: #F1F5F9;
  --ts-muted: #94A3B8;
  --ts-in-range: #22DD8A;
  --ts-radius-tile: 22.37%;
}

/* ─── Brand assets ───────────────────────────────────────────────────
   Height set karo, width khud aa jayegi. Brand artwork par kabhi filter,
   opacity ya tint nahi (brand pack ka hard rule). */
.ts-logo { height: 32px; width: auto; display: block; }
.ts-logo--lg { height: 48px; }
.ts-logo--sm { height: 24px; }
.ts-tile { height: 40px; width: 40px; border-radius: var(--ts-radius-tile); }
.ts-logo, .ts-tile { filter: none !important; opacity: 1 !important; }

/* Wide lockup ki do shaklein hain — ink wordmark (light background ke
   liye) aur snow wordmark (dark ke liye). Server ko theme ka pata nahi
   hota (wo client par toggle hoti hai), isliye dono bhej kar CSS se
   chuna jata hai. */
.ts-logo--on-dark { display: block; }
.ts-logo--on-light { display: none; }
[data-theme="light"] .ts-logo--on-dark { display: none; }
[data-theme="light"] .ts-logo--on-light { display: block; }

/* ─── RESET & BASE ─── */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  font-size: 12px;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  overflow-x: hidden;
  min-height: 100vh;
}

a {
  color: inherit;
  text-decoration: none;
}
button {
  font-family: var(--font-body);
}
input,
textarea,
select {
  font-family: var(--font-body);
}
img {
  max-width: 100%;
  display: block;
}

/* ─── SCROLLBAR ─── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--bg);
}
::-webkit-scrollbar-thumb {
  background: var(--border-light);
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-dim);
}

/* ═══════════════════════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════════════════════ */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

@keyframes glow {
  0%,
  100% {
    box-shadow: 0 0 5px rgba(59, 130, 246, 0.3);
  }
  50% {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.6);
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes dotPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.9;
  }
  50% {
    transform: scale(1.3);
    opacity: 1;
  }
}

.animate-in {
  animation: fadeIn 0.5s ease both;
}
.animate-in-1 {
  animation: fadeIn 0.5s ease 0.05s both;
}
.animate-in-2 {
  animation: fadeIn 0.5s ease 0.1s both;
}
.animate-in-3 {
  animation: fadeIn 0.5s ease 0.15s both;
}
.animate-in-4 {
  animation: fadeIn 0.5s ease 0.2s both;
}
.animate-in-5 {
  animation: fadeIn 0.5s ease 0.25s both;
}
.animate-in-6 {
  animation: fadeIn 0.5s ease 0.3s both;
}
.animate-in-7 {
  animation: fadeIn 0.5s ease 0.35s both;
}
.animate-in-8 {
  animation: fadeIn 0.5s ease 0.4s both;
}

.slide-in {
  animation: slideInLeft 0.4s ease both;
}
.scale-in {
  animation: scaleIn 0.35s ease both;
}

/* ═══════════════════════════════════════════════════════════════
   LAYOUT SYSTEM
   ═══════════════════════════════════════════════════════════════ */
.app-container {
  display: flex;
  min-height: 100vh;
}

.main-content {
  margin-left: var(--sidebar-width);
  width: calc(100% - var(--sidebar-width));
  min-height: 100vh;
  background: var(--bg);
  transition: margin-left 0.25s cubic-bezier(0.4, 0, 0.2, 1), width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-x: hidden;
}

html.sidebar-is-collapsed .main-content {
  margin-left: var(--sidebar-collapsed);
  width: calc(100% - var(--sidebar-collapsed));
}

.page-wrapper {
  padding: 28px;
  background: var(--bg);
  min-height: calc(100vh - var(--topbar-height));
  width: 100%;
  max-width: 100vw;
}

/* ─── Grid Utilities ─── */
.grid {
  display: grid;
  gap: 16px;
}
.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}
.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}
.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}
.grid-5 {
  grid-template-columns: repeat(5, 1fr);
}
.grid-6 {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.grid-7 {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.grid-auto-320 {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.grid-auto-280 {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.grid-auto-300 {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.grid-2-1 {
  grid-template-columns: 2fr 1fr;
}

.gap-12 {
  gap: 12px;
}
.gap-16 {
  gap: 16px;
}
.gap-20 {
  gap: 20px;
}

/* Flex Utilities */
.flex {
  display: flex;
}
.flex-col {
  flex-direction: column;
}
.items-center {
  align-items: center;
}
.items-start {
  align-items: flex-start;
}
.justify-between {
  justify-content: space-between;
}
.justify-center {
  justify-content: center;
}
.flex-1 {
  flex: 1;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-shrink-0 {
  flex-shrink: 0;
}
.gap-4 {
  gap: 4px;
}
.gap-6 {
  gap: 6px;
}
.gap-8 {
  gap: 8px;
}
.gap-10 {
  gap: 10px;
}
.gap-14 {
  gap: 14px;
}

/* Spacing */
.mb-2 {
  margin-bottom: 2px;
}
.mb-4 {
  margin-bottom: 4px;
}
.mb-6 {
  margin-bottom: 6px;
}
.mb-8 {
  margin-bottom: 8px;
}
.mb-12 {
  margin-bottom: 12px;
}
.mb-14 {
  margin-bottom: 14px;
}
.mb-16 {
  margin-bottom: 16px;
}
.mb-20 {
  margin-bottom: 20px;
}
.mb-24 {
  margin-bottom: 24px;
}
.mb-28 {
  margin-bottom: 28px;
}
.mt-2 {
  margin-top: 2px;
}
.mt-4 {
  margin-top: 4px;
}
.mt-8 {
  margin-top: 8px;
}
.mt-14 {
  margin-top: 14px;
}
.mt-20 {
  margin-top: 20px;
}
.p-0 {
  padding: 0;
}
.p-16 {
  padding: 16px;
}
.p-20 {
  padding: 20px;
}
.p-24 {
  padding: 24px;
}
.p-32 {
  padding: 32px;
}
.pt-14 {
  padding-top: 14px;
}
.pt-16 {
  padding-top: 16px;
}
.px-0 {
  padding-left: 0;
  padding-right: 0;
}
.py-0 {
  padding-top: 0;
  padding-bottom: 0;
}

.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.overflow-auto {
  overflow: auto;
}
.overflow-x-auto {
  overflow-x: auto;
}
.cursor-pointer {
  cursor: pointer;
}
.cursor-default {
  cursor: default;
}
.relative {
  position: relative;
}
.overflow-hidden {
  overflow: hidden;
}
.w-full {
  width: 100%;
}

/* ═══════════════════════════════════════════════════════════════
   LOGIN SCREEN
   ═══════════════════════════════════════════════════════════════ */
.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background:
    radial-gradient(
      ellipse at 30% 20%,
      rgba(59, 130, 246, 0.08) 0%,
      transparent 50%
    ),
    radial-gradient(
      ellipse at 70% 80%,
      rgba(6, 214, 160, 0.06) 0%,
      transparent 50%
    ),
    var(--bg);
}

.login-card {
  width: 100%;
  max-width: 420px;
  padding: 40px;
  border-radius: 24px;
  background: linear-gradient(145deg, var(--card), var(--surface));
  border: 1px solid var(--border);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
  animation: fadeIn 0.5s ease both;
}

.login-logo {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  margin: 0 auto 16px;
  background: linear-gradient(135deg, var(--primary), var(--cyan));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 32px var(--primary-glow);
}

/* Uploaded wide logo (jaise 280x60): gradient box hata kar asli aspect ratio
   mein dikhao — square box mein daalne se logo squeeze ho jata tha. */
.login-logo--wide {
  width: auto;
  max-width: 260px;
  height: auto;
  max-height: 72px;
  border-radius: 0;
  background: none;
  box-shadow: none;
  padding: 0;
}
.login-logo--wide img {
  max-width: 100%;
  max-height: 72px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.login-logo svg {
  width: 32px;
  height: 32px;
  color: #fff;
}

.login-title {
  font-size: 26px;
  font-weight: 700;
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  text-align: center;
}

.login-title span {
  color: var(--primary);
}

.login-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 6px;
  text-align: center;
}

.role-selector {
  display: flex;
  border-radius: 12px;
  background: var(--surface-alt);
  padding: 4px;
  margin-bottom: 24px;
  border: 1px solid var(--border);
}

.role-selector-btn {
  flex: 1;
  padding: 8px 4px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  background: transparent;
  color: var(--text-muted);
  border: none;
}

.role-selector-btn.active {
  background: var(--primary);
  color: #fff;
}

/* Form Fields */
.form-group {
  margin-bottom: 16px;
}

.form-group:last-of-type {
  margin-bottom: 24px;
}

.form-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  display: block;
  margin-bottom: 8px;
  line-height: 1;
}

.form-label i,
.form-label svg {
  width: 13px;
  height: 13px;
  display: inline-block;
  vertical-align: -2px;
  margin-right: 4px;
  color: var(--text-dim);
}

.form-input-wrap {
  position: relative;
}

.form-input-wrap svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--text-dim);
  pointer-events: none;
}

.form-input {
  width: 100%;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 13px;
  font-family: var(--font-body);
  outline: none;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
  line-height: 1.4;
}

.form-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-20);
}

.form-input::placeholder {
  color: var(--text-dim);
  font-size: 12px;
}

.form-input-wrap .form-input {
  padding-left: 42px;
}

.form-input--no-icon {
  padding-left: 14px;
}

select.form-input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%236B7B9B' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
  cursor: pointer;
}

select.form-input:focus {
  border-color: var(--primary);
}

textarea.form-input {
  resize: vertical;
  min-height: 70px;
  line-height: 1.5;
}

/* Jis row par abhi kaam hua uspar ek halki jhalak. Pehle har action ke baad poora
   page reload hota tha, isliye ye pata hi nahi chalta tha ke kaunsi row badli.
   (WIR list; pehle isi page ke inline <style> me tha.) */
@keyframes wirRowFlash {
  0%   { background: color-mix(in srgb, var(--accent) 24%, transparent); }
  100% { background: transparent; }
}
tr.wir-updated { animation: wirRowFlash 1.8s ease-out; }
@media (prefers-reduced-motion: reduce) {
  tr.wir-updated { animation: none; box-shadow: inset 3px 0 0 var(--accent); }
}

/* Read-only field = reference value: dikhti hai, select/copy hoti hai, badalti nahi.
   `cursor: not-allowed` jaan-boojh kar hataya — wo jhoot bolta tha, kyunki text
   select to ho sakta hai. Opacity 0.6 se value dhundhli padti thi; ab muted
   background se hi saaf ho jata hai ke field editable nahi. */
.form-input[readonly] {
  background: var(--surface-alt);
  color: var(--text-muted);
  border-style: dashed;
  cursor: text;
}
.form-input[readonly]:focus {
  outline: none;
  border-color: var(--border);
  box-shadow: none;
}
/* disabled ab sirf radio/checkbox par bacha hai — wahan not-allowed sahi hai. */
input[type="radio"]:disabled,
input[type="checkbox"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.custom-select-wrapper {
  position: relative;
}
.custom-select-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  max-height: 260px;
  overflow-y: auto;
  margin-top: 4px;
}
.custom-select-results.hidden {
  display: none;
}
.custom-select-item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
  transition: background 0.15s;
  border-bottom: 1px solid var(--border);
}
.custom-select-item:last-child {
  border-bottom: none;
}
.custom-select-item:hover {
  background: var(--primary-glow);
}

.login-btn {
  width: 100%;
  padding: 14px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  background: linear-gradient(135deg, var(--primary), #2563eb);
  color: #fff;
  transition: all 0.3s;
  box-shadow: 0 4px 20px var(--primary-glow);
}

.login-btn:hover {
  box-shadow: 0 8px 32px rgba(59, 130, 246, 0.4);
  transform: translateY(-1px);
}

.login-footer {
  text-align: center;
  margin-top: 20px;
  font-size: 12px;
  color: var(--text-dim);
}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR
   ═══════════════════════════════════════════════════════════════ */
.sidebar {
  width: var(--sidebar-width);
  height: 100vh;
  background: var(--surface);
  border-right: 1px solid var(--border);
  transition:
    width 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  overflow: hidden;
  overscroll-behavior: contain;
  will-change: width, transform;
}

html.sidebar-is-collapsed .sidebar {
  width: var(--sidebar-collapsed);
}
html.sidebar-is-collapsed .sidebar .sidebar-brand-text {
  display: none;
}
html.sidebar-is-collapsed .sidebar .nav-label {
  display: none;
}

/*
 * ── HISSE KA SAR ──
 *
 * 23 link ek hi lambi lakeer me the. Code me wo khali satrein daal kar
 * guchchhon me rakhe the, par screen par sab barabar dikhte the —
 * dhoondhne ka ek hi tareeqa bachta tha: upar se neeche padho.
 *
 * Sar halka rakha gaya hai (dim rang, chhota harf). Uska kaam nazar
 * kheenchna nahi, balki guchchhe alag karna hai — agar wo link se zyada
 * numayan ho jaye to wahi shor ban jayega jo hata rahe hain.
 */
.sidebar-nav-section {
  padding: 14px 12px 5px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  user-select: none;
}

/*
 * Simti hui sidebar me naam chhup jata hai (wahi `nav-label` wala rule
 * jo upar hai). Us soorat me sar ki jagah ek patli lakeer reh jati hai —
 * naam na sahi, par guchchhe phir bhi alag nazar aate hain.
 */
html.sidebar-is-collapsed .sidebar-nav-section {
  height: 1px;
  margin: 9px 12px;
  padding: 0;
  /* `--border` is haalat me tqreeban ghaayab tha (dark me #1e293b par
     #111827) — guchchhe alag karne ka maqsad hi poora nahi hota tha. */
  background: var(--border-light);
}
/*
 * Khuli haalat: ginti aur PRO pill row ke aakhir me.
 *
 * `margin-left: auto` pehle markup ke andar inline likha tha. Wahan se
 * hata kar yahan laya gaya, warna simti haalat me use badalne ke liye
 * `!important` ki zaroorat padti.
 */
.sidebar-nav-item .nav-count,
.sidebar-nav-item .nav-lock {
  margin-left: auto;
}
.sidebar-nav-item .nav-count {
  font-size: 10px;
  /*
   * `line-height: 1` zaroori hai: iske bina badge ka line-box row ko
   * ~3px lamba kar deta tha, yaani jis row par ginti hai wo baaki
   * rows se oonchi ho jati. Naap kar dekha gaya.
   */
  line-height: 1;
  padding: 3px 7px;
}
.sidebar-nav-item .nav-lock {
  font-size: 9.5px;
  line-height: 1;
  padding: 2px 6px;
}

/*
 * ══════════════════════════════════════════════════════════════
 *  SIMTI HAALAT: GINTI ICON KE KANDHE PAR
 * ══════════════════════════════════════════════════════════════
 *
 * Pehle simte hue sidebar me saari badges chhup jati thin. Uska matlab
 * tha ke 7 pending service jobs ka number sidebar simate hi GAYAB —
 * aur user ko pata hi nahi chalta ke kuch pending hai.
 *
 * Ab ginti icon ke top-right kone par ek chhoti pill ban jati hai
 * (jaise phone ke app icon par). PRO/lock pill chhupi rehti hai: wo
 * lafz hai, number nahi, aur 60px ki jagah me nahi aa sakti — locked
 * item waise bhi dhundhli (opacity) dikhti hai.
 */
html.sidebar-is-collapsed .sidebar .sidebar-nav-item {
  position: relative;
}
html.sidebar-is-collapsed .sidebar .sidebar-nav-item .nav-lock {
  display: none;
}
html.sidebar-is-collapsed .sidebar .sidebar-nav-item .nav-count {
  position: absolute;
  top: 3px;
  right: 5px;
  margin-left: 0;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  font-size: 9px;
  border-radius: 999px;
  justify-content: center;
  /* Click icon ka hi rahe — pill beech me na aaye. */
  pointer-events: none;
}
html.sidebar-is-collapsed .sidebar .sidebar-brand {
  padding-left: 12px;
  padding-right: 12px;
  justify-content: center;
}
html.sidebar-is-collapsed .sidebar .sidebar-nav-item {
  padding-left: 8px;
  padding-right: 8px;
  justify-content: center;
}
html.sidebar-is-collapsed .sidebar .sidebar-toggle-btn {
  padding-left: 8px;
  padding-right: 8px;
}
html.sidebar-is-collapsed .sidebar .sidebar-toggle-wrap {
  padding-left: 8px;
  padding-right: 8px;
}

.sidebar-brand {
  padding: 16px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--border);
  min-height: 60px;
}

.sidebar-brand-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--primary), var(--cyan));
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar-brand-icon svg {
  width: 16px;
  height: 16px;
  color: #fff;
}

.sidebar-brand-text {
  overflow: hidden;
  white-space: nowrap;
}

.sidebar-brand-name {
  font-size: 15px;
  font-weight: 700;
  font-family: var(--font-display);
  line-height: 1.2;
}

.sidebar-brand-role {
  font-size: 9px;
  color: var(--text-dim);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.sidebar-nav {
  flex: 1;
  padding: 10px 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.sidebar-nav::-webkit-scrollbar {
  display: none;
}

.sidebar-nav-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  /*
   * Unchai ka farsh — dono haalaton ki barabari isi par tiki hai.
   *
   * Khuli haalat me row ki unchai label ke line-box (~16.5px) se banti
   * hai, simti haalat me sirf icon (14px) se. Yaani padding barabar
   * kar dene ke baad bhi 2.5px ka farq reh jata. `min-height` wo farq
   * khatam karta hai: dono taraf row theek 34px rehti hai.
   *
   * `min-height` (na ke `height`) isliye ke mobile par jaan-boojh kar
   * zyada padding hai (ungli ke liye) — wahan row ko bada hone ki
   * ijazat rehni chahiye.
   */
  min-height: 34px;
  box-sizing: border-box;
  border-radius: var(--radius-md);
  margin-bottom: 2px;
  border: none;
  cursor: pointer;
  font-size: 11px;
  font-weight: 500;
  background: transparent;
  color: var(--text-muted);
  transition: all 0.2s ease;
  text-align: left;
}

.sidebar-nav-item:hover {
  background: var(--surface-alt);
}

.sidebar-nav-item.active {
  background: var(--primary-glow);
  color: var(--primary);
  font-weight: 600;
}

.sidebar-nav-item svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.sidebar-nav-item .nav-label {
  overflow: hidden;
  white-space: nowrap;
  transition:
    opacity 0.2s ease,
    width 0.3s ease;
  opacity: 1;
}

.sidebar-toggle-wrap {
  padding: 12px;
  border-top: 1px solid var(--border);
}

.sidebar-toggle-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  background: var(--surface-alt);
  color: var(--text-muted);
  font-size: 12px;
  transition: all 0.2s;
}

.sidebar-toggle-btn:hover {
  background: var(--border);
}

.sidebar-toggle-btn svg {
  width: 16px;
  height: 16px;
}

/* Mobile sidebar overlay backdrop */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99;
}

.sidebar-overlay.active {
  display: block;
}

/* ═══════════════════════════════════════════════════════════════
   TOPBAR
   ═══════════════════════════════════════════════════════════════ */
.topbar {
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 50;
  gap: 16px;
}

.topbar-title {
  font-size: 18px;
  font-weight: 700;
  font-family: var(--font-display);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-search-wrap {
  flex: 1;
  max-width: 400px;
  position: relative;
  margin-left: 16px;
}
@media (max-width: 768px) {
  .topbar-search-wrap {
    display: none;
  } /* Hide global search on mobile to save space, or show a button */
}

.topbar-search {
  position: relative;
  display: flex;
  align-items: center;
}

.topbar-search i,
.topbar-search svg {
  position: absolute;
  left: 12px;
  color: var(--text-muted);
  width: 16px;
  height: 16px;
  pointer-events: none;
}

.topbar-search input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px 8px 36px;
  font-size: 13px;
  color: var(--text);
  transition: all 0.2s;
}

.topbar-search input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.global-search-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  max-height: 400px;
  overflow-y: auto;
  z-index: 100;
  display: none;
}

.global-search-dropdown.active {
  display: block;
}

.gs-category {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  padding: 8px 12px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
}

.gs-item {
  display: block;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: var(--text);
  transition: background 0.15s;
}

.gs-item:last-child {
  border-bottom: none;
}

.gs-item:hover,
.gs-item.active {
  background: var(--hover);
}

.gs-item-title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 2px;
}

.gs-item-subtitle {
  font-size: 11px;
  color: var(--text-muted);
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.topbar-notif {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--surface-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 1px solid var(--border);
  color: var(--text-muted);
  transition: all 0.2s;
  flex-shrink: 0;
}

.topbar-notif:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.topbar-notif svg {
  width: 16px;
  height: 16px;
}

.topbar-notif-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--danger);
  border: 2px solid var(--surface);
}

.topbar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 6px;
  border-radius: 12px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}

.topbar-user:hover {
  border-color: var(--primary-33);
}

.topbar-avatar {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--primary), var(--purple));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.topbar-username {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.topbar-logout {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--surface-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 1px solid var(--border);
  color: var(--text-muted);
  transition: all 0.2s;
  flex-shrink: 0;
}

.topbar-logout:hover {
  color: var(--danger);
  border-color: var(--danger-33);
}

.topbar-logout svg {
  width: 16px;
  height: 16px;
}

/* ═══════════════════════════════════════════════════════════════
   PAGE HEADER
   ═══════════════════════════════════════════════════════════════ */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  gap: 12px;
  flex-wrap: wrap;
}

.page-title {
  font-size: 22px;
  font-weight: 700;
  font-family: var(--font-display);
}

.page-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
}

.page-header-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════════
   STAT CARDS
   ═══════════════════════════════════════════════════════════════ */
.stat-card {
  background: linear-gradient(135deg, var(--card) 0%, var(--surface-alt) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 22px 24px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: default;
}

.stat-card:hover {
  transform: translateY(-2px);
}

.stat-card:hover.color-primary {
  border-color: var(--primary);
}
.stat-card:hover.color-accent {
  border-color: var(--accent);
}
.stat-card:hover.color-warning {
  border-color: var(--warning);
}
.stat-card:hover.color-danger {
  border-color: var(--danger);
}
.stat-card:hover.color-purple {
  border-color: var(--purple);
}
.stat-card:hover.color-cyan {
  border-color: var(--cyan);
}

.stat-card-glow {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  opacity: 0.06;
}

.stat-card-glow.color-primary {
  background: var(--primary);
}
.stat-card-glow.color-accent {
  background: var(--accent);
}
.stat-card-glow.color-warning {
  background: var(--warning);
}
.stat-card-glow.color-danger {
  background: var(--danger);
}
.stat-card-glow.color-purple {
  background: var(--purple);
}
.stat-card-glow.color-cyan {
  background: var(--cyan);
}

.stat-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.stat-card-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-card-icon svg {
  width: 20px;
  height: 20px;
}

.stat-card-icon.color-primary {
  background: linear-gradient(
    135deg,
    var(--primary-20),
    rgba(59, 130, 246, 0.08)
  );
  border: 1px solid var(--primary-33);
  color: var(--primary);
}
.stat-card-icon.color-accent {
  background: linear-gradient(
    135deg,
    var(--accent-20),
    rgba(6, 214, 160, 0.08)
  );
  border: 1px solid var(--accent-33);
  color: var(--accent);
}
.stat-card-icon.color-warning {
  background: linear-gradient(
    135deg,
    var(--warning-20),
    rgba(245, 158, 11, 0.08)
  );
  border: 1px solid var(--warning-33);
  color: var(--warning);
}
.stat-card-icon.color-danger {
  background: linear-gradient(
    135deg,
    var(--danger-20),
    rgba(239, 68, 68, 0.08)
  );
  border: 1px solid var(--danger-33);
  color: var(--danger);
}
.stat-card-icon.color-purple {
  background: linear-gradient(
    135deg,
    var(--purple-20),
    rgba(139, 92, 246, 0.08)
  );
  border: 1px solid var(--purple-33);
  color: var(--purple);
}
.stat-card-icon.color-cyan {
  background: linear-gradient(135deg, var(--cyan-20), rgba(34, 211, 238, 0.08));
  border: 1px solid var(--cyan-33);
  color: var(--cyan);
}

/* ── Compact stat card ──
   Icon BAAYEN, number aur label DAAYEN kinare par — dono bilkul ulti taraf.
   Poora card chhota, taaki ek qatar me 5–6 aa sakein.

   Markup wahi rehta hai jo bade card ka hai (glow, top>icon, value, label,
   aur marzi se ek note ki line) — sirf ye class lagti hai. Isliye koi page
   apna alag markup nahi paalta.

   Grid isliye, flex nahi: icon ko poori unchai me beech me rakhna hai jabki
   uske bagal do (ya teen) lines lagti hain. */
.stat-card--compact {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-auto-rows: auto;
  column-gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: var(--radius-lg);
}
.stat-card--compact .stat-card-top {
  grid-column: 1;
  grid-row: 1 / -1;
  margin-bottom: 0;
}
.stat-card--compact .stat-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
}
.stat-card--compact .stat-card-icon svg { width: 17px; height: 17px; }

.stat-card--compact .stat-card-value {
  grid-column: 2;
  font-size: 21px;
  line-height: 1.1;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.stat-card--compact .stat-card-label {
  grid-column: 2;
  margin-top: 2px;
  font-size: 10.5px;
  text-align: right;
  /* Lambe naam ("Partially Received") card ko chaudा na karein */
  overflow-wrap: anywhere;
}
/* Teesri line (jaise Vehicles par "4 vehicles have no unit") — wo bhi daayen */
.stat-card--compact > :not(.stat-card-glow):not(.stat-card-top):not(.stat-card-value):not(.stat-card-label) {
  grid-column: 2;
  text-align: right;
}
/* Glow chhote card me bada lagta hai */
.stat-card--compact .stat-card-glow { width: 56px; height: 56px; top: -16px; right: -16px; }

/* ═══ Live filter ka intezaar ═══
   Rows badalne me jitni der lagti hai wo dikhni chahiye — warna user dobara
   click karta hai. Lekin content GAYAB nahi hota (spinner laga kar table
   hatana screen ko jhatka deta hai); wo sirf halka pad jata hai aur click
   lena band kar deta hai. Upar ek patli lakeer chalti rehti hai.

   `is-loading` sirf tab lagta hai jab request sach me chal rahi ho, isliye
   turant aane wale jawab par ye jhalakta bhi nahi. */
[data-live-table] { position: relative; }
[data-live-table].is-loading .table-container,
[data-live-table].is-loading .pcx-filters {
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
[data-live-table].is-loading::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
  background-size: 40% 100%;
  background-repeat: no-repeat;
  animation: liveTableSweep 0.9s linear infinite;
  z-index: 2;
}
@keyframes liveTableSweep {
  from { background-position: -40% 0; }
  to   { background-position: 140% 0; }
}
@media (prefers-reduced-motion: reduce) {
  [data-live-table].is-loading::before { animation: none; background: var(--primary); opacity: 0.5; }
}

/* Filter ki tarah chalne wale stat cards (Service Reminders, Part Claims).
   Ye pehle SIRF reminders.php ke inline <style> me tha — yaani kisi aur
   page par lagta hi nahi tha. Yahan hone se dono jagah ek jaisa dikhta hai. */
.stat-card-filter { opacity: 0.75; cursor: pointer; transition: all 0.2s; }
.stat-card-filter.active,
.stat-card-filter:hover { opacity: 1; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.stat-card-filter.active { border-color: currentColor; }

.stat-card-change {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 12px;
  font-weight: 600;
}

.stat-card-change.up {
  color: var(--accent);
}
.stat-card-change.down {
  color: var(--danger);
}
.stat-card-change svg {
  width: 14px;
  height: 14px;
}

.stat-card-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
  font-family: var(--font-display);
  line-height: 1.1;
}

.stat-card-label {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
  font-weight: 500;
}

/* Stat ke neeche wali ek satar — wo baat jo aankda khud nahi batata.
   Gyarah safhon par ye inline likhi hui thi; ab ek hi jagah. */
.stat-card-hint {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 6px;
}

/* ─── Sparkline Mini Bar Chart ─── */
.sparkline-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 32px;
}

.sparkline-bar {
  width: 6px;
  min-height: 4px;
  border-radius: 2px;
  background: var(--primary);
  opacity: 0.5;
  transition: opacity 0.2s, height 0.4s ease;
}

.sparkline-bar:last-child {
  opacity: 1;
}

.sparkline-bar:hover {
  opacity: 1;
}

.color-primary .sparkline-bar { background: var(--primary); }
.color-accent .sparkline-bar { background: var(--accent); }
.color-warning .sparkline-bar { background: var(--warning); }
.color-danger .sparkline-bar { background: var(--danger); }
.color-purple .sparkline-bar { background: var(--purple); }
.color-cyan .sparkline-bar { background: var(--cyan); }

/* ─── Progress Ring (SVG) ─── */
.progress-ring-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.progress-ring {
  transform: rotate(-90deg);
}

.progress-ring-bg {
  fill: none;
  stroke: var(--border);
  stroke-width: 4;
}

.progress-ring-fill {
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s ease;
}

.progress-ring-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ═══════════════════════════════════════════════════════════════
   CARDS (Generic)
   ═══════════════════════════════════════════════════════════════ */
.card {
  background: var(--card);
  border-radius: var(--radius-xl);
  padding: 24px;
  border: 1px solid var(--border);
}

.card--hover {
  transition: all 0.3s ease;
  cursor: pointer;
}

.card--hover:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
}

.card-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 16px;
}

.card-title--sm {
  font-size: 14px;
}

.card-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.card-section {
  padding: 14px 0;
  border-top: 1px solid var(--border);
}

/* ═══════════════════════════════════════════════════════════════
   STATUS BADGES
   ═══════════════════════════════════════════════════════════════ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: capitalize;
  white-space: nowrap;
}

.badge--md {
  padding: 5px 14px;
  font-size: 12px;
}

.badge-auto {
  display: inline-flex;
  align-items: center;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.8px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--cyan-glow, rgba(6,182,212,0.12));
  color: var(--cyan, #06b6d4);
  border: 1px solid rgba(6,182,212,0.25);
  vertical-align: middle;
  margin-left: 4px;
  line-height: 1;
}

/* Email Automation opt-in tag — Auto Create Jobs (.badge-auto) ke jaisa, par
   apna rang taaki reminders row par dono automation alag pehchane jaayein. */
.badge-mail {
  display: inline-flex;
  align-items: center;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.8px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--primary-glow, rgba(59,130,246,0.12));
  color: var(--primary, #3b82f6);
  border: 1px solid var(--primary-33, rgba(59,130,246,0.25));
  vertical-align: middle;
  margin-left: 4px;
  line-height: 1;
}

.badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  opacity: 0.9;
  display: inline-block;
  flex-shrink: 0;
}

/* ── Naam ke aliases: badge--accent / --success / --primary / --info /
   --secondary / --default ──

   Ye naam views me pehle se likhe ja rahe the (Service Job ki "In Warranty",
   completed job, super-admin ke logs) par CSS me maujood hi nahi the. Nateeja:
   `.badge` ka sirf dhaancha lagta tha — na background, na rang, na border —
   aur badge saade matn jaisa dikhta tha. Chup-chaap: koi error nahi aata,
   bas cheez dikhna band ho jati hai.

   Isliye har naam ko uske sahi khandaan me jod diya gaya hai (upar wale
   groups me), naya rang banaye bagair. */
.badge--active,
.badge--completed,
.badge--approved,
.badge--available,
.badge--accent,
.badge--success,
.badge--valid {
  background: var(--accent-glow);
  color: var(--accent);
  border: 1px solid var(--accent-33);
}
.badge--active .badge-dot,
.badge--completed .badge-dot,
.badge--approved .badge-dot,
.badge--available .badge-dot,
.badge--accent .badge-dot,
.badge--success .badge-dot,
.badge--valid .badge-dot {
  background: var(--accent);
}

.badge--in-progress,
.badge--normal,
.badge--on-job,
.badge--primary,
.badge--info,
.badge--business {
  background: var(--primary-glow);
  color: var(--primary);
  border: 1px solid var(--primary-33);
}
.badge--in-progress .badge-dot,
.badge--normal .badge-dot,
.badge--on-job .badge-dot,
.badge--primary .badge-dot,
.badge--info .badge-dot,
.badge--business .badge-dot {
  background: var(--primary);
}

.badge--pending,
.badge--high,
.badge--under-review,
.badge--warning {
  background: var(--warning-glow);
  color: var(--warning);
  border: 1px solid var(--warning-33);
}
.badge--pending .badge-dot,
.badge--high .badge-dot,
.badge--under-review .badge-dot,
.badge--warning .badge-dot {
  background: var(--warning);
}

.badge--emergency,
.badge--rejected,
.badge--suspended,
.badge--expired,
.badge--overdue,
.badge--missed,
.badge--danger {
  background: var(--danger-glow);
  color: var(--danger);
  border: 1px solid var(--danger-33);
}
.badge--emergency .badge-dot,
.badge--rejected .badge-dot,
.badge--suspended .badge-dot,
.badge--expired .badge-dot,
.badge--overdue .badge-dot,
.badge--missed .badge-dot,
.badge--danger .badge-dot {
  background: var(--danger);
}

.badge--waiting-parts,
.badge--trial,
.badge--enterprise,
.badge--assigned-body {
  background: var(--purple-glow);
  color: var(--purple);
  border: 1px solid var(--purple-33);
}
.badge--waiting-parts .badge-dot,
.badge--trial .badge-dot,
.badge--enterprise .badge-dot,
.badge--assigned-body .badge-dot {
  background: var(--purple);
}

.badge--assigned,
.badge--in-stock,
.badge--starter,
.badge--cyan {
  background: var(--cyan-glow);
  color: var(--cyan);
  border: 1px solid var(--cyan-33);
}
.badge--assigned .badge-dot,
.badge--in-stock .badge-dot,
.badge--starter .badge-dot,
.badge--cyan .badge-dot {
  background: var(--cyan);
}

.badge--on-leave,
.badge--na,
.badge--muted,
.badge--secondary,
.badge--default {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
}
/* `ghost` — halka, bina rang ka badge (ginti/label ke liye: "3 Items").
   Invoice ke naye page ise istemal karte hain. Ye CSS likha nahi gaya tha,
   to badge bilkul be-shakl (bina background/border) chhap raha tha. */
.badge--ghost {
  background: var(--surface-alt);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.badge--ghost .badge-dot {
  background: var(--text-dim);
}
.badge--on-leave .badge-dot,
.badge--na .badge-dot,
.badge--muted .badge-dot {
  background: var(--text-dim);
}

.badge--purple {
  background: rgba(139, 92, 246, 0.12);
  color: #8b5cf6;
  border: 1px solid rgba(139, 92, 246, 0.25);
}
.badge--purple .badge-dot {
  background: #8b5cf6;
}

/* Part-claim badges.
   AHEM NIYAM: in sab ka BOX baaki badges se bilkul ek jaisa rahe —
   1px border aur font-weight 600 (base .badge se). Pehle solid-success ka
   font-weight 700 aur partial ka border 2px tha, jisse wo padosi badges se
   thode bade dikhte the aur qatar tedhi lagti thi. Farq sirf RANG se aata hai,
   size se nahi. */

/* Received — bhara hua green. Approved bhi accent green outline hai, isliye
   sirf hue se farq nahi banta; bhara hua hona hi "khatam" ka signal hai. */
.badge--solid-success {
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
}
.badge--solid-success .badge-dot { background: #fff; }

/* Partially Received — shortage hai, isliye RED taaki turant nazar aaye.
   Rejected bhi red hai, isliye border poori strength ka (--danger) rakha hai
   uske halke --danger-33 ke muqable — bina size badle emphasis mil jata hai. */
.badge--partial {
  background: var(--danger-glow);
  color: var(--danger);
  border: 1px solid var(--danger);
}
.badge--partial .badge-dot { background: var(--danger); }

/* Closed — khatam aur archived. `badge--muted` ka background bilkul transparent
   hai, isliye wo apne bhare/tinted padosiyon ke beech khokla lagta tha. Yahan
   halka tint de diya taaki wazan barabar lage. */
.badge--closed {
  background: color-mix(in srgb, var(--text-muted) 12%, transparent);
  color: var(--text-muted);
  border: 1px solid color-mix(in srgb, var(--text-muted) 30%, transparent);
}
.badge--closed .badge-dot { background: var(--text-muted); }

/* ═══════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  border: none;
}

.btn svg {
  width: 16px;
  height: 16px;
}
.btn--sm {
  padding: 6px 12px;
  font-size: 12px;
}
.btn--sm svg {
  width: 14px;
  height: 14px;
}
.btn--lg {
  padding: 12px 24px;
  font-size: 15px;
}
.btn--primary {
  background: var(--primary);
  color: #fff;
}
.btn--primary:hover {
  background: #2563eb;
}
.btn--success {
  background: var(--accent);
  color: #000;
}
.btn--success:hover {
  background: #05b88a;
}
.btn--outline {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-light);
}
.btn--outline:hover {
  background: var(--surface-alt);
  border-color: var(--primary);
}
.btn--ghost {
  background: transparent;
  color: var(--text-muted);
}
.btn--ghost:hover {
  background: var(--surface-alt);
}
.btn--danger {
  background: var(--danger);
  color: #fff;
}
.btn--danger:hover {
  background: #dc2626;
}

.btn-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: all 0.2s;
  padding: 0;
  flex-shrink: 0;
}

.btn-icon:hover {
  border-color: var(--primary-33);
  color: var(--primary);
}
.btn-icon svg {
  width: 14px;
  height: 14px;
}
.btn-icon--approve {
  background: var(--accent-glow);
  border-color: var(--accent-33);
  color: var(--accent);
}
.btn-icon--approve:hover {
  background: var(--accent-20);
}
.btn-icon--reject {
  background: var(--danger-glow);
  border-color: var(--danger-33);
  color: var(--danger);
}
.btn-icon--reject:hover {
  background: var(--danger-20);
}
.btn-icon--edit {
  color: var(--primary);
}
.btn-icon--edit:hover {
  background: var(--primary-glow);
  border-color: var(--primary-33);
}
.btn-icon--delete {
  color: var(--danger);
}
.btn-icon--delete:hover {
  background: var(--danger-glow);
  border-color: var(--danger-33);
}
.btn-icon.flag-active {
  background: var(--danger-glow);
  border-color: var(--danger-33);
  color: var(--danger);
}
.btn-icon.flag-active svg {
  fill: currentColor;
}
.btn-icon.flag-active:hover {
  background: var(--danger-20);
  border-color: var(--danger);
}

/* ═══════════════════════════════════════════════════════════════
   FLAG SYSTEM — Universal Styles
   ═══════════════════════════════════════════════════════════════ */
.flag-banner {
  padding: 14px 20px;
  border-radius: 12px;
  background: var(--fb-glow, var(--danger-glow));
  border: 1px solid var(--fb-edge, var(--danger-33));
  border-left: 4px solid var(--fb-color, var(--danger));
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.flag-banner__icon {
  width: 24px;
  height: 24px;
  color: var(--fb-color, var(--danger));
  fill: var(--fb-color, var(--danger));
  flex-shrink: 0;
}
.flag-banner__body { flex: 1; }
.flag-banner__title {
  font-weight: 700;
  font-size: 13px;
  color: var(--fb-color, var(--danger));
  margin-bottom: 2px;
}
.flag-banner__reason {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}
.flag-banner__resolve {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-glow);
  border: 1px solid var(--accent-33);
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}
.flag-banner__resolve:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
}
.flag-banner__resolve svg {
  width: 13px;
  height: 13px;
}

/* ── Flag ki patti — job ke naam ke NEECHE, darje ke rang me ────────
 *
 * Rang `--fr-*` se aata hai, jo `flagRow()` (views/helpers.php) har
 * darje ke liye alag bhejta hai. Isi liye yahan low/medium/high ke
 * teen alag class nahi hain: rang ka faisla ek hi jagah hota hai, CSS
 * sirf shakal deta hai.
 *
 * `svg` par rule isliye ke lucide `<i data-lucide>` ko chal kar `<svg>`
 * se BADAL deta hai — `i` par likha hua rule browser me kabhi lagta hi
 * nahi.
 */
.flag-row {
  display: flex !important;
  align-items: center;
  gap: 5px;
  width: max-content;
  max-width: 100%;
  margin-top: 4px;
  padding: 2px 8px 2px 6px;
  border: 1px solid var(--fr-edge, var(--danger-33));
  border-left: 3px solid var(--fr-color, var(--danger));
  border-radius: var(--radius-sm);
  background: var(--fr-glow, var(--danger-glow));
  font: inherit;
  text-align: left;
  line-height: 1.25;
}
button.flag-row { cursor: pointer; }
button.flag-row:hover { background: var(--surface-alt); }
button.flag-row:focus-visible { outline: 2px solid var(--fr-color, var(--danger)); outline-offset: 2px; }

.flag-row__icon,
.flag-row svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  color: var(--fr-color, var(--danger));
}
.flag-row__level {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--fr-color, var(--danger));
  white-space: nowrap;
}
.flag-row__reason {
  font-size: 11px;
  color: var(--text-muted);
}
/* Table me har row ki unchai barabar rehni chahiye, isliye wajah ek hi
   qatar me — aur column ko kheenchne se rokne ke liye chaudai bandh. */
.table .flag-row {
  max-width: 140px;
  overflow: visible;
}
.table .flag-row__reason {
  display: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   COOLTOOL — MODERN ENTERPRISE TOOLTIP SYSTEM (SMART POSITIONING & AUTO-WRAP)
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  --tool-border: var(--primary, #3b82f6);
}
.cooltool {
  position: relative;
  cursor: pointer;
  display: inline-flex;
}
.cooltool .tooltip {
  opacity: 0;
  visibility: hidden;
  color: #ffffff;
  background: rgba(15, 23, 42, 0.96);
  backdrop-filter: blur(10px);
  position: absolute;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: normal;
  text-transform: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.25);
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s;
  pointer-events: none;
  width: max-content;
  max-width: 280px;
  min-width: 140px;
  box-sizing: border-box;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  z-index: 999999;
}
.cooltool .tooltip::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
}
.cooltool .tooltip .before-content {
  display: block;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  color: #f8fafc;
}
.cooltool .tooltip .after-content {
  display: none;
  font-size: 10.5px;
  color: #cbd5e1;
  font-style: italic;
  margin-top: 5px;
  padding-top: 4px;
  border-top: 1px dashed rgba(255, 255, 255, 0.2);
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}
.cooltool:hover > .tooltip,
.cooltool:focus-visible > .tooltip {
  opacity: 1 !important;
  visibility: visible !important;
}
.cooltool .tooltip .hideTip {
  display: none !important;
}
.cooltool .tooltip .showTip {
  display: block !important;
}

/* ── Top Tooltip ── */
[data-tooltip="top"],
[data-tooltip-dir="top"] > .tooltip {
  bottom: calc(100% + 7px);
  left: 50%;
  transform: translate(-50%, 4px);
}
.cooltool:hover > [data-tooltip="top"],
.cooltool:hover > [data-tooltip-dir="top"] > .tooltip,
.cooltool:focus-visible > [data-tooltip="top"],
.cooltool:focus-visible > [data-tooltip-dir="top"] > .tooltip {
  transform: translate(-50%, -2px);
}
[data-tooltip="top"]::after,
[data-tooltip-dir="top"] > .tooltip::after {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-top: 6px solid rgba(15, 23, 42, 0.96);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
}

/* ── Bottom Tooltip ── */
[data-tooltip="bottom"],
[data-tooltip-dir="bottom"] > .tooltip {
  top: calc(100% + 7px);
  left: 50%;
  transform: translate(-50%, -4px);
}
.cooltool:hover > [data-tooltip="bottom"],
.cooltool:hover > [data-tooltip-dir="bottom"] > .tooltip,
.cooltool:focus-visible > [data-tooltip="bottom"],
.cooltool:focus-visible > [data-tooltip-dir="bottom"] > .tooltip {
  transform: translate(-50%, 2px);
}
[data-tooltip="bottom"]::after,
[data-tooltip-dir="bottom"] > .tooltip::after {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-bottom: 6px solid rgba(15, 23, 42, 0.96);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
}

/* ── Left Tooltip ── */
[data-tooltip="left"],
[data-tooltip-dir="left"] > .tooltip {
  right: calc(100% + 7px);
  top: 50%;
  transform: translate(4px, -50%);
}
.cooltool:hover > [data-tooltip="left"],
.cooltool:hover > [data-tooltip-dir="left"] > .tooltip {
  transform: translate(-2px, -50%);
}
[data-tooltip="left"]::after,
[data-tooltip-dir="left"] > .tooltip::after {
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-left: 6px solid rgba(15, 23, 42, 0.96);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

/* ── Right Tooltip ── */
[data-tooltip="right"],
[data-tooltip-dir="right"] > .tooltip {
  left: calc(100% + 7px);
  top: 50%;
  transform: translate(-4px, -50%);
}
.cooltool:hover > [data-tooltip="right"],
.cooltool:hover > [data-tooltip-dir="right"] > .tooltip {
  transform: translate(2px, -50%);
}
[data-tooltip="right"]::after,
[data-tooltip-dir="right"] > .tooltip::after {
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-right: 6px solid rgba(15, 23, 42, 0.96);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

/* ── Smart Horizontal Alignment (Opens where there is more space) ── */
[data-align="left"] > .tooltip,
.cooltool .tooltip.align-left {
  left: 0 !important;
  right: auto !important;
  transform: translateY(4px) !important;
}
.cooltool[data-align="left"]:hover > .tooltip,
.cooltool:hover > .tooltip.align-left,
.cooltool[data-align="left"]:focus-visible > .tooltip,
.cooltool:focus-visible > .tooltip.align-left {
  transform: translateY(-2px) !important;
}
[data-align="left"] > .tooltip::after,
.cooltool .tooltip.align-left::after {
  left: 16px !important;
  right: auto !important;
  transform: none !important;
}

[data-align="right"] > .tooltip,
.cooltool .tooltip.align-right {
  right: 0 !important;
  left: auto !important;
  transform: translateY(4px) !important;
}
.cooltool[data-align="right"]:hover > .tooltip,
.cooltool:hover > .tooltip.align-right,
.cooltool[data-align="right"]:focus-visible > .tooltip,
.cooltool:focus-visible > .tooltip.align-right {
  transform: translateY(-2px) !important;
}
[data-align="right"] > .tooltip::after,
.cooltool .tooltip.align-right::after {
  right: 16px !important;
  left: auto !important;
  transform: none !important;
}

/* ── Smart Vertical Flip (Opens below if top is blocked) ── */
.cooltool .tooltip.flip-bottom {
  bottom: auto !important;
  top: calc(100% + 7px) !important;
}
.cooltool .tooltip.flip-bottom::after {
  top: auto !important;
  bottom: 100% !important;
  border-top-color: transparent !important;
  border-bottom: 6px solid rgba(15, 23, 42, 0.96) !important;
}
.cooltool[data-tooltip-border*="true"] .tooltip.flip-bottom::after {
  border-bottom-color: var(--tool-border, var(--primary)) !important;
}

.cooltool .tooltip.flip-top {
  top: auto !important;
  bottom: calc(100% + 7px) !important;
}
.cooltool .tooltip.flip-top::after {
  bottom: auto !important;
  top: 100% !important;
  border-bottom-color: transparent !important;
  border-top: 6px solid rgba(15, 23, 42, 0.96) !important;
}
.cooltool[data-tooltip-border*="true"] .tooltip.flip-top::after {
  border-top-color: var(--tool-border, var(--primary)) !important;
}

/* Tooltip Accent Borders */
[data-tooltip-border*="true"] .tooltip,
.cooltool[data-tooltip-border*="true"] .tooltip {
  border: 1px solid var(--tool-border, var(--primary));
}
[data-tooltip-dir="top"][data-tooltip-border*="true"] > .tooltip::after,
[data-tooltip="top"][data-tooltip-border*="true"]::after {
  border-top-color: var(--tool-border, var(--primary));
}
[data-tooltip-dir="bottom"][data-tooltip-border*="true"] > .tooltip::after,
[data-tooltip="bottom"][data-tooltip-border*="true"]::after {
  border-bottom-color: var(--tool-border, var(--primary));
}
[data-tooltip-dir="left"][data-tooltip-border*="true"] > .tooltip::after,
[data-tooltip="left"][data-tooltip-border*="true"]::after {
  border-left-color: var(--tool-border, var(--primary));
}
[data-tooltip-dir="right"][data-tooltip-border*="true"] > .tooltip::after,
[data-tooltip="right"][data-tooltip-border*="true"]::after {
  border-right-color: var(--tool-border, var(--primary));
}

/* ── Flag ka darja chunne wale teen radio (views/services/_flag_severity.php) ──
 *
 * Rang `--fs-*` se — wahi teen rang jo `flagSeverityMeta()` deta hai.
 * Chuna hua option apne rang me bhar jata hai; baaki do khamosh rehte
 * hain, taake "kya chuna hai" ek nazar me dikhe.
 */
.flag-sev {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.flag-sev__opt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
}
.flag-sev input { position: absolute; opacity: 0; width: 0; height: 0; }
.flag-sev__opt svg { width: 13px; height: 13px; flex-shrink: 0; }
.flag-sev__opt:hover { border-color: var(--fs-edge); }
.flag-sev input:checked + .flag-sev__opt {
  border-color: var(--fs-color);
  background: var(--fs-glow);
  color: var(--fs-color);
}
.flag-sev input:focus-visible + .flag-sev__opt { outline: 2px solid var(--fs-color); outline-offset: 2px; }

@media (max-width: 420px) {
  .flag-sev { grid-template-columns: 1fr; }
  .flag-sev__opt { justify-content: flex-start; padding-left: 12px; }
}

/* ── WIR ka khaana abhi job se taaza hua hai ───────────────────────
 *
 * Chup-chaap value badal dena apni jagah dhoka hai — aadmi ko dikhna
 * chahiye ke KYA badla. Do-teen second ka ishara, phir khamoshi.
 */
.wir-live-changed {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-20);
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
@media (prefers-reduced-motion: reduce) {
  .wir-live-changed { transition: none; }
}

.card--flagged {
  border-left: 3px solid var(--danger) !important;
  background: var(--danger-glow) !important;
}
.tr--flagged {
  background: var(--danger-glow);
}
.btn-icon--flag {
  color: var(--text-muted);
}
.btn-icon--flag:hover {
  color: var(--danger);
  background: var(--danger-glow);
  border-color: var(--danger-33);
}
.btn-icon--flag.is-flagged {
  background: var(--danger-glow);
  border-color: var(--danger-33);
  color: var(--danger);
}
.btn-icon--flag.is-flagged svg {
  fill: currentColor;
}
.btn-icon--flag.is-flagged:hover {
  background: var(--danger-20);
  border-color: var(--danger);
}

.btn-icon--view {
  color: var(--cyan);
}
.btn-icon--view:hover {
  background: var(--cyan-glow);
  border-color: var(--cyan-33);
}
.btn-icon--success {
  background: var(--accent-glow, rgba(16,185,129,0.1));
  border-color: var(--accent-33, rgba(16,185,129,0.33));
  color: var(--accent);
}
.btn-icon--success:hover {
  background: var(--accent-20, rgba(16,185,129,0.2));
  border-color: var(--accent);
}
.btn-icon--danger {
  background: var(--danger-glow, rgba(239,68,68,0.1));
  border-color: var(--danger-33, rgba(239,68,68,0.33));
  color: var(--danger);
}
.btn-icon--danger:hover {
  background: var(--danger-20, rgba(239,68,68,0.2));
  border-color: var(--danger);
}

/* ═══════════════════════════════════════════════════════════════
   EMAIL KA DARJA — TEEN RANG
   ═══════════════════════════════════════════════════════════════

   laal   — email draft hi nahi hua
   peela  — draft ho gaya, jawab ka intezaar
   hara   — SR No aa gaya, kaam poora

   Ye rang do jagah lagte hain aur dono ki shakl alag hai:

     fehrist me   `.btn-icon` (sirf icon)
     detail par   `.btn` (icon + likha hua)

   Pehle sirf `.btn-icon` wale likhe the, isliye detail page ka button
   bilkul saada rehta tha — ek hi baat do jagah do tarah dikhti thi, aur jo
   aadmi detail page par kaam karta hai use kuch pata hi nahi chalta tha.

   Rang wahi hain jo detail page ke upar wale alert me hain (danger →
   warning → accent), taake dono ek hi baat kahen.
   ═══════════════════════════════════════════════════════════════ */
.btn-icon.email-not-drafted {
  background: var(--danger-glow);
  border-color: var(--danger-33);
  color: var(--danger);
}
.btn-icon.email-not-drafted:hover {
  background: var(--danger-20);
  border-color: var(--danger);
}
.btn-icon.email-drafted {
  background: var(--warning-glow, rgba(245,158,11,0.08));
  border-color: var(--warning-33, rgba(245,158,11,0.33));
  color: var(--warning);
}
.btn-icon.email-drafted:hover {
  background: var(--warning-20, rgba(245,158,11,0.2));
  border-color: var(--warning);
}
.btn-icon.email-sr-filled {
  background: var(--accent-glow);
  border-color: var(--accent-33);
  color: var(--accent);
}
.btn-icon.email-sr-filled:hover {
  background: var(--accent-20);
  border-color: var(--accent);
}


/* Wahi teen rang, par `.btn` wali shakl par (detail page ka button). */
.btn.email-not-drafted {
  background: var(--danger-glow);
  border-color: var(--danger-33);
  color: var(--danger);
}
.btn.email-not-drafted:hover {
  background: var(--danger-20);
  border-color: var(--danger);
  color: var(--danger);
}
.btn.email-drafted {
  background: var(--warning-glow, rgba(245,158,11,0.08));
  border-color: var(--warning-33, rgba(245,158,11,0.33));
  color: var(--warning);
}
.btn.email-drafted:hover {
  background: var(--warning-20, rgba(245,158,11,0.2));
  border-color: var(--warning);
  color: var(--warning);
}
.btn.email-sr-filled {
  background: var(--accent-glow);
  border-color: var(--accent-33);
  color: var(--accent);
}
.btn.email-sr-filled:hover {
  background: var(--accent-20);
  border-color: var(--accent);
  color: var(--accent);
}
/* ═══════════════════════════════════════════════════════════════
   SEARCH BOX
   ═══════════════════════════════════════════════════════════════ */
.search-box {
  position: relative;
  width: 100%;
}

.search-box svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--text-dim);
  pointer-events: none;
}

.search-box input {
  width: 100%;
  padding: 10px 14px 10px 38px;
  border-radius: var(--radius-md);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 13px;
  outline: none;
  transition: all 0.2s ease;
}

.search-box input:focus {
  border-color: var(--primary);
}
.search-box input::placeholder {
  color: var(--text-dim);
}

/* ═══════════════════════════════════════════════════════════════
   TABLES — Fully responsive with horizontal scroll
   ═══════════════════════════════════════════════════════════════ */
.table-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--card);
  width: 100%;
}

.table {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px;
}

.table th {
  padding: clamp(8px, 1vw + 2px, 14px) clamp(10px, 1.2vw + 4px, 16px);
  text-align: left;
  font-size: 11.5px !important;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  position: sticky;
  top: 0;
}

.table th.text-center {
  text-align: center;
}
.table th.text-right {
  text-align: right;
}

.table td {
  padding: clamp(8px, 1vw + 2px, 14px) clamp(10px, 1.2vw + 4px, 16px);
  text-align: left;
  font-size: 10.5px !important;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

/* Force ALL child elements inside table cells to use the same font size */
.table td * {
  font-size: 10.5px !important;
}

/* Force ALL child elements inside table headers to use the same font size */
.table th * {
  font-size: 11.5px !important;
}

.table td.text-center {
  text-align: center;
}
.table td.text-right {
  text-align: right;
}

.table tbody tr {
  transition: background 0.2s;
}

.table tbody tr:hover {
  background: var(--surface-alt);
}

.table tbody tr:last-child td {
  border-bottom: none;
}

.table tbody tr.selected {
  background: var(--primary-glow) !important;
}

.cell-mono {
  font-family: var(--font-mono);
}
.cell-primary {
  color: var(--primary);
}
.cell-cyan {
  color: var(--cyan);
}
.cell-accent {
  color: var(--accent);
}
.cell-warning {
  color: var(--warning);
}
.cell-muted {
  color: var(--text-muted);
}
.cell-dim {
  color: var(--text-dim);
}
.cell-bold {
  font-weight: 600;
}
.cell-value {
  font-weight: 700;
  color: var(--accent);
}

/* ═══════════════════════════════════════════════════════════════
   PROGRESS BAR
   ═══════════════════════════════════════════════════════════════ */
.progress-bar {
  height: 6px;
  border-radius: 4px;
  background: var(--border);
  overflow: hidden;
  width: 100%;
}

.progress-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.8s ease;
}

.progress-bar-fill.color-primary {
  background: linear-gradient(90deg, var(--primary), rgba(59, 130, 246, 0.7));
}
.progress-bar-fill.color-accent {
  background: linear-gradient(90deg, var(--accent), rgba(6, 214, 160, 0.7));
}
.progress-bar-fill.color-danger {
  background: linear-gradient(90deg, var(--danger), rgba(239, 68, 68, 0.7));
}
.progress-bar-fill.color-warning {
  background: linear-gradient(90deg, var(--warning), rgba(245, 158, 11, 0.7));
}
.progress-bar-fill.color-purple {
  background: linear-gradient(90deg, var(--purple), rgba(139, 92, 246, 0.7));
}

/* ═══════════════════════════════════════════════════════════════
   CHART CONTAINERS
   ═══════════════════════════════════════════════════════════════ */
.chart-card {
  background: var(--card);
  border-radius: var(--radius-xl);
  padding: 24px;
  border: 1px solid var(--border);
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  gap: 12px;
  flex-wrap: wrap;
}

.chart-period-btns {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.chart-period-btn {
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  transition: all 0.2s;
}

.chart-period-btn.active {
  background: var(--primary-glow);
  color: var(--primary);
  border-color: var(--primary-33);
}

.chart-period-btn:hover:not(.active) {
  background: var(--surface-alt);
}

.chart-value-large {
  font-size: 24px;
  font-weight: 700;
  font-family: var(--font-display);
}

.chart-trend {
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 2px;
}

.chart-trend.up {
  color: var(--accent);
}
.chart-trend.down {
  color: var(--danger);
}
.chart-trend svg {
  width: 14px;
  height: 14px;
}

.chart-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.chart-footer span {
  font-size: 11px;
  color: var(--text-dim);
}

/* ═══════════════════════════════════════════════════════════════
   DONUT CHART
   ═══════════════════════════════════════════════════════════════ */
.donut-wrap {
  position: relative;
  width: 160px;
  height: 160px;
  margin: 0 auto 20px;
}

.donut-wrap svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.donut-wrap circle {
  transition: all 0.8s ease;
}
.donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.donut-center-value {
  font-size: 22px;
  font-weight: 700;
  font-family: var(--font-display);
}
.donut-center-label {
  font-size: 10px;
  color: var(--text-muted);
}
.donut-legend-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 0;
}
.donut-legend-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.donut-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
}
.donut-legend-label {
  font-size: 12px;
  color: var(--text-muted);
}
.donut-legend-count {
  font-size: 12px;
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════
   STATS STRIP
   ═══════════════════════════════════════════════════════════════ */
.stats-strip-item {
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
}

.stats-strip-item.border-primary {
  border-left-color: var(--primary);
}
.stats-strip-item.border-cyan {
  border-left-color: var(--cyan);
}
.stats-strip-item.border-warning {
  border-left-color: var(--warning);
}
.stats-strip-item.border-accent {
  border-left-color: var(--accent);
}
.stats-strip-item.border-danger {
  border-left-color: var(--danger);
}

.stats-strip-value {
  font-size: 20px;
  font-weight: 700;
  font-family: var(--font-display);
}

.stats-strip-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   LIFECYCLE FLOW
   ═══════════════════════════════════════════════════════════════ */
/*
 * ── PIPELINE KE CHIPS ──
 *
 * Pehle ye ek hi lakeer me chalti thi aur `overflow-x: auto` laga tha.
 * 12 chips kisi aam screen par samate hi nahi, to aakhri chaar — Sold,
 * Transferred, Returned, Faulty — parde ke peechhe chale jate the. Neeche
 * ek patli scrollbar ke siwa koi ishara nahi tha ke aur bhi kuch hai.
 *
 * Content ka chhup jana sab se bura dard hai: jo nazar hi na aaye, wo
 * maujood hone ke baawajood na-maujood hai.
 *
 * Ab wo lapet jate hain. Do lakeerein us lambi lakeer se behtar hain
 * jiska aadha hissa dikhta hi na ho.
 */
.lifecycle-flow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 4px;
  row-gap: 8px;
  padding: 16px 20px;
  background: var(--card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}

/*
 * Aakhri chip ka teer kahin nahi jata.
 *
 * View har chip ke baad teer lagati hai: us ki shart `$key !== 'replaced'`
 * hai, aur `replaced` fehrist me hai hi nahi — yaani shart kabhi rukti
 * nahi. CSS se hatana markup badalne se mehfooz hai: wahi shart doosri
 * jagah bhi likhi hai.
 */
.lifecycle-step:last-child .lifecycle-arrow {
  display: none;
}

.lifecycle-step {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.lifecycle-step-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: var(--radius-md);
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--border);
  background: var(--surface-alt);
  color: var(--text-muted);
  white-space: nowrap;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.lifecycle-step-label:hover {
  color: var(--text);
  border-color: var(--border-light);
  background: var(--card-hover);
}

/*
 * ── STAGE KA NUQTA ──
 *
 * Yahi wo ek cheez hai jo chart aur chips ko jodti hai: upar bar hari hai
 * aur neeche chip ka nuqta bhi hara — dono "Installed". Pehle dono ka rang
 * alag nizaam se aata tha, is liye aankh ko har baar naye sire se jodna
 * padta tha.
 *
 * Rang `--stage-*` se aata hai (view inline var deti hai). Jis chip ka koi
 * stage nahi, uska nuqta `--text-dim` reh jata hai.
 */
.lifecycle-dot {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  background: var(--stage, var(--text-dim));
  flex-shrink: 0;
}

.lifecycle-step-label.active {
  background: var(--card);
  color: var(--text);
  border-color: var(--stage, var(--primary));
  box-shadow: 0 0 0 1px var(--stage, var(--primary)) inset;
}

/*
 * Khali stage par nuqta khokhla — bhara hua nuqta "yahan kuch hai" kehta
 * hai, aur ye jhoot nahi bolna chahiye.
 */
.lifecycle-step-label.is-empty .lifecycle-dot {
  background: transparent;
  box-shadow: 0 0 0 1px var(--border-light) inset;
}

/*
 * ── STAGE KI GINTI ──
 *
 * Ginti chip par likhi jati hai taake dabane se PEHLE pata chale ke us
 * stage me kuch hai bhi ya nahi.
 *
 * Bina iske khali stage aur toota hua filter bilkul ek jaise dikhte hain:
 * dono par khali table. Aur ek soorat me filter waqai toota hua tha
 * (`service` chip aisi haalat poochta tha jo DB me hai hi nahi) — wo isi
 * khamoshi me mahino chhupa raha.
 */
.lifecycle-step-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  margin-left: 6px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--border);
  color: var(--text-muted);
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/*
 * Active chip ki ginti bhi usi stage ke rang par.
 *
 * Pehle ye hamesha `--primary` (neela) thi, chahe chip ka halqa narangi ho
 * ya hara — ek hi chip par do alag rang, aur wo bemel nazar aata tha.
 */
.lifecycle-step-label.active .lifecycle-step-count {
  background: var(--stage, var(--primary));
  color: #fff;
}

/*
 * Khali stage dhundhli — par CHHUPI nahi.
 *
 * Use hata dena ghalat hota: pipeline ka poora silsila nazar aana chahiye,
 * warna ye samajh hi nahi aata ke unit kin-kin halaton se guzarti hai.
 * Sirf rang se faisla bhi nahi hota — ginti `0` saath likhi hoti hai.
 */
.lifecycle-step-label.is-empty {
  opacity: 0.55;
}

.lifecycle-step-label.is-empty .lifecycle-step-count {
  background: transparent;
  border: 1px solid var(--border);
}

/*
 * Chart header ka stage pill token ke hisaab se.
 * Color-mix se background aur border bante hain — bina kisi hardcoded hex ke.
 */
.chart-stage-pill {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  background: color-mix(in srgb, var(--stage) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--stage) 35%, transparent);
  color: var(--stage);
}

.lifecycle-arrow svg {
  width: 14px;
  height: 14px;
  color: var(--text-dim);
}

/* ═══════════════════════════════════════════════════════════════
   TECHNICIAN CARDS
   ═══════════════════════════════════════════════════════════════ */
.tech-card {
  background: var(--card);
  border-radius: var(--radius-xl);
  padding: 24px;
  border: 1px solid var(--border);
  transition: all 0.3s ease;
}

.tech-card:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
}
.tech-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.tech-avatar {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  flex-shrink: 0;
}

.tech-avatar.color-primary {
  background: var(--primary-20);
  color: var(--primary);
}
.tech-avatar.color-accent {
  background: var(--accent-20);
  color: var(--accent);
}
.tech-avatar.color-purple {
  background: var(--purple-20);
  color: var(--purple);
}
.tech-avatar.color-cyan {
  background: var(--cyan-20);
  color: var(--cyan);
}
.tech-avatar.color-warning {
  background: var(--warning-20);
  color: var(--warning);
}

.tech-name {
  font-size: 15px;
  font-weight: 700;
}
.tech-phone {
  font-size: 12px;
  color: var(--text-muted);
}
.tech-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.skill-tag {
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  background: var(--surface-alt);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.tech-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  text-align: center;
}

.tech-stat-value {
  font-size: 18px;
  font-weight: 700;
  font-family: var(--font-display);
}
.tech-stat-value.color-primary {
  color: var(--primary);
}
.tech-stat-value.color-warning {
  color: var(--warning);
}
.tech-stat-label {
  font-size: 10px;
  color: var(--text-dim);
  margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   WARRANTY DECISION ENGINE
   ═══════════════════════════════════════════════════════════════ */
.decision-engine {
  background: linear-gradient(135deg, var(--card), var(--surface-alt));
  border-radius: var(--radius-xl);
  padding: 24px;
  border: 1px solid var(--border);
}

.decision-engine-title {
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.decision-engine-title svg {
  width: 16px;
  height: 16px;
  color: var(--warning);
}

.decision-rule {
  padding: 16px;
  border-radius: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
}

.decision-rule-name {
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 6px;
}
.decision-rule-name.color-accent {
  color: var(--accent);
}
.decision-rule-name.color-primary {
  color: var(--primary);
}
.decision-rule-name.color-purple {
  color: var(--purple);
}
.decision-rule-code {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  margin-bottom: 8px;
  word-break: break-all;
}
.decision-rule-result {
  font-size: 12px;
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════
   ALERTS
   ═══════════════════════════════════════════════════════════════ */
.alert {
  padding: 16px;
  border-radius: 12px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.alert--danger {
  background: var(--danger-glow);
  border: 1px solid var(--danger-33);
}
.alert--warning {
  background: var(--warning-glow);
  border: 1px solid var(--warning-33);
}
.alert svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}
.alert--danger svg {
  color: var(--danger);
}
.alert--warning svg {
  color: var(--warning);
}
.alert-title {
  font-size: 13px;
  font-weight: 600;
}
.alert--danger .alert-title {
  color: var(--danger);
}
.alert--warning .alert-title {
  color: var(--warning);
}
.alert-desc {
  font-size: 12px;
  color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════════
   AMC CONTRACT CARDS
   ═══════════════════════════════════════════════════════════════ */
.amc-card {
  background: var(--card);
  border-radius: var(--radius-xl);
  padding: 24px;
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

.amc-card-glow {
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 100px;
  border-radius: 0 0 0 100%;
  opacity: 0.5;
}
.amc-card-glow.glow-active {
  background: var(--accent-glow);
}
.amc-card-glow.glow-expired {
  background: var(--danger-glow);
}
.amc-card-id {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--primary);
  margin-bottom: 4px;
}
.amc-card-customer {
  font-size: 16px;
  font-weight: 700;
}

.amc-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 16px 0;
}

.amc-card-detail-label {
  font-size: 11px;
  color: var(--text-dim);
}
.amc-card-detail-value {
  font-size: 12px;
  font-weight: 600;
  margin-top: 2px;
}
.amc-card-detail-value.accent {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
}
.amc-progress-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}
.amc-progress-label {
  font-size: 11px;
  color: var(--text-muted);
}
.amc-progress-pct {
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
}
.amc-units-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 12px;
}
.amc-units-info svg {
  width: 14px;
  height: 14px;
}

/* ═══════════════════════════════════════════════════════════════
   REPORT CARDS
   ═══════════════════════════════════════════════════════════════ */
.report-card {
  background: var(--card);
  border-radius: var(--radius-xl);
  padding: 24px;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all 0.3s;
}

.report-card:hover {
  transform: translateY(-2px);
}
.report-card:hover.hover-accent {
  border-color: var(--accent);
}
.report-card:hover.hover-primary {
  border-color: var(--primary);
}
.report-card:hover.hover-purple {
  border-color: var(--purple);
}
.report-card:hover.hover-warning {
  border-color: var(--warning);
}
.report-card:hover.hover-cyan {
  border-color: var(--cyan);
}
.report-card:hover.hover-danger {
  border-color: var(--danger);
}

.report-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.report-card-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.report-card-icon svg {
  width: 20px;
  height: 20px;
}
.report-card-title {
  font-size: 14px;
  font-weight: 700;
}
.report-card-desc {
  font-size: 11px;
  color: var(--text-muted);
}
.report-export-tags {
  display: flex;
  gap: 6px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.export-tag {
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
  background: var(--surface-alt);
  color: var(--text-dim);
  border: 1px solid var(--border);
}

/* ═══════════════════════════════════════════════════════════════
   SETTINGS ITEMS
   ═══════════════════════════════════════════════════════════════ */
.settings-item {
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: 20px;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 16px;
}

.settings-item:hover {
  border-color: var(--primary);
}
.settings-item-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  flex-shrink: 0;
  background: var(--primary-glow);
  border: 1px solid var(--primary-33);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
}
.settings-item-icon svg {
  width: 20px;
  height: 20px;
}
.settings-item-title {
  font-size: 14px;
  font-weight: 700;
}
.settings-item-desc {
  font-size: 12px;
  color: var(--text-muted);
}
.settings-item-arrow {
  margin-left: auto;
  color: var(--text-dim);
  flex-shrink: 0;
}
.settings-item-arrow svg {
  width: 16px;
  height: 16px;
}

/* ═══════════════════════════════════════════════════════════════
   PRICING CARDS
   ═══════════════════════════════════════════════════════════════ */
.pricing-card {
  background: var(--card);
  border-radius: var(--radius-2xl);
  padding: 32px;
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

.pricing-card--popular {
  box-shadow: 0 0 40px rgba(59, 130, 246, 0.1);
}
.pricing-card--popular.border-primary {
  border-color: var(--primary);
}
.pricing-card--popular.border-purple {
  border-color: var(--purple);
}
.pricing-popular-tag {
  position: absolute;
  top: 16px;
  right: -28px;
  padding: 4px 36px;
  font-size: 10px;
  font-weight: 700;
  transform: rotate(45deg);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #fff;
}
.pricing-popular-tag.bg-primary {
  background: var(--primary);
}
.pricing-plan-name {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 4px;
}
.pricing-plan-name.color-cyan {
  color: var(--cyan);
}
.pricing-plan-name.color-primary {
  color: var(--primary);
}
.pricing-plan-name.color-purple {
  color: var(--purple);
}
.pricing-price {
  font-size: 32px;
  font-weight: 800;
  font-family: var(--font-display);
  margin-bottom: 2px;
}
.pricing-price span {
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 400;
}
.pricing-yearly {
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 20px;
}
.pricing-limits {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 16px;
  display: grid;
  gap: 6px;
}
.pricing-limits strong {
  font-weight: 600;
  color: var(--text);
}
.pricing-features {
  border-top: 1px solid var(--border);
  padding-top: 16px;
}
.pricing-feature {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 12px;
  color: var(--text-muted);
}
.pricing-feature svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   LIST ITEMS
   ═══════════════════════════════════════════════════════════════ */
.list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  gap: 12px;
}
.list-item:last-child {
  border-bottom: none;
}
.list-item-title {
  font-size: 13px;
  font-weight: 600;
}
.list-item-sub {
  font-size: 12px;
  color: var(--text-muted);
}
.list-item-value {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 4px;
}

.tech-list-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.tech-list-item:last-child {
  border-bottom: none;
}
.tech-list-avatar {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--primary-20), var(--cyan-20));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
  flex-shrink: 0;
}
.tech-list-name {
  font-size: 13px;
  font-weight: 600;
}
.tech-list-meta {
  font-size: 12px;
  color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════════
   MODAL
   ═══════════════════════════════════════════════════════════════ */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  padding: 20px;
  /*
   * Modal ke andar scroll khatam ho jaye to wo peechhe wale page par
   * chala jata tha — aadmi email ka body scroll karta aur uske peechhe
   * poori fehrist khisak jati. Wapas aakar wo jagah dhoondhni padti.
   */
  overscroll-behavior: contain;
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.modal {
  width: 100%;
  max-width: 560px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border-radius: 20px;
  border: 1px solid var(--border);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
  animation: scaleIn 0.25s ease both;
  overflow: hidden;
}

/*
 * ══ FOOTER KAT KYUN JATA THA ══
 *
 * `.modal` ek flex column hai jiski oonchai `88vh` par bandhi hai, aur
 * `overflow: hidden` uske bahar ka sab kaat deta hai.
 *
 * Flexbox me har item ka `min-height` shuru me `auto` hota hai — yaani
 * "apne content se chhota mat hona". Isliye beech wala hissa (jisme
 * form hai) sikudta hi nahi tha: uska content jitna bada, wo utna bada.
 * Teenon milkar 88vh se bade ho jate, aur jo aakhir me tha — footer,
 * yaani saare button — wo kat kar bahar reh jata.
 *
 * Chhoti screen par ye har baar hota tha: aadmi email likh leta aur
 * "Send" wala button kahin dikhta hi nahi.
 *
 * `min-height: 0` us shart ko hata deta hai. Header aur footer par iska
 * koi asar nahi — un dono par pehle se `flex-shrink: 0` hai.
 */
.modal > * {
  min-height: 0;
}

/*
 * ── MODAL KA BEECH WALA HISSA: SCROLL YAHIN HONA CHAHIYE ──
 *
 * `min-height: 0` upar wale rule me isliye hai ke beech ka hissa SIKUD sake.
 * Par sirf sikudna kaafi nahi: sikudne ke baad uska matn kahin to jana hai,
 * aur `overflow` na ho to wo DABBE SE BAHAR nikal kar neeche wali cheezon par
 * chadh jata hai.
 *
 * Ye asal me hua: email draft modal me lamba body matn checkbox ki patti par
 * chhap raha tha — dono ek doosre ke upar likhe hue dikhte the.
 *
 * Wajah ye thi ke is app me `.modal-body` naam ki koi class hai hi nahi. Har
 * modal apna beech ka hissa ek khali `<div>` se banata hai, aur us par na
 * `flex` hota hai na `overflow`.
 *
 * `overscroll-behavior` isliye ke andar scroll khatam hone par peeche ka page
 * khisakna shuru na kar de.
 */
.modal-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/*
 * Footer se theek pehle wali patti — chhota sa option jo button ke saath
 * padha jata hai (jaise "PDF saath bhejein").
 *
 * `flex-shrink: 0` zaroori hai: iske bina jagah kam padne par ye sabse pehle
 * dab jati hai, aur wo option gayab ho jata hai jo user ne abhi chunna hai.
 */
.modal-actions-note {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 28px 0;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 24px 28px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.modal-title {
  font-size: 18px;
  font-weight: 700;
  font-family: var(--font-display);
}
.modal-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  transition: color 0.2s;
  padding: 4px;
  margin: -4px -4px 0 0;
}
.modal-close:hover {
  color: var(--text);
}
.modal-close svg {
  width: 20px;
  height: 20px;
}

.modal form,
.modal > form {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
}

.modal-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
}

.modal-form-full {
  grid-column: 1 / -1;
}

.modal-footer {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding: 16px 28px;
  border-top: 1px solid var(--border);
  background: var(--card);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.form-section-divider {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 4px 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
}

.form-section-divider .section-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   FILTER BAR
   ═══════════════════════════════════════════════════════════════ */
.filter-bar {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.filter-bar .search-box {
  flex: 1;
  min-width: 200px;
}

/* ═══════════════════════════════════════════════════════════════
   MINI SVG CHART
   ═══════════════════════════════════════════════════════════════ */
.mini-chart svg {
  display: block;
  width: 100%;
}

/* ═══════════════════════════════════════════════════════════════
   CONFIRM DIALOG
   ═══════════════════════════════════════════════════════════════ */
.confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  padding: 16px;
}
.confirm-overlay.active {
  display: flex;
}
.confirm-box {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px;
  max-width: 400px;
  width: 100%;
  text-align: center;
  animation: scaleIn 0.2s ease;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
.confirm-icon {
  font-size: 40px;
  margin-bottom: 12px;
}
.confirm-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 6px;
}
.confirm-msg {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 20px;
}
.confirm-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════════
   TOAST
   ═══════════════════════════════════════════════════════════════ */
.toast-container {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 320px;
  pointer-events: none;
}
.toast {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 32px 10px 12px;
  border-radius: 8px;
  font-size: 12px;
  overflow: hidden;
  pointer-events: auto;
  opacity: 0;
  transform: translateX(100%);
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  border: 1px solid transparent;
}
.toast--in {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.3s cubic-bezier(0.4,0,0.2,1), transform 0.3s cubic-bezier(0.4,0,0.2,1);
}
.toast--out {
  opacity: 0;
  transform: translateX(100%);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.toast-icon { width: 16px; height: 16px; flex-shrink: 0; }
.toast-icon svg { width: 16px; height: 16px; }
.toast-body { flex: 1; min-width: 0; }
.toast-title { display: none; }
.toast-msg {
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.35;
  word-break: break-word;
}
.toast-close {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 15px;
  cursor: pointer;
  opacity: 0.45;
  line-height: 1;
  padding: 0;
  transition: opacity 0.15s;
}
.toast-close:hover { opacity: 1; }
.toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  overflow: hidden;
}
.toast-progress-bar {
  height: 100%;
  width: 100%;
  transform-origin: left;
  animation: toastShrink linear forwards;
}
@keyframes toastShrink { from { transform: scaleX(1); } to { transform: scaleX(0); } }

.toast--success { background: #0d3326; border-color: rgba(6,214,160,0.25); color: #c8f5e3; }
.toast--success .toast-icon, .toast--success .toast-close { color: #06d6a0; }
.toast-progress--success { background: #06d6a0; }

.toast--error { background: #3b1219; border-color: rgba(239,68,68,0.3); color: #fdd; }
.toast--error .toast-icon, .toast--error .toast-close { color: #ef4444; }
.toast-progress--error { background: #ef4444; }

.toast--warning { background: #3b2e10; border-color: rgba(245,158,11,0.3); color: #fef3c7; }
.toast--warning .toast-icon, .toast--warning .toast-close { color: #f59e0b; }
.toast-progress--warning { background: #f59e0b; }

.toast--info { background: #0c2340; border-color: rgba(59,130,246,0.3); color: #dbeafe; }
.toast--info .toast-icon, .toast--info .toast-close { color: #3b82f6; }
.toast-progress--info { background: #3b82f6; }

/* ═══════════════════════════════════════════════════════════════
   MISC UTILITY
   ═══════════════════════════════════════════════════════════════ */
.action-group {
  display: flex;
  gap: 4px;
  justify-content: center;
  flex-wrap: nowrap;
}
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-dim);
}
.empty-state-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}
.empty-state-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.empty-state-msg {
  font-size: 13px;
  margin-bottom: 20px;
}

.tabs {
  display: flex;
  gap: 2px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.tab-btn {
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  background: none;
  border: none;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
  font-family: var(--font-body);
  white-space: nowrap;
  flex-shrink: 0;
}
.tab-btn.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}
.tab-btn:hover:not(.active) {
  color: var(--text);
}

.toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}
.toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--border);
  border-radius: 24px;
  cursor: pointer;
  transition: 0.3s;
}
.toggle-slider:before {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background: white;
  border-radius: 50%;
  transition: 0.3s;
}
.toggle input:checked + .toggle-slider {
  background: var(--primary);
}
.toggle input:checked + .toggle-slider:before {
  transform: translateX(20px);
}

.copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--text-dim);
  transition: all 0.15s;
  vertical-align: middle;
  margin-left: 2px;
  padding: 0;
  flex-shrink: 0;
}
.copy-btn:hover {
  background: var(--primary-glow);
  color: var(--primary);
}
.copy-btn svg {
  width: 13px;
  height: 13px;
}
.copyable {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.opacity-hover {
  opacity: 0.7;
  transition: opacity 0.2s;
}
.opacity-hover:hover {
  opacity: 1;
}
.grid-7 {
  display: grid;
  gap: 8px;
}

.origin-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.origin-tag i,
.origin-tag svg {
  width: 11px;
  height: 11px;
}
.origin-tag--internal {
  background: rgba(34, 211, 238, 0.12);
  color: var(--cyan);
  border: 1px solid rgba(34, 211, 238, 0.25);
}
.origin-tag--external {
  background: rgba(139, 92, 246, 0.12);
  color: #8b5cf6;
  border: 1px solid rgba(139, 92, 246, 0.25);
}

.ac-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  max-height: 220px;
  overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
.ac-item {
  padding: 10px 14px;
  cursor: pointer;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}
.ac-item:hover {
  background: var(--bg);
}
/* Up/Down se chalte waqt kaunsa item chuna jayega — Enter isi ko uthata hai. */
.ac-item.is-active {
  background: var(--primary-glow, var(--bg));
  box-shadow: inset 2px 0 0 var(--primary);
}
.ac-item:last-child {
  border-bottom: none;
}
.ac-item strong {
  color: var(--primary);
}
.ac-item small {
  display: block;
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 2px;
}

#filter-panel {
  overflow: hidden;
  transition:
    max-height 0.3s ease-out,
    padding 0.3s;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
#filter-panel.is-open {
  max-height: 500px;
  padding: 16px;
}

.bulk-mode .col-select {
  display: table-cell !important;
}
.col-select {
  display: none;
}
.photo-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hidden {
  display: none !important;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Theme Toggle */
.theme-toggle {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-muted);
  transition: all 0.2s;
  flex-shrink: 0;
}
.theme-toggle:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.theme-toggle svg {
  width: 16px;
  height: 16px;
}
[data-theme="light"] .theme-icon-sun {
  display: none;
}
[data-theme="dark"] .theme-icon-moon,
:root:not([data-theme="light"]) .theme-icon-moon {
  display: none;
}
[data-theme="light"] .theme-icon-moon {
  display: block;
}

/* ═══════════════════════════════════════════════════════════════
   LIGHT MODE THEME
   ═══════════════════════════════════════════════════════════════ */
[data-theme="light"] {
  /*
   * Stage ke rang yahan dobara likhne ki zaroorat nahi.
   *
   * Wo `--cyan`, `--accent`, `--warning` waghaira par khade hain, aur ye
   * token neeche isi block me theme ke hisaab se badal jate hain — yaani
   * chart khud ba khud light theme ka rang le leta hai. Jo rang likhe hue
   * hain (pink/orange/indigo) wo badge me bhi dono theme me ek hi hain.
   */
  --bg: #f1f5f9;
  --surface: #ffffff;
  --surface-alt: #f8fafc;
  --card: #ffffff;
  --card-hover: #f1f5f9;
  --border: #e2e8f0;
  --border-light: #cbd5e1;
  --text: #0f172a;
  --text-muted: #475569;
  --text-dim: #94a3b8;
  --primary: #2563eb;
  --primary-glow: rgba(37, 99, 235, 0.1);
  --primary-20: rgba(37, 99, 235, 0.15);
  --primary-33: rgba(37, 99, 235, 0.25);
  --accent: #059669;
  --accent-glow: rgba(5, 150, 105, 0.08);
  --accent-20: rgba(5, 150, 105, 0.12);
  --accent-33: rgba(5, 150, 105, 0.2);
  --warning: #d97706;
  --warning-glow: rgba(217, 119, 6, 0.08);
  --warning-20: rgba(217, 119, 6, 0.12);
  --warning-33: rgba(217, 119, 6, 0.2);
  --danger: #dc2626;
  --danger-glow: rgba(220, 38, 38, 0.08);
  --danger-20: rgba(220, 38, 38, 0.12);
  --danger-33: rgba(220, 38, 38, 0.2);
  --purple: #7c3aed;
  --purple-glow: rgba(124, 58, 237, 0.08);
  --purple-20: rgba(124, 58, 237, 0.12);
  --purple-33: rgba(124, 58, 237, 0.2);
  --cyan: #0891b2;
  --cyan-glow: rgba(8, 145, 178, 0.08);
  --cyan-20: rgba(8, 145, 178, 0.12);
  --cyan-33: rgba(8, 145, 178, 0.2);
}

[data-theme="light"] .sidebar {
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .topbar {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}
[data-theme="light"] .stat-card {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .card,
[data-theme="light"] .tech-card,
[data-theme="light"] .amc-card,
[data-theme="light"] .report-card,
[data-theme="light"] .pricing-card {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .table-container {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .modal {
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
}
[data-theme="light"] .login-card {
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
}
[data-theme="light"] ::-webkit-scrollbar-track {
  background: var(--bg);
}
[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: #cbd5e1;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE DESIGN — Single consolidated block
   (No duplicate breakpoints — each breakpoint appears ONCE)
   ═══════════════════════════════════════════════════════════════ */

/* ─── Large screens (1400px+) ─── */
@media (min-width: 1400px) {
  .page-wrapper {
    padding: 36px;
  }
  .grid-5 {
    grid-template-columns: repeat(5, 1fr);
  }
  .grid-6 {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* ─── Laptop (max 1200px) ─── */
@media (max-width: 1200px) {
  .grid-2-1 {
    grid-template-columns: 1fr;
  }
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-5 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-6 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ─── Tablet (max 1024px) — auto-collapse sidebar ─── */
@media (max-width: 1024px) {
  .sidebar {
    width: var(--sidebar-collapsed);
  }
  .sidebar .sidebar-brand-text,
  .sidebar .nav-label {
    display: none;
  }
  /* Yahan bhi sirf chaudai — wajah `html.sidebar-is-collapsed` par likhi hai. */
  .sidebar .sidebar-brand {
    justify-content: center;
    padding-left: 12px;
    padding-right: 12px;
  }
  .sidebar .sidebar-nav-item {
    justify-content: center;
    padding-left: 8px;
    padding-right: 8px;
  }
  .sidebar .sidebar-nav-item .nav-lock {
    display: none;
  }
  .sidebar .sidebar-nav-item .nav-count {
    position: absolute;
    top: 3px;
    right: 5px;
    margin-left: 0;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    font-size: 9px;
    border-radius: 999px;
    justify-content: center;
    pointer-events: none;
  }
  .sidebar .sidebar-nav-item {
    position: relative;
  }
  .sidebar-toggle-wrap {
    display: none;
  }
  .main-content,
  html.sidebar-is-collapsed .main-content {
    margin-left: var(--sidebar-collapsed);
    width: calc(100% - var(--sidebar-collapsed));
  }

  .page-wrapper {
    padding: 22px;
  }
  .topbar {
    padding: 0 18px;
  }
  .grid-5 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-6 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ─── Mobile (max 768px) — sidebar hidden, full width ─── */
@media (max-width: 768px) {
  /* Sidebar: off-screen slide-in */
  .sidebar {
    width: 280px !important;
    transform: translateX(-100%);
    z-index: 200;
    height: 100%;
    position: fixed;
  }
  .sidebar.mobile-open {
    transform: translateX(0);
  }
  html.sidebar-is-collapsed .sidebar {
    width: 280px !important;
  }
  .sidebar .sidebar-brand-text,
  .sidebar .nav-label {
    display: block !important;
  }
  /*
   * Mobile par sidebar poori chaudai me khulta hai — simatta nahi. Phir bhi
   * yahan sirf horizontal padding likha jata hai, aur ungli ke liye jo zyada
   * jagah chahiye wo `min-height` se aati hai. Wajah: qaida ek hi rahe —
   * row ki unchai sirf `min-height` tay karti hai, padding nahi.
   */
  .sidebar .sidebar-brand {
    justify-content: flex-start !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
    min-height: 72px;
  }
  .sidebar .sidebar-nav-item {
    justify-content: flex-start !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    min-height: 40px;
  }
  /*
   * Tablet block (`max-width: 1024px`) ginti ko icon ke kandhe par le jata
   * hai aur PRO pill chhupa deta hai — wahan theek hai, kyunki sidebar
   * icons-only hota hai. Mobile bhi usi daayre me aata hai, PAR yahan
   * sidebar poori chaudai me labels ke saath khulta hai. Isliye dono ko
   * wapas aam haalat me laana zaroori hai.
   */
  .sidebar .sidebar-nav-item .nav-count {
    position: static !important;
    margin-left: auto !important;
    min-width: 0;
    height: auto;
    padding: 3px 7px !important;
    font-size: 10px !important;
    pointer-events: auto;
  }
  .sidebar .sidebar-nav-item .nav-lock {
    display: inline-flex !important;
  }
  .sidebar-toggle-wrap {
    display: none !important;
  }

  /* Main: full width */
  .main-content,
  html.sidebar-is-collapsed .main-content {
    margin-left: 0 !important;
    width: 100% !important;
  }

  .page-wrapper {
    padding: 16px;
  }
  .page-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .page-header-actions {
    width: 100%;
  }
  .page-title {
    font-size: 18px;
  }

  /* Topbar */
  .topbar {
    padding: 0 12px;
    gap: 8px;
  }
  .topbar-title {
    font-size: 15px;
    flex: 1;
  }
  .topbar-username {
    display: none;
  }
  .topbar-user {
    padding: 6px;
  }

  /* Grids → single column */
  .grid-2,
  .grid-3,
  .grid-4,
  .grid-5,
  .grid-6,
  .grid-2-1,
  .grid-auto-320,
  .grid-auto-280,
  .grid-auto-300 {
    grid-template-columns: 1fr;
  }
  .grid-7 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Stat cards compact */
  .stat-card {
    padding: 16px 18px;
  }
  .stat-card-value {
    font-size: 22px;
  }
  .stat-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }
  .stat-card-icon svg {
    width: 17px;
    height: 17px;
  }

  .stats-strip-item {
    padding: 10px 12px;
  }
  .stats-strip-value {
    font-size: 16px;
  }

  /* Cards */
  .card {
    padding: 18px;
  }
  .chart-card {
    padding: 18px;
  }
  .chart-value-large {
    font-size: 20px;
  }
  .tech-card {
    padding: 18px;
  }
  .amc-card {
    padding: 18px;
  }
  .report-card {
    padding: 18px;
  }
  .pricing-card {
    padding: 20px;
  }
  .decision-engine {
    padding: 18px;
  }
  .settings-item {
    padding: 14px;
    gap: 12px;
  }
  .settings-item-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }

  /* Tables: horizontal scroll wrapper */
  .table-container {
    margin-left: -16px;
    margin-right: -16px;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
  .table th {
    padding: 10px 12px;
    font-size: 11.5px !important;
  }
  .table th * {
    font-size: 11.5px !important;
  }
  .table td {
    padding: 10px 12px;
    font-size: 10.5px !important;
  }
  .table td * {
    font-size: 10.5px !important;
  }

  /* Filter bar stacks */
  .filter-bar {
    flex-direction: column;
  }
  .filter-bar .search-box {
    min-width: 100%;
  }

  /* Modal: full width */
  .modal-overlay {
    padding: 10px;
  }
  .modal {
    max-width: 100% !important;
    max-height: 94vh;
    border-radius: 16px;
  }
  .modal-header {
    padding: 18px 20px 14px;
  }
  .modal form,
  .modal > form {
    padding: 18px 20px;
  }
  .modal-footer {
    padding: 14px 20px;
  }
  .modal-form-grid {
    grid-template-columns: 1fr;
  }
  .modal-title {
    font-size: 16px;
  }

  /* Form inputs: larger touch targets */
  .form-input {
    padding: 12px 14px;
    font-size: 14px;
  }
  .form-input-wrap .form-input {
    padding-left: 42px;
  }
  select.form-input {
    padding-right: 34px;
  }
  textarea.form-input {
    min-height: 80px;
  }

  /* Lifecycle flow */
  .lifecycle-flow {
    padding: 12px;
  }

  /* Tech stats */
  .tech-stats {
    gap: 8px;
  }
  .tech-stat-value {
    font-size: 16px;
  }

  /* Tabs scroll */
  .tabs {
    gap: 0;
  }
  .tab-btn {
    padding: 10px 14px;
    font-size: 12px;
  }

  /* Toast */
  .toast-container {
    right: 8px;
    left: 8px;
    top: 8px;
    max-width: 100%;
  }
  .toast {
    min-width: auto;
  }

  /* Donut smaller */
  .donut-wrap {
    width: 130px;
    height: 130px;
  }
  .donut-center-value {
    font-size: 18px;
  }

  /* Login card */
  .login-card {
    padding: 28px 24px;
    margin: 12px;
  }
  .login-title {
    font-size: 22px;
  }

  /* AMC grid stays 2-col on mobile — items are small enough */
  .amc-card-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Empty state */
  .empty-state {
    padding: 40px 16px;
  }
  .empty-state-icon {
    font-size: 36px;
  }
}

/* ─── Small phone (max 480px) ─── */
@media (max-width: 480px) {
  .page-wrapper {
    padding: 12px;
  }
  .topbar {
    height: 56px;
  }

  .grid-7 {
    grid-template-columns: 1fr;
  }

  .stat-card {
    padding: 14px;
  }
  .stat-card-value {
    font-size: 20px;
  }
  .stat-card-label {
    font-size: 11px;
  }
  .stat-card-icon {
    width: 32px;
    height: 32px;
  }

  .card {
    padding: 14px;
  }
  .chart-card {
    padding: 14px;
  }
  .pricing-card {
    padding: 16px;
  }
  .pricing-price {
    font-size: 26px;
  }

  .btn {
    padding: 8px 14px;
    font-size: 12px;
  }
  .btn--lg {
    padding: 10px 18px;
    font-size: 14px;
  }
  .btn-icon {
    width: 26px;
    height: 26px;
  }

  .login-card {
    padding: 24px 18px;
  }
  .login-title {
    font-size: 20px;
  }
  .login-logo {
    width: 52px;
    height: 52px;
    border-radius: 14px;
  }
  .login-logo svg {
    width: 26px;
    height: 26px;
  }

  .modal-overlay {
    padding: 6px;
  }
  .modal {
    border-radius: 12px;
  }
  .modal-header {
    padding: 14px 16px 12px;
  }
  .modal form,
  .modal > form {
    padding: 14px 16px;
  }
  .modal-footer {
    padding: 12px 16px;
  }
  .modal-title {
    font-size: 15px;
  }

  .confirm-box {
    padding: 20px;
  }
  .confirm-title {
    font-size: 15px;
  }
  .confirm-msg {
    font-size: 12px;
  }

  .table th,
  .table td {
    padding: 8px 10px;
    font-size: 11px;
  }
  .action-group {
    gap: 2px;
  }

  .chart-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .chart-period-btns {
    width: 100%;
  }
  .chart-period-btn {
    flex: 1;
    text-align: center;
  }
}

/* ═══════════════════════════════════════════════════════════════
   LIFECYCLE FLOW — Responsive Fix + Clickable Links
   APPEND this to the END of your style.css
   ═══════════════════════════════════════════════════════════════ */

/* Lifecycle Responsive Fix */
a.lifecycle-step-label {
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
}
a.lifecycle-step-label:hover {
  background: var(--primary-glow);
  color: var(--primary);
  border-color: var(--primary-33);
}

@media (max-width: 1024px) {
  .lifecycle-flow.mb-24 {
    padding: 12px;
    gap: 2px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .lifecycle-flow.mb-24::-webkit-scrollbar {
    display: none;
  }
  .lifecycle-flow.mb-24 .lifecycle-step-label {
    padding: 5px 10px;
    font-size: 10px;
    white-space: nowrap;
  }
  .lifecycle-flow.mb-24 .lifecycle-arrow svg {
    width: 12px;
    height: 12px;
  }
}

@media (max-width: 768px) {
  .lifecycle-flow.mb-24 {
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
    overflow-x: visible;
    padding: 12px;
  }
  .lifecycle-flow.mb-24 .lifecycle-arrow {
    display: none;
  }
  .lifecycle-flow.mb-24 .lifecycle-step {
    flex-shrink: 0;
  }
  .lifecycle-flow.mb-24 .lifecycle-step-label {
    padding: 7px 14px;
    font-size: 11px;
    border-radius: 20px;
    white-space: nowrap;
  }
  .lifecycle-flow.mb-24 .lifecycle-step-label.active {
    box-shadow: 0 0 0 2px var(--primary-33);
  }
}

@media (max-width: 480px) {
  .lifecycle-flow.mb-24 {
    gap: 6px;
    padding: 10px;
  }
  .lifecycle-flow.mb-24 .lifecycle-step-label {
    padding: 5px 10px;
    font-size: 10px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   CUSTOMER DETAIL — Mobile Fixes
   APPEND this to END of style.css
   ═══════════════════════════════════════════════════════════════ */

/* Stats: 2 columns on mobile */
@media (max-width: 768px) {
  .grid-7 {
    grid-template-columns: 1fr 1fr;
  }

  /* Quick Actions + Sidebar comes FIRST on mobile */
  .cd-layout {
    display: flex;
    flex-direction: column;
  }
  .cd-layout > div:last-child {
    order: -1;
  }

  /* Page header actions: icon only */
  .page-header-actions .btn {
    padding: 6px 8px;
    font-size: 0;
    gap: 0;
  }
  .page-header-actions .btn i,
  .page-header-actions .btn svg {
    font-size: 14px;
    width: 16px;
    height: 16px;
  }

  /* Stats strip compact for 2-col */
  .grid-7 .stats-strip-item {
    padding: 10px 12px;
  }
  .grid-7 .stats-strip-value {
    font-size: 18px;
  }
  .grid-7 .stats-strip-label {
    font-size: 10px;
  }
}

@media (max-width: 480px) {
  .grid-7 {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .grid-7 .stats-strip-item {
    padding: 8px 10px;
  }
  .grid-7 .stats-strip-value {
    font-size: 16px;
  }
}

/* All stats cards: 2 columns on mobile */
@media (max-width: 768px) {
  .grid-4,
  .grid-5,
  .grid-6,
  .grid-7 {
    grid-template-columns: 1fr 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════
   TABLE TOOLS — Column Filter, Bulk Select, Import
   APPEND this to END of style.css
   ═══════════════════════════════════════════════════════════════ */

/* Bulk action bar */
#bulkActionBar {
  animation: slideInRight 0.3s ease;
}

/* Column filter label hide on mobile */
@media (max-width: 768px) {
  .col-filter-label {
    display: none;
  }

  #bulkActionBar {
    left: 10px !important;
    right: 10px !important;
    transform: none !important;
    padding: 8px 14px !important;
    gap: 8px !important;
    border-radius: 10px !important;
  }
  #bulkActionBar .btn {
    font-size: 10px !important;
    padding: 4px 8px !important;
  }
  #bulkCount {
    font-size: 11px !important;
    min-width: auto !important;
  }
}

/* Import dropzone hover */
#importModal_Customers [id$="_dropzone"]:hover,
#importModal_Units [id$="_dropzone"]:hover,
#importModal_Vehicles [id$="_dropzone"]:hover,
#importModal_Services [id$="_dropzone"]:hover {
  border-color: var(--primary) !important;
  background: var(--primary-glow);
}

/* ═══════════════════════════════════════════════════════════════
   KANBAN BOARD (Leads Pipeline)
   ═══════════════════════════════════════════════════════════════ */

.kanban-board {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 16px;
  min-height: 400px;
}

.kanban-column {
  min-width: 280px;
  max-width: 320px;
  flex: 1 0 280px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.kanban-column.drag-over {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-20), 0 8px 24px rgba(59,130,246,0.12);
}

.kanban-column--converted {
  border-style: dashed;
  border-color: var(--border-light);
  background: linear-gradient(135deg, rgba(168,85,247,0.04), transparent);
}

.kanban-column--converted.drag-over {
  border-color: #a855f7;
  box-shadow: 0 0 0 3px rgba(168,85,247,0.2), 0 8px 24px rgba(168,85,247,0.12);
  background: linear-gradient(135deg, rgba(168,85,247,0.08), transparent);
}

.kanban-column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--border);
}

.kanban-column-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.kanban-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.kanban-column-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  min-width: 22px;
  height: 22px;
  border-radius: var(--radius-full);
  background: var(--surface-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
}

.kanban-cards {
  flex: 1;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 80px;
  overflow-y: auto;
  max-height: calc(100vh - 280px);
}

/* ─── Lead Card ─── */
.kanban-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px;
  cursor: grab;
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.3s ease, border-color 0.2s ease;
  position: relative;
}

.kanban-card:hover {
  border-color: var(--border-light);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transform: translateY(-1px);
}

.kanban-card:active {
  cursor: grabbing;
}

.kanban-card.is-dragging {
  opacity: 0.4;
  transform: scale(0.95);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}

@keyframes cardComplete {
  0% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.95); border-color: var(--accent); }
  100% { opacity: 0; transform: scale(0.85) translateY(-8px); }
}

.kanban-card.is-completing {
  animation: cardComplete 0.5s ease forwards;
  pointer-events: none;
}

.kanban-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.kanban-card-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  word-break: break-word;
}

.kanban-card-detail {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary, var(--text-muted));
  margin-bottom: 3px;
}

.kanban-card-detail span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ─── Card Action Menu ─── */
.kanban-card-menu-wrap {
  position: relative;
  flex-shrink: 0;
}

.btn--icon-xs {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}

.btn--icon-xs:hover {
  background: var(--surface-alt);
  color: var(--text);
}

.kanban-card-menu {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 130px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  z-index: 50;
  padding: 4px;
  animation: fadeIn 0.15s ease;
}

.kanban-card-menu.hidden {
  display: none;
}

.kanban-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: none;
  color: var(--text);
  font-size: 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.kanban-menu-item:hover {
  background: var(--surface-alt);
}

.kanban-menu-item.danger {
  color: var(--danger);
}

.kanban-menu-item.danger:hover {
  background: var(--danger-glow);
}

/* ─── Converted Column Drop Hint ─── */
.kanban-drop-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 30px 12px;
  border: 2px dashed var(--border);
  border-radius: var(--radius-md);
  color: var(--text-dim);
  font-size: 12px;
  text-align: center;
  line-height: 1.4;
  min-height: 120px;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.kanban-column--converted.drag-over .kanban-drop-hint {
  border-color: #a855f7;
  color: #a855f7;
}

/* ─── Lead Toast Notifications ─── */
/* lead-toast removed — unified Toast system in app.js */

/* ─── Responsive: Kanban ─── */
@media (max-width: 768px) {
  .kanban-board {
    flex-direction: column;
    overflow-x: visible;
  }

  .kanban-column {
    min-width: 100%;
    max-width: 100%;
    flex: 1 1 auto;
  }

  .kanban-cards {
    max-height: 300px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE OVERFLOW FIX — CSS-Only Overrides
   Fixes inline style overflow issues across ALL views
   without touching any PHP/HTML/JS code.
   Version: 2.0.0
   ═══════════════════════════════════════════════════════════════ */

/* ─── Global Overflow Containment ─── */
.page-wrapper {
  overflow-x: hidden;
  max-width: 100%;
  box-sizing: border-box;
}

.main-content {
  overflow-x: hidden;
  max-width: 100vw;
}

/* ─── Detail Page Two-Column Grid ─── */
.detail-grid-2col { min-width: 0; }
.detail-grid-2col > * { min-width: 0; }
@media (max-width: 1100px) {
  .detail-grid-2col,
  .sj-detail-grid { grid-template-columns: 1fr !important; }
}
.sj-detail-grid { min-width: 0; }
.sj-detail-grid > * { min-width: 0; }

/* ─── All cards: contain overflow ─── */
.card {
  overflow: hidden;
  max-width: 100%;
  box-sizing: border-box;
}

/* ─── Tables inside cards: always scrollable ─── */
.card > div[style*="overflow-x"] {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

/* ─── Table: ensure min-width for scroll behavior ─── */
.card .table,
.table-container .table {
  min-width: 600px;
}

/* ─── Filter / Status bar inside cards: horizontal scroll ─── */
.card > div[style*="display:flex"][style*="flex-wrap:wrap"] {
  min-width: 0;
}

/* ─── Page actions flex wrap ─── */
.page-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

/* ─── Modal form grids with inline style override ─── */
.modal .modal-form-grid[style*="grid-template-columns"] {
  gap: 14px 16px;
}

/* ─── PO Item rows: prevent overflow ─── */
.po-item-row,
div[class*="po-item"] {
  max-width: 100%;
  box-sizing: border-box;
}

/* ─── Inline grid containers inside modals ─── */
.modal div[style*="display:grid"] {
  max-width: 100%;
  box-sizing: border-box;
}

/* ═══ TABLET — max 1024px ═══ */
@media (max-width: 1024px) {

  /* Table cells: override inline padding */
  .table th[style],
  .card .table th,
  .card table th {
    padding: 10px 12px !important;
    font-size: 11px !important;
  }

  .table td[style],
  .card .table td,
  .card table td {
    padding: 10px 12px !important;
    font-size: 12px !important;
  }

  /* Cards with inline padding */
  .card[style*="padding:0"] > div[style*="padding:20px"],
  .card[style*="padding:0"] > div[style*="padding:14px"] {
    padding: 14px 16px !important;
  }

  /* Modal form grid: 2 columns max */
  .modal .modal-form-grid[style*="1fr 1fr 1fr"],
  .modal .modal-form-grid[style*="grid-template-columns:1fr 1fr 1fr"],
  .modal div[style*="grid-template-columns:1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ═══ MOBILE — max 768px ═══ */
@media (max-width: 768px) {

  /* ── Page Wrapper ── */
  .page-wrapper {
    padding: 14px !important;
    overflow-x: hidden !important;
  }

  /* ── Page Header: stack vertically ── */
  .page-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  .page-header .page-actions,
  .page-header > div:last-child {
    width: 100%;
  }

  .page-header .page-actions .btn,
  .page-actions .btn {
    flex: 1;
    justify-content: center;
    min-width: 0;
  }

  /* ── Table cells: compact for mobile ── */
  .table th[style],
  .card .table th,
  .card table th,
  .table-container .table th {
    padding: 8px 10px !important;
    font-size: 10px !important;
    letter-spacing: 0.04em !important;
  }

  .table td[style],
  .card .table td,
  .card table td,
  .table-container .table td {
    padding: 10px !important;
    font-size: 11px !important;
  }

  /* Action cells: tighter */
  .table td[style*="text-align:center"] {
    padding: 8px 6px !important;
  }

  .table td[style*="text-align:right"] {
    padding: 8px 10px !important;
  }

  /* ── Filter bars inside cards: horizontal scroll ── */
  .card[style*="display:flex"][style*="flex-wrap"] {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 10px 14px !important;
    gap: 8px !important;
  }

  .card[style*="display:flex"][style*="flex-wrap"]::-webkit-scrollbar {
    display: none;
  }

  /* Filter bar: search input takes full width first row */
  .card[style*="display:flex"][style*="justify-content:space-between"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .card[style*="display:flex"] form[style*="display:flex"] {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Status filter tabs: horizontal scroll */
  .card[style*="display:flex"] > div[style*="display:flex"][style*="gap:4px"],
  .card[style*="display:flex"] > div[style*="display:flex"][style*="flex-wrap:wrap"] {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }

  .card[style*="display:flex"] > div[style*="display:flex"][style*="gap:4px"]::-webkit-scrollbar,
  .card[style*="display:flex"] > div[style*="display:flex"][style*="flex-wrap:wrap"]::-webkit-scrollbar {
    display: none;
  }

  /* ── Modal form grids: single column ── */
  .modal .modal-form-grid[style],
  .modal .modal-form-grid,
  .modal div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  .modal-form-grid .modal-form-full {
    grid-column: 1 / -1 !important;
  }

  /* PO item rows: stack on mobile */
  .modal .po-item-row[style*="grid-template-columns"],
  .modal div[style*="grid-template-columns:2fr"] {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  /* Modal padding compact */
  .modal form,
  .modal > form {
    padding: 16px !important;
  }

  .modal-header {
    padding: 16px !important;
  }

  .modal-footer {
    padding: 12px 16px !important;
    flex-wrap: wrap !important;
  }

  .modal-footer .btn {
    flex: 1;
    min-width: 0;
    justify-content: center;
  }

  /* ── Cards with inline grids (supplier cards, etc) ── */
  div[style*="grid-template-columns:repeat(auto-fill"] {
    grid-template-columns: 1fr !important;
  }

  /* ── Supplier / card body padding compact ── */
  .card[style*="padding:0"] > div[style*="padding:20px"] {
    padding: 14px !important;
  }

  .card[style*="padding:0"] > div[style*="padding:0 20px"] {
    padding: 0 14px 12px !important;
  }

  .card[style*="padding:0"] > div[style*="padding:12px 20px"] {
    padding: 10px 14px !important;
  }

  /* ── Topbar: compact on mobile ── */
  .topbar {
    padding: 0 10px !important;
    gap: 6px !important;
  }

  .topbar-title {
    font-size: 14px !important;
    max-width: 140px;
  }

  /* Hide notification dot label on mobile */
  .topbar-notif {
    width: 32px !important;
    height: 32px !important;
  }

  .topbar-logout {
    width: 32px !important;
    height: 32px !important;
  }

  .theme-toggle {
    width: 32px !important;
    height: 32px !important;
  }

  .topbar-user {
    padding: 4px !important;
  }

  .topbar-avatar {
    width: 28px !important;
    height: 28px !important;
    font-size: 11px !important;
  }

  /* ── Inline flex containers with gap: prevent overflow ── */
  div[style*="display:flex"][style*="gap:12px"]:not(.kanban-board):not(.kanban-cards) {
    min-width: 0;
    max-width: 100%;
  }

  /* ── Pagination: compact ── */
  div[style*="display:flex"][style*="justify-content:center"][style*="gap:4px"] .btn--sm {
    padding: 5px 8px !important;
    font-size: 11px !important;
  }

  /* ── Search forms ── */
  form[style*="max-width:400px"],
  form[style*="max-width:360px"] {
    max-width: 100% !important;
  }

  /* ── Inline flex search bars ── */
  div[style*="display:flex"][style*="gap:12px"][style*="margin-bottom:20px"] {
    flex-wrap: wrap !important;
  }

  div[style*="display:flex"][style*="gap:12px"][style*="margin-bottom:20px"] > * {
    min-width: 0;
  }

  /* ── Data info rows: wrap text ── */
  .table td[style*="white-space"] {
    white-space: normal !important;
    word-break: break-word;
  }

  /* Keep PO number, dates, status badges nowrap */
  .table td:first-child,
  .table td .badge {
    white-space: nowrap;
  }

  /* ── Card footer ── */
  .card > div[style*="border-top:1px solid"][style*="display:flex"][style*="justify-content:space-between"] {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
}

/* ═══ SMALL PHONE — max 480px ═══ */
@media (max-width: 480px) {

  .page-wrapper {
    padding: 10px !important;
  }

  /* Table cells: extra compact */
  .table th[style],
  .card .table th,
  .table-container .table th {
    padding: 6px 8px !important;
    font-size: 9px !important;
  }

  .table td[style],
  .card .table td,
  .table-container .table td {
    padding: 8px !important;
    font-size: 11px !important;
  }

  /* Page title */
  .page-title {
    font-size: 16px !important;
  }

  .page-subtitle {
    font-size: 11px !important;
  }

  /* Topbar */
  .topbar-title {
    font-size: 13px !important;
    max-width: 100px;
  }

  /* Buttons: compact */
  .btn {
    padding: 7px 12px !important;
    font-size: 11px !important;
  }

  .btn--sm {
    padding: 5px 8px !important;
    font-size: 10px !important;
  }

  /* Modal: almost full screen */
  .modal-overlay {
    padding: 4px !important;
  }

  .modal {
    border-radius: 10px !important;
    max-height: 96vh !important;
  }

  .modal-title {
    font-size: 14px !important;
  }

  .modal form,
  .modal > form {
    padding: 12px !important;
  }

  .modal-footer {
    padding: 10px 12px !important;
  }

  /* Cards */
  .card {
    border-radius: var(--radius-md) !important;
  }

  .stat-card {
    padding: 12px !important;
  }

  .stat-card-value {
    font-size: 18px !important;
  }

  .stat-card-label {
    font-size: 10px !important;
  }

  /* Toast */
  .toast-container,
  div[style*="position:fixed"][style*="top:20px"][style*="right:20px"] {
    left: 10px !important;
    right: 10px !important;
    top: 10px !important;
  }

  /* Pagination extra compact */
  div[style*="display:flex"][style*="justify-content:center"][style*="gap:4px"] {
    gap: 2px !important;
  }

  div[style*="display:flex"][style*="justify-content:center"][style*="gap:4px"] .btn--sm {
    padding: 4px 6px !important;
    font-size: 10px !important;
    min-width: 28px;
    justify-content: center;
  }

  /* Card grids: always single column */
  div[style*="display:grid"][style*="repeat(auto-fill"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Action buttons in tables */
  .btn--icon-xs {
    padding: 3px !important;
  }

  .btn--icon-xs i,
  .btn--icon-xs svg {
    width: 12px !important;
    height: 12px !important;
  }
}

/* ═══ PRINT: Reset overflows ═══ */
@media print {
  .sidebar,
  .sidebar-overlay,
  .topbar,
  .mobile-menu-btn {
    display: none !important;
  }

  .main-content {
    margin-left: 0 !important;
    width: 100% !important;
  }

  .page-wrapper {
    padding: 0 !important;
  }

  .table th[style],
  .table td[style] {
    padding: 6px 8px !important;
    font-size: 10px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE OVERFLOW FIX v2.1 — Service page & filter bar fixes
   ═══════════════════════════════════════════════════════════════ */

/* ─── Search + filter bar (non-card flex containers): prevent body overflow ─── */
#service-jobs-page > div[style*="display:flex"][style*="gap:12px"],
div[style*="display:flex"][style*="gap:12px"][style*="margin-bottom:20px"][style*="flex-wrap:wrap"] {
  max-width: 100%;
  box-sizing: border-box;
}

/* ─── Columns / Select button group: no overflow ─── */
.page-header-actions {
  flex-wrap: wrap;
}

@media (max-width: 1024px) {
  /* Search bar + filters: wrap properly */
  #service-jobs-page > div[style*="display:flex"][style*="gap:12px"],
  div[style*="display:flex"][style*="gap:12px"][style*="margin-bottom:20px"] {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* Ensure search box doesn't force min-width */
  .search-box[style*="min-width"] {
    min-width: 0 !important;
    flex: 1 1 200px !important;
  }
}

@media (max-width: 768px) {
  /* ── Search / Filter bar: stack vertically ── */
  #service-jobs-page > div[style*="display:flex"][style*="gap:12px"],
  div[style*="display:flex"][style*="gap:12px"][style*="margin-bottom:20px"][style*="align-items:center"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  /* Search box full width */
  .search-box {
    min-width: 0 !important;
    width: 100% !important;
  }

  .search-box[style*="min-width"] {
    min-width: 0 !important;
  }

  /* Status filter pills: horizontal scroll */
  div[style*="display:flex"][style*="gap:4px"][style*="background:var(--surface-alt)"][style*="border-radius:10px"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-shrink: 0;
  }

  div[style*="display:flex"][style*="gap:4px"][style*="background:var(--surface-alt)"]::-webkit-scrollbar {
    display: none;
  }

  /* View toggle (Table/Cards) buttons: don't shrink */
  div[style*="display:flex"][style*="gap:2px"][style*="background:var(--surface-alt)"][style*="border-radius:10px"] {
    flex-shrink: 0;
  }

  /* Columns + Select buttons row */
  div[style*="display:flex"][style*="gap:12px"][style*="margin-bottom:20px"] > div:last-child {
    flex-shrink: 0;
  }

  /* ── Stats grid on services: 2 columns ── */
  .grid.grid-6 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ── Card view: grid single column ── */
  .grid.grid-auto-320 {
    grid-template-columns: 1fr !important;
  }

  /* ── Card view action buttons: stay inline (4-5 icons row) ── */
  .card div[style*="display:flex"][style*="gap:4px"][style*="border-top"] {
    flex-wrap: nowrap !important;
  }

  .card div[style*="display:flex"][style*="gap:4px"][style*="border-top"] .btn {
    flex: 1 !important;
    padding: 6px 4px !important;
    min-width: 0 !important;
  }

  /* ── Card detail grids: 2 columns keep ── */
  .card div[style*="display:grid"][style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* ── Table action buttons: NEVER wrap (table scrolls) ── */
  .table .action-group {
    flex-wrap: nowrap !important;
    gap: 3px !important;
  }

  .table .action-group .btn-icon {
    width: 24px !important;
    height: 24px !important;
  }

  .table .action-group .btn-icon svg {
    width: 12px !important;
    height: 12px !important;
  }
}

@media (max-width: 480px) {
  /* Stats: still 2 columns but tighter */
  .grid.grid-6 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  .stats-strip-item {
    padding: 8px 10px !important;
  }

  .stats-strip-value {
    font-size: 16px !important;
  }

  .stats-strip-label {
    font-size: 9px !important;
  }

  /* Table action icons: even smaller */
  .table .action-group .btn-icon {
    width: 22px !important;
    height: 22px !important;
  }

  .table .action-group .btn-icon svg {
    width: 11px !important;
    height: 11px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   WIR Form Styles
   ═══════════════════════════════════════════════════════════════ */

/* Section heading for WIR form */
.form-section-heading {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    padding: 0.5rem 0;
    border-bottom: 2px solid var(--border);
}

/* Status badges for WIR */
.badge-approved { background-color: rgba(22, 163, 74, 0.12); color: #22c55e; border: 1px solid rgba(22, 163, 74, 0.25); }
.badge-rejected { background-color: rgba(220, 38, 38, 0.12); color: #ef4444; border: 1px solid rgba(220, 38, 38, 0.25); }
.badge-rejected-pending { background-color: rgba(234, 179, 8, 0.12); color: #eab308; border: 1px solid rgba(234, 179, 8, 0.25); }

/* WIR Form Container */
.wir-form-container {
    background-color: var(--card, #fff);
    padding: 1rem;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 8px;
}
.wir-form-container table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    border: 1px solid var(--border);
}
.wir-form-container th,
.wir-form-container td {
    border: 1px solid var(--border);
    padding: 0.5rem;
    vertical-align: top;
}
.wir-form-container .wir-header {
    text-align: center;
    font-size: 1.25rem;
    font-weight: 700;
}
.wir-form-container .label {
    font-weight: 600;
    width: 20%;
    color: var(--text-muted);
    font-size: 12px;
    vertical-align: middle;
}
.wir-form-container td .form-input {
    padding: 0.3rem 0.5rem;
    box-shadow: none;
    border-color: var(--border);
}
.wir-form-container td .form-input:focus {
     box-shadow: 0 0 0 2px var(--primary-20);
}

/* Repeater tables */
.wir-form-container .repeater-table th { font-size: 12px; }
.wir-form-container .repeater-table td { vertical-align: middle; }
.wir-form-container .repeater-table tbody tr { transition: background-color 0.2s ease-in-out; }
.wir-form-container .repeater-table input[type="radio"],
.wir-form-container .repeater-table input[type="checkbox"] {
    margin: 0 auto;
    display: block;
}
.wir-form-container .repeater-table .checkbox-col {
    width: 50px;
    text-align: center;
}
.wir-form-container .repeater-table .actions-cell {
    width: 200px;
    padding-right: 0.5rem;
}
.wir-form-container .part-actions-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.part-status-badge-container {
    width: 120px;
    flex-shrink: 0;
}
.part-status-badge-container .badge { margin: 0; }
.wir-form-container .part-actions-wrapper .part-status-controls {
    display: inline-flex;
    gap: 0.25rem;
}
.wir-form-container .part-actions-wrapper .remove-row-btn {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
}
.wir-form-container .part-actions-wrapper .remove-row-btn:hover {
    background-color: var(--danger-glow);
    border-color: var(--danger);
}
.wir-form-container .part-status-controls .tag-status-btn.active { color: white !important; }
.wir-form-container tr[data-status="Approved"] .part-status-controls .approve {
    background-color: var(--accent);
}
.wir-form-container tr[data-status="Rejected"] .part-status-controls .reject {
    background-color: var(--danger);
}

/* Labour tags */
.labour-tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    min-height: 50px;
    background-color: var(--surface-alt);
}
.labour-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 6px;
    padding: 0.4rem 0.5rem 0.4rem 0.8rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    transition: all 0.2s ease;
}
.labour-tag[data-status="Pending"] { background-color: var(--warning-glow); border-color: var(--warning-20); }
.labour-tag[data-status="Approved"] { background-color: var(--accent-glow); border-color: var(--accent-20); }
.labour-tag[data-status="Rejected"] { background-color: var(--danger-glow); border-color: var(--danger-20); }
.tag-code { font-weight: 500; color: var(--text); }
.labour-tag[data-status="Approved"] .tag-code { font-weight: 700; color: var(--accent); }
.labour-tag[data-status="Rejected"] .tag-code { color: var(--danger); font-weight: 700; }
.tag-controls { display: flex; align-items: center; gap: 0.25rem; border-left: 1px solid var(--border); margin-left: 0.5rem; padding-left: 0.5rem; }
.tag-status-btn {
    border: 1px solid var(--border);
    border-radius: 50%;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    background: var(--surface-alt);
    padding: 0;
}
.tag-status-btn svg {
    width: 14px;
    height: 14px;
}
.tag-status-btn.approve { color: var(--accent); }
.tag-status-btn.reject { color: var(--danger); }
.tag-status-btn:hover { background-color: var(--surface-alt); }
.tag-status-btn.active { color: white !important; }
.labour-tag[data-status="Approved"] .tag-status-btn.approve { background-color: var(--accent); }
.labour-tag[data-status="Rejected"] .tag-status-btn.reject { background-color: var(--danger); }
.tag-remove-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 0; display: flex; align-items: center; }
.tag-remove-btn svg { width: 14px; height: 14px; }
.tag-remove-btn:hover { color: var(--danger); }
.labour-code-adder { display: flex; gap: 0.75rem; align-items: center; }
.labour-code-adder .form-input { flex-grow: 1; margin-bottom: 0; }
.labour-code-adder .btn { flex-shrink: 0; }

/* Dropdown (email split button) */
.dropdown { position: relative; display: inline-block; }
.btn-group.dropdown { display: inline-flex; }
.btn-group.dropdown .btn-main { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.btn-group.dropdown .btn-dropdown { border-top-left-radius: 0; border-bottom-left-radius: 0; padding-left: 0.5rem; padding-right: 0.5rem; border-left: 1px solid rgba(255,255,255,0.3); }
.dropdown-menu {
    position: absolute;
    z-index: 1000;
    background-color: var(--card, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    padding: 0.5rem 0;
    min-width: 100%;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.2s, transform 0.2s;
    pointer-events: none;
}
.dropdown-menu:not(.hidden) { opacity: 1; transform: translateY(0); pointer-events: auto; }
.dropdown-item {
    display: block;
    width: 100%;
    padding: 0.5rem 1rem;
    font-weight: 400;
    color: var(--text, #111);
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    cursor: pointer;
}
.dropdown-item:hover { background-color: var(--surface-alt, #f3f4f6); }

/* ═══ Action Dropdown (More Actions •••) ═══ */
.action-dropdown {
  position: relative;
  display: inline-flex;
}
.action-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 175px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 9px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.18), 0 4px 10px -2px rgba(0, 0, 0, 0.08);
  padding: 5px 0;
  z-index: 1050;
  display: none;
  text-align: left;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
}
.action-dropdown-menu.show {
  display: block !important;
}
.action-dropdown-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text, #111);
  background: transparent;
  border: none;
  cursor: pointer;
  text-decoration: none !important;
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
  box-sizing: border-box;
}
.action-dropdown-item i,
.action-dropdown-item svg {
  width: 14px;
  height: 14px;
  stroke-width: 2px;
  flex-shrink: 0;
  color: var(--text-dim);
}
.action-dropdown-item:hover {
  background: var(--surface-alt, #f1f5f9);
  color: var(--text);
}
.action-dropdown-item:hover i,
.action-dropdown-item:hover svg {
  color: var(--text);
}
.action-dropdown-item--danger {
  color: var(--danger) !important;
}
.action-dropdown-item--danger i,
.action-dropdown-item--danger svg {
  color: var(--danger) !important;
}
.action-dropdown-item--danger:hover {
  background: var(--danger-glow, rgba(239, 68, 68, 0.1)) !important;
  color: var(--danger) !important;
}
.action-dropdown-divider {
  height: 1px;
  background: var(--border, #e5e7eb);
  margin: 4px 0;
}

/* WIR Approval email styles */
.wir-form-container .approved-price-input,
#sm-approval-table .approved-price-input {
    width: 100px;
    padding: 0.3rem 0.5rem;
    font-weight: bold;
    text-align: right;
}
.labour-tag .approved-price-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    padding-left: 0.75rem;
    border-left: 1px solid var(--border);
}
.labour-tag .original-rate {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}

/* WIR Form Responsive */
@media (max-width: 768px) {
    .wir-form-container {
        padding: 0;
        border: none;
        background: none;
    }
    .wir-form-container table { border: none; }
    .wir-form-container > table > thead { display: none; }
    .wir-form-container > table > tbody {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    .wir-form-container > table > tbody > tr {
        display: flex;
        flex-direction: column;
        border: 1px solid var(--border, #e5e7eb);
        border-radius: 8px;
        padding: 1rem;
        background-color: var(--card, #fff);
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    .wir-form-container > table > tbody > tr > td {
        display: block;
        width: 100%;
        border: none;
        padding: 0.5rem 0;
    }
    .wir-form-container > table .label {
        font-weight: 500;
        color: var(--text-muted, #6b7280);
        font-size: 13px;
        width: 100%;
    }
    .wir-form-container .repeater-table thead { display: none; }
    .wir-form-container .repeater-table tbody,
    .wir-form-container .repeater-table tr,
    .wir-form-container .repeater-table td {
        display: block;
        width: 100% !important;
    }
    .wir-form-container .repeater-table tr {
        border: 1px solid var(--border, #e5e7eb);
        border-radius: 6px;
        margin-bottom: 1rem;
        padding: 1rem;
        background-color: var(--card, #fff);
    }
    .wir-form-container .repeater-table tr:last-child { margin-bottom: 0; }
    .wir-form-container .repeater-table td {
        border: none;
        padding: 0.6rem 0;
        border-bottom: 1px solid var(--border-light, #f3f4f6);
        display: flex;
        flex-direction: column;
    }
    .wir-form-container .repeater-table td:last-child { border-bottom: none; }
    .wir-form-container .repeater-table td::before {
        content: attr(data-label);
        display: block;
        font-weight: 600;
        margin-bottom: 0.5rem;
        color: var(--text, #111);
    }
    .wir-form-container .repeater-table td.checkbox-col {
        flex-direction: row;
        align-items: center;
        gap: 1rem;
    }
    .wir-form-container .repeater-table td.checkbox-col::before { margin-bottom: 0; }
    .wir-form-container .repeater-table td.checkbox-col input { margin: 0; }
    .wir-form-container .repeater-table td.actions-cell { padding-top: 1rem; }
    .wir-form-container .repeater-table td.actions-cell::before { display: none; }
    .wir-form-container .refrigerant-table td {
        display: block;
        width: 100%;
        border: none;
        padding: 0.5rem 0;
    }
    .wir-form-container .refrigerant-table td::before {
        content: attr(data-label);
        display: block;
        font-weight: 600;
        margin-bottom: 0.25rem;
    }
    .wir-form-container .refrigerant-table th { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   DASHBOARD DESIGN SYSTEM
   Pehle ye sirf tenant dashboard ke inline <style> mein tha.
   Super Admin dashboard ko bhi wahi language chahiye thi, isliye
   yahan promote kiya — dono ek hi system use karte hain, CSS
   duplicate nahi hoti aur dono kabhi alag nahi dikhte.
   ═══════════════════════════════════════════════════════════════ */

/* ── Section headers ── */
.sec-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:12px;flex-wrap:wrap}
.sec-eyebrow{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:800;letter-spacing:0.07em;text-transform:uppercase;color:var(--text)}
.sec-tick{width:4px;height:15px;border-radius:2px;background:var(--primary);box-shadow:0 0 9px var(--primary)}
.sec-eyebrow .sub{font-size:11px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--text-dim)}
.sec-link{font-size:11px;font-weight:600;color:var(--primary);text-decoration:none;display:inline-flex;align-items:center;gap:4px;transition:gap .15s}
.sec-link:hover{gap:8px}

/* ── Hero strip (gradient page ke hisaab se override kar sakte hain) ── */
.hero{position:relative;overflow:hidden;border-radius:18px;padding:20px 26px;margin-bottom:26px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
    background:linear-gradient(125deg,#0369a1 0%,#0891b2 55%,#06b6d4 100%);color:#fff}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(130% 150% at 100% -10%,rgba(255,255,255,.25),transparent 55%);pointer-events:none}
.hero::after{content:"";position:absolute;right:-40px;bottom:-60px;width:220px;height:220px;border-radius:50%;border:2px solid rgba(255,255,255,.12);box-shadow:0 0 0 18px rgba(255,255,255,.05);pointer-events:none}
.hero-l{position:relative;z-index:1;min-width:0}
.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;opacity:.92}
.hero-live{width:7px;height:7px;border-radius:50%;background:#fff;animation:hpulse 2s infinite}
@keyframes hpulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.6)}70%{box-shadow:0 0 0 7px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.hero-greet{font-size:23px;font-weight:800;letter-spacing:-0.5px;margin:7px 0 3px;line-height:1.1}
.hero-sub{font-size:12.5px;opacity:.9}
.hero-r{display:flex;gap:10px;flex-wrap:wrap;position:relative;z-index:1}
.hero-pill{background:rgba(255,255,255,.15);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.25);border-radius:14px;padding:9px 16px;text-align:center;min-width:82px}
.hero-pill b{display:block;font-size:21px;font-weight:800;line-height:1.05}
.hero-pill span{font-size:9.5px;opacity:.85;text-transform:uppercase;letter-spacing:.04em}

/* ── Compact stat cards ── */
.scard{position:relative;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:13px 15px;overflow:hidden;transition:transform .15s,border-color .15s}
.scard:hover{transform:translateY(-2px)}
.scard-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.scard-lbl{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-dim)}
.scard-ico{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.scard-ico i,
.scard-ico svg {width:16px;height:16px}
.scard-val{font-size:24px;font-weight:800;line-height:1.05;letter-spacing:-0.5px}
.scard-foot{display:flex;align-items:center;gap:6px;margin-top:7px;font-size:10.5px;color:var(--text-dim);flex-wrap:wrap}
.scard-trend{display:inline-flex;align-items:center;gap:2px;font-weight:700;padding:1px 6px;border-radius:20px}
.scard-trend.up{color:var(--accent);background:var(--accent-glow)}
.scard-trend.down{color:var(--danger);background:var(--danger-glow)}
.spark{display:flex;align-items:flex-end;gap:2px;height:22px}
.spark i,
.spark svg {width:3px;border-radius:2px;background:var(--primary);opacity:0.55;flex-shrink:0}

/* ── Overview + Needs Attention split ── */
.ov-na{display:grid;grid-template-columns:minmax(0,1.85fr) minmax(0,1fr);gap:18px;margin-bottom:24px;align-items:start}
@media(max-width:1080px){.ov-na{grid-template-columns:1fr}}
.scards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:560px){.scards{grid-template-columns:1fr 1fr}}
.na-panel{background:var(--card);border:1px solid var(--danger-33);border-radius:14px;padding:13px 14px}
.na-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.nac{display:flex;flex-direction:column;gap:8px;padding:11px 12px;border-radius:12px;background:var(--surface-alt);border:1px solid var(--border);text-decoration:none;transition:transform .15s,box-shadow .15s}
.nac:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.07)}
.nac-top{display:flex;align-items:center;justify-content:space-between;gap:6px}
.nac-ico{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.nac-num{font-size:21px;font-weight:800;line-height:1;letter-spacing:-0.5px}
.nac-lbl{font-size:10px;font-weight:600;color:var(--text-muted);line-height:1.2}
.na-ok{display:flex;flex-direction:column;align-items:center;gap:8px;padding:24px 0;color:var(--accent);font-size:12.5px;font-weight:600;text-align:center}

/* ── Dashboard utility classes ──
   Ye pehle inline style the; class banane se markup saaf rehta hai
   aur theme badalne par ek hi jagah badalna padta hai. */
.sec-tick--danger{background:var(--danger);box-shadow:0 0 9px var(--danger)}
.scard-split{display:flex;align-items:flex-end;justify-content:space-between;gap:8px}
.scard-ring{flex-shrink:0}
.dw-num{font-size:15px;font-weight:800}
.dw-ico-primary{color:var(--primary)}
.dw-ico-purple{color:var(--purple)}
.dw-ico-cyan{color:var(--cyan)}
.hero-pill--link{text-decoration:none;color:inherit}
.hero-pill--alert{border-color:rgba(255,255,255,.45)}
.donut-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.donut-center b{font-size:20px;font-weight:800;line-height:1}
.donut-center span{font-size:10px;color:var(--text-dim)}
.legend-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.chart-box{position:relative}
.chart-box--lg{height:190px}
.chart-box--sm{height:150px;margin-bottom:10px}
.cell-actions{text-align:right;white-space:nowrap}

/* ── Quick actions ──
   Sirf layout. Buttons app ke apne .btn / .btn--sm hain — koi alag
   design system nahi. Icons thode chhote taaki bar compact rahe. */
.qbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.qbar .btn i,
.qbar .btn svg {width:14px;height:14px}

/* ── Dashboard widgets ── */
.dw-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;margin-bottom:28px}
.dw{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px 18px;display:flex;flex-direction:column;transition:transform .15s,border-color .15s,box-shadow .15s}
.dw:hover{border-color:var(--primary-33);box-shadow:0 8px 22px rgba(0,0,0,.07)}
.dw-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.dw-title{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700}
.dw-cnt{font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px}
.dw-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 0;border-top:1px solid var(--border)}
.dw-row:first-of-type{border-top:none}
.dw-l{min-width:0;flex:1}
.dw-l b{font-size:12px;font-weight:600;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dw-l span{font-size:10px;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.dw-empty{font-size:11px;color:var(--text-dim);text-align:center;padding:18px 0;display:flex;flex-direction:column;align-items:center;gap:6px}
.dw-foot{margin-top:auto;padding-top:10px;font-size:11px;font-weight:600}
.dw-foot a{color:var(--primary);text-decoration:none}

@media (prefers-reduced-motion: reduce){
  .hero-live{animation:none}
  .dw:hover,.scard:hover,.nac:hover,.qa:hover{transform:none}
}

/* ═══════════════════════════════════════════════════════════════
   SERVICE JOB — warranty toggle, billing type, WIR indicator
   ═══════════════════════════════════════════════════════════════ */

/* `hidden` attribute browser ke apne (UA) stylesheet se aata hai, aur AUTHOR
   ka koi bhi `display` use hamesha hara deta hai — isliye `<a class="btn" hidden>`
   phir bhi dikhta tha (.btn par display:inline-flex hai). Ye normalize.css wali
   maamooli line usko sach me chhupa deti hai. */
[hidden] { display: none !important; }

/* Chhota madadgaar text form fields ke neeche. Ye class markup me pehle se
   istemal ho rahi thi par kahin define nahi thi — inline color ke bina
   text body ke barabar bada dikhta tha. */
.form-hint{font-size:11px;color:var(--text-dim);margin-top:4px;line-height:1.4}

/* ── In Warranty toggle (YES / NO) ──
   Radios chhupe hue hain; dikhne wala state `.active` class se aata hai,
   jise service_jobs.js har change par set karti hai. */
.sj-toggle-group{display:inline-flex;border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;background:var(--surface-alt)}
.sj-toggle-opt{position:relative;display:inline-flex;align-items:center;gap:4px;padding:6px 10px;font-size:11px;font-weight:600;color:var(--text-muted);cursor:pointer;user-select:none;transition:background .15s,color .15s}
.sj-toggle-opt + .sj-toggle-opt{border-left:1px solid var(--border)}
.sj-toggle-opt:hover{background:var(--bg)}
.sj-toggle-opt.active{background:var(--accent);color:#fff}
.sj-toggle-opt.active:hover{background:var(--accent)}
/* Radios pehle `hidden` attribute se chhupe the — matlab display:none, aur
   display:none wala element focus hi nahi le sakta, to toggle keyboard se
   chalta hi nahi tha. Ab wo sirf nazar se chhupe hain, focusable hain. */
.sj-toggle-opt input[type="radio"]{position:absolute;width:1px;height:1px;opacity:0;margin:0;pointer-events:none}
.sj-toggle-opt:focus-within{outline:2px solid var(--primary);outline-offset:-2px}

/* Toggle ke neeche: value auto aayi hai ya user ne badli. */
.sj-warranty-src{font-size:10px;margin-top:4px;color:var(--text-dim);line-height:1.3}
.sj-warranty-src.is-manual{color:var(--warning);font-weight:600}

/* Chaudi modal — jab andar table ho aur har row ek nazar me chahiye.
   `max-width` hi badalta hai; .modal ka `width:100%` chhoti screen sambhal leta
   hai, aur overlay ka padding kinaron par jagah chhodta hai. */
.modal--wide { max-width: 900px; }

/* Add-items modal ki staging table. Inputs row ke andar baithe hain, isliye
   unhe compact rakha hai — warna row ki oonchai do guna ho jati hai. */
.sj-stage-table { font-size: 12.5px; }
.sj-stage-table th,
.sj-stage-table td { padding: 7px 10px; vertical-align: middle; }
.sj-stage-table .form-input { padding: 5px 8px; font-size: 12px; }
.sj-stage-table tfoot td { border-top: 1px solid var(--border); }
/* Naam lamba ho to row todne ke bajaye chhota dikhao — baaki columns
   apni jagah par rehte hain. */
.sj-stage-name { display: block; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 720px) {
  /* Chhoti screen par table ko apne container me scroll karne do — poora
     modal kabhi bagal me na khiske. */
  .sj-stage-name { max-width: 150px; }
  .sj-stage-table { min-width: 560px; }
}

/* ── Part ka billing type — parts table me click karke badalta hai ──
   Ye <button> hai lekin dikhta .badge jaisa hai, isliye yahan sirf wo cheezein
   reset hoti hain jo browser button par thopta hai. Background/border/padding
   .badge se hi aate hain — warna badge ki shakal toot jati. */
.sj-billing-toggle{font-family:inherit;cursor:pointer;position:relative;
    border:1px dashed transparent;transition:border-color .15s,filter .15s}

/* ── Ye badge dabaya ja sakta hai — dikhna bhi chahiye ──

   `cursor:pointer` pehle se tha, par wo tabhi pata chalta hai jab mouse
   upar le jao. Dekhne me ye ek static status pill lagta tha, isliye user
   ko pata hi nahi chalta tha ke Warranty <-> Paid yahin se badalta hai —
   aur labour code "Paid" pada rehta tha (jiski wajah se wo WIR par jata
   hi nahi).

   Kati hui (dashed) haashiya + hover par halka ubhaar: itna ke "ye button
   hai" saaf ho jaye, aur itna bhi nahi ke table shor karne lage. */
.sj-billing-toggle:not(:disabled){border-color:currentColor;border-color:color-mix(in srgb,currentColor 35%,transparent)}
.sj-billing-toggle:not(:disabled):hover{border-style:solid;filter:brightness(1.08)}
.sj-billing-toggle:not(:disabled)::after{content:"⇄";margin-left:5px;font-size:10px;opacity:.6}
.sj-billing-toggle:disabled{cursor:default;opacity:.7}
.sj-billing-toggle:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

/* WIR ki wo rows jo Service Job se aayi hain. Input ke upar chhota tag —
   isse pata chalta hai ke ye row form se nahi, job se hatti hai. */
.wir-from-job{font-size:9px;padding:1px 6px;margin-bottom:3px;display:inline-flex}

/* ── WIR indicator (Service Job list) ──
   Rang wahi jo WIR list ke stat badges par hain, taaki dono jagah ek hi
   halat ek hi rang me dikhe. `--none` un jobs ke liye jinki WIR bani hi nahi. */
.wir-dot{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:20px;font-size:10px;font-weight:600;text-decoration:none;border:1px solid transparent;white-space:nowrap}
.wir-dot i,.wir-dot svg{width:11px;height:11px;flex-shrink:0}
.wir-dot--none{color:var(--text-dim);border-color:var(--border);background:transparent}
.wir-dot--none:hover{color:var(--primary);border-color:var(--primary-33)}
.wir-dot--draft{color:var(--text-muted);border-color:color-mix(in srgb,var(--text-muted) 30%,transparent);background:color-mix(in srgb,var(--text-muted) 12%,transparent)}
.wir-dot--awaiting{color:var(--purple);border-color:rgba(139,92,246,.25);background:rgba(139,92,246,.12)}
.wir-dot--pending{color:var(--warning);border-color:var(--warning-33);background:var(--warning-glow)}
.wir-dot--partial{color:var(--danger);border-color:var(--danger);background:var(--danger-glow)}
.wir-dot--approved{color:var(--cyan);border-color:var(--cyan-33);background:var(--cyan-glow)}
.wir-dot--completed{background:var(--accent);color:#fff;border-color:var(--accent)}
.wir-dot--rejected{color:var(--danger);border-color:var(--danger-33);background:var(--danger-glow)}
.wir-dot--review{color:var(--text-muted);border-color:var(--border);background:var(--surface-alt)}

/* ═══════════════════════════════════════════════════════════════════
   MASTER DATA — Labour Codes / Master Parts / UOM / Part Categories
   Ye page pehle poora inline style= par chal raha tha. Classes yahan
   aa jaane se page ka markup padha ja sakta hai aur dark mode ek jagah
   se theek hota hai.
   ═══════════════════════════════════════════════════════════════════ */
.md-tabs{display:flex;gap:2px;background:var(--surface-alt);border-radius:10px;padding:3px;border:1px solid var(--border);margin-bottom:24px;width:fit-content;flex-wrap:wrap}
.md-tabs .btn{border-radius:8px;font-size:12px}

.md-card{padding:20px;margin-bottom:24px}
.md-card-head{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:12px}
.md-card-title{font-size:15px;font-weight:700;margin-bottom:4px}
.md-card-sub{font-size:12px;color:var(--text-muted);max-width:62ch;line-height:1.55}
.md-card-sub + .md-row{margin-top:16px}

.md-row{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.md-row-actions{display:flex;gap:10px;flex-wrap:wrap}
.md-grow{flex:1;min-width:250px}
.md-label-sm{font-size:11px}
.md-file{font-size:12px}
.md-result{margin-top:12px}
.md-alert{font-size:12px}
.md-error-list{margin:6px 0 0;padding-left:16px;font-size:11px}

.md-group-title{font-size:12px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;padding-left:4px}
.md-group{margin-bottom:20px}

.md-row-actions-cell{display:inline-flex;gap:4px;justify-content:center}
.md-icon{width:14px;height:14px}
.md-muted{color:var(--text-muted)}
.md-dim{font-size:11px;color:var(--text-dim)}
.md-strong{font-weight:600}
.md-num{font-size:12px;font-variant-numeric:tabular-nums}
tr.md-inactive{opacity:.5}

/* Modal ka andar ka form */
.md-form-body{padding:20px 24px;display:flex;flex-direction:column;gap:16px}
.md-form-row{display:flex;gap:12px;flex-wrap:wrap}
.md-form-row > .form-group{flex:1;min-width:150px;margin:0}
.md-form-body .form-group{margin:0}

/* Billing ka niyam — ek hi rule, isliye ek hi note */
.md-note{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--radius-md);
         background:var(--accent-glow);border:1px solid var(--accent-33);font-size:12px;line-height:1.55}
.md-note i,
.md-note svg {color:var(--accent);flex:0 0 auto;width:16px;height:16px;margin-top:1px}
.md-note strong{color:var(--accent)}
.md-empty{padding:32px}
.md-modal{max-width:28rem}
.md-danger{color:var(--danger)}

/* ═══════════════════════════════════════════════════════════════════
   ROLE BADGE — har jagah ek hi shakl (Core\Roles::badge())
   Rang par akela bharosa nahi: icon aur likha hua naam hamesha rehte
   hain, taaki colour-blind users aur print par bhi saaf rahe.
   ═══════════════════════════════════════════════════════════════════ */
.role-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;
  font-size:12px;font-weight:700;letter-spacing:.2px;line-height:1.3;white-space:nowrap;
  border:1px solid var(--border);background:var(--surface-alt);color:var(--text)}
.role-badge i,.role-badge svg{width:13px;height:13px;flex:0 0 auto}
.role-badge--super_admin{background:var(--danger-glow);border-color:var(--danger-33);color:var(--danger)}
.role-badge--service_manager{background:var(--cyan-glow);border-color:var(--cyan-33);color:var(--cyan)}
.role-badge--tenant_admin{background:var(--primary-glow);border-color:var(--primary-33);color:var(--primary)}
.role-badge--technician{background:var(--accent-glow);border-color:var(--accent-33);color:var(--accent)}
.role-badge--dealer{background:var(--warning-glow, var(--surface-alt));border-color:var(--border);color:var(--warning)}
.role-badge--customer{background:var(--surface-alt);border-color:var(--border);color:var(--text-muted)}
.role-badge--unknown{background:var(--danger-glow);border-color:var(--danger-33);color:var(--danger)}
.role-badge--lg{font-size:13px;padding:6px 14px}
.role-badge--sm{font-size:11px;padding:2px 8px;gap:4px}
.role-badge--sm i,.role-badge--sm svg{width:11px;height:11px}

/* ═══════════════════════════════════════════════════════════════════
   MY PROFILE
   ═══════════════════════════════════════════════════════════════════ */
.pf-grid{display:grid;grid-template-columns:320px minmax(0,1fr);gap:24px;align-items:start}

/* ── Identity card ── */
.pf-id{padding:0;overflow:hidden}
.pf-id-top{padding:28px 24px 20px;text-align:center;position:relative;
  background:linear-gradient(180deg,var(--surface-alt),transparent)}
.pf-avatar-wrap{position:relative;width:104px;height:104px;margin:0 auto 14px}
.pf-avatar,.pf-avatar-fallback{width:104px;height:104px;border-radius:50%;display:block}
.pf-avatar{object-fit:cover;border:3px solid var(--surface)}
.pf-avatar-fallback{background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:38px;font-weight:800;letter-spacing:1px;border:3px solid var(--surface)}
.pf-status-dot{position:absolute;right:6px;bottom:6px;width:20px;height:20px;border-radius:50%;
  border:3px solid var(--surface);background:var(--text-dim)}
.pf-status-dot--active{background:var(--accent)}
.pf-status-dot--inactive{background:var(--danger)}
.pf-name{font-size:19px;font-weight:800;line-height:1.25;margin-bottom:6px;word-break:break-word}
.pf-email{font-size:12.5px;color:var(--text-muted);margin-bottom:14px;word-break:break-all}
.pf-badges{display:flex;flex-direction:column;align-items:center;gap:8px}
.pf-tenant{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--text-muted);max-width:100%}
.pf-tenant i,.pf-tenant svg{width:13px;height:13px;flex:0 0 auto}
.pf-tenant span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-status{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700}
.pf-status i,.pf-status svg{width:11px;height:11px}
.pf-status--active{color:var(--accent)}
.pf-status--inactive{color:var(--danger)}

.pf-stats{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--border)}
.pf-stats--one{grid-template-columns:1fr}
.pf-stat{padding:14px 10px;text-align:center}
.pf-stat + .pf-stat{border-left:1px solid var(--border)}
.pf-stat-value{font-size:17px;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums}
.pf-stat-label{font-size:10.5px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px;margin-top:2px}

/* ── Right column ── */
.pf-card{padding:20px;margin-bottom:20px}
.pf-card-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:16px}
.pf-card-head i,.pf-card-head svg{width:17px;height:17px;color:var(--text-muted);margin-top:2px;flex:0 0 auto}
.pf-card-title{font-size:15px;font-weight:700;line-height:1.3}
.pf-card-sub{font-size:12px;color:var(--text-muted);margin-top:2px;line-height:1.5}
.pf-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pf-field--full{grid-column:1/-1}
.pf-hint{font-size:11px;color:var(--text-muted);margin-top:4px}
.pf-pwd{position:relative}
.pf-pwd-toggle{position:absolute;right:8px;top:29px;padding:4px;cursor:pointer;background:none;border:none;
  color:var(--text-muted);line-height:0}
.pf-pwd-toggle:hover{color:var(--text)}
.pf-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.pf-avatar-preview{margin-top:8px;display:none}
.pf-avatar-preview img{width:56px;height:56px;border-radius:50%;object-fit:cover;border:2px solid var(--accent)}

@media(max-width:900px){
  .pf-grid{grid-template-columns:1fr}
  .pf-fields{grid-template-columns:1fr}
}


/* Profile → Security card */
.pf-sec{margin:0 0 16px;display:flex;flex-direction:column;gap:2px}
.pf-sec-row{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;padding:7px 0;
  border-bottom:1px solid var(--border)}
.pf-sec-row:last-child{border-bottom:none}
.pf-sec-row dt{color:var(--text-muted);flex:0 0 auto}
.pf-sec-row dd{margin:0;text-align:right;font-weight:600;word-break:break-word}
.pf-mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px}

/* ═══════════════════════════════════════════════════════════════════
   VEHICLE DETAIL — installed units
   Ek gaadi par ek se zyada unit lag sakti hai; pehle sirf ek dikhti thi.
   ═══════════════════════════════════════════════════════════════════ */
.veh-units-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.veh-units-title{font-size:13px;display:flex;align-items:center;gap:6px;margin:0}
.veh-units-title i,.veh-units-title svg{width:15px;height:15px;color:var(--cyan)}
.veh-units-count{font-size:10px;font-weight:700;padding:1px 7px;border-radius:999px;
  background:var(--cyan-glow);color:var(--cyan);border:1px solid var(--cyan-33)}
.veh-units-empty{text-align:center;padding:16px 0;color:var(--text-dim);font-size:11px}
.veh-units-empty i,.veh-units-empty svg{width:24px;height:24px;opacity:.3;display:block;margin:0 auto 6px}

.veh-unit{border:1px solid var(--border);border-radius:var(--radius-md);padding:11px 12px;margin-bottom:10px}
.veh-unit:last-child{margin-bottom:0}
.veh-unit-top{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.veh-unit-tag{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;
  padding:2px 8px;border-radius:999px;background:var(--surface-alt);color:var(--text-muted);border:1px solid var(--border)}
/* Har unit ka apna warranty badge — do units ki warranty alag hoti hai */
.veh-unit-warranty{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:600}
.veh-unit-warranty i,
.veh-unit-warranty svg {width:12px;height:12px}
.veh-unit-remove{margin-left:auto;display:inline-flex}
.veh-unit-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;font-size:12px}
.veh-unit-grid > div > span{color:var(--text-dim);font-size:10px;display:block;margin-bottom:2px}
.veh-unit-serial{display:flex;align-items:center;gap:3px}
.veh-unit-serial a{font-family:var(--font-mono);color:var(--cyan);text-decoration:none;font-weight:600;font-size:11px}
@media(max-width:520px){.veh-unit-grid{grid-template-columns:1fr}}

/* Unit jo abhi Unit Model Master se judi nahi — report me uski qatar aage
   chal kar bat sakti hai (doosra hijja = doosri qatar). Nishaan lagana zaroori
   hai, warna ginti sahi lagti hai aur hoti nahi. */
.unit-unlinked {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 20px;
  background: var(--warning-glow);
  border: 1px solid var(--warning-33);
  color: var(--warning);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  vertical-align: 1px;
}
.unit-unlinked i,
.unit-unlinked svg { width: 10px; height: 10px; }

/* ── Auto-sync ki sehat (Super Admin → Migration) ──
   Rang ke saath LAFZ bhi hain, kyunki sirf rang par bharosa karna un
   logon ke liye bekaar hai jinhe rang ka farq nahi dikhta. */
.sync-health{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;
  padding:10px 14px;border:1px solid var(--border);border-radius:10px;
  background:var(--surface-alt);font-size:13px;color:var(--text-muted)}
.sync-health__dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;background:var(--text-dim)}
.sync-health__dot--ok{background:var(--accent)}
.sync-health__dot--run{background:var(--primary);animation:sync-pulse 1.4s ease-in-out infinite}
.sync-health__dot--bad{background:var(--danger)}
.sync-health__dot--off{background:var(--text-dim)}
@keyframes sync-pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion: reduce){.sync-health__dot--run{animation:none}}

/* ── Cron ki sehat (Super Admin → System Health) ──
   Rang ke saath LAFZ bhi hain — sirf rang par bharosa un logon ke liye
   bekaar hai jinhe rang ka farq nahi dikhta. */
.health-cron{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;
  border:1px solid var(--border);border-left-width:4px;border-radius:12px;
  background:var(--surface)}
.health-cron__dot{width:10px;height:10px;border-radius:50%;margin-top:6px;flex:0 0 auto}
.health-cron__body{display:flex;flex-direction:column;gap:3px;min-width:0}
.health-cron__body strong{color:var(--text);font-size:15px}
.health-cron__body span{color:var(--text-muted);font-size:13px;line-height:1.5}
.health-cron__body code{font-family:var(--font-mono,monospace);font-size:12px;
  background:var(--surface-alt);padding:1px 6px;border-radius:4px;word-break:break-all}
.health-cron__warn{color:var(--warning)!important;font-weight:600}
.health-cron--ok{border-left-color:var(--accent)}
.health-cron--ok .health-cron__dot{background:var(--accent)}
.health-cron--stale{border-left-color:var(--danger)}
.health-cron--stale .health-cron__dot{background:var(--danger)}
.health-cron--never{border-left-color:var(--warning)}
.health-cron--never .health-cron__dot{background:var(--warning)}

.sync-cron-hint{margin-top:10px;padding:12px 14px;border:1px dashed var(--border-light);
  border-radius:10px;background:var(--surface-alt);font-size:13px;color:var(--text-muted)}
.sync-cron-hint code{display:block;margin-top:6px;padding:8px 10px;border-radius:6px;
  background:var(--surface);color:var(--text);font-family:var(--font-mono,monospace);
  font-size:12px;word-break:break-all;user-select:all}

/* ── Password ka khaana: aankh + mazbooti ka meter ──
   Rang ke SAATH hamesha lafz bhi hote hain ("Kamzor", "Mazboot") —
   sirf rang un logon ke liye bekaar hai jinhe rang ka farq nahi dikhta. */
.pw-field{position:relative;display:block}
.pw-field .form-input{padding-right:44px;width:100%}
.pw-field__eye{position:absolute;top:50%;right:6px;transform:translateY(-50%);
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  border:0;background:transparent;cursor:pointer;font-size:15px;line-height:1;
  border-radius:8px;opacity:.65}
.pw-field__eye:hover{opacity:1;background:var(--surface-alt)}
.pw-field__eye:focus-visible{outline:2px solid var(--primary);outline-offset:1px;opacity:1}

.pw-meter{margin-top:8px}
.pw-meter__track{height:5px;border-radius:4px;background:var(--border);overflow:hidden}
.pw-meter__fill{height:100%;width:0;border-radius:4px;transition:width .18s ease,background .18s ease;background:var(--danger)}
.pw-meter__text{margin-top:5px;font-size:11px;color:var(--text-muted)}
.pw-meter[data-score="0"] .pw-meter__fill,
.pw-meter[data-score="1"] .pw-meter__fill{background:var(--danger)}
.pw-meter[data-score="2"] .pw-meter__fill{background:var(--warning)}
.pw-meter[data-score="3"] .pw-meter__fill{background:var(--primary)}
.pw-meter[data-score="4"] .pw-meter__fill{background:var(--accent)}
@media (prefers-reduced-motion: reduce){.pw-meter__fill{transition:none}}

/* ── Security → Bina role ke users ────────────────────────────────
   Pehle sirf ginti dikhti thi ("Role assign nahi = 4") — na naam, na hal.
   Us ginti ne ek asli kharabi chhupa rakhi thi: install kai baar chalne se
   bane duplicate Super Admin. Yahan duplicate rows alag rang me aati hain
   taake ginti dekh kar sochna na pade ke ye theek hai ya nahi. */
.sec-roleless { margin-top: 12px; }

.sec-roleless__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.sec-roleless__hint {
    margin: 4px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-muted);
    max-width: 68ch;
}

.sec-roleless__warn {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 12px;
    font-size: 13px;
    line-height: 1.55;
    border: 1px solid var(--danger-33);
    border-radius: 10px;
    background: var(--danger-20);
    color: var(--text);
}

.sec-roleless__warn i,
.sec-roleless__warn svg { flex: 0 0 auto; color: var(--danger); }
.sec-roleless__warn code {
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--surface-alt);
    font-size: 12px;
}

.sec-roleless__email {
    margin-top: 2px;
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* Duplicate row — halka nishaan, chikh nahi */
.sec-roleless__dup > td { background: var(--danger-20); }

.sec-roleless__form {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.sec-roleless__select {
    width: auto;
    min-width: 150px;
    padding: 6px 10px;
    font-size: 12px;
    border-radius: 8px;
}

.sec-roleless__na { font-size: 12px; color: var(--text-muted); }

@media (max-width: 640px) {
    .sec-roleless__form { flex-direction: column; align-items: stretch; }
    .sec-roleless__select { min-width: 0; width: 100%; }
}

/* ══════════════════════════════════════════════════════════════
   Unit lifecycle ke liye alag rang
   ══════════════════════════════════════════════════════════════

   Badge me pehle sirf 6 rang the (green, blue, amber, red, purple,
   cyan) aur unit ke 11 lifecycle status unhi me baant diye gaye the.
   Nateeja: `in_stock`, `issued` aur `transferred` teeno BILKUL EK
   JAISE cyan dikhte the — aur `in_service`, `returned`,
   `warranty_claim` teeno ek jaise amber.

   Ek hi list me jo cheezein saath dikhti hain, unka rang alag hona
   chahiye — warna rang batata kuch nahi, sirf sajawat reh jata hai.

   Ye teen naye rang un hue par hain jo pehle se istemal nahi ho rahe:
   pink (330°), orange (25°), slate (kam saturation).
   Dono theme me padhe jate hain, isliye value seedhi likhi hai. */

.badge--pink {
  background: rgba(236, 72, 153, 0.12);
  color: #ec4899;
  border: 1px solid rgba(236, 72, 153, 0.25);
}
.badge--pink .badge-dot { background: #ec4899; }

.badge--orange {
  background: rgba(249, 115, 22, 0.12);
  color: #f97316;
  border: 1px solid rgba(249, 115, 22, 0.25);
}
.badge--orange .badge-dot { background: #f97316; }

.badge--slate {
  background: rgba(100, 116, 139, 0.14);
  color: #64748b;
  border: 1px solid rgba(100, 116, 139, 0.28);
}
.badge--slate .badge-dot { background: #64748b; }

/* Indigo — blue aur purple ke beech ka hue.
   `transferred` ke liye: wo na "stock me" hai na "laga hua", beech ki
   halat hai — aur uska rang bhi beech ka hona chahiye. */
.badge--indigo {
  background: rgba(99, 102, 241, 0.12);
  color: #6366f1;
  border: 1px solid rgba(99, 102, 241, 0.25);
}
.badge--indigo .badge-dot { background: #6366f1; }

/* DC ke "Aage kya hua" khaane ka chhota dhaancha.
   Tick + do line — pehli line gaadi, doosri kiske liye aur kab. */
.dc-after { display: flex; gap: .5rem; align-items: flex-start; }
.dc-after__tick { color: var(--accent); display: flex; flex-shrink: 0; margin-top: .1rem; }
.dc-after__tick i,
.dc-after__tick svg { width: 15px; height: 15px; }
.dc-after__line { font-weight: 500; line-height: 1.3; }
.dc-after__sub { font-size: .78rem; color: var(--text-muted); line-height: 1.5; }

/* Plan form: bade module ke andar ke chhote module.
   Baayin taraf ki lakeer batati hai ke ye uske andar hain — band karne par
   bhi wo rishta nazar aata rehna chahiye. */
.module-group { display: flex; flex-direction: column; gap: 6px; }
.module-children {
  display: flex; flex-direction: column; gap: 4px;
  margin-left: 14px; padding-left: 10px;
  border-left: 2px solid var(--border);
}
.module-checkbox--child { font-size: .82rem; opacity: .92; }
.module-checkbox--child i,
.module-checkbox--child svg { width: 13px; height: 13px; }
.module-status-item--child { margin-left: 16px; font-size: .85rem; }

/* DC par status haath se badalne wali patti — ek hi line me sab. */
.dc-status-form {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 8px 2px;
}
.form-input--sm { padding: 5px 9px; font-size: .82rem; height: auto; }

/* DC par dealer ka haal — units uske account me pahunchi ya intezaar me. */
.dc-dealer {
  display: flex; gap: .65rem; align-items: flex-start;
  padding: 12px 14px; margin-bottom: 14px;
  border-radius: 8px; font-size: .88rem; line-height: 1.5;
}
.dc-dealer i,
.dc-dealer svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: .12rem; }
.dc-dealer--ok   { background: rgba(6,214,160,.10); border: 1px solid rgba(6,214,160,.25); }
.dc-dealer--ok i,
.dc-dealer--ok svg { color: var(--accent); }
/* Intezaar galti nahi hai — isliye amber, red nahi. */
.dc-dealer--wait   { background: rgba(245,158,11,.10); border: 1px solid rgba(245,158,11,.25); }
.dc-dealer--wait i,
.dc-dealer--wait svg { color: var(--warning); }

/* DC par installation ke khaane — status patti ke andar hi. */
.dc-inst { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dc-inst[hidden] { display: none; }

/* ══ Party: likh kar dhoondhne wala khaana ══
   Dropdown ki jagah. List input ke neeche tairti hai, isliye `relative`. */
.pty { position: relative; }
.pty-list {
  position: absolute; z-index: 40; left: 0; right: 0; top: 100%;
  margin-top: 4px; max-height: 300px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.pty-list[hidden] { display: none; }

.pty-row, .pty-add {
  display: block; width: 100%; text-align: left;
  padding: 9px 12px; border: 0; background: none; cursor: pointer;
  font: inherit; color: var(--text); text-decoration: none;
  border-bottom: 1px solid var(--border);
}
.pty-row:last-child { border-bottom: 0; }
.pty-row:hover, .pty-add:hover { background: var(--surface-alt); }

.pty-name { font-weight: 500; }
.pty-sub  { display: block; font-size: .78rem; color: var(--text-muted); margin-top: 1px; }
/* Jo baat chunne se PEHLE pata honi chahiye — jaise "account khula nahi". */
.pty-meta { display: block; font-size: .74rem; color: var(--warning); margin-top: 1px; }

.pty-none { padding: 12px; font-size: .85rem; color: var(--text-muted); }
.pty-add  { color: var(--primary); font-weight: 500; }
.pty-add i,
.pty-add svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; }

/* Chuni hui party — input ki jagah, taaki saaf dikhe ke faisla ho chuka hai */
.pty-chosen {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface-alt); font-weight: 500;
}
.pty-chosen[hidden] { display: none; }
.pty-clear {
  margin-left: auto; border: 0; background: none; cursor: pointer;
  color: var(--text-muted); display: flex; padding: 2px;
}
.pty-clear i,
.pty-clear svg { width: 15px; height: 15px; }

/* ══ Dealer ke account ki request ══ */
.dreq {
  border: 1px solid rgba(59,130,246,.28); background: rgba(59,130,246,.05);
  border-radius: 10px; padding: 14px; margin-top: 4px;
}
.dreq[hidden] { display: none; }
.dreq-head { display: flex; gap: .6rem; align-items: flex-start; margin-bottom: 12px; }
.dreq-head i,
.dreq-head svg { width: 17px; height: 17px; color: var(--primary); flex-shrink: 0; margin-top: .15rem; }
.dreq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dreq-act { display: flex; gap: 8px; margin-top: 12px; }
@media (max-width: 640px) { .dreq-grid { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════════
   DISCARD CONFIRMATION
   ═══════════════════════════════════════════════════════════════

   Ye wo dialog hai jo bhare hue form ko band karne se pehle aata hai.

   Iski apni parat (z-index) modal se upar hai, kyunki ye modal ke UPAR
   khulta hai — aur usi modal ke baare me sawaal kar raha hota hai.

   `window.confirm()` ki jagah isliye, ke wo browser ka apna daba hua
   dabba hai: na uska lehja hamara, na uske button ka naam. Yahan button
   par wahi likha hai jo dabane par hota hai — "Discard changes" ya
   "Keep editing" — taake padhe bagair bhi sahi haath uthe.
   ═══════════════════════════════════════════════════════════════ */

.discard-ask {
  position: fixed;
  inset: 0;
  z-index: 400;              /* modal (200) ke upar */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

.discard-ask.active {
  opacity: 1;
  pointer-events: auto;
}

.discard-ask__box {
  width: 100%;
  max-width: 420px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl, 16px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  padding: 26px 26px 22px;
  transform: translateY(8px) scale(0.98);
  transition: transform 0.18s ease;
}

.discard-ask.active .discard-ask__box {
  transform: none;
}

/* Nishan aur unwaan ek qatar me — nazar seedha maslay par padti hai. */
.discard-ask__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.discard-ask__icon {
  flex: none;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--warning-glow, rgba(245, 158, 11, 0.12));
  color: var(--warning, #f59e0b);
}

.discard-ask__icon svg { width: 19px; height: 19px; }

.discard-ask__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--text);
}

.discard-ask__body {
  margin: 0 0 20px;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text-muted);
}

/*
 * Bachane wala button pehle aur numaya hai.
 *
 * Ghalti se band karna hi asal masla tha, isliye aasan raasta wahi hona
 * chahiye jo kaam bachaye. "Discard changes" hai to sahi, par khamosh —
 * jo sach me girana chahta hai wo dhoondh hi lega.
 */
.discard-ask__actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.discard-ask__btn {
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: var(--radius-md, 10px);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.discard-ask__btn:focus-visible {
  outline: 2px solid var(--primary, #3b82f6);
  outline-offset: 2px;
}

.discard-ask__btn--keep {
  background: var(--primary, #3b82f6);
  color: #fff;
}

.discard-ask__btn--keep:hover { filter: brightness(1.08); }

.discard-ask__btn--discard {
  background: transparent;
  border-color: var(--border-light, #2a3752);
  color: var(--text-muted);
}

.discard-ask__btn--discard:hover {
  border-color: var(--danger, #ef4444);
  color: var(--danger, #ef4444);
  background: var(--danger-glow, rgba(239, 68, 68, 0.1));
}

@media (max-width: 420px) {
  .discard-ask__actions { flex-direction: column-reverse; }
  .discard-ask__btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .discard-ask,
  .discard-ask__box { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════
   MODAL KHULA HO TO PEECHHE KA PAGE THEHRA RAHE
   ═══════════════════════════════════════════════════════════════

   Class se, inline style se nahi.

   Wajah: `closeMobileSidebar()` har ESC par `document.body.style.overflow`
   ko khali kar deta hai. Agar hum bhi wahi inline khaana istemal karte to
   ek ESC — jo modal band karne ke liye tha — peechhe ka page dobara khol
   deta, chahe modal khula hi rehta.

   Class aur inline style ek doosre se nahi takrate.
   ═══════════════════════════════════════════════════════════════ */

body.modal-open {
  overflow: hidden;
}

/* ── Chhoti screen par footer ke button ──
 *
 * Footer `flex-wrap: wrap` par hai, par uske andar ke chhote group (jaise
 * "Cancel + Open in Default App") apne aap nahi lipatte — wo ek hi qatar me
 * chaudai se bahar chale jate the aur aadhe button nazar hi nahi aate the.
 *
 * Chhoti screen par sab neeche-upar, aur poori chaudai par. */
@media (max-width: 640px) {
  .modal-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .modal-footer > div {
    display: flex;
    gap: 8px;
  }
  .modal-footer > div > .btn,
  .modal-footer > .btn {
    flex: 1 1 auto;
    justify-content: center;
  }
  /* Dropdown wala jodi-button toota na rahe */
  .modal-footer .btn-group {
    display: flex;
    flex: 1 1 auto;
  }
  .modal-footer .btn-group .btn-main {
    flex: 1 1 auto;
    justify-content: center;
  }
}
/* Unit page par: is unit ke kuch reminders apni tareekh se alag number par
   hain — neeche timeline me wo galat qataar me baithenge. */
.svc-no-off-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
  padding: 10px 14px;
  border: 1px solid var(--warning-33);
  border-left: 3px solid var(--warning);
  border-radius: var(--radius-sm);
  background: var(--warning-glow);
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}
.svc-no-off-note strong { color: var(--text); }
.svc-no-off-note svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--warning);
}
.svc-no-off-note ul { margin: 4px 0 0; padding-left: 18px; }
.svc-no-off-note li { margin-top: 2px; }