/*
* Стили для шаблона SODA в soda-template.php
*/

.soda-Body {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-secondary);
    background: var(--color-background-base);
    border-radius: var(--radius-m);
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

.soda-Body *:hover,
.soda-Body *:focus {
    cursor: default;
}

.soda-Body .interactive:hover,
.soda-Body .interactive *:hover {
    cursor: pointer;
}


.soda-Body h1,
.soda-Body h2,
.soda-Body h3,
.soda-Body h4,
.soda-Body h5,
.soda-Body h6 {
    margin: 0;
}

.soda-Body p {
    font-weight: var(--font-weight-regular);
}

/* Header */
.soda-Header {
    width: 100%;
    background: var(--color-background-level-1);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.soda-Header_Top {
    display: flex;
    align-items: center;
    padding: var(--gap-s) var(--gap-l);
    gap: var(--gap-l);
}

.soda-Header_Logo {
    width: 106px;
    height: 24px;
    flex-shrink: 0;
}

.soda-Header_Search {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    flex: 1;
}

.soda-Header_Search .material-icons-round {
    font-size: 16px;
    color: var(--color-text-tertiary);
}

.soda-Header_Controls {
    display: flex;
    align-items: center;
    gap: var(--gap-s);
}

/* Стили для рамки хедера */
.soda-Header.interactive.complex::before {
    left: var(--gap-xxs);
    top: var(--gap-xxs);
    right: var(--gap-xxs);
}
.soda-Header .Highlight_Selected {
    right: var(--gap-xxs);
}
/* Стили для рамки футера */
.soda-Footer.interactive.simple::before {
    left: var(--gap-xxs);
    bottom: var(--gap-xxs);
    right: var(--gap-xxs);
}

.material-icons-round {
    font-size: 16px;
    color: var(--color-text-tertiary);
}

/* Separators */
.soda-Separator-Vertical,
.soda-Separator-Horizontal {
    background-color: var(--color-border-base);
}

/* Input and Dropdown */
.soda-Header .soda-Input,
.soda-Header .soda-Dropdown {
    height: var(--size-m);
    font-size: 14px;
    line-height: var(--line-height-normal);
    font-weight: var(--font-weight-regular);
}
.soda-Header .soda-Input {
    width: 100%;
}

.soda-Input,
.soda-Dropdown, 
.soda-Header_Search,
input.soda-Input {
    border: 1px solid var(--color-border-base);
    border-radius: var(--radius-s);
    padding: var(--gap-xs);
    padding-right: var(--gap-s);
    font-size: var(--font-size-base);
    line-height: var(--line-height-tight);
    display: flex;
    height: var(--size-m);
    justify-content: flex-start;
    align-items: center;
    gap: var(--gap-xs);
    flex-shrink: 0;
    align-self: stretch;
    background: var(--color-background-level-1);
    color: var(--color-text-tertiary);
}

.soda-Dropdown {
    width: 220px;
    /* appearance: none;
    background: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center; */
    position: relative;
}
.soda-Dropdown::after {
    content: "expand_more";
    font-family: 'Material Icons Round';
    font-size: 16px;
    color: var(--color-text-tertiary);
    pointer-events: none;
    position: absolute;
    right: var(--gap-xs);
    top: 50%;
    transform: translateY(-50%);
}

/* Icon Button */
.soda-IconButton {
    position: relative;
    width: var(--size-m);
    height: var(--size-m);
    border: 1px solid var(--color-border-base);
    border-radius: var(--radius-m);
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.soda-IconButton .material-icons-round {
    color: var(--color-text-tertiary);
    font-size: 20px;
}

.soda-IconButton_Counter {
    position: absolute !important;
    top: -6px;
    right: -6px;
    background: var(--color-error);
    color: var(--color-text-inverted);
    font-size: 12px;
    padding: 2px 6px;
    border-radius: var(--radius-l);
    min-width: 20px;
    text-align: center;
}

/* User Menu */
.soda-UserMenu {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
}
/* Wrappers */
.soda-AvatarWrapper,
.soda-Header_LogoWrapper,
.soda-CheckboxWrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

.soda-UserMenu_Avatar {
    width: var(--size-m);
    height: var(--size-m);
    border-radius: var(--radius-100);
}

.soda-UserMenu_Name {
    font-size: 14px;
    line-height: var(--line-height-normal);
    font-weight: var(--font-weight-regular);
}

/* Main Menu */
.soda-MainMenu {
    background: var(--color-brand-base);
    padding: 0 var(--gap-l);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
    height: 52px;
}

.soda-MainMenu_List {
    display: flex;
    list-style: none;
    gap: var(--gap-s);
    margin: 0;
    padding: 0;
}

.soda-MainMenu_Link,
.soda-MainMenu_Link-active,
.soda-MainMenu_Link:hover,
.soda-MainMenu_Link-active:hover,
.soda-MainMenu_Link-active:focus,
.soda-MainMenu_Link:focus,
.soda-MainMenu_Link:visited,
.soda-MainMenu_Link-active:visited {
    display: block;
    padding: 16px var(--gap-s);
    color: var(--color-text-inverted);
    text-decoration: none;
    font-size: 14px;
    position: relative;
    line-height: var(--line-height-normal);
    font-weight: var(--font-weight-regular);
}


.soda-MainMenu_Link-active {
    background: var(--color-brand-hover);
}

.soda-MainMenu_Link-active::after {
    content: '';
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 2px;
    background: var(--color-text-inverted);
}

.soda-MainMenu_Burger {
    background: none;
    border: none;
    cursor: pointer;
    padding: 12px;
}
.soda-MainMenu_Burger .material-icons-round {
    color: var(--color-text-inverted);
}


/* Wrapper */
.soda-Wrapper {
    background: var(--color-background-base);
    padding: var(--gap-ms) var(--gap-l) var(--gap-m) var(--gap-l);
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
}

/* Alert */
.soda-Alert {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    padding: var(--gap-xs);
    margin: var(--gap-xs) 0;
    background: var(--color-brand-subtle);
    border-radius: var(--radius-m);
}

.soda-Alert_Icon {
    color: var(--color-brand-base);
}

.soda-Alert_Content {
    flex-grow: 1;
    color: var(--color-text-primary);
    font-size: 14px;
    line-height: var(--line-height-normal);
    font-weight: var(--font-weight-regular);
}

.soda-Alert_Close {
    color: var(--color-text-tertiary);
    cursor: pointer;
}

/* Preloader Block */
.soda-PreloaderBlock {
    margin: var(--gap-xs) 0;
    padding: var(--gap-xs);
    background: var(--color-background-level-1);
    border-radius: var(--radius-m);
    border: 1px solid var(--color-border-base);
}

.soda-PreloaderBlock_Header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-xs);
}

.soda-PreloaderBlock_Left {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
}

.soda-PreloaderBlock_Left h2 {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    color: var(--color-text-primary);
    font-size: 16px;
    margin: 0;
}

.soda-PreloaderBlock_Right {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
}

.soda-IconBadge {
    padding: var(--gap-xxs);
    background: var(--color-background-level-3);
    border-radius: var(--radius-100);
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--size-m);
    height: var(--size-m);
}

.soda-IconBadge .material-icons-round {
    font-size: 20px;
    color: var(--color-text-secondary);
}

