/* ============================================================
   SERAM PAGE — PERSONNEL MONITOR
   Canonical page styles. Moved out of global ws-remote.css.
   ============================================================ */

/* ======================================================
   WORKSERVER — МОНИТОР ПЕРСОНАЛА
   ====================================================== */
.ws-personnel-monitor{
    --pm-bg:#020617;
    --pm-panel:#07101f;
    --pm-panel-2:#0b1423;
    --pm-border:#22c55e;
    --pm-cyan:#00e5ff;
    --pm-green:#22c55e;
    --pm-yellow:#facc15;
    --pm-red:#ef4444;
    --pm-text:#e5e7eb;
    --pm-muted:#94a3b8;
    color:var(--pm-text);
    display:grid;
    gap:18px;
}

.ws-personnel-head,
.ws-personnel-controls,
.ws-personnel-summary,
.ws-personnel-table-card{
    background:var(--pm-bg);
    border:1px solid rgba(34,197,94,.7);
    border-radius:14px;
    box-shadow:0 12px 32px rgba(0,0,0,.22);
}

.ws-personnel-head{
    padding:22px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}

.ws-personnel-kicker{
    color:var(--pm-cyan);
    font-size:12px;
    font-weight:800;
    letter-spacing:1.6px;
    margin-bottom:7px;
}

.ws-personnel-head h2{
    margin:0 0 7px;
    padding:0;
    border:0;
    color:var(--pm-text);
    font-size:24px;
    line-height:1.25;
}

.ws-personnel-head p{
    margin:0;
    color:var(--pm-muted);
    font-size:14px;
}

.ws-personnel-status{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:9px;
    padding:10px 13px;
    border:1px solid rgba(0,229,255,.35);
    border-radius:999px;
    color:#bae6fd;
    background:rgba(0,229,255,.06);
    font-size:13px;
    font-weight:700;
    white-space:nowrap;
}

.ws-personnel-status-dot{
    width:9px;
    height:9px;
    border-radius:50%;
    background:var(--pm-cyan);
    box-shadow:0 0 10px rgba(0,229,255,.8);
}

.ws-personnel-status.is-loading .ws-personnel-status-dot{
    animation:ws-pm-pulse 1.1s infinite;
}
.ws-personnel-status.is-ok{
    color:#bbf7d0;
    border-color:rgba(34,197,94,.55);
    background:rgba(34,197,94,.08);
}
.ws-personnel-status.is-ok .ws-personnel-status-dot{background:var(--pm-green);}
.ws-personnel-status.is-error{
    color:#fecaca;
    border-color:rgba(239,68,68,.55);
    background:rgba(239,68,68,.08);
}
.ws-personnel-status.is-error .ws-personnel-status-dot{background:var(--pm-red);box-shadow:0 0 10px rgba(239,68,68,.7);}

.ws-personnel-controls{
    padding:18px;
    display:grid;
    grid-template-columns:repeat(2,minmax(150px,.8fr)) repeat(2,minmax(190px,1.2fr));
    gap:14px;
    align-items:end;
}

.ws-personnel-field{
    display:flex;
    flex-direction:column;
    gap:7px;
    margin:0;
}

.ws-personnel-field > span{
    color:var(--pm-cyan);
    font-size:13px;
    font-weight:700;
}

.ws-personnel-monitor input[type="date"],
.ws-personnel-monitor input[type="text"],
.ws-personnel-monitor select{
    width:100%;
    min-height:42px;
    box-sizing:border-box;
    padding:9px 11px;
    border:1px solid #1e293b;
    border-radius:9px;
    outline:none;
    background:#050b16;
    color:var(--pm-text);
    font-size:14px;
    font-weight:600;
    box-shadow:none;
}

.ws-personnel-monitor input:focus,
.ws-personnel-monitor select:focus{
    border-color:var(--pm-cyan);
    box-shadow:0 0 0 2px rgba(0,229,255,.08);
}

.ws-personnel-actions{
    grid-column:1/-1;
    display:flex;
    justify-content:flex-end;
    gap:10px;
    padding-top:2px;
}

