/* Show title of unread tabs with red and italic font */
/*
:root.sidebar tab-item.unread .label-content {
  color: red !important;
  font-style: italic !important;
}
*/
/* Add private browsing indicator per tab */
/*
:root.sidebar tab-item.private-browsing tab-label:before {
  content: "🕶";
}
*/
/* ●サイドバーの Tree Style Tab - ツリー型タブ● */
/* ============================
   Tree Style Tab - 色を userChrome.css と同期
   ============================ */
/* --- アクティブタブ --- */
tab-item.active {
  border: 1px solid #9c9c9c !important;
  font-weight: bold !important;
  color: black !important;
}

/* --- 非アクティブ（既読） --- */
tab-item:not(.active):not(.unread):not(.pending) {
  background-color: rgba(183, 183, 183, 0.3) !important;
  color: black !important;
}
/* --- 非アクティブ（未読 / pending） --- */
tab-item.unread,
tab-item.pending {
  background-color: rgba(194, 194, 194, 0.2) !important;
  color: #8a8a8a !important;
}
/* --- 未読 / pending の hover --- */
/* ============================
   分割ビュー内のホバータブのみを赤色に※以下の3つの「0.6」は微調整
   ============================ */

/* 分割ビューのメインタブ（未読のみ） */
tab-item-substance.split-view-main.pending:hover .label-content,
tab-item-substance.split-view-main.unread:hover .label-content {
    color: rgba(255,0,0,0.6) !important;
    font-weight: bold !important;
}

/* 分割ビューのサブタブ（未読のみ） */
tab-item-substance.split-view-sub.pending:hover .label-content,
tab-item-substance.split-view-sub.unread:hover .label-content {
    color: rgba(255,0,0,0.6) !important;
    font-weight: bold !important;
}

/* 分割ビュー外の未読タブ（未読のみ） */
tab-item.unread:not(.split-view):hover .label-content,
tab-item.pending:not(.split-view):hover .label-content {
    color: rgba(255,0,0,0.6) !important;
    font-weight: bold !important;
}


/* --- 既読タブの hover --- */
tab-item:not(.active):not(.unread):not(.pending):hover
 {
  background-color: rgba(173, 216, 230, 0.8) !important;
  color: black !important;
  font-weight: bold !important;
}
/* ============================
   TSTサイドバーの未読タブ：マウスオーバー時のテキスト色を赤に
   ============================ */
 /* 未読タブをマウスオーバー */
tab-item.unread:hover .label-content {
    color: red !important; /* 赤色 */
    font-weight: bold !important;
}
/* ●全タブ・マウスオーバー時の背景と上部青線（アクティブ以外） */
.tabbrowser-tab:not([selected]):hover .tab-background::before {
  content: "";
  display: inline-block;
  width: 100%;
  height: 3px;
  background-color: #0a84ff !important; /* 濃い青線 */
  margin: -1px var(--user-tab-rounding, 2px) 0;
}
/* ●アクティブタブのマウスオーバー時も青線にする場合（任意） */
.tabbrowser-tab[selected]:hover .tab-background::before {
  content: "";
  display: inline-block;
  width: auto;
  height: 3px;
  background-color: #0a84ff !important;
  margin: -1px var(--user-tab-rounding, 1px) 0;
}

.tabbrowser-tab[selected]:hover  .label-content{
  color: black !important;
  font-weight: bold !important;
}


/* --- 角丸を userChrome.css と合わせる（2px） --- */
tab-item {
  border-radius: 2px !important;
}
/* --- ファビコンの透明化を防ぐ（TSTの既定挙動対策） --- */
tab-item .favicon {
  opacity: 1 !important;
}
/*■以下、微調整用■*/
tab-item-substance.active {
  background-color: rgba(255, 255, 0, 0.5) !important;
  border-color: rgba(0, 0, 0) !important;
}
tab-item-substance.active tab-label {
  color: #000 !important;
}
tab-closebox {
  :root.simulate-svg-context-fill &::after {
    background: #000 !important;
  }
}
/* --- アクティブタブのアイコンを黒にする --- */
tab-item.active tab-favicon,
tab-item.active .favicon,
tab-item.active .favicon-image {
  color: black !important;
  fill: black !important;
  filter: none !important;
}
/* ============================
   ピン留めタブのアイコンを黒抜きにする
   ============================ */
/* ピン留めタブの “built-in default icon” も黒にする */
tab-item.pinned .favicon-builtin,
tab-item.pinned .favicon-default {
  color: black !important;
  fill: black !important;
  fill-opacity: 1 !important;
  filter: brightness(0) !important;
}
/* ピン留めタブの “sharing-state / sticky-state” も黒にする */
tab-item.pinned .favicon-sharing-state,
tab-item.pinned .favicon-sticky-state {
  color: black !important;
  fill: black !important;
  fill-opacity: 1 !important;
}
/* ============================
   Tree Style Tab - Hover 時の上部青線（Firefox と完全同期）
   ============================ */
/* 非アクティブタブの hover 時に上部青線を表示（濃い青） */
tab-item:not(.active):hover::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #0a84ff !important;
  border-radius: 2px 2px 0 0;
  z-index: 999 !important;
  opacity: 1 !important;
}
/* アクティブタブの hover 時も同じ濃さの青線を表示 */
tab-item.active:hover::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #0a84ff !important;
  border-radius: 2px 2px 0 0;
  z-index: 999 !important;
  opacity: 1 !important;
}
/* ★TST の内部レイヤーが hover 色を薄めるのを防ぐ（重要） */
tab-item:hover .background,
tab-item:hover .background.base,
tab-item:hover .highlighter,
tab-item:hover .burster {
  background: transparent !important;
  opacity: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}
/* ============================
   タブグループの色をFirefox本体と同期する
   ============================*/
:root {
  --tab-group-color-blue: #0053cb;
  --tab-group-color-blue-pale: #e2f7ff;
  --tab-group-color-blue-invert: #23327b;

  --tab-group-color-purple: #8627a8;
  --tab-group-color-purple-pale: #ffecff;
  --tab-group-color-purple-invert: #4f216b;

  --tab-group-color-cyan: #007792;
  --tab-group-color-cyan-pale: #cfffff;
  --tab-group-color-cyan-invert: #034554;

  --tab-group-color-orange: #ae2000;
  --tab-group-color-orange-pale: #ffecd8;
  --tab-group-color-orange-invert: #701c07;

  --tab-group-color-yellow: #985500;
  --tab-group-color-yellow-pale: #fff4d0;
  --tab-group-color-yellow-invert: #5f3100;

  --tab-group-color-pink: #ad0059;
  --tab-group-color-pink-pale: #ffe8f4;
  --tab-group-color-pink-invert: #5f1854;

  --tab-group-color-green: #007700;
  --tab-group-color-green-pale: #e1ffe1;
  --tab-group-color-green-invert: #004933;

  --tab-group-color-gray: #5e6a77;
  --tab-group-color-gray-pale: #f0f0f0;
  --tab-group-color-gray-invert: #3a4048;

  --tab-group-color-red: #b20037;
  --tab-group-color-red-pale: #ffe8ea;
  --tab-group-color-red-invert: #69172d;
}

tab-item[type="group"] {
  & .caption {
background-color: var(--tab-group-color) !important;
  }
}

tab-item-substance {
  & .caption {
    color: #FFF;
  }
}