/*
 * Academia VIB Admin UI
 * Unified stylesheet for the complete platform.
 * Native CSS only: no Bootstrap, no jQuery, and no version-specific patches.
 *
 * Contents
 * 01. Design tokens and document defaults
 * 02. Utilities and iconography
 * 03. Application shell and navigation
 * 04. Page layouts, cards and identity media
 * 05. Forms and controls
 * 06. Tables, feedback and overlays
 * 07. Tabs, builders, profiles and details
 * 08. Authentication and component documentation
 * 09. Administrative and academic components
 * 10. Responsive behavior
 */
/* ==========================================================================
   Design tokens and document defaults
   ========================================================================== */
:root {
  --vib-font-family: "Roboto", "Segoe UI", Arial, sans-serif;
  --vib-font-weight-regular: 400;
  --vib-font-weight-medium: 500;
  --vib-font-weight-semibold: 600;
  --vib-font-weight-bold: 600;
  --vib-primary-700: #009e85;
  --vib-primary-500: #00bfa0;
  --vib-primary-200: #8adfd3;
  --vib-primary-100: #dff7f3;
  --vib-primary-50: #f1fcfa;
  --vib-secondary-700: #f57c00;
  --vib-secondary-500: #ffa126;
  --vib-secondary-200: #ffd38a;
  --vib-secondary-100: #fff0d6;
  --vib-secondary-50: #fff9ef;
  --vib-accent-700: #319fc3;
  --vib-accent-500: #42b8de;
  --vib-accent-200: #9edbed;
  --vib-accent-100: #daf1f8;
  --vib-accent-50: #f2fbfd;
  --vib-neutral-950: #20272c;
  --vib-neutral-900: #2f383e;
  --vib-neutral-800: #4b555c;
  --vib-neutral-700: #707a82;
  --vib-neutral-600: #7f8991;
  --vib-neutral-500: #879199;
  --vib-neutral-400: #a2abb2;
  --vib-neutral-300: #b9c0c5;
  --vib-neutral-200: #d9dee1;
  --vib-neutral-150: #e6eaec;
  --vib-neutral-100: #eef1f2;
  --vib-neutral-75: #f4f6f7;
  --vib-neutral-50: #f8f9fa;
  --vib-white: #ffffff;
  --vib-success-700: #007d69;
  --vib-success-100: #dbf6ef;
  --vib-warning-700: #a95600;
  --vib-warning-100: #fff0d6;
  --vib-danger-700: #b93244;
  --vib-danger-500: #d8485a;
  --vib-danger-200: #f2a9b2;
  --vib-danger-100: #fde7ea;
  --vib-info-700: #287f9d;
  --vib-info-100: #ddf2f8;
  --vib-text-primary: var(--vib-neutral-800);
  --vib-text-secondary: var(--vib-neutral-700);
  --vib-text-muted: var(--vib-neutral-600);
  --vib-text-inverse: var(--vib-white);
  --vib-border: #e7ecef;
  --vib-border-strong: #d4dde2;
  --vib-page-bg: var(--vib-white);
  --vib-surface: var(--vib-white);
  --vib-space-1: 0.25rem;
  --vib-space-2: 0.5rem;
  --vib-space-3: 0.75rem;
  --vib-space-4: 1rem;
  --vib-space-5: 1.25rem;
  --vib-space-6: 1.5rem;
  --vib-space-7: 2rem;
  --vib-space-8: 2.5rem;
  --vib-space-9: 3rem;
  --vib-radius-xs: 0.25rem;
  --vib-radius-sm: 0.375rem;
  --vib-radius-md: 0.625rem;
  --vib-radius-lg: 0.875rem;
  --vib-radius-pill: 999px;
  --vib-shadow-xs: 0 1px 2px rgba(32, 39, 44, 0.05);
  --vib-shadow-sm: 0 6px 18px rgba(32, 39, 44, 0.07);
  --vib-shadow-md: 0 16px 42px rgba(32, 39, 44, 0.12);
  --vib-sidebar-width: 17rem;
  --vib-topbar-height: 4.5rem;
  --vib-content-max: 100rem;
  --vib-transition-fast: 150ms ease;
  --vib-transition: 220ms ease;
  --vib-on-primary: var(--vib-neutral-950);
  --vib-on-secondary: var(--vib-neutral-950);
  --vib-on-accent: var(--vib-neutral-950);
  --vib-surface-green: var(--vib-primary-100);
  --vib-surface-orange: var(--vib-secondary-100);
  --vib-surface-blue: var(--vib-accent-100);
  --vib-surface-gray: var(--vib-neutral-100);
  --vib-primary-shadow: rgba(0, 191, 160, 0.28);
  --vib-secondary-shadow: rgba(255, 161, 38, 0.30);
  --vib-accent-shadow: rgba(66, 184, 222, 0.30);
  --vib-danger-shadow: rgba(216, 72, 90, 0.24);
  --vib-neutral-shadow: rgba(112, 122, 130, 0.18);
  --vib-overlay-shadow: 0 18px 50px rgba(32, 39, 44, 0.16);
  --vib-content-mobile-gutter: 1.25rem;
  --vib-control-border: #cfd9df;
  --vib-control-border-focus: var(--vib-accent-500);
  --vib-section-bg: #ffffff;
  --vib-section-muted: #fafbfc;
  --vib-shadow-card: none;
  --vib-button-shadow-primary: var(--vib-primary-200);
  --vib-button-shadow-accent: var(--vib-accent-200);
  --vib-button-shadow-warning: var(--vib-secondary-200);
  --vib-button-shadow-danger: var(--vib-danger-200);
  --vib-button-shadow-neutral: var(--vib-neutral-200);
  --vib-auth-visual-background: var(--vib-primary-700);
  --vib-focus-ring: rgba(66, 184, 222, 0.35);
  --vib-control-focus-shadow: rgba(66, 184, 222, 0.13);
}

* {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
[role="button"] {
  cursor: pointer;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  cursor: not-allowed;
}

a {
  color: var(--vib-primary-700);
  text-decoration: none;
}

a:hover {
  color: var(--vib-primary-700);
}

img {
  max-width: 100%;
  display: block;
}

i.fi {
  line-height: 1;
}

p {
  margin-top: 0;
  color: var(--vib-text-secondary);
}

hr {
  border: 0;
  border-top: 1px solid var(--vib-border);
  margin: var(--vib-space-6) 0;
}

:focus-visible {
  outline: 3px solid var(--vib-focus-ring);
  outline-offset: 2px;
}

/* ==========================================================================
   Utilities and iconography
   ========================================================================== */
.vib-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.vib-text-muted {
  color: var(--vib-text-muted) !important;
}

.vib-text-danger {
  color: var(--vib-danger-700) !important;
}

.vib-text-success {
  color: var(--vib-success-700) !important;
}

.vib-text-right {
  text-align: right;
}

.vib-nowrap {
  white-space: nowrap;
}


.vib-stack--sm {
  gap: var(--vib-space-2);
}

.vib-stack--lg {
  gap: var(--vib-space-6);
}

.vib-inline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--vib-space-3);
}

.vib-inline--between {
  justify-content: space-between;
}

.vib-inline--wrap {
  flex-wrap: wrap;
}

.vib-inline--sm {
  gap: var(--vib-space-2);
}

.vib-icon {
  width: 1.1rem;
  min-width: 1.1rem;
  font-size: 1.1rem;
  display: inline-grid;
  place-items: center;
  color: currentColor;
}

.vib-icon--sm {
  width: 0.92rem;
  min-width: 0.92rem;
  font-size: 0.92rem;
}

.vib-icon--lg {
  width: 1.45rem;
  min-width: 1.45rem;
  font-size: 1.45rem;
}

/* ==========================================================================
   Application shell and navigation
   ========================================================================== */
.vib-app {
  min-height: 100vh;
}

.vib-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 70;
  width: var(--vib-sidebar-width);
  display: flex;
  flex-direction: column;
  background: var(--vib-white);
  border-right: 1px solid var(--vib-border);
  transition: transform var(--vib-transition);
}

.vib-sidebar__brand {
  min-height: var(--vib-topbar-height);
  display: flex;
  align-items: center;
  gap: var(--vib-space-3);
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--vib-border);
}

.vib-brand-logo {
  width: 11rem;
  max-height: 2.55rem;
  object-fit: contain;
  object-position: left center;
}

.vib-brand-symbol {
  width: 2.65rem;
  height: 2.65rem;
  object-fit: contain;
  flex: 0 0 auto;
}

.vib-brand-copy {
  min-width: 0;
}

.vib-brand-copy strong {
  display: block;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.2;
}

.vib-brand-copy span {
  display: block;
  color: var(--vib-text-muted);
  font-size: 0.75rem;
}

.vib-sidebar__close {
  margin-left: auto;
  display: none;
}

.vib-sidebar__scroll {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1rem 0.75rem 1.5rem;
  flex: 1;
}

.vib-nav-section {
  margin-bottom: 1.25rem;
}

.vib-nav-section__label {
  padding: 0 0.75rem 0.45rem;
  color: var(--vib-neutral-500);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.vib-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.2rem;
}

.vib-nav__link,
.vib-nav__toggle {
  width: 100%;
  min-height: 2.65rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.64rem 0.75rem;
  border: 0;
  border-left: 3px solid transparent;
  border-radius: var(--vib-radius-sm);
  color: var(--vib-neutral-700);
  background: transparent;
  text-align: left;
  font-weight: 500;
  transition: color var(--vib-transition-fast), background-color var(--vib-transition-fast), border-color var(--vib-transition-fast);
}

.vib-nav__label {
  flex: 1;
  min-width: 0;
}

.vib-nav__chevron {
  transition: transform var(--vib-transition);
}

.vib-nav__toggle[aria-expanded="true"] .vib-nav__chevron {
  transform: rotate(90deg);
}

.vib-nav__children {
  display: none;
  list-style: none;
  margin: 0.2rem 0 0.4rem 2.75rem;
  padding: 0;
}

.vib-nav__children.is-open {
  display: grid;
  gap: 0.15rem;
}

.vib-nav__children a {
  display: block;
  padding: 0.52rem 0.65rem;
  color: var(--vib-neutral-700);
  border-radius: 0.4rem;
  font-size: 0.85rem;
}

.vib-nav__children a:hover,
.vib-nav__children a.is-active {
  color: var(--vib-primary-700);
  background: var(--vib-primary-50);
}

.vib-sidebar__footer {
  display: grid;
  gap: 0.25rem;
  padding: 0.9rem 1rem;
  border-top: 1px solid var(--vib-border);
  color: var(--vib-text-muted);
  font-size: 0.72rem;
}

.vib-sidebar__footer a {
  color: inherit;
  text-decoration: underline;
}

.vib-sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 65;
  background: rgba(32, 39, 44, 0.42);
}

.vib-main {
  min-height: 100vh;
  margin-left: var(--vib-sidebar-width);
  transition: margin-left var(--vib-transition);
}

.vib-app.is-sidebar-collapsed .vib-sidebar {
  transform: translateX(-100%);
}

.vib-app.is-sidebar-collapsed .vib-main {
  margin-left: 0;
}

.vib-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: var(--vib-topbar-height);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1.5rem;
  background: rgba(255,255,255,0.98);
  border-bottom: 1px solid var(--vib-border);
}

.vib-topbar__menu {
  display: inline-flex;
}

.vib-global-search {
  position: relative;
  width: min(31rem, 44vw);
}

.vib-global-search .vib-icon {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--vib-neutral-500);
}

.vib-global-search input {
  width: 100%;
  min-height: 2.55rem;
  padding: 0.6rem 0.85rem 0.6rem 2.6rem;
  border: 1px solid var(--vib-border);
  border-radius: var(--vib-radius-sm);
  color: var(--vib-text-primary);
  background: var(--vib-neutral-50);
}

.vib-global-search input:focus {
  border-color: var(--vib-accent-500);
  background: var(--vib-white);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(66,184,222,0.16);
}

.vib-topbar__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ==========================================================================
   Page headers and navigation context
   ========================================================================== */
.vib-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.vib-page-header > :first-child {
  margin-right: auto;
}

.vib-page-header--no-bottom-space {
  margin-bottom: 0;
}

.vib-page-header__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.vib-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--vib-text-muted);
  font-size: 0.78rem;
}

.vib-breadcrumb a {
  color: var(--vib-text-muted);
}

.vib-breadcrumb__separator {
  display: inline-flex;
  color: var(--vib-neutral-400);
}

.vib-spinner {
  width: 1rem;
  height: 1rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: vib-spin 0.75s linear infinite;
}

@keyframes vib-spin { to { transform: rotate(360deg); } }


/* ==========================================================================
   Structural grids, cards and avatars
   ========================================================================== */
.vib-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.vib-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.vib-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}


.vib-card {
  min-width: 0;
  background: var(--vib-surface);
  border: 1px solid var(--vib-border);
  border-radius: var(--vib-radius-md);
  box-shadow: var(--vib-shadow-xs);
}


.vib-card--flush .vib-card__body {
  padding: 0;
}

.vib-metric__top {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.vib-metric__change {
  color: var(--vib-text-muted);
  font-size: 0.78rem;
}

.vib-avatar {
  width: 2.7rem;
  height: 2.7rem;
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  flex: 0 0 auto;
  border-radius: 50%;
  color: var(--vib-white);
  background: var(--vib-primary-700);
  font-weight: 700;
}

.vib-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vib-avatar--xs {
  width: 1.8rem;
  height: 1.8rem;
  font-size: 0.65rem;
}

.vib-avatar--sm {
  width: 2.25rem;
  height: 2.25rem;
  font-size: 0.75rem;
}

.vib-avatar--lg {
  width: 4.25rem;
  height: 4.25rem;
  font-size: 1.2rem;
}

.vib-avatar--xl {
  width: 6rem;
  height: 6rem;
  font-size: 1.6rem;
}

.vib-avatar--square {
  border-radius: var(--vib-radius-sm);
  background: var(--vib-white);
  border: 1px solid var(--vib-border);
}

.vib-avatar-group {
  display: flex;
}

.vib-avatar-group .vib-avatar {
  margin-left: -0.55rem;
  border: 2px solid var(--vib-white);
}

.vib-avatar-group .vib-avatar:first-child {
  margin-left: 0;
}

/* ==========================================================================
   Forms and controls
   ========================================================================== */
.vib-form {
  display: grid;
  gap: 1.25rem;
}

.vib-form-section {
  background: var(--vib-white);
  border: 1px solid var(--vib-border);
  border-radius: var(--vib-radius-md);
}


.vib-form-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.vib-form-field {
  min-width: 0;
}

.vib-form-field--full {
  grid-column: 1 / -1;
}

.vib-required {
  color: var(--vib-danger-700);
}

.vib-textarea {
  min-height: 7rem;
  resize: vertical;
}

.vib-input:disabled,
.vib-select:disabled,
.vib-textarea:disabled {
  color: var(--vib-neutral-600);
  background: var(--vib-neutral-100);
}

.vib-form-field.has-error .vib-input,
.vib-form-field.has-error .vib-select,
.vib-form-field.has-error .vib-textarea {
  border-color: var(--vib-danger-500);
}

.vib-field-help {
  display: block;
  margin-top: 0.35rem;
  color: var(--vib-text-muted);
  font-size: 0.75rem;
}

.vib-field-error {
  display: block;
  margin-top: 0.35rem;
  color: var(--vib-danger-700);
  font-size: 0.75rem;
  font-weight: 500;
}

.vib-input-action {
  position: relative;
}

.vib-input-action .vib-input {
  padding-right: 3rem;
}

.vib-input-action__button {
  position: absolute;
  top: 50%;
  right: 0.35rem;
  transform: translateY(-50%);
  width: 2.1rem;
  height: 2.1rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0.4rem;
  color: var(--vib-neutral-600);
  background: transparent;
}

.vib-input-action__button:hover {
  color: var(--vib-neutral-900);
  background: var(--vib-neutral-100);
}

.vib-input-group {
  display: flex;
  align-items: stretch;
}

.vib-input-group .vib-input {
  border-radius: 0;
}

.vib-input-group .vib-input:first-child {
  border-radius: var(--vib-radius-sm) 0 0 var(--vib-radius-sm);
}

  .vib-input-group .vib-input:last-child {
    border-radius: 0 var(--vib-radius-sm) var(--vib-radius-sm) 0;
    padding: 0.58rem 0.72rem;
    border: 1px solid var(--vib-control-border);
  }

.vib-input-group__suffix {
  padding: 0.58rem 0.72rem;
  border: 1px solid var(--vib-control-border);
  border-radius: 0 var(--vib-radius-sm) var(--vib-radius-sm) 0;
}

.vib-check {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.55rem;
  color: var(--vib-neutral-800);
}

.vib-check input {
  margin-top: 0.22rem;
  accent-color: var(--vib-primary-700);
}

.vib-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
}

.vib-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.vib-switch__track {
  width: 2.55rem;
  height: 1.4rem;
  padding: 0.2rem;
  display: flex;
  align-items: center;
  border-radius: var(--vib-radius-pill);
  background: var(--vib-neutral-300);
  transition: background-color var(--vib-transition-fast);
}

.vib-switch__thumb {
  width: 1rem;
  height: 1rem;
  display: block;
  border-radius: 50%;
  background: var(--vib-white);
  box-shadow: var(--vib-shadow-xs);
  transition: transform var(--vib-transition-fast);
}

.vib-switch input:checked + .vib-switch__track {
  background: var(--vib-primary-700);
}

.vib-switch input:checked + .vib-switch__track .vib-switch__thumb {
  transform: translateX(1.15rem);
}

.vib-switch__label {
  font-weight: 500;
}

.vib-file-upload {
  min-height: 9rem;
  display: grid;
  place-items: center;
  gap: 0.5rem;
  padding: 1.25rem;
  border: 1px dashed var(--vib-neutral-400);
  border-radius: var(--vib-radius-md);
  text-align: center;
  background: var(--vib-neutral-50);
}

.vib-file-upload.is-dragging {
  border-color: var(--vib-primary-700);
  background: var(--vib-primary-50);
}

.vib-file-upload__icon {
  width: 2.65rem;
  height: 2.65rem;
  display: grid;
  place-items: center;
  color: var(--vib-primary-700);
  background: var(--vib-primary-100);
  border-radius: var(--vib-radius-sm);
}


