/*
 * Vklass V2 component stylesheet for mockups.
 *
 * Implements compact CSS for V2 component classes used in real V2 views:
 *   - .mdc-button (+ --outlined, --raised, --vk-discrete, --vk-stretch, --vk-lower-case)
 *   - .vk-textfield, .vk-field, .mdc-select, .vk-validation
 *   - .vk-message-box (success/info/warning/danger, --outlined, --leading-icon)
 *   - .vk-notification, .vk-call-to-action, .vk-box-link
 *   - .vk-badge (--slim), .vk-counter, .vk-counter--tiny
 *   - .vk-grid-table, .mdc-layout-grid (lightweight)
 *   - .mdc-tab-bar, .mdc-tab, .mdc-form-field, .mdc-checkbox, .mdc-radio, .mdc-switch (visual only)
 *   - .vk-icon-badge, .vk-card
 *
 * Mirrors tokens from
 *   /data/development/Vklass/V2/src/VklassFrontEnd/scss
 *   (_variables.scss / _colors-palette.scss / _colors.scss / typography.scss).
 *
 * Scoped to [data-mockup-theme="vklassv2"] so existing Modern/Athena mockups
 * are untouched.
 */

html[data-mockup-theme="vklassv2"] .v2-components,
html[data-mockup-theme="vklassv2"] [data-v2-components] {
    --v2-icon-default: 24px;
    color: var(--v2-text);
}

/* --- Layout helpers ----------------------------------------------------- */
html[data-mockup-theme="vklassv2"] .v2-section {
    background: var(--v2-surface);
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius);
    padding: var(--v2-gap-double);
    margin-bottom: var(--v2-gap-double);
    box-shadow: var(--v2-shadow-1);
}

html[data-mockup-theme="vklassv2"] .v2-section__title {
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--v2-text);
    margin: 0 0 6px 0;
}

html[data-mockup-theme="vklassv2"] .v2-section__hint {
    color: var(--v2-text-muted);
    font-size: 0.857rem;
    margin: 0 0 var(--v2-gap) 0;
}

html[data-mockup-theme="vklassv2"] .v2-stack {
    display: grid;
    gap: var(--v2-gap);
}

html[data-mockup-theme="vklassv2"] .v2-inline {
    display: flex;
    flex-wrap: wrap;
    gap: var(--v2-gap);
    align-items: center;
}

html[data-mockup-theme="vklassv2"] .v2-grid-2,
html[data-mockup-theme="vklassv2"] .v2-grid-3 {
    display: grid;
    gap: var(--v2-gap);
}
html[data-mockup-theme="vklassv2"] .v2-grid-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
html[data-mockup-theme="vklassv2"] .v2-grid-3 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* --- Buttons (mdc-button) ----------------------------------------------- */
html[data-mockup-theme="vklassv2"] .mdc-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 64px;
    height: 36px;
    padding: 0 14px;
    border: 0;
    border-radius: 2px;
    background: transparent;
    color: var(--v2-primary);
    font-family: var(--v2-font-family);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.0892857143em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 120ms ease, box-shadow 120ms ease;
}

html[data-mockup-theme="vklassv2"] .mdc-button:hover { background: rgba(38, 65, 143, 0.08); }
html[data-mockup-theme="vklassv2"] .mdc-button:focus-visible { outline: 2px solid var(--v2-primary); outline-offset: 2px; }

html[data-mockup-theme="vklassv2"] .mdc-button--outlined { border: 1px solid var(--v2-input-border); }
html[data-mockup-theme="vklassv2"] .mdc-button--raised,
html[data-mockup-theme="vklassv2"] .mdc-button--unelevated {
    background: var(--v2-primary);
    color: var(--v2-white);
    box-shadow: var(--v2-shadow-1);
}
html[data-mockup-theme="vklassv2"] .mdc-button--raised:hover,
html[data-mockup-theme="vklassv2"] .mdc-button--unelevated:hover { background: var(--v2-primary-hover); }

html[data-mockup-theme="vklassv2"] .mdc-button--vk-discrete {
    color: var(--v2-text);
    text-transform: none;
    font-weight: 400;
}
html[data-mockup-theme="vklassv2"] .mdc-button--vk-discrete .mdc-button__icon,
html[data-mockup-theme="vklassv2"] .mdc-button--vk-discrete .material-icons { color: var(--v2-primary); }

