header vaadin-context-menu {
    align-items: center;
    display: flex;
}

header nav a:hover {
    text-decoration: none;
}

header nav a[highlight] {
    color: var(--lumo-primary-text-color);
}

label {
    font-size: small;
}

header nav a::before,
header nav a::after {
    background-color: var(--lumo-contrast-60pct);
    border-radius: var(--lumo-border-radius) var(--lumo-border-radius) 0 0;
    bottom: 0;
    content: "";
    display: block;
    height: 2px;
    left: 50%;
    position: absolute;
    transform: translateX(-50%) scale(0);
    transform-origin: 50% 100%;
    width: var(--lumo-size-s);
    will-change: transform;
}

header nav a::before {
    transition: 0.14s transform cubic-bezier(.12, .32, .54, 1);
}

header nav a::after {
    box-shadow: 0 0 0 4px var(--lumo-primary-color);
    opacity: 0.15;
    transition: 0.15s 0.02s transform, 0.8s 0.17s opacity;
}

header nav a[highlight]::before,
nav a[highlight]::after {
    background-color: var(--lumo-primary-color);
}

header nav a[highlight]::before,
header nav a[highlight]::after {
    transform: translateX(-50%) scale(1);
    transition-timing-function: cubic-bezier(.12, .32, .54, 1.5);
}

header nav a[highlight]:not([active])::after {
    opacity: 0;
}

/* Avatar */
.app-bar__avatar {
    border-radius: 100%;
    flex-shrink: 0;
    height: var(--lumo-size-s);
    margin-left: var(--lumo-space-m);
    width: var(--lumo-size-s);
}

.menu-buttons {
    border: 0;
}.main-view {
    display: block;
    padding: 1em;
}

.report-view {
  display: block;
  padding: 1em;
}

html {
    --lumo-font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;
    --lumo-font-size: 1rem;
    --lumo-font-size-xxxl: 1.5rem;
    --lumo-font-size-xxl: 1.125rem;
    --lumo-font-size-xl: 0.975rem;
    --lumo-font-size-l: 0.85rem;
    --lumo-font-size-m: 0.75rem;
    --lumo-font-size-s: 0.55rem;
    --lumo-font-size-xs: 0.55rem;
    --lumo-font-size-xxs: 0.5rem;
    --lumo-border-radius: calc(var(--lumo-size-m) / 8);
    --lumo-size-xl: 2.75rem;
    --lumo-size-l: 2.25rem;
    --lumo-size-m: 1.75rem;
    --lumo-size-s: 1.5rem;
    --lumo-size-xs: 1.25rem;
    --lumo-space-xl: 1.875rem;
    --lumo-space-l: 1.25rem;
    --lumo-space-m: 0.625rem;
    --lumo-space-s: 0.3125rem;
    --lumo-space-xs: 0.1875rem;
    --lumo-base-color: #f4f4f4ed;
    --lumo-contrast-5pct: hsl(238deg 12% 58% / 20%);
    --lumo-contrast-10pct: hsl(216deg 6% 66% / 49%);
    --lumo-tint-3pct: rgb(178 178 178 / 30%);
    --lumo-tint-5pct: rgba(43, 77, 182, 0.05);
    --lumo-tint-10pct: rgb(157 161 169 / 31%);
    --lumo-tint-20pct: rgba(43, 77, 182, 0.2);
    --lumo-tint-30pct: rgba(43, 77, 182, 0.3);
    --lumo-tint-40pct: rgba(43, 77, 182, 0.4);
    --lumo-tint-50pct: rgba(43, 77, 182, 0.5);
    --lumo-tint-60pct: rgba(43, 77, 182, 0.6);
    --lumo-tint-70pct: rgba(43, 77, 182, 0.7);
    --lumo-tint-80pct: rgba(43, 77, 182, 0.8);
    --lumo-tint-90pct: rgba(43, 77, 182, 0.9);
    --lumo-tint: #2b4db6;
    --lumo-body-text-color: black;
    --lumo-primary-text-color: black;
}

.custom-btn img {
    height: 24px;
    width: 24px;
}

.custom-btn {
    /*background: rgb(179, 201, 223);*/
    /*background: linear-gradient(0deg, rgba(179, 201, 223, 1) 100%, rgba(159, 169, 180, 1) 0%);*/
    color: #232222;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 4px;
    /*border-radius: 4px;
    border: 1px solid #696767;*/
    /*box-shadow: 1px 1px 5px 1px #757575;*/
    cursor: pointer;
    transition: 0.2s;
    font-size: 0.71rem;
    font-weight: 700;
}

.custom-btn i {
    font-size: 1.2rem;

}

@media screen and (max-width: 600px) {
    .custom-btn span {
        font-size: 0.4rem;
    }
}

.active {
    background: rgb(159, 184, 210);
    background: linear-gradient(0deg, rgb(88, 124, 161) 100%, rgb(64, 107, 150) 0%);
    color: #ffffff;
    border: 1px solid #c7c7c7;
}

.custom-btn:hover {
    box-shadow: 0 0 2px 1px #8c88b4;
    background-color: #d0d3ea;
    color: #101083;
}

.container-layout {
    padding: 0;
    /*border-left: 1px solid #d2d6db;*/
    /*border-right: 1px solid #d2d6db;*/
    /*background-color: red;*/
    content: "Мэдээлэл олдсонгүй!";
}

.div-norm {
    background-color: #86d368;
    padding-left: 12px;
    font-weight: 500;
    font-size: 0.6rem;
    width: calc(100% - 12px);
}

.div-tusov {
    background-color: #ee9a6e;
    padding-left: 12px;
    font-weight: 500;
    font-size: 0.6rem;
    width: calc(100% - 12px);
}

