/* =========================================================
   Portal PRO — Dashboard / Boardings / Profiles
   File: public/assets/css/portal-pro.css
   Paste into cPanel: public/assets/css/portal-pro.css
   ========================================================= */

:root {
	--pro-primary: #14420d;
	--pro-primary-rgb: 65, 84, 161;
	--pro-bg: #eef0f4;
	--pro-card: #ffffff;
	--pro-border: #e4e7ec;
	--pro-text: #111827;
	--pro-muted: #6b7280;
	--pro-subtle: #9ca3af;
	--pro-radius: 14px;
	--pro-radius-sm: 10px;
	--pro-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 12px rgba(16, 24, 40, 0.04);
	--pro-shadow-hover: 0 10px 28px rgba(16, 24, 40, 0.1);
}

/* ---------- App canvas ---------- */
.page .main-content.app-content {
	background:
		radial-gradient(900px 320px at 0% 0%, rgba(var(--pro-primary-rgb), 0.07), transparent 55%),
		radial-gradient(700px 280px at 100% 0%, rgba(16, 185, 129, 0.05), transparent 50%),
		var(--pro-bg) !important;
	min-height: calc(100vh - 3.5rem);
}

.main-body-container.portal-pro,
.main-body-container {
	padding-top: 0.25rem;
}

/* ---------- Page header ---------- */
.page-header-breadcrumb {
	margin-top: 1.1rem !important;
	margin-bottom: 1.15rem !important;
}

.page-header-breadcrumb .page-title {
	letter-spacing: -0.03em;
	color: var(--pro-text);
	font-size: 1.35rem !important;
	font-weight: 700 !important;
}

.page-header-breadcrumb .breadcrumb {
	font-size: 0.76rem;
	margin-top: 0.15rem;
}

.page-header-breadcrumb .breadcrumb-item a {
	color: var(--pro-muted);
	text-decoration: none;
}

.page-header-breadcrumb .breadcrumb-item a:hover {
	color: var(--pro-primary);
}

.page-header-breadcrumb .breadcrumb-item.active {
	color: var(--pro-primary);
	font-weight: 600;
}

.page-header-breadcrumb .btn {
	border-radius: 9px;
	font-weight: 600;
	font-size: 0.82rem;
	padding: 0.45rem 0.9rem;
}

.page-header-breadcrumb .btn-outline-primary {
	border-color: rgba(var(--pro-primary-rgb), 0.28);
	background: #fff;
}

.page-header-breadcrumb .btn-outline-primary:hover {
	background: rgba(var(--pro-primary-rgb), 0.08);
	color: var(--pro-primary);
	border-color: rgba(var(--pro-primary-rgb), 0.4);
}

/* ---------- Shared cards ---------- */
.portal-pro .card.custom-card,
.main-body-container .card.custom-card {
	border: 1px solid var(--pro-border) !important;
	border-radius: var(--pro-radius) !important;
	box-shadow: var(--pro-shadow) !important;
	background: var(--pro-card);
	overflow: hidden;
}

.main-body-container .card.custom-card > .card-header {
	background: #fff !important;
	border-bottom: 1px solid var(--pro-border) !important;
	padding: 0.95rem 1.2rem !important;
}

.main-body-container .card.custom-card .card-title {
	font-size: 0.98rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--pro-text);
	margin-bottom: 0;
}

.main-body-container .card.custom-card .card-title .fs-12,
.main-body-container .card.custom-card .card-title span.d-block {
	font-weight: 450 !important;
	color: var(--pro-muted) !important;
	letter-spacing: 0 !important;
	margin-top: 0.2rem !important;
}

/* ---------- Dashboard hero ---------- */
.dash-hero {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 14px;
	margin-bottom: 1rem;
}

