/* VarpX identity for Roundcube Elastic.
   Ink #07090B, paper #F4F7F8, cyan #00D4FF, cyan deep #0099CC, mist #E4EBEF, slate #7E8C93 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Quicksand:wght@500;600;700&display=swap');

:root {
  --vx-ink: #07090B;
  --vx-ink-2: #11161A;
  --vx-paper: #F4F7F8;
  --vx-cyan: #00D4FF;
  --vx-cyan-deep: #0099CC;
  --vx-mist: #E4EBEF;
  --vx-slate: #7E8C93;
}

body, input, select, textarea, button, .btn, .popover, .ui-dialog {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
h1, h2, h3, .header-title, .boxtitle, #layout-sidebar .header .header-title,
.ui-dialog .ui-dialog-title, .formcontent legend {
  font-family: 'Quicksand', 'Nunito', system-ui, sans-serif;
  font-weight: 600;
}

/* Links and accents */
a, a:visited, .link, .listing li a:hover { color: var(--vx-cyan-deep); }
a:hover { color: var(--vx-cyan); }

/* Buttons */
.btn-primary, .btn.btn-primary, .ui-dialog .ui-dialog-buttonset .btn.mainaction,
.formbuttons .btn.mainaction, button.mainaction, .btn.mainaction {
  background-color: var(--vx-cyan-deep) !important;
  border-color: var(--vx-cyan-deep) !important;
  color: #fff !important;
}
.btn-primary:hover, .btn.mainaction:hover, button.mainaction:hover {
  background-color: #007FAA !important;
  border-color: #007FAA !important;
}
.form-control:focus, input:focus, textarea:focus, select:focus {
  border-color: var(--vx-cyan-deep) !important;
  box-shadow: 0 0 0 .2rem rgba(0, 153, 204, .25) !important;
}
.custom-control-input:checked ~ .custom-control-label::before,
.custom-switch:checked, input.form-check-input:checked {
  background-color: var(--vx-cyan-deep) !important;
  border-color: var(--vx-cyan-deep) !important;
}

/* Left menu: brand ink with cyan highlights */
#layout-menu {
  background-color: var(--vx-ink) !important;
  border-right: 1px solid #1C2328;
}
#layout-menu .popover-header { background-color: var(--vx-ink); }
#layout-menu a, #layout-menu .special-buttons a { color: var(--vx-mist) !important; }
#layout-menu a:hover, #layout-menu a:focus { color: var(--vx-cyan) !important; background-color: var(--vx-ink-2) !important; }
#layout-menu a.selected, #layout-menu .selected a { color: var(--vx-cyan) !important; background-color: var(--vx-ink-2) !important; }
#layout-menu #logo { max-height: 3.2rem; width: auto; margin: 1.4rem auto 1rem; }

/* Selected rows, unread markers, counters */
.listing li.selected, .listing li.selected > a,
table.records-table tr.selected td,
table.records-table tbody tr.selected td,
.listing li.selected > a:hover {
  background-color: rgba(0, 153, 204, .12) !important;
  color: var(--vx-ink) !important;
}
.listing li.selected > a, table.records-table tr.selected td { border-left-color: var(--vx-cyan-deep) !important; }
table.messagelist tr.unread td.subject span.subject a,
table.messagelist tr.unread .subject a { color: var(--vx-ink); font-weight: 600; }
.unreadcount, .listing li .unreadcount, #folderlist-content li .unreadcount {
  background-color: var(--vx-cyan-deep) !important;
  color: #fff !important;
}
table.messagelist tr.flagged td, table.messagelist tr.flagged td a { color: #D64545; }

/* Header bars */
.header, .layout-header, #layout-content > .header, #layout-list > .header, #layout-sidebar > .header {
  border-bottom-color: var(--vx-mist);
}
.toolbar a.button:hover, .toolbar a.button:focus { color: var(--vx-cyan-deep); }

/* Login page */
body.task-login, body.task-error, body.task-logout {
  background: radial-gradient(1200px 600px at 80% -10%, rgba(0, 212, 255, .14), transparent 60%),
              radial-gradient(900px 500px at -10% 110%, rgba(0, 153, 204, .16), transparent 60%),
              var(--vx-ink) !important;
  color: var(--vx-mist);
}
body.task-login #layout, body.task-login #layout-content,
body.task-error #layout, body.task-error #layout-content,
body.task-logout #layout, body.task-logout #layout-content { background: transparent !important; }
body.task-login #layout-content, body.task-error #layout-content { color: var(--vx-mist); }
body.task-login #logo, body.task-error #logo, body.task-logout #logo {
  max-height: 4.5rem; width: auto; margin-bottom: 2rem;
}
body.task-login #login-form {
  background: rgba(17, 22, 26, .85);
  border: 1px solid #1C2328;
  border-radius: 16px;
  padding: 2.5rem 2rem 2rem;
  max-width: 26rem;
  margin: 0 auto;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
body.task-login #login-form input.form-control {
  background-color: var(--vx-ink) !important;
  border: 1px solid #2A333A !important;
  color: var(--vx-paper) !important;
  border-radius: 10px;
}
body.task-login #login-form input.form-control::placeholder { color: var(--vx-slate); }
body.task-login #login-form .input-group-text {
  background-color: var(--vx-ink) !important;
  border-color: #2A333A !important;
  color: var(--vx-slate) !important;
}
body.task-login #login-form .formbuttons .btn.mainaction, body.task-login #rcmloginsubmit {
  width: 100%;
  border-radius: 10px;
  padding: .7rem 1rem;
  font-weight: 600;
  letter-spacing: .02em;
}
body.task-login #login-footer, body.task-login #login-footer a,
body.task-login .support-link { color: var(--vx-slate) !important; }
body.task-login #login-footer a:hover { color: var(--vx-cyan) !important; }
body.task-login #message .alert, body.task-login .ui.alert { border-radius: 10px; }