/* Peace of Mind MMJ — brand overlay for Roundcube Elastic.
   Mirrors peaceofmindmmj.com: cream canvas, green accents, purple-cross brand,
   Fraunces headings + Manrope body, pill buttons. Loaded after the skin CSS.
   NOTE: Elastic has no `.skin-elastic` body class — target elements directly. */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&display=swap');

:root {
  --pom-green: #2e7d5b;
  --pom-green-deep: #1e5e43;
  --pom-green-tint: #e3f1ea;
  --pom-purple: #4b0864;
  --pom-teal: #2da89e;
  --pom-cream: #faf8f3;
  --pom-ink: #20302a;
  --pom-line: #e6e2d8;

  /* Re-map Elastic accent variables to the brand green (affects links, toggles, focus) */
  --color-main: #2e7d5b;
  --color-main-dark: #1e5e43;
  --color-main-light: #4a9b75;
  --color-link: #1e5e43;
  --color-link-hover: #2e7d5b;
  --color-checkbox: #2e7d5b;
  --color-checkbox-checked: #2e7d5b;
  --color-input-border-focus: #2da89e;
  --color-btn-primary: #ffffff;
  --color-btn-primary-background: #2e7d5b;
  --color-btn-primary-background-hover: #1e5e43;
  --color-btn-primary-background-focus: #1e5e43;
  --color-button-action: #ffffff;
  --color-button-action-background: #2e7d5b;
  --color-button-action-background-hover: #1e5e43;
  --color-list-selected-background: #e3f1ea;
  --color-list-selected: #1e5e43;
}

/* ---------------- Typography ---------------- */
body,
input, button, select, textarea,
.listing, .boxtitle, .menu a {
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
}
h1, h2, h3,
.boxtitle,
.header-title,
#layout-content > .header .header-title {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif !important;
  font-weight: 500 !important;
}

/* ---------------- Canvas ---------------- */
html, body { background-color: var(--pom-cream); }
#layout { background-color: var(--pom-cream); }

/* ---------------- Login screen ---------------- */
body.task-login,
body.task-login #layout,
body.task-login #layout-content {
  background: linear-gradient(160deg, #faf8f3 0%, #e3f1ea 100%) !important;
}
body.task-login .formcontainer,
body.task-login #login-form .box,
body.task-login #login-form .formcontent,
body.task-login .box-inner {
  border-radius: 22px !important;
  border: 1px solid var(--pom-line) !important;
  box-shadow: 0 16px 44px rgba(31, 78, 67, 0.14) !important;
  background: #ffffff !important;
}
body.task-login img.logo {
  max-width: 250px !important;
  height: auto !important;
  margin: 6px auto 14px !important;
  display: block !important;
}

/* ---------------- Buttons → green pills ---------------- */
.btn { border-radius: 999px !important; }
.btn-primary,
button.btn-primary,
.btn.btn-primary,
input.btn-primary,
.mainaction,
button.mainaction,
#rcmloginsubmit {
  background-color: var(--pom-green) !important;
  background-image: none !important;
  border-color: var(--pom-green) !important;
  color: #fff !important;
}
.btn-primary:hover,
button.btn-primary:hover,
.btn.btn-primary:hover,
.mainaction:hover,
#rcmloginsubmit:hover {
  background-color: var(--pom-green-deep) !important;
  border-color: var(--pom-green-deep) !important;
}

/* ---------------- Links & accents ---------------- */
a, a:visited { color: var(--pom-green-deep); }
a:hover { color: var(--pom-green); }

#layout-sidebar .listing li.selected > a,
.listing li.selected > a,
.listing tr.selected > td,
.listing tr.focused.selected > td {
  background-color: var(--pom-green-tint) !important;
  color: var(--pom-green-deep) !important;
  box-shadow: inset 3px 0 0 var(--pom-green);
}

/* Toolbar hover + brand bar */
#layout-menu { background: #ffffff; }
.toolbar a.button:hover,
.toolbar .btn-link:hover { color: var(--pom-green-deep) !important; }

/* ---------------- Inputs focus ---------------- */
input:focus, textarea:focus, select:focus,
.form-control:focus {
  border-color: var(--pom-teal) !important;
  box-shadow: 0 0 0 2px rgba(45, 168, 158, 0.25) !important;
}

/* ---------------- Roundcube attribution footer (login/logout) ---------------- */
.pom-attribution {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1000;
  text-align: center;
  padding: 8px 12px;
  font-size: 12px;
  color: var(--pom-ink);
  opacity: 0.8;
  background: rgba(250, 248, 243, 0.9);
  backdrop-filter: blur(2px);
  border-top: 1px solid var(--pom-line);
  font-family: 'Manrope', system-ui, sans-serif;
}
.pom-attribution a { color: var(--pom-green-deep); text-decoration: none; }
.pom-attribution a:hover { text-decoration: underline; }

/* ---------------- Forced 2FA enrollment instructions ---------------- */
.pom-2fa-instructions {
  margin: 0 0 20px;
  padding: 16px 20px;
  border: 1px solid #b9e0db;
  border-left: 5px solid var(--pom-green);
  border-radius: 14px;
  background: var(--pom-green-tint);
  color: var(--pom-ink);
  font-family: 'Manrope', system-ui, sans-serif;
  line-height: 1.55;
  max-width: 760px;
}
.pom-2fa-instructions h3 {
  font-family: 'Fraunces', Georgia, serif !important;
  margin: 0 0 8px;
  color: var(--pom-green-deep);
  font-size: 1.15rem;
}
.pom-2fa-instructions p { margin: 0 0 10px; }
.pom-2fa-instructions ol { margin: 0 0 6px; padding-left: 22px; }
.pom-2fa-instructions li { margin: 0 0 8px; }
.pom-2fa-instructions a { color: var(--pom-green-deep); font-weight: 600; }
.pom-2fa-instructions .pom-2fa-hint { font-size: 0.88rem; color: var(--pom-muted, #5c6b63); margin: 8px 0 0; }

/* Hide the plugin's generic enrollment modal — our instructions panel replaces it */
#enrollment_dialog { display: none !important; }