/* TNG_THEME_CONSISTENCY_V21 - light/dark visual consistency and accessible contrast */
:root {
  color-scheme: light;
  --tng-bg: #f5f7f4;
  --tng-bg-soft: #edf3ef;
  --tng-surface: #ffffff;
  --tng-surface-raised: #fffdf8;
  --tng-surface-muted: #f1f6f2;
  --tng-ink: #17382f;
  --tng-ink-strong: #092e25;
  --tng-ink-muted: #5f766e;
  --tng-ink-faint: #738880;
  --tng-emerald: #0b6f54;
  --tng-emerald-strong: #07543f;
  --tng-emerald-soft: #e3f2eb;
  --tng-gold: #9a701c;
  --tng-gold-strong: #76530f;
  --tng-gold-soft: #fff5d9;
  --tng-border: rgba(13, 74, 57, .17);
  --tng-border-strong: rgba(13, 74, 57, .29);
  --tng-focus: #b27c1d;
  --tng-danger: #a33b3b;
  --tng-success: #14734d;
  --tng-shadow: 0 16px 42px rgba(7, 57, 44, .10);
}

/* The application may expose dark mode through any of these existing hooks. */
html.tng-trading-dark,
html.dark,
html.dark-mode,
html[data-theme="dark"],
html[data-mode="dark"],
body.tng-trading-dark,
body.dark,
body.dark-mode,
body[data-theme="dark"],
body[data-mode="dark"] {
  color-scheme: dark;
  --tng-bg: #0b1714;
  --tng-bg-soft: #10231e;
  --tng-surface: #112a23;
  --tng-surface-raised: #16362d;
  --tng-surface-muted: #0e211b;
  --tng-ink: #e5f2ec;
  --tng-ink-strong: #f5fcf8;
  --tng-ink-muted: #b5c9c0;
  --tng-ink-faint: #8fa99e;
  --tng-emerald: #40c798;
  --tng-emerald-strong: #72e0b5;
  --tng-emerald-soft: #153d31;
  --tng-gold: #e3bc60;
  --tng-gold-strong: #f0d487;
  --tng-gold-soft: #453719;
  --tng-border: rgba(162, 224, 195, .18);
  --tng-border-strong: rgba(227, 188, 96, .44);
  --tng-focus: #f0c75e;
  --tng-danger: #f08c8c;
  --tng-success: #65d9a4;
  --tng-shadow: 0 18px 48px rgba(0, 0, 0, .28);
}

/* Base surfaces and typography */
html:has(body.tng-trading-dark),
html:has(body.dark),
html:has(body.dark-mode),
html:has(body[data-theme="dark"]),
html:has(body[data-mode="dark"]) {
  color-scheme: dark;
}
body.tng-platform-shell {
  color: var(--tng-ink);
  background: var(--tng-bg);
}
body.tng-platform-shell,
body.tng-platform-shell p,
body.tng-platform-shell li,
body.tng-platform-shell td,
body.tng-platform-shell th,
body.tng-platform-shell label,
body.tng-platform-shell legend,
body.tng-platform-shell .form-text,
body.tng-platform-shell .help-text {
  color: var(--tng-ink);
}
body.tng-platform-shell h1,
body.tng-platform-shell h2,
body.tng-platform-shell h3,
body.tng-platform-shell h4,
body.tng-platform-shell h5,
body.tng-platform-shell h6,
body.tng-platform-shell strong,
body.tng-platform-shell b {
  color: var(--tng-ink-strong);
}
body.tng-platform-shell .muted,
body.tng-platform-shell .text-muted,
body.tng-platform-shell .subtitle,
body.tng-platform-shell small,
body.tng-platform-shell .small,
body.tng-platform-shell .help-text {
  color: var(--tng-ink-muted);
}

