/* ============================================================================
   layout-blueprint.css
   Design tokens and content-component rules derived from layout-blueprint.json.
   Provides :root variables and component styles for Vklass V2 mockups.
   Scope: content area only — shell/toolbar/menu layout comes from Athena CSS + starters.
   Note: html font and :focus-visible rules below are intentionally global.
   ============================================================================ */

/* --- Design tokens (:root) ---
   Source: src/VklassFrontEnd/scss/_colors-palette.scss, _variables.scss */
:root {
  --cl-hard: #26418f;
  --cl-medium: #4e6ed0;
  --cl-soft: #7a92dc;
  --cl-softer: #a6b6e8;
  --cl-super-soft: #dbe1f5;
  --cl-soft-background: #c3cbef;
  --cl-green: #3e8442;
  --cl-green-graphics: #4ea651;
  --cl-red: #eb0017;
  --cl-red-graphics: #ff5c6c;
  --cl-yellow: #b36200;
  --cl-yellow-graphics: #db7500;
  --white: #fff;
  --black: #000;
  --gray-lightest: #fafafa;
  --gray-lighter: #f0f0f0;
  --gray-smooth: #e0e0e0;
  --gray-light: #c8c8c8;
  --gray: #767676;
  --gray-graphics: #949494;
  --gray-dark: #595959;
  --gray-darker: #4a4a4a;
  --input-border: #949494;
  --gap: 13px;
  --gap-double: 26px;
  --content-padding-vertical: 52px;
  --content-padding-horizontal: 32px;
  --content-padding-horizontal-phone: 15px;
  --content-container-max-width: 1562px;
  --toolbar-height: 65px;
  --permanent-drawer-width: 294px;
  --collapsible-drawer-closed-width: 52px;
  --vklass-focus: #26418f;
  --icon-default-size: 24px;
  --radius-button: 2px;
  --radius-badge: 15px;
  --radius-badge-slim: 14px;
  --radius-dialog: 26px;
  --tab-height: 48px;
}

html { font-family: Roboto, Arial, sans-serif; font-size: 14px; line-height: 20px; letter-spacing: 0.01em; color: var(--gray-darker); }
:focus-visible { outline: 2px solid var(--vklass-focus); outline-offset: 2px; }


/* ============================================================================
   BUTTONS
   Source: src/VklassFrontEnd/scss/styles/mdc/button.scss
   ============================================================================ */
.mdc-button { font-family: inherit; font-size: 0.875rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; border-radius: var(--radius-button); min-height: 36px; line-height: 2.25rem; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border: none; background: transparent; color: var(--cl-hard); padding: 0 8px; }
.mdc-button--unelevated { background: var(--cl-hard); color: var(--white); border: 1px solid var(--cl-hard); padding: 0 16px; }
.mdc-button--unelevated:disabled { background: var(--gray-lightest); color: var(--gray-dark); border-color: var(--gray-lightest); }
.mdc-button--outlined { background: transparent; color: var(--cl-hard); border: 1px solid currentColor; padding: 0 15px; }
.mdc-button--outlined:disabled { border-color: var(--gray-light); color: var(--gray-dark); }
.mdc-button--vk-danger { background: var(--cl-red); color: var(--white); border: 1px solid var(--cl-red); padding: 0 16px; }
.mdc-button--vk-danger:disabled { background: var(--gray-lightest); color: var(--gray-dark); border-color: var(--gray-lightest); }
.mdc-button--vk-final { width: 100%; min-height: 61px; background: var(--cl-hard); color: var(--white); border: 1px solid var(--cl-hard); }
.mdc-button--vk-discrete { background: transparent; color: var(--gray-dark); text-transform: none; font-weight: 400; }
.mdc-button--vk-icon { width: 30px; height: 30px; min-width: 0; padding: 0; color: var(--gray-darker); background: var(--white); border-radius: var(--radius-button); }
.mdc-button--vk-icon-small { width: 20px; height: 20px; min-width: 0; padding: 0; }
.mdc-button--vk-icon-small .material-icons { font-size: 1.2rem; }
.mdc-button__label { pointer-events: none; }
.mdc-button .material-icons { font-size: 24px; margin-right: 8px; }


/* ============================================================================
   FORM FIELDS
   Source: src/VklassFrontEnd/scss/styles/vk/field.scss, textfield.scss, mdc/select.scss
   ============================================================================ */
.vk-field { margin-bottom: var(--gap-double); }
.vk-field + .vk-field { margin-top: 0; }
.vk-field__label { font-weight: 500; color: var(--gray-darker); margin-bottom: 6px; display: block; }
.vk-field__description { margin-top: 4px; font-size: 0.85714rem; color: var(--gray-dark); }
.vk-field__intro { margin-top: 6.5px; margin-bottom: var(--gap); }
.vk-textfield { position: relative; }
.vk-textfield__input,
.mdc-select__native-control { width: 100%; border: 0; border-bottom: 1px solid var(--input-border); border-radius: 0; background: var(--white); color: var(--black); min-height: 30px; padding: 0 2px 7px 2px; letter-spacing: 0.04em; font-family: inherit; font-size: 1rem; }
.vk-textfield__input:focus { border-bottom: 2px solid var(--cl-hard); outline: none; }
.vk-textfield--boxed .vk-textfield__input { border: 1px solid var(--input-border); min-height: 35px; padding: 0 2px; }
.vk-textfield--textarea .vk-textfield__input { min-height: 82px; padding: 4px; border: 1px solid var(--input-border); resize: vertical; }


