/* Al Aseel Management System — standalone app styling
   Palette sampled directly from the Al Aseel logo (black / white /
   green / red / gray chevron mark). Typeface: Inter (loaded in
   layout.php/login.php), falling back to the system UI stack if the
   Google Fonts request is ever blocked/offline. */

:root {
	--brand-black: #0A0A0A;
	--brand-black-soft: #161616;
	--brand-white: #FFFFFF;
	--brand-green: #0E753D;
	--brand-green-dark: #0B5E31;
	--brand-green-tint: #E3F3EA;
	--brand-red: #ED2124;
	--brand-red-dark: #C81A1D;
	--brand-red-tint: #FCE4E4;
	--brand-gray: #5E605F;
	--brand-gray-light: #8A8C8B;
	--brand-gray-tint: #EDEDEC;
	--page-bg: #F4F3F2;
	--ink: #1A1A1A;
	--ink-muted: #6B6D6C;
	--border: #E2E1DF;

	--shadow-sm: 0 1px 2px rgba(10,10,10,.05), 0 1px 1px rgba(10,10,10,.04);
	--shadow-md: 0 6px 16px rgba(10,10,10,.09), 0 2px 5px rgba(10,10,10,.05);
	--shadow-lg: 0 16px 36px rgba(10,10,10,.16), 0 4px 12px rgba(10,10,10,.06);
	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-lg: 16px;
	--ease: cubic-bezier(.4,0,.2,1);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	background: var(--page-bg);
	color: var(--ink);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	animation: pageFadeIn .3s var(--ease);
}

a { color: var(--brand-green-dark); text-decoration: none; transition: color .15s var(--ease); }
a:hover { text-decoration: underline; }
a:focus-visible,
button:focus-visible {
	outline: 2px solid var(--brand-green);
	outline-offset: 2px;
	border-radius: 3px;
}

h1 { font-size: 22px; margin: 0; font-weight: 700; letter-spacing: -.01em; }
h2 {
	font-size: 16px;
	margin: 30px 0 14px;
	font-weight: 700;
	letter-spacing: -.005em;
	position: relative;
	padding-bottom: 9px;
}
h2::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 34px;
	height: 3px;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--brand-green), var(--brand-red));
}

/* Custom scrollbar (WebKit/Blink) — subtle, matches the neutral palette */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d6d4d1; border-radius: 10px; border: 2px solid var(--page-bg); }
::-webkit-scrollbar-thumb:hover { background: #c2c0bc; }

/* ---------- App shell ---------- */

.app {
	display: flex;
	min-height: 100vh;
}

.sidebar {
	width: 232px;
	background: var(--brand-black);
	color: #C9C9C8;
	display: flex;
	flex-direction: column;
	padding: 0 0 20px;
	flex-shrink: 0;
	border-top: 4px solid;
	border-image: linear-gradient(90deg, var(--brand-gray) 0 33%, var(--brand-green) 33% 66%, var(--brand-red) 66% 100%) 1;
	position: relative;
}

.sidebar .brand {
	padding: 18px 18px 16px;
	border-bottom: 1px solid rgba(255,255,255,.1);
	margin-bottom: 14px;
}

.sidebar .brand img {
	display: block;
	width: 100%;
	height: auto;
}

.sidebar .brand-text {
	color: #fff;
	font-weight: 700;
	font-size: 16px;
}

.sidebar nav {
	display: flex;
	flex-direction: column;
	gap: 1px;
	flex: 1;
	padding: 0 10px;
}

.sidebar nav a {
	color: #C9C9C8;
	padding: 10px 12px;
	font-size: 13.5px;
	font-weight: 500;
	border-radius: var(--radius-sm);
	display: flex;
	align-items: center;
	gap: 11px;
	position: relative;
	transition: background-color .16s var(--ease), color .16s var(--ease), padding-left .16s var(--ease);
}

.nav-icon { flex-shrink: 0; opacity: .78; transition: opacity .16s var(--ease); }

.sidebar nav a:hover,
.sidebar nav a.active {
	background: rgba(255,255,255,.07);
	color: #fff;
	text-decoration: none;
	padding-left: 16px;
}

.sidebar nav a:hover .nav-icon,
.sidebar nav a.active .nav-icon { opacity: 1; }

.sidebar nav a.active {
	background: linear-gradient(90deg, rgba(14,117,61,.32), rgba(14,117,61,.1));
	box-shadow: inset 3px 0 0 var(--brand-green);
}

.sidebar-footer {
	padding: 16px 20px 0;
	margin: 14px 10px 0;
	border-top: 1px solid rgba(255,255,255,.1);
	font-size: 13px;
}

.who-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }

.avatar {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--brand-green), var(--brand-green-dark));
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12.5px;
	font-weight: 700;
	flex-shrink: 0;
	box-shadow: 0 0 0 2px rgba(255,255,255,.12);
}

