/*
 * Huisstijl voor de LearnDash ProPanel reporting dashboard
 * (https://academy.paardenarts.nl/reporting-dashboard/, page ID 2037).
 *
 * Doel: dezelfde "look & feel" als het Instructor Dashboard
 * (https://academy.paardenarts.nl/instructor-dashboard/), dat het
 * "calm_ocean" kleurenschema van de Instructor Role plugin gebruikt:
 * lichte pagina-achtergrond (#FBFCFF), witte kaarten met dunne rand
 * (#D6D8E7) en afgeronde hoeken (10px), blauwe accentkleur (#2067FA)
 * voor actieve states/knoppen, donkere koppen (#2E353C), grijze
 * labels (#666666 / #868E96).
 *
 * Status-kleuren voor pass/fail (groen/rood) blijven ongewijzigd,
 * dat is functionele feedback en geen huisstijlkleur.
 *
 * Let op: deze pagina bestaat uit losse Gutenberg-blokken
 * (.wp-block-wisdm-learndash-reports-*), niet uit de
 * "qre-reports-wrapper-class" app-layout. Daarom scopen we alles
 * op body.page-id-2037 en de daadwerkelijke block-classnamen.
 */

body.page-id-2037 {
	/* Accentkleur, zoals gebruikt in het Instructor Dashboard (calm_ocean) */
	--pa-primary: #2067FA;
	--pa-primary-bg: #F3F9FB;   /* sidebar_active_bg / accent */

	/* Kaarten / oppervlakken */
	--pa-card-bg: #FFFFFF;
	--pa-card-border: #D6D8E7;  /* border (calm_ocean) */
	--pa-radius: 10px;          /* zelfde als .overview / .block kaarten */

	/* Pagina-achtergrond */
	--pa-page-bg: #FBFCFF;      /* page_bg (calm_ocean) */

	/* Tekst */
	--pa-text-primary: #2E353C;   /* headings (calm_ocean) */
	--pa-text-secondary: #666666; /* text (calm_ocean) */
	--pa-text-light: #868E96;     /* text_light (calm_ocean) */
	--pa-text-tertiary: #ADB5BD;  /* text_extra_light (calm_ocean) */

	/* Randen algemeen */
	--pa-border: #D6D8E7;

	/* Form-elementen (inputs/selects) */
	--pa-input-radius: 8px;
	--pa-input-border: #D6D8E7;
	--pa-input-height: 42px;
}

/* -------------------------------------------------- */
/* Pagina-achtergrond                                  */
/* -------------------------------------------------- */

body.page-id-2037 .et_pb_section,
body.page-id-2037 #main-content {
	background-color: var(--pa-page-bg);
}

/* -------------------------------------------------- */
/* Statistiek-tegels (totaal omzet, cursisten, etc.)   */
/* en grafiek-/tabel-kaarten                           */
/* -------------------------------------------------- */

body.page-id-2037 .top-card-container,
body.page-id-2037 .graph-card-container,
body.page-id-2037 .table-chart-container,
body.page-id-2037 .wp-block-wisdm-learndash-reports-quiz-reports,
body.page-id-2037 .qre-reports-content .results-section,
body.page-id-2037 .qre-reports-content .table-container,
body.page-id-2037 .custom-report-filters .section,
body.page-id-2037 .custom-reports-container {
	background-color: var(--pa-card-bg) !important;
	border: 1px solid var(--pa-card-border) !important;
	border-radius: var(--pa-radius) !important;
	box-shadow: none !important;
	padding: 24px 32px !important;
}

/* Kaarten die al eigen padding/structuur hebben (bv. tabellen) krijgen
   geen dubbele padding op de buitenste container. */
body.page-id-2037 .qre-reports-content .table-container,
body.page-id-2037 .custom-reports-container {
	padding: 0 !important;
}

body.page-id-2037 .qre-reports-content .table-container > *,
body.page-id-2037 .custom-reports-container > * {
	padding: 24px 32px;
}

/* -------------------------------------------------- */
/* Algemene tekstkleuren                               */
/* -------------------------------------------------- */

body.page-id-2037 .top-card-container .chart-title,
body.page-id-2037 .graph-card-container .chart-title,
body.page-id-2037 h1,
body.page-id-2037 h2,
body.page-id-2037 h3,
body.page-id-2037 h4 {
	color: var(--pa-text-primary);
}

body.page-id-2037 .top-label-text span,
body.page-id-2037 .information label,
body.page-id-2037 .information .label,
body.page-id-2037 .qre-reports-content label {
	color: var(--pa-text-secondary) !important;
}

/* -------------------------------------------------- */
/* Tabs                                                */
/* -------------------------------------------------- */

