:root {
    --primary-color: #4a8c9a;
    --primary-dark: #3a7c8a;
    --primary-light: #f0f6f7;
    --secondary-color: #5cb85c; /* Green */
    --secondary-dark: #4a9d4a; /* Darker Green */
    --danger-color: #d9534f; /* Red */
    --danger-dark: #c9443f; /* Darker Red */
    --warning-color: #f0ad4e; /* Orange */
    --warning-dark: #d89438; /* Darker Orange */
    --text-dark: #333333;
    --text-light: #6c757d;
    --bg-main: #f8f9fa;
    --bg-card: #ffffff;
    --border-color: #dee2e6;
    --white: #ffffff;
    --white-opacity-90: rgba(255, 255, 255, 0.9);
    --white-opacity-80: rgba(255, 255, 255, 0.8);
    --black-opacity-05: rgba(0, 0, 0, 0.05);
    --black-opacity-08: rgba(0, 0, 0, 0.08);
    --black-opacity-12: rgba(0, 0, 0, 0.12);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: 'Inter', 'Open Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Added Inter as primary */
    background-color: var(--bg-main); color: var(--text-dark); display: flex; height: 100vh; overflow: hidden;
    position: relative;
    padding-top: 0; /* Додано для мобільної версії */
}
/* ▼▼▼ СТИЛІ ДЛЯ ГЛОБАЛЬНОГО ЗАВАНТАЖУВАЧА ▼▼▼ */
#global-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-main);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    transition: opacity 0.5s ease-out;
}
.loader-content {
    text-align: center;
}
.loader-logo {
    width: 250px;
    height: 100px;
    object-fit: contain;
    animation: logo-pulse 1.5s ease-in-out infinite;
}
.loader-content p {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-light);
    margin-top: 16px;
}

/* Ховаємо завантажувач, коли body отримує клас .loaded */
body.loaded #global-loader {
    opacity: 0;
    pointer-events: none;
}
/* ▲▲▲ КІНЕЦЬ СТИЛІВ ЗАВАНТАЖУВАЧА ▲▲▲ */

.sidebar {
    width: 280px; background-color: var(--bg-card); border-right: 1px solid var(--border-color); padding: 24px 16px;
    display: flex; flex-direction: column; transition: transform 0.3s ease-in-out; position: relative; z-index: 1000;
}
.sidebar-header {
    display: flex;
    justify-content: center;
    padding: 0 8px 24px 8px;
    border-bottom: 1px solid var(--border-color); margin-bottom: 16px; /* Reduced margin-bottom */
}
.sidebar-header .logo-img {
    width: 250px;
    height: 100px;
    object-fit: contain;
}

/* === Покращений блок інформації про користувача === */
.sidebar-user-info {
    padding: 16px 8px; /* Додаємо відступи */
    margin-bottom: 16px; /* Відступ знизу */
    border-bottom: 1px solid var(--border-color); /* Роздільник */
    text-align: left; /* Вирівнювання ліворуч */
}
.sidebar-user-info .user-display-name {
    font-size: 15px; /* Трохи більший шрифт */
    font-weight: 600; /* Напівжирний */
    color: var(--text-dark); /* Темніший колір */
    margin-bottom: 4px; /* Невеликий відступ між ім'ям та посадою */
    line-height: 1.3;
}
/* === Стилі для посади === */
.sidebar-user-info .user-position {
    font-size: 13px; /* Менший шрифт для посади */
    color: var(--text-light); /* Світліший колір */
    line-height: 1.4;
    margin-top: 4px; /* Відступ від імені */
    position: relative; /* Потрібно для псевдоелемента ::before */
    padding-left: 20px; /* Залишаємо місце для іконки/позначки */
    min-height: 18px; /* Резервуємо висоту, щоб не стрибало при завантаженні */
}
/* Загальний стиль для позначки посади */
.sidebar-user-info .user-position::before {
    content: ''; /* Поки порожньо, будемо визначати в залежності від класу */
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px; /* Розмір іконки/символу */
    line-height: 1;
    width: 14px; /* Ширина контейнера для іконки */
    text-align: center;
    color: var(--text-light); /* Колір за замовчуванням */
}

/* === Специфічні "фішки" для посад === */
/* Класи генеруються в main.js (напр., 'position-kerivnyk-zakladu') */

/* Керівник закладу - Зірка */
.sidebar-user-info.position-kerivnyk-zakladu .user-position::before {
    content: '★';
    color: var(--warning-color); /* Золотий/Помаранчевий */
    font-size: 16px;
}

.sidebar-user-info.position-kerivnyk-zakladu {
    background-color: #fffaf0;
    border-left: 3px solid var(--warning-color);
    margin-left: -16px; margin-right: -16px; padding-left: 13px;
}


/* Медичний директор - Хрестик */
.sidebar-user-info.position-medychnyi-dyrektor .user-position::before {
    content: '✚';
    color: var(--secondary-color); /* Зелений */
    font-weight: bold;
}

/* Керівник ЦБД - Шестерня */
.sidebar-user-info.position-kerivnyk-tsbd .user-position::before {
    content: '⚙️'; /* Emoji шестерні */
    font-size: 13px; /* Трохи менший для emoji */
    color: var(--primary-dark);
}

/* Тех. адміністратор - Ключ */
.sidebar-user-info.position-tekh-administrator .user-position::before {
    content: '🔧'; /* Emoji ключа */
    font-size: 13px;
    color: var(--text-light);
}

/* Заступник Г.Д. - Стрілка вгору */
.sidebar-user-info.position-zastupnyk-gd .user-position::before {
    content: '▲';
    color: var(--primary-color);
    font-size: 12px;
}

/* Звичайний Користувач - Іконка людини */
.sidebar-user-info.position-korystuvach .user-position::before {
    content: '👤'; /* Emoji людини */
    font-size: 12px;
    color: var(--text-light);
}

