:root {
    --primary-color: #14b8a6;
    --primary-dark: #0f766e;
    --text-dark: #1e293b;
    --text-light: #64748b;
    --bg-light: #f8fafc;
    --border-color: #e2e8f0;
    --white: #FFFFFF;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
}

*,
*: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: linear-gradient(135deg, #14b8a6 0%, #0f766e 100%);
    color: white;
    border: none;
    padding: 10px;
    width: 100%;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    box-shadow: 0 4px 6px -1px rgba(20, 184, 166, 0.2);
    transition: all 0.2s;
}

.btn-apply:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 15px -3px rgba(20, 184, 166, 0.3);
}

/* 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: 20px;
    font-weight: 800;
    background: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* 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(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.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(20, 184, 166, 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: var(--primary-dark);
    /* Base teal */
    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 (Details Report Style) */
.detail-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: white;
    font-size: 13px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
}

.detail-grid thead {
    position: sticky;
    top: 0;
    z-index: 10;
}

.detail-grid th {
    background: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%);
    color: white;
    text-align: center;
    vertical-align: middle;
    padding: 14px 10px;
    font-weight: 600;
    border-bottom: 2px solid #0d9488;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.05em;
}

.detail-grid th:last-child {
    border-right: none;
}

.detail-grid td {
    padding: 10px 12px;
    border-bottom: 1px solid #edf2f7;
    border-right: 1px solid #edf2f7;
    color: #2d3748;
    text-align: right;
    transition: background 0.15s;
}

.detail-grid td:last-child {
    border-right: none;
}

.detail-grid tr:last-child td {
    border-bottom: none;
}

.detail-grid td:nth-child(2) {
    text-align: left;
    font-weight: 500;
}

/* Subdivision Headers */
.division-header {
    background-color: #f7fafc !important;
    transition: background 0.2s !important;
}

.division-header:hover {
    background-color: #edf2f7 !important;
}

.division-header td {
    color: #4A5568;
    font-weight: 700 !important;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.05em;
    border-bottom: 2px solid #e2e8f0;
}

.collapse-icon {
    display: inline-block;
    width: 20px;
    color: var(--primary-color);
    transition: transform 0.2s;
}

/* Row Styling */
.doctor-row:hover td {
    background-color: #f0f9ff;
}

.subtotal td {
    background-color: #f8fafc;
    font-weight: 700;
    color: #1a202c;
    border-top: 1px solid #cbd5e0;
}

/* Specific alignments */
.detail-grid td:first-child {
    text-align: left;
}

/* Highlighted Columns Style */
.col-highlight-header {
    background: #cbd5e0 !important;
    color: #1a202c !important;
    border-bottom: 2px solid #a0aec0 !important;
}

.col-highlight-cell {
    background-color: #f7fafc !important;
    color: #1a202c !important;
    font-weight: 600;
}

/* RESPONSIVE TABLE STYLES */

/* Tablet & Smaller: Horizontal scroll with sticky identity */
@media (max-width: 1024px) {
    .report-scroll-area {
        overflow-x: auto;
    }

    .detail-grid td:nth-child(2),
    .detail-grid th:nth-child(2) {
        position: sticky;
        left: 0;
        z-index: 5;
        background: white;
        border-right: 2px solid var(--primary-color);
    }

    .detail-grid th:nth-child(2) {
        background: var(--primary-dark);
        z-index: 15;
    }
}

/* Mobile: Card View Transformation */
@media (max-width: 768px) {

    .detail-grid,
    .detail-grid thead,
    .detail-grid tbody,
    .detail-grid th,
    .detail-grid td,
    .detail-grid tr {
        display: block;
    }

    .detail-grid thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    .detail-grid tr {
        margin-bottom: 20px;
        border: 1px solid #edf2f7;
        border-radius: 8px;
        background: white;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }

    .detail-grid td {
        border: none;
        border-bottom: 1px solid #edf2f7;
        position: relative;
        padding-left: 50% !important;
        text-align: right !important;
        min-height: 40px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .detail-grid td:before {
        content: attr(data-label);
        position: absolute;
        left: 12px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        text-align: left;
        font-weight: 700;
        color: #4a5568;
        font-size: 11px;
        text-transform: uppercase;
    }

    .detail-grid td:last-child {
        border-bottom: none;
    }

    /* Special handling for Subdivision Headers in Card View */
    .division-header td {
        background: var(--primary-dark) !important;
        color: white !important;
        padding: 12px !important;
        text-align: center !important;
        justify-content: center;
        padding-left: 12px !important;
    }

    .division-header td:before {
        display: none;
    }

    .doctor-count {
        display: block !important;
        background: #f7fafc;
        text-align: center !important;
        font-style: italic;
        padding: 5px !important;
    }
}

/* SHELL SIDEBAR STYLES (in Index) */
.sidebar {
    width: 250px;
    background: #222;
    /* Main Sidebar BG */
    color: white;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #222;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    overflow: hidden;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
}

.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 #333;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
    background: #000;
}

