/* Customer procedure tracker.
   Scoped under .tracker / .tk-* so it cannot affect existing portal screens.
   Palette follows IPRO brand (#662380 / #e11b72). Semantic colours are kept
   separate from the brand accent and are never the only carrier of meaning —
   every state also prints its label in words.

   Light by design: the surrounding portal paints body #212121, which made the
   tracker a white island on black. trackerCtrl adds .tk-light to <body> while
   this screen is mounted and removes it on destroy, so only this page changes.

   Direction-agnostic: every offset uses logical properties, so the whole
   screen mirrors correctly under dir="rtl" without a second stylesheet. */

/* The whole portal is light now (assets/css2/portal.css), so the per-page
   body flag this file used to set is gone. What stays here is only the
   tracker's own furniture: cards, segmented bars, the stage timeline. State
   chips come from the shared .ip-pill classes so the tracker and the employee
   profile cannot describe the same state differently. */

/* ===========================================================================
   THE STAGE JOURNEY
   ---------------------------------------------------------------------------
   A procedure is a sequence of official milestones, so it is drawn as one:
   numbered marks on a rail, the way a cleared step is stamped on a government
   form. The numbers are here because the content really is ordered - they are
   not ornament.

   Boldness is spent in exactly one place: the stage that is happening now.
   Everything else is deliberately quiet so that one mark reads first.

   Nothing depends on colour or motion alone. A completed stage carries a tick
   AND its completion date AND the word; the live stage carries a ring, a glow
   AND the words "In progress now"; an upcoming stage is flat and says so.
   =========================================================================== */

.jr{ margin:8px 0 4px; }

/* The headline figure lives at the trailing edge of the card header now (see
   .tk-prog), so it can never be mistaken for a stage count sitting under the
   rail. It is shown exactly once. */
.jr-pct{ font-size:34px; font-weight:700; line-height:1; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; color:var(--tk-ink); }

/* the rail ---------------------------------------------------------------- */
.jr-rail{ display:flex; align-items:flex-start; gap:0; }
.jr-rail::-webkit-scrollbar{ height:0; }

.sg{ position:relative; flex:1 1 0; min-width:0; display:flex; flex-direction:column;
  align-items:center; gap:0; padding:2px 6px 8px; border:0; background:transparent;
  cursor:pointer; text-align:center; border-radius:12px; }
.sg:hover{ background:var(--tk-surface2); }
.sg:focus-visible{ outline:2px solid var(--tk-brand); outline-offset:1px; }

/* the connector runs from this mark to the next; it turns green only when the
   stage it leaves has actually been completed */
.sg:not(:last-child)::after{
  content:""; position:absolute; top:23px; inset-inline-start:calc(50% + 24px);
  width:calc(100% - 48px); height:3px; border-radius:2px;
  background:var(--tk-line2); z-index:0;
}
.sg.seg-done:not(:last-child)::after{ background:var(--tk-ok); }

.sg-dot{ position:relative; z-index:1; width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:18px; font-weight:700; font-variant-numeric:tabular-nums;
  background:var(--tk-surface2); color:var(--tk-ink3);
  border:1.5px solid var(--tk-line2); box-sizing:border-box; }

.sg-name{ margin-top:9px; font-size:13px; font-weight:600; line-height:1.3;
  color:var(--tk-ink); overflow-wrap:anywhere; }
