/* =========================================================================
 * RENSURE MAIL — Brand Palette Stylesheet (SEO-801 / MAIL-004)
 * Palette: forest (#1C4A3D), forest.dark (#13352B), forest.light (#2A6A58)
 *          sand (#F4F3EE), sand.light (#FAF9F5), sand.dark (#E8E6DF)
 *          ink (#16130F), ink.muted (#57534E), ink.subtle (#78716C)
 *          clock (#92400E), halt (#8A2C1F)
 * Fonts:   Playfair Display 500/700 (Display), Jost 400/500/600 (Body & UI)
 * ========================================================================= */

/* --- Self-Hosted Fonts --- */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/custom/playfair-display-500.2c152381.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0100-017F,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/custom/playfair-display-500.2c152381.woff2') format('woff2');
}

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/custom/jost-400.06e6cd11.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0100-017F,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/custom/jost-500.94f9e4ec.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0100-017F,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/custom/jost-500.94f9e4ec.woff2') format('woff2');
}

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/custom/jost-500.94f9e4ec.woff2') format('woff2');
}

/* =========================================================================
 * 1. Global CSS Variables & Typography Override
 * ========================================================================= */
:root,
body#rl-app {
  color-scheme: light;

  /* Typography */
  --fontSans: 'Jost', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  --fontSerif: 'Playfair Display', Georgia, serif !important;
  font-family: var(--fontSans);

  /* MAIN Layout & Surfaces */
  --main-color: #16130F;               /* ink.DEFAULT */
  --main-bg-color: #F4F3EE;            /* sand.DEFAULT - warm editorial ground */
  --main-bg-image: none !important;    /* Eliminate dark slate texture */
  --main-font-size: 14px;
  --link-color: #1C4A3D;               /* forest.DEFAULT */
  --border-color: #E8E6DF;             /* sand.dark hairline border */
  --border-radius: 6px;
  --hr-color: #E8E6DF;                 /* sand.dark */

  --panel-bg-clr: #FAF9F5;             /* sand.light card surface */

  /* Status Colors */
  --warning-clr: #92400E;              /* clock */
  --warning-bg-clr: #FAF9F5;
  --warning-border-clr: #E8E6DF;

  --error-clr: #8A2C1F;                /* halt */
  --error-bg-clr: #FAF9F5;
  --error-border-clr: #8A2C1F;

  --info-clr: #1C4A3D;                 /* forest */
  --info-bg-clr: #F4F3EE;
  --info-border-clr: #E8E6DF;

  /* FOLDERS (Left Sidebar) */
  --folders-color: #57534E;            /* ink.muted */
  --folders-disabled-color: #78716C;   /* ink.subtle */
  --folders-selected-color: #13352B;   /* forest.dark */
  --folders-selected-bg-color: rgba(28, 74, 61, 0.08); /* subtle forest tint */
  --folders-focused-color: #13352B;
  --folders-focused-bg-color: rgba(28, 74, 61, 0.12);
  --folders-hover-color: #16130F;      /* ink.DEFAULT */
  --folders-hover-bg-color: rgba(28, 74, 61, 0.04);
  --folders-drop-color: #13352B;
  --folders-drop-bg-color: rgba(28, 74, 61, 0.15);
  --unread-count-color: #FAF9F5;       /* sand.light */
  --unread-count-bg-color: #1C4A3D;    /* forest.DEFAULT badge */

  /* SETTINGS */
  --settings-menu-color: #57534E;
  --settings-menu-selected-color: #13352B;
  --settings-menu-selected-bg-color: rgba(28, 74, 61, 0.08);
  --settings-menu-hover-color: #16130F;
  --settings-menu-hover-bg-color: rgba(28, 74, 61, 0.04);

  /* MESSAGES List & Header */
  --message-list-toolbar-bg-color: #FAF9F5;
  --message-header-bg-clr: #FAF9F5;

  /* DIALOGS & Popups */
  --dialog-clr: #16130F;
  --dialog-bg-clr: #FAF9F5;
  --dialog-border-clr: #E8E6DF;
  --dialog-border-radius: 8px;

  /* BUTTONS & FORMS */
  --btn-clr: #16130F;
  --btn-bg-clr: #FAF9F5;
  --btn-border-clr: #E8E6DF;
  --btn-border-radius: 6px;
  --btn-success-bg-clr: #1C4A3D;       /* forest.DEFAULT for "New message" */
  --btn-danger-bg-clr: #8A2C1F;        /* halt */

  --input-clr: #16130F;
  --input-bg-clr: #FAF9F5;
  --input-border-clr: #E8E6DF;
  --input-border-radius: 6px;
  --input-focus-border-clr: #2A6A58;   /* forest.light */

  /* TABLES */
  --tr-hover-bg-clr: #F4F3EE;
  --tr-odd-bg-clr: #FAF9F5;

  /* TABS */
  --tab-active-bg-clr: #FAF9F5;
  --tab-hover-border-clr: #E8E6DF;
}

