/* ================================================================
   Kokoro Academy – Student Profile Dashboard
   All rules scoped to #learn-press-profile so nothing else breaks.
   ================================================================ */

/* ----------------------------------------------------------------
   Brand tokens (defined at :root so var() resolves everywhere)
   ---------------------------------------------------------------- */
:root {
	--kka-sidebar-bg:          #ffffff;
	--kka-sidebar-text:        #4b5563;
	--kka-sidebar-hover:       #f3f4f6;
	--kka-sidebar-active-bg:   #804bd5;   /* Kokoro purple accent */
	--kka-sidebar-active-text: #ffffff;
	--kka-sidebar-width:       220px;

	--kka-content-bg:     #f5f3ff;   /* very light lavender */
	--kka-card-bg:        #ffffff;
	--kka-accent:         #804bd5;   /* Kokoro purple */
	--kka-accent-light:   #f3eeff;
	--kka-accent-dark:    #6a3ab5;

	--kka-text:           #18103e;
	--kka-muted:          #6b6b8a;
	--kka-border:         #e8e4f8;

	--kka-card-radius:    12px;
	--kka-pill-radius:    8px;
	--kka-shadow:         0 1px 6px rgba(26, 21, 39, 0.08);
}

/* ----------------------------------------------------------------
   1. Profile page basics
   ---------------------------------------------------------------- */
#learn-press-profile {
	min-height: 70vh;
}

/* ----------------------------------------------------------------
   2. Sidebar – colour overrides only (layout left to LP/theme)
      The parent theme sets background on the <li>, not the <a>.
      We must override at the li level to respect border-radius.
   ---------------------------------------------------------------- */

/* Active + hover: purple background on the li (matches theme's border-radius) */
#learn-press-profile .lp-profile-nav-tabs > li.active,
#learn-press-profile .lp-profile-nav-tabs > li:hover {
	background-color: var(--kka-accent) !important;
}

/* Text and icons: white on active/hover, transparent bg on the a tag */
#learn-press-profile .lp-profile-nav-tabs > li.active > a,
#learn-press-profile .lp-profile-nav-tabs > li.active > a i,
#learn-press-profile .lp-profile-nav-tabs > li:hover > a,
#learn-press-profile .lp-profile-nav-tabs > li:hover > a i {
	color:      #ffffff !important;
	background: transparent !important;
}

/* Sub-section active/hover links */
#learn-press-profile .profile-tab-sections li.active a,
#learn-press-profile .profile-tab-sections li a:hover {
	color: var(--kka-accent) !important;
}

/* ----------------------------------------------------------------
   3. Main content area – light background to match brand
   ---------------------------------------------------------------- */
#learn-press-profile #profile-content,
#learn-press-profile .lp-profile-content {
	padding:    30px 32px !important;
	background: var(--kka-content-bg) !important;
}

/* ----------------------------------------------------------------
   5. Dashboard header
   ---------------------------------------------------------------- */
.kka-dashboard {
	max-width: 900px;
}

.kka-dash-header {
	margin-bottom: 6px;
}

.kka-dash-header h2 {
	font-size:   22px;
	font-weight: 800;
	color:       var(--kka-text);
	margin:      0 0 4px;
}

.kka-dash-header p {
	font-size: 14px;
	color:     var(--kka-muted);
	margin:    0 0 20px;
}

/* ----------------------------------------------------------------
   6. Sub-tabs (Home | Reports | Progress)
   ---------------------------------------------------------------- */
.kka-subtabs {
	display:       flex;
	gap:           0;
	margin-bottom: 24px;
	border-bottom: 2px solid var(--kka-border);
}

.kka-subtab {
	padding:       10px 22px;
	border:        none;
	background:    transparent;
	font-size:     14px;
	font-weight:   500;
	color:         var(--kka-muted);
	cursor:        pointer;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
	transition:    color 0.15s, border-color 0.15s;
	line-height:   1;
	font-family:   inherit;
}