.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, #111 0%, #1e1e1e 100%);
    border-top: 1px solid #333;
    border-bottom: 2px solid #0f766e;
    padding: 10px 0;
    text-align: center;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #14b8a6;
    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 (Simplex Style) */
.btn-header {
    background: white;
    border: 1px solid var(--primary-color);
    /* Simplex Primary */
    color: #333;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn-header:hover {
    background: #e0f2f1;
    /* Very light primary (Teal 50) */
    border-color: var(--primary-dark);
    color: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.btn-header:active {
    transform: translateY(0);
}

.btn-header svg {
    color: var(--primary-color);
    transition: color 0.2s;
}

.btn-header:hover svg {
    color: var(--primary-dark);
}

/* 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: #e0f2f1;
    /* Light teal */
    color: var(--primary-dark);
    border: 1px solid #80cbc4;
    border-radius: 3px;
    padding: 2px 6px;
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.chip-remove {
    cursor: pointer;
    font-weight: bold;
    color: var(--primary-dark);
}

.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: #e0f2f1;
    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;
}

/* Sidebar Submenu */
.sidebar-submenu {
    list-style: none;
    padding: 0;
    margin: 0;
    background: #1a1a1a;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.sidebar-submenu.open {
    max-height: 500px;
    transition: max-height 0.5s ease-in;
}

.sidebar-submenu .sidebar-menu-item a {
    padding-left: 25px;
    background: #1a1a1a;
    font-size: 12px;
    min-height: 40px;
}

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

.sidebar-parent-item {
    cursor: pointer;
    user-select: none;
}

.sidebar-parent-item .arrow-icon {
    margin-left: auto;
    width: 12px;
    height: 12px;
    transition: transform 0.3s;
}

.sidebar-parent-item.collapsed .arrow-icon {
    transform: rotate(-90deg);
}

/* Horizontal Tabs (Report Pages) */
.nav-tabs-container {
    background-color: #f0f2f5;
    padding: 10px 20px 0 20px;
    border-bottom: 1px solid #dcdcdc;
    display: flex;
    overflow-x: auto;
}

.nav-tab {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    margin-right: 5px;
    background: transparent;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    cursor: pointer;
    text-decoration: none;
    color: #666;
    font-weight: 500;
    font-size: 13px;
    transition: all 0.2s;
    white-space: nowrap;
}

.nav-tab:hover {
    background: #e4e6ea;
    color: #333;
}

.nav-tab.active {
    background: white;
    color: var(--primary-dark);
    border-color: #dcdcdc;
    border-bottom-color: white;
    margin-bottom: -1px;
    font-weight: 600;
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.05);
}

.nav-tab-icon {
    margin-right: 8px;
    width: 16px;
    height: 16px;
    fill: currentColor;
    opacity: 0.7;
}

.nav-tab.active .nav-tab-icon {
    opacity: 1;
}

.report-main {
    background: #f0f2f5;
}

.report-top-header {
    border-top: 1px solid #fff;
}

/* Vaccination Report Styles */
.status-badge {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    display: inline-block;
}

.status-done {
    background-color: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #c8e6c9;
}

.status-needs {
    background-color: #fff3e0;
    color: #ef6c00;
    border: 1px solid #ffe0b2;
}

.status-not-req {
    background-color: #f5f5f5;
    color: #757575;
    border: 1px solid #e0e0e0;
}

/* Tooltip text container */
.tooltip-cell {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.info-icon {
    display: inline-block;
    width: 14px;
    height: 14px;
    background: #e0f2f1;
    color: #00695c;
    border-radius: 50%;
    text-align: center;
    line-height: 14px;
    font-size: 10px;
    margin-left: 5px;
    font-style: italic;
    font-family: serif;
    font-weight: bold;
}

.tooltip-text {
    visibility: hidden;
    width: 250px;
    background-color: #fff;
    color: #333;
    text-align: left;
    border-radius: 6px;
    padding: 10px;
    position: absolute;
    z-index: 1000;
    bottom: 125%;
    /* Position above */
    left: 50%;
    margin-left: -125px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    border: 1px solid #ddd;
    font-size: 11px;
    line-height: 1.4;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: normal;
}

.tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #fff transparent transparent transparent;
}