/* Base Body Application Ground */
body#rl-app {
  background: #F4F3EE none !important;
  color: #16130F;
  font-family: 'Jost', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* =========================================================================
 * 2. Left Sidebar (#rl-left / Folders & Compose)
 * ========================================================================= */
#rl-left {
  background-color: #F4F3EE !important;
  border-right: 1px solid #E8E6DF !important;
}

/* "New message" Primary Action Button */
#rl-left .buttonCompose,
#V-MailMessageList .buttonCompose {
  background-color: #1C4A3D !important;
  color: #FAF9F5 !important;
  border: 1px solid #1C4A3D !important;
  border-radius: 6px !important;
  font-family: 'Jost', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  letter-spacing: 0.02em !important;
  height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 16px !important;
  box-shadow: 0 1px 2px rgba(22, 19, 15, 0.05) !important;
  transition: background-color 0.15s ease, border-color 0.15s ease !important;
  cursor: pointer !important;
}

#rl-left .buttonCompose:hover,
#V-MailMessageList .buttonCompose:hover {
  background-color: #2A6A58 !important;
  border-color: #2A6A58 !important;
  color: #FAF9F5 !important;
}

#rl-left .buttonCompose .fontastic,
#rl-left .buttonCompose i {
  color: #FAF9F5 !important;
  margin-right: 6px !important;
}

/* Folder Tree */
.b-folders {
  font-family: 'Jost', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

.b-folders li a {
  font-family: 'Jost', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 13.5px !important;
  color: #57534E !important;
  font-weight: 400 !important;
  padding: 4px 10px !important;
  border-radius: 5px !important;
  margin: 1px 6px !important;
  line-height: 1.4 !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
}

.b-folders li a:hover {
  color: #16130F !important;
  background-color: rgba(28, 74, 61, 0.05) !important;
}

.b-folders li a.selectable.selected,
.b-folders li a.selected {
  color: #13352B !important;
  font-weight: 600 !important;
  background-color: rgba(28, 74, 61, 0.09) !important;
}

/* Unread Badge */
.b-folders .count,
.b-folders .unread-count,
.b-folders li a[data-unread]::after {
  background-color: #1C4A3D !important;
  color: #FAF9F5 !important;
  font-family: 'Jost', sans-serif !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  border-radius: 10px !important;
  padding: 1px 6px !important;
}

/* =========================================================================
 * 3. Message List Pane (#V-MailMessageList)
 * ========================================================================= */
#V-MailMessageList {
  background-color: #FAF9F5 !important;
  border-right: 1px solid #E8E6DF !important;
}

/* Clean Flat Toolbars (Neutralizing 90s gradient, compact height) */
.thm-message-list-top-toolbar,
.thm-message-list-bottom-toolbar,
#V-MailMessageList .b-toolbar {
  background: #FAF9F5 none !important;
  background-image: none !important;
  border-bottom: 1px solid #E8E6DF !important;
  padding: 4px 8px !important;
  height: 38px !important;
  min-height: 38px !important;
}