.vib-bulk-bar {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1.15rem;
  color: var(--vib-primary-700);
  background: var(--vib-primary-50);
  border-bottom: 1px solid var(--vib-primary-200);
}

.vib-bulk-bar.is-visible {
  display: flex;
}

/* ==========================================================================
   Tables and bulk actions
   ========================================================================== */
.vib-table {
  width: 100%;
  min-width: 46rem;
  border-collapse: collapse;
}


.vib-table__actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.35rem;
}

.vib-table__empty {
  padding: 2.5rem 1rem !important;
  text-align: center !important;
  color: var(--vib-text-muted);
}


/* ==========================================================================
   Alerts and toasts
   ========================================================================== */
.vib-alert__content {
  flex: 1;
}

.vib-alert__content strong {
  display: block;
  color: currentColor;
}

.vib-alert__content p {
  margin: 0.15rem 0 0;
  color: currentColor;
  font-size: 0.82rem;
}

.vib-alert__close {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0.4rem;
  color: currentColor;
  background: transparent;
}

.vib-toast-region {
  position: fixed;
  top: 1rem;
  right: 1rem;
  bottom: auto;
  z-index: 120;
  display: grid;
  gap: 0.65rem;
  width: min(23rem, calc(100vw - 2rem));
}

.vib-toast__content {
  flex: 1;
}

.vib-toast__content strong {
  display: block;
}

.vib-toast__content p {
  margin: 0.15rem 0 0;
  font-size: 0.8rem;
}

.vib-modal,
.vib-drawer {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(32,39,44,0.46);
}

.vib-modal.is-open {
  display: grid;
  place-items: center;
  padding: 1rem;
}

.vib-modal__dialog {
  width: min(44rem, 100%);
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  background: var(--vib-white);
  border-radius: var(--vib-radius-md);
  box-shadow: var(--vib-shadow-md);
}

.vib-modal__header,
.vib-drawer__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.15rem;
  border-bottom: 1px solid var(--vib-border);
}

.vib-modal__header h2,
.vib-drawer__header h2 {
  margin: 0;
}

.vib-modal__header p,
.vib-drawer__header p {
  margin: 0.2rem 0 0;
}

.vib-modal__body,
.vib-drawer__body {
  padding: 1.15rem;
}

.vib-modal__footer,
.vib-drawer__footer {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.65rem;
  padding: 0.9rem 1.15rem;
  border-top: 1px solid var(--vib-border);
}

.vib-modal__close {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0.4rem;
  color: var(--vib-neutral-600);
  background: transparent;
}

.vib-modal__close:hover {
  color: var(--vib-neutral-900);
  background: var(--vib-neutral-100);
}

.vib-drawer.is-open {
  display: flex;
  justify-content: flex-end;
}

.vib-drawer__panel {
  width: min(36rem, 100%);
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--vib-white);
  box-shadow: var(--vib-shadow-md);
}

.vib-drawer__body {
  flex: 1;
  overflow-y: auto;
}

.vib-dropdown {
  position: relative;
}

.vib-dropdown__menu.is-open {
  display: grid;
}

.vib-dropdown__item {
  width: 100%;
  min-height: 2.4rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 0.65rem;
  border: 0;
  border-radius: 0.4rem;
  color: var(--vib-neutral-800);
  background: transparent;
  text-align: left;
}

.vib-dropdown__item:hover {
  color: var(--vib-neutral-900);
  background: var(--vib-neutral-75);
}

.vib-dropdown__item--danger {
  color: var(--vib-danger-700);
}

.vib-dropdown__divider {
  height: 1px;
  margin: 0.3rem 0;
  background: var(--vib-border);
}

.vib-profile-button:hover {
  background: var(--vib-neutral-75);
}

.vib-profile-button__copy strong,
.vib-profile-button__copy span {
  display: block;
}

.vib-profile-button__copy strong {
  color: var(--vib-neutral-900);
  font-size: 0.82rem;
}

.vib-profile-button__copy span {
  color: var(--vib-text-muted);
  font-size: 0.7rem;
}

/* ==========================================================================
   Tabs, steppers and builders
   ========================================================================== */
.vib-tab-panel {
  display: none;
  padding-top: 1rem;
}

.vib-tab-panel.is-active {
  display: block;
}

.vib-stepper {
  display: grid;
  grid-template-columns: repeat(var(--vib-step-count, 5), minmax(0, 1fr));
  gap: 0.4rem;
  margin-bottom: 1.25rem;
}

.vib-step {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.25rem 0.75rem;
  border: 0;
  border-bottom: 3px solid var(--vib-neutral-200);
  color: var(--vib-neutral-600);
  background: transparent;
  text-align: center;
}

.vib-step.is-active,
.vib-step.is-complete {
  color: var(--vib-primary-700);
  border-bottom-color: var(--vib-primary-500);
}

.vib-step__number {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--vib-neutral-300);
  border-radius: 50%;
  background: var(--vib-white);
  font-weight: 700;
}

.vib-step.is-active .vib-step__number,
.vib-step.is-complete .vib-step__number {
  color: var(--vib-white);
  border-color: var(--vib-primary-700);
  background: var(--vib-primary-700);
}

.vib-step__label {
  font-size: 0.74rem;
  font-weight: 600;
}

.vib-builder-panel {
  display: none;
}

/* ==========================================================================
   Profiles, details and reusable content
   ========================================================================== */
.vib-profile-hero__content {
  flex: 1;
  min-width: 0;
}

.vib-profile-hero__content h1,
.vib-profile-hero__content h2 {
  margin-bottom: 0.15rem;
}

.vib-profile-hero__content p {
  margin-bottom: 0.5rem;
}

.vib-profile-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.vib-detail-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem 1.25rem;
}

.vib-detail-list--single {
  grid-template-columns: 1fr;
}

.vib-detail-list div {
  min-width: 0;
}

.vib-detail-list dt {
  color: var(--vib-text-muted);
  font-size: 0.73rem;
  font-weight: 600;
  text-transform: uppercase;
}

.vib-detail-list dd {
  margin: 0.15rem 0 0;
  color: var(--vib-neutral-900);
  overflow-wrap: anywhere;
}

.vib-key-value {
  display: grid;
  grid-template-columns: minmax(9rem, 0.7fr) minmax(0, 1.3fr);
  margin: 0;
}

.vib-key-value dt,
.vib-key-value dd {
  margin: 0;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--vib-border);
}

.vib-key-value dt {
  color: var(--vib-text-muted);
  font-weight: 500;
}

.vib-key-value dd {
  color: var(--vib-neutral-900);
  overflow-wrap: anywhere;
}

.vib-progress {
  height: 0.55rem;
  overflow: hidden;
  border-radius: var(--vib-radius-pill);
  background: var(--vib-neutral-150);
}

.vib-progress--warning .vib-progress__bar {
  background: var(--vib-secondary-700);
}

.vib-repeatable {
  display: grid;
  gap: 0.8rem;
}

.vib-repeatable__item {
  border: 1px solid var(--vib-border);
  border-radius: var(--vib-radius-sm);
  background: var(--vib-white);
}

.vib-repeatable__header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem;
  border-bottom: 1px solid var(--vib-border);
}

.vib-permission-group {
  overflow: hidden;
  border: 1px solid var(--vib-border);
  border-radius: var(--vib-radius-sm);
}

.vib-permission-group__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0.9rem;
  background: var(--vib-neutral-50);
  border-bottom: 1px solid var(--vib-border);
}

.vib-permission-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.vib-permission-item {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.75rem 0.9rem;
  border-bottom: 1px solid var(--vib-border);
}

.vib-permission-item input {
  margin-top: 0.2rem;
  accent-color: var(--vib-primary-700);
}

.vib-code {
  max-width: 100%;
  overflow-wrap: anywhere;
  margin: 0;
  padding: 0;
  border-radius: 0;
  color: var(--vib-primary-500);
  background: transparent;
  font: 0.78rem/1.5 Consolas, "Courier New", monospace;
}

.vib-empty {
  display: grid;
  justify-items: center;
  gap: 0.55rem;
  padding: 2.5rem 1rem;
  text-align: center;
}

.vib-empty__icon {
  width: 3.25rem;
  height: 3.25rem;
  display: grid;
  place-items: center;
  color: var(--vib-primary-700);
  background: var(--vib-primary-100);
  border-radius: var(--vib-radius-sm);
}

.vib-skeleton {
  border-radius: 0.35rem;
  background: var(--vib-neutral-150);
  animation: vib-pulse 1.4s ease-in-out infinite;
}

.vib-skeleton--line {
  height: 0.75rem;
}

.vib-skeleton--title {
  width: 60%;
  height: 1rem;
}

.vib-skeleton--block {
  height: 6rem;
}

.vib-skeleton--avatar {
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 50%;
}

@keyframes vib-pulse { 0%,100% { opacity: 0.55; } 50% { opacity: 1; } }

.vib-accordion {
  display: grid;
  gap: 0.65rem;
}

.vib-accordion__item {
  border: 1px solid var(--vib-border);
  border-radius: var(--vib-radius-sm);
  background: var(--vib-white);
}

.vib-accordion__button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 0.95rem;
  border: 0;
  color: var(--vib-neutral-900);
  background: transparent;
  text-align: left;
  font-weight: 600;
}

.vib-accordion__content {
  display: none;
  padding: 0 0.95rem 0.95rem;
}

.vib-accordion__item.is-open .vib-accordion__content {
  display: block;
}

.vib-donut-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.vib-donut {
  width: 9rem;
  height: 9rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--vib-primary-500) 0 58%, var(--vib-accent-500) 58% 82%, var(--vib-secondary-500) 82% 100%);
}

.vib-donut__inner {
  width: 6.2rem;
  height: 6.2rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--vib-white);
}

.vib-donut__label {
  text-align: center;
  font-weight: 700;
}

.vib-donut__label span {
  display: block;
  color: var(--vib-text-muted);
  font-size: 0.72rem;
  font-weight: 500;
}

.vib-access-option:has(input:checked) {
  border-color: var(--vib-primary-700);
  background: var(--vib-primary-50);
  box-shadow: 0 0 0 2px rgba(0,158,133,0.1);
}

.vib-access-option input {
  margin-top: 0.25rem;
  accent-color: var(--vib-primary-700);
}

.vib-access-option p {
  margin: 0;
  font-size: 0.82rem;
}

.vib-role-switcher {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ==========================================================================
   Authentication
   ========================================================================== */
.vib-auth {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(24rem, 0.9fr) minmax(30rem, 1.1fr);
  background: var(--vib-white);
}

.vib-auth__form-side {
  display: grid;
  place-items: center;
  padding: 2rem;
}

.vib-auth__form {
  width: min(28rem, 100%);
}

.vib-auth__brand {
  margin-bottom: 2rem;
}

.vib-auth__brand .vib-brand-logo {
  width: min(20rem, 100%);
  max-height: none;
}

.vib-auth__heading {
  margin-bottom: var(--vib-space-5);
}

.vib-auth__heading h1,
.vib-auth__heading p {
  margin-bottom: 0;
}

.vib-auth__heading p {
  margin-top: var(--vib-space-2);
}

.vib-auth__create-account {
  margin: var(--vib-space-6) 0 0;
  color: var(--vib-text-muted);
  text-align: center;
}

.vib-auth__create-link {
  color: var(--vib-primary-700);
  font-weight: 700;
}

.vib-auth__visual {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  padding: clamp(2.5rem, 6vw, 6rem);
  background: var(--vib-auth-visual-background);
}

.vib-auth__visual-media,
.vib-auth__visual-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.vib-auth__visual-media {
  z-index: -2;
  object-fit: cover;
  object-position: center;
}

.vib-auth__visual-overlay {
  z-index: -1;
  background: rgba(32, 39, 44, 0.52);
}

.vib-auth__visual-content {
  width: min(36rem, 100%);
  margin-right: auto;
  color: var(--vib-white);
  text-align: left;
}

.vib-auth__visual-content .vib-brand-symbol {
  width: min(18rem, 55vw);
  height: auto;
  margin: 0 0 1.5rem;
}

.vib-auth__visual-content h2,
.vib-auth__visual-content p {
  color: var(--vib-white);
}

.vib-auth__feature {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 0;
  text-align: left;
}

/* ==========================================================================
   Component documentation
   ========================================================================== */
.vib-docs {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 17rem minmax(0, 1fr);
}

.vib-docs__nav {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  padding: 1rem;
  border-right: 1px solid var(--vib-border);
  background: var(--vib-white);
}

.vib-docs__brand {
  display: block;
  margin-bottom: 1.2rem;
}

.vib-docs__brand .vib-brand-logo {
  width: 12rem;
}

.vib-docs__nav nav {
  display: grid;
  gap: 0.2rem;
}

.vib-docs__nav a {
  padding: 0.5rem 0.65rem;
  border-radius: 0.4rem;
  color: var(--vib-neutral-700);
}

.vib-docs__nav a:hover {
  color: var(--vib-primary-700);
  background: var(--vib-primary-50);
}

.vib-docs__content {
  min-width: 0;
  padding: 2rem 2.5rem 4rem;
}

.vib-docs__hero {
  max-width: 60rem;
  margin-bottom: 2rem;
}

.vib-docs-section {
  scroll-margin-top: 1rem;
  margin-bottom: 2rem;
}

.vib-docs-example {
  padding: 1.15rem;
  border: 1px solid var(--vib-border);
  border-radius: var(--vib-radius-md);
  background: var(--vib-white);
}

.vib-color-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

.vib-color-swatch {
  overflow: hidden;
  border: 1px solid var(--vib-border);
  border-radius: var(--vib-radius-sm);
}

.vib-color-swatch__color {
  height: 5rem;
  background: var(--swatch);
}

.vib-color-swatch__label {
  padding: 0.65rem;
  background: var(--vib-white);
}

.vib-color-swatch__label strong,
.vib-color-swatch__label code {
  display: block;
}

@media (max-width: 78rem) {
  .vib-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vib-grid--sidebar { grid-template-columns: 1fr; }
  .vib-form-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  

}

@media (max-width: 64rem) {
  .vib-sidebar { transform: translateX(-100%); box-shadow: var(--vib-shadow-md); }
  .vib-sidebar.is-open { transform: translateX(0); }
  .vib-sidebar-backdrop.is-visible { display: block; }
  .vib-sidebar__close { display: inline-flex; }
  .vib-main, .vib-app.is-sidebar-collapsed .vib-main { margin-left: 0; }
  .vib-app.is-sidebar-collapsed .vib-sidebar.is-open { transform: translateX(0); }
  .vib-global-search { width: min(24rem, 45vw); }
  .vib-profile-button__copy { display: none; }
  .vib-auth { grid-template-columns: 1fr; }
  .vib-auth__visual { display: none; }
  .vib-docs { grid-template-columns: 1fr; }
  .vib-docs__nav { position: static; height: auto; }
  .vib-docs__nav nav { display: flex; gap: 0.35rem; overflow-x: auto; }
  .vib-docs__nav a { white-space: nowrap; }
}

@media (max-width: 48rem) {
  .vib-content { padding: 1.1rem 0.85rem 2.5rem; }
  .vib-topbar { padding: 0 0.75rem; gap: 0.5rem; }
  .vib-global-search { display: none; }
  .vib-page-header { flex-direction: column; }
  .vib-page-header__actions { width: 100%; justify-content: flex-start; }
  .vib-page-header__actions .vib-button { flex: 1 1 auto; }
  .vib-grid--2, .vib-grid--3, .vib-grid--4, .vib-form-grid, .vib-form-grid--3, .vib-detail-list { grid-template-columns: 1fr; }

  

  

  .vib-profile-hero { align-items: flex-start; flex-wrap: wrap; }
  .vib-profile-hero__actions { width: 100%; }
  .vib-stepper { display: flex; overflow-x: auto; padding-bottom: 0.5rem; }
  .vib-step { min-width: 7.5rem; }
  .vib-permission-grid { grid-template-columns: 1fr; }
  .vib-key-value { grid-template-columns: 1fr; }
  .vib-key-value dt { padding-bottom: 0.15rem; border-bottom: 0; }
  .vib-key-value dd { padding-top: 0; }
  .vib-color-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vib-docs__content { padding: 1.25rem 1rem 3rem; }
  .vib-bulk-bar { align-items: flex-start; flex-direction: column; }


  

  

  

  

  

  .vib-dropdown__menu { position: fixed; top: auto; right: 0.85rem; left: 0.85rem; bottom: 0.85rem; max-height: 70vh; overflow-y: auto; }
}

@media (max-width: 30rem) {
  .vib-content { padding-inline: 0.65rem; }
  .vib-button-group { display: grid; grid-template-columns: 1fr; width: 100%; }
  .vib-button-group .vib-button { width: 100%; }
  .vib-color-grid { grid-template-columns: 1fr; }

  .vib-page-header__actions { display: grid; grid-template-columns: 1fr; }
  .vib-page-header__actions .vib-button { width: 100%; }
  .vib-card__header { align-items: stretch; flex-direction: column; }

  
  .vib-modal__footer, .vib-drawer__footer { display: grid; grid-template-columns: 1fr; }
  .vib-modal__footer .vib-button, .vib-drawer__footer .vib-button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *:focus { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

.vib-progress__bar {
  height: 100%;
  width: var(--vib-progress, 0%);
  border-radius: inherit;
  background: var(--vib-primary-500);
}


.vib-toolbar-select {
  width: auto;
  min-height: 2.6rem;
  min-width: 10.25rem;
}

.vib-table,
.vib-table--compact {
  width: 100%;
  min-width: 48rem;
  border-collapse: collapse;
  table-layout: auto;
}

.vib-table th,
.vib-table td,
.vib-table--compact th,
.vib-table--compact td {
  padding: 0.62rem 0.75rem;
  border: 0;
  box-shadow: inset 0 -1px 0 var(--vib-neutral-150);
  white-space: nowrap;
}

.vib-table tbody tr:last-child td {
  border-bottom: 0;
  box-shadow: none;
}

.vib-table td > p,
.vib-table td .vib-text-muted {
  white-space: normal;
}


.vib-table__mobile-label {
  color: var(--vib-neutral-600);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  display: none !important;
}

.vib-table__actions,
.vib-icon-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.32rem;
  white-space: nowrap;
}


.vib-action-button--view {
  color: var(--vib-accent-700);
  background: var(--vib-accent-100);
}

.vib-action-button--edit {
  color: var(--vib-primary-700);
  background: var(--vib-primary-100);
}


.vib-action-button--copy,
.vib-action-button--download,
.vib-action-button--archive,
.vib-action-button--refresh {
  color: var(--vib-neutral-800);
  background: var(--vib-neutral-100);
}

.vib-action-button--approve {
  color: var(--vib-primary-700);
  background: var(--vib-primary-100);
}

.vib-action-button--delete {
  color: var(--vib-danger-700);
  background: var(--vib-danger-100);
}

.vib-group-policy {
  height: 100%;
}

.vib-group-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

@media (max-width: 72rem) {
  .vib-group-summary { grid-template-columns: 1fr; }
  .vib-group-policy .vib-detail-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 48rem) {

  

  

  .vib-table,
  .vib-table--compact {
    display: table;
    width: 100%;
    min-width: 48rem;
    border-collapse: collapse;
    border-spacing: 0;
  }

  .vib-table tbody { display: table-row-group; }
  .vib-table tr { display: table-row; width: auto; border: 0; box-shadow: none; }
  .vib-table th,
  .vib-table td {
    display: table-cell;
    width: auto;
    padding: 0.58rem 0.68rem;
    text-align: left !important;
    overflow-wrap: normal;
  }

  .vib-group-policy .vib-detail-list { grid-template-columns: 1fr; }
  .vib-group-metrics { grid-template-columns: repeat(2, minmax(10rem, 1fr)); overflow-x: auto; padding-bottom: 0.25rem; }
}

@media (max-width: 30rem) {

  .vib-group-metrics { grid-template-columns: repeat(2, minmax(9.5rem, 1fr)); }

}

@media (max-width: 48rem) {

  
}

.vib-page-header__description {
  max-width: 54rem;
  margin-bottom: 0;
  color: var(--vib-neutral-700);
}

.vib-card,
.vib-form-section,
.vib-profile-hero,
.vib-course-card,
.vib-repeatable__item,
.vib-permission-group,
.vib-accordion__item,
.vib-access-option,
.vib-docs-example {
  border: 0;
  box-shadow: none;
  background: var(--vib-white);
}

.vib-card--tint-primary {
  background: var(--vib-primary-50);
}

.vib-card--tint-accent {
  background: var(--vib-accent-50);
}

.vib-card--tint-secondary {
  background: var(--vib-secondary-50);
}

.vib-card--tint-neutral {
  background: var(--vib-neutral-50);
}

.vib-card--title-primary .vib-card__header h2,
.vib-card--title-primary .vib-card__header h3 {
  color: var(--vib-primary-700);
}

.vib-card--title-accent .vib-card__header h2,
.vib-card--title-accent .vib-card__header h3 {
  color: var(--vib-accent-700);
}

.vib-card--title-secondary .vib-card__header h2,
.vib-card--title-secondary .vib-card__header h3 {
  color: var(--vib-secondary-700);
}

.vib-metric {
  display: grid;
  align-content: space-between;
  gap: 1rem;
  border-top: 3px solid var(--vib-primary-500);
  min-height: 8.25rem;
  padding: 1rem;
  border: 0;
  border-radius: var(--vib-radius-md);
  background: var(--vib-primary-100);
  box-shadow: none;
}

.vib-metric--blue {
  border-top-color: var(--vib-accent-500);
  background: var(--vib-accent-100);
}

.vib-metric--orange {
  border-top-color: var(--vib-secondary-500);
  background: var(--vib-secondary-100);
}

.vib-metric--gray {
  border-top-color: var(--vib-neutral-500);
  background: var(--vib-neutral-100);
}

.vib-metric__icon,
.vib-metric--blue .vib-metric__icon,
.vib-metric--orange .vib-metric__icon {
  color: var(--vib-white);
}

.vib-metric__value {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1;
  color: var(--vib-neutral-950);
}

.vib-alert,
.vib-toast {
  border: 0;
}

.vib-alert-list {
  display: grid;
  align-content: start;
  gap: 0;
}

.vib-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 0 0 var(--vib-space-4);
  padding: 0.85rem 0.95rem;
  border: 1px solid;
  border-radius: var(--vib-radius-sm);
  box-shadow: none;
}

.vib-alert-list--flush-last > .vib-alert:last-child {
  margin-bottom: 0;
}

.vib-alert--success {
  border-color: rgba(0,125,105,0.18);
  color: #006e5c;
  background: var(--vib-primary-100);
}

.vib-alert--warning {
  border-color: rgba(169,86,0,0.18);
  color: #8c4700;
  background: var(--vib-secondary-100);
}

.vib-alert--info {
  border-color: rgba(40,127,157,0.18);
  color: #236f89;
  background: var(--vib-accent-100);
}

.vib-alert--danger {
  border-color: rgba(185,50,68,0.18);
  color: var(--vib-danger-700);
  background: var(--vib-danger-100);
}

.vib-toast {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.9rem;
  border: 1px solid var(--vib-border);
  border-left: 4px solid var(--vib-primary-700);
  border-radius: var(--vib-radius-sm);
  color: #006e5c;
  background: var(--vib-primary-100);
  box-shadow: var(--vib-overlay-shadow);
}

.vib-toast--info {
  color: #236f89;
  background: var(--vib-accent-100);
}

.vib-toast--warning {
  color: #8c4700;
  background: var(--vib-secondary-100);
}

.vib-toast--danger {
  border-left-color: var(--vib-danger-700);
  color: var(--vib-danger-700);
  background: var(--vib-danger-100);
}

.vib-toast__content strong,
.vib-toast__content p {
  color: currentColor;
}

.vib-sidebar,
.vib-topbar {
  box-shadow: none;
}

.vib-nav__link.is-active {
  font-weight: 500;
  color: #006e5c;
  background: var(--vib-primary-100);
  border-left-color: var(--vib-primary-500);
}

.vib-nav__link:hover,
.vib-nav__toggle:hover {
  color: var(--vib-primary-700);
  background: var(--vib-primary-50);
}

.vib-topbar__mobile-brand {
  display: none;
  width: 9.75rem;
  min-width: 0;
}

.vib-topbar__mobile-brand img {
  width: 100%;
  max-height: 2.2rem;
  object-fit: contain;
  object-position: left center;
}

.vib-dropdown__menu {
  display: none;
  position: absolute;
  top: calc(100% + 0.45rem);
  right: 0;
  z-index: 90;
  min-width: 13rem;
  padding: 0.35rem;
  border-radius: var(--vib-radius-sm);
  background: var(--vib-white);
  border: 0;
  box-shadow: var(--vib-overlay-shadow);
}

.vib-profile-button {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.25rem;
  border: 0;
  border-radius: var(--vib-radius-sm);
  background: transparent;
  text-align: left;
  position: relative;
}

.vib-action-button {
  width: 2.15rem;
  height: 2.15rem;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: var(--vib-radius-sm);
  color: var(--vib-neutral-800);
  background: var(--vib-neutral-100);
  transition: color var(--vib-transition-fast), background-color var(--vib-transition-fast), transform var(--vib-transition-fast);
  box-shadow: none;
}

.vib-state-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--vib-space-3);
}