html[data-mockup-theme="vklassv2"] .mdc-button--vk-stretch { width: 100%; justify-content: center; }
html[data-mockup-theme="vklassv2"] .mdc-button--vk-lower-case { text-transform: none; }
html[data-mockup-theme="vklassv2"] .mdc-button[disabled],
html[data-mockup-theme="vklassv2"] .mdc-button:disabled {
    color: var(--v2-text-soft); background: var(--v2-gray-lightest); cursor: not-allowed; box-shadow: none;
}

html[data-mockup-theme="vklassv2"] .mdc-button__icon,
html[data-mockup-theme="vklassv2"] .mdc-button .material-icons { font-size: 18px; }

/* Floating Action Button */
html[data-mockup-theme="vklassv2"] .mdc-fab {
    width: 56px; height: 56px; border-radius: 28px; border: 0;
    background: var(--v2-primary); color: var(--v2-white);
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 3px 5px rgba(0,0,0,0.20), 0 6px 10px rgba(0,0,0,0.14);
    cursor: pointer;
}
html[data-mockup-theme="vklassv2"] .mdc-fab--mini { width: 40px; height: 40px; border-radius: 20px; }
html[data-mockup-theme="vklassv2"] .mdc-fab:hover { background: var(--v2-primary-hover); }

/* --- Fields / forms ------------------------------------------------------ */
html[data-mockup-theme="vklassv2"] .vk-field {
    display: block;
    margin-bottom: var(--v2-gap);
}
html[data-mockup-theme="vklassv2"] .vk-field__label {
    display: block;
    font-size: 0.75rem;
    color: var(--v2-text-muted);
    font-weight: 400;
    margin-bottom: 4px;
}
html[data-mockup-theme="vklassv2"] .vk-field__description {
    display: block;
    font-size: 0.75rem;
    color: var(--v2-text-soft);
    margin-top: 4px;
}
html[data-mockup-theme="vklassv2"] .vk-field--invalid .vk-textfield__input,
html[data-mockup-theme="vklassv2"] .vk-field--invalid .mdc-select__native-control { border-bottom-color: var(--v2-danger); }
html[data-mockup-theme="vklassv2"] .vk-field__error,
html[data-mockup-theme="vklassv2"] .vk-validation__error { color: var(--v2-danger); font-size: 0.75rem; margin-top: 4px; display: block; }

html[data-mockup-theme="vklassv2"] .vk-textfield { position: relative; }
html[data-mockup-theme="vklassv2"] .vk-textfield__input,
html[data-mockup-theme="vklassv2"] .mdc-select__native-control,
html[data-mockup-theme="vklassv2"] textarea.vk-textfield__input,
html[data-mockup-theme="vklassv2"] input.vk-textfield__input,
html[data-mockup-theme="vklassv2"] select.mdc-select__native-control {
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--v2-input-border);
    background: transparent;
    padding: 6px 2px 7px;
    font: inherit;
    color: var(--v2-text);
    outline: none;
    transition: border-color 120ms ease;
}
html[data-mockup-theme="vklassv2"] .vk-textfield__input:focus,
html[data-mockup-theme="vklassv2"] .mdc-select__native-control:focus {
    border-bottom: 2px solid var(--v2-primary);
    padding-bottom: 6px;
}
html[data-mockup-theme="vklassv2"] textarea.vk-textfield__input { min-height: 84px; resize: vertical; }

/* Select */
html[data-mockup-theme="vklassv2"] .mdc-select { position: relative; display: block; }
html[data-mockup-theme="vklassv2"] .mdc-select__native-control { appearance: none; padding-right: 24px; }
html[data-mockup-theme="vklassv2"] .mdc-select::after {
    content: "arrow_drop_down";
    font-family: "Material Icons";
    position: absolute; right: 0; top: 50%; transform: translateY(-50%);
    color: var(--v2-text-muted); pointer-events: none;
}

/* Checkbox/radio/switch (visual) */
html[data-mockup-theme="vklassv2"] .mdc-form-field { display: inline-flex; align-items: center; gap: 8px; color: var(--v2-text); }
html[data-mockup-theme="vklassv2"] .mdc-checkbox input[type=checkbox],
html[data-mockup-theme="vklassv2"] .mdc-radio input[type=radio] { accent-color: var(--v2-primary); width: 18px; height: 18px; }

