/**
 * Stylesheet for local_kompetenzportfolio.
 *
 * @package    local_kompetenzportfolio
 * @copyright  2026 IPTEACH GmbH
 * @author     Alessia Liguori alessia.liguori@ipteach.ch
 * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
 */

/* -----------------------------------------------------------------------
   Color tokens — change values here to retheme the entire plugin
   ----------------------------------------------------------------------- */

.local-kompetenzportfolio-view:root,
.local-kompetenzportfolio-view {
  /* Brand blue */
  --kp-blue: var(
    --ipteachbasics-color-scheme-primary
  ); /* primary brand color used throughout */
  --kp-blue-light: var(
    --ipteachbasics-color-scheme-primary-light
  ); /* light blue for input borders */
  --kp-blue-hover-bg: var(
    --ipteachbasics-color-scheme-primary-hover-bg
  ); /* table row / exam row hover tint */
  --kp-blue-shadow: var(
    --ipteachbasics-color-scheme-primary-shadow
  ); /* focus ring */
  --kp-link: var(
    --ipteachbasics-color-scheme-link
  ); /* action links (download, delete) */

  /* Text */
  --kp-text: var(--ipteachbasics-color-scheme-text); /* primary body text */
  --kp-text-secondary: var(
    --ipteachbasics-color-scheme-text-secondary
  ); /* secondary labels */
  --kp-text-muted: var(
    --ipteachbasics-color-scheme-text-muted
  ); /* muted labels */
  --kp-text-light: var(
    --ipteachbasics-color-scheme-text-light
  ); /* de-emphasised text */
  --kp-text-faint: var(
    --ipteachbasics-color-scheme-text-faint
  ); /* very light / placeholder */
  --kp-text-subtle: var(
    --ipteachbasics-color-scheme-text-subtle
  ); /* weight/avg indicators */
  --kp-text-meta: var(
    --ipteachbasics-color-scheme-text-meta
  ); /* footnotes, toggle icons */

  /* Backgrounds */
  --kp-bg-white: var(--ipteachbasics-color-scheme-bg-white);
  --kp-bg-faint: var(
    --ipteachbasics-color-scheme-bg-faint
  ); /* item card backgrounds */
  --kp-bg-light: var(
    --ipteachbasics-color-scheme-bg-light
  ); /* section highlights, hover rows */
  --kp-bg-muted: var(--ipteachbasics-color-scheme-bg-muted); /* card headers */

  /* Borders */
  --kp-border: var(--ipteachbasics-color-scheme-border); /* main dividers */
  --kp-border-light: var(
    --ipteachbasics-color-scheme-border-light
  ); /* subtle separators */

  /* Accent */
  --kp-star: var(--ipteachbasics-color-scheme-star); /* star rating fill */
}

/* -----------------------------------------------------------------------
   Index page – learner list
   ----------------------------------------------------------------------- */

.kp-index {
  max-width: 1100px;
}

.kp-index-intro {
  text-align: left;
  margin-bottom: 20px;
}

.kp-index-heading {
  font-size: 1rem;
  font-weight: 500;
  color: var(--kp-text);
}

.kp-group-filter {
  margin-bottom: 16px;
}

.kp-group-filter form {
  margin: 0;
}

.kp-group-select {
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--kp-bg-white);
  /* The SVG stroke color (#5682b2) cannot use a CSS variable inside url() */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235682b2' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  border: 1.5px solid var(--kp-blue-light);
  border-radius: 8px;
  color: var(--kp-text);
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 7px 36px 7px 12px;
  min-width: 180px;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.kp-group-select:hover {
  border-color: var(--kp-blue);
}

.kp-group-select:focus {
  border-color: var(--kp-blue);
  box-shadow: 0 0 0 3px var(--kp-blue-shadow);
  outline: none;
}

.kp-index-table-wrap {
  overflow-x: visible;
}

@media (max-width: 1000px) {
  .kp-index-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 768px) {
  .kp-index-table-wrap {
    overflow-x: visible;
  }

  .kp-th-profession,
  .kp-td-profession,
  .kp-th-bildungsbericht,
  .kp-td-bildungsbericht {
    display: none;
  }

  .kp-mobile-only {
    display: inline;
  }

  .kp-mobile-profession {
    display: block;
    font-size: 0.8em;
    color: var(--kp-text-light);
    margin-top: 2px;
  }

  .kp-mobile-bb {
    display: block;
    margin-top: 6px;
  }
}