/* Загальний стиль для посад без спец. позначки - крапка */
.sidebar-user-info:not([class*="position-"]) .user-position::before, /* Якщо клас не додався */
.sidebar-user-info .user-position:not(:empty)::before { /* За замовчуванням, якщо інший стиль не підійшов */
    content: '●';
    color: var(--text-light);
    font-size: 12px;
}
/* === Кінець стилів для посади === */

.sidebar-footer { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border-color); }
.nav-menu {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px; /* Зменшуємо проміжок між основними пунктами */
    flex-grow: 1;
}
.nav-item button {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px; /* Трохи зменшуємо вертикальний padding */
    border-radius: 8px;
    border: none;
    background-color: transparent;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-light);
    cursor: pointer;
    text-align: left;
    transition: background-color 0.2s ease, color 0.2s ease;
    border-left: 4px solid transparent;
}
.nav-item button:hover { background-color: var(--primary-light); color: var(--primary-dark); }
.nav-item button.active {
    background-color: var(--primary-light);
    color: var(--primary-dark);
    border-left: 4px solid var(--primary-color);
}
/* === Покращена індикація активного розділу (іконка) === */
.nav-item button.active svg {
    stroke: var(--primary-dark); /* Приклад для stroke іконок */
}
/* === Кінець покращення індикації === */

