/* --- Dodatkowy design polish ponad Tailwinda --- */

        /* chipy filtrów – aktywny vs nieaktywny */
        .filter-chip[data-active="true"] {
            border-color: rgb(59 130 246 / 0.9);   /* blue-500 */
            background: linear-gradient(135deg, #dbeafe, #eff6ff); /* blue-100 -> blue-50 */
            color: rgb(30 64 175);                 /* blue-800 */
            box-shadow: 0 10px 20px -12px rgba(37, 99, 235, 0.45);
        }

        .filter-chip[data-active="false"] {
            border-color: rgb(226 232 240);        /* slate-200 */
            background-color: rgb(255 255 255);    /* white */
            color: rgb(71 85 105);                 /* slate-600 */
        }

        .filter-chip {
            transition: all 0.18s ease-out;
        }

        .filter-chip:hover {
            transform: translateY(-1px);
        }

        .filter-chip:active {
            transform: translateY(0);
            box-shadow: none;
        }

        /* ładny scroll w tabeli */
        .app-scrollbar::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        .app-scrollbar::-webkit-scrollbar-track {
            background: #f1f5f9; /* slate-100 */
        }

        .app-scrollbar::-webkit-scrollbar-thumb {
            background: rgba(148, 163, 184, 0.7); /* slate-400 */
            border-radius: 999px;
        }

        .app-scrollbar::-webkit-scrollbar-thumb:hover {
            background: rgba(100, 116, 139, 0.9); /* slate-500 */
        }

        /* delikatny “pill” dla inputa kalendarza – bez ramki kontenera */
        .date-pill {
            border-radius: 999px;
            background: #ffffff;
            padding-inline: 0.9rem;
            padding-block: 0.45rem;
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            box-shadow: 0 12px 30px -18px rgba(15, 23, 42, 0.45);
        }

        .date-pill input {
            border: none;
            border-bottom: 1px solid transparent;
            padding: 0;
        }

        .date-pill input:focus {
            outline: none;
            border-bottom-color: rgb(59 130 246); /* blue-500 */
        }

        #attendance-edit-dialog {
            width: min(36rem, calc(100vw - 2rem));
            max-height: calc(100dvh - 2rem);
            margin: auto;
            border: 0;
        }

        #attendance-edit-dialog::backdrop {
            background: rgba(15, 23, 42, 0.55);
        }
    

/* Original monthly-report visibility rule, used by the host alongside presence CSS. */

    .js-hidden {
        display: none !important;
    }