/* NexCore login visual layer. Loaded after the page style block. */
@font-face{font-family:"Dubai";src:url("/fonts/dubai/Dubai-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Dubai";src:url("/fonts/dubai/Dubai-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Dubai";src:url("/fonts/dubai/Dubai-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}

html,body{
  min-height:100%;
  margin:0;
  background-color:#f7f8fa !important;
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none' fill='none'><path d='M97 99C97 28 58 8-8 6' stroke='%23dc505a' stroke-opacity='.14' stroke-width='1.15' vector-effect='non-scaling-stroke'/><path d='M94 97C94 38 46 16-6 14' stroke='%234696dc' stroke-opacity='.13' stroke-width='1.1' vector-effect='non-scaling-stroke'/><path d='M100 94C100 48 40 24-10 22' stroke='%2346aa78' stroke-opacity='.125' stroke-width='1.2' vector-effect='non-scaling-stroke'/><path d='M91 96C91 22 64 6 10 4' stroke='%23dcb43c' stroke-opacity='.12' stroke-width='1' vector-effect='non-scaling-stroke'/><path d='M98 88C98 40 36 18-4 16' stroke='%2364696e' stroke-opacity='.11' stroke-width='1.1' vector-effect='non-scaling-stroke'/><path d='M93 100C93 58 32 34-8 32' stroke='%23dc505a' stroke-opacity='.105' stroke-width='1' vector-effect='non-scaling-stroke'/><path d='M100 82C100 52 26 30-6 28' stroke='%234696dc' stroke-opacity='.12' stroke-width='1.05' vector-effect='non-scaling-stroke'/><path d='M88 92C88 30 56 12 18 8' stroke='%2346aa78' stroke-opacity='.10' stroke-width='1' vector-effect='non-scaling-stroke'/><path d='M96 80C68 94 22 98-8 72' stroke='%23dcb43c' stroke-opacity='.11' stroke-width='1.1' vector-effect='non-scaling-stroke'/><path d='M100 86C62 100 16 90-4 62' stroke='%2364696e' stroke-opacity='.095' stroke-width='1' vector-effect='non-scaling-stroke'/><path d='M90 84C90 54 28 46-8 40' stroke='%234696dc' stroke-opacity='.10' stroke-width='1' vector-effect='non-scaling-stroke'/><path d='M95 90C86 62 24 72-6 50' stroke='%2346aa78' stroke-opacity='.09' stroke-width='1.05' vector-effect='non-scaling-stroke'/></svg>") !important;
  background-repeat:no-repeat !important;
  background-attachment:fixed !important;
  background-position:center !important;
  background-size:100% 100% !important;
  color:#252a30;
  font-family:"Dubai","IBM Plex Sans Arabic",Tahoma,"Segoe UI",Arial,sans-serif;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px 16px;
}

.auth-shell{
  width:min(420px,calc(100vw - 32px));
  min-height:0;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:22px;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
  grid-template-columns:none !important;
}

.brand-panel{
  display:flex !important;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:0;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
}
.brand-top{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  text-align:center;
}
.brand-logo{
  width:56px;
  height:36px;
  border:0;
  border-radius:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 36' fill='none'%3E%3Ccircle cx='8' cy='18' r='2.4' fill='%23b52b32'/%3E%3Cpath d='M12 18C22 8 30 8 48 14' stroke='%2320252b' stroke-width='1.2'/%3E%3Cpath d='M12 18C22 18 32 18 48 18' stroke='%23b52b32' stroke-width='1.2'/%3E%3Cpath d='M12 18C22 28 30 28 48 22' stroke='%232f5a8c' stroke-opacity='.55' stroke-width='1.1'/%3E%3C/svg%3E") center/contain no-repeat;
  box-shadow:none;
}
.brand-logo img{display:none}
.brand-name h1{
  margin:0;
  font-size:0;
  font-weight:650;
  line-height:1;
  letter-spacing:0;
}
.brand-name h1::before{
  content:"Nex";
  font-size:30px;
  font-weight:650;
  color:#20252b;
}
.brand-name h1::after{
  content:"Core";
  font-size:30px;
  font-weight:650;
  color:#b52b32;
}
.brand-name p{
  margin:6px 0 0;
  font-size:0;
  letter-spacing:3px;
  text-transform:none;
}
.brand-name p::after{
  content:"ISP SaaS";
  font-size:11px;
  font-weight:500;
  letter-spacing:3px;
  color:#7b8189;
}
.brand-copy,
.brand-panel > div:last-child{display:none !important}

.form-panel{
  width:100%;
  display:block;
  padding:32px;
  background:#ffffff;
  border:1px solid #e7e9ec;
  border-radius:16px;
  box-shadow:0 12px 35px rgba(20,30,40,.06);
}
.view{width:100%}
.view-head{margin-bottom:22px;text-align:center}
#loginView .view-head h2{
  margin:0;
  font-size:28px;
  font-weight:600;
  color:#252a30;
  line-height:1.3;
}
#loginView .view-head h2::after{
  content:"";
  display:block;
  width:28px;
  height:2px;
  margin:10px auto 0;
  background:#b52b32;
  border-radius:2px;
}
#loginView .view-head p{
  margin:10px 0 0;
  font-size:0;
  line-height:1.7;
}
#loginView .view-head p::after{
  content:"أدخل بريدك الإلكتروني أو اسم المستخدم وكلمة السر";
  font-size:13px;
  font-weight:400;
  line-height:1.7;
  color:#737b86;
}
.view-head h2{font-size:22px;font-weight:600;color:#252a30}
.view-head p{color:#737b86;font-size:13px;line-height:1.7}

label{
  display:block;
  margin:14px 0 7px;
  color:#3d4450;
  font-size:12px;
  font-weight:600;
}
.input-wrap{position:relative}
.input-wrap input,
#loginOfficeId{
  width:100% !important;
  height:52px !important;
  border:1px solid #dfe3e7 !important;
  border-radius:10px !important;
  background:#ffffff !important;
  padding:0 14px !important;
  font-size:14px;
  color:#252a30;
  outline:none;
  box-shadow:none;
}
.input-wrap input[type="password"],
.input-wrap input#password,
.input-wrap input#newPassword,
.input-wrap input#confirmPassword{padding-left:48px !important}
.input-wrap input:focus,
#loginOfficeId:focus{
  border-color:#b52b32 !important;
  box-shadow:0 0 0 3px rgba(181,43,50,.08) !important;
}
.password-toggle{
  position:absolute;
  left:8px;
  top:8px;
  width:36px;
  height:36px;
  border:0;
  border-radius:8px;
  background:#f6f7f8;
  color:#5e6670;
  cursor:pointer;
  margin:0;
  padding:0;
}

