:root {
  --msa-navy: #0d2a4a;
  --msa-navy-2: #173b63;
  --msa-turquoise: #13a8b5;
  --msa-turquoise-2: #21bec9;
  --msa-bg: #f5f8fb;
  --msa-panel: #ffffff;
  --msa-border: #e5ebf1;
  --msa-text: #132238;
  --msa-muted: #708096;
  --msa-shadow: 0 14px 40px rgba(18, 47, 76, .10);
}

html, body { background: var(--msa-bg); color: var(--msa-text); }
a { color: var(--msa-navy-2); }
a:hover { color: var(--msa-turquoise); }

body.task-login {
  background:
    radial-gradient(circle at 12% 18%, rgba(33,190,201,.16), transparent 32rem),
    radial-gradient(circle at 88% 82%, rgba(13,42,74,.10), transparent 30rem),
    linear-gradient(135deg, #f8fbfd 0%, #eef5f8 100%);
}
.task-login #layout,
.task-login #layout-content { background: transparent; }

.task-login #login-form {
  max-width: 430px;
  margin: auto;
  padding: 38px 38px 30px;
  border: 1px solid rgba(229,235,241,.92);
  border-radius: 22px;
  background: rgba(255,255,255,.94);
  box-shadow: var(--msa-shadow);
  backdrop-filter: blur(12px);
}
.task-login #login-form:before {
  content: "MSA Connect";
  display: block;
  text-align: center;
  margin-bottom: 3px;
  color: var(--msa-navy);
  font-size: 1.55rem;
  font-weight: 750;
}
.task-login #login-form:after {
  content: "Kurumsal e-posta erişimi";
  display: block;
  text-align: center;
  margin-top: 18px;
  color: var(--msa-muted);
  font-size: .86rem;
}
.task-login .formbuttons .button,
.task-login button.mainaction,
.task-login input.button.mainaction {
  border: 0;
  border-radius: 12px;
  min-height: 46px;
  background: linear-gradient(135deg, var(--msa-navy) 0%, var(--msa-turquoise) 100%);
  box-shadow: 0 8px 18px rgba(19,168,181,.22);
  font-weight: 700;
}
.task-login input[type="text"],
.task-login input[type="email"],
.task-login input[type="password"] {
  min-height: 46px;
  border-radius: 11px;
  border-color: var(--msa-border);
  background: #fbfdff;
}
.task-login input:focus {
  border-color: var(--msa-turquoise);
  box-shadow: 0 0 0 3px rgba(19,168,181,.12);
}

#layout { background: var(--msa-bg); }
#layout > div,
#layout-sidebar,
#layout-list,
#layout-content { border-color: var(--msa-border); }
#layout-sidebar { background: #fbfdff; }
#layout-list,
#layout-content { background: var(--msa-panel); }

#taskmenu { background: var(--msa-navy); }
#taskmenu a { color: rgba(255,255,255,.82); }
#taskmenu a:hover,
#taskmenu a.selected {
  color: #fff;
  background: rgba(255,255,255,.10);
}

.folderlist li a {
  border-radius: 10px;
  margin: 2px 8px;
}
.folderlist li.selected > a,
.folderlist li a:hover {
  background: rgba(19,168,181,.10);
  color: var(--msa-navy);
}
.folderlist li.selected > a { font-weight: 700; }

#mailtoolbar .compose,
a.compose,
.button.compose {
  border-radius: 11px !important;
  background: linear-gradient(135deg, var(--msa-navy) 0%, var(--msa-turquoise) 100%) !important;
  color: #fff !important;
  box-shadow: 0 7px 16px rgba(19,168,181,.18);
}

.header,
.toolbar,
#layout-list .header,
#layout-content .header { border-color: var(--msa-border); }

.toolbar a.button,
.toolbar .button { border-radius: 9px; }

