/* Teal Cloud A — inventory-owned dialogs only.
 * Layout, runtime states, item art, and rarity colors stay under their existing owners.
 */

html[data-ui-theme="teal-cloud-a"] #game-root :is(
  dialog[data-role="bag-item-dialog"],
  dialog[data-role="bag-quantity-dialog"],
  dialog[data-role="bag-use-results-dialog"],
  dialog[data-role="bag-batch-sell-dialog"]
) {
  --tc-dialog-deep: var(--tc-teal-deep, #103f42);
  --tc-dialog-mid: var(--tc-teal-mid, #1d5755);
  --tc-dialog-panel: var(--tc-teal-panel, #2b6560);
  --tc-dialog-panel-deep: var(--tc-teal-panel-deep, #174c4c);
  --tc-dialog-gold: var(--tc-gold, #d6ba78);
  --tc-dialog-gold-light: var(--tc-gold-light, #ead294);
  --tc-dialog-ivory: var(--tc-ink, #eee3bd);
  --tc-dialog-muted: var(--tc-muted, #bbcbbf);
  --tc-dialog-jade: var(--tc-pale-jade, #d8dfca);
  --tc-dialog-jade-deep: var(--tc-pale-jade-deep, #b5c7b5);
  color: var(--tc-dialog-ivory) !important;
  background-color: var(--tc-dialog-deep) !important;
  background-image:
    linear-gradient(145deg, rgb(38 105 100 / 18%), rgb(8 48 52 / 28%)),
    var(--tc-cloth, linear-gradient(145deg, #1d5b58, #0d3f43)) !important;
  background-position: center !important;
  background-repeat: no-repeat, repeat !important;
  background-size: 100% 100%, 480px auto !important;
  box-shadow: 0 8px 20px rgb(3 25 28 / 35%) !important;
}

html[data-ui-theme="teal-cloud-a"] #game-root :is(
  dialog[data-role="bag-item-dialog"],
  dialog[data-role="bag-quantity-dialog"],
  dialog[data-role="bag-use-results-dialog"],
  dialog[data-role="bag-batch-sell-dialog"]
)::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  box-sizing: border-box;
  pointer-events: none;
  border: 18px solid transparent;
  border-image-source: var(--tc-frame-art, var(--tc-panel-art, none));
  border-image-slice: 80 38;
  border-image-width: 18px;
  border-image-repeat: stretch;
}

html[data-ui-theme="teal-cloud-a"] #game-root :is(
  dialog[data-role="bag-item-dialog"],
  dialog[data-role="bag-quantity-dialog"],
  dialog[data-role="bag-use-results-dialog"],
  dialog[data-role="bag-batch-sell-dialog"]
)::after {
  content: none;
}

html[data-ui-theme="teal-cloud-a"] #game-root :is(
  dialog[data-role="bag-item-dialog"],
  dialog[data-role="bag-quantity-dialog"],
  dialog[data-role="bag-use-results-dialog"],
  dialog[data-role="bag-batch-sell-dialog"]
)::backdrop {
  background: rgb(4 31 35 / 72%);
}

html[data-ui-theme="teal-cloud-a"] #game-root :is(
  dialog[data-role="bag-item-dialog"],
  dialog[data-role="bag-quantity-dialog"],
  dialog[data-role="bag-use-results-dialog"],
  dialog[data-role="bag-batch-sell-dialog"]
) > .attribute-modal__content {
  color: var(--tc-dialog-ivory) !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-ui-theme="teal-cloud-a"] #game-root :is(
  dialog[data-role="bag-item-dialog"],
  dialog[data-role="bag-quantity-dialog"],
  dialog[data-role="bag-use-results-dialog"],
  dialog[data-role="bag-batch-sell-dialog"]
) .attribute-modal__heading {
  border-bottom-color: rgb(217 191 122 / 52%);
}

html[data-ui-theme="teal-cloud-a"] #game-root :is(
  dialog[data-role="bag-item-dialog"],
  dialog[data-role="bag-quantity-dialog"],
  dialog[data-role="bag-use-results-dialog"],
  dialog[data-role="bag-batch-sell-dialog"]
) .attribute-modal__heading h2 {
  color: var(--tc-dialog-ivory) !important;
  text-shadow: 0 1px 0 rgb(3 35 37 / 72%);
}

html[data-ui-theme="teal-cloud-a"] #game-root :is(
  dialog[data-role="bag-item-dialog"],
  dialog[data-role="bag-quantity-dialog"],
  dialog[data-role="bag-use-results-dialog"],
  dialog[data-role="bag-batch-sell-dialog"]
) .attribute-modal__close {
  border-color: rgb(217 191 122 / 66%) !important;
  background: rgb(18 71 70 / 90%) !important;
  color: var(--tc-dialog-gold-light) !important;
  box-shadow: inset 0 0 0 1px rgb(241 234 213 / 10%) !important;
  text-shadow: none;
}

/* Shared bag dialog controls: pale jade utility actions and teal/gold confirmation. */
html[data-ui-theme="teal-cloud-a"] #game-root :is(
  dialog[data-role="bag-item-dialog"],
  dialog[data-role="bag-quantity-dialog"],
  dialog[data-role="bag-use-results-dialog"],
  dialog[data-role="bag-batch-sell-dialog"]
) .secondary-button:not(:disabled) {
  border-color: #879e88 !important;
  background:
    linear-gradient(145deg, rgb(246 242 217 / 44%), transparent 55%),
    var(--tc-button-art, linear-gradient(180deg, var(--tc-dialog-jade), var(--tc-dialog-jade-deep))) !important;
  background-size: 100% 100%, 100% 100% !important;
  color: #173f3c !important;
  box-shadow: inset 0 0 0 1px rgb(255 252 230 / 56%) !important;
  text-shadow: none;
}

html[data-ui-theme="teal-cloud-a"] #game-root :is(
  dialog[data-role="bag-item-dialog"],
  dialog[data-role="bag-quantity-dialog"],
  dialog[data-role="bag-use-results-dialog"],
  dialog[data-role="bag-batch-sell-dialog"]
) .primary-button:not(:disabled) {
  border-color: var(--tc-dialog-gold) !important;
  background: linear-gradient(145deg, #34746f, #174b4d) !important;
  color: #fff0c4 !important;
  box-shadow:
    inset 0 0 0 1px rgb(234 210 145 / 25%),
    0 1px 2px rgb(3 32 34 / 34%) !important;
  text-shadow: 0 1px 0 #123b3b;
}

html[data-ui-theme="teal-cloud-a"] #game-root :is(
  dialog[data-role="bag-item-dialog"],
  dialog[data-role="bag-quantity-dialog"],
  dialog[data-role="bag-use-results-dialog"],
  dialog[data-role="bag-batch-sell-dialog"]
) button:focus-visible,
html[data-ui-theme="teal-cloud-a"] #game-root dialog[data-role="bag-quantity-dialog"] input:focus-visible {
  outline-color: var(--tc-dialog-gold-light);
}

html[data-ui-theme="teal-cloud-a"] #game-root :is(
  dialog[data-role="bag-item-dialog"],
  dialog[data-role="bag-quantity-dialog"],
  dialog[data-role="bag-use-results-dialog"],
  dialog[data-role="bag-batch-sell-dialog"]
) button:disabled {
  border-color: rgb(125 145 128 / 60%) !important;
  background: #55716a !important;
  color: #b5c1ad !important;
  box-shadow: none !important;
}