.sg-state{ margin-top:3px; font-size:11.5px; line-height:1.35; color:var(--tk-ink3); }
.sg-date{ margin-top:2px; font-size:11.5px; color:var(--tk-ink3); font-variant-numeric:tabular-nums; }
.sg-files{ margin-top:6px; font-size:11px; font-weight:600; border-radius:999px;
  padding:2px 8px; background:var(--tk-brand-wash,#f4ecf9); color:#4a0a75; }

/* completed: green, ticked, dated ---------------------------------------- */
.sg.is-done .sg-dot{ background:var(--tk-ok); border-color:var(--tk-ok); color:#fff; }
.sg-tick{ position:absolute; bottom:-2px; inset-inline-end:-2px;
  width:18px; height:18px; border-radius:50%; background:#fff; border:1.5px solid var(--tk-ok);
  color:var(--tk-ok); font-size:11px; font-weight:800; line-height:1;
  display:flex; align-items:center; justify-content:center; }
.sg.is-done .sg-state{ color:var(--tk-ok); font-weight:600; }

/* happening now: the one loud thing on the card ---------------------------
   A visible pulse marks the live stage. It is spent here and nowhere else -
   completed and upcoming stages never move - so the eye lands on the one mark
   that is actually happening. */
.sg.is-now .sg-dot{ background:#fff; border:3px solid var(--tk-brand); color:var(--tk-brand);
  box-shadow:0 0 0 5px rgba(107,15,150,.14); animation:sgPulse 2.4s ease-in-out infinite; }
.sg.is-now .sg-name{ color:#4a0a75; }
.sg.is-now .sg-state{ color:#6b0f96; font-weight:700; font-size:12px; }
@keyframes sgPulse{
  0%,100%{ box-shadow:0 0 0 4px rgba(107,15,150,.12); }
  50%    { box-shadow:0 0 0 12px rgba(107,15,150,.20); }
}
/* reduced motion keeps the emphasis, drops the movement */
@media (prefers-reduced-motion: reduce){
  .sg.is-now .sg-dot{ animation:none;
    box-shadow:0 0 0 5px rgba(107,15,150,.14), 0 0 0 9px rgba(107,15,150,.18); }
}
/* a stage last touched long ago is not happening "now": keep it marked as the
   furthest point reached, but hold it still and quiet so nothing on the card
   implies live work that the dates do not support */
.sg.is-now.sg-stale .sg-dot{ animation:none; border-color:var(--tk-line2); color:var(--tk-ink3);
  box-shadow:none; }
.sg.is-now.sg-stale .sg-name{ color:var(--tk-ink); }
.sg.is-now.sg-stale .sg-state{ color:var(--tk-ink3); font-weight:600; }

/* the customer owes us something ------------------------------------------ */
.sg.is-act .sg-dot{ background:#fff; border:3px solid var(--tk-brand2); color:var(--tk-brand2); }
.sg.is-act .sg-state{ color:#a8005c; font-weight:700; font-size:12px; }

/* IPRO is resolving a problem --------------------------------------------- */
.sg.is-fail .sg-dot{ background:#fff; border:3px solid var(--tk-stop); color:var(--tk-stop); }
.sg.is-fail .sg-state{ color:var(--tk-stop); font-weight:600; }

/* the open stage points at its own panel ---------------------------------- */
.sg.is-open{ background:var(--tk-surface2); }
.sg.is-open::before{
  content:""; position:absolute; bottom:-9px; inset-inline-start:calc(50% - 8px);
  width:16px; height:16px; background:#fbfbfd; border-inline-start:1px solid var(--tk-line);
  border-top:1px solid var(--tk-line); transform:rotate(45deg); z-index:2;
}

/* position indicator, shown only when the rail actually scrolls ----------- */
.jr-dots{ display:none; }

/* documents, inline, right under the stage that produced them ------------- */
.jr-open{ margin-top:10px; background:#fbfbfd; border:1px solid var(--tk-line);
  border-radius:12px; padding:13px 15px; }
.jr-open-h{ display:flex; align-items:flex-start; gap:10px; margin-bottom:10px; }
.jr-open-n{ flex:none; width:26px; height:26px; border-radius:50%; background:var(--tk-ink);
  color:#fff; font-size:13px; font-weight:700; font-variant-numeric:tabular-nums;
  display:flex; align-items:center; justify-content:center; }
.jr-open-t{ flex:1 1 auto; min-width:0; }
.jr-open-t b{ display:block; font-size:14.5px; font-weight:600; overflow-wrap:anywhere; }
.jr-open-t em{ display:block; font-style:normal; font-size:12.5px; color:var(--tk-ink3); margin-top:1px; }
.jr-open-x{ flex:none; width:28px; height:28px; border-radius:8px; border:1px solid var(--tk-line2);
  background:#fff; color:var(--tk-ink2); font-size:18px; line-height:1; cursor:pointer; }
.jr-open-x:hover{ background:var(--tk-surface2); }

.jr-note{ background:var(--tk-wait-s); color:var(--tk-wait); border-radius:8px;
  padding:9px 11px; font-size:13px; line-height:1.45; margin-bottom:10px; }
.jr-none{ font-size:13px; color:var(--tk-ink3); padding:6px 2px; }
.jr-load-ring{ display:inline-block; width:13px; height:13px; vertical-align:-2px; border-radius:50%;
  border:2px solid var(--tk-line2); border-top-color:var(--tk-brand); animation:ipSpin .8s linear infinite; }
@media (prefers-reduced-motion: reduce){ .jr-load-ring{ animation:none; } }

.jr-files{ display:flex; flex-direction:column; gap:8px; }
.jr-file{ display:flex; align-items:center; gap:11px; background:#fff;
  border:1px solid var(--tk-line); border-radius:10px; padding:10px 12px; }
.jr-ficon{ flex:none; width:34px; height:28px; border-radius:6px; background:#f4ecf9;
  color:#6b0f96; font-size:9.5px; font-weight:800; letter-spacing:.03em;
  display:flex; align-items:center; justify-content:center; }
.jr-fname{ flex:1 1 auto; min-width:0; font-size:13.5px; overflow-wrap:anywhere; }
.jr-fname em{ display:block; font-style:normal; font-size:11.5px; color:var(--tk-ink3);
  font-variant-numeric:tabular-nums; }
.jr-dl{ flex:none; display:inline-flex; align-items:center; gap:6px;
  font-size:13px; font-weight:700; border:0; border-radius:9px; padding:9px 16px;
  background:#6b0f96; color:#fff; cursor:pointer; white-space:nowrap; }
.jr-dl:hover:not([disabled]){ background:#4a0a75; }
.jr-dl[disabled]{ opacity:.55; cursor:default; }

/* mobile: the rail scrolls, so it says so and points at where you are ------ */
@media (max-width:760px){
  .jr-rail{ overflow-x:auto; scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
    margin-inline:-4px; padding-inline:4px; }
  .sg{ flex:0 0 116px; scroll-snap-align:center; }
  .sg:not(:last-child)::after{ inset-inline-start:calc(50% + 24px); width:calc(100% - 48px); }
  .jr-dots{ display:flex; justify-content:center; gap:6px; margin-top:10px; }
  .jr-dot{ width:7px; height:7px; border-radius:50%; border:0; padding:0;
    background:var(--tk-line2); cursor:pointer; }
  .jr-dot.on{ background:#6b0f96; width:20px; border-radius:4px; }
  .jr-dot.done{ background:var(--tk-ok); }
  .jr-pct{ font-size:28px; }
  .jr-file{ flex-wrap:wrap; }
  .jr-dl{ margin-inline-start:45px; }
}

/* narrow phones: the portrait stays prominent but a little smaller, and the
   progress figure keeps its own edge on the first line rather than being
   pushed under the name */
@media (max-width:480px){
  .jr-ava{ width:50px; height:50px; font-size:19px; }
  .jr-ava-co .material-symbols-outlined{ font-size:24px; }
  .tk-prog{ padding-inline-start:6px; }
  .jr-pct{ font-size:26px; }
}

.tracker{ --tk-brand:#662380; --tk-brand2:#e11b72; --tk-ink:#1c1a2b; --tk-ink2:#56536b;
  --tk-ink3:#82808f; --tk-line:#e6e6ee; --tk-line2:#d2d1dd; --tk-surface:#fff; --tk-surface2:#f0f0f6;
  --tk-ok:#0f7a46; --tk-ok-s:#e7f5ed; --tk-warn:#a8530a; --tk-warn-s:#fdf2e5;
  --tk-stop:#a81a3c; --tk-stop-s:#fdecf0; --tk-wait:#1c46c4; --tk-wait-s:#eaefff;
  --tk-idle:#b3b1bf; --tk-idle-s:#e9e9f0;
  color:var(--tk-ink); margin-bottom:26px;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; }

/* head ------------------------------------------------------------------ */
.tk-head{ margin-bottom:16px; }
.tk-headrow{ display:flex; align-items:flex-start; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.tk-title{ font-size:22px; font-weight:700; margin:0; color:var(--tk-ink); }
.tk-sub{ font-size:13.5px; color:var(--tk-ink3); margin:4px 0 0; }

.tk-search input{ width:100%; max-width:560px; font-size:16px; padding:11px 14px;
  border:1.5px solid var(--tk-line2); border-radius:10px; background:var(--tk-surface); color:var(--tk-ink); }
.tk-search input::placeholder{ color:var(--tk-ink3); }
.tk-search input:focus{ border-color:var(--tk-brand); outline:none; box-shadow:0 0 0 3px #f1e9f7; }

/* the two halves of the work ---------------------------------------------
   The selected one is filled and underlined, not merely tinted: on a phone in
   sunlight a tint alone is not a signal. */
.tk-tabs{ display:flex; gap:6px; margin:4px 0 14px; border-bottom:1px solid var(--tk-line); }
.tk-tab{ position:relative; display:inline-flex; align-items:center; gap:8px;
  font-size:14.5px; font-weight:600; color:var(--tk-ink3);
  background:transparent; border:0; border-radius:10px 10px 0 0;
  padding:10px 16px 12px; cursor:pointer; white-space:nowrap; }
.tk-tab b{ font-size:12.5px; font-weight:700; border-radius:999px; padding:1px 8px;
  background:var(--tk-surface2); color:var(--tk-ink2); }
.tk-tab:hover{ color:var(--tk-ink); background:var(--tk-surface2); }
.tk-tab.on{ color:#4a0a75; background:var(--tk-brand-wash,#f4ecf9); }
.tk-tab.on b{ background:#6b0f96; color:#fff; }
.tk-tab.on::after{ content:""; position:absolute; inset-inline:10px; bottom:-1px;
  height:3px; border-radius:3px 3px 0 0; background:#6b0f96; }
@media (max-width:600px){
  .tk-tabs{ gap:2px; }
  .tk-tab{ flex:1 1 0; justify-content:center; font-size:13px; padding:10px 8px 12px; }
}

.tk-filters{ display:flex; gap:7px; flex-wrap:wrap; margin-top:11px; align-items:center; }
.tk-chip{ font-size:13.5px; font-weight:500; border:1px solid var(--tk-line2);
  background:var(--tk-surface); color:var(--tk-ink2); border-radius:999px; padding:6px 13px; cursor:pointer; }
.tk-chip b{ font-weight:700; opacity:.75; margin-inline-start:4px; }
.tk-chip:hover{ border-color:var(--tk-brand); }
.tk-chip.on{ background:var(--tk-brand); border-color:var(--tk-brand); color:#fff; }
.tk-chip.on b{ opacity:.95; }

/* the "waiting on you" filter is the one chip that is not a category, so it
   is set apart and carries the accent reserved for attention */
.tk-chip-act{ display:inline-flex; align-items:center; gap:6px;
  margin-inline-start:auto; border-color:#f0cfe0; color:#a8005c; background:#fdecf3; }
.tk-chip-act:hover{ border-color:var(--tk-brand2); }
.tk-chip-act.on{ background:var(--tk-brand2); border-color:var(--tk-brand2); color:#fff; }
.tk-chip-i{ font-size:17px; line-height:1; }
@media (max-width:760px){ .tk-chip-act{ margin-inline-start:0; } }

/* employee search results ------------------------------------------------ */
.tk-people{ background:var(--tk-surface); border:1px solid var(--tk-line); border-radius:12px;
  padding:10px; margin-bottom:14px; }
.tk-people-h{ font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--tk-ink3); padding:4px 6px 8px; display:flex; gap:8px; align-items:baseline; }
.tk-people-h em{ font-style:normal; font-weight:500; letter-spacing:0; text-transform:none; font-size:13px; }

.tk-person{ display:flex; align-items:center; gap:11px; width:100%; text-align:start;
  border:0; background:transparent; border-radius:9px; padding:9px 8px; cursor:pointer; }
.tk-person:hover{ background:var(--tk-surface2); }
.tk-avatar{ flex:none; width:34px; height:34px; border-radius:50%; background:#f1e9f7; color:var(--tk-brand);
  font-weight:700; font-size:15px; display:flex; align-items:center; justify-content:center; }
.tk-pbody{ flex:1 1 auto; min-width:0; }
.tk-pname{ display:block; font-size:14.5px; font-weight:600; overflow-wrap:anywhere; }
.tk-ppos{ display:block; font-size:12.5px; color:var(--tk-ink3); }
.tk-pcount{ flex:none; font-size:12.5px; font-weight:600; color:var(--tk-ink2);
  background:var(--tk-surface2); border-radius:999px; padding:4px 10px; white-space:nowrap; }
.tk-pnone{ color:var(--tk-ink3); font-weight:500; }
.tk-plink{ flex:none; font-size:12.5px; font-weight:600; color:var(--tk-brand);
  border:1px solid var(--tk-line2); border-radius:7px; padding:4px 10px; white-space:nowrap; }
.tk-plink:hover{ border-color:var(--tk-brand); background:#f1e9f7; }

.tk-picked{ display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:#f1e9f7; border:1px solid #dfcdea; color:var(--tk-brand);
  border-radius:10px; padding:9px 13px; font-size:13.5px; margin-bottom:14px; }
.tk-picked span{ flex:1 1 auto; }
.tk-picked button{ flex:none; font-size:12.5px; font-weight:600; border:1px solid var(--tk-brand);
  background:transparent; color:var(--tk-brand); border-radius:7px; padding:4px 11px; cursor:pointer; }
.tk-picked button:hover{ background:var(--tk-brand); color:#fff; }

.tk-empty{ text-align:center; padding:38px 18px; color:var(--tk-ink3);
  background:var(--tk-surface); border:1px dashed var(--tk-line2); border-radius:12px; }

/* cards ------------------------------------------------------------------ */
.tk-list{ display:flex; flex-direction:column; gap:10px; }
.tk-card{ background:var(--tk-surface); border:1px solid var(--tk-line); border-radius:12px;
  padding:15px 17px; cursor:pointer; box-shadow:0 1px 2px rgba(22,20,40,.04); }
.tk-card:hover{ border-color:var(--tk-line2); box-shadow:0 2px 10px rgba(22,20,40,.07); }
.tk-card:focus-visible{ outline:2px solid var(--tk-brand); outline-offset:2px; }
.tk-card.rail-you{ border-inline-start:3px solid var(--tk-wait); }
.tk-card.rail-ipro{ border-inline-start:3px solid var(--tk-stop); }

.tk-top{ display:flex; align-items:center; gap:8px 13px; flex-wrap:wrap; margin-bottom:9px; }

/* the portrait -----------------------------------------------------------
   Larger and framed, so a real face reads as the subject of the card rather
   than a token beside the name. The initials sit underneath and are only
   hidden once a real photograph has decoded, so a photo that is missing,
   forbidden or corrupt never leaves a broken image behind - it just never
   appears. */
.jr-ava{ position:relative; flex:none; width:58px; height:58px; border-radius:50%;
  overflow:hidden; background:var(--tk-brand-wash,#f4ecf9); color:#6b0f96;
  font-size:22px; font-weight:700; line-height:1;
  display:flex; align-items:center; justify-content:center;
  border:2px solid #fff; box-shadow:0 0 0 1px var(--tk-line2), 0 1px 3px rgba(22,20,40,.12); }
.jr-ava img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:50% 30%; display:block; }
.jr-ava.has-photo .jr-ini{ visibility:hidden; }
.jr-ava-co{ background:var(--tk-surface2); color:var(--tk-ink2); }
.jr-ava-co .material-symbols-outlined{ font-size:28px; }
.tk-who{ flex:1 1 150px; min-width:0; }
.tk-subject{ font-weight:600; font-size:16px; overflow-wrap:anywhere; }
.tk-type{ color:var(--tk-ink2); font-size:13.5px; margin-top:1px; overflow-wrap:anywhere; }
/* kind + status sit together on their own line under the name, so the name
   leads and the progress figure can own the opposite edge */
.tk-meta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:6px; }
.tk-kind{ font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--tk-ink3); background:var(--tk-surface2); border-radius:5px; padding:3px 7px;
  white-space:nowrap; flex:none; }
/* state chips are the shared .ip-pill classes (see portal.css) */
.tk-meta .ip-pill{ flex:none; }

/* the headline figure, pinned to the trailing edge of the header ----------
   identity leads; progress owns the opposite edge. Under dir="rtl" the whole
   row mirrors through the logical margin, so the portrait ends up on the right
   and this block on the far left, exactly as intended. */
.tk-prog{ flex:none; margin-inline-start:auto; text-align:end; padding-inline-start:10px; }
.tk-prog-c{ font-size:12.5px; color:var(--tk-ink3); margin-top:2px; white-space:nowrap;
  font-variant-numeric:tabular-nums; }

.tk-upd{ font-size:12.5px; color:var(--tk-ink3); margin-top:9px; }

.tk-ban{ margin-top:10px; border-radius:9px; padding:9px 12px; font-size:13.5px; line-height:1.45; }
.tk-ban-you{ background:var(--tk-wait-s); color:var(--tk-wait); }
/* what the customer owes us is the one thing on a card that must not be
   skimmed past, so it is heavier and carries a mark of its own */
.tk-ban-strong{ display:flex; align-items:center; gap:9px; font-weight:600;
  background:#fdecf3; color:#a8005c; border:1px solid #f3d3e3; }
.tk-ban-i{ font-size:19px; line-height:1; flex:none; }
.tk-ban-ipro{ background:var(--tk-warn-s); color:var(--tk-warn); }
.tk-ban-mute{ background:var(--tk-surface2); color:var(--tk-ink2); }

/* The side drawer and its vertical timeline are gone: the journey replaced
   them on the card, so a customer no longer opens anything to see where a
   procedure has got to. Only the download error, which the inline panel
   still uses, survives from that block. */
.tk-dlerr{ background:var(--tk-stop-s); color:var(--tk-stop); border-radius:9px; padding:9px 12px;
  font-size:13px; margin-bottom:12px; }

/* RTL: the layout mirrors through logical properties, but Bootstrap forces a
   left text-align on these, so restore the writing direction explicitly.
   Figures stay LTR: a percentage and a date read left-to-right in Arabic. */
[dir="rtl"] .tracker{ text-align:right; }
[dir="rtl"] .tk-person{ text-align:right; }
[dir="rtl"] .jr-pct{ direction:ltr; display:inline-block; }
/* the size sits on its own line under the file name, so it keeps display:block
   and only the digits themselves are forced left-to-right */
[dir="rtl"] .sg-date,
[dir="rtl"] .jr-fname em{ direction:ltr; display:block; }

@media (max-width:600px){
  .tk-title{ font-size:19px; }
  .tk-person{ flex-wrap:wrap; }
  .tk-pcount,.tk-plink{ margin-inline-start:45px; }
}

/* the rest of a long list loads here as you scroll; the button is the fallback
   and says how many remain */
.tk-more{ display:flex; justify-content:center; padding:8px 0 2px; }
.tk-more button{ display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600;
  color:var(--tk-brand); background:var(--tk-surface); border:1px solid var(--tk-line2);
  border-radius:10px; padding:9px 18px; cursor:pointer; }
.tk-more button:hover{ border-color:var(--tk-brand); background:#f1e9f7; }
.tk-more button b{ font-weight:700; background:var(--tk-brand); color:#fff; border-radius:999px;
  padding:1px 8px; font-size:12px; font-variant-numeric:tabular-nums; }

/* ===========================================================================
   THE LOADING EXPERIENCE
   ---------------------------------------------------------------------------
   One branded loader, used four ways: a full-screen overlay for company
   switching and the cold-boot splash, and inline for opening/refreshing
   Transactions. Brand colours are written out here (not the .tracker tokens)
   because the overlay renders at the document root, outside .tracker. Every
   offset is direction-agnostic; motion is dropped under prefers-reduced-motion.
   =========================================================================== */
/* the navigation progress bar: a thin branded bar along the very top, clearly
   visible but never blocking, that runs while a page or its data is loading */
.ip-navbar{ position:fixed; top:0; inset-inline-start:0; height:4px; z-index:1100;
  background:linear-gradient(90deg,#662380,#a021b3,#e11b72);
  box-shadow:0 0 10px rgba(107,15,150,.55), 0 0 4px rgba(225,27,114,.5);
  border-start-end-radius:3px; border-end-end-radius:3px;
  transition:width .3s cubic-bezier(.4,0,.2,1); will-change:width; }
[dir="rtl"] .ip-navbar{ background:linear-gradient(270deg,#662380,#a021b3,#e11b72); }

.ip-load-overlay{ position:fixed; inset:0; z-index:1080;
  display:flex; align-items:center; justify-content:center; padding:24px;
  background:rgba(247,244,250,.86); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }

/* the box, shared by overlay and inline */
.ip-load-box{ display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:15px; width:100%; max-width:330px;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; }
.ip-load-overlay .ip-load-box{ background:#fff; border:1px solid #ece9f2; border-radius:18px;
  padding:30px 26px; box-shadow:0 12px 40px rgba(46,20,66,.16); }
.tk-loadwrap{ display:flex; justify-content:center; padding:44px 18px; }

/* ===========================================================================
   FEATURE 2 - Account page: employee residency cost search (.ck-*)
   FEATURE 3 - Smart Calculator (.sc-*)
   These pages are NOT under .tracker, so the --tk-* tokens do not reach them;
   brand values are written explicitly. Every offset is a logical property so
   the screens mirror correctly under dir="rtl". Loaded globally by preview.html,
   scoped by the ck-/sc- prefixes so no other portal screen is touched.
   =========================================================================== */
.ck-cost{ font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; }
.ck-sub{ margin:2px 0 14px; font-size:13px; color:#56536b; }

.ck-search{ position:relative; }
.ck-input{ width:100%; box-sizing:border-box; height:44px; border:1.5px solid #d2d1dd;
  border-radius:11px; background:#fff; color:#1c1a2b; font-size:14.5px;
  padding-inline-start:42px; padding-inline-end:40px; }
.ck-input:focus{ outline:none; border-color:#662380; box-shadow:0 0 0 3px rgba(102,35,128,.12); }
.ck-search-i{ position:absolute; inset-inline-start:12px; top:50%; transform:translateY(-50%);
  color:#82808f; font-size:20px; pointer-events:none; }
.ck-x{ position:absolute; inset-inline-end:6px; top:50%; transform:translateY(-50%);
  width:30px; height:30px; border:0; background:transparent; color:#82808f; cursor:pointer;
  border-radius:8px; display:flex; align-items:center; justify-content:center; }
.ck-x:hover{ background:#f0f0f6; color:#1c1a2b; }
.ck-x .material-symbols-outlined{ font-size:20px; }

.ck-drop{ position:absolute; z-index:40; inset-inline:0; top:calc(100% + 6px);
  background:#fff; border:1px solid #e6e6ee; border-radius:12px; overflow:hidden;
  box-shadow:0 14px 38px rgba(46,20,66,.15); max-height:340px; overflow-y:auto; }
.ck-drop-msg{ padding:12px 14px; font-size:13px; color:#82808f; }
.ck-opt{ display:flex; flex-direction:column; gap:2px; width:100%; text-align:start;
  border:0; background:transparent; cursor:pointer; padding:10px 14px; border-bottom:1px solid #f0f0f6; }
.ck-opt:last-child{ border-bottom:0; }
.ck-opt:hover{ background:#f7f4fa; }
.ck-opt-name{ font-size:14px; font-weight:600; color:#1c1a2b; }
.ck-opt-meta{ font-size:12px; color:#82808f; display:flex; gap:5px; flex-wrap:wrap; }
.ck-inactive{ color:#a8530a; }

.ck-inline-load{ display:flex; align-items:center; gap:9px; padding:16px 2px; font-size:13.5px; color:#56536b; }
.ck-error{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:14px 2px; color:#a81a3c; font-size:13.5px; }

.ck-result{ margin-top:16px; }
.ck-emp{ margin-bottom:12px; }
.ck-emp-name{ font-size:17px; font-weight:700; color:#1c1a2b; }
.ck-emp-pos{ font-size:13px; color:#82808f; margin-top:1px; }

.ck-proc{ margin:14px 0; border:1px solid #e6e6ee; border-radius:12px; overflow:hidden; }
.ck-proc-h{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 14px; background:#f7f4fa; font-weight:600; font-size:13.5px; color:#4a0a75; }
.ck-proc-total{ font-variant-numeric:tabular-nums; color:#1c1a2b; }
.ck-table{ margin:0; }
.ck-table th{ font-size:12px; color:#82808f; font-weight:600; }
.ck-table td{ font-size:13px; }

.ck-totals{ margin-top:12px; border-top:2px solid #ece9f2; padding-top:10px; }
.ck-total-row{ display:flex; justify-content:space-between; gap:12px; padding:5px 2px;
  font-size:13.5px; color:#56536b; }
.ck-total-row .ip-num{ font-variant-numeric:tabular-nums; color:#1c1a2b; }
.ck-grand{ margin-top:4px; padding-top:9px; border-top:1px solid #e6e6ee;
  font-size:15px; font-weight:700; color:#1c1a2b; }
.ck-note{ margin-top:12px; font-size:12.5px; color:#82808f; background:#f0f0f6;
  border-radius:9px; padding:10px 12px; }

/* ---- Smart Calculator ---------------------------------------------------- */
.sc-doc{ border:1px solid #e6e6ee; border-radius:12px; padding:4px 4px 0; margin-bottom:14px; }
.sc-doc-row{ display:flex; align-items:center; gap:12px; padding:10px; }
.sc-doc-i{ color:#662380; font-size:26px; flex:none; }
.sc-doc-txt{ flex:1 1 auto; min-width:0; }
.sc-doc-name{ font-size:14px; font-weight:600; color:#1c1a2b; overflow-wrap:anywhere; }
.sc-doc-sub{ font-size:12px; color:#82808f; margin-top:1px; }
.sc-ocr-note{ margin:0 6px 8px; font-size:12.5px; color:#a8530a; background:#fdf2e5;
  border-radius:8px; padding:9px 11px; }

.sc-viewer{ border:1px solid #e6e6ee; border-radius:12px; overflow:hidden; margin-bottom:14px; }
.sc-viewer-bar{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:8px 12px; background:#f7f4fa; }
.sc-viewer-name{ font-size:12.5px; color:#56536b; overflow-wrap:anywhere; }
.sc-viewer-actions{ display:flex; align-items:center; gap:8px; flex:none; }
.sc-viewer-open{ padding:5px 11px; font-size:12.5px; display:inline-flex; align-items:center; gap:5px; }
.sc-viewer-open .mi{ font-size:17px; }
.sc-viewer-hint{ font-size:12px; color:#56536b; background:#eef2ff; border-block-end:1px solid #e6e6ee;
  padding:7px 12px; }
.sc-frame{ width:100%; height:520px; border:0; display:block; background:#f0f0f6; }

/* ---- in-app PDF.js viewer ------------------------------------------------- */
.pv{ display:flex; flex-direction:column; }
.pv-bar{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  padding:7px 12px; background:#f7f4fa; border-block-end:1px solid #e6e6ee; }
.pv-nav, .pv-zoom{ display:inline-flex; align-items:center; gap:6px; }
.pv-bar button{ display:inline-flex; align-items:center; gap:4px; border:1px solid #d2d1dd; background:#fff;
  color:#4a0a75; border-radius:8px; padding:5px 9px; cursor:pointer; font-size:12.5px; }
.pv-bar button[disabled]{ opacity:.4; cursor:default; }
.pv-bar button .material-symbols-outlined{ font-size:18px; }
.pv-page{ font-size:12.5px; color:#1c1a2b; font-variant-numeric:tabular-nums; min-width:52px; text-align:center; }
.pv-load{ display:flex; align-items:center; gap:9px; padding:26px 12px; font-size:13px; color:#4a0a75; justify-content:center; }
.pv-error{ display:flex; align-items:center; gap:8px; padding:16px 12px; color:#a81a3c; font-size:13px; }
.pv-error .mi{ font-size:19px; }
.pv-pages{ max-height:min(72vh,720px); overflow-y:auto; overflow-x:auto; background:#e9e7ef; padding:12px;
  display:flex; flex-direction:column; align-items:center; gap:12px; direction:ltr; }
/* height:auto keeps the aspect ratio when max-width scales a wide page down, so a large scanned
   page fits the width instead of being clipped or stretched. */
.pv-canvas{ max-width:100%; height:auto; box-shadow:0 2px 10px rgba(46,20,66,.14); background:#fff; }
/* the page counter ("1 / 3") must not reorder under RTL */
.pv-page{ direction:ltr; }

/* ---- employee avatar photo (preview) -------------------------------------
   ip-avatar-photo appends an <img> over the initials, so the same authorized
   employee/photo/<id> picture used on the transactions cards also shows on the
   Employees list and profile. Preview-only (tracker.css is not on the live
   portal); the initials remain the fallback when there is no image. */
.ip-avatar{ position:relative; overflow:hidden; }
.ip-avatar img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ip-avatar.has-photo .ip-ini{ visibility:hidden; }
.sc-frame-img{ width:100%; max-height:640px; object-fit:contain; display:block; background:#f0f0f6; }

.sc-fields{ display:flex; flex-direction:column; gap:16px; }
.sc-field{ display:flex; flex-direction:column; gap:6px; position:relative; }
.sc-field > label{ font-size:13px; font-weight:600; color:#1c1a2b; }
.sc-field-key{ background:#f7f4fa; border:1px solid #ece0f2; border-radius:12px; padding:14px; }
.sc-need{ background:#fdf2e5; border:1px solid #f3dcc0; border-radius:12px; padding:14px; }
.sc-miss{ box-shadow:0 0 0 2px rgba(168,26,60,.35); border-radius:12px; }
.sc-input{ height:44px; box-sizing:border-box; border:1.5px solid #d2d1dd; border-radius:11px;
  background:#fff; color:#1c1a2b; font-size:14.5px; padding:0 12px; max-width:320px; }
.sc-input:focus{ outline:none; border-color:#662380; box-shadow:0 0 0 3px rgba(102,35,128,.12); }
.sc-input-sm{ max-width:160px; }
.sc-sub-field{ margin-top:10px; display:flex; flex-direction:column; gap:6px; }
.sc-sub-field label{ font-size:12.5px; color:#56536b; }

.sc-badge{ display:inline-flex; align-items:center; font-size:11px; font-weight:700;
  border-radius:999px; padding:2px 9px; width:fit-content; letter-spacing:.01em; }
.sc-badge-auto{ background:#e7f5ed; color:#0f7a46; }
.sc-badge-need{ background:#fdf2e5; color:#a8530a; }
.sc-badge-doc{ background:#eaefff; color:#1c46c4; }
.sc-hint{ font-size:12px; color:#82808f; }
.sc-snip{ font-size:12px; color:#1c46c4; background:#eef2ff; border-radius:7px;
  padding:5px 9px; width:fit-content; max-width:100%; overflow-wrap:anywhere; }
.sc-fromdoc{ background:#f2f5ff; border:1px solid #d7e0ff; border-radius:12px; padding:14px; }
.sc-extracting{ display:flex; align-items:center; gap:9px; margin-top:10px;
  font-size:13px; color:#1c46c4; }

.sc-choice{ display:inline-flex; border:1.5px solid #d2d1dd; border-radius:11px; overflow:hidden; width:fit-content; }
.sc-choice button{ border:0; background:#fff; color:#56536b; font-size:14px; font-weight:600;
  padding:9px 22px; cursor:pointer; }
.sc-choice button + button{ border-inline-start:1.5px solid #d2d1dd; }
.sc-choice button.on{ background:#662380; color:#fff; }

.sc-actions{ margin-top:18px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.ip-btn-primary{ background:#662380; color:#fff; border:0; }
.ip-btn-primary:hover{ background:#571e6d; }
.sc-err{ color:#a81a3c; font-size:13px; }

.sc-result{ }
.sc-headline{ text-align:center; padding:10px 0 16px; border-bottom:1px solid #ece9f2; margin-bottom:14px; }
.sc-total{ font-variant-numeric:tabular-nums; }
.sc-total-num{ font-size:40px; font-weight:800; letter-spacing:-.02em; color:#662380; line-height:1; }
.sc-total-cur{ font-size:18px; font-weight:700; color:#a021b3; }
.sc-total-cap{ font-size:13px; color:#56536b; margin-top:6px; }

.sc-break{ }
.sc-break-row{ display:flex; justify-content:space-between; gap:12px; padding:8px 2px;
  font-size:13.5px; color:#56536b; border-bottom:1px solid #f0f0f6; }
.sc-break-row .ip-num{ font-variant-numeric:tabular-nums; color:#1c1a2b; }
.sc-break-row.sc-sub{ font-weight:700; color:#1c1a2b; }
.sc-break-row.sc-grand{ margin-top:6px; border-top:2px solid #ece9f2; border-bottom:0;
  font-size:16px; font-weight:800; color:#1c1a2b; padding-top:11px; }
.sc-u{ font-size:11px; color:#82808f; font-weight:400; }
.sc-break-note{ font-size:12.5px; color:#a8530a; background:#fdf2e5; border-radius:8px;
  padding:9px 11px; margin:8px 0; }

.sc-legal{ margin-top:16px; background:#f7f4fa; border:1px solid #ece0f2; border-radius:12px; padding:14px 16px; }
.sc-legal-h{ font-size:13px; font-weight:700; color:#4a0a75; margin-bottom:6px; }
.sc-legal p{ margin:4px 0; font-size:12.5px; color:#56536b; line-height:1.6; }
.sc-legal-src{ color:#82808f !important; font-size:11.5px !important; }

/* ---- input text visibility (Smart Calculator + cost search) --------------
   Force dark entered text on the light fields regardless of the viewer's OS/
   Chrome dark mode, browser autofill, or any lower-specificity portal rule.
   color-scheme:light keeps the date picker and number spinners light too. */
.ck-input, .sc-input, .sc-input-sm,
.ck-cost input, .ip-wrap .ck-search input, .sc-fields input{
  color:#1c1a2b !important; -webkit-text-fill-color:#1c1a2b; caret-color:#662380;
  background-color:#fff; color-scheme:light; }
.ck-input:focus, .sc-input:focus, .sc-input-sm:focus{ color:#1c1a2b !important; -webkit-text-fill-color:#1c1a2b; }
.ck-input::placeholder, .sc-input::placeholder, .sc-input-sm::placeholder{ color:#9a97a8 !important; -webkit-text-fill-color:#9a97a8; opacity:1; }
.ck-input:-webkit-autofill, .sc-input:-webkit-autofill, .sc-input-sm:-webkit-autofill{
  -webkit-text-fill-color:#1c1a2b !important; box-shadow:0 0 0 1000px #fff inset; }
.sc-choice button{ color:#56536b; }   /* keep the No/Yes labels visible */
.sc-choice button.on{ color:#fff; }

/* ---- legal hint (near the salary / calculation area) ---------------------- */
.sc-legal-hint{ display:flex; gap:9px; align-items:flex-start; margin-bottom:16px;
  background:#f4ecf9; border:1px solid #e5d4f0; border-radius:11px; padding:11px 13px;
  font-size:12.5px; line-height:1.6; color:#4a0a75; }
.sc-legal-hint .mi{ font-size:19px; flex:none; color:#662380; }

/* ---- contract history / timeline ----------------------------------------- */
.sc-history{ margin-top:12px; border-top:1px solid #ece9f2; padding-top:10px; }
.sc-history-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.sc-history-toggle{ display:inline-flex; align-items:center; gap:6px; border:0; background:transparent;
  cursor:pointer; font-size:13px; font-weight:600; color:#4a0a75; padding:4px 0; }
.sc-cont-chip{ display:inline-flex; align-items:center; gap:4px; font-size:11.5px; font-weight:700;
  border-radius:999px; padding:3px 10px; }
.sc-cont-chip .material-symbols-outlined{ font-size:15px; }
.sc-cont-ok{ background:#e7f5ed; color:#0f7a46; }
.sc-cont-warn{ background:#fdf2e5; color:#a8530a; }
.sc-continuity-warn{ display:flex; gap:9px; align-items:flex-start; margin-bottom:16px;
  background:#fdf2e5; border:1px solid #f3dcc0; border-radius:11px; padding:11px 13px;
  font-size:12.5px; line-height:1.6; color:#8a4b0a; }
.sc-continuity-warn .mi{ font-size:19px; flex:none; color:#a8530a; }
.sc-cw-ev{ margin-top:4px; font-weight:600; }
.sc-history-toggle .mi{ font-size:20px; }
.sc-timeline{ margin-top:8px; display:flex; flex-direction:column; gap:8px; }
.sc-tl-row{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  border:1px solid #e6e6ee; border-radius:10px; padding:9px 12px; background:#fbfaff; }
.sc-tl-main{ min-width:0; }
.sc-tl-type{ font-size:13px; font-weight:600; color:#1c1a2b; overflow-wrap:anywhere; }
.sc-tl-meta{ font-size:12px; color:#56536b; margin-top:2px; display:flex; gap:5px; flex-wrap:wrap; align-items:center; }
.sc-tl-dim{ color:#9a97a8; }
.sc-tl-scan{ color:#a8530a; }
.sc-tl-tags{ display:inline-flex; gap:5px; flex-wrap:wrap; margin-top:3px; }
.sc-tl-view{ flex:none; padding:4px 12px; font-size:12px; }

/* ---- field source line, recorded salary, conflict ------------------------ */
.sc-src{ font-size:11.5px; color:#1c46c4; }
.sc-recorded{ font-size:12px; color:#82808f; background:#f0f0f6; border-radius:8px; padding:7px 10px; margin-top:2px; }
.sc-warn{ background:#fdf2e5; border:1px solid #f3dcc0; border-radius:12px; padding:14px; }
.sc-conflict{ display:flex; gap:8px; align-items:flex-start; margin-top:8px;
  background:#fdecf0; border:1px solid #f3c9d5; border-radius:9px; padding:9px 11px;
  font-size:12.5px; line-height:1.55; color:#8a1330; }
.sc-conflict .mi{ font-size:18px; flex:none; color:#a81a3c; }

.tk-loadwrap .ip-load-box{ gap:14px; }

.ip-load-mark img{ height:38px; width:auto; display:block; }

/* indeterminate: an honest spinner, no number */
.ip-load-ring{ width:44px; height:44px; border-radius:50%;
  border:4px solid #ece3f4; border-top-color:#6b0f96; border-inline-end-color:#a021b3;
  animation:ipSpin .9s linear infinite; }
@keyframes ipSpin{ to{ transform:rotate(360deg); } }

/* determinate: a real percentage (used by company switching) */
.ip-load-prog{ width:100%; display:flex; flex-direction:column; align-items:center; gap:8px; }
.ip-load-bar{ width:100%; height:8px; border-radius:999px; background:#ece3f4; overflow:hidden; }
.ip-load-bar span{ display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg,#662380,#e11b72); transition:width .45s cubic-bezier(.4,0,.2,1);
  min-width:8px; }
[dir="rtl"] .ip-load-bar span{ background:linear-gradient(270deg,#662380,#e11b72); }
.ip-load-pct{ font-size:26px; font-weight:700; letter-spacing:-.02em; color:#2b1440;
  font-variant-numeric:tabular-nums; line-height:1; direction:ltr; }

.ip-load-msg{ font-size:14.5px; font-weight:500; color:#4a4360; line-height:1.5; text-wrap:balance; }
.ip-load-sub{ font-size:14px; font-weight:700; color:#6b0f96; margin-top:-6px; overflow-wrap:anywhere; }

/* failure */
.ip-load-box.is-fail .ip-load-msg{ color:#3a2340; }
.ip-load-x .material-symbols-outlined{ font-size:44px; color:#a81a3c; line-height:1; }
.ip-load-retry{ display:inline-flex; align-items:center; gap:7px;
  font-size:14px; font-weight:700; border:0; border-radius:10px; padding:10px 20px;
  background:#6b0f96; color:#fff; cursor:pointer; }
.ip-load-retry:hover{ background:#4a0a75; }
.ip-load-retry:focus-visible{ outline:2px solid #662380; outline-offset:2px; }
.ip-load-retry .material-symbols-outlined{ font-size:18px; }
.ip-load-acts{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px; }
.ip-load-close{ font-size:14px; font-weight:700; border:1px solid #d9d3e3; border-radius:10px; padding:9px 18px;
  background:#fff; color:#4a4360; cursor:pointer; }
.ip-load-close:hover{ background:#f6f3fa; }
.ip-load-close:focus-visible{ outline:2px solid #662380; outline-offset:2px; }

/* cold-boot splash: pure CSS, no Angular, removed once the app renders */
#ip-boot{ position:fixed; inset:0; z-index:1090;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
  background:#f7f4fa; }
#ip-boot img{ height:40px; width:auto; }
#ip-boot .ip-boot-ring{ width:44px; height:44px; border-radius:50%;
  border:4px solid #ece3f4; border-top-color:#6b0f96; animation:ipSpin .9s linear infinite; }

@media (max-width:600px){
  .ip-load-overlay .ip-load-box{ padding:26px 20px; }
  .tk-loadwrap{ padding:34px 12px; }
}

/* motion is emphasis, not the message: hold everything still for anyone who
   asked for less movement — the percentage, the words and the logo still say
   what is happening. */
@media (prefers-reduced-motion: reduce){
  .ip-load-ring, #ip-boot .ip-boot-ring{ animation:none;
    border-top-color:#6b0f96; border-inline-end-color:#a021b3; opacity:.9; }
  .ip-load-bar span{ transition:none; }
  .ip-load-overlay{ backdrop-filter:none; -webkit-backdrop-filter:none; }
}

/* ===================== HR operations (preview) =====================
   Employee Command Center (hc-), Today (ht-), Renewals (hr-), Requests (rq-),
   Company (hco-), the action drawer (dw-). Built on portal.css tokens; logical
   properties (inline-start/end) so Arabic is native, not mirrored by hand. */
.tone-ok   { --t:var(--ip-ok);    --tw:var(--ip-ok-wash); }
.tone-warn { --t:var(--ip-warn);  --tw:var(--ip-warn-wash); }
.tone-stop { --t:var(--ip-stop);  --tw:var(--ip-stop-wash); }
.tone-idle { --t:var(--ip-ink2);  --tw:var(--ip-idle-wash); }
.tone-brand{ --t:var(--ip-brand); --tw:var(--ip-brand-wash); }
.hc-link{ background:none; border:0; padding:0; color:var(--ip-brand); font-weight:600; font-size:13px; cursor:pointer; }
.hc-link:hover{ color:var(--ip-brand-ink); text-decoration:underline; }
.sk{ background:linear-gradient(90deg,#eeedf4 25%,#f6f5fa 50%,#eeedf4 75%); background-size:400% 100%; animation:skel 1.3s ease-in-out infinite; border-radius:12px; }
@keyframes skel{ 0%{background-position:100% 0} 100%{background-position:0 0} }
@media (prefers-reduced-motion: reduce){ .sk{ animation:none; } }

/* ---------- Command Center ---------- */
.hc{ padding-block:4px 32px; }
.hc-back{ display:inline-flex; align-items:center; gap:4px; font-size:13px; font-weight:600; color:var(--ip-ink3); margin:6px 0 10px; }
.hc-back .material-symbols-outlined{ font-size:18px; }
.hc-head{ background:var(--ip-surface); border:1px solid var(--ip-line); border-radius:16px; padding:22px 22px 14px;
  box-shadow:0 1px 2px rgba(36,31,46,.04); border-top:4px solid var(--t,var(--ip-line)); }
.hc-id{ display:flex; align-items:flex-start; gap:16px; }
.hc-ava{ width:64px; height:64px; border-radius:50%; flex:none; font-size:24px; }
.hc-who{ flex:1 1 auto; min-width:0; }
.hc-who h1{ font-size:22px; font-weight:700; color:var(--ip-ink); margin:2px 0 3px; line-height:1.25; }
.hc-sub{ font-size:14px; color:var(--ip-ink2); }
.hc-dot{ color:var(--ip-ink3); margin:0 4px; }
.hc-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }
.hc-tag{ font-size:12px; color:var(--ip-ink2); background:var(--ip-surface2); border-radius:999px; padding:2px 10px; }
.hc-tag-off{ background:var(--ip-idle-wash); color:var(--ip-ink2); font-weight:600; }
.hc-sit{ flex:none; display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--t); background:var(--tw);
  border-radius:999px; padding:6px 13px 6px 10px; }
.hc-sit .material-symbols-outlined{ font-size:18px; }
.hc-next{ display:flex; align-items:center; gap:16px; margin-top:18px; padding:14px 16px; border-radius:12px; background:var(--tw,var(--ip-surface2)); }
.hc-next-txt{ flex:1 1 auto; display:flex; flex-direction:column; gap:2px; min-width:0; }
.hc-next-k{ font-size:11.5px; font-weight:700; color:var(--t,var(--ip-ink3)); letter-spacing:.02em; }
.hc-next-v{ font-size:15.5px; font-weight:700; color:var(--ip-ink); }
.hc-next-note{ font-size:13px; color:var(--ip-ink2); }
.hc-next-btn{ flex:none; }
.hc-seen{ display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ip-ink3); margin-top:10px; }
.hc-seen .material-symbols-outlined{ font-size:16px; }
.hc-actions{ display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; padding-top:12px; border-top:1px solid var(--ip-line); }
.hc-act{ display:inline-flex; align-items:center; gap:6px; background:var(--ip-surface); border:1px solid var(--ip-line2); color:var(--ip-ink);
  border-radius:10px; padding:7px 12px; font-size:13px; font-weight:600; cursor:pointer; }
.hc-act:hover{ border-color:var(--ip-brand); color:var(--ip-brand-ink); background:var(--ip-brand-wash); }
.hc-act .material-symbols-outlined{ font-size:18px; color:var(--ip-brand); }
.hc-caret{ font-size:18px !important; color:var(--ip-ink3) !important; }
.hc-more{ position:relative; }
.hc-menu{ position:absolute; top:calc(100% + 6px); inset-inline-start:0; z-index:30; min-width:240px; background:#fff; border:1px solid var(--ip-line);
  border-radius:12px; box-shadow:0 12px 32px rgba(36,31,46,.14); padding:6px; }
.hc-menu button{ display:block; width:100%; text-align:start; background:none; border:0; padding:9px 12px; border-radius:8px; font-size:13.5px; color:var(--ip-ink); cursor:pointer; }
.hc-menu button:hover{ background:var(--ip-brand-wash); color:var(--ip-brand-ink); }

.hc-strip{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin-top:14px; }
.hc-chip{ position:relative; background:var(--ip-surface); border:1px solid var(--ip-line); border-radius:12px; padding:12px 14px 12px;
  border-inline-start:4px solid var(--t); min-height:78px; }
.hc-chip-t{ font-size:12px; font-weight:600; color:var(--ip-ink3); padding-inline-end:22px; }
.hc-chip-v{ font-size:14px; font-weight:700; color:var(--t); margin-top:6px; line-height:1.3; }
.tone-ok .hc-chip-v, .hc-chip.tone-ok .hc-chip-v{ color:var(--ip-ink); }
.hc-chip-d{ font-size:12px; color:var(--ip-ink3); margin-top:2px; }
.hc-chip-view{ position:absolute; top:8px; inset-inline-end:8px; background:none; border:0; color:var(--ip-ink3); cursor:pointer; padding:2px; border-radius:6px; }
.hc-chip-view:hover{ color:var(--ip-brand); background:var(--ip-brand-wash); }
.hc-chip-view .material-symbols-outlined{ font-size:18px; }

.hc-trio{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:12px; align-items:start; }
.hc-card{ background:var(--ip-surface); border:1px solid var(--ip-line); border-radius:14px; padding:16px 18px 18px; min-height:210px; }
.hc-card-h{ display:flex; align-items:center; gap:8px; font-size:14px; font-weight:700; color:var(--ip-ink); margin-bottom:12px; }
.hc-card-h .material-symbols-outlined{ font-size:20px; color:var(--ip-brand); }
.hc-proc + .hc-proc{ border-top:1px solid var(--ip-line); margin-top:12px; padding-top:12px; }
.hc-proc-t{ font-size:14px; font-weight:600; color:var(--ip-ink); line-height:1.35; }
.hc-proc-m{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; margin-top:6px; font-size:12.5px; color:var(--ip-ink2); }
.hc-proc-s{ font-size:12.5px; color:var(--ip-ink3); margin:6px 0 4px; }
.hc-you{ color:var(--ip-brand-ink); font-weight:700; }
.hc-slow{ display:flex; gap:6px; align-items:center; font-size:12.5px; color:var(--ip-warn); background:var(--ip-warn-wash); border-radius:8px; padding:6px 9px; margin:6px 0; }
.hc-slow .material-symbols-outlined{ font-size:16px; }
.hc-verdict{ display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:700; color:var(--t); background:var(--tw); border-radius:999px; padding:4px 11px 4px 8px; }
.hc-verdict .material-symbols-outlined{ font-size:16px; }
.hc-ready-doc{ font-size:13.5px; color:var(--ip-ink); font-weight:600; margin:10px 0 6px; }
.hc-reasons{ margin:0; padding-inline-start:18px; font-size:13px; color:var(--ip-ink2); line-height:1.6; }
.hc-ready-ok{ font-size:13px; color:var(--ip-ok); }
.hc-est{ font-size:13px; color:var(--ip-ink2); margin-top:8px; }
.hc-empty{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; color:var(--ip-ink3); font-size:13.5px; padding:18px 8px; }
.hc-empty .material-symbols-outlined{ font-size:28px; color:var(--ip-idle); }
.hc-empty-s{ font-size:12.5px; }
.hc-leaving{ margin-top:14px; padding-top:12px; border-top:1px dashed var(--ip-line2); display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.hc-leaving-t{ font-size:12.5px; font-weight:700; color:var(--ip-warn); }
.hc-mini-load{ display:flex; align-items:center; gap:10px; color:var(--ip-ink3); font-size:13px; padding:12px 0; }
.hc-kv > div{ display:flex; justify-content:space-between; gap:10px; font-size:13.5px; padding:6px 0; border-bottom:1px solid var(--ip-surface2); }
.hc-kv > div span{ color:var(--ip-ink2); }
.hc-kv > div b{ color:var(--ip-ink); font-variant-numeric:tabular-nums; }
.hc-kv + .hc-kv{ margin-top:6px; }
.hc-src{ font-size:11.5px; color:var(--ip-ink3); border:0 !important; padding-top:3px !important; }
.hc-cont{ display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:600; color:var(--ip-ok); background:var(--ip-ok-wash); border-radius:999px; padding:2px 9px; margin-top:8px; }
.hc-cont .material-symbols-outlined{ font-size:15px; }
.hc-warn{ display:flex; gap:8px; font-size:13px; line-height:1.45; color:var(--ip-warn); background:var(--ip-warn-wash); border-radius:10px; padding:9px 11px; margin-top:10px; }
.hc-warn .material-symbols-outlined{ font-size:18px; flex:none; }
.hc-eos{ margin-top:12px; background:var(--ip-brand-wash); border-radius:12px; padding:12px 14px; }
.hc-eos-none{ background:var(--ip-surface2); }
.hc-eos-k{ font-size:12.5px; color:var(--ip-ink2); }
.hc-eos-v{ font-size:22px; font-weight:800; color:var(--ip-brand-ink); margin-top:2px; font-variant-numeric:tabular-nums; }
.hc-eos-u{ font-size:14px; font-weight:600; color:var(--ip-ink); margin-top:3px; }
.hc-eos-s{ font-size:11.5px; color:var(--ip-ink3); margin-top:4px; }
.hc-btns{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.hc-big{ font-size:24px; font-weight:800; color:var(--ip-ink); font-variant-numeric:tabular-nums; }
.hc-big-s{ font-size:12.5px; color:var(--ip-ink3); margin-top:2px; }
.hc-split{ display:grid; grid-template-columns:1fr 1fr; gap:6px 14px; margin-top:12px; }
.hc-split > div{ display:flex; justify-content:space-between; font-size:13px; border-bottom:1px solid var(--ip-surface2); padding-bottom:5px; }
.hc-split span{ color:var(--ip-ink2); } .hc-split b{ font-variant-numeric:tabular-nums; color:var(--ip-ink); }
.hc-pen b{ color:var(--ip-stop); }
.hc-fine{ font-size:11.5px; color:var(--ip-ink3); margin:10px 0 8px; }
.hc-costlist{ margin-top:8px; }
.hc-costrow{ display:flex; justify-content:space-between; gap:10px; font-size:12.5px; padding:6px 0; border-top:1px solid var(--ip-surface2); }
.hc-costrow b{ font-variant-numeric:tabular-nums; }

.hc-sec{ background:var(--ip-surface); border:1px solid var(--ip-line); border-radius:14px; padding:16px 18px; margin-top:12px; }
.hc-sec-h{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.hc-sec-h h2{ font-size:16px; font-weight:700; color:var(--ip-ink); margin:0; }
.hc-older{ background:var(--ip-surface2); border:0; border-radius:8px; padding:6px 12px; font-size:12.5px; font-weight:600; color:var(--ip-ink2); cursor:pointer; margin-bottom:8px; }
.hc-year{ display:grid; grid-template-columns:64px 1fr; gap:12px; }
.hc-year + .hc-year{ border-top:1px solid var(--ip-surface2); padding-top:10px; margin-top:4px; }
.hc-year-n{ font-size:15px; font-weight:800; color:var(--ip-brand-ink); padding-top:6px; font-variant-numeric:tabular-nums; }
.hc-tl{ list-style:none; margin:0; padding:0; }
.hc-tl li{ display:flex; gap:10px; padding:6px 0; position:relative; }
.hc-tl li::before{ content:''; position:absolute; inset-inline-start:13px; top:34px; bottom:-6px; width:2px; background:var(--ip-surface2); }
.hc-tl li:last-child::before{ display:none; }
.hc-tl-i{ width:28px; height:28px; flex:none; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:16px !important;
  background:var(--ip-surface2); color:var(--ip-ink2); }
.k-join .hc-tl-i{ background:var(--ip-ok-wash); color:var(--ip-ok); }
.k-renewal .hc-tl-i{ background:var(--ip-brand-wash); color:var(--ip-brand); }
.k-exit .hc-tl-i, .k-confirm_left .hc-tl-i{ background:var(--ip-warn-wash); color:var(--ip-warn); }
.k-hr_document .hc-tl-i{ background:#eef2ff; color:#3949ab; }
.hc-tl-b{ min-width:0; padding-top:3px; }
.hc-tl-t{ font-size:13.5px; font-weight:600; color:var(--ip-ink); }
.hc-tl-m{ font-size:12.5px; color:var(--ip-ink3); margin-top:2px; }
.hc-tl-m .ip-pill{ font-size:11px; padding:1px 8px; }
.hc-vault{ display:flex; flex-direction:column; }
.hc-doc + .hc-doc{ border-top:1px solid var(--ip-surface2); }
.hc-doc-main{ display:flex; align-items:center; gap:12px; padding:10px 0; }
.hc-doc-i{ color:var(--ip-brand); font-size:22px !important; flex:none; }
.hc-doc-b{ flex:1 1 auto; min-width:0; }
.hc-doc-t{ font-size:13.5px; font-weight:600; color:var(--ip-ink); }
.hc-doc-m{ font-size:12.5px; color:var(--ip-ink3); margin-top:1px; }
.hc-doc-btn{ padding:5px 12px !important; font-size:12.5px !important; flex:none; }
.hc-hist-t{ display:inline-flex; align-items:center; gap:4px; background:none; border:0; color:var(--ip-ink3); font-size:12.5px; cursor:pointer; margin:-4px 0 6px 34px; }
[dir="rtl"] .hc-hist-t{ margin:-4px 34px 6px 0; }
.hc-hist-t .material-symbols-outlined{ font-size:16px; }
.hc-hist{ margin:0 0 8px; padding-inline-start:34px; }
.hc-hist-r{ display:flex; justify-content:space-between; font-size:12.5px; color:var(--ip-ink2); padding:5px 0; border-top:1px dashed var(--ip-surface2); }
.hc-note{ display:flex; align-items:flex-start; gap:10px; padding:10px 0; border-top:1px solid var(--ip-surface2); }
.hc-note:first-of-type{ border-top:0; }
.hc-note-i{ color:var(--ip-ink3); font-size:20px !important; flex:none; }
.hc-note-imp .hc-note-i{ color:#c98a00; }
.hc-note-b{ flex:1 1 auto; min-width:0; }
.hc-note-t{ font-size:13.5px; color:var(--ip-ink); white-space:pre-line; }
.hc-note-m{ font-size:12px; color:var(--ip-ink3); margin-top:2px; }
.hc-fu{ color:var(--ip-brand-ink); font-weight:600; }
.hc-fu-late{ color:var(--ip-stop); }
.hc-skel-head{ display:flex; gap:16px; align-items:center; background:#fff; border:1px solid var(--ip-line); border-radius:16px; padding:22px; }
.sk-ava{ width:64px; height:64px; border-radius:50%; }
.sk-lines{ flex:1; display:flex; flex-direction:column; gap:10px; } .sk-l1{ height:20px; width:40%; } .sk-l2{ height:14px; width:60%; }
.hc-skel-strip{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-top:14px; } .hc-skel-strip .sk{ height:78px; }
.hc-skel-trio{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:12px; } .hc-skel-trio .sk{ height:200px; }

/* ---------- Today ---------- */
.ht, .hr, .hco{ padding-block:8px 32px; }
.ht-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin:8px 0 16px; }
.ht-head h1{ font-size:26px; font-weight:800; color:var(--ip-ink); margin:0; }
.ht-head p{ font-size:14px; color:var(--ip-ink3); margin:4px 0 0; }
.ht-skel .sk{ height:120px; margin-bottom:12px; }
.ht-group{ background:var(--ip-surface); border:1px solid var(--ip-line); border-radius:16px; padding:8px 18px 10px; margin-bottom:12px; }
.ht-gh{ display:flex; align-items:center; gap:10px; padding:10px 0 6px; }
.ht-gh > .material-symbols-outlined{ width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:19px; color:var(--t); background:var(--tw); }
.ht-gh h2{ font-size:16px; font-weight:700; color:var(--ip-ink); margin:0; }
.ht-sug{ font-size:11.5px; font-weight:700; color:var(--ip-ink3); background:var(--ip-surface2); border-radius:999px; padding:2px 9px; }
.ht-gp{ font-size:13px; color:var(--ip-ink2); margin:0 0 6px; line-height:1.5; }
.ht-row{ display:flex; align-items:center; gap:12px; padding:11px 0; border-top:1px solid var(--ip-surface2); }
.ht-gh + .ht-row, .ht-gp + .ht-row{ border-top:0; }
.ht-item > .ht-row{ border-top:0; }
.ht-ic{ width:30px; height:30px; flex:none; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:17px !important; color:var(--t); background:var(--tw); }
.ht-body{ flex:1 1 auto; min-width:0; }
.ht-line{ font-size:14px; color:var(--ip-ink); line-height:1.4; }
.ht-meta{ font-size:12.5px; color:var(--ip-ink3); margin-top:2px; }
.ht-name{ background:none; border:0; padding:0; font:inherit; font-weight:700; color:var(--ip-ink); cursor:pointer; }
.ht-name:hover{ color:var(--ip-brand); text-decoration:underline; }
.ht-btn{ flex:none; padding:6px 13px !important; font-size:13px !important; }
.ht-late{ color:var(--ip-stop); font-weight:700; }
.ht-sum{ border-top:1px solid var(--ip-surface2); }
.ht-sum-h{ display:flex; align-items:center; gap:12px; width:100%; background:none; border:0; padding:11px 0; cursor:pointer; text-align:start; }
.ht-sum-h .ht-line{ flex:1; }
.ht-row-sub{ padding-inline-start:42px; }
.ht-more{ padding:8px 0 4px; }
.ht-note{ display:flex; gap:8px; align-items:flex-start; font-size:13px; color:var(--ip-ink2); background:var(--ip-surface2); border-radius:10px; padding:10px 12px; margin:8px 0 6px; }
.ht-note .material-symbols-outlined{ font-size:18px; color:var(--ip-ink3); }
.ht-money .ht-mrow{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px; padding:10px 0; border-top:1px solid var(--ip-surface2); font-size:14px; }
.ht-money .ht-gh + .ht-mrow{ border-top:0; }
.ht-mrow span{ flex:1 1 260px; color:var(--ip-ink2); }
.ht-mrow b{ font-size:15px; color:var(--ip-ink); font-variant-numeric:tabular-nums; }
.ht-mrow small{ font-size:12.5px; color:var(--ip-ink3); }
.ht-good{ color:var(--ip-ok) !important; }
.ht-calm{ display:flex; align-items:center; gap:12px; background:var(--ip-ok-wash); color:var(--ip-ok); border-radius:14px; padding:14px 18px; font-size:15px; margin-top:4px; }
.ht-calm .material-symbols-outlined{ font-size:26px; }
.ht-calm b{ color:var(--ip-ok); }
.ht-calm-top{ margin-bottom:12px; } .ht-calm-top span{ display:block; font-size:13.5px; color:var(--ip-ink2); margin-top:2px; }

/* ---------- Today, redesigned ----------
   Verdict first (the one sentence that answers "do I need to do anything?"),
   then counts that jump to their group, then where everyone stands, then the
   groups. Colour always travels with a number and a word. */
.ht-hero{ background:var(--ip-surface); border:1px solid var(--ip-line); border-radius:18px; padding:18px 18px 16px; margin-bottom:12px;
  border-inline-start:5px solid var(--ip-stop); }
.ht-hero.is-calm{ border-inline-start-color:var(--ip-ok); }
.ht-verdict{ display:flex; gap:14px; align-items:flex-start; }
.ht-verdict > .material-symbols-outlined{ flex:none; width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:24px; color:var(--ip-stop); background:var(--ip-stop-wash); }
.ht-hero.is-calm .ht-verdict > .material-symbols-outlined{ color:var(--ip-ok); background:var(--ip-ok-wash); }
.ht-verdict h2{ margin:0; font-size:21px; line-height:1.3; font-weight:800; color:var(--ip-ink); text-wrap:balance; }
.ht-verdict p{ margin:4px 0 0; font-size:14px; line-height:1.5; color:var(--ip-ink2); max-width:70ch; }

.ht-chips{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; margin-top:16px; }
.ht-chip{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:start; cursor:pointer;
  background:var(--tw); border:1px solid transparent; border-radius:12px; padding:10px 12px; min-width:0; font:inherit;
  transition:border-color .15s, transform .15s; }
.ht-chip b{ font-size:24px; line-height:1.1; font-weight:800; color:var(--t); font-variant-numeric:tabular-nums; }
.ht-chip span{ font-size:12.5px; line-height:1.3; font-weight:600; color:var(--ip-ink2); }
.ht-chip:hover{ border-color:var(--t); }
.ht-chip:focus-visible{ outline:2px solid var(--ip-brand); outline-offset:2px; }
.ht-chip.zero{ background:var(--ip-surface2); cursor:default; }
.ht-chip.zero b{ color:var(--ip-ink3); }
.ht-chip.zero:hover{ border-color:transparent; }

.ht-dist{ background:var(--ip-surface); border:1px solid var(--ip-line); border-radius:16px; padding:14px 18px 12px; margin-bottom:12px; }
.ht-dist-h{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; margin-bottom:10px; }
.ht-dist-h h3{ margin:0; font-size:15px; font-weight:700; color:var(--ip-ink); }
.ht-dist-h span{ font-size:12.5px; color:var(--ip-ink3); }
.ht-bar{ display:flex; gap:2px; height:16px; border-radius:8px; overflow:hidden; background:var(--ip-surface); }
.ht-seg{ flex:1 1 0; min-width:4px; border:0; padding:0; cursor:pointer; transition:filter .15s; }
.ht-seg:hover, .ht-seg:focus-visible{ filter:brightness(1.12) saturate(1.1); outline:none; }
.ht-legend{ display:flex; flex-wrap:wrap; gap:4px 6px; margin-top:10px; }
.ht-leg{ display:inline-flex; align-items:center; gap:6px; background:none; border:0; border-radius:8px; padding:4px 8px; font:inherit; font-size:13px;
  color:var(--ip-ink2); cursor:pointer; }
.ht-leg:hover{ background:var(--ip-surface2); }
.ht-leg i{ width:10px; height:10px; border-radius:3px; flex:none; }
.ht-leg b{ color:var(--ip-ink); font-variant-numeric:tabular-nums; }

.ht-cols{ display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:12px; align-items:start; }
.ht-col{ min-width:0; }
.ht-group{ scroll-margin-top:84px; transition:box-shadow .3s; }
.ht-group.ht-flash{ box-shadow:0 0 0 3px var(--ip-brand-wash), 0 0 0 4px var(--ip-brand); }
.ht-gh h2{ flex:1; }
.ht-gn{ font-size:12.5px; font-weight:800; color:var(--t); background:var(--tw); border-radius:999px; padding:2px 10px; font-variant-numeric:tabular-nums; }

.ht-item{ border-top:1px solid var(--ip-surface2); }
.ht-gh + .ht-item, .ht-gp + .ht-item{ border-top:0; }
.ht-item .ht-name{ display:block; max-width:100%; text-align:start; font-size:14.5px; line-height:1.35; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ht-item .ht-line{ font-size:13.5px; color:var(--ip-ink2); margin-top:1px; }
.ht-ava{ width:36px !important; height:36px !important; font-size:15px; }
.ht-ava-s{ width:30px !important; height:30px !important; font-size:13px; }
.ht-plus{ color:var(--ip-ink3); font-weight:700; }
.ht-due{ flex:none; font-size:12.5px; font-weight:700; color:var(--t); background:var(--tw); border-radius:999px; padding:3px 10px; white-space:nowrap;
  font-variant-numeric:tabular-nums; }
.ht-exp{ flex:none; width:30px; height:30px; border-radius:50%; border:0; background:none; color:var(--ip-ink3); cursor:pointer;
  display:flex; align-items:center; justify-content:center; padding:0; }
.ht-exp:hover{ background:var(--ip-surface2); color:var(--ip-ink); }
.ht-exp .material-symbols-outlined{ font-size:22px; transition:transform .2s; }
.ht-item.open .ht-exp .material-symbols-outlined{ transform:rotate(180deg); }
.ht-why{ margin:0 0 12px; padding:12px 14px; margin-inline-start:48px; background:var(--ip-page); border-radius:12px; font-size:13.5px; color:var(--ip-ink2); line-height:1.55; }
.ht-why p{ margin:0 0 8px; }
.ht-why dl{ display:grid; grid-template-columns:max-content 1fr; gap:4px 14px; margin:0 0 8px; }
.ht-why dt{ font-weight:600; color:var(--ip-ink3); }
.ht-why dd{ margin:0; color:var(--ip-ink); overflow-wrap:anywhere; }
.ht-reasons{ list-style:none; margin:0 0 8px; padding:0; display:flex; flex-direction:column; gap:4px; }
.ht-reasons li{ display:flex; align-items:center; gap:8px; color:var(--ip-ink); font-weight:600; }
.ht-reasons .material-symbols-outlined{ font-size:18px; color:var(--ip-stop); }
.ht-fyi{ font-size:12.5px; color:var(--ip-ink3); }
.ht-links{ display:flex; flex-wrap:wrap; gap:6px 18px; }

.ht-mbars{ display:flex; flex-direction:column; gap:2px; margin:4px 0 10px; }
.ht-mbar{ display:grid; grid-template-columns:minmax(90px,38%) 1fr 34px; align-items:center; gap:10px; background:none; border:0; border-radius:8px;
  padding:5px 6px; font:inherit; font-size:13px; color:var(--ip-ink2); cursor:pointer; text-align:start; }
.ht-mbar:hover{ background:var(--ip-surface2); }
.ht-mbar.on{ background:var(--ip-warn-wash); color:var(--ip-ink); font-weight:600; }
.ht-mbar-l{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ht-mbar-t{ height:8px; border-radius:4px; background:var(--ip-surface2); overflow:hidden; }
.ht-mbar-t i{ display:block; height:100%; border-radius:4px; background:#dd8418; }
.ht-mbar b{ text-align:end; color:var(--ip-ink); font-variant-numeric:tabular-nums; }
.ht-mlist{ border-top:1px solid var(--ip-surface2); }
.ht-mhead{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px; padding:10px 0 2px; font-size:13px; font-weight:700; color:var(--ip-ink); }
.ht-mrowp{ display:flex; align-items:center; gap:10px; padding:9px 0; border-top:1px solid var(--ip-surface2); }
.ht-mhead + .ht-mrowp, .ht-mlist > .ht-mrowp:first-child{ border-top:0; }
.ht-mrowp .ht-name{ display:block; max-width:100%; text-align:start; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.ht-cmp{ display:flex; flex-direction:column; gap:8px; padding:4px 0 12px; }
.ht-cmp-r{ display:grid; grid-template-columns:92px 1fr auto; align-items:center; gap:10px; font-size:13px; color:var(--ip-ink2); }
.ht-cmp-t{ height:10px; border-radius:5px; background:var(--ip-surface2); overflow:hidden; }
.ht-cmp-t i{ display:block; height:100%; min-width:2px; border-radius:5px; background:var(--ip-line2); }
.ht-cmp-t i.now{ background:var(--ip-brand); }
.ht-cmp-r b{ font-size:14px; color:var(--ip-ink); font-variant-numeric:tabular-nums; white-space:nowrap; }
.ht-cmp small{ font-size:12px; color:var(--ip-ink3); }
.ht-money .ht-cmp + .ht-mrow{ border-top:1px solid var(--ip-surface2); }
.ht-col-side .ht-mrow span{ flex:1 1 180px; }

/* skeletons: the page's real shape, with a plain sentence of what is loading */
.ip-sk-cap{ display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:var(--ip-ink2); margin:2px 0 12px; }
.ip-sk-cap i{ width:8px; height:8px; border-radius:50%; background:var(--ip-brand); flex:none; animation:ipDot 1.1s ease-in-out infinite; }
@keyframes ipDot{ 0%,100%{ opacity:.25; transform:scale(.8) } 50%{ opacity:1; transform:scale(1) } }
.ip-updating{ margin-bottom:8px; }
.ip-stale{ opacity:.55; transition:opacity .2s; pointer-events:none; }
.ip-sk-rows, .ip-sk-card{ background:var(--ip-surface); border:1px solid var(--ip-line); border-radius:16px; padding:6px 18px; }
.ip-sk-flat{ border:0; padding:0; background:none; }
.ip-sk-cards{ display:flex; flex-direction:column; gap:12px; }
.ip-sk-card{ padding:10px 18px 16px; }
.ip-sk-row{ display:flex; align-items:center; gap:12px; padding:12px 0; }
.ip-sk-row + .ip-sk-row{ border-top:1px solid var(--ip-surface2); }
.ip-sk-ava{ width:36px; height:36px; border-radius:50% !important; flex:none; }
.ip-sk-txt{ flex:1; display:flex; flex-direction:column; gap:7px; min-width:0; }
.ip-sk-txt .sk{ height:12px; border-radius:6px; width:42%; }
.ip-sk-txt .sk + .sk{ width:68%; height:10px; }
.ip-sk-btn{ width:96px; height:30px; border-radius:999px !important; flex:none; }
.ip-sk-rail{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-top:4px; }
.ip-sk-rail .sk{ height:40px; border-radius:10px; }
.ht-sk .ht-sk-hero{ height:128px; border-radius:18px; margin-bottom:12px; }
.ht-sk-chips{ display:none; }
.ht-sk .ht-sk-bar{ height:86px; border-radius:16px; margin-bottom:12px; }
.ht-sk-group{ background:var(--ip-surface); border:1px solid var(--ip-line); border-radius:16px; padding:6px 18px; margin-bottom:12px; }
.ht-sk .ht-sk-side{ height:260px; border-radius:16px; }
.hc-pre-name{ font-size:22px; font-weight:800; color:var(--ip-ink); line-height:1.3; }
.hc-skel-head .ip-sk-cap{ margin:4px 0 0; }
@media (prefers-reduced-motion: reduce){ .ip-sk-cap i{ animation:none; opacity:.7; } .ht-chip, .ht-exp .material-symbols-outlined, .ht-group{ transition:none; } }

/* ---------- Renewals ---------- */
.hr-bar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.hr-win{ display:inline-flex; align-items:center; gap:4px; background:var(--ip-surface); border:1px solid var(--ip-line); border-radius:12px; padding:4px; }
.hr-win-l{ font-size:12.5px; color:var(--ip-ink3); padding:0 8px; }
.hr-win button{ border:0; background:none; border-radius:9px; padding:6px 12px; font-size:13px; font-weight:600; color:var(--ip-ink2); cursor:pointer; }
.hr-win button.on{ background:var(--ip-brand); color:#fff; }
.hr-sel{ display:flex; gap:8px; }
.hr-selin{ height:38px !important; max-width:220px !important; font-size:13.5px !important; }
.hr-tabs{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.hr-tabs button{ display:inline-flex; align-items:center; gap:6px; border:1px solid var(--ip-line); background:var(--ip-surface); border-radius:999px; padding:6px 13px; font-size:13px; font-weight:600; color:var(--ip-ink2); cursor:pointer; }
.hr-tabs button.on{ border-color:var(--ip-brand); background:var(--ip-brand-wash); color:var(--ip-brand-ink); }
.hr-tab-q{ margin-inline-start:auto; }
.hr-n{ font-size:11.5px; background:var(--ip-surface2); border-radius:999px; padding:0 7px; color:var(--ip-ink2); }
.hr-tabs button.on .hr-n{ background:#fff; }
.hr-list{ background:var(--ip-surface); border:1px solid var(--ip-line); border-radius:16px; padding:4px 16px; }
.hr-empty{ padding:30px 0; }
.hr-row{ display:flex; align-items:center; gap:16px; padding:14px 0; border-top:1px solid var(--ip-surface2); }
.hr-row:first-of-type{ border-top:0; }
.hr-when{ width:104px; flex:none; display:flex; flex-direction:column; gap:2px; }
.hr-when b{ font-size:14px; color:var(--t); }
.hr-when span{ font-size:12px; color:var(--ip-ink3); }
.hr-main{ flex:1 1 auto; min-width:0; }
.hr-name{ background:none; border:0; padding:0; font-size:14.5px; font-weight:700; color:var(--ip-ink); cursor:pointer; text-align:start; }
.hr-name:hover{ color:var(--ip-brand); text-decoration:underline; }
.hr-doc{ font-size:13px; color:var(--ip-ink2); margin-top:2px; }
.hr-cat{ font-size:11.5px; background:var(--ip-surface2); border-radius:999px; padding:1px 8px; margin-inline-start:6px; }
.hr-why{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin-top:8px; }
.hr-reason{ font-size:12.5px; color:var(--ip-ink2); }
.hr-reason + .hr-reason::before{ content:'·'; margin-inline-end:8px; color:var(--ip-ink3); }
.hr-side{ flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.hr-est{ text-align:end; font-size:12px; color:var(--ip-ink3); }
.hr-est b{ display:block; font-size:14px; color:var(--ip-ink); font-variant-numeric:tabular-nums; }
.hr-foot{ font-size:12px; color:var(--ip-ink3); margin-top:12px; line-height:1.5; }

/* ---------- Requests / Company ---------- */
.tk-req-mode .tk-search, .tk-req-mode .tk-filters, .tk-req-mode .tk-people, .tk-req-mode .tk-picked,
.tk-req-mode .tk-loadwrap, .tk-req-mode .tk-empty, .tk-req-mode .tk-list, .tk-req-mode .tk-more{ display:none !important; }
.tk-focus{ box-shadow:0 0 0 2px var(--ip-brand), 0 8px 24px rgba(107,15,150,.12) !important; }
.rq{ margin-top:12px; }
.rq-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.rq-head p{ margin:0; font-size:13.5px; color:var(--ip-ink2); }
.rq-row{ display:flex; align-items:center; gap:12px; padding:12px 14px; background:var(--ip-surface); border:1px solid var(--ip-line); border-radius:12px; margin-bottom:8px; }
.rq-note{ font-style:italic; }
.hco-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.hco-card{ display:flex; flex-direction:column; gap:6px; background:var(--ip-surface); border:1px solid var(--ip-line); border-radius:14px; padding:16px; color:var(--ip-ink); }
.hco-card:hover{ border-color:var(--ip-brand); box-shadow:0 6px 20px rgba(107,15,150,.08); color:var(--ip-ink); text-decoration:none; }
.hco-card .material-symbols-outlined{ font-size:26px; color:var(--ip-brand); }
.hco-card b{ font-size:15px; } .hco-card span:last-child{ font-size:12.5px; color:var(--ip-ink3); line-height:1.45; }
.hco-alert{ display:flex; justify-content:space-between; align-items:center; padding:9px 0; border-top:1px solid var(--ip-surface2); font-size:13.5px; }

/* ---------- + Create (header) ---------- */
.ip-create{ position:relative; margin-inline-start:8px; }
.ip-create-btn{ display:inline-flex !important; align-items:center; gap:4px; padding:7px 13px !important; }
.ip-create-btn .material-symbols-outlined{ font-size:19px; }
.ip-create-menu{ position:absolute; top:calc(100% + 8px); inset-inline-end:0; z-index:60; min-width:250px; background:#fff; border:1px solid var(--ip-line);
  border-radius:12px; box-shadow:0 14px 36px rgba(36,31,46,.16); padding:6px; }
.ip-create-menu button, .ip-create-menu a{ display:flex; align-items:center; gap:10px; width:100%; background:none; border:0; padding:10px 12px; border-radius:8px;
  font-size:13.5px; color:var(--ip-ink); cursor:pointer; text-align:start; }
.ip-create-menu button:hover, .ip-create-menu a:hover{ background:var(--ip-brand-wash); color:var(--ip-brand-ink); text-decoration:none; }
.ip-create-menu .material-symbols-outlined{ font-size:19px; color:var(--ip-brand); }

/* ---------- action drawer ---------- */
.dw-overlay{ position:fixed; inset:0; background:rgba(36,31,46,.38); z-index:1040; }
.dw{ position:fixed; top:0; bottom:0; inset-inline-end:0; width:min(440px,100vw); background:#fff; z-index:1050; display:flex; flex-direction:column;
  box-shadow:-12px 0 40px rgba(36,31,46,.18); animation:dwIn .18s ease-out; }
[dir="rtl"] .dw{ box-shadow:12px 0 40px rgba(36,31,46,.18); }
.dw-wide{ width:min(860px,100vw); }
@keyframes dwIn{ from{ transform:translateX(24px); opacity:.4 } to{ transform:none; opacity:1 } }
[dir="rtl"] .dw{ animation-name:dwInR; } @keyframes dwInR{ from{ transform:translateX(-24px); opacity:.4 } to{ transform:none; opacity:1 } }
@media (prefers-reduced-motion: reduce){ .dw{ animation:none; } }
.dw-h{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding:18px 20px 12px; border-bottom:1px solid var(--ip-line); }
.dw-t{ font-size:17px; font-weight:700; color:var(--ip-ink); }
.dw-s{ font-size:13px; color:var(--ip-ink3); margin-top:2px; }
.dw-x{ background:none; border:0; color:var(--ip-ink3); cursor:pointer; padding:4px; border-radius:8px; }
.dw-x:hover{ background:var(--ip-surface2); color:var(--ip-ink); }
.dw-b{ flex:1; overflow:auto; padding:16px 20px 24px; }
.dw-l{ display:block; font-size:12.5px; font-weight:600; color:var(--ip-ink2); margin:12px 0 6px; }
.dw-in{ max-width:none !important; width:100%; }
.dw-ta{ height:auto !important; padding:9px 12px !important; line-height:1.5; resize:vertical; }
.dw-2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.dw-req{ color:var(--ip-stop); }
.dw-callout{ display:flex; gap:10px; font-size:13px; line-height:1.5; color:var(--ip-ink); background:var(--ip-warn-wash); border-radius:10px; padding:11px 12px; margin-top:14px; }
.dw-callout .material-symbols-outlined{ color:var(--ip-warn); font-size:20px; flex:none; }
.dw-callout-soft{ background:var(--ip-brand-wash); margin-top:0; } .dw-callout-soft .material-symbols-outlined{ color:var(--ip-brand); }
.dw-check{ display:flex; align-items:flex-start; gap:9px; font-size:13.5px; color:var(--ip-ink); margin-top:12px; cursor:pointer; font-weight:500; }
.dw-check input{ margin-top:3px; width:16px; height:16px; accent-color:var(--ip-brand); flex:none; }
.dw-primary{ width:100%; margin-top:16px; padding:11px !important; font-size:14.5px !important; }
.dw-primary[disabled]{ opacity:.5; cursor:not-allowed; }
.dw-err{ color:var(--ip-stop); font-size:13px; margin-top:10px; }
.dw-load{ display:flex; align-items:center; gap:10px; color:var(--ip-ink3); font-size:13px; padding:10px 0; }
.dw-file{ position:relative; display:flex; align-items:center; gap:10px; border:1.5px dashed var(--ip-line2); border-radius:12px; padding:14px; cursor:pointer; font-size:13px; color:var(--ip-ink2); }
.dw-file:hover{ border-color:var(--ip-brand); background:var(--ip-brand-wash); }
.dw-file input{ position:absolute; opacity:0; width:1px; height:1px; }
.dw-file .material-symbols-outlined{ color:var(--ip-brand); }
.dw-lead{ font-size:13.5px; line-height:1.55; color:var(--ip-ink2); margin:0 0 12px; }
.dw-opts{ display:flex; flex-direction:column; gap:8px; }
.dw-opt{ display:flex; align-items:flex-start; gap:10px; border:1.5px solid var(--ip-line); border-radius:12px; padding:12px; cursor:pointer; font-weight:400; }
.dw-opt input{ position:absolute; opacity:0; }
.dw-opt .material-symbols-outlined{ color:var(--ip-ink3); flex:none; }
.dw-opt b{ display:block; font-size:14px; color:var(--ip-ink); }
.dw-opt small{ display:block; font-size:12.5px; color:var(--ip-ink3); margin-top:2px; line-height:1.45; }
.dw-opt.on{ border-color:var(--ip-brand); background:var(--ip-brand-wash); } .dw-opt.on .material-symbols-outlined{ color:var(--ip-brand); }
.dw-fine{ font-size:12px; color:var(--ip-ink3); margin-top:12px; }
.dw-done{ text-align:center; padding:24px 6px; }
.dw-done-i{ font-size:44px !important; color:var(--ip-ok); }
.dw-done-t{ font-size:17px; font-weight:700; color:var(--ip-ink); margin:8px 0 6px; }
.dw-done p{ font-size:13.5px; color:var(--ip-ink2); line-height:1.55; }
.dw-row{ display:flex; justify-content:center; gap:8px; margin-top:12px; }
/* a scanned image fits the available area (width AND height), centered, never oversized */
.dw-img{ display:block; margin:0 auto; max-width:100%; max-height:min(72vh,720px); object-fit:contain;
  border-radius:10px; border:1px solid var(--ip-line); background:#fff; }

/* ---------- document viewer: own layout + share actions (preview) ----------
   The rendering surface is forced direction:ltr and centered so the document is never mirrored
   or pushed to one side by the portal's RTL; the toolbar/actions stay logical (they flip). */
.dwv{ display:flex; flex-direction:column; }
.dwv-surface{ direction:ltr; text-align:center; }
.dwv-acts{ display:flex; gap:8px; align-items:center; justify-content:flex-end; padding:0 2px 10px; flex-wrap:wrap; }
.dwv-act{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:34px;
  border:1px solid var(--ip-line); background:#fff; color:var(--ip-brand,#6d28d9); border-radius:9px; cursor:pointer; }
.dwv-act:hover,.dwv-act:focus-visible{ border-color:var(--ip-brand,#6d28d9); background:var(--ip-brand-wash,#f4effb); outline:none; }
.dwv-act[disabled]{ opacity:.5; cursor:default; }
.dwv-act .material-symbols-outlined{ font-size:20px; }
.dwv-email{ margin-top:12px; }
.dwv-email-card{ border:1px solid var(--ip-line); border-radius:12px; padding:14px; background:var(--ip-surface,#faf9fc); }
.dwv-email-h{ font-size:14px; font-weight:700; color:var(--ip-ink,#141d26); margin-bottom:6px; }

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .hc-strip{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .hco-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:900px){
  .hc-trio{ grid-template-columns:1fr; }
  .hc-card{ min-height:0; }
  .hc-skel-trio{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .hc-head{ padding:16px 14px 12px; border-radius:14px; }
  .hc-id{ flex-wrap:wrap; gap:12px; }
  .hc-ava{ width:52px; height:52px; }
  .hc-who h1{ font-size:19px; }
  .hc-sit{ order:3; }
  .hc-next{ flex-direction:column; align-items:stretch; gap:10px; }
  .hc-next-btn{ width:100%; }
  .hc-strip{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hc-skel-strip{ grid-template-columns:repeat(2,1fr); }
  .hc-year{ grid-template-columns:1fr; gap:4px; }
  .ht-head{ flex-direction:column; align-items:flex-start; }
  .ht-head h1{ font-size:22px; }
  .ht-row{ flex-wrap:wrap; }
  .ht-btn{ margin-inline-start:42px; }
  .hr-row{ flex-wrap:wrap; gap:10px; }
  .hr-when{ width:auto; flex-direction:row; gap:8px; align-items:baseline; }
  .hr-side{ width:100%; flex-direction:row; justify-content:space-between; align-items:center; }
  .hr-tab-q{ margin-inline-start:0; }
  .hr-sel{ width:100%; } .hr-selin{ max-width:none !important; flex:1; }
  .hco-grid{ grid-template-columns:1fr; }
  .rq-row{ flex-wrap:wrap; }
  .dw-2{ grid-template-columns:1fr; }
  .ip-create{ margin-inline-start:4px; }
  .ip-create-btn span:last-child{ display:none; }
  /* document rows: the name keeps the line; the validity pill drops beneath it */
  .hc-doc-main{ flex-wrap:wrap; row-gap:6px; }
  .hc-doc-b{ flex:1 1 calc(100% - 110px); }
  .hc-doc-main .ip-pill{ order:3; margin-inline-start:34px; }
  .hc-reasons{ padding-inline-start:16px; }
}

/* ==================== HR Document Generator (preview) ==================== */
/* form controls keep dark text regardless of the OS colour scheme */
.sc-input, .hd-textarea{ color:#1c1a2b; -webkit-text-fill-color:#1c1a2b; color-scheme:light; }
.hd-textarea{ height:auto; padding:9px 12px; line-height:1.5; max-width:520px; width:100%; resize:vertical; font-family:inherit; }

/* selected-employee bar */
.hd-selbar{ display:flex; align-items:center; gap:12px; }
.hd-sel-ava{ width:44px; height:44px; border-radius:50%; flex:none; background:#efe7f4;
  display:flex; align-items:center; justify-content:center; font-weight:700; color:#662380; }
.hd-sel-txt{ flex:1 1 auto; min-width:0; }
.hd-sel-name{ font-weight:700; color:#241b33; }
.hd-sel-sub{ font-size:12.5px; color:#6a6780; }

/* category accordion + template grid */
.hd-cats{ display:flex; flex-direction:column; gap:8px; }
.hd-cat-h{ display:flex; align-items:center; gap:8px; width:100%; text-align:start;
  background:#f7f4fa; border:1px solid #ece6f2; border-radius:12px; padding:12px 14px;
  font-size:14.5px; font-weight:700; color:#3a2f4a; cursor:pointer; }
.hd-cat-h.open{ background:#f1e9f7; border-color:#dcc9e8; color:#662380; }
.hd-cat-h .mi{ font-size:20px; }
.hd-cat-n{ margin-inline-start:auto; font-size:12px; font-weight:700; color:#8a6ba0;
  background:#fff; border:1px solid #e3d6ec; border-radius:999px; padding:1px 9px; }
.hd-tpls{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:8px; padding:8px 2px 4px; }
.hd-tpl{ display:flex; align-items:center; gap:10px; text-align:start; cursor:pointer;
  background:#fff; border:1.5px solid #e6e2ef; border-radius:12px; padding:11px 13px; }
.hd-tpl:hover{ border-color:#c9b3d8; background:#fbf9fd; }
.hd-tpl.on{ border-color:#662380; box-shadow:0 0 0 2px rgba(102,35,128,.14); background:#faf6fd; }
.hd-tpl .mi{ font-size:20px; color:#7a3b93; flex:none; }
.hd-tpl-txt{ display:flex; flex-direction:column; min-width:0; }
.hd-tpl-ar{ font-weight:700; color:#2b2340; font-size:13.5px; }
.hd-tpl-en{ font-size:11.5px; color:#87849a; }

/* data-to-be-used panel */
.hd-issuer{ font-size:12.5px; color:#6a6780; margin:0 0 12px; }
.hd-data{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.hd-data-t{ font-size:12px; font-weight:700; letter-spacing:.02em; color:#8a6ba0; margin-bottom:8px; }
.hd-kv{ display:flex; justify-content:space-between; gap:12px; padding:6px 0; border-bottom:1px dashed #eee7f1; font-size:13.5px; }
.hd-kv span{ color:#6a6780; } .hd-kv b{ color:#241b33; text-align:end; }

/* dynamic fields */
.hd-fields{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; }
.hd-field{ display:flex; flex-direction:column; gap:6px; }
.hd-field label{ font-size:12.5px; font-weight:600; color:#4a475e; }
.hd-field .sc-input{ max-width:none; width:100%; }
.hd-req{ color:#a81a3c; margin-inline-start:3px; }
.hd-miss .sc-input, .hd-miss .hd-textarea{ box-shadow:0 0 0 2px rgba(168,26,60,.35); }
.hd-confirm{ margin-top:10px; }

/* live settlement figures */
.hd-settle{ margin-top:16px; border:1px solid #ece6f2; border-radius:12px; overflow:hidden; }
.hd-settle-row{ display:flex; justify-content:space-between; gap:12px; padding:9px 14px; font-size:13.5px; border-bottom:1px solid #f1edf6; }
.hd-settle-row:last-child{ border-bottom:0; }
.hd-settle-total{ background:#f7f4fa; font-weight:700; color:#241b33; }
.hd-neg{ color:#a81a3c; }

/* the on-screen document preview (mirrors the .docx) */
.hd-paper{ background:#fff; border:1px solid #e3ddec; border-radius:8px;
  box-shadow:0 4px 22px rgba(60,30,80,.07); padding:34px 40px; margin-top:6px;
  max-width:720px; margin-inline:auto; }
.hd-paper.hd-rtl{ direction:rtl; text-align:right; }
.hd-doc-head{ text-align:center; border-bottom:2px solid #cfc4dc; padding-bottom:12px; margin-bottom:20px; }
.hd-doc-co{ font-size:20px; font-weight:800; color:#211a30; }
.hd-doc-meta{ font-size:11px; color:#7b7790; margin-top:5px; }
.hd-doc-meta span{ margin:0 2px; }
.hd-doc-title{ text-align:center; font-size:16px; font-weight:800; color:#2b2340; margin-bottom:12px; }
.hd-doc-ref{ display:flex; justify-content:space-between; gap:12px; font-size:11.5px; color:#6a6780; margin-bottom:18px; }
.hd-doc-body{ font-size:13.5px; line-height:1.85; color:#2c2a3a; }
.hd-p{ margin:0 0 11px; }
.hd-bold{ font-weight:700; color:#211a30; }
.hd-center{ text-align:center; }
.hd-muted{ font-size:12px; color:#7b7790; }
.hd-legalp{ font-style:italic; font-size:12px; color:#555; }
.hd-doc-kv{ width:100%; border-collapse:collapse; margin:6px 0 14px; }
.hd-doc-kv th{ text-align:start; font-weight:700; color:#3a3550; background:#f6f3fa;
  border:1px solid #e7e1ef; padding:7px 10px; width:38%; font-size:12.5px; vertical-align:top; }
.hd-doc-kv td{ border:1px solid #e7e1ef; padding:7px 10px; color:#26243a; font-size:13px; white-space:pre-line; }
.hd-doc-list{ margin:4px 0 14px; padding-inline-start:22px; }
.hd-doc-list li{ margin-bottom:5px; }
.hd-doc-checks{ margin:6px 0 14px; }
.hd-checks-t{ font-weight:700; color:#3a3550; margin-bottom:8px; }
.hd-check{ display:flex; align-items:center; gap:10px; padding:5px 0; border-bottom:1px dashed #eee7f1; font-size:13px; }
.hd-box{ font-size:16px; color:#7a3b93; }
.hd-check-l{ flex:1 1 auto; }
.hd-check-sig{ color:#9a97ad; font-size:11.5px; }
.hd-doc-amounts{ width:100%; border-collapse:collapse; margin:8px 0 14px; }
.hd-doc-amounts th, .hd-doc-amounts td{ border:1px solid #dfd8e9; padding:7px 11px; font-size:13px; }
.hd-amt-h th{ background:#efeaf5; font-weight:700; color:#3a3550; text-align:start; }
.hd-amt-n{ text-align:end; font-variant-numeric:tabular-nums; white-space:nowrap; }
.hd-amt-total td{ background:#f7f4fa; font-weight:800; color:#211a30; }
.hd-doc-legal{ border-top:1px solid #eee7f1; margin-top:18px; padding-top:10px; font-size:11.5px; font-style:italic; color:#66627a; }
.hd-doc-legal-src{ font-style:normal; color:#918da4; }
.hd-doc-signs{ display:flex; gap:40px; margin-top:34px; flex-wrap:wrap; }
.hd-doc-sign{ flex:1 1 200px; }
.hd-sign-role{ font-weight:700; color:#2b2340; margin-bottom:12px; }
.hd-sign-line{ font-size:12.5px; color:#5a5770; margin-bottom:10px; }
.hd-sign-stamp{ color:#918da4; }

/* generate button row */
.hd-gen{ display:flex; align-items:center; gap:14px; margin-top:18px; flex-wrap:wrap; }
.hd-gen-btn{ display:inline-flex; align-items:center; gap:7px; }
.hd-gen-btn .mi{ font-size:19px; }
.hd-gen-note{ font-size:12.5px; color:var(--ip-ink3); margin:10px 0 0; max-width:640px; line-height:1.5; }
.hd-issued{ display:flex; align-items:flex-start; gap:12px; margin-top:16px; padding:12px 14px; border-radius:12px; background:var(--ip-ok-wash); color:var(--ip-ink); flex-wrap:wrap; }
.hd-issued-i{ color:var(--ip-ok); font-size:22px !important; flex:none; }
.hd-issued-b{ flex:1 1 260px; font-size:13px; line-height:1.55; }
.hd-issued-b b{ font-size:13.5px; }
.hd-issued-acts{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }

/* ---------- HR Documents archive (Create | Archive, list, history) ---------- */
.hd-tabs{ display:inline-flex; gap:4px; padding:4px; border-radius:12px; background:var(--ip-surface2); margin:0 0 12px; }
.hd-tabs button{ display:inline-flex; align-items:center; gap:6px; border:0; background:none; padding:7px 14px; border-radius:9px; font-size:13.5px; font-weight:600; color:var(--ip-ink2); cursor:pointer; }
.hd-tabs button .material-symbols-outlined{ font-size:18px; }
.hd-tabs button.on{ background:var(--ip-surface); color:var(--ip-brand-ink); box-shadow:0 1px 2px rgba(20,16,40,.08); }
.hda-h{ flex-wrap:wrap; align-items:flex-start; }
.hda-lead{ flex:1 1 320px; margin:0; font-size:13px; line-height:1.55; color:var(--ip-ink2); }
.hda-h-acts{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.hda-up{ display:inline-flex !important; align-items:center; gap:6px; }
.hda-up .material-symbols-outlined{ font-size:18px; }
.hda-filters{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:4px 0 12px; }
.hda-f{ max-width:none !important; width:auto; min-width:0; flex:0 1 190px; }
.hda-f-emp{ flex:1 1 220px; max-width:320px; }
.hda-f-d{ flex:0 1 140px; }
.hda-f-ref{ flex:0 1 150px; }
/* the base style.css underlines every input[type=text] and outranks .sc-input / .ck-input: box them like the selects
   (archive filters + archive drawer forms only) */
.hda-filters input.sc-input, .hda-filters input.ck-input, .hda-filters select.sc-input,
.hda-form input.sc-input, .hda-form input.ck-input, .hda-form select.sc-input{ height:44px; margin:0; border:1.5px solid #d2d1dd; border-radius:11px; background:#fff; }
.hda-form textarea.sc-input{ margin:0; border:1.5px solid #d2d1dd; border-radius:11px; background:#fff; }
.hda-filters input.sc-input, .hda-form input.sc-input{ padding:0 12px; }
.hda-filters input.ck-input, .hda-form input.ck-input{ padding-block:0; padding-inline-start:42px; padding-inline-end:40px; }
.hda-filters input.sc-input:focus, .hda-filters input.ck-input:focus, .hda-filters select.sc-input:focus,
.hda-form input.sc-input:focus, .hda-form input.ck-input:focus, .hda-form select.sc-input:focus, .hda-form textarea.sc-input:focus{ outline:none; border-color:#662380; box-shadow:0 0 0 3px rgba(102,35,128,.12); }
.hda-grp{ margin-top:6px; }
.hda-grp + .hda-grp{ margin-top:14px; }
.hda-grp-t, .hda-hist-t{ display:flex; align-items:center; gap:6px; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ip-ink3); margin:0 0 2px; }
.hda-grp-t .material-symbols-outlined, .hda-hist-t .material-symbols-outlined{ font-size:17px; }
.hda-hist-t{ background:none; border:0; padding:4px 0; cursor:pointer; }
.hda-n{ display:inline-block; min-width:20px; padding:0 6px; border-radius:999px; background:var(--ip-surface2); color:var(--ip-ink2); font-size:11.5px; text-align:center; letter-spacing:0; }
.hda-row{ display:flex; align-items:flex-start; flex-wrap:wrap; gap:6px 12px; padding:11px 0; border-top:1px solid var(--ip-surface2); }
.hda-row .hc-doc-i{ margin-top:1px; }
.hda-row .hc-doc-b{ flex:1 1 260px; }
.hda-emp{ font-weight:500; color:var(--ip-ink2); }
.hda-ref{ font-weight:600; color:var(--ip-ink); font-variant-numeric:tabular-nums; }
.hda-note{ font-size:12.5px; color:var(--ip-ink2); margin-top:3px; line-height:1.45; }
.hda-why{ color:var(--ip-ink3); font-style:italic; }
.hda-pill{ flex:none; margin-top:1px; }
.hda-acts{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 14px; flex-basis:100%; padding-inline-start:34px; }
.hda-danger{ color:var(--ip-stop) !important; }
.hda-superseded .hc-doc-t, .hda-void .hc-doc-t{ color:var(--ip-ink2); }
.hda-void .hc-doc-i, .hda-superseded .hc-doc-i{ color:var(--ip-idle); }
.hda-card{ padding-top:14px; }
.hda-tl{ list-style:none; margin:0; padding:0; }
.hda-tl li{ display:flex; gap:10px; padding:9px 0; border-top:1px dashed var(--ip-surface2); }
.hda-tl li:first-child{ border-top:0; }
.hda-tl-i{ color:var(--ip-brand); font-size:20px !important; flex:none; }
.hda-tl-t{ font-size:13.5px; font-weight:600; color:var(--ip-ink); }
.hda-tl-m{ font-size:12px; color:var(--ip-ink3); margin-top:1px; font-variant-numeric:tabular-nums; }
.hda-tl-r{ font-size:12.5px; color:var(--ip-ink2); margin-top:3px; }
.hda-copy{ display:flex; align-items:center; gap:10px; padding:7px 0; border-top:1px solid var(--ip-surface2); font-size:12.5px; }
.hda-copy-t{ flex:1 1 auto; color:var(--ip-ink2); font-variant-numeric:tabular-nums; }
.dw-fixed{ font-size:13.5px; font-weight:600; color:var(--ip-ink); padding:4px 0; }

@media (max-width:600px){
  .hd-data{ grid-template-columns:1fr; gap:14px; }
  .hd-fields{ grid-template-columns:1fr; }
  .hd-paper{ padding:22px 18px; }
  .hd-doc-signs{ gap:22px; }
}

/* ---------- Today, responsive (kept last so it wins over older ht- rules) ---------- */
@media (max-width:1100px){
  .ht-chips{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:900px){
  .ht-cols{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .ht-hero{ padding:14px 14px 12px; border-radius:14px; }
  .ht-verdict h2{ font-size:18px; }
  .ht-verdict > .material-symbols-outlined{ width:36px; height:36px; font-size:21px; }
  .ht-chips{ gap:6px; margin-top:12px; }
  .ht-chip{ padding:8px 10px; }
  .ht-chip b{ font-size:20px; }
  .ht-chip span{ font-size:11.5px; }
  .ht-dist{ padding:12px 14px 10px; }
  .ht-group{ padding:6px 14px 8px; }
  /* a row becomes two lines: who + what, then the countdown and the action */
  .ht-item .ht-row{ flex-wrap:wrap; gap:6px 10px; }
  .ht-item .ht-row .ht-body{ flex:1 1 calc(100% - 90px); order:1; }
  .ht-item .ht-row .ht-ava{ order:0; }
  .ht-item .ht-row .ht-exp{ order:2; }
  .ht-item .ht-row .ht-due, .ht-item .ht-row .ip-pill{ order:3; margin-inline-start:46px; }
  .ht-item .ht-row .ht-btn{ order:4; margin-inline-start:auto; }
  .ht-item .ht-row .ht-due + .ht-btn, .ht-item .ht-row .ip-pill + .ht-btn{ margin-inline-start:auto; }
  .ht-item .ht-row > .ht-body + .ht-btn{ margin-inline-start:46px; }
  .ht-why{ margin-inline-start:0; }
  .ht-cmp-r{ grid-template-columns:80px 1fr; }
  .ht-cmp-r b{ grid-column:2; }
  .ip-sk-btn{ display:none; }
  .ip-sk-rail{ grid-template-columns:repeat(3,1fr); }
  .ip-sk-rail .sk:nth-child(n+4){ display:none; }
}

/* =====================================================================
   One product: Employees (px-), Account (ac-), Transactions (tk-),
   Company (hco-) in Today's language - a summary surface, counts that are
   also filters, calm white groups, one-line rows, tone pills. Logical
   properties throughout so Arabic is native, not mirrored by hand.
   ===================================================================== */

/* shared pieces */
.px-sum{ background:var(--ip-surface); border:1px solid var(--ip-line); border-radius:18px; padding:18px 18px 16px; margin-bottom:12px; }
.px-sum-top{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:10px 18px; margin-bottom:14px; }
.px-big{ display:flex; align-items:baseline; gap:10px; }
.px-big b{ font-size:34px; line-height:1; font-weight:800; color:var(--ip-ink); font-variant-numeric:tabular-nums; }
.px-big span{ font-size:15px; font-weight:600; color:var(--ip-ink2); }
.px-sum-side{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; }
.px-flag{ display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:700; color:var(--t); background:var(--tw); border-radius:999px; padding:5px 12px 5px 10px; }
.px-flag .material-symbols-outlined{ font-size:18px; }
.px-bar{ height:14px; border-radius:7px; }
.px-pill{ flex:none; display:inline-flex; align-items:center; font-size:12px; font-weight:700; line-height:1.3; color:var(--t); background:var(--tw); border-radius:999px; padding:3px 10px; white-space:nowrap; }
.px-empty{ display:flex; gap:12px; align-items:flex-start; padding:18px 4px; color:var(--ip-ink2); }
.px-empty > .material-symbols-outlined{ font-size:28px; color:var(--ip-ink3); }
.px-empty b{ display:block; color:var(--ip-ink); font-size:14.5px; margin-bottom:3px; }
.px-empty span{ display:block; font-size:13.5px; margin-bottom:6px; }
.px-seg{ display:inline-flex; flex-wrap:wrap; gap:4px; background:var(--ip-surface2); border-radius:12px; padding:4px; margin:4px 0 10px; }
.px-seg button{ border:0; background:none; border-radius:9px; padding:6px 12px; font:inherit; font-size:13px; font-weight:600; color:var(--ip-ink2); cursor:pointer; }
.px-seg button b{ font-weight:700; color:var(--ip-ink3); margin-inline-start:4px; font-variant-numeric:tabular-nums; }
.px-seg button.on{ background:var(--ip-surface); color:var(--ip-brand-ink); box-shadow:0 1px 3px rgba(36,31,46,.12); }
.px-seg button.on b{ color:var(--ip-brand); }
.ht-chip.on{ border-color:var(--t); box-shadow:0 0 0 1px var(--t) inset; }
.ac-empty{ font-size:13.5px; color:var(--ip-ink3); padding:10px 0; }
.px-sk-sum{ height:108px; border-radius:18px; margin-bottom:12px; }
.px-sk-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.px-sk-chips .sk{ width:130px; height:36px; border-radius:999px; }

/* ---------- Employees ---------- */
.px-tools{ display:flex; flex-direction:column; gap:10px; margin-bottom:12px; }
.px-search{ position:relative; display:flex; align-items:center; background:var(--ip-surface); border:1px solid var(--ip-line2); border-radius:14px;
  transition:border-color .15s, box-shadow .15s; }
.px-search:focus-within{ border-color:var(--ip-brand); box-shadow:0 0 0 4px var(--ip-brand-wash); }
.px-search > .material-symbols-outlined{ font-size:22px; color:var(--ip-ink3); padding-inline:14px 4px; }
.px-search input{ flex:1; min-width:0; border:0; outline:none; background:none; font:inherit; font-size:15.5px; color:var(--ip-ink); padding:13px 6px; }
.px-search input::placeholder{ color:var(--ip-ink3); }
.px-search input::-webkit-search-cancel-button{ -webkit-appearance:none; }
.px-search-x{ border:0; background:none; color:var(--ip-ink3); cursor:pointer; padding:6px 12px; display:flex; }
.px-search-x:hover{ color:var(--ip-ink); }
.px-search-busy i{ display:block; width:8px; height:8px; border-radius:50%; background:var(--ip-brand); margin-inline-end:6px; animation:ipDot 1.1s ease-in-out infinite; }
.px-fchips{ display:flex; flex-wrap:wrap; gap:6px; transition:opacity .15s; }
.px-fchips.dim{ opacity:.55; }
.px-fchip{ display:inline-flex; align-items:center; gap:7px; border:1px solid var(--ip-line2); background:var(--ip-surface); border-radius:999px;
  padding:6px 12px; font:inherit; font-size:13px; font-weight:600; color:var(--ip-ink2); cursor:pointer; }
.px-fchip i{ width:8px; height:8px; border-radius:50%; background:var(--t); flex:none; }
.px-fchip b{ font-weight:800; color:var(--ip-ink); font-variant-numeric:tabular-nums; }
.px-fchip:hover{ border-color:var(--t); }
.px-fchip.on{ background:var(--tw); border-color:var(--t); color:var(--ip-ink); }
.px-fchip:focus-visible{ outline:2px solid var(--ip-brand); outline-offset:2px; }
.px-list{ padding:6px 8px 10px; }
.px-list-h{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; padding:10px 10px 6px; }
.px-list-h h2{ margin:0; font-size:16px; font-weight:700; color:var(--ip-ink); }
.px-list-note{ font-size:12.5px; color:var(--ip-ink3); }
.px-row{ display:flex; align-items:center; gap:12px; padding:11px 10px; border-radius:12px; color:inherit; text-decoration:none; }
.px-row + .px-row{ border-top:1px solid var(--ip-surface2); }
.px-row:hover{ background:var(--ip-page); text-decoration:none; color:inherit; }
.px-row:focus-visible{ outline:2px solid var(--ip-brand); outline-offset:-2px; }
.px-row.former{ opacity:.7; }
.px-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.px-name{ font-size:14.5px; font-weight:700; color:var(--ip-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.px-meta{ font-size:12.5px; color:var(--ip-ink3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.px-why{ font-size:13px; color:var(--ip-ink2); line-height:1.4; }
.px-end{ flex:none; display:flex; align-items:center; gap:8px; }
.px-chev{ flex:none; color:var(--ip-ink3); font-size:20px; }

/* ---------- Account ---------- */
.ac-bal{ border-inline-start:5px solid var(--ip-ok); }
.ac-bal.is-owe{ border-inline-start-color:var(--ip-accent); }
.ac-bal-main{ display:flex; gap:14px; align-items:flex-start; }
.ac-bal-main > .material-symbols-outlined{ flex:none; width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:23px;
  color:var(--ip-ok); background:var(--ip-ok-wash); }
.ac-bal.is-owe .ac-bal-main > .material-symbols-outlined{ color:var(--ip-accent); background:var(--ip-accent-wash); }
.ac-bal h2{ margin:0; font-size:21px; font-weight:800; color:var(--ip-ink); line-height:1.3; }
.ac-bal h2 b{ font-variant-numeric:tabular-nums; white-space:nowrap; }
.ac-bal.is-owe h2 b{ color:var(--ip-accent); }
.ac-bal p{ margin:5px 0 0; font-size:13.5px; color:var(--ip-ink2); line-height:1.6; }
.ac-bal p b{ color:var(--ip-ink); font-variant-numeric:tabular-nums; white-space:nowrap; }
.ac-cards{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:12px; }
.ac-card{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; text-align:start; background:var(--ip-surface); border:1px solid var(--ip-line);
  border-radius:16px; padding:14px 16px; font:inherit; color:inherit; min-width:0; }
button.ac-card{ cursor:pointer; }
button.ac-card:hover{ border-color:var(--ip-line2); }
.ac-card-l{ font-size:12.5px; font-weight:700; color:var(--ip-ink3); }
.ac-card-v{ font-size:21px; font-weight:800; color:var(--ip-ink); font-variant-numeric:tabular-nums; line-height:1.25; }
.ac-card.tone-stop .ac-card-v{ color:var(--ip-stop); }
.ac-card.tone-ok .ac-card-v{ color:var(--ip-ok); }
.ac-card-s{ font-size:13px; color:var(--ip-ink2); font-variant-numeric:tabular-nums; }
.ac-card-f{ font-size:11.5px; color:var(--ip-ink3); line-height:1.4; margin-top:auto; padding-top:4px; }
.ac-delta{ font-style:normal; font-weight:700; font-size:12px; border-radius:999px; padding:1px 7px; margin-inline-start:4px; white-space:nowrap;
  background:var(--ip-surface2); color:var(--ip-ink2); }
.ac-split{ display:flex; gap:2px; width:100%; height:8px; border-radius:4px; overflow:hidden; margin:4px 0 2px; }
.ac-split i{ flex:1 1 0; min-width:3px; }
.ac-split-l{ display:flex; flex-direction:column; gap:1px; font-size:12px; color:var(--ip-ink2); width:100%; }
.ac-split-l span{ display:flex; align-items:center; gap:6px; }
.ac-split-l i{ width:8px; height:8px; border-radius:2px; flex:none; }
.ac-split-l b{ margin-inline-start:auto; color:var(--ip-ink); font-variant-numeric:tabular-nums; }
.ac-trend .ht-gh{ flex-wrap:wrap; }
.ac-trend-legend{ display:flex; gap:12px; font-size:12.5px; color:var(--ip-ink2); }
.ac-trend-legend span{ display:inline-flex; align-items:center; gap:5px; }
.ac-trend-legend i{ width:10px; height:10px; border-radius:3px; }
.ac-trend-legend i.c{ background:var(--ip-brand); } .ac-trend-legend i.p{ background:var(--ip-stop); }
.ac-bars{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:6px; align-items:end; height:190px; padding:22px 0 0; }
.ac-col{ display:flex; flex-direction:column; align-items:stretch; justify-content:flex-end; height:100%; border:0; background:none; padding:0; cursor:pointer; font:inherit; position:relative; }
.ac-col-bar{ position:relative; display:flex; flex-direction:column; justify-content:flex-end; min-height:3px; border-radius:6px 6px 2px 2px; background:#c9b3d9; overflow:hidden; transition:background .15s; }
.ac-col-bar i.p{ display:block; width:100%; background:var(--ip-stop); }
.ac-col:hover .ac-col-bar{ background:#a887c0; }
.ac-col.now .ac-col-bar, .ac-col.on .ac-col-bar{ background:var(--ip-brand); }
.ac-col-v{ position:absolute; top:-20px; inset-inline:-10px; text-align:center; font-size:11.5px; font-weight:700; color:var(--ip-ink); font-variant-numeric:tabular-nums; white-space:nowrap; }
.ac-col-l{ font-size:11.5px; color:var(--ip-ink3); text-align:center; margin-top:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ac-col.now .ac-col-l, .ac-col.on .ac-col-l{ color:var(--ip-ink); font-weight:700; }
.ac-col:focus-visible{ outline:2px solid var(--ip-brand); outline-offset:2px; border-radius:6px; }
.ac-pick{ display:flex; flex-wrap:wrap; gap:4px 16px; align-items:baseline; margin:12px 0 4px; padding:10px 14px; background:var(--ip-page); border-radius:12px; font-size:13px; color:var(--ip-ink2); font-variant-numeric:tabular-nums; }
.ac-pick b{ color:var(--ip-ink); }
.ac-trend-f{ margin:10px 0 2px; }
.ac-rank{ display:flex; align-items:center; gap:10px; width:100%; background:none; border:0; border-top:1px solid var(--ip-surface2); padding:9px 4px; font:inherit; text-align:start; cursor:pointer; border-radius:8px; }
.ac-rank:hover{ background:var(--ip-page); }
.ac-rank-b{ flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; }
.ac-rank-n{ font-size:14px; font-weight:700; color:var(--ip-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ac-rank-n em{ font-style:normal; font-weight:500; color:var(--ip-ink3); }
.ac-rank-t, .ac-type-t{ height:6px; border-radius:3px; background:var(--ip-surface2); overflow:hidden; }
.ac-rank-t i, .ac-type-t i{ display:block; height:100%; border-radius:3px; background:var(--ip-brand); }
.ac-rank-v{ flex:none; display:flex; flex-direction:column; align-items:flex-end; }
.ac-rank-v b{ font-size:14px; color:var(--ip-ink); font-variant-numeric:tabular-nums; }
.ac-rank-v em, .ac-type em{ font-style:normal; font-size:11.5px; color:var(--ip-ink3); }
.ac-type{ padding:8px 0; border-top:1px solid var(--ip-surface2); }
.ac-gh-first{ border-top:0; }
.ac-type-h{ display:flex; justify-content:space-between; gap:10px; font-size:13.5px; color:var(--ip-ink); margin-bottom:5px; }
.ac-type-h span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ac-type-h b{ flex:none; font-variant-numeric:tabular-nums; }
.ac-type-t i{ background:var(--ip-accent); opacity:.8; }
.ac-calm{ font-size:14px; color:var(--ip-ok); background:var(--ip-ok-wash); border-radius:12px; padding:12px 14px; margin:4px 0 6px; line-height:1.5; }
.ac-calm span{ display:block; color:var(--ip-ink2); font-size:13px; }
.ac-pen{ display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-top:1px solid var(--ip-surface2); font-size:13.5px; }
.ac-pen div{ min-width:0; display:flex; flex-direction:column; }
.ac-pen span{ color:var(--ip-ink3); font-size:12.5px; }
.ac-pen > b{ color:var(--ip-stop); font-variant-numeric:tabular-nums; white-space:nowrap; }
.ac-up{ display:flex; align-items:center; gap:10px; padding:9px 4px; border-top:1px solid var(--ip-surface2); color:inherit; text-decoration:none; border-radius:8px; }
.ac-up:hover{ background:var(--ip-page); text-decoration:none; color:inherit; }
.ac-up-b{ flex:1; min-width:0; display:flex; flex-direction:column; }
.ac-up-b b{ font-size:14px; color:var(--ip-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ac-up-b span{ font-size:12.5px; color:var(--ip-ink3); }
.ac-up-v{ flex:none; font-size:13px; font-weight:700; color:var(--ip-ink); font-variant-numeric:tabular-nums; min-width:110px; text-align:end; }
.ac-lookup{ padding:14px 18px 16px; }
.ac-lookup .ip-card-h{ font-size:16px; font-weight:700; color:var(--ip-ink); text-transform:none; letter-spacing:0; margin-bottom:2px; }
.ac-lookup .ck-sub{ margin-top:0; }
.ac-lookup .ck-search{ margin-top:10px; }
.ac-lookup .ck-search .ck-input{ height:48px !important; border:1px solid var(--ip-line2) !important; border-radius:14px !important;
  padding-inline:44px 40px !important; font-size:15px !important; background:var(--ip-surface) !important; }
.ac-lookup .ck-search .ck-input:focus{ border-color:var(--ip-brand) !important; box-shadow:0 0 0 4px var(--ip-brand-wash) !important; }
.ac-lookup .ck-search-i{ top:24px !important; transform:translateY(-50%) !important; inset-inline-start:14px !important; color:var(--ip-ink3); font-size:22px; }
.hco-prof dt{ white-space:nowrap; }
.ac-line{ display:grid; grid-template-columns:104px minmax(0,1fr) 72px 120px 110px; gap:10px; align-items:center; padding:9px 4px; border-top:1px solid var(--ip-surface2); font-size:13.5px; }
.ac-line-d{ color:var(--ip-ink3); font-size:12.5px; font-variant-numeric:tabular-nums; }
.ac-line-b{ min-width:0; display:flex; flex-direction:column; }
.ac-line-b b{ font-weight:600; color:var(--ip-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ac-line-b span{ font-size:12px; color:var(--ip-ink3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ac-line-t{ font-size:11.5px; font-weight:700; color:var(--ip-ink2); background:var(--ip-surface2); border-radius:999px; padding:2px 8px; justify-self:start; }
.ac-line.in .ac-line-t{ color:var(--ip-ok); background:var(--ip-ok-wash); }
.ac-line.pen .ac-line-t{ color:var(--ip-stop); background:var(--ip-stop-wash); }
.ac-line-a{ text-align:end; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--ip-ink); }
.ac-line.in .ac-line-a{ color:var(--ip-ok); }
.ac-line-r{ text-align:end; color:var(--ip-ink3); font-variant-numeric:tabular-nums; white-space:nowrap; }
.ac-sk-cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:12px; }
.ac-sk-cards .sk{ height:118px; border-radius:16px; }
.ac-sk-trend{ height:240px; border-radius:16px; }

/* ---------- Transactions ---------- */
.tk-ht{ margin-top:0; }
.tk-sum{ margin:0 0 10px; }
.tk-viewing{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; font-size:13.5px; color:var(--ip-ink2); background:var(--ip-brand-wash); border-radius:12px; padding:9px 14px; margin-bottom:10px; }
.tk-viewing b{ color:var(--ip-brand-ink); }
.tk-tabs{ border-bottom:0; background:var(--ip-surface2); border-radius:12px; padding:4px; display:inline-flex; flex-wrap:wrap; gap:4px; margin:4px 0 12px; }
.tk-tab{ border-radius:9px !important; }
.tk-tab.on{ background:var(--ip-surface); box-shadow:0 1px 3px rgba(36,31,46,.12); }
.tk-tab.on::after{ display:none; }
.tk-search input{ border-radius:14px !important; border:1px solid var(--ip-line2) !important; }
.tk-card{ border-radius:16px; }
.tk-next{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; margin:0 0 10px; padding:8px 12px; border-radius:10px; background:var(--tw); font-size:13.5px; }
.tk-next > .material-symbols-outlined{ font-size:19px; color:var(--t); }
.tk-next b{ color:var(--ip-ink); font-weight:700; }
.tk-next.tone-stop b{ color:var(--ip-stop); }
.tk-last{ margin-inline-start:auto; font-size:12.5px; color:var(--ip-ink3); white-space:nowrap; }
.tk-started{ text-transform:none !important; letter-spacing:0 !important; font-weight:500 !important; }

/* ---------- Company ---------- */
.hco-chips{ grid-template-columns:repeat(5,minmax(0,1fr)); }
.hco-doc{ display:flex; align-items:center; gap:12px; padding:11px 0; border-top:1px solid var(--ip-surface2); }
.ht-gh + .hco-doc, .ht-gp + .hco-doc{ border-top:0; }
.hco-doc-i{ flex:none; width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:var(--tw); color:var(--t); }
.hco-doc-i .material-symbols-outlined{ font-size:19px; }
.hco-doc-n{ font-size:14.5px; font-weight:700; color:var(--ip-ink); overflow-wrap:anywhere; }
.hco-req{ font-size:11px; font-weight:700; color:var(--ip-brand-ink); background:var(--ip-brand-wash); border-radius:999px; padding:1px 8px; margin-inline-start:4px; vertical-align:2px; }
.hco-fold{ display:flex; align-items:center; width:100%; background:none; border:0; padding:0; font:inherit; cursor:pointer; text-align:start; }
.hco-fold .ht-gh{ flex:1; }
.hco-chev{ color:var(--ip-ink3); transition:transform .2s; }
.hco-chev.on{ transform:rotate(180deg); }
a.hco-tile{ display:block; color:inherit; text-decoration:none; padding-bottom:14px; }
a.hco-tile:hover{ border-color:var(--ip-line2); text-decoration:none; color:inherit; }
.hco-tile .ht-gh > .material-symbols-outlined:first-child{ color:var(--t); background:var(--tw); }
.hco-go{ color:var(--ip-ink3); }
.hco-tile-v{ display:block; font-size:16px; color:var(--ip-ink); margin-top:2px; }
.hco-tile-v b{ font-size:19px; color:var(--t); font-variant-numeric:tabular-nums; }
.hco-tile-s{ display:block; font-size:12.5px; color:var(--ip-ink3); margin-top:3px; }
.hco-prof dl{ display:grid; grid-template-columns:max-content 1fr; gap:6px 14px; margin:2px 0 10px; font-size:13.5px; }
.hco-prof dt{ color:var(--ip-ink3); font-weight:600; }
.hco-prof dd{ margin:0; color:var(--ip-ink); overflow-wrap:anywhere; }
.hco-ltr{ direction:ltr; unicode-bidi:isolate; text-align:start; }
.hco-alert{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 0; border-top:1px solid var(--ip-surface2); font-size:13.5px; color:var(--ip-ink); }
.ht-gh + .hco-alert{ border-top:0; }

@media (max-width:1100px){
  .ac-cards{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hco-chips{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:760px){
  .ac-line{ grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"b a" "d r"; row-gap:2px; }
  .ac-line-b{ grid-area:b; } .ac-line-a{ grid-area:a; } .ac-line-d{ grid-area:d; } .ac-line-r{ grid-area:r; }
  .ac-line-t{ display:none; }
}
@media (max-width:640px){
  .px-sum{ padding:14px; border-radius:14px; }
  .px-big b{ font-size:28px; }
  .px-fchips{ flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; margin-inline:-2px; scrollbar-width:none; }
  .px-fchips::-webkit-scrollbar{ display:none; }
  .px-fchip{ flex:none; }
  .px-row{ flex-wrap:wrap; gap:4px 10px; padding:10px 6px; }
  .px-row .px-body{ flex:1 1 calc(100% - 80px); }
  .px-row .px-chev{ order:2; }
  .px-row .px-end{ order:3; flex-basis:100%; padding-inline-start:46px; flex-wrap:wrap; }
  .ac-cards{ grid-template-columns:1fr 1fr; gap:8px; }
  .ac-card{ padding:12px; }
  .ac-card-v{ font-size:17px; }
  .ac-bars{ gap:3px; height:160px; }
  .ac-col-l{ font-size:10px; }
  .ac-col-v{ font-size:10px; }
  .ac-bal h2{ font-size:18px; }
  .ac-up{ flex-wrap:wrap; }
  .ac-up-v{ min-width:0; flex-basis:100%; text-align:start; padding-inline-start:40px; }
  .hco-chips{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hco-doc{ flex-wrap:wrap; }
  .hco-doc .ht-body{ flex:1 1 calc(100% - 48px); }
  .hco-doc .px-pill{ margin-inline-start:46px; }
  .hco-doc .ht-btn{ margin-inline-start:auto; }
  .tk-last{ margin-inline-start:0; flex-basis:100%; padding-inline-start:29px; }
  .ac-sk-cards{ grid-template-columns:1fr 1fr; }
}
@media (max-width:420px){
  .ac-cards{ grid-template-columns:1fr; }
}

/* =====================================================================
   Leave Management (preview): Leave File (lv-), Leave Center (lc-)
   ===================================================================== */
.lv .hc-sec-h{ flex-wrap:wrap; gap:8px 12px; }
.lv-acts{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin-inline-start:auto; }
.lv-primary .mi{ font-size:19px; }
.lv-sk{ height:150px; border-radius:16px; }
.lv-test{ font-size:12px; font-weight:700; color:var(--ip-warn); background:var(--ip-warn-wash); border-radius:8px; padding:6px 10px; margin-bottom:10px; }
.lv-testtag{ font-size:10.5px; font-weight:800; letter-spacing:.04em; color:var(--ip-warn); background:var(--ip-warn-wash); border-radius:4px; padding:1px 5px; margin-inline-start:6px; vertical-align:1px; }
.lv-fine{ font-size:12.5px; color:var(--ip-ink3); }
.lv-msg{ margin:8px 0; }

.lv-setup{ display:flex; gap:14px; background:var(--ip-surface); border:1px solid var(--ip-line); border-inline-start:4px solid var(--ip-brand); border-radius:16px; padding:16px 18px; margin-bottom:12px; }
.lv-step{ flex:none; width:30px; height:30px; border-radius:50%; background:var(--ip-brand-wash); color:var(--ip-brand); font-weight:800; display:flex; align-items:center; justify-content:center; }
.lv-setup-b{ flex:1; min-width:0; }
.lv-setup-b > b{ font-size:15.5px; color:var(--ip-ink); }
.lv-setup-b p{ margin:4px 0 10px; font-size:13.5px; color:var(--ip-ink2); line-height:1.55; max-width:70ch; }
.lv-suggest{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; background:var(--ip-ok-wash); border-radius:12px; padding:10px 12px; margin-bottom:10px; font-size:13.5px; color:var(--ip-ink); }
.lv-suggest > .material-symbols-outlined{ color:var(--ip-ok); }
.lv-suggest .ip-btn{ margin-inline-start:auto; }
.lv-row{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px 12px; margin:8px 0; }
.lv-row > label, .lc-pol > label{ display:flex; flex-direction:column; gap:4px; font-size:12.5px; font-weight:600; color:var(--ip-ink2); min-width:150px; }
.lv-row .sc-input, .lc-pol .sc-input{ height:40px; }
.lv-grow{ flex:1 1 220px; }
.lv-check{ display:flex !important; flex-direction:row !important; align-items:center; gap:8px; font-size:13.5px; font-weight:500 !important; color:var(--ip-ink) !important; margin:6px 0; }

.lv-sum{ background:var(--ip-surface); border:1px solid var(--ip-line); border-radius:18px; padding:16px 18px; margin-bottom:10px; }
.lv-sum-h{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:12px; }
.lv-sum-h b{ display:block; font-size:16px; color:var(--ip-ink); }
.lv-sum-h span{ font-size:12.5px; color:var(--ip-ink3); }
.lv-avail{ text-align:end; }
.lv-avail b{ font-size:30px; line-height:1; font-weight:800; color:var(--ip-brand); font-variant-numeric:tabular-nums; }
.lv-avail.neg b{ color:var(--ip-stop); }
.lv-bar{ display:flex; gap:2px; height:12px; border-radius:6px; overflow:hidden; background:var(--ip-surface2); }
.lv-bar i{ display:block; height:100%; }
.lv-bar i.u, .lv-nums i.u{ background:#a887c0; }
.lv-bar i.p, .lv-nums i.p{ background:#ecb354; }
.lv-bar i.a, .lv-nums i.a{ background:var(--ip-brand); }
.lv-nums{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:12px 0 8px; }
.lv-nums div{ display:flex; flex-direction:column; gap:2px; }
.lv-nums span{ display:flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--ip-ink3); }
.lv-nums i{ width:8px; height:8px; border-radius:2px; }
.lv-nums b{ font-size:18px; color:var(--ip-ink); font-variant-numeric:tabular-nums; }
.lv-sum .hc-warn{ margin-top:10px; }
.lv-sick{ display:flex; align-items:flex-start; gap:10px; background:var(--ip-surface); border:1px solid var(--ip-line); border-radius:14px; padding:10px 14px; margin-bottom:10px; font-size:13.5px; color:var(--ip-ink); }
.lv-sick > .material-symbols-outlined{ color:#c0304f; }
.lv-sick .lv-fine{ display:block; margin-top:2px; }

.lv-panel{ background:var(--ip-surface); border:1px solid var(--ip-brand); box-shadow:0 0 0 3px var(--ip-brand-wash); border-radius:16px; padding:14px 18px 16px; margin-bottom:12px; }
.lv-panel-h{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.lv-panel-h b{ font-size:15.5px; color:var(--ip-ink); }
.lv-panel-h span{ color:var(--ip-ink3); font-size:13px; }
.lv-panel-h .dw-x{ margin-inline-start:auto; }
.lv-panel-f{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin-top:12px; }
.lv-types{ display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 8px; }
.lv-types button{ display:inline-flex; align-items:center; gap:6px; border:1px solid var(--ip-line2); background:var(--ip-surface); border-radius:999px; padding:6px 12px; font:inherit; font-size:13px; font-weight:600; color:var(--ip-ink2); cursor:pointer; }
.lv-types button .material-symbols-outlined{ font-size:18px; }
.lv-types button.on{ border-color:var(--ip-brand); background:var(--ip-brand-wash); color:var(--ip-brand-ink); }
.lv-file{ margin:6px 0; }
.lv-quote{ background:var(--ip-page); border-radius:12px; padding:12px 14px; margin-top:10px; display:flex; flex-direction:column; gap:6px; font-size:13.5px; color:var(--ip-ink2); }
.lv-quote-n b{ font-size:18px; color:var(--ip-ink); }
.lv-quote-pay{ font-weight:600; color:var(--ip-ink); }
.lv-quote-b b{ font-variant-numeric:tabular-nums; color:var(--ip-ink); }
.lv-quote b.neg, .lv-led-v.neg{ color:var(--ip-stop); }
.lv-quote-e, .lv-quote-w{ display:flex; align-items:flex-start; gap:6px; }
.lv-quote-e{ color:var(--ip-stop); font-weight:600; }
.lv-quote-e .material-symbols-outlined, .lv-quote-w .material-symbols-outlined{ font-size:18px; flex:none; }
.lv-quote-w{ color:var(--ip-warn); }
.lv-reject{ background:var(--ip-stop) !important; border-color:var(--ip-stop) !important; }

.lv-list{ background:var(--ip-surface); border:1px solid var(--ip-line); border-radius:16px; padding:6px 14px 10px; margin-bottom:10px; }
.lv-list-h{ display:flex; align-items:center; gap:8px; font-size:14.5px; font-weight:700; color:var(--ip-ink); padding:10px 2px 6px; }
button.lv-fold{ width:100%; background:none; border:0; font:inherit; font-size:14.5px; font-weight:700; cursor:pointer; text-align:start; }
button.lv-fold .material-symbols-outlined{ margin-inline-start:auto; color:var(--ip-ink3); }
.lv-item{ border-top:1px solid var(--ip-surface2); }
.lv-item-h{ display:flex; align-items:center; gap:12px; width:100%; background:none; border:0; padding:10px 2px; font:inherit; text-align:start; cursor:pointer; }
.lv-ic{ flex:none; width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; }
.lv-ic .material-symbols-outlined{ font-size:19px; }
.lv-item-b{ flex:1; min-width:0; display:flex; flex-direction:column; }
.lv-item-b b{ font-size:14px; color:var(--ip-ink); }
.lv-item-b > span{ font-size:12.5px; color:var(--ip-ink3); }
.lv-chev{ color:var(--ip-ink3); transition:transform .2s; }
.lv-item.open .lv-chev{ transform:rotate(180deg); }
.lv-item-d{ padding:4px 2px 12px; margin-inline-start:46px; }
.lv-item-d dl{ display:grid; grid-template-columns:max-content 1fr; gap:4px 14px; margin:0 0 10px; font-size:13px; }
.lv-item-d dt{ color:var(--ip-ink3); font-weight:600; }
.lv-item-d dd{ margin:0; color:var(--ip-ink); overflow-wrap:anywhere; display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; }
.lv-item-d dd .hc-link{ display:inline-flex; align-items:center; gap:4px; }
.lv-item-d dd .hc-link .material-symbols-outlined{ font-size:16px; }
.lv-attach{ position:relative; cursor:pointer; }
.lv-attach input{ position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; }
.lv-item-acts{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; }
.lv-item-acts .hc-link{ display:inline-flex; align-items:center; gap:4px; }
.lv-item-acts .hc-link .material-symbols-outlined{ font-size:17px; }
.lv-decide{ background:var(--ip-page); border-radius:12px; padding:10px 12px; margin:6px 0 4px; }
.lv-led{ display:grid; grid-template-columns:100px minmax(0,1fr) auto; gap:10px; align-items:baseline; padding:8px 2px; border-top:1px solid var(--ip-surface2); font-size:13px; }
.lv-led-d{ color:var(--ip-ink3); font-variant-numeric:tabular-nums; }
.lv-led-b b{ color:var(--ip-ink); font-weight:600; }
.lv-led-v{ font-weight:800; font-variant-numeric:tabular-nums; color:var(--ip-ink2); }
.lv-led-v.pos{ color:var(--ip-ok); }

/* Leave File: one action + ⋯ menu, set-up banner */
.lv-menu{ position:relative; }
.lv-menu-btn{ width:38px; height:38px; border-radius:10px; border:1px solid var(--ip-line2); background:var(--ip-surface); color:var(--ip-ink2); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.lv-menu-btn:hover, .lv-menu.open .lv-menu-btn{ border-color:var(--ip-brand); color:var(--ip-brand); }
.lv-menu-list{ position:absolute; top:44px; inset-inline-end:0; z-index:30; min-width:230px; background:var(--ip-surface); border:1px solid var(--ip-line); border-radius:12px;
  box-shadow:0 10px 30px rgba(36,31,46,.14); padding:6px; display:flex; flex-direction:column; }
.lv-menu-list button, .lv-menu-list a{ display:flex; align-items:center; gap:10px; background:none; border:0; border-radius:8px; padding:9px 10px; font:inherit; font-size:13.5px; color:var(--ip-ink); text-align:start; cursor:pointer; text-decoration:none; }
.lv-menu-list button:hover, .lv-menu-list a:hover{ background:var(--ip-surface2); text-decoration:none; }
.lv-menu-list .material-symbols-outlined{ font-size:19px; color:var(--ip-ink3); }
.lv-banner{ display:flex; align-items:center; gap:14px; background:var(--ip-surface); border:1px solid var(--ip-line); border-inline-start:4px solid var(--ip-warn); border-radius:14px; padding:14px 16px; margin-bottom:10px; }
.lv-banner-i{ flex:none; width:38px; height:38px; border-radius:50%; background:var(--ip-warn-wash); color:var(--ip-warn); display:flex; align-items:center; justify-content:center; font-size:21px; }
.lv-banner-b{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.lv-banner-b > b{ font-size:14.5px; color:var(--ip-ink); }
.lv-banner-b > span{ font-size:13px; color:var(--ip-ink2); line-height:1.5; }
.lv-banner-steps{ list-style:none; display:flex; flex-wrap:wrap; gap:4px 14px; margin:6px 0 0; padding:0; font-size:12.5px; color:var(--ip-ink3); }
.lv-banner-steps li{ display:flex; align-items:center; gap:6px; }
.lv-banner-steps i, .lvd-steps i{ font-style:normal; width:20px; height:20px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; background:var(--ip-surface2); color:var(--ip-ink2); }
.lv-banner-steps li.ok{ color:var(--ip-ok); } .lv-banner-steps li.ok i{ background:var(--ip-ok-wash); color:var(--ip-ok); }
.lv-banner > .ip-btn{ flex:none; }

/* the leave drawer components (request / set-up / adjust) */
.dw-mid{ width:min(500px,100vw); }
.lvd label{ display:flex; flex-direction:column; gap:4px; font-size:12.5px; font-weight:600; color:var(--ip-ink2); min-width:0; }
.lvd .sc-input{ height:40px; width:100%; max-width:none !important; }
.lvd .lv-check{ flex-direction:row !important; }
.lvd-search{ margin-bottom:10px; }
.lvd-people{ display:flex; flex-direction:column; }
.lvd-person{ display:flex; align-items:center; gap:10px; background:none; border:0; border-top:1px solid var(--ip-surface2); padding:10px 4px; font:inherit; text-align:start; cursor:pointer; border-radius:8px; }
.lvd-person:first-child{ border-top:0; }
.lvd-person:hover{ background:var(--ip-page); }
.lvd-person-b{ flex:1; min-width:0; display:flex; flex-direction:column; }
.lvd-person-b b{ font-size:14px; color:var(--ip-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lvd-person-b span{ font-size:12.5px; color:var(--ip-ink3); }
.lvd-person > .material-symbols-outlined{ color:var(--ip-ink3); }
.lvd-change{ display:inline-flex; align-items:center; gap:4px; margin-bottom:4px; }
.lvd-change .material-symbols-outlined{ font-size:17px; }
.lvd-types{ margin:0 0 12px; }
.lvd-types button{ padding:5px 11px; font-size:12.5px; }
.lvd-dates, .lvd-2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:0 0 10px; }
.lvd-1{ margin:0 0 10px; }
.lvd-q{ margin:10px 0; display:flex; flex-direction:column; gap:8px; }
.lvd-q.lvd-2{ display:grid; }
.lvd-quote{ background:var(--ip-brand-wash); border-radius:12px; padding:12px 14px; margin:2px 0 10px; display:flex; flex-direction:column; gap:6px; font-size:13.5px; color:var(--ip-ink2); }
.lvd-quote.bad{ background:var(--ip-stop-wash); }
.lvd-quote-top b{ font-size:20px; color:var(--ip-ink); margin-inline-end:6px; }
.lvd-quote-bal b{ font-size:15px; color:var(--ip-ink); font-variant-numeric:tabular-nums; }
.lvd-quote-bal b.neg{ color:var(--ip-stop); }
.lvd-hint{ margin:0 0 10px; }
.lvd-file{ margin:10px 0; }
.lvd-more{ display:inline-flex; align-items:center; gap:4px; margin:6px 0; }
.lvd-more .material-symbols-outlined{ font-size:18px; }
.lvd-extras{ display:flex; flex-direction:column; gap:10px; margin:6px 0 4px; }
.lvd-block{ display:flex; gap:12px; background:var(--ip-warn-wash); border-radius:12px; padding:12px 14px; margin:4px 0 8px; }
.lvd-block > .material-symbols-outlined{ color:var(--ip-warn); }
.lvd-block div{ display:flex; flex-direction:column; gap:4px; align-items:flex-start; font-size:13px; color:var(--ip-ink2); line-height:1.5; }
.lvd-block b{ color:var(--ip-ink); font-size:14px; }
.lvd-block .ip-btn{ margin-top:6px; }
/* the actions sit on the drawer's bottom edge, whatever the content height */
.dw-mid .dw-b{ display:flex; flex-direction:column; }
.dw-mid .dw-b > div{ flex:1 0 auto; display:flex; flex-direction:column; }
.lvd{ flex:1 0 auto; display:flex; flex-direction:column; }
.lvd-main{ flex:1 0 auto; display:flex; flex-direction:column; }
.lvd-foot{ position:sticky; bottom:-24px; margin:auto -20px -24px; padding:12px 20px calc(12px + env(safe-area-inset-bottom, 0px)); background:var(--ip-surface); border-top:1px solid var(--ip-line);
  display:flex; justify-content:flex-end; align-items:center; gap:10px; }
.lvd-foot .ip-btn:last-child{ min-width:150px; }
.lvd-foot .hc-link{ margin-inline-end:auto; }
.lvd-steps{ list-style:none; display:flex; gap:8px; margin:0 0 14px; padding:0; }
.lvd-steps li{ flex:1; display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--ip-ink3); background:var(--ip-surface2); border-radius:10px; padding:8px 10px; }
.lvd-steps li.on{ background:var(--ip-brand-wash); color:var(--ip-brand-ink); } .lvd-steps li.on i{ background:var(--ip-brand); color:#fff; }
.lvd-steps li.ok{ color:var(--ip-ok); } .lvd-steps li.ok i{ background:var(--ip-ok-wash); color:var(--ip-ok); }
.lvd-sug{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; background:var(--ip-ok-wash); border-radius:12px; padding:12px 14px; margin-bottom:6px; }
.lvd-sug > .material-symbols-outlined{ color:var(--ip-ok); }
.lvd-sug div{ flex:1 1 180px; display:flex; flex-direction:column; font-size:13px; color:var(--ip-ink2); }
.lvd-sug b{ font-size:16px; color:var(--ip-ink); }
.lvd-or{ font-size:12.5px; color:var(--ip-ink3); margin:10px 0 8px; }
.lvd-fact{ display:flex; flex-direction:column; gap:4px; background:var(--ip-page); border-radius:12px; padding:10px 12px; margin:0 0 12px; font-size:13px; color:var(--ip-ink2); }
.lvd-fact b{ color:var(--ip-ink); } .lvd-fact em{ font-style:normal; color:var(--ip-ink3); font-size:12px; }
.lvd .hc-warn{ margin:4px 0; }
.lvd-done p{ font-size:14px; color:var(--ip-ink2); }
.lvd-done-acts{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px 12px; margin-top:14px; }
.lvd-approve{ display:flex; flex-direction:column; gap:10px; text-align:start; background:var(--ip-page); border-radius:12px; padding:12px; margin-top:10px; }
@media (max-width:600px){
  .dw-mid{ width:100vw; }
  .lvd-dates, .lvd-2, .lvd-q.lvd-2{ grid-template-columns:1fr 1fr; }
  .lv-banner{ flex-wrap:wrap; }
  .lv-banner > .ip-btn{ width:100%; }
  .lvd-foot .ip-btn:last-child{ flex:1; min-width:0; }
}

/* Leave Center */
.lc-chips{ grid-template-columns:repeat(5,minmax(0,1fr)); margin:0 0 12px; }
.lc-tabs{ margin:0 0 12px; }
.lc-row{ border-top:1px solid var(--ip-surface2); padding:10px 0; }
.ht-gh + div > .lc-row, .ht-gh + .ac-empty + div > .lc-row{ border-top:0; }
.lc-row-m{ display:flex; align-items:center; gap:12px; }
.lc-row-a{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin-top:8px; padding-inline-start:48px; }
.lc-type{ font-weight:700; }
.lc-cal-h{ display:flex; align-items:center; gap:8px; padding:6px 0 10px; }
.lc-cal-h h2{ margin:0; font-size:17px; font-weight:800; color:var(--ip-ink); min-width:150px; text-align:center; }
.lc-cal-key{ margin-inline-start:auto; display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ip-ink2); }
.lc-cal-key i{ width:14px; height:10px; border-radius:3px; border:2px solid var(--ip-brand); display:inline-block; }
.lc-cal-key i.ap{ background:var(--ip-brand-wash); }
.lc-cal-key i.pe{ border-style:dashed; }
.lc-grid{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; }
.lc-dow{ font-size:11.5px; font-weight:700; color:var(--ip-ink3); text-align:center; padding:4px 0; }
.lc-day{ min-height:86px; background:var(--ip-surface); border:1px solid var(--ip-surface2); border-radius:10px; padding:4px; display:flex; flex-direction:column; gap:3px; min-width:0; }
.lc-day.blank{ background:none; border-color:transparent; }
.lc-day.wk{ background:var(--ip-page); }
.lc-day.today{ border-color:var(--ip-brand); box-shadow:0 0 0 1px var(--ip-brand) inset; }
.lc-dn{ font-size:12px; font-weight:700; color:var(--ip-ink2); }
.lc-day.today .lc-dn{ color:var(--ip-brand); }
.lc-who{ display:block; width:100%; border:1.5px solid; background:var(--ip-surface); border-radius:6px; padding:1px 5px; font:inherit; font-size:11px; font-weight:700; text-align:start;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; }
.lc-who.pe{ border-style:dashed; }
.lc-more{ font-size:11px; color:var(--ip-ink3); font-weight:700; }
.lc-bal{ display:flex; align-items:center; gap:10px; padding:8px 0; border-top:1px solid var(--ip-surface2); }
.lc-bal .ht-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:start; }
.lc-setup{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:4px 0 10px; }
.lc-setup div{ background:var(--ip-page); border-radius:12px; padding:10px 12px; display:flex; flex-direction:column; }
.lc-setup b{ font-size:22px; color:var(--ip-ink); font-variant-numeric:tabular-nums; }
.lc-setup span{ font-size:12px; color:var(--ip-ink2); }
.lc-ob{ display:grid; grid-template-columns:minmax(140px,1.2fr) minmax(140px,1.2fr) 150px 100px auto; gap:8px 10px; align-items:center; padding:8px 0; border-top:1px solid var(--ip-surface2); }
.lc-ob .ht-name{ text-align:start; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lc-ob .sc-input{ height:36px; }
.lc-names{ display:flex; flex-wrap:wrap; gap:6px 14px; padding:6px 0; }
.lc-pol{ display:flex; flex-direction:column; gap:10px; }
.lc-field{ font-size:12.5px; font-weight:600; color:var(--ip-ink2); }
.lc-days{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.lc-day-pick{ display:inline-flex; align-items:center; gap:6px; border:1px solid var(--ip-line2); border-radius:999px; padding:5px 11px; font-size:12.5px; font-weight:600; color:var(--ip-ink2); cursor:pointer; }
.lc-day-pick input{ margin:0; }
.lc-day-pick.on{ border-color:var(--ip-brand); background:var(--ip-brand-wash); color:var(--ip-brand-ink); }
.lc-ok{ color:var(--ip-ok); font-weight:700; font-size:13.5px; }
.lc-lawlist{ display:flex; flex-direction:column; gap:2px; margin:6px 0 10px; font-size:13px; }
.lc-lawlist dt{ font-weight:700; color:var(--ip-ink); margin-top:8px; }
.lc-lawlist dd{ margin:0; color:var(--ip-ink2); line-height:1.55; }
.lc-src{ display:flex; flex-direction:column; gap:4px; font-size:12.5px; }

/* Smart Calculator / HR documents: where the leave figure came from */
.sc-leave-v{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:4px 0; }
.sc-leave-v b{ font-size:20px; color:var(--ip-ink); }
.sc-src-chip{ display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:700; color:var(--ip-ok); background:var(--ip-ok-wash); border-radius:999px; padding:3px 10px; }
.sc-src-chip .material-symbols-outlined{ font-size:16px; }
.sc-leave-warn{ margin-bottom:8px; }
/* Smart Calculator: leave without pay excluded from the service period */
.sc-net .sc-break-row{ align-items:center; }
.sc-excl > span:first-child{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; }
.sc-excl button.sc-src-chip{ border:0; cursor:pointer; font:inherit; font-size:12px; font-weight:700; }
.sc-excl button.sc-src-chip .material-symbols-outlined:last-child{ font-size:16px; }
.sc-excl .ip-num{ color:var(--ip-stop); font-weight:700; }
.sc-excl-list{ background:var(--ip-page); border-radius:12px; padding:4px 12px; margin:4px 0 8px; }
.sc-excl-item{ display:flex; align-items:center; gap:10px; padding:9px 0; border-top:1px solid var(--ip-surface2); font-size:13px; }
.sc-excl-item:first-child{ border-top:0; }
.sc-excl-b{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.sc-excl-b b{ color:var(--ip-ink); font-size:13.5px; }
.sc-excl-b > span{ color:var(--ip-ink3); font-size:12.5px; }
.sc-excl-why{ color:var(--ip-ink2) !important; }
.sc-excl-n{ min-width:48px; text-align:end; font-weight:800; color:var(--ip-stop); }
.sc-excl-n.zero{ color:var(--ip-ink3); font-weight:600; }
.sc-quiet{ color:var(--ip-ink3); font-size:13px; }
@media (max-width:640px){ .sc-excl-item{ flex-wrap:wrap; } .sc-excl-item .px-pill{ margin-inline-start:0; } }
.sc-leavefile .hc-link, .sc-field > .hc-link{ display:inline-block; text-align:start; margin-top:4px; }
.sc-src-note{ display:flex; align-items:flex-start; gap:8px; font-size:13px; color:var(--ip-ink2); background:var(--ip-ok-wash); border-radius:10px; padding:9px 12px; margin:6px 0 10px; }
.sc-src-note .material-symbols-outlined{ font-size:18px; color:var(--ip-ok); }
.sc-src-note.warn{ background:var(--ip-warn-wash); }
.sc-src-note.warn .material-symbols-outlined{ color:var(--ip-warn); }

/* Today: leave line */
a.ht-leave{ display:flex; align-items:center; gap:12px; background:var(--ip-surface); border:1px solid var(--ip-line); border-radius:14px; padding:12px 16px; margin-bottom:12px;
  color:var(--ip-ink2); text-decoration:none; font-size:14px; }
a.ht-leave:hover{ border-color:var(--ip-line2); text-decoration:none; }
a.ht-leave > .material-symbols-outlined{ color:var(--ip-brand); background:var(--ip-brand-wash); border-radius:50%; width:34px; height:34px; display:flex; align-items:center; justify-content:center; font-size:19px; }
a.ht-leave b{ color:var(--ip-ink); }
a.ht-leave .hc-link{ margin-inline-start:auto; }

@media (max-width:1100px){ .lc-chips{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:640px){
  .lv-setup{ padding:14px; gap:10px; }
  .lv-nums{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .lv-acts{ margin-inline-start:0; width:100%; }
  .lv-row > label{ min-width:0; flex:1 1 140px; }
  .lv-item-d{ margin-inline-start:0; }
  .lv-item-d dl{ grid-template-columns:1fr; }
  .lv-item-d dt{ margin-top:4px; }
  .lv-led{ grid-template-columns:78px minmax(0,1fr) auto; }
  .lc-chips{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .lc-row-a{ padding-inline-start:0; }
  .lc-day{ min-height:58px; padding:2px; }
  .lc-who{ font-size:9.5px; padding:0 3px; }
  .lc-dow{ font-size:10px; }
  .lc-ob{ grid-template-columns:1fr 1fr; }
  .lc-setup{ grid-template-columns:1fr; }
  .lc-cal-h h2{ min-width:0; font-size:15px; }
  .lc-cal-key{ display:none; }
  a.ht-leave{ flex-wrap:wrap; }
}

/* =====================================================================
   Leave Import / Export (preview) - pages/ipro/leave/io.html
   A page, not a drawer: the review must hold hundreds of rows legibly.
   ===================================================================== */
.lc-head-acts{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.lc-head-acts .ip-btn{ display:inline-flex; align-items:center; gap:6px; text-decoration:none; }
.lc-io-link{ display:inline-flex; align-items:center; gap:6px; margin:2px 0 8px; text-decoration:none; }
.lc-io-link .material-symbols-outlined{ font-size:18px; }
.lio-back{ display:inline-flex; align-items:center; gap:4px; font-size:13px; font-weight:600; color:var(--ip-brand); text-decoration:none; margin-top:4px; }
.lio-back .material-symbols-outlined{ font-size:18px; }
.lio-back:hover{ color:var(--ip-brand-ink); text-decoration:underline; }
.lio .ht-head .ip-btn{ display:inline-flex; align-items:center; gap:6px; }

/* ---- home ---- */
.lio-home{ display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:12px; align-items:start; }
.lio-flow{ padding-bottom:16px; }
.lio-steps{ list-style:none; margin:6px 0 0; padding:0; }
.lio-steps li{ position:relative; display:grid; grid-template-columns:34px minmax(0,1fr); gap:14px; padding:12px 0 14px; }
.lio-steps li + li{ border-top:1px solid var(--ip-line); }
.lio-n{ width:30px; height:30px; border-radius:50%; background:var(--ip-brand); color:#fff; font-weight:800; font-size:14px; display:flex; align-items:center; justify-content:center; font-variant-numeric:tabular-nums; }
.lio-steps b{ display:block; font-size:15px; color:var(--ip-ink); margin-top:4px; }
.lio-steps p{ font-size:13.5px; line-height:1.5; color:var(--ip-ink2); margin:4px 0 10px; max-width:62ch; }
.lio-steps .ip-btn{ display:inline-flex; align-items:center; gap:6px; }
.lio-drop{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; text-align:center; cursor:pointer;
  border:2px dashed var(--ip-line2); border-radius:14px; background:var(--ip-page); padding:22px 16px; transition:border-color .15s, background .15s; }
.lio-drop:hover, .lio-drop.drag{ border-color:var(--ip-brand); background:var(--ip-brand-wash); }
.lio-drop.busy{ cursor:progress; border-style:solid; border-color:var(--ip-brand); background:var(--ip-brand-wash); }
.lio-drop input{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.lio-drop:focus-within{ outline:2px solid var(--ip-brand); outline-offset:2px; }
.lio-drop > .material-symbols-outlined{ font-size:30px; color:var(--ip-brand); }
.lio-drop b{ margin:0; font-size:14.5px; color:var(--ip-brand-ink); }
.lio-drop > span:last-child{ font-size:12.5px; color:var(--ip-ink3); }
.lio-side .ht-group .ip-btn{ display:inline-flex; align-items:center; gap:6px; margin:2px 0 8px; }
.lio-batch{ display:flex; align-items:center; gap:10px; width:100%; border:0; border-top:1px solid var(--ip-line); background:none; padding:10px 0; text-align:start; font:inherit; cursor:pointer; }
.lio-batch:hover .lio-batch-b b{ color:var(--ip-brand); }
.lio-batch-b{ flex:1; min-width:0; display:flex; flex-direction:column; }
.lio-batch-b b{ font-size:13.5px; color:var(--ip-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lio-batch-b > span{ font-size:12px; color:var(--ip-ink3); }
.ht-gh + .lio-batch, .ht-gh + .ac-empty + .lio-batch{ border-top:0; }

/* ---- the file under review ---- */
.lio-file{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:var(--ip-surface); border:1px solid var(--ip-line); border-radius:14px; padding:12px 16px; margin-bottom:10px; }
.lio-file-i{ width:38px; height:38px; border-radius:10px; background:var(--ip-ok-wash); color:var(--ip-ok); display:flex; align-items:center; justify-content:center; font-size:22px; flex:none; }
.lio-file-b{ flex:1; min-width:200px; display:flex; flex-direction:column; }
.lio-file-b b{ font-size:15px; color:var(--ip-ink); word-break:break-all; }
.lio-file-b > span{ font-size:12.5px; color:var(--ip-ink3); }
.lio-file .hc-link{ display:inline-flex; align-items:center; gap:4px; }
.lio-file .hc-link .material-symbols-outlined{ font-size:18px; }
.lio .hc-warn{ margin:0 0 10px; }

.lio-result{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-bottom:10px; }
.lio-tile{ background:var(--tw); border-radius:12px; padding:12px 14px; display:flex; flex-direction:column; }
.lio-tile b{ font-size:28px; line-height:1.1; font-weight:800; color:var(--t); font-variant-numeric:tabular-nums; }
.lio-tile span{ font-size:12.5px; font-weight:600; color:var(--ip-ink2); }
.lio-tile.zero{ background:var(--ip-surface2); }
.lio-tile.zero b{ color:var(--ip-ink3); }
.lio-result-p{ grid-column:1 / -1; font-size:13.5px; color:var(--ip-ink2); margin:2px 0 0; line-height:1.5; }

.lio-chips{ grid-template-columns:repeat(7,minmax(0,1fr)); margin:0 0 10px; }
.lio-chips-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.lio-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--t); margin-inline-end:6px; vertical-align:1px; }

.lio-tools{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:6px; }
.lio-tools .px-seg{ margin:0; }
.lio-search{ position:relative; flex:1; min-width:200px; max-width:340px; margin:0; }
.lio-search .material-symbols-outlined{ position:absolute; inset-inline-start:10px; top:50%; transform:translateY(-50%); font-size:19px; color:var(--ip-ink3); pointer-events:none; }
.lio-search input{ width:100%; padding-inline-start:36px !important; }
.lio-bulk{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:13px; color:var(--ip-warn); background:var(--ip-warn-wash); border-radius:10px; padding:8px 12px; margin-bottom:8px; }
.lio-bulk span{ flex:1; min-width:200px; }

/* ---- the rows ---- */
.lio-table{ background:var(--ip-surface); border:1px solid var(--ip-line); border-radius:14px; overflow:hidden; }
.lio-tr{ display:grid; grid-template-columns:136px 70px minmax(150px,1.1fr) 124px minmax(170px,1.2fr) minmax(230px,1.8fr) 108px;
  gap:12px; align-items:start; padding:11px 14px; border-top:1px solid var(--ip-line); border-inline-start:3px solid transparent; font-size:13px; color:var(--ip-ink); }
.lio-th{ border-top:0; background:var(--ip-surface2); font-size:12px; font-weight:700; color:var(--ip-ink2); padding-top:9px; padding-bottom:9px; position:sticky; top:0; z-index:1; }
.lio-tr.st-ready{ border-inline-start-color:var(--ip-ok); }
.lio-tr.st-review{ border-inline-start-color:var(--ip-warn); }
.lio-tr.st-error{ border-inline-start-color:var(--ip-stop); }
.lio-tr.st-skip{ border-inline-start-color:var(--ip-idle); }
.lio-tr.st-review.inc{ background:#fffcf6; }
.lio-st{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; font-weight:700; }
.lio-st > .material-symbols-outlined{ font-size:19px; }
.lio-st em{ font-style:normal; font-size:12.5px; }
.st-ready .lio-st{ color:var(--ip-ok); } .st-review .lio-st{ color:var(--ip-warn); } .st-error .lio-st{ color:var(--ip-stop); } .st-skip .lio-st{ color:var(--ip-ink3); }
.lio-flag{ font-style:normal; font-size:10.5px; font-weight:700; color:var(--ip-ink2); background:var(--ip-idle-wash); border-radius:4px; padding:1px 5px; }
.lio-flag.c{ color:var(--ip-stop); background:var(--ip-stop-wash); }
.lio-rn{ display:flex; flex-direction:column; font-variant-numeric:tabular-nums; }
.lio-rn small{ font-size:11px; color:var(--ip-ink3); }
.lio-rn b{ font-size:14px; }
.lio-emp{ display:flex; flex-direction:column; min-width:0; }
.lio-name{ border:0; background:none; padding:0; font:inherit; font-weight:700; color:var(--ip-ink); text-align:start; overflow-wrap:anywhere; }
button.lio-name{ cursor:pointer; color:var(--ip-brand-ink); }
button.lio-name:hover{ text-decoration:underline; }
.lio-emp small{ font-size:11.5px; color:var(--ip-ink3); font-variant-numeric:tabular-nums; }
.lio-act{ font-weight:600; color:var(--ip-ink2); }
.lio-prop{ overflow-wrap:anywhere; line-height:1.45; }
.lio-msgs{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.lio-m{ display:flex; gap:5px; align-items:flex-start; line-height:1.4; overflow-wrap:anywhere; }
.lio-m .material-symbols-outlined{ font-size:15px; margin-top:1px; flex:none; }
.lio-m.l-error{ color:var(--ip-stop); font-weight:600; }
.lio-m.l-warn{ color:var(--ip-warn); font-weight:600; }
.lio-m.l-info{ color:var(--ip-ink2); }
.lio-inc{ display:flex; justify-content:flex-start; }
.lio-yes{ display:inline-flex; align-items:center; gap:3px; color:var(--ip-ok); font-weight:700; font-size:12.5px; }
.lio-yes .material-symbols-outlined{ font-size:17px; }
.lio-no{ color:var(--ip-ink3); font-size:12.5px; font-weight:600; }
.lio-check{ display:inline-flex !important; align-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--ip-warn); cursor:pointer; margin:0; }
.lio-check input{ width:17px; height:17px; accent-color:var(--ip-warn); margin:0; }
.lio-more{ display:flex; justify-content:center; margin:12px 0; }

/* ---- the decision ---- */
.lio-bar{ position:sticky; bottom:12px; z-index:5; display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:14px;
  background:var(--ip-surface); border:1px solid var(--ip-line2); border-radius:14px; padding:12px 16px; box-shadow:0 8px 24px rgba(36,31,46,.14); }
.lio-bar-t{ flex:1; min-width:220px; display:flex; flex-direction:column; }
.lio-bar-t b{ font-size:15px; color:var(--ip-ink); }
.lio-bar-t > span{ font-size:12.5px; color:var(--ip-ink2); }
.lio-modal{ position:fixed; inset:0; z-index:1300; display:flex; align-items:center; justify-content:center; padding:16px; }
.lio-modal-bg{ position:absolute; inset:0; background:rgba(36,31,46,.45); }
.lio-dialog{ position:relative; width:min(560px, 100%); max-height:calc(100vh - 32px); overflow:auto; background:var(--ip-surface); border-radius:16px; padding:22px 24px; box-shadow:0 20px 60px rgba(36,31,46,.3); }
.lio-dialog h2{ font-size:19px; font-weight:800; color:var(--ip-ink); margin:0 0 6px; }
.lio-dialog > p{ font-size:14px; color:var(--ip-ink2); margin:0 0 8px; }
.lio-will{ list-style:none; margin:0 0 12px; padding:0; }
.lio-will li{ display:flex; align-items:baseline; gap:10px; padding:7px 0; border-top:1px solid var(--ip-line); font-size:14px; color:var(--ip-ink); }
.lio-will li:first-child{ border-top:0; }
.lio-will b{ min-width:48px; text-align:end; font-size:18px; font-weight:800; color:var(--ip-brand); font-variant-numeric:tabular-nums; }
.lio-will em{ font-style:normal; color:var(--ip-ink3); font-size:13px; }
.lio-will li.mute b{ color:var(--ip-ink3); }
.lio-by{ display:flex; flex-direction:column; gap:4px; font-size:13px; font-weight:600; color:var(--ip-ink2); margin:10px 0 8px; }
.lio-dialog-f{ display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap; margin-top:14px; }

@media (max-width:1100px){
  .lio-chips{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .lio-tr{ grid-template-columns:120px 60px minmax(130px,1fr) 110px minmax(150px,1fr) minmax(190px,1.4fr) 96px; }
}
@media (max-width:900px){
  .lio-home{ grid-template-columns:1fr; }
  .lio-th{ display:none; }
  .lio-tr{ grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"st inc" "emp rn" "act act" "prop prop" "msgs msgs"; gap:6px 12px; padding:12px 14px; }
  .lio-st{ grid-area:st; } .lio-inc{ grid-area:inc; justify-content:flex-end; } .lio-emp{ grid-area:emp; } .lio-rn{ grid-area:rn; align-items:flex-end; }
  .lio-act{ grid-area:act; font-size:12.5px; } .lio-prop{ grid-area:prop; } .lio-msgs{ grid-area:msgs; }
  .lio-rn{ flex-direction:row; gap:4px; align-items:baseline; }
}
@media (max-width:640px){
  .lc-head-acts{ width:100%; justify-content:stretch; }
  .lc-head-acts > *{ flex:1; justify-content:center; }
  .lio-chips{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .lio-chips-4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .lio-result{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .lio-search{ max-width:none; min-width:0; flex-basis:100%; }
  .lio-tools .px-seg{ width:100%; }
  .lio-bar{ bottom:8px; }
  .lio-bar .ip-btn{ flex:1; }
  .lio-dialog{ padding:18px 16px; }
  .lio-steps li{ grid-template-columns:30px minmax(0,1fr); gap:10px; }
}

.lio-prep{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ip-ink2); margin:8px 0 0; }
.lio-prep .jr-load-ring{ width:14px; height:14px; border-width:2px; margin:0; flex:none; }

/* ---- Set Up Leave Balances (the simple task) ---- */
.lbs{ max-width:820px; }
.lbs-steps{ list-style:none; margin:0; padding:0; background:var(--ip-surface); border:1px solid var(--ip-line); border-radius:16px; }
.lbs-steps > li{ display:grid; grid-template-columns:40px minmax(0,1fr); gap:16px; padding:22px 24px; }
.lbs-steps > li + li{ border-top:1px solid var(--ip-line); }
.lbs-steps .lio-n{ width:36px; height:36px; font-size:16px; }
.lbs-step h2{ font-size:17px; font-weight:800; color:var(--ip-ink); margin:5px 0 4px; }
.lbs-step > p{ font-size:14px; color:var(--ip-ink2); margin:0 0 12px; line-height:1.5; }
.lbs-date{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:14px; color:var(--ip-ink2); margin:0 0 12px; }
.lbs-date b{ color:var(--ip-ink); font-variant-numeric:tabular-nums; }
.lbs-date .sc-input{ width:auto; max-width:180px; }
.lbs-main{ display:inline-flex; align-items:center; gap:8px; font-size:15px; padding:11px 20px; }
.lbs-ex{ border-collapse:separate; border-spacing:0; font-size:14px; border:1px solid var(--ip-line); border-radius:12px; overflow:hidden; min-width:min(460px,100%); }
.lbs-ex td{ padding:8px 14px; border-top:1px solid var(--ip-line); color:var(--ip-ink2); }
.lbs-ex tr:first-child td{ border-top:0; }
.lbs-ex td:first-child{ font-weight:700; color:var(--ip-ink); }
.lbs-ex td.n{ width:74px; text-align:center; font-weight:800; font-size:15px; color:var(--ip-brand-ink); background:#fffdf3; border-inline:1px solid var(--ip-line); font-variant-numeric:tabular-nums; }
.lbs-ex td.n.e{ background:repeating-linear-gradient(135deg, #fffdf3 0 6px, #f4f1e6 6px 12px); }
.lbs .lio-drop{ max-width:520px; }
.lbs-more{ display:flex; flex-wrap:wrap; gap:6px 22px; margin:16px 4px 0; }
.lbs-more .hc-link{ display:inline-flex; align-items:center; gap:6px; color:var(--ip-ink2); font-weight:600; }
.lbs-more .hc-link:hover{ color:var(--ip-brand); }
.lbs-more .material-symbols-outlined{ font-size:18px; }
.lbs-recent{ margin-top:10px; max-width:820px; }
.lbs-switch{ display:inline-flex; align-items:center; gap:4px; margin-top:8px; }
.lbs-switch .material-symbols-outlined{ font-size:17px; }

.lbs-chips{ grid-template-columns:repeat(6,minmax(0,1fr)); margin:0 0 10px; }
.lbs-table{ background:var(--ip-surface); border:1px solid var(--ip-line); border-radius:14px; overflow:hidden; }
.lbs-tr{ display:grid; grid-template-columns:minmax(180px,1.3fr) 130px minmax(170px,1.2fr) minmax(230px,1.6fr); gap:14px; align-items:start;
  padding:12px 16px; border-top:1px solid var(--ip-line); border-inline-start:3px solid transparent; font-size:13.5px; color:var(--ip-ink); }
.lbs-th{ border-top:0; background:var(--ip-surface2); font-size:12px; font-weight:700; color:var(--ip-ink2); padding-top:9px; padding-bottom:9px; }
.lbs-tr.t-ok{ border-inline-start-color:var(--ip-ok); }
.lbs-tr.t-warn{ border-inline-start-color:var(--ip-warn); }
.lbs-tr.t-stop{ border-inline-start-color:var(--ip-stop); }
.lbs-tr.t-idle{ border-inline-start-color:var(--ip-idle); }
.lbs-emp{ display:flex; flex-direction:column; min-width:0; }
.lbs-emp small{ font-size:11.5px; color:var(--ip-ink3); font-variant-numeric:tabular-nums; }
.lbs-bal{ font-size:15px; font-weight:800; color:var(--ip-ink); font-variant-numeric:tabular-nums; }
.lbs-bal.blank{ font-weight:600; font-style:italic; color:var(--ip-ink3); }
.lbs-cur{ color:var(--ip-ink2); line-height:1.45; }
.lbs-res{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.lbs-res-h{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.lbs-said{ list-style:none; margin:4px 0 14px; padding:0; }
.lbs-said li{ font-size:14.5px; line-height:1.5; color:var(--ip-ink2); padding:6px 0; border-top:1px solid var(--ip-line); }
.lbs-said li:first-child{ border-top:0; }
.lbs-said li.main{ font-size:16px; color:var(--ip-ink); font-weight:600; }
.lbs-said b{ color:var(--ip-brand); font-variant-numeric:tabular-nums; }

@media (max-width:900px){
  .lbs-chips{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .lbs-th{ display:none; }
  .lbs-tr{ grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"emp bal" "cur cur" "res res"; gap:6px 12px; }
  .lbs-emp{ grid-area:emp; } .lbs-bal{ grid-area:bal; text-align:end; } .lbs-cur{ grid-area:cur; font-size:12.5px; } .lbs-res{ grid-area:res; }
}
@media (max-width:640px){
  .lbs-steps > li{ grid-template-columns:32px minmax(0,1fr); gap:12px; padding:18px 16px; }
  .lbs-steps .lio-n{ width:30px; height:30px; font-size:14px; }
  .lbs-main{ width:100%; justify-content:center; }
  .lbs-chips{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .lbs-ex{ min-width:0; width:100%; }
}