/* =====================================================================
   Curetino HRMS — ui-phone.css                       (28 Aug 2026)
   ---------------------------------------------------------------------
   EMPLOYEE KE PHONE WALI SCREEN. Subhag: "han krdo."

   YE OFFICE WALE PAGE PAR NAHI LAGTI. Wo header.php uthate hain aur
   unka roop ui.css + ui-2026.css se aata hai. Employee ki screen
   apna HTML khud likhti hai (punch, my_home, my_payslip, my_raise,
   my_incentive, signin, join, register) - unka koi sanjha roop tha
   hi nahi, har page apni marzi se likha gaya tha.

   UNKA APNA ROOP PEHLE SE HAI AUR WO SAHI HAI: poora hara background,
   andar safed card. Ye "app" jaisa lagta hai aur office ke system se
   alag dikhta hai - jaan boojh kar. Main use badal nahi raha, sirf
   sabko ek jaisa aur saaf kar raha hun.

   HAATH HALKA RAKHA HAI. punch.php se roz 184 log hazri lagate hain.
   Wahan camera, GPS aur slider hai - uska dhaancha maine chhua hi
   nahi. Sirf wo cheezein badli hain jo har phone par sudhar deti
   hain: ungli ka naap, khane ka naap, notch ki jagah, aur ank.

   ROLLBACK: har page se iski ek <link> line hata do.
   ===================================================================== */

:root{
  --ph-brand:   #0d5c46;
  --ph-brand-2: #0a4b39;
  --ph-ink:     #14201b;
  --ph-body:    #46534c;
  --ph-muted:   #8a968f;
  --ph-line:    #e6ebe8;
  --ph-paper:   #ffffff;

  --ph-ok-bg:   #e7f6ee;  --ph-ok:   #0f6d45;
  --ph-warn-bg: #fdf3e2;  --ph-warn: #8a6212;
  --ph-bad-bg:  #fdecec;  --ph-bad:  #a32c2c;

  --ph-r:    14px;
  --ph-r-lg: 18px;
  --ph-sh:   0 1px 2px rgba(0,0,0,.05), 0 6px 18px rgba(0,0,0,.07);
  --ph-sh-up:0 14px 34px rgba(0,0,0,.22);
}

/* ---------------------------------------------------------------------
   NOTCH AUR HOME-BAR
   ---------------------------------------------------------------------
   Bina iske iPhone par neeche ka button home-bar ke peeche chala jata
   hai aur banda use dabata rehta hai. Ye har employee page par lagta
   hai kyunki sab phone par hi khulte hain.
   ------------------------------------------------------------------- */
body{
  padding-left:calc(env(safe-area-inset-left)  + 0px);
  padding-right:calc(env(safe-area-inset-right) + 0px);
  padding-bottom:calc(env(safe-area-inset-bottom) + 18px);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;

  /* Page sirf upar-neeche chale - 30 Aug. Wahi wajah jo ui.css mein
     poori likhi hai: ungli tirchi jaati hai aur browser use daayein-
     baayein khisakne ki ijaazat maan leta hai. Ye employee ke saare
     page par bhi utna hi zaroori hai - wo to poora din phone par hi
     hain. */
  overflow-x: clip;
  overscroll-behavior-x: none;
}

/* ---------------------------------------------------------------------
   ANK EK HI CHAUDAI KE
   ---------------------------------------------------------------------
   Salary, incentive, ghante - sab yahin dikhte hain. Alag chaudai wale
   ank ek ke neeche ek rakhe jayein to list tedhi dikhti hai.
   ------------------------------------------------------------------- */
.v, .num, .big, .n, .m, .money, table td, table th, .bs-money{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

/* ---------------------------------------------------------------------
   UNGLI KA NAAP - 44px
   ---------------------------------------------------------------------
   Apple aur Google dono yahi kehte hain. Chhoti cheez par ungli
   baar-baar chook jati hai aur banda do-do baar dabata hai - phone par
   ye sabse zyada chubhne wali cheez hai.
   ------------------------------------------------------------------- */
button, .btn, a.btn, input[type=submit]{
  min-height:46px;
  border-radius:var(--ph-r) !important;
  font-weight:700;
}
.tile, .card a, a.tile{ min-height:56px }

/* iOS 16px se chhote khane par apne aap zoom kar deta hai aur poora
   page tedha ho jata hai. Isliye har khana 16px. */
input, select, textarea{
  font-size:16px !important;
  border-radius:var(--ph-r) !important;
}
input:focus, select:focus, textarea:focus{
  outline:none;
  border-color:var(--ph-brand) !important;
  box-shadow:0 0 0 3px rgba(13,92,70,.14) !important;
}

/* Keyboard se chalne walon ke liye - mouse/ungli par nahi dikhta */
button:focus-visible, a:focus-visible{
  outline:2px solid #fff;
  outline-offset:2px;
}

/* ---------------------------------------------------------------------
   HARE SHELL KE ANDAR SAFED CARD - sabka ek jaisa
   ---------------------------------------------------------------------
   .box  - signin, register (beech mein ek card)
   .card - my_payslip, my_raise
   .card2- my_incentive
   .tile - my_home ke link
   ------------------------------------------------------------------- */
.box{
  border-radius:var(--ph-r-lg) !important;
  box-shadow:var(--ph-sh-up) !important;
}

/* Dabne par halka sa dabta hua - phone par yahi batata hai ki click
   laga. Bina iske banda dobara dabata hai. */
.tile:active, .card:active, button:active, .btn:active{ transform:scale(.99) }

/* ---------------------------------------------------------------------
   HAAL BATANE WALI PILL
   ------------------------------------------------------------------- */
.pill.ok,   .pill-on  { background:var(--ph-ok-bg) !important;   color:var(--ph-ok) !important }
.pill.wait, .pill-warn{ background:var(--ph-warn-bg) !important; color:var(--ph-warn) !important }
.pill.bad,  .pill-bad { background:var(--ph-bad-bg) !important;  color:var(--ph-bad) !important }
.pill{ border-radius:999px !important; font-weight:700 }

/* ---------------------------------------------------------------------
   Lamba naam ya lambi list kahin bahar na nikle
   ---------------------------------------------------------------------
   Phone par ek lamba shabd poore page ko chaudai mein kheench deta hai
   aur page daayein-baayein hilne lagta hai.
   ------------------------------------------------------------------- */
html, body{ overflow-x:hidden }
.wrap, .box, .card, .card2{ max-width:100%; overflow-wrap:anywhere }

@media print{
  *{ box-shadow:none !important }
}