/* ==========================================================
   R32 GLOBAL UI CONSISTENCY
   آخرین لایه طراحی کل سامانه
   هدف:
   - جلوگیری از متن تیره روی زمینه تیره
   - جلوگیری از متن روشن روی زمینه روشن
   - یکپارچه‌سازی فرم‌ها در همه نقش‌ها
   ========================================================== */

:root{
  --g32-navy:#09243d;
  --g32-navy-2:#0d3152;

  --g32-white:#ffffff;
  --g32-paper:#f7fafc;
  --g32-paper-2:#eef4f7;

  --g32-ink:#102a3e;
  --g32-ink-2:#29485e;
  --g32-muted:#5f788b;

  --g32-light-text:#f7fbff;
  --g32-light-muted:#c1d5e5;

  --g32-border:#c8d8e4;
}


/* ==========================================================
   1. GLOBAL SAFETY
   ========================================================== */

html,
body{
  max-width:100%;
  overflow-x:hidden;
}

*{
  box-sizing:border-box;
}


/* ==========================================================
   2. ALL FORM CONTROLS — ONE STANDARD ACROSS THE SITE
   ========================================================== */

body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
body select,
body textarea{
  background:var(--g32-white) !important;
  color:var(--g32-ink) !important;

  border:
    1px solid
    var(--g32-border) !important;

  box-shadow:
    inset 0 1px 2px
    rgba(12,43,65,.035) !important;

  opacity:1 !important;
}


/* Typed value */

body input:not([type="checkbox"]):not([type="radio"]),
body select,
body textarea{
  -webkit-text-fill-color:
    var(--g32-ink) !important;
}


/* Placeholder */

body input::placeholder,
body textarea::placeholder{
  color:var(--g32-muted) !important;
  -webkit-text-fill-color:
    var(--g32-muted) !important;
  opacity:1 !important;
}


/* Focus */

body input:focus,
body select:focus,
body textarea:focus{
  background:#fff !important;
  color:var(--g32-ink) !important;

  border-color:#25a8dc !important;

  box-shadow:
    0 0 0 3px
    rgba(37,168,220,.13) !important;

  outline:none !important;
}


/* Readonly */

body input[readonly],
body textarea[readonly]{
  background:var(--g32-paper-2) !important;
  color:#314b5e !important;
  -webkit-text-fill-color:#314b5e !important;
}


/* Disabled */

body input:disabled,
body select:disabled,
body textarea:disabled{
  background:#e8eef2 !important;
  color:#536a7b !important;
  -webkit-text-fill-color:#536a7b !important;
  opacity:1 !important;
}


/* Chrome saved/autofill */

body input:-webkit-autofill,
body input:-webkit-autofill:hover,
body input:-webkit-autofill:focus{
  -webkit-box-shadow:
    0 0 0 1000px
    #ffffff inset !important;

  -webkit-text-fill-color:
    var(--g32-ink) !important;

  caret-color:
    var(--g32-ink) !important;
}


/* Password fields specifically */

body input[type="password"]{
  background:#f8fbfd !important;
  color:var(--g32-ink) !important;
  -webkit-text-fill-color:
    var(--g32-ink) !important;
}


/* ==========================================================
   3. LIGHT LOGIN CARDS
   ========================================================== */

body .auth-card,
body .r8-login-card{
  background:#ffffff !important;
  color:var(--g32-ink) !important;

  border:
    1px solid
    #d6e2ea !important;
}


body .auth-card h1,
body .auth-card h2,
body .auth-card h3,
body .auth-card h4,
body .auth-card label,
body .auth-card b,
body .auth-card strong,

body .r8-login-card h1,
body .r8-login-card h2,
body .r8-login-card h3,
body .r8-login-card h4,
body .r8-login-card label,
body .r8-login-card b,
body .r8-login-card strong{
  color:var(--g32-ink) !important;
  opacity:1 !important;
}


body .auth-card p,
body .auth-card small,
body .auth-card .hint,

body .r8-login-card p,
body .r8-login-card small,
body .r8-login-card .hint{
  color:var(--g32-muted) !important;
  opacity:1 !important;
}


/* ==========================================================
   4. DARK LOGIN VISUALS
   ========================================================== */

body .login-story,
body .auth-brand,
body .student-login-visual{
  background:
    linear-gradient(
      145deg,
      #071c2f,
      #0f3b5e
    ) !important;

  color:var(--g32-light-text) !important;
}


body .login-story h1,
body .login-story h2,
body .login-story h3,
body .login-story b,
body .login-story strong,
body .login-story li,

body .auth-brand h1,
body .auth-brand h2,
body .auth-brand h3,
body .auth-brand b,
body .auth-brand strong,

