/*
 * Circlink Mail: the Circlink app's look over Roundcube's Elastic skin. elastic-colors.css (generated,
 * loaded first) gives Elastic Circlink's colors; this file adds the app's type, round shapes, the
 * light task menu and the login page. Tokens as in the app (client/src/styles/_theme.scss).
 */

@font-face {
  font-family: "Nunito";
  src: url("fonts/nunito.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Nunito";
  src: url("fonts/nunito-italic.woff2") format("woff2");
  font-weight: 400 800;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Baloo 2";
  src: url("fonts/baloo2.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

html {
  --cl-primary: #17629a;
  --cl-on-primary: #ffffff;
  --cl-primary-container: #d0e4ff;
  --cl-on-primary-container: #004a79;
  --cl-app-background: #f2f3f9;
  --cl-card-background: #ffffff;
  --cl-card-border: #c1c7d1;
  --cl-soft-border: #dde1e8;
  --cl-on-surface: #191c20;
  --cl-on-surface-variant: #414750;
  --cl-hover: rgba(23, 98, 154, 0.08);
  --cl-selected: rgba(23, 98, 154, 0.13);
  --cl-error: #ba1a1a;
  --cl-ring: rgba(23, 98, 154, 0.45);
  --cl-card-radius: 1.75rem;
  --cl-tile-radius: 1.25rem;
  --cl-pill-radius: 999px;
  --cl-font: "Nunito", system-ui, sans-serif;
  --cl-display-font: "Baloo 2", "Nunito", system-ui, sans-serif;
}

html.dark-mode {
  --cl-primary: #9bcbff;
  --cl-on-primary: #003256;
  --cl-primary-container: #004a79;
  --cl-on-primary-container: #d0e4ff;
  --cl-app-background: #111417;
  --cl-card-background: #191c20;
  --cl-card-border: #414750;
  --cl-soft-border: #2c3036;
  --cl-on-surface: #e1e2e7;
  --cl-on-surface-variant: #c4cad4;
  --cl-hover: rgba(155, 203, 255, 0.08);
  --cl-selected: rgba(155, 203, 255, 0.15);
  --cl-error: #ffb4ab;
  --cl-ring: rgba(155, 203, 255, 0.45);
}

/* Type: Nunito for text, Baloo 2 for titles */

html,
body,
input,
button,
select,
textarea,
.btn,
.form-control,
.popover,
.ui-dialog,
.tooltip {
  font-family: var(--cl-font);
}

h1,
h2,
h3,
.header-title,
.boxtitle,
.ui-dialog-title,
#messageheader .subject,
.message-partheaders .subject,
#message-header .subject {
  font-family: var(--cl-display-font);
  font-weight: 600;
}

body,
html.dark-mode body {
  background-color: var(--cl-app-background);
}

a:focus-visible,
.btn:focus-visible,
.form-control:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem var(--cl-ring);
}

/* Buttons and fields: pills, as in the app */

.btn {
  border-radius: var(--cl-pill-radius);
  font-weight: 700;
  text-transform: none;
}

.btn-primary,
.btn-primary:not(:disabled):not(.disabled):active,
html.dark-mode .btn-primary,
html.dark-mode .btn-primary:not(:disabled):not(.disabled):active {
  background-color: var(--cl-primary);
  border-color: var(--cl-primary);
  color: var(--cl-on-primary);
}

.btn-primary:hover,
.btn-primary:focus,
html.dark-mode .btn-primary:hover,
html.dark-mode .btn-primary:focus {
  background-color: color-mix(in srgb, var(--cl-primary) 88%, var(--cl-on-surface));
  border-color: color-mix(in srgb, var(--cl-primary) 88%, var(--cl-on-surface));
  color: var(--cl-on-primary);
}

.btn-secondary,
html.dark-mode .btn-secondary {
  background-color: transparent;
  border-color: var(--cl-card-border);
  color: var(--cl-primary);
}

.btn-secondary:hover,
.btn-secondary:focus,
html.dark-mode .btn-secondary:hover,
html.dark-mode .btn-secondary:focus {
  background-color: var(--cl-hover);
  border-color: var(--cl-card-border);
  color: var(--cl-primary);
}

input.form-control,
select.form-control,
.custom-select {
  border-radius: var(--cl-pill-radius);
  padding-left: 1rem;
  padding-right: 1rem;
}

textarea.form-control,
.recipient-input.form-control,
.input-group > .recipient-input.form-control {
  border-top-left-radius: var(--cl-tile-radius);
  border-bottom-left-radius: var(--cl-tile-radius);
}

textarea.form-control:last-child,
.recipient-input.form-control:last-child {
  border-radius: var(--cl-tile-radius);
}

/* Bootstrap's .rounded-left on the recipient fields is !important */
.input-group > .form-control.rounded-left {
  border-top-left-radius: var(--cl-tile-radius) !important;
  border-bottom-left-radius: var(--cl-tile-radius) !important;
}

.input-group > .input-group-prepend > .input-group-text {
  border-radius: var(--cl-pill-radius) 0 0 var(--cl-pill-radius);
  padding-left: 1rem;
}

.input-group > .input-group-prepend + .form-control,
.input-group > .input-group-prepend ~ input.form-control {
  border-radius: 0 var(--cl-pill-radius) var(--cl-pill-radius) 0;
  padding-left: 0.75rem;
}

.input-group > .form-control:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group > .input-group-append > .btn,
.input-group > .input-group-append > .input-group-text {
  border-radius: 0 var(--cl-pill-radius) var(--cl-pill-radius) 0;
}

.searchbar,
#layout .searchbar {
  border-radius: var(--cl-pill-radius);
}

