/* App4: Mikki logo palette for Support and Transactions. Icon rules untouched. */
:root {
  --mk-green: #315b46;
  --mk-green-deep: #1d3d2e;
  --mk-olive: #6f8d2b;
  --mk-gold: #c8a957;
  --mk-cream: #fffdf4;
  --mk-sage: #e4eddc;
  --mk-ink: #1d3328;
  --mk-muted: #57695d;
  --mk-line: #c7d3bb;
}

html[data-app-domain="app4.akingames.online"] .mobile-shell.is-transactions,
html[data-app-domain="app4.akingames.online"] .tx-page,
html[data-app-domain="app4.akingames.online"] .mobile-shell.is-support,
html[data-app-domain="app4.akingames.online"] .support-page,
html[data-app-domain="app4.akingames.online"] .sp-sheet {
  background: linear-gradient(160deg, var(--mk-sage), #f8f6e9 58%, #fdfbf2) !important;
}

html[data-app-domain="app4.akingames.online"] .tx-header {
  color: #fffdf4 !important;
  background: linear-gradient(135deg, var(--mk-green-deep), var(--mk-green) 62%, var(--mk-olive)) !important;
  border-color: rgba(200, 169, 87, .56) !important;
  box-shadow: 0 12px 26px rgba(29, 61, 46, .22) !important;
}

html[data-app-domain="app4.akingames.online"] .tx-tabs {
  background: rgba(255, 253, 244, .96) !important;
  border-color: var(--mk-line) !important;
}

html[data-app-domain="app4.akingames.online"] .tx-tab {
  color: var(--mk-green) !important;
  background: #eef3e8 !important;
  border-color: var(--mk-line) !important;
}

html[data-app-domain="app4.akingames.online"] .tx-tab.active {
  color: #fffdf4 !important;
  background: linear-gradient(145deg, var(--mk-green), var(--mk-olive)) !important;
}

html[data-app-domain="app4.akingames.online"] .tx-card {
  color: var(--mk-ink) !important;
  background: var(--mk-cream) !important;
  border-color: var(--mk-line) !important;
  box-shadow: 0 9px 20px rgba(42, 72, 54, .11) !important;
}

html[data-app-domain="app4.akingames.online"] .tx-name,
html[data-app-domain="app4.akingames.online"] .tx-summary-value {
  color: var(--mk-ink) !important;
}

html[data-app-domain="app4.akingames.online"] .tx-time,
html[data-app-domain="app4.akingames.online"] .tx-summary-label,
html[data-app-domain="app4.akingames.online"] .tx-meta {
  color: var(--mk-muted) !important;
}

html[data-app-domain="app4.akingames.online"] .tx-summary {
  background: #eef3e8 !important;
  border-color: var(--mk-line) !important;
}

html[data-app-domain="app4.akingames.online"] .sp-card {
  color: var(--mk-ink) !important;
  background: linear-gradient(135deg, var(--mk-cream), #edf3e7) !important;
  border-color: var(--mk-line) !important;
  box-shadow: 0 10px 24px rgba(42, 72, 54, .12) !important;
}

html[data-app-domain="app4.akingames.online"] .sp-card strong {
  color: var(--mk-ink) !important;
}

html[data-app-domain="app4.akingames.online"] .sp-card p,
html[data-app-domain="app4.akingames.online"] .sp-msg time {
  color: var(--mk-muted) !important;
}

html[data-app-domain="app4.akingames.online"] .sp-thread {
  background: linear-gradient(180deg, #e8f0e1, #f5f5e9) !important;
}

html[data-app-domain="app4.akingames.online"] .sp-msg.theirs .sp-bubble {
  color: var(--mk-ink) !important;
  background: var(--mk-cream) !important;
  border-color: var(--mk-line) !important;
}

html[data-app-domain="app4.akingames.online"] .sp-msg.mine .sp-bubble {
  color: #fffdf4 !important;
  background: linear-gradient(145deg, var(--mk-green), var(--mk-green-deep)) !important;
}

html[data-app-domain="app4.akingames.online"] .sp-quick button {
  color: var(--mk-green-deep) !important;
  background: #f5f6e9 !important;
  border-color: #bfcdaF !important;
}

html[data-app-domain="app4.akingames.online"] .sp-composer {
  background: rgba(255, 253, 244, .98) !important;
  border-color: var(--mk-line) !important;
}

html[data-app-domain="app4.akingames.online"] .sp-composer label {
  background: #f1f4e9 !important;
  border-color: var(--mk-line) !important;
}

html[data-app-domain="app4.akingames.online"] .sp-composer input {
  color: var(--mk-ink) !important;
}

html[data-app-domain="app4.akingames.online"] .sp-composer input::placeholder {
  color: var(--mk-muted) !important;
  opacity: 1;
}

/* Transactions is replaced at runtime by transaction-php-port.js. */
#txPhpPort {
  color: var(--mk-ink) !important;
  background: linear-gradient(160deg, var(--mk-sage), #f8f6e9 58%, #fdfbf2) !important;
}

#txPhpPort .txp-header {
  color: #fffdf4 !important;
  background: linear-gradient(135deg, var(--mk-green-deep), var(--mk-green) 62%, var(--mk-olive)) !important;
  box-shadow: 0 8px 20px rgba(29, 61, 46, .24) !important;
}

#txPhpPort .txp-filters,
#txPhpPort .txp-tabs {
  background: rgba(255, 253, 244, .97) !important;
  border-color: var(--mk-line) !important;
}

#txPhpPort .txp-dates input,
#txPhpPort .txp-selects select {
  color: var(--mk-ink) !important;
  background: #fffdf4 !important;
  border-color: #b8c7aa !important;
}

