/* ============================================================
   Portal Networks — Roundcube branding plugin (layered over stock elastic)
   Roundcube 1.6.16  |  portalnetworks.ca
   ============================================================ */

/* ── 0. FONTS (self-hosted — no third-party request, CA data residency) ── */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/montserrat-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/montserrat-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/montserrat-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('assets/fonts/montserrat-800.woff2') format('woff2');
}

/* ── 1. CSS CUSTOM PROPERTY OVERRIDES ────────────────────── */
:root {
  --font-family:           'Montserrat', Arial, Helvetica, sans-serif;
  --color-main:            #080B42;
  --color-main-dark:       #050830;
  --color-font:            #0d1033;
  --color-btn-primary:     #3898EC;
  --color-btn-secondary:   #f3f5fa;
  --color-link:            #3898EC;
  --color-border:          #e7eaf2;
  --color-background:      #f7f6f3;
  --color-bg-sidebar:      #080B42;
  --color-text:            #0d1033;
  --color-text-secondary:  #6b7280;
  --color-selection:       rgba(56, 152, 236, .18);
  --color-success:         #1f9d6b;
  --color-warning:         #d98a17;
  --color-danger:          #d6455b;
}

/* ── 2. STRUCTURAL OVERRIDES ──────────────────────────────── */

/* Global font */
body,
input, button, select, textarea {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif !important;
}

/* App background — light quote-banner gradient (the same "radiant" as the login).
   Chrome below is frosted-translucent so this glows through instead of hard blocks. */
html, body,
#layout {
  background:
    radial-gradient(900px 720px at 80% 4%,    rgba(25, 211, 243, .28), transparent 60%),
    radial-gradient(1000px 820px at 90% 52%,  rgba(52,  87, 255, .22), transparent 62%),
    radial-gradient(900px 740px at 94% 26%,   rgba(139, 47, 232, .24), transparent 62%),
    radial-gradient(900px 740px at 99% 82%,   rgba(255, 46, 110, .22), transparent 62%),
    radial-gradient(820px 700px at 105% 104%, rgba(255, 157, 43, .18), transparent 60%),
    linear-gradient(180deg, #ffffff, #eef0f6) !important;
}
/* Reading pane (right) stays transparent so the gradient "radiant" shows there,
   especially in the empty/no-message state. */
#layout-content,
#layout-content .iframe-wrapper,
#messagecontframe { background: transparent !important; }

/* Message list column is SOLID white — the gradient must not wash over the rows
   (kills subject/sender legibility). Keep it crisp and high-contrast. */
#layout-list,
#messagelist-content,
#messagelist,
#messagelist-content table { background: #ffffff !important; }

/* Header bar — frosted glass over the gradient, rainbow accent as bottom border */
#header {
  background: rgba(255, 255, 255, .55) !important;
  backdrop-filter: blur(14px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.1) !important;
  border-bottom: 3px solid transparent !important;
  border-image: linear-gradient(90deg, #08DCFC, #2764FD, #7714FD, #C121F3, #FD3290, #FD7A45) 1 !important;
  height: 44px;
}

/* #header .task-button is the only header color selector NOT covered by the
   Section 7 contrast pass; its base color is kept here. The other header link
   colors are set (AA-bumped) in Section 7. */
#header .task-button {
  color: rgba(14, 16, 49, .70) !important;
}

#header a:hover,
#header .button:hover {
  color: #0E1031 !important;
  background: rgba(14, 16, 49, .05) !important;
}

/* Logo in header — compact orbit MARK (the header slot is too narrow for the full
   wordmark, which clipped to "Por"). The full wordmark is kept for the login page. */
#logo {
  content: url('assets/logo-mark.svg') !important;
  height: 30px !important;
  width: auto !important;
  max-width: 40px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: none !important;
  flex-shrink: 0 !important;
}

/* Header search bar — light */
#quicksearchbar input[type=text],
#header .searchbar input {
  background: rgba(14, 16, 49, .05) !important;
  border: 1px solid rgba(14, 16, 49, .12) !important;
  border-radius: 6px !important;
  color: #0E1031 !important;
}