/* Item detail. The item image and runtime rarity color remain untouched. */
html[data-ui-theme="teal-cloud-a"] #game-root dialog[data-role="bag-item-dialog"] .bag-item-detail {
  border-color: rgb(185 154 85 / 58%) !important;
  background:
    linear-gradient(125deg, rgb(74 130 119 / 32%), rgb(13 63 64 / 54%)),
    var(--tc-cloth, none) !important;
  color: var(--tc-dialog-ivory) !important;
  box-shadow: inset 0 0 0 1px rgb(221 195 125 / 10%) !important;
}

html[data-ui-theme="teal-cloud-a"] #game-root dialog[data-role="bag-item-dialog"] .bag-item-detail__icon {
  border-color: var(--item-tier-color, var(--tc-dialog-gold)) !important;
  background: rgb(224 229 207 / 92%);
  color: #214a46;
  box-shadow: inset 0 0 0 2px rgb(23 76 76 / 18%);
}

html[data-ui-theme="teal-cloud-a"] #game-root dialog[data-role="bag-item-dialog"] .bag-item-detail__identity strong {
  color: var(--item-tier-color, var(--tc-dialog-ivory));
  text-shadow: 0 1px 0 rgb(3 35 37 / 70%);
}

html[data-ui-theme="teal-cloud-a"] #game-root dialog[data-role="bag-item-dialog"] [data-role="bag-detail-name"] {
  text-shadow:
    0 1px 0 rgb(3 35 37 / 78%),
    0 0 5px rgb(238 227 189 / 22%);
}

html[data-ui-theme="teal-cloud-a"] #game-root dialog[data-role="bag-item-dialog"] .bag-item-detail__identity :is(span, b),
html[data-ui-theme="teal-cloud-a"] #game-root dialog[data-role="bag-item-dialog"] .bag-item-detail__description,
html[data-ui-theme="teal-cloud-a"] #game-root dialog[data-role="bag-item-dialog"] .bag-sell-note {
  color: var(--tc-dialog-muted);
  background: transparent;
}

html[data-ui-theme="teal-cloud-a"] #game-root dialog[data-role="bag-item-dialog"] .bag-item-meta {
  border-color: rgb(185 154 85 / 48%) !important;
  background: rgb(12 61 62 / 50%) !important;
  box-shadow: inset 0 0 0 1px rgb(219 191 119 / 8%) !important;
}

html[data-ui-theme="teal-cloud-a"] #game-root dialog[data-role="bag-item-dialog"] .bag-item-meta__row {
  border-color: transparent !important;
  background: transparent !important;
  color: var(--tc-dialog-muted) !important;
}

html[data-ui-theme="teal-cloud-a"] #game-root dialog[data-role="bag-item-dialog"] .bag-item-meta__row :is(dt, dd) {
  color: var(--tc-dialog-muted) !important;
  background: transparent !important;
}