.dash-welcome-card {
	border: 1px solid var(--pro-border) !important;
	border-radius: var(--pro-radius) !important;
	box-shadow: var(--pro-shadow) !important;
	background:
		linear-gradient(125deg, rgba(var(--pro-primary-rgb), 0.12) 0%, rgba(var(--pro-primary-rgb), 0.03) 38%, #fff 70%) !important;
	position: relative;
	overflow: hidden;
}

.dash-welcome-card::after {
	content: "";
	position: absolute;
	right: -40px;
	top: -40px;
	width: 160px;
	height: 160px;
	border-radius: 50%;
	background: rgba(var(--pro-primary-rgb), 0.08);
	pointer-events: none;
}

.dash-welcome-card .card-body {
	position: relative;
	z-index: 1;
	padding: 1.25rem 1.4rem !important;
}

.dash-welcome-kicker {
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--pro-primary);
	margin-bottom: 0.35rem;
}

.dash-welcome-card h3 {
	margin: 0 0 0.35rem;
	font-size: 1.45rem;
	font-weight: 700;
	letter-spacing: -0.03em;
	color: var(--pro-text);
}

.dash-welcome-card p {
	margin: 0;
	color: var(--pro-muted);
	font-size: 0.875rem;
	max-width: 36rem;
}

.dash-date-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(255, 255, 255, 0.85);
	color: var(--pro-primary);
	border: 1px solid rgba(var(--pro-primary-rgb), 0.15);
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 650;
	padding: 0.4rem 0.85rem;
	backdrop-filter: blur(6px);
}

.dash-quick-panel {
	border: 1px solid var(--pro-border) !important;
	border-radius: var(--pro-radius) !important;
	box-shadow: var(--pro-shadow) !important;
	background: #fff !important;
}

.dash-quick-panel .card-body {
	padding: 1rem 1.1rem !important;
}

.dash-quick-title {
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--pro-subtle);
	margin-bottom: 0.75rem;
}

.dash-quick-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.dash-quick-link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0.7rem 0.75rem;
	border-radius: var(--pro-radius-sm);
	border: 1px solid var(--pro-border);
	background: #fafbfd;
	text-decoration: none;
	color: var(--pro-text);
	transition: background .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.dash-quick-link:hover {
	background: #fff;
	border-color: rgba(var(--pro-primary-rgb), 0.35);
	color: var(--pro-primary);
	transform: translateY(-1px);
	box-shadow: var(--pro-shadow);
}

.dash-quick-link i {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(var(--pro-primary-rgb), 0.1);
	color: var(--pro-primary);
	font-size: 1rem;
	flex-shrink: 0;
}

.dash-quick-link span {
	font-size: 0.82rem;
	font-weight: 650;
	letter-spacing: -0.01em;
}

/* ---------- Metric tiles (dashboard + boardings) ---------- */
.dash-metric-link {
	text-decoration: none;
	color: inherit;
	display: block;
	height: 100%;
}

.dash-metric-card,
.boarding-metric-card.dash-metric-card,
.card.dash-metric-card {
	height: 100%;
	border: 1px solid var(--pro-border) !important;
	border-radius: var(--pro-radius) !important;
	box-shadow: var(--pro-shadow) !important;
	transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
	overflow: hidden;
	position: relative;
	background: #fff !important;
	cursor: pointer;
	margin-bottom: 0;
}

.dash-metric-card::before,
.boarding-metric-card.dash-metric-card::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0;
	width: 3px;
	height: 100%;
	border-radius: 14px 0 0 14px;
	background: rgba(var(--pro-primary-rgb), 1);
	z-index: 1;
}

.dash-metric-card.is-warning::before,
.boarding-metric-card.is-warning::before { background: #f59e0b; }
.dash-metric-card.is-secondary::before,
.boarding-metric-card.is-secondary::before { background: #64748b; }
.dash-metric-card.is-success::before,
.boarding-metric-card.is-success::before { background: #10b981; }
.dash-metric-card.is-info::before { background: #3b82f6; }

.dash-metric-link:hover .dash-metric-card,
.boarding-metric-card.dash-metric-card:hover,
.dash-metric-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--pro-shadow-hover) !important;
	border-color: #d0d5dd !important;
}

.boarding-metric-card.dash-metric-card.is-active {
	box-shadow: 0 0 0 2px rgba(var(--pro-primary-rgb), 0.28), var(--pro-shadow-hover) !important;
	border-color: rgba(var(--pro-primary-rgb), 0.35) !important;
}

.dash-metric-card .card-body {
	padding: 1.1rem 1.15rem !important;
}

.dash-metric-card .metric-label {
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--pro-muted);
}

.dash-metric-card .metric-value,
.boarding-metric-card .metric-value,
.boarding-metric-card__value {
	font-size: 1.7rem;
	font-weight: 750;
	letter-spacing: -0.035em;
	color: var(--pro-text);
	line-height: 1.1;
	margin: 0.4rem 0 0.3rem;
	display: block;
}

.dash-metric-card .metric-hint {
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--pro-primary);
}

