:root {
  --iaep-navy: #123b6d;
  --iaep-blue: #153f73;
  --iaep-blue-deep: #123b6d;
  --iaep-gold: #e0b52a;
  --iaep-hover: #1e5aa8;
  --iaep-paper: #f4f7fb;
  --iaep-surface: #ffffff;
  --iaep-text: #17212b;
  --iaep-muted: #536273;
  --iaep-border: #dbe3ec;
  --iaep-radius: 10px;
  --iaep-shadow: 0 8px 25px rgba(0, 34, 72, .14);
  --iaep-focus: 0 0 0 3px rgba(224, 181, 42, .5);
  --iaep-light-page: #f3f6f9;
  --iaep-light-panel: #ffffff;
  --iaep-light-secondary: #eef4f8;
  --iaep-light-selected: #dcecf7;
  --iaep-light-text: #10283f;
  --iaep-light-muted: #5d6b78;
  --iaep-light-border: rgba(6, 44, 82, 0.12);
}

/* Login card: the logo is supplied by Roundcube's skin_logo hook. */
.task-login { background: var(--iaep-paper); }
.task-login #layout-content {
  background: linear-gradient(145deg, var(--iaep-navy), #031b34);
  border-top: 4px solid var(--iaep-gold);
  border-radius: 12px;
  box-shadow: 0 18px 45px rgba(0, 34, 72, .22);
}
.task-login #logo {
  display: block;
  width: min(330px, 82vw);
  height: auto;
  margin: 1.25rem auto 1.1rem;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.25));
}
.iaep-login-copy { display: flex; flex-direction: column; gap: .15rem; margin: 0 auto 1.15rem; color: #fff; text-align: center; }
.iaep-login-copy strong { font-size: 1.35rem; letter-spacing: .025em; }
.iaep-login-copy span { color: var(--iaep-gold); font-size: 1.15rem; font-weight: 700; }
.iaep-login-copy small { color: rgba(255,255,255,.9); font-size: .85rem; }
.task-login #login-form label { color: #fff; }
.task-login #login-form input { border-radius: 5px; }
.task-login #login-form input::placeholder { color: #738397; opacity: 1; }
.task-login #login-form input:focus { border-color: var(--iaep-gold); box-shadow: var(--iaep-focus); }
.task-login #login-form .button.mainaction,
.task-login #login-form button {
  min-height: 44px;
  border: 0;
  border-radius: 6px;
  background: var(--iaep-gold);
  color: #111b25;
  font-weight: 700;
}
.task-login #login-form .button.mainaction:hover,
.task-login #login-form button:hover { background: var(--iaep-hover); color: #fff; }
.task-login #login-form .button.mainaction:focus,
.task-login #login-form button:focus { box-shadow: var(--iaep-focus); }
.iaep-password-toggle {
  display: block;
  min-height: 36px;
  margin-top: .35rem;
  padding: .35rem .65rem;
  border: 1px solid currentColor;
  border-radius: 5px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: .9rem;
}
.iaep-password-toggle:hover { opacity: .86; }
.iaep-password-toggle:focus { outline: 2px solid var(--iaep-gold); outline-offset: 2px; }
.task-login #login-form .iaep-login-footer { display: flex; flex-direction: column; gap: .2rem; margin: 1rem auto 0; color: rgba(255,255,255,.82); font-size: .76rem; line-height: 1.35; text-align: center; }
.task-login #login-form .iaep-login-footer strong { color: #fff; font-size: .82rem; }

/* Authenticated header and navigation. */
#layout-menu { background: linear-gradient(180deg, var(--iaep-navy), #0b2b52); border-right-color: rgba(224,181,42,.55); }
#layout-menu .popover-header { background: var(--iaep-navy); border-bottom: 2px solid var(--iaep-gold); }
#layout-menu #logo { width: min(250px, 38vw); height: auto; max-height: 56px; object-fit: contain; object-position: center; }
#taskbar .iaep-portal-link { color: #fff; text-decoration: none; font-weight: 700; }
#taskbar .iaep-portal-link:hover, #taskbar .iaep-portal-link:focus { color: var(--iaep-gold); }
#taskbar .iaep-portal-link:focus, #taskmenu a:focus, #layout-menu a:focus, a.button:focus, button:focus { outline: 2px solid var(--iaep-gold); outline-offset: 2px; }
#taskmenu .button.compose, #taskmenu .button.selected, .toolbar a.button:hover, button.mainaction, .button.mainaction { background-color: var(--iaep-gold); color: #111b25; }
#taskmenu .button.compose:hover, #taskmenu .button.selected:hover, .toolbar a.button:hover, button.mainaction:hover, .button.mainaction:hover { background-color: var(--iaep-hover); }
#taskmenu .button.compose, button.mainaction, .button.mainaction { border-radius: 6px; }

