/* ═══════════════════════════════════════════════════════════════════════════
   TradeForge Platform — Workflow Execution Engine Styles
   Mobile-first modal system for action-triggering workflows.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Modal Overlay ── */
.wf-modal-overlay{
  position:fixed;inset:0;z-index:9000;
  display:flex;align-items:flex-end;justify-content:center;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  opacity:0;
  transition:opacity .24s ease;
  padding:0;
}
.wf-modal-overlay.wf-modal--open{
  opacity:1;
}
@media(min-width:520px){
  .wf-modal-overlay{
    align-items:center;
    padding:24px;
  }
}

/* ── Modal Container ── */
.wf-modal{
  width:100%;max-width:480px;
  max-height:92vh;
  overflow-y:auto;
  background:linear-gradient(180deg,rgba(46,49,54,.98),rgba(30,32,35,.96));
  border:1px solid rgba(181,183,185,.12);
  border-radius:20px 20px 0 0;
  box-shadow:0 -8px 40px rgba(0,0,0,.4);
  transform:translateY(40px);
  transition:transform .28s cubic-bezier(.22,1,.36,1);
}
.wf-modal-overlay.wf-modal--open .wf-modal{
  transform:translateY(0);
}
@media(min-width:520px){
  .wf-modal{
    border-radius:18px;
    box-shadow:0 24px 60px rgba(0,0,0,.5);
    transform:translateY(20px) scale(.97);
  }
  .wf-modal-overlay.wf-modal--open .wf-modal{
    transform:translateY(0) scale(1);
  }
}

/* ── Modal Head ── */
.wf-modal-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 20px 0;
}
.wf-modal-title{
  font-size:16px;font-weight:700;
  color:#fff;
  letter-spacing:-.01em;
}
.wf-modal-close{
  width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(181,183,185,.08);
  border:1px solid rgba(181,183,185,.1);
  border-radius:10px;
  color:rgba(181,183,185,.72);
  font-size:20px;line-height:1;
  cursor:pointer;
  transition:background .15s,color .15s;
}
.wf-modal-close:hover{
  background:rgba(181,183,185,.15);
  color:#fff;
}

/* ── Modal Body ── */
.wf-modal-body{
  padding:16px 20px 20px;
  display:flex;flex-direction:column;gap:14px;
}

/* ── Fields ── */
.wf-field{
  display:flex;flex-direction:column;gap:5px;
}
.wf-label{
  font-size:12px;font-weight:600;
  color:rgba(181,183,185,.72);
  letter-spacing:.04em;
  text-transform:uppercase;
}
.wf-req{
  color:#8C6A3E;
}
.wf-input{
  width:100%;
  padding:10px 12px;
  background:rgba(181,183,185,.06);
  border:1px solid rgba(181,183,185,.12);
  border-radius:10px;
  color:#fff;
  font-size:14px;
  font-family:inherit;
  outline:none;
  transition:border-color .15s,box-shadow .15s;
  -webkit-appearance:none;
  appearance:none;
}
.wf-input:focus{
  border-color:rgba(140,106,62,.6);
  box-shadow:0 0 0 2px rgba(140,106,62,.15);
}
.wf-input::placeholder{
  color:rgba(181,183,185,.36);
}
.wf-input--error{
  border-color:rgba(220,80,60,.6);
  box-shadow:0 0 0 2px rgba(220,80,60,.12);
}

/* Select fix */
.wf-select{
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23B5B7B9' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  padding-right:32px;
}
.wf-select option{
  background:#2E3136;
  color:#fff;
}

/* Textarea */
textarea.wf-input{
  resize:vertical;
  min-height:60px;
}

/* Date input */
input[type="date"].wf-input{
  color-scheme:dark;
}

/* ── Actions Footer ── */
.wf-modal-actions{
  display:flex;gap:10px;
  padding-top:6px;
}
.wf-btn{
  flex:1;
  padding:11px 16px;
  border-radius:10px;
  font-size:13px;font-weight:650;
  font-family:inherit;
  cursor:pointer;
  border:none;
  transition:background .15s,transform .1s,opacity .15s;
}
.wf-btn:active{
  transform:scale(.97);
}
.wf-btn--cancel{
  background:rgba(181,183,185,.08);
  border:1px solid rgba(181,183,185,.1);
  color:rgba(181,183,185,.72);
}
.wf-btn--cancel:hover{
  background:rgba(181,183,185,.14);
  color:#fff;
}
.wf-btn--submit{
  background:#8C6A3E;
  color:#fff;
}
.wf-btn--submit:hover{
  background:#9b7848;
}
.wf-btn--submit:disabled{
  opacity:.6;
  cursor:default;
}
.wf-btn-loading{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

/* ── Spinner ── */
.wf-spinner{
  display:inline-block;
  width:14px;height:14px;
  border:2px solid rgba(255,255,255,.3);
  border-top-color:#fff;
  border-radius:50%;
  animation:wf-spin .6s linear infinite;
}
@keyframes wf-spin{
  to{transform:rotate(360deg)}
}

/* ── Toast ── */
.wf-toast{
  position:fixed;
  bottom:24px;left:50%;
  transform:translateX(-50%) translateY(20px);
  z-index:9500;
  padding:12px 20px;
  border-radius:12px;
  font-size:13px;font-weight:600;
  color:#fff;
  opacity:0;
  transition:opacity .24s,transform .24s;
  pointer-events:none;
  max-width:90vw;
  text-align:center;
}
.wf-toast--visible{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}
.wf-toast--success{
  background:rgba(46,49,54,.95);
  border:1px solid rgba(140,106,62,.4);
  box-shadow:0 8px 24px rgba(0,0,0,.3);
}
.wf-toast--error{
  background:rgba(60,20,20,.95);
  border:1px solid rgba(220,80,60,.4);
  box-shadow:0 8px 24px rgba(0,0,0,.3);
}

/* ── Inline Action Buttons (for command modules) ── */
.wf-action-btn{
  display:inline-flex;align-items:center;gap:5px;
  padding:7px 12px;
  background:rgba(140,106,62,.12);
  border:1px solid rgba(140,106,62,.25);
  border-radius:8px;
  color:#8C6A3E;
  font-size:12px;font-weight:600;
  cursor:pointer;
  transition:background .15s,border-color .15s,color .15s;
  text-decoration:none;
}
.wf-action-btn:hover{
  background:rgba(140,106,62,.2);
  border-color:rgba(140,106,62,.4);
  color:#c9a362;
}
.wf-action-btn svg{
  width:13px;height:13px;
}

/* ── Mobile tweaks ── */
@media(max-width:520px){
  .wf-modal-body{
    padding:14px 16px 16px;
    gap:12px;
  }
  .wf-modal-head{
    padding:16px 16px 0;
  }
  .wf-input{
    font-size:16px; /* Prevent iOS zoom */
    padding:12px 14px;
  }
  .wf-btn{
    padding:13px 16px;
    font-size:14px;
  }
  .wf-toast{
    bottom:16px;
    left:16px;right:16px;
    transform:translateX(0) translateY(20px);
    max-width:none;
  }
  .wf-toast--visible{
    transform:translateX(0) translateY(0);
  }
}