/* =========================================================
   ReparaJa - FASE ONLINE 03
   Funcionarios + Fotos + Historico + QR/Acompanhamento
   ========================================================= */

.rj-phase03-page { display:none; }
.rj-phase03-page.active { display:block; }

.rj-staff-toolbar,
.rj-staff-card,
.rj-extra-card {
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:16px;
    box-shadow:0 4px 18px rgba(0,0,0,.04);
}

.rj-staff-toolbar {
    padding:18px;
    margin-bottom:16px;
}

.rj-staff-toolbar h3,
.rj-staff-card h3,
.rj-extra-card h3 {
    margin:0 0 8px;
}

.rj-staff-toolbar p,
.rj-extra-muted {
    margin:0;
    color:#6b7280;
    font-size:13px;
    line-height:1.45;
}

.rj-staff-create {
    display:grid;
    grid-template-columns:1fr auto;
    gap:10px;
    margin-top:14px;
}

.rj-staff-create input {
    width:100%;
    padding:12px 13px;
    border:1px solid #d1d5db;
    border-radius:10px;
    outline:none;
}

.rj-staff-create input:focus {
    border-color:#2563eb;
    box-shadow:0 0 0 3px rgba(37,99,235,.1);
}

.rj-staff-card { overflow:hidden; }

.rj-staff-head,
.rj-staff-row {
    display:grid;
    grid-template-columns:1.35fr 150px 150px 180px;
    gap:14px;
    align-items:center;
}

.rj-staff-head {
    padding:13px 16px;
    background:#f8fafc;
    border-bottom:1px solid #e5e7eb;
    color:#6b7280;
    font-size:12px;
    font-weight:700;
}

.rj-staff-body { padding:10px; }

.rj-staff-row {
    padding:14px 16px;
    border:1px solid #e5e7eb;
    border-radius:12px;
    margin-bottom:8px;
}

.rj-staff-row:last-child { margin-bottom:0; }

.rj-staff-row strong {
    display:block;
    color:#111827;
}

.rj-role-badge,
.rj-state-badge {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:6px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:800;
}

.rj-role-badge.admin {
    background:#ede9fe;
    color:#6d28d9;
}

.rj-role-badge.employee {
    background:#eff6ff;
    color:#1d4ed8;
}

.rj-state-badge.active {
    background:#ecfdf5;
    color:#047857;
}

.rj-state-badge.inactive {
    background:#f3f4f6;
    color:#6b7280;
}

.rj-small-btn {
    border:1px solid #d1d5db;
    background:#fff;
    color:#374151;
    border-radius:9px;
    padding:8px 10px;
    font-weight:700;
    cursor:pointer;
}

.rj-small-btn:hover { background:#f9fafb; }

.rj-invites {
    margin-top:16px;
    display:grid;
    gap:9px;
}

.rj-invite-row {
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:center;
    padding:12px 14px;
    background:#f8fafc;
    border:1px solid #e5e7eb;
    border-radius:11px;
}

.rj-invite-code {
    font-family:Consolas, monospace;
    font-weight:800;
    letter-spacing:.03em;
}

.rj-join-box {
    margin-top:18px;
    border-top:1px solid #e5e7eb;
    padding-top:18px;
}

.rj-join-box h3 { margin:0 0 7px; }

.rj-join-grid {
    display:grid;
    gap:10px;
}

.rj-join-grid input {
    width:100%;
    padding:12px 13px;
    border:1px solid #d1d5db;
    border-radius:10px;
}

.rj-photo-intake {
    margin-top:18px;
    padding-top:18px;
    border-top:1px solid #e5e7eb;
}

.rj-photo-intake label {
    display:block;
    font-weight:700;
    margin-bottom:7px;
}

.rj-photo-intake input[type=file] {
    width:100%;
    padding:10px;
    border:1px dashed #cbd5e1;
    border-radius:10px;
    background:#f8fafc;
}

.rj-photo-preview {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px;
    margin-top:10px;
}

.rj-photo-preview img,
.rj-photo-grid img {
    width:100%;
    aspect-ratio:1/1;
    object-fit:cover;
    border-radius:10px;
    border:1px solid #e5e7eb;
}

.rj-extra-card {
    margin-top:18px;
    padding:16px;
}

.rj-extra-card-head {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin-bottom:12px;
}

.rj-photo-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
}

.rj-photo-item { position:relative; }

.rj-photo-delete {
    position:absolute;
    top:6px;
    right:6px;
    width:28px;
    height:28px;
    border:0;
    border-radius:8px;
    background:rgba(17,24,39,.82);
    color:#fff;
    cursor:pointer;
}

.rj-history {
    display:grid;
    gap:0;
}

.rj-history-item {
    display:grid;
    grid-template-columns:20px 1fr auto;
    gap:10px;
    align-items:start;
    padding:10px 0;
    border-bottom:1px solid #eef0f3;
}

.rj-history-item:last-child { border-bottom:0; }

.rj-history-dot {
    width:10px;
    height:10px;
    border-radius:50%;
    background:#2563eb;
    margin-top:5px;
}

.rj-history-title {
    font-weight:700;
    color:#111827;
}

.rj-history-meta {
    color:#6b7280;
    font-size:12px;
    margin-top:3px;
}

.rj-tracking-box {
    display:grid;
    grid-template-columns:1fr 150px;
    gap:16px;
    align-items:center;
}

.rj-tracking-link {
    display:flex;
    gap:8px;
    margin-top:10px;
}

.rj-tracking-link input {
    flex:1;
    min-width:0;
    padding:10px 11px;
    border:1px solid #d1d5db;
    border-radius:9px;
    background:#f9fafb;
}

.rj-qr {
    display:grid;
    place-items:center;
    min-height:140px;
}

.rj-local-warning {
    margin-top:10px;
    padding:10px 12px;
    border-radius:9px;
    background:#fff7ed;
    color:#9a3412;
    font-size:12px;
    line-height:1.4;
}

.rj-employee-mode .user-box {
    cursor:default !important;
}

.rj-phase03-empty {
    padding:28px 16px;
    text-align:center;
    color:#6b7280;
}

@media (max-width:800px) {
    .rj-staff-head { display:none; }
    .rj-staff-row { grid-template-columns:1fr; }
    .rj-staff-create { grid-template-columns:1fr; }
    .rj-photo-grid,
    .rj-photo-preview { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .rj-tracking-box { grid-template-columns:1fr; }
    .rj-history-item { grid-template-columns:20px 1fr; }
    .rj-history-item > :last-child { grid-column:2; }
}