/* ============================================================
   مینادنت CRM — Login redesign (offline, self-contained)
   Shared by pages/Login.aspx and the design preview.
   All classes are mn- prefixed to avoid clashing with Bootstrap,
   style.css and style1.css. No internet/CDN assets.
   ============================================================ */

/* فونت‌ها از theme.css مرکزی می‌آیند */

/* رنگ‌ها و توکن‌های روشن/تیره از theme.css مرکزی می‌آیند (باید پیش از این فایل لود شود). */

/* ---- page body ---- */
body.mn-login-body{
  margin:0; padding:18px 16px; min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mn-font); color:var(--mn-text); background:var(--mn-bg);
  direction:rtl; text-align:right; overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
body.mn-login-body *{box-sizing:border-box}

/* ---- animated background ---- */
.mn-bg{position:fixed; inset:0; z-index:0; overflow:hidden; background:var(--mn-bg); pointer-events:none}
.mn-bg .mn-orb{position:absolute; border-radius:50%; filter:blur(52px); opacity:var(--mn-orb-op)}
.mn-bg .mn-orb.a{width:600px;height:600px;background:radial-gradient(circle,#2dd4bf,transparent 68%);top:-150px;right:-120px;animation:mn-float1 19s ease-in-out infinite alternate}
.mn-bg .mn-orb.b{width:540px;height:540px;background:radial-gradient(circle,#e11d48,transparent 68%);bottom:-170px;left:-120px;opacity:calc(var(--mn-orb-op) * .75);animation:mn-float2 23s ease-in-out infinite alternate}
.mn-bg .mn-orb.c{width:460px;height:460px;background:radial-gradient(circle,#0d9488,transparent 68%);top:40%;left:32%;opacity:calc(var(--mn-orb-op) * .65);animation:mn-float3 27s ease-in-out infinite alternate}
@keyframes mn-float1{to{transform:translate(-60px,80px) scale(1.12)}}
@keyframes mn-float2{to{transform:translate(70px,-70px) scale(1.16)}}
@keyframes mn-float3{to{transform:translate(45px,-55px) scale(.9)}}
@media (prefers-reduced-motion: reduce){.mn-bg .mn-orb,.mn-logo-card,.mn-motif{animation:none!important}}

/* ============ CARD ============ */
.mn-auth{
  position:relative; z-index:1; width:min(940px,100%);
  display:grid; grid-template-columns:1fr 1fr;   /* form (right) | brand (left) */
  background:var(--mn-panel); border:1px solid var(--mn-border);
  border-radius:var(--mn-radius); overflow:hidden; box-shadow:var(--mn-shadow-lg);
  animation:mn-rise .6s var(--mn-ease) both;
}
@keyframes mn-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ============ BRAND PANEL (left) ============ */
.mn-brand{
  position:relative; padding:34px 30px; color:#eafffb; overflow:hidden;
  background:var(--mn-brand-grad);
  display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center;
}
.mn-brand::before,.mn-brand::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.mn-brand::before{width:260px;height:260px;top:-90px;left:-70px;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.22),transparent 70%)}
.mn-brand::after{width:320px;height:320px;bottom:-120px;right:-90px;background:radial-gradient(circle,rgba(255,255,255,.10),transparent 70%)}
.mn-motif{position:absolute;inset:auto 46px 46px auto;width:200px;opacity:.15;animation:mn-motif 8s ease-in-out infinite alternate;pointer-events:none}
.mn-motif svg{width:100%;height:auto;fill:#fff}
@keyframes mn-motif{from{transform:rotate(-7deg) translate(0,0) scale(1)}to{transform:rotate(9deg) translate(-24px,-44px) scale(1.06)}}

/* logo card — glassy, glowing, floating (not plain white) */
.mn-logo-card{
  position:relative; z-index:2; padding:20px 28px 16px; border-radius:22px;
  background:linear-gradient(160deg,rgba(255,255,255,.98),rgba(236,251,250,.9));
  border:1px solid rgba(255,255,255,.75);
  box-shadow:0 30px 60px -22px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter:blur(6px); animation:mn-cardfloat 6s ease-in-out infinite alternate;
}
.mn-logo-card::after{content:"";position:absolute;inset:-3px;border-radius:24px;z-index:-1;
  background:linear-gradient(135deg,rgba(45,212,191,.55),rgba(226,58,45,.45));filter:blur(16px);opacity:.6}
@keyframes mn-cardfloat{from{transform:translateY(0)}to{transform:translateY(-9px)}}
.mn-logo-card img{display:block;width:200px;max-width:46vw;height:auto;margin:0 auto}

/* عنوان متنی CRM Login بالای فرم */
.mn-formtitle{text-align:center;font-family:'RobotoLocal',var(--mn-font);line-height:1;margin-bottom:26px;direction:ltr}
.mn-formtitle b{font-weight:700;font-size:42px;letter-spacing:2px;color:var(--mn-logo-red)}
.mn-formtitle span{font-weight:300;font-size:42px;letter-spacing:5px;color:var(--mn-text-soft);margin-left:8px}
.mn-formtitle::after{content:"";display:block;width:54px;height:3px;border-radius:2px;background:var(--mn-primary);opacity:.85;margin:16px auto 0}

/* contact */
.mn-contact{position:relative;z-index:2;margin-top:26px;color:#eafffb}
.mn-contact h3{display:inline-flex;align-items:center;gap:8px;margin:0 0 12px;font-size:15px;font-weight:700}
.mn-contact h3 svg{width:17px;height:17px;stroke:currentColor;stroke-width:2;fill:none}
.mn-contact .mn-nums{display:flex;flex-direction:column;gap:7px}
.mn-contact .mn-nums a{color:#eafffb;font-size:16px;font-weight:600;letter-spacing:.6px;text-decoration:none;direction:ltr;opacity:.96;transition:.15s}
.mn-contact .mn-nums a:hover{opacity:1;transform:translateY(-1px)}

/* version + copyright */
.mn-brandmeta{position:relative;z-index:2;margin-top:26px;padding-top:20px;border-top:1px solid rgba(255,255,255,.18);width:94%;max-width:420px}
.mn-brandmeta .mn-ver{display:inline-block;direction:ltr;font-weight:700;color:#fff;text-decoration:none;font-size:12px;letter-spacing:.5px;padding:4px 13px;border:1px solid rgba(255,255,255,.30);border-radius:999px;margin-bottom:12px;transition:.18s}
.mn-brandmeta .mn-ver:hover{text-decoration:none;background:rgba(255,255,255,.12)}
.mn-brandmeta .mn-copy{color:rgba(234,255,251,.78);font-size:11.5px;line-height:1.7;text-align:center}
.mn-brandmeta .mn-copy p{margin:0}
.mn-brandmeta .mn-copy .mn-copy-l1,
.mn-brandmeta .mn-copy .mn-copy-l2{display:block}
.mn-brandmeta .mn-copy .mn-copy-l1{color:rgba(234,255,251,.72);font-weight:500}
.mn-brandmeta .mn-copy .mn-copy-l2{margin-top:4px;color:rgba(234,255,251,.88);font-weight:500;white-space:nowrap}
.mn-brandmeta .mn-copy a{color:#fff;text-decoration:none;font-weight:700}
.mn-brandmeta .mn-copy a:hover{text-decoration:underline !important}

/* ============ FORM PANEL (right) ============ */
.mn-form{padding:36px 40px;display:flex;flex-direction:column;justify-content:center;position:relative}

.mn-form-top{position:absolute;top:18px;left:34px;z-index:5;margin:0}
/* سوییچ روز / شب — هر دو آیکون دیده می‌شود + برچسب */
.mn-theme{position:relative;width:64px;height:32px;border-radius:999px;border:1px solid var(--mn-border);background:var(--mn-panel-2);cursor:pointer;padding:0;direction:ltr;transition:background .25s,border-color .25s;flex:0 0 auto}
.mn-theme .mn-theme-trackic{position:absolute;top:50%;transform:translateY(-50%);width:15px;height:15px;stroke-width:2;fill:none;opacity:.6}
.mn-theme .mn-theme-moon{right:9px;stroke:#64748b}
.mn-theme .mn-theme-sun{left:9px;stroke:#fbbf24;display:none}
.mn-theme .mn-theme-knob{position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.3);display:grid;place-items:center;transition:left .28s var(--mn-ease),background .25s}
.mn-theme .mn-theme-knob svg{width:15px;height:15px;stroke-width:2;fill:none}
.mn-theme .mn-theme-knob .ks{stroke:#f59e0b}
.mn-theme .mn-theme-knob .km{stroke:#5eead4;display:none}
:root[data-theme="dark"] .mn-theme{background:#0b2b29;border-color:var(--mn-primary)}
:root[data-theme="dark"] .mn-theme .mn-theme-knob{left:35px;background:#04201d}
:root[data-theme="dark"] .mn-theme .mn-theme-moon{display:none}
:root[data-theme="dark"] .mn-theme .mn-theme-sun{display:block}
:root[data-theme="dark"] .mn-theme .mn-theme-knob .ks{display:none}
:root[data-theme="dark"] .mn-theme .mn-theme-knob .km{display:block}
.mn-theme-label{font-size:12.5px;color:var(--mn-muted);user-select:none;white-space:nowrap}
/* حذف کادر/outline پیش‌فرض موقع کلیک + حلقهٔ نرم فقط برای کیبورد */
.mn-theme,.mn-eye,.mn-btn,.mn-btn-wrap input[type="submit"],.capTaCheck .btnrefreshcaptcha{-webkit-tap-highlight-color:transparent}
.mn-theme:focus,.mn-eye:focus,.mn-btn:focus,.mn-btn-wrap input[type="submit"]:focus,.capTaCheck .btnrefreshcaptcha:focus,.capTaCheck #txtMyCaptcha1:focus{outline:none !important}
.mn-theme:focus-visible{box-shadow:0 0 0 4px rgba(13,148,136,.22)}
.mn-eye:focus-visible,.capTaCheck .btnrefreshcaptcha:focus-visible{box-shadow:0 0 0 3px rgba(13,148,136,.22)}

.mn-head{margin-bottom:20px}
.mn-head h1{margin:0 0 8px;font-family:'VazirDisplay',var(--mn-font);font-size:27px;font-weight:700;letter-spacing:0;word-spacing:-3px;color:var(--mn-text)}
.mn-head h1 .mn-crm{font-family:var(--mn-font);color:var(--mn-logo-red);letter-spacing:.5px;margin:0 1px}
.mn-head p{margin:0;color:var(--mn-text-soft);font-size:14px;font-weight:500;letter-spacing:.1px}

/* returning-user chip */
.mn-userchip{margin-bottom:16px}
.mn-userchip img{border-width:0;width:64px;height:64px;border-radius:50%;object-fit:cover;box-shadow:var(--mn-shadow-sm)}
.mn-userchip .userInfo{margin-top:8px;font-size:14px;font-weight:600;color:var(--mn-text)}

/* messages */
.mn-messages{box-shadow:none !important;background:transparent !important;width:100%;display:block;text-align:center;margin-bottom:0}
.mn-messages > span:empty{display:none}
/* پیام‌های خطا / هشدار / موفقیت — مدرن */
.mn-messages .message-error,.mn-messages .message-warning,.mn-messages .message-success,
div.messages div.message-error,div.messages div.message-warning,div.messages div.message-success{
  border-radius:12px !important;padding:12px 14px !important;font-size:13px !important;line-height:1.7 !important;
  text-align:right !important;border:1px solid transparent !important;box-shadow:none !important;min-height:0 !important;
  height:auto !important;margin:0 0 14px !important;font-family:var(--mn-font) !important;
}
div.messages div.message-error{background:rgba(225,29,72,.10) !important;border-color:rgba(225,29,72,.30) !important;color:#be123c !important}
div.messages div.message-warning{background:rgba(234,179,8,.12) !important;border-color:rgba(234,179,8,.40) !important;color:#a16207 !important}
div.messages div.message-success{background:rgba(13,148,136,.10) !important;border-color:rgba(13,148,136,.30) !important;color:#0f766e !important}
:root[data-theme="dark"] div.messages div.message-error,:root:not([data-theme="light"]) div.messages div.message-error{color:#fb7185 !important}
:root[data-theme="dark"] div.messages div.message-warning,:root:not([data-theme="light"]) div.messages div.message-warning{color:#fcd34d !important}
:root[data-theme="dark"] div.messages div.message-success,:root:not([data-theme="light"]) div.messages div.message-success{color:#5eead4 !important}

/* fields */
.mn-field{margin-bottom:14px}
.mn-field .mn-flabel{display:block;font-size:12.5px;color:var(--mn-text-soft);margin-bottom:7px;font-weight:500}
.mn-control{position:relative;display:flex;align-items:center}
.mn-control .mn-ic{position:absolute;right:14px;width:19px;height:19px;color:var(--mn-muted);pointer-events:none;z-index:2}
.mn-control .mn-ic svg{width:100%;height:100%;stroke:currentColor;stroke-width:1.9;fill:none}
/* the actual input (asp:TextBox renders <input>) */
.mn-input,.mn-control input{
  width:100% !important;font-family:var(--mn-font) !important;font-size:14px;color:var(--mn-text);
  background:var(--mn-input-bg) !important;border:1.5px solid var(--mn-border) !important;border-radius:var(--mn-radius-sm) !important;
  padding:13px 44px 13px 14px !important;outline:none;height:auto !important;
  transition:border-color .18s,background .18s,box-shadow .18s;box-shadow:none !important;
}
.mn-control input::placeholder{color:var(--mn-muted);opacity:.75}
.mn-control input:focus{border-color:var(--mn-primary) !important;background:var(--mn-input-bg-focus) !important;box-shadow:var(--mn-ring) !important}
.mn-input.ltr,.mn-control input.ltr{direction:ltr;text-align:right}
/* password field: room for the eye on the left */
.mn-field-pass .mn-control input{padding-left:44px !important}
.mn-eye{position:absolute;left:10px;width:30px;height:30px;border:0;background:transparent;color:var(--mn-muted);cursor:pointer;border-radius:8px;display:grid;place-items:center;z-index:3}
.mn-eye:hover{color:var(--mn-primary)}
.mn-eye svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.9;fill:none}

/* actions */
.mn-actions{margin-top:6px}
.mn-btn-wrap .Bkimage.check{display:none}
.mn-btn,.mn-btn-wrap input[type="submit"]{
  width:100% !important;border:0 !important;cursor:pointer;font-family:var(--mn-font) !important;font-weight:600;font-size:15.5px;
  color:var(--mn-on-primary) !important;border-radius:var(--mn-radius-sm) !important;padding:14px 18px !important;height:auto !important;
  background:linear-gradient(180deg,var(--mn-primary),var(--mn-primary-strong)) !important;
  box-shadow:0 12px 22px -10px rgba(13,148,136,.6) !important;transition:transform .12s var(--mn-ease),box-shadow .2s,filter .2s;
}
.mn-btn:hover,.mn-btn-wrap input[type="submit"]:hover{transform:translateY(-1px);box-shadow:0 18px 30px -12px rgba(13,148,136,.7) !important;filter:brightness(1.03)}
.mn-btn:active,.mn-btn-wrap input[type="submit"]:active{transform:translateY(0)}

/* add-account / minor links */
.mn-newaccount{margin-top:14px;text-align:center}
.mn-newaccount span{color:var(--mn-link);font-size:13px;cursor:pointer}
.mn-newaccount span:hover{text-decoration:underline}

/* کپچا (هنگام خطای ورود) — استایل مدرن */
.capTaCheck{margin-top:16px;padding:14px 16px;border:1px dashed var(--mn-border);border-radius:12px;background:var(--mn-panel-2);text-align:center}
.capTaCheck::before{content:"کد امنیتی تصویر را وارد کنید";display:block;font-size:12px;color:var(--mn-muted);margin-bottom:11px}
.capTaCheck .field > div{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.capTaCheck #MyCaptcha1{width:auto !important;height:40px !important;border-radius:8px !important;border:1px solid var(--mn-border) !important;background:#fff !important;float:none !important;margin:0 !important;padding:2px 4px !important;direction:ltr}
.capTaCheck #txtMyCaptcha1{width:130px !important;font-family:var(--mn-font) !important;font-size:15px;text-align:center;letter-spacing:3px;background:var(--mn-input-bg) !important;border:1.5px solid var(--mn-border) !important;border-radius:10px !important;padding:9px 10px !important;color:var(--mn-text);outline:none}
.capTaCheck #txtMyCaptcha1:focus{border-color:var(--mn-primary) !important;box-shadow:var(--mn-ring)}
.capTaCheck .btnrefreshcaptcha{background:var(--mn-primary) !important;background-image:none !important;width:36px !important;height:36px !important;border-radius:9px !important;display:inline-flex !important;align-items:center;justify-content:center;cursor:pointer;margin:0 !important;float:none !important;padding:0 !important}
.capTaCheck .btnrefreshcaptcha::before{content:"\21BB";color:#fff;font-size:19px;line-height:1;font-weight:700}
@keyframes mn-spin{to{transform:rotate(360deg)}}
.capTaCheck .btnrefreshcaptcha.refreshing::before{animation:mn-spin .6s linear infinite}

/* ============ responsive ============ */
@media (max-width:860px){
  .mn-auth{grid-template-columns:1fr}
  .mn-brand{order:-1;padding:28px 24px}
  .mn-form{padding:28px 24px}
  .mn-logo-card img{width:170px}
}