/* =====================================================================
   Shared custom alert/confirm modal styling (agentappnew/script/util.js:
   showCustomAlert/showCustomConfirm). Single source of truth for both
   agentappnew's own pages and every 1021/ component - moved here from
   1021/common/css/NewDhanStyles.css so both areas share one stylesheet
   instead of two. Self-contained: no dependency on common.css's :root
   vars or on .btn-primary/.btn-secondary, so it's safe to load on its
   own without pulling in common.css's global html/body rules.
   ===================================================================== */

/* showCustomAlert's JS sets header background via var(--bd) directly (inline style) for the
   'info' alert type - declared here so that works even on pages (main.vm) that don't load
   agentappnew/css/common.css. Same value as common.css's own --bd, so no conflict on pages
   that load both. */
:root { --bd: #cd531b; }
[data-theme="dark"] { --bd: #e2703f; }

.custom-modal-overlay {
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(2px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  animation: customModalFadeIn 0.15s ease-out;
}
.custom-modal-overlay.show { display: flex; }
.custom-modal-box {
  background: #fef9f5;
  border: 2px solid #cd531b;
  border-radius: 8px;
  width: 380px;
  max-width: 90%;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  animation: customModalScaleUp 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
  font-family: 'Segoe UI', system-ui, sans-serif;
}
.custom-modal-header {
  background: #cd531b;
  color: #fff;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 0.15s;
}
.custom-modal-header h4 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}
.custom-modal-icon {
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  color: #fff;
}
.custom-modal-body {
  padding: 16px 20px;
  font-size: 11.5px;
  color: #4b463f;
  line-height: 1.5;
  background: #fef9f5;
}
.custom-modal-footer {
  padding: 10px 14px;
  border-top: 1px solid #f3cb8e;
  display: flex;
  justify-content: flex-end;
  background: #ede7d3;
}
.custom-modal-btn {
  background: #cd531b;
  color: #fff;
  border: none;
  padding: 5px 16px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.custom-modal-btn:hover { background: #a8420f; }

@keyframes customModalFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes customModalScaleUp { from { transform: scale(0.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.dhan-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  backdrop-filter: blur(1.5px);
}
.dhan-modal-box {
  background: #fff;
  border-radius: 8px;
  width: 320px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.2);
  overflow: hidden;
  font-family: 'Segoe UI', system-ui, sans-serif;
  animation: dhanFadeIn 0.15s ease-out;
}
.dhan-modal-header {
  background: #ede7d3;
  padding: 10px 14px;
  font-weight: 600;
  font-size: 12.5px;
  color: #3D1F0F;
  border-bottom: 1px solid #e1dbcd;
}
.dhan-modal-body {
  padding: 18px 14px;
  font-size: 11.5px;
  color: #2c3e50;
  line-height: 1.45;
}
.dhan-modal-footer {
  padding: 9px 14px;
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid #f1ece2;
  background: #fdfcf9;
}
.dhan-confirm-btn-yes {
  background: #cd531b; color: #fff; border: none; padding: 4px 14px; border-radius: 4px;
  font-size: 11px; font-weight: 600; cursor: pointer; transition: background 0.15s;
}
.dhan-confirm-btn-yes:hover { background: #a8420f; }
.dhan-confirm-btn-no {
  background: #e1e8ed; color: #2c3e50; border: 1px solid #ccd6dd; padding: 4px 14px;
  border-radius: 4px; font-size: 11px; font-weight: 600; cursor: pointer; margin-left: 8px;
  transition: background 0.15s;
}
.dhan-confirm-btn-no:hover { background: #d4dce1; }
@keyframes dhanFadeIn {
  from { transform: scale(0.96); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* Dark mode - kept self-contained (literal hex, not var()) deliberately, matching this
   file's existing independence from common.css noted in the header comment above, so
   these modals still theme correctly on pages that never load common.css. */
[data-theme="dark"] .custom-modal-box { background: #2b2520; border-color: #e2703f; }
[data-theme="dark"] .custom-modal-header,
[data-theme="dark"] .custom-modal-header h4,
[data-theme="dark"] .custom-modal-icon { background: #e2703f; color: #fff; }
[data-theme="dark"] .custom-modal-body { color: #f2e9dd; background: #2b2520; }
[data-theme="dark"] .custom-modal-footer { background: #1f1b16; border-top-color: #4a4038; }
[data-theme="dark"] .custom-modal-btn { background: #e2703f; color: #fff; }
[data-theme="dark"] .custom-modal-btn:hover { background: #c9602f; }

[data-theme="dark"] .dhan-modal-box { background: #2b2520; }
[data-theme="dark"] .dhan-modal-header { background: #1f1b16; color: #f2e9dd; border-bottom-color: #4a4038; }
[data-theme="dark"] .dhan-modal-body { color: #f2e9dd; }
[data-theme="dark"] .dhan-modal-footer { background: #2b2520; border-top-color: #4a4038; }
[data-theme="dark"] .dhan-confirm-btn-yes { background: #e2703f; color: #fff; }
[data-theme="dark"] .dhan-confirm-btn-yes:hover { background: #c9602f; }
[data-theme="dark"] .dhan-confirm-btn-no { background: #4a4038; color: #f2e9dd; border-color: #5a4f45; }
[data-theme="dark"] .dhan-confirm-btn-no:hover { background: #5a4f45; }