:root {
    --primary-color: #00A8E8;
    --primary-dark: #0077b6;
    --text-dark: #333333;
    --text-light: #777777;
    --bg-light: #F4F7FA;
    --border-color: #E0E0E0;
    --white: #FFFFFF;
    --success: #28a745;
    --warning: #ffc107;
    --danger: #dc3545;
}

*,
*:before,
*:after {
    box-sizing: border-box;
}

body {
    font-family: 'Inter', 'Segoe UI', sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--bg-light);
    color: var(--text-dark);
    font-size: 13px;
}

/* Report Layout Grid */
.report-wrapper {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

/* Left Filter Panel - Keeping for reports */
.filter-panel {
    width: 260px;
    background-color: #E9ECEF;
    border-right: 1px solid #CCC;
    display: flex;
    flex-direction: column;
    padding: 10px;
    overflow-y: auto;
    flex-shrink: 0;
}

.filter-group {
    background: var(--primary-dark);
    border-radius: 4px;
    margin-bottom: 8px;
    overflow: visible;
    /* Allow dropdowns to spill out */
    position: relative;
    /* Ensure z-index works if needed */
    z-index: 1;
    /* base z-index */
}

.filter-group:hover {
    z-index: 100;
    /* Bring active group to front */
}

.filter-header {
    padding: 8px 12px;
    color: white;
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.filter-content {
    padding: 8px;
    background: #f0f2f5;
    border: 1px solid var(--primary-dark);
    border-top: none;
}

.filter-select {
    width: 100%;
    padding: 6px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 12px;
}

.btn-apply {
    margin-top: auto;
    background-color: #6C757D;
    color: white;
    border: none;
    padding: 10px;
    width: 100%;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
}

/* Main Content Area */
.report-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

/* Header */
.report-top-header {
    background: white;
    padding: 10px 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.report-title-text {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-dark);
    text-transform: uppercase;
}

/* Scrollable Content */
.report-scroll-area {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
    background-color: #eaeff5;
    display: flex;
    /* Enable flex layout for vertical stretching */
    flex-direction: column;
}

/* KPI Grid */
.kpi-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 15px;
}

.kpi-box {
    background: white;
    border-radius: 6px;
    padding: 15px;
    border: 1px solid #dcdcdc;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    text-align: center;
    position: relative;
}

.kpi-box-icon {
    position: absolute;
    top: 5px;
    left: 5px;
    color: var(--primary-color);
    cursor: help;
    font-size: 16px;
    font-weight: bold;
    background: rgba(0, 168, 232, 0.1);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.kpi-box-icon:hover {
    background: var(--primary-color);
    color: white;
    transform: scale(1.1);
}

.kpi-box-percent {
    position: absolute;
    top: 5px;
    right: 5px;
    font-weight: bold;
    font-size: 11px;
}

.kpi-number {
    font-size: 24px;
    font-weight: 800;
    color: var(--primary-dark);
    margin: 5px 0;
}

.kpi-text {
    font-size: 12px;
    color: #666;
    line-height: 1.3;
}

/* Heatmap / Treemap Area */
.heatmap-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(2, 120px);
    gap: 2px;
    background: white;
    border: 1px solid #ccc;
}

.heatmap-cell {
    background-color: #3b6aa0;
    /* Base blue */
    color: white;
    padding: 10px;
    font-size: 11px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: background 0.2s;
}

.heatmap-cell:hover {
    filter: brightness(1.1);
}

.heatmap-cell.large {
    grid-column: span 1;
    grid-row: span 2;
}

.heatmap-cell-title {
    font-weight: bold;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    padding-bottom: 4px;
    margin-bottom: 4px;
}

/* Verification Status Styles */
.verification-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    height: 100%;
}

.verification-panel {
    background: white;
    border: 1px solid #ccc;
    padding: 15px;
    border-radius: 4px;
}

.progress-row {
    margin-bottom: 12px;
}

.progress-label {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    margin-bottom: 3px;
}

