.op-personnel-center{margin:0 0 18px;border:1px solid #dbe7f5;border-radius:18px;background:linear-gradient(135deg,#fff 0%,#f7fbff 70%,#eff5ff 100%);box-shadow:0 14px 34px rgba(15,50,93,.07);overflow:hidden;color:#16345d}
.op-personnel-hero{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 24px 16px}
.op-personnel-kicker{display:block;margin-bottom:4px;color:#1769e0;font-size:11px;font-weight:800;letter-spacing:.13em}
.op-personnel-hero h2{margin:0;font-size:24px;line-height:1.2;color:#102d54}.op-personnel-hero p{margin:6px 0 0;color:#6b7f9c}
.op-personnel-actions{display:flex;gap:9px;flex-wrap:wrap;justify-content:flex-end}.op-personnel-button{border:1px solid #ccdaed;border-radius:10px;padding:10px 14px;background:#fff;color:#1e4f8c;font-weight:700;cursor:pointer}.op-personnel-button:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(22,87,173,.12)}.op-personnel-button.is-primary{border-color:#1769e0;background:#1769e0;color:#fff}
.op-personnel-cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:11px;padding:0 24px 18px}.op-personnel-card{position:relative;min-height:98px;padding:16px;border:1px solid #e0e9f5;border-radius:14px;background:#fff;overflow:hidden}.op-personnel-card i{position:absolute;right:-16px;top:-20px;width:68px;height:68px;border-radius:50%;background:#eaf3ff}.op-personnel-card strong{display:block;position:relative;margin-top:6px;font-size:26px;line-height:1.15;color:#173b69}.op-personnel-card span{display:block;position:relative;margin-top:7px;color:#71839d;font-size:12px;font-weight:700}.op-personnel-card.is-active i{background:#e7faf3}.op-personnel-card.is-shift i{background:#e9f7ff}.op-personnel-card.is-leave i{background:#fff4db}.op-personnel-card.is-payroll i{background:#f2ebff}.op-personnel-card.is-loading{animation:op-personnel-pulse 1.1s ease-in-out infinite alternate}
.op-personnel-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 24px;background:#f1f6fc;color:#637895;font-size:12px}.op-personnel-foot button{border:0;background:transparent;color:#1769e0;font-weight:800;cursor:pointer}
.op-personnel-modal{position:fixed;inset:0;z-index:10050;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(7,25,52,.52);backdrop-filter:blur(4px)}.op-personnel-dialog{width:min(1040px,96vw);max-height:90vh;display:flex;flex-direction:column;border-radius:20px;background:#fff;box-shadow:0 30px 90px rgba(8,31,66,.3);overflow:hidden}.op-personnel-dialog>header{display:flex;justify-content:space-between;padding:22px 24px;border-bottom:1px solid #e7edf6}.op-personnel-dialog header span{color:#1769e0;font-size:10px;font-weight:800;letter-spacing:.15em}.op-personnel-dialog h3{margin:3px 0;font-size:24px;color:#102d54}.op-personnel-dialog header p{margin:0;color:#70829c}.op-personnel-dialog [data-op-close]{width:38px;height:38px;border:1px solid #dce6f2;border-radius:10px;background:#fff;color:#506784;font-size:25px;cursor:pointer}.op-personnel-dialog-body{padding:20px 24px 24px;overflow:auto}.op-personnel-modal-loading,.op-personnel-empty{display:flex;min-height:150px;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:#7588a2}.op-personnel-empty b{color:#173b69;font-size:16px}.op-personnel-empty.is-error b{color:#c43a43}
.op-personnel-list{display:grid;gap:10px}.op-personnel-list article{display:grid;grid-template-columns:1fr 1.2fr auto;gap:18px;align-items:center;padding:14px 16px;border:1px solid #e3ebf5;border-radius:13px}.op-personnel-list article>div{display:flex;flex-direction:column;gap:4px}.op-personnel-list span{color:#7688a0;font-size:12px}.op-personnel-row-actions{flex-direction:row!important}.op-personnel-row-actions button{border:1px solid #d9e3ef;border-radius:9px;padding:8px 12px;background:#fff;font-weight:700;cursor:pointer}.op-personnel-row-actions .is-approve{border-color:#bdebdc;background:#eaf9f3;color:#087657}.op-personnel-row-actions .is-reject{border-color:#f2c9cd;background:#fff3f4;color:#ad2835}
.op-personnel-shift-form{display:grid;grid-template-columns:1.4fr repeat(5,1fr) auto;gap:10px;align-items:end;padding:15px;border:1px solid #dce7f4;border-radius:14px;background:#f7faff}.op-personnel-shift-form label{display:flex;flex-direction:column;gap:5px;color:#516985;font-size:11px;font-weight:800}.op-personnel-shift-form input,.op-personnel-shift-form select{height:38px;border:1px solid #ccd9e9;border-radius:8px;padding:0 9px;background:#fff;color:#173657}.op-personnel-shift-form button{height:38px;border:0;border-radius:9px;padding:0 15px;background:#1769e0;color:#fff;font-weight:800;cursor:pointer}.op-personnel-shifts{display:grid;gap:8px;margin-top:16px}.op-personnel-shifts article{display:grid;grid-template-columns:110px 1fr auto;gap:15px;align-items:center;padding:12px 15px;border-bottom:1px solid #e7edf5}.op-personnel-shifts time{color:#1769e0;font-weight:800}.op-personnel-shifts article>div{display:flex;flex-direction:column}.op-personnel-shifts span{color:#778aa3;font-size:12px}.op-personnel-shifts article>b{color:#173657}
@keyframes op-personnel-pulse{from{opacity:.55}to{opacity:1}}
@media(max-width:1100px){.op-personnel-cards{grid-template-columns:repeat(3,1fr)}.op-personnel-shift-form{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){.op-personnel-hero{align-items:flex-start;flex-direction:column}.op-personnel-actions{width:100%;justify-content:flex-start}.op-personnel-cards{grid-template-columns:repeat(2,1fr);padding:0 14px 14px}.op-personnel-hero{padding:18px 14px}.op-personnel-foot{padding:10px 14px}.op-personnel-list article{grid-template-columns:1fr}.op-personnel-shift-form{grid-template-columns:1fr 1fr}.op-personnel-shift-form button{grid-column:1/-1}}