/* KARTA WIDGETU */
.toggler-table-card {
    --row-h: 50px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* KONTENER TABELI – TU JEST SCROLL */
.tbl-wrap {
    flex: 1;
    min-height: 0; /* ważne przy małej wysokości widgetu */
    overflow-y: auto; /* pionowy scroll */
}

/* TABELA */
.lights-table {
    /* height: 100%;  <-- już niepotrzebne */
    width: 100%;
    border-collapse: collapse;
    font-size: clamp(8px, 2.5vh, 36px);
    table-layout: fixed;
}

/* sticky header */
.lights-table thead th {
    position: sticky;
    top: 0;
    padding: 0.1rem 0.25rem;
    background-color: #111111;
    color: #00E5E2;
    font-size: 1rem;
    font-weight: 300;
    z-index: 2;
}

/* STAŁA WYSOKOŚĆ WIERSZY (opcjonalne) */
.lights-table tbody tr {
    height: var(--row-h);
}

/* KOMÓRKI */
.lights-table th,
.lights-table td {
     padding: 1px 1px;
     border-bottom: 1px solid #e5e7eb;
}

/* KOLUMNA Z NAZWĄ – ŁAMANIE DŁUGICH NAZW */
.lights-table td.name {
     white-space: normal;
     word-break: break-word;
     overflow-wrap: anywhere;
     max-width: 200px; /* możesz zmienić */
}

/* SZEROKOŚCI KOLUMN (opcjonalnie przez klasy, jak w HTML) */
.idx {
    width: 10%;
}

.name {
    width: 50%;
}

.status {
    width: 20%;
}

.brightness {
    width: 20%;
}

/* ---- PONIŻSZE DOTYCZY LISTY "APPLY" – BEZ ZMIAN W LOGICE ---- */

/* kontener listy */
.apply-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

/* pojedynczy wiersz: checkbox + tekst obok */
.apply-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
}

/* lewa kolumna: checkbox */
.apply-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin-top: 4px; /* wyrównanie z tytułem */
}

/* prawa kolumna: tekst */
.apply-text {
    flex: 1;
    min-width: 0;
}

.apply-title { /* alias (edytowalny) */
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.2;
}

.label-btn {
    background: transparent;
    border: 0;
    padding: 0;
    font: inherit;
    font-weight: 600;
    text-align: left;
    cursor: text;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.label-input {
    width: 100%;
    padding: 4px 6px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 1rem;
    box-sizing: border-box;
}

.apply-subtitle { /* Original: ... */
    font-size: .85rem;
    color: #6b7280;
    margin-top: 2px;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.apply-meta { /* entity_id */
    font-size: .75rem;
    color: #9ca3af;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* WYSZARZENIE, gdy checkbox odznaczony */
.apply-item.is-off .label-btn,
.apply-item.is-off .apply-title,
.apply-item.is-off .apply-subtitle,
.apply-item.is-off .apply-meta {
    color: #9ca3af !important; /* przygaszone kolory */
    opacity: .7;
}





/* === MEDIA === */

/* Mobile  */

@media (max-width: 699px) {
    .lights-table thead th, .lights-table th, .lights-table td {
        font-size: 0.85rem;
        padding: 0.2rem 0.5rem;
    }
}

/* WVGA / WVGA-Narrow (720x480, 800x480) */

@media (min-width: 700px) and (max-width: 880px) {
}

/* WSVGA / XGA (1024x600, 1024x768) */

@media (min-width: 881px) and (max-width: 1150px) {
    .lights-table thead th, .lights-table th, .lights-table td {
        font-size: 0.85rem;
        padding: 0.2rem 0.5rem;
    }
}

/* WXGA / HD720 / SXGA (1280x720/800/1024) */

@media (min-width: 1151px) and (max-width: 1600px) {
    .lights-table thead th, .lights-table th, .lights-table td {
        font-size: 0.85rem;
        padding: 0.2rem 0.5rem;
    }
}

/* HD / WUXGA (1920x1080, 1920x1200) */

@media (min-width: 1601px) and (max-width: 2879px) {
    /* standard styles */
}

/* 4K (3840x2160) */

@media (min-width: 2880px) {

    .lights-table thead th, .lights-table th, .lights-table td {
        font-size: 1.75rem;
        padding: 0.1rem 0.5rem;
    }
}

/* Low height */

@media (min-width: 1000px) and (max-height: 650px) {
    .lights-table thead th {
        padding-left: 0.25rem;
        text-align: left;
    }

    .lights-table thead th, .lights-table th, .lights-table td {
        font-size: 0.75rem;
    }
}

/* Override for 1024x600 */

@media (width: 1024px) and (height: 600px) {

    .lights-table thead th {
        padding-left: 0.25rem;
        text-align: left;
    }

    .lights-table thead th, .lights-table th, .lights-table td {
        font-size: 0.75rem;
    }
}