.ws-personnel-btn{
    min-height:42px;
    border:0;
    border-radius:9px;
    padding:10px 18px;
    cursor:pointer;
    font-size:14px;
    font-weight:800;
    transition:.18s ease;
}
.ws-personnel-btn:hover{transform:translateY(-1px);}
.ws-personnel-btn:disabled{opacity:.55;cursor:wait;transform:none;}
.ws-personnel-btn-primary{background:var(--pm-green);color:#031008;}
.ws-personnel-btn-secondary{background:var(--pm-cyan);color:#001014;}

.ws-personnel-summary{
    padding:14px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
}

.ws-personnel-stat{
    background:rgba(255,255,255,.025);
    border:1px solid #172033;
    border-radius:11px;
    padding:13px 15px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}
.ws-personnel-stat-label{color:var(--pm-muted);font-size:13px;font-weight:650;}
.ws-personnel-stat strong{font-size:22px;color:var(--pm-text);}
.ws-personnel-stat-good strong{color:var(--pm-green);}
.ws-personnel-stat-warn strong{color:var(--pm-yellow);}
.ws-personnel-stat-bad strong{color:var(--pm-red);}

.ws-personnel-table-card{overflow:hidden;}
.ws-personnel-table-scroll{overflow:auto;max-width:100%;}
.ws-personnel-table{
    width:100%;
    min-width:1040px;
    border-collapse:separate;
    border-spacing:0;
    margin:0;
    background:transparent;
    color:var(--pm-text);
    font-size:13px;
}
.ws-personnel-table th,
.ws-personnel-table td{
    padding:11px 12px;
    border-right:1px solid rgba(148,163,184,.12);
    border-bottom:1px solid rgba(148,163,184,.12);
    text-align:center;
    vertical-align:middle;
}
.ws-personnel-table th{
    position:sticky;
    top:0;
    z-index:2;
    background:#07101f;
    color:var(--pm-cyan);
    text-transform:uppercase;
    letter-spacing:.35px;
    font-size:11px;
    font-weight:800;
}
.ws-personnel-table th:nth-child(2),
.ws-personnel-table td:nth-child(2){text-align:left;}
.ws-personnel-table th:last-child,
.ws-personnel-table td:last-child{border-right:0;}
.ws-personnel-table tbody tr:last-child td{border-bottom:0;}
.ws-personnel-table tbody tr{transition:filter .15s ease, background .15s ease;}
.ws-personnel-table tbody tr:hover{filter:brightness(1.08);}

.ws-pm-row.ws-pm-good{background:rgba(34,197,94,.075);color:#d9fbe4;}
.ws-pm-row.ws-pm-warn{background:rgba(250,204,21,.09);color:#fff1a6;}
.ws-pm-row.ws-pm-bad{background:rgba(239,68,68,.09);color:#fecaca;}
.ws-pm-row.ws-pm-weekend{background:rgba(148,163,184,.055);color:#94a3b8;}
.ws-pm-empty-row td{padding:34px 16px!important;color:var(--pm-muted);font-weight:700;text-align:center!important;}
.ws-pm-error-row td{color:#fca5a5!important;}

@media(max-width:1100px){
    .ws-personnel-controls{grid-template-columns:repeat(2,1fr);}
    .ws-personnel-summary{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:700px){
    .ws-personnel-head{align-items:flex-start;flex-direction:column;}
    .ws-personnel-controls{grid-template-columns:1fr;}
    .ws-personnel-field-wide{grid-column:auto;}
    .ws-personnel-actions{grid-column:auto;justify-content:stretch;flex-direction:column;}
    .ws-personnel-btn{width:100%;}
    .ws-personnel-summary{grid-template-columns:1fr;}
    .ws-personnel-head h2{font-size:20px;}
}

/* WorkServer Personnel Monitor v2 — интерактивные счётчики-фильтры */
.ws-personnel-stat{
    width:100%;
    color:inherit;
    font:inherit;
    text-align:left;
    cursor:pointer;
    appearance:none;
    -webkit-appearance:none;
    transition:border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.ws-personnel-stat:hover{
    transform:translateY(-1px);
    border-color:rgba(34,211,238,.42);
    background:rgba(34,211,238,.045);
}
.ws-personnel-stat:focus-visible{
    outline:2px solid var(--pm-cyan);
    outline-offset:2px;
}
.ws-personnel-stat.is-active{
    border-color:var(--pm-cyan);
    background:rgba(34,211,238,.075);
    box-shadow:inset 0 0 0 1px rgba(34,211,238,.12), 0 0 18px rgba(34,211,238,.07);
}
.ws-personnel-stat-good.is-active{
    border-color:var(--pm-green);
    background:rgba(34,197,94,.075);
    box-shadow:inset 0 0 0 1px rgba(34,197,94,.12), 0 0 18px rgba(34,197,94,.07);
}
.ws-personnel-stat-warn.is-active{
    border-color:var(--pm-yellow);
    background:rgba(234,179,8,.075);
    box-shadow:inset 0 0 0 1px rgba(234,179,8,.12), 0 0 18px rgba(234,179,8,.07);
}
.ws-personnel-stat-bad.is-active{
    border-color:var(--pm-red);
    background:rgba(239,68,68,.075);
    box-shadow:inset 0 0 0 1px rgba(239,68,68,.12), 0 0 18px rgba(239,68,68,.07);
}

/* Personnel Monitor v3.2: keep search field readable while focused/autofilled */
.ws-personnel-monitor #ws-pm-search,
.ws-personnel-monitor #ws-pm-search:hover,
.ws-personnel-monitor #ws-pm-search:focus,
.ws-personnel-monitor #ws-pm-search:active{
    background:#050b16 !important;
    color:var(--pm-text) !important;
    -webkit-text-fill-color:var(--pm-text) !important;
    caret-color:var(--pm-cyan) !important;
}
.ws-personnel-monitor #ws-pm-search::placeholder{
    color:#64748b !important;
    opacity:1;
}
.ws-personnel-monitor #ws-pm-search:-webkit-autofill,
.ws-personnel-monitor #ws-pm-search:-webkit-autofill:hover,
.ws-personnel-monitor #ws-pm-search:-webkit-autofill:focus{
    -webkit-text-fill-color:var(--pm-text) !important;
    -webkit-box-shadow:0 0 0 1000px #050b16 inset !important;
    box-shadow:0 0 0 1000px #050b16 inset !important;
    caret-color:var(--pm-cyan) !important;
}

/* WorkServer Personnel Monitor v3.7 — compact mobile report table */
@media (max-width:700px){
    .ws-personnel-table-scroll{
        overflow-x:hidden;
    }

    .ws-personnel-table{
        width:100%;
        min-width:0;
        table-layout:fixed;
        font-size:10px;
    }

    /* На телефоне оставляем только оперативные поля:
       ID, дата, приход, уход, опоздание, ранний уход. */
    .ws-personnel-table th:nth-child(2),
    .ws-personnel-table td:nth-child(2),
    .ws-personnel-table th:nth-child(4),
    .ws-personnel-table td:nth-child(4),
    .ws-personnel-table th:nth-child(7),
    .ws-personnel-table td:nth-child(7){
        display:none;
    }

    .ws-personnel-table th,
    .ws-personnel-table td{
        padding:8px 3px;
        line-height:1.2;
        white-space:normal;
        overflow-wrap:anywhere;
    }

    .ws-personnel-table th{
        font-size:0;
        letter-spacing:0;
        height:34px;
    }

    .ws-personnel-table th::after{
        font-size:8px;
        line-height:1.05;
        font-weight:800;
    }

    .ws-personnel-table th:nth-child(1)::after{content:'ID';}
    .ws-personnel-table th:nth-child(3)::after{content:'ДАТА';}
    .ws-personnel-table th:nth-child(5)::after{content:'ПРИХОД';}
    .ws-personnel-table th:nth-child(6)::after{content:'УХОД';}
    .ws-personnel-table th:nth-child(8)::after{content:'ОПОЗД.';}
    .ws-personnel-table th:nth-child(9)::after{content:'РАННИЙ';}

    .ws-personnel-table th:nth-child(1),
    .ws-personnel-table td:nth-child(1){width:10%;}
    .ws-personnel-table th:nth-child(3),
    .ws-personnel-table td:nth-child(3){width:22%;}
    .ws-personnel-table th:nth-child(5),
    .ws-personnel-table td:nth-child(5),
    .ws-personnel-table th:nth-child(6),
    .ws-personnel-table td:nth-child(6){width:16%;}
    .ws-personnel-table th:nth-child(8),
    .ws-personnel-table td:nth-child(8),
    .ws-personnel-table th:nth-child(9),
    .ws-personnel-table td:nth-child(9){width:18%;}

    .ws-pm-empty-row td{
        display:table-cell!important;
        width:auto!important;
        padding:22px 8px!important;
        font-size:11px;
    }
}

@keyframes ws-pm-pulse{
    0%{box-shadow:0 0 0 0 rgba(34,197,94,.9);}
    70%{box-shadow:0 0 0 8px rgba(34,197,94,.15);}
    100%{box-shadow:0 0 0 0 rgba(34,197,94,0);}
}