/* Lakeside Mail. Colours and type from lakesidegames.net. */
@font-face { font-family: "Fira Sans"; font-weight: 400; font-display: swap; src: url(fonts/fira-sans-400.woff2) format("woff2"); }
@font-face { font-family: "Fira Sans"; font-weight: 500; font-display: swap; src: url(fonts/fira-sans-500.woff2) format("woff2"); }
@font-face { font-family: "Fira Sans"; font-weight: 600; font-display: swap; src: url(fonts/fira-sans-600.woff2) format("woff2"); }
@font-face { font-family: "Fira Sans"; font-weight: 700; font-display: swap; src: url(fonts/fira-sans-700.woff2) format("woff2"); }

:root {
  --ls-ground: #141F3A; --ls-ground-2: #19274A; --ls-plate: #1E2E55; --ls-line: rgba(170,190,225,.16); --ls-line-2: rgba(170,190,225,.26);
  --ls-text: #F4F6FB; --ls-text-2: #C3CEE3; --ls-text-3: #8E9DBD; --ls-brass: #F2842F; --ls-brass-soft: #F6A464;
}
html, body, input, select, textarea, button, .btn, .popover, .ui-dialog, .ui-widget {
  font-family: "Fira Sans", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

/* Ground and panels */
html.dark-mode, html.dark-mode body, html.dark-mode #layout, html.dark-mode #layout > div,
html.dark-mode .listbox, html.dark-mode .content, html.dark-mode .records-table, html.dark-mode .iframe-wrapper,
html.dark-mode #layout-content, html.dark-mode #layout-list, html.dark-mode #layout-sidebar,
html.dark-mode .formcontent, html.dark-mode .boxcontent, html.dark-mode .scroller, html.dark-mode iframe {
  background-color: var(--ls-ground) !important; color: var(--ls-text);
}
html.dark-mode #layout-menu, html.dark-mode #taskmenu, html.dark-mode .header, html.dark-mode .footer,
html.dark-mode .menu.toolbar, html.dark-mode .toolbar, html.dark-mode .popover, html.dark-mode .popover-body,
html.dark-mode .ui-dialog, html.dark-mode .ui-dialog-content, html.dark-mode .ui-dialog-titlebar, html.dark-mode .ui-dialog-buttonpane,
html.dark-mode .card, html.dark-mode .message-partheaders, html.dark-mode #message-header, html.dark-mode .searchbar {
  background-color: var(--ls-ground-2) !important; color: var(--ls-text);
}
html.dark-mode #layout > div, html.dark-mode .header, html.dark-mode .footer, html.dark-mode .records-table td,
html.dark-mode .listing li, html.dark-mode .popover, html.dark-mode .ui-dialog, html.dark-mode fieldset, html.dark-mode .boxtitle {
  border-color: var(--ls-line) !important;
}
html.dark-mode, html.dark-mode body, html.dark-mode label, html.dark-mode .records-table td, html.dark-mode .listing li a,
html.dark-mode .header-title, html.dark-mode legend, html.dark-mode .boxtitle, html.dark-mode .ui-dialog-title { color: var(--ls-text) !important; }
html.dark-mode .records-table td.date, html.dark-mode .records-table .fromto, html.dark-mode .hint, html.dark-mode .text-muted,
html.dark-mode .records-table span.date, html.dark-mode small, html.dark-mode .footer { color: var(--ls-text-3) !important; }

