/* Theme Forms — Dark mode overrides for Bootstrap form-control, justFormsPro
   (j-pro), modals, and Bootstrap alerts. Light mode uses original CSS. */

[data-theme="dark"] {
  /* ---------- Bootstrap form-control ---------- */
  .form-control {
    background-color: var(--bg-elevated);
    border-color: var(--border-subtle);
    color: var(--text-primary);
  }
  .form-control:focus {
    background-color: var(--bg-elevated);
    border-color: var(--accent-primary);
    color: var(--text-primary);
    box-shadow: 0 0 0 0.15rem rgba(88, 166, 255, 0.25);
  }
  .form-control::placeholder {
    color: var(--text-muted);
    opacity: 1;
  }
  .form-control:disabled,
  .form-control[readonly] {
    background-color: var(--bg-base);
    color: var(--text-secondary);
    border-color: var(--border-subtle);
  }

  /* form-group labels — see also the bare-element rule below the nesting
     block. CSS Nesting Level 1 drops rules whose selector starts with a
     bare element name, so `label { ... }` inside this block would be
     dropped — we move it out to the top level just below. */
  .form-group label,
  .form-row label {
    color: var(--text-primary);
  }

  /* ---------- justFormsPro (.j-pro) ---------- */
  .j-pro {
    background-color: var(--bg-card);
    color: var(--text-secondary);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45);
  }
  /* Restore the BUY/SELL intent glow on #placeOrderForm — the .j-pro rule
     above otherwise wins on specificity (0,1,1 vs 0,1,0) over .shadow-buy
     / .shadow-sell defined in app.css. */
  .j-pro.shadow-buy {
    box-shadow: 0 0 12px 3px rgba(63, 185, 80, 0.7);
  }
  .j-pro.shadow-sell {
    box-shadow: 0 0 12px 3px rgba(248, 81, 73, 0.7);
  }
  .j-pro .j-label {
    color: var(--text-primary);
  }
  .j-pro input[type="text"],
  .j-pro input[type="password"],
  .j-pro input[type="email"],
  .j-pro input[type="search"],
  .j-pro input[type="url"],
  .j-pro input[type="number"],
  .j-pro textarea,
  .j-pro select {
    background: var(--bg-elevated);
    border-color: var(--border-subtle);
    color: var(--text-primary);
  }
  .j-pro input[type="text"]:hover,
  .j-pro input[type="password"]:hover,
  .j-pro input[type="email"]:hover,
  .j-pro input[type="search"]:hover,
  .j-pro input[type="url"]:hover,
  .j-pro input[type="number"]:hover,
  .j-pro textarea:hover,
  .j-pro select:hover {
    border-color: var(--border-strong);
  }
  .j-pro input[type="text"]:focus,
  .j-pro input[type="password"]:focus,
  .j-pro input[type="email"]:focus,
  .j-pro input[type="search"]:focus,
  .j-pro input[type="url"]:focus,
  .j-pro input[type="number"]:focus,
  .j-pro textarea:focus,
  .j-pro select:focus {
    border-color: var(--accent-primary);
  }
  .j-pro input::-webkit-input-placeholder,
  .j-pro textarea::-webkit-input-placeholder {
    color: var(--text-muted);
  }
  .j-pro input::placeholder,
  .j-pro textarea::placeholder {
    color: var(--text-muted);
  }
  .j-pro input:disabled,
  .j-pro input[readonly],
  .j-pro select:disabled,
  .j-pro textarea:disabled {
    background: var(--bg-base);
    color: var(--text-secondary);
  }
  .j-pro .j-footer {
    background-color: var(--bg-elevated);
    border-top-color: var(--border-subtle);
  }
  .j-pro .j-icon-right {
    color: var(--text-muted);
    border-left-color: var(--border-subtle);
  }
  .j-pro .j-link {
    color: var(--accent-primary);
    border-bottom-color: var(--accent-primary);
  }
  .j-pro .j-divider,
  .j-pro .j-divider-text {
    border-top-color: var(--border-subtle);
  }
  .j-pro .j-divider-text span {
    background-color: var(--bg-card);
    color: var(--accent-primary);
    border-color: var(--border-subtle);
  }

  /* ---------- j-pro validation states (success/error/warning) ----------
     justFormsPro's j-pro-modern.css forces #e8f5e9 / #ffebee / #fff8e1
     backgrounds on validated inputs with !important. On dark mode those
     light tints swallow the light text. Replace with subtle accent-tinted
     backgrounds that match Bootstrap alerts, keep text readable. */
  .j-pro .j-success-view input,
  .j-pro .j-success-view select,
  .j-pro .j-success-view textarea {
    background: rgba(63, 185, 80, 0.12) !important;
    color: var(--text-primary);
    border-color: rgba(63, 185, 80, 0.45);
  }
  .j-pro .j-error-view input,
  .j-pro .j-error-view select,
  .j-pro .j-error-view textarea {
    background: rgba(248, 81, 73, 0.12) !important;
    color: var(--text-primary);
    border-color: rgba(248, 81, 73, 0.45);
  }
  .j-pro .j-warning-view input,
  .j-pro .j-warning-view select,
  .j-pro .j-warning-view textarea {
    background: rgba(210, 153, 34, 0.12) !important;
    color: var(--text-primary);
    border-color: rgba(210, 153, 34, 0.45);
  }

  /* ---------- Bootstrap modal ---------- */
  .modal-content {
    background-color: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--border-subtle);
  }
  .modal-header,
  .modal-footer {
    border-color: var(--border-subtle);
  }
  .modal-title {
    color: var(--text-primary);
  }
  .modal-header .close,
  .modal-header .close span {
    color: var(--text-primary);
    text-shadow: none;
    opacity: 0.7;
  }
  .modal-header .close:hover {
    color: var(--text-primary);
    opacity: 1;
  }
  .modal-backdrop.show {
    opacity: 0.7;
  }

  /* Buttons inside dark modals — secondary stays muted, primary keeps accent */
  .modal-content .btn-secondary {
    background-color: var(--bg-elevated);
    border-color: var(--border-strong);
    color: var(--text-primary);
  }
  .modal-content .btn-secondary:hover {
    background-color: var(--row-hover);
    border-color: var(--border-strong);
  }

  /* P4.2 — BUY/SELL trading-intent buttons. Re-tint Bootstrap
     .btn-success / .btn-danger to PnL accent tokens at the three
     trading-intent sites only (Trade-tab submit, Adjust Holdings
     BUY/SELL, MarketWatch2 per-card Buy/Sell). Other .btn-success /
     .btn-danger uses (Save/Delete/Approve/etc.) keep Bootstrap defaults. */
  #placeOrderButton.btn-success,
  #buyHoldingsSubmit.btn-success,
  .mw2-actions .btn.btn-success[data-action="BUY"] {
    background-color: var(--accent-pnl-pos);
    border-color: var(--accent-pnl-pos);
    color: #0e1116;
  }
  #placeOrderButton.btn-success:hover,
  #placeOrderButton.btn-success:focus,
  #placeOrderButton.btn-success:not(:disabled):not(.disabled):active,
  #buyHoldingsSubmit.btn-success:hover,
  #buyHoldingsSubmit.btn-success:focus,
  #buyHoldingsSubmit.btn-success:not(:disabled):not(.disabled):active,
  .mw2-actions .btn.btn-success[data-action="BUY"]:hover,
  .mw2-actions .btn.btn-success[data-action="BUY"]:focus,
  .mw2-actions .btn.btn-success[data-action="BUY"]:not(:disabled):not(.disabled):active {
    background-color: #4ac866;
    border-color: #4ac866;
    color: #0e1116;
  }
  #placeOrderButton.btn-danger,
  #sellHoldingsSubmit.btn-danger,
  .mw2-actions .btn.btn-danger[data-action="SELL"] {
    background-color: var(--accent-pnl-neg);
    border-color: var(--accent-pnl-neg);
    color: #ffffff;
  }
  #placeOrderButton.btn-danger:hover,
  #placeOrderButton.btn-danger:focus,
  #placeOrderButton.btn-danger:not(:disabled):not(.disabled):active,
  #sellHoldingsSubmit.btn-danger:hover,
  #sellHoldingsSubmit.btn-danger:focus,
  #sellHoldingsSubmit.btn-danger:not(:disabled):not(.disabled):active,
  .mw2-actions .btn.btn-danger[data-action="SELL"]:hover,
  .mw2-actions .btn.btn-danger[data-action="SELL"]:focus,
  .mw2-actions .btn.btn-danger[data-action="SELL"]:not(:disabled):not(.disabled):active {
    background-color: #ff6660;
    border-color: #ff6660;
    color: #ffffff;
  }

  /* ---------- Bootstrap alerts ---------- */
  .alert {
    border-color: var(--border-subtle);
  }
  .alert-primary {
    background-color: rgba(88, 166, 255, 0.12);
    border-color: rgba(88, 166, 255, 0.35);
    color: var(--accent-primary);
  }
  .alert-info {
    background-color: rgba(121, 192, 255, 0.12);
    border-color: rgba(121, 192, 255, 0.35);
    color: var(--accent-info);
  }
  .alert-success {
    background-color: rgba(63, 185, 80, 0.12);
    border-color: rgba(63, 185, 80, 0.35);
    color: var(--accent-success);
  }
  .alert-warning {
    background-color: rgba(210, 153, 34, 0.12);
    border-color: rgba(210, 153, 34, 0.35);
    color: var(--accent-warning);
  }
  .alert-danger {
    background-color: rgba(248, 81, 73, 0.12);
    border-color: rgba(248, 81, 73, 0.35);
    color: var(--accent-danger);
  }
  .alert b,
  .alert strong {
    color: inherit;
  }
  .alert a {
    color: inherit;
    text-decoration: underline;
  }

  /* ---------- Select2 (used for #account, #placeAccounts, etc.) ---------- */
  .select2-container--default .select2-selection--single,
  .select2-container--default .select2-selection--multiple {
    background-color: var(--bg-elevated);
    border-color: var(--border-subtle);
    color: var(--text-primary);
  }
  .select2-container--default .select2-selection--single
    .select2-selection__rendered,
  .select2-container--default .select2-selection--multiple
    .select2-selection__rendered {
    color: var(--text-primary);
  }
  .select2-container--default .select2-selection--single
    .select2-selection__placeholder {
    color: var(--text-muted);
  }
  .select2-container--default .select2-selection--multiple
    .select2-selection__choice {
    background-color: var(--bg-base);
    border-color: var(--border-strong);
    color: var(--text-primary);
  }
  .select2-dropdown {
    background-color: var(--bg-elevated);
    border-color: var(--border-subtle);
    color: var(--text-primary);
  }
  .select2-container--default .select2-results__option--highlighted[aria-selected],
  .select2-container--default
    .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--accent-primary);
    color: var(--text-inverse);
  }
  .select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: var(--bg-base);
  }
  .select2-search--dropdown .select2-search__field {
    background-color: var(--bg-base);
    border-color: var(--border-subtle);
    color: var(--text-primary);
  }

  /* ---------- Switchery (.js-switch) ----------
     Switchery sets background-color / border-color / box-shadow inline via
     JS (color hardcoded to '#4680ff' in switches.js), so CSS needs !important
     to override. .js-switch + .switchery is the sibling Switchery inserts
     right after each <input class="js-switch"> (see Switchery.show / insertAfter).
     Used in: Trade tab (Group Acc / Diff Qty / Multiplier), Settings
     (pseudo-account, master-account), Square-off modal. */
  .js-switch + .switchery {
    background-color: var(--bg-elevated) !important;
    border-color: var(--border-strong) !important;
    box-shadow: inset 0 0 0 0 var(--border-strong) !important;
  }
  .js-switch:checked + .switchery {
    background-color: var(--accent-primary) !important;
    border-color: var(--accent-primary) !important;
    box-shadow: inset 0 0 0 30px var(--accent-primary) !important;
  }
  .js-switch + .switchery > small {
    background-color: var(--text-primary) !important;
  }
}

/* Bare-element selectors that CSS Nesting Level 1 disallows inside a
   nested block — kept here at the top level so the parser actually
   applies them. */
[data-theme="dark"] label {
  color: var(--text-primary);
}