html[data-ui-theme="teal-cloud-a"] #game-root dialog[data-role="bag-item-dialog"] .bag-item-meta__row dd {
  color: var(--tc-dialog-ivory) !important;
}

html[data-ui-theme="teal-cloud-a"] #game-root dialog[data-role="bag-item-dialog"] .bag-item-attributes {
  background: transparent !important;
}

html[data-ui-theme="teal-cloud-a"] #game-root dialog[data-role="bag-item-dialog"] .bag-item-attributes span {
  border-color: rgb(185 154 85 / 42%) !important;
  background: rgb(27 82 78 / 74%) !important;
  color: #e9dfbf !important;
}

/* Quantity dialog is shared by use and single-item sale confirmation. */
html[data-ui-theme="teal-cloud-a"] #game-root dialog[data-role="bag-quantity-dialog"] .bag-quantity-modal__content > strong {
  color: var(--tc-dialog-gold-light) !important;
}

html[data-ui-theme="teal-cloud-a"] #game-root dialog[data-role="bag-quantity-dialog"] .bag-quantity-modal__content > p,
html[data-ui-theme="teal-cloud-a"] #game-root dialog[data-role="bag-quantity-dialog"] .bag-quantity-modal__content > p b,
html[data-ui-theme="teal-cloud-a"] #game-root dialog[data-role="bag-quantity-dialog"] .bag-quantity-modal__summary {
  color: var(--tc-dialog-muted) !important;
  background: transparent !important;
}

html[data-ui-theme="teal-cloud-a"] #game-root dialog[data-role="bag-quantity-dialog"] .bag-quantity-modal__content > p b,
html[data-ui-theme="teal-cloud-a"] #game-root dialog[data-role="bag-quantity-dialog"] .bag-quantity-modal__summary {
  color: var(--tc-dialog-ivory) !important;
}

html[data-ui-theme="teal-cloud-a"] #game-root dialog[data-role="bag-quantity-dialog"] [data-role="bag-quantity-input"] {
  border-color: rgb(185 154 85 / 68%) !important;
  background: rgb(235 235 211 / 94%) !important;
  color: #173f3c !important;
  box-shadow: inset 0 0 0 1px rgb(26 79 72 / 14%) !important;
  color-scheme: light;
}

html[data-ui-theme="teal-cloud-a"] #game-root dialog[data-role="bag-quantity-dialog"] :is(
  [data-quantity-step="-1"],
  [data-quantity-step="1"]
) {
  color: #173f3c !important;
}

/* Use result and batch-sale review rows read as pale-jade records over the cloth. */
html[data-ui-theme="teal-cloud-a"] #game-root dialog[data-role="bag-use-results-dialog"] [data-role="bag-use-results-summary"],
html[data-ui-theme="teal-cloud-a"] #game-root dialog[data-role="bag-batch-sell-dialog"] .bag-batch-sell-modal__hint {
  color: var(--tc-dialog-muted) !important;
  background: transparent !important;
}

html[data-ui-theme="teal-cloud-a"] #game-root dialog[data-role="bag-use-results-dialog"] .bag-use-results-list {
  border-block-color: rgb(185 154 85 / 44%);
}

html[data-ui-theme="teal-cloud-a"] #game-root dialog[data-role="bag-use-results-dialog"] .bag-use-results-list > p {
  border-bottom-color: rgb(185 154 85 / 24%);
  color: var(--tc-dialog-ivory) !important;
  background: transparent !important;
}

html[data-ui-theme="teal-cloud-a"] #game-root dialog[data-role="bag-batch-sell-dialog"] .bag-batch-sell-list {
  border-block-color: rgb(185 154 85 / 48%);
  background: rgb(11 57 59 / 38%);
}

html[data-ui-theme="teal-cloud-a"] #game-root dialog[data-role="bag-batch-sell-dialog"] .bag-batch-sell-list__row {
  border-bottom-color: rgb(185 154 85 / 25%);
  color: var(--tc-dialog-ivory) !important;
  background: transparent !important;
}

html[data-ui-theme="teal-cloud-a"] #game-root dialog[data-role="bag-batch-sell-dialog"] .bag-batch-sell-list__row > span {
  color: var(--tc-dialog-ivory) !important;
  background: transparent !important;
}

html[data-ui-theme="teal-cloud-a"] #game-root dialog[data-role="bag-batch-sell-dialog"] :is(
  .bag-batch-sell-list__row strong,
  .bag-batch-sell-modal__total strong
) {
  color: var(--tc-dialog-gold-light) !important;
  background: transparent !important;
}

html[data-ui-theme="teal-cloud-a"] #game-root dialog[data-role="bag-batch-sell-dialog"] .bag-batch-sell-modal__total {
  color: var(--tc-dialog-muted) !important;
  background: transparent !important;
}

html[data-ui-theme="teal-cloud-a"] #game-root dialog[data-role="bag-batch-sell-dialog"] .bag-batch-sell-modal__total > span {
  color: var(--tc-dialog-muted) !important;
  background: transparent !important;
}