/* Dark surfaces override legacy light declarations without touching behavior. */
html.tng-trading-dark body.tng-platform-shell,
html.dark body.tng-platform-shell,
html.dark-mode body.tng-platform-shell,
html[data-theme="dark"] body.tng-platform-shell,
html[data-mode="dark"] body.tng-platform-shell,
body.tng-trading-dark,
body.dark,
body.dark-mode,
body[data-theme="dark"],
body[data-mode="dark"] {
  color: var(--tng-ink);
  background:
    radial-gradient(760px 360px at 8% -8%, rgba(227,188,96,.12), transparent 64%),
    radial-gradient(680px 380px at 100% 0%, rgba(64,199,152,.12), transparent 68%),
    var(--tng-bg);
}
html.tng-trading-dark body.tng-platform-shell h1,
html.tng-trading-dark body.tng-platform-shell h2,
html.tng-trading-dark body.tng-platform-shell h3,
html.tng-trading-dark body.tng-platform-shell h4,
html.tng-trading-dark body.tng-platform-shell h5,
html.tng-trading-dark body.tng-platform-shell h6,
html.dark body.tng-platform-shell h1,
html.dark body.tng-platform-shell h2,
html.dark body.tng-platform-shell h3,
html.dark body.tng-platform-shell h4,
html.dark body.tng-platform-shell h5,
html.dark body.tng-platform-shell h6,
html.dark-mode body.tng-platform-shell h1,
html.dark-mode body.tng-platform-shell h2,
html.dark-mode body.tng-platform-shell h3,
html.dark-mode body.tng-platform-shell h4,
html.dark-mode body.tng-platform-shell h5,
html.dark-mode body.tng-platform-shell h6,
html[data-theme="dark"] body.tng-platform-shell h1,
html[data-theme="dark"] body.tng-platform-shell h2,
html[data-theme="dark"] body.tng-platform-shell h3,
html[data-theme="dark"] body.tng-platform-shell h4,
html[data-theme="dark"] body.tng-platform-shell h5,
html[data-theme="dark"] body.tng-platform-shell h6,
html[data-mode="dark"] body.tng-platform-shell h1,
html[data-mode="dark"] body.tng-platform-shell h2,
html[data-mode="dark"] body.tng-platform-shell h3,
html[data-mode="dark"] body.tng-platform-shell h4,
html[data-mode="dark"] body.tng-platform-shell h5,
html[data-mode="dark"] body.tng-platform-shell h6,
body.tng-trading-dark h1,
body.tng-trading-dark h2,
body.tng-trading-dark h3,
body.tng-trading-dark h4,
body.tng-trading-dark h5,
body.tng-trading-dark h6,
body.dark h1,
body.dark h2,
body.dark h3,
body.dark h4,
body.dark h5,
body.dark h6,
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body[data-theme="dark"] h1,
body[data-theme="dark"] h2,
body[data-theme="dark"] h3,
body[data-theme="dark"] h4,
body[data-theme="dark"] h5,
body[data-theme="dark"] h6,
body[data-mode="dark"] h1,
body[data-mode="dark"] h2,
body[data-mode="dark"] h3,
body[data-mode="dark"] h4,
body[data-mode="dark"] h5,
body[data-mode="dark"] h6 {
  color: var(--tng-ink-strong);
}

