/* BritHR — brand styles on top of Bootstrap 5 */
:root {
  --brand: #163366; --brand-2: #02BDBE; --brand-3: #22B573;
  --ink: #141c30; --muted: #4a5468; --line: rgba(20,35,70,.12); --bg: #eef2f8;
  --surface: rgba(255,255,255,.74); --surface-solid: #ffffff; --surface-2: rgba(244,247,252,.85); --tint: #ffffff;
  --glass-border: rgba(255,255,255,.75); --glass-shadow: 0 8px 28px rgba(18,38,80,.08), 0 1px 2px rgba(18,38,80,.05); --blur: 16px;
  --radius: 12px;
  --bs-font-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --bs-body-color: var(--ink);
  --bs-link-color: var(--brand);
  --bs-link-color-rgb: 22, 51, 102;
  --bs-link-hover-color: var(--brand-2);
}
body { font-family: var(--bs-font-sans-serif); color: var(--ink); }
a { color: var(--brand); }
a:hover { color: color-mix(in srgb, var(--brand) 70%, var(--brand-2)); }

.btn-primary { --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand); --bs-btn-hover-bg: color-mix(in srgb, var(--brand) 85%, #000);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--brand) 85%, #000); --bs-btn-active-bg: color-mix(in srgb, var(--brand) 75%, #000);
  --bs-btn-disabled-bg: var(--brand); --bs-btn-disabled-border-color: var(--brand); font-weight: 600; }
.btn-teal { --bs-btn-bg: var(--brand-2); --bs-btn-border-color: var(--brand-2); --bs-btn-color: #fff; --bs-btn-hover-bg: color-mix(in srgb, var(--brand-2) 85%, #000);
  --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: color-mix(in srgb, var(--brand-2) 85%, #000); font-weight: 600; }
.btn-outline-primary { --bs-btn-color: var(--brand); --bs-btn-border-color: var(--brand); --bs-btn-hover-bg: var(--brand); --bs-btn-hover-border-color: var(--brand); --bs-btn-active-bg: var(--brand); }
.text-brand { color: var(--brand) !important; }
.text-brand-2 { color: var(--brand-2) !important; }
.bg-brand { background: var(--brand) !important; color: #fff; }
.form-control:focus, .form-select:focus { border-color: var(--brand-2); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--brand-2) 25%, transparent); }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.nav-pills .nav-link.active { background: var(--brand); }
.nav-tabs .nav-link.active { color: var(--brand); font-weight: 600; }
.page-link { color: var(--brand); }
.active > .page-link { background: var(--brand); border-color: var(--brand); }

/* ---------- App shell ---------- */
.app-body { background: var(--bg); }
.app-shell { display: flex; min-height: calc(100vh / var(--zoom, 1)); }
.sidebar { width: 252px; flex: 0 0 252px; background: var(--surface); border-right: 1px solid var(--line); position: sticky; top: 0; height: calc(100vh / var(--zoom, 1)); overflow-y: auto; z-index: 1040; }
.sidebar-brand { display: block; padding: 18px 20px 10px; }
.sidebar-brand img { max-width: 150px; max-height: 56px; }
.sidebar-company { margin: 0 14px 10px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--brand-2) 12%, transparent);
  display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .9rem; color: var(--brand); }
