/* =====================================================
   ADMIN ÜGYFÉLSOR LENYITÁS ÉS ESZKÖZLISTA
   - Ügyfélsor lenyitó gomb megjelenítése
   - Ügyfélhez tartozó eszköztábla elrendezése
   - Feature és licenc badge-ek
   - Online / offline / ismeretlen eszközállapot
   - Presence időpont megjelenítése
   - „+ Eszköz hozzáadása” terület
   - Reszponzív eszközlista
===================================================== */

.admin-customer-block {
    border-bottom: 1px solid #182630;
}

.admin-customer-toggle {
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #f4f7f9;
    font-size: 16px;
    cursor: pointer;
}

.admin-customer-toggle:hover {
    background: #12212b;
}

.admin-customer-toggle-right {
    justify-self: end;
}

.admin-customer-devices {
    padding: 0 36px;
    background: #0a141b;
}

.admin-device-table {
    border-left: 1px solid #1e303b;
    border-right: 1px solid #1e303b;
    border-bottom: 1px solid #1e303b;
}

.admin-device-grid {
    display: grid;
    grid-template-columns:
        minmax(120px, 0.9fr)
        minmax(120px, 1fr)
        minmax(120px, 1fr)
        minmax(100px, 0.8fr)
        minmax(100px, 0.8fr)
        minmax(320px, 2.2fr)
        minmax(100px, 0.8fr)
        minmax(110px, 0.8fr);
    align-items: center;
}

.admin-device-head {
    min-height: 40px;
    background: #16232c;
    color: #c9d2d8;
    font-size: 13px;
    font-weight: 600;
}

.admin-device-head > div,
.admin-device-row > div {
    padding: 10px 12px;
    box-sizing: border-box;
}

.admin-device-row {
    min-height: 66px;
    background: #0b171f;
    color: #dce4e9;
    font-size: 13px;
    border-top: 1px solid #182832;
}

.admin-device-id {
    font-weight: 700;
    color: #ffffff;
}

.admin-feature-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.admin-feature-badge {
    min-width: 42px;
    padding: 5px 7px;
    border: 1px solid #243640;
    border-radius: 5px;
    background: #1a2831;
    color: #7f8c94;
    font-size: 11px;
    text-align: center;
    box-sizing: border-box;
}

.admin-feature-badge.active {
    background: #e6b900;
    border-color: #f0c600;
    color: #101010;
    font-weight: 700;
}

.admin-license-badge,
.admin-device-status {
    display: inline-block;
    padding: 5px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

.admin-license-badge.active {
    background: rgba(31, 170, 88, 0.16);
    color: #56d98b;
}

.admin-license-badge.inactive {
    background: rgba(181, 63, 63, 0.15);
    color: #dc7777;
}

.admin-device-status.online {
    background: rgba(31, 170, 88, 0.16);
    color: #56d98b;
}

.admin-device-status.offline {
    background: rgba(181, 63, 63, 0.15);
    color: #dc7777;
}

.admin-device-status.suspended {
    background: rgba(232, 195, 113, 0.16);
    color: #e8c371;
}

.admin-device-status.unknown {
    background: #1b2831;
    color: #87959d;
}

.admin-device-presence {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.admin-device-presence-time {
    min-height: 14px;
    color: #7f8d95;
    font-size: 10px;
    line-height: 1.2;
    white-space: nowrap;
}

.admin-device-loading,
.admin-device-empty,
.admin-device-error {
    padding: 18px 14px;
    color: #8d9aa2;
    font-size: 13px;
}

.admin-device-error {
    color: #e48282;
}

@media (max-width: 1200px) {
    .admin-customer-devices {
        overflow-x: auto;
    }

    .admin-device-table {
        min-width: 1180px;
    }
}

/* =====================================================
   ADMIN ESZKOZ HOZZAADAS GOMB HELYE
   A gomb megjeleneset az admin.css meglevo admin-create-* stilusai adjak.
===================================================== */

.admin-device-create-area {
    padding: 12px 14px 14px;
}


/* Felfuggesztes idopontja kulon DOM elem, hogy a realtime presence
   frissites csak az Online / Offline timestampet modositsa. */
.admin-device-suspended-time {
    min-height: 14px;
    color: #7f8d95;
    font-size: 10px;
    line-height: 1.2;
    white-space: nowrap;
}