/* ============================================================================
   CONTENT LAYOUT
   Source: src/VklassFrontEnd/scss/_mixins.scss (contentPadding, contentContainer)
   ============================================================================ */
.content-padding { padding: var(--content-padding-vertical) var(--content-padding-horizontal); }
.content-padding--horizontal-only { padding-top: 0; padding-bottom: 0; }
.content-padding--vertical-only { padding-left: 0; padding-right: 0; }
.content-padding--collapse-top { padding-top: 0; }
.content-padding--collapse-bottom { padding-bottom: 0; }
.content-container { max-width: var(--content-container-max-width); margin: 0 auto; }
.content-container--narrow { max-width: 750px; }
.content-padding + section { border-top: 2px solid var(--gray-lighter); }
@media (max-width: 739px) {
  .content-padding { padding-left: var(--content-padding-horizontal-phone); padding-right: var(--content-padding-horizontal-phone); }
  .content-padding--collapse-phone { padding-left: 0; padding-right: 0; }
}


/* ============================================================================
   TABLE (.vk-table)
   Source: src/VklassFrontEnd/common/custom-elements/table/table.scss
   ============================================================================ */
.vk-table > table { width: 100%; border-collapse: collapse; }
.vk-table > table caption { text-align: left; caption-side: top; }
.vk-table > table th,
.vk-table > table td { vertical-align: middle; padding-top: 8px; padding-bottom: 8px; padding-left: 10px; padding-right: 0; }
.vk-table > table th:nth-last-child(2),
.vk-table > table td:nth-last-child(2) { padding-right: 10px; }
.vk-table > table > thead th { text-align: left; font-size: 0.85714rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: normal; color: var(--black); line-height: 1.55; }
.vk-table > table > tbody > tr.vk-table__item-row > td { word-break: break-word; }

/* Row dividers variant */
.vk-table--row-dividers > table > thead th:not(.vk-table__select-column) { border-bottom: solid 2px var(--gray-lighter); }
.vk-table--row-dividers > table > tbody .vk-table__item-row > td:not(.vk-table__select-column) { border-bottom: solid 1px var(--gray-lighter); }

/* Row height */
.vk-table:not(.vk-table--rows-auto-height) > table > tbody .vk-table__item-row > td { height: 67px; }
.vk-table:not(.vk-table--rows-auto-height) > table > tfoot td { height: 67px; }
.vk-table > table > tfoot td { font-weight: 500; }

/* Select column */
.vk-table > table td.vk-table__select-column,
.vk-table > table th.vk-table__select-column { width: 18px; max-width: 18px; box-sizing: content-box; padding-left: 0; padding-right: var(--gap); }

/* Expand column */
.vk-table > table .vk-table__expand-column { display: none; width: 24px; max-width: 24px; padding-left: var(--gap); padding-right: 10px; box-sizing: content-box; vertical-align: middle; }

/* Expansion rows */
.vk-table__item-row--expanded > td { border-bottom-color: transparent !important; }
.vk-table__item-row--expanded + tr.vk-table__item-expansion > td:not(.vk-table__select-column) { border-bottom: solid 1px var(--gray); padding-bottom: var(--gap); padding-right: 10px; }
.vk-table__item-expansion dl { margin: 0; padding: 0; }
.vk-table__item-expansion dt { font-size: 0.85714rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; color: var(--gray-darker); }
.vk-table__item-expansion dd { word-break: break-word; margin-inline-start: 0; padding-bottom: var(--gap); }
.vk-table__item-expansion dd:last-child { padding-bottom: 0; }

/* Always-expanded variant */
.vk-table--always-expanded > table > thead > tr > .vk-table__expand-column,
.vk-table--always-expanded > table > tbody > tr > .vk-table__expand-column { display: none !important; }

/* Stripes variant */
.vk-table--skin-stripes > table { border-collapse: separate; border-spacing: 0 3px; }
.vk-table--skin-stripes > table > tbody > tr.vk-table__item-row { height: 50px; }
.vk-table--skin-stripes > table > tbody > tr.vk-table__item-row td { background-color: var(--cl-super-soft); padding-left: var(--gap); padding-right: var(--gap); }

/* Empty state (no items) */
.vk-table > table > thead:has(+ tbody.vk-table__no-items) vkau-order-link vkau-icon { visibility: hidden; }

/* Vertical align top variant */
.vk-table--vertical-align-top > table > tbody > tr.vk-table__item-row > td { vertical-align: top; }

/* Right-aligned columns */
.vk-table__field-header.right-aligned > span { display: block; text-align: right; }
.vk-table__field-value.right-aligned,
.vk-table tfoot td.right-aligned { text-align: right; }