body .student-login-visual h1,
body .student-login-visual h2,
body .student-login-visual h3,
body .student-login-visual b,
body .student-login-visual strong,
body .student-login-visual li{
  color:#ffffff !important;
  opacity:1 !important;
}


body .login-story p,
body .login-story small,
body .auth-brand p,
body .auth-brand small,
body .student-login-visual p,
body .student-login-visual small{
  color:var(--g32-light-muted) !important;
  opacity:1 !important;
}


/* ==========================================================
   5. DARK NAVIGATION AREAS
   ========================================================== */

body .sidebar{
  color:var(--g32-light-text) !important;
}


body .sidebar h1,
body .sidebar h2,
body .sidebar h3,
body .sidebar h4,
body .sidebar b,
body .sidebar strong,
body .sidebar label{
  color:#ffffff !important;
}


body .sidebar p,
body .sidebar small,
body .sidebar .muted,
body .sidebar .hint{
  color:#b9d0e2 !important;
  opacity:1 !important;
}


body .side-nav button{
  color:#d7e6f1 !important;
}


body .side-nav button.active{
  color:#ffffff !important;
}


/* ==========================================================
   6. LIGHT CARDS MUST HAVE DARK TEXT
   ========================================================== */

body .command-card,
body .r8-account-row,
body .guidance-manager-card{
  color:var(--g32-ink) !important;
}


body .command-card
:is(h1,h2,h3,h4,b,strong,label),
body .r8-account-row
:is(h1,h2,h3,h4,b,strong,label),
body .guidance-manager-card
:is(h1,h2,h3,h4,b,strong,label){
  color:var(--g32-ink) !important;
}


body .command-card
:is(p,small,.hint,.muted),
body .r8-account-row
:is(p,small,.hint,.muted),
body .guidance-manager-card
:is(p,small,.hint,.muted){
  color:var(--g32-muted) !important;
  opacity:1 !important;
}


/* ==========================================================
   7. GLOBAL TEXT READABILITY
   ========================================================== */

body label{
  font-weight:700;
}


body small,
body .hint,
body .muted{
  opacity:1;
}


/* ==========================================================
   8. BUTTON TEXT
   ========================================================== */

body .btn.primary{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}


body .btn.ghost{
  opacity:1 !important;
}


/* ==========================================================
   9. STUDENT LOGIN SPECIFIC LAYOUT CLEANUP
   ========================================================== */

body.r8-login{
  background:
    linear-gradient(
      135deg,
      #eaf2f7,
      #f6f8fa
    ) !important;

  color:var(--g32-ink) !important;
}


body.r8-login .r8-login-card{
  box-shadow:
    0 18px 50px
    rgba(18,47,67,.12) !important;
}


body.r8-login .student-login-visual{
  box-shadow:
    0 18px 50px
    rgba(7,35,57,.18) !important;
}


/* ==========================================================
   10. MOBILE
   ========================================================== */

@media(max-width:700px){

  body input,
  body select,
  body textarea{
    font-size:16px !important;
  }

}


/* R32_GLOBAL_AUTH_CONTRACT_START */

/* ==========================================================
   GLOBAL LOGIN DESIGN CONTRACT
   تمام صفحات ورود مدرسه
   ========================================================== */


/* ---------- PAGE BACKGROUND ---------- */

html body.role-login,
html body.auth-shell,
html body.r8-login,
html body .role-login,
html body .auth-shell{
  background:
    radial-gradient(
      circle at 8% 8%,
      rgba(45,169,215,.08),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #edf4f8,
      #f8fafb
    ) !important;

  color:#102a3e !important;
}


/* ==========================================================
   FORM CARD = LIGHT
   ========================================================== */

html body.role-login > .auth-card,
html body.auth-shell > .auth-card,
html body .role-login > .auth-card,
html body .auth-shell > .auth-card,
html body.r8-login .r8-login-card{
  background:#ffffff !important;

  color:#102a3e !important;

  border:
    1px solid
    #d5e1e9 !important;

  box-shadow:
    0 20px 55px
    rgba(17,52,76,.13) !important;

  color-scheme:light !important;
}


/* Form card headings */

html body.role-login > .auth-card
:is(h1,h2,h3,h4,h5,b,strong,label),

html body.auth-shell > .auth-card
:is(h1,h2,h3,h4,h5,b,strong,label),

html body .role-login > .auth-card
:is(h1,h2,h3,h4,h5,b,strong,label),

html body .auth-shell > .auth-card
:is(h1,h2,h3,h4,h5,b,strong,label),

html body.r8-login .r8-login-card
:is(h1,h2,h3,h4,h5,b,strong,label){
  color:#102a3e !important;
  -webkit-text-fill-color:#102a3e !important;
  opacity:1 !important;
  text-shadow:none !important;
}