.div-butets {
    background-color: #60a1e1;
    padding-left: 12px;
    font-weight: 500;
    font-size: 0.6rem;
    width: calc(100% - 12px);
}

.norm-layout {
    padding-left: 16px;
    margin-right: 16px;
    align-items: center;
}

.container-detail {
    box-shadow: var(--lumo-box-shadow-m);
    border: 1px #d4d9df solid;
    justify-content: space-between;
}

.container-detail .detail-top {
    padding: 8px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    height: 78vh;
    flex: 1 1 auto;
}

.container-detail .detail-bottom {
    box-shadow: var(--lumo-box-shadow-m);
    padding: 8px;
    border-top: 1px #d4d9df solid;
    width: calc(100% - 16px);
    flex: 0 1 auto;
}

.container-status {
    border: 1px #d2d6db solid;
    background-color: rgba(180, 173, 173, 0.8);
    /*padding: 12px;*/
    font-weight: 500;
    font-size: 0.6rem;
    /*background-color: green;*/
    width: 100%;
}

.status-chosen {
    padding: 12px;
    border-right: 1px #d2d6db solid;
    background-color: rgba(236, 220, 220, 0.8);
    font-weight: 600;
}

.status-child {
    padding: 12px;
    border-right: 1px #d2d6db solid;
    display: flex;
    flex-direction: row;
}

.status-child span {
    font-weight: 500;
    color: #1c1c36;
}

.status-child div {
    padding-left: 8px;
    font-weight: bold;
    color: #000060;
}

.status-child span::after {
    content: ":";
}

.estimate-layout {
    margin-top: 12px;
    border-top: 1px solid #2f2c2c;
    align-items: center;
}

.estimate-layout h3 {
    margin-top: 16px;
    font-weight: 600;
}

.cb-select {
    color: red;
    height: 10px;
}

/*label {
    font-size: 0.5rem;
}*/

/* Borders */

.dashboard-view vaadin-board-row > * {
    border-bottom: 1px solid var(--lumo-contrast-10pct);
    border-right: 1px solid var(--lumo-contrast-10pct);
}

.dashboard-view vaadin-board-row.small > * {
    border-right: none;
}

.dashboard-view vaadin-board-row.medium > *:nth-child(even),
.dashboard-view vaadin-board-row.medium > *:only-child {
    border-right: none;
}

.dashboard-view vaadin-board-row.large > *:last-child {
    border-right: none;
}

.custom-card {
    display: flex;
    flex-direction: column;
    margin: 8px;
    padding: 8px;
    border-radius: 12px;
    box-shadow: var(--lumo-box-shadow-m);
    border: 1px solid #d4d9df;
    font-size: 0.9rem;
}

.custom-card > div {
    margin-left: 16px;
}

.main-layout {
    display: flex;
    flex-direction: column;
}

.main-toolbar {
    /*height: 56px;*/
    background-color: white;
    box-shadow: 0 0 15px 0 rgb(123 148 169 / 78%);
    align-items: flex-start;
    justify-content: flex-start;
}

/* Toolbar дотор scrollbar нуух */
.main-toolbar ::-webkit-scrollbar {
    height: 4px;
}

.main-toolbar ::-webkit-scrollbar-track {
    background: transparent;
}

.main-toolbar ::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 2px;
}

.main-toolbar:hover ::-webkit-scrollbar-thumb {
    background: var(--lumo-contrast-20pct);
}

/* Firefox-д scrollbar нуух */
.main-toolbar * {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

.main-toolbar:hover * {
    scrollbar-color: var(--lumo-contrast-20pct) transparent;
}

/* Desktop - norm component тогтмол */
@media screen and (min-width: 769px) {
    .toolbar-norm-component {
        flex-shrink: 0;
    }

    /* Vaadin tabs scroll хийгдэхгүй */
    .toolbar-scrollable vaadin-tabs {
        overflow: visible;
    }

    .toolbar-scrollable vaadin-tabs [part="tabs"] {
        overflow: visible;
    }
}

/* Mobile - norm + tabs scroll, bell тогтмол */
@media screen and (max-width: 768px) {
    .toolbar-norm-component {
        flex-shrink: 0;
    }

    /* Tabs-ийн auto scroll-ийг хаах, гадна талын scroll ашиглах */
    .toolbar-scrollable vaadin-tabs {
        --lumo-size-l: 32px;
        max-width: none !important;
        width: auto !important;
        flex-shrink: 0 !important;
    }
}

/* Bell, profile баруун талд тогтмол */
.toolbar-fixed-right {
    position: sticky;
    right: 0;
    flex-shrink: 0;
    background: white;
    z-index: 10;
}

/*@media screen and (max-width: 1220px) {
    .main-toolbar {
        height: 80px;
    }
}*/

.main-content {
    min-height: 600px;
    flex: 1 1 auto;
}

.user-logo {
    margin-top: 4px;
    margin-right: 4px;
    width: 24px;
    height: 24px;
    margin-left: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid rgb(123 148 169);
    border-radius: 50%;
    color: rgb(123 148 169);
    cursor: pointer;
    transition: 0.2s;
}

.user-logo:hover {
    box-shadow: 0 0 4px 0 rgba(19, 46, 73, 0.78);
}

.user-logo > vaadin-icon {
    height: 16px;
    width: 16px;
}

.my-tab-theme {
    min-height: unset;
    box-shadow: none;
}

.my-tab-theme > vaadin-tab {
    background-color: #435e98;
    padding-right: 1.5em;
    padding-left: 1.5em;
    color: white;
    align-items: flex-start;
    border-right: 1px solid;
}

.my-tab-theme > vaadin-tab:hover {
    cursor: pointer;
    background-color: #8679d5;
}

:host([theme="my-combo"]) [part="input-field"] {
    height: 20px;
    color: red;
}

.my-sub-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: 0.3s;
}

