/* IPRO customer portal — shared light theme.
   ===========================================================================
   Loaded after the legacy stylesheets, so this file's job is to overrule the
   dark shell (style.css paints body #212121) and give every customer page one
   calm surface.

   The accent is taken from the logo's own pixels, not invented: the mark is a
   gradient running #ff007d -> #a90093 -> #7800a6 -> #340077 with #383838 type.
   The violet end carries the interface because it holds contrast on white; the
   magenta end appears only where something genuinely needs attention. Neutrals
   are biased very slightly toward the same violet so they read as chosen.

   Every offset is a logical property, so the whole portal mirrors under
   dir="rtl" without a second stylesheet.
   =========================================================================== */

:root{
  --ip-brand:#6b0f96;        /* from the logo's violet, darkened for contrast */
  --ip-brand-ink:#4a0a75;
  --ip-brand-wash:#f4ecf9;
  --ip-accent:#c4006b;       /* the magenta end — attention only, never decor */
  --ip-accent-wash:#fdecf3;

  --ip-ink:#241f2e;
  --ip-ink2:#54506a;
  --ip-ink3:#827e94;
  --ip-line:#e7e5ef;
  --ip-line2:#d3d0e0;
  --ip-surface:#ffffff;
  --ip-surface2:#f2f1f7;
  --ip-page:#f5f5fa;

  --ip-ok:#0f7a46;    --ip-ok-wash:#e7f5ed;
  --ip-warn:#a8530a;  --ip-warn-wash:#fdf2e5;
  --ip-stop:#a81a3c;  --ip-stop-wash:#fdecf0;
  --ip-idle:#b3b1bf;  --ip-idle-wash:#e9e9f0;
}

/* Icons are ligatures, so before the font loads the page shows their names as
   words. Hidden until fonts settle; visibility, not display, so the layout
   does not jump when they arrive. */
.ip-icons-loading .material-symbols-outlined{ visibility:hidden; }

/* ---- shell --------------------------------------------------------------- */
body{
  background:var(--ip-page) !important;
  color:var(--ip-ink);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}
#content{ padding:24px 0 48px !important; display:block; }
#container{ min-height:60vh; }

/* the legacy shell paints these dark; neutralise rather than restyle */
.weigets{ background:transparent !important; border:0 !important; box-shadow:none !important; margin-bottom:0 !important; }
.weigets-box{ background:transparent !important; border:0 !important; }

footer.footer{ background:transparent !important; border-top:1px solid var(--ip-line); margin-top:32px; padding:18px 0; }
footer.footer div{ color:var(--ip-ink3) !important; font-size:12px; text-align:center !important; }
.back_top .back_to_top{ background:var(--ip-brand); color:#fff; }

/* ---- header -------------------------------------------------------------- */
/* style.css paints #header black with a 5px magenta rule and 15px of padding.
   The new bar lives inside that element, so those have to go or they frame it
   in black strips above and below. */
#header{
  background-color:transparent !important;
  padding:0 !important;
  border-bottom:0 !important;
}

.ip-head{
  background:var(--ip-surface); border-bottom:1px solid var(--ip-line);
  position:sticky; top:0; z-index:1030;
}
.ip-head-in{
  max-width:1280px; margin:0 auto; padding:0 18px;
  display:flex; align-items:center; gap:10px; min-height:62px;
}
.ip-logo{ flex:none; display:flex; align-items:center; margin:0; }
.ip-logo img{ height:30px; width:auto; display:block; }

.ip-nav{ flex:1 1 auto; display:flex; align-items:center; gap:1px; flex-wrap:wrap; }
.ip-nav a{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13.5px; font-weight:500; color:var(--ip-ink2);
  padding:8px 10px; border-radius:9px; text-decoration:none; white-space:nowrap;
  border:1px solid transparent;
}
.ip-nav a:hover{ background:var(--ip-surface2); color:var(--ip-ink); text-decoration:none; }
/* the current page is named, underlined and filled — not colour alone */
.ip-nav a.active{
  background:var(--ip-brand-wash); color:var(--ip-brand-ink);
  border-color:#e0d0ed; font-weight:600;
}
.ip-nav a .mi{ font-size:18px; line-height:1; opacity:.85; }

.ip-right{ flex:none; display:flex; align-items:center; gap:8px; }

/* six items plus the account chip is tight on a laptop; drop the nav icons
   before the labels, since the words are what carry the meaning */
@media (max-width:1180px){
  .ip-nav a .mi{ display:none; }
  .ip-nav a{ padding:8px 9px; }
}

