:root {
  --hrms-navy: #17365d;
  --hrms-navy-dark: #102a48;
  --hrms-blue: #2e74b5;
  --hrms-blue-dark: #225f96;
  --hrms-blue-soft: #eaf3fb;
  --hrms-ink: #17324d;
  --hrms-muted: #687b8f;
  --hrms-border: #dce6f0;
  --hrms-surface: #fff;
  --hrms-canvas: #f3f6fa;
  --hrms-shadow-sm: 0 5px 16px rgba(23, 54, 93, .055);
  --hrms-shadow-md: 0 12px 30px rgba(23, 54, 93, .085);
  --hrms-radius-sm: .58rem;
  --hrms-radius: .9rem;
  --hrms-radius-lg: 1.1rem;
}

html { position:relative; min-height:100%; font-size:14px; }
@media (min-width:768px) { html { font-size:16px; } }

body {
  min-height:100vh;
  margin:0;
  color:var(--hrms-ink);
  background:
    radial-gradient(circle at 8% 3%, rgba(46,116,181,.07), transparent 24rem),
    radial-gradient(circle at 95% 20%, rgba(23,54,93,.045), transparent 30rem),
    var(--hrms-canvas);
  font-family:"Segoe UI", Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  line-height:1.5;
}

a { color:var(--hrms-blue); }
a:hover { color:var(--hrms-blue-dark); }

