/* ============================================================================
   THEMELI — Komponentët
   ----------------------------------------------------------------------------
   Komponentët standardë përdorin markup-in e Bootstrap-it (btn, form-control,
   table, modal, dropdown, toast…) si API, por çdo vendim vizual vjen nga
   tokenët e Themelit. Komponentët e QTA-së (koka e faqes, statusi, gjendja
   bosh, detyrat, kyçi i ndryshimeve…) janë të vetët.

   Përmbajtja
     1. Butonat            9. Menutë (dropdown)     17. Koka e faqes
     2. Fushat             10. Dialogët (modal)     18. Seksionet
     3. Kartat             11. Paneli anësor        19. Gjendja bosh
     4. Tabelat            12. Njoftimet (toast)    20. Shifrat
     5. Redaktimi në vend  13. Skedat               21. Lista çelës–vlerë
     6. Shenjat, statuset  14. Faqosja             22. Filtrat
     7. Mesazhet           15. Lista, progresi      23. Kyçi i ndryshimeve
     8. Shënimet           16. Tooltip, akordeon    24. Veprime të shpejta, detyrat,
                                                        axhenda, avatarë, paleta
   ========================================================================= */

/* ================================================================ 1. Butonat */
.btn {
  --bs-btn-padding-x: .875rem;
  --bs-btn-padding-y: .5rem;
  --bs-btn-font-family: var(--font-sans);
  --bs-btn-font-size: var(--fs-sm);
  --bs-btn-font-weight: var(--fw-semibold);
  --bs-btn-line-height: 1.25;
  --bs-btn-border-width: 1px;
  --bs-btn-border-radius: var(--r-md);
  --bs-btn-box-shadow: none;
  --bs-btn-focus-box-shadow: none;
  --bs-btn-disabled-opacity: .5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--control-h);
  text-decoration: none;
  transition:
    background-color var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease),
    box-shadow var(--dur-1) var(--ease),
    transform var(--dur-1) var(--ease);
}
/* Shtypja shihet: butoni ngjeshet pak (jo te butonat e çaktivizuar). */
.btn:not(:disabled):not(.disabled):active { transform: scale(.98); }
.btn > .bi { flex: none; font-size: 1.05em; line-height: 1; }
/* Butoni e mban vetë hapësirën e ikonës; margjinat e vjetra hiqen. */
.btn > .bi[class*=" me-"], .btn > .bi[class*=" ms-"] { margin: 0 !important; }
.btn:disabled, .btn.disabled { cursor: not-allowed; }

.btn-primary {
  --bs-btn-color: var(--action-text);
  --bs-btn-bg: var(--action);
  --bs-btn-border-color: var(--action);
  --bs-btn-hover-color: var(--action-text);
  --bs-btn-hover-bg: var(--action-hover);
  --bs-btn-hover-border-color: var(--action-hover);
  --bs-btn-active-color: var(--action-text);
  --bs-btn-active-bg: var(--action-hover);
  --bs-btn-active-border-color: var(--action-hover);
  --bs-btn-disabled-color: var(--action-text);
  --bs-btn-disabled-bg: var(--action);
  --bs-btn-disabled-border-color: var(--action);
}

.btn-secondary,
.btn-outline-secondary,
.btn-light,
.btn-outline-dark {
  --bs-btn-color: var(--text);
  --bs-btn-bg: var(--surface);
  --bs-btn-border-color: var(--border-control);
  --bs-btn-hover-color: var(--text);
  --bs-btn-hover-bg: var(--surface-hover);
  --bs-btn-hover-border-color: var(--border-strong);
  --bs-btn-active-color: var(--text);
  --bs-btn-active-bg: var(--surface-hover);
  --bs-btn-active-border-color: var(--border-strong);
  --bs-btn-disabled-color: var(--text-muted);
  --bs-btn-disabled-bg: var(--surface);
  --bs-btn-disabled-border-color: var(--border);
}

.btn-ghost {
  --bs-btn-color: var(--text-muted);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--text);
  --bs-btn-hover-bg: var(--surface-hover);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--text);
  --bs-btn-active-bg: var(--surface-hover);
  --bs-btn-active-border-color: transparent;
  --bs-btn-disabled-color: var(--text-subtle);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: transparent;
}
/* Veprim i qetë që fshin (p.sh. "Fshi grupin" në fund të një dialogu). */
.btn-ghost.btn-ghost-danger {
  --bs-btn-color: var(--danger);
  --bs-btn-hover-color: var(--danger-hover);
  --bs-btn-hover-bg: var(--danger-soft);
  --bs-btn-active-color: var(--danger-hover);
  --bs-btn-active-bg: var(--danger-soft);
}

.btn-outline-primary {
  --bs-btn-color: var(--accent-text);
  --bs-btn-bg: var(--surface);
  --bs-btn-border-color: var(--accent-border);
  --bs-btn-hover-color: var(--accent-text);
  --bs-btn-hover-bg: var(--accent-soft);
  --bs-btn-hover-border-color: var(--accent-text);
  --bs-btn-active-color: var(--accent-text);
  --bs-btn-active-bg: var(--accent-soft);
  --bs-btn-active-border-color: var(--accent-text);
  --bs-btn-disabled-color: var(--text-muted);
  --bs-btn-disabled-bg: var(--surface);
  --bs-btn-disabled-border-color: var(--border);
}

.btn-danger {
  --bs-btn-color: var(--danger-text);
  --bs-btn-bg: var(--danger);
  --bs-btn-border-color: var(--danger);
  --bs-btn-hover-color: var(--danger-text);
  --bs-btn-hover-bg: var(--danger-hover);
  --bs-btn-hover-border-color: var(--danger-hover);
  --bs-btn-active-color: var(--danger-text);
  --bs-btn-active-bg: var(--danger-hover);
  --bs-btn-active-border-color: var(--danger-hover);
  --bs-btn-disabled-color: var(--danger-text);
  --bs-btn-disabled-bg: var(--danger);
  --bs-btn-disabled-border-color: var(--danger);
}

.btn-outline-danger {
  --bs-btn-color: var(--danger);
  --bs-btn-bg: var(--surface);
  --bs-btn-border-color: var(--danger-border);
  --bs-btn-hover-color: var(--danger);
  --bs-btn-hover-bg: var(--danger-soft);
  --bs-btn-hover-border-color: var(--danger);
  --bs-btn-active-color: var(--danger);
  --bs-btn-active-bg: var(--danger-soft);
  --bs-btn-active-border-color: var(--danger);
  --bs-btn-disabled-color: var(--text-muted);
  --bs-btn-disabled-bg: var(--surface);
  --bs-btn-disabled-border-color: var(--border);
}

.btn-success {
  --bs-btn-color: var(--success-text);
  --bs-btn-bg: var(--success);
  --bs-btn-border-color: var(--success);
  --bs-btn-hover-color: var(--success-text);
  --bs-btn-hover-bg: var(--success);
  --bs-btn-hover-border-color: var(--success);
  --bs-btn-active-color: var(--success-text);
  --bs-btn-active-bg: var(--success);
  --bs-btn-active-border-color: var(--success);
}
.btn-success:hover { filter: brightness(.92); }

.btn-outline-success {
  --bs-btn-color: var(--success);
  --bs-btn-bg: var(--surface);
  --bs-btn-border-color: var(--success-border);
  --bs-btn-hover-color: var(--success);
  --bs-btn-hover-bg: var(--success-soft);
  --bs-btn-hover-border-color: var(--success);
  --bs-btn-active-color: var(--success);
  --bs-btn-active-bg: var(--success-soft);
  --bs-btn-active-border-color: var(--success);
}

.btn-link {
  --bs-btn-color: var(--link);
  --bs-btn-hover-color: var(--link-hover);
  --bs-btn-active-color: var(--link-hover);
  --bs-btn-disabled-color: var(--text-subtle);
  --bs-btn-padding-x: .25rem;
  --bs-btn-font-weight: var(--fw-semibold);
  text-decoration: underline;
  text-underline-offset: .18em;
}

.btn-sm, .btn-group-sm > .btn {
  --bs-btn-padding-y: .3rem;
  --bs-btn-padding-x: .625rem;
  --bs-btn-font-size: var(--fs-xs);
  --bs-btn-border-radius: var(--r-sm);
  gap: var(--sp-1);
  min-height: var(--control-h-sm);
}
.btn-lg, .btn-group-lg > .btn {
  --bs-btn-padding-y: .75rem;
  --bs-btn-padding-x: 1.25rem;
  --bs-btn-font-size: var(--fs-base);
  --bs-btn-border-radius: var(--r-md);
  min-height: var(--control-h-lg);
}

/* Buton vetëm me ikonë: katror, me emër të aksesueshëm te aria-label. */
.btn-icon {
  --bs-btn-padding-x: 0;
  --bs-btn-padding-y: 0;
  width: var(--control-h);
  flex: none;
}
.btn-icon.btn-sm { width: var(--control-h-sm); }
.btn-icon.btn-lg { width: var(--control-h-lg); }

/* "Si funksionon kjo faqe?": një buton i vogël me pikëpyetje, i qetë por i dukshëm.
   Emri i plotë është te aria-label dhe te këshilla që del me mi ose tastierë. */
.btn-help {
  --bs-btn-color: var(--text-muted);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--border-control);
  --bs-btn-hover-color: var(--text);
  --bs-btn-hover-bg: var(--surface-hover);
  --bs-btn-hover-border-color: var(--border-strong);
  --bs-btn-active-color: var(--text);
  --bs-btn-active-bg: var(--surface-hover);
  --bs-btn-active-border-color: var(--border-strong);
  border-radius: var(--r-full);
}
.btn-help > .bi { font-size: 1.15rem; }
.btn-help[aria-expanded="true"] { border-color: var(--focus); color: var(--text); }

/* Veprime të rreshtit vetëm me ikonë: fshirja mbahet larg të tjerave. */
.row-actions > .btn-delete { margin-left: var(--sp-2); }
.row-actions > .btn-delete::before {
  content: "";
  position: absolute;
  left: calc(var(--sp-2) * -1 + 1px);
  top: 25%;
  bottom: 25%;
  width: 1px;
  background: var(--border);
}
.row-actions > .btn { position: relative; }

/* Gjendja "po punon": ruan gjerësinë dhe kontekstin. */
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after {
  content: "";
  position: absolute;
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--bs-btn-color);
  border-right-color: transparent;
  border-radius: 50%;
  animation: themeli-spin .7s linear infinite;
}
@keyframes themeli-spin { to { transform: rotate(360deg); } }

.btn-group { gap: 0; }
.btn-group > .btn { flex: 0 1 auto; }

.btn-close {
  --bs-btn-close-opacity: .65;
  --bs-btn-close-hover-opacity: 1;
  --bs-btn-close-focus-shadow: none;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border-radius: var(--r-sm);
  background-size: .8rem;
}
.btn-close:hover { background-color: var(--surface-hover); }

/* ================================================================= 2. Fushat */
.form-label,
.col-form-label {
  margin-bottom: .375rem;
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}
.form-label .req,
.required-mark { color: var(--danger); margin-left: 2px; }
.form-label .optional { color: var(--text-muted); font-weight: var(--fw-regular); }

.form-text {
  margin-top: .375rem;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  line-height: 1.45;
}

.form-control,
.form-select {
  min-height: var(--control-h);
  padding: .5rem .75rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background-color: var(--surface);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: 1.4;
  box-shadow: none;
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.form-select { padding-right: 2.25rem; background-position: right .75rem center; }
.form-control::placeholder { color: var(--text-subtle); opacity: 1; }
.form-control:hover:not(:disabled):not([readonly]),
.form-select:hover:not(:disabled) { border-color: var(--text-muted); }
.form-control:focus,
.form-select:focus {
  border-color: var(--focus);
  background-color: var(--surface);
  color: var(--text);
  box-shadow: var(--focus-ring);
  outline: none;
}
.form-control:disabled,
.form-select:disabled {
  border-color: var(--border);
  background-color: var(--surface-sunken);
  color: var(--text-muted);
  opacity: 1;
  cursor: not-allowed;
}
.form-control[readonly] { background-color: var(--surface-sunken); }
textarea.form-control { min-height: 6.5rem; resize: vertical; }
.form-control-sm,
.form-select-sm {
  min-height: var(--control-h-sm);
  padding: .25rem .5rem;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
}
.form-select-sm { padding-right: 2rem; background-position: right .5rem center; }
.form-control-lg,
.form-select-lg {
  min-height: var(--control-h-lg);
  padding: .625rem 1rem;
  font-size: var(--fs-base);
}
.form-control-plaintext { color: var(--text); }
.form-control-color { padding: .25rem; }

/* Kodet (NIPT, numër personal, AMZË) shkruhen me mono — dallohen I/l/1, O/0. */
.input-code,
.form-control.input-code { font-family: var(--font-mono); letter-spacing: .02em; }

/* iOS zmadhon faqen kur fusha ka tekst < 16px; e shmangim në celular. */
@media (max-width: 767.98px) {
  .form-control, .form-select, .lf-input { font-size: 16px; }
}

/* Validimi: kufi + mesazh, pa ikona brenda fushës. */
.form-control.is-invalid,
.was-validated .form-control:invalid,
.form-select.is-invalid,
.was-validated .form-select:invalid {
  border-color: var(--danger);
  background-image: none;
  padding-right: .75rem;
}
.form-select.is-invalid,
.was-validated .form-select:invalid { padding-right: 2.25rem; background-image: var(--bs-form-select-bg-img); }
.form-control.is-invalid:focus,
.was-validated .form-control:invalid:focus,
.form-select.is-invalid:focus { box-shadow: 0 0 0 3px rgba(180, 35, 24, .22); }
.was-validated .form-control:valid,
.form-control.is-valid,
.was-validated .form-select:valid {
  border-color: var(--border-strong);
  background-image: none;
  padding-right: .75rem;
}
.was-validated .form-select:valid { padding-right: 2.25rem; background-image: var(--bs-form-select-bg-img); }
.invalid-feedback {
  margin-top: .375rem;
  color: var(--danger);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}
.valid-feedback { color: var(--success); font-size: var(--fs-xs); }

/* Kutitë e zgjedhjes dhe çelësat */
.form-check { min-height: 1.5rem; margin-bottom: .25rem; }
.form-check-label { color: var(--text); font-size: var(--fs-sm); cursor: pointer; }
.form-check-input {
  --bs-form-check-bg: var(--surface);
  width: 1.125rem;
  height: 1.125rem;
  margin-top: .15em;
  border: 1px solid var(--border-strong);
  cursor: pointer;
}
.form-check-input:focus { border-color: var(--focus); box-shadow: var(--focus-ring); }
.form-check-input:checked {
  border-color: var(--action);
  background-color: var(--action);
}
.form-check-input:disabled { opacity: .5; }
.form-switch .form-check-input { width: 2.25em; border-radius: var(--r-full); }
.form-switch .form-check-input:focus { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%238f897c'/%3e%3c/svg%3e"); }
:root[data-theme="dark"] .form-check-input:checked[type=checkbox] {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%231a1917' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
:root[data-theme="dark"] .form-check-input:checked[type=radio] {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%231a1917'/%3e%3c/svg%3e");
}
:root[data-theme="dark"] .form-switch .form-check-input:checked {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%231a1917'/%3e%3c/svg%3e");
}

.input-group-text {
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background-color: var(--surface-sunken);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}
.input-group > .form-control:focus,
.input-group > .form-select:focus { z-index: 5; }
.input-group-sm > .input-group-text { border-radius: var(--r-sm); font-size: var(--fs-xs); }

/* Fushë kërkimi me ikonë brenda */
.search-field { position: relative; min-width: 0; }
.search-field > .bi {
  position: absolute;
  top: 50%;
  left: .8rem;
  color: var(--text-subtle);
  transform: translateY(-50%);
  pointer-events: none;
}
.search-field > .form-control { padding-left: 2.35rem; }
.search-field.is-lg > .form-control { min-height: var(--control-h-lg); font-size: var(--fs-base); }

/* Fushë fjalëkalimi me butonin "shfaq" */
.password-field { position: relative; }
.password-field > .form-control { padding-right: 3rem; }
.password-field > .password-toggle {
  position: absolute;
  top: 50%;
  right: .25rem;
  transform: translateY(-50%);
}
.password-field:has(.is-invalid) ~ .invalid-feedback { display: block; }
.caps-note[hidden] { display: none; }
.caps-note {
  display: flex;
  align-items: center;
  gap: .375rem;
  margin-top: .375rem;
  color: var(--warning);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}

/* ================================================================= 3. Kartat */
.card {
  --bs-card-bg: var(--surface);
  --bs-card-color: var(--text);
  --bs-card-border-color: var(--border);
  --bs-card-border-radius: var(--r-lg);
  --bs-card-inner-border-radius: calc(var(--r-lg) - 1px);
  --bs-card-cap-bg: transparent;
  --bs-card-cap-color: var(--text);
  --bs-card-cap-padding-y: .875rem;
  --bs-card-cap-padding-x: 1.25rem;
  --bs-card-spacer-y: 1.25rem;
  --bs-card-spacer-x: 1.25rem;
  --bs-card-title-color: var(--text);
  --bs-card-box-shadow: none;
}
.card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--border);
  font-weight: var(--fw-semibold);
}
.card-header :is(h2, h3, h4, h5, h6, .card-title) {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
}
.card-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  border-top: 1px solid var(--border);
  background: transparent;
}
.card-title { font-size: var(--fs-base); font-weight: var(--fw-semibold); }
.card-subtitle { color: var(--text-muted); }