/* Breadcrumbs */
.soda-Breadcrumbs {
    display: flex;
    gap: var(--gap-xs);
    margin-bottom: var(--gap-l);
}

.soda-Breadcrumb,
.soda-Breadcrumb:visited,
.soda-Breadcrumb:hover {
    color: var(--color-text-tertiary);
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    font-size: 14px;
    line-height: var(--line-height-normal);
    font-weight: var(--font-weight-regular);
    text-decoration: none;
}

.soda-Breadcrumb:after {
    content: '/';
    color: var(--color-text-disabled);
}

.soda-Breadcrumb:last-child:after {
    display: none;
}

.soda-Breadcrumb:visited {
    color: var(--color-text-tertiary);
}

/* Tabs */
.soda-Tabs {
    display: flex;
    gap: var(--gap-s);
    border-bottom: 1px solid var(--color-border-base);
    margin-bottom: var(--gap-s);
}

.soda-Tab,
.soda-Tab-active,
.soda-Tab:visited,
.soda-Tab:hover,
.soda-Tab-active:hover,
.soda-Tab-active:visited {
    padding: var(--gap-xs) 0;
    font-size: 16px;
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    text-decoration: none;
    color: var(--color-text-secondary);
    position: relative;
}

.soda-Tab-active {
    color: var(--color-text-primary);
    background: var(--color-background-level-2);
}

.soda-Tab-active:after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 2px;
    background: var(--color-brand-base);
}

.soda-PillTabs {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-xs);
}

.soda-PillTab,
.soda-PillTab-active {
    display: flex;
    padding: var(--gap-xs) var(--gap-ms);
    align-items: center;
    border-radius: var(--radius-m);
    background: var(--color-background-level-3);
    font-size: 14px;
    line-height: var(--line-height-normal);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    white-space: nowrap;
    box-sizing: border-box;
    height: var(--size-m);
}

.soda-PillTab-active {
    border-top: 1px solid var(--color-brand-base);
    border-right: 1px solid var(--color-brand-base);
    border-bottom: 3px solid var(--color-brand-base);
    border-left: 1px solid var(--color-brand-base);
    background: var(--color-brand-subtle);
    color: var(--color-brand-base);
}


/* Footer */
.soda-Footer {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: var(--gap-l);
    border-top: 1px solid var(--color-border-base);
    background: var(--color-background-base);
}

.soda-Footer_Support {
    color: var(--color-text-primary);
    font-size: 14px;
    line-height: var(--line-height-normal);
    display: flex;
    flex-direction: column;
    gap: var(--gap-xxs);
}

.soda-Footer_SupportText {
    font-weight: var(--font-weight-semibold);
}

.soda-Footer_SupportPhone,
.soda-Footer_SupportEmail {
    color: var(--color-text-tertiary);
    font-weight: var(--font-weight-regular);
}

.soda-Footer_Link {
    color: var(--color-text-primary);
    text-decoration: none;
    font-size: 14px;
    line-height: var(--line-height-normal);
    font-weight: var(--font-weight-regular);
}

/* Button */
.soda-Button-primary,
.soda-Button-secondary {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
    font-size: 14px;
    white-space: nowrap;
    line-height: var(--line-height-normal);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--radius-s);
    padding: var(--gap-s) var(--gap-ms);
    height: 46px;
}


.soda-Button-primary {
    background: var(--color-brand-base);
    color: var(--color-text-inverted);
    border: none;
}

.soda-Button-primary .material-icons-round {
    color: var(--color-text-inverted);
}

.soda-Button-secondary,
.soda-Button-secondary:hover {
    background: var(--color-background-level-1);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border-base);
}

.soda-Button-secondary .material-icons-round {
    color: var(--color-text-tertiary);
}

.soda-Button-primary .material-icons-round,
.soda-Button-secondary .material-icons-round,
.soda-Button-linkNeutral .material-icons-round,
.soda-Button-link .material-icons-round {
    font-size: 20px;
}

.soda-Button-link,
.soda-Button-linkNeutral {
    display: flex;
    align-items: center;
    gap: var(--gap-xxs);
    color: var(--color-text-primary);
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-normal);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s ease;
    border: none;
    background: none;
    padding: 0 var(--gap-xxs);
}

.soda-Button-linkNeutral .material-icons-round,
.soda-Button-link .material-icons-round {
    color: var(--color-text-tertiary);
    transition: color 0.2s ease;
}

.soda-Button-link {
    color: var(--color-brand-base);
}

.soda-Button-linkNeutral {
    color: var(--color-text-secondary);
}

.soda-SmallButton-primary,
.soda-SmallButton-secondary {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
    font-size: 12px;
    white-space: nowrap;
    line-height: var(--line-height-tight);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--radius-s);
    padding: var(--gap-xs) var(--gap-s);
}

.soda-SmallButton-primary .material-icons-round,
.soda-SmallButton-secondary .material-icons-round {
    font-size: 16px;
}

.soda-SmallButton-primary {
    background: var(--color-brand-base);
    color: var(--color-text-inverted);
    border: none;
}

.soda-SmallButton-secondary,
.soda-SmallButton-secondary:hover {
    background: var(--color-background-level-1);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border-base);
}

.soda-ButtonSet {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    align-self: flex-start;
}

.soda-ButtonSet .soda-Button-link, 
.soda-ButtonSet .soda-Button-linkNeutral,
.soda-ButtonSet .soda-Button-link .material-icons-round, 
.soda-ButtonSet .soda-Button-linkNeutral .material-icons-round {
    font-size: 14px;
}

/* Badge */
.soda-Badge-primary,
.soda-Badge-secondary {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
    padding: 0 var(--gap-xs);
    border-radius: var(--radius-s);
    font-size: 14px;
    line-height: var(--line-height-normal);
    font-weight: var(--font-weight-semibold);
    box-sizing: content-box;
    white-space: nowrap;
}

.soda-Badge-primary {
    background: var(--color-brand-base);
    color: var(--color-text-inverted);
}

.soda-Badge-primary .material-icons-round {
    font-size: 8px;
    color: var(--color-text-inverted);
}

.soda-Badge-secondary {
    background: var(--color-neutral-0);
    color: var(--color-brand-base);
    border: 1px solid var(--color-brand-base);
}

.soda-h-Counter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--gap-xxs) var(--gap-xs);
    color: var(--color-text-primary);
    background: var(--color-background-level-3);
    border-radius: var(--radius-m);
    font-size: 14px;
    line-height: var(--line-height-normal);
}


/* Применение стилей к элементам */
.soda-h1 {
    font-size: 32px;
    line-height: var(--line-height-tight);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0;
}

.soda-h2 {
    font-size: 24px;
    line-height: var(--line-height-tight);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0;
}

.soda-h3 {
    font-size: 20px;
    line-height: var(--line-height-tight);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0;
}

.soda-h4 {
    font-size: 16px;
    line-height: var(--line-height-tight);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0;
}


.soda-Footer_Support {
    font-weight: var(--font-weight-semibold);
}

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

.soda-PageHeader_Title {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-xs);
}

.soda-PageHeader_Title h1 {
    margin: 0;
}

.soda-Badges {
    display: flex;
    gap: var(--gap-xs);
    margin-left: auto;
    padding-top: var(--gap-s);
}

.soda-Content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-s);
    align-self: stretch;
}
.soda-Content > * {
    flex-grow: 1;
    width: 100%;
}