/* Application shell and navigation */
.app-nav {
  z-index:1030;
  min-height:68px;
  padding:.42rem 0;
  border-bottom:1px solid rgba(255,255,255,.12);
  background:linear-gradient(105deg,var(--hrms-navy-dark) 0%,var(--hrms-navy) 58%,#1c4674 100%);
  box-shadow:0 6px 22px rgba(16,42,72,.2);
}
.app-nav .navbar-nav { gap:.08rem; }
.app-nav .nav-link {
  position:relative;
  padding:.52rem .64rem !important;
  color:rgba(255,255,255,.78);
  border-radius:.55rem;
  font-size:.87rem;
  font-weight:600;
  transition:color .16s ease,background-color .16s ease;
}
.app-nav .nav-link:hover,
.app-nav .nav-link:focus,
.app-nav .nav-link.active { color:#fff; background:rgba(255,255,255,.11); }
.app-nav .nav-link.active::after {
  position:absolute;
  right:.7rem;
  bottom:.2rem;
  left:.7rem;
  height:2px;
  content:"";
  border-radius:999px;
  background:#8fc9ff;
}
.app-nav .dropdown-menu {
  min-width:14rem;
  margin-top:.55rem;
  padding:.5rem;
  border:1px solid rgba(23,54,93,.1);
  border-radius:.78rem;
  box-shadow:0 16px 38px rgba(16,42,72,.17);
}
.app-nav .dropdown-item {
  padding:.58rem .7rem;
  color:#3b536c;
  border-radius:.48rem;
  font-size:.87rem;
  font-weight:500;
}
.app-nav .dropdown-item:hover,.app-nav .dropdown-item:focus { color:var(--hrms-navy); background:var(--hrms-blue-soft); }
.app-nav .dropdown-divider { margin:.35rem 0; border-color:var(--hrms-border); }
.app-nav .navbar-toggler { padding:.32rem .5rem; border-color:rgba(255,255,255,.2); border-radius:.55rem; }
.app-nav .navbar-toggler:focus { box-shadow:0 0 0 .2rem rgba(143,201,255,.24); }
.product-brand { display:flex; flex-direction:column; margin-right:1.35rem; color:#fff; font-weight:750; line-height:1.05; letter-spacing:-.01em; }
.product-brand:hover,.product-brand:focus { color:#fff; }
.product-brand small { margin-top:.24rem; color:rgba(255,255,255,.64); font-size:.57rem; font-weight:600; letter-spacing:.065em; text-transform:uppercase; }
.nav-user { display:flex; align-items:center; gap:.55rem; margin-left:.7rem; padding-left:.8rem; border-left:1px solid rgba(255,255,255,.14); }
.user-avatar { display:grid; flex:0 0 2rem; width:2rem; height:2rem; place-items:center; color:#fff; border:1px solid rgba(255,255,255,.18); border-radius:50%; background:rgba(255,255,255,.13); font-size:.76rem; font-weight:800; }
.app-nav .nav-user-name { max-width:10rem; overflow:hidden; color:rgba(255,255,255,.8); font-size:.78rem; text-overflow:ellipsis; white-space:nowrap; }
.btn-nav-signout { color:#fff; border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.07); }
.btn-nav-signout:hover,.btn-nav-signout:focus { color:var(--hrms-navy); border-color:#fff; background:#fff; }
.nav-guest-label { color:rgba(255,255,255,.68); font-size:.78rem; font-weight:600; letter-spacing:.04em; }
.app-shell { min-height:calc(100vh - 127px); }
.app-content { padding-top:1.35rem; padding-bottom:2.25rem; }
.app-footer { padding:1rem 0; border-top:1px solid var(--hrms-border); background:rgba(255,255,255,.7); font-size:.78rem; }

/* Controls and common content */
.btn,.form-control,.form-select { border-radius:var(--hrms-radius-sm); }
.btn { font-weight:650; transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease,border-color .15s ease; }
.btn:not(.btn-link):hover { transform:translateY(-1px); }
.btn-primary { border-color:var(--hrms-blue); background:var(--hrms-blue); box-shadow:0 4px 10px rgba(46,116,181,.14); }
.btn-primary:hover,.btn-primary:focus { border-color:var(--hrms-blue-dark); background:var(--hrms-blue-dark); }
.btn-outline-primary { color:var(--hrms-blue); border-color:#9fc2df; }
.btn-outline-primary:hover,.btn-outline-primary:focus { border-color:var(--hrms-blue); background:var(--hrms-blue); }
.btn:focus-visible,.form-control:focus,.form-select:focus,.form-check-input:focus { border-color:#75a9d5; box-shadow:0 0 0 .22rem rgba(46,116,181,.14); }
.form-label { margin-bottom:.38rem; color:#496078; font-size:.8rem; font-weight:700; }
.form-control,.form-select { min-height:2.58rem; color:var(--hrms-ink); border-color:#ccd9e6; background-color:#fff; }
.form-control::placeholder { color:#98a7b6; }
.form-control:hover,.form-select:hover { border-color:#aabed1; }
.input-group-text { color:#526b83; border-color:#ccd9e6; background:#f1f6fa; }
.form-check-input:checked { border-color:var(--hrms-blue); background-color:var(--hrms-blue); }
.alert { border:0; border-left:4px solid currentColor; border-radius:.72rem; box-shadow:var(--hrms-shadow-sm); }
.badge { letter-spacing:.01em; }

.page-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin:0 0 1.25rem;
  padding:1.15rem 1.3rem;
  border:1px solid var(--hrms-border);
  border-left:4px solid var(--hrms-blue);
  border-radius:var(--hrms-radius);
  background:rgba(255,255,255,.88);
  box-shadow:var(--hrms-shadow-sm);
}
.page-head h1 { margin:0; color:var(--hrms-navy); font-size:clamp(1.45rem,2vw,1.8rem); font-weight:750; letter-spacing:-.02em; }
.page-head p { margin:.3rem 0 0; color:var(--hrms-muted); }
.card { border:1px solid var(--hrms-border); border-radius:var(--hrms-radius); background:var(--hrms-surface); box-shadow:var(--hrms-shadow-sm); }
.card-header { padding:.9rem 1.15rem; color:var(--hrms-navy); border-bottom-color:var(--hrms-border); background:#f8fbfd; font-weight:700; }
.card-body { padding:1.2rem; }
.card-title { color:var(--hrms-navy); font-weight:700; }

.table-responsive { scrollbar-color:#bdcddd transparent; scrollbar-width:thin; }
main > .table-responsive,.card > .table-responsive,.card .card-body.p-0 > .table-responsive { overflow:hidden; border:1px solid var(--hrms-border); border-radius:var(--hrms-radius); background:#fff; box-shadow:var(--hrms-shadow-sm); }
.card > .table-responsive,.card .card-body.p-0 > .table-responsive { border:0; border-radius:inherit; box-shadow:none; }
.table { color:#29445e; background:#fff; }
.table-responsive > .table { margin-bottom:0; }
.table thead th { padding:.76rem .9rem; color:#4d657d; border-bottom:1px solid #cfdeea; background:#eef4f9; font-size:.75rem; font-weight:750; text-transform:uppercase; letter-spacing:.045em; white-space:nowrap; }
.table tbody td { padding:.78rem .9rem; border-color:#e8eef4; vertical-align:middle; }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state:#f6faff; }
.table .btn-sm { padding:.32rem .55rem; font-size:.76rem; }

.filter-bar { display:flex; flex-wrap:wrap; gap:.65rem; align-items:center; padding:.85rem; margin-bottom:1rem; border:1px solid var(--hrms-border); border-radius:var(--hrms-radius); background:rgba(255,255,255,.9); box-shadow:var(--hrms-shadow-sm); }
.filter-bar .form-control,.filter-bar .form-select { max-width:200px; }
.stat-card { position:relative; height:100%; overflow:hidden; padding:1.05rem 1.1rem; border:1px solid var(--hrms-border); border-radius:var(--hrms-radius); background:#fff; box-shadow:var(--hrms-shadow-sm); }
.stat-card::before { position:absolute; top:0; right:0; left:0; height:3px; content:""; background:linear-gradient(90deg,var(--hrms-blue),#78afe0); }
.stat-card span { display:block; color:var(--hrms-muted); font-size:.8rem; font-weight:600; }
.stat-card strong { display:block; margin-top:.2rem; color:var(--hrms-navy); font-size:1.7rem; line-height:1.2; }
.status { display:inline-flex; align-items:center; padding:.27rem .55rem; border-radius:999px; background:#eef2f6; font-size:.74rem; font-weight:700; }
.status-present,.status-approved { color:#17613a; background:#dcf5e7; }
.status-absent,.status-rejected,.status-missingpunch { color:#8b2635; background:#fde4e8; }
.status-pending,.status-halfday { color:#805900; background:#fff0c2; }
.empty-state { padding:3.5rem 1rem; text-align:center; color:var(--hrms-muted); border:1px dashed #afc1d3; border-radius:var(--hrms-radius); background:rgba(255,255,255,.85); }
.empty-state h1,.empty-state h2 { color:var(--hrms-navy); }
.report-credit { margin-top:1rem; color:#718096; font-size:.75rem; text-align:right; }

/* Authentication */
.auth-shell { position:relative; min-height:calc(100vh - 190px); display:grid; place-items:center; padding:2rem 0; }
.auth-shell::before { position:absolute; z-index:-1; width:min(80vw,650px); height:min(80vw,650px); content:""; border-radius:50%; background:radial-gradient(circle,rgba(46,116,181,.1),transparent 68%); }
.auth-card { width:min(100%,440px); border-top:4px solid var(--hrms-blue); box-shadow:0 20px 48px rgba(23,54,93,.13); }
.auth-card .eyebrow,.payslip .eyebrow { color:var(--hrms-blue); }
.payslip { max-width:850px; margin:auto; }

/* Dashboard */
.brand-accent { color:var(--hrms-blue); }
.hero-panel { display:flex; justify-content:space-between; align-items:center; gap:2rem; overflow:hidden; padding:2rem 2.15rem; color:#fff; border:1px solid rgba(255,255,255,.08); border-radius:var(--hrms-radius-lg); background:linear-gradient(135deg,var(--hrms-navy-dark) 0%,var(--hrms-navy) 48%,var(--hrms-blue) 100%); box-shadow:0 18px 42px rgba(23,54,93,.18); }
.hero-panel h1 { margin:.35rem 0 .7rem; font-size:clamp(1.9rem,3.4vw,2.8rem); font-weight:750; letter-spacing:-.025em; }
.hero-panel p { max-width:760px; margin:0; color:rgba(255,255,255,.82); font-size:1rem; }
.eyebrow { color:#bfe0ff; font-size:.72rem; font-weight:750; letter-spacing:.14em; text-transform:uppercase; }
.hero-stat { min-width:145px; padding:1rem 1.35rem; text-align:center; border:1px solid rgba(255,255,255,.2); border-radius:.85rem; background:rgba(255,255,255,.1); backdrop-filter:blur(5px); }
.hero-stat strong { display:block; font-size:2.35rem; line-height:1; }
.hero-stat span { display:block; margin-top:.4rem; color:#d9ecff; }
.module-card { height:100%; padding:1.25rem; border:1px solid var(--hrms-border); border-radius:var(--hrms-radius); background:#fff; box-shadow:var(--hrms-shadow-sm); transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; }
.module-card:hover { transform:translateY(-3px); border-color:#c4d9eb; box-shadow:var(--hrms-shadow-md); }
.module-card h3 { margin:.65rem 0 .8rem; color:var(--hrms-navy); font-size:1.08rem; font-weight:700; }
.module-card ul { min-height:96px; padding-left:1.1rem; color:#627184; }
.module-key { display:inline-block; padding:.23rem .52rem; color:var(--hrms-blue); border-radius:.4rem; background:var(--hrms-blue-soft); font-size:.7rem; font-weight:750; text-transform:uppercase; letter-spacing:.065em; }
.module-link { color:var(--hrms-blue); font-weight:650; text-decoration:none; }
.module-link:hover { text-decoration:underline; text-underline-offset:3px; }

/* Reports */
.reports-hero { display:flex; align-items:center; justify-content:space-between; gap:2rem; margin:0 0 1.5rem; padding:1.6rem 1.8rem; color:#fff; border-radius:var(--hrms-radius-lg); background:linear-gradient(135deg,var(--hrms-navy-dark) 0%,var(--hrms-blue) 100%); box-shadow:0 14px 30px rgba(23,54,93,.14); }
.reports-hero h1 { margin:.3rem 0 .45rem; font-size:clamp(1.7rem,3vw,2.35rem); font-weight:750; }
.reports-hero p { max-width:720px; margin:0; color:rgba(255,255,255,.82); }
.reports-hero__summary { flex:0 0 auto; min-width:145px; padding:.85rem 1rem; text-align:center; border:1px solid rgba(255,255,255,.2); border-radius:.8rem; background:rgba(255,255,255,.1); }
.reports-hero__summary strong { display:block; font-size:2rem; line-height:1; }
.reports-hero__summary span { display:block; margin-top:.35rem; color:#d9ecff; font-size:.82rem; }
.reports-grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:1rem; align-items:stretch; }
.report-card { min-width:0; box-shadow:var(--hrms-shadow-sm); }
.report-card--operational { grid-column:span 6; }
.report-card--statutory { grid-column:span 3; }
.report-card .card-body { display:flex; min-width:0; flex-direction:column; padding:1.25rem; }
.report-card__heading { display:flex; align-items:center; gap:.8rem; margin-bottom:.75rem; }
.report-card__heading h2 { margin:.12rem 0 0; color:var(--hrms-navy); font-size:1.08rem; font-weight:700; }
.report-category { color:#78889a; font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.report-icon { display:grid; flex:0 0 2.6rem; width:2.6rem; height:2.6rem; place-items:center; color:#fff; border-radius:.7rem; background:var(--hrms-blue); font-size:.76rem; font-weight:800; letter-spacing:.04em; }
.report-icon--statutory { color:#1f659d; background:#e8f3fc; }
.report-description { flex:1 1 auto; min-height:2.8rem; margin:0 0 1rem; color:#6b7b8e; font-size:.88rem; }
.report-filter-form { display:flex; flex-direction:column; gap:.8rem; margin-top:auto; }
.report-period-fields { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:.6rem; }
.report-field { min-width:0; }
.report-field label { display:block; margin-bottom:.28rem; color:#526579; font-size:.72rem; font-weight:700; }
.report-field--date { max-width:15rem; }
.report-actions { display:flex; flex-wrap:wrap; gap:.5rem; }
.report-actions .btn { min-width:7.5rem; }

/* User manual */
.manual-hero { display:flex; justify-content:space-between; align-items:center; gap:2rem; padding:2rem; color:#fff; border-radius:var(--hrms-radius-lg); background:linear-gradient(135deg,#112d4e,var(--hrms-blue)); box-shadow:var(--hrms-shadow-md); }
.manual-hero h1 { margin:.35rem 0 .5rem; font-weight:750; }
.manual-hero p { max-width:760px; margin:0; color:rgba(255,255,255,.84); }
.manual-video video { max-height:620px; background:#0b1e33; }
.manual-nav { top:5.5rem; max-height:calc(100vh - 7rem); overflow:auto; }
.manual-nav a { display:block; padding:.45rem .58rem; color:#526579; border-radius:.4rem; text-decoration:none; }
.manual-nav a:hover { color:var(--hrms-navy); background:var(--hrms-blue-soft); }
.manual-content { display:grid; gap:1rem; }
.manual-chapter { scroll-margin-top:5.5rem; }
.manual-chapter h2 { margin:-1.55rem 0 1rem 3rem; color:var(--hrms-navy); font-size:1.35rem; }
.manual-chapter li + li { margin-top:.45rem; }
.chapter-number { display:inline-grid; place-items:center; width:2.35rem; height:2.35rem; color:#fff; border-radius:.55rem; background:var(--hrms-blue); font-size:.78rem; font-weight:700; }
.manual-note,.manual-warning { margin-top:1rem; padding:.85rem 1rem; border-radius:.55rem; }
.manual-note { color:#174a70; border-left:4px solid var(--hrms-blue); background:#eaf5ff; }
.manual-warning { color:#6a4a00; border-left:4px solid #d89b00; background:#fff5d6; }
.closing-flow { display:flex; flex-wrap:wrap; gap:.55rem; }
.closing-flow span { padding:.5rem .7rem; color:#174a70; border:1px solid #d8e7f5; border-radius:999px; background:#eef5fb; font-size:.86rem; font-weight:600; }

.form-floating > .form-control-plaintext::placeholder,.form-floating > .form-control::placeholder { color:var(--bs-secondary-color); text-align:end; }
.form-floating > .form-control-plaintext:focus::placeholder,.form-floating > .form-control:focus::placeholder { text-align:start; }

@media (max-width:1399.98px) {
  .app-nav .navbar-collapse { margin-top:.7rem; padding:.75rem; border-top:1px solid rgba(255,255,255,.12); background:rgba(8,30,52,.18); }
  .app-nav .navbar-nav { gap:.18rem; }
  .app-nav .nav-link { padding:.62rem .7rem !important; }
  .app-nav .nav-link.active::after { right:auto; top:.55rem; bottom:.55rem; left:.18rem; width:3px; height:auto; }
  .app-nav .dropdown-menu { margin:.15rem 0 .45rem; border:0; box-shadow:none; }
  .nav-user { margin:.65rem 0 0; padding:.7rem 0 0; border-top:1px solid rgba(255,255,255,.12); border-left:0; }
}

@media (min-width:768px) and (max-width:1199.98px) {
  .report-card--statutory { grid-column:span 6; }
}

@media (max-width:767.98px) {
  .app-content { padding-top:1rem; }
  .nav-guest-label { display:none; }
  .hero-panel { align-items:flex-start; flex-direction:column; padding:1.5rem; }
  .hero-stat { width:100%; }
  .page-head { align-items:stretch; flex-direction:column; padding:1rem; }
  .page-head .btn,.page-head .btn-group { width:100%; }
  .filter-bar { align-items:stretch; flex-direction:column; }
  .filter-bar .form-control,.filter-bar .form-select { max-width:none; }
  .reports-hero,.manual-hero { align-items:flex-start; flex-direction:column; padding:1.35rem; }
  .reports-hero__summary { width:100%; }
  .report-card--operational,.report-card--statutory { grid-column:span 12; }
  .report-field--date { max-width:none; }
  .report-actions .btn { flex:1 1 100%; }
  main > .table-responsive { border-radius:.7rem; }
  .table thead th,.table tbody td { padding:.68rem .72rem; }
}

@media print {
  .app-nav,.app-footer,.d-print-none { display:none !important; }
  body { background:#fff; }
  .app-shell { min-height:0; }
  .app-content { padding:0; }
  .payslip { border:0; }
  .manual-hero { padding:0 0 1rem; color:var(--hrms-ink); background:none; box-shadow:none; }
  .manual-hero p { color:#526579; }
  .manual-content { width:100%; }
  .manual-chapter { break-inside:avoid; box-shadow:none; }
}

/* ========================================================================== 
   Synvexa portal template - sidebar, utility header and product-grade forms
   ========================================================================== */
.portal-authenticated {
  background:#f5f6f8;
  color:#202938;
}
.portal-shell { min-height:100vh; }
.portal-sidebar {
  position:fixed;
  z-index:1040;
  top:0;
  bottom:0;
  left:0;
  display:flex;
  width:268px;
  flex-direction:column;
  border-right:1px solid #e3e8ef;
  background:#fff;
  box-shadow:4px 0 20px rgba(24,54,88,.035);
  transition:transform .22s ease;
}
.sidebar-brand {
  display:flex;
  min-height:72px;
  align-items:center;
  gap:.72rem;
  padding:0 1.15rem;
  color:var(--hrms-navy);
  border-bottom:1px solid #eef1f5;
  text-decoration:none;
}
.sidebar-brand:hover { color:var(--hrms-navy); }
.brand-mark {
  display:grid;
  flex:0 0 2.35rem;
  width:2.35rem;
  height:2.35rem;
  place-items:center;
  color:#fff;
  border-radius:.7rem;
  background:linear-gradient(145deg,var(--hrms-navy),var(--hrms-blue));
  box-shadow:0 7px 16px rgba(46,116,181,.23);
  font-size:1.15rem;
  font-weight:800;
}
.brand-copy { display:flex; min-width:0; flex-direction:column; line-height:1.1; }
.brand-copy strong { font-size:1.05rem; font-weight:800; letter-spacing:-.02em; }
.brand-copy small { margin-top:.26rem; color:#8794a5; font-size:.56rem; font-weight:700; letter-spacing:.055em; text-transform:uppercase; }
.sidebar-scroll { flex:1 1 auto; overflow-x:hidden; overflow-y:auto; padding:.7rem .75rem 1rem; scrollbar-color:#ccd6e1 transparent; scrollbar-width:thin; }
.sidebar-section-label { padding:1rem .65rem .42rem; color:#a0aaba; font-size:.63rem; font-weight:800; letter-spacing:.115em; text-transform:uppercase; }
.sidebar-nav { display:grid; gap:.18rem; }
.sidebar-nav [hidden] { display:none !important; }
.sidebar-link {
  display:flex;
  min-height:42px;
  align-items:center;
  gap:.72rem;
  padding:.62rem .72rem;
  color:#485568;
  border-radius:.58rem;
  font-size:.84rem;
  font-weight:650;
  text-decoration:none;
  cursor:pointer;
  transition:background-color .16s ease,color .16s ease,box-shadow .16s ease;
}
.sidebar-link svg,.topbar-search svg,.icon-button svg,.topbar-action svg {
  width:1.08rem;
  height:1.08rem;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.sidebar-link:hover { color:var(--hrms-navy); background:#f2f6fa; }
.sidebar-link.active {
  color:#fff;
  background:linear-gradient(100deg,var(--hrms-navy) 0%,#20558b 100%);
  box-shadow:0 7px 16px rgba(23,54,93,.17);
}
.sidebar-link.active svg { color:#a9d7ff; }
.sidebar-group { border-radius:.58rem; }
.sidebar-group summary { list-style:none; }
.sidebar-group summary::-webkit-details-marker { display:none; }
.sidebar-chevron { margin-left:auto; font-size:1.2rem; font-weight:400; transition:transform .18s ease; }
.sidebar-group[open] .sidebar-chevron { transform:rotate(90deg); }
.sidebar-submenu { display:grid; gap:.08rem; margin:.18rem 0 .35rem 1.48rem; padding-left:1rem; border-left:1px solid #dce4ed; }
.sidebar-submenu a { padding:.45rem .65rem; color:#718096; border-radius:.45rem; font-size:.78rem; font-weight:600; text-decoration:none; }
.sidebar-submenu a:hover,.sidebar-submenu a.active { color:var(--hrms-blue); background:var(--hrms-blue-soft); }
.sidebar-footer-card { margin:.75rem; padding:.85rem .9rem; color:#d9e9f8; border:1px solid rgba(255,255,255,.07); border-radius:.72rem; background:linear-gradient(140deg,var(--hrms-navy-dark),var(--hrms-navy)); }
.sidebar-footer-card span,.sidebar-footer-card strong { display:block; }
.sidebar-footer-card span { color:#adc5da; font-size:.64rem; }
.sidebar-footer-card strong { margin-top:.2rem; font-size:.78rem; }

.portal-main { min-width:0; margin-left:268px; }
.portal-topbar {
  position:sticky;
  z-index:1025;
  top:0;
  display:flex;
  min-height:72px;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.65rem 1.5rem;
  border-bottom:1px solid #e4e9ef;
  background:rgba(255,255,255,.95);
  box-shadow:0 3px 15px rgba(23,54,93,.035);
  backdrop-filter:blur(12px);
}
.topbar-start,.topbar-end,.topbar-user { display:flex; align-items:center; }
.topbar-start { gap:.75rem; }
.topbar-end { gap:.7rem; }
.icon-button {
  display:none;
  width:2.35rem;
  height:2.35rem;
  place-items:center;
  color:#536579;
  border:1px solid #dce3eb;
  border-radius:.58rem;
  background:#fff;
}
.topbar-heading { display:flex; flex-direction:column; line-height:1.12; }
.topbar-heading span { color:#99a4b2; font-size:.62rem; font-weight:750; letter-spacing:.075em; text-transform:uppercase; }
.topbar-heading strong { margin-top:.2rem; color:#27364a; font-size:.95rem; }
.topbar-search { display:flex; width:min(24vw,300px); min-height:2.45rem; align-items:center; gap:.48rem; padding:0 .65rem; color:#8a96a7; border:1px solid #dce3ea; border-radius:.58rem; background:#f8fafc; }
.topbar-search input { min-width:0; flex:1; padding:0; color:#36485d; border:0; outline:0; background:transparent; font-size:.8rem; }
.topbar-search kbd { padding:.17rem .32rem; color:#788697; border:1px solid #dce3ea; border-radius:.28rem; background:#fff; font-family:inherit; font-size:.56rem; box-shadow:none; }
.topbar-action { display:flex; min-height:2.42rem; align-items:center; gap:.38rem; padding:.48rem .72rem; color:#fff; border-radius:.56rem; background:var(--hrms-blue); box-shadow:0 6px 14px rgba(46,116,181,.18); font-size:.76rem; font-weight:700; text-decoration:none; }
.topbar-action:hover { color:#fff; background:var(--hrms-blue-dark); }
.topbar-user { gap:.52rem; margin-left:.15rem; padding-left:.75rem; border-left:1px solid #e4e8ed; }
.topbar-user .user-avatar { color:#fff; border-color:#d0e2f2; background:linear-gradient(145deg,var(--hrms-navy),var(--hrms-blue)); }
.user-meta { display:flex; max-width:10.5rem; flex-direction:column; line-height:1.1; }
.user-meta strong { overflow:hidden; color:#314258; font-size:.73rem; text-overflow:ellipsis; white-space:nowrap; }
.user-meta small { margin-top:.18rem; color:#99a4b0; font-size:.59rem; }
.signout-link { padding:0; color:#718096; border:0; background:none; font-size:.66rem; font-weight:650; }
.signout-link:hover { color:#c63b4e; }
.portal-content { min-height:calc(100vh - 118px); padding:1.5rem; }
.portal-footer { display:flex; min-height:46px; align-items:center; justify-content:space-between; gap:1rem; padding:.75rem 1.5rem; color:#909ba9; border-top:1px solid #e4e9ef; background:#fff; font-size:.68rem; }
.sidebar-backdrop { display:none; }

/* Content presentation */
.portal-content .page-head {
  margin:0 0 1.25rem;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.portal-content .page-head::before { display:none; }
.portal-content .page-head h1 { color:#253449; font-size:1.48rem; font-weight:780; }
.portal-content .page-head p { margin-top:.2rem; color:#8491a1; font-size:.82rem; }
.portal-content .card { border-color:#e2e7ee; border-radius:.78rem; box-shadow:0 4px 14px rgba(31,48,70,.035); }
.portal-content .card:hover { border-color:#d7dfe8; }
.portal-content .card-header { padding:.9rem 1.1rem; color:#2a3b51; background:#fff; }
.portal-content .card-body { padding:1.15rem; }
.portal-content .card-body > h2:first-child,
.portal-content .card-body > .h5:first-child { margin:-.1rem -0.05rem 1rem; padding-bottom:.75rem; color:#2b3b50; border-bottom:1px solid #edf0f4; font-size:.95rem; font-weight:750; }
.portal-content .btn { min-height:2.38rem; padding:.48rem .8rem; border-radius:.52rem; font-size:.78rem; }
.portal-content .btn-sm { min-height:1.92rem; padding:.28rem .55rem; font-size:.69rem; }
.portal-content .btn-primary { background:var(--hrms-navy); border-color:var(--hrms-navy); box-shadow:0 5px 12px rgba(23,54,93,.14); }
.portal-content .btn-primary:hover { background:#214c7b; border-color:#214c7b; }
.portal-content .form-label { margin-bottom:.38rem; color:#45576c; font-size:.74rem; font-weight:700; }
.portal-content .form-control,.portal-content .form-select { min-height:2.72rem; padding:.58rem .72rem; border-color:#d7dee7; border-radius:.5rem; background-color:#fff; font-size:.82rem; box-shadow:0 1px 2px rgba(23,54,93,.015); }
.portal-content textarea.form-control { min-height:7rem; }
.portal-content .form-control:focus,.portal-content .form-select:focus { border-color:#7faed3; box-shadow:0 0 0 .2rem rgba(46,116,181,.1); }
.portal-content .form-text { color:#96a1af; font-size:.68rem; }
.portal-content .text-danger { font-size:.7rem; }
.portal-content .filter-bar { padding:.8rem; border-color:#e2e7ed; border-radius:.72rem; box-shadow:0 3px 12px rgba(31,48,70,.025); }
.portal-content main > .table-responsive,
.portal-content > .table-responsive { border-color:#e0e6ed; border-radius:.75rem; box-shadow:0 4px 14px rgba(31,48,70,.035); }
.portal-content .table thead th { padding:.72rem .82rem; color:#6d7b8d; border-color:#dfe6ed; background:#f6f8fa; font-size:.68rem; }
.portal-content .table tbody td { padding:.75rem .82rem; color:#43536a; border-color:#edf0f4; font-size:.78rem; }
.portal-content .table tbody tr:last-child td { border-bottom:0; }
.portal-content .table strong { color:#26384e; }
.portal-content .badge { padding:.36rem .55rem; border-radius:999px; font-size:.64rem; font-weight:750; }
.portal-content .stat-card { padding:1rem; border-color:#e2e7ed; border-radius:.72rem; box-shadow:0 3px 12px rgba(31,48,70,.025); }
.portal-content .stat-card::before { height:2px; background:var(--hrms-blue); }

/* Form template */
.professional-form { max-width:1050px; }
.professional-form.wide-form { max-width:none; }
.form-card { overflow:hidden; }
.form-card .form-card-head { display:flex; align-items:center; gap:.8rem; padding:1rem 1.2rem; border-bottom:1px solid #e8edf2; background:linear-gradient(180deg,#fff,#fbfcfd); }
.form-section-icon { display:grid; flex:0 0 2.35rem; width:2.35rem; height:2.35rem; place-items:center; color:var(--hrms-navy); border-radius:.62rem; background:#eaf2f9; font-size:.75rem; font-weight:800; }
.form-card-head h2 { margin:0; color:#27384e; font-size:.98rem; font-weight:750; }
.form-card-head p { margin:.16rem 0 0; color:#8c98a6; font-size:.7rem; }
.form-card .card-body { padding:1.35rem 1.2rem; }
.field-block { position:relative; }
.field-block .form-control,.field-block .form-select { background:#fbfcfd; }
.form-actions { display:flex; align-items:center; justify-content:flex-end; gap:.55rem; margin:0 -1.2rem -1.35rem; padding:1rem 1.2rem; border-top:1px solid #e8edf2; background:#fafbfd; }
.form-actions .action-note { margin-right:auto; color:#929eac; font-size:.69rem; }
.form-check { min-height:1.6rem; }
.form-check-input { border-color:#bdc9d5; }
.form-check-label { color:#56677a; font-size:.78rem; }

/* Dashboard template */
.dashboard-head { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.dashboard-head h1 { margin:0; color:#253449; font-size:1.45rem; font-weight:780; }
.dashboard-head p { margin:.22rem 0 0; color:#8793a2; font-size:.8rem; }
.dashboard-date { padding:.48rem .7rem; color:#607086; border:1px solid #dfe5eb; border-radius:.52rem; background:#fff; font-size:.72rem; font-weight:650; }
.dashboard-welcome { position:relative; display:flex; align-items:center; justify-content:space-between; gap:1.25rem; overflow:hidden; margin-bottom:1.1rem; padding:1.2rem 1.35rem; color:#fff; border-radius:.82rem; background:linear-gradient(115deg,var(--hrms-navy-dark),var(--hrms-navy) 60%,var(--hrms-blue)); box-shadow:0 9px 23px rgba(23,54,93,.14); }
.dashboard-welcome::after { position:absolute; right:-2rem; bottom:-5rem; width:16rem; height:16rem; content:""; border:1px solid rgba(255,255,255,.12); border-radius:50%; box-shadow:0 0 0 2.5rem rgba(255,255,255,.025),0 0 0 5rem rgba(255,255,255,.018); }
.welcome-copy { position:relative; z-index:1; display:flex; align-items:center; gap:1rem; }
.welcome-avatar { display:grid; flex:0 0 3.35rem; width:3.35rem; height:3.35rem; place-items:center; color:var(--hrms-navy); border:3px solid rgba(255,255,255,.28); border-radius:50%; background:#fff; font-size:1.25rem; font-weight:800; }
.dashboard-welcome h2 { margin:0; font-size:1.12rem; font-weight:750; }
.dashboard-welcome p { margin:.28rem 0 0; color:#c9ddf0; font-size:.76rem; }
.welcome-actions { position:relative; z-index:1; display:flex; gap:.55rem; }
.welcome-actions .btn { color:#fff; border-color:rgba(255,255,255,.32); background:rgba(255,255,255,.08); }
.welcome-actions .btn:hover { color:var(--hrms-navy); border-color:#fff; background:#fff; }
.metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.85rem; margin-bottom:.95rem; }
.metric-card { display:flex; min-width:0; align-items:center; gap:.82rem; padding:1rem; border:1px solid #e2e7ed; border-radius:.76rem; background:#fff; box-shadow:0 4px 14px rgba(31,48,70,.035); }
.metric-icon { display:grid; flex:0 0 2.65rem; width:2.65rem; height:2.65rem; place-items:center; border-radius:50%; font-size:.72rem; font-weight:850; }
.metric-icon.blue { color:#1c67a2; background:#e3f1fc; }
.metric-icon.green { color:#16734b; background:#ddf6e9; }
.metric-icon.amber { color:#9b6500; background:#fff1ce; }
.metric-icon.red { color:#aa3345; background:#fde7eb; }
.metric-copy { min-width:0; }
.metric-copy span { display:block; overflow:hidden; color:#7c8999; font-size:.7rem; font-weight:650; text-overflow:ellipsis; white-space:nowrap; }
.metric-copy strong { display:block; margin-top:.15rem; color:#26384e; font-size:1.35rem; line-height:1.1; }
.metric-copy small { display:block; margin-top:.25rem; color:#a0aab6; font-size:.61rem; }
.dashboard-grid { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(300px,.85fr); gap:.9rem; margin-bottom:.9rem; }
.dashboard-card { min-width:0; padding:1.05rem; border:1px solid #e2e7ed; border-radius:.76rem; background:#fff; box-shadow:0 4px 14px rgba(31,48,70,.035); }
.dashboard-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.dashboard-card-head h3 { margin:0; color:#2b3b50; font-size:.9rem; font-weight:750; }
.dashboard-card-head p { margin:.2rem 0 0; color:#929daa; font-size:.66rem; }
.dashboard-chip { padding:.3rem .5rem; color:#66778b; border:1px solid #dfe5eb; border-radius:.42rem; background:#fafbfc; font-size:.62rem; font-weight:650; }
.attendance-chart { display:grid; grid-template-columns:repeat(7,minmax(28px,1fr)); gap:.6rem; height:205px; align-items:end; padding:.65rem .25rem 0; border-bottom:1px solid #dfe5eb; background:repeating-linear-gradient(to top,transparent 0,transparent 49px,#f0f3f6 50px); }
.chart-day { display:flex; height:100%; align-items:flex-end; justify-content:center; gap:3px; }
.chart-bar { position:relative; width:min(14px,38%); min-height:3px; border-radius:5px 5px 1px 1px; background:linear-gradient(180deg,#4692d1,var(--hrms-navy)); transition:height .3s ease; }
.chart-bar.absent { background:#e6ebf0; }
.chart-bar:hover::after { position:absolute; bottom:calc(100% + 5px); left:50%; z-index:2; padding:.2rem .35rem; color:#fff; border-radius:.3rem; background:#26384e; content:attr(data-value); font-size:.58rem; transform:translateX(-50%); }
.chart-labels { display:grid; grid-template-columns:repeat(7,1fr); gap:.6rem; padding:.5rem .25rem 0; color:#8b97a5; text-align:center; font-size:.61rem; }
.chart-legend { display:flex; gap:.9rem; margin-top:.8rem; color:#778596; font-size:.63rem; }
.chart-legend span::before { display:inline-block; width:.48rem; height:.48rem; margin-right:.35rem; content:""; border-radius:2px; background:var(--hrms-blue); }
.chart-legend span:last-child::before { background:#e3e8ed; }
.attendance-overview { display:grid; place-items:center; padding:.4rem 0 .8rem; }
.donut-chart { --present:0deg; --absent:0deg; position:relative; display:grid; width:150px; height:150px; place-items:center; border-radius:50%; background:conic-gradient(var(--hrms-blue) 0 var(--present),#f3b94f var(--present) var(--absent),#e9edf2 var(--absent) 360deg); }
.donut-chart::before { position:absolute; width:105px; height:105px; content:""; border-radius:50%; background:#fff; box-shadow:inset 0 0 0 1px #f1f3f6; }
.donut-value { position:relative; z-index:1; text-align:center; }
.donut-value strong { display:block; color:#27384e; font-size:1.6rem; line-height:1; }
.donut-value span { display:block; margin-top:.35rem; color:#8d98a6; font-size:.62rem; }
.status-list { display:grid; gap:.58rem; }
.status-row { display:grid; grid-template-columns:10px 1fr auto; align-items:center; gap:.55rem; color:#69798c; font-size:.69rem; }
.status-row i { width:.55rem; height:.55rem; border-radius:50%; background:var(--row-color); }
.status-row strong { color:#34465c; font-size:.72rem; }
.department-list { display:grid; gap:.78rem; }
.department-row { display:grid; grid-template-columns:minmax(90px,.8fr) minmax(120px,1.5fr) 28px; align-items:center; gap:.65rem; }
.department-row span { overflow:hidden; color:#66768a; font-size:.68rem; text-overflow:ellipsis; white-space:nowrap; }
.department-row strong { color:#34465b; font-size:.7rem; text-align:right; }
.department-track { height:.48rem; overflow:hidden; border-radius:999px; background:#eef2f5; }
.department-fill { height:100%; border-radius:999px; background:linear-gradient(90deg,var(--hrms-blue),#75b1e3); }
.workflow-list { display:grid; gap:.7rem; }
.workflow-item { display:flex; align-items:center; gap:.72rem; padding:.68rem; border:1px solid #edf0f3; border-radius:.58rem; background:#fbfcfd; }
.workflow-badge { display:grid; flex:0 0 2.25rem; width:2.25rem; height:2.25rem; place-items:center; border-radius:.55rem; background:var(--hrms-blue-soft); color:var(--hrms-blue); font-size:.68rem; font-weight:800; }
.workflow-copy { min-width:0; flex:1; }
.workflow-copy strong,.workflow-copy span { display:block; }
.workflow-copy strong { color:#34465a; font-size:.72rem; }
.workflow-copy span { margin-top:.12rem; color:#909ba8; font-size:.62rem; }
.workflow-count { color:#27394f; font-size:1rem; font-weight:800; }
.quick-links { display:grid; grid-template-columns:repeat(4,1fr); gap:.65rem; }
.quick-link { display:flex; align-items:center; gap:.55rem; padding:.72rem; color:#536579; border:1px solid #e5eaf0; border-radius:.58rem; background:#fff; font-size:.68rem; font-weight:700; text-decoration:none; }
.quick-link span { display:grid; width:1.85rem; height:1.85rem; place-items:center; color:var(--hrms-blue); border-radius:.48rem; background:var(--hrms-blue-soft); font-size:.63rem; }
.quick-link:hover { color:var(--hrms-navy); border-color:#cfdbe7; background:#f9fbfd; }

/* Auth pages */
.portal-anonymous { background:#f3f6fa; }
.auth-topbar { display:flex; min-height:72px; align-items:center; justify-content:space-between; padding:0 2rem; border-bottom:1px solid #e1e7ed; background:#fff; }
.auth-topbar .sidebar-brand { min-height:auto; padding:0; border:0; }
.auth-topbar > span { color:#8793a1; font-size:.72rem; font-weight:650; }
.auth-page { min-height:calc(100vh - 118px); padding:1rem; }
.auth-footer { min-height:46px; padding:1rem 2rem; color:#929daa; border-top:1px solid #e2e7ed; background:#fff; font-size:.68rem; }
.auth-page .auth-card { border:1px solid #e0e6ed; border-top:4px solid var(--hrms-navy); border-radius:.82rem; }

@media (max-width:1199.98px) {
  .portal-sidebar { transform:translateX(-101%); box-shadow:12px 0 35px rgba(20,43,68,.18); }
  .portal-main { margin-left:0; }
  .icon-button { display:grid; }
  .sidebar-backdrop { position:fixed; z-index:1035; inset:0; border:0; background:rgba(15,30,48,.42); opacity:0; pointer-events:none; transition:opacity .2s ease; }
  .sidebar-open .portal-sidebar { transform:translateX(0); }
  .sidebar-open .sidebar-backdrop { display:block; opacity:1; pointer-events:auto; }
  .dashboard-grid { grid-template-columns:1fr; }
}

@media (max-width:991.98px) {
  .topbar-search { display:none; }
  .metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .quick-links { grid-template-columns:repeat(2,1fr); }
}

@media (max-width:767.98px) {
  .portal-topbar { min-height:64px; padding:.55rem .8rem; }
  .topbar-heading span { display:none; }
  .topbar-action { width:2.35rem; padding:0; justify-content:center; }
  .topbar-action span,.user-meta,.topbar-user form { display:none; }
  .topbar-user { padding-left:.5rem; }
  .portal-content { padding:1rem .75rem; }
  .portal-footer { align-items:flex-start; flex-direction:column; padding:.75rem; }
  .portal-content .page-head { align-items:stretch; gap:.75rem; }
  .portal-content .page-head .d-flex { width:100%; flex-wrap:wrap; }
  .dashboard-head { align-items:flex-start; flex-direction:column; }
  .dashboard-welcome { align-items:flex-start; flex-direction:column; padding:1rem; }
  .welcome-actions { width:100%; }
  .welcome-actions .btn { flex:1; }
  .metric-grid { grid-template-columns:1fr 1fr; gap:.6rem; }
  .metric-card { align-items:flex-start; flex-direction:column; gap:.5rem; padding:.8rem; }
  .metric-icon { width:2.25rem; height:2.25rem; flex-basis:2.25rem; }
  .attendance-chart { gap:.3rem; height:170px; }
  .quick-links { grid-template-columns:1fr 1fr; }
  .form-card .card-body { padding:1rem; }
  .form-actions { margin:0 -1rem -1rem; padding:.9rem 1rem; }
  .form-actions .action-note { display:none; }
  .form-actions .btn { flex:1; }
  .auth-topbar { padding:0 1rem; }
  .auth-topbar > span { display:none; }
}

@media (max-width:420px) {
  .metric-grid { grid-template-columns:1fr; }
  .quick-links { grid-template-columns:1fr; }
}

@media print {
  .portal-sidebar,.portal-topbar,.portal-footer,.sidebar-backdrop { display:none !important; }
  .portal-main { margin-left:0; }
  .portal-content { padding:0; }
}

/* Theme switcher */
.theme-picker { position:relative; }
.theme-toggle {
  display:grid;
  width:2.42rem;
  height:2.42rem;
  place-items:center;
  color:#617287;
  border:1px solid #dce3ea;
  border-radius:.56rem;
  background:#fff;
  transition:color .15s ease,border-color .15s ease,background-color .15s ease;
}
.theme-toggle:hover,.theme-toggle[aria-expanded="true"] { color:var(--hrms-blue); border-color:#b9cde0; background:#f6f9fc; }
.theme-toggle svg { width:1.08rem; height:1.08rem; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.theme-menu {
  position:absolute;
  z-index:1060;
  top:calc(100% + .65rem);
  right:0;
  width:280px;
  padding:.65rem;
  border:1px solid #dfe5ec;
  border-radius:.76rem;
  background:#fff;
  box-shadow:0 18px 44px rgba(24,45,70,.17);
}
.theme-menu[hidden] { display:none !important; }
.theme-menu-head { display:flex; flex-direction:column; padding:.35rem .4rem .65rem; }
.theme-menu-head strong { color:#28394f; font-size:.8rem; }
.theme-menu-head span { margin-top:.14rem; color:#929daa; font-size:.64rem; }
.theme-option { display:grid; width:100%; grid-template-columns:48px 1fr 18px; align-items:center; gap:.65rem; padding:.58rem; color:#526378; border:1px solid transparent; border-radius:.6rem; background:#fff; text-align:left; }
.theme-option + .theme-option { margin-top:.28rem; }
.theme-option:hover { background:#f7f9fb; }
.theme-option.active { border-color:#cbd9e6; background:#f4f8fb; }
.theme-option > span:nth-child(2) { display:flex; min-width:0; flex-direction:column; }
.theme-option strong { color:#34465a; font-size:.72rem; }
.theme-option small { margin-top:.13rem; color:#929daa; font-size:.59rem; }
.theme-option b { visibility:hidden; color:var(--hrms-blue); font-size:.75rem; }
.theme-option.active b { visibility:visible; }
.theme-preview { display:grid; width:48px; height:34px; grid-template-columns:13px 1fr; grid-template-rows:8px 1fr; gap:3px; overflow:hidden; padding:3px; border:1px solid #dfe5eb; border-radius:.4rem; background:#f4f6f8; }
.theme-preview i { display:block; border-radius:2px; }
.theme-preview i:first-child { grid-row:1/3; background:#17365d; }
.theme-preview i:nth-child(2) { background:#fff; }
.theme-preview i:nth-child(3) { background:#2e74b5; }
.theme-preview-orange { background:#f5f5f6; }
.theme-preview-orange i:first-child { background:#fff; border:1px solid #e2e4e7; }
.theme-preview-orange i:nth-child(2) { background:#fff; }
.theme-preview-orange i:nth-child(3) { background:#ff6b35; }

/* SmartHR-inspired light theme: original implementation, no third-party assets */
html[data-portal-theme="smarthr"] {
  --hrms-navy:#25282d;
  --hrms-navy-dark:#1d2024;
  --hrms-blue:#ff6b35;
  --hrms-blue-dark:#e75a28;
  --hrms-blue-soft:#fff0e9;
  --hrms-ink:#252b35;
  --hrms-canvas:#f6f6f7;
}
html[data-portal-theme="smarthr"] .portal-authenticated { background:#f6f6f7; }
html[data-portal-theme="smarthr"] .brand-mark { background:linear-gradient(145deg,#ff8154,#ff5d26); box-shadow:0 7px 16px rgba(255,107,53,.22); }
html[data-portal-theme="smarthr"] .brand-copy strong { color:#343a42; }
html[data-portal-theme="smarthr"] .portal-sidebar { border-right-color:#e5e6e8; box-shadow:none; }
html[data-portal-theme="smarthr"] .sidebar-link:hover { color:#272c33; background:#f3f3f4; }
html[data-portal-theme="smarthr"] .sidebar-link.active {
  position:relative;
  color:#272c33;
  background:#eff0f2;
  box-shadow:none;
}
html[data-portal-theme="smarthr"] .sidebar-link.active::before {
  position:absolute;
  top:.55rem;
  bottom:.55rem;
  left:0;
  width:3px;
  content:"";
  border-radius:0 3px 3px 0;
  background:#ff6b35;
}
html[data-portal-theme="smarthr"] .sidebar-link.active svg { color:#ff6b35; }
html[data-portal-theme="smarthr"] .sidebar-submenu a:hover,
html[data-portal-theme="smarthr"] .sidebar-submenu a.active { color:#ed5c28; background:#fff3ed; }
html[data-portal-theme="smarthr"] .sidebar-footer-card { color:#6f4b3d; border-color:#ffd8c8; background:linear-gradient(140deg,#fff6f1,#ffe8dd); }
html[data-portal-theme="smarthr"] .sidebar-footer-card span { color:#aa735d; }
html[data-portal-theme="smarthr"] .sidebar-footer-card strong { color:#d85425; }
html[data-portal-theme="smarthr"] .portal-topbar { border-bottom-color:#e8e9eb; box-shadow:0 2px 9px rgba(30,34,39,.025); }
html[data-portal-theme="smarthr"] .topbar-action { background:#ff6b35; box-shadow:0 6px 14px rgba(255,107,53,.18); }
html[data-portal-theme="smarthr"] .topbar-action:hover { background:#e75a28; }
html[data-portal-theme="smarthr"] .topbar-user .user-avatar { border-color:#ffd2c1; background:linear-gradient(145deg,#ff8154,#ff5d26); }
html[data-portal-theme="smarthr"] .theme-toggle:hover,
html[data-portal-theme="smarthr"] .theme-toggle[aria-expanded="true"] { color:#ff6b35; border-color:#ffc2aa; background:#fff7f3; }
html[data-portal-theme="smarthr"] .theme-option.active { border-color:#ffc7b1; background:#fff6f2; }
html[data-portal-theme="smarthr"] .portal-content .btn-primary { border-color:#ff6b35; background:#ff6b35; box-shadow:0 5px 12px rgba(255,107,53,.15); }
html[data-portal-theme="smarthr"] .portal-content .btn-primary:hover { border-color:#e75a28; background:#e75a28; }
html[data-portal-theme="smarthr"] .portal-content .btn-outline-primary { color:#e75a28; border-color:#f5aa8c; }
html[data-portal-theme="smarthr"] .portal-content .btn-outline-primary:hover { color:#fff; border-color:#ff6b35; background:#ff6b35; }
html[data-portal-theme="smarthr"] .form-section-icon { color:#e85b28; background:#fff0e9; }
html[data-portal-theme="smarthr"] .dashboard-welcome {
  color:#292f37;
  border:1px solid #e4e5e8;
  background:#fff;
  box-shadow:0 4px 14px rgba(31,35,40,.035);
}
html[data-portal-theme="smarthr"] .dashboard-welcome::after { border-color:rgba(255,107,53,.12); box-shadow:0 0 0 2.5rem rgba(255,107,53,.025),0 0 0 5rem rgba(255,107,53,.018); }
html[data-portal-theme="smarthr"] .welcome-avatar { color:#e85b28; border-color:#ffe0d3; background:#fff0e9; }
html[data-portal-theme="smarthr"] .dashboard-welcome p { color:#77828f; }
html[data-portal-theme="smarthr"] .welcome-actions .btn { color:#4f5a68; border-color:#d9dde2; background:#fff; }
html[data-portal-theme="smarthr"] .welcome-actions .btn:hover { color:#2c3239; border-color:#c7ccd2; background:#f7f7f8; }
html[data-portal-theme="smarthr"] .welcome-actions .btn:last-child { color:#fff; border-color:#ff6b35; background:#ff6b35; }
html[data-portal-theme="smarthr"] .welcome-actions .btn:last-child:hover { border-color:#e75a28; background:#e75a28; }
html[data-portal-theme="smarthr"] .metric-card,
html[data-portal-theme="smarthr"] .dashboard-card { border-color:#e5e6e8; box-shadow:0 3px 11px rgba(31,35,40,.025); }
html[data-portal-theme="smarthr"] .chart-bar { background:linear-gradient(180deg,#ff9069,#ff6b35); }
html[data-portal-theme="smarthr"] .chart-legend span::before { background:#ff6b35; }
html[data-portal-theme="smarthr"] .department-fill { background:linear-gradient(90deg,#ff6b35,#ff9b77); }
html[data-portal-theme="smarthr"] .workflow-badge,
html[data-portal-theme="smarthr"] .quick-link span { color:#e75a28; background:#fff0e9; }
html[data-portal-theme="smarthr"] .reports-hero,
html[data-portal-theme="smarthr"] .manual-hero {
  color:#29313b;
  border:1px solid #e4e5e8;
  border-top:4px solid #ff6b35;
  background:#fff;
  box-shadow:0 4px 14px rgba(31,35,40,.035);
}
html[data-portal-theme="smarthr"] .reports-hero p,
html[data-portal-theme="smarthr"] .manual-hero p { color:#7d8794; }
html[data-portal-theme="smarthr"] .reports-hero .eyebrow,
html[data-portal-theme="smarthr"] .manual-hero .eyebrow { color:#e75a28; }
html[data-portal-theme="smarthr"] .reports-hero__summary { color:#e75a28; border-color:#ffd1bf; background:#fff4ee; }
html[data-portal-theme="smarthr"] .reports-hero__summary span { color:#a86850; }
html[data-portal-theme="smarthr"] .auth-page .auth-card { border-top-color:#ff6b35; }

@media (max-width:767.98px) {
  .theme-menu { position:fixed; top:4.25rem; right:.65rem; left:.65rem; width:auto; }
}