.vib-state-strip__item {
  min-width: 0;
  padding: 0.85rem 1rem;
  border-radius: var(--vib-radius-md);
  background: var(--vib-neutral-100);
}

.vib-state-strip__item--primary {
  background: var(--vib-primary-100);
}

.vib-state-strip__item--accent {
  background: var(--vib-accent-100);
}

.vib-state-strip__item--secondary {
  background: var(--vib-secondary-100);
}

.vib-state-strip__item strong {
  display: block;
  color: var(--vib-neutral-950);
  font-size: 1.2rem;
}

.vib-state-strip__item span {
  color: var(--vib-neutral-700);
  font-size: 0.78rem;
}

.vib-color-callout {
  padding: 1rem 1.1rem;
  border-radius: var(--vib-radius-md);
  background: var(--vib-primary-100);
}

.vib-color-callout--accent {
  background: var(--vib-accent-100);
}

.vib-color-callout--secondary {
  background: var(--vib-secondary-100);
}

.vib-color-callout h3 {
  margin-bottom: 0.25rem;
}

.vib-color-callout p {
  margin-bottom: 0;
}

@media (max-width: 64rem) {
  .vib-sidebar {
    width: min(20rem, calc(100vw - 2rem));
  }
  .vib-sidebar__brand {
    min-height: 4.75rem;
    padding-inline: 1.1rem;
  }
  .vib-sidebar__brand .vib-brand-logo {
    width: 13rem;
    max-height: 3rem;
  }
}

@media (max-width: 48rem) {
  .vib-content {
    padding: 1.35rem var(--vib-content-mobile-gutter) 2.75rem;
  }
  .vib-topbar {
    min-height: 4.4rem;
    padding-inline: var(--vib-content-mobile-gutter);
  }
  .vib-topbar__mobile-brand {
    display: block;
    margin-right: auto;
  }
  .vib-topbar__actions {
    margin-left: 0;
  }
  .vib-page-header {
    gap: 1rem;
  }
  .vib-page-header__actions {
    gap: 0.6rem;
  }
  .vib-page-header__actions .vib-button {
    flex: 1 1 9rem;
  }
  .vib-dropdown__menu {
    position: absolute;
    top: calc(100% + 0.55rem);
    right: 0;
    bottom: auto;
    left: auto;
    width: min(18rem, calc(100vw - (var(--vib-content-mobile-gutter) * 2)));
    min-width: 0;
    max-height: calc(100vh - 6.5rem);
    overflow-y: auto;
  }

  
  .vib-state-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 30rem) {
  :root { --vib-content-mobile-gutter: 1rem; }
  .vib-topbar__mobile-brand { width: 8.5rem; }
  .vib-topbar__actions { gap: 0.25rem; }
  .vib-page-header__actions {
    display: flex;
    flex-wrap: wrap;
  }
  .vib-page-header__actions .vib-button {
    width: auto;
  }
  .vib-state-strip {
    grid-template-columns: 1fr;
  }
}


.vib-content {
  width: min(100%, var(--vib-content-max));
  margin: 0 auto;
  padding: 1.75rem 2rem 3rem;
  background: var(--vib-white);
}

.vib-card,
.vib-form-section,
.vib-profile-hero,
.vib-course-card,
.vib-repeatable__item,
.vib-permission-group,
.vib-accordion__item,
.vib-access-option,
.vib-docs-example,
.vib-module-card,
.vib-assessment-card,
.vib-question-card,
.vib-subsection {
  background: var(--vib-white);
  border: 1px solid var(--vib-border);
  box-shadow: none;
}


.vib-label {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--vib-neutral-900);
  font-size: 0.8rem;
  font-weight: 500;
}

.vib-input,
.vib-select,
.vib-textarea {
  width: 100%;
  color: var(--vib-text-primary);
  transition: border-color var(--vib-transition-fast), box-shadow var(--vib-transition-fast), background-color var(--vib-transition-fast);
  min-height: 2.65rem;
  padding: 0.58rem 0.72rem;
  border: 1px solid var(--vib-control-border);
  border-radius: var(--vib-radius-sm);
  background: var(--vib-white);
  box-shadow: none;
}

.vib-input:hover,
.vib-select:hover,
.vib-textarea:hover {
  border-color: var(--vib-neutral-400);
}

.vib-input:focus,
.vib-select:focus,
.vib-textarea:focus {
  outline: 0;
  border-color: var(--vib-control-border-focus);
  box-shadow: 0 0 0 3px var(--vib-control-focus-shadow);
}

.vib-input-group__addon {
  min-width: 2.7rem;
  display: grid;
  place-items: center;
  padding: 0 0.75rem;
  border: 1px solid var(--vib-border-strong);
  color: var(--vib-neutral-700);
  border-color: var(--vib-control-border);
  background: var(--vib-section-muted);
}

.vib-help-text,
.vib-field-help {
  display: block;
  margin-top: 0.35rem;
  color: var(--vib-text-muted);
  font-size: 0.74rem;
}

.vib-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.05rem 1.25rem;
}

.vib-form-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.65rem;
  padding: 0.9rem 1rem;
  border-radius: var(--vib-radius-md);
  background: var(--vib-white);
  box-shadow: none;
}

.vib-metric,
.vib-metric--blue,
.vib-metric--orange,
.vib-metric--gray {
  min-height: 8rem;
  padding: 1rem 1.1rem;
  background: var(--vib-white);
  border: 1px solid var(--vib-border);
  border-top: 1px solid var(--vib-border);
  box-shadow: none;
}

.vib-metric__label {
  color: var(--vib-text-secondary);
  font-size: 0.82rem;
  font-weight: 500;
}

.vib-metric__icon {
  width: 2.45rem;
  height: 2.45rem;
  display: grid;
  place-items: center;
  color: var(--vib-white);
  background: var(--vib-primary-500);
  border-radius: 50%;
}

.vib-metric--blue .vib-metric__icon {
  color: var(--vib-white);
  background: var(--vib-accent-500);
}

.vib-metric--orange .vib-metric__icon {
  color: var(--vib-white);
  background: var(--vib-secondary-500);
}

.vib-metric--gray .vib-metric__icon {
  color: var(--vib-white);
  background: var(--vib-neutral-500);
}

.vib-table-wrap {
  width: 100%;
  overscroll-behavior-inline: contain;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  border-radius: 0 0 var(--vib-radius-md) var(--vib-radius-md);
  background: var(--vib-white);
}

.vib-table th {
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  position: sticky;
  top: 0;
  z-index: 0;
  color: var(--vib-neutral-700);
  background: var(--vib-section-muted);
  font-weight: 600;
}

.vib-table th,
.vib-table td {
  padding: 0.78rem 1rem;
  border-bottom: 1px solid var(--vib-border);
  text-align: left;
  vertical-align: middle;
  box-shadow: inset 0 -1px 0 var(--vib-border);
}

.vib-table td {
  color: var(--vib-text-primary);
  font-size: 0.84rem;
  font-weight: 400;
  line-height: 1.35;
}

.vib-table tbody tr:hover {
  background: #fbfdfd;
}

.vib-course-card {
  background: var(--vib-white);
  border: 1px solid var(--vib-border);
  overflow: hidden;
  border-radius: var(--vib-radius-md);
  transition: transform var(--vib-transition-fast), box-shadow var(--vib-transition-fast), border-color var(--vib-transition-fast);
}

.vib-course-card:hover {
  transform: translateY(-3px);
  border-color: var(--vib-neutral-200);
  box-shadow: 0 14px 28px rgba(32, 39, 44, 0.08);
}

.vib-course-card__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--vib-neutral-100);
}

.vib-course-card__body {
  padding: 1rem 1.05rem 1.05rem;
}

.vib-course-card__body h3 {
  margin: 0;
  line-height: 1.35;
}

.vib-course-card__body > p {
  margin: 0;
  font-size: 0.83rem;
}

.vib-course-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem;
  font-size: 0.78rem;
  padding-top: 0.2rem;
  color: var(--vib-neutral-700);
}

.vib-course-card__owner {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--vib-border);
}

.vib-course-card__owner strong,
.vib-course-card__owner span {
  display: block;
}

.vib-course-card__owner strong {
  font-size: 0.82rem;
  font-weight: 500;
}

.vib-course-card__owner span {
  color: var(--vib-text-muted);
  font-size: 0.72rem;
}

.vib-builder {
  min-width: 0;
}

.vib-stepper--segmented {
  display: flex;
  gap: 0.7rem;
  overflow-x: auto;
  margin-bottom: 1.1rem;
  padding: 0.1rem 0 0.4rem;
  scrollbar-width: thin;
}

.vib-stepper--segmented .vib-step {
  min-width: 9.5rem;
  min-height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--vib-border);
  border-radius: var(--vib-radius-sm);
  color: var(--vib-neutral-700);
  background: var(--vib-section-muted);
}

.vib-stepper--segmented .vib-step.is-active,
.vib-stepper--segmented .vib-step.is-complete {
  color: var(--vib-white);
  border-color: var(--vib-primary-500);
  background: var(--vib-primary-500);
}

.vib-stepper--segmented .vib-step__number {
  width: 1.55rem;
  height: 1.55rem;
  border: 1px solid currentColor;
  color: inherit;
  background: transparent;
  font-size: 0.75rem;
  font-weight: 500;
}

.vib-stepper--segmented .vib-step.is-active .vib-step__number,
.vib-stepper--segmented .vib-step.is-complete .vib-step__number {
  color: var(--vib-primary-700);
  border-color: var(--vib-white);
  background: var(--vib-white);
}

.vib-stepper--segmented .vib-step__label {
  font-size: 0.78rem;
  font-weight: 500;
}

.vib-builder-panel.is-active {
  display: block;
  animation: vib-panel-in 160ms ease;
}

@keyframes vib-panel-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.vib-builder-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(17rem, 0.65fr);
  gap: 1rem;
  align-items: start;
}

.vib-builder-aside {
  display: grid;
  gap: 1rem;
}

.vib-builder-actions {
  align-items: center;
  justify-content: space-between;
}

.vib-upload-zone {
  min-height: 5rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.8rem;
  padding: 0.9rem 1rem;
  border: 1px dashed var(--vib-control-border);
  border-radius: var(--vib-radius-sm);
  background: var(--vib-section-muted);
}

.vib-upload-zone > .vib-icon {
  color: var(--vib-accent-700);
  font-size: 1.35rem;
}

.vib-upload-zone strong,
.vib-upload-zone span {
  display: block;
}

.vib-upload-zone strong {
  font-weight: 500;
}

.vib-upload-zone span {
  color: var(--vib-text-muted);
  font-size: 0.74rem;
}

.vib-access-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
}

.vib-access-option {
  border: 1px solid var(--vib-border);
  background: var(--vib-white);
  min-height: 7rem;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.75rem;
  padding: 0.95rem;
  border-radius: var(--vib-radius-sm);
  cursor: pointer;
}

.vib-access-option:hover,
.vib-access-option.is-selected,
.vib-access-option:has(input:checked) {
  border-color: var(--vib-primary-500);
  background: var(--vib-primary-50);
}

.vib-access-option > input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.vib-access-option__icon {
  width: 2.35rem;
  height: 2.35rem;
  display: grid;
  place-items: center;
  color: var(--vib-white);
  background: var(--vib-primary-500);
  border-radius: 50%;
}

.vib-access-option strong,
.vib-access-option small {
  display: block;
}

.vib-access-option strong {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 500;
}

.vib-access-option small {
  color: var(--vib-text-secondary);
  line-height: 1.45;
}

