/* Oswin Mail — VADYM.AI design system layer over Roundcube Elastic.
   Values are tokens from vai-design-system/tokens.css; nothing hand-picked. */
@import url('https://fonts.googleapis.com/css2?family=Geologica:wght@400;500;600;700;800&display=swap');

:root {
  --brand-50:#F4F1FF; --brand-100:#EFEAFF; --brand-200:#DDD4FF; --brand-400:#9B86FF;
  --brand-500:#6B4DFF; --brand-600:#5436E8; --brand-700:#3F27B0;
  --ink:#111317; --body:#5B6472; --muted:#8A93A2; --border:#E6EAF0; --surface:#F5F7FB;
  --radius-sm:8px; --radius-md:14px; --radius-lg:20px; --radius-xl:24px; --radius-pill:999px;
  --shadow-card:0 14px 30px -22px rgba(17,40,90,.30);
  --shadow-elevated:0 14px 28px -10px rgba(107,77,255,.55);
  --shadow-accent:0 24px 44px -22px rgba(107,77,255,.40);
  --shadow-ring:0 0 0 4px rgba(107,77,255,.12);
}

/* ---------- Type: Geologica everywhere ---------- */
html, body, input, button, select, textarea, .btn, .button, .form-control, .popover, .ui-dialog {
  font-family: 'Geologica', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
body { font-weight: 500; }
h1, h2, h3, .header-title, .boxtitle, .formcontent legend { font-weight: 800; color: var(--ink); }

/* ---------- Buttons: pills ---------- */
.btn, .button.mainaction, .btn-primary, .btn-secondary, .btn-danger, .formbuttons .button {
  border-radius: var(--radius-pill) !important;
  font-weight: 700;
}
.btn-primary, .button.mainaction, .button.primary {
  background-color: var(--brand-500) !important; border-color: var(--brand-500) !important; color: #fff !important;
}
.btn-primary:hover, .button.mainaction:hover, .button.primary:hover {
  background-color: var(--brand-600) !important; border-color: var(--brand-600) !important;
}
.btn-primary:active, .button.mainaction:active { background-color: var(--brand-700) !important; }

/* Compose — the one primary action in the app */
#layout-menu a.compose, #taskmenu a.compose {
  background: var(--brand-500) !important; color: #fff !important; border-radius: var(--radius-md);
  box-shadow: var(--shadow-elevated);
}
#layout-menu a.compose:hover { background: var(--brand-600) !important; }

/* ---------- Inputs ---------- */
.form-control, input[type=text], input[type=password], input[type=email], select.custom-select, textarea {
  border-color: var(--border); border-radius: var(--radius-sm);
}
.form-control:focus, input:focus, select:focus, textarea:focus {
  border-color: var(--brand-400) !important; box-shadow: var(--shadow-ring) !important; outline: none;
}
.custom-control-input:checked ~ .custom-control-label::before,
.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--brand-500); border-color: var(--brand-500);
}

/* ---------- Lists: soft purple selection ---------- */
.listing li.selected, table.records-table tr.selected td, .listing tr.selected td {
  background-color: var(--brand-100) !important;
}
.listing li.selected > a, table.records-table tr.selected td a { color: var(--ink) !important; }
.records-table tr.focused > td:first-child, .listing li.focused { box-shadow: inset 3px 0 0 var(--brand-500); }
.unread .subject a, tr.unread .subject span.subject a { font-weight: 700; color: var(--ink); }
.unreadcount, .listing li .unreadcount { background: var(--brand-500) !important; color: #fff !important; border-radius: var(--radius-pill); }

/* Menu logo: the VA monogram (config skin_logo) */
#layout-menu #logo, #layout-menu .popover-header img {
  max-height: 28px !important; width: auto !important; max-width: 56px; margin: 16px auto 12px; display: block; padding: 0;
}

/* =========================================================
   Login — the card from the design system's registration form
   ========================================================= */
