/**
 * Mint Field Management - Picker Component Styles
 */

/* Redmine's core list CSS centers every <td> by default (table.list td {
   text-align: center }) with per-column overrides for name/subject/etc.
   The tracker column has no such override, so with a badge + variable-width
   tracker name in the cell, center alignment made rows jump around
   horizontally. Left-align it like the other text columns. */
table.list td.tracker {
  text-align: start;
}

/* Pre-existing Redmine core layout bug, only exposed once an issue's author
   has a real image-sized avatar (this teststand never had one loading
   before mint_visual_field_management — Gravatar was effectively always falling back
   to the initials span, which doesn't trigger it): div.issue's left-floated
   .avatar-with-child (the author avatar, ~50px) and the right-floated
   .reaction button both overlap p.author's line vertically, and — for
   reasons not fully explained by CSS alone, confirmed live with a bare,
   unstyled core-style <img class="avatar" width height> and no plugin
   styling at all — the browser fails to wrap p.author's text around the
   left float, rendering it underneath instead. Forcing p.author to clear
   both floats sidesteps the bad wrap entirely. */
.issue p.author {
  clear: both;
}

/* The "Icon & Badge" field label itself is a plain, unstyled <label> inside
   Redmine's native <p><label> markup (see the hook), so it inherits the
   same gutter styling as every other field on the form ("Standard fields"
   etc: .tabular label { float; width:175px; text-align:right;
   margin-left:-180px }). Only labels INSIDE our own picker content need to
   be pulled out of that treatment, since they're not field-name labels. */
.mvf-picker label {
  float: none !important;
  width: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 0 !important;
  text-align: left !important;
  font-weight: normal !important;
  color: inherit !important;
}

.mvf-picker {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.mvf-label {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 6px;
  white-space: nowrap;
}

/* Top row: preview + icon color + badge color, side by side */
.mvf-top-row {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}

/* Preview */
.mvf-preview-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.mvf-badge {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
  border-radius: 3px;
  align-items: center;
  justify-content: center;
}

/* Tracker badge beside the Tracker select (issue form): centred on the
   select, a small gap after it - the badge itself is the grid's markup. */
#mvf-tracker-select-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  vertical-align: middle;
}

#mvf-tracker-select-badge .mvf-badge {
  margin-right: 0 !important;
}

.mvf-preview-badge {
  width: 38px;
  height: 38px;
}

.mvf-preview-badge i {
  font-size: 18px;
}

.mvf-preview-empty-hint {
  display: inline-flex;
  align-items: center;
  height: 38px;
  font-size: 12px;
  color: #999;
  font-style: italic;
}

/* Icon Grid Section */
.mvf-grid-wrapper {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mvf-icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
  gap: 8px;
  padding: 12px;
  background-color: #f8f8f8;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.mvf-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 3px;
  background-color: white;
  color: #333;
  cursor: pointer;
  font-size: 18px;
  transition: all 0.15s ease;
}

.mvf-icon-btn:hover {
  background-color: #f0f0f0;
  border-color: #999;
  transform: scale(1.05);
}

.mvf-icon-btn:focus {
  outline: none;
  border-color: #4b5259;
  box-shadow: 0 0 0 3px rgba(75, 82, 89, 0.1);
}

.mvf-icon-btn.mvf-selected {
  background-color: #4b5259;
  color: white;
  border-color: #333;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #4b5259;
}

.mvf-icon-btn.mvf-selected:hover {
  background-color: #3d4248;
  border-color: #333;
}

