/* =================================================================
   Question Press Dashboard Styles - Sidebar Layout v1.1 (Consolidated)
   ================================================================= */

:root {
	/* Core Colors */
	--qp-dashboard-primary: #2271b1; /* WordPress Blue */
	--qp-dashboard-primary-hover: #1d5f96;
	--qp-dashboard-primary-light: #e6f1f9; /* Light blue for active nav bg */
	--qp-dashboard-danger: #d63638;      /* Red for delete/terminate */
	--qp-dashboard-danger-hover: #b02a2a;
	--qp-dashboard-success: #2e7d32;     /* Green for positive actions */
	--qp-dashboard-success-hover: #1b5e20;
	--qp-dashboard-warning: #ffb13d;     /* Orange/Amber for warnings/paused */
	--qp-dashboard-warning-dark: #f57f17;
	--qp-dashboard-info: #1976d2;      /* Blue for informational */

	/* Backgrounds */
	--qp-dashboard-bg: #f0f2f5;         /* Main page background */
	--qp-dashboard-sidebar-bg: #ffffff; /* Sidebar */
	--qp-dashboard-content-bg: transparent;
	--qp-dashboard-card-bg: #ffffff;    /* Card */
	--qp-dashboard-card-header-bg: #f6f7f7;
	--qp-dashboard-nav-hover-bg: #f0f0f1;
	--qp-dashboard-nav-active-bg: var(--qp-dashboard-primary-light);
	--qp-dashboard-table-header-bg: #f9f9f9;
	--qp-dashboard-paused-bg: #fff8ed;    /* Light orange for paused items */
    --qp-dashboard-progress-bar-bg: #d8f3da; /* Light green progress */
    --qp-dashboard-progress-item-bg: #ffffff;
    --qp-dashboard-progress-topic-bg: #fafafa;
    --qp-dashboard-progress-subject-bg: #f0f2f5;

	/* Text */
	--qp-dashboard-text-dark: #1d2327;    /* Primary text */
	--qp-dashboard-text-light: #50575e;   /* Secondary text, labels */
	--qp-dashboard-text-white: #ffffff;
	--qp-dashboard-nav-text: #3c434a;
	--qp-dashboard-nav-active-text: var(--qp-dashboard-primary);
	--qp-dashboard-link: var(--qp-dashboard-primary);
	--qp-dashboard-link-hover: var(--qp-dashboard-primary-hover);
    --qp-dashboard-progress-percentage-text: #1e4620; /* Dark green for progress % */

	/* Borders & Shadows */
	--qp-dashboard-border-light: #e5e7eb; /* Lighter border for cards */
	--qp-dashboard-border: #dcdcde;       /* Standard border */
	--qp-dashboard-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	--qp-dashboard-shadow-hover: 0 4px 10px rgba(0, 0, 0, 0.08);
	--qp-dashboard-radius: 6px;

	/* Layout */
	--qp-dashboard-sidebar-width: 250px;
	--qp-dashboard-content-padding: 0.8rem;
	--qp-dashboard-mobile-padding: 1rem;
}

* { box-sizing: border-box; outline: none; }

/* Outline:none */

.qp-sidebar-close-btn, .qp-sidebar-toggle, .qp-button, .qp-modal-close-btn, .qp-md-tab-link{
    outline: none;
}

/* --- General Typography & Base --- */
body { margin: 0; }

#qp-practice-app-wrapper {
	padding: 0;
	max-width: 100%;
	background-color: var(--qp-dashboard-bg);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	color: var(--qp-dashboard-text-dark);
	font-size: 14px;
	line-height: 1.6;
}

.qp-dashboard-layout {
	display: flex;
	min-height: calc(100vh - 32px); /* Full height minus WP admin bar */
	background-color: var(--qp-dashboard-bg);
}

.qp-dashboard-layout h2 {
	font-size: 1.5em; /* ~21px */
	font-weight: 600;
	color: var(--qp-dashboard-text-dark);
	margin: 0 0 1.5rem 0; /* Consistent bottom margin */
    line-height: 1.3;
}
 .qp-dashboard-layout h3 {
	 font-size: 1.15em; /* ~16px */
	 font-weight: 600;
	 margin: 0;
	 color: var(--qp-dashboard-text-dark);
     line-height: 1.4;
 }
 .qp-dashboard-layout p { margin: 0 0 1rem 0; }
 .qp-dashboard-layout p:last-child { margin-bottom: 0; }

/* --- Sidebar --- */
.qp-sidebar {
	width: var(--qp-dashboard-sidebar-width);
	/* REMOVE padding: 1rem 0; */
	box-shadow: 1px 0 5px rgba(0,0,0,0.05);
	background-color: var(--qp-dashboard-sidebar-bg);
	border-right: 1px solid var(--qp-dashboard-border-light);
	transition: transform 0.3s ease-in-out;
	flex-shrink: 0;
	position: fixed;
    top: var(--wp-admin--admin-bar--height, 0px);

	bottom: 0;
	left: 0;
	/* overflow-y: auto; <-- REMOVE this */
	z-index: 1001;
    /* --- ADD Flexbox properties --- */
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--wp-admin--admin-bar--height, 0px)); /* Make sidebar full viewport height */
    /* --- END ADD --- */
}

.qp-sidebar-header {
	 padding: 1rem 1.5rem 1rem 1.5rem;
	 text-align: center;
	 border-bottom: 1px solid var(--qp-dashboard-border-light);
     position: relative;
}

.qp-sidebar-header .qp-user-name { font-size: 1.1em; font-weight: 600; display: block; }
.qp-sidebar-header .qp-access-status {
	font-size: 0.85em;
	margin-top: 4px;
	display: inline-block;
    color: var(--qp-dashboard-text-light);
}
.qp-sidebar-header .qp-access-status a {
	 color: var(--qp-dashboard-link);
	 font-weight: 500;
	 text-decoration: none;
}
 .qp-sidebar-header .qp-access-status a:hover { text-decoration: underline; }

 /* --- NEW: Sidebar Avatar and Header Centering --- */
.qp-sidebar-header {
	 padding: 1rem 1.5rem 1rem 1.5rem; /* Adjusted padding */
	 text-align: center; /* Center align header content */
	 border-bottom: 1px solid var(--qp-dashboard-border-light);
     position: relative; /* Needed for close button positioning */
}
.qp-sidebar-avatar {
    margin-bottom: 0.75rem; /* Space below avatar */
}
.qp-sidebar-avatar img {
    border-radius: 50%; /* Make avatar circular */
    border: 2px solid var(--qp-dashboard-border); /* Optional subtle border */
}

.qp-sidebar-header .qp-user-name {
    font-size: 1.1em;
    font-weight: 600;
    display: block;
    margin-bottom: 5px; /* Space below name */
}
/* Adjust close button position for centered header */
.qp-sidebar-header .qp-sidebar-close-btn {
    top: 10px;
    right: 10px;
}