#quicksearchbar input[type=text]::placeholder,
#header .searchbar input::placeholder {
  color: rgba(14, 16, 49, .40) !important;
}

/* Sidebar / navigation column — frosted light over the gradient */
#sidebar,
#layout > div#sidebar,
#layout-sidebar,
#navigation,
#folderlist-content,
.sidebar-content {
  background: rgba(255, 255, 255, .45) !important;
  backdrop-filter: blur(12px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.05) !important;
  border-right: 1px solid rgba(14, 16, 49, .08) !important;
}

/* Sidebar flex layout — pins Assist card to bottom */
#layout-sidebar {
  display: flex !important;
  flex-direction: column !important;
}

#layout-sidebar #folderlist-content {
  flex: 1 1 0% !important;
  overflow-y: auto !important;
  min-height: 0 !important;
}

/* Folder list links */
#mailboxlist a,
#folderlist a,
#navigation a {
  color: rgba(14, 16, 49, .72) !important;
}

/* Active/selected folder */
#mailboxlist li.selected > a,
#mailboxlist a.selected,
#folderlist a.selected {
  background-color: rgba(56, 152, 236, .14) !important;
  border-left: 2px solid #3898EC !important;
  color: #0E1031 !important;
  font-weight: 600;
}

/* Folder hover */
#mailboxlist li > a:hover,
#folderlist a:hover {
  background-color: rgba(14, 16, 49, .05) !important;
  color: #0E1031 !important;
}

/* Unread count badge */
.unread-count,
.mailboxes .unread > a .unread-count {
  background-color: #3898EC !important;
  color: #ffffff !important;
}

/* Compose button — shape only (color/background + hover handled by the
   Section 7 contrast pass, which supersedes the earlier #3898EC values). */
a#button-compose,
#sidebar .compose-button,
#sidebar .compose-button a,
.compose-button {
  border-radius: 6px !important;
  font-weight: 700 !important;
}

/* Message list — unread rows */
#messagelist tbody tr.unread,
table.listing tbody tr.unread {
  background-color: #f5f8ff !important;
}

/* NOTE: the active/selected message-list row and primary-button color blocks
   that lived here are intentionally removed — they were fully superseded by the
   Section 7 contrast pass (selected row: #e4ecfb / 3px #2563EB; primary buttons:
   #2563EB) at equal specificity but later source order. */

/* ── 3. LOGIN PAGE (light — Portal quote-banner gradient) ──── */

/* Gradient accent bars — top + bottom of viewport */
body.task-login::before,
body.task-login::after {
  content: '';
  position: fixed;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #08DCFC, #2764FD, #7714FD, #C121F3, #FD3290, #FD7A45);
  z-index: 9999;
}
body.task-login::before { top: 0; }
body.task-login::after  { bottom: 0; }

/* Page background — light quote-banner gradient (white base + soft brand blooms).
   Containers made transparent so the body gradient shows through. */
body.task-login {
  background:
    radial-gradient(680px 520px at 70% 8%,   rgba(25, 211, 243, .42), transparent 60%),
    radial-gradient(760px 620px at 80% 60%,  rgba(52,  87, 255, .34), transparent 62%),
    radial-gradient(700px 560px at 89% 28%,  rgba(139, 47, 232, .40), transparent 62%),
    radial-gradient(700px 560px at 95% 78%,  rgba(255, 46, 110, .40), transparent 62%),
    radial-gradient(620px 520px at 101% 104%, rgba(255, 157, 43, .30), transparent 60%),
    linear-gradient(180deg, #ffffff, #f3f4fa) !important;
  min-height: 100vh !important;
}
body.task-login #layout,
body.task-login #layout-content { background: transparent !important; }

/* Login logo — replace elastic's default img with the dark-wordmark Portal logo
   (#logo IS the <img>, so use content:url to swap the rendered image; no bleed-through). */
body.task-login #logo {
  content: url('assets/logo-color.svg') !important;
  width: 190px !important;
  height: auto !important;
  max-width: 62% !important;
  display: block !important;
  margin: 8px auto 30px !important;
  padding: 0 !important;
  background: none !important;
}