html[data-mockup-theme="vklassv2"] .mdc-switch { position: relative; display: inline-block; width: 36px; height: 14px; }
html[data-mockup-theme="vklassv2"] .mdc-switch input { position: absolute; opacity: 0; }
html[data-mockup-theme="vklassv2"] .mdc-switch__track { display: block; background: var(--v2-gray-light); height: 14px; border-radius: 7px; }
html[data-mockup-theme="vklassv2"] .mdc-switch__thumb {
    position: absolute; top: -3px; left: 0; width: 20px; height: 20px; border-radius: 10px;
    background: var(--v2-white); border: 1px solid var(--v2-gray-light); box-shadow: var(--v2-shadow-1);
    transition: transform 120ms ease;
}
html[data-mockup-theme="vklassv2"] .mdc-switch input:checked ~ .mdc-switch__track { background: var(--v2-primary-soft); }
html[data-mockup-theme="vklassv2"] .mdc-switch input:checked ~ .mdc-switch__thumb { transform: translateX(18px); background: var(--v2-primary); border-color: var(--v2-primary); }

/* --- Badges / counters --------------------------------------------------- */
html[data-mockup-theme="vklassv2"] .vk-badge {
    display: inline-flex; align-items: center; gap: 6px;
    height: 30px; padding: 0 15px; border-radius: 15px;
    background: var(--v2-gray-light); color: var(--v2-white);
    font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.01em; white-space: nowrap;
}
html[data-mockup-theme="vklassv2"] .vk-badge--slim { height: auto; padding: 3px 10px; border-radius: 14px; text-transform: none; }
html[data-mockup-theme="vklassv2"] .vk-badge.vk-cl-green { background: var(--v2-success); }
html[data-mockup-theme="vklassv2"] .vk-badge.vk-cl-yellow { background: var(--v2-warning); }
html[data-mockup-theme="vklassv2"] .vk-badge.vk-cl-red { background: var(--v2-danger); }
html[data-mockup-theme="vklassv2"] .vk-badge.vk-cl-primary { background: var(--v2-primary); }
html[data-mockup-theme="vklassv2"] .vk-badge.vk-cl-graphic { background: var(--v2-gray-graphic); }

html[data-mockup-theme="vklassv2"] .vk-counter {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--v2-primary); font-weight: 500;
}
html[data-mockup-theme="vklassv2"] .vk-counter::before {
    content: attr(data-vk-count);
    background: var(--v2-danger); color: var(--v2-white);
    min-width: 25px; height: 24px; line-height: 24px; padding: 0 5px;
    border-radius: 12px; text-align: center; font-size: 0.75rem;
}
html[data-mockup-theme="vklassv2"] .vk-counter--tiny::before { min-width: 15px; height: 15px; line-height: 15px; font-size: 0.6875rem; }
html[data-mockup-theme="vklassv2"] .vk-counter.vk-cl-primary::before { background: var(--v2-primary); }

/* --- Icon badge --------------------------------------------------------- */
html[data-mockup-theme="vklassv2"] .vk-icon-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 20px;
    background: var(--v2-primary-soft); color: var(--v2-primary);
}
html[data-mockup-theme="vklassv2"] .vk-icon-badge .material-icons { font-size: 22px; }
html[data-mockup-theme="vklassv2"] .vk-icon-badge--graphic { background: var(--v2-gray-lighter); color: var(--v2-text-muted); }
html[data-mockup-theme="vklassv2"] .vk-icon-badge--success { background: var(--v2-success-soft); color: var(--v2-success); }
html[data-mockup-theme="vklassv2"] .vk-icon-badge--warning { background: var(--v2-warning-soft); color: var(--v2-warning); }
html[data-mockup-theme="vklassv2"] .vk-icon-badge--danger { background: var(--v2-danger-soft); color: var(--v2-danger); }

/* --- Card --------------------------------------------------------------- */
html[data-mockup-theme="vklassv2"] .vk-card {
    display: block;
    background: var(--v2-surface);
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius);
    padding: var(--v2-gap-double);
    box-shadow: var(--v2-shadow-1);
}
html[data-mockup-theme="vklassv2"] .vk-card__header {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: var(--v2-gap);
}
html[data-mockup-theme="vklassv2"] .vk-card__title {
    margin: 0; font-size: 1.0rem; font-weight: 500; color: var(--v2-text);
}
html[data-mockup-theme="vklassv2"] .vk-card__subtitle {
    margin: 0; color: var(--v2-text-muted); font-size: 0.857rem;
}

