/* Spotbank-inspired soft panels, translated into the existing blue HRIS palette. */
:root {
  --primary:#2468ef;
  --primary-light:#edf5ff;
  --bg:#f2f5f8;
  --surface:#fff;
  --line:#e9edf3;
  --radius:26px;
  --font-ui:'Manrope',sans-serif;
}
html,body,button,input,select,textarea,option,optgroup,table,th,td,kbd,
h1,h2,h3,h4,p,a,label,small,strong,b,span,dt,dd,summary,.brand,
.stat-value,.chart text,.document-preview,.document-preview h2 {
  font-family:var(--font-ui);
}
body { background:#edf2f7; }
.sidebar { background:#fbfcfd; border-color:#e8edf3; border-radius:24px; box-shadow:0 5px 22px #21395604; }
.topbar { border-radius:22px; border-color:#e8edf3; box-shadow:0 3px 13px #1e365705; }
.main { background:#f7f9fb; border-color:#e9edf2; border-radius:27px; }
.demo-bar { border-bottom-color:#e7edf4; }
.nav-item { border-radius:13px; }
.nav-item.active { background:#eaf2ff; color:#1c54ac; }
.nav-item.active:before { height:18px; left:0; }
.company-switch { border-radius:16px; border-color:#e9edf2; box-shadow:0 3px 8px #233f6404; }
.company-logo { border-radius:10px; background:#edf4fd; }
.help-card { border-radius:19px; box-shadow:0 3px 8px #203e6604; }
.brand-mark { border-radius:12px; background:linear-gradient(145deg,#63afff,#215fe9); box-shadow:inset 0 1px 1px #c9e9ff,0 3px 6px #2468ef1a; }
.dashboard-heading {
  position:relative; overflow:hidden; border:1px solid #dfeafb; border-radius:26px;
  padding:23px 25px; min-height:125px; margin-bottom:19px;
  background:radial-gradient(ellipse at 96% 123%,#1760f4 0%,#5aaaff 24%,#b2e5ff 44%,#ebf8ff 64%,#fff 83%);
  box-shadow:0 3px 9px #1b58b20a;
}
.dashboard-heading>div { position:relative; z-index:1; }
.dashboard-heading h1 { color:#142c4c; }
.dashboard-heading p { color:#536b8a; max-width:590px; }
.page-eyebrow { color:#537eaf; }
.dashboard-actions .btn { background:rgba(255,255,255,.92); border-color:rgba(255,255,255,.92); color:#23549a; }
.dashboard-actions .btn.primary { background:#1852c4; border-color:#1852c4; color:#fff; box-shadow:0 4px 10px #1648a727; }
.dashboard-viewbar { border-bottom-color:#e5edf5; }
.dashboard-tabs { background:#eff3f8; border-color:#e4ebf3; border-radius:99px; padding:4px; gap:3px; }
.dashboard-tab { border-radius:99px; padding:8px 13px; }
.dashboard-tab.selected { background:white; box-shadow:0 2px 7px #355c8f0b; }
.btn { border-radius:99px; padding-left:15px; padding-right:15px; box-shadow:0 2px 5px #1e365704; }
.btn.primary { background:#2468ef; border-color:#2468ef; box-shadow:0 3px 8px #2468ef14; }
.btn.primary:hover { background:#1859d5; }
.btn.tiny { border-radius:99px; }
.icon-btn { border-radius:50%; box-shadow:0 2px 6px #28496d05; }
.top-search { border-radius:99px; }
/* Nested surfaces reproduce the reference's white card inside a rounded panel. */
.card { border-radius:26px; border-color:#e9edf2; box-shadow:0 3px 7px #1a375205,0 1px 2px #203e5f02; background:white; }
.card-head { padding:21px 22px 16px; }
.card-head h2 { font-weight:700; }
.card-body { padding:0 22px 22px; }
.stat,.stat.featured {
  position:relative; padding:24px 24px 22px; border-radius:25px;
  border:1px solid #e9edf3; background:#fff; min-height:163px;
  box-shadow:0 4px 9px #1c385506;
}
.stat.featured {
  border-color:#d7e9ff;
  background:radial-gradient(ellipse at 95% 125%,#2162ed 0%,#4d94f8 22%,#a6d9ff 49%,#e6f6ff 68%,#fff 89%);
}
.stat-head,.featured .stat-head { color:#5d6d83; min-height:25px; font-weight:500; padding-right:0; }
.stat.has-3d .stat-head { padding-right:42px; }
.stat-value { color:#14243d; font-size:31px; font-weight:700; margin-top:13px; margin-bottom:13px; }
.stat-foot,.featured .stat-foot { color:#66788f; min-height:19px; }
.stat.featured .stat-foot { color:#28507e; background:rgba(255,255,255,.84); border:1px solid #ffffffb3; border-radius:10px; padding:5px 7px; margin:-3px -2px -2px; }
.stat.featured .stat-value { color:#163259; }
.soft-3d-icon { display:block; object-fit:contain; position:absolute; top:16px; right:15px; width:59px; height:59px; pointer-events:none; }
.stat-icon,.featured .stat-icon { border-radius:50%; width:28px; height:28px; }
.stat-icon.orange { background:#fff7ea; border:1px solid #f6ead3; }
.metric-chip { border-radius:99px; padding:4px 6px; }
.metric-chip.positive { background:#eaf5ee; color:#347651; }
.metric-chip.neutral { background:#f0f4f9; }
.attendance-chart-card { background:#fff; }
.attendance-chart-card>.card-body {
  margin:0 8px 8px; padding:15px 15px 17px; border:1px solid #e7eff8; border-radius:20px;
  background:linear-gradient(160deg,#fcfeff 0%,#f5fbff 54%,#e4f3ff 100%);
  box-shadow:inset 0 1px 1px white;
}
.segmented { border-radius:99px; padding:3px; background:#f0f4f9; }
.segmented button { border-radius:99px; }
.segmented button.selected { color:#2463c8; box-shadow:0 2px 5px #23477709; }
.chart-summary strong { font-weight:700; color:#203955; }
.chart-gridlines i { border-color:#dce7f4; }
.team-total { padding:14px 14px; border:1px solid #edf1f6; border-radius:19px; background:#fbfdff; box-shadow:0 2px 5px #203e5f03; }
.team-total>strong { color:#203955; }
.team-stack .avatar { border-color:#fbfdff; }
.department-track { background:#eff4f9; border-radius:99px; height:5px; }
.team-link { color:#53769d; }
.heading-count { border-radius:99px; }
.badge { border-radius:99px; padding:4px 8px; }
.workspace-activity-card .activity {
  margin-bottom:9px; padding:13px; border:1px solid #edf0f4;
  border-radius:16px; background:white; box-shadow:0 2px 5px #203e5f03;
}
.workspace-activity-card .activity:last-child { margin-bottom:0; }
.activity-icon { width:32px; height:32px; border:1px solid #edf2f8; background:#f4f8fe; }
.dashboard-secondary .list-card { border:1px solid #edf0f4; border-radius:16px; margin-bottom:9px; padding:13px; box-shadow:0 2px 5px #203e5f03; }
.dashboard-secondary .list-card:last-child { margin-bottom:0; }
.card-endnote { border-bottom-left-radius:26px; border-bottom-right-radius:26px; background:#fcfdff; }
.command-strip { border-radius:24px; padding:18px 20px; background:linear-gradient(115deg,#fff 0%,#f3fbff 46%,#d0ecff 100%); border-color:#e0edf9; box-shadow:0 3px 8px #223f6004; }
.command-icon { border-radius:50%; background:linear-gradient(140deg,#f3faff,#cde9ff); border:1px solid #e0efff; color:#367bc7; box-shadow:inset 0 1px white; width:36px; height:36px; }
.command-buttons .btn { border-radius:99px; box-shadow:0 3px 6px #203e5f05; }
.metric-strip>div,.salary-summary { border-radius:19px; border-color:#e9eff7; background:#fbfdff; box-shadow:0 2px 5px #203e5f04; }
.salary-summary { background:radial-gradient(ellipse at 100% 130%,#77b8ff 0%,#cdeaff 45%,#f6fcff 80%); }
.document-alert { border-radius:17px; background:#f5faff; }
.welcome { border-radius:26px; border-color:#dbeafa; background:radial-gradient(ellipse at 100% 115%,#337cf5 0%,#8bcaff 25%,#d1f0ff 49%,#fafdff 77%); box-shadow:0 3px 8px #1e4c8c07; }
.welcome h2,.welcome p { color:#1c436d; }
input,select,textarea { border-radius:12px; }
.toolbar .search-field input,.toolbar select { background:#fbfdff; }
.tabs { border-color:#edf1f6; }
.profile-banner .avatar { border-radius:19px; background:#edf5ff; }
.kanban-col,.candidate-card,.report-card,.account-card { border-radius:21px; }
.candidate-card { box-shadow:0 2px 6px #203e5f04; }
.report-card .stat-icon { height:37px; width:37px; }
.modal { border-radius:25px; }
.modal-head { padding:22px 25px; }
.modal-body { padding:22px 25px; }
.modal-foot { background:#fbfdff; }
.notice { border-radius:15px; }
.pagination { border-bottom-left-radius:26px; border-bottom-right-radius:26px; }
.table-wrap { border-radius:15px; }
th { background:#fbfcfe; }
@media(min-width:701px) {
  .collapsed .sidebar { border-radius:24px; }
  .collapsed .sidebar .company-switch { border-radius:14px; }
}
@media(max-width:1200px) {
  .dashboard-heading { padding:23px; flex-wrap:wrap; gap:16px; }
  .dashboard-heading p { max-width:540px; }
  .stat,.stat.featured { padding:22px 21px; }
  .soft-3d-icon { width:53px; height:53px; top:17px; right:13px; }
  .stat.has-3d .stat-head { padding-right:33px; }
}
@media(max-width:700px) {
  body { background:#f5f8fc; }
  .topbar { border-radius:0; }
  .main { border-radius:0; background:#f6f9fc; }
  .sidebar,.collapsed .sidebar { border-radius:0 25px 25px 0; }
  .dashboard-heading { border-radius:23px; min-height:0; padding:21px 18px; margin-bottom:16px; gap:18px; }
  .dashboard-heading p { line-height:1.8; max-width:none; }
  .dashboard-heading h1 { font-size:25px; }
  .dashboard-actions { gap:8px; flex-wrap:wrap; }
  .dashboard-actions .btn { font-size:11px; padding:9px 11px; }
  .dashboard-tabs { gap:0; max-width:100%; }
  .dashboard-tab { padding:8px 10px; }
  .card { border-radius:23px; }
  .card-head { padding:18px 17px 14px; }
  .card-body { padding:0 17px 18px; }
  .stat,.stat.featured { min-height:160px; padding:20px 17px 18px; border-radius:23px; }
  .stat-head,.featured .stat-head { font-size:11px; }
  .stat-head>span { font-size:11px; line-height:1.5; }
  .stat.has-3d .stat-head { padding-right:32px; }
  .stat-value { font-size:29px; margin-top:15px; margin-bottom:12px; }
  .soft-3d-icon { width:44px; height:44px; top:17px; right:8px; }
  .stat-foot,.featured .stat-foot { font-size:10px; }
  .stat.featured .stat-foot { padding:4px; }
  .metric-chip { font-size:9px; padding:4px 5px; }
  .attendance-chart-card>.card-body { margin:0 6px 6px; padding:12px 11px 15px; border-radius:18px; }
  .team-total { padding:12px; border-radius:16px; }
  .command-strip { border-radius:22px; padding:17px; }
  .command-buttons .btn { min-height:35px; }
  .workspace-activity-card .activity { padding:12px; border-radius:15px; }
  .modal { border-radius:23px; }
  .modal-head,.modal-body { padding:20px; }
  .modal-foot { padding:15px 20px; }
  .welcome { border-radius:23px; }
  .document-alert { border-radius:16px; }
  .department-bars { column-gap:18px; }
  .company-switch .stack .muted { font-size:11px !important; }
}

/* Consistent select chevrons: native keyboard behavior, custom inset arrow. */
select:not([multiple]) {
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  background-image:url('icons/chevron-down.svg');
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:16px 16px;
  padding-inline-end:42px !important;
  text-overflow:ellipsis;
}
/* Zero tracking across every UI label, value, control and document preview. */
*,*::before,*::after { letter-spacing:0 !important; }