.soda-Block {
    display: flex;
    padding: var(--gap-m) var(--gap-l);
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    border-radius: 12px;
    border: 1px solid var(--color-border-base);
    background: var(--color-background-level-1);
    position: relative;
}

.soda-Block_Heading {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    align-self: stretch;
}

.soda-Block_Heading h3 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
}

.soda-Block_Content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-ms);
    align-self: stretch;
}

.soda-Block_GridContainer {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap-s);
}

/* Панель инструментов */
.soda-Toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: var(--gap-ms);
}

.soda-ComplexSearch {
    flex-grow: 1;
    width: 100%;
    height: 46px;
    background: var(--color-background-level-1);
    border: 1px solid var(--color-border-base);
    border-radius: var(--radius-s);
    padding: var(--gap-xs);
    display: flex;
    align-items: center;
    gap: var(--gap-s);
    flex-wrap: nowrap;
}
.soda-ComplexSearch_TextValues {
    color: var(--color-text-tertiary);
    font-size: var(--font-size-base);
    line-height: var(--line-height-tight);
    font-weight: var(--font-weight-regular);
}

.soda-Chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-xs);
    align-items: center;
    flex-wrap: nowrap;

}

.soda-Chip {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xxs);
    padding: var(--gap-xs) var(--gap-xs);
    background: var(--color-background-level-3);
    border-radius: var(--radius-s);
    font-size: 12px;
    line-height: var(--line-height-tight);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    white-space: nowrap;
}

.soda-Chip .material-icons-round {
    font-size: 16px;
}

.soda-ComplexSearch_TextValue {
    font-size: 14px;
    line-height: var(--line-height-normal);
    color: var(--color-text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    width: 120px;
}

.soda-Toolbar_Actions {
    display: flex;
    gap: var(--gap-xs);
}  

/* Accordion */

.soda-Accordion {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    border-radius: var(--radius-m);
    border: 1px solid var(--color-border-base);
    background: var(--color-background-level-1);
    position: relative;
}

.soda-Accordion_Header {
    display: flex;
    padding: var(--gap-xs) var(--gap-ms);
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--gap-xs);
    align-self: stretch;
    background: var(--color-background-level-3);
}

.soda-Accordion_Title {
    flex: 1;
    min-width: 0;
}

.soda-Accordion_Title h4 {
    margin: 0;
    word-break: break-word;
}

.soda-Accordion_Header .material-icons-round {
    flex-shrink: 0;
    margin-top: 2px;
}

.soda-Accordion_Content {
    display: flex;
    padding: var(--gap-ms);
    align-items: flex-start;
    gap: var(--gap-xs);
    align-self: stretch;
    background: var(--color-background-level-1);
    border-radius: var(--radius-m);
}

/* DataField */

.soda-DataField {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 0 0;
}

.soda-DataField_Label {
    display: flex;
    padding-bottom: var(--gap-xxs);
    align-items: flex-start;
    gap: var(--gap-xxs);
    align-self: stretch;
    color: var(--color-text-tertiary);
    font-size: 14px;
    line-height: var(--line-height-normal);
    font-weight: var(--font-weight-semibold);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.soda-DataField_Value {
    flex: 1 0 0;
    align-self: stretch;
    color: var(--color-text-secondary);
    font-size: 16px;
    line-height: var(--line-height-tight);
    font-weight: var(--font-weight-regular);
}

/* DataTable */

.soda-DataTable {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    border-radius: var(--radius-m);
    border: 1px solid var(--color-border-base);
    background: var(--color-background-level-1);
    position: relative;
}

.soda-DataTable_Header {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    align-self: stretch;
    background: var(--color-background-level-3);
    font-size: 14px;
    line-height: var(--line-height-normal);
    font-weight: var(--font-weight-semibold);
    border-top-left-radius: var(--radius-m);
    border-top-right-radius: var(--radius-m);
}

.soda-DataTable_Row {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    align-self: stretch;
    border-top: 1px solid var(--color-border-base);
    font-size: 14px;
    line-height: var(--line-height-normal);
    font-weight: var(--font-weight-regular);
}

.soda-DataTable_Cell,
.soda-DataTable_HeadingCell,
.soda-DataTable_HeadingCell-icon,
.soda-DataTable_Cell-icon,
.soda-DataTable_Cell-user {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    flex: 1;
    padding: var(--gap-s) var(--gap-xs);
}

.soda-DataTable_HeadingCell,
.soda-DataTable_HeadingCell-icon {
    color: var(--color-text-tertiary);
    line-height: var(--line-height-normal);
    font-weight: var(--font-weight-semibold);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.soda-DataTable_HeadingCell-icon,
.soda-DataTable_Cell-icon {
    width: fit-content;
    flex: 0 0 auto;
}

.soda-DataTable_HeadingCell-icon .material-icons-round,
.soda-DataTable_Cell-icon .material-icons-round {
    font-size: 20px;
}

.soda-DataTable_HeadingCell-icon .material-icons-round {
    color: var(--color-text-tertiary);
}

.soda-DataTable_Cell-icon .material-icons-round {
    color: var(--color-text-secondary);
}
.soda-DataTable_Cell-icon:first-child .material-icons-round {
    color: var(--color-text-tertiary);
}

.soda-DataTable_Cell-user {
    justify-content: flex-start;
}

.soda-DataTable_User {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
}

.soda-DataTable_Avatar {
    width: var(--size-s);
    height: var(--size-s);
    border-radius: var(--radius-100);
}

.soda-DataTable_UserName {
    color: var(--color-text-secondary);
    font-size: 14px;
    line-height: var(--line-height-normal);
    font-weight: var(--font-weight-regular);
}

.soda-DataTable_TableScroll {
    position: absolute !important;
    right: 0;
    top: 0;
    height: 100%;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to right, transparent, var(--color-background-level-1));
    border-radius: var(--radius-m);
    z-index: 100;
}

.soda-DataTable_TableScroll .material-icons-round {
    font-size: 50px;
    color: var(--color-neutral-300);
    transform: rotate(-90deg);
}

/* Pagination */
.soda-Pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--gap-s) var(--gap-l);
    border-top: 1px solid var(--color-border-base);
    background: var(--color-background-level-1);
    margin: 0 calc(-1 * var(--gap-l));
    margin-top: var(--gap-s);
    width: calc(100% + var(--gap-l) * 2);
}

.soda-Pagination_Total {
    display: flex;
    align-items: center;
    gap: var(--gap-s);
}

.soda-Pagination_TotalText {
    color: var(--color-text-secondary);
    font-size: 14px;
    line-height: var(--line-height-normal);
}

.soda-Pagination_TotalValue {
    color: var(--color-brand-base);
    font-size: 14px;
    line-height: var(--line-height-normal);
    font-weight: var(--font-weight-semibold);
}

.soda-Pagination_Pages {
    display: flex;
    align-items: center;
    gap: var(--gap-m);
    margin: 0 auto;
}

.soda-Pagination_Numbers {
    display: flex;
    gap: var(--gap-xs);
}

.soda-Pagination_Page,
.soda-Pagination_Page-active {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--size-m);
    height: var(--size-m);
    border-radius: var(--radius-xs);
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: 14px;
    line-height: var(--line-height-normal);
}

