/* ============================================================================
   workflow.css — Style Metronic pour les pages du moteur Workflow.
   Reprend les classes utilitaires du mockup (workflow-mockups.html) :
   step-card / step-pill / badge-version / sla-bar / timeline-item / etc.
   ============================================================================ */

.wf-section{padding:0;font-size:.95rem;color:#3f4254;}
.wf-section .card{border:1px solid #eff2f5;box-shadow:0 0 20px 0 rgba(76,87,125,.02);border-radius:.625rem;}
.wf-section .card-header{border-bottom:1px solid #eff2f5;padding:1.25rem 2rem;}
.wf-section h4,.wf-section h5{font-weight:700;}
.wf-section h4{font-size:1.35rem;}
.wf-section h5{font-size:1.15rem;}
.wf-section h6{font-size:1rem;font-weight:700;}
.wf-section .form-label{font-weight:600;font-size:.9rem;color:#3f4254;}
.wf-section .form-control,.wf-section .form-select{font-size:.95rem;padding:.55rem .85rem;}
.wf-section .form-control-sm,.wf-section .form-select-sm{font-size:.9rem;padding:.45rem .7rem;}
.wf-section .btn{font-size:.95rem;padding:.55rem 1rem;font-weight:600;}
.wf-section .btn-sm{font-size:.85rem;padding:.4rem .75rem;}
.wf-section .btn-icon{width:38px;height:38px;}
.wf-section .btn-icon.btn-sm{width:34px;height:34px;}
.wf-section .table{font-size:.95rem;}
.wf-section .table thead th{font-weight:700;text-transform:uppercase;color:#7e8299;font-size:.75rem;letter-spacing:.05em;border-bottom:1px solid #eff2f5;padding:1rem .75rem;}
.wf-section .table tbody td{padding:1.05rem .75rem;border-bottom:1px solid #eff2f5;vertical-align:middle;}
.wf-section .modal-title{font-size:1.15rem;font-weight:700;}
.wf-section .modal-header{padding:1.25rem 1.75rem;}
.wf-section .modal-body{padding:1.5rem 1.75rem;}
.wf-section .modal-footer{padding:1rem 1.75rem;}

/* ───────── Badges ─────────────────────────────────────────────────────── */
.badge-version{background:#e1f0ff;color:#3699ff;border-radius:.42rem;padding:.25rem .5rem;font-weight:600;font-size:.75rem;display:inline-block;}
.badge-status-active{background:#e8fff3;color:#50cd89;border-radius:.42rem;padding:.25rem .65rem;font-weight:600;font-size:.75rem;display:inline-block;}
.badge-status-inactive{background:#fff5f8;color:#f1416c;border-radius:.42rem;padding:.25rem .65rem;font-weight:600;font-size:.75rem;display:inline-block;}
.badge-draft{background:#fff8dd;color:#b78103;border-radius:.42rem;padding:.25rem .65rem;font-weight:600;font-size:.75rem;display:inline-block;}
.delegate-active{background:#e8fff3;color:#50cd89;border-radius:.42rem;padding:.25rem .65rem;font-weight:600;font-size:.75rem;display:inline-flex;align-items:center;gap:.25rem;}
.delegate-scheduled{background:#fff8dd;color:#b78103;border-radius:.42rem;padding:.25rem .65rem;font-weight:600;font-size:.75rem;display:inline-flex;align-items:center;gap:.25rem;}

/* ───────── Boutons icône Metronic light ───────────────────────────────── */
.btn-icon{width:35px;height:35px;display:inline-flex;align-items:center;justify-content:center;padding:0;border-radius:.42rem;}
.btn-light-primary{background:#e1f0ff;color:#3699ff;border:none;}
.btn-light-primary:hover{background:#3699ff;color:#fff;}
.btn-light-danger{background:#fff5f8;color:#f1416c;border:none;}
.btn-light-danger:hover{background:#f1416c;color:#fff;}
.btn-light-success{background:#e8fff3;color:#50cd89;border:none;}
.btn-light-success:hover{background:#50cd89;color:#fff;}
.btn-light-warning{background:#fff8dd;color:#b78103;border:none;}
.btn-light-warning:hover{background:#ffc700;color:#fff;}

/* ───────── Designer : step-cards verticales ───────────────────────────── */
.step-card{border:2px solid #eff2f5;border-radius:.625rem;padding:1.25rem 1.5rem;background:#fff;transition:all .15s;position:relative;margin-bottom:0;}
.step-card:hover{border-color:#3699ff;cursor:pointer;}
.step-card.parallel{border-style:dashed;border-color:#a4a4d6;}
.step-card.completed{background:#f8fafc;}
.step-card.selected{border-color:#3699ff;background:#f5fbff;box-shadow:0 0 0 3px rgba(54,153,255,.15);}
.step-arrow{text-align:center;color:#a1a5b7;font-size:1.5rem;margin:.5rem 0;}
.step-pill{display:inline-block;padding:.25rem .75rem;border-radius:1rem;font-size:.75rem;font-weight:600;}
.step-pill.submission{background:#e1f0ff;color:#3699ff;}
.step-pill.approval{background:#e8fff3;color:#50cd89;}
.step-pill.parallel{background:#f3f3f3;color:#5e6278;}
.step-pill.completion{background:#fff8dd;color:#b78103;}
.step-add-btn{border:2px dashed #3699ff;background:transparent;color:#3699ff;padding:.65rem;border-radius:.5rem;width:100%;font-weight:600;}
.step-add-btn:hover{background:#e1f0ff;}

/* ───────── Onglets pilules Metronic ───────────────────────────────────── */
.nav-pills .nav-link{color:#7e8299;padding:.5rem .9rem;font-weight:500;cursor:pointer;border-radius:.42rem;}
.nav-pills .nav-link.active{background:#e1f0ff;color:#3699ff;}

/* ───────── Approver row ───────────────────────────────────────────────── */
.approver-row{border:1px solid #eff2f5;border-radius:.5rem;padding:.75rem 1rem;margin-bottom:.5rem;background:#fafbfc;}
.priority-badge{background:#5e6278;color:#fff;border-radius:50%;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;flex-shrink:0;}

/* ───────── SLA bar ────────────────────────────────────────────────────── */
.sla-bar{height:6px;border-radius:3px;background:#eff2f5;overflow:hidden;width:120px;display:inline-block;vertical-align:middle;}
.sla-bar > div{height:100%;transition:width .3s;}
.sla-green{background:#50cd89;}
.sla-yellow{background:#ffc700;}
.sla-red{background:#f1416c;}

/* ───────── Timeline ───────────────────────────────────────────────────── */
.timeline-item{padding-left:2rem;position:relative;padding-bottom:1.25rem;border-left:2px solid #eff2f5;margin-left:1rem;}
.timeline-item:last-child{border-left-color:transparent;}
.timeline-dot{position:absolute;left:-9px;top:0;width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid #3699ff;}
.timeline-dot.approved{border-color:#50cd89;}
.timeline-dot.returned{border-color:#ffc700;}
.timeline-dot.rejected{border-color:#f1416c;}
.timeline-dot.info{border-color:#22b9ff;}
.timeline-dot.guard{border-color:#f1416c;}
.timeline-dot.effect{border-color:#8950fc;}

/* RTL : timeline à droite */
[dir="rtl"] .timeline-item{padding-left:0;padding-right:2rem;border-left:none;border-right:2px solid #eff2f5;margin-left:0;margin-right:1rem;}
[dir="rtl"] .timeline-item:last-child{border-right-color:transparent;}
[dir="rtl"] .timeline-dot{left:auto;right:-9px;}

/* ───────── Rule block ─────────────────────────────────────────────────── */
.rule-block{background:#fafbfc;border:1px solid #eff2f5;border-radius:.625rem;padding:1.25rem;margin-bottom:1rem;}

/* ───────── Avatars ────────────────────────────────────────────────────── */
.wf-avatar{width:32px;height:32px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:.75rem;flex-shrink:0;}
.wf-avatar.sm{width:24px;height:24px;font-size:.65rem;}
.avatar-blue{background:#3699ff;}
.avatar-green{background:#50cd89;}
.avatar-orange{background:#f1bc00;}
.avatar-pink{background:#f1416c;}
.avatar-purple{background:#8950fc;}
.avatar-cyan{background:#22b9ff;}
.avatar-red{background:#d9214e;}

/* ───────── Doc field row ──────────────────────────────────────────────── */
.doc-field-row{padding:.85rem 1rem;border-bottom:1px solid #eff2f5;display:flex;justify-content:space-between;align-items:center;}
.doc-field-row:last-child{border-bottom:none;}
.doc-field-label{color:#7e8299;font-size:.875rem;}
.doc-field-value{font-weight:600;}
.field-editable{background:#e1f0ff;color:#3699ff;font-size:.7rem;padding:.15rem .5rem;border-radius:.3rem;font-weight:600;}
.field-readonly{background:#f5f5f5;color:#7e8299;font-size:.7rem;padding:.15rem .5rem;border-radius:.3rem;font-weight:600;}

/* ───────── Inbox row ──────────────────────────────────────────────────── */
.inbox-row{cursor:pointer;transition:background .15s;}
.inbox-row:hover{background:#fafbfc;}
.inbox-row.selected{background:#e1f0ff;}
.inbox-row.overdue{border-left:4px solid #f1416c;background:#fff5f8;}
.inbox-row.warning{border-left:4px solid #ffc700;background:#fffaeb;}
[dir="rtl"] .inbox-row.overdue{border-left:none;border-right:4px solid #f1416c;}
[dir="rtl"] .inbox-row.warning{border-left:none;border-right:4px solid #ffc700;}

/* ───────── Empty state ────────────────────────────────────────────────── */
.empty-state{text-align:center;padding:3rem 1rem;color:#7e8299;}
.empty-state i{font-size:3rem;opacity:.4;}

/* ───────── Form Builder visual grid (déjà utilisé dans FormBuilder.razor) */
.ff-section{background:#fff;border:1px solid #eff2f5;border-radius:.5rem;padding:1rem;margin-bottom:1rem;}
.ff-section-header{display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem;padding-bottom:.5rem;border-bottom:2px solid #eff2f5;}
.ff-section-name{border:none;background:transparent;font-weight:700;font-size:1rem;flex-grow:1;padding:.25rem .5rem;border-radius:.3rem;}
.ff-section-name:focus{background:#fafbfc;outline:none;}
.ff-section-count{background:#f5f8fa;color:#7e8299;padding:.2rem .65rem;border-radius:1rem;font-size:.7rem;font-weight:600;}
.ff-section-empty{padding:1.5rem;text-align:center;color:#a1a5b7;font-size:.875rem;background:#fafbfc;border-radius:.4rem;border:1px dashed #d6d6e0;}
.ff-card{position:relative;background:#fff;border:1px solid #eff2f5;border-radius:.5rem;padding:.6rem .75rem;cursor:pointer;transition:all .15s;height:100%;}
.ff-card:hover{border-color:#3699ff;box-shadow:0 0 0 3px rgba(54,153,255,.08);}
.ff-card.selected{border-color:#3699ff;background:#f5fbff;box-shadow:0 0 0 3px rgba(54,153,255,.15);}
.ff-pill{font-size:.65rem;padding:.1rem .4rem;border-radius:.3rem;font-weight:600;display:inline-flex;align-items:center;gap:.2rem;}
.ff-pill.core{background:#fff5f8;color:#f1416c;}
.ff-pill.optional{background:#e1f0ff;color:#3699ff;}

/* flash highlight for inline detail panels (collections module) */
.panel-flash{animation:panelFlash 1.6s ease-out 1;}
@keyframes panelFlash{0%{box-shadow:0 0 0 0 rgba(22,119,97,.55);background-color:rgba(22,119,97,.10);}60%{box-shadow:0 0 0 6px rgba(22,119,97,0);background-color:rgba(22,119,97,.05);}100%{box-shadow:0 0 0 0 rgba(22,119,97,0);background-color:transparent;}}

/* ───────── Ticket 3056 : aptitude au نشر (خطوات · معتمدون · نموذج) ────── */
.wf-ready{display:flex;align-items:center;gap:.55rem;}
.wf-dots{display:flex;gap:.2rem;flex:0 0 auto;}
.wf-dot{width:19px;height:6px;border-radius:3px;background:#eff2f5;display:inline-block;}
.wf-dot.ok{background:#50cd89;}
.wf-dot.ko{background:#f1416c;}
.wf-dot.warn{background:#ffc700;}
.wf-rtxt{font-size:.78rem;font-weight:600;white-space:nowrap;}
.wf-rtxt.ok{color:#50cd89;}
.wf-rtxt.ko{color:#f1416c;}
.wf-rtxt.warn{color:#b78103;}

.wf-gate{border:1px solid #eff2f5;border-radius:.625rem;background:#fff;padding:1rem 1.15rem;margin-bottom:1rem;}
.wf-gate.blocked{border-color:#ffd9e2;background:#fffafb;}
.wf-gate.okall{border-color:#cdf3de;background:#fbfffd;}
.wf-gate-item{display:flex;align-items:flex-start;gap:.7rem;padding:.65rem .85rem;border-radius:.5rem;
  background:#fafbfc;border:1px solid #eff2f5;}
.wf-gate-item.ko{background:#fff5f8;border-color:#ffd9e2;}
.wf-gi{width:23px;height:23px;border-radius:50%;flex:0 0 auto;display:inline-flex;align-items:center;
  justify-content:center;font-size:.78rem;font-weight:700;color:#fff;margin-top:1px;}
.wf-gi.ok{background:#50cd89;}
.wf-gi.ko{background:#f1416c;}

/* Onglets de haut niveau du designer (الخطوات / النموذج) */
.wf-tabs{display:flex;gap:.3rem;padding:0 2rem;border-bottom:1px solid #eff2f5;background:#fff;flex-wrap:wrap;}
.wf-tab{padding:.65rem 1rem;font-weight:600;font-size:.92rem;color:#7e8299;cursor:pointer;
  border:none;background:none;border-bottom:3px solid transparent;margin-bottom:-1px;
  display:flex;align-items:center;gap:.4rem;font-family:inherit;}
.wf-tab:hover{color:#3699ff;}
.wf-tab.active{color:#3699ff;border-bottom-color:#3699ff;}
.wf-pill{background:#eff2f5;color:#5e6278;border-radius:1rem;font-size:.68rem;padding:1px 7px;font-weight:700;}
.wf-tab.active .wf-pill{background:#e1f0ff;color:#3699ff;}
.wf-pill.ko{background:#fff5f8;color:#f1416c;}
.wf-pill.ok{background:#e8fff3;color:#50cd89;}