/* =====================================================================
   JR NEXUS MAIL — Premium white skin
   Style ref: Microsoft 365 Outlook Web · clean · enterprise · refined
   Brand palette: brand #1e40af · sky #3b82f6 · royal #1e3a8a
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --jr-brand: #1e40af;
  --jr-brand-soft: #3b82f6;
  --jr-royal: #1e3a8a;
  --jr-cyan: #06b6d4;
  --jr-deep: #0f172a;

  --jr-bg: #ffffff;
  --jr-bg-soft: #f6f8fb;
  --jr-bg-softer: #f1f4f9;
  --jr-bg-hover: #eaf0fb;

  --jr-border: #e5eaf2;
  --jr-border-soft: #eef2f7;

  --jr-text: #1e293b;
  --jr-text-muted: #64748b;
  --jr-text-strong: #0f172a;
  --jr-text-soft: #94a3b8;

  --jr-grad-accent: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
  --jr-grad-soft: linear-gradient(135deg, #eef4ff 0%, #f6f8fb 100%);

  --jr-radius: 10px;
  --jr-radius-lg: 16px;
  --jr-shadow-sm: 0 1px 2px rgba(15, 23, 42, .04);
  --jr-shadow-md: 0 4px 14px -4px rgba(15, 23, 42, .08);
  --jr-shadow-lg: 0 14px 40px -12px rgba(30, 64, 175, .22), 0 2px 6px rgba(15, 23, 42, .06);
}

/* Universal font */
html, body, .formcontainer, .skin-elastic, [data-skin="elastic"] {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -.005em;
  color: var(--jr-text);
}

/* Force light mode regardless of system / saved pref */
html, body, html[lang], body[class*="dark"], html[data-theme="dark"] {
  color-scheme: light !important;
}

body, html {
  background: var(--jr-bg) !important;
}

/* =====================================================================
   LOGIN PAGE — light glass card on subtle gradient
   ===================================================================== */
body.task-login {
  background: var(--jr-grad-soft) !important;
  background-image:
    radial-gradient(1000px 500px at 80% -10%, rgba(59,130,246,.12), transparent 60%),
    radial-gradient(900px 400px at -10% 100%, rgba(30,64,175,.10), transparent 55%),
    linear-gradient(135deg, #f6f8fb 0%, #eaf0fb 100%) !important;
  background-attachment: fixed !important;
  color: var(--jr-text);
}

body.task-login #layout,
body.task-login #layout-content {
  background: transparent !important;
}

#login-form {
  background: #ffffff !important;
  border: 1px solid var(--jr-border) !important;
  border-radius: var(--jr-radius-lg) !important;
  box-shadow: var(--jr-shadow-lg) !important;
  padding: 40px 38px 32px !important;
  max-width: 440px !important;
  width: calc(100% - 32px) !important;
  margin: auto !important;
  position: relative;
  z-index: 1;
}

#login-form #message {
  background: #fef2f2 !important;
  color: #b91c1c !important;
  border: 1px solid #fecaca !important;
  border-radius: 9px !important;
  padding: 10px 14px !important;
  font-size: 13px !important;
  margin-bottom: 14px !important;
}

#login-form img.contentlogo,
#login-form .contentlogo {
  display: block !important;
  margin: 0 auto 24px !important;
  max-height: 64px !important;
  width: auto !important;
}

#login-form h1, #login-form .formtitle { display: none !important; }

#login-form .row { margin-bottom: 14px !important; }

#login-form label {
  display: block !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .14em !important;
  color: var(--jr-text-muted) !important;
  margin-bottom: 6px !important;
}

#login-form .input-group {
  background: var(--jr-bg-soft) !important;
  border: 1px solid var(--jr-border) !important;
  border-radius: 10px !important;
  transition: all .15s ease;
  overflow: hidden;
}

#login-form .input-group:focus-within {
  background: #ffffff !important;
  border-color: var(--jr-brand-soft) !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,.14) !important;
}