.progress-bar-bg {
    background: #eee;
    height: 18px;
    width: 100%;
    border-radius: 3px;
    overflow: hidden;
    position: relative;
    border: 1px solid #ddd;
}

.progress-bar-fill {
    height: 100%;
    background: var(--success);
    display: flex;
    align-items: center;
    padding-left: 5px;
    color: white;
    font-size: 11px;
}

.progress-bar-fill.warning {
    background: var(--warning);
    color: black;
}

.progress-bar-fill.danger {
    background: var(--danger);
}

/* Data Grid (Doctors) */
.detail-grid {
    width: 100%;
    border-collapse: collapse;
    background: white;
    font-size: 12px;
}

.detail-grid th,
.detail-grid td {
    border: 1px solid #ccc;
    padding: 6px 8px;
    text-align: right;
}

.detail-grid th {
    background: #4A6fa5;
    color: white;
    text-align: center;
    vertical-align: middle;
}

.detail-grid td:nth-child(2),
.detail-grid td:nth-child(3) {
    text-align: left;
    /* Names */
}

/* SHELL SIDEBAR STYLES (in Index) */
.sidebar {
    width: 250px;
    background: #222;
    /* Main Sidebar BG */
    color: white;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #444;
    transition: width 0.3s ease;
    flex-shrink: 0;
    overflow: hidden;
}

.sidebar.collapsed {
    width: 60px;
}

.sidebar-header {
    background: #111;
    /* Header Darker */
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Space for toggle */
    padding: 0 15px;
    border-bottom: 1px solid #444;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
}

.sidebar-logo {
    height: 48px;
    /* Increased height */
    max-width: 190px;
    object-fit: contain;
    transition: opacity 0.2s;
}

.sidebar-toggle {
    cursor: pointer;
    color: #ccc;
    font-size: 20px;
    z-index: 20;
    /* Ensure clickability */
}

.sidebar-toggle:hover {
    color: white;
}

