/* Include the CSS provided above */
:root {
    --md-color-primary: #6200EE;
    --md-color-primary-variant: #3700B3;
    --md-color-secondary: #03DAC6;
    --md-color-secondary-variant: #018786;
    --md-color-background: #F5F5F5; /* Light grey background */
    --md-color-surface: #FFFFFF; /* White surface for cards/containers */
    --md-color-error: #B00020;
    --md-color-on-primary: #FFFFFF; /* White text on primary */
    --md-color-on-secondary: #000000; /* Black text on secondary */
    --md-color-on-background: #000000; /* Black text on background */
    --md-color-on-surface: #000000; /* Black text on surface */
    --md-color-on-error: #FFFFFF; /* White text on error */
    --md-spacing-unit: 8px; /* Base spacing unit */
    --md-elevation-1: 0px 2px 1px -1px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 1px 3px 0px rgba(0,0,0,0.12);
    --md-elevation-2: 0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12);
    --md-elevation-4: 0px 2px 4px -1px rgba(0,0,0,0.2), 0px 4px 5px 0px rgba(0,0,0,0.14), 0px 1px 10px 0px rgba(0,0,0,0.12);
    --md-elevation-24: 0px 11px 15px -7px rgba(0,0,0,0.2), 0px 24px 38px 3px rgba(0,0,0,0.14), 0px 9px 46px 8px rgba(0,0,0,0.12); /* Elevation for modals */
}

#ajax-status-badge {
    position: fixed; /* Фиксированное положение вверху экрана */
    top: 10px;       /* Небольшой отступ сверху */
    left: 50%;       /* Центрирование по горизонтали */
    transform: translateX(-50%);
    padding: 8px 16px;
    border-radius: 16px; /* Закругленные края (pill shape) */
    font-weight: bold;
    z-index: 1000;   /* Поверх других элементов */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    display: none;   /* Скрыт по умолчанию */
    transition: background-color 0.3s ease, color 0.3s ease, opacity 0.5s ease;
    opacity: 0;      /* Начальная прозрачность для плавного появления */
    font-size: 0.9rem;
    text-align: center;
    min-width: 120px; /* Минимальная ширина */
}

/* Класс для отображения бэйджа */
#ajax-status-badge.visible {
    display: inline-block; /* Отображаем */
    opacity: 1;          /* Делаем видимым */
}

/* Стили для состояний */
#ajax-status-badge.saving {
    background-color: white;
    color: black;
    border: 1px solid #ccc;
}

#ajax-status-badge.success {
    background-color: #4CAF50; /* Зеленый */
    color: white;
    border: none;
}

#ajax-status-badge.error {
    background-color: #f44336; /* Красный */
    color: white;
    border: none;
}

body {
    font-family: 'Roboto', sans-serif; /* Use Roboto or a similar modern font */
    background-color: var(--md-color-background);
    color: var(--md-color-on-background);
    margin: 0;
    padding: var(--md-spacing-unit) * 2;
}

h2 {
    color: var(--md-color-on-background);
    margin-bottom: var(--md-spacing-unit) * 3;
    font-weight: 500;
}

/* Material Design Card/Surface Styling */
.md-surface {
    background-color: var(--md-color-surface);
    border-radius: 4px; /* Subtle border radius */
    box-shadow: var(--md-elevation-1); /* Default elevation */
    padding: var(--md-spacing-unit) * 2;
    margin-bottom: var(--md-spacing-unit) * 2;
}

/* Filter Section */
.workgraph-row.filter {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap */
    gap: var(--md-spacing-unit) * 2; /* Spacing between filter items */
    align-items: flex-end; /* Align items to the bottom */
}

.k-filter-item {
    display: flex;
    flex-direction: column; /* Stack label and input */
    min-width: 200px; /* Minimum width for filter items */
    flex-grow: 1; /* Allow items to grow */
}