.main-content { 
    flex-grow: 1; 
    padding: 32px 40px; 
    overflow-y: auto; 
    padding-top: 32px; /* Додано для мобільної версії */
}
.page { display: none; }
.page.active { display: block; animation: fadeIn 0.4s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.page-header { margin-bottom: 28px; }
.page-header h2 { font-size: 26px; font-weight: 700; margin-bottom: 4px; }
.page-header p { font-size: 16px; color: var(--text-light); }
.card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px; /* Increased */
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 2px 8px var(--black-opacity-08); /* Adjusted */
    transition: transform 0.2s, box-shadow 0.2s;
}
.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px var(--black-opacity-12); /* Adjusted */
}
.controls-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; align-items: flex-end; }
.control-group { display: flex; flex-direction: column; gap: 8px; }
.control-group label { font-weight: 600; font-size: 14px; color: var(--text-dark); }
.control-group input, .control-group select, .control-group textarea, .control-group input[type="file"]::file-selector-button {
    padding: 10px 12px; border: 1px solid var(--border-color); border-radius: 6px; font-size: 14px;
    font-family: 'Open Sans', sans-serif; width: 100%; transition: border-color 0.2s, box-shadow 0.2s;
}
.control-group input:focus, .control-group select:focus, .control-group textarea:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 2px rgba(74, 140, 154, 0.2); }
.date-presets { display: flex; gap: 8px; flex-wrap: wrap; }
.date-presets button {
    flex-grow: 1; padding: 10px; background-color: var(--bg-main); border: 1px solid var(--border-color);
    border-radius: 6px; cursor: pointer; font-weight: 600; color: var(--text-light); transition: all 0.2s ease;
}
.date-presets button:hover { background-color: #e9ecef; border-color: #adb5bd; }
.date-presets button.active { background-color: var(--primary-light); color: var(--primary-dark); border-color: var(--primary-color); }
.execute-button, .import-export-btn {
    padding: 12px 24px; background-color: var(--primary-color); color: white; border: none; border-radius: 6px;
    font-size: 15px; font-weight: 600; /* Increased weight */ cursor: pointer; transition: background-color 0.2s ease, transform 0.2s ease;
    text-decoration: none; display: inline-block; text-align: center;
}
.execute-button:hover, .import-export-btn:hover { background-color: var(--primary-dark); transform: translateY(-1px); }
.execute-button:disabled { background: #9cbec5; cursor: not-allowed; transform: none; }
.results-wrapper { margin-top: 24px; overflow-x: auto;}
.filter-buttons { display: none; margin-bottom: 16px; gap: 10px; flex-wrap: wrap; }
.filter-buttons.visible { display: flex; }
.filter-buttons button { background-color: var(--bg-card); color: var(--text-light); border: 1px solid var(--border-color); padding: 8px 16px; border-radius: 6px; font-weight:600; cursor: pointer; }
.filter-buttons button.active { background-color: var(--primary-color); color: white; border-color: var(--primary-color); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border-color); }
td { color: var(--text-light); }
td:first-child, tbody tr td:nth-child(2) { color: var(--text-dark); font-weight: 600; }
th { background-color: var(--bg-main); font-weight: 700; color: var(--text-dark); text-transform: uppercase; font-size: 12px; }
tbody tr:nth-child(even) { background-color: var(--bg-main); }
tfoot td { font-weight: 700; color: var(--text-dark); background-color: #f8f9fa;}
.error-text, .error-text b { color: var(--danger-color) !important; font-weight: 600; }
.ok-text { color: var(--secondary-color) !important; font-weight: 600; }
.module-block { margin-bottom: 24px; }
.module-block h3 { border-bottom: 1px solid var(--border-color); padding-bottom: 12px; margin-bottom: 16px; font-size: 20px; font-weight: 600; }
.module-block p { margin: 0 0 15px 0; font-size: 15px; color: var(--text-light); }
.stats-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 10px; }
.stats-header h3 { margin: 0; }
.stats-accordion-item { border-bottom: 1px solid var(--border-color); }
.stats-accordion-item:last-child { border-bottom: none; }
.stats-accordion-header {
    width: 100%; background: var(--bg-card); padding: 16px; cursor: pointer; display: flex;
    justify-content: space-between; align-items: center; font-weight: 700; font-size: 16px; border: none; text-align: left;
}
.stats-accordion-header:hover { background-color: #e9ecef; }
.stats-accordion-header .arrow { transition: transform 0.3s ease; }
.stats-accordion-header.active .arrow { transform: rotate(90deg); }
.stats-accordion-content { display: none; padding: 16px; background-color: var(--bg-card); }
.quality-bar-bg { width: 100px; height: 8px; background-color: #e9ecef; border-radius: 4px; overflow: hidden; }
.quality-bar { height: 100%; background-color: var(--secondary-color); border-radius: 4px; transition: width 0.5s ease; }
.quality-bar.medium { background-color: var(--warning-color); }
.quality-bar.low { background-color: var(--danger-color); }
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; }
.kpi-card {
    background-color: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px;
    padding: 24px; text-align: center;
}
.kpi-card .kpi-label { font-size: 14px; font-weight: 600; color: var(--text-light); margin-bottom: 8px; }
.kpi-card .kpi-value { font-size: 36px; font-weight: 700; color: var(--primary-dark); }
.kpi-card .kpi-subtext { font-size: 12px; color: var(--text-light); margin-top: 4px; }
.kpi-value.comparison-positive { color: var(--secondary-color); }
.kpi-value.comparison-negative { color: var(--danger-color); }
.kpi-value.comparison-neutral { color: var(--text-dark); }
.doctor-list { list-style: none; }
.doctor-list li { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; }
.delete-btn { background: transparent; border: none; color: var(--danger-color); cursor: pointer; font-size: 18px; }
.doctor-row-clickable { cursor: pointer; }
.doctor-row-clickable:hover { background-color: #f7f9fa; }
.doctor-row-clickable.active { background-color: var(--primary-light); }
.details-row td { padding: 0 !important; border-top: none !important; }
.details-content { padding: 16px 24px; background-color: #fdfdfe; }
.details-content ul { list-style-type: none; padding: 0; }
.details-content li { border-bottom: 1px solid var(--border-color); padding: 8px 0; }
.details-content li:last-child { border-bottom: none; }
.charts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 24px; }
.chart-container { position: relative; height: 40vh; min-height: 300px; }
.batch-result-card { border: 1px solid var(--border-color); border-radius: 8px; padding: 20px; margin-bottom: 16px; background-color: var(--primary-light); }
.batch-result-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.batch-result-header h4 { font-size: 18px; margin: 0; }
.department-stats { margin-top: 16px; border-top: 1px solid var(--border-color); padding-top: 16px; }
.department-stats h5 { margin-bottom: 12px; font-size: 16px; color: var(--text-dark); }
.stat-item { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 14px; }
.stat-item .name { flex-basis: 60%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-item .bar-container { flex-basis: 40%; display: flex; align-items: center; gap: 8px; }
.stat-bar { height: 10px; background-color: var(--warning-color); border-radius: 5px; min-width: 2px; }
.stat-item .value { font-weight: 700; }
.department-settings-list { list-style: none; padding: 0; margin-top: 16px; }
.department-settings-item { display: grid; grid-template-columns: 1fr auto auto auto; gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border-color); }
.department-settings-item:last-child { border-bottom: none; }
.department-settings-item .dept-name { font-weight: 600; }
.department-settings-item input[type="number"] { text-align: center; width: 120px; }
.department-settings-item .checkbox-label { display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: normal; }
.department-settings-item .actions-group { display: flex; gap: 8px; }
.department-settings-item .actions-group button,
.department-settings-item button { padding: 8px 12px; font-size: 14px; font-weight: 600; }
.progress-bar { width: 100%; background-color: #e9ecef; border-radius: 4px; height: 18px; overflow: hidden; }
.progress-bar-fill { height: 100%; background-color: var(--primary-color); text-align: center; line-height: 18px; color: white; font-size: 12px; font-weight: 600; transition: width 0.3s ease-in-out; }
.progress-bar-fill.orange { background-color: var(--warning-color); }
.progress-bar-fill.red { background-color: var(--danger-color); }
.duration-audit-indicator { width: 18px; height: 18px; border-radius: 4px; display: inline-block; vertical-align: middle; }
.indicator-yellow { background-color: var(--warning-color); }
.indicator-green { background-color: var(--secondary-color); }
.indicator-red { background-color: var(--danger-color); }
.duration-audit-row { display: grid; grid-template-columns: 30px 1fr 1fr 100px 250px; align-items: center; gap: 16px; padding: 12px 8px; border-bottom: 1px solid var(--border-color); }
.duration-audit-row:last-child { border-bottom: none; }
.duration-audit-header { font-weight: 700; font-size: 12px; text-transform: uppercase; color: var(--text-dark); padding-bottom: 8px; margin-bottom: 8px; }
.department-indicator-counts { display: flex; gap: 8px; align-items: center; }
.indicator-count { font-size: 12px; font-weight: 700; color: white; padding: 2px 8px; border-radius: 4px; }
.indicator-count.indicator-yellow { background-color: var(--warning-color); }
.indicator-count.indicator-green { background-color: var(--secondary-color); }
.indicator-count.indicator-red { background-color: var(--danger-color); }
.comparison-table { width: 100%; border-collapse: collapse; margin-top: 20px; }
.comparison-table th, .comparison-table td { padding: 12px; text-align: right; border-bottom: 1px solid var(--border-color); vertical-align: middle; }
.comparison-table th:first-child, .comparison-table td:first-child { text-align: left; font-weight: 600; }
.comparison-change { font-weight: 700; display: flex; align-items: center; justify-content: flex-end; gap: 8px; font-size: 16px; }
.comparison-change.positive { color: var(--secondary-color); }
.comparison-change.negative { color: var(--danger-color); }
.comparison-change.neutral { color: var(--text-light); }
.department-trends-container { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 24px; }
.trend-list { list-style: none; padding: 0; margin-top: 16px; }
.trend-list li { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--primary-light); font-weight: 600; }
.trend-list li:last-child { border-bottom: none; }
.trend-list .comparison-change { font-size: 14px; }
.batch-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(248, 249, 250, 0.85); backdrop-filter: blur(5px); display: flex; align-items: center; justify-content: center; z-index: 2000; opacity: 0; transition: opacity 0.3s ease-in-out; }
.analysis-hub-modal { display: flex; flex-direction: column; align-items: center; gap: 40px; }
.hub-center { position: relative; display: flex; align-items: center; justify-content: center; }
.hub-logo { width: 150px; height: auto; animation: logo-pulse 2s ease-in-out infinite; }
.hub-progress { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-90deg); }
.hub-progress .progress-bg { stroke: rgba(74, 140, 154, 0.2); fill: none; stroke-width: 10; }
.hub-progress .progress-bar-animated { stroke: var(--primary-color); fill: none; stroke-width: 10; stroke-dasharray: 660; stroke-dashoffset: 660; stroke-linecap: round; animation: progress-breathing 1.5s ease-in-out infinite; }
.hub-stages-list { list-style: none; width: 300px; }
.hub-stages-list li { display: flex; align-items: center; gap: 12px; padding: 8px 0; font-size: 16px; font-weight: 600; color: var(--text-light); opacity: 0.5; transition: opacity 0.3s, color 0.3s; }
.hub-stages-list li .stage-icon { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--border-color); transition: all 0.3s; background-size: 16px; background-position: center; background-repeat: no-repeat; }
.hub-stages-list li.processing { color: var(--text-dark); opacity: 1; }
.hub-stages-list li.processing .stage-icon { border-color: transparent; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234a8c9a' d='M12,4a8,8,0,0,1,7.89,6.7A1.5,1.5,0,0,0,21.39,12h0a1.5,1.5,0,0,0-1.48-1.76,5,5,0,0,0-4.9-5,1.5,1.5,0,0,0-1.5-1.5h0A1.5,1.5,0,0,0,12,2Z'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='1s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E"); }
.hub-stages-list li.done { color: var(--text-dark); opacity: 1; }
.hub-stages-list li.done .stage-icon { border-color: var(--secondary-color); background-color: var(--secondary-color); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9.5,18.5a1,1,0,0,1-.71-.29l-4-4a1,1,0,1,1,1.42-1.42L9.5,16.09l8.79-8.79a1,1,0,1,1,1.42,1.42l-9.5,9.5A1,1,0,0,1,9.5,18.5Z'/%3E%3C/svg%3E"); }
@keyframes logo-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
@keyframes progress-breathing { 50% { stroke-dashoffset: 500; } }
.status-badge { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 12px; font-weight: 700; font-size: 12px; white-space: nowrap; }
.status-badge::before { content: ''; width: 8px; height: 8px; border-radius: 50%; }
.status-badge.status-pending { background-color: #fff8e1; color: #f57c00; }
.status-badge.status-pending::before { background-color: #f57c00; }
.status-badge.status-in-progress { background-color: var(--primary-light); color: var(--primary-dark); }
.status-badge.status-in-progress::before { background-color: var(--primary-dark); }
.status-badge.status-done { background-color: #e8f5e9; color: var(--secondary-color); }
.status-badge.status-done::before { background-color: var(--secondary-color); }
.status-badge.status-problem { background-color: #ffebee; color: var(--danger-color); }
.status-badge.status-problem::before { background-color: var(--danger-color); }
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 1000; display: flex; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; }
.modal-overlay.visible { opacity: 1; pointer-events: auto; }
.modal-content { background: white; padding: 32px; border-radius: 8px; width: 90%; max-width: 700px; box-shadow: 0 5px 15px rgba(0,0,0,0.3); transform: scale(0.95); transition: transform 0.3s ease; }
.modal-overlay.visible .modal-content { transform: scale(1); }
.modal-actions { margin-top: 24px; display: flex; justify-content: flex-end; gap: 16px; }

.mobile-header { 
    display: none; 
    align-items: center; 
    gap: 16px; 
    padding: 16px; 
    background-color: var(--bg-card); 
    border-bottom: 1px solid var(--border-color); 
}
/* ▼▼▼ ДОДАНО СТИЛІ ДЛЯ ЗАГОЛОВКА В ХЕДЕРІ ▼▼▼ */
.mobile-header-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--primary-dark);
}
/* ▲▲▲ КІНЕЦЬ БЛОКУ ▲▲▲ */
.mobile-logo { height: 40px; width: auto; object-fit: contain; }
.menu-toggle-btn { width: 30px; height: 24px; background: transparent; border: none; cursor: pointer; display: flex; flex-direction: column; justify-content: space-between; }
.menu-toggle-btn span { width: 100%; height: 3px; background-color: var(--text-dark); border-radius: 2px; transition: transform 0.3s ease, opacity 0.3s ease; }
.sidebar-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 999; }
.sidebar-open .sidebar-overlay { display: block; }
.sidebar-open .menu-toggle-btn span:nth-child(1) { transform: translateY(10.5px) rotate(45deg); }
.sidebar-open .menu-toggle-btn span:nth-child(2) { opacity: 0; }
.sidebar-open .menu-toggle-btn span:nth-child(3) { transform: translateY(-10.5px) rotate(-45deg); }

/* ▼▼▼ ПОЧАТОК БЛОКУ МОБІЛЬНОЇ АДАПТАЦІЇ (992px) ▼▼▼ */
@media (max-width: 992px) {
    /* ▼▼▼ ОНОВЛЕНА ЛОГІКА МЕНЮ (ВИПАДАЄ ЗВЕРХУ) ▼▼▼ */
    .sidebar {
        position: fixed;
        top: 73px; /* Висота .mobile-header */
        left: 0;
        width: 100vw; /* Повна ширина */
        height: calc(100vh - 73px); /* Повна висота мінус хедер */
        transform: translateY(-110%); /* Ховаємо вгору */
        box-shadow: 0 8px 15px rgba(0,0,0,0.1);
        border-right: none;
        overflow-y: auto; /* Додаємо прокрутку для меню */
        padding-bottom: 90px; /* Відступ знизу, щоб не перекривати "Вихід" */
    }
    body.sidebar-open .sidebar {
        transform: translateY(0); /* Повертаємо на місце */
    }
    /* ▲▲▲ КІНЕЦЬ ОНОВЛЕННЯ МЕНЮ ▲▲▲ */

    .mobile-header { display: flex; }
    .main-content { padding: 24px 16px; }
    .page-header h2 { font-size: 22px; }
    .page-header p { font-size: 15px; }
    .card { padding: 16px; }
    .controls-grid { grid-template-columns: 1fr; gap: 20px; }
    .kpi-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
    .kpi-card .kpi-value { font-size: 28px; }
    .charts-grid { grid-template-columns: 1fr; gap: 24px; }
    .department-trends-container { grid-template-columns: 1fr; }
    .department-settings-item { grid-template-columns: 1fr; gap: 12px; padding: 16px 0; }
    .department-settings-item .dept-name { font-size: 16px; }
    .department-settings-item input[type="number"] { width: 100%; }
    .department-settings-item .actions-group { justify-content: flex-start; }
    .duration-audit-row { grid-template-columns: 24px 1fr; grid-template-rows: auto auto auto auto; row-gap: 8px; padding: 16px 8px; }
    .duration-audit-row > span { grid-column: 2 / 3; }
    .duration-audit-row .duration-audit-indicator { grid-row: 1 / 5; grid-column: 1 / 2; align-self: center; }
    .duration-audit-row span:nth-of-type(2)::before { content: 'Лікар: '; font-weight: 700; color: var(--text-dark); }
    .duration-audit-row span:nth-of-type(3)::before { content: 'Пацієнт: '; font-weight: 700; color: var(--text-dark); }
    .duration-audit-row span:nth-of-type(4)::before { content: 'Ліжко-дні: '; font-weight: 700; color: var(--text-dark); }
    .duration-audit-row span:nth-of-type(5)::before { content: 'Статус: '; font-weight: 700; color: var(--text-dark); }
    .duration-audit-header { display: none; }

    /* --- Адаптація Модальних Вікон --- */
    .modal-content {
        max-width: 90vw !important; /* Загальне правило для всіх модалок */
        width: auto !important; /* Дозволяємо зменшуватись */
    }
    #stationary-settings-modal .modal-content {
        max-width: 95vw !important; /* Окреме правило для широкої модалки */
    }
    
    /* Адаптація модалки "Справи" */
    #case-modal .modal-content {
        width: 95vw; /* Займає 95% ширини екрану */
        height: 90vh; /* Займає 90% висоти екрану */
        max-width: 95vw !important; /* Перебиваємо max-width: 1200px */
        padding: 16px; /* Зменшуємо відступи */
    }
    .case-modal-layout {
        grid-template-columns: 1fr; /* Ставимо сайдбар ПІД контент */
        overflow: hidden; /* Запобігаємо подвійній прокрутці */
    }
    .case-main-content {
        overflow-y: auto; /* Дозволяємо прокрутку основному контенту */
        padding-right: 5px; /* Невеликий відступ для скролбару */
    }
    .case-sidebar {
        overflow-y: visible; /* Вимикаємо прокрутку, бо вона вже є в .case-main-content */
        height: auto; /* Дозволяємо сайдбару бути повної висоти */
        grid-row: 2; /* Явно вказуємо, що сайдбар тепер другий */
    }
    .original-email-container {
        min-height: 300px; /* Задаємо мінімальну висоту для email */
    }

    /* Адаптація модалки "Перегляд Документа" */
    #document-preview-modal .modal-content {
        width: 95vw !important;
        height: 90vh;
        max-width: 95vw !important;
    }
    
    /* Адаптація сіток в модалках */
    .roles-permissions-grid { grid-template-columns: 1fr; }
    .doctor-stationary-config { grid-template-columns: 1fr; }
    .doctor-stationary-config .doctor-rate-col { text-align: left; }
    #add-user-form { grid-template-columns: 1fr; }
    
    /* --- Кінець Адаптації Модальних Вікон --- */
}
/* ▼▼▼ ПОЧАТОК БЛОКУ МОБІЛЬНОЇ АДАПТАЦІЇ (480px) ▼▼▼ */
@media (max-width: 480px) {
    /* Робимо хедер "липким" на телефонах */
    body {
        padding-top: 73px; /* Висота .mobile-header (72px + 1px border) */
    }
    .main-content {
        padding: 16px 12px 73px 12px; /* Додаємо відступ зверху і знизу */
    }
    .mobile-header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 990; /* Нижче ніж сайдбар (1000) */
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    .sidebar {
        width: 85vw; /* Робимо сайдбар трохи вужчим */
        max-width: 320px;
    }
    
    .kpi-grid { grid-template-columns: 1fr; }
    .page-header h2 { font-size: 20px; }
    
    /* Робимо таблицю в акордеоні статистики лікарів прокручуваною */
    .stats-accordion-content {
        overflow-x: auto;
    }

    /* Адаптація кнопок в налаштуваннях відділень */
    .department-settings-item .actions-group {
        flex-direction: column;
        align-items: stretch;
    }
    .department-settings-item .actions-group button {
        width: 100%;
    }

    /* Адаптація модалки "Взяти в роботу" */
    #take-to-work-modal .controls-grid {
        grid-template-columns: 1fr;
    }

    /* Адаптація модалки "Справи" */
    .case-main-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .case-main-actions button {
        width: 100%;
    }

    /* Адаптація модалки "Налаштування" */
    #add-category-form,
    #add-to-whitelist-form {
        grid-template-columns: 1fr;
    }
    #add-category-form button,
    #add-to-whitelist-form button {
        margin-top: 8px;
    }
}
.nav-item-dropdown .submenu {
    list-style: none;
    padding-left: 0; /* Прибираємо стандартний відступ */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
}
.nav-item-dropdown.open .submenu {
    max-height: 200px; /* Або більше, якщо потрібно */
}
.nav-item-dropdown .has-arrow {
    position: relative;
}
.nav-item-dropdown .has-arrow::after {
    content: '▶';
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    transition: transform 0.3s ease;
    font-size: 10px;
}
.nav-item-dropdown.open .has-arrow::after {
    transform: translateY(-50%) rotate(90deg);
}
.submenu .nav-button {
    font-size: 14px;
    padding: 10px 16px 10px 36px; /* Збільшуємо відступ зліва */
    font-weight: 500; /* Змінюємо шрифт */
    color: var(--text-light); /* Світліший колір */
}
.submenu .nav-button:hover {
    background-color: var(--primary-light);
    color: var(--primary-dark);
}
.submenu .nav-button.active {
    background-color: transparent; /* Прибираємо фон */
    color: var(--primary-dark); /* Темніший текст */
    font-weight: 600; /* Жирніший для активного */
    border-left: none; /* Прибираємо ліву межу */
}
/* Стиль для активного батьківського пункту */
.nav-item-dropdown.open .has-arrow.active {
     background-color: var(--primary-light);
     color: var(--primary-dark);
     border-left: 4px solid var(--primary-color);
}
.nav-item-dropdown.open .has-arrow.active svg {
    stroke: var(--primary-dark);
}
/* === Кінець Адаптації Підменю === */

