/**
 * Mint Visual Fields - 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_fields — 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;
}

.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;
}

.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;
}