/*
 * Wealth & Contract · Fluent 2 theme layer
 * Mica-inspired application surfaces, Acrylic navigation/overlays and
 * high-legibility solid data surfaces. Loaded after the legacy stylesheet.
 */

:root {
  --wac-font: "Segoe UI Variable Text", "Segoe UI", "Microsoft YaHei UI",
    "Noto Sans SC", system-ui, sans-serif;
  --wac-font-display: "Segoe UI Variable Display", "Segoe UI", "Microsoft YaHei UI",
    "Noto Sans SC", system-ui, sans-serif;
  --wac-brand-40: #0f548c;
  --wac-brand-50: #0e63a9;
  --wac-brand-60: #0f6cbd;
  --wac-brand-70: #115ea3;
  --wac-brand-80: #0c3b5e;
  --wac-brand-tint: #479ef5;
  --wac-radius-control: 8px;
  --wac-radius-card: 14px;
  --wac-radius-layer: 18px;
  --wac-duration: 160ms;
}

:root[data-theme="dark"] {
  --wac-mica: #111820;
  --wac-mica-alt: #151e28;
  --wac-mica-accent: rgba(34, 103, 163, 0.22);
  --wac-mica-glow: rgba(71, 158, 245, 0.14);
  --wac-acrylic: rgba(20, 29, 39, 0.76);
  --wac-acrylic-strong: rgba(22, 31, 42, 0.9);
  --wac-solid-1: #18212b;
  --wac-solid-2: #1c2733;
  --wac-solid-3: #222e3b;
  --wac-solid-hover: #263544;
  --wac-input: #111922;
  --wac-text: #f5f7fa;
  --wac-text-2: #c7d0da;
  --wac-text-3: #99a7b6;
  --wac-text-4: #748395;
  --wac-stroke: rgba(215, 229, 244, 0.12);
  --wac-stroke-strong: rgba(215, 229, 244, 0.21);
  --wac-divider: rgba(215, 229, 244, 0.09);
  --wac-brand: #479ef5;
  --wac-brand-hover: #62abf5;
  --wac-brand-pressed: #2886de;
  --wac-brand-subtle: rgba(71, 158, 245, 0.14);
  --wac-brand-subtle-hover: rgba(71, 158, 245, 0.21);
  --wac-brand-on: #071521;
  --wac-focus: #75b6f9;
  --wac-success: #54b054;
  --wac-success-bg: rgba(84, 176, 84, 0.13);
  --wac-danger: #ff99a4;
  --wac-danger-bg: rgba(255, 153, 164, 0.13);
  --wac-warning: #fce100;
  --wac-warning-bg: rgba(252, 225, 0, 0.1);
  --wac-gold: #f9d65c;
  --wac-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.28);
  --wac-shadow-layer: 0 18px 52px rgba(0, 0, 0, 0.42);
  --wac-overlay: rgba(2, 8, 14, 0.68);
  --wac-scrollbar: #506071;

  --bg: var(--wac-mica);
  --panel: var(--wac-solid-1);
  --panel2: var(--wac-solid-2);
  --panel3: var(--wac-solid-3);
  --line: var(--wac-stroke);
  --line-strong: var(--wac-stroke-strong);
  --muted: var(--wac-text-3);
  --subtle: var(--wac-text-4);
  --text: var(--wac-text);
  --green: var(--wac-success);
  --violet: var(--wac-brand);
  --violet-strong: var(--wac-brand-60);
  --pink: #f79ac0;
  --gold: var(--wac-gold);
  --danger: var(--wac-danger);
  --warning: var(--wac-warning);
  --focus: var(--wac-focus);
  --shadow-float: var(--wac-shadow-layer);
}