body.page-id-2037 .react-tabs__tab-list .react-tabs__tab {
	background: var(--pa-card-bg);
	border: 1px solid var(--pa-card-border);
	box-shadow: none;
	color: var(--pa-text-secondary);
	border-radius: var(--pa-radius);
}

body.page-id-2037 .react-tabs__tab-list .react-tabs__tab--selected {
	background: var(--pa-primary-bg);
	color: var(--pa-primary);
	border-color: var(--pa-card-border);
	font-weight: 600;
	box-shadow: none;
}

/* -------------------------------------------------- */
/* Tabellen                                            */
/* -------------------------------------------------- */

body.page-id-2037 #qre_summarized_data_wrapper table.dataTable thead,
body.page-id-2037 .custom-qre-report .custom-reports-content thead,
body.page-id-2037 #custom-reports tr.row_headings {
	background: var(--pa-primary-bg);
	color: var(--pa-text-primary);
	box-shadow: none;
	border-bottom: 1px solid var(--pa-card-border);
}

body.page-id-2037 #qre_summarized_data tbody tr:hover {
	background-color: var(--pa-primary-bg);
}

/* -------------------------------------------------- */
/* Knoppen, paginering & form-elementen                */
/* -------------------------------------------------- */

body.page-id-2037 .pagination-section .previous-page,
body.page-id-2037 .pagination-section .next-page {
	background: var(--pa-card-bg);
	border: 1px solid var(--pa-primary);
	color: var(--pa-primary);
	box-shadow: none;
	border-radius: var(--pa-input-radius);
}

body.page-id-2037 .pagination-section .previous-page:hover,
body.page-id-2037 .pagination-section .next-page:hover {
	background: var(--pa-primary);
	border-color: var(--pa-primary);
	color: var(--pa-card-bg);
}

body.page-id-2037 .pagination-section .disabled:hover {
	border-color: var(--pa-card-border);
	color: var(--pa-text-tertiary);
}

body.page-id-2037 .back-button,
body.page-id-2037 .apply-filters button,
body.page-id-2037 .download-csv-button {
	background-color: var(--pa-primary) !important;
	border-radius: var(--pa-input-radius);
	border: none;
	color: #ffffff;
}

body.page-id-2037 #custom-reports .accordion-trigger {
	border-color: var(--pa-primary);
	box-shadow: none;
}

/* Inputs & dropdowns: zelfde maatvoering/uiterlijk als de
   Mantine inputs van het Instructor Dashboard
   (border #D6D8E7, border-radius 8px, hoogte ~42px,
   padding 0 16px, witte achtergrond). */
body.page-id-2037 .quiz-report-filters select,
body.page-id-2037 .quiz-report-filters input,
body.page-id-2037 .qre-reports-content .entries-shown,
body.page-id-2037 .custom-report-filters select,
body.page-id-2037 .custom-report-filters input[type="text"],
body.page-id-2037 .dataTables_length > label select,
body.page-id-2037 .dataTables_filter > label input[type="search"] {
	background: var(--pa-card-bg);
	border: 1px solid var(--pa-input-border);
	border-radius: var(--pa-input-radius);
	box-shadow: none;
	color: var(--pa-text-secondary);
	height: var(--pa-input-height);
	padding: 0 16px;
}

body.page-id-2037 .quiz-report-filters select:focus,
body.page-id-2037 .quiz-report-filters input:focus,
body.page-id-2037 .custom-report-filters select:focus,
body.page-id-2037 .custom-report-filters input[type="text"]:focus,
body.page-id-2037 .dataTables_length > label select:focus,
body.page-id-2037 .dataTables_filter > label input[type="search"]:focus {
	border-color: var(--pa-primary);
	outline: none;
}

body.page-id-2037 .quiz-report-filters .switch input:focus + .slider,
body.page-id-2037 .quiz-report-filters .slider {
	background-color: var(--pa-primary);
}

body.page-id-2037 .quiz-report-filters .slider.round:before {
	border-color: var(--pa-card-border);
}

/* -------------------------------------------------- */
/* Custom rapporten / secties                          */
/* -------------------------------------------------- */

body.page-id-2037 .custom-report-filters span.section-control {
	background-color: var(--pa-page-bg);
}

body.page-id-2037 .custom-qre-report .custom-reports-content .sticky-custom-report-buttons {
	background-color: var(--pa-card-bg);
	border-bottom: 1px solid var(--pa-card-border);
	color: var(--pa-text-primary);
	padding: 16px 32px;
}

body.page-id-2037 .custom-qre-report .custom-reports-content .sticky-custom-report-buttons .preview-data,
body.page-id-2037 .custom-qre-report .custom-reports-content .custom-report-buttons .preview-data {
	color: var(--pa-text-primary);
	border-color: var(--pa-card-border);
	border-radius: var(--pa-input-radius);
}