/* Vego · HR · hr-cards.css — 5.9.60 (owner 23 Oct 04:36–04:44, his picture of pastel cards): the "Team today" numbers
   (On duty, On leave, Leave requests, Documents expiring, Tools to confirm — js/apps/hr/team/team-today.js, unchanged)
   as big coloured cards, two in a row: the name at the top, a square at the corner (✓ when all is well, empty when
   something waits), the number large, and a picture of what it is at the bottom corner (staff → a staff member).
   Original drawings: img/hr/*.svg. Only this file styles them (projects.css keeps its plain tiles underneath). */
#view .tmtiles{display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px!important;margin:14px 0 6px!important}
#view .tmtiles .tmtile{position:relative!important;overflow:hidden!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:0!important;min-height:168px!important;padding:16px!important;border:0!important;border-radius:24px!important;background:#F2F3F5 no-repeat!important;color:#16181D!important;text-align:start!important;box-shadow:none!important;cursor:pointer}
#view .tmtiles .tmtile > span{order:0;font-size:18px!important;line-height:24px!important;font-weight:500!important;opacity:1!important;color:#16181D!important;max-width:calc(100% - 40px);position:relative;z-index:1}
#view .tmtiles .tmtile > b{order:1;margin-top:auto!important;font-size:44px!important;line-height:48px!important;font-weight:400!important;letter-spacing:-.02em!important;color:#16181D!important;position:relative;z-index:1}
/* the corner square: ✓ when nothing waits, an empty square when something does */
#view .tmtiles .tmtile::before{content:"";position:absolute;top:14px;inset-inline-end:14px;width:32px;height:32px;border-radius:9px;background:#74777F url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/18px no-repeat;z-index:1}
#view .tmtiles .tmtile.warn::before{background:rgba(255,255,255,.75);box-shadow:inset 0 0 0 1.5px rgba(22,24,29,.12)}
/* the picture, bottom corner, a little out of the card like the reference */
#view .tmtiles .tmtile::after{content:"";position:absolute;inset-inline-end:-8px;bottom:-8px;width:104px;height:104px;background:no-repeat center/contain;pointer-events:none}
/* 5.9.65: Team today's main numbers are now Oureso's colour cards (.ottiles, owner4-vegobot); the pastel card stays only
   for "Tools to confirm", with its toolbox picture */