.vib-subsection {
  border-radius: var(--vib-radius-sm);
}

.vib-subsection__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.95rem 1rem;
  border-bottom: 1px solid var(--vib-border);
}

.vib-subsection__header h3 {
  margin-bottom: 0.2rem;
}

.vib-subsection__header p {
  margin: 0;
  font-size: 0.78rem;
}

.vib-module-card {
  overflow: hidden;
  border-radius: var(--vib-radius-sm);
}

.vib-module-card__header {
  min-height: 4rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  background: var(--vib-section-muted);
  border-bottom: 1px solid var(--vib-border);
}

.vib-module-card__number {
  width: 2.35rem;
  height: 2.35rem;
  display: grid;
  place-items: center;
  color: var(--vib-white);
  background: var(--vib-primary-500);
  border-radius: 50%;
  font-size: 0.78rem;
  font-weight: 600;
}

.vib-module-card__number--accent {
  background: var(--vib-accent-500);
}

.vib-module-card__copy h3,
.vib-module-card__copy p {
  margin: 0;
}

.vib-module-card__copy p {
  font-size: 0.75rem;
}

.vib-module-card__body {
  padding: 0 1rem;
}

.vib-module-card__footer {
  display: flex;
  justify-content: flex-end;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--vib-border);
}

.vib-lesson-row {
  min-height: 3.7rem;
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.9rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--vib-border);
}

.vib-lesson-row:last-child {
  border-bottom: 0;
}

.vib-lesson-row > div:nth-child(2) strong,
.vib-lesson-row > div:nth-child(2) span {
  display: block;
}

.vib-lesson-row > div:nth-child(2) strong {
  font-weight: 500;
}

.vib-lesson-row > div:nth-child(2) span {
  color: var(--vib-text-muted);
  font-size: 0.73rem;
}

.vib-lesson-row__type {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--vib-primary-700);
  font-size: 0.73rem;
  font-weight: 500;
}

.vib-lesson-row__type--accent {
  color: var(--vib-accent-700);
}

.vib-assessment-card,
.vib-question-card {
  overflow: hidden;
  border-radius: var(--vib-radius-sm);
}

.vib-assessment-card__header,
.vib-question-card__header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.95rem 1rem;
  border-bottom: 1px solid var(--vib-border);
}

.vib-assessment-card__header h3,
.vib-question-card__header h3,
.vib-assessment-card__header p {
  margin: 0;
}

.vib-assessment-card__header p {
  font-size: 0.76rem;
}

.vib-kicker {
  display: block;
  margin-bottom: 0.15rem;
  color: var(--vib-primary-700);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.vib-assessment-card__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.vib-assessment-card__stats > div {
  padding: 0.9rem 1rem;
  border-right: 1px solid var(--vib-border);
}

.vib-assessment-card__stats > div:last-child {
  border-right: 0;
}

.vib-assessment-card__stats span,
.vib-assessment-card__stats strong {
  display: block;
}

.vib-assessment-card__stats span {
  color: var(--vib-text-muted);
  font-size: 0.7rem;
}

.vib-assessment-card__stats strong {
  margin-top: 0.2rem;
  font-size: 1.08rem;
  font-weight: 600;
}

.vib-answer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  padding: 1rem;
}

.vib-answer-option {
  min-height: 2.8rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--vib-border);
  border-radius: var(--vib-radius-sm);
}

.vib-answer-option.is-correct {
  border-color: var(--vib-primary-200);
  background: var(--vib-primary-50);
}

.vib-answer-option .vib-badge {
  margin-left: auto;
}

.vib-feature-list,
.vib-validation-list {
  list-style: none;
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
}

.vib-feature-list li,
.vib-validation-list li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--vib-border);
}

.vib-feature-list li:last-child,
.vib-validation-list li:last-child {
  border-bottom: 0;
}

.vib-feature-list .vib-icon {
  color: var(--vib-accent-700);
}

.vib-validation-list .is-valid .vib-icon {
  color: var(--vib-primary-700);
}

.vib-role-layout {
  display: grid;
  grid-template-columns: minmax(16rem, 0.58fr) minmax(0, 1.42fr);
  gap: 1rem;
  align-items: start;
}

.vib-role-definition {
  position: sticky;
  top: calc(var(--vib-topbar-height) + 1rem);
}

.vib-permission-toolbar {
  display: grid;
  grid-template-columns: minmax(14rem, 1fr) auto auto;
  gap: 0.65rem;
  margin-bottom: 0.9rem;
}

.vib-permission-tree {
  overflow: hidden;
  border: 1px solid var(--vib-border);
  border-radius: var(--vib-radius-sm);
}

.vib-tree-node[hidden] {
  display: none;
}

.vib-tree-node + .vib-tree-node {
  border-top: 1px solid var(--vib-border);
}

.vib-tree-row {
  min-height: 3rem;
  display: grid;
  grid-template-columns: 2rem 2.2rem minmax(0, 1fr);
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.75rem;
}

.vib-tree-row--component {
  background: var(--vib-section-muted);
}

.vib-tree-row--module {
  background: var(--vib-white);
}

.vib-tree-toggle {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  color: var(--vib-neutral-600);
  background: transparent;
  border-radius: var(--vib-radius-xs);
}

.vib-tree-toggle .vib-icon {
  transition: transform var(--vib-transition-fast);
}

.vib-tree-node.is-expanded > .vib-tree-row .vib-tree-toggle .vib-icon {
  transform: rotate(90deg);
}

.vib-tree-row__icon {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  color: var(--vib-primary-700);
  background: var(--vib-primary-100);
  border-radius: var(--vib-radius-sm);
}

.vib-tree-row__icon--accent {
  color: var(--vib-accent-700);
  background: var(--vib-accent-100);
}

.vib-tree-row__icon--warning {
  color: var(--vib-warning-700);
  background: var(--vib-secondary-100);
}

.vib-tree-row__icon--secondary {
  color: var(--vib-neutral-700);
  background: var(--vib-neutral-100);
}

.vib-tree-check {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  cursor: pointer;
}

.vib-tree-check input[type="checkbox"],
.vib-tree-leaf input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  flex: 0 0 1rem;
  margin-top: 0.25rem;
  appearance: none;
  border: 1px solid var(--vib-neutral-400);
  border-radius: 0.18rem;
  background-color: var(--vib-white);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 0.72rem 0.72rem;
  cursor: pointer;
}

.vib-tree-check input[type="checkbox"]:checked,
.vib-tree-leaf input[type="checkbox"]:checked {
  border-color: var(--vib-primary-500);
  background-color: var(--vib-primary-500);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M3 8.5 6.3 12 13 4.5'/%3E%3C/svg%3E");
}

.vib-tree-check input[type="checkbox"]:indeterminate,
.vib-tree-leaf input[type="checkbox"]:indeterminate {
  border-color: var(--vib-primary-500);
  background-color: var(--vib-primary-500);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-width='2.5' d='M3.5 8h9'/%3E%3C/svg%3E");
}

.vib-tree-check input[type="checkbox"]:focus-visible,
.vib-tree-leaf input[type="checkbox"]:focus-visible {
  outline: 3px solid var(--vib-primary-200);
  outline-offset: 2px;
}

.vib-tree-check strong,
.vib-tree-check small {
  display: block;
}

.vib-tree-check strong {
  font-weight: 500;
}

.vib-tree-check small {
  color: var(--vib-text-muted);
  font-size: 0.7rem;
}

.vib-tree-children {
  display: none;
  margin-left: 2.2rem;
  border-left: 1px solid var(--vib-border);
}

.vib-tree-node.is-expanded > .vib-tree-children {
  display: block;
}

.vib-tree-children > .vib-tree-node {
  border-top: 1px solid var(--vib-border);
}

.vib-tree-children--permissions {
  padding: 0.2rem 0 0.65rem 2.3rem;
}

.vib-tree-leaf {
  min-height: 2.35rem;
  display: grid;
  grid-template-columns: auto 1.2rem minmax(0, 1fr);
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.75rem;
  color: var(--vib-neutral-800);
  font-size: 0.8rem;
  cursor: pointer;
}

.vib-tree-leaf:hover {
  color: var(--vib-primary-700);
  background: var(--vib-primary-50);
}

.vib-tree-leaf .vib-icon {
  color: var(--vib-neutral-500);
  font-size: 0.9rem;
}

.vib-tree-leaf input[type="checkbox"]:disabled {
  cursor: not-allowed;
  opacity: 0.75;
}

.vib-permission-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}

.vib-permission-summary-grid .vib-permission-grid {
  grid-template-columns: 1fr;
}

.vib-permission-item > .vib-icon {
  margin-top: 0.2rem;
  color: var(--vib-primary-700);
}

.vib-profile-hero {
  background: var(--vib-white);
  border: 1px solid var(--vib-border);
  border-radius: var(--vib-radius-md);
  min-height: 0;
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
}

.vib-profile-hero__media {
  width: 7.5rem;
  height: 7.5rem;
  overflow: hidden;
  border: 1px solid var(--vib-border);
  border-radius: 50%;
  background: var(--vib-neutral-100);
}

.vib-profile-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vib-group-summary {
  display: grid;
  grid-template-columns: minmax(19rem, 0.9fr) minmax(0, 1.6fr);
  gap: 1rem;
  margin-top: 1rem;
  align-items: start;
}

.vib-group-policy,
.vib-group-metrics .vib-metric {
  height: 100%;
}

.vib-dropdown__menu,
.vib-modal,
.vib-drawer,
.vib-toast {
  box-shadow: var(--vib-overlay-shadow);
}

@media (max-width: 72rem) {
  .vib-builder-layout,
  .vib-role-layout,
  .vib-permission-summary-grid { grid-template-columns: 1fr; }
  .vib-role-definition { position: static; }
  .vib-access-grid { grid-template-columns: 1fr; }
  .vib-permission-toolbar { grid-template-columns: 1fr auto auto; }
}

@media (max-width: 48rem) {
  .vib-content { padding-inline: 1.35rem; }
  .vib-form-grid,
  .vib-form-grid--3,
  .vib-answer-grid { grid-template-columns: 1fr; }
  .vib-stepper--segmented .vib-step { min-width: 8.5rem; }
  .vib-builder-actions { align-items: stretch; }
  .vib-builder-actions > .vib-inline { width: 100%; justify-content: flex-end; }
  .vib-upload-zone { grid-template-columns: auto minmax(0, 1fr); }
  .vib-upload-zone .vib-button { grid-column: 1 / -1; width: 100%; }
  .vib-module-card__header { grid-template-columns: auto minmax(0, 1fr); }
  .vib-module-card__header .vib-icon-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .vib-lesson-row { grid-template-columns: 5.7rem minmax(10rem, 1fr) auto; min-width: 34rem; }
  .vib-module-card__body { overflow-x: auto; }
  .vib-assessment-card__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vib-assessment-card__stats > div:nth-child(2) { border-right: 0; }
  .vib-assessment-card__stats > div:nth-child(-n/**/+2) { border-bottom: 1px solid var(--vib-border); }
  .vib-permission-toolbar { grid-template-columns: 1fr 1fr; }
  .vib-permission-toolbar .vib-search-field { grid-column: 1 / -1; }
  .vib-profile-hero { grid-template-columns: 5.5rem minmax(0, 1fr); }
  .vib-profile-hero__media { width: 5.5rem; height: 5.5rem; }
  .vib-profile-hero__actions { grid-column: 1 / -1; width: 100%; }
  .vib-profile-hero__actions .vib-button { flex: 1 1 10rem; }
}

@media (max-width: 30rem) {
  .vib-content { padding-inline: 1.1rem; }
  .vib-form-section__header,
  .vib-form-section__body,
  .vib-card__header,
  .vib-card__body { padding-inline: 0.95rem; }
  .vib-builder-actions > .vib-inline { display: grid; grid-template-columns: 1fr 1fr; }
  .vib-builder-actions > .vib-inline .vib-button { width: 100%; }
  .vib-builder-actions > .vib-inline .vib-button:last-child { grid-column: 1 / -1; }
  .vib-tree-row { padding-inline: 0.55rem; }
  .vib-tree-children { margin-left: 1.2rem; }
  .vib-tree-children--permissions { padding-left: 1rem; }
}

[hidden] {
  display: none !important;
}

.vib-chart {
  display: flex;
  gap: 0.65rem;
  padding: 1rem 0.5rem 0;
  border-bottom: 1px solid var(--vib-border);
  height: 14rem;
  min-height: 14rem;
  align-items: stretch;
}

