/* Login screen — written against the real markup, 2026-08-09.
   #layout-content holds the logo and #login-form (the form itself).
   Fields live in <td class="input input-group">, buttons in p.formbuttons. */

#layout-content.no-navbar {
  background:
    radial-gradient(900px 500px at 50% -5%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 65%),
    #1d2126;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#layout-content > #logo {
  max-height: 4.75rem;
  width: auto;
  margin: 0 0 1.5rem;
}

/* the form is the card */
#login-form {
  width: min(23rem, calc(100vw - 2.5rem));
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  padding: 1.75rem 1.5rem 1.35rem;
  box-shadow: 0 24px 60px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.28);
}

#login-form table { width: 100%; border-collapse: separate; border-spacing: 0; }
#login-form tr.form-group { display: block; margin-bottom: .8rem; }
#login-form td.title { display: none !important; }

/* one continuous field, icon inside it */
#login-form td.input-group {
  display: flex;
  align-items: center;
  width: 100%;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 10px;
  background: rgba(0,0,0,.24);
  transition: border-color .15s ease, box-shadow .15s ease;
}
#login-form td.input-group:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 26%, transparent);
}
#login-form .input-group-prepend { display: flex; align-items: center; }
#login-form .input-group-text {
  background: transparent !important;
  border: 0 !important;
  color: rgba(255,255,255,.42);
  padding: 0 .25rem 0 .85rem;
  font-size: 1.05rem;
}
#login-form input.form-control {
  flex: 1;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #eef1f5;
  font-size: 1rem;
  padding: .85rem .9rem .85rem .55rem;
  min-width: 0;
}
#login-form input.form-control::placeholder { color: rgba(255,255,255,.36); }
#login-form input.form-control:-webkit-autofill {
  -webkit-text-fill-color: #eef1f5;
  -webkit-box-shadow: 0 0 0 40rem #232830 inset;
}

/* one obvious action */
#login-form p.formbuttons { margin: .25rem 0 0; }
#login-form .btn-primary {
  background: var(--brand) !important;
  border: 0 !important;
  border-radius: 10px;
  width: 100%;
  padding: .85rem 1rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: #14171b;
  transition: filter .15s ease, transform .06s ease;
}
#login-form .btn-primary:hover { filter: brightness(1.08); }
#login-form .btn-primary:active { transform: translateY(1px); }
#login-form .btn-primary:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--brand) 55%, transparent);
  outline-offset: 2px;
}

#login-footer {
  margin-top: 1.15rem;
  text-align: center;
  color: rgba(255,255,255,.40);
  font-size: .82rem;
  letter-spacing: .04em;
}

#layout-content.no-navbar { min-height: 100vh; }

/* elastic nudges the logo and the form down with a relative offset of its own;
   the flex centring above cannot win against it, so reset it. */
#layout-content > #logo,
#layout-content > #login-form { position: relative; top: 0 !important; }

/* ---------- the mail view ---------- */
/* Scanning a list is the job here, so the row is tightened: elastic sets every
   line in a row to 2em, which makes each message 4em tall and fits only a
   handful on screen. */

.messagelist td.subject span { line-height: 1.5em !important; }
.messagelist td.subject span.fromto { padding-left: 0 !important; }
.messagelist td { padding-top: .35rem; padding-bottom: .35rem; }

/* the subject is what you are looking for, so let it lead visually */
.messagelist td.subject span.subject { font-size: .97rem; }
.messagelist td.subject span.fromto,
.messagelist td.subject span.date { font-size: .82rem; opacity: .78; }
.messagelist tr.unread td.subject span.subject { color: #fff; }

/* selection reads as a state, not a stripe */
.messagelist tr.selected td { background: color-mix(in srgb, var(--brand) 16%, transparent) !important; }
.messagelist tr:hover td { background: rgba(255,255,255,.035); }

/* the reading pane: plain text was rendering monospace and edge to edge */
#messagebody .message-part pre,
#messagebody .message-htmlpart pre {
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: .97rem;
  line-height: 1.6;
  white-space: pre-wrap;
  max-width: 68ch;
}
#messagebody { padding-top: .25rem; }

/* the sender block above the message was taking a third of the pane */
#message-header .subject { font-size: 1.15rem; margin-bottom: .35rem; }
#message-header .header-links,
#message-header .message-partheaders { font-size: .85rem; }

/* ---------- make the app match the login ----------
   elastic hard-codes #37beff in ~50 places. These are the ones that show. */

.btn-primary,
.btn-primary.disabled, .btn-primary:disabled,
.floating-action-buttons a.button,
.ui-menu .ui-state-active,
.popover .menu li a:not(.disabled):hover,
.popupmenu .listing li>a:not(.disabled):hover,
.popupmenu .listing li.selected,
.folderlist li.mailbox .unreadcount,
.folderlist li.mailbox.recent>a>.unreadcount,
.quota-widget .value {
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
}

#taskmenu .action-buttons a,
#taskmenu .action-buttons a:hover,
html.dark-mode #taskmenu .action-buttons a,
.ui.alert a:not(.btn) {
  color: var(--brand) !important;
}

.form-control:focus,
.input-group-text input:focus,
.multi-input>.content.focused,
.recipient-input.focus,
html.dark-mode .form-control:focus:not(.is-invalid),
html.dark-mode .multi-input:not(.is-invalid)>.content.focused,
html.dark-mode .recipient-input.focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent) !important;
}

html.dark-mode .listing li.selected,
html.dark-mode .listing li.selected>a,
html.dark-mode .listing li.selected>div>a,
html.dark-mode .messagelist tr:not(.flagged):not(.deleted).selected td.subject a,
html.dark-mode .messagelist tr:not(.flagged):not(.deleted).selected td.subject span.subject {
  color: var(--brand) !important;
}

/* the folder icons were five different colours; one accent reads as one product */
.folderlist li a:before { color: color-mix(in srgb, var(--brand) 78%, #9aa4b0) !important; }
.folderlist li.selected > a:before { color: var(--brand) !important; }

/* the login used rounded, softly-bordered surfaces — carry that through */
#messagesearch, .searchbar, .searchbar input,
.listing li.selected, .messagelist tr.selected td:first-child { border-radius: 10px; }
.searchbar { margin: .35rem .5rem; }
#messagelist-content, .folderlist, #layout-sidebar, #layout-list { border-color: rgba(255,255,255,.07) !important; }
.messagelist tr td { border-color: rgba(255,255,255,.05) !important; }

/* the same soft brand wash the login has, so the two feel like one place */
html.dark-mode #layout-list,
html.dark-mode #layout-content {
  background-image: radial-gradient(1100px 420px at 50% -12%,
                    color-mix(in srgb, var(--brand) 8%, transparent), transparent 70%);
}