/* Login card — solid white, centered (elastic centers #login-form) */
body.task-login #login-form,
body.task-login .formbox,
body.task-login .login-body {
  background: #ffffff !important;
  border: 1px solid rgba(14, 16, 49, .08) !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 50px rgba(14, 16, 49, .16) !important;
  backdrop-filter: none !important;
  padding: 26px 24px !important;
}

/* Form inputs — light surface, dark text */
body.task-login input[type=text],
body.task-login input[type=password],
body.task-login input[type=email] {
  background: #f5f6fa !important;
  border: 1px solid rgba(14, 16, 49, .14) !important;
  border-radius: 8px !important;
  color: #0E1031 !important;
}

body.task-login input[type=text]::placeholder,
body.task-login input[type=password]::placeholder {
  color: rgba(14, 16, 49, .40) !important;
}

body.task-login input:focus {
  border-color: #3457FF !important;
  box-shadow: 0 0 0 3px rgba(52, 87, 255, .18) !important;
  outline: none;
}

/* Input-group icon prepends (user / lock) */
body.task-login .input-group-text,
body.task-login .input-group .input-group-prepend > * {
  background: #eef0f7 !important;
  border: 1px solid rgba(14, 16, 49, .14) !important;
  color: #3457FF !important;
}

/* Form labels — dark, subtle */
body.task-login label {
  color: rgba(14, 16, 49, .62) !important;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .6px;
}

/* Submit button — brand blue */
body.task-login button[type=submit],
body.task-login input[type=submit],
body.task-login a.button.mainaction,
body.task-login button.mainaction {
  background-color: #3457FF !important;
  border-color: #3457FF !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
}

body.task-login button[type=submit]:hover,
body.task-login input[type=submit]:hover,
body.task-login button.mainaction:hover {
  background-color: #2742d6 !important;
  border-color: #2742d6 !important;
}

/* Headings (incl. visually-hidden .voice) dark; links brand blue */
body.task-login h1,
body.task-login h2 { color: #0E1031 !important; }
body.task-login a  { color: #3457FF !important; }

/* Footer / product name — subtle dark on the light background */
body.task-login #login-footer,
body.task-login #footer {
  color: rgba(14, 16, 49, .45) !important;
}
body.task-login #login-footer a {
  color: rgba(14, 16, 49, .55) !important;
}

/* ── 4. ASSIST PROMO CARD ─────────────────────────────────── */

#pn-assist-card {
  margin: auto 10px 10px;
  background: linear-gradient(135deg, rgba(56, 152, 236, .18) 0%, rgba(119, 20, 253, .18) 100%);
  border: 1px solid rgba(56, 152, 236, .35);
  border-radius: 8px;
  padding: 10px;
  position: relative;
  box-shadow: 0 0 8px rgba(56, 152, 236, .12), 0 0 16px rgba(119, 20, 253, .07);
}


#pn-assist-card .pn-icon {
  font-size: 16px;
  margin-bottom: 4px;
  display: block;
}

#pn-assist-card .pn-title {
  font-size: 10px;
  font-weight: 700;
  color: #0E1031;
  margin-bottom: 3px;
  line-height: 1.3;
}

#pn-assist-card .pn-body {
  font-size: 9px;
  color: rgba(14, 16, 49, .62);
  line-height: 1.4;
  margin-bottom: 8px;
}

#pn-assist-card .pn-cta {
  display: block;
  background: #3898EC;
  color: #ffffff !important;
  text-align: center;
  border-radius: 5px;
  padding: 6px 0;
  font-size: 10px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: .2px;
}

#pn-assist-card .pn-cta:hover {
  background: #1d6fc0;
}

/* ── 5. LOGGED-IN TASKBAR ─────────────────────────────────── */

