/* ============================================================
   HRMS Professional Light Theme
   Clean, corporate, trustworthy — inspired by top HRMS products
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ── CSS Variables ─────────────────────────────────────────── */
:root {
	--hrms-primary: #1a56db;
	--hrms-primary-light: #ebf2ff;
	--hrms-primary-dark: #1240a8;
	--hrms-accent: #0ea5e9;
	--hrms-success: #16a34a;
	--hrms-warning: #d97706;
	--hrms-danger: #dc2626;
	--hrms-bg: #f3f4f6;
	--hrms-surface: #ffffff;
	--hrms-border: #e5e7eb;
	--hrms-text: #111827;
	--hrms-text-muted: #6b7280;
	--hrms-sidebar-bg: #1e293b;
	--hrms-sidebar-text: #cbd5e1;
	--hrms-sidebar-active: #1a56db;
	--hrms-header-bg: #ffffff;
	--hrms-radius: 8px;
	--hrms-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
	--hrms-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05);
	--hrms-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.10), 0 4px 10px rgba(0, 0, 0, 0.05);
}

/* ── Base ──────────────────────────────────────────────────── */
html,
body {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	background: var(--hrms-bg);
	color: var(--hrms-text);
}

/* ── Lumo overrides — force light mode ────────────────────── */

html {
	--lumo-base-color: #ffffff;
	--lumo-contrast-5pct: #f3f4f6;
	--lumo-contrast-10pct: #e5e7eb;
	--lumo-contrast-20pct: #d1d5db;
	--lumo-contrast-30pct: #9ca3af;
	--lumo-contrast-40pct: #6b7280;
	--lumo-contrast-50pct: #4b5563;
	--lumo-contrast-60pct: #374151;
	--lumo-contrast-70pct: #1f2937;
	--lumo-contrast-80pct: #111827;
	--lumo-contrast-90pct: #030712;
	--lumo-contrast: #000000;
	--lumo-header-text-color: #111827;
	--lumo-body-text-color: #374151;
	--lumo-secondary-text-color: #6b7280;
	--lumo-disabled-text-color: #9ca3af;
	--lumo-primary-color: #1a56db;
	--lumo-primary-color-50pct: rgba(26, 86, 219, 0.5);
	--lumo-primary-color-10pct: #ebf2ff;
	--lumo-primary-text-color: #1a56db;
	--lumo-primary-contrast-color: #ffffff;
	--lumo-error-color: #dc2626;
	--lumo-error-color-10pct: #fef2f2;
	--lumo-error-text-color: #dc2626;
	--lumo-success-color: #16a34a;
	--lumo-success-color-10pct: #f0fdf4;
	--lumo-success-text-color: #16a34a;
	--lumo-tint-5pct: rgba(0, 0, 0, 0.03);
	--lumo-tint-10pct: rgba(0, 0, 0, 0.06);
	--lumo-tint-20pct: rgba(0, 0, 0, 0.10);
	--lumo-shade-5pct: rgba(0, 0, 0, 0.05);
	--lumo-shade-10pct: rgba(0, 0, 0, 0.10);
	--lumo-shade-20pct: rgba(0, 0, 0, 0.20);
	--lumo-border-radius-s: 4px;
	--lumo-border-radius-m: 8px;
	--lumo-border-radius-l: 12px;
	--lumo-space-xs: 4px;
	--lumo-space-s: 8px;
	--lumo-space-m: 16px;
	--lumo-space-l: 24px;
	--lumo-space-xl: 40px;
	--lumo-font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ── App Layout ────────────────────────────────────────────── */
vaadin-app-layout {
	background: var(--hrms-bg) !important;
}

vaadin-app-layout::part(navbar) {
	background: var(--hrms-header-bg) !important;
	border-bottom: 1px solid var(--hrms-border);
	box-shadow: var(--hrms-shadow-sm);
	padding: 0;
	height: 60px;
	min-height: 60px;
}

vaadin-app-layout::part(drawer) {
	background: var(--hrms-sidebar-bg) !important;
	border-right: none;
	width: 240px;
	box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
}

vaadin-app-layout::part(content) {
	background: var(--hrms-bg) !important;
	padding: 0;
}

/* ── Sidebar Navigation ────────────────────────────────────── */
vaadin-side-nav {
	background: transparent !important;
	--vaadin-side-nav-item-color: #94a3b8;
	--vaadin-side-nav-item-hover-color: #ffffff;
	--vaadin-side-nav-item-active-color: #ffffff;
	--vaadin-side-nav-item-active-background: rgba(26, 86, 219, 0.25);
}

vaadin-side-nav-item {
	color: #94a3b8 !important;
	font-size: 13.5px !important;
	font-weight: 500 !important;
	border-radius: 6px !important;
	margin: 1px 8px !important;
	transition: all 0.15s ease !important;
}

vaadin-side-nav-item:hover {
	background: rgba(255, 255, 255, 0.08) !important;
	color: #ffffff !important;
}

vaadin-side-nav-item[active] {
	background: var(--hrms-primary) !important;
	color: #ffffff !important;
	box-shadow: 0 2px 8px rgba(26, 86, 219, 0.4) !important;
}

vaadin-side-nav-item::part(item) {
	padding: 8px 12px !important;
	border-radius: 6px !important;
}

/* Parent nav items */
vaadin-side-nav-item[has-children]::part(toggle-button) {
	color: #64748b !important;
}

/* ── Grid ──────────────────────────────────────────────────── */
vaadin-grid {
	background: var(--hrms-surface) !important;
	border: 1px solid var(--hrms-border) !important;
	border-radius: var(--hrms-radius) !important;
	box-shadow: var(--hrms-shadow-sm) !important;
	overflow: hidden;
}

vaadin-grid::part(header-cell) {
	background: #f8fafc !important;
	color: #374151 !important;
	font-weight: 600 !important;
	font-size: 12px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
	border-bottom: 2px solid var(--hrms-border) !important;
	padding: 10px 12px !important;
}

vaadin-grid::part(cell) {
	color: var(--hrms-text) !important;
	font-size: 13.5px !important;
	padding: 10px 12px !important;
	border-bottom: 1px solid #f1f5f9 !important;
}

vaadin-grid::part(row):hover>td,
vaadin-grid::part(row-focused)::part(cell) {
	background: #f0f7ff !important;
}

vaadin-grid::part(row):nth-child(even)::part(cell) {
	background: #fafbfc !important;
}

/* Wrap long header + cell text instead of truncating with "…". Headers stay fully
   visible (wrap to 2 lines), and long content flows to the next line so a column
   never stretches to fit a long value. Applies to every grid app-wide. */
vaadin-grid-cell-content {
	white-space: normal !important;
	overflow-wrap: anywhere;
	word-break: break-word;
	line-height: 1.35;
}
/* Header text wraps but stays vertically centred / readable. */
vaadin-grid::part(header-cell) vaadin-grid-cell-content,
vaadin-grid-cell-content {
	text-overflow: clip;
}

/* Default minimum column width app-wide — matches the "Date & Time" column (185px)
   so no column is uncomfortably narrow even when its data is short. Columns that
   declare a larger width still grow; long content wraps within this width (it never
   stretches the column). Applies to every grid. */
vaadin-grid::part(cell),
vaadin-grid::part(header-cell) {
	min-width: 185px;
}

/* Column separators (vertical borders) on every grid app-wide. */
vaadin-grid::part(cell),
vaadin-grid::part(header-cell) {
	border-right: 1px solid #eef2f7 !important;
}

/* ── Buttons ───────────────────────────────────────────────── */
vaadin-button {
	border-radius: 6px !important;
	font-family: 'Inter', sans-serif !important;
	font-size: 13.5px !important;
	font-weight: 500 !important;
	cursor: pointer !important;
	transition: all 0.15s ease !important;
}

vaadin-button[theme~="primary"] {
	background: var(--hrms-primary) !important;
	color: #ffffff !important;
	border: none !important;
	box-shadow: 0 1px 3px rgba(26, 86, 219, 0.3) !important;
}

vaadin-button[theme~="primary"]:hover {
	background: var(--hrms-primary-dark) !important;
	box-shadow: 0 4px 12px rgba(26, 86, 219, 0.4) !important;
	transform: translateY(-1px) !important;
}

vaadin-button[theme~="error"] {
	color: var(--hrms-danger) !important;
}

vaadin-button[theme~="error"][theme~="primary"] {
	background: var(--hrms-danger) !important;
	color: white !important;
}

vaadin-button[theme~="success"] {
	background: var(--hrms-success) !important;
	color: white !important;
}

/* ── Form Fields ───────────────────────────────────────────── */
vaadin-text-field,
vaadin-email-field,
vaadin-password-field,
vaadin-number-field,
vaadin-integer-field,
vaadin-text-area,
vaadin-combo-box,
vaadin-date-picker,
vaadin-select {
	--lumo-text-field-size: 36px;
}

vaadin-text-field::part(input-field),
vaadin-email-field::part(input-field),
vaadin-password-field::part(input-field),
vaadin-number-field::part(input-field),
vaadin-integer-field::part(input-field),
vaadin-text-area::part(input-field),
vaadin-combo-box::part(input-field),
vaadin-date-picker::part(input-field) {
	background: #ffffff !important;
	border: 1.5px solid #d1d5db !important;
	border-radius: 6px !important;
	font-size: 13.5px !important;
	color: var(--hrms-text) !important;
	transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

vaadin-text-field[focused]::part(input-field),
vaadin-email-field[focused]::part(input-field),
vaadin-password-field[focused]::part(input-field),
vaadin-combo-box[focused]::part(input-field),
vaadin-date-picker[focused]::part(input-field) {
	border-color: var(--hrms-primary) !important;
	box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.12) !important;
}

vaadin-text-field::part(label),
vaadin-combo-box::part(label),
vaadin-date-picker::part(label) {
	font-size: 12.5px !important;
	font-weight: 500 !important;
	color: #374151 !important;
	margin-bottom: 2px !important;
}

/* ── Dialog ────────────────────────────────────────────────── */
vaadin-dialog-overlay::part(overlay) {
	background: var(--hrms-surface) !important;
	border-radius: 12px !important;
	box-shadow: var(--hrms-shadow-lg) !important;
	border: 1px solid var(--hrms-border) !important;
}

vaadin-dialog-overlay::part(header) {
	background: var(--hrms-surface) !important;
	border-bottom: 1px solid var(--hrms-border) !important;
	padding: 16px 20px !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	color: var(--hrms-text) !important;
}

vaadin-dialog-overlay::part(footer) {
	background: #f8fafc !important;
	border-top: 1px solid var(--hrms-border) !important;
	padding: 12px 20px !important;
}

/* ── Tab Sheet ─────────────────────────────────────────────── */
vaadin-tabsheet::part(tabs) {
	background: var(--hrms-surface) !important;
	border-bottom: 2px solid var(--hrms-border) !important;
	padding: 0 16px !important;
}

vaadin-tab {
	color: var(--hrms-text-muted) !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	padding: 12px 16px !important;
	border-radius: 0 !important;
	transition: color 0.15s ease !important;
}

vaadin-tab:hover {
	color: var(--hrms-primary) !important;
	background: transparent !important;
}

vaadin-tab[selected] {
	color: var(--hrms-primary) !important;
	font-weight: 600 !important;
	border-bottom: 2px solid var(--hrms-primary) !important;
}

/* ── Notification ──────────────────────────────────────────── */
vaadin-notification-card::part(overlay) {
	border-radius: 8px !important;
	font-size: 13.5px !important;
	font-weight: 500 !important;
	box-shadow: var(--hrms-shadow-lg) !important;
	border-left: 4px solid var(--hrms-primary) !important;
}

/* ── Confirm Dialog ────────────────────────────────────────── */
vaadin-confirm-dialog-overlay::part(overlay) {
	border-radius: 12px !important;
	box-shadow: var(--hrms-shadow-lg) !important;
}

/* ── Checkbox ──────────────────────────────────────────────── */
vaadin-checkbox::part(checkbox) {
	border-radius: 4px !important;
	border-color: #d1d5db !important;
}

vaadin-checkbox[checked]::part(checkbox) {
	background: var(--hrms-primary) !important;
	border-color: var(--hrms-primary) !important;
}

/* ── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}

::-webkit-scrollbar-track {
	background: transparent;
}

::-webkit-scrollbar-thumb {
	background: #cbd5e1;
	border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
	background: #94a3b8;
}

/* ── Page content wrapper ──────────────────────────────────── */
.view-container {
	padding: 24px;
	max-width: 100%;
}

/* ── Stat cards on dashboard ───────────────────────────────── */
.stat-card {
	background: var(--hrms-surface);
	border-radius: 12px;
	padding: 20px 24px;
	box-shadow: var(--hrms-shadow-sm);
	border: 1px solid var(--hrms-border);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.stat-card:hover {
	box-shadow: var(--hrms-shadow);
	transform: translateY(-2px);
}

/* ── Section headers ───────────────────────────────────────── */
.page-title {
	font-size: 22px;
	font-weight: 700;
	color: var(--hrms-text);
	margin: 0 0 4px 0;
	letter-spacing: -0.3px;
}

.page-subtitle {
	font-size: 13.5px;
	color: var(--hrms-text-muted);
	margin: 0;
}

/* ── Status badges ─────────────────────────────────────────── */
.badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: 20px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.2px;
}

.badge-success {
	background: #dcfce7;
	color: #15803d;
}

.badge-warning {
	background: #fef9c3;
	color: #a16207;
}

.badge-danger {
	background: #fee2e2;
	color: #b91c1c;
}

.badge-info {
	background: #dbeafe;
	color: #1d4ed8;
}

.badge-neutral {
	background: #f1f5f9;
	color: #475569;
}

/* ── DARK theme start here ── */
html[theme~="dark"] {
	--hrms-primary: #4f83f1;
	--hrms-primary-light: rgba(79, 131, 241, 0.15);
	--hrms-primary-dark: #3b6de0;
	--hrms-accent: #38bdf8;
	--hrms-success: #22c55e;
	--hrms-warning: #f59e0b;
	--hrms-danger: #f87171;
	--hrms-bg: #0f172a;
	--hrms-surface: #1e293b;
	--hrms-border: #334155;
	--hrms-text: #f1f5f9;
	--hrms-text-muted: #94a3b8;
	--hrms-sidebar-bg: #0f172a;
	--hrms-sidebar-text: #94a3b8;
	--hrms-sidebar-active: #4f83f1;
	--hrms-header-bg: #1e293b;
	--hrms-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
	--hrms-shadow: 0 4px 6px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.25);
	--hrms-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5), 0 4px 10px rgba(0, 0, 0, 0.3);
	color-scheme: dark;
}

