/*
 * Vklass V2 theme for generated mockups.
 *
 * Values mirror /data/development/Vklass/V2/src/VklassFrontEnd/scss
 * (_variables.scss + _colors-palette.scss + _colors.scss + typography.scss):
 *   - font-family: Roboto, sans-serif
 *   - base html font-size: 14px (rem-based)
 *   - primary brand: $clHard         #26418f (mdcThemePrimary)
 *   - primary on-white: $clMedium    #4e6ed0 (== $clHardWithWhite)
 *   - soft tints: $clSofter #a6b6e8 / $clSuperSoft #dbe1f5
 *   - grays: $grayLightest #fafafa / $grayLighter #f0f0f0 / $graySmooth #e0e0e0
 *            $grayLight #c8c8c8 / $grayGraphics #949494 / $gray #767676 / $grayDark #595959
 *   - status: success $clGreen #3e8442 / warning $clYellow #b36200 / danger $clRed #eb0017
 *   - spacing: gap 13px, gapDouble 26px
 *   - toolbar 65px (phone 55px), permanent drawer 294px, contentMax 1562px
 *
 * Scoped to data-mockup-theme="vklassv2" so existing Modern/Athena mockups
 * are not affected.
 */

html[data-mockup-theme="vklassv2"],
html[data-mockup-theme="vklassv2"] body,
body[data-mockup-theme="vklassv2"] {
    /* Brand */
    --v2-primary: #26418f;         /* $clHard */
    --v2-primary-hover: #1b3173;
    --v2-primary-on-white: #4e6ed0;/* $clHardWithWhite / $clMedium */
    --v2-primary-soft: #dbe1f5;    /* $clSuperSoft */
    --v2-primary-softer: #c3cbef;  /* $clSoftBackground */
    --v2-primary-softest: #f1f3fb; /* matches body tint */

    /* Status */
    --v2-success: #3e8442;          /* $clGreen */
    --v2-success-graphic: #4ea651;  /* $clGreenGraphics */
    --v2-success-soft: #e6f1e7;
    --v2-warning: #b36200;          /* $clYellow */
    --v2-warning-graphic: #db7500;  /* $clYellowGraphics */
    --v2-warning-soft: #fdf1e0;
    --v2-danger: #eb0017;           /* $clRed */
    --v2-danger-graphic: #ff5c6c;
    --v2-danger-soft: #fdeaec;

    /* Neutrals (named directly from _colors-palette.scss) */
    --v2-white: #ffffff;
    --v2-gray-lightest: #fafafa;
    --v2-gray-lighter: #f0f0f0;
    --v2-gray-smooth: #e0e0e0;
    --v2-gray-light: #c8c8c8;
    --v2-gray-graphic: #949494;
    --v2-gray: #767676;
    --v2-gray-dark: #595959;
    --v2-gray-darker: #4a4a4a;
    --v2-black: #000000;

    /* Roles */
    --v2-page-bg: var(--v2-gray-lighter);    /* $adminBackground */
    --v2-surface: var(--v2-white);
    --v2-surface-subtle: var(--v2-gray-lightest);
    --v2-surface-muted: var(--v2-gray-lighter);
    --v2-border: var(--v2-gray-smooth);
    --v2-border-strong: var(--v2-gray-light);
    --v2-input-border: var(--v2-gray-graphic);
    --v2-text: var(--v2-gray-darker);        /* body text leans into $grayDarker */
    --v2-text-muted: var(--v2-gray);
    --v2-text-soft: var(--v2-gray-graphic);

    /* Typography */
    --v2-font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
    --v2-font-size: 14px;                    /* html font-size in V2 */
    --v2-line-height: 1.45;

    /* Spacing (matches $gap / $gapDouble) */
    --v2-gap: 13px;
    --v2-gap-half: 7px;
    --v2-gap-double: 26px;
    --v2-content-padding-h: 32px;            /* $contentPaddingHorizontalAbovePhone */
    --v2-content-padding-h-phone: 15px;
    --v2-content-padding-v: 52px;            /* $contentPaddingVertical */
    --v2-content-max: 1562px;                /* $contentContainerMaxWidth */

    /* App shell */
    --v2-toolbar-height: 65px;               /* $toolbarHeight */
    --v2-toolbar-height-phone: 55px;
    --v2-sidebar-width: 294px;               /* $permanentDrawerWidth */
    --v2-sidebar-collapsed: 52px;            /* $collapsibleDrawerClosedWidth ($gapDouble*2) */

    /* Shape & elevation (MDC-light, V2 is mostly flat with subtle elevation) */
    --v2-radius-sm: 2px;
    --v2-radius: 4px;
    --v2-radius-lg: 8px;
    --v2-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 1px rgba(0, 0, 0, 0.04);
    --v2-shadow-2: 0 2px 4px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.05);
    --v2-shadow-elev: 0 3px 12px rgba(38, 65, 143, 0.10);

    color: var(--v2-text);
    background: var(--v2-page-bg);
    font-family: var(--v2-font-family);
    font-size: var(--v2-font-size);
    line-height: var(--v2-line-height);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html[data-mockup-theme="vklassv2"] *,