/* Accent: Lakeside orange in place of the stock blue */
html.dark-mode a, html.dark-mode .listing li.selected > a, html.dark-mode .listing li.selected > a:before,
html.dark-mode .menu a.selected, html.dark-mode .toolbar a.selected, html.dark-mode .records-table tr.unread td.subject a,
html.dark-mode a.button.icon:hover, html.dark-mode .nav-link.active { color: var(--ls-brass-soft) !important; }
html.dark-mode .listing li.selected, html.dark-mode .records-table tr.selected td, html.dark-mode .listing li.selected > a,
html.dark-mode .records-table tr.focused td { background-color: var(--ls-plate) !important; }
html.dark-mode .records-table tr.selected td:first-child { box-shadow: inset 3px 0 0 var(--ls-brass); }
html.dark-mode .btn-primary, html.dark-mode button.btn-primary, html.dark-mode .ui-dialog .btn.mainaction, html.dark-mode .btn.mainaction,
html.dark-mode .floating-action-buttons a.button {
  background-color: var(--ls-brass) !important; border-color: var(--ls-brass) !important; color: #1A1206 !important; font-weight: 600; box-shadow: none !important;
}
html.dark-mode .btn-primary:hover, html.dark-mode .btn.mainaction:hover { background-color: var(--ls-brass-soft) !important; border-color: var(--ls-brass-soft) !important; }
html.dark-mode .btn-secondary, html.dark-mode .btn.cancel { background-color: var(--ls-plate) !important; border-color: var(--ls-line-2) !important; color: var(--ls-text) !important; }
html.dark-mode .unreadcount, html.dark-mode .badge-primary { background-color: var(--ls-brass) !important; color: #1A1206 !important; }
html.dark-mode .custom-control-input:checked ~ .custom-control-label::before, html.dark-mode .custom-switch .custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--ls-brass) !important; border-color: var(--ls-brass) !important;
}

/* Fields */
html.dark-mode .form-control, html.dark-mode .custom-select, html.dark-mode input[type=text], html.dark-mode input[type=password],
html.dark-mode textarea, html.dark-mode select, html.dark-mode .input-group-text, html.dark-mode .recipient-input, html.dark-mode .searchbar input {
  background-color: #0F1830 !important; border-color: var(--ls-line-2) !important; color: var(--ls-text) !important;
}
html.dark-mode .form-control:focus, html.dark-mode .custom-select:focus, html.dark-mode .recipient-input.focus {
  border-color: var(--ls-brass) !important; box-shadow: 0 0 0 2px rgba(242,132,47,.25) !important;
}
html.dark-mode ::placeholder { color: var(--ls-text-3) !important; }

/* Task menu (left rail) */
html.dark-mode #layout-menu { background-color: #0F1830 !important; border-right: 1px solid var(--ls-line) !important; }
html.dark-mode #taskmenu a { color: var(--ls-text-2) !important; }
html.dark-mode #taskmenu a:hover, html.dark-mode #taskmenu a.selected { color: var(--ls-text) !important; background-color: var(--ls-ground-2) !important; }
html.dark-mode #taskmenu a.selected { box-shadow: inset 3px 0 0 var(--ls-brass); }
html.dark-mode #layout-menu .popover-header, html.dark-mode #layout-menu #logo { background: transparent !important; }
#layout-menu #logo { max-height: 40px; padding: 4px; }

/* Sign-in page */
body.task-login, html.dark-mode body.task-login #layout, html.dark-mode body.task-login #layout-content {
  background: radial-gradient(1200px 600px at 50% -10%, #1E2E55 0%, #141F3A 60%) fixed !important;
}
body.task-login #layout-content { display: flex; flex-direction: column; align-items: center; justify-content: center; }
body.task-login #logo { width: 76px; height: 76px; margin: 0 auto 10px; }
body.task-login #login-form {
  width: 100%; max-width: 380px; margin: 0 auto; padding: 26px 26px 18px; border: 1px solid var(--ls-line-2); border-radius: 12px;
  background: var(--ls-ground-2) !important; box-shadow: 0 18px 50px rgba(5,10,25,.45);
}
body.task-login #login-form::before {
  content: "Lakeside Mail"; display: block; text-align: center; font-weight: 700; font-size: 1.35rem; letter-spacing: -0.01em; color: var(--ls-text); margin-bottom: 2px;
}
body.task-login #login-form::after {
  content: "Staff mailboxes for lakesidegames.net"; display: block; order: -1; text-align: center; color: var(--ls-text-3); font-size: .86rem; margin-top: 12px;
}
body.task-login #login-form table { margin-top: 16px; }
body.task-login #login-form .btn-primary { width: 100%; padding: 10px; font-size: 1rem; border-radius: 8px; }
body.task-login #login-footer { display: none; }
body.task-login #login-footer-unused { color: var(--ls-text-3) !important; text-align: center; font-size: .78rem; margin-top: 10px; }