/* MarcFx terminal theme — broker-agnostic dark terminal UI
   Accents: Midnight #070E20 · Primary yellow #FFDE02 · Light yellow #FFFCE6 */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

:root {
  --ex-midnight: #070e20;
  --ex-midnight-2: #0c1528;
  --ex-midnight-3: #121c33;
  --ex-panel: #0f1830;
  --ex-panel-2: #152038;
  --ex-border: rgba(255, 255, 255, 0.08);
  --ex-border-strong: rgba(255, 255, 255, 0.14);
  --ex-yellow: #ffde02;
  --ex-yellow-dark: #e6c800;
  --ex-yellow-soft: #fffce6;
  --ex-text: #ffffff;
  --ex-text-2: #b8c0d4;
  --ex-text-3: #7a849c;
  --ex-buy: #16c784;
  --ex-sell: #ea3943;
  --ex-radius: 12px;
  --ex-radius-sm: 8px;
  --ex-font: "Inter", system-ui, -apple-system, sans-serif;
}

/* ----- Global shell ----- */
body.dashboard,
body.dashboard #main-wrapper,
body.dashboard .content-body {
  background: var(--ex-midnight) !important;
  color: var(--ex-text) !important;
  font-family: var(--ex-font) !important;
}

body.dashboard h1,
body.dashboard h2,
body.dashboard h3,
body.dashboard h4,
body.dashboard h5,
body.dashboard .card-title,
body.dashboard .page-title-content,
body.dashboard .page-title-content p,
body.dashboard .page-title-content strong {
  color: var(--ex-text) !important;
  font-family: var(--ex-font) !important;
  font-weight: 600;
}

body.dashboard .text-muted,
body.dashboard small,
body.dashboard .form-label {
  color: var(--ex-text-3) !important;
}

/* ----- Header ----- */
body.dashboard .header,
body.dashboard .header.bg-light {
  background: var(--ex-midnight-2) !important;
  border-bottom: 1px solid var(--ex-border) !important;
  box-shadow: none !important;
}

body.dashboard .header-content {
  min-height: 64px;
  align-items: center;
}

body.dashboard .header .brand-logo strong,
body.dashboard .ex-brand {
  color: var(--ex-text) !important;
  letter-spacing: -0.02em;
  font-weight: 700;
}

body.dashboard .ex-brand span {
  color: var(--ex-yellow);
}

body.dashboard .header .form-control {
  background: var(--ex-midnight-3) !important;
  border: 1px solid var(--ex-border) !important;
  color: var(--ex-text) !important;
  border-radius: 999px !important;
}

body.dashboard .header .input-group-text {
  background: var(--ex-midnight-3) !important;
  border: 1px solid var(--ex-border) !important;
  color: var(--ex-text-3) !important;
  border-radius: 0 999px 999px 0 !important;
}

body.dashboard .header-right .dark-light-toggle,
body.dashboard .header-right .notification,
body.dashboard .header-right .profile_login {
  color: var(--ex-text-2) !important;
}

/* ----- Sidebar ----- */
body.dashboard .sidebar {
  background: var(--ex-midnight-2) !important;
  border-right: 1px solid var(--ex-border) !important;
  width: 72px;
}

body.dashboard .sidebar .brand-logo {
  padding: 18px 0;
  text-align: center;
}

body.dashboard .sidebar .brand-logo a {
  display: inline-flex;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ex-yellow);
  color: var(--ex-midnight) !important;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  text-decoration: none;
}

body.dashboard .sidebar .brand-logo img {
  display: none;
}

body.dashboard .sidebar .menu ul li a span,
body.dashboard .sidebar .menu ul li a i {
  color: var(--ex-text-3) !important;
  font-size: 20px;
}

body.dashboard .sidebar .menu ul li a:hover span,
body.dashboard .sidebar .menu ul li a:hover i,
body.dashboard .sidebar .menu ul li.active a span,
body.dashboard .sidebar .menu ul li.active a i {
  color: var(--ex-yellow) !important;
}

body.dashboard .sidebar .copyright,
body.dashboard .sidebar .copyright a {
  color: var(--ex-text-3) !important;
  font-size: 10px;
}

/* ----- Cards / panels ----- */
body.dashboard .card {
  background: var(--ex-panel) !important;
  border: 1px solid var(--ex-border) !important;
  border-radius: var(--ex-radius) !important;
  box-shadow: none !important;
  color: var(--ex-text) !important;
}