/* Panel i sheshtë, pa kornizë — për grupime të lehta. */
.panel {
  padding: var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.panel-sunken {
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--surface-sunken);
}

/* ================================================================ 4. Tabelat */
.table-responsive {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  overscroll-behavior-inline: contain;
}
.card > .table-responsive,
.card-body > .table-responsive:only-child,
.card-body.p-0 > .table-responsive {
  border: 0;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}

.table {
  --bs-table-color: var(--text);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--border);
  --bs-table-striped-color: var(--text);
  --bs-table-striped-bg: transparent;
  --bs-table-active-color: var(--text);
  --bs-table-active-bg: var(--accent-soft);
  --bs-table-hover-color: var(--text);
  --bs-table-hover-bg: var(--surface-hover);
  margin-bottom: 0;
  color: var(--text);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}
.table > thead > tr > th,
.table > thead > tr > td {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: .625rem .875rem;
  border-bottom: 1px solid var(--border-strong);
  background: var(--surface-sunken);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-align: left;
  vertical-align: bottom;
  white-space: nowrap;
}
.table > tbody > tr > td,
.table > tbody > tr > th,
.table > tfoot > tr > td {
  padding: .625rem .875rem;
  border-bottom-color: var(--border);
  vertical-align: middle;
}
.table > tbody > tr:last-child > * { border-bottom: 0; }
.table > tbody > tr:hover > * { --bs-table-bg-state: var(--surface-hover); }
.table > tbody > tr.is-selected > *,
.table > tbody > tr.table-active > * { --bs-table-bg-state: var(--accent-soft); }
.table-sm > :not(caption) > * > * { padding: .375rem .625rem; }
.table-light {
  --bs-table-color: var(--text-muted);
  --bs-table-bg: var(--surface-sunken);
  --bs-table-border-color: var(--border);
}
.table :is(th, td).num-col,
.table :is(th, td).text-end { text-align: right; }
.table td.num { font-variant-numeric: tabular-nums; }
.table .col-actions,
.table td.actions { width: 1%; white-space: nowrap; text-align: right; }

/* Renditja: shigjeta tregon drejtimin, aria-sort e njofton. */
.table th[data-sort]:not([data-sort="none"]) { cursor: pointer; user-select: none; }
.table th[data-sort]:not([data-sort="none"]):hover { color: var(--text); }
.table th[data-sort]:not([data-sort="none"])::after {
  content: "\2195";
  margin-left: .35rem;
  color: var(--text-subtle);
  font-size: .9em;
}
.table th.is-asc::after { content: "\2191" !important; color: var(--accent-text) !important; }
.table th.is-desc::after { content: "\2193" !important; color: var(--accent-text) !important; }

/* Dendësia: rreshta më të ngjeshur për stafin që punon me shumë të dhëna. */
body.dense .table > tbody > tr > * { padding-block: .375rem; }

.row-actions { display: inline-flex; flex-wrap: nowrap; gap: var(--sp-1); }

/* Gjerësi minimale për kolonat me tekst të gjatë (emra modulesh, adresa). */
.table .col-wide { min-width: 16rem; }
.table .col-medium { min-width: 10rem; }

/* Kutiza e zgjedhjes së rreshtit */
.table .pick-col { width: 1%; padding-right: 0; }
.table .pick-col .form-check-input { margin: 0; width: 1.15rem; height: 1.15rem; }

/* Një zgjedhje + buton brenda qelizës (p.sh. "Zgjidh grupin" · "Cakto") */
.inline-action { display: flex; align-items: center; gap: var(--sp-2); }
.inline-action > .form-select { min-width: 12rem; max-width: 26rem; }

/* Rresht bosh brenda tabelës */
.table-empty {
  padding: var(--sp-8) var(--sp-4) !important;
  color: var(--text-muted);
  text-align: center;
}

/* Identifikuesit në tabela */
.id-code {
  font-family: var(--font-mono);
  font-size: .95em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.person-name { font-weight: var(--fw-semibold); }
/* Emrat (kursant, kurs, grup) që hapin faqen e tyre janë lidhje pa nënvizim:
   dallohen nga ngjyra dhe pesha; nënvizimi del kur kalon miu sipër. */
a.person-name,
a.row-open { text-decoration: none; }
a.person-name:hover { text-decoration: underline; text-underline-offset: .15em; }
.cell-sub { display: block; color: var(--text-muted); font-size: var(--fs-xs); }

/* Rreshti që hap hollësitë në një dialog mbi faqe (grupi, grupet e modulit).
   <td><button class="row-open" data-bs-toggle="modal" data-bs-target="#…">
         <span><span class="person-name">…</span><span class="cell-sub">…</span></span>
         <i class="bi bi-chevron-right"></i></button> */
.row-open {
  position: relative; /* teksti i fshehur për lexuesin e ekranit mbetet brenda tabelës */
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--touch-min);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.row-open .person-name,
.row-open > .row-open-text { color: var(--link); }
.row-open > .bi {
  flex: none;
  color: var(--text-subtle);
  transition: transform var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.row-open:hover .person-name,
.row-open:hover > .row-open-text { color: var(--link-hover); text-decoration: underline; text-underline-offset: .15em; }
.row-open:hover > .bi { color: var(--link-hover); transform: translateX(2px); }
.row-open:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-xs); }

/* Dokumentet e grupit: një kartë për dokument, një buton për çdo format.
   Shkarkimi nis direkt nga butoni — pa dialog të dytë. */
.doc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
  gap: var(--sp-3);
}
.doc-card {
  display: flex;
  gap: var(--sp-3);
  margin: 0;
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.doc-card-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--r-md);
  background: var(--surface-sunken);
  color: var(--text-muted);
  font-size: 1.1rem;
}
.doc-card-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 0;
}
.doc-card-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}
.doc-card-text {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}
.doc-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: auto;
  padding-top: var(--sp-2);
}

/* ====================================================== 5. Redaktimi në vend */
td.cell .editable {
  display: inline-block;
  min-width: 2ch;
  padding: .125rem .3rem;
  margin: -.125rem -.3rem;
  border-radius: var(--r-xs);
  color: var(--text);
}
.editable[contenteditable="true"] {
  cursor: text;
  background-image: linear-gradient(90deg, var(--border-strong) 50%, transparent 0);
  background-position: 0 100%;
  background-repeat: repeat-x;
  background-size: 6px 1px;
}
.editable[contenteditable="true"]:hover { background-color: var(--surface-hover); }
.editable[contenteditable="true"]:focus {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
  background-color: var(--surface);
  background-image: none;
}
td.cell-saving { --bs-table-bg-state: var(--info-soft); }
td.cell-ok { --bs-table-bg-state: var(--success-soft); }
td.cell-err { --bs-table-bg-state: var(--danger-soft); }
td.cell-saving,
td.cell-ok,
td.cell-err { transition: box-shadow var(--dur-3) var(--ease); }

/* Zgjedhja brenda tabelës: kur është e mbyllur lexohet si tekst. */
.inline-select { min-width: 8.5rem; }
.inline-select:disabled {
  padding-inline: 0;
  border-color: transparent;
  background-color: transparent;
  background-image: none;
  color: var(--text);
  cursor: default;
  appearance: none;
}

/* ============================================= 6. Shenjat dhe statuset */
.badge {
  --bs-badge-padding-x: .55rem;
  --bs-badge-padding-y: .22rem;
  --bs-badge-font-size: var(--fs-2xs);
  --bs-badge-font-weight: var(--fw-semibold);
  --bs-badge-color: var(--text);
  --bs-badge-border-radius: var(--r-full);
  letter-spacing: 0;
  vertical-align: middle;
}
.text-bg-primary { color: var(--accent-text) !important; background-color: var(--accent-soft) !important; box-shadow: inset 0 0 0 1px var(--accent-border); }
.text-bg-secondary,
.text-bg-light { color: var(--text) !important; background-color: var(--surface-sunken) !important; box-shadow: inset 0 0 0 1px var(--border); }
.text-bg-success { color: var(--success) !important; background-color: var(--success-soft) !important; box-shadow: inset 0 0 0 1px var(--success-border); }
.text-bg-warning { color: var(--warning) !important; background-color: var(--warning-soft) !important; box-shadow: inset 0 0 0 1px var(--warning-border); }
.text-bg-danger { color: var(--danger) !important; background-color: var(--danger-soft) !important; box-shadow: inset 0 0 0 1px var(--danger-border); }
.text-bg-info { color: var(--info) !important; background-color: var(--info-soft) !important; box-shadow: inset 0 0 0 1px var(--info-border); }
.text-bg-dark { color: var(--text-inverse) !important; background-color: var(--surface-inverse) !important; }

/* Statusi: fjalë + ikonë + ngjyrë. Kurrë vetëm ngjyrë. */
.status {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  max-width: 100%;
  padding: .18rem .6rem;
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  background: var(--surface-sunken);
  color: var(--text);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  line-height: 1.45;
  white-space: nowrap;
}
.status > .bi { font-size: .95em; }
.status-success { border-color: var(--success-border); background: var(--success-soft); color: var(--success); }
.status-warning { border-color: var(--warning-border); background: var(--warning-soft); color: var(--warning); }
.status-danger  { border-color: var(--danger-border);  background: var(--danger-soft);  color: var(--danger); }
.status-info    { border-color: var(--info-border);    background: var(--info-soft);    color: var(--info); }
.status-accent  { border-color: var(--accent-border);  background: var(--accent-soft);  color: var(--accent-text); }
.status-neutral { border-color: var(--border);         background: var(--surface-sunken); color: var(--text-muted); }

.count {
  display: inline-grid;
  place-items: center;
  min-width: 1.5rem;
  height: 1.375rem;
  padding: 0 .4rem;
  border-radius: var(--r-full);
  background: var(--surface-sunken);
  color: var(--text-muted);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}

/* ============================================================ 7. Mesazhet */
.alert {
  --bs-alert-padding-x: 1rem;
  --bs-alert-padding-y: .875rem;
  --bs-alert-margin-bottom: 1rem;
  --bs-alert-border-radius: var(--r-md);
  --bs-alert-color: var(--text);
  --bs-alert-bg: var(--surface);
  --bs-alert-border-color: var(--border);
  --bs-alert-link-color: var(--text);
  color: var(--text);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.alert:has(> .bi:first-child) {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
}
.alert > .bi:first-child { flex: none; margin-top: .1rem; font-size: 1.1rem; }
.alert-primary { --bs-alert-bg: var(--accent-soft); --bs-alert-border-color: var(--accent-border); }
.alert-primary > .bi:first-child { color: var(--accent-text); }
.alert-secondary,
.alert-light { --bs-alert-bg: var(--surface-sunken); --bs-alert-border-color: var(--border); }
.alert-secondary > .bi:first-child,
.alert-light > .bi:first-child { color: var(--text-muted); }
.alert-info { --bs-alert-bg: var(--info-soft); --bs-alert-border-color: var(--info-border); }
.alert-info > .bi:first-child { color: var(--info); }
.alert-success { --bs-alert-bg: var(--success-soft); --bs-alert-border-color: var(--success-border); }
.alert-success > .bi:first-child { color: var(--success); }
.alert-warning { --bs-alert-bg: var(--warning-soft); --bs-alert-border-color: var(--warning-border); }
.alert-warning > .bi:first-child { color: var(--warning); }
.alert-danger { --bs-alert-bg: var(--danger-soft); --bs-alert-border-color: var(--danger-border); }
.alert-danger > .bi:first-child { color: var(--danger); }
.alert .alert-title,
.alert .alert-heading {
  display: block;
  margin: 0 0 .15rem;
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}
.alert-link { font-weight: var(--fw-bold); text-decoration: underline; }
.alert ul { margin: .375rem 0 0; padding-left: 1.1rem; }
.alert-dismissible { padding-right: 3rem; }
.alert-dismissible .btn-close { top: .5rem; right: .5rem; padding: 0; }

/* ============================================================ 8. Shënimet */
/* Shënim i qetë brenda faqes — shpjegon, nuk alarmon. */
.notice {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  padding: .75rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.notice > .bi { flex: none; margin-top: .15rem; color: var(--info); }
.notice b, .notice strong { color: var(--text); }
.notice.is-sunken { background: var(--surface-sunken); }
/* Diçka e pazakontë që vlen të kontrollohet (p.sh. numra amze që mungojnë). */
.notice.is-warning { border-color: var(--warning-border); }
.notice.is-warning > .bi { color: var(--warning); }
.notice details > summary { color: var(--link); cursor: pointer; }
/* Një veprim i vetëm që i përket shënimit, p.sh. "Mbylle grupin":
   <div class="notice has-action"><i …></i><span>…</span><button class="notice-action …"> */
.notice > .notice-action { flex: none; margin: -.25rem 0 -.25rem auto; }
@media (max-width: 575.98px) {
  .notice.has-action { flex-wrap: wrap; }
  .notice.has-action > span { flex: 1 1 calc(100% - 1.5rem); min-width: 0; }
  .notice > .notice-action { margin: 0 0 0 1.5rem; }
}

/* ================================================== 9. Menutë (dropdown) */
.dropdown-menu {
  --bs-dropdown-min-width: 13rem;
  --bs-dropdown-padding-x: .375rem;
  --bs-dropdown-padding-y: .375rem;
  --bs-dropdown-spacer: .375rem;
  --bs-dropdown-font-size: var(--fs-sm);
  --bs-dropdown-color: var(--text);
  --bs-dropdown-bg: var(--surface);
  --bs-dropdown-border-color: var(--border);
  --bs-dropdown-border-radius: var(--r-lg);
  --bs-dropdown-inner-border-radius: calc(var(--r-lg) - 1px);
  --bs-dropdown-divider-bg: var(--border);
  --bs-dropdown-divider-margin-y: .375rem;
  --bs-dropdown-box-shadow: var(--shadow-md);
  --bs-dropdown-link-color: var(--text);
  --bs-dropdown-link-hover-color: var(--text);
  --bs-dropdown-link-hover-bg: var(--surface-hover);
  --bs-dropdown-link-active-color: var(--accent-text);
  --bs-dropdown-link-active-bg: var(--accent-soft);
  --bs-dropdown-link-disabled-color: var(--text-subtle);
  --bs-dropdown-item-padding-x: .75rem;
  --bs-dropdown-item-padding-y: .5rem;
  --bs-dropdown-header-color: var(--text-muted);
  --bs-dropdown-header-padding-x: .75rem;
  --bs-dropdown-header-padding-y: .375rem;
  box-shadow: var(--bs-dropdown-box-shadow);
}
.dropdown-item {
  display: flex;
  align-items: center;
  gap: .625rem;
  min-height: 2.25rem;
  border-radius: var(--r-sm);
}
.dropdown-item > .bi { flex: none; width: 1.1rem; color: var(--text-muted); text-align: center; }
.dropdown-item.active > .bi,
.dropdown-item.text-danger > .bi { color: inherit; }
.dropdown-item.text-danger:hover { background: var(--danger-soft); color: var(--danger); }
.dropdown-header { font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.dropdown-toggle::after { margin-left: .15rem; vertical-align: .12em; }

/* ======================================================= 10. Dialogët */
.modal {
  --bs-modal-padding: 1.25rem 1.5rem;
  --bs-modal-margin: .75rem;
  --bs-modal-color: var(--text);
  --bs-modal-bg: var(--surface);
  --bs-modal-border-color: var(--border);
  --bs-modal-border-radius: var(--r-xl);
  --bs-modal-inner-border-radius: calc(var(--r-xl) - 1px);
  --bs-modal-box-shadow: var(--shadow-lg);
  --bs-modal-header-padding: 1.25rem 1.5rem .75rem;
  --bs-modal-header-border-color: transparent;
  --bs-modal-title-line-height: 1.3;
  --bs-modal-footer-gap: .5rem;
  --bs-modal-footer-bg: var(--surface-sunken);
  --bs-modal-footer-border-color: var(--border);
}
.modal-content { box-shadow: var(--bs-modal-box-shadow); }
.modal-backdrop { --bs-backdrop-bg: #171614; --bs-backdrop-opacity: .5; }
.modal-title {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
}
.modal-title > .bi { color: var(--text-muted); }
/* Bootstrap e llogarit hapësirën e fundit me calc(var(--bs-modal-padding) − …);
   meqë këtu --bs-modal-padding ka dy vlera, ajo llogaritje del e pavlefshme dhe
   butonat ngelnin pa hapësirë, ngjitur me cepin. Prandaj hapësira jepet qartë. */
.modal-footer {
  gap: .5rem;
  padding: .875rem 1.5rem;
  border-bottom-right-radius: var(--bs-modal-inner-border-radius);
  border-bottom-left-radius: var(--bs-modal-inner-border-radius);
}
.modal-footer > * { margin: 0; }
/* Veprimet dytësore majtas (p.sh. "Ndrysho kursantët"), mbyllja djathtas. */
.modal-footer > .modal-footer-start {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  margin-right: auto;
}
@media (max-width: 479.98px) {
  .modal-footer { padding: .75rem 1rem; }
  .modal-footer > .btn { flex: 1 1 auto; }
  .modal-footer > .modal-footer-start { flex: 1 1 100%; }
  .modal-footer > .modal-footer-start > .btn { flex: 1 1 auto; }
}
.modal-body > :last-child { margin-bottom: 0; }

/* Blocking document preparation, above every Bootstrap workspace dialog. */
.document-generation {
  width: min(calc(100% - var(--sp-8)), var(--dialog-document-w));
  max-width: calc(100% - var(--sp-4));
  max-height: calc(100dvh - var(--sp-8));
  margin: auto;
  padding: 0;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: auto;
}
.document-generation::backdrop { background: var(--dialog-backdrop); opacity: .6; }
.document-generation .modal-header { padding: var(--sp-6) var(--sp-6) var(--sp-3); }
.document-generation .modal-body { padding: var(--sp-3) var(--sp-6) var(--sp-6); }
.document-generation .modal-footer { background: var(--surface-sunken); }
.document-generation [hidden] { display: none; }
.document-generation-status { display: flex; justify-content: space-between; gap: var(--sp-4); margin-block: var(--sp-5) var(--sp-2); }
.document-generation-status .num { flex: 0 0 auto; font-weight: var(--fw-semibold); }
.document-generation-progress { display: block; width: 100%; height: var(--sp-2); border: 0; border-radius: var(--r-sm); background: var(--surface-sunken); accent-color: var(--action); }
.document-generation-progress::-webkit-progress-bar { background: var(--surface-sunken); border-radius: var(--r-sm); }
.document-generation-progress::-webkit-progress-value { background: var(--action); border-radius: var(--r-sm); }
.document-generation-progress::-moz-progress-bar { background: var(--action); border-radius: var(--r-sm); }
body.is-generating-document { overflow: hidden; }

/* Dialog mbi dialog (p.sh. konfirmimi kur ndryshon pikët e një grupi të mbyllur):
   i dyti del sipër dhe sfondi i tij errëson të parin. */
.modal.is-stacked { --bs-modal-zindex: 1065; }
.modal-backdrop.is-stacked { --bs-backdrop-zindex: 1060; }

/* Dialogu i një regjistri (një grup, grupet e një moduli): koka mban të dhënat
   kryesore, trupi ka pjesë me tituj të vegjël, veprimet janë poshtë. */
.modal-record .modal-header {
  align-items: flex-start;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}
.modal-record .modal-title {
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
}
.modal-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .375rem 1rem;
  margin-top: .5rem;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}
.modal-meta > span { display: inline-flex; align-items: center; gap: .375rem; }
.modal-meta > span > .bi { color: var(--text-subtle); }
.modal-section + .modal-section { margin-top: var(--sp-6); }
.modal-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-1) var(--sp-3);
  margin-bottom: var(--sp-3);
}
.modal-section-title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
}
.modal-record .modal-body > .notice { margin-bottom: var(--sp-5); }