/* Shared cards, panels, modals, dropdowns and navigation */
body.tng-platform-shell .card,
body.tng-platform-shell .panel,
body.tng-platform-shell .dashboard-card,
body.tng-platform-shell .stat-card,
body.tng-platform-shell .metric-card,
body.tng-platform-shell .module-card,
body.tng-platform-shell .content-card,
body.tng-platform-shell .modal-content,
body.tng-platform-shell .dropdown-menu,
body.tng-platform-shell .popover,
body.tng-platform-shell [class*="card"] {
  color: var(--tng-ink);
  background: var(--tng-surface);
  border-color: var(--tng-border);
  box-shadow: var(--tng-shadow);
}
body.tng-platform-shell .card-header,
body.tng-platform-shell .panel-header,
body.tng-platform-shell .section-header,
body.tng-platform-shell .module-header {
  color: var(--tng-ink-strong);
  background: var(--tng-surface-muted);
  border-color: var(--tng-border);
}
body.tng-platform-shell .navbar,
body.tng-platform-shell header.site-header,
body.tng-platform-shell .topbar,
body.tng-platform-shell .app-header {
  color: #f7fffb;
  background: linear-gradient(120deg, #062e26, #0a5543);
  border-bottom-color: rgba(227,188,96,.38);
}
body.tng-platform-shell .navbar a,
body.tng-platform-shell header.site-header a,
body.tng-platform-shell .topbar a,
body.tng-platform-shell .app-header a {
  color: #effaf5;
}
body.tng-platform-shell .navbar a:hover,
body.tng-platform-shell header.site-header a:hover,
body.tng-platform-shell .topbar a:hover,
body.tng-platform-shell .app-header a:hover {
  color: #f0d487;
}

/* Forms and controls */
body.tng-platform-shell input,
body.tng-platform-shell select,
body.tng-platform-shell textarea,
body.tng-platform-shell .form-control,
body.tng-platform-shell .form-select {
  color: var(--tng-ink);
  background: var(--tng-surface);
  border-color: var(--tng-border-strong);
}
body.tng-platform-shell input::placeholder,
body.tng-platform-shell textarea::placeholder {
  color: var(--tng-ink-faint);
  opacity: 1;
}
body.tng-platform-shell input:focus,
body.tng-platform-shell select:focus,
body.tng-platform-shell textarea:focus,
body.tng-platform-shell .form-control:focus,
body.tng-platform-shell .form-select:focus,
body.tng-platform-shell button:focus-visible,
body.tng-platform-shell a:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--tng-focus) 34%, transparent);
  outline-offset: 2px;
  border-color: var(--tng-focus);
}