#txPhpPort .txp-tabs button {
  color: #58436a !important;
}

#txPhpPort .txp-tabs .active {
  color: #fffdf4 !important;
  background: linear-gradient(145deg, var(--mk-green), var(--mk-olive)) !important;
  box-shadow: 0 6px 14px rgba(49, 91, 70, .28) !important;
}

#txPhpPort .txp-quick button {
  box-shadow: inset 0 1px rgba(255,255,255,.48), 0 5px 12px rgba(49,91,70,.22) !important;
}

#txPhpPort .txp-quick .active {
  outline-color: #fffdf4 !important;
  box-shadow: 0 0 0 3px var(--mk-gold), 0 7px 16px rgba(49,91,70,.32) !important;
}

#txPhpPort .txp-card,
#txPhpPort .txp-card.credit {
  color: var(--mk-ink) !important;
  background: linear-gradient(135deg, #fffdf4, #e8f2df) !important;
  border-left-color: #6f9a43 !important;
  box-shadow: 0 9px 22px rgba(42,72,54,.13) !important;
}

#txPhpPort .txp-main h3,
#txPhpPort .txp-summary b {
  color: var(--mk-ink) !important;
}

#txPhpPort .txp-main time,
#txPhpPort .txp-main p,
#txPhpPort .txp-summary small {
  color: var(--mk-muted) !important;
}

#txPhpPort .txp-summary,
#txPhpPort .txp-detail {
  background: #fffdf4 !important;
  border-color: var(--mk-line) !important;
}

#txPhpPort .txp-summary .balance {
  color: #fffdf4 !important;
  background: linear-gradient(145deg, var(--mk-green), var(--mk-olive)) !important;
  box-shadow: 0 4px 10px rgba(49,91,70,.28) !important;
}

