/* ==========================================================================
   CareRight / Clintel brand overlay for the Redmineflux Lotus theme
   --------------------------------------------------------------------------
   Loads after lotus_theme.css and plugin.css. Override-only: no vendor file is
   modified, so Lotus can be upgraded by Zehntech without losing any of this.

   Everything is scoped to body.lotus-theme. Switch the theme off in
   Administration > Settings > Display and none of this applies.

   Brand sampled from https://careright.au on 31 Jul 2026:
     primary   #2F76E0     ink  #333333     muted #616161
     typeface  Plus Jakarta Sans (SIL OFL 1.1, self-hosted below)
     buttons   pill radius, weight 600
     surfaces  white cards on a very light blue wash

   STRATEGY
   Lotus is token-driven (--rf-*), so section 2 does most of the work by
   redefining its palette. That reaches every page the theme styles, including
   ones not individually reviewed. Later sections handle what tokens cannot:
   colours Lotus hard-codes, vendor copy and images, and two layout defects.

   Asset URLs are relative so the asset pipeline can digest them.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Self-hosted typeface (no external requests from the Webdesk)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/assets/plugin_assets/zz_clintel_brand/plus-jakarta-sans-var-326c00a8.woff2") format("woff2-variations"),
       url("/assets/plugin_assets/zz_clintel_brand/plus-jakarta-sans-var-326c00a8.woff2") format("woff2");
  font-weight: 400 700;              /* one variable file covers the range */
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Palette. This is the main lever.
      Lotus ships a teal primary (#2DB7A3) plus a separate indigo (#2563EB /
      #4338CA) and blends them, which is why the UI reads as two brands at
      once. Both collapse to the single CareRight blue here.

      The surface tokens are the fix for "it looks too white": Lotus put white
      cards on a near-white page, so nothing separated. CareRight separates its
      sections with a light blue wash, so the canvas is tinted and the cards
      stay pure white on top of it.
   -------------------------------------------------------------------------- */
body.lotus-theme {
  --rf-primary:       #2F76E0;       /* was #2DB7A3 teal */
  --rf-primary-dark:  #2560BC;
  --rf-primary-hover: #2560BC;
  --rf-primary-light: #EAF1FC;

  --rf-blue:          #2F76E0;       /* was #2563EB, a second near-miss blue */
  --rf-blue-dark:     #2560BC;
  --rf-blue-light:    #EAF1FC;
  --rf-indigo:        #2560BC;       /* was #4338CA */

  --rf-focus:         #2F76E0;
  --rf-focus-ring:    rgba(47, 118, 224, .15);

  --rf-text-h:        #333333;       /* CareRight ink */
  --rf-text-subtle:   #6B7280;       /* was #9CA3AF, ~2.6:1 on white */

  --rf-bg:            #EFF4FB;       /* was #F5F6FA, near-white */
  --rf-bg-hover:      #E4ECF8;
  --rf-border:        #E2E8F2;
  --rf-border-dark:   #CBD6E6;

  --rf-font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont,
             "Segoe UI", Roboto, Arial, sans-serif;

  /* Local aliases used below. */
  --cr-canvas:       #EFF4FB;
  --cr-primary:      #2F76E0;
  --cr-primary-dark: #2560BC;
  --cr-tint:         #EAF1FC;
  --cr-ink:          #333333;
  --cr-muted:        #616161;
  --cr-border:       #E2E8F2;
  --cr-font: var(--rf-font);
}

body.lotus-theme,
body.lotus-theme input,
body.lotus-theme select,
body.lotus-theme textarea,
body.lotus-theme button,
body.lotus-theme #content {
  font-family: var(--cr-font);
}

body.lotus-theme h1,
body.lotus-theme h2,
body.lotus-theme h3,
body.lotus-theme h4 {
  font-family: var(--cr-font);
  font-weight: 600;
  letter-spacing: -.01em;
}

/* --------------------------------------------------------------------------
   3. Canvas and chrome
   -------------------------------------------------------------------------- */
body.lotus-theme,
body.lotus-theme #main,
body.lotus-theme #content {
  background-color: var(--cr-canvas) !important;
}

body.lotus-theme #top-menu {
  background: #fff !important;
  border-bottom: 1px solid var(--cr-border);
}

body.lotus-theme #sidebar {
  background: #fff !important;
  border-right: 1px solid var(--cr-border);
}

/* Brand mark, top left. .rf_logo_icon is an empty <span> carrying the vendor
   SVG as a background set with !important, so each longhand needs !important. */
body.lotus-theme .rf_tb_logo .rf_logo_icon {
  background-image: url("/assets/plugin_assets/zz_clintel_brand/careright-logo-04a08a42.png") !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
  background-size: contain !important;
  width: 152px !important;
  height: 34px !important;
}
body.lotus-theme .rf_tb_logo .rf_logo_icon svg,
body.lotus-theme .rf_tb_logo .rf_logo_icon img {
  display: none !important;
}

/* --------------------------------------------------------------------------
   4. Buttons and gradients Lotus hard-codes, so tokens cannot reach them
   -------------------------------------------------------------------------- */
body.lotus-theme input[type="submit"] {
  background-image: none !important;
  background-color: var(--cr-primary) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;   /* CareRight uses pill buttons */
  font-weight: 600;
  font-size: 16px;
  padding: 13px 25px;
}
body.lotus-theme input[type="submit"]:hover {
  background-color: var(--cr-primary-dark) !important;
}

/* --------------------------------------------------------------------------
   5. Sidebar navigation
   -------------------------------------------------------------------------- */
body.lotus-theme .rf_sb_list li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 9px;
  color: #4B5563;
  font-weight: 500;
  transition: background-color .14s ease, color .14s ease;
}
body.lotus-theme .rf_sb_list li a.selected,
body.lotus-theme .rf_sb_list li.selected > a {
  background-image: none !important;
  background-color: var(--cr-primary) !important;
  color: #fff !important;
  font-weight: 600;
}
body.lotus-theme .rf_sb_list li a:not(.selected):hover {
  background-image: none !important;
  background-color: var(--cr-tint) !important;
  color: var(--cr-primary) !important;
}

/* Project title was truncating to "REDMINE TEST (6.1 ..." */
body.lotus-theme .rf_sb_page_title {
  font-size: 15px;
  line-height: 1.35;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  font-weight: 600;
  color: var(--cr-ink);
}

/* Divider under the nav list with nothing beneath it */
body.lotus-theme .rf_sb_core_section:has(#sidebar-wrapper:empty) {
  border-top: 0 !important;
}

body.lotus-theme .rf_nav_more_btn,
body.lotus-theme .rf_nav_more_item.open .rf_nav_more_btn {
  background-image: none !important;
  background-color: var(--cr-tint) !important;
  color: var(--cr-primary) !important;
  border-radius: 8px;
}