.ip-lang{ display:flex; border:1px solid var(--ip-line2); border-radius:999px; overflow:hidden; background:var(--ip-surface); }
.ip-lang button{ font-size:12.5px; font-weight:600; border:0; background:transparent; color:var(--ip-ink2);
  padding:5px 12px; cursor:pointer; line-height:1.5; }
.ip-lang button.on{ background:var(--ip-brand); color:#fff; }
.ip-lang button:not(.on):hover{ background:var(--ip-surface2); }

.ip-acct{ position:relative; }
.ip-acct>button{
  display:inline-flex; align-items:center; gap:8px; max-width:210px;
  font-size:13.5px; font-weight:600; color:var(--ip-ink);
  background:var(--ip-surface); border:1px solid var(--ip-line2);
  border-radius:9px; padding:7px 12px; cursor:pointer;
}
.ip-acct>button:hover{ background:var(--ip-surface2); }
.ip-acct-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ip-menu{
  position:absolute; inset-inline-end:0; top:calc(100% + 7px); min-width:220px;
  background:var(--ip-surface); border:1px solid var(--ip-line); border-radius:11px;
  box-shadow:0 10px 34px rgba(36,31,46,.14); padding:6px; z-index:1040;
}
.ip-menu a, .ip-menu button{
  display:block; width:100%; text-align:start; font-size:13.5px; color:var(--ip-ink);
  background:transparent; border:0; border-radius:8px; padding:9px 11px; cursor:pointer; text-decoration:none;
}
.ip-menu a:hover, .ip-menu button:hover{ background:var(--ip-surface2); text-decoration:none; }
.ip-menu hr{ margin:5px 8px; border:0; border-top:1px solid var(--ip-line); }
.ip-menu-h{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ip-ink3); padding:8px 11px 4px; }

.ip-burger{ display:none; flex:none; width:38px; height:38px; border:1px solid var(--ip-line2);
  background:var(--ip-surface); border-radius:9px; cursor:pointer; color:var(--ip-ink); }

@media (max-width:900px){
  .ip-burger{ display:inline-flex; align-items:center; justify-content:center; }
  .ip-nav{ display:none; order:10; flex-basis:100%; flex-direction:column; align-items:stretch;
           gap:2px; padding:6px 0 12px; border-top:1px solid var(--ip-line); }
  .ip-nav.open{ display:flex; }
  .ip-nav a{ padding:11px 12px; }
  .ip-head-in{ flex-wrap:wrap; }
  .ip-acct>button{ max-width:150px; }
}

/* ---- page furniture ------------------------------------------------------ */
.ip-wrap{ max-width:1220px; margin:0 auto; padding:0 18px; }
.ip-page-head{ display:flex; align-items:flex-start; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.ip-page-title{ flex:1 1 auto; min-width:0; }
.ip-page-title h1{ font-size:22px; font-weight:700; margin:0; color:var(--ip-ink); }
.ip-page-title p{ font-size:13.5px; color:var(--ip-ink3); margin:4px 0 0; }
.ip-page-actions{ flex:none; display:flex; gap:8px; flex-wrap:wrap; }

.ip-card{ background:var(--ip-surface); border:1px solid var(--ip-line); border-radius:12px;
  padding:16px 18px; box-shadow:0 1px 2px rgba(36,31,46,.04); }
.ip-card + .ip-card{ margin-top:12px; }
.ip-card-h{ font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ip-ink3); margin:0 0 12px; }

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

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

/* buttons: the legacy .btn forces white text on everything */
.ip-btn, .btn.ip-btn{
  display:inline-flex; align-items:center; gap:7px;
  font-size:13.5px; font-weight:600; border-radius:9px; padding:8px 14px;
  border:1px solid var(--ip-brand); background:var(--ip-brand); color:#fff !important; cursor:pointer;
}
.ip-btn:hover, .btn.ip-btn:hover{ background:var(--ip-brand-ink); border-color:var(--ip-brand-ink); color:#fff !important; }
.ip-btn-ghost, .btn.ip-btn-ghost{
  background:transparent; color:var(--ip-brand) !important; border-color:var(--ip-line2);
}
.ip-btn-ghost:hover, .btn.ip-btn-ghost:hover{ background:var(--ip-brand-wash); color:var(--ip-brand-ink) !important; border-color:var(--ip-brand); }

/* ---- tables -------------------------------------------------------------- */
.ip-tablewrap{ overflow-x:auto; }
table.ip-table{ width:100%; border-collapse:separate; border-spacing:0; background:var(--ip-surface); }
table.ip-table th, table.ip-table td{
  text-align:start; padding:11px 14px; font-size:13.5px; color:var(--ip-ink);
  border-bottom:1px solid var(--ip-line); vertical-align:middle;
}
table.ip-table thead th{
  font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ip-ink3); background:var(--ip-surface2); border-bottom:1px solid var(--ip-line);
  white-space:nowrap;
}
table.ip-table tbody tr:hover{ background:var(--ip-surface2); }
table.ip-table tbody tr:last-child td, table.ip-table tbody tr:last-child th{ border-bottom:0; }
.ip-num{ font-variant-numeric:tabular-nums; white-space:nowrap; }