.vib-chart__group {
  flex: 1;
  min-width: 1.4rem;
  justify-items: center;
  gap: 0.45rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

.vib-chart__bar {
  width: min(2.2rem, 80%);
  min-height: 0.3rem;
  border-radius: 0.35rem 0.35rem 0 0;
  background: var(--vib-primary-500);
  flex: 0 0 var(--bar-height, var(--height, 50%));
  height: auto;
}

.vib-chart__label {
  color: var(--vib-text-muted);
  font-size: 0.7rem;
  flex: 0 0 auto;
}


/* ==========================================================================
   Typography, utilities and shared interaction patterns
   ========================================================================== */
body {
  margin: 0;
  min-width: 20rem;
  color: var(--vib-text-primary);
  background: var(--vib-white);
  font-family: var(--vib-font-family);
  font-size: 0.9375rem;
  font-weight: var(--vib-font-weight-regular);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 { color: var(--vib-text-primary); line-height: 1.25; letter-spacing: 0; }
h1 { font-size: clamp(1.6rem, 2vw, 2.1rem); font-weight: 500; letter-spacing: -0.02em; }
h2 { font-size: 1.28rem; font-weight: 500; }
h3 { font-size: 1rem; font-weight: 500; }
h4, h5, h6 { font-size: 0.92rem; font-weight: 400; }
.vib-page-header__title { color: var(--vib-primary-500); font-weight: 500; }
.vib-bold { font-weight: var(--vib-font-weight-bold); }
.vib-m-0 { margin: 0; }
.vib-m-4 { margin: 1rem; }
.vib-mt-1 { margin-top: .25rem; }
.vib-mt-2 { margin-top: .5rem; }
.vib-mt-3 { margin-top: .75rem; }
.vib-mt-4 { margin-top: 1rem; }
.vib-mt-6 { margin-top: 1.5rem; }
.vib-mb-2 { margin-bottom: .5rem; }
.vib-mb-4 { margin-bottom: 1rem; }
.vib-mb-5 { margin-bottom: 1.25rem; }
.vib-my-1 { margin-block: .25rem; }
.vib-my-2 { margin-block: .5rem; }
.vib-ml-auto { margin-left: auto; }
.vib-p-4 { padding: 1rem; }
.vib-flex-1 { flex: 1; }
.vib-width-full { width: 100%; }
.vib-width-auto { width: auto; }
.vib-max-w-20 { max-width: 20rem; }
.vib-min-h-control-sm { min-height: 2.2rem; }
.vib-text-center { text-align: center; }
.vib-text-inverse { color: var(--vib-white); }
.vib-text-xs { font-size: .75rem; }
.vib-text-sm { font-size: .8rem; }
.vib-text-lg { font-size: 1.1rem; }
.vib-text-xl { font-size: 1.5rem; }
.vib-text-2xl { font-size: 1.8rem; }
.vib-bg-secondary { background: var(--vib-secondary-500); }
.vib-bg-accent { background: var(--vib-accent-500); }
.vib-borderless { border: 0; }
.vib-media-placeholder { aspect-ratio: 2 / 1; display: grid; place-items: center; background: var(--vib-neutral-950); color: var(--vib-white); }

/* Buttons use the website-style offset color shadow. The fill never changes. */
.vib-button {
  min-height: 2.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .58rem .95rem;
  border: 1px solid transparent;
  border-radius: var(--vib-radius-sm);
  font-weight: 500;
  line-height: 1.1;
  text-align: center;
  transition: transform var(--vib-transition-fast), box-shadow var(--vib-transition-fast);
}
.vib-button:hover { transform: translate(-2px, -2px); }
.vib-button:active { transform: translate(0, 0); box-shadow: none; }
.vib-button:disabled { opacity: .55; transform: none; box-shadow: none; }
.vib-button--primary { color: var(--vib-white); background: var(--vib-primary-500); border-color: var(--vib-primary-500); }
.vib-button--primary:hover, .vib-button--primary:focus-visible { color: var(--vib-white); background: var(--vib-primary-500); border-color: var(--vib-primary-500); box-shadow: 5px 5px 0 0 var(--vib-button-shadow-primary); }
.vib-button--accent { color: var(--vib-white); background: var(--vib-accent-500); border-color: var(--vib-accent-500); }
.vib-button--accent:hover, .vib-button--accent:focus-visible { color: var(--vib-white); background: var(--vib-accent-500); border-color: var(--vib-accent-500); box-shadow: 5px 5px 0 0 var(--vib-button-shadow-accent); }
.vib-button--warning { color: var(--vib-white); background: var(--vib-secondary-500); border-color: var(--vib-secondary-500); }
.vib-button--warning:hover, .vib-button--warning:focus-visible { color: var(--vib-white); background: var(--vib-secondary-500); border-color: var(--vib-secondary-500); box-shadow: 5px 5px 0 0 var(--vib-button-shadow-warning); }
.vib-button--danger { color: var(--vib-white); background: var(--vib-danger-700); border-color: var(--vib-danger-700); }
.vib-button--danger:hover, .vib-button--danger:focus-visible { color: var(--vib-white); background: var(--vib-danger-700); border-color: var(--vib-danger-700); box-shadow: 5px 5px 0 0 var(--vib-button-shadow-danger); }
.vib-button--secondary { color: var(--vib-neutral-800); background: var(--vib-white); border-color: var(--vib-control-border); }
.vib-button--secondary:hover, .vib-button--secondary:focus-visible { color: var(--vib-neutral-800); background: var(--vib-white); border-color: var(--vib-control-border); box-shadow: 5px 5px 0 0 var(--vib-button-shadow-neutral); }
.vib-button--ghost { color: var(--vib-neutral-700); background: transparent; border-color: transparent; }
.vib-button--ghost:hover, .vib-button--ghost:focus-visible { color: var(--vib-neutral-800); background: var(--vib-neutral-50); box-shadow: none; transform: none; }
.vib-button--link { min-height: auto; padding: .2rem; color: var(--vib-primary-700); background: transparent; }
.vib-button--sm { min-height: 2.25rem; padding: .45rem .75rem; font-size: .82rem; }
.vib-button--lg { min-height: 3rem; padding: .72rem 1.15rem; }
.vib-button--icon { width: 2.55rem; padding: 0; }
.vib-button--icon.vib-button--sm { width: 2.25rem; }
.vib-button--toolbar { min-height: 2.6rem; }
.vib-button-group { display: inline-flex; align-items: stretch; gap: .45rem; flex-wrap: wrap; }

/* Semantic badge palette. */
.vib-badge { min-height: 1.6rem; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; padding: .18rem .55rem; border: 0; border-radius: var(--vib-radius-pill); font-size: .73rem; font-weight: 500; white-space: nowrap; }
.vib-badge--success { color: var(--vib-success-700); background: var(--vib-success-100); }
.vib-badge--warning { color: var(--vib-warning-700); background: var(--vib-warning-100); }
.vib-badge--danger { color: var(--vib-danger-700); background: var(--vib-danger-100); }
.vib-badge--info { color: var(--vib-info-700); background: var(--vib-info-100); }
.vib-badge--neutral { color: var(--vib-neutral-700); background: var(--vib-neutral-100); }
.vib-badge--solid { color: var(--vib-white); background: var(--vib-primary-500); }

/* Data toolbar has no background fill. */


/* All tab sets use the segmented wizard language; only one is active. */
.vib-tabs { min-width: 0; margin-block: 1rem; }
.vib-tabs__list { display: flex; gap: .65rem; overflow-x: auto; padding: .1rem 0 .35rem; border: 0; scrollbar-width: thin; }
.vib-tabs__button { min-height: 2.7rem; padding: .58rem .9rem; border: 1px solid var(--vib-border); border-radius: var(--vib-radius-sm); color: var(--vib-neutral-700); background: var(--vib-neutral-50); font-weight: 500; white-space: nowrap; transition: color var(--vib-transition-fast), background-color var(--vib-transition-fast), border-color var(--vib-transition-fast); }
.vib-tabs__button:hover { color: var(--vib-primary-700); background: var(--vib-primary-50); border-color: var(--vib-primary-200); }
.vib-tabs__button[aria-selected="true"] { color: var(--vib-white); background: var(--vib-primary-500); border-color: var(--vib-primary-500); }

.vib-timeline { display: grid; gap: .8rem; padding-inline-start: 0; }
.vib-timeline__item { display: grid; grid-template-columns: 1rem minmax(0, 1fr); gap: .7rem; padding-left: .05rem; }
.vib-timeline__dot { width: .8rem; height: .8rem; margin-top: .35rem; border: 2px solid var(--vib-primary-700); border-radius: 50%; background: var(--vib-white); }
.vib-timeline__content { padding: 0 0 .85rem; border-bottom: 1px solid var(--vib-border); }
.vib-timeline__content .vib-bold { display: block; }
.vib-timeline__content p { margin: .15rem 0 0; font-size: .8rem; }

.vib-course-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.vib-question-card__body { padding: 1rem 1.15rem 1.15rem; }
.vib-question-card__body .vib-answer-grid { margin: 0; }

/* Table minimum widths replace markup-level inline styles. */
.vib-table-min-54 { min-width: 54rem; } .vib-table-min-58 { min-width: 58rem; } .vib-table-min-60 { min-width: 60rem; }
.vib-table-min-62 { min-width: 62rem; } .vib-table-min-63 { min-width: 63rem; } .vib-table-min-64 { min-width: 64rem; }
.vib-table-min-65 { min-width: 65rem; }
.vib-table-min-67 { min-width: 67rem; } .vib-table-min-68 { min-width: 68rem; } .vib-table-min-72 { min-width: 72rem; }
.vib-table-min-76 { min-width: 76rem; } .vib-table-min-78 { min-width: 78rem; }


/* Course detail: two columns with a distinctive 2.5:1 banner and sticky outline. */
.vib-course-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(23rem, 30rem); gap: 1.5rem; align-items: start; }
.vib-course-detail-main { min-width: 0; }
.vib-course-banner { position: relative; overflow: hidden; aspect-ratio: 2.5 / 1; border-radius: var(--vib-radius-md); background: var(--vib-neutral-900); }
.vib-course-banner > img { width: 100%; height: 100%; object-fit: cover; }
.vib-course-banner__overlay { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(19,26,31,.86) 0%, rgba(19,26,31,.12) 72%); }
.vib-course-banner__content { position: absolute; inset: auto 0 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.4rem; color: var(--vib-white); }
.vib-course-banner__content h2 { max-width: 44rem; margin: .55rem 0; color: var(--vib-white); font-size: clamp(1.25rem, 2vw, 1.75rem); }
.vib-course-banner__meta { display: flex; flex-wrap: wrap; gap: .65rem 1rem; font-size: .8rem; }
.vib-course-banner__meta span { display: inline-flex; align-items: center; gap: .35rem; }
.vib-course-outline { position: sticky; top: calc(var(--vib-topbar-height) + 1rem); min-width: 0; }
.vib-course-outline__card .vib-card__header { align-items: flex-start; }
.vib-course-outline__progress { display: grid; gap: .55rem; margin-bottom: 1rem; }
.vib-course-modules { border: 1px solid var(--vib-border); border-radius: var(--vib-radius-sm); overflow: hidden; }
.vib-course-module + .vib-course-module { border-top: 1px solid var(--vib-border); }
.vib-course-module__toggle { width: 100%; display: grid; grid-template-columns: 2.2rem minmax(0,1fr) auto; align-items: center; gap: .6rem; padding: .8rem .9rem; border: 0; color: var(--vib-text-primary); background: var(--vib-white); text-align: left; }
.vib-course-module__number { color: var(--vib-neutral-500); font-weight: 600; }
.vib-course-module__title { font-weight: 500; }
.vib-course-module__toggle .vib-icon { transition: transform var(--vib-transition-fast); }
.vib-course-module.is-open .vib-course-module__toggle .vib-icon { transform: rotate(180deg); }
.vib-course-module__body { display: none; border-top: 1px solid var(--vib-border); }
.vib-course-module.is-open .vib-course-module__body { display: block; }
.vib-course-lesson { display: grid; grid-template-columns: 1.3rem minmax(0,1fr); gap: .6rem; padding: .75rem .9rem; color: var(--vib-neutral-700); }
.vib-course-lesson + .vib-course-lesson { border-top: 1px solid var(--vib-border); }
.vib-course-lesson > div span, .vib-course-lesson > div small { display: block; }
.vib-course-lesson > div small { margin-top: .15rem; color: var(--vib-text-muted); }
.vib-course-lesson.is-complete { color: var(--vib-primary-700); background: var(--vib-primary-50); }
.vib-course-facts { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1rem; margin: 0; }
.vib-course-facts div { display: grid; gap: .2rem; }
.vib-course-facts dt { color: var(--vib-text-muted); font-size: .72rem; text-transform: uppercase; }
.vib-course-facts dd { margin: 0; }
.vib-course-summary { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(14rem, .7fr); gap: 1rem; margin-top: 1rem; }
.vib-course-summary__metrics { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.vib-check-list { display: grid; gap: .65rem; margin: 0; padding: 0; list-style: none; }
.vib-check-list li { display: grid; grid-template-columns: 1.1rem minmax(0,1fr); align-items: start; gap: .5rem; }
.vib-check-list__icon { margin-top: .15rem; color: var(--vib-primary-700); }
.vib-review-summary { display: grid; grid-template-columns: 11rem minmax(0,1fr); gap: 1.5rem; align-items: center; }
.vib-review-score { display: grid; justify-items: center; gap: .2rem; }
.vib-review-score__number { font-size: 2.8rem; line-height: 1; }
.vib-stars { color: var(--vib-secondary-500); letter-spacing: .08em; }
.vib-stars--sm { font-size: .78rem; }
.vib-review-bars { display: grid; gap: .5rem; }
.vib-review-bar { display: grid; grid-template-columns: 2.5rem minmax(0,1fr) 3rem; align-items: center; gap: .65rem; font-size: .8rem; }
.vib-review-bar__track { height: .38rem; overflow: hidden; border-radius: var(--vib-radius-pill); background: var(--vib-neutral-100); }
.vib-review-bar__track > span { display: block; height: 100%; border-radius: inherit; background: var(--vib-secondary-500); }
.vib-review-list { display: grid; gap: 1rem; margin-top: 1.25rem; }
.vib-review { display: grid; grid-template-columns: auto minmax(0,1fr); gap: .8rem; padding-top: 1rem; border-top: 1px solid var(--vib-border); }
.vib-review p { margin: .25rem 0 0; }
.vib-avatar--initials { color: var(--vib-white); background: var(--vib-primary-700); }
.vib-avatar--accent { background: var(--vib-accent-700); }

/* Group creation and Google Meet session planning. */
.vib-stepper--five { grid-template-columns: repeat(5, minmax(9.5rem,1fr)); }
.vib-weekday-picker { display: flex; flex-wrap: wrap; gap: .55rem; }
.vib-weekday-picker label { min-width: 3.25rem; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; padding: .5rem .65rem; border: 1px solid var(--vib-control-border); border-radius: var(--vib-radius-sm); background: var(--vib-white); }
.vib-meeting-strategy { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .85rem; margin: 0; padding: 0; border: 0; }
.vib-meeting-strategy legend { grid-column: 1/-1; }
.vib-choice { display: inline-flex; align-items: center; gap: .45rem; }

@media (max-width: 88rem) {
  .vib-course-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .vib-course-detail-layout { grid-template-columns: minmax(0,1fr) minmax(21rem,26rem); }
}
@media (max-width: 72rem) {
  .vib-course-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .vib-course-detail-layout { grid-template-columns: 1fr; }
  .vib-course-outline { position: static; }
  .vib-course-facts { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 48rem) {

  
  .vib-course-grid { grid-template-columns: 1fr; }
  .vib-course-banner { aspect-ratio: 1.2 / 1; }
  .vib-course-banner__content { align-items: flex-start; flex-direction: column; }
  .vib-course-summary, .vib-review-summary, .vib-meeting-strategy { grid-template-columns: 1fr; }
  .vib-course-facts { grid-template-columns: 1fr; }
}


/* ==========================================================================
   Tables, actions, pagination and dashboard components
   ========================================================================== */


.vib-table-footer {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 1rem;
  padding: 0.85rem 1.15rem;
  border-top: 1px solid var(--vib-border);
  overflow-x: auto;
}

.vib-table-footer__summary {
  flex: 0 0 auto;
  margin: 0;
  color: var(--vib-text-muted);
  font-size: 0.78rem;
  white-space: nowrap;
}

.vib-pagination {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
}

.vib-pagination button {
  min-width: 2.1rem;
  height: 2.1rem;
  display: grid;
  place-items: center;
  padding: 0 0.45rem;
  border: 1px solid transparent;
  border-radius: var(--vib-radius-sm);
  color: var(--vib-neutral-700);
  background: transparent;
}

.vib-pagination button:hover:not(:disabled) {
  color: var(--vib-neutral-900);
  background: var(--vib-neutral-100);
}

.vib-pagination button.is-active,
.vib-pagination button[aria-current="page"] {
  color: var(--vib-white);
  background: var(--vib-primary-500);
}

.vib-pagination button:disabled {
  cursor: not-allowed;
  color: var(--vib-neutral-300);
}

.vib-table__person {
  min-width: 12rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.vib-table__person > div {
  min-width: 0;
  display: grid;
  gap: 0.12rem;
}

.vib-table__primary {
  display: block;
  min-width: 0;
  color: var(--vib-text-primary);
  font-size: 0.84rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.vib-table__secondary {
  display: block;
  min-width: 0;
  margin-top: 0.05rem;
  color: var(--vib-text-muted);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.vib-action-button:hover {
  transform: translateY(-1px);
  box-shadow: none;
}

.vib-action-button--view:hover {
  color: var(--vib-accent-700);
  background: var(--vib-accent-200);
}

.vib-action-button--edit:hover,
.vib-action-button--approve:hover {
  color: var(--vib-primary-700);
  background: var(--vib-primary-200);
}

.vib-action-button--delete:hover {
  color: var(--vib-danger-700);
  background: var(--vib-danger-200);
}

.vib-action-button--default:hover,
.vib-action-button--copy:hover,
.vib-action-button--download:hover,
.vib-action-button--archive:hover,
.vib-action-button--refresh:hover {
  color: var(--vib-neutral-900);
  background: var(--vib-neutral-200);
}

.vib-dashboard-chart-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  align-items: stretch;
}

.vib-dashboard-chart-grid > .vib-card {
  min-width: 0;
  height: 100%;
}

.vib-chart-card-body {
  min-height: 15rem;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 1rem;
}

.vib-chart-legend {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  color: var(--vib-text-secondary);
  font-size: 0.78rem;
}

.vib-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.vib-chart-legend__dot {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: var(--vib-neutral-300);
}

.vib-chart-legend__dot--primary { background: var(--vib-primary-500); }
.vib-chart-legend__dot--secondary { background: var(--vib-secondary-500); }

.vib-horizontal-chart {
  min-height: 15rem;
  display: grid;
  align-content: center;
  gap: 1.15rem;
}

.vib-horizontal-chart__item {
  display: grid;
  gap: 0.45rem;
}

.vib-horizontal-chart__item > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  color: var(--vib-text-secondary);
  font-size: 0.78rem;
}

.vib-horizontal-chart__item > div:first-child span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vib-horizontal-chart__item > div:first-child span:last-child {
  color: var(--vib-text-primary);
  font-weight: 500;
}

.vib-horizontal-chart__track {
  height: 0.55rem;
  overflow: hidden;
  border-radius: var(--vib-radius-pill);
  background: var(--vib-neutral-100);
}

.vib-horizontal-chart__track > span {
  width: var(--vib-value, 0%);
  height: 100%;
  display: block;
  border-radius: inherit;
  background: var(--vib-accent-500);
}

@media (max-width: 78rem) {
  .vib-dashboard-chart-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 56rem) {
  .vib-data-toolbar {
    grid-template-columns: 1fr;
    gap: 0.7rem;
  }

  .vib-data-toolbar__search {
    max-width: none;
  }

  .vib-data-toolbar__actions,
  .vib-data-toolbar__group {
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 0.15rem;
  }

  .vib-data-toolbar__actions > *,
  .vib-data-toolbar__group > * {
    min-width: max-content;
  }
}

@media (max-width: 48rem) {
  .vib-dashboard-chart-grid {
    grid-template-columns: 1fr;
  }

  .vib-table-footer {
    padding-inline: 0.85rem;
  }
}

/* ==========================================================================
   Layout, card headers and data toolbars
   ========================================================================== */
.vib-grid {
  display: grid;
  align-items: start;
  gap: 1rem;
}

.vib-grid--sidebar {
  grid-template-columns: minmax(0, 1.8fr) minmax(17rem, 0.7fr);
  align-items: start;
}

.vib-grid--sidebar > * {
  min-width: 0;
  align-self: start;
}

.vib-stack {
  display: grid;
  align-content: start;
  gap: var(--vib-space-4);
}

.vib-card__header,
.vib-form-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 0;
  padding: 0.9rem 1.15rem;
  border-bottom: 1px solid var(--vib-border);
  background: transparent;
}

.vib-card__header h2,
.vib-card__header h3,
.vib-form-section__header h2,
.vib-form-section__header h3 {
  margin: 0;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
}

.vib-card__header p,
.vib-form-section__header p {
  margin: 0.4rem 0 0;
  color: var(--vib-text-secondary);
  font-size: 0.82rem;
  line-height: 1.35;
}

.vib-card__body,
.vib-form-section__body {
  padding: 1.15rem;
}

.vib-repeatable__header,
.vib-permission-group__header {
  padding: 1rem 1.15rem;
  border-bottom: 1px solid var(--vib-border);
}

.vib-data-toolbar {
  display: grid;
  grid-template-columns: minmax(16rem, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.15rem;
  border-bottom: 1px solid var(--vib-border);
  background: transparent;
}

.vib-data-toolbar--compact { padding-block: 0.8rem; }
.vib-data-toolbar__search { width: 100%; min-width: 0; max-width: 34rem; }
.vib-data-toolbar__actions,
.vib-data-toolbar__group {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 0.55rem;
}
.vib-data-toolbar__actions > *,
.vib-data-toolbar__group > * { flex: 0 0 auto; }
.vib-data-toolbar .vib-toolbar-select { width: auto; min-width: 12rem; }

.vib-search-field {
  position: relative;
  display: block;
  width: 100%;
}
.vib-search-field .vib-icon {
  position: absolute;
  z-index: 1;
  left: 0.78rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--vib-neutral-500);
  pointer-events: none;
}
.vib-search-field .vib-input { padding-left: 2.45rem; }

.vib-system-fields {
  border: 1px solid var(--vib-border);
  border-radius: var(--vib-radius-md);
  background: var(--vib-white);
}
.vib-system-fields > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.15rem;
  cursor: pointer;
  color: var(--vib-text-primary);
  font-weight: 500;
  list-style: none;
}
.vib-system-fields > summary::-webkit-details-marker { display: none; }
.vib-system-fields__body { padding: 1.15rem; border-top: 1px solid var(--vib-border); }
.vib-table__text { min-width: 0; display: grid; gap: 0.12rem; }

@media (max-width: 64rem) {
  .vib-data-toolbar { grid-template-columns: 1fr; }
  .vib-data-toolbar__search { max-width: none; }
  .vib-data-toolbar__actions,
  .vib-data-toolbar__group { justify-content: flex-start; overflow-x: auto; padding-bottom: 0.2rem; }
}


/* Responsive layout behavior */
@media (max-width: 64rem) {
  .vib-grid--sidebar { grid-template-columns: 1fr; }
}
@media (max-width: 30rem) {
  .vib-card__header, .vib-form-section__header { align-items: flex-start; flex-direction: column; }
}

/* ==========================================================================
   Connected creation flows and media inputs
   ========================================================================== */
.vib-image-upload {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  align-items: center;
  gap: 1.25rem;
  width: 100%;
  max-width: 52rem;
}

.vib-image-upload--avatar,
.vib-image-upload--square {
  grid-template-columns: 8rem minmax(0, 1fr);
}

.vib-image-upload--landscape,
.vib-image-upload--login {
  grid-template-columns: 18rem minmax(0, 1fr);
  align-items: start;
  max-width: none;
}

.vib-image-upload__preview {
  width: 8rem;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--vib-border);
  border-radius: var(--vib-radius-pill);
  background: var(--vib-neutral-50);
}