.documents-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 24px;
    align-items: flex-start;
}

.categories-panel, .documents-panel {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
}
.categories-panel h4 {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.category-tree {
    list-style: none;
    padding: 0;
}
.category-tree-item {
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.category-tree-item:hover {
    background-color: var(--primary-light);
}
.category-tree-item.active {
    background-color: var(--primary-color);
    color: white;
    font-weight: 600;
}
.category-tree .submenu {
    padding-left: 20px;
}
.category-expander {
    font-size: 10px;
    width: 16px;
    text-align: center;
}

.document-info .subject {
    font-weight: 600;
}
.document-info .sender {
    font-size: 13px;
    color: var(--text-light);
}
.document-date {
    font-size: 13px;
    color: var(--text-light);
    text-align: right;
}

#case-modal .modal-content {
    max-width: 90vw;
    width: 1200px;
    height: 90vh;
    display: flex;
    flex-direction: column;
}
.case-modal-layout {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 24px;
    flex-grow: 1;
    overflow: hidden;
}
.case-main-content {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}
.case-sidebar {
    background-color: var(--bg-main);
    padding: 16px;
    border-radius: 8px;
    overflow-y: auto;
}
.original-email-container {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 16px;
    flex-grow: 1;
}
.original-email-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}
.case-sidebar h4 {
    margin-bottom: 12px;
}
.sidebar-section {
    margin-bottom: 20px;
}
.attachment-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    padding: 8px;
    border-radius: 4px;
    background-color: white;
    margin-bottom: 8px;
}
.tab-buttons { display: flex; border-bottom: 1px solid var(--border-color); }
.tab-btn { padding: 12px 20px; border: none; background: transparent; cursor: pointer; font-size: 16px; font-weight: 600; color: var(--text-light); border-bottom: 3px solid transparent; }
.tab-btn.active { color: var(--primary-dark); border-bottom-color: var(--primary-color); }
.tab-content { display: none; margin-top: 24px; }
.tab-content.active { display: block; }