/* Hide the dark/light mode toggle. In this psa-roundcube build the real element is
   <a class="theme dark">Dark mode</a> inside #taskmenu (no inline onclick), so the
   confirmed selectors are a.theme / a.theme.dark — the earlier dark-mode-toggle /
   [onclick*=dark] guesses never matched, which is why the "Dark mode" label leaked
   into the rail and overlapped Contacts/Settings. Older guesses kept as defensive
   no-ops in case a future build renames the element. */
#taskmenu a.theme,
a.button.theme,
a.theme.dark,
#taskmenu li:has(a.theme),
#taskbar a.button.dark-mode-toggle,
a.button.dark-mode-toggle,
#taskbar .color-mode,
.color-mode-toggle,
a[onclick*="dark"],
a[onclick*="light"],
li.color-mode,
li.toggle-dark-mode,
.toggle-dark-mode,
#taskmenu li.toggle-dark-mode,
#taskbar li:has(a[class*="dark"]),
#taskbar li:has(a[class*="mode"]) {
  display: none !important;
}

/* Hide About link */
a.button.about,
#taskmenu a.about,
li:has(a.about) {
  display: none !important;
}

/* Task-rail background — frosted light, consistent with sidebar.
   The rail is #taskmenu nested inside #layout-menu, and elastic paints #layout-menu
   a hard charcoal (#2F3A3F) by default. Frosting only #taskmenu let that charcoal
   show through the translucent white and muddied the whole rail to a dark block.
   So move the single frosted layer onto #layout-menu (the actual full-height column)
   and keep #taskbar/#taskmenu transparent — one clean glass layer over the body
   gradient, matching the folder sidebar instead of stacking two translucent fills. */
#layout-menu {
  background: rgba(255, 255, 255, .45) !important;
  backdrop-filter: blur(12px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.05) !important;
  border-right: 1px solid rgba(14, 16, 49, .08) !important;
}
#taskbar,
#taskmenu {
  background: transparent !important;
  border-right: 0 !important;
}

#taskbar a,
#taskbar .button,
#taskmenu a {
  color: rgba(14, 16, 49, .55) !important;
  border-radius: 8px !important;
  background: transparent !important;   /* no filled blocks (e.g. elastic's dark logout) */
  /* elastic gives each button an explicit width = full rail width (~78px). Combined
     with the 6px side margins below that pushed the button's right edge ~6px past the
     rail, so the hover/selected pill bled into the adjacent column. width:auto lets the
     block shrink to (rail − margins), keeping the pill cleanly inset on both sides. */
  width: auto !important;
  margin: 3px 6px !important;           /* breathing room so icons don't mash together */
}

#taskbar a:hover,
#taskbar a.selected,
#taskbar a.active,
#taskmenu a:hover,
#taskmenu a.selected,
#taskmenu a.active {
  color: #3898EC !important;
  background-color: rgba(56, 152, 236, .14) !important;
}

/* Logout / special-button area — strip elastic's dark filled background */
#taskmenu .special-buttons,
#taskmenu li.special,
#taskmenu li.last,
#taskmenu li:last-child,
#taskbar .special-buttons {
  background: transparent !important;
}

/* Logout — subtle red tint, no dark block */
#taskmenu a.logout,
#taskmenu a[href*="logout"],
a.button.logout {
  color: rgba(214, 69, 91, .70) !important;
  background: transparent !important;
}
#taskmenu a.logout:hover,
#taskmenu a[href*="logout"]:hover {
  color: #d6455b !important;
  background: rgba(214, 69, 91, .12) !important;
}

/* ── 6. CONTENT TOOLBARS ──────────────────────────────────── */

/* Message-list and preview toolbars — frosted light over the gradient */
#messagelist-header .header,
#messagelist-header,
#layout-content > .header[role="toolbar"],
#layout-list > .header {
  background: rgba(255, 255, 255, .55) !important;
  backdrop-filter: blur(12px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.05) !important;
  border-bottom: 1px solid rgba(14, 16, 49, .08) !important;
}