.vib-image-upload__preview--square,
.vib-image-upload__preview--logo {
  width: 8rem;
  aspect-ratio: 1;
  border-radius: var(--vib-radius-md);
}

.vib-image-upload__preview--landscape {
  width: 18rem;
  aspect-ratio: 16 / 9;
  border-radius: var(--vib-radius-md);
}

.vib-image-upload__preview img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: inherit;
}

.vib-image-upload__preview--square img,
.vib-image-upload__preview--logo img {
  object-fit: contain;
  padding: 0.6rem;
}

.vib-image-upload__preview--landscape img {
  object-fit: cover;
  padding: 0;
}

.vib-image-upload__controls {
  min-width: 0;
  padding-top: 0.1rem;
}

.vib-image-upload__controls .vib-input[type="file"] {
  width: 100%;
}

.vib-color-input { width: 7rem; min-height: 2.75rem; padding: 0.25rem; }

.vib-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.85rem;
}

.vib-choice-card {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid var(--vib-border);
  border-radius: var(--vib-radius-md);
  color: var(--vib-text-primary);
  background: var(--vib-white);
  cursor: pointer;
}

.vib-choice-card:has(input:checked),
.vib-choice-card:hover {
  background: var(--vib-primary-50);
}

.vib-choice-card input { margin-top: 0.15rem; }
.vib-choice-card span { min-width: 0; }
.vib-choice-card small,
.vib-choice-card .vib-table__secondary { display: block; margin-top: 0.25rem; }
.vib-choice-card--link { text-decoration: none; }

.vib-candidate-result-list {
  display: grid;
  gap: 0.75rem;
}

.vib-candidate-result {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.85rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--vib-border);
  border-radius: var(--vib-radius-md);
  background: var(--vib-white);
  cursor: pointer;
}

.vib-candidate-result:hover,
.vib-candidate-result:has(input:checked) {
  border-color: var(--vib-primary-200);
  background: var(--vib-primary-50);
}

.vib-candidate-result > input {
  margin: 0;
}

.vib-candidate-result__copy {
  min-width: 0;
  display: grid;
  gap: 0.15rem;
}

.vib-candidate-result__copy strong,
.vib-candidate-result__copy span,
.vib-candidate-result__copy small {
  overflow-wrap: anywhere;
}

.vib-candidate-result__copy span,
.vib-candidate-result__copy small {
  color: var(--vib-text-muted);
}

.vib-search-action {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.65rem;
}

.vib-account-result,
.vib-course-lookup-result {
  display: flex;
  margin-top: var(--vib-space-4);
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem;
  border: 1px solid var(--vib-primary-200);
  border-radius: var(--vib-radius-md);
  background: var(--vib-primary-50);
}

.vib-account-result > div,
.vib-course-lookup-result > div { min-width: 0; flex: 1; }
.vib-account-result .vib-badge,
.vib-course-lookup-result .vib-badge { margin-left: auto; }

.vib-empty-state--compact { min-height: 0; padding: 1.5rem; }
.vib-reveal-panel { display: none; }
.vib-reveal-panel.is-active { display: block; }

.vib-table-thumb {
  width: 3rem;
  height: 2.2rem;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: var(--vib-radius-sm);
  background: var(--vib-neutral-100);
}

.vib-table-thumb--lg { width: 5rem; height: 3.5rem; }
.vib-table-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; }

.vib-assessment-editor + .vib-assessment-editor { margin-top: 1rem; }
.vib-question-card { border: 1px solid var(--vib-border); background: var(--vib-white); }
.vib-question-card__header > div:first-child { min-width: 0; display: grid; gap: 0.15rem; }

.vib-step:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

@media (max-width: 42rem) {
  .vib-image-upload { grid-template-columns: 1fr; }
  .vib-image-upload__preview,
  .vib-image-upload__preview--square,
  .vib-image-upload__preview--logo,
  .vib-image-upload__preview--favicon { width: min(100%, 8rem); }
  .vib-image-upload__preview--landscape,
  .vib-image-upload__preview--login { width: min(100%, 18rem); }
  .vib-candidate-result {
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: start;
  }
  .vib-candidate-result > .vib-badge {
    grid-column: 3;
    justify-self: start;
  }
  .vib-search-action { grid-template-columns: 1fr; }
  .vib-search-action .vib-button { width: 100%; }
  .vib-account-result,
  .vib-course-lookup-result { align-items: flex-start; flex-wrap: wrap; }
  .vib-account-result .vib-badge,
  .vib-course-lookup-result .vib-badge { margin-left: 0; }
}


/* ==========================================================================
   Filter dialogs and identity media
   ========================================================================== */
.vib-filter-modal__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.vib-filter-modal__grid .vib-form-field--full {
  grid-column: 1 / -1;
}

.vib-avatar--institution,
.vib-avatar--institution img {
  border-radius: var(--vib-radius-pill);
}

.vib-avatar--course,
.vib-avatar--course img {
  border-radius: var(--vib-radius-sm);
}

@media (max-width: 40rem) {
  .vib-filter-modal__grid { grid-template-columns: 1fr; }
  .vib-filter-modal__grid .vib-form-field--full { grid-column: auto; }
  .vib-toast-region {
    top: 0.75rem;
    right: 0.75rem;
    width: calc(100vw - 1.5rem);
  }
}


/* ==========================================================================
   Course catalog and embedded table shells
   ========================================================================== */
.vib-catalog-admin {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: var(--vib-space-4);
  align-items: start;
}

.vib-catalog-admin__navigation {
  overflow: hidden;
}

.vib-catalog-navigation {
  display: grid;
}

.vib-catalog-navigation__item {
  display: grid;
  gap: 0.2rem;
  padding: 1rem 1.15rem;
  border-top: 1px solid var(--vib-border);
  border-left: 3px solid transparent;
  color: var(--vib-text-primary);
  text-decoration: none;
}

.vib-catalog-navigation__item:first-child {
  border-top: 0;
}

.vib-catalog-navigation__item span {
  color: var(--vib-text-muted);
  font-size: 0.85rem;
  line-height: 1.4;
}

.vib-catalog-navigation__item:hover,
.vib-catalog-navigation__item:focus-visible {
  background: var(--vib-neutral-50);
  color: var(--vib-primary-700);
}

.vib-catalog-navigation__item.is-active {
  border-left-color: var(--vib-primary-500);
  background: var(--vib-primary-50);
  color: var(--vib-primary-700);
}

.vib-catalog-admin__content {
  min-width: 0;
  display: grid;
  gap: var(--vib-space-4);
}

@media (max-width: 56rem) {
  .vib-catalog-admin {
    grid-template-columns: 1fr;
  }

  .vib-catalog-navigation {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .vib-catalog-navigation__item,
  .vib-catalog-navigation__item:first-child {
    border-top: 1px solid var(--vib-border);
    border-left: 0;
    border-bottom: 3px solid transparent;
  }

  .vib-catalog-navigation__item.is-active {
    border-left-color: transparent;
    border-bottom-color: var(--vib-primary-500);
  }
}

@media (max-width: 36rem) {
  .vib-catalog-navigation {
    grid-template-columns: 1fr;
  }

  .vib-catalog-navigation__item,
  .vib-catalog-navigation__item:first-child {
    border-top: 1px solid var(--vib-border);
    border-bottom: 0;
    border-left: 3px solid transparent;
  }

  .vib-catalog-navigation__item.is-active {
    border-left-color: var(--vib-primary-500);
    border-bottom-color: transparent;
  }
}
.vib-table-panel {
  border: 1px solid var(--vib-border);
  border-radius: var(--vib-radius-md);
  background: var(--vib-white);
  overflow: hidden;
}

.vib-table-panel .vib-data-toolbar,
.vib-table-panel .vib-table-footer {
  border-color: var(--vib-border);
}

.vib-table-panel .vib-table-wrap {
  border-radius: 0;
}

.vib-course-grid--catalog .vib-course-card__content,
.vib-course-grid--catalog .vib-course-card__footer {
  display: grid;
  gap: 0.7rem;
}

.vib-course-grid--catalog .vib-course-card__footer {
  align-content: end;
}

.vib-course-grid--catalog .vib-course-card__title {
  margin: 0;
}

.vib-catalog-shell {
  border: 1px solid var(--vib-border);
  box-shadow: none;
  border-radius: var(--vib-radius-md);
  background: var(--vib-white);
  overflow: hidden;
}

.vib-catalog-shell__body {
  padding: 1.15rem;
  background: var(--vib-white);
}

.vib-catalog-shell__footer {
  border-top: 1px solid var(--vib-border);
}

.vib-course-grid--catalog {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 0;
}

.vib-course-grid--catalog .vib-course-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0.9rem;
  border-radius: var(--vib-radius-md);
}

.vib-course-grid--catalog .vib-course-card__media {
  position: relative;
  border-radius: calc(var(--vib-radius-md) - 0.2rem);
  overflow: hidden;
  background: var(--vib-neutral-100);
}

.vib-course-grid--catalog .vib-course-card__media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  object-fit: cover;
}

.vib-course-grid--catalog .vib-course-card__body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.95rem 0.1rem 0.1rem;
}

.vib-course-grid--catalog .vib-course-card__top,
.vib-course-grid--catalog .vib-course-card__bottom {
  display: grid;
  gap: 0.7rem;
}

.vib-course-grid--catalog .vib-course-card__labels {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.vib-course-grid--catalog .vib-course-card__eyebrow {
  color: var(--vib-text-secondary);
  font-size: 0.84rem;
  line-height: 1.3;
}

.vib-course-grid--catalog .vib-course-card__body h2 {
  margin: 0;
  color: var(--vib-text-primary);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.3;
}

.vib-course-grid--catalog .vib-course-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  color: var(--vib-text-secondary);
  font-size: 0.82rem;
}

.vib-course-grid--catalog .vib-course-card__bottom .vib-button {
  align-self: flex-start;
}

@media (max-width: 78rem) {
  .vib-course-grid--catalog {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 48rem) {
  .vib-catalog-shell__body {
    padding: 0.85rem;
  }

  .vib-course-grid--catalog {
    grid-template-columns: 1fr;
  }
}

/*==================================================================================================
  TENANT ADMINISTRATION AND CAPABILITY CONFIGURATION
==================================================================================================*/
.vib-inline--actions {
  justify-content: flex-end;
  flex-wrap: wrap;
}

.vib-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--vib-text-secondary);
  font-size: 0.84rem;
}

.vib-metric-card {
  display: grid;
  align-content: start;
  gap: 0.45rem;
  min-width: 0;
  padding: 1.1rem;
  border: 1px solid var(--vib-border);
  border-radius: var(--vib-radius-md);
  background: var(--vib-white);
}

.vib-metric-card__label {
  color: var(--vib-text-secondary);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.vib-metric-card__value {
  color: var(--vib-text-primary);
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1;
}

.vib-metric-card__detail {
  color: var(--vib-text-muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.vib-validation-summary:empty {
  display: none;
}

.vib-validation-summary:not(:empty) {
  margin-bottom: var(--vib-space-4);
  padding: 0.85rem 1rem;
  border: 1px solid var(--vib-danger-200);
  border-radius: var(--vib-radius-md);
  background: var(--vib-danger-100);
  color: var(--vib-danger-700);
}

.vib-validation-summary ul {
  margin: 0;
  padding-left: 1.15rem;
}

.vib-capability-list {
  display: grid;
  gap: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.vib-capability-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(24rem, 0.9fr);
  gap: 1.25rem;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid var(--vib-border);
}

.vib-capability-item:last-child {
  border-bottom: 0;
}

.vib-capability-item__content {
  min-width: 0;
}

.vib-capability-item__content p {
  margin: 0.5rem 0 0.35rem;
  color: var(--vib-text-secondary);
  font-size: 0.86rem;
  line-height: 1.5;
}

.vib-capability-item__title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.vib-capability-item__title-row h3 {
  margin: 0;
  color: var(--vib-text-primary);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.35;
}

.vib-capability-item__title-row code {
  display: inline-block;
  margin-top: 0.2rem;
  color: var(--vib-text-muted);
  font-size: 0.72rem;
}

.vib-capability-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.vib-capability-options .vib-choice-card {
  width: 100%;
  min-width: 0;
  min-height: 4.35rem;
  padding: 0.75rem;
}

.vib-capability-options .vib-choice-card strong {
  display: block;
  color: var(--vib-text-primary);
  font-size: 0.82rem;
  font-weight: 600;
}

.vib-capability-options .vib-choice-card small {
  color: var(--vib-text-muted);
  font-size: 0.72rem;
  line-height: 1.35;
}

@media (max-width: 70rem) {
  .vib-capability-item {
    grid-template-columns: 1fr;
  }

  .vib-capability-options {
    max-width: 42rem;
  }
}

@media (max-width: 42rem) {
  .vib-inline--actions {
    justify-content: flex-start;
  }

  .vib-capability-options {
    grid-template-columns: 1fr;
  }

  .vib-capability-item__title-row {
    align-items: flex-start;
    flex-direction: column;
  }
}

.vib-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.vib-chip {
  display: inline-flex;
  align-items: center;
  min-height: 1.8rem;
  padding: 0.3rem 0.55rem;
  border: 1px solid var(--vib-border);
  border-radius: var(--vib-radius-sm);
  background: var(--vib-neutral-50);
  color: var(--vib-text-secondary);
  font-size: 0.72rem;
}

/* ==========================================================================
   Identity and authentication
   ========================================================================== */
.vib-button--full {
  width: 100%;
  justify-content: center;
}

.vib-auth__form--wide {
  width: min(36rem, 100%);
}

.vib-auth__brand {
  display: inline-block;
}

.vib-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vib-space-3);
}

.vib-label-row a {
  color: var(--vib-primary-700);
  font-size: 0.78rem;
  font-weight: 600;
}

.vib-form-hint {
  margin: 0;
  color: var(--vib-text-muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

.vib-field-validation {
  display: block;
  min-height: 0;
  margin-top: 0.3rem;
  color: var(--vib-danger-700);
  font-size: 0.75rem;
  font-weight: 500;
}

.vib-field-validation:empty {
  display: none;
}

.vib-validation-summary.validation-summary-valid {
  display: none;
}

.vib-check--start {
  align-items: flex-start;
}

.vib-membership-list {
  display: grid;
  gap: 0.75rem;
}

.vib-membership-option {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: flex-start;
  gap: 0.8rem;
  padding: 1rem;
  border: 1px solid var(--vib-border);
  border-radius: var(--vib-radius-md);
  background: var(--vib-white);
  cursor: pointer;
}

.vib-membership-option:hover,
.vib-membership-option:has(input:checked) {
  border-color: var(--vib-primary-500);
  background: var(--vib-primary-50);
}

.vib-membership-option input {
  margin-top: 0.25rem;
  accent-color: var(--vib-primary-700);
}

.vib-membership-option__content {
  min-width: 0;
  display: grid;
  gap: 0.2rem;
  color: var(--vib-text-secondary);
  font-size: 0.82rem;
}

.vib-membership-option__title {
  color: var(--vib-text-primary);
  font-size: 0.95rem;
  font-weight: 600;
}

.vib-membership-option__title-row {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.vib-membership-option__title-row .vib-badge {
  flex: 0 0 auto;
}

.vib-membership-option small {
  color: var(--vib-text-muted);
}

.vib-auth-message {
  display: grid;
  justify-items: start;
  gap: var(--vib-space-4);
}

.vib-auth-message h1,
.vib-auth-message p {
  margin: 0;
}

.vib-auth-message__icon {
  width: 3.5rem;
  height: 3.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 1.35rem;
}

.vib-auth-message__icon.is-success {
  color: var(--vib-success-700);
  background: var(--vib-success-100);
}

.vib-auth-message__icon.is-danger {
  color: var(--vib-danger-700);
  background: var(--vib-danger-100);
}

.vib-dropdown__form {
  margin: 0;
}

.vib-dropdown__form .vib-dropdown__item {
  width: 100%;
  border: 0;
  text-align: left;
}

.vib-form-card--narrow {
  width: min(42rem, 100%);
}

.vib-identity-summary {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.vib-identity-summary > div {
  min-width: 0;
  display: grid;
  gap: 0.25rem;
}

.vib-identity-summary .vib-bold {
  color: var(--vib-text-primary);
  font-size: 1rem;
}

.vib-identity-summary > div > span:not(.vib-bold) {
  color: var(--vib-text-muted);
  font-size: 0.82rem;
}

.vib-definition-list {
  display: grid;
  gap: 0;
  margin: 0;
}

.vib-definition-list > div {
  display: grid;
  grid-template-columns: minmax(9rem, 0.7fr) minmax(0, 1fr);
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--vib-border);
}

.vib-definition-list > div:last-child {
  border-bottom: 0;
}

.vib-definition-list dt {
  color: var(--vib-text-muted);
  font-size: 0.78rem;
}

.vib-definition-list dd {
  margin: 0;
  color: var(--vib-text-primary);
  font-weight: 500;
}


.vib-code-block {
  max-height: 18rem;
  overflow: auto;
  margin: 0;
  padding: 1rem;
  border: 1px solid var(--vib-border);
  border-radius: var(--vib-radius-md);
  background: var(--vib-neutral-50);
  color: var(--vib-text-primary);
  font: 0.78rem/1.55 ui-monospace, SFMono-Regular, Consolas, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 42rem) {
  .vib-label-row {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--vib-space-1);
  }

  .vib-identity-summary {
    align-items: flex-start;
  }

  .vib-definition-list > div {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }
}

/* ==========================================================================
   User administration and invitations
   ========================================================================== */
.vib-form-fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.vib-form-fieldset > legend {
  margin-bottom: var(--vib-space-3);
  color: var(--vib-text-primary);
  font-size: 0.9rem;
  font-weight: 600;
}

.vib-person-summary {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
}

.vib-person-summary h2,
.vib-person-summary p {
  margin: 0;
}

.vib-person-summary p {
  margin-top: 0.2rem;
  color: var(--vib-text-muted);
  font-size: 0.8rem;
}

.vib-auth-summary {
  display: grid;
  gap: 0;
  margin-bottom: var(--vib-space-4);
  border: 1px solid var(--vib-border);
  border-radius: var(--vib-radius-md);
  background: var(--vib-white);
}

.vib-auth-summary > div {
  display: grid;
  gap: 0.25rem;
  padding: 0.75rem 0.9rem;
  border-bottom: 1px solid var(--vib-border);
}

.vib-auth-summary > div:last-child {
  border-bottom: 0;
}

.vib-auth-summary span {
  color: var(--vib-text-muted);
  font-size: 0.75rem;
}

.vib-auth-summary strong {
  color: var(--vib-text-primary);
  font-size: 0.88rem;
  font-weight: 500;
}

.vib-metric-card__value--date {
  font-size: 1.05rem;
  line-height: 1.25;
}

/* ==========================================================================
   Tenant branding administration
   ========================================================================== */
.vib-brand-reference {
  color: var(--vib-text-muted);
  font-size: 0.72rem;
  line-height: 1.35;
}

.vib-brand-reference--co-branded {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.vib-brand-reference--co-branded img {
  width: 1.25rem;
  height: 1.25rem;
  object-fit: contain;
}

.vib-branding-color-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--vib-space-5);
}

.vib-color-control {
  display: flex;
  align-items: center;
  gap: var(--vib-space-3);
}

.vib-color-control output {
  min-width: 5.5rem;
  color: var(--vib-text-secondary);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.82rem;
}

.vib-branding-assets {
  display: grid;
  gap: var(--vib-space-5);
}

.vib-branding-asset {
  padding-bottom: var(--vib-space-5);
  border-bottom: 1px solid var(--vib-border);
}

.vib-branding-asset:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.vib-image-upload__preview--favicon {
  width: 6rem;
  aspect-ratio: 1;
  border-radius: var(--vib-radius-md);
}

.vib-image-upload__preview--favicon img {
  object-fit: contain;
  padding: 0.7rem;
}

.vib-image-upload__preview--login {
  width: 18rem;
  aspect-ratio: 16 / 10;
  border-radius: var(--vib-radius-md);
}

.vib-image-upload__preview--login img {
  object-fit: cover;
}

.vib-choice-card.is-disabled {
  cursor: not-allowed;
  opacity: 0.6;
  background: var(--vib-neutral-50);
}

.is-hidden {
  display: none !important;
}

@media (max-width: 50rem) {
  .vib-branding-color-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Files and media administration
   ========================================================================== */
.vib-media-cell {
  display: flex;
  align-items: center;
  gap: var(--vib-space-3);
  min-width: 16rem;
}

.vib-media-cell__content {
  min-width: 0;
}

.vib-media-thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 2.75rem;
  width: 2.75rem;
  height: 2.75rem;
  overflow: hidden;
  border: 1px solid var(--vib-border);
  border-radius: var(--vib-radius-md);
  background: var(--vib-neutral-50);
  color: var(--vib-text-muted);
}

.vib-media-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vib-media-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--vib-space-3);
  min-height: 18rem;
  padding: var(--vib-space-4);
  overflow: hidden;
  border: 1px solid var(--vib-border);
  border-radius: var(--vib-radius-md);
  background: var(--vib-neutral-50);
  color: var(--vib-text-muted);
  text-align: center;
}