/* --------------------------------------------------------------------------
   6. Home page
      6a. .rf_home_greeting rendered #555 on the teal wash = 2.1:1. Its
          siblings (.rf_home_date, .rf_home_tagline) were already white, so
          this is a defect in Lotus rather than a style choice.
      6b. .rf_home_tagline reads "RedmineFlux Project Management System".
      6c. .rf_home_content is a hard-coded "504px 504px" grid whose right
          column has no element children, which stranded the Information card
          at half width on a 1440px screen.
   -------------------------------------------------------------------------- */
body.lotus-theme .rf_home_hero {
  background-image: linear-gradient(118deg, #2F76E0 0%, #2A6AD0 46%, #1F55AE 100%) !important;
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(31, 85, 174, .18);
  overflow: hidden;
}

body.lotus-theme .rf_home_greeting {
  color: #fff !important;            /* 2.1:1 -> 8.6:1 */
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -.02em;
}
body.lotus-theme .rf_home_username {
  color: #BFD6F7 !important;
}
body.lotus-theme .rf_home_date {
  color: rgba(255, 255, 255, .72) !important;
  letter-spacing: .02em;
}

body.lotus-theme .rf_home_tagline {
  font-size: 0 !important;
  line-height: 0 !important;
}
body.lotus-theme .rf_home_tagline::after {
  content: "Clintel Systems Webdesk";
  display: block;
  font-family: var(--cr-font);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: rgba(255, 255, 255, .88);
}

/* Hero buttons: solid white primary, ghost secondary, CareRight pill shape */
body.lotus-theme .rf_hero_btn {
  border-radius: 999px !important;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, .55) !important;
  background: transparent !important;
  color: #fff !important;
  padding: 10px 20px !important;
}
body.lotus-theme .rf_hero_btn:hover {
  background: rgba(255, 255, 255, .14) !important;
}
body.lotus-theme .rf_hero_btn_primary {
  background: #fff !important;
  color: var(--cr-primary) !important;
  border-color: #fff !important;
}
body.lotus-theme .rf_hero_btn_primary:hover {
  background: var(--cr-tint) !important;
  color: var(--cr-primary) !important;
}

/* The hero illustration is an inline SVG with teal baked into presentation
   attributes; retint it to brand blue rather than dropping the visual. */
