/* INPROX corporate HRMS theme — plum/lavender palette based on the supplied X logo.
   Only presentation rules are changed. No payroll, attendance or biometric processing logic. */
:root {
  --navy:#311937;
  --navy-2:#47254f;
  --blue:#65285f;
  --blue-soft:#f7eef7;
  --gold:#bc8ec0;
  --bg:#f8f6f9;
  --card:#ffffff;
  --text:#2f2431;
  --muted:#776b7d;
  --line:#e9e0eb;
  --shadow:0 10px 34px rgba(67,29,65,.055);
  --radius:15px;
}
html {font-size:15px}
body {background:var(--bg); color:var(--text)}
.sidebar {
  background:linear-gradient(165deg,#26152d 0%, #351939 52%, #49234c 100%);
  box-shadow:5px 0 24px rgba(41,22,44,.12);
}
.sidebar-brand {height:82px;border-bottom-color:rgba(232,202,232,.13)}
.sidebar-brand strong {color:#fff;font-size:17px;letter-spacing:.065em}
.sidebar-brand span {color:#d4b9d4;font-size:11px}
.brand-mark {background:#f9effa!important;border:1px solid rgba(255,255,255,.28);padding:7px;overflow:hidden;box-shadow:none;flex:0 0 auto}
.brand-mark img {max-width:100%;max-height:100%;display:block;object-fit:contain}
.sidebar .nav-label {color:#ba9cbd;font-weight:800;font-size:10px}
.sidebar .nav-link {color:#e4d6e7;font-size:12px;padding:11px 12px}
.sidebar .nav-link .nav-icon {color:#c8afcb}
.sidebar .nav-link:hover {background:rgba(228,202,234,.1);color:#fff}
.sidebar .nav-link.active {background:linear-gradient(90deg,rgba(171,102,170,.27),rgba(152,96,151,.12));box-shadow:inset 3px 0 #d9afd7;color:#fff}
.sidebar .nav-link.active .nav-icon {color:#f3d8f2}
.sidebar-footer {border-color:rgba(232,202,232,.15);color:#d5bed8}
.sidebar-footer small {color:#aa89ad}
.topbar {background:rgba(255,255,255,.94);border-bottom-color:#ebdfed}
.page-context span {color:#776a7a}
.content {max-width:1650px;padding:29px 32px 54px}
.page-header h1 {font-size:26px;font-weight:800;letter-spacing:-.055em}
.page-header p {color:#807487}
.card {border-color:var(--line);box-shadow:var(--shadow)}
.card-header {border-bottom-color:var(--line)}
.card-header h3 {font-size:15px;letter-spacing:-.02em;color:#37243a}
.card-header p {font-size:11px;color:#897c8a}
.avatar {background:linear-gradient(140deg,#f6e6f5,#e2c6e4);color:#5d2862}
.btn {border-radius:9px;font-size:12px}
.btn-primary {background:#672a67;color:#fff;box-shadow:0 5px 14px rgba(103,42,103,.17)}
.btn-primary:hover {background:#512051}
.btn-secondary {border-color:#e1d1e3;color:#5a2d5c;background:#fff}
.btn-secondary:hover,.btn-ghost:hover {background:#faf2fa;border-color:#c9a9ce}
.btn-ghost {color:#67476b}
.stat-icon {background:#f7ecf7;color:#672a67}
.subnav a.active {color:#682a67;border-color:#682a67}
.subnav a:hover {color:#682a67}
.eyebrow {color:#8c468d}
.badge-warning,.presence-status--pending {color:#87571b;background:#fff0d9}
.badge-success {color:#177450;background:#eaf8f1}
.badge-danger {color:#ad344e;background:#fff0f3}
.table-wrap {scrollbar-color:#d4bdd7 #f9f4fa}
.table-wrap th, th {background:#fbf8fc;color:#8d7a8f}
.table-wrap td, td {border-bottom-color:#f1eaf2}
.table-wrap tbody tr:hover,tbody tr:hover {background:#fcf9fd}
input:focus, select:focus, textarea:focus {outline-color:#86558b}
.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus,.filter-bar input:focus,.filter-bar select:focus,.stack-form input:focus {
  border-color:#9c73a0;box-shadow:0 0 0 3px rgba(124,59,128,.1)
}
.form-grid input,.form-grid select,.form-grid textarea,.stack-form input,.stack-form select,.filter-bar input,.filter-bar select {border-color:#e0d6e3}
.asset-symbol {background:linear-gradient(145deg,#f8edfa,#eed6ef);color:#68326b}
.asset-accessories {background:#fcf5fc;border-color:#ebd8ec}
.asset-record-head strong {color:#412948}
.payroll-pulse {background:linear-gradient(120deg,#3d1f43 0%, #612b60 100%);color:#fff}
.payroll-pulse .eyebrow {color:#e9c7eb}
.payroll-pulse p {color:#ead7eb}
.payroll-pulse .btn-secondary {background:#fff;color:#562556}
.increment-dashboard-alert {border:1px solid #e9d4eb}
/* Login uses the same identity as the app shell. */
.auth-page {background:#faf6fa}
.auth-visual {background:radial-gradient(circle at 110% 0%,rgba(178,123,179,.28),transparent 55%),linear-gradient(145deg,#2a1630,#532455)}
.auth-message h1 {letter-spacing:-.05em}
.auth-message p {color:#e9d7ea}
.auth-brand strong {color:#fff}
.auth-brand span {color:#e0c5e0}
.auth-panel {background:#fffcff}
.auth-visual .brand-mark {background:#fbf3fb}
.brand-wordmark {height:34px;width:auto;max-width:155px;object-fit:contain}
.auth-wordmark-wrap {background:#fff;border-radius:12px;padding:6px 14px;display:inline-flex;align-items:center;justify-content:center}
.auth-wordmark-wrap .brand-wordmark {width:170px;height:auto;max-height:48px}
.mobile-auth-brand .brand-mark {margin-right:4px}

/* Employee presence board */
.command-intro {
  margin-bottom:17px;padding:24px 27px;
  border:1px solid #e8d7ea;border-radius:16px;
  background:radial-gradient(circle at 92% 15%,rgba(211,174,215,.33) 0%,transparent 42%),linear-gradient(110deg,#fff,#fdf8fd);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.command-kicker {font-size:10px;letter-spacing:.16em;font-weight:900;color:#945395}
.command-intro h2 {font-size:25px;line-height:1.15;margin:7px 0 9px;letter-spacing:-.055em;color:#422348}
.command-intro p {font-size:12px;line-height:1.55;max-width:750px;color:#77687c;margin:0}
.live-indicator {display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:8px 12px;color:#296d51;font-size:11px;font-weight:800;background:#eaf8f0}
.live-indicator span {width:7px;height:7px;background:#23a36a;border-radius:50%;box-shadow:0 0 0 4px #cdefdc}
.presence-stats {display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:13px;margin-bottom:14px}
.presence-stat {min-width:0;padding:17px 17px 15px;background:#fff;border:1px solid #ebe1ed;border-radius:13px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.presence-stat:before {content:"";position:absolute;width:4px;top:0;left:0;bottom:0;background:#c0a2c4}
.presence-stat--present:before {background:#26946b}
.presence-stat--half_day:before {background:#d0a040}
.presence-stat--leave:before {background:#9253a4}
.presence-stat--absent:before {background:#d65e72}
.presence-stat--not_marked:before {background:#8791a5}
.presence-stat>span {display:block;font-size:11px;font-weight:800;color:#635069}
.presence-stat strong {display:block;font-size:29px;line-height:1.1;letter-spacing:-.06em;color:#39213e;margin:7px 0 5px}
.presence-stat small {display:block;color:#94859b;font-size:10px;line-height:1.35}
.dashboard-insights {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;border:1px solid #ebe1ed;border-radius:12px;overflow:hidden;background:#ebe1ed;margin-bottom:20px}
.insight-cell {background:#fff;padding:13px 17px;display:flex;align-items:center;gap:8px;min-width:0}
.insight-cell strong {font-size:14px;color:#49334d}
.insight-cell>span:last-child {font-size:11px;color:#807184;min-width:0}
.insight-dot {flex:0 0 auto;height:8px;width:8px;border-radius:100%;background:#76517b}
.insight-dot--purple {background:#865aa3}.insight-dot--amber {background:#d4a348}.insight-dot--rose {background:#c96087}.insight-dot--gray {background:#a0a5b2}
.presence-card {margin-bottom:20px}
.presence-card-heading {padding:21px 23px}
.presence-card-heading .eyebrow {display:block;margin-bottom:5px}
.presence-card-heading h3 {font-size:17px;margin:0 0 4px}
.presence-count-pill {white-space:nowrap;font-size:11px;font-weight:800;border-radius:999px;padding:7px 11px;color:#6e416d;background:#f7edf8}
.presence-filters {display:flex;gap:10px;align-items:end;flex-wrap:wrap;padding:15px 20px 17px;border-bottom:1px solid #eee5ee;background:#fdfbfe}
.presence-filters label {font-size:11px;color:#635268;font-weight:800;display:grid;gap:6px;min-width:135px}
.presence-filters select,.presence-filters input {border:1px solid #e1d5e4;border-radius:9px;padding:10px 12px;min-height:39px;background:#fff;color:#392a40;font-size:12px;max-width:100%}
.presence-filters select:focus,.presence-filters input:focus {border-color:#8c548c;box-shadow:0 0 0 3px rgba(135,77,138,.1);outline:none}
.presence-filters .presence-search {flex:1;min-width:190px}
.presence-filters .btn {min-height:39px}
.presence-table-wrap {max-height:580px;overflow:auto}
.presence-table {min-width:1100px;border-collapse:separate;border-spacing:0}
.presence-table thead th {position:sticky;top:0;z-index:2;border-bottom:1px solid #e9dfea;background:#fbf8fc;padding:12px 14px}
.presence-table td {padding:13px 14px;font-size:11px}
.presence-table .table-primary {font-size:11px;font-weight:700;display:block}
.presence-table .person-cell {min-width:172px}
.presence-table .person-cell strong {font-size:12px}
.presence-avatar {background:#f3e4f4;color:#763679}
.presence-time {font-weight:700;color:#49394d;white-space:nowrap;font-variant-numeric:tabular-nums}
.presence-status {display:inline-flex;align-items:center;white-space:nowrap;padding:5px 10px;font-size:10px;line-height:1.25;font-weight:900;border-radius:999px;border:1px solid transparent}
.presence-status--present {background:#eaf8f1;color:#0d7651;border-color:#d4eee0}
.presence-status--half_day {background:#fff6df;color:#926600;border-color:#f6e9bd}
.presence-status--leave {background:#f4eafa;color:#765097;border-color:#eadaf4}
.presence-status--absent {background:#fff0f3;color:#aa3351;border-color:#f5d9df}
.presence-status--pending {background:#fff2dc;color:#87571b;border-color:#f3deba}
.presence-status--not_marked {background:#f3f4f7;color:#677084;border-color:#e7e9ed}
.presence-status--off {background:#edf1f7;color:#536279;border-color:#e0e5ed}
.presence-status--review {background:#ffedf2;color:#af3655;border-color:#f8d4df}
.presence-note {max-width:230px;line-height:1.4;white-space:normal}
.presence-source {font-size:10px;color:#716779;white-space:nowrap}
.late-chip {display:inline-flex;border-radius:7px;background:#fff1e0;color:#946016;font-weight:900;padding:5px 8px;font-variant-numeric:tabular-nums;white-space:nowrap}
.presence-view {white-space:nowrap}
.presence-footnote {display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid #efe6ef;background:#fdfbfe;color:#85778a;font-size:10px;padding:12px 20px}
.dashboard-lower-grid {display:grid;grid-template-columns:minmax(0,1.35fr) minmax(310px,.7fr);gap:18px;margin-top:19px}
.dashboard-side-stack {display:grid;gap:18px;align-content:start}
.device-health-card {padding-bottom:18px}
.device-health-card .card-header {padding:17px 20px}
.device-health-number {display:flex;gap:15px;align-items:end;padding:17px 20px 5px}
.device-health-number strong {font-size:37px;color:#552d5b;letter-spacing:-.07em;line-height:1}
.device-health-number strong span {font-size:18px;color:#a895ae}
.device-health-number>span {font-size:11px;color:#75687b;padding-bottom:4px}
.device-health-card>p {font-size:11px;color:#85768a;line-height:1.55;margin:5px 20px 14px}
.device-health-card>a {margin-left:20px}
.dashboard-side-stack .payroll-pulse {display:flex;gap:14px;flex-wrap:wrap}
.dashboard-side-stack .payroll-pulse h3 {font-size:20px}
@media(max-width:1340px){.presence-stats {grid-template-columns:repeat(3,1fr)}.dashboard-insights {grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:940px){.dashboard-lower-grid{grid-template-columns:1fr}}
@media(max-width:820px){.content{padding:22px 16px 42px}.command-intro{padding:19px}.command-intro h2{font-size:22px}.presence-filters label,.presence-filters .presence-search{flex:1 1 160px}.presence-filters .btn{flex:0 0 auto}}
@media(max-width:600px){.presence-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.presence-stat{padding:14px}.presence-stat strong{font-size:25px}.dashboard-insights {grid-template-columns:1fr}.command-intro{align-items:flex-start;flex-direction:column}.presence-card-heading{align-items:flex-start;flex-direction:column}.presence-filters .btn{flex:1}.presence-table-wrap{max-height:none}}
@media print {.sidebar,.topbar,.presence-filters,.presence-view,.command-intro-actions{display:none!important}.main-panel{margin:0}.presence-table-wrap{max-height:none;overflow:visible}}
/* Increment management colour harmonisation */
.increment-dashboard-alert {background:linear-gradient(110deg,#fbf2fb,#fff 38%);border-left:4px solid #a978ac}
.increment-stat-link:hover {border-color:#d8b9d9}
.increment-salary-grid>div {background:#fdfafd}
.increment-salary-grid .gross {background:linear-gradient(105deg,#f8edf8,#fff);border-color:#e2cde4}
.increment-preview {border-color:#e1cde4;background:#faf1fb}