.qp-sidebar-nav {
    margin-top: 0.5rem;
    list-style: none;
    padding: 0;
    flex-grow: 1; /* Allow nav to take available space */
    overflow-y: auto;
    min-height: 100px;
}
.qp-sidebar-nav li a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 25px;
	margin: 2px 15px;
	text-decoration: none;
	color: var(--qp-dashboard-nav-text);
	font-weight: 500;
	border-radius: 4px;
	font-size: 14px;
	transition: background-color 0.2s ease, color 0.2s ease, border-left-color 0.2s ease;
    border-left: 4px solid transparent; /* Placeholder for active state */
    outline: none;
}
.qp-sidebar-nav li a:hover {
	background-color: var(--qp-dashboard-nav-hover-bg);
    color: var(--qp-dashboard-text-dark);
}
 .qp-sidebar-nav li a.active {
	 background-color: var(--qp-dashboard-nav-active-bg);
     color: var(--qp-dashboard-nav-active-text);
     font-weight: 600;
     margin-left: 15px; /* Keep margin for consistency */
     margin-right: 15px;
     border-radius: 4px;
     border-left-color: var(--qp-dashboard-primary); /* Use border for active indicator */
     padding-left: 21px; /* Adjust padding for border */
 }
 .qp-sidebar-nav li a .dashicons {
	 font-size: 20px;
	 line-height: 1;
     width: 20px;
     flex-shrink: 0;
 }
 .qp-sidebar-nav li a span:not(.dashicons) {
	 transition: opacity 0.2s ease;
 }

.qp-sidebar-footer {
	position: relative;
	bottom: 0;
	width: 100%;
	padding: 1rem 15px;
	border-top: 1px solid var(--qp-dashboard-border-light);
	background-color: var(--qp-dashboard-sidebar-bg);
	text-align: left;
	box-sizing: border-box;
    flex-shrink: 0;
}
.qp-sidebar-footer .qp-logout-link {
	font-size: 0.9em;
	color: var(--qp-dashboard-text-light);
	 background-color: transparent;
	 padding: 5px;
	 display: flex;
	 align-items: center;
     justify-content: center;
	 gap: 8px;
     text-decoration: none;
     border-radius: 4px;
}
.qp-sidebar-footer .qp-logout-link:hover {
	 background-color: var(--qp-dashboard-nav-hover-bg);
	 color: var(--qp-dashboard-text-dark);
}

/* --- Main Content Area --- */
.qp-main-content {
	flex-grow: 1;
	padding: var(--qp-dashboard-content-padding);
	background-color: var(--qp-dashboard-content-bg);
	margin-left: var(--qp-dashboard-sidebar-width);
	transition: margin-left 0.3s ease-in-out;
    box-sizing: border-box;
}

/* --- Card Component --- */
.qp-card {
	background-color: var(--qp-dashboard-card-bg);
	border: 1px solid var(--qp-dashboard-border-light);
	border-radius: var(--qp-dashboard-radius);
	box-shadow: var(--qp-dashboard-shadow);
	transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
	margin-bottom: 1.5rem;
	overflow: hidden;
}
.qp-card:hover {
	box-shadow: var(--qp-dashboard-shadow-hover);
	transform: translateY(-2px);
}
.qp-card-header {
    display: flex; justify-content: space-between; align-items: center;
	padding: 1rem 1.5rem;
	border-bottom: 1px solid var(--qp-dashboard-border-light);
	background-color: var(--qp-dashboard-card-header-bg);
}
.qp-card-header h3 { font-size: 1.1em; }
.qp-card-content { padding: 1.5rem; }

/* --- Section Display & Animation --- */
.qp-dashboard-section { display: none; }
.qp-dashboard-section.active {
	display: block;
	animation: qpFadeIn 0.4s ease-out;
}
@keyframes qpFadeIn {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
}