.kka-subtab:hover {
	color: var(--kka-text);
}

.kka-subtab--active {
	color:               var(--kka-accent);
	border-bottom-color: var(--kka-accent);
	font-weight:         600;
}

/* ----------------------------------------------------------------
   6b. Panes
   ---------------------------------------------------------------- */
.kka-pane          { display: none; }
.kka-pane--active  { display: block; }

/* ----------------------------------------------------------------
   6c. Continue Learning — course cards grid
   ---------------------------------------------------------------- */
.kka-course-grid {
	display:               grid;
	grid-template-columns: repeat(2, 1fr);
	gap:                   16px;
}

.kka-course-card {
	border:         1px solid var(--kka-border);
	border-radius:  var(--kka-card-radius);
	overflow:       hidden;
	display:        flex;
	flex-direction: column;
	transition:     box-shadow 0.2s;
}

.kka-course-card:hover {
	box-shadow: 0 4px 16px rgba(26, 21, 39, 0.10);
}

.kka-course-card__thumb {
	height:      130px;
	overflow:    hidden;
	background:  var(--kka-accent-light);
	flex-shrink: 0;
}

.kka-course-card__thumb img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
}

.kka-course-card__no-thumb {
	width:            100%;
	height:           100%;
	display:          flex;
	align-items:      center;
	justify-content:  center;
	color:            var(--kka-accent);
	opacity:          0.45;
}

.kka-course-card__body {
	padding: 14px 16px 8px;
	flex:    1;
}

.kka-course-card__name {
	font-size:            14px;
	font-weight:          600;
	color:                var(--kka-text);
	margin:               0;
	line-height:          1.35;
	display:              -webkit-box;
	-webkit-line-clamp:   2;
	-webkit-box-orient:   vertical;
	overflow:             hidden;
}

.kka-course-card__meta {
	font-size:  12px;
	color:      var(--kka-muted);
	margin-top: 2px;
}

.kka-course-card__btn {
	display:         block;
	margin:          6px 16px 14px;
	padding:         9px 16px;
	background:      var(--kka-accent);
	color:           #ffffff;
	border-radius:   8px;
	text-align:      center;
	text-decoration: none;
	font-size:       13px;
	font-weight:     600;
	transition:      background 0.15s;
}

.kka-course-card__btn:hover {
	background:      var(--kka-accent-dark);
	color:           #ffffff;
	text-decoration: none;
}

/* ----------------------------------------------------------------
   7. Dashboard cards (section containers)
   ---------------------------------------------------------------- */
.kka-card {
	background:    var(--kka-card-bg);
	border-radius: var(--kka-card-radius);
	padding:       24px 28px;
	box-shadow:    var(--kka-shadow);
	border:        1px solid var(--kka-border);
	margin-bottom: 20px;
}

.kka-card-title {
	font-size:     16px;
	font-weight:   700;
	color:         var(--kka-text);
	margin:        0 0 18px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--kka-border);
	display:       flex;
	align-items:   center;
	gap:           8px;
}

/* ----------------------------------------------------------------
   8. Recent activity table
   ---------------------------------------------------------------- */
.kka-activity-table {
	width:           100%;
	border-collapse: collapse;
	font-size:       14px;
}

.kka-activity-table th {
	text-align:      left;
	padding:         9px 12px;
	font-size:       11.5px;
	font-weight:     700;
	text-transform:  uppercase;
	letter-spacing:  0.05em;
	color:           var(--kka-muted);
	border-bottom:   2px solid var(--kka-border);
	white-space:     nowrap;
}

.kka-activity-table td {
	padding:        12px 12px;
	color:          var(--kka-text);
	border-bottom:  1px solid var(--kka-border);
	vertical-align: middle;
}