/* Custom icon class input */
.mvf-custom-wrapper {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mvf-custom-input {
  width: 100%;
  height: 40px;
  padding: 0 10px;
  border: 1px solid #ddd;
  border-radius: 3px;
  font-family: monospace;
  box-sizing: border-box;
}

.mvf-custom-input:focus {
  outline: none;
  border-color: #4b5259;
  box-shadow: 0 0 0 3px rgba(75, 82, 89, 0.1);
}

/* Color pickers */
.mvf-color-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.mvf-color-input {
  width: 120px;
  height: 38px;
  padding: 2px;
  border: 1px solid #ddd;
  border-radius: 3px;
  cursor: pointer;
  transition: border-color 0.2s ease;
  background-color: transparent;
}

.mvf-color-input:hover {
  border-color: #999;
}

.mvf-color-input:focus {
  outline: none;
  border-color: #4b5259;
  box-shadow: 0 0 0 3px rgba(75, 82, 89, 0.1);
}

/* Dark theme support */
@media (prefers-color-scheme: dark) {
  .mvf-preview-empty-hint {
    color: #888;
  }

  .mvf-icon-grid {
    background-color: #2a2a2a;
    border-color: #444;
  }

  .mvf-icon-btn {
    background-color: #333;
    color: #ddd;
  }

  .mvf-icon-btn:hover {
    background-color: #404040;
    border-color: #666;
  }

  .mvf-icon-btn:focus {
    border-color: #888;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
  }

  .mvf-icon-btn.mvf-selected {
    background-color: #4b5259;
    color: white;
    border-color: #666;
    box-shadow: 0 0 0 2px #333, 0 0 0 4px #4b5259;
  }

  .mvf-custom-input {
    background-color: #333;
    border-color: #444;
    color: #ddd;
  }

  .mvf-custom-input:focus {
    border-color: #888;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
  }

  .mvf-color-input {
    border-color: #444;
  }

  .mvf-color-input:hover {
    border-color: #666;
  }

  .mvf-color-input:focus {
    border-color: #888;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
  }
}

/* Responsive adjustments */
@media (max-width: 480px) {
  .mvf-icon-grid {
    grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
    gap: 6px;
    padding: 8px;
  }

  .mvf-icon-btn {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }

  .mvf-top-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* The owner-avatar wrapper is a plain block <div> with no styling of its
   own, so it stacks above the subject/author lines instead of sitting
   beside them as intended. Float it left so the subject (h3) and author
   line wrap into column 2, then clear the float before whatever content
   follows (SLA badge, check banner, attributes table, etc.) so those
   aren't pulled up beside the avatar too. Only visible when the issue's
   author has an uploaded avatar image — Redmine's small default initials
   avatar is compact enough not to trigger the wrap. */
.issue.details .gravatar-with-child {
  float: left;
  margin-right: 10px;
  margin-bottom: 10px;
}

/* The small inline avatar link_to_principal_patch.rb puts next to a user's
   name (Assignee row, user-format custom fields) walks into core's own
   `div.issue img.gravatar {float:left; margin:0 12px 6px 0;}` - meant for
   the big 50px author avatar in the heading, not a 16px inline one - purely
   because it also happens to sit inside an element carrying class "issue"
   (the .issue.details wrapper, and now #mfm-sidebar-fields too - see the
   sidebar-classes comment in the hook). The leftover 6px bottom margin
   makes that one row taller than every other field row. !important because
   this is overriding an unrelated core rule that leaked in via a shared
   class name, not something in our own cascade. */
img.mvf-inline-avatar {
  float: none !important;
  margin: 0 5px 0 0 !important;
}

.issue.details .subject {
  margin-bottom: 10px;
}
.issue.details .author ~ * {
  clear: both;
}

/* Watchers sidebar block: the shared avatar helper (avatar_patch.rb)
   defaults margin-right to 0 since it's a single generic monkeypatch used
   everywhere Redmine's avatar() renders — scope the extra spacing to just
   this block via CSS instead of changing the shared default, which would
   otherwise nudge every avatar on the site. !important needed since the
   0px comes from an inline style attribute. */
#watchers ul.watchers img.avatar {
  margin-right: 5px !important;
}

/* Journal notes: drop core's 32px left gutter.

   Core reserves it on the assumption that every journal avatar is its own
   <img class="gravatar">, which it pulls back into that gutter with
   `div.journal h4 img.gravatar {margin-left:-32px}`. An avatar coming from
   an uploaded image (avatar_patch.rb -> ImageHelper) is not a gravatar and
   never hangs there, so the gutter stays empty and the whole note - header,
   details list and text - reads as indented for no reason.

   Both halves have to go together: zeroing the padding while leaving the
   negative margin in place would push a core gravatar avatar 32px outside
   the note instead. With both reset, either kind of avatar simply sits at
   the start of the header line and the note text starts at the left edge. */
body.avatars-on div.journal {
  padding-left: 0;
}

div.journal h4 img.gravatar,
div.journal .journal-header img.gravatar {
  margin-left: 0;
  margin-right: 5px;
}

/* !important: an uploaded-image avatar carries its spacing as an inline
   style (ImageHelper sizes it that way for pages that don't load this
   stylesheet), which would otherwise win over this rule and leave the two
   kinds of avatar spaced differently. */
div.journal h4 img.mvf-owner-image,
div.journal .journal-header img.mvf-owner-image {
  margin-right: 5px !important;
}

/* Field placement settings page (Administration > Plugins > Configure).
   Redmine core's .tabular label { float; margin-left:-300px } and
   .tabular.settings p { padding-left:300px } are meant for the classic
   <p><label> field rows the rest of this settings form uses elsewhere in
   Redmine, and they reach into our table too since the whole partial
   renders inside that .tabular.settings container. Reset every bare label
   and p we own so they aren't sliced off / shoved right. */
.mfm-settings label,
.mfm-settings p {
  float: none !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
  width: auto !important;
}

.mfm-hint {
  margin-bottom: 12px;
}

.mfm-field-table {
  border-collapse: collapse;
  width: auto;
  min-width: 480px;
}

.mfm-field-table th,
.mfm-field-table td {
  padding: 6px 10px;
  border-bottom: 1px solid #ddd;
  text-align: left;
}

.mfm-field-table .mfm-drag-col,
.mfm-field-table .mfm-checkbox-col {
  text-align: center;
  width: 90px;
}

.mfm-field-table .mfm-remove-col {
  text-align: center;
  width: 32px;
}

.mfm-drag-handle {
  cursor: grab;
  text-align: center;
  color: #999;
  user-select: none;
}

/* Delimiter rows (see #mfm-add-separator / the mfm-separator-row-template
   in the settings partial) drag-reorder exactly like field rows - both
   carry .mfm-row - so the dragging feedback targets that shared class
   rather than .mfm-field-row alone. */
.mfm-row.mfm-dragging {
  opacity: 0.4;
}

.mfm-field-row .mfm-placement-checkbox {
  cursor: pointer;
}

/* Redmine core forces input,select,button { height:24px }. Once we add
   any padding to a control it gets silently clipped unless height is
   reset to auto explicitly. */
.mfm-field-table input[type="checkbox"] {
  height: auto !important;
  width: 16px;
}

.mfm-separator-row td {
  background-color: #f8f8f8;
}

.mfm-separator-label {
  color: #999;
  font-style: italic;
}

.mfm-remove-separator {
  color: #999;
  font-weight: bold;
  text-decoration: none;
  font-size: 16px;
  line-height: 1;
}

.mfm-remove-separator:hover {
  color: #c00;
}

.mfm-actions {
  margin: 10px 0 0;
}

/* Fields relocated to the sidebar (see the view_issues_show_details_bottom
   and view_issues_show_description_bottom hooks). Redmine's core rules for
   these rows are scoped "div.issue .attributes .attribute" / "div.issue
   .attributes .attribute .label" (a 170px floated label with a -180px
   inline-start margin) — the sidebar is outside div.issue, so once a row
   is moved none of that applies any more and it arrives essentially
   unstyled. Laid out as a narrow two-column grid: label stacked above
   value within each cell (not floated side by side), no fixed pixel
   widths, long values wrap instead of overflowing or forcing the column
   wider. min-width:0 is required on grid items for that wrapping to work —
   grid items default to a content-based minimum size otherwise, which
   overrides overflow-wrap and pushes the sidebar wide.
   A bottom border + spacing marks this block off from Redmine's own
   sidebar content (Watchers, custom queries, …) that follows it. */
/* Sidebar fields render as a label | value table: one shared grid on the
   container, with each .attribute row set to display:contents so its label
   and value become direct grid cells. That keeps every label in the SAME
   column across rows (a per-row grid would size each row's label column
   independently and the values would zig-zag).

   Column 1 is capped with fit-content so a long custom field name wraps
   instead of starving the value column - the value column has to keep
   room for an inline-edit control plus its save/cancel buttons. */
#mfm-sidebar-fields {
  display: grid;
  grid-template-columns: fit-content(36%) minmax(0, 1fr);
  gap: 8px 8px;
  align-items: baseline;
  margin: 0 0 20px;
  /* The container is inserted as the sidebar's first child, flush against
     its top edge - without this the first row touches the ceiling. The exact
     figure was asked for in review: 60px first, then trimmed to 58px. */
  padding: 58px 0 14px;
  border-bottom: 1px solid #ccc;
  /* The container also carries the issue's own css_classes (see the "sprint"
     comment above and mint_visual_field_management_hook.rb) so plugins that
     style rows via ".issue.details X" keep working after a move - but core
     has its own unrelated rule for the bare "issue" class,
     `div.issue {background:#ffffdd; padding:6px; border:1px solid #d7d7d7;
     border-radius:3px;}` (a "linked issue" reference box, e.g. on related-
     issues lists), which the container picks up as a side effect and paints
     the whole sidebar pale yellow. Override the parts that rule sets and
     this one doesn't already win on - background/border/radius - back to
     nothing; padding and border-bottom above already win purely on
     specificity (id beats class) and don't need repeating here.
  */
  background: transparent;
  border-top: none;
  border-left: none;
  border-right: none;
  border-radius: 0;
}

