/* ==========================================================================
   PiPO HRIS — LAYER 20 · THE PRODUCT UI LANGUAGE
   One application, rendered many times. Every product surface across the site
   uses this chrome, so the sidebar, tables, metrics, chips and charts are
   identical everywhere. Module accent is set by .ux--<accent>.
   Sizes are in px on purpose: this is a rendering of an application, not page
   type, so it must not scale with the reading size.
   ========================================================================== */

.ux {
  --acc: var(--emerald); --acc-deep: var(--emerald-700);
  --acc-tint: var(--emerald-tint); --acc-line: rgba(8,127,91,.30);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-shot);
  box-shadow: var(--sh-lg); overflow: hidden; font-size: 12px;
}
.ux--violet  { --acc: var(--violet);  --acc-deep: var(--violet-deep);
               --acc-tint: var(--st-info-bg); --acc-line: rgba(63,50,141,.30); }
.ux--magenta { --acc: var(--magenta); --acc-deep: var(--magenta-deep);
               --acc-tint: var(--magenta-tint); --acc-line: rgba(153,42,144,.30); }
.ux--teal    { --acc: var(--teal);    --acc-deep: var(--teal-deep);
               --acc-tint: var(--teal-tint); --acc-line: rgba(11,140,120,.30); }
.ux--mint    { --acc: var(--emerald); --acc-deep: var(--emerald-700);
               --acc-tint: var(--mist); --acc-line: rgba(19,185,129,.34); }
.ux--gold    { --acc: var(--gold);    --acc-deep: var(--st-warning-ink);
               --acc-tint: var(--gold-tint); --acc-line: var(--gold-line); }

.on-dark .ux, .bg-ink .ux, .bg-plum .ux { border-color: rgba(255,255,255,.58); }