/* Toolbar Buttons */
#V-MailMessageList .b-toolbar .btn,
#V-MailMessageList .b-toolbar button,
#rl-right .b-toolbar .btn,
#rl-right .b-toolbar button {
  background: #FAF9F5 !important;
  border: 1px solid #E8E6DF !important;
  border-radius: 4px !important;
  color: #57534E !important;
  padding: 3px 7px !important;
  transition: all 0.15s ease !important;
}

#V-MailMessageList .b-toolbar .btn:hover,
#V-MailMessageList .b-toolbar button:hover,
#rl-right .b-toolbar .btn:hover,
#rl-right .b-toolbar button:hover {
  background: #F4F3EE !important;
  color: #13352B !important;
  border-color: #2A6A58 !important;
}

/* Search Box */
#V-MailMessageList .search-input-wrp,
.search-input-wrp input {
  background-color: #FAF9F5 !important;
  border: 1px solid #E8E6DF !important;
  border-radius: 5px !important;
  font-family: 'Jost', sans-serif !important;
  font-size: 13px !important;
  color: #16130F !important;
  padding: 4px 8px !important;
}

.search-input-wrp input:focus {
  border-color: #2A6A58 !important;
  outline: 2px solid #2A6A58 !important;
}

/* =========================================================================
 * 4. Message List Rows (.messageListItem) — Condensed High-Density View
 * ========================================================================= */
.messageListItem {
  background-color: #FAF9F5 !important;
  border-bottom: 1px solid #E8E6DF !important;
  border-left: 3px solid transparent !important;
  border-right: none !important;
  font-family: 'Jost', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 13px !important;
  padding: 3px 8px !important;
  line-height: 1.35 !important;
  min-height: 28px !important;
  transition: background-color 0.12s ease !important;
}

.messageListItem .messageCheckbox {
  padding: 2px 4px 0 2px !important;
  font-size: 12px !important;
}

.messageListItem .senderParent {
  font-family: 'Jost', sans-serif !important;
  font-weight: 500 !important;
  color: #16130F !important;
  font-size: 13px !important;
  padding-right: 6px !important;
}

.messageListItem .subjectParent {
  font-family: 'Jost', sans-serif !important;
  font-weight: 400 !important;
  color: #57534E !important;
  font-size: 13px !important;
}

.messageListItem time,
.messageListItem .sizeParent {
  font-family: 'Jost', sans-serif !important;
  font-size: 11.5px !important;
  color: #78716C !important;
  line-height: 1.35 !important;
}

/* Hover Row */
.messageListItem:hover {
  background-color: #F4F3EE !important;
}

/* UNREAD MESSAGES — REPLACING UGLY YELLOW & NEON ORANGE WITH RENSURE BRAND */
.messageListItem.unseen,
.messageListItem [data-unseen] {
  background-color: rgba(28, 74, 61, 0.035) !important;
  border-left: 3px solid #1C4A3D !important;
  border-right: none !important;
}

.messageListItem.unseen .senderParent {
  font-weight: 700 !important;
  color: #13352B !important;
}

.messageListItem.unseen .subjectParent {
  font-weight: 600 !important;
  color: #16130F !important;
}

.messageListItem.unseen time {
  font-weight: 600 !important;
  color: #1C4A3D !important;
}

.messageListItem.unseen.focused {
  border-left-color: #13352B !important;
  border-right: none !important;
}

/* SELECTED & CHECKED ROWS */
.messageListItem.selected,
.messageListItem.checked {
  background-color: rgba(28, 74, 61, 0.09) !important;
  border-left: 3px solid #1C4A3D !important;
  border-right: none !important;
}

/* Star / Flag Icon */
.messageListItem .starFlag,
.messageListItem .flag-icon {
  color: #78716C !important;
}

.messageListItem .is-flagged .starFlag,
.messageListItem .is-flagged .flag-icon,
.messageListItem .starFlag.checked {
  color: #92400E !important; /* clock token */
}