#mfm-sidebar-fields > * {
  min-width: 0;
}

#mfm-sidebar-fields .attribute {
  display: contents;
}

#mfm-sidebar-fields .attribute .label {
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
  font-weight: bold;
  white-space: normal;
  overflow-wrap: break-word;
}

#mfm-sidebar-fields .attribute .value {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Delimiters (settings page "Add delimiter") and full-width custom fields
   (e.g. a "Labels" field, .mfm-fullwidth — see FieldRegistry#custom_fields
   and the hook's :full_width flag) hold long content and must not be
   squeezed into a single ~100px grid column, so both span the full width
   of the container regardless of grid-template-columns above. */
#mfm-sidebar-fields > .mfm-separator {
  grid-column: 1 / -1;
}

/* The "Added by .../Updated ..." byline (field_registry.rb's added_by
   entry) arrives as core's own <p class="author"> - not a div.attribute at
   all, so it has no .label/.value split to become two grid cells the way
   every other row does. Left alone it would land in just the narrow first
   column like a lone label with an empty value beside it; span the full
   row instead, the same treatment full-width custom fields already get. */
#mfm-sidebar-fields > p.author {
  grid-column: 1 / -1;
  margin: 0;
}

#mfm-sidebar-fields > hr.mfm-separator {
  border: none;
  border-top: 1px solid #ddd;
  margin: 2px 0;
}