.soda-Pagination_Page-active {
    background: var(--color-brand-base);
    color: var(--color-text-inverted);
}

.soda-Pagination_Buttons {
    display: flex;
    align-items: center;
    gap: var(--gap-xxs);
}

.soda-Pagination_StepButton,
.soda-Pagination_StepButton-disabled {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--size-m);
    height: var(--size-m);
    border: 1px solid var(--color-border-base);
    border-radius: var(--radius-s);
    background: var(--color-background-level-1);
}

.soda-Pagination_StepButton-disabled {
    background: var(--color-background-disabled);
}

.soda-Pagination_StepButton .material-icons-round {
    font-size: 16px;
    color: var(--color-text-tertiary);
}

.soda-Pagination_PerPage {
    display: flex;
    align-items: center;
    gap: var(--gap-s);
}
.soda-Pagination_Select {
    display: flex;
    align-items: center;
    gap: var(--gap-xxs);
}

.soda-Pagination_PerPageText {
    color: var(--color-text-secondary);
    font-size: 14px;
    line-height: var(--line-height-normal);
}

.soda-Pagination_PerPageValue {
    color: var(--color-brand-base);
    font-size: 14px;
    line-height: var(--line-height-normal);
    font-weight: var(--font-weight-semibold);
}

/* Action Panel */
.soda-ActionPanel {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: var(--gap-s) var(--gap-l);
    border-top: 1px solid var(--color-border-base);
    background: var(--color-background-level-1);
    margin: 0 calc(-1 * var(--gap-l)) calc(-1 * var(--gap-m)) calc(-1 * var(--gap-l));
    width: calc(100% + var(--gap-l) * 2);
    gap: var(--gap-xxl);
    border-bottom-left-radius: var(--radius-l);
    border-bottom-right-radius: var(--radius-l);
}

.soda-ActionPanel_PerPage {
    display: flex;
    align-items: center;
    gap: var(--gap-s);
}

.soda-ActionPanel_Text {
    color: var(--color-text-secondary);
    font-size: 14px;
    line-height: var(--line-height-normal);
}

.soda-ActionPanel_Value {
    color: var(--color-brand-base);
    font-size: 14px;
    line-height: var(--line-height-normal);
    font-weight: var(--font-weight-semibold);
}

.soda-ActionPanel_Actions {
    display: flex;
    align-items: center;
    gap: var(--gap-s);
}

.soda-ActionPanel_Actions .soda-Input {
    width: 300px;
}

.soda-ActionPanel_Checkbox {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    color: var(--color-text-primary);
    font-size: 14px;
    line-height: var(--line-height-normal);
}

.soda-ActionPanel_Checkbox .material-icons-round {
    font-size: 24px;
    color: var(--color-brand-base);
}

/* Dashboard */
.soda-Dashboard {
    grid-column: span 2;
    grid-row: span 3;
    display: flex;
    height: 489px;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-ms);
    border-radius: 12px;
    border: 1px solid var(--color-border-base);
    background: var(--color-background-level-1);
    position: relative;
}

.soda-Dashboard_Header {
    display: flex;
    padding: var(--gap-l);
    padding-bottom: 0;
    align-items: center;
    gap: var(--gap-s);
    align-self: stretch;
    }

.soda-Dashboard_Title {
    width: 100%;
}

/* Chart */
.soda-Chart {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-s);
    align-self: stretch;
    padding: 0 var(--gap-l);
}

.soda-Chart_Content {
    display: flex;
    height: 356px;
    padding: 0px var(--gap-l);
    align-items: center;
    gap: var(--gap-s);
    align-self: stretch;
}

.soda-Chart_Image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.soda-Chart_Legend {
    display: flex;
    padding-bottom: var(--gap-l);
    align-items: flex-start;
    align-content: flex-start;
    gap: var(--gap-xs) var(--gap-s);
    align-self: stretch;    
    flex-wrap: wrap;
}

.soda-Chart_LegendItem {
    display: flex;
    align-items: center;
    gap: var(--gap-xxs);
}

.soda-Chart_LegendItemColor-green,
.soda-Chart_LegendItemColor-purple,
.soda-Chart_LegendItemColor-lightpurple {
    width: var(--size-xxs);
    height: var(--size-xxs);
    border-radius: var(--radius-s);
}

.soda-Chart_LegendItemColor-green {
    background: var(--color-green-700);
}

.soda-Chart_LegendItemColor-purple {
    background: var(--color-primary-700);
}

.soda-Chart_LegendItemColor-lightpurple {
    background: var(--color-primary-100);
}

/* Mini Widget */
.soda-MiniWidget {
    display: flex;
    padding: var(--gap-m);
    align-items: flex-end;
    gap: var(--gap-s);
    flex: 1;
    align-self: stretch;
    border-radius: var(--radius-l);
    border: 1px solid var(--color-border-base);
    background: var(--color-background-level-1);
}

.soda-MiniWidget_Content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    align-self: stretch;
    width: 108px;
    flex-shrink: 0;
}

.soda-MiniWidget_Title {
    color: var(--color-text-secondary);
    font-size: 14px;
    line-height: var(--line-height-normal);
    font-weight: var(--font-weight-semibold);
    margin: 0;
}

.soda-MiniWidget_Value {
    color: var(--color-text-primary);
    font-size: 32px;
    line-height: var(--line-height-normal);
    font-weight: var(--font-weight-semibold);
}

.soda-MiniWidget_Chart {
    flex: 1 0 0;
    align-self: stretch;
    min-height: 0;
}

.soda-MiniWidget_ChartImage {
    width: 100%;
    height: 100%;
    object-fit: contain;
    max-height: 108px;
}

/* Card */
.soda-Card {
    display: flex;
    padding: var(--gap-l);
    flex-direction: column;
    align-items: center;
    gap: var(--gap-ms);
    align-self: stretch;
    border-radius: var(--radius-l);
    border: 1px solid var(--color-border-base);
    background: var(--color-background-level-1);
    position: relative;
}

.soda-Card_Actions {
    position: absolute;
    top: var(--gap-s);
    right: var(--gap-s);
}

.soda-Card_Actions .material-icons-round {
    font-size: 24px;
    color: var(--color-text-primary);
}

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

.soda-NewsCard {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-s);
    align-self: stretch;
    padding: var(--gap-l);
    border-radius: var(--radius-l);
    border: 1px solid var(--color-border-base);
    background: var(--color-background-level-1);
}

.soda-NewsCard_Header {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
}

.soda-NewsCard_TimeStamp {
    font-size: 12px;
    line-height: var(--line-height-tight);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-tertiary);
}

.soda-NewsCard_Text {
    font-size: 12px;
    line-height: var(--line-height-tight);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-secondary);
}

.soda-Link {
    white-space: nowrap;
    color: var(--color-brand-base);
    text-decoration: none;
}

.soda-Link-neutral {
    color: var(--color-text-secondary);
}

.soda-MediaCard_Wrapper {
    grid-column: span 3;
    display: flex;
    gap: var(--gap-s);
}

.soda-MediaCard {
    flex: 1;
    height: 240px;
    border-radius: var(--radius-l);
    padding: 0;
}

.soda-MediaCard_Image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-l);
}

/* Comments */
.soda-Comments {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--gap-m);
    align-self: stretch;
}

.soda-Comment {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--gap-ms);
}