html[data-mockup-theme="vklassv2"] *::before,
html[data-mockup-theme="vklassv2"] *::after {
    box-sizing: border-box;
}

html[data-mockup-theme="vklassv2"] a {
    color: var(--v2-primary-on-white);
    text-decoration: none;
}

html[data-mockup-theme="vklassv2"] a:hover {
    color: var(--v2-primary);
    text-decoration: underline;
}

/* App shell --------------------------------------------------------------- */
html[data-mockup-theme="vklassv2"] .vk-layout,
html[data-mockup-theme="vklassv2"] .app-shell,
html[data-mockup-theme="vklassv2"] .v2-app-shell {
    min-height: 100vh;
    background: var(--v2-page-bg);
    color: var(--v2-text);
}

/* App main (teacher/student/custodian): white toolbar per layout-blueprint toolbar.desktop */
html[data-mockup-theme="vklassv2"] .vk-layout--app-main .vk-layout__toolbar,
html[data-mockup-theme="vklassv2"] .vk-layout--app-main .topbar,
html[data-mockup-theme="vklassv2"] .vk-layout--app-main .app-header,
html[data-mockup-theme="vklassv2"] .vk-layout--app-main .v2-topbar,
html[data-mockup-theme="vklassv2"] .vk-layout--app-main .mdc-top-app-bar {
    min-height: var(--v2-toolbar-height);
    background: var(--v2-white);
    color: var(--v2-text);
    border-bottom: 1px solid var(--v2-gray-light);
    box-shadow: var(--v2-shadow-2);
    z-index: 20;
}

html[data-mockup-theme="vklassv2"] .vk-layout--app-main .vk-layout__toolbar a,
html[data-mockup-theme="vklassv2"] .vk-layout--app-main .topbar a,
html[data-mockup-theme="vklassv2"] .vk-layout--app-main .app-header a,
html[data-mockup-theme="vklassv2"] .vk-layout--app-main .v2-topbar a,
html[data-mockup-theme="vklassv2"] .vk-layout--app-main .mdc-top-app-bar a,
html[data-mockup-theme="vklassv2"] .vk-layout--app-main .v2-topbar .material-icons,
html[data-mockup-theme="vklassv2"] .vk-layout--app-main .vk-layout__toolbar .material-icons,
html[data-mockup-theme="vklassv2"] .vk-layout--app-main .toolbar-search__button .material-icons {
    color: var(--v2-gray-dark);
}

html[data-mockup-theme="vklassv2"] .vk-layout__logo,
html[data-mockup-theme="vklassv2"] .logo,
html[data-mockup-theme="vklassv2"] .brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    letter-spacing: 0.01em;
}

html[data-mockup-theme="vklassv2"] .vk-layout__menu,
html[data-mockup-theme="vklassv2"] .sidebar,
html[data-mockup-theme="vklassv2"] .side-nav,
html[data-mockup-theme="vklassv2"] .v2-sidebar {
    width: var(--v2-sidebar-width);
    background: var(--v2-surface);
    border-right: 1px solid var(--v2-border);
    color: var(--v2-text);
    box-shadow: none;
}