.kp-index-table {
  width: 100%;
  border-collapse: collapse;
}

.kp-index-table thead {
  background: var(--kp-blue);
}

.kp-th {
  background: var(--kp-blue);
  color: var(--kp-bg-white);
  padding: 10px 12px;
  font-weight: 600;
  border: none;
}

.kp-th-first {
  padding-left: 36px;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.kp-th-last {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

.kp-tr:hover .kp-td {
  background-color: var(--kp-blue-hover-bg);
}

.kp-tr-link .kp-td:not(.kp-td-actions) {
  cursor: pointer;
}

.kp-td {
  padding: 10px 12px;
  vertical-align: middle;
  border-bottom: 1px solid var(--kp-border-light);
  color: var(--kp-text);
}

.kp-td-name {
  min-width: 200px;
}

.kp-name-row {
  display: flex;
  align-items: center;
}

.kp-name-info {
  display: flex;
  flex-direction: column;
}

.kp-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 8px;
  flex-shrink: 0;
}

.kp-learner-link {
  text-decoration: none;
  font-weight: 500;
}

.kp-learner-link:hover {
  text-decoration: none;
}

.kp-learner-name {
  display: block;
  font-weight: 600;
  color: var(--kp-blue);
}

.kp-learner-email {
  display: block;
  font-size: 0.8em;
  font-weight: normal;
  color: var(--kp-text-light);
}

.kp-icon {
  font-size: 16px;
  margin-right: 6px;
  -webkit-text-fill-color: white;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: gray;
}

.kp-tr-link:hover .kp-icon {
  -webkit-text-fill-color: white;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: var(--kp-blue);
}

.kp-count {
  color: var(--kp-text-light);
  font-size: 0.9em;
}

.kp-index-empty {
  color: var(--kp-text-muted);
  font-style: italic;
}

.kp-index-delete-hint {
  margin-top: 0.75rem;
  font-size: 0.8rem;
  color: var(--kp-text-light);
  font-style: italic;
}

.kp-small {
  font-weight: normal;
  font-size: small;
}

.kp-course-chooser-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.kp-course-chooser-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.9rem 1rem;
  background: var(--kp-bg-faint);
  border-bottom: 1px solid var(--kp-border-light);
}

.kp-course-chooser-name {
  font-weight: 600;
  color: var(--kp-text);
}

.kp-course-chooser-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.kp-course-chooser-link {
  display: inline-block;
  padding: 0.4rem 0.9rem;
  border: 1.5px solid var(--kp-blue-light);
  border-radius: 4px;
  color: var(--kp-blue);
  text-decoration: none;
  white-space: nowrap;
}

.kp-course-chooser-link:hover {
  background-color: var(--kp-blue-hover-bg);
  border-color: var(--kp-blue);
}

.kp-stat-avg,
.kp-stat-count {
  white-space: nowrap;
}

@media (min-width: 769px) {
  .kp-mobile-profession,
  .kp-mobile-bb,
  .kp-mobile-only {
    display: none;
  }
}

.kp-stat-sep {
  margin: 0 0.35em;
  color: var(--kp-text-faint);
}

.kp-td-actions {
  width: 1px;
  white-space: nowrap;
  text-align: center;
}

.kp-delete-form {
  margin: 0;
}

.kp-delete-btn {
  background: none;
  border: none;
  padding: 4px 8px;
  cursor: pointer;
  color: var(--kp-link);
  font-size: 15px;
  line-height: 1;
  border-radius: 4px;
  transition: color 0.15s ease;
}

.kp-delete-btn:hover {
  color: var(--kp-blue);
}

/* -----------------------------------------------------------------------
   View page – portfolio detail
   ----------------------------------------------------------------------- */

/* slim-body from local_report uses a fixed 830px width — override it here
   so the portfolio view page is responsive without touching the shared class */
.local-kompetenzportfolio-view.slim-body {
  max-width: 830px;
  width: 100%;
  box-sizing: border-box;
}

/* Header row: student info left, summary stats right */
.local-kompetenzportfolio-view .kp-header {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 2rem;
  width: 100%;
  margin-bottom: 2rem;
  padding: 1.25rem 1.5rem;
  background: var(--kp-bg-light);
  border-radius: 10px;
  box-sizing: border-box;
}

.local-kompetenzportfolio-view .kp-header-student {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 0 1 auto;
  max-width: 455px;
  min-width: 0;
}

.local-kompetenzportfolio-view .kp-header-name {
  min-width: 0;
}