/* Dialogu i konfirmimit: pasoja thuhet qartë. */
.confirm-icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: var(--sp-3);
  border-radius: var(--r-full);
  background: var(--warning-soft);
  color: var(--warning);
  font-size: 1.25rem;
}
.confirm-icon.is-danger { background: var(--danger-soft); color: var(--danger); }
/* Pikat e një konfirmimi: çfarë ndodh dhe çfarë mbetet njësoj (qtaConfirm({points})). */
.confirm-points { display: grid; gap: var(--sp-2); margin: var(--sp-3) 0 0; padding: 0; list-style: none; font-size: var(--fs-sm); }
.confirm-points > li { display: grid; grid-template-columns: 1.1rem minmax(0, 1fr); gap: var(--sp-2); color: var(--text); }
.confirm-points > li > .bi { margin-top: .1rem; color: var(--success); }

/* ================================================ 11. Paneli anësor (ndihma) */
.offcanvas {
  --bs-offcanvas-width: min(440px, 100vw);
  --bs-offcanvas-padding-x: 1.5rem;
  --bs-offcanvas-padding-y: 1.25rem;
  --bs-offcanvas-color: var(--text);
  --bs-offcanvas-bg: var(--surface);
  --bs-offcanvas-border-color: var(--border);
  --bs-offcanvas-box-shadow: var(--shadow-lg);
  --bs-offcanvas-title-line-height: 1.3;
  box-shadow: var(--bs-offcanvas-box-shadow);
}
.offcanvas-header { border-bottom: 1px solid var(--border); }
.offcanvas-title { font-size: var(--fs-lg); font-weight: var(--fw-bold); }

/* ================================================= 12. Njoftimet (toast) */
.toast-container { z-index: var(--z-toast); }
.toast {
  --bs-toast-max-width: 380px;
  --bs-toast-padding-x: 1rem;
  --bs-toast-padding-y: .75rem;
  --bs-toast-font-size: var(--fs-sm);
  --bs-toast-color: var(--text);
  --bs-toast-bg: var(--surface);
  --bs-toast-border-color: var(--border);
  --bs-toast-border-radius: var(--r-lg);
  --bs-toast-box-shadow: var(--shadow-md);
  --bs-toast-header-color: var(--text);
  --bs-toast-header-bg: transparent;
  --bs-toast-header-border-color: transparent;
  border-left: 4px solid var(--info);
}
.toast-header { padding-bottom: 0; font-weight: var(--fw-bold); }
.toast-header .btn-close { margin-right: -.375rem; }
.toast-body { color: var(--text); }
.toast-success { border-left-color: var(--success); }
.toast-danger  { border-left-color: var(--danger); }
.toast-warning { border-left-color: var(--warning); }
.toast-info, .toast-primary { border-left-color: var(--info); }

/* ======================================================== 13. Skedat */
.nav {
  --bs-nav-link-padding-x: .875rem;
  --bs-nav-link-padding-y: .5rem;
  --bs-nav-link-font-weight: var(--fw-semibold);
  --bs-nav-link-color: var(--text-muted);
  --bs-nav-link-hover-color: var(--text);
  --bs-nav-link-disabled-color: var(--text-subtle);
}
.nav-link { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--fs-sm); }

.nav-tabs {
  --bs-nav-tabs-border-width: 1px;
  --bs-nav-tabs-border-color: var(--border);
  --bs-nav-tabs-border-radius: 0;
  --bs-nav-tabs-link-hover-border-color: transparent;
  --bs-nav-tabs-link-active-color: var(--text);
  --bs-nav-tabs-link-active-bg: transparent;
  --bs-nav-tabs-link-active-border-color: transparent;
  gap: .25rem;
}
.nav-tabs .nav-link {
  margin-bottom: -1px;
  border: 0;
  border-bottom: 2px solid transparent;
}
.nav-tabs .nav-link:hover { border-bottom-color: var(--border-strong); }
.nav-tabs .nav-link.active { border-bottom-color: var(--action); color: var(--text); }

/* Pills = kontroll i segmentuar */
.nav-pills {
  --bs-nav-pills-border-radius: var(--r-md);
  --bs-nav-pills-link-active-color: var(--text);
  --bs-nav-pills-link-active-bg: var(--surface);
  display: inline-flex;
  flex-wrap: wrap;
  gap: .25rem;
  padding: .25rem;
  border-radius: calc(var(--r-md) + 4px);
  background: var(--surface-sunken);
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link { box-shadow: var(--shadow-xs), inset 0 0 0 1px var(--border); }

/* ===================================================== 14. Faqosja */
.pagination {
  --bs-pagination-padding-x: .75rem;
  --bs-pagination-padding-y: .375rem;
  --bs-pagination-font-size: var(--fs-sm);
  --bs-pagination-color: var(--text);
  --bs-pagination-bg: var(--surface);
  --bs-pagination-border-width: 1px;
  --bs-pagination-border-color: var(--border);
  --bs-pagination-border-radius: var(--r-md);
  --bs-pagination-hover-color: var(--text);
  --bs-pagination-hover-bg: var(--surface-hover);
  --bs-pagination-hover-border-color: var(--border-strong);
  --bs-pagination-focus-color: var(--text);
  --bs-pagination-focus-bg: var(--surface-hover);
  --bs-pagination-focus-box-shadow: none;
  --bs-pagination-active-color: var(--action-text);
  --bs-pagination-active-bg: var(--action);
  --bs-pagination-active-border-color: var(--action);
  --bs-pagination-disabled-color: var(--text-subtle);
  --bs-pagination-disabled-bg: var(--surface);
  --bs-pagination-disabled-border-color: var(--border);
  flex-wrap: wrap;
  gap: .25rem;
  margin-bottom: 0;
}
.page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  min-height: 2.25rem;
  border-radius: var(--r-md) !important;
  margin-left: 0 !important;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}
.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}
.pager-info { font-variant-numeric: tabular-nums; }
.page-link { transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }

/* ================================================= 15. Lista, progresi */
.list-group {
  --bs-list-group-color: var(--text);
  --bs-list-group-bg: var(--surface);
  --bs-list-group-border-color: var(--border);
  --bs-list-group-border-radius: var(--r-lg);
  --bs-list-group-item-padding-x: 1rem;
  --bs-list-group-item-padding-y: .75rem;
  --bs-list-group-action-color: var(--text);
  --bs-list-group-action-hover-color: var(--text);
  --bs-list-group-action-hover-bg: var(--surface-hover);
  --bs-list-group-action-active-color: var(--text);
  --bs-list-group-action-active-bg: var(--surface-hover);
  --bs-list-group-disabled-color: var(--text-subtle);
  --bs-list-group-disabled-bg: var(--surface);
  --bs-list-group-active-color: var(--accent-text);
  --bs-list-group-active-bg: var(--accent-soft);
  --bs-list-group-active-border-color: var(--accent-border);
}

.progress,
.progress-stacked {
  --bs-progress-height: .5rem;
  --bs-progress-font-size: var(--fs-2xs);
  --bs-progress-bg: var(--surface-sunken);
  --bs-progress-border-radius: var(--r-full);
  --bs-progress-bar-color: var(--action-text);
  --bs-progress-bar-bg: var(--action);
}
.spinner-border { --bs-spinner-border-width: .15em; }

/* ================================================ 16. Tooltip, akordeon */
.tooltip {
  --bs-tooltip-max-width: 260px;
  --bs-tooltip-padding-x: .625rem;
  --bs-tooltip-padding-y: .375rem;
  --bs-tooltip-font-size: var(--fs-xs);
  --bs-tooltip-color: var(--text-inverse);
  --bs-tooltip-bg: var(--surface-inverse);
  --bs-tooltip-border-radius: var(--r-sm);
  --bs-tooltip-opacity: 1;
}
.popover {
  --bs-popover-bg: var(--surface);
  --bs-popover-border-color: var(--border);
  --bs-popover-border-radius: var(--r-lg);
  --bs-popover-box-shadow: var(--shadow-md);
  --bs-popover-header-bg: var(--surface-sunken);
  --bs-popover-header-color: var(--text);
  --bs-popover-body-color: var(--text);
  --bs-popover-font-size: var(--fs-sm);
}

.accordion {
  --bs-accordion-color: var(--text);
  --bs-accordion-bg: var(--surface);
  --bs-accordion-border-color: var(--border);
  --bs-accordion-border-radius: var(--r-lg);
  --bs-accordion-inner-border-radius: calc(var(--r-lg) - 1px);
  --bs-accordion-btn-padding-x: 1.25rem;
  --bs-accordion-btn-padding-y: 1rem;
  --bs-accordion-btn-color: var(--text);
  --bs-accordion-btn-bg: var(--surface);
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-body-padding-x: 1.25rem;
  --bs-accordion-body-padding-y: .25rem 1.25rem 1.25rem;
  --bs-accordion-active-color: var(--text);
  --bs-accordion-active-bg: var(--surface);
}
.accordion-button { font-size: var(--fs-base); font-weight: var(--fw-semibold); }
.accordion-button:not(.collapsed) { box-shadow: none; }
.accordion-body { padding-top: 0; color: var(--text-muted); }

/* ================================================== 17. Koka e faqes */
.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4) var(--sp-6);
  margin-bottom: var(--sp-6);
}
.page-head-main { flex: 1 1 22rem; min-width: 0; }
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .375rem;
  margin: 0 0 var(--sp-2);
  padding: 0;
  list-style: none;
  color: var(--text-muted);
  font-size: var(--fs-xs);
}
.crumbs li + li::before { content: "/"; margin-right: .375rem; color: var(--text-subtle); }
.crumbs a { color: var(--text-muted); text-decoration: none; }
.crumbs a:hover { color: var(--text); text-decoration: underline; }
.page-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: -.018em;
}
.page-lead {
  max-width: 70ch;
  margin: var(--sp-2) 0 0;
  color: var(--text-muted);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}
.page-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}
@media (max-width: 575.98px) {
  .page-actions { width: 100%; }
  .page-actions > .btn-primary { flex: 1 1 auto; }
}

/* ===================================================== 18. Seksionet */
.section { margin-bottom: var(--sp-10); }
.section:last-child { margin-bottom: 0; }
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-3);
}
.section-title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
}
.section-meta { color: var(--text-muted); font-size: var(--fs-sm); }
.section-link {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}
.section-link:hover { text-decoration: underline; }

/* ================================================== 19. Gjendja bosh */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-10) var(--sp-6);
  border: 1px dashed var(--border-control);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--text-muted);
  text-align: center;
}
.empty.is-plain { border: 0; background: transparent; }
.empty.is-compact { padding: var(--sp-6) var(--sp-4); }
.empty-icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--sp-1);
  border-radius: var(--r-full);
  background: var(--surface-sunken);
  color: var(--text-muted);
  font-size: 1.35rem;
}
.empty.is-success .empty-icon { background: var(--success-soft); color: var(--success); }
.empty-title { margin: 0; color: var(--text); font-size: var(--fs-base); font-weight: var(--fw-bold); }
.empty-text { max-width: 52ch; margin: 0; font-size: var(--fs-sm); }
.empty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

/* ========================================================= 20. Shifrat */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--sp-3);
}
.stat {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  min-width: 0;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
}
a.stat { transition: border-color var(--dur-1) var(--ease); }
a.stat:hover { border-color: var(--border-strong); color: var(--text); }
.stat-label { color: var(--text-muted); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.stat-value {
  color: var(--text);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.stat-note { color: var(--text-muted); font-size: var(--fs-xs); }
@media (max-width: 575.98px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
  .stat { padding: var(--sp-3) var(--sp-4); }
  .stat-value { font-size: var(--fs-xl); }
}

/* ================================================ 21. Lista çelës–vlerë */
.kv {
  display: grid;
  grid-template-columns: minmax(7.5rem, max-content) minmax(0, 1fr);
  gap: var(--sp-2) var(--sp-6);
  margin: 0;
  font-size: var(--fs-sm);
}
.kv dt { color: var(--text-muted); font-weight: var(--fw-semibold); }
.kv dd { min-width: 0; margin: 0; color: var(--text); overflow-wrap: anywhere; }
.kv dt { align-self: center; }
.kv dd { align-self: center; }
/* Dy çifte për rresht në ekrane të gjera (p.sh. të dhënat personale) */
@media (min-width: 768px) {
  .kv.kv-2 { grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr); gap: var(--sp-3) var(--sp-5); }
}
@media (max-width: 479.98px) {
  .kv { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .kv dt { margin-top: var(--sp-2); }
}

/* Vlera që ndryshohen në vend jashtë tabelave (kartela, profili) */
.kv .editable[contenteditable="true"],
.panel .editable[contenteditable="true"] {
  display: inline-block;
  min-width: 8ch;
  max-width: 100%;
  padding: .125rem .35rem;
  margin: -.125rem -.35rem;
  border-radius: var(--r-xs);
}
.editable[contenteditable="true"]:empty::before {
  content: "Shto…";
  color: var(--text-subtle);
}
.editable.is-saved { background-color: var(--success-soft) !important; }
.editable.is-failed { background-color: var(--danger-soft) !important; }
.form-control.is-saved,
.form-select.is-saved { border-color: var(--success-border); box-shadow: 0 0 0 3px var(--success-soft); }
.form-control.is-failed,
.form-select.is-failed { border-color: var(--danger-border); box-shadow: 0 0 0 3px var(--danger-soft); }

/* Kreu i një personi: inicialet + emri */
.person-head { display: flex; align-items: center; gap: var(--sp-4); }
.avatar.avatar-xl { width: 3.5rem; height: 3.5rem; font-size: var(--fs-lg); }
@media (max-width: 479.98px) {
  .avatar.avatar-xl { width: 2.75rem; height: 2.75rem; font-size: var(--fs-base); }
}

/* ========================================================= 22. Filtrat */
.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.filters .filter-field {
  display: flex;
  flex: 1 1 11rem;
  flex-direction: column;
  gap: .375rem;
  min-width: 0;
}
.filters .filter-field.is-grow { flex: 3 1 18rem; }
.filters .filter-field > .form-label { margin: 0; }
.filters .filter-check { display: flex; align-items: center; min-height: var(--control-h); }
.filters .filter-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-left: auto;
}
/* Variant i ngjeshur: një fushë kërkimi në një rresht (p.sh. "Kërko një person tjetër") */
.filters.filters-compact { flex-wrap: nowrap; padding: var(--sp-3); align-items: center; }
.filters.filters-compact .filter-field.is-grow { flex: 1 1 auto; }
.filters.filters-compact .filter-actions { flex: none; margin-left: 0; }
@media (max-width: 575.98px) {
  .filters.filters-compact .filter-actions { width: auto; }
  .filters .filter-actions { width: 100%; }
  .filters .filter-actions > .btn { flex: 1 1 0; }
}

/* ===================================== 22b. Lista: koka, kërkimi dhe çipat */
/* Një rrugë e vetme filtrimi për çdo listë (partials/list_toolbar.php):
     Titulli i listës  54                               [Shkarko]
     [ Kërko………………………………………… × ]  [Filtra]
     [Të gjithë] [Pa grup 5] [Gati për grup 3] …
     tabela
   Lista ndryshon ndërsa shkruan (app.js, "Listat"); zonat e rifreskuara kanë
   data-live-region. */
.list-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-3);
}
.list-head .section-title:focus { outline: none; }
.list-head .section-title:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-xs); }
.list-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }

.lf {
  display: grid;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.lf-submit { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; }
.lf-bar { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.lf-search { position: relative; flex: 1 1 auto; min-width: 0; max-width: 44rem; }
.lf-search > .bi-search {
  position: absolute;
  top: 50%;
  left: .85rem;
  color: var(--text-subtle);
  transform: translateY(-50%);
  pointer-events: none;
  transition: color var(--dur-1) var(--ease);
}
.lf-search:focus-within > .bi-search { color: var(--text-muted); }
.lf-input {
  width: 100%;
  min-height: var(--control-h);
  padding: .5rem 2.75rem .5rem 2.4rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: 1.4;
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.lf-input::placeholder { color: var(--text-subtle); opacity: 1; }
.lf-input::-webkit-search-cancel-button,
.lf-input::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.lf-input:hover { border-color: var(--text-muted); }
.lf-input:focus { border-color: var(--focus); box-shadow: var(--focus-ring); outline: none; }
.lf-clear {
  position: absolute;
  top: 50%;
  right: .3rem;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-muted);
  transform: translateY(-50%);
  animation: qta-fade-in var(--dur-1) var(--ease);
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.lf-clear[hidden] { display: none; }
.lf-clear:hover { background: var(--surface-hover); color: var(--text); }
.lf-clear:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; }
/* Po ngarkohet: një vijë e hollë në fund të fushës — rezultatet e vjetra mbeten. */
.lf-progress {
  position: absolute;
  right: var(--r-md);
  bottom: 1px;
  left: var(--r-md);
  height: 2px;
  overflow: hidden;
  border-radius: 2px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-2) var(--ease);
}
.lf-progress::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 35%;
  border-radius: 2px;
  background: var(--action);
}
.lf.is-busy .lf-progress { opacity: 1; }
.lf.is-busy .lf-progress::before { animation: qta-progress 900ms var(--ease) infinite; }
@keyframes qta-progress { from { transform: translateX(-100%); } to { transform: translateX(290%); } }

/* "Filtra": filtrat e rrallë, pas një butoni. <details> punon edhe pa JavaScript. */
.lf-more { position: relative; flex: none; }
.lf-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-width: var(--control-h);
  min-height: var(--control-h);
  padding: 0 .875rem;
  border: 1px solid var(--border-control);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  list-style: none;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.lf-more-btn::-webkit-details-marker { display: none; }
.lf-more-btn::marker { content: ""; }
.lf-more-btn:hover { border-color: var(--border-strong); background: var(--surface-hover); }
.lf-more-btn:active { transform: scale(.98); }
.lf-more-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.lf-more[open] > .lf-more-btn { border-color: var(--border-strong); background: var(--surface-hover); }
.lf-more-btn > .bi { color: var(--text-muted); }
.lf-more-count {
  display: inline-grid;
  place-items: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 .3rem;
  border-radius: var(--r-full);
  background: var(--action);
  color: var(--action-text);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
}
.lf-more-count[hidden] { display: none; }
.lf-panel {
  position: absolute;
  top: calc(100% + .375rem);
  right: 0;
  z-index: calc(var(--z-sticky) + 2);
  display: grid;
  gap: var(--sp-3);
  width: min(22rem, calc(100vw - 2rem));
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  animation: qta-pop var(--dur-2) var(--ease);
  transform-origin: top right;
}
.lf-field { display: grid; gap: .3rem; }
.lf-field > .form-label { margin: 0; font-size: var(--fs-xs); }
.lf-presets { display: flex; flex-wrap: wrap; gap: .375rem; }
.lf-panel-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2); padding-top: var(--sp-1); }
/* Me JavaScript filtrat vlejnë menjëherë: "Apliko" duhet vetëm pa të. */
.js .lf-apply { display: none; }

.lf-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .5rem; min-width: 0; }
.lf-chip-set { display: flex; flex-wrap: wrap; gap: .375rem; min-width: 0; }
.lf-error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem .5rem;
  margin: 0;
  color: var(--danger);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}
.lf-error[hidden] { display: none; }

@media (max-width: 575.98px) {
  .lf-more-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .lf-more-btn { padding: 0; }
  .lf-more-btn .lf-more-count { position: absolute; top: -.35rem; right: -.35rem; }
  /* Çipat në një rresht që rrëshqet anash: lista nis më lart. */
  .lf-chips { flex-wrap: nowrap; margin-inline: calc(var(--sp-4) * -1); padding: 0 var(--sp-4) .125rem; overflow-x: auto; scrollbar-width: none; }
  .lf-chips::-webkit-scrollbar { display: none; }
  /* Grupi i çipave nuk ngushtohet: përndryshe çipat e tij dalin sipër filtrave pas tij. */
  .lf-chip-set { flex: none; flex-wrap: nowrap; }
  .lf-chips .chip { flex: none; }
}

/* Zona e rezultateve: gjatë ngarkimit mbetet e dukshme dhe zbehet pak;
   rezultatet e reja hyjnë butë. */
[data-live-region] { transition: opacity var(--dur-2) var(--ease); }
[data-live-region].is-stale { opacity: .55; }
[data-live-region].is-fresh { animation: qta-fade-in var(--dur-2) var(--ease); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 2rem;
  padding: .25rem .75rem;
  border: 1px solid var(--border-control);
  border-radius: var(--r-full);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease),
    transform var(--dur-1) var(--ease);
}
.chip:hover { border-color: var(--border-strong); background: var(--surface-hover); color: var(--text); }
.chip:active { transform: scale(.97); }
.chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.chip.is-on,
.chip[aria-pressed="true"] {
  border-color: var(--surface-inverse);
  background: var(--surface-inverse);
  color: var(--text-inverse);
}
.chip-count {
  color: var(--text-muted);
  font-weight: var(--fw-regular);
  font-variant-numeric: tabular-nums;
  transition: color var(--dur-1) var(--ease);
}
.chip.is-on .chip-count,
.chip[aria-pressed="true"] .chip-count { color: inherit; opacity: .78; }
/* Filtër i rrallë aktiv (nga "Filtra"): shihet gjithnjë dhe hiqet me një klik. */
.chip.is-filter { border-style: dashed; border-color: var(--accent-border); background: var(--accent-soft); color: var(--accent-text); }
.chip.is-filter:hover { border-style: solid; background: var(--accent-soft); color: var(--accent-text); }
.chip.is-filter > .bi { font-size: 1.05em; }
@media (pointer: coarse) {
  .chip { min-height: 2.5rem; padding-inline: .875rem; }
}

/* Zgjedhje e vetme mes pak mundësive (p.sh. pamja: e çelët / sipas pajisjes / e errët) */
.segmented {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .2rem;
  padding: .2rem;
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  background: var(--surface-sunken);
}
.segmented > button,
.segmented > label {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: var(--touch-min);
  padding: 0 1rem;
  border: 0;
  border-radius: var(--r-full);
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.segmented > button:hover,
.segmented > label:hover { color: var(--text); }
.segmented > button[aria-checked="true"],
.segmented > label:has(> input:checked) { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
/* Në temën e errët hija nuk shihet: zgjedhja ngrihet me sfond më të çelët dhe një vijë. */
:root[data-theme="dark"] .segmented > button[aria-checked="true"],
:root[data-theme="dark"] .segmented > label:has(> input:checked) { background: var(--surface-hover); box-shadow: inset 0 0 0 1px var(--border-control); }
.segmented > button:focus-visible,
.segmented > label:has(> input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 1px; }
/* Me radio të vërteta, kur zgjedhja dërgohet me formularin (p.sh. lloji i llogarisë
   te hyrja): <fieldset class="segmented"><legend class="visually-hidden">…</legend>
   <label><input type="radio" name="…"><span>…</span></label>…</fieldset>. Shigjetat
   e tastierës lëvizin mes zgjedhjeve, si te çdo grup radio. */
fieldset:where(.segmented) { min-width: 0; margin: 0; }
.segmented > label { position: relative; justify-content: center; text-align: center; }
.segmented > label > input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }

/* ============================================== 23. Kyçi i ndryshimeve */
/* Mbron të dhënat nga ndryshimet aksidentale; gjendja thuhet me fjalë. */
.edit-lock {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  max-width: 100%;
  padding: .375rem .375rem .375rem .75rem;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.edit-lock-icon { flex: none; color: var(--text-muted); font-size: 1.1rem; }
.edit-lock-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.edit-lock-text b { font-size: var(--fs-sm); }
.edit-lock-text span { color: var(--text-muted); font-size: var(--fs-2xs); }
.edit-lock.is-open { border-color: var(--warning-border); background: var(--warning-soft); }
.edit-lock.is-open .edit-lock-icon { color: var(--warning); }
@media (max-width: 575.98px) {
  .edit-lock { width: 100%; }
  .edit-lock .btn { margin-left: auto; }
}

/* Kur ndryshimet janë të hapura, një vijë e hollë në krye e kujton gjithnjë. */
body.is-editing::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  z-index: calc(var(--z-shell) + 5);
  height: 3px;
  background: var(--warning);
}

/* ====================================================== 24a. Veprime të shpejta */
.quick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--sp-3);
}
.quick {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.quick:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); color: var(--text); }
.quick-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--r-md);
  background: var(--surface-sunken);
  color: var(--text);
  font-size: 1.15rem;
}
.quick.is-primary .quick-icon { background: var(--accent-soft); color: var(--accent-text); }
.quick-title { display: block; font-size: var(--fs-base); font-weight: var(--fw-bold); line-height: 1.3; }
.quick-text { display: block; margin-top: .125rem; color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.4; }
.quick > .bi-arrow-right { margin-left: auto; color: var(--text-subtle); transition: transform var(--dur-2) var(--ease), color var(--dur-2) var(--ease); }
/* Vendet kryesore të Kreut: vetëm ikonë + emër, pa përshkrime. */
.quick-grid.is-dense { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
@media (min-width: 576px) { .quick-grid.is-dense { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .quick-grid.is-dense { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.quick-grid.is-dense .quick { align-items: center; min-height: 3.75rem; padding: var(--sp-3) var(--sp-4); }
.quick-grid.is-dense .quick-icon { width: 2.25rem; height: 2.25rem; font-size: 1.05rem; }
.quick-grid.is-dense .quick-title { font-size: var(--fs-md); }
.quick:active { transform: scale(.99); }
.quick { transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); }

/* ================================================================ 24b. Detyrat */
/* "Çfarë pret për ty": numër, çfarë është, çfarë bën. */
.tasks {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.task {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
  transition: background-color var(--dur-1) var(--ease);
}
.task:first-child { border-top: 0; }
a.task:hover { background: var(--surface-hover); color: var(--text); }
.task-count {
  display: grid;
  flex: none;
  place-items: center;
  min-width: 3rem;
  height: 3rem;
  padding: 0 .5rem;
  border-radius: var(--r-md);
  background: var(--warning-soft);
  color: var(--warning);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}
.task.is-danger .task-count { background: var(--danger-soft); color: var(--danger); }
.task.is-info .task-count { background: var(--info-soft); color: var(--info); }
.task.is-neutral .task-count { background: var(--surface-sunken); color: var(--text); }
.task-body { flex: 1; min-width: 0; }
.task-title { display: block; font-weight: var(--fw-bold); }
.task-text { display: block; color: var(--text-muted); font-size: var(--fs-sm); }
.task-cta {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: .25rem;
  color: var(--link);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}
@media (max-width: 575.98px) {
  .task { flex-wrap: wrap; padding: var(--sp-4); }
  .task-cta { width: 100%; padding-left: 4rem; }
}

/* =============================================================== 24c. Axhenda */
.agenda {
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  list-style: none;
}
.agenda-item {
  display: grid;
  grid-template-columns: 3.75rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--border);
}
.agenda-item:first-child { border-top: 0; }
.agenda-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: .35rem 0;
  border-radius: var(--r-md);
  background: var(--surface-sunken);
  line-height: 1.1;
}
.agenda-date b { font-size: var(--fs-lg); font-variant-numeric: tabular-nums; }
.agenda-date span { color: var(--text-muted); font-size: var(--fs-2xs); font-weight: var(--fw-semibold); }
.agenda-main { min-width: 0; }
.agenda-title { display: block; font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.agenda-meta { display: block; color: var(--text-muted); font-size: var(--fs-xs); }
@media (max-width: 479.98px) {
  .agenda-item { grid-template-columns: 3.25rem minmax(0, 1fr); }
  .agenda-item > .status { grid-column: 2; justify-self: start; }
}

/* ============================================================== 24d. Avatarët */
.avatar {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--r-full);
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: .02em;
}
.avatar-lg { width: 3rem; height: 3rem; font-size: var(--fs-sm); }

/* ================================================= 24e. Hapat (udhëzime) */
.steps-list {
  display: grid;
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.steps-list > li {
  position: relative;
  padding-left: 2.5rem;
  counter-increment: step;
}
.steps-list > li::before {
  content: counter(step);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--r-full);
  background: var(--surface-sunken);
  color: var(--text);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}
.steps-list b { display: block; }
.steps-list span { color: var(--text-muted); font-size: var(--fs-sm); }

.tip {
  display: flex;
  gap: .625rem;
  padding: .75rem 1rem;
  border-radius: var(--r-md);
  background: var(--info-soft);
  color: var(--text);
  font-size: var(--fs-sm);
}
.tip > .bi { flex: none; margin-top: .1rem; color: var(--info); }

/* ======================================================= 24f. Historiku (diff) */
.val-old {
  padding: 0 .25rem;
  border-radius: var(--r-xs);
  background: var(--danger-soft);
  color: var(--danger);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.val-new {
  padding: 0 .25rem;
  border-radius: var(--r-xs);
  background: var(--success-soft);
  color: var(--success);
}
.val-arrow { margin: 0 .25rem; color: var(--text-subtle); }

/* ============================================ 24f1. Historiku i ndryshimeve */
/* Një ditë = një titull + listë veprimesh; çdo veprim thuhet si fjali. */
.log-day { margin-bottom: var(--sp-6); }
.log-day-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-2);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--text);
}
.log-day-count { color: var(--text-muted); font-size: var(--fs-xs); font-weight: var(--fw-regular); }
.log-list {
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  list-style: none;
}
.log-item {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--border);
}
.log-item:first-child { border-top: 0; }
.log-icon {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--r-full);
  font-size: var(--fs-sm);
}
.log-item.is-add .log-icon  { background: var(--success-soft); color: var(--success); }
.log-item.is-edit .log-icon { background: var(--info-soft); color: var(--info); }
.log-item.is-del .log-icon  { background: var(--danger-soft); color: var(--danger); }
.log-dot { display: inline-block; width: .55rem; height: .55rem; margin-right: .4rem; border-radius: var(--r-full); vertical-align: middle; }
.log-dot.is-add { background: var(--success); }
.log-dot.is-edit { background: var(--info); }
.log-dot.is-del { background: var(--danger); }
.log-body { min-width: 0; }
.log-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .25rem var(--sp-3);
}
.log-line { margin: 0; overflow-wrap: anywhere; }
.log-subject { color: var(--text); }
.log-when { color: var(--text-muted); font-size: var(--fs-xs); white-space: nowrap; font-variant-numeric: tabular-nums; }
.log-changes {
  display: grid;
  gap: .3rem;
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-sm);
}
.log-change {
  display: grid;
  grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr);
  gap: var(--sp-3);
}
.log-change dt { color: var(--text-muted); font-weight: var(--fw-regular); }
.log-change dd { margin: 0; overflow-wrap: anywhere; }
.log-more { margin-top: .35rem; font-size: var(--fs-xs); }
@media (max-width: 479.98px) {
  .log-item { grid-template-columns: minmax(0, 1fr); }
  .log-icon { display: none; }
  .log-change { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* ================================================ 24f2. Regjistrimet (kurset) */
.enroll-list {
  display: grid;
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.enroll {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3) var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.enroll-main { flex: 1 1 18rem; min-width: 0; }
.enroll-code {
  display: inline-block;
  margin-bottom: .2rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
}
.enroll-title {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  line-height: 1.35;
}
.enroll-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-5);
  margin: 0;
  font-size: var(--fs-sm);
}
.enroll-meta > div { display: flex; gap: .375rem; }
.enroll-meta dt { color: var(--text-muted); font-weight: var(--fw-regular); }
.enroll-meta dd { margin: 0; font-variant-numeric: tabular-nums; }

/* ======================================================== 24f3. Kodi QR */
/* Gjithnjë e zezë mbi të bardhë — skanerat kanë nevojë për kontrast. */
.qr-frame {
  display: inline-grid;
  place-items: center;
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: #fff;
  line-height: 0;
}
.qr-frame canvas,
.qr-frame img { display: block; max-width: 100%; height: auto; }
.qr-code-text {
  display: block;
  margin-top: var(--sp-2);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .04em;
  word-break: break-all;
}

/* ================================================= 24f4. Theksim (callout) */
.callout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border: 1px solid var(--accent-border);
  border-radius: var(--r-xl);
  background: var(--accent-soft);
}
.callout-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--accent-text);
  font-size: 1.35rem;
}
.callout-body { flex: 1 1 16rem; min-width: 0; }
.callout-label { display: block; color: var(--accent-text); font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.callout-title { display: block; margin: .125rem 0; font-size: var(--fs-lg); font-weight: var(--fw-bold); line-height: 1.3; }
.callout-text { display: block; color: var(--text-muted); font-size: var(--fs-sm); }
.callout.is-info { border-color: var(--info-border); background: var(--info-soft); }
.callout.is-info .callout-icon,
.callout.is-info .callout-label { color: var(--info); }
.callout.is-warning { border-color: var(--warning-border); background: var(--warning-soft); }
.callout.is-warning .callout-icon,
.callout.is-warning .callout-label { color: var(--warning); }
.callout > .btn { flex: none; }

/* ====================================================== 24g. Shiriti i zgjedhjes */
.bulk-bar {
  position: sticky;
  bottom: var(--sp-4);
  z-index: var(--z-sticky);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}
.bulk-count { font-weight: var(--fw-bold); }

/* ================================================= 24h. Ngarkim (skeleton) */
.skeleton {
  display: block;
  min-height: 1em;
  border-radius: var(--r-sm);
  background: linear-gradient(90deg, var(--surface-sunken) 25%, var(--surface-hover) 37%, var(--surface-sunken) 63%);
  background-size: 400% 100%;
  animation: themeli-shimmer 1.4s ease infinite;
}
@keyframes themeli-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* =========================================================== 24i. Kthimi lart */
.back-top {
  position: fixed;
  right: var(--sp-4);
  bottom: var(--sp-4);
  z-index: var(--z-sticky);
  display: grid;
  place-items: center;
  width: var(--touch-min);
  height: var(--touch-min);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.back-top.is-on { opacity: 1; pointer-events: auto; transform: none; }
.back-top:hover { background: var(--surface-hover); }

/* ============================================ 24j. Paleta e kërkimit (Ctrl K) */
.pal-veil {
  position: fixed;
  inset: 0;
  z-index: var(--z-palette);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: min(12vh, 7rem) var(--sp-4) var(--sp-4);
  background: var(--overlay);
}
.pal-veil.is-open { display: flex; }
.pal {
  display: flex;
  flex-direction: column;
  width: min(44rem, 100%);
  max-height: min(78vh, 46rem);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  animation: qta-pop var(--dur-2) var(--ease);
}
.pal-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
}
.pal-head > .bi { color: var(--text-muted); font-size: 1.1rem; }
.pal-head input {
  flex: 1;
  min-width: 0;
  min-height: 2.75rem;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: var(--fs-lg);
  outline: none;
}
.pal-head input::placeholder { color: var(--text-subtle); }
.pal-head-tag { display: none; }
.pal-close {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0 .5rem;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text-muted);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
}
.pal-close:hover { background: var(--surface-hover); color: var(--text); }
.pal-types {
  display: flex;
  gap: .375rem;
  padding: var(--sp-2) var(--sp-4);
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
  scrollbar-width: none;
}
.pal-type {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: .375rem;
  min-height: 2rem;
  padding: .25rem .75rem;
  border: 1px solid var(--border-control);
  border-radius: var(--r-full);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}