#login-form .input-group-prepend,
#login-form .input-group-text {
  background: transparent !important;
  border: none !important;
  color: var(--jr-brand) !important;
  padding-left: 14px !important;
}

#login-form input[type="text"],
#login-form input[type="password"],
#login-form input[type="email"] {
  background: transparent !important;
  border: none !important;
  color: var(--jr-text-strong) !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  padding: 13px 14px !important;
  width: 100% !important;
  box-shadow: none !important;
}

#login-form input::placeholder { color: #94a3b8 !important; font-weight: 400; }

#login-form button[type="submit"],
#login-form .button.mainaction {
  background: var(--jr-grad-accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 13px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  width: 100% !important;
  margin-top: 6px !important;
  box-shadow: 0 8px 22px -8px rgba(30,64,175,.45) !important;
  transition: transform .15s ease, box-shadow .2s ease !important;
  cursor: pointer;
}

#login-form button[type="submit"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px -8px rgba(30,64,175,.55) !important;
}

.jr-hint {
  margin-top: 16px;
  text-align: center;
  font-size: 11.5px;
  color: var(--jr-text-muted);
  letter-spacing: .03em;
}

#login-footer, .footerleft, .footerright {
  margin-top: 22px;
  text-align: center;
  font-size: 11.5px !important;
  color: var(--jr-text-muted) !important;
  position: relative;
  z-index: 1;
}
#login-footer a, .footerleft a, .footerright a { color: var(--jr-brand) !important; text-decoration: none; }
#login-footer a:hover { text-decoration: underline; }

/* =====================================================================
   APP CHROME — white background, light grey sidebar
   ===================================================================== */
body:not(.task-login),
html:not([class*="task-login"]) body {
  background: var(--jr-bg) !important;
  color: var(--jr-text);
}

#layout, #layout-content, #mainscreencontent {
  background: var(--jr-bg) !important;
}

/* Left task rail (Mail/Contacts/Settings) */
#taskmenu {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  border-right: 1px solid var(--jr-border) !important;
  box-shadow: 1px 0 0 var(--jr-border-soft);
}

#taskmenu .button, #taskmenu a {
  color: var(--jr-text-muted) !important;
  border-radius: 9px !important;
  margin: 4px 8px !important;
  transition: all .12s ease;
  font-weight: 500 !important;
}

#taskmenu .button:hover, #taskmenu a:hover {
  background: var(--jr-bg-hover) !important;
  color: var(--jr-brand) !important;
}

#taskmenu .button.selected,
#taskmenu a.selected,
#taskmenu li.selected > a,
#taskmenu li.selected > .button {
  background: var(--jr-grad-accent) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px -6px rgba(30,64,175,.45);
}

#taskmenu .logo {
  padding: 16px 14px 14px !important;
  border-bottom: 1px solid var(--jr-border-soft) !important;
  background: #ffffff;
  margin-bottom: 8px;
}

#taskmenu .logo img {
  max-width: 100% !important;
  height: auto !important;
}

/* Folder sidebar */
#mailboxlist-container,
#folderlist,
.listing,
.listing.iconized {
  background: var(--jr-bg-soft) !important;
  border-right: 1px solid var(--jr-border) !important;
  color: var(--jr-text);
}

#mailboxlist li a,
.listing li a {
  color: var(--jr-text) !important;
  border-radius: 8px !important;
  margin: 2px 8px !important;
  padding: 9px 12px !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
  transition: all .12s ease;
}

#mailboxlist li a:hover,
.listing li a:hover {
  background: var(--jr-bg-hover) !important;
  color: var(--jr-brand) !important;
}

#mailboxlist li.selected > a,
#mailboxlist li.selected a,
.listing li.selected > a {
  background: linear-gradient(90deg, rgba(30,64,175,.10) 0%, rgba(30,64,175,.02) 100%) !important;
  color: var(--jr-brand) !important;
  font-weight: 600 !important;
  border-left: 3px solid var(--jr-brand-soft);
}

