/* Rouya ERP v2 — one stylesheet for Arabic (RTL), Turkish and English (LTR). Logical properties only. */
:root {
  --bg: #f2f5f7;
  --panel: #ffffff;
  --ink: #17232b;
  --muted: #667785;
  --line: #e0e7ec;
  --deep: #0f3b43;
  --brand: #2b7f89;
  --brand-2: #35949e;
  --brand-soft: #e5f2f4;
  --brand-ink: #ffffff;
  --gold: #f8a50d;
  --crimson: #9e1b22;
  --ok: #2e7d32;
  --warn: #b26a00;
  --err: #b3261e;
  --tr: #9e1b22;
  --sy: #1f7a6d;
  --lb: #b26a00;
  --ai: #6a3fb5;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(16, 40, 50, .05), 0 2px 6px rgba(16, 40, 50, .06);
  --shadow-lg: 0 8px 28px rgba(16, 40, 50, .14);
}

* { box-sizing: border-box; }
html { font-size: 15px; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: "Segoe UI", Tahoma, "Noto Naskh Arabic", "Noto Sans Arabic", Arial, sans-serif;
  line-height: 1.55; -webkit-text-size-adjust: 100%;
}
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.3; color: var(--deep); }
h1 { font-size: 1.55rem; }
h3 { font-size: 1.05rem; }
small, .muted { color: var(--muted); }
.num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; direction: ltr; unicode-bidi: plaintext; }
.wide { grid-column: 1 / -1; }
.empty { text-align: center; color: var(--muted); padding: 1.5rem !important; }
.req { color: var(--err); }
.inline { display: inline; margin: 0; }
img { max-width: 100%; }
.ic { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; }