/* Phone stacked mode */
@media (max-width: 739px) {
  .vk-table--phone-stacked > table > thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .vk-table--phone-stacked > table > tbody > .vk-table__item-row { display: flex; flex-direction: column; position: relative; }
  .vk-table--phone-stacked > table > tbody > .vk-table__item-row > td { padding: 0 0 24px 0; }
  .vk-table--phone-stacked > table > tbody > .vk-table__item-row > td.vk-table__select-column { display: none; }
}


/* ============================================================================
   BADGE / PILL (.vk-badge)
   Source: src/VklassFrontEnd/scss/styles/vk/badge.scss
   ============================================================================ */
.vk-badge { display: flex; align-items: center; justify-content: flex-start; padding: 0 15px; height: 30px; border-radius: var(--radius-badge); white-space: nowrap; background-color: var(--gray-light); color: var(--white); text-transform: uppercase; letter-spacing: 0.01em; font-size: 0.85714rem; }
.vk-badge > span { position: relative; top: 1px; }
.vk-badge .material-icons.vk-icon { font-size: 1.6rem; padding-right: 8px; }

/* Slim variant */
.vk-badge--slim { display: inline-flex; height: auto; padding: 3px 10px; border-radius: var(--radius-badge-slim); text-transform: none; }

/* State color modifiers (badge uses textWithWhite as background, white text) */
.vk-badge.default   { background-color: var(--gray);    color: var(--white); }
.vk-badge.info,
.vk-badge.hard       { background-color: var(--cl-hard); color: var(--white); }
.vk-badge.positive,
.vk-badge.success    { background-color: var(--cl-green); color: var(--white); }
.vk-badge.pending,
.vk-badge.partial    { background-color: var(--cl-yellow); color: var(--white); }
.vk-badge.negative,
.vk-badge.error,
.vk-badge.warning    { background-color: var(--cl-red);  color: var(--white); }


/* ============================================================================
   STATE BOX (.vk-state-box)
   Source: src/VklassFrontEnd/common/custom-elements/state-box/state-box.scss
   ============================================================================ */
.vk-state-box { position: relative; margin-bottom: var(--gap); display: flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: normal; text-transform: none; color: var(--gray-darker); line-height: 20px; letter-spacing: 0.01em; text-decoration: none; }
.vk-state-box > span { pointer-events: none; }
.vk-state-box--placeholder { background-color: var(--gray-lighter); }
.vk-state-box.empty { border: solid 1px var(--gray); font-style: normal; }

/* State background colors (uses textWithWhite for bg, white text) */
.vk-state-box.default   { background-color: var(--gray);    color: var(--white); }
.vk-state-box.info,
.vk-state-box.hard       { background-color: var(--cl-hard); color: var(--white); }
.vk-state-box.positive,
.vk-state-box.success    { background-color: var(--cl-green); color: var(--white); }
.vk-state-box.pending,
.vk-state-box.partial    { background-color: var(--cl-yellow); color: var(--white); }
.vk-state-box.negative,
.vk-state-box.error,
.vk-state-box.warning    { background-color: var(--cl-red);  color: var(--white); }

/* Acronym */
.state-box__acronym { text-transform: uppercase; }

/* Popout */
.vk-state-box__popout { cursor: auto; display: none; position: absolute; min-width: 100px; bottom: calc(-1 * var(--gap)); left: 50%; transform: translateX(-50%) translateY(100%); background-color: var(--white); border: 1px solid var(--gray); padding: 10px; font-size: 0.85714rem; text-align: left; z-index: 10; white-space: nowrap; color: var(--gray-darker); line-height: 20px; letter-spacing: 0.01em; font-weight: normal; text-transform: none; text-decoration: none; }
.vk-state-box[aria-expanded="true"] .vk-state-box__popout { display: block; }
.vk-state-box__popout h5 { font-weight: 500; font-size: 0.85714rem; margin: 0; }
@media (min-width: 740px) { .vk-state-box__popout { min-width: 160px; } }