/* =========================================================================
 * 5. Right Message Reading Pane (#rl-right / #V-MailMessageView)
 * ========================================================================= */
#rl-right,
#V-MailMessageView {
  background-color: #FAF9F5 !important;
}

/* Message Header Card */
.messageView .messageItemHeader {
  background-color: #FAF9F5 !important;
  border-bottom: 1px solid #E8E6DF !important;
  padding: 20px 24px !important;
}

/* Email Subject Heading in Editorial Playfair Display */
.messageView .messageItemHeader .subjectParent {
  margin-bottom: 10px !important;
}

.messageView .messageItemHeader .subjectParent .subject {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-weight: 700 !important;
  font-size: 22px !important;
  color: #13352B !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
}

.messageView .messageItemHeader .informationShort {
  font-family: 'Jost', sans-serif !important;
}

.messageView .messageItemHeader .informationShort a {
  color: #1C4A3D !important;
  font-weight: 500 !important;
}

/* Message Body */
#messageItem,
.messageView .b-text-part {
  background-color: #FAF9F5 !important;
  font-family: 'Jost', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  color: #16130F !important;
  padding: 24px !important;
}

/* =========================================================================
 * 6. Popups & Compose Window (#rl-popups, #V-PopupsCompose)
 * ========================================================================= */
#rl-popups .modal,
#V-PopupsCompose {
  background-color: #FAF9F5 !important;
  border: 1px solid #E8E6DF !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 30px rgba(22, 19, 15, 0.08) !important;
}

#V-PopupsCompose .b-header {
  border-bottom: 1px solid #E8E6DF !important;
}

#V-PopupsCompose .b-header input[type="text"] {
  background-color: #FAF9F5 !important;
  border: 1px solid #E8E6DF !important;
  border-radius: 6px !important;
  font-family: 'Jost', sans-serif !important;
  color: #16130F !important;
}

#V-PopupsCompose .btn-success,
#V-PopupsCompose .buttonSend {
  background-color: #1C4A3D !important;
  color: #FAF9F5 !important;
  border: 1px solid #1C4A3D !important;
  border-radius: 6px !important;
  font-family: 'Jost', sans-serif !important;
  font-weight: 500 !important;
  padding: 8px 18px !important;
  transition: background-color 0.15s ease !important;
}

#V-PopupsCompose .btn-success:hover,
#V-PopupsCompose .buttonSend:hover {
  background-color: #2A6A58 !important;
  border-color: #2A6A58 !important;
}

/* =========================================================================
 * 7. Login Screen (Preserved Rensure Editorial Theme)
 * ========================================================================= */
html:has(.LoginView),
body#rl-app:has(.LoginView),
body#rl-app.rensure-login-theme {
  background: #F4F3EE none !important;
  color: #16130F;
}

body#rl-app:has(.LoginView) .LoginView .descWrapper,
body#rl-app.rensure-login-theme .LoginView .descWrapper {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500;
  font-size: 36px;
  line-height: 1.25;
  color: #13352B;
  text-align: center;
  text-shadow: none;
  margin-bottom: 24px;
}

body#rl-app:has(.LoginView) .LoginView form,
body#rl-app.rensure-login-theme .LoginView form {
  background-color: #FAF9F5;
  border: 1px solid #E8E6DF;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(22, 19, 15, 0.05);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 40px;
}

body#rl-app:has(.LoginView) .LoginView form,
body#rl-app.rensure-login-theme .LoginView form,
body#rl-app:has(.LoginView) .LoginView form *,
body#rl-app.rensure-login-theme .LoginView form * {
  font-family: 'Jost', -apple-system, BlinkMacSystemFont, sans-serif;
  color: #16130F;
}

body#rl-app:has(.LoginView) .LoginView input.input-block-level,
body#rl-app.rensure-login-theme .LoginView input.input-block-level {
  font-family: 'Jost', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  font-size: 15px;
  color: #16130F;
  background-color: #FAF9F5;
  border: 1px solid #E8E6DF;
  border-radius: 6px;
  height: 44px;
  padding-left: 36px;
  padding-right: 12px;
  box-shadow: none;
  transition: border-color 0.15s ease;
}