/* App main: white content area (production teacher/student shell) */
html[data-mockup-theme="vklassv2"] .vk-layout--app-main .vk-layout__content,
html[data-mockup-theme="vklassv2"] .vk-layout--app-main .vk-layout__main,
html[data-mockup-theme="vklassv2"] .vk-layout--app-main .content,
html[data-mockup-theme="vklassv2"] .vk-layout--app-main main,
html[data-mockup-theme="vklassv2"] .vk-layout--app-main .main-content,
html[data-mockup-theme="vklassv2"] .vk-layout--app-main .v2-content {
    background: var(--v2-white);
    color: var(--v2-text);
}

/* Admin: keep gray page background (do not apply app-main shell overrides) */
html[data-mockup-theme="vklassv2"] .vk-layout--app-admin main,
html[data-mockup-theme="vklassv2"] .vk-layout--app-admin .admin-main-content,
html[data-mockup-theme="vklassv2"] .vk-layout--app-admin .vk-layout__content,
html[data-mockup-theme="vklassv2"] .vk-layout--app-admin .main-content,
html[data-mockup-theme="vklassv2"] .vk-layout--app-admin .v2-content {
    background: var(--v2-page-bg);
    color: var(--v2-text);
}

html[data-mockup-theme="vklassv2"] .content-wrapper,
html[data-mockup-theme="vklassv2"] .page-content,
html[data-mockup-theme="vklassv2"] .v2-page-content,
html[data-mockup-theme="vklassv2"] .content-container {
    max-width: var(--v2-content-max);
    margin: 0 auto;
    padding: var(--v2-gap-double) var(--v2-content-padding-h);
}

/* Sidebar navigation ------------------------------------------------------ */
html[data-mockup-theme="vklassv2"] .vk-main-web-menu__link,
html[data-mockup-theme="vklassv2"] .sidebar__link,
html[data-mockup-theme="vklassv2"] .side-nav__link,
html[data-mockup-theme="vklassv2"] .nav-link,
html[data-mockup-theme="vklassv2"] .v2-nav-link {
    display: flex;
    align-items: center;
    min-height: 44px;
    gap: 12px;
    padding: 10px 18px;
    margin: 1px 8px;
    border-radius: var(--v2-radius);
    color: var(--v2-text);
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
}

html[data-mockup-theme="vklassv2"] .vk-main-web-menu__link .material-icons,
html[data-mockup-theme="vklassv2"] .sidebar__link .material-icons,
html[data-mockup-theme="vklassv2"] .side-nav__link .material-icons,
html[data-mockup-theme="vklassv2"] .nav-link .material-icons,
html[data-mockup-theme="vklassv2"] .v2-nav-link .material-icons {
    color: var(--v2-text-muted);
    font-size: 22px;
}

html[data-mockup-theme="vklassv2"] .vk-main-web-menu__link:hover,
html[data-mockup-theme="vklassv2"] .sidebar__link:hover,
html[data-mockup-theme="vklassv2"] .side-nav__link:hover,
html[data-mockup-theme="vklassv2"] .nav-link:hover,
html[data-mockup-theme="vklassv2"] .v2-nav-link:hover {
    background: var(--v2-gray-lightest);
    color: var(--v2-primary);
    text-decoration: none;
}

html[data-mockup-theme="vklassv2"] .vk-main-web-menu__link.activated,
html[data-mockup-theme="vklassv2"] .vk-main-web-menu__link.active,
html[data-mockup-theme="vklassv2"] .sidebar__link.active,
html[data-mockup-theme="vklassv2"] .side-nav__link.active,
html[data-mockup-theme="vklassv2"] .nav-link.active,
html[data-mockup-theme="vklassv2"] [aria-current="page"] {
    background: var(--v2-primary-soft);
    color: var(--v2-primary);
    font-weight: 500;
}

