/* ====================================================================
   TOUCH-DEVICE FLICKER FIX (Android / phone)
   --------------------------------------------------------------------
   On touch devices a tap (a) flashes the default grey tap-highlight box
   and (b) fires :hover / :active transition repaints — both show up as
   flicker when tapping cards, buttons, nav items, calendar days, etc.
   Touch screens have NO real hover, so neutralising these removes nothing
   visually; it only stops the tap-time repaint. We also clear the
   permanent `will-change:transform` left on a few elements, which can
   cause continuous-compositing flicker on some Android GPUs (the GPU
   layer is still promoted via translateZ elsewhere).
   Scoped to (hover:none) + (pointer:coarse) so DESKTOP IS UNAFFECTED and
   no feature/visual is removed — state changes just apply instantly.
   ==================================================================== */
@media (hover: none) and (pointer: coarse) {
  * { -webkit-tap-highlight-color: transparent; }

  .nav-btn, .btn-primary, .btn-ghost, .btn-danger, .auth-btn, .logout-btn,
  .stat-card, .feature-card, .trade-detail-card, .cal-day, .cdp,
  .screenshot-link, .daily-todo-item, .checklist-item, .collapsible-header,
  .landing-btn-primary, .landing-btn-ghost, .landing-btn-primary-lg,
  .landing-btn-ghost-lg, .mt5-actions .btn-sync, .azhkar-trigger,
  .date-clickable, a {
    transition: none !important;
  }

  .sidebar, .modal-backdrop, .otp-modal, .main, .page {
    will-change: auto !important;
  }
}


/* ====================================================================
   DARK NATIVE FORM CONTROLS
   --------------------------------------------------------------------
   The <select> dropdowns (Session, Mood, Setup Grade…) and the date/time
   pickers were opening with a WHITE popup, because the browser renders
   native form UI in its default LIGHT scheme unless told otherwise.
   `color-scheme: dark` makes the browser paint those native popups (the
   options panel, calendar, clock, spinners) in dark mode, and styling the
   <option> rows guarantees dark rows with light text on every browser.
   Pure styling — no behaviour/feature change.
   ==================================================================== */
.form-select, .form-input, select,
input[type="date"], input[type="time"], input[type="datetime-local"] {
  color-scheme: dark;
}
/* Root-level dark scheme: the native dropdown popup paints its FIRST frame using
   the page/root color-scheme, so this (with the <meta name="color-scheme"> in
   <head>) is what removes the white blink before the dark list appears. */
:root, html, body, .modal, .modal-backdrop { color-scheme: dark; }
.form-select option, .form-select optgroup, select option {
  background-color: #131322;
  color: #e2e8f0;
}
/* Keep autofilled fields (e.g. a remembered Pair/Asset like "xauusd") on the
   dark theme instead of the browser's white/yellow autofill highlight. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: #e2e8f0 !important;
  -webkit-box-shadow: 0 0 0 1000px #0a0a12 inset !important;
  caret-color: #e2e8f0;
  transition: background-color 9999s ease-in-out 0s;
}
/* Day theme: keep autofilled fields (e.g. a remembered Pair/Asset like
   "xauusd") WHITE with dark text to match the rest of the light modal,
   instead of inheriting the dark-theme autofill box above. */
html[data-theme="daylight"] input:-webkit-autofill,
html[data-theme="daylight"] input:-webkit-autofill:hover,
html[data-theme="daylight"] input:-webkit-autofill:focus,
html[data-theme="daylight"] textarea:-webkit-autofill,
html[data-theme="daylight"] select:-webkit-autofill {
  -webkit-text-fill-color: #14161f !important;
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  caret-color: #14161f;
}


/* ====================================================================
   CUSTOM DROPDOWN (site-wide, v2) — 100% no native white flash
   --------------------------------------------------------------------
   The native <select> popup is drawn by the OS and flashed white for a
   frame before turning dark. To eliminate that entirely for the Log Trade
   fields, we hide the native <select> (kept in the DOM so its .value still
   drives all save/edit/validation logic untouched) and show this fully
   styled dark dropdown instead. No OS popup → no flash.
   ==================================================================== */
.cs-wrap{position:relative;width:100%}
.cs-display{width:100%;background:#0a0a12;border:1px solid #252539;border-radius:8px;padding:10px 14px;color:#e2e8f0;font-family:'Rubik',sans-serif;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px;-webkit-tap-highlight-color:transparent;user-select:none;line-height:1.3}
.cs-display:focus,.cs-display.open{outline:none;border-color:#7C5CFC}
.cs-display .cs-val{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-display.cs-placeholder .cs-val{color:#7c7c94}
.form-input[readonly]{cursor:not-allowed;opacity:.85}
.nav-btn.tc-nav-locked{opacity:.72}
.tc-nav-lock{margin-left:auto;font-size:11px;opacity:.65;flex-shrink:0}
.cs-display .cs-arrow{flex-shrink:0;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid #9090a8;transition:transform .18s}
.cs-display.open .cs-arrow{transform:rotate(180deg);border-top-color:#7C5CFC}
.cs-panel{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:60;background:#131322;border:1px solid #2a3850;border-radius:8px;max-height:240px;overflow-y:auto;display:none;box-shadow:0 12px 32px rgba(0,0,0,0.55);padding:4px}
.cs-panel.open{display:block}
/* When there isn't enough room below (field near the modal bottom), the
   panel opens UPWARD so its options never get clipped off the modal. */
.cs-panel.cs-up{top:auto;bottom:calc(100% + 4px)}
.cs-option{padding:9px 12px;border-radius:6px;color:#e2e8f0;cursor:pointer;font-family:'Rubik',sans-serif;font-size:14px;line-height:1.3;white-space:nowrap;-webkit-tap-highlight-color:transparent}
.cs-option:hover,.cs-option.cs-active{background:#1a1a2e}
.cs-option.cs-selected{color:#7C5CFC;font-weight:600}
.cs-option.cs-ph{color:#7c7c94}
.cs-option.cs-disabled{opacity:.45;cursor:not-allowed}