/* Popout state dots */
.vk-state-box__popout__text.positive:after { background-color: #3e8442; }
.vk-state-box__popout__text.partial:after  { background-color: #b36200; }
.vk-state-box__popout__text.negative:after { background-color: #eb0017; }
.vk-state-box__popout__text ~ .vk-state-box__popout__text { margin-top: 6.5px; }


/* ============================================================================
   FILTER PANEL (.vk-page-filter)
   Source: src/VklassFrontEnd/common/custom-elements/page-filter/page-filter.scss,
           page-filter-trigger.scss
   ============================================================================ */

/* Trigger bar */
.vk-page-filter-trigger { height: 48px; border-bottom: 1px solid var(--gray-lighter); position: relative; }
.vk-page-filter-trigger__button { user-select: none; display: inline-flex; align-items: center; padding-left: var(--gap); padding-right: var(--gap); position: absolute; top: 0; right: 0; height: 48px; border-left: 1px solid var(--gray-lighter); cursor: pointer; background: none; border-top: none; border-bottom: none; border-right: none; font-family: inherit; font-size: 1rem; }
.vk-page-filter-trigger__button .material-icons { margin-right: 6px; }

/* Panel spacing */
.vk-page-filter__spacing { padding-top: var(--gap-double); padding-bottom: calc(var(--gap-double) * 2); }
@media (max-width: 739px) { .vk-page-filter__spacing { padding-bottom: calc(var(--gap-double) * 1.5); } }
.vk-page-filter__spacing--collapse-top { padding-top: 0; }

/* Form header */
.vk-page-filter__form-header { font-size: 1.425rem; font-weight: 400; color: var(--gray-darker); margin-bottom: var(--gap); padding-bottom: 0; }

/* Active filter area */
.vk-page-filter__active-header { font-size: 1rem; font-weight: normal; text-transform: uppercase; letter-spacing: normal; color: var(--black); }
@media (min-width: 740px) {
  .vk-page-filter__active { padding-top: var(--gap-double); display: flex; }
  .vk-page-filter__active-header { flex: 0 0 auto; }
  .vk-page-filter__active-pills { flex: 1 1 auto; margin-top: -2px; margin-left: var(--gap); }
}

/* Content padding after trigger */
.vk-page-filter-trigger + .content-padding:not(.content-padding--horizontal-only) { padding-top: var(--gap-double); }


/* ============================================================================
   CARD (.vk-card)
   Source: src/VklassFrontEnd/common/custom-elements/card/card.scss
   ============================================================================ */
.vk-card-element { display: flex; flex-wrap: wrap; border: 1px solid var(--gray-lighter); margin-top: var(--gap-double); word-break: break-word; }
.vk-card-element:first-child { margin-top: 0; }

.vk-card { color: var(--black); display: flex; flex-direction: column; padding: var(--gap); width: 100%; }
.vk-card__tags { color: var(--gray); }
.vk-card__heading { padding-bottom: var(--gap); margin-bottom: 0; font-size: 1rem; }
.vk-card__heading--bottom-border { margin-bottom: var(--gap); position: relative; }

.vk-card__content { flex-grow: 1; display: block; color: var(--gray-darker); }
.vk-card__content--action { font-weight: normal; }
.vk-card__content__media { height: 200px; background-size: cover; background-position: 0 40%; width: calc(100% + var(--gap-double)); position: relative; left: calc(-1 * var(--gap)); top: calc(-1 * var(--gap)); margin-bottom: calc(-1 * var(--gap)); z-index: -1; }
.vk-card__content__header { margin-bottom: var(--gap); }
.vk-card__content__header:first-child { margin-top: var(--gap); }
.vk-card__content__context { margin-top: 6.5px; margin-bottom: 6.5px; color: var(--gray); }
.vk-card__content__context:last-child { margin-bottom: 0; }
.vk-card__content__description { margin-top: var(--gap); font-size: 1rem; }

.vk-card__commands { padding: var(--gap-double); display: flex; justify-content: center; }
.vk-card__commands button { height: 35px; border-radius: 17.5px; padding-left: var(--gap-double); padding-right: var(--gap-double); appearance: none; border: none; background-color: transparent; font-size: 1rem; cursor: pointer; margin-left: 6.5px; margin-right: 6.5px; }

.vk-card__indicators { margin-top: var(--gap); font-size: 0.85714rem; }
.vk-card__indicators__item { background-color: var(--cl-super-soft); padding: var(--gap); margin-top: 6.5px; }
.vk-card__indicators__item:first-child { margin-top: 0; }
.vk-card__indicators__item__text { margin-left: var(--gap); line-height: 14px; }

.vk-card__footer { margin-top: var(--gap-double); }
.vk-card__footer--text { color: var(--gray-darker); }
.vk-card__footer--secondary-text { font-size: smaller; color: var(--gray-darker); }

/* Card grid layout */
.vk-card-element.vk-flex__item { }
@media (max-width: 739px) { .vk-card-element.vk-flex__item { width: 100%; } }
@media (min-width: 740px) and (max-width: 932px) { .vk-card-element.vk-flex__item { width: calc((100% - var(--gap-double)) / 2); } }
@media (min-width: 933px) { .vk-card-element.vk-flex__item { width: calc((100% - var(--gap-double) * 2) / 3); } }

/* Action card variant */
.vk-card-element--action .vk-card__content { padding-top: 124px; text-align: center; }

/* Archived card variant */
.vk-card-element--archived { border-color: var(--gray-lighter); }
.vk-card-element--archived .vk-card__heading,
.vk-card-element--archived .vk-card__content,
.vk-card-element--archived .vk-card__footer { opacity: 0.6; }


/* ============================================================================
   EXPANSION PANEL (.vk-expansion-panel)
   Source: src/VklassFrontEnd/common/custom-elements/expanders/expansion-panel.scss,
           expander.scss
   ============================================================================ */

/* Trigger */
.vk-expansion-panel__trigger { padding: 10px; background-color: var(--cl-super-soft); position: relative; cursor: pointer; min-height: 48px; display: block; width: 100%; border: none; text-align: left; font-family: inherit; font-size: 1rem; }
.vk-expansion-panel__trigger--flex { display: flex; align-items: center; }
.vk-expansion-panel__trigger h1,
.vk-expansion-panel__trigger h2,
.vk-expansion-panel__trigger h3,
.vk-expansion-panel__trigger h4,
.vk-expansion-panel__trigger h5,
.vk-expansion-panel__trigger h6 { text-transform: none; margin-bottom: 0 !important; }

/* Trigger title */
.vk-expansion-panel__trigger__title { font-weight: normal; letter-spacing: 0.21px; }
.vk-expansion-panel__trigger__title--active { font-weight: 500; color: var(--cl-hard) !important; }

/* Trigger icon (collapsed = add, expanded = remove) */
.vk-expansion-panel__trigger-icon { position: absolute; right: 39px; top: 50%; transform: translateY(-50%); font-family: 'Material Icons'; font-size: 24px; color: var(--gray-dark); }
.vk-expansion-panel__trigger-icon::before { content: 'add'; }
.vk-expansion-panel__trigger-icon--expanded { color: var(--cl-hard); }
.vk-expansion-panel__trigger-icon--expanded::before { content: 'remove'; }
@media (max-width: 739px) { .vk-expansion-panel__trigger-icon { right: var(--gap); } }

/* Expander (content wrapper) */
.vk-expander { transition: all 180ms ease-out; height: 0; margin-bottom: 0; overflow: hidden; }
.vk-expander--expanded { transition: all 180ms ease-in; }
.vk-expander--fully-expanded { overflow: visible; }
.vk-expander--side-padding { padding-left: 10px; padding-right: 10px; }

/* Content spacer */
.vk-expansion-panel > .vk-expander > .vk-expander__spacer,
.vk-expansion-panel > vkau-expander > .vk-expander > .vk-expander__spacer { padding: var(--gap-double) 0 calc(var(--gap-double) * 2); }
.vk-expansion-panel > .vk-expander,
.vk-expansion-panel > vkau-expander > .vk-expander { padding-left: 10px; padding-right: 10px; }

/* Content bottom border */
.vk-expansion-panel > .vk-expander > .vk-expander__spacer::after,
.vk-expansion-panel > vkau-expander > .vk-expander > .vk-expander__spacer::after { content: ''; display: block; width: calc(100% + 20px); position: relative; left: -10px; top: var(--gap-double); border-bottom: solid 1px var(--gray-lighter); }

/* Sibling spacing */
.vk-expansion-panel + .vk-expansion-panel { margin-top: var(--gap); }

/* Disabled state */
.vk-expansion-panel--disabled > .vk-expansion-panel__trigger { background-color: var(--gray-lightest); pointer-events: none; }
.vk-expansion-panel--disabled > .vk-expansion-panel__trigger .vk-expansion-panel__trigger-icon::before,
.vk-expansion-panel--disabled > .vk-expansion-panel__trigger .vk-expansion-panel__trigger__title { color: var(--gray); }

/* Outlined trigger variant */
.vk-expansion-panel--outlined-trigger > .vk-expansion-panel__trigger { background-color: var(--white); border: 1px solid var(--input-border); }

/* Dropdown-style variant */
.vk-expansion-panel--style-as-dropdown { border: 1px solid transparent; }
.vk-expansion-panel--style-as-dropdown.vk-expansion-panel--expanded { border: 1px solid var(--cl-hard); }
.vk-expansion-panel--style-as-dropdown.vk-expansion-panel--expanded > .vk-expansion-panel__trigger { background-color: var(--white); border-bottom: 2px solid var(--input-border) !important; }

/* Description inside panel */
.vk-expansion-panel__description { padding: 10px; color: var(--gray-dark); }


/* ============================================================================
   MESSAGE BOX (.vk-message-box)
   Source: src/VklassFrontEnd/scss/styles/vk/message-box.scss
   ============================================================================ */
.vk-message-box { border-radius: 2px; padding: var(--gap); margin-bottom: 39px; display: block; overflow: auto; }
.vk-message-box p,
.vk-message-box ol,
.vk-message-box ul { max-width: 800px; }
.vk-message-box em { font-style: normal; font-weight: 500; }
.vk-message-box button,
.vk-message-box .mdc-button { margin-top: 12px; }

/* Filled state colors */
.vk-message-box.default   { background-color: var(--gray-dark);  border: solid 1px var(--gray-dark);  color: var(--white); }
.vk-message-box.info,
.vk-message-box.hard       { background-color: var(--cl-hard);    border: solid 1px var(--cl-hard);    color: var(--white); }
.vk-message-box.positive,
.vk-message-box.success    { background-color: var(--cl-green);   border: solid 1px var(--cl-green);   color: var(--white); }
.vk-message-box.pending,
.vk-message-box.partial    { background-color: #a85d00;           border: solid 1px #a85d00;           color: var(--white); }
.vk-message-box.negative,
.vk-message-box.error      { background-color: #db0016;           border: solid 1px #db0016;           color: var(--white); }
.vk-message-box.warning    { background-color: #db0016;           border: solid 1px #db0016;           color: var(--white); }

/* Outlined variant */
.vk-message-box--outlined.default   { background-color: var(--white) !important; color: inherit; border: 1px solid var(--gray-dark); }
.vk-message-box--outlined.info,
.vk-message-box--outlined.hard       { background-color: var(--white) !important; color: inherit; border: 1px solid var(--cl-hard); }
.vk-message-box--outlined.positive,
.vk-message-box--outlined.success    { background-color: var(--white) !important; color: inherit; border: 1px solid #3a783e; }
.vk-message-box--outlined.pending,
.vk-message-box--outlined.partial    { background-color: var(--white) !important; color: inherit; border: 1px solid #a85d00; }
.vk-message-box--outlined.negative,
.vk-message-box--outlined.error      { background-color: var(--white) !important; color: inherit; border: 1px solid #db0016; }
.vk-message-box--outlined.warning    { background-color: var(--white) !important; color: inherit; border: 1px solid #db0016; }

/* Leading icon variant */
.vk-message-box--leading-icon { padding-left: 78px; padding-right: 27px; position: relative; }
.vk-message-box--leading-icon .material-icons { position: absolute; top: 8px; left: var(--gap-double); font-size: 28px; }
.vk-message-box--leading-icon.vk-message-box--outlined { padding-left: 52px; }
.vk-message-box--leading-icon.vk-message-box--outlined .material-icons { left: var(--gap); }


/* ============================================================================
   CONTEXT STATE COLORS (foreground utility classes)
   Source: src/VklassFrontEnd/scss/_mixins.scss ($contextStates map)
   ============================================================================ */
.vk-cl-default   { color: var(--gray-dark); }
.vk-cl-info,
.vk-cl-hard       { color: var(--cl-hard); }
.vk-cl-positive,
.vk-cl-success    { color: #3a783e; }
.vk-cl-pending,
.vk-cl-partial    { color: #a85d00; }
.vk-cl-negative,
.vk-cl-error      { color: #db0016; }
.vk-cl-warning    { color: #db0016; }

/* Background utility classes */
.vk-bg-default   { background-color: var(--gray-dark); }
.vk-bg-info,
.vk-bg-hard       { background-color: var(--cl-hard); }
.vk-bg-positive,
.vk-bg-success    { background-color: #3a783e; }
.vk-bg-pending,
.vk-bg-partial    { background-color: #a85d00; }
.vk-bg-negative,
.vk-bg-error      { background-color: #db0016; }
.vk-bg-warning    { background-color: #db0016; }

/* Soft background state classes (for cards, indicators) */
.vk-bg-default-soft   { background-color: var(--gray-lighter); }
.vk-bg-info-soft,
.vk-bg-hard-soft       { background-color: var(--cl-soft); }
.vk-bg-positive-soft,
.vk-bg-success-soft    { background-color: #e8f5e9; }
.vk-bg-pending-soft,
.vk-bg-partial-soft    { background-color: #fff8e1; }
.vk-bg-negative-soft,
.vk-bg-error-soft      { background-color: #ffebee; }
.vk-bg-warning-soft    { background-color: #ffebee; }


/* ============================================================================
   ICON BADGE / AVATAR (.vk-icon-badge)
   Source: src/VklassFrontEnd/common/custom-elements/icon-badge/icon-badge.scss
   ============================================================================ */
.vk-icon-badge { height: 49px; width: 49px; min-width: 49px; border-radius: 50%; background-color: var(--cl-hard); background-size: cover; background-repeat: no-repeat; background-position-y: 40%; display: flex; align-items: center; justify-content: center; position: relative; }
.vk-icon-badge__acronym { color: var(--white); text-transform: uppercase; font-size: 1.4rem; font-weight: normal !important; }
.vk-icon-badge__icon:not([class*='vk-cl-']) { color: var(--white); }
.vk-icon-badge--has-image .vk-icon-badge__acronym { visibility: hidden; }

/* Size variants */
.vk-icon-badge--tiny  { height: 20px;  width: 20px;  min-width: 20px;  border-radius: 10px; }
.vk-icon-badge--tiny .vk-icon-badge__acronym  { font-size: 0.7859rem; }
.vk-icon-badge--tiny .material-icons.vk-icon  { font-size: 1rem; }

.vk-icon-badge--small { height: 33px;  width: 33px;  min-width: 33px;  border-radius: 16.5px; }
.vk-icon-badge--small .vk-icon-badge__acronym { font-size: 1rem; }
.vk-icon-badge--small .material-icons.vk-icon { font-size: 1.3rem; }

.vk-icon-badge--large { height: 80px;  width: 80px;  min-width: 80px;  border-radius: 40px; }
.vk-icon-badge--large .vk-icon-badge__acronym,
.vk-icon-badge--large .material-icons.vk-icon { font-size: 2.5rem; }
@media (max-width: 739px) {
  .vk-icon-badge--large { height: 43px; width: 43px; min-width: 43px; border-radius: 21.5px; }
  .vk-icon-badge--large .vk-icon-badge__acronym,
  .vk-icon-badge--large .material-icons.vk-icon { font-size: 1.5rem; }
}

.vk-icon-badge--xl   { height: 100px; width: 100px; min-width: 100px; border-radius: 50px; }
.vk-icon-badge--xl .vk-icon-badge__acronym,
.vk-icon-badge--xl .material-icons.vk-icon { font-size: 3.5rem; }

.vk-icon-badge--mega { height: 160px; width: 160px; min-width: 160px; border-radius: 80px; }
.vk-icon-badge--mega .vk-icon-badge__acronym,
.vk-icon-badge--mega .material-icons.vk-icon { font-size: 6rem; }

/* Entity color modifiers */
.vk-icon-badge--person        { background-color: #26418f; }
.vk-icon-badge--course        { background-color: #548227; }
.vk-icon-badge--course-group  { background-color: #c54090; }
.vk-icon-badge--class         { background-color: #8464c4; }
.vk-icon-badge--school        { background-color: #18808c; }
.vk-icon-badge--collaboration { background-color: #037CB5; }
.vk-icon-badge--plan          { background-color: #8b6e65; }

/* State modifiers */
.vk-icon-badge--soft     { background-color: var(--cl-soft); }
.vk-icon-badge--disabled { background-color: var(--gray-light) !important; }
.vk-icon-badge--center   { margin-left: auto; margin-right: auto; }
.vk-icon-badge--inline   { display: inline-flex; }
.vk-icon-badge--right-gap { margin-right: 11px; }

/* Icon-only mode (no circle background) */
.vk-icon-badge--icon { background-color: transparent; height: auto; width: auto; min-width: initial; }
.vk-icon-badge--icon .vk-icon-badge__icon:not([class*='vk-cl-']) { color: var(--black); }
.vk-icon-badge--icon-gray { background-color: transparent; }
.vk-icon-badge--icon-gray .vk-icon-badge__icon:not([class*='vk-cl-']) { color: var(--gray); }
.vk-icon-badge--icon-blue { background-color: transparent; }
.vk-icon-badge--icon-blue .vk-icon-badge__icon:not([class*='vk-cl-']) { color: var(--cl-hard); }

/* Alert indicator */
.vk-icon-badge__alert { position: absolute; top: 50%; left: 0; transform: translateY(-50%) translateX(-50%); }
.vk-icon-badge__alert:not([class*="vk-cl-"]) { color: var(--cl-red); }
.vk-icon-badge__alert::before { content: ''; position: absolute; top: calc(45% / 2); left: calc(45% / 2); background-color: var(--white); height: 55%; width: 55%; z-index: -1; }

/* Badge with text layout */
.vk-icon-badge-with-text { display: flex; align-items: center; }
.vk-icon-badge-with-text .vk-icon-badge { margin-right: 12px; }
.vk-icon-badge-with-text .vk-icon-badge--small { margin-right: 9px; }
.vk-icon-badge-with-text .vk-icon-badge--tiny  { margin-right: 6px; }
.vk-icon-badge-with-text--inline { display: inline-flex; }
.vk-icon-badge-with-text--reversed { flex-direction: row-reverse; justify-content: flex-end; }
.vk-icon-badge-with-text__text { max-width: calc(100% - 49px - 12px + 1px); }
.vk-icon-badge-with-text__secondary-text { display: block; }
.vk-icon-badge-with-text--disabled .vk-icon-badge-with-text__text { color: var(--gray-dark); }

/* Indentation helper for elements following a badge */
.vk-icon-badge-indentation { margin-left: 49px; padding-left: 12px; }


/* ============================================================================
   SHORTCUTS BAR / GROUP SELECTOR (.vk-shortcuts-bar)
   Source: src/VklassFrontEnd/common/custom-elements/shortcuts-bar/shortcuts-bar.scss
   ============================================================================ */
.vk-shortcuts-bar { height: 48px; background-color: var(--cl-hard); padding-left: var(--gap-double); padding-right: var(--gap-double); display: flex; align-items: center; justify-content: flex-end; transition: height 180ms ease-out; color: var(--white); }
@media (max-width: 739px) { .vk-shortcuts-bar { padding-left: var(--gap); padding-right: var(--gap); } }
.vk-shortcuts-bar--space-between { justify-content: space-between; }
.vk-shortcuts-bar--has-backlink { padding-left: 0; }
.vk-shortcuts-bar--open { transition: height 180ms ease-in; }

/* Back link */
.vk-shortcuts-bar > .vk-link { color: var(--white); height: 48px; display: flex; align-items: center; padding-left: 5px; max-width: 300px; text-decoration: none; font-weight: normal; }
.vk-shortcuts-bar > .vk-link .material-icons { margin-right: 4px; }
.vk-shortcuts-bar > .vk-link .vk-link__text { font-weight: normal !important; position: relative; top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Context html (inline group/class display like "9A") */
.vk-shortcuts-bar__html { color: var(--white); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width: 30%; font-size: 1rem; font-weight: 500; }

/* Toggler */
.vk-shortcuts-bar__toggler { cursor: pointer; color: var(--white); background: none; border: none; font-family: 'Material Icons'; font-size: 24px; }

/* Shortcut links */
.vk-shortcuts-bar__shortcuts { display: flex; align-items: center; }
.vk-shortcuts-bar__shortcuts .vk-link { color: var(--white); text-transform: uppercase; text-decoration: none; display: inline-flex; align-items: center; margin-left: var(--gap); }
.vk-shortcuts-bar__shortcuts .vk-link .material-icons { margin-right: 10px; }
.vk-shortcuts-bar__shortcuts .vk-link__text { border-bottom: solid 2px var(--cl-hard); }
.vk-shortcuts-bar__shortcuts .vk-link .selected { border-bottom-color: var(--white) !important; }

/* Collapsed state on narrow screens */
@media (max-width: 932px) {
  .vk-shortcuts-bar { flex-wrap: wrap; overflow: hidden; }
  .vk-shortcuts-bar__toggler { height: 48px; padding-top: calc((48px - 24px) / 2); }
  .vk-shortcuts-bar__toggler::before { content: 'keyboard_arrow_down'; }
  .vk-shortcuts-bar--open .vk-shortcuts-bar__toggler::before { content: 'remove'; }
  .vk-shortcuts-bar__shortcuts { width: 100%; flex-direction: column; align-items: flex-start; }
  .vk-shortcuts-bar__shortcuts .vk-link { padding-top: var(--gap-double); padding-bottom: var(--gap-double); width: 100%; position: relative; margin-left: 0; }
  .vk-shortcuts-bar__shortcuts .vk-link:not(:last-child)::after { content: ''; background-color: var(--cl-medium); position: absolute; left: calc(-1 * var(--gap)); right: calc(-1 * var(--gap)); bottom: 0; height: 1px; }
}


/* ============================================================================
   FLEX HELPERS
   Source: src/VklassFrontEnd/scss/styles/vk/flex.scss
   ============================================================================ */
.vk-flex { display: flex; align-items: center; }
.vk-flex--space-between { justify-content: space-between; }
.vk-flex--v-align-center { align-items: center; }
.vk-flex--v-align-start { align-items: flex-start; }
.vk-flex--v-align-end { align-items: flex-end; }
.vk-flex--h-align-center { justify-content: center; }
.vk-flex--h-align-right { justify-content: flex-end; }
.vk-flex--gap { gap: var(--gap); }
.vk-flex--gap-double { gap: var(--gap-double); }
.vk-flex--wrap { flex-wrap: wrap; }
.vk-flex--stacked,
.vk-flex--dir-column { flex-direction: column; }
.vk-flex__item--fixed { flex: 0 0 auto; }
.vk-flex__item--flexible { flex: 1 1 auto; }


/* ============================================================================
   RESPONSIVE VISIBILITY HELPERS
   Source: src/VklassFrontEnd/scss/styles/vk-responsive-visibility.scss
   ============================================================================ */
@media (max-width: 739px)  { .hidden-phone { display: none !important; } }
@media (min-width: 740px)  { .visible-phone { display: none !important; } }
.hidden { display: none !important; }


/* ============================================================================
   TYPOGRAPHY UTILITY CLASSES
   Source: src/VklassFrontEnd/scss/styles/typography.scss
   ============================================================================ */
.text-style-reset { font-size: 1rem; font-weight: normal; text-transform: none; color: var(--gray-darker); line-height: 20px; letter-spacing: 0.01em; text-decoration: none; }
.text-bold { font-weight: 500 !important; }
.text-blue { color: var(--cl-hard) !important; }
.text-hard { color: var(--black) !important; font-weight: 500 !important; }
.text-active { color: var(--cl-hard) !important; font-weight: 500 !important; }
.text-ellipsis { display: block; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.description { font-size: 0.85714rem; line-height: normal; color: var(--gray-dark); }
.text-upper { text-transform: uppercase; }

/* Heading sizes */
.text-header-l { font-size: 1.8rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--black); font-weight: normal; }
.text-header-m { font-size: 1.425rem; color: var(--gray-darker); font-weight: normal; }
.text-header-s { font-size: 1rem; color: var(--black); font-weight: 500; }
.text-header-xs { font-size: 0.85714rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--black); font-weight: normal; }


/* ============================================================================
   SPACING UTILITY CLASSES
   Source: src/VklassFrontEnd/scss/styles/spacing.scss
   ============================================================================ */
.margin-bottom-none { margin-bottom: 0 !important; }
.margin-bottom-xxs  { margin-bottom: 3px; }
.margin-bottom-xs   { margin-bottom: var(--gap); }
.margin-bottom-s    { margin-bottom: var(--gap-double); }
.margin-bottom-m    { margin-bottom: 39px; }
.margin-bottom-l    { margin-bottom: 52px; }
.padding-xs         { padding: var(--gap); }
.padding-s          { padding: var(--gap-double); }
.padding-top-xs     { padding-top: var(--gap); }
.padding-top-s      { padding-top: var(--gap-double); }
.padding-bottom-xs  { padding-bottom: var(--gap); }
.padding-bottom-s   { padding-bottom: var(--gap-double); }