/* BI Plaque Row */
.bi-row {
    background: linear-gradient(90deg, #1a1a1a 0%, #2c2c2c 100%);
    border-top: 1px solid #333;
    border-bottom: 2px solid #5c4d26;
    /* Muted Gold */
    padding: 10px 0;
    text-align: center;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #e5c100;
    /* Gold text */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
    white-space: nowrap;
    overflow: hidden;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bi-full {
    display: block;
    font-size: 11px;
    font-family: 'Montserrat', 'Segoe UI', sans-serif;
    /* Try to prompt a cleaner font */
}

.bi-short {
    display: none;
    font-size: 14px;
    font-weight: 900;
}

.sidebar.collapsed .bi-row {
    padding: 0;
    background: #000;
    border-bottom: 2px solid #5c4d26;
    /* Muted Gold */
}

.sidebar.collapsed .bi-full {
    display: none;
}

.sidebar.collapsed .bi-short {
    display: block;
}

.sidebar-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-menu-item {
    border-bottom: 1px solid #333;
}

.sidebar-menu-item a {
    color: #ddd;
    text-decoration: none;
    display: flex;
    /* Flex for Icon + Text */
    align-items: center;
    padding: 10px 15px;
    /* Adjusted padding */
    background: #222;
    white-space: normal;
    /* ALLOW WRAPPING */
    line-height: 1.3;
    font-size: 13px;
    transition: background 0.2s;
    min-height: 50px;
    /* Use min-height to allow growth */
    overflow: hidden;
}

.sidebar-menu-item a:hover {
    background: #333;
    color: white;
}

.sidebar-menu-item a .menu-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    margin-right: 15px;
    flex-shrink: 0;
}

.sidebar-menu-item a .menu-text {
    opacity: 1;
    transition: opacity 0.2s;
}

.sidebar.collapsed .sidebar-menu-item a .menu-text {
    opacity: 0;
    pointer-events: none;
    display: none;
    /* Hide text fully */
}

.sidebar.collapsed .sidebar-header {
    justify-content: center;
    /* Center toggle button */
    padding: 0;
}

.sidebar.collapsed .sidebar-logo {
    display: none !important;
    /* Force hide logo */
}

.sidebar.collapsed .sidebar-header .header-text {
    display: none;
}

.sidebar.collapsed .sidebar-menu-item a {
    padding: 15px;
    /* Center icon */
    justify-content: center;
}

.sidebar.collapsed .sidebar-menu-item a .menu-icon {
    margin-right: 0;
}

/* Heatmap Legend & Wrapper */
.heatmap-wrapper {
    display: flex;
    gap: 15px;
    align-items: stretch;
    /* Match height */
    flex: 1;
    /* Stretch to fill remaining vertical space */
    min-height: 250px;
    /* Minimum reasonable height */
    height: auto;
    /* Remove fixed height */
}

.heatmap-legend {
    width: 140px;
    flex-shrink: 0;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.legend-item {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    color: #555;
    font-weight: 500;
}

.legend-color {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    margin-right: 8px;
    display: inline-block;
}

.heatmap-container-row {
    flex: 1;
    display: grid;
    /* Proportions: ~ 3.5 : 3 : 1.7 : 1.1 : 0.6 */
    grid-template-columns: 35fr 29fr 18fr 12fr 6fr;
    grid-template-rows: 100%;
    gap: 2px;
}

.heatmap-cell.full-height {
    grid-row: span 1;
}

/* Custom Multi-select Dropdown */
.multi-select-dropdown {
    position: relative;
    width: 100%;
}

.select-trigger {
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 6px;
    font-size: 12px;
    cursor: pointer;
    position: relative;
}

.select-trigger::after {
    content: '▼';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    color: #666;
}

.select-options {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #ccc;
    border-radius: 0 0 3px 3px;
    z-index: 100;
    max-height: 200px;
    overflow-y: auto;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.multi-select-dropdown.active .select-options {
    display: block;
}

.select-options label {
    display: block;
    padding: 8px 10px;
    font-size: 12px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    color: #333;
}

.select-options label:last-child {
    border-bottom: none;
}

.select-options label:hover {
    background-color: #e9ecef;
}

.select-options input[type="checkbox"] {
    margin-right: 8px;
}

/* RESPONSIVE BREAKPOINTS */

@media (max-width: 1200px) {

    /* Slightly smaller screens (laptops) */
    .kpi-container {
        grid-template-columns: repeat(2, 1fr);
        /* 2x2 grid */
    }

    .verification-grid {
        gap: 10px;
    }
}

@media (max-width: 900px) {

    /* Tablet Portrait / Small Laptop */
    .report-wrapper {
        flex-direction: column;
        height: auto;
        /* Allow scroll on body if needed */
        overflow: auto;
    }

    .filter-panel {
        width: 100%;
        height: auto;
        border-right: none;
        border-bottom: 1px solid #ccc;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
        padding: 10px;
    }

    .filter-group {
        flex: 1;
        min-width: 200px;
        min-height: 80px;
        /* Ensure height for content */
        margin-bottom: 0;
        display: flex;
        flex-direction: column;
    }

    .filter-content {
        flex: 1;
        /* Expand to fill height */
    }

    .report-main {
        overflow: visible;
        /* Let content expand */
    }

    .heatmap-wrapper {
        flex-direction: column;
        height: auto;
        gap: 5px;
    }

    .heatmap-legend {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 15px;
        margin-bottom: 10px;
    }

    .heatmap-container-row {
        /* Keep proportions but minimum height. */
        height: 200px;
    }

    .verification-grid {
        grid-template-columns: 1fr;
        /* Stack panels */
    }

    /* Force Collapsed Sidebar on Small Screens */
    .sidebar {
        width: 60px;
    }

    .sidebar-logo {
        display: none !important;
    }

    .bi-full {
        display: none !important;
    }

    .bi-short {
        display: block !important;
    }

    .sidebar-header {
        justify-content: center;
        padding: 0;
    }

    .sidebar-menu-item a {
        justify-content: center;
        padding: 15px;
    }

    .sidebar-menu-item a .menu-icon {
        margin-right: 0;
    }

    .sidebar-menu-item a .menu-text {
        display: none !important;
    }

    .sidebar-toggle {
        display: none;
    }

    /* Optional: Hide toggle if forced? Or keep it but it does nothing? Let's hide it to avoid confusion or keep it centered. User said "При свернутом меню отображать там кнопку". But if forced, maybe keep it. Let's keep it centered. */
}

@media (max-width: 600px) {

    /* Mobile */
    .kpi-container {
        grid-template-columns: 1fr;
        /* 1 column */
    }

    .filter-panel {
        flex-direction: column;
    }

    .filter-group {
        width: 100%;
    }
}

/* Proportional Layout Styles */
.kpi-section {
    display: flex;
    flex-direction: column;
    flex: 3;
    /* Increased priority */
    gap: 10px;
    margin-bottom: 20px;
    min-height: 300px;
}

.kpi-container {
    flex: 1;
    /* Each row takes equal available height */
    /* Existing grid gap is 10px */
}

/* Ensure boxes fill the grid cell and center content */
.kpi-box {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.heatmap-wrapper {
    flex: 2;
    /* Reduced priority */
    min-height: 250px;
    /* max-height removed to allow proportional stretch */
    overflow: hidden;
    /* Ensure bars don't spill */
}

/* Responsive adjustment for KPI section */
@media (max-width: 900px) {
    .kpi-section {
        flex: none;
        /* Stack normally on mobile */
        height: auto;
    }

    .kpi-container {
        flex: none;
        height: auto;
    }

    /* Let heatmap maximize on mobile if needed or auto */
    .heatmap-wrapper {
        flex: none;
        height: auto;
    }
}

/* Header Buttons */
.btn-header {
    background: white;
    border: 1px solid #ccc;
    color: #333;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.btn-header:hover {
    background: #f0f2f5;
    border-color: #999;
}

.btn-header svg {
    display: block;
}


/* Custom Multi-Select Chips */
.custom-multi-select {
    position: relative;
    width: 100%;
}

.chips-container {
    background: white;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 4px;
    min-height: 32px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    cursor: pointer;
}

.placeholder-text {
    padding: 2px 4px;
    color: #333;
    font-size: 12px;
}

.chip {
    background: #e1f0fa;
    /* Light blue */
    color: #0077b6;
    border: 1px solid #bce0fd;
    border-radius: 3px;
    padding: 2px 6px;
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.chip-remove {
    cursor: pointer;
    font-weight: bold;
    color: #005f73;
}

.chip-remove:hover {
    color: red;
}

.multi-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    /* Wider than container */
    background: white;
    border: 1px solid #ccc;
    z-index: 200;
    /* Higher than hover boost */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.multi-dropdown-menu.active {
    display: block;
}

.dropdown-search-wrapper {
    padding: 6px;
    border-bottom: 1px solid #eee;
}

.dropdown-search {
    width: 100%;
    padding: 4px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 12px;
}

.dropdown-list {
    max-height: 250px;
    /* Taller list */
    overflow-y: auto;
}

.dropdown-option {
    padding: 6px 10px;
    /* Tighter spacing */
    cursor: pointer;
    border-bottom: 1px solid #f9f9f9;
    white-space: normal;
    /* Allow wrapping */
    line-height: 1.3;
}

.dropdown-option:hover {
    background: #f0f8ff;
}

.special-option {
    font-weight: bold;
    color: #555;
    background: #fafafa;
}


.dropdown-option.selected {
    background: #e6f7ff;
    font-weight: 500;
}

/* Controls inside chips container */
.chips-controls {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 5px;
}

.global-clear:hover {
    color: red !important;
}

.search-clear:hover {
    color: #333 !important;
}
/* Additional Chips Controls */
.chips-controls {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 5px;
}
.global-clear:hover { color: red !important; cursor: pointer; }
.search-clear:hover { color: #333 !important; cursor: pointer; }
.dropdown-chevron {
    color: #666;
    font-size: 10px;
}