/* ---------- shell ---------- */
.shell { display: flex; min-height: 100vh; }
.side {
  width: 250px; flex: 0 0 250px; color: var(--brand-ink);
  background: linear-gradient(180deg, var(--deep) 0%, #0b2f36 100%);
  padding: 1rem 0 .5rem; position: sticky; top: 0; align-self: flex-start; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column;
}
.brandcard { display: block; margin: 0 .9rem .6rem; text-decoration: none !important; }
.logos {
  display: flex; align-items: center; justify-content: center; gap: .8rem; flex-wrap: wrap;
  background: #fff; border-radius: 12px; padding: .65rem .8rem; box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.logos.mini { box-shadow: none; border: 1px solid var(--line); padding: .35rem .6rem; }
.logos.mini img { max-height: 28px; }
.logos img { max-height: 40px; max-width: 100%; width: auto; display: block; }
.appname { padding: 0 1.1rem .6rem; border-bottom: 1px solid rgba(255, 255, 255, .12); margin-bottom: .3rem; }
.appname b { display: block; font-size: .98rem; overflow-wrap: anywhere; line-height: 1.3; }
.appname small { color: rgba(255, 255, 255, .6); font-size: .78rem; }
.side nav { flex: 1; padding-bottom: .5rem; }
.nav-group { padding: .8rem 1.1rem .25rem; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .45); font-weight: 700; }
.side nav a {
  display: flex; align-items: center; gap: .65rem; padding: .5rem 1.1rem; margin: 1px .55rem; border-radius: 9px;
  color: rgba(255, 255, 255, .82); font-size: .93rem;
}
.side nav a .ic { opacity: .8; }
.side nav a:hover { background: rgba(255, 255, 255, .08); text-decoration: none; color: #fff; }
.side nav a.on { background: rgba(255, 255, 255, .15); color: #fff; font-weight: 600; box-shadow: inset 3px 0 0 var(--gold); }
[dir=rtl] .side nav a.on { box-shadow: inset -3px 0 0 var(--gold); }
.side nav a.on .ic { opacity: 1; color: var(--gold); }
.side-foot { padding: .5rem 1.1rem; font-size: .72rem; color: rgba(255, 255, 255, .35); }
.scrim { display: none; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.top {
  display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap;
  background: var(--panel); border-bottom: 1px solid var(--line); padding: .5rem 1.25rem; position: sticky; top: 0; z-index: 20;
}
.top .who { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.top .tools { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.icon-btn { background: transparent; border: 1px solid var(--line); border-radius: 9px; padding: .35rem .5rem; cursor: pointer; color: var(--deep); display: none; }
.langs { display: flex; gap: .15rem; background: var(--bg); border-radius: 9px; padding: 2px; }
.lng { padding: .2rem .6rem; border-radius: 7px; color: var(--muted); font-size: .82rem; font-weight: 600; }
.lng.on { background: var(--deep); color: #fff; }
.lng:hover { text-decoration: none; background: var(--brand-soft); color: var(--deep); }
.lng.on:hover { background: var(--deep); color: #fff; }

.usermenu { position: relative; }
.usermenu summary { list-style: none; display: flex; align-items: center; gap: .55rem; cursor: pointer; padding: .15rem .35rem; border-radius: 10px; }
.usermenu summary::-webkit-details-marker { display: none; }
.usermenu summary:hover { background: var(--bg); }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--brand); color: #fff; display: inline-grid; place-items: center; font-weight: 700; font-size: .85rem; flex: none; }
.uname { display: flex; flex-direction: column; line-height: 1.2; font-weight: 600; font-size: .88rem; }
.uname small { font-weight: 400; font-size: .72rem; }
.usermenu .menu {
  position: absolute; inset-inline-end: 0; top: calc(100% + 6px); min-width: 210px; background: #fff; border: 1px solid var(--line);
  border-radius: 12px; box-shadow: var(--shadow-lg); padding: .35rem; z-index: 30;
}
.usermenu .menu a, .usermenu .menu button {
  display: flex; align-items: center; gap: .55rem; width: 100%; background: none; border: 0; text-align: start; font: inherit; cursor: pointer;
  padding: .5rem .7rem; border-radius: 8px; color: var(--ink);
}
.usermenu .menu a:hover, .usermenu .menu button:hover { background: var(--bg); text-decoration: none; }
.usermenu .menu form { margin: 0; }

.content { padding: 1.4rem 1.5rem 2rem; max-width: 1320px; width: 100%; margin-inline: auto; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.page-head h1 { margin: 0; }
.page-head .sub { margin: .15rem 0 0; color: var(--muted); }
.crumb-line { font-size: .8rem; color: var(--muted); margin-bottom: .2rem; }
.actions, .btn-row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.btn-row { margin: .5rem 0; }

/* ---------- cards / tables ---------- */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.05rem 1.2rem; margin-bottom: 1rem; }
.card.table-wrap { padding: 0; overflow-x: auto; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .6rem; }
.card-head h3 { margin: 0; }
.table-wrap { overflow-x: auto; }
table.grid { width: 100%; border-collapse: collapse; }
table.grid th, table.grid td { padding: .6rem .8rem; text-align: start; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.grid th { background: #f6f9fa; font-weight: 700; font-size: .8rem; color: #4a5d69; white-space: nowrap; text-transform: uppercase; letter-spacing: .02em; }
table.grid tbody tr:hover { background: #fafdfd; }
table.grid td.act, table.grid th.act { text-align: end; white-space: nowrap; width: 1%; }
table.grid td.act > * { margin-inline-start: .3rem; }
table.grid td.act > *:first-child { margin-inline-start: 0; }
table.grid td.num, table.grid th.num { text-align: end; }
table.grid tr.total td { font-weight: 700; background: #f6f9fa; }
table.grid input, table.grid select { width: 100%; min-width: 90px; }
table.grid tr.neg td { color: var(--err); }
.card > .table-wrap { margin: 0 -1.2rem; }
ul.plain { list-style: none; margin: 0; padding: 0; }
ul.plain li { padding: .45rem 0; border-bottom: 1px dashed var(--line); }
ul.plain li:last-child { border-bottom: 0; }
ul.files { list-style: none; margin: .5rem 0; padding: 0; }
ul.files li { padding: .3rem 0; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.desc { white-space: normal; background: #fafcfd; border-inline-start: 3px solid var(--brand-2); padding: .5rem .8rem; margin: .5rem 0; border-radius: 0 8px 8px 0; }

dl.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .8rem 1.25rem; margin: 0; }
dl.facts > div { min-width: 0; }
dl.facts dt { font-size: .76rem; color: var(--muted); margin-bottom: .1rem; text-transform: uppercase; letter-spacing: .03em; }
dl.facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

/* ---------- dashboard ---------- */
.hello {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  background: linear-gradient(120deg, var(--deep), var(--brand)); color: #fff; border-radius: 16px;
  padding: 1.25rem 1.5rem; margin-bottom: 1.1rem; box-shadow: var(--shadow);
}
.hello h2 { color: #fff; margin: 0 0 .15rem; font-size: 1.35rem; }
.hello p { margin: 0; color: rgba(255, 255, 255, .8); }
.hello .chips .badge { background: rgba(255, 255, 255, .18); color: #fff; }
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .9rem; margin-bottom: 1.1rem; }
.kpi { display: flex; align-items: center; gap: .85rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: .95rem 1.05rem; color: var(--ink); }
a.kpi:hover { text-decoration: none; border-color: var(--brand-2); box-shadow: var(--shadow-lg); }
.kpi-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--brand-soft); color: var(--brand); font-size: 1.25rem; }
.kpi-body { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.kpi-body b { font-size: 1.45rem; color: var(--deep); font-variant-numeric: tabular-nums; }
.kpi-body span { color: var(--muted); font-size: .85rem; }
.kpi-body small { font-size: .75rem; }
.tone-gold .kpi-ic { background: #fff3da; color: #b26a00; }
.tone-crimson .kpi-ic { background: #fbe4e5; color: var(--crimson); }
.tone-green .kpi-ic { background: #e3f3e5; color: var(--ok); }
.tone-violet .kpi-ic { background: #efe8fb; color: var(--ai); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.grid-2 > .card, .grid-3 > .card { margin-bottom: 0; }
.grid-2, .grid-3 { margin-bottom: 1rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.hbars { display: grid; gap: .65rem; }
.hbar-row { display: grid; grid-template-columns: minmax(90px, 30%) 1fr auto; gap: .6rem; align-items: center; font-size: .88rem; }
.hbar-row .track { height: 10px; background: #e9eff2; border-radius: 99px; overflow: hidden; }
.hbar-row .track span { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), var(--brand-2)); border-radius: 99px; }
.vbars { display: flex; align-items: flex-end; gap: .5rem; height: 170px; padding-top: .5rem; }
.vbar { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; min-width: 0; }
.vbar i { display: block; width: 100%; max-width: 38px; min-height: 2px; background: linear-gradient(180deg, var(--brand-2), var(--brand)); border-radius: 6px 6px 0 0; }
.vbar small { margin-top: .3rem; font-size: .7rem; white-space: nowrap; }
.vbar em { font-style: normal; font-size: .68rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.alerts { display: grid; gap: .5rem; }
.alert { display: flex; gap: .6rem; align-items: flex-start; padding: .6rem .8rem; border-radius: 10px; background: #fff7e8; border: 1px solid #f2d49b; color: #6b4300; }
.alert.err { background: #fdeceb; border-color: #f2b8b5; color: #8c1d18; }
.alert.ok { background: #e8f5e9; border-color: #b7dcb9; color: #1b5e20; }
.quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; }
.quick a { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .85rem .5rem; border: 1px dashed #c7d6dc; border-radius: 12px; color: var(--deep); font-weight: 600; font-size: .88rem; text-align: center; }
.quick a:hover { background: var(--brand-soft); border-style: solid; text-decoration: none; }
.quick a .ic { width: 1.5em; height: 1.5em; color: var(--brand); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .85rem; margin-bottom: 1rem; }
.cards.wide { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.stat { display: block; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: .9rem 1.1rem; color: var(--ink); }
.stat:hover { text-decoration: none; border-color: var(--brand-2); }
.stat b { display: block; font-size: 1.7rem; color: var(--deep); line-height: 1.2; }
.stat span { color: var(--muted); font-size: .88rem; }
.stat.link b { font-size: 1.05rem; margin-bottom: .2rem; }
.tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--line); margin-bottom: 1rem; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
.tabs a { white-space: nowrap; padding: .55rem .95rem; color: var(--muted); font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.tabs a:hover { color: var(--deep); text-decoration: none; }
.tabs a.on { color: var(--deep); border-bottom-color: var(--gold); }

/* ---------- AI ---------- */
.ai-box { border: 1px solid #d9cdf0; background: linear-gradient(135deg, #f8f4ff, #fdfbff); border-radius: var(--radius); padding: .9rem 1.1rem; margin-bottom: 1rem; }
.ai-box h3 { color: var(--ai); display: flex; align-items: center; gap: .4rem; margin-bottom: .35rem; }
.ai-box .help, .ai-box p { color: #5b4a7a; font-size: .85rem; margin: .2rem 0 .6rem; }
.ai-box .inline-form { align-items: center; }
.b-ai-note { background: #efe8fb; color: var(--ai); }

.ai-row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-top: .35rem; }
.ai-row .ai-hint { flex: 1 1 220px; min-width: 160px; font-size: .85rem; padding: .3rem .55rem; }
.ai-status { color: var(--ai); font-size: .8rem; }
.ai-status.bad { color: var(--err); }
.ai-filled { outline: 2px solid rgba(106, 63, 181, .35); background: #fbf9ff; }
tr.ai-filled-row input { background: #fbf9ff; border-color: rgba(106, 63, 181, .4); }

/* ---------- buttons / forms ---------- */
.btn, button.btn {
  display: inline-flex; align-items: center; gap: .4rem; border: 1px solid #cfdae0; background: #fff; color: var(--ink); cursor: pointer;
  padding: .45rem .95rem; border-radius: 9px; font: inherit; font-size: .9rem; font-weight: 600; line-height: 1.3; text-decoration: none; white-space: nowrap;
}
.btn:hover { background: var(--brand-soft); text-decoration: none; border-color: var(--brand-2); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.primary:hover { background: var(--deep); border-color: var(--deep); }
.btn.ghost { background: transparent; }
.btn.danger { background: #fff; border-color: #e7b7b3; color: var(--err); }
.btn.danger:hover { background: #fdecea; }
.btn.ai { background: var(--ai); border-color: var(--ai); color: #fff; }
.btn.ai:hover { background: #55329a; border-color: #55329a; }
.btn.small { padding: .22rem .65rem; font-size: .8rem; }

input:not([type]), input[type=text], input[type=password], input[type=email], input[type=tel], input[type=date], input[type=month], input[type=search], input[type=number], select, textarea {
  width: 100%; font: inherit; color: inherit; padding: .5rem .65rem; background: #fff;
  border: 1px solid #c9d6dd; border-radius: 9px;
}
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(53, 148, 158, .25); border-color: var(--brand-2); }
textarea { resize: vertical; }
input[readonly] { background: #f2f5f7; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1.25rem; }
.form-grid > * { min-width: 0; }
.field { min-width: 0; }
.field label { display: block; font-size: .84rem; font-weight: 600; margin-bottom: .25rem; color: #34485a; }
.field .help { display: block; margin-top: .2rem; font-size: .78rem; }
.field input[type=file] { width: 100%; }
label.check { display: flex; align-items: center; gap: .45rem; font-weight: 400; }
label.check input { width: auto; }
.form-actions { display: flex; flex-wrap: wrap; gap: .5rem; padding-top: .5rem; }
.form-actions.wide { grid-column: 1 / -1; }
.filters { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; padding: .7rem 1rem; }
.filters input, .filters select { width: auto; min-width: 140px; max-width: 100%; }
.inline-form { display: flex; gap: .5rem; align-items: end; flex-wrap: wrap; }
.inline-form select, .inline-form input { width: auto; }
.pct { max-width: 110px; }
.logo-prev { max-height: 64px; display: block; margin-bottom: .4rem; background: #fff; padding: .3rem; border: 1px solid var(--line); border-radius: 8px; }
.scope-pick { display: flex; gap: .45rem; flex-wrap: wrap; }
.chip-check { cursor: pointer; display: inline-flex; margin: 0 !important; }
.chip-check input { position: absolute; opacity: 0; pointer-events: none; }
.chip-check span { display: inline-block; padding: .3rem .8rem; border-radius: 999px; border: 1px solid #c9d6dd; background: #fff; color: var(--muted); font-weight: 600; font-size: .85rem; }
.chip-check input:checked + span { background: var(--deep); border-color: var(--deep); color: #fff; }
.chip-check input:focus-visible + span { outline: 3px solid rgba(53, 148, 158, .35); }

/* ---------- messages ---------- */
.flash, .notice { border-radius: 10px; padding: .65rem .95rem; margin-bottom: 1rem; border: 1px solid; }
.flash.ok { background: #e8f5e9; border-color: #b7dcb9; color: #1b5e20; }
.flash.err { background: #fdecea; border-color: #f2b8b5; color: #8c1d18; }
.flash.warn { background: #fff4e0; border-color: #f2d49b; color: #7a4a00; }
.flash.info, .notice { background: #e9f4f6; border-color: #c2dde2; color: #0b3c4d; }
.warn-text { color: var(--warn); }
.issues { border-color: #f2d49b; background: #fffaf0; }
.issues ul { margin: .4rem 0 0; padding-inline-start: 1.2rem; }
.ts-total.ok { color: var(--ok); font-weight: 700; }
.ts-total.over { color: var(--err); font-weight: 700; }

/* ---------- badges / bars ---------- */
.badge { display: inline-block; padding: .08rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 700; background: #eaeff2; color: #475a67; white-space: nowrap; }
.chips { display: inline-flex; gap: .3rem; flex-wrap: wrap; }
.b-active, .b-approved, .b-received, .b-completed, .b-paid, .b-posted, .b-human, .b-full, .b-closed.ok { background: #e3f3e5; color: #1b5e20; }
.b-submitted, .b-issued, .b-ongoing, .b-po, .b-in_use, .b-partial, .b-stale { background: #fff1d6; color: #7a4a00; }
.b-ai { background: #efe8fb; color: var(--ai); }
.b-rejected, .b-cancelled, .b-suspended, .b-disposed, .b-ended { background: #fde3e1; color: #8c1d18; }
.b-draft, .b-planning, .b-planned, .b-stored, .b-none, .b-src { background: #e6edf3; color: #3b4f61; }
.b-closed { background: #e4e8eb; color: #475a67; }
.s-TR { background: #fbe4e5; color: var(--tr); }
.s-SY { background: #ddf2ee; color: var(--sy); }
.s-LB { background: #fff0d6; color: var(--lb); }
.bar { height: 8px; background: #e6ecef; border-radius: 99px; overflow: hidden; min-width: 90px; margin-bottom: .15rem; }
.bar span { display: block; height: 100%; background: var(--brand-2); }
.bar.warn span { background: #e0a100; }
.bar.over span { background: var(--err); }

/* ---------- login ---------- */
body.bare, .bare-wrap { background: var(--bg); }
.bare-wrap { max-width: 460px; margin: 0 auto; padding: 1.25rem; min-height: 100vh; }
.bare-tools { justify-content: center; margin-bottom: 1rem; display: flex; gap: .4rem; }
body.auth { background: linear-gradient(160deg, #0f3b43 0%, #14525c 55%, #1f6f79 100%); }
body.auth .bare-wrap { background: transparent; display: flex; flex-direction: column; justify-content: center; }
body.auth .bare-tools .lng { color: rgba(255, 255, 255, .75); }
body.auth .bare-tools .lng.on { background: #fff; color: var(--deep); }
.login { background: #fff; border-radius: 18px; padding: 1.75rem 1.6rem 1.5rem; box-shadow: var(--shadow-lg); margin-top: 0; }
.login .logos { box-shadow: none; padding: 0 0 .9rem; background: none; margin-bottom: .6rem; border-bottom: 1px solid var(--line); border-radius: 0; }
.login .logos img { max-height: 54px; }
.login h1 { text-align: center; font-size: 1.25rem; color: var(--deep); margin-bottom: .2rem; }
.login .sub { text-align: center; color: var(--muted); margin: 0 0 1.1rem; font-size: .88rem; }
.login .field { margin-bottom: .85rem; }
.login .btn { width: 100%; justify-content: center; padding: .6rem; }
body.bare .bare-wrap { max-width: none; padding: 0; }

/* ---------- admin console ---------- */
.admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .9rem; margin-bottom: 1rem; }
.admin-tile { display: flex; gap: .8rem; align-items: flex-start; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; color: var(--ink); box-shadow: var(--shadow); }
.admin-tile:hover { text-decoration: none; border-color: var(--brand-2); box-shadow: var(--shadow-lg); }
.admin-tile .kpi-ic { width: 40px; height: 40px; }
.admin-tile b { display: block; color: var(--deep); }
.admin-tile small { display: block; margin-top: .1rem; }
.user-cell { display: flex; align-items: center; gap: .6rem; }
.user-cell .avatar { width: 30px; height: 30px; font-size: .75rem; }
.tree-row td:first-child { font-weight: 600; }
.pw-box { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.15rem; background: #fff8e6; border: 1px dashed #e0a100; border-radius: 10px; padding: .6rem 1rem; display: inline-block; direction: ltr; letter-spacing: .04em; }

/* ---------- documents (screen + print) ---------- */
.tx-edit { border: 1px solid var(--line); border-radius: 10px; margin: 0 0 .85rem; padding: .6rem .85rem; }
.tx-edit legend { font-weight: 600; padding: 0 .4rem; }
.tx-langs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .75rem; }
.tx-lang label { font-size: .8rem; font-weight: 600; display: block; margin-bottom: .2rem; }

.doc { position: relative; background: #fff; color: #111; max-width: 210mm; margin: 0 auto 2rem; padding: 14mm 15mm; border: 1px solid var(--line); box-shadow: var(--shadow); font-size: 11pt; line-height: 1.45; overflow: hidden; }
.doc .watermark { position: absolute; inset: 40% 0 auto 0; text-align: center; font-size: 90pt; font-weight: 800; color: rgba(180, 0, 0, .07); transform: rotate(-24deg); pointer-events: none; letter-spacing: .1em; }
.doc-logos { display: flex; align-items: center; gap: 8mm; margin-bottom: 2mm; }
.doc-logos img { max-height: 17mm; max-width: 55mm; width: auto; display: block; }
.doc-head { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 2px solid var(--brand); padding-bottom: .6rem; margin-bottom: .8rem; }
.doc-brand .org { font-weight: 700; font-size: 12pt; color: var(--deep); }
.doc-brand .logo { max-height: 18mm; display: block; margin-bottom: 2mm; }
.doc-ents { text-align: end; font-size: 9pt; min-width: 0; overflow-wrap: anywhere; }
.doc-ents .ent { margin-bottom: 1.5mm; }
.doc-ents .ent-info { color: #555; }
.doc-ref { display: inline-block; border: 1px solid var(--brand); color: var(--deep); border-radius: 3px; padding: 0 2mm; font-weight: 700; font-size: 9.5pt; letter-spacing: .03em; }
.doc-title { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 1.2em; margin: .3rem 0 .7rem; font-size: 15pt; text-align: center; color: var(--deep); }
.doc-meta { width: 100%; border-collapse: collapse; margin-bottom: .8rem; font-size: 10pt; }
.doc-meta th, .doc-meta td { border: 1px solid #cfd8de; padding: 1.2mm 2.5mm; vertical-align: top; text-align: start; }
.doc-meta th { width: 36%; background: #f3f7f8; font-weight: 600; }
.doc .lb { display: block; }
.doc .lb + .lb { font-weight: 400; color: #444; font-size: 9pt; }
.doc .vl { display: block; }
.doc .vl[dir=auto] { display: inline-block; max-width: 100%; }
.doc .vl + .vl { color: #333; font-size: 10pt; }
.doc-text { margin-bottom: .7rem; }
.doc-text h3 { font-size: 11pt; margin: 0 0 1mm; }
.doc-text h3 .lb + .lb { font-size: 9pt; }
.doc .tx { margin: 0 0 1.5mm; padding: 1.5mm 2.5mm; border-inline-start: 2px solid #cfd8de; background: #fbfcfd; }
.doc .tag { display: inline-block; font-size: 7.5pt; font-weight: 700; color: #fff; background: #667785; border-radius: 3px; padding: 0 1.5mm; margin-inline-end: 2mm; vertical-align: middle; }
.doc-static p { margin: 0 0 2mm; font-size: 10pt; text-align: justify; }
.doc-table { margin-bottom: .8rem; }
.doc-table h3 { font-size: 11pt; margin: 0 0 1.5mm; }
table.doc-grid { width: 100%; border-collapse: collapse; font-size: 9.5pt; }
table.doc-grid th, table.doc-grid td { border: 1px solid #b9c5ce; padding: 1.2mm 2mm; vertical-align: top; text-align: start; }
table.doc-grid th { background: #ecf2f5; font-weight: 600; }
table.doc-grid td.num { text-align: end; }
table.doc-grid tr.foot td { background: #f3f7f8; font-weight: 700; }
table.doc-grid .tx { border: 0; background: none; padding: 0 0 .5mm; margin: 0; }
.doc-sign { display: flex; gap: 8mm; margin-top: 14mm; page-break-inside: avoid; }
.doc-sign .sig { flex: 1; text-align: center; font-size: 9.5pt; }
.doc-sign .sig-line { border-bottom: 1px solid #333; height: 14mm; margin-bottom: 1.5mm; }
.doc-sign .sig-date { color: #555; font-size: 8.5pt; margin-top: 1mm; }
.doc-foot { display: flex; justify-content: space-between; margin-top: 8mm; padding-top: 2mm; border-top: 1px solid #cfd8de; font-size: 8.5pt; color: #666; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .icon-btn { display: inline-flex; }
  .side { position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 50; transform: translateX(-105%); transition: transform .2s ease; width: 270px; box-shadow: var(--shadow-lg); }
  [dir=rtl] .side { transform: translateX(105%); }
  body.nav-open .side { transform: none; }
  body.nav-open .scrim { display: block; position: fixed; inset: 0; background: rgba(8, 24, 28, .5); z-index: 40; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .content { padding: .9rem; }
  .uname { display: none; }
  .top { padding: .45rem .75rem; }
  .hbar-row { grid-template-columns: 1fr; gap: .2rem; }
}

@media print {
  @page { size: A4; margin: 10mm; }
  body { background: #fff; }
  .side, .top, .noprint, .flash, .page-head .actions, .scrim { display: none !important; }
  .shell, .main { display: block; }
  .content { padding: 0; max-width: none; }
  .doc { border: 0; box-shadow: none; margin: 0; padding: 0; max-width: none; }
  .doc .watermark { position: fixed; inset: 35% 0 auto 0; }
  table.doc-grid tr, .doc-text, .doc-sign { page-break-inside: avoid; }
  a { color: inherit; }
  .doc-logos img { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* ---------- v2.1: registry, hiring, recruitment, interviews ---------- */
.regno { display: inline-block; font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 700; font-size: .82rem; color: var(--deep); background: var(--brand-soft); border: 1px solid #c2dde2; border-radius: 6px; padding: .05rem .5rem; direction: ltr; unicode-bidi: isolate; white-space: nowrap; }
a.regno:hover { background: #d3eaee; text-decoration: none; }
.b-regno { background: var(--brand-soft); color: var(--deep); font-family: ui-monospace, Menlo, Consolas, monospace; direction: ltr; }
.regcard { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .9rem; padding-bottom: .8rem; border-bottom: 1px solid var(--line); }
.regcard small { display: block; color: var(--muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .03em; }
.regbig { display: block; font-size: 1.35rem; color: var(--deep); font-variant-numeric: tabular-nums; }
.actions-row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-top: .6rem; }
.ic-sm { width: 1em; height: 1em; vertical-align: -.12em; }
.stack { flex-direction: column; align-items: stretch; }
form.inline { display: inline; margin: 0; }
.cards.small { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
table.grid.small th, table.grid.small td { padding: .3rem .6rem; font-size: .84rem; }
table.grid tr.sum td { font-weight: 700; background: #f6f9fa; }
td.chk, th.chk { width: 34px; text-align: center; }
td.chk input, th.chk input { width: auto; }

/* status steps */
ol.flow { list-style: none; display: flex; gap: .4rem; padding: 0; margin: 0 0 1rem; flex-wrap: wrap; counter-reset: none; }
ol.flow li { display: flex; align-items: center; gap: .5rem; flex: 1 1 140px; min-width: 0; padding: .55rem .8rem; border-radius: 10px; background: #eef3f5; color: var(--muted); font-weight: 600; font-size: .86rem; border: 1px solid var(--line); }
ol.flow li span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex: none; background: #d6e0e5; color: #476; font-size: .78rem; }
ol.flow li span .ic { width: 14px; height: 14px; }
ol.flow li.done { background: #e3f3e5; color: #1b5e20; border-color: #b7dcb9; }
ol.flow li.done span { background: var(--ok); color: #fff; }
ol.flow li.cur { background: #fff; color: var(--deep); border-color: var(--brand-2); box-shadow: 0 0 0 3px rgba(53, 148, 158, .18); }
ol.flow li.cur span { background: var(--brand); color: #fff; }

/* history */
ul.timeline { list-style: none; margin: .4rem 0 0; padding: 0; border-inline-start: 2px solid var(--line); }
ul.timeline li { position: relative; padding: .3rem 0 .6rem 0; padding-inline-start: 1rem; }
ul.timeline li::before { content: ""; position: absolute; inset-inline-start: -6px; top: .6rem; width: 10px; height: 10px; border-radius: 50%; background: var(--brand-2); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--brand-2); }

/* pickers */
.pick-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .3rem .8rem; max-height: 260px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; padding: .6rem .8rem; background: #fcfdfd; }
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .8rem; }
.pick { display: flex; align-items: center; gap: .5rem; padding: .5rem .7rem; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.pick:hover { border-color: var(--brand-2); background: var(--brand-soft); }
.pick input { width: auto; }
.field.wide { grid-column: 1 / -1; }
.req { color: var(--err); }

/* checklists / onboarding */
ul.checklist { list-style: none; margin: .3rem 0 0; padding: 0; display: grid; gap: .35rem; }
ul.checklist li { display: flex; align-items: center; gap: .5rem; padding: .35rem .6rem; border-radius: 8px; background: #f3f6f8; color: var(--muted); }
ul.checklist li.ok { background: #e3f3e5; color: #1b5e20; }
ul.tasks { list-style: none; margin: .3rem 0 .8rem; padding: 0; display: grid; gap: .3rem; }
ul.tasks li { display: flex; align-items: center; gap: .5rem; padding: .4rem .6rem; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
ul.tasks li.done span { text-decoration: line-through; color: var(--muted); }
ul.tasks li small { margin-inline-start: auto; }
button.tick { border: 1px solid #c9d6dd; background: #fff; border-radius: 6px; width: 28px; height: 28px; display: grid; place-items: center; cursor: pointer; color: var(--muted); padding: 0; }
ul.tasks li.done button.tick { background: var(--ok); border-color: var(--ok); color: #fff; }
.late { color: var(--err); font-weight: 700; }
.warn-text { color: var(--warn); }

/* interview scorecards */
.qcard { border: 1px solid var(--line); border-radius: 12px; padding: .85rem 1rem; margin-bottom: .8rem; background: #fff; }
.qhead { display: flex; align-items: center; gap: .6rem; margin-bottom: .4rem; }
.qhead small { margin-inline-start: auto; }
.qno { width: 28px; height: 28px; border-radius: 50%; background: var(--deep); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .85rem; flex: none; }
.qtext { font-size: 1.02rem; font-weight: 600; margin: .2rem 0 .5rem; }
.qscore { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.qscore label { display: flex; align-items: center; gap: .4rem; font-weight: 600; white-space: nowrap; }
.qscore input[type=number] { width: 90px; }
.qscore input[type=text] { flex: 1 1 220px; }
.qmine { color: var(--deep); background: var(--brand-soft); padding: .35rem .6rem; border-radius: 8px; margin: .3rem 0; }
.qcard details { margin: .3rem 0 .5rem; }
.qcard summary { cursor: pointer; color: var(--brand); font-weight: 600; }

/* uploaded sheet preview */
table.grid.raw td, table.grid.raw th { font-size: .82rem; padding: .3rem .55rem; }
table.grid.raw tr.hdr td { background: #fff3da; font-weight: 700; }

/* signatures on printable file */
.sign-row { display: flex; gap: 12mm; margin-top: 14mm; }
.sign { flex: 1; text-align: center; font-size: .9rem; }
.sign-line { border-bottom: 1px solid #333; height: 14mm; margin-bottom: 1.5mm; }
.doc-regno { text-align: end; font-size: 10pt; margin: 0 0 2mm; }
.doc-regno span { color: #555; }
.doc-regno b { font-family: ui-monospace, Menlo, Consolas, monospace; color: var(--deep); }

/* extra status colours */
.b-circulated, .b-open, .b-hired, .b-qualified, .b-done, .b-ir-qualified { background: #e3f3e5; color: #1b5e20; }
.b-hr_approved, .b-offer, .b-scheduled, .b-interview { background: #e0f0f8; color: #0d4a66; }
.b-returned, .b-hold, .b-longlist, .b-no_show, .b-withdrawn { background: #fff1d6; color: #7a4a00; }
.b-shortlist { background: #e8e3f8; color: #4b2f8f; }
.b-not_qualified { background: #fde3e1; color: #8c1d18; }
.b-new, .b-archived { background: #e6edf3; color: #3b4f61; }

@media (max-width: 900px) {
  ol.flow li { flex-basis: 45%; }
  .qscore { align-items: stretch; }
}
@media print {
  .sign-row { page-break-inside: avoid; }
  .noprint, ol.flow { display: none !important; }
}

/* =====================================================================
   v2.2 — visual refresh: palette, motion, charts, dashboard
   ===================================================================== */
:root {
  --c1: #2b7f89; --c2: #f0a30a; --c3: #6a3fb5; --c4: #e0563f; --c5: #3a9d5d; --c6: #2f6fd0; --c7: #c2417c; --c8: #6b7f8c;
  --ink-2: #34485a; --glass: rgba(255, 255, 255, .14);
  --ease: cubic-bezier(.22, .8, .24, 1);
}
.ch-c1 { --ch: var(--c1); } .ch-c2 { --ch: var(--c2); } .ch-c3 { --ch: var(--c3); } .ch-c4 { --ch: var(--c4); }
.ch-c5 { --ch: var(--c5); } .ch-c6 { --ch: var(--c6); } .ch-c7 { --ch: var(--c7); } .ch-c8 { --ch: var(--c8); }

@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes ch-grow { from { transform: scaleY(0); } }
@keyframes ch-grow-x { from { transform: scaleX(0); } }
@keyframes ch-dash { from { stroke-dasharray: 0 100; } }
@keyframes ch-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ch-pop { from { opacity: 0; transform: scale(.3); } }
@keyframes ch-fade { from { opacity: 0; } }
@keyframes float-a { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(30px, -24px) scale(1.12); } }
@keyframes float-b { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-36px, 26px) scale(.92); } }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* staggered entrance for dashboard blocks */
.rise { animation: rise .55s var(--ease) both; }
.rise:nth-child(2) { animation-delay: .05s; } .rise:nth-child(3) { animation-delay: .1s; } .rise:nth-child(4) { animation-delay: .15s; }
.rise:nth-child(5) { animation-delay: .2s; } .rise:nth-child(6) { animation-delay: .25s; } .rise:nth-child(7) { animation-delay: .3s; } .rise:nth-child(8) { animation-delay: .35s; }

/* ---------- shell polish ---------- */
.top { background: rgba(255, 255, 255, .86); backdrop-filter: saturate(1.4) blur(8px); -webkit-backdrop-filter: saturate(1.4) blur(8px); }
.side nav a { transition: background .15s, transform .15s; }
.side nav a:hover { transform: translateX(2px); }
[dir=rtl] .side nav a:hover { transform: translateX(-2px); }
.card { transition: box-shadow .2s, border-color .2s, transform .2s; }
.card.lift:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
table.grid tbody tr { transition: background .12s; }
.btn { transition: background .15s, border-color .15s, box-shadow .15s, transform .1s; }
.btn:active { transform: translateY(1px); }
.btn.primary { box-shadow: 0 2px 6px rgba(43, 127, 137, .28); }

/* login: slow drifting colour blobs */
body.auth { position: relative; overflow-x: hidden; }
body.auth::before, body.auth::after { content: ""; position: fixed; border-radius: 50%; filter: blur(70px); opacity: .5; z-index: 0; pointer-events: none; }
body.auth::before { width: 380px; height: 380px; background: var(--blob-a, #3a7cc4); top: -90px; inset-inline-start: -80px; animation: float-a 14s ease-in-out infinite; }
body.auth::after { width: 320px; height: 320px; background: #f0a30a; opacity: .28; bottom: -80px; inset-inline-end: -60px; animation: float-b 17s ease-in-out infinite; }
body.auth .bare-wrap { position: relative; z-index: 1; }
.login { animation: rise .6s var(--ease) both; }

/* ---------- hero ---------- */
.hero {
  position: relative; overflow: hidden; border-radius: 18px; color: #fff; margin-bottom: 1.1rem; padding: 1.35rem 1.6rem 1.25rem;
  background: radial-gradient(900px 260px at 100% -40%, rgba(240, 163, 10, .38), transparent 60%), radial-gradient(600px 300px at -10% 130%, rgba(53, 148, 158, .55), transparent 60%), linear-gradient(120deg, #0f3b43, #1d6670);
  box-shadow: 0 10px 30px rgba(15, 59, 67, .28);
}
[dir=rtl] .hero { background: radial-gradient(900px 260px at 0% -40%, rgba(240, 163, 10, .38), transparent 60%), radial-gradient(600px 300px at 110% 130%, rgba(53, 148, 158, .55), transparent 60%), linear-gradient(240deg, #0f3b43, #1d6670); }
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; background-image: radial-gradient(rgba(255, 255, 255, .12) 1px, transparent 1.5px); background-size: 22px 22px; mask-image: linear-gradient(120deg, transparent 30%, #000 90%); -webkit-mask-image: linear-gradient(120deg, transparent 30%, #000 90%); }
.hero > * { position: relative; z-index: 1; }
.hero-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.hero h2 { color: #fff; margin: 0 0 .2rem; font-size: 1.5rem; }
.hero p { margin: 0; color: rgba(255, 255, 255, .82); }
.hero-wait { display: inline-flex; align-items: center; gap: .5rem; background: var(--glass); border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; padding: .35rem .9rem; color: #fff; font-weight: 600; font-size: .88rem; }
.hero-wait:hover { background: rgba(255, 255, 255, .24); text-decoration: none; }
.hero-wait b { background: var(--gold); color: #3b2500; border-radius: 999px; min-width: 1.5rem; padding: 0 .45rem; text-align: center; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.hero-actions a { display: inline-flex; align-items: center; gap: .45rem; padding: .42rem .95rem; border-radius: 999px; color: #fff; background: var(--glass); border: 1px solid rgba(255, 255, 255, .2); font-size: .86rem; font-weight: 600; transition: background .15s, transform .15s; }
.hero-actions a:hover { background: rgba(255, 255, 255, .26); text-decoration: none; transform: translateY(-1px); }

/* ---------- KPI tiles ---------- */
.kpis { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.kpi { position: relative; overflow: hidden; align-items: flex-start; transition: box-shadow .2s, border-color .2s, transform .2s; }
a.kpi:hover { transform: translateY(-3px); }
.kpi::before { content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 4px; background: var(--brand-2); }
.kpi.tone-gold::before { background: var(--c2); } .kpi.tone-crimson::before { background: var(--crimson); } .kpi.tone-green::before { background: var(--c5); } .kpi.tone-violet::before { background: var(--c3); }
.kpi-body { flex: 1; }
.kpi-body b { font-size: 1.75rem; letter-spacing: -.01em; }
.kpi-extra { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .3rem; min-height: 22px; }
.kpi .ch-spark { width: 96px; height: 30px; flex: none; }
.ch-delta { font-size: .72rem; font-weight: 700; padding: .05rem .45rem; border-radius: 999px; white-space: nowrap; }
.ch-delta.good { background: #e3f3e5; color: #1b5e20; } .ch-delta.bad { background: #fde3e1; color: #8c1d18; } .ch-delta.neutral { background: #e8eef2; color: var(--ink-2); }

/* ---------- panels ---------- */
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: .6rem; margin-bottom: .7rem; }
.panel-head h3 { margin: 0; display: flex; align-items: center; gap: .5rem; }
.panel-head h3 .ic { color: var(--brand); }
.panel-head small { display: block; font-weight: 400; margin-top: .1rem; }
.chip { display: inline-flex; align-items: center; gap: .3rem; padding: .08rem .6rem; border-radius: 999px; background: var(--brand-soft); color: var(--deep); font-size: .76rem; font-weight: 700; }
.grid-21 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1rem; margin-bottom: 1rem; }
.grid-21 > .card, .grid-12 > .card { margin-bottom: 0; }
.grid-12 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 1rem; margin-bottom: 1rem; }
.section-title { display: flex; align-items: center; gap: .6rem; margin: 1.4rem 0 .7rem; color: var(--deep); font-size: 1.02rem; font-weight: 700; }
.section-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); }
[dir=rtl] .section-title::after { background: linear-gradient(270deg, var(--line), transparent); }

/* ---------- charts ---------- */
.chart { position: relative; }
.ch-svg { display: block; width: 100%; height: auto; overflow: visible; direction: ltr; font-family: inherit; }
.ch-scroll { overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; direction: ltr; }
.ch-track { fill: none; stroke: #e8eef1; }
.ch-grid { stroke: #e6ecef; stroke-width: 1; stroke-dasharray: 3 4; }
.ch-axis { font-size: 10.5px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.ch-axis.x { font-size: 10.5px; }
.ch-val { font-size: 10px; fill: var(--ink-2); font-weight: 700; }
.ch-center { font-size: 26px; font-weight: 800; fill: var(--deep); font-variant-numeric: tabular-nums; }
.ch-center-s { font-size: 10.5px; fill: var(--muted); }
.ch-bar { fill: var(--ch); transform-box: fill-box; transform-origin: 50% 100%; animation: ch-grow .75s var(--ease) both; transition: opacity .15s, filter .15s; }
.ch-bar:hover, .ch-bar:focus { filter: brightness(1.12); outline: none; }
.ch-slice { fill: none; stroke: var(--ch); stroke-linecap: butt; animation: ch-dash 1s var(--ease) both; transition: stroke-width .15s, opacity .15s; }
.ch-donut:hover .ch-slice { opacity: .55; } .ch-donut .ch-slice:hover, .ch-donut .ch-slice:focus { opacity: 1; stroke-width: 22; outline: none; }
.ch-line { fill: none; stroke: var(--ch); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; animation: ch-draw 1.3s var(--ease) both; }
.ch-area { animation: ch-fade 1.2s ease .3s both; }
.ch-stop-a { stop-color: var(--ch); stop-opacity: .34; } .ch-stop-b { stop-color: var(--ch); stop-opacity: 0; }
.ch-pt { fill: #fff; stroke: var(--ch); stroke-width: 2.4; transform-box: fill-box; transform-origin: center; animation: ch-pop .4s var(--ease) both; cursor: pointer; transition: r .15s; }
.ch-pt:hover, .ch-pt:focus { r: 6; outline: none; }
.ch-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--ch); flex: none; }
.ch-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; font-size: .85rem; }
.ch-legend li, .ch-legend a { display: flex; align-items: center; gap: .5rem; min-width: 0; color: var(--ink); }
.ch-legend a:hover { text-decoration: none; color: var(--brand); }
.ch-legend .ch-lab { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-legend small { color: var(--muted); min-width: 2.6rem; text-align: end; }
.ch-legend.inline { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin-top: .55rem; }
.ch-legend.inline li, .ch-legend.inline a { flex: none; }
.ch-legend.inline .ch-lab { flex: none; }
.ch-donut { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.ch-donut .ch-donut-svg { width: 160px; flex: none; }
.ch-donut .ch-legend { flex: 1 1 150px; }
.ch-donut.compact .ch-donut-svg { width: 130px; }

.ch-funnel { display: grid; gap: .5rem; }
.ch-f-row { display: grid; grid-template-columns: minmax(96px, 26%) 1fr 3rem 2.8rem; align-items: center; gap: .6rem; font-size: .86rem; color: var(--ink); }
a.ch-f-row:hover { text-decoration: none; color: var(--brand); }
.ch-f-lab { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-f-bar { height: 24px; border-radius: 8px; background: #eef3f5; display: flex; justify-content: center; overflow: hidden; }
.ch-f-bar i { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, var(--ch), color-mix(in srgb, var(--ch) 70%, #fff)); transform-origin: center; animation: ch-grow-x .8s var(--ease) both; }
.ch-f-row small { color: var(--muted); text-align: end; }
.ch-rank { display: grid; gap: .6rem; }
.ch-r-row { display: grid; grid-template-columns: minmax(80px, 34%) 1fr auto; gap: .6rem; align-items: center; font-size: .86rem; }
.ch-r-lab { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ch-r-lab small { display: block; color: var(--muted); font-size: .72rem; }
.ch-r-track { height: 12px; border-radius: 99px; background: #eaf0f3; overflow: hidden; display: block; }
.ch-r-track i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--ch), color-mix(in srgb, var(--ch) 65%, #fff)); transform-origin: left center; animation: ch-grow-x .9s var(--ease) both; }
[dir=rtl] .ch-r-track i { transform-origin: right center; }
.ch-seg { display: flex; height: 18px; border-radius: 99px; overflow: hidden; gap: 2px; background: #eaf0f3; }
.ch-seg span { background: var(--ch); animation: ch-grow-x .8s var(--ease) both; transform-origin: left center; }
.ch-segments .ch-legend { margin-top: .6rem; }
.ch-gauge { text-align: center; max-width: 220px; margin-inline: auto; }
.ch-gauge .ch-svg { max-width: 190px; margin-inline: auto; }
.ch-gauge-val { fill: none; stroke: var(--ok); stroke-linecap: round; animation: ch-dash 1.1s var(--ease) both; }
.ch-gauge.warn .ch-gauge-val { stroke: var(--c2); } .ch-gauge.over .ch-gauge-val { stroke: var(--err); }
.ch-gauge .ch-center { font-size: 22px; } .ch-gauge small { display: block; margin-top: -.2rem; }
.ch-ring { position: relative; display: inline-grid; place-items: center; vertical-align: middle; }
.ch-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ch-ring b { font-size: .68rem; position: relative; font-variant-numeric: tabular-nums; }
.ch-ring-val { fill: none; stroke: var(--ok); stroke-linecap: round; animation: ch-dash 1s var(--ease) both; }
.ch-ring.warn .ch-ring-val { stroke: var(--c2); } .ch-ring.over .ch-ring-val { stroke: var(--err); } .ch-ring.over b { color: var(--err); }
.ch-spark .sl { fill: none; stroke: var(--ch); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; animation: ch-draw 1.2s var(--ease) both; }
.ch-spark .sa { fill: var(--ch); opacity: .12; } .ch-spark circle { fill: var(--ch); animation: ch-pop .4s ease .9s both; }
.ch-empty { text-align: center; padding: 1rem .5rem; color: var(--muted); }
.ch-empty svg { width: 120px; height: 64px; }
.ch-empty .e1 { stroke: #cfdae0; stroke-width: 2; stroke-linecap: round; fill: none; } .ch-empty .e2 { fill: #e4ecf0; }
.ch-empty p { margin: .3rem 0 .6rem; font-size: .88rem; }

/* paused until the chart scrolls into view (only when JS is available) */
html.js .chart:not(.in) *, html.js .kpi:not(.in) .ch-spark * { animation-play-state: paused !important; }

/* hover tooltip (one element, created by app.js) */
.ch-tip { position: fixed; z-index: 120; pointer-events: none; max-width: 260px; padding: .32rem .6rem; border-radius: 8px; font-size: .78rem; line-height: 1.35; color: #fff; background: rgba(12, 38, 45, .95); box-shadow: var(--shadow-lg); opacity: 0; transform: translateY(4px); transition: opacity .12s, transform .12s; }
.ch-tip.on { opacity: 1; transform: none; }

/* ---------- agenda / pipeline lists ---------- */
ul.agenda { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; }
ul.agenda li { display: flex; align-items: center; gap: .75rem; padding: .45rem .55rem; border-radius: 12px; background: #f5f8fa; transition: background .15s; }
ul.agenda li:hover { background: var(--brand-soft); }
.ag-date { width: 46px; flex: none; text-align: center; border-radius: 10px; background: #fff; border: 1px solid var(--line); padding: .15rem 0; line-height: 1.1; }
.ag-date b { display: block; font-size: 1.1rem; color: var(--deep); } .ag-date small { font-size: .66rem; text-transform: uppercase; }
.ag-date.soon { background: var(--deep); border-color: var(--deep); } .ag-date.soon b, .ag-date.soon small { color: #fff; }
.ag-body { min-width: 0; flex: 1; line-height: 1.3; } .ag-body a, .ag-body span { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ag-body small { color: var(--muted); }
.trend-note { font-size: .8rem; color: var(--muted); margin-top: .4rem; }
.stat-pair { display: flex; gap: 1.5rem; flex-wrap: wrap; margin: .2rem 0 .8rem; }
.stat-pair div { line-height: 1.25; } .stat-pair b { display: block; font-size: 1.25rem; color: var(--deep); font-variant-numeric: tabular-nums; } .stat-pair small { color: var(--muted); }
.mini-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .8rem 1.2rem; align-items: center; }

@media (max-width: 1000px) { .grid-21, .grid-12 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) {
  .hero { padding: 1.05rem 1.1rem; } .hero h2 { font-size: 1.25rem; }
  .kpis { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .6rem; }
  .kpi { padding: .75rem .8rem; } .kpi-ic { width: 38px; height: 38px; } .kpi-body b { font-size: 1.45rem; }
  .ch-f-row { grid-template-columns: minmax(70px, 30%) 1fr 2.4rem; } .ch-f-row small { display: none; }
  .ch-r-row { grid-template-columns: 1fr; gap: .2rem; } .ch-r-row b { justify-self: end; margin-top: -1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html.js .chart:not(.in) * { animation-play-state: running !important; }
}
@media print {
  .hero-actions, .hero-wait, .ch-tip { display: none !important; }
  .hero { background: #fff !important; color: #000; box-shadow: none; padding: 0; } .hero h2, .hero p { color: #000; }
  *, *::before, *::after { animation: none !important; }
}

/* dashboard: currency boxes, ring cell */
.cur-list { display: grid; gap: .8rem; }
.cur-box { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 1rem; align-items: center; padding: .6rem .9rem; border-radius: 14px; background: #f5f8fa; }
.cur-box .ch-gauge { max-width: 150px; }
.cur-box .stat-pair { margin: .2rem 0 0; gap: 1.2rem; }
.cur-head { display: flex; align-items: baseline; gap: .6rem; } .cur-head b { font-size: 1.05rem; color: var(--deep); } .cur-head small { color: var(--muted); }
.stat-pair b.neg { color: var(--crimson); }
td.ring-cell { width: 70px; }
@media (max-width: 560px) { .cur-box { grid-template-columns: 1fr; justify-items: center; text-align: center; } .cur-box .stat-pair { justify-content: center; } }

.grid-2 > *, .grid-3 > *, .grid-21 > *, .grid-12 > * { min-width: 0; }

.grid-112 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.7fr); gap: 1rem; margin-bottom: 1rem; }
.grid-112 > .card { margin-bottom: 0; }
@media (max-width: 1000px) { .grid-112 { grid-template-columns: minmax(0, 1fr); } }
.card.table-wrap > .card-head, .card.table-wrap > .panel-head { padding: 1rem 1.1rem .3rem; }
.ch-bars .ch-svg, .ch-linechart .ch-svg { max-height: 340px; }

.ch-center, .ch-center-s { pointer-events: none; }
.ch-gauge .ch-track { stroke-linecap: round; }

/* ---- v2.3 accounting ---- */
tr.group-row td { background: var(--brand-soft); color: var(--deep); font-weight: 700; font-size: .85rem; letter-spacing: .02em; }
tr.dim td, tr.dim a { color: var(--muted); }
tr.sub-row td { background: #f6f9fb; font-weight: 600; }
.strong, td.strong, th.strong { font-weight: 700; }
dl.kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .8rem 1.25rem; margin: 0; }
dl.kv > div { min-width: 0; }
dl.kv dt { font-size: .76rem; color: var(--muted); margin-bottom: .1rem; text-transform: uppercase; letter-spacing: .03em; }
dl.kv dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
tfoot tr.j-totals th { background: #f3f7f9; border-top: 2px solid var(--line); }
#jrows select.j-acct, #dlines select[name="l_acct[]"], #blines select[name="l_acct[]"] { min-width: 220px; }
#jrows select.j-cur { min-width: 104px; }
#jrows input.j-dr, #jrows input.j-cr, #dlines input.dl-price, #dlines input.dl-qty, #dlines input.dl-amount { min-width: 96px; }
#jrows input[name="j_memo[]"], #dlines input[name="l_desc[]"] { min-width: 150px; }
.j-state { font-weight: 700; }
.j-state.ok { color: #1b5e20; }
.j-state.bad { color: var(--crimson); }
.j-state.mixed { color: #7a4a00; }
.stat.static { cursor: default; }
.stat.static:hover { border-color: var(--line); }
.stat.rc-ok { border-color: #7cc08a; background: #f1faf2; }
.stat.rc-bad b { color: var(--crimson); }
td.neg, .neg { color: var(--crimson); }
.gl-ent-tags .badge { margin-inline-end: .25rem; }
.print-only { display: none; }
@media print {
  .print-only { display: block; margin-bottom: .6rem; }
  .rep-head h2 { margin: 0; font-size: 1.1rem; } .rep-head h3 { margin: .1rem 0; } .rep-head p { margin: 0; color: #444; }
  .filters, .tabs, .cards.small .stat { box-shadow: none; }
  .card { box-shadow: none; border-color: #ccc; }
}
.inline-label { display: inline-flex; align-items: center; gap: .35rem; color: var(--muted); font-size: .88rem; white-space: nowrap; }
.inline-label input[type="checkbox"] { width: auto; min-width: 0; }
h3.section-title { margin: 1.2rem 0 .5rem; color: var(--deep); font-size: 1rem; }
.notice.ok { background: #e3f3e5; border-color: #9ccf9f; color: #1b5e20; }
.notice.err { background: #fde3e1; border-color: #e6a29d; color: #8c1d18; }
ol.steps { margin: .4rem 0 0; padding-inline-start: 1.3rem; display: grid; gap: .5rem; }
ol.steps li { line-height: 1.9; }
ul.plain-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
ul.plain-list li { padding: .5rem .7rem; border-radius: 10px; background: #fff8e6; border: 1px solid #f0d9a0; }
ul.plain-list li.muted { background: #f5f8fa; border-color: var(--line); }
ul.plain-list a { font-weight: 600; }

/* =====================================================================
   v2.4 — new look: floating sidebar + top bar, hero cards, pill tabs,
   self-service pages (leave, attendance, payslips, calendar, forms),
   dark mode, RTL-safe (logical properties only).
   ===================================================================== */
:root {
  --radius: 18px;
  --fill: #0f3b43;            /* dark fill used behind white text (sidebar, active pills, buttons) */
  --bg-2: #f7fafb;            /* very light surface inside cards */
  --bg-3: #eef3f5;
  --amber-bg: #fff4dc; --amber-line: #f3d9a1; --amber-ink: #6b4300;
  --shadow: 0 1px 2px rgba(16, 40, 50, .04), 0 4px 14px rgba(16, 40, 50, .06);
  --nav-ink: rgba(255, 255, 255, .78);
}
body { background: var(--bg); }
.num { unicode-bidi: plaintext; }

/* ---------- shell: floating panels ---------- */
.shell { padding: 12px; gap: 12px; align-items: flex-start; min-height: 100vh; }
.side {
  width: 268px; flex: 0 0 268px; padding: 0; border-radius: 26px; margin: 0;
  position: sticky; top: 12px; height: calc(100vh - 24px); overflow: hidden; align-self: flex-start;
  background: linear-gradient(185deg, #124650 0%, #0f3b43 45%, #0a2c33 100%);
  box-shadow: 0 10px 30px rgba(10, 44, 51, .28);
}
.side-head { flex: none; padding: .95rem .95rem .2rem; }
.side-head .brandcard { margin: 0 0 .55rem; }
.side-head .logos { border-radius: 16px; }
.side-head .appname { padding: 0 .35rem .65rem; margin-bottom: 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.side-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .25) transparent; padding: .25rem 0 .6rem; }
.side-scroll nav { padding-bottom: 0; }
.side-label { padding: .55rem 1.35rem .1rem; font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .4); font-weight: 800; }
.side .nav-group { padding: .85rem 1.35rem .25rem; font-size: .68rem; letter-spacing: .1em; color: rgba(255, 255, 255, .5); }
.side nav a {
  margin: 1px .65rem; padding: .5rem .8rem; border-radius: 13px; color: var(--nav-ink); font-weight: 500; gap: .7rem; position: relative;
}
.side nav a > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side nav a:hover { background: rgba(255, 255, 255, .09); transform: none; }
.side nav a.on, [dir=rtl] .side nav a.on { background: rgba(255, 255, 255, .17); box-shadow: none; color: #fff; font-weight: 700; }
.side nav a.on .ic { color: var(--gold); opacity: 1; }
.side nav a.on::after { content: ""; position: absolute; inset-inline-end: .5rem; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--gold); }
.nav-badge {
  font-style: normal; display: inline-grid; place-items: center; min-width: 1.35rem; height: 1.35rem; padding: 0 .4rem; margin-inline-start: auto;
  border-radius: 999px; background: var(--gold); color: #3b2500; font-size: .7rem; font-weight: 800; line-height: 1;
}
.side nav a.on .nav-badge { margin-inline-end: .8rem; }
.side-user {
  flex: none; display: flex; align-items: center; gap: .65rem; margin: 0 .65rem .65rem; padding: .6rem .65rem; border-radius: 18px;
  background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .08);
}
.side-user .avatar { width: 38px; height: 38px; background: var(--gold); color: #3b2500; text-decoration: none; }
.side-user .u { flex: 1; min-width: 0; line-height: 1.25; color: #fff; }
.side-user .u b { display: block; font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-user .u small { display: block; color: rgba(255, 255, 255, .55); font-size: .72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-user form { margin: 0; }
.side-user .icon-btn { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .18); color: #fff; width: 36px; height: 36px; border-radius: 12px; }
.side-user .icon-btn:hover { background: rgba(255, 255, 255, .22); }

.main { gap: 12px; align-self: stretch; }
.top {
  flex-wrap: wrap; gap: .6rem .75rem; margin: 0; top: 12px; border: 1px solid var(--line); border-radius: 22px; padding: .5rem .75rem;
  box-shadow: var(--shadow); background: color-mix(in srgb, var(--panel) 92%, transparent); justify-content: flex-start;
}
.top::before { content: ""; position: absolute; z-index: -1; top: -12px; inset-inline: 0; height: 12px; background: var(--bg); pointer-events: none; }
.top-title { display: flex; align-items: center; gap: .6rem; flex: 1 1 160px; min-width: 0; }
.top-title > b { font-size: 1.02rem; color: var(--deep); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-title .chips { flex-wrap: nowrap; }
.top-tools { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; justify-content: flex-end; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-width: 38px; height: 38px; padding: 0 .55rem; position: relative;
  background: var(--panel); border: 1px solid var(--line); border-radius: 13px; color: var(--deep); cursor: pointer; font: inherit; font-size: .8rem; font-weight: 700; text-decoration: none;
}
.icon-btn:hover { background: var(--brand-soft); border-color: var(--brand-2); text-decoration: none; }
.icon-btn.wide { padding: 0 .7rem; }
.icon-btn .ic { width: 1.2em; height: 1.2em; }
.icon-btn.with-badge .nav-badge { position: absolute; top: -6px; inset-inline-end: -6px; margin: 0; min-width: 1.2rem; height: 1.2rem; font-size: .66rem; box-shadow: 0 0 0 2px var(--panel); }
.only-light, .only-dark { display: inline-flex; }
.only-dark { display: none; }
.top-year select {
  width: auto; height: 38px; padding: 0 .75rem; border-radius: 13px; background-color: var(--panel); border-color: var(--line); font-weight: 700; font-size: .82rem; color: var(--deep); cursor: pointer;
}
details.dd { position: relative; }
details.dd > summary { list-style: none; }
details.dd > summary::-webkit-details-marker { display: none; }
details.dd[open] > summary { background: var(--brand-soft); border-color: var(--brand-2); }
.dd-menu {
  position: absolute; inset-inline-end: 0; top: calc(100% + 8px); min-width: 170px; z-index: 60; padding: .35rem;
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg);
}
.dd-menu a { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .5rem .75rem; border-radius: 10px; color: var(--ink); font-weight: 600; font-size: .9rem; }
.dd-menu a:hover { background: var(--bg-3); text-decoration: none; }
.dd-menu a.on { background: var(--brand-soft); color: var(--deep); }
.top-search {
  display: flex; align-items: center; gap: .45rem; height: 38px; padding: 0 .7rem; margin: 0; flex: 0 1 230px; min-width: 130px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 13px; color: var(--muted);
}
.top-search:focus-within { border-color: var(--brand-2); box-shadow: 0 0 0 3px rgba(53, 148, 158, .22); background: var(--panel); }
.top-search input[type=search] {
  flex: 1; min-width: 0; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; outline: none; box-shadow: none; font-size: .86rem; color: var(--ink);
}
.top-search input[type=search]::-webkit-search-cancel-button { display: none; }
.top-search kbd {
  flex: none; direction: ltr; font: inherit; font-size: .66rem; font-weight: 700; padding: .05rem .4rem; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); color: var(--muted);
}

.content { max-width: 1400px; padding: .35rem 0 2.2rem; margin-inline: 0; }
.main > .content { width: 100%; }
.page-head { margin: .65rem .15rem 1.1rem; }
.page-head h1 { font-size: 1.85rem; letter-spacing: -.01em; }
.crumb-line { font-size: .82rem; margin-bottom: .35rem; }
.crumb-line a { color: var(--muted); font-weight: 600; }
.crumb-line a:hover { color: var(--brand); }
.eyebrow { display: block; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 800; color: var(--brand); margin-bottom: .2rem; }

/* ---------- cards / controls ---------- */
.card { border-radius: var(--radius); }
.kpi { border-radius: 18px; }
.btn, button.btn { border-radius: 12px; }
.btn.big { padding: .7rem 1.5rem; font-size: 1rem; border-radius: 14px; }
.btn.icon-only { padding: .35rem .75rem; font-size: 1.1rem; line-height: 1; }
input:not([type]), input[type=text], input[type=password], input[type=email], input[type=tel], input[type=date], input[type=month], input[type=search], input[type=number], select, textarea {
  border-radius: 12px; border-color: var(--field-line, #c9d6dd); background-color: var(--field, #fff);
}
.field label { color: var(--ink-2); }
.chip-check input:checked + span, .lng.on, .lng.on:hover { background: var(--fill); border-color: var(--fill); }
.btn.primary:hover { background: var(--fill); border-color: var(--fill); }
.qno, .ag-date.soon { background: var(--fill); border-color: var(--fill); }

/* hero cards (title card at the top of the self-service pages) */
.hero-card {
  position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: center; gap: 1rem 1.5rem; flex-wrap: wrap;
  padding: 1.7rem 1.9rem; margin-bottom: 1.1rem; border-radius: 26px; border: 1px solid var(--line); box-shadow: var(--shadow);
  background: radial-gradient(520px 200px at 100% 0%, rgba(248, 165, 13, .18), transparent 70%), radial-gradient(520px 260px at 0% 120%, rgba(53, 148, 158, .16), transparent 70%), var(--panel);
}
[dir=rtl] .hero-card { background: radial-gradient(520px 200px at 0% 0%, rgba(248, 165, 13, .18), transparent 70%), radial-gradient(520px 260px at 100% 120%, rgba(53, 148, 158, .16), transparent 70%), var(--panel); }
.hero-card .hero-text { min-width: 0; flex: 1 1 320px; }
.hero-card h2 { font-size: 2.05rem; line-height: 1.2; margin: .15rem 0 .35rem; letter-spacing: -.015em; }
.hero-card p { margin: 0; color: var(--muted); max-width: 62ch; }
.hero-side { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.hero { border-radius: 26px; }

/* pill tabs / steps */
.tabs { gap: .4rem; border-bottom: 0; padding: 0 0 .25rem; margin-bottom: 1rem; }
.tabs a { border: 1px solid var(--line); border-radius: 999px; background: var(--panel); margin-bottom: 0; padding: .42rem 1.05rem; font-size: .88rem; box-shadow: var(--shadow); }
.tabs a:hover { background: var(--brand-soft); color: var(--deep); }
.tabs a.on { background: var(--fill); border-color: var(--fill); color: #fff; }
.tabs .pill-count, .pill-count { display: inline-block; margin-inline-start: .4rem; min-width: 1.3rem; padding: 0 .4rem; border-radius: 999px; background: var(--gold); color: #3b2500; font-size: .7rem; font-weight: 800; text-align: center; }
.pills { display: flex; gap: .5rem; flex-wrap: wrap; margin: 0 0 1rem; }
.pills a {
  display: inline-flex; align-items: center; gap: .5rem; padding: .35rem 1rem .35rem .4rem; border-radius: 999px; border: 1px solid var(--line);
  background: var(--panel); color: var(--muted); font-weight: 700; font-size: .88rem; box-shadow: var(--shadow);
}
[dir=rtl] .pills a { padding: .35rem .4rem .35rem 1rem; }
.pills a b { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-3); color: var(--ink-2); font-size: .8rem; }
.pills a:hover { text-decoration: none; background: var(--brand-soft); color: var(--deep); }
.pills a.done b { background: var(--ok); color: #fff; }
.pills a.on { background: var(--fill); border-color: var(--fill); color: #fff; }
.pills a.on b { background: var(--gold); color: #3b2500; }

/* amber notice banners */
.notice.gold, .notice.warn {
  display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; background: var(--amber-bg); border-color: var(--amber-line); color: var(--amber-ink); border-radius: 16px; padding: .75rem 1.1rem;
}
.notice.gold .ic, .notice.warn .ic { color: var(--gold); flex: none; width: 1.3em; height: 1.3em; }
.notice.gold > span { flex: 1 1 260px; }
.notice { border-radius: 16px; }
.flash { border-radius: 16px; }

/* generic two/three column helpers */
.cols-ms { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 1rem; align-items: start; margin-bottom: 1rem; }
.cols-ms > div > .card:last-child, .cols-ms > div > :last-child { margin-bottom: 0; }
.cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; align-items: start; }
.cols-2 > .card { margin-bottom: 0; }
.cols-2 > * { min-width: 0; }
.col-main, .col-side { min-width: 0; }
.quick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); gap: .65rem; }
.quick-grid a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; padding: 1rem .6rem; text-align: center; min-height: 92px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 18px; color: var(--deep); font-weight: 700; font-size: .88rem; transition: background .15s, border-color .15s, transform .15s;
}
.quick-grid a:hover { background: var(--brand-soft); border-color: var(--brand-2); text-decoration: none; transform: translateY(-2px); }
.quick-grid a .ic { width: 1.7em; height: 1.7em; color: var(--brand); }
.quick-grid a small { display: block; font-weight: 400; color: var(--muted); font-size: .74rem; margin-top: .1rem; }

/* dashboard: main column + chart column */
.dash-cols { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 1rem; align-items: start; }
.dash-main, .dash-side { min-width: 0; }
.dash-side { display: grid; gap: 1rem; }
.dash-side .card { margin-bottom: 0; }
.dash-side .section-title { margin: .6rem 0 -.2rem; }
.dash-main > .card:last-child { margin-bottom: 0; }
.dash-main .grid-2, .dash-main .grid-3 { grid-template-columns: minmax(0, 1fr); }
.dash-side .ch-donut { justify-content: center; }
.dash-side .ch-donut .ch-donut-svg { width: 150px; }

/* ---------- leave ---------- */
.lv-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.lv-card { margin-bottom: 0; }
.lv-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .6rem; color: var(--deep); }
.lv-left { display: flex; align-items: baseline; gap: .45rem; margin-bottom: .5rem; }
.lv-left .num { font-size: 2.3rem; font-weight: 800; line-height: 1; color: var(--deep); }
.lv-left small { color: var(--muted); }
.lv-meta { display: flex; flex-wrap: wrap; gap: .25rem .9rem; margin-top: .55rem; font-size: .78rem; color: var(--muted); }
.lv-meta b { color: var(--ink); }

/* ---------- attendance ---------- */
.att-today {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 1.4rem 1.6rem; border-radius: 24px;
  background: radial-gradient(420px 180px at 100% 0%, rgba(53, 148, 158, .16), transparent 70%), var(--panel);
}
.att-today h3 { font-size: 1.5rem; margin: .1rem 0 .3rem; }
.att-today p { margin: 0; color: var(--muted); }
.att-btns { display: flex; gap: .6rem; flex-wrap: wrap; }
.att-sum { margin-bottom: 1rem; }
.att-table tr.off td { background: var(--bg-2); color: var(--muted); }

/* ---------- payslips ---------- */
.payslip { padding: 1.5rem 1.6rem; }
.ps-head { display: flex; align-items: center; gap: 1rem 1.4rem; flex-wrap: wrap; padding-bottom: 1.1rem; margin-bottom: 1.1rem; border-bottom: 2px solid var(--brand); }
.ps-head > div:not(.logos) { min-width: 0; flex: 1 1 200px; }
.ps-head b { display: block; font-size: 1.12rem; color: var(--deep); }
.ps-head small { color: var(--muted); }
.ps-head .ps-month { text-align: end; flex: 0 0 auto; }
.ps-head .ps-month b { display: inline; font-size: 1.15rem; }
.ps-net { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1rem; padding: 1rem 1.3rem; border-radius: 18px; background: var(--fill); color: #fff; }
.ps-net span { opacity: .85; font-weight: 600; }
.ps-net b { font-size: 1.55rem; font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: plaintext; }

/* ---------- calendar ---------- */
.ev-holiday { --evc: #e0563f; --evc-bg: #fde3e1; --evc-fg: #8c1d18; }
.ev-leave { --evc: #3a9d5d; --evc-bg: #e3f3e5; --evc-fg: #1b5e20; }
.ev-leave_p { --evc: #f0a30a; --evc-bg: #fff1d6; --evc-fg: #7a4a00; }
.ev-travel { --evc: #2f6fd0; --evc-bg: #e0ecfb; --evc-fg: #1a4a8f; }
.ev-team { --evc: #6a3fb5; --evc-bg: #ece6f8; --evc-fg: #4b2f8f; }
.ev-interview { --evc: #c2417c; --evc-bg: #fbe4ef; --evc-fg: #8a1f55; }
.ev-contract { --evc: #6b7f8c; --evc-bg: #e6edf3; --evc-fg: #3b4f61; }
.ev-project { --evc: #2b7f89; --evc-bg: #e0f1f3; --evc-fg: #0f3b43; }
.cal { border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--panel); }
.cal-head, .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-head { background: var(--bg-2); border-bottom: 1px solid var(--line); }
.cal-head span { padding: .55rem .3rem; text-align: center; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cal-day { min-height: 112px; padding: .35rem .35rem .4rem; display: flex; flex-direction: column; gap: 3px; min-width: 0; border-inline-end: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cal-day:nth-child(7n) { border-inline-end: 0; }
.cal-day:nth-last-child(-n+7) { border-bottom: 0; }
.cal-day > b { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; font-size: .8rem; color: var(--ink-2); }
.cal-day.other { background: var(--bg-2); }
.cal-day.other > b { color: var(--muted); opacity: .6; }
.cal-day.wkend { background: var(--bg-3); }
.cal-day.today > b { background: var(--fill); color: #fff; }
.cal-day.today { box-shadow: inset 0 0 0 2px var(--gold); }
.ev {
  display: block; padding: 1px 7px; border-radius: 7px; font-size: .72rem; font-weight: 700; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: var(--evc-bg); color: var(--evc-fg); border-inline-start: 3px solid var(--evc);
}
a.ev:hover { text-decoration: none; filter: brightness(.96); }
.cal-day .more { color: var(--muted); font-size: .72rem; padding-inline-start: 4px; }
.ev-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--evc); flex: none; vertical-align: middle; }
.cal-legend { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin-top: .85rem; font-size: .82rem; color: var(--muted); }
.cal-legend span { display: inline-flex; align-items: center; gap: .4rem; }

/* ---------- signatures ---------- */
img.sig { display: block; max-height: 64px; max-width: 100%; background: #fff; border-radius: 8px; padding: 2px 4px; }
img.sig.big { max-height: 140px; border: 1px solid var(--line); padding: 6px 10px; }
.sig-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px dashed var(--line); }
.sig-row small { display: block; color: var(--muted); margin-bottom: .3rem; }
.sig-pad { border: 2px dashed #b9cbd3; border-radius: 18px; background: #fff; overflow: hidden; margin-bottom: .8rem; }
.sig-pad canvas { display: block; width: 100%; height: auto; aspect-ratio: 600 / 220; touch-action: none; cursor: crosshair; background: #fff; }

/* ---------- onboarding ---------- */
.ob-card { padding: 1.6rem 1.7rem; border-radius: 24px; }
.ob-card h3 { font-size: 1.3rem; }
.ob-card p { max-width: 70ch; }
.ob-nav { display: flex; justify-content: space-between; gap: .6rem; flex-wrap: wrap; margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--line); }
ul.ticks { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .55rem; }
ul.ticks li { display: flex; align-items: center; gap: .6rem; padding: .6rem .85rem; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); }
ul.ticks li .ic { color: var(--brand); }
ul.ticks li.ok { background: #e3f3e5; border-color: #b7dcb9; color: #1b5e20; }
ul.ticks li.ok .ic { color: var(--ok); }
ul.ticks li.todo { color: var(--muted); }
.ob-result { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; padding: .75rem 1rem; border-radius: 14px; background: #e3f3e5; color: #1b5e20; border: 1px solid #b7dcb9; }

/* ---------- search / misc ---------- */
.search-page { display: flex; gap: .6rem; align-items: center; }
.search-page input[type=search] { flex: 1; height: 44px; }
.search-list li a { font-weight: 600; }
.chip { border-radius: 999px; }
table.grid td .badge { vertical-align: middle; }
dl.kv dd .sig { margin-top: .2rem; }

/* ---------- desktop: collapsed sidebar ---------- */
@media (min-width: 901px) {
  body.side-off .side { display: none; }
}

/* ---------- laptops ---------- */
@media (max-width: 1280px) {
  .dash-cols { grid-template-columns: minmax(0, 1fr); }
  .dash-side { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: start; }
  .dash-side .section-title { grid-column: 1 / -1; margin-bottom: 0; }
}
@media (max-width: 1100px) {
  .top-search kbd { display: none; }
  .top-search { flex-basis: 170px; }
}
@media (max-width: 1000px) {
  .cols-ms, .cols-2 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- phones / small tablets ---------- */
@media (max-width: 900px) {
  .shell { padding: 8px; gap: 8px; display: block; }
  .side {
    position: fixed; top: 8px; bottom: 8px; inset-inline-start: 8px; height: auto; width: min(300px, 86vw); flex: none; z-index: 60;
    transform: translateX(-115%); transition: transform .22s ease;
  }
  [dir=rtl] .side { transform: translateX(115%); }
  body.nav-open .side { transform: none; display: flex; }
  body.nav-open .scrim { display: block; position: fixed; inset: 0; background: rgba(8, 24, 28, .55); z-index: 55; }
  .main { gap: 8px; }
  .top { top: 8px; border-radius: 18px; padding: .45rem .55rem; }
  .top::before { top: -8px; height: 8px; }
  .top-title { flex-basis: 100px; }
  .top-title .chips { display: none; }
  .content { padding: .2rem 0 1.5rem; }
  .page-head { margin-inline: .1rem; }
  .page-head h1 { font-size: 1.5rem; }
  .hero-card { padding: 1.25rem 1.2rem; border-radius: 22px; }
  .hero-card h2 { font-size: 1.55rem; }
  .att-today { padding: 1.1rem 1.15rem; }
  .att-btns .btn.big { padding: .6rem 1.2rem; }
  .uname { display: none; }
}
@media (max-width: 700px) {
  .top { position: relative; top: 0; }
  .top::before { display: none; }
  .top-tools { width: 100%; justify-content: flex-start; }
  .top-search { flex: 1 1 100%; order: 20; max-width: none; }
  .sig-row { grid-template-columns: minmax(0, 1fr); }
  .cal-day { min-height: 62px; padding: .25rem; }
  .cal-day > b { width: 22px; height: 22px; font-size: .72rem; }
  .ev { font-size: 0; height: 6px; padding: 0; border-inline-start-width: 0; background: var(--evc); border-radius: 3px; }
  .cal-day .more { font-size: .62rem; }
  .cal-head span { font-size: .62rem; letter-spacing: 0; }
  .ps-head .ps-month { text-align: start; flex-basis: 100%; }
  .pills a { font-size: .8rem; }
  .search-page { flex-wrap: wrap; }
}

/* ---------- print ---------- */
@media print {
  .shell { padding: 0; display: block; }
  .hero-card, .att-today, .ob-card { box-shadow: none; border-color: #ccc; background: #fff; }
  .ps-net { background: #fff; color: #000; border: 1px solid #333; }
  .cal-day { min-height: 80px; }
  .top::before { display: none; }
}

/* =====================================================================
   Dark theme (screen only: printouts stay light; printable documents stay white paper)
   ===================================================================== */
@media screen {
  :root[data-theme=dark] {
    color-scheme: dark;
    --bg: #0a1317; --bg-2: #0f1b21; --bg-3: #15262d;
    --panel: #12212a; --ink: #e3edf1; --ink-2: #c4d3db; --muted: #8ba0ad; --line: #22363f;
    --deep: #e1f0f3; --fill: #1d6670; --brand: #43a7b2; --brand-2: #56b8c3; --brand-soft: #173840; --brand-ink: #ffffff;
    --crimson: #ef7077; --ok: #62c26b; --warn: #e5a443; --err: #f2766e;
    --tr: #f08086; --sy: #4fc1ae; --lb: #e5a443; --ai: #a98be6;
    --field: #0e1b21; --field-line: #2b434e;
    --amber-bg: #3a2c10; --amber-line: #6b5120; --amber-ink: #f3d9a1;
    --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 6px 18px rgba(0, 0, 0, .28); --shadow-lg: 0 12px 34px rgba(0, 0, 0, .55);
  }
  [data-theme=dark] .only-light { display: none; }
  [data-theme=dark] .only-dark { display: inline-flex; }
  [data-theme=dark] .side { background: linear-gradient(185deg, #14323a 0%, #0e262d 50%, #0a1c22 100%); box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
  [data-theme=dark] .logos { background: #fff; }
  [data-theme=dark] .top { background: color-mix(in srgb, var(--panel) 90%, transparent); }
  [data-theme=dark] .lng:hover, [data-theme=dark] .dd-menu a:hover { color: var(--ink); }
  [data-theme=dark] .lng.on { color: #fff; }

  [data-theme=dark] table.grid th, [data-theme=dark] table.grid tr.total td, [data-theme=dark] table.grid tr.sum td, [data-theme=dark] tr.sub-row td, [data-theme=dark] tfoot tr.j-totals th { background: var(--bg-3); color: var(--ink-2); }
  [data-theme=dark] table.grid tbody tr:hover { background: #162830; }
  [data-theme=dark] table.grid td, [data-theme=dark] table.grid th { border-bottom-color: var(--line); }
  [data-theme=dark] table.grid tr.group-row td { background: var(--brand-soft); }
  [data-theme=dark] .desc, [data-theme=dark] .qmine { background: var(--bg-2); }
  [data-theme=dark] .btn, [data-theme=dark] button.btn { background: var(--panel); border-color: var(--field-line); color: var(--ink); }
  [data-theme=dark] .btn:hover { background: var(--brand-soft); border-color: var(--brand-2); }
  [data-theme=dark] .btn.primary { background: var(--fill); border-color: var(--fill); color: #fff; box-shadow: none; }
  [data-theme=dark] .btn.primary:hover { background: #247986; border-color: #247986; }
  [data-theme=dark] .btn.ghost { background: transparent; }
  [data-theme=dark] .btn.danger { background: transparent; border-color: #7a3a3a; color: #f2a09b; }
  [data-theme=dark] .btn.danger:hover { background: #3a1d1f; }
  [data-theme=dark] .btn.ai { background: #6a3fb5; border-color: #6a3fb5; color: #fff; }
  [data-theme=dark] input[readonly] { background: var(--bg-3); }
  [data-theme=dark] input::placeholder, [data-theme=dark] textarea::placeholder { color: #6d8290; }
  [data-theme=dark] .pick, [data-theme=dark] .qcard, [data-theme=dark] .chip-check span, [data-theme=dark] ul.tasks li, [data-theme=dark] button.tick, [data-theme=dark] .logo-prev { background: var(--panel); border-color: var(--line); color: var(--ink); }
  [data-theme=dark] .chip-check input:checked + span { background: var(--fill); border-color: var(--fill); color: #fff; }
  [data-theme=dark] .pick:hover { background: var(--brand-soft); }
  [data-theme=dark] ul.checklist li, [data-theme=dark] ul.plain-list li.muted, [data-theme=dark] ul.agenda li, [data-theme=dark] .cur-box { background: var(--bg-2); }
  [data-theme=dark] ul.agenda li:hover { background: var(--brand-soft); }
  [data-theme=dark] ul.checklist li.ok, [data-theme=dark] ul.tasks li.done button.tick { background: #1b3b22; color: #b7e2ba; }
  [data-theme=dark] .ag-date { background: var(--panel); }
  [data-theme=dark] .quick a { border-color: #35505c; }

  /* messages and status colours */
  [data-theme=dark] .flash.ok, [data-theme=dark] .alert.ok, [data-theme=dark] .notice.ok, [data-theme=dark] ul.ticks li.ok, [data-theme=dark] .ob-result, [data-theme=dark] .stat.rc-ok { background: #15301d; border-color: #2b5a37; color: #b7e2ba; }
  [data-theme=dark] .flash.err, [data-theme=dark] .alert.err, [data-theme=dark] .notice.err { background: #3a1b1c; border-color: #6b3434; color: #f4b3ae; }
  [data-theme=dark] .flash.warn, [data-theme=dark] .alert, [data-theme=dark] .issues, [data-theme=dark] ul.plain-list li { background: #3a2c10; border-color: #6b5120; color: #f3d9a1; }
  [data-theme=dark] .flash.info, [data-theme=dark] .notice { background: #123038; border-color: #25525d; color: #bfe3ea; }
  [data-theme=dark] .notice.gold, [data-theme=dark] .notice.warn { background: var(--amber-bg); border-color: var(--amber-line); color: var(--amber-ink); }
  [data-theme=dark] .badge { background: #1d313a; color: #b9cbd5; }
  [data-theme=dark] .b-active, [data-theme=dark] .b-approved, [data-theme=dark] .b-received, [data-theme=dark] .b-completed, [data-theme=dark] .b-paid, [data-theme=dark] .b-posted, [data-theme=dark] .b-human, [data-theme=dark] .b-full,
  [data-theme=dark] .b-circulated, [data-theme=dark] .b-open, [data-theme=dark] .b-hired, [data-theme=dark] .b-qualified, [data-theme=dark] .b-done, [data-theme=dark] .b-ir-qualified { background: #17361f; color: #a9dcae; }
  [data-theme=dark] .b-submitted, [data-theme=dark] .b-issued, [data-theme=dark] .b-ongoing, [data-theme=dark] .b-po, [data-theme=dark] .b-in_use, [data-theme=dark] .b-partial, [data-theme=dark] .b-stale,
  [data-theme=dark] .b-returned, [data-theme=dark] .b-hold, [data-theme=dark] .b-longlist, [data-theme=dark] .b-no_show, [data-theme=dark] .b-withdrawn, [data-theme=dark] .b-pending { background: #3d2f12; color: #f0d08a; }
  [data-theme=dark] .b-rejected, [data-theme=dark] .b-cancelled, [data-theme=dark] .b-suspended, [data-theme=dark] .b-disposed, [data-theme=dark] .b-ended, [data-theme=dark] .b-not_qualified { background: #3f1d1e; color: #f4aaa5; }
  [data-theme=dark] .b-draft, [data-theme=dark] .b-planning, [data-theme=dark] .b-planned, [data-theme=dark] .b-stored, [data-theme=dark] .b-none, [data-theme=dark] .b-src, [data-theme=dark] .b-closed, [data-theme=dark] .b-new, [data-theme=dark] .b-archived { background: #1d313a; color: #b9cbd5; }
  [data-theme=dark] .b-hr_approved, [data-theme=dark] .b-offer, [data-theme=dark] .b-scheduled, [data-theme=dark] .b-interview { background: #123a4c; color: #a8dcf0; }
  [data-theme=dark] .b-shortlist, [data-theme=dark] .b-ai, [data-theme=dark] .b-ai-note { background: #2b2347; color: #c9b8f2; }
  [data-theme=dark] .b-regno, [data-theme=dark] .regno { background: var(--brand-soft); border-color: #2c5f69; color: #cfeef2; }
  [data-theme=dark] .s-TR { background: #3f1d22; } [data-theme=dark] .s-SY { background: #123831; } [data-theme=dark] .s-LB { background: #3d2f12; }
  [data-theme=dark] .bar, [data-theme=dark] .hbar-row .track, [data-theme=dark] .ch-seg, [data-theme=dark] .ch-r-track { background: #1d313a; }
  [data-theme=dark] .ch-f-bar { background: #172a32; }
  [data-theme=dark] .kpi-ic { background: var(--brand-soft); }
  [data-theme=dark] .tone-gold .kpi-ic { background: #3d2f12; color: #f0c26a; }
  [data-theme=dark] .tone-crimson .kpi-ic { background: #3f1d1e; }
  [data-theme=dark] .tone-green .kpi-ic { background: #17361f; }
  [data-theme=dark] .tone-violet .kpi-ic { background: #2b2347; color: #c9b8f2; }
  [data-theme=dark] .ch-delta.good { background: #17361f; color: #a9dcae; } [data-theme=dark] .ch-delta.bad { background: #3f1d1e; color: #f4aaa5; } [data-theme=dark] .ch-delta.neutral { background: #1d313a; color: var(--ink-2); }
  [data-theme=dark] .ai-box { background: linear-gradient(135deg, #1d1832, #17142a); border-color: #3d3366; }
  [data-theme=dark] .ai-box .help, [data-theme=dark] .ai-box p { color: #b9a9e0; }
  [data-theme=dark] .ai-filled, [data-theme=dark] tr.ai-filled-row input { background: #1d1832; }
  [data-theme=dark] .pw-box { background: #3a2c10; border-color: #a97a10; color: #f3d9a1; }
  [data-theme=dark] ol.flow li { background: var(--bg-2); border-color: var(--line); color: var(--muted); }
  [data-theme=dark] ol.flow li span { background: #26414c; color: #cfe0e7; }
  [data-theme=dark] ol.flow li.done { background: #17361f; border-color: #2b5a37; color: #a9dcae; }
  [data-theme=dark] ol.flow li.cur { background: var(--panel); color: var(--ink); }

  /* charts */
  [data-theme=dark] .ch-track { stroke: #1f343d; }
  [data-theme=dark] .ch-grid { stroke: #22363f; }
  [data-theme=dark] .ch-pt { fill: var(--panel); }
  [data-theme=dark] .ch-empty .e1 { stroke: #35505c; } [data-theme=dark] .ch-empty .e2 { fill: #1d313a; }

  /* v2.4 pages */
  [data-theme=dark] .tabs a { box-shadow: none; }
  [data-theme=dark] .tabs a.on, [data-theme=dark] .pills a.on { color: #fff; }
  [data-theme=dark] .cal-day.wkend { background: #0f1d23; }
  [data-theme=dark] .ev-holiday { --evc-bg: #3f1d1e; --evc-fg: #f4aaa5; }
  [data-theme=dark] .ev-leave { --evc-bg: #17361f; --evc-fg: #a9dcae; }
  [data-theme=dark] .ev-leave_p { --evc-bg: #3d2f12; --evc-fg: #f0d08a; }
  [data-theme=dark] .ev-travel { --evc-bg: #15294a; --evc-fg: #a9c8f5; }
  [data-theme=dark] .ev-team { --evc-bg: #2b2347; --evc-fg: #c9b8f2; }
  [data-theme=dark] .ev-interview { --evc-bg: #46203a; --evc-fg: #f2b0d2; }
  [data-theme=dark] .ev-contract { --evc-bg: #22343e; --evc-fg: #b9cbd5; }
  [data-theme=dark] .ev-project { --evc-bg: #123a40; --evc-fg: #a9dfe6; }
  [data-theme=dark] .hero-card { background: radial-gradient(520px 200px at 100% 0%, rgba(248, 165, 13, .12), transparent 70%), radial-gradient(520px 260px at 0% 120%, rgba(53, 148, 158, .2), transparent 70%), var(--panel); }
  [data-theme=dark][dir=rtl] .hero-card, [dir=rtl] [data-theme=dark] .hero-card { background: radial-gradient(520px 200px at 0% 0%, rgba(248, 165, 13, .12), transparent 70%), radial-gradient(520px 260px at 100% 120%, rgba(53, 148, 158, .2), transparent 70%), var(--panel); }
  [data-theme=dark] .att-today { background: radial-gradient(420px 180px at 100% 0%, rgba(53, 148, 158, .22), transparent 70%), var(--panel); }
  [data-theme=dark] .ps-net { background: #1d6670; }
  [data-theme=dark] img.sig.big, [data-theme=dark] .sig-pad { border-color: #35505c; }

  /* white paper documents keep their light palette */
  [data-theme=dark] .doc {
    --deep: #0f3b43; --brand: #2b7f89; --brand-soft: #e5f2f4; --muted: #667785; --line: #e0e7ec; --ink: #17232b; color: #111;
  }
  [data-theme=dark] .doc a { color: inherit; }
}

/* ===== v2.4.1 — animated brand stage (sidebar + sign-in): logos take turns and cross-fade ===== */
.logo-stage {
  position: relative; display: block; height: 96px; border-radius: 16px; overflow: hidden; isolation: isolate;
  background: linear-gradient(165deg, #fff 0%, #f7fbfb 100%);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 0 0 1px rgba(255, 255, 255, .7);
}
.logo-stage.big { height: 124px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line); margin-bottom: .9rem; }
.ls-glow {
  position: absolute; inset: -40%; z-index: -1; pointer-events: none;
  background: radial-gradient(circle at 22% 30%, rgba(42, 128, 138, .13), transparent 46%), radial-gradient(circle at 80% 78%, rgba(214, 160, 48, .11), transparent 48%);
  animation: ls-drift 11s ease-in-out infinite alternate;
}
.ls-logo {
  position: absolute; inset: 0; margin: auto; width: auto; height: auto; max-height: 50px; max-width: 80%; display: block;
  animation-duration: calc(var(--n) * 4.2s); animation-delay: calc(var(--i) * 4.2s); animation-iteration-count: infinite; animation-fill-mode: both; animation-timing-function: cubic-bezier(.4, 0, .2, 1);
  will-change: opacity, transform, filter;
}
.logo-stage.big .ls-logo { max-height: 68px; max-width: 74%; }
.logo-stage.n2 .ls-logo, .logo-stage.n3 .ls-logo, .logo-stage.n4 .ls-logo { bottom: 14px; }
.logo-stage.n2 .ls-logo { animation-name: ls-2; } .logo-stage.n3 .ls-logo { animation-name: ls-3; } .logo-stage.n4 .ls-logo { animation-name: ls-4; }
.logo-stage.n1 .ls-logo { animation: ls-one 1.1s cubic-bezier(.2, .8, .2, 1) both; }
.ls-dots { position: absolute; left: 0; right: 0; bottom: 7px; display: flex; justify-content: center; gap: 6px; pointer-events: none; }
.ls-dots i { width: 6px; height: 6px; border-radius: 99px; background: rgba(18, 70, 80, .22); animation-duration: calc(var(--n) * 4.2s); animation-delay: calc(var(--i) * 4.2s); animation-iteration-count: infinite; animation-fill-mode: both; animation-timing-function: ease; }
.logo-stage.n2 .ls-dots i { animation-name: ls-dot-2; } .logo-stage.n3 .ls-dots i { animation-name: ls-dot-3; } .logo-stage.n4 .ls-dots i { animation-name: ls-dot-4; }
.logo-stage:hover .ls-logo, .logo-stage:hover .ls-dots i, .logo-stage:hover .ls-glow { animation-play-state: paused; }
@keyframes ls-drift { from { transform: translate3d(-4%, -2%, 0) rotate(0deg) scale(1); } to { transform: translate3d(5%, 3%, 0) rotate(14deg) scale(1.12); } }
@keyframes ls-one { from { opacity: 0; transform: translateY(10px) scale(.94); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes ls-2 {
  0% { opacity: 0; transform: translateY(10px) scale(.94); filter: blur(6px); }
  8%, 44% { opacity: 1; transform: none; filter: blur(0); }
  54%, 100% { opacity: 0; transform: translateY(-10px) scale(1.05); filter: blur(6px); }
}
@keyframes ls-3 {
  0% { opacity: 0; transform: translateY(10px) scale(.94); filter: blur(6px); }
  6%, 30% { opacity: 1; transform: none; filter: blur(0); }
  40%, 100% { opacity: 0; transform: translateY(-10px) scale(1.05); filter: blur(6px); }
}
@keyframes ls-4 {
  0% { opacity: 0; transform: translateY(10px) scale(.94); filter: blur(6px); }
  5%, 22% { opacity: 1; transform: none; filter: blur(0); }
  30%, 100% { opacity: 0; transform: translateY(-10px) scale(1.05); filter: blur(6px); }
}
@keyframes ls-dot-2 { 0% { background: rgba(18, 70, 80, .22); transform: scale(1); } 8%, 44% { background: #2a808a; transform: scale(1.45); } 54%, 100% { background: rgba(18, 70, 80, .22); transform: scale(1); } }
@keyframes ls-dot-3 { 0% { background: rgba(18, 70, 80, .22); transform: scale(1); } 6%, 30% { background: #2a808a; transform: scale(1.45); } 40%, 100% { background: rgba(18, 70, 80, .22); transform: scale(1); } }
@keyframes ls-dot-4 { 0% { background: rgba(18, 70, 80, .22); transform: scale(1); } 5%, 22% { background: #2a808a; transform: scale(1.45); } 30%, 100% { background: rgba(18, 70, 80, .22); transform: scale(1); } }
.side-head .logo-stage { margin: 0; }
.login .logo-stage { animation: rise .7s var(--ease) both; }
@media (prefers-reduced-motion: reduce) {
  /* no motion: every logo stays on show, side by side */
  .logo-stage { height: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .8rem; padding: .7rem .8rem; }
  .ls-logo, .logo-stage.n2 .ls-logo, .logo-stage.n3 .ls-logo, .logo-stage.n4 .ls-logo { position: static; margin: 0; opacity: 1 !important; transform: none !important; filter: none !important; max-height: 42px; max-width: 100%; }
  .logo-stage.big .ls-logo { max-height: 54px; }
  .ls-dots, .ls-glow { display: none; }
}
@media print { .logo-stage { height: auto; display: flex; gap: .6rem; padding: .3rem; box-shadow: none; background: none; } .ls-logo { position: static; opacity: 1 !important; transform: none !important; filter: none !important; max-height: 40px; } .ls-glow, .ls-dots { display: none; } }


/* =====================================================================
   v2.5 — fresh, colourful skin. One theme per organisation, chosen by <html data-org>:
     rouya = the Rouya identity (palette between ROUYA-PALETTE markers); the idil / all blocks are unused leftovers kept for the multi-organisation switch.
   Self-hosted type (Inter + IBM Plex Sans Arabic, SIL OFL). Reduced-motion users get the same layout without animation.
   ===================================================================== */
@font-face { font-family: "Rouya Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/inter-400.woff) format("woff"); unicode-range: U+0000-00FF,U+0100-017F,U+02C6,U+02DA,U+02DC,U+2010-2027,U+2030-203A,U+20A0-20C0,U+2116,U+2122,U+2190-2193,U+2212,U+2713,U+2714,U+25CF; }
@font-face { font-family: "Rouya Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/inter-500.woff) format("woff"); unicode-range: U+0000-00FF,U+0100-017F,U+02C6,U+02DA,U+02DC,U+2010-2027,U+2030-203A,U+20A0-20C0,U+2116,U+2122,U+2190-2193,U+2212,U+2713,U+2714,U+25CF; }
@font-face { font-family: "Rouya Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/inter-600.woff) format("woff"); unicode-range: U+0000-00FF,U+0100-017F,U+02C6,U+02DA,U+02DC,U+2010-2027,U+2030-203A,U+20A0-20C0,U+2116,U+2122,U+2190-2193,U+2212,U+2713,U+2714,U+25CF; }
@font-face { font-family: "Rouya Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/inter-700.woff) format("woff"); unicode-range: U+0000-00FF,U+0100-017F,U+02C6,U+02DA,U+02DC,U+2010-2027,U+2030-203A,U+20A0-20C0,U+2116,U+2122,U+2190-2193,U+2212,U+2713,U+2714,U+25CF; }
@font-face { font-family: "Rouya Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/plexar-400.woff) format("woff"); unicode-range: U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200B-200F,U+202A-202E,U+2066-2069; }
@font-face { font-family: "Rouya Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/plexar-500.woff) format("woff"); unicode-range: U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200B-200F,U+202A-202E,U+2066-2069; }
@font-face { font-family: "Rouya Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/plexar-600.woff) format("woff"); unicode-range: U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200B-200F,U+202A-202E,U+2066-2069; }
@font-face { font-family: "Rouya Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/plexar-700.woff) format("woff"); unicode-range: U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200B-200F,U+202A-202E,U+2066-2069; }

/* ---------- tokens shared by every theme ---------- */
:root {
  --panel: #ffffff; --brand-ink: #ffffff;
  --gold: #e0ac3f; --gold-ink: #3b2a05;
  --crimson: #a3262c; --ok: #2e7d57; --warn: #b07014; --err: #b8392f;
  --tr: #a3262c; --sy: #1d7a6c; --lb: #a86a10; --ai: #6446b0;
  --radius: 16px;
  --amber-bg: #fdf3dc; --amber-line: #efd9a3; --amber-ink: #6b4608;
  --ease: cubic-bezier(.22, .8, .24, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --dir-deg: 115deg;
}
html[dir=rtl] { --dir-deg: 245deg; }

/* ---------- identity colours: used by the page theme AND by the switcher buttons / organisation cards ---------- */
/* ROUYA-PALETTE-START (identity: navy #153453 + steel blue #8d9caa of the Rouya butterfly logo) */
:root, html[data-org=rouya], .org-rouya {
  --brand: #1f4670; --brand-2: #355f8c; --brand-soft: #e3eaf2; --fill: #1f4670; --deep: #153453;
  --g1: #7f9cbd; --g2: #45698f; --g3: #1f4670; --g4: #153453; --rgb: 53, 95, 140;
  --dot: #a9bfd6;
}
html[data-org=idil], .org-idil {
  --brand: #b3202b; --brand-2: #d2404a; --brand-soft: #fbe7e9; --fill: #b3202b; --deep: #4a1519;
  --g1: #ff7a82; --g2: #e04450; --g3: #bd2530; --g4: #94151f; --rgb: 217, 64, 76;
  --dot: #ff7b84;
}
html[data-org=all], .org-all {
  --brand: #4a52b8; --brand-2: #6a73d8; --brand-soft: #e7e9fb; --fill: #4a52b8; --deep: #262a63;
  --g1: #8d95f2; --g2: #6770dc; --g3: #4b53bd; --g4: #363c92; --rgb: 106, 115, 216;
  --dot: #9aa2ff;
}

/* ---------- surfaces and charts per page theme (light) ---------- */
:root, html[data-org=rouya] {
  --bg: #eef2f6; --bg-2: #f6f8fb; --bg-3: #e3e9f0; --ink: #13202e; --ink-2: #2f4256; --muted: #5d6e80; --line: #d8e0e9;
  --c1: #355f8c; --c2: #e0ac3f; --c3: #8d9caa; --c4: #e0663f; --c5: #3f9a6b; --c6: #2f9ba9; --c7: #b24c7e; --c8: #6a4fb0;
  --side-bg: radial-gradient(360px 240px at 0% 0%, rgba(255, 255, 255, .18), transparent 65%), radial-gradient(340px 300px at 100% 100%, rgba(141, 156, 170, .32), transparent 70%), linear-gradient(175deg, #34608e 0%, #24507e 30%, #1b3f66 70%, #153453 100%);
  --login-bg: radial-gradient(900px 600px at 8% 0%, rgba(255, 255, 255, .22), transparent 60%), radial-gradient(800px 600px at 100% 100%, rgba(141, 156, 170, .40), transparent 60%), linear-gradient(135deg, #3f6c9b 0%, #1f4670 50%, #102a44 100%);
  --blob-a: #9fb6cf; --blob-b: #c3ccd6;
}
/* ROUYA-PALETTE-END */
html[data-org=idil] {
  --bg: #fbf2f2; --bg-2: #fdf8f8; --bg-3: #f6e7e8; --ink: #2a1719; --ink-2: #53373a; --muted: #7d5f62; --line: #efdcdd;
  --c1: #d9404c; --c2: #e0ac3f; --c3: #6a4fb0; --c4: #2f9ba9; --c5: #3f9a6b; --c6: #3b72bd; --c7: #b24c7e; --c8: #74828f;
  --side-bg: radial-gradient(360px 240px at 0% 0%, rgba(255, 255, 255, .26), transparent 65%), radial-gradient(340px 300px at 100% 100%, rgba(255, 190, 90, .22), transparent 70%), linear-gradient(175deg, #ea545e 0%, #cd303c 30%, #b3202b 70%, #8f141e 100%);
  --login-bg: radial-gradient(900px 600px at 8% 0%, rgba(255, 255, 255, .26), transparent 60%), radial-gradient(800px 600px at 100% 100%, rgba(255, 190, 90, .30), transparent 60%), linear-gradient(135deg, #f0626b 0%, #c8303b 50%, #8f141e 100%);
  --blob-a: #ff9aa1; --blob-b: #ffd08a;
}
html[data-org=all] {
  --bg: #f0f1fb; --bg-2: #f7f8fd; --bg-3: #e6e8f7; --ink: #181a35; --ink-2: #3a3d66; --muted: #62668f; --line: #dcdff2;
  --c1: #5a63d4; --c2: #e0ac3f; --c3: #2f9ba9; --c4: #d9404c; --c5: #3f9a6b; --c6: #3b72bd; --c7: #b24c7e; --c8: #74828f;
  --side-bg: radial-gradient(360px 240px at 0% 0%, rgba(70, 205, 220, .42), transparent 65%), radial-gradient(360px 320px at 100% 100%, rgba(244, 90, 100, .38), transparent 70%), linear-gradient(175deg, #6c75e2 0%, #4d55bf 30%, #3f46a5 70%, #31378a 100%);
  --login-bg: radial-gradient(900px 600px at 5% 0%, rgba(70, 205, 220, .50), transparent 60%), radial-gradient(800px 600px at 100% 100%, rgba(244, 90, 100, .48), transparent 60%), linear-gradient(135deg, #6f78e6 0%, #4850bd 50%, #30368a 100%);
  --blob-a: #6fe0ee; --blob-b: #ff8f98;
}
:root, html[data-org] { --shadow: 0 1px 2px rgba(var(--rgb), .06), 0 10px 24px -10px rgba(20, 38, 45, .16); --shadow-lg: 0 2px 6px rgba(var(--rgb), .08), 0 22px 44px -16px rgba(20, 38, 45, .28); --ring: 0 0 0 3px rgba(var(--rgb), .26); --field-line: color-mix(in srgb, var(--line) 55%, #aebfc6); }

/* ---------- type and base ---------- */
html { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--brand) 35%, #fff) transparent; }
html[dir=rtl] { font-size: 15.5px; }
body { font-family: "Rouya Sans", "Segoe UI", system-ui, -apple-system, Tahoma, "Noto Sans Arabic", Arial, sans-serif; font-feature-settings: "kern", "calt"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
[dir=rtl] *, [dir=rtl] *::before, [dir=rtl] *::after { letter-spacing: 0 !important; }
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -.012em; }
::selection { background: rgba(var(--rgb), .25); }
input[type=checkbox], input[type=radio] { accent-color: var(--brand); }
a, button, summary, input, select, textarea { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, summary:focus-visible, .btn:focus-visible, .icon-btn:focus-visible { outline: 3px solid rgba(var(--rgb), .45); outline-offset: 2px; border-radius: 10px; }
table.grid td, .num, .kpi-body b, .stat b, .regbig { font-variant-numeric: tabular-nums; }

/* ---------- brand mark: white logos straight on the colour, no plate ---------- */
.logo-stage { background: none; box-shadow: none; overflow: visible; height: 82px; filter: brightness(0) invert(1) drop-shadow(0 2px 10px rgba(0, 0, 0, .20)); }
.logo-stage.big { height: 112px; margin-bottom: .6rem; box-shadow: none; }
.logo-stage .ls-glow { display: none; }
.ls-logo { max-height: 52px; max-width: 78%; }
.logo-stage.big .ls-logo { max-height: 76px; max-width: 70%; }
/* Rouya: the butterfly logo is square, so it gets more height than the wide original marks */
.side-head .logo-stage { height: 104px; } .side-head .ls-logo { max-height: 88px; }
.logo-stage.big { height: 150px; } .logo-stage.big .ls-logo { max-height: 132px; }
.logo-stage.n2 .ls-logo, .logo-stage.n3 .ls-logo, .logo-stage.n4 .ls-logo { bottom: 12px; }
.logo-stage.plate { background: #fff; filter: none; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); border-radius: 16px; overflow: hidden; }
.logo-stage.mini { height: 46px; }
.logo-stage.mini .ls-logo { max-height: 32px; max-width: 100%; inset: 0 auto 0 0; margin-block: auto; }
[dir=rtl] .logo-stage.mini .ls-logo { inset: 0 0 0 auto; }
.logo-stage.mini .ls-dots { display: none; }
.side-head .brandcard { margin-bottom: .1rem; }

/* ---------- organisation switch (sidebar) and chips (sign-in) ---------- */
.org-switch { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; margin: .35rem 0 .7rem; padding: 3px; border-radius: 15px; background: rgba(255, 255, 255, .18); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.org-switch button { display: flex; align-items: center; justify-content: center; gap: .38rem; min-width: 0; padding: .46rem .25rem; border: 0; border-radius: 12px; background: transparent; color: #fff; font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer; transition: background .2s, color .2s, transform .2s var(--spring), box-shadow .2s; }
.org-switch button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.org-switch button i, .org-chips a i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--dot); box-shadow: 0 0 0 2px rgba(255, 255, 255, .55); }
.org-switch button.org-all i, .org-chips a.org-all i { background: conic-gradient(#4fd0de, #8d95f2, #ff7b84, #4fd0de); }
.org-switch button:hover { background: rgba(255, 255, 255, .16); transform: translateY(-1px); }
.org-switch button.on { background: #fff; color: var(--brand); box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .45); }
.org-switch button.on i { box-shadow: none; }
.org-switch button:active { transform: scale(.97); }
.org-chips { display: flex; justify-content: center; flex-wrap: wrap; gap: .45rem; margin-bottom: 1rem; }
.org-chips a { display: inline-flex; align-items: center; gap: .45rem; padding: .38rem .95rem; border-radius: 999px; color: #fff; font-weight: 700; font-size: .84rem; background: rgba(255, 255, 255, .18); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); transition: background .2s, transform .2s var(--spring), color .2s; }
.org-chips a:hover { background: rgba(255, 255, 255, .3); text-decoration: none; transform: translateY(-2px); }
.org-chips a.on { background: #fff; color: var(--brand); box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .5); }
.org-chips a.on i { box-shadow: none; }

/* ---------- sidebar ---------- */
.side { background: var(--side-bg); box-shadow: 0 22px 44px -18px rgba(var(--rgb), .7); }
.side nav a { transition: background .18s, color .18s; color: rgba(255, 255, 255, .92); }
.side nav a .ic { transition: transform .25s var(--spring), color .18s, opacity .18s; opacity: .9; }
.side nav a:hover { background: rgba(255, 255, 255, .14); }
.side nav a:hover .ic { transform: scale(1.14) rotate(-4deg); opacity: 1; }
.side nav a.on, [dir=rtl] .side nav a.on { background: linear-gradient(90deg, rgba(255, 255, 255, .30), rgba(255, 255, 255, .12)); }
[dir=rtl] .side nav a.on { background: linear-gradient(270deg, rgba(255, 255, 255, .30), rgba(255, 255, 255, .12)); }
.side nav a.on::before { content: ""; position: absolute; inset-inline-start: -.65rem; top: 20%; bottom: 20%; width: 4px; border-radius: 0 4px 4px 0; background: var(--gold); animation: bar-in .45s var(--spring) backwards; }
[dir=rtl] .side nav a.on::before { border-radius: 4px 0 0 4px; }
.side nav a.on::after { box-shadow: 0 0 0 4px rgba(224, 172, 63, .28); }
.side .nav-group, .side-label { color: rgba(255, 255, 255, .72); }
.side-head .appname { border-bottom-color: rgba(255, 255, 255, .22); }
.side-head .appname small { color: rgba(255, 255, 255, .78); }
.nav-badge { background: linear-gradient(135deg, #f3c96b, #e0ac3f); color: var(--gold-ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.avatar { background: linear-gradient(135deg, var(--g2), var(--g3)); color: #fff; }
.side-user .avatar { background: linear-gradient(135deg, #f3c96b, #d9a23a); color: var(--gold-ink); }
.side-user { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .22); backdrop-filter: blur(6px); }
.side-user .u small { color: rgba(255, 255, 255, .8); }

/* ---------- top bar, page head ---------- */
.top { border-radius: 20px; background: color-mix(in srgb, var(--panel) 88%, transparent); backdrop-filter: saturate(1.5) blur(12px); -webkit-backdrop-filter: saturate(1.5) blur(12px); }
.icon-btn { transition: background .15s, border-color .15s, transform .18s var(--spring), box-shadow .15s; }
.icon-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 12px -6px rgba(var(--rgb), .5); }
.icon-btn:active { transform: translateY(0) scale(.96); }
.icon-btn.with-badge .nav-badge { animation: badge-pop .55s var(--spring) .5s backwards; }
.icon-btn.with-badge:has(.nav-badge) svg { transform-origin: 50% 12%; animation: bell 1.1s ease 1s 1; }
.page-head h1 { font-size: 1.8rem; font-weight: 750; }
.eyebrow { color: var(--brand); display: inline-flex; align-items: center; gap: .55rem; }
.eyebrow::before { content: ""; width: 22px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--gold), transparent); }
[dir=rtl] .eyebrow::before { background: linear-gradient(270deg, var(--gold), transparent); }

/* ---------- cards, tables ---------- */
.card { border-color: var(--line); box-shadow: var(--shadow); }
a.card, .card.lift { transition: box-shadow .25s var(--ease), transform .25s var(--ease), border-color .2s; }
a.card:hover, .card.lift:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--brand-2) 55%, var(--line)); text-decoration: none; }
table.grid th { background: var(--bg-2); color: var(--muted); font-size: .7rem; letter-spacing: .07em; font-weight: 700; padding: .65rem .65rem; border-bottom: 1px solid var(--line); }
table.grid { font-size: .93rem; }
table.grid td { padding: .62rem .65rem; border-bottom: 1px solid var(--line); }
table.grid tbody tr:last-child td { border-bottom: 0; }
table.grid tbody tr { transition: background .15s; }
table.grid tbody tr:hover { background: color-mix(in srgb, var(--brand) 6%, var(--panel)); }
table.grid tbody tr:hover > td:first-child { box-shadow: inset 3px 0 0 var(--brand-2); }
[dir=rtl] table.grid tbody tr:hover > td:first-child { box-shadow: inset -3px 0 0 var(--brand-2); }
table.grid tr.total td, table.grid tr.sum td, tr.sub-row td { background: var(--bg-2); }
span.nw, table.grid td.nw, table.grid th.nw, table.grid td:has(> .regno), table.grid td:has(> .badge:only-child) { white-space: nowrap; }
.table-wrap { scrollbar-width: thin; }
.desc { border-inline-start-color: var(--brand-2); background: var(--bg-2); }
.chip { background: var(--brand-soft); color: var(--deep); }

/* ---------- buttons and fields ---------- */
.btn, button.btn { border-color: var(--field-line); border-radius: 11px; box-shadow: 0 1px 1px rgba(20, 38, 45, .05); transition: background .15s, border-color .15s, box-shadow .2s, transform .18s var(--ease); }
.btn:hover { background: var(--brand-soft); border-color: var(--brand-2); transform: translateY(-1px); box-shadow: 0 8px 14px -8px rgba(var(--rgb), .55); }
.btn:active { transform: translateY(0) scale(.985); box-shadow: none; }
.btn.primary { background: linear-gradient(180deg, color-mix(in srgb, var(--g2) 45%, var(--g3)), var(--g3)); border-color: var(--g3); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), 0 8px 16px -8px rgba(var(--rgb), .8); }
.btn.primary:hover { background: linear-gradient(180deg, var(--g3), var(--g4)); border-color: var(--g4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 12px 20px -10px rgba(var(--rgb), .9); }
.btn.danger:hover { background: #fdecea; border-color: #d8928c; }
.btn:disabled, .btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
input:not([type]), input[type=text], input[type=password], input[type=email], input[type=tel], input[type=date], input[type=month], input[type=search], input[type=number], select, textarea {
  border-color: var(--field-line); box-shadow: inset 0 1px 1px rgba(20, 38, 45, .03); transition: border-color .15s, box-shadow .15s, background-color .15s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand-2); box-shadow: var(--ring); }
select:not([multiple]) {
  appearance: none; -webkit-appearance: none; padding-inline-end: 2rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2362758a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: 1em; background-position: right .7rem center;
}
[dir=rtl] select:not([multiple]) { background-position: left .7rem center; }
.field label { font-weight: 600; }
.chip-check span { transition: background .15s, color .15s, border-color .15s, transform .15s var(--spring); }
.chip-check:active span { transform: scale(.96); }
.chip-check input:checked + span, .lng.on, .lng.on:hover { background: var(--fill); border-color: var(--fill); }

/* ---------- badges ---------- */
.badge { background: var(--bd-bg, #e8edf2); color: var(--bd-fg, #3f5367); padding: .12rem .65rem; font-size: .72rem; }
.badge[class*=" b-"]:not(.b-regno):not(.b-ai-note)::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-inline-end: .4rem; border-radius: 50%; background: currentColor; vertical-align: .08em; opacity: .85; }
.b-active, .b-approved, .b-received, .b-completed, .b-paid, .b-posted, .b-human, .b-full, .b-circulated, .b-open, .b-hired, .b-qualified, .b-done, .b-ir-qualified { --bd-bg: #e1f4ea; --bd-fg: #1b6a43; }
.b-submitted, .b-issued, .b-ongoing, .b-po, .b-in_use, .b-partial, .b-stale, .b-returned, .b-hold, .b-longlist, .b-no_show, .b-withdrawn, .b-pending { --bd-bg: #fdf0d3; --bd-fg: #7a4f0a; }
.b-hr_approved, .b-offer, .b-scheduled, .b-interview { --bd-bg: #e0eef9; --bd-fg: #0e4a70; }
.b-shortlist, .b-ai, .b-ai-note { --bd-bg: #ece7f8; --bd-fg: #54379b; }
.b-rejected, .b-cancelled, .b-suspended, .b-disposed, .b-ended, .b-not_qualified { --bd-bg: #fbe3e0; --bd-fg: #9a2a22; }
.b-draft, .b-planning, .b-planned, .b-stored, .b-none, .b-src, .b-closed, .b-new, .b-archived { --bd-bg: #e8edf2; --bd-fg: #3f5367; }
.b-submitted::before, .b-pending::before, .b-issued::before, .b-ongoing::before { animation: dot-pulse 2s ease-out infinite; }
.s-TR { --bd-bg: #f9e2e3; --bd-fg: var(--tr); } .s-SY { --bd-bg: #dcf1ec; --bd-fg: var(--sy); } .s-LB { --bd-bg: #fbeed4; --bd-fg: var(--lb); }
.s-TR, .s-SY, .s-LB { background: var(--bd-bg); color: var(--bd-fg); }
.b-regno { --bd-bg: var(--brand-soft); --bd-fg: var(--deep); }

/* ---------- messages ---------- */
.flash { display: flex; align-items: center; gap: .6rem; position: relative; overflow: hidden; box-shadow: var(--shadow); transition: opacity .4s var(--ease), transform .4s var(--ease), max-height .4s var(--ease), margin .4s var(--ease), padding .4s var(--ease), border-width .4s; }
.flash.ok { background: #e4f4eb; border-color: #b4dcc4; color: #17603d; }
.flash.err { background: #fce8e5; border-color: #f0b9b3; color: #8f2820; }
.flash.warn { background: #fdf1d8; border-color: #efd7a0; color: #7a4f0a; }
.flash.info, .notice { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand-2) 35%, #fff); color: var(--deep); }
.flash.out { opacity: 0; transform: translateY(-10px) scale(.98); max-height: 0 !important; margin-block: 0; padding-block: 0; border-width: 0; }
html.js .flash.ok::after, html.js .flash.info::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 3px; background: currentColor; opacity: .3; transform-origin: 0 50%; animation: flash-timer var(--fl, 7s) linear forwards; }
html[dir=rtl] .flash.ok::after, html[dir=rtl] .flash.info::after { transform-origin: 100% 50%; }
.alert { border-radius: 12px; }

/* ---------- KPI tiles ---------- */
.kpi { --ac: var(--g2); border-radius: 18px; padding: 1.05rem 1.15rem; background: linear-gradient(180deg, var(--panel) 0%, color-mix(in srgb, var(--panel) 93%, var(--brand-soft)) 100%); }
.kpi::before { inset: 0 0 auto 0; width: auto; height: 3px; background: linear-gradient(90deg, var(--ac), transparent 80%); }
[dir=rtl] .kpi::before { background: linear-gradient(270deg, var(--ac), transparent 80%); }
.kpi.tone-gold { --ac: #e0ac3f; } .kpi.tone-crimson { --ac: var(--crimson); } .kpi.tone-green { --ac: #3f9a6b; } .kpi.tone-violet { --ac: #6a4fb0; }
.kpi.tone-gold::before, .kpi.tone-crimson::before, .kpi.tone-green::before, .kpi.tone-violet::before { background: linear-gradient(90deg, var(--ac), transparent 80%); }
[dir=rtl] .kpi.tone-gold::before, [dir=rtl] .kpi.tone-crimson::before, [dir=rtl] .kpi.tone-green::before, [dir=rtl] .kpi.tone-violet::before { background: linear-gradient(270deg, var(--ac), transparent 80%); }
.kpi-ic { width: 46px; height: 46px; border-radius: 14px; background: linear-gradient(135deg, var(--brand-soft), color-mix(in srgb, var(--brand-soft) 40%, #fff)); color: var(--brand); box-shadow: inset 0 0 0 1px rgba(var(--rgb), .16); transition: transform .35s var(--spring); }
a.kpi:hover .kpi-ic, .admin-tile:hover .kpi-ic { transform: scale(1.1) rotate(-6deg); }
.tone-gold .kpi-ic { background: linear-gradient(135deg, #fbefd2, #fdf7e6); color: #a26a0c; box-shadow: inset 0 0 0 1px rgba(224, 172, 63, .28); }
.tone-crimson .kpi-ic { background: linear-gradient(135deg, #f8dfe0, #fcefef); color: var(--crimson); box-shadow: inset 0 0 0 1px rgba(163, 38, 44, .15); }
.tone-green .kpi-ic { background: linear-gradient(135deg, #dff2e7, #eef9f2); color: var(--ok); box-shadow: inset 0 0 0 1px rgba(46, 125, 87, .15); }
.tone-violet .kpi-ic { background: linear-gradient(135deg, #e9e3f7, #f4f0fb); color: var(--ai); box-shadow: inset 0 0 0 1px rgba(100, 70, 176, .15); }
a.kpi, .stat, .admin-tile, .lv-card { transition: box-shadow .25s var(--ease), border-color .2s, transform .25s var(--ease); }
a.kpi:hover, a.stat:hover, .admin-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.kpi-body b { font-weight: 750; }

/* ---------- hero blocks ---------- */
.hero { background: radial-gradient(700px 260px at 100% -30%, rgba(255, 255, 255, .34), transparent 60%), radial-gradient(520px 260px at 0% 130%, rgba(224, 172, 63, .35), transparent 62%), linear-gradient(var(--dir-deg), var(--g3) 0%, var(--g2) 62%, var(--g1) 120%); box-shadow: 0 24px 40px -20px rgba(var(--rgb), .75); }
[dir=rtl] .hero { background: radial-gradient(700px 260px at 0% -30%, rgba(255, 255, 255, .34), transparent 60%), radial-gradient(520px 260px at 100% 130%, rgba(224, 172, 63, .35), transparent 62%), linear-gradient(var(--dir-deg), var(--g3) 0%, var(--g2) 62%, var(--g1) 120%); }
.hero::before { content: ""; position: absolute; width: 360px; height: 360px; border-radius: 50%; top: -150px; inset-inline-end: 6%; background: radial-gradient(circle, rgba(255, 255, 255, .24), transparent 65%); animation: float-a 16s ease-in-out infinite; pointer-events: none; }
.hero-actions a { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .34); backdrop-filter: blur(4px); }
.hero-actions a:hover { background: rgba(255, 255, 255, .34); }
.hero-wait b { background: linear-gradient(135deg, #f3c96b, #e0ac3f); color: var(--gold-ink); }
.hero-card { border-radius: 26px; background: radial-gradient(520px 200px at 100% 0%, rgba(224, 172, 63, .18), transparent 70%), radial-gradient(520px 260px at 0% 120%, rgba(var(--rgb), .20), transparent 70%), var(--panel); }
[dir=rtl] .hero-card { background: radial-gradient(520px 200px at 0% 0%, rgba(224, 172, 63, .18), transparent 70%), radial-gradient(520px 260px at 100% 120%, rgba(var(--rgb), .20), transparent 70%), var(--panel); }
.hero-card > * { position: relative; z-index: 1; }
.hero-card::after { content: ""; position: absolute; inset-inline-end: -70px; top: -70px; width: 230px; height: 230px; border-radius: 50%; border: 1px solid rgba(var(--rgb), .22); box-shadow: 0 0 0 30px rgba(var(--rgb), .06), 0 0 0 62px rgba(var(--rgb), .035); animation: breathe 9s ease-in-out infinite; pointer-events: none; }

/* ---------- organisation cards on the combined dashboard ---------- */
.orgs { margin-bottom: 1.1rem; }
.orgs .section-title { margin-top: .2rem; }
.org-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; }
.org-card { position: relative; overflow: hidden; display: grid; gap: .9rem; padding: 0 0 1rem; border-radius: 22px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.org-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.oc-head { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; color: #fff; background: radial-gradient(260px 140px at 100% 0%, rgba(255, 255, 255, .30), transparent 70%), linear-gradient(var(--dir-deg), var(--g3), var(--g2) 70%, var(--g1) 130%); }
.oc-logo { flex: 0 0 120px; display: block; }
.oc-name { min-width: 0; line-height: 1.3; }
.oc-name b { display: block; font-size: 1.15rem; }
.oc-name small { color: rgba(255, 255, 255, .88); }
.oc-stats { display: flex; gap: 1.6rem; flex-wrap: wrap; margin: 0; padding: 0 1.25rem; }
.oc-stats > div { display: flex; flex-direction: column-reverse; line-height: 1.2; }
.oc-stats dd { margin: 0; font-size: 1.7rem; font-weight: 750; color: var(--deep); font-variant-numeric: tabular-nums; }
.oc-stats dt { font-size: .78rem; color: var(--muted); }
.oc-open { margin-inline: 1.25rem; justify-self: start; }

/* ---------- tabs, pills, notices ---------- */
.tabs a { transition: background .18s, color .18s, transform .18s var(--spring), border-color .18s; }
.tabs a:hover { transform: translateY(-1px); }
.tabs a.on, .pills a.on { background: linear-gradient(180deg, color-mix(in srgb, var(--fill) 86%, #fff), var(--fill)); border-color: var(--fill); box-shadow: 0 8px 16px -10px rgba(var(--rgb), .9); }
.pills a { transition: background .18s, color .18s, transform .18s var(--spring); }
.pills a:hover { transform: translateY(-1px); }
.tabs .pill-count, .pill-count { background: linear-gradient(135deg, #f3c96b, #e0ac3f); color: var(--gold-ink); }
.quick-grid a, .quick a { transition: background .18s, border-color .18s, transform .25s var(--spring), box-shadow .25s; }
.quick-grid a:hover { box-shadow: 0 14px 22px -14px rgba(var(--rgb), .6); }
.quick-grid a .ic { transition: transform .3s var(--spring); }
.quick-grid a:hover .ic { transform: scale(1.18) translateY(-2px); }
.notice.gold, .notice.warn { border-radius: 16px; }

/* ---------- progress bars (grow in) ---------- */
.bar { background: var(--bg-3); height: 9px; }
.bar span { background: linear-gradient(90deg, var(--g1), var(--g3)); border-radius: 99px; transform-origin: 0 50%; animation: ch-grow-x .95s var(--ease) .1s backwards; }
.bar.warn span { background: linear-gradient(90deg, #f0c460, #e0ac3f); }
.bar.over span { background: linear-gradient(90deg, #e2776d, var(--err)); }
[dir=rtl] .bar span, [dir=rtl] .hbar-row .track span { transform-origin: 100% 50%; }
.hbar-row .track span { transform-origin: 0 50%; animation: ch-grow-x .95s var(--ease) .1s backwards; }

/* ---------- empty chart cards: quieter ---------- */
.ch-empty { padding: .5rem .5rem .7rem; }
.ch-empty svg { width: 92px; height: 48px; opacity: .9; }
.ch-empty p { margin: .2rem 0 .5rem; font-size: .84rem; }
.dash-side .card:has(.ch-empty) { padding-block: .85rem; }

/* ---------- sign-in ---------- */
body.auth { background: var(--login-bg); background-attachment: fixed; }
body.auth::before { background: var(--blob-a); opacity: .45; }
body.auth::after { background: var(--blob-b); opacity: .32; }
body.auth .bare-tools .lng { color: rgba(255, 255, 255, .88); }
body.auth .bare-tools .lng.on { background: #fff; color: var(--brand); }
.login-brand { position: relative; z-index: 1; text-align: center; animation: rise2 .7s var(--ease) backwards; }
.login { border-radius: 24px; padding: 1.9rem 1.7rem 1.6rem; box-shadow: 0 40px 80px -28px rgba(0, 0, 0, .55); position: relative; overflow: hidden; }
.login::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--g1), var(--g3), var(--gold)); }
.login h1 { color: var(--deep); }
.login .field input { height: 44px; }
.login .btn { height: 46px; font-size: 1rem; }
ul.agenda li { transition: background .15s, transform .2s var(--ease); }
ul.agenda li:hover { transform: translateX(3px); }
[dir=rtl] ul.agenda li:hover { transform: translateX(-3px); }

/* ---------- motion ---------- */
@keyframes rise2 { from { opacity: 0; transform: translateY(14px); } }
@keyframes pop-in { from { opacity: 0; transform: translateY(10px) scale(.97); } }
@keyframes row-in { from { opacity: 0; } }
@keyframes flash-in { from { opacity: 0; transform: translateY(-14px) scale(.97); } }
@keyframes flash-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes dot-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 45%, transparent); } 70%, 100% { box-shadow: 0 0 0 6px transparent; } }
@keyframes breathe { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.08); opacity: .7; } }
@keyframes bar-in { from { transform: scaleY(0); } }
@keyframes badge-pop { from { transform: scale(0); } }
@keyframes bell { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(14deg); } 30% { transform: rotate(-12deg); } 45% { transform: rotate(8deg); } 60% { transform: rotate(-5deg); } 75% { transform: rotate(2deg); } }
.rise { animation: rise2 .6s var(--ease) backwards; }
.content > * { animation: rise2 .5s var(--ease) backwards; }
.content > .flash { animation: flash-in .5s var(--spring) backwards; }
.content > *:nth-child(2) { animation-delay: 0.04s; }
.content > *:nth-child(3) { animation-delay: 0.09s; }
.content > *:nth-child(4) { animation-delay: 0.14s; }
.content > *:nth-child(5) { animation-delay: 0.18s; }
.content > *:nth-child(6) { animation-delay: 0.22s; }
.content > *:nth-child(7) { animation-delay: 0.27s; }
.content > *:nth-child(8) { animation-delay: 0.32s; }
.content > *:nth-child(9) { animation-delay: 0.36s; }
.kpis > *, .admin-grid > *, .lv-cards > *, .cards > *, .quick-grid > *, .pick-grid > *, .org-cards > * { animation: pop-in .55s var(--ease) backwards; }
.kpis > *:nth-child(2), .admin-grid > *:nth-child(2), .lv-cards > *:nth-child(2), .cards > *:nth-child(2), .quick-grid > *:nth-child(2), .pick-grid > *:nth-child(2), .org-cards > *:nth-child(2) { animation-delay: 0.10s; }
.kpis > *:nth-child(3), .admin-grid > *:nth-child(3), .lv-cards > *:nth-child(3), .cards > *:nth-child(3), .quick-grid > *:nth-child(3), .pick-grid > *:nth-child(3), .org-cards > *:nth-child(3) { animation-delay: 0.15s; }
.kpis > *:nth-child(4), .admin-grid > *:nth-child(4), .lv-cards > *:nth-child(4), .cards > *:nth-child(4), .quick-grid > *:nth-child(4), .pick-grid > *:nth-child(4), .org-cards > *:nth-child(4) { animation-delay: 0.20s; }
.kpis > *:nth-child(5), .admin-grid > *:nth-child(5), .lv-cards > *:nth-child(5), .cards > *:nth-child(5), .quick-grid > *:nth-child(5), .pick-grid > *:nth-child(5), .org-cards > *:nth-child(5) { animation-delay: 0.25s; }
.kpis > *:nth-child(6), .admin-grid > *:nth-child(6), .lv-cards > *:nth-child(6), .cards > *:nth-child(6), .quick-grid > *:nth-child(6), .pick-grid > *:nth-child(6), .org-cards > *:nth-child(6) { animation-delay: 0.30s; }
.kpis > *:nth-child(7), .admin-grid > *:nth-child(7), .lv-cards > *:nth-child(7), .cards > *:nth-child(7), .quick-grid > *:nth-child(7), .pick-grid > *:nth-child(7), .org-cards > *:nth-child(7) { animation-delay: 0.35s; }
.kpis > *:nth-child(8), .admin-grid > *:nth-child(8), .lv-cards > *:nth-child(8), .cards > *:nth-child(8), .quick-grid > *:nth-child(8), .pick-grid > *:nth-child(8), .org-cards > *:nth-child(8) { animation-delay: 0.40s; }
.kpis > *:nth-child(9), .admin-grid > *:nth-child(9), .lv-cards > *:nth-child(9), .cards > *:nth-child(9), .quick-grid > *:nth-child(9), .pick-grid > *:nth-child(9), .org-cards > *:nth-child(9) { animation-delay: 0.45s; }
.kpis > *:nth-child(10), .admin-grid > *:nth-child(10), .lv-cards > *:nth-child(10), .cards > *:nth-child(10), .quick-grid > *:nth-child(10), .pick-grid > *:nth-child(10), .org-cards > *:nth-child(10) { animation-delay: 0.50s; }
.kpis > *:nth-child(11), .admin-grid > *:nth-child(11), .lv-cards > *:nth-child(11), .cards > *:nth-child(11), .quick-grid > *:nth-child(11), .pick-grid > *:nth-child(11), .org-cards > *:nth-child(11) { animation-delay: 0.55s; }
.kpis > *:nth-child(12), .admin-grid > *:nth-child(12), .lv-cards > *:nth-child(12), .cards > *:nth-child(12), .quick-grid > *:nth-child(12), .pick-grid > *:nth-child(12), .org-cards > *:nth-child(12) { animation-delay: 0.60s; }
table.grid tbody tr { animation: row-in .5s ease backwards; }
table.grid tbody tr:nth-child(2) { animation-delay: 0.11s; }
table.grid tbody tr:nth-child(3) { animation-delay: 0.14s; }
table.grid tbody tr:nth-child(4) { animation-delay: 0.17s; }
table.grid tbody tr:nth-child(5) { animation-delay: 0.20s; }
table.grid tbody tr:nth-child(6) { animation-delay: 0.23s; }
table.grid tbody tr:nth-child(7) { animation-delay: 0.26s; }
table.grid tbody tr:nth-child(8) { animation-delay: 0.29s; }
table.grid tbody tr:nth-child(9) { animation-delay: 0.32s; }
table.grid tbody tr:nth-child(10) { animation-delay: 0.35s; }
table.grid tbody tr:nth-child(11) { animation-delay: 0.38s; }
table.grid tbody tr:nth-child(12) { animation-delay: 0.41s; }
table.grid tbody tr:nth-child(13) { animation-delay: 0.44s; }
table.grid tbody tr:nth-child(14) { animation-delay: 0.47s; }

/* scroll reveal: app.js marks only blocks that start below the fold, so nothing flashes and no-JS shows everything */
html.js .rv { opacity: 0; transform: translateY(18px); }
html.js .rv.rv-in { opacity: 1; transform: none; transition: opacity .65s var(--ease), transform .65s var(--ease); transition-delay: var(--rv-d, 0s); }
@media (prefers-reduced-motion: reduce) { html.js .rv { opacity: 1 !important; transform: none !important; } }
@media print { html.js .rv { opacity: 1 !important; transform: none !important; } .logo-stage { filter: none; } }

/* =====================================================================
   v2.5 dark theme (screen only): same three organisation themes, deeper surfaces
   ===================================================================== */
@media screen {
  html[data-theme=dark][data-org=rouya], html[data-theme=dark]:not([data-org]) {
    --bg: #0a111a; --bg-2: #0f1824; --bg-3: #152131; --panel: #121c29; --ink: #e8eef5; --ink-2: #c5d1de; --muted: #90a0b2; --line: #223244; --deep: #e3eaf2;
    --brand: #9fbbdc; --brand-2: #b9cee6; --brand-soft: #1a2d44; --fill: #2b5582; --field: #0d1621; --field-line: #2d4056;
    --g1: #5a82ad; --g2: #3a6390; --g3: #2b5582; --g4: #1f4670;
    --side-bg: radial-gradient(360px 240px at 0% 0%, rgba(141, 156, 170, .22), transparent 65%), radial-gradient(340px 300px at 100% 100%, rgba(255, 255, 255, .06), transparent 70%), linear-gradient(175deg, #23476f 0%, #1a3a5c 40%, #122b45 100%);
    --c1: #7f9cbd;
  }
  html[data-theme=dark][data-org=idil] {
    --bg: #170b0e; --bg-2: #1e1013; --bg-3: #2a171b; --panel: #231318; --ink: #f6eaeb; --ink-2: #dcc3c6; --muted: #b79ba0; --line: #3a2227; --deep: #ffe6e8;
    --brand: #ff7f88; --brand-2: #ff9fa6; --brand-soft: #44191f; --fill: #b3202b; --field: #1b0f12; --field-line: #4a2e34;
    --g1: #ea555f; --g2: #c52c38; --g3: #a21f2a; --g4: #7f1520;
    --side-bg: radial-gradient(360px 240px at 0% 0%, rgba(255, 140, 150, .22), transparent 65%), radial-gradient(340px 300px at 100% 100%, rgba(255, 190, 90, .10), transparent 70%), linear-gradient(175deg, #a8232f 0%, #8c1a25 45%, #6e131c 100%);
    --c1: #f06770;
  }
  html[data-theme=dark][data-org=all] {
    --bg: #0c0e20; --bg-2: #121530; --bg-3: #1a1d3f; --panel: #161a38; --ink: #eaebfd; --ink-2: #c8cbee; --muted: #9ca1cc; --line: #292d57; --deep: #e6e8ff;
    --brand: #939cff; --brand-2: #adb4ff; --brand-soft: #232757; --fill: #4b53bd; --field: #10132a; --field-line: #343862;
    --g1: #7c85ef; --g2: #5560d2; --g3: #424aae; --g4: #313788;
    --side-bg: radial-gradient(360px 240px at 0% 0%, rgba(70, 205, 220, .28), transparent 65%), radial-gradient(360px 320px at 100% 100%, rgba(244, 90, 100, .26), transparent 70%), linear-gradient(175deg, #4a52c4 0%, #3a41a4 45%, #2b3085 100%);
    --c1: #7d87f0;
  }
  html[data-theme=dark] { --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 10px 26px -10px rgba(0, 0, 0, .6); --shadow-lg: 0 2px 6px rgba(0, 0, 0, .4), 0 22px 44px -14px rgba(0, 0, 0, .75); --ring: 0 0 0 3px rgba(var(--rgb), .38); scrollbar-color: #35505a transparent; }
  [data-theme=dark] .login { background: var(--panel); }
  [data-theme=dark] .side { background: var(--side-bg); box-shadow: 0 22px 44px -18px rgba(0, 0, 0, .7); }
  [data-theme=dark] .org-card .btn:hover { background: var(--bg-3); border-color: var(--field-line); }
  [data-theme=dark] .btn.primary { background: linear-gradient(180deg, color-mix(in srgb, var(--g3) 88%, #fff), var(--g3)); border-color: var(--g3); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 8px 16px -8px rgba(0, 0, 0, .7); }
  [data-theme=dark] .btn.primary:hover { background: linear-gradient(180deg, var(--g3), var(--g4)); border-color: var(--g4); }
  [data-theme=dark] .btn:hover { box-shadow: 0 8px 14px -8px rgba(0, 0, 0, .8); }
  [data-theme=dark] .tabs a.on, [data-theme=dark] .pills a.on { background: linear-gradient(180deg, color-mix(in srgb, var(--fill) 86%, #fff), var(--fill)); }
  [data-theme=dark] .kpi { background: linear-gradient(180deg, var(--panel) 0%, color-mix(in srgb, var(--panel) 90%, #000) 100%); }
  [data-theme=dark] .kpi-ic { background: linear-gradient(135deg, var(--brand-soft), color-mix(in srgb, var(--brand-soft) 60%, #000)); color: var(--brand-2); box-shadow: inset 0 0 0 1px rgba(var(--rgb), .25); }
  [data-theme=dark] .tone-gold .kpi-ic { background: linear-gradient(135deg, #3d2f12, #2f240e); color: #f0c26a; }
  [data-theme=dark] .tone-crimson .kpi-ic { background: linear-gradient(135deg, #3f1d1e, #311618); color: #f4aaa5; }
  [data-theme=dark] .tone-green .kpi-ic { background: linear-gradient(135deg, #17361f, #122b18); color: #8fd69a; }
  [data-theme=dark] .tone-violet .kpi-ic { background: linear-gradient(135deg, #2b2347, #211a38); color: #c9b8f2; }
  [data-theme=dark] .hero { background: radial-gradient(700px 260px at 100% -30%, rgba(255, 255, 255, .16), transparent 60%), radial-gradient(520px 260px at 0% 130%, rgba(224, 172, 63, .22), transparent 62%), linear-gradient(var(--dir-deg), var(--g3) 0%, var(--g2) 62%, var(--g1) 120%); }
  [data-theme=dark][dir=rtl] .hero { background: radial-gradient(700px 260px at 0% -30%, rgba(255, 255, 255, .16), transparent 60%), radial-gradient(520px 260px at 100% 130%, rgba(224, 172, 63, .22), transparent 62%), linear-gradient(var(--dir-deg), var(--g3) 0%, var(--g2) 62%, var(--g1) 120%); }
  [data-theme=dark] .hero-card { background: radial-gradient(520px 200px at 100% 0%, rgba(224, 172, 63, .12), transparent 70%), radial-gradient(520px 260px at 0% 120%, rgba(var(--rgb), .22), transparent 70%), var(--panel); }
  [data-theme=dark][dir=rtl] .hero-card { background: radial-gradient(520px 200px at 0% 0%, rgba(224, 172, 63, .12), transparent 70%), radial-gradient(520px 260px at 100% 120%, rgba(var(--rgb), .22), transparent 70%), var(--panel); }
  [data-theme=dark] .att-today { background: radial-gradient(420px 180px at 100% 0%, rgba(var(--rgb), .24), transparent 70%), var(--panel); }
  [data-theme=dark] .ps-net { background: var(--fill); }
  [data-theme=dark] .hero-card::after { border-color: rgba(var(--rgb), .3); box-shadow: 0 0 0 30px rgba(var(--rgb), .07), 0 0 0 62px rgba(var(--rgb), .04); }
  [data-theme=dark] .flash.ok { background: #14301f; border-color: #2b5a37; color: #b7e2ba; }
  [data-theme=dark] .flash.err { background: #3a1b1c; border-color: #6b3434; color: #f4b3ae; }
  [data-theme=dark] .flash.warn { background: #3a2c10; border-color: #6b5120; color: #f3d9a1; }
  [data-theme=dark] .flash.info, [data-theme=dark] .notice { background: var(--brand-soft); border-color: rgba(var(--rgb), .4); color: var(--ink); }
  [data-theme=dark] .bar { background: var(--bg-3); }
  [data-theme=dark] select:not([multiple]) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%238da1af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E"); }
  [data-theme=dark] table.grid tbody tr:hover { background: color-mix(in srgb, var(--brand) 10%, var(--panel)); }
  [data-theme=dark] .oc-stats dd { color: var(--ink); }
  [data-theme=dark] .org-card { background: var(--panel); }
  [data-theme=dark] .badge { background: var(--bd-bg, #1d313a); color: var(--bd-fg, #b9cbd5); }
  [data-theme=dark] .b-active, [data-theme=dark] .b-approved, [data-theme=dark] .b-received, [data-theme=dark] .b-completed, [data-theme=dark] .b-paid, [data-theme=dark] .b-posted, [data-theme=dark] .b-human, [data-theme=dark] .b-full, [data-theme=dark] .b-circulated, [data-theme=dark] .b-open, [data-theme=dark] .b-hired, [data-theme=dark] .b-qualified, [data-theme=dark] .b-done, [data-theme=dark] .b-ir-qualified { --bd-bg: #17361f; --bd-fg: #a9dcae; }
  [data-theme=dark] .b-submitted, [data-theme=dark] .b-issued, [data-theme=dark] .b-ongoing, [data-theme=dark] .b-po, [data-theme=dark] .b-in_use, [data-theme=dark] .b-partial, [data-theme=dark] .b-stale, [data-theme=dark] .b-returned, [data-theme=dark] .b-hold, [data-theme=dark] .b-longlist, [data-theme=dark] .b-no_show, [data-theme=dark] .b-withdrawn, [data-theme=dark] .b-pending { --bd-bg: #3d2f12; --bd-fg: #f0d08a; }
  [data-theme=dark] .b-hr_approved, [data-theme=dark] .b-offer, [data-theme=dark] .b-scheduled, [data-theme=dark] .b-interview { --bd-bg: #123a4c; --bd-fg: #a8dcf0; }
  [data-theme=dark] .b-shortlist, [data-theme=dark] .b-ai, [data-theme=dark] .b-ai-note { --bd-bg: #2b2347; --bd-fg: #c9b8f2; }
  [data-theme=dark] .b-rejected, [data-theme=dark] .b-cancelled, [data-theme=dark] .b-suspended, [data-theme=dark] .b-disposed, [data-theme=dark] .b-ended, [data-theme=dark] .b-not_qualified { --bd-bg: #3f1d1e; --bd-fg: #f4aaa5; }
  [data-theme=dark] .b-draft, [data-theme=dark] .b-planning, [data-theme=dark] .b-planned, [data-theme=dark] .b-stored, [data-theme=dark] .b-none, [data-theme=dark] .b-src, [data-theme=dark] .b-closed, [data-theme=dark] .b-new, [data-theme=dark] .b-archived { --bd-bg: var(--bg-3); --bd-fg: var(--ink-2); }
  [data-theme=dark] .s-TR { --bd-bg: #3f1d22; --bd-fg: #f08086; } [data-theme=dark] .s-SY { --bd-bg: #123831; --bd-fg: #4fc1ae; } [data-theme=dark] .s-LB { --bd-bg: #3d2f12; --bd-fg: #e5a443; }
  [data-theme=dark] .b-regno { --bd-bg: var(--brand-soft); --bd-fg: var(--ink); }
}