.tooltip-cell:hover .tooltip-text {
    visibility: visible;
}

/* Modal/Popup Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 400px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    position: relative;
    font-size: 12px;
}

.close-modal {
    color: #aaa;
    float: right;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
}

.close-modal:hover,
.close-modal:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.details-link {
    color: var(--primary-color);
    text-decoration: underline;
    cursor: pointer;
    font-size: 11px;
}

/* KPI Card Styles (Matching Main Indicators) */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 20px;
}

.kpi-card {
    background: white;
    padding: 15px 20px;
    border-radius: 4px;
    /* Standard radius */
    border: 1px solid #dcdcdc;
    /* Subtle border */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    /* Soft shadow */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100px;
    position: relative;
    transition: box-shadow 0.2s;
}

.kpi-card:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.kpi-title {
    font-size: 12px;
    color: #555;
    font-weight: 600;
    margin-bottom: 15px;
    line-height: 1.4;
    text-align: center;
}

.kpi-value {
    font-size: 26px;
    font-weight: 800;
    color: #333;
    text-align: center;
    margin: auto 0;
}

.info-bubble {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 16px;
    height: 16px;
    background: var(--primary-color);
    color: white;
    border-radius: 50%;
    font-size: 10px;
    line-height: 16px;
    text-align: center;
    cursor: help;
}

@media (max-width: 1200px) {
    .kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .kpi-grid {
        grid-template-columns: 1fr;
    }
}

/* Info Popup Styles */
.info-popup {
    display: none;
    position: absolute;
    top: 40px;
    /* Below the icon */
    left: auto;
    right: 0;
    z-index: 100;
    width: 320px;
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    padding: 15px;
    border-radius: 4px;
    text-align: left;
    font-size: 12px;
    line-height: 1.4;
    color: #333;
}

.info-popup.active {
    display: block;
}

.kpi-card {
    position: relative;
    /* Ensure popup positions relative to card */
}

.popup-close {
    position: absolute;
    top: 5px;
    right: 8px;
    cursor: pointer;
    font-size: 16px;
    color: #999;
    font-weight: bold;
}

.popup-close:hover {
    color: #333;
}

.popup-title {
    font-weight: bold;
    margin-bottom: 10px;
    padding-right: 15px;
}

.popup-calc-title {
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 5px;
}

/* Specific spacing for multi-line values in cards */
.kpi-sub-value {
    font-size: 14px;
    color: #333;
    margin: 4px 0;
    text-align: right;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.kpi-sub-label {
    color: #777;
    font-weight: normal;
    text-align: left;
    font-size: 12px;
    margin-right: 10px;
}

/* =========================================
   Redesigned Filter Styles (Financial Indicators)
   ========================================= */

/* Top Container */
.financial-filter-container {
    margin-bottom: 20px;
    background-color: transparent;
}

/* 1. Selected Tags Row */
.filter-tags-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 15px;
}

.filter-tag {
    background-color: var(--primary-dark);
    /* Simplex Brand Primary */
    color: white;
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

.tag-close {
    cursor: pointer;
    font-weight: bold;
    font-size: 14px;
    opacity: 0.8;
}

.tag-close:hover {
    opacity: 1;
}

/* 2. Modern Collapsible Filter Block */
.modern-filter-block {
    background-color: white;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.filter-block-header {
    background-color: #f5f7fa;
    padding: 10px 15px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid transparent;
    transition: background-color 0.2s;
}

.filter-block-header:hover {
    background-color: #e9ecef;
}

.filter-block-header span {
    font-weight: 600;
    color: #333;
    font-size: 13px;
}

.filter-toggle-icon {
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
    fill: none;
    stroke: #555;
    stroke-width: 2;
}

/* Open State */
.modern-filter-block.open .filter-block-header {
    border-bottom: 1px solid #e0e0e0;
}

.modern-filter-block.open .filter-toggle-icon {
    transform: rotate(180deg);
}

.filter-block-content {
    display: none;
    /* Hidden by default */
    padding: 20px 15px;
    background-color: white;
}

.modern-filter-block.open {
    overflow: visible;
    /* Allow dropdowns to spill out */
}

.modern-filter-block.open .filter-block-content {
    display: block;
}

/* Form Layout Grid */
.filter-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* 2 columns default */
    gap: 20px 30px;
    /* row col gap */
    margin-bottom: 20px;
}

@media (min-width: 1000px) {
    .filter-grid {
        grid-template-columns: repeat(2, 1fr);
        /* Keep 2 cols wide */
    }
}

/* Input Group Styles */
.filter-input-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
}