/* --- Overview Section --- */
.qp-overall-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 1.25rem;
}
 .stat-item {
	 padding: 1.25rem 1rem;
	 text-align: center;
	 background-color: var(--qp-dashboard-card-bg);
	 border-radius: var(--qp-dashboard-radius);
	 border: 1px solid var(--qp-dashboard-border-light);
     box-shadow: none;
     transition: transform 0.2s ease, box-shadow 0.2s ease;
 }
  .stat-item:hover {
      transform: translateY(-2px);
      box-shadow: var(--qp-dashboard-shadow);
  }
 .stat-label { font-size: 12px; text-transform: uppercase; color: var(--qp-dashboard-text-light); margin-bottom: 4px; display: block; font-weight: 500; }
 .stat-value { font-size: 1.8em; font-weight: 700; color: var(--qp-dashboard-text-dark); display: block; line-height: 1.1; margin-top: 5px;}
 .qp-overall-stats .stat-item:first-child .stat-value { color: #00897b; /* Teal */ } /* Accuracy color */

.qp-quick-actions {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1rem;
}
.qp-quick-actions .qp-button {
	width: 100%; box-sizing: border-box; display: flex; align-items: center;
	justify-content: center; gap: 8px; padding: 18px 12px; font-size: 14px;
    border: 1px solid var(--qp-dashboard-border);
    background-color: var(--qp-dashboard-card-bg);
    color: var(--qp-dashboard-text-dark);
    font-weight: 500;
}
 .qp-quick-actions .qp-button .dashicons { font-size: 18px; line-height: 1; margin-top: -2px; }
 .qp-quick-actions .qp-button:hover:not(:disabled) {
     background-color: var(--qp-dashboard-nav-hover-bg); border-color: #c8cacf;
 }
 .qp-quick-actions .qp-button:disabled {
     background-color: #f6f7f7; border-color: var(--qp-dashboard-border-light); color: #a0a5aa;
 }
 .qp-quick-actions .qp-button.qp-button-primary { background-color: var(--qp-dashboard-primary); border-color: var(--qp-dashboard-primary); color: var(--qp-dashboard-text-white); }
  .qp-quick-actions .qp-button.qp-button-primary:hover:not(:disabled) { background-color: var(--qp-dashboard-primary-hover); border-color: var(--qp-dashboard-primary-hover); }
  .qp-quick-actions .qp-button.qp-button-primary:disabled { background-color: #a4c9e8; border-color: #a4c9e8; color: #eef5fa; }

.qp-active-sessions-list { display: flex; flex-direction: column; gap: 0.75rem; }
.qp-active-session-card {
	display: flex; justify-content: space-between; align-items: center; gap: 1rem;
	padding: 1.25rem 1.5rem; background-color: var(--qp-dashboard-card-bg);
	border: 1px solid var(--qp-dashboard-border-light); border-left: 5px solid var(--qp-dashboard-primary);
	border-radius: var(--qp-dashboard-radius); transition: box-shadow 0.2s ease;
}
 .qp-active-session-card:hover { box-shadow: var(--qp-dashboard-shadow-hover); }
 .qp-active-session-card.qp-session-paused-card { background-color: var(--qp-dashboard-paused-bg); border-left-color: var(--qp-dashboard-warning); }
.qp-card-details { flex-grow: 1; }
.qp-card-subject { font-weight: 600; font-size: 16px; margin-bottom: 2px; }
.qp-card-date { font-size: 12px; color: var(--qp-dashboard-text-light); }
.qp-card-actions { display: flex; gap: 0.5rem; flex-shrink: 0; }
 .qp-card-actions .qp-button { padding: 6px 14px; font-size: 13px; }

.qp-recent-history-table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.qp-recent-history-table th, .qp-recent-history-table td { padding: 12px 10px; text-align: left; border-bottom: 1px solid var(--qp-dashboard-border-light); font-size: 14px; vertical-align: middle; }
.qp-recent-history-table th { font-weight: 600; font-size: 13px; color: var(--qp-dashboard-text-light); background-color: var(--qp-dashboard-table-header-bg); }
.qp-recent-history-table td[data-label="Result"] strong { font-weight: 600; color: var(--qp-dashboard-primary); }
.qp-recent-history-table tr:last-child td { border-bottom: none; }
.qp-recent-history-table .qp-actions-cell { text-align: right; }
 .qp-recent-history-table .qp-actions-cell .qp-button { padding: 4px 10px; font-size: 12px; vertical-align: middle; }
.qp-view-full-history-link { font-size: 14px; font-weight: 500; color: var(--qp-dashboard-link); text-decoration: none; display: inline-block; margin-top: 0.5rem; }
.qp-view-full-history-link:hover { text-decoration: underline; color: var(--qp-dashboard-link-hover); }

/* --- History Section --- */
.qp-history-header {
	display: flex; justify-content: space-between; align-items: center;
	margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--qp-dashboard-border);
	flex-wrap: wrap; gap: 1rem;
}
 .qp-history-header h2 { margin: 0; }
.qp-history-actions { display: flex; gap: 0.5rem; }

.qp-full-history-table { /* Extends .qp-dashboard-table */
    width: 100%; border-collapse: collapse; margin-top: 1rem;
    border: 1px solid var(--qp-dashboard-border-light); border-radius: var(--qp-dashboard-radius);
    overflow: hidden; box-shadow: var(--qp-dashboard-shadow); background-color: var(--qp-dashboard-card-bg);
}
 .qp-full-history-table th, .qp-full-history-table td {
	padding: 12px 10px; text-align: left; border-bottom: 1px solid var(--qp-dashboard-border-light);
	font-size: 14px; vertical-align: middle;
}
.qp-full-history-table th {
	font-weight: 600; font-size: 13px; color: var(--qp-dashboard-text-light);
	background-color: var(--qp-dashboard-table-header-bg);
}
 .qp-full-history-table tr.qp-session-paused td { background-color: var(--qp-dashboard-paused-bg); }
 .qp-full-history-table tr:last-child td { border-bottom: none; }
 .qp-full-history-table .qp-actions-cell { text-align: right; white-space: nowrap; }
 .qp-full-history-table .qp-actions-cell .qp-button,
 .qp-full-history-table .qp-actions-cell .qp-delete-session-btn {
	 margin-left: 5px; padding: 4px 10px; font-size: 12px; vertical-align: middle; transition: opacity 0.2s ease;
 }
 .qp-full-history-table td .qp-button, .qp-full-history-table td .qp-delete-session-btn { opacity: 0.6; }
 .qp-full-history-table tr:hover td .qp-button, .qp-full-history-table tr:hover td .qp-delete-session-btn { opacity: 1; }
 .qp-full-history-table td .qp-delete-session-btn {
     color: var(--qp-dashboard-danger); background: transparent; border: none; padding: 4px;
     font-size: 11px; font-weight: 500; cursor: pointer;
 }
  .qp-full-history-table td .qp-delete-session-btn:hover { color: var(--qp-dashboard-danger-hover); text-decoration: underline; opacity: 1; }

/* --- Review Section --- */
#qp-dashboard-review .qp-practice-card { margin-bottom: 2rem; }
#qp-dashboard-review .qp-card-action { align-items: flex-start; }

.qp-review-list-header {
	display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 0.5rem 1rem; margin: 1.5rem 0 1rem 0; padding-bottom: 1rem;
	border-bottom: 1px solid var(--qp-dashboard-border);
}
 .qp-review-list-header h3 { margin: 0; font-size: 1.3em; }

ul.qp-review-list { list-style: none; padding: 0; margin: 0; background-color: var(--qp-dashboard-card-bg); border: 1px solid var(--qp-dashboard-border-light); border-radius: var(--qp-dashboard-radius); box-shadow: var(--qp-dashboard-shadow); overflow: hidden;}
ul.qp-review-list li {
	display: flex; justify-content: space-between; align-items: center;
	padding: 1rem 1.5rem; border-bottom: 1px solid var(--qp-dashboard-border-light); gap: 1rem;
}
ul.qp-review-list li:last-child { border-bottom: none; }
.qp-review-list-q-text { flex-grow: 1; font-size: 14px; line-height: 1.5; }
.qp-review-list-q-text strong { font-weight: 600; }
.qp-review-list-q-text small { display: block; font-size: 12px; color: var(--qp-dashboard-text-light); margin-top: 4px; }
.qp-review-list-actions { display: flex; gap: 0.5rem; flex-shrink: 0; }
.qp-review-list-actions .qp-button { padding: 4px 10px; font-size: 12px; }

/* --- Progress Section --- */
.qp-progress-filters {
	display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem;
	background-color: var(--qp-dashboard-card-header-bg); padding: 1rem 1.5rem;
	border-radius: var(--qp-dashboard-radius); border: 1px solid var(--qp-dashboard-border-light);
}
.qp-progress-filters .qp-form-group { flex: 1; min-width: 200px; margin-bottom: 0; }
 .qp-progress-filters .qp-form-group label { margin-bottom: 5px; font-weight: 600; font-size: 13px; }
 .qp-progress-filters select { width: 100%; }
 .qp-progress-filters .qp-custom-checkbox { padding-left: 25px; font-size: 13px; margin-top: 1.5rem; /* Align checkbox with bottom of selects */}
 .qp-progress-filters .qp-custom-checkbox span { height: 14px; width: 14px; top: 3px; }
 .qp-progress-filters .qp-custom-checkbox span::after { left: 4px; top: 1px; width: 3px; height: 6px; }

#qp-progress-results-container {
	min-height: 100px; position: relative;
    background-color: var(--qp-dashboard-card-bg); border: 1px solid var(--qp-dashboard-border-light);
    border-radius: var(--qp-dashboard-radius); padding: 1.5rem;
    box-shadow: var(--qp-dashboard-shadow);
}
#qp-progress-results-container p { text-align: center; color: var(--qp-dashboard-text-light); padding: 2rem 0; }

