/* ==========================================================
   LJH RIGHT UI
   Högerkolumn – Status & Informationsmoduler
   Apple Dark Aqua 2000
   Version 1.0
========================================================== */

/* ----------------------------------------------------------
   WRAPPER
---------------------------------------------------------- */

.ljh-right {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ----------------------------------------------------------
   GENERELL MODUL
---------------------------------------------------------- */

.ljh-right-module {
    background: rgba(20, 28, 36, 0.85);
    backdrop-filter: blur(14px) saturate(160%);
    border-radius: 14px;
    padding: 12px 14px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 8px 18px rgba(0,0,0,0.35);
    color: #e6eaf0;
}

/* ----------------------------------------------------------
   HEADER
---------------------------------------------------------- */

.ljh-right-header {
    margin-bottom: 8px;
}

.ljh-right-title {
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    opacity: 0.95;
}

/* ----------------------------------------------------------
   CONTENT
---------------------------------------------------------- */

.ljh-right-content {
    font-size: 0.85rem;
}

.ljh-right-muted {
    opacity: 0.6;
    font-style: italic;
}


/* ----------------------------------------------------------
   EMPLOYEES ONLINE
---------------------------------------------------------- */

.ljh-employee-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ljh-employee {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
}

/* Namn */
.ljh-employee-name {
    font-weight: 500;
}

/* Textstatus (Jobbar / Paus / Offline) */
.ljh-employee-state {
    margin-left: auto;
    font-size: 0.75rem;
    opacity: 0.75;
}

/* ----------------------------------------------------------
   STATUS DOT
---------------------------------------------------------- */

.ljh-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;

    box-shadow:
        0 0 0 1px rgba(0,0,0,0.6),
        inset 0 1px 2px rgba(255,255,255,0.4);
}

/* 🟢 Jobbar */
.status-working .ljh-status-dot {
    background: radial-gradient(circle at 30% 30%, #7dffd0, #00c98b);
    box-shadow:
        0 0 6px rgba(0, 255, 170, 0.6),
        inset 0 1px 2px rgba(255,255,255,0.5);
}

/* 🟠 Paus */
.status-break .ljh-status-dot {
    background: radial-gradient(circle at 30% 30%, #ffd58a, #ff9f1c);
    box-shadow:
        0 0 6px rgba(255, 170, 0, 0.6),
        inset 0 1px 2px rgba(255,255,255,0.5);
}

/* 🔴 Offline */
.status-offline .ljh-status-dot {
    background: radial-gradient(circle at 30% 30%, #ff9b9b, #ff3b3b);
    box-shadow:
        0 0 6px rgba(255, 80, 80, 0.6),
        inset 0 1px 2px rgba(255,255,255,0.5);
}

/* ⚪ Ledig */
.status-leave .ljh-status-dot {
    background: radial-gradient(circle at 30% 30%, #d0d5db, #8e949c);
    box-shadow:
        inset 0 1px 2px rgba(255,255,255,0.5);
}


/* --------------------------------------
    --- Glasbricka med information ---
-------------------------------------- */
.admin-side-card {
    backdrop-filter: blur(14px) saturate(160%);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 14px;
}

.ljh-glass-card {
    background: rgba(255,255,255,0.06);
    border-radius: 10px;
    padding: 10px;
    margin-top: 8px;
}

.ljh-glass-card.type-ad {
    box-shadow: 0 0 12px rgba(255, 140, 0, 0.6);
}