.soda-Comment_Header {
    font-size: 14px;
    line-height: var(--line-height-normal);
}

.soda-Comment_User {
    display: flex;
    align-items: center;
    gap: var(--gap-s);
}

.soda-Comment_UserInfo {
    display: flex;
    align-items: flex-start;
    gap: 0;
    column-gap: var(--gap-xs);
    flex-wrap: wrap;
}

.soda-Comment_UserName {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.soda-Comment_TimeStamp {
    color: var(--color-text-tertiary);
}

.soda-Comment_UserTitle {
    flex: 1 0 100%;
    color: var(--color-text-tertiary);
}

.soda-Comment_Text {
    flex: 1 0 100%;
    margin-bottom: var(--gap-ms);
}

.soda-Comment_Actions {
    display: flex;
    padding: var(--gap-xs) 0;
    align-items: center;
    gap: var(--gap-ms);
    border-top: 1px solid var(--color-border-base);
}

/* Reply */
.soda-Reply {
    display: flex;
    padding: var(--gap-m) var(--gap-l);
    flex-direction: column;
    align-items: stretch;
    gap: var(--gap-l);
    align-self: stretch;
    border-radius: var(--radius-l);
    background: var(--color-brand-subtle);
}

.soda-Reply_Input {
    padding: var(--gap-xs) var(--gap-s);
    border-radius: var(--radius-s);
    border: 1px solid var(--color-border-base);
    background: var(--color-background-level-1);
    height: 124px;
    resize: none;
    font-size: 14px;
}

.soda-Reply_Actions {
    display: flex;
    align-items: center;
    gap: var(--gap-ms);
}

/* Fields */

.soda-Fields {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-l);
    align-self: stretch;
}

.soda-WYSIWYG {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    border-radius: var(--radius-s);
    border: 1px solid var(--color-border-base);
    background: var(--color-background-level-1);
}

.soda-WYSIWYG_Toolbar {
    display: flex;
    padding: var(--gap-xxs);
    align-items: center;
    gap: var(--gap-ms);
    align-self: stretch;
    background: var(--color-background-level-3);
    flex-wrap: wrap;
}

.soda-WYSIWYG_ToolbarGroup {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
}

.soda-WYSIWYG_ToolbarItem {
    display: flex;
    align-items: center;
}

.soda-WYSIWYG_ToolbarItem .material-icons-round {
    font-size: var(--size-xs);
    color: var(--color-text-secondary);
}

.soda-WYSIWYG_FontSelect {  
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    padding: var(--gap-xxs) var(--gap-xs);
    border-radius: var(--radius-s);
    background: var(--color-background-level-1);
    font-size: var(--font-size-base);
    line-height: var(--line-height-tight);
    font-weight: var(--font-weight-base);
    color: var(--color-text-tertiary);
    white-space: nowrap;
}
.soda-WYSIWYG_FontSelect .material-icons-round {
    color: var(--color-text-tertiary);
}
.soda-WYSIWYG_Content {
    display: flex;
    padding: var(--gap-xs) var(--gap-s);
    align-items: flex-start;
    gap: var(--gap-xs);
    align-self: stretch;
    background: var(--color-background-level-1);
    color: var(--color-text-tertiary);
    border-radius: var(--radius-s);
}

.soda-Row {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-ms);
    align-self: stretch;
    flex-wrap: wrap;
}

.soda-Field {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
}

.soda-Field_Label {
    display: flex;
    padding-bottom: var(--gap-xxs);
    align-items: flex-start;
    gap: var(--gap-xxs);
    color: var(--color-text-tertiary);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    font-weight: var(--font-weight-semibold);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.soda-Field_Input,
.soda-Field_Input-placeholder,
.soda-Field_Input-disabled,
.soda-Field_Input-error,
.soda-Field_Input-focus,
.soda-Comment_TextArea,
.soda-TextArea_Input { 
    display: flex;
    padding: var(--gap-xs) var(--gap-s);
    justify-content: flex-start;
    align-items: center;
    gap: var(--gap-xs);
    align-self: stretch;
    border-radius: var(--radius-s);
    border: 1px solid var(--color-border-base);
    background: var(--color-background-level-1);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.soda-Field_Input-placeholder,
.soda-TextArea_Input-placeholder {
    color: var(--color-text-tertiary);
}

.soda-Field_Input-focus {
    border-color: var(--color-brand-base);
}

.soda-Field_Input-disabled {
    color: var(--color-text-disabled);
    background: var(--color-background-disabled);
}

.soda-Field_Input-error {
    border-color: var(--color-error);
}

.soda-Field_Radios {
    display: flex;
    align-items: center;
    gap: var(--gap-l);
    padding-top: var(--gap-xs);
}

.soda-RadioItem {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    font-weight: var(--font-weight-regular);
}

.soda-RadioItem .material-icons-round {
    font-size: var(--size-xs);
    color: var(--color-text-tertiary);
}

.soda-RadioItem .material-icons-round.checked {
    color: var(--color-brand-base);
}

.soda-TextArea {
    flex: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-xxs);
    align-self: stretch;
    background: var(--color-background-level-1);
}

.soda-TextArea_Input,
.soda-TextArea_Input-placeholder,
.soda-Comment_TextAreaInput,
.soda-Comment_TextAreaInput-placeholder {
    min-height: 128px;
    height: 100%;
    align-items: flex-start;
    padding-right: var(--gap-xs);
    border-radius: var(--radius-s);
}

.soda-FileUpload {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-ms);
}

.soda-FileUpload_DragArea {
    display: flex;
    padding: var(--gap-ms);
    align-items: flex-start;
    gap: var(--gap-s);
    align-self: stretch;
    border-radius: var(--radius-m);
    border: 1px dashed var(--color-border-base);
    background: var(--color-brand-subtle);
}

.soda-DragArea_TextTitle {
    font-size: 12px;
}
.soda-DragArea_TextSubTitle {
    font-size: 10px;
    color: var(--color-text-tertiary);
}

.soda-FileUpload_DragArea .material-icons-round {
    font-size: var(--size-m);
    color: var(--color-text-secondary);
}

.soda-AttachedFiles {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
}

.soda-AttachedFiles .material-icons-round {
    font-size: var(--size-xs);
    color: var(--color-text-tertiary);
}

.soda-AttachedFiles_Heading {
    padding-left: var(--gap-xs);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.soda-AttachedFile,
.soda-AttachedFile-selected {
    display: flex;
    align-self: stretch;
    align-items: center;
    padding: var(--gap-xxs) var(--gap-xs);
    gap: var(--gap-s);
    border-radius: var(--radius-s);
    background: var(--color-background-level-1);
    margin-top: var(--gap-xs);
    position: relative;
}

.soda-AttachedFile-selected {
    background: var(--color-brand-subtle);
    position: relative;
}

.soda-AttachedFile-selected .material-icons-round {
    color: var(--color-brand-base);
}

.soda-AttachedFile_Content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: var(--gap-xxs);
}

.soda-AttachedFile_Info {
    display: flex;
    gap: var(--gap-xs);
    align-items: center;
}

.soda-AttachedFile_Name {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-primary);
}

.soda-AttachedFile_SubText {
    font-size: 12px;
    color: var(--color-text-tertiary);
}

.soda-AttachedFile_Progress {
    width: 100%;
}