/* Buttons: one coherent emerald/gold language in both themes */
body.tng-platform-shell button,
body.tng-platform-shell .btn,
body.tng-platform-shell a.btn,
body.tng-platform-shell input[type="submit"],
body.tng-platform-shell input[type="button"] {
  border-color: var(--tng-border-strong);
}
body.tng-platform-shell .btn-primary,
body.tng-platform-shell .btn-success,
body.tng-platform-shell .button-primary,
body.tng-platform-shell button.primary,
body.tng-platform-shell .tng-btn-primary {
  color: #fff;
  background: linear-gradient(135deg, #07543f, #0b8a67);
  border-color: rgba(227,188,96,.42);
}
body.tng-platform-shell .btn-warning,
body.tng-platform-shell .btn-gold,
body.tng-platform-shell .button-gold,
body.tng-platform-shell .tng-btn-premium {
  color: #241a08;
  background: linear-gradient(135deg, #f0d487, #c28e28);
  border-color: #e3bc60;
}
body.tng-platform-shell .btn-outline,
body.tng-platform-shell .btn-secondary,
body.tng-platform-shell .button-secondary,
body.tng-platform-shell .tng-btn-secondary {
  color: var(--tng-emerald-strong);
  background: var(--tng-surface);
  border-color: var(--tng-border-strong);
}
body.tng-platform-shell .btn-danger,
body.tng-platform-shell .tng-btn-danger {
  color: var(--tng-danger);
  background: color-mix(in srgb, var(--tng-danger) 10%, var(--tng-surface));
  border-color: color-mix(in srgb, var(--tng-danger) 42%, transparent);
}

/* Tables and data states */
body.tng-platform-shell table,
body.tng-platform-shell .table {
  color: var(--tng-ink);
  background: var(--tng-surface);
  border-color: var(--tng-border);
}
body.tng-platform-shell table thead th,
body.tng-platform-shell .table thead th {
  color: #f7fffb;
  background: #083d31;
  border-bottom-color: #d2a548;
}
body.tng-platform-shell table tbody tr,
body.tng-platform-shell .table tbody tr {
  color: var(--tng-ink);
  background: var(--tng-surface);
  border-color: var(--tng-border);
}
body.tng-platform-shell table tbody tr:nth-child(even),
body.tng-platform-shell .table tbody tr:nth-child(even) {
  background: var(--tng-surface-muted);
}
body.tng-platform-shell table tbody tr:hover,
body.tng-platform-shell .table tbody tr:hover {
  background: var(--tng-emerald-soft);
}
body.tng-platform-shell table td,
body.tng-platform-shell table th,
body.tng-platform-shell .table td,
body.tng-platform-shell .table th {
  border-color: var(--tng-border);
}

/* Badges, pills, alerts and status indicators */
body.tng-platform-shell .badge,
body.tng-platform-shell .pill,
body.tng-platform-shell .tag,
body.tng-platform-shell .status-badge,
body.tng-platform-shell .chip {
  color: var(--tng-emerald-strong);
  background: var(--tng-emerald-soft);
  border: 1px solid var(--tng-border);
}
body.tng-platform-shell .badge.gold,
body.tng-platform-shell .pill.gold,
body.tng-platform-shell .tag.gold,
body.tng-platform-shell .status-badge.gold,
body.tng-platform-shell .chip.gold {
  color: var(--tng-gold-strong);
  background: var(--tng-gold-soft);
  border-color: color-mix(in srgb, var(--tng-gold) 44%, transparent);
}
body.tng-platform-shell .alert,
body.tng-platform-shell .flash,
body.tng-platform-shell .notice {
  color: var(--tng-ink);
  background: var(--tng-surface);
  border-color: var(--tng-border);
}
body.tng-platform-shell .text-success { color: var(--tng-success) !important; }
body.tng-platform-shell .text-danger { color: var(--tng-danger) !important; }
body.tng-platform-shell .text-warning { color: var(--tng-gold-strong) !important; }

/* Explicit dark surface corrections for legacy inline/light modules */
html.tng-trading-dark body.tng-platform-shell [style*="background: white"],
html.tng-trading-dark body.tng-platform-shell [style*="background:#fff"],
html.dark body.tng-platform-shell [style*="background: white"],
html.dark body.tng-platform-shell [style*="background:#fff"],
body.dark body.tng-platform-shell [style*="background: white"],
body.dark body.tng-platform-shell [style*="background:#fff"],
body.dark-mode body.tng-platform-shell [style*="background: white"],
body.dark-mode body.tng-platform-shell [style*="background:#fff"] {
  color: var(--tng-ink) !important;
  background: var(--tng-surface) !important;
  border-color: var(--tng-border) !important;
}
html.tng-trading-dark body.tng-platform-shell .tng-vip-hero,
html.dark body.tng-platform-shell .tng-vip-hero,
body.dark .tng-vip-hero,
body.dark-mode .tng-vip-hero {
  background:
    radial-gradient(circle at 50% 0, rgba(227,188,96,.16), transparent 48%),
    linear-gradient(145deg, #123e32, #081f1a);
}

/* Reduced motion and narrow screens */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}
@media (max-width: 680px) {
  body.tng-platform-shell .card,
  body.tng-platform-shell .panel,
  body.tng-platform-shell .dashboard-card,
  body.tng-platform-shell .stat-card,
  body.tng-platform-shell .metric-card { border-radius: 15px; }
  body.tng-platform-shell table,
  body.tng-platform-shell .table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* v21c: high-specificity palette override for master-ui !important rules */
html:not(.tng-trading-dark) body,
html:not(.tng-trading-dark) #appShell,
html:not(.tng-trading-dark) #appShell .main,
html:not(.tng-trading-dark) #appShell .content,
html:not(.tng-trading-dark) #view-tracking,
html:not(.tng-trading-dark) #view-dashboard {
  background: #fffdf7 !important;
  color: #17352b !important;
}
html:not(.tng-trading-dark) #appShell .topbar,
html:not(.tng-trading-dark) #appShell .panel,
html:not(.tng-trading-dark) #appShell .card,
html:not(.tng-trading-dark) #appShell .tracking-command-center,
html:not(.tng-trading-dark) #view-tracking .panel,
html:not(.tng-trading-dark) #view-tracking .card,
html:not(.tng-trading-dark) #view-dashboard .panel,
html:not(.tng-trading-dark) #view-dashboard .card {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #17352b !important;
  border-color: #d8c58b !important;
  box-shadow: 0 8px 24px rgba(20, 67, 48, .10) !important;
}
html:not(.tng-trading-dark) #appShell .topbar {
  background: linear-gradient(135deg, #174b38, #0f6b4f) !important;
  color: #fffdf7 !important;
  border-bottom: 3px solid #c49a3a !important;
}
html:not(.tng-trading-dark) #appShell .topbar *,
html:not(.tng-trading-dark) #view-tracking h1,
html:not(.tng-trading-dark) #view-tracking h2,
html:not(.tng-trading-dark) #view-tracking h3,
html:not(.tng-trading-dark) #view-dashboard h1,
html:not(.tng-trading-dark) #view-dashboard h2,
html:not(.tng-trading-dark) #view-dashboard h3,
html:not(.tng-trading-dark) #appShell .panel h1,
html:not(.tng-trading-dark) #appShell .panel h2,
html:not(.tng-trading-dark) #appShell .panel h3,
html:not(.tng-trading-dark) #appShell .card h1,
html:not(.tng-trading-dark) #appShell .card h2,
html:not(.tng-trading-dark) #appShell .card h3 {
  color: #174b38 !important;
}
html:not(.tng-trading-dark) #appShell .topbar * { color: #fffdf7 !important; }
html:not(.tng-trading-dark) #view-tracking p,
html:not(.tng-trading-dark) #view-dashboard p,
html:not(.tng-trading-dark) #view-tracking label,
html:not(.tng-trading-dark) #view-dashboard label,
html:not(.tng-trading-dark) #view-tracking span,
html:not(.tng-trading-dark) #view-dashboard span,
html:not(.tng-trading-dark) #appShell .panel p,
html:not(.tng-trading-dark) #appShell .card p {
  color: #36584b !important;
}
html:not(.tng-trading-dark) #appShell table,
html:not(.tng-trading-dark) #view-tracking table,
html:not(.tng-trading-dark) #view-dashboard table {
  background: #ffffff !important;
  color: #17352b !important;
  border-color: #d8c58b !important;
}
html:not(.tng-trading-dark) #appShell table thead,
html:not(.tng-trading-dark) #appShell table thead tr,
html:not(.tng-trading-dark) #view-tracking table thead,
html:not(.tng-trading-dark) #view-dashboard table thead {
  background: #174b38 !important;
  color: #fffdf7 !important;
}
html:not(.tng-trading-dark) #appShell table th,
html:not(.tng-trading-dark) #appShell table td,
html:not(.tng-trading-dark) #view-tracking table th,
html:not(.tng-trading-dark) #view-tracking table td,
html:not(.tng-trading-dark) #view-dashboard table th,
html:not(.tng-trading-dark) #view-dashboard table td {
  background: #ffffff !important;
  color: #17352b !important;
  border-color: #eadfba !important;
}
html:not(.tng-trading-dark) #appShell table tbody tr:nth-child(even),
html:not(.tng-trading-dark) #view-tracking table tbody tr:nth-child(even),
html:not(.tng-trading-dark) #view-dashboard table tbody tr:nth-child(even) {
  background: #fbf7e9 !important;
}
html:not(.tng-trading-dark) #appShell button,
html:not(.tng-trading-dark) #appShell .btn,
html:not(.tng-trading-dark) #view-tracking button,
html:not(.tng-trading-dark) #view-dashboard button {
  background: #0f6b4f !important;
  color: #ffffff !important;
  border-color: #c49a3a !important;
}
html:not(.tng-trading-dark) #appShell button:hover,
html:not(.tng-trading-dark) #appShell .btn:hover,
html:not(.tng-trading-dark) #view-tracking button:hover,
html:not(.tng-trading-dark) #view-dashboard button:hover {
  background: #c49a3a !important;
  color: #17352b !important;
}
html:not(.tng-trading-dark) #appShell input,
html:not(.tng-trading-dark) #appShell select,
html:not(.tng-trading-dark) #appShell textarea {
  background: #fffefa !important;
  color: #17352b !important;
  border-color: #cdbb82 !important;
}

