/* Styling for dots, an additional label row so badges appear in a dedicated
   flowing row under the subject, default to white background for unlabeled/custom tags,
   and allow wrapping via flex-wrap. */

/* menu / legend colors */
.toolbarmenu li.label0,
.toolbarmenu li.label0 a.active {
  color: #eee;
}

.toolbarmenu li .label1 {
  color: #ff0000 !important;
}

.toolbarmenu li .label2 {
  color: #ff9900 !important;
}

.toolbarmenu li .label3 {
  color: #009900 !important;
}

.toolbarmenu li .label4 {
  color: #3333ff !important;
}

.toolbarmenu li .label5 {
  color: #993399 !important;
}

/* Dots: kept as in the other skins */
span.tb_label_dots {
  margin-left: 18px;
  line-height: 0px !important;
}

span.tb_label_dots span {
  font-size: 32px;
  line-height: 0px !important;
}

/* Keep small/badge dot style, but ensure badges can wrap below via the badge container */
span.tb_label_dots span.tb_label_badges {
  font-size: 11px;
  line-height: 11px !important;
  color: #fff;
  margin-right: 8px;
  margin-bottom: 3px;
  margin-top: -2px;
  background-color: #c9c9c9;
}

/* Mimic original Thunderbird badge color classes */
.tb_label_badges.label1 {
  background-color: #ff0000 !important;
}

.tb_label_badges.label2 {
  background-color: #ff9900 !important;
}

.tb_label_badges.label3 {
  background-color: #009900 !important;
}

.tb_label_badges.label4 {
  background-color: #3333ff !important;
}

.tb_label_badges.label5 {
  background-color: #993399 !important;
}

/* labelbox: a flowing flex container under the subject
   so it does not overlap the title, and can wrap when there are many labels. */
div#labelbox {
  white-space: normal; /* allow labels to wrap */
  position: static; /* flow in document under the subject */
  right: auto;
  top: auto;
  display: flex; /* horizontal layout with wrapping */
  flex-wrap: wrap; /* wrap badges onto multiple lines as needed */
  align-items: center;
  gap: 6px; /* consistent spacing between label items */
  width: 100%;
  margin-top: 6px; /* gap between subject and label row */
  padding-left: 1.5em; /* align with subject text area; adjust if needed */
  box-sizing: border-box;
}

/* Default style for label spans inside labelbox:
   - If a label has no color class, use white background so it doesn't obscure the title.
   - Colored classes (tb_label_spanX / tb_label_badges.labelX) override this default. */
div#labelbox span {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 3px 6px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 3px;
  background-color: #ffffff; /* default white background for unlabeled/custom tags */
  color: #000000; /* readable dark text on white */
  font-weight: bold;
  font-size: 11px;
  line-height: 1;
  min-height: 20px; /* decent touch target on mobile */
  box-sizing: border-box;
  word-break: keep-all; /* keep label text together; container wraps labels as units */
}

/* Preserve explicit colored span rules to keep original thunderbird colors */
div#labelbox span.tb_label_span1,
.tb_label_badges.label1 {
  background-color: #ff2200 !important;
  color: #fff !important;
}

div#labelbox span.tb_label_span2,
.tb_label_badges.label2 {
  background-color: #ff9900 !important;
  color: #fff !important;
}

div#labelbox span.tb_label_span3,
.tb_label_badges.label3 {
  background-color: #00cc00 !important;
  color: #fff !important;
}

div#labelbox span.tb_label_span4,
.tb_label_badges.label4 {
  background-color: #0cf !important;
  color: #fff !important;
}

div#labelbox span.tb_label_span5,
.tb_label_badges.label5 {
  background-color: #ff33ff !important;
  color: #fff !important;
}

/* Contextmenu/icon decorations (kept as original) */
#sections-table tbody #rcmrowthunderbird_labels td.section:before {
  content: "\f507"; /* user-tag */
}

.toolbar a.button.tb-label:before {
  content: "\f507"; /* user-tag */
}

div.contextmenu a.rcm-uidropdown::before {
  content: "\f507"; /* user-tag */
}

/* contextmenu color rules (kept as original) */
div.contextmenu li.label0,
div.contextmenu li.label0 a.active {
  color: #eee;
}

div.contextmenu li .label1 {
  color: #ff0000 !important;
}

div.contextmenu li .label2 {
  color: #ff9900 !important;
}

div.contextmenu li .label3 {
  color: #009900 !important;
}

div.contextmenu li .label4 {
  color: #3333ff !important;
}

div.contextmenu li .label5 {
  color: #993399 !important;
}

/* Ensure the message header is a positioned ancestor so original dot placement still works */
#message-header {
  position: relative;
}