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

:root {
	/* Dark Mode */
	--bg:            #121212;
	--surface:       #242529;
	--surface-2:     #2a2b30;
	--surface-3:     #35363c;
	--border:        transparent; /* Removed borders */
	--border-2:      #4a4b50;
	
	--text:          #ffffff;
	--text-2:        #a0a0a0;
	--text-3:        #737373;
	
	--brand:         #4a80f5;
	--brand-h:       #3b6be0;
	--brand-dim:     rgba(74, 128, 245, 0.15);
	
	--teal:          #14b8a6;
	--green:         #28c76f;
	--green-dim:     rgba(40, 199, 111, 0.15);
	--amber:         #ff9f43;
	--amber-dim:     rgba(255, 159, 67, 0.15);
	--red:           #ea5455;
	--red-dim:       rgba(234, 84, 85, 0.15);
	
	--radius-sm:     8px;
	--radius:        14px;
	--radius-lg:     20px;
	--radius-xl:     24px;
	
	--shadow:        0 12px 32px rgba(0,0,0,0.3); /* Soft shadow */
	--shadow-sm:     0 4px 12px rgba(0,0,0,0.2);
	
	/* Mesh Gradients */
	--mesh-1:        radial-gradient(circle at 15% 50%, rgba(74, 128, 245, 0.08), transparent 40%);
	--mesh-2:        radial-gradient(circle at 85% 30%, rgba(40, 199, 111, 0.05), transparent 40%);
	--mesh-3:        radial-gradient(circle at 50% 100%, rgba(234, 84, 85, 0.05), transparent 40%);
	
	--font:          'Inter', sans-serif;
	--font-display:  'Space Grotesk', sans-serif;
}

html[data-theme="light"] {
	/* Light Mode */
	--bg:            #f8f9fb;
	--surface:       #ffffff;
	--surface-2:     #f1f3f6;
	--surface-3:     #e4e7ec;
	--border:        transparent;
	--border-2:      #caced4;
	
	--text:          #242529;
	--text-2:        #5e626d;
	--text-3:        #8c92a0;
	
	--brand:         #4a80f5;
	--brand-h:       #3b6be0;
	--brand-dim:     rgba(74, 128, 245, 0.1);
	
	--teal:          #14b8a6;
	--green:         #28c76f;
	--green-dim:     rgba(40, 199, 111, 0.1);
	--amber:         #ff9f43;
	--amber-dim:     rgba(255, 159, 67, 0.1);
	--red:           #ea5455;
	--red-dim:       rgba(234, 84, 85, 0.1);
	
	--shadow:        0 12px 32px rgba(0,0,0,0.06);
	--shadow-sm:     0 4px 12px rgba(0,0,0,0.04);
	
	--mesh-1:        radial-gradient(circle at 15% 50%, rgba(74, 128, 245, 0.05), transparent 40%);
	--mesh-2:        radial-gradient(circle at 85% 30%, rgba(40, 199, 111, 0.04), transparent 40%);
	--mesh-3:        radial-gradient(circle at 50% 100%, rgba(234, 84, 85, 0.03), transparent 40%);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; }
body {
	font-family: var(--font);
	font-size: 14px;
	line-height: 1.6;
	color: var(--text);
	background-color: var(--bg);
	background-image: var(--mesh-1), var(--mesh-2), var(--mesh-3);
	background-attachment: fixed;
	min-height: 100%;
	transition: background-color 0.2s, color 0.2s;
}

a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; transition: all 0.2s ease; }
input, textarea { outline: none; }

/* ── Shell & Main layout ──────────────────────────── */
.shell {
	width: min(1200px, calc(100% - 32px));
	margin: 0 auto;
	padding: 24px 0 60px;
}

.topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 28px;
	padding: 16px 24px;
	background: var(--surface);
	border: 0;
	box-shadow: var(--shadow);
	border-radius: var(--radius-lg);
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 36px; height: 36px; border-radius: 10px; background: var(--brand); display: grid; place-items: center; box-shadow: var(--shadow-sm); }
.brand-mark::after { content: ''; width: 14px; height: 14px; border-radius: 4px; border: 2.5px solid #fff; }
.brand-title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; letter-spacing: -.02em; }
.brand-subtitle { font-size: .8rem; color: var(--text-2); margin-top: 2px; }

.toolbar-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ── Bento Grid ───────────────────────────────────── */
.bento-grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 20px;
}

.bento-card {
	background: var(--surface);
	border: 0;
	box-shadow: var(--shadow);
	border-radius: var(--radius-xl);
	padding: 24px;
	position: relative;
	display: flex;
	flex-direction: column;
}

.bento-card.blue-card {
	background: var(--brand);
	box-shadow: 0 12px 32px rgba(74, 128, 245, 0.4);
	color: #ffffff;
}
.bento-card.blue-card .text-muted { color: rgba(255,255,255,0.8); }

.span-4 { grid-column: span 4; }
.span-6 { grid-column: span 6; }
.span-8 { grid-column: span 8; }
.span-12 { grid-column: span 12; }