.document-list-item.is-unread .subject,
.document-list-item.is-unread .sender {
    font-weight: 700 !important;
    color: var(--text-dark) !important;
}

.category-tree-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.category-name-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.category-count {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    background-color: #e9ecef;
    color: var(--text-light);
    flex-shrink: 0;
}

.category-count.has-unread {
    background-color: var(--danger-color);
    color: white;
}
.category-count.has-unread .unread-num {
    font-weight: 900;
}

.document-list-item .unread-indicator {
    width: 10px;
    height: 10px;
    background-color: var(--danger-color);
    border-radius: 50%;
    opacity: 1;
    transition: opacity 0.2s;
}
.document-list-item:not(.is-unread) .unread-indicator {
    opacity: 0;
}

.document-list-item {
    display: grid;
    grid-template-columns: 20px 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 12px;
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.2s ease;
}

.document-actions {
    display: flex;
    gap: 8px;
}

.document-list-item:hover {
    background-color: var(--primary-light);
}

.action-btn {
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 4px;
    border: 1px solid var(--primary-color);
    background-color: var(--primary-light);
    color: var(--primary-dark);
    cursor: pointer;
    transition: all 0.2s ease;
}

.action-btn:hover {
    background-color: var(--primary-color);
    color: white;
}

.action-btn.spam-btn {
    border-color: var(--warning-color);
    background-color: #fff8e1;
    color: #f57c00;
}
.action-btn.spam-btn:hover {
    background-color: var(--warning-color);
    color: white;
}

