/* ============================================================================
   OdsPanel Mail — brand layer over the Elastic skin.
   Loaded after the skin CSS by the odsbrand plugin. Same language as the panel:
   hairline structure, neutral surfaces, one accent, colour reserved for state.
   ========================================================================== */
:root {
  --ods-ac: #2f52c8;
  --ods-ac-hover: #26449f;
  --ods-ac-tint: rgba(47, 82, 200, .09);
  --ods-ink: #15171c;
  --ods-ink-2: #4b5158;
  --ods-muted: #5f6672;
  --ods-line: #e0e3e8;
  --ods-surface: #ffffff;
  --ods-canvas: #f5f6f8;
  --ods-font: "Inter", -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
  --ods-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
}
html.dark-mode {
  --ods-ac: #7d9bff;
  --ods-ac-hover: #9db3ff;
  --ods-ac-tint: rgba(125, 155, 255, .14);
  --ods-ink: #e8eaed;
  --ods-ink-2: #c2c7ce;
  --ods-muted: #a2aab4;
  --ods-line: #262a31;
  --ods-surface: #16181c;
  --ods-canvas: #0d0f12;
}

body, .popupmenu, .ui-dialog, input, select, textarea, button {
  font-family: var(--ods-font);
}
pre, code, .messagelist .subject .msgid { font-family: var(--ods-mono); }

/* ---- accent -------------------------------------------------------------- */
a, a:active, a:visited { color: var(--ods-ac); }
a:hover { color: var(--ods-ac-hover); }

#layout > div .header a.button.selected,
.menu a.active,
.listing li > a.selected,
.listing li.selected > a { color: var(--ods-ac); }

.messagelist tr.selected > td,
table.listing tr.selected > td,
ul.listing li.selected { background-color: var(--ods-ac-tint); }

a.button.primary, button.primary, .btn-primary, input.button.mainaction, button.mainaction {
  background-color: var(--ods-ink) !important;
  border-color: var(--ods-ink) !important;
  color: var(--ods-surface) !important;
}
a.button.primary:hover, button.primary:hover, .btn-primary:hover,
input.button.mainaction:hover, button.mainaction:hover { filter: brightness(1.25); }

input:focus, select:focus, textarea:focus, .form-control:focus {
  border-color: var(--ods-ac) !important;
  box-shadow: 0 0 0 3px var(--ods-ac-tint) !important;
}

/* ---- task bar ------------------------------------------------------------ */
#taskmenu { background: var(--ods-canvas); border-right: 1px solid var(--ods-line); }
#taskmenu a { color: var(--ods-muted); }
#taskmenu a:hover { color: var(--ods-ink); background: transparent; }
#taskmenu a.selected { color: var(--ods-ac); background: transparent; box-shadow: inset 2px 0 0 var(--ods-ac); }

/* ---- structure ----------------------------------------------------------- */
#layout > div { border-color: var(--ods-line); }
#layout > div > .header,
#layout > div > .footer { background: var(--ods-surface); border-color: var(--ods-line); }
#layout-sidebar, #layout-list, #layout-content { background: var(--ods-surface); }
.header > .header-title { font-weight: 600; letter-spacing: -.01em; }

/* ---- login --------------------------------------------------------------- */
body.task-login #layout,
body.task-login #layout-content { background: var(--ods-canvas); }
body.task-login #layout-content {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 1.5rem;
}
/* the skin resolves skin_logo against the parent skin path, so the mark is set here */
img#logo { content: url("logo.svg"); max-height: 26px; width: auto; }
html.dark-mode img#logo { content: url("logo-dark.svg"); }
/* Elastic pushes both down with position:relative; top:20% — we centre instead */
body.task-login #logo,
body.task-login #login-form { top: 0; }
body.task-login #logo { margin: 0 0 1.25rem; }
body.task-login #login-form {
  width: 100%; max-width: 360px; margin: 0;
  background: var(--ods-surface);
  border: 1px solid var(--ods-line);
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: none;
}
body.task-login #login-form table { width: 100%; }
body.task-login #login-form .input-group-lg > .form-control { font-size: 14px; }
body.task-login #login-form .formbuttons { margin-top: .25rem; }
body.task-login #login-form .formbuttons button { width: 100%; }
body.task-login #layout-content > .footer,
body.task-login #layout-content .product-name {
  margin-top: .9rem; font-size: 11px; color: var(--ods-muted);
}

/* Ondiso credit under the login box */
body.task-login #layout-content::after {
  content: "Powered by Ondiso";
  display: block; margin-top: .6rem;
  font-size: 11px; color: var(--ods-muted); text-align: center;
}

/* ---- misc ---------------------------------------------------------------- */
.menu, .popupmenu, .ui-dialog { border-radius: 8px; border-color: var(--ods-line); }
.messagelist .flags .unread, .messagelist tr.unread { font-weight: 600; }