/* The task menu: a light rail like the app's navigation, the current task marked by a dot on its
   edge (the circle from the logo) instead of a filled tile */

#layout-menu,
html.dark-mode #layout-menu {
  background: var(--cl-app-background);
  border-right: 0;
}

#layout-menu .popover-header,
html.dark-mode #layout-menu .popover-header {
  background-color: var(--cl-app-background) !important;
}

#taskmenu .special-buttons,
html.dark-mode #taskmenu .special-buttons,
#layout-menu .special-buttons a:not(:focus),
html.dark-mode #layout-menu .special-buttons a:not(:focus) {
  background: var(--cl-app-background) !important;
}

#taskmenu a,
html.dark-mode #taskmenu a {
  position: relative;
  color: var(--cl-on-surface-variant);
  border-radius: var(--cl-tile-radius);
  border-color: transparent !important;
}

#taskmenu a:hover,
#taskmenu a:focus,
html.dark-mode #taskmenu a:hover,
html.dark-mode #taskmenu a:focus {
  color: var(--cl-on-surface);
  background: var(--cl-hover);
}

#taskmenu a.selected,
#taskmenu a.selected:hover,
html.dark-mode #taskmenu a.selected,
html.dark-mode #taskmenu a.selected:hover {
  color: var(--cl-primary);
  background: var(--cl-selected);
  font-weight: 700;
}

#taskmenu .action-buttons a,
#taskmenu .action-buttons a:hover,
html.dark-mode #taskmenu .action-buttons a {
  color: var(--cl-primary);
}

#taskmenu a.logout,
#taskmenu a.logout:hover {
  color: var(--cl-error) !important;
}

@media screen and (min-width: 481px) {
  #taskmenu a {
    width: auto !important;
    margin: 2px 4px;
  }

  #taskmenu span.inner {
    font-size: 0.86rem;
    letter-spacing: -0.01em;
  }
}

/* Panels: on a big screen the columns are the app's cards on its background */

html.layout-large body:not(.task-login) #layout,
html.layout-normal body:not(.task-login) #layout {
  background: var(--cl-app-background);
}