.action-btn.edit-btn {
    border-color: var(--text-light);
    background-color: var(--bg-main);
    color: var(--text-dark);
}
.action-btn.edit-btn:hover {
    background-color: var(--text-light);
    color: white;
}

.document-list-item.selected {
    background-color: var(--primary-light);
    border-left: 3px solid var(--primary-color);
}
.fixed-action-panel {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
}
.action-panel-btn {
    padding: 10px 20px;
    font-size: 15px;
    font-weight: 600;
    border: 1px solid var(--border-color);
    background-color: var(--bg-card);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.action-panel-btn.active {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}
.dashboard-view { display: none; }
.dashboard-view.active { display: block; }

.roles-permissions-grid {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 24px;
    margin-top: 16px;
    align-items: flex-start;
}
.roles-list-container, .permissions-container {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
    background-color: var(--bg-main);
}
.roles-list-container h4, .permissions-container h4 {
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}
#roles-list {
    list-style: none;
    max-height: 400px;
    overflow-y: auto;
}
.role-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 8px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: background-color 0.2s ease;
}
.role-list-item:hover {
    background-color: #e9ecef;
}
.role-list-item.active {
    background-color: var(--primary-color);
    color: white;
}
.role-list-item.active .kpi-subtext {
    color: #f0f6f7;
}
#permissions-checkbox-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 12px;
}
#permissions-checkbox-list.disabled {
    opacity: 0.6;
    pointer-events: none;
}
.permission-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
}
.permission-checkbox label {
    font-weight: normal;
    font-size: 14px;
    cursor: pointer;
}
.permission-checkbox input {
    width: 16px;
    height: 16px;
}
.action-cell {
    text-align: right !important;
}
.small-btn {
    padding: 6px 12px !important;
    font-size: 13px !important;
}
.status-indicator.inactive {
    color: var(--danger-color);
}
.status-indicator.active {
    color: var(--secondary-color);
}