/* Search bar row below message-list toolbar */
#mailsearchform,
.searchbar {
  background: rgba(255, 255, 255, .40) !important;
  border-bottom: 1px solid rgba(14, 16, 49, .07) !important;
}

/* Toolbar buttons — base */
.toolbar a.button,
.toolbar .button,
#messagelist-header a.button,
#layout-content .header a.button {
  color: rgba(14, 16, 49, .60) !important;
  border-radius: 6px !important;
}

/* Toolbar buttons — hover */
.toolbar a.button:not(.disabled):hover,
#messagelist-header a.button:not(.disabled):hover,
#layout-content .header a.button:not(.disabled):hover {
  background: rgba(56, 152, 236, .14) !important;
  color: #3898EC !important;
}

/* Toolbar buttons — active state */
.toolbar a.button.active,
.toolbar a.button.selected {
  color: #3898EC !important;
  background: rgba(56, 152, 236, .12) !important;
}

/* Toolbar buttons — disabled */
.toolbar a.button.disabled {
  color: rgba(14, 16, 49, .25) !important;
}

/* Toolbar button labels */
.toolbar .button .inner,
.toolbar a.button .inner {
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .2px !important;
  color: inherit !important;
}

/* ── 7. CONTRAST / ACCESSIBILITY (light theme) ────────────── */

/* Message list — crisp dark text on the white list (was washed out by the gradient) */
#messagelist td,
#messagelist .subject,
#messagelist .subject a,
#messagelist .fromto .name,
table.messagelist td,
table.messagelist .subject a {
  color: #1c1e33 !important;
}
#messagelist tr.unread td.subject,
#messagelist tr.unread .subject a,
table.messagelist tr.unread .subject a {
  color: #0E1031 !important;
  font-weight: 700 !important;
}
/* Secondary meta (date / size) — de-emphasised but still ≥ AA on white */
#messagelist .date,
#messagelist .size,
#messagelist .fromto .date,
table.messagelist .date {
  color: #5b5e74 !important;
}

/* Chrome links/labels — bump to AA on the frosted-light surfaces */
#header a,
#header .button,
#header .header-links a,
.toolbar a.button,
#messagelist-header a.button,
#layout-content .header a.button,
#mailboxlist a,
#folderlist a,
#navigation a,
#taskbar a,
#taskmenu a { color: #2a2d4a !important; }

/* Action buttons — darker brand blue for AA white-on-blue, clearly outlined */
a.button.primary,
button.primary,
input[type=submit].primary,
.button.mainaction,
a.button.mainaction,
a#button-compose,
.compose-button,
.compose-button a,
.btn-primary,
button.btn-primary,
#pn-assist-card .pn-cta {
  background-color: #2563EB !important;
  border: 1px solid #2563EB !important;
  color: #ffffff !important;
}
a.button.primary:hover,
button.primary:hover,
.button.mainaction:hover,
a#button-compose:hover,
.compose-button:hover,
.btn-primary:hover,
#pn-assist-card .pn-cta:hover {
  background-color: #1d4fc0 !important;
  border-color: #1d4fc0 !important;
}

/* Selected message row — stronger left accent + dark text for clear focus */
#messagelist tbody tr.selected,
table.listing tbody tr.selected,
table.messagelist tbody tr.selected {
  background-color: #e4ecfb !important;
  border-left: 3px solid #2563EB !important;
}
#messagelist tbody tr.selected td,
table.messagelist tbody tr.selected td { color: #0E1031 !important; }

/* Keep hover/active accent text on the darker brand blue (was the light #3898EC) */
.toolbar a.button:not(.disabled):hover,
#messagelist-header a.button:not(.disabled):hover,
#layout-content .header a.button:not(.disabled):hover,
.toolbar a.button.active,
.toolbar a.button.selected,
#taskbar a:hover,
#taskbar a.selected,
#taskbar a.active,
#taskmenu a:hover,
#taskmenu a.selected,
#taskmenu a.active { color: #1d4fc0 !important; }