/* White canvas for LMS pages only (catalog, my-progress, module pages).
   Scoped to body.vlk-lms-page, which the plugin only adds to those specific
   pages — this can never affect the rest of the site's theme/colors.
   Covers the body itself plus the handful of wrapper class/element names
   nearly every WordPress theme uses for its main content area; if your
   theme uses different names for its content wrapper, the visible content
   area may still show through — tell Claude your theme name and this can
   be tightened further. */
body.vlk-lms-page,
body.vlk-lms-page #content,
body.vlk-lms-page .site-content,
body.vlk-lms-page .content-area,
body.vlk-lms-page main,
body.vlk-lms-page .entry-content,
body.vlk-lms-page .page-content {
	background-color: #ffffff !important;
}

/* Full-focus layout: hide the theme's sidebar/widget area on LMS pages and
   let the main content column take the full width, so the module is the
   only thing on the page instead of sharing space with a sidebar. Covers
   the sidebar and two-column-wrapper class/element names most WordPress
   themes use; tell Claude your theme name if a sidebar (or a blank gap
   where it used to be) still shows and this can be tightened further. */
body.vlk-lms-page .sidebar,
body.vlk-lms-page #secondary,
body.vlk-lms-page .widget-area,
body.vlk-lms-page #sidebar,
body.vlk-lms-page .site-sidebar,
body.vlk-lms-page aside[class*="sidebar"] {
	display: none !important;
}
body.vlk-lms-page #primary,
body.vlk-lms-page .content-area,
body.vlk-lms-page #content,
body.vlk-lms-page .site-content,
body.vlk-lms-page main {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
}

.vlk-lms-root { max-width: 980px; margin: 0 auto; padding: 8px 16px 48px; font-family: -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }
.vlk-course-page-wrap { background: #ffffff; min-height: 60vh; padding-top: 12px; }
.vlk-course-back { margin-bottom: 0; }
.vlk-course-back a { color: #666; text-decoration: none; font-size: 14px; }
.vlk-course-back a:hover { text-decoration: underline; }
.vlk-course-back-sep { color: #ccc; margin: 0 8px; }

.vlk-lms-nav { padding: 10px 0 16px; font-size: 14px; }
.vlk-lms-nav a { color: #444; text-decoration: none; font-weight: 600; }
.vlk-lms-nav a:hover { text-decoration: underline; color: #0b5fff; }
.vlk-lms-nav-sep { color: #ccc; margin: 0 10px; }
.vlk-notice { padding: 16px; background: #fff8e1; border: 1px solid #f0c36d; border-radius: 6px; }
.vlk-error { color: #b00020; }

.vlk-catalog-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.vlk-my-progress-link { text-decoration: none; white-space: nowrap; }
.vlk-catalog-search { flex: 1 1 220px; min-width: 180px; padding: 10px 14px; border: 1px solid #ccc; border-radius: 8px; font-size: 14px; }
.vlk-catalog-tabs { display: flex; gap: 6px; border-bottom: 1px solid #e2e2e2; margin-bottom: 18px; }
.vlk-catalog-tab { padding: 10px 16px; border: none; background: none; cursor: pointer; font-size: 14px; font-weight: 600; color: #777; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.vlk-catalog-tab:hover { color: #1a1a1a; }
.vlk-catalog-tab-active { color: #0b5fff; border-bottom-color: #0b5fff; }
.vlk-catalog-tab-count { font-weight: 400; color: #999; }
.vlk-catalog-empty { color: #777; padding: 24px 0; }

.vlk-catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.vlk-card { display: block; padding: 16px; border: 1px solid #ddd; border-radius: 10px; text-decoration: none; color: #1a1a1a; background: #fff; transition: box-shadow .15s ease; }
.vlk-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.vlk-card-id { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: #555; }
.vlk-card-title { font-size: 16px; font-weight: 600; margin: 4px 0 6px; }
.vlk-card-meta { font-size: 12px; color: #777; margin-bottom: 8px; }
.vlk-card-status { font-size: 12px; margin-top: 6px; font-weight: 600; }
.vlk-status-completed .vlk-card-status { color: #1a7f37; }
.vlk-status-quiz_passed .vlk-card-status { color: #2271b1; }
.vlk-status-in_progress .vlk-card-status { color: #996800; }
.vlk-status-not_started .vlk-card-status { color: #777; }

.vlk-progress-bar { height: 8px; background: #eee; border-radius: 6px; overflow: hidden; margin: 8px 0 16px; }
.vlk-progress-bar span { display: block; height: 100%; background: #0b5fff; border-radius: 6px; transition: width .2s ease; }

.vlk-course-header { font-size: 13px; text-transform: uppercase; letter-spacing: .03em; color: #555; margin-bottom: 6px; font-weight: 700; }
.vlk-sop-tag { background: #0b5fff; color: #fff; padding: 2px 8px; border-radius: 4px; margin-right: 6px; }

.vlk-slide { background: #fff; border: 1px solid #e2e2e2; border-radius: 10px; padding: 24px 28px; min-height: 220px; }
.vlk-slide h3 { margin-top: 0; font-size: 22px; }
.vlk-slide-body ul { padding-left: 20px; }
.vlk-slide-body { font-size: 16px; line-height: 1.55; }

.vlk-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; }
.vlk-slide-count { color: #777; font-size: 13px; }
.vlk-btn { padding: 10px 18px; border-radius: 8px; border: 1px solid #ccc; background: #f7f7f7; cursor: pointer; font-size: 14px; }
.vlk-btn:disabled { opacity: .4; cursor: not-allowed; }
.vlk-btn-primary { background: #0b5fff; border-color: #0b5fff; color: #fff; font-weight: 600; }

.vlk-quiz-q { background: #fff; border: 1px solid #e2e2e2; border-radius: 10px; padding: 24px 28px; }
.vlk-choices { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.vlk-choice { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid #ddd; border-radius: 8px; cursor: pointer; }
.vlk-choice:hover { background: #f5f8ff; }

.vlk-quiz-score { font-size: 22px; font-weight: 700; margin: 12px 0 18px; }
.vlk-quiz-score.vlk-pass { color: #1a7f37; }
.vlk-quiz-score.vlk-fail { color: #b00020; }
.vlk-review { border-left: 4px solid #ccc; padding: 8px 14px; margin-bottom: 10px; background: #fafafa; }
.vlk-review.vlk-correct { border-color: #1a7f37; }
.vlk-review.vlk-incorrect { border-color: #b00020; }
.vlk-explain { color: #555; font-size: 14px; margin-top: 4px; }

.vlk-progress-table { width: 100%; border-collapse: collapse; }
.vlk-progress-table th, .vlk-progress-table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid #eee; }