.local-kompetenzportfolio-view .kp-header-name h2 {
  margin: 0 0 0.15rem 0;
  font-size: 1.3rem;
  word-break: break-word;
}

.local-kompetenzportfolio-view .kp-profession {
  margin: 0;
  color: var(--kp-text-muted);
  font-size: 0.9rem;
}

.local-kompetenzportfolio-view .kp-group {
  margin: 2px 0 0 0;
  font-size: 0.8rem;
  color: var(--kp-blue);
  font-weight: 500;
}

.local-kompetenzportfolio-view.slim-body .kp-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

/* Back navigation */
.local-kompetenzportfolio-view .kp-back-nav {
  margin-bottom: 0.75rem;
}

.local-kompetenzportfolio-view .kp-back-btn {
  padding: 0;
  color: var(--kp-text-muted);
  font-size: 0.9rem;
}

.local-kompetenzportfolio-view .kp-back-btn:hover {
  color: var(--kp-primary);
}

/* Stats column on the right */
.local-kompetenzportfolio-view .kp-header-stats {
  flex: 1 1 0%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  border-left: 2px solid var(--kp-border);
  padding-left: 2rem;
}

.local-kompetenzportfolio-view .kp-summary-stat {
  font-weight: 500;
  font-size: 0.95rem;
  display: flex;
  align-items: flex-start;
  gap: 0.4em;
}

.local-kompetenzportfolio-view .kp-summary-stat-body {
  flex: 1;
  min-width: 0;
}

.local-kompetenzportfolio-view .kp-summary-stat .kp-lerndoku-stars {
  display: inline-block;
  white-space: nowrap;
}

.local-kompetenzportfolio-view .kp-stat-detail {
  font-weight: normal;
  color: var(--kp-text-muted);
  font-size: 0.85rem;
}

/* Cards */
.local-kompetenzportfolio-view .kp-card {
  background: var(--kp-bg-white);
  border: 1px solid var(--kp-border);
  border-radius: 10px;
  margin-bottom: 1.25rem;
  overflow: hidden;
}

.local-kompetenzportfolio-view .kp-card-header {
  padding: 0.9rem 1.25rem;
  background: var(--kp-bg-muted);
  border-bottom: 1px solid var(--kp-border);
}

.local-kompetenzportfolio-view .kp-card-header h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.local-kompetenzportfolio-view .kp-card-body {
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.local-kompetenzportfolio-view .kp-card-body-inner {
  padding: 1.25rem;
}

/* Collapsible header */
.local-kompetenzportfolio-view .kp-collapsible-header {
  cursor: pointer;
  user-select: none;
}

.local-kompetenzportfolio-view .kp-collapsible-header:hover {
  background: var(--kp-border-light);
}

.local-kompetenzportfolio-view .kp-toggle-icon {
  font-size: 0.75rem;
  color: var(--kp-text-meta);
  margin-left: 0.5rem;
  vertical-align: middle;
}

.local-kompetenzportfolio-view .kp-card.kp-collapsed .kp-card-header {
  border-bottom: none;
}

.local-kompetenzportfolio-view .kp-card.kp-collapsed .kp-card-body {
  max-height: 0;
}

/* Misc */
.local-kompetenzportfolio-view .kp-nodata {
  color: var(--kp-text-light);
  font-style: italic;
  margin: 0;
}

/* Feedback card */
.local-kompetenzportfolio-view .kp-feedback-item.kp-feedback-hidden {
  display: none;
}

.local-kompetenzportfolio-view .kp-give-feedback-wrap,
.local-kompetenzportfolio-view .kp-qr-toggle-wrap {
  margin-bottom: 1rem;
}

.local-kompetenzportfolio-view .kp-give-feedback-wrap .btn:hover,
.local-kompetenzportfolio-view .kp-qr-toggle-wrap .btn:hover {
  color: var(--kp-blue);
  border-color: var(--kp-blue);
  background-color: var(--kp-bg-white);
  transition:
    color 0.15s ease,
    border-color 0.15s ease;
}

.local-kompetenzportfolio-view .kp-feedback-list {
  margin-top: 0.75rem;
}

.local-kompetenzportfolio-view .kp-feedback-list {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin-top: 0.5rem;
}

/* One feedback row: avatar column + bubble */
.local-kompetenzportfolio-view .kp-feedback-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

/* Avatar column */
.local-kompetenzportfolio-view .kp-feedback-avatar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
  width: 70px;
}

.local-kompetenzportfolio-view .kp-feedback-img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--kp-border);
}