/* --- СТИЛІ ДЛЯ МОДАЛЬНОГО ВІКНА СПРАВИ --- */
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}
.close-btn {
    background: transparent;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--text-light);
}
.attachment-filename {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}
.attachment-actions {
    display: flex;
    gap: 8px;
}
.attachment-actions .action-btn {
    padding: 4px 8px;
    font-size: 12px;
}
.case-main-actions {
    margin-top: 16px;
    align-self: flex-start;
    display: flex;
    gap: 16px;
}

/* --- NEW STYLES FOR TAILWIND-LIKE DASHBOARD --- */
/* Base styles from the new index.html <style> tag */
/* body is already styled */

/* Stat Cards */
.stat-card {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: var(--white);
    border: none;
    padding: 24px; /* Ensure padding */
}
.stat-card.green {
    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--secondary-dark) 100%);
}
.stat-card.orange {
    background: linear-gradient(135deg, var(--warning-color) 0%, var(--warning-dark) 100%);
}
.stat-card.red {
    background: linear-gradient(135deg, var(--danger-color) 0%, var(--danger-dark) 100%);
}
.stat-card .stat-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.stat-card .stat-label {
    font-size: 14px;
    font-weight: 500; /* medium */
    color: var(--white-opacity-90);
}
.stat-card .stat-icon {
    width: 32px; /* w-8 */
    height: 32px; /* h-8 */
    color: var(--white-opacity-80);
}
/* Basic SVG styling */
.stat-icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5; /* Adjusted stroke width */
    stroke-linecap: round;
    stroke-linejoin: round;
}
.stat-card .stat-value {
    font-size: 28px; /* text-3xl is large, adjusted */
    font-weight: 700; /* bold */
    margin-bottom: 4px; /* mb-1 */
}
.stat-card .stat-change {
    font-size: 14px; /* text-sm */
    color: var(--white-opacity-80);
}

/* Chart Container */
.chart-container {
    position: relative;
    height: 320px; /* Default height */
}
.chart-container-sm { /* For smaller charts like age, medication */
     position: relative;
     height: 280px;
}

/* Progress Bar */
/* .progress-bar is already defined */
/* .progress-bar-fill is already defined */
/* Add color variants */
.progress-fill.green { background: var(--secondary-color); }
.progress-fill.orange { background: var(--warning-color); }
.progress-fill.red { background: var(--danger-color); }

/* Badge */
.badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}
.badge-success { background: #d4edda; color: #155724; }
.badge-warning { background: #fff3cd; color: #856404; }
.badge-danger { background: #f8d7da; color: #721c24; }
.badge-info { background: #d1ecf1; color: #0c5460; }

/* Grid Layouts (Replicating Tailwind Grid) */
.grid-container {
    display: grid;
    gap: 24px; /* gap-6 */
    margin-bottom: 24px; /* mb-6 */
}
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* Responsive adjustments */
@media (max-width: 1024px) { /* lg breakpoint */
    .lg\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 768px) { /* md breakpoint */
    .md\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .grid-cols-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Adjust base for smaller screens */
    .grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Adjust base */
}
@media (max-width: 640px) { /* sm breakpoint (Tailwind default) */
     .grid-cols-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
     .grid-cols-3 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
     .grid-cols-2 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
}


/* Utility classes from Tailwind (simplified) */
.mb-8 { margin-bottom: 32px; }
.mb-6 { margin-bottom: 24px; }
.mb-4 { margin-bottom: 16px; }
.mb-2 { margin-bottom: 8px; }
.mb-1 { margin-bottom: 4px; }
.p-6 { padding: 24px; }
.p-3 { padding: 12px; }
.text-xl { font-size: 20px; line-height: 28px; }
.text-3xl { font-size: 30px; line-height: 36px; }
.text-sm { font-size: 14px; line-height: 20px; }
.text-xs { font-size: 12px; line-height: 16px; }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-medium { font-weight: 500; }
.flex { display: flex; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.gap-3 { gap: 12px; }
.gap-6 { gap: 24px; }
.space-y-3 > * + * { margin-top: 12px; }
.space-y-4 > * + * { margin-top: 16px; }
.rounded-lg { border-radius: 8px; }
.rounded-full { border-radius: 9999px; }
.w-2 { width: 8px; }
.h-2 { height: 8px; }
.w-8 { width: 32px; }
.h-8 { height: 32px; }
.mr-3 { margin-right: 12px; }
.mt-1 { margin-top: 4px; }
.flex-1 { flex: 1 1 0%; }
.max-w-full { max-width: 100%; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* Dashboard Specific Headers/Text */
#dashboard h3 { /* Re-style h3 inside dashboard cards */
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--text-dark);
}
#dashboard-update-time {
    color: var(--text-light);
    font-size: 14px;
    margin-bottom: 24px;
}

/* Ensure cards don't have bottom margin when inside a grid */
.grid-container > .card {
    margin-bottom: 0;
}

/* Equipment Status specific */
.equipment-status-item > div:first-child { /* Flex container for labels */
     display: flex;
     justify-content: space-between;
     margin-bottom: 8px;
}
.equipment-status-item .equipment-name {
     color: var(--text-dark);
     font-weight: 600;
}
.equipment-status-item .equipment-count {
     font-weight: 600;
}
.equipment-status-item .equipment-count.green { color: var(--secondary-color); }
.equipment-status-item .equipment-count.orange { color: var(--warning-color); }
.equipment-status-item .equipment-count.red { color: var(--danger-color); }

/* Surgery Schedule specific */
.surgery-item {
    padding: 12px;
    border-radius: 8px;
    background: var(--primary-light);
}
.surgery-item > div:first-child { /* Flex container for time/status */
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}
.surgery-item .surgery-time {
    color: var(--text-dark);
    font-weight: 600;
}
.surgery-item .surgery-details {
    color: var(--text-light);
    font-size: 14px;
}

/* Recent Activity specific */
.activity-item {
    display: flex;
    align-items: flex-start;
}
.activity-item .activity-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 12px;
    margin-top: 4px; /* Adjust alignment */
    flex-shrink: 0; /* Prevent shrinking */
}
.activity-item .activity-dot.green { background: var(--secondary-color); }
.activity-item .activity-dot.blue { background: var(--primary-color); }
.activity-item .activity-dot.red { background: var(--danger-color); }
.activity-item .activity-dot.orange { background: var(--warning-color); }

.activity-item .activity-content {
    flex: 1 1 0%;
}
.activity-item .activity-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-dark);
}
.activity-item .activity-time {
    font-size: 12px;
    color: var(--text-light);
}