/* ── Chrome ──────────────────────────────────────────────────────────────── */
.ux__bar {
  display: flex; align-items: center; gap: .5rem; padding: 10px 14px;
  background: var(--paper); border-bottom: 1px solid var(--line-soft);
}
.ux__dots { display: flex; gap: 5px; }
.ux__dots i { width: 8px; height: 8px; border-radius: 50%; background: #D3DBD7; display: block; }
.ux__url { font-family: var(--font-mono); font-size: 10px; color: var(--muted-2); margin-inline: auto; }

.ux__body { display: grid; grid-template-columns: 132px 1fr; min-height: 0; }
@media (max-width: 620px) { .ux__body { grid-template-columns: 1fr; } }

.ux__side {
  background: var(--paper); border-right: 1px solid var(--line-soft);
  padding: 12px 8px; display: grid; align-content: start; gap: 1px;
}
@media (max-width: 620px) {
  .ux__side { display: flex; overflow-x: auto; border-right: 0;
              border-bottom: 1px solid var(--line-soft); padding: 8px; }
  .ux__side::-webkit-scrollbar { display: none; }
}
.ux__s {
  display: flex; align-items: center; gap: 7px; padding: 6px 9px;
  border-radius: 6px; font-size: 10.5px; color: var(--muted); white-space: nowrap;
}
.ux__s i { width: 4px; height: 4px; border-radius: 50%; background: #C7D2CD; flex: none; }
.ux__s.on { background: var(--acc-tint); color: var(--acc-deep); font-weight: 600; }
.ux__s.on i { background: var(--acc); }

.ux__main { padding: 15px 17px 17px; min-width: 0; background: #fff; }
.ux__h {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.ux__h b { font-size: 14px; font-weight: 700; letter-spacing: -.022em; color: var(--ink); }
.ux__h p { font-size: 10.5px; color: var(--muted-2); margin-top: 2px; }
.ux__btn {
  font-size: 10.5px; font-weight: 600; padding: 7px 11px; border-radius: 7px;
  background: var(--acc); color: #fff; white-space: nowrap;
}

/* ── Metrics ─────────────────────────────────────────────────────────────── */
.ux__metrics {
  display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: 1px;
  background: var(--line-soft); border: 1px solid var(--line-soft);
  border-radius: 9px; overflow: hidden; margin-top: 12px;
}
@media (max-width: 520px) { .ux__metrics { grid-template-columns: repeat(2, 1fr); } }
.ux__m { background: #fff; padding: 11px 12px; }
.ux__m-k { display: block; font-size: 9px; letter-spacing: .07em; text-transform: uppercase;
           color: var(--muted-2); }
.ux__m-v { display: block; font-family: var(--font-display); font-size: 19px; font-weight: 700;
           letter-spacing: -.038em; color: var(--ink); margin-top: 4px; line-height: 1; }
.ux__m-v small { font-size: .58em; font-weight: 600; color: var(--muted); margin-left: 1px; }
.ux__m-d { display: block; font-size: 9px; color: var(--muted-2); margin-top: 5px; }
/* the strategic metric — at most one per surface */
.ux__m--gold { background: rgba(176,143,69,.07); }
.ux__m--gold .ux__m-v { color: var(--ink); border-top: 2px solid var(--gold);
                        padding-top: .3rem; margin-top: .3rem; }
.ux__m--gold .ux__m-k { color: var(--st-warning-ink); }

/* ── Cards, tables, chips ────────────────────────────────────────────────── */
.ux__card {
  margin-top: 11px; border: 1px solid var(--line-soft); border-radius: 9px;
  overflow: hidden; background: #fff;
}
.ux__cardh {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 12px; background: var(--paper); border-bottom: 1px solid var(--line-soft);
}
.ux__cardh b { font-size: 11.5px; font-weight: 700; color: var(--ink); letter-spacing: -.018em; }
.ux__cardh span { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .1em;
                  text-transform: uppercase; color: var(--muted-2); }

.ux__table { display: grid; }
.ux__th, .ux__tr {
  display: grid; grid-template-columns: repeat(var(--c, 3), minmax(0, 1fr));
  gap: 10px; align-items: center; padding: 9px 12px;
}
.ux__th { background: var(--paper); font-family: var(--font-mono); font-size: 8px;
          letter-spacing: .11em; text-transform: uppercase; color: var(--muted-2); }
.ux__tr { border-top: 1px solid var(--line-soft); font-size: 10.5px; color: var(--muted); }
.ux__tr > span:first-child { font-size: 11px; font-weight: 600; color: var(--ink); }
.ux__tr > span:last-child { justify-self: end; }

.ux__chip {
  display: inline-flex; align-items: center; gap: 4px; justify-self: end;
  font-size: 9px; font-weight: 600; padding: 3px 8px; border-radius: 100px;
  white-space: nowrap;
}
.ux__chip--ok   { background: var(--emerald-tint);   color: var(--emerald-700); }
.ux__chip--wait { background: var(--st-info-bg);     color: var(--indigo-deep); }
.ux__chip--warn { background: var(--st-warning-bg);  color: var(--st-warning-ink); }
.ux__chip--off  { background: var(--mist);           color: var(--muted); }
.ux__chip--gold { background: var(--gold-tint);      color: var(--ink);
                  border: 1px solid var(--gold-line); }

/* ── Bars ────────────────────────────────────────────────────────────────── */
.ux__bars { padding: 11px 12px; display: grid; gap: 8px; }
.ux__bar-r { display: grid; grid-template-columns: 82px 1fr 46px; gap: 9px; align-items: center; }
.ux__bar-r > span:first-child { font-size: 10px; color: var(--muted); }
.ux__bar-t { height: 8px; border-radius: 0 4px 4px 0; background: var(--line-soft); overflow: hidden; }
.ux__bar-t i { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--emerald); }
.ux__bars--violet  .ux__bar-t i { background: var(--violet); }
.ux__bars--magenta .ux__bar-t i { background: var(--magenta); }
.ux__bars--gold    .ux__bar-t i { background: var(--gold); }
.ux__bar-r b { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3);
               text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; }
.ux__bars--gold .ux__bar-r b { color: var(--st-warning-ink); }

.ux__spark { display: block; width: 100%; height: 26px; margin-top: 6px; }

/* ── Process steps ───────────────────────────────────────────────────────── */
.ux__step {
  display: grid; grid-template-columns: 58px 1fr auto; gap: 10px; align-items: center;
  padding: 9px 12px; border-top: 1px solid var(--line-soft); font-size: 10.5px;
  color: var(--ink-3);
}
.ux__step:first-of-type { border-top: 0; }
.ux__step-n { font-family: var(--font-mono); font-size: 9px; color: var(--muted-2); }

/* ── Notices ─────────────────────────────────────────────────────────────── */
.ux__note {
  margin-top: 11px; padding: 9px 11px; border-radius: 8px; font-size: 10px;
  line-height: 1.5; color: var(--ink-3);
  background: var(--st-info-bg); border-left: 3px solid var(--st-info);
}
.ux__note--warn { background: var(--st-warning-bg); border-left-color: var(--st-warning); }
.ux__note--ok   { background: var(--emerald-tint);  border-left-color: var(--emerald); }

/* ── Tree ────────────────────────────────────────────────────────────────── */
.ux__tree { padding: 12px; display: grid; gap: 5px; }
.ux__tree-r { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.ux__node {
  font-size: 10px; font-weight: 600; color: var(--ink-3);
  background: var(--paper); border: 1px solid var(--line-soft);
  border-radius: 6px; padding: 5px 9px;
}
.ux__node--root { background: var(--acc-tint); border-color: var(--acc-line); color: var(--acc-deep); }
.ux__tree-l { font-family: var(--font-mono); font-size: 8px; letter-spacing: .12em;
              text-transform: uppercase; color: var(--muted-2); margin-left: .3rem; }
.ux__tree-link { width: 1px; height: 9px; background: var(--line); margin-left: 14px; display: block; }

/* ── Mobile device ───────────────────────────────────────────────────────── */
.uxm {
  width: 246px; max-width: 100%; border-radius: 26px; overflow: hidden;
  background: #fff; border: 8px solid var(--ink-2); box-shadow: var(--sh-lg);
}
.uxm__top { height: 20px; background: var(--ink-2); display: grid; place-items: center; }
.uxm__top i { width: 58px; height: 4px; border-radius: 3px; background: rgba(255,255,255,.22); display: block; }
.uxm__body { background: var(--paper); padding: 12px; min-height: 250px; }
.uxm__h { padding-bottom: 9px; }
.uxm__h b { font-size: 13px; font-weight: 700; color: var(--ink); letter-spacing: -.02em; }
.uxm__r {
  display: flex; align-items: center; justify-content: space-between; gap: 9px;
  background: #fff; border: 1px solid var(--line-soft); border-radius: 9px;
  padding: 10px 11px; margin-top: 7px;
}
.uxm__r b { display: block; font-size: 11px; font-weight: 600; color: var(--ink); }
.uxm__r span span { display: block; font-size: 9.5px; color: var(--muted-2); margin-top: 1px; }