.vib-media-preview img {
  display: block;
  max-width: 100%;
  max-height: 26rem;
  object-fit: contain;
}

.vib-media-preview > .vib-icon {
  width: 2.5rem;
  height: 2.5rem;
}

.vib-card--danger-zone {
  border-color: var(--vib-danger-200);
}

.vib-card--danger-zone .vib-card__header {
  background: var(--vib-danger-100);
}

.vib-align-start {
  align-items: start;
}

.vib-break-word {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.vib-font-mono {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.82rem;
}

.vib-table__actions form {
  display: inline-flex;
  margin: 0;
}

.vib-pre-line {
  white-space: pre-line;
}


/* Course Builder */
.vib-builder{display:grid;gap:1.5rem}.vib-stepper--course-builder .vib-step{flex:1 1 0;min-width:11rem}.vib-builder-toolbar{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1rem}.vib-builder-toolbar h2{margin:0 0 .25rem}.vib-builder-toolbar p{margin:0;color:var(--vib-text-muted)}.vib-curriculum{display:grid;gap:1rem}.vib-curriculum-module{border:1px solid var(--vib-border);border-radius:12px;background:var(--vib-surface);overflow:hidden}.vib-curriculum-module__header{display:flex;justify-content:space-between;gap:1rem;padding:1rem 1.25rem;border-bottom:1px solid var(--vib-border);background:var(--vib-neutral-50)}.vib-curriculum-module__header h3{margin:.5rem 0 .25rem}.vib-curriculum-module__header p{margin:0;color:var(--vib-text-muted)}.vib-curriculum-module__body{display:grid;gap:.75rem;padding:1rem}.vib-lesson-card{display:grid;grid-template-columns:1fr auto;gap:1rem;padding:1rem;border:1px solid var(--vib-border);border-radius:10px}.vib-lesson-card__main{display:flex;gap:.75rem}.vib-lesson-card__order{display:grid;place-items:center;flex:0 0 2rem;height:2rem;border-radius:50%;background:var(--vib-primary-100);color:var(--vib-primary-700);font-weight:700}.vib-lesson-card h4{margin:0 0 .25rem}.vib-lesson-card p{margin:0 0 .5rem;color:var(--vib-text-muted)}.vib-resource-list{grid-column:1/-1;display:grid;gap:.5rem;margin-left:2.75rem}.vib-resource-item{display:flex;align-items:center;gap:.75rem;padding:.65rem .75rem;border:1px solid var(--vib-border);border-radius:8px;background:var(--vib-neutral-50)}.vib-resource-item__icon{display:grid;place-items:center;width:2rem;height:2rem;border-radius:6px;background:var(--vib-primary-100);color:var(--vib-primary-700)}.vib-resource-item__copy{display:grid;gap:.1rem;flex:1}.vib-resource-item__title{font-size:.85rem;color:var(--vib-text);font-weight:600}.vib-resource-item__meta{font-size:.75rem;color:var(--vib-text-muted)}@media(max-width:768px){.vib-stepper--course-builder .vib-step{flex:0 0 13rem}.vib-builder-toolbar,.vib-curriculum-module__header{align-items:stretch;flex-direction:column}.vib-lesson-card{grid-template-columns:1fr}.vib-resource-list{margin-left:0}}

.vib-builder-review-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}

@media (max-width: 900px) {
  .vib-builder-review-grid {
    grid-template-columns: 1fr;
  }
}

/* Module 22: evaluation builder */
.vib-option-editor{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.75rem;align-items:center;margin-bottom:.75rem}.vib-option-editor__fields{display:grid;gap:.5rem}.vib-answer-option>span:last-child{display:grid;gap:.2rem}.vib-answer-option small{color:var(--vib-text-muted);font-weight:400}.vib-option-editor>input[type=radio],.vib-option-editor>input[type=checkbox]{width:1.1rem;height:1.1rem;accent-color:var(--vib-primary-500)}.vib-section-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin:1.5rem 0 1rem}.vib-section-heading h3,.vib-section-heading p{margin:0}.vib-section-heading p{color:var(--vib-text-muted);margin-top:.25rem}.vib-question-card__identity{display:flex;align-items:flex-start;gap:.75rem}.vib-question-card__identity h3,.vib-question-card__identity p{margin:0}.vib-question-card__identity p{color:var(--vib-text-muted);margin-top:.25rem}.vib-question-card__number{display:inline-flex;align-items:center;justify-content:center;flex:0 0 2rem;width:2rem;height:2rem;border:1px solid var(--vib-border);border-radius:50%;font-weight:600}.vib-answer-options{display:grid;gap:.5rem}.vib-answer-option{display:flex;align-items:center;gap:.5rem;padding:.75rem;border:1px solid var(--vib-border);border-radius:var(--vib-radius-sm)}.vib-answer-option.is-correct{border-color:var(--vib-success-700);background:var(--vib-success-100)}.vib-settings-list{display:grid;gap:1rem}.vib-button--block{width:100%;justify-content:center}.vib-stack{display:grid;gap:.75rem}.vib-details-hero{display:flex;justify-content:space-between;align-items:flex-start;gap:1.5rem;margin-bottom:1.5rem}.vib-details-hero p{max-width:52rem}.vib-code{padding:0;background:transparent;color:var(--vib-primary-500);font-size:.78rem}
@media(max-width:767px){.vib-details-hero{flex-direction:column}.vib-section-heading{flex-direction:column}.vib-option-editor{grid-template-columns:auto minmax(0,1fr) auto}}

/* Module 24: group schedules */
.vib-schedule-summary-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr);
  gap: 1rem;
  align-items: start;
  margin-bottom: 1.5rem;
}

.vib-schedule-rule-list {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}

.vib-schedule-rule {
  border: 1px solid var(--vib-border);
  border-radius: var(--vib-radius-lg);
  background: var(--vib-surface);
  overflow: hidden;
}

.vib-schedule-rule__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--vib-border);
  background: var(--vib-neutral-50);
}

.vib-schedule-rule__header h3,
.vib-schedule-rule__header p {
  margin: 0;
}

.vib-schedule-rule__header p {
  margin-top: 0.25rem;
  color: var(--vib-text-muted);
}

.vib-schedule-rule > .vib-form-grid {
  padding: 1.25rem;
}

@media (max-width: 900px) {
  .vib-schedule-summary-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .vib-schedule-rule__header {
    align-items: stretch;
  }
}


/* ==========================================================================
   Academia VIB 26.9.x - course detail alignment
   ========================================================================== */
.vib-detail-tabs {
  --vib-step-count: 5;
  margin-top: 1rem;
  margin-bottom: 0;
}

.vib-detail-tabs.vib-stepper--segmented .vib-step {
  min-width: 8.5rem;
  cursor: pointer;
}

.vib-detail-tabs.vib-stepper--segmented .vib-step[aria-selected="true"] {
  color: var(--vib-white);
  border-color: var(--vib-primary-500);
  background: var(--vib-primary-500);
}

.vib-detail-tabs.vib-stepper--segmented .vib-step[aria-selected="false"] {
  color: var(--vib-neutral-700);
  border-color: var(--vib-border);
  background: var(--vib-section-muted);
}

.vib-readonly-list {
  min-height: 2.65rem;
  height: auto;
  padding: 0.58rem 0.72rem;
  background: var(--vib-white);
}

.vib-readonly-list ul {
  margin: 0;
  padding-left: 1.2rem;
}

.vib-readonly-list li + li {
  margin-top: 0.28rem;
}

.vib-course-module__toggle > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 0.15rem;
}

.vib-course-module__toggle small {
  color: var(--vib-text-muted);
  font-size: 0.72rem;
  font-weight: 400;
  line-height: 1.35;
}

.vib-course-resources {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.55rem;
}

.vib-course-resource {
  display: grid;
  grid-template-columns: 1rem minmax(0, 1fr);
  gap: 0.45rem;
  align-items: start;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--vib-border);
  border-radius: var(--vib-radius-sm);
  background: var(--vib-section-muted);
}

.vib-course-resource .vib-icon {
  margin-top: 0.08rem;
  color: var(--vib-primary-500);
}

.vib-course-resource strong,
.vib-course-resource small {
  display: block;
}

.vib-course-resource strong {
  color: var(--vib-text-primary);
  font-size: 0.76rem;
  font-weight: 500;
}

.vib-course-resource small {
  margin-top: 0.08rem;
  color: var(--vib-text-muted);
  font-size: 0.68rem;
}

.vib-course-live-sessions {
  display: grid;
  gap: 0.4rem;
  margin-top: 0.6rem;
}

.vib-course-live-session {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--vib-border);
  border-radius: var(--vib-radius-sm);
  background: var(--vib-section-muted);
}

.vib-course-live-session__info {
  min-width: 0;
  display: grid;
  grid-template-columns: 1rem minmax(0, 1fr);
  gap: 0.45rem;
  align-items: start;
}

.vib-course-live-session__info > .vib-icon {
  margin-top: 0.08rem;
  color: var(--vib-primary-500);
}

.vib-course-live-session__info strong,
.vib-course-live-session__info small {
  display: block;
}

.vib-course-live-session__info strong {
  color: var(--vib-text-primary);
  font-size: 0.76rem;
  font-weight: 500;
}

.vib-course-live-session__info small {
  margin-top: 0.08rem;
  color: var(--vib-text-muted);
  font-size: 0.68rem;
}

@media (max-width: 640px) {
  .vib-course-live-session {
    align-items: stretch;
    flex-direction: column;
  }

  .vib-course-live-session .vib-button {
    width: 100%;
  }
}

.vib-course-outline .vib-card__body {
  padding: 1rem;
}

.vib-course-outline .vib-course-lesson {
  padding: 0.68rem 0.8rem;
}

.vib-course-outline .vib-course-lesson > div > span:first-child {
  color: var(--vib-text-primary);
  font-size: 0.8rem;
  font-weight: 500;
}

.vib-course-detail-main .vib-tab-panel {
  padding-top: 1rem;
}

.vib-course-detail-main .vib-card__body .vib-form-grid {
  gap: 1rem 1.15rem;
}

.vib-course-detail-main .vib-textarea[readonly],
.vib-course-detail-main .vib-input[readonly] {
  cursor: default;
  background: var(--vib-white);
}



/* ==========================================================================
   Academia VIB 26.9.3 - compact evaluation builder and course create layout
   ========================================================================== */
.vib-course-identity-grid {
  display: grid;
  grid-template-columns: minmax(17rem, 0.72fr) minmax(0, 1.45fr);
  gap: 1.25rem;
  align-items: start;
}

.vib-course-identity-cover .vib-image-upload__preview--landscape {
  aspect-ratio: 4 / 3;
  min-height: 0;
}

.vib-course-identity-fields {
  align-content: start;
}

[data-evaluation-builder] .vib-card__header {
  padding: 0.78rem 1rem;
}

[data-evaluation-builder] .vib-card__body {
  padding: 1rem;
}

[data-evaluation-builder] .vib-builder-toolbar--table {
  align-items: center;
  margin-bottom: 0.75rem;
}

[data-evaluation-builder] .vib-builder-toolbar--table h2 {
  font-size: 1rem;
  font-weight: 600;
}

[data-evaluation-builder] .vib-builder-toolbar--table p {
  font-size: 0.82rem;
}

.vib-evaluation-question-table {
  overflow: hidden;
  border: 1px solid var(--vib-border);
  border-radius: var(--vib-radius-md);
  background: var(--vib-white);
}

.vib-evaluation-question-table__head,
.vib-evaluation-question-row__main {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
}

.vib-evaluation-question-table__head {
  padding: 0.72rem 1rem;
  color: var(--vib-neutral-700);
  background: var(--vib-section-muted);
  border-bottom: 1px solid var(--vib-border);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.vib-evaluation-question-table__head span:last-child {
  text-align: right;
}

.vib-evaluation-question-row + .vib-evaluation-question-row {
  border-top: 1px solid var(--vib-border);
}

.vib-evaluation-question-row__main {
  padding: 0.78rem 1rem;
}

.vib-evaluation-question-row__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  border: 1px solid var(--vib-border);
  border-radius: 50%;
  color: var(--vib-neutral-700);
  font-size: 0.76rem;
  font-weight: 600;
}

.vib-evaluation-question-row__details {
  margin-left: 3.5rem;
  border-top: 1px solid var(--vib-border);
}

.vib-evaluation-answer-row {
  display: grid;
  grid-template-columns: 1.4rem minmax(0, 1fr);
  align-items: start;
  gap: 0.55rem;
  padding: 0.62rem 1rem;
  border-bottom: 1px solid var(--vib-border);
  font-size: 0.84rem;
}

.vib-evaluation-answer-row:last-child {
  border-bottom: 0;
}

.vib-evaluation-answer-row.is-correct {
  background: var(--vib-success-100);
}

.vib-evaluation-answer-row.is-manual {
  color: var(--vib-text-muted);
  background: var(--vib-neutral-50);
}

.vib-evaluation-question-row__explanation {
  padding: 0.58rem 1rem;
  background: var(--vib-neutral-50);
}

.vib-evaluation-review-table {
  min-width: 54rem;
}

.vib-evaluation-review-table td {
  vertical-align: top;
}

.vib-question-modal__dialog {
  max-width: 44rem;
}

.vib-question-modal__dialog .vib-modal__header,
.vib-question-modal__dialog .vib-modal__footer {
  padding: 0.78rem 1rem;
}

.vib-question-modal__dialog .vib-modal__body {
  padding: 1rem;
}

.vib-question-modal__dialog .vib-textarea {
  min-height: 4.75rem;
}

.vib-question-modal__dialog .vib-section-heading {
  margin: 1rem 0 0.7rem;
}

.vib-question-modal__dialog .vib-option-editor {
  gap: 0.55rem;
  margin-bottom: 0.55rem;
}

.vib-question-modal__dialog .vib-option-editor__fields {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.55rem;
}

[data-evaluation-builder] [data-evaluation-approval-hint] {
  margin-top: -0.35rem;
  padding-left: 3.1rem;
}