.local-kompetenzportfolio-view .kp-feedback-name {
  font-size: 0.7rem;
  font-weight: 600;
  text-align: center;
  color: black;
  word-break: break-word;
  line-height: 1.2;
}

/* Speech bubble */
.local-kompetenzportfolio-view .kp-feedback-bubble {
  position: relative;
  background: var(--kp-bg-white);
  border: 1px solid var(--kp-blue);
  border-radius: 12px;
  padding: 0.65rem 1rem 0.5rem;
  flex: 1;
  min-width: 0;
}

/* Left-pointing tail – border layer (matches bubble border color) */
.local-kompetenzportfolio-view .kp-feedback-bubble::before {
  content: "";
  position: absolute;
  left: -9px;
  top: 13px;
  border: 8px solid transparent;
  border-right-color: var(--kp-blue);
  border-left-width: 0;
}

/* Left-pointing tail – fill layer (matches bubble background, covers the border layer) */
.local-kompetenzportfolio-view .kp-feedback-bubble::after {
  content: "";
  position: absolute;
  left: -7px;
  top: 14px;
  border: 7px solid transparent;
  border-right-color: var(--kp-bg-white);
  border-left-width: 0;
}

.local-kompetenzportfolio-view .kp-feedback-text {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--kp-text);
  margin: 0 0 0.3rem 0;
}

.local-kompetenzportfolio-view .kp-feedback-meta {
  display: block;
  font-size: 0.75rem;
  color: var(--kp-blue);
  text-align: right;
}

.local-kompetenzportfolio-view .kp-feedback-more {
  margin-top: 0.5rem;
}

@media (max-width: 480px) {
  .local-kompetenzportfolio-view .kp-feedback-avatar {
    width: 54px;
  }
  .local-kompetenzportfolio-view .kp-feedback-img {
    width: 44px;
    height: 44px;
  }
}

/* Stack on small screens */
@media (max-width: 640px) {
  .local-kompetenzportfolio-view .kp-header {
    flex-direction: column !important;
    align-items: flex-start;
  }
  .local-kompetenzportfolio-view .kp-header-stats {
    border-left: none;
    border-top: 2px solid var(--kp-border);
    padding-left: 0;
    padding-top: 0.75rem;
    width: 100%;
  }
  .local-kompetenzportfolio-view .kp-card-body-inner {
    padding: 0.75rem;
  }
}

/* -----------------------------------------------------------------------
   Lerndokumentationen card
   ----------------------------------------------------------------------- */

.local-kompetenzportfolio-view .kp-lerndoku-semester {
  margin-bottom: 1.25rem;
}

.local-kompetenzportfolio-view .kp-lerndoku-semester:last-child {
  margin-bottom: 0;
}

.local-kompetenzportfolio-view .kp-lerndoku-semester-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--kp-blue);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 0.5rem 0;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--kp-border);
}

.local-kompetenzportfolio-view .kp-lerndoku-list {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.local-kompetenzportfolio-view .kp-lerndoku-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.45rem 0.5rem;
  border-radius: 6px;
}

.local-kompetenzportfolio-view .kp-lerndoku-row:hover {
  background: var(--kp-bg-light);
}

.local-kompetenzportfolio-view .kp-lerndoku-date {
  flex-shrink: 0;
  width: 6.5rem;
  font-size: 0.8rem;
  color: var(--kp-text-light);
  white-space: nowrap;
}

.local-kompetenzportfolio-view .kp-lerndoku-name {
  flex: 1;
  font-size: 0.9rem;
  color: var(--kp-text);
  min-width: 0;
}

.local-kompetenzportfolio-view a.kp-lerndoku-name {
  color: var(--kp-text);
}

.kp-lerndoku-stars {
  flex-shrink: 0;
  gap: 2px;
}

.local-kompetenzportfolio-view a.kp-lerndoku-stars-link,
.local-kompetenzportfolio-view a.kp-lerndoku-stars-link:hover {
  text-decoration: none;
}

.local-kompetenzportfolio-view
  .kp-lerndoku-row:has(a.kp-lerndoku-stars-link:hover)
  a.kp-lerndoku-name {
  text-decoration: underline;
}

.kp-star {
  font-size: 0.95rem;
  color: var(--kp-border);
}

.kp-star-filled {
  color: var(--kp-star);
}

.local-kompetenzportfolio-view .kp-lerndoku-avg {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.5rem;
  padding: 0.35rem 0.5rem;
  border-top: 1px solid var(--kp-border);
  font-size: 0.85rem;
  color: var(--kp-text-secondary);
}

