/* ###########################################################################
   User Create
############################################################################ */

.user-create-container{width:100%;max-width:1100px;margin:0 auto;padding:28px 20px 50px;box-sizing:border-box;}
.user-create-header{display:flex;align-items:center;min-height:64px;margin-bottom:32px;}
.user-create-header-left{display:flex;align-items:center;gap:18px;}
.user-create-header-title{display:flex;flex-direction:column;}
.user-create-header-title h1{margin:0;color:#292536;font-size:32px;font-weight:650;line-height:1.2;letter-spacing:-.7px;}
.user-create-header-title p{margin:7px 0 0;color:#817d8c;font-size:14px;line-height:1.5;}

.user-create-back-button{display:flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0;flex-shrink:0;border:1px solid #e5e2eb;border-radius:14px;background:#fff;color:#615d70;font-size:17px;cursor:pointer;transition:.2s ease;}
.user-create-back-button:hover{transform:translateX(-3px);border-color:#7c4dff;color:#7c4dff;box-shadow:0 8px 22px rgba(60,40,100,.1);}

.user-create-form{display:flex;flex-direction:column;gap:24px;}
.user-create-card{padding:30px;border:1px solid #e9e5ef;border-radius:20px;background:#fff;box-shadow:0 10px 35px rgba(40,30,60,.045);}
.user-create-card-header{display:flex;align-items:center;gap:14px;margin-bottom:30px;padding-bottom:22px;border-bottom:1px solid #efedf2;}
.user-create-card-icon{display:flex;align-items:center;justify-content:center;width:46px;height:46px;flex-shrink:0;border-radius:14px;background:linear-gradient(135deg,rgba(124,77,255,.16),rgba(124,77,255,.08));color:#7045df;font-size:18px;}
.user-create-card-header h2{margin:0;color:#302b3b;font-size:18px;font-weight:650;}
.user-create-card-header p{margin:4px 0 0;color:#888391;font-size:13px;line-height:1.5;}

.user-photo-section{display:flex;align-items:center;gap:26px;margin-bottom:30px;padding-bottom:30px;border-bottom:1px solid #efedf2;}
.user-photo-preview{display:flex;align-items:center;justify-content:center;width:116px;height:116px;overflow:hidden;flex-shrink:0;border:2px dashed #d7d1e2;border-radius:50%;background:linear-gradient(135deg,#faf9fc,#f4f1f8);color:#9b94a8;font-size:35px;}
.user-photo-preview img{width:100%;height:100%;object-fit:cover;}
.user-photo-content{display:flex;flex-direction:column;align-items:flex-start;}
.user-photo-content h3{margin:0;color:#383240;font-size:16px;font-weight:650;}
.user-photo-content p{max-width:440px;margin:6px 0 16px;color:#898492;font-size:13px;line-height:1.5;}
.user-photo-actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px;}

.user-upload-button,.user-remove-file-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 15px;box-sizing:border-box;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;transition:.2s ease;}
.user-upload-button{border:none;background:#f1edff;color:#6840d3;}
.user-upload-button:hover{transform:translateY(-1px);background:#e8e1ff;box-shadow:0 6px 16px rgba(104,64,211,.12);}
.user-remove-file-button{border:1px solid #f0d8dc;background:#fff8f8;color:#c05a65;}
.user-remove-file-button:hover{background:#fff0f1;}

.user-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;}
.user-form-group{display:flex;flex-direction:column;gap:8px;}
.user-form-group-full{grid-column:1/-1;}
.user-form-group label{color:#514c5b;font-size:13px;font-weight:600;}
.user-form-group input,.user-form-group select{width:100%;height:48px;box-sizing:border-box;padding:0 15px;border:1px solid #dfdbe5;border-radius:12px;outline:none;background:#fff;color:#332e3b;font-family:inherit;font-size:14px;transition:.2s ease;}
.user-form-group input:hover,.user-form-group select:hover{border-color:#cfc8db;}
.user-form-group input::placeholder{color:#aaa5b1;}
.user-form-group input:focus,.user-form-group select:focus{border-color:#8965ee;box-shadow:0 0 0 4px rgba(124,77,255,.1);}

.user-file-upload{display:flex;flex-direction:column;gap:12px;}
.user-file-upload-content{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:160px;padding:22px;box-sizing:border-box;border:2px dashed #d9d4e2;border-radius:16px;background:linear-gradient(135deg,#fcfbfd,#f8f6fb);color:#8b8495;text-align:center;cursor:pointer;transition:.2s ease;}
.user-file-upload-content:hover{transform:translateY(-1px);border-color:#8a68eb;background:#f8f6ff;box-shadow:0 8px 22px rgba(90,60,160,.06);}
.user-file-upload-content i{display:flex;align-items:center;justify-content:center;width:54px;height:54px;margin-bottom:12px;border-radius:16px;background:rgba(124,77,255,.1);color:#7b52df;font-size:22px;}
.user-file-upload-content strong{color:#514a5c;font-size:14px;font-weight:650;}
.user-file-upload-content span{margin-top:6px;color:#97919f;font-size:12px;}

.user-selected-file,.user-additional-file-item{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:13px 15px;border:1px solid #e6e1eb;border-radius:12px;background:#faf9fc;}
.user-selected-file>div,.user-additional-file-info{display:flex;align-items:center;gap:11px;min-width:0;}
.user-selected-file span,.user-additional-file-info span{overflow:hidden;color:#554e5d;font-size:13px;text-overflow:ellipsis;white-space:nowrap;}
.user-selected-file>div>i,.user-additional-file-info i{color:#7950dd;}
.user-selected-file button,.user-additional-file-remove{display:flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;flex-shrink:0;border:none;border-radius:8px;background:transparent;color:#9d5660;cursor:pointer;}
.user-selected-file button:hover,.user-additional-file-remove:hover{background:#fff0f1;color:#c84957;}
.user-additional-files{display:flex;flex-direction:column;gap:8px;}

.user-create-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:22px 0 0;border-top:1px solid #ebe7f0;}
.user-button-cancel,.user-button-save{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:48px;padding:0 22px;border-radius:12px;font-size:14px;font-weight:600;cursor:pointer;transition:.2s ease;}
.user-button-cancel{border:1px solid #ded9e5;background:#fff;color:#676170;}
.user-button-save{border:none;background:linear-gradient(135deg,#7c4dff,#5629c8);color:#fff;box-shadow:0 8px 22px rgba(91,46,200,.22);}
.user-button-save:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(91,46,200,.32);}

/* ###########################################################################
   User creation result overlay
############################################################################ */

.user-create-modal-overlay{position:fixed;inset:0;z-index:999999;display:flex;align-items:center;justify-content:center;padding:24px;box-sizing:border-box;overflow-y:auto;background:rgba(0,0,0,.50);animation:userCreateOverlayShow .2s ease;}
.user-create-result-dialog{width:100%;max-width:640px;margin:auto;padding:42px;box-sizing:border-box;border:1px solid #e6e1ec;border-radius:24px;background:#fff;box-shadow:0 30px 90px rgba(0,0,0,.35);text-align:center;animation:userCreateDialogShow .25s ease;}
.user-create-result-icon{display:flex;align-items:center;justify-content:center;width:82px;height:82px;margin:0 auto 20px;border:1px solid;border-radius:50%;font-size:38px;}
.user-create-result-dialog.success .user-create-result-icon{border-color:rgba(34,197,94,.28);background:rgba(34,197,94,.10);color:#20a95a;}
.user-create-result-dialog.warning .user-create-result-icon{border-color:rgba(245,158,11,.35);background:rgba(245,158,11,.10);color:#d88900;}
.user-create-result-label{display:block;margin-bottom:8px;font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;}
.success .user-create-result-label{color:#20a95a;}
.warning .user-create-result-label{color:#d88900;}
.user-create-result-dialog h2{margin:0;color:#292536;font-size:28px;font-weight:650;}
.user-create-result-message{margin:14px auto 0;max-width:560px;color:#625d6b;font-size:15px;line-height:1.65;}
.user-create-result-message strong{color:#322d3c;}
.user-create-result-info{display:flex;align-items:flex-start;gap:12px;margin-top:24px;padding:15px 17px;border:1px solid #e2ddea;border-radius:13px;background:#faf9fc;color:#625d6b;text-align:left;font-size:13px;line-height:1.55;}
.user-create-result-info i{margin-top:2px;color:#7c4dff;}
.user-activation-link-box{margin-top:22px;text-align:left;}
.user-activation-link-label{display:block;margin-bottom:8px;color:#514c5b;font-size:13px;font-weight:650;}
.user-activation-link-content{display:flex;gap:9px;}
.user-activation-link{min-width:0;flex:1;height:46px;padding:0 13px;box-sizing:border-box;border:1px solid #dfdbe5;border-radius:11px;outline:none;background:#faf9fc;color:#514c5b;font-family:inherit;font-size:12px;}
.user-copy-activation-link{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 15px;flex-shrink:0;border:1px solid #d9d2e8;border-radius:11px;background:#f5f1ff;color:#6840d3;font-family:inherit;font-size:13px;font-weight:650;cursor:pointer;transition:.2s ease;}
.user-copy-activation-link:hover{background:#ede6ff;}
.user-create-result-actions{display:flex;justify-content:center;gap:12px;margin-top:28px;}
.user-result-button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 20px;border-radius:12px;font-family:inherit;font-size:14px;font-weight:650;cursor:pointer;transition:.2s ease;}
.user-result-button.secondary{border:1px solid #ded9e5;background:#fff;color:#676170;}
.user-result-button.primary{border:none;background:linear-gradient(135deg,#7c4dff,#5629c8);color:#fff;box-shadow:0 8px 22px rgba(91,46,200,.22);}
.user-result-button:hover{transform:translateY(-1px);}

@keyframes userCreateOverlayShow{from{opacity:0;}to{opacity:1;}}
@keyframes userCreateDialogShow{from{opacity:0;transform:translateY(18px) scale(.98);}to{opacity:1;transform:translateY(0) scale(1);}}

@media(max-width:700px){
    .user-create-container{padding:20px 14px 35px;}
    .user-create-card{padding:22px 18px;border-radius:17px;}
    .user-photo-section{flex-direction:column;align-items:flex-start;}
    .user-form-grid{grid-template-columns:1fr;}
    .user-form-group-full{grid-column:auto;}
    .user-create-actions,.user-create-result-actions,.user-activation-link-content{flex-direction:column;}
    .user-create-actions>*,.user-create-result-actions>*,.user-copy-activation-link{width:100%;}
    .user-create-modal-overlay{align-items:flex-start;padding:16px;}
    .user-create-result-dialog{margin:20px auto;padding:30px 20px;border-radius:20px;}
    .user-create-result-dialog h2{font-size:24px;}
}