/* ============================================================================
HRDashboardRedesign.css
Scope: HR Management > Default > Dashboard_Index and all its lazy-loaded
dashboard partials (Employee Strength, Pay Slip, Birthday, Employee
Status, Salary Statement, Probation, 25-Years-Completion, Attendance,
Leave Applications, Retirement).
Prefix / scope class: .hrdb-scope (added once, to the outer container of
Dashboard_Index.cshtml and to the root element of every partial that
can also be loaded standalone into a modal, so this file never
affects any other AdminLTE-skinned page).
Everything below is a pure re-skin of EXISTING markup/classes (.box,
.box-header, table.table, .nav-tabs-custom, .products-list, plus the
Chart.js htmlLegend classes .scroll/.listContainer/.li/.boxSpan/
.textContainer already emitted by Dashboard_Index.cshtml's chart JS) — no
id, form action, or JS hook is renamed here.
========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500&display=swap');
.hrdb-scope {
--hrdb-bg: #F3F5FB;
--hrdb-surface: #FFFFFF;
--hrdb-surface-2: #FAFBFF;
--hrdb-line: #E7E9F4;
--hrdb-ink: #262A41;
--hrdb-ink-soft: #6B7094;
--hrdb-ink-faint: #A6ABC7;
--hrdb-primary: #5B5FEF;
--hrdb-primary-dark: #4347C4;
--hrdb-primary-tint: #EDEEFD;
--hrdb-teal: #14B8A6;
--hrdb-teal-tint: #E3F8F5;
--hrdb-coral: #FF8A65;
--hrdb-coral-tint: #FFEDE5;
--hrdb-amber: #F5B942;
--hrdb-amber-tint: #FDF3DE;
--hrdb-violet: #8A3FFC;
--hrdb-violet-tint: #F2E9FF;
--hrdb-success: #2FBE8F;
--hrdb-danger: #F0576B;
--hrdb-radius-lg: 20px;
--hrdb-radius-md: 14px;
--hrdb-radius-sm: 9px;
--hrdb-shadow-soft: 0 1px 2px rgba(38,42,65,0.04), 0 8px 24px -10px rgba(38,42,65,0.12);
--hrdb-font-display: 'Space Grotesk', sans-serif;
--hrdb-font-body: 'Inter', sans-serif;
--hrdb-font-mono: 'IBM Plex Mono', monospace;
font-family: var(--hrdb-font-body);
color: var(--hrdb-ink);
}
/* ---------- Panels (.box) ---------- */
.hrdb-scope .box {
background: var(--hrdb-surface);
border-radius: var(--hrdb-radius-lg) !important;
box-shadow: var(--hrdb-shadow-soft);
border: 1px solid var(--hrdb-line);
overflow: hidden;
}
.hrdb-scope .box-header {
background: transparent;
border-bottom: 1px solid var(--hrdb-line);
padding: 14px 18px;
}
.hrdb-scope .box-header .box-title,
.hrdb-scope .box-title {
font-family: var(--hrdb-font-display);
font-weight: 600;
font-size: 14.5px;
color: var(--hrdb-ink);
}
.hrdb-scope .box-body {
padding: 14px 18px;
}
/* ---------- Card panel (replacement for AdminLTE .box/.box-header/.box-body,
used where the view no longer relies on those global classes) ---------- */
.hrdb-scope .hrdb-panel {
background: var(--hrdb-surface);
border-radius: var(--hrdb-radius-lg) !important;
box-shadow: var(--hrdb-shadow-soft);
border: 1px solid var(--hrdb-line);
overflow: hidden;
display: flex;
flex-direction: column;
height: 360px !important;
}
.hrdb-scope .hrdb-panel-body {
padding: 14px 18px;
flex: 1;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
}
/* Thin custom scrollbar — same as Employee Strength legend/hbar lists */
.hrdb-scope .hrdb-panel-body::-webkit-scrollbar,
.hrdb-scope .table-responsive::-webkit-scrollbar,
.hrdb-scope .tab-pane::-webkit-scrollbar,
.hrdb-scope #staffBirthdayDiv::-webkit-scrollbar,
.hrdb-scope .hrdb-drawer-body::-webkit-scrollbar { width: 5px; height: 5px; }
.hrdb-scope .hrdb-panel-body::-webkit-scrollbar-thumb,
.hrdb-scope .table-responsive::-webkit-scrollbar-thumb,
.hrdb-scope .tab-pane::-webkit-scrollbar-thumb,
.hrdb-scope #staffBirthdayDiv::-webkit-scrollbar-thumb,
.hrdb-scope .hrdb-drawer-body::-webkit-scrollbar-thumb { background: var(--hrdb-line); border-radius: 99px !important; }
.hrdb-scope .hrdb-panel-body::-webkit-scrollbar-track,
.hrdb-scope .table-responsive::-webkit-scrollbar-track,
.hrdb-scope .tab-pane::-webkit-scrollbar-track,
.hrdb-scope #staffBirthdayDiv::-webkit-scrollbar-track,
.hrdb-scope .hrdb-drawer-body::-webkit-scrollbar-track { background: transparent; }
/* ---------- Panel header — reused (class names + layout) from
MCampusUI/Areas/Enquiry/Views/Default/EnquiryAnalyticsDashboard_New.cshtml's
.enqad-panel-head/.enqad-panel-title/.enqad-panel-hd-right/.enqad-viewtoggle/
.enqad-vt-btn/.enqad-box-btn system, recolored with this stylesheet's
--hrdb-* tokens instead of introducing a second (--enqad-*) palette onto
this page. Unlike the reference's own container-query-based stacking, the
title here truncates instead of wrapping onto its own line — this keeps the
tool icons pinned to the header's right edge on every width without
depending on @container query support (which isn't guaranteed in every
client browser this app runs in), rather than the icons ever collapsing to
the left edge on a narrow render. ---------- */
.hrdb-scope .enqad-panel-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
border-bottom: 1px solid var(--hrdb-line);
padding: 14px 18px;
flex-wrap: nowrap;
position: relative;
overflow: visible;
z-index: 2;
}
/* Html.BeginForm() renders a