/* Progress Tree Styles */
.qp-progress-tree { margin-top: 0; }
.qp-progress-item {
    margin-bottom: 5px; border: 1px solid #e0e0e0; border-radius: 6px;
    position: relative; overflow: hidden; background-color: var(--qp-dashboard-progress-item-bg);
    transition: border-color 0.2s ease, background-color 0.2s ease;
}
.qp-progress-label {
    position: relative; z-index: 2; display: flex; justify-content: space-between;
    align-items: center; font-weight: 500; width: 100%; padding: 8px 12px; font-size: 14px;
}
.qp-progress-item-name { display: flex; align-items: center; gap: 8px; }
.qp-progress-item-details { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.qp-progress-action-btn {
    display: inline-flex; align-items: center; justify-content: center;
    box-sizing: border-box; width: 80px; padding: 5px 8px; font-size: 12px;
    text-decoration: none; white-space: nowrap; flex-shrink: 0;
}
.qp-progress-start-btn { background-color: var(--qp-dashboard-success); border-color: var(--qp-dashboard-success); color: var(--qp-dashboard-text-white); }
.qp-progress-start-btn:hover { background-color: var(--qp-dashboard-success-hover); border-color: var(--qp-dashboard-success-hover); }
.qp-progress-item .qp-button-secondary { background-color: #f0f0f1; border-color: #dcdcde; color: var(--qp-dashboard-text-dark); }
.qp-progress-item .qp-button-secondary:hover { background-color: #e6e6e6; }

/* Hierarchy Visuals */
.qp-progress-item.subject-level { padding: 0; background-color: var(--qp-dashboard-progress-subject-bg); border-width: 1px; border-color: #c8cdd2; }
.qp-progress-item.subject-level .qp-progress-label { font-size: 16px; font-weight: 700; padding: 12px 15px; }
.qp-progress-item.topic-level { padding: 0; background-color: var(--qp-dashboard-progress-topic-bg); }
.qp-progress-item.topic-level .qp-progress-label { font-size: 15px; padding: 10px 15px; }
.qp-progress-item.section-level { padding: 0; background-color: var(--qp-dashboard-progress-item-bg); }
.qp-progress-item.section-level .qp-progress-label { font-size: 14px; font-weight: 400; padding: 8px 15px; }

.qp-source-children-container, .qp-topic-sections-container {
    padding-left: 20px; border-left: 2px solid #e0e0e0; margin-left: 15px; padding-top: 5px;
}
.qp-progress-bar-bg { position: absolute; top: 0; left: 0; height: 100%; background-color: var(--qp-dashboard-progress-bar-bg); z-index: 1; transition: width 0.5s ease-in-out; }
.qp-progress-percentage { font-weight: 600; color: var(--qp-dashboard-progress-percentage-text); background-color: rgba(255,255,255,0.7); padding: 2px 6px; border-radius: 4px; font-size: 12px; }
.qp-topic-toggle { cursor: pointer; }
.qp-topic-toggle .qp-progress-label .dashicons { transition: transform 0.2s ease-in-out; font-size: 20px; margin-right: 0; }
.qp-topic-toggle.is-open .qp-progress-label .dashicons { transform: rotate(90deg); }
.qp-progress-item.is-active-group { border-color: #a4c9e8; background-color: #f0f5fa; }
.qp-progress-item.is-active-group > .qp-progress-label { font-weight: 600; color: var(--qp-dashboard-text-dark); }
.qp-sidebar-overlay { /* Mobile overlay */
        position: fixed; top: 0px; left: 0; right: 0; bottom: 0;
        background-color: rgba(0, 0, 0, 0.4); z-index: 1000;
        opacity: 0; visibility: hidden; transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    }
    body.qp-sidebar-open .qp-sidebar-overlay { opacity: 1; visibility: visible; }

    /* --- NEW: Sidebar Close Button --- */
.qp-sidebar-close-btn {
    position: absolute;
    top: 5px; /* Adjust as needed */
    right: 5px; /* Adjust as needed */
    background: none;
    border: none;
    padding: 5px;
    cursor: pointer;
    display: none; /* Hidden by default */
    color: var(--qp-dashboard-text-light);
}
.qp-sidebar-close-btn .dashicons {
    font-size: 24px;
    line-height: 1;
}
.qp-sidebar-close-btn:hover {
    color: var(--qp-dashboard-text-dark);
}
/* Loader for Progress */
#qp-progress-results-container .qp-loader-spinner {
    border: 4px solid #f3f3f3; border-top: 4px solid var(--qp-dashboard-primary);
    border-radius: 50%; width: 30px; height: 30px; animation: spin 1s linear infinite;
    position: absolute; top: 40px; left: 50%; margin-left: -15px;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* --- Review Modal --- */
#qp-review-modal-backdrop {
	position: fixed; top: 0; left: 0; width: 100%; height: 100%;
	background-color: rgba(0, 0, 0, 0.6); z-index: 1050;
	display: none; justify-content: center; align-items: center;
}
#qp-review-modal-backdrop:has(> #qp-review-modal-content) { display: flex; }
#qp-review-modal-content {
	background: #fff; padding: 2rem; border-radius: var(--qp-dashboard-radius);
	max-width: 90%; width: 700px; max-height: 90vh; overflow-y: auto;
	position: relative; box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
#qp-review-modal-content h4 { margin-top: 0; font-size: 1.2em; }
#qp-review-modal-content .qp-direction { background-color: var(--qp-dashboard-card-header-bg); padding: 1rem; border-radius: var(--qp-dashboard-radius); margin-bottom: 1rem; font-size: 0.95em; line-height: 1.5; }
#qp-review-modal-content .question-text { font-size: 1em; margin-bottom: 1.5rem; }
#qp-review-modal-content .option { border: 2px solid var(--qp-dashboard-border-light); padding: 0.8rem 1rem; margin-bottom: 0.5rem; border-radius: var(--qp-dashboard-radius); font-size: 0.95em; }
#qp-review-modal-content .option.correct { border-color: var(--qp-dashboard-success); background-color: #e8f5e9; font-weight: 600; }
.qp-modal-footer { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--qp-dashboard-border-light); text-align: right; }
.qp-modal-footer label { font-weight: 500; cursor: pointer; font-size: 0.9em; }
.qp-modal-footer input[type="checkbox"] { margin-right: 5px; vertical-align: middle; outline:none;}
.qp-modal-close-btn {
	position: absolute; top: 1rem; right: 1rem; font-size: 24px;
	background: none; border: none; cursor: pointer;
	color: var(--qp-dashboard-text-light); line-height: 1; padding: 0;
}
.qp-modal-close-btn:hover { color: var(--qp-dashboard-text-dark); }

/* --- Mobile Header --- */
#qp-mobile-header {
	display: none; /* Hidden by default on desktop */
	align-items: center;
	justify-content: space-between;
	padding: 0 var(--qp-dashboard-mobile-padding);
	height: 50px; /* Adjust height as needed */
	background-color: var(--qp-dashboard-sidebar-bg); /* Use sidebar background */
	border-bottom: 1px solid var(--qp-dashboard-border);
	position: sticky; /* Fixed position */
	left: 0;
	right: 0;
	z-index: 1000; /* Ensure it's above content but below sidebar overlay */
	box-shadow: var(--qp-dashboard-shadow);
}

.qp-mobile-header-title {
	font-weight: 600;
	font-size: 16px;
	color: var(--qp-dashboard-text-dark);
}

/* --- Mobile Responsiveness --- */
@media (max-width: 782px) {
    .qp-main-content {
        padding-top: calc(var(--qp-dashboard-content-padding) + 10px);
	margin-left: 0px;
}
    .qp-sidebar {
        width: var(--qp-dashboard-sidebar-width); /* Full width when open */
        transform: translateX(-100%); /* Start hidden */
        box-shadow: 2px 0 10px rgba(0,0,0,0.1);
    }
    body.qp-sidebar-open .qp-sidebar { transform: translateX(0); } /* Slide in */
    .qp-sidebar-close-btn {
        display: block;
    }
    

    #qp-mobile-header {
		display: flex; /* Show the header only on mobile */
	}
    

	/* Adjust the toggle button's styling when inside the mobile header */
	.qp-sidebar-toggle {
		position: static; /* Remove fixed positioning */
		border: none;
		background: none;
		box-shadow: none;
		width: auto;
		height: auto;
		padding: 5px; /* Add some padding for easier tapping */
	}
    .qp-sidebar-toggle .dashicons {
        font-size: 28px; /* Slightly larger icon */
        line-height: 1;
    }
    body.qp-sidebar-open .qp-sidebar-toggle {
        opacity: 1; /* Keep button visible when sidebar is open */
    }

    .qp-dashboard-layout{
        display: block;
    }
    /* Table adjustments on mobile */
     .qp-recent-history-table, .qp-full-history-table { border: none; box-shadow: none; background: transparent; border-radius: 0;}
     .qp-recent-history-table tr, .qp-full-history-table tr {
         display: block; /* Make rows block elements */
         box-shadow: var(--qp-dashboard-shadow); background: var(--qp-dashboard-card-bg);
         border-radius: var(--qp-dashboard-radius); padding: 0.75rem 1rem; margin-bottom: 1rem;
     }
     .qp-recent-history-table thead, .qp-full-history-table thead { display: none; } /* Hide headers */
     .qp-recent-history-table td, .qp-full-history-table td {
         display: flex; justify-content: space-between; padding: 10px 0;
         border-bottom: 1px dashed var(--qp-dashboard-border-light); text-align: right; align-items: center;
     }
      .qp-recent-history-table tr:last-child td, .qp-full-history-table tr:last-child td { border-bottom: none; }
      .qp-recent-history-table td::before, .qp-full-history-table td::before {
          content: attr(data-label); font-weight: 600; text-align: left;
          margin-right: 1rem; color: var(--qp-dashboard-text-dark);
      }
      .qp-recent-history-table .qp-actions-cell, .qp-full-history-table .qp-actions-cell { justify-content: flex-end; }
      .qp-recent-history-table .qp-actions-cell .qp-button, .qp-full-history-table .qp-actions-cell .qp-button,
      .qp-recent-history-table .qp-actions-cell .qp-delete-session-btn, .qp-full-history-table .qp-actions-cell .qp-delete-session-btn { margin-left: 5px; }

     /* Active sessions card on mobile */
     .qp-active-session-card { flex-direction: column; align-items: flex-start; }
     .qp-card-actions { margin-top: 0.5rem; }
     .qp-card-actions .qp-button { flex-grow: 1; text-align: center; }

     /* Review list actions on mobile */
      ul.qp-review-list li { flex-direction: column; align-items: stretch; }
      .qp-review-list-actions { width: 100%; margin-top: 0.5rem; justify-content: flex-end; }
      .qp-review-list-actions .qp-button { padding: 6px 14px; }

      /* Progress filters stacking */
      .qp-progress-filters .qp-form-group { min-width: 100%; } /* Full width */
      .qp-progress-filters .qp-custom-checkbox { margin-top: 0; } /* Remove extra top margin */

}

/* Hide toggle button on desktop */
@media (min-width: 783px) {
    .qp-sidebar-toggle { display: none; }
}

/* --- Base Button Styles --- */
/* (Copied from previous step - ensure these are correct and consistent) */
.qp-button {
    text-decoration: none; font-weight: 500; padding: 10px 18px;
    border-radius: var(--qp-dashboard-radius); transition: all 0.2s ease; border: 1px solid transparent;
    cursor: pointer; font-size: 14px; text-align: center; line-height: 1.4;
    box-shadow: 0 1px 1px rgba(0,0,0,0.04);
}
.qp-button:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--qp-dashboard-shadow); }
.qp-button-primary { background-color: var(--qp-dashboard-primary); color: var(--qp-dashboard-text-white); border-color: var(--qp-dashboard-primary); }
.qp-button-primary:hover:not(:disabled) { background-color: var(--qp-dashboard-primary-hover); border-color: var(--qp-dashboard-primary-hover); }
.qp-button-secondary { background-color: var(--qp-dashboard-card-bg); color: var(--qp-dashboard-text-dark); border-color: var(--qp-dashboard-border); }
.qp-button-secondary:hover:not(:disabled) {
    background-color: #e6e6e6; /* <-- Slightly darker grey */
    border-color: #c8cacf;
    color: var(--qp-dashboard-text-dark); /* Ensure text color remains dark */
}
.qp-button-danger { background-color: var(--qp-dashboard-danger); color: var(--qp-dashboard-text-white); border-color: var(--qp-dashboard-danger); }
.qp-button-danger:hover:not(:disabled) { background-color: var(--qp-dashboard-danger-hover); border-color: var(--qp-dashboard-danger-hover); }
.qp-button:disabled { background-color: #e2e4e6; border-color: #e2e4e6; color: #a0a5aa; cursor: not-allowed; box-shadow: none; transform: none; opacity: 0.7; }

/* --- Custom Checkbox --- */
/* (Copied from previous step - ensure these are correct and consistent) */
.qp-custom-checkbox { display: inline-flex; align-items: center; padding-left: 25px; position: relative; cursor: pointer; user-select: none; line-height: 1.4; }
.qp-custom-checkbox input { position: absolute; opacity: 0; height: 0; width: 0; }
.qp-custom-checkbox span { position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 16px; width: 16px; background: #fff; border: 1px solid var(--qp-dashboard-border); border-radius: 3px; transition: all 0.2s ease;}
.qp-custom-checkbox input:checked~span { background-color: var(--qp-dashboard-primary); border-color: var(--qp-dashboard-primary); }
.qp-custom-checkbox span::after { content: ""; position: absolute; display: none; left: 5px; top: 2px; width: 4px; height: 8px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.qp-custom-checkbox input:checked~span::after { display: block; }
.qp-custom-checkbox input:focus~span { box-shadow: 0 0 0 1px var(--qp-dashboard-primary); }

/* =================================================================
   Dashboard Polish - History, Review, Progress Sections
   ================================================================= */

/* --- History Section Polish --- */
.qp-history-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--qp-dashboard-border-light); /* Lighter border */
}

/* Ensure full history table matches recent history styling */
.qp-full-history-table {
    border-color: var(--qp-dashboard-border-light);
    background-color: var(--qp-dashboard-card-bg); /* Use card background */
}
.qp-full-history-table th {
    font-size: 13px; /* Smaller header font */
    background-color: var(--qp-dashboard-table-header-bg);
    border-bottom-color: var(--qp-dashboard-border-light);
}
.qp-full-history-table td {
    border-bottom-color: var(--qp-dashboard-border-light);
    color: var(--qp-dashboard-text-dark);
}
.qp-full-history-table td[data-label="Result"] strong {
    font-weight: 600; /* Ensure result stands out */
}
.qp-full-history-table tr:last-child td {
    border-bottom: none;
}
.qp-full-history-table tr.qp-session-paused td {
    background-color: var(--qp-dashboard-paused-bg); /* Ensure paused style */
}
/* Ensure consistent action button styling in full history table */
.qp-full-history-table .qp-actions-cell .qp-button,
.qp-full-history-table .qp-actions-cell .qp-delete-session-btn {
    opacity: 0.7; /* Dim by default */
    transition: opacity 0.2s ease;
}
.qp-full-history-table tr:hover .qp-actions-cell .qp-button,
.qp-full-history-table tr:hover .qp-actions-cell .qp-delete-session-btn {
    opacity: 1; /* Show fully on hover */
}
.qp-full-history-table .qp-actions-cell .qp-delete-session-btn {
    padding: 4px 6px; /* Adjust padding */
}

/* Mobile history table card consistency */
@media (max-width: 782px) {
    .qp-full-history-table tr {
        border-color: var(--qp-dashboard-border-light);
        background-color: var(--qp-dashboard-card-bg);
    }
     .qp-full-history-table td {
         border-bottom-color: var(--qp-dashboard-border-light);
     }
      .qp-full-history-table tr.qp-session-paused {
          background-color: var(--qp-dashboard-paused-bg);
          border-left: 4px solid var(--qp-dashboard-warning);
      }
}


/* --- Review Section Polish --- */
/* Style the "Practice Mistakes" card consistently */
#qp-dashboard-review .qp-practice-card {
    border-color: var(--qp-dashboard-border-light);
    background-color: var(--qp-dashboard-card-bg); /* Match card background */
}
#qp-dashboard-review .qp-practice-card .qp-card-content h4 {
    font-size: 1.15em; /* Match h3 size */
    margin-bottom: 0.5rem;
}
#qp-dashboard-review .qp-practice-card p {
    color: var(--qp-dashboard-text-light);
    font-size: 0.95em; /* Slightly smaller text */
    line-height: 1.5;
}
#qp-dashboard-review .qp-practice-card .qp-card-action .qp-custom-checkbox {
    font-size: 13px; /* Consistent checkbox label size */
}