.local-kompetenzportfolio-view .kp-lerndoku-avg-label {
  flex: 1;
  font-weight: 600;
  color: var(--kp-blue);
}

@media (max-width: 540px) {
  .local-kompetenzportfolio-view .kp-lerndoku-row {
    flex-wrap: wrap;
    row-gap: 0.1rem;
  }
  .local-kompetenzportfolio-view .kp-lerndoku-name,
  .local-kompetenzportfolio-view a.kp-lerndoku-name {
    order: 1;
  }
  .local-kompetenzportfolio-view .kp-lerndoku-stars {
    order: 2;
    flex-shrink: 0;
  }
  .local-kompetenzportfolio-view .kp-lerndoku-date {
    order: 3;
    width: 100%;
    font-size: 0.72rem;
    color: var(--kp-text-faint);
  }
}

/* -----------------------------------------------------------------------
   Bildungsberichte card
   ----------------------------------------------------------------------- */

.local-kompetenzportfolio-view .kp-bb-semester {
  margin-bottom: 1.25rem;
}

.local-kompetenzportfolio-view .kp-bb-semester:last-child {
  margin-bottom: 0;
}

.local-kompetenzportfolio-view .kp-bb-semester-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--kp-blue);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 0.5rem 0;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--kp-border);
}

.local-kompetenzportfolio-view .kp-bb-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.local-kompetenzportfolio-view .kp-bb-item {
  border: 1px solid var(--kp-border-light);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  background: var(--kp-bg-faint);
}

.local-kompetenzportfolio-view .kp-bb-item-header {
  display: flex;
  align-items: center;
  margin-bottom: 0.35rem;
}

.local-kompetenzportfolio-view .kp-bb-title {
  flex: 1;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--kp-text);
  min-width: 0;
  text-decoration: none;
}

.local-kompetenzportfolio-view a.kp-bb-title:hover {
  color: var(--kp-blue);
  text-decoration: underline;
}

.local-kompetenzportfolio-view .kp-bb-title i,
.local-kompetenzportfolio-view .kp-bb-title .icon {
  font-size: 0.8rem;
  color: var(--kp-text);
}

.local-kompetenzportfolio-view a.kp-bb-title:hover i,
.local-kompetenzportfolio-view a.kp-bb-title:hover .icon {
  color: var(--kp-blue);
  text-decoration: underline;
}

.local-kompetenzportfolio-view .kp-bb-download {
  font-size: 0.8rem;
  color: var(--kp-link);
  text-decoration: none;
}

.local-kompetenzportfolio-view .kp-bb-download:hover {
  color: var(--kp-blue);
  text-decoration: none;
}

.local-kompetenzportfolio-view .kp-bb-avg-badge {
  flex-shrink: 0;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 4px;
  min-width: 3rem;
  text-align: center;
  white-space: nowrap;
}

.local-kompetenzportfolio-view .kp-bb-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  font-size: 0.8rem;
  color: var(--kp-text-muted);
  margin-bottom: 0.6rem;
}

.local-kompetenzportfolio-view .kp-bb-grades {
  border-top: 1px solid var(--kp-border-light);
  padding-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.local-kompetenzportfolio-view .kp-bb-grade-row {
  display: flex;
  align-items: center;
  padding: 0.15rem 0;
}

.local-kompetenzportfolio-view .kp-bb-grade-subject {
  flex: 1;
  font-size: 0.85rem;
  color: var(--kp-text-secondary);
  min-width: 0;
}

.local-kompetenzportfolio-view .kp-bb-grade-cell {
  flex: 0 0 4rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.local-kompetenzportfolio-view .kp-bb-weight-col {
  flex: 0 0 2rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 0.7rem;
  color: var(--kp-text-subtle);
}

.local-kompetenzportfolio-view .kp-bb-grade-weight {
  font-size: 0.7rem;
  color: var(--kp-text-subtle);
  white-space: nowrap;
}

.local-kompetenzportfolio-view .kp-bb-grade-value {
  flex-shrink: 0;
  font-size: 0.85rem;
  font-weight: 400;
  padding: 2px 10px;
  border-radius: 4px;
  min-width: 3rem;
  text-align: center;
}

@media (max-width: 480px) {
  .local-kompetenzportfolio-view .kp-bb-meta {
    flex-direction: column;
    gap: 0.25rem;
  }
  .local-kompetenzportfolio-view .kp-bb-item-header {
    flex-wrap: wrap;
  }
}

/* -----------------------------------------------------------------------
   Noten card
   ----------------------------------------------------------------------- */

.local-kompetenzportfolio-view .kp-noten-semester {
  margin-bottom: 1.25rem;
}

.local-kompetenzportfolio-view .kp-noten-semester:last-child {
  margin-bottom: 0;
}

.local-kompetenzportfolio-view .kp-noten-semester-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--kp-blue);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 0.5rem 0;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--kp-border);
}

