.wl-wrapper {
            padding: 10px;
            background: #f9f9f9;
            border-radius: 8px;
            max-width: 800px;
            margin: auto;
        }

        .wl-header {
            display: flex;
            gap: 10px;
            align-items: center;
            margin-bottom: 15px;
        }

        .wl-days-container {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .wl-day-row {
            background: #fff;
            border: 1px solid #ccc;
            padding: 8px;
            width: 120px;
            border-radius: 6px;
            text-align: center;
            font-size: 13px;
        }

        .wl-hours-input {
            margin-top: 5px;
            width: 30px;
            text-align: center;
        }

        .wl-row {
            display: flex;
            align-items: flex-end;
            gap: 20px;
            flex-wrap: wrap;
            margin-top: 12px;
            text-align: left; /* или center – според нуждите */
        }

        .wl-field-wrapper {
            display: flex;
            flex-direction: column;
            position: relative;
        }

        .wl-field-pair {
            display: flex;
            gap: 5px;
            align-items: center;
        }

        .wl-value1 {
            font-size: 0.85em;
            color: #666; /* сиво за по-слаба визуална тежест */
            font-weight: normal;
        }

        .wl-value2 {
            font-size: 1.1em;
            color: #007BFF; /* ярко синьо (може да се смени) */
            font-weight: bold;
        }

        .wl-field {
            text-align: left;
        }

       .wl-label {
           display: block;
           font-weight: bold;
           margin-bottom: 4px; /* <– тук е ключът */
           margin-top: 6px;
           text-align: left;
       }

        .wl-year-input-container {
            position: relative;
            width: 140px;
        }

        .wl-year-input {
            width: 100%;
            height: 44px;
            padding: 10px 50px 10px 14px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 4px;
            outline: none;
            font-family: inherit;
            box-sizing: border-box;
        }

        .wl-year-buttons {
            position: absolute;
            top: 0;
            right: 0;
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        .wl-year-buttons button {
            background-color: #007baf;
            color: #fff;
            border: none;
            width: 44px;
            height: 22px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            cursor: pointer;
        }

        .wl-year-buttons button:first-child {
            border-top-right-radius: 4px;
        }

        .wl-year-buttons button:last-child {
            border-bottom-right-radius: 4px;
        }

        .wl-month-dropdown-wrapper {
            position: relative;
            width: 140px;
        }

        .wl-month-dropdown {
            width: 100%;
            padding: 10px 40px 10px 14px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 16px;
            background-color: white;

            cursor: pointer;
            height: 44px;
            box-sizing: border-box;
            font-family: inherit;
        }

        .wl-month-dropdown-button {
            position: absolute;
            top: 0;
            right: 0;
            width: 44px;
            height: 100%;
            background-color: #007baf;
            color: white;
            border-top-right-radius: 4px;
            border-bottom-right-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: none;
            font-size: 16px;
            z-index: 2;
        }

        .wl-show-button {
            background-color: #28a745;
            color: #fff;
            border: none;
            padding: 10px 14px;
            font-size: 16px;
            cursor: pointer;
            border-radius: 4px;
            height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: inherit;
        }

        .wl-show-button:hover {
            background-color: #218838;
        }

        .wl-show-button:active {
            background-color: #1e7e34;
        }

        .wl-month-dropdown-container {
            position: relative;
            width: 140px;
        }

        /* Клетки за дни */
        .wl-day-cell {
            display: flex;
            justify-content: space-between; /* число в ляво, инпут вдясно */
            align-items: center;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            /* махаме text-align: center; */
        }

        /* Скрит текстов лейбъл, ако има нужда да се запази достъпността */
        .wl-day-cell .day-number {
            font-size: 2em;       /* 2× по-голям текст */
            color: #007baf;       /* синьо */
            margin: 0;            /* отпада display:block и margin-bottom */
            margin-right: 8px;    /* разстояние до input */
        }

        /* Поле за въвеждане */
        .wl-day-cell .wl-hours-input {
            width: 2em;           /* по-широко поле */
            font-size: 1.2em;     /* по-едра буква */
            text-align: center;   /* центриране на цифрата в полето */
            padding: 4px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        /* Празни клетки преди/след месеца */
        .empty-cell {
            background: transparent;
            border: none;
        }

        /* По-малък шрифт за placeholder в полето за часове */
        .wl-day-cell .wl-hours-input::placeholder {
            font-size: 0.5em;
        }

        /* Уикенд (събота и неделя) */
        .wl-day-cell.weekend-cell {
            background-color: #ffe5ec; /* нежнорозово */
        }

        /* Делнични дни, където няма въведени часове */
        .wl-day-cell.no-hours-cell {
            background-color: #e6f9e6; /* нежнозелено */
        }

        /* Делнични дни, където има въведени часове */
        .wl-day-cell.has-hours-cell {
            background-color: #cce5ff; /* светлосиньо */
        }

        .wl-button {
            padding: 6px 16px;
            font-size: 14px;
            border: 1px solid #007baf;
            background-color: #007baf;
            color: white;
            border-radius: 4px;
            cursor: pointer;
            width: auto;       /* ⬅️ не е 100% */
            display: inline-block;
        }

        .wl-button:hover {
            background-color: #005f87;
        }

        .wl-button-reset {
            background-color: #cccccc;
            border-color: #999999;
            color: #333;
        }

        .wl-button-reset:hover {
            background-color: #bbbbbb;
        }

        .wl-list-container {
            background-color: #f1f1f1;
            border-radius: 8px;
            padding: 10px;
            margin-top: 10px;
            width: 100%;
            min-width: 600px;
            overflow-x: auto;
        }

        .wl-list-header,
        .wl-list-row {
            display: grid;
            grid-template-columns: 40px 80px 1fr 200px 100px;
            padding: 5px 10px;
            align-items: center;
            text-align: left;
            min-width: 600px;
        }

        .wl-list-header {
            font-weight: bold;
            background-color: #f0f0f0;
        }

        .wl-list-header > div,
        .wl-list-row > div {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .wl-list-row.even {
            background-color: #ffffff;
        }

        .wl-list-row.odd {
            background-color: #e9ecef;
        }

        .wl-list-row > div {
            font-size: 12px;
        }

        .wl-list-row > div:first-child {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .wl-list-row input[type="checkbox"] {
            width: 16px;
            height: 16px;
        }

        .wl-list-row > div:nth-child(-n+2) {
            text-align: left;
        }

        .days-container {
            margin-top: 20px;
            padding: 10px;
            background-color: #f9f9f9;
            border-radius: 8px;
        }

        .day-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
        }

        .day-row label {
            font-weight: bold;
        }

        .day-row input[type="number"] {
            width: 80px;
            padding: 5px;
            border-radius: 5px;
            border: 1px solid #ccc;
        }

        #days-container {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 8px;
            margin-top: 16px;
        }

        /* Заглавия на колоните */
        .weekday-header {
            padding: 8px;
            text-align: center;
            border: 1px solid #ddd;
            border-radius: 4px;
            background: #f5f5f5;
            font-weight: bold;
        }



       .wl-day-cell {
           position: relative;
           padding: 5px;
           box-sizing: border-box;
       }

       .day-number {
           display: block;
           font-weight: bold;
           margin-bottom: 5px;
       }

       .wl-hours-input {
           width: 30px;
           text-align: center;
       }

       .wl-day-cell {
           position: relative;
           padding: 5px 25px 5px 5px;
           box-sizing: border-box;
       }

       .day-number {
           display: block;
           font-weight: bold;
           margin-bottom: 5px;
       }

       .wl-hours-input {
           width: 30px;
           text-align: center;
           margin-top: 5px;    /* ако искаш малко разстояние от деня */
       }

       .clear-hours-btn {
           position: absolute;
           top: 3px;
           right: 3px;
           background: none;
           border: none;
           color: red;
           font-size: 14px;
           cursor: pointer;
           visibility: hidden;
       }

       .wl-day-cell.has-hours-cell .clear-hours-btn {
           visibility: visible;
       }

       .wl-char-counter {
           font-size: 12px;
           color: #666;
       }

       .wl-label-wrapper {
           display: flex;
           justify-content: space-between;
           align-items: center;
           margin-bottom: 4px;
           width: 100%;
       }

       .wl-char-count {
           font-size: 12px;
           color: #666;
       }

       .wl-row-textarea {
           margin-top: 20px;
           display: block;
           width: 100%;
       }

       .wl-select {
           width: 100%;
           box-sizing: border-box;
           border-radius: 4px;
       }





       .wl-eq-dropdown-container {
           position: relative;
           width: 100%;
       }

       .wl-eq-dropdown {
           width: 100%;
           padding: 10px 40px 10px 14px;
           border: 1px solid #ccc;
           border-radius: 4px;
           font-size: 16px;
           background-color: white;
           cursor: pointer;
           height: 44px;
           box-sizing: border-box;
           font-family: inherit;
       }

       .wl-eq-dropdown-button {
           position: absolute;
           top: 0;
           right: 0;
           width: 40px;
           height: 100%;
           background-color: #007baf;
           color: white;
           border-top-right-radius: 4px;
           border-bottom-right-radius: 4px;
           display: flex;
           align-items: center;
           justify-content: center;
           pointer-events: none; /* За да не пречи на селекта */
           font-size: 16px;
           z-index: 2;
       }

       .wl-truncate {
           display: block;
           width: 100%;
           overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap;
       }

       .wl-count-container {
           margin: 20px auto;
           padding: 10px;
           width: 100%;
           min-width: 600px;
       }

       .wl-count-container2 {
           width: 100%;
           min-width: 600px;
       }

       .wl-count-header {
           display: flex;
           align-items: center;
       }

       .wl-count-highlight-box {
           background-color: #f0f9ff;
           display: grid;
           grid-template-columns: auto 1fr;
           row-gap: 5px;
           column-gap: 5px;
           padding: 5px;
           border-radius: 6px;
           width: 100%;
           margin-bottom: 10px;
           border: 1px solid #a6d7ff;
       }

       .wl-count-warning {
           background-color: #ffecec;
           display: grid;
           grid-template-columns: auto 1fr;
           row-gap: 5px;
           column-gap: 5px;
           padding: 5px;
           border-radius: 6px;
           width: 100%;
           margin-bottom: 10px;
       }

       .wl-count-approved-lab {
           background-color: #e6ffed;
           border: 1px solid #a0d8b3;
           display: grid;
           grid-template-columns: auto 1fr;
           row-gap: 5px;
           column-gap: 5px;
           padding: 5px;
           border-radius: 6px;
           width: 100%;
           margin-bottom: 10px;
       }

       .wl-count-approved-project {
           background-color: #e6f4ff;
           border: 1px solid #99cfff;
           display: grid;
           grid-template-columns: auto 1fr;
           row-gap: 5px;
           column-gap: 5px;
           padding: 5px;
           border-radius: 6px;
           width: 100%;
           margin-bottom: 10px;
       }

       .wl-count-highlight-box1 {
           text-align: left;
           font-size: 12px;
           color: #333;
       }

       .wl-count-highlight-box2 {
           text-align: left;
           font-size: 12px;
           color: #1a73e8;
           font-weight: 600;
       }

       .wl-count-highlight-box3 {
           text-align: left;
           font-size: 12px;
           color: #1a73e8;
           font-weight: 600;
       }

       .wl-tooltip-msg {
           position: absolute;
           top: 100%;
           left: 0;
           background: #ffe5ec;
           color: #007baf;
           padding: 4px 8px;
           border-radius: 4px;
           font-size: 12px;
           z-index: 100;
           margin-top: 4px;
           box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
           white-space: nowrap;
           opacity: 1;
           transition: opacity 0.5s ease;
       }

       .wl-tooltip-msg.fade-out {
           opacity: 0;
       }

       @keyframes wl-fade-in-out {
           0% { opacity: 0; transform: translateY(-5px); }
           10% { opacity: 1; transform: translateY(0); }
           90% { opacity: 1; transform: translateY(0); }
           100% { opacity: 0; transform: translateY(-5px); }
       }

       .wl-month-box {
           width: 40px;
           height: 40px;
           background-color: #f1f1f1;
           color: #333;
           text-align: center;
           line-height: 35px;
           font-weight: bold;
           border-radius: 4px;
           border: 1px solid #ccc;
           user-select: none;
           font-size: 14px;
       }

       .wl-field {
           display: flex;
           align-items: center;
           justify-content: space-between;
       }

       /* Добавя разстояние между етикети и input/бутон */
       label {
           margin-right: 6px;
       }

       /* Разделя полетата */
       .wl-field select,
       .wl-field input,
       .wl-show-button {
           margin-right: 8px;
       }

       /* Подравняване и отстояние */
       .wl-field {
           display: flex;
           align-items: center;
           margin-bottom: 15px;
       }

       .wl-month-indicators button {
           min-width: 52px;
           height: 38px;
           font-size: 1rem;
           padding: 0 10px;
           border-radius: 6px;
           border: 1px solid #ccc;
           background-color: #f8f8f8;
           cursor: pointer;
           transition: background-color 0.2s;
           box-sizing: border-box;
       }

       .wl-month-indicators button:hover {
           background-color: #e6e6e6;
       }

       .wl-month-indicators {
           display: flex;
           gap: 8px;
           flex-wrap: wrap;
           justify-content: center;
           margin-top: 10px;
       }

       .wl-month-box {
           transition: transform 0.2s, box-shadow 0.2s;
       }

       .wl-month-box:hover {
           transform: scale(1.05);
           box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
       }

       .wl-month-box[title] {
           cursor: help;
       }

       .collapsible-content {
           overflow: hidden;
           max-height: 0;
           transition: max-height 0.4s ease;
       }
       .collapsible-content.hidden {
           max-height: 0;
       }
       .collapsible-content.visible {
           max-height: 1000px;
       }

       .wl2-user-wrapper {
           display: flex;
           flex-direction: column;
       }

       .wl2-user-header {
           display: flex;
           align-items: center;
           cursor: pointer;
           gap: 10px;
       }

       .wl2-name,
       .wl2-role {
           font-weight: bold;
       }

       .wl2-collapsible-content {
           overflow: hidden;
           max-height: 0;
           transition: max-height 0.4s ease;
       }

       .wl2-collapsible-content.wl2-hidden {
           max-height: 0;
       }

       .wl2-collapsible-content.wl2-visible {
           max-height: 1000px; /* или колкото е нужно */
       }

       .wl2-label {
           display: inline-block;
           font-weight: 600;
           margin-right: 5px;
       }

       .wl2-value {
           display: inline-block;
           margin-bottom: 8px;
       }

       .wl2-count-header {
           padding: 10px 0;
       }

       .wl2-eye-button {
           width: 40px;
           height: 40px;
           background-color: #007baf;
           color: white;
           border-radius: 6px;
           display: flex;
           align-items: center;
           justify-content: center;
           font-size: 20px;
           border: none;
           cursor: pointer;
           transition: background-color 0.3s ease;
       }

       .wl2-eye-button i {
           margin: 0;
           padding: 0;
           display: block; /* или inline-flex */
           width: 100%;
           text-align: center;
       }

       .wl2-eye-button:hover {
           background-color: #005f8a;
       }

       .wl2-accept-button {
           background-color: #28a745; /* зелен */
           color: white;
       }

       .wl2-reject-button {
           background-color: #dc3545; /* червен */
           color: white;
       }

       .wl-days-table {
           border-collapse: collapse;
           width: 100%;
           table-layout: fixed;
           margin-top: 6px;
           font-size: 13px;
       }

       .wl-days-table th,
       .wl-days-table td {
           border: 1px solid #ccc;
           padding: 4px;
           text-align: center;
       }

       .wl-days-table th {
           background-color: #f2f2f2;
           font-weight: bold;
       }

       .wl-days-table td.has-hours {
           background-color: #b3e6ff;
           font-weight: bold;
           color: #000;
       }

       .wl-days-table td.weekend {
           background-color: #f8d7da;
           color: #842029;
           font-weight: bold;
       }

       .wl2-accept-button:disabled,
       .wl2-accept-button[disabled]
       .wl2-reject-button:disabled,
       .wl2-reject-button[disabled] {
           background: #d9d9d9;
           border-color: #d9d9d9;
           color: #666;
           cursor: not-allowed;
           box-shadow: none;
           opacity: 1;
       }



       /* Статус 0 – липсва отчет или не е подаден */
       .wl-status-0 {
           background-color: #ffe5ec;
           color: #990f3d;
           border: 1px solid #f5c2d7;
       }

       /* Статус 1 – отчетите са подадени */
       .wl-status-1 {
           background-color: #f0f8ff;
           color: #003366;
           border: 1px solid #99cfff;
       }

       /* Статус 2 – одобрени от ръководител лаборатория */
       .wl-status-2 {
           background-color: #e6f4ea;
           color: #265f46;
           border: 1px solid #b5dfc5;
       }

       /* Статус 3 – предадени към ръководител проект */
       .wl-status-3 {
           background-color: #f3f0fa;
           color: #4b3c74;
           border: 1px solid #c8bce4;
       }

       .pub-user-wrapper {
           display: flex;
           flex-direction: column;
       }