.kka-activity-table tr:last-child td { border-bottom: none; }
.kka-activity-table tr:hover td      { background: #faf8ff; }

/* Lesson/Quiz link in table */
.kka-activity-table .kka-item-link {
	color:           var(--kka-text);
	font-weight:     500;
	text-decoration: none;
}

.kka-activity-table .kka-item-link:hover {
	color:           var(--kka-accent);
	text-decoration: underline;
}

.kka-activity-table .kka-item-type {
	font-size:    11px;
	color:        var(--kka-muted);
	margin-top:   2px;
}

/* Status badges */
.kka-badge {
	display:     inline-flex;
	align-items: center;
	gap:         4px;
	padding:     3px 10px;
	border-radius: 20px;
	font-size:   12px;
	font-weight: 600;
	white-space: nowrap;
}

.kka-badge--done        { background: #e8f5e9; color: #2e7d32; }
.kka-badge--in-progress { background: #fff8e1; color: #d07c00; }
.kka-badge--passed      { background: #e8f5e9; color: #2e7d32; }
.kka-badge--failed      { background: #fdecea; color: #c62828; }
.kka-badge--started     { background: #fff8e1; color: #d07c00; }

/* ----------------------------------------------------------------
   9. Progress list (enrolled lessons/courses)
   ---------------------------------------------------------------- */
.kka-progress-list {
	list-style: none;
	margin:     0;
	padding:    0;
}

.kka-progress-item {
	display:         flex;
	align-items:     center;
	gap:             16px;
	padding:         14px 0;
	border-bottom:   1px solid var(--kka-border);
}

.kka-progress-item:last-child { border-bottom: none; }

.kka-progress-item__info {
	flex:     1;
	min-width: 0;
}

.kka-progress-item__name {
	font-size:       14px;
	font-weight:     600;
	color:           var(--kka-text);
	white-space:     nowrap;
	overflow:        hidden;
	text-overflow:   ellipsis;
	text-decoration: none;
	display:         block;
}

.kka-progress-item__name:hover { color: var(--kka-accent); }

.kka-progress-item__meta {
	font-size:  12px;
	color:      var(--kka-muted);
	margin-top: 3px;
}

.kka-progress-bar-wrap {
	width:        120px;
	flex-shrink:  0;
}

.kka-progress-bar {
	height:        6px;
	background:    var(--kka-border);
	border-radius: 3px;
	overflow:      hidden;
}

.kka-progress-bar__fill {
	height:        100%;
	background:    var(--kka-accent);
	border-radius: 3px;
}

.kka-progress-pct {
	font-size:   12px;
	font-weight: 700;
	color:       var(--kka-text);
	text-align:  right;
	margin-top:  4px;
}

/* ----------------------------------------------------------------
   10. Empty state
   ---------------------------------------------------------------- */
.kka-empty {
	text-align: center;
	padding:    40px 20px;
	color:      var(--kka-muted);
}

.kka-empty svg {
	width:         40px;
	height:        40px;
	margin-bottom: 10px;
	opacity:       0.35;
}

.kka-empty p {
	margin:    4px 0 0;
	font-size: 14px;
}

/* ----------------------------------------------------------------
   11. Other LP profile tabs — card wrapper
   ---------------------------------------------------------------- */
#learn-press-profile .learn-press-subtab-content {
	background:    var(--kka-card-bg);
	border-radius: var(--kka-card-radius);
	padding:       24px;
	box-shadow:    var(--kka-shadow);
	border:        1px solid var(--kka-border);
}

#learn-press-profile .learn-press-profile-course__statistic {
	background:    var(--kka-card-bg);
	border-radius: var(--kka-card-radius);
	padding:       20px 24px;
	box-shadow:    var(--kka-shadow);
	border:        1px solid var(--kka-border);
	margin-bottom: 16px;
}

/* Filter pills (All / In-progress / Completed) */
#learn-press-profile .learn-press-filters {
	list-style: none;
	margin:     0 0 16px;
	padding:    0;
	display:    flex;
	gap:        8px;
	flex-wrap:  wrap;
}

#learn-press-profile .learn-press-filters li a {
	display:         inline-block;
	padding:         6px 14px;
	border-radius:   20px;
	font-size:       13px;
	font-weight:     500;
	cursor:          pointer;
	border:          1px solid var(--kka-border);
	color:           var(--kka-muted);
	text-decoration: none;
	transition:      background 0.15s, color 0.15s;
}

#learn-press-profile .learn-press-filters li a.active,
#learn-press-profile .learn-press-filters li a:hover {
	background:   var(--kka-accent);
	color:        #ffffff;
	border-color: var(--kka-accent);
}

/* ----------------------------------------------------------------
   12. My Reports — course stats summary
   ---------------------------------------------------------------- */
.kka-reports-stats {
	display:               grid;
	grid-template-columns: repeat(5, 1fr);
	gap:                   12px;
	margin-bottom:         24px;
}

.kka-rstat {
	background:    var(--kka-card-bg);
	border-radius: var(--kka-card-radius);
	padding:       18px 14px;
	box-shadow:    var(--kka-shadow);
	border:        1px solid var(--kka-border);
	text-align:    center;
}

.kka-rstat__num {
	font-size:     26px;
	font-weight:   800;
	color:         var(--kka-text);
	line-height:   1;
	margin-bottom: 4px;
}

.kka-rstat__label {
	font-size:   11.5px;
	color:       var(--kka-muted);
	font-weight: 500;
}

.kka-rstat--passed .kka-rstat__num { color: #2e7d32; }
.kka-rstat--failed  .kka-rstat__num { color: #c62828; }

/* ----------------------------------------------------------------
   13. Responsive — stack on mobile
   ---------------------------------------------------------------- */
@media (max-width: 820px) {
	#learn-press-profile > .lp-content-area {
		grid-template-columns: 1fr !important;
		grid-template-rows:    auto auto 1fr !important;
	}

	#learn-press-profile .wrapper-profile-header {
		grid-column: 1 !important;
		grid-row:    1 !important;
	}

	#learn-press-profile .wrapper-profile-header .lp-content-area {
		flex-direction: row !important;
		text-align:     left !important;
		align-items:    center !important;
		padding:        16px !important;
		gap:            14px !important;
	}

	#learn-press-profile .lp-profile-right { align-items: flex-start !important; }

	#learn-press-profile #profile-sidebar {
		grid-column:  1 !important;
		grid-row:     2 !important;
		padding-bottom: 8px !important;
	}

	/* Horizontal scrollable nav on mobile */
	#learn-press-profile #profile-nav {
		overflow-x: auto;
	}

	#learn-press-profile .lp-profile-nav-tabs {
		display:    flex !important;
		flex-wrap:  nowrap !important;
		padding:    8px !important;
		gap:        4px !important;
	}

	#learn-press-profile .lp-profile-nav-tabs > li > a {
		white-space: nowrap !important;
	}

	#learn-press-profile .lp-profile-nav-tabs > li.active > a {
		margin: 0 !important;
	}

	#learn-press-profile #profile-content,
	#learn-press-profile .lp-profile-content {
		grid-column: 1 !important;
		grid-row:    3 !important;
		padding:     20px 16px !important;
	}

	.kka-reports-stats {
		grid-template-columns: repeat(3, 1fr) !important;
	}

	.kka-course-grid {
		grid-template-columns: 1fr 1fr !important;
	}

	.kka-welcome-banner {
		flex-direction: column;
		align-items:    flex-start;
	}
}

@media (max-width: 480px) {
	.kka-reports-stats   { grid-template-columns: repeat(2, 1fr) !important; }
	.kka-course-grid     { grid-template-columns: 1fr !important; }
	.kka-subtab          { padding: 8px 12px !important; font-size: 13px !important; }

	.kka-activity-table th:nth-child(3),
	.kka-activity-table td:nth-child(3) {
		display: none;
	}
}