.soda-AttachedFile_ProgressBar {
    height: 4px;
    width: 100%;
    background: var(--color-background-level-3);
    border-radius: var(--radius-xs);
    overflow: hidden;
}

.soda-AttachedFile_ProgressFill {
    height: 100%;
    width: 70%;
    background: var(--color-brand-base);
    border-radius: var(--radius-xs);
}


.soda-AttachedFile_Close.material-icons-round {
    font-size: var(--size-xs);
    color: var(--color-text-tertiary);
    position: absolute;
    right: calc(var(--gap-m) * -1);
    top: 50%;
    transform: translateY(-50%);
}

.soda-AttachedFile_Pointer {
    position: absolute;
    width: var(--size-s);
    height: var(--size-s);
    left: 60%;
    top: 50%;
    transform: translateY(-20%);
    z-index: 2;
    pointer-events: none;
}

/* Calendar */
.soda-Calendar {
    display: flex;
    align-items: flex-start;
    align-self: stretch;
    border-radius: var(--radius-m);
    margin-top: var(--gap-s);
}

.soda-Calendar_Menu {
    flex: 1;
    display: flex;
    padding: var(--gap-xs) 0;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    background: var(--color-background-level-1);
}

.soda-Calendar_MenuItem, 
.soda-Calendar_MenuItem-active {
    display: flex;
    padding: var(--gap-xs) var(--gap-s);
    align-items: center;
    gap: var(--gap-xs);
    align-self: stretch;
    color: var(--color-text-secondary);
}

.soda-Calendar_MenuItem-active {
    background: var(--color-brand-subtle);
    color: var(--color-brand-base);
}

.soda-Calendar_Menu, 
.soda-Calendar_DatePicker:not(:last-child) {
    border-right: 1px solid var(--color-border-base);
}

.soda-Calendar_DatePicker {
    flex: 2;
    display: flex;
    padding: var(--gap-s);
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    gap: var(--gap-s);
    background: var(--color-background-level-1);
}

.soda-Calendar_Header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    align-self: stretch;
}

.soda-Calendar_HeaderNavButton {
    display: flex;
    padding: var(--gap-xs);
    justify-content: center;
    align-items: center;
    gap: var(--gap-xs);
    border-radius: var(--radius-s);
    background: var(--color-background-level-1);
    border: 1px solid var(--color-border-base);
}

.soda-Calendar_HeaderNavButton .material-icons-round {
    font-size: 16px;
    color: var(--color-text-secondary);
}

.soda-Calendar_Title {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-xs);
    color: var(--color-text-primary);
    font-size: 16px;
    line-height: var(--line-height-normal);
    font-weight: var(--font-weight-semibold);
}

.soda-Calendar_Days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    align-items: center;
    align-self: stretch;
}

.soda-Calendar_Day,
.soda-Calendar_Day-header,
.soda-Calendar_Day-past,
.soda-Calendar_Day-today,
.soda-Calendar_Day-last {
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    color: var(--color-text-primary);
    font-size: 12px;
    line-height: var(--line-height-normal);
    font-weight: var(--font-weight-semibold);
    text-align: center;
    position: relative;
    height: var(--size-m);
}

.soda-Calendar_Day-header {
    font-weight: var(--font-weight-regular);
    color: var(--color-text-secondary);
}

.soda-Calendar_Day-past {
    font-weight: var(--font-weight-regular);
    color: var(--color-text-tertiary);
}
.soda-Calendar_Day-past {
    font-weight: var(--font-weight-regular);
}

.soda-Calendar_Day-today {
    border-radius: var(--radius-l);
    color: var(--color-brand-base);
    background: var(--color-brand-subtle);
}
.soda-Calendar_Day.event::before,
.soda-Calendar_Day-past.event::before,
.soda-Calendar_Day-today.event::before,
.soda-Calendar_Day-last.event::before {
    content: "";
    display: block;
    width: 4px;
    height: 4px;
    border-radius: var(--radius-100);
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-brand-base);
}

.soda-Body .soda-Calendar_EmptyState {
    display: flex;
    padding: var(--gap-s);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--gap-s);
    align-self: stretch;
    background-image: url(../../soda_template/asset/table-empty.svg);
    background-size: 70% auto;
    background-repeat: no-repeat;
    background-position: center;
    height: 100%;
}

.soda-Body .soda-Calendar_EmptyStateText {
    color: var(--color-text-primary);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    font-weight: var(--font-weight-regular);
}

/* Skeleton Loading Styles */
.soda-Skeleton {
    /* animation: skeleton-pulse 1.5s ease-in-out infinite alternate; */
    height: calc(100vh - var(--gap-m)*2);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    background: none;
}

/* Компенсация для админ-бара WordPress */
body.admin-bar .soda-Skeleton {
    height: calc(100vh - 32px - var(--gap-m)*2);
}

/* Для мобильного админ-бара */
@media screen and (max-width: 782px) {
    body.admin-bar .soda-Skeleton {
        height: calc(100vh - 46px - var(--gap-m)*2);
    }
}

.soda-Skeleton .soda-Header {
    flex-shrink: 0; /* Хедер не сжимается */
}

.soda-Skeleton .soda-Wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0; /* Позволяет flex-элементу сжиматься */
}

.soda-Skeleton .soda-Content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0; /* Позволяет flex-элементу сжиматься */
    padding-top: var(--gap-xl);
}

.soda-Skeleton .soda-Block {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0; /* Позволяет flex-элементу сжиматься */
}

.soda-Skeleton .soda-Block_Content {
    flex: 1;
    min-height: 0; /* Позволяет flex-элементу сжиматься */
}

.soda-Skeleton .soda-Footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--gap-xs) var(--gap-xl) 0;
    border-top: 1px solid var(--color-border-base);
    flex-shrink: 0; /* Футер не сжимается */
    margin-top: auto; /* Прижимает футер вниз */
    position: relative;
    z-index: 1;
}

/* @keyframes skeleton-pulse {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0.4;
    }
} */

.soda-Skeleton_Element {
    background: var(--color-background-disabled);
    border-radius: var(--radius-s);
    /* animation: skeleton-shimmer 1.5s ease-in-out infinite alternate; */
}

/* @keyframes skeleton-shimmer {
    0% {
        background-color: var(--color-neutral-200);
    }
    100% {
        background-color: var(--color-neutral-300);
    }
} */

/* Header Skeleton */
.soda-Skeleton .soda-Header_Top {
    display: flex;
    align-items: center;
    gap: var(--gap-s);
    padding: var(--gap-xs) var(--gap-xl);
}

.soda-Skeleton_LogoWrapper {
    flex: 1;
    max-width: 200px;
}

.soda-Skeleton_Logo {
    height: var(--size-l);
    width: 100%;
}

.soda-Skeleton_SearchWrapper {
    flex: 2;
    max-width: 614px;
}

.soda-Skeleton_Search {
    height: var(--size-l);
    width: 100%;
}

.soda-Skeleton_FilterWrapper {
    flex: 0 0 auto;
}

.soda-Skeleton_Filter {
    height: var(--size-l);
    width: 120px;
}

/* Menu Skeleton */
.soda-Skeleton_MenuItems {
    display: flex;
    align-items: center;
    gap: var(--gap-s);
    padding: 0 var(--gap-xl);
    height: 56px;
}