.my-sub-menu i {
    padding-top: 4px;
    font-size: 1.3rem;
}

@media screen and (max-width: 1000px) {
    .my-sub-menu {
        padding-left: 8px;
        padding-right: 8px;
    }

    .my-sub-menu span {
        display: none;
    }
}

.my-sub-menu span {
    min-width: 60px;
    max-width: 80px;
    font-size: 0.65rem;
    text-align: center;
}

.my-sub-menu:hover {
    cursor: pointer;
    transform: scale(1.05);
    background-color: #e8e5f5;
}

.my-help-menu {
    padding: 8px 12px;
    margin: 2px 0;
    border-radius: 4px;
    transition: all 0.2s ease;
    font-size: 0.875rem;
}

.my-help-menu:hover {
    cursor: pointer;
    transform: translateX(4px);
    background-color: #e8e5f5;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Тусламжийн бүлгийн Details стиль */
.help-group-details {
    margin-bottom: 8px;
    border: 1px solid var(--lumo-contrast-20pct);
    border-radius: 4px;
    overflow: hidden;
}

.help-group-details[opened] {
    background-color: var(--lumo-base-color);
}

.help-group-content {
    padding: 4px 8px;
}

.ribbon-layout > * {
    border-right: 1px solid var(--lumo-contrast-10pct);
    padding-right: 4px;
}

.ribbon-layout > :last-child {
    border-right: none;
}

.v-loading-indicator {
    position: fixed; /* Occupy whole screen even if scrolled */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Eat mouse events when visible, doesn't prevent scrolling */
    pointer-events: auto;
    /* Animated with delay to prevent flashing */
    animation: fadein 0.3s ease-out 0.2s normal 1 both;
    z-index: 2147483647;
}
.v-loading-indicator:before {
    width: 300px;
    height: 76px;

    position: absolute;
    top: 50%;
    left: 40%;

    border-radius: 100%;
    content: "Уншиж байна. Түр хүлээнэ үү!";
    font-size: 0.9em;
    color: #60a1e1;
}
@keyframes fadein {
    0% {
        background: rgba(0,0,0,0);
    }
    100% {
        background: rgba(0,0,0,.5); /* Darkens the UI */
    }
}
.v-status-message {
    display: none;
}

/* ==================== DARK THEME - Vuexy Style (Soft & Modern) ==================== */

/* === Үндсэн өнгөний хувьсагчид (Vuexy inspired) === */
[theme~="dark"] {
    /* Үндсэн дэвсгэр өнгөнүүд - Зөөлөн хар-хөх */
    --dark-bg-primary: #25293c;
    --dark-bg-secondary: #2f3349;
    --dark-bg-tertiary: #373b50;
    --dark-bg-elevated: #3e4259;
    --dark-bg-card: #2f3349;

    /* Текстийн өнгөнүүд */
    --dark-text-primary: #cfd3ec;
    --dark-text-secondary: #a3a7bb;
    --dark-text-muted: #7a7e96;

    /* Accent өнгөнүүд (Vuexy) */
    --dark-accent-primary: #7367f0;
    --dark-accent-blue: #00cfe8;
    --dark-accent-cyan: #00cfe8;
    --dark-accent-purple: #7367f0;
    --dark-accent-orange: #ff9f43;
    --dark-accent-green: #28c76f;
    --dark-accent-red: #ea5455;
    --dark-accent-warning: #ff9f43;
    --dark-accent-info: #00cfe8;

    /* Border өнгөнүүд */
    --dark-border-subtle: #3b3f54;
    --dark-border-default: #454a63;
    --dark-border-strong: #525772;

    /* Lumo хувьсагчид override */
    --lumo-base-color: var(--dark-bg-primary);
    --lumo-body-text-color: var(--dark-text-primary);
    --lumo-primary-text-color: var(--dark-accent-primary);
    --lumo-primary-color: var(--dark-accent-primary);
    --lumo-contrast-5pct: rgba(207, 211, 236, 0.05);
    --lumo-contrast-10pct: rgba(207, 211, 236, 0.1);
    --lumo-contrast-20pct: rgba(207, 211, 236, 0.2);
    --lumo-contrast-50pct: rgba(207, 211, 236, 0.5);
    --lumo-contrast-60pct: rgba(207, 211, 236, 0.6);
    --lumo-contrast-70pct: rgba(207, 211, 236, 0.7);
    --lumo-contrast-80pct: rgba(207, 211, 236, 0.8);
    --lumo-contrast-90pct: rgba(207, 211, 236, 0.9);
    --lumo-tint-5pct: rgba(115, 103, 240, 0.05);
    --lumo-tint-10pct: rgba(115, 103, 240, 0.1);
    --lumo-tint-20pct: rgba(115, 103, 240, 0.2);
}

/* === Main Toolbar === */
[theme~="dark"] .main-toolbar {
    background: var(--dark-bg-secondary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    border-bottom: 1px solid var(--dark-border-subtle);
}

[theme~="dark"] .toolbar-fixed-right {
    background: var(--dark-bg-secondary);
}

/* === Ribbon Tabs === */
[theme~="dark"] .my-tab-theme > vaadin-tab {
    background: var(--dark-bg-tertiary);
    color: var(--dark-text-secondary);
    border-right-color: var(--dark-border-subtle);
    transition: all 0.2s ease;
}

[theme~="dark"] .my-tab-theme > vaadin-tab:hover {
    background: var(--dark-bg-elevated);
    color: var(--dark-text-primary);
}

[theme~="dark"] .my-tab-theme > vaadin-tab[selected] {
    background: var(--dark-bg-primary) !important;
    color: var(--dark-accent-primary) !important;
    border-bottom: 2px solid var(--dark-accent-primary);
}

/* === Sub Menu (Ribbon товчлуурууд) === */
[theme~="dark"] .my-sub-menu {
    color: var(--dark-text-secondary);
    border-radius: 8px;
    transition: all 0.2s ease;
}

[theme~="dark"] .my-sub-menu:hover {
    background: var(--dark-bg-elevated);
    color: var(--dark-text-primary);
}

[theme~="dark"] .my-sub-menu i {
    color: var(--dark-accent-primary);
}

[theme~="dark"] .my-sub-menu:hover i {
    color: var(--dark-accent-cyan);
}

[theme~="dark"] .my-sub-menu span {
    color: var(--dark-text-secondary);
}

[theme~="dark"] .my-sub-menu:hover span {
    color: var(--dark-text-primary);
}

/* === Ribbon Layout === */
[theme~="dark"] .ribbon-layout > * {
    border-right-color: var(--dark-border-subtle);
}

/* === Custom Button === */
[theme~="dark"] .custom-btn {
    color: var(--dark-text-primary);
    background: var(--dark-bg-tertiary);
    border: 1px solid var(--dark-border-default);
    border-radius: 6px;
}

[theme~="dark"] .custom-btn:hover {
    background: var(--dark-bg-elevated);
    color: var(--dark-accent-primary);
    border-color: var(--dark-accent-primary);
}

/* === Container Detail (Баруун талын panel) === */
[theme~="dark"] .container-detail {
    background: var(--dark-bg-card);
    border-color: var(--dark-border-default);
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
}

[theme~="dark"] .container-detail .detail-top {
    background: var(--dark-bg-card);
}

[theme~="dark"] .container-detail .detail-bottom {
    background: var(--dark-bg-tertiary);
    border-top-color: var(--dark-border-default);
}

/* === Container Layout === */
[theme~="dark"] .container-layout {
    background: var(--dark-bg-primary);
}

/* === Norm Layout === */
[theme~="dark"] .norm-layout {
    background: var(--dark-bg-card);
}

/* === Div Norm/Tusov/Butets === */
[theme~="dark"] .div-norm {
    background-color: rgba(40, 199, 111, 0.12);
    color: var(--dark-accent-green);
}

[theme~="dark"] .div-tusov {
    background-color: rgba(255, 159, 67, 0.12);
    color: var(--dark-accent-orange);
}

[theme~="dark"] .div-butets {
    background-color: rgba(115, 103, 240, 0.12);
    color: var(--dark-accent-primary);
}

/* === Status Bar === */
[theme~="dark"] .container-status {
    background: var(--dark-bg-card);
    border-color: var(--dark-border-default);
}

[theme~="dark"] .status-chosen {
    background: rgba(115, 103, 240, 0.12);
    border-right-color: var(--dark-border-default);
    color: var(--dark-accent-primary);
}

[theme~="dark"] .status-child {
    border-right-color: var(--dark-border-subtle);
}

[theme~="dark"] .status-child span {
    color: var(--dark-text-muted);
}

[theme~="dark"] .status-child div {
    color: var(--dark-accent-cyan);
}

/* === User Logo === */
[theme~="dark"] .user-logo {
    border-color: var(--dark-accent-primary);
    color: var(--dark-accent-primary);
    background: var(--dark-bg-tertiary);
}

[theme~="dark"] .user-logo:hover {
    background: var(--dark-bg-elevated);
}

/* === Help Menu === */
[theme~="dark"] .my-help-menu {
    color: var(--dark-text-secondary);
}

[theme~="dark"] .my-help-menu:hover {
    background: var(--dark-bg-elevated);
    color: var(--dark-text-primary);
}

/* === Help Group Details === */
[theme~="dark"] .help-group-details {
    border-color: var(--dark-border-default);
    background: var(--dark-bg-card);
}

[theme~="dark"] .help-group-details[opened] {
    background: var(--dark-bg-tertiary);
}

/* === Custom Card === */
[theme~="dark"] .custom-card {
    background: var(--dark-bg-card);
    border-color: var(--dark-border-default);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* === Estimate Layout === */
[theme~="dark"] .estimate-layout {
    border-top-color: var(--dark-border-strong);
}

[theme~="dark"] .estimate-layout h3 {
    color: var(--dark-text-primary);
}

/* === Loading Indicator === */
[theme~="dark"] .v-loading-indicator:before {
    color: var(--dark-accent-primary);
}

/* === Scrollbar Dark (Vuexy style - thin) === */
[theme~="dark"] ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

[theme~="dark"] ::-webkit-scrollbar-track {
    background: var(--dark-bg-primary);
}

[theme~="dark"] ::-webkit-scrollbar-thumb {
    background: var(--dark-border-default);
    border-radius: 3px;
}

[theme~="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--dark-accent-primary);
}

/* === Input Fields === */
[theme~="dark"] vaadin-text-field,
[theme~="dark"] vaadin-combo-box,
[theme~="dark"] vaadin-number-field,
[theme~="dark"] vaadin-text-area {
    --lumo-contrast-10pct: var(--dark-border-default);
}

/* === Buttons === */
[theme~="dark"] vaadin-button {
    --lumo-contrast-5pct: var(--dark-bg-tertiary);
    --lumo-contrast-10pct: var(--dark-border-default);
}

/* === Dialog === */
[theme~="dark"] vaadin-dialog-overlay [part="overlay"] {
    background: var(--dark-bg-card);
    border: 1px solid var(--dark-border-default);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

/* === Context Menu === */
[theme~="dark"] vaadin-context-menu-overlay [part="overlay"] {
    background: var(--dark-bg-card);
    border: 1px solid var(--dark-border-default);
}

/* === Notification === */
[theme~="dark"] vaadin-notification-card {
    background: var(--dark-bg-elevated);
    color: var(--dark-text-primary);
}

/* === Text Field Input === */
[theme~="dark"] vaadin-text-field [part="input-field"],
[theme~="dark"] vaadin-number-field [part="input-field"],
[theme~="dark"] vaadin-text-area [part="input-field"] {
    background: var(--dark-bg-card);
    color: var(--dark-text-primary);
}

/* === Labels === */
[theme~="dark"] vaadin-text-field [part="label"],
[theme~="dark"] vaadin-number-field [part="label"],
[theme~="dark"] vaadin-combo-box [part="label"] {
    color: var(--dark-text-secondary);
}

/* === Vaadin Grid Dark Theme Variables === */
[theme~="dark"] vaadin-grid {
    --lumo-base-color: #25293c;
    --lumo-contrast-5pct: rgba(207, 211, 236, 0.05);
    --lumo-contrast-10pct: rgba(207, 211, 236, 0.1);
    --lumo-contrast-20pct: rgba(207, 211, 236, 0.2);
    --lumo-contrast-50pct: rgba(207, 211, 236, 0.5);
    --lumo-contrast-60pct: rgba(207, 211, 236, 0.6);
    --lumo-contrast-70pct: rgba(207, 211, 236, 0.7);
    --lumo-contrast-80pct: rgba(207, 211, 236, 0.8);
    --lumo-contrast-90pct: rgba(207, 211, 236, 0.9);
    --lumo-contrast: #cfd3ec;
    --lumo-body-text-color: #cfd3ec;
    --lumo-secondary-text-color: #a3a7bb;
    --lumo-tertiary-text-color: #7a7e94;
    --lumo-header-text-color: #cfd3ec;
    --lumo-primary-color: #7367f0;
    --lumo-primary-text-color: #7367f0;
    --_lumo-grid-secondary-border-color: #3b3f54;
    background-color: #25293c;
    color: #cfd3ec;
}

/* === Vaadin Tabs Dark Theme === */
[theme~="dark"] vaadin-tabs {
    --lumo-contrast-10pct: rgba(207, 211, 236, 0.1);
    --lumo-contrast-60pct: rgba(207, 211, 236, 0.6);
    --lumo-primary-color: #7367f0;
    --lumo-primary-text-color: #7367f0;
}
.custom-label {
    font-weight: 700;
    font-size: var(--lumo-font-size-s);
    white-space: break-spaces;
    color: #183f69;
    line-height: 1;
    margin-left: calc(var(--lumo-border-radius-m) / 4);
    align-self: flex-start;
    padding-bottom: 4px;
}

.custom-clickable-field {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-top: 4px;
    margin-bottom: 4px;
}

.custom-container {
    height: 20px;
    border-radius: var(--lumo-border-radius);
    padding: 0 calc(0.375em + var(--lumo-border-radius) / 4 - 1px);
    border-bottom: 1px solid var(--lumo-contrast-50pct);
    justify-content: flex-end;
    display: flex;
    align-items: center;
}

.custom-container > *:last-child {
    padding-left: 4px;
}

.clickable {
    box-shadow: inset 0 0 0 1px var(--lumo-contrast-50pct);
    transition: 0.3s all;
    cursor: pointer;
}

.clickable:hover {
    box-shadow: inset 0 0 1px 2px var(--lumo-contrast-80pct);
}

.custom-container span {
    font-weight: 400;
    color: #143d5d;
    font-size: 0.7em;
    line-height: normal;
}

.custom-input {
    font-weight: bold !important;
}

.total-salary div {
    color: red !important;
}

.total-salary span {
    color: red !important;
}

/* ==================== DARK THEME - Vuexy Style ==================== */
[theme~="dark"] .custom-label {
    color: #a3a7bb;
}

[theme~="dark"] .custom-container {
    border-bottom-color: #454a63;
}

[theme~="dark"] .custom-container span {
    color: #cfd3ec;
}

[theme~="dark"] .clickable {
    box-shadow: inset 0 0 0 1px #454a63;
}

[theme~="dark"] .clickable:hover {
    box-shadow: inset 0 0 1px 2px #7367f0;
    background: rgba(115, 103, 240, 0.08);
}

[theme~="dark"] .total-salary div {
    color: #ea5455 !important;
}

[theme~="dark"] .total-salary span {
    color: #ea5455 !important;
}
.badge {
    position: relative;
    display: flex;
}

.badge vaadin-icon {
    padding: .25em;
}

.badge span {
    position: absolute;
    top: -10px;
    right: -14px;
    background-color: #60a1e1;
    border-radius: 50%;
    min-width: 0.9rem;
    min-height: 0.9rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 0.6rem;
}/* ===== LOGIN PAGE - MODERN CLEAN DESIGN ===== */

.my-login-view {
    background-image: url("images/background-min.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    min-height: 100vh;
    position: relative;
}

/* Background overlay - текст уншихад тусална */
.my-login-view::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.6) 0%, rgba(30, 58, 95, 0.5) 100%);
    z-index: 0;
}

/* ===== LOGIN CARD ===== */
.login-component {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    padding: 48px 40px;
    border-radius: 20px;
    width: 420px;
    max-width: 420px;
    box-sizing: border-box;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.15),
        0 4px 16px rgba(0, 0, 0, 0.08);
    animation: fadeIn 0.5s ease-out;
    z-index: 1;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== LOGO ===== */
.login-logo {
    width: 72px;
    height: 72px;
    margin-bottom: 12px;
    border-radius: 14px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    object-fit: contain;
}

/* ===== TITLE ===== */
.login-component h1 {
    color: #1e293b;
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 4px 0;
    letter-spacing: -0.3px;
}

.login-subtitle {
    color: #64748b;
    font-size: 0.85rem;
    margin-bottom: 28px;
    font-weight: 400;
    text-align: center;
    line-height: 1.4;
}

/* ===== INPUT FIELDS ===== */
.login-component vaadin-text-field,
.login-component vaadin-password-field {
    --vaadin-input-field-border-radius: 10px;
    --vaadin-input-field-background: #f8fafc;
    margin-bottom: 12px;
}

.login-component vaadin-text-field:hover,
.login-component vaadin-password-field:hover {
    --vaadin-input-field-background: #f1f5f9;
}

.login-component vaadin-text-field[focused],
.login-component vaadin-password-field[focused] {
    --vaadin-input-field-background: #ffffff;
}

.login-component vaadin-text-field::part(input-field),
.login-component vaadin-password-field::part(input-field) {
    border: 1.5px solid #e2e8f0;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.login-component vaadin-text-field:hover::part(input-field),
.login-component vaadin-password-field:hover::part(input-field) {
    border-color: #cbd5e1;
}

.login-component vaadin-text-field[focused]::part(input-field),
.login-component vaadin-password-field[focused]::part(input-field) {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
    outline: none;
}

/* ===== PRIMARY BUTTON ===== */
.login-component vaadin-button[theme~="primary"] {
    background: #2563eb;
    color: white;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
    min-height: 44px;
    margin-top: 8px;
    margin-bottom: 8px;
}

.login-component vaadin-button[theme~="primary"]::part(label) {
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-component vaadin-button[theme~="primary"]:hover {
    background: #1d4ed8;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4);
    transform: translateY(-1px);
}

.login-component vaadin-button[theme~="primary"]:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(37, 99, 235, 0.3);
}

/* ===== TERTIARY BUTTONS ===== */
.login-component vaadin-button[theme~="tertiary"] {
    color: #475569;
    font-size: 0.85rem;
    font-weight: 500;
    transition: color 0.2s ease;
    padding: 6px 12px;
    border-radius: 8px;
}

.login-component vaadin-button[theme~="tertiary"]:hover {
    color: #2563eb;
    background: rgba(37, 99, 235, 0.06);
}

/* ===== FOOTER ===== */
.login-footer {
    color: #94a3b8;
    font-size: 0.75rem;
    font-weight: 400;
    padding: 12px 0 4px 0;
    text-align: center;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 480px) {
    .login-component {
        padding: 32px 24px;
        margin: 12px;
        border-radius: 16px;
        width: calc(100vw - 24px);
        max-width: calc(100vw - 24px);
    }

    .login-component h1 {
        font-size: 1.5rem;
    }

    .login-logo {
        width: 56px;
        height: 56px;
    }

    .login-subtitle {
        font-size: 0.8rem;
    }
}body {
    --bs-heading-color: #5d596c;
    --bs-border-radius: 0.375rem;
    --bs-body-color: #6f6b7d;
    --bs-border-width: 1px;
    --bs-btn-focus-shadow-rgb: 136, 126, 242;
    --bs-link-hover-color: #685dd8;
    --bs-btn-hover-color: var(--bs-link-hover-color);
    --bs-btn-hover-bg: #685dd8;
    --bs-primary: #7367f0;
    --bs-secondary: #a8aaae;
    --bs-success: #28c76f;
}

.card {
    --bs-card-spacer-y: 1.5rem;
    --bs-card-spacer-x: 1.5rem;
    --bs-card-title-spacer-y: 0.875rem;
    --bs-card-title-color: #5d596c;
    --bs-card-subtitle-color: ;
    --bs-card-border-width: 0;
    --bs-card-border-color: #dbdade;
    --bs-card-border-radius: var(--bs-border-radius);
    --bs-card-box-shadow: 0 0.25rem 1.125rem rgba(75, 70, 92, 0.1);
    --bs-card-inner-border-radius: 0.375rem;
    --bs-card-cap-padding-y: 1.5rem;
    --bs-card-cap-padding-x: 1.5rem;
    --bs-card-cap-bg: transparent;
    --bs-card-cap-color: ;
    --bs-card-height: ;
    --bs-card-color: ;
    --bs-card-bg: #fff;
    --bs-card-img-overlay-padding: 1.5rem;
    --bs-card-group-margin: 0.75rem;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: var(--bs-card-height);
    color: var(--bs-body-color);
    word-wrap: break-word;
    background-color: var(--bs-card-bg);
    background-clip: border-box;
    border: var(--bs-card-border-width) solid var(--bs-card-border-color);
    border-radius: var(--bs-card-border-radius);
}

.card > hr {
    margin-right: 0;
    margin-left: 0;
}

.card > .list-group {
    border-top: inherit;
    border-bottom: inherit;
}

.card > .list-group:first-child {
    border-top-width: 0;
    border-top-left-radius: var(--bs-card-inner-border-radius);
    border-top-right-radius: var(--bs-card-inner-border-radius);
}

.card > .list-group:last-child {
    border-bottom-width: 0;
    border-bottom-right-radius: var(--bs-card-inner-border-radius);
    border-bottom-left-radius: var(--bs-card-inner-border-radius);
}

.card > .card-header + .list-group,
.card > .list-group + .card-footer {
    border-top: 0;
}

.card-body {
    flex: 1 1 auto;
    padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
    color: var(--bs-card-color);
}

.card-title {
    margin-bottom: var(--bs-card-title-spacer-y);
    color: var(--bs-card-title-color);
}

.card-subtitle {
    margin-top: calc(-0.5 * var(--bs-card-title-spacer-y));
    margin-bottom: 0;
    color: var(--bs-card-subtitle-color);
}

.card-text:last-child {
    margin-bottom: 0;
}

.card-link + .card-link {
    margin-left: var(--bs-card-spacer-x);
}

.card-header {
    padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);
    margin-bottom: 0;
    color: var(--bs-card-cap-color);
    background-color: var(--bs-card-cap-bg);
    border-bottom: var(--bs-card-border-width) solid var(--bs-card-border-color);
}

.card-header:first-child {
    border-radius: var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius) 0 0;
}

.card-footer {
    padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);
    color: var(--bs-card-cap-color);
    background-color: var(--bs-card-cap-bg);
    border-top: var(--bs-card-border-width) solid var(--bs-card-border-color);
}