/* --- Message box / banner ----------------------------------------------- */
html[data-mockup-theme="vklassv2"] .vk-message-box {
    display: block; padding: var(--v2-gap); border-radius: 2px; color: var(--v2-white);
    background: var(--v2-text-muted); margin-bottom: var(--v2-gap);
}
html[data-mockup-theme="vklassv2"] .vk-message-box.success { background: var(--v2-success); }
html[data-mockup-theme="vklassv2"] .vk-message-box.info,
html[data-mockup-theme="vklassv2"] .vk-message-box.default { background: var(--v2-primary); }
html[data-mockup-theme="vklassv2"] .vk-message-box.warning { background: var(--v2-warning); }
html[data-mockup-theme="vklassv2"] .vk-message-box.danger,
html[data-mockup-theme="vklassv2"] .vk-message-box.alert { background: var(--v2-danger); }
html[data-mockup-theme="vklassv2"] .vk-message-box--outlined { background: var(--v2-surface); color: var(--v2-text); border: 1px solid currentColor; }
html[data-mockup-theme="vklassv2"] .vk-message-box--outlined.success { border-color: var(--v2-success); color: var(--v2-success); }
html[data-mockup-theme="vklassv2"] .vk-message-box--outlined.warning { border-color: var(--v2-warning); color: var(--v2-warning); }
html[data-mockup-theme="vklassv2"] .vk-message-box--outlined.danger { border-color: var(--v2-danger); color: var(--v2-danger); }
html[data-mockup-theme="vklassv2"] .vk-message-box--outlined.info { border-color: var(--v2-primary); color: var(--v2-primary); }
html[data-mockup-theme="vklassv2"] .vk-message-box--leading-icon {
    display: flex; align-items: center; gap: 12px;
}
html[data-mockup-theme="vklassv2"] .vk-message-box a { color: inherit; text-decoration: underline; }

/* --- Notification ------------------------------------------------------- */
html[data-mockup-theme="vklassv2"] .vk-notification {
    display: flex; gap: 12px; padding: 16px 14px;
    background: var(--v2-surface); border-bottom: 1px solid var(--v2-border);
}
html[data-mockup-theme="vklassv2"] .vk-notification__header { display: flex; align-items: baseline; gap: 8px; }
html[data-mockup-theme="vklassv2"] .vk-notification__title { font-weight: 500; color: var(--v2-text); margin: 0; font-size: 0.929rem; }
html[data-mockup-theme="vklassv2"] .vk-notification__time { color: var(--v2-text-muted); font-size: 0.75rem; }
html[data-mockup-theme="vklassv2"] .vk-notification__content { color: var(--v2-text); font-size: 0.875rem; margin-top: 4px; }
html[data-mockup-theme="vklassv2"] .vk-notification__actions { margin-top: 8px; display: flex; gap: 8px; }

/* --- Call-to-action ----------------------------------------------------- */
html[data-mockup-theme="vklassv2"] .vk-call-to-action {
    display: flex; align-items: center; gap: 12px;
    padding: var(--v2-gap);
    background: var(--v2-primary-soft); border: 1px solid var(--v2-primary-soft);
    color: var(--v2-text); text-decoration: none; border-radius: 2px;
}
html[data-mockup-theme="vklassv2"] .vk-call-to-action__title { display: block; font-weight: 500; color: var(--v2-black); }
html[data-mockup-theme="vklassv2"] .vk-call-to-action__context { display: block; font-size: 0.75rem; color: var(--v2-text-muted); margin-top: 2px; }

/* --- Box link ----------------------------------------------------------- */
html[data-mockup-theme="vklassv2"] .vk-box-link {
    display: grid; grid-template-columns: 60px 1fr 1fr 56px; align-items: center; gap: 12px;
    background: var(--v2-primary-soft); padding: var(--v2-gap) 0; color: var(--v2-text); text-decoration: none;
    font-size: 0.75rem; border-radius: 2px;
}
html[data-mockup-theme="vklassv2"] .vk-box-link__icon, html[data-mockup-theme="vklassv2"] .vk-box-link__arrow { text-align: center; color: var(--v2-primary); }
html[data-mockup-theme="vklassv2"] .vk-box-link__title { font-size: 0.929rem; font-weight: 500; color: var(--v2-black); }