.k-filter-item label {
    font-weight: 500; /* Medium weight for labels */
    color: rgba(0, 0, 0, 0.6); /* Subdued label color */
    margin-bottom: var(--md-spacing-unit);
    font-size: 0.875rem; /* Smaller font size for labels */
}

/* Style Kendo inputs to look more Material-like (basic) */
/* Note: Full Material styling for Kendo requires Kendo themes or complex overrides */
.k-multiselect .k-input-inner,
.k-numerictextbox .k-input-inner,
.k-checkbox .k-checkbox-input {
    /* Basic input styling */
    border-color: rgba(0, 0, 0, 0.38);
    border-radius: 4px;
    padding: var(--md-spacing-unit);
    box-sizing: border-box;
}
.k-multiselect, .k-numerictextbox {
    border: 1px solid rgba(0, 0, 0, 0.38);
    border-radius: 4px;
}
.k-multiselect.k-focus, .k-numerictextbox.k-focus {
    border-color: var(--md-color-primary);
    box-shadow: inset 0 0 0 1px var(--md-color-primary);
}


.k-button {
    /* Style Kendo button as Material Contained Button */
    background-color: var(--md-color-primary);
    color: var(--md-color-on-primary);
    border: none;
    border-radius: 4px;
    padding: var(--md-spacing-unit) 16px;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 0.0892857143em;
    box-shadow: var(--md-elevation-1);
    transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    align-self: flex-end; /* Align button to the bottom */
}

.k-button:hover {
    box-shadow: var(--md-elevation-2);
}

.k-button:active {
    box-shadow: var(--md-elevation-4);
}


/* Graph Header and Rows */
.workgraph-row.header {
    position: sticky;
    top: 0px;
    z-index: 10; /* Ensure header is above content */
    display: flex;
    background-color: var(--md-color-surface);
    box-shadow: var(--md-elevation-2);
    border-radius: 4px;
    padding: var(--md-spacing-unit);
    margin-bottom: var(--md-spacing-unit);
    align-items: center; /* Vertically align items */
}

.workgraph-row {
    display: flex;
    background-color: var(--md-color-surface);
    box-shadow: var(--md-elevation-1);
    border-radius: 4px;
    padding: var(--md-spacing-unit);
    margin-bottom: var(--md-spacing-unit);
    align-items: flex-start; /* Align items to the top */
}


.fio-row.sticky-left {
    position: sticky;
    left: 0px;
    background-color: var(--md-color-surface); /* Match container background */
    z-index: 5; /* Ensure sticky column is above graph */
    box-shadow: 2px 0 4px -2px rgba(0,0,0,0.1); /* Subtle shadow on the right */
}

.fio-row-status {
    font-weight: 500;
    font-size: 0.75rem; /* Even smaller font size */
    color: rgba(0, 0, 0, 0.6); /* Subdued color */
    margin-top: var(--md-spacing-unit) / 2;
}

/* Calendar row container */
.calendar-row {
    display: flex;
    flex-direction: column; /* Stack time lines vertically */
    flex-grow: 1; /* Allow calendar rows to take available space */
    overflow-x: auto; /* Add horizontal scroll if content overflows */
}

/* Calendar header row within the calendar-row container */
.calendar-row.header {
    flex-direction: row; /* Ensure horizontal layout */
    display: flex; /* Explicitly set display flex */
    flex-grow: 1; /* Allow calendar header to take available space */
    overflow-x: hidden; /* Hide overflow if dates exceed width */
    border-bottom: 1px solid rgba(0, 0, 0, 0.12); /* Add a separator below the dates */
    margin-bottom: var(--md-spacing-unit); /* Space below the date header */
    padding-bottom: var(--md-spacing-unit) / 2; /* Add padding below dates */
}




.calendar-row-cell.today {
    background-color: rgba(3, 218, 198, 0.2); /* Slightly darker background */
    font-weight: 700; /* Keep bold text */
    color: var(--md-color-secondary-variant); /* Keep darker text color */
    border: 1px solid var(--md-color-secondary); /* Add a border */
    box-sizing: border-box; /* Ensure border doesn't add to size */
}