body.lotus-theme .rf_home_illustration svg rect[fill="#F0FDF9"] { fill: #EAF1FC; }
body.lotus-theme .rf_home_illustration svg rect[fill="#EFF6FF"] { fill: #DCE8FA; }
body.lotus-theme .rf_home_illustration svg rect[fill="#FFF7ED"] { fill: #F1F5FC; }
body.lotus-theme .rf_home_illustration svg [stroke="#2DB7A3"]   { stroke: #2F76E0; }
body.lotus-theme .rf_home_illustration svg [fill="rgba(45,183,163,0.12)"] { fill: rgba(47, 118, 224, .10); }

/* Stat cards */
body.lotus-theme .rf_home_stat_card {
  background: #fff !important;
  border: 1px solid var(--cr-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 2px rgba(31, 85, 174, .05);
  transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease;
}
body.lotus-theme .rf_home_stat_card:hover {
  box-shadow: 0 8px 20px rgba(31, 85, 174, .10);
  border-color: #C7D8F2 !important;
  transform: translateY(-1px);
}
body.lotus-theme .rf_stat_card_num {
  color: var(--cr-ink) !important;
  letter-spacing: -.02em;
}
body.lotus-theme .rf_stat_card_label {
  color: var(--cr-muted) !important;
}

/* Brand blue for the two neutral metrics. Overdue keeps red, because that is
   a semantic signal rather than decoration. */
body.lotus-theme .rf_stat_icon_projects,
body.lotus-theme .rf_stat_icon_issues {
  background: var(--cr-tint) !important;
  color: var(--cr-primary) !important;
}
body.lotus-theme .rf_stat_icon_projects svg,
body.lotus-theme .rf_stat_icon_issues svg {
  stroke: var(--cr-primary) !important;
}

/* .rf_home_right holds a whitespace text node, so :empty never matches.
   Test for element children instead; this reverts to two columns on its own
   if a block is ever added to the right-hand side. */
body.lotus-theme .rf_home_content:not(:has(.rf_home_right > *)) {
  grid-template-columns: minmax(0, 1fr) !important;
}
body.lotus-theme .rf_home_content:not(:has(.rf_home_right > *)) .rf_home_right {
  display: none !important;
}

/* --------------------------------------------------------------------------
   7. Cards, tables, empty states
   -------------------------------------------------------------------------- */
body.lotus-theme .rf_home_card,
body.lotus-theme .rf_project_card,
body.lotus-theme .rf_table_wrap {
  background: #fff !important;
  border: 1px solid var(--cr-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 2px rgba(31, 85, 174, .05);
}
body.lotus-theme .rf_home_card_title {
  font-size: 16px;
  font-weight: 600;
  color: var(--cr-ink) !important;
}

/* Empty states used a cream/amber block, which reads as a warning */
body.lotus-theme p.nodata,
body.lotus-theme div.nodata {
  background-color: #fff !important;
  border: 1px dashed var(--cr-border) !important;
  color: var(--cr-muted) !important;
  border-radius: 10px;
}

/* --------------------------------------------------------------------------
   8. Login page
      Lotus ships this page with Lorem Ipsum body copy, the vendor "Flux"
      wordmark, a stock dashboard illustration and carousel dots. Replaced
      with a CareRight clinical photo under a brand-blue scrim.
   -------------------------------------------------------------------------- */
body.lotus-theme .rf_login_left {
  background:
    linear-gradient(to top,
      rgba(14, 42, 88, .94) 0%,
      rgba(20, 58, 118, .72) 38%,
      rgba(47, 118, 224, .42) 72%,
      rgba(47, 118, 224, .34) 100%),
    url("/assets/plugin_assets/zz_clintel_brand/login-clinical-12f219c7.webp") center 15% / cover no-repeat !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  padding: 46px 46px 52px !important;
  gap: 0 !important;
  overflow: hidden;
}

body.lotus-theme .rf_login_logo_text,
body.lotus-theme .rf_login_logo svg,
body.lotus-theme .rf_login_preview_wrap,
body.lotus-theme .rf_login_dots {
  display: none !important;
}

body.lotus-theme .rf_login_logo {
  position: static !important;
  width: 210px !important;
  height: 48px !important;
  margin: 0 !important;
  flex: 0 0 auto;
  background: url("/assets/plugin_assets/zz_clintel_brand/careright-logo-04a08a42.png") no-repeat left center / contain !important;
  filter: brightness(0) invert(1);   /* knock the wordmark out to white */
}

/* Lotus centres these with margin:0 auto and max-width:320px, so both the
   margin and the max-width have to be cleared, not just the padding. */
body.lotus-theme .rf_login_tagline,
body.lotus-theme .rf_login_tagline_sub {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none !important;
  padding: 0 !important;
  width: 100% !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-align: left !important;
}
body.lotus-theme .rf_login_tagline {
  margin-top: auto !important;       /* pin the copy to the bottom */
}

body.lotus-theme .rf_login_tagline::after {
  content: "Clintel Systems Webdesk";
  display: block;
  font-family: var(--cr-font);
  font-size: 32px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: #fff;
  text-align: left;
  text-shadow: 0 1px 20px rgba(12, 40, 86, .35);
}

body.lotus-theme .rf_login_tagline_sub::after {
  content: "Support requests, project tracking and documentation for CareRight.";
  display: block;
  max-width: 36ch;
  margin: 14px 0 0;
  font-family: var(--cr-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: rgba(255, 255, 255, .9);
  text-align: left;
  text-shadow: 0 1px 14px rgba(12, 40, 86, .3);
}

/* "Welcome Back.." -> a sentence without two full stops */
body.lotus-theme .rf_login_title {
  font-size: 0 !important;
}
body.lotus-theme .rf_login_title::after {
  content: "Sign in";
  display: block;
  font-family: var(--cr-font);
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--cr-ink);
}

body.lotus-theme .rf_login_subtitle {
  color: var(--cr-muted);
  font-size: 15px;
}

body.lotus-theme .rf_login_form input[type="text"],
body.lotus-theme .rf_login_form input[type="password"] {
  border-color: var(--cr-border);
  border-radius: 10px;
  font-family: var(--cr-font);
}
body.lotus-theme .rf_login_form input[type="text"]:focus,
body.lotus-theme .rf_login_form input[type="password"]:focus {
  border-color: var(--cr-primary);
  box-shadow: 0 0 0 3px var(--rf-focus-ring);
  outline: none;
}

/* --------------------------------------------------------------------------
   9. Footer was #AAA on white (2.3:1) and clipping its last line
   -------------------------------------------------------------------------- */
body.lotus-theme #footer {
  color: var(--cr-muted);            /* 2.3:1 -> 6.4:1 */
  padding-block: 18px;
  overflow: visible;
  min-height: 44px;
  background: transparent;
}
body.lotus-theme #footer a {
  color: var(--cr-primary);
}

/* --------------------------------------------------------------------------
   Findings from the vendor-stylesheet audit
   -------------------------------------------------------------------------- */

/* The "Flux" mark rendered at 32px beside every project name on project pages
   (lotus_theme.css:3179, a background SVG). Hidden rather than replaced: the
   CareRight wordmark is a wide lockup and does not read at 32 square. */
body.lotus-theme .rf_ph_check_icon {
  display: none !important;
}

/* Card labels collide when a card is squeezed ("StaDue DatDate",
   "CusPnoje Mana"). Cause: .rf_card_date_item / .rf_person_item / .rf_cf_item
   are all flex:1 with min-width:0, which removes the min-content floor, and
   .rf_date_label (lotus_theme.css:1725) is the one text run in the card with
   no overflow handling, so it paints over its neighbour instead of clipping. */
body.lotus-theme .rf_date_label,
body.lotus-theme .rf_date_value,
body.lotus-theme .rf_person_label,
body.lotus-theme .rf_person_name,
body.lotus-theme .rf_cf_item::before {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  max-width: 100%;
}

/* Projects board: let the grid wrap on the space it has, instead of the
   vendor's four hard viewport steps.

   This block also used to pin width, display, grid-auto-flow, flex, float and
   position, on the theory that the container rendered 0px wide and auto-fill
   was therefore resolving to a single track. The 0 width was real, but it was
   a symptom two levels up: Lotus's _project_card.html.erb nested <li> inside a
   <div> inside a <li>, the parser hoisted the subproject items out of the card,
   and the orphaned </div> tags then closed #projects-index, .rf_projects_page
   and #content in turn. Fixed at source in the vendor partial, so the
   compensations go with it. Redmine #122961. */
body.lotus-theme .rf_projects_grid {
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)) !important;
  gap: 16px !important;
}
body.lotus-theme .rf_project_card,
body.lotus-theme .rf_subproject_card {
  min-width: 0;
}
/* --------------------------------------------------------------------------
   10. The vendor primary-button gradient
      linear-gradient(95.99deg, #1673FF 4.75%, #10C08B 123.45%) is repeated
      across 164 selectors in 37 rule blocks: submit buttons, .btn-primary,
      every .contextual .icon-add, and the CRM / Gantt / Knowledgebase
      modules. Many are declared unscoped and with !important, so tokens
      cannot reach them. White on its green end measures 2.35:1.
      This list is generated from the vendor stylesheets, not hand-written.
   -------------------------------------------------------------------------- */

body.lotus-theme #bulk-update-result-btn.bulk-update-btn,
body.lotus-theme #bulk-update-submit-btn,
#content>div.containerBlock>div>a.rf-icon-link.icon.rf-icon-sprite,
#content>div.settings-container>form>div.settings-actions>button.settings-btn.settings-btn-primary,
#content>div.tsa-schema-section>div.tsa-schema-body>p>a,
body.lotus-theme #create-checklist-template-link,
body.lotus-theme #create-run-type-link,
body.lotus-theme #tab-content-boards>p>a.icon.icon-add,
body.lotus-theme #tab-content-categories>p>a.icon.icon-add,
body.lotus-theme #tab-content-members>p>a.icon.icon-add,
body.lotus-theme #tab-content-memberships>p>a.icon.icon-add,
body.lotus-theme #tab-content-repositories>p>a.icon.icon-add,
body.lotus-theme #tab-content-users>p>a.icon.icon-add,
body.lotus-theme #tab-content-versions>p>a.icon.icon-add,
body.lotus-theme .add-page-modal .action-btn .next-btn,
body.lotus-theme .btn-primary,
body.lotus-theme .btn-start-stop,
body.lotus-theme .contextual.for_tag,
.controller-enumerations #content>p>a.icon.icon-add,
.controller-issues.action-show #sidebar a.rf_sb_link.issues,
.controller-rf_board_configs #query-form>div.rf-options-actions>input,
.controller-rf_knowledgebase input.kb-btn-submit,
.controller-rf_knowledgebase_nodes input.kb-btn-submit,
.controller-rf_leaves #content .btn-primary,
.controller-rf_leaves #content [class*="btn-primary"],
.controller-rf_settings #content .btn-primary,
.controller-rf_settings #content .settings-btn-primary,
.controller-rf_settings #content [class*="btn-primary"],
.controller-rf_skills #content .btn-primary,
.controller-rf_skills #content .settings-btn-primary,
.controller-rf_skills #content [class*="btn-primary"],
.controller-rf_teams #content .btn-primary,
.controller-rf_teams #content [class*="btn-primary"],
.controller-rf_workloads #content .btn-primary,
.controller-rf_workloads #content .wid-btn-primary,
.controller-rf_workloads #content [class*="btn-primary"],
.controller-timelog.action-report #sidebar a.rf_sb_link.time-entries,
.controller-timelog.lotus-theme .contextual a.icon-time-add,
body.lotus-theme .edit_testsuite-modal input#update-btn,
body.lotus-theme .jira-btn-primary,
body.lotus-theme .new-testsuite-modal .testsuite-modal-btn .create-testsuite,
body.lotus-theme .testrun-modal-btn input#update-btn.update-run,
body.lotus-theme .testrun-select-cases-modal-btn .create-test-cases-run,
body.lotus-theme .ts-modal-log-btn,
body.lotus-theme .ts-topbar-submit,
body.lotus-theme /* ================================================================ INVOICE PLUGIN — LOTUS THEME COMPATIBILITY ================================================================ */ #content>div>div>form>input.icon.icon-add,
body.lotus-theme /* Issue template */ #content>div.contextual.add_issue_template>a,
body.lotus-theme /* New,
body.lotus-theme /* add button */ #content>div.helpdesk_top_section>div>a.icon.icon-add,
body.lotus-theme a.icon.plus_icon.add_knowledgebase_template,
body.lotus-theme apply button style */ button.applyBtn.btn.btn-sm.btn-primary,
body.lotus-theme #content div#new-run-btn,
body.lotus-theme #content>div.form-navigation>a.button_for_cancel.btn_for_import,
body.lotus-theme #csv-export-options input[type="submit"],
body.lotus-theme #rf-gantt-add-release.rf-gantt-btn--primary,
body.lotus-theme #rf-gantt-app .rf-gantt-btn--primary,
body.lotus-theme #rf-gantt-app .rf-gantt-display-btn--active,
body.lotus-theme #rf-gantt-app .rf-gantt-zoom-btn--active,
body.lotus-theme #sidebar .rf_sb_link.rf_active,
body.lotus-theme .action-btn-primary,
body.lotus-theme .contextual a.icon-add,
body.lotus-theme .crm-btn-primary,
body.lotus-theme .crm-form-btn-primary,
body.lotus-theme .kb-ui-button-primary,
body.lotus-theme .rf-btn-primary,
body.lotus-theme .rf-gantt-header-add-btn,
body.lotus-theme .rf-gantt-left__add-issue-inline,
body.lotus-theme .tagedit_button input#save_tag,
body.lotus-theme .testrun-modal-btn .create-testrun,
body.lotus-theme a.rf-btn.rf-btn-primary,
body.lotus-theme button#addChartBtn,
body.lotus-theme button#add_tag_btn,
body.lotus-theme button#calendar_add_entry,
body.lotus-theme button#confirmAddChart,
body.lotus-theme button#save_edit_tag,
body.lotus-theme button#submited,
body.lotus-theme button.btn-issue.btn-add.btn-add-issue,
body.lotus-theme button.isclosed_run_button,
body.lotus-theme button[type="submit"],
body.lotus-theme create,
body.lotus-theme div.add-result-btn>#update-btn,
body.lotus-theme input.tt-settings-btn.tt-settings-btn-primary,
body.lotus-theme input[type="submit"],
body.lotus-theme save,
body.lotus-theme update {
  background-image: none !important;
  background-color: var(--cr-primary) !important;
  color: #fff !important;
  border-color: var(--cr-primary) !important;
}

body.lotus-theme #bulk-update-result-btn.bulk-update-btn:hover,
body.lotus-theme #bulk-update-submit-btn:hover,
#content>div.containerBlock>div>a.rf-icon-link.icon.rf-icon-sprite:hover,
#content>div.contextual.add_issue_template>a:hover,
#content>div.helpdesk_top_section>div>a.icon.icon-add:hover,
#content>div.settings-container>form>div.settings-actions>button.settings-btn.settings-btn-primary:hover,
#content>div.tsa-schema-section>div.tsa-schema-body>p>a:hover,
#content>div>div>form>input.icon.icon-add:hover,
body.lotus-theme #create-checklist-template-link:hover,
body.lotus-theme #create-run-type-link:hover,
body.lotus-theme #tab-content-boards>p>a.icon.icon-add:hover,
body.lotus-theme #tab-content-categories>p>a.icon.icon-add:hover,
body.lotus-theme #tab-content-members>p>a.icon.icon-add:hover,
body.lotus-theme #tab-content-memberships>p>a.icon.icon-add:hover,
body.lotus-theme #tab-content-repositories>p>a.icon.icon-add:hover,
body.lotus-theme #tab-content-users>p>a.icon.icon-add:hover,
body.lotus-theme #tab-content-versions>p>a.icon.icon-add:hover,
body.lotus-theme .add-page-modal .action-btn .next-btn:hover,
body.lotus-theme .btn-primary:hover,
body.lotus-theme .btn-start-stop:hover,
body.lotus-theme .contextual.for_tag:hover,
.controller-enumerations #content>p>a.icon.icon-add:hover,
.controller-rf_board_configs #query-form>div.rf-options-actions>input:hover,
.controller-rf_knowledgebase input.kb-btn-submit:hover,
.controller-rf_knowledgebase_nodes input.kb-btn-submit:hover,
.controller-rf_leaves #content .btn-primary:hover,
.controller-rf_leaves #content [class*="btn-primary"]:hover,
.controller-rf_settings #content .btn-primary:hover,
.controller-rf_settings #content .settings-btn-primary:hover,
.controller-rf_settings #content [class*="btn-primary"]:hover,
.controller-rf_skills #content .btn-primary:hover,
.controller-rf_skills #content .settings-btn-primary:hover,
.controller-rf_skills #content [class*="btn-primary"]:hover,
.controller-rf_teams #content .btn-primary:hover,
.controller-rf_teams #content [class*="btn-primary"]:hover,
.controller-rf_workloads #content .btn-primary:hover,
.controller-rf_workloads #content .wid-btn-primary:hover,
.controller-rf_workloads #content [class*="btn-primary"]:hover,
.controller-timelog.lotus-theme .contextual a.icon-time-add:hover,
body.lotus-theme .edit_testsuite-modal input#update-btn:hover,
body.lotus-theme .jira-btn-primary:hover,
body.lotus-theme .new-testsuite-modal .testsuite-modal-btn .create-testsuite:hover,
body.lotus-theme .testrun-modal-btn input#update-btn.update-run:hover,
body.lotus-theme .testrun-select-cases-modal-btn .create-test-cases-run:hover,
body.lotus-theme .ts-modal-log-btn:hover,
body.lotus-theme .ts-topbar-submit:hover,
body.lotus-theme a.icon.plus_icon.add_knowledgebase_template:hover,
body.lotus-theme #content div#new-run-btn:hover,
body.lotus-theme #content>div.form-navigation>a.button_for_cancel.btn_for_import:hover,
body.lotus-theme #csv-export-options input[type="submit"]:hover,
body.lotus-theme #rf-gantt-add-release.rf-gantt-btn--primary:hover,
body.lotus-theme #rf-gantt-app .rf-gantt-btn--primary:hover,
body.lotus-theme #rf-gantt-app .rf-gantt-display-btn:hover,
body.lotus-theme #rf-gantt-app .rf-gantt-zoom-btn:hover,
body.lotus-theme #sidebar .rf_sb_link.rf_active:hover,
body.lotus-theme .action-btn-primary:hover,
body.lotus-theme .contextual a.icon-add:hover,
body.lotus-theme .crm-btn-primary:hover,
body.lotus-theme .crm-form-btn-primary:hover,
body.lotus-theme .kb-ui-button-primary:hover,
body.lotus-theme .rf-btn-primary:hover,
body.lotus-theme .rf-gantt-header-add-btn:hover,
body.lotus-theme .rf-gantt-left__add-issue-inline:hover,
body.lotus-theme .tagedit_button input#save_tag:hover,
body.lotus-theme .testrun-modal-btn .create-testrun:hover,
body.lotus-theme a.rf-btn.rf-btn-primary:hover,
body.lotus-theme button#addChartBtn:hover,
body.lotus-theme button#add_tag_btn:hover,
body.lotus-theme button#calendar_add_entry:hover,
body.lotus-theme button#confirmAddChart:hover,
body.lotus-theme button#save_edit_tag:hover,
body.lotus-theme button#submited:hover,
body.lotus-theme button.applyBtn.btn.btn-sm.btn-primary:hover,
body.lotus-theme button.btn-issue.btn-add.btn-add-issue:hover,
body.lotus-theme button.isclosed_run_button:hover,
body.lotus-theme button[type="submit"]:hover,
body.lotus-theme div.add-result-btn>#update-btn:hover,
body.lotus-theme input.tt-settings-btn.tt-settings-btn-primary:hover,
body.lotus-theme input[type="submit"]:hover {
  background-image: none !important;
  background-color: var(--cr-primary-dark) !important;
  color: #fff !important;
  border-color: var(--cr-primary-dark) !important;
}

/* Progress bars read as a quantity, not a status, so they take the brand
   colour. .rf_progress_bar_fill uses var(--rf-success) and .rf_progress_fill
   a hard-coded green gradient (lotus_theme.css:6860). The --rf-success token
   itself is left alone so genuine success states stay green, as do the
   Closed / Open / Total counts, which are semantic. */
body.lotus-theme .rf_progress_bar_fill,
body.lotus-theme .rf_progress_fill {
  background-image: none !important;
  background-color: var(--cr-primary) !important;
}

/* Lotus sets a fixed height on the sign-in submit; with our larger padding the
   label clipped. */
body.lotus-theme input[type="submit"] {
  height: auto !important;
  line-height: 1.25;
}

/* --------------------------------------------------------------------------
   10. Home page announcements ticker
      Content comes from Administration > Plugins > Clintel brand overlay.
      The partial renders nothing when that setting is empty, so these rules
      are inert until an announcement is configured.

      Motion: WCAG 2.2.2 requires a mechanism to pause auto-moving content
      that runs for more than 5 seconds, hence the pause button, the hover
      pause, and the prefers-reduced-motion branch that stops the animation
      and makes the strip scrollable instead.
   -------------------------------------------------------------------------- */
body.lotus-theme .cr_tick {
  display: flex;
  align-items: stretch;
  background: #fff;
  border: 1px solid var(--cr-border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 16px;
}
body.lotus-theme .cr_tick_lab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  background: var(--cr-tint);
  color: var(--cr-primary-dark);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
  flex: none;
}
body.lotus-theme .cr_tick_vp { position: relative; overflow: hidden; flex: 1; min-width: 0; }
body.lotus-theme .cr_tick_tr {
  display: flex;
  width: max-content;
  animation: cr_tick_scroll 46s linear infinite;
  will-change: transform;
}
body.lotus-theme .cr_tick_set { display: inline-flex; }
body.lotus-theme .cr_tick:hover .cr_tick_tr,
body.lotus-theme .cr_tick.is-paused .cr_tick_tr { animation-play-state: paused; }
@keyframes cr_tick_scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

body.lotus-theme .cr_tick_it {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 0;
  white-space: nowrap;
  font-size: 13.5px;
  color: #3A4658;
  text-decoration: none;
}
body.lotus-theme a.cr_tick_it:hover .cr_tick_tx { text-decoration: underline; }
body.lotus-theme .cr_tick_it::after {
  content: "";
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #C6D0DE;
  margin: 0 20px;
  flex: none;
}
body.lotus-theme .cr_tick_tag {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  background: #EEF2F7;
  color: #5A6879;
  flex: none;
}
body.lotus-theme .cr_tick_tag--warn { background: #FDECEC; color: #B03A2E; }
body.lotus-theme .cr_tick_tag--ok   { background: #E7F6EC; color: #1E7B45; }

body.lotus-theme .cr_tick_pause {
  flex: none;
  border: 0;
  border-left: 1px solid #EDF1F7;
  background: #fff;
  color: #7A8798;
  padding: 0 12px;
  cursor: pointer;
  display: grid;
  place-items: center;
}
body.lotus-theme .cr_tick_pause:hover { color: var(--cr-primary); background: #F7FAFE; }
body.lotus-theme .cr_tick_pause:focus-visible { outline: 2px solid var(--cr-primary); outline-offset: -2px; }

@media (prefers-reduced-motion: reduce) {
  body.lotus-theme .cr_tick_tr { animation: none; }
  body.lotus-theme .cr_tick_vp { overflow-x: auto; }
}

/* --------------------------------------------------------------------------
   11. Home page
      The stock Lotus home spent roughly 1000px of vertical space to convey a
      name, three numbers and one sentence: a 430px hero built around stock
      artwork, three 190px stat tiles, and a full width card holding a single
      line. This reworks it into a dashboard that shows the viewer their work.

      Deliberately one layout for everyone rather than a staff and a client
      variant. The issue list is "assigned to me OR reported by me", which is
      a team member's queue and a client's raised tickets in one scope, so no
      role branching is needed anywhere.
   -------------------------------------------------------------------------- */
body.lotus-theme .rf_home_page { display: flex; flex-direction: column; gap: 16px; }

/* greeting band */
body.lotus-theme .cr_greet {
  background-image: linear-gradient(112deg, #2F76E0 0%, #2A6AD0 52%, #1F55AE 100%);
  border-radius: 14px;
  padding: 22px 26px;
  color: #fff;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  box-shadow: 0 8px 22px rgba(31, 85, 174, .16);
}
body.lotus-theme .cr_greet::after {
  content: "";
  position: absolute;
  right: -70px; top: -90px;
  width: 290px; height: 290px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .07);
}
body.lotus-theme .cr_greet_l { display: flex; flex-direction: column; gap: 3px; min-width: 0; z-index: 1; }
body.lotus-theme .cr_eyebrow {
  margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: rgba(255, 255, 255, .7);
}
body.lotus-theme .cr_hello {
  margin: 0; font-size: 27px; font-weight: 600; letter-spacing: -.02em;
  /* !important because something in the theme still wins here: the greeting
     rendered #555 on the blue band despite this declaration. */
  line-height: 1.18; color: #fff !important;
}
/* The name matches the greeting rather than picking up an accent tint:
   inherit, so it follows .cr_hello above if the band ever changes. */
body.lotus-theme .cr_hello b { font-weight: 600; color: inherit; }
body.lotus-theme .cr_sub { margin: 0; font-size: 14px; color: rgba(255, 255, 255, .84); }
body.lotus-theme .cr_greet_r { display: flex; gap: 9px; flex: none; z-index: 1; flex-wrap: wrap; }
body.lotus-theme .cr_btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 17px; border-radius: 999px;
  font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, .5); color: #fff;
  transition: background-color .15s ease;
}
body.lotus-theme .cr_btn:hover { background: rgba(255, 255, 255, .15); color: #fff; }
body.lotus-theme .cr_btn--solid { background: #fff; color: var(--cr-primary); border-color: #fff; }
body.lotus-theme .cr_btn--solid:hover { background: var(--cr-tint); color: var(--cr-primary); }
body.lotus-theme .cr_btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* stat tiles */
body.lotus-theme .cr_stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
body.lotus-theme .cr_stat {
  display: flex; align-items: center; gap: 14px;
  background: #fff; border: 1px solid var(--cr-border); border-radius: 13px;
  padding: 15px 18px; text-decoration: none;
  transition: box-shadow .16s ease, border-color .16s ease, transform .16s ease;
}
body.lotus-theme .cr_stat:hover {
  box-shadow: 0 8px 20px rgba(31, 85, 174, .09);
  border-color: #C7D8F2;
  transform: translateY(-1px);
}
body.lotus-theme .cr_stat_ic {
  width: 40px; height: 40px; border-radius: 11px; flex: none;
  display: grid; place-items: center;
  background: var(--cr-tint); color: var(--cr-primary);
}
body.lotus-theme .cr_stat_ic svg { width: 20px; height: 20px; }
body.lotus-theme .cr_stat_txt { display: flex; flex-direction: column; min-width: 0; }
body.lotus-theme .cr_stat_n {
  font-size: 24px; font-weight: 700; line-height: 1.1; letter-spacing: -.02em;
  color: var(--cr-ink); font-variant-numeric: tabular-nums;
}
body.lotus-theme .cr_stat_l { font-size: 13px; color: var(--cr-muted); line-height: 1.3; }
/* red only when there is actually something overdue */
body.lotus-theme .cr_stat--alert .cr_stat_ic { background: #FDECEC; color: #C0392B; }
body.lotus-theme .cr_stat--alert .cr_stat_n { color: #C0392B; }

/* work area */
body.lotus-theme .cr_grid {
  display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: 16px; align-items: start;
}
@media (max-width: 1100px) {
  body.lotus-theme .cr_grid { grid-template-columns: minmax(0, 1fr); }
  body.lotus-theme .cr_stats { grid-template-columns: minmax(0, 1fr); }
  body.lotus-theme .cr_greet { flex-direction: column; align-items: flex-start; }
}
body.lotus-theme .cr_col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
body.lotus-theme .cr_card {
  background: #fff; border: 1px solid var(--cr-border); border-radius: 13px; overflow: hidden;
}
body.lotus-theme .cr_card_h {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 18px; border-bottom: 1px solid #EDF1F7;
}
body.lotus-theme .cr_card_t {
  display: flex; align-items: center; gap: 9px;
  font-size: 14px; font-weight: 600; color: var(--cr-ink);
}
body.lotus-theme .cr_card_t svg { width: 16px; height: 16px; color: var(--cr-primary); flex: none; }
body.lotus-theme .cr_all { font-size: 13px; font-weight: 500; color: var(--cr-primary); text-decoration: none; white-space: nowrap; }
body.lotus-theme .cr_all:hover { text-decoration: underline; }
body.lotus-theme .cr_card_b { padding: 14px 18px; font-size: 14px; color: #444; line-height: 1.6; }
body.lotus-theme .cr_card_b > *:first-child { margin-top: 0; }
body.lotus-theme .cr_card_b > *:last-child { margin-bottom: 0; }

/* rows */
body.lotus-theme .cr_rows { display: flex; flex-direction: column; }
body.lotus-theme .cr_row {
  display: grid; grid-template-columns: 66px minmax(0, 1fr) auto; gap: 12px;
  align-items: center; padding: 11px 18px;
  border-bottom: 1px solid #F1F4F9; text-decoration: none;
  transition: background-color .12s ease;
}
body.lotus-theme .cr_row--news { grid-template-columns: minmax(0, 1fr); }
body.lotus-theme .cr_row:last-child { border-bottom: 0; }
body.lotus-theme .cr_row:hover { background: #F7FAFE; }
body.lotus-theme .cr_row:focus-visible { outline: 2px solid var(--cr-primary); outline-offset: -2px; }
body.lotus-theme .cr_id { font-size: 12px; font-weight: 600; color: var(--cr-primary); font-variant-numeric: tabular-nums; }
body.lotus-theme .cr_main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body.lotus-theme .cr_subj {
  font-size: 14px; font-weight: 500; color: #2B3648;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.lotus-theme .cr_meta {
  font-size: 12px; color: #7A8798;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.lotus-theme .cr_due { font-size: 12px; color: #7A8798; white-space: nowrap; font-variant-numeric: tabular-nums; }
body.lotus-theme .cr_due--over { color: #C0392B; font-weight: 600; }
body.lotus-theme .cr_empty { padding: 26px 18px; text-align: center; color: #8A94A6; font-size: 14px; }

/* --------------------------------------------------------------------------
   Sidebar contextual links
      Lotus styles .contextual a.icon as a 40px white pill, which is right for
      the page action bar at the top of a page. Core's wiki sidebar reuses the
      same markup for its edit pencil (wiki/_sidebar.html.erb), so it inherited
      the pill: 55x40px, and .contextual's margin-top of -8px lifted it off the
      first line of the Sidebar page. Back to a plain inline link here.
   -------------------------------------------------------------------------- */
body.lotus-theme #sidebar .contextual {
  /* 8px drops the 13px link onto the baseline of the Sidebar page's first
     heading, which renders at 18.2px in a 27.3px line box. */
  margin-top: 8px;
  display: block;
}
body.lotus-theme #sidebar .contextual a.icon {
  display: inline !important;
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  border-radius: 0 !important;
  color: var(--cr-primary) !important;
  font-weight: 400 !important;
}

/* --------------------------------------------------------------------------
   Query filter rows
      Three things on a filter row sat on three different lines. The label
      column is a block, so its checkbox and text rode at the top of the row
      while the 40px controls beside it centred - a ~10px offset. "Add filter"
      was 12px higher again, because it carries an 8px top margin against the
      15px Lotus puts on #filters-table plus core's 5px on .filter.

      Shared by every query page (issues, gantt, time entries, users), not just
      the users page. Verified against date-range and multi-select rows.
   -------------------------------------------------------------------------- */
body.lotus-theme #filters-table .filter {
  align-items: center;
}
body.lotus-theme #filters-table .filter .field {
  display: flex;
  align-items: center;
}
body.lotus-theme #query_form_content .add-filter {
  /* 15px (#filters-table) + 5px (.filter) - lines the select up with row one. */
  margin-block: 20px 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
body.lotus-theme #query_form_content .add-filter label {
  margin: 0;
}

/* --------------------------------------------------------------------------
   Administration cards
      Card labels did not sit under their icons. The icon is an a::before at
      left:50% and is correctly centred; the label was not, for three reasons,
      all in Lotus:

        * the base rule sets padding "0 12px 25px 0" - 12px right against 0
          left, so with justify-content:center every label lands 6px left;
        * a.icon then puts padding-left back to 12px, so only cards WITHOUT
          core's .icon class stay wrong - i.e. any plugin admin item, such as
          healthsolve_funk's Copy Templates;
        * the global .icon-group rule slams padding-left:24px !important onto
          the Groups card, pushing that one 6px the other way.

      Hence !important here: without it the Groups rule wins on importance no
      matter how specific this selector is.

      .icon-label's 4px left margin is there to clear an inline icon, but Lotus
      hides the svg on these cards, so it only skews the label by 2px.
   -------------------------------------------------------------------------- */
body.lotus-theme.controller-admin.action-index #admin-menu li a {
  padding-left: 12px !important;
  padding-right: 12px !important;
}
body.lotus-theme.controller-admin.action-index #admin-menu li a .icon-label {
  margin-left: 0;
}

/* --------------------------------------------------------------------------
   Administration cards Lotus has no icon for
      Lotus paints each admin card's icon from a::before, matched on the
      anchor's class, and hides the inline <svg> core puts there. Its map
      covers 13 core classes plus helpdesk / template / invoice-settings /
      knowledgebase - so any card outside that list gets a sized, positioned
      ::before with no background-image, i.e. a blank card.

      Redmine 6.1 core added exactly such a card: Applications
      (preparation.rb:283, the Doorkeeper OAuth2 provider admin page). It is
      gated on Setting.rest_api_enabled?, so it appears only where the REST
      API is on - which is why it shows on an API-enabled install and not
      elsewhere. It carries class "icon icon-applications", which Lotus does
      not map.

      Rather than add artwork per card, show the icon core already ships in
      that anchor and place it where the ::before would have gone. The :not()
      chain is the inverse of Lotus's map, so this also covers the next core
      or plugin admin card Lotus has not caught up with.

      Recoloured from Redmine's #116699 to Lotus's dominant #3B3B3B at a
      heavier stroke, so it sits with the filled two-tone set rather than
      reading as a thin outline from somewhere else. It has no blue accent,
      which the Lotus icons do - close, not identical.
   -------------------------------------------------------------------------- */
body.lotus-theme.controller-admin.action-index #admin-menu li a:not(.icon-projects):not(.icon-user):not(.icon-group):not(.icon-roles):not(.icon-issue):not(.icon-issue-edit):not(.icon-workflows):not(.icon-custom-fields):not(.icon-list):not(.icon-settings):not(.icon-server-authentication):not(.icon-plugins):not(.icon-help):not(.icon-applications):not([class*="helpdesk"]):not([class*="template"]):not([class*="invoice-settings"]):not([class*="knowledgebase"]) svg {
  display: block;
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 48px;
  stroke: #3B3B3B;
  stroke-width: 2.2;
}

/* Applications specifically: two-tone, to match the rest of the set.
   The generic rule above can only recolour core's icon as a whole - it is
   drawn with <use>, whose shadow tree CSS cannot reach path by path, and the
   plus is 2 of the glyph's 5 paths. So this card gets core's own path data
   inlined into Lotus's ::before slot instead, squares in #3B3B3B and the plus
   in Lotus's accent #1673FF. Paths copied verbatim from icons.svg#icon--apps. */
body.lotus-theme.controller-admin.action-index #admin-menu li a.icon-applications::before {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.2'><path d='M4 4m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z' stroke='%233B3B3B'/><path d='M4 14m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z' stroke='%233B3B3B'/><path d='M14 14m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z' stroke='%233B3B3B'/><path d='M14 7l6 0' stroke='%231673FF'/><path d='M17 4l0 6' stroke='%231673FF'/></svg>");
}

/* --------------------------------------------------------------------------
   Issue notes - the "Updated by ... ago" band
      Core fills it #F6F7F8 (application.css:1865), a neutral grey chosen for a
      white page. On this overlay's #EFF4FB canvas that is 1.03 contrast - all
      but invisible - and, worse, the two are the same lightness at different
      temperatures (blue-red +2 against +12), which the eye cannot resolve into
      front or behind. It read as a smudge rather than a divider.

      #E2E8F1 is 1.115 against the canvas, a shade more separation than the
      sidebar gets (1.105), at +15 so it sits in the canvas's own blue family.
      It stays clear of core's :target highlight #DDEEFF (+34), or every note
      would look permanently linked-to.
   -------------------------------------------------------------------------- */
body.lotus-theme .journals h4.journal-header {
  background-color: #E2E8F1;
}

/* --------------------------------------------------------------------------
   Issue detail card - core's pale yellow #FFFFDD is DELIBERATE
      Left to core (application.css:673) on request: the yellow slab was tried
      as a white card and then as #E2E8F1 to match the note bands, and the
      yellow was preferred. Do not "fix" it again without asking.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Issue list - links were indistinguishable from plain text
      lotus_theme.css:5449 sets `tbody td, tbody td a { color: #3B3B3B
      !important }`, so every anchor in an issue row is the same dark grey as
      the text around it. Core paints links #169 (application.css:224) and this
      theme paints them --rf-blue everywhere else (lotus_theme.css:88); the
      issue list is the only place they go dark, and nothing in a row says what
      is clickable.

      Anchors only, not the cells, so plain values stay dark. --cr-primary
      rather than core's #169 to match every other link in the overlay.

      Two columns are excluded and keep the blanket's dark grey. The status
      pills, because Lotus gives them their own text colour per status (:5334+)
      and blue would break the fill/text pairing. And the id column, by
      preference - the whole row links to the same issue, so the subject
      carries the affordance and a blue number beside it only adds noise. Note
      that leaves Lotus's own td.id rule (:5273, --rf-blue + 600) dead, which
      the blanket had already made it; nothing here revives it.

      a.issue.closed gets core's grey + line-through back (application.css:228,
      also killed by the blanket). It only appears in the related-issues and
      subtask tables, which use link_to_issue; the flat list renders plain
      anchors with no state class. #616161 not core's #999, which is 2.85 on
      the white rows.
   -------------------------------------------------------------------------- */
body.lotus-theme table.list.issues tbody td:not(.status):not(.id) a {
  color: var(--cr-primary) !important;
}
body.lotus-theme table.list.issues tbody td a.issue.closed {
  color: var(--cr-muted) !important;
  text-decoration: line-through;
}

/* --------------------------------------------------------------------------
   Issue list - the subject column truncated instead of wrapping
      Lotus caps it and ellipsises on one line (lotus_theme.css:5437 and :5441,
      tightened to 180px under 1024px at :5614), so no row ever showed a full
      subject however wide the window was.

      Core wraps it instead - `tr.issue td.subject { white-space: normal }`
      (application.css:399) - and that single property is the elastic-column
      behaviour 5.0.12 had. The table is table-layout:auto and every other
      column is nowrap, so each of those demands exactly its content width and
      the one wrapping column absorbs the remainder. Widening the window grows
      the subject column and nothing else; narrowing it wraps to another line.
      No explicit widths are needed, and none are set here - a fixed width list
      would break as soon as a saved query used different columns.

      Placed outside any media query on purpose: it beats the 1024px rule on
      load order at equal specificity, so the narrow-screen cap goes too.
   -------------------------------------------------------------------------- */
body.lotus-theme table.list.issues td.subject,
body.lotus-theme table.list.issues td.subject a {
  max-width: none;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

/* --------------------------------------------------------------------------
   Sidebar - saved query names were cut off
      lotus_theme.css:910 gives the core-section links nowrap + ellipsis with
      20px of left padding at 12.5px, inside a section padded 14px each side.
      That leaves 129px of text width in a 200px sidebar, and 40 of the 86 query
      names on this instance are wider than that.

      Reclaiming the indent and dropping a point and a half of type gets the text
      width to ~153px, which fixes most of them. Wrapping was tried first and
      rejected: 40 rows going to two lines made an 86-item list far taller
      without reading any better.

      The 20px indent was costing too much. Query text started 35px in while the
      main menu's labels start at 59px (they clear their icons), so it was
      aligned to neither the labels nor the sidebar edge.

      8px is the settled value. Flush with the "Custom queries" heading (which
      renders at 11px with no padding of its own) was tried and read as flat -
      the small indent is what makes the items look like they belong to the
      heading above them.

      No setting fits every name - the longest needs 634px, which is four times
      the column - so the ellipsis stays for the handful of very long ones.
   -------------------------------------------------------------------------- */
body.lotus-theme #sidebar .rf_sb_core_section {
  padding-left: 10px;
  padding-right: 10px;
}
body.lotus-theme #sidebar .rf_sb_core_section ul li a {
  padding-left: 8px !important;
  padding-right: 6px !important;
  font-size: 12px;
}

/* --------------------------------------------------------------------------
   Sidebar - drag to resize
      Lotus pins the sidebar at 200px (lotus_theme.css:674, !important) but
      offsets #header and #main by --rf-sidebar-w, 220px - so the variable was
      only ever half wired up, and the 20px difference is the gutter between
      sidebar and content. Pointing the sidebar's own width back at the variable
      makes one value drive the sidebar, the gutter, the content offset and the
      topbar logo block, which is what lets a drag move all of them at once.

      The width is stored per browser in localStorage by
      clintel_sidebar_resize.js and re-applied from <head>. Collapsed mode keeps
      its own --rf-sidebar-col-w: that rule carries two body classes, so it out-
      specifies this one and the toggle still wins.
   -------------------------------------------------------------------------- */
body.lotus-theme #sidebar {
  width: calc(var(--rf-sidebar-w) - 20px) !important;
}
body.lotus-theme #main.nosidebar {
  margin-left: var(--rf-sidebar-w) !important;
}