/* ── Step 2: Redefine all --lumo-* variables for dark mode ── */
/* Every Vaadin component using lumo tokens switches           */
html[theme~="dark"] {
	--lumo-base-color: #1e293b;
	--lumo-contrast-5pct: rgba(255, 255, 255, 0.05);
	--lumo-contrast-10pct: rgba(255, 255, 255, 0.10);
	--lumo-contrast-20pct: rgba(255, 255, 255, 0.20);
	--lumo-contrast-30pct: rgba(255, 255, 255, 0.30);
	--lumo-contrast-40pct: rgba(255, 255, 255, 0.40);
	--lumo-contrast-50pct: rgba(255, 255, 255, 0.50);
	--lumo-contrast-60pct: rgba(255, 255, 255, 0.60);
	--lumo-contrast-70pct: rgba(255, 255, 255, 0.70);
	--lumo-contrast-80pct: rgba(255, 255, 255, 0.80);
	--lumo-contrast-90pct: rgba(255, 255, 255, 0.90);
	--lumo-contrast: #ffffff;
	--lumo-header-text-color: #f1f5f9;
	--lumo-body-text-color: #cbd5e1;
	--lumo-secondary-text-color: #94a3b8;
	--lumo-disabled-text-color: #475569;
	--lumo-primary-color: #4f83f1;
	--lumo-primary-color-50pct: rgba(79, 131, 241, 0.5);
	--lumo-primary-color-10pct: rgba(79, 131, 241, 0.15);
	--lumo-primary-text-color: #7da4f5;
	--lumo-primary-contrast-color: #ffffff;
	--lumo-error-color: #f87171;
	--lumo-error-color-10pct: rgba(248, 113, 113, 0.15);
	--lumo-error-text-color: #fca5a5;
	--lumo-success-color: #22c55e;
	--lumo-success-color-10pct: rgba(34, 197, 94, 0.15);
	--lumo-success-text-color: #4ade80;
	--lumo-tint-5pct: rgba(255, 255, 255, 0.03);
	--lumo-tint-10pct: rgba(255, 255, 255, 0.06);
	--lumo-tint-20pct: rgba(255, 255, 255, 0.12);
	--lumo-shade-5pct: rgba(0, 0, 0, 0.20);
	--lumo-shade-10pct: rgba(0, 0, 0, 0.30);
	--lumo-shade-20pct: rgba(0, 0, 0, 0.45);
}