.soda-Skeleton_MenuItem {
    height: var(--size-xs);
    width: 80px;
}

.soda-Skeleton_MenuItem:first-child {
    width: 100px;
}

/* Page Header Skeleton */
.soda-Skeleton .soda-PageHeader_Row {
    display: flex;
    align-items: flex-end;
    gap: var(--gap-s);
    margin-bottom: var(--gap-xl);
}

.soda-Skeleton .soda-PageHeader_Left {
    display: flex;
    align-items: flex-end;
    gap: var(--gap-s);
    flex: 1;
}

.soda-Skeleton_Title {
    height: var(--size-m);
    width: 400px;
}

.soda-Skeleton_Badges {
    display: flex;
    gap: var(--gap-xs);
}

.soda-Skeleton_Badge {
    height: var(--size-m);
    width: 60px;
    border-radius: var(--radius-xs);
}

.soda-Skeleton_Tabs {
    display: flex;
    gap: var(--gap-l);
    border-bottom: 1px solid var(--color-border-base);
    padding-bottom: var(--gap-xxs);
}

.soda-Skeleton_Tab {
    height: var(--size-l);
    width: 180px;
}
.soda-Skeleton_Tab:first-child {
    width: 60px;
}
.soda-Skeleton_Tab:last-child {
    width: 160px;
}

/* Block Skeleton */
.soda-Skeleton .soda-Block_Heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.soda-Skeleton_BlockTitle {
    height: var(--size-l);
    width: 200px;
}

.soda-Skeleton_BlockActions {
    display: flex;
    gap: var(--gap-s);
}

.soda-Skeleton_Action {
    height: var(--size-l);
    width: var(--size-l);
}

.soda-Skeleton_Button {
    height: var(--size-l);
    width: 120px;
}

.soda-Skeleton_Content {
    height: 240px;
    width: 100%;
}

/* Footer Skeleton */
.soda-Skeleton .soda-Footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--gap-xs) var(--gap-xl);
    border-top: 1px solid var(--color-border-base);
    flex-shrink: 0; /* Футер не сжимается */
    margin-top: auto; /* Прижимает футер вниз */
    position: relative;
    z-index: 1;
}

.soda-Skeleton_FooterLeft {
    flex: 1;
}

.soda-Skeleton_FooterItem {
    height: var(--size-s);
    width: 150px;
}

.soda-Skeleton_FooterRight {
    flex: 0 0 auto;
}

.soda-Skeleton_FooterAction {
    height: var(--size-s);
    width: 100px;
}

.soda-Skeleton .soda-PageHeader,
.soda-Skeleton .soda-Block {
    flex: none;
}

/* Spinner Styles */
.soda-Spinner-Content {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 240px;
    background: var(--color-background-disabled);
    width: 100%;
    border-radius: var(--radius-s);
}

.soda-Spinner-Wrapper {
    position: relative;
}

.soda-Spinner-Container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-m);
    padding: var(--size-l);
}

.soda-Spinner-Text {
    color: var(--color-text-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-normal);
}

.soda-Spinner {
    width: var(--size-xl);
    height: var(--size-xl);
    animation: spinner-rotate 1s linear infinite;
}

.soda-Spinner_Circle {
    width: 100%;
    height: 100%;
}

.soda-Spinner_Background {
    stroke: var(--color-primary-100);
}

.soda-Spinner_Progress {
    stroke: var(--color-primary-700);
    transform-origin: center;
    animation: spinner-dash 1.5s ease-in-out infinite;
}

@keyframes spinner-rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes spinner-dash {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -35px;
    }
    100% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -124px;
    }
}

.soda-Skeleton_Tooltip {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    position: relative;
}

.soda-Skeleton_Tooltip .material-icons-round {
    font-size: var(--size-m);
    color: var(--color-primary-700);
}

/* Tooltip контент */
.soda-Tooltip-Content {
    position: absolute !important;
    bottom: calc(100% + 8px);
    right: 0;
    transform: translateX(12px);
    background: var(--color-text-primary);
    color: var(--color-text-inverted);
    padding: var(--gap-xs);
    border-radius: var(--radius-s);
    font-size: 12px;
    white-space: nowrap;
    z-index: 1010;
    min-width: 200px;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.65);
}

.soda-Tooltip-Content::after {
    content: '';
    position: absolute;
    top: 100%;
    right: 10%;
    transform: translateX(-50%);
    border-width: 4px;
    border-style: solid;
    border-color: var(--color-text-primary) transparent transparent transparent;
}
.soda-Tooltip-Content.interactive:before {
    bottom: -48px;
}
.soda-Tooltip-Content.interactive .Highlight_Selected {
    bottom: -46px;
}

.soda-Tooltip-Header {
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--gap-xs);
}

.soda-Tooltip-Values {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-xs);
    margin-bottom: var(--gap-xs);
}

.soda-Tooltip-Value {
    font-weight: var(--font-weight-regular);
    line-height: 1.33;
    opacity: 0.9;
}

.soda-Tooltip-Footer {
    padding-top: var(--gap-xxs);
    border-top: 1px solid var(--color-border-inverted);
}

.soda-Tooltip-Subtext {
    font-size: 12px;
    opacity: 0.8;
}

.soda-Pointer {
    position: absolute;
    width: var(--size-s);
    height: var(--size-s);
    left: 60%;
    top: 50%;
    transform: translateY(-20%);
    z-index: 2;
    pointer-events: none;
}

/* Стили для выпадающего меню в skeleton режиме */
.soda-Skeleton_Dropdown {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
}

.soda-Dropdown-Wrapper {
    position: absolute !important;
    top: calc(100% + 8px);
    left: 0;
    z-index: 1000;
    display: flex;
}

/* Стили для модального окна */
.soda-Modal-Overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--gap-m);
}

.soda-Modal {
    background: var(--color-background-level-1);
    border-radius: var(--radius-m);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    max-width: 600px;
    width: 100%;
    max-height: calc(100vh - var(--gap-xxl) * 4);
    display: flex;
    flex-direction: column;
}

.soda-Modal_Header {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    padding: var(--gap-ms) var(--gap-l);
    border-bottom: 1px solid var(--color-border-base);
    gap: var(--gap-xxs);
}

.soda-Modal_Title {
    margin: 0;
    font-size: 18px;
    line-height: var(--line-height-tight);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    display: inline-flex;
    gap: var(--gap-xxs);
}

.soda-Modal_SubTitle {
    color: var(--color-text-secondary);
}

.soda-Modal_Title .material-icons-round {
    font-size: 20px;
    color: var(--color-brand-base);
}

.soda-Modal_Close {
    background: none;
    border: none;
    border-radius: var(--radius-s);
    color: var(--color-text-tertiary);
    transition: all 0.2s ease;
    height: var(--size-xs);
    position: absolute;
    top: var(--size-xxs);
    right: var(--size-xxs);
}

.soda-Modal_Close .material-icons-round {
    font-size: 20px;
}

.soda-Modal_Content {
    flex: 1;
    min-height: 0;
    overflow: scroll;
}

.soda-Modal_ScrollContent {
    padding: var(--gap-l);
    height: 100%;
    overflow-y: auto;
    /* Минимальная высота для демонстрации скролла */
    min-height: 400px;
}

.soda-Modal_ContentGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap-s);
}

