/* SHABAB HR PRO 2.2 — Phase 1 screens (law page, import, calculator, payslips, security, global search). Uses the app colours (app.css variables). */
.p1ic {
  width: 19px;
  text-align: center;
  font-size: 15px;
  flex: none;
}
.g2p1 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
}
.g2p1 > * {
  min-width: 0;
}
@media (max-width: 900px) {
  .g2p1 {
    grid-template-columns: minmax(0, 1fr);
  }
}
.p1warn {
  background: color-mix(in srgb, var(--warn) 12%, var(--card));
  border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 14px;
  font-size: 14px;
  line-height: 1.5;
}
.p1chk {
  padding: 8px 10px;
  border-radius: 10px;
  margin: 6px 0;
  font-size: 13.5px;
  line-height: 1.45;
  background: var(--bg);
}
.p1chk.warn {
  background: color-mix(in srgb, var(--warn) 12%, var(--card));
}
.p1chk.bad {
  background: color-mix(in srgb, var(--bad) 12%, var(--card));
}
.p1chk.ok {
  background: color-mix(in srgb, var(--ok) 10%, var(--card));
}
.p1kv {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 2px;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
}
.p1kv:last-child {
  border-bottom: 0;
}
.p1kv span {
  color: var(--muted);
}
.p1kv b {
  text-align: end;
}
.p1upd {
  padding: 12px 4px;
  border-bottom: 1px solid var(--line);
}
.p1upd:last-child {
  border-bottom: 0;
}
.p1upd.unread {
  background: color-mix(in srgb, var(--primary) 6%, var(--card));
  border-radius: 10px;
  padding: 12px 10px;
}
.p1upd a {
  overflow-wrap: anywhere;
}
.p1note {
  font-size: 13px;
  padding: 6px 8px;
  margin-top: 6px;
  background: var(--bg);
  border-radius: 8px;
  overflow-wrap: anywhere;
}
.p1kb {
  border-bottom: 1px solid var(--line);
  padding: 8px 2px;
}
.p1kb summary {
  cursor: pointer;
  font-size: 13.5px;
  line-height: 1.5;
}
.p1kb p {
  font-size: 13.5px;
  line-height: 1.6;
  margin: 8px 0;
}
.p1kb a {
  overflow-wrap: anywhere;
}
.p1imp tr.bad td {
  background: color-mix(in srgb, var(--bad) 8%, var(--card));
}
.p1imp tr.warn td {
  background: color-mix(in srgb, var(--warn) 8%, var(--card));
}
.p1imp td {
  font-size: 13px;
  vertical-align: top;
}
.p1sr {
  position: fixed;
  z-index: 10000; /* 2.9.11 FIX: above every card, the sticky top bar, NEXA orb / panel (9000 / 9001), alerts (9998) and toasts (9999) */
  isolation: isolate;
  max-height: min(70vh, 520px);
  overflow: auto;
  /* 2.9.11 FIX: SOLID in every theme — the HR light "glass" card colour is 86 % white, so page buttons showed through; the card colour is
     now painted over the theme's solid page colour (--bg), never transparent */
  background: linear-gradient(var(--card), var(--card)), var(--bg, #fff);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(6, 18, 51, 0.25);
  padding: 6px;
}
.p1sr.inmodal {
  position: static;
  z-index: auto;
  box-shadow: none;
  margin-top: 8px;
  max-height: 60vh;
}
.p1sg {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: var(--muted);
  padding: 8px 10px 4px;
  text-transform: uppercase;
}
.p1si {
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.p1si b {
  font-size: 14px;
}
.p1si span {
  font-size: 12px;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.p1si.on,
.p1si:hover {
  background: color-mix(in srgb, var(--primary) 12%, var(--card));
}
.p1srch {
  display: none;
}
@media (max-width: 760px) {
  .p1srch {
    display: inline-flex;
  }
}
.p1locked {
  opacity: 0.55;
}
.p1pro {
  margin-inline-start: 6px;
  font-size: 10.5px;
}
.hr-bal .hb {
  display: block;
  min-width: 0;
}
.hr-bal .hb .s {
  white-space: normal;
  overflow-wrap: anywhere;
} /* 2.2: the bar-chart class .hb (3 grid columns) also hit the leave boxes → 3rd line stuck out, page scrolled sideways */
.kpis .hr-kpi .n {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow-wrap: normal;
  font-size: clamp(15px, 1.5vw, 24px);
}
.kpis .hr-kpi .n .dec {
  font-size: 0.62em;
  font-weight: 700;
}
@media (max-width: 760px) {
  .kpis .hr-kpi .n {
    font-size: clamp(14px, 4.6vw, 22px);
    padding-inline-end: 34px;
  }
} /* 2.2: totals with 3 decimals (baisa) stay on one line */