.employee-form{display:block}
.employee-form-top{display:flex;align-items:center;gap:19px;margin:4px 0 27px}
.employee-monogram{display:grid;place-items:center;flex:none;width:78px;height:78px;border:1px solid #7b4851;border-radius:19px;background:linear-gradient(145deg,#49252d,#291a20);color:#f2b3bb;font-size:29px;font-weight:850;box-shadow:0 10px 26px #0004}
.employee-form-top h2{font-size:clamp(30px,3vw,43px);line-height:1.1;letter-spacing:-.045em;margin:5px 0}
.employee-form-top p{font-size:15px;line-height:1.5;color:#beb2b9;margin:0}
.employee-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.employee-panel{position:relative;align-self:start;min-width:0;border:1px solid #473a41;border-radius:17px;background:linear-gradient(145deg,#1d1a1e,#19171b);padding:23px;overflow:hidden}
.employee-panel:before{content:"";position:absolute;left:16px;right:16px;top:0;height:2px;background:linear-gradient(90deg,#a34d59,#df7b85 52%,transparent)}
.employee-panel-title{display:flex;align-items:center;gap:12px;margin:0 0 21px}
.employee-panel-title>span{display:grid;place-items:center;width:35px;height:35px;flex:none;border:1px solid #573b45;border-radius:10px;background:#30232b;color:#eea0aa;font-size:18px}
.employee-panel-title h3{font-size:21px;letter-spacing:-.025em;margin:0}
.employee-panel-title p{font-size:13px;color:#aa9da7;margin:4px 0 0}
.employee-fields{display:grid;gap:15px}
.employee-fields .field{font-size:14px;color:#ded4d9}
.employee-fields .field input,.employee-fields .field select{min-height:47px;padding:11px 13px;border:1px solid #463840;border-radius:10px;background:#151317;color:#f4eff1;font-size:14px}
.employee-fields .field input:focus,.employee-fields .field select:focus{border-color:#a65c67;box-shadow:0 0 0 3px #bd687417}
.employee-fields .field input::placeholder{color:#796f78}
.employee-fields .field input[readonly]{color:#eadde1;background:#201a1f}
.employee-fields .field small{font-size:12px;line-height:1.45;color:#958a94;font-weight:400}
.employee-subsection{border-top:1px solid #382e35;padding-top:18px;margin-top:7px}
.employee-subhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.employee-subhead h4{font-size:15px;margin:0}
.employee-subhead p{font-size:12px;color:#9e929c;margin:4px 0 0}
.employee-subhead>span,.employee-course-count{font-size:12px;color:#b8a8b1}
.sanction-rows{display:grid;gap:8px}
.sanction-row{display:grid;grid-template-columns:minmax(112px,.9fr) minmax(90px,1.15fr) minmax(85px,.8fr) 36px;gap:7px;align-items:center;padding:9px;border:1px solid #4d3d35;border-radius:11px;background:#28221d;animation:employeeIn .2s ease-out}
.sanction-row select,.sanction-row input{width:100%;min-width:0;height:38px;border:1px solid #493b40;border-radius:8px;background:#1a1719;color:#eee4e6;padding:0 9px;font-size:12px}
.sanction-row select{color:#e6b476}
.sanction-row input::placeholder{color:#827680}
.sanction-remove{height:36px;border:1px solid #5d4349;border-radius:8px;background:#2b1e24;color:#cbb8bd;font-size:21px;cursor:pointer}
.sanction-remove:hover{background:#64313c;color:white}
.employee-add-sanction{margin-top:10px;padding:8px 11px;font-size:13px}
.employee-courses{grid-column:1/-1}
.employee-courses .employee-panel-title{margin-bottom:17px}
.employee-course-count{margin-left:auto}
.employee-course-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.employee-course{display:flex;align-items:center;gap:11px;min-width:0;padding:12px;border:1px solid #42363e;border-radius:10px;background:#1a171b;cursor:pointer;transition:border-color .18s,background .18s}
.employee-course:hover{border-color:#86505a;background:#241b20}
.employee-course:has(input:checked){border-color:#995360;background:#302027}
.employee-course input{width:18px;height:18px;flex:none;accent-color:#c96370}
.employee-course span{min-width:0}
.employee-course b{display:block;font-size:14px;line-height:1.35}
.employee-course small{display:block;margin-top:4px;font-size:12px;color:#a89ca6}
.employee-form-actions{display:flex;align-items:center;gap:10px;margin-top:22px}
.employee-form-actions .button{min-height:46px;padding:0 18px}
.employee-form-actions .button.primary{background:#bd626e;border-color:#d78189;color:#fff}
.employee-form-actions .button.primary:hover{background:#cc727c}
.employee-list-action{white-space:nowrap}
@keyframes employeeIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1000px){.employee-form-grid{grid-template-columns:1fr}.employee-courses{grid-column:auto}}
@media(max-width:620px){.employee-form-top{align-items:flex-start;gap:13px}.employee-monogram{width:58px;height:58px;border-radius:15px;font-size:23px}.employee-form-top h2{font-size:30px}.employee-form-top p{font-size:13px}.employee-panel{padding:18px}.sanction-row{grid-template-columns:1fr 1fr 36px}.sanction-row select{grid-column:1/-1}.employee-course-grid{grid-template-columns:1fr}.employee-course-count{font-size:11px}.employee-form-actions{align-items:stretch;flex-direction:column}.employee-form-actions .button{width:100%}}
.employee-access-panel .employee-field-note{display:block;margin:-8px 0 0;color:#8e8189;font-size:11px;line-height:1.4}
.sanction-summary{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sanction-summary>span{display:flex;align-items:center;justify-content:space-between;min-height:40px;padding:0 10px;border:1px solid #46363c;border-radius:9px;background:#1c171a;color:#b9aab2;font-size:11px}
.sanction-summary>span:first-child b{color:#dda25f}
.sanction-summary>span:last-child b{color:#df8491}
.access-sanction-summary{margin:1px 0 2px}
.journal-toggle{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:12px;border:1px solid #42363d;border-radius:10px;background:#1d191c;cursor:pointer}
.journal-toggle>span>b{display:block;color:#e8e0e3;font-size:13px}
.journal-toggle>span>small{display:block;margin-top:4px;color:#968993;font-size:10px;line-height:1.4}
.journal-toggle input{position:absolute;opacity:0;pointer-events:none}
.journal-toggle>i{position:relative;flex:none;width:39px;height:22px;border-radius:99px;background:#453940;transition:.18s ease}
.journal-toggle>i:after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#b5a6ae;transition:.18s ease}
.journal-toggle input:checked+i{background:#20553d}
.journal-toggle input:checked+i:after{left:20px;background:#70dda0;box-shadow:0 0 12px #58d68b70}
.journal-toggle input:focus-visible+i{outline:2px solid #d77a85;outline-offset:3px}
.journal-password-field{display:flex;align-items:center;gap:7px}
.journal-password-field input{flex:1;min-width:0}
.journal-password-field button{height:39px;padding:0 10px;border:1px solid #77444d;border-radius:8px;background:#302027;color:#e9949e;font:inherit;font-size:11px;font-weight:700;white-space:nowrap;cursor:pointer}
.journal-password-field button:hover{background:#43262e}
.employee-fields .field.disabled{opacity:.48}
.employee-fields .field.disabled input{cursor:not-allowed}
.sanction-row select,.employee-fields .field select{appearance:none;padding-right:36px;background-image:linear-gradient(45deg,transparent 50%,#d68c96 50%),linear-gradient(135deg,#d68c96 50%,transparent 50%);background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