/* Collapsible semester sub-sections (used by the Noten, Kompetenzblätter and Förderblätter cards) */
.local-kompetenzportfolio-view .kp-semester-header {
  cursor: pointer;
  user-select: none;
}

.local-kompetenzportfolio-view .kp-semester-header:hover {
  color: var(--kp-blue-dark, var(--kp-blue));
}

.local-kompetenzportfolio-view .kp-semester-body {
  box-sizing: border-box;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.local-kompetenzportfolio-view .kp-semester-collapsed .kp-semester-body {
  max-height: 0;
}

/* List of course blocks within one semester */
.local-kompetenzportfolio-view .kp-noten-course-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* One course block (mirrors kp-bb-item) */
.local-kompetenzportfolio-view .kp-noten-course {
  border: 1px solid var(--kp-border-light);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  background: var(--kp-bg-faint);
}

/* Course name (mirrors kp-bb-title) */
.local-kompetenzportfolio-view .kp-noten-course-header {
  margin-bottom: 0.2rem;
}

.local-kompetenzportfolio-view .kp-noten-sheet-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--kp-text);
}

/* Teacher meta row (mirrors kp-bb-meta) */
.local-kompetenzportfolio-view .kp-noten-course-meta {
  font-size: 0.8rem;
  color: var(--kp-text-muted);
  margin-bottom: 0.6rem;
}

/* Exam list (mirrors kp-bb-grades) */
.local-kompetenzportfolio-view .kp-noten-list {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  border-top: 1px solid var(--kp-border-light);
  padding-top: 0.35rem;
}

/* One exam row (mirrors kp-lerndoku-row + kp-bb-grade-row) */
.local-kompetenzportfolio-view .kp-noten-row {
  display: flex;
  align-items: center;
  padding: 0.2rem 0.25rem;
  border-radius: 6px;
}

.local-kompetenzportfolio-view .kp-noten-row:hover {
  background: var(--kp-blue-hover-bg);
}

/* Date column (mirrors kp-lerndoku-date) */
.local-kompetenzportfolio-view .kp-noten-date {
  flex-shrink: 0;
  width: 6rem;
  font-size: 0.8rem;
  color: var(--kp-text-light);
  white-space: nowrap;
}

/* Exam name (mirrors kp-bb-grade-subject but flex:1) */
.local-kompetenzportfolio-view .kp-noten-name {
  flex: 1;
  font-size: 0.9rem;
  color: var(--kp-text);
  min-width: 0;
}

.local-kompetenzportfolio-view a.kp-noten-name {
  color: var(--kp-text);
}

.local-kompetenzportfolio-view a.kp-noten-name:hover {
  text-decoration: underline;
}

/* Right-side group: badge + weight + class avg (mirrors kp-bb-grade-end) */
.local-kompetenzportfolio-view .kp-noten-grade-cell {
  display: flex;
  justify-content: center;
  align-items: center;
}