/* Full-width custom field rows arrive with core's own <hr><p><strong>
   Name</strong></p><div class="value">…</div> markup instead of the
   <div class="label">…</div> every other moved row uses (see
   render_full_width_custom_fields_rows in Redmine core). Hide the inner
   <hr> — #mfm-sidebar-fields already draws its own separators where
   needed — and make the <p><strong> read like every other row's label so
   the two markup shapes look consistent once relocated. */
#mfm-sidebar-fields .attribute.mfm-fullwidth > hr {
  display: none;
}

#mfm-sidebar-fields .attribute.mfm-fullwidth > p {
  margin: 0;
  padding: 0;
  font-weight: bold;
  min-width: 0;
  overflow-wrap: break-word;
}

/* Redmine core gives table.progress no border and float:inline-start —
   against the sidebar background the bar is invisible, and the float can
   pull surrounding content up beside it instead of letting the row stack
   normally. */
#mfm-sidebar-fields table.progress {
  border: 1px solid #666;
  float: none;
  clear: both;
}

/* % Done: bar and percentage on ONE row, percentage to the right of the
   bar. Core renders <table class="progress"> followed by <p class="percent">,
   two block-level boxes that otherwise stack inside .value. Inline editing
   never puts anything inside .value (its pencil sits in a wrapper beside
   it), so this holds with the feature on or off. */