.soda-Modal_ContentGridItem {
    height: var(--size-l);
    border-radius: var(--radius-m);
    background-color: var(--color-background-disabled);
}
.soda-Modal_ContentGridItem:nth-child(10),
.soda-Modal_ContentGridItem:nth-child(12) {
    grid-column: span 2;
}

.soda-Modal_Footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-s);
    padding: var(--gap-l);
    border-top: 1px solid var(--color-border-base);
    flex-shrink: 0;
}

.soda-Modal_FooterActions {
    display: flex;
    align-items: center;
    gap: var(--gap-xxs);
}
.soda-Modal_FooterActions div:first-child {
    padding-left: 0;
}

.soda-Modal_FooterButtons {
    display: flex;
    align-items: center;
    gap: var(--gap-xxs);
}

/* Затемнение skeleton при активном модальном окне */
.soda-Skeleton.modal-active {
    position: relative;
    overflow: hidden;
}

.soda-Skeleton.modal-active > *:not(.soda-Modal-Overlay) {
    filter: brightness(0.3);
    pointer-events: none;
}

.soda-Skeleton.modal-active .soda-Modal-Overlay {
    filter: none;
    pointer-events: auto;
}

/* Стили для слайдера */
.soda-Slider-Overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    padding: 0;
}

.soda-Slider {
    background: var(--color-background-level-1);
    box-shadow: -4px 0 32px rgba(0, 0, 0, 0.3);
    width: 75%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.soda-Slider .Highlight_Selected {
    bottom: var(--gap-xxs);
    right: var(--gap-xxs);
    transform: translateY(0);
    border-top-left-radius: var(--radius-s);
    border-bottom-left-radius: 0;
}

.soda-SliderButtons {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: var(--gap-s);
    align-items: flex-end;
    left: 0;
    top: var(--size-l);
    transform: translateX(-100%);
}

.soda-SliderButton-primary, 
.soda-SliderButton-secondary {
    display: flex;
    height: 40px;
    padding: 0px var(--gap-s) 0px var(--gap-ms);
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 50px 0px 0px 50px;
    color: var(--color-text-primary);
    background-color: var(--color-background-level-2);
    font-size: 12px;
}
.soda-SliderButton-primary {
    color: var(--color-text-inverted);
    background-color: var(--color-brand-base);
}

.soda-SliderButton-primary .material-icons-round, 
.soda-SliderButton-secondary .material-icons-round {
    font-size: var(--size-xxs);
    color: inherit;
}

.soda-Slider_Header {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    padding: var(--gap-ms) var(--gap-l);
    border-bottom: 1px solid var(--color-border-base);
    gap: var(--gap-xxs);
    flex-shrink: 0;
}

.soda-Slider_Title {
    margin: 0;
    font-size: 18px;
    line-height: var(--line-height-tight);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    display: inline-flex;
    gap: var(--gap-xxs);
}

.soda-Slider_SubTitle {
    color: var(--color-text-secondary);
}

.soda-Slider_Title .material-icons-round {
    font-size: 20px;
    color: var(--color-brand-base);
}

.soda-Slider_Close {
    background: none;
    border: none;
    border-radius: var(--radius-s);
    color: var(--color-text-tertiary);
    transition: all 0.2s ease;
    height: var(--size-xs);
    position: absolute;
    top: var(--size-xxs);
    right: var(--size-xxs);
    cursor: pointer;
}

.soda-Slider_Close .material-icons-round {
    font-size: 20px;
}

.soda-Slider_Content {
    min-height: 0;
    overflow: hidden;
}

.soda-Slider_ScrollContent {
    padding: var(--gap-l);
    padding-bottom: 0;
    height: 100%;
    overflow-y: auto;
}

/* Стили для блоков слайдера */
.soda-Slider_Block {
    background: var(--color-background-level-1);
    border: 1px solid var(--color-border-base);
    border-radius: var(--radius-m);
    padding: var(--gap-l);
    margin-bottom: var(--gap-ms);
}

.soda-Slider_BlockHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--gap-l);
}

.soda-Slider_BlockTitle {
    background: var(--color-background-disabled);
    border-radius: var(--radius-m);
    height: var(--size-l);
    width: 50%;
}

.soda-Slider_BlockButton {
    background: var(--color-background-disabled);
    border-radius: var(--radius-m);
    height: var(--size-l);
    width: 15%;
}

.soda-Slider_BlockContent {
    display: flex;
    flex-direction: column;
    gap: var(--gap-s);
}

.soda-Slider_Row {
    display: flex;
    align-items: center;
    gap: var(--gap-s);
}

.soda-Slider_Field {
    background: var(--color-background-disabled);
    border-radius: var(--radius-m);
    height: var(--size-l);
    flex: 1;
}

.soda-Slider_Field--label {
    width: 75%;
    flex: none;
}

.soda-Slider_Footer {
    display: flex;
    align-items: center;
    justify-content: stretch;
    gap: var(--gap-s);
    padding: var(--gap-l);
    padding-top: 0;
}

.soda-Slider_FooterButtons {
    display: flex;
    align-items: center;
    gap: var(--gap-s);
}

.soda-Slider_FooterButtons .soda-Button-primary,
.soda-Slider_FooterButtons .soda-Button-secondary {
    flex: 1;
    justify-content: center;
}

/* Затемнение skeleton при активном слайдере */
.soda-Skeleton.slider-active {
    position: relative;
    overflow: hidden;
}

.soda-Skeleton.slider-active > *:not(.soda-Slider-Overlay) {
    filter: brightness(0.3);
    pointer-events: none;
}

.soda-Skeleton.slider-active .soda-Slider-Overlay {
    filter: none;
    pointer-events: auto;
}

/* Стили для рамки слайдера */
.soda-Slider-Overlay .interactive.complex::before {
    z-index: 2100;
    left: -112px;
    bottom: var(--gap-xxs);
    top: var(--gap-xxs);
    right: var(--gap-xxs);
}

.soda-Slider-Overlay .interactive.selected::before {
    opacity: 1;
    visibility: visible;
    z-index: 2100;
}

.soda-Dropdown-Menu {
    position: relative;
    background: var(--color-background-level-1);
    border: 1px solid var(--color-border-base);
    border-radius: var(--radius-s);
    box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.08);
    padding: var(--gap-xs) 0;
    min-width: 300px;
}

.soda-Dropdown-Item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--gap-xs) var(--gap-ms);
    cursor: default;
}

.soda-Dropdown-Item-active {
    background-color: var(--color-background-level-2);
}

.soda-Dropdown-Item-active .soda-Dropdown-Text {
    color: var(--color-primary-700);
}

.soda-Dropdown-Text {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-primary);
    line-height: 1.43;
}

.soda-Dropdown-Arrow {
    font-size: 16px;
    color: var(--color-text-primary);
}

.soda-Dropdown-Item-active .soda-Dropdown-Arrow {
    color: var(--color-text-primary);
}

/* Стили для подменю */
.soda-Dropdown-SubMenu {
    position: relative;
    align-self: flex-start;
    top: 40px;
    left: -12px;
    margin-right: -12px;
    background: var(--color-background-level-1);
    border: 1px solid var(--color-border-base);
    border-radius: var(--radius-s);
    box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.08);
    padding: var(--gap-xs) 0;
    min-width: 270px;
    z-index: 1001;
}