body.dashboard .card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--ex-border) !important;
  padding: 16px 20px !important;
}

body.dashboard .card-body {
  padding: 20px !important;
}

body.dashboard .welcome-profile {
  background: linear-gradient(
    160deg,
    var(--ex-panel-2),
    var(--ex-midnight-2)
  ) !important;
}

/* ----- Stats ----- */
body.dashboard .mt5-stat-grid .card {
  background: var(--ex-panel-2) !important;
}

body.dashboard .mt5-stat-grid h3,
body.dashboard .mt5-stat-grid h4 {
  color: var(--ex-text) !important;
  font-weight: 700;
  letter-spacing: -0.03em;
}

body.dashboard .mt5-stat-grid h3 sub,
body.dashboard .mt5-stat-grid h4 sub {
  color: var(--ex-text-3);
  font-size: 0.55em;
  font-weight: 500;
}

/* ----- Forms ----- */
body.dashboard .form-control,
body.dashboard select.form-control,
body.dashboard textarea.form-control {
  background: var(--ex-midnight-3) !important;
  border: 1px solid var(--ex-border-strong) !important;
  color: var(--ex-text) !important;
  border-radius: var(--ex-radius-sm) !important;
  min-height: 44px;
}

body.dashboard .form-control:focus {
  border-color: var(--ex-yellow) !important;
  box-shadow: 0 0 0 3px rgba(255, 222, 2, 0.15) !important;
}

body.dashboard .form-control::placeholder {
  color: var(--ex-text-3) !important;
}

body.dashboard option {
  background: var(--ex-midnight-2);
  color: var(--ex-text);
}

/* ----- Buttons (primary accent) ----- */
body.dashboard .btn-primary,
body.dashboard .btn-primary:focus {
  background: var(--ex-yellow) !important;
  border-color: var(--ex-yellow) !important;
  color: var(--ex-midnight) !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  padding: 10px 20px !important;
  box-shadow: none !important;
}

body.dashboard .btn-primary:hover {
  background: var(--ex-yellow-dark) !important;
  border-color: var(--ex-yellow-dark) !important;
  color: var(--ex-midnight) !important;
}

body.dashboard .btn-success {
  background: var(--ex-buy) !important;
  border-color: var(--ex-buy) !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
}

body.dashboard .btn-danger {
  background: var(--ex-sell) !important;
  border-color: var(--ex-sell) !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
}

body.dashboard .btn-outline-primary {
  border-color: var(--ex-yellow) !important;
  color: var(--ex-yellow) !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  background: transparent !important;
}

body.dashboard .btn-outline-primary:hover,
body.dashboard .btn-outline-primary.active,
body.dashboard .btn-group .btn-primary {
  background: var(--ex-yellow) !important;
  color: var(--ex-midnight) !important;
}

body.dashboard .btn-outline-secondary,
body.dashboard .btn-outline-danger,
body.dashboard .btn-outline-warning {
  border-radius: 999px !important;
  font-weight: 600 !important;
}

body.dashboard .btn-outline-secondary {
  border-color: var(--ex-border-strong) !important;
  color: var(--ex-text-2) !important;
}

body.dashboard .btn-outline-danger {
  border-color: var(--ex-sell) !important;
  color: var(--ex-sell) !important;
}

body.dashboard .btn-outline-warning {
  border-color: var(--ex-yellow) !important;
  color: var(--ex-yellow) !important;
}

body.dashboard .btn-block {
  width: 100%;
  border-radius: 999px !important;
}

/* Ticket toggles */
body.dashboard .btn-group {
  background: var(--ex-midnight-3);
  border-radius: 999px;
  padding: 3px;
  border: 1px solid var(--ex-border);
}

body.dashboard .btn-group .btn {
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
}

/* ----- Tables ----- */
body.dashboard .table {
  color: var(--ex-text-2) !important;
  --bs-table-bg: transparent;
}

body.dashboard .table thead th {
  color: var(--ex-text-3) !important;
  border-bottom: 1px solid var(--ex-border) !important;
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: transparent !important;
}

body.dashboard .table td {
  border-top: 1px solid var(--ex-border) !important;
  vertical-align: middle;
  background: transparent !important;
}

body.dashboard .table-striped > tbody > tr:nth-of-type(odd) {
  background: rgba(255, 255, 255, 0.02) !important;
}