/* Preserve the original colourful transaction category buttons. */
#txPhpPort .txp-quick button:nth-child(1) { background: linear-gradient(135deg,#40bdb8,#138b8c) !important; }
#txPhpPort .txp-quick button:nth-child(2) { background: linear-gradient(135deg,#48d78a,#10b66d) !important; }
#txPhpPort .txp-quick button:nth-child(3) { background: linear-gradient(135deg,#43d7cf,#0faea5) !important; }
#txPhpPort .txp-quick button:nth-child(4) { background: linear-gradient(135deg,#f86784,#ec375e) !important; }
#txPhpPort .txp-quick button:nth-child(5) { background: linear-gradient(135deg,#ffc956,#f49716) !important; }
#txPhpPort .txp-quick button:nth-child(6) { background: linear-gradient(135deg,#a872e5,#7040cf) !important; }
#txPhpPort .txp-quick button:nth-child(7) { background: linear-gradient(135deg,#55b9ee,#3480db) !important; }
#txPhpPort .txp-quick button:nth-child(8) { background: linear-gradient(135deg,#ffc84e,#ef7b22) !important; }

/* Direct selectors: Support markup is mounted dynamically. */
.mobile-shell.is-support,
.support-page,
.sp-sheet {
  background: linear-gradient(160deg, var(--mk-sage), #f8f6e9 58%, #fdfbf2) !important;
}

.sp-card {
  color: var(--mk-ink) !important;
  background: linear-gradient(135deg, var(--mk-cream), #edf3e7) !important;
  border-color: var(--mk-line) !important;
  box-shadow: 0 10px 24px rgba(42,72,54,.12) !important;
}

.sp-card strong { color: var(--mk-ink) !important; }
.sp-card p, .sp-msg time { color: var(--mk-muted) !important; }
.sp-thread { background: linear-gradient(180deg, #e8f0e1, #f5f5e9) !important; }
.sp-msg.theirs .sp-bubble { color: var(--mk-ink) !important; background: var(--mk-cream) !important; border-color: var(--mk-line) !important; }
.sp-msg.mine .sp-bubble { color: #fffdf4 !important; background: linear-gradient(145deg, var(--mk-green), var(--mk-green-deep)) !important; }
.sp-quick button { color: var(--mk-green-deep) !important; background: #f5f6e9 !important; border-color: #bfcdaF !important; }
.sp-composer { background: rgba(255,253,244,.98) !important; border-color: var(--mk-line) !important; }
.sp-composer label { background: #f1f4e9 !important; border-color: var(--mk-line) !important; }
.sp-composer input { color: var(--mk-ink) !important; }
.sp-composer input::placeholder { color: var(--mk-muted) !important; opacity: 1; }

/* Support is replaced at runtime by the PHP-parity shell. */
.sp-php-header {
  color: #fffdf4 !important;
  background: linear-gradient(135deg, var(--mk-green-deep), var(--mk-green) 62%, var(--mk-olive)) !important;
  box-shadow: 0 5px 16px rgba(29,61,46,.24) !important;
}
.sp-php-head h2 { color: #fffdf4 !important; }
.sp-php-thread { background: linear-gradient(180deg, #e8f0e1, #f8f6e9) !important; }
.sp-php-day {
  color: var(--mk-green-deep) !important;
  background: rgba(255,253,244,.96) !important;
  border-color: var(--mk-line) !important;
}
.sp-php-bubble {
  color: var(--mk-ink) !important;
  background: var(--mk-cream) !important;
  border: 1px solid var(--mk-line) !important;
}
.sp-php-msg.mine .sp-php-bubble {
  color: #fffdf4 !important;
  background: linear-gradient(145deg, var(--mk-green), var(--mk-green-deep)) !important;
  border-color: #557661 !important;
}
.sp-php-meta { color: var(--mk-muted) !important; }
.sp-php-composer {
  background: rgba(255,253,244,.98) !important;
  border-color: var(--mk-line) !important;
}
.sp-php-composer input[type=text] {
  color: var(--mk-ink) !important;
  background: #f3f5e9 !important;
  border-color: #b9c8ac !important;
}
.sp-php-composer input[type=text]:focus { border-color: var(--mk-green) !important; background: #fffdf4 !important; }
.sp-php-composer input[type=text]::placeholder { color: var(--mk-muted) !important; opacity: 1; }
.sp-php-attach-btn { color: var(--mk-green) !important; background: #e8eee1 !important; }
.sp-php-send { color: #fffdf4 !important; background: linear-gradient(145deg, var(--mk-green), var(--mk-olive)) !important; }