/* Refine Review List Header */
.qp-review-list-header {
    border-bottom-color: var(--qp-dashboard-border-light);
    margin-top: 2rem; /* More space after divider */
    margin-bottom: 0; /* Remove bottom margin, list handles spacing */
    padding-bottom: 0.75rem;
}
.qp-review-list-header h3 { font-size: 1.3em; }

/* Refine Review List Items */
ul.qp-review-list {
    margin-top: 0; /* Remove top margin */
    border-color: var(--qp-dashboard-border-light);
    background-color: var(--qp-dashboard-card-bg);
}
ul.qp-review-list li {
    padding: 1rem 1.5rem; /* Match card padding */
    border-bottom-color: var(--qp-dashboard-border-light);
}
.qp-review-list-q-text { font-size: 1em; } /* Slightly larger text */
.qp-review-list-q-text small { font-size: 0.85em; } /* Smaller meta text */


/* --- Progress Section Polish --- */
/* Filter card refinement */
.qp-progress-filters {
    border-color: var(--qp-dashboard-border-light);
    background-color: var(--qp-dashboard-card-bg); /* Match card background */
    box-shadow: var(--qp-dashboard-shadow);
}
.qp-progress-filters .qp-form-group label { font-size: 13px; }

/* Progress Results Container */
#qp-progress-results-container {
    border-color: var(--qp-dashboard-border-light);
}