html[data-mockup-theme="vklassv2"] .vk-main-web-menu__link.activated .material-icons,
html[data-mockup-theme="vklassv2"] .nav-link.active .material-icons,
html[data-mockup-theme="vklassv2"] .v2-nav-link.active .material-icons,
html[data-mockup-theme="vklassv2"] [aria-current="page"] .material-icons {
    color: var(--v2-primary);
}

/* Page header / breadcrumbs ---------------------------------------------- */
html[data-mockup-theme="vklassv2"] .page-header,
html[data-mockup-theme="vklassv2"] .v2-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 var(--v2-gap-double);
    padding: 0 0 var(--v2-gap);
    border-bottom: 1px solid var(--v2-border);
    background: transparent;
    box-shadow: none;
}

html[data-mockup-theme="vklassv2"] .page-header h1,
html[data-mockup-theme="vklassv2"] .v2-page-title,
html[data-mockup-theme="vklassv2"] h1 {
    margin: 0;
    color: var(--v2-text);
    font-size: 28px;       /* matches V2 textHeaderL ~28px */
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0;
}

html[data-mockup-theme="vklassv2"] h2,
html[data-mockup-theme="vklassv2"] .text-header-l {
    font-size: 20px;
    font-weight: 500;
    color: var(--v2-text);
    margin: 0;
}

html[data-mockup-theme="vklassv2"] h3 {
    font-size: 16px;
    font-weight: 500;
    color: var(--v2-text);
    margin: 0;
}

html[data-mockup-theme="vklassv2"] .breadcrumb,
html[data-mockup-theme="vklassv2"] .breadcrumbs,
html[data-mockup-theme="vklassv2"] .v2-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 var(--v2-gap);
    color: var(--v2-text-muted);
    font-size: 13px;
}

/* Cards / surfaces ------------------------------------------------------- */
html[data-mockup-theme="vklassv2"] .card,
html[data-mockup-theme="vklassv2"] .panel,
html[data-mockup-theme="vklassv2"] .widget,
html[data-mockup-theme="vklassv2"] .vk-card,
html[data-mockup-theme="vklassv2"] .vkau-card,
html[data-mockup-theme="vklassv2"] .v2-card,
html[data-mockup-theme="vklassv2"] .mdc-card {
    background: var(--v2-surface);
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius-lg);
    box-shadow: var(--v2-shadow-1);
    color: var(--v2-text);
}

html[data-mockup-theme="vklassv2"] .card__header,
html[data-mockup-theme="vklassv2"] .card-header,
html[data-mockup-theme="vklassv2"] .panel__header,
html[data-mockup-theme="vklassv2"] .vk-card__header,
html[data-mockup-theme="vklassv2"] .vkau-card__header,
html[data-mockup-theme="vklassv2"] .v2-card__header {
    padding: var(--v2-gap) var(--v2-gap-double);
    border-bottom: 1px solid var(--v2-border);
    background: var(--v2-surface);
    font-weight: 500;
    color: var(--v2-text);
}

html[data-mockup-theme="vklassv2"] .card__body,
html[data-mockup-theme="vklassv2"] .card-body,
html[data-mockup-theme="vklassv2"] .panel__body,
html[data-mockup-theme="vklassv2"] .vk-card__body,
html[data-mockup-theme="vklassv2"] .vkau-card__body,
html[data-mockup-theme="vklassv2"] .v2-card__body {
    padding: var(--v2-gap-double);
}

/* Buttons (mdc-button / vkau-mdc-button look) ---------------------------- */
html[data-mockup-theme="vklassv2"] .btn,
html[data-mockup-theme="vklassv2"] button.btn,
html[data-mockup-theme="vklassv2"] .v2-btn,
html[data-mockup-theme="vklassv2"] .mdc-button,
html[data-mockup-theme="vklassv2"] .vkau-mdc-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 36px;
    padding: 0 16px;
    border: 0;
    border-radius: var(--v2-radius);
    background: transparent;
    color: var(--v2-primary);
    font-family: var(--v2-font-family);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.0892857143em;   /* MDC default */
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: none;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

