/* ============================================================================
   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;}