/* ── Step 3: Fix hardcoded colors that ignore variables ────── */
/* These selectors mirror your existing ones but scoped to     */
/* html[theme~="dark"] so they only activate in dark mode      */

/* Grid header — was hardcoded #f8fafc and #374151 */
html[theme~="dark"] vaadin-grid::part(header-cell) {
	background: #162032 !important;
	color: #cbd5e1 !important;
	border-bottom: 2px solid #334155 !important;
}

/* Grid cells — cell border was hardcoded #f1f5f9 */
html[theme~="dark"] vaadin-grid::part(cell) {
	border-bottom: 1px solid #1e293b !important;
}

/* Column separators in dark theme. */
html[theme~="dark"] vaadin-grid::part(cell),
html[theme~="dark"] vaadin-grid::part(header-cell) {
	border-right: 1px solid #1e293b !important;
}

/* Grid row hover — was hardcoded #f0f7ff */
html[theme~="dark"] vaadin-grid::part(row):hover>td,
html[theme~="dark"] vaadin-grid::part(row-focused)::part(cell) {
	background: #1e3a5f !important;
}

/* Grid even row stripe — was hardcoded #fafbfc */
html[theme~="dark"] vaadin-grid::part(row):nth-child(even)::part(cell) {
	background: #1a2744 !important;
}

