/* ARE Tahiti theme for Roundcube Elastic. Ocean teal from the brand photos. */
:root {
  --are-deep: #08495a;
  --are-deeper: #05303b;
  --are-teal: #0e95a8;
  --are-teal-dark: #0b7f8f;
  --are-lagoon: #40c4d9;
}

/* ---------- Sign-in page ---------- */
body.task-login {
  background: var(--are-deeper) url("images/login-bg.jpg") center 40% / cover no-repeat fixed;
}
body.task-login::before {
  content: "";
  position: fixed; inset: 0;
  background: linear-gradient(160deg, rgba(5, 48, 59, .55) 0%, rgba(5, 48, 59, .15) 45%, rgba(5, 48, 59, .65) 100%);
  pointer-events: none;
}
body.task-login #layout,
body.task-login #layout-content { background: transparent !important; }
body.task-login #layout-content {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 100vh; padding: 24px 16px;
}
/* one card: deep-teal header (logo + tagline) on top of the light form */
body.task-login #logo {
  box-sizing: border-box;
  width: min(380px, 100%) !important; max-width: 100% !important; max-height: none !important; height: auto;
  margin: 0 auto !important; padding: 30px 56px 12px;
  background: rgba(5, 48, 59, .82);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 20px 50px rgba(3, 30, 38, .35);
}
#are-tagline {
  box-sizing: border-box;
  width: min(380px, 100%); margin: 0 auto !important; padding: 0 16px 22px;
  background: rgba(5, 48, 59, .82);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: #bfeef5; text-align: center;
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 600;
}
@media (max-width: 480px) {
  body.task-login #logo { padding: 24px 36px 10px; }
  #are-tagline { font-size: .62rem; letter-spacing: .1em; }
  body.task-login #login-form { padding: 22px 18px 18px !important; }
}
body.task-login #login-form {
  width: min(380px, 100%) !important; max-width: 100%;
  margin: 0 auto !important;
  padding: 28px 28px 22px !important;
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border: 0;
  border-radius: 0 0 18px 18px;
  box-shadow: 0 20px 50px rgba(3, 30, 38, .45);
}
body.task-login #logo { order: 1; position: static !important; top: auto !important; }
body.task-login #are-tagline { order: 2; }
body.task-login #login-form { order: 3; position: static !important; top: auto !important; }
body.task-login #login-form table,
body.task-login #login-form tbody,
body.task-login #login-form tr { display: block; width: 100%; margin: 0; }
body.task-login #login-form td.title { display: none !important; }
/* the cell itself is the input group: keep icon and field side by side */
body.task-login #login-form td.input {
  display: flex !important; flex-wrap: nowrap; align-items: stretch;
  width: 100%; padding: 0 0 12px;
}
body.task-login #login-form td.input .input-group-prepend { display: flex; }
body.task-login #login-form td.input .input-group-text {
  height: 46px; border-radius: 10px 0 0 10px; background: #eef6f8; border-color: #c9d7dc; color: var(--are-deep);
}
body.task-login #login-form td.input input.form-control { flex: 1 1 auto; min-width: 0; border-radius: 0 10px 10px 0 !important; }
body.task-login #login-form input.form-control {
  height: 46px; border-radius: 10px; font-size: 1rem;
  border: 1px solid #c9d7dc; background: #fff;
}
body.task-login #login-form input.form-control:focus {
  border-color: var(--are-teal); box-shadow: 0 0 0 3px rgba(14, 149, 168, .25);
}
body.task-login #rcmloginsubmit {
  width: 100%; height: 46px; border-radius: 10px; margin-top: 6px;
  font-size: 1rem; font-weight: 600; letter-spacing: .03em;
  background: var(--are-teal); border-color: var(--are-teal); color: #fff;
}
body.task-login #rcmloginsubmit:hover,
body.task-login #rcmloginsubmit:focus { background: var(--are-teal-dark); border-color: var(--are-teal-dark); }
body.task-login #login-footer {
  margin-top: 14px; text-align: center; color: #5d7781; font-size: .78rem; letter-spacing: .04em;
}
body.task-login #login-footer a { color: var(--are-teal-dark); }
body.task-login #message .alert,
body.task-login #messagestack div { border-radius: 10px; }

/* ---------- Main mail screens ---------- */
#layout-menu {
  background: linear-gradient(180deg, var(--are-deep) 0%, var(--are-deeper) 100%) !important;
  color: #fff;
}
#layout-menu .popover-header { background: transparent !important; }
#layout-menu #logo { max-height: 40px !important; width: auto; margin: 14px auto 10px; }
#layout-menu a,
#layout-menu .menu a,
#layout-menu .special-buttons a { color: rgba(255, 255, 255, .82) !important; }
#layout-menu a:hover,
#layout-menu a:focus,
#layout-menu .menu a.selected {
  color: #fff !important; background-color: rgba(64, 196, 217, .22) !important;
}
#layout-menu .menu a.selected::before { color: var(--are-lagoon); }

.btn-primary, .button.mainaction, .btn.mainaction, .floating-action-buttons .button {
  background-color: var(--are-teal) !important; border-color: var(--are-teal) !important; color: #fff !important;
}
.btn-primary:hover, .button.mainaction:hover, .btn.mainaction:hover {
  background-color: var(--are-teal-dark) !important; border-color: var(--are-teal-dark) !important;
}
a, .listing li a.unread, .header-title { color: var(--are-teal-dark); }
.listing li.selected, table.listing tr.selected td, table.records-table tr.selected td {
  background-color: #dff3f6 !important;
}
.listing li.selected > a, .listing li.selected > a .unreadcount { color: var(--are-deep) !important; }
.badge-primary, .unreadcount { background-color: var(--are-teal) !important; color: #fff !important; }

/* Dark mode: keep the brand menu, soften the selection colour */
html.dark-mode .listing li.selected,
html.dark-mode table.listing tr.selected td { background-color: rgba(64, 196, 217, .18) !important; }