#view .tmtiles .tmtile{background-color:#FFDCC9!important}
#view .tmtiles .tmtile::after{background-image:url("/img/hr/tools.svg?v=7e8f6e672b")}
#view .tmtiles .tmtile:active{transform:scale(.98)}
@media (max-width:359px){#view .tmtiles .tmtile{min-height:150px!important}#view .tmtiles .tmtile::after{width:84px;height:84px}#view .tmtiles .tmtile > b{font-size:38px!important}}
/* 5.9.68: Oureso people screens — rows that are buttons (advances and loans on the staff card), the total row's number */
button.hrid{width:100%;border:0;background:transparent;font:inherit;color:inherit;text-align:start;cursor:pointer}
button.hrid:active{background:#F5F8FF}
.hrid .num{white-space:nowrap}
/* 5.9.69: letters on the staff card — one pill per letter */
.hrletters{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
/* 5.9.70: joining / leaving checklists — the card on the staff card (title, "n of m done", a bar) and the list of steps */
.hrchk{display:flex;flex-direction:column;gap:8px;width:100%;margin:12px 0 0;padding:12px 14px;border:0;border-radius:16px;background:var(--pane,#fff);box-shadow:0 1px 3px rgba(16,24,40,.06);font:inherit;color:inherit;text-align:start;cursor:pointer}
.hrchk>span{display:flex;align-items:baseline;justify-content:space-between;gap:10px}.hrchk>span small{color:var(--muted,#667085);font-size:12.5px}
.hrchkbar{display:block;height:8px;border-radius:99px;background:#E4E7EC;overflow:hidden}.hrchkbar i{display:block;height:100%;background:linear-gradient(90deg,#38BDF8,#2563EB);border-radius:99px}
.chklist{display:flex;flex-direction:column;background:var(--pane,#fff);border-radius:16px;box-shadow:0 1px 3px rgba(16,24,40,.06);overflow:hidden}
.chkrow{display:flex;align-items:center;gap:12px;padding:11px 14px}.chkrow+.chkrow{border-top:1px solid var(--line,#EEF0F4)}
.chkbox{flex:none;width:26px;height:26px;padding:0;border-radius:8px;border:1.5px solid var(--line,#D0D5DD);background:var(--pane,#fff);display:grid;place-items:center;color:#fff;cursor:pointer}
.chkbox svg{width:16px;height:16px;stroke-width:2.8}
.chkrow.done .chkbox{background:linear-gradient(135deg,#1E3A8A,#2563EB);border-color:transparent}
.chkbox:disabled{cursor:default}
.chkt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.chkt b{font-size:14.5px;font-weight:600}.chkt small{font-size:12px;color:var(--muted,#667085)}
.chkrow .btn.sm{flex:none}
/* 5.9.71 attendance rules: the selfie button, "too far" and the duty list notes */
.dscam{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;width:100%;min-height:64px;border-radius:999px;font-size:17px}
.dscam input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.dsfar{display:flex;flex-direction:column;align-items:center;gap:2px;padding:18px 8px 6px;text-align:center}
.dsfar b{font-size:40px;line-height:1.1;color:#2f5fe6}
.dsfar span{font-size:15px;color:var(--muted)}
.dsbtns{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.dtself{align-self:flex-start;margin:4px 0 2px}
.dt-fence{display:block;color:var(--muted);font-size:12px;margin-top:2px}
/* 5.9.72 shift roster */
.rswrap{overflow-x:auto;margin:8px -4px 0;padding:0 4px}
.rst{border-collapse:separate;border-spacing:3px;width:100%}
.rst th{font-size:11px;font-weight:600;color:var(--muted);text-align:center;padding:2px 0}
.rst th small{display:block;font-weight:500;font-size:11px}
.rst th.tdy{color:#2f5fe6}
.rst th.rsn{text-align:start;font-size:13px;font-weight:600;color:var(--ink);max-width:92px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-inline-end:4px}
.rst td{padding:0;text-align:center}
.rsc{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:34px;padding:0 4px;border-radius:10px;border:1px solid var(--line,#dfe4f0);background:var(--card,#fff);color:var(--muted);font:600 12px/1 inherit;font-family:inherit}
button.rsc{cursor:pointer}
.rsc.sel{outline:2px solid #2f5fe6;outline-offset:1px}
.rsc.k-off{background:#eef0f6;color:#6b7280}
.rsc.s0{background:#2f5fe6;border-color:#2f5fe6;color:#fff}
.rsc.s1{background:#5b8cff;border-color:#5b8cff;color:#fff}
.rsc.s2{background:#1e3a8a;border-color:#1e3a8a;color:#fff}
.rsc.s3{background:#7aa7ff;border-color:#7aa7ff;color:#0b1f4d}
.rsleg{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;font-size:12px;color:var(--muted)}
.rsleg span{display:inline-flex;align-items:center;gap:6px}
.rsleg .rsc{height:22px;min-width:30px;border-radius:7px;font-size:11px}
.rspick{margin-top:10px;padding:10px;border-radius:14px;background:var(--card,#fff);border:1px solid var(--line,#dfe4f0)}
.rspick>b{display:block;margin-bottom:6px;font-size:14px}
.rspick>b small{margin-inline-start:8px;color:var(--muted);font-weight:500}
.rsmine{font-size:13px;color:var(--ink)}
.rsmine.k-off{color:var(--muted)}
/* 5.9.73 announcements */
.annbn{display:flex;align-items:center;gap:12px;width:100%;margin:10px 0 4px;padding:12px 14px;border-radius:16px;border:1px solid #bcd0ff;background:#eaf1ff;color:#0b1f4d;text-align:start;cursor:pointer;font:inherit}
.annic{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:#2f5fe6;color:#fff}
.annic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.anntx{display:flex;flex-direction:column;min-width:0}
.anntx b{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.anntx small{font-size:12px;color:#3a4a73}
.annbody{margin-top:6px;font-size:15px;line-height:1.55;white-space:normal;overflow-wrap:anywhere}
.annok{display:flex;align-items:center;gap:8px;margin-top:12px;color:#1c7c3d;font-size:14px}
.annok svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
/* 5.9.74 yearly review */
.rvst{color:var(--teal);letter-spacing:2px;font-size:15px;white-space:nowrap;flex:none}
.rvrate{display:flex;gap:8px;margin-top:6px}
.rvbtn{width:48px;height:48px;border-radius:14px;border:1px solid var(--line,#dfe4f0);background:var(--pane,#fff);color:var(--muted,#9aa5c4);font-size:26px;line-height:1;cursor:pointer;font-family:inherit;padding:0}
.rvbtn[aria-pressed="true"]{color:var(--teal);border-color:var(--teal);background:color-mix(in srgb,var(--teal) 12%,transparent)}
.rvlbl{margin:8px 2px 4px;font-size:14px;font-weight:600}
.rvnote{margin:4px 2px 10px;font-size:14px;line-height:1.5;overflow-wrap:anywhere}
/* 5.9.76 India payroll: PF, ESI and Professional Tax — the three amounts on a draft line, the company's share, the settings sheet (limits by date, tax slabs) */
.pyadj.pyin{grid-template-columns:1fr 1fr 1fr}
.pyer{display:block;min-height:0}.pyer:empty{display:none}
.inrow{display:grid;grid-template-columns:1fr 1fr 40px;gap:6px;margin-bottom:6px;align-items:center}
.inrow input{width:100%;min-width:0;border:1px solid var(--line,#dfe4f0);border-radius:9px;padding:8px;background:var(--pane,#fff);font:inherit;font-size:13px;color:inherit}
.inrow.inslab{grid-template-columns:1fr 1fr 1fr 40px}
.inrow.inhead{font-size:11.5px;opacity:.7;margin:6px 0 2px}
.inx{width:36px;height:36px;border-radius:50%;border:1px solid var(--line,#dfe4f0);background:var(--pane,#fff);color:inherit;font-size:20px;line-height:1;cursor:pointer}
.inlist{margin:4px 0 8px}
#pr-in .hrid small{display:block;font-size:11.5px;opacity:.75}
/* 5.9.92 WhatsApp to staff (apps/hr/team/wa-staff.js): the number, a row per message type with WhatsApp's approval, the
   latest messages and replies (also on the staff card) */
.wanum{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;border:1px solid #bcd0ff;background:#eaf1ff;color:#0b1f4d}
.wanum svg{flex:none;width:26px;height:26px;fill:none;stroke:#2f5fe6;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wanum span{display:flex;flex-direction:column;min-width:0}
.wanum b{font-size:15px;overflow-wrap:anywhere}
.wanum small{font-size:12.5px;color:#3a4a73;line-height:1.4}
.wanum.off{border-color:var(--line,#dfe4f0);background:var(--pane,#fff);color:inherit}
.wanum.off svg{stroke:var(--muted,#9aa5c4)}
.wanum.off small{color:var(--muted,#6b7591)}
.watypes{display:flex;flex-direction:column;gap:8px}
.watype{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;border:1px solid var(--line,#dfe4f0);background:var(--pane,#fff)}
.watx{display:flex;flex-direction:column;align-items:flex-start;gap:2px;flex:1;min-width:0}
.watx b{font-size:14.5px}
.watx small{font-size:12px;color:var(--muted,#6b7591);line-height:1.35}
.watype .chips{flex:none;flex-wrap:nowrap;margin:0}
.wastag{display:inline-block;margin-top:3px;padding:1px 8px;border-radius:999px;background:#eef1f7;color:#4a5578;font-size:11px;font-weight:700;line-height:18px}
.wastag.ok{background:#e8eeff;color:#2f4fe0}
.wastag.warn{background:#fff4d6;color:#7a5600}
.wastag.bad{background:var(--bad-bg,#fde8e8);color:var(--bad,#b42318)}
.wast #wast-make{margin-top:10px}
.wast .fhint.bad{color:var(--bad,#b42318)}
.wamsg .nm{white-space:normal;overflow-wrap:anywhere}
.wamsg.in .nm{color:#2f4fe0}
.wamsg.bad .meta{color:var(--bad,#b42318)}
:root[data-theme="dark"] .wanum:not(.off){background:#1d2a5c;border-color:#2c3f86;color:#e3e9ff}
:root[data-theme="dark"] .wanum:not(.off) small{color:#b9c8ff}
:root[data-theme="dark"] .wastag{background:#262c3d;color:#c6cde0}
:root[data-theme="dark"] .wastag.ok{background:#1d2a5c;color:#b9c8ff}
:root[data-theme="dark"] .wamsg.in .nm{color:#b9c8ff}
:root[data-theme="dark"] .wastag.warn{background:#3d3215;color:#ffd77a}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .wanum:not(.off){background:#1d2a5c;border-color:#2c3f86;color:#e3e9ff}
  :root:not([data-theme="light"]) .wanum:not(.off) small{color:#b9c8ff}
  :root:not([data-theme="light"]) .wastag{background:#262c3d;color:#c6cde0}
  :root:not([data-theme="light"]) .wastag.ok{background:#1d2a5c;color:#b9c8ff}
  :root:not([data-theme="light"]) .wamsg.in .nm{color:#b9c8ff}
  :root:not([data-theme="light"]) .wastag.warn{background:#3d3215;color:#ffd77a}
}
/* 5.9.93 visa / Emirates ID renewals (apps/hr/people/renewals.js): the card on the staff card and in My details, the steps,
   the renewal sheet (steps with their dates, the new expiry dates, the costs), Team today's list */
.rncard{display:flex;align-items:center;gap:10px;width:100%;margin:4px 0 8px;padding:12px 14px;border-radius:16px;border:1px solid #bcd0ff;background:#eaf1ff;color:#0b1f4d;text-align:start;font:inherit;cursor:pointer}
.rncard.ro{cursor:default}
.rntx{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.rntx b{font-size:15px}
.rntx small{font-size:12.5px;color:#3a4a73}
.rnsteps{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
.rnst{display:inline-block;padding:2px 9px;border-radius:999px;background:#fff;border:1px solid #d5def5;color:#5b6787;font-size:11.5px;font-weight:600;line-height:18px;white-space:nowrap}
.rnst.ok{background:#2f5fe6;border-color:#2f5fe6;color:#fff}
.rnst.next{border-color:#2f5fe6;color:#2f5fe6}
.rnsteplist{display:flex;flex-direction:column;gap:8px;margin:6px 0 4px}
.rnrow{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:14px;border:1px solid var(--line,#dfe4f0);background:var(--pane,#fff);color:var(--muted,#6b7591)}
.rnrow.ok,.rnrow.next{color:inherit}
.rnrow.next{border-color:#2f5fe6;box-shadow:0 0 0 1px #2f5fe6 inset}
.rnic{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#eef1f7;color:#5b6787;font-size:12.5px;font-weight:700}
.rnrow.ok .rnic{background:#2f5fe6;color:#fff}
.rnrow.next .rnic{background:#e8eeff;color:#2f4fe0}
.rnl{display:flex;flex-direction:column;align-items:flex-start;gap:4px;flex:1;min-width:0}
.rnl b{font-size:14.5px}
.rnl small{font-size:12px;color:var(--muted,#6b7591)}
.rnnew{display:flex;flex-wrap:wrap;gap:8px;width:100%}
.rnnew .f{flex:1 1 150px;min-width:0;margin:0}
.rncost{margin-top:8px}
.rngo{flex:none;align-self:center;padding:3px 11px;border-radius:999px;background:#2f5fe6;color:#fff;font-size:12px;font-weight:700}
:root[data-theme="dark"] .rncard{background:#1d2a5c;border-color:#2c3f86;color:#e3e9ff}
:root[data-theme="dark"] .rntx small{color:#b9c8ff}
:root[data-theme="dark"] .rnst{background:#262c3d;border-color:#3a4258;color:#c6cde0}
:root[data-theme="dark"] .rnst.ok{background:#3b63f0;border-color:#3b63f0;color:#fff}
:root[data-theme="dark"] .rnst.next{border-color:#8ea6ff;color:#b9c8ff}
:root[data-theme="dark"] .rnic{background:#262c3d;color:#c6cde0}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .rncard{background:#1d2a5c;border-color:#2c3f86;color:#e3e9ff}
  :root:not([data-theme="light"]) .rntx small{color:#b9c8ff}
  :root:not([data-theme="light"]) .rnst{background:#262c3d;border-color:#3a4258;color:#c6cde0}
  :root:not([data-theme="light"]) .rnst.ok{background:#3b63f0;border-color:#3b63f0;color:#fff}
  :root:not([data-theme="light"]) .rnst.next{border-color:#8ea6ff;color:#b9c8ff}
  :root:not([data-theme="light"]) .rnic{background:#262c3d;color:#c6cde0}
}