html.tng-trading-dark body,
html.tng-trading-dark #appShell,
html.tng-trading-dark #appShell .main,
html.tng-trading-dark #appShell .content,
html.tng-trading-dark #view-tracking,
html.tng-trading-dark #view-dashboard {
  background: #0b211b !important;
  color: #f5edcf !important;
}
html.tng-trading-dark #appShell .topbar,
html.tng-trading-dark #appShell .panel,
html.tng-trading-dark #appShell .card,
html.tng-trading-dark #appShell .tracking-command-center,
html.tng-trading-dark #view-tracking .panel,
html.tng-trading-dark #view-tracking .card,
html.tng-trading-dark #view-dashboard .panel,
html.tng-trading-dark #view-dashboard .card {
  background: #12352b !important;
  background-color: #12352b !important;
  color: #f5edcf !important;
  border-color: #a98736 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28) !important;
}
html.tng-trading-dark #appShell .topbar {
  background: linear-gradient(135deg, #071812, #0d4d3b) !important;
  color: #f5edcf !important;
  border-bottom: 3px solid #d6b45d !important;
}
html.tng-trading-dark #appShell .topbar *,
html.tng-trading-dark #view-tracking h1,
html.tng-trading-dark #view-tracking h2,
html.tng-trading-dark #view-tracking h3,
html.tng-trading-dark #view-dashboard h1,
html.tng-trading-dark #view-dashboard h2,
html.tng-trading-dark #view-dashboard h3,
html.tng-trading-dark #appShell .panel h1,
html.tng-trading-dark #appShell .panel h2,
html.tng-trading-dark #appShell .panel h3,
html.tng-trading-dark #appShell .card h1,
html.tng-trading-dark #appShell .card h2,
html.tng-trading-dark #appShell .card h3 {
  color: #f5edcf !important;
}
html.tng-trading-dark #view-tracking p,
html.tng-trading-dark #view-dashboard p,
html.tng-trading-dark #view-tracking label,
html.tng-trading-dark #view-dashboard label,
html.tng-trading-dark #view-tracking span,
html.tng-trading-dark #view-dashboard span,
html.tng-trading-dark #appShell .panel p,
html.tng-trading-dark #appShell .card p {
  color: #d5dfcf !important;
}
html.tng-trading-dark #appShell table,
html.tng-trading-dark #view-tracking table,
html.tng-trading-dark #view-dashboard table {
  background: #102c24 !important;
  color: #f5edcf !important;
  border-color: #a98736 !important;
}
html.tng-trading-dark #appShell table thead,
html.tng-trading-dark #appShell table thead tr,
html.tng-trading-dark #view-tracking table thead,
html.tng-trading-dark #view-dashboard table thead {
  background: #0a4d3a !important;
  color: #f5edcf !important;
}
html.tng-trading-dark #appShell table th,
html.tng-trading-dark #appShell table td,
html.tng-trading-dark #view-tracking table th,
html.tng-trading-dark #view-tracking table td,
html.tng-trading-dark #view-dashboard table th,
html.tng-trading-dark #view-dashboard table td {
  background: #102c24 !important;
  color: #f5edcf !important;
  border-color: #496c58 !important;
}
html.tng-trading-dark #appShell table tbody tr:nth-child(even),
html.tng-trading-dark #view-tracking table tbody tr:nth-child(even),
html.tng-trading-dark #view-dashboard table tbody tr:nth-child(even) {
  background: #163d31 !important;
}
html.tng-trading-dark #appShell button,
html.tng-trading-dark #appShell .btn,
html.tng-trading-dark #view-tracking button,
html.tng-trading-dark #view-dashboard button {
  background: #0d7655 !important;
  color: #fffdf0 !important;
  border-color: #d6b45d !important;
}
html.tng-trading-dark #appShell button:hover,
html.tng-trading-dark #appShell .btn:hover,
html.tng-trading-dark #view-tracking button:hover,
html.tng-trading-dark #view-dashboard button:hover {
  background: #d6b45d !important;
  color: #102c24 !important;
}
html.tng-trading-dark #appShell input,
html.tng-trading-dark #appShell select,
html.tng-trading-dark #appShell textarea {
  background: #0d2b23 !important;
  color: #f5edcf !important;
  border-color: #7e9b72 !important;
}