/* VK-Field (Athena Form Field Component) */
.vk-field__label {
    font-size: 0.857rem; /* 12px at 14px base */
    line-height: normal;
    color: var(--gray);
    font-weight: normal;
    display: block;
    margin-bottom: 4px;
}

.vk-field__input-control {
    margin-top: 20px;
}

@media (max-width: 599px) {
    .vk-field__input-control {
        margin-top: 24px;
    }
}

.vk-field__description {
    font-size: 0.786rem; /* 11px at 14px base */
    margin-top: 4px;
    color: var(--gray-dark);
}

.vk-field.vk-display .vk-field__input-control {
    /* Display-only field styling */
}

/* VK-Hidden-Scroll (Athena Design System) */
.vk-hidden-scroll__scroller {
    overflow-y: auto;
    overflow-x: hidden;
}

/* Hide scrollbar for Webkit browsers (Mac, iOS) */
.vk-hidden-scroll__scroller::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

/* Hide scrollbar for Firefox */
.vk-hidden-scroll__scroller {
    scrollbar-width: none;
}

.vk-hidden-scroll__content {
    /* Content wrapper */
}

/* VK-Icon-Badge-Indentation (Athena Utility) */
.vk-icon-badge-indentation {
    /* Auto-indented by adjacent icon badge */
    /* Actual indentation calculated based on badge size */
}

/* VK-Text-On-Phone (Athena Utility) */
.vk-text-on-phone__text {
    display: none;
}

@media (max-width: 599px) {
    .vk-text-on-phone__text {
        display: inline;
    }
}

/* Width Utilities (Athena) */
.width-25-percent { width: 25%; }
.width-75-percent { width: 75%; }
.width-100-percent { width: 100%; }
.width-30 { width: 30px; }
.width-50 { width: 50px; }
.width-75 { width: 75px; }
.width-100 { width: 100px; }
.width-150 { width: 150px; }
.width-175 { width: 175px; }
.width-300 { width: 300px; }
.max-width-120 { max-width: 120px; }
.max-width-250 { max-width: 250px; }

@media (min-width: 960px) {
    .width-25-percent-from-tablet-landscape { width: 25%; }
    .max-width-250-from-tablet-landscape { max-width: 250px; }
}

@media (max-width: 959px) {
    .width-100-percent-until-tablet-portrait { width: 100%; }
}

/* Border Utilities (Athena) */
.border-top-gray-lighter {
    border-top: 1px solid var(--gray-lighter);
}

.border-bottom-gray-lighter {
    border-bottom: 1px solid var(--gray-lighter);
}

.border-bottom-gray-light {
    border-bottom: 1px solid var(--gray-light);
}

.border-bottom-none {
    border-bottom: none !important;
}

@media (max-width: 599px) {
    .border-bottom-none-phone {
        border-bottom: none !important;
    }
}

.border-left-gray-dark {
    border-left: 2px solid var(--gray-dark);
}

.boxed {
    border: 1px solid var(--gray-light);
    padding: var(--gap-double);
    border-radius: 4px;
}

.boxed--slim {
    padding: var(--gap);
}

.bordered {
    border: 1px solid var(--gray-light);
}