.dash-metric-card.is-warning .metric-hint { color: #c2410c; }
.dash-metric-card.is-secondary .metric-hint { color: #475569; }
.dash-metric-card.is-success .metric-hint { color: #047857; }

.dash-metric-card .metric-icon {
	width: 42px;
	height: 42px;
	border-radius: 11px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(var(--pro-primary-rgb), 0.1);
	color: var(--pro-primary);
	font-size: 1.15rem;
	flex-shrink: 0;
}

.dash-metric-card.is-warning .metric-icon {
	background: rgba(245, 158, 11, 0.14);
	color: #d97706;
}

.dash-metric-card.is-secondary .metric-icon {
	background: rgba(100, 116, 139, 0.14);
	color: #475569;
}

.dash-metric-card.is-success .metric-icon {
	background: rgba(16, 185, 129, 0.14);
	color: #059669;
}

.dash-metric-row,
.boarding-metric-row {
	margin-bottom: 0.15rem;
}

.dash-metric-row > [class*="col-"],
.boarding-metric-row > [class*="col-"] {
	margin-bottom: 1rem;
}

/* Override old Vyzor metric look when dash-metric-card is used */
.boarding-metric-card.dashboard-main-card.dash-metric-card .avatar {
	display: none;
}

/* ---------- Status breakdown ---------- */
.dashboard-status-list {
	max-height: 420px;
	overflow-y: auto;
	padding-right: 4px;
}

.dashboard-status-list li {
	padding: 0.55rem 0.45rem;
	border-radius: 9px;
	margin-bottom: 0.15rem !important;
	transition: background .12s ease;
}

.dashboard-status-list li:hover {
	background: #f5f7fa;
}

.dashboard-status-list .avatar-initial {
	width: 8px;
	height: 8px;
	display: inline-block;
}

.dashboard-status-list .badge {
	font-weight: 700;
	font-size: 0.72rem;
	border-radius: 999px;
	background: #f3f4f6 !important;
	color: #374151 !important;
	border: 1px solid #e5e7eb;
	min-width: 2rem;
	justify-content: center;
}

.dash-status-bar {
	height: 4px;
	border-radius: 999px;
	background: #eef0f3;
	margin-top: 0.45rem;
	overflow: hidden;
}

.dash-status-bar > span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--pro-primary);
}

/* ---------- Tables ---------- */
.dash-recent-table thead th,
.boarding-overview-table thead th,
.boarding-detail-table thead th,
#profile-boardings-table thead th,
.portal-pro table.dataTable thead th {
	font-size: 0.68rem !important;
	text-transform: uppercase;
	letter-spacing: 0.045em;
	font-weight: 700 !important;
	color: var(--pro-subtle) !important;
	background: #f8f9fb !important;
	border-bottom: 1px solid var(--pro-border) !important;
	padding-top: 0.75rem !important;
	padding-bottom: 0.75rem !important;
	white-space: nowrap;
}

.dash-recent-table tbody td,
.boarding-overview-table tbody td,
.boarding-detail-table tbody td,
#profile-boardings-table tbody td {
	padding-top: 0.85rem !important;
	padding-bottom: 0.85rem !important;
	border-bottom: 1px solid #f0f2f5 !important;
	font-size: 0.875rem;
	vertical-align: middle;
	color: var(--pro-text);
}

.dash-recent-table tbody tr:last-child td,
.boarding-overview-table tbody tr:last-child td {
	border-bottom: 0 !important;
}