.card-footer:last-child {
    border-radius: 0 0 var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius);
}

.card-header-tabs {
    margin-right: calc(-0.5 * var(--bs-card-cap-padding-x));
    margin-bottom: calc(-1 * var(--bs-card-cap-padding-y));
    margin-left: calc(-0.5 * var(--bs-card-cap-padding-x));
    border-bottom: 0;
}

.card-header-tabs .nav-link.active {
    background-color: var(--bs-card-bg);
    border-bottom-color: var(--bs-card-bg);
}

.card-header-pills {
    margin-right: calc(-0.5 * var(--bs-card-cap-padding-x));
    margin-left: calc(-0.5 * var(--bs-card-cap-padding-x));
}

.card-img-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: var(--bs-card-img-overlay-padding);
    border-radius: var(--bs-card-inner-border-radius);
}

.card-img,
.card-img-top,
.card-img-bottom {
    width: 100%;
}

.card-img,
.card-img-top {
    border-top-left-radius: var(--bs-card-inner-border-radius);
    border-top-right-radius: var(--bs-card-inner-border-radius);
}

.card-img,
.card-img-bottom {
    border-bottom-right-radius: var(--bs-card-inner-border-radius);
    border-bottom-left-radius: var(--bs-card-inner-border-radius);
}

.card-group > .card {
    margin-bottom: var(--bs-card-group-margin);
}