/* Real Elastic message, folder, contact, dialog and settings surfaces. */
#taskmenu { background: var(--iaep-navy); }
#taskmenu .button { color: #fff; }
#layout-sidebar { background: linear-gradient(180deg, var(--iaep-navy), #0b2b52); color: #fff; border-right: 1px solid rgba(224,181,42,.4); }
#layout-sidebar .listbox a { color: #fff; }
#layout-sidebar .listbox li.selected > a { background: var(--iaep-blue-deep); border-left: 3px solid var(--iaep-gold); }
#layout-sidebar .listbox li a:hover, #layout-sidebar .listbox li a:focus { background: var(--iaep-hover); }
#layout-content .toolbar, #message-header, #message-header .header-title { border-color: var(--iaep-border); }
#messagelistcontainer { background: var(--iaep-surface); }
#messagelist th { color: var(--iaep-muted); }
#messagelist td.subject.unread, #messagelist tr.unread td { font-weight: 700; }
#messagelist tr.unread td.subject::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--iaep-gold); vertical-align: middle; }
#messagecontframe { background: var(--iaep-surface); }
#messagecontframe .message-part, #messagecontframe iframe { background: #fff; }
#layout-content, #messagelistcontainer, #messagecontframe, #contactview, #addressbooklist, #settings-sections, #settings-right { border-color: var(--iaep-border); }
#messagelistcontainer, #messagecontframe, #contactview, #addressbooklist, #settings-right { border-radius: var(--iaep-radius); box-shadow: var(--iaep-shadow); }
#messagelist tr.selected, #messagelist tr.unread.selected { background: rgba(30,90,168,.16); }
#messagelist tr:hover { background: rgba(30,90,168,.10); }
#layout-menu .listbox li.selected > a, #layout-menu .listbox li a:hover { background: var(--iaep-hover); }
#layout-menu .listbox li a { border-radius: 5px; margin: 2px 8px; }
.iaep-board-addressbook .button, #contactview .button, #contacts .button { border-radius: 6px; }
.header-title, .boxtitle { color: var(--iaep-blue-deep); }
a { color: var(--iaep-blue-deep); }
a:hover { color: var(--iaep-navy); }

/* Dedicated light theme. The app rail remains branded navy, while all
 * secondary panes and content surfaces use light Elastic-compatible tones. */