#mailboxlist .unreadcount, .listing .unreadcount {
  background: var(--jr-grad-accent) !important;
  color: #fff !important;
  border-radius: 10px !important;
  padding: 1px 8px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .02em;
}

/* Top toolbar */
.header, .toolbar, .menu.toolbar {
  background: #ffffff !important;
  border-bottom: 1px solid var(--jr-border) !important;
}

.toolbar a.button, .toolbar .button {
  color: var(--jr-text) !important;
  border-radius: 8px !important;
  padding: 6px 12px !important;
  transition: all .12s ease;
  font-weight: 500 !important;
}

.toolbar a.button:hover, .toolbar .button:hover {
  background: var(--jr-bg-hover) !important;
  color: var(--jr-brand) !important;
}

.toolbar a.button.disabled, .toolbar .button.disabled {
  color: var(--jr-text-soft) !important;
}

/* Account / mailbox header */
.uibox.contentbox, .uibox {
  background: #ffffff !important;
  border-color: var(--jr-border) !important;
}

.boxtitle, .uibox > .header {
  background: #ffffff !important;
  color: var(--jr-text-strong) !important;
  border-bottom: 1px solid var(--jr-border-soft) !important;
  font-weight: 600 !important;
}

/* Message list (the actual inbox) */
.messagelist, #messagelist {
  background: #ffffff !important;
  color: var(--jr-text) !important;
}

.messagelist tbody tr, #messagelist tbody tr {
  border-bottom: 1px solid var(--jr-border-soft) !important;
  background: #ffffff !important;
  transition: background .1s ease;
}

.messagelist tbody tr:hover, #messagelist tbody tr:hover {
  background: var(--jr-bg-softer) !important;
  cursor: pointer;
}

.messagelist tbody tr.selected, #messagelist tbody tr.selected {
  background: linear-gradient(90deg, rgba(30,64,175,.10) 0%, rgba(30,64,175,.03) 100%) !important;
}

.messagelist tbody tr.unread, #messagelist tbody tr.unread {
  font-weight: 600 !important;
}

.messagelist tbody tr.unread .fromto,
.messagelist tbody tr.unread .subject {
  color: var(--jr-text-strong) !important;
}

.messagelist .subject a,
.messagelist .fromto,
#messagelist .subject a,
#messagelist .fromto {
  color: var(--jr-text-strong) !important;
  text-decoration: none !important;
}

.messagelist .date, #messagelist .date {
  color: var(--jr-text-muted) !important;
  font-size: 12px !important;
}

.messagelist .preview { color: var(--jr-text-muted) !important; }

/* Message read pane */
#messagecontent, .messagecontent, #messageframe,
.message-htmlpart, .message-partheaders {
  background: #ffffff !important;
  color: var(--jr-text) !important;
}

.message-htmlpart {
  background: #fff !important;
  color: #1e293b !important;
  border-radius: 10px;
  margin: 12px;
  padding: 18px;
  border: 1px solid var(--jr-border-soft);
}

/* Buttons */
button.btn-primary,
.button.mainaction,
.btn-primary,
button.primary {
  background: var(--jr-grad-accent) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 9px !important;
  font-weight: 600 !important;
  padding: 8px 16px !important;
  box-shadow: 0 4px 10px -4px rgba(30,64,175,.4);
  transition: all .15s ease;
}

button.btn-primary:hover,
.button.mainaction:hover,
.btn-primary:hover,
button.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 16px -4px rgba(30,64,175,.5) !important;
}

button, .button {
  border-radius: 8px !important;
  transition: all .12s ease;
}

button:not(.btn-primary):not(.mainaction):not(.primary) {
  background: #ffffff !important;
  border: 1px solid var(--jr-border) !important;
  color: var(--jr-text) !important;
}

button:not(.btn-primary):not(.mainaction):not(.primary):hover {
  background: var(--jr-bg-soft) !important;
  border-color: var(--jr-brand-soft) !important;
}