html[data-mockup-theme="vklassv2"] .btn:hover,
html[data-mockup-theme="vklassv2"] .v2-btn:hover,
html[data-mockup-theme="vklassv2"] .mdc-button:hover {
    background: rgba(38, 65, 143, 0.06);
    text-decoration: none;
}

html[data-mockup-theme="vklassv2"] .btn-primary,
html[data-mockup-theme="vklassv2"] .btn--primary,
html[data-mockup-theme="vklassv2"] .v2-btn--primary,
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"] .btn-primary:hover,
html[data-mockup-theme="vklassv2"] .btn--primary:hover,
html[data-mockup-theme="vklassv2"] .v2-btn--primary:hover,
html[data-mockup-theme="vklassv2"] .mdc-button--raised:hover,
html[data-mockup-theme="vklassv2"] .mdc-button--unelevated:hover {
    background: var(--v2-primary-hover);
    color: var(--v2-white);
    box-shadow: var(--v2-shadow-2);
}

html[data-mockup-theme="vklassv2"] .btn-secondary,
html[data-mockup-theme="vklassv2"] .btn--secondary,
html[data-mockup-theme="vklassv2"] .mdc-button--outlined,
html[data-mockup-theme="vklassv2"] .v2-btn--outlined {
    border: 1px solid var(--v2-border-strong);
    background: var(--v2-surface);
    color: var(--v2-primary);
}

html[data-mockup-theme="vklassv2"] .btn-link,
html[data-mockup-theme="vklassv2"] .btn--text,
html[data-mockup-theme="vklassv2"] .v2-btn--text {
    border: 0;
    background: transparent;
    color: var(--v2-primary);
}

html[data-mockup-theme="vklassv2"] .btn-danger,
html[data-mockup-theme="vklassv2"] .v2-btn--danger {
    background: var(--v2-danger);
    color: var(--v2-white);
}

/* Forms (vk-textfield-ish) ----------------------------------------------- */
html[data-mockup-theme="vklassv2"] input:not([type="checkbox"]):not([type="radio"]),
html[data-mockup-theme="vklassv2"] select,
html[data-mockup-theme="vklassv2"] textarea,
html[data-mockup-theme="vklassv2"] .form-control,
html[data-mockup-theme="vklassv2"] .v2-input,
html[data-mockup-theme="vklassv2"] .vk-textfield__input {
    min-height: 40px;
    border: 1px solid var(--v2-input-border);
    border-radius: var(--v2-radius);
    background: var(--v2-surface);
    color: var(--v2-text);
    font-family: var(--v2-font-family);
    font-size: 14px;
    padding: 8px 12px;
    box-shadow: none;
}

html[data-mockup-theme="vklassv2"] input::placeholder,
html[data-mockup-theme="vklassv2"] textarea::placeholder {
    color: var(--v2-gray);
}

html[data-mockup-theme="vklassv2"] input:focus,
html[data-mockup-theme="vklassv2"] select:focus,
html[data-mockup-theme="vklassv2"] textarea:focus,
html[data-mockup-theme="vklassv2"] .form-control:focus,
html[data-mockup-theme="vklassv2"] .v2-input:focus {
    outline: 2px solid rgba(78, 110, 208, 0.28);
    border-color: var(--v2-primary);
}

html[data-mockup-theme="vklassv2"] label,
html[data-mockup-theme="vklassv2"] .form-label,
html[data-mockup-theme="vklassv2"] .vk-field__label,
html[data-mockup-theme="vklassv2"] .v2-label {
    color: var(--v2-text);
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 5px;
}

html[data-mockup-theme="vklassv2"] .help-text,
html[data-mockup-theme="vklassv2"] .form-help,
html[data-mockup-theme="vklassv2"] .v2-help-text {
    color: var(--v2-text-muted);
    font-size: 12px;
}

