/*
 * GKD Mail branding for Roundcube Elastic: the GKD palette (navy #0a2463,
 * royal blue #1565d8, cyan #22c3f3), a Gmail-like compose pill, rounded
 * folder and search, and a branded login page. Loaded after Elastic's CSS.
 */
:root {
  --gkd-navy: #0a2463;
  --gkd-navy-2: #0d3384;
  --gkd-blue: #1565d8;
  --gkd-blue-dark: #1046b8;
  --gkd-cyan: #22c3f3;
  --gkd-soft: #e8f1fe;
  --gkd-bg: #f6f8fc;
  --gkd-gradient: linear-gradient(135deg, #0a2463 0%, #1565d8 55%, #22c3f3 100%);
}

/* --- Primary actions and links ------------------------------------------ */
a,
.link {
  color: var(--gkd-blue);
}

.btn-primary,
.button.mainaction,
button.mainaction,
input.mainaction,
.btn-primary:not(:disabled):not(.disabled):active {
  background: var(--gkd-blue) !important;
  border-color: var(--gkd-blue) !important;
  color: #fff !important;
  border-radius: 8px;
}

.btn-primary:hover,
.button.mainaction:hover,
button.mainaction:hover {
  background: var(--gkd-blue-dark) !important;
  border-color: var(--gkd-blue-dark) !important;
}

.form-control:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: var(--gkd-blue) !important;
  box-shadow: 0 0 0 3px rgb(21 101 216 / 22%) !important;
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::before,
input.form-check-input:checked {
  background-color: var(--gkd-blue) !important;
  border-color: var(--gkd-blue) !important;
}

/* --- Side rail (tasks) ---------------------------------------------------- */
#layout-menu {
  background: linear-gradient(180deg, var(--gkd-navy) 0%, var(--gkd-navy-2) 100%) !important;
}

/* The image itself comes from skin_logo (gkd_branding.php). */
#layout-menu #logo {
  inline-size: 44px;
  block-size: 44px;
  max-block-size: 44px;
  margin: 10px auto;
  padding: 4px;
  border-radius: 12px;
  background: #fff;
}

@media screen and (min-width: 481px) {
  #taskmenu a {
    color: #c9d6ee;
  }

  #taskmenu a:hover {
    color: #fff;
    background: rgb(255 255 255 / 8%);
  }
}

#taskmenu a.selected,
#taskmenu a.selected:hover {
  color: #fff !important;
  background: rgb(34 195 243 / 22%) !important;
  box-shadow: inset 3px 0 0 var(--gkd-cyan);
}

/* Compose: a large gradient pill, like Gmail's. */
#taskmenu a.compose {
  color: #fff !important;
  background: var(--gkd-gradient) !important;
  border-radius: 16px;
  margin: 4px 6px 10px;
  box-shadow: 0 6px 16px rgb(0 0 0 / 25%);
}

#taskmenu a.compose:hover {
  filter: brightness(1.08);
}

/* --- Folders, lists, search ----------------------------------------------- */
#layout-sidebar,
#layout-list,
#layout-content {
  background-color: #fff;
}

body {
  background-color: var(--gkd-bg);
}

ul.treelist li > a {
  border-radius: 0 999px 999px 0;
  margin-inline-end: 8px;
}

html[dir="rtl"] ul.treelist li > a {
  border-radius: 999px 0 0 999px;
}

ul.treelist li.selected > a,
ul.treelist li.selected > div > a {
  color: var(--gkd-navy) !important;
  background-color: var(--gkd-soft) !important;
  font-weight: 700;
}

ul.treelist li a .unreadcount,
.listing li .unreadcount {
  background: var(--gkd-blue) !important;
  color: #fff !important;
  border-radius: 999px;
}

.searchbar {
  margin: 8px 10px;
  border: 0 !important;
  border-radius: 999px;
  background-color: #eaf1fb !important;
}

.searchbar:focus-within {
  background-color: #fff !important;
  box-shadow: 0 1px 3px rgb(10 36 99 / 25%);
}

table.messagelist tr:hover td,
.listing li:hover {
  background-color: #f2f6fc;
}

table.messagelist tr.selected td,
table.messagelist tr.selected:hover td,
.listing li.selected,
.listing li.selected:hover {
  background-color: var(--gkd-soft) !important;
  color: var(--gkd-navy) !important;
}

table.messagelist tr.unread td {
  background-color: #fff;
}

