/*
 * Portal UI - dashboard wali zabaan har safhe par
 * ================================================
 * Supervisor ke baaqi 12 safhe (My Interns, Progress Monitoring, Projects,
 * Tasks, Task Overview, Monthly Evaluations, Attendance, Leaves, Feedback,
 * Profile Settings, Knowledge Base, Communication Center) alag alag likhe
 * hue nahi hain - sab wahi mushtarak components istemal karte hain:
 *
 *     .card  23 files    .btn  22    .form-control  17
 *     .badge 15          .table 13   .form-select   10
 *
 * Is liye har safha alag se likhne ke bajaye unhi components ko wahi shakal
 * di gayi hai jo supervisor dashboard par bani: hairline borders, navy
 * surfaces, monospace numbers, blue accent, halki harkat.
 * Ek file, saare safhe - aur jab koi naya safha banega wo bhi khud ba khud
 * isi shakal mein aayega.
 *
 * Sab kuch [data-bs-theme='dark'] ke andar hai, is liye light mode nahi
 * chhoota. Aur .content-wrapper ke andar mehdood hai - login aur
 * registration blank layout par hain, un ki apni shakal hai.
 */

:root[data-bs-theme='dark'] {
  --pu-surface: #111b2e;
  --pu-surface-2: #16233c;
  --pu-line: #22304d;
  --pu-line-soft: #1b2740;
  --pu-blue: #2f76f4;
  --pu-blue-soft: #7aa2ff;
  --pu-text: #e3ecfa;
  --pu-dim: #8ea3c4;
  --pu-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---------------- Cards ---------------- */
:root[data-bs-theme='dark'] .content-wrapper .card {
  background: var(--pu-surface) !important;
  border: 1px solid var(--pu-line) !important;
  border-radius: 16px !important;
  box-shadow: none;
}

:root[data-bs-theme='dark'] .content-wrapper .card:hover {
  border-color: #33507f !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .3);
}

:root[data-bs-theme='dark'] .content-wrapper .card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--pu-line-soft) !important;
  padding: 16px 18px;
}

:root[data-bs-theme='dark'] .content-wrapper .card-header h5,
:root[data-bs-theme='dark'] .content-wrapper .card-title {
  color: #ffffff !important;
  font-weight: 700;
  letter-spacing: -.2px;
}

:root[data-bs-theme='dark'] .content-wrapper .card-footer {
  background: transparent !important;
  border-top: 1px solid var(--pu-line-soft) !important;
}

/* ---------------- Tables ---------------- */
:root[data-bs-theme='dark'] .content-wrapper .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--pu-text);
  --bs-table-border-color: var(--pu-line-soft);
  --bs-table-hover-bg: rgba(47, 118, 244, .07);
  --bs-table-hover-color: #ffffff;
  --bs-table-striped-bg: rgba(255, 255, 255, .02);
  color: var(--pu-text);
}

/* Column headings chhote, chaure aur madham - taake data numayan rahe.
   Background OPAQUE hona zaroori hai, transparent nahi: kai safhon par ye
   header sticky hai (misal ke taur par supervisor Task Overview,
   overview.blade.php line 25 - position:sticky; top:0). Shaffaf header ke
   peechhe se rows guzarti nazar aati hain aur text ek doosre par charh jata
   hai. Rang card ke surface jaisa hai, is liye saadi tables mein farq nahi
   parta. */
:root[data-bs-theme='dark'] .content-wrapper .table > thead th {
  background: var(--pu-surface) !important;
  color: var(--pu-dim) !important;
  border-bottom: 1px solid var(--pu-line) !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .7px;
  text-transform: uppercase;
  padding-top: 13px;
  padding-bottom: 13px;
}

:root[data-bs-theme='dark'] .content-wrapper .table > tbody > tr > td {
  border-bottom: 1px solid var(--pu-line-soft) !important;
  padding-top: 13px;
  padding-bottom: 13px;
  vertical-align: middle;
}

:root[data-bs-theme='dark'] .content-wrapper .table > tbody > tr:last-child > td {
  border-bottom: none !important;
}