/* Progress Tree Item Refinements */
.qp-progress-item {
    border-color: var(--qp-dashboard-border-light); /* Lighter border for all items */
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
 .qp-progress-item:hover {
     border-color: #c8cacf; /* Darker border on hover */
     box-shadow: var(--qp-dashboard-shadow);
 }
.qp-progress-item.subject-level { background-color: var(--qp-dashboard-card-header-bg); border-color: var(--qp-dashboard-border); }
.qp-progress-item.topic-level { background-color: #fcfcfc; } /* Very light grey */
.qp-progress-item.section-level { background-color: var(--qp-dashboard-card-bg); }

.qp-progress-label { padding: 10px 15px; } /* Consistent padding */
.qp-progress-item.subject-level .qp-progress-label { padding: 12px 15px; }

.qp-progress-item-name { font-weight: 500; }
.qp-progress-item.subject-level .qp-progress-item-name { font-weight: 700; }

.qp-source-children-container, .qp-topic-sections-container {
    border-left-color: var(--qp-dashboard-border-light); /* Lighter indentation line */
}

/* Active group highlight */
.qp-progress-item.is-active-group {
    border-color: var(--qp-dashboard-primary-light); /* Light blue border */
    background-color: var(--qp-dashboard-nav-active-bg); /* Use nav active bg */
}
.qp-progress-item.is-active-group > .qp-progress-label {
    font-weight: 600; /* Bolder for active */
}

/* Progress Percentage Bubble */
.qp-progress-percentage {
    background-color: var(--qp-dashboard-primary-light); /* Light blue background */
    color: var(--qp-dashboard-primary); /* Darker blue text */
    font-weight: 600; /* Bolder percentage */
    border: 1px solid #b3d7f3; /* Subtle border */
}

/* --- Course Structure View --- */
.qp-course-structure-header {
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--qp-dashboard-border);
}

.qp-course-section-card {
    margin-bottom: 1.5rem;
}

.qp-course-items-list .qp-course-item-row:last-child {
    border-bottom: none;
}

.qp-course-item-link {
    cursor: default; /* Make it look non-interactive for now */
    flex-grow: 1; /* Allow title to take space */
}

/* Add hover effect if you make the title linkable later */
/*
.qp-course-item-link:hover span:last-child {
    text-decoration: underline;
    color: var(--qp-dashboard-link-hover);
}
*/

.qp-course-item-row .dashicons {
    font-size: 18px;
    line-height: 1;
}

.qp-course-item-row .qp-card-actions{
    width: auto;
}

/* =================================================================
   Profile Tab Styles
   ================================================================= */

.qp-profile-page h2 {
    margin-bottom: 2rem; /* Add more space below the main heading */
    text-align: left; /* Align heading to the left */
}

.qp-profile-layout {
    display: grid;
    grid-template-columns: 300px 1fr; /* Fixed width for profile card, flexible for details */
    gap: 1.5rem; /* Space between the two columns */
    align-items: start; /* Align items to the top of their grid area */
}

/* --- Profile Card (Left Column) --- */
.qp-profile-card .qp-card-content {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center avatar, name, email */
    text-align: center;
}

.qp-profile-avatar {
    margin-bottom: 1rem;
}

.qp-profile-avatar img {
    border-radius: 50%;
    border: 3px solid var(--qp-dashboard-bg); /* Use page background for border */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Subtle shadow */
    width: 128px; /* Ensure size */
    height: 128px;
    object-fit: cover; /* Prevent distortion */
}

.qp-profile-name {
    font-size: 1.4em; /* Larger name */
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.qp-profile-email {
    color: var(--qp-dashboard-text-light);
    margin-bottom: 1.5rem;
    word-break: break-all; /* Prevent long emails overflowing */
}

.qp-edit-profile-button {
    width: 100%; /* Make button full width */
    margin-bottom: 0.5rem; /* Space before description */
}

/* --- Detail Cards (Right Column) --- */
.qp-profile-details {
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* Space between cards in the right column */
}

.qp-access-card .qp-card-content p {
    color: var(--qp-dashboard-text-dark); /* Darker text for scope */
    font-size: 1em;
    line-height: 1.6;
}

/* --- Responsive Adjustments --- */
@media (max-width: 900px) { /* Adjust breakpoint if needed */
    .qp-profile-layout {
        grid-template-columns: 1fr; /* Stack columns on smaller screens */
    }

    .qp-profile-card .qp-card-content {
        /* Keep centered layout for profile card */
    }
}

@media (max-width: 782px) { /* Match sidebar breakpoint */
    .qp-profile-page h2 {
        text-align: center; /* Center heading on mobile */
    }
}

/* --- Profile Card Form & Display/Edit States --- */
#qp-profile-update-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Display State (Default) */
.qp-profile-display {
    width: 100%;
    text-align: center;
}
.qp-profile-display .qp-profile-name { /* Reuse existing name style */
    font-size: 1.4em;
    font-weight: 600;
    margin-bottom: 0.25rem;
}
.qp-profile-display .qp-profile-email { /* Reuse existing email style */
    color: var(--qp-dashboard-text-light);
    margin-bottom: 1.5rem;
    word-break: break-all;
}
.qp-profile-display .qp-edit-profile-button {
    width: 100%;
    box-sizing: border-box; /* Include padding in width */
}

/* Edit State (Hidden by default) */
.qp-profile-edit {
    display: none; /* Hidden initially */
    width: 100%;
}
.qp-profile-field { /* Styles for input fields in edit mode */
    width: 100%;
    margin-bottom: 1rem;
    text-align: left;
}
.qp-profile-field label {
    font-weight: 600;
    font-size: 0.9em;
    color: var(--qp-dashboard-text-light);
    margin-bottom: 5px;
    display: block;
}
.qp-profile-field input[type="text"],
.qp-profile-field input[type="email"] {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--qp-dashboard-border);
    border-radius: 4px;
    font-size: 1em;
    box-sizing: border-box;
}
.qp-profile-edit-actions {
    display: flex;
    gap: 10px; /* Space between Cancel and Save */
    margin-top: 1rem;
}
.qp-profile-edit-actions .qp-button {
    flex-grow: 1; /* Make buttons share space */
}

/* Avatar Specific Styles */
.qp-profile-avatar-wrapper {
    position: relative;
    margin-bottom: 1rem;
    display: flex; /* Arrange items vertically */
    flex-direction: column;
    align-items: center; /* Center items horizontally */
}
.qp-profile-avatar-wrapper img { /* Reuse existing styles */
    border-radius: 50%;
    border: 3px solid var(--qp-dashboard-bg);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    width: 128px;
    height: 128px;
    object-fit: cover;
}
/* Add hover effect only when editing */
.qp-profile-card.is-editing .qp-profile-avatar-wrapper img {
    cursor: pointer;
    border: 3px solid var(--qp-dashboard-primary-light); /* Highlight on hover */
}
.qp-change-avatar-button { /* Style for the change button */
    position: absolute;
    bottom: 5px; /* Position near the bottom */
    left: 50%;
    /* REMOVE transform: translateX(-50%); */
    margin-left: -55px; /* Adjust this value (approx half the button's width) to center */
    width: 110px; /* Give it a defined width */
    padding: 4px 10px;
    font-size: 12px;
    opacity: 0.8;
    transition: opacity 0.2s ease;
    text-align: center; /* Ensure text is centered */
    box-sizing: border-box; /* Include padding in width */
}
.qp-change-avatar-button:hover {
    opacity: 1;
}
.qp-avatar-upload-actions {
    display: none; /* Hidden by default */
    justify-content: center;
    width: 100%;
}
.qp-avatar-upload-actions .button-small { /* Adjust size */
    padding: 4px 10px;
    font-size: 12px;
}

/* --- Toggle Visibility Classes --- */
.qp-profile-card .qp-profile-display {
    display: flex; /* Keep display visible by default */
    flex-direction: column;
    align-items: center;
    width: 100%;
}
.qp-profile-card .qp-profile-edit {
    display: none; /* Keep edit hidden by default */
    width: 100%;
}
.qp-profile-card.is-editing .qp-profile-display {
    display: none !important; /* Force hide display when editing */
}
.qp-profile-card.is-editing .qp-profile-edit {
    display: flex !important; /* Force show edit fields (using flex) when editing */
    flex-direction: column;
    align-items: center;
}
/* Show avatar change button only when editing */
.qp-profile-card .qp-change-avatar-button {
     display: none; /* Hide avatar change button by default */
}
.qp-profile-card.is-editing .qp-change-avatar-button {
    display: inline-block; /* Show only when editing */
}

/* --- Password Card Styles --- */
.qp-password-card .qp-card-content {
    /* Potential specific styles for the card content if needed */
}

/* Display State */
.qp-password-display {
    /* Styles for the default view */
}
.qp-password-display p {
    margin-bottom: 1rem;
    color: var(--qp-dashboard-text-light);
}

/* Edit State */
.qp-password-edit {
    display: none; /* Hidden by default */
}
.qp-password-card.is-editing .qp-password-display {
    display: none !important; /* Hide display text when editing */
}
.qp-password-card.is-editing .qp-password-edit {
    display: block !important; /* Show form when editing */
}

/* Form field styles (reuse profile field styles) */
.qp-password-edit .qp-profile-field {
    margin-bottom: 1rem;
    text-align: left;
}
.qp-password-edit .qp-profile-field label {
    font-weight: 600;
    font-size: 0.9em;
    color: var(--qp-dashboard-text-light);
    margin-bottom: 5px;
    display: block;
}
.qp-password-edit .qp-profile-field input[type="password"] {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--qp-dashboard-border);
    border-radius: 4px;
    font-size: 1em;
    box-sizing: border-box;
}
.qp-password-edit-actions {
    display: flex;
    gap: 10px;
    margin-top: 1.5rem; /* More space before buttons */
}
.qp-password-edit-actions .qp-button {
    flex-grow: 1;
}