.overlay-bordered {
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Display & Positioning Utilities (Athena) */
.block {
    display: block !important;
}

.inline {
    display: inline !important;
}

.inline-block {
    display: inline-block !important;
}

.pos-rel {
    position: relative !important;
}

@media (min-width: 600px) {
    .pos-rel-from-tablet {
        position: relative !important;
    }
}

@media (max-width: 599px) {
    .pos-rel-phone {
        position: relative !important;
    }
}

/* Opacity & Visibility Utilities (Athena) */
.opaque-50 {
    opacity: 0.5;
}

.transparent {
    opacity: 0;
}

.invisible {
    visibility: hidden;
}

/* Other Utilities (Athena) */
.overflow-hidden {
    overflow: hidden !important;
}

.flip-h {
    transform: scaleX(-1);
}

.user-select-none {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.cursor-pointer {
    cursor: pointer !important;
}

/* List Utilities (Athena) */
.list-style-reset {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.list-spacing li {
    margin-bottom: var(--gap);
}

.list-spacing li:last-child {
    margin-bottom: 0;
}

/* Spacing Utilities (Athena Generated Classes) */
/* Margin utilities - sizes: xxs(6.5px), xs(13px), s(26px), m(39px), l(52px), xl(78px) */
.margin-top-xxs { margin-top: calc(var(--gap) * 0.5); }
.margin-top-xs { margin-top: var(--gap); }
.margin-top-s { margin-top: var(--gap-double); }
.margin-top-m { margin-top: calc(var(--gap) * 3); }
.margin-top-l { margin-top: calc(var(--gap-double) * 2); }
.margin-top-xl { margin-top: calc(var(--gap-double) * 3); }
.margin-top-none { margin-top: 0; }

.margin-right-xxs { margin-right: calc(var(--gap) * 0.5); }
.margin-right-xs { margin-right: var(--gap); }
.margin-right-s { margin-right: var(--gap-double); }
.margin-right-m { margin-right: calc(var(--gap) * 3); }
.margin-right-l { margin-right: calc(var(--gap-double) * 2); }
.margin-right-xl { margin-right: calc(var(--gap-double) * 3); }
.margin-right-none { margin-right: 0 !important; }
.margin-right-5 { margin-right: 5px; }
.margin-right-10 { margin-right: 10px; }
.margin-right-30 { margin-right: 30px; }

.margin-bottom-xxs { margin-bottom: calc(var(--gap) * 0.5); }
.margin-bottom-xs { margin-bottom: var(--gap); }
.margin-bottom-s { margin-bottom: var(--gap-double); }
.margin-bottom-m { margin-bottom: calc(var(--gap) * 3); }
.margin-bottom-l { margin-bottom: calc(var(--gap-double) * 2); }
.margin-bottom-xl { margin-bottom: calc(var(--gap-double) * 3); }
.margin-bottom-none { margin-bottom: 0 !important; }

.margin-left-xxs { margin-left: calc(var(--gap) * 0.5); }
.margin-left-xs { margin-left: var(--gap); }
.margin-left-s { margin-left: var(--gap-double); }
.margin-left-m { margin-left: calc(var(--gap) * 3); }
.margin-left-l { margin-left: calc(var(--gap-double) * 2); }
.margin-left-xl { margin-left: calc(var(--gap-double) * 3); }
.margin-left-5 { margin-left: 5px; }
.margin-left-10 { margin-left: 10px; }

/* All sides margin */
.margin-xxs { margin: calc(var(--gap) * 0.5); }
.margin-xs { margin: var(--gap); }
.margin-s { margin: var(--gap-double); }
.margin-m { margin: calc(var(--gap) * 3); }
.margin-l { margin: calc(var(--gap-double) * 2); }
.margin-xl { margin: calc(var(--gap-double) * 3); }
.margin-10 { margin: 10px; }

/* Padding utilities */
.padding-top-xxs { padding-top: calc(var(--gap) * 0.5); }
.padding-top-xs { padding-top: var(--gap); }
.padding-top-s { padding-top: var(--gap-double); }
.padding-top-m { padding-top: calc(var(--gap) * 3); }
.padding-top-l { padding-top: calc(var(--gap-double) * 2); }
.padding-top-xl { padding-top: calc(var(--gap-double) * 3); }
.padding-top-none { padding-top: 0 !important; }

.padding-right-xxs { padding-right: calc(var(--gap) * 0.5); }
.padding-right-xs { padding-right: var(--gap); }
.padding-right-s { padding-right: var(--gap-double); }
.padding-right-m { padding-right: calc(var(--gap) * 3); }
.padding-right-l { padding-right: calc(var(--gap-double) * 2); }
.padding-right-xl { padding-right: calc(var(--gap-double) * 3); }
.padding-right-none { padding-right: 0 !important; }

.padding-bottom-xxs { padding-bottom: calc(var(--gap) * 0.5); }
.padding-bottom-xs { padding-bottom: var(--gap); }
.padding-bottom-s { padding-bottom: var(--gap-double); }
.padding-bottom-m { padding-bottom: calc(var(--gap) * 3); }
.padding-bottom-l { padding-bottom: calc(var(--gap-double) * 2); }
.padding-bottom-xl { padding-bottom: calc(var(--gap-double) * 3); }
.padding-bottom-none { padding-bottom: 0 !important; }
.padding-bottom-5 { padding-bottom: 5px; }
.padding-bottom-100 { padding-bottom: 100px; }

.padding-left-xxs { padding-left: calc(var(--gap) * 0.5); }
.padding-left-xs { padding-left: var(--gap); }
.padding-left-s { padding-left: var(--gap-double); }
.padding-left-m { padding-left: calc(var(--gap) * 3); }
.padding-left-l { padding-left: calc(var(--gap-double) * 2); }
.padding-left-xl { padding-left: calc(var(--gap-double) * 3); }

/* All sides padding */
.padding-xxs { padding: calc(var(--gap) * 0.5); }
.padding-xs { padding: var(--gap); }
.padding-s { padding: var(--gap-double); }
.padding-m { padding: calc(var(--gap) * 3); }
.padding-l { padding: calc(var(--gap-double) * 2); }
.padding-xl { padding: calc(var(--gap-double) * 3); }
.padding-10 { padding: 10px; }

/* Color Utilities (Athena - Generated Classes) */
.vk-cl-positive { color: var(--color-positive); }
.vk-cl-negative { color: var(--color-negative); }
.vk-cl-warning { color: var(--color-warning); }
.vk-cl-info { color: var(--cl-hard); }
.vk-cl-pending { color: var(--cl-medium); }
.vk-cl-success { color: var(--color-success); }
.vk-cl-error { color: var(--color-error); }
.vk-cl-hard { color: var(--cl-hard); }
.vk-cl-soft { color: var(--cl-soft); }
.vk-cl-gray { color: var(--gray); }
.vk-cl-gray-dark { color: var(--gray-dark); }
.vk-cl-gray-darker { color: var(--gray-darker); }
.vk-cl-white { color: var(--white); }

.vk-bg-positive { background-color: var(--color-positive); }
.vk-bg-negative { background-color: var(--color-negative); }
.vk-bg-warning { background-color: var(--color-warning); }
.vk-bg-info { background-color: var(--cl-hard); }
.vk-bg-pending { background-color: var(--cl-medium); }
.vk-bg-success { background-color: var(--color-success); }
.vk-bg-error { background-color: var(--color-error); }
.vk-bg-hard { background-color: var(--cl-hard); }
.vk-bg-soft { background-color: var(--cl-soft); }
.vk-bg-gray { background-color: var(--gray); }
.vk-bg-gray-light { background-color: var(--gray-light); }
.vk-bg-gray-dark { background-color: var(--gray-dark); }
.vk-bg-gray-darker { background-color: var(--gray-darker); }
.vk-bg-white { background-color: var(--white); }

/* Module and Entity Color Classes (Athena) */
.vk-cl-assignments { color: #8e7cc3; }
.vk-cl-documentation { color: #d17aa2; }
.vk-cl-plans { color: #c06c84; }
.vk-cl-notes { color: #7fa650; }
.vk-cl-learning-resources { color: #e8a75d; }
.vk-cl-personal-files { color: #7fc7b8; }

.vk-bg-assignments { background-color: #8e7cc3; }
.vk-bg-documentation { background-color: #d17aa2; }
.vk-bg-plans { background-color: #c06c84; }
.vk-bg-notes { background-color: #7fa650; }
.vk-bg-learning-resources { background-color: #e8a75d; }
.vk-bg-personal-files { background-color: #7fc7b8; }

/* Entity colors */
.vk-cl-person { color: var(--cl-medium); }
.vk-cl-course { color: #9fc763; }
.vk-cl-course-group { color: #c179a1; }
.vk-cl-class { color: #6b98d9; }
.vk-cl-school { color: #c5d86d; }
.vk-cl-collaboration { color: #ff9a76; }
.vk-cl-plan { color: #c06c84; }

.vk-bg-person { background-color: var(--cl-medium); }
.vk-bg-course { background-color: #9fc763; }
.vk-bg-course-group { background-color: #c179a1; }
.vk-bg-class { background-color: #6b98d9; }
.vk-bg-school { background-color: #c5d86d; }
.vk-bg-collaboration { background-color: #ff9a76; }
.vk-bg-plan { background-color: #c06c84; }

/* Messenger role colors */
.vk-cl-messenger-supervisor { color: #7fc7b8; }
.vk-cl-messenger-staff { color: #8e7cc3; }
.vk-cl-messenger-student { color: #77c1d2; }
.vk-cl-messenger-custodian { color: #e8a75d; }

.vk-bg-messenger-supervisor { background-color: #7fc7b8; }
.vk-bg-messenger-staff { background-color: #8e7cc3; }
.vk-bg-messenger-student { background-color: #77c1d2; }
.vk-bg-messenger-custodian { background-color: #e8a75d; }

/* Communication group colors */
.vk-cl-communication { color: #6b98d9; }
.vk-cl-preschool { color: #d17aa2; }
.vk-cl-absence { color: #ff9a76; }

.vk-bg-communication { background-color: #6b98d9; }
.vk-bg-preschool { background-color: #d17aa2; }
.vk-bg-absence { background-color: #ff9a76; }

/* Accessibility Utilities (Athena) */
.sr-only,
.visuallyhidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.sr-only-cell {
    visibility: collapse;
    padding: 0 !important;
    line-height: 0 !important;
}

.outline-offset {
    outline-offset: 5px;
}

.outline-inset {
    outline-offset: -5px;
}

.outline-inverted:focus {
    outline-color: var(--white);
}

/* Responsive Visibility Utilities (Athena) */
.hidden-phone {
    display: none !important;
}

@media (min-width: 600px) {
    .hidden-phone {
        display: block !important;
    }
}

.visible-phone {
    display: none !important;
}

@media (max-width: 599px) {
    .visible-phone {
        display: block !important;
    }
}

.hidden-desktop {
    display: block !important;
}

@media (min-width: 1280px) {
    .hidden-desktop {
        display: none !important;
    }
}

.visible-desktop {
    display: none !important;
}

@media (min-width: 1280px) {
    .visible-desktop {
        display: block !important;
    }
}

.hidden-tablet {
    display: block !important;
}

@media (min-width: 600px) and (max-width: 1279px) {
    .hidden-tablet {
        display: none !important;
    }
}

.visible-tablet {
    display: none !important;
}

@media (min-width: 600px) and (max-width: 1279px) {
    .visible-tablet {
        display: block !important;
    }
}

/* Universal Visibility */
.hide,
.hidden {
    display: none !important;
}

.visible,
.show {
    display: block !important;
}

/* Print-Specific Classes (Athena) */
@media print {
    .visible-print {
        display: block !important;
    }

    .visible-print-inline {
        display: inline !important;
    }

    .visible-print-inline-block {
        display: inline-block !important;
    }

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

    .margin-collapse-print {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
}

@media not print {
    .visible-print,
    .visible-print-inline,
    .visible-print-inline-block {
        display: none !important;
    }
}

/* VK-Expansion-Panel print behavior */
@media print {
    .vk-expansion-panel--expand-in-print .vk-expansion-panel__content {
        display: block !important;
    }

    .hide-closed-expansion-panels-in-print .vk-expansion-panel--expand-in-print:not(.vk-expansion-panel--expanded) {
        display: none;
    }
}

/* Typography Reset (Athena) */
.text-style-reset {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    text-transform: none;
    color: inherit;
}
.hidden {
    display: none !important;
}

.hidden-phone {
    display: inline;
}

@media (max-width: 599px) {
    .hidden-phone {
        display: none !important;
    }
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* Skip Link Styling (Athena Pattern) */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--cl-hard);
    color: white;
    padding: 8px 16px;
    text-decoration: none;
    z-index: 100;
    border-radius: 0 0 4px 0;
}

.skip-link:focus {
    top: 0;
}

.skip-link mark {
    background: none;
    color: inherit;
    font-weight: 500;
}

/* Dark mode skip link */
body.dark-mode .skip-link {
    background: #6b8ed9;
}

.text-center {
    text-align: center;
}

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

.margin-bottom-s {
    margin-bottom: var(--gap);
}

.margin-bottom-m {
    margin-bottom: var(--gap-double);
}

.padding-m {
    padding: var(--gap-double);
}