.sidebar-footer .who { color: #fff; line-height: 1.35; }
.role-tag {
	display: inline-block;
	margin-left: 2px;
	font-size: 9.5px;
	text-transform: uppercase;
	letter-spacing: .04em;
	padding: 1px 6px;
	border-radius: 8px;
	background: rgba(255,255,255,.15);
}
.role-tag.role-admin { background: var(--brand-green); color: #fff; }
.role-tag.role-accounts { background: var(--brand-red); color: #fff; }
.role-tag.role-operations { background: var(--brand-green-dark); color: #fff; }
.role-tag.role-sales { background: var(--brand-gray); color: #fff; }
.role-tag.role-employee { background: var(--brand-gray); color: #fff; }

.logout-link {
	color: #ED9C9D;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding-bottom: 2px;
	transition: color .15s var(--ease), gap .15s var(--ease);
}
.logout-link:hover { color: #fff; gap: 9px; text-decoration: none; }

.content {
	flex: 1;
	padding: 30px 34px;
	max-width: 1120px;
}

/* ---------- Notices ---------- */

.notice {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 14px;
	border-radius: var(--radius-sm);
	margin-bottom: 16px;
	font-size: 14px;
	box-shadow: var(--shadow-sm);
	position: relative;
	animation: noticeIn .28s var(--ease);
}
.notice-icon {
	flex-shrink: 0;
	width: 19px;
	height: 19px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 800;
	margin-top: 1px;
}
.notice-text { flex: 1; }
.notice-close {
	background: none;
	border: none;
	cursor: pointer;
	font-size: 17px;
	line-height: 1;
	color: inherit;
	opacity: .5;
	padding: 2px 4px;
	border-radius: 4px;
	transition: opacity .15s var(--ease), background-color .15s var(--ease);
	flex-shrink: 0;
}
.notice-close:hover { opacity: .9; background: rgba(0,0,0,.06); }
.notice-success { background: var(--brand-green-tint); color: var(--brand-green-dark); }
.notice-success .notice-icon { background: var(--brand-green); color: #fff; }
.notice-error { background: var(--brand-red-tint); color: var(--brand-red-dark); }
.notice-error .notice-icon { background: var(--brand-red); color: #fff; }
.notice.is-dismissing { animation: noticeOut .2s var(--ease) forwards; }

/* ---------- Page head / cards ---------- */

.page-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 18px;
	gap: 12px;
}

.cards {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin: 16px 0 26px;
}

.card {
	background: #fff;
	border: 1px solid var(--border);
	border-left: 4px solid var(--brand-green);
	border-radius: var(--radius-md);
	padding: 17px 19px;
	min-width: 170px;
	display: flex;
	flex-direction: column;
	color: inherit;
	box-shadow: var(--shadow-sm);
	transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.card:hover { text-decoration: none; border-left-color: var(--brand-green-dark); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.card-static { cursor: default; }
/* A job that cost more than it billed should be impossible to skim past. */
.card-negative { border-left-color: var(--brand-red); }
.card-negative .card-value { color: var(--brand-red-dark); }
.card-static:hover { transform: none; box-shadow: var(--shadow-sm); }
.card-value { font-size: 27px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.card-label { font-size: 12px; color: var(--ink-muted); margin-top: 4px; font-weight: 500; }

.quick-links { padding-left: 20px; }
.quick-links li { margin-bottom: 7px; }
.quick-links a { transition: padding-left .15s var(--ease); display: inline-block; }
.quick-links a:hover { padding-left: 3px; }

/* ---------- Buttons ---------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 9px 16px;
	border-radius: var(--radius-sm);
	border: 1px solid #d1d0ce;
	background: #fff;
	color: var(--ink);
	font-size: 14px;
	font-family: inherit;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	box-shadow: var(--shadow-sm);
	transition: background-color .16s var(--ease), border-color .16s var(--ease), box-shadow .16s var(--ease), transform .12s var(--ease), color .16s var(--ease);
}
.btn:hover { text-decoration: none; background: #f7f6f5; box-shadow: var(--shadow-md); transform: translateY(-1px); }
.btn:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
.btn-primary { background: var(--brand-green); border-color: var(--brand-green); color: #fff; box-shadow: 0 1px 3px rgba(14,117,61,.3); }
.btn-primary:hover { background: var(--brand-green-dark); border-color: var(--brand-green-dark); box-shadow: 0 8px 18px rgba(14,117,61,.3); }
.btn-block { width: 100%; }
.btn-hero { padding: 14px 22px; font-size: 16px; }
/* WhatsApp's own green, not the Al Aseel brand green — staff should recognise
   at a glance that this opens WhatsApp rather than doing something in-app. */
/* Stage checklist on a Service Request. Completed rows recede so the eye
   lands on the stage the job is actually sitting on. */
.stage-table td { vertical-align: middle; }
.stage-table select, .stage-table input { padding: 5px 8px; font-size: 13px; }
.stage-row.stage-done td, .stage-row.stage-skipped td { opacity: .55; }
.stage-row.stage-in_progress { background: #fffaf0; }
.stage-current { font-size: 12px; color: var(--ink-muted); margin-left: 6px; }

/* Compact horizontal form used by the invoice "add a line" row. */
.inline-form { display:flex; flex-wrap:wrap; gap:10px 14px; align-items:flex-end; margin-bottom:8px; }
.inline-form label { display:flex; flex-direction:column; gap:3px; font-size:12px; font-weight:600; color:var(--ink-muted); }
.inline-form input, .inline-form select { padding:7px 9px; font-size:13px; }

/* Change-history diff: the old value recedes, the new value stands. */
.audit-changes { font-size:12px; line-height:1.7; }
.audit-old { color:var(--ink-muted); text-decoration:line-through; }
.audit-new { color:var(--brand-green-dark); font-weight:600; }
.data-table td.num, .data-table th.num { text-align:right; white-space:nowrap; }
.pagination { margin-top:14px; display:flex; gap:10px; align-items:center; }

/* A checkbox that sits on the filter row rather than above its own label. */
.inline-form label.check-inline { flex-direction:row; align-items:center; gap:6px; padding-bottom:7px; }

/* Recording a card payment against a job. Wider fields than the filter row,
   because these carry a description and a receipt number. */
.expense-form { display:flex; flex-wrap:wrap; gap:10px 14px; align-items:flex-end; margin-top:14px; }
.expense-form label { display:flex; flex-direction:column; gap:3px; font-size:12px; font-weight:600;
	color:var(--ink-muted); flex:1 1 170px; }
.expense-form input, .expense-form select { padding:7px 9px; font-size:13px; width:100%; }
.expense-form .form-actions { margin-top:0; flex:0 0 auto; }

/* A field the receipt filled in, so it reads differently from one typed. */
.expense-form .was-autofilled { background:#F1F8F3; border-color:var(--brand-green-dark); }
.receipt-note { flex:1 1 100%; margin:2px 0 0; font-size:12.5px; }
.receipt-note.is-info { color:var(--ink-muted); }
.receipt-note.is-ok   { color:var(--brand-green-dark); font-weight:600; }
.receipt-note.is-warn { color:var(--brand-red-dark); }

/* ---------- Work Board ---------- */
.board-tabs { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 18px; }
.board-tab { padding:8px 14px; border:1px solid var(--border); border-radius:var(--radius-sm);
	background:#fff; font-size:13.5px; font-weight:600; color:var(--ink); display:inline-flex; gap:8px; align-items:center; }
.board-tab:hover { text-decoration:none; background:#f7f6f5; }
.board-tab.is-on { background:var(--brand-green); border-color:var(--brand-green); color:#fff; }
.board-count { font-size:11px; font-weight:700; background:rgba(0,0,0,.08); padding:1px 7px; border-radius:9px; }
.board-tab.is-on .board-count { background:rgba(255,255,255,.22); }
.board-table tr.row-mine { background:var(--brand-green-tint); }
.board-note { font-size:12px; max-width:280px; }

/* ---------- Handover thread ---------- */
.note-form textarea { width:100%; max-width:680px; padding:10px 12px; border:1px solid var(--border);
	border-radius:var(--radius-sm); font:inherit; font-size:13.5px; resize:vertical; }
.note-form-actions { display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin:8px 0 4px; max-width:680px; }
.note-type { font-size:13px; color:var(--ink-muted); display:inline-flex; gap:7px; align-items:center; cursor:pointer; }
.note-thread { list-style:none; padding:0; margin:16px 0 0; max-width:680px; }
.note-item { border-left:3px solid var(--border); padding:2px 0 10px 14px; margin-bottom:14px; }
/* A handover is the one note type someone MUST read before continuing. */
.note-item.is-handover { border-left-color:var(--brand-red); }
.note-meta { font-size:12.5px; display:flex; gap:9px; align-items:center; flex-wrap:wrap; margin-bottom:3px; }
.note-body { font-size:13.5px; white-space:pre-wrap; }

/* ---------- Visa workflow ---------- */
/* Warning bands: green > 30d, yellow 16-30, orange 8-15, red 1-7, dark red overdue.
   Thresholds are configurable in Settings; these are only the colours. */
.warn-pill { display:inline-block; font-size:11px; font-weight:700; padding:2px 8px; border-radius:10px; white-space:nowrap; }
.warn-green   { background:var(--brand-green-tint); color:var(--brand-green-dark); }
.warn-yellow  { background:#FDF4D5; color:#7A5B00; }
.warn-orange  { background:#FCE9D6; color:#8A4A05; }
.warn-red     { background:var(--brand-red-tint); color:var(--brand-red-dark); }
.warn-darkred { background:#7A0E10; color:#fff; }
.warn-none    { background:var(--brand-gray-tint); color:var(--ink-muted); }

.visa-stage { border:1px solid var(--border); border-left:4px solid var(--border); border-radius:var(--radius-md);
	background:#fff; margin-bottom:14px; box-shadow:var(--shadow-sm); }
.visa-stage.is-active { border-left-color:var(--brand-green); box-shadow:var(--shadow-md); }
.visa-stage.is-done   { border-left-color:var(--brand-gray-light); background:#FBFBFA; }
.visa-stage.is-na     { opacity:.5; }
.visa-stage-head { display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding:13px 16px; border-bottom:1px solid var(--border); }
.visa-stage.is-na .visa-stage-head, .visa-stage:not(.is-active):not(.is-done) .visa-stage-head { border-bottom:none; }
.visa-stage-no { width:26px; height:26px; border-radius:50%; background:var(--brand-black); color:#fff;
	display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; flex-shrink:0; }
.visa-stage.is-active .visa-stage-no { background:var(--brand-green); }
.visa-expiry { margin-left:auto; font-size:12.5px; color:var(--ink-muted); display:inline-flex; gap:7px; align-items:center; }
.visa-stage-body { padding:14px 16px; }
.visa-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px 16px; }
.visa-grid label, .visa-notes { display:flex; flex-direction:column; gap:4px; font-size:12.5px; font-weight:600; color:var(--ink-muted); }
.visa-grid input, .visa-grid select, .visa-notes textarea { padding:7px 9px; font:inherit; font-size:13.5px;
	border:1px solid var(--border); border-radius:var(--radius-sm); }
.visa-notes { margin-top:12px; max-width:640px; }
.visa-readout { display:flex; flex-wrap:wrap; gap:6px 20px; font-size:13px; }
.visa-override summary, .visa-reopen summary { cursor:pointer; font-size:12.5px; color:var(--ink-muted); margin:10px 0 6px; }

/* ---------- Global search + client view ---------- */
.sidebar-search { padding: 0 10px 12px; }
.sidebar-search input {
	width: 100%; padding: 8px 11px; font: inherit; font-size: 13px;
	border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius-sm);
	background: rgba(255,255,255,.06); color: #fff;
}
.sidebar-search input::placeholder { color: #8A8C8B; }
.sidebar-search input:focus { outline: none; border-color: var(--brand-green); background: rgba(255,255,255,.1); }

.search-results { list-style: none; padding: 0; margin: 0 0 18px; }
.search-results li { padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.search-results li:last-child { border-bottom: none; }

.client-head { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; justify-content: space-between;
	background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 16px; margin-bottom: 4px; }
.client-facts { display: flex; flex-wrap: wrap; gap: 8px 26px; font-size: 13.5px; }
.client-facts span { display: inline-flex; align-items: center; gap: 7px; }
.client-facts strong { color: var(--ink-muted); font-weight: 600; font-size: 11.5px;
	text-transform: uppercase; letter-spacing: .05em; }
.quick-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.owed { color: var(--brand-red-dark); }

/* ---------- My Day task list ---------- */
.task-list { list-style: none; padding: 0; margin: 0 0 16px; }
.task { display: flex; gap: 14px; align-items: flex-start; justify-content: space-between;
	padding: 11px 13px; border: 1px solid var(--border); border-left: 3px solid var(--border);
	border-radius: var(--radius-sm); background: #fff; margin-bottom: 8px; font-size: 13.5px; }
.task.is-mine { border-left-color: var(--brand-green); background: var(--brand-green-tint); }
.task-main { flex: 1; min-width: 0; }
.task-when { text-align: right; flex-shrink: 0; font-size: 12px; }

/* ---------- Board extras ---------- */
.board-tabs-sub { margin-top: -6px; }
.board-tabs-sub .board-tab { font-size: 12.5px; padding: 6px 12px; }
.kind-pill { display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 6px;
	border-radius: 8px; text-transform: uppercase; letter-spacing: .04em; margin-left: 5px; }
.kind-request { background: var(--brand-gray-tint); color: var(--brand-gray); }
.kind-visa { background: var(--brand-green-tint); color: var(--brand-green-dark); }
.board-advance { display: inline; }
.btn-small { padding: 5px 11px; font-size: 12.5px; }

/* ---------- "Today" button on date fields ---------- */
.date-with-today { display: inline-flex; align-items: stretch; gap: 4px; }
.today-btn { border: 1px solid var(--border); background: #fff; border-radius: var(--radius-sm);
	padding: 0 9px; font: inherit; font-size: 11.5px; font-weight: 600; color: var(--ink-muted);
	cursor: pointer; white-space: nowrap; }
.today-btn:hover { background: var(--brand-green-tint); color: var(--brand-green-dark); border-color: var(--brand-green); }

/*
 * Bigger targets on phones. Operations staff use this standing at a
 * government counter, one-handed — 44px is the smallest reliably tappable
 * target, and the default desktop sizing is well under it.
 */
@media (max-width: 768px) {
	.btn, .today-btn { min-height: 44px; padding-left: 16px; padding-right: 16px; }
	.btn-small { min-height: 40px; }
	input[type="date"], input[type="text"], input[type="number"], input[type="search"],
	input[type="tel"], input[type="email"], input[type="password"], select, textarea {
		min-height: 44px; font-size: 16px; /* 16px stops iOS zooming the page on focus */
	}
	.visa-grid { grid-template-columns: 1fr; }
	.task { flex-direction: column; gap: 6px; }
	.task-when { text-align: left; }
	.board-tab { min-height: 40px; display: inline-flex; align-items: center; }
	.date-with-today { width: 100%; }
	.date-with-today input { flex: 1; min-width: 0; }
}

/* ---------- Attachments ---------- */
.upload-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: 10px 0; }
.upload-label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--ink-muted); }
.upload-form input[type="file"] { font-size: 13px; padding: 6px; border: 1px dashed var(--border);
	border-radius: var(--radius-sm); background: #fff; max-width: 100%; }
.file-list { list-style: none; padding: 0; margin: 8px 0 14px; }
.file-list li { padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 13px;
	display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.file-list li:last-child { border-bottom: none; }
.file-del { display: inline; margin-left: auto; }
.link-danger { background: none; border: none; padding: 0; font: inherit; font-size: 12px;
	color: var(--brand-red-dark); cursor: pointer; text-decoration: underline; }
/* The per-checklist-item attach control: a styled label driving a hidden input. */
.attach-link { position: relative; display: inline-block; cursor: pointer; }
.attach-link input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.attach-link span { font-size: 12px; color: var(--brand-green-dark); text-decoration: underline; }

.btn-whatsapp { background: #25d366; border-color: #25d366; color: #fff; padding: 6px 12px; font-size: 13px; box-shadow: 0 1px 3px rgba(37,211,102,.3); }
.btn-whatsapp:hover { background: #1da851; border-color: #1da851; color: #fff; box-shadow: 0 8px 18px rgba(37,211,102,.3); }

.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 15px;
	height: 15px;
	margin: -8px 0 0 -8px;
	border: 2px solid rgba(10,10,10,.2);
	border-top-color: var(--brand-black);
	border-radius: 50%;
	animation: spin .6s linear infinite;
}
.btn-primary.is-loading::after { border-color: rgba(255,255,255,.35); border-top-color: #fff; }

/* ---------- Tables ---------- */

.table-wrap { overflow-x: auto; border-radius: var(--radius-md); }

.data-table {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
}

.data-table th, .data-table td {
	text-align: left;
	padding: 11px 14px;
	font-size: 14px;
	border-bottom: 1px solid #eeece9;
}

.data-table th {
	background: #faf9f8;
	font-weight: 700;
	font-size: 12.5px;
	text-transform: uppercase;
	letter-spacing: .02em;
	color: var(--ink-muted);
	position: sticky;
	top: 0;
	z-index: 1;
}
.data-table tbody tr { transition: background-color .12s var(--ease); }
.data-table tbody tr:hover { background: #faf9f7; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table .empty-row { color: #9c9a97; text-align: center; padding: 30px; }
.actions-col { white-space: nowrap; width: 1%; }
.actions-col a { transition: opacity .15s var(--ease); }
.actions-col a:hover { opacity: .75; }
.danger { color: var(--brand-red-dark); }

.search-form { margin-bottom: 14px; display: flex; gap: 8px; }
.search-form input[type="search"] {
	padding: 8px 12px;
	border: 1px solid #d1d0ce;
	border-radius: var(--radius-sm);
	min-width: 240px;
	font-family: inherit;
	font-size: 14px;
	background: #fff;
	transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.search-form input[type="search"]:focus {
	outline: none;
	border-color: var(--brand-green);
	box-shadow: 0 0 0 3px var(--brand-green-tint);
}

.pagination { margin-top: 16px; font-size: 13px; }
.pagination a {
	display: inline-block;
	padding: 5px 10px;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	margin-right: 4px;
	font-weight: 500;
	background: #fff;
	transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.pagination a:hover { background: var(--brand-gray-tint); text-decoration: none; }
.pagination a.current { background: var(--brand-green); color: #fff; border-color: var(--brand-green); }
.pagination-total { color: var(--ink-muted); margin-right: 6px; }

/* ---------- Badges ---------- */

.badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 11px;
	border-radius: 20px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .01em;
	text-transform: capitalize;
	background: var(--brand-gray-tint);
	color: var(--brand-gray);
	white-space: nowrap;
}
.badge-active, .badge-present, .badge-paid, .badge-completed { background: var(--brand-green-tint); color: var(--brand-green-dark); }
.badge-inactive, .badge-absent, .badge-cancelled, .badge-unpaid { background: var(--brand-red-tint); color: var(--brand-red-dark); }
.badge-pending, .badge-partial, .badge-late, .badge-leave, .badge-in_progress { background: var(--brand-gray-tint); color: var(--brand-gray); }

/* Gentle attention pulse — scoped to the "Expired document" badge only,
   not every red/gray badge in the app, so it doesn't look like a glitch
   on unrelated statuses like "Cancelled" or "Unpaid". */
@media (prefers-reduced-motion: no-preference) {
	.badge-expired { animation: badgePulse 2.4s ease-in-out infinite; }
}

/* ---------- Forms ---------- */

.crud-form {
	max-width: 640px;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	padding: 24px;
	box-shadow: var(--shadow-sm);
}
.form-row { margin-bottom: 17px; }
.form-row label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--ink); }
.form-row input, .form-row select, .form-row textarea {
	width: 100%;
	padding: 9px 11px;
	border: 1px solid #d1d0ce;
	border-radius: var(--radius-sm);
	font-size: 14px;
	font-family: inherit;
	background: #fff;
	color: var(--ink);
	transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.form-row input:hover, .form-row select:hover, .form-row textarea:hover { border-color: #b9b7b4; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
	outline: none;
	border-color: var(--brand-green);
	box-shadow: 0 0 0 3px var(--brand-green-tint);
}
.form-row select { cursor: pointer; }
.field-help { font-size: 12px; color: var(--ink-muted); margin-top: 5px; line-height: 1.45; }
.form-actions { margin-top: 20px; display: flex; gap: 10px; }

.gps-fill { margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px dashed var(--border); }
.gps-fill .field-help { margin-top: 8px; }

/* File inputs — styled to match the rest of the form instead of the
   raw, inconsistent browser default. */
input[type="file"] {
	padding: 9px 11px;
	border: 1px dashed #cac8c5;
	border-radius: var(--radius-sm);
	background: #fafaf9;
	cursor: pointer;
	font-size: 13px;
	transition: border-color .15s var(--ease), background-color .15s var(--ease);
}
input[type="file"]:hover { border-color: var(--brand-green); background: #f7fbf8; }
input[type="file"]::file-selector-button {
	margin-right: 12px;
	padding: 7px 13px;
	border-radius: var(--radius-sm);
	border: 1px solid #d1d0ce;
	background: #fff;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color .15s var(--ease);
}
input[type="file"]::file-selector-button:hover { background: var(--brand-gray-tint); }

/* ---------- Clock widget ---------- */

.clock-widget {
	background: #fff;
	border: 1px solid var(--border);
	border-left: 4px solid var(--brand-green);
	border-radius: var(--radius-md);
	padding: 22px;
	margin: 12px 0 24px;
	max-width: 460px;
	box-shadow: var(--shadow-sm);
}
.clock-widget h2 { margin-top: 0; }
.clock-log-note { display: inline-block; margin-top: 2px; font-size: 13px; color: var(--ink-muted); }

.clock-form { margin-top: 4px; }
.clock-selfie-preview {
	width: 84px;
	height: 84px;
	margin: 4px 0 14px;
	border-radius: 50%;
	overflow: hidden;
	border: 2px solid var(--brand-green);
	box-shadow: var(--shadow-sm);
}
.clock-selfie-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.clock-status-line {
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 600;
	color: var(--ink-muted);
}

/* ---------- Bar chart (reports) ---------- */

.bar-chart {
	display: flex;
	align-items: flex-end;
	gap: 16px;
	height: 190px;
	margin: 16px 0 30px;
	max-width: 480px;
}
.bar-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; flex: 1; height: 100%; }
.bar {
	width: 26px;
	background: linear-gradient(180deg, var(--brand-green), var(--brand-green-dark));
	border-radius: 4px 4px 0 0;
	transition: transform .18s var(--ease), filter .18s var(--ease);
	transform-origin: bottom;
}
.bar-col:hover .bar { filter: brightness(1.08); transform: scaleX(1.08); }
.bar-value { font-size: 11px; color: var(--ink-muted); margin-top: 4px; font-variant-numeric: tabular-nums; }
.bar-label { font-size: 12px; margin-top: 2px; font-weight: 500; }

/* ---------- Login page ---------- */

.login-body {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	background:
		radial-gradient(circle at 20% 15%, rgba(14,117,61,.16), transparent 45%),
		radial-gradient(circle at 85% 85%, rgba(237,33,36,.10), transparent 45%),
		var(--brand-black);
	padding: 32px 24px;
}

/* The rounded two-panel "shell" is the whole login card: a dark brand
   panel on the left (logo + a quick pitch of what the system does) and
   a plain white sign-in panel on the right. On narrow screens these
   stack instead — see the 860px media query below. */
.login-shell {
	display: flex;
	width: 100%;
	max-width: 900px;
	min-height: 540px;
	border-radius: 22px;
	overflow: hidden;
	box-shadow: var(--shadow-lg);
	animation: loginIn .5s var(--ease) both;
}

.login-panel-brand {
	position: relative;
	flex: 1 1 44%;
	background: var(--brand-black-soft);
	color: #fff;
	padding: 44px 40px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 30px;
	overflow: hidden;
}
.login-brand-glow {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 14% 10%, rgba(14,117,61,.38), transparent 45%),
		radial-gradient(circle at 92% 90%, rgba(237,33,36,.32), transparent 50%),
		radial-gradient(circle at 85% 8%, rgba(94,96,95,.28), transparent 40%);
	pointer-events: none;
}
.login-brand-logo {
	position: relative;
	width: 100%;
	max-width: 230px;
	height: auto;
	display: block;
}
.login-brand-copy { position: relative; }
.login-brand-copy h2 {
	font-size: 21px;
	line-height: 1.35;
	font-weight: 700;
	letter-spacing: -.01em;
	margin: 0 0 10px;
}
.login-brand-copy p {
	font-size: 13.5px;
	line-height: 1.6;
	color: rgba(255,255,255,.6);
	margin: 0;
	max-width: 32ch;
}
.login-brand-points {
	list-style: none;
	margin: 24px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.login-brand-points li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	color: rgba(255,255,255,.82);
}
.login-brand-check {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--brand-green), var(--brand-green-dark));
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

.login-panel-form {
	flex: 1 1 56%;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 44px 40px;
}
.login-box { width: 100%; max-width: 340px; }
.login-box h1 { font-size: 22px; margin-bottom: 26px; letter-spacing: -.01em; }

.login-form label { display: block; font-size: 13px; font-weight: 600; margin: 16px 0 6px; }
.login-form label:first-of-type { margin-top: 0; }

.login-field { position: relative; }
.login-field-icon {
	position: absolute;
	left: 13px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--brand-gray-light);
	pointer-events: none;
}
.login-form input {
	width: 100%;
	padding: 11px 13px 11px 38px;
	border: 1px solid #d1d0ce;
	border-radius: var(--radius-sm);
	font-size: 14px;
	font-family: inherit;
	transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.login-form input:focus {
	outline: none;
	border-color: var(--brand-green);
	box-shadow: 0 0 0 3px var(--brand-green-tint);
}
#password { padding-right: 38px; }
.login-field-toggle {
	position: absolute;
	right: 5px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border: none;
	background: transparent;
	color: var(--brand-gray-light);
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: color .15s var(--ease), background .15s var(--ease);
}
.login-field-toggle:hover { color: var(--brand-gray); background: var(--brand-gray-tint); }

.login-form button[type="submit"] {
	margin-top: 22px;
	transition: transform .15s var(--ease), background .15s var(--ease), box-shadow .15s var(--ease);
}
.login-form button[type="submit"]:hover { transform: translateY(-1px); }
.login-form button[type="submit"]:active { transform: translateY(0); }

/* ---------- Mobile topbar + off-canvas sidebar (hidden on desktop) ---------- */

.mobile-topbar {
	display: none;
	align-items: center;
	gap: 12px;
	position: sticky;
	top: 0;
	z-index: 800;
	height: 52px;
	padding: 0 14px;
	background: var(--brand-black);
	color: #fff;
	border-bottom: 3px solid;
	border-image: linear-gradient(90deg, var(--brand-gray) 0 33%, var(--brand-green) 33% 66%, var(--brand-red) 66% 100%) 1;
}
.mobile-topbar-title { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.menu-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	width: 40px;
	height: 40px;
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
	flex-shrink: 0;
}
.menu-toggle span { display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px; transition: transform .2s var(--ease), opacity .2s var(--ease); }
body.sidebar-open .menu-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.sidebar-open .menu-toggle span:nth-child(2) { opacity: 0; }
body.sidebar-open .menu-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.sidebar-close {
	display: none;
	position: absolute;
	top: 10px;
	right: 12px;
	width: 32px;
	height: 32px;
	border: none;
	background: rgba(255,255,255,.08);
	color: #fff;
	border-radius: var(--radius-sm);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	transition: background-color .15s var(--ease);
}
.sidebar-close:hover { background: rgba(255,255,255,.18); }

.sidebar-backdrop {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.5);
	z-index: 999;
	backdrop-filter: blur(1px);
}

/* ---------- Responsive breakpoint ---------- */

@media (max-width: 860px) {
	body { overflow-x: hidden; }

	.mobile-topbar,
	.menu-toggle {
		display: flex;
	}

	.app {
		display: block;
	}

	.sidebar {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		width: 264px;
		max-width: 82vw;
		transform: translateX(-100%);
		transition: transform .28s var(--ease);
		z-index: 1000;
		overflow-y: auto;
		padding-top: 44px;
		box-shadow: var(--shadow-lg);
	}
	.sidebar-close { display: block; }

	body.sidebar-open .sidebar { transform: translateX(0); }
	body.sidebar-open .sidebar-backdrop { display: block; }

	.content {
		max-width: 100%;
		padding: 18px 16px 40px;
	}

	/* Touch-friendly tap targets */
	.sidebar nav a { padding: 13px 14px; font-size: 15px; }
	.sidebar nav a:hover, .sidebar nav a.active { padding-left: 16px; }
	.btn { padding: 11px 16px; font-size: 15px; }
	a.danger, .actions-col a { display: inline-block; padding: 4px 2px; }

	/* Stack page headers instead of squeezing the button next to the title */
	.page-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}
	.page-head .btn { align-self: stretch; text-align: center; }

	/* Cards: two per row instead of a tight horizontal strip */
	.cards { gap: 10px; }
	.card { min-width: 0; flex: 1 1 calc(50% - 10px); padding: 14px; }
	.card:hover { transform: none; }
	.card-value { font-size: 22px; }

	/* Search box: full width instead of a fixed min-width that can overflow */
	.search-form input[type="search"] { flex: 1; min-width: 0; }

	/* Forms: 16px inputs stop iOS Safari from auto-zooming on focus */
	.form-row input, .form-row select, .form-row textarea,
	.login-form input {
		font-size: 16px;
	}
	.crud-form { padding: 16px; max-width: 100%; }
	.form-actions { flex-wrap: wrap; }
	.form-actions .btn { flex: 1; text-align: center; }

	.clock-widget { max-width: 100%; }
	.clock-widget .btn-hero { width: 100%; }

	.bar-chart { max-width: 100%; overflow-x: auto; padding-bottom: 4px; }

	/* Stack the two login panels instead of squeezing them side by side —
	   the brand panel collapses to a compact header (logo only, the
	   pitch copy/points are desktop-only flourish) and the form panel
	   takes the rest of the screen. */
	.login-body { padding: 0; align-items: stretch; }
	.login-shell {
		flex-direction: column;
		max-width: 480px;
		min-height: 100vh;
		border-radius: 0;
		box-shadow: none;
	}
	.login-panel-brand {
		flex: 0 0 auto;
		padding: 36px 28px 30px;
		align-items: center;
		text-align: center;
		gap: 0;
	}
	.login-brand-logo { max-width: 200px; margin: 0 auto; }
	.login-brand-copy { display: none; }
	.login-panel-form { flex: 1 1 auto; padding: 32px 24px 44px; }

	/* ---- Tables become stacked "cards" instead of a sideways scroll ---- */
	.table-wrap { overflow-x: visible; }
	.data-table thead { display: none; }
	.data-table, .data-table tbody, .data-table tr, .data-table td { display: block; width: 100%; }
	.data-table {
		border: none;
		background: transparent;
		box-shadow: none;
	}
	.data-table tr {
		background: #fff;
		border: 1px solid var(--border);
		border-radius: var(--radius-md);
		margin-bottom: 10px;
		padding: 4px 0;
		box-shadow: var(--shadow-sm);
	}
	.data-table td {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 14px;
		text-align: right;
		padding: 9px 12px;
		border-bottom: 1px solid #f1f0ee;
	}
	.data-table tr td:last-child { border-bottom: none; }
	.data-table td::before {
		content: attr(data-label);
		font-weight: 600;
		font-size: 12px;
		color: var(--ink-muted);
		text-align: left;
		flex-shrink: 0;
	}
	.data-table td:empty::before { content: none; }

	/* Actions cells can hold several links (Edit · New Request · Delete...)
	   — too many to fit on one right-aligned line on a phone. Stack the
	   label above and let the links wrap naturally instead of overflowing
	   off the edge of the screen. */
	.data-table td.actions-col {
		display: block;
		text-align: left;
	}
	.data-table td.actions-col::before {
		content: attr(data-label);
		display: block;
		margin-bottom: 6px;
	}

	.data-table td.empty-row {
		display: block;
		text-align: center;
		padding: 24px 12px;
	}
	.data-table td.empty-row::before { content: none; }
	.data-table td.actions-col { justify-content: flex-end; }
}

@media (max-width: 380px) {
	.card { flex: 1 1 100%; }
}

/* ---------- Motion ---------- */

@keyframes pageFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes noticeIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes noticeOut { to { opacity: 0; transform: translateY(-6px); max-height: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; } }
@keyframes loginIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes badgePulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(237,33,36,.28); }
	50% { box-shadow: 0 0 0 5px rgba(237,33,36,0); }
}

/* Respect the user's OS-level motion preference: keep every interaction
   functional, just remove the animated flourish. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}