.pal-type:hover { background: var(--surface-hover); }
.pal-type.is-on { border-color: var(--surface-inverse); background: var(--surface-inverse); color: var(--text-inverse); }
.pal-type-count {
  min-width: 1.25rem;
  padding: 0 .3rem;
  border-radius: var(--r-full);
  background: var(--surface-sunken);
  color: var(--text-muted);
  font-size: var(--fs-2xs);
  text-align: center;
}
.pal-type.is-on .pal-type-count { background: rgba(255, 255, 255, .2); color: inherit; }
.pal-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-xs);
}
.pal-summary { margin-right: auto; color: var(--text-muted); }
.pal-sort { display: inline-flex; align-items: center; gap: .375rem; margin: 0; color: var(--text-muted); }
.pal-sort select,
.pal-filters select {
  min-height: 2rem;
  padding: .125rem 1.75rem .125rem .5rem;
  border: 1px solid var(--border-control);
  border-radius: var(--r-sm);
  background-color: var(--surface);
  color: var(--text);
  font-size: var(--fs-xs);
}
.pal-filter-toggle,
.pal-reset {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  min-height: 2rem;
  padding: 0 .625rem;
  border: 1px solid var(--border-control);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}
.pal-filter-toggle:hover,
.pal-reset:hover { background: var(--surface-hover); }
.pal-filter-count {
  min-width: 1.1rem;
  border-radius: var(--r-full);
  background: var(--surface-sunken);
  font-size: var(--fs-2xs);
  text-align: center;
}
.pal-filter-toggle.has-filters .pal-filter-count { background: var(--action); color: var(--action-text); }
.pal-filters {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  align-items: end;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
  background: var(--surface-sunken);
}
.pal-filters[hidden] { display: none; }
.pal-filters label { display: flex; flex-direction: column; gap: .25rem; margin: 0; color: var(--text-muted); font-size: var(--fs-2xs); font-weight: var(--fw-semibold); }
.pal-body { flex: 1; min-height: 8rem; padding: var(--sp-2); overflow-y: auto; }
.pal-group-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-3) var(--sp-1);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}
.pal-group-label b { color: var(--text-subtle); font-weight: var(--fw-semibold); }
.pal-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: .5rem .75rem;
  border-radius: var(--r-md);
  color: var(--text);
  text-decoration: none;
}
.pal-item.is-active,
.pal-item:hover { background: var(--surface-hover); color: var(--text); }
.pal-item-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--r-sm);
  background: var(--surface-sunken);
  color: var(--text-muted);
}
.pal-item.is-active .pal-item-icon { background: var(--surface); }
.pal-item-main { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.pal-item-title { overflow: hidden; font-weight: var(--fw-semibold); text-overflow: ellipsis; white-space: nowrap; }
.pal-item-meta { overflow: hidden; color: var(--text-muted); font-size: var(--fs-xs); text-overflow: ellipsis; white-space: nowrap; }
.pal-item-side { display: flex; flex: none; align-items: center; gap: var(--sp-2); }
.pal-item-code { color: var(--text-muted); font-family: var(--font-mono); font-size: var(--fs-xs); }
.pal-item-open { color: var(--text-subtle); opacity: 0; }
.pal-item.is-active .pal-item-open { opacity: 1; }
.pal-item mark { padding: 0; background: var(--highlight); color: inherit; }
.pal-status {
  padding: .05rem .5rem;
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  background: var(--surface-sunken);
  color: var(--text-muted);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
}
.pal-status.is-active,
.pal-status.is-insert { border-color: var(--success-border); background: var(--success-soft); color: var(--success); }
.pal-status.is-closed { border-color: var(--border); background: var(--surface-sunken); color: var(--text-muted); }
.pal-status.is-ungrouped,
.pal-status.is-update { border-color: var(--warning-border); background: var(--warning-soft); color: var(--warning); }
.pal-status.is-delete { border-color: var(--danger-border); background: var(--danger-soft); color: var(--danger); }
.pal-welcome,
.pal-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .375rem;
  padding: var(--sp-8) var(--sp-6);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  text-align: center;
}
.pal-welcome > .bi,
.pal-message > .bi { color: var(--text-subtle); font-size: 1.5rem; }
.pal-welcome b,
.pal-message b { color: var(--text); font-size: var(--fs-base); }
.pal-message.is-error > .bi { color: var(--danger); }
.pal-recent { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-2); }
.pal-recent-label { padding: var(--sp-1) var(--sp-2); color: var(--text-muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.pal-recent button {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 2.25rem;
  padding: 0 var(--sp-3);
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--text);
  text-align: left;
}
.pal-recent button:hover { background: var(--surface-hover); }
.pal-recent button > .bi { color: var(--text-subtle); }
.pal-loading { display: flex; justify-content: center; gap: .375rem; padding: var(--sp-8); }
.pal-loading span {
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--text-subtle);
  animation: themeli-dot 1s ease-in-out infinite;
}
.pal-loading span:nth-child(2) { animation-delay: .15s; }
.pal-loading span:nth-child(3) { animation-delay: .3s; }
@keyframes themeli-dot { 0%, 80%, 100% { opacity: .3; transform: scale(.8); } 40% { opacity: 1; transform: none; } }
.pal-page-action {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 var(--sp-2) var(--sp-2);
  padding: .5rem .75rem;
  border: 1px dashed var(--border-control);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-sm);
  text-align: left;
}
.pal-page-action[hidden] { display: none; }
.pal-page-action:hover { background: var(--surface-hover); }
.pal-page-action kbd { margin-left: auto; }
.pal-foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-2) var(--sp-4);
  border-top: 1px solid var(--border);
  background: var(--surface-sunken);
  color: var(--text-muted);
  font-size: var(--fs-2xs);
}
.pal-foot kbd { margin-right: .15rem; }
@media (max-width: 575.98px) {
  .pal-veil { padding: 0; }
  .pal { width: 100%; max-height: 100%; height: 100%; border-radius: 0; }
  .pal-foot { display: none; }
}

/* ========================================================== 25. Qendra e ndihmës */
.help-layout { display: grid; gap: var(--sp-6); }
.help-toc ul { margin: var(--sp-2) 0 0; padding: 0; list-style: none; }
.help-toc li[hidden] { display: none; }
.help-toc a {
  display: block;
  padding: .4rem .75rem;
  border-radius: var(--r-md);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  text-decoration: none;
}
.help-toc a:hover { background: var(--surface-hover); color: var(--text); }
.help-content { display: grid; gap: var(--sp-4); min-width: 0; }
.help-topic { scroll-margin-top: calc(var(--topbar-h) + var(--sp-4)); transition: box-shadow var(--dur-3) var(--ease); }
.help-topic.is-focused { box-shadow: var(--focus-ring); }
.help-search { max-width: 40rem; }
.help-public { padding-top: var(--sp-8); padding-bottom: var(--sp-12); }
@media (min-width: 992px) {
  .help-layout { grid-template-columns: 15rem minmax(0, 1fr); align-items: start; }
  .help-toc { position: sticky; top: var(--sp-6); }
}
@media (max-width: 991.98px) {
  .help-toc ul { display: flex; flex-wrap: wrap; gap: .25rem; }
  .help-toc a { border: 1px solid var(--border); border-radius: var(--r-full); padding: .3rem .75rem; font-size: var(--fs-xs); }
}

/* ============================================ 26. Tabela të gjera: kolona të ngrira */
/* <table class="table table-freeze">: nr. i amzës dhe emri mbeten në vend kur
   tabela lëviz horizontalisht, që të dihet gjithmonë për kë është rreshti. */
@media (min-width: 768px) {
  .table-freeze > :is(thead, tbody) > tr > :is(:first-child, :nth-child(2)) {
    position: sticky;
    z-index: 1;
    background-color: var(--surface);
  }
  .table-freeze > :is(thead, tbody) > tr > :first-child {
    left: 0;
    width: 7.5rem;
    min-width: 7.5rem;
    max-width: 7.5rem;
  }
  .table-freeze > :is(thead, tbody) > tr > :nth-child(2) { left: 7.5rem; }
  /* Vija ndarëse përdor ::before: ::after i përket shigjetës së renditjes. */
  .table-freeze > :is(thead, tbody) > tr > :nth-child(2)::before {
    content: "";
    position: absolute;
    top: 0;
    right: -1px;
    bottom: 0;
    width: 1px;
    background: var(--border);
    pointer-events: none;
  }
  .table-freeze > thead > tr > :is(:first-child, :nth-child(2)) { z-index: 3; background-color: var(--surface-sunken); }
}

/* ============================================ 27. Struktura e kursit (modulet, temat) */
/* course.php: gatishmëria e kursit, modulet me radhë dhe temat e secilit.
   Radha shihet (numri), dëgjohet (listë e renditur) dhe ndryshohet me butona
   "Lart" / "Poshtë" — pa tërheqje me miun. */
.cur-summary { display: grid; gap: var(--sp-4); }
.cur-summary.is-ready { border-color: var(--success-border); }
.cur-summary-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-3);
}
.cur-summary-head .section-title { font-size: var(--fs-base); }
.cur-meter { display: grid; gap: var(--sp-2); }
.cur-meter-text {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-1) var(--sp-4);
  font-size: var(--fs-sm);
}
/* Shiriti i orëve: sa nga orët e kursit janë ndarë në module. */
.hours-bar {
  appearance: none;
  width: 100%;
  height: .5rem;
  overflow: hidden;
  border: 0;
  border-radius: var(--r-full);
  background: var(--surface-sunken);
  color: var(--info);
}
.hours-bar::-webkit-progress-bar { border-radius: var(--r-full); background: var(--surface-sunken); }
.hours-bar::-webkit-progress-value { border-radius: var(--r-full); background: var(--info); }
.hours-bar::-moz-progress-bar { border-radius: var(--r-full); background: var(--info); }
.hours-bar.is-full::-webkit-progress-value { background: var(--success); }
.hours-bar.is-full::-moz-progress-bar { background: var(--success); }
.hours-bar.is-over::-webkit-progress-value { background: var(--danger); }
.hours-bar.is-over::-moz-progress-bar { background: var(--danger); }

.cur-issues { display: grid; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.cur-issues > li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--warning-border);
  border-radius: var(--r-md);
  background: var(--warning-soft);
  font-size: var(--fs-sm);
}
.cur-issues > li > .bi { flex: none; color: var(--warning); }
.cur-issues > li > span { flex: 1 1 16rem; min-width: 0; }
.cur-usage { display: flex; gap: var(--sp-2); margin: 0; color: var(--text-muted); font-size: var(--fs-sm); }
.cur-usage > .bi { flex: none; margin-top: .15rem; color: var(--info); }

.cur-modules { display: grid; gap: var(--sp-4); margin: 0; padding: 0; list-style: none; }
.cur-module { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); scroll-margin-top: calc(var(--topbar-h) + var(--sp-4)); }
.cur-module.has-issue { border-color: var(--warning-border); }
.cur-module.is-over { border-color: var(--danger-border); }
.cur-module:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cur-module-head { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-4) var(--sp-4) var(--sp-3); }
.cur-pos {
  display: grid;
  flex: none;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--r-full);
  background: var(--surface-sunken);
  color: var(--text);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}
.cur-module-main { flex: 1 1 0; min-width: 0; }
.cur-module-title { margin: 0; font-family: var(--font-sans); font-size: var(--fs-base); font-weight: var(--fw-bold); overflow-wrap: anywhere; }
.cur-module-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1) var(--sp-3);
  margin: .25rem 0 0;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}
.cur-actions { display: inline-flex; flex: none; flex-wrap: wrap; align-items: center; gap: var(--sp-1); }
.cur-topics { margin: 0; padding: 0; border-top: 1px solid var(--border); list-style: none; }
.cur-topic {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--sp-3);
  padding: .4rem var(--sp-4);
  border-top: 1px solid var(--border);
  scroll-margin-top: calc(var(--topbar-h) + var(--sp-4));
}
.cur-topic:first-child { border-top: 0; }
.cur-topic-pos { color: var(--text-muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; text-align: center; }
.cur-topic-title { min-width: 0; overflow-wrap: anywhere; }
.cur-topic-hours { color: var(--text-muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cur-empty { margin: 0; padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--border); color: var(--text-muted); font-size: var(--fs-sm); }
.cur-quick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--border);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  background: var(--surface-sunken);
}
.cur-quick-title { flex: 1 1 14rem; min-width: 0; }
.cur-quick-hours { flex: 0 0 6rem; }
@media (max-width: 575.98px) {
  .cur-module-head { flex-wrap: wrap; }
  .cur-module-head > .cur-actions { justify-content: flex-end; width: 100%; }
  .cur-topic { grid-template-columns: 1.5rem minmax(0, 1fr) auto; padding-inline: var(--sp-3); }
  .cur-topic > .cur-actions { grid-column: 2 / -1; justify-content: flex-end; }
  .cur-quick { padding-inline: var(--sp-3); }
}