/* Form card secondary text */

html body.role-login > .auth-card
:is(p,small,.hint,.muted,.security-note),

html body.auth-shell > .auth-card
:is(p,small,.hint,.muted,.security-note),

html body .role-login > .auth-card
:is(p,small,.hint,.muted,.security-note),

html body .auth-shell > .auth-card
:is(p,small,.hint,.muted,.security-note),

html body.r8-login .r8-login-card
:is(p,small,.hint,.muted){
  color:#5a7183 !important;
  -webkit-text-fill-color:#5a7183 !important;
  opacity:1 !important;
}


/* ==========================================================
   ALL LOGIN INPUTS = LIGHT BACKGROUND / DARK TEXT
   Higher specificity than old app.css rules
   ========================================================== */

html body.role-login > .auth-card form
input:not([type="checkbox"]):not([type="radio"]),

html body.role-login > .auth-card form
select,

html body.role-login > .auth-card form
textarea,

html body.auth-shell > .auth-card form
input:not([type="checkbox"]):not([type="radio"]),

html body.auth-shell > .auth-card form
select,

html body.auth-shell > .auth-card form
textarea,

html body .role-login > .auth-card form
input:not([type="checkbox"]):not([type="radio"]),

html body .auth-shell > .auth-card form
input:not([type="checkbox"]):not([type="radio"]),

html body.r8-login .r8-login-card form
input:not([type="checkbox"]):not([type="radio"]),

html body.r8-login .r8-login-card form
select,

html body.r8-login .r8-login-card form
textarea{
  min-height:48px !important;

  background:#f8fbfd !important;

  color:#102a3e !important;

  -webkit-text-fill-color:#102a3e !important;

  caret-color:#102a3e !important;

  border:
    1px solid
    #bfd0dc !important;

  box-shadow:
    inset 0 1px 2px
    rgba(18,50,72,.04) !important;

  opacity:1 !important;
}


/* Focus */

html body.role-login > .auth-card form
input:focus,

html body.auth-shell > .auth-card form
input:focus,

html body .role-login > .auth-card form
input:focus,

html body .auth-shell > .auth-card form
input:focus,

html body.r8-login .r8-login-card form
input:focus{
  background:#ffffff !important;

  color:#102a3e !important;

  -webkit-text-fill-color:#102a3e !important;

  border-color:#25a9df !important;

  box-shadow:
    0 0 0 4px
    rgba(37,169,223,.13) !important;

  outline:none !important;
}


/* Placeholder */

html body.role-login > .auth-card
input::placeholder,

html body.auth-shell > .auth-card
input::placeholder,

html body .role-login > .auth-card
input::placeholder,

html body .auth-shell > .auth-card
input::placeholder,

html body.r8-login .r8-login-card
input::placeholder{
  color:#71899a !important;
  -webkit-text-fill-color:#71899a !important;
  opacity:1 !important;
}


/* ==========================================================
   CHROME AUTOFILL
   ========================================================== */

html body.role-login > .auth-card
input:-webkit-autofill,

html body.role-login > .auth-card
input:-webkit-autofill:hover,

html body.role-login > .auth-card
input:-webkit-autofill:focus,

html body.auth-shell > .auth-card
input:-webkit-autofill,

html body.auth-shell > .auth-card
input:-webkit-autofill:hover,

html body.auth-shell > .auth-card
input:-webkit-autofill:focus,

html body.r8-login .r8-login-card
input:-webkit-autofill,

html body.r8-login .r8-login-card
input:-webkit-autofill:hover,

html body.r8-login .r8-login-card
input:-webkit-autofill:focus{
  -webkit-box-shadow:
    0 0 0 1000px
    #f8fbfd inset !important;

  -webkit-text-fill-color:
    #102a3e !important;

  caret-color:
    #102a3e !important;
}


/* ==========================================================
   PASSWORD
   ========================================================== */

html body.role-login > .auth-card
input[type="password"],

html body.auth-shell > .auth-card
input[type="password"],

html body .role-login > .auth-card
input[type="password"],

html body .auth-shell > .auth-card
input[type="password"],

html body.r8-login .r8-login-card
input[type="password"]{
  background:#f8fbfd !important;
  color:#102a3e !important;
  -webkit-text-fill-color:#102a3e !important;
}


/* ==========================================================
   REMEMBER / CHECK ROW
   ========================================================== */

html body.role-login > .auth-card
.remember-row,

html body.auth-shell > .auth-card
.remember-row,

html body.r8-login .r8-login-card
.remember-row,