@media (max-width: 980px) {
	.span-4, .span-6, .span-8 { grid-column: span 12; }
}

.card-title {
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--text-2);
	margin-bottom: 12px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.card-value {
	font-family: var(--font-display);
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1.1;
}
.card-subtitle {
	font-size: 0.85rem;
	color: var(--text-3);
	margin-top: 8px;
}

/* ── Date Picker ──────────────────────────────────── */
.date-display {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 10px 18px;
	border-radius: var(--radius);
	background: var(--brand);
	color: #fff;
	box-shadow: 0 6px 16px rgba(74, 128, 245, 0.3);
	cursor: pointer;
	font-weight: 600;
	font-size: .9rem;
	transition: transform 0.2s, box-shadow 0.2s;
}
.date-display:hover { 
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(74, 128, 245, 0.4);
}
.date-icon { color: #fff; flex-shrink: 0; }

/* ── Status pill ──────────────────────────────────── */
.status-pill {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 14px;
	border-radius: 999px;
	background: var(--surface-2);
	font-size: .85rem;
	font-weight: 500;
	color: var(--text-2);
}
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); flex-shrink: 0; }
.alert-pill { background: var(--red-dim); color: var(--red); }
.alert-dot  { background: var(--red); box-shadow: 0 0 8px var(--red); animation: pulse 1.5s infinite; }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.5;} }

/* ── Buttons ──────────────────────────────────────── */
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 18px;
	border-radius: var(--radius);
	font-weight: 600;
	font-size: .88rem;
}
.button:hover { transform: translateY(-1px); }

.button.primary { background: var(--brand); color: #fff; box-shadow: var(--shadow-sm); }
.button.primary:hover { background: var(--brand-h); box-shadow: 0 6px 16px rgba(74, 128, 245, 0.4); }

.button.ghost { background: var(--surface-2); color: var(--text); }
.button.ghost:hover { background: var(--surface-3); }

.button.danger { background: var(--red-dim); color: var(--red); }
.button.danger:hover { background: rgba(234,84,85,.2); }

.button.small { padding: 8px 14px; font-size: .82rem; }
.button.icon-only { padding: 10px; border-radius: 50%; }

/* ── Lists & Lines ────────────────────────────────── */
.list-line {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding: 12px 0;
	border-bottom: 1px solid var(--surface-3);
}
.list-line:last-child { border-bottom: none; }
.list-label { font-size: .8rem; color: var(--text-2); margin-bottom: 4px; }
.list-value { font-weight: 600; font-size: .92rem; }

/* ── Hero / Profile Top ───────────────────────────── */
.hero-worker {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 24px;
	background: var(--surface);
	border: 0;
	box-shadow: var(--shadow);
	border-radius: var(--radius-xl);
	padding: 28px;
}
.hero-headline { font-family: var(--font-display); font-size: 2rem; font-weight: 700; margin-bottom: 4px; }

/* ── Notices ──────────────────────────────────────── */
.notice {
	padding: 12px 16px;
	border-radius: var(--radius-sm);
	background: var(--brand-dim);
	color: var(--brand);
	font-size: .85rem;
}

/* ── Custom calendar (legacy support) ─────────────── */
.cal-overlay {
	position: fixed; inset: 0; background: rgba(0,0,0,.6);
	display: flex; align-items: center; justify-content: center; z-index: 9999;
	backdrop-filter: blur(4px);
}
.custom-calendar {
	width: 300px; background: var(--surface); border: 0;
	box-shadow: 0 24px 60px rgba(0,0,0,0.5);
	border-radius: var(--radius-lg); padding: 20px;
}
.cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.cal-title { font-family: var(--font-display); font-weight: 700; font-size: 1rem; }
.cal-nav { display: flex; gap: 4px; }
.cal-nav button { width: 30px; height: 30px; border-radius: 8px; background: var(--surface-2); display: grid; place-items: center; }
.cal-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 4px; }
.cal-weekday { font-size: .7rem; font-weight: 600; color: var(--text-3); text-align: center; padding: 4px 0; }
.cal-day { aspect-ratio: 1; display: grid; place-items: center; border-radius: 8px; font-size: .85rem; cursor: pointer; }
.cal-day:hover:not(.other) { background: var(--surface-2); }
.cal-day.other { opacity: .3; }
.cal-day.selected { background: var(--brand); color: #fff; box-shadow: var(--shadow-sm); }

/* ── Modals & Inputs ──────────────────────────────── */
.form-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.form-field label { font-size: .85rem; font-weight: 500; color: var(--text-2); }
.form-field input, .form-field textarea {
	padding: 12px 16px; background: var(--surface-2);
	border: 0; border-radius: var(--radius);
	color: var(--text);
}
.form-field input:focus { box-shadow: 0 0 0 2px var(--brand); }

/* KPI Trends */
.kpi-trend { font-size: 0.8rem; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.kpi-trend.up { color: var(--green); }
.kpi-trend.down { color: var(--red); }