/* IDs aur chhoti tafseelat monospace mein - ginti nazar se mil jati hai */
:root[data-bs-theme='dark'] .content-wrapper .table td small,
:root[data-bs-theme='dark'] .content-wrapper .table td .text-muted {
  color: var(--pu-dim) !important;
  font-family: var(--pu-mono);
  font-size: 11.5px;
}

/* ---------------- Buttons ---------------- */
:root[data-bs-theme='dark'] .content-wrapper .btn {
  border-radius: 10px;
  font-weight: 600;
}

:root[data-bs-theme='dark'] .content-wrapper .btn-primary {
  background: var(--pu-blue) !important;
  border-color: var(--pu-blue) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(47, 118, 244, .25);
}

:root[data-bs-theme='dark'] .content-wrapper .btn-primary:hover {
  background: #2461d8 !important;
  border-color: #2461d8 !important;
}

:root[data-bs-theme='dark'] .content-wrapper .btn-outline-primary,
:root[data-bs-theme='dark'] .content-wrapper .btn-label-primary {
  background: rgba(47, 118, 244, .12) !important;
  border-color: rgba(47, 118, 244, .3) !important;
  color: var(--pu-blue-soft) !important;
}

:root[data-bs-theme='dark'] .content-wrapper .btn-outline-primary:hover,
:root[data-bs-theme='dark'] .content-wrapper .btn-label-primary:hover {
  background: rgba(47, 118, 244, .2) !important;
  color: #ffffff !important;
}

:root[data-bs-theme='dark'] .content-wrapper .btn-secondary,
:root[data-bs-theme='dark'] .content-wrapper .btn-label-secondary,
:root[data-bs-theme='dark'] .content-wrapper .btn-outline-secondary {
  background: rgba(255, 255, 255, .05) !important;
  border-color: var(--pu-line) !important;
  color: var(--pu-text) !important;
}

/* ---------------- Form fields ---------------- */
:root[data-bs-theme='dark'] .content-wrapper .form-control,
:root[data-bs-theme='dark'] .content-wrapper .form-select,
:root[data-bs-theme='dark'] .content-wrapper .input-group-text {
  background: var(--pu-surface-2) !important;
  border-color: var(--pu-line) !important;
  color: var(--pu-text) !important;
  border-radius: 10px;
}

:root[data-bs-theme='dark'] .content-wrapper .form-control::placeholder {
  color: #63739a !important;
}

:root[data-bs-theme='dark'] .content-wrapper .form-control:focus,
:root[data-bs-theme='dark'] .content-wrapper .form-select:focus {
  border-color: var(--pu-blue) !important;
  box-shadow: 0 0 0 .18rem rgba(47, 118, 244, .22) !important;
}

:root[data-bs-theme='dark'] .content-wrapper .form-label,
:root[data-bs-theme='dark'] .content-wrapper label {
  color: var(--pu-text) !important;
  font-weight: 600;
  font-size: 12.5px;
}

:root[data-bs-theme='dark'] .content-wrapper .form-check-input {
  background-color: var(--pu-surface-2);
  border-color: var(--pu-line);
}

:root[data-bs-theme='dark'] .content-wrapper .form-check-input:checked {
  background-color: var(--pu-blue);
  border-color: var(--pu-blue);
}

/* ---------------- Badges - pill shakal, dashboard jaisi ---------------- */
:root[data-bs-theme='dark'] .content-wrapper .badge {
  border-radius: 999px;
  font-weight: 600;
  font-size: 11px;
  padding: .38em .8em;
  border: 1px solid transparent;
}

:root[data-bs-theme='dark'] .content-wrapper .badge.bg-label-success,
:root[data-bs-theme='dark'] .content-wrapper .badge.bg-success {
  background: rgba(53, 208, 127, .13) !important;
  color: #6ee7a8 !important;
  border-color: rgba(53, 208, 127, .28);
}

:root[data-bs-theme='dark'] .content-wrapper .badge.bg-label-danger,
:root[data-bs-theme='dark'] .content-wrapper .badge.bg-danger {
  background: rgba(255, 90, 90, .13) !important;
  color: #ff9d9d !important;
  border-color: rgba(255, 90, 90, .28);
}