table.messagelist tr.unread td.subject span.subject,
table.messagelist tr.unread td.subject .fromto {
  color: var(--gkd-navy);
}

table.messagelist tr.focused td,
.listing li.focused {
  outline-color: var(--gkd-blue);
}

.header {
  background-color: #fff;
}

/* --- Login page ------------------------------------------------------------ */
/* Elastic offsets the logo (top:16vh, max-height:100px) and the form (top:20vh)
 * separately; here they form one card: logo on top, form below. */
body.task-login {
  background: radial-gradient(50rem 26rem at 85% -10%, rgb(34 195 243 / 35%), transparent 60%), var(--gkd-gradient) !important;
  min-block-size: 100vh;
}

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

.task-login #layout-content {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-block-size: 100vh;
  padding: 4.5rem 1rem 2rem;
  box-sizing: border-box;
}

.task-login #logo,
.task-login #login-form {
  position: static;
  top: auto;
  box-sizing: border-box;
  inline-size: min(26rem, 100%);
  max-inline-size: none;
  margin: 0;
  background: #fff;
}

.task-login #logo {
  display: block;
  block-size: 11rem;
  max-block-size: none;
  padding: 1.75rem 2rem 0.5rem;
  object-fit: contain;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -10px 30px rgb(0 0 0 / 12%);
  opacity: 1;
}

.task-login #login-form {
  padding: 1rem 2rem 1.25rem;
  border-radius: 0 0 18px 18px;
  box-shadow: 0 24px 60px rgb(0 0 0 / 30%);
}

.task-login #login-form .formbuttons button,
.task-login #login-form #rcmloginsubmit {
  inline-size: 100%;
  min-block-size: 2.75rem;
  margin-block-start: 0.5rem;
  background: var(--gkd-gradient) !important;
  border: 0 !important;
  border-radius: 10px;
  font-weight: 600;
  font-size: 1.05rem;
}

.task-login #login-form .form-control {
  min-block-size: 2.6rem;
  border-radius: 8px;
}

.task-login #login-footer {
  margin-block-start: 1rem;
  color: #8796ad;
}

.task-login #login-footer a {
  color: var(--gkd-blue);
}

/* Language switch (gkd_branding.php), pinned to the top corner of the page. */
.task-login .gkd-lang {
  position: fixed;
  inset-block-start: 1rem;
  inset-inline-end: 1rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.25rem 0.25rem 0.6rem;
  color: #fff;
  border-radius: 999px;
  background: rgb(255 255 255 / 16%);
  backdrop-filter: blur(6px);
}

.task-login #login-footer .gkd-lang a {
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
}

.task-login #login-footer .gkd-lang a:hover {
  background: rgb(255 255 255 / 18%);
}

.task-login #login-footer .gkd-lang a.selected {
  background: #fff;
  color: var(--gkd-navy);
}

html[dir="rtl"] .task-login .gkd-lang {
  padding: 0.25rem 0.6rem 0.25rem 0.25rem;
}

@media screen and (max-width: 480px) {
  .task-login #logo {
    block-size: 8.5rem;
    padding: 1.25rem 1.25rem 0.25rem;
  }

  .task-login #login-form {
    padding: 0.75rem 1.25rem 1rem;
  }
}

/* --- Dark mode --------------------------------------------------------------- */
html.dark-mode body,
html.dark-mode #layout-sidebar,
html.dark-mode #layout-list,
html.dark-mode #layout-content,
html.dark-mode .header {
  background-color: #111a2e;
}

html.dark-mode .task-login #logo {
  opacity: 1;
}

html.dark-mode #layout-menu {
  background: linear-gradient(180deg, #071533 0%, #0a2463 100%) !important;
}

html.dark-mode ul.treelist li.selected > a,
html.dark-mode ul.treelist li.selected > div > a,
html.dark-mode table.messagelist tr.selected td,
html.dark-mode .listing li.selected {
  color: #e7eefc !important;
  background-color: #13274a !important;
}

html.dark-mode .searchbar {
  background-color: #17233d !important;
}

html.dark-mode table.messagelist tr:hover td,
html.dark-mode .listing li:hover {
  background-color: #16223a;
}

html.dark-mode table.messagelist tr.unread td {
  background-color: transparent;
}

html.dark-mode table.messagelist tr.unread td.subject span.subject,
html.dark-mode table.messagelist tr.unread td.subject .fromto {
  color: #fff;
}