body.task-login {
  background: linear-gradient(135deg, var(--brand-50) 0%, var(--surface) 55%, #FFFFFF 100%) !important;
  min-height: 100vh;
}
body.task-login #layout, body.task-login #layout-content { background: transparent !important; }
body.task-login #layout-content {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 100vh; padding: 16px; box-sizing: border-box;
}
body.task-login #logo { display: none !important; }

body.task-login #login-form {
  position: static !important; top: auto !important; /* Elastic pushes it down with top:20% */
  width: 100%; max-width: 440px; box-sizing: border-box;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-xl);
  padding: 40px; box-shadow: var(--shadow-accent);
}
@media (max-width: 480px) { body.task-login #login-form { padding: 24px; border-radius: var(--radius-lg); } }

.oswin-head { margin: 0 0 24px; text-align: left; }
.oswin-logo { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.oswin-logo img { height: 32px; width: auto; display: block; }
.oswin-badge {
  border-radius: 6px; background: var(--brand-500); color: #fff; padding: 2px 6px;
  font-size: 11px; line-height: 1.2; font-weight: 800; letter-spacing: .04em;
}
.oswin-eyebrow {
  font-size: 13px; line-height: 1.4; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--brand-500); margin-bottom: 8px;
}
.oswin-title { font-size: 26px; line-height: 1.25; font-weight: 800; color: var(--ink); margin: 0 0 8px; }
.oswin-sub { font-size: 16px; line-height: 1.5; font-weight: 500; color: var(--body); margin: 0; }

body.task-login #login-form table { width: 100%; border: 0; }
body.task-login #login-form td { padding: 0 0 16px !important; border: 0; display: block; width: 100%; }
body.task-login #login-form td.title { display: none; }
body.task-login #login-form tr.form-group { display: block; margin: 0; }
body.task-login #login-form td.input-group { display: flex !important; flex-wrap: nowrap; }
body.task-login #login-form td.input-group .form-control { flex: 1 1 auto; width: 100% !important; min-width: 0; }
body.task-login #login-form .input-group-prepend { display: none; }
body.task-login #login-form .form-control {
  height: 52px; border: 1px solid var(--border) !important; border-radius: var(--radius-md) !important;
  padding: 0 16px; font-size: 16px; font-weight: 500; color: var(--ink); background: #fff;
}
body.task-login #login-form .form-control::placeholder { color: var(--muted); }

body.task-login #login-form .formbuttons { margin: 8px 0 0; padding: 0; }
body.task-login #rcmloginsubmit {
  width: 100%; height: 56px; border-radius: var(--radius-pill) !important;
  background: var(--brand-500) !important; border: 0 !important; color: #fff !important;
  font-size: 18px; font-weight: 700; text-transform: none !important; letter-spacing: 0;
  box-shadow: var(--shadow-elevated);
  transition: background-color .15s ease;
}
body.task-login #rcmloginsubmit:hover { background: var(--brand-600) !important; }
body.task-login #rcmloginsubmit:active { background: var(--brand-700) !important; }

body.task-login #login-footer {
  margin-top: 24px; font-size: 13px; font-weight: 600; color: var(--muted); text-align: center;
}
body.task-login #login-footer a { color: var(--brand-500); }
body.task-login #message .alert, body.task-login .boxerror, body.task-login .boxwarning {
  border-radius: var(--radius-md); font-weight: 600;
}

/* Task menu: the dark sidebar of the VADYM.AI app shell (vai-lms) — slate tokens, not Elastic's teal-grey */
#layout-menu, #layout-menu .special-buttons, #layout-menu #taskmenu { background-color: #1E2128 !important; } /* slate-800 */
#layout-menu #taskmenu a.selected, #layout-menu #taskmenu a:hover:not(.compose) {
  background-color: #2A2D34 !important; color: #fff !important;               /* slate-700 */
}
#layout-menu #taskmenu a { color: #C7CBD2; }                                 /* slate-200 */
#layout-menu #taskmenu a.logout { color: #E5484D !important; }               /* danger */