/* ── Modals (v4) ──────────────────────────────────────────────────────────
   One calm dialog look for every popup on dk-base tokens: dimmed + slightly
   blurred backdrop, solid surface card with a hairline border, header with
   a divider, dk fields and buttons (primary = accent fill, `ok` also acts as
   the confirming primary, `danger` = red text, `warn` = neutral).
   Families: generic `.modal` (> .modal-overlay + .modal-card), bank cards
   (.abc-modal*), requests/refunds (.ar-modal*), news (.lnn-modal*).
   The task center dialogs (#taskDetailModal, #tasksComposeModal) have their
   own design in tasks-v3.css and are excluded. `:not(#id)` also lifts the
   specificity above legacy `body.light-theme …` rules. */

/* ═══ generic .modal ═══════════════════════════════════════════════════ */
html body .modal:not(#taskDetailModal):not(#tasksComposeModal) .modal-overlay{
  background:rgba(15,23,42,.42) !important; backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
}
html[data-theme="dark"] body .modal:not(#taskDetailModal):not(#tasksComposeModal) .modal-overlay{ background:rgba(2,6,23,.62) !important; }
html body .modal:not(#taskDetailModal):not(#tasksComposeModal) .modal-card{
  border:1px solid var(--dk-border) !important; border-radius:16px !important;
  background:var(--dk-surface-solid) !important; background-image:none !important; color:var(--dk-text) !important;
  box-shadow:var(--dk-shadow-pop) !important; padding:20px 22px !important;
  max-height:calc(100vh - 48px); overflow:auto; scrollbar-width:thin;
}
html body .modal:not(#taskDetailModal):not(#tasksComposeModal) .modal-card::before,
html body .modal:not(#taskDetailModal):not(#tasksComposeModal) .modal-card::after{ content:none !important; }
/* header */
html body .modal:not(#taskDetailModal):not(#tasksComposeModal) .modal-card > .headRow{
  display:flex !important; align-items:center !important; justify-content:space-between !important; gap:10px !important;
  margin:0 0 16px !important; padding:0 0 12px !important; border:0 !important; border-bottom:1px solid var(--dk-border) !important; background:none !important;
}
html body .modal:not(#taskDetailModal):not(#tasksComposeModal) .modal-card > .headRow .label,
html body .modal:not(#taskDetailModal):not(#tasksComposeModal) :is(.modal-title,.sa-modal-title,.wsb-modal-title,.tp-modal-title){
  margin:0 !important; padding:0 !important; border:0 !important; font-size:16px !important; font-weight:800 !important; line-height:1.6 !important;
  color:var(--dk-text) !important; background:none !important; -webkit-text-fill-color:currentColor !important;
}
html body .modal:not(#taskDetailModal):not(#tasksComposeModal) :is(.modal-sub,.sa-modal-sub,.tp-modal-sub){ font-size:var(--dk-fs-sm) !important; color:var(--dk-muted) !important; line-height:1.8 !important; }
/* buttons */
html body .modal:not(#taskDetailModal):not(#tasksComposeModal) .modal-card .btn{
  display:inline-flex !important; align-items:center; justify-content:center; gap:6px;
  height:var(--dk-h) !important; min-height:0 !important; margin:0 !important; padding:0 14px !important; width:auto;
  border-radius:var(--dk-r) !important; border:1px solid var(--dk-border) !important;
  background:var(--dk-surface-solid) !important; background-image:none !important; color:var(--dk-text) !important;
  font:inherit !important; font-size:var(--dk-fs) !important; font-weight:700 !important; box-shadow:none !important; text-shadow:none !important; transform:none !important;
}
html body .modal:not(#taskDetailModal):not(#tasksComposeModal) .modal-card .btn:hover{ background:var(--dk-hover) !important; }
html body .modal:not(#taskDetailModal):not(#tasksComposeModal) .modal-card .btn:is(.pri,.ok){
  background:var(--dk-accent-fill) !important; border-color:transparent !important; color:var(--dk-on-accent) !important;
}
html body .modal:not(#taskDetailModal):not(#tasksComposeModal) .modal-card .btn:is(.pri,.ok):hover{ background:var(--dk-accent-fill) !important; filter:brightness(1.08); }
html body .modal:not(#taskDetailModal):not(#tasksComposeModal) .modal-card .btn.danger{ color:var(--dk-danger) !important; background:var(--dk-surface-solid) !important; border-color:color-mix(in srgb, var(--dk-danger) 30%, var(--dk-border)) !important; }
html body .modal:not(#taskDetailModal):not(#tasksComposeModal) .modal-card .btn.danger:hover{ background:var(--dk-danger-soft) !important; }
/* a red "بستن" in the header is just a close button → neutral */
html body .modal:not(#taskDetailModal):not(#tasksComposeModal) .modal-card > .headRow .btn.danger{ color:var(--dk-text) !important; border-color:var(--dk-border) !important; }
html body .modal:not(#taskDetailModal):not(#tasksComposeModal) .modal-card .btn:disabled{ opacity:.55 !important; cursor:not-allowed !important; filter:none !important; }
html body .modal:not(#taskDetailModal):not(#tasksComposeModal) .modal-card .actions{ display:flex !important; flex-wrap:wrap; gap:8px !important; }
/* fields */
html body .modal:not(#taskDetailModal):not(#tasksComposeModal) .modal-card :is(.field > label,.sa-label,.wsb-modal-label,.tp-label){
  font-size:var(--dk-fs-sm) !important; font-weight:700 !important; color:var(--dk-muted) !important; letter-spacing:0 !important; text-transform:none !important;
}
html body .modal:not(#taskDetailModal):not(#tasksComposeModal) .modal-card :is(input[type="text"],input[type="search"],input[type="number"],input[type="url"],input[type="email"],input[type="tel"],input[type="password"],input[type="date"],input[type="datetime-local"],input:not([type]),select,textarea,.es-combo-trigger){
  min-height:var(--dk-h-lg) !important; margin:0 !important;
  border-radius:var(--dk-r) !important; border:1px solid var(--dk-border) !important;
  background:var(--dk-surface-2) !important; background-image:none !important; color:var(--dk-text) !important;
  font:inherit !important; font-size:var(--dk-fs) !important; box-shadow:none !important;
}
html[data-theme="dark"] body .modal:not(#taskDetailModal):not(#tasksComposeModal) .modal-card :is(input[type="text"],input[type="search"],input[type="number"],input[type="url"],input[type="email"],input[type="tel"],input[type="password"],input[type="date"],input[type="datetime-local"],input:not([type]),select,textarea,.es-combo-trigger){
  background:rgba(15,23,42,.45) !important;
}
html body .modal:not(#taskDetailModal):not(#tasksComposeModal) .modal-card textarea{ line-height:1.8 !important; padding:10px 12px !important; }
html body .modal:not(#taskDetailModal):not(#tasksComposeModal) .modal-card :is(input,select,textarea):focus{ outline:none !important; border-color:var(--dk-accent) !important; box-shadow:var(--dk-focus) !important; }
html body .modal:not(#taskDetailModal):not(#tasksComposeModal) .modal-card ::placeholder{ color:var(--dk-faint) !important; opacity:1; }
html body .modal:not(#taskDetailModal):not(#tasksComposeModal) .modal-card .hint{ font-size:12.5px !important; color:var(--dk-muted) !important; }
html body .modal:not(#taskDetailModal):not(#tasksComposeModal) .modal-card :is(.iv-table,table){ border-collapse:collapse; }
html body .modal:not(#taskDetailModal):not(#tasksComposeModal) .modal-card :is(.iv-table,table) th{ background:var(--dk-surface-2) !important; color:var(--dk-muted) !important; font-size:12px !important; font-weight:700 !important; border-color:var(--dk-border) !important; }
html body .modal:not(#taskDetailModal):not(#tasksComposeModal) .modal-card :is(.iv-table,table) td{ color:var(--dk-text) !important; font-size:13px !important; border-color:var(--dk-border) !important; background:none !important; }
/* small icon close buttons used by several dialogs */
html body .modal:not(#taskDetailModal):not(#tasksComposeModal) :is(.sa-modal-close,.tp-modal-x,.wsb-modal-close,.evm-close,.modal-close-x){
  width:34px !important; height:34px !important; min-width:0 !important; padding:0 !important; display:inline-grid !important; place-items:center;
  border-radius:var(--dk-r-sm) !important; border:1px solid var(--dk-border) !important; background:var(--dk-surface-solid) !important; color:var(--dk-muted) !important; box-shadow:none !important;
}

/* ═══ bank cards (.abc-modal) ══════════════════════════════════════════ */
html body .abc-modal-overlay{ background:rgba(15,23,42,.42) !important; backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
html[data-theme="dark"] body .abc-modal-overlay{ background:rgba(2,6,23,.62) !important; }
html body .abc-modal-overlay .abc-modal{
  border:1px solid var(--dk-border) !important; border-radius:16px !important; background:var(--dk-surface-solid) !important; background-image:none !important;
  color:var(--dk-text) !important; box-shadow:var(--dk-shadow-pop) !important;
}
html body .abc-modal-overlay .abc-modal-head{ padding:16px 20px !important; border-bottom:1px solid var(--dk-border) !important; background:none !important; font-size:16px !important; font-weight:800 !important; color:var(--dk-text) !important; }
html body .abc-modal-overlay .abc-modal-x{ width:34px !important; height:34px !important; display:inline-grid !important; place-items:center; border-radius:var(--dk-r-sm) !important; border:1px solid var(--dk-border) !important; background:var(--dk-surface-solid) !important; color:var(--dk-muted) !important; box-shadow:none !important; }
html body .abc-modal-overlay .abc-modal-body{ padding:16px 20px !important; }
html body .abc-modal-overlay .abc-modal-foot{ padding:14px 20px !important; border-top:1px solid var(--dk-border) !important; background:none !important; gap:8px !important; }
html body .abc-modal-overlay :is(.abc-lbl,.abc-section-label){ font-size:var(--dk-fs-sm) !important; font-weight:700 !important; color:var(--dk-muted) !important; letter-spacing:0 !important; text-transform:none !important; }
html body .abc-modal-overlay .abc-section-label{ font-size:13.5px !important; font-weight:800 !important; color:var(--dk-text) !important; }
html body .abc-modal-overlay :is(input,select,textarea,.es-combo-trigger){
  min-height:var(--dk-h-lg) !important; border-radius:var(--dk-r) !important; border:1px solid var(--dk-border) !important; background:var(--dk-surface-2) !important;
  color:var(--dk-text) !important; box-shadow:none !important; font:inherit !important; font-size:var(--dk-fs) !important;
}
html[data-theme="dark"] body .abc-modal-overlay :is(input,select,textarea,.es-combo-trigger){ background:rgba(15,23,42,.45) !important; }
html body .abc-modal-overlay :is(input,select,textarea):focus{ outline:none !important; border-color:var(--dk-accent) !important; box-shadow:var(--dk-focus) !important; }
html body .abc-modal-overlay .abc-seg{ display:inline-flex !important; gap:2px !important; padding:3px !important; border-radius:11px !important; background:var(--dk-chip) !important; border:1px solid var(--dk-border) !important; width:auto !important; }
html body .abc-modal-overlay .abc-seg-btn{ height:32px !important; padding:0 14px !important; border:0 !important; border-radius:8px !important; background:transparent !important; color:var(--dk-muted) !important; box-shadow:none !important; font:inherit !important; font-size:13px !important; font-weight:700 !important; flex:0 0 auto !important; }
html body .abc-modal-overlay .abc-seg-btn.is-on{ background:var(--dk-surface-solid) !important; color:var(--dk-text) !important; box-shadow:0 1px 2px rgba(15,23,42,.08) !important; }
html body .abc-modal-overlay :is(.abc-btn-pri,.abc-btn-ghost){
  height:var(--dk-h) !important; padding:0 16px !important; border-radius:var(--dk-r) !important; font:inherit !important; font-size:var(--dk-fs) !important; font-weight:700 !important; box-shadow:none !important;
  border:1px solid var(--dk-border) !important; background:var(--dk-surface-solid) !important; color:var(--dk-text) !important;
}
html body .abc-modal-overlay .abc-btn-pri{ background:var(--dk-accent-fill) !important; border-color:transparent !important; color:var(--dk-on-accent) !important; }

/* ═══ requests / refunds (.ar-modal) ═══════════════════════════════════ */
html body .ar-modal-overlay{ background:rgba(15,23,42,.42) !important; backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
html[data-theme="dark"] body .ar-modal-overlay{ background:rgba(2,6,23,.62) !important; }
html body .ar-modal-overlay .ar-modal{
  border:1px solid var(--dk-border) !important; border-radius:16px !important; background:var(--dk-surface-solid) !important; background-image:none !important;
  color:var(--dk-text) !important; box-shadow:var(--dk-shadow-pop) !important;
}
html body .ar-modal-overlay .ar-modal-head{ padding:16px 20px !important; border-bottom:1px solid var(--dk-border) !important; background:none !important; }
html body .ar-modal-overlay .ar-modal-title{ font-size:16px !important; font-weight:800 !important; color:var(--dk-text) !important; }
html body .ar-modal-overlay .ar-modal-close{ width:34px !important; height:34px !important; display:inline-grid !important; place-items:center; border-radius:var(--dk-r-sm) !important; border:1px solid var(--dk-border) !important; background:var(--dk-surface-solid) !important; color:var(--dk-muted) !important; box-shadow:none !important; }
html body .ar-modal-overlay .ar-modal-body{ padding:16px 20px !important; }
html body .ar-modal-overlay .ar-mlabel{ font-size:var(--dk-fs-sm) !important; font-weight:700 !important; color:var(--dk-muted) !important; }
html body .ar-modal-overlay :is(input,select,textarea,.es-combo-trigger){
  min-height:var(--dk-h-lg) !important; border-radius:var(--dk-r) !important; border:1px solid var(--dk-border) !important; background:var(--dk-surface-2) !important;
  color:var(--dk-text) !important; box-shadow:none !important; font:inherit !important; font-size:var(--dk-fs) !important;
}
html[data-theme="dark"] body .ar-modal-overlay :is(input,select,textarea,.es-combo-trigger){ background:rgba(15,23,42,.45) !important; }
html body .ar-modal-overlay :is(input,select,textarea):focus{ outline:none !important; border-color:var(--dk-accent) !important; box-shadow:var(--dk-focus) !important; }
html body .ar-modal-overlay .ar-modal-foot{ padding:14px 20px !important; border-top:1px solid var(--dk-border) !important; background:none !important; gap:8px !important; }
html body .ar-modal-overlay :is(.ar-modal-submit,.ar-modal-cancel){
  height:var(--dk-h) !important; padding:0 16px !important; border-radius:var(--dk-r) !important; font:inherit !important; font-size:var(--dk-fs) !important; font-weight:700 !important; box-shadow:none !important;
  border:1px solid var(--dk-border) !important; background:var(--dk-surface-solid) !important; color:var(--dk-text) !important;
}
html body .ar-modal-overlay .ar-modal-submit{ background:var(--dk-accent-fill) !important; border-color:transparent !important; color:var(--dk-on-accent) !important; }

/* ═══ news article (.lnn-modal) ════════════════════════════════════════ */
html body .lnn-modal .lnn-modal-overlay{ background:rgba(15,23,42,.42) !important; backdrop-filter:blur(3px); }
html body .lnn-modal .lnn-modal-card{ border:1px solid var(--dk-border) !important; border-radius:16px !important; background:var(--dk-surface-solid) !important; background-image:none !important; color:var(--dk-text) !important; box-shadow:var(--dk-shadow-pop) !important; }
html body .lnn-modal .lnn-modal-header{ border-bottom:1px solid var(--dk-border) !important; background:none !important; }
html body .lnn-modal .lnn-modal-badge{ height:22px; padding:0 8px !important; border-radius:6px !important; background:var(--dk-chip) !important; color:var(--dk-muted) !important; font-size:11.5px !important; font-weight:700 !important; border:0 !important; }
html body .lnn-modal :is(.lnn-modal-summary,.lnn-modal-fulltext){ font-size:14.5px !important; line-height:2 !important; color:var(--dk-text) !important; }
html body .lnn-modal .btn{ height:var(--dk-h) !important; padding:0 14px !important; border-radius:var(--dk-r) !important; border:1px solid var(--dk-border) !important; background:var(--dk-surface-solid) !important; color:var(--dk-text) !important; box-shadow:none !important; font-weight:700 !important; }
html body .lnn-modal .lnn-modal-close{ width:34px !important; height:34px !important; border-radius:var(--dk-r-sm) !important; border:1px solid var(--dk-border) !important; background:var(--dk-surface-solid) !important; color:var(--dk-muted) !important; box-shadow:none !important; }

@media (prefers-reduced-motion:reduce){ html body :is(.modal-overlay,.abc-modal-overlay,.ar-modal-overlay){ backdrop-filter:none !important; } }
/* the reject dialog's submit is destructive → red */
html body .ar-modal-overlay .ar-modal-submit.rr-btn-danger{ background:var(--dk-danger-mark) !important; color:#fff !important; }
html[data-theme="dark"] body .ar-modal-overlay .ar-modal-submit.rr-btn-danger{ background:#b91c1c !important; }
/* icon close buttons everywhere (✕ glyphs became stroke icons) */
html body [data-dk-ic="x"]{ display:inline-flex; }
html body :is(.modal,.abc-modal-overlay,.ar-modal-overlay,.lnn-modal) [data-dk-ic="x"] .dk-ic{ width:16px; height:16px; }
html body .refund-method-pick .rr-method-ico, html body .rr-method-ico{ display:inline-flex; }

/* ── contrast fixes found by the modal audit ─────────────────────────── */
/* confirm dialog title used --surface-1 as text colour (invisible in dark) */
html body #confirmModal .confirm-title{ color:var(--dk-text)!important; font-size:18px!important; font-weight:800!important; }
/* product-links modal: free-plans toggle row + icon.horse note had near-black gradients */
html body #linksModal .links-check-row{ background:var(--dk-surface-2)!important; border:1px solid var(--dk-border)!important; color:var(--dk-text)!important; }
html body #linksModal .links-check-row *{ color:inherit; }
html body #linksModal .links-icon-note{ background:var(--dk-info-soft)!important; border:1px solid var(--dk-border)!important; box-shadow:none!important; }
html body #linksModal .links-icon-note-text{ color:var(--dk-text)!important; }
html body #linksModal .links-icon-note-badge{ background:var(--dk-accent-soft)!important; color:var(--dk-accent)!important; }
html body #linksModal .links-icon-note-brand{ color:var(--dk-accent)!important; }
/* bulk-paste mode switch: accent fill instead of pale green under white text */
html body #inventoryVaultPasteModal .iv-paste-mode-btn.is-active{ background:var(--dk-accent-fill)!important; color:#fff!important; box-shadow:none!important; }
/* bump dialog: icon tile holds an svg now */
html body #tasksBumpModal .tasks-bump-icon{ display:grid!important; place-items:center!important; color:var(--dk-warn)!important; }
html body #tasksBumpModal .tasks-bump-icon .dk-ic,html body #tasksBumpModal .tasks-bump-icon svg{ width:26px!important; height:26px!important; }
html body #linksModal .links-section-field,
html body #linksModal .field.links-icon-field,
html body #linksModal .links-section-field + .field,
html body #linksModal :is(.links-section-field,.links-nested-field) input[type="file"]{ background:var(--dk-surface-2)!important; border-color:var(--dk-border)!important; }
/* "(optional)" hints were too faint */
html body .modal :is(.tasks-bump-optional,.sp-return-optional,.iv-edit-product-optional){ color:var(--dk-muted)!important; }
/* event/challenge list editors: add-button text a touch brighter in dark */
html[data-theme="dark"] body .modal .evm-add-btn,html[data-theme="dark"] body .modal .evm-add-btn *{ color:var(--dk-accent)!important; }
html[data-theme="dark"] body #smartToolConfigModal .gtitle{ color:var(--dk-text)!important; }
html[data-theme="dark"] body #refundRequestModal .rr-method-txt{ color:var(--dk-text)!important; }
html body #tasksConfirmModal .task-btn-danger{ background:#dc2626!important; border-color:#dc2626!important; color:#fff!important; }
html body #inventoryBulkBreakModal .iv-bulkbreak-export-btn, html body #inventoryBulkBreakModal .iv-bulkbreak-export-btn *{ color:var(--dk-accent) !important; }

/* refund modal: three settlement types (bank · wallet · withdraw) */
html body #refundRequestModal .rr-method{ grid-template-columns:repeat(3, minmax(0,1fr)) !important; }
@media (max-width:520px){
  html body #refundRequestModal .rr-method-btn{ flex-direction:column; gap:2px; padding:6px 4px !important; }
  html body #refundRequestModal .rr-method-txt{ white-space:normal; text-align:center; line-height:1.4; }
}
/* a row whose partner field is hidden for this method spans the full width */
html body #refundRequestModal .rr-mrow:has(> .ar-mfield.hidden){ grid-template-columns:minmax(0,1fr) !important; }
html body #refundRequestModal .rr-method-btn.is-active{
  background:var(--dk-accent-soft) !important; color:var(--dk-accent) !important; border-color:var(--dk-accent) !important;
}
html body #refundRequestModal .rr-method-btn .dk-ic{ width:16px; height:16px; }
/* two fields in a row: if one label wraps, keep the inputs on one line */
html body #refundRequestModal .rr-mrow{ align-items:end !important; }
html body .abc-modal-overlay .abc-req{ color:var(--dk-danger) !important; }