.primary,.secondary{
  width:100%;
  height:52px;
  border-radius:10px;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  margin-top:18px;
}
#loginBtn,
.primary{
  border:0;
  background:#b52b32;
  color:#ffffff;
}
#loginForm:invalid #loginBtn,
#loginBtn:disabled,
.primary:disabled{
  background:#e7c5c7;
  color:#ffffff;
  cursor:not-allowed;
}
#loginForm:valid #loginBtn:hover:not(:disabled),
.primary:hover:not(:disabled){background:#9f242b}
.secondary{
  border:1px solid #e7e9ec;
  background:#f7f8fa;
  color:#3d4450;
  margin-top:10px;
}
.forgot{
  display:block;
  margin-top:16px;
  text-align:center;
  color:#b52b32;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
}
.msg{min-height:21px;margin-top:12px;text-align:center;font-size:12px;font-weight:600}
.msg.error{color:#b52b32}
.msg.ok{color:#2f7d4a}
.steps{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:18px}
.step{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#f1f2f4;color:#737b86;font-size:11px;font-weight:600}
.step.active{background:#b52b32;color:#fff}
.step-line{width:36px;height:2px;background:#e7e9ec}
.account-card{padding:12px 14px;border:1px solid #e7e9ec;background:#f7f8fa;border-radius:10px;color:#3d4450;font-size:12px;line-height:1.7;margin-bottom:8px}
.password-rules{margin:12px 0 0;padding:12px 14px;border-radius:10px;background:#f7f8fa;color:#737b86;font-size:11px;line-height:1.8}
#companySelection small{color:#737b86}

@media (max-width:760px){
  .auth-shell{grid-template-columns:none !important;min-height:0 !important;border-radius:0 !important}
  .brand-panel{display:flex !important}
  .form-panel{padding:24px 18px}
}