:root[data-theme="light"] {
  --wac-mica: #edf3f9;
  --wac-mica-alt: #e7eef6;
  --wac-mica-accent: rgba(15, 108, 189, 0.12);
  --wac-mica-glow: rgba(71, 158, 245, 0.2);
  --wac-acrylic: rgba(249, 252, 255, 0.74);
  --wac-acrylic-strong: rgba(251, 253, 255, 0.91);
  --wac-solid-1: #ffffff;
  --wac-solid-2: #f7f9fb;
  --wac-solid-3: #f0f4f8;
  --wac-solid-hover: #e8f2fb;
  --wac-input: #ffffff;
  --wac-text: #18212b;
  --wac-text-2: #354657;
  --wac-text-3: #526579;
  /* Keep tertiary text above the WCAG AA 4.5:1 threshold on light surfaces. */
  --wac-text-4: #4b6074;
  --wac-stroke: rgba(25, 54, 83, 0.14);
  --wac-stroke-strong: rgba(25, 54, 83, 0.24);
  --wac-divider: rgba(25, 54, 83, 0.1);
  --wac-brand: #0f6cbd;
  --wac-brand-hover: #115ea3;
  --wac-brand-pressed: #0c3b5e;
  --wac-brand-subtle: rgba(15, 108, 189, 0.1);
  --wac-brand-subtle-hover: rgba(15, 108, 189, 0.16);
  --wac-brand-on: #ffffff;
  --wac-focus: #0f6cbd;
  --wac-success: #107c10;
  --wac-success-bg: rgba(16, 124, 16, 0.1);
  --wac-danger: #c50f1f;
  --wac-danger-bg: rgba(197, 15, 31, 0.09);
  --wac-warning: #8a6100;
  --wac-warning-bg: rgba(138, 97, 0, 0.09);
  --wac-gold: #8a6100;
  --wac-shadow-card: 0 1px 2px rgba(15, 45, 75, 0.08), 0 4px 14px rgba(15, 45, 75, 0.05);
  --wac-shadow-layer: 0 20px 54px rgba(15, 45, 75, 0.18);
  --wac-overlay: rgba(24, 42, 58, 0.35);
  --wac-scrollbar: #9cadbd;

  --bg: var(--wac-mica);
  --panel: var(--wac-solid-1);
  --panel2: var(--wac-solid-2);
  --panel3: var(--wac-solid-3);
  --line: var(--wac-stroke);
  --line-strong: var(--wac-stroke-strong);
  --muted: var(--wac-text-3);
  --subtle: var(--wac-text-4);
  --text: var(--wac-text);
  --green: var(--wac-success);
  --violet: var(--wac-brand);
  --violet-strong: var(--wac-brand);
  --pink: #b4006f;
  --gold: var(--wac-gold);
  --danger: var(--wac-danger);
  --warning: var(--wac-warning);
  --focus: var(--wac-focus);
  --shadow-float: var(--wac-shadow-layer);
}

/*
 * A few legacy data surfaces still define their own dark-theme text colors.
 * Normalize those colors in the light theme so they remain readable after
 * the surface is changed to a solid light Fluent layer.
 */
:root[data-theme="light"] .status-line {
  color: var(--wac-text-2);
}

:root[data-theme="light"] .table-line {
  color: var(--wac-text-2);
}

:root[data-theme="light"] .table-line b,
:root[data-theme="light"] .table-line strong {
  color: var(--wac-text);
}

:root[data-theme="light"] .legend {
  color: var(--wac-text-4);
}

:root[data-theme="light"] .chart-disclaimer {
  color: var(--wac-text-4) !important;
}

html {
  background: var(--wac-mica);
}

body {
  min-height: 100vh;
  color: var(--wac-text);
  background-color: var(--wac-mica);
  background-image:
    radial-gradient(circle at 82% -12%, var(--wac-mica-glow), transparent 34rem),
    radial-gradient(circle at 18% 106%, var(--wac-mica-accent), transparent 38rem),
    linear-gradient(135deg, transparent 0 46%, rgba(255, 255, 255, 0.018) 46% 54%, transparent 54%);
  background-attachment: fixed;
  font-family: var(--wac-font);
  text-rendering: optimizeLegibility;
  transition: color var(--wac-duration) ease, background-color var(--wac-duration) ease;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: repeating-linear-gradient(
    115deg,
    transparent 0,
    transparent 3px,
    rgba(255, 255, 255, 0.012) 3px,
    rgba(255, 255, 255, 0.012) 4px
  );
  content: "";
  pointer-events: none;
}

button,
input,
select,
textarea {
  font-family: inherit;
}

h1,
h2,
h3,
h4,
.brand b {
  font-family: var(--wac-font-display);
}