.filter-input-group>div {
    flex: 1;
    /* Ensure wrappers take remaining space */
}

.filter-label {
    font-size: 13px;
    color: #555;
    margin-bottom: 0;
    width: 35%;
    flex-shrink: 0;
    text-align: right;
    font-weight: 500;
}

.modern-input,
.modern-select {
    border: none;
    border-bottom: 1px solid #ccc;
    background-color: transparent;
    padding: 6px 0;
    font-size: 13px;
    width: 100%;
    outline: none;
    border-radius: 0;
    color: #333;
    transition: border-color 0.2s;
    flex: 1;
    /* Take remaining space */
}

.modern-input:focus,
.modern-select:focus {
    border-bottom-color: var(--primary-color);
}

/* Date Range Special Layout */
.date-range-group {
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    gap: 10px;
    align-items: center;
    flex: 1;
    /* Take remaining space */
}

.date-separator {
    color: #999;
    font-size: 18px;
    text-align: center;
    line-height: 30px;
}

/* Action Buttons */
.filter-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    border-top: 1px solid #eee;
    padding-top: 15px;
    margin-top: 5px;
}

.btn-filter-clear {
    background: transparent;
    color: var(--primary-color);
    border: none;
    font-size: 13px;
    cursor: pointer;
    font-weight: 500;
}

.btn-filter-search {
    background-color: var(--primary-dark);
    /* Match branding */
    color: white;
    border: none;
    padding: 8px 25px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.btn-filter-search:hover {
    background-color: #0d9488;
}

/* Inner Page Tabs */
.inner-tabs {
    display: flex;
    border-bottom: 1px solid #dcdcdc;
    margin-bottom: 20px;
}

.inner-tab {
    padding: 10px 20px;
    cursor: pointer;
    font-weight: 500;
    color: #555;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
}

.inner-tab:hover {
    color: var(--primary-color);
    background: #f7f9fc;
}

.inner-tab.active {
    color: var(--primary-color);
    border-bottom: 2px solid var(--primary-color);
    font-weight: 600;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* Enhanced Status Cells */
.status-cell {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.status-cell.success {
    background-color: #e6f7e6;
    color: #2e7d32;
    border: 1px solid #c8e6c9;
}

.status-cell.success:hover {
    background-color: #d4edda;
}

.status-cell.warning {
    background-color: #fff8e1;
    color: #f57c00;
    border: 1px solid #ffe0b2;
}

.status-cell.warning:hover {
    background-color: #ffecb3;
}

.status-cell.info {
    background-color: #e3f2fd;
    color: #0288d1;
    border: 1px solid #bbdefb;
}

.status-cell.info:hover {
    background-color: #bbdefb;
}

.status-cell .progress-tag {
    font-size: 10px;
    opacity: 0.8;
    background: rgba(0, 0, 0, 0.05);
    padding: 1px 4px;
    border-radius: 3px;
    font-weight: bold;
}

.status-cell .icon {
    font-weight: bold;
}

/* Enhanced Popup Elements */
.popup-actions {
    display: flex;
    gap: 8px;
    margin-top: 15px;
    border-top: 1px solid #eee;
    padding-top: 12px;
}

.btn-action-small {
    padding: 6px 10px;
    border: 1px solid var(--primary-color);
    border-radius: 4px;
    background: white;
    color: var(--primary-color);
    font-size: 11px;
    cursor: pointer;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s;
}

.btn-action-small:hover {
    background: #e0f2f1;
}

.btn-add-circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--primary-color);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    border: none;
    flex-shrink: 0;
    transition: all 0.2s;
}

.btn-add-circle:hover {
    background: var(--primary-dark);
    transform: scale(1.1);
}

.popup-doc-list {
    margin: 10px 0;
    padding: 0;
    list-style: none;
}

.popup-doc-item {
    padding: 6px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    border-bottom: 1px dashed #eee;
}

.popup-doc-item:last-child {
    border-bottom: none;
}

.popup-doc-item a {
    color: var(--primary-color);
    text-decoration: none;
}

.popup-doc-item a:hover {
    text-decoration: underline;
}

.status-info-text {
    font-size: 12px;
    color: #555;
    line-height: 1.4;
    margin-bottom: 10px;
}

.doc-link {
    color: var(--primary-dark);
    text-decoration: underline;
    cursor: pointer;
    font-size: 11px;
    display: block;
    margin-top: 4px;
}

.doc-link:hover {
    color: var(--primary-color);
}