html:not(.dark-mode) {
  color-scheme: light;
  scrollbar-color: #b8c9d5 var(--iaep-light-page);
}
html:not(.dark-mode) body {
  background: var(--iaep-light-page);
  color: var(--iaep-light-text);
}
html:not(.dark-mode) #layout > div > .header,
html:not(.dark-mode) #layout > div > .footer {
  background: var(--iaep-light-panel);
  color: var(--iaep-light-text);
  border-color: var(--iaep-light-border);
}
html:not(.dark-mode) #layout > div > .header a.button,
html:not(.dark-mode) #layout > div > .footer a.button {
  color: var(--iaep-light-text);
}
html:not(.dark-mode) #layout-sidebar,
html:not(.dark-mode) #layout-list {
  background: var(--iaep-light-secondary);
  color: var(--iaep-light-text);
  border-color: var(--iaep-light-border);
}
html:not(.dark-mode) #layout-sidebar .header,
html:not(.dark-mode) #layout-list .header {
  background: var(--iaep-light-secondary);
  color: var(--iaep-light-text);
  border-color: var(--iaep-light-border);
}
html:not(.dark-mode) #layout-sidebar .header-title,
html:not(.dark-mode) #layout-list .header-title,
html:not(.dark-mode) #layout-content .header-title,
html:not(.dark-mode) .boxtitle {
  color: var(--iaep-light-text);
}
html:not(.dark-mode) #layout-content,
html:not(.dark-mode) #messagelistcontainer,
html:not(.dark-mode) #messagecontframe,
html:not(.dark-mode) #contactview,
html:not(.dark-mode) #addressbooklist,
html:not(.dark-mode) #settings-sections,
html:not(.dark-mode) #settings-right,
html:not(.dark-mode) .iframe-wrapper {
  background: var(--iaep-light-panel);
  color: var(--iaep-light-text);
  border-color: var(--iaep-light-border);
}
html:not(.dark-mode) #layout-content .toolbar,
html:not(.dark-mode) #message-header,
html:not(.dark-mode) #message-header .header-title,
html:not(.dark-mode) .toolbar,
html:not(.dark-mode) .header,
html:not(.dark-mode) .footer {
  border-color: var(--iaep-light-border);
}
html:not(.dark-mode) #layout-sidebar .listbox a,
html:not(.dark-mode) #layout-sidebar .listing a,
html:not(.dark-mode) #layout-list .listing a,
html:not(.dark-mode) #settings-menu a,
html:not(.dark-mode) #sections-table a {
  color: var(--iaep-light-text);
}
html:not(.dark-mode) #layout-sidebar .listbox li,
html:not(.dark-mode) #layout-sidebar .listing li,
html:not(.dark-mode) #layout-list .listing li,
html:not(.dark-mode) #settings-menu li,
html:not(.dark-mode) #sections-table li {
  border-color: var(--iaep-light-border);
}
html:not(.dark-mode) #layout-sidebar .listbox li.selected > a,
html:not(.dark-mode) #layout-sidebar .listing li.selected > a,
html:not(.dark-mode) #settings-menu li.selected > a,
html:not(.dark-mode) #sections-table li.selected > a,
html:not(.dark-mode) #sections-table li.selected > div > a,
html:not(.dark-mode) .listing li.selected,
html:not(.dark-mode) .listing tr.selected td {
  color: var(--iaep-light-text);
  background: var(--iaep-light-selected);
  border-left: 3px solid var(--iaep-gold);
}
html:not(.dark-mode) #layout-sidebar .listbox li a:hover,
html:not(.dark-mode) #layout-sidebar .listbox li a:focus,
html:not(.dark-mode) #layout-sidebar .listing li a:hover,
html:not(.dark-mode) #layout-sidebar .listing li a:focus,
html:not(.dark-mode) #settings-menu li a:hover,
html:not(.dark-mode) #settings-menu li a:focus,
html:not(.dark-mode) #sections-table li a:hover,
html:not(.dark-mode) #sections-table li a:focus {
  color: var(--iaep-light-text);
  background: #e7f2f8;
}
html:not(.dark-mode) #layout-sidebar a:focus,
html:not(.dark-mode) #layout-list a:focus,
html:not(.dark-mode) #layout-content a:focus,
html:not(.dark-mode) #settings-menu a:focus,
html:not(.dark-mode) #sections-table a:focus,
html:not(.dark-mode) button:focus,
html:not(.dark-mode) input:focus,
html:not(.dark-mode) select:focus,
html:not(.dark-mode) textarea:focus {
  outline: 2px solid var(--iaep-blue);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px rgba(21, 63, 115, .14);
}
html:not(.dark-mode) #messagelist tr.selected,
html:not(.dark-mode) #messagelist tr.unread.selected,
html:not(.dark-mode) #messagelist tr:hover,
html:not(.dark-mode) .contactlist tr.selected,
html:not(.dark-mode) .contactlist tr:hover {
  color: var(--iaep-light-text);
  background: var(--iaep-light-selected);
}
html:not(.dark-mode) #messagelist tr:hover,
html:not(.dark-mode) .contactlist tr:hover {
  background: #e7f2f8;
}
html:not(.dark-mode) #messagelist td,
html:not(.dark-mode) .contactlist td,
html:not(.dark-mode) .listing td,
html:not(.dark-mode) .listing th {
  border-color: var(--iaep-light-border);
}
html:not(.dark-mode) #messagelist th,
html:not(.dark-mode) .listing-info,
html:not(.dark-mode) .formcontent .hint,
html:not(.dark-mode) .listing span.secondary {
  color: var(--iaep-light-muted);
}
html:not(.dark-mode) #layout-menu,
html:not(.dark-mode) #taskmenu {
  background: var(--iaep-navy);
  color: #fff;
  border-color: rgba(224, 181, 42, .32);
}
html:not(.dark-mode) #taskmenu a,
html:not(.dark-mode) #taskmenu .button,
html:not(.dark-mode) #layout-menu .popover-header a {
  color: #fff;
}
html:not(.dark-mode) #taskmenu a.selected,
html:not(.dark-mode) #taskmenu a:hover,
html:not(.dark-mode) #taskmenu a:focus {
  color: #fff;
  background: var(--iaep-hover);
}
html:not(.dark-mode) #taskmenu a.selected {
  border-left: 3px solid var(--iaep-gold);
}
html:not(.dark-mode) #taskmenu .special-buttons,
html:not(.dark-mode) #taskmenu .special-buttons a {
  background: var(--iaep-navy);
  border-color: transparent;
}
html:not(.dark-mode) #taskmenu .special-buttons a:hover,
html:not(.dark-mode) #taskmenu .special-buttons a:focus {
  background: var(--iaep-hover);
}
html:not(.dark-mode) .searchbar,
html:not(.dark-mode) .menu.pagenav.pagenav-list,
html:not(.dark-mode) .menu.pagenav.pagenav-list + .navlist {
  background: var(--iaep-light-panel);
  border-color: var(--iaep-light-border);
}
html:not(.dark-mode) .searchbar input,
html:not(.dark-mode) .searchbar a,
html:not(.dark-mode) .searchbar form:before {
  color: var(--iaep-light-text);
}
html:not(.dark-mode) .header-title a,
html:not(.dark-mode) a {
  color: var(--iaep-blue-deep);
}
html:not(.dark-mode) a:hover {
  color: var(--iaep-navy);
}

