/* somaro brand layer for Elastic. Loaded after recolor.css.
   Palette matches somaro.tech and /admin: navy #0b0f14 / #121b26 / #1f2c3a,
   accent gradient #4cc9f0 -> #7b61ff, UI violet #6347ef. */

:root {
  --s-bg: #0b0f14;
  --s-bg2: #0f1620;
  --s-card: #121b26;
  --s-line: #1f2c3a;
  --s-input: #0b121b;
  --s-fg: #e8eef5;
  --s-muted: #8aa0b4;
  --s-cyan: #4cc9f0;
  --s-violet: #7b61ff;
  --s-ui: #6347ef;
  --s-grad: linear-gradient(90deg, #4cc9f0, #7b61ff);
}

/* ---------------- Links ----------------
   :where() keeps specificity equal to Elastic's bare `a` rule, so only the
   default link colour changes; components with their own colours keep them. */
a { color: #5236e6; }
a:hover { color: #3d22c9; }
:where(html.dark-mode) a { color: #a596ff; }
:where(html.dark-mode) a:hover { color: #c3b8ff; }

/* ---------------- Primary buttons (all pages, both modes) ---------------- */
.btn-primary,
.btn-primary:focus,
.btn-primary.disabled,
.btn-primary:disabled,
html.dark-mode .btn-primary {
  color: #081018;
  font-weight: 600;
  background: var(--s-grad);
  border-color: transparent;
}
.btn-primary:hover,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
html.dark-mode .btn-primary:hover:not(:disabled) {
  color: #081018;
  background: var(--s-grad);
  border-color: transparent;
  filter: brightness(1.08);
}

/* ---------------- Task menu (left rail) ---------------- */
@media screen and (min-width: 481px) {
  #layout-menu,
  html.dark-mode #layout-menu {
    background: linear-gradient(180deg, var(--s-card) 0%, var(--s-bg) 100%);
    border-right: 1px solid var(--s-line);
  }
  #layout-menu .popover-header,
  html.dark-mode #layout-menu .popover-header {
    background: transparent !important;
  }
  #layout-menu .popover-header img {
    padding: 0.6rem;
  }
  #taskmenu .special-buttons,
  html.dark-mode #layout-menu .special-buttons a:not(:focus) {
    background: var(--s-bg) !important;
  }
  #taskmenu a {
    color: #b8c6d4;
    transition: background-color .15s, color .15s;
  }
  #taskmenu a:hover,
  #taskmenu a:focus,
  #taskmenu a.selected:hover {
    color: #fff;
    background: rgba(255, 255, 255, .06);
  }
  #taskmenu a.selected,
  html.dark-mode #taskmenu a.selected {
    color: #fff;
    background: rgba(76, 201, 240, .12);
    box-shadow: inset 3px 0 0 var(--s-cyan);
  }
  #taskmenu .action-buttons a,
  #taskmenu .action-buttons a:hover,
  html.dark-mode #taskmenu .action-buttons a {
    color: var(--s-cyan);
  }
  #taskmenu .action-buttons a:hover {
    background: rgba(76, 201, 240, .10);
  }
}

/* ---------------- Lists: accent bar on the selected row ---------------- */
.records-table tr.selected > td:first-child,
.listing li.selected > a,
.listing li.selected > div {
  box-shadow: inset 3px 0 0 var(--s-ui);
}
html.dark-mode .records-table tr.selected > td:first-child,
html.dark-mode .listing li.selected > a,
html.dark-mode .listing li.selected > div {
  box-shadow: inset 3px 0 0 var(--s-cyan);
}

/* ---------------- Inputs: brand focus ring ---------------- */
.form-control:focus,
.custom-select:focus {
  border-color: var(--s-ui);
  box-shadow: 0 0 0 .2rem rgba(99, 71, 239, .2);
}

/* ---------------- Login page (always on-brand dark) ---------------- */
body.task-login,
html.dark-mode body.task-login {
  color: var(--s-fg);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(123, 97, 255, .18), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(76, 201, 240, .16), transparent 60%),
    linear-gradient(180deg, var(--s-bg), var(--s-bg2));
  background-attachment: fixed;
}
.task-login #layout,
.task-login #layout-content,
html.dark-mode .task-login #layout-content {
  background: transparent !important;
  border: 0;
}
.task-login #layout-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  overflow-y: auto;
  padding: 32px 16px;
}
.task-login #logo,
html.dark-mode .task-login #logo {
  position: static;
  top: auto;
  height: 52px;
  max-height: 52px;
  max-width: 92%;
  margin: 0 0 28px;
  opacity: 1;
}
#login-form {
  top: auto;
  width: 100%;
  max-width: 400px;
  padding: 30px 28px 22px;
  text-align: left;
  background: linear-gradient(180deg, var(--s-card), #0e1620);
  border: 1px solid var(--s-line);
  border-radius: 20px;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .7);
}
#login-form::before {
  content: "Sign in to your mailbox";
  display: block;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--s-fg);
  margin-bottom: .2rem;
}
#login-form > table::before,
#login-form > div > table::before {
  content: "Use your full email address, e.g. you@somaro.tech";
  display: block;
  font-size: .875rem;
  color: var(--s-muted);
  margin-bottom: 1.2rem;
}
#login-form td.input {
  padding-bottom: .9rem;
}
.task-login .input-group-text,
html.dark-mode .task-login .input-group-text {
  color: var(--s-muted);
  background: var(--s-input);
  border-color: var(--s-line);
  border-radius: 10px 0 0 10px;
}
.task-login .form-control,
.task-login .form-control:focus,
html.dark-mode .task-login .form-control,
html.dark-mode .task-login .form-control:focus {
  color: var(--s-fg);
  background: var(--s-input);
  border-color: var(--s-line);
  border-radius: 0 10px 10px 0 !important;
}
.task-login .form-control:focus,
html.dark-mode .task-login .form-control:focus {
  border-color: var(--s-violet);
  box-shadow: 0 0 0 .2rem rgba(123, 97, 255, .25);
}
.task-login .form-control::placeholder {
  color: #5d7388;
}
.task-login input:-webkit-autofill {
  -webkit-text-fill-color: var(--s-fg);
  box-shadow: 0 0 0 1000px var(--s-input) inset;
  caret-color: var(--s-fg);
}
#login-form .formbuttons {
  margin-top: .4rem;
}
#rcmloginsubmit {
  width: 100%;
  height: 46px;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 10px;
}
#login-footer,
html.dark-mode #login-footer {
  color: var(--s-muted);
  text-align: center;
  font-size: .8125rem;
  margin-top: 1.2rem;
}
#login-footer > div,
html.dark-mode #login-footer > div {
  background: transparent;
  padding: 0;
}