/* Tables ---------------------------------------------------------------- */
html[data-mockup-theme="vklassv2"] table,
html[data-mockup-theme="vklassv2"] .table,
html[data-mockup-theme="vklassv2"] .v2-table,
html[data-mockup-theme="vklassv2"] .vk-grid-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--v2-surface);
    color: var(--v2-text);
    font-size: 14px;
}

/* layout-blueprint skin-stripes needs separate borders for row gaps */
html[data-mockup-theme="vklassv2"] .vk-table--skin-stripes > table {
    border-collapse: separate;
    border-spacing: 0 3px;
}

html[data-mockup-theme="vklassv2"] th,
html[data-mockup-theme="vklassv2"] .table th,
html[data-mockup-theme="vklassv2"] .v2-table th {
    background: var(--v2-surface-subtle);
    color: var(--v2-text-muted);
    border-bottom: 1px solid var(--v2-border);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: left;
    padding: 12px 14px;
}

html[data-mockup-theme="vklassv2"] td,
html[data-mockup-theme="vklassv2"] .table td,
html[data-mockup-theme="vklassv2"] .v2-table td {
    border-bottom: 1px solid var(--v2-border);
    padding: 12px 14px;
    vertical-align: middle;
}

html[data-mockup-theme="vklassv2"] tr:hover td,
html[data-mockup-theme="vklassv2"] .table tr:hover td,
html[data-mockup-theme="vklassv2"] .v2-table tr:hover td {
    background: var(--v2-surface-subtle);
}

/* Badges / pills (vkau-pill) -------------------------------------------- */
html[data-mockup-theme="vklassv2"] .badge,
html[data-mockup-theme="vklassv2"] .status-badge,
html[data-mockup-theme="vklassv2"] .vk-pill,
html[data-mockup-theme="vklassv2"] .vkau-pill,
html[data-mockup-theme="vklassv2"] .v2-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 22px;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--v2-primary-soft);
    color: var(--v2-primary);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
}

html[data-mockup-theme="vklassv2"] .badge-success,
html[data-mockup-theme="vklassv2"] .badge--success,
html[data-mockup-theme="vklassv2"] .v2-badge--success {
    background: var(--v2-success-soft);
    color: var(--v2-success);
}

html[data-mockup-theme="vklassv2"] .badge-warning,
html[data-mockup-theme="vklassv2"] .badge--warning,
html[data-mockup-theme="vklassv2"] .v2-badge--warning {
    background: var(--v2-warning-soft);
    color: var(--v2-warning);
}

html[data-mockup-theme="vklassv2"] .badge-danger,
html[data-mockup-theme="vklassv2"] .badge--danger,
html[data-mockup-theme="vklassv2"] .v2-badge--danger {
    background: var(--v2-danger-soft);
    color: var(--v2-danger);
}

html[data-mockup-theme="vklassv2"] .badge-info,
html[data-mockup-theme="vklassv2"] .badge--info,
html[data-mockup-theme="vklassv2"] .v2-badge--info {
    background: var(--v2-primary-soft);
    color: var(--v2-primary);
}

/* Alerts / message-box --------------------------------------------------- */
html[data-mockup-theme="vklassv2"] .alert,
html[data-mockup-theme="vklassv2"] .message-box,
html[data-mockup-theme="vklassv2"] .v2-alert {
    border: 1px solid var(--v2-border);
    border-left: 4px solid var(--v2-primary);
    border-radius: var(--v2-radius);
    background: var(--v2-primary-soft);
    color: var(--v2-text);
    padding: 12px 16px;
}

html[data-mockup-theme="vklassv2"] .alert--success,
html[data-mockup-theme="vklassv2"] .message-box--success,
html[data-mockup-theme="vklassv2"] .v2-alert--success {
    border-left-color: var(--v2-success);
    background: var(--v2-success-soft);
}

html[data-mockup-theme="vklassv2"] .alert--warning,
html[data-mockup-theme="vklassv2"] .message-box--warning,
html[data-mockup-theme="vklassv2"] .v2-alert--warning {
    border-left-color: var(--v2-warning);
    background: var(--v2-warning-soft);
}

