:root{--breakpoint-xs: 0px;--breakpoint-sm: 640px;--breakpoint-md: 768px;--breakpoint-lg: 1024px;--breakpoint-xl: 1280px}:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;--color-border: #e5e5e5;--color-focus: #000000;--color-error: #ef4444;--color-disabled: #f5f5f5;--color-disabled-text: #999999;--color-text: #000000;--color-label: #666666;--color-background: #ffffff;--color-background-hover: #fafafa;--border-radius: 8px;--spacing-xs: 4px;--spacing-sm: 6px;--spacing-md: 8px;--spacing-lg: 12px;--transition: .15s ease;--font-size-base: 14px;--font-size-label: 13px;--font-size-error: 12px}body{margin:0}*{box-sizing:border-box}input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;color:inherit}button{font-family:inherit;font-size:inherit}#root{margin:0 auto;width:100%}.button{font-family:inherit;font-size:var(--font-size-base);font-weight:500;padding:var(--spacing-sm) var(--spacing-lg);border:1px solid transparent;border-radius:var(--border-radius);cursor:pointer;transition:all var(--transition);display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-xs);background:var(--color-background);color:var(--color-text);min-height:40px}.button--primary{background:var(--color-focus);color:var(--color-background)}.button--primary:hover:not(.button--disabled){opacity:.9}.button--primary:active:not(.button--disabled){transform:translateY(1px)}.button--secondary{background:var(--color-background-hover);border-color:var(--color-border)}.button--secondary:hover:not(.button--disabled){background:var(--color-border)}.button--outline{background:transparent;border-color:var(--color-border)}.button--outline:hover:not(.button--disabled){border-color:var(--color-focus)}.button--focused{outline:2px solid var(--color-focus);outline-offset:2px}.button--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.button:active:not(.button--disabled){transform:translateY(1px)}@media(hover:none),(max-width: var(--breakpoint-md)){.button{padding:var(--spacing-md) var(--spacing-lg)}}.select{display:flex;flex-direction:column;gap:var(--spacing-sm)}.select__label{display:flex;gap:var(--spacing-xs);font-size:var(--font-size-label);color:var(--color-label);font-weight:500}.select__required{color:var(--color-error)}.select__wrapper{position:relative;display:flex;align-items:center}.select__field{width:100%;padding:var(--spacing-md) var(--spacing-lg);font-size:var(--font-size-base);color:var(--color-text);background-color:var(--color-background);border:1px solid var(--color-border);border-radius:var(--border-radius);transition:border-color var(--transition),background-color var(--transition);appearance:none;cursor:pointer}.select__field:hover:not(:disabled){background-color:var(--color-background-hover)}.select__field--focused{border-color:var(--color-focus);outline:none}.select__wrapper:after{content:"";position:absolute;right:var(--spacing-lg);top:50%;transform:translateY(-50%);width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:6px solid var(--color-text);pointer-events:none}.select__error{display:block;margin-top:var(--spacing-xs);font-size:var(--font-size-error);color:var(--color-error)}.select--error .select__field,.select--error .select__field--focused{border-color:var(--color-error)}.select--disabled .select__field{background-color:var(--color-disabled);color:var(--color-disabled-text);cursor:not-allowed}.select--disabled .select__field:hover{background-color:var(--color-disabled)}.select--disabled .select__wrapper:after{border-top-color:var(--color-disabled-text)}.employees-page{max-width:1000px;margin:0 auto;padding:var(--spacing-lg)}.employees-page__title{font-size:24px;font-weight:600;margin:0 0 var(--spacing-lg) 0;color:var(--color-text)}.employees-page__controls{display:flex;align-items:center;gap:var(--spacing-md);margin-bottom:var(--spacing-lg)}.employees-page__loading,.employees-page__error{text-align:center;padding:var(--spacing-lg);color:var(--color-label)}.employees-page__error{color:var(--color-error)}.employees-table-wrapper{overflow-x:auto;padding:var(--spacing-md) 0}.employees-table{min-width:800px;width:100%;border-collapse:collapse;margin-bottom:var(--spacing-lg)}.employees-table thead{background:var(--color-background-hover)}.employees-table th{text-align:left;padding:var(--spacing-md);font-size:var(--font-size-label);font-weight:600;color:var(--color-label);border-bottom:1px solid var(--color-border)}.employees-table td{padding:var(--spacing-md);border-bottom:1px solid var(--color-border)}.employees-table__photo{width:40px;height:40px;border-radius:50%;object-fit:cover;border:1px solid var(--color-border)}.employees-pagination{display:flex;align-items:center;justify-content:center;gap:var(--spacing-lg)}.employees-pagination__info{font-size:var(--font-size-base);color:var(--color-label)}@media (max-width: var(--breakpoint-md)){.employees-page{padding:var(--spacing-md)}.employees-table-wrapper{padding:var(--spacing-sm) 0}}.input{display:flex;flex-direction:column;gap:var(--spacing-sm)}.input__label{display:flex;gap:var(--spacing-xs);font-size:var(--font-size-label);color:var(--color-label);font-weight:500}.input__required{color:var(--color-error)}.input__wrapper{position:relative;display:flex;align-items:center}.input__field{width:100%;padding:var(--spacing-md) var(--spacing-lg);font-size:var(--font-size-base);color:var(--color-text);background-color:var(--color-background);border:1px solid var(--color-border);border-radius:var(--border-radius);transition:border-color var(--transition),background-color var(--transition)}.input__field::placeholder{color:#999}.input__field:hover:not(:disabled){background-color:var(--color-background-hover)}.input__field--focused{border-color:var(--color-focus);outline:none}.input__loading{position:absolute;right:var(--spacing-lg);width:16px;height:16px;border:2px solid var(--color-disabled);border-top-color:var(--color-focus);border-radius:50%;animation:input-loading-spin .6s linear infinite}@keyframes input-loading-spin{to{transform:rotate(360deg)}}.input__error{display:block;margin-top:var(--spacing-xs);font-size:var(--font-size-error);color:var(--color-error)}.input--error .input__field,.input--error .input__field--focused{border-color:var(--color-error)}.input--disabled .input__field{background-color:var(--color-disabled);color:var(--color-disabled-text);cursor:not-allowed}.input--disabled .input__field:hover{background-color:var(--color-disabled)}.input--loading .input__field{padding-right:calc(var(--spacing-lg) * 2 + 16px)}.autocomplete{position:relative;display:flex;flex-direction:column;gap:var(--spacing-sm)}.autocomplete__label{display:flex;gap:var(--spacing-xs);font-size:var(--font-size-label);color:var(--color-label);font-weight:500}.autocomplete__required{color:var(--color-error)}.autocomplete__wrapper{position:relative;display:flex;align-items:center}.autocomplete__input{width:100%;padding:var(--spacing-md) calc(var(--spacing-lg) * 2);font-size:var(--font-size-base);color:var(--color-text);background-color:var(--color-background);border:1px solid var(--color-border);border-radius:var(--border-radius);transition:border-color var(--transition),background-color var(--transition)}.autocomplete__input::placeholder{color:#999}.autocomplete__input:hover:not(:disabled){background-color:var(--color-background-hover)}.autocomplete__input--focused{border-color:var(--color-focus);outline:none}.autocomplete__clear{position:absolute;right:var(--spacing-md);width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:none;border:none;font-size:20px;line-height:1;color:var(--color-label);cursor:pointer;transition:color var(--transition)}.autocomplete__clear:hover{color:var(--color-text)}.autocomplete__clear:disabled{opacity:0;cursor:default}.autocomplete__dropdown{position:absolute;top:calc(100% + var(--spacing-xs));left:0;right:0;max-height:200px;background-color:var(--color-background);border:1px solid var(--color-border);border-radius:var(--border-radius);overflow-y:auto;overflow-x:hidden;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;z-index:1000}.autocomplete__loading,.autocomplete__no-results{padding:var(--spacing-md) var(--spacing-lg);font-size:var(--font-size-base);color:var(--color-label);text-align:center}.autocomplete__option{padding:var(--spacing-md) var(--spacing-lg);font-size:var(--font-size-base);color:var(--color-text);cursor:pointer;transition:background-color var(--transition);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.autocomplete__option:hover{background-color:var(--color-background-hover)}.autocomplete__option--focused{background-color:#f0f0f0;color:var(--color-text)}.autocomplete__option--selected{font-weight:500;background-color:var(--color-background-hover)}.autocomplete__error{display:block;margin-top:var(--spacing-xs);font-size:var(--font-size-error);color:var(--color-error)}.autocomplete--error .autocomplete__input,.autocomplete--error .autocomplete__input--focused{border-color:var(--color-error)}.autocomplete--disabled .autocomplete__input{background-color:var(--color-disabled);color:var(--color-disabled-text);cursor:not-allowed}.autocomplete--disabled .autocomplete__input:hover{background-color:var(--color-disabled)}@media(max-width:640px){.autocomplete__dropdown{max-height:150px}}.employee-form-step1{max-width:600px;margin:0 auto;padding:var(--spacing-lg)}.employee-form-step1__header{margin-bottom:var(--spacing-lg)}.employee-form-step1__title{font-size:24px;font-weight:600;margin:0 0 var(--spacing-sm) 0;color:var(--color-text)}.employee-form-step1__subtitle{font-size:var(--font-size-base);color:var(--color-label);margin:0}.employee-form-step1__form{display:flex;flex-direction:column;gap:var(--spacing-lg)}.employee-form-step1__actions{margin-top:var(--spacing-lg);display:flex;justify-content:flex-end;gap:var(--spacing-md)}@media (max-width: var(--breakpoint-md)){.employee-form-step1{padding:var(--spacing-md)}}.image-picker{display:flex;flex-direction:column;gap:var(--spacing-sm)}.image-picker__label{display:flex;gap:var(--spacing-xs);font-size:var(--font-size-label);color:var(--color-label);font-weight:500}.image-picker__required{color:var(--color-error)}.image-picker__wrapper{position:relative;display:flex;align-items:center;justify-content:center;min-height:200px;padding:var(--spacing-lg);background-color:var(--color-background);border:1px solid var(--color-border);border-radius:var(--border-radius);transition:border-color var(--transition),background-color var(--transition);cursor:pointer;overflow:hidden}.image-picker__wrapper:hover:not(.image-picker--disabled){background-color:var(--color-background-hover)}.image-picker__wrapper--drag-over{border-color:var(--color-focus);background-color:var(--color-background-hover)}.image-picker__wrapper:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}.image-picker--focused .image-picker__wrapper{border-color:var(--color-focus)}.image-picker__input{position:absolute;width:.1px;height:.1px;opacity:0;overflow:hidden;z-index:-1}.image-picker__placeholder{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-md);color:var(--color-label)}.image-picker__icon{width:48px;height:48px;border:2px dashed var(--color-border);border-radius:var(--border-radius)}.image-picker__text{font-size:var(--font-size-base)}.image-picker__preview{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.image-picker__image{max-width:100%;max-height:200px;object-fit:contain;border-radius:var(--border-radius)}.image-picker__remove{position:absolute;top:var(--spacing-sm);right:var(--spacing-sm);width:28px;height:28px;display:flex;align-items:center;justify-content:center;background-color:#000000b3;color:#fff;border:none;border-radius:50%;font-size:20px;line-height:1;cursor:pointer;transition:background-color var(--transition)}.image-picker__remove:hover:not(:disabled){background-color:#000000e6}.image-picker__remove:disabled{opacity:.5;cursor:not-allowed}.image-picker__loading{position:absolute;width:32px;height:32px;border:3px solid var(--color-disabled);border-top-color:var(--color-focus);border-radius:50%;animation:image-picker-loading-spin .6s linear infinite;z-index:1}@keyframes image-picker-loading-spin{to{transform:rotate(360deg)}}.image-picker__error{display:block;margin-top:var(--spacing-xs);font-size:var(--font-size-error);color:var(--color-error)}.image-picker--error .image-picker__wrapper,.image-picker--error .image-picker__wrapper--drag-over,.image-picker--focused.image-picker--error .image-picker__wrapper{border-color:var(--color-error)}.image-picker--disabled .image-picker__wrapper{background-color:var(--color-disabled);cursor:not-allowed}.image-picker--disabled .image-picker__wrapper:hover{background-color:var(--color-disabled)}.image-picker--disabled .image-picker__icon{border-color:var(--color-disabled-text)}.image-picker--disabled .image-picker__text{color:var(--color-disabled-text)}@media(max-width:640px){.image-picker__wrapper{min-height:150px}}.employee-form-step2{max-width:600px;margin:0 auto;padding:var(--spacing-lg)}.employee-form-step2__header{margin-bottom:var(--spacing-lg)}.employee-form-step2__title{font-size:24px;font-weight:600;margin:0 0 var(--spacing-sm) 0;color:var(--color-text)}.employee-form-step2__subtitle{font-size:var(--font-size-base);color:var(--color-label);margin:0}.employee-form-step2__form{display:flex;flex-direction:column;gap:var(--spacing-lg)}.employee-form-step2__notes{display:flex;flex-direction:column;gap:var(--spacing-sm)}.employee-form-step2__notes-label{font-size:var(--font-size-label);color:var(--color-label);font-weight:500}.employee-form-step2__notes-field{width:100%;min-height:120px;padding:var(--spacing-md) var(--spacing-lg);font-size:var(--font-size-base);color:var(--color-text);background-color:var(--color-background);border:1px solid var(--color-border);border-radius:var(--border-radius);resize:vertical;font-family:inherit}.employee-form-step2__notes-field::placeholder{color:#999}.employee-form-step2__notes-field:hover{background-color:var(--color-background-hover)}.employee-form-step2__notes-field:focus{border-color:var(--color-focus);outline:none}.employee-form-step2__actions{margin-top:var(--spacing-lg);display:flex;justify-content:flex-end;gap:var(--spacing-md)}@media (max-width: var(--breakpoint-md)){.employee-form-step2{padding:var(--spacing-md)}}