/* ============================================ 28. Orari i mësimit (grupet me orar) */
/* Parashikimi i një ndryshimi para ruajtjes: "Do të mbarojë …". */
.plan-preview {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border: 1px dashed var(--border-control);
  border-radius: var(--r-md);
  background: var(--surface-sunken);
  color: var(--text);
  font-size: var(--fs-sm);
}
.plan-preview > .bi { flex: none; margin-top: .15rem; color: var(--text-muted); }
.plan-preview.is-ok { border-style: solid; border-color: var(--success-border); background: var(--success-soft); }
.plan-preview.is-ok > .bi { color: var(--success); }
.plan-preview.is-warning { border-style: solid; border-color: var(--warning-border); background: var(--warning-soft); }
.plan-preview.is-warning > .bi { color: var(--warning); }
.plan-preview.is-error { border-style: solid; border-color: var(--danger-border); background: var(--danger-soft); }
.plan-preview.is-error > .bi { color: var(--danger); }

.lg-lead { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem var(--sp-4); }
.lg-tabs { flex-wrap: nowrap; margin-bottom: var(--sp-5); overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.lg-tabs .nav-link { min-height: var(--touch-min); white-space: nowrap; }
.lg-tabs .count { margin-left: .15rem; }
.lg-date { font-size: var(--fs-xl); }
.lg-lock { margin-right: .4rem; color: var(--text-muted); font-size: .6em; vertical-align: .15em; }
.lg-hours-choice { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.lg-hours-choice > .form-control { width: 5.5rem; }
.lg-danger {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  margin-top: var(--sp-8);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
}
fieldset > legend.form-label { float: none; width: auto; margin-bottom: .5rem; font-size: var(--fs-sm); }

/* Ditë pas dite: çdo datë nga fillimi te mbarimi, me temat e grupuara sipas modulit. */
.timetable {
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  list-style: none;
}
.tt-day {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--sp-3) var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--border);
  scroll-margin-top: calc(var(--topbar-h) + var(--sp-6));
}
.tt-day:first-child { border-top: 0; }
.tt-day.is-week { border-top: 2px solid var(--border-strong); }
.tt-day.is-off { padding-block: var(--sp-2); background: var(--surface-sunken); }
.tt-day.is-today { background: var(--accent-soft); box-shadow: inset 4px 0 0 var(--accent-text); }
.tt-day:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.tt-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: .3rem 0;
  border-radius: var(--r-md);
  background: var(--surface-sunken);
  line-height: 1.1;
}
.tt-day.is-off .tt-date { background: transparent; }
.tt-date b { font-size: var(--fs-lg); font-variant-numeric: tabular-nums; }
.tt-date span { color: var(--text-muted); font-size: var(--fs-2xs); font-weight: var(--fw-semibold); }
.tt-main { min-width: 0; }
.tt-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem var(--sp-3);
  margin: 0 0 var(--sp-2);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  line-height: 1.35;
}
.tt-day.is-off .tt-head { margin: 0; font-weight: var(--fw-semibold); }
.tt-title { min-width: 0; }
.tt-hours { color: var(--text-muted); font-size: var(--fs-sm); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.tt-off { color: var(--text-muted); font-size: var(--fs-sm); font-weight: var(--fw-regular); }
.tt-note { color: var(--text-muted); font-size: var(--fs-xs); font-weight: var(--fw-regular); }
.tt-rule-note { margin: -.25rem 0 var(--sp-2); color: var(--text-muted); font-size: var(--fs-sm); }
.tt-module + .tt-module { margin-top: var(--sp-2); }
.tt-module-name { margin: 0 0 .15rem; color: var(--text-muted); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.tt-flag {
  display: inline-block;
  margin-left: .35rem;
  padding: 0 .45rem;
  border: 1px solid var(--border-control);
  border-radius: var(--r-full);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-2xs);
}
.tt-slots { display: grid; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.tt-slot { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 0 var(--sp-3); font-size: var(--fs-sm); }
.tt-topic { min-width: 0; overflow-wrap: anywhere; }
.tt-num { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.tt-slot-hours { font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tt-part { grid-column: 1 / -1; color: var(--text-muted); font-size: var(--fs-xs); }
.tt-actions { align-self: center; }
@media (max-width: 575.98px) {
  .tt-day { grid-template-columns: 2.75rem minmax(0, 1fr); padding-inline: var(--sp-3); }
  .tt-day > .tt-actions { grid-column: 2; }
}
@media print {
  .lg-tabs, .tt-actions, .lg-danger, .page-actions, .edit-lock, #lgState, .plan-preview { display: none !important; }
  .tab-pane:not(#orari) { display: none !important; }
  .timetable { border: 0; }
  .tt-day { break-inside: avoid; }
  .tt-day.is-today { box-shadow: none; }
}

/* ============================================ 29. Kalendari (zgjedhja e datës) */
/* Fusha e datës: butoni i kalendarit brenda fushës, si te fjalëkalimi.
   Klikimi mbi fushë hap kalendarin; me tastierë fusha shkruhet si më parë. */
.date-field { position: relative; display: block; }
.date-field.is-auto { display: inline-block; max-width: 100%; vertical-align: middle; }
.date-field > .form-control { padding-right: 2.75rem; cursor: pointer; }
.date-field.is-sm > .form-control { padding-right: 2.25rem; }
.date-field-btn {
  position: absolute;
  top: 50%;
  right: .25rem;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transform: translateY(-50%);
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.date-field-btn:hover { background: var(--surface-hover); color: var(--text); }
.date-field-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.date-field.is-sm > .date-field-btn { right: .125rem; width: 1.75rem; height: 1.75rem; font-size: var(--fs-sm); }
.date-field:has(> .form-control:disabled) > .date-field-btn,
.date-field:has(> .form-control[readonly]) > .date-field-btn { display: none; }
.date-field > .form-control:disabled,
.date-field > .form-control[readonly] { padding-right: .75rem; cursor: default; }
.date-field > .form-control:disabled { cursor: not-allowed; }

/* Qeliza e datës në tabelë (e hapur për ndryshim): kalendari hapet me klik. */
.editable[data-dmy][contenteditable="true"] { cursor: pointer; }
.dp-cell-icon {
  margin-left: .375rem;
  color: var(--text-subtle);
  font-size: .8em;
  cursor: pointer;
  transition: color var(--dur-1) var(--ease);
}
td:hover > .dp-cell-icon,
.editable[data-dmy]:focus + .dp-cell-icon { color: var(--accent-text); }

/* Dialogu: koka mban datën (e shkruar dhe me fjalë), trupi kalendarin. */
.dp-dialog { max-width: 22.5rem; }
.dp-head {
  position: relative;
  padding: 1.125rem 1.25rem .875rem;
  border-bottom: 1px solid var(--border);
}
.dp-head > .btn-close { position: absolute; top: .75rem; right: .75rem; }
.dp-title {
  margin: 0 0 .25rem;
  padding-right: 2.25rem;
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: 0;
}
/* Data e shkruar: duket si titull, shkruhet si fushë (vija me pika = mund të ndryshohet). */
.dp-entry {
  display: block;
  width: 100%;
  max-width: 11ch;
  margin: 0 0 0 -.3rem;
  padding: .05rem .3rem;
  border: 0;
  border-radius: var(--r-sm);
  background-color: transparent;
  background-image: linear-gradient(90deg, var(--border-strong) 50%, transparent 0);
  background-position: .3rem 100%;
  background-repeat: repeat-x;
  background-size: 6px 1px;
  color: var(--text);
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1.2;
  letter-spacing: -.01em;
  transition: background-color var(--dur-1) var(--ease);
}
.dp-entry::placeholder { color: var(--text-subtle); opacity: 1; }
.dp-entry:hover { background-color: var(--surface-hover); }
.dp-entry:focus {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
  background-color: var(--surface);
  background-image: none;
}
.dp-words {
  min-height: 1.35em;
  margin: .3rem 0 0;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}
.dp-words.is-error { color: var(--danger); font-weight: var(--fw-semibold); }

.dp-body { padding: .625rem 1rem 1rem; }
.dp-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: .375rem;
}
.dp-step:disabled { visibility: hidden; }
.dp-period {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: var(--control-h);
  padding: 0 .75rem;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease);
}
.dp-period:hover { background: var(--surface-hover); }
.dp-period:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.dp-period > .bi { color: var(--text-muted); font-size: .75em; }
.dp-period[aria-disabled="true"] { background: transparent; cursor: default; }
.dp-period[aria-disabled="true"] > .bi { display: none; }

/* Pamjet (ditët, muajt, vitet) kanë të njëjtën lartësi: dialogu nuk kërcen. */
.dp-view { --dp-view-h: 17.5rem; min-height: var(--dp-view-h); }
.dp-grid {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 2px;
  table-layout: fixed;
}
.dp-grid th {
  padding: 0 0 .25rem;
  color: var(--text-muted);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  text-align: center;
}
.dp-grid td { padding: 0 1px; text-align: center; cursor: pointer; }
.dp-grid td > span {
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 2.5rem;
  aspect-ratio: 1;
  margin: 0 auto;
  border-radius: var(--r-md);
  color: var(--text);
  font-size: var(--fs-md);
  font-variant-numeric: tabular-nums;
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.dp-grid td:hover > span { background: var(--surface-hover); }
.dp-grid td.is-out > span { color: var(--text-subtle); }
.dp-grid td.is-today > span {
  box-shadow: inset 0 0 0 1.5px var(--accent-border);
  color: var(--accent-text);
  font-weight: var(--fw-bold);
}
.dp-grid td.is-selected > span,
.dp-grid td.is-selected:hover > span {
  background: var(--action);
  box-shadow: none;
  color: var(--action-text);
  font-weight: var(--fw-bold);
}
.dp-grid td[aria-disabled="true"] { cursor: not-allowed; }
.dp-grid td[aria-disabled="true"] > span,
.dp-grid td[aria-disabled="true"]:hover > span {
  background: transparent;
  color: var(--text-subtle);
  opacity: .4;
}
.dp-grid td:focus { outline: none; }
.dp-grid td:focus-visible > span { outline: 2px solid var(--focus); outline-offset: 1px; }

.dp-cells {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: .375rem;
  height: var(--dp-view-h);
}
.dp-cell {
  display: grid;
  place-items: center;
  min-height: var(--touch-min);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.dp-cell:hover { background: var(--surface-hover); }
.dp-cell.is-today { border-color: var(--accent-border); color: var(--accent-text); }
.dp-cell.is-selected,
.dp-cell.is-selected:hover { border-color: var(--action); background: var(--action); color: var(--action-text); }
.dp-cell[aria-disabled="true"],
.dp-cell[aria-disabled="true"]:hover { background: transparent; color: var(--text-subtle); opacity: .4; cursor: not-allowed; }
.dp-cell:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

.dp-foot { padding: .625rem 1rem; }
.dp-foot .modal-footer-start > [hidden] { display: none; }
@media (max-width: 379.98px) {
  .dp-view { --dp-view-h: 16.25rem; }
  .dp-head { padding: 1rem 1rem .75rem; }
  .dp-body { padding: .5rem .625rem .75rem; }
  .dp-entry { font-size: var(--fs-xl); }
  .dp-grid td > span { font-size: var(--fs-sm); }
  .dp-foot { padding: .5rem .625rem; }
}

/* ============================================================== 30. Lëvizja */
/* Lëvizja tregon një ndryshim gjendjeje — nuk zbukuron. Kohët vijnë vetëm nga
   tokenët: --dur-1 (120ms, mikro), --dur-2 (180ms, gjendje), --dur-3 (240ms,
   dialogë dhe panele), me --ease. Me prefers-reduced-motion bëhen 1ms (tokens.css).
   Nuk ka animacion në ngarkimin e faqes, as lëvizje të mëdha apo kërcime.
   Kalimi mes faqeve (View Transitions) është te shell.css. */
@keyframes qta-pop     { from { opacity: 0; transform: translateY(-4px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes qta-pop-up  { from { opacity: 0; transform: translateY(4px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes qta-fade-in { from { opacity: .35; } to { opacity: 1; } }
@keyframes qta-rise    { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes qta-flash   { from { box-shadow: 0 0 0 3px var(--accent-border); } to { box-shadow: 0 0 0 3px transparent; } }

/* Menutë hapen afër butonit, pa kërcyer. */
.dropdown-menu.show { animation: qta-pop var(--dur-1) var(--ease); }
.dropdown-menu.show[data-popper-placement^="top"] { animation-name: qta-pop-up; }

/* Dialogët: zbehje + 8px, jo rrëshqitja 50px e Bootstrap-it. */
.modal.fade { transition: opacity var(--dur-2) var(--ease); }
.modal.fade .modal-dialog { transform: translateY(8px) scale(.985); transition: transform var(--dur-3) var(--ease); }
.modal.show .modal-dialog { transform: none; }
.modal.modal-static .modal-dialog { transform: scale(1.01); }
.modal-backdrop.fade { transition: opacity var(--dur-2) var(--ease); }

/* Paneli i ndihmës dhe hapja e pjesëve të fshehura. */
.offcanvas { --bs-offcanvas-transition: transform var(--dur-3) var(--ease); }
.offcanvas-backdrop.fade { transition: opacity var(--dur-2) var(--ease); }
.collapsing { transition: height var(--dur-3) var(--ease); }

/* Skedat: vija e skedës aktive dhe përmbajtja. */
.nav-link { transition: color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease), border-color var(--dur-2) var(--ease); }
.tab-content > .tab-pane.fade { transition: opacity var(--dur-2) var(--ease); }

/* Rreshti i tabelës nën mi / në fokus. */
.table > tbody > tr > * { transition: box-shadow var(--dur-1) var(--ease); }
.table > tbody > tr:focus-within > * { --bs-table-bg-state: var(--surface-hover); }

/* Njoftimet: hyjnë dhe dalin me 6px, pa u hedhur. */
.toast.fade { transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); }
.toast.showing { transform: translateY(6px); }

/* Shiriti i zgjedhjes del kur zgjidhet rreshti i parë. */
.bulk-bar:not([hidden]) { animation: qta-rise var(--dur-2) var(--ease); }

/* Elementi që sapo u zhvendos (p.sh. një modul "Lëviz lart") theksohet shkurt. */
.is-flash { animation: qta-flash 900ms var(--ease); }

/* Butonat e ikonave dhe kutitë e zgjedhjes. */
.form-check-input { transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), background-position var(--dur-2) var(--ease); }

/* ============================================ 31. Plani i ditëve (kalendari i orëve) */
/* Grupet me periudhë të përcaktuar: çdo datë me orët e saj, muaj pas muaji.
   Vizatohet nga partials/day_plan.php dhe redaktohet me day-plan.js. Gjendja
   thuhet gjithmonë edhe me fjalë (aria-label, legjenda), jo vetëm me ngjyrë. */
.dplan { position: relative; }
.dplan-months {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18.5rem), 1fr));
  gap: var(--sp-5) var(--sp-6);
}
.dplan-month { min-width: 0; }
.dplan-month-title {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
}
.dplan-grid {
  width: calc(100% + 6px);
  margin: 0 -3px;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 3px;
}
.dplan-grid th {
  padding: 0 0 .15rem;
  color: var(--text-muted);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  text-align: center;
}
.dplan-grid th abbr { text-decoration: none; cursor: default; }
.dplan-pad { padding: 0; }
.dplan-out {
  padding: .3rem .35rem 0;
  color: var(--text-subtle);
  font-size: var(--fs-2xs);
  vertical-align: top;
}
.dplan-day {
  position: relative;
  height: 3.4rem;
  padding: .3rem .35rem;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  vertical-align: top;
  transition: background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.dplan-num {
  display: block;
  color: var(--text-muted);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.dplan-val {
  display: block;
  margin-top: .3rem;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.dplan-unit { color: var(--text-muted); font-size: var(--fs-2xs); font-weight: var(--fw-semibold); }
.dplan-marks {
  position: absolute;
  top: .25rem;
  right: .3rem;
  display: flex;
  gap: .15rem;
  color: var(--text-muted);
  font-size: .7rem;
  line-height: 1;
}
/* Ditë mësimi: sfond i ngrohtë dhe orët me ngjyrën e theksit. */
.dplan-day.is-on { border-color: var(--accent-border); background: var(--accent-soft); }
.dplan-day.is-on .dplan-val { color: var(--accent-text); }
/* Pa mësim: e qetë; të dielat pa mësim edhe më të qeta. */
.dplan-day.is-off { background: var(--surface-sunken); }
.dplan-day.is-off .dplan-val { color: var(--text-subtle); font-weight: var(--fw-regular); }
.dplan-day.is-sun.is-off { border-style: dashed; background: transparent; }
/* Fillimi dhe mbarimi historik: kornizë më e fortë + dry. */
.dplan-day.is-bound { border-width: 2px; border-color: var(--border-strong); padding: calc(.3rem - 1px) calc(.35rem - 1px); }
.dplan-day.is-bound.is-on { border-color: var(--accent-text); }
/* E diel me mësim (jo kufi): kërkon kontroll. */
.dplan-day.is-warn { border-color: var(--warning-border); background: var(--warning-soft); }
.dplan-day.is-warn .dplan-val,
.dplan-day.is-warn .dplan-marks { color: var(--warning); }
/* Ndryshuar me dorë: pikë e vogël poshtë djathtas. */
.dplan-day.is-manual::after {
  content: "";
  position: absolute;
  right: .35rem;
  bottom: .35rem;
  width: .4rem;
  height: .4rem;
  border-radius: var(--r-full);
  background: var(--accent-text);
}
.dplan-day.is-today { box-shadow: inset 0 0 0 2px var(--info-border); }
.dplan.is-editable .dplan-day { cursor: pointer; }
.dplan.is-editable .dplan-day:hover { border-color: var(--border-strong); }
.dplan.is-editable .dplan-day.is-on:hover { border-color: var(--accent-text); }
.dplan-day:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.dplan-day.is-selected { box-shadow: 0 0 0 2px var(--action); }
.dplan-day.is-refused { animation: dplan-refuse 700ms var(--ease); }
@keyframes dplan-refuse { from { box-shadow: 0 0 0 3px var(--danger-border); } to { box-shadow: 0 0 0 3px transparent; } }

.dplan-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  margin: var(--sp-4) 0 0;
  padding: 0;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  list-style: none;
}
.dplan-legend li { display: inline-flex; align-items: center; gap: .4rem; }
.dplan-legend .bi { font-size: .8rem; }
.dplan-legend .bi.is-warn { color: var(--warning); }
.dplan-swatch {
  position: relative;
  display: inline-block;
  width: .9rem;
  height: .9rem;
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  background: var(--surface);
}
.dplan-swatch.is-on { border-color: var(--accent-border); background: var(--accent-soft); }
.dplan-swatch.is-off { background: var(--surface-sunken); }
.dplan-swatch.is-manual::after {
  content: "";
  position: absolute;
  inset: 0;
  width: .4rem;
  height: .4rem;
  margin: auto;
  border-radius: var(--r-full);
  background: var(--accent-text);
}

/* Zgjedhja e orëve të një date: afër datës; në celular, nga poshtë. */
.dplan-editor {
  position: absolute;
  z-index: calc(var(--z-sticky) + 1);
  width: 17.5rem;
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  animation: qta-pop var(--dur-1) var(--ease);
}
.dplan-editor[hidden] { display: none; }
.dplan-editor-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.dplan-editor-title { margin: 0; font-weight: var(--fw-bold); }
.dplan-editor-hint { margin: .2rem 0 0; color: var(--text-muted); font-size: var(--fs-xs); }
.dplan-opts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-1); margin: var(--sp-3) 0; }
.dplan-opt {
  min-height: var(--touch-min);
  border: 1px solid var(--border-control);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.dplan-opt.is-none { grid-column: 1 / -1; }
.dplan-opt:hover:not(:disabled) { border-color: var(--border-strong); background: var(--surface-hover); }
.dplan-opt:active:not(:disabled) { transform: scale(.97); }
.dplan-opt[aria-checked="true"],
.dplan-opt[aria-checked="true"]:hover { border-color: var(--action); background: var(--action); color: var(--action-text); }
.dplan-opt:disabled { background: var(--surface-sunken); color: var(--text-subtle); cursor: not-allowed; }
.dplan-opt:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.dplan-editor-label { display: block; margin-bottom: .25rem; color: var(--text-muted); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.dplan-editor-keys { margin: var(--sp-2) 0 0; color: var(--text-muted); font-size: var(--fs-2xs); }
.dplan-editor.is-sheet {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--z-drawer);
  width: auto;
  padding-bottom: calc(var(--sp-4) + env(safe-area-inset-bottom));
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  animation-name: qta-rise;
}
.dplan-editor.is-sheet .dplan-editor-keys { display: none; }
@media (max-width: 575.98px) {
  .dplan-grid { width: calc(100% + 4px); margin: 0 -2px; border-spacing: 2px; }
  .dplan-day { height: 2.9rem; padding: .2rem .25rem; }
  .dplan-day.is-bound { padding: calc(.2rem - 1px) calc(.25rem - 1px); }
  .dplan-val { margin-top: .2rem; font-size: var(--fs-md); }
  .dplan-unit { display: none; }
  .dplan-marks { top: .15rem; right: .2rem; font-size: .6rem; }
  .dplan-day.is-manual::after { right: .2rem; bottom: .2rem; }
}
@media print {
  .dplan-editor, .dplan-legend { display: none !important; }
  .dplan-day { break-inside: avoid; }
}

/* ============================================ 32. Konvertimi i grupeve */
/* group_conversion.php: kalendari majtas (zemra e faqes), gjendja djathtas;
   në ekrane të ngushta njëra pas tjetrës. Shiriti i veprimeve qëndron poshtë. */
.cv-layout { display: grid; align-items: start; gap: var(--sp-6); }
.cv-main, .cv-side { min-width: 0; }
.cv-side { display: grid; gap: var(--sp-4); }
@media (min-width: 1100px) {
  .cv-layout { grid-template-columns: minmax(0, 1fr) 20.5rem; }
}
.cv-plan .section-head { align-items: flex-start; }
.cv-tools { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.cv-intro { max-width: var(--prose-max); margin: 0 0 var(--sp-4); color: var(--text-muted); font-size: var(--fs-sm); }
.cv-panel-title {
  margin: 0 0 var(--sp-3);
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}
/* Përmbledhja: numri i orëve është gjëja e parë që lexohet. */
.cv-total { display: flex; align-items: baseline; gap: .35rem; margin: 0 0 var(--sp-2); line-height: 1; font-variant-numeric: tabular-nums; }
.cv-total b { font-size: var(--fs-3xl); font-weight: var(--fw-bold); }
.cv-total span { color: var(--text-muted); font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
.cv-total b.is-bump { animation: cv-bump var(--dur-2) var(--ease); }
@keyframes cv-bump { from { opacity: .35; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.cv-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); margin: var(--sp-3) 0 0; }
.cv-counts dt { color: var(--text-muted); font-size: var(--fs-2xs); font-weight: var(--fw-semibold); }
.cv-counts dd { margin: 0; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.cv-verdict {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  margin: var(--sp-4) 0 0;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}
.cv-verdict > .bi { flex: none; margin-top: .1rem; }
.cv-verdict.is-ok { border-color: var(--success-border); background: var(--success-soft); color: var(--success); }
.cv-verdict.is-warn { border-color: var(--warning-border); background: var(--warning-soft); color: var(--warning); }
.cv-verdict.is-err { border-color: var(--danger-border); background: var(--danger-soft); color: var(--danger); }
.cv-verdict.is-changed { animation: qta-fade-in var(--dur-2) var(--ease); }
/* Kontrollet: ikonë + fjalë për çdo rregull. */
.cv-check-list { margin: 0; padding: 0; list-style: none; }
.cv-check {
  display: grid;
  grid-template-columns: 1.15rem minmax(0, 1fr);
  gap: var(--sp-2);
  padding: .45rem 0;
  border-top: 1px solid var(--border);
  font-size: var(--fs-sm);
}
.cv-check:first-child { padding-top: 0; border-top: 0; }
.cv-check > .bi { margin-top: .12rem; }
.cv-check.is-ok > .bi { color: var(--success); }
.cv-check.is-warn > .bi { color: var(--warning); }
.cv-check.is-err > .bi { color: var(--danger); }
.cv-check.is-err { font-weight: var(--fw-semibold); }
.cv-check-fix { font-weight: var(--fw-semibold); white-space: nowrap; }
/* Të dhënat historike: datat me dry. */
.cv-facts .kv { grid-template-columns: minmax(6.5rem, max-content) minmax(0, 1fr); gap: var(--sp-2) var(--sp-4); }
.cv-locked { display: flex; align-items: baseline; gap: .4rem; font-weight: var(--fw-semibold); }
.cv-locked > .bi { color: var(--text-muted); font-size: .8rem; }
.cv-muted { color: var(--text-muted); font-weight: var(--fw-regular); }
.cv-note { display: flex; gap: .4rem; margin: var(--sp-3) 0 0; color: var(--text-muted); font-size: var(--fs-xs); }
/* Modulet dhe temat që ngrihen: të mbyllura, që të mos zënë faqen. */
.cv-curriculum { margin-top: var(--sp-6); }
.cv-curriculum > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-1) var(--sp-3);
  min-height: var(--touch-min);
  cursor: pointer;
  list-style: none;
}
.cv-curriculum > summary::-webkit-details-marker { display: none; }
.cv-curriculum > summary > .bi { align-self: center; transition: transform var(--dur-2) var(--ease); }
.cv-curriculum[open] > summary > .bi { transform: rotate(90deg); }
.cv-curriculum > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--r-xs); }
.cv-curriculum-title { font-weight: var(--fw-bold); }
.cv-curriculum[open] > .cv-intro { margin-top: var(--sp-2); }
.cv-modules { display: grid; gap: var(--sp-4); margin: 0; padding: 0; list-style: none; }
.cv-module-name { margin: 0 0 .3rem; font-weight: var(--fw-semibold); }
.cv-module-hours { color: var(--text-muted); font-weight: var(--fw-regular); }
.cv-topics { display: grid; gap: .2rem; margin: 0; padding: 0; font-size: var(--fs-sm); list-style: none; }
.cv-topics > li { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) auto; gap: var(--sp-2); }
.cv-topic-num, .cv-topic-hours { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.cv-topic-hours { white-space: nowrap; }
/* Shiriti i veprimeve: i njëjti tipar si shiriti i zgjedhjes. */
.cv-bar {
  position: sticky;
  bottom: var(--sp-4);
  z-index: var(--z-sticky);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-6);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}
.cv-bar-status { display: flex; flex: 1 1 16rem; flex-wrap: wrap; align-items: center; gap: .15rem var(--sp-2); min-width: 0; margin: 0; font-size: var(--fs-sm); }
.cv-bar-status > .bi { font-size: 1rem; }
.cv-bar-status > .bi.is-ok { color: var(--success); }
.cv-bar-status > .bi.is-warn { color: var(--warning); }
.cv-bar-status > .bi.is-err { color: var(--danger); }
.cv-bar-text b { font-variant-numeric: tabular-nums; }
.cv-saved { color: var(--text-muted); font-size: var(--fs-xs); }
.cv-saved.is-dirty { color: var(--warning); font-weight: var(--fw-semibold); }
.cv-bar-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-left: auto; }
/* Shiriti zë fundin e ekranit; butoni "Kthehu në krye" do t'i mbulonte veprimet. */
body:has(.cv-bar:not([hidden])) .back-top { display: none; }
@media (max-width: 575.98px) {
  .cv-bar { bottom: var(--sp-2); padding: var(--sp-2) var(--sp-3); }
  .cv-bar-actions { width: 100%; }
  .cv-bar-actions > .btn { flex: 1 1 0; }
  .cv-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media print {
  .cv-bar, .cv-tools { display: none !important; }
}

/* ============================================ 33. Pikët sipas moduleve (dritarja e punës) */
/* Dritare pune (modal-sheet) për tabelën kursant × modul: kolona e kursantit majtas dhe
   rezultati djathtas mbeten në vend kur tabela lëviz anash; koka mbetet sipër kur lëviz
   poshtë. Nga 992px dritarja merr gjerësinë e tabelës, deri në gjerësinë e ekranit; më
   gjerë, tabela lëviz brenda saj. Nën 992px hapet në gjithë ekranin
   (modal-fullscreen-lg-down). Vizatohet nga group-results.js. */
@media (min-width: 992px) {
  .modal-sheet .modal-dialog {
    width: fit-content;
    min-width: min(38rem, calc(100vw - 3rem));
    max-width: min(96rem, calc(100vw - 3rem));
  }
}
.modal-sheet .modal-header { padding-bottom: var(--sp-3); }
.rs-head { min-width: 0; }
.rs-head .modal-meta { margin-bottom: 0; }
.rs-notices { display: grid; gap: var(--sp-2); padding: 0 1.5rem var(--sp-3); }
.rs-notices[hidden] { display: none; }
.rs-body {
  min-height: 10rem;
  padding: 0;
  overflow: auto;
  overscroll-behavior: contain;
  border-top: 1px solid var(--border);
}
.rs-body > .empty { margin: var(--sp-5) 1.5rem; }
.rs-loading { display: grid; gap: var(--sp-3); padding: var(--sp-5) 1.5rem; }
.rs-loading .skeleton { height: 2rem; }

.rs-grid { width: 100%; border-collapse: separate; border-spacing: 0; }
.rs-grid > thead > tr > th { padding: .625rem .75rem; vertical-align: bottom; }
.rs-grid > tbody > tr > * { padding: .375rem .75rem; }
.rs-grid > tbody > tr:last-child > * { border-bottom: 0; }

/* Kolona e kursantit: e ngrirë majtas, me vijë ndarëse që lëviz bashkë me të. */
.rs-grid .rs-who {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 13rem;
  max-width: 18rem;
  background-color: var(--surface);
  text-align: left;
}
.rs-grid > thead .rs-who { z-index: 3; background-color: var(--surface-sunken); }
.rs-grid .rs-who::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1px;
  background: var(--border);
  pointer-events: none;
}
.rs-grid > tbody > tr > th.rs-who { font-weight: var(--fw-regular); }
.rs-name {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-weight: var(--fw-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rs-meta { display: block; color: var(--text-muted); font-size: var(--fs-xs); }
.rs-meta > span { white-space: nowrap; }
.rs-noexam { color: var(--warning); font-weight: var(--fw-semibold); }
.rs-grid > tbody > tr.is-blocked .rs-name { color: var(--text-muted); }

/* Emri i modulit: dy rreshta, pjesa tjetër te këshilla (title). Kolonat e moduleve marrin
   vetëm gjerësinë e tyre; hapësira që tepron (pak module) i shkon kolonës së kursantit. */
.rs-grid .rs-mod { width: 1%; min-width: 6.5rem; max-width: 10rem; text-align: right; white-space: normal; }
.rs-grid > tbody > tr > td.rs-cell { width: 1%; }
.rs-mod-name {
  display: -webkit-box;
  width: max-content;      /* një rresht kur titulli nxë, deri në 9rem */
  max-width: 9rem;
  margin-left: auto;
  overflow: hidden;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: var(--lh-snug);
  overflow-wrap: anywhere;
}

/* Qeliza e pikëve: e vogël, numrat djathtas. Ndryshimi i paruajtur ka ngjyrën e
   theksit dhe një pikë në cep (jo vetëm ngjyrë); gabimi ka kufi të kuq dhe mesazh. */
.rs-grid > tbody > tr > td.rs-cell { position: relative; padding: .375rem .5rem; text-align: right; }
.rs-input {
  width: 5rem;
  height: var(--control-h-sm);
  padding: 0 .5rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  text-align: right;
  transition: border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.rs-input::placeholder { color: var(--text-subtle); opacity: 1; }
.rs-input:hover:not(:disabled):not(:focus) { border-color: var(--text-subtle); }
.rs-input:focus { outline: none; border-color: var(--focus); box-shadow: var(--focus-ring); }
.rs-input:disabled { border-color: var(--border); background: var(--surface-sunken); color: var(--text-subtle); cursor: not-allowed; }
.rs-input[readonly] { cursor: progress; }
.rs-input.is-dirty { border-color: var(--accent-border); background: var(--accent-soft); }
.rs-input[aria-invalid="true"] { border-color: var(--danger); background: var(--danger-soft); box-shadow: 0 0 0 1px var(--danger); }
.rs-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 1px var(--danger), var(--focus-ring); }
.rs-grid td.rs-cell.is-dirty::after {
  content: "";
  position: absolute;
  top: .3rem;
  right: .3rem;
  width: .375rem;
  height: .375rem;
  border-radius: var(--r-full);
  background: var(--accent-text);
  pointer-events: none;
}
.rs-grid td.rs-cell.is-invalid::after { background: var(--danger); }
.rs-input.is-saved { animation: rs-saved 900ms var(--ease); }
@keyframes rs-saved { from { box-shadow: 0 0 0 3px var(--success-border); } to { box-shadow: 0 0 0 3px transparent; } }
.rs-grid td.rs-cell.is-readonly { color: var(--text); font-variant-numeric: tabular-nums; }
@media (pointer: coarse) {
  .rs-input { width: 5.5rem; height: var(--control-h); }
}

/* Rezultati: i llogaritur, jo fushë. Sipërfaqe e ulët, numër i theksuar, e ngrirë djathtas. */
.rs-grid .rs-final {
  position: sticky;
  right: 0;
  z-index: 1;
  width: 8rem;
  min-width: 8rem;
  max-width: 8rem;
  background-color: var(--surface-sunken);
  text-align: right;
}
.rs-grid > thead .rs-final { z-index: 3; color: var(--text); }
.rs-grid .rs-final::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background: var(--border-strong);
  pointer-events: none;
}
.rs-final-out { display: flex; flex-direction: column; align-items: flex-end; gap: .05rem; line-height: var(--lh-snug); }
.rs-final-value { color: var(--text); font-size: var(--fs-md); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.rs-final-sub { color: var(--text-muted); font-size: var(--fs-2xs); line-height: var(--lh-snug); overflow-wrap: anywhere; }
.rs-final-out:is(.is-pending, .is-empty, .is-error) .rs-final-value { color: var(--text-subtle); font-weight: var(--fw-regular); }
.rs-final-out.is-legacy .rs-final-value { font-weight: var(--fw-semibold); }
.rs-final-out.is-error .rs-final-sub { color: var(--danger); font-weight: var(--fw-semibold); }

/* Fundi i dritares: gjendja me fjalë majtas, veprimet djathtas. */
.modal-footer.rs-foot { justify-content: space-between; }
.rs-status { display: flex; flex: 1 1 18rem; align-items: center; gap: var(--sp-2); min-width: 0; margin: 0; color: var(--text-muted); font-size: var(--fs-sm); }
.rs-status > .bi { flex: none; }
.rs-status.is-dirty { color: var(--text); }
.rs-status.is-dirty > .bi { color: var(--accent-text); }
.rs-status.is-error { color: var(--danger); }
.rs-status.is-ok > .bi { color: var(--success); }
.rs-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-left: auto; }
@media (max-width: 479.98px) {
  .rs-actions { width: 100%; }
  .rs-actions > .btn { flex: 1 1 auto; }
}
@media (max-width: 575.98px) {
  .rs-notices { padding-inline: 1rem; }
  .rs-grid .rs-who { min-width: 9.5rem; max-width: 11rem; }
  .rs-grid .rs-final { width: 6rem; min-width: 6rem; max-width: 6rem; }
}

/* Te tabelat e grupit: pikët hapin dritaren, te kursanti i atij rreshti. */
.rs-open {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 2.75rem;
  min-height: var(--control-h-sm);
  justify-content: center;
  margin: -.25rem -.375rem;
  padding: .125rem .375rem;
  border: 0;
  border-radius: var(--r-xs);
  background: none;
  color: var(--link);
  font: inherit;
  font-variant-numeric: tabular-nums;
  text-align: right;
  cursor: pointer;
}
.rs-open:hover .rs-open-value { color: var(--link-hover); text-decoration: underline; text-underline-offset: .15em; }
.rs-open:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.rs-open-sub { display: block; color: var(--text-muted); font-size: var(--fs-2xs); white-space: nowrap; }
@media print {
  .rs-open { color: inherit; }
}

/* ============================================ 34. Kalendari i grupeve */
/* calendar.php: kur fillon dhe kur mbaron çdo grup i Regjistrit të kurseve profesionale,
   muaj pas muaji. Vizatohet nga calendar.js me të dhënat e app/shared/group_calendar.php.
     .cal-toolbar  "Sot" ‹ › · muaji (hap kalendarin e datave) · Kalendar | Listë · Filtra
     .cal-chips    gjendjet me numra (janë edhe legjenda e ngjyrave) · regjistri i vjetër · kursi
     .cal-timeline një rresht për grup, ditët e muajit si kolona; vija nga dita e parë te
                   dita e fundit, të dyja të përfshira; të dielat më të zbehta, java e re me
                   vijë, sot me vijë vertikale; teksti i vijës del vetëm kur nxë (@container)
     .cal-list     të njëjtat grupe si listë; parazgjedhje nën 768px
     .calg-*       dritarja e një grupi (.modal-record): gjendja sot, faktet, kursantët,
                   modulet dhe temat e kopjes së grupit
   Gjendja nuk thuhet kurrë vetëm me ngjyrë: çdo vijë ka ikonën, çdo rresht fjalën. */
.cal { position: relative; }
.cal-toolbar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-3);
}
.cal-nav { display: flex; align-items: center; gap: var(--sp-1); }
.cal-title { margin: 0; font-family: var(--font-sans); font-size: var(--fs-xl); font-weight: var(--fw-bold); line-height: var(--lh-tight); }
.cal-period {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: var(--control-h);
  padding: 0 .625rem;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease);
}
.cal-period:hover { background: var(--surface-hover); }
.cal-period:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.cal-period > .bi { color: var(--text-muted); font-size: .55em; }
.cal-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-left: auto; }
/* I njëjti kontroll i segmentuar, në lartësinë e butonave të shiritit. */
.cal-tools .segmented { padding: .15rem; }
.cal-tools .segmented > button { min-height: calc(var(--control-h) - .3rem - 2px); padding: 0 .75rem; }
@media (pointer: coarse) {
  .cal-tools .segmented > button { min-height: var(--touch-min); }
}
@media (max-width: 575.98px) {
  /* Në telefon pamja dhe "Filtra" zënë rreshtin e vet, nga e majta. */
  .cal-tools { width: 100%; margin-left: 0; }
  .cal-tools .segmented { display: flex; flex: 1 1 auto; }
  .cal-tools .segmented > button { flex: 1 1 0; justify-content: center; }
}
/* Po lexohet muaji: një vijë e hollë nën shirit; kalendari i mëparshëm mbetet. */
.cal-progress {
  position: absolute;
  right: 0;
  bottom: calc(var(--sp-2) * -1);
  left: 0;
  height: 2px;
  overflow: hidden;
  border-radius: 2px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-2) var(--ease);
}
.cal-progress::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 35%;
  border-radius: 2px;
  background: var(--action);
}
.cal.is-busy .cal-progress { opacity: 1; }
.cal.is-busy .cal-progress::before { animation: qta-progress 900ms var(--ease) infinite; }