/* legacy .table inside customer pages, so untouched screens stay readable */
#content .table{ background:var(--ip-surface); color:var(--ip-ink); }
#content .table th, #content .table td{ border-color:var(--ip-line) !important; color:var(--ip-ink); }
#content .table thead th{ color:var(--ip-ink3); }
#content h2, #content h3, #content h4, #content h5{ color:var(--ip-ink); }
#content a{ color:var(--ip-brand); }
#content a:hover{ color:var(--ip-brand-ink); }

/* ---- pills --------------------------------------------------------------- */
.ip-pill{ display:inline-block; font-size:12px; font-weight:600; border-radius:999px;
  padding:3px 10px; white-space:nowrap; }
.ip-pill-ok{ background:var(--ip-ok-wash); color:var(--ip-ok); }
.ip-pill-warn{ background:var(--ip-warn-wash); color:var(--ip-warn); }
.ip-pill-stop{ background:var(--ip-stop-wash); color:var(--ip-stop); }
.ip-pill-idle{ background:var(--ip-idle-wash); color:var(--ip-ink2); }
.ip-pill-brand{ background:var(--ip-brand-wash); color:var(--ip-brand-ink); }

/* ---- person rows --------------------------------------------------------- */
.ip-people{ display:flex; flex-direction:column; }
.ip-person{ display:flex; align-items:center; gap:12px; width:100%; text-align:start;
  border:0; background:transparent; border-radius:10px; padding:10px; cursor:pointer; }
.ip-person + .ip-person{ border-top:1px solid var(--ip-line); border-radius:0; }
.ip-person:hover{ background:var(--ip-surface2); }
.ip-avatar{ flex:none; width:38px; height:38px; border-radius:50%; background:var(--ip-brand-wash);
  color:var(--ip-brand); font-weight:700; font-size:15px;
  display:flex; align-items:center; justify-content:center; overflow:hidden; }
.ip-avatar img{ width:100%; height:100%; object-fit:cover; }
.ip-pbody{ flex:1 1 auto; min-width:0; }
.ip-pname{ display:block; font-size:14.5px; font-weight:600; overflow-wrap:anywhere; }
.ip-pmeta{ display:block; font-size:12.5px; color:var(--ip-ink3); overflow-wrap:anywhere; }
.ip-pend{ flex:none; display:flex; align-items:center; gap:8px; }

/* ---- definition rows ----------------------------------------------------- */
.ip-facts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px 22px; }
.ip-fact dt{ font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ip-ink3); margin:0 0 3px; }
.ip-fact dd{ font-size:14px; margin:0; color:var(--ip-ink); overflow-wrap:anywhere; }

/* ---- RTL ----------------------------------------------------------------- */
[dir="rtl"] body,
[dir="rtl"] #content,
[dir="rtl"] .ip-wrap{ text-align:right; }
[dir="rtl"] .ip-person{ text-align:right; }
[dir="rtl"] .ip-num{ direction:ltr; display:inline-block; }
[dir="rtl"] .pull-right{ float:left !important; }
[dir="rtl"] .pull-left{ float:right !important; }

/* the legacy grid is float-based and does not mirror on its own */
[dir="rtl"] #content [class^="col-"],
[dir="rtl"] #content [class*=" col-"]{ float:right; }

@media (max-width:600px){
  .ip-page-title h1{ font-size:19px; }
  .ip-card{ padding:14px; }
}

/* ============================================================================
   ip-journey (shared stage-journey component) + Employee Transaction Journey.
   The .sg / .jr-open rail styling lives in tracker.css and uses --tk-* tokens
   scoped to .tracker; redefine them on .jr so the journey also works on the
   employee page (outside .tracker). Same values. Light portal only.
   ============================================================================ */
.jr{ --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; }