body.dashboard .table-striped > tbody > tr:nth-of-type(odd) > * {
  background: transparent !important;
  color: inherit !important;
  box-shadow: none !important;
}

body.dashboard .text-success {
  color: var(--ex-buy) !important;
}

body.dashboard .text-danger {
  color: var(--ex-sell) !important;
}

/* ----- Alerts ----- */
body.dashboard .alert-info {
  background: rgba(255, 222, 2, 0.08) !important;
  border: 1px solid rgba(255, 222, 2, 0.25) !important;
  color: var(--ex-yellow-soft) !important;
  border-radius: var(--ex-radius-sm) !important;
}

body.dashboard .alert-info code {
  color: var(--ex-yellow);
}

body.dashboard .alert-danger {
  background: rgba(234, 57, 67, 0.12) !important;
  border: 1px solid rgba(234, 57, 67, 0.35) !important;
  color: #ffb4b8 !important;
  border-radius: var(--ex-radius-sm) !important;
}

/* ----- Mock badge ----- */
.mt5-mock-badge {
  background: rgba(255, 222, 2, 0.12) !important;
  color: var(--ex-yellow) !important;
  border: 1px solid rgba(255, 222, 2, 0.3);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 600;
  margin-left: 8px;
}

/* ----- Chart card ----- */
body.dashboard .card .tradingview-widget-copyright,
body.dashboard .card iframe {
  border-radius: 0 0 var(--ex-radius) var(--ex-radius);
}

/* ----- Mobile bottom nav ----- */
@media (max-width: 991px) {
  .mobile-bottom-nav {
    background: var(--ex-midnight-2) !important;
    border-top: 1px solid var(--ex-border) !important;
  }

  .mobile-bottom-nav a {
    color: var(--ex-text-3) !important;
  }

  .mobile-bottom-nav a.active,
  .mobile-bottom-nav a:hover {
    color: var(--ex-yellow) !important;
  }

  body.dashboard .content-body {
    padding-bottom: 88px !important;
  }
}

/* ----- Content spacing like terminal ----- */
body.dashboard .content-body {
  padding-top: 24px !important;
}

body.dashboard .content-body .container-fluid {
  max-width: 1440px;
}

/* Quick action stack */
body.dashboard .d-grid .btn {
  margin-bottom: 8px;
}

/* Scrollbars */
body.dashboard ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
body.dashboard ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 8px;
}
body.dashboard ::-webkit-scrollbar-track {
  background: transparent;
}

/* ===== Light theme ===== */
body.dashboard[data-theme="light"] {
  --ex-midnight: #f4f6fa;
  --ex-midnight-2: #ffffff;
  --ex-midnight-3: #eef1f6;
  --ex-panel: #ffffff;
  --ex-panel-2: #ffffff;
  --ex-border: rgba(7, 14, 32, 0.08);
  --ex-border-strong: rgba(7, 14, 32, 0.14);
  --ex-text: #070e20;
  --ex-text-2: #3a4458;
  --ex-text-3: #7a849c;
  --ex-yellow-soft: #070e20;
}

body.dashboard[data-theme="light"] .alert-info {
  background: rgba(255, 222, 2, 0.25) !important;
  color: #070e20 !important;
}

body.dashboard[data-theme="light"] .sidebar .brand-logo a {
  background: var(--ex-yellow);
  color: #070e20 !important;
}

body.dashboard[data-theme="light"] .ex-brand {
  color: #070e20 !important;
}

/* ===== Theme toggle button ===== */
.ex-theme-toggle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--ex-border-strong);
  background: var(--ex-midnight-3);
  color: var(--ex-text-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  cursor: pointer;
}

.ex-theme-toggle:hover {
  border-color: var(--ex-yellow);
  color: var(--ex-yellow);
}

/* ===== Terminal layout ===== */
body.dashboard .content-body.ex-terminal {
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 70px);
}

.ex-terminal-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: var(--ex-midnight-2);
  border-bottom: 1px solid var(--ex-border);
}

.ex-terminal-toolbar__left,
.ex-terminal-toolbar__right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.ex-symbol-select {
  width: 140px !important;
  min-height: 38px !important;
  font-weight: 700 !important;
}

.ex-account-select {
  width: 200px !important;
  min-height: 38px !important;
}

.ex-quote {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 15px;
}

.ex-quote__bid {
  color: var(--ex-sell);
}

.ex-quote__ask {
  color: var(--ex-buy);
}