.ambient {
  filter: blur(110px);
  opacity: 0.42;
}

.ambient-one {
  background: #0f6cbd;
}

.ambient-two {
  background: #36a9e1;
}

.sidebar,
.topbar,
.mobile-nav,
.login-card,
dialog,
.toast {
  -webkit-backdrop-filter: blur(28px) saturate(145%);
  backdrop-filter: blur(28px) saturate(145%);
}

.sidebar {
  border-color: var(--wac-stroke);
  background: var(--wac-acrylic);
  box-shadow: 8px 0 28px rgba(5, 35, 62, 0.05);
}

.topbar {
  border-color: var(--wac-stroke);
  background: var(--wac-acrylic);
}

.brand {
  color: var(--wac-text);
}

.brand-mark {
  background: linear-gradient(145deg, #2899f5, #0f6cbd 58%, #0c3b5e);
  box-shadow: 0 8px 22px rgba(15, 108, 189, 0.28);
}

.brand small,
.sidebar-footer small,
.sidebar-card p,
.crumb span,
.crumb i,
.eyebrow,
.hero-row > div > p:last-child {
  color: var(--wac-text-3);
}

.crumb b,
.identity > b,
.stock-event-card b,
.stock-dialog-stats strong {
  color: var(--wac-text);
}

.nav-label {
  color: var(--wac-text-4);
}

.nav-item {
  color: var(--wac-text-3);
  border: 1px solid transparent;
}

.nav-item:hover {
  border-color: var(--wac-stroke);
  background: var(--wac-brand-subtle);
  color: var(--wac-text);
}

.nav-item.active {
  border-color: rgba(71, 158, 245, 0.18);
  background: var(--wac-brand-subtle-hover);
  color: var(--wac-text);
}

.nav-item.active::before {
  left: -19px;
  width: 4px;
  background: var(--wac-brand);
}

.nav-item.active span,
.nav-item .badge,
.hero-row h1 span {
  color: var(--wac-brand);
}

.nav-item .badge {
  background: var(--wac-brand-subtle);
}

.sidebar-card {
  border-color: var(--wac-stroke);
  background: linear-gradient(145deg, var(--wac-solid-2), var(--wac-solid-1));
  box-shadow: var(--wac-shadow-card);
}

.mini-icon,
.tiny-icon {
  color: var(--wac-brand);
}

.sidebar-footer {
  border-color: var(--wac-divider);
}

.avatar {
  background: linear-gradient(145deg, #2899f5, #0f6cbd);
  color: #fff;
}

.logout-btn,
.sidebar-footer button,
.panel-title button,
.panel-title fluent-button {
  color: var(--wac-text-3);
}

.logout-btn:hover,
.sidebar-footer button:hover,
.panel-title button:hover,
.panel-title fluent-button:hover {
  color: var(--wac-text);
}

.search,
.market-clock,
.balance-display,
.calculation-box,
.confirm-summary {
  border-color: var(--wac-stroke);
  background: color-mix(in srgb, var(--wac-solid-1) 84%, transparent);
  color: var(--wac-text-2);
}

.search:focus-within {
  border-color: var(--wac-brand);
  box-shadow: 0 0 0 3px var(--wac-brand-subtle);
}

.search input {
  color: var(--wac-text);
}

.search kbd {
  border-color: var(--wac-stroke-strong);
  color: var(--wac-text-4);
  background: var(--wac-solid-2);
}

.theme-toggle {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  min-width: 36px;
  max-width: 36px;
  color: var(--wac-text-2);
}

.theme-toggle .theme-icon {
  width: 20px;
  height: 20px;
  fill: currentColor;
  stroke: none;
}

:root[data-theme="dark"] .theme-icon-moon,
:root[data-theme="light"] .theme-icon-sun {
  display: none;
}

.sync-btn {
  border-color: transparent;
  background: var(--wac-brand);
  color: var(--wac-brand-on);
  box-shadow: 0 2px 8px rgba(15, 108, 189, 0.2);
}

.sync-btn:hover {
  background: var(--wac-brand-hover);
}

.sync-btn:active {
  background: var(--wac-brand-pressed);
}

.metric-card,
.panel,
.action-card,
.quick-action-card,
.daily-panel,
.market-index-panel,
.sign-banner-box,
.profile-name-panel {
  border-color: var(--wac-stroke);
  background: color-mix(in srgb, var(--wac-solid-1) 94%, transparent);
  box-shadow: var(--wac-shadow-card);
}

.metric-card.featured {
  border-color: color-mix(in srgb, var(--wac-brand) 32%, var(--wac-stroke));
  background:
    linear-gradient(135deg, var(--wac-brand-subtle), transparent 62%),
    color-mix(in srgb, var(--wac-solid-1) 96%, transparent);
}

.metric-head,
.metric-foot,
.action-card .card-desc,
.quick-launch small,
.field-feedback,
.form-tip,
.chart-disclaimer {
  color: var(--wac-text-3);
}

.metric-head i,
.tiny-icon {
  border-color: rgba(15, 108, 189, 0.16);
  background: var(--wac-brand-subtle);
  color: var(--wac-brand);
}

.quick-launch button,
.quick-launch fluent-button,
.quick-grid button {
  border-color: var(--wac-stroke);
  background: var(--wac-solid-2);
  color: var(--wac-text);
}

.quick-launch button:hover,
.quick-launch fluent-button:hover,
.quick-grid button:hover {
  border-color: color-mix(in srgb, var(--wac-brand) 45%, var(--wac-stroke));
  background: var(--wac-solid-hover);
}

.quick-launch button > span {
  background: var(--wac-brand-subtle);
  color: var(--wac-brand);
}

.quick-launch fluent-button > span {
  background: var(--wac-brand-subtle);
  color: var(--wac-brand);
}

.quick-launch fluent-button::part(content) {
  display: grid;
  width: 100%;
  grid-template-columns: 38px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 11px;
  justify-content: stretch;
  text-align: left;
}

.quick-launch fluent-button {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 1fr;
  justify-content: stretch;
}

@media (max-width: 520px) {
  .quick-launch fluent-button::part(content) {
    grid-template-columns: 34px minmax(0, 1fr);
  }
}

.tabs {
  border-color: var(--wac-divider);
}

.tabs button {
  color: var(--wac-text-3);
}

.tabs button.active {
  border-color: var(--wac-brand);
  color: var(--wac-brand);
}

.data-table {
  border-color: var(--wac-stroke);
  background: var(--wac-solid-1);
  box-shadow: var(--wac-shadow-card);
}

.table-line,
.stock-row,
.timeline > div {
  border-color: var(--wac-divider);
}

.table-head,
.stock-header {
  background: var(--wac-solid-2);
  color: var(--wac-text-3);
}

.table-line:not(.table-head):hover,
.stock-row:not(.stock-header):hover {
  background: var(--wac-brand-subtle);
}

.purple,
.blue {
  background: var(--wac-brand) !important;
}

.violet {
  color: var(--wac-brand) !important;
  background: var(--wac-brand-subtle) !important;
}

.green {
  color: var(--wac-success) !important;
  background: var(--wac-success-bg) !important;
}

.gold {
  color: var(--wac-gold) !important;
  background: var(--wac-warning-bg) !important;
}

.primary-btn,
button.primary,
.login-card button[type="submit"] {
  border-color: transparent;
  background: var(--wac-brand);
  color: var(--wac-brand-on);
  box-shadow: 0 2px 8px rgba(15, 108, 189, 0.18);
}

.primary-btn:hover,
button.primary:hover,
.login-card button[type="submit"]:hover {
  background: var(--wac-brand-hover);
  color: var(--wac-brand-on);
}

.secondary-btn,
.trade-btn,
.modal-actions button:not(.danger-btn),
.amount-shortcuts button {
  border-color: var(--wac-stroke-strong);
  background: var(--wac-solid-2);
  color: var(--wac-text-2);
}

.secondary-btn:hover,
.trade-btn:hover,
.modal-actions button:not(.danger-btn):hover,
.amount-shortcuts button:hover {
  border-color: var(--wac-brand);
  background: var(--wac-brand-subtle);
  color: var(--wac-brand);
}

.danger-btn {
  border-color: color-mix(in srgb, var(--wac-danger) 38%, transparent);
  background: var(--wac-danger-bg);
  color: var(--wac-danger);
}

.danger-btn:hover {
  background: color-mix(in srgb, var(--wac-danger) 22%, transparent);
  color: var(--wac-danger);
}

.form-group input,
.form-group select,
.action-fields input,
.action-fields select,
.profile-name-form input,
.login-card input,
.login-card textarea,
dialog input,
dialog select,
textarea,
input,
select {
  border-color: var(--wac-stroke-strong);
  background: var(--wac-input);
  color: var(--wac-text);
}

input::placeholder,
textarea::placeholder {
  color: var(--wac-text-4);
  opacity: 1;
}

.form-group input:hover,
.form-group select:hover,
.action-fields input:hover,
.action-fields select:hover,
.profile-name-form input:hover,
.login-card input:hover,
.login-card textarea:hover {
  border-color: color-mix(in srgb, var(--wac-brand) 55%, var(--wac-stroke));
}

input:focus,
select:focus,
textarea:focus,
.form-group input:focus,
.form-group select:focus,
.action-fields input:focus,
.action-fields select:focus,
.profile-name-form input:focus {
  border-color: var(--wac-brand);
  box-shadow: 0 0 0 3px var(--wac-brand-subtle);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline-color: var(--wac-focus);
}

.alert-box {
  border-color: color-mix(in srgb, var(--wac-warning) 28%, transparent);
  background: var(--wac-warning-bg);
}

.alert-item {
  color: var(--wac-warning);
}

.error-banner {
  border-color: color-mix(in srgb, var(--wac-danger) 32%, transparent);
  background: var(--wac-danger-bg);
  color: var(--wac-danger);
}

.login-overlay {
  background:
    radial-gradient(circle at 50% 30%, var(--wac-mica-glow), transparent 34rem),
    var(--wac-overlay);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  backdrop-filter: blur(18px) saturate(120%);
}

.login-card {
  border: 1px solid var(--wac-stroke-strong);
  background: var(--wac-acrylic-strong);
  box-shadow: var(--wac-shadow-layer);
}

.login-card h2,
.login-card label {
  color: var(--wac-text);
}

.login-card p,
.login-divider,
.login-card small {
  color: var(--wac-text-3);
}

.login-card .login-remember {
  color: var(--wac-text-2);
}

.login-divider::before,
.login-divider::after {
  background: var(--wac-divider);
}

dialog {
  border-color: var(--wac-stroke-strong);
  background: var(--wac-acrylic-strong);
  color: var(--wac-text);
  box-shadow: var(--wac-shadow-layer);
}

dialog p:not(.eyebrow),
dialog label,
.close,
.toast small {
  color: var(--wac-text-3);
}

#memberForm label {
  color: var(--wac-text-2);
}

#memberForm input {
  border-color: var(--wac-stroke-strong);
  background: var(--wac-input);
  color: var(--wac-text);
}

