/*
 * PAMGM brand color overrides for Roundcube's elastic skin.
 *
 * Every selector and original hex value below was read directly out of
 * THIS install's compiled skins/elastic/styles/styles.min.css (Roundcube
 * 1.7.2), traced back to skins/elastic/styles/colors.less
 * (@color-main: #37beff, @color-link: #00acff) -- not guessed.
 *
 * If Roundcube is ever upgraded and this stops visibly applying, re-grep
 * the new styles.min.css for the OLD hex values in the comments below to
 * find the new selectors before assuming this file is still correct:
 *   grep -oE '[^}]*\{[^}]*37beff[^}]*\}' skins/elastic/styles/styles.min.css
 */

:root {
  --pamgm-blue: #0a6ebd;
  --pamgm-blue-dark: #075694;
  --pamgm-blue-tint: #eaf3fb;
  --pamgm-navy: #0d2b40;
  --pamgm-navy-hover: #163f5c;
}

/* Primary buttons (save, send, reply, ...). Was @color-main #37beff. */
.btn-primary,
.btn-primary.disabled {
  background-color: var(--pamgm-blue) !important;
  border-color: var(--pamgm-blue) !important;
}

/* Compose / mobile floating action button. Was @color-main #37beff. */
.floating-action-buttons a.button {
  background-color: var(--pamgm-blue) !important;
  box-shadow: 0 0 5px 5px var(--pamgm-blue-tint) !important;
}

/* Links. Was @color-link #00acff / @color-link-hover (darken 10%). */
a,
.btn-link {
  color: var(--pamgm-blue);
}
a:hover,
.btn-link:hover {
  color: var(--pamgm-blue-dark);
}

/* Message list / folder list selected row (light mode). Was #ebf9ff tint. */
.listing li.selected,
.listing tr.selected td {
  background-color: var(--pamgm-blue-tint) !important;
}

/* Selected item inside a popup/dropdown listing. Was @color-main #37beff. */
.popupmenu .listing li.selected {
  background-color: var(--pamgm-blue) !important;
  color: #fff !important;
}

/* Left task menu rail. Was @color-taskmenu-background #2f3a3f. */
#taskmenu {
  background-color: var(--pamgm-navy) !important;
}
#taskmenu .button-selected,
#taskmenu a.button:hover {
  background-color: var(--pamgm-navy-hover) !important;
}

/*
 * Login page: centered white card over a full-bleed background photo, in
 * the style of owa.app-pdamgm.xyz's login screen. Background photo is
 * ptamgirimenang.com's own homepage hero (images/main_background.png,
 * re-encoded to JPEG here purely to cut ~1.1MB down to ~100KB -- same
 * image, not a different one) at 80% opacity per request, over a solid
 * navy fallback so text stays readable while the image loads.
 *
 * #layout-content is normally the FULL main content pane after login too
 * (mail list / reading pane) -- every rule here is scoped under
 * body.task-login so none of it leaks into the authenticated app view.
 */
body.task-login {
  position: relative;
  min-height: 100vh;
  overflow: auto !important; /* elastic's default body{overflow:hidden} would clip a tall card on short viewports */
  background-color: var(--pamgm-navy);
}

body.task-login::before {
  content: "";
  position: fixed;
  inset: 0;
  /* Absolute path (leading /), not relative: relative url()s in CSS resolve
     against the STYLESHEET's own URL (.../pamgm_branding/style.css), which
     would double the "plugins/pamgm_branding/" segment -- confirmed by
     inspecting the actually-computed background-image in a real browser. */
  background-image: url(/static.php/plugins/pamgm_branding/login-bg.jpg);
  background-size: cover;
  background-position: center;
  opacity: 0.8;
  z-index: 0;
}

body.task-login #layout {
  position: relative;
  z-index: 1;
  height: auto;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  background: transparent;
}

body.task-login #layout-content {
  flex: none !important;
  width: 92% !important;
  max-width: 380px !important;
  height: auto !important;
  margin: 6vh auto !important;
  padding: 2.75rem 2.25rem 2rem !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 50px rgba(13, 43, 64, 0.35) !important;
  background-color: #fff !important;
}

body.task-login #logo {
  position: static !important;
  top: auto !important;
  margin: 0 auto 1.5rem !important;
}

body.task-login #login-form {
  top: 0 !important;
  position: static !important;
}

/* Links injected via the loginfooter container (see
   pamgm_branding.php::add_login_links) -- forgot-password + setup
   tutorial, placed under the login form's own footer row. */
.pamgm-login-links {
  margin-top: 0.75rem;
  text-align: center;
  font-size: 0.82rem;
}

.pamgm-login-links a {
  color: var(--pamgm-blue);
  text-decoration: none;
}

.pamgm-login-links a:hover {
  color: var(--pamgm-blue-dark);
  text-decoration: underline;
}

.pamgm-login-links .sep {
  color: #b7c2c7;
  margin: 0 0.5rem;
}