:root {
  --extra-primary: #133E44;
  --extra-dark: #0D282C;
  --extra-accent: #C5D267;
  --extra-surface: #F8F7F2;
}

body.task-login {
  background: linear-gradient(135deg,#0D282C,#133E44 55%,#1C535B) !important;
  color: white;
  font-family: 'Plus Jakarta Sans','IBM Plex Sans Arabic',sans-serif;
}

body.task-login #layout,
body.task-login #layout-content {
  background: transparent !important;
}

body.task-login #layout-content {
  min-height: 100vh;
  background:
    linear-gradient(135deg,rgba(13,40,44,.88),rgba(19,62,68,.68)),
    url('../images/extra-hero.jpg') center/cover no-repeat !important;
}

body.task-login #login-form {
  background: rgba(13,40,44,.80) !important;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 25px 70px rgba(0,0,0,.25);
  backdrop-filter: blur(18px);
}

body.task-login #login-form label {
  color: #fff !important;
}

body.task-login #login-form input:not([type="submit"]) {
  background: rgba(255,255,255,.96) !important;
  color: #133E44 !important;
  border-radius: 10px !important;
}

body.task-login #login-form button[type="submit"],
body.task-login #login-form input[type="submit"] {
  background: #C5D267 !important;
  color: #0D282C !important;
  border-color: #C5D267 !important;
  border-radius: 10px !important;
  font-weight: 700;
}

body.task-login #login-form button[type="submit"]:hover,
body.task-login #login-form input[type="submit"]:hover {
  background: #b8c659 !important;
}

body.task-login #logo {
  max-width: 300px !important;
  height: auto !important;
  object-fit: contain;
}

body.task-login #matrix-bg {
  display: none !important;
}

/* EXTRA LOGISTICS — login finishing touches */

html:has(body.task-login),
body.task-login {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    min-height: 100% !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow-x: hidden !important;
}

body.task-login #layout,
body.task-login #layout-content,
body.task-login #layout-content > div {
    border-radius: 0 !important;
}

body.task-login #layout {
    width: 100% !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.task-login #layout-content {
    width: 100% !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    background:
      linear-gradient(
        135deg,
        rgba(13,40,44,.82),
        rgba(19,62,68,.65)
      ),
      url('../images/extra-hero.jpg') center center / cover no-repeat !important;
}

body.task-login .extra-login-identity {
    width: 100%;
    max-width: 340px;
    margin: 0 auto 25px;
    text-align: center;
}

body.task-login .extra-login-identity img {
    display: block;
    width: 260px;
    max-width: 90%;
    height: auto;
    margin: 0 auto 12px;
    object-fit: contain;
}

body.task-login .extra-login-identity span {
    display: block;
    color: #dce7e4;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
}

body.task-login #login-form {
    border-radius: 18px !important;
}

@media (max-width: 600px) {
    body.task-login .extra-login-identity img {
        width: 210px;
    }
}

/* EXTRA LOGISTICS — identity alignment */
body.task-login #layout-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
}

body.task-login .extra-login-identity {
    position: relative !important;
    width: 320px !important;
    max-width: calc(100vw - 32px) !important;
    margin: 0 auto 22px !important;
    text-align: center !important;
}

body.task-login #extra-company-logo,
body.task-login .extra-login-identity img {
    display: block !important;
    width: 260px !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto 10px !important;
    object-fit: contain !important;
}

body.task-login .extra-login-identity span {
    color: #fff !important;
    font-size: 11px !important;
    letter-spacing: 2px !important;
}

body.task-login #login-form {
    margin: 0 auto !important;
}

/* EXTRA LOGISTICS — centered login composition */
body.task-login #layout-content {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    padding: 36px 20px !important;
    box-sizing: border-box !important;
    gap: 22px !important;
}

body.task-login .extra-login-identity {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    float: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
    text-align: center !important;
}

body.task-login #login-form {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    float: none !important;
    margin: 0 auto !important;
    flex: 0 0 auto !important;
    width: 320px !important;
    max-width: calc(100vw - 40px) !important;
    box-sizing: border-box !important;
}

body.task-login .extra-login-identity img {
    width: 230px !important;
    max-width: 100% !important;
    height: auto !important;
}

body.task-login #layout-content > * {
    flex-shrink: 0;
}

@media (max-height: 650px) {
    body.task-login #layout-content {
        justify-content: flex-start !important;
        padding-top: 28px !important;
        padding-bottom: 28px !important;
    }
}

/* EXTRA LOGISTICS — 3X Logo & Branding */

body.task-login .extra-login-identity {
    width: 100% !important;
    max-width: 900px !important;
    margin: 0 auto 22px !important;
    text-align: center !important;
}

body.task-login #extra-company-logo,
body.task-login .extra-login-identity img {
    width: 690px !important;
    max-width: 90vw !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 auto 16px !important;
    object-fit: contain !important;
}

body.task-login .extra-login-identity span {
    font-size: 33px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    line-height: 1.3 !important;
    color: #fff !important;
}

@media (max-width: 768px) {
    body.task-login #extra-company-logo,
    body.task-login .extra-login-identity img {
        width: 90vw !important;
    }

    body.task-login .extra-login-identity span {
        font-size: clamp(15px, 4vw, 33px) !important;
    }
}

/* EXTRA LOGISTICS — balanced branding size */
body.task-login #extra-company-logo,
body.task-login .extra-login-identity img {
    width: 460px !important;
    max-width: 85vw !important;
    height: auto !important;
    margin: 0 auto 12px !important;
}

body.task-login .extra-login-identity span {
    font-size: clamp(15px, 2.5vw, 22px) !important;
    font-weight: 600 !important;
    letter-spacing: 1.5px !important;
}

body.task-login .extra-login-identity {
    margin-bottom: 18px !important;
}



/* EXTRA LOGISTICS — Keep background fixed, move content only */
body.task-login #layout-content {
    transform: none !important;
}

@media (min-width: 769px) {
    body.task-login .extra-login-identity,
    body.task-login #login-form {
        position: relative !important;
        top: -90px !important;
    }
}

@media (max-width: 768px) {
    body.task-login .extra-login-identity,
    body.task-login #login-form {
        position: relative !important;
        top: -20px !important;
    }
}