/* Dark mode styles - WCAG 2.1 AA compliant */
body.dark-mode {
    /* Dark mode color palette */
    --white: #1e1e1e;
    --gray-lightest: #2a2a2a;
    --gray-lighter: #363636;
    --gray-smooth: #484848;
    --gray-light: #5c5c5c;
    --gray: #9e9e9e;
    --gray-dark: #b8b8b8;
    --gray-darker: #e8e8e8;
    --black: #ffffff;

    /* Dark mode theme colors - adjusted for better contrast */
    --cl-hard: #6b8ed9;
    --cl-medium: #8da4db;
    --cl-soft: #b3bee8;
    --cl-softer: #3a4a6b;
    --cl-super-soft: #2d3548;
    --cl-soft-background: #3d4b6b;

    /* Dark mode accent colors - WCAG 2.1 AA compliant */
    --cl-green: #7ed957;
    --cl-yellow: #ffb84d;
    --cl-red: #ff6b6b;

    /* Dark mode state colors */
    --color-success: #7ed957;
    --color-info: #6b8ed9;
    --color-warning: #ffb84d;
    --color-error: #ff6b6b;
    --color-positive: #7ed957;
    --color-negative: #ff6b6b;
    
    background-color: #1e1e1e;
    color: #e8e8e8;
}

/* Dark mode component backgrounds */
body.dark-mode .vk-layout__toolbar,
body.dark-mode .vk-layout__main-menu,
body.dark-mode .snabbvalsmeny__menu,
body.dark-mode .toolbar-notifications__panel,
body.dark-mode .toolbar-user__menu,
body.dark-mode .toolbar-search__container,
body.dark-mode .toolbar-search__filter-panel {
    background-color: #2a2a2a;
    border-color: #484848;
}

/* Dark mode text colors */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode .toolbar-user__name,
body.dark-mode .snabbvalsmeny__item span,
body.dark-mode .toolbar-notifications__item-title,
body.dark-mode .toolbar-search__filter-section-title {
    color: #e8e8e8;
}

body.dark-mode p,
body.dark-mode .toolbar-notifications__item-message,
body.dark-mode .toolbar-search__filter-description,
body.dark-mode .toolbar-search__filter-label {
    color: #b8b8b8;
}

/* Dark mode hover states */
body.dark-mode .toolbar-search__button:hover,
body.dark-mode .snabbvalsmeny__button:hover,
body.dark-mode .toolbar-notifications__button:hover,
body.dark-mode .toolbar-user__button:hover {
    background-color: #3a4a6b;
}

body.dark-mode .snabbvalsmeny__item:hover,
body.dark-mode .toolbar-notifications__item:hover,
body.dark-mode .toolbar-user__menu-item:hover {
    background-color: #3a4a6b;
}

/* Dark mode borders */
body.dark-mode .vk-layout__toolbar,
body.dark-mode .vk-layout__main-menu,
body.dark-mode .toolbar-notifications__item,
body.dark-mode .toolbar-notifications__header,
body.dark-mode .toolbar-notifications__footer {
    border-color: #484848;
}

/* Dark mode input fields */
body.dark-mode .toolbar-search__input,
body.dark-mode .toolbar-search__container {
    background-color: #2a2a2a;
    color: #e8e8e8;
    border-color: #484848;
}

body.dark-mode .toolbar-search__input::placeholder {
    color: #9e9e9e;
}

body.dark-mode .toolbar-search__container:focus-within {
    border-color: #6b8ed9;
    box-shadow: 0 0 0 2px rgba(107, 142, 217, 0.2);
}

/* Dark mode icon colors */
body.dark-mode .toolbar-search__icon,
body.dark-mode .toolbar-search__filter,
body.dark-mode .toolbar-user__icon,
body.dark-mode .toolbar-user__menu-item i,
body.dark-mode .toolbar-notifications__item-icon {
    color: #b8b8b8;
}

/* Dark mode avatar */
body.dark-mode .toolbar-user__avatar {
    background-color: #6b8ed9;
    color: #ffffff;
}

/* Dark mode notification badge */
body.dark-mode .toolbar-notifications__badge {
    background-color: #ff6b6b;
    color: #ffffff;
}

/* Dark mode links */
body.dark-mode .toolbar-notifications__footer-link,
body.dark-mode a {
    color: #6b8ed9;
}

body.dark-mode .toolbar-notifications__footer-link:hover,
body.dark-mode a:hover {
    background-color: #3a4a6b;
}

/* Dark mode main menu */
body.dark-mode .vk-layout__main-menu {
    background-color: #2a2a2a;
    border-color: #484848;
}

body.dark-mode .vk-main-web-menu__toggle {
    background-color: #363636;
    border-color: #484848;
}

body.dark-mode .vk-main-web-menu__link {
    color: #b8b8b8;
}

body.dark-mode .vk-main-web-menu__link:hover {
    background-color: #3a4a6b;
    color: #e8e8e8;
}

body.dark-mode .vk-main-web-menu__link.activated {
    background-color: #6b8ed9;
    color: #ffffff;
}

body.dark-mode .vk-main-web-menu__submenu {
    background-color: #6b8ed9;
}

/* Dark mode hero text - ensure readability */
body.dark-mode .hero-title,
body.dark-mode .hero-subtitle {
    color: var(--white);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7),
                 0 4px 8px rgba(0, 0, 0, 0.5),
                 0 1px 2px rgba(0, 0, 0, 0.9);
}
/* Dark mode FAB */
body.dark-mode .mdc-fab {
    background-color: var(--cl-green);
}

body.dark-mode .mdc-menu {
    background-color: #2a2a2a;
    border: 1px solid #484848;
}

body.dark-mode .mdc-list-item {
    color: #e8e8e8;
}

body.dark-mode .mdc-list-item:hover {
    background-color: #3a4a6b;
}

body.dark-mode .mdc-list-item__graphic {
    color: #b8b8b8;
}
body.dark-mode .vk-card,
body.dark-mode .content-section {
    background-color: #2a2a2a;
    border-color: #484848;
}

/* Dark mode buttons */
body.dark-mode .mdc-button {
    color: #e8e8e8;
}

body.dark-mode .mdc-button--raised,
body.dark-mode .mdc-button--unelevated {
    background-color: #6b8ed9;
    color: #ffffff;
}

body.dark-mode .mdc-button--raised:hover,
body.dark-mode .mdc-button--unelevated:hover {
    background-color: #5a7cc8;
}

/* Dark mode dropdown styles */
body.dark-mode .vk-select-menu,
body.dark-mode .mdc-select__anchor {
    background-color: #2a2a2a;
    border-color: #484848;
    color: #e8e8e8;
}

body.dark-mode .vk-select-menu__option:hover {
    background-color: #3a4a6b;
}

body.dark-mode .vk-select-menu__option--selected {
    background-color: #3a4a6b;
}

body.dark-mode .vk-select-menu__option-label {
    color: #e8e8e8;
}

body.dark-mode .vk-select-menu__option-secondary {
    color: #b8b8b8;
}

body.dark-mode .vk-select-menu__search input {
    background-color: #363636;
    border-color: #484848;
    color: #e8e8e8;
}

body.dark-mode .vk-select-tag {
    background-color: #363636;
    border-color: #484848;
}

body.dark-mode .vk-select-clear {
    border-color: #484848;
    color: #e8e8e8;
}

body.dark-mode .vk-select-menu__placeholder {
    color: #9e9e9e;
    border-color: #484848;
}