/* ═══════════════════════════════════════════════════════════════════════════
LEX Caribbean HR Portal — Material Design Stylesheet
Primary: #841B23 (LEX Maroon) | Secondary: #6D6E71 (LEX Grey)
═══════════════════════════════════════════════════════════════════════════ */
/* ─── Offline-capable icon font ──────────────────────────────────────────────
Local files in public/fonts/ take precedence when present (run
setup_offline.py once to download them). Falls back to the Google CDN
in index.html when fonts/ files are absent.
─────────────────────────────────────────────────────────────────────────── */
@font-face {
font-family: 'Material Icons Outlined';
font-style: normal;
font-weight: 400;
font-display: block;
src: local('Material Icons Outlined'),
url('/fonts/material-icons-outlined.woff2') format('woff2');
}
/* Class definition — present here so icons render even without the Google
CDN link (e.g. when fully offline and fonts/ files are in place). */
.material-icons-outlined {
font-family: 'Material Icons Outlined', sans-serif;
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
/* ── Lucide SVG icon base ────────────────────────────────────────────────── */
.li-icon {
width: 18px;
height: 18px;
display: inline-block;
vertical-align: middle;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
flex-shrink: 0;
pointer-events: none;
}
/* ─── Offline-capable body font ──────────────────────────────────────────── */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
font-display: swap;
src: local('Roboto Light'), local('Roboto-Light'),
url('/fonts/roboto-300.woff2') format('woff2');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Roboto'), local('Roboto-Regular'),
url('/fonts/roboto-400.woff2') format('woff2');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-display: swap;
src: local('Roboto Medium'), local('Roboto-Medium'),
url('/fonts/roboto-500.woff2') format('woff2');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
font-display: swap;
src: local('Roboto Bold'), local('Roboto-Bold'),
url('/fonts/roboto-700.woff2') format('woff2');
}
:root {
--primary: #841B23;
--primary-dark: #5C1219;
--primary-light: #A52830;
--primary-surface: #F9EDEE;
--secondary: #6D6E71;
--secondary-light: #9E9FA2;
--secondary-surface: #F5F5F5;
--lex-blue: #2A74BB;
--lex-navy: #212557;
--lex-red: #D03F4A;
--lex-sky: #7ECAF0;
--lex-yellow: #FDC264;
--lex-green: #A6BA9A;
--surface: #FFFFFF;
--bg: #F4F5F7;
--on-primary: #FFFFFF;
--text-primary: #1A1A1A;
--text-secondary: #6D6E71;
--text-hint: #9E9EA0;
--divider: #E0E0E0;
--shadow-sm: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
--shadow-md: 0 4px 6px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06);
--shadow-lg: 0 10px 25px rgba(0,0,0,0.12), 0 4px 10px rgba(0,0,0,0.08);
--radius: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--sidebar-w: 260px;
--topbar-h: 64px;
--transition: 0.2s ease;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; }
body { font-family: 'Roboto', sans-serif; background: var(--bg); color: var(--text-primary); min-height: 100vh; overflow-x: hidden; }
a { cursor: pointer; text-decoration: none; }
.hidden { display: none !important; }
/* ─── SCROLLBAR ─────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(130,130,130,0.5); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(130,130,130,0.8); }
* { scrollbar-width: thin; scrollbar-color: rgba(130,130,130,0.5) transparent; }
/* ═══════════════════════════ LOGIN PAGE ═══════════════════════════════════ */
.login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; background: linear-gradient(155deg, #0C1A2E 0%, #18244A 55%, #212557 100%); }
.login-bg { display: none; }
.login-card { position: relative; background: transparent; border-radius: 0; padding: 48px 40px; width: 100%; max-width: 400px; margin: 16px; box-shadow: none; }
.login-logo { display: flex; align-items: center; gap: 14px; margin-bottom: 40px; justify-content: center; }
.logo-mark { width: 48px; height: 48px; background: var(--primary); color: white; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700; }
.logo-mark-sm { width: 36px; height: 36px; background: var(--primary); color: white; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; flex-shrink: 0; }
.logo-name { font-size: 18px; font-weight: 700; color: white; letter-spacing: -0.3px; }
.logo-sub { font-size: 12px; color: rgba(255,255,255,0.4); margin-top: 2px; }
.login-title { font-size: 26px; font-weight: 600; color: white; margin-bottom: 6px; text-align: center; }
.login-desc { font-size: 14px; color: rgba(255,255,255,0.45); margin-bottom: 36px; text-align: center; }
.input-group { position: relative; margin-bottom: 28px; }
.input-label { display: block; font-size: 10px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 10px; }
.input-icon { display: none; }
.input-group input { width: 100%; padding: 0 36px 12px 0; border: none; border-bottom: 1.5px solid rgba(255,255,255,0.2); border-radius: 0; font-family: 'Roboto', sans-serif; font-size: 15px; background: transparent; color: white; outline: none; transition: border-color 0.2s; box-sizing: border-box; }
.input-group input::placeholder { color: rgba(255,255,255,0.22); }
.input-group input:focus { border-bottom-color: rgba(255,255,255,0.7); }
.pw-toggle { position: absolute; right: 0; bottom: 10px; background: none; border: none; cursor: pointer; color: rgba(255,255,255,0.35); padding: 4px; display: flex; transition: color 0.2s; }
.pw-toggle:hover { color: rgba(255,255,255,0.7); }
.login-error { background: rgba(255,255,255,0.08); color: #FF8A8A; border-radius: var(--radius); padding: 10px 14px; font-size: 13px; margin-bottom: 16px; border: 1px solid rgba(255,100,100,0.3); }
.btn-login { width: 100%; padding: 15px; background: var(--primary); color: white; border: none; border-radius: var(--radius); font-family: 'Roboto', sans-serif; font-size: 15px; font-weight: 500; cursor: pointer; letter-spacing: 0.5px; transition: background var(--transition), transform var(--transition); margin-top: 8px; }
.btn-login:hover { background: var(--primary-light); }
.btn-login:active { transform: scale(0.98); }
.btn-login:disabled { background: rgba(132,27,35,0.45); cursor: not-allowed; }
.login-hint { margin-top: 20px; font-size: 11px; color: rgba(255,255,255,0.18); text-align: center; }
/* MFA panel */
.login-page { position: relative; }
#login-card-inner, #mfa-panel { transition: opacity 0.2s; }
.mfa-divider { display: flex; align-items: center; gap: 10px; margin: 18px 0; color: rgba(255,255,255,0.3); font-size: 12px; }
.mfa-divider::before, .mfa-divider::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,0.15); }
.mfa-back-link { display: block; text-align: center; margin-top: 16px; font-size: 13px; color: rgba(255,255,255,0.4); cursor: pointer; text-decoration: none; transition: color 0.2s; }
.mfa-back-link:hover { color: rgba(255,255,255,0.8); }
.mfa-waiting { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 20px 0; color: rgba(255,255,255,0.5); font-size: 13px; }
.mfa-waiting .spinner { width: 28px; height: 28px; border-width: 3px; border-color: rgba(255,255,255,0.12); border-top-color: white; }
.login-footer { margin-top: 32px; text-align: center; font-size: 11px; color: rgba(255,255,255,0.18); }
/* ═══════════════════════════ LAYOUT ═══════════════════════════════════════ */
#app { display: flex; min-height: 100vh; }
/* ─── SIDEBAR ───────────────────────────────────────────────────────────── */
.sidebar { width: var(--sidebar-w); background: #0C1A2E; color: white; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; height: 100vh; z-index: 200; transition: transform var(--transition), background 0.35s ease; overflow: hidden; }
.sidebar.payroll-mode { background: #0C1A2E; }
.sidebar.payroll-mode .nav-item.active { background: rgba(59,130,246,0.18); color: #7BB3F0; border-left-color: #3B82F6; }
.sidebar.payroll-mode .nav-alert-dot { border-color: #0C1A2E; }
.sidebar-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 16px 16px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.sidebar-logo { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.sidebar-logo .logo-mark-sm, .sidebar-logo img { margin-bottom: 4px; }
.sidebar-brand { font-size: 15px; font-weight: 600; color: rgba(255,255,255,0.9); }
.sidebar-tagline { font-size: 20px; font-weight: 700; color: var(--lex-red); line-height: 1.3; }
.sidebar-close { background: none; border: none; color: rgba(255,255,255,0.5); cursor: pointer; display: none; padding: 4px; }
.sidebar-user { padding: 16px; border-bottom: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; gap: 12px; }
.user-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--primary); color: white; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 15px; flex-shrink: 0; }
.user-name { font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role { font-size: 11px; color: rgba(255,255,255,0.45); text-transform: uppercase; letter-spacing: 0.6px; margin-top: 2px; }
.sidebar-nav { flex: 1; overflow-y: auto; padding: 10px 0; scrollbar-width: thin; scrollbar-color: rgba(220,220,220,0.35) transparent; }
.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(220,220,220,0.35); border-radius: 2px; }
.sidebar-nav::-webkit-scrollbar-thumb:hover { background: rgba(220,220,220,0.6); }
.nav-section-label { font-size: 10px; font-weight: 600; color: rgba(255,255,255,0.3); letter-spacing: 1.2px; padding: 14px 18px 4px; text-transform: uppercase; }
.nav-item { display: flex; align-items: center; gap: 13px; padding: 11px 18px; color: rgba(255,255,255,0.65); font-size: 14px; font-weight: 400; transition: all var(--transition); border-left: 3px solid transparent; cursor: pointer; }
.nav-item:hover { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.9); }
.nav-item.active { background: rgba(132,27,35,0.2); color: var(--lex-red); border-left-color: var(--primary); }
.nav-item .material-icons-outlined { font-size: 20px; }
.nav-icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.mode-icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.nav-item .badge { margin-left: auto; background: var(--primary); color: white; border-radius: 10px; padding: 1px 7px; font-size: 11px; font-weight: 600; }
.nav-alert-dot { width: 11px; height: 11px; background: var(--lex-blue); border-radius: 50%; border: 2px solid #0C1A2E; margin-left: auto; flex-shrink: 0; animation: nav-dot-ring 1.6s ease-out infinite; }
.nav-alert-dot.hidden { display: none; }
.nav-item .nav-alert-dot:not(.hidden) + .badge { margin-left: 6px; }
.sidebar-top-fixed { flex-shrink: 0; }
.sidebar-footer { border-top: 1px solid rgba(255,255,255,0.08); padding: 8px 0; flex-shrink: 0; }
.sidebar-version { display: block; font-size: 11px; color: rgba(255,255,255,0.3); text-align: center; padding: 4px 0 2px; letter-spacing: 0.03em; }
/* ─── MAIN ──────────────────────────────────────────────────────────────── */
.main-wrapper { flex: 1; margin-left: var(--sidebar-w); display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
/* ─── TOPBAR ────────────────────────────────────────────────────────────── */
.topbar { height: var(--topbar-h); background: var(--surface); display: flex; align-items: center; padding: 0 20px; gap: 16px; position: sticky; top: 0; z-index: 100; box-shadow: var(--shadow-sm); }
.menu-btn { background: none; border: none; cursor: pointer; color: var(--text-secondary); padding: 8px; border-radius: 50%; display: flex; transition: background var(--transition); display: none; }
.menu-btn:hover { background: var(--bg); }
#topbar-title-area { flex: 1; min-width: 0; }
.topbar-title { font-size: 20px; font-weight: 600; color: var(--text-primary); }
.topbar-subtitle { font-size: 12px; color: var(--text-secondary); display: none; margin-top: 1px; }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.icon-btn { background: none; border: none; cursor: pointer; color: var(--text-secondary); padding: 8px; border-radius: 50%; display: flex; position: relative; transition: background var(--transition); }
.icon-btn:hover { background: var(--bg); }
.notif-dot { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; background: var(--primary); border-radius: 50%; border: 2px solid white; }
/* ─── Stat-card icon layout ───────────────────────────────────────────────── */
.stat-icon { display: flex; align-items: center; justify-content: center; }
/* ─── CSS Animations ─────────────────────────────────────────────────────── */
/* Notification bell — pulse the dot, ring the bell icon when there are unread items */
@keyframes notif-pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.4); opacity: 0.7; }
}
@keyframes bell-ring {
0%,100% { transform: rotate(0deg); }
10% { transform: rotate(18deg); }
20% { transform: rotate(-16deg); }
30% { transform: rotate(14deg); }
40% { transform: rotate(-12deg); }
50% { transform: rotate(8deg); }
60% { transform: rotate(-4deg); }
70% { transform: rotate(2deg); }
80% { transform: rotate(0deg); }
}
.notif-dot.has-unread { animation: notif-pulse 1.4s ease-in-out infinite; }
#notif-btn.has-unread .notif-bell { animation: bell-ring 2.4s ease-in-out infinite; display: inline-block; transform-origin: 50% 0; color: var(--primary); }
@keyframes nav-dot-ring {
0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(42,116,187,0.75); }
50% { transform: scale(1.15); box-shadow: 0 0 0 5px rgba(42,116,187,0); }
100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(42,116,187,0); }
}
/* Stat-card icon — spring on hover */
@keyframes stat-spring {
0% { transform: scale(1) rotate(0deg); }
30% { transform: scale(1.18) rotate(-8deg); }
55% { transform: scale(1.12) rotate(5deg); }
75% { transform: scale(1.06) rotate(-2deg); }
100% { transform: scale(1) rotate(0deg); }
}
.stat-card:hover .stat-icon .material-icons-outlined { animation: stat-spring 0.45s ease forwards; }
/* Empty-state icons — gentle float */
@keyframes empty-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-7px); }
}
.empty-state .material-icons-outlined { font-size: 64px; margin-bottom: 8px; color: var(--text-tertiary); animation: empty-float 3s ease-in-out infinite; display: block; }
/* Ann-alert header icon — slow pulse */
@keyframes alert-pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.15); opacity: 0.75; }
}
.ann-alert-header .material-icons-outlined { animation: alert-pulse 1.8s ease-in-out infinite; }
.topbar-avatar { width: 38px; height: 38px; background: var(--primary); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; cursor: pointer; flex-shrink: 0; }
.topbar-user { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 4px 8px; border-radius: 8px; transition: background var(--transition); user-select: none; }
.topbar-user:hover { background: var(--bg); }
.topbar-user .user-name { font-size: 13px; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-user .user-role { font-size: 11px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.6px; margin-top: 1px; }
.user-menu-chevron { font-size: 18px !important; color: var(--text-secondary); transition: transform var(--transition); }
.topbar-user.open .user-menu-chevron { transform: rotate(180deg); }
.user-menu-wrap { position: relative; }
.user-menu { position: absolute; top: calc(100% + 6px); right: 0; background: var(--surface, #fff); border-radius: 10px; box-shadow: var(--shadow-lg); border: 1px solid var(--divider); min-width: 190px; padding: 6px 0; z-index: 300; }
.user-menu-item { display: flex; align-items: center; gap: 10px; padding: 10px 16px; font-size: 14px; color: var(--text-primary); cursor: pointer; transition: background var(--transition); text-decoration: none; white-space: nowrap; }
.user-menu-item:hover { background: var(--bg); }
.user-menu-item .material-icons-outlined { font-size: 18px !important; color: var(--text-secondary); }
.user-menu-divider { height: 1px; background: var(--divider); margin: 4px 0; }
.user-menu-signout { color: #d32f2f; }
.user-menu-signout .material-icons-outlined { color: #d32f2f !important; }
/* ─── NOTIFICATIONS ─────────────────────────────────────────────────────── */
.notif-panel { position: fixed; top: var(--topbar-h); right: 0; width: 360px; background: white; box-shadow: var(--shadow-lg); z-index: 150; max-height: calc(100vh - var(--topbar-h)); overflow-y: auto; border-left: 1px solid var(--divider); }
.notif-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--divider); font-weight: 500; font-size: 15px; position: sticky; top: 0; background: white; }
.notif-mark-read { background: none; border: none; color: var(--primary); font-size: 12px; cursor: pointer; font-family: 'Roboto', sans-serif; }
.notif-list { padding: 8px 0; }
.notif-item { padding: 12px 20px; display: flex; gap: 12px; align-items: flex-start; border-bottom: 1px solid var(--divider); cursor: pointer; transition: background var(--transition); }
.notif-item:hover { background: var(--bg); }
.notif-item.unread { background: var(--primary-surface); }
.notif-item-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.notif-item-icon.info { background: #E3F2FD; color: var(--lex-blue); }
.notif-item-icon.success { background: #E8F5E9; color: #4CAF50; }
.notif-item-icon.warning { background: #FFF8E1; color: #FF9800; }
.notif-title { font-size: 13px; font-weight: 500; }
.notif-msg { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.notif-time { font-size: 11px; color: var(--text-hint); margin-top: 4px; }
.notif-empty { padding: 40px 20px; text-align: center; color: var(--text-hint); font-size: 14px; }
/* ─── Anniversary leave alert section (notification panel) ───────────────── */
.ann-alert-section { border-bottom: 2px solid var(--divider); padding-bottom: 4px; }
.ann-alert-header { display: flex; align-items: center; gap: 8px; padding: 10px 16px 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #E65100; background: #FFF8E1; border-bottom: 1px solid #FFE082; }
.ann-alert-item { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--divider); transition: background var(--transition); }
.ann-alert-item:hover { background: var(--bg); }
.ann-alert-avatar { width: 34px; height: 34px; flex-shrink: 0; }
.ann-alert-avatar .avatar { width: 34px; height: 34px; font-size: 12px; }
.ann-alert-info { flex: 1; min-width: 0; }
.ann-alert-name { font-size: 13px; font-weight: 500; margin-bottom: 3px; }
.ann-alert-types { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 3px; }
.ann-alert-chip { font-size: 11px; background: #FFF3E0; color: #E65100; border-radius: 4px; padding: 1px 6px; }
.ann-alert-exp { font-size: 11px; font-weight: 500; }
.ann-alert-exp.urgent { color: #C62828; }
.ann-alert-exp.expired { color: #7B1FA2; }
.ann-alert-exp.upcoming { color: #2E7D32; }
.btn-warning { background: #FF6F00; color: white; }
.btn-warning:hover { background: #E65100; }
/* ─── PAGE CONTENT ──────────────────────────────────────────────────────── */
.page-content { flex: 1; padding: 24px; overflow-y: auto; }
/* ─── CARDS ─────────────────────────────────────────────────────────────── */
.card { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.card-header { padding: 18px 20px 14px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--divider); }
.card-title { font-size: 16px; font-weight: 600; color: var(--text-primary); }
.card-body { padding: 20px; }
.emp-history-card { padding: 20px; cursor: pointer; transition: box-shadow var(--transition), transform var(--transition); }
.emp-history-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.emp-history-card:active { transform: translateY(0); }
/* ─── STAT CARDS ────────────────────────────────────────────────────────── */
.stat-grid { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; }
.stat-card { background: var(--surface); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-sm); display: flex; align-items: center; gap: 16px; flex: 0 0 auto; }
.stat-icon { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.stat-icon .material-icons-outlined { font-size: 26px; }
.stat-value { font-size: 28px; font-weight: 700; line-height: 1; color: var(--text-primary); }
.stat-label { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
/* ─── DATA GRID ─────────────────────────────────────────────────────────── */
.content-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.content-grid.wide { grid-template-columns: 2fr 1fr; }
/* ─── TABLES ────────────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
thead th { padding: 12px 16px; text-align: left; font-size: 11px; font-weight: 600; color: var(--text-hint); text-transform: uppercase; letter-spacing: 0.8px; background: var(--bg); border-bottom: 1px solid var(--divider); white-space: nowrap; }
tbody tr { border-bottom: 1px solid var(--divider); transition: background var(--transition); }
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: var(--bg); }
tbody td { padding: 12px 16px; color: var(--text-primary); vertical-align: middle; }
.td-meta { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
/* ─── BADGES ────────────────────────────────────────────────────────────── */
.badge-status { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 20px; font-size: 11.5px; font-weight: 500; white-space: nowrap; }
.badge-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.8; }
.badge-pending { background: #FFF8E1; color: #E65100; }
.badge-approved { background: #E8F5E9; color: #2E7D32; }
.badge-rejected { background: #FFEBEE; color: #C62828; }
.badge-cancelled { background: #F5F5F5; color: var(--text-secondary); }
.badge-tentative { background: #EFEBE9; color: #4E342E; }
.badge-builtin { background: #E8EAF6; color: #283593; }
.badge-open { background: #E3F2FD; color: #1565C0; }
.badge-closed { background: #F5F5F5; color: var(--text-secondary); }
.badge-resigned { background: #EDE7F6; color: #6A1B9A; }
.badge-deceased { background: #ECEFF1; color: #37474F; }
.stat-card-link { cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.stat-card-link:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.10); }
.stat-card-link:active { transform: translateY(0); }
@keyframes emp-remove {
0% { opacity: 1; transform: translateX(0); }
100% { opacity: 0; transform: translateX(-24px); }
}
.emp-row-removing {
animation: emp-remove 0.35s ease forwards;
pointer-events: none;
}
.badge-new { background: #E8F5E9; color: #2E7D32; }
.badge-reviewing { background: #E3F2FD; color: #1565C0; }
.badge-shortlisted { background: #EDE7F6; color: #4527A0; }
.badge-interview { background: #FFF8E1; color: #E65100; }
.badge-offered { background: #E0F7FA; color: #00695C; }
.badge-hired { background: #E8F5E9; color: #1B5E20; }
.badge-paused { background: #FFF3E0; color: #BF360C; }
.badge-draft { background: #F5F5F5; color: #757575; }
.badge-scheduled { background: #E3F2FD; color: #1565C0; }
.badge-completed { background: #E8F5E9; color: #2E7D32; }
/* ─── BUTTONS ───────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; border-radius: var(--radius); font-family: 'Roboto', sans-serif; font-size: 13.5px; font-weight: 500; cursor: pointer; border: none; transition: all var(--transition); letter-spacing: 0.3px; }
.btn .material-icons-outlined { font-size: 17px; }
.btn-primary { background: var(--primary); color: white; }
.btn-primary:hover { background: var(--primary-light); box-shadow: 0 2px 8px rgba(132,27,35,0.3); }
.btn-secondary { background: var(--bg); color: var(--text-secondary); border: 1px solid var(--divider); }
.btn-secondary:hover { background: var(--divider); }
.btn-danger { background: var(--lex-red); color: white; }
.btn-danger:hover { background: #B33340; }
.btn-success { background: #4CAF50; color: white; }
.btn-success:hover { background: #43A047; }
.btn-tentative { background: #795548; color: white; }
.btn-tentative:hover { background: #6D4C41; }
.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn-icon { background: none; border: none; cursor: pointer; padding: 6px; border-radius: 50%; color: var(--text-secondary); display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; transition: background var(--transition); }
.btn-icon:hover { background: var(--bg); }
.btn-icon .material-icons-outlined { font-size: 18px; }
/* ─── BATCH SELECT ──────────────────────────────────────────────────────── */
.th-select, .td-select { width: 36px; min-width: 36px; padding: 0 6px !important; text-align: center; }
.th-select input[type="checkbox"],
.td-select input[type="checkbox"] { width: 15px; height: 15px; cursor: pointer; accent-color: var(--lex-red); vertical-align: middle; }
/* ─── FORMS ─────────────────────────────────────────────────────────────── */
.form-grid { display: grid; gap: 16px; }
.form-grid-2 { grid-template-columns: 1fr 1fr; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group.full { grid-column: 1 / -1; }
.form-label { font-size: 13px; font-weight: 500; color: var(--text-secondary); }
.form-label-hint { display: block; font-size: 11px; font-weight: 400; color: var(--text-hint); margin-top: 1px; }
.form-control { padding: 10px 13px; border: 1.5px solid var(--divider); border-radius: var(--radius); font-family: 'Roboto', sans-serif; font-size: 14px; color: var(--text-primary); background: var(--surface); outline: none; transition: border-color var(--transition); width: 100%; }
.form-control:focus { border-color: var(--primary); }
.form-control.is-invalid { border-color: var(--danger, #DC3545); background: rgba(220,53,69,0.04); }
.form-control.is-invalid:focus { border-color: var(--danger, #DC3545); }
.form-control::placeholder { color: var(--text-hint); }
select.form-control { cursor: pointer; }
textarea.form-control { resize: vertical; min-height: 90px; }
/* ─── FILTERS BAR ───────────────────────────────────────────────────────── */
.filters-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.search-input { position: relative; flex: 1; min-width: 200px; }
.search-input input { width: 100%; padding: 9px 12px 9px 38px; border: 1.5px solid var(--divider); border-radius: var(--radius); font-size: 13.5px; font-family: 'Roboto', sans-serif; background: var(--surface); outline: none; transition: border-color var(--transition); }
.search-input input:focus { border-color: var(--primary); }
.search-input .material-icons-outlined { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-hint); font-size: 18px; pointer-events: none; }
.filter-select { padding: 9px 12px; border: 1.5px solid var(--divider); border-radius: var(--radius); font-size: 13px; font-family: 'Roboto', sans-serif; background: var(--surface); cursor: pointer; outline: none; color: var(--text-primary); }
.filter-select:focus { border-color: var(--primary); }
/* ─── LEAVE POLICY TOOLTIP ──────────────────────────────────────────────── */
.leave-policy-tip { position: relative; }
.leave-policy-tooltip {
display: none;
position: absolute;
right: 0; top: calc(100% + 8px);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow-md);
padding: 10px 14px;
font-size: 13px;
line-height: 1.6;
color: var(--text-primary);
white-space: nowrap;
z-index: 200;
min-width: 260px;
text-align: left;
}
.leave-policy-tip:hover .leave-policy-tooltip { display: block; }
/* ─── LEAVE BALANCE ─────────────────────────────────────────────────────── */
.balance-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
.balance-card { background: var(--surface); border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--shadow-sm); border-top: 4px solid var(--primary); }
.balance-type { font-size: 12px; font-weight: 500; color: var(--text-secondary); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; }
.balance-numbers { display: flex; align-items: baseline; gap: 6px; }
.balance-remaining { font-size: 28px; font-weight: 700; color: var(--text-primary); }
.balance-total { font-size: 13px; color: var(--text-hint); }
.balance-bar { height: 4px; background: var(--divider); border-radius: 2px; margin-top: 10px; overflow: hidden; }
.balance-fill { height: 100%; border-radius: 2px; background: var(--primary); transform-origin: left center; animation: growBar 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; }
/* ─── AVATAR ────────────────────────────────────────────────────────────── */
.avatar { width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: white; background: var(--primary); flex-shrink: 0; overflow: hidden; }
/* ─── USER ROW ──────────────────────────────────────────────────────────── */
.user-row { display: flex; align-items: center; gap: 10px; }
.user-row-info { min-width: 0; }
.user-row-name { font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-row-meta { font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ─── CALENDAR ──────────────────────────────────────────────────────────── */
.calendar-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.cal-title { font-size: 18px; font-weight: 600; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--divider); border: 1px solid var(--divider); border-radius: var(--radius-lg); overflow: hidden; }
.cal-day-header { background: var(--bg); padding: 10px; text-align: center; font-size: 11px; font-weight: 600; color: var(--text-hint); text-transform: uppercase; letter-spacing: 0.8px; }
.cal-day { background: var(--surface); padding: 8px; min-height: 100px; cursor: pointer; transition: background var(--transition); }
.cal-day:hover { background: var(--bg); }
.cal-day.other-month { background: #FAFAFA; }
.cal-day.today .cal-date { background: var(--primary); color: white; border-radius: 50%; }
.cal-day.today { background: var(--primary-surface); }
.cal-date { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 500; margin-bottom: 4px; }
.cal-event { font-size: 10.5px; padding: 2px 6px; border-radius: 4px; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: white; font-weight: 500; }
/* ─── CHARTS ────────────────────────────────────────────────────────────── */
.chart-bar-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.chart-bar-label { font-size: 12px; color: var(--text-secondary); width: 120px; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chart-bar-track { flex: 1; height: 8px; background: var(--divider); border-radius: 4px; overflow: hidden; }
.chart-bar-fill { height: 100%; border-radius: 4px; transform-origin: left center; animation: growBar 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; }
.chart-bar-value { font-size: 12px; font-weight: 500; color: var(--text-primary); width: 36px; text-align: right; }
/* ─── MONTHLY TREND DRILLDOWN ───────────────────────────────────────────── */
.chart-bar-clickable { cursor: pointer; border-radius: 6px; padding: 4px 6px; margin: 0 -6px 8px; transition: background var(--transition); }
.chart-bar-clickable:hover { background: var(--primary-surface); }
.chart-bar-clickable:hover .chart-bar-label { color: var(--primary); }
.chart-bar-clickable.trend-bar-selected { background: var(--primary-surface); }
.chart-bar-clickable.trend-bar-selected .chart-bar-label { color: var(--primary); font-weight: 600; }
.chart-bar-clickable.trend-bar-selected .chart-bar-fill { filter: brightness(1.1); }
.trend-drilldown-inline { background: var(--bg); border: 1px solid var(--divider); border-radius: var(--radius-lg); margin: 4px 0 12px 0; padding: 14px 16px; animation: fadeIn 0.2s ease; position: relative; }
.trend-drilldown-inline::before { content: ''; position: absolute; top: -8px; left: 32px; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid var(--divider); }
.trend-drilldown-inline::after { content: ''; position: absolute; top: -7px; left: 33px; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid var(--bg); }
.trend-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 13px; flex-wrap: wrap; }
.trend-breadcrumb.hidden { display: none; }
.trend-bc-back { display: flex; align-items: center; gap: 4px; background: none; border: none; color: var(--primary); font-size: 13px; cursor: pointer; padding: 2px 6px; border-radius: 4px; transition: background var(--transition); font-family: inherit; }
.trend-bc-back:hover { background: var(--primary-surface); }
.trend-bc-back .material-icons-outlined { font-size: 15px; }
.trend-bc-link { background: none; border: none; color: var(--primary); font-size: 13px; cursor: pointer; padding: 2px 4px; border-radius: 4px; transition: background var(--transition); font-family: inherit; text-decoration: underline; text-underline-offset: 2px; }
.trend-bc-link:hover { background: var(--primary-surface); }
.trend-bc-sep { color: var(--text-hint); font-size: 16px; }
.trend-bc-current { color: var(--text-primary); font-weight: 600; }
.trend-drill-header { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); margin-bottom: 14px; border-left: 3px solid var(--lex-blue); padding-left: 10px; }
.trend-drill-header .material-icons-outlined { font-size: 16px; color: var(--lex-blue); }
.trend-drill-loading { display: flex; align-items: center; gap: 8px; padding: 20px; color: var(--text-hint); font-size: 13px; }
.trend-drill-loading .material-icons-outlined { font-size: 18px; animation: empty-float 1.2s ease-in-out infinite; }
.trend-drill-error { display: flex; align-items: center; gap: 8px; padding: 16px; color: var(--error); font-size: 13px; }
.trend-drill-bars { padding: 0 4px; }
/* ─── MODAL ─────────────────────────────────────────────────────────────── */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 500; display: flex; align-items: center; justify-content: center; padding: 16px; backdrop-filter: blur(3px); animation: fadeIn 0.18s ease; }
.inner-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 600; display: flex; align-items: center; justify-content: center; padding: 16px; animation: fadeIn 0.18s ease; }
.modal { background: var(--surface); border-radius: var(--radius-xl); width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-lg); animation: slideUpModal 0.26s cubic-bezier(0.34, 1.15, 0.64, 1) both; }
.modal.modal-lg { max-width: 760px; }
.modal-header {
padding: 0 20px;
display: flex; align-items: center; gap: 10px;
border-bottom: 1px solid var(--divider);
position: sticky; top: 0; z-index: 1;
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
min-height: 54px;
}
.modal-header h3 { font-size: 16px; font-weight: 600; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; letter-spacing: 0.2px; }
.modal-header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.modal-header-actions .btn { padding: 6px 14px; font-size: 13px; background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.3); color: #fff; }
.modal-header-actions .btn:hover { background: rgba(255,255,255,0.25); }
.modal-header-actions .btn.btn-primary { background: #fff; color: var(--primary); border-color: transparent; }
.modal-header-actions .btn.btn-primary:hover { background: #f0e8e9; }
.modal-header-actions .btn .material-icons-outlined { font-size: 15px; }
.modal-close { background: none; border: none; cursor: pointer; color: rgba(255,255,255,0.75); padding: 4px; display: flex; border-radius: 50%; transition: background var(--transition), color var(--transition); flex-shrink: 0; }
.modal-close:hover { background: rgba(255,255,255,0.15); color: #fff; }
.modal-body { padding: 20px 24px; }
.modal-footer { display: none; }
/* ─── TOAST ─────────────────────────────────────────────────────────────── */
@keyframes toastIn { from { opacity:0; transform:translateX(-50%) translateY(16px) scale(0.95); } to { opacity:1; transform:translateX(-50%) translateY(0) scale(1); } }
@keyframes toastOut { from { opacity:1; transform:translateX(-50%) translateY(0) scale(1); } to { opacity:0; transform:translateX(-50%) translateY(8px) scale(0.96); } }
.toast {
position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%);
background: var(--primary-dark);
color: #fff;
padding: 11px 18px 11px 14px;
border-radius: 32px; /* pill shape */
display: flex; align-items: center; gap: 10px;
font-size: 13.5px; font-weight: 500;
box-shadow: 0 6px 24px rgba(0,0,0,0.22);
z-index: 1000; white-space: nowrap;
animation: toastIn 0.32s cubic-bezier(0.34, 1.1, 0.64, 1) both;
border-left: 4px solid rgba(255,255,255,0.35);
}
.toast .material-icons-outlined { font-size: 19px; flex-shrink: 0; }
/* Success — LEX green */
.toast.success { background: #1B5E20; border-left-color: #A5D6A7; }
.toast.success .material-icons-outlined { color: #A5D6A7; }
/* Error — deep red */
.toast.error { background: #7F0000; border-left-color: #FFCDD2; }
.toast.error .material-icons-outlined { color: #FFCDD2; }
/* Warning — amber */
.toast.warning { background: #BF360C; border-left-color: #FFCCBC; }
.toast.warning .material-icons-outlined { color: #FFCCBC; }
/* Info — LEX navy */
.toast.info { background: var(--lex-navy); border-left-color: #90CAF9; }
.toast.info .material-icons-outlined { color: #90CAF9; }
/* ─── EMPTY STATE ───────────────────────────────────────────────────────── */
.empty-state { padding: 60px 20px; text-align: center; color: var(--text-hint); }
.empty-state .material-icons-outlined { font-size: 56px; margin-bottom: 12px; display: block; opacity: 0.4; }
.empty-state p { font-size: 15px; }
/* ─── TABS ──────────────────────────────────────────────────────────────── */
.tabs { display: flex; gap: 0; border-bottom: 2px solid var(--divider); margin-bottom: 20px; padding-bottom: 2px; align-items: flex-end; position: relative; }
.tab { padding: 10px 10px; font-size: 14px; font-weight: 500; color: var(--text-secondary); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -4px; transition: all var(--transition); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; text-align: center; line-height: 1.25; }
.tab:hover { color: var(--text-primary); background: var(--bg); }
.tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.tab-badge { color: white; border-radius: 10px; padding: 0 6px; font-size: 11px; font-weight: 600; min-width: 20px; text-align: center; line-height: 18px; display: inline-block; }
.tab-badge-empty { height: 18px; display: block; }
/* ─── ICONIC TABS (icon above label, animated indicator) ─────────────────── */
.tabs-iconic { position: relative; align-items: stretch; overflow: visible; }
.tabs-iconic .tab { padding: 10px 16px 12px; gap: 6px; justify-content: center; border-bottom: none; }
.tabs-iconic .tab.active { border-bottom: none; }
.tab-icon { width: 20px; height: 20px; flex-shrink: 0; transition: color var(--transition); }
.tabs-iconic .tab span { font-size: 12px; white-space: nowrap; }
/* Each tab stretches to fill equal share of the container width */
.tabs-fill .tab { flex: 1; }
/* Slide indicator — JS positions left/width, CSS animates */
.tab-indicator {
position: absolute; bottom: -2px; height: 3px;
background: var(--primary); border-radius: 2px 2px 0 0;
transition: left 0.28s cubic-bezier(0.4,0,0.2,1), width 0.28s cubic-bezier(0.4,0,0.2,1);
pointer-events: none;
}
/* ─── PROFILE ───────────────────────────────────────────────────────────── */
.profile-header { display: flex; align-items: center; gap: 20px; padding: 24px; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); margin-bottom: 20px; }
.profile-avatar { width: 80px; height: 80px; border-radius: 50%; background: var(--primary); color: white; display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 700; flex-shrink: 0; }
.profile-name { font-size: 22px; font-weight: 600; }
.profile-role { font-size: 13px; color: var(--text-secondary); margin-top: 4px; }
.profile-meta { display: flex; gap: 20px; margin-top: 10px; flex-wrap: wrap; }
.profile-meta-item { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); }
.profile-meta-item .material-icons-outlined { font-size: 16px; }
/* ─── DIVIDER ───────────────────────────────────────────────────────────── */
.divider { height: 1px; background: var(--divider); margin: 0; }
/* ─── SECTION HEADER ────────────────────────────────────────────────────── */
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.section-title { font-size: 18px; font-weight: 600; }
.section-subtitle { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }
/* ─── SIDEBAR OVERLAY ───────────────────────────────────────────────────── */
.sidebar-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 190; }
/* ═══════════════════════════ RESPONSIVE ══════════════════════════════════ */
@media (max-width: 900px) {
.sidebar { transform: translateX(-100%); }
.sidebar.open { transform: translateX(0); }
.main-wrapper { margin-left: 0; }
.menu-btn { display: flex !important; }
.sidebar-close { display: flex !important; }
.content-grid, .content-grid.wide { grid-template-columns: 1fr; }
.form-grid-2 { grid-template-columns: 1fr; }
/* Tabs scrollable on tablet */
.tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; padding-bottom: 4px; }
.tab { white-space: nowrap; flex-shrink: 0; }
/* Section header wraps button group */
.section-header { flex-wrap: wrap; gap: 10px; }
.section-header > div,
.section-header > .btn,
.section-header > span { flex-shrink: 0; }
/* Jobs grid single column */
.jobs-grid { grid-template-columns: 1fr; }
/* Pipeline scrollable */
.pipeline { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pipeline-stage { min-width: 90px; }
}
@media (max-width: 600px) {
/* Layout */
.page-content { padding: 12px; }
/* Stat grid: wrap cards on phones */
.stat-grid { flex-wrap: wrap; }
.stat-card { padding: 14px 12px; gap: 10px; }
.stat-icon { width: 42px; height: 42px; }
.stat-value { font-size: 22px; }
/* Balance grid: 2 across on phones */
.balance-grid { grid-template-columns: 1fr 1fr; }
/* Calendar */
.cal-day { min-height: 48px; }
.cal-event { display: none; }
.cal-day-header { padding: 6px 2px; font-size: 10px; }
/* Notifications panel full-width */
.notif-panel { width: 100%; right: 0; left: 0; }
/* Modals: full-screen on phones */
.modal-overlay { padding: 0; align-items: flex-end; }
.modal, .modal.modal-lg {
max-width: 100%;
max-height: 92vh;
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
animation: slideUpFromBottom 0.3s cubic-bezier(0.34, 1.1, 0.64, 1) both;
}
@keyframes slideUpFromBottom {
from { opacity: 0; transform: translateY(100%); }
to { opacity: 1; transform: translateY(0); }
}
.modal-header-actions { flex-wrap: wrap; gap: 6px; }
.modal-header-actions .btn { padding: 5px 10px; font-size: 12px; }
/* Toast handled by the dedicated mobile rule at bottom of file */
/* Profile header stacks vertically */
.profile-header { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px; }
.profile-meta { gap: 10px; }
/* Section header stacks */
.section-header { flex-direction: column; align-items: flex-start; gap: 10px; }
.section-header > * { width: 100%; }
.section-header .btn { justify-content: center; }
/* But keep inline button groups (multiple btns side-by-side) flowing */
.section-header > div[style*="flex"],
.section-header > .section-actions { width: auto; }
/* Filters bar stacks */
.filters-bar { flex-direction: column; align-items: stretch; }
.filters-bar .search-input { min-width: 0; }
.filters-bar .filter-select { width: 100%; }
.filters-bar .btn { width: 100%; justify-content: center; }
/* Tables: horizontal scroll with touch momentum */
.table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin: 0 -12px; /* bleed to edge on phone */
padding: 0 12px;
width: calc(100% + 24px);
}
table { min-width: 560px; } /* prevent cell collapse */
/* Card header wraps */
.card-header { flex-wrap: wrap; gap: 8px; }
.card-header .btn { font-size: 12px; padding: 6px 10px; }
/* Approval action buttons stack */
.approval-actions { flex-direction: column; gap: 6px; width: 100%; }
.approval-actions .btn { width: 100%; justify-content: center; }
/* Settings list items wrap */
.settings-list-item { flex-wrap: wrap; }
.settings-item-actions { margin-top: 6px; width: 100%; justify-content: flex-end; }
/* Tabs still scrollable */
.tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; padding-bottom: 4px; }
.tab { white-space: nowrap; flex-shrink: 0; }
/* Button text hide on very small: icon-only for action btns */
.btn-icon-only-mobile .btn-label { display: none; }
/* Balance card min-width so numbers don't squish */
.balance-remaining { font-size: 22px; }
/* Contact grid single column already via its own block below */
/* Chart bar label shorter */
.chart-bar-label { width: 80px; }
/* Pipeline scrollable */
.pipeline { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pipeline-stage { min-width: 80px; flex: 0 0 auto; }
/* Job cards full width */
.jobs-grid { grid-template-columns: 1fr; }
/* M365 status message wraps */
.m365-status { flex-wrap: wrap; }
}
/* ═══════════════════════════ ANIMATIONS ══════════════════════════════════ */
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideUpModal {
from { opacity: 0; transform: translateY(22px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes slideInToast {
from { opacity: 0; transform: translateX(-50%) translateY(14px); }
to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes slideInRight {
from { opacity: 0; transform: translateX(16px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes growBar {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
/* Page content entrance */
.anim-fade-in { animation: fadeInUp 0.22s ease-out both; }
/* Stat card stagger */
.stat-grid .stat-card { animation: fadeInUp 0.35s ease-out both; }
.stat-grid .stat-card:nth-child(1) { animation-delay: 0ms; }
.stat-grid .stat-card:nth-child(2) { animation-delay: 55ms; }
.stat-grid .stat-card:nth-child(3) { animation-delay: 110ms; }
.stat-grid .stat-card:nth-child(4) { animation-delay: 165ms; }
.stat-grid .stat-card:nth-child(5) { animation-delay: 220ms; }
.stat-grid .stat-card:nth-child(6) { animation-delay: 275ms; }
/* Chart bar grow with stagger */
.chart-bar-row:nth-child(1) .chart-bar-fill { animation-delay: 0ms; }
.chart-bar-row:nth-child(2) .chart-bar-fill { animation-delay: 55ms; }
.chart-bar-row:nth-child(3) .chart-bar-fill { animation-delay: 110ms; }
.chart-bar-row:nth-child(4) .chart-bar-fill { animation-delay: 165ms; }
.chart-bar-row:nth-child(5) .chart-bar-fill { animation-delay: 220ms; }
.chart-bar-row:nth-child(6) .chart-bar-fill { animation-delay: 275ms; }
.chart-bar-row:nth-child(7) .chart-bar-fill { animation-delay: 330ms; }
.chart-bar-row:nth-child(8) .chart-bar-fill { animation-delay: 385ms; }
.chart-bar-row:nth-child(9) .chart-bar-fill { animation-delay: 440ms; }
.chart-bar-row:nth-child(10) .chart-bar-fill { animation-delay: 495ms; }
.chart-bar-row:nth-child(11) .chart-bar-fill { animation-delay: 550ms; }
.chart-bar-row:nth-child(12) .chart-bar-fill { animation-delay: 605ms; }
/* Notification panel entrance */
.notif-panel { animation: slideInRight 0.2s ease-out; }
/* Sidebar overlay */
.sidebar-overlay { animation: fadeIn 0.18s ease; }
/* Stat / balance card hover lift */
.stat-card { transition: box-shadow var(--transition), transform var(--transition); }
.stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.balance-card { transition: box-shadow var(--transition), transform var(--transition); }
.balance-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
/* Button press feedback */
.btn:active { transform: scale(0.96); transition: transform 0.07s ease; }
/* ─── UTILS ─────────────────────────────────────────────────────────────── */
.text-primary { color: var(--primary) !important; }
.text-secondary-c { color: var(--text-secondary); }
.text-sm { font-size: 12px; }
.text-bold { font-weight: 600; }
.mt-4 { margin-top: 4px; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mb-16 { margin-bottom: 16px; }
.gap-8 { gap: 8px; }
.flex { display: flex; }
.flex-center { display: flex; align-items: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }
.spinner { width: 32px; height: 32px; border: 2.5px solid rgba(132,27,35,0.12); border-top-color: #841B23; border-radius: 50%; animation: spin 0.75s linear infinite; margin: 40px auto; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading { text-align: center; padding: 40px; }
/* ── Navigation progress bar (A) ─────────────────────────────────────────── */
#nav-progress { position: fixed; top: var(--topbar-h); left: var(--sidebar-w); right: 0; height: 3px; z-index: 500; pointer-events: none; }
#nav-progress::after { content: ''; position: absolute; inset: 0; background: #841B23; transform: scaleX(0); transform-origin: left; opacity: 0; transition: transform 0.2s, opacity 0.3s; }
#nav-progress.running::after { transform: scaleX(0.82); opacity: 1; transition: transform 2.5s cubic-bezier(0.1,0.6,0.3,1), opacity 0.1s; }
#nav-progress.done::after { transform: scaleX(1); opacity: 0; transition: transform 0.15s ease, opacity 0.3s ease 0.15s; }
@media (max-width: 900px) { #nav-progress { left: 0; } }
/* ── Skeleton shimmer (B) ────────────────────────────────────────────────── */
.skel { background: var(--divider); border-radius: 4px; position: relative; overflow: hidden; }
.skel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.28) 50%, transparent 100%); animation: skel-shimmer 1.4s ease-in-out infinite; }
@keyframes skel-shimmer { 0% { transform: translateX(-100%) } 100% { transform: translateX(200%) } }
/* ── Dot pulse (D) ───────────────────────────────────────────────────────── */
.dot-pulse { display: inline-flex; gap: 4px; align-items: center; vertical-align: middle; }
.dot-pulse span { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: 0.3; animation: dp 1.2s ease-in-out infinite; }
.dot-pulse span:nth-child(2) { animation-delay: 0.2s; }
.dot-pulse span:nth-child(3) { animation-delay: 0.4s; }
@keyframes dp { 0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1); } }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 500; background: var(--bg); color: var(--text-secondary); border: 1px solid var(--divider); }
/* ─── Role-coloured chips ───────────────────────────────────────────────── */
.chip-role-admin { background: rgba(132,27,35,0.10); color: #841B23; border-color: rgba(132,27,35,0.30); }
.chip-role-operations-manager { background: rgba(106,27,154,0.10); color: #6A1B9A; border-color: rgba(106,27,154,0.30); }
.chip-role-hr-manager { background: rgba(21,101,192,0.10); color: #1565C0; border-color: rgba(21,101,192,0.30); }
.chip-role-hr-officer { background: rgba(2,119,189,0.10); color: #0277BD; border-color: rgba(2,119,189,0.30); }
.chip-role-supervisor { background: rgba(46,125,50,0.10); color: #2E7D32; border-color: rgba(46,125,50,0.30); }
.chip-role-employee { background: rgba(66,66,66,0.08); color: #424242; border-color: rgba(66,66,66,0.25); }
.chip-role-payroll-admin { background: rgba(230,81,0,0.10); color: #E65100; border-color: rgba(230,81,0,0.30); }
.chip-role-payroll-officer { background: rgba(245,124,0,0.10); color: #BF6000; border-color: rgba(245,124,0,0.30); }
.chip-role-intern { background: rgba(0,105,92,0.10); color: #00695C; border-color: rgba(0,105,92,0.30); }
.chip-role-inservice-intern { background: rgba(0,131,143,0.10); color: #006064; border-color: rgba(0,131,143,0.30); }
.chip-role-contractor { background: rgba(55,71,79,0.10); color: #37474F; border-color: rgba(55,71,79,0.30); }
/* ─── DETAIL PANEL ──────────────────────────────────────────────────────── */
.detail-row { display: flex; align-items: flex-start; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--divider); }
.detail-row:last-child { border-bottom: none; }
.detail-row .material-icons-outlined { font-size: 18px; color: var(--text-hint); margin-top: 1px; flex-shrink: 0; }
.detail-label { font-size: 12px; color: var(--text-secondary); margin-bottom: 2px; }
.detail-value { font-size: 14px; font-weight: 500; }
/* ─── RECRUITMENT CARD ──────────────────────────────────────────────────── */
.job-card { background: var(--surface); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-sm); border-left: 4px solid var(--primary); transition: box-shadow var(--transition); }
.job-card:hover { box-shadow: var(--shadow-md); }
.job-title-text { font-size: 16px; font-weight: 600; color: var(--text-primary); }
.job-meta { display: flex; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.job-meta-item { display: flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--text-secondary); }
.job-meta-item .material-icons-outlined { font-size: 15px; }
.jobs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; overflow-y: auto; margin-top: 30px; max-height: calc(100vh - var(--topbar-h) - 230px); }
#contacts-list { overflow-y: auto; margin-top: 30px; max-height: calc(100vh - var(--topbar-h) - 230px); }
/* ─── APPLICANT PIPELINE ────────────────────────────────────────────────── */
.pipeline { display: flex; gap: 1px; background: var(--divider); border-radius: var(--radius); overflow: hidden; margin-bottom: 20px; }
.pipeline-stage { flex: 1; padding: 10px 6px; text-align: center; background: var(--surface); cursor: pointer; transition: background var(--transition); display: flex; flex-direction: column; align-items: center; }
.pipeline-stage:hover { background: var(--bg); }
.pipeline-stage.active { background: var(--primary-surface); }
.pipeline-count { font-size: 20px; font-weight: 700; color: var(--primary); }
.pipeline-label { font-size: 10px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; }
/* ─── AVATAR IMAGES ──────────────────────────────────────────────────────── */
/* Makes any circular avatar container clip and fill an ![]()
child */
.avatar-fill-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.user-avatar, .avatar, .topbar-avatar, .profile-avatar, .contact-card-avatar { overflow: hidden; }
/* ─── CUSTOM CONFIRM DIALOG ─────────────────────────────────────────────── */
.confirm-overlay {
position: fixed; inset: 0;
background: rgba(0,0,0,0.45);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
display: flex; align-items: center; justify-content: center;
z-index: 900;
animation: confirmFadeIn 0.15s ease;
}
.confirm-overlay.hidden { display: none; }
@keyframes confirmFadeIn { from { opacity: 0 } to { opacity: 1 } }
.confirm-dialog {
background: var(--surface, #fff);
border-radius: 16px;
box-shadow: 0 20px 60px rgba(0,0,0,0.22), 0 4px 16px rgba(0,0,0,0.12);
padding: 32px 28px 24px;
max-width: 380px; width: calc(100% - 32px);
text-align: center;
animation: confirmSlideUp 0.18s cubic-bezier(0.34,1.2,0.64,1);
}
@keyframes confirmSlideUp {
from { transform: translateY(16px) scale(0.97); opacity: 0; }
to { transform: none; opacity: 1; }
}
.confirm-icon-wrap {
width: 52px; height: 52px; border-radius: 50%;
background: var(--danger-bg, #FEF2F2);
display: flex; align-items: center; justify-content: center;
margin: 0 auto 16px;
transition: background 0.2s;
}
.confirm-icon-wrap.confirm-neutral { background: #EFF6FF; }
.confirm-icon-wrap.confirm-success { background: #F0FDF4; }
.confirm-icon { width: 26px; height: 26px; color: var(--danger, #B91C1C); }
.confirm-icon-wrap.confirm-neutral .confirm-icon { color: #2563EB; }
.confirm-icon-wrap.confirm-success .confirm-icon { color: #16A34A; }
.confirm-title {
font-size: 17px; font-weight: 700; color: var(--text-primary, #111);
margin: 0 0 10px; line-height: 1.3;
}
.confirm-message {
font-size: 14px; color: var(--text-secondary, #555);
margin: 0 0 24px; line-height: 1.55; white-space: pre-line;
}
.confirm-actions {
display: flex; gap: 10px; justify-content: center;
}
.confirm-actions .btn { min-width: 100px; }
/* ─── MODE SWITCHER ─────────────────────────────────────────────────────── */
/* ─── MODE SWITCHER (engraved pill toggle) ───────────────────────────────── */
.mode-switcher {
position: relative;
display: flex;
gap: 0;
background: rgba(0,0,0,0.45);
box-shadow:
0 2px 5px rgba(0,0,0,0.55) inset,
0 1px 0 rgba(255,255,255,0.06);
border-radius: 12px;
padding: 4px;
margin: 12px 12px 16px;
}
.mode-thumb {
position: absolute;
top: 4px;
bottom: 4px;
left: 4px;
width: calc(50% - 4px);
border-radius: 9px;
background: linear-gradient(145deg, #9e2630 0%, #6b1018 100%);
box-shadow:
0 3px 8px rgba(0,0,0,0.45),
0 1px 0 rgba(255,255,255,0.12) inset;
transition: left 0.3s cubic-bezier(0.65,0.05,0.34,1),
background 0.3s ease;
pointer-events: none;
z-index: 0;
}
.mode-switcher[data-mode="payroll"] .mode-thumb {
left: 50%;
background: linear-gradient(145deg, #2d6bc4 0%, #1a4a8a 100%);
box-shadow:
0 3px 8px rgba(0,0,0,0.45),
0 1px 0 rgba(255,255,255,0.14) inset;
}
.mode-btn {
position: relative;
z-index: 1;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
padding: 7px 8px;
border-radius: 9px;
border: none;
background: transparent;
color: rgba(255,255,255,0.38);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.3px;
cursor: pointer;
transition: color 0.25s;
font-family: 'Roboto', sans-serif;
-webkit-tap-highlight-color: transparent;
}
.mode-btn .material-icons-outlined { font-size: 16px; }
.mode-btn.active { color: rgba(255,255,255,0.95); }
.mode-btn:not(.active):hover { color: rgba(255,255,255,0.65); }
/* Tighter margins when the toggle lives inside the user-menu dropdown */
.user-menu .mode-switcher { margin: 2px 10px 6px; }
/* Avatar upload button overlay on profile */
.avatar-upload-wrap { position: relative; display: inline-block; flex-shrink: 0; }
.av-status-wrap { position: relative; display: inline-block; flex-shrink: 0; }
.av-badge { position: absolute; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.av-badge-br { bottom: -2px; right: -2px; }
.av-badge-tl { top: -2px; left: -2px; }
/* Single-row patch flash animation */
@keyframes emp-flash {
0% { background-color: transparent; }
20% { background-color: rgba(0, 82, 204, 0.10); }
100% { background-color: transparent; }
}
.emp-flash { animation: emp-flash 750ms ease-out; }
.avatar-upload-btn { position: absolute; bottom: 0; right: 0; background: var(--primary); color: white;
width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
cursor: pointer; box-shadow: var(--shadow-sm); transition: background var(--transition); }
.avatar-upload-btn:hover { background: var(--primary-dark); }
.avatar-upload-btn .material-icons-outlined { font-size: 15px; }
/* Employee modal avatar row */
.emp-modal-av { width: 56px; height: 56px; font-size: 20px; flex-shrink: 0; }
.emp-modal-avatar-row { display: flex; align-items: center; gap: 14px; padding: 8px 0; }
/* Employee modal section divider */
.emp-section-divider {
display: flex; align-items: center; gap: 10px;
font-size: 12px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
color: var(--text-secondary);
background: var(--bg);
border-radius: var(--radius);
padding: 10px 14px;
margin: 8px -4px 2px;
border-left: 3px solid var(--primary);
}
.emp-section-divider .material-icons-outlined { font-size: 16px; opacity: 0.85; }
/* ─── Employee modal tabs ────────────────────────────────────────────────── */
#emp-tabs { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; margin-bottom: 0; }
#emp-tabs .tab { flex-shrink: 0; white-space: nowrap; }
.emp-tab-panel { height: 52vh; overflow-y: auto; overflow-x: hidden; }
@keyframes emp-slide-from-right { from { transform: translateX(28px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes emp-slide-from-left { from { transform: translateX(-28px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.emp-tab-panel.slide-from-right { animation: emp-slide-from-right 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94) backwards; }
.emp-tab-panel.slide-from-left { animation: emp-slide-from-left 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94) backwards; }
.emp-tab-panel > .form-grid { padding-bottom: 8px; }
.emp-extra-ec-row, .emp-dep-row, .emp-edu-secondary-row, .emp-edu-tertiary-row,
.emp-edu-postgrad-row, .emp-edu-training-row, .emp-employment-row {
background: var(--bg); border-radius: var(--radius); padding: 10px; }
@media (max-width: 600px) {
.emp-extra-ec-row { grid-template-columns: 1fr !important; }
.emp-dep-row { grid-template-columns: 1fr 1fr !important; }
.emp-edu-secondary-row, .emp-edu-tertiary-row, .emp-edu-postgrad-row,
.emp-edu-training-row, .emp-employment-row { grid-template-columns: 1fr 1fr !important; }
}
/* ─── LEAVE BALANCE EDITOR ──────────────────────────────────────────────── */
.lb-list { display: flex; flex-direction: column; gap: 0; }
.lb-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--divider); }
.lb-row:last-child { border-bottom: none; }
.lb-type-info { display: flex; align-items: flex-start; gap: 10px; flex: 1; min-width: 0; }
/* Checkbox + dot + name all in one clickable label */
.lb-check-label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.lb-check-label input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; accent-color: var(--primary); width: 16px; height: 16px; cursor: pointer; }
.lb-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
.lb-type-name { font-size: 14px; font-weight: 500; color: var(--text-primary); }
.lb-used-label { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.lb-input-wrap { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
/* ─── CONTACT LIST ──────────────────────────────────────────────────────── */
.contact-group-header { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-secondary); padding: 8px 4px 8px; margin: 20px 0 12px; border-bottom: 2px solid var(--primary-surface); display: flex; align-items: center; gap: 8px; }
.contact-group-header::before { content: ''; display: inline-block; width: 4px; height: 16px; background: var(--primary); border-radius: 2px; flex-shrink: 0; }
.contact-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-bottom: 8px; }
.contact-card { background: var(--surface); border-radius: var(--radius-lg); padding: 18px; box-shadow: var(--shadow-sm); transition: box-shadow var(--transition), transform var(--transition); display: flex; flex-direction: column; gap: 12px; }
.contact-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.contact-card-top { display: flex; align-items: center; gap: 12px; }
.contact-card-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--primary); color: white; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; flex-shrink: 0; }
.contact-card-info { flex: 1; min-width: 0; }
.contact-name { font-size: 15px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.contact-position { font-size: 12px; color: var(--text-secondary); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.contact-details { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--divider); padding-top: 10px; }
.contact-detail-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-secondary); min-width: 0; }
.contact-detail-row .material-icons-outlined { font-size: 15px; color: var(--text-hint); flex-shrink: 0; }
.contact-detail-row a { color: var(--lex-blue); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-detail-row a:hover { text-decoration: underline; }
.emergency-contact { background: var(--primary-surface); border-radius: var(--radius); padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.emergency-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--primary); margin-bottom: 4px; display: flex; align-items: center; gap: 4px; }
.emergency-label .material-icons-outlined { font-size: 13px; }
.emergency-row { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); }
.emergency-row .material-icons-outlined { font-size: 13px; color: var(--text-hint); flex-shrink: 0; }
/* ─── SETTINGS PAGE ─────────────────────────────────────────────────────── */
.settings-list { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--divider); border-radius: var(--radius); overflow: hidden; }
.settings-list-item { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; background: var(--surface); border-bottom: 1px solid var(--divider); transition: background var(--transition); gap: 12px; }
.settings-list-item:last-child { border-bottom: none; }
.settings-list-item:hover { background: var(--bg); }
.settings-item-label { font-size: 14px; font-weight: 500; color: var(--text-primary); }
.settings-item-meta { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.settings-item-actions { display: flex; gap: 6px; flex-shrink: 0; }
.form-grid-1 { display: grid; grid-template-columns: 1fr; gap: 14px; }
.mb-20 { margin-bottom: 20px; }
.m365-status { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--radius); font-size: 13px; font-weight: 500; margin-bottom: 16px; }
.m365-status.configured { background: #E8F5E9; color: #2E7D32; }
.m365-status.not-configured { background: #FFF3E0; color: #E65100; }
.m365-status .material-icons-outlined { font-size: 18px; }
/* ─── RESPONSIVE: CONTACT GRID ──────────────────────────────────────────── */
@media (max-width: 600px) {
.contact-grid { grid-template-columns: 1fr; }
}
/* ─── UNIVERSAL MOBILE TABLE TOGGLE ────────────────────────────────────── */
/* Wrap any table container in .tbl-desktop and its card equivalent in .tbl-mobile */
.tbl-desktop { display: block; }
.tbl-mobile { display: none !important; }
@media (max-width: 600px) {
.tbl-desktop { display: none !important; }
.tbl-mobile { display: block !important; }
}
/* Generic mobile card (Settings, Dashboard, Reports) */
.mob-card-list { display: flex; flex-direction: column; gap: 10px; }
.mob-card { background: var(--surface); border-radius: var(--radius-lg); padding: 14px 16px; box-shadow: var(--shadow-sm); }
.mob-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.mob-card-body { margin-top: 6px; font-size: 12px; color: var(--text-secondary); }
.mob-card-actions { display: flex; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--divider); flex-wrap: wrap; }
.mob-card-actions .btn { flex: 1; justify-content: center; min-width: 80px; }
/* My Leave card */
.ml-card { background: var(--surface); border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--shadow-sm); }
.ml-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.ml-card-dates { font-size: 13px; color: var(--text-secondary); margin-bottom: 6px; display: flex; align-items: center; gap: 4px; }
.ml-card-dates .material-icons-outlined { font-size: 14px; }
.ml-card-reason { font-size: 12px; color: var(--text-secondary); margin-bottom: 10px; }
.ml-card-action { display: flex; gap: 8px; border-top: 1px solid var(--divider); padding-top: 10px; }
.ml-card-action .btn { flex: 1; justify-content: center; }
/* ─── HR Leave History (User → Period hierarchy) ─────────────────────────── */
.hr-history-list { display: flex; flex-direction: column; gap: 12px; }
.hr-hist-user { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.hr-hist-user-header { display: flex; align-items: center; gap: 10px; padding: 14px 16px; cursor: pointer; user-select: none; transition: background var(--transition); border-bottom: 1px solid var(--divider); }
.hr-hist-user-header:hover { background: var(--bg); }
.hr-hist-user-body { background: var(--bg); }
.hr-hist-user-body .leave-yr-group { background: var(--surface); margin: 8px 12px; border-radius: var(--radius); box-shadow: var(--shadow-sm); border-bottom: none; }
/* ─── Leave History view toggle ──────────────────────────────────────────── */
.lh-view-toggle { display: flex; gap: 0; border: 1px solid var(--divider); border-radius: var(--radius); overflow: hidden; flex-shrink: 0; align-self: center; }
.lh-toggle-btn { display: flex; align-items: center; gap: 6px; padding: 7px 14px; font-size: 13px; font-weight: 500; background: var(--surface); color: var(--text-secondary); border: none; cursor: pointer; transition: background var(--transition), color var(--transition); white-space: nowrap; }
.lh-toggle-btn:not(:last-child) { border-right: 1px solid var(--divider); }
.lh-toggle-btn:hover { background: var(--bg); color: var(--text-primary); }
.lh-toggle-btn.active { background: var(--primary); color: #fff; }
/* ─── Leave History depth colouring ─────────────────────────────────────── */
/* L1 – Department */
#lh-view-dept > .hr-history-list > .hr-hist-user { border-left: 4px solid var(--primary); }
#lh-view-dept > .hr-history-list > .hr-hist-user > .hr-hist-user-header { background: var(--surface); }
#lh-view-dept > .hr-history-list > .hr-hist-user > .hr-hist-user-body { background: #EEF4FB; }
/* L2 – Employee (nested inside department) */
.lh-dept-employees { display: flex; flex-direction: column; gap: 8px; padding: 8px 12px; }
.lh-dept-employees .hr-hist-user { border-radius: var(--radius); box-shadow: var(--shadow-sm); border-left: 3px solid var(--lex-blue); background: #FAFCFF; }
.lh-dept-employees .hr-hist-user .hr-hist-user-header { background: #FAFCFF; }
.lh-dept-employees .hr-hist-user .hr-hist-user-body { background: var(--bg); }
/* L3 – Anniversary period (nested inside employee, inside department) */
.lh-dept-employees .hr-hist-user-body .leave-yr-group { background: var(--surface); border-left: 3px solid var(--lex-green); margin: 8px 12px; border-radius: var(--radius); box-shadow: var(--shadow-sm); }
/* ─── Anniversary banner ──────────────────────────────────────────────────── */
.ann-banner { display: flex; align-items: center; gap: 14px; background: var(--surface); border-radius: var(--radius-lg); padding: 14px 18px; box-shadow: var(--shadow-sm); border-left: 4px solid var(--primary); }
.ann-banner-items { display: flex; flex-wrap: wrap; gap: 24px; flex: 1; }
.ann-banner-item { display: flex; flex-direction: column; gap: 2px; }
.ann-banner-label { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-secondary); }
.ann-banner-value { font-size: 15px; font-weight: 600; color: var(--text-primary); }
/* ─── Leave history year groups ───────────────────────────────────────────── */
.leave-yr-group { border-bottom: 1px solid var(--divider); }
.leave-yr-group:last-child { border-bottom: none; }
.leave-yr-header { display: flex; align-items: center; gap: 10px; padding: 14px 20px; cursor: pointer; user-select: none; transition: background var(--transition); }
.leave-yr-header:hover { background: var(--bg); }
.leave-yr-chevron { font-size: 20px; color: var(--text-secondary); transition: transform 0.2s ease; }
.leave-yr-chevron.open { transform: rotate(0deg); }
.leave-yr-chevron:not(.open) { transform: rotate(-90deg); }
.leave-yr-label { font-size: 14px; font-weight: 600; color: var(--text-primary); flex: 1; }
.leave-yr-meta { font-size: 12px; color: var(--text-secondary); }
.leave-yr-body { padding: 0 0 8px; }
.leave-yr-body .tbl-mobile { padding: 0 16px 8px; }
/* Applications card */
.app-card { background: var(--surface); border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--shadow-sm); }
.app-card-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.app-card-info { flex: 1; min-width: 0; }
.app-card-name { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-card-sub { font-size: 12px; color: var(--text-secondary); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-card-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; font-size: 12px; color: var(--text-secondary); }
.app-card-status { width: 100%; margin-bottom: 6px; }
.app-card-status select { width: 100%; }
.app-card-actions { display: flex; gap: 6px; flex-wrap: wrap; border-top: 1px solid var(--divider); padding-top: 10px; }
.app-card-actions .btn { flex: 1; justify-content: center; font-size: 12px; padding: 7px 8px; min-width: 70px; }
/* ─── EMPLOYEE CARD / TILE VIEWS ────────────────────────────────────────── */
/* Tile and card grids are hidden by default; JS switchEmpView() controls all three */
.emp-card-grid { display: none; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.emp-tile-grid { display: none; }
.emp-table-container { display: block; }
/* ── Employees page sticky header ─────────────────────────────────────────── */
#emp-sticky-top {
position: sticky;
top: 0;
margin: -24px -24px 0;
padding: 16px 24px 0;
background: var(--bg);
z-index: 15;
border-bottom: 1px solid var(--divider);
box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
#emp-sticky-top .filters-bar { margin-bottom: 12px; }
/* ── Sticky table column headers (table gets own scroll container) ─────────── */
.emp-table-container.card {
overflow-x: auto;
overflow-y: auto;
margin-top: 30px;
max-height: calc(100vh - var(--topbar-h) - 230px);
}
.emp-table-container thead th {
position: sticky;
top: 0;
background: var(--surface);
z-index: 4;
box-shadow: 0 1px 0 var(--divider);
}
/* Card and tile views also need bounded height so page-content never scrolls */
.emp-card-grid,
.emp-tile-grid {
overflow-y: auto;
margin-top: 30px;
max-height: calc(100vh - var(--topbar-h) - 230px);
}
@media (max-width: 768px) {
#emp-sticky-top { margin: -12px -12px 0; padding: 12px 12px 0; }
.emp-table-container.card { max-height: calc(100vh - var(--topbar-h) - 270px); }
.emp-card-grid,
.emp-tile-grid { max-height: calc(100vh - var(--topbar-h) - 270px); }
}
/* ── Selectable table rows (Jobs, Applications, Employees, Approvals) ──────── */
#jobs-table-container tbody tr,
.app-table-container tbody tr,
.emp-table-container tbody tr,
.apv-table-container tbody tr { cursor: pointer; }
#jobs-table-container tbody tr:hover > td,
.app-table-container tbody tr:hover > td,
.emp-table-container tbody tr:hover > td,
.apv-table-container tbody tr:hover > td {
background: var(--hover-bg, rgba(0,0,0,0.03));
transition: background 0.1s;
}
/* ── Sortable column headers ─────────────────────────────────────────────── */
.sortable-th { cursor: pointer; user-select: none; white-space: nowrap; }
.sortable-th:hover { background: var(--hover-bg, rgba(0,0,0,0.04)) !important; }
.sort-caret-wrap {
display: inline-flex;
flex-direction: column;
gap: 0px;
margin-left: 5px;
vertical-align: middle;
line-height: 1;
}
.sc-up, .sc-dn {
display: block;
font-size: 7px;
line-height: 1.1;
opacity: 0.22;
transition: opacity 0.12s, color 0.12s;
}
.sortable-th.sort-asc .sc-up { opacity: 1; color: var(--lex-red, #841B23); }
.sortable-th.sort-desc .sc-dn { opacity: 1; color: var(--lex-red, #841B23); }
#jobs-table-container tbody tr.selected > td,
.app-table-container tbody tr.selected > td,
.emp-table-container tbody tr.selected > td,
.apv-table-container tbody tr.selected > td {
background: var(--primary-surface, rgba(132,27,35,0.06));
}
/* ── Shared sticky page-header (Leave Approvals, Jobs, Applications, Contacts) */
.page-sticky-top {
position: sticky;
top: 0;
margin: -24px -24px 0;
padding: 16px 24px 0;
background: var(--bg);
z-index: 15;
border-bottom: 1px solid var(--divider);
box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.page-sticky-top .filters-bar { margin-bottom: 12px; }
.page-sticky-top .pipeline { margin-bottom: 12px; }
/* Approvals: tabs own their separator — suppress double border */
#apv-sticky-top { border-bottom: none; }
#jobs-sticky-top .search-input,
#app-sticky-top .search-input { flex: 0 0 240px; }
#emp-sticky-top .search-input { flex: 0 0 170px; }
.page-sticky-top .tabs { margin-bottom: 0; }
/* ── Settings sticky tab bar ───────────────────────────────────────────────── */
#settings-sticky-top {
position: sticky;
top: 0;
margin: -24px -24px 0;
padding: 16px 24px 0;
background: var(--bg);
z-index: 15;
box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
#settings-sticky-top .tabs { margin-bottom: 0; }
#settings-content { padding-top: 20px; overflow-y: auto; }
@media (max-width: 768px) {
#settings-sticky-top { margin: -12px -12px 0; padding: 12px 12px 0; }
}
/* ── Dashboard sticky tabs ─────────────────────────────────────────────────── */
#dash-sticky-top {
position: sticky;
top: 0;
margin: -24px -24px 0;
padding: 16px 24px 12px;
background: var(--bg);
z-index: 15;
box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
#dash-sticky-top .tabs { margin-bottom: 0; }
#dash-content { padding-top: 24px; overflow-y: auto; }
@media (max-width: 768px) {
#dash-sticky-top { margin: -12px -12px 0; padding: 12px 12px 8px; }
}
/* ── Former Employees sticky page header ───────────────────────────────────── */
#fe-sticky-top {
position: sticky;
top: 0;
margin: -24px -24px 0;
padding: 16px 24px 0;
background: var(--bg);
z-index: 15;
border-bottom: 1px solid var(--divider);
box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
#fe-sticky-top .tabs { margin-bottom: 0; }
#fe-sticky-top .card-header {
border: none;
background: transparent;
padding: 10px 0 4px;
}
.fe-table-container {
overflow-x: auto;
overflow-y: auto;
margin-top: 16px;
max-height: calc(100vh - var(--topbar-h) - 230px);
}
.fe-table-container thead th {
position: sticky;
top: 0;
background: var(--surface);
z-index: 4;
box-shadow: 0 1px 0 var(--divider);
}
.fe-mobile-container {
overflow-y: auto;
margin-top: 16px;
max-height: calc(100vh - var(--topbar-h) - 230px);
padding: 0 0 12px;
}
@media (max-width: 768px) {
#fe-sticky-top { margin: -12px -12px 0; padding: 12px 12px 0; }
.fe-table-container { max-height: calc(100vh - var(--topbar-h) - 270px); }
.fe-mobile-container { max-height: calc(100vh - var(--topbar-h) - 270px); }
}
/* ── Leave Approvals sticky table ──────────────────────────────────────────── */
.apv-table-container.card {
overflow-x: auto;
overflow-y: auto;
margin-top: 30px;
max-height: calc(100vh - var(--topbar-h) - 215px);
}
.apv-table-container thead th {
position: sticky;
top: 0;
background: var(--surface);
z-index: 4;
box-shadow: 0 1px 0 var(--divider);
}
/* ── Applications sticky table ─────────────────────────────────────────────── */
.app-table-container.card {
overflow-x: auto;
overflow-y: auto;
margin-top: 30px;
max-height: calc(100vh - var(--topbar-h) - 315px);
}
.app-table-container thead th {
position: sticky;
top: 0;
background: var(--surface);
z-index: 4;
box-shadow: 0 1px 0 var(--divider);
}
@media (max-width: 768px) {
.page-sticky-top { margin: -12px -12px 0; padding: 12px 12px 0; }
.apv-table-container.card,
.app-table-container.card { max-height: none; }
}
/* ─── Employee tile grid layout (mirrors .ms-people-grid) ─────────────── */
.emp-tile-grid {
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 16px;
}
/* Tile card is a .ms-person-card with click cursor */
.emp-tile-card { cursor: pointer; }
/* Sub-department label (smaller / dimmer than position) */
.emp-tile-dept {
font-size: 11px;
color: var(--text-hint);
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
margin-top: 2px;
min-height: 14px;
}
/* Active / inactive status row */
.emp-tile-status {
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
font-size: 11px;
color: var(--text-secondary);
margin-top: 6px;
}
/* Action icon strip at bottom of tile */
.emp-tile-actions {
display: grid;
grid-template-columns: repeat(3, 28px);
gap: 2px;
justify-content: center;
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid var(--divider);
width: 100%;
}
@media (max-width: 600px) {
.emp-tile-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
}
.emp-card { background: var(--surface); border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.emp-card-actions { margin-top: auto; }
.emp-card-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.emp-card-info { flex: 1; min-width: 0; }
.emp-card-name { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.emp-card-sub { font-size: 12px; color: var(--text-secondary); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.emp-card-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.emp-card-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.emp-card-meta-item { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-secondary); }
.emp-card-meta-item .material-icons-outlined { font-size: 14px; color: var(--text-hint); }
.emp-card-actions { display: grid; grid-template-columns: repeat(3, 28px); gap: 2px; justify-content: center; border-top: 1px solid var(--divider); padding-top: 12px; }
/* ─── LEAVE APPROVAL CARD VIEW (mobile) ─────────────────────────────────── */
.apv-card-grid { display: none; }
.apv-table-container { display: block; }
@media (max-width: 600px) {
.apv-table-container { display: none; }
.apv-card-grid { display: flex; flex-direction: column; gap: 12px; }
}
.apv-card { background: var(--surface); border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--shadow-sm); }
.apv-card-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.apv-card-info { flex: 1; min-width: 0; }
.apv-card-name { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.apv-card-sub { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.apv-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.apv-card-meta-item { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-secondary); }
.apv-card-meta-item .material-icons-outlined { font-size: 14px; color: var(--text-hint); }
.apv-card-actions { display: flex; gap: 6px; flex-wrap: wrap; border-top: 1px solid var(--divider); padding-top: 12px; }
.apv-card-actions .btn { flex: 1; justify-content: center; font-size: 12px; padding: 7px 10px; min-width: 80px; }
/* HR Comment indicator — shown in table rows and mobile cards */
.apv-comment-indicator {
display: inline-flex; align-items: center; justify-content: center;
width: 20px; height: 20px; border-radius: 50%;
background: #6d6e71; color: var(--bg, #F4F5F7);
cursor: default; vertical-align: middle; margin-left: 5px;
flex-shrink: 0;
}
.apv-comment-indicator .material-icons-outlined { font-size: 13px; line-height: 1; color: var(--bg, #F4F5F7); }
.apv-comment-preview {
color: var(--primary) !important; font-style: italic;
white-space: nowrap; overflow: hidden; max-width: 220px; text-overflow: ellipsis;
}
.apv-comment-preview .material-icons-outlined { color: var(--primary) !important; }
/* ─── SICK LEAVE DETAIL — year filter chips ─────────────────────────────── */
.sick-yr-chip {
padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 500;
border: 1px solid var(--divider); background: var(--surface); color: var(--text-secondary);
cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.sick-yr-chip:hover { background: var(--bg); color: var(--text-primary); }
.sick-yr-chip.active { background: var(--primary); color: #fff; border-color: var(--primary); }
/* ─── BALANCE CARD INFO BUTTON ──────────────────────────────────────────── */
.balance-card-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 8px; }
.balance-card-top .balance-type { margin-bottom: 0; }
.balance-info-btn { background: none; border: none; cursor: pointer; padding: 0; line-height: 1;
color: var(--text-hint); transition: color var(--transition); flex-shrink: 0; margin-top: -2px; }
.balance-info-btn:hover { color: var(--primary); }
.balance-info-btn .material-icons-outlined { font-size: 18px; }
/* ─── LEAVE POLICIES PAGE ───────────────────────────────────────────────── */
.policy-list { display: flex; flex-direction: column; gap: 16px; }
.policy-card { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.policy-card-header { display: flex; align-items: center; gap: 12px; padding: 14px 20px;
border-bottom: 1px solid var(--divider); background: var(--bg); flex-wrap: wrap; }
.policy-type-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.policy-card-title { font-size: 15px; font-weight: 600; color: var(--text-primary); flex: 1; }
.policy-card-meta { font-size: 12px; color: var(--text-secondary); background: var(--secondary-surface);
border-radius: 12px; padding: 2px 10px; white-space: nowrap; }
.policy-edit-btn { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.policy-card-body { padding: 20px; }
.policy-description { font-size: 13px; color: var(--text-secondary); margin-bottom: 14px;
padding-bottom: 14px; border-bottom: 1px solid var(--divider); }
.policy-text-wrap { min-height: 40px; }
.policy-text { font-size: 14px; line-height: 1.75; color: var(--text-primary); white-space: pre-wrap; }
.policy-empty { font-size: 13px; color: var(--text-hint); font-style: italic; }
.policy-modal-text { font-size: 14px; line-height: 1.75; color: var(--text-primary);
max-height: 55vh; overflow-y: auto; padding: 16px; background: var(--bg);
border-radius: var(--radius); border: 1px solid var(--divider); white-space: pre-wrap; }
/* ═══════════════════════ TEAM (DEPT) CALENDAR ═══════════════════════════ */
.cal-nwd { background: #F5F5F5 !important; opacity: 0.65; }
.dc-event { border-radius: 4px; padding: 2px 5px; font-size: 11px; font-weight: 500; margin-bottom: 2px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ═══════════════════════ MILESTONES PAGE ════════════════════════════════ */
/* Legend bar */
.ms-legend {
display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
background: var(--surface); border-radius: var(--radius);
padding: 14px 20px; margin-bottom: 24px;
box-shadow: var(--shadow-sm); border: 1px solid var(--divider);
}
.ms-legend-title { font-size: 12px; font-weight: 600; color: var(--text-secondary);
text-transform: uppercase; letter-spacing: 0.5px; margin-right: 4px; }
.ms-legend-item {
display: flex; align-items: center; gap: 7px;
font-size: 12px; font-weight: 500; color: var(--text-primary);
}
.ms-legend-dot {
width: 22px; height: 22px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 8px; font-weight: 900; color: #fff;
}
/* Group sections */
.ms-group { margin-bottom: 28px; }
.ms-group-header {
display: flex; align-items: center; gap: 10px;
font-size: 13px; font-weight: 700; color: var(--text-secondary);
text-transform: uppercase; letter-spacing: 0.6px;
margin-bottom: 14px; padding-bottom: 8px;
border-bottom: 2px solid var(--divider);
}
.ms-group-count {
margin-left: auto; background: var(--surface-2);
border-radius: 20px; padding: 2px 10px;
font-size: 11px; font-weight: 600; color: var(--text-secondary);
}
/* People grid */
.ms-people-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
gap: 16px;
}
/* Individual person card */
.ms-person-card {
display: flex; flex-direction: column; align-items: center;
background: var(--surface); border-radius: var(--radius-lg);
border: 1px solid var(--divider);
padding: 20px 12px 14px;
text-align: center;
transition: box-shadow var(--transition), transform var(--transition);
position: relative; overflow: visible;
}
.ms-person-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.ms-person-card.ms-card-today {
border-color: #F9A825; background: #FFFDE7;
box-shadow: 0 0 0 2px #F9A82540;
}
.ms-person-card.ms-card-passed { opacity: 0.72; }
.ms-person-card::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
background: var(--ms-color, var(--primary));
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
/* Avatar wrapper */
.ms-av-wrap {
position: relative;
margin-bottom: 10px;
display: inline-block;
}
.ms-big-av {
width: 72px; height: 72px; font-size: 22px;
border: 3px solid var(--bg);
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
/* Ribbon badge */
.ms-ribbon-badge {
position: absolute;
bottom: -10px; right: -10px;
display: flex; flex-direction: column; align-items: center;
z-index: 3;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.22));
pointer-events: none;
}
.ms-ribbon-circle {
width: 30px; height: 30px; border-radius: 50%;
background: var(--rc, #999);
border: 2.5px solid #fff;
display: flex; align-items: center; justify-content: center;
font-size: 9px; font-weight: 900; color: #fff; line-height: 1;
}
.ms-ribbon-tails {
display: flex; gap: 3px; margin-top: -1px;
}
.ms-ribbon-tail {
width: 0; height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 9px solid var(--rc, #999);
}
/* Info text */
.ms-person-name {
font-size: 13px; font-weight: 600; color: var(--text-primary);
line-height: 1.3; margin-top: 4px;
max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ms-person-dept {
font-size: 11px; color: var(--text-secondary);
margin-top: 2px;
max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ms-person-date {
font-size: 11px; color: var(--text-hint);
margin-top: 6px;
}
.ms-person-countdown {
font-size: 11px; font-weight: 600; margin-top: 3px;
}
.ms-cd-today { color: #F4511E; }
.ms-cd-soon { color: #E65100; }
.ms-cd-upcoming { color: var(--primary); }
.ms-cd-passed { color: var(--text-secondary); }
/* Today pulse ring */
.ms-person-card.ms-card-today .ms-big-av {
box-shadow: 0 0 0 4px #F9A82540, 0 2px 8px rgba(0,0,0,0.15);
}
@media (max-width: 600px) {
.ms-people-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; }
.ms-big-av { width: 56px; height: 56px; font-size: 17px; }
.ms-legend { padding: 10px 12px; }
}
/* ═══════════════════════ BATCH UPLOAD UI ════════════════════════════════ */
.batch-info-box {
background: var(--primary-surface);
border: 1px solid #e8c4c6;
border-left: 4px solid var(--primary);
border-radius: var(--radius);
padding: 12px 16px;
margin-bottom: 14px;
font-size: 13px;
}
.batch-info-title {
display: flex; align-items: center; gap: 6px;
font-weight: 600; color: var(--primary); margin-bottom: 8px;
}
.batch-info-title code { font-size: 12px; background: rgba(132,27,35,0.1); padding: 1px 5px; border-radius: 4px; }
.batch-info-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px;
font-size: 12px; color: var(--text-secondary); line-height: 1.5;
}
.batch-info-grid strong { color: var(--primary-dark); }
@media (max-width: 600px) { .batch-info-grid { grid-template-columns: 1fr; } }
/* Batch result panels */
.batch-result {
border-radius: var(--radius); padding: 14px 16px; margin-top: 12px;
border-left: 4px solid transparent;
}
.batch-result-ok { background: #E8F5E9; border-left-color: #2E7D32; }
.batch-result-err { background: #FFF3E0; border-left-color: var(--primary); }
.batch-result-empty { background: var(--bg); border-left-color: var(--secondary); color: var(--text-hint);
display: flex; align-items: center; gap: 8px; font-size: 13px; }
.batch-result-title {
display: flex; align-items: center; gap: 8px;
font-weight: 600; font-size: 13.5px; margin-bottom: 6px;
}
.batch-result-ok .batch-result-title { color: #1B5E20; }
.batch-result-ok .batch-result-title .material-icons-outlined { color: #2E7D32; font-size: 18px; }
.batch-result-err .batch-result-title { color: #7F0000; }
.batch-result-err .batch-result-title .material-icons-outlined { color: var(--primary); font-size: 18px; }
.batch-result-names { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.batch-name-chip {
background: rgba(46,125,50,0.12); color: #1B5E20;
font-size: 11.5px; font-weight: 500;
border-radius: 20px; padding: 2px 10px;
}
.batch-error-list {
margin: 4px 0 0 18px; padding: 0;
font-size: 12px; color: #5D4037; line-height: 1.6;
}
.batch-result-note { font-size: 12px; color: #555; margin-top: 4px; }
/* ─── LEAVE MONITOR ────────────────────────────────────────────────────── */
/* Alert banner */
.lm-alert-banner { display: flex; align-items: flex-start; gap: 14px; background: #FFF3E0; border: 1.5px solid #FB8C00; border-radius: var(--radius-lg); padding: 14px 18px; margin-bottom: 20px; }
.lm-alert-banner-icon { color: #E65100; font-size: 26px; margin-top: 1px; flex-shrink: 0; animation: lm-bell-ring 2s ease-in-out infinite; }
@keyframes lm-bell-ring {
0%, 100% { transform: rotate(0deg); }
10% { transform: rotate(-18deg); }
20% { transform: rotate(18deg); }
30% { transform: rotate(-12deg); }
40% { transform: rotate(12deg); }
50% { transform: rotate(0deg); }
}
.lm-alert-banner-title { font-size: 14px; font-weight: 700; color: #BF360C; margin-bottom: 3px; }
.lm-alert-banner-sub { font-size: 12px; color: #E65100; }
/* Group header */
.lm-group-header { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px; }
.lm-group-header .material-icons-outlined { font-size: 17px; }
/* Rows */
.lm-row { cursor: pointer; transition: background var(--transition); }
.lm-row:hover { background: var(--bg); }
.lm-row-open { background: var(--primary-surface) !important; }
.lm-warn-row td:first-child { border-left: 3px solid #FB8C00; }
.lm-warn-row { background: #FFF8E1; }
.lm-warn-row:hover { background: #FFF0D0; }
/* Avatar wrapper + notification dot */
.lm-avatar-wrap { position: relative; display: inline-flex; flex-shrink: 0; }
.lm-avatar-wrap .avatar { overflow: hidden; }
.lm-notif-dot { position: absolute; top: -2px; right: -2px; width: 10px; height: 10px; border-radius: 50%; background: #FB8C00; border: 2px solid #fff; animation: lm-dot-pulse 1.8s ease-in-out infinite; }
@keyframes lm-dot-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(251,140,0,0.5); }
50% { box-shadow: 0 0 0 5px rgba(251,140,0,0); }
}
/* Drill row outer shell — zero-padding td so inner card controls all spacing */
.lm-drill-row td { padding: 0 !important; }
.lm-drill-body { background: var(--bg); border-top: 1px solid var(--divider); }
/* Inner card — matches the nested leave-yr-group pattern used in Leave History */
.lm-drill-inner {
display: inline-block; /* shrink to fit table content width */
min-width: 0;
margin: 10px 16px 14px 52px; /* left indent aligns content under employee name */
background: var(--surface);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
border: 1px solid var(--divider);
border-left: 3px solid var(--primary);
overflow: hidden;
animation: fadeIn 0.18s ease;
}
/* Mobile: less left indent inside the mobile card */
.lm-mobile-card .lm-drill-body { border-top: none; }
.lm-mobile-card .lm-drill-inner {
display: block; /* full width inside narrow mobile card */
margin: 10px 0 2px 0;
border-left: 3px solid var(--primary);
}
/* Drill table — auto column sizing */
.lm-drill-table-wrap { padding: 0; overflow-x: auto; }
.lm-drill-table { width: auto; table-layout: auto; border-collapse: collapse; font-size: 13px; white-space: nowrap; }
.lm-drill-table thead tr { background: var(--bg); }
.lm-drill-table th { padding: 15px 20px; text-align: center; font-size: 11px; font-weight: 600; color: var(--text-hint); text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--divider); }
.lm-drill-table td { padding: 15px 20px; border-bottom: 1px solid var(--divider); vertical-align: middle; text-align: center; }
.lm-drill-table tbody tr:last-child td { border-bottom: none; }
.lm-drill-total td { background: var(--primary-surface); padding: 15px 20px; font-size: 13px; border-top: 2px solid var(--divider); text-align: center; }
.lm-drill-empty { display: flex; align-items: center; gap: 8px; padding: 14px 16px; font-size: 13px; color: var(--text-hint); }
.lm-drill-empty .material-icons-outlined { font-size: 18px; }
.lm-progress-wrap { display: flex; flex-direction: column; gap: 4px; min-width: 180px; }
.lm-progress-track { height: 8px; background: var(--divider); border-radius: 4px; overflow: visible; position: relative; }
.lm-progress-fill { height: 100%; border-radius: 4px; transition: width 0.5s cubic-bezier(0.25,0.46,0.45,0.94); }
/* Dashed vertical rule showing the base entitlement boundary when carryover exists */
.lm-base-marker {
position: absolute; top: -4px; bottom: -4px; width: 2px;
background: rgba(180,130,0,0.55); border-radius: 1px;
pointer-events: none;
}
.lm-base-marker::after {
content: ''; position: absolute; left: 50%; transform: translateX(-50%);
top: -3px; width: 6px; height: 6px;
background: #B8860B; border-radius: 50%;
}
/* Carryover chip in the table and mobile cards */
.lm-carryover-chip {
display: inline-block; padding: 2px 7px; border-radius: 10px;
font-size: 11px; font-weight: 600; line-height: 18px;
background: #FFF8E1; color: #B8860B;
border: 1px solid #F0D060;
}
.lm-progress-labels { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-secondary); }
.lm-days-left { display: inline-block; font-size: 11px; font-weight: 600; background: var(--primary-surface); color: var(--primary); border-radius: 10px; padding: 1px 7px; margin-left: 4px; }
.lm-days-left.lm-warn-chip { background: #FFECB3; color: #E65100; }
.lm-days-left.lm-expired-chip { background: #F5F5F5; color: #9E9E9E; }
.lm-notify-btn { background: var(--primary); color: #fff; border: none; border-radius: 6px; padding: 5px 10px; font-size: 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; font-family: inherit; transition: background var(--transition), opacity var(--transition); white-space: nowrap; }
.lm-notify-btn:hover { background: var(--primary-dark); }
.lm-notify-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.lm-notify-sent { background: #2E7D32 !important; }
/* Action button group */
.lm-action-btns { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.lm-action-btns-mobile { margin-top: 10px; flex-direction: row; flex-wrap: wrap; }
.lm-adjust-btn { background: var(--surface); color: var(--primary); border: 1.5px solid var(--primary); border-radius: 6px; padding: 5px 10px; font-size: 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; font-family: inherit; transition: background var(--transition), color var(--transition); white-space: nowrap; }
.lm-adjust-btn:hover { background: var(--primary-surface); }
/* Adjust modal */
.lm-adj-summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--bg); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 20px; }
.lm-adj-emp { display: flex; align-items: center; gap: 12px; }
.lm-adj-name { font-size: 15px; font-weight: 600; }
.lm-adj-period { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.lm-adj-balance { text-align: right; flex-shrink: 0; }
.lm-adj-bal-num { display: block; font-size: 28px; font-weight: 700; color: var(--lex-red); line-height: 1; }
.lm-adj-bal-lbl { font-size: 11px; color: var(--text-hint); }
.lm-adj-options { display: flex; flex-direction: column; gap: 8px; }
.lm-adj-option { display: block; border: 1.5px solid var(--divider); border-radius: var(--radius); padding: 12px 14px; cursor: pointer; transition: border-color var(--transition), background var(--transition); }
.lm-adj-option:hover { border-color: var(--primary); background: var(--primary-surface); }
.lm-adj-option-selected { border-color: var(--primary) !important; background: var(--primary-surface); }
.lm-adj-option input[type="radio"] { display: none; }
.lm-adj-option-body { display: flex; align-items: center; gap: 12px; }
.lm-adj-opt-icon { font-size: 22px; flex-shrink: 0; }
.lm-adj-opt-title { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.lm-adj-opt-desc { font-size: 12px; color: var(--text-secondary); }
.lm-adj-hint { display: flex; align-items: flex-start; gap: 8px; padding: 10px 14px; border-radius: var(--radius); font-size: 13px; margin-top: 10px; }
.lm-adj-hint-info { background: #E3F2FD; color: #1565C0; }
.lm-adj-hint-warn { background: #FFF3E0; color: #E65100; }
.lm-adj-hint .material-icons-outlined { margin-top: 1px; flex-shrink: 0; }
.lm-mobile-card { background: var(--surface); border-radius: var(--radius); margin-bottom: 12px; padding: 14px; cursor: pointer; transition: box-shadow var(--transition); border: 1px solid var(--divider); }
.lm-mobile-card:hover { box-shadow: var(--shadow-sm); }
/* Mobile toast: full-width bottom bar */
@media (max-width: 600px) {
.toast { left: 8px; right: 8px; bottom: 0; transform: none;
border-radius: 12px 12px 0 0; white-space: normal;
border-left: none; border-top: 3px solid rgba(255,255,255,0.3); }
}
/* ─── OFFICIAL TAB — attorney section & dynamic rows ───────────────────── */
.off-attorney-section { transition: opacity 0.2s; }
.off-attorney-section.hidden { display: none !important; }
.off-inc-badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 20px; white-space: nowrap; }
/* ─── MEDICAL PAGE ──────────────────────────────────────────────────────── */
.med-stats-row { display: grid; grid-template-columns: repeat(auto-fill,minmax(170px,1fr)); gap: 12px; margin-bottom: 20px; }
.med-stat-card { background: var(--sc,var(--bg)); border-radius: var(--radius-lg); padding: 14px 16px; display: flex; align-items: center; gap: 12px; box-shadow: var(--shadow-sm); min-width: 0; overflow: hidden; }
.med-stat-icon { width: 38px; height: 38px; border-radius: 50%; background: var(--cc,var(--primary)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.med-stat-icon .material-icons-outlined { font-size: 20px; color: white; }
.med-stat-body { min-width: 0; flex: 1; }
.med-stat-val { font-size: 18px; font-weight: 700; color: var(--cc,var(--primary)); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.med-stat-lbl { font-size: 11px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; white-space: nowrap; }
.med-filters { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.med-status-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.med-status-filter-btn { padding: 5px 14px; border-radius: 20px; border: 1.5px solid var(--divider); background: var(--surface); font-size: 12.5px; font-weight: 500; cursor: pointer; color: var(--text-secondary); transition: all var(--transition); font-family: inherit; }
.med-status-filter-btn:hover { border-color: var(--lex-blue); color: var(--lex-blue); }
.med-status-filter-btn.active { background: var(--lex-blue); border-color: var(--lex-blue); color: white; }
/* Collapsible year groups */
.med-year-group { margin-bottom: 12px; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--divider); background: var(--surface); }
.med-year-header { display: flex; align-items: center; justify-content: space-between; padding: 13px 18px; cursor: pointer; user-select: none; background: var(--surface); transition: background var(--transition); gap: 12px; flex-wrap: wrap; }
.med-year-header:hover { background: var(--bg); }
.med-year-title { display: flex; align-items: center; gap: 10px; }
.med-yr-chevron { font-size: 20px; color: var(--text-secondary); transition: transform 0.2s; flex-shrink: 0; }
.med-yr-chevron.open { transform: rotate(90deg); }
.med-yr-label { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.med-yr-count { font-size: 12px; color: var(--text-secondary); background: var(--bg); padding: 2px 9px; border-radius: 20px; border: 1px solid var(--divider); }
.med-year-summary { display: flex; gap: 6px; flex-wrap: wrap; }
.med-yr-pill { font-size: 11.5px; font-weight: 500; padding: 3px 10px; border-radius: 20px; }
.med-yr-pill.outstanding { background: #FFF3E0; color: #E65100; }
.med-yr-pill.completed { background: #E8F5E9; color: #2E7D32; }
.med-yr-pill.days { background: var(--primary-surface); color: var(--primary); }
.med-yr-pill.amount { background: #EDE7F6; color: #4527A0; }
.med-year-body { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.med-year-body.open { max-height: 9999px; }
.med-empty-state { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 60px; color: var(--text-hint); }
.med-empty-state .material-icons-outlined { font-size: 48px; }
.med-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.med-table th { padding: 10px 14px; text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-secondary); background: var(--bg); border-bottom: 1px solid var(--divider); white-space: nowrap; }
.med-table td { padding: 11px 14px; border-bottom: 1px solid var(--divider); vertical-align: middle; }
.med-table tr:last-child td { border-bottom: none; }
.med-table tr.med-row:hover td { background: var(--bg); }
.med-name { min-width: 140px; }
.med-dept { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
.med-days { text-align: center; font-weight: 600; }
.med-amount { font-weight: 600; color: var(--lex-blue); }
.med-cheque { font-size: 12px; color: var(--text-secondary); font-family: monospace; }
.med-empty { text-align: center; padding: 40px; color: var(--text-hint); font-size: 14px; }
.med-actions { white-space: nowrap; text-align: right; }
.med-status-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 20px; font-size: 11.5px; font-weight: 500; white-space: nowrap; }
.med-nis-chip { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.med-nis-yes { background: #E8F5E9; color: #2E7D32; }
.med-nis-no { background: #FFF8E1; color: #E65100; }
.med-nis-nil { color: var(--text-hint); }
@media (max-width: 700px) {
.med-table th:nth-child(3),.med-table td:nth-child(3),
.med-table th:nth-child(7),.med-table td:nth-child(7) { display: none; }
}
/* ─── AUDIT LOG ─────────────────────────────────────────────────────────── */
.al-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.al-table th { background: var(--surface-2); color: var(--text-secondary); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; padding: 10px 14px; border-bottom: 1px solid var(--divider); white-space: nowrap; }
.al-table td { padding: 10px 14px; border-bottom: 1px solid var(--divider); vertical-align: top; color: var(--text-primary); }
.al-table tbody tr:last-child td { border-bottom: none; }
.al-table tbody tr:hover td { background: var(--surface-2); }
.al-ts { color: var(--text-secondary); font-size: 12px; white-space: nowrap; }
.al-changes { display: flex; flex-direction: column; gap: 4px; }
.al-change-row { display: flex; align-items: center; gap: 6px; font-size: 12px; flex-wrap: wrap; }
.al-change-field { font-weight: 600; color: var(--text-primary); min-width: 120px; }
.al-change-old { background: #FFEBEE; color: #C62828; padding: 1px 6px; border-radius: 4px; text-decoration: line-through; }
.al-change-new { background: #E8F5E9; color: #2E7D32; padding: 1px 6px; border-radius: 4px; }
.al-change-raw { font-family: monospace; font-size: 11px; color: var(--text-secondary); }
/* Badge pills used in audit log and elsewhere */
.badge-pill { display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; text-transform: capitalize; }
.badge-success { background: #E8F5E9; color: #2E7D32; }
.badge-info { background: #E3F2FD; color: #1565C0; }
.badge-warning { background: #FFF8E1; color: #E65100; }
.badge-danger { background: #FFEBEE; color: #C62828; }
.badge-secondary { background: #F5F5F5; color: var(--text-secondary); }
/* ── Trash page ─────────────────────────────────────────────────────────── */
.trash-table { width: 100%; }
.trash-row td { vertical-align: middle; }
.trash-row:hover td { background: var(--surface-2); }
.mb-24 { margin-bottom: 24px; }
/* ── Intake Inbox page ────────────────────────────────────────────────────── */
.nav-badge { background: var(--primary); color: white; border-radius: 10px; padding: 1px 7px; font-size: 11px; font-weight: 600; margin-left: auto; }
.nav-badge.hidden { display: none; }
.intake-stats { display: grid; grid-template-columns: repeat(auto-fill,minmax(160px,1fr)); gap: 12px; margin-bottom: 20px; }
.intake-stat { background: var(--surface); border-radius: var(--radius-lg); padding: 16px 18px; box-shadow: var(--shadow-sm); border: 1px solid var(--divider); }
.intake-stat-val { font-size: 28px; font-weight: 700; color: var(--primary); line-height: 1; margin-bottom: 4px; }
.intake-stat-lbl { font-size: 12px; color: var(--text-secondary); font-weight: 500; }
.intake-filter-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.intake-filter-btn { padding: 6px 14px; border: 1.5px solid var(--divider); border-radius: 20px; background: var(--surface); color: var(--text-secondary); font-size: 13px; font-weight: 500; cursor: pointer; transition: all var(--transition); }
.intake-filter-btn.active { border-color: var(--primary); background: var(--primary-surface); color: var(--primary); }
.intake-row { cursor: pointer; }
.intake-row:hover td { background: var(--primary-surface); }
.intake-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.intake-detail-field { padding: 8px 0; border-bottom: 1px solid var(--divider); }
.intake-detail-field:last-child { border-bottom: none; }
.intake-detail-label { font-size: 11px; color: var(--text-secondary); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 3px; }
.intake-detail-value { font-size: 14px; color: var(--text-primary); word-break: break-word; }
.intake-section-head { font-size: 13px; font-weight: 700; color: var(--primary); text-transform: uppercase; letter-spacing: 0.5px; margin: 16px 0 8px; grid-column: 1/-1; display: flex; align-items: center; gap: 8px; }
.intake-section-head::after { content:''; flex:1; height:1px; background:var(--divider); }
.temp-pw-box { background: #E8F5E9; border: 1px solid #A5D6A7; border-radius: var(--radius); padding: 14px 18px; margin-top: 16px; }
.temp-pw-label { font-size: 12px; color: #2E7D32; font-weight: 600; margin-bottom: 6px; }
.temp-pw-value { font-family: monospace; font-size: 18px; font-weight: 700; color: #1B5E20; letter-spacing: 2px; }
.temp-pw-hint { font-size: 12px; color: #388E3C; margin-top: 4px; }
/* ── Document Management ─────────────────────────────────────────────────── */
.doc-panel { display: flex; flex-direction: column; gap: 12px; }
.doc-panel-toolbar { display: flex; justify-content: flex-end; padding-bottom: 4px; }
.doc-empty { text-align: center; padding: 40px 0; color: var(--text-hint); font-size: 14px; }
.doc-empty .material-icons-outlined { font-size: 48px; display: block; margin-bottom: 8px; opacity: .4; }
.doc-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--divider); border-radius: var(--radius); transition: box-shadow var(--transition); }
.doc-row:hover { box-shadow: var(--shadow-sm); }
.doc-icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: 8px; background: var(--primary-surface); color: var(--primary); display: flex; align-items: center; justify-content: center; }
.doc-icon .material-icons-outlined { font-size: 22px; }
.doc-info { flex: 1; min-width: 0; }
.doc-name { font-size: 14px; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-meta { font-size: 12px; color: var(--text-secondary); margin-top: 2px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.doc-cat-badge { display: inline-flex; align-items: center; gap: 3px; background: var(--surface-2); color: var(--text-secondary); border-radius: 10px; padding: 1px 8px; font-size: 11px; font-weight: 600; }
.doc-cat-badge .material-icons-outlined { font-size: 12px; }
.doc-desc { font-size: 12px; color: var(--text-secondary); margin-top: 3px; font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.btn-danger-outline { background: transparent; border: 1.5px solid var(--lex-red); color: var(--lex-red); }
.btn-danger-outline:hover { background: #FFEBEE; }
.btn-link { background: none; border: none; padding: 0; color: var(--primary); cursor: pointer; font-size: 13px; display: inline-flex; align-items: center; gap: 2px; }
.btn-link:hover { text-decoration: underline; }
/* ── Document Folder Grid ─────────────────────────────────────────────────── */
.doc-folder-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.doc-folder-total { font-size: 12px; color: var(--text-secondary); margin-left: auto; }
.doc-folder-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.doc-folder-card { display: flex; flex-direction: column; align-items: center; padding: 18px 12px 14px; background: var(--surface); border: 1px solid var(--divider); border-radius: var(--radius); cursor: pointer; text-align: center; gap: 8px; transition: box-shadow var(--transition), border-color var(--transition); user-select: none; }
.doc-folder-card:hover { box-shadow: var(--shadow-sm); border-color: var(--primary); }
.doc-folder-card:hover .doc-folder-icon-wrap { opacity: 0.85; }
.doc-folder-icon-wrap { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.doc-folder-icon-wrap .li-icon { width: 26px; height: 26px; }
.doc-folder-name { font-size: 12px; font-weight: 500; color: var(--text-primary); line-height: 1.3; }
.doc-folder-meta { font-size: 11px; }
.doc-folder-count { background: var(--primary-surface); color: var(--primary); border-radius: 10px; padding: 1px 8px; font-weight: 600; }
.doc-folder-empty { color: var(--text-hint); }
.doc-upload-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
/* ── Document Breadcrumb ──────────────────────────────────────────────────── */
.doc-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--divider); }
.doc-breadcrumb-sep { color: var(--text-hint); }
.doc-breadcrumb-current { font-weight: 500; color: var(--text-primary); }
.btn-link .li-icon { width: 14px; height: 14px; }
@media (max-width: 768px) { .doc-folder-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 400px) { .doc-folder-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } .doc-folder-card { padding: 14px 8px 10px; } }
/* ── Onboarding / Offboarding Task Panels ────────────────────────────────── */
.task-panel { display: flex; flex-direction: column; gap: 14px; }
.task-panel-header { display: flex; flex-direction: column; gap: 8px; }
.task-progress-bar-wrap { height: 8px; background: var(--divider); border-radius: 4px; overflow: hidden; }
.task-progress-bar { height: 100%; background: var(--lex-green); border-radius: 4px; transition: width 0.4s ease; }
.task-progress-label { font-size: 12px; color: var(--text-secondary); }
.task-list { display: flex; flex-direction: column; gap: 8px; }
.task-row { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--divider); border-radius: var(--radius); transition: opacity 0.2s; }
.task-row.task-done { opacity: 0.6; }
.task-check { flex-shrink: 0; padding-top: 1px; }
.task-toggle-btn { background: none; border: none; cursor: pointer; padding: 0; display: flex; align-items: center; }
.task-toggle-btn .li-icon { width: 18px; height: 18px; }
.task-check-static { display: inline-block; width: 18px; height: 18px; border: 2px solid var(--divider); border-radius: 3px; flex-shrink: 0; }
.task-check-done { background: var(--lex-green); border-color: var(--lex-green); }
.task-body { flex: 1; min-width: 0; }
.task-title { font-size: 14px; font-weight: 500; color: var(--text-primary); }
.task-title-done { text-decoration: line-through; color: var(--text-secondary); }
.task-desc { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.task-meta { font-size: 12px; color: var(--text-hint); margin-top: 4px; display: flex; gap: 12px; flex-wrap: wrap; }
.task-actions { display: flex; gap: 4px; flex-shrink: 0; }
/* ── Lucide .li-icon size overrides (mirrors .material-icons-outlined rules) ── */
.nav-item .li-icon { width: 20px; height: 20px; }
.mode-btn .li-icon { width: 16px; height: 16px; }
.stat-icon .li-icon { width: 26px; height: 26px; }
.btn .li-icon { width: 17px; height: 17px; }
.btn-icon .li-icon { width: 17px; height: 17px; }
.search-input .li-icon { width: 18px; height: 18px; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-hint); pointer-events: none; }
.trend-bc-back .li-icon { width: 15px; height: 15px; }
.trend-drill-header .li-icon { width: 16px; height: 16px; color: var(--lex-blue); }
.trend-drill-loading .li-icon { width: 18px; height: 18px; animation: empty-float 1.2s ease-in-out infinite; }
.modal-header-actions .btn .li-icon { width: 15px; height: 15px; }
.toast .li-icon { width: 19px; height: 19px; flex-shrink: 0; }
.toast.success .li-icon { color: #A5D6A7; }
.toast.error .li-icon { color: #FFCDD2; }
.toast.warning .li-icon { color: #FFCCBC; }
.toast.info .li-icon { color: #90CAF9; }
.empty-state .li-icon { width: 56px; height: 56px; margin-bottom: 12px; display: block; opacity: 0.4; }
.profile-meta-item .li-icon { width: 16px; height: 16px; }
.detail-row .li-icon { width: 18px; height: 18px; color: var(--text-hint); margin-top: 1px; flex-shrink: 0; }
.job-meta-item .li-icon { width: 15px; height: 15px; }
.avatar-upload-btn .li-icon { width: 15px; height: 15px; }
.emp-section-divider .li-icon { width: 16px; height: 16px; opacity: 0.85; }
.contact-detail-row .li-icon { width: 15px; height: 15px; color: var(--text-hint); flex-shrink: 0; }
.emergency-label .li-icon { width: 13px; height: 13px; }
.emergency-row .li-icon { width: 13px; height: 13px; color: var(--text-hint); flex-shrink: 0; }
.m365-status .li-icon { width: 18px; height: 18px; }
.ml-card-dates .li-icon { width: 14px; height: 14px; }
.emp-card-meta-item .li-icon { width: 14px; height: 14px; color: var(--text-hint); }
.apv-card-meta-item .li-icon { width: 14px; height: 14px; color: var(--text-hint); }
.apv-comment-indicator .li-icon { width: 13px; height: 13px; line-height: 1; color: var(--bg, #F4F5F7); }
.apv-comment-preview .li-icon { color: var(--primary) !important; }
.balance-info-btn .li-icon { width: 18px; height: 18px; }
.batch-result-ok .batch-result-title .li-icon { color: #2E7D32; width: 18px; height: 18px; }
.batch-result-err .batch-result-title .li-icon { color: var(--primary); width: 18px; height: 18px; }
.lm-group-header .li-icon { width: 17px; height: 17px; }
.lm-drill-empty .li-icon { width: 18px; height: 18px; }
.lm-adj-hint .li-icon { margin-top: 1px; flex-shrink: 0; }
.med-stat-icon .li-icon { width: 20px; height: 20px; color: white; }
.med-empty-state .li-icon { width: 48px; height: 48px; }
.doc-empty .li-icon { width: 48px; height: 48px; display: block; margin-bottom: 8px; opacity: .4; }
.doc-icon .li-icon { width: 22px; height: 22px; }
.doc-cat-badge .li-icon { width: 12px; height: 12px; }
.user-menu-item .li-icon { width: 18px; height: 18px; color: var(--text-secondary); }
.user-menu-signout .li-icon { color: #d32f2f !important; }
.ann-alert-header .li-icon { animation: alert-pulse 1.8s ease-in-out infinite; }
.stat-card:hover .stat-icon .li-icon { animation: stat-spring 0.45s ease forwards; }
/* ─── SSO LOGIN ──────────────────────────────────────────────────────────── */
.sso-section { margin-top: 4px; }
.sso-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: rgba(255,255,255,0.3); font-size: 12px; }
.sso-divider::before, .sso-divider::after { content:''; flex:1; height:1px; background: rgba(255,255,255,0.15); }
.btn-sso-ms {
display: flex; align-items: center; justify-content: center; gap: 10px;
width: 100%; padding: 12px 16px; border-radius: var(--radius);
background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.85); font-size: 14px; font-weight: 500;
border: 1px solid rgba(255,255,255,0.18); cursor: pointer; text-decoration: none;
transition: background 0.18s, border-color 0.18s;
}
.btn-sso-ms:hover { background: rgba(255,255,255,0.13); border-color: rgba(255,255,255,0.3); }
.sso-ms-icon { width: 20px; height: 20px; flex-shrink: 0; }
.sso-admin-fallback { text-align: center; margin-top: 14px; }
.sso-admin-link {
background: none; border: none; color: rgba(255,255,255,0.28);
font-size: 12px; cursor: pointer; padding: 0;
text-decoration: underline; text-underline-offset: 2px; transition: color 0.2s;
}
.sso-admin-link:hover { color: rgba(255,255,255,0.55); }
/* ─── WORKFLOW DASHBOARD ─────────────────────────────────────────────────── */
.wf-row { display: grid; grid-template-columns: 32px minmax(0,1fr) 110px 100px 30px; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; transition: background var(--transition); border-bottom: 1px solid var(--divider); }
.wf-row:last-child { border-bottom: none; }
.wf-row:hover { background: var(--bg); }
.wf-row.expanded { background: rgba(132,27,35,0.03); }
.wf-row-detail { padding: 12px 14px 14px 54px; background: rgba(132,27,35,0.02); border-bottom: 1px solid var(--divider); }
.wf-chevron { color: var(--text-hint); transition: transform 0.2s; flex-shrink: 0; }
.wf-chevron.open { transform: rotate(90deg); }
.wf-detail-prog { margin-bottom: 10px; }
.wf-detail-bar { height: 6px; background: var(--divider); border-radius: 3px; overflow: hidden; }
.wf-detail-fill { height: 100%; background: #2E7D32; border-radius: 3px; transition: width 0.3s; }
.wf-detail-fill.off { background: #4a7c59; }
.wf-detail-label { font-size: 11px; color: var(--text-secondary); margin-top: 4px; display: flex; justify-content: space-between; }
.wf-task-list { display: flex; flex-direction: column; gap: 3px; }
.wf-task { display: flex; align-items: flex-start; gap: 8px; padding: 3px 0; }
.wf-task-box { width: 15px; height: 15px; border-radius: 3px; border: 1.5px solid var(--border-color, #ddd); flex-shrink: 0; margin-top: 2px; display: flex; align-items: center; justify-content: center; }
.wf-task-box.done { background: var(--lex-green, #2E7D32); border-color: var(--lex-green, #2E7D32); }
.wf-task-text { font-size: 12px; color: var(--text-secondary); line-height: 1.4; }
.wf-task-text.done { text-decoration: line-through; color: var(--text-hint); }
.wf-task-sub { font-size: 11px; color: var(--text-hint); margin-top: 1px; }
.wf-actions { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
/* Mini workflow progress bar in employee list */
.emp-wf-bar-wrap { margin-top: 3px; display: flex; align-items: center; gap: 6px; }
.emp-wf-mini-bar { flex: 1; max-width: 80px; height: 3px; background: var(--divider); border-radius: 2px; overflow: hidden; }
.emp-wf-mini-fill { height: 100%; border-radius: 2px; background: #2E7D32; }
.emp-wf-mini-fill.off { background: #4a7c59; }
.emp-wf-label { font-size: 10px; white-space: nowrap; font-weight: 500; }