html body.r8-login .r8-login-card
.check-line{
  background:#f7fafc !important;

  color:#17384f !important;

  border-color:#d7e3eb !important;
}


html body.role-login > .auth-card
.remember-row label,

html body.auth-shell > .auth-card
.remember-row label,

html body.r8-login .r8-login-card
.remember-row label,

html body.r8-login .r8-login-card
.check-line{
  color:#17384f !important;
}


/* ==========================================================
   PRIMARY LOGIN BUTTON
   ========================================================== */

html body.role-login > .auth-card
button[type="submit"],

html body.auth-shell > .auth-card
button[type="submit"],

html body .role-login > .auth-card
button[type="submit"],

html body .auth-shell > .auth-card
button[type="submit"],

html body.r8-login .r8-login-card
button[type="submit"]{
  background:
    linear-gradient(
      135deg,
      #078eaa,
      #286bd0
    ) !important;

  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;

  border:0 !important;

  box-shadow:
    0 10px 24px
    rgba(22,105,171,.18) !important;
}


/* ==========================================================
   STORY / INTRO CARD = DARK
   ========================================================== */

html body.role-login > .login-story,
html body.auth-shell > .auth-brand,
html body .role-login > .login-story,
html body .auth-shell > .auth-brand,
html body.r8-login .student-login-visual{
  background:
    linear-gradient(
      145deg,
      #08253f,
      #0b3556
    ) !important;

  color:#ffffff !important;

  border:
    1px solid
    rgba(91,170,220,.26) !important;

  box-shadow:
    0 20px 55px
    rgba(7,35,57,.18) !important;

  color-scheme:dark !important;
}


/* Everything important on dark story */

html body.role-login > .login-story
:is(h1,h2,h3,h4,h5,b,strong,li),

html body.auth-shell > .auth-brand
:is(h1,h2,h3,h4,h5,b,strong,li),

html body .role-login > .login-story
:is(h1,h2,h3,h4,h5,b,strong,li),

html body .auth-shell > .auth-brand
:is(h1,h2,h3,h4,h5,b,strong,li),

html body.r8-login .student-login-visual
:is(h1,h2,h3,h4,h5,b,strong,li){
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  opacity:1 !important;
}


/* Secondary story text */

html body.role-login > .login-story
:is(p,small),

html body.auth-shell > .auth-brand
:is(p,small),

html body .role-login > .login-story
:is(p,small),

html body .auth-shell > .auth-brand
:is(p,small),

html body.r8-login .student-login-visual
:is(p,small){
  color:#c6d9e8 !important;
  -webkit-text-fill-color:#c6d9e8 !important;
  opacity:1 !important;
}


/* Story rows / feature items */

html body.role-login > .login-story li,
html body.auth-shell > .auth-brand li{
  background:
    rgba(255,255,255,.055) !important;

  border:
    1px solid
    rgba(255,255,255,.12) !important;
}


/* ==========================================================
   LINKS
   ========================================================== */

html body.role-login > .login-story a,
html body.auth-shell > .auth-brand a,
html body .role-login > .login-story a,
html body .auth-shell > .auth-brand a{
  color:#d7f5ff !important;
  -webkit-text-fill-color:#d7f5ff !important;
}


/* Student back-to-home sits on light page, not dark card */

html body.r8-login .back-home{
  color:#24475f !important;
  -webkit-text-fill-color:#24475f !important;

  background:
    rgba(255,255,255,.86) !important;

  border:
    1px solid
    rgba(36,71,95,.12) !important;

  border-radius:10px !important;

  padding:7px 11px !important;

  text-decoration:none !important;
}


/* ==========================================================
   FORGOT PASSWORD / SECONDARY ACTIONS
   ========================================================== */

html body.role-login > .auth-card a,
html body.auth-shell > .auth-card a,
html body .role-login > .auth-card a,
html body .auth-shell > .auth-card a,
html body.r8-login .r8-login-card a{
  color:#096f91 !important;
  -webkit-text-fill-color:#096f91 !important;
}


/* ==========================================================
   RESPONSIVE CONTRACT
   ========================================================== */

@media(max-width:1050px){

  html body.r8-login main{
    grid-template-columns:1fr !important;
    width:min(100% - 24px,620px) !important;
    margin:auto !important;
    padding:34px 0 !important;
  }

  html body.r8-login .student-login-visual{
    display:none !important;
  }

}


@media(max-width:760px){

  html body.role-login,
  html body.auth-shell{
    grid-template-columns:1fr !important;
    padding:12px !important;
  }

  html body.role-login > .login-story,
  html body.auth-shell > .auth-brand{
    min-height:auto !important;
  }

}

/* R32_GLOBAL_AUTH_CONTRACT_END */