@media (min-width: 576px) {
    .card-group {
        display: flex;
        flex-flow: row wrap;
    }

    .card-group > .card {
        flex: 1 0 0%;
        margin-bottom: 0;
    }

    .card-group > .card + .card {
        margin-left: 0;
        border-left: 0;
    }

    .card-group > .card:not(:last-child) {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .card-group > .card:not(:last-child) .card-img-top,
    .card-group > .card:not(:last-child) .card-header {
        border-top-right-radius: 0;
    }

    .card-group > .card:not(:last-child) .card-img-bottom,
    .card-group > .card:not(:last-child) .card-footer {
        border-bottom-right-radius: 0;
    }

    .card-group > .card:not(:first-child) {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    .card-group > .card:not(:first-child) .card-img-top,
    .card-group > .card:not(:first-child) .card-header {
        border-top-left-radius: 0;
    }

    .card-group > .card:not(:first-child) .card-img-bottom,
    .card-group > .card:not(:first-child) .card-footer {
        border-bottom-left-radius: 0;
    }
}

.card .text-capitalize {
    text-transform: capitalize !important;
}

.card .rounded {
    border-radius: 0.375rem !important;
}

.card .text-center {
    text-align: center !important;
}

.card .mb-1 {
    margin-bottom: 0.25rem !important;
}

.card .d-flex {
    display: flex !important;
}

.card .justify-content-center {
    justify-content: center !important;
}

.card h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-weight: 500;
    line-height: 1.37;
    color: var(--bs-heading-color);
}

.card h1, .h1 {
    font-size: calc(1.3625rem + 1.35vw);
}

@media (min-width: 1200px) {
    .card h1, .h1 {
        font-size: 2.375rem;
    }
}

.card h2, .h2 {
    font-size: calc(1.325rem + 0.9vw);
}

@media (min-width: 1200px) {
    .card h2, .h2 {
        font-size: 2rem;
    }
}

.card h3, .h3 {
    font-size: calc(1.2875rem + 0.45vw);
}

@media (min-width: 1200px) {
    .card h3, .h3 {
        font-size: 1.625rem;
    }
}

.card h4, .h4 {
    font-size: calc(1.2625rem + 0.15vw);
}

@media (min-width: 1200px) {
    .card h4, .h4 {
        font-size: 1.375rem;
    }
}

.card h5, .h5 {
    font-size: 1.125rem;
}

.card h6, .h6 {
    font-size: 0.9375rem;
}

.card .mt-3 {
    margin-top: 1rem !important;
}

.card .mb-0 {
    margin-bottom: 0 !important;
}

.card .me-1 {
    margin-left: 0.25rem !important;
}

.card .display-4 {
    font-size: calc(1.4625rem + 2.55vw);
    font-weight: 500;
    line-height: 1.37;
}

@media (min-width: 1200px) {
    .card .display-4 {
        font-size: 3.375rem;
    }
}

.card .display-5 {
    font-size: calc(1.425rem + 2.1vw);
    font-weight: 500;
    line-height: 1.37;
}
@media (min-width: 1200px) {
    .card .display-5 {
        font-size: 3rem;
    }
}

.card .display-6 {
    font-size: calc(1.3875rem + 1.65vw);
    font-weight: 500;
    line-height: 1.37;
}
@media (min-width: 1200px) {
    .card .display-6 {
        font-size: 2.625rem;
    }
}

.card .mt-auto {
    margin-top: auto !important;
}

.card .mb-1 {
    margin-bottom: 0.25rem !important;
}

.card .mb-2 {
    margin-bottom: 0.5rem !important;
}

.card .text-muted {
    --bs-text-opacity: 1;
    color: #a5a3ae !important;
}

.card .fw-normal {
    font-weight: 400 !important;
}

.btn {
    --bs-btn-padding-x: 1.25rem;
    --bs-btn-padding-y: 0.6rem;
    --bs-btn-font-family: ;
    --bs-btn-font-size: 0.9375rem;
    --bs-btn-font-weight: 500;
    --bs-btn-line-height: 1.125;
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-bg: transparent;
    --bs-btn-border-width: var(--bs-border-width);
    --bs-btn-border-color: transparent;
    --bs-btn-border-radius: var(--bs-border-radius);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-box-shadow: 0 0.125rem 0.25rem rgba(165, 163, 174, 0.3);
    --bs-btn-disabled-opacity: 0.65;
    --bs-btn-focus-box-shadow: 0 0 0 0.05rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
    display: inline-block;
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
    font-family: var(--bs-btn-font-family);
    font-size: var(--bs-btn-font-size);
    font-weight: var(--bs-btn-font-weight);
    line-height: var(--bs-btn-line-height);
    color: var(--bs-btn-color);
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
    border-radius: var(--bs-btn-border-radius);
    background-color: var(--bs-btn-bg);
    transition: all 0.2s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
    .btn {
        transition: none;
    }
}

.btn:hover {
    color: var(--bs-btn-hover-color);
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
}

.btn-label-success {
    color: #28c76f;
    border-color: transparent;
    background: #ddf6e8;
}

.btn-label-success.waves-effect .waves-ripple {
    background: radial-gradient(rgba(40, 199, 111, 0.2) 0, rgba(40, 199, 111, 0.3) 40%, rgba(40, 199, 111, 0.4) 50%, rgba(40, 199, 111, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
}

.btn-label-success:hover {
    border-color: transparent !important;
    background: #cbf2dc !important;
    color: #28c76f !important;
}

.btn-label-success:focus, .btn-label-success.focus {
    color: #28c76f;
    background: #cbf2dc;
    box-shadow: none !important;
}

.btn-label-success:active, .btn-label-success.active, .btn-label-success.show.dropdown-toggle, .show > .btn-label-success.dropdown-toggle {
    color: #28c76f !important;
    background-color: #cbf2dc !important;
    border-color: transparent !important;
}

.btn-label-success:active:focus, .btn-label-success.active:focus, .btn-label-success.show.dropdown-toggle:focus, .show > .btn-label-success.dropdown-toggle:focus {
    box-shadow: none;
}

.btn-label-success.disabled, .btn-label-success:disabled {
    color: #28c76f !important;
    border-color: transparent !important;
    background: #dff7e9 !important;
    box-shadow: none;
}

.btn-group .btn-label-success,
.input-group .btn-label-success {
    border-right: var(--bs-border-width) solid #cbf2dc;
    border-left: var(--bs-border-width) solid #cbf2dc;
}

.btn-group-vertical .btn-label-success {
    border-top-color: #cbf2dc;
    border-bottom-color: #cbf2dc;
}

.btn-outline-success {
    color: #28c76f;
    border-color: #28c76f;
    background: transparent;
}

.btn-outline-success.waves-effect .waves-ripple {
    background: radial-gradient(rgba(40, 199, 111, 0.2) 0, rgba(40, 199, 111, 0.3) 40%, rgba(40, 199, 111, 0.4) 50%, rgba(40, 199, 111, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
}

.btn-outline-success:hover {
    color: #28c76f !important;
    background-color: #eefbf3 !important;
    border-color: #28c76f !important;
}

.card .d-grid {
    display: grid !important;
}

.card .w-80 {
    width: 80% !important;
}

.card .primary {
    color: var(--lumo-primary-color)
}

.card .secondary {
    color: var(--lumo-secondary-text-color)
}

.card .success {
    color: var(--lumo-success-color)
}
.card .text-desc {
    height: 15px;
    color: var(--lumo-success-color);
}.pricing-plans-comparison .table tr > th:first-child,
.pricing-plans-comparison .table tr > td:first-child {
    white-space: nowrap;
    text-align: start;
}
.pricing-plans-comparison .table tbody tr:last-child td {
    border-bottom: 0;
}

.price-yearly-toggle {
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
}

.light-style .bg-alt-pricing {
    background-color: #f8f7fa;
}

.dark-style .bg-alt-pricing {
    background-color: #25293c;
}

@media (min-width: 992px) {
    .pricing-free-trial img {
        position: absolute;
        bottom: 0;
    }
    html:not([dir=rtl]) .pricing-free-trial img {
        right: 0;
    }
    [dir=rtl] .pricing-free-trial img {
        left: 0;
    }
}.search-layout {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
}

.modal-div {
    position: fixed;
    visibility: hidden;
    opacity: 0;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    background-color: rgba(36, 33, 33, 0.6);
    z-index: 1;
}

.modal-shown {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.6s;
}

.search-field {
    position: fixed;
    top: 80px;
    width: 60%;
    left: 20%;
    z-index: 2;
}