.dash-recent-table tbody tr:hover td,
.boarding-overview-table tbody tr:hover td,
.boarding-detail-table tbody tr:hover td,
#profile-boardings-table tbody tr:hover td {
	background: #f7f9fc !important;
}

.dash-recent-table td a,
.boarding-detail-table td a,
#profile-boardings-table td a {
	text-decoration: none !important;
}

/* Soften old purple thead from custom.css */
.main-body-container .table thead tr th {
	background: #f8f9fb !important;
}

/* ---------- List page shell ---------- */
.boarding-page-card.custom-card {
	border: 1px solid var(--pro-border) !important;
	border-radius: var(--pro-radius) !important;
	box-shadow: var(--pro-shadow) !important;
}

.boarding-page-card > .card-header {
	padding: 1rem 1.2rem !important;
	background: linear-gradient(180deg, #fff 0%, #fcfcfd 100%) !important;
}

.boarding-header-search .form-control {
	border-radius: 8px 0 0 8px;
	border-color: var(--pro-border);
	font-size: 0.82rem;
	min-height: 34px;
}

.boarding-header-search .btn {
	border-radius: 0 8px 8px 0;
	font-weight: 600;
}

.boarding-header-search .btn-light {
	border-radius: 8px;
	margin-left: 6px;
}

/* Profiles toolbar */
.profile-col-menu {
	min-width: 240px;
	border-radius: 12px !important;
	border: 1px solid var(--pro-border) !important;
	box-shadow: var(--pro-shadow-hover) !important;
	padding: 0.5rem !important;
}

.profile-col-item {
	border-radius: 8px;
	font-size: 0.84rem;
}

.profile-col-item:hover {
	background: #f5f7fa;
}

.profile-double-scroll {
	border: 1px solid var(--pro-border);
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
}

.profile-scroll-top {
	overflow-x: auto;
	overflow-y: hidden;
	height: 12px;
	background: #f8f9fb;
	border-bottom: 1px solid var(--pro-border);
}

.profile-table-scroll {
	max-height: none;
}

#profile-boardings-table_wrapper .dataTables_filter input,
#boarding-table_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_filter input {
	border: 1px solid var(--pro-border) !important;
	border-radius: 8px !important;
	padding: 0.35rem 0.65rem !important;
	font-size: 0.82rem !important;
	min-height: 34px;
	box-shadow: none !important;
}

#profile-boardings-table_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_length select {
	border: 1px solid var(--pro-border) !important;
	border-radius: 8px !important;
	font-size: 0.82rem !important;
	min-height: 34px;
	padding: 0.25rem 1.75rem 0.25rem 0.55rem !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
	border-radius: 8px !important;
	border: 1px solid transparent !important;
	font-size: 0.8rem !important;
	font-weight: 600 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
	background: var(--pro-primary) !important;
	color: #fff !important;
	border-color: var(--pro-primary) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
	background: rgba(var(--pro-primary-rgb), 0.08) !important;
	color: var(--pro-primary) !important;
	border-color: rgba(var(--pro-primary-rgb), 0.15) !important;
}

.btn-sm.btn-primary-light {
	border-radius: 8px;
	font-weight: 650;
}

/* Profiles page intro strip */
.pro-page-intro {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	padding: 0.85rem 1.1rem;
	margin-bottom: 1rem;
	border: 1px solid var(--pro-border);
	border-radius: var(--pro-radius);
	background: linear-gradient(120deg, rgba(var(--pro-primary-rgb), 0.08), #fff 55%);
	box-shadow: var(--pro-shadow);
}

.pro-page-intro__text strong {
	display: block;
	font-size: 0.92rem;
	color: var(--pro-text);
	letter-spacing: -0.015em;
	margin-bottom: 0.15rem;
}

.pro-page-intro__text span {
	font-size: 0.8rem;
	color: var(--pro-muted);
}

@media (max-width: 991.98px) {
	.dash-hero {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 575.98px) {
	.dash-metric-card .metric-value,
	.boarding-metric-card .metric-value {
		font-size: 1.4rem;
	}
	.dash-quick-grid {
		grid-template-columns: 1fr;
	}
	.page-header-breadcrumb .page-title {
		font-size: 1.15rem !important;
	}
}