html.layout-large body:not(.task-login) #layout > #layout-sidebar,
html.layout-large body:not(.task-login) #layout > #layout-list,
html.layout-large body:not(.task-login) #layout > #layout-content,
html.layout-normal body:not(.task-login) #layout > #layout-sidebar,
html.layout-normal body:not(.task-login) #layout > #layout-list,
html.layout-normal body:not(.task-login) #layout > #layout-content {
  margin: 0.5rem 0 0.5rem 0.5rem;
  border: 1px solid var(--cl-soft-border);
  border-radius: var(--cl-tile-radius);
  overflow: hidden;
  background-color: var(--cl-card-background);
}

html.layout-large body:not(.task-login) #layout > #layout-content,
html.layout-normal body:not(.task-login) #layout > #layout-content {
  margin-right: 0.5rem;
}

#layout > div > .header,
html.dark-mode #layout > div > .header {
  background-color: var(--cl-card-background);
  border-bottom-color: var(--cl-soft-border);
}

#layout > div > .footer,
html.dark-mode #layout > div > .footer {
  background-color: var(--cl-card-background);
}

/* Lists, menus, dialogs and notices: rounded like the app's rows and panels */

.listing li a,
.listing li.selected > a {
  border-radius: 0;
}

.unreadcount,
.listing .unreadcount,
.badge {
  border-radius: var(--cl-pill-radius);
}

.popover,
html.dark-mode .popover {
  border-radius: var(--cl-tile-radius);
  overflow: hidden;
}

.ui-dialog,
.ui-dialog.popupmessage {
  border-radius: var(--cl-card-radius) !important;
  overflow: hidden;
}

#messagestack div {
  border-radius: var(--cl-tile-radius);
}

.menu.toolbar a,
.header a.button.icon {
  border-radius: var(--cl-tile-radius);
}

/* The login page: the logo above a card on the app's background, among the rings of the app's
   pitch panel */

body.task-login {
  background-color: var(--cl-app-background);
}

body.task-login #layout,
body.task-login #layout-content {
  background: transparent;
  border: 0;
}

body.task-login #layout-content {
  position: relative;
  overflow: hidden;
}

body.task-login #layout-content::before,
body.task-login #layout-content::after {
  content: "";
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  border: 1.5px solid var(--cl-ring);
  background: var(--cl-hover);
  pointer-events: none;
}

body.task-login #layout-content::before {
  width: 38rem;
  height: 38rem;
  top: -16rem;
  left: -14rem;
}

body.task-login #layout-content::after {
  width: 30rem;
  height: 30rem;
  right: -12rem;
  bottom: -14rem;
}

body.task-login #logo {
  position: relative;
  z-index: 1;
  max-height: 72px;
  max-width: 90%;
  top: 11vh;
  opacity: 1;
}

body.task-login #login-form {
  z-index: 1;
  top: 15vh;
  max-width: 26rem;
  padding: 2rem 2rem 1.25rem;
  border: 1px solid var(--cl-card-border);
  border-radius: var(--cl-card-radius);
  background: var(--cl-card-background);
}

body.task-login #login-form .form-control,
body.task-login #login-form .input-group-text {
  height: 3.25rem;
  font-size: 1.05rem;
}

body.task-login #login-form .input-group-text,
html.dark-mode body.task-login #login-form .input-group-text {
  min-width: 3.25rem;
  justify-content: center;
  background: transparent;
  border-right: 0;
  color: var(--cl-on-surface-variant);
}

body.task-login #login-form .input-group-prepend + .form-control,
html.dark-mode body.task-login #login-form .input-group-prepend + .form-control {
  border-left: 0;
  background: transparent;
}

body.task-login #login-form .formbuttons .btn {
  height: 3rem;
  margin-top: 0.5rem;
  font-size: 1.05rem;
  text-transform: none !important;
}

body.task-login #login-footer {
  margin-top: 1rem;
  color: var(--cl-on-surface-variant);
  font-family: var(--cl-display-font);
  font-weight: 600;
}

@media screen and (max-width: 480px) {
  body.task-login #logo {
    max-height: 52px;
    top: 7vh;
  }

  body.task-login #login-form {
    top: 10vh;
    padding: 1.5rem 1.25rem 1rem;
  }
}