.sidebar-company img { width: 26px; height: 26px; object-fit: contain; border-radius: 6px; background: #fff; }
.sidebar-nav { padding: 4px 10px 24px; }
.sidebar-nav .nav-section { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: 14px 12px 6px; font-weight: 600; }
.sidebar-nav .nav-link { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; color: var(--nav-ink); font-weight: 500; font-size: .92rem; }
.sidebar-nav .nav-link i { font-size: 1.05rem; color: var(--muted); width: 20px; text-align: center; }
.sidebar-nav .nav-link:hover { background: color-mix(in srgb, var(--brand-2) 10%, transparent); color: var(--brand-ink); }
.sidebar-nav .nav-link.active { background: var(--brand); color: #fff; }
.sidebar-nav .nav-link.active i { color: var(--brand-2); }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { height: 60px; background: var(--surface); border-bottom: 1px solid var(--line); display: flex; align-items: center; padding: 0 24px; position: sticky; top: 0; z-index: 1030; }
.content { padding: 24px; width: 100%; max-width: none; }
.avatar-sm { width: 26px; height: 26px; border-radius: 50%; background: var(--brand); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 700; }
.avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: color-mix(in srgb, var(--brand-2) 22%, var(--tint)); color: var(--brand-ink);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex: 0 0 40px; }
@media (max-width: 991.98px) {
  .sidebar { position: fixed; left: -260px; transition: left .2s; box-shadow: 0 0 40px rgba(0,0,0,.15); }
  .sidebar.open { left: 0; }
  .content { padding: 16px; }
  .topbar { padding: 0 16px; }
}

.card { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.card-header { background: transparent; border-bottom: 1px solid var(--line); font-weight: 600; padding: .85rem 1.1rem; border-radius: var(--radius) var(--radius) 0 0 !important; }
.page-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.page-head h1 { font-size: 1.35rem; font-weight: 700; margin: 0; }
.page-head .actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.card.stat, .stat { padding: 18px; display: flex; flex-direction: row; gap: 14px; align-items: center; height: 100%; }
.stat .icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex: 0 0 44px; }
.stat .num { font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
.stat .lbl { color: var(--muted); font-size: .85rem; }
.icon-blue { background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand-ink); }
.icon-teal { background: color-mix(in srgb, var(--brand-2) 18%, transparent); color: var(--teal-ink); }
.icon-green { background: rgba(34,181,115,.15); color: var(--green-ink); }
.icon-amber { background: rgba(245,158,11,.16); color: var(--amber-ink); }
.icon-red { background: rgba(220,38,38,.13); color: var(--red-ink); }
.table { --bs-table-bg: transparent; margin-bottom: 0; }
.table > :not(caption) > * > * { padding: .6rem .75rem; }
.table thead th { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; background: var(--surface-2); white-space: nowrap; }
.table-card { overflow-x: auto; }
.empty { padding: 40px 20px; text-align: center; color: var(--muted); }
.empty i { font-size: 2rem; display: block; margin-bottom: 8px; color: #b5bccb; }
.form-label { font-weight: 500; font-size: .88rem; margin-bottom: .3rem; }
.form-text { font-size: .8rem; }
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { position: relative; padding: 0 0 14px 22px; border-left: 2px solid var(--line); margin-left: 6px; }
.timeline li:last-child { border-left-color: transparent; }
.timeline li::before { content: ""; position: absolute; left: -7px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: #cbd2df; }
.timeline li.ok::before { background: #16a34a; } .timeline li.no::before { background: #dc2626; } .timeline li.wait::before { background: #f59e0b; }
.att-grid { font-size: .75rem; }
.att-grid td, .att-grid th { padding: .3rem .35rem !important; text-align: center; white-space: nowrap; }
.att-grid td:first-child, .att-grid th:first-child { text-align: left; position: sticky; left: 0; background: var(--surface-solid); z-index: 1; }
.att-P { background: #e8f7ef; color: #15803d; } .att-L { background: #fff4e0; color: #b45309; } .att-A { background: #fdecec; color: #b91c1c; }
.att-H { background: #fff8db; color: #a16207; } .att-LV { background: #e7f0ff; color: #1d4ed8; } .att-W { background: #f2f3f6; color: #9aa1b0; }
.secret-mask { font-family: ui-monospace, monospace; letter-spacing: .1em; }
.code-box { font-family: ui-monospace, Menlo, monospace; font-size: .85rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; word-break: break-all; }

/* ---------- Auth ---------- */
.auth-body { min-height: calc(100vh / var(--zoom, 1)); background:
  radial-gradient(1200px 500px at 110% -10%, color-mix(in srgb, var(--brand-2) 18%, transparent), transparent),
  radial-gradient(900px 500px at -10% 110%, color-mix(in srgb, var(--brand-3) 14%, transparent), transparent), var(--bg); }
.auth-wrap { max-width: 460px; margin: 0 auto; padding: 48px 16px; }
.auth-wrap.wide { max-width: 640px; }
.auth-logo { max-height: 70px; max-width: 220px; }
.auth-card { border-radius: 16px; }

/* ---------- Public site ---------- */
.site-body { background: #fff; }
.site-nav { background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); padding: 10px 0; }
.site-nav .nav-link { font-weight: 500; color: var(--ink); }
.hero { position: relative; overflow: hidden; padding: 88px 0 72px;
  background: linear-gradient(135deg, var(--brand) 0%, color-mix(in srgb, var(--brand) 60%, var(--brand-2)) 60%, var(--brand-2) 100%); color: #fff; }
.hero::after { content: ""; position: absolute; right: -120px; top: -120px; width: 480px; height: 480px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand-3) 55%, transparent), transparent 70%); opacity: .55; }
.hero h1 { font-weight: 800; font-size: clamp(2rem, 4.2vw, 3.2rem); letter-spacing: -.02em; line-height: 1.12; }
.hero .lead { color: rgba(255,255,255,.85); max-width: 620px; }
.hero .btn-light { color: var(--brand); font-weight: 700; }
.hero-card { background: #fff; color: var(--ink); border-radius: 16px; box-shadow: 0 30px 60px rgba(4,20,50,.35); padding: 18px; position: relative; z-index: 1; }
.hero-card .row-item { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--line); font-size: .9rem; }
.hero-card .row-item:last-child { border-bottom: 0; }
.section { padding: 80px 0; }
.section-alt { background: var(--bg); }
.section h2 { font-weight: 800; letter-spacing: -.02em; }
.eyebrow { color: var(--brand-2); font-weight: 700; text-transform: uppercase; font-size: .78rem; letter-spacing: .12em; }
.feature { padding: 26px; border-radius: 16px; border: 1px solid var(--line); height: 100%; background: #fff; transition: transform .15s, box-shadow .15s; }
.feature:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(16,24,40,.08); }
.feature .ficon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin-bottom: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand-3) 25%, #fff), color-mix(in srgb, var(--brand-2) 25%, #fff)); color: var(--brand); }
.plan { border: 1px solid var(--line); border-radius: 18px; padding: 30px; height: 100%; background: #fff; display: flex; flex-direction: column; }
.plan.featured { border: 2px solid var(--brand-2); box-shadow: 0 20px 50px rgba(2,189,190,.15); position: relative; }
.plan .price { font-size: 2.4rem; font-weight: 800; color: var(--brand); }
.plan ul { list-style: none; padding: 0; margin: 18px 0 24px; }
.plan li { padding: 6px 0; }
.plan li i { color: var(--brand-3); margin-right: 6px; }
.quote { border-radius: 16px; background: #fff; padding: 26px; border: 1px solid var(--line); height: 100%; }
.cta { background: linear-gradient(120deg, var(--brand), color-mix(in srgb, var(--brand) 50%, var(--brand-2))); color: #fff; border-radius: 22px; padding: 48px; }
.site-footer { background: #0e1d3d; color: #b6c0d4; padding: 56px 0 28px; }
.site-footer h6 { color: #fff; font-weight: 700; }
.site-footer a { color: #b6c0d4; display: block; padding: 3px 0; text-decoration: none; }
.site-footer a:hover { color: #fff; }
.footer-logo { background: #fff; border-radius: 10px; padding: 6px 10px; }
.accordion-button:not(.collapsed) { color: var(--brand); background: color-mix(in srgb, var(--brand-2) 8%, #fff); }

/* ---------- Print (payslip, invoice) ---------- */
.print-body { background: #eef1f6; }
.print-page { max-width: 820px; margin: 20px auto; background: #fff; padding: 40px; border-radius: 8px; }
.print-actions { max-width: 820px; margin: 20px auto 0; display: flex; gap: 8px; }
.print-page table { width: 100%; }
@media print {
  .no-print, .print-actions { display: none !important; }
  .print-body { background: #fff; }
  .print-page { margin: 0; padding: 0; max-width: none; }
}

/* ---------- Collapsible sidebar ---------- */
.sidebar, .sidebar-nav .nav-link span, .sidebar-company span { transition: width .18s ease, opacity .12s ease; }
.sidebar-brand .logo-mark { display: none; width: 34px; height: 34px; object-fit: contain; }
.sidebar-backdrop { display: none; }
@media (min-width: 992px) {
  body.sidebar-collapsed .sidebar { width: 72px; flex-basis: 72px; overflow-x: hidden; }
  body.sidebar-collapsed .sidebar-brand { padding: 18px 0 10px; text-align: center; }
  body.sidebar-collapsed .sidebar-brand .logo-full { display: none; }
  body.sidebar-collapsed .sidebar-brand .logo-mark { display: inline-block; }
  body.sidebar-collapsed .sidebar-company { display: none; }
  body.sidebar-collapsed .sidebar-company span,
  body.sidebar-collapsed .sidebar-nav .nav-link span,
  body.sidebar-collapsed .sidebar-nav .nav-section { display: none; }
  body.sidebar-collapsed .sidebar-nav { padding: 4px 10px 24px; }
  body.sidebar-collapsed .sidebar-nav .nav-link { justify-content: center; padding: 10px 0; position: relative; }
  body.sidebar-collapsed .sidebar-nav .nav-link i { font-size: 1.2rem; width: auto; }
  body.sidebar-collapsed .sidebar-nav .nav-link .badge { display: inline-block !important; position: absolute; top: 2px; right: 6px; font-size: .6rem; padding: .2em .45em; }
  body.sidebar-collapsed .sidebar-company img { width: 28px; height: 28px; }
}
@media (max-width: 991.98px) {
  .sidebar.open + .sidebar-backdrop { display: block; position: fixed; inset: 0; background: rgba(10,20,40,.35); z-index: 1035; }
}

/* ---------- Organogram ---------- */
.org-wrap { overflow: auto; padding: 24px 8px 32px; }
.org-tree, .org-tree ul { display: flex; justify-content: center; padding: 0; margin: 0; list-style: none; position: relative; }
.org-tree ul { padding-top: 24px; }
.org-tree li { position: relative; padding: 24px 8px 0; text-align: center; flex: 0 0 auto; }
.org-tree > li { padding-top: 0; }
.org-tree li::before, .org-tree li::after { content: ""; position: absolute; top: 0; right: 50%; width: 50%; height: 24px; border-top: 2px solid #cdd5e3; }
.org-tree li::after { right: auto; left: 50%; border-left: 2px solid #cdd5e3; }
.org-tree li:only-child::before, .org-tree li:only-child::after { display: none; }
.org-tree li:only-child { padding-top: 24px; }
.org-tree > li:only-child { padding-top: 0; }
.org-tree li:first-child::before, .org-tree li:last-child::after { border: 0 none; }
.org-tree li:last-child::before { border-right: 2px solid #cdd5e3; border-radius: 0 8px 0 0; }
.org-tree li:first-child::after { border-radius: 8px 0 0 0; }
.org-tree ul::before { content: ""; position: absolute; top: 0; left: 50%; height: 24px; border-left: 2px solid #cdd5e3; }
.org-tree li:only-child > .org-node::before { content: ""; position: absolute; top: -24px; left: 50%; height: 24px; border-left: 2px solid #cdd5e3; }
.org-tree > li:only-child > .org-node::before { display: none; }
.org-node { position: relative; display: inline-flex; flex-direction: column; align-items: center; width: 168px; padding: 14px 10px 12px; background: var(--surface);
  border: 1px solid var(--line); border-top: 3px solid var(--brand-2); border-radius: 12px; box-shadow: 0 2px 6px rgba(16,24,40,.06); text-decoration: none; color: var(--ink); }
a.org-node:hover { box-shadow: 0 8px 20px rgba(16,24,40,.12); color: var(--ink); }
.org-node.top { border-top-color: var(--brand); }
.org-node .avatar { width: 48px; height: 48px; flex-basis: 48px; margin-bottom: 8px; font-size: 1.1rem; }
.org-node .nm { font-weight: 600; font-size: .9rem; line-height: 1.2; }
.org-node .ds { font-size: .78rem; color: var(--muted); line-height: 1.2; margin-top: 2px; }
.org-node .dp { font-size: .7rem; margin-top: 6px; background: color-mix(in srgb, var(--brand-2) 16%, transparent); color: var(--teal-ink); border-radius: 20px; padding: 1px 8px; }
.org-node .cnt { position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); background: var(--brand); color: #fff; font-size: .68rem; border-radius: 20px; padding: 0 7px; z-index: 1; }
.org-dept-head { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
@media print {
  .sidebar, .topbar, .sidebar-backdrop, .page-head .actions, .alert { display: none !important; }
  .app-body { background: #fff; }
  .content { padding: 0; max-width: none; }
  .card { box-shadow: none; border: 0; }
}

.company-login-logo { max-height: 84px; max-width: 240px; object-fit: contain; }

/* =====================================================================
   Glass theme + dark mode (v1.9)
   Light and dark share the same structure; only the tokens change.
   ===================================================================== */
:root, [data-bs-theme=light] {
  --brand-ink: var(--brand); --teal-ink: #037b7c; --green-ink: #12784a; --amber-ink: #9a5b06; --red-ink: #b42323;
  --nav-ink: #33405a;
  --mesh-1: color-mix(in srgb, var(--brand-2) 22%, transparent);
  --mesh-2: color-mix(in srgb, var(--brand-3) 16%, transparent);
  --mesh-3: color-mix(in srgb, var(--brand) 12%, transparent);
}
[data-bs-theme=dark] {
  --ink: #e8ecf4; --muted: #a3adc2; --line: rgba(255,255,255,.09); --bg: #0a1222;
  --surface: rgba(21,30,50,.66); --surface-solid: #141d31; --surface-2: rgba(255,255,255,.04); --tint: #141d31;
  --glass-border: rgba(255,255,255,.08); --glass-shadow: 0 10px 30px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.03) inset;
  --brand-ink: color-mix(in srgb, var(--brand-2) 70%, #fff); --teal-ink: #5fe0e1; --green-ink: #5fd99c; --amber-ink: #f6c060; --red-ink: #ff8a8a;
  --nav-ink: #c9d1e1;
  --mesh-1: color-mix(in srgb, var(--brand-2) 16%, transparent);
  --mesh-2: color-mix(in srgb, var(--brand-3) 10%, transparent);
  --mesh-3: color-mix(in srgb, var(--brand) 45%, transparent);
  --bs-body-color: var(--ink); --bs-body-bg: var(--bg); --bs-secondary-color: var(--muted); --bs-tertiary-bg: rgba(255,255,255,.04);
  --bs-border-color: rgba(255,255,255,.12); --bs-emphasis-color: #fff;
  --bs-link-color: #6fe3e4; --bs-link-color-rgb: 111, 227, 228; --bs-link-hover-color: #a6f0f0;
  color-scheme: dark;
}
html, body { background: var(--bg); }
body { color: var(--ink); }

/* Soft brand mesh behind the glass */
.app-body, .auth-body {
  background:
    radial-gradient(900px 520px at 100% -8%, var(--mesh-1), transparent 70%),
    radial-gradient(820px 520px at -6% 104%, var(--mesh-2), transparent 70%),
    radial-gradient(700px 420px at 45% 120%, var(--mesh-3), transparent 70%),
    var(--bg);
  background-attachment: fixed;
}

/* Links: names and table links are not underlined */
a { text-decoration: none; }
.content a:not(.btn):hover, .auth-wrap a:not(.btn):hover { text-decoration: none; filter: brightness(1.15); }
.content table a:not(.btn):hover, .content .fw-semibold a:hover, a.fw-semibold:hover, a.fw-bold:hover { text-decoration: none; color: var(--brand-ink); }
[data-bs-theme=dark] body:not(.site-body) a:not(.btn):not(.nav-link):not(.dropdown-item):not(.list-group-item-action):not(.alert):not(.badge):not(.sidebar-brand) { color: var(--bs-link-color); }
[data-bs-theme=dark] body:not(.site-body) a:not(.btn):not(.nav-link):not(.dropdown-item):not(.list-group-item-action):not(.alert):not(.badge):not(.sidebar-brand):hover { color: var(--bs-link-hover-color); }
[data-bs-theme=dark] .list-group-item-action { color: var(--ink); }
[data-bs-theme=dark] body:not(.site-body) a.fw-semibold, [data-bs-theme=dark] .content table a:not(.btn) { color: #dfe6f3; }
[data-bs-theme=dark] body:not(.site-body) a.fw-semibold:hover, [data-bs-theme=dark] .content table a:not(.btn):hover { color: #8eeaea; }

/* Glass surfaces */
.card, .sidebar, .topbar, .dropdown-menu, .modal-content, .list-group-item, .print-page {
  -webkit-backdrop-filter: blur(var(--blur)) saturate(140%); backdrop-filter: blur(var(--blur)) saturate(140%);
}
.card { background: var(--surface); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); border-radius: 14px; color: var(--ink); }
.card-header, .card-footer { background: transparent; border-color: var(--line); }
.card-footer { border-radius: 0 0 14px 14px !important; }
.sidebar { border-right: 1px solid var(--glass-border); box-shadow: 1px 0 0 var(--line); }
.topbar { border-bottom: 1px solid var(--glass-border); }
.list-group { --bs-list-group-bg: transparent; --bs-list-group-color: var(--ink); --bs-list-group-border-color: var(--line); --bs-list-group-action-hover-bg: color-mix(in srgb, var(--brand-2) 8%, transparent); --bs-list-group-action-hover-color: var(--ink); }
.list-group-item { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.dropdown-menu { --bs-dropdown-bg: var(--surface-solid); --bs-dropdown-border-color: var(--line); border-radius: 12px; box-shadow: var(--glass-shadow); }
.table { --bs-table-color: var(--ink); --bs-table-border-color: var(--line); --bs-table-striped-bg: var(--surface-2); --bs-table-hover-bg: color-mix(in srgb, var(--brand-2) 7%, transparent); }
.table > :not(caption) > * > * { border-bottom-color: var(--line); }
.sidebar-nav .nav-link.active { background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 70%, var(--brand-2))); color: #fff; box-shadow: 0 6px 16px color-mix(in srgb, var(--brand) 35%, transparent); }
.sidebar-nav .nav-link.active i { color: #bff6f6; }
.sidebar-company { color: var(--brand-ink); border: 1px solid color-mix(in srgb, var(--brand-2) 22%, transparent); }
[data-bs-theme=dark] .sidebar-brand img.logo-full { background: rgba(255,255,255,.92); border-radius: 10px; padding: 4px 8px; }
.sidebar-company img { background: #fff; }

/* Stat tiles and icons: frosted gradient chips */
.stat .icon { border: 1px solid color-mix(in srgb, currentColor 18%, transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
.stat .num { color: var(--ink); }
.empty i { color: color-mix(in srgb, var(--muted) 70%, transparent); }
.avatar-sm { background: linear-gradient(135deg, var(--brand), var(--brand-2)); }

/* Forms on glass */
[data-bs-theme=dark] .form-control, [data-bs-theme=dark] .form-select, [data-bs-theme=dark] .input-group-text {
  background-color: rgba(8,14,28,.55); border-color: rgba(255,255,255,.14); color: var(--ink); }
[data-bs-theme=dark] .form-control::placeholder { color: #7d889e; }
[data-bs-theme=dark] .form-control:disabled, [data-bs-theme=dark] .form-select:disabled { background-color: rgba(255,255,255,.04); }
.form-control, .form-select { border-radius: 10px; }

/* Bootstrap utility colours that are fixed to light */
[data-bs-theme=dark] .bg-white, [data-bs-theme=dark] .bg-light { background-color: var(--surface-2) !important; }
[data-bs-theme=dark] .text-dark { color: var(--ink) !important; }
[data-bs-theme=dark] .bg-light.text-dark, [data-bs-theme=dark] .badge.bg-light { background-color: rgba(255,255,255,.08) !important; color: var(--ink) !important; border-color: rgba(255,255,255,.15) !important; }
[data-bs-theme=dark] .btn-light { --bs-btn-bg: rgba(255,255,255,.07); --bs-btn-border-color: rgba(255,255,255,.12); --bs-btn-color: var(--ink);
  --bs-btn-hover-bg: rgba(255,255,255,.14); --bs-btn-hover-border-color: rgba(255,255,255,.2); --bs-btn-hover-color: #fff; --bs-btn-active-bg: rgba(255,255,255,.18); --bs-btn-active-color: #fff; }
[data-bs-theme=dark] .btn-primary { --bs-btn-bg: color-mix(in srgb, var(--brand) 70%, var(--brand-2)); --bs-btn-border-color: transparent; --bs-btn-hover-bg: color-mix(in srgb, var(--brand) 50%, var(--brand-2)); }
[data-bs-theme=dark] .btn-outline-primary { --bs-btn-color: #8eeaea; --bs-btn-border-color: rgba(142,234,234,.5); --bs-btn-hover-bg: color-mix(in srgb, var(--brand-2) 30%, transparent); --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: #8eeaea; }
[data-bs-theme=dark] .btn-outline-secondary { --bs-btn-color: var(--ink); --bs-btn-border-color: rgba(255,255,255,.25); }
[data-bs-theme=dark] .btn-link { --bs-btn-color: #8eeaea; }
[data-bs-theme=dark] .text-muted { color: var(--muted) !important; }
[data-bs-theme=dark] .text-brand { color: var(--brand-ink) !important; }
[data-bs-theme=dark] .text-success { color: #5fd99c !important; }
[data-bs-theme=dark] .text-danger { color: #ff8a8a !important; }
[data-bs-theme=dark] .text-warning { color: #f6c060 !important; }
[data-bs-theme=dark] .nav-tabs { --bs-nav-tabs-border-color: var(--line); --bs-nav-tabs-link-active-bg: var(--surface); --bs-nav-tabs-link-active-color: #fff; --bs-nav-tabs-link-active-border-color: var(--line) var(--line) transparent; }
[data-bs-theme=dark] .nav-tabs .nav-link:not(.active) { color: var(--muted); }
[data-bs-theme=dark] .nav-tabs .nav-link.active { color: #fff; }
.nav-tabs { --bs-nav-tabs-link-active-bg: var(--surface); }
[data-bs-theme=dark] .table-light, [data-bs-theme=dark] .table-warning, [data-bs-theme=dark] tr.table-light > td, [data-bs-theme=dark] tr.table-warning > td { --bs-table-bg: rgba(255,255,255,.05); --bs-table-color: var(--ink); }
[data-bs-theme=dark] .alert-light { --bs-alert-bg: rgba(255,255,255,.05); --bs-alert-color: var(--ink); --bs-alert-border-color: var(--line); }
[data-bs-theme=dark] .border { border-color: var(--line) !important; }
[data-bs-theme=dark] .att-grid td:first-child, [data-bs-theme=dark] .att-grid th:first-child { background: var(--surface-solid); }
[data-bs-theme=dark] .att-P { background: rgba(34,181,115,.18); color: #7fe2b0; } [data-bs-theme=dark] .att-L { background: rgba(245,158,11,.18); color: #f6c060; }
[data-bs-theme=dark] .att-A { background: rgba(220,38,38,.2); color: #ff9c9c; } [data-bs-theme=dark] .att-H { background: rgba(234,179,8,.16); color: #f2d06b; }
[data-bs-theme=dark] .att-LV { background: rgba(59,130,246,.2); color: #9cc3ff; } [data-bs-theme=dark] .att-W { background: rgba(255,255,255,.05); color: #8790a3; }
[data-bs-theme=dark] .org-tree li::before, [data-bs-theme=dark] .org-tree li::after, [data-bs-theme=dark] .org-tree ul::before,
[data-bs-theme=dark] .org-tree li:only-child > .org-node::before { border-color: rgba(255,255,255,.18); }
[data-bs-theme=dark] .org-node { color: var(--ink); border-color: var(--glass-border); }
[data-bs-theme=dark] .org-node .nm { color: #fff; }
[data-bs-theme=dark] .timeline li { border-left-color: var(--line); }
[data-bs-theme=dark] .code-box { border-color: var(--line); color: var(--ink); }
[data-bs-theme=dark] .print-body { background: var(--bg); }
[data-bs-theme=dark] .accordion-button:not(.collapsed) { background: rgba(255,255,255,.05); color: #fff; }
[data-bs-theme=dark] .sidebar-toggle { color: var(--ink) !important; }
[data-bs-theme=dark] .company-login-logo, [data-bs-theme=dark] .auth-logo { background: rgba(255,255,255,.92); border-radius: 12px; padding: 6px 10px; }
.theme-toggle { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; }

/* Payslip / print pages always print light */
@media print { :root, [data-bs-theme=dark] { --ink: #16213a; --surface: #fff; --bg: #fff; } .card, .print-page { backdrop-filter: none; box-shadow: none; } }
@media (prefers-reduced-transparency: reduce) { .card, .sidebar, .topbar { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--surface-solid); } }
a.alert, [data-bs-theme=dark] a.alert { color: var(--bs-alert-color); }
a.alert:hover { text-decoration: none !important; filter: brightness(1.03); }
.stat .num.fs-5 { white-space: nowrap; font-size: clamp(1rem, 1.35vw, 1.25rem) !important; }
[data-bs-theme=dark] .btn-check:checked + .btn-outline-primary { background: color-mix(in srgb, var(--brand-2) 34%, transparent); color: #fff; border-color: #8eeaea; }

/* Full-width content: tables grow when the menu is collapsed */
.main { width: 100%; }
.table-card > .table { width: 100%; }
.budget-payroll .table td input.form-control-sm { min-width: 110px; }
.budget-payroll .table td:nth-child(7) input { min-width: 180px; }

/* Organogram: zoom, fit, pan and full screen */
.org-card { overflow: hidden; }
.org-toolbar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.org-toolbar .zoom-val { min-width: 52px; text-align: center; font-variant-numeric: tabular-nums; font-size: .85rem; }
.org-wrap { overflow: auto; max-height: calc(100vh / var(--zoom, 1) - 210px); min-height: 320px; cursor: grab; padding: 24px 8px 32px; }
.org-wrap.dragging { cursor: grabbing; user-select: none; }
.org-sizer { position: relative; margin: 0 auto; }
.org-canvas { display: inline-block; transform-origin: 0 0; position: absolute; left: 0; top: 0; }
.org-card:fullscreen { background: var(--bg); border-radius: 0; display: flex; flex-direction: column; }
.org-card:fullscreen .org-wrap { max-height: none; flex: 1; }
@media print { .org-toolbar { display: none !important; } .org-wrap { max-height: none; overflow: visible; } }

/* =====================================================================
   Responsive pass (v1.9.6): tablets and phones
   ===================================================================== */
.card-header.d-flex { flex-wrap: wrap; gap: .35rem .5rem; }
.nav-tabs { flex-wrap: wrap; }
img, svg, video { max-width: 100%; }
.table td, .table th { vertical-align: middle; }
@media (max-width: 991.98px) {
  .page-head h1 { font-size: 1.2rem; }
  .content { padding: 16px; }
}
@media (max-width: 767.98px) {
  .content { padding: 12px; }
  .page-head { gap: 8px; margin-bottom: 12px; }
  .page-head .actions { margin-left: 0; width: 100%; }
  .page-head .actions > .btn, .page-head .actions > a.btn, .page-head .actions > form, .page-head .actions > .btn-group { flex: 1 1 auto; }
  .card-header { padding: .7rem .85rem; }
  .card-body { padding: .85rem; }
  .card.stat, .stat { padding: 12px; gap: 10px; }
  .stat .icon { width: 36px; height: 36px; flex-basis: 36px; font-size: 1.05rem; border-radius: 10px; }
  .stat .num { font-size: 1.2rem; }
  .stat .num.fs-5 { white-space: normal; font-size: .98rem !important; word-break: break-word; }
  .stat .lbl { font-size: .78rem; }
  .table { font-size: .86rem; }
  .table > :not(caption) > * > * { padding: .45rem .5rem; }
  .table thead th { font-size: .68rem; }
  .nav-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .nav-tabs::-webkit-scrollbar { display: none; }
  .nav-tabs .nav-link { white-space: nowrap; padding: .5rem .7rem; }
  .card-header input[data-filter] { max-width: none !important; flex: 1 1 100%; margin-left: 0 !important; }
  .topbar { height: 54px; }
  .topbar .fw-semibold { font-size: .95rem; }
  .avatar { width: 34px; height: 34px; flex-basis: 34px; }
  .org-node { width: 140px; }
  .alert { padding: .6rem .8rem; }
  .btn-lg { padding: .5rem 1rem; font-size: 1rem; }
  .form-control, .form-select { font-size: 16px; } /* stops phones zooming into fields */
  .form-control-sm, .form-select-sm { font-size: 14px; }
}
@media (max-width: 400px) {
  .stat .icon { display: none; }
}
@media (max-width: 991.98px) { .app-body, .auth-body { background-attachment: scroll; } }

/* Sidebar shows the company's own logo (v1.9.8) */
.company-brand { display: flex !important; align-items: center; justify-content: center; min-height: 76px; padding: 16px 18px 12px !important; }
.company-brand img.logo-full { max-width: 190px; max-height: 64px; object-fit: contain; }
.company-name-brand { font-weight: 700; font-size: 1.05rem; color: var(--brand-ink); text-align: center; line-height: 1.25; }
.company-initial { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; font-weight: 700; align-items: center; justify-content: center; }
.company-brand .logo-mark { display: none; }
body.sidebar-collapsed .company-brand .logo-full { display: none; }
body.sidebar-collapsed .company-brand img.logo-mark { display: inline-block; width: 40px; height: 40px; object-fit: contain; }
body.sidebar-collapsed .company-brand span.logo-mark { display: inline-flex; }
@media (max-width: 991.98px) { body.sidebar-collapsed .company-brand .logo-full { display: inline-block; } body.sidebar-collapsed .company-brand .logo-mark { display: none !important; } }
[data-bs-theme=dark] .company-brand img.logo-full, [data-bs-theme=dark] .company-brand img.logo-mark { background: rgba(255,255,255,.92); border-radius: 10px; padding: 4px 8px; }

/* Rich text (job description) */
.rich-editor { border: 1px solid var(--bs-border-color, var(--line)); border-radius: 10px; overflow: hidden; background: var(--surface-solid); }
.rich-toolbar { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.rich-toolbar .btn { padding: .2rem .45rem; }
.rich-sep { width: 1px; background: var(--line); margin: 2px 4px; }
.rich-body { border: 0 !important; border-radius: 0 !important; min-height: 220px; max-height: 520px; overflow-y: auto; box-shadow: none !important; }
.rich-body:empty::before { content: attr(data-placeholder); color: var(--muted); }
.rich-content h2, .rich-content h3, .rich-content h4, .rich-body h3 { font-size: 1.05rem; font-weight: 700; margin: .9rem 0 .4rem; }
.rich-content p, .rich-body p { margin: 0 0 .55rem; }
.rich-content ul, .rich-content ol, .rich-body ul, .rich-body ol { padding-left: 1.3rem; margin-bottom: .6rem; }
.rich-content table { width: 100%; border-collapse: collapse; margin-bottom: .6rem; }
.rich-content td, .rich-content th { border: 1px solid var(--line); padding: .3rem .5rem; }

/* Payroll salary sheet */
.salary-sheet { font-size: .85rem; }
.salary-sheet th { white-space: nowrap; }
.salary-sheet td, .salary-sheet th { padding-left: .45rem; padding-right: .45rem; }
.slip-att th { white-space: normal !important; text-transform: none !important; letter-spacing: 0 !important; vertical-align: middle; font-size: .74rem; }

/* ---------- Payslip ---------- */
.print-page:has(.ps) { padding: 0; overflow: hidden; box-shadow: 0 10px 40px rgba(22,51,102,.12); }
.ps { --ps-ink: #16213a; --ps-muted: #6b7486; --ps-line: #e6eaf1; --ps-soft: #f6f8fb; color: var(--ps-ink); padding: 40px 44px 28px; font-size: .9rem;
  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.ps-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.ps-co { display: flex; gap: 14px; align-items: center; min-width: 0; }
.ps-co img { max-height: 54px; max-width: 120px; object-fit: contain; }
.ps-co-name { font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; color: var(--brand); line-height: 1.2; }
.ps-co-addr { color: var(--ps-muted); font-size: .78rem; max-width: 340px; margin-top: 2px; }
.ps-title { text-align: right; white-space: nowrap; }
.ps-kicker { font-size: .72rem; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: var(--brand-2); }
.ps-month { font-size: 1.45rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.ps-meta { color: var(--ps-muted); font-size: .76rem; margin-top: 2px; }
.ps-draft { background: #fff3cd; color: #8a6100; border-radius: 20px; padding: 1px 8px; font-weight: 600; font-size: .7rem; margin-left: 4px; }
.ps-bar { height: 4px; border-radius: 4px; margin: 20px 0 22px; background: linear-gradient(90deg, var(--brand), var(--brand-2) 70%, var(--brand-3)); }
.ps-emp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 24px; background: var(--ps-soft); border: 1px solid var(--ps-line); border-radius: 12px; padding: 16px 20px; }
.ps-emp span, .ps-label { display: block; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ps-muted); font-weight: 600; }
.ps-emp strong { display: block; font-weight: 600; margin-top: 2px; overflow-wrap: anywhere; }
.ps-label { margin: 22px 0 8px; display: flex; align-items: center; gap: 10px; }
.ps-label::after { content: ""; flex: 1; height: 1px; background: var(--ps-line); }
.ps-att { display: grid; grid-template-columns: repeat(8, 1fr); border: 1px solid var(--ps-line); border-radius: 12px; overflow: hidden; }
.ps-att > div { padding: 10px 6px; text-align: center; border-right: 1px solid var(--ps-line); }
.ps-att > div:last-child { border-right: 0; }
.ps-att strong { display: block; font-size: 1.1rem; font-weight: 700; line-height: 1.2; }
.ps-att span { display: block; font-size: .66rem; color: var(--ps-muted); margin-top: 2px; line-height: 1.2; }
.ps-att .warn strong { color: #b26a00; }
.ps-att .bad { background: #fff4f4; } .ps-att .bad strong { color: #c62828; }
.ps-note { margin-top: 10px; font-size: .8rem; border-radius: 8px; padding: 7px 12px; display: flex; gap: 8px; align-items: center; }
.ps-note.bad { background: #fff4f4; color: #a32020; border: 1px solid #f6d5d5; }
.ps-note.ok { background: #effaf4; color: #1c7a47; border: 1px solid #cdeedb; }
.ps-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 24px; align-items: start; }
.ps-tbl { width: 100%; border-collapse: collapse; }
.ps-tbl th { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); font-weight: 700; padding: 0 0 8px; border-bottom: 2px solid var(--brand); }
.ps-tbl th:last-child, .ps-tbl td:last-child { text-align: right; white-space: nowrap; }
.ps-tbl td { padding: 8px 0; border-bottom: 1px dashed var(--ps-line); vertical-align: top; }
.ps-tbl td small { display: block; color: var(--ps-muted); font-size: .74rem; margin-top: 1px; }
.ps-tbl tr.sub td { font-weight: 600; background: var(--ps-soft); padding-left: 8px; padding-right: 8px; border-bottom: 1px solid var(--ps-line); }
.ps-tbl tr.plus td:last-child { color: #1c7a47; }
.ps-tbl tr.minus td:last-child { color: #c62828; }
.ps-tbl tfoot td { font-weight: 700; border-bottom: 0; border-top: 1px solid var(--ps-ink); padding-top: 10px; }
.ps-none { color: var(--ps-muted); font-style: italic; }
.ps-net { margin-top: 26px; border-radius: 14px; padding: 18px 24px; display: flex; justify-content: space-between; align-items: center; gap: 20px; color: #fff;
  background: linear-gradient(120deg, var(--brand) 0%, color-mix(in srgb, var(--brand) 70%, var(--brand-2)) 100%); }
.ps-net-l { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; opacity: .8; font-weight: 600; }
.ps-words { font-size: .82rem; margin-top: 4px; opacity: .95; }
.ps-net-v { font-size: 1.9rem; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; }
.ps-net-v small { font-size: .9rem; font-weight: 600; opacity: .8; }
.ps-remark { margin-top: 14px; font-size: .82rem; color: var(--ps-muted); } .ps-remark strong { color: var(--ps-ink); margin-right: 6px; }
.ps-sign { display: flex; justify-content: space-between; gap: 40px; margin-top: 56px; }
.ps-sign div { flex: 0 0 38%; border-top: 1px solid #9aa3b5; padding-top: 6px; text-align: center; font-size: .74rem; color: var(--ps-muted); }
.ps-foot { margin-top: 22px; padding-top: 12px; border-top: 1px solid var(--ps-line); text-align: center; font-size: .68rem; color: #9aa3b5; }
@media (max-width: 700px) {
  .ps { padding: 24px 18px; } .ps-head { flex-direction: column; } .ps-title { text-align: left; }
  .ps-emp { grid-template-columns: 1fr 1fr; } .ps-att { grid-template-columns: repeat(4, 1fr); } .ps-att > div:nth-child(4n) { border-right: 0; }
  .ps-att > div:nth-child(-n+4) { border-bottom: 1px solid var(--ps-line); } .ps-cols { grid-template-columns: 1fr; } .ps-net { flex-direction: column; align-items: flex-start; }
}
@media print { .print-page:has(.ps) { box-shadow: none; } .ps { padding: 0; } @page { size: A4; margin: 12mm; } }

/* ---------- Device live status ---------- */
.dev-status { border: 1px solid var(--glass-border, #e6eaf1); border-radius: 12px; padding: 14px 16px; background: rgba(127,127,127,.04); }
.dev-dot { width: 14px; height: 14px; border-radius: 50%; flex: 0 0 14px; background: #9aa3b5; position: relative; }
.dev-dot.dev-success { background: #22b573; } .dev-dot.dev-danger { background: #dc3545; } .dev-dot.dev-warning { background: #f0ad00; } .dev-dot.dev-secondary { background: #9aa3b5; } .dev-dot.dev-primary { background: #2563eb; }
.dev-pulse::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid #22b573; animation: devpulse 1.8s ease-out infinite; }
@keyframes devpulse { from { transform: scale(.6); opacity: .9; } to { transform: scale(1.5); opacity: 0; } }
.dev-facts { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.dev-facts strong { font-weight: 600; color: var(--ink, inherit); }
.att-device { display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; }
.att-device .dev-dot { width: 10px; height: 10px; flex-basis: 10px; }
@media (prefers-reduced-motion: reduce) { .dev-pulse::after { animation: none; } }

/* Late / early / warning text: a deeper golden yellow that reads well on white (dark mode keeps the bright one) */
:root:not([data-bs-theme=dark]) .text-warning, [data-bs-theme=light] .text-warning { color: #b8860b !important; }
:root:not([data-bs-theme=dark]) .text-warning-emphasis { color: #8a6100 !important; }

/* Compact attendance table (dashboard) */
.att-compact-head th { white-space: normal; line-height: 1.15; vertical-align: bottom; }
#todayTable td, #todayTable th { padding-left: .4rem; padding-right: .4rem; }
#todayTable td:first-child, #todayTable th:first-child { padding-left: 1.25rem; }
#todayTable td:last-child, #todayTable th:last-child { padding-right: 1rem; }
#todayTable td { font-size: .85rem; }
.note-short { cursor: pointer; white-space: nowrap; border-bottom: 1px dotted currentColor; }
.note-short:focus { outline: none; }

/* Clickable attendance summary cards (employee view) */
.att-card { transition: transform .12s ease, box-shadow .12s ease; cursor: pointer; }
.att-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(22,51,102,.12); }
.att-card.active { outline: 2px solid var(--brand); outline-offset: -2px; }
.att-cards .stat { padding: .75rem .9rem; }
.att-cards .tone-red { color: #c62828 !important; } .att-cards .tone-amber { color: #b8860b !important; } .att-cards .tone-green { color: #1c7a47 !important; } .att-cards .tone-teal { color: #0b7a8a !important; }
[data-bs-theme=dark] .tone-red { color: #ff8a80; } [data-bs-theme=dark] .tone-amber { color: #ffd54f; } [data-bs-theme=dark] .tone-green { color: #69f0ae; } [data-bs-theme=dark] .tone-teal { color: #4dd0e1; }

/* Full-height pages (employee monitor): no padding, the frame fills everything under the header (v1.17) */
.main:has(.content-flush) { height: calc(100vh / var(--zoom, 1)); height: calc(100dvh / var(--zoom, 1)); }
.content.content-flush { padding: 0; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.content-flush > .alert { margin: 12px 12px 0; }
.monitor-frame { flex: 1 1 auto; width: 100%; min-height: 420px; border: 0; display: block; background: #fff; }

/* Employee names open the profile (v1.18) */
a.emp-link { color: inherit; text-decoration: none; border-bottom: 0; font-weight: 600; }
a.emp-link:hover { color: var(--brand-ink); text-decoration: none; }
.emp-att { font-size: .85em; color: var(--muted); margin-left: .35rem; }
.pw-eye { border-color: var(--bs-border-color); color: var(--muted); }
.pw-eye:hover { color: var(--ink); background: transparent; }
.pw-group > .form-control { border-right: 0; }

/* Sortable table headers (v1.18.5) */
th.th-sort { cursor: pointer; user-select: none; }
th.th-sort .sort-ic { font-size: .72em; margin-left: .35em; opacity: .35; vertical-align: .05em; }
th.th-sort:hover .sort-ic, th.th-sort[aria-sort="ascending"] .sort-ic, th.th-sort[aria-sort="descending"] .sort-ic { opacity: 1; color: var(--bs-primary); }
th.th-sort:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: -2px; }
@media print { th.th-sort .sort-ic { display: none; } }

/* BritHR Desktop menus in the top bar (v1.19.1) */
.desk-bar { align-items: center; gap: .15rem; margin-right: .85rem; padding-right: .85rem; border-right: 1px solid var(--bs-border-color); }
.desk-home { border: 0; background: none; padding: 2px 4px; border-radius: 8px; line-height: 0; cursor: pointer; }
.desk-home img { width: 26px; height: 26px; }
.desk-home:hover { background: var(--bs-tertiary-bg); }
.desk-menu-btn { border: 0; background: none; color: var(--bs-body-color); font-weight: 500; padding: .25rem .55rem; display: inline-flex; align-items: center; gap: .4rem; }
.desk-menu-btn:hover, .desk-menu-btn.show { background: var(--bs-tertiary-bg); }
.desk-menu-btn .dev-dot { width: 10px; height: 10px; min-width: 10px; min-height: 10px; flex: 0 0 10px; border-radius: 50%; display: inline-block; }
.desk-zoom { min-width: 230px; white-space: nowrap; } .desk-zoom .btn { padding: .15rem .45rem; line-height: 1.2; } .desk-zoom-val { min-width: 58px; font-variant-numeric: tabular-nums; }
.desk-menu-btn .dev-pulse::after { inset: -4px; border-width: 2px; animation: devpulse 1.8s ease-out infinite !important; } /* always animate, also when Windows animation effects are off */
@media (max-width: 575px) { .desk-bar { margin-right: .4rem; padding-right: .4rem; } }

/* ---------- Phone: app-style layout (v1.19.5) ---------- */
.m-tabbar, .m-fab { display: none; }
@media (max-width: 767.98px) {
  body.app-body { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
  .m-tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1035; height: calc(62px + env(safe-area-inset-bottom));
    padding: 0 6px env(safe-area-inset-bottom); align-items: stretch; justify-content: space-around;
    background: #fff; backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-top: 1px solid var(--line); box-shadow: 0 -6px 24px rgba(16,24,40,.06); }
  .m-tab { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; position: relative;
    color: var(--muted); text-decoration: none; font-size: .68rem; font-weight: 500; border: 0; background: none; padding: 6px 0 4px; -webkit-tap-highlight-color: transparent; }
  .m-tab i { font-size: 1.32rem; line-height: 1; }
  .m-tab.active { color: var(--brand); font-weight: 600; }
  .m-tab:active { transform: scale(.94); }
  .m-badge { position: absolute; top: 4px; left: calc(50% + 6px); min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: #dc3545; color: #fff;
    font-size: .62rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
  .m-fab { display: flex; flex: 0 0 auto; align-self: flex-start; margin-top: -22px; width: 58px; height: 58px; border-radius: 50%; border: 4px solid #fff;
    background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; align-items: center; justify-content: center; font-size: 1.6rem;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--brand) 40%, transparent); -webkit-tap-highlight-color: transparent; }
  .m-fab:active { transform: scale(.93); }
  .sidebar-toggle { display: none !important; }
  .topbar { height: 54px; padding: 0 14px; padding-top: env(safe-area-inset-top); }
  .topbar .fw-semibold { font-size: 1.02rem; }
  .content { padding: 14px 12px 18px; }
  .page-head { gap: 8px; margin-bottom: 12px; }
  .page-head h1 { font-size: 1.18rem; }
  .page-head .actions { margin-left: 0; width: 100%; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
  .page-head .actions::-webkit-scrollbar { display: none; }
  .page-head .actions > * { flex: 0 0 auto; }
  .card { border-radius: 16px; }
  .card.stat, .stat { padding: 14px; gap: 10px; }
  .stat .num { font-size: 1.25rem; }
  .stat .icon { width: 38px; height: 38px; flex-basis: 38px; font-size: 1.1rem; }
  .table { font-size: .88rem; }
  .form-control, .form-select { font-size: 16px; } /* no zoom-in on iPhone when typing */
  .btn { min-height: 38px; }
  .btn-sm { min-height: 32px; }
  .dropdown-menu { max-width: calc(100vw - 24px); }
  .sidebar { z-index: 1050; }
  .sidebar-backdrop { z-index: 1049; }
  .policy-bar, .act-as-bar { font-size: .78rem; }
}
.m-sheet { border-radius: 22px 22px 0 0; height: auto !important; max-height: calc(85vh / var(--zoom, 1)); padding-bottom: env(safe-area-inset-bottom); }
.m-sheet-handle { width: 40px; height: 5px; border-radius: 3px; background: var(--line); margin: 8px auto 0; }
.m-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.m-action { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px; border-radius: 14px; text-decoration: none; color: var(--bs-body-color);
  background: var(--bs-tertiary-bg); text-align: center; font-size: .74rem; line-height: 1.2; }
.m-action i { font-size: 1.35rem; color: var(--brand); width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--brand) 10%, transparent); }
.m-action:active { transform: scale(.96); }
@media print { .m-tabbar, .m-fab { display: none !important; } }
@media (max-width: 767.98px) {
  .nav-tabs, .nav-pills { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .nav-tabs::-webkit-scrollbar, .nav-pills::-webkit-scrollbar { display: none; }
  .nav-tabs .nav-link, .nav-pills .nav-link { white-space: nowrap; }
}
@media (max-width: 767.98px) {
  [data-bs-theme=dark] .m-tabbar { background: #0f172a; }
  [data-bs-theme=dark] .m-fab { border-color: #0f172a; }
  .page-head .actions .btn { white-space: nowrap; }
}
@media (max-width: 991.98px) {
  body:has(.sidebar.open) .m-tabbar { display: none; }
  .sidebar.open { background: #fff; padding-bottom: env(safe-area-inset-bottom); }
  [data-bs-theme=dark] .sidebar.open { background: #0f172a; }
}
.m-sheet-label { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 2px 0 8px; }
.m-sheet .offcanvas-body { overflow-y: auto; }

/* v1.23.3: an X on every pop-up: the phone / small-window menu drawer, our own confirm / alert dialogs */
.sidebar-close { display: none; position: absolute; top: 14px; right: 12px; z-index: 2; background-color: var(--bs-tertiary-bg); border-radius: 50%; padding: .55rem; opacity: .8; }
@media (max-width: 991.98px) { .sidebar.open .sidebar-close { display: block; } .sidebar { position: fixed; } .sidebar.open .sidebar-brand { padding-right: 52px; } }
.br-dialog .modal-content { border-radius: 16px; }
.br-dialog-msg { white-space: pre-line; }
.br-zoom-note { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); background: rgba(15,23,42,.88); color: #fff; padding: .35rem .9rem; border-radius: 999px; font-size: .9rem; z-index: 2100; opacity: 0; transition: opacity .2s; pointer-events: none; }
.br-zoom-note.show { opacity: 1; }

/* v1.24.1: document viewer pop-up and document lists */
.doc-viewer { height: min(92vh, 1000px); }
@media (max-width: 767.98px) { .modal-fullscreen-md-down .doc-viewer { height: 100%; } }
.doc-viewer-body { background: #1f2937; display: flex; }
.doc-viewer-stage { flex: 1; display: flex; align-items: center; justify-content: center; overflow: auto; }
.doc-viewer-frame { width: 100%; height: 100%; border: 0; background: #fff; }
.doc-viewer-img { max-width: 100%; max-height: 100%; object-fit: contain; }
.doc-viewer-wait { color: #cbd5e1; padding: 2rem; }
.doc-list .doc-item { display: flex; align-items: center; gap: .75rem; padding: .6rem 1rem; border-bottom: 1px solid var(--line); }
.doc-list .doc-item:last-child { border-bottom: 0; }
.doc-ic { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; flex: 0 0 40px; background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); }
.doc-ic.pdf { background: #fdecec; color: #b91c1c; } .doc-ic.img { background: #e8f6ed; color: #15803d; } .doc-ic.word { background: #e7effd; color: #1d4ed8; } .doc-ic.excel { background: #e6f5ec; color: #047857; }
[data-bs-theme=dark] .doc-ic.pdf { background: #3a1a1a; } [data-bs-theme=dark] .doc-ic.img { background: #0f2e1c; } [data-bs-theme=dark] .doc-ic.word { background: #15233f; } [data-bs-theme=dark] .doc-ic.excel { background: #0f2e22; }
.doc-item .doc-title { font-weight: 600; } .doc-item .doc-meta { font-size: .78rem; color: var(--bs-secondary-color); }
.doc-item .doc-thumb { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; flex: 0 0 40px; border: 1px solid var(--line); }
.doc-row { cursor: pointer; } .doc-row:hover { background: var(--bs-tertiary-bg); } .doc-row:focus-visible { outline: 2px solid #bcd0ff; outline-offset: -2px; }
.doc-edit { padding: .5rem 1rem .75rem; background: var(--bs-tertiary-bg); border-bottom: 1px solid var(--line); }
#docViewer.doc-viewer-full .modal-dialog { max-width: none; width: 100vw; height: 100vh; margin: 0; }
#docViewer.doc-viewer-full .doc-viewer { height: 100vh; border-radius: 0; }
.ph-toggle i { transition: transform .2s; } .ph-toggle[aria-expanded="true"] i { transform: rotate(180deg); }
/* payslip signatures */
.ps-sign div { position: relative; padding-top: 6px; }
.ps-sign .ps-sig-img { display: block; height: 44px; max-width: 170px; object-fit: contain; margin: -52px auto 8px; }
.ps-sign .ps-sig-text { display: block; margin: -26px auto 10px; font-size: .74rem; color: #15803d; font-weight: 600; }
.ps-sign small { display: block; color: #1f2937; font-weight: 600; font-size: .74rem; margin-top: 2px; }

/* letter editor & preview: looks like the page */
.rich-letter { min-height: 520px; max-height: none; padding: 28px 36px; font-family: Helvetica, Arial, sans-serif; font-size: 15px; line-height: 1.5; color: #1f2937; background: #fff; }
.rich-letter table, .letter-preview table { border-collapse: collapse; width: 100%; margin: 8px 0 12px; }
.rich-letter td, .rich-letter th, .letter-preview td, .letter-preview th { border: 1px solid #333; padding: 5px 8px; vertical-align: top; }
.rich-letter td:first-child, .letter-preview td:first-child { background: #f6f8fb; width: 36%; }
.rich-letter h2, .letter-preview h2, .rich-letter h3, .letter-preview h3 { color: #163366; font-weight: 700; margin: 14px 0 6px; } .rich-letter h3, .letter-preview h3 { font-size: 1.05rem; } .rich-letter h2, .letter-preview h2 { font-size: 1.2rem; }
.rich-letter hr.page-break, .letter-preview hr.page-break, .rich-letter hr.annex, .letter-preview hr.annex { border: 0; border-top: 2px dashed #9aa3b5; margin: 18px 0; position: relative; }
.rich-letter hr.page-break::after, .letter-preview hr.page-break::after { content: "page break"; position: absolute; right: 0; top: -10px; font-size: 11px; color: #9aa3b5; background: #fff; padding: 0 6px; }
.rich-letter hr.annex::after, .letter-preview hr.annex::after { content: "annexure — printed after the signatures"; position: absolute; right: 0; top: -10px; font-size: 11px; color: #9aa3b5; background: #fff; padding: 0 6px; }
.rich-ph { width: auto; max-width: 260px; margin-left: auto; }
.letter-preview { background: #fff; color: #1f2937; font-family: Helvetica, Arial, sans-serif; font-size: 14.5px; line-height: 1.5; padding: 34px 40px; border: 1px solid var(--line); border-radius: 8px; max-width: 820px; margin: 0 auto; box-shadow: 0 10px 40px rgba(10,20,40,.12); }
.letter-preview .lp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding-bottom: 12px; border-bottom: 3px solid #02BDBE; margin-bottom: 22px; }
.letter-preview .lp-head img { height: 58px; } .letter-preview .lp-co { text-align: right; font-size: 12px; color: #6b7280; } .letter-preview .lp-co strong { display: block; color: #163366; font-size: 16px; }
.letter-preview .lp-meta { display: flex; justify-content: space-between; color: #6b7280; font-size: 13px; margin-bottom: 14px; }
.letter-preview .lp-subject { color: #163366; font-weight: 700; font-size: 1.05rem; margin-bottom: 12px; }
.letter-preview .lp-sign { display: flex; justify-content: space-between; gap: 30px; margin-top: 44px; } .letter-preview .lp-sign > div { width: 45%; } .letter-preview .lp-sign img { height: 46px; display: block; margin-bottom: 6px; }
.letter-preview .lp-sign .lp-line { border-top: 1px solid #9aa3b5; padding-top: 6px; font-size: 13px; color: #6b7280; } .letter-preview .lp-sign .lp-line strong { display: block; color: #1f2937; font-size: 14px; }
.letter-preview .lp-foot { margin-top: 30px; padding-top: 8px; border-top: 1px solid #e1e6ee; color: #9aa3b5; font-size: 11px; }
[data-bs-theme=dark] .rich-letter, [data-bs-theme=dark] .letter-preview { background: #fff; color: #1f2937; }

/* ---------- Mailbox ---------- */
.mail-folders .list-group-item{padding:.45rem .8rem;font-size:.92rem}
.mail-folders .list-group-item.active{background:var(--brand);border-color:var(--brand);color:#fff}
.mail-list{display:flex;flex-direction:column}
.mail-row{display:flex;align-items:center;gap:.6rem;padding:.55rem .9rem;border-top:1px solid var(--line,#e5e7eb);color:inherit;text-decoration:none;font-size:.92rem;min-width:0}
.mail-row:hover{background:var(--surface-2);color:inherit}
.mail-row.unread{background:var(--tint)}
.mail-row.unread .mail-who,.mail-row.unread .mail-subj .s{font-weight:600}
.mail-row .mail-star{width:1.2rem;text-align:center;flex:none}
.mail-row .mail-who{width:180px;flex:none}
.mail-row .mail-subj{flex:1;min-width:0}
.mail-row .mail-subj .p{color:var(--muted)}
.mail-row .mail-tags{flex:none;display:flex;gap:.25rem;max-width:40%;overflow:hidden}
.mail-row .mail-tags .badge{font-weight:500;white-space:nowrap;max-width:160px;overflow:hidden;text-overflow:ellipsis}
.mail-row .mail-clip{width:1rem;flex:none;color:var(--muted)}
.mail-row .mail-date{width:84px;text-align:right;flex:none;color:var(--muted);font-size:.82rem}
@media (max-width:767px){.mail-row{flex-wrap:wrap}.mail-row .mail-who{width:auto;flex:1}.mail-row .mail-subj{flex-basis:100%;order:5}.mail-row .mail-tags{order:6;max-width:100%}}
.mail-avatar{width:40px;height:40px;border-radius:50%;background:color-mix(in srgb, var(--brand) 12%, var(--tint));color:var(--brand-ink);display:flex;align-items:center;justify-content:center;font-weight:700;flex:none}
.mail-atts{display:flex;flex-wrap:wrap;gap:.4rem}
.mail-att{display:inline-flex;align-items:center;gap:.25rem;border:1px solid var(--line,#e5e7eb);border-radius:999px;padding:.2rem .7rem;font-size:.85rem;text-decoration:none;color:inherit;background:var(--surface-2)}
.mail-att:hover{background:var(--surface-2)}
.mail-body{overflow-x:auto;word-wrap:break-word;font-size:.95rem;line-height:1.5}
.mail-body img{max-width:100%;height:auto}
.mail-body table{max-width:100%}
.mail-body blockquote{border-left:3px solid var(--line);margin:.5rem 0;padding-left:.75rem;color:var(--muted)}
.mail-plain{white-space:pre-wrap;font-family:inherit}
.sidebar-collapsed .mail-row .mail-who{width:200px}
.rich-body img{max-width:100%;height:auto}
.rich-body table td,.rich-body table th{vertical-align:top}
.mail-sec-head{display:flex;align-items:center;gap:.4rem;width:100%;border:0;background:var(--surface-2);color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.03em;padding:.4rem .8rem;border-bottom:1px solid var(--line);cursor:pointer;text-align:left}
.mail-sec-head .bi-chevron-down{transition:transform .15s}
.mail-sec.collapsed .mail-sec-head .bi-chevron-down{transform:rotate(-90deg)}
.mail-sec.collapsed .mail-sec-body{display:none}
.mail-sec + .mail-sec .mail-sec-head{border-top:1px solid var(--line)}
.mail-bulk{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;padding:.45rem .9rem;background:color-mix(in srgb, #f6c060 18%, var(--tint));border-top:1px solid var(--line)}
.mail-row .mail-check{flex:none;width:1.1rem;display:flex;align-items:center}
.mail-row .mail-check input{cursor:pointer}
/* mailbox layout: folder column · list · reading pane */
.mail-layout{display:flex;gap:1rem;align-items:flex-start}
.mail-side{width:220px;flex:none}
.mail-main{flex:1;min-width:0}
.mail-pane{flex:1.4;min-width:0}
.mail-layout.with-pane .mail-main{flex:1;max-width:46%}
.mail-layout.no-side .mail-side{display:none}
@media (max-width:991px){.mail-layout{flex-wrap:wrap}.mail-side{width:100%}.mail-layout.with-pane .mail-main{max-width:100%;flex-basis:100%}.mail-pane{flex-basis:100%}}
.mail-row{position:relative}
.mail-row .mail-link{display:flex;align-items:center;gap:.6rem;flex:1;min-width:0;color:inherit;text-decoration:none}
.mail-row .mail-link:hover,.mail-row a{text-decoration:none}
.mail-row.current{background:color-mix(in srgb, var(--brand) 10%, var(--tint));box-shadow:inset 3px 0 0 var(--brand,#163366)}
.mail-row .mail-check{visibility:hidden}
.mail-row:hover .mail-check,.mail-list.selecting .mail-check,.mail-row .mail-check input:checked{visibility:visible}
.mail-row .mail-hover{display:none;position:absolute;right:.6rem;top:50%;transform:translateY(-50%);background:var(--surface-2);padding-left:.4rem;gap:.1rem}
.mail-row:hover .mail-hover{display:inline-flex}
.mail-row:hover .mail-date,.mail-row:hover .mail-clip{visibility:hidden}
.mail-ico{border:0;background:transparent;color:var(--muted);padding:.15rem .35rem;border-radius:6px;line-height:1}
.mail-ico:hover{background:color-mix(in srgb, var(--brand) 14%, var(--tint));color:var(--brand-ink)}
.mail-tag{display:inline-flex;align-items:center;gap:.25rem;border:1px solid var(--line);background:var(--tint);border-radius:999px;padding:.05rem .5rem;font-size:.75rem;white-space:nowrap;max-width:170px;overflow:hidden;text-overflow:ellipsis}
.mail-tag-x{display:none;border:0;background:transparent;color:#9aa3b2;padding:0 0 0 .15rem;line-height:1;font-size:.95rem}
.mail-tag:hover .mail-tag-x{display:inline}
.mail-tag-x:hover{color:#dc2626}
.mail-list.compact .mail-row{flex-wrap:wrap;align-items:flex-start;padding:.5rem .8rem}
.mail-list.compact .mail-row .mail-link{flex:1 1 0;min-width:0;flex-wrap:wrap;row-gap:.15rem}
.mail-list.compact .mail-row .mail-who{flex:1 1 0;width:auto;min-width:0}
.mail-list.compact .mail-row .mail-subj{flex:1 1 100%;padding-left:1.8rem}
.mail-list.compact .mail-row .mail-tags{flex-basis:100%;order:6;max-width:100%;padding-left:3rem;margin-top:.1rem}
.mail-list.compact .mail-row .mail-date{width:auto}
.mail-list.compact .mail-row .mail-check{margin-top:.15rem}
.mail-subject{font-size:1.15rem;font-weight:600;margin:0;line-height:1.3;word-break:break-word}
@media print{.sidebar,.topbar,.page-head,.mail-side,.mail-main,.mail-reply-bar,.mail-read .dropdown,.mail-read .btn{display:none!important}.mail-pane{width:100%}}

/* mailbox: email content is designed for a light background – shown on a soft white panel in dark mode */
[data-bs-theme=dark] .mail-body{background:#f3f5f9;color:#1f2937;border-radius:10px;padding:14px 16px}
[data-bs-theme=dark] .mail-plain{color:#1f2937}
.mail-row .mail-link,.mail-row .mail-link:hover,.mail-folders a,.mail-folders a:hover,.mail-read a.mail-att,.mail-sec-head a{text-decoration:none!important}
.content .mail-layout a:not(.btn):hover{text-decoration:none}
.mail-row .mail-link{color:var(--ink)}
[data-bs-theme=dark] .mail-row .mail-link,[data-bs-theme=dark] body:not(.site-body) .mail-row a.mail-link{color:var(--ink)}
[data-bs-theme=dark] .mail-row.unread .mail-link{color:#fff}
.mail-tag{color:var(--ink)}
/* our own email layout inside the reader */
.mail-body .em-wrap{max-width:640px;margin:0 auto}
.mail-body .em-card{background:#fff;border-radius:10px;padding:22px 26px;border-top:4px solid #e5e7eb;color:#1f2937}
.mail-body .em-btn{display:inline-block;background:#163366;color:#fff!important;text-decoration:none;padding:9px 18px;border-radius:6px;font-weight:600}
.mail-body .em-btn-ok{background:#16a34a}.mail-body .em-btn-no{background:#dc2626}.mail-body .em-muted{color:#6b7280;font-size:13px}
.mail-body table.em-info td{padding:4px 12px 4px 0;vertical-align:top}.mail-body table.em-info td:first-child{color:#6b7280}
[data-bs-theme=dark] body:not(.site-body) .mail-row a.mail-link{color:var(--ink)!important}
[data-bs-theme=dark] body:not(.site-body) .mail-row.unread a.mail-link{color:#fff!important}
/* signature placeholders in the letter editor */
.rich-letter img.sig, .letter-preview img.sig { display: block; height: 60px; width: auto; margin: 18px 0 4px; }
.rich-letter hr.sig, .letter-preview hr.sig { width: 220px; margin: 0 0 6px; border-top: 1px solid #9aa3b5; opacity: 1; }
.rich-letter .sig-block, .letter-preview .sig-block { margin-top: 22px; }
.rich-letter .sig-block p, .letter-preview .sig-block p { margin: 0; line-height: 1.4; }
.rich-letter table.sign td, .letter-preview table.sign td { background: transparent !important; width: 50%; border: 0; vertical-align: top; padding: 6px 10px 6px 0; }
.rich-letter table.sign, .letter-preview table.sign { border: 0; }
/* light mode: secondary text dark enough to read comfortably */
:root, [data-bs-theme=light] { --bs-secondary-color: var(--muted); --bs-secondary-color-rgb: 74, 84, 104; }
.text-muted, .form-text, .text-secondary { color: var(--muted) !important; }
.small.text-muted, small.text-muted, .text-muted.small { color: var(--muted) !important; }
.table thead th { color: var(--muted); }
::placeholder { color: #8a93a6 !important; opacity: 1; }
.btn-outline-warning { --bs-btn-color: #8a6100; --bs-btn-border-color: #e3b341; --bs-btn-hover-bg: #f6c343; --bs-btn-hover-border-color: #f6c343; --bs-btn-hover-color: #2b2300; }
.btn-light, .btn-outline-secondary { --bs-btn-color: var(--ink); }
.card-header, .page-head .small { color: var(--ink); }
.badge.text-bg-light { color: var(--ink) !important; }
[data-bs-theme=dark] ::placeholder { color: #7f8aa3 !important; }
.mail-tag{--tag:#64748b;border-color:color-mix(in srgb, var(--tag) 45%, transparent);background:color-mix(in srgb, var(--tag) 10%, var(--tint))}
.mail-tag .bi{color:var(--tag)}
/* annual reports */
.apr-steps{display:flex;gap:.5rem;flex-wrap:wrap}
.apr-step{display:flex;align-items:center;gap:.45rem;font-size:.85rem;color:var(--muted);padding:.35rem .7rem;border:1px solid var(--line);border-radius:999px;background:var(--surface-2)}
.apr-step .n{width:22px;height:22px;border-radius:50%;background:var(--line);display:inline-flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700}
.apr-step.done{color:var(--green-ink)}.apr-step.done .n{background:var(--green-ink);color:#fff}
.apr-step.now{color:var(--brand-ink);border-color:var(--brand-ink);font-weight:600}.apr-step.now .n{background:var(--brand);color:#fff}
.apr-kpi input,.apr-kpi select{min-width:60px}
/* hover: a clear blue tint in light mode (dark mode keeps its own) */
:root, [data-bs-theme=light] { --hover: color-mix(in srgb, var(--brand) 14%, #fff); --hover-ink: var(--brand); }
[data-bs-theme=dark] { --hover: rgba(255,255,255,.07); --hover-ink: var(--ink); }
.mail-row:hover, .list-group-item-action:hover, .list-group-item-action:focus, .table-hover > tbody > tr:hover > *, .dropdown-item:hover, .dropdown-item:focus, .mail-folders .list-group-item-action:hover { background-color: var(--hover) !important; color: var(--hover-ink); }
.sidebar-nav .nav-link:hover:not(.active) { background: var(--hover); color: var(--hover-ink); }
.mail-row .mail-hover { background: var(--hover); }
.mail-row:hover .mail-link { color: var(--hover-ink); }
[data-bs-theme=dark] .mail-row:hover .mail-link { color: #fff; }
/* tabs & pills: hover in the brand's dark blue in light mode (dark mode unchanged) */
:root:not([data-bs-theme=dark]) .nav-tabs .nav-link:hover, :root:not([data-bs-theme=dark]) .nav-tabs .nav-link:focus,
:root:not([data-bs-theme=dark]) .nav-pills .nav-link:not(.active):hover, :root:not([data-bs-theme=dark]) .nav-underline .nav-link:hover {
  color: var(--brand) !important; background-color: var(--hover); border-color: color-mix(in srgb, var(--brand) 25%, transparent) color-mix(in srgb, var(--brand) 25%, transparent) transparent;
}
:root:not([data-bs-theme=dark]) .nav-tabs .nav-link.active { color: var(--brand); font-weight: 600; }
:root:not([data-bs-theme=dark]) { --bs-link-hover-color: var(--brand); --bs-link-hover-color-rgb: 22, 51, 102; }
/* collapsible menu sections */
.nav-section-toggle{display:flex;align-items:center;cursor:pointer;user-select:none}
.nav-section-toggle .bi{margin-left:auto;font-size:.7rem;transition:transform .15s;opacity:.7}
.nav-section-toggle.collapsed .bi{transform:rotate(-90deg)}
.nav-section-toggle:hover{color:var(--ink)}
.nav-group.collapsed{display:none}
.sidebar-collapsed .nav-group.collapsed{display:block}
.page-back{line-height:1;padding:.25rem .5rem}
/* collapsible cards on the employee profile */
.card-toggle{border:0;background:transparent;color:var(--muted);padding:0 .25rem;margin-left:.35rem;line-height:1}
.card-toggle .bi{transition:transform .15s;display:inline-block}
.card.is-collapsed .card-toggle .bi{transform:rotate(-90deg)}
.card.is-collapsed > :not(.card-header){display:none!important}
.kpi-line.kpi-off input{text-decoration:line-through;opacity:.55}
#kpis .kpi-line{border:1px solid var(--line);border-radius:8px;padding:6px 4px 4px;margin:0 0 6px!important}
/* favourites in the left menu */
.nav-item-wrap{position:relative}
.nav-item-wrap .nav-link{padding-right:30px}
.nav-star{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:var(--muted);font-size:.78rem;padding:2px 4px;line-height:1;opacity:0;transition:opacity .12s;border-radius:4px}
.nav-item-wrap:hover .nav-star,.nav-star.on,.nav-star:focus{opacity:1}
.nav-star.on,.nav-star.fixed{color:#e0a800}
.nav-star.fixed{opacity:0;cursor:default}
.nav-item-wrap:hover .nav-star.fixed{opacity:.8}
.nav-star:hover{background:var(--hover)}
.nav-item-wrap .nav-link.active ~ .nav-star{color:#fff}
.nav-item-wrap .nav-link.active ~ .nav-star.on,.nav-item-wrap .nav-link.active ~ .nav-star.fixed{color:#ffd54f}
.nav-item-wrap:has(.badge) .nav-link{padding-right:30px}
.nav-fav-head{color:var(--brand-ink)}
.sidebar-collapsed .nav-star{display:none}
.fav-sort li{cursor:grab}
.fav-sort li.dragging{opacity:.5}
.dropdown-menu.br-floating{z-index:1080}

/* ---- one premium "selected" look everywhere, matching the main menu ---- */
:root { --sel-bg: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 70%, var(--brand-2))); --sel-shadow: 0 4px 12px color-mix(in srgb, var(--brand) 28%, transparent); }
.list-group-item.active, .list-group-item-action.active, .mail-folders .list-group-item.active,
.dropdown-item.active, .dropdown-item:active,
.nav-pills .nav-link.active, .nav-pills .show > .nav-link,
.active > .page-link, .page-link.active,
.btn-check:checked + .btn-outline-primary, .btn-check:checked + .btn-outline-secondary {
  background: var(--sel-bg); border-color: transparent; color: #fff; box-shadow: var(--sel-shadow);
}
.list-group-item.active { z-index: 2; border-radius: .5rem; margin: 1px 4px; width: auto; }
.list-group-flush > .list-group-item.active, .list-group-item.active + .list-group-item { border-top-width: 0; }
.list-group-item.active .text-muted, .list-group-item.active .small, .dropdown-item.active .text-muted { color: rgba(255,255,255,.78) !important; }
.list-group-item.active i, .nav-pills .nav-link.active i { color: #bff6f6; }
.list-group-item.active .badge { background: rgba(255,255,255,.22) !important; color: #fff !important; }
.dropdown-item { border-radius: .4rem; }
.dropdown-menu { padding: .3rem; }
.mail-row.current { background: color-mix(in srgb, var(--brand) 9%, var(--tint)); box-shadow: inset 3px 0 0 var(--brand-2), inset 0 0 0 1px color-mix(in srgb, var(--brand) 14%, transparent); }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }

/* ---- Recruitment ---- */
.rec-steps { display: grid; gap: 8px; }
.rec-steps div { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); font-weight: 500; }
.rec-steps div i { color: var(--brand-2); font-size: 1.1rem; }
.rec-board { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; align-items: flex-start; }
.rec-col { flex: 1 1 0; min-width: 148px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; display: flex; flex-direction: column; max-height: calc(100vh - 250px); min-height: 160px; transition: box-shadow .15s, border-color .15s; }
.rec-col.over { border-color: var(--brand-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-2) 25%, transparent); }
.rec-col-rej { opacity: .9; }
.rec-col-head { display: flex; align-items: center; gap: 6px; padding: 9px 10px; font-weight: 600; font-size: .82rem; line-height: 1.2; border-bottom: 1px solid var(--line); }
.rec-col-head i { color: var(--brand-2); }
.rec-count { background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--ink); border-radius: 20px; padding: 0 8px; font-size: .75rem; font-weight: 600; }
.rec-col-body { padding: 8px; overflow-y: auto; display: grid; gap: 8px; align-content: start; flex: 1; }
.rec-card { position: relative; background: var(--surface-solid); border: 1px solid var(--line); border-radius: 10px; padding: 9px 10px; cursor: grab; box-shadow: 0 1px 2px rgba(18,38,80,.05); transition: transform .12s, box-shadow .12s; }
.rec-card:hover { box-shadow: 0 6px 16px rgba(18,38,80,.10); transform: translateY(-1px); }
.rec-card.dragging { opacity: .45; }
.rec-card.unseen { box-shadow: inset 3px 0 0 var(--brand-2), 0 1px 2px rgba(18,38,80,.05); }
.rec-card .rec-sel { position: relative; z-index: 2; }
.rec-name { font-weight: 600; color: var(--ink); text-decoration: none; line-height: 1.25; }
.rec-meta { font-size: .76rem; color: var(--muted); margin-top: 4px; line-height: 1.5; }
.rec-meta .bi-star-fill { font-size: .65rem; }
.rec-empty { font-size: .78rem; color: var(--muted); text-align: center; padding: 18px 6px; border: 1px dashed var(--line); border-radius: 10px; }
.rec-bulk { position: sticky; top: 70px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 12px; margin-bottom: 10px; border-radius: 10px; background: var(--surface-solid); border: 1px solid var(--line); box-shadow: var(--glass-shadow); font-size: .9rem; }
.rec-bulk.d-none { display: none !important; }
.rec-pipe { display: flex; flex-wrap: wrap; gap: 4px; }
.rec-pipe span { display: inline-flex; align-items: center; gap: 3px; font-size: .75rem; padding: 1px 7px; border-radius: 20px; background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }
.rec-pipe span.on { color: var(--ink); background: color-mix(in srgb, var(--brand-2) 14%, transparent); border-color: color-mix(in srgb, var(--brand-2) 35%, transparent); }
.rec-pipe span.on.k-hired { background: color-mix(in srgb, var(--brand-3) 18%, transparent); }
.rec-pipe span.on.k-rejected { background: color-mix(in srgb, #dc3545 12%, transparent); border-color: color-mix(in srgb, #dc3545 30%, transparent); }
.rec-stepper { display: flex; flex-wrap: wrap; gap: 6px; }
.rec-step { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 20px; font-size: .85rem; background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); }
.rec-step.done { color: var(--ink); background: color-mix(in srgb, var(--brand-3) 12%, transparent); border-color: color-mix(in srgb, var(--brand-3) 30%, transparent); }
.rec-step.current { background: var(--sel-bg); color: #fff; border-color: transparent; box-shadow: var(--sel-shadow); }
.rec-step.rejected.current { background: linear-gradient(135deg, #b42318, #e5484d); }
.rec-stars { display: inline-flex; flex-direction: row-reverse; gap: 2px; font-size: 1.25rem; }
.rec-stars input { display: none; }
.rec-stars label { color: color-mix(in srgb, var(--muted) 35%, transparent); cursor: pointer; }
.rec-stars input:checked ~ label, .rec-stars label:hover, .rec-stars label:hover ~ label { color: #f5b301; }
.rec-timeline { list-style: none; padding: 0; margin: 0; }
.rec-timeline li { position: relative; padding: 0 0 12px 20px; border-left: 2px solid var(--line); margin-left: 6px; }
.rec-timeline li::before { content: ""; position: absolute; left: -6px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--surface-solid); border: 2px solid var(--brand-2); }
.rec-timeline li.k-note::before { border-color: var(--muted); }
.rec-timeline li.k-email::before { border-color: var(--brand-3); }
.rec-timeline li:last-child { border-left-color: transparent; }
.rec-cover { max-height: 220px; overflow: auto; background: var(--surface-2); }
/* public careers page */
.auth-wrap.xwide { max-width: 860px; }
.career-job { display: block; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: var(--ink); background: var(--surface-solid); transition: box-shadow .15s, transform .15s; }
.career-job:hover { box-shadow: 0 8px 22px rgba(18,38,80,.10); transform: translateY(-1px); color: var(--ink); }
.career-job .t { font-weight: 700; font-size: 1.05rem; }
.career-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .85rem; color: var(--muted); }
.career-desc { line-height: 1.65; }
.career-desc table { width: 100%; border-collapse: collapse; margin: 8px 0; } .career-desc td, .career-desc th { border: 1px solid var(--line); padding: 6px 8px; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.career-desc h1, .career-desc h2, .career-desc h3 { font-size: 1.08rem; font-weight: 700; margin: 1.1rem 0 .4rem; }
[data-doc-open] { cursor: pointer; }
.doc-tr:hover > td, li.doc-tr:hover { background-color: var(--hover) !important; }
.rec-card { min-width: 0; overflow-wrap: anywhere; } .rec-col-body { grid-template-columns: minmax(0, 1fr); }
/* remote clock */
.web-clock .wc-time { font-size: 1.9rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1.1; }
.web-clock .wc-btn { min-width: 128px; font-weight: 600; }
.wc-line { display: flex; flex-wrap: wrap; gap: 6px; }
.wc-p { display: inline-flex; flex-direction: column; padding: 6px 12px; border-radius: 10px; font-size: .75rem; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); border-left: 3px solid var(--brand-2); }
.wc-p b { color: var(--ink); font-size: .9rem; }
.wc-p.s1 { border-left-color: #dc3545; } .wc-p.s2 { border-left-color: #f59e0b; } .wc-p.s3 { border-left-color: #0dcaf0; } .wc-p.s0 { border-left-color: #22b573; }
.dot-st { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: 0 0 9px; }

/* ID cards */
.idc-img{width:150px;max-width:44vw;aspect-ratio:545.42/856;border-radius:10px;box-shadow:0 6px 18px rgba(16,24,40,.14),0 0 0 1px rgba(16,24,40,.06);background:#f3f4f6;display:block}
.idc-previews a{display:block;border-radius:10px;transition:transform .15s}
.idc-previews a:hover{transform:translateY(-2px)}
.idc-tpl{display:block;cursor:pointer;border:1px solid var(--line,#e5e7eb);border-radius:14px;padding:10px;height:100%;transition:border-color .15s,box-shadow .15s}
.idc-tpl:hover{border-color:var(--bs-primary)}
.idc-tpl.on{border-color:var(--bs-primary);box-shadow:0 0 0 3px rgba(var(--bs-primary-rgb),.15)}
.idc-tpl-pics{display:flex;gap:6px;justify-content:center}
.idc-tpl-pics img{width:calc(50% - 3px);aspect-ratio:545.42/856;border-radius:6px;box-shadow:0 2px 8px rgba(16,24,40,.12);background:#f3f4f6}
.nav-flag{background:#FFF1D6;color:#8A5300!important;font-weight:600;font-size:.62rem;padding:.25em .55em;letter-spacing:.01em;flex:0 0 auto}
.nav-flag i{color:#D97706!important;font-size:.7rem}
.nav-link:has(.nav-flag) > span:not(.badge){white-space:nowrap}
#manage-users .mu-list{max-height:380px;overflow:auto;padding-bottom:.5rem}
#manage-users .mu-row{cursor:pointer}#manage-users .mu-row:hover{background:var(--bs-tertiary-bg,#f6f7f9)}

/* workspace finder (brithr.com/login) */
.ws-input .form-control { font-weight: 600; text-align: right; padding-right: .35rem; }
.ws-input .input-group-text { background: var(--bs-body-bg); color: var(--bs-secondary-color); padding-left: .1rem; }
.ws-input:focus-within .input-group-text { border-color: #86b7fe; }
.ws-chip { border: 1px solid var(--bs-border-color); border-radius: 12px; padding: 10px 6px 10px 12px; transition: border-color .15s, box-shadow .15s; }
.ws-chip:hover { border-color: var(--bs-primary); box-shadow: 0 2px 10px rgba(22, 51, 102, .08); }
.ws-logo { width: 38px; height: 38px; border-radius: 9px; object-fit: contain; background: #fff; border: 1px solid var(--bs-border-color); flex: none; }
.ws-initial { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; background: linear-gradient(135deg, #163366, #02BDBE); border: 0; }
.ws-x { padding: 4px 8px; border-radius: 6px; }
.ws-x:hover { background: var(--bs-tertiary-bg); }
.ws-big-icon { width: 64px; height: 64px; border-radius: 18px; display: inline-flex; align-items: center; justify-content: center; font-size: 30px; color: #fff; background: linear-gradient(135deg, #163366, #02BDBE); }
.sub-check.ok { color: var(--bs-success); } .sub-check.bad { color: var(--bs-danger); }