body#rl-app:has(.LoginView) .LoginView input.input-block-level::placeholder,
body#rl-app.rensure-login-theme .LoginView input.input-block-level::placeholder {
  color: #57534E;
  opacity: 1;
}

body#rl-app:has(.LoginView) .LoginView .controls > .fontastic:first-child,
body#rl-app.rensure-login-theme .LoginView .controls > .fontastic:first-child {
  color: #57534E;
  line-height: 44px;
  font-size: 16px;
  left: 10px;
}

body#rl-app:has(.LoginView) .LoginView input:focus,
body#rl-app.rensure-login-theme .LoginView input:focus,
body#rl-app:has(.LoginView) .LoginView .e-checkbox:focus,
body#rl-app.rensure-login-theme .LoginView .e-checkbox:focus,
body#rl-app:has(.LoginView) .LoginView .buttonLogin:focus,
body#rl-app.rensure-login-theme .LoginView .buttonLogin:focus,
body#rl-app:has(.LoginView) .LoginView .language-button:focus,
body#rl-app.rensure-login-theme .LoginView .language-button:focus {
  outline: 2px solid #2A6A58;
  outline-offset: 2px;
  border-color: #2A6A58;
}

body#rl-app:has(.LoginView) .LoginView .e-checkbox,
body#rl-app.rensure-login-theme .LoginView .e-checkbox {
  font-family: 'Jost', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #16130F;
  cursor: pointer;
  user-select: none;
}

body#rl-app:has(.LoginView) .LoginView .e-checkbox span,
body#rl-app.rensure-login-theme .LoginView .e-checkbox span {
  font-family: 'Jost', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #16130F;
}

body#rl-app:has(.LoginView) .LoginView .e-checkbox i.fontastic,
body#rl-app.rensure-login-theme .LoginView .e-checkbox i.fontastic {
  color: #1C4A3D;
  font-size: 15px;
}

body#rl-app:has(.LoginView) .LoginView .language-button,
body#rl-app.rensure-login-theme .LoginView .language-button {
  color: #57534E;
  opacity: 0.85;
  transition: opacity 0.15s ease;
}

body#rl-app:has(.LoginView) .LoginView .language-button:hover,
body#rl-app.rensure-login-theme .LoginView .language-button:hover {
  opacity: 1;
}

body#rl-app:has(.LoginView) .LoginView .buttonLogin,
body#rl-app.rensure-login-theme .LoginView .buttonLogin {
  background-color: #1C4A3D;
  color: #FAF9F5;
  border: 1px solid #1C4A3D;
  border-radius: 6px;
  font-family: 'Jost', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.05em;
  padding: 12px 16px;
  height: 44px;
  width: 100%;
  box-shadow: none;
  text-shadow: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

body#rl-app:has(.LoginView) .LoginView .buttonLogin:hover,
body#rl-app.rensure-login-theme .LoginView .buttonLogin:hover,
body#rl-app:has(.LoginView) .LoginView .buttonLogin:active,
body#rl-app.rensure-login-theme .LoginView .buttonLogin:active {
  background-color: #2A6A58;
  border-color: #2A6A58;
  color: #FAF9F5;
}

body#rl-app:has(.LoginView) .LoginView .buttonLogin *,
body#rl-app.rensure-login-theme .LoginView .buttonLogin * {
  color: #FAF9F5;
}

body#rl-app:has(.LoginView) .LoginView .alert,
body#rl-app.rensure-login-theme .LoginView .alert {
  background-color: #FAF9F5;
  border: 1px solid #8A2C1F;
  border-radius: 6px;
  color: #8A2C1F;
  padding: 10px 14px;
  font-family: 'Jost', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px;
}

body#rl-app:has(.LoginView) .LoginView .alert a.close,
body#rl-app.rensure-login-theme .LoginView .alert a.close {
  color: #8A2C1F;
}