@media (max-width: 900px) {
  .vib-course-identity-grid {
    grid-template-columns: 1fr;
  }

  .vib-question-modal__dialog .vib-option-editor__fields {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .vib-evaluation-question-table__head {
    display: none;
  }

  .vib-evaluation-question-row__main {
    grid-template-columns: 2.2rem minmax(0, 1fr);
  }

  .vib-evaluation-question-row__main .vib-table__actions {
    grid-column: 2;
    justify-content: flex-start;
  }

  .vib-evaluation-question-row__details {
    margin-left: 0;
  }
}

.vib-p-0 { padding: 0 !important; }

/* ==========================================================================
   Academia VIB 26.9.4 - evaluation table pattern and detail tab behavior
   ========================================================================== */
.vib-evaluation-question-table-wrap,
.vib-evaluation-detail-question-table-wrap {
  border: 1px solid var(--vib-border);
  border-radius: var(--vib-radius-md);
}

.vib-evaluation-question-table,
.vib-evaluation-detail-question-table {
  min-width: 44rem;
}

.vib-evaluation-question-table th:last-child,
.vib-evaluation-question-table td:last-child,
.vib-evaluation-question-actions-heading {
  width: 10.5rem;
  text-align: right;
}

.vib-evaluation-question-table td:first-child,
.vib-evaluation-detail-question-table td:first-child {
  white-space: normal;
}

.vib-evaluation-question-heading {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
}

.vib-evaluation-question-row__number {
  flex: 0 0 1.7rem;
  width: 1.7rem;
  height: 1.7rem;
  margin-top: 0.02rem;
  font-size: 0.72rem;
}

.vib-evaluation-question-actions {
  white-space: nowrap;
}

.vib-evaluation-question-details-row:hover,
.vib-evaluation-question-details-row:hover td {
  background: var(--vib-white);
}

.vib-evaluation-question-details-cell {
  padding: 0 !important;
  white-space: normal !important;
}

.vib-evaluation-question-row__details {
  margin-left: 0;
  border-top: 0;
}

.vib-evaluation-answer-row {
  grid-template-columns: 1.2rem minmax(0, 1fr);
  gap: 0.5rem;
  padding: 0.58rem 0.75rem;
  font-size: 0.84rem;
}

.vib-evaluation-answer-row .vib-icon {
  margin-top: 0.02rem;
}

.vib-evaluation-answer-row.is-correct {
  background: var(--vib-success-100);
}

.vib-evaluation-question-row__explanation {
  padding: 0.55rem 0.75rem;
  border-top: 1px solid var(--vib-border);
  background: var(--vib-neutral-50);
}

.vib-evaluation-detail-question-table th:last-child,
.vib-evaluation-detail-question-table td:last-child {
  width: 13rem;
}

@media (max-width: 640px) {
  .vib-evaluation-question-table,
  .vib-evaluation-detail-question-table {
    min-width: 38rem;
  }
}

/* ==========================================================================
   Academia VIB 26.10 - course media, compact sidebar and group refinements
   ========================================================================== */
.vib-course-identity-grid {
  grid-template-columns: minmax(24rem, 0.95fr) minmax(0, 1.45fr);
  gap: 1.5rem;
}

.vib-course-cover-field {
  min-width: 0;
}

.vib-course-cover-picker {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--vib-border);
  border-radius: var(--vib-radius-md);
  background: var(--vib-neutral-100);
  color: var(--vib-text-muted);
  cursor: pointer;
}

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

.vib-course-cover-picker__empty {
  display: grid;
  place-items: center;
  gap: 0.45rem;
  text-align: center;
  padding: 1.25rem;
}

.vib-course-cover-picker__empty .fi {
  font-size: 1.75rem;
  color: var(--vib-primary-500);
}

.vib-course-cover-picker__empty strong {
  color: var(--vib-text-primary);
  font-size: 0.84rem;
  font-weight: 600;
}

.vib-course-cover-picker__empty small {
  color: var(--vib-text-muted);
  font-size: 0.72rem;
}

.vib-course-cover-picker__replace {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 2.45rem;
  padding: 0.55rem 0.75rem;
  background: rgba(25, 35, 42, 0.74);
  color: var(--vib-white);
  font-size: 0.76rem;
  font-weight: 600;
}

.vib-course-cover-picker:not(.has-image) .vib-course-cover-picker__replace {
  display: none;
}

.vib-course-cover-file {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.45rem;
  align-items: baseline;
  margin-top: 0.6rem;
  font-size: 0.74rem;
}

.vib-course-cover-file__label {
  color: var(--vib-text-muted);
}

.vib-course-cover-file strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--vib-text-primary);
  font-weight: 500;
}

.vib-course-detail-layout {
  grid-template-columns: minmax(0, 1fr) minmax(25rem, 33rem);
}

.vib-question-modal__dialog {
  max-width: 50.25rem;
}

.vib-course-evaluations {
  display: grid;
  gap: 0;
  border: 1px solid var(--vib-border);
  border-radius: var(--vib-radius-md);
  overflow: hidden;
}

.vib-course-evaluation + .vib-course-evaluation {
  border-top: 1px solid var(--vib-border);
}

.vib-course-evaluation__toggle {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.72rem 0.8rem;
  border: 0;
  background: var(--vib-white);
  color: var(--vib-text-primary);
  text-align: left;
  cursor: pointer;
}

.vib-course-evaluation__toggle > span:first-child {
  min-width: 0;
  display: grid;
  gap: 0.12rem;
}

.vib-course-evaluation__toggle strong {
  font-size: 0.8rem;
  font-weight: 600;
}

.vib-course-evaluation__toggle small {
  color: var(--vib-text-muted);
  font-size: 0.7rem;
  font-weight: 400;
}

.vib-course-evaluation__body {
  display: none;
  padding: 0.68rem 0.8rem;
  border-top: 1px solid var(--vib-border);
  background: var(--vib-neutral-50);
}

.vib-course-evaluation.is-open .vib-course-evaluation__body {
  display: block;
}

.vib-course-evaluation__meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem 0.75rem;
  font-size: 0.72rem;
}

.vib-course-evaluation__meta span {
  color: var(--vib-text-muted);
}

.vib-course-evaluation__meta strong {
  color: var(--vib-text-primary);
  font-weight: 500;
}

.vib-group-review-table {
  min-width: 48rem;
}

.vib-group-review-table td {
  vertical-align: top;
}

[data-capacity-fields][hidden],
[data-capacity-rules][hidden] {
  display: none !important;
}

@media (max-width: 88rem) {
  .vib-course-detail-layout {
    grid-template-columns: minmax(0, 1fr) minmax(23rem, 29rem);
  }
}

@media (max-width: 900px) {
  .vib-course-identity-grid {
    grid-template-columns: 1fr;
  }
}


/* AVIB 26.10.2 refinements */
.vib-file-picker-row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.vib-instructor-candidate-card .vib-card__body{padding-top:.75rem;padding-bottom:.75rem}
.vib-instructor-candidate-card .vib-empty-state--compact{min-height:0;padding:.75rem 1rem}
.vib-instructor-candidate-card .vib-empty-state--compact h3{margin-top:.25rem;margin-bottom:.15rem}
.vib-instructor-candidate-card .vib-empty-state--compact p{margin:0}
.vib-form-fieldset--embedded{border:0;padding:0;margin:.5rem 0 0;min-width:0}
.vib-page-header__actions form{display:inline-flex;margin:0}

.vib-course-thumb--empty{background:var(--vib-neutral-100);border:1px solid var(--vib-border)}

/* ========================================================================== 
   Academia VIB 26.10.4 - Google Workspace keyless authentication alignment
   ========================================================================== */
.vib-google-workspace-tabs {
  --vib-step-count: 4;
  margin-top: 0;
  margin-bottom: 0;
}

.vib-google-workspace-tabs.vib-stepper--segmented .vib-step {
  min-width: 10rem;
}

.vib-google-status-table {
  margin-top: 0.15rem;
  border-top: 1px solid var(--vib-border);
  overflow-x: auto;
}

.vib-google-panel-message {
  padding: 1rem 1.15rem;
}

.vib-google-panel-message .vib-alert {
  margin: 0;
}

.vib-google-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.vib-google-section-heading h2 {
  margin: 0;
  color: var(--vib-text-primary);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.15;
}

.vib-google-section-heading p {
  margin: 0.3rem 0 0;
  color: var(--vib-text-secondary);
  font-size: 0.82rem;
  line-height: 1.35;
}

#google-tab-connection .vib-card,
#google-tab-organizers .vib-card,
#google-tab-status .vib-card {
  margin: 0;
}

#google-tab-organizers > .vib-alert,
#google-tab-sync > .vib-alert,
#google-tab-status > .vib-alert {
  margin-left: 0;
  margin-right: 0;
}

@media (max-width: 760px) {
  .vib-google-workspace-tabs.vib-stepper--segmented .vib-step {
    min-width: 8.75rem;
  }
}

/* ========================================================================== 
   Academia VIB 26.10.5 - canonical responsive detail layout
   ========================================================================== */
.vib-card__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.65rem;
  padding: 1rem 1.15rem;
  border-top: 1px solid var(--vib-border);
  background: var(--vib-white);
}

.vib-detail-layout,
.vib-course-detail-layout,
.vib-details-layout,
.vib-detail-layout-refined {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(20rem, 24rem);
  gap: 1.25rem;
  align-items: start;
}

.vib-detail-main,
.vib-detail-layout__main,
.vib-details-layout__main,
.vib-course-detail-main {
  min-width: 0;
}

.vib-detail-sidebar,
.vib-detail-layout__aside,
.vib-details-layout__aside,
.vib-course-detail-sidebar,
.vib-course-outline {
  min-width: 0;
  display: grid;
  gap: 1rem;
  align-content: start;
  position: sticky;
  top: calc(var(--vib-topbar-height) + 1rem);
}

.vib-detail-main,
.vib-content-stack,
.vib-detail-section-stack {
  display: grid;
  gap: 1rem;
}

.vib-detail-tabs {
  margin: 0;
}

.vib-detail-tabs.vib-stepper--segmented .vib-step {
  flex: 1 0 8.5rem;
  min-width: 8.5rem;
}

.vib-detail-tabs.vib-stepper--segmented .vib-step[aria-selected="false"]:hover {
  color: var(--vib-text-secondary);
  border-color: var(--vib-border);
  background: var(--vib-section-muted);
  box-shadow: none;
  transform: none;
}

.vib-detail-tabs .vib-step__number {
  flex: 0 0 auto;
}

.vib-detail-sidebar .vib-card,
.vib-detail-layout__aside .vib-card,
.vib-details-layout__aside .vib-card,
.vib-course-detail-sidebar .vib-card,
.vib-course-outline .vib-card {
  margin: 0;
}

.vib-detail-audit-grid,
.vib-detail-actions {
  display: grid;
  gap: 0.65rem;
}

.vib-detail-audit-grid .vib-form-field {
  min-width: 0;
}

.vib-detail-table-wrap {
  overflow-x: auto;
}

.vib-permission-summary-grid--compact {
  gap: 0.75rem;
}

.vib-permission-summary-grid--compact .vib-permission-summary-card {
  min-height: 0;
}

.vib-permission-summary-grid--compact .vib-permission-summary-card__header,
.vib-permission-summary-grid--compact .vib-permission-summary-card__body {
  padding: 0.8rem 0.9rem;
}

.vib-detail-empty-card .vib-card__body {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

@media (max-width: 72rem) {
  .vib-detail-layout,
  .vib-course-detail-layout,
  .vib-details-layout,
  .vib-detail-layout-refined {
    grid-template-columns: minmax(0, 1fr);
  }

  .vib-detail-sidebar,
  .vib-detail-layout__aside,
  .vib-details-layout__aside,
  .vib-course-detail-sidebar,
  .vib-course-outline {
    position: static;
    top: auto;
    order: 2;
  }
}

@media (max-width: 48rem) {
  .vib-card__footer {
    padding: 0.9rem;
    justify-content: stretch;
  }

  .vib-card__footer .vib-button {
    flex: 1 1 auto;
  }

  .vib-detail-tabs.vib-stepper--segmented {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 0.15rem;
  }

  .vib-detail-tabs.vib-stepper--segmented .vib-step {
    flex: 0 0 auto;
    min-width: 9rem;
  }
}

/* ========================================================================== 
   Academia VIB 26.10.6 - detail actions and entity audit history
   ========================================================================== */
.vib-modal__dialog--xl {
  width: min(96vw, 76rem);
  max-width: 76rem;
}

.vib-audit-history-modal .vib-modal__body {
  max-height: min(70vh, 46rem);
  overflow: auto;
}

.vib-audit-history-table {
  min-width: 64rem;
}

.vib-audit-history-table__detail {
  min-width: 24rem;
  white-space: normal;
}

.vib-audit-change-list {
  display: grid;
  gap: 0.35rem;
  margin: 0.55rem 0 0;
  padding: 0;
  list-style: none;
}

.vib-audit-change-list li {
  display: grid;
  grid-template-columns: minmax(8rem, 0.8fr) minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 0.45rem;
  align-items: start;
  padding-top: 0.35rem;
  border-top: 1px solid var(--vib-border);
  color: var(--vib-text-secondary);
  font-size: 0.82rem;
  line-height: 1.35;
}

.vib-audit-change-list strong {
  color: var(--vib-text-primary);
}

.vib-audit-change-arrow {
  color: var(--vib-text-tertiary);
}

.vib-detail-actions .vib-button,
.vib-detail-actions form,
.vib-detail-actions form .vib-button {
  width: 100%;
}

@media (max-width: 48rem) {
  .vib-audit-change-list li {
    grid-template-columns: 1fr;
  }

  .vib-audit-change-arrow {
    display: none;
  }
}


/* ========================================================================== 
   Academia VIB 26.10.7 - detail audit and canonical form action footer
   ========================================================================== */
.vib-audit-summary {
  display: grid;
  gap: 0;
}

.vib-audit-summary__row {
  display: grid;
  gap: 0.2rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--vib-border);
}

.vib-audit-summary__row:first-child {
  padding-top: 0;
}

.vib-audit-summary__row:last-of-type {
  border-bottom: 0;
}

.vib-audit-summary__label {
  color: var(--vib-text-muted);
  font-size: 0.75rem;
  font-weight: 500;
}

.vib-audit-summary__value {
  color: var(--vib-text);
  font-size: 0.9rem;
  line-height: 1.45;
}

.vib-audit-summary__action {
  margin-top: 0.35rem;
}

/* When a standard form ends with a card followed by Save/Cancel, join both surfaces visually. */
.vib-card:has(+ .vib-form-actions:not(.vib-builder-actions)) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.vib-card + .vib-form-actions:not(.vib-builder-actions) {
  margin-top: -1px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* Save/cancel rows must read as a contained footer, never as floating buttons. */
.vib-form-actions:not(.vib-builder-actions) {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.65rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--vib-border);
  border-radius: var(--vib-radius-md);
  background: var(--vib-white);
}

.vib-card__body > form > .vib-form-actions:not(.vib-builder-actions):last-child,
.vib-card__body form > .vib-form-actions:not(.vib-builder-actions):last-child {
  margin: 1.15rem -1.15rem -1.15rem;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  border-radius: 0 0 var(--vib-radius-md) var(--vib-radius-md);
}

@media (max-width: 48rem) {
  .vib-page-header {
    align-items: stretch;
  }

  .vib-form-actions:not(.vib-builder-actions) {
    justify-content: stretch;
  }

  .vib-form-actions:not(.vib-builder-actions) .vib-button {
    flex: 1 1 auto;
  }
}

/* Course detail action hierarchy: one primary edit action, grouped secondary paths. */
.vib-detail-actions__group {
  display: grid;
  gap: 0.55rem;
}

.vib-detail-actions__group + .vib-detail-actions__group {
  padding-top: 0.85rem;
  border-top: 1px solid var(--vib-border);
}

.vib-detail-actions__label {
  color: var(--vib-text-muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ========================================================================== 
   Academia VIB 26.10.8 - course polish, account details and audit cleanup
   ========================================================================== */
.vib-audit-summary__row {
  border-bottom: 0;
}

.vib-audit-summary__row + .vib-audit-summary__row {
  padding-top: 0.45rem;
}

.vib-course-review-table {
  min-width: 34rem;
}

.vib-course-review-table th:first-child,
.vib-course-review-table td:first-child {
  width: 34%;
}

.vib-course-review-footer {
  justify-content: flex-start;
}

.vib-course-review-note {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  color: var(--vib-text-secondary);
  font-size: 0.8rem;
  line-height: 1.45;
}

.vib-course-edit-main {
  display: grid;
  gap: 1rem;
}

.vib-course-edit-main .vib-tab-panel {
  padding-top: 0;
}

.vib-course-edit-sidebar {
  gap: 1rem;
}

.vib-detail-actions--plain {
  gap: 0.55rem;
}

.vib-detail-actions--plain > * {
  min-width: 0;
}

.vib-detail-actions .vib-alert,
.vib-detail-actions .vib-alert__content,
.vib-detail-actions .vib-alert__content p,
.vib-detail-actions .vib-check-list,
.vib-detail-actions .vib-check-list li {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
}

.vib-account-detail-grid {
  align-items: start;
}

@media (max-width: 48rem) {
  .vib-course-review-table {
    min-width: 30rem;
  }
}

/* 26.10.8: real form footers supersede the legacy adjacent-action footer simulation. */
.vib-card:has(+ .vib-form-actions:not(.vib-builder-actions)) {
  border-bottom-left-radius: var(--vib-radius-md);
  border-bottom-right-radius: var(--vib-radius-md);
}

.vib-card + .vib-form-actions:not(.vib-builder-actions) {
  margin-top: 1rem;
  border-top-left-radius: var(--vib-radius-md);
  border-top-right-radius: var(--vib-radius-md);
}

/* Course-group action warnings must use the full sidebar width and wrap as prose. */
.vib-detail-actions > .vib-alert {
  width: 100%;
}

.vib-detail-actions .vib-alert__content {
  width: 100%;
}

/* 26.10.9 targeted adjustments */
.vib-builder-actions,
.vib-form-actions {
    justify-content: flex-start;
}

.vib-builder-actions__group {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-left: 0;
}

.vib-builder-actions__group .vib-button {
    gap: 0.5rem;
}

.vib-button--audit {
    justify-content: flex-start;
    padding-inline: 0;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

.vib-button--audit:hover,
.vib-button--audit:focus-visible {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    color: var(--vib-primary-600);
}

.vib-audit-history-modal .vib-table-wrap {
    border: 1px solid var(--vib-border);
    border-radius: var(--vib-radius-md);
    overflow: hidden;
}

.vib-course-outline__lesson-main--compact {
    display: block;
}

.vib-course-outline__lesson-meta--with-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.vib-course-outline__lesson-meta--with-icon .vib-icon {
    color: var(--vib-text-muted);
}

.vib-card__header .vib-button--accent {
    flex-shrink: 0;
}

@media (max-width: 767px) {
    .vib-builder-actions__group {
        width: 100%;
    }

    .vib-builder-actions__group .vib-button,
    .vib-builder-actions > .vib-button {
        width: 100%;
    }
}

.vib-course-lesson--compact {
    grid-template-columns: minmax(0, 1fr);
}

.vib-course-lesson > div small.vib-course-outline__lesson-meta--with-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

/* Semantic action used to create a child record from a detail view. */
.vib-button--create {
    color: var(--vib-white);
    background: var(--vib-accent-500);
    border-color: var(--vib-accent-500);
}

.vib-button--create:hover,
.vib-button--create:focus-visible {
    color: var(--vib-white);
    background: var(--vib-accent-500);
    border-color: var(--vib-accent-500);
    box-shadow: 5px 5px 0 0 var(--vib-button-shadow-accent);
}