/* Form inputs */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea,
select {
  background: #ffffff !important;
  border: 1px solid var(--jr-border) !important;
  color: var(--jr-text-strong) !important;
  border-radius: 9px !important;
  padding: 9px 12px !important;
  font-size: 13.5px !important;
}

input:focus, textarea:focus, select:focus {
  border-color: var(--jr-brand-soft) !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,.14) !important;
  outline: none !important;
}

/* Search bar */
#quicksearchbar, .quicksearchbar, #searchfilter {
  background: var(--jr-bg-soft) !important;
  border-radius: 11px !important;
  border: 1px solid var(--jr-border) !important;
}

#quicksearchbar input, .quicksearchbar input {
  background: transparent !important;
  border: none !important;
  color: var(--jr-text);
}

/* Compose */
#compose-container, .composefields { background: #ffffff !important; }
#composebody, .editor-content, .cke_editable {
  background: #fff !important;
  color: #1e293b !important;
  border-radius: 10px !important;
}

/* Popups / Dialogs */
.popupmenu, .menu.popupmenu, .ui-dialog {
  background: #ffffff !important;
  border: 1px solid var(--jr-border) !important;
  border-radius: 12px !important;
  box-shadow: var(--jr-shadow-lg) !important;
  color: var(--jr-text);
}

.popupmenu li a, .menu.popupmenu li a {
  color: var(--jr-text) !important;
  border-radius: 6px;
  margin: 2px;
}

.popupmenu li a:hover, .menu.popupmenu li a:hover {
  background: var(--jr-bg-hover) !important;
  color: var(--jr-brand) !important;
}

.ui-dialog .ui-dialog-titlebar {
  background: var(--jr-bg-soft) !important;
  border-bottom: 1px solid var(--jr-border) !important;
  color: var(--jr-text-strong) !important;
  font-weight: 600;
  border-radius: 12px 12px 0 0;
}

/* Scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--jr-bg-soft); }
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
  background-clip: padding-box;
}

/* Tables (settings, contacts, etc) */
table.records-table, table.listing { color: var(--jr-text) !important; }

table.records-table thead th, table.listing thead th {
  background: var(--jr-bg-soft) !important;
  color: var(--jr-text-muted) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: .12em !important;
  border-bottom: 1px solid var(--jr-border) !important;
}

table.records-table tbody td, table.listing tbody td {
  border-bottom: 1px solid var(--jr-border-soft) !important;
  background: #ffffff !important;
}

/* Account label / username in header */
.account-info, .username, #taskmenu .username {
  color: var(--jr-text-strong) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}

/* Support link */
.support-link, .support-url { color: var(--jr-brand) !important; }
.support-url + .support-url { display: none !important; }

/* Override any Roundcube dark-theme variables */
body, html, .skin-elastic {
  --color-background: #ffffff !important;
  --color-background-secondary: #f6f8fb !important;
  --color-text: #1e293b !important;
  --color-text-secondary: #64748b !important;
}

/* Top-right action bar (Reply / Forward / Delete) */
.toolbarmenu, .menu.toolbarmenu {
  background: #ffffff !important;
  color: var(--jr-text);
}

/* About / Logout buttons at bottom of left rail */
#taskmenu .footer, #taskmenu .bottom {
  background: #ffffff !important;
  border-top: 1px solid var(--jr-border-soft) !important;
}

/* Icons inside taskmenu — make them blue/brand colored */
#taskmenu .button i,
#taskmenu .button svg,
#taskmenu .selected i {
  color: inherit !important;
}

/* Selected message in list — left accent bar */
.messagelist tbody tr.selected td:first-child,
#messagelist tbody tr.selected td:first-child {
  box-shadow: inset 3px 0 0 var(--jr-brand) !important;
}

/* mobile / phone tweaks */
@media (max-width: 640px) {
  #login-form { padding: 32px 22px 26px !important; border-radius: 18px !important; }
  #login-form img.contentlogo { max-height: 54px !important; }
}