:root[data-bs-theme='dark'] .content-wrapper .badge.bg-label-warning,
:root[data-bs-theme='dark'] .content-wrapper .badge.bg-warning {
  background: rgba(240, 180, 41, .13) !important;
  color: #f6cd6b !important;
  border-color: rgba(240, 180, 41, .28);
}

:root[data-bs-theme='dark'] .content-wrapper .badge.bg-label-info,
:root[data-bs-theme='dark'] .content-wrapper .badge.bg-info {
  background: rgba(79, 209, 224, .13) !important;
  color: #9fe9f2 !important;
  border-color: rgba(79, 209, 224, .28);
}

:root[data-bs-theme='dark'] .content-wrapper .badge.bg-label-primary,
:root[data-bs-theme='dark'] .content-wrapper .badge.bg-primary {
  background: rgba(47, 118, 244, .14) !important;
  color: var(--pu-blue-soft) !important;
  border-color: rgba(47, 118, 244, .3);
}

/* ---------------- Progress - patli, halki chamak ke saath ---------------- */
:root[data-bs-theme='dark'] .content-wrapper .progress {
  background: rgba(255, 255, 255, .06) !important;
  border-radius: 999px;
  height: 6px;
}

:root[data-bs-theme='dark'] .content-wrapper .progress-bar {
  border-radius: 999px;
  background: linear-gradient(90deg, #2f76f4, #7aa2ff) !important;
  box-shadow: 0 0 10px rgba(47, 118, 244, .4);
}

:root[data-bs-theme='dark'] .content-wrapper .progress-bar.bg-success {
  background: linear-gradient(90deg, #2fa36a, #35d07f) !important;
  box-shadow: 0 0 10px rgba(53, 208, 127, .4);
}

:root[data-bs-theme='dark'] .content-wrapper .progress-bar.bg-warning {
  background: linear-gradient(90deg, #c98f10, #f0b429) !important;
  box-shadow: 0 0 10px rgba(240, 180, 41, .35);
}

:root[data-bs-theme='dark'] .content-wrapper .progress-bar.bg-danger {
  background: linear-gradient(90deg, #d24b4b, #ff7a7a) !important;
  box-shadow: 0 0 10px rgba(255, 122, 122, .35);
}

/* ---------------- Modal / dropdown / pagination / tabs ---------------- */
:root[data-bs-theme='dark'] .modal-content {
  background: var(--pu-surface) !important;
  border: 1px solid var(--pu-line) !important;
  border-radius: 16px;
}

:root[data-bs-theme='dark'] .modal-header,
:root[data-bs-theme='dark'] .modal-footer {
  border-color: var(--pu-line-soft) !important;
}

:root[data-bs-theme='dark'] .modal-title { color: #ffffff !important; }

:root[data-bs-theme='dark'] .dropdown-menu {
  background: var(--pu-surface) !important;
  border: 1px solid var(--pu-line) !important;
  border-radius: 12px;
}

:root[data-bs-theme='dark'] .dropdown-item { color: var(--pu-text) !important; }

:root[data-bs-theme='dark'] .dropdown-item:hover {
  background: rgba(47, 118, 244, .12) !important;
  color: #ffffff !important;
}

:root[data-bs-theme='dark'] .content-wrapper .page-link {
  background: var(--pu-surface-2) !important;
  border-color: var(--pu-line) !important;
  color: var(--pu-text) !important;
  border-radius: 9px;
  margin: 0 2px;
}

:root[data-bs-theme='dark'] .content-wrapper .page-item.active .page-link {
  background: var(--pu-blue) !important;
  border-color: var(--pu-blue) !important;
  color: #ffffff !important;
}

:root[data-bs-theme='dark'] .content-wrapper .nav-tabs,
:root[data-bs-theme='dark'] .content-wrapper .nav-pills {
  border-bottom-color: var(--pu-line) !important;
}

:root[data-bs-theme='dark'] .content-wrapper .nav-tabs .nav-link,
:root[data-bs-theme='dark'] .content-wrapper .nav-pills .nav-link {
  color: var(--pu-dim) !important;
  font-weight: 600;
}

:root[data-bs-theme='dark'] .content-wrapper .nav-tabs .nav-link.active {
  color: #ffffff !important;
  background: transparent !important;
  border-color: transparent transparent var(--pu-blue) !important;
}

:root[data-bs-theme='dark'] .content-wrapper .nav-pills .nav-link.active {
  background: var(--pu-blue) !important;
  color: #ffffff !important;
}

/* ---------------- Headings aur bare numbers ---------------- */
:root[data-bs-theme='dark'] .content-wrapper h1,
:root[data-bs-theme='dark'] .content-wrapper h2,
:root[data-bs-theme='dark'] .content-wrapper h3,
:root[data-bs-theme='dark'] .content-wrapper h4,
:root[data-bs-theme='dark'] .content-wrapper h5,
:root[data-bs-theme='dark'] .content-wrapper h6 {
  color: #ffffff;
}

:root[data-bs-theme='dark'] .content-wrapper .text-muted {
  color: var(--pu-dim) !important;
}

/* Bare aankron ko monospace - dashboard ki tarah, taake wo data lagen */
:root[data-bs-theme='dark'] .content-wrapper .display-1,
:root[data-bs-theme='dark'] .content-wrapper .display-2,
:root[data-bs-theme='dark'] .content-wrapper .display-3,
:root[data-bs-theme='dark'] .content-wrapper .display-4,
:root[data-bs-theme='dark'] .content-wrapper .fs-1,
:root[data-bs-theme='dark'] .content-wrapper .fs-2 {
  font-family: var(--pu-mono);
  letter-spacing: -1px;
}

/* ---------------- Sticky elements ki hifazat ----------------
 * Cards par jo entrance animation lagi hai wo `transform` istemal karti hai,
 * aur transform wala element apna stacking context bana leta hai - is liye
 * scroll par cards sticky navbar ke UPAR paint hone lag jate thay.
 *
 * Do taraf se band kiya gaya hai: animation ab `transform: none` par khatam
 * hoti hai (stacking context reh hi nahi jata), aur navbar ko saaf z-index
 * de diya gaya hai taake wo har surat mein content ke upar rahe.
 */
:root[data-bs-theme='dark'] .layout-navbar {
  z-index: 1080;
}

/* Sticky table headers - jahan bhi hon - opaque rahen */
:root[data-bs-theme='dark'] .content-wrapper thead th[style*="sticky"],
:root[data-bs-theme='dark'] .content-wrapper .to-scroll table thead th {
  background: var(--pu-surface) !important;
  z-index: 3;
}

/* ============================================================
   Intern module — safed theme ke variables ko dark karna
   ============================================================
   `public/intern-registration-css/intern-dashboard.css` intern ke nau safhon
   par load hoti hai aur us mein ye likha hai:

       body { background: var(--tlt-bg) !important; color: var(--tlt-text); }

   Dono qeematein safed safhe ke liye hain (--tlt-bg #f5f7fb, --tlt-text
   #1e293b). `!important` ki wajah se wo ezitech-dark.css ke body rule ko
   hara deti thi — chahe us ki specificity kitni bhi ziyada ho — is liye
   intern dashboard ka background safed rehta tha aur us par kaala text.

   Markup mein bhi ye variables 13 jagah seedha istemal hote hain
   (pages/intern/dashboard.blade.php mein "Level: Advanced" waghera), aur wo
   navy card par kaale hone ki wajah se bilkul nazar nahi aate the.

   Is liye `!important` se larne ke bajaye VARIABLE hi badal di gayi hai: wahi
   purana rule ab khud navy paint karta hai, aur teraah ki teraah jagah ka
   text ek saath theek ho jata hai.

   Ye file sab se aakhir mein load hoti hai aur `:root[data-bs-theme='dark']`
   ki specificity `:root` se ziyada hai, is liye ye override lagta hai.
   Light theme par wapas jayein to kuch nahi badalta — sab is scope ke andar hai.
   ============================================================ */
:root[data-bs-theme='dark'] {
  --tlt-bg: #0b1220;
  --tlt-text: #e3ecfa;
  --tlt-muted: #8ea3c4;
  --tlt-border: #22304d;
  --tlt-primary: #2f76f4;
  --tlt-primary-dark: #1d5bd0;
}

/* Safha apni hi style block mein `.content-wrapper { background: #ffffff
   !important }` rakhta hai. ezitech-dark us ko transparent karti hai, magar
   yahan dobara likhna zaroori hai kyunki wo rule sirf isi safhe par hai aur
   kal koi aur safha bhi wahi kar sakta hai. */
:root[data-bs-theme='dark'] .content-wrapper {
  background-color: transparent !important;
}

/* ---------- Welcome card ko supervisor/admin wali shakal ----------
   Wahi hero band jo supervisor dashboard aur LMS par hai: halki si roshni
   aur mehin grid. `overflow: hidden` aur `position: relative` safhe ki apni
   style mein pehle se hain, is liye ::after mehfooz hai. */
:root[data-bs-theme='dark'] .dash-welcome {
  background:
    radial-gradient(700px 320px at 8% -40%, rgba(47, 118, 244, .22), transparent 62%),
    radial-gradient(480px 280px at 96% 140%, rgba(122, 162, 255, .12), transparent 62%),
    #111b2e !important;
  border: 1px solid #22304d !important;
  box-shadow: none !important;
}
:root[data-bs-theme='dark'] .dash-welcome::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(122, 162, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(122, 162, 255, .045) 1px, transparent 1px);
  background-size: 44px 44px;
}
:root[data-bs-theme='dark'] .dash-welcome > * {
  position: relative;
  z-index: 1;
}

/* Progress ki patti aur us ke neeche wali satrein */
:root[data-bs-theme='dark'] .pp-meta,
:root[data-bs-theme='dark'] .pp-meta span {
  color: var(--tlt-muted) !important;
}
:root[data-bs-theme='dark'] .pp-meta strong {
  color: #e3ecfa !important;
}

/* ------------------------------------------------------------
   Intern safhon ka background — aathon raston ko ek jagah rokna
   ------------------------------------------------------------
   Pichhli tabdeeli mein sirf `--tlt-bg` badli gayi thi, magar
   intern-dashboard.css body ko AATH alag jagah se halka rang deti hai:

     line   13  background: var(--tlt-bg) !important     <- wo theek ho gaya tha
     line 1048  background: var(--cr-bg) !important
     line 2568  background: var(--pfl-bg) !important
     line 2023, 3306, 3831, 4310, 4831
                background: #f5f7fb !important           <- rang seedha likha hua

   Aakhri paanch mein rang hardcoded hai, is liye variable badalne se un par
   koi asar nahi hua — aur file mein baad mein aane ki wajah se wo jeet gaye.
   Safha isi liye safed raha, halanke pehla rule dark ho chuka tha.

   Ek ek se larne ke bajaye ek hi rule sab ko harata hai: `body` ki
   specificity (0,0,1) hai, is ki (0,2,1), aur `!important` dono taraf hai —
   is liye ye jeet-ta hai. Ye file sab se aakhir mein load hoti hai.

   Rang wahi hai jo ezitech-dark.css baqi portal ko deti hai, taake intern ka
   safha doosre roles se alag na lage.
   ------------------------------------------------------------ */
:root[data-bs-theme='dark'] body {
  background: var(--ezi-bg, #0b1220) !important;
  color: var(--tlt-text, #e3ecfa);
}

/* Ye do bhi safed safhe ke liye likhi gayi thin. Chat room aur profile ke
   safhe inhein surface ke taur par bhi istemal karte hain, is liye card wale
   navy par set ki hain, page wale par nahi. */
:root[data-bs-theme='dark'] {
  --cr-bg: #0b1220;
  --pfl-bg: #0b1220;
}

/* ------------------------------------------------------------
   Sidebar — portal ke apne menu rang par
   ------------------------------------------------------------
   `.bg-menu-theme { background: #0a2a66 !important }` do jagah likha hua hai:
   `intern-registration-css/intern-dashboard.css` mein, aur compiled Vuexy
   build (`public/build/assets/core-*.css`) mein bhi. Build baad mein load
   hoti hai, is liye wahi jeet-ti thi — aur chunke wo kisi theme ke andar
   mehdood nahi, ye royal blue HAR role ke sidebar par lagta tha: admin,
   manager, supervisor aur intern, sab par.

   Portal apna menu rang pehle se tay kar chuka hai — ezitech-dark.css mein
   `--ezi-menu: #0e1626`, jo `--bs-menu-bg` se juda hua hai. Wo qeemat kabhi
   nazar hi nahi aati thi kyunki upar wala `!important` us par charha hua tha.

   Specificity (0,3,0) banam (0,1,0), `!important` dono taraf, aur ye file sab
   se aakhir mein — is liye ab portal ki apni qeemat chalti hai.

   Dhyan rahe: ye tabdeeli HAR role ke sidebar par nazar aayegi, sirf intern
   par nahi. Yehi maqsad hai — sab ek jaise dikhne chahiyein — magar ye baat
   pata honi chahiye. Light theme par wapas jayein to purana rang khud laut
   aayega, kyunki sab kuch is scope ke andar hai.
   ------------------------------------------------------------ */
:root[data-bs-theme='dark'] #layout-menu,
:root[data-bs-theme='dark'] aside.layout-menu,
:root[data-bs-theme='dark'] .bg-menu-theme {
  background: var(--ezi-menu, #0e1626) !important;
  background-image: none !important;
  border-right: 1px solid var(--ezi-border, #1e2b45) !important;
}

/* Menu ke unwan (MY ACCOUNT, MY WORK waghera) navy par thore madham chahiyein */
:root[data-bs-theme='dark'] #layout-menu .menu-header-text {
  color: #6b7f9e !important;
}

/* ============================================================
   Manager module — us ka apna light design system
   ============================================================
   Manager ke 42 views Bootstrap ka `.card` istemal nahi karte. Un ke apne
   classes hain — `.ez-card`, `.ez-stat-card`, `.ez-pill`, `.ez-page-head` —
   aur wo `public/build/assets/core-*.css` mein define hue hain:

       .ez-card, .ez-stat-card { background:#fff; border:1px solid #eef0f4 }
       .ez-stat-card .ez-stat-label { color:#64748b }
       .ez-shell-theme .layout-navbar { background:#fff !important }

   Yani dark theme ne inhein kabhi chhua hi nahi — hamare rules `.card` par
   hain. Isi liye manager ka poora portal safed raha jab baaqi sab navy ho
   gaya. `public/build` ko rebuild nahi kiya ja sakta (is machine par koi
   build environment nahi), is liye override yahan likha hai — ye file sab
   se aakhir mein load hoti hai.

   `.ez-shell-theme` body par lagti hai manager AUR intern dono routes ke
   liye (commonMaster), is liye navbar/search wale rules intern par bhi
   nazar aayenge. Yehi maqsad hai — sab ek jaise dikhein — magar ye baat
   pata honi chahiye. Cards wale rules sirf manager par asar karenge,
   kyunke `.ez-card` sirf wahin istemal hoti hai.

   Sab kuch [data-bs-theme='dark'] ke andar hai: light theme par wapas
   jayen to purana design jyon ka tyon laut aata hai.
   ------------------------------------------------------------ */

/* ---- Cards ---- */
:root[data-bs-theme='dark'] .ez-card,
:root[data-bs-theme='dark'] .ez-stat-card {
  background: var(--pu-surface) !important;
  border: 1px solid var(--pu-line) !important;
  color: var(--pu-text);
  box-shadow: none;
}

:root[data-bs-theme='dark'] .ez-card:hover,
:root[data-bs-theme='dark'] .ez-stat-card:hover {
  border-color: #33507f !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .3);
}

/* Ginti bari aur roshan, us ka unwan madham — wahi tarteeb jo baaqi
   dashboards par hai */
:root[data-bs-theme='dark'] .ez-stat-card .ez-stat-value {
  color: var(--pu-text);
  font-family: var(--pu-mono);
}

:root[data-bs-theme='dark'] .ez-stat-card .ez-stat-label,
:root[data-bs-theme='dark'] .ez-page-head p {
  color: var(--pu-dim);
}

/* Icon ke chowkhat rangeen hi rehte hain — un ka rang un ka matlab hai */

/* ---- Pills ---- */
/* Har haalat apna rang rakhti hai (amber = intezaar, hara = ho gaya,
   laal = mana, cyan = jama karaya). Sirf text roshan kiya gaya hai:
   asal qeematein (#b45309 waghera) safed par likhi gayi thin aur navy
   par parhi hi nahi jatin. */
:root[data-bs-theme='dark'] .ez-pill.pending {
  background: rgba(245, 158, 11, .15);
  color: #fbbf24;
}

:root[data-bs-theme='dark'] .ez-pill.approved,
:root[data-bs-theme='dark'] .ez-pill.paid,
:root[data-bs-theme='dark'] .ez-pill.success {
  background: rgba(16, 185, 129, .15);
  color: #6ee7a8;
}

:root[data-bs-theme='dark'] .ez-pill.rejected,
:root[data-bs-theme='dark'] .ez-pill.overdue,
:root[data-bs-theme='dark'] .ez-pill.danger {
  background: rgba(239, 68, 68, .15);
  color: #ff8577;
}

:root[data-bs-theme='dark'] .ez-pill.submitted,
:root[data-bs-theme='dark'] .ez-pill.info {
  background: rgba(6, 182, 212, .15);
  color: #67e8f9;
}

/* Ye akela pill tha jis ka background thos safed tha, tint nahi */
:root[data-bs-theme='dark'] .ez-pill.neutral {
  background: var(--pu-surface-2);
  color: var(--pu-dim);
}

/* ---- Manager/intern shell ka navbar ---- */
/* Asal rules mein `!important` hai, is liye yahan bhi zaroori hai */
:root[data-bs-theme='dark'] .ez-shell-theme .layout-navbar {
  background: var(--pu-surface) !important;
  border: 1px solid var(--pu-line) !important;
  box-shadow: none !important;
}

:root[data-bs-theme='dark'] .ez-shell-theme .layout-navbar .nav-link.btn-icon,
:root[data-bs-theme='dark'] .ez-shell-theme .layout-navbar .navbar-nav .nav-link {
  color: var(--pu-dim) !important;
}

:root[data-bs-theme='dark'] .ez-shell-theme .navbar-search-wrapper {
  background: var(--pu-surface-2) !important;
  border-color: var(--pu-line) !important;
}

:root[data-bs-theme='dark'] .ez-shell-theme .navbar-search-wrapper:hover {
  border-color: #33507f !important;
}

:root[data-bs-theme='dark'] .ez-shell-theme .navbar-search-wrapper .search-toggler,
:root[data-bs-theme='dark'] .ez-shell-theme .navbar-search-wrapper .search-toggler #autocomplete:before {
  color: var(--pu-dim) !important;
}

/* Search ka icon ek SVG data URI hai aur us ka rang URL-encoded likha hai
   (`stroke='%2364748b'`) — isi liye `#` dhoondhne wali koi sweep use kabhi
   nahi pakarti. Poora URI dobara likhna parta hai. */
:root[data-bs-theme='dark'] .ez-shell-theme .navbar-search-wrapper .search-toggler:before {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%238ea3c4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") !important;
}

:root[data-bs-theme='dark'] .ez-shell-theme .navbar-search-wrapper .kbd-hint {
  background: var(--pu-surface) !important;
  border-color: var(--pu-line) !important;
  color: var(--pu-dim) !important;
}

/* Sidebar ka user card apna alag neela (#0047AB) istemal karta tha, jo
   portal ke #2F76F4 se mel nahi khata tha */
:root[data-bs-theme='dark'] .ez-shell-theme .sidebar-user-card {
  background: linear-gradient(140deg, rgba(47, 118, 244, .92), rgba(29, 91, 208, .88)) !important;
  border-color: rgba(255, 255, 255, .14) !important;
}

:root[data-bs-theme='dark'] .ez-shell-theme .sidebar-user-card .suc-online {
  border-color: #1d5bd0 !important;
}


/* ==========================================================================
   Sidebar ka user card
   ==========================================================================

   Ye do fixes yahan hain, kisi aur file mein nahi - aur wo wajah hi is comment
   ka maqsad hai. Ye card HAR intern safhe par banta hai (sidebar ka hissa
   hai), magar `intern-panel.css` sirf 9 safhe load karte hain aur
   `chat-layout.css` sirf chat. Main ne pehle wahan theek kiya tha aur malik
   ko wahi kharabi baar baar dikhti rahi - kyunke dashboard un dono mein se
   koi file load hi nahi karta. `portal-ui.css` har safhe par hai aur sab se
   aakhir mein load hoti hai.

   1. **`backdrop-filter` hataya.** Card PerfectScrollbar ke andar hai, jo
      transform se scroll karta hai. Us ke andar backdrop blur backdrop ko
      ghalat jagah se sample karta hai aur card ke beech mein ek seedhi lakeer
      chhor deta hai - aadha hissa neela, aadha khali. Wohi "beech se kata
      hua" card tha.
      Blur ka koi faida bhi nahi tha: card ka apna gradient 0.92 alpha ka hai,
      us ke peeche se kuch dikhta hi nahi.

   2. **Role ek satar mein.** "Digital Marketing Intern" do satron mein toot
      kar card ka dhancha bigaar deti thi - avatar aur teer ke baad yahan
      sirf ~100px bachte hain. `suc-name` par ye ehtiyat pehle se thi.

   Selector lamba hai kyunke asal rules `core-*.css` mein
   `body.ez-shell-theme ...` ke tor par hain aur wo bundle rebuild nahi ho
   sakta. Ise "saaf" kar ke chhota na kiya jaye - masla wapas aa jayega. */
body.ez-shell-theme .sidebar-user-card,
.sidebar-user-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    /* **Yehi wo "beech se kata hua" card tha.**

       Card par `position: relative` tha. Us se ye apni alag paint layer bana
       leta tha, aur PerfectScrollbar ke transform-scroll ke andar us layer ka
       background sirf aadha raster hota tha: baayan hissa neela, daayan hissa
       khali - beech mein ek seedhi lakeer.

       Ye CSS se dikhta nahi tha. DOM poochne par har nuqta card ka hi nikalta
       tha aur us ke ooper koi cheez nahi thi. Pakra aise gaya ke card ko
       laal kar ke dekha: laal sirf aadhe hisse par aaya, jab ke DOM kehta tha
       ke poora laal hai. Yani masla paint ka tha, dhanche ka nahi.

       `static` karne par lakeer khatam. Ye aazma kar tay hua - `position` ke
       ilawa sab kuch (backdrop-filter, box-shadow, overflow, translateZ,
       isolation, z-index) bari bari hata kar dekha gaya aur koi farq nahi
       para.

       `::before` band kiya gaya hai kyunke wo `absolute` tha aur card ke
       `relative` hone par hi theek jagah baithta. Us ka apna background pehle
       se `none` tha, yani wo kuch dikhata bhi nahi tha. */
    position: static !important;
}

body.ez-shell-theme .sidebar-user-card::before,
.sidebar-user-card::before {
    content: none !important;
}

/* **Card sidebar se bahar bhi nikal raha tha.**

   `menu-inner` flex hai, aur flex item par `min-width: auto` hota hai - yani
   item apne content se chhota ho hi nahi sakta. Card ka content (avatar +
   naam + role + teer) `<li>` ko 291px tak phaila deta tha, jab ke scroll area
   249px ka hai. Naapa gaya: li 291, menu-inner client 249.

   `min-width: 0` flex ka standard hal hai. Is ke baad li 249 aur card 221 -
   poora andar. */
body.ez-shell-theme #layout-menu .sidebar-user-card-wrapper,
#layout-menu .sidebar-user-card-wrapper {
    min-width: 0 !important;
    max-width: 100% !important;

    /* Fasla margin se nahi, padding se. `min-width: 0` ke baad li 249 ho
       jata hai (scroll area jitna), magar card us ke andar poori chaurai leta
       hai aur 14px ka margin usay 14px daayein bahar dhakel deta tha. Padding
       se card 221 ka reh jata hai - li ke andar, dono taraf barabar fasla.
       Naapa gaya: card left 14, width 221, right 235; li 249. */
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    box-sizing: border-box;
}

body.ez-shell-theme .sidebar-user-card .suc-info .suc-role,
.sidebar-user-card .suc-info .suc-role,
.sidebar-user-card .suc-role {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}