.calendar-row-svg-cell.today {
    fill: rgba(3, 218, 198, 0.2); /* Match the slightly darker background */
    stroke: var(--md-color-secondary); /* Add a stroke matching the border color */
    stroke-width: 2; /* Make the stroke more visible */
}

.calendar-row-cell.weekend {
    background-color: rgba(98, 0, 238, 0.08); /* Light primary color */
}

.calendar-row-group-time-line {
    display: flex;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12); /* Subtle border between rows */
    align-items: center; /* Vertically align items */
    padding: var(--md-spacing-unit) / 2 0; /* Add vertical padding */
}

.calendar-row-group-time-line:last-child {
    border-bottom: none; /* No border on the last item */
}

.calendar-row-time-line {
    flex-grow: 1; /* Allow SVG to take available space */

}

/* SVG Graph Styling */
.calendar-row-svg-cell {
    fill: rgba(0, 0, 0, 0.04); /* Very light grey fill */
    stroke-width: 1;
    stroke: rgba(0, 0, 0, 0.12); /* Subtle stroke */
}



.calendar-row-svg-cell.weekend {
    fill: rgba(98, 0, 238, 0.08); /* Light primary color */
}

.calendar-row-svg-cell.add-alert {
    fill: rgba(176, 0, 32, 0.2); /* Light error color */
}

.calendar-row-svg-task.planned {
    fill: var(--md-color-primary); /* Primary color */
    opacity: 0.8; /* Slightly transparent */
}

.calendar-row-svg-task.plannedbymanager {
    fill: #FFC107; /* Amber color */
    opacity: 0.8;
}

.calendar-row-svg-task.logged {
    fill: var(--md-color-secondary); /* Secondary color */
    opacity: 0.8;
}

.calendar-row-cell-task {
    font-weight: 500;
    font-size: 0.75rem; /* Smaller font size */
    color: var(--md-color-on-surface); /* Text color on surface */
    text-align: center;
    line-height: 1.2; /* Adjust line height */
}

/* Alert Styles */
.add-alert-task {
    border: 2px solid var(--md-color-error); /* Error color border */
    padding: var(--md-spacing-unit) / 2; /* Add padding to make border visible */
    box-sizing: border-box; /* Include border in element size */
    border-radius: 4px; /* Match container border radius */
}

/* Legend and Changelog */
.legend-color-row {
    display: flex;
    align-items: center;
    margin-bottom: var(--md-spacing-unit);
    font-size: 0.875rem;
}

.legend-color {
    width: 20px;
    height: 20px;
    margin-right: var(--md-spacing-unit);
    border-radius: 2px; /* Subtle border radius */
}

.weekend-color {
    background-color: rgba(98, 0, 238, 0.08);
}

.planned-color {
    background-color: var(--md-color-primary);
    opacity: 0.8;
}

.worked-color {
    background-color: var(--md-color-secondary);
    opacity: 0.8;
}

.planned-manager-color {
    background-color: #FFC107;
    opacity: 0.8;
}

.changelog ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.changelog li {
    margin-bottom: var(--md-spacing-unit) / 2;
    font-size: 0.875rem;
}

.changelog div:first-child {
    font-weight: 500;
    margin-bottom: var(--md-spacing-unit);
}

/* Kendo Window (Modal) - Basic styling, full Material Dialog requires Kendo theme */
.k-window {
    border-radius: 8px; /* More pronounced border radius */
    box-shadow: var(--md-elevation-24); /* High elevation for modals */
}

.k-window-titlebar {
    background-color: var(--md-color-primary);
    color: var(--md-color-on-primary);
    font-weight: 500;
    padding: var(--md-spacing-unit) * 2;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.k-window-content {
    padding: var(--md-spacing-unit) * 2;
}

/* Link styling */
a {
    color: var(--md-color-primary);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.hidden-row{
    display: none;
}