/*
* VEM Client Design System
* Foundation version: 1.0.0
*
* This file is intentionally not linked by production pages yet. It is the
* migration target that will replace page-owned CSS and, after validation,
* the legacy vem-theme.css file.
*/
@layer vem.reset, vem.tokens, vem.base, vem.layout, vem.components, vem.utilities;
@layer vem.tokens {
:root {
color-scheme: light;
/* Typography */
--vem-font-sans: "Segoe UI Variable", "Segoe UI", Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
--vem-font-size-xs: 0.75rem;
--vem-font-size-sm: 0.875rem;
--vem-font-size-md: 1rem;
--vem-font-size-lg: 1.125rem;
--vem-font-size-xl: 1.375rem;
--vem-font-size-2xl: clamp(1.75rem, 2.4vw, 2.25rem);
--vem-line-height-tight: 1.2;
--vem-line-height-body: 1.55;
--vem-weight-regular: 400;
--vem-weight-medium: 600;
--vem-weight-bold: 700;
/* Spacing */
--vem-space-1: 0.25rem;
--vem-space-2: 0.5rem;
--vem-space-3: 0.75rem;
--vem-space-4: 1rem;
--vem-space-5: 1.25rem;
--vem-space-6: 1.5rem;
--vem-space-8: 2rem;
--vem-space-10: 2.5rem;
--vem-space-12: 3rem;
/* Geometry */
--vem-radius-control: 0.625rem;
--vem-radius-card: 0.875rem;
--vem-radius-panel: 1.125rem;
--vem-radius-pill: 999px;
--vem-control-height: 2.75rem;
--vem-control-height-compact: 2.25rem;
--vem-content-width: 96rem;
--vem-sidebar-width: 18rem;
/* Brand and semantic colours */
--vem-brand: #2448a8;
--vem-brand-hover: #193783;
--vem-brand-contrast: #ffffff;
--vem-accent: #0f8278;
--vem-accent-soft: #e7f5f2;
--vem-success: #16724f;
--vem-success-soft: #e8f7f0;
--vem-warning: #9a5b12;
--vem-warning-soft: #fff6df;
--vem-danger: #b4232d;
--vem-danger-soft: #fff0f1;
--vem-info: #225ea8;
--vem-info-soft: #eaf2ff;
/* Default theme: plain white (Free eligible) */
--vem-canvas: #f4f7fb;
--vem-canvas-raised: #ffffff;
--vem-surface: #ffffff;
--vem-surface-subtle: #f0f4f8;
--vem-surface-hover: #f8faff;
--vem-text: #142033;
--vem-text-muted: #61738b;
--vem-text-faint: #8796aa;
--vem-border: #d4dde8;
--vem-border-strong: #afbdce;
--vem-control-bg: #ffffff;
--vem-control-text: #142033;
--vem-control-placeholder: #8796aa;
--vem-overlay: rgba(8, 18, 34, 0.58);
--vem-focus: rgba(36, 72, 168, 0.3);
--vem-shadow-sm: 0 4px 14px rgba(20, 32, 51, 0.07);
--vem-shadow-md: 0 10px 28px rgba(20, 32, 51, 0.11);
--vem-shadow-lg: 0 18px 46px rgba(20, 32, 51, 0.16);
/* Data visualisation palette. Theme stylesheets may override these
tokens without changing dashboard chart behaviour. */
--vem-chart-surface: #edf3f9;
--vem-chart-grid: rgba(91, 113, 143, 0.18);
--vem-chart-text: #61738b;
--vem-chart-border: #edf3f9;
--vem-chart-border-width: 2;
--vem-chart-bar-start: #5bcac2;
--vem-chart-bar-end: #315fcb;
--vem-chart-bar-hover: #244eae;
--vem-chart-1: #315fcb;
--vem-chart-2: #0f9488;
--vem-chart-3: #5f79d4;
--vem-chart-4: #2d84a7;
--vem-chart-5: #745bb0;
--vem-chart-6: #c98234;
--vem-chart-7: #52789c;
--vem-chart-8: #bd5d78;
}
:root[data-vem-theme="white"] {
color-scheme: light;
}
:root[data-vem-theme="dark"] {
color-scheme: dark;
--vem-canvas: #101b2d;
--vem-canvas-raised: #14243a;
--vem-surface: #1a2b43;
--vem-surface-subtle: #20344f;
--vem-surface-hover: #263c59;
--vem-text: #f1f5fa;
--vem-text-muted: #b7c4d5;
--vem-text-faint: #8fa0b7;
--vem-border: #314761;
--vem-border-strong: #49617d;
--vem-control-bg: #20344f;
--vem-control-text: #f1f5fa;
--vem-control-placeholder: #9aabc0;
--vem-overlay: rgba(2, 8, 18, 0.76);
--vem-focus: rgba(95, 138, 255, 0.38);
--vem-shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.2);
--vem-shadow-md: 0 10px 28px rgba(0, 0, 0, 0.28);
--vem-shadow-lg: 0 18px 46px rgba(0, 0, 0, 0.36);
}
:root[data-vem-theme="enterprise"] {
color-scheme: dark;
--vem-canvas: #16243a;
--vem-canvas-raised: #1c2d46;
--vem-surface: #dce5ef;
--vem-surface-subtle: #d3deea;
--vem-surface-hover: #e5ebf2;
--vem-text: #142033;
--vem-text-muted: #61738b;
--vem-text-faint: #8392a6;
--vem-border: #afbdce;
--vem-border-strong: #8fa2b8;
--vem-control-bg: #edf2f7;
--vem-control-text: #142033;
--vem-control-placeholder: #74859b;
--vem-overlay: rgba(4, 12, 26, 0.72);
--vem-focus: rgba(36, 72, 168, 0.34);
--vem-shadow-sm: 0 4px 14px rgba(3, 12, 27, 0.12);
--vem-shadow-md: 0 10px 28px rgba(3, 12, 27, 0.18);
--vem-shadow-lg: 0 18px 46px rgba(3, 12, 27, 0.25);
}
}
@layer vem.reset {
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
min-height: 100%;
scroll-behavior: smooth;
}
body {
min-height: 100vh;
margin: 0;
}
button,
input,
select,
textarea {
font: inherit;
}
img,
svg {
display: block;
max-width: 100%;
}
}
@layer vem.base {
body.vem-ui {
color: var(--vem-text);
font-family: var(--vem-font-sans);
font-size: var(--vem-font-size-md);
line-height: var(--vem-line-height-body);
background: var(--vem-canvas);
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
.vem-ui :where(h1, h2, h3, h4, p) {
margin-block-start: 0;
}
.vem-ui :where(h1, h2, h3, h4) {
color: var(--vem-text);
line-height: var(--vem-line-height-tight);
}
.vem-ui :where(a) {
color: inherit;
}
.vem-ui :where(button, a, input, select, textarea, [tabindex]):focus-visible {
outline: 3px solid var(--vem-focus);
outline-offset: 2px;
}
}
@layer vem.layout {
.vem-centered-page {
display: grid;
min-height: 100vh;
place-items: center;
padding: var(--vem-space-6);
}
.vem-page {
width: min(100%, var(--vem-content-width));
margin-inline: auto;
padding: var(--vem-space-8);
}
.vem-stack {
display: flex;
flex-direction: column;
gap: var(--vem-space-4);
}
.vem-form--compact {
width: min(100%, 29rem);
margin-inline: auto;
align-items: center;
}
.vem-form--compact .vem-field {
width: 100%;
}
.vem-form--left {
width: min(100%, 24rem);
margin-inline: 0;
align-items: flex-start;
}
.vem-cluster {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--vem-space-3);
}
.vem-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
gap: var(--vem-space-5);
}
}
@layer vem.components {
/* Buttons */
.vem-btn {
display: inline-flex;
min-height: var(--vem-control-height);
align-items: center;
justify-content: center;
gap: var(--vem-space-2);
padding: 0.625rem 1rem;
border: 1px solid var(--vem-border-strong);
border-radius: var(--vem-radius-control);
color: var(--vem-text);
font-weight: var(--vem-weight-bold);
line-height: 1.2;
text-align: center;
text-decoration: none;
background: var(--vem-surface);
box-shadow: var(--vem-shadow-sm);
cursor: pointer;
transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.vem-btn:hover:not(:disabled) {
background: var(--vem-surface-hover);
box-shadow: var(--vem-shadow-md);
transform: translateY(-1px);
}
.vem-btn:active:not(:disabled) {
transform: translateY(0);
}
.vem-btn:disabled,
.vem-btn[aria-disabled="true"] {
opacity: 0.55;
cursor: not-allowed;
box-shadow: none;
}
.vem-btn--primary {
border-color: var(--vem-brand);
color: var(--vem-brand-contrast);
background: var(--vem-brand);
}
.vem-btn--primary:hover:not(:disabled) {
border-color: var(--vem-brand-hover);
background: var(--vem-brand-hover);
}
.vem-btn--danger {
border-color: color-mix(in srgb, var(--vem-danger) 42%, var(--vem-border));
color: var(--vem-danger);
background: var(--vem-danger-soft);
}
.vem-btn--quiet {
box-shadow: none;
background: transparent;
}
.vem-btn--compact {
min-height: var(--vem-control-height-compact);
padding: 0.4rem 0.75rem;
font-size: var(--vem-font-size-sm);
}
/* Form controls */
.vem-field {
display: grid;
gap: var(--vem-space-2);
}
.vem-label {
color: var(--vem-text-muted);
font-size: var(--vem-font-size-xs);
font-weight: var(--vem-weight-bold);
letter-spacing: 0.055em;
text-transform: uppercase;
}
.vem-control {
width: 100%;
min-height: var(--vem-control-height);
padding: 0.625rem 0.875rem;
border: 1px solid var(--vem-border);
border-radius: var(--vem-radius-control);
color: var(--vem-control-text);
background: var(--vem-control-bg);
transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}
.vem-control::placeholder {
color: var(--vem-control-placeholder);
opacity: 1;
}
.vem-field--checkbox { gap: 0; }
.vem-checkbox-label {
display: flex;
align-items: center;
gap: 8px;
font-size: var(--vem-font-size-sm, 13px);
color: var(--vem-text-muted);
cursor: pointer;
}
.vem-checkbox-label input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: var(--vem-brand, #1f6feb);
cursor: pointer;
}
.vem-control:hover:not(:disabled) {
border-color: var(--vem-border-strong);
}
.vem-control:focus {
border-color: var(--vem-brand);
outline: 0;
box-shadow: 0 0 0 3px var(--vem-focus);
}
textarea.vem-control {
min-height: 7rem;
resize: vertical;
}
/* Cards and panels */
.vem-card,
.vem-panel {
border: 1px solid var(--vem-border);
color: var(--vem-text);
background: var(--vem-surface);
box-shadow: var(--vem-shadow-sm);
}
.vem-card {
padding: var(--vem-space-5);
border-radius: var(--vem-radius-card);
}
.vem-panel {
padding: var(--vem-space-6);
border-radius: var(--vem-radius-panel);
}
.vem-dialog-panel {
width: min(100%, 38.75rem);
padding: var(--vem-space-10);
text-align: center;
box-shadow: var(--vem-shadow-lg);
}
.vem-dialog-panel > :last-child {
margin-bottom: 0;
}
.vem-dialog-panel--left {
text-align: left;
}
.vem-scroll-region {
max-height: var(--vem-scroll-max-height, 32rem);
overflow: auto;
overscroll-behavior: contain;
scrollbar-gutter: stable;
}
/* Messages */
.vem-alert {
display: flex;
align-items: flex-start;
gap: var(--vem-space-3);
padding: var(--vem-space-4);
border: 1px solid var(--vem-border);
border-radius: var(--vem-radius-card);
color: var(--vem-text);
background: var(--vem-surface-subtle);
}
.vem-alert--success {
border-color: color-mix(in srgb, var(--vem-success) 35%, transparent);
color: var(--vem-success);
background: var(--vem-success-soft);
}
.vem-alert--warning {
border-color: color-mix(in srgb, var(--vem-warning) 35%, transparent);
color: var(--vem-warning);
background: var(--vem-warning-soft);
}
.vem-alert--danger {
border-color: color-mix(in srgb, var(--vem-danger) 35%, transparent);
color: var(--vem-danger);
background: var(--vem-danger-soft);
}
.vem-alert--info {
border-color: color-mix(in srgb, var(--vem-info) 35%, transparent);
color: var(--vem-info);
background: var(--vem-info-soft);
}
.vem-status-icon {
display: grid;
width: 3.625rem;
height: 3.625rem;
margin-inline: auto;
place-items: center;
border: 1px solid var(--vem-border);
border-radius: var(--vem-radius-card);
color: var(--vem-info);
font-size: var(--vem-font-size-xl);
font-weight: var(--vem-weight-bold);
background: var(--vem-info-soft);
}
.vem-status-icon--warning {
border-color: color-mix(in srgb, var(--vem-warning) 35%, transparent);
color: var(--vem-warning);
background: var(--vem-warning-soft);
}
/* Modal foundation */
.vem-modal-backdrop {
position: fixed;
inset: 0;
z-index: 1000;
display: grid;
place-items: center;
padding: var(--vem-space-5);
background: var(--vem-overlay);
}
.vem-modal {
width: min(100%, 42rem);
max-height: min(90vh, 52rem);
overflow: auto;
border: 1px solid var(--vem-border);
border-radius: var(--vem-radius-panel);
color: var(--vem-text);
background: var(--vem-surface);
box-shadow: var(--vem-shadow-lg);
}
}
@layer vem.utilities {
.vem-sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
.vem-text-muted {
color: var(--vem-text-muted) !important;
}
.vem-text-center {
text-align: center !important;
}
.vem-justify-center {
justify-content: center !important;
}
.vem-margin-top-6 {
margin-top: var(--vem-space-6) !important;
}
.vem-margin-bottom-5 {
margin-bottom: var(--vem-space-5) !important;
}
.vem-width-full {
width: 100% !important;
}
}
@media (max-width: 48rem) {
@layer vem.layout {
.vem-page {
padding: var(--vem-space-4);
}
}
}
@media (prefers-reduced-motion: reduce) {
@layer vem.reset {
*,
*::before,
*::after {
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
}
}
/* Authentication shell */
@layer vem.layout {
.vem-auth-page {
display: grid;
min-height: 100vh;
place-items: center;
padding: var(--vem-space-8);
background:
radial-gradient(circle at 12% 18%, rgba(24, 130, 120, 0.16), transparent 38%),
radial-gradient(circle at 88% 82%, rgba(36, 72, 168, 0.16), transparent 42%),
var(--vem-canvas);
}
.vem-auth-page .login-shell {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(22rem, 27rem);
width: min(100%, 70rem);
min-height: 38rem;
overflow: hidden;
border: 1px solid var(--vem-border-strong);
border-radius: var(--vem-radius-panel);
background: var(--vem-surface);
box-shadow: var(--vem-shadow-lg);
}
.vem-auth-page .brand-panel,
.vem-auth-page .form-panel {
display: flex;
flex-direction: column;
justify-content: center;
}
.vem-auth-page .brand-panel {
padding: clamp(2.5rem, 5vw, 4rem);
border-right: 1px solid var(--vem-border);
background: linear-gradient(145deg, var(--vem-surface-hover), var(--vem-surface-subtle));
}
.vem-auth-page .form-panel {
padding: clamp(2rem, 4vw, 3.5rem) clamp(1.75rem, 3.5vw, 3rem);
background: var(--vem-surface);
}
}
@layer vem.components {
.page-profile-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--vem-space-6);
margin-bottom: var(--vem-space-6);
}
.page-profile-header > :first-child {
min-width: 0;
}
.user-profile[data-profile-mode="page"] {
position: relative;
display: flex;
min-width: 17.25rem;
min-height: 5rem;
align-items: center;
flex: 0 0 auto;
padding: 0;
overflow: hidden;
border: 1px solid var(--vem-border);
border-radius: var(--vem-radius-card);
color: var(--vem-text);
text-decoration: none;
background: var(--vem-surface);
box-shadow: var(--vem-shadow-sm);
transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.user-profile[data-profile-mode="page"] .user-profile__inner {
position: relative;
z-index: 1;
display: flex;
width: 100%;
min-height: inherit;
align-items: center;
gap: var(--vem-space-4);
padding: 0.75rem 1rem;
box-sizing: border-box;
}
.user-profile[data-profile-mode="page"] .user-profile__identity {
display: block;
min-width: 0;
}
.user-profile[data-profile-mode="page"]:hover {
transform: translateY(-2px);
border-color: var(--vem-border-strong);
box-shadow: var(--vem-shadow-md);
}
.user-profile[data-profile-mode="page"] .user-avatar {
display: grid;
width: 3.25rem;
height: 3.25rem;
place-items: center;
flex: 0 0 auto;
border-radius: var(--vem-radius-control);
color: var(--vem-brand-contrast);
font-size: 0.9375rem;
font-weight: var(--vem-weight-bold);
background: linear-gradient(145deg, #315bb7, var(--vem-brand));
box-shadow: var(--vem-shadow-sm);
}
.user-profile[data-profile-mode="page"] .user-name {
display: block;
color: var(--vem-text);
font-size: var(--vem-font-size-md);
font-weight: var(--vem-weight-bold);
line-height: 1.3;
white-space: nowrap;
}
.user-profile[data-profile-mode="page"] .user-role {
display: block;
margin-top: 0.3125rem;
color: var(--vem-text-muted);
font-size: var(--vem-font-size-sm);
font-weight: var(--vem-weight-regular);
line-height: 1.25;
white-space: nowrap;
}
.vem-auth-page .logo-box img {
width: 9rem;
height: 9rem;
object-fit: contain;
}
.vem-auth-page .brand-title {
max-width: 32rem;
margin: 0 0 var(--vem-space-4);
color: var(--vem-text);
font-size: clamp(2.25rem, 4vw, 3rem);
font-weight: var(--vem-weight-bold);
line-height: 1.05;
}
.vem-auth-page .brand-copy {
max-width: 28rem;
margin: 0 0 var(--vem-space-8);
color: var(--vem-text-muted);
line-height: 1.7;
}
.vem-auth-page .features {
display: grid;
gap: var(--vem-space-3);
margin: 0;
padding: 0;
color: var(--vem-text-muted);
list-style: none;
}
.vem-auth-page .features li {
display: flex;
align-items: center;
gap: var(--vem-space-3);
font-size: var(--vem-font-size-sm);
font-weight: var(--vem-weight-medium);
}
.vem-auth-page .features li::before {
width: 0.65rem;
height: 0.65rem;
flex: 0 0 0.65rem;
border-radius: 50%;
background: var(--vem-accent);
content: "";
}
.vem-auth-page .login-title {
margin: 0 0 var(--vem-space-2);
color: var(--vem-text);
font-size: var(--vem-font-size-2xl);
line-height: var(--vem-line-height-tight);
}
.vem-auth-page .login-subtitle {
margin: 0 0 var(--vem-space-8);
color: var(--vem-text-muted);
font-size: var(--vem-font-size-sm);
}
.vem-auth-page form {
display: grid;
gap: var(--vem-space-5);
}
.vem-auth-page .footer-note {
margin: var(--vem-space-6) 0 0;
color: var(--vem-text-faint);
font-size: var(--vem-font-size-xs);
line-height: 1.5;
text-align: center;
}
}
@media (max-width: 43.75rem) {
@layer vem.components {
.page-profile-header {
align-items: flex-start;
flex-direction: column;
}
.user-profile[data-profile-mode="page"] {
width: 100%;
min-width: 0;
}
}
}
@media (max-width: 58rem) {
@layer vem.layout {
.vem-auth-page .login-shell {
grid-template-columns: 1fr;
}
.vem-auth-page .brand-panel {
border-right: 0;
border-bottom: 1px solid var(--vem-border);
}
}
}
@media (max-width: 34rem) {
@layer vem.layout {
.vem-auth-page {
padding: var(--vem-space-4);
}
.vem-auth-page .brand-panel {
display: none;
}
.vem-auth-page .login-shell {
min-height: auto;
}
}
}
/* Temporary page bridge while markup is converted to shared components. */
@layer vem.components {
.vem-page--admin-shift-override .main-content { min-height: 100vh; margin-left: 290px; padding: 23px; }
.vem-page--admin-shift-override .title { margin: 0; color: #172238; font-size: 28px; }
.vem-page--admin-shift-override .subtitle { margin: 5.5px 0 19.5px; color: #687b99; }
.vem-page--admin-shift-override .panel { max-width: 760px; padding: 20.5px; border: 1px solid rgba(255, 255, 255, .82); border-radius: 19px; background: rgba(255, 255, 255, .3); }
.vem-page--admin-shift-override .summary { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; padding: 14px; border-radius: 13px; background: rgba(255, 255, 255, .58); }
.vem-page--admin-shift-override .summary span { display: block; color: #71819b; font-size: 11px; text-transform: uppercase; }
.vem-page--admin-shift-override .summary strong { display: block; margin-top: 3.5px; color: #172238; }
.vem-page--admin-shift-override .field { display: flex; flex-direction: column; gap: 5.5px; margin-top: 12.5px; }
.vem-page--admin-shift-override .field[hidden] { display: none !important; }
.vem-page--admin-shift-override .field label { color: #526783; font-size: 12px; font-weight: 850; text-transform: uppercase; }
.vem-page--admin-shift-override .control { min-height: 46px; padding: 8px 10px; border: 1px solid #ccd6e8; border-radius: 10.5px; background: #fff; }
.vem-page--admin-shift-override .actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; }
.vem-page--admin-shift-override .btn { min-height: 45px; padding: 8px 13px; border: 1px solid rgba(104, 125, 166, .2); border-radius: 10.5px; color: #172238; font-weight: 850; text-decoration: none; background: #fff; }
.vem-page--admin-shift-override .btn-primary { border: 0; color: #fff; background: linear-gradient(135deg, #287fee, #1557c7); }
.vem-page--admin-shift-override .alert { margin-bottom: 13px; padding: 10.5px; border: 1px solid #efb7b7; border-radius: 10.5px; color: #a61d1d; font-weight: 750; background: #fff0f0; }
}
@media (max-width: 900px) {
@layer vem.components {
.vem-page--admin-shift-override .main-content { margin-left: 72px; }
}
}
@media (max-width: 600px) {
@layer vem.components {
.vem-page--admin-shift-override .main-content { margin-left: 0; padding: 13px 10px; }
.vem-page--admin-shift-override .summary { grid-template-columns: 1fr; }
.vem-page--admin-shift-override .actions { flex-direction: column; }
}
}
/* Generic modal chrome ----------------------------------------------------
Every existing page defines its own page-scoped .modal-overlay/.modal
rule (body.vem-page-x .modal-overlay {...}), duplicated per page rather
than shared — so a page with no such block gets no position:fixed/
centering/backdrop at all, and its modal renders as a plain inline div.
This is a low-specificity fallback so any page (existing or new) that
doesn't define its own .modal-overlay block still gets a working
centered dialog; pages with their own page-scoped rule are unaffected,
since that rule's extra body.vem-page-x class always outranks this. */
.modal-overlay {
position: fixed;
inset: 0;
z-index: 1000;
display: none;
place-items: center;
padding: 20px;
background: rgba(4, 8, 16, 0.55);
backdrop-filter: blur(4px);
}
.modal-overlay.active { display: grid; }
.modal {
width: min(640px, 100%);
max-height: 92vh;
overflow: auto;
border-radius: var(--radius-lg, 18px);
background: var(--panel-solid, #fff);
box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
}
.modal-header, .modal-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 18px 22px;
}
.modal-header { border-bottom: 1px solid var(--line); }
.modal-footer { border-top: 1px solid var(--line); justify-content: flex-end; }
.modal-body { padding: 20px 22px; display: grid; gap: 14px; }
.modal-close {
border: 0;
background: transparent;
font-size: 22px;
line-height: 1;
cursor: pointer;
color: var(--muted);
}
/* Shared confirm dialog (assets/js/vem-confirm.js) ------------------------
Self-contained button/text classes rather than the page-scoped .btn/
.btn-delete/.btn-cancel names every page defines independently — this
modal is injected by JS onto ANY page, so it can't depend on that page
happening to already style those names the same way. */
.vem-confirm-message { margin: 0; color: var(--muted, #64748b); line-height: 1.5; }
.vem-confirm-btn {
min-height: 42px;
padding: 10px 18px;
border-radius: var(--radius, 12px);
border: 1px solid var(--line, #e2e8f0);
background: var(--danger, #b91c1c);
color: #fff;
font-weight: 700;
cursor: pointer;
}
.vem-confirm-btn:hover { filter: brightness(1.08); }
.vem-confirm-btn--cancel {
background: var(--panel-hover, var(--panel-solid, #fff));
color: var(--ink, var(--text, #0f172a));
border-color: var(--line, #e2e8f0);
}
.vem-confirm-btn--cancel:hover { background: var(--panel-soft, rgba(85, 111, 145, 0.06)); }
.vem-confirm-btn--neutral {
background: var(--brand, #0F7C86);
border-color: transparent;
}
/* Performance Management pages ---------------------------------------------
Grouped into one block (rather than duplicated per page, like older
pages) since all four share the same layout needs — same reasoning as
the generic modal chrome above: these pages had none of the page-scoped
spacing/layout rules every other page hand-writes for itself, which is
what made them render with no padding, no gaps, stacked buttons, etc. */
:is(
.vem-page-manage-performance-cycles, .vem-page-manage-performance-grades, .vem-page-manage-company-roles,
.vem-page-my-performance-reviews, .vem-page-approve-performance-reviews
) .main-content {
margin-left: 270px;
padding: 28px 31px 37.5px;
box-sizing: border-box;
}
:is(
.vem-page-manage-performance-cycles, .vem-page-manage-performance-grades, .vem-page-manage-company-roles,
.vem-page-my-performance-reviews, .vem-page-approve-performance-reviews
) .top-bar {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16.5px;
margin-bottom: 19.5px;
flex-wrap: wrap;
}
:is(
.vem-page-manage-performance-cycles, .vem-page-manage-performance-grades, .vem-page-manage-company-roles,
.vem-page-my-performance-reviews, .vem-page-approve-performance-reviews
) .page-title { margin: 0; font-size: 23px; font-weight: 760; }
:is(
.vem-page-manage-performance-cycles, .vem-page-manage-performance-grades, .vem-page-manage-company-roles,
.vem-page-my-performance-reviews, .vem-page-approve-performance-reviews
) .page-subtitle { max-width: 720px; margin: 6.5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
:is(
.vem-page-manage-performance-cycles, .vem-page-manage-performance-grades, .vem-page-manage-company-roles,
.vem-page-my-performance-reviews, .vem-page-approve-performance-reviews
) .panel {
margin-bottom: 16.5px;
padding: 19.5px;
border: 1px solid var(--line);
border-radius: var(--radius-lg, 13px);
background: var(--panel-solid, var(--panel));
box-shadow: var(--shadow-sm);
}
:is(
.vem-page-manage-performance-cycles, .vem-page-manage-performance-grades, .vem-page-manage-company-roles,
.vem-page-my-performance-reviews, .vem-page-approve-performance-reviews
) .panel-header {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 15px;
}
:is(
.vem-page-manage-performance-cycles, .vem-page-manage-performance-grades, .vem-page-manage-company-roles,
.vem-page-my-performance-reviews, .vem-page-approve-performance-reviews
) .panel-header h2 { margin: 0; font-size: 15.5px; font-weight: 760; }
:is(
.vem-page-manage-performance-cycles, .vem-page-manage-performance-grades, .vem-page-manage-company-roles,
.vem-page-my-performance-reviews, .vem-page-approve-performance-reviews
) .rate-meta { color: var(--muted); font-size: 12px; }
:is(
.vem-page-manage-performance-cycles, .vem-page-manage-performance-grades, .vem-page-manage-company-roles,
.vem-page-my-performance-reviews, .vem-page-approve-performance-reviews
) .table-wrap { overflow-x: auto; }
:is(
.vem-page-manage-performance-cycles, .vem-page-manage-performance-grades, .vem-page-manage-company-roles,
.vem-page-my-performance-reviews, .vem-page-approve-performance-reviews
) table { width: 100%; border-collapse: collapse; }
:is(
.vem-page-manage-performance-cycles, .vem-page-manage-performance-grades, .vem-page-manage-company-roles,
.vem-page-my-performance-reviews, .vem-page-approve-performance-reviews
) :is(th, td) { padding: 10px 11.5px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
:is(
.vem-page-manage-performance-cycles, .vem-page-manage-performance-grades, .vem-page-manage-company-roles,
.vem-page-my-performance-reviews, .vem-page-approve-performance-reviews
) th { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
:is(
.vem-page-manage-performance-cycles, .vem-page-manage-performance-grades, .vem-page-manage-company-roles,
.vem-page-my-performance-reviews, .vem-page-approve-performance-reviews
) .row-actions { display: flex; gap: 6.5px; flex-wrap: wrap; align-items: center; }
:is(
.vem-page-manage-performance-cycles, .vem-page-manage-performance-grades, .vem-page-manage-company-roles,
.vem-page-my-performance-reviews, .vem-page-approve-performance-reviews
) .inline-form { display: inline-block; margin: 0; }
:is(
.vem-page-manage-performance-cycles, .vem-page-manage-performance-grades, .vem-page-manage-company-roles,
.vem-page-my-performance-reviews, .vem-page-approve-performance-reviews
) .field { display: grid; gap: 5px; margin-bottom: 13px; }
:is(
.vem-page-manage-performance-cycles, .vem-page-manage-performance-grades, .vem-page-manage-company-roles,
.vem-page-my-performance-reviews, .vem-page-approve-performance-reviews
) .field.wide { grid-column: 1 / -1; }
:is(
.vem-page-manage-performance-cycles, .vem-page-manage-performance-grades, .vem-page-manage-company-roles,
.vem-page-my-performance-reviews, .vem-page-approve-performance-reviews
) .field label {
margin: 0;
color: var(--muted);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
:is(
.vem-page-manage-performance-cycles, .vem-page-manage-performance-grades, .vem-page-manage-company-roles,
.vem-page-my-performance-reviews, .vem-page-approve-performance-reviews
) .required-marker { color: var(--danger); }
:is(
.vem-page-manage-performance-cycles, .vem-page-manage-performance-grades, .vem-page-manage-company-roles,
.vem-page-my-performance-reviews, .vem-page-approve-performance-reviews
) .control {
width: 100%;
min-height: 42px;
padding: 8px 10px;
border: 1px solid var(--line);
border-radius: var(--radius-md, 8px);
background: var(--panel-solid, var(--panel));
color: var(--ink);
font: inherit;
font-size: 12px;
box-sizing: border-box;
}
:is(
.vem-page-manage-performance-cycles, .vem-page-manage-performance-grades, .vem-page-manage-company-roles,
.vem-page-my-performance-reviews, .vem-page-approve-performance-reviews
) .control:focus {
outline: none;
border-color: var(--brand);
box-shadow: 0 0 0 3px rgba(31, 111, 235, 0.15);
}
:is(
.vem-page-manage-performance-cycles, .vem-page-manage-performance-grades, .vem-page-manage-company-roles,
.vem-page-my-performance-reviews, .vem-page-approve-performance-reviews
) textarea.control { resize: vertical; }
:is(
.vem-page-manage-performance-cycles, .vem-page-manage-performance-grades, .vem-page-manage-company-roles,
.vem-page-my-performance-reviews, .vem-page-approve-performance-reviews
) select.control { cursor: pointer; }
:is(
.vem-page-manage-performance-cycles, .vem-page-manage-performance-grades, .vem-page-manage-company-roles,
.vem-page-my-performance-reviews, .vem-page-approve-performance-reviews
) .filters { display: flex; flex-wrap: wrap; align-items: end; gap: 11.5px; margin-bottom: 16.5px; }
:is(
.vem-page-manage-performance-cycles, .vem-page-manage-performance-grades, .vem-page-manage-company-roles,
.vem-page-my-performance-reviews, .vem-page-approve-performance-reviews
) .section-actions { display: flex; gap: 6.5px; flex-wrap: wrap; }
:is(
.vem-page-manage-performance-cycles, .vem-page-manage-performance-grades, .vem-page-manage-company-roles,
.vem-page-my-performance-reviews, .vem-page-approve-performance-reviews
) .actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 15px; flex-wrap: wrap; }
:is(
.vem-page-manage-performance-cycles, .vem-page-manage-performance-grades, .vem-page-manage-company-roles,
.vem-page-my-performance-reviews, .vem-page-approve-performance-reviews
) .list { display: grid; gap: 10px; }
:is(
.vem-page-manage-performance-cycles, .vem-page-manage-performance-grades, .vem-page-manage-company-roles,
.vem-page-my-performance-reviews, .vem-page-approve-performance-reviews
) .list-item { padding: 13px 15px; border: 1px solid var(--line); border-radius: var(--radius-md, 10px); }
:is(
.vem-page-manage-performance-cycles, .vem-page-manage-performance-grades, .vem-page-manage-company-roles,
.vem-page-my-performance-reviews, .vem-page-approve-performance-reviews
) .item-header { display: flex; justify-content: space-between; align-items: center; gap: 11.5px; flex-wrap: wrap; }
:is(
.vem-page-manage-performance-cycles, .vem-page-manage-performance-grades, .vem-page-manage-company-roles,
.vem-page-my-performance-reviews, .vem-page-approve-performance-reviews
) .item-name { font-weight: 750; }
:is(
.vem-page-manage-performance-cycles, .vem-page-manage-performance-grades, .vem-page-manage-company-roles,
.vem-page-my-performance-reviews, .vem-page-approve-performance-reviews
) .item-actions { display: flex; gap: 6.5px; align-items: center; flex-wrap: wrap; }
:is(
.vem-page-manage-performance-cycles, .vem-page-manage-performance-grades, .vem-page-manage-company-roles,
.vem-page-my-performance-reviews, .vem-page-approve-performance-reviews
) .info-box {
margin: 13px 0;
padding: 11.5px 13px;
border-left: 3px solid var(--brand);
border-radius: 0 var(--radius-md, 8px) var(--radius-md, 8px) 0;
background: var(--panel-soft, rgba(85, 111, 145, 0.06));
font-size: 12px;
line-height: 1.6;
}
:is(
.vem-page-manage-performance-cycles, .vem-page-manage-performance-grades, .vem-page-manage-company-roles,
.vem-page-my-performance-reviews, .vem-page-approve-performance-reviews
) .empty-state {
padding: 33px 16.5px;
text-align: center;
color: var(--muted);
border: 1px dashed var(--line);
border-radius: var(--radius-md, 8px);
}
:is(
.vem-page-manage-performance-cycles, .vem-page-manage-performance-grades, .vem-page-manage-company-roles,
.vem-page-my-performance-reviews, .vem-page-approve-performance-reviews
) .btn-edit {
background: linear-gradient(135deg, rgba(31, 111, 235, 0.12), rgba(31, 111, 235, 0.06));
color: var(--brand);
border-color: rgba(31, 111, 235, 0.28);
}
:is(
.vem-page-manage-performance-cycles, .vem-page-manage-performance-grades, .vem-page-manage-company-roles,
.vem-page-my-performance-reviews, .vem-page-approve-performance-reviews
) .btn-edit:hover {
background: linear-gradient(135deg, rgba(31, 111, 235, 0.2), rgba(31, 111, 235, 0.12));
transform: translateY(-2px);
border-color: var(--brand);
}
:is(
.vem-page-manage-performance-cycles, .vem-page-manage-performance-grades, .vem-page-manage-company-roles,
.vem-page-my-performance-reviews, .vem-page-approve-performance-reviews
) .btn-delete {
background: linear-gradient(135deg, rgba(185, 28, 28, 0.12), rgba(185, 28, 28, 0.06));
color: var(--danger-text, var(--danger));
border-color: rgba(185, 28, 28, 0.28);
}
:is(
.vem-page-manage-performance-cycles, .vem-page-manage-performance-grades, .vem-page-manage-company-roles,
.vem-page-my-performance-reviews, .vem-page-approve-performance-reviews
) .btn-delete:hover {
background: linear-gradient(135deg, rgba(185, 28, 28, 0.2), rgba(185, 28, 28, 0.12));
transform: translateY(-2px);
border-color: var(--danger);
}
/* .btn-edit/.btn-delete above give color variants, but this group never
had a base .btn shape (padding/radius/cursor) or a .btn-primary/
.btn-muted at all — every plain button across all five of these pages
(Import CSV's "Import"/"Download Template", etc.) was rendering as a
bare unstyled browser button/link. */
:is(
.vem-page-manage-performance-cycles, .vem-page-manage-performance-grades, .vem-page-manage-company-roles,
.vem-page-my-performance-reviews, .vem-page-approve-performance-reviews
) .btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 40px;
padding: 8px 16px;
border: 1px solid var(--line);
border-radius: var(--radius-md, 8px);
background: var(--panel-solid, var(--panel));
color: var(--ink);
cursor: pointer;
font-family: inherit;
font-size: 12.5px;
font-weight: 700;
text-decoration: none;
transition: all var(--transition-fast);
}
:is(
.vem-page-manage-performance-cycles, .vem-page-manage-performance-grades, .vem-page-manage-company-roles,
.vem-page-my-performance-reviews, .vem-page-approve-performance-reviews
) .btn-primary {
background: var(--brand);
border-color: var(--brand);
color: #fff;
}
:is(
.vem-page-manage-performance-cycles, .vem-page-manage-performance-grades, .vem-page-manage-company-roles,
.vem-page-my-performance-reviews, .vem-page-approve-performance-reviews
) .btn-muted {
background: var(--panel-hover, var(--panel-solid));
color: var(--ink-light, var(--ink));
}
:is(
.vem-page-manage-performance-cycles, .vem-page-manage-performance-grades, .vem-page-manage-company-roles,
.vem-page-my-performance-reviews, .vem-page-approve-performance-reviews
) .btn-sm {
min-height: 32px;
padding: 5px 12px;
font-size: 11.5px;
}
:is(
.vem-page-manage-performance-cycles, .vem-page-manage-performance-grades, .vem-page-manage-company-roles,
.vem-page-my-performance-reviews, .vem-page-approve-performance-reviews
) .btn:hover {
border-color: var(--line-strong, var(--line));
transform: translateY(-1px);
}
:is(
.vem-page-manage-performance-cycles, .vem-page-manage-performance-grades, .vem-page-manage-company-roles,
.vem-page-my-performance-reviews, .vem-page-approve-performance-reviews
) .btn-primary:hover {
background: var(--brand-deep, var(--brand));
}
/* Import CSV (import_users.php/import_candidates.php): the instructions
and template-download link were bare tags with only default
paragraph margins between them and the upload form, and the file
input had no styling class at all — cramped and visually inconsistent
next to the styled buttons around it. */
.csv-import-panel .info-box {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 13px;
margin: 0 0 19.5px;
}
.csv-import-panel .info-box p {
margin: 0;
flex: 1;
min-width: 260px;
}
.csv-import-panel .field {
margin-bottom: 16.5px !important;
}
.csv-import-actions {
padding-top: 16px;
border-top: 1px solid var(--line);
}
/* New/Edit Cycle modal's Projects field: was a plain card of stacked
checkboxes with zero styling and no way to search — turned into a
searchable dropdown matching this page's own .control sizing/border/
radius, same pattern as the multi-select used on Plan Shift Roster. */
body.vem-page-manage-performance-cycles .project-multiselect {
position: relative;
}
body.vem-page-manage-performance-cycles .multi-trigger {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
text-align: left;
background: var(--panel-solid, var(--panel));
color: var(--ink);
cursor: pointer;
}
body.vem-page-manage-performance-cycles .multi-trigger::after {
content: '▾';
margin-left: 8px;
color: var(--muted);
}
body.vem-page-manage-performance-cycles .project-checks {
display: none;
position: absolute;
z-index: 40;
top: calc(100% + 6px);
left: 0;
width: 100%;
max-height: 260px;
overflow: auto;
padding: 8px;
border: 1px solid var(--line);
border-radius: var(--radius-md, 8px);
background: var(--panel-solid, var(--panel));
box-shadow: var(--shadow-md, 0 18px 38px rgba(32, 47, 92, 0.18));
}
body.vem-page-manage-performance-cycles .project-checks.open {
display: block;
}
body.vem-page-manage-performance-cycles .multi-search {
position: sticky;
top: 0;
z-index: 2;
width: 100%;
min-height: 38px;
margin-bottom: 6px;
padding: 7px 10px;
border: 1px solid var(--line);
border-radius: var(--radius-md, 8px);
background: var(--panel-solid, var(--panel));
color: var(--ink);
font: inherit;
font-size: 12px;
}
body.vem-page-manage-performance-cycles .checkbox-row {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 6px;
border-radius: 6px;
font-size: 12.5px;
color: var(--ink);
cursor: pointer;
}
body.vem-page-manage-performance-cycles .checkbox-row:hover {
background: var(--panel-hover, rgba(85, 111, 145, 0.06));
}
body.vem-page-manage-performance-cycles .checkbox-row input[type="checkbox"] {
width: 15px;
height: 15px;
accent-color: var(--brand);
cursor: pointer;
}
body.vem-page-manage-performance-cycles .multi-empty {
display: none;
padding: 12px;
text-align: center;
color: var(--muted);
font-size: 12px;
}
:is(
.vem-page-manage-performance-cycles, .vem-page-manage-performance-grades, .vem-page-manage-company-roles,
.vem-page-my-performance-reviews, .vem-page-approve-performance-reviews
) .alert { margin-bottom: 15px; padding: 11.5px 15px; border-radius: var(--radius-md, 8px); font-size: 12px; font-weight: 650; border: 1px solid transparent; }
:is(
.vem-page-manage-performance-cycles, .vem-page-manage-performance-grades, .vem-page-manage-company-roles,
.vem-page-my-performance-reviews, .vem-page-approve-performance-reviews
) .hint { font-size: 12px; color: var(--muted); margin-top: 5px; }
:is(
.vem-page-manage-performance-cycles, .vem-page-manage-performance-grades, .vem-page-manage-company-roles,
.vem-page-my-performance-reviews, .vem-page-approve-performance-reviews
) .btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 40px;
padding: 7.5px 15px;
border: 1px solid transparent;
border-radius: var(--radius-md, 8px);
cursor: pointer;
font-family: inherit;
font-size: 12px;
font-weight: 750;
letter-spacing: 0.01em;
line-height: 1.2;
transition: transform var(--transition-fast, 150ms ease), box-shadow var(--transition-fast, 150ms ease);
}
:is(
.vem-page-manage-performance-cycles, .vem-page-manage-performance-grades, .vem-page-manage-company-roles,
.vem-page-my-performance-reviews, .vem-page-approve-performance-reviews
) .btn:active { transform: translateY(1px); }
:is(
.vem-page-manage-performance-cycles, .vem-page-manage-performance-grades, .vem-page-manage-company-roles,
.vem-page-my-performance-reviews, .vem-page-approve-performance-reviews,
.vem-enterprise-dashboard
) .project-checks {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 5px 11.5px;
max-height: 200px;
overflow-y: auto;
padding: 10px;
margin-top: 5px;
border: 1px solid var(--line);
border-radius: var(--radius-md, 8px);
}
:is(
.vem-page-manage-performance-cycles, .vem-page-manage-performance-grades, .vem-page-manage-company-roles,
.vem-page-my-performance-reviews, .vem-page-approve-performance-reviews,
.vem-enterprise-dashboard
) .checkbox-row {
display: flex;
align-items: center;
gap: 6.5px;
padding: 3.5px 0;
font-size: 12px;
font-weight: 500;
text-transform: none;
letter-spacing: normal;
cursor: pointer;
}
:is(
.vem-page-manage-performance-cycles, .vem-page-manage-performance-grades, .vem-page-manage-company-roles,
.vem-page-my-performance-reviews, .vem-page-approve-performance-reviews,
.vem-enterprise-dashboard
) .checkbox-row input[type="checkbox"] { width: 16px; height: 16px; flex: 0 0 auto; }
/* Favourites picker modal — .field/.hint aren't part of the shared
performance-management group above since this page never needed a form
field layout before now. */
body.vem-enterprise-dashboard .field { display: grid; gap: 6px; margin-bottom: 16px; }
body.vem-enterprise-dashboard .field.wide { grid-column: 1 / -1; }
body.vem-enterprise-dashboard .field > label {
margin: 0;
color: var(--muted, #61738b);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
body.vem-enterprise-dashboard .hint { font-size: 11px; color: var(--muted, #61738b); }
body.vem-enterprise-dashboard .favorites-toolbar { margin: 4px 0 20px; }
@media (max-width: 980px) {
:is(
.vem-page-manage-performance-cycles, .vem-page-manage-performance-grades, .vem-page-manage-company-roles,
.vem-page-my-performance-reviews, .vem-page-approve-performance-reviews
) .main-content { margin-left: 72px; }
}
@media (max-width: 600px) {
:is(
.vem-page-manage-performance-cycles, .vem-page-manage-performance-grades, .vem-page-manage-company-roles,
.vem-page-my-performance-reviews, .vem-page-approve-performance-reviews
) .main-content { margin-left: 0; padding: 15px 11.5px; }
}
/* Hiring Management ------------------------------------------------------
manage_hiring_candidates.php + interview_feedback.php share the same
sidebar/top-nav app shell as the Performance Management pages, so this
block reuses that group's exact layout values rather than re-deriving
them — same reasoning as before: neither page had any page-scoped rule
of its own, so without this they'd render unstyled. */
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .main-content {
margin-left: 270px;
padding: 28px 31px 37.5px;
box-sizing: border-box;
}
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .top-bar {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16.5px;
margin-bottom: 19.5px;
flex-wrap: wrap;
}
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .page-title { margin: 0; font-size: 23px; font-weight: 760; }
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .page-subtitle { max-width: 720px; margin: 6.5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .panel {
margin-bottom: 16.5px;
padding: 19.5px;
border: 1px solid var(--line);
border-radius: var(--radius-lg, 13px);
background: var(--panel-solid, var(--panel));
box-shadow: var(--shadow-sm);
}
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .panel-header {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 15px;
}
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .panel-header h2 { margin: 0; font-size: 15.5px; font-weight: 760; }
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .table-wrap { overflow-x: auto; }
:is(.vem-page-hiring-management, .vem-page-interview-feedback) table { width: 100%; border-collapse: collapse; }
:is(.vem-page-hiring-management, .vem-page-interview-feedback) :is(th, td) { padding: 10px 11.5px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
:is(.vem-page-hiring-management, .vem-page-interview-feedback) th { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .row-actions { display: flex; gap: 6.5px; flex-wrap: wrap; align-items: center; }
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .inline-form { display: inline-block; margin: 0; }
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .field { display: grid; gap: 5px; margin-bottom: 13px; }
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .field label {
margin: 0;
color: var(--muted);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .field-full { grid-column: 1 / -1; }
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .filters {
display: flex;
flex-wrap: wrap;
align-items: end;
gap: 11.5px;
margin-bottom: 15px;
padding: 13px 15px;
border: 1px solid var(--line);
border-radius: var(--radius-md, 8px);
background: var(--panel-soft, rgba(85,111,145,0.05));
}
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .filters > div { display: grid; gap: 5px; min-width: 180px; }
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .filters label {
color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .filters input[type="text"],
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .filters input[type="date"],
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .filters select {
width: 100%; box-sizing: border-box; min-height: 40px; padding: 7.5px 10px;
border: 1px solid var(--line); border-radius: var(--radius-md, 6.5px);
background: var(--panel, #fff); color: var(--ink); font: inherit; font-size: 12px;
}
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .pager-row { display: flex; justify-content: center; margin-top: 15px; }
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .empty-state {
padding: 33px 16.5px;
text-align: center;
color: var(--muted);
border: 1px dashed var(--line);
border-radius: var(--radius-md, 8px);
}
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .alert { margin-bottom: 15px; padding: 11.5px 15px; border-radius: var(--radius-md, 8px); font-size: 12px; font-weight: 650; border: 1px solid transparent; }
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .alert-error { background: var(--danger-bg, rgba(185,28,28,0.08)); color: var(--danger-text, #b91c1c); border-color: rgba(185,28,28,0.25); }
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .alert-success { background: var(--success-bg, rgba(22,132,91,0.08)); color: var(--success-text, #16845b); border-color: rgba(22,132,91,0.25); }
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .hint { font-size: 12px; color: var(--muted); margin-top: 5px; }
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 40px;
padding: 7.5px 15px;
border: 1px solid transparent;
border-radius: var(--radius-md, 8px);
cursor: pointer;
font-family: inherit;
font-size: 12px;
font-weight: 750;
letter-spacing: 0.01em;
line-height: 1.2;
transition: transform var(--transition-fast, 150ms ease), box-shadow var(--transition-fast, 150ms ease);
}
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .btn:active { transform: translateY(1px); }
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .btn-primary {
color: #fff;
background: linear-gradient(135deg, var(--brand), var(--brand-deep));
box-shadow: var(--shadow-xs), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .btn-primary:hover {
background: linear-gradient(135deg, var(--brand-deep), #0f4eb5);
transform: translateY(-2px);
}
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .btn-muted {
background: rgba(255, 255, 255, 0.72);
color: var(--ink-light);
border-color: var(--line);
}
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .btn-muted:hover {
background: rgba(255, 255, 255, 0.9);
transform: translateY(-2px);
border-color: var(--brand);
}
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .btn-edit {
background: linear-gradient(135deg, rgba(31, 111, 235, 0.12), rgba(31, 111, 235, 0.06));
color: var(--brand);
border-color: rgba(31, 111, 235, 0.28);
}
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .btn-edit:hover {
background: linear-gradient(135deg, rgba(31, 111, 235, 0.2), rgba(31, 111, 235, 0.12));
transform: translateY(-2px);
border-color: var(--brand);
}
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .btn-delete {
background: linear-gradient(135deg, rgba(185, 28, 28, 0.12), rgba(185, 28, 28, 0.06));
color: var(--danger-text);
border-color: rgba(185, 28, 28, 0.28);
}
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .btn-delete:hover {
background: linear-gradient(135deg, rgba(185, 28, 28, 0.2), rgba(185, 28, 28, 0.12));
transform: translateY(-2px);
border-color: var(--danger);
}
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .checkbox-row-group {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 5px 11.5px;
max-height: 220px;
overflow-y: auto;
padding: 10px;
margin-top: 5px;
border: 1px solid var(--line);
border-radius: var(--radius-md, 8px);
}
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .checkbox-row {
display: flex;
align-items: center;
gap: 6.5px;
padding: 3.5px 0;
font-size: 12px;
font-weight: 500;
cursor: pointer;
}
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .checkbox-row input {
width: 16px;
height: 16px;
min-width: 16px;
min-height: 16px;
max-width: 16px;
max-height: 16px;
flex: 0 0 auto;
}
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .role-badge,
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .status-badge {
display: inline-flex;
align-items: center;
padding: 4px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.02em;
border: 1px solid transparent;
white-space: nowrap;
}
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .role-admin { background: linear-gradient(135deg, rgba(31,111,235,0.12), rgba(31,111,235,0.06)); color: var(--brand); border-color: rgba(31,111,235,0.28); }
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .role-approver { background: linear-gradient(135deg, rgba(22,132,91,0.12), rgba(22,132,91,0.06)); color: var(--success-text); border-color: rgba(22,132,91,0.28); }
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .role-user { background: var(--panel, rgba(255,255,255,0.72)); color: var(--ink-light); border-color: var(--line); }
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .status-active { background: linear-gradient(135deg, rgba(22,132,91,0.12), rgba(22,132,91,0.06)); color: var(--success-text); border-color: rgba(22,132,91,0.28); }
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .status-inactive { background: linear-gradient(135deg, rgba(100,116,139,0.14), rgba(100,116,139,0.06)); color: #475569; border-color: rgba(100,116,139,0.28); }
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .status-archived { background: rgba(100,116,139,0.16); color: #475569; border-color: rgba(100,116,139,0.32); }
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .dashboard-section-nav {
display: flex;
align-items: center;
gap: 7.5px;
margin: 0 0 16.5px;
padding: 7.5px;
overflow-x: auto;
border: 1px solid var(--line);
border-radius: 12.5px;
background: var(--panel-soft, rgba(85,111,145,0.06));
}
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .dashboard-section-nav a {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 38px;
padding: 6.5px 11.5px;
color: var(--ink-light, var(--muted));
border: 1px solid transparent;
border-radius: 8px;
font-size: 12px;
font-weight: 700;
text-decoration: none;
white-space: nowrap;
}
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .dashboard-section-nav a.active {
color: #fff;
background: var(--brand);
border-color: var(--brand);
}
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .field-grid-readonly {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 11.5px 19.5px;
margin-bottom: 13px;
}
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .field-grid-readonly label {
display: block;
margin: 0 0 3.5px;
color: var(--muted);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .round-block {
display: grid;
gap: 10px;
padding: 16.5px 18px;
margin-bottom: 13px;
border: 1px solid var(--line);
border-radius: var(--radius-md, 10px);
background: var(--panel-soft, rgba(85,111,145,0.04));
}
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .round-block-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .round-block > .btn { justify-self: start; margin-top: 3.5px; }
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .feedback-list { margin-top: 10px; display: grid; gap: 8px; }
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .feedback-item {
padding: 10px 11.5px;
margin-top: 8px;
border-radius: var(--radius-md, 8px);
border-left: 3px solid var(--line);
background: var(--panel-solid, var(--panel));
font-size: 12px;
}
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .feedback-item p { margin: 5px 0 0; line-height: 1.6; color: var(--ink-light, var(--ink)); }
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .feedback-pass { border-left-color: var(--success-text, #16845b); }
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .feedback-reject { border-left-color: var(--danger-text, #b91c1c); }
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .feedback-hold { border-left-color: #b98900; }
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .modal.modal-wide { width: min(760px, 100%); }
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .modal-body {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 15px;
padding: 16.5px 18px;
}
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .modal-body input,
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .modal-body select,
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .modal-body textarea {
width: 100%;
box-sizing: border-box;
min-height: 38px;
padding: 6.5px 10px;
border: 1px solid var(--line);
border-radius: var(--radius-md, 6.5px);
font-family: inherit;
font-size: 12px;
}
/* Deliberately NOT setting background/color/appearance here, even though
every other control on this page does — manage_users.php's own
equivalent rule (body.vem-page-manage-users .modal-body select)
doesn't either, leaving background/color and native appearance
entirely to the active theme's own global !important select rule.
That's the proven-working pattern on a page with an identical Target
Role-style select; setting our own background/color here — even
without !important — was the actual bug reported (unreadable in
Enterprise and Midnight Aurora). Matched byte-for-byte instead of
trying to out-clever a rule that already works elsewhere. */
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .modal-body .field-full { grid-column: 1 / -1; }
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .modal-footer {
position: sticky;
bottom: 0;
background: var(--panel-solid, var(--panel));
z-index: 1;
}
@media (max-width: 640px) {
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .modal-body { grid-template-columns: 1fr; }
}
:is(.vem-page-hiring-management, .vem-page-interview-feedback) #roundsContainer { display: grid; gap: 13px; }
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .round-editor-block {
padding: 15px 16.5px;
border: 1px solid var(--line);
border-radius: var(--radius-md, 8px);
display: grid;
gap: 11.5px;
}
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .round-editor-header {
display: flex;
justify-content: space-between;
align-items: center;
}
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .round-editor-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 15px;
}
@media (max-width: 640px) {
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .round-editor-grid { grid-template-columns: 1fr; }
}
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .interviewer-picker { position: relative; }
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .interviewer-picker-toggle {
width: 100%;
box-sizing: border-box;
display: flex;
align-items: center;
min-height: 40px;
padding: 7.5px 11.5px;
border: 1px solid var(--line);
border-radius: var(--radius-md, 6.5px);
background: var(--panel, #fff);
color: var(--ink);
font-size: 12px;
font-family: inherit;
text-align: left;
cursor: pointer;
}
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .interviewer-picker-toggle:hover { border-color: var(--brand); }
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .interviewer-picker-toggle:disabled { cursor: not-allowed; opacity: 0.6; }
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .interviewer-picker-panel {
position: absolute;
top: calc(100% + 6px);
left: 0;
right: 0;
z-index: 20;
padding: 8px;
border: 1px solid var(--line);
border-radius: var(--radius-md, 8px);
background: var(--panel-solid, #fff);
box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28);
}
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .interviewer-picker-search {
width: 100%;
box-sizing: border-box;
min-height: 36px;
padding: 5.5px 8px;
margin-bottom: 6.5px;
border: 1px solid var(--line);
border-radius: var(--radius-md, 6.5px);
font-size: 12px;
font-family: inherit;
background: var(--panel, #fff);
color: var(--ink);
}
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .interviewer-picker-list {
display: grid;
grid-template-columns: 1fr;
gap: 2px;
max-height: 220px;
overflow-y: auto;
padding: 0;
margin: 0;
border: 0;
}
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .interviewer-picker-list .checkbox-row { padding: 5px 6.5px; border-radius: var(--radius-md, 5px); }
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .interviewer-picker-list .checkbox-row:hover { background: var(--panel-soft, rgba(85,111,145,0.06)); }
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .interviewer-picker-empty { margin: 5px 6.5px; }
/* Searchable single-select combobox — same trigger/panel/search/list shape
as .interviewer-picker above, but the panel is position:fixed and
reparented to
on open (see the JS), not position:absolute, so it
escapes the onboarding modal's own clipping instead of being cut off at
the modal's bottom edge like a plain or an absolutely
positioned panel would be. */
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .approver-combobox { position: relative; }
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .approver-combobox-trigger {
width: 100%;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
gap: 6.5px;
min-height: 40px;
padding: 7.5px 11.5px;
border: 1px solid var(--line);
border-radius: var(--radius-md, 6.5px);
background: var(--panel, #fff);
color: var(--ink);
font-size: 12px;
font-family: inherit;
text-align: left;
cursor: pointer;
}
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .approver-combobox-trigger.is-placeholder { color: var(--muted); }
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .approver-combobox-trigger::after {
content: "";
width: 7px;
height: 7px;
flex-shrink: 0;
border-right: 2px solid var(--ink);
border-bottom: 2px solid var(--ink);
transform: translateY(-25%) rotate(45deg);
}
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .approver-combobox-trigger:hover { border-color: var(--brand); }
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .approver-combobox-panel {
position: fixed;
z-index: 9999;
width: 280px;
max-width: min(280px, calc(100vw - 32px));
padding: 8px;
border: 1px solid var(--line);
border-radius: var(--radius-md, 8px);
background: var(--panel-solid, #fff);
box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28);
}
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .approver-combobox-panel[hidden] { display: none; }
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .approver-combobox-search {
width: 100%;
box-sizing: border-box;
min-height: 36px;
padding: 5.5px 8px;
margin-bottom: 6.5px;
border: 1px solid var(--line);
border-radius: var(--radius-md, 6.5px);
font-size: 12px;
font-family: inherit;
background: var(--panel, #fff);
color: var(--ink);
}
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .approver-combobox-list {
display: grid;
gap: 2px;
max-height: 220px;
overflow-y: auto;
}
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .approver-combobox-option {
width: 100%;
border: 0;
border-radius: var(--radius-md, 5px);
background: transparent;
padding: 6.5px 7.5px;
color: var(--ink);
font-size: 12px;
text-align: left;
cursor: pointer;
}
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .approver-combobox-option:hover,
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .approver-combobox-option:focus {
background: var(--panel-soft, rgba(85,111,145,0.06));
outline: none;
}
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .approver-combobox-empty { margin: 5px 6.5px; }
@media (max-width: 980px) {
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .main-content { margin-left: 72px; }
}
@media (max-width: 600px) {
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .main-content { margin-left: 0; padding: 15px 11.5px; }
:is(.vem-page-hiring-management, .vem-page-interview-feedback) .checkbox-row-group { grid-template-columns: 1fr; }
}
/* Candidate portal (candidate_login.php / candidate_dashboard.php) ------
candidate_login.php now reuses login.php's own vem-auth-page /
login-shell markup verbatim (see that page) rather than a bespoke
layout — candidates don't have a company identity yet pre-auth.
candidate_dashboard.php DOES know the candidate's company by this
point, so it's built on the vem-* design system (.vem-page/.vem-card/
.vem-panel/.vem-alert, same tokens as the rest of the app's newer
pages) with a company-branded header (logo + name) layered on top. */
/* Candidates never pick a workspace theme the way internal employees do —
this page always renders under data-vem-theme="enterprise" regardless.
Staff pages get the flagship "Enterprise" deep-navy/gold-border look
(dark card gradients, shiny gold borders, glow shadow) from a separate
file, assets/css/themes/vem-theme-enterprise.css, loaded dynamically by
top_nav.php based on the logged-in user's plan/theme choice. Candidates
never go through top_nav.php, so this page loads that same stylesheet
directly and unconditionally in its own (see candidate_dashboard.php)
to match that exact look rather than falling back to this file's own
weaker built-in "enterprise" preset. The --vem-card-grad / --vem-card-border
/ --vem-card-glow tokens used below come from that file. */
body.vem-page-candidate-dashboard {
background: var(--vem-canvas);
/* Tighter local spacing scale. The shared --vem-space-* scale is tuned
for spacious internal admin pages; a single-purpose external
candidate page reads calmer AND fits more content per screen with a
denser rhythm. Scoped to this page's , so every var(--vem-
space-N) consumer already on this page (header, alerts, panels,
cards, button clusters, the decline form) picks this up for free via
normal CSS custom-property cascade — nothing elsewhere in the app is
affected, and no other rule below needs touching by hand. */
--vem-space-3: 0.625rem;
--vem-space-4: 0.875rem;
--vem-space-5: 1.125rem;
--vem-space-6: 1.25rem;
--vem-space-8: 1.75rem;
}
/* Gold + glow is the theme's signature, but it only reads as "enterprise"
rather than "loud" when it's a restrained accent, not a neon outline —
and only on the top-level surfaces (the section panel), not on every
nested element inside it too. Round cards sit one level down (inside an
already gold-bordered panel), so they get a calm, low-contrast border
instead of a second gold outline + glow; stacking two glowing gold boxes
inside each other is exactly the "too loud" effect being corrected here.
The header is chrome (a sticky top bar, styled separately below), not a
content card, so it's excluded from this treatment entirely. The glow
itself is also toned down from the staff-page original — half the blur,
roughly half the opacity — since a floating admin card and a plain
external candidate page don't call for the same amount of shine. */
.vem-page-candidate-dashboard .vem-panel {
background: var(--vem-card-grad);
border-color: color-mix(in srgb, var(--vem-card-border) 70%, var(--vem-border));
box-shadow: var(--vem-shadow-md), 0 0 0 1px rgba(232, 196, 53, 0.22), 0 0 10px rgba(232, 196, 53, 0.1);
}
/* --vem-surface-hover is only redefined by the theme-specific token blocks
in THIS file (vem-design-system.css), not by the dynamically loaded
assets/css/themes/vem-theme-enterprise.css that actually drives this
page's colours (see the comment above) — so anything using it here was
silently falling back to this file's own weaker "enterprise" preset, a
pale near-white value (the light card with near-invisible light-on-light
text). --vem-surface-raised / --vem-surface-strong ARE tokens the theme
file redefines, so they resolve to the intended dark navy shades. */
.vem-page-candidate-dashboard .vem-btn:hover:not(:disabled) {
background: var(--vem-surface-strong);
}
.vem-page-candidate-dashboard .vem-card {
background: var(--vem-surface-raised);
border-color: var(--vem-border);
border-radius: var(--vem-radius-card);
padding: var(--vem-space-5) var(--vem-space-6);
}
.cand-shell { width: min(100%, 1120px); padding-top: var(--vem-space-6); padding-bottom: var(--vem-space-8); }
/* A card floating in the middle of the page (the earlier version) reads as
a widget, not a page — a real header is a full-bleed bar pinned to the
viewport's top edge, edge to edge, with its content merely constrained
and centered to line up with the page body below it. Sticky so it stays
in view as the candidate scrolls past a long interview history. */
.cand-header {
position: sticky;
top: 0;
z-index: 10;
width: 100%;
/* Same family as the card gradient, but flatter/darker — a header bar
reads as chrome, not as "another card", so it shouldn't compete with
the actual content panels below it for visual weight. */
background: var(--vem-canvas-alt, var(--vem-surface));
border-bottom: 1px solid color-mix(in srgb, var(--vem-card-border) 70%, var(--vem-border));
box-shadow: var(--vem-shadow-sm);
}
.cand-header-inner {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--vem-space-5);
flex-wrap: wrap;
width: min(100%, 1120px);
margin-inline: auto;
padding: var(--vem-space-3) var(--vem-space-8);
}
.cand-header-brand { display: flex; align-items: center; gap: var(--vem-space-4); }
.cand-company-logo {
width: 48px;
height: 48px;
flex: 0 0 auto;
object-fit: contain;
border-radius: var(--vem-radius-control);
/* Company logos are typically designed for a light backdrop; a flat
white chip keeps them legible regardless of the card behind them. */
background: #ffffff;
border: 1px solid var(--vem-card-border);
box-shadow: var(--vem-shadow-sm);
}
.cand-company-logo--text {
display: grid;
place-items: center;
color: var(--vem-brand-contrast);
font-size: 19px;
font-weight: var(--vem-weight-bold);
background: linear-gradient(145deg, var(--vem-brand-hover), var(--vem-brand));
}
.cand-company-name {
display: flex;
align-items: center;
gap: 7px;
margin: 0 0 2px;
color: var(--vem-text-muted);
font-size: var(--vem-font-size-xs);
font-weight: var(--vem-weight-bold);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.cand-company-name::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--vem-brand);
}
.cand-welcome { margin: 0; color: var(--vem-text); font-size: var(--vem-font-size-xl); font-weight: var(--vem-weight-bold); line-height: 1.25; letter-spacing: -0.01em; }
.cand-candidate-id {
display: inline-flex;
margin: 4px 0 0;
padding: 2px 9px;
border-radius: var(--vem-radius-pill);
background: var(--vem-surface-subtle);
font-size: var(--vem-font-size-xs);
font-weight: var(--vem-weight-bold);
letter-spacing: 0.02em;
}
.cand-cycle-panel {
margin-bottom: var(--vem-space-6);
}
/* Round cards are the list content inside the panel, not a second
headline surface — a plain vertical rhythm (no per-card hover glow)
reads calmer and keeps the eye on the gold panel edge as the one
defining outline per section. */
.cand-cycle-panel .vem-stack { gap: var(--vem-space-5); }
.cand-panel-header { display: flex; justify-content: space-between; align-items: center; gap: var(--vem-space-3); flex-wrap: wrap; margin-bottom: var(--vem-space-5); padding-bottom: var(--vem-space-4); border-bottom: 1px solid var(--vem-border); }
.cand-panel-title { margin: 0; font-size: var(--vem-font-size-lg); font-weight: var(--vem-weight-bold); letter-spacing: -0.005em; }
.cand-round-card {
display: grid;
gap: var(--vem-space-4);
}
.cand-round-header { display: flex; align-items: flex-start; gap: var(--vem-space-4); }
.cand-round-number {
display: grid;
flex: 0 0 auto;
width: 34px;
height: 34px;
place-items: center;
border-radius: 50%;
background: var(--vem-surface-subtle);
color: var(--vem-text-muted);
font-size: 13px;
font-weight: var(--vem-weight-bold);
}
.cand-round-header--passed .cand-round-number { background: var(--vem-success-soft); color: var(--vem-success); }
.cand-round-header--rejected .cand-round-number { background: var(--vem-danger-soft); color: var(--vem-danger); }
.cand-round-title { flex: 1 1 auto; min-width: 0; }
.cand-round-title strong { display: block; font-size: var(--vem-font-size-md); }
.cand-round-schedule { margin: 3px 0 0; font-size: var(--vem-font-size-sm); }
.cand-pill {
display: inline-flex;
align-items: center;
padding: 5px 14px;
border: 1px solid transparent;
border-radius: var(--vem-radius-pill);
font-size: var(--vem-font-size-xs);
font-weight: var(--vem-weight-bold);
white-space: nowrap;
}
.cand-pill--active { color: var(--vem-success); background: var(--vem-success-soft); border-color: color-mix(in srgb, var(--vem-success) 30%, transparent); }
.cand-pill--muted { color: var(--vem-text-muted); background: var(--vem-surface-subtle); border-color: var(--vem-border); }
.cand-pill--neutral { color: var(--vem-info); background: var(--vem-info-soft); border-color: color-mix(in srgb, var(--vem-info) 30%, transparent); }
.cand-feedback { margin: 0; align-items: center; border-left-width: 3px; background: var(--vem-surface-subtle); }
.cand-feedback p { margin: 4px 0 0; line-height: 1.6; }
.cand-feedback strong { font-size: var(--vem-font-size-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--vem-text-muted); }
.cand-feedback--pass { border-left-color: var(--vem-success); background: color-mix(in srgb, var(--vem-success) 10%, transparent); }
.cand-feedback--pass strong { color: var(--vem-success); }
.cand-feedback--reject { border-left-color: var(--vem-danger); background: color-mix(in srgb, var(--vem-danger) 10%, transparent); }
.cand-feedback--reject strong { color: var(--vem-danger); }
.cand-feedback--hold { border-left-color: var(--vem-warning); background: color-mix(in srgb, var(--vem-warning) 10%, transparent); }
.cand-feedback--hold strong { color: var(--vem-warning); }
/* Left-accent treatment for the page-level status banners (offer/
rejection/completion notices, document-on-file notice) — the only
.vem-alert instances on this page, so scoping to the page class keeps
every other page's plain alert styling untouched. A thin accent line
reads calmer here than a filled icon badge, and the margin gives
consecutive banners (e.g. "rounds complete" + "document on file")
breathing room instead of touching edge-to-edge. */
.vem-page-candidate-dashboard .vem-alert {
align-items: center;
margin-bottom: var(--vem-space-4);
border-left-width: 3px;
box-shadow: none;
}
.vem-page-candidate-dashboard .vem-alert:last-of-type {
margin-bottom: var(--vem-space-6);
}
@media (max-width: 600px) {
.cand-header-inner { flex-direction: column; align-items: stretch; }
}
/* Company Shift Roster --------------------------------------------------- */
.vem-page-company-shift-roster .main-content { width: auto; max-width: none; min-height: 100vh; margin-left: 290px; padding: 21.5px 19px; overflow-x: hidden; box-sizing: border-box; }
.vem-page-company-shift-roster .page-profile-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.vem-page-company-shift-roster .title { margin: 0; color: #172238; font-size: 23px; }
.vem-page-company-shift-roster .subtitle { margin: 4.5px 0 16px; color: #687b99; }
.vem-page-company-shift-roster .success { margin-bottom: 10.5px; padding: 8.5px 10px; border: 1px solid #8fd5b8; border-radius: 8.5px; background: #e8f8f0; color: #137a50; font-weight: 800; }
.vem-page-company-shift-roster .panel { width: 100%; max-width: 100%; padding: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,.82); border-radius: 15.5px; background: rgba(255,255,255,.25); box-shadow: 0 18px 44px rgba(49,53,140,.1); box-sizing: border-box; }
body.vem-page-company-shift-roster .panel.roster-filter-panel {
position: relative;
width: 100%;
max-width: 100%;
padding: 16px !important;
overflow: hidden;
border: 1px solid rgba(175, 192, 214, 0.9);
border-radius: 15px !important;
background: #dce5ef;
box-shadow: 0 12px 30px rgba(3, 12, 27, 0.16);
box-sizing: border-box;
}
.vem-page-company-shift-roster .filters { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1.2fr) auto; gap: 10.5px; align-items: end; margin: 0 0 15px; }
html body.vem-page-company-shift-roster .roster-filter-panel > form.filters {
width: 100%;
max-width: 100%;
margin: 0 0 16px !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
backdrop-filter: none !important;
box-sizing: border-box;
}
.vem-page-company-shift-roster .field { display: flex; min-width: 0; flex-direction: column; gap: 4.5px; }
.vem-page-company-shift-roster .field label { color: #526783; font-size: 12px; font-weight: 850; text-transform: uppercase; }
.vem-page-company-shift-roster .control { width: 100%; min-width: 0; min-height: 44px; padding: 6px 8px; border: 1px solid #ccd6e8; border-radius: 8.5px; background: #fff; box-sizing: border-box; }
.vem-page-company-shift-roster .btn { min-height: 44px; padding: 6px 10.5px; border: 0; border-radius: 8.5px; background: linear-gradient(135deg,#287fee,#1557c7); color: #fff; font-weight: 800; }
.vem-page-company-shift-roster .table-wrap { width: 100%; max-width: 100%; overflow-x: auto; border: 1px solid rgba(255,255,255,.85); border-radius: 12.5px; background: rgba(255,255,255,.58); box-sizing: border-box; }
.vem-page-company-shift-roster table { width: 100%; min-width: 980px; border-collapse: collapse; table-layout: fixed; }
.vem-page-company-shift-roster th,
.vem-page-company-shift-roster td { padding: 7.5px 5.5px; border-top: 1px solid rgba(104,125,166,.18); text-align: left; vertical-align: top; }
.vem-page-company-shift-roster th { border-top: 0; background: rgba(247,250,255,.9); color: #526783; font-size: 11px; text-transform: uppercase; }
.vem-page-company-shift-roster .employee { width: 16%; }
.vem-page-company-shift-roster .username { color: #172238; font-weight: 850; }
.vem-page-company-shift-roster .email { margin-top: 3px; color: #71819b; font-size: 11px; }
.vem-page-company-shift-roster .shift-chip { display: inline-flex; padding: 3.5px 5.5px; border-radius: 6px; background: #f4f7fc; color: #233650; font-weight: 900; }
.vem-page-company-shift-roster .project { margin-top: 3.5px; overflow: hidden; color: #6a7b96; font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }
.vem-page-company-shift-roster .override-link { display: inline-flex; margin-top: 4.5px; padding: 3px 4.5px; border: 1px solid rgba(29,100,202,.22); border-radius: 5.5px; background: #eef5ff; color: #185fc4; font-size: 10px; font-weight: 850; text-decoration: none; }
.vem-page-company-shift-roster .empty { padding: 23.5px; color: #687b99; text-align: center; }
@media (max-width: 1100px) {
.vem-page-company-shift-roster .main-content { margin-left: 72px; padding: 16px; }
.vem-page-company-shift-roster .filters { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 650px) {
.vem-page-company-shift-roster .main-content { margin-left: 0; padding: 10.5px 8px; }
.vem-page-company-shift-roster .page-profile-header { flex-direction: column; }
.vem-page-company-shift-roster .filters { grid-template-columns: 1fr; }
.vem-page-company-shift-roster .title { font-size: 19px; }
body.vem-page-company-shift-roster .panel.roster-filter-panel { padding: 10.5px !important; border-radius: 10.5px !important; }
}
/* Shared enterprise select control -------------------------------------- */
.vem-select-control {
padding-right: 40px;
}
/* Leave Settings --------------------------------------------------------- */
/* Token overrides removed — same theme-shadowing issue as Apply Leave above. */
.vem-page-leave-settings .main-content { width: auto; max-width: none; min-height: 100vh; margin-left: 290px; padding: 21.5px 19px; overflow-x: hidden; box-sizing: border-box; }
.vem-page-leave-settings .page-profile-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; padding-bottom: 12.5px; }
.vem-page-leave-settings .title { margin: 0; color: var(--ink); font-size: 21.5px; font-weight: 700; letter-spacing: -0.02em; }
.vem-page-leave-settings .subtitle { margin: 4.5px 0 0; color: var(--muted); }
.vem-page-leave-settings .grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12.5px; align-items: start; }
.vem-page-leave-settings .grid > .panel:nth-child(-n+2) { height: 100%; align-self: stretch; }
.vem-page-leave-settings .panel-stack { display: grid; min-width: 0; gap: 12.5px; align-self: start; }
.vem-page-leave-settings .panel { min-width: 0; padding: 15px; overflow: hidden; border: 1px solid var(--line-strong, rgba(175,192,214,.9)); border-radius: 15px; background: var(--panel, #dce5ef); box-sizing: border-box; }
.vem-page-leave-settings .panel-wide { grid-column: 1/-1; }
.vem-page-leave-settings .panel h2 { margin: 0 0 12.5px; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
.vem-page-leave-settings .form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8.5px; }
.vem-page-leave-settings .field { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.vem-page-leave-settings .field:has(> select.control) { position: relative; }
.vem-page-leave-settings .field:has(> select.control)::after {
content: "";
position: absolute;
right: 17px;
bottom: 18px;
width: 7px;
height: 7px;
border-right: 2px solid #31415c;
border-bottom: 2px solid #31415c;
transform: rotate(45deg);
transform-origin: center;
pointer-events: none;
}
.vem-page-leave-settings .field-wide { grid-column: 1/-1; }
.vem-page-leave-settings .field label { color: #526783; font-size: 11px; font-weight: 700; letter-spacing: 0.025em; text-transform: uppercase; }
.vem-page-leave-settings .control { width: 100%; min-width: 0; min-height: 44px; padding: 6px 7.5px; border: 1px solid var(--line, #ccd6e8); border-radius: 8px; background-color: var(--input-bg, var(--panel, #fff)); color: var(--ink); box-sizing: border-box; }
.vem-page-leave-settings select.control {
-webkit-appearance: none;
appearance: none;
padding-right: 28.5px;
background-color: var(--input-bg, var(--panel, #fff)) !important;
background-image: none !important;
color: var(--ink) !important;
}
.vem-page-leave-settings .check { display: flex; align-items: center; gap: 5.5px; padding-top: 7.5px; }
.vem-page-leave-settings .actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 10px; }
.vem-page-leave-settings .btn { min-height: 43px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel, #fff); color: var(--ink); font-weight: 700; cursor: pointer; }
.vem-page-leave-settings .btn-primary { border: 0; background: linear-gradient(135deg,#287fee,#1557c7); color: #fff; }
.vem-page-leave-settings .alert { margin-bottom: 10.5px; padding: 8.5px; border-radius: 8.5px; font-weight: 650; }
.vem-page-leave-settings .alert-error { border: 1px solid #efb7b7; background: #fff0f0; color: #a61d1d; }
.vem-page-leave-settings .alert-success { border: 1px solid #9ed8c2; background: #eaf8f2; color: #116547; }
.vem-page-leave-settings .type-list { display: grid; gap: 6px; max-height: 470px; overflow: auto; }
.vem-page-leave-settings .type-card { display: grid; grid-template-columns: 10px minmax(0,1fr) auto; gap: 6.5px; align-items: center; padding: 7.5px; border-radius: 8px; background: var(--panel-soft, #d3deea); color: var(--ink); }
.vem-page-leave-settings .type-card strong { font-weight: 650; }
.vem-page-leave-settings .swatch { width: 10px; height: 38px; border-radius: 4.5px; }
.vem-page-leave-settings .muted { color: var(--muted); font-size: 12px; }
.vem-page-leave-settings .pill { display: inline-flex; padding: 3.5px 5.5px; border-radius: 999px; background: #edf3fd; color: #315c96; font-size: 11px; font-weight: 650; text-decoration: none; }
.vem-page-leave-settings .template-nav { display: flex; gap: 5.5px; margin-bottom: 9.5px; }
.vem-page-leave-settings .template-nav .control { flex: 1 1 0; }
.vem-page-leave-settings .template-nav select.control {
-webkit-appearance: auto;
appearance: auto;
padding-right: 8px;
}
.vem-page-leave-settings .template-message-field { margin-top: 8px; }
.vem-page-leave-settings .hint { margin-top: 5.5px; color: var(--muted); font-size: 11px; }
@media (max-width: 1000px) {
.vem-page-leave-settings .main-content { margin-left: 72px; padding: 16px; }
.vem-page-leave-settings .grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
.vem-page-leave-settings .main-content { margin-left: 0; padding: 10.5px 8px; }
.vem-page-leave-settings .page-profile-header { flex-direction: column; }
.vem-page-leave-settings .form-grid { grid-template-columns: 1fr; }
.vem-page-leave-settings .field-wide,
.vem-page-leave-settings .panel-wide { grid-column: auto; }
}
/* Apply Leave ------------------------------------------------------------ */
/* Token overrides removed (were shadowing the active theme's --ink/--brand/
--line/--muted for this whole page, since custom properties cascade per-
element and this local declaration on blocked anything set on
:root[data-vem-theme="..."] from ever reaching it — including the header,
which is why it stayed a fixed grey/blue regardless of theme). The values
were near-duplicates of vem-theme.css's own base :root tokens anyway. */
.vem-page-apply-leave .main-content { width: auto; max-width: none; min-height: 100vh; margin-left: 290px; padding: 21.5px 19px; overflow-x: hidden; box-sizing: border-box; }
.vem-page-apply-leave .page-profile-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; padding-bottom: 12.5px; }
.vem-page-apply-leave .title { margin: 0; color: var(--ink); font-size: 21.5px; font-weight: 700; letter-spacing: -0.02em; }
.vem-page-apply-leave .subtitle { margin: 4.5px 0 0; color: var(--muted); }
.vem-page-apply-leave .balance-grid { display: grid; grid-template-columns: repeat(4,minmax(180px,1fr)); gap: 8.5px; margin-bottom: 13.5px; }
.vem-page-apply-leave .balance-card,
.vem-page-apply-leave .panel { min-width: 0; border: 1px solid var(--line-strong, rgba(175,192,214,.9)); border-radius: 13.5px; background: var(--panel, #dce5ef); color: var(--ink); box-sizing: border-box; }
.vem-page-apply-leave .balance-card { padding: 11.5px; border-top: 4px solid var(--color); }
.vem-page-apply-leave .balance-card h3 { margin: 0 0 7.5px; font-size: 12px; font-weight: 650; }
.vem-page-apply-leave .balance-value { color: #145dcc; font-size: 18px; font-weight: 750; }
.vem-page-apply-leave .balance-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 4.5px; margin-top: 6.5px; color: var(--muted); font-size: 11px; }
.vem-page-apply-leave .layout { display: grid; grid-template-columns: minmax(320px,.8fr) minmax(500px,1.2fr); gap: 12.5px; align-items: start; }
.vem-page-apply-leave .panel { padding: 14px; }
.vem-page-apply-leave .panel h2 { margin: 0 0 10px; font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
.vem-page-apply-leave .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vem-page-apply-leave .field { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.vem-page-apply-leave .field:has(> select.control) { position: relative; }
.vem-page-apply-leave .field:has(> select.control)::after { content: ""; position: absolute; right: 17px; bottom: 18px; width: 7px; height: 7px; border-right: 2px solid #31415c; border-bottom: 2px solid #31415c; transform: rotate(45deg); pointer-events: none; }
.vem-page-apply-leave .wide { grid-column: 1/-1; }
.vem-page-apply-leave .field label { color: #526783; font-size: 11px; font-weight: 700; letter-spacing: .025em; text-transform: uppercase; }
.vem-page-apply-leave .control { width: 100%; min-width: 0; min-height: 45px; padding: 6px 7.5px; border: 1px solid var(--line, #ccd6e8); border-radius: 8px; background-color: var(--input-bg, var(--panel, #fff)); color: var(--ink); box-sizing: border-box; }
.vem-page-apply-leave select.control { -webkit-appearance: none; appearance: none; padding-right: 28.5px; background-color: var(--input-bg, var(--panel, #fff)) !important; background-image: none !important; color: var(--ink) !important; }
.vem-page-apply-leave .btn { min-height: 43px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel, #fff); color: var(--ink); font-weight: 700; cursor: pointer; }
.vem-page-apply-leave .btn-primary { border: 0; background: linear-gradient(135deg,#287fee,#1557c7); color: #fff; }
.vem-page-apply-leave .btn-danger { border-color: #e9b3b3; color: #b32626; }
.vem-page-apply-leave .actions { display: flex; justify-content: flex-end; margin-top: 9.5px; }
.vem-page-apply-leave .alert { margin-bottom: 10px; padding: 8.5px; border-radius: 8.5px; font-weight: 650; }
.vem-page-apply-leave .error { border: 1px solid #efb7b7; background: #fff0f0; color: #a61d1d; }
.vem-page-apply-leave .success { border: 1px solid #9ed8c2; background: #eaf8f2; color: #116547; }
.vem-page-apply-leave .calendar-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8.5px; }
.vem-page-apply-leave .calendar-head h2 { margin: 0; }
.vem-page-apply-leave .calendar-nav { color: #175fc9; font-weight: 650; text-decoration: none; }
.vem-page-apply-leave .calendar { display: grid; grid-template-columns: repeat(7,1fr); overflow: hidden; border: 1px solid var(--line); border-radius: 10px; }
.vem-page-apply-leave .weekday,
.vem-page-apply-leave .day { min-width: 0; min-height: 42px; padding: 4.5px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); box-sizing: border-box; }
.vem-page-apply-leave .weekday { min-height: auto; background: #f5f8fd; color: #526783; font-size: 10px; font-weight: 700; text-align: center; }
.vem-page-apply-leave .day { min-height: 88px; background: rgba(255,255,255,.54); }
.vem-page-apply-leave .day.empty-day { background: rgba(238,242,250,.35); }
.vem-page-apply-leave .date-number { font-weight: 650; }
.vem-page-apply-leave .leave-person { display: none; margin-top: 3px; padding: 3px 3.5px; border-radius: 4.5px; background: #edf4ff; color: #285a98; font-size: 9px; }
.vem-page-apply-leave .day.has-leave { cursor: pointer; box-shadow: inset 0 -3px #5791df; }
.vem-page-apply-leave .day.has-leave:focus { outline: 2px solid #1769df; outline-offset: -2px; }
.vem-page-apply-leave .leave-count { display: block; margin-top: 8.5px; padding: 3.5px; border-radius: 5.5px; background: #edf4ff; color: #285a98; font-size: 10px; font-weight: 650; text-align: center; }
.vem-page-apply-leave .upcoming { display: grid; gap: 6px; }
.vem-page-apply-leave .request { padding: 7.5px; border: 1px solid var(--line); border-left: 4px solid var(--color); border-radius: 8px; background: rgba(255,255,255,.55); }
.vem-page-apply-leave .request-top { display: flex; justify-content: space-between; gap: 5.5px; }
.vem-page-apply-leave .status { padding: 3px 4.5px; border-radius: 999px; background: #fff3d7; color: #8a5b08; font-size: 10px; font-weight: 700; }
.vem-page-apply-leave .status.approved { background: #e8f8f0; color: #137a50; }
.vem-page-apply-leave .hint { margin-top: 4px; color: var(--muted); font-size: 11px; }
.vem-page-apply-leave .staged-attachment { display: flex; align-items: center; gap: 6.5px; margin-top: 5.5px; padding: 5.5px 8px; border: 1px solid var(--line, #C9D1D6); border-radius: 8px; background: var(--panel-soft, rgba(85, 111, 145, 0.06)); font-size: 12px; color: var(--ink); }
.vem-page-apply-leave .staged-attachment[hidden] { display: none; }
.vem-page-apply-leave .staged-attachment span { font-weight: 650; overflow-wrap: anywhere; }
.vem-page-apply-leave .staged-attachment .btn-danger { margin-left: auto; padding: 3px 6.5px; font-size: 11px; }
.vem-page-apply-leave .leave-dialog { width: min(460px,calc(100vw - 30px)); padding: 0; border: 1px solid #d3dded; border-radius: 12.5px; box-shadow: 0 24px 70px rgba(25,42,83,.3); }
.vem-page-apply-leave .leave-dialog::backdrop { background: rgba(23,34,56,.46); }
.vem-page-apply-leave .dialog-body { padding: 13.5px; }
.vem-page-apply-leave .dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.vem-page-apply-leave .dialog-list { display: grid; gap: 5.5px; margin-top: 10px; }
.vem-page-apply-leave .dialog-person { padding: 6.5px; border-radius: 7.5px; background: #edf4ff; color: #285a98; font-weight: 650; }
@media (max-width: 1200px) {
.vem-page-apply-leave .main-content { margin-left: 72px; }
.vem-page-apply-leave .balance-grid { grid-template-columns: repeat(2,1fr); }
.vem-page-apply-leave .layout { grid-template-columns: 1fr; }
}
@media (max-width: 650px) {
.vem-page-apply-leave .main-content { margin-left: 0; padding: 10.5px 8px; }
.vem-page-apply-leave .page-profile-header { flex-direction: column; }
.vem-page-apply-leave .balance-grid,
.vem-page-apply-leave .form-grid { grid-template-columns: 1fr; }
.vem-page-apply-leave .wide { grid-column: auto; }
.vem-page-apply-leave .day { min-height: 70px; padding: 3px; }
.vem-page-apply-leave .leave-person { overflow: hidden; text-overflow: ellipsis; }
}
/* Submit Expense --------------------------------------------------------- */
.vem-page-submit-expense { --info: #1f6feb; --info-bg: #e8f1ff; }
.vem-page-submit-expense .main-content { width: auto; max-width: none; min-height: 100vh; margin-left: 290px; padding: 26px 23px; overflow-x: hidden; box-sizing: border-box; }
.vem-page-submit-expense .top-bar { display: flex; align-items: flex-start; justify-content: space-between; gap: 16.5px; margin-bottom: 19.5px; padding-bottom: 15px; flex-wrap: wrap; }
.vem-page-submit-expense .page-title h1 { margin: 0; color: #172238; font-size: 26px; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; }
.vem-page-submit-expense .page-title p { max-width: 760px; margin: 6.5px 0 0; color: #687b99; font-size: 12px; font-weight: 400; line-height: 1.6; }
.vem-page-submit-expense .panel { position: relative; min-width: 0; margin-bottom: 15px; overflow: hidden; border: 1px solid rgba(175,192,214,.9); border-radius: 16.5px; background: #dce5ef; box-sizing: border-box; }
.vem-page-submit-expense .panel-header { padding: 16.5px 19.5px; border-bottom: 1px solid rgba(104,125,166,.22); background: rgba(255,255,255,.22); }
.vem-page-submit-expense .panel-header-with-actions { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.vem-page-submit-expense .expense-status-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.vem-page-submit-expense .panel-title { margin: 0; color: #172238; font-size: 16.5px; font-weight: 700; }
.vem-page-submit-expense .panel-subtitle { margin: 5px 0 0; color: #687b99; font-size: 12px; font-weight: 400; line-height: 1.5; }
.vem-page-submit-expense .panel-body { padding: 19.5px; }
.vem-page-submit-expense .week-selector { display: flex; align-items: flex-end; gap: 11.5px; margin-bottom: 16.5px; padding: 15px; flex-wrap: wrap; border: 1px solid #c4d1e1; border-radius: 13px; background: #d3deea; box-sizing: border-box; }
.vem-page-submit-expense .field-group { display: flex; min-width: 150px; flex: 1 1 180px; flex-direction: column; gap: 5px; }
.vem-page-submit-expense label { color: #526783; font-size: 11px; font-weight: 700; letter-spacing: .025em; text-transform: uppercase; }
.vem-page-submit-expense :is(input,select,textarea):not([type="checkbox"]):not([type="radio"]) { width: 100%; min-width: 0; min-height: 42px; padding: 7.5px 10px; border: 1px solid #bccadd; border-radius: 9px; background-color: #f5f8fc; color: #172238; font: inherit; font-size: 12px; outline: none; box-sizing: border-box; }
.vem-page-submit-expense :is(input,select,textarea):not([type="checkbox"]):not([type="radio"]):focus { border-color: #287fee; background-color: #fff; box-shadow: 0 0 0 3px rgba(40,127,238,.16); }
.vem-page-submit-expense textarea { min-height: 72px; resize: vertical; }
.vem-page-submit-expense .week-range { display: flex; min-height: 42px; align-items: center; color: #244f8d; font-size: 12px; font-weight: 650; }
.vem-page-submit-expense .week-status { display: inline-flex; align-items: center; padding: 5px 10px; border: 1px solid transparent; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.vem-page-submit-expense .week-status-approved { border-color: #9ed8c2; background: #eaf8f2; color: #116547; }
.vem-page-submit-expense .week-status-rejected,
.vem-page-submit-expense .week-status-correction { border-color: #efb7b7; background: #fff0f0; color: #a61d1d; }
.vem-page-submit-expense .week-status-draft { border-color: #c4d1e1; background: #f5f8fc; color: #526783; }
.vem-page-submit-expense .week-status-submitted { border-color: #a9c7ef; background: #e8f1ff; color: #175fc9; }
.vem-page-submit-expense .table-wrapper { max-width: 100%; overflow-x: auto; border: 1px solid #c4d1e1; border-radius: 11.5px; background: #eef3f8; }
.vem-page-submit-expense .expense-table { width: 100%; min-width: 1120px; border-collapse: separate; border-spacing: 0; background: #eef3f8; font-size: 12px; }
.vem-page-submit-expense .expense-table th { padding: 10px; border-bottom: 1px solid #c4d1e1; background: #d3deea; color: #526783; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-align: left; text-transform: uppercase; }
.vem-page-submit-expense .expense-table td { padding: 10px; border-bottom: 1px solid #d3ddea; background: #e8eef5; vertical-align: top; }
.vem-page-submit-expense .expense-table tr:hover td { background: #edf3f8; }
.vem-page-submit-expense :is(.project-select,.task-select) { min-width: 150px; }
.vem-page-submit-expense .amount-input { min-width: 120px; text-align: right; }
.vem-page-submit-expense .currency-select { min-width: 100px; }
.vem-page-submit-expense .description-input,
.vem-page-submit-expense .invoice-input { min-width: 190px; }
.vem-page-submit-expense .invoice-link { display: inline-flex; width: auto; min-height: 34px; align-items: center; justify-content: center; margin-top: 6.5px; padding: 5px 8px; border: 1px solid #a9c7ef; border-radius: 7.5px; background: #e8f1ff; color: #175fc9; font: inherit; font-size: 11px; font-weight: 700; text-decoration: none; cursor: pointer; }
.vem-page-submit-expense .invoice-link:hover:not(:disabled) { border-color: #78a9e8; background: #dceaff; }
.vem-page-submit-expense .invoice-link:disabled { opacity: .68; cursor: wait; }
.vem-page-submit-expense .current-pdf-status { display: block; min-height: 16px; margin-top: 4px; color: #687b99; font-size: 10px; font-weight: 600; }
.vem-page-submit-expense .current-pdf-status.success-text { color: #116547; }
.vem-page-submit-expense .current-pdf-status.error-text { color: #a61d1d; }
.vem-page-submit-expense .button-row,
.vem-page-submit-expense .actions { display: flex; align-items: center; gap: 8px; margin-top: 16.5px; flex-wrap: wrap; }
.vem-page-submit-expense .btn { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; padding: 7.5px 13px; border: 1px solid #bccadd; border-radius: 9px; background: #f5f8fc; color: #172238; font: inherit; font-size: 12px; font-weight: 700; text-decoration: none; cursor: pointer; box-sizing: border-box; }
.vem-page-submit-expense .btn-primary { border-color: transparent; background: linear-gradient(135deg,#287fee,#1557c7); color: #fff; box-shadow: 0 8px 18px rgba(21,87,199,.16); }
.vem-page-submit-expense .btn-muted { background: #f5f8fc; }
.vem-page-submit-expense .btn-reminder { border-color: #e8c37d; background: #fff4dc; color: #8a5b08; }
.vem-page-submit-expense .btn-reminder:disabled { opacity: .7; cursor: not-allowed; }
.vem-page-submit-expense .btn-danger,
.vem-page-submit-expense .bt-danger { border-color: #e9b3b3; background: #fff5f5; color: #b32626; }
.vem-page-submit-expense .alert { margin-bottom: 15px; padding: 10.5px 12.5px; border: 1px solid transparent; border-radius: 10px; font-size: 12px; font-weight: 650; }
.vem-page-submit-expense .alert-error,
.vem-page-submit-expense .error { border-color: #efb7b7; background: #fff0f0; color: #a61d1d; }
.vem-page-submit-expense .alert-success,
.vem-page-submit-expense .success { border-color: #9ed8c2; background: #eaf8f2; color: #116547; }
.vem-page-submit-expense .notice { margin-top: 15px; padding: 10.5px 12.5px; border: 1px solid #c4d1e1; border-radius: 10px; background: #edf3f8; color: #526783; font-size: 12px; font-weight: 500; }
@media (max-width: 768px) {
.vem-page-submit-expense .main-content { margin-left: 72px; padding: 16.5px; }
.vem-page-submit-expense .top-bar,
.vem-page-submit-expense .week-selector,
.vem-page-submit-expense .button-row,
.vem-page-submit-expense .actions { align-items: stretch; flex-direction: column; }
.vem-page-submit-expense .panel-header-with-actions { align-items: stretch; flex-direction: column; }
.vem-page-submit-expense .expense-status-actions { justify-content: flex-start; }
.vem-page-submit-expense .page-title h1 { font-size: 22px; }
.vem-page-submit-expense .panel-header,
.vem-page-submit-expense .panel-body { padding: 15px; }
}
@media (max-width: 620px) {
.vem-page-submit-expense .main-content { margin-left: 0; padding: 13px 10px; }
}
/* Approve Expenses ------------------------------------------------------ */
.vem-page-approve-expenses { --info: #1f6feb; --info-bg: #e8f1ff; }
.vem-page-approve-expenses .main { width: auto; max-width: none; min-height: 100vh; margin-left: 290px; padding: 26px 23px; overflow-x: hidden; box-sizing: border-box; }
.vem-page-approve-expenses .page-profile-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16.5px; margin-bottom: 19.5px; padding-bottom: 15px; border-bottom: 1px solid rgba(104,125,166,.28); flex-wrap: wrap; }
.vem-page-approve-expenses h1 { margin: 0; color: #f5f8fc; font-size: 26px; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; }
.vem-page-approve-expenses .muted { max-width: 760px; margin: 5.5px 0 0; color: #667b99; font-size: 12px; font-weight: 400; line-height: 1.55; }
.vem-page-approve-expenses .page-profile-header .muted { color: #c4d1e1; font-size: 12px; }
.vem-page-approve-expenses .panel { position: relative; min-width: 0; margin-top: 15px; padding: 18px; overflow: hidden; border: 1px solid rgba(175,192,214,.9); border-radius: 15px; background: #dce5ef; box-sizing: border-box; }
.vem-page-approve-expenses .filters { display: grid; grid-template-columns: minmax(150px,220px) minmax(180px,260px) auto; align-items: end; gap: 11.5px; margin: 0; padding: 15px; border: 1px solid #c4d1e1; border-radius: 11.5px; background: #d3deea; }
.vem-page-approve-expenses .filters > div { min-width: 0; }
.vem-page-approve-expenses .filters .filter-submit { width: auto !important; min-width: 86px; justify-self: start; align-self: end; }
.vem-page-approve-expenses label { display: block; margin-bottom: 5px; color: #526783; font-size: 11px; font-weight: 700; letter-spacing: .025em; text-transform: uppercase; }
.vem-page-approve-expenses :is(input,select,textarea):not([type="checkbox"]):not([type="radio"]) { width: 100%; min-width: 0; min-height: 42px; padding: 7.5px 31px 7.5px 10px; border: 1px solid #bccadd; border-radius: 9px; background-color: #f5f8fc; color: #172238; font: inherit; font-size: 12px; font-weight: 500; outline: none; box-sizing: border-box; }
.vem-page-approve-expenses :is(input,select,textarea):not([type="checkbox"]):not([type="radio"]):focus { border-color: #287fee; background-color: #fff; box-shadow: 0 0 0 3px rgba(40,127,238,.16); }
.vem-page-approve-expenses textarea { min-height: 76px; margin-top: 5px; padding-right: 10px; resize: vertical; }
.vem-page-approve-expenses .sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 13px; margin-bottom: 10px; }
.vem-page-approve-expenses .sheet-head strong { color: #172238; font-size: 13px; font-weight: 700; }
.vem-page-approve-expenses .status { display: inline-flex; align-items: center; padding: 5px 10px; border: 1px solid transparent; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.vem-page-approve-expenses .status-submitted { border-color: #a9c7ef; background: #e8f1ff; color: #175fc9; }
.vem-page-approve-expenses .status-approved { border-color: #9ed8c2; background: #eaf8f2; color: #116547; }
.vem-page-approve-expenses :is(.status-rejected,.status-correction) { border-color: #efb7b7; background: #fff0f0; color: #a61d1d; }
.vem-page-approve-expenses table { display: block; width: 100%; max-width: 100%; margin-top: 13px; overflow-x: auto; border: 1px solid #c4d1e1; border-radius: 10.5px; border-collapse: separate; border-spacing: 0; background: #eef3f8; font-size: 12px; box-sizing: border-box; }
.vem-page-approve-expenses thead,.vem-page-approve-expenses tbody { display: table; width: 100%; min-width: 980px; table-layout: fixed; }
.vem-page-approve-expenses th { padding: 10px; border-bottom: 1px solid #c4d1e1; background: #d3deea; color: #526783; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-align: left; text-transform: uppercase; }
.vem-page-approve-expenses td { padding: 10px; border-bottom: 1px solid #d3ddea; background: #e8eef5; color: #263750; vertical-align: top; }
.vem-page-approve-expenses tr:hover td { background: #edf3f8; }
.vem-page-approve-expenses .expense-decision-form { margin-top: 16.5px; }
.vem-page-approve-expenses .expense-decision-form > label { margin-bottom: 6.5px; }
.vem-page-approve-expenses .expense-decision-form > textarea { display: block; margin-top: 0; }
.vem-page-approve-expenses .actions { display: flex; align-items: center; gap: 8px; margin-top: 15px; flex-wrap: wrap; }
.vem-page-approve-expenses .btn,.vem-page-approve-expenses .invoice-download { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; padding: 7.5px 13px; border: 1px solid #bccadd; border-radius: 9px; background: #f5f8fc; color: #172238; font: inherit; font-size: 12px; font-weight: 700; text-decoration: none; cursor: pointer; box-sizing: border-box; }
.vem-page-approve-expenses .btn-primary { border-color: #88ccb2; background: #eaf8f2; color: #116547; }
.vem-page-approve-expenses .btn-warn { border-color: #e8c37d; background: #fff4dc; color: #8a5b08; }
.vem-page-approve-expenses .btn-danger { border-color: #e9b3b3; background: #fff5f5; color: #b32626; }
.vem-page-approve-expenses .invoice-download { min-height: 38px; border-color: transparent; background: linear-gradient(135deg,#287fee,#1557c7); color: #fff; }
.vem-page-approve-expenses :is(.btn,.invoice-download):hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 7px 16px rgba(23,47,84,.13); }
.vem-page-approve-expenses .invoice-download:disabled { opacity: .65; cursor: wait; }
.vem-page-approve-expenses .download-cell { min-width: 150px; }
.vem-page-approve-expenses .download-status { display: block; margin-top: 5.5px; color: #687b99; font-size: 11px; font-weight: 600; }
.vem-page-approve-expenses .download-status.success-text { color: #116547; }
.vem-page-approve-expenses .download-status.error-text { color: #a61d1d; }
.vem-page-approve-expenses .alert { margin: 0 0 13px; padding: 10.5px 12.5px; border: 1px solid transparent; border-radius: 10px; font-size: 12px; font-weight: 600; }
.vem-page-approve-expenses .success { border-color: #9ed8c2; background: #eaf8f2; color: #116547; }
.vem-page-approve-expenses .error { border-color: #efb7b7; background: #fff0f0; color: #a61d1d; }
@media (max-width: 900px) {
.vem-page-approve-expenses .main { margin-left: 72px; padding: 18px 15px; }
.vem-page-approve-expenses .filters { grid-template-columns: 1fr 1fr; }
.vem-page-approve-expenses .filters .btn { justify-self: start; }
}
@media (max-width: 620px) {
.vem-page-approve-expenses .main { margin-left: 0; padding: 13px 10px; }
.vem-page-approve-expenses h1 { font-size: 22px; }
.vem-page-approve-expenses .filters { grid-template-columns: 1fr; }
.vem-page-approve-expenses .sheet-head { align-items: stretch; flex-direction: column; }
.vem-page-approve-expenses .panel { padding: 13px; }
}
/* Approved Expenses ----------------------------------------------------- */
.vem-page-approved-expenses { --info: #1f6feb; --info-bg: #e8f1ff; }
.vem-page-approved-expenses .main { width: auto; max-width: none; min-height: 100vh; margin-left: 290px; padding: 26px 23px; overflow-x: hidden; box-sizing: border-box; }
.vem-page-approved-expenses .page-profile-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16.5px; margin-bottom: 19.5px; padding-bottom: 15px; border-bottom: 1px solid rgba(104,125,166,.28); flex-wrap: wrap; }
.vem-page-approved-expenses h1 { margin: 0; color: #f5f8fc; font-size: 26px; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; }
.vem-page-approved-expenses .muted { max-width: 760px; margin: 5px 0 0; color: #687b99; font-size: 12px; font-weight: 400; line-height: 1.55; }
.vem-page-approved-expenses .page-profile-header .muted { color: #c4d1e1; font-size: 12px; }
.vem-page-approved-expenses .panel { position: relative; min-width: 0; margin-top: 15px; padding: 18px; overflow: hidden; border: 1px solid rgba(175,192,214,.9); border-radius: 15px; background: #dce5ef; box-sizing: border-box; }
.vem-page-approved-expenses .filters { display: grid; grid-template-columns: minmax(140px,200px) minmax(170px,230px) minmax(220px,1fr) auto; align-items: end; gap: 11.5px; margin: 0; padding: 15px; border: 1px solid #c4d1e1; border-radius: 11.5px; background: #d3deea; }
.vem-page-approved-expenses .filters > div { min-width: 0; }
.vem-page-approved-expenses label { display: block; margin-bottom: 5px; color: #526783; font-size: 11px; font-weight: 700; letter-spacing: .025em; text-transform: uppercase; }
.vem-page-approved-expenses :is(input,select,textarea):not([type="checkbox"]):not([type="radio"]) { width: 100%; min-width: 0; min-height: 42px; padding: 7.5px 31px 7.5px 10px; border: 1px solid #bccadd; border-radius: 9px; background-color: #f5f8fc; color: #172238; font: inherit; font-size: 12px; font-weight: 500; outline: none; box-sizing: border-box; }
.vem-page-approved-expenses :is(input,select,textarea):not([type="checkbox"]):not([type="radio"]):focus { border-color: #287fee; background-color: #fff; box-shadow: 0 0 0 3px rgba(40,127,238,.16); }
.vem-page-approved-expenses .filters .filter-submit { width: auto !important; min-width: 86px; justify-self: start; align-self: end; }
.vem-page-approved-expenses .table-wrapper { width: 100%; max-width: 100%; overflow-x: auto; border: 1px solid #c4d1e1; border-radius: 10.5px; background: #eef3f8; box-sizing: border-box; }
.vem-page-approved-expenses table { width: 100%; min-width: 1080px; border-collapse: separate; border-spacing: 0; background: #eef3f8; font-size: 12px; }
.vem-page-approved-expenses th { padding: 10px; border-bottom: 1px solid #c4d1e1; background: #d3deea; color: #526783; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-align: left; text-transform: uppercase; }
.vem-page-approved-expenses td { padding: 10px; border-bottom: 1px solid #d3ddea; background: #e8eef5; color: #263750; vertical-align: top; }
.vem-page-approved-expenses tr:hover td { background: #edf3f8; }
.vem-page-approved-expenses .btn,.vem-page-approved-expenses .invoice-download { display: inline-flex; width: auto; min-height: 40px; align-items: center; justify-content: center; padding: 6.5px 11.5px; border: 1px solid #bccadd; border-radius: 8px; background: #f5f8fc; color: #172238; font: inherit; font-size: 12px; font-weight: 700; text-decoration: none; cursor: pointer; box-sizing: border-box; }
.vem-page-approved-expenses .invoice-download { border-color: transparent; background: linear-gradient(135deg,#287fee,#1557c7); color: #fff; }
.vem-page-approved-expenses .pagination-nav { display: flex; align-items: center; justify-content: center; gap: 13px; margin-top: 13px; }
.vem-page-approved-expenses :is(.btn,.invoice-download):hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 7px 16px rgba(23,47,84,.13); }
.vem-page-approved-expenses .invoice-download:disabled { opacity: .65; cursor: wait; }
.vem-page-approved-expenses .download-cell { min-width: 160px; }
.vem-page-approved-expenses .download-status { display: block; min-height: 16px; margin-top: 5px; color: #687b99; font-size: 10px; font-weight: 600; }
.vem-page-approved-expenses .download-status.success-text { color: #116547; }
.vem-page-approved-expenses .download-status.error-text { color: #a61d1d; }
.vem-page-approved-expenses .error { margin: 0 0 13px; padding: 10.5px 12.5px; border: 1px solid #efb7b7; border-radius: 10px; background: #fff0f0; color: #a61d1d; font-size: 12px; font-weight: 600; }
@media (max-width: 1050px) {
.vem-page-approved-expenses .main { margin-left: 72px; padding: 18px 15px; }
.vem-page-approved-expenses .filters { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
.vem-page-approved-expenses .main { margin-left: 0; padding: 13px 10px; }
.vem-page-approved-expenses h1 { font-size: 22px; }
.vem-page-approved-expenses .filters { grid-template-columns: 1fr; }
.vem-page-approved-expenses .panel { padding: 13px; }
}
/* Leave Approvals ------------------------------------------------------- */
.vem-page-approve-leave .main-content { width:auto; max-width:none; min-height:100vh; margin-left:290px; padding: 23px; overflow-x:hidden; box-sizing:border-box; }
.vem-page-approve-leave .page-profile-header { display:flex; align-items:flex-start; justify-content:space-between; gap: 16.5px; margin-bottom: 19.5px; padding-bottom: 15px; border-bottom:1px solid rgba(104,125,166,.28); flex-wrap:wrap; }
.vem-page-approve-leave .title { margin: 0; color:#f5f8fc; font-size: 26px; font-weight:700; line-height:1.15; letter-spacing:-.02em; }
.vem-page-approve-leave .subtitle { margin: 5.5px 0 0; color:#c4d1e1; font-size: 12px; font-weight:400; line-height:1.5; }
.vem-page-approve-leave .approval-filters { max-width:1080px; display:grid; grid-template-columns:minmax(220px,1fr) minmax(180px,.55fr) auto auto auto; gap: 8px; align-items:end; margin: 0 0 15px; padding: 12.5px; border:1px solid #afbdce; border-radius: 13px; background:#dce5ef; box-sizing:border-box; }
.vem-page-approve-leave .approval-filters label { display:grid; min-width:0; gap: 4px; }
.vem-page-approve-leave .approval-filters label span { color:#526783; font-size: 10px; font-weight:700; letter-spacing:.035em; text-transform:uppercase; }
.vem-page-approve-leave .approval-filters :is(input,select) { width:100%; min-width:0; min-height:43px; padding: 7.5px 31px 7.5px 9px; border:1px solid #bccadd; border-radius: 9px; background-color:#f5f8fc; color:#172238; font:inherit; font-size: 12px; box-sizing:border-box; }
.vem-page-approve-leave .approval-filters :is(input,select):focus { border-color:#287fee; background:#fff; outline:0; box-shadow:0 0 0 3px rgba(40,127,238,.16); }
.vem-page-approve-leave .approval-filters :is(button,a) { min-height:43px; display:inline-flex; align-items:center; justify-content:center; padding: 7.5px 11.5px; border:1px solid #bccadd; border-radius: 9px; font-size: 12px; font-weight:700; text-decoration:none; box-sizing:border-box; transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; }
.vem-page-approve-leave .approval-filters button { border-color:#2369d8; background:#2369d8; color:#fff; cursor:pointer; }
.vem-page-approve-leave .approval-filters button:hover { background:#1a56b8; border-color:#1a56b8; transform: translateY(-1px); box-shadow: 0 6px 14px rgba(35,105,216,.28); }
.vem-page-approve-leave .approval-filters a { background:#f5f8fc; color:#344763; }
.vem-page-approve-leave .approval-filters a:hover { background:#e7edf5; border-color:#a7b8d0; transform: translateY(-1px); }
.vem-page-approve-leave .approval-filters strong { align-self:center; color:#536985; font-size: 12px; font-weight:700; white-space:nowrap; }
.vem-page-approve-leave .grid { max-width:1110px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap: 15px; }
.vem-page-approve-leave .card { min-width:0; overflow:hidden; border:1px solid #afbdce; border-left:4px solid #287fee; border-radius: 13px; background:#dce5ef; box-shadow:0 10px 26px rgba(3,12,27,.13); }
.vem-page-approve-leave .card>.head { display:flex; align-items:center; justify-content:space-between; gap: 8px; padding: 10.5px 13px; border-bottom:1px solid #c4d1e1; background:#d3deea; }
.vem-page-approve-leave .card>.head strong { color:#172238; font-size: 12.5px; font-weight:700; }
.vem-page-approve-leave .card>.head span { padding: 5px 8px; border-radius: 999px; background:#f5f8fc; color:#344763; font-size: 11px; font-weight:700; }
.vem-page-approve-leave .card>.meta { margin: 0; padding: 10px 13px 5px; color:#59708f; font-size: 12px; font-weight:600; }
.vem-page-approve-leave .card>p { margin: 3.5px 13px 9px; padding: 7.5px 9px; border-left:3px solid #8fa8d4; border-radius: 0 8px 8px 0; background:#e8eef5; color:#31415c; font-size: 12px; line-height:1.5; }
.vem-page-approve-leave .card>a.btn { display:inline-flex; min-height:38px; align-items:center; margin: 3px 13px 10px; padding: 5.5px 9px; border:1px solid #bfd3f1; border-radius: 8px; background:#f5f9ff; color:#155fc7; font-size: 12px; font-weight:700; text-decoration:none; }
.vem-page-approve-leave .card>form { clear:both; margin: 0; padding: 10.5px 13px 12.5px; border-top:1px solid #c4d1e1; background:#d8e2ed; }
.vem-page-approve-leave .card .control { width:100%; min-height:62px; padding: 8px 10px; resize:vertical; border:1px solid #bccadd; border-radius: 9px; background:#f5f8fc; color:#172238; font:inherit; font-size: 12px; box-sizing:border-box; }
.vem-page-approve-leave .actions { display:flex; justify-content:flex-end; gap: 8px; margin-top: 7.5px; }
.vem-page-approve-leave .actions .btn { min-width:88px; min-height:39px; padding: 6.5px 10.5px; border:1px solid #bccadd; border-radius: 8px; background:#f5f8fc; color:#172238; font-size: 12px; font-weight:700; cursor:pointer; }
.vem-page-approve-leave .actions .approve { border-color:#2369d8; background:#2369d8; color:#fff; box-shadow:0 6px 14px rgba(23,105,223,.2); }
.vem-page-approve-leave .actions .reject { border-color:#e5aaaa; color:#a61d1d; }
.vem-page-approve-leave .review-toggle { margin-left:auto; padding: 5px 7.5px; border:1px solid #bfd0ea; border-radius: 7.5px; background:#f5f8fc; color:#175fc7; font-size: 11px; font-weight:700; cursor:pointer; }
.vem-page-approve-leave .card.collapsed>:is(.meta,p,a,form) { display:none; }
.vem-page-approve-leave .empty-approvals { grid-column:1/-1; display:flex; min-height:140px; align-items:center; justify-content:center; padding: 23px; border-left-width:1px; color:#536985; font-size: 12px; font-weight:600; text-align:center; box-sizing:border-box; }
.vem-page-approve-leave .empty-approvals::before { content:"✓"; display:grid; width:38px; height:38px; place-items:center; margin-right:13px; border-radius: 9px; background:#d7f0eb; color:#087f73; font-size: 15.5px; font-weight:900; }
.vem-page-approve-leave .approval-pagination { max-width:1080px; display:flex; justify-content:flex-end; align-items:center; gap: 10px; margin-top: 13px; }
.vem-page-approve-leave .approval-pagination a { padding: 7.5px 10.5px; border-radius: 8px; background:#f5f8fc; color:#175fc7; font-size: 12px; font-weight:700; text-decoration:none; }
.vem-page-approve-leave .approval-pagination span { color:#90a3be; font-size: 12px; font-weight:600; }
.vem-page-approve-leave .alert { max-width:1080px; margin: 0 0 13px; padding: 10.5px 12.5px; border-radius: 10px; font-size: 12px; font-weight:600; box-sizing:border-box; }
.vem-page-approve-leave .alert.error { border:1px solid #efb7b7; background:#fff0f0; color:#a61d1d; }
.vem-page-approve-leave .alert.success { border:1px solid #a8dcca; background:#eaf8f2; color:#116547; }
@media(max-width:980px){ .vem-page-approve-leave .main-content{margin-left:72px;padding:22px 18px}.vem-page-approve-leave .grid{grid-template-columns:1fr} }
@media(max-width:760px){ .vem-page-approve-leave .approval-filters{grid-template-columns:1fr 1fr}.vem-page-approve-leave .approval-filters strong{grid-column:1/-1} }
@media(max-width:650px){ .vem-page-approve-leave .main-content{margin-left:0;padding:16px 12px}.vem-page-approve-leave .title{font-size:27px}.vem-page-approve-leave .approval-filters{grid-template-columns:1fr}.vem-page-approve-leave .approval-filters strong{grid-column:auto}.vem-page-approve-leave .empty-approvals{min-height:110px;padding:20px} }
/* Approve Timesheets --------------------------------------------------- */
.vem-page-approve-timesheets{
--success-text: #16845b;
--danger-text: #b91c1c;
--warning-text: #c7771d;
}
body.vem-page-approve-timesheets{
font-family: "Segoe UI Variable", "Segoe UI", Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
min-height: 100vh;
height: 100vh;
margin: 0;
overflow: hidden;
color: var(--ink);
background:
radial-gradient(circle at 12% 14%, rgba(124, 58, 237, 0.05), transparent 34%),
radial-gradient(circle at 86% 18%, rgba(79, 70, 229, 0.08), transparent 32%),
radial-gradient(circle at 72% 88%, rgba(147, 51, 234, 0.06), transparent 36%),
linear-gradient(135deg, #e7dbff 0%, #a9a4ff 38%, #c1bdff 65%, #d9d7ff 100%);
overflow-x: hidden;
overflow-y: auto;
text-rendering: geometricPrecision;
-webkit-font-smoothing: antialiased;
}
body.vem-page-approve-timesheets::after{
content: "";
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background:
linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.34) 42%, transparent 68%),
linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(214, 199, 255, 0.22));
opacity: 0.92;
}
body.vem-page-approve-timesheets::before{
content: '';
position: fixed;
inset: 0;
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.02'/%3E%3C/svg%3E");
opacity: 0.15;
z-index: -1;
}
body.vem-page-approve-timesheets .app{
display: flex;
min-height: 100vh;
height: 100vh;
overflow: hidden;
}
body.vem-page-approve-timesheets .main-content{
flex: 1;
margin-left: 270px;
padding: 28px 31px 37.5px;
overflow-y: auto;
overflow-x: auto;
height: 100vh;
animation: pageRise 520ms var(--transition-smooth) both;
}
@keyframes pageRise{
from {
opacity: 0;
transform: translateY(14px) scale(0.995);
}
to{
opacity: 1;
transform: translateY(0) scale(1);
}
}
body.vem-page-approve-timesheets .top-bar{
display: flex;
justify-content: space-between;
align-items: center;
gap: 18px;
margin-bottom: 23px;
flex-wrap: wrap;
}
body.vem-page-approve-timesheets .page-kicker{
display: inline-flex;
align-items: center;
gap: 6.5px;
margin: 0 0 5px;
color: var(--brand);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.11em;
text-transform: uppercase;
}
body.vem-page-approve-timesheets .page-kicker::before{
content: "";
width: 22px;
height: 2px;
border-radius: 81px;
background: linear-gradient(90deg, var(--brand), var(--accent-2));
box-shadow: 0 0 16px rgba(31, 111, 235, 0.25);
}
body.vem-page-approve-timesheets .page-title{
margin: 0;
color: var(--ink);
font-size: 24.5px;
line-height: 1.14;
font-weight: 760;
letter-spacing: 0;
}
body.vem-page-approve-timesheets .page-subtitle{
max-width: 760px;
margin: 6.5px 0 0;
color: var(--muted);
font-size: 12px;
line-height: 1.6;
font-weight: 450;
}
body.vem-page-approve-timesheets .user-profile{
position: relative;
min-width: 230px;
display: flex;
align-items: center;
gap: 10px;
padding: 8px 11.5px 8px 8px;
overflow: hidden;
cursor: pointer;
border: 1px solid rgba(255, 255, 255, 0.78);
border-radius: var(--radius-xl);
background:
linear-gradient(135deg, rgba(231, 219, 255, 0.82), rgba(217, 200, 255, 0.42)),
radial-gradient(circle at 0% 0%, rgba(235, 242, 255, 0.92), rgba(225, 235, 255, 0.68) 52%, rgba(230, 240, 255, 0.7));
box-shadow: 0 20px 40px rgba(56, 88, 172, 0.08);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(18px) saturate(150%);
transition:
transform var(--transition-float),
box-shadow var(--transition-float),
border-color var(--transition-smooth);
}
body.vem-page-approve-timesheets .user-profile:hover{
transform: translateY(-4px);
border-color: rgba(31, 111, 235, 0.24);
box-shadow: var(--shadow-md);
}
body.vem-page-approve-timesheets .user-profile:active{
transform: translateY(-1px) scale(0.992);
box-shadow: var(--shadow-sm);
}
body.vem-page-approve-timesheets .user-avatar{
position: relative;
z-index: 1;
width: 44px;
height: 44px;
display: grid;
place-items: center;
flex: 0 0 auto;
border-radius: 14px;
color: #ffffff;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.02em;
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.2), transparent 38%),
linear-gradient(145deg, var(--brand), var(--brand-deep));
box-shadow:
0 12px 24px rgba(31, 111, 235, 0.24),
inset 0 1px 0 rgba(255, 255, 255, 0.34);
transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}
body.vem-page-approve-timesheets .user-name{
position: relative;
z-index: 1;
color: var(--ink);
font-size: 12px;
font-weight: 750;
line-height: 1.25;
}
body.vem-page-approve-timesheets /* Fix for card corner edge artifacts - ensures clean rounded corners */
body.vem-page-approve-timesheets .panel, body.vem-page-approve-timesheets .stat-card, body.vem-page-approve-timesheets .week-card, body.vem-page-approve-timesheets .modal{
overflow: visible;
box-shadow: 0 20px 40px rgba(56, 88, 172, 0.08);
}
body.vem-page-approve-timesheets .panel{
position: relative;
isolation: isolate;
padding: 19.5px;
border: 1px solid rgba(255, 255, 255, 0.82);
border-radius: var(--radius-lg);
background:
linear-gradient(135deg, rgba(231, 219, 255, 0.82), rgba(217, 200, 255, 0.42)),
radial-gradient(circle at 0% 0%, rgba(235, 242, 255, 0.92), rgba(225, 235, 255, 0.68) 52%, rgba(230, 240, 255, 0.7));
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(18px) saturate(145%);
transition:
transform var(--transition-float),
box-shadow var(--transition-float),
border-color var(--transition-smooth);
}
body.vem-page-approve-timesheets .alert{
margin-bottom: 15px;
padding: 11.5px 15px;
border-radius: var(--radius-md);
font-size: 12px;
font-weight: 650;
backdrop-filter: blur(8px);
border: 1px solid transparent;
}
body.vem-page-approve-timesheets .alert-error{
background: linear-gradient(135deg, rgba(254, 242, 242, 0.96), rgba(252, 228, 228, 0.9));
border-color: rgba(185, 28, 28, 0.28);
color: var(--danger-text);
}
body.vem-page-approve-timesheets .alert-success{
background: linear-gradient(135deg, rgba(230, 247, 240, 0.96), rgba(214, 242, 230, 0.9));
border-color: rgba(22, 132, 91, 0.28);
color: var(--success-text);
}
body.vem-page-approve-timesheets .stats-grid{
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16.5px;
margin-bottom: 16.5px;
}
body.vem-page-approve-timesheets .stat-card{
position: relative;
isolation: isolate;
padding: 16.5px;
border: 1px solid rgba(255, 255, 255, 0.78);
border-radius: var(--radius-md);
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(248, 250, 255, 0.48)),
radial-gradient(circle at 0% 0%, rgba(235, 242, 255, 0.68), rgba(225, 235, 255, 0.48));
backdrop-filter: blur(16px) saturate(160%);
transition:
transform var(--transition-float),
box-shadow var(--transition-float),
border-color var(--transition-smooth);
}
body.vem-page-approve-timesheets .stat-card:hover{
transform: translateY(-3px);
border-color: rgba(31, 111, 235, 0.24);
box-shadow: var(--shadow-md);
}
body.vem-page-approve-timesheets .stat-number{
font-size: 26px;
line-height: 1;
font-weight: 780;
color: var(--brand);
font-variant-numeric: tabular-nums;
}
body.vem-page-approve-timesheets .stat-label{
margin-top: 8px;
color: var(--muted);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.07em;
text-transform: uppercase;
}
/* Shared status-filter pill nav — originally timesheets-only, now also
used by approve_expenses.php so the two approval queues present the
same "which status am I looking at" control instead of each having
its own bespoke filter UI for the same underlying job. */
body.vem-page-approve-timesheets .filter-buttons,
body.vem-page-approve-expenses .filter-buttons{
display: flex;
gap: 8px;
flex-wrap: wrap;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
margin-bottom: 18px;
}
body.vem-page-approve-timesheets .filter-btn,
body.vem-page-approve-expenses .filter-btn{
position: relative;
padding: 7.5px 15px;
border: 1px solid var(--line);
border-radius: 999px;
background: rgba(255, 255, 255, 0.72);
backdrop-filter: blur(8px);
color: var(--ink-light);
text-decoration: none;
font-size: 12px;
font-weight: 800;
transition: all var(--transition-smooth);
}
body.vem-page-approve-timesheets .filter-btn:hover,
body.vem-page-approve-expenses .filter-btn:hover{
transform: translateY(-2px);
border-color: var(--brand);
background: rgba(255, 255, 255, 0.9);
}
body.vem-page-approve-timesheets .filter-btn.active,
body.vem-page-approve-expenses .filter-btn.active{
border-color: transparent;
background: linear-gradient(135deg, var(--brand), var(--brand-deep));
color: #fff;
box-shadow: var(--shadow-brand);
}
body.vem-page-approve-timesheets .week-list{
display: grid;
gap: 16.5px;
}
body.vem-page-approve-timesheets .week-card{
position: relative;
isolation: isolate;
overflow: visible;
border: 1px solid rgba(255, 255, 255, 0.82);
border-radius: var(--radius-lg);
background:
linear-gradient(135deg, rgba(231, 219, 255, 0.82), rgba(217, 200, 255, 0.42)),
radial-gradient(circle at 0% 0%, rgba(235, 242, 255, 0.92), rgba(225, 235, 255, 0.68) 52%, rgba(230, 240, 255, 0.7));
backdrop-filter: blur(20px) saturate(180%);
transition:
transform var(--transition-float),
box-shadow var(--transition-float),
border-color var(--transition-smooth);
}
body.vem-page-approve-timesheets .week-card::before{
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
background:
radial-gradient(circle at 16% 18%, rgba(31, 111, 235, 0.1), transparent 34%),
radial-gradient(circle at 92% 86%, rgba(119, 98, 227, 0.07), transparent 36%);
opacity: 0;
transition: opacity var(--transition-smooth);
}
body.vem-page-approve-timesheets .week-card:hover{
transform: translateY(-2px);
border-color: rgba(31, 111, 235, 0.2);
box-shadow: var(--shadow-lg);
}
body.vem-page-approve-timesheets .week-card:hover::before{
opacity: 1;
}
body.vem-page-approve-timesheets .week-card-header{
display: flex;
justify-content: space-between;
gap: 11.5px;
padding: 15px 18px;
background: rgba(255, 255, 255, 0.4);
border-bottom: 1px solid var(--line);
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
body.vem-page-approve-timesheets .week-info{
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
body.vem-page-approve-timesheets .week-number{
font-weight: 800;
color: var(--ink);
}
body.vem-page-approve-timesheets .week-date{
color: var(--muted);
font-size: 12px;
font-weight: 500;
}
body.vem-page-approve-timesheets .user-email{
color: var(--brand);
font-size: 12px;
font-weight: 800;
}
body.vem-page-approve-timesheets .header-meta{
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
justify-content: flex-end;
}
body.vem-page-approve-timesheets .status-badge{
display: inline-flex;
align-items: center;
min-height: 28px;
padding: 4px 11.5px;
border-radius: 999px;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.02em;
border: 1px solid transparent;
}
body.vem-page-approve-timesheets .status-pending{
background: linear-gradient(135deg, rgba(255, 248, 225, 0.95), rgba(255, 242, 204, 0.88));
border-color: rgba(199, 119, 29, 0.32);
color: var(--warning-text);
}
body.vem-page-approve-timesheets .status-approved{
background: linear-gradient(135deg, rgba(230, 247, 240, 0.95), rgba(214, 242, 230, 0.88));
border-color: rgba(22, 132, 91, 0.32);
color: var(--success-text);
}
body.vem-page-approve-timesheets .status-rejected{
background: linear-gradient(135deg, rgba(254, 242, 242, 0.95), rgba(252, 232, 232, 0.88));
border-color: rgba(185, 28, 28, 0.32);
color: var(--danger-text);
}
body.vem-page-approve-timesheets .week-total{
font-size: 12px;
font-weight: 800;
color: var(--brand);
}
body.vem-page-approve-timesheets .week-card-body{
padding: 18px;
overflow-x: auto;
}
body.vem-page-approve-timesheets .entries-table{
width: 100%;
min-width: 900px;
border-collapse: separate;
border-spacing: 0 8px;
font-size: 12px;
}
body.vem-page-approve-timesheets .entries-table th{
text-align: left;
padding: 8px 10px;
color: var(--muted);
background: transparent;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.07em;
text-transform: uppercase;
}
body.vem-page-approve-timesheets .entries-table td{
padding: 11.5px 10px;
background: rgba(255, 255, 255, 0.6);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
transition: background var(--transition-fast);
}
body.vem-page-approve-timesheets .entries-table tr:hover td{
background: rgba(255, 255, 255, 0.82);
}
body.vem-page-approve-timesheets .entries-table td:first-child{
border-left: 1px solid var(--line);
border-radius: var(--radius-md) 0 0 var(--radius-md);
}
body.vem-page-approve-timesheets .entries-table td:last-child{
border-right: 1px solid var(--line);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
body.vem-page-approve-timesheets .readonly-row td{
background: rgba(232, 241, 255, 0.4);
}
body.vem-page-approve-timesheets .daily-total-row td{
background: rgba(31, 111, 235, 0.08);
font-weight: 800;
}
body.vem-page-approve-timesheets .readonly-badge{
display: inline-flex;
margin-left: 8px;
padding: 2px 6.5px;
border-radius: 999px;
background: rgba(31, 111, 235, 0.12);
color: var(--brand);
font-size: 10px;
font-weight: 800;
}
body.vem-page-approve-timesheets .action-buttons{
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-top: 16.5px;
padding-top: 16.5px;
border-top: 1px solid var(--line);
}
body.vem-page-approve-timesheets button{
font-family: inherit;
}
body.vem-page-approve-timesheets .btn{
position: relative;
min-height: 40px;
padding: 7.5px 16.5px;
border: 1px solid transparent;
border-radius: var(--radius-md);
cursor: pointer;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.02em;
transition: all var(--transition-smooth);
overflow: hidden;
}
body.vem-page-approve-timesheets .btn:active{
transform: translateY(-1px) scale(0.98);
}
body.vem-page-approve-timesheets .btn-approve{
background: linear-gradient(135deg, rgba(22, 132, 91, 0.12), rgba(22, 132, 91, 0.06));
color: var(--success-text);
border-color: rgba(22, 132, 91, 0.28);
}
body.vem-page-approve-timesheets .btn-approve:hover{
background: linear-gradient(135deg, rgba(22, 132, 91, 0.2), rgba(22, 132, 91, 0.12));
transform: translateY(-2px);
border-color: var(--success);
}
body.vem-page-approve-timesheets .btn-reject{
background: linear-gradient(135deg, rgba(185, 28, 28, 0.12), rgba(185, 28, 28, 0.06));
color: var(--danger-text);
border-color: rgba(185, 28, 28, 0.28);
}
body.vem-page-approve-timesheets .btn-reject:hover{
background: linear-gradient(135deg, rgba(185, 28, 28, 0.2), rgba(185, 28, 28, 0.12));
transform: translateY(-2px);
border-color: var(--danger);
}
body.vem-page-approve-timesheets .btn-unlock{
background: linear-gradient(135deg, rgba(199, 119, 29, 0.12), rgba(199, 119, 29, 0.06));
color: var(--warning-text);
border-color: rgba(199, 119, 29, 0.28);
}
body.vem-page-approve-timesheets .btn-unlock:hover{
background: linear-gradient(135deg, rgba(199, 119, 29, 0.2), rgba(199, 119, 29, 0.12));
transform: translateY(-2px);
border-color: var(--warning);
}
body.vem-page-approve-timesheets .btn-cancel{
background: rgba(255, 255, 255, 0.72);
color: var(--ink-light);
border-color: var(--line);
}
body.vem-page-approve-timesheets .btn-cancel:hover{
background: rgba(255, 255, 255, 0.9);
transform: translateY(-2px);
border-color: var(--brand);
}
body.vem-page-approve-timesheets .btn-primary{
background: linear-gradient(135deg, var(--brand), var(--brand-deep));
color: #fff;
box-shadow: var(--shadow-xs), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
body.vem-page-approve-timesheets .btn-primary:hover{
background: linear-gradient(135deg, var(--brand-deep), #0f4eb5);
transform: translateY(-2px);
box-shadow: var(--shadow-brand);
}
body.vem-page-approve-timesheets .remarks-box{
margin-top: 15px;
padding: 13px 15px;
border: 1px solid var(--line);
border-radius: var(--radius-md);
background: rgba(255, 255, 255, 0.48);
backdrop-filter: blur(8px);
font-size: 12px;
line-height: 1.55;
color: var(--muted);
}
body.vem-page-approve-timesheets .remarks-meta{
margin-top: 6.5px;
color: var(--muted-light);
font-size: 11px;
font-weight: 500;
}
body.vem-page-approve-timesheets .empty-state{
padding: 44.5px 16.5px;
color: var(--muted);
text-align: center;
font-size: 12px;
font-weight: 600;
}
body.vem-page-approve-timesheets .modal-overlay{
position: fixed;
inset: 0;
z-index: 1000;
display: none;
place-items: center;
padding: 16.5px;
background: rgba(15, 23, 42, 0.42);
backdrop-filter: blur(4px);
}
body.vem-page-approve-timesheets .modal-overlay.active{
display: grid;
}
body.vem-page-approve-timesheets .modal{
width: min(480px, 100%);
overflow: visible;
border: 1px solid rgba(255, 255, 255, 0.82);
border-radius: var(--radius-lg);
background:
linear-gradient(135deg, rgba(231, 219, 255, 0.82), rgba(217, 200, 255, 0.42)),
radial-gradient(circle at 0% 0%, rgba(235, 242, 255, 0.92), rgba(225, 235, 255, 0.68) 52%, rgba(230, 240, 255, 0.7));
backdrop-filter: blur(20px) saturate(180%);
}
body.vem-page-approve-timesheets .modal-header, body.vem-page-approve-timesheets .modal-footer{
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
padding: 15px 18px;
background: rgba(255, 255, 255, 0.4);
}
body.vem-page-approve-timesheets .modal-header{
border-bottom: 1px solid var(--line);
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
body.vem-page-approve-timesheets .modal-footer{
justify-content: flex-end;
border-top: 1px solid var(--line);
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
body.vem-page-approve-timesheets .modal-header h3{
margin: 0;
font-size: 15px;
font-weight: 760;
color: var(--ink);
}
body.vem-page-approve-timesheets .modal-close{
border: 0;
background: transparent;
color: var(--muted);
cursor: pointer;
font-size: 19.5px;
line-height: 1;
transition: color var(--transition-fast);
}
body.vem-page-approve-timesheets .modal-close:hover{
color: var(--danger);
}
body.vem-page-approve-timesheets .modal-body{
padding: 18px;
}
body.vem-page-approve-timesheets textarea{
width: 100%;
min-height: 120px;
padding: 10.5px 11.5px;
border: 1px solid rgba(85, 111, 145, 0.24);
border-radius: var(--radius-md);
background: rgba(255, 255, 255, 0.88);
color: var(--ink);
font-family: inherit;
font-size: 12px;
outline: none;
resize: vertical;
transition: all var(--transition-fast);
}
body.vem-page-approve-timesheets textarea:focus{
border-color: var(--brand);
box-shadow: 0 0 0 4px var(--brand-glow);
background: var(--panel-solid);
}
/* Responsive layout */
@media (max-width: 900px){
body.vem-page-approve-timesheets .main-content {
margin-left: 72px;
padding: 19.5px;
}
body.vem-page-approve-timesheets .top-bar{
align-items: stretch;
flex-direction: column;
}
body.vem-page-approve-timesheets .stats-grid{
grid-template-columns: 1fr 1fr;
}
body.vem-page-approve-timesheets .week-card-header{
flex-direction: column;
}
body.vem-page-approve-timesheets .header-meta{
justify-content: flex-start;
}
}
@media (max-width: 520px){
body.vem-page-approve-timesheets .main-content {
margin-left: 0;
padding: 16.5px 13px;
}
body.vem-page-approve-timesheets .page-title{
font-size: 19.5px;
}
body.vem-page-approve-timesheets .stats-grid{
grid-template-columns: 1fr;
}
body.vem-page-approve-timesheets .week-card-body{
padding: 13px;
}
body.vem-page-approve-timesheets .week-card-header{
padding: 11.5px 13px;
}
}
@media (prefers-reduced-motion: reduce){
body.vem-page-approve-timesheets *,
body.vem-page-approve-timesheets *::before,
body.vem-page-approve-timesheets *::after {
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: 1ms !important;
}
}
/* Company Settings ----------------------------------------------------- */
.vem-page-company-settings{
--success-text: #16845b;
--danger-text: #b91c1c;
--warning-text: #c7771d;
}
body.vem-page-company-settings{
font-family: "Segoe UI Variable", "Segoe UI", Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
min-height: 100vh;
height: 100vh;
margin: 0;
overflow: hidden;
color: var(--ink);
background:
radial-gradient(circle at 12% 14%, rgba(124, 58, 237, 0.05), transparent 34%),
radial-gradient(circle at 86% 18%, rgba(79, 70, 229, 0.08), transparent 32%),
radial-gradient(circle at 72% 88%, rgba(147, 51, 234, 0.06), transparent 36%),
linear-gradient(135deg, #e7dbff 0%, #a9a4ff 38%, #c1bdff 65%, #d9d7ff 100%);
overflow-x: hidden;
overflow-y: auto;
text-rendering: geometricPrecision;
-webkit-font-smoothing: antialiased;
}
body.vem-page-company-settings::after{
content: "";
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background:
linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.34) 42%, transparent 68%),
linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(214, 199, 255, 0.22));
opacity: 0.92;
}
body.vem-page-company-settings::before{
content: '';
position: fixed;
inset: 0;
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.02'/%3E%3C/svg%3E");
opacity: 0.15;
z-index: -1;
}
body.vem-page-company-settings .app{
display: flex;
min-height: 100vh;
height: 100vh;
overflow: hidden;
}
body.vem-page-company-settings .main-content{
flex: 1;
margin-left: 270px;
padding: 28px 31px 37.5px;
overflow-y: auto;
overflow-x: auto;
height: 100vh;
animation: pageRise 520ms var(--transition-smooth) both;
}
@keyframes pageRise{
from {
opacity: 0;
transform: translateY(14px) scale(0.995);
}
to{
opacity: 1;
transform: translateY(0) scale(1);
}
}
body.vem-page-company-settings .top-bar{
display: flex;
justify-content: space-between;
align-items: center;
gap: 18px;
margin-bottom: 23px;
flex-wrap: wrap;
}
body.vem-page-company-settings .page-kicker{
display: inline-flex;
align-items: center;
gap: 6.5px;
margin: 0 0 5px;
color: var(--brand);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.11em;
text-transform: uppercase;
}
body.vem-page-company-settings .page-kicker::before{
content: "";
width: 22px;
height: 2px;
border-radius: 81px;
background: linear-gradient(90deg, var(--brand), var(--accent-2));
box-shadow: 0 0 16px rgba(31, 111, 235, 0.25);
}
body.vem-page-company-settings .audit-log-link{
display: inline-flex;
align-items: center;
gap: 6.5px;
flex-shrink: 0;
padding: 9px 16.5px;
border-radius: 8px;
background: linear-gradient(135deg, var(--brand), var(--accent-2));
color: #fff;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.02em;
text-decoration: none;
white-space: nowrap;
box-shadow: 0 8px 20px rgba(31, 111, 235, 0.28);
transition: filter 150ms ease, transform 150ms ease;
}
body.vem-page-company-settings .audit-log-link:hover{
filter: brightness(1.07);
transform: translateY(-1px);
}
body.vem-page-company-settings .audit-log-link:active{
transform: translateY(0);
}
body.vem-page-company-settings .page-title{
margin: 0;
color: var(--ink);
font-size: 24.5px;
line-height: 1.14;
font-weight: 760;
letter-spacing: 0;
}
body.vem-page-company-settings .page-subtitle{
max-width: 760px;
margin: 6.5px 0 0;
color: var(--muted);
font-size: 12px;
line-height: 1.6;
font-weight: 450;
}
body.vem-page-company-settings .user-profile{
position: relative;
min-width: 230px;
display: flex;
align-items: center;
gap: 10px;
padding: 8px 11.5px 8px 8px;
overflow: hidden;
cursor: pointer;
border: 1px solid rgba(255, 255, 255, 0.78);
border-radius: var(--radius-xl);
background:
linear-gradient(135deg, rgba(231, 219, 255, 0.82), rgba(217, 200, 255, 0.42)),
radial-gradient(circle at 0% 0%, rgba(235, 242, 255, 0.92), rgba(225, 235, 255, 0.68) 52%, rgba(230, 240, 255, 0.7));
box-shadow: 0 20px 40px rgba(56, 88, 172, 0.08);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(18px) saturate(150%);
transition:
transform var(--transition-float),
box-shadow var(--transition-float),
border-color var(--transition-smooth);
}
body.vem-page-company-settings .user-profile:hover{
transform: translateY(-4px);
border-color: rgba(31, 111, 235, 0.24);
box-shadow: var(--shadow-md);
}
body.vem-page-company-settings .user-profile:active{
transform: translateY(-1px) scale(0.992);
box-shadow: var(--shadow-sm);
}
body.vem-page-company-settings .user-avatar{
position: relative;
z-index: 1;
width: 44px;
height: 44px;
display: grid;
place-items: center;
flex: 0 0 auto;
border-radius: 14px;
color: #ffffff;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.02em;
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.2), transparent 38%),
linear-gradient(145deg, var(--brand), var(--brand-deep));
box-shadow:
0 12px 24px rgba(31, 111, 235, 0.24),
inset 0 1px 0 rgba(255, 255, 255, 0.34);
transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}
body.vem-page-company-settings .user-name{
position: relative;
z-index: 1;
color: var(--ink);
font-size: 12px;
font-weight: 750;
line-height: 1.25;
}
body.vem-page-company-settings /* Fix for card corner edge artifacts - ensures clean rounded corners */
body.vem-page-company-settings .panel, body.vem-page-company-settings .preview-card{
overflow: visible;
box-shadow: 0 20px 40px rgba(56, 88, 172, 0.08);
}
body.vem-page-company-settings .panel{
position: relative;
isolation: isolate;
display: grid;
grid-template-columns: minmax(0, 1.2fr) 360px;
gap: 19.5px;
padding: 19.5px;
border: 1px solid rgba(255, 255, 255, 0.82);
border-radius: var(--radius-lg);
background:
linear-gradient(135deg, rgba(231, 219, 255, 0.82), rgba(217, 200, 255, 0.42)),
radial-gradient(circle at 0% 0%, rgba(235, 242, 255, 0.92), rgba(225, 235, 255, 0.68) 52%, rgba(230, 240, 255, 0.7));
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(18px) saturate(145%);
transition:
transform var(--transition-float),
box-shadow var(--transition-float),
border-color var(--transition-smooth);
}
body.vem-page-company-settings .alert{
grid-column: 1 / -1;
padding: 11.5px 15px;
border-radius: var(--radius-md);
font-size: 12px;
font-weight: 650;
backdrop-filter: blur(8px);
border: 1px solid transparent;
}
body.vem-page-company-settings .alert-error{
background: linear-gradient(135deg, rgba(254, 242, 242, 0.96), rgba(252, 228, 228, 0.9));
border-color: rgba(185, 28, 28, 0.28);
color: var(--danger-text);
}
body.vem-page-company-settings .alert-success{
background: linear-gradient(135deg, rgba(230, 247, 240, 0.96), rgba(214, 242, 230, 0.9));
border-color: rgba(22, 132, 91, 0.28);
color: var(--success-text);
}
body.vem-page-company-settings .form-grid{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16.5px;
}
body.vem-page-company-settings .form-group{
display: grid;
gap: 6.5px;
}
body.vem-page-company-settings .form-group.full{
grid-column: 1 / -1;
}
body.vem-page-company-settings label{
color: var(--ink);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.07em;
text-transform: uppercase;
}
body.vem-page-company-settings input[type="text"], body.vem-page-company-settings input[type="file"], body.vem-page-company-settings textarea{
width: 100%;
min-height: 46px;
padding: 9px 11.5px;
border: 1px solid rgba(85, 111, 145, 0.24);
border-radius: var(--radius-md);
background: rgba(255, 255, 255, 0.88);
color: var(--ink);
font-family: inherit;
font-size: 12px;
font-weight: 500;
outline: none;
transition: all var(--transition-fast);
box-sizing: border-box;
resize: vertical;
}
body.vem-page-company-settings input[type="text"]:focus, body.vem-page-company-settings input[type="file"]:focus, body.vem-page-company-settings textarea:focus{
border-color: var(--brand);
box-shadow: 0 0 0 4px var(--brand-glow);
background: var(--panel-solid);
}
body.vem-page-company-settings .hint{
color: var(--muted);
font-size: 12px;
line-height: 1.5;
font-weight: 450;
}
body.vem-page-company-settings .logo-preview{
width: 190px;
min-height: 88px;
display: grid;
place-items: center;
margin-top: 10px;
border: 1px solid var(--line);
border-radius: var(--radius-md);
background: rgba(255, 255, 255, 0.48);
backdrop-filter: blur(8px);
overflow: hidden;
}
body.vem-page-company-settings .logo-preview img{
max-width: 180px;
max-height: 78px;
object-fit: contain;
}
body.vem-page-company-settings .preview-card{
position: relative;
align-self: start;
padding: 19.5px;
border: 1px solid rgba(255, 255, 255, 0.78);
border-radius: var(--radius-md);
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(248, 250, 255, 0.48)),
radial-gradient(circle at 0% 0%, rgba(235, 242, 255, 0.68), rgba(225, 235, 255, 0.48));
backdrop-filter: blur(16px) saturate(160%);
transition:
transform var(--transition-float),
box-shadow var(--transition-float),
border-color var(--transition-smooth);
}
body.vem-page-company-settings .preview-card:hover{
transform: translateY(-3px);
border-color: rgba(31, 111, 235, 0.24);
box-shadow: var(--shadow-md);
}
body.vem-page-company-settings .preview-logo{
width: 170px;
height: 88px;
display: grid;
place-items: center;
margin-bottom: 16.5px;
border: 1px solid var(--line);
border-radius: var(--radius-md);
background: rgba(255, 255, 255, 0.48);
}
body.vem-page-company-settings .preview-logo img{
max-width: 158px;
max-height: 76px;
object-fit: contain;
}
body.vem-page-company-settings .preview-name{
margin: 0 0 5.5px;
font-size: 18px;
font-weight: 800;
line-height: 1.2;
color: var(--ink);
}
body.vem-page-company-settings .preview-code{
color: var(--muted);
font-size: 12px;
font-weight: 700;
}
body.vem-page-company-settings .swatches{
display: flex;
gap: 10px;
margin-top: 16.5px;
}
body.vem-page-company-settings .swatch{
width: 40px;
height: 40px;
border: 1px solid var(--line);
border-radius: 8px;
background: var(--brand);
cursor: pointer;
transition: all var(--transition-fast);
}
body.vem-page-company-settings .swatch:hover{
transform: scale(1.05);
box-shadow: var(--shadow-sm);
}
body.vem-page-company-settings .swatch.secondary{
background: var(--brand-deep);
}
body.vem-page-company-settings .actions{
grid-column: 1 / -1;
display: flex;
justify-content: flex-end;
margin-top: 3.5px;
}
body.vem-page-company-settings .save-btn{
position: relative;
min-height: 46px;
padding: 9px 19.5px;
border: 1px solid transparent;
border-radius: var(--radius-md);
background: linear-gradient(135deg, var(--brand), var(--brand-deep));
color: #fff;
cursor: pointer;
font-family: inherit;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.02em;
transition: all var(--transition-smooth);
overflow: hidden;
}
body.vem-page-company-settings .save-btn::before{
content: "";
position: absolute;
inset: 0;
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.24) 38%, transparent 58%);
opacity: 0;
transform: translateX(-18%);
transition: opacity var(--transition-smooth), transform var(--transition-float);
pointer-events: none;
}
body.vem-page-company-settings .save-btn:hover::before{
opacity: 1;
transform: translateX(0);
}
body.vem-page-company-settings .save-btn:hover{
background: linear-gradient(135deg, var(--brand-deep), #0f4eb5);
transform: translateY(-2px);
box-shadow: var(--shadow-brand);
}
body.vem-page-company-settings .save-btn:active{
transform: translateY(-1px) scale(0.98);
}
/* Responsive layout */
@media (max-width: 980px){
body.vem-page-company-settings .main-content {
margin-left: 72px;
padding: 19.5px;
}
body.vem-page-company-settings .top-bar{
align-items: stretch;
flex-direction: column;
}
body.vem-page-company-settings .panel{
grid-template-columns: 1fr;
}
body.vem-page-company-settings .form-grid{
grid-template-columns: 1fr;
}
}
@media (max-width: 520px){
body.vem-page-company-settings .main-content {
margin-left: 0;
padding: 16.5px 13px;
}
body.vem-page-company-settings .page-title{
font-size: 19.5px;
}
body.vem-page-company-settings .panel{
padding: 15px;
}
body.vem-page-company-settings .preview-card{
padding: 15px;
}
body.vem-page-company-settings .preview-name{
font-size: 15px;
}
}
@media (prefers-reduced-motion: reduce){
body.vem-page-company-settings *,
body.vem-page-company-settings *::before,
body.vem-page-company-settings *::after {
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: 1ms !important;
}
}
/* Enterprise Dashboard ------------------------------------------------ */
body.vem-enterprise-dashboard .app{
display: flex;
min-height: 100vh;
}
body.vem-enterprise-dashboard .main-content{
flex: 1;
margin-left: 270px;
padding: 36px 40px 48px;
animation: pageRise 520ms var(--transition-smooth) both;
}
@keyframes pageRise{
from {
opacity: 0;
transform: translateY(14px) scale(0.995);
}
to{
opacity: 1;
transform: translateY(0) scale(1);
}
}
body.vem-enterprise-dashboard .top-bar{
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
margin-bottom: 34px;
flex-wrap: wrap;
}
body.vem-enterprise-dashboard .page-kicker{
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0 0 9px;
color: var(--brand);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.11em;
text-transform: uppercase;
}
body.vem-enterprise-dashboard .page-kicker::before{
content: "";
width: 22px;
height: 2px;
border-radius: 99px;
background: linear-gradient(90deg, var(--brand), var(--accent-2));
box-shadow: 0 0 16px rgba(31, 111, 235, 0.25);
}
body.vem-enterprise-dashboard .page-title{
margin: 0;
color: var(--ink);
font-size: 34px;
line-height: 1.14;
font-weight: 760;
letter-spacing: 0;
}
body.vem-enterprise-dashboard .page-subtitle{
max-width: 760px;
margin: 12px 0 0;
color: var(--muted);
font-size: 14px;
line-height: 1.6;
font-weight: 450;
}
body.vem-enterprise-dashboard .user-profile{
position: relative;
min-width: 254px;
display: flex;
align-items: center;
gap: 13px;
padding: 11px 17px 11px 12px;
overflow: hidden;
cursor: pointer;
border: 1px solid rgba(255, 255, 255, 0.78);
border-radius: var(--radius-xl);
background:
linear-gradient(135deg, rgba(231, 219, 255, 0.82), rgba(217, 200, 255, 0.42)),
radial-gradient(circle at 0% 0%, rgba(235, 242, 255, 0.92), rgba(225, 235, 255, 0.68) 52%, rgba(230, 240, 255, 0.7));
box-shadow:
0 20px 40px rgba(56, 88, 172, 0.08),
0 4px 12px rgba(0, 0, 0, 0.02),
inset 0 1px 0 rgba(255, 255, 255, 0.95),
inset 0 -1px 0 rgba(56, 88, 172, 0.06);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(18px) saturate(150%);
transition:
transform var(--transition-float),
box-shadow var(--transition-float),
border-color var(--transition-smooth),
background var(--transition-smooth);
}
body.vem-enterprise-dashboard .user-profile:hover{
transform: translateY(-4px);
border-color: rgba(31, 111, 235, 0.24);
box-shadow: var(--shadow-md), var(--shadow-gloss);
}
body.vem-enterprise-dashboard .user-profile:active{
transform: translateY(-1px) scale(0.992);
box-shadow: var(--shadow-sm), var(--shadow-gloss);
}
body.vem-enterprise-dashboard .user-avatar{
position: relative;
z-index: 1;
width: 46px;
height: 46px;
display: grid;
place-items: center;
flex: 0 0 auto;
border-radius: 17px;
color: #ffffff;
font-size: 14px;
font-weight: 800;
letter-spacing: 0.02em;
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.2), transparent 38%),
linear-gradient(145deg, var(--brand), var(--brand-deep));
box-shadow:
0 12px 24px rgba(31, 111, 235, 0.24),
inset 0 1px 0 rgba(255, 255, 255, 0.34);
transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}
body.vem-enterprise-dashboard .user-name{
position: relative;
z-index: 1;
color: var(--ink);
font-size: 14px;
font-weight: 750;
line-height: 1.25;
}
body.vem-enterprise-dashboard .metrics-grid{
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 21px;
margin-bottom: 30px;
}
body.vem-enterprise-dashboard .metrics-grid.dashboard-footer-metrics{
margin-top: 30px;
margin-bottom: 0;
order: 100;
}
body.vem-enterprise-dashboard .main-content{
display: flex;
flex-direction: column;
}
body.vem-enterprise-dashboard .metric{
position: relative;
isolation: isolate;
overflow: hidden;
padding: 23px 25px;
border: 1px solid rgba(255, 255, 255, 0.8);
border-radius: var(--radius-lg);
background:
linear-gradient(135deg, rgba(231, 219, 255, 0.82), rgba(217, 200, 255, 0.42)),
radial-gradient(circle at 0% 0%, rgba(235, 242, 255, 0.92), rgba(225, 235, 255, 0.68) 52%, rgba(230, 240, 255, 0.7));
box-shadow:
0 20px 40px rgba(56, 88, 172, 0.08),
0 4px 12px rgba(0, 0, 0, 0.02),
inset 0 1px 0 rgba(255, 255, 255, 0.95),
inset 0 -1px 0 rgba(56, 88, 172, 0.06);
backdrop-filter: blur(20px) saturate(180%);
transition:
transform var(--transition-float),
box-shadow var(--transition-float),
border-color var(--transition-smooth),
background var(--transition-smooth);
}
body.vem-enterprise-dashboard .metric::before{
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
radial-gradient(circle at 18% 18%, rgba(31, 111, 235, 0.12), transparent 36%),
radial-gradient(circle at 90% 85%, rgba(18, 166, 122, 0.09), transparent 34%);
opacity: 0;
transition: opacity var(--transition-smooth);
}
body.vem-enterprise-dashboard .metric::after{
content: "";
position: absolute;
inset: auto 18px 0;
height: 3px;
border-radius: 999px 999px 0 0;
background: linear-gradient(90deg, var(--brand), var(--accent-2), var(--accent-3));
transform: scaleX(0);
transform-origin: left;
transition: transform 420ms var(--transition-smooth);
}
body.vem-enterprise-dashboard .metric:hover{
transform: translateY(-5px);
border-color: rgba(31, 111, 235, 0.22);
box-shadow: var(--shadow-lg), var(--shadow-gloss);
}
body.vem-enterprise-dashboard .metric:hover::before{
opacity: 1;
}
body.vem-enterprise-dashboard .metric:hover::after{
transform: scaleX(1);
}
body.vem-enterprise-dashboard .metric:active{
transform: translateY(-2px) scale(0.995);
}
body.vem-enterprise-dashboard .metric-label{
color: var(--muted);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.07em;
text-transform: uppercase;
}
body.vem-enterprise-dashboard .metric-value{
margin-top: 13px;
color: var(--ink);
font-size: 35px;
line-height: 1;
font-weight: 780;
letter-spacing: 0;
font-variant-numeric: tabular-nums;
}
body.vem-enterprise-dashboard .cards-grid{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 21px;
margin-bottom: 8px;
}
body.vem-enterprise-dashboard .dashboard-section-nav{
display: flex;
align-items: center;
gap: 9px;
margin: 0 0 28px;
padding: 9px;
overflow-x: auto;
scrollbar-width: thin;
background: rgba(16, 31, 52, 0.92);
border: 1px solid rgba(148, 163, 184, 0.22);
border-radius: 15px;
box-shadow: 0 14px 34px rgba(2, 10, 22, 0.2);
backdrop-filter: blur(16px);
}
body.vem-enterprise-dashboard .dashboard-section-nav a{
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 40px;
padding: 9px 15px;
color: #b8c5d6;
border: 1px solid transparent;
border-radius: 10px;
font-size: 13px;
font-weight: 700;
line-height: 1.2;
text-decoration: none;
white-space: nowrap;
transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}
body.vem-enterprise-dashboard .dashboard-section-nav a:hover, body.vem-enterprise-dashboard .dashboard-section-nav a:focus-visible{
color: #f8fafc;
background: rgba(255, 255, 255, 0.07);
border-color: rgba(148, 163, 184, 0.24);
outline: none;
transform: translateY(-1px);
}
body.vem-enterprise-dashboard .dashboard-section-nav a.active{
color: #062a28;
background: #6ed8cb;
border-color: #8be4da;
box-shadow: 0 8px 20px rgba(45, 212, 191, 0.16);
}
body.vem-enterprise-dashboard .dashboard-section-anchor{
scroll-margin-top: 92px;
}
body.vem-enterprise-dashboard .dashboard-section-anchor + .cards-grid{
margin-bottom: 30px;
}
body.vem-enterprise-dashboard .card{
position: relative;
isolation: isolate;
min-height: 164px;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
padding: 23px 24px;
cursor: pointer;
border: 1px solid rgba(79, 119, 255, 0.28);
border-radius: var(--radius-lg);
background:
linear-gradient(135deg, rgba(231, 219, 255, 0.82), rgba(217, 200, 255, 0.42)),
radial-gradient(circle at 0% 0%, rgba(235, 242, 255, 0.92), rgba(225, 235, 255, 0.68) 52%, rgba(230, 240, 255, 0.7));
box-shadow:
0 20px 40px rgba(56, 88, 172, 0.08),
0 4px 12px rgba(0, 0, 0, 0.02),
inset 0 1px 0 rgba(255, 255, 255, 0.95),
inset 0 -1px 0 rgba(56, 88, 172, 0.06);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
transition:
transform 0.35s cubic-bezier(0.2, 0.9, 0.4, 1.2),
box-shadow 0.4s cubic-bezier(0.2, 0.8, 0.4, 1),
border-color 0.3s ease,
background 0.35s ease;
}
body.vem-enterprise-dashboard .card::before{
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.85) 32%, rgba(255, 255, 255, 0.4) 48%, transparent 62%),
radial-gradient(circle at 20% 15%, rgba(126, 87, 255, 0.22), transparent 48%),
radial-gradient(circle at 85% 88%, rgba(68, 149, 255, 0.15), transparent 45%);
opacity: 0;
transform: translateX(-12%) scale(0.98);
transition:
opacity 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.1),
transform 0.55s cubic-bezier(0.15, 0.85, 0.25, 1.05);
pointer-events: none;
}
body.vem-enterprise-dashboard .card::after{
content: "";
position: absolute;
inset: auto 20px 0;
height: 3px;
border-radius: 999px 999px 0 0;
background: linear-gradient(90deg, #7c5cff, #a77bff, #4da3ff, #7c5cff);
background-size: 200% auto;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.45s cubic-bezier(0.2, 0.95, 0.4, 1.1);
}
body.vem-enterprise-dashboard .card:hover{
transform: translateY(-8px) scale(1.002);
border-color: rgba(124, 92, 255, 0.55);
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.48)),
radial-gradient(circle at 0% 0%, rgba(248, 245, 255, 0.96), rgba(235, 228, 255, 0.78) 52%, rgba(240, 248, 255, 0.8));
box-shadow:
0 28px 56px rgba(91, 73, 156, 0.18),
0 12px 28px rgba(124, 92, 255, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 1),
inset 0 -1px 0 rgba(106, 82, 190, 0.1);
}
body.vem-enterprise-dashboard .card:hover::before{
opacity: 1;
transform: translateX(0) scale(1);
}
body.vem-enterprise-dashboard .card:hover::after{
transform: scaleX(1);
animation: shimmerGradient 1.2s ease infinite;
}
body.vem-enterprise-dashboard .card:active{
transform: translateY(-3px) scale(0.996);
transition: transform 0.08s cubic-bezier(0.3, 0.9, 0.4, 1);
box-shadow:
0 18px 38px rgba(91, 73, 156, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
/* Floating animation on hover background */
body.vem-enterprise-dashboard .card{
animation: cardFloat 6s ease-in-out infinite;
}
body.vem-enterprise-dashboard .card:hover{
animation: none;
}
@keyframes cardFloat{
0%, 100% {
transform: translateY(0px);
}
50%{
transform: translateY(-3px);
}
}
@keyframes shimmerGradient{
0% {
background-position: 0% 50%;
}
50%{
background-position: 100% 50%;
}
100%{
background-position: 200% 50%;
}
}
/* Enhanced Card Icon */
body.vem-enterprise-dashboard .card-icon{
position: relative;
width: 52px;
height: 52px;
display: grid;
place-items: center;
margin-bottom: 20px;
border: 1px solid rgba(124, 92, 255, 0.25);
border-radius: 18px;
color: #5c43d6;
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(239, 234, 255, 0.68)),
linear-gradient(135deg, rgba(246, 242, 255, 0.8), rgba(240, 234, 255, 0.5));
box-shadow:
0 14px 26px rgba(91, 73, 156, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.96),
inset 0 -1px 0 rgba(106, 82, 190, 0.06);
transition:
transform 0.35s cubic-bezier(0.2, 0.9, 0.4, 1.2),
box-shadow 0.35s cubic-bezier(0.2, 0.8, 0.4, 1),
border-color 0.3s ease,
color 0.25s ease;
}
body.vem-enterprise-dashboard .card:hover .card-icon{
transform: translateY(-3px) scale(1.05);
color: #4f38c5;
border-color: rgba(124, 92, 255, 0.45);
box-shadow:
0 20px 32px rgba(91, 73, 156, 0.16),
inset 0 1px 0 rgba(255, 255, 255, 1),
inset 0 -1px 0 rgba(106, 82, 190, 0.1);
}
body.vem-enterprise-dashboard .card:active .card-icon{
transform: translateY(-1px) scale(1.02);
transition: transform 0.06s;
}
/* Icon SVG enhancement */
body.vem-enterprise-dashboard .card-icon svg{
width: 25px;
height: 25px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
transition: stroke-width 0.2s ease, transform 0.3s ease;
}
body.vem-enterprise-dashboard .card:hover .card-icon svg{
stroke-width: 1.9;
transform: scale(1.02);
}
/* Title styling with gradient on hover */
body.vem-enterprise-dashboard .card-title{
display: block;
margin-bottom: 8px;
color: #201a35;
font-size: 16px;
font-weight: 700;
line-height: 1.32;
letter-spacing: -0.2px;
transition: color 0.25s ease, background 0.3s ease;
}
body.vem-enterprise-dashboard .card:hover .card-title{
background: linear-gradient(135deg, #5c43d6, #7c5cff);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* Subtitle enhancement */
body.vem-enterprise-dashboard .card-sub{
display: block;
color: #685f82;
font-size: 13px;
line-height: 1.55;
font-weight: 470;
transition: color 0.25s ease;
}
body.vem-enterprise-dashboard .card:hover .card-sub{
color: #534b6e;
}
body.vem-enterprise-dashboard .card-badge{
position: absolute;
top: 16px;
right: 16px;
z-index: 2;
min-width: 24px;
height: 24px;
padding: 0 7px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 2px solid rgba(255, 255, 255, 0.92);
border-radius: 999px;
color: #ffffff;
background: linear-gradient(135deg, #ef4444, #dc2626);
box-shadow: 0 10px 22px rgba(220, 38, 38, 0.28);
font-size: 12px;
font-weight: 800;
line-height: 1;
font-variant-numeric: tabular-nums;
}
/* Ripple effect on click */
body.vem-enterprise-dashboard .card{
position: relative;
overflow: hidden;
}
body.vem-enterprise-dashboard .card .ripple{
position: absolute;
border-radius: 50%;
background: radial-gradient(circle, rgba(124, 92, 255, 0.2), rgba(124, 92, 255, 0.05));
transform: scale(0);
animation: rippleAnimation 0.6s ease-out;
pointer-events: none;
}
@keyframes rippleAnimation{
to {
transform: scale(4);
opacity: 0;
}
}
/* Additional glow effect on hover */
body.vem-enterprise-dashboard .card:hover{
position: relative;
}
body.vem-enterprise-dashboard .card:hover::after{
box-shadow: 0 0 12px rgba(124, 92, 255, 0.3);
}
/* Optional: Add a subtle border glow animation */
@keyframes borderPulse{
0%, 100% {
border-color: rgba(146, 119, 255, 0.28);
}
50%{
border-color: rgba(146, 119, 255, 0.42);
}
}
/* Enhanced focus state for accessibility */
body.vem-enterprise-dashboard .card:focus-visible{
outline: 2px solid #7c5cff;
outline-offset: 2px;
transform: translateY(-2px);
}
/* Optional: Add a shine effect that follows mouse */
body.vem-enterprise-dashboard .card{
--mouse-x: 50%;
--mouse-y: 50%;
}
body.vem-enterprise-dashboard .card::before{
background:
radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 255, 255, 0.6), transparent 50%),
linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.85) 32%, rgba(255, 255, 255, 0.4) 48%, transparent 62%);
}
body.vem-enterprise-dashboard .chart-range-bar{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin-top: 24px;
padding: 12px 16px;
border: 1px solid rgba(255, 255, 255, 0.82);
border-radius: var(--radius-md);
background: rgba(255, 255, 255, 0.25);
}
body.vem-enterprise-dashboard .chart-range-bar label{
color: var(--muted);
font-size: 12px;
font-weight: 750;
}
body.vem-enterprise-dashboard .chart-range-bar select,
body.vem-enterprise-dashboard .chart-range-bar input[type="date"]{
min-height: 38px;
padding: 8px 10px;
border: 1px solid rgba(85, 111, 145, 0.18);
border-radius: 10px;
color: var(--ink);
background: rgba(255, 255, 255, 0.92);
font: inherit;
font-size: 13px;
outline: none;
}
body.vem-enterprise-dashboard .chart-range-custom{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
/* This page never defines a generic .hidden class (it only exists
page-scoped elsewhere), so toggling that class on this element did
nothing — it stayed visible via the display:flex rule above
regardless of the JS toggle. */
body.vem-enterprise-dashboard .chart-range-custom.hidden{
display: none;
}
body.vem-enterprise-dashboard .chart-range-sep{
color: var(--muted);
font-size: 12px;
}
body.vem-enterprise-dashboard .charts-container{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin-top: 32px;
}
body.vem-enterprise-dashboard .chart-card{
position: relative;
isolation: isolate;
overflow: hidden;
padding: 25px 26px;
border: 1px solid rgba(255, 255, 255, 0.82);
border-radius: var(--radius-lg);
background:
linear-gradient(135deg, rgba(231, 219, 255, 0.82), rgba(217, 200, 255, 0.42)),
radial-gradient(circle at 0% 0%, rgba(235, 242, 255, 0.92), rgba(225, 235, 255, 0.68) 52%, rgba(230, 240, 255, 0.7));
box-shadow:
0 20px 40px rgba(56, 88, 172, 0.08),
0 4px 12px rgba(0, 0, 0, 0.02),
inset 0 1px 0 rgba(255, 255, 255, 0.95),
inset 0 -1px 0 rgba(56, 88, 172, 0.06);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(18px) saturate(145%);
transition:
transform var(--transition-float),
box-shadow var(--transition-float),
border-color var(--transition-smooth);
}
body.vem-enterprise-dashboard .chart-card::before{
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
radial-gradient(circle at 16% 18%, rgba(31, 111, 235, 0.1), transparent 34%),
radial-gradient(circle at 92% 86%, rgba(119, 98, 227, 0.07), transparent 36%);
opacity: 0;
transition: opacity var(--transition-smooth);
}
body.vem-enterprise-dashboard .chart-card:hover{
transform: translateY(-4px);
border-color: rgba(31, 111, 235, 0.2);
box-shadow: var(--shadow-lg), var(--shadow-gloss);
}
body.vem-enterprise-dashboard .chart-card:hover::before{
opacity: 1;
}
body.vem-enterprise-dashboard .card-header{
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-bottom: 22px;
flex-wrap: wrap;
}
body.vem-enterprise-dashboard .card-header h3{
margin: 0;
color: var(--ink);
font-size: 17px;
line-height: 1.3;
font-weight: 760;
}
body.vem-enterprise-dashboard .card-header p{
margin: 6px 0 0;
color: var(--muted);
font-size: 13px;
line-height: 1.5;
font-weight: 470;
}
body.vem-enterprise-dashboard .chart-chip{
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 32px;
padding: 8px 14px;
border: 1px solid rgba(31, 111, 235, 0.14);
border-radius: 999px;
color: var(--brand-deep);
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(232, 241, 255, 0.88));
box-shadow: var(--shadow-xs), inset 0 1px 0 rgba(255, 255, 255, 0.95);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
white-space: nowrap;
transition:
transform var(--transition-smooth),
box-shadow var(--transition-smooth),
border-color var(--transition-smooth);
}
body.vem-enterprise-dashboard .chart-chip:hover{
transform: translateY(-2px);
border-color: rgba(31, 111, 235, 0.25);
box-shadow: var(--shadow-brand), inset 0 1px 0 rgba(255, 255, 255, 0.98);
}
body.vem-enterprise-dashboard .chart-chip:active{
transform: translateY(0) scale(0.98);
}
body.vem-enterprise-dashboard .chart-filters{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin-bottom: 16px;
}
body.vem-enterprise-dashboard .chart-filters label,
body.vem-enterprise-dashboard .chart-filters .user-multiselect{
display: grid;
gap: 6px;
color: var(--muted);
font-size: 12px;
font-weight: 750;
}
body.vem-enterprise-dashboard .chart-filters select,
body.vem-enterprise-dashboard .chart-filters .user-multiselect-trigger{
width: 100%;
min-height: 38px;
padding: 8px 10px;
border: 1px solid rgba(85, 111, 145, 0.18);
border-radius: 10px;
color: var(--ink);
background: rgba(255, 255, 255, 0.88);
font: inherit;
font-size: 13px;
outline: none;
}
body.vem-enterprise-dashboard .chart-filters select:focus,
body.vem-enterprise-dashboard .chart-filters .user-multiselect-trigger:focus{
border-color: rgba(31, 111, 235, 0.42);
box-shadow: 0 0 0 3px rgba(31, 111, 235, 0.12);
}
body.vem-enterprise-dashboard .chart-filters select[multiple]{
min-height: 96px;
}
body.vem-enterprise-dashboard .chart-project-checklist{
max-height: 126px;
overflow-y: auto;
display: grid;
gap: 8px;
padding: 9px;
border: 1px solid rgba(85, 111, 145, 0.18);
border-radius: 10px;
background: rgba(255, 255, 255, 0.72);
}
body.vem-enterprise-dashboard .chart-project-option{
display: flex;
align-items: center;
gap: 8px;
color: var(--ink);
font-size: 13px;
font-weight: 600;
}
body.vem-enterprise-dashboard .chart-project-option input{
width: 15px;
height: 15px;
accent-color: var(--brand);
}
body.vem-enterprise-dashboard .chart-shell{
height: 300px;
padding: 16px;
border: 1px solid rgba(85, 111, 145, 0.12);
border-radius: var(--radius-md);
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(247, 250, 255, 0.72));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.92),
inset 0 -1px 0 rgba(85, 111, 145, 0.08);
transition: border-color var(--transition-smooth), box-shadow var(--transition-smooth);
}
body.vem-enterprise-dashboard .chart-card:hover .chart-shell{
border-color: rgba(31, 111, 235, 0.18);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.98),
0 12px 26px rgba(31, 65, 108, 0.08);
}
body.vem-enterprise-dashboard .chart-shell canvas{
width: 100% !important;
height: 100% !important;
}
body.vem-enterprise-dashboard .pie-shell{
min-height: 300px;
display: grid;
grid-template-columns: 240px 1fr;
align-items: center;
gap: 24px;
padding: 16px;
border: 1px solid rgba(85, 111, 145, 0.12);
border-radius: var(--radius-md);
background:
linear-gradient(135deg, rgba(231, 219, 255, 0.82), rgba(217, 200, 255, 0.42)),
radial-gradient(circle at 0% 0%, rgba(235, 242, 255, 0.92), rgba(225, 235, 255, 0.68) 52%, rgba(230, 240, 255, 0.7));
box-shadow:
0 20px 40px rgba(56, 88, 172, 0.08),
0 4px 12px rgba(0, 0, 0, 0.02),
inset 0 1px 0 rgba(255, 255, 255, 0.95),
inset 0 -1px 0 rgba(56, 88, 172, 0.06);
backdrop-filter: blur(20px) saturate(180%);
}
body.vem-enterprise-dashboard .pie-canvas-wrap{
width: 220px;
height: 220px;
display: grid;
place-items: center;
margin: 0 auto;
border-radius: 50%;
background:
radial-gradient(circle, rgba(255, 255, 255, 0.9), rgba(237, 244, 255, 0.42) 66%, transparent 67%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.94);
}
body.vem-enterprise-dashboard canvas#projectsPieChart, body.vem-enterprise-dashboard canvas#userProjectsPieChart{
max-width: 210px;
max-height: 210px;
transition: transform var(--transition-smooth), filter var(--transition-smooth);
}
body.vem-enterprise-dashboard canvas#projectsPieChart:hover, body.vem-enterprise-dashboard canvas#userProjectsPieChart:hover{
transform: scale(1.035);
filter: drop-shadow(0 14px 24px rgba(31, 65, 108, 0.14));
}
body.vem-enterprise-dashboard #pieLegend, body.vem-enterprise-dashboard #userPieLegend{
display: flex;
flex-direction: column;
gap: 10px;
max-height: 260px;
overflow-y: auto;
padding-right: 8px;
scrollbar-width: thin;
scrollbar-color: rgba(31, 111, 235, 0.55) rgba(85, 111, 145, 0.08);
}
body.vem-enterprise-dashboard #pieLegend::-webkit-scrollbar, body.vem-enterprise-dashboard #userPieLegend::-webkit-scrollbar{
width: 6px;
}
body.vem-enterprise-dashboard #pieLegend::-webkit-scrollbar-track, body.vem-enterprise-dashboard #userPieLegend::-webkit-scrollbar-track{
border-radius: 99px;
background: rgba(85, 111, 145, 0.08);
}
body.vem-enterprise-dashboard #pieLegend::-webkit-scrollbar-thumb, body.vem-enterprise-dashboard #userPieLegend::-webkit-scrollbar-thumb{
border-radius: 99px;
background: linear-gradient(180deg, var(--brand), var(--accent-1));
}
body.vem-enterprise-dashboard .pie-legend-item{
display: grid;
grid-template-columns: 12px minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
padding: 10px 14px;
cursor: pointer;
border: 1px solid rgba(85, 111, 145, 0.1);
border-radius: var(--radius-md);
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(246, 250, 255, 0.76));
box-shadow: var(--shadow-xs), inset 0 1px 0 rgba(255, 255, 255, 0.92);
transition:
transform var(--transition-smooth),
box-shadow var(--transition-smooth),
border-color var(--transition-smooth),
background var(--transition-smooth);
}
body.vem-enterprise-dashboard .pie-legend-item:hover{
transform: translateX(5px);
border-color: rgba(31, 111, 235, 0.2);
background:
linear-gradient(145deg, rgba(255, 255, 255, 1), rgba(239, 246, 255, 0.86));
box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.98);
}
body.vem-enterprise-dashboard .pie-legend-item:active{
transform: translateX(2px) scale(0.992);
}
body.vem-enterprise-dashboard .pie-legend-color{
width: 12px;
height: 12px;
border-radius: 4px;
box-shadow:
0 4px 10px rgba(31, 65, 108, 0.14),
inset 0 1px 0 rgba(255, 255, 255, 0.42);
transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
body.vem-enterprise-dashboard .pie-legend-item:hover .pie-legend-color{
transform: scale(1.16);
box-shadow:
0 7px 16px rgba(31, 65, 108, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
body.vem-enterprise-dashboard .pie-legend-name{
overflow: hidden;
color: var(--ink);
font-size: 12px;
font-weight: 650;
text-overflow: ellipsis;
white-space: nowrap;
}
body.vem-enterprise-dashboard .pie-legend-value{
color: var(--brand-deep);
font-size: 12px;
font-weight: 800;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
body.vem-enterprise-dashboard .chart-empty{
height: 100%;
display: grid;
place-items: center;
color: var(--muted-light);
font-size: 13px;
font-weight: 520;
line-height: 1.5;
text-align: center;
}
body.vem-enterprise-dashboard .panel-glass{
border: 1px solid rgba(255, 255, 255, 0.76);
background: rgba(255, 255, 255, 0.72);
box-shadow: var(--shadow-sm), var(--shadow-gloss);
backdrop-filter: blur(18px) saturate(145%);
-webkit-backdrop-filter: blur(18px) saturate(145%);
}
body.vem-enterprise-dashboard .card, body.vem-enterprise-dashboard .metric, body.vem-enterprise-dashboard .chart-card, body.vem-enterprise-dashboard .user-profile{
will-change: transform;
}
body.vem-enterprise-dashboard .card:focus-visible, body.vem-enterprise-dashboard .metric:focus-visible, body.vem-enterprise-dashboard .chart-chip:focus-visible, body.vem-enterprise-dashboard .user-profile:focus-visible, body.vem-enterprise-dashboard .pie-legend-item:focus-visible{
outline: 3px solid rgba(31, 111, 235, 0.22);
outline-offset: 3px;
}
@keyframes subtlePulse{
0% {
box-shadow: 0 0 0 0 rgba(31, 111, 235, 0.22);
}
70%{
box-shadow: 0 0 0 8px rgba(31, 111, 235, 0);
}
100%{
box-shadow: 0 0 0 0 rgba(31, 111, 235, 0);
}
}
body.vem-enterprise-dashboard .card.card-locked{
cursor: pointer;
width: 100%;
font: inherit;
text-align: left;
filter: grayscale(.86);
opacity: .7;
border-color: #8090a5;
background: #c8d0da;
}
body.vem-enterprise-dashboard .card.card-locked:hover, body.vem-enterprise-dashboard .card.card-locked:focus-visible{
opacity: .9;
transform: translateY(-2px);
border-color: #73849a;
}
body.vem-enterprise-dashboard .card-lock{
position: absolute;
top: 16px;
right: 16px;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 9px;
border-radius: 999px;
color: #334155;
background: rgba(241,245,249,.94);
font-size: 11px;
font-weight: 800;
letter-spacing: .03em;
}
body.vem-enterprise-dashboard .upgrade-overlay{
position: fixed;
inset: 0;
z-index: 1500;
display: none;
place-items: center;
padding: 20px;
background: rgba(6,17,32,.72);
}
body.vem-enterprise-dashboard .upgrade-overlay.open{ display: grid; }
body.vem-enterprise-dashboard .upgrade-dialog{
width: min(440px,100%);
padding: 28px;
border: 1px solid #52657e;
border-radius: 20px;
color: #17253a;
background: #e3e9f0;
box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
body.vem-enterprise-dashboard .upgrade-dialog h2{ margin: 0 0 8px; font-size: 24px; }
body.vem-enterprise-dashboard .upgrade-dialog p{ margin: 0 0 22px; color: #53657d; line-height: 1.6; }
body.vem-enterprise-dashboard .upgrade-actions{ display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
body.vem-enterprise-dashboard .upgrade-actions a, body.vem-enterprise-dashboard .upgrade-actions button{ padding: 11px 16px; border: 0; border-radius: 10px; font: inherit; font-weight: 750; cursor: pointer; }
body.vem-enterprise-dashboard .upgrade-actions button{ color: #27364a; background: #cbd5e1; }
body.vem-enterprise-dashboard .upgrade-actions a{ color: #fff; background: #2557b7; text-decoration: none; }
@media (max-width: 1200px){
body.vem-enterprise-dashboard .charts-container {
grid-template-columns: 1fr;
}
}
@media (max-width: 880px){
body.vem-enterprise-dashboard .main-content {
margin-left: 72px;
padding: 22px 24px 34px;
}
body.vem-enterprise-dashboard .top-bar{
align-items: stretch;
flex-direction: column;
gap: 18px;
}
body.vem-enterprise-dashboard .page-title{
font-size: 29px;
}
body.vem-enterprise-dashboard .user-profile{
width: 100%;
min-width: auto;
}
body.vem-enterprise-dashboard .metrics-grid{
grid-template-columns: 1fr;
gap: 16px;
}
body.vem-enterprise-dashboard .dashboard-section-nav{
margin-bottom: 22px;
}
body.vem-enterprise-dashboard .cards-grid{
grid-template-columns: 1fr;
gap: 16px;
}
body.vem-enterprise-dashboard .pie-shell{
grid-template-columns: 1fr;
justify-items: center;
gap: 20px;
}
body.vem-enterprise-dashboard #pieLegend, body.vem-enterprise-dashboard #userPieLegend{
width: 100%;
max-height: 210px;
}
body.vem-enterprise-dashboard .metric-value{
font-size: 29px;
}
}
@media (max-width: 520px){
body.vem-enterprise-dashboard .main-content {
margin-left: 0;
padding: 20px 16px 30px;
}
body.vem-enterprise-dashboard .page-title{
font-size: 26px;
}
body.vem-enterprise-dashboard .dashboard-section-nav{
margin-inline: -4px;
padding: 7px;
border-radius: 12px;
}
body.vem-enterprise-dashboard .dashboard-section-nav a{
min-height: 38px;
padding: 8px 12px;
font-size: 12px;
}
body.vem-enterprise-dashboard .page-subtitle{
font-size: 13px;
}
body.vem-enterprise-dashboard .metric, body.vem-enterprise-dashboard .card, body.vem-enterprise-dashboard .chart-card{
border-radius: 18px;
padding: 20px;
}
body.vem-enterprise-dashboard .chart-shell{
height: 260px;
}
body.vem-enterprise-dashboard .pie-canvas-wrap{
width: 200px;
height: 200px;
}
body.vem-enterprise-dashboard canvas#projectsPieChart, body.vem-enterprise-dashboard canvas#userProjectsPieChart{
max-width: 190px;
max-height: 190px;
}
}
@media (prefers-reduced-motion: reduce){
body.vem-enterprise-dashboard *,
body.vem-enterprise-dashboard *::before,
body.vem-enterprise-dashboard *::after {
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: 1ms !important;
}
}
/* Locked Enterprise Dashboard Restoration -----------------------------
This `body.vem-enterprise-dashboard` selector is MORE specific than the
plain `.vem-enterprise-dashboard` class rule in vem-theme.css (one class
+ one element beats one class alone), so this is the block that was
actually winning and freezing every dashboard card to a fixed light
palette on every theme — text inside kept using the properly
theme-reactive --ink (near-white under Dark/Deep Blue Sea), producing
invisible text on a card that never actually changed with the theme.
Aliased to the universal tokens so this "locked" look now locks onto
whichever theme is active, instead of one hardcoded palette; fallbacks
keep Basic/Enterprise pixel-identical to before. */
body.vem-enterprise-dashboard {
--enterprise-canvas: var(--bg, #16243a);
--enterprise-surface: var(--panel, #dce5ef);
--enterprise-surface-soft: var(--panel-soft, #d3deea);
--enterprise-ink: var(--ink, #142033);
--enterprise-muted: var(--muted, #64748b);
--enterprise-line: var(--line, #afbdce);
--enterprise-line-strong: var(--line-strong, #8fa2b8);
--enterprise-primary: var(--brand, #2448a8);
--enterprise-primary-deep: var(--brand-deep, #193783);
--enterprise-teal: var(--accent-1, #0f8278);
--enterprise-teal-soft: var(--accent-soft, #e7f5f2);
--enterprise-radius-control: 9px;
--enterprise-radius-card: 13px;
--enterprise-shadow: 0 8px 24px rgba(3, 12, 27, 0.16);
--enterprise-shadow-raised: 0 14px 34px rgba(3, 12, 27, 0.23);
color: var(--enterprise-ink);
background: var(--enterprise-canvas);
}
body.vem-enterprise-dashboard::after {
display: none;
}
body.vem-enterprise-dashboard .main-content {
padding: 30px 34px 42px;
}
body.vem-enterprise-dashboard .top-bar {
margin-bottom: 24px;
padding-bottom: 20px;
border-bottom: 1px solid var(--enterprise-line, #34475f);
}
body.vem-enterprise-dashboard .page-kicker {
margin-bottom: 6px;
color: var(--enterprise-teal, #62c9bd);
font-size: 11px;
letter-spacing: 0.09em;
}
body.vem-enterprise-dashboard .page-kicker::before {
width: 18px;
background: var(--enterprise-teal, #62c9bd);
box-shadow: none;
}
body.vem-enterprise-dashboard .page-title {
color: var(--enterprise-ink, #f7f9fc);
font-size: clamp(29px, 3vw, 36px);
font-weight: 720;
letter-spacing: -0.025em;
}
body.vem-enterprise-dashboard .page-subtitle {
margin-top: 7px;
color: var(--enterprise-muted, #b9c6d8);
font-size: 13px;
}
body.vem-enterprise-dashboard .user-profile {
min-width: 238px;
padding: 9px 14px 9px 9px;
border-color: var(--enterprise-line);
border-radius: var(--enterprise-radius-card);
background: var(--enterprise-surface);
box-shadow: var(--enterprise-shadow);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
body.vem-enterprise-dashboard .user-profile:hover {
transform: translateY(-2px);
border-color: var(--enterprise-line-strong);
box-shadow: var(--enterprise-shadow-raised);
}
body.vem-enterprise-dashboard .user-avatar {
width: 42px;
height: 42px;
border-radius: 10px;
background: linear-gradient(145deg, var(--enterprise-primary), var(--enterprise-primary-deep));
box-shadow: 0 7px 16px rgba(36, 72, 168, 0.2);
}
body.vem-enterprise-dashboard .user-profile::before {
display: none;
}
body.vem-enterprise-dashboard .metrics-grid {
gap: 14px;
margin-bottom: 20px;
}
body.vem-enterprise-dashboard .metric {
padding: 18px 20px;
border-color: var(--enterprise-line);
border-radius: var(--enterprise-radius-card);
background: var(--enterprise-surface);
box-shadow: 0 3px 12px rgba(31, 48, 78, 0.045);
backdrop-filter: none;
}
body.vem-enterprise-dashboard .metric::before {
background: linear-gradient(90deg, rgba(36, 72, 168, 0.045), transparent 72%);
}
body.vem-enterprise-dashboard .metric::after {
inset: 0 auto 0 0;
width: 3px;
height: auto;
border-radius: 0;
background: var(--enterprise-teal);
transform: scaleY(1);
}
body.vem-enterprise-dashboard .metric:hover {
transform: translateY(-2px);
border-color: var(--enterprise-line-strong);
box-shadow: var(--enterprise-shadow);
}
body.vem-enterprise-dashboard .metric-label {
color: var(--enterprise-muted);
font-size: 10px;
letter-spacing: 0.08em;
}
body.vem-enterprise-dashboard .metric-value {
margin-top: 8px;
color: var(--enterprise-primary);
font-size: 30px;
font-weight: 720;
}
body.vem-enterprise-dashboard .cards-grid {
grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
gap: 14px;
}
body.vem-enterprise-dashboard .workspace-section-header {
display: flex;
align-items: center;
gap: 12px;
margin: 2px 0 12px;
color: var(--enterprise-muted, #b9c6d8);
font-size: 10px;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
}
body.vem-enterprise-dashboard .workspace-section-header i {
height: 1px;
flex: 1;
background: var(--enterprise-line, #34475f);
}
/* Favourites panel — this page never used .panel/.panel-header/.btn/
.empty-state before now, so (matching every other page's convention)
they need their own structural rule here; colors still come from the
enterprise theme's global :is(.panel, ...) card treatment. */
body.vem-enterprise-dashboard .panel {
padding: 24px;
margin-bottom: 24px;
border-radius: var(--radius-lg, 16px);
}
body.vem-enterprise-dashboard .panel-header {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 14px;
margin-bottom: 18px;
}
body.vem-enterprise-dashboard .panel-header h2 {
margin: 0;
font-size: 19px;
font-weight: 760;
}
body.vem-enterprise-dashboard .empty-state {
padding: 40px 20px;
text-align: center;
color: var(--muted, #61738b);
border: 1px dashed var(--line, rgba(255, 255, 255, 0.14));
border-radius: var(--radius-md, 10px);
}
body.vem-enterprise-dashboard .btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 40px;
padding: 9px 18px;
border: 1px solid transparent;
border-radius: var(--radius-md, 10px);
cursor: pointer;
font-family: inherit;
font-size: 13px;
font-weight: 750;
letter-spacing: 0.01em;
}
body.vem-enterprise-dashboard .favorites-panel .cards-grid { margin-top: 0; }
body.vem-enterprise-dashboard .btn-small {
min-height: 32px;
padding: 6px 14px;
font-size: 12px;
}
/* My To-Dos — every employee's own pending leave / this-week timesheet
status, regardless of role. Only rendered when there's actually
something to act on, so it never adds empty chrome to the dashboard. */
body.vem-enterprise-dashboard .my-todos-list {
display: grid;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
body.vem-enterprise-dashboard .my-todo-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 14px 16px;
border: 1px solid var(--enterprise-line, #dfe6f2);
border-left-width: 4px;
border-radius: var(--radius-md, 10px);
background: var(--enterprise-surface, #fff);
}
body.vem-enterprise-dashboard .my-todo-item.my-todo-info { border-left-color: #2683ef; }
body.vem-enterprise-dashboard .my-todo-item.my-todo-warning { border-left-color: #d89516; }
body.vem-enterprise-dashboard .my-todo-item.my-todo-success { border-left-color: #16845b; opacity: 0.7; }
body.vem-enterprise-dashboard .my-todo-text { font-weight: 650; color: var(--ink, #13181D); }
body.vem-enterprise-dashboard .my-todo-item .btn-small { flex: 0 0 auto; }
@media (max-width: 640px) {
body.vem-enterprise-dashboard .my-todo-item { flex-direction: column; align-items: stretch; }
}
/* Browse All Features tabs: only the selected category's tile grid is
ever in the flow — .active swaps which one via display, and fades the
newly-shown one in (a CSS *animation*, not transition, since transitions
can't animate the very first frame after display:none -> block). */
body.vem-enterprise-dashboard .browse-group { display: none; }
body.vem-enterprise-dashboard .browse-group.active {
display: grid;
animation: browseGroupFadeIn 220ms ease;
}
@keyframes browseGroupFadeIn {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
body.vem-enterprise-dashboard .browse-group.active { animation: none; }
}
body.vem-enterprise-dashboard .card {
--card-accent: var(--enterprise-primary);
--card-icon-bg: #eef3ff;
--card-icon-border: #cdd9ef;
min-height: 148px;
padding: 19px 20px;
border-color: var(--enterprise-line);
border-radius: var(--enterprise-radius-card);
background: var(--enterprise-surface);
box-shadow: 0 3px 12px rgba(31, 48, 78, 0.045);
backdrop-filter: none;
-webkit-backdrop-filter: none;
animation: none;
transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
body.vem-enterprise-dashboard .card::before {
background: linear-gradient(135deg, rgba(36, 72, 168, 0.045), transparent 58%);
transform: none;
}
body.vem-enterprise-dashboard .card::after {
inset: 0 auto 0 0;
width: 3px;
height: auto;
border-radius: 0;
background: var(--card-accent);
transform: scaleY(0);
transform-origin: bottom;
box-shadow: none;
}
body.vem-enterprise-dashboard .card:hover {
transform: translateY(-3px);
border-color: var(--enterprise-line-strong);
background: var(--enterprise-surface);
box-shadow: var(--enterprise-shadow-raised);
animation: none;
}
body.vem-enterprise-dashboard .card:hover::before {
opacity: 1;
transform: none;
}
body.vem-enterprise-dashboard .card:hover::after {
transform: scaleY(1);
animation: none;
}
body.vem-enterprise-dashboard .card-icon {
width: 43px;
height: 43px;
margin-bottom: 15px;
border-color: var(--card-icon-border);
border-radius: 10px;
color: var(--card-accent);
background: var(--card-icon-bg);
box-shadow: none;
}
body.vem-enterprise-dashboard .card:hover .card-icon {
transform: translateY(-1px);
color: var(--card-accent);
border-color: var(--card-accent);
box-shadow: none;
}
body.vem-enterprise-dashboard .card-title {
margin-bottom: 5px;
color: var(--enterprise-ink);
font-size: 15px;
font-weight: 720;
}
body.vem-enterprise-dashboard .card:hover .card-title {
color: var(--card-accent);
background: none;
-webkit-background-clip: initial;
background-clip: initial;
}
body.vem-enterprise-dashboard .card-category-administration {
--card-accent: #2448a8;
--card-icon-bg: #d4def0;
--card-icon-border: #aebfdb;
}
body.vem-enterprise-dashboard .card-category-workforce {
--card-accent: #0f8278;
--card-icon-bg: #d2e5e2;
--card-icon-border: #9fc8c2;
}
body.vem-enterprise-dashboard .card-category-leave {
--card-accent: #7357a8;
--card-icon-bg: #e1dbea;
--card-icon-border: #bfb0d7;
}
body.vem-enterprise-dashboard .card-category-finance {
--card-accent: #a86213;
--card-icon-bg: #eadfce;
--card-icon-border: #d6b98f;
}
body.vem-enterprise-dashboard .card-category-analytics {
--card-accent: #2c6f91;
--card-icon-bg: #d4e3e9;
--card-icon-border: #aac9d5;
}
body.vem-enterprise-dashboard .card-sub {
color: var(--enterprise-muted);
font-size: 12px;
line-height: 1.45;
}
body.vem-enterprise-dashboard .card-badge {
top: 13px;
right: 13px;
border-width: 1px;
background: #c9363e;
box-shadow: none;
}
/* Star shown on Browse All Features tiles already in the user's
Favourites, so the two sections read as connected rather than
duplicated. Top-left, since badge/lock already own the top-right. */
body.vem-enterprise-dashboard .card-favorited {
position: absolute;
top: 13px;
left: 13px;
color: var(--vem-accent, #e7bf04);
font-size: 16px;
line-height: 1;
}
body.vem-enterprise-dashboard .charts-container {
gap: 16px;
margin-top: 22px;
}
body.vem-enterprise-dashboard .chart-card {
border-color: var(--enterprise-line);
border-radius: var(--enterprise-radius-card);
background: var(--enterprise-surface);
box-shadow: var(--enterprise-shadow);
backdrop-filter: none;
}
body.vem-enterprise-dashboard .chart-card:hover {
transform: translateY(-2px);
border-color: var(--enterprise-line-strong);
box-shadow: var(--enterprise-shadow-raised);
}
body.vem-enterprise-dashboard .chart-chip {
border-radius: 7px;
color: var(--enterprise-teal);
background: var(--enterprise-teal-soft);
}
body.vem-enterprise-dashboard .chart-filters select,
body.vem-enterprise-dashboard .chart-filters .user-multiselect-trigger {
border-radius: var(--enterprise-radius-control);
border-color: var(--enterprise-line);
background: var(--enterprise-surface-soft);
}
body.vem-enterprise-dashboard .chart-shell,
body.vem-enterprise-dashboard .pie-shell {
border-color: var(--enterprise-line-strong, #9eafc2);
background: var(--enterprise-surface-soft, #d3deea);
color: var(--enterprise-ink);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
body.vem-enterprise-dashboard .chart-card:hover .chart-shell {
border-color: var(--enterprise-line-strong, #8499b0);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 10px 22px rgba(3, 12, 27, 0.12);
}
body.vem-enterprise-dashboard .pie-canvas-wrap {
background: radial-gradient(circle, rgba(239, 244, 249, 0.72), rgba(202, 215, 229, 0.42) 66%, transparent 67%);
box-shadow: none;
}
body.vem-enterprise-dashboard .pie-legend-item {
border-color: var(--enterprise-line-strong, #a9b8c8);
background: var(--enterprise-surface, #d8e2ec);
color: var(--enterprise-ink);
box-shadow: none;
}
body.vem-enterprise-dashboard .pie-legend-item:hover {
border-color: var(--enterprise-line-strong, #879bb2);
background: var(--enterprise-surface-soft, #e0e8f0);
box-shadow: 0 7px 16px rgba(3, 12, 27, 0.1);
}
@media (max-width: 760px) {
body.vem-enterprise-dashboard .main-content {
padding: 22px 16px 34px;
}
body.vem-enterprise-dashboard .top-bar {
align-items: flex-start;
}
body.vem-enterprise-dashboard .user-profile {
width: 100%;
}
}
/* Manage Holidays ----------------------------------------------------- */
body.vem-page-manage-holidays{
--success-text: #16845b;
--danger-text: #b91c1c;
--warning-text: #c7771d;
}
body.vem-page-manage-holidays{
font-family: "Segoe UI Variable", "Segoe UI", Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
min-height: 100vh;
height: 100vh;
margin: 0;
overflow: hidden;
color: var(--ink);
background:
radial-gradient(circle at 12% 14%, rgba(124, 58, 237, 0.05), transparent 34%),
radial-gradient(circle at 86% 18%, rgba(79, 70, 229, 0.08), transparent 32%),
radial-gradient(circle at 72% 88%, rgba(147, 51, 234, 0.06), transparent 36%),
linear-gradient(135deg, #e7dbff 0%, #a9a4ff 38%, #c1bdff 65%, #d9d7ff 100%);
overflow-x: hidden;
overflow-y: auto;
text-rendering: geometricPrecision;
-webkit-font-smoothing: antialiased;
}
body.vem-page-manage-holidays::after{
content: "";
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background:
linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.34) 42%, transparent 68%),
linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(214, 199, 255, 0.22));
opacity: 0.92;
}
body.vem-page-manage-holidays::before{
content: '';
position: fixed;
inset: 0;
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.02'/%3E%3C/svg%3E");
opacity: 0.15;
z-index: -1;
}
body.vem-page-manage-holidays .app{
display: flex;
min-height: 100vh;
height: 100vh;
overflow: hidden;
}
body.vem-page-manage-holidays .main-content{
flex: 1;
margin-left: 270px;
padding: 28px 31px 37.5px;
overflow-y: auto;
overflow-x: auto;
height: 100vh;
animation: pageRise 520ms var(--transition-smooth) both;
}
@keyframes pageRise{
from {
opacity: 0;
transform: translateY(14px) scale(0.995);
}
to{
opacity: 1;
transform: translateY(0) scale(1);
}
}
body.vem-page-manage-holidays .top-bar{
display: flex;
justify-content: space-between;
align-items: center;
gap: 18px;
margin-bottom: 23px;
flex-wrap: wrap;
}
body.vem-page-manage-holidays .page-kicker{
display: inline-flex;
align-items: center;
gap: 6.5px;
margin: 0 0 5px;
color: var(--brand);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.11em;
text-transform: uppercase;
}
body.vem-page-manage-holidays .page-kicker::before{
content: "";
width: 22px;
height: 2px;
border-radius: 81px;
background: linear-gradient(90deg, var(--brand), var(--accent-2));
box-shadow: 0 0 16px rgba(31, 111, 235, 0.25);
}
body.vem-page-manage-holidays .page-title{
margin: 0;
color: var(--ink);
font-size: 24.5px;
line-height: 1.14;
font-weight: 760;
letter-spacing: 0;
}
body.vem-page-manage-holidays .page-subtitle{
max-width: 760px;
margin: 6.5px 0 0;
color: var(--muted);
font-size: 12px;
line-height: 1.6;
font-weight: 450;
}
body.vem-page-manage-holidays .user-profile{
position: relative;
min-width: 230px;
display: flex;
align-items: center;
gap: 10px;
padding: 8px 11.5px 8px 8px;
overflow: hidden;
cursor: pointer;
border: 1px solid rgba(255, 255, 255, 0.78);
border-radius: var(--radius-xl);
background:
linear-gradient(135deg, rgba(231, 219, 255, 0.82), rgba(217, 200, 255, 0.42)),
radial-gradient(circle at 0% 0%, rgba(235, 242, 255, 0.92), rgba(225, 235, 255, 0.68) 52%, rgba(230, 240, 255, 0.7));
box-shadow: 0 20px 40px rgba(56, 88, 172, 0.08);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(18px) saturate(150%);
transition:
transform var(--transition-float),
box-shadow var(--transition-float),
border-color var(--transition-smooth);
}
body.vem-page-manage-holidays .user-profile:hover{
transform: translateY(-4px);
border-color: rgba(31, 111, 235, 0.24);
box-shadow: var(--shadow-md);
}
body.vem-page-manage-holidays .user-profile:active{
transform: translateY(-1px) scale(0.992);
box-shadow: var(--shadow-sm);
}
body.vem-page-manage-holidays .user-avatar{
position: relative;
z-index: 1;
width: 44px;
height: 44px;
display: grid;
place-items: center;
flex: 0 0 auto;
border-radius: 14px;
color: #ffffff;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.02em;
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.2), transparent 38%),
linear-gradient(145deg, var(--brand), var(--brand-deep));
box-shadow:
0 12px 24px rgba(31, 111, 235, 0.24),
inset 0 1px 0 rgba(255, 255, 255, 0.34);
transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}
body.vem-page-manage-holidays .user-name{
position: relative;
z-index: 1;
color: var(--ink);
font-size: 12px;
font-weight: 750;
line-height: 1.25;
}
/* Clean rounded panel and modal corners */
body.vem-page-manage-holidays .panel, body.vem-page-manage-holidays .modal{
overflow: visible;
box-shadow: 0 20px 40px rgba(56, 88, 172, 0.08);
}
body.vem-page-manage-holidays .panel{
position: relative;
isolation: isolate;
padding: 19.5px;
border: 1px solid rgba(255, 255, 255, 0.82);
border-radius: var(--radius-lg);
background:
linear-gradient(135deg, rgba(231, 219, 255, 0.82), rgba(217, 200, 255, 0.42)),
radial-gradient(circle at 0% 0%, rgba(235, 242, 255, 0.92), rgba(225, 235, 255, 0.68) 52%, rgba(230, 240, 255, 0.7));
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(18px) saturate(145%);
transition:
transform var(--transition-float),
box-shadow var(--transition-float),
border-color var(--transition-smooth);
}
body.vem-page-manage-holidays .alert{
margin-bottom: 15px;
padding: 11.5px 15px;
border-radius: var(--radius-md);
font-size: 12px;
font-weight: 650;
backdrop-filter: blur(8px);
border: 1px solid transparent;
}
body.vem-page-manage-holidays .alert-error{
background: linear-gradient(135deg, rgba(254, 242, 242, 0.96), rgba(252, 228, 228, 0.9));
border-color: rgba(185, 28, 28, 0.28);
color: var(--danger-text);
}
body.vem-page-manage-holidays .alert-success{
background: linear-gradient(135deg, rgba(230, 247, 240, 0.96), rgba(214, 242, 230, 0.9));
border-color: rgba(22, 132, 91, 0.28);
color: var(--success-text);
}
body.vem-page-manage-holidays .panel-header{
display: flex;
justify-content: space-between;
align-items: center;
gap: 13px;
margin-bottom: 16.5px;
}
body.vem-page-manage-holidays .panel-header h2{
margin: 0;
color: var(--ink);
font-size: 16.5px;
font-weight: 760;
}
body.vem-page-manage-holidays .panel-actions{
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
body.vem-page-manage-holidays select, body.vem-page-manage-holidays input, body.vem-page-manage-holidays textarea{
font-family: inherit;
}
body.vem-page-manage-holidays .year-select{
min-height: 40px;
padding: 6.5px 11.5px;
border: 1px solid rgba(85, 111, 145, 0.24);
border-radius: var(--radius-md);
background: rgba(255, 255, 255, 0.88);
color: var(--ink);
font-size: 12px;
font-weight: 500;
outline: none;
transition: all var(--transition-fast);
}
body.vem-page-manage-holidays .year-select:focus{
border-color: var(--brand);
box-shadow: 0 0 0 4px var(--brand-glow);
background: var(--panel-solid);
}
body.vem-page-manage-holidays .btn{
position: relative;
min-height: 40px;
padding: 7.5px 16.5px;
border: 1px solid transparent;
border-radius: var(--radius-md);
cursor: pointer;
font-family: inherit;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.02em;
transition: all var(--transition-smooth);
overflow: hidden;
}
body.vem-page-manage-holidays .btn:active{
transform: translateY(-1px) scale(0.98);
}
body.vem-page-manage-holidays .btn-primary{
background: linear-gradient(135deg, var(--brand), var(--brand-deep));
color: #fff;
box-shadow: var(--shadow-xs), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
body.vem-page-manage-holidays .btn-primary:hover{
background: linear-gradient(135deg, var(--brand-deep), #0f4eb5);
transform: translateY(-2px);
box-shadow: var(--shadow-brand);
}
body.vem-page-manage-holidays .btn-edit{
background: linear-gradient(135deg, rgba(31, 111, 235, 0.12), rgba(31, 111, 235, 0.06));
color: var(--brand);
border-color: rgba(31, 111, 235, 0.28);
}
body.vem-page-manage-holidays .btn-edit:hover{
background: linear-gradient(135deg, rgba(31, 111, 235, 0.2), rgba(31, 111, 235, 0.12));
transform: translateY(-2px);
border-color: var(--brand);
}
body.vem-page-manage-holidays .btn-delete{
background: linear-gradient(135deg, rgba(185, 28, 28, 0.12), rgba(185, 28, 28, 0.06));
color: var(--danger-text);
border-color: rgba(185, 28, 28, 0.28);
}
body.vem-page-manage-holidays .btn-delete:hover{
background: linear-gradient(135deg, rgba(185, 28, 28, 0.2), rgba(185, 28, 28, 0.12));
transform: translateY(-2px);
border-color: var(--danger);
}
body.vem-page-manage-holidays .btn-cancel{
background: rgba(255, 255, 255, 0.72);
color: var(--ink-light);
border-color: var(--line);
}
body.vem-page-manage-holidays .btn-cancel:hover{
background: rgba(255, 255, 255, 0.9);
transform: translateY(-2px);
border-color: var(--brand);
box-shadow: var(--shadow-sm);
}
body.vem-page-manage-holidays .table-wrap{
overflow-x: auto;
border-radius: var(--radius-md);
background: rgba(255, 255, 255, 0.4);
padding: 1px;
}
body.vem-page-manage-holidays .holidays-table{
width: 100%;
min-width: 760px;
border-collapse: separate;
border-spacing: 0;
font-size: 12px;
background: rgba(255, 255, 255, 0.6);
border-radius: var(--radius-md);
overflow: hidden;
}
body.vem-page-manage-holidays .holidays-table th{
text-align: left;
padding: 11.5px 10px;
color: var(--ink);
background: rgba(255, 255, 255, 0.72);
border-bottom: 1px solid var(--line);
font-weight: 800;
font-size: 12px;
letter-spacing: 0.04em;
text-transform: uppercase;
}
body.vem-page-manage-holidays .holidays-table td{
padding: 11.5px 10px;
border-bottom: 1px solid var(--line);
background: rgba(255, 255, 255, 0.48);
vertical-align: middle;
transition: background var(--transition-fast);
}
body.vem-page-manage-holidays .holidays-table tr:hover td{
background: rgba(255, 255, 255, 0.72);
}
body.vem-page-manage-holidays .holidays-table td:first-child{
border-left: 1px solid var(--line);
border-radius: var(--radius-md) 0 0 var(--radius-md);
}
body.vem-page-manage-holidays .holidays-table td:last-child{
border-right: 1px solid var(--line);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
body.vem-page-manage-holidays .holiday-name{
font-weight: 800;
color: var(--ink);
}
body.vem-page-manage-holidays .muted{
color: var(--muted);
}
body.vem-page-manage-holidays .row-actions{
display: flex;
gap: 6.5px;
flex-wrap: wrap;
}
body.vem-page-manage-holidays .empty-state{
padding: 44.5px 16.5px;
color: var(--muted);
text-align: center;
font-size: 12px;
font-weight: 600;
}
body.vem-page-manage-holidays .modal-overlay{
position: fixed;
inset: 0;
z-index: 1000;
display: none;
place-items: center;
padding: 16.5px;
background: rgba(15, 23, 42, 0.42);
backdrop-filter: blur(4px);
}
body.vem-page-manage-holidays .modal-overlay.active{
display: grid;
}
body.vem-page-manage-holidays .modal{
width: min(500px, 100%);
overflow: visible;
border: 1px solid rgba(255, 255, 255, 0.82);
border-radius: var(--radius-lg);
background:
linear-gradient(135deg, rgba(231, 219, 255, 0.82), rgba(217, 200, 255, 0.42)),
radial-gradient(circle at 0% 0%, rgba(235, 242, 255, 0.92), rgba(225, 235, 255, 0.68) 52%, rgba(230, 240, 255, 0.7));
backdrop-filter: blur(20px) saturate(180%);
}
body.vem-page-manage-holidays .modal-header, body.vem-page-manage-holidays .modal-footer{
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
padding: 15px 18px;
background: rgba(255, 255, 255, 0.4);
}
body.vem-page-manage-holidays .modal-header{
border-bottom: 1px solid var(--line);
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
body.vem-page-manage-holidays .modal-footer{
justify-content: flex-end;
border-top: 1px solid var(--line);
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
body.vem-page-manage-holidays .modal-header h3{
margin: 0;
font-size: 15px;
font-weight: 760;
color: var(--ink);
}
body.vem-page-manage-holidays .modal-close{
border: 0;
background: transparent;
color: var(--muted);
cursor: pointer;
font-size: 19.5px;
line-height: 1;
transition: color var(--transition-fast);
}
body.vem-page-manage-holidays .modal-close:hover{
color: var(--danger);
}
body.vem-page-manage-holidays .modal-body{
display: grid;
gap: 15px;
padding: 18px;
}
body.vem-page-manage-holidays .form-group{
display: grid;
gap: 6.5px;
}
body.vem-page-manage-holidays .form-group label{
color: var(--ink);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.07em;
text-transform: uppercase;
}
body.vem-page-manage-holidays .form-group input, body.vem-page-manage-holidays .form-group textarea{
width: 100%;
min-height: 44px;
padding: 9px 11.5px;
border: 1px solid rgba(85, 111, 145, 0.24);
border-radius: var(--radius-md);
background: rgba(255, 255, 255, 0.88);
color: var(--ink);
font-family: inherit;
font-size: 12px;
font-weight: 500;
outline: none;
transition: all var(--transition-fast);
}
body.vem-page-manage-holidays .form-group textarea{
min-height: 96px;
resize: vertical;
}
body.vem-page-manage-holidays .form-group input:focus, body.vem-page-manage-holidays .form-group textarea:focus{
border-color: var(--brand);
box-shadow: 0 0 0 4px var(--brand-glow);
background: var(--panel-solid);
}
/* Responsive layout */
@media (max-width: 900px){
body.vem-page-manage-holidays .main-content {
margin-left: 72px;
padding: 19.5px;
}
body.vem-page-manage-holidays .top-bar, body.vem-page-manage-holidays .panel-header{
align-items: stretch;
flex-direction: column;
}
body.vem-page-manage-holidays .panel-actions{
align-items: stretch;
}
}
@media (max-width: 520px){
body.vem-page-manage-holidays .main-content {
margin-left: 0;
padding: 16.5px 13px;
}
body.vem-page-manage-holidays .page-title{
font-size: 19.5px;
}
body.vem-page-manage-holidays .panel-header h2{
font-size: 15px;
}
body.vem-page-manage-holidays .panel{
padding: 15px;
}
}
@media (prefers-reduced-motion: reduce){
body.vem-page-manage-holidays *,
body.vem-page-manage-holidays *::before,
body.vem-page-manage-holidays *::after {
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: 1ms !important;
}
}
/* Manage Users -------------------------------------------------------- */
body.vem-page-manage-users {
--success-text: #16845b;
--danger-text: #b91c1c;
--warning-text: #c7771d;
}
body.vem-page-manage-users {
font-family: "Segoe UI Variable", "Segoe UI", Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
min-height: 100vh;
height: 100vh;
margin: 0;
overflow: hidden;
color: var(--ink);
background:
radial-gradient(circle at 12% 14%, rgba(124, 58, 237, 0.05), transparent 34%),
radial-gradient(circle at 86% 18%, rgba(79, 70, 229, 0.08), transparent 32%),
radial-gradient(circle at 72% 88%, rgba(147, 51, 234, 0.06), transparent 36%),
linear-gradient(135deg, #e7dbff 0%, #a9a4ff 38%, #c1bdff 65%, #d9d7ff 100%);
overflow-x: hidden;
overflow-y: auto;
text-rendering: geometricPrecision;
-webkit-font-smoothing: antialiased;
}
body.vem-page-manage-users::after {
content: "";
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background:
linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.34) 42%, transparent 68%),
linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(214, 199, 255, 0.22));
opacity: 0.92;
}
body.vem-page-manage-users::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.02'/%3E%3C/svg%3E");
opacity: 0.15;
z-index: -1;
}
body.vem-page-manage-users .app {
display: flex;
min-height: 100vh;
height: 100vh;
overflow: hidden;
}
body.vem-page-manage-users .main-content {
flex: 1;
margin-left: 270px;
padding: 28px 31px 37.5px;
overflow-y: auto;
overflow-x: auto;
height: 100vh;
animation: pageRise 520ms var(--transition-smooth) both;
}
@keyframes pageRise {
from {
opacity: 0;
transform: translateY(14px) scale(0.995);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
body.vem-page-manage-users .top-bar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 18px;
margin-bottom: 23px;
flex-wrap: wrap;
}
body.vem-page-manage-users .page-kicker {
display: inline-flex;
align-items: center;
gap: 6.5px;
margin: 0 0 5px;
color: var(--brand);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.11em;
text-transform: uppercase;
}
body.vem-page-manage-users .page-kicker::before {
content: "";
width: 22px;
height: 2px;
border-radius: 81px;
background: linear-gradient(90deg, var(--brand), var(--accent-2));
box-shadow: 0 0 16px rgba(31, 111, 235, 0.25);
}
body.vem-page-manage-users .page-title {
margin: 0;
color: var(--ink);
font-size: 24.5px;
line-height: 1.14;
font-weight: 760;
letter-spacing: 0;
}
body.vem-page-manage-users .page-subtitle {
max-width: 760px;
margin: 6.5px 0 0;
color: var(--muted);
font-size: 12px;
line-height: 1.6;
font-weight: 450;
}
body.vem-page-manage-users .user-profile {
position: relative;
min-width: 230px;
display: flex;
align-items: center;
gap: 10px;
padding: 8px 11.5px 8px 8px;
overflow: hidden;
cursor: pointer;
border: 1px solid rgba(255, 255, 255, 0.78);
border-radius: var(--radius-xl);
background:
linear-gradient(135deg, rgba(231, 219, 255, 0.82), rgba(217, 200, 255, 0.42)),
radial-gradient(circle at 0% 0%, rgba(235, 242, 255, 0.92), rgba(225, 235, 255, 0.68) 52%, rgba(230, 240, 255, 0.7));
box-shadow: 0 20px 40px rgba(56, 88, 172, 0.08);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(18px) saturate(150%);
transition:
transform var(--transition-float),
box-shadow var(--transition-float),
border-color var(--transition-smooth);
}
body.vem-page-manage-users .user-profile:hover {
transform: translateY(-4px);
border-color: rgba(31, 111, 235, 0.24);
box-shadow: var(--shadow-md);
}
body.vem-page-manage-users .user-profile:active {
transform: translateY(-1px) scale(0.992);
box-shadow: var(--shadow-sm);
}
body.vem-page-manage-users .user-avatar {
position: relative;
z-index: 1;
width: 44px;
height: 44px;
display: grid;
place-items: center;
flex: 0 0 auto;
border-radius: 14px;
color: #ffffff;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.02em;
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.2), transparent 38%),
linear-gradient(145deg, var(--brand), var(--brand-deep));
box-shadow:
0 12px 24px rgba(31, 111, 235, 0.24),
inset 0 1px 0 rgba(255, 255, 255, 0.34);
transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}
body.vem-page-manage-users .user-name {
position: relative;
z-index: 1;
color: var(--ink);
font-size: 12px;
font-weight: 750;
line-height: 1.25;
}
body.vem-page-manage-users /* Fix for card corner edge artifacts - ensures clean rounded corners */
.panel,
body.vem-page-manage-users .filters,
body.vem-page-manage-users .modal {
overflow: visible;
box-shadow: 0 20px 40px rgba(56, 88, 172, 0.08);
}
body.vem-page-manage-users .panel {
position: relative;
isolation: isolate;
padding: 19.5px;
border: 1px solid rgba(255, 255, 255, 0.82);
border-radius: var(--radius-lg);
background:
linear-gradient(135deg, rgba(231, 219, 255, 0.82), rgba(217, 200, 255, 0.42)),
radial-gradient(circle at 0% 0%, rgba(235, 242, 255, 0.92), rgba(225, 235, 255, 0.68) 52%, rgba(230, 240, 255, 0.7));
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(18px) saturate(145%);
transition:
transform var(--transition-float),
box-shadow var(--transition-float),
border-color var(--transition-smooth);
}
body.vem-page-manage-users .alert {
margin-bottom: 15px;
padding: 11.5px 15px;
border-radius: var(--radius-md);
font-size: 12px;
font-weight: 650;
backdrop-filter: blur(8px);
border: 1px solid transparent;
}
body.vem-page-manage-users .alert-error {
background: linear-gradient(135deg, rgba(254, 242, 242, 0.96), rgba(252, 228, 228, 0.9));
border-color: rgba(185, 28, 28, 0.28);
color: var(--danger-text);
}
body.vem-page-manage-users .alert-success {
background: linear-gradient(135deg, rgba(230, 247, 240, 0.96), rgba(214, 242, 230, 0.9));
border-color: rgba(22, 132, 91, 0.28);
color: var(--success-text);
}
body.vem-page-manage-users .panel-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 13px;
margin-bottom: 16.5px;
}
body.vem-page-manage-users .panel-header h2 {
margin: 0;
color: var(--ink);
font-size: 16.5px;
font-weight: 760;
}
body.vem-page-manage-users .filters {
display: grid;
grid-template-columns: 2fr 1fr 1fr auto auto;
gap: 10px;
margin-bottom: 16.5px;
padding: 16.5px;
border: 1px solid rgba(255, 255, 255, 0.78);
border-radius: var(--radius-md);
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(248, 250, 255, 0.48)),
radial-gradient(circle at 0% 0%, rgba(235, 242, 255, 0.68), rgba(225, 235, 255, 0.48));
backdrop-filter: blur(16px) saturate(160%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
}
body.vem-page-manage-users label {
display: block;
margin-bottom: 5.5px;
color: var(--ink);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.07em;
text-transform: uppercase;
}
body.vem-page-manage-users input,
body.vem-page-manage-users select,
body.vem-page-manage-users textarea {
width: 100%;
min-height: 42px;
padding: 7.5px 11.5px;
border: 1px solid rgba(85, 111, 145, 0.24);
border-radius: var(--radius-md);
background: rgba(255, 255, 255, 0.88);
color: var(--ink);
font-family: inherit;
font-size: 12px;
font-weight: 500;
outline: none;
transition: all var(--transition-fast);
box-sizing: border-box;
resize: vertical;
}
body.vem-page-manage-users input:focus,
body.vem-page-manage-users select:focus,
body.vem-page-manage-users textarea:focus {
border-color: var(--brand);
box-shadow: 0 0 0 4px var(--brand-glow);
background: var(--panel-solid);
}
body.vem-page-manage-users .hint {
display: block;
margin-top: 5px;
color: var(--muted);
font-size: 11px;
font-weight: 500;
text-transform: none;
letter-spacing: normal;
}
body.vem-page-manage-users .btn {
position: relative;
min-height: 42px;
padding: 7.5px 16.5px;
border: 1px solid transparent;
border-radius: var(--radius-md);
cursor: pointer;
font-family: inherit;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.02em;
text-decoration: none;
display: inline-grid;
place-items: center;
transition: all var(--transition-smooth);
overflow: hidden;
}
body.vem-page-manage-users .btn:active {
transform: translateY(-1px) scale(0.98);
}
body.vem-page-manage-users .btn-primary {
background: linear-gradient(135deg, var(--brand), var(--brand-deep));
color: #fff;
box-shadow: var(--shadow-xs), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
body.vem-page-manage-users .btn-primary:hover {
background: linear-gradient(135deg, var(--brand-deep), #0f4eb5);
transform: translateY(-2px);
box-shadow: var(--shadow-brand);
}
body.vem-page-manage-users .btn-muted {
background: rgba(255, 255, 255, 0.72);
color: var(--ink-light);
border-color: var(--line);
}
body.vem-page-manage-users .btn-muted:hover {
background: rgba(255, 255, 255, 0.9);
transform: translateY(-2px);
border-color: var(--brand);
box-shadow: var(--shadow-sm);
}
body.vem-page-manage-users .btn-edit {
background: linear-gradient(135deg, rgba(31, 111, 235, 0.12), rgba(31, 111, 235, 0.06));
color: var(--brand);
border-color: rgba(31, 111, 235, 0.28);
}
body.vem-page-manage-users .btn-edit:hover {
background: linear-gradient(135deg, rgba(31, 111, 235, 0.2), rgba(31, 111, 235, 0.12));
transform: translateY(-2px);
border-color: var(--brand);
}
body.vem-page-manage-users .btn-delete {
background: linear-gradient(135deg, rgba(185, 28, 28, 0.12), rgba(185, 28, 28, 0.06));
color: var(--danger-text);
border-color: rgba(185, 28, 28, 0.28);
}
body.vem-page-manage-users .btn-delete:hover {
background: linear-gradient(135deg, rgba(185, 28, 28, 0.2), rgba(185, 28, 28, 0.12));
transform: translateY(-2px);
border-color: var(--danger);
}
body.vem-page-manage-users .table-wrap {
overflow-x: auto;
border-radius: var(--radius-md);
background: rgba(255, 255, 255, 0.4);
padding: 1px;
}
body.vem-page-manage-users .user-table {
width: 100%;
min-width: 840px;
border-collapse: separate;
border-spacing: 0;
font-size: 12px;
background: rgba(255, 255, 255, 0.6);
border-radius: var(--radius-md);
overflow: hidden;
}
body.vem-page-manage-users .user-table th {
text-align: left;
padding: 11.5px 10px;
color: var(--ink);
background: rgba(255, 255, 255, 0.72);
border-bottom: 1px solid var(--line);
font-weight: 800;
font-size: 12px;
letter-spacing: 0.04em;
text-transform: uppercase;
}
body.vem-page-manage-users .user-table td {
padding: 11.5px 10px;
border-bottom: 1px solid var(--line);
background: rgba(255, 255, 255, 0.48);
transition: background var(--transition-fast);
}
body.vem-page-manage-users .user-table tr:hover td {
background: rgba(255, 255, 255, 0.72);
}
body.vem-page-manage-users .user-table td:first-child {
border-left: 1px solid var(--line);
border-radius: var(--radius-md) 0 0 var(--radius-md);
}
body.vem-page-manage-users .user-table td:last-child {
border-right: 1px solid var(--line);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
body.vem-page-manage-users .role-badge,
body.vem-page-manage-users .status-badge {
display: inline-flex;
align-items: center;
padding: 4px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.02em;
border: 1px solid transparent;
}
body.vem-page-manage-users .role-admin {
background: linear-gradient(135deg, rgba(31, 111, 235, 0.12), rgba(31, 111, 235, 0.06));
color: var(--brand);
border-color: rgba(31, 111, 235, 0.28);
}
body.vem-page-manage-users .role-approver {
background: linear-gradient(135deg, rgba(22, 132, 91, 0.12), rgba(22, 132, 91, 0.06));
color: var(--success-text);
border-color: rgba(22, 132, 91, 0.28);
}
body.vem-page-manage-users .role-user {
background: rgba(255, 255, 255, 0.72);
color: var(--ink-light);
border-color: var(--line);
}
body.vem-page-manage-users .status-active {
background: linear-gradient(135deg, rgba(22, 132, 91, 0.12), rgba(22, 132, 91, 0.06));
color: var(--success-text);
border-color: rgba(22, 132, 91, 0.28);
}
body.vem-page-manage-users .status-inactive {
background: linear-gradient(135deg, rgba(185, 28, 28, 0.12), rgba(185, 28, 28, 0.06));
color: var(--danger-text);
border-color: rgba(185, 28, 28, 0.28);
}
body.vem-page-manage-users .status-badge.status-inactive[title="Archived"],
body.vem-page-manage-users .status-archived {
background: rgba(100, 116, 139, 0.16);
color: #475569;
border-color: rgba(100, 116, 139, 0.32);
}
body.vem-page-manage-users .row-actions {
display: flex;
gap: 6.5px;
flex-wrap: wrap;
}
body.vem-page-manage-users .empty-state {
padding: 44.5px 16.5px;
color: var(--muted);
text-align: center;
font-size: 12px;
font-weight: 600;
}
body.vem-page-manage-users .modal-overlay {
position: fixed;
inset: 0;
z-index: 1000;
display: none;
place-items: center;
padding: 16.5px;
/* background/backdrop-filter deliberately NOT set here — a
higher-specificity global rule in vem-theme.css
(body:not(.vem-enterprise-dashboard):not([data-vem-auth]):not([data-vem-platform]) .modal-overlay)
always wins over this page-scoped one, so that's the one
real edits to the overlay's look need to go in. Keeping a
second, silently-overridden copy here would just confuse the
next person who edits this. */
}
body.vem-page-manage-users .modal-overlay.active {
display: grid;
}
body.vem-page-manage-users .modal {
width: min(680px, 100%);
max-height: calc(100vh - 40px);
overflow: auto;
border: 1px solid rgba(255, 255, 255, 0.82);
border-radius: var(--radius-lg);
background:
linear-gradient(135deg, rgba(231, 219, 255, 0.82), rgba(217, 200, 255, 0.42)),
radial-gradient(circle at 0% 0%, rgba(235, 242, 255, 0.92), rgba(225, 235, 255, 0.68) 52%, rgba(230, 240, 255, 0.7));
backdrop-filter: blur(20px) saturate(180%);
/* The shared decorative box-shadow (rgba(56,88,172,.08)) is tuned
for light backgrounds and is nearly invisible on dark themes,
which is what made this read as a flat page instead of a card
floating above one — a strong neutral shadow works in both. */
box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55), 0 10px 24px rgba(0, 0, 0, 0.35);
}
body.vem-page-manage-users .modal-header,
body.vem-page-manage-users .modal-footer {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
padding: 15px 18px;
background: rgba(255, 255, 255, 0.4);
}
body.vem-page-manage-users .modal-header {
border-bottom: 1px solid var(--line);
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
body.vem-page-manage-users .modal-footer {
justify-content: flex-end;
border-top: 1px solid var(--line);
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
body.vem-page-manage-users .modal-header h3 {
margin: 0;
font-size: 15px;
font-weight: 760;
color: var(--ink);
}
body.vem-page-manage-users .modal-close {
border: 0;
background: transparent;
color: var(--muted);
cursor: pointer;
font-size: 19.5px;
line-height: 1;
transition: color var(--transition-fast);
}
body.vem-page-manage-users .modal-close:hover {
color: var(--danger);
}
body.vem-page-manage-users .modal-body {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 15px;
padding: 16.5px 18px;
}
/* Compact the form without hiding labels into placeholders — on a
KYC/tax-data form, a label that disappears the moment you start
typing means losing track of which field you're in halfway through
an 11-field form. Smaller label + tighter gap gets most of the same
density without that cost. */
body.vem-page-manage-users .modal-body label {
margin-bottom: 3.5px;
font-size: 10.5px;
}
body.vem-page-manage-users .modal-body input,
body.vem-page-manage-users .modal-body select,
body.vem-page-manage-users .modal-body textarea {
min-height: 38px;
padding: 6.5px 10px;
}
body.vem-page-manage-users .modal-body.single-column,
body.vem-page-manage-users .modal-body .field-full {
grid-column: 1 / -1;
}
body.vem-page-manage-users .delete-copy {
grid-column: 1 / -1;
}
@media (max-width: 640px) {
body.vem-page-manage-users .modal-body {
grid-template-columns: 1fr;
}
}
body.vem-page-manage-users .delete-copy {
margin: 0;
color: var(--muted);
line-height: 1.6;
font-size: 12px;
}
body.vem-page-manage-users /* Scrollbar styling */
@media (max-width: 980px) {
body.vem-page-manage-users .main-content {
margin-left: 72px;
padding: 19.5px;
}
body.vem-page-manage-users .top-bar,
body.vem-page-manage-users .panel-header {
align-items: stretch;
flex-direction: column;
}
body.vem-page-manage-users .filters {
grid-template-columns: 1fr;
}
}
@media (max-width: 520px) {
body.vem-page-manage-users .main-content {
margin-left: 0;
padding: 16.5px 13px;
}
body.vem-page-manage-users .page-title {
font-size: 19.5px;
}
body.vem-page-manage-users .panel-header h2 {
font-size: 15px;
}
body.vem-page-manage-users .panel {
padding: 15px;
}
body.vem-page-manage-users .filters {
padding: 13px;
}
}
@media (prefers-reduced-motion: reduce) {
body.vem-page-manage-users *,
body.vem-page-manage-users *::before,
body.vem-page-manage-users *::after {
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: 1ms !important;
}
}
body.vem-page-manage-users .inline-form { display: inline; }
/* Manage Shifts ------------------------------------------------------- */
/* --ink/--muted/--line/--brand removed — same theme-shadowing issue as Apply Leave/Leave Settings above. --success/--danger/--radius kept, not theme-reactive elsewhere either. */
body.vem-page-manage-shifts{--success:#14805e;--danger:#c92a2a;--radius:22px}
body.vem-page-manage-shifts *{box-sizing:border-box}body.vem-page-manage-shifts .main-content{margin-left:290px;padding: 23px;min-height:100vh}body.vem-page-manage-shifts .top-bar{display:flex;justify-content:space-between;gap: 19.5px;align-items:center;margin-bottom:26px}body.vem-page-manage-shifts .page-kicker{margin: 0 0 5px;color:var(--brand);font-size: 12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}body.vem-page-manage-shifts .page-title{margin: 0;color:var(--ink);font-size:34px}body.vem-page-manage-shifts .page-subtitle{margin: 5.5px 0 0;color:var(--muted)}body.vem-page-manage-shifts .user-profile{display:flex;align-items:center;gap: 10px;padding: 8px 15px;border:1px solid rgba(255,255,255,.8);border-radius: 999px;background:rgba(255,255,255,.36)}body.vem-page-manage-shifts .user-avatar{display:grid;place-items:center;width:48px;height:48px;border-radius: 13px;background:linear-gradient(135deg,#2683ef,#1357c8);color:#fff;font-weight:850}body.vem-page-manage-shifts .user-name{font-weight:800}body.vem-page-manage-shifts .user-role{color:var(--muted);font-size:13px}body.vem-page-manage-shifts .panel{padding: 21.5px;border:1px solid rgba(255,255,255,.82);border-radius: var(--radius);background:rgba(255,255,255,.22);box-shadow:0 18px 45px rgba(55,56,145,.10)}body.vem-page-manage-shifts .panel-header{display:flex;justify-content:space-between;align-items:center;gap: 15px;margin-bottom:22px}body.vem-page-manage-shifts .panel-header h2{margin:0}body.vem-page-manage-shifts .btn{min-height:46px;padding: 9px 15px;border:1px solid var(--line);border-radius: 13px;background:rgba(255,255,255,.76);color:var(--ink);font-weight:800;cursor:pointer}body.vem-page-manage-shifts .btn-primary{background:linear-gradient(135deg,#287fee,#1557c7);color:#fff;border-color:transparent}body.vem-page-manage-shifts .btn-danger{color:var(--danger);border-color:rgba(201,42,42,.25)}body.vem-page-manage-shifts .btn-success{color:var(--success);border-color:rgba(20,128,94,.25)}body.vem-page-manage-shifts .btn-small{min-height:38px;padding: 6.5px 10px;border-radius: 10.5px;font-size:13px}body.vem-page-manage-shifts .alert{margin-bottom: 16.5px;padding: 11.5px 13px;border-radius: 11.5px;font-weight:700}body.vem-page-manage-shifts .alert-error{color:#a61e1e;background:#fff0f0;border:1px solid #f2b8b8}body.vem-page-manage-shifts .alert-success{color:#0e7653;background:#eafaf4;border:1px solid #a9dfcd}body.vem-page-manage-shifts .shift-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:18px}body.vem-page-manage-shifts .shift-card{padding: 16.5px;border:1px solid rgba(255,255,255,.88);border-radius: 15.5px;background:rgba(255,255,255,.62)}body.vem-page-manage-shifts .shift-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}body.vem-page-manage-shifts .shift-name-row{display:flex;align-items:center;gap:10px}body.vem-page-manage-shifts .color-dot{width:13px;height:13px;border-radius: 50%;background:var(--shift-color);box-shadow:0 0 0 4px color-mix(in srgb,var(--shift-color) 15%,transparent)}body.vem-page-manage-shifts .shift-name{font-size: 15px;font-weight:850}body.vem-page-manage-shifts .shift-code{margin-top: 3.5px;color:var(--muted);font-size:13px}body.vem-page-manage-shifts .badge{display:inline-flex;padding: 5px 8px;border-radius: 999px;font-size: 12px;font-weight:800;background:#edf3ff;color:#315e9d}body.vem-page-manage-shifts .badge-off{background:#f1f2f5;color:#566173}body.vem-page-manage-shifts .badge-training{background:#f1edff;color:#604cb0}body.vem-page-manage-shifts .shift-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap: 10px;margin:18px 0}body.vem-page-manage-shifts .meta-box{padding: 10px;border-radius: 11.5px;background:rgba(245,248,255,.78)}body.vem-page-manage-shifts .meta-label{color:var(--muted);font-size: 11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}body.vem-page-manage-shifts .meta-value{margin-top: 4px;font-weight:800}body.vem-page-manage-shifts .projects{display:flex;flex-wrap:wrap;gap:7px}body.vem-page-manage-shifts .project-pill{padding: 5px 7.5px;border-radius: 999px;background:#f3f6fc;color:#4d607e;font-size: 12px;font-weight:750}body.vem-page-manage-shifts .card-actions{display:flex;flex-wrap:wrap;gap: 6.5px;margin-top:18px}body.vem-page-manage-shifts .history{margin-top: 13px;padding-top: 11.5px;border-top:1px solid var(--line)}body.vem-page-manage-shifts .history summary{cursor:pointer;color:#536985;font-size: 12px;font-weight:850;text-transform:uppercase}body.vem-page-manage-shifts .history-row{display:flex;justify-content:space-between;gap: 10px;padding: 7.5px 0;border-bottom:1px solid rgba(112,132,170,.12);font-size:13px}body.vem-page-manage-shifts .empty{padding: 29.5px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:18px}body.vem-page-manage-shifts .modal-overlay{position:fixed;inset:0;display:none;place-items:center;padding: 16.5px;background:rgba(21,28,55,.45);z-index:2000}body.vem-page-manage-shifts .modal-overlay.active{display:grid}body.vem-page-manage-shifts .modal{width:min(680px,100%);max-height:92vh;overflow:auto;border:1px solid rgba(255,255,255,.9);border-radius: 19.5px;background:#f3f1ff;box-shadow:0 30px 80px rgba(28,32,79,.28)}body.vem-page-manage-shifts .modal-header,
body.vem-page-manage-shifts .modal-footer{display:flex;justify-content:space-between;align-items:center;gap: 11.5px;padding: 16.5px 19.5px;background:rgba(255,255,255,.42)}body.vem-page-manage-shifts .modal-header h3{margin:0}body.vem-page-manage-shifts .modal-body{padding:24px}body.vem-page-manage-shifts .modal-close{border:0;background:rgba(255,255,255,.72);width:40px;height:40px;border-radius: 11.5px;font-size: 19.5px;cursor:pointer}body.vem-page-manage-shifts .form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}body.vem-page-manage-shifts .form-group{display:flex;flex-direction:column;gap:7px}body.vem-page-manage-shifts .form-group.full{grid-column:1/-1}body.vem-page-manage-shifts .form-group label,
body.vem-page-manage-shifts .field-label{font-size: 12px;font-weight:700;color:#34445f}body.vem-page-manage-shifts .form-control{width:100%;min-height:48px;padding: 9px 10.5px;border:1px solid var(--line,#ccd6e8);border-radius: 11.5px;background:var(--input-bg,var(--panel,#fff));color:var(--ink)}body.vem-page-manage-shifts .project-checks{display:flex!important;flex-direction:column!important;gap: 3.5px;min-height:44px;max-height:220px;overflow-y:auto}body.vem-page-manage-shifts .form-group .check-row{display:flex;gap: 6.5px;align-items:center;width:100%;padding: 6.5px 7.5px;border-radius: 5.5px;font-weight:400;color:var(--ink)}body.vem-page-manage-shifts .check-row:hover{background:rgba(37,99,235,.1)}body.vem-page-manage-shifts .check-row input[type="checkbox"]{width:14px;height:14px;margin: 0;accent-color:#2563eb;flex:0 0 auto}body.vem-page-manage-shifts .check-row span{font-size: 12px;font-weight:400}body.vem-page-manage-shifts .timing-note{padding: 9px 10.5px;border-radius: 10px;background:#eaf2ff;color:#3b5f91;font-size:13px}body.vem-page-manage-shifts .hidden{display:none!important}body.vem-page-manage-shifts .availability-note{font-size: 12px;color:var(--muted)}
body.vem-page-manage-shifts .project-multiselect{position:relative}
body.vem-page-manage-shifts .project-multiselect-trigger{position:relative;display:flex;align-items:center;width:100%;min-height:42px;padding: 6.5px 24.5px 6.5px 8px;border:1px solid var(--line-strong);border-radius: var(--radius-sm);background:var(--input-bg,var(--panel,#fff));color:var(--ink);font:inherit;font-size: 12px;text-align:left;cursor:pointer}
body.vem-page-manage-shifts .project-multiselect-trigger::after{content:"";position:absolute;right:12px;top:50%;width:7px;height:7px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:translateY(-65%) rotate(45deg);pointer-events:none}
body.vem-page-manage-shifts .project-multiselect-summary,body.vem-page-manage-shifts #projectMultiselectSummary{color:inherit;font-weight:400}
body.vem-page-manage-shifts .project-multiselect-panel{position:absolute;top:calc(100% + 6px);left:0;z-index:20;width:260px;max-width:min(260px,calc(100vw - 40px));padding: 6.5px;border:1px solid var(--line-strong);border-radius: var(--radius-sm);background:var(--input-bg,var(--panel,#fff));box-shadow:0 16px 36px rgba(15,23,42,.18)}
body.vem-page-manage-shifts .project-multiselect-search{width:100%;min-height:36px;margin-bottom: 6.5px;border:1px solid var(--line-strong);border-radius: var(--radius-sm);padding: 5.5px 7.5px;font-size: 12px;outline:none}
body.vem-page-manage-shifts .project-multiselect-empty{padding: 6.5px 7.5px;text-align:left;color:var(--muted);font-size:12px}
@media(max-width:980px){body.vem-page-manage-shifts .main-content{margin-left:72px}body.vem-page-manage-shifts .top-bar{align-items:flex-start;flex-direction:column}body.vem-page-manage-shifts .shift-grid{grid-template-columns:1fr}}
@media(max-width:600px){body.vem-page-manage-shifts .main-content{margin-left:0;padding:18px 14px}body.vem-page-manage-shifts .form-grid,
body.vem-page-manage-shifts .project-checks{grid-template-columns:1fr}body.vem-page-manage-shifts .page-title{font-size:27px}body.vem-page-manage-shifts .panel{padding:18px}body.vem-page-manage-shifts .shift-card{padding:16px}body.vem-page-manage-shifts .shift-meta{grid-template-columns:1fr}}
/* Compact enterprise hierarchy: presentation only. */
body.vem-page-manage-shifts .top-bar{margin-bottom:22px}
body.vem-page-manage-shifts .page-kicker{margin-bottom: 4px;font-size: 10px;letter-spacing:.12em}
body.vem-page-manage-shifts .page-title{font-size: 24.5px;line-height:1.12;letter-spacing:-.025em}
body.vem-page-manage-shifts .page-subtitle{max-width:780px;font-size: 12px;line-height:1.5}
body.vem-page-manage-shifts .panel{padding: 18px;border:1px solid #8fa3b8;border-radius: 13px;background:linear-gradient(145deg,#a8bacd 0%,#b5c6d6 48%,#a5b8cb 100%)!important;box-shadow:0 12px 30px rgba(3,12,27,.18),inset 0 1px 0 rgba(255,255,255,.3),inset 0 0 30px rgba(55,78,105,.08)}
body.vem-page-manage-shifts .panel-header{margin-bottom: 15px;padding-bottom: 13px;border-bottom:1px solid #bdcbd9}
body.vem-page-manage-shifts .panel-header h2{font-size: 17px;font-weight:750;line-height:1.2;letter-spacing:-.015em}
body.vem-page-manage-shifts .availability-note{margin: 4px 0 0;font-size: 11px;font-weight:450;line-height:1.45}
body.vem-page-manage-shifts .panel-header .btn-primary{min-height:40px;padding: 7.5px 12.5px;border-radius: 9px;font-size: 12px;font-weight:700}
body.vem-page-manage-shifts .shift-grid{grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:14px}
body.vem-page-manage-shifts .shift-card{padding: 13px;border-color:#b4c2d1;border-radius: 11.5px;background:#edf2f7;box-shadow:0 6px 16px rgba(3,12,27,.08)}
body.vem-page-manage-shifts .shift-head{gap:10px}
body.vem-page-manage-shifts .shift-name-row{gap:8px}
body.vem-page-manage-shifts .color-dot{width:10px;height:10px;box-shadow:0 0 0 3px color-mix(in srgb,var(--shift-color) 16%,transparent)}
body.vem-page-manage-shifts .shift-name{font-size: 13px;font-weight:720;line-height:1.25}
body.vem-page-manage-shifts .shift-code{margin-top: 3px;font-size: 11px;font-weight:450}
body.vem-page-manage-shifts .badge{padding: 4px 7.5px;font-size: 10px;font-weight:650;letter-spacing:.015em}
body.vem-page-manage-shifts .shift-meta{gap: 7.5px;margin:13px 0 12px}
body.vem-page-manage-shifts .meta-box{min-height:66px;padding: 8px 9px;border:1px solid rgba(151,170,193,.28);border-radius: 9px;background:#d9e3ee}
body.vem-page-manage-shifts .meta-label{font-size: 9px;font-weight:650;letter-spacing:.07em}
body.vem-page-manage-shifts .meta-value{margin-top: 3.5px;font-size: 12px;font-weight:600;line-height:1.3}
body.vem-page-manage-shifts .projects{gap: 4px;min-height:26px}
body.vem-page-manage-shifts .project-pill{padding: 4px 6.5px;font-size: 10px;font-weight:550;background:#f8fafc}
body.vem-page-manage-shifts .card-actions{gap: 5px;margin-top:13px}
body.vem-page-manage-shifts .card-actions form{margin:0}
body.vem-page-manage-shifts .btn-small{min-height:34px;padding: 5.5px 8px;border-radius: 7.5px;font-size: 11px;font-weight:650;box-shadow:none}
body.vem-page-manage-shifts .history{margin-top: 10.5px;padding-top:11px}
body.vem-page-manage-shifts .history summary{font-size: 10px;font-weight:650;letter-spacing:.035em}
body.vem-page-manage-shifts .history-row{padding: 5.5px 0;font-size: 11px;font-weight:450}
body.vem-page-manage-shifts .history-row strong{font-weight:600}
@media(max-width:600px){body.vem-page-manage-shifts .page-title{font-size:27px}body.vem-page-manage-shifts .panel{padding:16px}body.vem-page-manage-shifts .shift-card{padding:14px}body.vem-page-manage-shifts .shift-meta{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* My Shift Roster ----------------------------------------------------- */
body.vem-page-my-shift-roster .main-content{margin-left:290px;padding: 23px;min-height:100vh}body.vem-page-my-shift-roster .top{display:flex;justify-content:space-between;align-items:end;gap: 16.5px;margin-bottom:24px}body.vem-page-my-shift-roster .title{margin: 0;color:#172238;font-size:34px}body.vem-page-my-shift-roster .subtitle{margin: 5.5px 0 0;color:#687b99}body.vem-page-my-shift-roster .panel{padding: 19.5px;border:1px solid rgba(255,255,255,.82);border-radius: 19px;background:rgba(255,255,255,.25);box-shadow:0 18px 44px rgba(49,53,140,.1)}body.vem-page-my-shift-roster .week-form{display:flex;align-items:end;gap: 10px;margin-bottom:22px}body.vem-page-my-shift-roster .field{display:flex;flex-direction:column;gap: 5.5px;min-width:280px}body.vem-page-my-shift-roster .field label{color:#526783;font-size: 12px;font-weight:850;letter-spacing:.06em;text-transform:uppercase}body.vem-page-my-shift-roster .control{min-height:46px;padding: 8px 10.5px;border:1px solid #ccd6e8;border-radius: 11.5px;background:#fff;color:#172238}body.vem-page-my-shift-roster .btn{min-height:46px;padding: 8px 14px;border:0;border-radius: 11.5px;background:linear-gradient(135deg,#287fee,#1557c7);color:#fff;font-weight:800}body.vem-page-my-shift-roster .week-grid{display:grid;grid-template-columns:repeat(7,minmax(125px,1fr));gap:10px}body.vem-page-my-shift-roster .day-card{min-height:210px;padding: 12.5px;border:1px solid rgba(122,142,180,.22);border-radius: 14px;background:rgba(255,255,255,.66)}body.vem-page-my-shift-roster .day-card.today{box-shadow:inset 0 0 0 2px rgba(32,112,225,.35)}body.vem-page-my-shift-roster .day-head{display:flex;justify-content:space-between;gap: 5.5px;padding-bottom: 9px;border-bottom:1px solid rgba(122,142,180,.18)}body.vem-page-my-shift-roster .day-name{font-weight:850;color:#25344d}body.vem-page-my-shift-roster .day-date{color:#687b99;font-size:12px}body.vem-page-my-shift-roster .shift{margin-top:14px}body.vem-page-my-shift-roster .shift-code{display:inline-flex;padding: 4px 7.5px;border-radius: 7.5px;background:#eef4ff;color:#1a5dc4;font-weight:900}body.vem-page-my-shift-roster .shift-name{margin: 7.5px 0 3px;color:#172238;font-weight:800}body.vem-page-my-shift-roster .project{color:#5f7190;font-size:12px}body.vem-page-my-shift-roster .timing{margin-top: 10.5px;color:#344763;font-size: 12px;font-weight:700}body.vem-page-my-shift-roster .meta{margin-top: 5px;color:#71819b;font-size:11px}body.vem-page-my-shift-roster .off{margin-top: 23px;color:#7b8aa1;text-align:center}body.vem-page-my-shift-roster .empty-week{padding: 23px;text-align:center;color:#687b99;border:1px dashed rgba(104,125,166,.35);border-radius:16px}
@media(max-width:1150px){body.vem-page-my-shift-roster .main-content{margin-left:72px}body.vem-page-my-shift-roster .week-grid{grid-template-columns:repeat(4,1fr)}}@media(max-width:700px){body.vem-page-my-shift-roster .main-content{margin-left:0;padding:16px 12px}body.vem-page-my-shift-roster .top,
body.vem-page-my-shift-roster .week-form{align-items:stretch;flex-direction:column}body.vem-page-my-shift-roster .field{min-width:0}body.vem-page-my-shift-roster .week-grid{grid-template-columns:1fr 1fr}body.vem-page-my-shift-roster .title{font-size:28px}}@media(max-width:430px){body.vem-page-my-shift-roster .week-grid{grid-template-columns:1fr}}
body.vem-page-my-shift-roster .shift-code{border-left:4px solid var(--shift-color,#1769df)}
/* Plan Shift Roster --------------------------------------------------- */
body.vem-page-plan-shift-roster .draft-validation[hidden],
body.vem-page-plan-shift-roster .row-validation[hidden]{display:none!important}body.vem-page-plan-shift-roster .draft-validation{margin:0 0 14px}body.vem-page-plan-shift-roster .roster-table tr.row-error{outline:none;background:transparent}body.vem-page-plan-shift-roster .roster-table tr.row-error .user-search{border-color:#d83d3d;background:#fff7f7;box-shadow:0 0 0 2px rgba(216,61,61,.1)}body.vem-page-plan-shift-roster .row-validation{margin-top: 3.5px;color:#b42323;font-size: 10px;font-weight:750;line-height:1.2;white-space:nowrap}
body.vem-page-plan-shift-roster .multi-users .check[hidden]{display:none!important}
body.vem-page-plan-shift-roster .bulk-bar .field:first-child{position:relative;z-index:20}body.vem-page-plan-shift-roster .multi-trigger{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:44px;padding: 7.5px 10px;border:1px solid var(--line,#ccd6e8);border-radius: 10.5px;background:var(--input-bg,var(--panel,#fff));color:var(--ink);font-weight:700;cursor:pointer}body.vem-page-plan-shift-roster .multi-trigger::after{content:'▾';color:var(--muted)}body.vem-page-plan-shift-roster .bulk-bar .multi-users{display:none;position:absolute;z-index:50;top:calc(100% + 6px);left:0;width:max(100%,320px);max-height:280px;overflow:auto;padding: 6.5px;border:1px solid var(--line-strong,#c7d3e7);border-radius: 11.5px;background:var(--panel,#fff);color:var(--ink);box-shadow:0 18px 38px rgba(32,47,92,.18)}body.vem-page-plan-shift-roster .bulk-bar .multi-users.open{display:block}body.vem-page-plan-shift-roster .multi-search{position:sticky;top:0;z-index:2;width:100%;min-height:40px;margin-bottom: 5px;padding: 6.5px 8px;border:1px solid var(--line,#ccd6e8);border-radius: 8px;background:var(--input-bg,var(--panel,#fff));color:var(--ink)}body.vem-page-plan-shift-roster .multi-empty{display:none;padding: 12.5px;text-align:center;color:var(--muted);font-size:13px}body.vem-page-plan-shift-roster .table-wrap .roster-table th:first-child,
body.vem-page-plan-shift-roster .table-wrap .roster-table td:first-child{width:12%}body.vem-page-plan-shift-roster .table-wrap .roster-table th:last-child,
body.vem-page-plan-shift-roster .table-wrap .roster-table td:last-child{width:44px}body.vem-page-plan-shift-roster .roster-table .user-search{width:90%;min-height:36px;margin: 0 auto;padding:5px 8px}body.vem-page-plan-shift-roster .roster-table .shift-select{width:84%;min-height:36px;margin: 0 auto;padding:5px 7px}body.vem-page-plan-shift-roster .roster-table td{padding-top: 5.5px;padding-bottom:7px}
body.vem-page-plan-shift-roster .table-wrap .roster-table th:first-child,
body.vem-page-plan-shift-roster .table-wrap .roster-table td:first-child{width:13.5%}body.vem-page-plan-shift-roster .table-wrap .roster-table th:last-child,
body.vem-page-plan-shift-roster .table-wrap .roster-table td:last-child{width:48px}body.vem-page-plan-shift-roster .roster-table td .remove-row{display:grid;place-items:center;width:34px;min-width:34px;min-height:34px;height:34px;margin: 3.5px auto;padding: 0;border-radius: 50%;font-size: 17px;line-height:1}body.vem-page-plan-shift-roster .roster-table th,
body.vem-page-plan-shift-roster .roster-table td{padding-left: 5.5px;padding-right:7px}body.vem-page-plan-shift-roster .roster-table .user-search,
body.vem-page-plan-shift-roster .roster-table .shift-select{min-height:40px;padding-top: 5.5px;padding-bottom:7px}
body.vem-page-plan-shift-roster .table-wrap .roster-table{width:100%;min-width:0;table-layout:fixed}body.vem-page-plan-shift-roster .roster-table th:first-child,
body.vem-page-plan-shift-roster .roster-table td:first-child{width:15%}body.vem-page-plan-shift-roster .roster-table th:last-child,
body.vem-page-plan-shift-roster .roster-table td:last-child{width:76px}body.vem-page-plan-shift-roster .roster-table .user-search,
body.vem-page-plan-shift-roster .roster-table .shift-select{width:100%;min-width:0;min-height:42px;padding: 6.5px 8px;border-radius:12px}body.vem-page-plan-shift-roster .roster-table .btn-danger{width:100%;min-height:40px;padding: 6.5px 5px;font-size:12px}@media(max-width:1100px){body.vem-page-plan-shift-roster .roster-table th:first-child,
body.vem-page-plan-shift-roster .roster-table td:first-child{width:17%}body.vem-page-plan-shift-roster .roster-table th:last-child,
body.vem-page-plan-shift-roster .roster-table td:last-child{width:64px}body.vem-page-plan-shift-roster .roster-table th,
body.vem-page-plan-shift-roster .roster-table td{padding-left: 5px;padding-right:6px}body.vem-page-plan-shift-roster .roster-table .control{padding-left: 5.5px;padding-right:7px}}@media(max-width:800px){body.vem-page-plan-shift-roster .table-wrap .roster-table{min-width:900px}}
body.vem-page-plan-shift-roster .btn:disabled{cursor:not-allowed;opacity:.58}body.vem-page-plan-shift-roster .roster-state{display:flex;align-items:center;gap: 10px;margin-bottom: 11.5px;padding: 10.5px 12.5px;border:1px solid var(--line);border-radius:16px}body.vem-page-plan-shift-roster .roster-state strong{display:block}body.vem-page-plan-shift-roster .roster-state span{display:block;margin-top: 2px;font-size:12px}body.vem-page-plan-shift-roster .state-dot{width:12px;height:12px;border-radius: 50%;flex:0 0 12px}body.vem-page-plan-shift-roster .roster-state.draft{color:#78510b;background:#fff7df;border-color:#e7ca83}body.vem-page-plan-shift-roster .roster-state.draft .state-dot{background:#d89516}body.vem-page-plan-shift-roster .roster-state.confirmed{color:#116547;background:#eaf8f2;border-color:#9ed8c2}body.vem-page-plan-shift-roster .roster-state.confirmed .state-dot{background:#1b9b6a}body.vem-page-plan-shift-roster .roster-state.empty-state{color:#53657e;background:rgba(255,255,255,.55)}body.vem-page-plan-shift-roster .roster-state.empty-state .state-dot{background:#8292aa}body.vem-page-plan-shift-roster .shift-legend{display:flex;flex-wrap:wrap;gap: 6.5px;margin-bottom:16px}body.vem-page-plan-shift-roster .legend-item{display:flex;align-items:center;gap: 6.5px;padding: 5.5px 8px;border:1px solid var(--line);border-radius: 10px;background:var(--panel,rgba(255,255,255,.62));font-size:12px}body.vem-page-plan-shift-roster .legend-swatch{width:10px;height:10px;border-radius:3px}body.vem-page-plan-shift-roster .legend-item strong{color:var(--ink)}body.vem-page-plan-shift-roster .legend-item span{color:var(--muted)}body.vem-page-plan-shift-roster .shift-select.draft-cell{border-color:#d8a23c;background:#fffaf0}body.vem-page-plan-shift-roster .shift-select.confirmed-cell{border-color:#89cbb3;background:#f3fbf7}
body.vem-page-plan-shift-roster{--danger:#bd2727}body.vem-page-plan-shift-roster *{box-sizing:border-box}body.vem-page-plan-shift-roster .main-content{margin-left:290px;padding: 23px;min-height:100vh}body.vem-page-plan-shift-roster .top-bar{display:flex;justify-content:space-between;align-items:center;gap: 18px;margin-bottom:24px}body.vem-page-plan-shift-roster .page-kicker{margin: 0 0 5px;color:var(--brand);font-size: 12px;font-weight:850;letter-spacing:.1em;text-transform:uppercase}body.vem-page-plan-shift-roster .page-title{margin: 0;font-size: 28px;color:var(--ink)}body.vem-page-plan-shift-roster .page-subtitle{margin: 5.5px 0 0;color:var(--muted)}body.vem-page-plan-shift-roster .profile{display:flex;align-items:center;gap: 10px;padding: 8px 14px;border:1px solid rgba(255,255,255,.8);border-radius: 999px;background:rgba(255,255,255,.35)}body.vem-page-plan-shift-roster .avatar{display:grid;place-items:center;width:48px;height:48px;border-radius: 13px;background:linear-gradient(135deg,#2882ef,#1459cb);color:#fff;font-weight:850}body.vem-page-plan-shift-roster .panel{padding: 19.5px;border:1px solid rgba(255,255,255,.82);border-radius: 19px;background:rgba(255,255,255,.23);box-shadow:0 18px 44px rgba(49,53,140,.1)}body.vem-page-plan-shift-roster .selector-grid{display:grid;grid-template-columns:minmax(220px,1fr) minmax(250px,1.4fr) auto;gap: 11.5px;align-items:end}body.vem-page-plan-shift-roster .field{display:flex;flex-direction:column;gap:7px}body.vem-page-plan-shift-roster .field label,
body.vem-page-plan-shift-roster .section-label{font-size: 12px;font-weight:850;letter-spacing:.06em;text-transform:uppercase;color:#506482}body.vem-page-plan-shift-roster .control{min-height:48px;width:100%;padding: 9px 10.5px;border:1px solid var(--line,#ccd6e8);border-radius: 11.5px;background:var(--input-bg,var(--panel,#fff));color:var(--ink)}body.vem-page-plan-shift-roster .btn{min-height:46px;padding: 9px 14px;border:1px solid var(--line);border-radius: 12.5px;background:var(--panel,rgba(255,255,255,.76));color:var(--ink);font-weight:800;cursor:pointer}body.vem-page-plan-shift-roster .btn-primary{color:#fff;border-color:transparent;background:linear-gradient(135deg,#287fee,#1557c7)}body.vem-page-plan-shift-roster .btn-danger{color:var(--danger);border-color:rgba(189,39,39,.24)}body.vem-page-plan-shift-roster .workspace{margin-top:20px}body.vem-page-plan-shift-roster .bulk-bar{display:grid;grid-template-columns:minmax(220px,1fr) minmax(180px,.7fr) minmax(260px,1fr) auto;gap: 10px;align-items:end;margin-bottom: 13px;padding: 13px;border-radius: 15px;background:rgba(255,255,255,.48)}body.vem-page-plan-shift-roster .multi-users{max-height:125px;overflow:auto;padding: 6.5px;border:1px solid var(--line,#ccd6e8);border-radius: 10.5px;background:var(--panel,#fff);color:var(--ink)}body.vem-page-plan-shift-roster .check{display:flex;align-items:center;gap: 6.5px;padding: 4px;font-size:13px}body.vem-page-plan-shift-roster .days{display:flex;flex-wrap:wrap;gap:6px}body.vem-page-plan-shift-roster .day-check{padding: 5.5px 6.5px;border-radius: 8px;background:#f3f6fb;font-size:12px}body.vem-page-plan-shift-roster .toolbar{display:flex;justify-content:space-between;gap: 10px;align-items:center;margin:16px 0}body.vem-page-plan-shift-roster .toolbar-actions{display:flex;gap: 7.5px;flex-wrap:wrap}body.vem-page-plan-shift-roster .table-wrap{overflow-x:auto;border-radius: 15px;border:1px solid rgba(255,255,255,.88);background:rgba(255,255,255,.56)}body.vem-page-plan-shift-roster .roster-table{width:100%;min-width:1280px;border-collapse:collapse}body.vem-page-plan-shift-roster .roster-table th{padding: 10.5px 8px;background:rgba(247,250,255,.92);color:#526783;font-size: 11px;text-transform:uppercase;letter-spacing:.06em;text-align:left}body.vem-page-plan-shift-roster .roster-table td{padding: 8px;border-top:1px solid var(--line);vertical-align:top}body.vem-page-plan-shift-roster .user-search{min-width:225px}body.vem-page-plan-shift-roster .shift-select{min-width:130px}body.vem-page-plan-shift-roster .date-head span{display:block;color:var(--muted);margin-top:3px}body.vem-page-plan-shift-roster .locked{opacity:.48;pointer-events:none}body.vem-page-plan-shift-roster .row-error{outline:2px solid #e77979}body.vem-page-plan-shift-roster .status-line{min-height:22px;color:var(--muted);font-size:13px}body.vem-page-plan-shift-roster .confirm-bar{display:flex;justify-content:flex-end;gap: 10px;align-items:center;margin-top:18px}body.vem-page-plan-shift-roster .alert{margin-bottom: 14px;padding: 10.5px 12.5px;border-radius: 11.5px;font-weight:700}body.vem-page-plan-shift-roster .alert-error{color:#a61d1d;background:#fff0f0;border:1px solid #efb7b7}body.vem-page-plan-shift-roster .alert-success{color:#107351;background:#eaf9f3;border:1px solid #aadeca}body.vem-page-plan-shift-roster .empty{margin-top: 15px;padding: 28px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:17px}body.vem-page-plan-shift-roster .hint{font-size: 12px;color:var(--muted)}
@media(max-width:1050px){body.vem-page-plan-shift-roster .main-content{margin-left:72px}body.vem-page-plan-shift-roster .selector-grid,
body.vem-page-plan-shift-roster .bulk-bar{grid-template-columns:1fr 1fr}body.vem-page-plan-shift-roster .top-bar{align-items:flex-start;flex-direction:column}}@media(max-width:650px){body.vem-page-plan-shift-roster .main-content{margin-left:0;padding:18px 13px}body.vem-page-plan-shift-roster .selector-grid,
body.vem-page-plan-shift-roster .bulk-bar{grid-template-columns:1fr}body.vem-page-plan-shift-roster .page-title{font-size:27px}body.vem-page-plan-shift-roster .panel{padding:17px}body.vem-page-plan-shift-roster .confirm-bar{align-items:stretch;flex-direction:column}body.vem-page-plan-shift-roster .btn{width:100%}}
body.vem-page-plan-shift-roster .legend-swatch{background:var(--legend-color,#1769df)}
/* My Timesheets ------------------------------------------------------- */
body.vem-page-my-timesheets{
--success-text: #16845b;
--danger-text: #b91c1c;
--warning-text: #c7771d;
}
body.vem-page-my-timesheets{
font-family: "Segoe UI Variable", "Segoe UI", Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
min-height: 100vh;
height: 100vh;
margin: 0;
overflow: hidden;
color: var(--ink);
background:
radial-gradient(circle at 12% 14%, rgba(124, 58, 237, 0.05), transparent 34%),
radial-gradient(circle at 86% 18%, rgba(79, 70, 229, 0.08), transparent 32%),
radial-gradient(circle at 72% 88%, rgba(147, 51, 234, 0.06), transparent 36%),
linear-gradient(135deg, #e7dbff 0%, #a9a4ff 38%, #c1bdff 65%, #d9d7ff 100%);
overflow-x: hidden;
overflow-y: auto;
text-rendering: geometricPrecision;
-webkit-font-smoothing: antialiased;
}
body.vem-page-my-timesheets::after{
content: "";
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background:
linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.34) 42%, transparent 68%),
linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(214, 199, 255, 0.22));
opacity: 0.92;
}
body.vem-page-my-timesheets::before{
content: '';
position: fixed;
inset: 0;
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.02'/%3E%3C/svg%3E");
opacity: 0.15;
z-index: -1;
}
body.vem-page-my-timesheets .app{
display: flex;
min-height: 100vh;
height: 100vh;
overflow: hidden;
}
body.vem-page-my-timesheets .main-content{
flex: 1;
margin-left: 270px;
padding: 28px 31px 37.5px;
overflow-y: auto;
overflow-x: auto;
height: 100vh;
animation: pageRise 520ms var(--transition-smooth) both;
}
@keyframes pageRise {
from {
opacity: 0;
transform: translateY(14px) scale(0.995);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
body.vem-page-my-timesheets .top-bar{
display: flex;
justify-content: space-between;
align-items: center;
gap: 18px;
margin-bottom: 23px;
flex-wrap: wrap;
}
body.vem-page-my-timesheets .page-kicker{
display: inline-flex;
align-items: center;
gap: 6.5px;
margin: 0 0 5px;
color: var(--brand);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.11em;
text-transform: uppercase;
}
body.vem-page-my-timesheets .page-kicker::before{
content: "";
width: 22px;
height: 2px;
border-radius: 81px;
background: linear-gradient(90deg, var(--brand), var(--accent-2));
box-shadow: 0 0 16px rgba(31, 111, 235, 0.25);
}
body.vem-page-my-timesheets .page-title{
margin: 0;
color: var(--ink);
font-size: 24.5px;
line-height: 1.14;
font-weight: 760;
letter-spacing: 0;
}
body.vem-page-my-timesheets .page-subtitle{
max-width: 760px;
margin: 6.5px 0 0;
color: var(--muted);
font-size: 12px;
line-height: 1.6;
font-weight: 450;
}
/* Filter bar styles */
body.vem-page-my-timesheets .filter-bar{
background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(16px);
border-radius: var(--radius-lg);
padding: 15px 18px;
margin-bottom: 19.5px;
border: 1px solid rgba(255, 255, 255, 0.82);
display: flex;
align-items: center;
gap: 16.5px;
flex-wrap: wrap;
}
body.vem-page-my-timesheets .filter-group{
display: flex;
align-items: center;
gap: 10px;
}
body.vem-page-my-timesheets .filter-group label{
font-weight: 700;
color: var(--ink);
font-size: 12px;
}
body.vem-page-my-timesheets .filter-select{
padding: 8px 13px;
border-radius: var(--radius-md);
border: 1px solid var(--line);
background: var(--input-bg, var(--panel, #fff));
font-size: 12px;
font-weight: 500;
color: var(--ink);
cursor: pointer;
transition: all var(--transition-fast);
}
body.vem-page-my-timesheets .filter-select:hover{
border-color: var(--brand);
background: var(--panel-hover, var(--panel, #fff));
}
body.vem-page-my-timesheets .filter-select:focus{
outline: none;
border-color: var(--brand);
box-shadow: 0 0 0 3px var(--brand-glow);
}
body.vem-page-my-timesheets .apply-btn{
padding: 8px 19.5px;
border-radius: var(--radius-md);
background: linear-gradient(135deg, var(--brand), var(--brand-deep));
border: none;
color: white;
font-weight: 700;
font-size: 12px;
cursor: pointer;
transition: all var(--transition-fast);
box-shadow: var(--shadow-xs);
}
body.vem-page-my-timesheets .apply-btn:hover{
transform: translateY(-1px);
box-shadow: var(--shadow-sm);
filter: brightness(1.02);
}
body.vem-page-my-timesheets .current-week-badge{
margin-left: auto;
padding: 5px 11.5px;
background: var(--brand-soft);
border-radius: 999px;
font-size: 12px;
font-weight: 700;
color: var(--brand);
}
body.vem-page-my-timesheets .user-profile{
position: relative;
min-width: 230px;
display: flex;
align-items: center;
gap: 10px;
padding: 8px 11.5px 8px 8px;
overflow: hidden;
cursor: pointer;
border: 1px solid rgba(255, 255, 255, 0.78);
border-radius: var(--radius-xl);
background:
linear-gradient(135deg, rgba(231, 219, 255, 0.82), rgba(217, 200, 255, 0.42)),
radial-gradient(circle at 0% 0%, rgba(235, 242, 255, 0.92), rgba(225, 235, 255, 0.68) 52%, rgba(230, 240, 255, 0.7));
box-shadow: 0 20px 40px rgba(56, 88, 172, 0.08);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(18px) saturate(150%);
transition:
transform var(--transition-float),
box-shadow var(--transition-float),
border-color var(--transition-smooth);
}
body.vem-page-my-timesheets .user-profile:hover{
transform: translateY(-4px);
border-color: rgba(31, 111, 235, 0.24);
box-shadow: var(--shadow-md);
}
body.vem-page-my-timesheets .user-profile:active{
transform: translateY(-1px) scale(0.992);
box-shadow: var(--shadow-sm);
}
body.vem-page-my-timesheets .user-avatar{
position: relative;
z-index: 1;
width: 44px;
height: 44px;
display: grid;
place-items: center;
flex: 0 0 auto;
border-radius: 14px;
color: #ffffff;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.02em;
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.2), transparent 38%),
linear-gradient(145deg, var(--brand), var(--brand-deep));
box-shadow:
0 12px 24px rgba(31, 111, 235, 0.24),
inset 0 1px 0 rgba(255, 255, 255, 0.34);
transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}
body.vem-page-my-timesheets .user-name{
position: relative;
z-index: 1;
color: var(--ink);
font-size: 12px;
font-weight: 750;
line-height: 1.25;
}
/* Main panel container - FIXED */
body.vem-page-my-timesheets .timesheets-panel{
background:
radial-gradient(circle at 12% 14%, rgba(124, 58, 237, 0.05), transparent 34%),
radial-gradient(circle at 86% 18%, rgba(79, 70, 229, 0.08), transparent 32%),
radial-gradient(circle at 72% 88%, rgba(147, 51, 234, 0.06), transparent 36%),
linear-gradient(135deg, #e7dbff 0%, #a9a4ff 38%, #c1bdff 65%, #d9d7ff 100%);
border-radius: var(--radius-lg);
border: 1px solid rgba(255, 255, 255, 0.82);
overflow: hidden;
box-shadow: var(--shadow-sm);
}
body.vem-page-my-timesheets .panel-header{
padding: 19.5px 23px 13px 23px;
border-bottom: 1px solid var(--line);
background: rgba(255, 255, 255, 0.4);
}
body.vem-page-my-timesheets .panel-title{
margin: 0 0 5px;
color: var(--ink);
font-size: 16.5px;
font-weight: 760;
}
body.vem-page-my-timesheets .panel-subtitle{
margin: 0;
color: var(--muted);
font-size: 12px;
font-weight: 470;
line-height: 1.5;
}
body.vem-page-my-timesheets .panel-content{
padding: 19.5px 23px 23px 23px;
}
body.vem-page-my-timesheets .alert{
margin-bottom: 15px;
padding: 11.5px 15px;
border-radius: var(--radius-md);
font-size: 12px;
font-weight: 650;
backdrop-filter: blur(8px);
border: 1px solid transparent;
}
body.vem-page-my-timesheets .alert-danger{
background: linear-gradient(135deg, rgba(254, 242, 242, 0.96), rgba(252, 228, 228, 0.9));
border-color: rgba(185, 28, 28, 0.28);
color: var(--danger-text);
}
body.vem-page-my-timesheets .alert-info{
background: linear-gradient(135deg, rgba(232, 241, 255, 0.96), rgba(220, 235, 255, 0.9));
border-color: rgba(31, 111, 235, 0.28);
color: var(--brand);
}
body.vem-page-my-timesheets .week-list{
display: flex;
flex-direction: column;
gap: 19.5px;
}
body.vem-page-my-timesheets .pager-row{
display: flex;
justify-content: center;
margin-top: 23px;
}
/* Week card - FIXED wrapping */
body.vem-page-my-timesheets .week-card{
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(8px);
border-radius: var(--radius-lg);
border: 1px solid rgba(255, 255, 255, 0.6);
overflow: hidden;
transition: all var(--transition-fast);
}
body.vem-page-my-timesheets .week-card.current-week{
border: 2px solid var(--brand);
box-shadow: var(--shadow-brand);
background: rgba(255, 255, 255, 0.8);
}
body.vem-page-my-timesheets .week-card:hover{
transform: translateY(-2px);
box-shadow: var(--shadow-md);
background: rgba(255, 255, 255, 0.85);
}
body.vem-page-my-timesheets .week-card-header{
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 13px;
padding: 15px 19.5px;
background: rgba(255, 255, 255, 0.5);
border-bottom: 1px solid var(--line);
}
body.vem-page-my-timesheets .week-info{
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
}
body.vem-page-my-timesheets .week-number{
display: inline-flex;
align-items: center;
padding: 5px 11.5px;
background: rgba(255, 255, 255, 0.9);
border-radius: 999px;
font-size: 12px;
font-weight: 700;
color: var(--ink);
border: 1px solid var(--line);
}
body.vem-page-my-timesheets .week-date{
font-size: 12px;
font-weight: 500;
color: var(--muted);
}
body.vem-page-my-timesheets .header-meta{
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
}
body.vem-page-my-timesheets .status-badge{
display: inline-flex;
align-items: center;
padding: 5px 11.5px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.02em;
}
body.vem-page-my-timesheets .status-pending{
background: var(--warning-bg);
border: 1px solid rgba(199, 119, 29, 0.3);
color: var(--warning-text);
}
body.vem-page-my-timesheets .status-approved{
background: var(--success-bg);
border: 1px solid rgba(22, 132, 91, 0.3);
color: var(--success-text);
}
body.vem-page-my-timesheets .status-rejected{
background: var(--danger-bg);
border: 1px solid rgba(185, 28, 28, 0.3);
color: var(--danger-text);
}
body.vem-page-my-timesheets .lock-badge{
font-size: 12px;
font-weight: 600;
color: var(--muted);
display: inline-flex;
align-items: center;
gap: 3.5px;
}
body.vem-page-my-timesheets .week-total{
font-size: 12px;
font-weight: 800;
color: var(--brand);
background: var(--brand-soft);
padding: 5px 11.5px;
border-radius: 999px;
}
body.vem-page-my-timesheets .week-card-body{
padding: 16.5px 19.5px;
overflow-x: auto;
}
body.vem-page-my-timesheets .entries-table{
width: 100%;
min-width: 900px;
border-collapse: separate;
border-spacing: 0;
font-size: 12px;
}
body.vem-page-my-timesheets .entries-table thead th{
text-align: left;
padding: 10px 10px;
background: rgba(255, 255, 255, 0.5);
color: var(--muted);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.07em;
text-transform: uppercase;
border-bottom: 1px solid var(--line);
}
body.vem-page-my-timesheets .entries-table tbody td{
padding: 11.5px 10px;
border-bottom: 1px solid rgba(85, 111, 145, 0.08);
background: transparent;
}
body.vem-page-my-timesheets .entries-table tbody tr:hover td{
background: rgba(255, 255, 255, 0.4);
}
body.vem-page-my-timesheets .entries-table td:first-child,
body.vem-page-my-timesheets .entries-table th:first-child{
padding-left: 13px;
}
body.vem-page-my-timesheets .entries-table td:last-child,
body.vem-page-my-timesheets .entries-table th:last-child{
padding-right: 13px;
}
body.vem-page-my-timesheets .remarks-box{
margin-top: 15px;
padding: 11.5px 15px;
background: rgba(255, 255, 255, 0.6);
border-radius: var(--radius-md);
border-left: 3px solid var(--danger);
font-size: 12px;
line-height: 1.55;
color: var(--ink-light);
}
body.vem-page-my-timesheets .remarks-box strong{
color: var(--danger-text);
font-weight: 700;
}
body.vem-page-my-timesheets .empty-state{
padding: 39.5px 19.5px;
text-align: center;
color: var(--muted);
font-size: 12px;
font-weight: 500;
background: rgba(255, 255, 255, 0.4);
border-radius: var(--radius-md);
}
/* Responsive layout */
@media (max-width: 980px){
body.vem-page-my-timesheets .app {
flex-direction: column;
}
body.vem-page-my-timesheets .main-content {
margin-left: 0;
padding: 16.5px;
height: auto;
overflow-y: auto;
}
body.vem-page-my-timesheets .top-bar {
flex-direction: column;
align-items: flex-start;
}
body.vem-page-my-timesheets .filter-bar form {
flex-direction: column;
align-items: stretch;
}
body.vem-page-my-timesheets .current-week-badge {
margin-left: 0;
text-align: center;
}
body.vem-page-my-timesheets .week-card-header {
flex-direction: column;
align-items: flex-start;
}
body.vem-page-my-timesheets .header-meta {
justify-content: flex-start;
}
body.vem-page-my-timesheets .panel-header,
body.vem-page-my-timesheets .panel-content {
padding: 16.5px;
}
}
@media (max-width: 520px) {
body.vem-page-my-timesheets .main-content{
padding: 13px;
}
body.vem-page-my-timesheets .page-title{
font-size: 19.5px;
}
body.vem-page-my-timesheets .week-card-header,
body.vem-page-my-timesheets .week-card-body{
padding: 13px;
}
body.vem-page-my-timesheets .entries-table{
min-width: 750px;
}
}
@media (prefers-reduced-motion: reduce) {
body.vem-page-my-timesheets *,
body.vem-page-my-timesheets *::before,
body.vem-page-my-timesheets *::after{
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: 1ms !important;
}
}
/* Weekly records sit one unmistakable visual layer above the main results panel. */
body.vem-page-my-timesheets .week-card {
overflow: hidden;
background: linear-gradient(145deg, #f8fbfe 0%, #c4d5e6 100%);
border: 1px solid #8fa8c0;
border-top: 4px solid #299b91;
box-shadow: 0 14px 30px rgba(15, 35, 62, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.92);
}
body.vem-page-my-timesheets .week-card-header {
background: linear-gradient(90deg, #c5d6e6 0%, #e9f0f6 100%);
border-bottom-color: #9db2c7;
}
body.vem-page-my-timesheets .week-card-body {
background: rgba(250, 252, 254, 0.76);
}
/* Submit Timesheet ---------------------------------------------------- */
body.vem-page-submit-timesheet {
--info: #1f6feb;
--info-bg: #e8f1ff;
}
body.vem-page-submit-timesheet {
font-family: "Segoe UI Variable", "Segoe UI", Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
min-height: 100vh;
height: 100vh;
margin: 0;
overflow: hidden;
color: var(--ink);
background:
radial-gradient(circle at 12% 14%, rgba(124, 58, 237, 0.05), transparent 34%),
radial-gradient(circle at 86% 18%, rgba(79, 70, 229, 0.08), transparent 32%),
radial-gradient(circle at 72% 88%, rgba(147, 51, 234, 0.06), transparent 36%),
linear-gradient(135deg, #e7dbff 0%, #a9a4ff 38%, #c1bdff 65%, #d9d7ff 100%);
overflow-x: hidden;
overflow-y: auto;
text-rendering: geometricPrecision;
-webkit-font-smoothing: antialiased;
}
body.vem-page-submit-timesheet::after {
content: "";
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background:
linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.34) 42%, transparent 68%),
linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(214, 199, 255, 0.22));
opacity: 0.92;
}
body.vem-page-submit-timesheet::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.02'/%3E%3C/svg%3E");
opacity: 0.15;
z-index: -1;
}
body.vem-page-submit-timesheet .app {
display: flex;
min-height: 100vh;
height: 100vh;
overflow: hidden;
}
body.vem-page-submit-timesheet .main-content {
flex: 1;
margin-left: 280px;
padding: 26px;
overflow-y: auto;
overflow-x: auto;
height: 100vh;
animation: pageRise 520ms var(--transition-smooth) both;
}
@keyframes pageRise {
from {
opacity: 0;
transform: translateY(14px) scale(0.995);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
body.vem-page-submit-timesheet .top-bar {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16.5px;
margin-bottom: 19.5px;
flex-wrap: wrap;
}
body.vem-page-submit-timesheet .page-title h1 {
margin: 0;
color: var(--ink);
font-size: 23px;
font-weight: 760;
letter-spacing: 0;
line-height: 1.14;
}
body.vem-page-submit-timesheet .page-title p {
max-width: 760px;
margin: 6.5px 0 0;
color: var(--muted);
font-size: 12px;
line-height: 1.6;
font-weight: 450;
}
body.vem-page-submit-timesheet .user-profile {
position: relative;
min-width: 220px;
display: flex;
align-items: center;
gap: 10px;
padding: 8px 11.5px 8px 8px;
overflow: hidden;
cursor: pointer;
border: 1px solid rgba(255, 255, 255, 0.78);
border-radius: var(--radius-xl);
background:
linear-gradient(135deg, rgba(231, 219, 255, 0.82), rgba(217, 200, 255, 0.42)),
radial-gradient(circle at 0% 0%, rgba(235, 242, 255, 0.92), rgba(225, 235, 255, 0.68) 52%, rgba(230, 240, 255, 0.7));
box-shadow:
0 20px 40px rgba(56, 88, 172, 0.08),
0 4px 12px rgba(0, 0, 0, 0.02),
inset 0 1px 0 rgba(255, 255, 255, 0.95),
inset 0 -1px 0 rgba(56, 88, 172, 0.06);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(18px) saturate(150%);
transition:
transform var(--transition-float),
box-shadow var(--transition-float),
border-color var(--transition-smooth);
}
body.vem-page-submit-timesheet .user-profile:hover {
transform: translateY(-4px);
border-color: rgba(31, 111, 235, 0.24);
box-shadow: var(--shadow-md), var(--shadow-gloss);
}
body.vem-page-submit-timesheet .user-profile:active {
transform: translateY(-1px) scale(0.992);
box-shadow: var(--shadow-sm), var(--shadow-gloss);
}
body.vem-page-submit-timesheet .user-avatar {
position: relative;
z-index: 1;
width: 42px;
height: 42px;
display: grid;
place-items: center;
flex: 0 0 auto;
border-radius: 14px;
color: #ffffff;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.02em;
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.2), transparent 38%),
linear-gradient(145deg, var(--brand), var(--brand-deep));
box-shadow:
0 12px 24px rgba(31, 111, 235, 0.24),
inset 0 1px 0 rgba(255, 255, 255, 0.34);
transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}
body.vem-page-submit-timesheet .user-name {
position: relative;
z-index: 1;
color: var(--ink);
font-size: 12px;
font-weight: 750;
line-height: 1.25;
}
body.vem-page-submit-timesheet .panel {
position: relative;
isolation: isolate;
overflow: visible; /* Changed from 'hidden' to prevent edge clipping */
border: 1px solid rgba(255, 255, 255, 0.82);
border-radius: var(--radius-lg);
background:
linear-gradient(135deg, rgba(231, 219, 255, 0.82), rgba(217, 200, 255, 0.42)),
radial-gradient(circle at 0% 0%, rgba(235, 242, 255, 0.92), rgba(225, 235, 255, 0.68) 52%, rgba(230, 240, 255, 0.7));
box-shadow:
0 20px 40px rgba(56, 88, 172, 0.08),
0 4px 12px rgba(0, 0, 0, 0.02);
/* Removed inset shadows that cause edge artifacts */
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(18px) saturate(145%);
transition:
transform var(--transition-float),
box-shadow var(--transition-float),
border-color var(--transition-smooth);
}
body.vem-page-submit-timesheet .panel::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
radial-gradient(circle at 16% 18%, rgba(31, 111, 235, 0.1), transparent 34%),
radial-gradient(circle at 92% 86%, rgba(119, 98, 227, 0.07), transparent 36%);
opacity: 0;
transition: opacity var(--transition-smooth);
}
body.vem-page-submit-timesheet .panel:hover {
transform: translateY(-2px);
border-color: rgba(31, 111, 235, 0.2);
box-shadow: var(--shadow-lg), var(--shadow-gloss);
}
body.vem-page-submit-timesheet .panel:hover::before {
opacity: 1;
}
body.vem-page-submit-timesheet .panel-header {
position: relative;
padding: 16.5px 19.5px;
border-bottom: 1px solid var(--line);
background: rgba(255, 255, 255, 0.4);
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
body.vem-page-submit-timesheet .panel-title {
margin: 0;
color: var(--ink);
font-size: 15px;
font-weight: 760;
}
body.vem-page-submit-timesheet .panel-subtitle {
margin-top: 5px;
color: var(--muted);
font-size: 12px;
font-weight: 470;
line-height: 1.5;
}
body.vem-page-submit-timesheet .panel-body {
padding: 19.5px;
}
body.vem-page-submit-timesheet .week-selector {
position: relative;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 11.5px;
padding: 13px 16.5px;
margin-bottom: 16.5px;
border: 1px solid rgba(255, 255, 255, 0.78);
border-radius: var(--radius-md);
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(248, 250, 255, 0.48)),
radial-gradient(circle at 0% 0%, rgba(235, 242, 255, 0.68), rgba(225, 235, 255, 0.48));
backdrop-filter: blur(16px) saturate(160%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
}
body.vem-page-submit-timesheet label {
color: var(--ink);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.02em;
}
body.vem-page-submit-timesheet .form-control {
min-height: 42px;
padding: 7.5px 11.5px;
border: 1px solid rgba(85, 111, 145, 0.24);
border-radius: var(--radius-md);
background: rgba(255, 255, 255, 0.88);
color: var(--ink);
font-family: inherit;
font-size: 12px;
font-weight: 500;
outline: none;
transition: all var(--transition-fast);
}
body.vem-page-submit-timesheet .form-control:focus {
border-color: var(--brand);
box-shadow: 0 0 0 4px var(--brand-glow);
background: var(--panel-solid);
}
body.vem-page-submit-timesheet .week-range {
color: var(--brand-deep);
font-weight: 750;
font-size: 12px;
}
body.vem-page-submit-timesheet .week-status {
display: inline-flex;
align-items: center;
padding: 5px 11.5px;
border-radius: 999px;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.02em;
border: 1px solid transparent;
transition: all var(--transition-fast);
}
body.vem-page-submit-timesheet .week-status-pending {
color: var(--warning);
background: linear-gradient(135deg, rgba(255, 248, 225, 0.95), rgba(255, 242, 204, 0.88));
border-color: rgba(199, 119, 29, 0.32);
}
body.vem-page-submit-timesheet .week-status-approved {
color: var(--success);
background: linear-gradient(135deg, rgba(230, 247, 240, 0.95), rgba(214, 242, 230, 0.88));
border-color: rgba(22, 132, 91, 0.32);
}
body.vem-page-submit-timesheet .week-status-rejected {
color: var(--danger);
background: linear-gradient(135deg, rgba(254, 242, 242, 0.95), rgba(252, 232, 232, 0.88));
border-color: rgba(185, 28, 28, 0.32);
}
body.vem-page-submit-timesheet .notice,
body.vem-page-submit-timesheet .alert {
padding: 11.5px 15px;
border-radius: var(--radius-md);
margin-bottom: 15px;
font-size: 12px;
font-weight: 650;
backdrop-filter: blur(8px);
border: 1px solid transparent;
}
body.vem-page-submit-timesheet .alert-error,
body.vem-page-submit-timesheet .notice-danger {
background: linear-gradient(135deg, rgba(254, 242, 242, 0.96), rgba(252, 228, 228, 0.9));
border-color: rgba(185, 28, 28, 0.28);
color: var(--danger);
}
body.vem-page-submit-timesheet .alert-success,
body.vem-page-submit-timesheet .notice-success {
background: linear-gradient(135deg, rgba(230, 247, 240, 0.96), rgba(214, 242, 230, 0.9));
border-color: rgba(22, 132, 91, 0.28);
color: var(--success);
}
body.vem-page-submit-timesheet .notice-warning {
background: linear-gradient(135deg, rgba(255, 248, 225, 0.96), rgba(255, 242, 204, 0.9));
border-color: rgba(199, 119, 29, 0.28);
color: var(--warning);
}
body.vem-page-submit-timesheet .notice-info {
background: linear-gradient(135deg, rgba(232, 241, 255, 0.96), rgba(222, 235, 255, 0.9));
border-color: rgba(31, 111, 235, 0.28);
color: var(--info);
}
body.vem-page-submit-timesheet .hidden {
display: none;
}
body.vem-page-submit-timesheet .table-wrapper {
max-width: 100%;
overflow-x: auto;
overflow-y: visible;
overscroll-behavior-inline: contain;
-webkit-overflow-scrolling: touch;
border-radius: var(--radius-md);
background: rgba(255, 255, 255, 0.4);
padding: 1px;
width: 100%;
}
body.vem-page-submit-timesheet .timesheet-table {
width: 100%;
min-width: 1120px;
border-collapse: separate;
border-spacing: 0;
font-size: 12px;
background: rgba(255, 255, 255, 0.6);
border-radius: var(--radius-md);
overflow: visible;
}
body.vem-page-submit-timesheet .timesheet-table th {
text-align: left;
padding: 11.5px 10px;
color: var(--ink);
background: rgba(255, 255, 255, 0.72);
border-bottom: 1px solid var(--line);
font-weight: 800;
font-size: 12px;
letter-spacing: 0.04em;
text-transform: uppercase;
}
body.vem-page-submit-timesheet .timesheet-table td {
padding: 10px;
border-bottom: 1px solid var(--line);
vertical-align: middle;
background: rgba(255, 255, 255, 0.48);
transition: background var(--transition-fast);
}
body.vem-page-submit-timesheet .timesheet-table tr:hover td {
background: rgba(255, 255, 255, 0.72);
}
body.vem-page-submit-timesheet .date-sub {
display: block;
color: var(--muted);
font-size: 11px;
font-weight: 500;
margin-top: 3px;
}
body.vem-page-submit-timesheet .project-select,
body.vem-page-submit-timesheet .project-search-input,
body.vem-page-submit-timesheet .task-select {
width: 150px;
background: rgba(255, 255, 255, 0.92);
border: 1px solid var(--line-strong);
border-radius: var(--radius-sm);
padding: 6.5px 8px;
font-size: 12px;
transition: all var(--transition-fast);
}
body.vem-page-submit-timesheet .project-select:focus,
body.vem-page-submit-timesheet .project-search-input:focus,
body.vem-page-submit-timesheet .task-select:focus {
border-color: var(--brand);
box-shadow: 0 0 0 3px var(--brand-glow);
outline: none;
}
body.vem-page-submit-timesheet .project-combobox {
position: relative;
z-index: 1;
width: 150px;
}
body.vem-page-submit-timesheet .timesheet-table tbody tr:focus-within {
position: relative;
z-index: 100;
}
body.vem-page-submit-timesheet .project-combobox:focus-within {
z-index: 1000;
}
body.vem-page-submit-timesheet .project-combobox-trigger {
width: 150px;
min-height: 42px;
background: var(--input-bg, var(--panel, #fff));
border: 1px solid var(--line-strong);
border-radius: var(--radius-sm);
padding: 6.5px 24.5px 6.5px 8px;
color: var(--ink);
font: inherit;
font-size: 12px;
text-align: left;
cursor: pointer;
}
body.vem-page-submit-timesheet .project-combobox-trigger::after {
content: "";
position: absolute;
right: 12px;
top: 50%;
width: 7px;
height: 7px;
border-right: 2px solid var(--ink);
border-bottom: 2px solid var(--ink);
transform: translateY(-65%) rotate(45deg);
pointer-events: none;
}
body.vem-page-submit-timesheet .project-combobox-panel {
position: fixed;
z-index: 9999;
width: 260px;
max-width: min(260px, calc(100vw - 40px));
padding: 6.5px;
border: 1px solid var(--line-strong);
border-radius: var(--radius-sm);
background: var(--panel, #ffffff);
color: var(--ink);
box-shadow: 0 16px 36px rgba(15, 23, 42, 0.18);
}
body.vem-page-submit-timesheet .project-combobox-panel[hidden] {
display: none;
}
body.vem-page-submit-timesheet .project-combobox-search {
width: 100%;
min-height: 36px;
margin-bottom: 6.5px;
border: 1px solid var(--line-strong);
border-radius: var(--radius-sm);
padding: 5.5px 7.5px;
font-size: 12px;
outline: none;
}
body.vem-page-submit-timesheet .project-combobox-list {
min-height: 44px;
max-height: 220px;
overflow-y: auto;
display: grid;
gap: 3.5px;
}
body.vem-page-submit-timesheet .project-combobox-option {
width: 100%;
border: 0;
border-radius: 5.5px;
background: transparent;
padding: 6.5px 7.5px;
color: var(--ink);
font-size: 12px;
text-align: left;
cursor: pointer;
}
body.vem-page-submit-timesheet .project-combobox-option:hover,
body.vem-page-submit-timesheet .project-combobox-option:focus {
background: rgba(37, 99, 235, 0.1);
outline: none;
}
body.vem-page-submit-timesheet .project-combobox-empty {
padding: 6.5px 7.5px;
color: var(--muted);
font-size: 12px;
}
body.vem-page-submit-timesheet .project-select-hidden {
display: none;
}
body.vem-page-submit-timesheet .day-input {
width: 70px;
text-align: center;
padding: 6.5px 5px;
border: 1px solid var(--line-strong);
border-radius: var(--radius-sm);
font-size: 12px;
font-weight: 600;
background: rgba(255, 255, 255, 0.92);
transition: all var(--transition-fast);
}
body.vem-page-submit-timesheet .day-input:focus {
border-color: var(--brand);
box-shadow: 0 0 0 3px var(--brand-glow);
outline: none;
}
body.vem-page-submit-timesheet .description-input {
width: 180px;
padding: 6.5px 8px;
border: 1px solid var(--line-strong);
border-radius: var(--radius-sm);
font-size: 12px;
background: rgba(255, 255, 255, 0.92);
}
body.vem-page-submit-timesheet .row-total {
color: var(--brand-deep);
font-weight: 800;
text-align: center;
font-size: 12px;
}
body.vem-page-submit-timesheet .display-only-row td {
background: linear-gradient(135deg, rgba(232, 241, 255, 0.6), rgba(222, 235, 255, 0.48));
}
body.vem-page-submit-timesheet .readonly-input,
body.vem-page-submit-timesheet .day-input-readonly {
background: rgba(145, 162, 181, 0.12);
color: var(--muted);
cursor: not-allowed;
border-color: var(--line);
}
body.vem-page-submit-timesheet .total-row td {
background: rgba(255, 255, 255, 0.72);
font-weight: 800;
color: var(--ink);
border-top: 1px solid var(--line-strong);
font-size: 12px;
}
body.vem-page-submit-timesheet .button-row {
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
margin-top: 19.5px;
}
body.vem-page-submit-timesheet .btn {
position: relative;
min-height: 42px;
padding: 7.5px 16.5px;
border: 1px solid transparent;
border-radius: var(--radius-md);
cursor: pointer;
font-family: inherit;
font-weight: 750;
font-size: 12px;
letter-spacing: 0.02em;
transition: all var(--transition-smooth);
overflow: hidden;
}
body.vem-page-submit-timesheet .btn:active {
transform: translateY(-1px) scale(0.98);
}
body.vem-page-submit-timesheet .btn-primary {
background: linear-gradient(135deg, var(--brand), var(--brand-deep));
color: #fff;
box-shadow: var(--shadow-xs), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
body.vem-page-submit-timesheet .btn-primary:hover {
background: linear-gradient(135deg, var(--brand-deep), #0f4eb5);
transform: translateY(-2px);
box-shadow: var(--shadow-brand);
}
body.vem-page-submit-timesheet .btn-muted {
background: rgba(255, 255, 255, 0.72);
color: var(--ink);
border-color: var(--line);
backdrop-filter: blur(8px);
}
body.vem-page-submit-timesheet .btn-muted:hover {
background: rgba(255, 255, 255, 0.9);
transform: translateY(-2px);
border-color: var(--brand);
box-shadow: var(--shadow-sm);
}
body.vem-page-submit-timesheet .btn-reminder {
background: linear-gradient(135deg, #f59e0b, #ec4899);
color: #fff;
border-color: rgba(236, 72, 153, 0.28);
box-shadow: 0 12px 28px rgba(236, 72, 153, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
body.vem-page-submit-timesheet .btn-reminder:hover {
background: linear-gradient(135deg, #ec4899, #7c3aed);
transform: translateY(-2px);
border-color: rgba(124, 58, 237, 0.36);
box-shadow: 0 18px 36px rgba(124, 58, 237, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.32);
}
body.vem-page-submit-timesheet .btn-reminder:disabled,
body.vem-page-submit-timesheet .btn-reminder:disabled:hover {
background: linear-gradient(135deg, rgba(22, 132, 91, 0.16), rgba(18, 166, 122, 0.1));
color: var(--success);
border-color: rgba(22, 132, 91, 0.28);
box-shadow: none;
transform: none;
}
body.vem-page-submit-timesheet .btn-danger {
background: linear-gradient(135deg, rgba(185, 28, 28, 0.12), rgba(185, 28, 28, 0.06));
color: var(--danger);
border-color: rgba(185, 28, 28, 0.28);
backdrop-filter: blur(8px);
}
body.vem-page-submit-timesheet .btn-danger:hover {
background: linear-gradient(135deg, rgba(185, 28, 28, 0.2), rgba(185, 28, 28, 0.12));
transform: translateY(-2px);
border-color: var(--danger);
}
body.vem-page-submit-timesheet .btn:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
}
body.vem-page-submit-timesheet .info-box {
position: relative;
padding: 15px 18px;
margin-top: 19.5px;
border: 1px solid rgba(255, 255, 255, 0.78);
border-radius: var(--radius-md);
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.68), rgba(248, 250, 255, 0.48)),
radial-gradient(circle at 0% 0%, rgba(235, 242, 255, 0.48), rgba(225, 235, 255, 0.38));
backdrop-filter: blur(16px) saturate(160%);
color: var(--muted);
font-size: 12px;
}
body.vem-page-submit-timesheet .info-box strong {
display: block;
color: var(--ink);
margin-bottom: 8px;
font-size: 12px;
font-weight: 760;
}
body.vem-page-submit-timesheet .info-box ul {
margin-left: 20px;
line-height: 1.8;
}
/* Scrollbar styling */
body.vem-page-submit-timesheet .work-row input:read-only,
body.vem-page-submit-timesheet .work-row select:disabled {
background: #f3f4f6;
cursor: not-allowed;
opacity: 0.75;
}
body.vem-page-submit-timesheet .work-row button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
@media (max-width: 768px) {
body.vem-page-submit-timesheet .app {
flex-direction: column;
}
body.vem-page-submit-timesheet .main-content {
margin-left: 0;
padding: 16.5px;
height: auto;
overflow-y: auto;
}
}
@media (max-width: 520px) {
body.vem-page-submit-timesheet .main-content {
padding: 16.5px 13px;
}
body.vem-page-submit-timesheet .page-title h1 {
font-size: 19.5px;
}
body.vem-page-submit-timesheet .panel-header,
body.vem-page-submit-timesheet .panel-body {
padding: 15px;
}
}
@media (prefers-reduced-motion: reduce) {
body.vem-page-submit-timesheet *,
body.vem-page-submit-timesheet *::before,
body.vem-page-submit-timesheet *::after {
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: 1ms !important;
}
}
/* Apply Leave completion utilities ----------------------------------- */
body.vem-page-apply-leave .upcoming-panel {
margin-top: 12.5px;
}
body.vem-page-apply-leave .attachment-download {
display: inline-flex;
align-items: center;
margin-top: 5.5px;
text-decoration: none;
}
body.vem-page-apply-leave .upcoming-cancel-form {
margin-top: 5.5px;
}
body.vem-page-apply-leave .cancel-leave-button {
margin-top: 4.5px;
}
/* Apply Leave layout hierarchy --------------------------------------- */
body.vem-page-apply-leave .layout {
align-items: stretch;
}
body.vem-page-apply-leave .layout > .panel,
body.vem-page-apply-leave .request-panel {
height: 100%;
}
body.vem-page-apply-leave .upcoming-panel {
width: 100%;
margin-top: 12.5px;
}
body.vem-page-apply-leave .upcoming-panel .upcoming {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
align-items: start;
gap: 8px;
max-height: min(46vh, 520px);
overflow-y: auto;
padding: 2px 4px 2px 2px;
}
body.vem-page-apply-leave .upcoming-panel .request {
min-width: 0;
height: fit-content;
}
@media (max-width: 650px) {
body.vem-page-apply-leave .upcoming-panel .upcoming {
grid-template-columns: 1fr;
max-height: 520px;
}
}
/* New Leave Request uses the calendar-matched height intentionally. */
body.vem-page-apply-leave .request-panel {
display: flex;
flex-direction: column;
}
body.vem-page-apply-leave .request-panel > h2 {
margin-bottom: 15px;
}
body.vem-page-apply-leave .request-panel > form {
display: flex;
flex: 1;
flex-direction: column;
min-height: 0;
}
body.vem-page-apply-leave .request-panel .form-grid {
align-content: start;
column-gap: 10.5px;
row-gap: 12.5px;
}
body.vem-page-apply-leave .request-panel .field {
gap: 5.5px;
}
body.vem-page-apply-leave .request-panel .actions {
justify-content: flex-start;
margin-top: auto;
margin-bottom: 20px;
padding-top: 19px;
}
body.vem-page-apply-leave .request-panel .btn-primary {
min-width: 210px;
}
@media (max-width: 650px) {
body.vem-page-apply-leave .request-panel .actions {
margin-top: 13.5px;
margin-bottom: 0;
padding-top: 0;
}
body.vem-page-apply-leave .request-panel .btn-primary {
width: 100%;
min-width: 0;
}
}
/* Platform Administration pages (platform_*.php) — styling moved to assets/css/platform-admin.css, scoped under body.vem-platform-app. See that file. */
/* Project catalogue and assignment pages — migrated from page-local CSS. */
/* projects_tasks.php */
body.vem-page-projects-tasks {
--info: #1f6feb;
--info-bg: #e8f1ff;
}
body.vem-page-projects-tasks .required-marker {
color: #c81e1e;
margin-left: 3px;
}
body.vem-page-projects-tasks .po-input-shell {
position: relative;
}
body.vem-page-projects-tasks .po-input-shell .form-control {
padding-right: 154px;
}
body.vem-page-projects-tasks #projectPoId::-ms-reveal, body.vem-page-projects-tasks #projectPoId::-ms-clear {
display: none;
}
body.vem-page-projects-tasks .po-inline-actions {
position: absolute;
top: 50%;
right: 8px;
display: flex;
align-items: center;
gap: 3.5px;
transform: translateY(-50%);
}
body.vem-page-projects-tasks .po-inline-button {
position: relative;
min-height: 30px;
border: 1px solid rgba(31, 111, 235, 0.2);
border-radius: 6.5px;
color: #0f57c9;
background: #e5efff;
font: inherit;
font-size: 12px;
font-weight: 750;
padding: 4px 7.5px;
cursor: pointer;
}
body.vem-page-projects-tasks .po-inline-button:hover, body.vem-page-projects-tasks .po-inline-button:focus-visible {
color: #1248aa;
background: #d8e8ff;
outline: 2px solid rgba(31, 111, 235, 0.22);
outline-offset: 1px;
}
body.vem-page-projects-tasks .po-visibility-button {
display: inline-grid;
place-items: center;
width: 32px;
min-height: 30px;
padding: 4px;
color: #52657f;
background: transparent;
border-color: transparent;
}
body.vem-page-projects-tasks .po-visibility-button svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
body.vem-page-projects-tasks .po-visibility-button .po-eye-open {
display: block;
}
body.vem-page-projects-tasks .po-visibility-button .po-eye-closed {
display: none;
}
body.vem-page-projects-tasks .po-visibility-button.is-visible .po-eye-open {
display: none;
}
body.vem-page-projects-tasks .po-visibility-button.is-visible .po-eye-closed {
display: block;
}
body.vem-page-projects-tasks .po-inline-button[data-tooltip]::after {
content: attr(data-tooltip);
position: absolute;
right: 0;
bottom: calc(100% + 9px);
z-index: 10;
width: max-content;
max-width: 190px;
border-radius: 6.5px;
padding: 5.5px 7.5px;
color: #fff;
background: #172334;
box-shadow: 0 8px 20px rgba(23, 35, 52, 0.18);
font-size: 12px;
font-weight: 600;
line-height: 1.25;
pointer-events: none;
opacity: 0;
transform: translateY(3px);
transition: opacity 150ms ease, transform 150ms ease;
}
body.vem-page-projects-tasks .po-inline-button[data-tooltip]:hover::after, body.vem-page-projects-tasks .po-inline-button[data-tooltip]:focus-visible::after {
opacity: 1;
transform: translateY(0);
}
@media (max-width: 560px) {
body.vem-page-projects-tasks .po-input-shell .form-control {
padding-right: 142px;
}
body.vem-page-projects-tasks .po-inline-button {
font-size: 12px;
padding-inline: 8px;
}
}
body.vem-page-projects-tasks {
font-family: "Segoe UI Variable", "Segoe UI", Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
min-height: 100vh;
height: 100vh;
margin: 0;
overflow: hidden;
color: var(--ink);
background:
radial-gradient(circle at 12% 14%, rgba(124, 58, 237, 0.05), transparent 34%),
radial-gradient(circle at 86% 18%, rgba(79, 70, 229, 0.08), transparent 32%),
radial-gradient(circle at 72% 88%, rgba(147, 51, 234, 0.06), transparent 36%),
linear-gradient(135deg, #e7dbff 0%, #a9a4ff 38%, #c1bdff 65%, #d9d7ff 100%);
overflow-x: hidden;
overflow-y: auto;
text-rendering: geometricPrecision;
-webkit-font-smoothing: antialiased;
}
body.vem-page-projects-tasks::after {
content: "";
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background:
linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.34) 42%, transparent 68%),
linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(214, 199, 255, 0.22));
opacity: 0.92;
}
body.vem-page-projects-tasks::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.02'/%3E%3C/svg%3E");
opacity: 0.15;
z-index: -1;
}
body.vem-page-projects-tasks .app {
display: flex;
min-height: 100vh;
height: 100vh;
overflow: hidden;
}
body.vem-page-projects-tasks .main-content {
flex: 1;
margin-left: 280px;
padding: 26px;
overflow-y: auto;
overflow-x: auto;
height: 100vh;
animation: pageRise 520ms var(--transition-smooth) both;
}
@keyframes pageRise {
from {
opacity: 0;
transform: translateY(14px) scale(0.995);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
body.vem-page-projects-tasks .top-bar {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16.5px;
margin-bottom: 19.5px;
flex-wrap: wrap;
}
body.vem-page-projects-tasks .page-title h1 {
margin: 0;
color: var(--ink);
font-size: 23px;
font-weight: 760;
letter-spacing: 0;
line-height: 1.14;
margin-bottom: 3.5px;
}
body.vem-page-projects-tasks .page-title p {
max-width: 760px;
margin: 3.5px 0 0;
color: var(--muted);
font-size: 12px;
line-height: 1.6;
font-weight: 450;
}
body.vem-page-projects-tasks .user-profile {
position: relative;
min-width: 220px;
display: flex;
align-items: center;
gap: 10px;
padding: 8px 11.5px 8px 8px;
overflow: hidden;
cursor: pointer;
border: 1px solid rgba(255, 255, 255, 0.78);
border-radius: var(--radius-xl);
background:
linear-gradient(135deg, rgba(231, 219, 255, 0.82), rgba(217, 200, 255, 0.42)),
radial-gradient(circle at 0% 0%, rgba(235, 242, 255, 0.92), rgba(225, 235, 255, 0.68) 52%, rgba(230, 240, 255, 0.7));
box-shadow: 0 20px 40px rgba(56, 88, 172, 0.08);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(18px) saturate(150%);
transition:
transform var(--transition-float),
box-shadow var(--transition-float),
border-color var(--transition-smooth);
}
body.vem-page-projects-tasks .user-profile:hover {
transform: translateY(-4px);
border-color: rgba(31, 111, 235, 0.24);
box-shadow: var(--shadow-md);
}
body.vem-page-projects-tasks .user-profile:active {
transform: translateY(-1px) scale(0.992);
box-shadow: var(--shadow-sm);
}
body.vem-page-projects-tasks .user-avatar {
position: relative;
z-index: 1;
width: 42px;
height: 42px;
display: grid;
place-items: center;
flex: 0 0 auto;
border-radius: 14px;
color: #ffffff;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.02em;
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.2), transparent 38%),
linear-gradient(145deg, var(--brand), var(--brand-deep));
box-shadow:
0 12px 24px rgba(31, 111, 235, 0.24),
inset 0 1px 0 rgba(255, 255, 255, 0.34);
transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}
body.vem-page-projects-tasks .user-name {
position: relative;
z-index: 1;
color: var(--ink);
font-size: 12px;
font-weight: 750;
line-height: 1.25;
word-break: break-word;
}
body.vem-page-projects-tasks /* Fix for card corner edge artifacts - ensures clean rounded corners */
.panel, body.vem-page-projects-tasks .list-item, body.vem-page-projects-tasks .modal {
overflow: visible;
box-shadow: 0 20px 40px rgba(56, 88, 172, 0.08);
}
body.vem-page-projects-tasks .grid-2 {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 19.5px;
}
body.vem-page-projects-tasks .panel {
position: relative;
isolation: isolate;
background: var(--surface);
border: 1px solid rgba(255, 255, 255, 0.82);
border-radius: var(--radius-lg);
overflow: hidden;
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(18px) saturate(145%);
background:
linear-gradient(135deg, rgba(231, 219, 255, 0.82), rgba(217, 200, 255, 0.42)),
radial-gradient(circle at 0% 0%, rgba(235, 242, 255, 0.92), rgba(225, 235, 255, 0.68) 52%, rgba(230, 240, 255, 0.7));
transition:
transform var(--transition-float),
box-shadow var(--transition-float),
border-color var(--transition-smooth);
}
body.vem-page-projects-tasks .section-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 11.5px;
padding: 16.5px 19.5px;
border-bottom: 1px solid var(--line);
background: rgba(255, 255, 255, 0.4);
}
body.vem-page-projects-tasks .section-header h2 {
margin: 0;
color: var(--ink);
font-size: 15px;
font-weight: 760;
}
body.vem-page-projects-tasks .section-actions {
display: flex;
align-items: center;
gap: 8px;
}
body.vem-page-projects-tasks .filters {
display: flex;
flex-wrap: wrap;
align-items: end;
gap: 10px;
margin-bottom: 13px;
}
body.vem-page-projects-tasks .filters > div { display: grid; gap: 5px; }
body.vem-page-projects-tasks .filters label {
color: var(--muted);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
body.vem-page-projects-tasks .pager-row {
display: flex;
justify-content: center;
margin-top: 13px;
}
body.vem-page-projects-tasks .search-input, body.vem-page-projects-tasks .form-control {
width: 100%;
min-height: 40px;
padding: 7.5px 11.5px;
border: 1px solid rgba(85, 111, 145, 0.24);
border-radius: var(--radius-md);
background: rgba(255, 255, 255, 0.88);
color: var(--ink);
font-family: inherit;
font-size: 12px;
font-weight: 500;
outline: none;
transition: all var(--transition-fast);
}
body.vem-page-projects-tasks .search-input {
width: 210px;
}
body.vem-page-projects-tasks .search-input:focus, body.vem-page-projects-tasks .form-control:focus {
border-color: var(--brand);
box-shadow: 0 0 0 4px var(--brand-glow);
background: var(--panel-solid);
}
body.vem-page-projects-tasks .list {
max-height: 620px;
overflow-y: auto;
padding: 16.5px;
}
body.vem-page-projects-tasks .list-item {
position: relative;
padding: 15px;
margin-bottom: 11.5px;
border: 1px solid rgba(255, 255, 255, 0.78);
border-radius: var(--radius-md);
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(248, 250, 255, 0.48)),
radial-gradient(circle at 0% 0%, rgba(235, 242, 255, 0.68), rgba(225, 235, 255, 0.48));
backdrop-filter: blur(16px) saturate(160%);
transition:
transform var(--transition-float),
box-shadow var(--transition-float),
border-color var(--transition-smooth);
}
body.vem-page-projects-tasks .list-item:hover {
transform: translateY(-2px);
border-color: rgba(31, 111, 235, 0.24);
box-shadow: var(--shadow-md);
}
body.vem-page-projects-tasks .list-item:last-child {
margin-bottom: 0;
}
body.vem-page-projects-tasks .item-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 10px;
}
body.vem-page-projects-tasks .item-name {
color: var(--ink);
font-size: 12.5px;
font-weight: 800;
overflow-wrap: anywhere;
}
body.vem-page-projects-tasks .item-actions {
display: flex;
flex-wrap: wrap;
gap: 6.5px;
justify-content: flex-end;
}
body.vem-page-projects-tasks .item-meta {
margin-top: 8px;
color: var(--muted);
font-size: 12px;
font-weight: 500;
}
body.vem-page-projects-tasks .assigned-list {
margin-top: 11.5px;
padding-top: 11.5px;
border-top: 1px solid var(--line);
}
body.vem-page-projects-tasks .assigned-title {
color: var(--muted);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
margin-bottom: 8px;
}
body.vem-page-projects-tasks .assigned-items {
display: flex;
flex-wrap: wrap;
gap: 6.5px;
}
body.vem-page-projects-tasks .assigned-badge {
display: inline-flex;
align-items: center;
gap: 6.5px;
max-width: 100%;
padding: 4px 10px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.72);
border: 1px solid var(--line);
color: var(--brand);
font-size: 12px;
font-weight: 700;
}
body.vem-page-projects-tasks .badge-remove {
border: 0;
background: transparent;
color: var(--danger);
cursor: pointer;
font-weight: 900;
line-height: 1;
font-size: 12px;
transition: color var(--transition-fast);
}
body.vem-page-projects-tasks .badge-remove:hover {
color: var(--danger);
opacity: 0.8;
}
body.vem-page-projects-tasks .btn {
position: relative;
min-height: 38px;
padding: 6.5px 15px;
border: 1px solid transparent;
border-radius: var(--radius-md);
cursor: pointer;
font-family: inherit;
font-size: 12px;
font-weight: 750;
letter-spacing: 0.02em;
transition: all var(--transition-smooth);
overflow: hidden;
}
body.vem-page-projects-tasks .btn:active {
transform: translateY(1px);
}
body.vem-page-projects-tasks .btn-primary {
background: linear-gradient(135deg, var(--brand), var(--brand-deep));
color: #fff;
box-shadow: var(--shadow-xs), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
body.vem-page-projects-tasks .btn-primary:hover {
background: linear-gradient(135deg, var(--brand-deep), #0f4eb5);
transform: translateY(-2px);
box-shadow: var(--shadow-brand);
}
body.vem-page-projects-tasks .btn-muted {
background: rgba(255, 255, 255, 0.72);
color: var(--ink-light);
border-color: var(--line);
}
body.vem-page-projects-tasks .btn-muted:hover {
background: rgba(255, 255, 255, 0.9);
transform: translateY(-2px);
border-color: var(--brand);
box-shadow: var(--shadow-sm);
}
body.vem-page-projects-tasks .btn-success {
background: linear-gradient(135deg, rgba(22, 132, 91, 0.12), rgba(22, 132, 91, 0.06));
color: var(--success);
border-color: rgba(22, 132, 91, 0.28);
}
body.vem-page-projects-tasks .btn-success:hover {
background: linear-gradient(135deg, rgba(22, 132, 91, 0.2), rgba(22, 132, 91, 0.12));
transform: translateY(-2px);
border-color: var(--success);
}
body.vem-page-projects-tasks .btn-danger {
background: linear-gradient(135deg, rgba(185, 28, 28, 0.12), rgba(185, 28, 28, 0.06));
color: var(--danger);
border-color: rgba(185, 28, 28, 0.28);
}
body.vem-page-projects-tasks .btn-danger:hover {
background: linear-gradient(135deg, rgba(185, 28, 28, 0.2), rgba(185, 28, 28, 0.12));
transform: translateY(-2px);
border-color: var(--danger);
}
body.vem-page-projects-tasks .project-count {
border: 0;
border-radius: 999px;
padding: 3.5px 10px;
background: linear-gradient(135deg, rgba(31, 111, 235, 0.12), rgba(31, 111, 235, 0.06));
color: var(--brand);
cursor: pointer;
font-size: 12px;
font-weight: 750;
transition: all var(--transition-fast);
}
body.vem-page-projects-tasks .project-count:hover {
background: linear-gradient(135deg, rgba(31, 111, 235, 0.2), rgba(31, 111, 235, 0.12));
transform: scale(1.02);
}
body.vem-page-projects-tasks .empty-state {
padding: 44.5px 16.5px;
color: var(--muted);
text-align: center;
font-size: 12px;
font-weight: 600;
}
body.vem-page-projects-tasks .alert {
padding: 11.5px 15px;
border-radius: var(--radius-md);
margin-bottom: 15px;
font-size: 12px;
font-weight: 650;
backdrop-filter: blur(8px);
border: 1px solid transparent;
}
body.vem-page-projects-tasks .alert-error {
background: linear-gradient(135deg, rgba(254, 242, 242, 0.96), rgba(252, 228, 228, 0.9));
border-color: rgba(185, 28, 28, 0.28);
color: var(--danger);
}
body.vem-page-projects-tasks .alert-success {
background: linear-gradient(135deg, rgba(230, 247, 240, 0.96), rgba(214, 242, 230, 0.9));
border-color: rgba(22, 132, 91, 0.28);
color: var(--success);
}
body.vem-page-projects-tasks .modal-overlay {
display: none;
position: fixed;
inset: 0;
z-index: 1000;
align-items: center;
justify-content: center;
padding: 16.5px;
background: rgba(15, 23, 42, 0.45);
backdrop-filter: blur(4px);
}
body.vem-page-projects-tasks .modal-overlay.active {
display: flex;
}
body.vem-page-projects-tasks .modal {
width: min(100%, 480px);
max-height: calc(100vh - 40px);
overflow: visible;
border: 1px solid rgba(255, 255, 255, 0.82);
border-radius: var(--radius-lg);
background:
linear-gradient(135deg, rgba(231, 219, 255, 0.82), rgba(217, 200, 255, 0.42)),
radial-gradient(circle at 0% 0%, rgba(235, 242, 255, 0.92), rgba(225, 235, 255, 0.68) 52%, rgba(230, 240, 255, 0.7));
backdrop-filter: blur(20px) saturate(180%);
}
body.vem-page-projects-tasks .modal-header, body.vem-page-projects-tasks .modal-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 15px 18px;
background: rgba(255, 255, 255, 0.4);
}
body.vem-page-projects-tasks .modal-header {
border-bottom: 1px solid var(--line);
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
body.vem-page-projects-tasks .modal-footer {
justify-content: flex-end;
border-top: 1px solid var(--line);
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
body.vem-page-projects-tasks .modal-header h3 {
margin: 0;
color: var(--ink);
font-size: 15px;
font-weight: 760;
}
body.vem-page-projects-tasks .modal-close {
width: 34px;
height: 34px;
border: 0;
border-radius: var(--radius-md);
background: rgba(255, 255, 255, 0.72);
color: var(--muted);
cursor: pointer;
font-size: 18px;
line-height: 1;
transition: all var(--transition-fast);
}
body.vem-page-projects-tasks .modal-close:hover {
background: rgba(255, 255, 255, 0.9);
color: var(--danger);
}
body.vem-page-projects-tasks .modal-body {
padding: 18px;
}
body.vem-page-projects-tasks .form-group {
margin-bottom: 15px;
}
body.vem-page-projects-tasks .form-group label {
display: block;
margin-bottom: 5.5px;
color: var(--ink);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.02em;
}
body.vem-page-projects-tasks .view-project-row {
padding: 10px 0;
border-bottom: 1px solid var(--line);
color: var(--brand);
font-weight: 500;
}
body.vem-page-projects-tasks .view-project-row:last-child {
border-bottom: 0;
}
body.vem-page-projects-tasks /* Scrollbar styling */
@media (max-width: 960px) {
.grid-2 {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
body.vem-page-projects-tasks .main-content {
margin-left: 86px;
padding: 16.5px;
}
body.vem-page-projects-tasks .top-bar, body.vem-page-projects-tasks .section-header {
flex-direction: column;
align-items: stretch;
}
body.vem-page-projects-tasks .section-actions {
flex-direction: column;
align-items: stretch;
}
body.vem-page-projects-tasks .search-input {
width: 100%;
}
body.vem-page-projects-tasks .user-profile {
min-width: 0;
}
body.vem-page-projects-tasks .page-title h1 {
font-size: 19.5px;
}
body.vem-page-projects-tasks .item-header {
flex-direction: column;
}
body.vem-page-projects-tasks .item-actions {
justify-content: flex-start;
}
}
@media (max-width: 520px) {
body.vem-page-projects-tasks .main-content {
margin-left: 0;
padding: 16.5px 13px;
}
body.vem-page-projects-tasks .panel {
border-radius: var(--radius-md);
}
body.vem-page-projects-tasks .section-header {
padding: 13px 15px;
}
body.vem-page-projects-tasks .list {
padding: 13px;
}
body.vem-page-projects-tasks .list-item {
padding: 11.5px;
}
}
@media (prefers-reduced-motion: reduce) {
:where(body.vem-page-projects-tasks *), body.vem-page-projects-tasks *::before, body.vem-page-projects-tasks *::after {
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: 1ms !important;
}
}
/* project_assignments.php */
body.vem-page-project-assignments { height: 100vh; overflow: hidden; }
body.vem-page-project-assignments .app { display: flex; height: 100vh; overflow: hidden; }
body.vem-page-project-assignments .main-content { flex: 1; height: 100vh; margin-left: 270px; padding: 28px 31px 37.5px; overflow: auto; }
body.vem-page-project-assignments .top-bar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 23px; flex-wrap: wrap; }
body.vem-page-project-assignments .user-profile { min-width: 220px; display: flex; align-items: center; gap: 10px; padding: 8px 11.5px 8px 8px; border: 1px solid rgba(255,255,255,.78); border-radius: var(--radius-xl); background: rgba(255,255,255,.58); box-shadow: var(--shadow-sm); }
body.vem-page-project-assignments .user-avatar { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px; color: #fff; font-weight: 800; background: linear-gradient(145deg,var(--brand),var(--brand-deep)); }
body.vem-page-project-assignments .user-name { font-weight: 760; }
body.vem-page-project-assignments .panel { position: relative; padding: 19.5px; margin-bottom: 18px; border: 1px solid rgba(255,255,255,.82); border-radius: var(--radius-lg); background: linear-gradient(135deg,rgba(231,219,255,.82),rgba(217,200,255,.42)),radial-gradient(circle at 0 0,rgba(235,242,255,.92),rgba(225,235,255,.68) 52%,rgba(230,240,255,.7)); box-shadow: var(--shadow-md); backdrop-filter: blur(18px) saturate(145%); }
body.vem-page-project-assignments .assignment-create-panel { z-index: 10; }
body.vem-page-project-assignments .panel-header { display: flex; align-items: center; justify-content: space-between; gap: 13px; margin-bottom: 16.5px; flex-wrap: wrap; }
body.vem-page-project-assignments .panel-header h2 { font-size: 16.5px; }
body.vem-page-project-assignments .assignment-grid { display: grid; grid-template-columns: minmax(180px,1fr) minmax(240px,1.35fr) minmax(130px,.65fr) minmax(150px,.75fr) minmax(155px,.72fr) auto; gap: 11.5px; align-items: end; }
body.vem-page-project-assignments .field label { display: block; margin-bottom: 5.5px; color: #52647d; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
body.vem-page-project-assignments .field input, body.vem-page-project-assignments .field select { width: 100%; min-height: 44px; padding: 8px 10.5px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--input-bg, var(--panel, #fff)); color: var(--ink); font: inherit; font-size: 12px; }
body.vem-page-project-assignments .field input:focus, body.vem-page-project-assignments .field select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow); }
body.vem-page-project-assignments .user-combobox { position: relative; }
body.vem-page-project-assignments .user-options { position: absolute; z-index: 50; top: calc(100% + 6px); left: 0; right: 0; max-height: 260px; overflow: auto; padding: 5.5px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--panel, #fff); box-shadow: var(--shadow-lg); }
body.vem-page-project-assignments .user-options[hidden] { display: none; }
body.vem-page-project-assignments .user-option { width: 100%; display: block; padding: 8px; border: 0; border-radius: 7.5px; background: transparent; text-align: left; cursor: pointer; }
body.vem-page-project-assignments .user-option[hidden] { display: none; }
body.vem-page-project-assignments .user-option:hover, body.vem-page-project-assignments .user-option:focus { outline: none; background: var(--brand-soft); }
body.vem-page-project-assignments .user-option strong, body.vem-page-project-assignments .user-option span { display: block; }
body.vem-page-project-assignments .user-option span { margin-top: 2px; color: var(--muted); font-size: 11px; }
body.vem-page-project-assignments .filters { display: grid; grid-template-columns: 2fr 1fr 1fr auto auto; gap: 10px; padding: 13px; margin-bottom: 15px; border: 1px solid var(--line); border-radius: var(--radius-md); background: rgba(255,255,255,.54); align-items: end; }
body.vem-page-project-assignments .table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-md); background: rgba(255,255,255,.5); }
body.vem-page-project-assignments .assignment-table { width: 100%; min-width: 1120px; border-collapse: separate; border-spacing: 0; font-size: 12px; }
body.vem-page-project-assignments .assignment-table th { padding: 10.5px 10px; color: #52647d; background: rgba(255,255,255,.76); border-bottom: 1px solid var(--line); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; text-align: left; white-space: nowrap; }
body.vem-page-project-assignments .assignment-table td { padding: 11.5px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; background: rgba(255,255,255,.42); }
body.vem-page-project-assignments .assignment-table tbody tr:hover td { background: rgba(239,246,255,.72); }
body.vem-page-project-assignments .identity strong, body.vem-page-project-assignments .identity span { display: block; }
body.vem-page-project-assignments .identity span { margin-top: 3px; color: var(--muted); font-size: 11px; }
body.vem-page-project-assignments .rate { font-weight: 800; color: var(--brand-deep); white-space: nowrap; }
body.vem-page-project-assignments .rate-meta { margin-top: 3px; color: var(--muted); font-size: 11px; }
body.vem-page-project-assignments .status-badge { display: inline-flex; padding: 4px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; text-transform: capitalize; }
body.vem-page-project-assignments .status-active { color: #116a49; border: 1px solid rgba(22,132,91,.25); background: var(--success-bg); }
body.vem-page-project-assignments .status-inactive { color: #991b1b; border: 1px solid rgba(185,28,28,.24); background: var(--danger-bg); }
body.vem-page-project-assignments .status-scheduled { color: #8a5a08; border: 1px solid rgba(199,119,29,.24); background: var(--warning-bg); }
body.vem-page-project-assignments .row-actions { display: flex; gap: 5.5px; flex-wrap: wrap; }
body.vem-page-project-assignments .btn { position: relative; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 6.5px 12.5px; border: 1px solid transparent; border-radius: var(--radius-md); font: inherit; font-size: 12px; font-weight: 760; cursor: pointer; }
body.vem-page-project-assignments .btn-primary { color: #fff; background: linear-gradient(135deg,var(--brand),var(--brand-deep)); }
body.vem-page-project-assignments .btn-muted { color: var(--ink-light); border-color: var(--line); background: var(--panel, rgba(255,255,255,.74)); }
body.vem-page-project-assignments .btn-danger { color: var(--danger); border-color: rgba(185,28,28,.2); background: rgba(254,242,242,.84); }
body.vem-page-project-assignments .btn-small { min-height: 34px; padding: 5px 9px; }
body.vem-page-project-assignments .alert { margin-bottom: 15px; padding: 11.5px 15px; border-radius: var(--radius-md); font-size: 12px; font-weight: 650; }
body.vem-page-project-assignments .alert-error { color: var(--danger); border: 1px solid rgba(185,28,28,.28); background: var(--danger-bg); }
body.vem-page-project-assignments .alert-success { color: var(--success); border: 1px solid rgba(22,132,91,.28); background: var(--success-bg); }
body.vem-page-project-assignments .empty-state { padding: 39.5px 16.5px; color: var(--muted); text-align: center; border: 1px dashed var(--line-strong); border-radius: var(--radius-md); background: var(--panel-soft, rgba(255,255,255,.4)); }
body.vem-page-project-assignments .modal-overlay { position: fixed; z-index: 1000; inset: 0; display: none; place-items: center; padding: 16.5px; background: rgba(15,23,42,.42); backdrop-filter: blur(4px); }
body.vem-page-project-assignments .modal-overlay.active { display: grid; }
body.vem-page-project-assignments .modal { width: min(540px,100%); max-height: calc(100vh - 40px); overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel, rgba(255,255,255,.97)); color: var(--ink); box-shadow: 0 28px 72px rgba(29,62,104,.22); }
body.vem-page-project-assignments .modal-header, body.vem-page-project-assignments .modal-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 18px; border-bottom: 1px solid var(--line); }
body.vem-page-project-assignments .modal-footer { justify-content: flex-end; border-top: 1px solid var(--line); border-bottom: 0; }
body.vem-page-project-assignments .modal-body { padding: 18px; }
body.vem-page-project-assignments .modal-close { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel, #fff); color: var(--ink); cursor: pointer; font-size: 16.5px; }
body.vem-page-project-assignments .modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11.5px; }
body.vem-page-project-assignments .modal-grid .wide { grid-column: 1 / -1; }
body.vem-page-project-assignments .history-list { display: grid; gap: 8px; }
body.vem-page-project-assignments .history-item { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 10px 11.5px; border: 1px solid var(--line); border-radius: var(--radius-md); background: rgba(248,251,255,.86); }
body.vem-page-project-assignments .history-period { color: var(--muted); font-size: 12px; }
@media (max-width: 1180px) { body.vem-page-project-assignments .assignment-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } body.vem-page-project-assignments .assignment-grid .btn { width: 100%; } }
@media (max-width: 900px) { body.vem-page-project-assignments .main-content { margin-left: 0; padding: 70.5px 16.5px 29.5px; } body.vem-page-project-assignments .filters { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { body.vem-page-project-assignments .assignment-grid, body.vem-page-project-assignments .filters, body.vem-page-project-assignments .modal-grid { grid-template-columns: 1fr; } body.vem-page-project-assignments .modal-grid .wide { grid-column: auto; } }
/* Reports and Profile pages — migrated from page-local CSS. */
/* reports.php */
body.vem-page-reports {
--info: #1f6feb;
--info-bg: #e8f1ff;
}
body.vem-page-reports {
font-family: "Segoe UI Variable", "Segoe UI", Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
min-height: 100vh;
height: 100vh;
margin: 0;
overflow: hidden;
color: var(--ink);
background:
radial-gradient(circle at 12% 14%, rgba(124, 58, 237, 0.05), transparent 34%),
radial-gradient(circle at 86% 18%, rgba(79, 70, 229, 0.08), transparent 32%),
radial-gradient(circle at 72% 88%, rgba(147, 51, 234, 0.06), transparent 36%),
linear-gradient(135deg, #e7dbff 0%, #a9a4ff 38%, #c1bdff 65%, #d9d7ff 100%);
overflow-x: hidden;
overflow-y: auto;
text-rendering: geometricPrecision;
-webkit-font-smoothing: antialiased;
}
body.vem-page-reports::after {
content: "";
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background:
linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.34) 42%, transparent 68%),
linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(214, 199, 255, 0.22));
opacity: 0.92;
}
body.vem-page-reports::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.02'/%3E%3C/svg%3E");
opacity: 0.15;
z-index: -1;
}
body.vem-page-reports .app {
display: flex;
min-height: 100vh;
height: 100vh;
overflow: hidden;
}
body.vem-page-reports .main-content {
flex: 1;
margin-left: 280px;
padding: 26px;
overflow-y: auto;
overflow-x: auto;
height: 100vh;
animation: reportsPageRise 520ms var(--transition-smooth) both;
}
@keyframes reportsPageRise {
from {
opacity: 0;
transform: translateY(14px) scale(0.995);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
body.vem-page-reports .top-bar {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16.5px;
margin-bottom: 19.5px;
flex-wrap: wrap;
}
body.vem-page-reports .page-title h1 {
margin: 0;
color: var(--ink);
font-size: 23px;
font-weight: 760;
letter-spacing: 0;
line-height: 1.14;
margin-bottom: 3.5px;
}
body.vem-page-reports .page-title p {
max-width: 760px;
margin: 3.5px 0 0;
color: var(--muted);
font-size: 12px;
line-height: 1.6;
font-weight: 450;
}
body.vem-page-reports .user-profile {
position: relative;
min-width: 220px;
display: flex;
align-items: center;
gap: 10px;
padding: 8px 11.5px 8px 8px;
overflow: hidden;
cursor: pointer;
border: 1px solid rgba(255, 255, 255, 0.78);
border-radius: var(--radius-xl);
background:
linear-gradient(135deg, rgba(231, 219, 255, 0.82), rgba(217, 200, 255, 0.42)),
radial-gradient(circle at 0% 0%, rgba(235, 242, 255, 0.92), rgba(225, 235, 255, 0.68) 52%, rgba(230, 240, 255, 0.7));
box-shadow: 0 20px 40px rgba(56, 88, 172, 0.08);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(18px) saturate(150%);
transition:
transform var(--transition-float),
box-shadow var(--transition-float),
border-color var(--transition-smooth);
}
body.vem-page-reports .user-profile:hover {
transform: translateY(-4px);
border-color: rgba(31, 111, 235, 0.24);
box-shadow: var(--shadow-md);
}
body.vem-page-reports .user-profile:active {
transform: translateY(-1px) scale(0.992);
box-shadow: var(--shadow-sm);
}
body.vem-page-reports .user-avatar {
position: relative;
z-index: 1;
width: 42px;
height: 42px;
display: grid;
place-items: center;
flex: 0 0 auto;
border-radius: 14px;
color: #ffffff;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.02em;
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.2), transparent 38%),
linear-gradient(145deg, var(--brand), var(--brand-deep));
box-shadow:
0 12px 24px rgba(31, 111, 235, 0.24),
inset 0 1px 0 rgba(255, 255, 255, 0.34);
transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}
body.vem-page-reports .user-name {
position: relative;
z-index: 1;
color: var(--ink);
font-size: 12px;
font-weight: 750;
line-height: 1.25;
}
body.vem-page-reports /* Fix for card corner edge artifacts - ensures clean rounded corners */
.panel, body.vem-page-reports .stat-card, body.vem-page-reports .project-card {
overflow: visible;
box-shadow: 0 20px 40px rgba(56, 88, 172, 0.08);
}
body.vem-page-reports .panel {
position: relative;
isolation: isolate;
background: var(--surface);
border: 1px solid rgba(255, 255, 255, 0.82);
border-radius: var(--radius-lg);
overflow: visible;
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(18px) saturate(145%);
background:
linear-gradient(135deg, rgba(231, 219, 255, 0.82), rgba(217, 200, 255, 0.42)),
radial-gradient(circle at 0% 0%, rgba(235, 242, 255, 0.92), rgba(225, 235, 255, 0.68) 52%, rgba(230, 240, 255, 0.7));
transition:
transform var(--transition-float),
box-shadow var(--transition-float),
border-color var(--transition-smooth);
}
body.vem-page-reports .panel-body {
padding: 19.5px;
}
body.vem-page-reports .filter-grid {
display: grid;
grid-template-columns: repeat(4, minmax(160px, 1fr));
gap: 13px;
align-items: end;
margin-bottom: 19.5px;
}
body.vem-page-reports .filter-group label {
display: block;
margin-bottom: 5.5px;
color: var(--ink);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.02em;
}
body.vem-page-reports .form-control {
width: 100%;
min-height: 42px;
padding: 7.5px 11.5px;
border: 1px solid rgba(85, 111, 145, 0.24);
border-radius: var(--radius-md);
background: rgba(255, 255, 255, 0.88);
color: var(--ink);
font-family: inherit;
font-size: 12px;
font-weight: 500;
outline: none;
transition: all var(--transition-fast);
}
body.vem-page-reports .form-control:focus {
border-color: var(--brand);
box-shadow: 0 0 0 4px var(--brand-glow);
background: var(--panel-solid);
}
body.vem-page-reports .button-row {
display: flex;
gap: 8px;
align-items: center;
}
body.vem-page-reports .download-status {
min-height: 20px;
color: var(--muted);
font-size: 12px;
font-weight: 650;
}
body.vem-page-reports .download-status.success {
color: var(--success);
}
body.vem-page-reports .download-status.error {
color: var(--danger);
}
body.vem-page-reports .overview-export-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 480px;
gap: 16.5px;
align-items: start;
margin-bottom: 19.5px;
}
body.vem-page-reports .overview-export-layout .projects-grid {
margin-bottom: 0;
}
body.vem-page-reports .report-export-row {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 8px;
flex-wrap: wrap;
width: 480px;
margin: 0;
}
body.vem-page-reports .report-export-row .download-status {
flex-basis: 100%;
width: 100%;
text-align: right;
overflow-wrap: anywhere;
}
body.vem-page-reports .btn-download-excel, body.vem-page-reports .btn-download-confidential {
color: #fff;
border-color: transparent;
box-shadow: 0 8px 18px rgba(22, 95, 210, 0.2);
}
body.vem-page-reports .btn-download-excel {
background: linear-gradient(135deg, #2476e8, #1557c0);
}
body.vem-page-reports .btn-download-confidential {
background: linear-gradient(135deg, #6757d9, #4937b7);
}
body.vem-page-reports .btn-download-excel:hover, body.vem-page-reports .btn-download-confidential:hover {
color: #fff;
border-color: transparent;
transform: translateY(-2px);
box-shadow: 0 12px 24px rgba(47, 67, 173, 0.28);
}
@media (max-width: 980px) {
body.vem-page-reports .overview-export-layout {
grid-template-columns: 1fr;
}
body.vem-page-reports .report-export-row {
justify-content: flex-start;
width: 100%;
}
body.vem-page-reports .report-export-row .download-status {
text-align: left;
}
}
body.vem-page-reports .btn:disabled {
cursor: wait;
opacity: 0.7;
}
/* Searchable checkbox-dropdown component — originally built for
Reports' "User" filter and scoped to that page, then reused as-is
(same classes) for the dashboard's "Project-wise Billable Hours"
project filter. De-scoped from body.vem-page-reports to a plain
global component so it actually applies (background, positioning,
everything) on every page that reuses these classes, not just the
one it was first written for. */
.user-filter-search {
margin-bottom: 6.5px;
}
.user-checkbox-list {
height: 260px !important;
max-height: 260px !important;
overflow-y: scroll !important;
overflow-x: hidden;
overscroll-behavior: contain;
touch-action: pan-y;
padding: 6px;
border: 1px solid rgba(85, 111, 145, 0.24);
border-radius: var(--radius-md);
background: var(--panel-solid);
scrollbar-width: thin;
scrollbar-color: var(--brand) rgba(85, 111, 145, 0.10);
}
.user-checkbox-list::-webkit-scrollbar {
width: 7px;
}
.user-checkbox-list::-webkit-scrollbar-track {
border-radius: 99px;
background: rgba(85, 111, 145, 0.10);
}
.user-checkbox-list::-webkit-scrollbar-thumb {
border-radius: 99px;
background: var(--brand);
}
.user-checkbox-option {
display: flex;
align-items: center;
gap: 9px;
min-height: 34px;
padding: 6px 8px;
cursor: pointer;
border-radius: 8px;
color: var(--ink);
font-size: 13px;
font-weight: 500;
}
.user-checkbox-option:hover {
/* Was var(--brand-soft), which some themes define as a near-white
tint meant to sit on a light panel — on the Dark theme's
strict two-colour (black/ivory) contract that resolves to the
same colour as the option's own ivory text, making the label
unreadable on hover. Mixing a slice of the option's own text
colour into transparency always shifts the background away
from the current text colour, in every theme, so hover
feedback stays visible and the label never gets text-on-same-
colour contrast collapse. */
background: color-mix(in srgb, var(--ink) 12%, transparent);
}
.user-checkbox-option input {
width: 16px;
height: 16px;
margin: 0;
accent-color: var(--brand);
}
.user-checkbox-option[hidden] {
display: none;
}
.user-filter-all {
margin-bottom: 7px;
border-bottom: 1px solid rgba(85, 111, 145, 0.14);
border-radius: 0;
font-weight: 700;
}
.user-multiselect {
position: relative;
}
.user-multiselect-trigger {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
cursor: pointer;
text-align: left;
}
.user-filter-dropdown {
position: absolute;
top: calc(100% + 7px);
left: 0;
z-index: 20;
width: min(360px, 100%);
padding: 10px;
border: 1px solid rgba(85, 111, 145, 0.22);
border-radius: var(--radius-md);
background: var(--panel-solid);
box-shadow: var(--shadow-lg);
}
.user-filter-dropdown[hidden] {
display: none;
}
body.vem-page-reports .btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 42px;
padding: 7.5px 16.5px;
border: 1px solid transparent;
border-radius: var(--radius-md);
font-family: inherit;
font-weight: 750;
font-size: 12px;
letter-spacing: 0.02em;
cursor: pointer;
text-decoration: none;
transition: all var(--transition-smooth);
overflow: hidden;
}
body.vem-page-reports .btn:active {
transform: translateY(-1px) scale(0.98);
}
body.vem-page-reports .btn-primary {
background: linear-gradient(135deg, var(--brand), var(--brand-deep));
color: #fff;
box-shadow: var(--shadow-xs), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
body.vem-page-reports .btn-primary:hover {
background: linear-gradient(135deg, var(--brand-deep), #0f4eb5);
transform: translateY(-2px);
box-shadow: var(--shadow-brand);
}
body.vem-page-reports .btn-muted {
background: rgba(255, 255, 255, 0.72);
color: var(--ink-light);
border-color: var(--line);
}
body.vem-page-reports .btn-muted:hover {
background: rgba(255, 255, 255, 0.9);
transform: translateY(-2px);
border-color: var(--brand);
box-shadow: var(--shadow-sm);
}
body.vem-page-reports .stats-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16.5px;
margin-bottom: 19.5px;
}
body.vem-page-reports .stat-card, body.vem-page-reports .project-card {
position: relative;
isolation: isolate;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(248, 250, 255, 0.48)),
radial-gradient(circle at 0% 0%, rgba(235, 242, 255, 0.68), rgba(225, 235, 255, 0.48));
border: 1px solid rgba(255, 255, 255, 0.78);
border-radius: var(--radius-md);
padding: 16.5px;
backdrop-filter: blur(16px) saturate(160%);
transition:
transform var(--transition-float),
box-shadow var(--transition-float),
border-color var(--transition-smooth);
}
body.vem-page-reports .stat-card:hover, body.vem-page-reports .project-card:hover {
transform: translateY(-3px);
border-color: rgba(31, 111, 235, 0.24);
box-shadow: var(--shadow-md);
}
body.vem-page-reports .stat-number {
color: var(--brand);
font-size: 26px;
font-weight: 780;
font-variant-numeric: tabular-nums;
}
body.vem-page-reports .stat-label {
margin-top: 8px;
color: var(--muted);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.07em;
text-transform: uppercase;
}
body.vem-page-reports .projects-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16.5px;
margin-bottom: 19.5px;
}
body.vem-page-reports .project-card h3 {
font-size: 13px;
font-weight: 800;
margin-bottom: 11.5px;
padding-bottom: 8px;
border-bottom: 1px solid var(--line);
color: var(--ink);
overflow-wrap: anywhere;
}
body.vem-page-reports .project-stats, body.vem-page-reports .task-item {
display: flex;
justify-content: space-between;
gap: 10px;
color: var(--muted);
font-size: 12px;
padding: 5px 0;
}
body.vem-page-reports .project-stats strong, body.vem-page-reports .task-item strong {
color: var(--ink);
font-weight: 700;
}
body.vem-page-reports .task-list {
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid var(--line);
}
body.vem-page-reports .table-wrapper {
overflow-x: auto;
border-radius: var(--radius-md);
background: rgba(255, 255, 255, 0.4);
padding: 1px;
}
body.vem-page-reports .results-table {
width: 100%;
min-width: 820px;
border-collapse: separate;
border-spacing: 0;
font-size: 12px;
background: rgba(255, 255, 255, 0.6);
border-radius: var(--radius-md);
overflow: hidden;
}
body.vem-page-reports .results-table th {
text-align: left;
padding: 11.5px;
color: var(--ink);
background: rgba(255, 255, 255, 0.72);
border-bottom: 1px solid var(--line);
font-weight: 800;
font-size: 12px;
letter-spacing: 0.04em;
text-transform: uppercase;
}
body.vem-page-reports .results-table td {
padding: 11.5px;
border-bottom: 1px solid var(--line);
color: var(--ink-light);
vertical-align: middle;
background: rgba(255, 255, 255, 0.48);
transition: background var(--transition-fast);
}
body.vem-page-reports .results-table tr:hover td {
background: rgba(255, 255, 255, 0.72);
}
body.vem-page-reports .status-badge {
display: inline-flex;
align-items: center;
padding: 4px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.02em;
border: 1px solid transparent;
}
body.vem-page-reports .status-approved {
background: linear-gradient(135deg, rgba(22, 132, 91, 0.12), rgba(22, 132, 91, 0.06));
border-color: rgba(22, 132, 91, 0.28);
color: var(--success);
}
body.vem-page-reports .status-rejected {
background: linear-gradient(135deg, rgba(185, 28, 28, 0.12), rgba(185, 28, 28, 0.06));
border-color: rgba(185, 28, 28, 0.28);
color: var(--danger);
}
body.vem-page-reports .status-pending, body.vem-page-reports .status-mixed {
background: linear-gradient(135deg, rgba(199, 119, 29, 0.12), rgba(199, 119, 29, 0.06));
border-color: rgba(199, 119, 29, 0.28);
color: var(--warning);
}
body.vem-page-reports .empty-state {
padding: 44.5px 16.5px;
color: var(--muted);
text-align: center;
font-size: 12px;
font-weight: 600;
}
body.vem-page-reports .alert-error {
padding: 11.5px 15px;
border-radius: var(--radius-md);
margin-bottom: 15px;
background: linear-gradient(135deg, rgba(254, 242, 242, 0.96), rgba(252, 228, 228, 0.9));
border: 1px solid rgba(185, 28, 28, 0.28);
color: var(--danger);
font-weight: 650;
}
body.vem-page-reports /* Scrollbar styling */
@media (max-width: 1180px) {
.filter-grid,
.stats-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 768px) {
body.vem-page-reports .main-content {
margin-left: 86px;
padding: 16.5px;
}
body.vem-page-reports .top-bar {
flex-direction: column;
align-items: stretch;
}
body.vem-page-reports .user-profile {
min-width: 0;
}
body.vem-page-reports .filter-grid, body.vem-page-reports .stats-grid, body.vem-page-reports .projects-grid {
grid-template-columns: 1fr;
}
body.vem-page-reports .button-row {
flex-direction: column;
align-items: stretch;
}
body.vem-page-reports .page-title h1 {
font-size: 19.5px;
}
body.vem-page-reports .panel-body {
padding: 15px;
}
}
@media (max-width: 520px) {
body.vem-page-reports .main-content {
margin-left: 0;
padding: 16.5px 13px;
}
body.vem-page-reports .stat-number {
font-size: 23px;
}
}
@media (prefers-reduced-motion: reduce) {
:where(body.vem-page-reports *), body.vem-page-reports *::before, body.vem-page-reports *::after {
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: 1ms !important;
}
}
/* profile.php */
body.vem-page-profile {
--success-border: #abefc6;
--danger-border: #fecdca;
--info: #1f6feb;
--info-bg: #e8f1ff;
}
body.vem-page-profile {
font-family: "Segoe UI Variable", "Segoe UI", Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
min-height: 100vh;
margin: 0;
color: var(--ink);
background:
radial-gradient(circle at 12% 14%, rgba(124, 58, 237, 0.05), transparent 34%),
radial-gradient(circle at 86% 18%, rgba(79, 70, 229, 0.08), transparent 32%),
radial-gradient(circle at 72% 88%, rgba(147, 51, 234, 0.06), transparent 36%),
linear-gradient(135deg, #e7dbff 0%, #a9a4ff 38%, #c1bdff 65%, #d9d7ff 100%);
overflow-x: hidden;
overflow-y: auto;
text-rendering: geometricPrecision;
-webkit-font-smoothing: antialiased;
}
body.vem-page-profile::after {
content: "";
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background:
linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.34) 42%, transparent 68%),
linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(214, 199, 255, 0.22));
opacity: 0.92;
}
body.vem-page-profile::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.02'/%3E%3C/svg%3E");
opacity: 0.15;
z-index: -1;
}
body.vem-page-profile .app {
display: flex;
min-height: 100vh;
}
body.vem-page-profile .main-content {
flex: 1;
margin-left: 280px;
padding: 26px;
animation: profilePageRise 520ms var(--transition-smooth) both;
}
@keyframes profilePageRise {
from {
opacity: 0;
transform: translateY(14px) scale(0.995);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
body.vem-page-profile .top-bar {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16.5px;
margin-bottom: 19.5px;
flex-wrap: wrap;
}
body.vem-page-profile .page-title h1 {
margin: 0;
color: var(--ink);
font-size: 23px;
font-weight: 760;
letter-spacing: 0;
line-height: 1.14;
margin-bottom: 3.5px;
}
body.vem-page-profile .page-title p {
max-width: 760px;
margin: 3.5px 0 0;
color: var(--muted);
font-size: 12px;
line-height: 1.6;
font-weight: 450;
}
body.vem-page-profile .user-profile {
position: relative;
min-width: 220px;
display: flex;
align-items: center;
gap: 10px;
padding: 8px 11.5px 8px 8px;
overflow: hidden;
cursor: pointer;
border: 1px solid rgba(255, 255, 255, 0.78);
border-radius: var(--radius-xl);
background:
linear-gradient(135deg, rgba(231, 219, 255, 0.82), rgba(217, 200, 255, 0.42)),
radial-gradient(circle at 0% 0%, rgba(235, 242, 255, 0.92), rgba(225, 235, 255, 0.68) 52%, rgba(230, 240, 255, 0.7));
box-shadow: 0 20px 40px rgba(56, 88, 172, 0.08);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(18px) saturate(150%);
transition:
transform var(--transition-float),
box-shadow var(--transition-float),
border-color var(--transition-smooth);
}
body.vem-page-profile .user-profile:hover {
transform: translateY(-4px);
border-color: rgba(31, 111, 235, 0.24);
box-shadow: var(--shadow-md);
}
body.vem-page-profile .user-profile:active {
transform: translateY(-1px) scale(0.992);
box-shadow: var(--shadow-sm);
}
body.vem-page-profile .user-avatar {
position: relative;
z-index: 1;
width: 42px;
height: 42px;
display: grid;
place-items: center;
flex: 0 0 auto;
border-radius: 14px;
color: #ffffff;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.02em;
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.2), transparent 38%),
linear-gradient(145deg, var(--brand), var(--brand-deep));
box-shadow:
0 12px 24px rgba(31, 111, 235, 0.24),
inset 0 1px 0 rgba(255, 255, 255, 0.34);
transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}
body.vem-page-profile .user-name {
position: relative;
z-index: 1;
color: var(--ink);
font-size: 12px;
font-weight: 750;
line-height: 1.25;
word-break: break-word;
}
body.vem-page-profile /* Fix for card corner edge artifacts - ensures clean rounded corners */
.panel, body.vem-page-profile .current-approver, body.vem-page-profile .info-box {
overflow: visible;
box-shadow: 0 20px 40px rgba(56, 88, 172, 0.08);
}
/* Account Information and Reporting Manager are short, fixed-content
cards; Personal Details is a longer form. Forcing all three into
equal-width columns of one row meant either cramming Personal
Details' fields to fake a matching height, or living with a
visible gap under the shorter cards — both looked broken.
Stacking the two short cards into a left column next to Personal
Details' own column sidesteps the mismatch entirely: nothing
needs to match anything else's height. */
body.vem-page-profile /* GRID LAYOUT FOR CARDS */
.cards-grid {
display: grid;
grid-template-columns: minmax(320px, 0.85fr) minmax(380px, 1.15fr);
align-items: start;
gap: 19.5px;
margin-bottom: 19.5px;
}
body.vem-page-profile .cards-col-left,
body.vem-page-profile .cards-col-right {
display: flex;
flex-direction: column;
gap: 19.5px;
min-width: 0;
}
body.vem-page-profile .panel {
position: relative;
isolation: isolate;
border: 1px solid rgba(255, 255, 255, 0.82);
border-radius: var(--radius-lg);
margin-bottom: 0;
overflow: hidden;
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(18px) saturate(145%);
background:
linear-gradient(135deg, rgba(231, 219, 255, 0.82), rgba(217, 200, 255, 0.42)),
radial-gradient(circle at 0% 0%, rgba(235, 242, 255, 0.92), rgba(225, 235, 255, 0.68) 52%, rgba(230, 240, 255, 0.7));
transition:
transform var(--transition-float),
box-shadow var(--transition-float),
border-color var(--transition-smooth);
display: flex;
flex-direction: column;
}
body.vem-page-profile .panel:hover {
transform: translateY(-4px);
border-color: rgba(31, 111, 235, 0.2);
box-shadow: var(--shadow-lg);
}
body.vem-page-profile .panel-header {
padding: 16.5px 19.5px;
border-bottom: 1px solid var(--line);
background: rgba(255, 255, 255, 0.4);
}
body.vem-page-profile .panel-title {
margin: 0 0 3.5px;
color: var(--ink);
font-size: 15px;
font-weight: 760;
}
body.vem-page-profile .panel-subtitle {
margin: 0;
color: var(--muted);
font-size: 12px;
font-weight: 470;
line-height: 1.5;
}
body.vem-page-profile .panel-body {
padding: 19.5px;
flex: 1;
}
/* Reporting Manager and Two-Factor Authentication now live inside
Account Information/Personal Details as sub-sections rather than
their own cards. Re-boxing them with the full panel-header band
(background + border-bottom) plus another full panel-body inset
would read as a card nested inside a card — the exact "boxes in
boxes" clutter fixed elsewhere on this site. A plain divider and
a smaller, muted, uppercase label read as "part of this card"
instead, which is the more common settings-page convention. */
body.vem-page-profile .panel-subsection {
margin-top: 22px;
padding-top: 20px;
border-top: 1px solid var(--line);
}
body.vem-page-profile .panel-subsection.manager-panel .panel-header,
body.vem-page-profile .panel-subsection.totp-panel .panel-header {
padding: 0 0 4px;
border-bottom: none;
background: none;
}
body.vem-page-profile .panel-subsection.manager-panel .panel-title,
body.vem-page-profile .panel-subsection.totp-panel .panel-title {
color: var(--muted);
font-size: 12.5px;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
}
body.vem-page-profile .panel-subsection.manager-panel .panel-body,
body.vem-page-profile .panel-subsection.totp-panel .panel-body {
padding: 0;
margin-top: 12px;
}
body.vem-page-profile .info-row {
display: grid;
grid-template-columns: 140px 1fr;
gap: 13px;
padding: 10px 0;
border-bottom: 1px solid var(--line);
}
body.vem-page-profile .info-row:last-child {
border-bottom: 0;
}
body.vem-page-profile .info-label {
color: var(--muted);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
}
body.vem-page-profile .info-value {
color: var(--ink-light);
font-size: 12px;
font-weight: 600;
overflow-wrap: anywhere;
}
body.vem-page-profile .role-badge {
display: inline-flex;
align-items: center;
padding: 4px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.02em;
border: 1px solid transparent;
}
body.vem-page-profile .role-admin {
background: linear-gradient(135deg, rgba(31, 111, 235, 0.12), rgba(31, 111, 235, 0.06));
color: var(--brand);
border-color: rgba(31, 111, 235, 0.28);
}
body.vem-page-profile .role-approver {
background: linear-gradient(135deg, rgba(22, 132, 91, 0.12), rgba(22, 132, 91, 0.06));
color: var(--success);
border-color: rgba(22, 132, 91, 0.28);
}
body.vem-page-profile .role-user {
background: rgba(255, 255, 255, 0.72);
color: var(--ink-light);
border-color: var(--line);
}
body.vem-page-profile .form-group {
margin-bottom: 16.5px;
}
body.vem-page-profile .form-group label {
display: block;
color: var(--ink);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.02em;
margin-bottom: 5.5px;
}
body.vem-page-profile .form-group input, body.vem-page-profile .form-group select {
width: 100%;
min-height: 44px;
padding: 8px 11.5px;
background: rgba(255, 255, 255, 0.88);
border: 1px solid rgba(85, 111, 145, 0.24);
border-radius: var(--radius-md);
color: var(--ink);
font-family: inherit;
font-size: 12px;
font-weight: 500;
outline: none;
transition: all var(--transition-fast);
}
body.vem-page-profile .form-group input:focus, body.vem-page-profile .form-group select:focus {
border-color: var(--brand);
box-shadow: 0 0 0 4px var(--brand-glow);
background: var(--panel-solid);
}
body.vem-page-profile .btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 8px 19.5px;
border: 1px solid transparent;
border-radius: var(--radius-md);
background: linear-gradient(135deg, var(--brand), var(--brand-deep));
color: #ffffff;
font-family: inherit;
font-weight: 750;
font-size: 12px;
letter-spacing: 0.02em;
cursor: pointer;
transition: all var(--transition-smooth);
overflow: hidden;
}
body.vem-page-profile .btn:hover, body.vem-page-profile .btn:focus-visible {
background: linear-gradient(135deg, var(--brand-deep), #0f4eb5);
transform: translateY(-2px);
box-shadow: var(--shadow-brand);
outline: none;
}
body.vem-page-profile .btn:active {
transform: translateY(1px);
}
body.vem-page-profile .current-approver, body.vem-page-profile .info-box {
padding: 13px 15px;
margin-top: 16.5px;
border: 1px solid rgba(255, 255, 255, 0.78);
border-radius: var(--radius-md);
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.68), rgba(248, 250, 255, 0.48)),
radial-gradient(circle at 0% 0%, rgba(235, 242, 255, 0.48), rgba(225, 235, 255, 0.38));
backdrop-filter: blur(16px) saturate(160%);
color: var(--muted);
font-size: 12px;
}
body.vem-page-profile .current-approver strong {
display: block;
color: var(--ink);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
margin-bottom: 5px;
}
body.vem-page-profile .current-approver div {
color: var(--ink-light);
font-size: 12px;
font-weight: 650;
overflow-wrap: anywhere;
}
body.vem-page-profile .current-approver.warning {
background: linear-gradient(135deg, rgba(255, 248, 225, 0.96), rgba(255, 242, 204, 0.9));
border-color: rgba(199, 119, 29, 0.28);
}
body.vem-page-profile .current-approver.warning strong {
color: var(--warning);
}
body.vem-page-profile .alert {
padding: 11.5px 15px;
border-radius: var(--radius-md);
margin-bottom: 15px;
font-size: 12px;
font-weight: 650;
backdrop-filter: blur(8px);
border: 1px solid transparent;
}
body.vem-page-profile .alert-error {
background: linear-gradient(135deg, rgba(254, 242, 242, 0.96), rgba(252, 228, 228, 0.9));
border-color: rgba(185, 28, 28, 0.28);
color: var(--danger);
}
body.vem-page-profile .alert-success {
background: linear-gradient(135deg, rgba(230, 247, 240, 0.96), rgba(214, 242, 230, 0.9));
border-color: rgba(22, 132, 91, 0.28);
color: var(--success);
}
body.vem-page-profile .password-rules {
margin-top: 16.5px;
color: var(--muted);
font-size: 12px;
line-height: 1.7;
padding: 11.5px 13px;
border: 1px solid var(--line);
border-radius: var(--radius-md);
background: rgba(255, 255, 255, 0.48);
}
body.vem-page-profile /* Reporting manager: unified enterprise form rhythm. */
.manager-panel .panel-header {
padding: 15px 18px 13px;
}
body.vem-page-profile .manager-panel .panel-title {
font-size: 14px;
font-weight: 720;
}
body.vem-page-profile .manager-panel .panel-subtitle {
font-size: 12px;
font-weight: 450;
}
body.vem-page-profile .manager-panel .panel-body {
display: grid;
gap: 10.5px;
padding: 16.5px 18px 18px;
}
body.vem-page-profile .manager-panel .manager-guidance, body.vem-page-profile .manager-panel .current-approver {
width: 100%;
margin: 0;
box-shadow: none;
}
body.vem-page-profile .manager-panel .manager-guidance {
padding: 10px 11.5px;
border-color: rgba(132, 153, 180, 0.3);
background: #e7edf4;
color: #40516a;
font-size: 12px;
font-weight: 450;
line-height: 1.5;
}
body.vem-page-profile .manager-panel .manager-form {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 11.5px;
align-items: end;
margin: 0;
padding: 11.5px;
border: 1px solid rgba(143, 163, 184, 0.32);
border-radius: 10px;
background: #d9e3ee;
}
body.vem-page-profile .manager-panel .form-group {
display: grid;
gap: 5px;
margin: 0;
}
body.vem-page-profile .manager-panel .form-group label {
margin: 0;
color: #34455e;
font-size: 11px;
font-weight: 650;
letter-spacing: 0.035em;
text-transform: uppercase;
}
body.vem-page-profile .manager-panel .form-group select {
min-height: 42px;
padding: 7.5px 10px;
border-radius: 9px;
font-size: 12px;
font-weight: 500;
}
body.vem-page-profile .manager-panel .manager-submit {
min-height: 38px;
min-width: 178px;
justify-self: end;
padding: 6.5px 12.5px;
border-radius: 8px;
font-size: 11px;
font-weight: 680;
}
body.vem-page-profile .manager-panel .current-approver {
padding: 10px 11.5px;
border-radius: 9px;
font-size: 12px;
}
body.vem-page-profile .manager-panel .current-approver strong {
margin-bottom: 3.5px;
font-size: 10px;
font-weight: 700;
}
body.vem-page-profile .manager-panel .current-approver div {
font-size: 12px;
font-weight: 500;
line-height: 1.45;
}
@media (max-width: 640px) {
body.vem-page-profile .manager-panel .manager-form {
grid-template-columns: 1fr;
}
body.vem-page-profile .manager-panel .manager-submit {
width: 100%;
justify-self: stretch;
}
}
body.vem-page-profile /* Scrollbar styling */
@media (max-width: 768px) {
.main-content {
margin-left: 86px;
padding: 20px;
}
.top-bar {
flex-direction: column;
align-items: stretch;
}
.user-profile {
min-width: 0;
}
.page-title h1 {
font-size: 24px;
}
.cards-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.info-row {
grid-template-columns: 1fr;
gap: 6px;
}
.panel-body,
.panel-header {
padding: 18px;
}
}
@media (min-width: 769px) and (max-width: 1024px) {
body.vem-page-profile .cards-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 520px) {
body.vem-page-profile .main-content {
margin-left: 0;
padding: 16.5px 13px;
}
}
@media (prefers-reduced-motion: reduce) {
:where(body.vem-page-profile *), body.vem-page-profile *::before, body.vem-page-profile *::after {
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: 1ms !important;
}
}
/* Shared navigation components — migrated from component-local CSS. */
/* Company navigation sidebar (sidebar.php) */
.sidebar {
position: fixed;
inset: 0 auto 0 0;
z-index: 100;
display: flex;
flex-direction: column;
width: 280px;
background:
radial-gradient(circle at 12% 14%, rgba(124, 58, 237, 0.05), transparent 34%),
radial-gradient(circle at 86% 18%, rgba(79, 70, 229, 0.08), transparent 32%),
radial-gradient(circle at 72% 88%, rgba(147, 51, 234, 0.06), transparent 36%),
linear-gradient(135deg, #f4efff 0%, #dfd2ff 38%, #e8defe 68%, #dce9ff 100%);
overflow-x: hidden;
overflow-y: auto;
text-rendering: geometricPrecision;
-webkit-font-smoothing: antialiased;
border-right: 1px solid rgba(228, 231, 236, 0.6);
box-shadow: 8px 0 32px -12px rgba(16, 24, 40, 0.12), 0 0 0 1px rgba(124, 58, 237, 0.02) inset;
backdrop-filter: blur(2px);
transition: width 0.25s cubic-bezier(0.2, 0.9, 0.4, 1.1), box-shadow 0.3s ease;
}
.sidebar::after {
content: "";
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background:
linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.34) 42%, transparent 68%),
linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(214, 199, 255, 0.22));
opacity: 0.92;
}
.sidebar::-webkit-scrollbar {
width: 6px;
}
.sidebar::-webkit-scrollbar-track {
background: transparent;
margin: 12px 0;
}
.sidebar::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 100px;
transition: background 0.2s;
}
.sidebar::-webkit-scrollbar-thumb:hover {
background: #a0aec0;
}
.sidebar-header {
padding: 28px 20px 24px;
position: relative;
}
.sidebar-header::after {
content: '';
position: absolute;
bottom: 0;
left: 20px;
right: 20px;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(124, 58, 237, 0.15), rgba(79, 70, 229, 0.08), transparent);
}
.logo {
display: flex;
align-items: center;
gap: 14px;
}
.logo-icon {
display: grid;
place-items: center;
width: 100%;
min-height: 72px;
padding: 12px;
border: 1px solid rgba(228, 231, 236, 0.8);
border-radius: 14px;
background: rgba(249, 250, 251, 0.75);
backdrop-filter: blur(4px);
color: #101828;
font-size: 16px;
font-weight: 800;
line-height: 1.2;
text-align: center;
overflow: hidden;
overflow-wrap: anywhere;
transition: all 0.2s ease;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
}
.logo-icon:hover {
border-color: #cbd5e1;
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}
.logout-form {
margin: 0;
}
.logout-button {
width: 100%;
border: 0;
font-family: inherit;
cursor: pointer;
text-align: left;
}
.logo-img {
width: 100%;
height: 56px;
object-fit: contain;
display: block;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.04));
}
.nav {
flex: 1;
padding: 20px 16px 24px;
overflow-y: auto;
}
.nav::-webkit-scrollbar {
width: 5px;
}
.nav::-webkit-scrollbar-thumb {
background: #d0d5dd;
border-radius: 999px;
}
.nav-item {
position: relative;
display: flex;
align-items: center;
gap: 14px;
min-height: 44px;
padding: 10px 14px;
margin-bottom: 8px;
border-radius: 12px;
color: #344054;
background:
linear-gradient(135deg, rgba(231, 219, 255, 0.82), rgba(217, 200, 255, 0.42)),
radial-gradient(circle at 0% 0%, rgba(235, 242, 255, 0.92), rgba(225, 235, 255, 0.68) 52%, rgba(230, 240, 255, 0.7));
box-shadow:
0 20px 40px rgba(56, 88, 172, 0.08),
0 4px 12px rgba(0, 0, 0, 0.02),
inset 0 1px 0 rgba(255, 255, 255, 0.95),
inset 0 -1px 0 rgba(56, 88, 172, 0.06);
backdrop-filter: blur(20px) saturate(180%);
text-decoration: none;
font-size: 14px;
font-weight: 600;
transition: all 0.2s cubic-bezier(0.2, 0.9, 0.4, 1.1);
border: 1px solid rgba(232, 237, 242, 0.8);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02), 0 1px 0 rgba(255, 255, 255, 0.4) inset;
}
.nav-item:hover {
border-color: #cbd5e1;
background: rgba(255, 255, 255, 0.95);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04), 0 1px 0 rgba(255, 255, 255, 0.6) inset;
transform: translateY(-1px);
}
.nav-item:active {
transform: translateY(1px);
transition: transform 0.05s;
}
.dropdown-container {
margin-bottom: 8px;
}
.dropdown-toggle {
background:
linear-gradient(135deg, rgba(231, 219, 255, 0.82), rgba(217, 200, 255, 0.42)),
radial-gradient(circle at 0% 0%, rgba(235, 242, 255, 0.92), rgba(225, 235, 255, 0.68) 52%, rgba(230, 240, 255, 0.7));
box-shadow:
0 20px 40px rgba(56, 88, 172, 0.08),
0 4px 12px rgba(0, 0, 0, 0.02),
inset 0 1px 0 rgba(255, 255, 255, 0.95),
inset 0 -1px 0 rgba(56, 88, 172, 0.06);
backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(232, 237, 242, 0.8);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}
.dropdown-menu {
margin-left: 32px;
padding-left: 12px;
margin-top: 8px;
max-height: 0;
overflow: hidden;
transition: max-height 0.35s cubic-bezier(0.33, 1, 0.68, 1);
}
.dropdown-item {
position: relative;
display: flex;
align-items: center;
gap: 12px;
min-height: 40px;
padding: 8px 12px;
margin-bottom: 6px;
border-radius: 10px;
color: #344054;
background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(2px);
text-decoration: none;
font-size: 13px;
font-weight: 500;
transition: all 0.2s ease;
border: 1px solid rgba(232, 237, 242, 0.6);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.01);
}
.dropdown-item:hover {
border-color: #cbd5e1;
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
transform: translateX(3px);
}
.nav-item:hover,
.nav-item:focus-visible {
background: rgba(242, 244, 247, 0.9);
color: #101828;
outline: none;
}
.nav-item.active {
background: linear-gradient(135deg, rgba(239, 246, 255, 0.95), rgba(235, 242, 255, 0.9));
color: #175cd3;
border-color: rgba(23, 92, 211, 0.2);
box-shadow: 0 4px 12px rgba(23, 92, 211, 0.08), 0 1px 0 rgba(255, 255, 255, 0.6) inset;
}
.nav-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
flex: 0 0 32px;
border-radius: 10px;
background: rgba(242, 244, 247, 0.8);
backdrop-filter: blur(2px);
color: currentColor;
transition: all 0.2s ease;
}
.nav-item.active .nav-icon {
background: linear-gradient(135deg, #dbeafe, #e0e7ff);
box-shadow: 0 1px 2px rgba(23, 92, 211, 0.1);
}
.nav-icon svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.dropdown-container {
margin-bottom: 6px;
}
.dropdown-toggle {
cursor: pointer;
justify-content: space-between;
}
.dropdown-toggle .chevron {
margin-left: auto;
transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}
.dropdown-toggle.open .chevron {
transform: rotate(180deg);
}
.dropdown-toggle .chevron {
margin-left: auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
background: rgba(255, 255, 255, 0.8);
border-radius: 10px;
border: 1px solid rgba(228, 231, 236, 0.8);
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03);
transition: all 0.2s ease;
}
.dropdown-toggle .chevron svg {
width: 16px;
height: 16px;
stroke-width: 2.5;
stroke: #475467;
}
.dropdown-toggle:hover .chevron {
background: rgba(255, 255, 255, 0.95);
border-color: #cbd5e1;
box-shadow: 0 2px 6px rgba(16, 24, 40, 0.06);
transform: scale(1.02);
}
.dropdown-toggle.open .chevron {
transform: rotate(180deg);
background: #eff6ff;
border-color: #175cd3;
}
.dropdown-toggle.open .chevron svg {
stroke: #175cd3;
}
.dropdown-menu {
margin-left: 32px;
padding-left: 12px;
max-height: 0;
overflow: hidden;
transition: max-height 0.35s cubic-bezier(0.33, 1, 0.68, 1);
}
.dropdown-menu.open {
max-height: none;
}
.dropdown-item {
position: relative;
display: flex;
align-items: center;
gap: 12px;
min-height: 40px;
padding: 8px 12px;
margin-bottom: 4px;
border-radius: 10px;
color: #344054;
background: transparent;
text-decoration: none;
font-size: 13px;
font-weight: 500;
transition: all 0.2s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}
.dropdown-menu.admin-dropdown {
margin-left: 32px;
padding-left: 12px;
}
.dropdown-item:hover,
.dropdown-item:focus-visible {
background: rgba(242, 244, 247, 0.8);
color: #101828;
outline: none;
transform: translateX(3px);
}
.dropdown-item.active {
background: linear-gradient(90deg, rgba(239, 246, 255, 0.9), transparent);
color: #175cd3;
border-left: 2px solid #175cd3;
border-radius: 8px 10px 10px 8px;
}
.dropdown-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
flex: 0 0 26px;
border-radius: 8px;
background: rgba(242, 244, 247, 0.7);
color: currentColor;
transition: all 0.2s ease;
}
.dropdown-item.active .dropdown-icon {
background: rgba(219, 234, 254, 0.9);
box-shadow: 0 1px 2px rgba(23, 92, 211, 0.08);
}
.dropdown-icon svg {
width: 14px;
height: 14px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.nav-item.logout {
margin-top: 20px;
color: #b42318;
position: relative;
}
.nav-item.logout::before {
content: '';
position: absolute;
top: -12px;
left: 14px;
right: 14px;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(180, 35, 24, 0.15), transparent);
}
.nav-item.logout .nav-icon {
background: rgba(254, 243, 242, 0.9);
backdrop-filter: blur(2px);
}
.nav-item.logout:hover,
.nav-item.logout:focus-visible {
color: #b42318;
background: rgba(254, 243, 242, 0.95);
border-color: rgba(180, 35, 24, 0.2);
box-shadow: 0 4px 12px rgba(180, 35, 24, 0.06);
}
/* Final enterprise navy navigation aligned with the Dashboard visual system. */
.sidebar.sidebar-enterprise {
color: #c5d2e3;
border-right: 1px solid #31435b;
background: #111d30;
box-shadow: 8px 0 28px -14px rgba(3, 12, 27, 0.55);
backdrop-filter: none;
}
.sidebar.sidebar-enterprise::after {
display: none;
}
.sidebar.sidebar-enterprise::-webkit-scrollbar-thumb,
.sidebar.sidebar-enterprise .nav::-webkit-scrollbar-thumb {
background: #40546d;
}
.sidebar.sidebar-enterprise::-webkit-scrollbar-thumb:hover,
.sidebar.sidebar-enterprise .nav::-webkit-scrollbar-thumb:hover {
background: #58708d;
}
.sidebar.sidebar-enterprise .sidebar-header::after {
background: #31435b;
}
.sidebar.sidebar-enterprise .logo-icon {
color: #142033;
border-color: #afbdce;
border-radius: 13px;
background: #dce5ef;
box-shadow: 0 8px 20px rgba(3, 12, 27, 0.2);
backdrop-filter: none;
}
.sidebar.sidebar-enterprise .logo-icon:hover {
border-color: #8fa2b8;
background: #e3eaf2;
box-shadow: 0 11px 24px rgba(3, 12, 27, 0.26);
}
.sidebar.sidebar-enterprise .nav-item,
.sidebar.sidebar-enterprise .dropdown-toggle {
color: #c5d2e3;
border-color: #30445e;
background: #1a2a41;
box-shadow: none;
backdrop-filter: none;
}
.sidebar.sidebar-enterprise .nav-item:hover,
.sidebar.sidebar-enterprise .nav-item:focus-visible,
.sidebar.sidebar-enterprise .dropdown-toggle:hover,
.sidebar.sidebar-enterprise .dropdown-toggle:focus-visible {
color: #f4f7fb;
border-color: #49617e;
background: #223650;
box-shadow: 0 7px 16px rgba(3, 12, 27, 0.18);
}
.sidebar.sidebar-enterprise .nav-item.active,
.sidebar.sidebar-enterprise .dropdown-toggle.active {
color: #142033;
border-color: #9eb0c4;
background: #dce5ef;
box-shadow: inset 3px 0 0 #0f8278, 0 8px 18px rgba(3, 12, 27, 0.2);
}
.sidebar.sidebar-enterprise .nav-icon {
color: #aac0d9;
background: #263a54;
backdrop-filter: none;
}
.sidebar.sidebar-enterprise .nav-item.active .nav-icon,
.sidebar.sidebar-enterprise .dropdown-toggle.active .nav-icon {
color: #0f8278;
background: #d2e5e2;
box-shadow: none;
}
.sidebar.sidebar-enterprise .dropdown-toggle .chevron {
color: #aac0d9;
border-color: #405570;
background: #263a54;
box-shadow: none;
}
.sidebar.sidebar-enterprise .dropdown-toggle .chevron svg {
stroke: currentColor;
}
.sidebar.sidebar-enterprise .dropdown-toggle:hover .chevron {
border-color: #5a718e;
background: #2c425e;
}
.sidebar.sidebar-enterprise .dropdown-toggle.open .chevron {
color: #0f8278;
border-color: #82bcb5;
background: #d2e5e2;
}
.sidebar.sidebar-enterprise .dropdown-item {
color: #aebdd0;
border-color: transparent;
background: transparent;
box-shadow: none;
backdrop-filter: none;
}
.sidebar.sidebar-enterprise .dropdown-item:hover,
.sidebar.sidebar-enterprise .dropdown-item:focus-visible {
color: #f4f7fb;
border-color: #30445e;
background: #1e314b;
}
.sidebar.sidebar-enterprise .dropdown-item.active {
color: #77d0c5;
border-color: transparent;
border-left-color: #38a99b;
background: rgba(15, 130, 120, 0.14);
}
.sidebar.sidebar-enterprise .dropdown-icon {
color: inherit;
background: #263a54;
}
.sidebar.sidebar-enterprise .dropdown-item.active .dropdown-icon {
color: #77d0c5;
background: rgba(15, 130, 120, 0.18);
box-shadow: none;
}
.sidebar.sidebar-enterprise .nav-item.logout {
color: #efaaa5;
border-color: rgba(201, 54, 62, 0.28);
background: rgba(123, 37, 44, 0.18);
}
.sidebar.sidebar-enterprise .nav-item.logout::before {
background: linear-gradient(90deg, transparent, rgba(239, 170, 165, 0.25), transparent);
}
.sidebar.sidebar-enterprise .nav-item.logout .nav-icon {
color: #efaaa5;
background: rgba(123, 37, 44, 0.28);
}
.sidebar.sidebar-enterprise .nav-item.logout:hover,
.sidebar.sidebar-enterprise .nav-item.logout:focus-visible {
color: #ffd3cf;
border-color: rgba(239, 170, 165, 0.44);
background: rgba(123, 37, 44, 0.32);
box-shadow: 0 7px 16px rgba(3, 12, 27, 0.18);
}
.sidebar .nav-locked {
width: 100%;
font: inherit;
text-align: left;
cursor: pointer;
opacity: .55;
filter: grayscale(.8);
}
.sidebar .nav-locked:hover,.sidebar .nav-locked:focus-visible { opacity: .82; }
.sidebar .nav-plan-lock { margin-left: auto; font-size: 12px; }
.plan-upgrade-overlay { position: fixed; inset: 0; z-index: 3000; display: none; place-items: center; padding: 20px; background: rgba(4,13,26,.75); }
.plan-upgrade-overlay.open { display: grid; }
.plan-upgrade-dialog { width: min(430px,100%); padding: 28px; border: 1px solid #52657e; border-radius: 20px; color: #17253a; background: #e3e9f0; box-shadow: 0 24px 60px rgba(0,0,0,.38); }
.plan-upgrade-dialog h2 { margin: 0 0 8px; font-size: 23px; }
.plan-upgrade-dialog p { margin: 0 0 22px; color: #53657d; line-height: 1.6; }
.plan-upgrade-actions { display: flex; justify-content: flex-end; gap: 9px; flex-wrap: wrap; }
.plan-upgrade-actions a,.plan-upgrade-actions button { border: 0; border-radius: 10px; padding: 10px 14px; font: inherit; font-weight: 750; cursor: pointer; text-decoration: none; }
.plan-upgrade-actions button { color: #27364a; background: #cbd5e1; }
.plan-upgrade-actions a { color: #fff; background: #2557b7; }
/* Database-configured accents without PHP inline style declarations. */
body.vem-page-leave-settings .swatch {
background-color: var(--vem-accent, #4F6F9A);
}
body.vem-page-company-shift-roster .shift-chip {
border-left: 4px solid var(--vem-accent, #4F6F9A);
}
/* Canonical Admin Shift Override page layout. */
body.vem-page--admin-shift-override { min-height: 100vh; overflow-x: hidden; }
body.vem-page--admin-shift-override .main-content {
width: auto; min-width: 0; min-height: 100vh; margin-left: 280px;
padding: 26px 29.5px 36px; overflow-x: hidden;
}
body.vem-page--admin-shift-override .page-profile-header {
display: flex; align-items: flex-start; justify-content: space-between; gap: 23px;
width: 100%; padding-bottom: 19.5px; margin-bottom: 23px;
border-bottom: 1px solid rgba(148, 163, 184, 0.28);
}
body.vem-page--admin-shift-override .page-profile-header > div:first-child { min-width: 0; }
body.vem-page--admin-shift-override .title {
margin: 0 0 6.5px; color: #f8fafc; font-size: clamp(24.5px, 3vw, 33px);
line-height: 1.12; letter-spacing: -0.025em;
}
body.vem-page--admin-shift-override .subtitle {
margin: 0; color: #c2cede; font-size: 13px; line-height: 1.55;
}
body.vem-page--admin-shift-override .panel {
width: min(100%, 820px); max-width: 820px; min-width: 0; margin: 0; padding: 16.5px;
overflow: hidden; border: 1px solid rgba(184, 200, 218, 0.72); border-radius: 15px;
background: rgba(210, 222, 234, 0.34); box-shadow: 0 14px 32px rgba(7, 22, 43, 0.1);
}
body.vem-page--admin-shift-override .alert {
margin: 0 0 16.5px; padding: 10.5px 12.5px; border: 1px solid #f0abab;
border-radius: 10px; background: #fff1f1; color: #b42318; line-height: 1.45;
}
body.vem-page--admin-shift-override .summary {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px; margin-bottom: 16.5px;
}
body.vem-page--admin-shift-override .summary > div {
min-width: 0; padding: 10.5px 12.5px; border: 1px solid rgba(174, 191, 210, 0.72);
border-radius: 10px; background: rgba(225, 234, 243, 0.94);
box-shadow: 0 7px 18px rgba(7, 22, 43, 0.08);
}
body.vem-page--admin-shift-override .summary span,
body.vem-page--admin-shift-override .field label {
display: block; margin-bottom: 5px; color: #58708d; font-size: 12px;
font-weight: 650; line-height: 1.25; letter-spacing: 0.025em; text-transform: uppercase;
}
body.vem-page--admin-shift-override .summary strong {
display: block; overflow-wrap: anywhere; color: #223148; font-size: 12.5px;
font-weight: 560; line-height: 1.45;
}
body.vem-page--admin-shift-override .panel > form {
display: grid; gap: 15px; min-width: 0; padding: 19.5px;
border: 1px solid #b8c8da; border-radius: 15px;
background: linear-gradient(145deg, #dce6f1 0%, #d4dfeb 100%);
box-shadow: 0 16px 34px rgba(7, 22, 43, 0.16);
}
body.vem-page--admin-shift-override .field { min-width: 0; margin: 0; }
body.vem-page--admin-shift-override .field[hidden] { display: none !important; }
body.vem-page--admin-shift-override .control {
display: block; width: 100%; max-width: 100%; min-height: 52px; box-sizing: border-box;
padding: 10px 37.5px 10px 11.5px; border: 1px solid #aebfd2; border-radius: 10px;
background-color: #f1f5f9; color: #172238; font: inherit; line-height: 1.4;
}
body.vem-page--admin-shift-override textarea.control {
min-height: 112px; padding-right: 11.5px; resize: vertical;
}
body.vem-page--admin-shift-override .control:focus {
border-color: #2f5ec4; outline: 3px solid rgba(47, 94, 196, 0.16); outline-offset: 1px;
}
body.vem-page--admin-shift-override .actions {
display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
gap: 10px; margin-top: 2px;
}
body.vem-page--admin-shift-override .actions .btn {
width: auto; min-width: 112px; min-height: 48px; margin: 0;
padding: 10px 15px; white-space: nowrap;
}
@media (max-width: 768px) {
body.vem-page--admin-shift-override .main-content { margin-left: 86px; padding: 19.5px 16.5px 29.5px; }
body.vem-page--admin-shift-override .page-profile-header { flex-direction: column; }
body.vem-page--admin-shift-override .summary { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
body.vem-page--admin-shift-override .main-content { margin-left: 0; padding: 70.5px 11.5px 23px; }
body.vem-page--admin-shift-override .panel { padding: 10px; border-radius: 12.5px; }
body.vem-page--admin-shift-override .panel > form { padding: 15px; border-radius: 12.5px; }
body.vem-page--admin-shift-override .actions { align-items: stretch; flex-direction: column-reverse; }
body.vem-page--admin-shift-override .actions .btn { width: 100%; }
}
/* Profile workspace theme preference selector. */
body.vem-page-profile .theme-preference-panel {
grid-column: 1 / -1;
}
body.vem-page-profile .theme-preference-form,
body.vem-page-profile .theme-options {
min-width: 0;
margin: 0;
}
body.vem-page-profile .theme-options {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 11.5px;
padding: 0;
border: 0;
}
body.vem-page-profile .sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
body.vem-page-profile .theme-option {
position: relative;
display: grid;
grid-template-rows: 92px auto;
gap: 10.5px;
min-width: 0;
min-height: 196px;
padding: 11.5px;
border: 1px solid #b7c7d9;
border-radius: 11.5px;
background: #e8eff6;
color: #172238;
cursor: pointer;
transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
body.vem-page-profile .theme-option:hover {
border-color: #7898bd;
box-shadow: 0 10px 24px rgba(14, 35, 64, 0.12);
transform: translateY(-1px);
}
body.vem-page-profile .theme-option:focus-within {
outline: 3px solid rgba(47, 94, 196, 0.2);
outline-offset: 2px;
}
body.vem-page-profile .theme-option > input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
body.vem-page-profile .theme-option:has(input:checked) {
border-color: #2f5ec4;
box-shadow: 0 0 0 2px rgba(47, 94, 196, 0.13), 0 12px 26px rgba(14, 35, 64, 0.14);
}
body.vem-page-profile .theme-option-visual {
display: grid;
grid-template-columns: 24% 1fr;
min-width: 0;
overflow: hidden;
border: 1px solid rgba(119, 143, 171, 0.48);
border-radius: 8px;
background: #f7fafc;
}
body.vem-page-profile .theme-preview-sidebar {
background: #dbe5ef;
border-right: 1px solid rgba(119, 143, 171, 0.35);
}
body.vem-page-profile .theme-preview-content {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 5.5px;
align-content: center;
padding: 8px;
}
body.vem-page-profile .theme-preview-content span {
display: block;
height: 22px;
border-radius: 4px;
background: #d9e4f0;
}
body.vem-page-profile .theme-preview-content span:first-child {
grid-column: 1 / -1;
height: 9px;
background: #3262c8;
}
body.vem-page-profile .theme-option-dark .theme-option-visual {
background: #090909;
border-color: #34322d;
}
body.vem-page-profile .theme-option-dark .theme-preview-sidebar { background: #000000; border-color: #34322d; }
body.vem-page-profile .theme-option-dark .theme-preview-content span { background: #171715; }
body.vem-page-profile .theme-option-dark .theme-preview-content span:first-child { background: #e8dec6; }
body.vem-page-profile .theme-option-deep_blue_sea .theme-option-visual {
background: #1a1533;
border-color: #4a3a7a;
}
body.vem-page-profile .theme-option-deep_blue_sea .theme-preview-sidebar { background: #0e0b1f; border-color: #4a3a7a; }
body.vem-page-profile .theme-option-deep_blue_sea .theme-preview-content span { background: #241d47; }
body.vem-page-profile .theme-option-deep_blue_sea .theme-preview-content span:first-child { background: #f2b544; }
body.vem-page-profile .theme-option-enterprise .theme-option-visual {
background: #17263d;
border-color: #4d6687;
}
body.vem-page-profile .theme-option-enterprise .theme-preview-sidebar { background: #0f1d31; border-color: #4d6687; }
body.vem-page-profile .theme-option-enterprise .theme-preview-content span { background: #d8e3ee; }
body.vem-page-profile .theme-option-enterprise .theme-preview-content span:first-child { background: #2e5bc0; }
body.vem-page-profile .theme-option-copy {
display: grid;
gap: 4px;
padding-right: 16.5px;
}
body.vem-page-profile .theme-option-copy strong {
color: #172238;
font-size: 12.5px;
line-height: 1.3;
}
body.vem-page-profile .theme-option-copy small {
color: #607590;
font-size: 12px;
line-height: 1.45;
}
/* Theme preview cards intentionally retain a pale surface under every active
workspace theme. Keep their copy independent from page-level text tokens. */
body.vem-page-profile .theme-options .theme-option .theme-option-title {
color: #172238 !important;
-webkit-text-fill-color: #172238 !important;
opacity: 1 !important;
visibility: visible !important;
text-shadow: none !important;
}
body.vem-page-profile .theme-options .theme-option .theme-option-description {
color: #50647d !important;
-webkit-text-fill-color: #50647d !important;
opacity: 1 !important;
visibility: visible !important;
text-shadow: none !important;
}
/* Plan-gated themes: visible but locked, so users see what a higher plan
unlocks instead of the option simply not existing. */
body.vem-page-profile .theme-option.theme-option-locked {
cursor: not-allowed;
opacity: 0.6;
filter: grayscale(0.55);
}
body.vem-page-profile .theme-option.theme-option-locked:hover {
border-color: #b7c7d9;
box-shadow: none;
transform: none;
}
body.vem-page-profile .theme-option.theme-option-locked .theme-option-visual {
opacity: 0.85;
}
body.vem-page-profile .theme-lock-badge {
display: inline-flex;
margin-left: 6px;
font-size: 12px;
vertical-align: middle;
filter: none;
}
body.vem-page-profile .theme-options .theme-option .theme-lock-note {
display: block;
margin-top: 2px;
color: #a86213 !important;
-webkit-text-fill-color: #a86213 !important;
font-weight: 650;
opacity: 1 !important;
}
body.vem-page-profile .theme-lock-note a {
color: #2854b8;
text-decoration: underline;
}
body.vem-page-profile .theme-selected-mark {
position: absolute;
right: 12px;
bottom: 12px;
display: grid;
place-items: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: #d8e2ed;
color: transparent;
font-size: 12px;
font-weight: 800;
}
body.vem-page-profile .theme-option:has(input:checked) .theme-selected-mark {
background: #2f5ec4;
color: #fff;
}
body.vem-page-profile .theme-form-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
margin-top: 15px;
}
body.vem-page-profile .theme-selection-note {
max-width: 650px;
color: #607590;
font-size: 12px;
line-height: 1.45;
}
body.vem-page-profile .theme-form-actions .btn {
width: auto;
min-width: 190px;
margin: 0;
white-space: nowrap;
}
@media (max-width: 1180px) {
body.vem-page-profile .theme-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
body.vem-page-profile .theme-options { grid-template-columns: 1fr; }
body.vem-page-profile .theme-form-actions { align-items: stretch; flex-direction: column; }
body.vem-page-profile .theme-form-actions .btn { width: 100%; }
}
/* Profile password-security action and modal. */
body.vem-page-profile .account-security-action {
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
margin-top: 15px;
padding-top: 15px;
border-top: 1px solid rgba(156, 177, 201, 0.48);
}
body.vem-page-profile .account-security-action > div {
display: grid;
gap: 3px;
min-width: 0;
}
body.vem-page-profile .account-security-action strong {
color: #172238;
font-size: 12px;
line-height: 1.35;
}
body.vem-page-profile .account-security-action span {
color: #607590;
font-size: 12px;
line-height: 1.4;
}
body.vem-page-profile .account-security-action .btn {
width: auto;
min-width: 150px;
margin: 0;
white-space: nowrap;
}
body.vem-page-profile .password-dialog {
width: min(calc(100% - 32px), 540px);
max-width: 540px;
max-height: calc(100vh - 48px);
margin: auto;
padding: 0;
overflow: hidden auto;
border: 1px solid #b8c8da;
border-radius: 15px;
background: #dce6f1;
color: #172238;
box-shadow: 0 28px 70px rgba(4, 16, 34, 0.42);
}
body.vem-page-profile .password-dialog:not([open]) {
display: none;
}
body.vem-page-profile .password-dialog::backdrop {
background: rgba(5, 17, 34, 0.7);
backdrop-filter: blur(4px);
}
body.vem-page-profile .password-dialog-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16.5px;
padding: 18px 19.5px 15px;
border-bottom: 1px solid rgba(156, 177, 201, 0.55);
}
body.vem-page-profile .password-dialog-header h2 {
margin: 0 0 4px;
color: #172238;
font-size: 18px;
line-height: 1.25;
letter-spacing: -0.015em;
}
body.vem-page-profile .password-dialog-header p {
margin: 0;
color: #607590;
font-size: 12px;
line-height: 1.45;
}
body.vem-page-profile .password-dialog-close {
display: grid;
place-items: center;
flex: 0 0 36px;
width: 36px;
height: 36px;
padding: 0;
border: 1px solid #b7c7d9;
border-radius: 8px;
background: #edf3f8;
color: #425a78;
font: inherit;
font-size: 19.5px;
line-height: 1;
cursor: pointer;
}
body.vem-page-profile .password-dialog-close:hover,
body.vem-page-profile .password-dialog-close:focus-visible {
border-color: #7898bd;
color: #172238;
}
body.vem-page-profile .password-dialog-body {
padding: 18px 19.5px 19.5px;
}
body.vem-page-profile .password-dialog-form {
display: grid;
gap: 12.5px;
}
body.vem-page-profile .password-dialog-form .form-group {
margin: 0;
}
body.vem-page-profile .password-dialog-form input {
width: 100%;
box-sizing: border-box;
}
body.vem-page-profile .password-dialog-form .password-rules {
margin: 0;
padding: 9px 10.5px;
border: 1px solid #bfd0e1;
border-radius: 8px;
background: rgba(237, 243, 248, 0.84);
color: #607590;
font-size: 12px;
line-height: 1.45;
}
body.vem-page-profile .password-dialog-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 9px;
margin-top: 2px;
}
body.vem-page-profile .password-dialog-actions .btn {
width: auto;
min-width: 128px;
margin: 0;
}
@media (max-width: 560px) {
body.vem-page-profile .account-security-action {
align-items: stretch;
flex-direction: column;
}
body.vem-page-profile .account-security-action .btn { width: 100%; }
body.vem-page-profile .password-dialog-header { padding: 15.5px 15px 13px; }
body.vem-page-profile .password-dialog-body { padding: 15px; }
body.vem-page-profile .password-dialog-actions { align-items: stretch; flex-direction: column-reverse; }
body.vem-page-profile .password-dialog-actions .btn { width: 100%; }
}
/* ==========================================================================
Canonical authenticated user-profile card
--------------------------------------------------------------------------
This is the complete Dashboard profile-card treatment shared by every
authenticated page. It deliberately appears after all legacy page rules so
leave, expense, roster, and administration pages cannot recolor or hide it.
========================================================================== */
:root {
--vem-profile-card-bg: #dce5ef;
--vem-profile-card-border: #afbdce;
--vem-profile-card-shadow: 0 7px 18px rgba(15, 32, 57, 0.16);
--vem-profile-avatar-start: #315cc4;
--vem-profile-avatar-end: #2448a8;
--vem-profile-avatar-text: #ffffff;
--vem-profile-name: #142033;
--vem-profile-role: #61738b;
}
:root[data-vem-theme="white"] {
--vem-profile-card-bg: #ffffff;
--vem-profile-card-border: #d5deea;
--vem-profile-card-shadow: 0 7px 18px rgba(15, 32, 57, 0.12);
}
:root[data-vem-theme="enterprise"] {
--vem-profile-card-bg: #dce5ef;
--vem-profile-card-border: #afbdce;
--vem-profile-card-shadow: 0 7px 18px rgba(15, 32, 57, 0.16);
}
:root[data-vem-theme="dark"] {
--vem-profile-card-bg: #000000;
--vem-profile-card-border: #eee5cf;
--vem-profile-card-shadow: none;
--vem-profile-avatar-start: #eee5cf;
--vem-profile-avatar-end: #eee5cf;
--vem-profile-avatar-text: #000000;
--vem-profile-name: #eee5cf;
--vem-profile-role: #eee5cf;
}
html body .user-profile[data-profile-mode="unified"] {
background: var(--vem-profile-card-bg) !important;
background-image: none !important;
border: 1px solid var(--vem-profile-card-border) !important;
box-shadow: var(--vem-profile-card-shadow) !important;
color: var(--vem-profile-name) !important;
opacity: 1 !important;
filter: none !important;
backdrop-filter: none !important;
visibility: visible !important;
}
html body .user-profile[data-profile-mode="unified"]::before,
html body .user-profile[data-profile-mode="unified"]::after {
display: none !important;
content: none !important;
}
html body .user-profile[data-profile-mode="unified"] .user-profile__inner,
html body .user-profile[data-profile-mode="unified"] .user-profile__identity {
background: transparent !important;
opacity: 1 !important;
filter: none !important;
visibility: visible !important;
}
html body .user-profile[data-profile-mode="unified"] .user-avatar {
background: linear-gradient(145deg, var(--vem-profile-avatar-start), var(--vem-profile-avatar-end)) !important;
border: 0 !important;
box-shadow: 0 7px 16px rgba(36, 72, 168, 0.20) !important;
color: var(--vem-profile-avatar-text) !important;
opacity: 1 !important;
filter: none !important;
visibility: visible !important;
}
:root[data-vem-theme="dark"] body .user-profile[data-profile-mode="unified"] .user-avatar {
box-shadow: none !important;
}
html body .user-profile[data-profile-mode="unified"] .user-name {
color: var(--vem-profile-name) !important;
opacity: 1 !important;
text-shadow: none !important;
visibility: visible !important;
}
html body .user-profile[data-profile-mode="unified"] .user-role {
color: var(--vem-profile-role) !important;
opacity: 1 !important;
text-shadow: none !important;
visibility: visible !important;
}
html body .user-profile[data-profile-mode="unified"]:hover,
html body .user-profile[data-profile-mode="unified"]:focus-visible {
background: var(--vem-profile-card-bg) !important;
border-color: var(--vem-profile-card-border) !important;
color: var(--vem-profile-name) !important;
transform: translateY(-1px);
}
/* Canonical authenticated-user profile card.
One shared component and one layout are used by Dashboard and every
authenticated visual page. Theme styles continue to control its colors.
Now a (opens the Profile/Sign Out dropdown) rather than a plain
— reset the browser's default button chrome so it renders identically
to how it did as a link. */
body .user-profile[data-profile-mode="unified"] {
font: inherit !important;
text-align: left !important;
cursor: pointer !important;
appearance: none !important;
-webkit-appearance: none !important;
}
body .user-profile[data-profile-mode="unified"] {
box-sizing: border-box !important;
position: relative !important;
display: flex !important;
width: auto !important;
min-width: 238px !important;
max-width: 100% !important;
min-height: 62px !important;
align-items: center !important;
flex: 0 0 auto !important;
gap: 0 !important;
padding: 0 !important;
overflow: hidden !important;
border-radius: 14px !important;
color: var(--vem-text, var(--ink)) !important;
text-decoration: none !important;
}
body .user-profile[data-profile-mode="unified"] .user-profile__inner {
position: relative !important;
z-index: 1 !important;
display: flex !important;
width: 100% !important;
min-height: inherit !important;
align-items: center !important;
gap: 13px !important;
padding: 9px 14px 9px 9px !important;
box-sizing: border-box !important;
}
body .user-profile[data-profile-mode="unified"] .user-profile__identity {
display: flex !important;
min-width: 0 !important;
flex-direction: column !important;
align-items: flex-start !important;
justify-content: center !important;
gap: 3px !important;
text-align: left !important;
}
body .user-profile[data-profile-mode="unified"] .user-avatar {
display: grid !important;
width: 42px !important;
height: 42px !important;
min-width: 42px !important;
min-height: 42px !important;
place-items: center !important;
flex: 0 0 42px !important;
margin: 0 !important;
padding: 0 !important;
border-radius: 10px !important;
font-size: 14px !important;
font-weight: 800 !important;
line-height: 1 !important;
letter-spacing: 0.02em !important;
}
body .user-profile[data-profile-mode="unified"] .user-name,
body .user-profile[data-profile-mode="unified"] .user-role {
display: block !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
text-align: left !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
body .user-profile[data-profile-mode="unified"] .user-name {
color: var(--vem-text, var(--ink)) !important;
font-size: 14px !important;
font-weight: 750 !important;
line-height: 1.25 !important;
}
body .user-profile[data-profile-mode="unified"] .user-role {
color: var(--vem-text-muted, var(--muted)) !important;
font-size: 13px !important;
font-weight: 450 !important;
line-height: 1.2 !important;
}
@media (max-width: 560px) {
body .user-profile[data-profile-mode="unified"] {
min-width: 0 !important;
width: min(238px, 100%) !important;
}
}
/* Pay Structure & Payslips (payroll.php)
----------------------------------------
This codebase has no generic base rule for .panel/.filters/.btn/.table-wrap/
etc — every page defines its own geometry via body.vem-page-, and
only actual colours are unified centrally (by the four theme files, via
!important on class-substring selectors). This block supplies that
missing geometry (padding, radius, gaps, sizing) using the same shared
tokens (--ink, --muted, --brand, --line, --radius-*, --shadow-*,
--transition-*) every other page draws from, so colours still come
entirely from whichever theme is active — nothing here is theme-specific. */
.vem-page-payroll .main-content { width: auto; max-width: none; min-height: 100vh; margin-left: 290px; padding: 26px 23px; overflow-x: hidden; box-sizing: border-box; }
@media (max-width: 1200px) {
.vem-page-payroll .main-content { margin-left: 72px; }
}
@media (max-width: 650px) {
.vem-page-payroll .main-content { margin-left: 0; padding: 13px 10px; }
}
.vem-page-payroll .top-bar { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; margin-bottom: 23px; flex-wrap: wrap; }
.vem-page-payroll .page-kicker { display: inline-flex; align-items: center; gap: 6.5px; margin: 0 0 5px; color: var(--brand); font-size: 12px; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase; }
.vem-page-payroll .page-title { margin: 0; color: var(--ink); font-size: 24.5px; line-height: 1.14; font-weight: 760; }
.vem-page-payroll .page-subtitle { max-width: 760px; margin: 6.5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; font-weight: 450; }
.vem-page-payroll .panel { position: relative; margin-bottom: 19.5px; padding: 19.5px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel-solid, var(--panel)); box-shadow: var(--shadow-sm); }
.vem-page-payroll .panel-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 16.5px; }
.vem-page-payroll .panel-header h2 { margin: 0; color: var(--ink); font-size: 16.5px; font-weight: 760; }
.vem-page-payroll .alert { margin-bottom: 15px; padding: 11.5px 15px; border-radius: var(--radius-md); font-size: 12px; font-weight: 650; border: 1px solid transparent; }
.vem-page-payroll .filters { display: flex; flex-wrap: wrap; align-items: end; gap: 11.5px; margin-bottom: 16.5px; padding: 15px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel-soft, var(--panel)); }
.vem-page-payroll .filters > div { display: flex; flex-direction: column; gap: 5px; min-width: 160px; }
.vem-page-payroll label { display: block; color: var(--ink); font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.vem-page-payroll .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 11.5px; margin-bottom: 16.5px; }
.vem-page-payroll .field { display: flex; min-width: 0; flex-direction: column; gap: 5px; }
.vem-page-payroll .field label { margin: 0; }
.vem-page-payroll :is(input, select, textarea, .control) { width: 100%; min-width: 0; min-height: 42px; padding: 7.5px 11.5px; border: 1px solid var(--line-strong, var(--line)); border-radius: var(--radius-md); background: var(--input-bg, var(--panel-solid)); color: var(--ink); font-family: inherit; font-size: 12px; font-weight: 500; box-sizing: border-box; }
.vem-page-payroll textarea { min-height: 90px; resize: vertical; }
.vem-page-payroll :is(input, select, textarea, .control):focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-glow, var(--brand-soft)); }
.vem-page-payroll .btn { position: relative; display: inline-grid; place-items: center; min-height: 42px; padding: 7.5px 16.5px; border: 1px solid transparent; border-radius: var(--radius-md); cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 800; letter-spacing: 0.02em; text-decoration: none; transition: all var(--transition-fast); }
.vem-page-payroll .btn-small { min-height: 34px; padding: 5px 11.5px; font-size: 12px; }
.vem-page-payroll .btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.vem-page-payroll .btn-muted { background: var(--panel-hover, var(--panel-solid)); border-color: var(--line); color: var(--ink-light, var(--ink)); }
.vem-page-payroll .btn-danger { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); }
.vem-page-payroll .btn:active { transform: translateY(-1px) scale(0.98); }
.vem-page-payroll .btn:disabled { opacity: 0.5; cursor: not-allowed; }
.vem-page-payroll .actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; }
.vem-page-payroll .table-wrap { overflow-x: auto; margin-bottom: 16.5px; border: 1px solid var(--line); border-radius: var(--radius-md); }
.vem-page-payroll .user-table { width: 100%; min-width: 560px; border-collapse: separate; border-spacing: 0; font-size: 12px; }
.vem-page-payroll .user-table th { text-align: left; padding: 10px 11.5px; color: var(--muted); background: var(--panel-soft, var(--panel)); border-bottom: 1px solid var(--line); font-weight: 800; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; }
.vem-page-payroll .user-table td { padding: 10px 11.5px; border-bottom: 1px solid var(--line); color: var(--ink); }
.vem-page-payroll .user-table tr:last-child td { border-bottom: 0; }
.vem-page-payroll .user-table td .control { min-height: 36px; padding: 5px 8px; }
.vem-page-payroll .role-badge, .vem-page-payroll .status-badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: 0.02em; border: 1px solid transparent; }
.vem-page-payroll .empty-state { padding: 33px 16.5px; color: var(--muted); text-align: center; font-size: 12px; font-weight: 600; }
.vem-page-payroll .section-label { margin: 19.5px 0 10px; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.vem-page-payroll .rate-meta { color: var(--muted); font-size: 12px; }
.vem-page-payroll .rate-meta a { color: var(--brand); text-decoration: underline; }
.vem-page-payroll .history { margin-top: 16.5px; padding-top: 13px; border-top: 1px solid var(--line); }
.vem-page-payroll .history summary { cursor: pointer; color: var(--ink); font-weight: 700; font-size: 12px; }
.vem-page-payroll .history form { margin-top: 13px; }
.vem-page-payroll .check { display: flex; align-items: flex-start; gap: 8px; margin-top: 11.5px; color: var(--ink); font-size: 12px; font-weight: 600; line-height: 1.5; }
.vem-page-payroll .check input { width: auto; min-height: 0; margin-top: 3px; }
.vem-page-payroll .modal-overlay { position: fixed; inset: 0; z-index: 1000; display: none; place-items: center; padding: 16.5px; background: rgba(4, 8, 16, 0.55); backdrop-filter: blur(4px); }
.vem-page-payroll .modal-overlay.active { display: grid; }
.vem-page-payroll .modal { width: min(560px, 100%); max-height: calc(100vh - 40px); overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel-solid, var(--panel)); box-shadow: var(--shadow-lg); }
.vem-page-payroll .modal-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 18px; border-bottom: 1px solid var(--line); }
.vem-page-payroll .modal-header h3 { margin: 0; color: var(--ink); font-size: 14px; font-weight: 760; }
.vem-page-payroll .modal-body { padding: 18px; }
.vem-page-payroll .modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 15px 18px; border-top: 1px solid var(--line); }
.vem-page-payroll .modal-close { width: 34px; height: 34px; display: inline-grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-hover, var(--panel-solid)); color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1; }
@media (max-width: 620px) {
.vem-page-payroll .filters, .vem-page-payroll .form-grid { grid-template-columns: 1fr; }
}
/* Payroll refinement pass: two-column layout, role badges, live totals,
payslip list, testing-only delete affordance, and a calmer disclosure
marker for "Add a custom salary component" (its default browser
triangle read as a play button). Geometry + token-based colour only —
nothing here is theme-specific. */
.vem-page-payroll .payroll-layout { display: grid; grid-template-columns: 1fr 340px; align-items: start; gap: 19.5px; }
.vem-page-payroll .role-badge.role-admin { background: var(--brand-soft, var(--panel-soft)); color: var(--brand); border-color: var(--brand); }
.vem-page-payroll .role-badge.role-approver { background: var(--success-bg, var(--panel-soft)); color: var(--success); border-color: var(--success); }
.vem-page-payroll .role-badge.role-user { background: var(--panel-soft, var(--panel)); color: var(--ink-light, var(--ink)); border-color: var(--line); }
.vem-page-payroll .user-table tfoot td { padding: 8px 11.5px; border-top: 2px solid var(--line); border-bottom: 0; background: var(--panel-soft, var(--panel)); font-weight: 700; }
.vem-page-payroll .user-table tfoot td:last-child { text-align: left; }
.vem-page-payroll .payroll-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11.5px; margin: 15px 0; padding: 13px 15px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel-soft, var(--panel)); }
.vem-page-payroll .payroll-summary > div { display: flex; flex-direction: column; gap: 3.5px; }
.vem-page-payroll .payroll-summary span { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.vem-page-payroll .payroll-summary strong { color: var(--ink); font-size: 14px; }
.vem-page-payroll .payroll-summary-net strong { color: var(--brand); font-size: 15.5px; }
.vem-page-payroll .payroll-add-component { margin-top: 16.5px; padding-top: 13px; border-top: 1px solid var(--line); }
.vem-page-payroll .payroll-add-component summary { display: flex; align-items: center; gap: 6.5px; cursor: pointer; color: var(--ink); font-weight: 700; font-size: 12px; list-style: none; }
.vem-page-payroll .payroll-add-component summary::-webkit-details-marker { display: none; }
.vem-page-payroll .payroll-add-component summary::before {
content: "";
flex: 0 0 auto;
width: 18px;
height: 18px;
border: 1px solid var(--line);
border-radius: 4px;
background-color: var(--panel-solid, var(--panel));
background-repeat: no-repeat;
background-position: center;
background-image:
linear-gradient(var(--muted), var(--muted)),
linear-gradient(var(--muted), var(--muted));
background-size: 8px 2px, 2px 8px;
}
.vem-page-payroll .payroll-add-component[open] summary::before { background-image: linear-gradient(var(--muted), var(--muted)); background-size: 8px 2px; }
.vem-page-payroll .payroll-add-component form { margin-top: 13px; }
.vem-page-payroll .payroll-component-actions { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.vem-page-payroll .payroll-inline-delete { margin: 0; display: inline; }
.vem-page-payroll .payroll-payslip-form { grid-template-columns: 1fr 1fr; }
.vem-page-payroll .payroll-payslip-list { display: grid; gap: 8px; }
.vem-page-payroll .payroll-payslip-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 10px 11.5px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel-soft, var(--panel)); }
.vem-page-payroll .payroll-payslip-row .rate-meta { display: block; margin-top: 2px; }
.vem-page-payroll .payroll-payslip-actions { display: flex; gap: 6.5px; }
.vem-page-payroll .payroll-inline-email { margin: 0; display: inline; }
@media (max-width: 980px) {
.vem-page-payroll .payroll-layout { grid-template-columns: 1fr; }
}
/* Payslip Template designer (payslip_template.php)
Same missing-base-geometry situation as payroll.php — every page in
this codebase supplies its own .panel/.filters/.btn/.table-wrap/etc
geometry, only colours are shared (by the theme files). Reusing the
exact same token-based values already proven on payroll.php, plus the
new row/column builder UI. */
.vem-page-payslip-template .main-content { width: auto; max-width: none; min-height: 100vh; margin-left: 290px; padding: 26px 23px; overflow-x: hidden; box-sizing: border-box; }
@media (max-width: 1200px) {
.vem-page-payslip-template .main-content { margin-left: 72px; }
}
@media (max-width: 650px) {
.vem-page-payslip-template .main-content { margin-left: 0; padding: 13px 10px; }
}
.vem-page-payslip-template .top-bar { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; margin-bottom: 23px; flex-wrap: wrap; }
.vem-page-payslip-template .page-kicker { display: inline-flex; align-items: center; gap: 6.5px; margin: 0 0 5px; color: var(--brand); font-size: 12px; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase; }
.vem-page-payslip-template .page-title { margin: 0; color: var(--ink); font-size: 24.5px; line-height: 1.14; font-weight: 760; }
.vem-page-payslip-template .page-subtitle { max-width: 760px; margin: 6.5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; font-weight: 450; }
.vem-page-payslip-template .panel { position: relative; margin-bottom: 19.5px; padding: 19.5px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel-solid, var(--panel)); box-shadow: var(--shadow-sm); }
.vem-page-payslip-template .panel-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 16.5px; }
.vem-page-payslip-template .panel-header h2 { margin: 0; color: var(--ink); font-size: 16.5px; font-weight: 760; }
.vem-page-payslip-template .rate-meta { color: var(--muted); font-size: 12px; }
.vem-page-payslip-template .rate-meta a { color: var(--brand); text-decoration: underline; }
.vem-page-payslip-template .alert { margin-bottom: 15px; padding: 11.5px 15px; border-radius: var(--radius-md); font-size: 12px; font-weight: 650; border: 1px solid transparent; }
.vem-page-payslip-template .empty-state { padding: 13px 15px; margin-bottom: 13px; color: var(--muted); font-size: 12px; line-height: 1.6; border: 1px dashed var(--line); border-radius: var(--radius-md); }
.vem-page-payslip-template :is(input, select, textarea, .control) { min-height: 40px; padding: 6.5px 10px; border: 1px solid var(--line-strong, var(--line)); border-radius: var(--radius-md); background: var(--input-bg, var(--panel-solid)); color: var(--ink); font-family: inherit; font-size: 12px; box-sizing: border-box; }
.vem-page-payslip-template :is(input, select, textarea, .control):focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow, var(--brand-soft)); }
.vem-page-payslip-template .btn { position: relative; display: inline-grid; place-items: center; min-height: 42px; padding: 7.5px 16.5px; border: 1px solid transparent; border-radius: var(--radius-md); cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 800; letter-spacing: 0.02em; transition: all var(--transition-fast); }
.vem-page-payslip-template .btn-small { min-height: 32px; padding: 4px 10px; font-size: 12px; }
.vem-page-payslip-template .btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.vem-page-payslip-template .btn-muted { background: var(--panel-hover, var(--panel-solid)); border-color: var(--line); color: var(--ink-light, var(--ink)); }
.vem-page-payslip-template .btn-danger { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); }
.vem-page-payslip-template .btn:active { transform: translateY(-1px) scale(0.98); }
.vem-page-payslip-template .actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16.5px; }
.vem-page-payslip-template .payslip-builder { display: grid; gap: 11.5px; }
.vem-page-payslip-template .payslip-row { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel-soft, var(--panel)); padding: 11.5px; }
.vem-page-payslip-template .payslip-row-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 6.5px; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.vem-page-payslip-template .payslip-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.vem-page-payslip-template .payslip-column {
display: grid; gap: 6.5px; padding: 10px; border: 1px solid var(--line-strong, var(--line)); border-radius: var(--radius-sm);
background: var(--panel-solid, var(--panel)); box-shadow: var(--shadow-sm);
/* Grid items default to min-width:auto, which refuses to shrink below the
content's natural width — with only 2 columns each track is wide enough
to absorb that, but at 3-4 columns the tracks narrow past a 's
natural width and it overflows the card. min-width:0 lets it shrink
and wrap/truncate inside the card instead. */
min-width: 0;
}
.vem-page-payslip-template .payslip-column > * { min-width: 0; width: 100%; box-sizing: border-box; }
@media (max-width: 700px) {
.vem-page-payslip-template .payslip-columns { grid-template-columns: 1fr; }
}
/* Configure Templates hub (template_hub.php) */
.vem-page-template-hub .main-content { width: auto; max-width: none; min-height: 100vh; margin-left: 290px; padding: 26px 23px; overflow-x: hidden; box-sizing: border-box; }
@media (max-width: 1200px) {
.vem-page-template-hub .main-content { margin-left: 72px; }
}
@media (max-width: 650px) {
.vem-page-template-hub .main-content { margin-left: 0; padding: 13px 10px; }
}
.vem-page-template-hub .top-bar { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; margin-bottom: 23px; flex-wrap: wrap; }
.vem-page-template-hub .page-kicker { display: inline-flex; align-items: center; gap: 6.5px; margin: 0 0 5px; color: var(--brand); font-size: 12px; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase; }
.vem-page-template-hub .page-title { margin: 0; color: var(--ink); font-size: 24.5px; line-height: 1.14; font-weight: 760; }
.vem-page-template-hub .page-subtitle { max-width: 760px; margin: 6.5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; font-weight: 450; }
.vem-page-template-hub .panel { position: relative; margin-bottom: 19.5px; padding: 19.5px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel-solid, var(--panel)); box-shadow: var(--shadow-sm); }
.vem-page-template-hub .template-hub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 13px; }
.vem-page-template-hub .template-hub-card { display: flex; flex-direction: column; gap: 8px; padding: 16.5px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel-soft, var(--panel)); text-decoration: none; transition: all var(--transition-fast); }
.vem-page-template-hub a.template-hub-card:hover { border-color: var(--brand); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.vem-page-template-hub .template-hub-card-locked { opacity: 0.6; cursor: not-allowed; }
.vem-page-template-hub .template-hub-card-title { color: var(--ink); font-size: 13px; font-weight: 760; }
.vem-page-template-hub .template-hub-card-desc { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; flex-grow: 1; }
.vem-page-template-hub .template-hub-card-status { align-self: flex-start; padding: 3.5px 8px; border-radius: var(--radius-full, 999px); font-size: 11px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; }
.vem-page-template-hub .status-active { background: var(--success-bg, rgba(34,197,94,0.12)); color: var(--success, #16a34a); }
.vem-page-template-hub .status-locked { background: var(--panel-hover, var(--panel-solid)); color: var(--muted); border: 1px solid var(--line); }
/* Bulk Payslip Generation (bulk_payslip.php)
Same page-scoped geometry pattern as payroll.php/payslip_template.php —
tokens only, no hardcoded whites, so it stays correct across every theme. */
.vem-page-bulk-payslip .main-content { width: auto; max-width: none; min-height: 100vh; margin-left: 290px; padding: 26px 23px; overflow-x: hidden; box-sizing: border-box; }
@media (max-width: 1200px) {
.vem-page-bulk-payslip .main-content { margin-left: 72px; }
}
@media (max-width: 650px) {
.vem-page-bulk-payslip .main-content { margin-left: 0; padding: 13px 10px; }
}
.vem-page-bulk-payslip .top-bar { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; margin-bottom: 23px; flex-wrap: wrap; }
.vem-page-bulk-payslip .page-kicker { display: inline-flex; align-items: center; gap: 6.5px; margin: 0 0 5px; color: var(--brand); font-size: 12px; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase; }
.vem-page-bulk-payslip .page-title { margin: 0; color: var(--ink); font-size: 24.5px; line-height: 1.14; font-weight: 760; }
.vem-page-bulk-payslip .page-subtitle { max-width: 760px; margin: 6.5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; font-weight: 450; }
.vem-page-bulk-payslip .panel { position: relative; margin-bottom: 19.5px; padding: 19.5px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel-solid, var(--panel)); box-shadow: var(--shadow-sm); }
.vem-page-bulk-payslip .panel-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 16.5px; }
.vem-page-bulk-payslip .panel-header h2 { margin: 0; color: var(--ink); font-size: 16.5px; font-weight: 760; }
.vem-page-bulk-payslip .alert { margin-bottom: 15px; padding: 11.5px 15px; border-radius: var(--radius-md); font-size: 12px; font-weight: 650; border: 1px solid transparent; }
.vem-page-bulk-payslip .empty-state { padding: 13px 15px; margin-bottom: 13px; color: var(--muted); font-size: 12px; line-height: 1.6; border: 1px dashed var(--line); border-radius: var(--radius-md); }
.vem-page-bulk-payslip :is(input, select, textarea, .control) { min-height: 40px; padding: 6.5px 10px; border: 1px solid var(--line-strong, var(--line)); border-radius: var(--radius-md); background: var(--input-bg, var(--panel-solid)); color: var(--ink); font-family: inherit; font-size: 12px; box-sizing: border-box; }
.vem-page-bulk-payslip :is(input, select, textarea, .control):focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow, var(--brand-soft)); }
.vem-page-bulk-payslip .field { display: grid; gap: 5px; }
.vem-page-bulk-payslip .field label { color: var(--muted); font-size: 12px; font-weight: 700; }
.vem-page-bulk-payslip .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 11.5px; margin-bottom: 13px; }
.vem-page-bulk-payslip .bulk-period-grid { max-width: 420px; }
.vem-page-bulk-payslip .btn { position: relative; display: inline-grid; place-items: center; min-height: 42px; padding: 7.5px 16.5px; border: 1px solid transparent; border-radius: var(--radius-md); cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 800; letter-spacing: 0.02em; transition: all var(--transition-fast); }
.vem-page-bulk-payslip .btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.vem-page-bulk-payslip .btn:active { transform: translateY(-1px) scale(0.98); }
.vem-page-bulk-payslip .actions { display: flex; flex-wrap: wrap; gap: 8px; }
.vem-page-bulk-payslip .btn-muted { background: var(--panel-hover, var(--panel-solid, #fff)); border-color: var(--line-strong, var(--line)); color: var(--ink); }
.vem-page-bulk-payslip .btn-small { min-height: 32px; padding: 5px 10px; font-size: 12px; }
/* Searchable dropdown-with-checkboxes for project selection — a plain
checkbox grid stops working once a company has ~200 projects (this was
a real report: unusable at that scale). Same pattern as Hiring
Management's interviewer picker: a toggle button showing a live count,
a dropdown panel with a search box that filters the list in place. */
.vem-page-bulk-payslip .bulk-project-picker { position: relative; max-width: 420px; margin-bottom: 16.5px; }
.vem-page-bulk-payslip .bulk-project-picker-toggle { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; text-align: left; cursor: pointer; }
.vem-page-bulk-payslip .bulk-project-picker-toggle::after { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg) translateY(-3px); flex: 0 0 auto; }
.vem-page-bulk-payslip .bulk-project-picker-panel {
position: fixed;
z-index: 3000;
width: 420px;
max-width: calc(100vw - 32px);
padding: 11.5px;
border: 1px solid var(--line-strong, var(--line));
border-radius: var(--radius-md);
background: var(--panel-solid, #fff);
box-shadow: 0 20px 48px rgba(15, 23, 42, 0.24);
}
.vem-page-bulk-payslip .bulk-project-picker-panel[hidden] { display: none; }
.vem-page-bulk-payslip .bulk-project-picker-search { width: 100%; margin-bottom: 8px; }
.vem-page-bulk-payslip .bulk-project-picker-actions { display: flex; gap: 6.5px; margin-bottom: 8px; }
.vem-page-bulk-payslip .bulk-project-list { display: flex; flex-direction: column; gap: 2px; max-height: 260px; overflow-y: auto; padding: 5px; margin-bottom: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel-soft, var(--panel)); }
.vem-page-bulk-payslip .bulk-project-option { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 5px 8px; border-radius: var(--radius-sm); cursor: pointer; color: var(--ink); font-size: 12px; }
.vem-page-bulk-payslip .bulk-project-option:hover { background: var(--brand-soft); }
.vem-page-bulk-payslip .bulk-project-option input { width: 16px; height: 16px; min-width: 16px; min-height: 16px; max-width: 16px; max-height: 16px; margin: 0; accent-color: var(--brand); flex: 0 0 auto; }
.vem-page-bulk-payslip .bulk-project-empty { margin: 3.5px; padding: 10px; color: var(--muted); font-size: 12px; text-align: center; }
.vem-page-bulk-payslip .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-md); }
.vem-page-bulk-payslip table { width: 100%; border-collapse: collapse; font-size: 12px; }
.vem-page-bulk-payslip th { text-align: left; padding: 10px; color: var(--ink); background: var(--panel-soft, var(--panel)); border-bottom: 1px solid var(--line); font-weight: 800; font-size: 12px; letter-spacing: 0.03em; text-transform: uppercase; }
.vem-page-bulk-payslip td { padding: 10px; border-bottom: 1px solid var(--line); color: var(--ink); }
.vem-page-bulk-payslip tr:last-child td { border-bottom: none; }
/* HR Document Templates + Generation
(hr_document_templates.php, hr_document_template_edit.php,
hr_document_generate.php) — same page-scoped geometry pattern as
bulk_payslip.php/payslip_template.php, tokens only. */
.vem-page-hr-documents .main-content { width: auto; max-width: none; min-height: 100vh; margin-left: 290px; padding: 26px 23px; overflow-x: hidden; box-sizing: border-box; }
@media (max-width: 1200px) {
.vem-page-hr-documents .main-content { margin-left: 72px; }
}
@media (max-width: 650px) {
.vem-page-hr-documents .main-content { margin-left: 0; padding: 13px 10px; }
}
.vem-page-hr-documents .top-bar { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; margin-bottom: 23px; flex-wrap: wrap; }
.vem-page-hr-documents .page-kicker { display: inline-flex; align-items: center; gap: 6.5px; margin: 0 0 5px; color: var(--brand); font-size: 12px; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase; }
.vem-page-hr-documents .page-title { margin: 0; color: var(--ink); font-size: 24.5px; line-height: 1.14; font-weight: 760; }
.vem-page-hr-documents .page-subtitle { max-width: 760px; margin: 6.5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; font-weight: 450; }
.vem-page-hr-documents .panel { position: relative; margin-bottom: 19.5px; padding: 19.5px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel-solid, var(--panel)); box-shadow: var(--shadow-sm); }
.vem-page-hr-documents .panel-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 16.5px; }
.vem-page-hr-documents .panel-header h2 { margin: 0; color: var(--ink); font-size: 16.5px; font-weight: 760; }
.vem-page-hr-documents .rate-meta { color: var(--muted); font-size: 12px; }
.vem-page-hr-documents .rate-meta a { color: var(--brand); text-decoration: underline; }
.vem-page-hr-documents .alert { margin-bottom: 15px; padding: 11.5px 15px; border-radius: var(--radius-md); font-size: 12px; font-weight: 650; border: 1px solid transparent; }
.vem-page-hr-documents .empty-state { padding: 13px 15px; margin-bottom: 13px; color: var(--muted); font-size: 12px; line-height: 1.6; border: 1px dashed var(--line); border-radius: var(--radius-md); }
.vem-page-hr-documents :is(input, select, textarea, .control) { min-height: 40px; padding: 6.5px 10px; border: 1px solid var(--line-strong, var(--line)); border-radius: var(--radius-md); background: var(--input-bg, var(--panel-solid)); color: var(--ink); font-family: inherit; font-size: 12px; box-sizing: border-box; }
.vem-page-hr-documents :is(input, select, textarea, .control):focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow, var(--brand-soft)); }
.vem-page-hr-documents textarea { width: 100%; resize: vertical; font-family: inherit; }
.vem-page-hr-documents label { display: block; margin-bottom: 5px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; }
.vem-page-hr-documents .hint { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; font-weight: 500; text-transform: none; letter-spacing: normal; }
.vem-page-hr-documents .btn { position: relative; display: inline-grid; place-items: center; min-height: 42px; padding: 7.5px 16.5px; border: 1px solid transparent; border-radius: var(--radius-md); cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 800; letter-spacing: 0.02em; transition: all var(--transition-fast); }
.vem-page-hr-documents .btn-small { min-height: 32px; padding: 4px 10px; font-size: 12px; }
.vem-page-hr-documents .btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.vem-page-hr-documents .btn-muted { background: var(--panel-hover, var(--panel-solid)); border-color: var(--line); color: var(--ink-light, var(--ink)); }
.vem-page-hr-documents .btn-danger { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); }
.vem-page-hr-documents .btn:active { transform: translateY(-1px) scale(0.98); }
.vem-page-hr-documents .actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 16.5px 0; }
.vem-page-hr-documents .row-actions { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.vem-page-hr-documents .inline-form { margin: 0; display: inline; }
.vem-page-hr-documents .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 13px; align-items: end; }
.vem-page-hr-documents .field { display: grid; gap: 5px; }
.vem-page-hr-documents .field-full { grid-column: 1 / -1; margin-bottom: 13px; }
.vem-page-hr-documents .filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 13px; align-items: end; margin: 0 0 19.5px; padding: 15px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel-soft, var(--panel)); }
.vem-page-hr-documents .filters > div { min-width: 0; }
.vem-page-hr-documents .filters .btn { width: 100%; }
@media (max-width: 700px) {
.vem-page-hr-documents .filters { grid-template-columns: 1fr; }
}
.vem-page-hr-documents .pager-row { display: flex; justify-content: center; margin-top: 13px; }
.vem-page-hr-documents .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-md); }
.vem-page-hr-documents table { width: 100%; border-collapse: collapse; font-size: 12px; }
.vem-page-hr-documents th { text-align: left; padding: 10px; color: var(--ink); background: var(--panel-soft, var(--panel)); border-bottom: 1px solid var(--line); font-weight: 800; font-size: 12px; letter-spacing: 0.03em; text-transform: uppercase; }
.vem-page-hr-documents td { padding: 10px; border-bottom: 1px solid var(--line); color: var(--ink); }
.vem-page-hr-documents tr:last-child td { border-bottom: none; }
.vem-page-hr-documents .status-badge { display: inline-block; padding: 3px 8px; border-radius: var(--radius-full, 999px); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.vem-page-hr-documents .status-active { background: var(--success-bg, rgba(34,197,94,0.12)); color: var(--success, #16a34a); }
.vem-page-hr-documents .status-inactive { background: var(--panel-hover, var(--panel-solid)); color: var(--muted); border: 1px solid var(--line); }
.vem-page-hr-documents .status-archived { background: rgba(185,28,28,0.1); color: var(--danger-text, #b91c1c); border: 1px solid rgba(185,28,28,0.25); }
/* Header row/column builder — same visual language as the payslip designer. */
.vem-page-hr-documents .hd-builder { display: grid; gap: 11.5px; }
.vem-page-hr-documents .hd-row-editor { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel-soft, var(--panel)); padding: 11.5px; }
.vem-page-hr-documents .hd-row-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 6.5px; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.vem-page-hr-documents .hd-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.vem-page-hr-documents .hd-column {
display: grid; gap: 6.5px; padding: 10px; border: 1px solid var(--line-strong, var(--line)); border-radius: var(--radius-sm);
background: var(--panel-solid, var(--panel)); box-shadow: var(--shadow-sm); min-width: 0;
}
.vem-page-hr-documents .hd-column > * { min-width: 0; width: 100%; box-sizing: border-box; }
@media (max-width: 700px) {
.vem-page-hr-documents .hd-columns { grid-template-columns: 1fr; }
}
/* Body field-insertion toolbar. */
.vem-page-hr-documents .hd-field-toolbar { display: flex; flex-wrap: wrap; gap: 6.5px; margin-bottom: 10px; }
/* Signature preview + checkbox. */
.vem-page-hr-documents .hd-signature-preview { margin-bottom: 8px; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel-soft, var(--panel)); display: inline-block; }
.vem-page-hr-documents .hd-signature-preview img { max-height: 60px; display: block; }
.vem-page-hr-documents .hd-checkbox-label { display: flex; align-items: center; gap: 6.5px; margin: 6.5px 0; text-transform: none; letter-spacing: normal; font-weight: 500; color: var(--ink); font-size: 12px; }
.vem-page-hr-documents .hd-checkbox-label input { min-height: auto; width: auto; }
/* Generated-document list on the generation page. */
.vem-page-hr-documents .hd-document-list { display: grid; gap: 8px; margin-top: 16.5px; }
.vem-page-hr-documents .hd-document-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 10px 11.5px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel-soft, var(--panel)); }
.vem-page-hr-documents .hd-document-row .rate-meta { display: block; margin-top: 2px; }
.vem-page-hr-documents .hd-document-actions { display: flex; gap: 6.5px; }
.vem-page-hr-documents .hd-inline-email { margin: 0; display: inline; }
/* Modal (New Template) — same proven pattern as manage_users.php. */
.vem-page-hr-documents .modal-overlay { position: fixed; inset: 0; z-index: 1000; display: none; place-items: center; padding: 16.5px; }
.vem-page-hr-documents .modal-overlay.active { display: grid; }
.vem-page-hr-documents .modal { width: min(480px, 100%); max-height: calc(100vh - 40px); overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel-solid, var(--panel)); box-shadow: 0 30px 70px rgba(0,0,0,0.35), 0 10px 24px rgba(0,0,0,0.25); }
.vem-page-hr-documents .modal-header, .vem-page-hr-documents .modal-footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 15px 18px; }
.vem-page-hr-documents .modal-header { border-bottom: 1px solid var(--line); }
.vem-page-hr-documents .modal-footer { justify-content: flex-end; border-top: 1px solid var(--line); }
.vem-page-hr-documents .modal-header h3 { margin: 0; font-size: 15px; font-weight: 760; color: var(--ink); }
.vem-page-hr-documents .modal-close { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 19.5px; line-height: 1; }
.vem-page-hr-documents .modal-body { padding: 18px; display: grid; gap: 13px; }
/* My Payslip (User self-service: pay structure summary + payslip search). */
.vem-page-my-payslip .main-content { width: auto; max-width: none; min-height: 100vh; margin-left: 290px; padding: 26px 23px; overflow-x: hidden; box-sizing: border-box; }
@media (max-width: 1200px) {
.vem-page-my-payslip .main-content { margin-left: 72px; }
}
@media (max-width: 650px) {
.vem-page-my-payslip .main-content { margin-left: 0; padding: 13px 10px; }
}
.vem-page-my-payslip .top-bar { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; margin-bottom: 23px; flex-wrap: wrap; }
.vem-page-my-payslip .page-kicker { display: inline-flex; align-items: center; gap: 6.5px; margin: 0 0 5px; color: var(--brand); font-size: 12px; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase; }
.vem-page-my-payslip .page-title { margin: 0; color: var(--ink); font-size: 24.5px; line-height: 1.14; font-weight: 760; }
.vem-page-my-payslip .page-subtitle { max-width: 760px; margin: 6.5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; font-weight: 450; }
.vem-page-my-payslip .panel { position: relative; margin-bottom: 19.5px; padding: 19.5px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel-solid, var(--panel)); box-shadow: var(--shadow-sm); }
.vem-page-my-payslip .panel-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 16.5px; }
.vem-page-my-payslip .panel-header h2 { margin: 0; color: var(--ink); font-size: 16.5px; font-weight: 760; }
.vem-page-my-payslip .rate-meta { color: var(--muted); font-size: 12px; }
.vem-page-my-payslip .alert { margin-bottom: 15px; padding: 11.5px 15px; border-radius: var(--radius-md); font-size: 12px; font-weight: 650; border: 1px solid transparent; }
.vem-page-my-payslip .empty-state { padding: 13px 15px; margin-bottom: 13px; color: var(--muted); font-size: 12px; line-height: 1.6; border: 1px dashed var(--line); border-radius: var(--radius-md); }
.vem-page-my-payslip :is(input, select, textarea, .control) { min-height: 40px; padding: 6.5px 10px; border: 1px solid var(--line-strong, var(--line)); border-radius: var(--radius-md); background: var(--input-bg, var(--panel-solid)); color: var(--ink); font-family: inherit; font-size: 12px; box-sizing: border-box; }
.vem-page-my-payslip :is(input, select, textarea, .control):focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow, var(--brand-soft)); }
.vem-page-my-payslip label { display: block; margin-bottom: 5px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; }
.vem-page-my-payslip .btn { position: relative; display: inline-grid; place-items: center; min-height: 42px; padding: 7.5px 16.5px; border: 1px solid transparent; border-radius: var(--radius-md); cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 800; letter-spacing: 0.02em; transition: all var(--transition-fast); }
.vem-page-my-payslip .btn-small { min-height: 32px; padding: 4px 10px; font-size: 12px; }
.vem-page-my-payslip .btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.vem-page-my-payslip .btn:active { transform: translateY(-1px) scale(0.98); }
.vem-page-my-payslip .filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 13px; align-items: end; margin: 0 0 19.5px; padding: 15px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel-soft, var(--panel)); }
.vem-page-my-payslip .filters > div { min-width: 0; }
.vem-page-my-payslip .filters .btn { width: 100%; }
@media (max-width: 700px) {
.vem-page-my-payslip .filters { grid-template-columns: 1fr; }
}
.vem-page-my-payslip .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-md); }
.vem-page-my-payslip table { width: 100%; border-collapse: collapse; font-size: 12px; }
.vem-page-my-payslip th { text-align: left; padding: 10px; color: var(--ink); background: var(--panel-soft, var(--panel)); border-bottom: 1px solid var(--line); font-weight: 800; font-size: 12px; letter-spacing: 0.03em; text-transform: uppercase; }
.vem-page-my-payslip td { padding: 10px; border-bottom: 1px solid var(--line); color: var(--ink); }
.vem-page-my-payslip tr:last-child td { border-bottom: none; }
.vem-page-my-payslip .hd-document-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 10px 11.5px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel-soft, var(--panel)); }
.vem-page-my-payslip .hd-document-row .rate-meta { display: block; margin-top: 2px; }
.vem-page-my-payslip .hd-document-actions { display: flex; gap: 6.5px; }
.vem-page-my-payslip .hint { display: block; margin-top: 8px; color: var(--muted); font-size: 11px; font-weight: 500; text-transform: none; letter-spacing: normal; }
.vem-page-my-payslip .structure-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 13px; }
.vem-page-my-payslip .structure-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 13px; margin-top: 13px; padding: 13px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel-soft, var(--panel)); }
.vem-page-my-payslip .structure-totals > div { display: grid; gap: 3.5px; }
.vem-page-my-payslip .structure-totals strong { font-size: 13px; color: var(--ink); }
/*
* Top nav (components/top_nav.php) — Pass 1 pilot replacement for the left
* sidebar on a couple of pages. Global, not page-scoped, and theme-aware
* (uses the same --brand/--ink/--line tokens as the rest of the app) so it
* doesn't need a per-page CSS block the way sidebar-era pages did.
*/
.vem-topnav {
position: sticky; top: 16px; z-index: 200;
margin: 16px 24px 0;
background: var(--panel-solid, #fff);
border: 1px solid var(--line, rgba(85, 111, 145, 0.14));
border-radius: 20px;
box-shadow: 0 20px 45px rgba(16, 24, 40, 0.12), 0 4px 14px rgba(16, 24, 40, 0.08);
}
.vem-topnav-inner {
display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px;
max-width: 1600px; margin: 0 auto;
padding: 12px 28px;
}
.vem-topnav-brand { justify-self: start; display: flex; align-items: center; }
.vem-topnav-logo-img { height: 34px; width: auto; display: block; }
.vem-topnav-logo-text { font-size: 16px; font-weight: 800; color: var(--brand, #1f6feb); letter-spacing: 0.01em; }
.vem-topnav-items { justify-self: center; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.vem-topnav-right { justify-self: end; display: flex; align-items: center; gap: 10px; }
.vem-topnav-item {
display: inline-flex; align-items: center; gap: 6px;
padding: 9px 14px; border: 1px solid transparent; border-radius: var(--radius-md, 10px);
background: transparent; color: var(--ink, #172334);
font-size: 14px; font-weight: 700; text-decoration: none; cursor: pointer;
transition: background 150ms ease, color 150ms ease;
}
.vem-topnav-item:hover { background: var(--panel-soft, rgba(85, 111, 145, 0.08)); }
.vem-topnav-item.active { color: var(--brand, #1f6feb); background: var(--brand-soft, rgba(31, 111, 235, 0.1)); }
.vem-topnav-chevron { transition: transform 150ms ease; }
.vem-topnav-dropdown-container { position: relative; }
.vem-topnav-dropdown-container.open .vem-topnav-chevron { transform: rotate(180deg); }
.vem-topnav-dropdown-container.open .vem-topnav-toggle { background: var(--panel-soft, rgba(85, 111, 145, 0.08)); }
.vem-topnav-badge {
display: inline-flex; align-items: center; justify-content: center;
min-width: 18px; height: 18px; padding: 0 5px;
border-radius: var(--radius-full, 999px);
background: var(--danger, #d92d20); color: #fff;
font-size: 11px; font-weight: 800; line-height: 1;
}
.vem-topnav-menu {
display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 210;
min-width: 240px; padding: 8px;
border: 1px solid var(--line, rgba(85, 111, 145, 0.14)); border-radius: var(--radius-lg, 14px);
background: var(--panel-solid, #fff);
box-shadow: 0 20px 45px rgba(16, 24, 40, 0.16), 0 4px 12px rgba(16, 24, 40, 0.08);
}
.vem-topnav-dropdown-container.open .vem-topnav-menu { display: block; }
.vem-topnav-menu-item {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 9px 12px; border-radius: var(--radius-sm, 8px);
color: var(--ink, #172334); font-size: 13px; font-weight: 600; text-decoration: none;
transition: background 120ms ease, color 120ms ease, transform 120ms ease;
}
.vem-topnav-menu-item:hover,
.vem-topnav-menu-item:focus-visible {
background: var(--brand-soft, rgba(31, 111, 235, 0.12));
color: var(--brand, #1f6feb);
transform: translateX(2px);
}
.vem-topnav-menu-item.active { color: var(--brand, #1f6feb); background: var(--brand-soft, rgba(31, 111, 235, 0.1)); }
@media (max-width: 900px) {
.vem-topnav { margin: 10px 12px 0; border-radius: 16px; top: 10px; }
.vem-topnav-inner { grid-template-columns: 1fr auto; grid-template-areas: "brand right" "items items"; padding: 12px 16px; gap: 10px; }
.vem-topnav-brand { grid-area: brand; }
.vem-topnav-right { grid-area: right; }
.vem-topnav-items { grid-area: items; justify-self: stretch; justify-content: center; gap: 2px; }
.vem-topnav-item { padding: 8px 10px; font-size: 13px; }
}
/* Pilot pages opt in via an extra body class — the sidebar-era margin-left
rules are scattered per-page (found during the earlier CSS audit), so
this uses !important to reliably override all of them without having to
track down and edit every scattered rule individually. Covers both
.main-content (most pages) and plain .main (approve_expenses.php /
approved_expenses.php use this older naming — missing it here is why
they still had their sidebar-era margin-left and rendered shifted
right). */
body.vem-topnav-active :is(.main-content, .main) { margin-left: 0 !important; }
@media (max-width: 1200px) {
body.vem-topnav-active :is(.main-content, .main) { margin-left: 0 !important; }
}
/* Several legacy pages use a "height: 100vh; overflow: hidden" app-shell
pattern on .app, paired with its own "height: 100vh; overflow-y: auto"
on .main-content — a self-contained scroll region that assumed .app
started at the very top of the viewport (true when the fixed-position
sidebar was the only other element). Now the header sits above .app in
normal flow and takes up real vertical space, so .app's 100vh made it
taller than the room actually left, producing two independent vertical
scrollbars (body's own, plus .main-content's). Freeing the height lets
the body be the single scroll container again, like every page that
never had this pattern. overflow-x is left untouched — several pages
rely on it for wide tables scrolling within their own bounds.
Most of these pages already have "overflow-y: auto" on itself
(later in the same declaration, overriding an earlier "overflow: hidden"
in that same rule), so body already worked as the scroll container once
.app/.main-content stopped competing with it. project_assignments.php
is the one exception — its body rule is just "height:100vh;overflow:
hidden" with nothing overriding the Y axis, so freeing the inner
containers alone left no scroll mechanism at all (the reported "scrollbar
vanished completely"). Covering here too, for that page and as a
safety net for any future page with the same gap. */
body.vem-topnav-active {
height: auto !important;
overflow: visible !important;
}
body.vem-topnav-active .app {
height: auto !important;
overflow: visible !important;
}
body.vem-topnav-active .main-content {
height: auto !important;
overflow-y: visible !important;
}
/* Profile card dropdown (components/user_profile_card.php) — Profile /
Sign Out. Global, not page-scoped, since the component is included on
every authenticated page regardless of that page's own local CSS. */
.vem-profile-dropdown { position: relative; }
/* Inside the top nav specifically, strip the bordered/shadowed "card" look
(min-height: 62px was the header's height driver) down to a plain
icon + name/role trigger — the surrounding .user-profile[data-profile-
mode="unified"] rules are shared with the old sidebar-page headers
(still !important-heavy there), so this override is scoped to the top
nav only rather than changed globally. */
.vem-topnav-right .user-profile[data-profile-mode="unified"] {
min-height: auto !important;
min-width: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
border-radius: var(--radius-md, 10px) !important;
}
.vem-topnav-right .user-profile[data-profile-mode="unified"] .user-profile__inner {
padding: 6px 8px 6px 6px !important;
gap: 10px !important;
}
.vem-topnav-right .user-profile[data-profile-mode="unified"]:hover,
.vem-topnav-right .user-profile[data-profile-mode="unified"]:focus-visible {
background: var(--panel-soft, rgba(85, 111, 145, 0.08)) !important;
transform: none !important;
}
.vem-topnav-right .vem-profile-dropdown.open .user-profile[data-profile-mode="unified"] {
background: var(--panel-soft, rgba(85, 111, 145, 0.08)) !important;
}
.vem-profile-chevron { flex: 0 0 auto; margin-left: 4px; transition: transform 150ms ease; color: var(--vem-text-muted, var(--muted)); }
.vem-profile-dropdown.open .vem-profile-chevron { transform: rotate(180deg); }
.vem-profile-menu {
display: none; position: absolute; top: calc(100% + 8px); right: 0; z-index: 210;
min-width: 200px; padding: 8px;
border: 1px solid var(--line, rgba(85, 111, 145, 0.14)); border-radius: var(--radius-lg, 14px);
background: var(--panel-solid, #fff);
box-shadow: 0 20px 45px rgba(16, 24, 40, 0.16), 0 4px 12px rgba(16, 24, 40, 0.08);
}
.vem-profile-dropdown.open .vem-profile-menu { display: block; }
.vem-profile-menu-form { margin: 0; }
.vem-profile-menu-item {
display: block; width: 100%; box-sizing: border-box;
padding: 10px 12px; border: 0; border-radius: var(--radius-sm, 8px);
background: transparent; color: var(--ink, #172334);
font: inherit; font-size: 13px; font-weight: 600; text-align: left; text-decoration: none;
cursor: pointer;
transition: background 120ms ease, color 120ms ease, transform 120ms ease;
}
.vem-profile-menu-item:hover,
.vem-profile-menu-item:focus-visible {
background: var(--brand-soft, rgba(31, 111, 235, 0.12));
color: var(--brand, #1f6feb);
transform: translateX(2px);
}
/* Employee Exit Management + Submit Exit — same component vocabulary as
Hiring Management (round-block, field-grid-readonly, status-badge) plus
Bulk Payslip's :is(input, select, textarea, .control) input styling,
both proven patterns from this session. */
:is(.vem-page-employee-exit-management, .vem-page-submit-exit, .vem-page-company-audit-log) .main-content {
width: auto; max-width: none; min-height: 100vh; margin-left: 290px; padding: 26px 23px; overflow-x: hidden; box-sizing: border-box;
}
@media (max-width: 1100px) {
:is(.vem-page-employee-exit-management, .vem-page-submit-exit, .vem-page-company-audit-log) .main-content { margin-left: 72px; }
}
@media (max-width: 720px) {
:is(.vem-page-employee-exit-management, .vem-page-submit-exit, .vem-page-company-audit-log) .main-content { margin-left: 0; padding: 13px 10px; }
}
:is(.vem-page-employee-exit-management, .vem-page-submit-exit, .vem-page-company-audit-log) .top-bar { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; margin-bottom: 23px; flex-wrap: wrap; }
:is(.vem-page-employee-exit-management, .vem-page-submit-exit, .vem-page-company-audit-log) .page-title { margin: 0; color: var(--ink); font-size: 24.5px; line-height: 1.14; font-weight: 760; }
:is(.vem-page-employee-exit-management, .vem-page-submit-exit, .vem-page-company-audit-log) .page-subtitle { max-width: 760px; margin: 6.5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
:is(.vem-page-employee-exit-management, .vem-page-submit-exit, .vem-page-company-audit-log) .panel { position: relative; margin-bottom: 19.5px; padding: 19.5px; border: 1px solid var(--line); border-radius: var(--radius-lg, 11.5px); background: var(--panel-solid, var(--panel)); box-shadow: var(--shadow-sm); }
:is(.vem-page-employee-exit-management, .vem-page-submit-exit, .vem-page-company-audit-log) .panel-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 16.5px; }
:is(.vem-page-employee-exit-management, .vem-page-submit-exit, .vem-page-company-audit-log) .panel-header h2 { margin: 0; color: var(--ink); font-size: 16.5px; font-weight: 760; }
:is(.vem-page-employee-exit-management, .vem-page-submit-exit, .vem-page-company-audit-log) .alert { margin-bottom: 15px; padding: 11.5px 15px; border-radius: var(--radius-md, 8px); font-size: 12px; font-weight: 650; border: 1px solid transparent; }
:is(.vem-page-employee-exit-management, .vem-page-submit-exit, .vem-page-company-audit-log) .alert-error { background: var(--danger-bg, rgba(185,28,28,0.08)); color: var(--danger-text, #b91c1c); border-color: rgba(185,28,28,0.25); }
:is(.vem-page-employee-exit-management, .vem-page-submit-exit, .vem-page-company-audit-log) .alert-success { background: var(--success-bg, rgba(22,132,91,0.08)); color: var(--success-text, #16845b); border-color: rgba(22,132,91,0.25); }
:is(.vem-page-employee-exit-management, .vem-page-submit-exit, .vem-page-company-audit-log) .empty-state { padding: 13px 15px; margin-bottom: 13px; color: var(--muted); font-size: 12px; line-height: 1.6; border: 1px dashed var(--line); border-radius: var(--radius-md, 8px); }
:is(.vem-page-employee-exit-management, .vem-page-submit-exit, .vem-page-company-audit-log) .hint { font-size: 12px; color: var(--muted); margin-top: 5px; line-height: 1.5; }
:is(.vem-page-employee-exit-management, .vem-page-submit-exit, .vem-page-company-audit-log) :is(input, select, textarea, .control) { min-height: 40px; padding: 6.5px 10px; border: 1px solid var(--line-strong, var(--line)); border-radius: var(--radius-md, 6.5px); background: var(--input-bg, var(--panel-solid)); color: var(--ink); font-family: inherit; font-size: 12px; box-sizing: border-box; }
:is(.vem-page-employee-exit-management, .vem-page-submit-exit, .vem-page-company-audit-log) :is(input, select, textarea, .control):focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow, var(--brand-soft)); }
:is(.vem-page-employee-exit-management, .vem-page-submit-exit, .vem-page-company-audit-log) textarea { width: 100%; max-width: 640px; min-height: 110px; resize: vertical; }
:is(.vem-page-employee-exit-management, .vem-page-submit-exit, .vem-page-company-audit-log) .field { display: grid; gap: 5px; margin-bottom: 13px; }
:is(.vem-page-employee-exit-management, .vem-page-submit-exit, .vem-page-company-audit-log) .field label { color: var(--muted); font-size: 12px; font-weight: 700; }
:is(.vem-page-employee-exit-management, .vem-page-submit-exit, .vem-page-company-audit-log) .field-full { grid-column: 1 / -1; margin: 0 0 18px; padding-top: 15px; border-top: 1px solid var(--line); }
:is(.vem-page-employee-exit-management, .vem-page-submit-exit, .vem-page-company-audit-log) .field-full:first-child { padding-top: 0; border-top: none; }
:is(.vem-page-employee-exit-management, .vem-page-submit-exit, .vem-page-company-audit-log) .field-full label { display: block; color: var(--muted); font-size: 12px; font-weight: 700; margin-bottom: 6.5px; }
:is(.vem-page-employee-exit-management, .vem-page-submit-exit, .vem-page-company-audit-log) .field-grid-readonly { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 260px)); gap: 18px 39.5px; margin-bottom: 18px; }
:is(.vem-page-employee-exit-management, .vem-page-submit-exit, .vem-page-company-audit-log) .field-grid-readonly label { display: block; color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 5px; }
:is(.vem-page-employee-exit-management, .vem-page-submit-exit, .vem-page-company-audit-log) .field-grid-readonly > div { font-size: 12px; font-weight: 650; }
:is(.vem-page-employee-exit-management, .vem-page-submit-exit, .vem-page-company-audit-log) .inline-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; }
:is(.vem-page-employee-exit-management, .vem-page-submit-exit, .vem-page-company-audit-log) .actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 3.5px; }
:is(.vem-page-employee-exit-management, .vem-page-submit-exit, .vem-page-company-audit-log) .row-actions { display: flex; gap: 6.5px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
:is(.vem-page-employee-exit-management, .vem-page-submit-exit, .vem-page-company-audit-log) .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-md, 8px); }
:is(.vem-page-employee-exit-management, .vem-page-submit-exit, .vem-page-company-audit-log) .user-table { width: 100%; border-collapse: collapse; font-size: 12px; }
:is(.vem-page-employee-exit-management, .vem-page-submit-exit, .vem-page-company-audit-log) .user-table th { text-align: left; padding: 10px 11.5px; color: var(--ink); background: var(--panel-soft, var(--panel)); border-bottom: 1px solid var(--line); font-weight: 800; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; }
:is(.vem-page-employee-exit-management, .vem-page-submit-exit, .vem-page-company-audit-log) .user-table td { padding: 10px 11.5px; border-bottom: 1px solid var(--line); color: var(--ink); vertical-align: middle; }
:is(.vem-page-employee-exit-management, .vem-page-submit-exit, .vem-page-company-audit-log) .user-table tr:last-child td { border-bottom: none; }
:is(.vem-page-employee-exit-management, .vem-page-submit-exit, .vem-page-company-audit-log) .round-block { margin-bottom: 15px; padding: 16.5px 18px; border: 1px solid var(--line); border-radius: var(--radius-md, 10px); background: var(--panel-soft, rgba(85,111,145,0.05)); }
:is(.vem-page-employee-exit-management, .vem-page-submit-exit, .vem-page-company-audit-log) .round-block:last-child { margin-bottom: 0; }
:is(.vem-page-employee-exit-management, .vem-page-submit-exit, .vem-page-company-audit-log) .round-block-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
:is(.vem-page-employee-exit-management, .vem-page-submit-exit, .vem-page-company-audit-log) .round-block-header strong { font-size: 12.5px; }
:is(.vem-page-employee-exit-management, .vem-page-submit-exit, .vem-page-company-audit-log) .round-block > .hint { margin-bottom: 11.5px; }
:is(.vem-page-employee-exit-management, .vem-page-submit-exit, .vem-page-company-audit-log) .round-block .empty-state { margin-bottom: 0; }
:is(.vem-page-employee-exit-management, .vem-page-submit-exit, .vem-page-company-audit-log) .round-block .inline-form { margin-top: 3.5px; }
:is(.vem-page-employee-exit-management, .vem-page-submit-exit, .vem-page-company-audit-log) .round-block .row-actions { margin-top: 3.5px; }
:is(.vem-page-employee-exit-management, .vem-page-submit-exit, .vem-page-company-audit-log) .status-badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: 0.02em; border: 1px solid transparent; white-space: nowrap; }
:is(.vem-page-employee-exit-management, .vem-page-submit-exit, .vem-page-company-audit-log) .status-active { background: linear-gradient(135deg, rgba(22,132,91,0.12), rgba(22,132,91,0.06)); color: var(--success-text, #16845b); border-color: rgba(22,132,91,0.28); }
:is(.vem-page-employee-exit-management, .vem-page-submit-exit, .vem-page-company-audit-log) .status-inactive { background: linear-gradient(135deg, rgba(100,116,139,0.14), rgba(100,116,139,0.06)); color: #475569; border-color: rgba(100,116,139,0.28); }
:is(.vem-page-employee-exit-management, .vem-page-submit-exit, .vem-page-company-audit-log) .status-archived { background: rgba(100,116,139,0.16); color: #475569; border-color: rgba(100,116,139,0.32); }
:is(.vem-page-employee-exit-management, .vem-page-submit-exit, .vem-page-company-audit-log) .btn { position: relative; display: inline-grid; place-items: center; min-height: 42px; padding: 7.5px 16.5px; border: 1px solid transparent; border-radius: var(--radius-md, 8px); cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 800; letter-spacing: 0.02em; transition: all var(--transition-fast, 150ms ease); }
:is(.vem-page-employee-exit-management, .vem-page-submit-exit, .vem-page-company-audit-log) .btn:active { transform: translateY(1px); }
:is(.vem-page-employee-exit-management, .vem-page-submit-exit, .vem-page-company-audit-log) .btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
:is(.vem-page-employee-exit-management, .vem-page-submit-exit, .vem-page-company-audit-log) .btn-primary:hover { filter: brightness(1.08); }
:is(.vem-page-employee-exit-management, .vem-page-submit-exit, .vem-page-company-audit-log) .btn-muted { background: var(--panel-hover, var(--panel-solid, #fff)); border-color: var(--line-strong, var(--line)); color: var(--ink); }
:is(.vem-page-employee-exit-management, .vem-page-submit-exit, .vem-page-company-audit-log) .btn-muted:hover { background: var(--panel-soft, rgba(85,111,145,0.08)); }
:is(.vem-page-employee-exit-management, .vem-page-submit-exit, .vem-page-company-audit-log) .btn-edit { background: var(--brand-soft, rgba(31,111,235,0.1)); border-color: rgba(31,111,235,0.28); color: var(--brand, #1f6feb); }
:is(.vem-page-employee-exit-management, .vem-page-submit-exit, .vem-page-company-audit-log) .btn-edit:hover { filter: brightness(1.05); }
:is(.vem-page-employee-exit-management, .vem-page-submit-exit, .vem-page-company-audit-log) .btn-delete { background: rgba(185,28,28,0.08); border-color: rgba(185,28,28,0.28); color: var(--danger-text, #b91c1c); }
:is(.vem-page-employee-exit-management, .vem-page-submit-exit, .vem-page-company-audit-log) .btn-delete:hover { filter: brightness(1.05); }
/* company_audit_log.php only — the filter form, count label, and pager
this page adds on top of the shared panel/table/field/btn styling above. */
.vem-page-company-audit-log .form-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; align-items: end; }
@media (max-width: 900px) {
.vem-page-company-audit-log .form-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
.vem-page-company-audit-log .form-grid { grid-template-columns: 1fr; }
}
.vem-page-company-audit-log .field-actions { display: flex; gap: 8px; align-items: center; margin-bottom: 13px; }
.vem-page-company-audit-log .rate-meta { color: var(--muted); font-size: 12px; font-weight: 700; }
.vem-page-company-audit-log .pagination-nav { display: flex; align-items: center; gap: 11.5px; margin-top: 15px; }
/* ============================================================
SHARED PAGINATION COMPONENT — genuinely global, not scoped to
any body.vem-page-* class, and self-contained (every token
reference has a literal fallback) so it renders correctly on
any page, under any theme, with zero additional page-specific
CSS needed. Built once so every future filter bar + pager is
this, not a fresh page-scoped copy-paste of the same rules —
see config/pagination.php (Enterprise\Data\Paginator) for the
PHP half of this pair.
.vem-pagination-bar — the search/filter form
.vem-pagination-btn — a self-contained button (--primary / --muted
modifiers), for use inside the bar or nav
.vem-pagination-nav — the Prev/Next + "Page X of Y" or "N results" row
============================================================ */
.vem-pagination-bar {
display: flex;
flex-wrap: wrap;
align-items: end;
gap: 14px;
margin-bottom: 18px;
padding: 16px 18px;
border: 1px solid var(--line, #C9D1D6);
border-radius: var(--radius-md, 10px);
background: var(--panel-soft, rgba(85, 111, 145, 0.05));
}
.vem-pagination-bar > div { display: grid; gap: 6px; min-width: 160px; }
.vem-pagination-bar label {
color: var(--muted, #5B6572);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.vem-pagination-bar input[type="text"],
.vem-pagination-bar input[type="date"],
.vem-pagination-bar input[type="search"],
.vem-pagination-bar input[type="number"],
.vem-pagination-bar select {
width: 100%;
box-sizing: border-box;
min-height: 40px;
padding: 9px 12px;
border: 1px solid var(--line, #C9D1D6);
border-radius: var(--radius-md, 8px);
background: var(--panel, #fff);
color: var(--ink, #13181D);
font: inherit;
font-size: 13px;
}
.vem-pagination-bar input:focus,
.vem-pagination-bar select:focus {
outline: none;
border-color: var(--brand, #0F7C86);
box-shadow: 0 0 0 3px var(--brand-glow, rgba(15, 124, 134, 0.18));
}
.vem-pagination-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 40px;
padding: 9px 18px;
border: 1px solid transparent;
border-radius: var(--radius-md, 8px);
cursor: pointer;
font-family: inherit;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.01em;
text-decoration: none;
white-space: nowrap;
transition: filter 150ms ease, transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}
.vem-pagination-btn:active { transform: translateY(1px); }
.vem-pagination-btn--primary {
background: var(--brand, #0F7C86);
border-color: var(--brand, #0F7C86);
color: #fff;
}
.vem-pagination-btn--primary:hover:not(:disabled):not([aria-disabled="true"]) {
filter: brightness(1.08);
transform: translateY(-1px);
box-shadow: 0 6px 14px color-mix(in srgb, var(--brand, #0F7C86) 35%, transparent);
}
.vem-pagination-btn--muted {
background: var(--panel, #fff);
border-color: var(--line, #C9D1D6);
color: var(--ink, #13181D);
}
.vem-pagination-btn--muted:hover:not(:disabled):not([aria-disabled="true"]) {
background: var(--panel-soft, rgba(85, 111, 145, 0.06));
transform: translateY(-1px);
}
.vem-pagination-btn:disabled,
.vem-pagination-btn[aria-disabled="true"] {
opacity: 0.45;
pointer-events: none;
}
.vem-pagination-nav {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin-top: 18px;
flex-wrap: wrap;
}
.vem-pagination-nav .vem-pagination-info {
color: var(--muted, #5B6572);
font-size: 12.5px;
font-weight: 600;
}
/* ---------------------------------------------------------------------
Shared bulk-selection component — checkbox rows + a sticky action bar,
built once so every approval queue (timesheets, expenses, leave, and
any future one) selects and bulk-acts the same way instead of each
page hand-rolling its own. See assets/js/vem-bulk-actions.js for the
behavior this markup drives.
.vem-bulk-check — the per-row selection checkbox
.vem-bulk-form — the (usually visually hidden) form the bar and
every row's checkbox submit into via form=""
.vem-bulk-bar — the sticky selection/action bar itself
.vem-bulk-bar--active — applied by JS once selection count > 0
.vem-bulk-selectall — the "select all on this page" control
.vem-bulk-remarks — the expandable shared-reason textarea wrapper
.vem-pagination-btn--danger — reuses the existing button primitive
------------------------------------------------------------------------ */
.vem-bulk-check {
width: 18px;
height: 18px;
accent-color: var(--brand, #0F7C86);
cursor: pointer;
flex: 0 0 auto;
}
.vem-bulk-bar {
position: sticky;
bottom: 12px;
z-index: 20;
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
margin: 16px 0;
padding: 12px 16px;
background: var(--panel, #fff);
border: 1px solid var(--line, #C9D1D6);
border-radius: var(--radius-md, 14px);
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10);
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.vem-bulk-bar--active {
border-color: var(--brand, #0F7C86);
box-shadow: 0 0 0 3px var(--brand-glow, rgba(15, 124, 134, 0.18)), 0 8px 24px rgba(15, 23, 42, 0.10);
}
.vem-bulk-selectall {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 600;
color: var(--ink, #13181D);
cursor: pointer;
user-select: none;
}
.vem-bulk-bar__count {
font-size: 13px;
font-weight: 700;
color: var(--muted, #5B6572);
white-space: nowrap;
}
.vem-bulk-bar__spacer {
flex: 1 1 auto;
}
.vem-pagination-btn--danger {
background: var(--danger, #B3261E);
border-color: var(--danger, #B3261E);
color: #fff;
}
.vem-pagination-btn--danger:hover { filter: brightness(1.08); }
.vem-bulk-remarks {
flex-basis: 100%;
display: grid;
gap: 6px;
padding-top: 10px;
border-top: 1px dashed var(--line, #C9D1D6);
}
.vem-bulk-remarks[hidden] { display: none; }
.vem-bulk-remarks label {
font-size: 12px;
font-weight: 700;
color: var(--muted, #5B6572);
text-transform: uppercase;
letter-spacing: 0.02em;
}
.vem-bulk-remarks textarea {
width: 100%;
min-height: 72px;
padding: 10px 12px;
border: 1px solid var(--line, #C9D1D6);
border-radius: var(--radius-md, 14px);
background: var(--panel, #fff);
color: var(--ink, #13181D);
font: inherit;
resize: vertical;
}
.vem-bulk-remarks textarea:focus {
outline: none;
border-color: var(--brand, #0F7C86);
box-shadow: 0 0 0 3px var(--brand-glow, rgba(15, 124, 134, 0.18));
}
@media (max-width: 560px) {
.vem-bulk-bar {
flex-direction: column;
align-items: stretch;
}
.vem-bulk-bar__spacer { display: none; }
.vem-bulk-bar .vem-pagination-btn {
width: 100%;
text-align: center;
}
}
@media (prefers-reduced-motion: reduce) {
.vem-bulk-bar { transition: none; }
}
/* Employee profile page (employee_profile.php) */
.vem-page-employee-profile .employee-profile-header {
display: flex;
align-items: flex-start;
gap: 20px;
padding-bottom: 20px;
margin-bottom: 18px;
border-bottom: 1px solid var(--line, #e2e8f0);
}
/* Sized as a photo card placeholder (a real photo-upload feature is a
separate piece of work) — no initials-in-a-colored-box treatment yet,
just room reserved so that feature can drop in later without another
layout change. */
.vem-page-employee-profile .employee-profile-avatar {
display: grid;
place-items: center;
width: 108px;
height: 108px;
flex-shrink: 0;
border: 1.5px solid var(--line, #e2e8f0);
border-radius: 18px;
background: transparent;
color: var(--muted, #64748b);
}
.vem-page-employee-profile .employee-profile-avatar svg {
width: 48px;
height: 48px;
}
.vem-page-employee-profile .employee-profile-identity {
padding-top: 4px;
}
.vem-page-employee-profile .employee-profile-identity h2 {
margin: 0 0 7px;
font-size: 18px;
}
.vem-page-employee-profile .employee-profile-meta {
display: flex;
align-items: center;
gap: 6.5px;
flex-wrap: wrap;
margin-bottom: 14px;
}
.vem-page-employee-profile .employee-profile-jobtitle {
color: var(--muted, #64748b);
font-size: 12px;
}
.vem-page-employee-profile .employee-profile-quickfacts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 10px 24px;
max-width: 720px;
}
.vem-page-employee-profile .employee-profile-quickfacts label {
display: block;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--muted, #64748b);
margin-bottom: 3px;
}
.vem-page-employee-profile .employee-profile-quickfacts > div {
font-size: 13px;
font-weight: 600;
overflow-wrap: anywhere;
}
.vem-page-employee-profile .role-badge {
display: inline-block;
padding: 3px 8px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
background: rgba(15, 124, 134, 0.1);
color: var(--brand, #0F7C86);
border: 1px solid rgba(15, 124, 134, 0.25);
}
.vem-page-employee-profile .status-active { background: linear-gradient(135deg, rgba(22,132,91,0.12), rgba(22,132,91,0.06)); color: var(--success-text, #16845b); border-color: rgba(22,132,91,0.28); }
.vem-page-employee-profile .status-inactive { background: linear-gradient(135deg, rgba(100,116,139,0.14), rgba(100,116,139,0.06)); color: #475569; border-color: rgba(100,116,139,0.28); }
.vem-page-employee-profile .status-archived { background: rgba(100,116,139,0.16); color: #475569; border-color: rgba(100,116,139,0.32); }
.vem-page-employee-profile .status-draft { background: rgba(100,116,139,0.14); color: #475569; border-color: rgba(100,116,139,0.28); }
.vem-page-employee-profile .status-submitted { border-color: #a9c7ef; background: #e8f1ff; color: #175fc9; }
.vem-page-employee-profile .status-completed { background: linear-gradient(135deg, rgba(22,132,91,0.12), rgba(22,132,91,0.06)); color: var(--success-text, #16845b); border-color: rgba(22,132,91,0.28); }
.vem-page-employee-profile .dashboard-section-nav {
display: flex;
align-items: center;
gap: 6px;
margin: 0 0 16px;
padding: 6px;
overflow-x: auto;
border: 1px solid var(--line, #e2e8f0);
border-radius: 12px;
background: var(--panel-soft, rgba(85,111,145,0.06));
}
.vem-page-employee-profile .dashboard-section-nav a {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 36px;
padding: 6px 13px;
color: var(--ink-light, var(--muted, #64748b));
border: 1px solid transparent;
border-radius: 8px;
font-size: 12.5px;
font-weight: 700;
text-decoration: none;
white-space: nowrap;
transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.vem-page-employee-profile .dashboard-section-nav a:hover,
.vem-page-employee-profile .dashboard-section-nav a:focus-visible {
color: var(--text, var(--ink, #0f172a));
background: color-mix(in srgb, var(--brand) 10%, transparent);
outline: none;
}
.vem-page-employee-profile .dashboard-section-nav a.active {
color: #fff;
background: var(--brand);
border-color: var(--brand);
}
.vem-page-employee-profile .field-grid-readonly {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 14px 20px;
margin: 13px 0;
}
.vem-page-employee-profile .field-grid-readonly label {
display: block;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--muted, #64748b);
margin-bottom: 4px;
}
.vem-page-employee-profile .field-grid-readonly > div {
font-size: 13px;
font-weight: 600;
line-height: 1.4;
overflow-wrap: anywhere;
}
.vem-page-employee-profile .field-full {
margin: 18px 0 10px;
padding-top: 14px;
border-top: 1px solid var(--line, #e2e8f0);
}
.vem-page-employee-profile .field-full label {
display: block;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--muted, #64748b);
margin-bottom: 4px;
}
.vem-page-employee-profile .payroll-summary {
display: flex;
gap: 19.5px;
flex-wrap: wrap;
margin: 13px 0;
padding: 11.5px 13px;
border-radius: 8px;
background: var(--panel-hover, var(--panel-solid, #f8fafc));
border: 1px solid var(--line, #e2e8f0);
}
.vem-page-employee-profile .payroll-summary > div {
display: flex;
flex-direction: column;
gap: 3.5px;
font-size: 12px;
color: var(--muted, #64748b);
}
.vem-page-employee-profile .payroll-summary strong {
font-size: 13px;
color: var(--text, #0f172a);
}
.vem-page-employee-profile .payroll-summary-net strong {
color: var(--brand, #0F7C86);
}
.vem-page-employee-profile .employee-profile-payslip-list {
list-style: none;
margin: 6.5px 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.vem-page-employee-profile .employee-profile-payslip-list li {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 9px 12px;
border: 1px solid color-mix(in srgb, var(--line, #e2e8f0) 60%, transparent);
border-radius: 8px;
background: var(--panel-soft, transparent);
font-size: 12.5px;
}
.vem-page-employee-profile .employee-profile-payslip-list .hint {
color: var(--muted, #64748b);
font-size: 11.5px;
}
.vem-page-employee-profile .employee-profile-payslip-list .btn {
flex-shrink: 0;
min-height: 30px;
padding: 4px 12px;
font-size: 11px;
}
/* Standalone action links ("View full payslip history", "Manage
Documents", "Manage Milestones", "Download KYC Document") had no margin
of their own, so they sat flush against whatever list/table came right
before them. */
.vem-page-employee-profile .btn-muted {
margin-top: 12px;
}
/* The Hours tab's date-range form had no layout rule at all on this page
(only the shared body[data-vem-controls] styling, which sets colors but
never display/flex), so its label+input pairs and the Apply button
stacked full-width as plain block elements instead of sitting in a row.
Named .hours-date-range instead of the generic .filters — the Enterprise
theme forces every .filters element to render as its own dark surface
"card" (:is(..., .filters, ...) { background: var(--vem-surface-subtle)
!important; border-color: var(--vem-border) !important; } in
vem-theme-enterprise.css), which read as an unwanted panel sitting
behind these two already-bordered date fields. */
.vem-page-employee-profile .hours-date-range {
display: flex;
flex-wrap: wrap;
align-items: end;
gap: 12px;
margin: 0 0 18px;
}
.vem-page-employee-profile .hours-date-range > div {
display: grid;
gap: 5px;
min-width: 160px;
}
.vem-page-employee-profile .hours-date-range label {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--muted, #64748b);
}
.vem-page-employee-profile .hours-date-range .form-control {
min-height: 38px;
padding: 6.5px 10px;
border: 1px solid var(--line, #e2e8f0);
border-radius: var(--radius-md, 8px);
background: var(--panel-solid, var(--panel));
color: var(--ink, inherit);
font: inherit;
font-size: 12.5px;
box-sizing: border-box;
}
.vem-page-employee-profile .hours-date-range .btn {
align-self: end;
margin-top: 0;
}
.vem-page-employee-profile .employee-profile-stats {
display: flex;
gap: 16.5px;
flex-wrap: wrap;
margin: 13px 0;
}
.vem-page-employee-profile .employee-profile-stats > div {
display: flex;
flex-direction: column;
gap: 3.5px;
padding: 10px 13px;
border-radius: 8px;
background: var(--panel-hover, var(--panel-solid, #f8fafc));
border: 1px solid var(--line, #e2e8f0);
min-width: 120px;
}
.vem-page-employee-profile .employee-profile-stats span {
font-size: 12px;
color: var(--muted, #64748b);
}
.vem-page-employee-profile .employee-profile-stats strong {
font-size: 15px;
}
@media (max-width: 560px) {
.vem-page-employee-profile .employee-profile-header {
flex-direction: column;
align-items: flex-start;
text-align: left;
}
}
/* Tab content (Documents/Payroll/Hours/Performance/Exit/Milestones) had no
page-owned heading/table/empty-state styling, so it fell back to plain
browser-default (large, heavy) and unstyled empty-state text — loud
and cluttered next to this page's quieter uppercase-micro-label language
used by quickfacts/field-grid-readonly above. Matched that same quiet
language here, and reused the single-hairline-row table pattern already
established by hr_documents.php/bulk_payslip.php instead of a heavier grid. */
.vem-page-employee-profile h3 {
margin: 22px 0 10px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--muted, #64748b);
}
.vem-page-employee-profile h3:first-of-type {
margin-top: 0;
}
.vem-page-employee-profile table thead th {
padding: 9px 10px;
background: var(--panel-soft, var(--panel));
font-weight: 700;
font-size: 11px;
letter-spacing: 0.03em;
}
.vem-page-employee-profile table td {
padding: 9px 10px;
}
.vem-page-employee-profile .empty-state {
padding: 13px 15px;
color: var(--muted, #64748b);
font-size: 12.5px;
line-height: 1.6;
border: 1px dashed var(--line, #e2e8f0);
border-radius: var(--radius-md, 8px);
}
/* Org chart page (org_chart.php) — lazy-expandable tree, self-contained
since this page's body class has no other rules to lean on. */
/* Org chart rows — matches manage_leave_settings.php's .type-list /
.type-card convention deliberately (that page was named as the
reference for "many cards, neatly placed"): a plain grid list with a
modest gap, and each row a full-width grid card with fixed-width
leading columns and one flexible content column. Rows shrink-wrapped
to their own content (an earlier attempt at this) look ragged next to
each other since every name/role is a different length — the reference
page's rows all start and end at the same edges because they're full
width with an internal column grid, not because they're sized to fit
anything. --panel-soft is the same token .type-card itself uses. */
/* This page's outer never had its own padding
rule — every other page that uses .panel supplies one itself
(manage_leave_settings.php: 22px, apply_leave.php: 21px, the
performance-cycle pages: 24px); the shared fallback in vem-theme.css
only ever supplies .panel's color/border/background as a default for
pages with no page-specific override, and deliberately never touches
padding or layout. Without this, the row list was flush against the
panel's own edges no matter how much internal row/card spacing was
added — the missing breathing room was one level up the whole time. */
/* This page's outer content wrapper never had its own padding rule
either — every other page defines .main-content itself (there's no
shared base for it, same as .panel/.top-bar above), so without this
the whole page sat flush against the viewport edges under the top
nav, with no outer breathing room at all. */
.vem-page-org-chart .main-content {
padding: 25px;
animation: pageRise 520ms var(--transition-smooth) both;
}
.vem-page-org-chart .top-bar {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 17px;
margin-bottom: 21px;
flex-wrap: wrap;
}
.vem-page-org-chart .page-title {
font-size: 24px;
}
.vem-page-org-chart .page-subtitle {
font-size: 12.5px;
}
.vem-page-org-chart .org-chart-search {
position: relative;
width: min(310px, 100%);
}
.vem-page-org-chart .org-chart-search-input {
width: 100%;
box-sizing: border-box;
padding: 8px 12px;
border: 1px solid var(--line, #e2e8f0);
border-radius: 10px;
background: var(--panel-solid, #fff);
color: var(--ink);
font-size: 12.5px;
}
.vem-page-org-chart .org-chart-search-input:focus {
outline: none;
border-color: var(--brand, #0F7C86);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand, #0F7C86) 14%, transparent);
}
.vem-page-org-chart .org-chart-search-results {
position: absolute;
z-index: 20;
top: calc(100% + 6px);
left: 0;
right: 0;
max-height: 320px;
overflow-y: auto;
margin: 0;
padding: 6px;
list-style: none;
border: 1px solid var(--line, #e2e8f0);
border-radius: 12px;
background: var(--panel-solid, #fff);
box-shadow: var(--shadow-md, 0 12px 30px rgba(15, 23, 42, 0.16));
}
.vem-page-org-chart .org-chart-search-results a {
display: flex;
justify-content: space-between;
align-items: center;
gap: 9px;
padding: 7px 9px;
border-radius: 8px;
text-decoration: none;
color: var(--ink);
}
.vem-page-org-chart .org-chart-search-results a:hover {
background: var(--panel-hover, rgba(85, 111, 145, 0.08));
}
.vem-page-org-chart .org-chart-search-name {
font-weight: 650;
font-size: 12.5px;
}
.vem-page-org-chart .org-chart-search-meta {
flex-shrink: 0;
font-size: 10.5px;
color: var(--muted, #64748b);
}
.vem-page-org-chart .org-chart-search-empty {
padding: 9px;
color: var(--muted, #64748b);
font-size: 12px;
font-style: italic;
}
.vem-page-org-chart .org-chart-back-link {
margin: 0 0 13px;
font-size: 12.5px;
}
.vem-page-org-chart .org-chart-back-link a {
color: var(--brand, #0F7C86);
font-weight: 650;
text-decoration: none;
}
.vem-page-org-chart .org-chart-back-link a:hover {
text-decoration: underline;
}
.vem-page-org-chart .panel {
position: relative;
margin-bottom: 23px;
padding: 21px 23px;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
background: var(--panel-solid, var(--panel));
box-shadow: var(--shadow-sm);
}
.vem-page-org-chart .org-chart-tree,
.vem-page-org-chart .org-chart-children {
list-style: none;
display: grid;
gap: 7px;
margin: 0;
padding-left: 26px;
}
.vem-page-org-chart .org-chart-tree {
padding-left: 0;
gap: 8px;
}
.vem-page-org-chart .org-chart-node {
display: grid;
grid-template-columns: auto auto minmax(0, 1fr);
align-items: center;
gap: 10px;
padding: 9px 12px;
border-radius: 10px;
border: 1px solid var(--line, #e2e8f0);
background: var(--panel-soft, #d3deea);
color: var(--ink);
transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.vem-page-org-chart .org-chart-node:hover {
border-color: var(--brand, #0F7C86);
box-shadow: 0 6px 18px rgba(15, 23, 42, 0.1);
transform: translateY(-1px);
}
.vem-page-org-chart .org-chart-toggle {
width: 22px;
height: 22px;
flex-shrink: 0;
border-radius: 50%;
border: 1px solid var(--line, #e2e8f0);
background: var(--panel-solid, #fff);
color: var(--brand, #0F7C86);
font-weight: 700;
font-size: 12px;
cursor: pointer;
line-height: 1;
transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.vem-page-org-chart .org-chart-toggle:hover {
background: var(--panel-hover, rgba(85, 111, 145, 0.06));
border-color: var(--brand, #0F7C86);
transform: scale(1.06);
}
.vem-page-org-chart .org-chart-toggle:active {
transform: scale(0.96);
}
.vem-page-org-chart .org-chart-avatar {
width: 29px;
height: 29px;
flex-shrink: 0;
display: grid;
place-items: center;
border-radius: 50%;
font-size: 11.5px;
font-weight: 750;
color: #fff;
background: linear-gradient(135deg, var(--brand, #0F7C86), var(--brand-deep, #0a5a62));
box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand, #0F7C86) 16%, transparent);
}
.vem-page-org-chart .org-chart-identity {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 7px;
min-width: 0;
}
.vem-page-org-chart .org-chart-name {
font-weight: 650;
font-size: 12.5px;
color: var(--ink, var(--text, #0f172a));
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.vem-page-org-chart .org-chart-meta {
flex-shrink: 0;
padding: 2px 7px;
border-radius: 999px;
border: 1px solid var(--line, #e2e8f0);
background: var(--panel-solid, #fff);
font-size: 9.5px;
font-weight: 650;
letter-spacing: .02em;
color: var(--muted, #64748b);
}
.vem-page-org-chart .org-chart-children {
border-left: 1px dashed var(--line, #e2e8f0);
margin-left: 17px;
padding-top: 2px;
padding-bottom: 2px;
}
/* Nested levels scale down slightly so depth reads visually, without a
fixed depth limit — every level below root reuses the same rule since
.org-chart-children can nest indefinitely. */
.vem-page-org-chart .org-chart-children .org-chart-node {
padding: 7px 10px;
}
.vem-page-org-chart .org-chart-children .org-chart-avatar {
width: 25px;
height: 25px;
font-size: 10px;
}
.vem-page-org-chart .org-chart-children .org-chart-name {
font-size: 11.5px;
}
@keyframes vemOrgChartReveal {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.vem-page-org-chart .org-chart-children:not([hidden]) {
animation: vemOrgChartReveal .16s ease-out;
}
/* An author `display` declaration always wins over the UA stylesheet's
`[hidden] { display: none }`, regardless of specificity — setting
display:flex on .org-chart-children above silently defeated the
native hidden attribute, so a collapsed (or never-yet-expanded) list
kept rendering as an empty flex box with its dashed border still
showing, and clicking the − toggle (which only sets the `hidden`
attribute in JS) visibly did nothing. This selector's higher
specificity restores real hiding. */
.vem-page-org-chart .org-chart-children[hidden] {
display: none;
}
.vem-page-org-chart .org-chart-empty {
padding: 10px 0 10px 20px;
color: var(--muted, #64748b);
font-size: 13px;
font-style: italic;
}
.vem-page-org-chart .org-chart-load-more-btn {
padding: 6px 12px;
border: 1px dashed var(--line, #e2e8f0);
border-radius: 999px;
background: transparent;
color: var(--brand, #0F7C86);
font-size: 11.5px;
font-weight: 650;
cursor: pointer;
transition: background .15s ease, border-color .15s ease;
}
.vem-page-org-chart .org-chart-load-more-btn:hover {
background: var(--panel-hover, rgba(85, 111, 145, 0.06));
border-color: var(--brand, #0F7C86);
}
.vem-page-org-chart .org-chart-load-more-btn:disabled {
opacity: .6;
cursor: default;
}
@media (max-width: 640px) {
.vem-page-org-chart .panel {
padding: 18px;
}
.vem-page-org-chart .org-chart-tree,
.vem-page-org-chart .org-chart-children {
padding-left: 22px;
}
.vem-page-org-chart .org-chart-node {
grid-template-columns: auto auto minmax(0, 1fr);
padding: 11px 12px;
gap: 10px;
}
.vem-page-org-chart .org-chart-identity {
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
.vem-page-org-chart .org-chart-meta {
margin-left: 0;
}
}
/* Command palette (components/top_nav.php) — self-contained, since this
partial is included on every page regardless of that page's own CSS
scope, so it can't rely on any page-scoped class being present. */
.vem-topnav-search-trigger {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
border-radius: 999px;
border: 1px solid var(--line, rgba(255, 255, 255, 0.25));
background: transparent;
color: inherit;
cursor: pointer;
}
.vem-topnav-search-trigger:hover {
background: rgba(255, 255, 255, 0.08);
}
.vem-topnav-search-kbd {
font-size: 11px;
opacity: 0.7;
}
@media (max-width: 720px) {
.vem-topnav-search-kbd { display: none; }
}
.vem-palette-overlay {
position: fixed;
inset: 0;
z-index: 3000;
display: none;
align-items: flex-start;
justify-content: center;
padding: 12vh 20px 20px;
background: rgba(4, 8, 16, 0.55);
backdrop-filter: blur(4px);
}
.vem-palette-overlay.active { display: flex; }
.vem-palette {
width: min(560px, 100%);
max-height: 60vh;
display: flex;
flex-direction: column;
border-radius: var(--radius-lg, 14px);
background: var(--panel-solid, #fff);
box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
overflow: hidden;
}
.vem-palette-input {
border: 0;
border-bottom: 1px solid var(--line, #e2e8f0);
padding: 16px 18px;
font-size: 16px;
background: transparent;
color: var(--ink, var(--text, #0f172a));
outline: none;
}
.vem-palette-results {
list-style: none;
margin: 0;
padding: 6px;
overflow-y: auto;
}
.vem-palette-result {
display: block;
padding: 10px 12px;
border-radius: 8px;
text-decoration: none;
color: var(--ink, var(--text, #0f172a));
font-weight: 600;
}
.vem-palette-result.active,
.vem-palette-result:hover {
background: var(--brand, #0F7C86);
color: #fff;
}
.vem-palette-empty {
padding: 16px 18px;
margin: 0;
}
/* Reports hub (reports.php) */
.vem-page-reports-hub .reports-hub-tiles {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 10.5px;
}
.vem-page-reports-hub .reports-hub-tile {
display: block;
padding: 13.5px;
border-radius: var(--radius-lg, 9.5px);
border: 1px solid var(--line, #e2e8f0);
background: var(--panel-solid, #fff);
text-decoration: none;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.vem-page-reports-hub .reports-hub-tile:hover {
border-color: var(--brand, #0F7C86);
box-shadow: 0 4px 14px rgba(15, 124, 134, 0.12);
}
.vem-page-reports-hub .reports-hub-tile h2 {
margin: 0 0 5.5px;
font-size: 12px;
color: var(--ink, var(--text, #0f172a));
}
.vem-page-reports-hub .reports-hub-tile p {
margin: 0;
font-size: 12px;
color: var(--muted, #64748b);
line-height: 1.5;
}
/* Two-factor authentication panel (profile.php) */
.totp-secret-display {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 15px;
letter-spacing: 1px;
background: var(--surface-muted, #f1f5f9);
border: 1px solid var(--border, #e2e8f0);
border-radius: 8px;
padding: 10px 14px;
margin: 8px 0;
word-break: break-all;
}
.totp-setup-steps {
padding-left: 20px;
margin: 12px 0;
color: var(--ink, var(--text, #0f172a));
}
.totp-setup-steps li {
margin-bottom: 10px;
line-height: 1.5;
}
.totp-form-actions {
display: flex;
gap: 10px;
margin-top: 12px;
}
.totp-form .form-group {
max-width: 220px;
}
/* Notification bell (components/top_nav.php) */
.vem-topnav-notif-toggle {
position: relative;
padding: 8px 10px;
}
.vem-topnav-notif-count {
position: absolute;
top: 2px;
right: 2px;
}
.vem-topnav-notif-menu {
min-width: 320px;
max-width: 360px;
right: 0;
left: auto;
max-height: 420px;
overflow-y: auto;
}
.vem-topnav-notif-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 4px 8px 8px;
font-size: 13px;
font-weight: 700;
color: var(--ink, #172334);
border-bottom: 1px solid var(--line, rgba(85, 111, 145, 0.14));
margin-bottom: 6px;
}
.vem-topnav-notif-markall-form { margin: 0; }
.vem-topnav-notif-markall {
background: none;
border: none;
color: var(--brand, #1f6feb);
font-size: 12px;
font-weight: 700;
cursor: pointer;
padding: 0;
}
.vem-topnav-notif-empty {
padding: 16px 12px;
font-size: 13px;
color: var(--muted, #64748b);
text-align: center;
}
.vem-topnav-notif-item {
flex-direction: column;
align-items: flex-start;
gap: 2px;
}
.vem-topnav-notif-item.unread { background: var(--brand-soft, rgba(31, 111, 235, 0.06)); }
.vem-topnav-notif-item.unread::before {
content: '';
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--brand, #1f6feb);
margin-right: 6px;
}
.vem-topnav-notif-title {
font-size: 13px;
font-weight: 700;
color: var(--ink, #172334);
white-space: normal;
}
.vem-topnav-notif-time {
font-size: 11px;
font-weight: 600;
color: var(--muted, #64748b);
}
.vem-topnav-notif-viewall {
display: block;
text-align: center;
padding: 8px 12px;
margin-top: 4px;
border-top: 1px solid var(--line, rgba(85, 111, 145, 0.14));
font-size: 12px;
font-weight: 700;
color: var(--brand, #1f6feb);
text-decoration: none;
}
.vem-topnav-notif-viewall:hover { text-decoration: underline; }
/* Notification inbox (notifications.php) */
.notifications-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.notifications-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.notifications-item a {
display: block;
padding: 14px 16px;
border-radius: var(--radius-md, 10px);
text-decoration: none;
color: inherit;
border: 1px solid transparent;
}
.notifications-item a:hover { background: var(--panel-soft, rgba(85, 111, 145, 0.06)); }
.notifications-item.unread a { background: var(--brand-soft, rgba(31, 111, 235, 0.06)); border-color: var(--brand-soft, rgba(31, 111, 235, 0.12)); }
.notifications-item-main {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
}
.notifications-item-title {
font-size: 14px;
font-weight: 700;
color: var(--ink, var(--text, #0f172a));
}
.notifications-item-time {
font-size: 12px;
color: var(--muted, #64748b);
white-space: nowrap;
}
.notifications-item-body {
margin: 4px 0 0;
font-size: 13px;
color: var(--muted, #64748b);
line-height: 1.5;
}
/* --------------------------------------------------------------------
Missing top-level .main-content/.top-bar/.panel layout rules — same
root cause as the org-chart fix: each page defines these itself
(there's no shared base), and these five either had none at all, or
(manage-holidays) had them only inside a max-width:760px media query,
so on a normal desktop viewport the page rendered flush against the
browser edges with no panel container styling at all. Uses the same
plain, theme-token-based convention as org-chart/payroll/template-hub
rather than trying to replicate each page's own decorative background,
for consistency and because that decorative styling only ever applied
below 760px anyway (i.e. was never actually seen by an admin on a
normal screen). */
:is(
.vem-page-manage-company-roles,
.vem-page-manage-holidays,
.vem-page-manage-performance-cycles,
.vem-page-manage-performance-grades,
.vem-page-company-audit-log
) .main-content {
padding: 21.5px;
animation: pageRise 520ms var(--transition-smooth) both;
}
:is(
.vem-page-manage-company-roles,
.vem-page-manage-holidays,
.vem-page-manage-performance-cycles,
.vem-page-manage-performance-grades,
.vem-page-company-audit-log
) .top-bar {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 15px;
margin-bottom: 18px;
flex-wrap: wrap;
}
:is(
.vem-page-manage-company-roles,
.vem-page-manage-holidays,
.vem-page-manage-performance-cycles,
.vem-page-manage-performance-grades,
.vem-page-company-audit-log
) .panel {
position: relative;
margin-bottom: 18px;
padding: 17px 19px;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
background: var(--panel-solid, var(--panel));
box-shadow: var(--shadow-sm);
}
/* manage_holidays.php's .filters form had no layout rule at all (no grid,
no gap, no card styling) and no label/input styling outside a
max-width:760px media query — the label and input rendered stacked
with bare browser defaults, no visual grouping. Matches the same
.filters grid convention used on manage_users.php/approve_expenses.php. */
.vem-page-manage-holidays .filters {
display: grid;
grid-template-columns: minmax(180px, 260px) minmax(120px, 160px) auto;
align-items: end;
gap: 12px;
margin-bottom: 18px;
padding: 16px;
border: 1px solid var(--line, #e2e8f0);
border-radius: 12px;
background: var(--panel-soft, rgba(255,255,255,0.04));
}
.vem-page-manage-holidays .filters label {
display: block;
margin-bottom: 5px;
color: var(--muted, #64748b);
font-size: 11px;
font-weight: 700;
letter-spacing: .02em;
text-transform: uppercase;
}
.vem-page-manage-holidays .filters input,
.vem-page-manage-holidays .filters select {
width: 100%;
box-sizing: border-box;
min-height: 38px;
padding: 8px 12px;
border: 1px solid var(--line, #e2e8f0);
border-radius: 9px;
background: var(--panel-solid, #fff);
color: var(--ink);
font: inherit;
font-size: 12.5px;
outline: none;
}
.vem-page-manage-holidays .filters input:focus,
.vem-page-manage-holidays .filters select:focus {
border-color: var(--brand, #0F7C86);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand, #0F7C86) 14%, transparent);
}
@media (max-width: 640px) {
.vem-page-manage-holidays .filters {
grid-template-columns: 1fr;
}
}
/* Same media-query trap as .filters above: the only .alert rule was
inside @media(max-width:760px), so the success/error banner had no
margin-bottom on desktop and sat flush against the content below it. */
.vem-page-manage-holidays .alert {
margin-bottom: 18px;
padding: 11.5px 15px;
border-radius: 10px;
font-size: 12.5px;
font-weight: 650;
border: 1px solid transparent;
}
/* vem-page-reports-hub (reports.php + its 3 statutory/payroll/department
sub-report pages) had no .main-content/.top-bar/.panel rule at all —
same root cause as the earlier org-chart/manage-* fixes. */
.vem-page-reports-hub .main-content {
padding: 17.5px;
animation: pageRise 520ms var(--transition-smooth) both;
}
.vem-page-reports-hub .top-bar {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12.5px;
margin-bottom: 15px;
flex-wrap: wrap;
}
.vem-page-reports-hub .panel {
position: relative;
margin-bottom: 15px;
padding: 14px 15.5px;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
background: var(--panel-solid, var(--panel));
box-shadow: var(--shadow-sm);
}
/* Same root cause as manage_holidays/hr-documents: .filters had no layout
rule at all, so the Month/Year/Apply controls just stacked with no gap,
and .empty-state had no margin-top so it touched the Apply button. */
.vem-page-reports-hub .filters {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 200px)) auto;
align-items: end;
gap: 13px;
margin: 0 0 19.5px;
}
.vem-page-reports-hub .filters > div {
display: flex;
flex-direction: column;
gap: 5px;
min-width: 0;
}
.vem-page-reports-hub .filters label {
font-size: 12px;
font-weight: 600;
color: var(--muted);
}
.vem-page-reports-hub .filters .btn {
width: auto;
}
.vem-page-reports-hub .empty-state {
margin-top: 15px;
padding: 33px 16.5px;
color: var(--muted);
text-align: center;
font-size: 12px;
border: 1px dashed var(--line);
border-radius: var(--radius-md);
}
@media (max-width: 620px) {
.vem-page-reports-hub .filters {
grid-template-columns: 1fr;
}
}
/* .data-table is only used by approve_profile_changes.php (the field/
current/proposed comparison table) — approve_leave.php, which this
page correctly shares its page-scoped class with (identical .grid/
.card/.title/.subtitle markup), has no table element at all, so
nothing here ever styled it. Matches this class's existing hardcoded
light-panel convention rather than introducing a different one. */
.vem-page-approve-leave .data-table {
width: 100%;
margin-top: 12px;
border: 1px solid #afbdce;
border-radius: 10px;
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
font-size: 12px;
}
.vem-page-approve-leave .data-table th {
padding: 8px 10px;
border-bottom: 1px solid #afbdce;
background: #d3deea;
color: #526783;
font-size: 10px;
font-weight: 700;
letter-spacing: .035em;
text-align: left;
text-transform: uppercase;
}
.vem-page-approve-leave .data-table td {
padding: 8px 10px;
border-bottom: 1px solid #d3ddea;
background: #e8eef5;
color: #263750;
vertical-align: top;
}
.vem-page-approve-leave .data-table tr:last-child td {
border-bottom: none;
}
/* Same missing top-level container pattern as earlier fixes. */
.vem-page-employee-profile .main-content {
padding: 21.5px;
animation: pageRise 520ms var(--transition-smooth) both;
}
.vem-page-employee-profile .top-bar {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 15px;
margin-bottom: 18px;
flex-wrap: wrap;
}
.vem-page-employee-profile .panel {
position: relative;
margin-bottom: 18px;
padding: 17px 19px;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
background: var(--panel-solid, var(--panel));
box-shadow: var(--shadow-sm);
}
/* Same missing-base-.btn pattern as every other page in this codebase —
"Manage Documents" (.btn.btn-muted) had no shape/padding/radius at all,
so it rendered as plain link text next to properly-styled buttons. */
.vem-page-employee-profile .btn {
position: relative;
display: inline-grid;
place-items: center;
min-height: 38px;
padding: 7px 15px;
border: 1px solid transparent;
border-radius: var(--radius-md);
cursor: pointer;
font-family: inherit;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.02em;
text-decoration: none;
transition: all var(--transition-fast);
}
.vem-page-employee-profile .btn-primary {
background: var(--brand);
border-color: var(--brand);
color: #fff;
}
.vem-page-employee-profile .btn-muted {
background: var(--panel-hover, var(--panel-solid));
border-color: var(--line);
color: var(--ink-light, var(--ink));
}
.vem-page-employee-profile .btn-danger {
background: var(--danger-bg);
border-color: var(--danger);
color: var(--danger);
}
.vem-page-employee-profile .btn:active {
transform: translateY(-1px) scale(0.98);
}
/* profile.php's Personal Details form uses .field/.field-full wrapper
divs, but the only field-styling mechanism on this page
(data-vem-standard-fields, already on ) only matches a
.form-group ancestor — a different convention this page never used —
so every label/input/select/textarea here rendered with zero styling
at all: no spacing between fields, no borders, no grid alignment. */
.vem-page-profile form {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
align-items: start;
}
.vem-page-profile .field-full {
grid-column: 1 / -1;
}
.vem-page-profile .field,
.vem-page-profile .field-full {
display: flex;
flex-direction: column;
gap: 6px;
}
.vem-page-profile form > button {
grid-column: 1 / -1;
justify-self: start;
}
/* Personal Details now has its own full-height column (see .cards-grid
above) instead of competing for a fixed row height, so the form runs
as one relaxed single-column stack: no cramming, no per-field
width-juggling. Gender is a pill toggle instead of a dropdown or bare
radio circles, matching the filter-pill/segmented-control language
used elsewhere in the app (e.g. reports date filters, filter-btn). */
.vem-page-profile .personal-details-form {
grid-template-columns: 1fr;
gap: 18px;
}
.vem-page-profile .field-gender .pill-group {
display: flex;
gap: 10px;
margin-top: 2px;
}
.vem-page-profile .field-gender .pill-option {
position: relative;
cursor: pointer;
}
.vem-page-profile .field-gender .pill-option input[type="radio"] {
position: absolute;
opacity: 0;
inset: 0;
margin: 0;
cursor: pointer;
}
.vem-page-profile .field-gender .pill-option span {
display: inline-flex;
align-items: center;
min-width: 92px;
justify-content: center;
padding: 9px 18px;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--panel-solid, var(--panel));
color: var(--ink-light, var(--ink));
font-size: 13px;
font-weight: 700;
transition: all var(--transition-fast);
}
.vem-page-profile .field-gender .pill-option input[type="radio"]:checked + span {
border-color: var(--brand);
background: var(--brand-soft, var(--brand));
color: var(--brand-ink, #fff);
}
.vem-page-profile .field-gender .pill-option input[type="radio"]:focus-visible + span {
box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 30%, transparent);
}
.vem-page-profile .pd-phone-row {
display: flex;
gap: 10px;
}
.vem-page-profile .pd-phone-row input[type="tel"] {
flex: 1;
}
/* Full country names ("United Arab Emirates (+971)") would force this
select wide open — cap the closed width and ellipsize long names
instead of stretching the box; the open dropdown list still shows
full names. */
.vem-page-profile .pd-phone-code {
flex: 0 0 160px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@media (max-width: 480px) {
.vem-page-profile .pd-phone-row {
flex-wrap: wrap;
}
.vem-page-profile .pd-phone-code {
flex: 1 1 100%;
}
}
.vem-page-profile :is(.field, .field-full) > label {
color: var(--muted);
font-size: 11.5px;
font-weight: 700;
letter-spacing: .02em;
text-transform: uppercase;
}
.vem-page-profile :is(.field, .field-full) .hint {
color: var(--muted);
font-weight: 500;
text-transform: none;
letter-spacing: 0;
}
.vem-page-profile :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]) {
width: 100%;
box-sizing: border-box;
min-height: 40px;
padding: 9px 12px;
border: 1px solid var(--line);
border-radius: 10px;
background: var(--panel-solid, var(--panel));
color: var(--ink);
font: inherit;
font-size: 13px;
outline: none;
}
.vem-page-profile textarea {
min-height: 76px;
resize: vertical;
}
.vem-page-profile :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):focus {
border-color: var(--brand);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 14%, transparent);
}
.vem-page-profile .info-box {
grid-column: 1 / -1;
padding: 14px 16px;
border: 1px solid var(--line);
border-radius: 12px;
background: var(--panel-soft, var(--panel));
}
/* ==========================================================================
profile.php — staging draft rewrite (card/profile-dashboard/fab/modal
class vocabulary, distinct from the .panel/.field convention the rest
of this page's CSS above assumes). None of these classes existed
anywhere in the stylesheet, so the page rendered as bare unstyled HTML
until this block was added. Kept separate from the older .panel-based
rules above rather than reconciling the two conventions, since this is
a staging-only experiment, not yet the production markup.
========================================================================== */
/* .vem-page-profile form (above) targets every