.local-kompetenzportfolio-view .kp-noten-secondary {
  flex: 0 0 5.2rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

/* Grade badge (mirrors kp-bb-grade-value) */
.local-kompetenzportfolio-view .kp-noten-grade-badge {
  font-size: 0.85rem;
  font-weight: 400;
  padding: 2px 10px;
  border-radius: 4px;
  min-width: 3rem;
  text-align: center;
  white-space: nowrap;
}

/* Badge when no grade is available */
.local-kompetenzportfolio-view .kp-noten-grade-empty {
  background: var(--kp-bg-muted);
  color: var(--kp-text-faint);
}

/* Weight percentage (mirrors kp-bb-grade-weight) */
.local-kompetenzportfolio-view .kp-noten-weight {
  font-size: 0.7rem;
  color: var(--kp-text-subtle);
  white-space: nowrap;
}

/* Class average */
.local-kompetenzportfolio-view .kp-noten-class-avg {
  font-size: 0.75rem;
  color: var(--kp-text-light);
  white-space: nowrap;
}

/* Summary section: Durchschnitt + Zeugnisnote */
.local-kompetenzportfolio-view .kp-noten-summary {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  border-top: 1px solid var(--kp-border-light);
  margin-top: 0.45rem;
  padding-top: 0.35rem;
}

.local-kompetenzportfolio-view .kp-noten-avg-row,
.local-kompetenzportfolio-view .kp-noten-zeugnis-row {
  display: flex;
  align-items: center;
  padding: 0.15rem 0.25rem;
}

.local-kompetenzportfolio-view .kp-noten-summary-label {
  flex: 1;
  font-size: 0.85rem;
  color: var(--kp-text-secondary);
  min-width: 0;
}

/* Zeugnis badge slightly larger and bold to stand out */
.local-kompetenzportfolio-view .kp-noten-zeugnis-badge {
  font-size: 0.95rem;
  font-weight: 700;
  padding: 3px 12px;
}

/* Footnote below exam list explaining that digital class averages span all classes */
.local-kompetenzportfolio-view .kp-noten-digital-hint {
  font-size: 0.72rem;
  color: var(--kp-text-meta);
  margin: 4px 0 8px 0;
  font-style: italic;
}

/* Superscript star on class-avg cell for digital exams */
.local-kompetenzportfolio-view .kp-noten-digital-star {
  font-size: 0.65rem;
  color: var(--kp-text-meta);
  vertical-align: super;
  margin-left: 1px;
}

/* "(Teilnote)" tag next to exam name when only selected questions counted */
.local-kompetenzportfolio-view .kp-noten-partial-tag {
  font-size: 0.8em;
  color: var(--kp-text-light);
  margin-left: 0.25rem;
}

@media (max-width: 540px) {
  .local-kompetenzportfolio-view .kp-noten-date {
    width: 5rem;
    font-size: 0.72rem;
    color: var(--kp-text-faint);
  }
  .local-kompetenzportfolio-view .kp-noten-secondary {
    font-size: 0.72rem;
  }
}

@media (max-width: 430px) {
  .local-kompetenzportfolio-view .kp-noten-row {
    flex-wrap: wrap;
    row-gap: 0;
  }
  .local-kompetenzportfolio-view .kp-noten-name {
    order: 1;
  }
  .local-kompetenzportfolio-view .kp-noten-grade-cell,
  .local-kompetenzportfolio-view .kp-noten-secondary {
    order: 2;
  }
  .local-kompetenzportfolio-view .kp-noten-date {
    order: 3;
    width: 100%;
    padding-top: 0.05rem;
  }
}

/* -----------------------------------------------------------------------
   Kompetenzblätter card
   ----------------------------------------------------------------------- */

.local-kompetenzportfolio-view .kp-kb-semester {
  margin-bottom: 1.5rem;
}

.local-kompetenzportfolio-view .kp-kb-semester:last-child {
  margin-bottom: 0;
}

.local-kompetenzportfolio-view .kp-kb-semester-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--kp-blue);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 0.75rem 0;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--kp-border);
}

.local-kompetenzportfolio-view .kp-kb-sheet {
  border: 1px solid var(--kp-border-light);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  background: var(--kp-bg-faint);
  margin-bottom: 0.75rem;
}

.local-kompetenzportfolio-view .kp-kb-sheet:last-child {
  margin-bottom: 0;
}

.local-kompetenzportfolio-view .kp-kb-sheet-header {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 1rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--kp-border-light);
}

.local-kompetenzportfolio-view .kp-kb-sheet-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--kp-text);
}

.local-kompetenzportfolio-view .kp-kb-course-name {
  font-size: 0.8rem;
  color: var(--kp-text-muted);
}

/* Competence label: allow long names to wrap instead of pushing into the bar column */
.local-kompetenzportfolio-view .kp-kb-competence-row label > span {
  flex: 0 1 auto;
  min-width: 0;
  overflow-wrap: break-word;
  hyphens: auto;
}

.local-kompetenzportfolio-view .kp-kpb-competence-text {
  font-size: 0.85rem;
}

.local-kompetenzportfolio-view .kp-kb-competence-row label > a {
  flex-shrink: 0;
  align-self: flex-start;
}

/* Competence bar */
.local-kompetenzportfolio-view .kp-kb-bar-wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.local-kompetenzportfolio-view .kp-kb-bar-track {
  flex: 1;
  height: 12px;
  background: var(--kp-border-light);
  border-radius: 6px;
  overflow: hidden;
}

