/**
 * QuanLyVe dashboard styles. Design ported from the prototype.
 */

:root {
	--qlv-bg: #F4F6F9;
	--qlv-primary: #2F5FE0;
	--qlv-ink: #14181F;
	--qlv-muted: #6B7280;
	--qlv-faint: #9CA3AF;
	--qlv-border: #E2E5EA;
	--qlv-line: #EEF0F3;
	--qlv-input-border: #D5D9E0;
	--qlv-sidebar: #151B2B;
}

* { box-sizing: border-box; }

body.qlv-body {
	margin: 0;
	background: var(--qlv-bg);
	color: var(--qlv-ink);
	font-family: "Be Vietnam Pro", -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}

body.qlv-body input,
body.qlv-body select,
body.qlv-body textarea,
body.qlv-body button { font-family: inherit; }

body.qlv-body ::placeholder { color: var(--qlv-faint); }

/* -------------------------------------------------------------- Login */
.qlv-login-wrap {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
.qlv-login-card {
	width: 100%;
	max-width: 400px;
	background: #fff;
	border: 1px solid var(--qlv-border);
	border-radius: 14px;
	padding: 40px 36px;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}
.qlv-login-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	margin-bottom: 28px;
}
.qlv-login-logo {
	width: 48px; height: 48px;
	border-radius: 12px;
	background: var(--qlv-primary);
	display: flex; align-items: center; justify-content: center;
	color: #fff; font-size: 20px;
}
.qlv-login-title { font-size: 20px; font-weight: 700; margin-top: 8px; }
.qlv-login-sub { font-size: 13px; color: var(--qlv-muted); }
.qlv-login-form { display: flex; flex-direction: column; gap: 14px; }
.qlv-field-label { display: block; font-size: 12px; color: #374151; font-weight: 600; margin-bottom: 6px; }
.qlv-input {
	width: 100%;
	padding: 11px 12px;
	border: 1px solid var(--qlv-input-border);
	border-radius: 8px;
	font-size: 14px;
	color: var(--qlv-ink);
	outline: none;
}
.qlv-input:focus { border-color: var(--qlv-primary); }
.qlv-login-error {
	font-size: 12px; color: #DC2626;
	background: #FEF2F2; border: 1px solid #FCA5A5;
	border-radius: 8px; padding: 8px 10px;
}
.qlv-login-btn {
	margin-top: 6px; width: 100%; padding: 12px;
	border: none; border-radius: 8px;
	background: var(--qlv-primary); color: #fff;
	font-size: 14px; font-weight: 600; cursor: pointer;
}
.qlv-login-demo {
	margin-top: 22px; padding-top: 16px;
	border-top: 1px solid var(--qlv-line);
	font-size: 11.5px; color: var(--qlv-faint); line-height: 1.6;
}

/* -------------------------------------------------------------- Boot */
.qlv-boot {
	min-height: 100vh;
	display: flex; align-items: center; justify-content: center; gap: 10px;
	color: var(--qlv-muted); font-size: 14px;
}

/* -------------------------------------------------------------- Shell */
.qlv-shell { min-height: 100vh; display: flex; }
.qlv-sidebar {
	width: 232px; flex-shrink: 0;
	background: var(--qlv-sidebar);
	min-height: 100vh;
	padding: 20px 14px;
	display: flex; flex-direction: column; gap: 4px;
}
.qlv-brand {
	display: flex; align-items: center; gap: 10px;
	padding: 6px 8px 22px 8px;
}
.qlv-brand-logo {
	width: 32px; height: 32px; border-radius: 9px;
	background: var(--qlv-primary);
	display: flex; align-items: center; justify-content: center;
	color: #fff; font-size: 14px; flex-shrink: 0;
}
.qlv-brand-name { font-size: 15px; font-weight: 700; color: #fff; }
.qlv-nav {
	display: flex; align-items: center; gap: 10px;
	padding: 10px 12px; border-radius: 8px; cursor: pointer;
	color: #AEB6C9;
}
.qlv-nav i { width: 16px; text-align: center; font-size: 14px; }
.qlv-nav span { font-size: 13.5px; font-weight: 600; }
.qlv-nav:hover { color: #fff; }
.qlv-nav.is-active { background: var(--qlv-primary); color: #fff; }
.qlv-nav-spacer { flex: 1; }
.qlv-user {
	border-top: 1px solid #262E42; padding-top: 14px; padding-left: 8px;
	display: flex; align-items: center; gap: 10px;
}
.qlv-user-avatar {
	width: 32px; height: 32px; border-radius: 50%;
	background: #2A3350; color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-size: 13px; font-weight: 700; flex-shrink: 0;
}
.qlv-user-meta { flex: 1; min-width: 0; }
.qlv-user-name { font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qlv-user-role { font-size: 11px; color: #8991A6; }
.qlv-logout { font-size: 13px; color: #8991A6; cursor: pointer; padding: 4px; flex-shrink: 0; }
.qlv-logout:hover { color: #fff; }

.qlv-main {
	flex: 1; min-width: 0;
	padding: 28px 32px;
	max-height: 100vh; overflow-y: auto;
}

/* -------------------------------------------------------------- Headings */
.qlv-h1 { font-size: 22px; font-weight: 700; margin: 0 0 2px; }
.qlv-sub { font-size: 13.5px; color: var(--qlv-muted); margin-bottom: 22px; }
.qlv-page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.qlv-section-label {
	font-size: 12.5px; font-weight: 700; color: var(--qlv-muted);
	text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 10px;
}

/* -------------------------------------------------------------- KPI */
.qlv-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 26px; }
.qlv-kpi {
	background: #fff; border: 1px solid var(--qlv-border);
	border-radius: 12px; padding: 18px 20px;
}
.qlv-kpi-label { font-size: 12.5px; color: var(--qlv-muted); font-weight: 600; margin-bottom: 8px; }
.qlv-kpi-value { font-size: 26px; font-weight: 700; }

/* -------------------------------------------------------------- Cards */
.qlv-card { background: #fff; border: 1px solid var(--qlv-border); border-radius: 12px; overflow: hidden; }
.qlv-card-head { padding: 16px 20px; border-bottom: 1px solid var(--qlv-line); font-size: 14.5px; font-weight: 700; }
.qlv-recent-row {
	padding: 14px 20px; border-bottom: 1px solid #F3F4F6;
	display: flex; align-items: center; gap: 14px;
}
.qlv-recent-row:last-child { border-bottom: none; }
.qlv-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.qlv-recent-name { width: 150px; flex-shrink: 0; }
.qlv-strong { font-size: 13.5px; font-weight: 600; }
.qlv-phone { font-size: 12px; color: var(--qlv-faint); }
.qlv-recent-mid { flex: 1; font-size: 13px; color: #374151; }

.qlv-badge {
	font-size: 12px; font-weight: 600; padding: 4px 10px;
	border-radius: 100px; white-space: nowrap;
}

/* -------------------------------------------------------------- Booking */
.qlv-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.qlv-mb-24 { margin-bottom: 24px; }
.qlv-route-card {
	position: relative;
	padding: 16px; border-radius: 10px; cursor: pointer;
	border: 1.5px solid var(--qlv-border); background: #fff; color: var(--qlv-ink);
}
.qlv-route-card.is-active { border-color: var(--qlv-primary); background: #EEF2FF; color: var(--qlv-primary); }
.qlv-route-del {
	position: absolute; top: 6px; right: 8px;
	width: 20px; height: 20px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-size: 15px; line-height: 1; color: var(--qlv-faint);
	opacity: 0; transition: opacity .12s;
}
.qlv-route-card:hover .qlv-route-del { opacity: 1; }
.qlv-route-del:hover { background: #FEF2F2; color: #DC2626; }

/* Section header with an inline action + quick-add form */
.qlv-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.qlv-btn-sm {
	padding: 7px 13px; border: 1px solid var(--qlv-input-border); border-radius: 8px;
	background: #fff; color: #374151; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.qlv-btn-sm i { margin-right: 5px; font-size: 11px; }
.qlv-btn-sm:hover { border-color: var(--qlv-primary); color: var(--qlv-primary); }
.qlv-inline-form {
	display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
	background: #fff; border: 1px solid var(--qlv-border); border-radius: 10px;
	padding: 12px 14px; margin-bottom: 16px;
}
.qlv-inline-form .qlv-form-input { flex: 1; min-width: 220px; }
.qlv-route-name { font-size: 14px; font-weight: 700; }
.qlv-route-sub { font-size: 12px; opacity: 0.75; margin-top: 3px; }
.qlv-pill-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
.qlv-pill {
	padding: 9px 16px; border-radius: 100px; cursor: pointer;
	font-size: 13.5px; font-weight: 600;
	border: 1.5px solid var(--qlv-input-border); background: #fff; color: #374151;
}
.qlv-pill.is-active { border-color: var(--qlv-primary); background: var(--qlv-primary); color: #fff; }
.qlv-trip-card {
	padding: 16px; border-radius: 10px; text-align: center;
	border: 1.5px solid var(--qlv-border); background: #fff; color: var(--qlv-ink); cursor: pointer;
}
.qlv-trip-card.is-full { background: #F3F4F6; color: #B0B5BF; cursor: not-allowed; }
.qlv-trip-time { font-size: 19px; font-weight: 800; letter-spacing: 0.02em; }
.qlv-trip-line { font-size: 12px; margin-top: 6px; opacity: 0.8; }
.qlv-trip-line.tight { margin-top: 2px; }
.qlv-trip-price { font-size: 12px; margin-top: 6px; font-weight: 700; }

/* -------------------------------------------------------------- Toolbar */
.qlv-toolbar { display: flex; gap: 10px; align-items: center; }
.qlv-search { position: relative; }
.qlv-search i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--qlv-faint); font-size: 12.5px; }
.qlv-search input {
	width: 260px; padding: 10px 14px 10px 34px;
	border: 1px solid var(--qlv-input-border); border-radius: 8px;
	font-size: 13.5px; outline: none; background: #fff;
}
.qlv-btn {
	padding: 10px 16px; border: none; border-radius: 8px;
	background: var(--qlv-primary); color: #fff;
	font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.qlv-btn i { margin-right: 6px; }
.qlv-filter-row { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.qlv-filter {
	padding: 8px 15px; border-radius: 100px; font-size: 13px; font-weight: 600; cursor: pointer;
	border: 1px solid var(--qlv-input-border); background: #fff; color: #374151;
}
.qlv-filter.is-active { border-color: var(--qlv-ink); background: var(--qlv-ink); color: #fff; }

/* -------------------------------------------------------------- List rows */
.qlv-list { display: flex; flex-direction: column; gap: 10px; }
.qlv-row-head {
	padding: 14px 18px; display: flex; align-items: center; gap: 14px; cursor: pointer;
}
.qlv-row-detail {
	border-top: 1px solid var(--qlv-line); padding: 18px; background: #FAFBFC;
	display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px;
}
.qlv-detail-label {
	font-size: 11px; font-weight: 700; color: var(--qlv-faint);
	text-transform: uppercase; margin-bottom: 3px;
}
.qlv-detail-value { font-size: 13.5px; margin-bottom: 12px; }
.qlv-detail-value:last-child { margin-bottom: 0; }
.qlv-tagchips { flex: 1; display: flex; gap: 6px; flex-wrap: wrap; }
.qlv-chip { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 100px; }
.qlv-chip.combo { background: #EEF2FF; color: #4338CA; }
.qlv-chip.next { background: #F0FDF4; color: #15803D; }
.qlv-chip.moto { background: #FFF7ED; color: #C2410C; }
.qlv-empty { text-align: center; padding: 60px 20px; color: var(--qlv-faint); font-size: 13.5px; }

.qlv-mini-select, .qlv-mini-textarea {
	width: 100%; padding: 8px 10px;
	border: 1px solid var(--qlv-input-border); border-radius: 7px;
	font-size: 13px; background: #fff;
}
.qlv-mini-textarea { min-height: 56px; resize: vertical; }
.qlv-tag-toggle {
	padding: 5px 12px; border-radius: 100px; font-size: 12px; font-weight: 600; cursor: pointer;
	border: 1px solid var(--qlv-input-border); background: #fff; color: var(--qlv-muted);
}
.qlv-tag-toggle.combo.on { border-color: #4338CA; background: #EEF2FF; color: #4338CA; }
.qlv-tag-toggle.next.on { border-color: #15803D; background: #F0FDF4; color: #15803D; }

/* moto row cells */
.qlv-cell { flex-shrink: 0; font-size: 13px; color: #374151; }

/* -------------------------------------------------------------- Accounts */
.qlv-acc-avatar {
	width: 34px; height: 34px; border-radius: 50%;
	background: #EEF2FF; color: var(--qlv-primary);
	display: flex; align-items: center; justify-content: center;
	font-size: 13px; font-weight: 700; flex-shrink: 0;
}
.qlv-role-badge { font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 100px; width: fit-content; }
.qlv-role-badge.manager { background: #EEF2FF; color: #4338CA; }
.qlv-role-badge.staff { background: #F0FDF4; color: #15803D; }
.qlv-addform {
	background: #fff; border: 1px solid var(--qlv-border);
	border-radius: 12px; padding: 20px; margin-bottom: 20px;
}
.qlv-form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.qlv-form-grid-3b { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 12px; align-items: end; }
.qlv-form-label { font-size: 12px; font-weight: 600; color: #374151; margin-bottom: 6px; display: block; }
.qlv-form-input {
	width: 100%; padding: 9px 11px;
	border: 1px solid var(--qlv-input-border); border-radius: 7px;
	font-size: 13.5px; outline: none; background: #fff;
}
.qlv-form-input:focus { border-color: var(--qlv-primary); }
.qlv-btn-dark {
	padding: 9px 18px; border: none; border-radius: 7px;
	background: var(--qlv-ink); color: #fff; font-size: 13px; font-weight: 600; cursor: pointer;
}

/* -------------------------------------------------------------- Modal */
.qlv-modal-backdrop {
	position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45);
	display: flex; align-items: center; justify-content: center; z-index: 100; padding: 24px;
}
.qlv-modal {
	width: 100%; max-height: 88vh; overflow-y: auto;
	background: #fff; border-radius: 14px; padding: 28px 30px;
}
.qlv-modal.w640 { max-width: 640px; }
.qlv-modal.w520 { max-width: 520px; }
.qlv-modal.w480 { max-width: 480px; }
.qlv-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.qlv-modal-title { font-size: 18px; font-weight: 700; }
.qlv-modal-close { cursor: pointer; color: var(--qlv-faint); font-size: 20px; line-height: 1; padding: 4px; }
.qlv-modal-sub { font-size: 13px; color: var(--qlv-muted); margin-bottom: 20px; }
.qlv-form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.qlv-field { margin-bottom: 0; }
.qlv-field .qlv-form-label { font-size: 12px; margin-bottom: 5px; }
.qlv-textarea {
	width: 100%; min-height: 56px; padding: 9px 11px;
	border: 1px solid var(--qlv-input-border); border-radius: 7px;
	font-size: 13.5px; resize: vertical; outline: none;
}
.qlv-moto-box { margin-top: 18px; padding: 14px 16px; border: 1px solid var(--qlv-line); border-radius: 10px; background: #FAFBFC; }
.qlv-checkbox-row { display: flex; align-items: center; gap: 9px; cursor: pointer; }
.qlv-checkbox { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--qlv-input-border); background: #fff; flex-shrink: 0; }
.qlv-checkbox.on { border-color: var(--qlv-primary); background: var(--qlv-primary); }
.qlv-form-error {
	margin-top: 14px; font-size: 12.5px; color: #DC2626;
	background: #FEF2F2; border: 1px solid #FCA5A5; border-radius: 8px; padding: 8px 10px;
}
.qlv-modal-actions { display: flex; gap: 10px; margin-top: 20px; }
.qlv-btn-ghost {
	flex: 1; text-align: center; padding: 11px;
	border: 1px solid var(--qlv-input-border); border-radius: 8px;
	font-size: 13.5px; font-weight: 600; color: #374151; cursor: pointer; background: #fff;
}
.qlv-btn-primary {
	text-align: center; padding: 11px; border: none; border-radius: 8px;
	background: var(--qlv-primary); color: #fff; font-size: 13.5px; font-weight: 700; cursor: pointer;
}
.qlv-btn-primary.grow { flex: 2; }
.qlv-btn-primary.solo { flex: 1; }
.qlv-preview {
	background: #FAFBFC; border: 1px solid var(--qlv-border); border-radius: 10px;
	padding: 16px; font-size: 13px; line-height: 1.7; white-space: pre-wrap;
	font-family: ui-monospace, Menlo, monospace;
}
.qlv-btn-ink {
	text-align: center; padding: 11px; border: none; border-radius: 8px;
	background: var(--qlv-ink); color: #fff; font-size: 13.5px; font-weight: 700; cursor: pointer; flex: 1;
}

/* -------------------------------------------------------------- Responsive */
@media (max-width: 900px) {
	.qlv-kpi-grid { grid-template-columns: repeat(2, 1fr); }
	.qlv-grid-4 { grid-template-columns: repeat(2, 1fr); }
	.qlv-form-grid-3, .qlv-form-grid-3b, .qlv-row-detail { grid-template-columns: 1fr; }
	.qlv-sidebar { width: 200px; }
}