body.lotus-theme #cr_sb_resizer {
  position: fixed;
  top: var(--rf-topbar-h);
  left: calc(var(--rf-sidebar-w) - 23px);
  width: 6px;
  height: calc(100vh - var(--rf-topbar-h));
  z-index: 1001;
  cursor: col-resize;
  background: transparent;
}
body.lotus-theme #cr_sb_resizer:hover,
body.lotus-theme.cr_sb_resizing #cr_sb_resizer {
  background: var(--cr-primary);
  opacity: .35;
}

/* Follow the pointer instead of easing behind it, and stop the drag selecting
   text across the page. */
body.lotus-theme.cr_sb_resizing {
  user-select: none;
  cursor: col-resize;
}
body.lotus-theme.cr_sb_resizing #sidebar,
body.lotus-theme.cr_sb_resizing #header,
body.lotus-theme.cr_sb_resizing #main {
  transition: none !important;
}

/* No handle where the sidebar is not a resizable column: collapsed to icons,
   or off-canvas on narrow screens (lotus_theme.css:2533). */
body.lotus-theme.rf_sidebar_collapsed #cr_sb_resizer {
  display: none;
}
@media (max-width: 1024px) {
  body.lotus-theme #cr_sb_resizer { display: none; }
}

/* --------------------------------------------------------------------------
   Sidebar - drag the menu/query split
      Both flexible children of the sidebar carry flex: 1 1 0%, so the main menu
      and the query list take half the column each no matter what is in them: on
      this instance 390px of menu for 390px of items, and 395px of query list for
      3038px of queries. This handle sits between them as a flex child of its
      own; dragging pins a height on the menu and the list absorbs the rest.
   -------------------------------------------------------------------------- */
body.lotus-theme #cr_sb_vresizer {
  flex: 0 0 9px;
  position: relative;
  cursor: row-resize;
}
body.lotus-theme #cr_sb_vresizer::before {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 4px;
  height: 1px;
  background: var(--cr-border);
}
body.lotus-theme #cr_sb_vresizer:hover::before,
body.lotus-theme.cr_sb_vresizing #cr_sb_vresizer::before {
  height: 2px;
  background: var(--cr-primary);
}
body.lotus-theme.cr_sb_vresizing {
  user-select: none;
  cursor: row-resize;
}
body.lotus-theme.rf_sidebar_collapsed #cr_sb_vresizer {
  display: none;
}