.local-kompetenzportfolio-view .kp-kb-bar-fill {
  height: 100%;
  width: var(--kp-fill-width, 0%);
  background-color: var(--kp-fill-color, var(--kp-text-subtle));
  border-radius: 6px;
  transition: width 0.4s ease;
}

.local-kompetenzportfolio-view .kp-kb-grade-label {
  flex-shrink: 0;
  font-size: 0.85rem;
  min-width: 9rem;
  max-width: 14rem;
}

.local-kompetenzportfolio-view .kp-kb-remark {
  font-size: 0.78rem;
  color: var(--kp-text-light);
  margin: 0.2rem 0 0 0;
}

/* Student self-assessment block */
.local-kompetenzportfolio-view .kp-kb-selfgrade {
  background: var(--kp-bg-light) !important;
  margin-top: 0.4rem;
}

.local-kompetenzportfolio-view .kp-kb-selfgrade-hint {
  font-size: 0.75rem;
  color: var(--kp-text-light);
  margin: 0.2rem 0 0 0;
}

/* General teacher feedback */
.local-kompetenzportfolio-view .kp-kb-feedback-text {
  font-size: 0.9rem;
  color: var(--kp-text);
  background: var(--kp-bg-light);
  border-radius: 6px;
}

/* Action button strip */
.local-kompetenzportfolio-view .kp-kb-action {
  margin-top: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--kp-border-light);
}

/* Fortschrittsblatt (sheetmode 1) — progress bar + text below */
.local-kompetenzportfolio-view .kp-progress-container .prog-bar {
  align-items: center;
  flex-wrap: wrap;
  row-gap: 0;
}

.local-kompetenzportfolio-view .kp-progress-container .prog-barCell {
  margin-top: 0;
  margin-bottom: 0;
}

.local-kompetenzportfolio-view
  .kp-progress-container
  .gradereport-task-counter {
  margin-left: 0.6rem;
  font-size: 0.9rem;
}

.local-kompetenzportfolio-view .kp-progress-text {
  font-size: 0.85rem;
  color: var(--kp-text-secondary);
  margin-top: 0.4rem;
}

.local-kompetenzportfolio-view .kp-italic {
  font-style: italic;
}

@media (max-width: 767px) {
  .local-kompetenzportfolio-view .kp-kb-bar-wrap {
    flex-wrap: wrap;
    gap: 0.3rem;
  }
  .local-kompetenzportfolio-view .kp-kb-grade-label {
    min-width: 0;
    width: 100%;
    max-width: 10rem;
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .local-kompetenzportfolio-view .kp-kb-sheet-header {
    gap: 0.15rem;
  }
}

/* -----------------------------------------------------------------------
   Förderblätter card
   ----------------------------------------------------------------------- */

.local-kompetenzportfolio-view .kp-fb-semester {
  margin-bottom: 1.25rem;
}

.local-kompetenzportfolio-view .kp-fb-semester:last-child {
  margin-bottom: 0;
}

.local-kompetenzportfolio-view .kp-fb-semester-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--kp-blue);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 0.5rem 0;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--kp-border);
}

.local-kompetenzportfolio-view .kp-fb-list {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.local-kompetenzportfolio-view .kp-fb-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.45rem 0.5rem;
  border-radius: 6px;
}

.local-kompetenzportfolio-view .kp-fb-row:hover {
  background: var(--kp-bg-light);
}

.local-kompetenzportfolio-view .kp-fb-date {
  flex-shrink: 0;
  width: 6.5rem;
  font-size: 0.8rem;
  color: var(--kp-text-light);
  white-space: nowrap;
}

.local-kompetenzportfolio-view .kp-fb-name {
  flex: 1;
  font-size: 0.9rem;
  color: var(--kp-text);
  min-width: 0;
}

.local-kompetenzportfolio-view .kp-fb-open {
  flex-shrink: 0;
  font-size: 0.8rem;
  padding: 2px 10px;
  white-space: nowrap;
}

@media (max-width: 540px) {
  .local-kompetenzportfolio-view .kp-fb-row {
    flex-wrap: wrap;
  }
  .local-kompetenzportfolio-view .kp-fb-name {
    order: 1;
  }
  .local-kompetenzportfolio-view .kp-fb-open {
    order: 2;
    flex-shrink: 0;
  }
  .local-kompetenzportfolio-view .kp-fb-date {
    order: 3;
    width: 100%;
    font-size: 0.72rem;
    color: var(--kp-text-faint);
    padding-top: 0.1rem;
  }
}