/* subtle pulse on the CURRENT stage only (the one stage that is live) — no blinking elsewhere */
.jr .sg.is-now:not(.sg-stale) .sg-dot{ animation:ipj-pulse 2.1s ease-out infinite; }
@keyframes ipj-pulse{ 0%{ box-shadow:0 0 0 0 rgba(102,35,128,.34);} 70%{ box-shadow:0 0 0 10px rgba(102,35,128,0);} 100%{ box-shadow:0 0 0 0 rgba(102,35,128,0);} }

/* IPRO-branded document loader — one shared loader for the viewer, stage docs and the Document Spine */
.ip-docload{ display:flex; flex-direction:column; align-items:center; gap:12px; padding:30px 16px; }
.ip-docload-mark{ position:relative; width:52px; height:52px; display:grid; place-items:center; }
.ip-docload-mark img{ width:30px; height:30px; object-fit:contain; animation:ipj-breathe 1.9s ease-in-out infinite; }
.ip-docload-ring{ position:absolute; inset:0; border-radius:50%; border:3px solid #f0ecf7; border-top-color:#662380; border-inline-end-color:#e11b72; animation:ipj-spin 1.05s linear infinite; }
.ip-docload-txt{ font-size:12.5px; font-weight:600; color:#56536b; }
@keyframes ipj-spin{ to{ transform:rotate(360deg);} }
@keyframes ipj-breathe{ 0%,100%{ transform:scale(.9); opacity:.7;} 50%{ transform:scale(1); opacity:1;} }
@media (prefers-reduced-motion:reduce){ .ip-docload-ring{ animation-duration:2.6s; } .ip-docload-mark img{ animation:none; } .jr .sg.is-now .sg-dot{ animation:none; } }

/* mobile vertical rail (ip-journey vertical-mobile="true"): hidden on desktop, replaces the
   horizontal rail on narrow screens so a 10–15 stage journey stays readable */
.jr .jr-vrail{ display:none; }
.jr .vsg{ display:flex; gap:11px; width:100%; text-align:start; background:transparent; border:0; cursor:pointer; padding:0; position:relative; }
.jr .vsg-rail{ display:flex; flex-direction:column; align-items:center; flex:none; width:34px; }
.jr .vsg-dot{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:700; background:#fff; border:2px solid var(--tk-line2); color:var(--tk-ink3); z-index:1; font-variant-numeric:tabular-nums; }
.jr .vsg.seg-done .vsg-dot{ background:var(--tk-ok); border-color:var(--tk-ok); color:#fff; }
.jr .vsg.is-now .vsg-dot{ border:3px solid var(--tk-brand); color:var(--tk-brand); animation:ipj-pulse 2.1s ease-out infinite; }
.jr .vsg.is-act .vsg-dot{ border:3px solid var(--tk-brand2); color:var(--tk-brand2); }
.jr .vsg.is-fail .vsg-dot{ border:3px solid var(--tk-stop); color:var(--tk-stop); }
.jr .vsg.is-next .vsg-dot{ border:2px dashed var(--tk-line2); color:var(--tk-idle); }
.jr .vsg-line{ flex:1; width:3px; background:var(--tk-line2); min-height:16px; margin:2px 0; border-radius:3px; }
.jr .vsg.seg-done .vsg-line{ background:var(--tk-ok); }
.jr .vsg:last-child .vsg-line{ display:none; }
.jr .vsg-b{ flex:1; min-width:0; padding:3px 0 14px; }
.jr .vsg-name{ font-size:12.5px; font-weight:600; color:var(--tk-ink); }
.jr .vsg.is-next .vsg-name{ color:var(--tk-ink3); font-weight:500; }
.jr .vsg.is-now .vsg-name{ color:#4a0a75; }
.jr .vsg-meta{ font-size:10.5px; color:var(--tk-ink3); margin-top:2px; }
.jr .vsg-files{ color:var(--tk-brand); font-weight:700; }
.jr .vsg-chev{ font-size:18px; color:var(--tk-line2); align-self:center; flex:none; }
.jr .vsg.is-open{ background:var(--tk-surface2); border-radius:10px; }
@media (max-width:760px){
  .jr .jr-rail-hidem{ display:none !important; }
  .jr .jr-vrail{ display:flex; flex-direction:column; }
}

/* Employee Transaction Journey section (employee page) */
.ej-count{ margin-inline-start:auto; font-size:13px; color:var(--hc-ink3,#8b90a0); font-weight:500; }
.ej-count b{ color:#662380; font-weight:700; }
.ej-proc{ border:1px solid #e9ebf0; border-radius:14px; background:#fff; margin-bottom:11px; overflow:hidden; transition:box-shadow .15s,border-color .15s; }
.ej-proc.open{ border-color:#d7d2e6; box-shadow:0 1px 2px rgba(20,22,34,.05),0 14px 30px -20px rgba(70,20,110,.25); }
.ej-head{ display:flex; align-items:center; gap:12px; width:100%; text-align:start; background:transparent; border:0; cursor:pointer; padding:14px 15px; color:inherit; font:inherit; }
.ej-bar{ width:4px; align-self:stretch; border-radius:4px; background:#662380; flex:none; }
.ej-proc.done .ej-bar{ background:#0f7a46; } .ej-proc.act .ej-bar{ background:#e11b72; } .ej-proc.idle .ej-bar{ background:#b3b1bf; }
.ej-main{ flex:1; min-width:0; }
.ej-type{ font-size:14.5px; font-weight:700; display:flex; align-items:center; gap:9px; flex-wrap:wrap; color:#1c1a2b; }
.ej-sub{ font-size:12px; color:#8b90a0; margin-top:3px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.ej-sub .sep{ color:#d2d1dd; }
.ej-pct{ display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex:none; }
.ej-pct .num{ font-size:20px; font-weight:700; line-height:1; color:#662380; font-variant-numeric:tabular-nums; }
.ej-pct .frac{ font-size:10.5px; color:#8b90a0; font-variant-numeric:tabular-nums; }
.ej-mini{ width:84px; height:5px; border-radius:999px; background:#f0f0f6; overflow:hidden; }
.ej-mini i{ display:block; height:100%; background:linear-gradient(90deg,#0f7a46,#662380); }
.ej-chev{ flex:none; color:#b3b1bf; font-size:20px; transition:transform .18s; }
.ej-proc.open .ej-chev{ transform:rotate(90deg); color:#662380; }
[dir="rtl"] .ej-chev{ transform:scaleX(-1); } [dir="rtl"] .ej-proc.open .ej-chev{ transform:scaleX(-1) rotate(90deg); }
.ej-body{ padding:2px 15px 16px; }
.ej-who{ display:flex; align-items:center; gap:9px; background:#faf9fc; border:1px solid #eef0f4; border-radius:11px; padding:10px 13px; font-size:12.5px; color:#1c1a2b; margin-bottom:14px; }
.ej-who .ic{ width:26px; height:26px; border-radius:8px; color:#fff; display:grid; place-items:center; font-size:14px; flex:none; }
.ej-foot{ margin-top:12px; }
.ej-empty{ display:flex; flex-direction:column; align-items:center; gap:9px; padding:26px 16px; text-align:center; color:#8b90a0; font-size:13px; }
.ej-empty .material-symbols-outlined{ font-size:30px; color:#b4bac6; }
.ej-disc{ border:1px dashed #d7d2e6; border-radius:13px; margin-top:4px; }
.ej-disc>summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px; padding:13px 15px; font-size:13.5px; font-weight:600; color:#56536b; }
.ej-disc>summary::-webkit-details-marker{ display:none; }
.ej-disc>summary .cnt{ margin-inline-start:auto; background:#f0f0f6; border-radius:999px; padding:2px 9px; font-size:11px; color:#8b90a0; }
.ej-disc[open]>summary{ border-bottom:1px solid #eef0f4; }
.ej-hist{ padding:4px 15px 10px; }
.ej-hist-row{ display:flex; align-items:center; gap:12px; padding:11px 0; cursor:pointer; }
.ej-hist-row+.ej-hist-row{ border-top:1px solid #f2f3f6; }
.ej-hist-ic{ width:30px; height:30px; border-radius:9px; background:#e7f5ed; color:#0f7a46; display:grid; place-items:center; flex:none; font-size:15px; }
.ej-hist-ic.cancel{ background:#fdecf0; color:#a81a3c; } .ej-hist-ic.pause{ background:#fdf2e5; color:#a8530a; }
.ej-hist-main{ flex:1; min-width:0; }
.ej-hist-t{ font-size:13px; font-weight:600; color:#1c1a2b; }
.ej-hist-s{ font-size:11px; color:#8b90a0; margin-top:1px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.ej-hist-body{ padding:6px 0 10px; }
/* the relocated Activity Log lives inside an ej-disc <details> */
.ej-log{ padding:6px 15px 14px; }

/* Employment + Cost row after the Right-now card moved into the Journey: two columns, one on mobile */
.hc-trio.hc-duo{ grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:900px){ .hc-trio.hc-duo{ grid-template-columns:1fr; } }