@media (max-width: 700px) {
  #layout-menu #logo { width: min(205px, 62vw); max-height: 45px; }
  #taskbar .iaep-portal-link { min-width: 44px; min-height: 44px; }
  #messagelistcontainer, #messagecontframe, #contactview, #addressbooklist, #settings-right { border-radius: 7px; }
}

/* Elastic's native phone layout already supplies the hamburger button and
 * off-canvas task menu. Keep the menu items in that menu; do not turn them
 * into a horizontal navigation strip. The logo is the only persistent
 * authenticated mobile chrome. */
@media screen and (max-width: 480px) {
  html.iaep-mobile-branding .iaep-mobile-logo {
    display: block;
    position: fixed;
    z-index: 30002;
    top: .35rem;
    left: .65rem;
    width: 132px;
    height: 45px;
    object-fit: contain;
    object-position: left center;
    pointer-events: none;
  }

  html.iaep-mobile-branding #layout > div > .header {
    padding-left: 145px;
    padding-right: 3.25rem;
  }

  html.iaep-mobile-branding #layout > div > .header > a.task-menu-button {
    position: absolute;
    top: 0;
    right: .25rem;
    width: 47px;
    min-width: 47px;
    height: 57px;
    margin: 0;
    padding: 0;
    text-align: center;
    line-height: 57px;
  }

  html.iaep-mobile-branding #layout-menu,
  html.iaep-mobile-branding #taskmenu {
    overflow-x: hidden;
    max-width: 100vw;
  }

  html.iaep-mobile-branding #layout-menu .popover-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 .65rem;
  }

  html.iaep-mobile-branding #layout-menu .popover-header #logo {
    width: 132px;
    max-width: 60vw;
    max-height: 45px;
    margin: 0;
    object-fit: contain;
    object-position: left center;
  }

  html.iaep-mobile-branding #taskmenu a {
    box-sizing: border-box;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

@media (prefers-color-scheme: dark) {
  :root { --iaep-paper: #101821; --iaep-surface: #16375f; --iaep-text: #ffffff; --iaep-muted: #d4deea; --iaep-border: #31547b; }
  .task-login { background: #101821; }
  .header-title, .boxtitle { color: #f7d66d; }
  #messagelistcontainer, #messagecontframe, #contactview, #addressbooklist, #settings-right { background: var(--iaep-surface); }
  #messagelist tr:hover { background: rgba(30,90,168,.32); }
  #messagelist tr.selected { background: rgba(30,90,168,.42); }
  a { color: #7dc8f5; }
}
html.dark-mode .task-login { background: #101821; }
html.dark-mode #messagelistcontainer, html.dark-mode #messagecontframe, html.dark-mode #contactview, html.dark-mode #addressbooklist, html.dark-mode #settings-right { background: #16375f; }