/* Input fields — were hardcoded #ffffff bg and #d1d5db border */
html[theme~="dark"] vaadin-text-field::part(input-field),
html[theme~="dark"] vaadin-email-field::part(input-field),
html[theme~="dark"] vaadin-password-field::part(input-field),
html[theme~="dark"] vaadin-number-field::part(input-field),
html[theme~="dark"] vaadin-integer-field::part(input-field),
html[theme~="dark"] vaadin-text-area::part(input-field),
html[theme~="dark"] vaadin-combo-box::part(input-field),
html[theme~="dark"] vaadin-date-picker::part(input-field) {
	background: #0f172a !important;
	border: 1.5px solid #475569 !important;
	color: #f1f5f9 !important;
}

/* Input labels — were hardcoded #374151 */
html[theme~="dark"] vaadin-text-field::part(label),
html[theme~="dark"] vaadin-combo-box::part(label),
html[theme~="dark"] vaadin-date-picker::part(label) {
	color: #cbd5e1 !important;
}

/* Dialog footer — was hardcoded #f8fafc */
html[theme~="dark"] vaadin-dialog-overlay::part(footer) {
	background: #162032 !important;
}

/* Checkbox border — was hardcoded #d1d5db */
html[theme~="dark"] vaadin-checkbox::part(checkbox) {
	border-color: #475569 !important;
	background: #0f172a !important;
}

/* Scrollbar */
html[theme~="dark"] ::-webkit-scrollbar-thumb {
	background: #334155;
}

html[theme~="dark"] ::-webkit-scrollbar-thumb:hover {
	background: #475569;
}

/* Status badges — all were hardcoded colors */
html[theme~="dark"] .badge-success {
	background: rgba(34, 197, 94, 0.15);
	color: #4ade80;
}

html[theme~="dark"] .badge-warning {
	background: rgba(245, 158, 11, 0.15);
	color: #fbbf24;
}

html[theme~="dark"] .badge-danger {
	background: rgba(248, 113, 113, 0.15);
	color: #fca5a5;
}

html[theme~="dark"] .badge-info {
	background: rgba(79, 131, 241, 0.15);
	color: #7da4f5;
}

html[theme~="dark"] .badge-neutral {
	background: rgba(255, 255, 255, 0.08);
	color: #94a3b8;
}