#memberForm button {
  border-color: var(--wac-stroke-strong);
  background: var(--wac-solid-2);
  color: var(--wac-text-2);
}

#memberForm button:hover {
  border-color: var(--wac-brand);
  background: var(--wac-brand-subtle);
  color: var(--wac-brand);
}

dialog::backdrop {
  background: var(--wac-overlay);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.modal-icon:not(.danger) {
  background: var(--wac-brand-subtle);
  color: var(--wac-brand);
}

.toast {
  border-color: var(--wac-stroke-strong);
  background: var(--wac-acrylic-strong);
  color: var(--wac-text);
  box-shadow: var(--wac-shadow-layer);
}

.toast > span {
  background: var(--wac-success-bg);
  color: var(--wac-success);
}

.toast.toast-error > span {
  background: var(--wac-danger-bg);
  color: var(--wac-danger);
}

.toast-close {
  color: var(--wac-text-3);
}

.toast-close:hover {
  background: var(--wac-brand-subtle);
  color: var(--wac-text);
}

.stock-up {
  color: var(--wac-danger) !important;
}

.stock-down {
  color: var(--wac-success) !important;
}

.trend-grid line {
  stroke: var(--wac-divider);
}

.trend-up .trend-line,
.trend-up .trend-current {
  stroke: var(--wac-danger);
}

.trend-down .trend-line,
.trend-down .trend-current {
  stroke: var(--wac-success);
}

.market-limit-badge,
.open-tag,
.tag {
  border-color: var(--wac-stroke);
  background: var(--wac-brand-subtle);
  color: var(--wac-brand);
}

.tag.green {
  color: var(--wac-success) !important;
  background: var(--wac-success-bg) !important;
}

.stock-listing-actions input,
.action-card .card-footer input {
  border-color: var(--wac-stroke-strong);
  background: var(--wac-input);
  color: var(--wac-text);
}

/* Shop & backpack: balanced density and reliable contrast in both themes. */
[data-view="shop"] .shop-layout {
  grid-template-columns: minmax(0, 1.7fr) minmax(340px, 0.95fr);
  align-items: start;
}

[data-view="shop"] .shop-panel,
[data-view="shop"] .backpack-panel {
  overflow: hidden;
}

[data-view="shop"] .shop-item-card {
  min-height: 228px;
  padding: 20px;
  border-color: var(--wac-stroke);
  background:
    linear-gradient(145deg, var(--wac-brand-subtle), transparent 42%),
    var(--wac-solid-1);
}

[data-view="shop"] .shop-item-card:hover {
  border-color: color-mix(in srgb, var(--wac-brand) 45%, var(--wac-stroke));
  background:
    linear-gradient(145deg, var(--wac-brand-subtle-hover), transparent 48%),
    var(--wac-solid-1);
}

[data-view="shop"] .shop-item-card .card-title {
  gap: 12px;
}

[data-view="shop"] .shop-item-card .card-title b,
[data-view="shop"] .backpack-table .table-line b {
  color: var(--wac-text);
}

[data-view="shop"] .shop-item-card .card-desc {
  color: var(--wac-text-2);
}

[data-view="shop"] .shop-price {
  flex: 0 0 auto;
  border-color: color-mix(in srgb, var(--wac-success) 28%, transparent);
  background: var(--wac-success-bg);
  color: var(--wac-success);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

[data-view="shop"] .shop-item-card .card-footer {
  padding-top: 14px;
  border-top: 1px solid var(--wac-divider);
}

[data-view="shop"] .shop-item-card .card-footer label {
  color: var(--wac-text-3);
  font-weight: 600;
}

[data-view="shop"] .shop-item-card .card-footer input {
  background: var(--wac-input);
}

[data-view="shop"] .backpack-table {
  overflow-x: hidden;
}

[data-view="shop"] .backpack-table .table-line {
  grid-template-columns: minmax(130px, 1fr) minmax(88px, 0.55fr) minmax(150px, auto);
}

[data-view="shop"] .backpack-table .table-line:not(.table-head) {
  color: var(--wac-text-2);
}

[data-view="shop"] .backpack-table .table-line:not(.table-head) > span:nth-child(2) {
  color: var(--wac-text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

[data-view="shop"] .backpack-table .action-buttons-compact {
  justify-content: flex-end;
}

@media (max-width: 1180px) {
  [data-view="shop"] .shop-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  [data-view="shop"] .shop-item-card {
    min-height: 0;
    padding: 16px;
  }

  [data-view="shop"] .shop-item-card .card-footer {
    align-items: flex-end;
  }

  [data-view="shop"] .backpack-table .action-buttons-compact {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

#stockDialog .market-trade {
  border-color: var(--wac-divider);
}

.stock-chart,
.stock-event-card,
.stock-dialog-stats > div {
  border-color: var(--wac-stroke);
  background: var(--wac-solid-2);
}

.stock-chart polyline,
.trend-svg {
  color: var(--wac-brand);
  stroke: currentColor;
}

.trend-svg.trend-up {
  color: var(--wac-danger);
}

.trend-svg.trend-down {
  color: var(--wac-success);
}

.trend-current {
  fill: var(--wac-solid-1);
}

.chart-range,
.trend-chart-scale,
.trend-chart-time {
  color: var(--wac-text-4);
}

.info-box {
  border-color: color-mix(in srgb, var(--wac-brand) 30%, transparent);
  background: var(--wac-brand-subtle);
  color: var(--wac-brand);
}

.cert-card-gold {
  border-color: color-mix(in srgb, var(--wac-gold) 38%, var(--wac-stroke));
  background: linear-gradient(145deg, var(--wac-warning-bg), var(--wac-solid-1));
}

.cert-frame {
  background: linear-gradient(135deg, var(--wac-warning-bg), var(--wac-solid-2));
  color: var(--wac-text);
}

footer {
  color: var(--wac-text-4);
}

* {
  scrollbar-color: var(--wac-scrollbar) transparent;
}

@media (max-width: 760px) {
  .sidebar {
    background: var(--wac-acrylic-strong);
    box-shadow: 20px 0 58px rgba(5, 35, 62, 0.24);
  }

  .sidebar-backdrop {
    background: var(--wac-overlay);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }

  .mobile-nav {
    border-color: var(--wac-stroke-strong);
    background: var(--wac-acrylic-strong);
    box-shadow: 0 14px 42px rgba(5, 35, 62, 0.22);
  }

  .mobile-nav a,
  .mobile-nav button,
  .mobile-nav fluent-button {
    color: var(--wac-text-3);
  }

  .mobile-nav a.active {
    background: var(--wac-brand-subtle-hover);
    color: var(--wac-brand);
  }

  .data-table .table-line:not(.table-head) {
    border-color: var(--wac-stroke);
    background: var(--wac-solid-2);
  }

  .data-table .table-line:not(.table-head) > span {
    border-color: var(--wac-divider);
  }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .sidebar,
  .topbar,
  .mobile-nav,
  .login-card,
  dialog,
  .toast {
    background: var(--wac-solid-1);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .ambient,
  body::before {
    display: none;
  }

  .sidebar,
  .topbar,
  .mobile-nav,
  .login-card,
  dialog,
  .toast,
  .login-overlay,
  dialog::backdrop,
  .sidebar-backdrop {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .sidebar,
  .topbar,
  .mobile-nav,
  .login-card,
  dialog,
  .toast {
    background: var(--wac-solid-1);
  }
}

@media (prefers-reduced-motion: reduce) {
  body {
    transition: none;
  }
}

@media (forced-colors: active) {
  .ambient,
  body::before {
    display: none;
  }

  .sidebar,
  .topbar,
  .mobile-nav,
  .panel,
  .metric-card,
  .login-card,
  dialog,
  .toast {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: Canvas;
    color: CanvasText;
  }

  .nav-item.active,
  .primary-btn,
  .sync-btn {
    border: 2px solid Highlight;
  }
}

@media print {
  .ambient,
  body::before,
  .sidebar,
  .topbar,
  .mobile-nav,
  .toast {
    display: none !important;
  }

  body,
  .panel,
  .metric-card,
  .data-table {
    background: #fff !important;
    color: #000 !important;
    box-shadow: none !important;
  }
}

/* Fluent Web Components migration layer.
 * Keep the existing business classes so app.js can continue to use the same
 * selectors while the public shell and first form slice move to custom elements.
 */
fluent-button {
  box-sizing: border-box;
}

fluent-button.primary-btn,
fluent-button.sync-btn {
  min-height: 36px;
}

fluent-button.sync-btn {
  min-width: 0;
}

fluent-button.logout-btn,
fluent-button.mobile-menu {
  min-width: 0;
}

fluent-text-input,
fluent-textarea {
  display: block;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

.search fluent-text-input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}

.search fluent-text-input::part(root) {
  border: 0;
  background: transparent;
}

.search fluent-text-input::part(control) {
  color: var(--wac-text);
}

.profile-name-form fluent-text-input,
.login-card fluent-text-input,
.login-card fluent-textarea {
  width: 100%;
  max-width: none;
}

.login-card fluent-textarea {
  --inline-size: 100%;
}

.login-card fluent-button[type="submit"] {
  width: 100%;
}

.login-card .login-remember {
  align-items: center;
  display: flex;
  gap: 10px;
}

.login-card .login-remember fluent-checkbox {
  flex: 0 0 auto;
}

/* Second batch: dropdown and tab migration. */
fluent-dropdown {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: none;
  box-sizing: border-box;
}

.form-group fluent-dropdown,
.action-fields fluent-dropdown,
.profile-name-form fluent-dropdown,
.login-card fluent-dropdown,
dialog fluent-dropdown {
  width: 100%;
  min-height: 42px;
}

.control-row > fluent-dropdown {
  flex: 1 1 auto;
  min-width: 0;
}

.tabs.fluent-tablist {
  align-items: flex-end;
  gap: 22px;
  width: 100%;
}

.tabs fluent-tab {
  min-width: 0;
  padding: 0 2px 10px;
  color: var(--wac-text-3);
  font-size: 10px;
  line-height: 1.2;
}

.tabs fluent-tab[aria-selected="true"] {
  color: var(--wac-brand);
}

/* Third batch: dialogs, badges and dynamically rendered action controls. */
fluent-button.primary-btn,
fluent-button.secondary-btn,
fluent-button.danger-btn,
fluent-button.trade-btn {
  box-sizing: border-box;
  min-height: 42px;
  min-width: 0;
  max-width: 100%;
}

fluent-button.trade-btn {
  min-height: 34px;
}

fluent-button.danger-btn {
  --colorNeutralForeground1: var(--wac-danger);
  --colorNeutralForeground1Hover: var(--wac-danger);
  --colorNeutralForeground1Pressed: var(--wac-danger);
  --colorNeutralStroke1: color-mix(in srgb, var(--wac-danger) 38%, transparent);
  --colorNeutralStroke1Hover: var(--wac-danger);
  --colorNeutralStroke1Pressed: var(--wac-danger);
  --colorTransparentBackground: var(--wac-danger-bg);
  --colorTransparentBackgroundHover: color-mix(in srgb, var(--wac-danger) 22%, transparent);
  --colorTransparentBackgroundPressed: color-mix(in srgb, var(--wac-danger) 28%, transparent);
}

fluent-badge {
  box-sizing: border-box;
  vertical-align: middle;
}

fluent-badge.badge {
  flex: 0 0 auto;
  margin-left: auto;
}

fluent-badge.npc-badge {
  margin-left: 6px;
}

fluent-badge.market-limit-badge {
  min-height: 26px;
  white-space: nowrap;
}

fluent-dialog {
  --dialog-backdrop: var(--wac-overlay);
  --colorNeutralBackground1: var(--wac-acrylic-strong);
  --colorNeutralForeground1: var(--wac-text);
}

fluent-dialog::part(dialog) {
  width: min(520px, calc(100vw - 28px));
  max-width: none;
  max-height: calc(100vh - 30px);
  border: 1px solid var(--wac-stroke-strong);
  border-radius: var(--radius-lg);
  background: var(--wac-acrylic-strong);
  color: var(--wac-text);
  box-shadow: var(--wac-shadow-layer);
}

fluent-dialog > form {
  box-sizing: border-box;
  display: block;
  position: relative;
  padding: 30px;
}

fluent-dialog form h2,
fluent-dialog form h3 {
  color: var(--wac-text);
}

fluent-dialog form p:not(.eyebrow),
fluent-dialog form label,
fluent-dialog form .close {
  color: var(--wac-text-3);
}

fluent-dialog form input {
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-height: 42px;
  margin-top: 7px;
  border: 1px solid var(--wac-stroke-strong);
  border-radius: var(--radius-sm);
  background: var(--wac-input);
  color: var(--wac-text);
  outline: none;
}

fluent-dialog form input:focus {
  border-color: var(--wac-brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wac-brand) 16%, transparent);
}

fluent-dialog fluent-dropdown {
  width: 100%;
  min-height: 42px;
}

fluent-dialog fluent-button.close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 1;
  min-width: 32px;
  min-height: 32px;
}

fluent-dialog .modal-actions fluent-button {
  min-width: 84px;
}

fluent-dialog#stockDialog::part(dialog) {
  width: min(760px, calc(100vw - 28px));
  overflow-y: auto;
}

fluent-dialog#stockDialog .market-trade {
  border-color: var(--wac-divider);
}

@media (max-width: 600px) {
  fluent-dialog > form {
    padding: 20px;
  }

  fluent-dialog#stockDialog::part(dialog) {
    max-height: calc(100vh - 16px);
  }
}