.ex-quote__sep {
  color: var(--ex-text-3);
  margin: 0 4px;
}

.ex-mini-stat {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.ex-mini-stat span {
  font-size: 11px;
  color: var(--ex-text-3);
}

.ex-mini-stat strong {
  font-size: 13px;
  color: var(--ex-text);
  font-weight: 600;
}

.ex-terminal-main {
  display: grid;
  grid-template-columns: 200px 1fr 320px;
  gap: 0;
  flex: 1;
  min-height: 480px;
  border-bottom: 1px solid var(--ex-border);
}

.ex-watchlist {
  border-right: 1px solid var(--ex-border);
  overflow-y: auto;
  max-height: 520px;
  background: rgba(0, 0, 0, 0.15);
}

.ex-watchlist__title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 10px 12px;
  opacity: 0.65;
  border-bottom: 1px solid var(--ex-border);
}

.ex-watchlist__row {
  display: flex;
  justify-content: space-between;
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  cursor: pointer;
}

.ex-watchlist__row span {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 11px;
  gap: 2px;
}

.ex-watchlist__row em {
  font-style: normal;
}

.ex-watchlist__row.active,
.ex-watchlist__row:hover {
  background: rgba(255, 222, 2, 0.08);
}

.ex-terminal-chart {
  background: var(--ex-midnight);
  min-height: 480px;
  border-right: 1px solid var(--ex-border);
}

.ex-terminal-ticket {
  background: var(--ex-panel);
  padding: 14px 16px 20px;
  display: flex;
  flex-direction: column;
}

.ex-ticket-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  background: var(--ex-midnight-3);
  padding: 4px;
  border-radius: 999px;
  margin-bottom: 14px;
  border: 1px solid var(--ex-border);
}

.ex-ticket-tabs button {
  border: 0;
  background: transparent;
  color: var(--ex-text-3);
  font-weight: 600;
  font-size: 13px;
  border-radius: 999px;
  padding: 8px 10px;
  cursor: pointer;
}

.ex-ticket-tabs button.active {
  background: var(--ex-yellow);
  color: #070e20;
}

.ex-side-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

.ex-side-toggle button {
  border-radius: 10px;
  border: 1px solid var(--ex-border-strong);
  background: transparent;
  padding: 12px 8px;
  font-weight: 700;
  cursor: pointer;
  color: var(--ex-text-2);
}

.ex-side-buy.active {
  background: rgba(22, 199, 132, 0.15);
  border-color: var(--ex-buy);
  color: var(--ex-buy);
}

.ex-side-sell.active {
  background: rgba(234, 57, 67, 0.15);
  border-color: var(--ex-sell);
  color: var(--ex-sell);
}

.ex-ticket-form .form-label {
  margin-top: 10px;
  margin-bottom: 4px;
  font-size: 12px;
}

.ex-ticket-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}

.ex-ticket-form .btn-block {
  margin-top: 8px;
}

.ex-terminal-bottom {
  background: var(--ex-panel);
  min-height: 200px;
}

.ex-bottom-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 12px 0;
  border-bottom: 1px solid var(--ex-border);
}

.ex-bottom-tabs button {
  border: 0;
  background: transparent;
  color: var(--ex-text-3);
  font-weight: 600;
  font-size: 13px;
  padding: 10px 14px;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

.ex-bottom-tabs button.active {
  color: var(--ex-text);
  border-bottom-color: var(--ex-yellow);
}

.ex-terminal-bottom .table-responsive {
  padding: 0 8px 12px;
}

@media (max-width: 991px) {
  .ex-terminal-main {
    grid-template-columns: 1fr;
  }

  .ex-watchlist {
    display: flex;
    overflow-x: auto;
    max-height: none;
    border-right: 0;
    border-bottom: 1px solid var(--ex-border);
  }

  .ex-watchlist__title {
    display: none;
  }

  .ex-watchlist__row {
    min-width: 110px;
    flex-direction: column;
    gap: 4px;
  }

  .ex-terminal-chart {
    border-right: 0;
    border-bottom: 1px solid var(--ex-border);
    min-height: 320px;
  }

  .ex-terminal-chart > div {
    height: 320px !important;
  }

  .ex-account-select {
    width: 140px !important;
  }

  body.dashboard .content-body.ex-terminal {
    padding-bottom: 72px !important;
  }
}

.ex-deposit-hint{font-size:11px;color:var(--ex-text-3);padding-bottom:6px;}