.cal-chips { margin-bottom: var(--sp-4); }
/* Toni i gjendjes (i njëjtë me qta_status): --tone për tekstin dhe kufirin, --tone-soft për mbushjen. */
.cal { --tone: var(--text-muted); --tone-soft: var(--surface-sunken); }
.cal .tone-accent  { --tone: var(--accent-text); --tone-soft: var(--accent-soft); }
.cal .tone-info    { --tone: var(--info);        --tone-soft: var(--info-soft); }
.cal .tone-warning { --tone: var(--warning);     --tone-soft: var(--warning-soft); }
.cal .tone-success { --tone: var(--success);     --tone-soft: var(--success-soft); }
/* Kufiri i vijës dhe i shenjës së legjendës: ≥ 3:1 ndaj sipërfaqes, në të dy temat. */
.cal-swatch {
  display: inline-block;
  flex: none;
  width: .75rem;
  height: .75rem;
  border: 1px solid color-mix(in srgb, var(--tone) 65%, var(--tone-soft));
  border-radius: 3px;
  background: var(--tone-soft);
}
.cal-legacy-chip { border-style: dashed; }
.cal-legacy-chip[aria-pressed="true"] { border-style: solid; }

.cal-body { position: relative; min-height: 10rem; transition: opacity var(--dur-2) var(--ease); }
.cal-body.is-stale { opacity: .55; }
.cal-body.is-fresh { animation: qta-fade-in var(--dur-2) var(--ease); }
/* Skeleti del vetëm nëse kalendari vonon: pa vezullim kur vizatohet menjëherë. */
.cal-skeleton { display: grid; gap: var(--sp-3); animation: cal-appear var(--dur-2) var(--ease) 200ms both; }
.cal-skeleton .skeleton { height: 2.75rem; }
@keyframes cal-appear { from { opacity: 0; } to { opacity: 1; } }