.attribute.progress .value {
  display: flex;
  align-items: center;
  gap: .4em;
  flex-wrap: nowrap;
}

.attribute.progress table.progress {
  float: none;
  clear: none;
  flex: 0 1 auto;
  margin: 0;
}

.attribute.progress p.percent {
  float: none;
  flex: none;
  margin: 0;
  white-space: nowrap;
}

/* --------------------------------- mandatory-comment rules (plugin settings)

   Lives here, not in the inline-edit stylesheet: that one loads only on
   issues#show, so these rules never reached the settings page at all.

   Core wraps plugin settings in .box.tabular, which floats every <label>
   into a 175px right-aligned column at margin-left:-180px and pads every <p>
   180px right. This block uses neither, so its caption, checkbox and tabs
   are plain block elements sharing the title's left edge. */

.mfm-transition-rules h3 {
  margin-bottom: .2em;
}

.mfm-transition-rules .mfm-rules-caption {
  margin: 0 0 1em;
  padding: 0;
  color: #888;
  font-size: .9em;
  line-height: 1.4;
}

.mfm-transition-rules .mfm-rules-enforce {
  margin: 0 0 1.2em;
  padding: 0;
}

.mfm-transition-rules .mfm-rules-enforce label {
  float: none;
  display: inline-flex;
  align-items: center;
  gap: .4em;
  width: auto;
  margin: 0;
  text-align: left;
  font-weight: bold;
}

.mfm-transition-rules .mfm-rules-enforce input[type=checkbox] {
  margin: 0;
}

.mfm-rules-layout {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

/* Horizontal rule-set tabs above the tracker tabs: Comment, then one per
   custom field. Wraps onto more rows when there are many fields - a
   horizontal scroller would hide most of them. Same colours as the
   vertical tabs, underline instead of a right border. */
.mfm-rules-fields-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  margin: 0 0 1em;
  border-bottom: 1px solid #ddd;
}