/* --- Forgot Password Link --- */
.qp-forgot-password-link-wrapper {
    margin-top: 1rem; /* Space above the link */
    text-align: center; /* Center the link below the button */
    margin-bottom: 0; /* Remove default paragraph bottom margin */
}

.qp-forgot-password-link {
    font-size: 0.9em; /* Slightly smaller text */
    color: var(--qp-dashboard-text-light); /* Use secondary text color */
    text-decoration: none;
    transition: color 0.2s ease;
}

.qp-forgot-password-link:hover {
    color: var(--qp-dashboard-link-hover); /* Use link hover color */
    text-decoration: underline;
}

/* --- Single Course Page Styles --- */
.qp-course-action-box {
    background-color: var(--qp-dashboard-card-header-bg);
    border: 1px solid var(--qp-dashboard-border);
    border-radius: var(--qp-dashboard-radius);
    padding: 1.5rem;
    margin: 2rem 0;
    text-align: center;
}

.qp-course-action-box .qp-button {
    padding: 12px 28px;
    font-size: 1.1em;
    font-weight: 600;
}

.qp-course-syllabus {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--qp-dashboard-border-light);
}

.qp-course-syllabus h2 {
    text-align: left;
    margin-bottom: 1.5rem;
}

.qp-syllabus-section {
    margin-bottom: 1.5rem;
}

.qp-syllabus-section-title {
    font-size: 1.15em;
    font-weight: 600;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--qp-dashboard-border-light);
    margin-bottom: 1rem;
}

ul.qp-syllabus-items {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

ul.qp-syllabus-items li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1em;
    color: var(--qp-dashboard-text-light);
    padding: 8px 0;
}

ul.qp-syllabus-items li .dashicons {
    color: var(--qp-dashboard-primary);
    font-size: 18px;
}

/* --- Progressive Course Lock Styles --- */

.qp-syllabus-items li.qp-item-locked {
    color: #9e9e9e; /* Light grey text */
    opacity: 0.7;
}

.qp-syllabus-items li.qp-item-locked .dashicons {
    color: #9e9e9e; /* Light grey icon */
}

.qp-course-item-row.qp-item-locked .qp-course-item-link span:last-child {
     color: var(--qp-dashboard-text-light);
     opacity: 0.7;
}

.qp-course-item-row.qp-item-locked .qp-button:disabled {
    background-color: #f0f0f1;
    border-color: var(--qp-dashboard-border-light);
    color: #a0a5aa;
    opacity: 0.8;
}


/* =================================================================
   NEW: History Page (Material Design Inspired)
   ================================================================= */

/* --- Clean "No Results" Card --- */
.qp-no-results-card .qp-card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    color: var(--qp-dashboard-text-light);
}
.qp-no-results-card .dashicons {
    font-size: 48px;
    height: 48px;
    width: 48px;
    margin-bottom: 1rem;
}

/* --- Material-Style Tabs --- */
.qp-md-tabs {
    position: relative;
    border-bottom: 1px solid var(--qp-dashboard-border-light);
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}
.qp-md-tab-list {
    display: flex;
    gap: 1rem;
}
.qp-md-tab-link {
    font-size: 15px;
    font-weight: 600;
    color: var(--qp-dashboard-text-light);
    background: none;
    border: none;
    padding: 0.75rem 0.5rem;
    cursor: pointer;
    position: relative;
    border-bottom: 2px solid transparent;
    margin-bottom: -1.5px; /* Sits on top of the container border */
    transition: color 0.2s ease;
}
.qp-md-tab-link:hover {
    color: var(--qp-dashboard-text-dark);
}
.qp-md-tab-link.active {
    color: var(--qp-dashboard-primary);
    border-bottom-color: var(--qp-dashboard-primary);
}