.messagelist { background: #fff; }
.messagelist tr,
.listing tbody tr { border-color: #edf1f5; }
.messagelist tr:hover,
.listing tbody tr:hover { background: #f8fbfd; }
.messagelist tr.unread td,
.messagelist tr.unread span.subject {
  font-weight: 700;
  color: #10253e;
}
.messagelist tr.selected td,
.listing tr.selected td {
  background: rgba(19,168,181,.085) !important;
}

.searchbar,
input[type="search"] { border-radius: 12px !important; }

.popupmenu,
.ui-dialog,
.menu.pagenav {
  border: 1px solid var(--msa-border);
  border-radius: 14px;
  box-shadow: var(--msa-shadow);
}

input, select, textarea, .form-control { border-color: var(--msa-border); }
input:focus, select:focus, textarea:focus, .form-control:focus {
  border-color: var(--msa-turquoise);
  box-shadow: 0 0 0 3px rgba(19,168,181,.10);
}

button.mainaction,
input.button.mainaction,
.button.mainaction {
  background: var(--msa-navy);
  border-color: var(--msa-navy);
  border-radius: 10px;
}

@media (max-width: 768px) {
  .task-login #login-form {
    margin: 20px 16px;
    padding: 28px 22px 24px;
    border-radius: 18px;
  }
}

html.dark-mode {
  --msa-bg: #101820;
  --msa-panel: #17222d;
  --msa-border: #273643;
  --msa-text: #eef5f8;
  --msa-muted: #9fb0bf;
}
html.dark-mode body,
html.dark-mode #layout {
  background: var(--msa-bg);
  color: var(--msa-text);
}
html.dark-mode #layout-sidebar,
html.dark-mode #layout-list,
html.dark-mode #layout-content,
html.dark-mode .messagelist {
  background: var(--msa-panel);
  color: var(--msa-text);
}



:root {
  --msa-login-bg-image: linear-gradient(135deg, #f8fbfd 0%, #eef5f8 100%);
}

body.task-login {
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

body.task-login:before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  background-image: var(--msa-login-bg-image);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  transform: scale(1.02);
  transition: opacity .45s ease, transform .6s ease;
  opacity: 1;
}

body.task-login:after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(135deg, rgba(9, 23, 38, .38) 0%, rgba(9, 23, 38, .16) 42%, rgba(9, 23, 38, .24) 100%),
    radial-gradient(circle at 15% 15%, rgba(255,255,255,.10), transparent 28%),
    radial-gradient(circle at 85% 78%, rgba(19,168,181,.10), transparent 24%);
}

body.task-login #layout,
body.task-login #layout-content,
body.task-login #layout-content .boxcontent,
body.task-login #layout-content .content,
body.task-login #layout-content .boxtitle {
  position: relative;
  z-index: 1;
}

body.task-login #layout-content {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
}

.task-login #login-form {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  padding: 36px 34px 28px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 24px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 18px 55px rgba(5, 19, 33, .18);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.task-login #login-form:before {
  margin-bottom: 8px;
}

.task-login #login-form:after {
  margin-top: 16px;
}

.task-login .box-inner,
.task-login .boxcontent {
  background: transparent !important;
}

@media (max-width: 1024px) {
  body.task-login:before {
    background-position: center center;
  }
}

@media (max-width: 768px) {
  body.task-login #layout-content {
    align-items: center;
    padding: 18px;
  }

  .task-login #login-form {
    max-width: 100%;
    margin: 0;
    padding: 26px 20px 22px;
    border-radius: 18px;
    background: rgba(255,255,255,.82);
  }

  .task-login #login-form:before {
    font-size: 1.4rem;
  }

  .task-login #login-form:after {
    font-size: .82rem;
  }
}

@media (max-width: 480px) {
  body.task-login #layout-content {
    padding: 14px;
  }

  .task-login #login-form {
    padding: 22px 16px 18px;
    border-radius: 16px;
  }

  .task-login input[type="text"],
  .task-login input[type="email"],
  .task-login input[type="password"] {
    min-height: 44px;
  }

  .task-login .formbuttons .button,
  .task-login button.mainaction,
  .task-login input.button.mainaction {
    min-height: 44px;
  }
}