/* --- Grid table / table ------------------------------------------------- */
html[data-mockup-theme="vklassv2"] .vk-grid-table { display: block; }
html[data-mockup-theme="vklassv2"] .vk-grid-table__row {
    display: grid; grid-template-columns: 80px 1fr 1fr 110px 110px;
    align-items: center; padding: 10px 12px; gap: 12px;
    min-height: 60px; border-top: 1px solid var(--v2-border);
}
html[data-mockup-theme="vklassv2"] .vk-grid-table__row:last-child { border-bottom: 1px solid var(--v2-border); }
html[data-mockup-theme="vklassv2"] .vk-grid-table__row--headers {
    font-size: 0.75rem; color: var(--v2-text-muted); text-transform: uppercase; letter-spacing: 0.04em; min-height: 36px; border-top: 0;
}

html[data-mockup-theme="vklassv2"] table.vk-content-table { width: 100%; border-collapse: collapse; background: var(--v2-surface); }
html[data-mockup-theme="vklassv2"] table.vk-content-table th,
html[data-mockup-theme="vklassv2"] table.vk-content-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--v2-border); }
html[data-mockup-theme="vklassv2"] table.vk-content-table th { font-size: 0.75rem; text-transform: uppercase; color: var(--v2-text-muted); letter-spacing: 0.04em; font-weight: 500; }

/* --- Tabs --------------------------------------------------------------- */
html[data-mockup-theme="vklassv2"] .mdc-tab-bar { display: flex; gap: 4px; border-bottom: 1px solid var(--v2-border); }
html[data-mockup-theme="vklassv2"] .mdc-tab {
    appearance: none; background: transparent; border: 0; padding: 0 16px; height: 48px;
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--v2-font-family); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.0892857143em; text-transform: uppercase;
    color: var(--v2-text-muted); cursor: pointer; position: relative;
}
html[data-mockup-theme="vklassv2"] .mdc-tab--active { color: var(--v2-primary); }
html[data-mockup-theme="vklassv2"] .mdc-tab--active::after {
    content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; background: var(--v2-primary);
}

/* --- Chips/pills (validation/notice tags) ------------------------------- */
html[data-mockup-theme="vklassv2"] .vk-chip {
    display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px;
    border-radius: 14px; background: var(--v2-gray-lighter); color: var(--v2-text);
    font-size: 0.75rem; font-weight: 500;
}
html[data-mockup-theme="vklassv2"] .vk-chip--primary { background: var(--v2-primary-soft); color: var(--v2-primary); }
html[data-mockup-theme="vklassv2"] .vk-chip--success { background: var(--v2-success-soft); color: var(--v2-success); }
html[data-mockup-theme="vklassv2"] .vk-chip--warning { background: var(--v2-warning-soft); color: var(--v2-warning); }
html[data-mockup-theme="vklassv2"] .vk-chip--danger  { background: var(--v2-danger-soft);  color: var(--v2-danger); }

/* --- Component-page shell ---------------------------------------------- */
html[data-mockup-theme="vklassv2"] .v2-components__hero {
    background: linear-gradient(180deg, var(--v2-primary) 0%, var(--v2-primary-hover) 100%);
    color: var(--v2-white);
    padding: 28px 32px;
    border-radius: var(--v2-radius);
    box-shadow: var(--v2-shadow-elev);
    margin-bottom: var(--v2-gap-double);
}
html[data-mockup-theme="vklassv2"] .v2-components__hero h1 { margin: 0 0 6px 0; font-weight: 500; font-size: 1.5rem; }
html[data-mockup-theme="vklassv2"] .v2-components__hero p  { margin: 0; opacity: 0.92; max-width: 720px; }
html[data-mockup-theme="vklassv2"] .v2-components__hero a  { color: var(--v2-white); text-decoration: underline; }

html[data-mockup-theme="vklassv2"] .v2-components__toc {
    display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0 0; padding: 0;
}
html[data-mockup-theme="vklassv2"] .v2-components__toc li { list-style: none; }
html[data-mockup-theme="vklassv2"] .v2-components__toc a {
    display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 12px;
    background: rgba(255,255,255,0.16); color: var(--v2-white); text-decoration: none;
    font-size: 0.75rem; font-weight: 500;
}
html[data-mockup-theme="vklassv2"] .v2-components__toc a:hover { background: rgba(255,255,255,0.28); }

html[data-mockup-theme="vklassv2"] .v2-components__token {
    display: inline-flex; align-items: center; gap: 8px; padding: 4px 8px;
    background: var(--v2-gray-lightest); border: 1px solid var(--v2-border);
    border-radius: 4px; font-family: ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace; font-size: 0.75rem;
}
html[data-mockup-theme="vklassv2"] .v2-components__swatch {
    width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.12);
}