/* --- History List Layout --- */
.qp-history-list {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* Space between cards */
}

.qp-history-item-card {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.25rem;
    transition: all 0.2s ease-out;
    border-radius: 8px; /* Softer radius */
}
.qp-history-item-card:hover {
    background-color: #fcfcfc;
    box-shadow: var(--qp-dashboard-shadow-hover);
    transform: translateY(-2px);
}

/* 1. Icon */
.qp-history-item-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--qp-dashboard-primary);
    color: #fff;
}
.qp-history-item-icon .dashicons {
    font-size: 24px;
    width: 24px;
    height: 24px;
}

/* 2. Main Content Block */
.qp-history-item-main {
    flex-grow: 1;
}

.qp-history-item-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 0.5rem;
}
.qp-history-item-mode {
    font-size: 1.2em; /* 18px */
    font-weight: 600;
    color: var(--qp-dashboard-text-dark);
    line-height: 1.3;
}
.qp-history-item-result {
    font-size: 1.5em; /* 21px */
    font-weight: 700;
    color: var(--qp-dashboard-text-dark);
    flex-shrink: 0;
}

.qp-history-item-context {
    font-size: 14px;
    color: var(--qp-dashboard-text-light);
    margin-bottom: 1rem;
    line-height: 1.4;
}
.qp-history-item-context .context-label {
    font-weight: 600;
    color: var(--qp-dashboard-text-light);
    margin-right: 4px;
}

/* 3. Sub-Stats (re-using from previous CSS) */
.qp-history-item-card .qp-card-sub-stats {
    display: flex; /* Changed from grid to flex */
    gap: 2rem; /* Increased gap */
    width: 100%;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--qp-dashboard-border-light);
}
.qp-history-item-card .qp-card-sub-stats .stat-item {
    padding: 0; border: none; background: none;
    text-align: left; /* Align left */
}
.qp-history-item-card .qp-card-sub-stats .stat-value {
    font-size: 1.25em; /* 18px */
    font-weight: 600;
    line-height: 1;
}
.qp-history-item-card .qp-card-sub-stats .stat-label {
    font-size: 11px;
    text-transform: uppercase;
}
/* Sub-stat colors */
.qp-card-sub-stats .stat-item.correct .stat-value { color: var(--qp-dashboard-success); }
.qp-card-sub-stats .stat-item.incorrect .stat-value { color: var(--qp-dashboard-danger); }
.qp-card-sub-stats .stat-item.skipped .stat-value { color: var(--qp-dashboard-text-light); }


/* 4. Actions Block */
.qp-history-item-actions {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    min-height: 70px; /* Align with sub-stats */
}
.qp-history-item-date {
    font-size: 13px;
    color: var(--qp-dashboard-text-light);
    margin-bottom: auto; /* Pushes to top */
}

.qp-history-item-actions .qp-delete-session-btn {
    color: var(--qp-dashboard-text-light);
    background: transparent;
    border: none;
    padding: 4px;
    opacity: 0.6;
    align-self: flex-start; /* Puts it on the left of this column */
    margin-top: -8px; /* Nudge up */
}
.qp-history-item-actions .qp-delete-session-btn:hover {
    color: var(--qp-dashboard-danger);
    opacity: 1;
}
.qp-history-item-actions .qp-button {
    min-width: 100px;
    text-align: center;
}
.qp-history-item-paused .qp-history-item-actions {
    flex-direction: row; /* Paused card has horizontal buttons */
    align-items: center;
    min-height: 0;
}


/* --- Mode-Specific Colors --- */
.mode-normal .qp-history-item-icon { background-color: var(--qp-dashboard-primary); }
.mode-normal .qp-button-review { border-color: var(--qp-dashboard-primary); color: var(--qp-dashboard-primary); }

.mode-course-test .qp-history-item-icon { background-color: #5d3d9b; } /* Purple */
.mode-course-test .qp-button-review { 
    border-color: #5d3d9b; color: #5d3d9b; 
}
.mode-course-test .qp-button-review:hover {
    background-color: #5d3d9b; color: #fff; border-color: #5d3d9b;
}

.mode-mock-test .qp-history-item-icon { background-color: var(--qp-dashboard-danger); }
.mode-mock-test .qp-button-review { 
    border-color: var(--qp-dashboard-danger); color: var(--qp-dashboard-danger); 
}
.mode-mock-test .qp-button-review:hover {
    background-color: var(--qp-dashboard-danger); color: #fff; border-color: var(--qp-dashboard-danger);
}

.mode-revision .qp-history-item-icon { background-color: #3949ab; } /* Indigo */
.mode-revision .qp-button-review { 
    border-color: #3949ab; color: #3949ab; 
}
.mode-revision .qp-button-review:hover {
    background-color: #3949ab; color: #fff; border-color: #3949ab;
}

.mode-incorrect .qp-history-item-icon { background-color: #f57c00; } /* Orange */
.mode-incorrect .qp-button-review { 
    border-color: #f57c00; color: #f57c00; 
}
.mode-incorrect .qp-button-review:hover {
    background-color: #f57c00; color: #fff; border-color: #f57c00;
}

.mode-section-wise .qp-history-item-icon { background-color: #00897b; } /* Teal */
.mode-section-wise .qp-button-review { 
    border-color: #00897b; color: #00897b; 
}
.mode-section-wise .qp-button-review:hover {
    background-color: #00897b; color: #fff; border-color: #00897b;
}

.mode-review .qp-history-item-icon { background-color: #1e88e5; } /* Blue */
.mode-review .qp-button-review { 
    border-color: #1e88e5; color: #1e88e5; 
}
.mode-review .qp-button-review:hover {
    background-color: #1e88e5; color: #fff; border-color: #1e88e5;
}


/* --- Responsive --- */
@media (max-width: 782px) {
    .qp-history-item-card {
        flex-direction: column;
        align-items: flex-start; /* Align left */
        gap: 0.5rem;
    }
    .qp-history-item-icon {
        top: 1.25rem;
        right: 1.25rem;
        width: 36px;
        height: 36px;
    }
    .qp-history-item-icon .dashicons {
        font-size: 20px; width: 20px; height: 20px;
    }
    .qp-history-item-main {
        width: 100%;
    }
    .qp-history-item-header {
        flex-direction: column-reverse; /* Put score on top */
        align-items: flex-start;
        gap: 0;
        margin-bottom: 0.75rem;
    }
    .qp-history-item-result {
        font-size: 2em; /* Bigger on mobile */
    }
    .qp-history-item-mode {
        font-size: 1.1em;
    }
    .qp-history-item-context {
        margin-bottom: 0;
    }
    .qp-history-item-card .qp-card-sub-stats {
        gap: 1.5rem;
        padding-bottom: 1rem;
    }

    .qp-history-item-actions {
        width: 100%;
        flex-direction: row-reverse; /* Review button on right */
        align-items: center;
        justify-content: flex-start;
        gap: 0.75rem;
        min-height: 0;
        margin-top: 0.5rem;
    }
    .qp-history-item-actions .qp-button {
        flex-grow: 1; /* Make button fill space */
    }
    .qp-history-item-date {
        margin-bottom: 0;
        margin-right: auto; /* Pushes to left */
    }
    .qp-history-item-actions .qp-delete-session-btn {
        align-self: center;
        margin-top: 0;
    }
    .qp-history-item-paused .qp-history-item-actions {
        flex-direction: row; /* Stays row */
    }
}