/* ----- Pamja "Kalendar": rreshtat e grupeve mbi ditët e muajit */
.cal-scroll { min-width: 0; }
.cal-timeline {
  --cal-label-w: clamp(10.5rem, 24%, 17rem);
  container: cal-timeline / inline-size;
  position: relative;
  overflow: clip;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}
/* Koka e ditëve mbetet sipër ndërsa faqja lëviz poshtë. */
.cal-head {
  position: sticky;
  top: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: var(--cal-label-w) minmax(0, 1fr);
  border-bottom: 1px solid var(--border);
  background: var(--surface-sunken);
}
.cal-corner {
  display: flex;
  align-items: flex-end;
  padding: .5rem .75rem;
  border-right: 1px solid var(--border);
  background: var(--surface-sunken);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}
.cal-scale,
.cal-cols,
.cal-track { display: grid; grid-template-columns: repeat(var(--cal-days), minmax(0, 1fr)); }
.cal-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  min-width: 0;
  padding: .375rem 0 .3rem;
  color: var(--text-muted);
  font-size: var(--fs-2xs);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.cal-wd { font-weight: var(--fw-semibold); }
.cal-dn {
  display: grid;
  place-items: center;
  width: min(1.5rem, 100%);
  aspect-ratio: 1;
  border-radius: var(--r-full);
  color: var(--text);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}
.cal-day.is-sun .cal-dn { color: var(--text-muted); font-weight: var(--fw-regular); }
.cal-day.is-week { box-shadow: inset 1px 0 0 var(--border); }
.cal-day.is-today .cal-wd { color: var(--accent-text); }
.cal-day.is-today .cal-dn { background: var(--action); color: var(--action-text); font-weight: var(--fw-bold); }
@container cal-timeline (max-width: 56rem) {
  .cal-wd { display: none; }
  .cal-dn { font-size: var(--fs-2xs); letter-spacing: -.02em; }
}

.cal-grid { position: relative; }
/* Kolonat e ditëve pas rreshtave: të dielat (pa mësim) më të zbehta, java e re me vijë. */
.cal-cols {
  position: absolute;
  inset: 0 0 0 var(--cal-label-w);
  pointer-events: none;
}
.cal-col.is-sun { background: var(--surface-sunken); }
.cal-col.is-week { box-shadow: inset 1px 0 0 var(--border); }
.cal-col.is-today { background: color-mix(in srgb, var(--accent-soft) 70%, transparent); }
.cal-rows { position: relative; margin: 0; padding: 0; list-style: none; }
/* Sot: një vijë mbi rreshtat, në mes të ditës — grupet që e presin janë në mësim sot. */
.cal-now {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--cal-label-w) + (100% - var(--cal-label-w)) * (var(--cal-t) - .5) / var(--cal-days) - 1px);
  z-index: 1;
  width: 2px;
  background: var(--action);
  pointer-events: none;
}
.cal-row + .cal-row { border-top: 1px solid var(--border); }
.cal-event {
  display: grid;
  grid-template-columns: var(--cal-label-w) minmax(0, 1fr);
  width: 100%;
  min-height: 3.25rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.cal-event:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.cal-label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .125rem;
  min-width: 0;
  padding: .375rem .75rem;
  border-right: 1px solid var(--border);
  background: var(--surface);
  transition: background-color var(--dur-1) var(--ease);
}
.cal-event:hover .cal-label { background: var(--surface-hover); }
.cal-course {
  overflow: hidden;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cal-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 .5rem;
  min-width: 0;
  color: var(--text-muted);
  font-size: var(--fs-2xs);
  line-height: 1.35;
}
.cal-state { display: inline-flex; align-items: center; gap: .25rem; color: var(--tone); font-weight: var(--fw-semibold); }
.cal-track { position: relative; align-items: center; padding: .5rem 0; }
.cal-bar {
  container: cal-bar / inline-size;
  grid-row: 1;
  grid-column: var(--cal-s) / var(--cal-e);
  display: flex;
  align-items: center;
  gap: .3rem;
  min-width: 0;
  height: 1.625rem;
  margin: 0 2px;
  padding: 0 .4rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--tone) 65%, var(--tone-soft));
  border-radius: var(--r-sm);
  background: var(--tone-soft);
  color: var(--tone);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  line-height: 1;
  white-space: nowrap;
  transition: border-color var(--dur-1) var(--ease);
}
.cal-event:hover .cal-bar { border-color: var(--tone); }
/* Grupi nisi para muajit / vazhdon pas tij: skaji është i hapur dhe ka një shigjetë. */
.cal-bar.is-before { margin-left: 0; border-left-width: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.cal-bar.is-after { margin-right: 0; border-right-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
/* Grup i regjistrit të vjetër (kur shfaqet): pa ngjyrë mbushjeje, me vijë me ndërprerje. */
.cal-bar.is-legacy { border-style: dashed; background: var(--surface); }
.cal-bar-icon { flex: none; font-size: .95em; }
.cal-cut { flex: none; font-size: .8em; }
.cal-bar-text { display: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cal-bar-dates { display: none; }
@container cal-bar (min-width: 5.5rem) {
  .cal-bar-text { display: inline; }
}
@container cal-bar (min-width: 14rem) {
  .cal-bar-dates { display: inline; }
}
@container cal-bar (max-width: 1.5rem) {
  .cal-bar-icon { display: none; }
}

/* ----- Pamja "Listë" */
.cal-list {
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  list-style: none;
}
.cal-list > li + li { border-top: 1px solid var(--border); }
.cal-item {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3) var(--sp-4);
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease);
}
.cal-item:hover { background: var(--surface-hover); }
.cal-item:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.cal-item-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: .35rem 0;
  border-radius: var(--r-md);
  background: var(--surface-sunken);
  line-height: 1.1;
}
.cal-item-date b { font-size: var(--fs-lg); font-variant-numeric: tabular-nums; }
.cal-item-date span { color: var(--text-muted); font-size: var(--fs-2xs); font-weight: var(--fw-semibold); }
.cal-item.is-legacy .cal-item-date { background: transparent; box-shadow: inset 0 0 0 1px var(--border-strong); }
.cal-item-main { min-width: 0; }
.cal-item-title { display: block; font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.cal-item-meta { display: block; color: var(--text-muted); font-size: var(--fs-xs); }

@media (max-width: 767.98px) {
  /* Kalendari (kur zgjidhet) rrëshqet anash; emrat e grupeve mbeten në vend. */
  .cal-scroll { overflow-x: auto; overscroll-behavior-x: contain; border-radius: var(--r-lg); }
  .cal-timeline { --cal-label-w: 9.5rem; min-width: calc(9.5rem + var(--cal-days) * 1.75rem); }
  .cal-head { position: relative; }
  .cal-corner,
  .cal-label { position: sticky; left: 0; z-index: 2; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .cal-head { top: var(--topbar-h); }
}
@media (max-width: 479.98px) {
  .cal-item { grid-template-columns: 3rem minmax(0, 1fr); padding-inline: var(--sp-3); }
  .cal-item > .status { grid-column: 2; justify-self: start; }
}

/* ----- Dritarja e grupit */
.cal-modal .modal-body { min-height: 18rem; }
.calg-head { min-width: 0; }
.calg-note { margin-bottom: var(--sp-5); }
.calg-facts { margin-bottom: var(--sp-6); }
.calg-loading { display: grid; gap: var(--sp-3); }
.calg-loading .skeleton { height: 1.25rem; }
.calg-loading .skeleton.is-short { width: 60%; }
.calg-loading .skeleton.is-title { width: 30%; height: 1.1rem; margin-top: var(--sp-4); }
.calg-loading .skeleton.is-block { height: 4.5rem; }
.calg-muted { margin: 0; color: var(--text-muted); font-size: var(--fs-sm); }
.calg-people {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: 0 var(--sp-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
.calg-people > li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  min-width: 0;
  padding: .45rem 0;
  border-bottom: 1px solid var(--border);
}
.calg-people .person-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calg-source { margin: 0 0 var(--sp-3); color: var(--text-muted); font-size: var(--fs-sm); }
.calg-source b { color: var(--text); }
.calg-modules {
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  list-style: none;
}
.calg-modules > li + li { border-top: 1px solid var(--border); }
.calg-module > summary {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--touch-min);
  padding: .5rem var(--sp-4);
  list-style: none;
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease);
}
.calg-module > summary::-webkit-details-marker { display: none; }
.calg-module > summary::marker { content: ""; }
.calg-module > summary:hover { background: var(--surface-hover); }
.calg-module > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.calg-mod-pos {
  display: grid;
  flex: none;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--r-full);
  background: var(--surface-sunken);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}
.calg-mod-main { flex: 1 1 auto; min-width: 0; }
.calg-mod-title { display: block; font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.calg-mod-meta { display: block; color: var(--text-muted); font-size: var(--fs-xs); }
.calg-mod-chev { flex: none; color: var(--text-muted); transition: transform var(--dur-2) var(--ease); }
.calg-module[open] > summary .calg-mod-chev { transform: rotate(180deg); }
.calg-topics {
  margin: 0;
  padding: 0 0 var(--sp-2);
  list-style: none;
  animation: qta-fade-in var(--dur-2) var(--ease);
}
.calg-topics > li {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr) auto;
  gap: var(--sp-3);
  padding: .3rem var(--sp-4);
  font-size: var(--fs-sm);
}
.calg-topic-num { color: var(--text-muted); font-variant-numeric: tabular-nums; text-align: center; }
.calg-topic-title { min-width: 0; overflow-wrap: anywhere; }
.calg-topic-hours { color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 575.98px) {
  .calg-module > summary,
  .calg-topics > li { padding-inline: var(--sp-3); }
}
/* Enrollment reconciliation uses the shared control and state tokens. */
.enrollment-choices { display: grid; gap: var(--sp-3); }
.enrollment-choices > .btn { display: grid; justify-content: stretch; justify-items: start; gap: var(--sp-2); text-align: left; white-space: normal; padding: var(--sp-4); }
.enrollment-choices > .btn span { font-weight: var(--fw-regular); }
[data-enrollment-results] input { min-width: var(--control-h-lg); max-width: 12ch; }
[data-enrollment-error], [data-conflict-error] { overflow-wrap: anywhere; }