/* --- END NEW STYLES --- */

/* === СТИЛІ ДЛЯ МОНІТОРИНГУ ПРОТЕЗУВАННЯ (ОНОВЛЕННЯ) === */

/* Активний рядок, коли випадаюча панель відкрита */
.prosthetics-row.active { 
    background-color: var(--primary-light); 
}

/* Контейнер для випадаючої панелі */
.prosthetics-details-row {
    background-color: #fdfdfe; /* Трохи світліший за фон */
    border-left: 3px solid var(--primary-color);
    box-shadow: inset 0 4px 6px -1px rgba(0, 0, 0, 0.05); /* Тінь всередині */
}
.prosthetics-details-row td {
    padding: 20px 24px !important; /* Власний padding */
    text-align: left !important;
}

/* Сітка для вмісту випадаючої панелі */
.prosthetics-details-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
}
.prosthetics-details-content h5 {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 4px;
    text-transform: uppercase;
}
.prosthetics-details-content p {
    font-size: 14px;
    color: var(--text-dark);
    font-weight: 500;
    margin: 2px 0;
}
/* Стиль для тексту-заглушки (напр. "Не вказано") */
.prosthetics-details-content p .placeholder {
    color: var(--text-light);
    font-style: italic;
    font-weight: 400;
}

/* Вирівнювання іконки-олівця */
.action-cell {
    text-align: center !important;
}
.action-btn.edit-btn {
    font-size: 16px;
    padding: 6px 10px;
}
.nav-item-dropdown .submenu {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s ease-out, opacity 0.3s ease-out, transform 0.3s ease-out;
  transform: translateY(-10px);
  list-style: none;
  padding-left: 20px; /* Відступ для вкладених елементів */
}

/* Стилі для ВІДКРИТОГО підменю */
.nav-item-dropdown.open > .submenu {
  max-height: 500px; /* Встановіть достатню висоту для вмісту */
  opacity: 1;
  transform: translateY(0);
}

/* Поворот стрілки у відкритому стані */
.nav-item-dropdown.open > .nav-button.has-arrow::after {
  transform: translateY(-50%) rotate(90deg);
}

/* --- СТИЛІ ДЛЯ СТОРІНКИ ВІДДІЛЕННЯ --- */

/* Загальний стиль для віджетів */
.widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}

.widget-header h3 {
    margin: 0;
}

.widget-content {
    padding-top: 8px;
}

/* Стилі для модальних вікон */
.modal-overlay-viddilenya {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s 0.3s;
}

.modal-overlay-viddilenya.visible {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease;
}

.modal-content-viddilenya {
    background-color: white;
    padding: 24px 32px;
    border-radius: 8px;
    width: 90%;
    max-width: 1200px; /* Велика ширина для таблиць */
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

.modal-overlay-viddilenya.visible .modal-content-viddilenya {
    transform: scale(1);
}

.modal-header-viddilenya {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.modal-body-viddilenya {
    flex-grow: 1;
    overflow-y: auto;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    padding: 16px 0;
}

.modal-footer-viddilenya {
    margin-top: 16px;
    text-align: right;
}

/* Стилі для таблиці всередині модалок */
.modal-body-viddilenya .results-wrapper {
    margin: 0;
}
.modal-body-viddilenya table {
    font-size: 14px;
}

/* === СТИЛІ ДЛЯ ПРОКРУТКИ БІЧНОГО МЕНЮ === */

/* 
  Робимо саму бічну панель "гнучким" контейнером,
  який розтягується на всю висоту екрану.
*/
.sidebar {
    display: flex;
    flex-direction: column;
    height: 100vh; /* 100% висоти вікна браузера */
}

.nav-menu {
    flex-grow: 1; /* Це ключова властивість, що розтягує блок */
    overflow-y: auto; /* Додає вертикальну прокрутку ТІЛЬКИ якщо вміст не влазить */
    padding-bottom: 20px; /* Невеликий відступ знизу для краси */
}

.nav-menu::-webkit-scrollbar {
  width: 6px;
}
.nav-menu::-webkit-scrollbar-track {
  background: transparent;
}
.nav-menu::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}
.nav-menu:hover::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.4);
}