html[data-mockup-theme="vklassv2"] .alert--danger,
html[data-mockup-theme="vklassv2"] .message-box--danger,
html[data-mockup-theme="vklassv2"] .v2-alert--danger {
    border-left-color: var(--v2-danger);
    background: var(--v2-danger-soft);
}

/* Tabs ------------------------------------------------------------------- */
html[data-mockup-theme="vklassv2"] .tabs,
html[data-mockup-theme="vklassv2"] .v2-tabs,
html[data-mockup-theme="vklassv2"] .mdc-tab-bar {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--v2-border);
}

html[data-mockup-theme="vklassv2"] .tab,
html[data-mockup-theme="vklassv2"] .tabs__item,
html[data-mockup-theme="vklassv2"] .v2-tab,
html[data-mockup-theme="vklassv2"] .mdc-tab {
    padding: 12px 18px;
    border-bottom: 2px solid transparent;
    color: var(--v2-text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 13px;
}

html[data-mockup-theme="vklassv2"] .tab.active,
html[data-mockup-theme="vklassv2"] .tabs__item.active,
html[data-mockup-theme="vklassv2"] .v2-tab.active,
html[data-mockup-theme="vklassv2"] .v2-tab[aria-selected="true"],
html[data-mockup-theme="vklassv2"] .mdc-tab--active {
    border-bottom-color: var(--v2-primary);
    color: var(--v2-primary);
}

/* Dialogs ---------------------------------------------------------------- */
html[data-mockup-theme="vklassv2"] .modal,
html[data-mockup-theme="vklassv2"] .dialog,
html[data-mockup-theme="vklassv2"] .v2-modal,
html[data-mockup-theme="vklassv2"] .mdc-dialog,
html[data-mockup-theme="vklassv2"] .vkau-dialog {
    border-radius: var(--v2-radius-lg);
    background: var(--v2-surface);
    border: 1px solid var(--v2-border);
    box-shadow: var(--v2-shadow-elev);
}

/* Toolbars / utility rows ------------------------------------------------ */
html[data-mockup-theme="vklassv2"] .toolbar,
html[data-mockup-theme="vklassv2"] .filter-bar,
html[data-mockup-theme="vklassv2"] .actions,
html[data-mockup-theme="vklassv2"] .v2-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

html[data-mockup-theme="vklassv2"] .toolbar-search__container,
html[data-mockup-theme="vklassv2"] .search-box,
html[data-mockup-theme="vklassv2"] .v2-search {
    border: 1px solid var(--v2-input-border);
    border-radius: var(--v2-radius);
    background: var(--v2-surface);
}

html[data-mockup-theme="vklassv2"] .material-icons {
    font-size: 22px;
    line-height: 1;
    vertical-align: middle;
}

/* Avatars / circles (used in topbar/sidebar) ---------------------------- */
html[data-mockup-theme="vklassv2"] .avatar,
html[data-mockup-theme="vklassv2"] .v2-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--v2-primary-on-white);
    color: var(--v2-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
}

/* Responsive ------------------------------------------------------------- */
@media (max-width: 939px) {
    html[data-mockup-theme="vklassv2"] .content-wrapper,
    html[data-mockup-theme="vklassv2"] .page-content,
    html[data-mockup-theme="vklassv2"] .v2-page-content,
    html[data-mockup-theme="vklassv2"] .content-container {
        padding: var(--v2-gap) var(--v2-content-padding-h-phone);
    }

    html[data-mockup-theme="vklassv2"] .vk-layout--app-main .vk-layout__toolbar,
    html[data-mockup-theme="vklassv2"] .vk-layout--app-main .topbar,
    html[data-mockup-theme="vklassv2"] .vk-layout--app-main .v2-topbar,
    html[data-mockup-theme="vklassv2"] .vk-layout--app-main .mdc-top-app-bar {
        min-height: var(--v2-toolbar-height-phone);
    }

    html[data-mockup-theme="vklassv2"] .page-header,
    html[data-mockup-theme="vklassv2"] .v2-page-header {
        flex-direction: column;
        align-items: stretch;
    }
}