.mfm-transition-rules button.mfm-rules-field-tab {
  appearance: none;
  -webkit-appearance: none;
  height: auto;
  margin: 0 0 -1px;
  padding: 6px 0;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #169;
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.mfm-transition-rules button.mfm-rules-field-tab:hover .mfm-rules-tab-name {
  text-decoration: underline;
}

.mfm-transition-rules button.mfm-rules-field-tab.selected {
  color: #333;
  font-weight: bold;
  border-bottom-color: #628db6;
}

/* Vertical tracker tabs. */
.mfm-rules-tabs {
  display: flex;
  flex-direction: column;
  flex: none;
  min-width: 150px;
  border-right: 1px solid #ddd;
}

.mfm-transition-rules button.mfm-rules-tab {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  height: auto;
  margin: 0 -1px 0 0;
  padding: 6px 14px 6px 0;
  border: 0;
  border-right: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #169;
  font: inherit;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}

.mfm-transition-rules button.mfm-rules-tab:hover .mfm-rules-tab-name {
  text-decoration: underline;
}

.mfm-transition-rules button.mfm-rules-tab.selected {
  color: #333;
  font-weight: bold;
  border-right-color: #628db6;
}

.mfm-rules-count {
  color: #888;
  font-weight: normal;
}

/* Tabs that carry rules: only "(N)" changes, the name stays as it is.
   Blue of the tab links, also on the selected (dark) tab. */
.mfm-transition-rules .mfm-rules-count.mfm-rules-count-nonzero {
  color: #169;
  font-weight: bold;
}

.mfm-rules-panels {
  flex: 1 1 auto;
  min-width: 0;
}

.mfm-rules-scroll {
  /* Wide matrices scroll inside their own box instead of stretching the
     settings page sideways. */
  overflow-x: auto;
  max-width: 100%;
}

.mfm-rules-table {
  border-collapse: collapse;
}

.mfm-rules-table th,
.mfm-rules-table td {
  border: 1px solid #ddd;
  padding: .3em .4em;
  vertical-align: middle;
}

/* Every status column: 90px, centered, long names wrap. border-box so the
   90px is the column as drawn - with content-box padding and border pushed
   it to 102px. */
.mfm-rules-table thead th:not(:first-child),
.mfm-rules-table tbody td {
  box-sizing: border-box;
  width: 90px;
  min-width: 90px;
  max-width: 90px;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* First column - source status names - left-aligned. */
.mfm-rules-table thead th:first-child,
.mfm-rules-table tbody th {
  text-align: left;
  white-space: nowrap;
  font-weight: normal;
}

.mfm-rules-table .mfm-rules-corner { font-style: italic; color: #666; }
.mfm-rules-any-row { background: #f6f6f6; }
.mfm-rules-table .mfm-rules-any-row th { font-weight: bold; }
.mfm-rules-table td.mfm-rules-na { color: #ccc; }
.mfm-rules-table td input[type=checkbox] { margin: 0; }

/* Classic edit form: live highlight on the Notes field once the picked
   status transition requires a comment (view_issues_edit_notes_bottom) -
   same red the status-change modal already uses for its own required-
   comment feedback (mint_visual_field_management_inline_edit.css). Outline
   rather than border so it doesn't disturb .jstEditor's own border/layout. */
.mfm-notes-required {
  outline: 2px solid #aa3333;
  border-radius: 2px;
}

/* A custom field the picked transition requires, still empty (edit form).
   Same red outline as the comment, on the control only - the label keeps
   core's layout and just gains core's own asterisk. */
.mfm-field-required input:not([type=hidden]),
.mfm-field-required select,
.mfm-field-required textarea {
  outline: 2px solid #aa3333;
  border-radius: 2px;
}


/* Settings page tabs (field placement | mandatory comment).
   Styled after Redmine's own #content .tabs rather than the vertical
   tracker tabs inside the rules panel - these two are page-level sections,
   and the core look is what an admin expects at the top of a settings
   page. Buttons, not links: they must not submit the surrounding settings
   form, and type="button" says so without any JS. */
.mfm-page-tabs {
  display: flex;
  gap: 4px;
  margin: 0 0 1em;
  border-bottom: 1px solid #bbb;
}

.box.tabular .mfm-page-tabs button.mfm-page-tab,
.mfm-page-tabs button.mfm-page-tab {
  appearance: none;
  -webkit-appearance: none;
  height: auto !important;
  margin: 0 0 -1px;
  padding: 5px 12px;
  border: 1px solid #bbb;
  border-bottom-color: transparent;
  border-radius: 3px 3px 0 0;
  background: #f5f5f5;
  box-shadow: none;
  color: #169;
  font: inherit;
  line-height: 1.4;
  cursor: pointer;
}

.box.tabular .mfm-page-tabs button.mfm-page-tab:hover,
.mfm-page-tabs button.mfm-page-tab:hover {
  background: #fff;
}

.box.tabular .mfm-page-tabs button.mfm-page-tab.selected,
.mfm-page-tabs button.mfm-page-tab.selected {
  background: #fff;
  border-bottom-color: #fff;
  color: #333;
  font-weight: bold;
  cursor: default;
}

/* Overdue Due date. Core's own rule is
   `div.issue.overdue .due-date .value` - it stops applying the moment the
   row is moved out of that wrapper, which is what field placement does. The
   marker class comes from mfm_overdue_marker (hook) and is kept in step by
   syncIssueClasses (inline-edit JS), so the colour follows the row wherever
   it ends up. Same red as core. */
.attribute.due-date.mfm-overdue .value {
  color: #c22;
}

/* Tracker badge column in the subtask and related-issue tables on the issue
   page (see mint_visual_field_management_hook.rb's badge injector). Core's
   table.list gives every cell generous padding meant for text columns; this
   one holds a single 16px square (the issues grid's size). Exactly 5px from
   the badge to the "Tracker #id" text: no padding on the badge's right, 5px
   on the left of the cell that follows it. */
.mfm-tracker-cell {
  width: 1%;
  white-space: nowrap;
  padding-right: 0 !important;
  text-align: left;
  vertical-align: middle;
}
.mfm-tracker-cell + td,
.mfm-tracker-cell + th {
  padding-left: 5px !important;
}

/* Core centres every th in a list table; an empty header cell above the
   badges has nothing to centre, but keeping it the same width as the column
   below stops the header row from drifting out of step with the rows. */
th.mfm-tracker-cell {
  width: 1%;
}

/* The author's avatar floats left of the subject. In core the "Added by"
   line sits beside it too and is tall enough to carry the attributes below
   the avatar; once field placement moves that line to the sidebar, the
   attributes start before the float ends and the whole two-column block is
   pushed right by the avatar's width. */
#content .issue > .attributes {
  clear: left;
}

/* A long-text custom field without text formatting renders its value as
   bare <p>s (simple_format), not inside .wiki - and core's
   ".text_cf .value .wiki p:first-of-type" reset only covers the latter. The
   paragraph's own 12px margins then pushed the value below its label's
   line. Both shapes, top and bottom. */
div.issue .attribute.text_cf .value > p:first-child,
div.issue .attribute.text_cf .value > .wiki > :first-child { margin-top: 0; }
div.issue .attribute.text_cf .value > p:last-child,
div.issue .attribute.text_cf .value > .wiki > :last-child { margin-bottom: 0; }

/* Field visibility tab (plugin settings). Same .box.tabular caveats as the
   mandatory-comment block above: core floats every <label> into a 175px
   column at margin-left:-180px and caps every <select> at 95% width, so
   both are reset here. The caption reuses .mfm-rules-caption. */
.mfm-field-visibility h3 {
  margin-bottom: .2em;
}

.mfm-field-visibility .mfm-rules-caption {
  margin: 0 0 1em;
  padding: 0;
  color: #888;
  font-size: .9em;
  line-height: 1.4;
}

.mfm-visibility-fields {
  list-style: none;
  margin: 0 0 1.5em;
  padding: 0;
  columns: 2 280px;
}

.mfm-visibility-fields li {
  margin: 0 0 6px;
  break-inside: avoid;
}

.mfm-field-visibility .mfm-visibility-fields label {
  float: none;
  display: inline-flex;
  align-items: center;
  gap: .4em;
  width: auto;
  margin: 0;
  text-align: left;
  font-weight: normal;
}

.mfm-field-visibility .mfm-visibility-fields input[type=checkbox] {
  margin: 0;
}

.mfm-visibility-format {
  color: #888;
  font-size: .9em;
}

.mfm-dual-listbox {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 760px;
}

.mfm-listbox-column {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.mfm-listbox-label {
  color: #666;
  font-size: .9em;
}

.box.tabular .mfm-dual-listbox select,
.mfm-dual-listbox select {
  width: 100%;
  max-width: 100%;
  height: auto;
  box-sizing: border-box;
}

.mfm-listbox-buttons {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-self: center;
  flex-shrink: 0;
}