/* ── Menu Request Manager — Frontend v4 ── */
*, *::before, *::after { box-sizing: border-box; }

/* ── Progress bar ─────────────────────────────────────────────────────────── */
.mrm-progress {
    display: flex; align-items: center; gap: 0;
    margin-bottom: 28px; direction: rtl;
    font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
}
.mrm-step-item { display: flex; align-items: center; gap: 8px; flex: 1; }
.mrm-step-item:last-child { flex: none; }
.mrm-step-circle {
    width: 34px; height: 34px; border-radius: 50%;
    border: 2px solid #cbd5e1; background: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; color: #94a3b8;
    flex-shrink: 0; transition: all .3s;
}
.mrm-step-circle.active { border-color: #3b82f6; background: #3b82f6; color: #fff; }
.mrm-step-circle.done   { border-color: #16a34a; background: #16a34a; color: #fff; }
.mrm-step-circle.done::after { content: '✓'; font-size: 14px; }
.mrm-step-circle.done .mrm-step-num { display: none; }
.mrm-step-label { font-size: 12px; font-weight: 600; color: #94a3b8; white-space: nowrap; transition: color .3s; }
.mrm-step-item.active .mrm-step-label { color: #1d4ed8; }
.mrm-step-item.done   .mrm-step-label { color: #15803d; }
.mrm-step-line { flex: 1; height: 2px; background: #e2e8f0; margin: 0 8px; border-radius: 2px; transition: background .3s; }
.mrm-step-line.done { background: #16a34a; }

/* ── PDF Step layout ─────────────────────────────────────────────────────── */
/* الفكرة: الـ card كـ flex column، الـ PDF يأخذ المساحة المتبقية، الأزرار ثابتة في الأسفل */
.mrm-pdf-step {
    font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
    direction: rtl;
    display: flex;
    flex-direction: column;
}

.mrm-pdf-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    display: flex;
    flex-direction: column;
    /* ارتفاع يخلي كل حاجة تظهر في الشاشة بدون scroll خارجي */
    max-height: calc(100vh - 160px);
}

/* Header */
.mrm-pdf-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 18px; background: #f8fafc;
    border-bottom: 1px solid #e2e8f0; flex-wrap: wrap; gap: 8px;
    flex-shrink: 0;
}
.mrm-pdf-header-right { display: flex; align-items: center; gap: 10px; }
.mrm-pdf-icon {
    width: 36px; height: 36px; border-radius: 8px; background: #dbeafe;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.mrm-pdf-icon svg { width: 18px; height: 18px; stroke: #1d4ed8; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mrm-pdf-title { font-size: 14px; font-weight: 700; color: #0f172a; }
.mrm-pdf-sub   { font-size: 11px; color: #64748b; margin-top: 2px; }
.mrm-pdf-actions { display: flex; gap: 8px; }
.mrm-act-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 12px; border-radius: 7px; font-size: 12px; font-weight: 500;
    cursor: pointer; border: 1px solid #cbd5e1; background: #fff; color: #475569;
    text-decoration: none; transition: background .15s;
}
.mrm-act-btn:hover { background: #f1f5f9; color: #475569; }
.mrm-act-btn svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* PDF viewer — يأخذ المساحة المتبقية وعنده scroll داخلي */
.mrm-iframe-box {
    width: 100%;
    background: #525659;
    border-bottom: 1px solid #e2e8f0;
    flex: 1;           /* يملأ المساحة المتبقية */
    min-height: 0;     /* مهم عشان flex يشتغل صح */
    display: flex;
    flex-direction: column;
}
.mrm-pdf-nav {
    display: flex; align-items: center; justify-content: center;
    gap: 16px; padding: 7px 16px; background: #323639;
    direction: ltr; flex-shrink: 0;
}
.mrm-pdf-nav-btn {
    background: #525659; color: #fff; border: none; border-radius: 5px;
    width: 30px; height: 30px; font-size: 15px; cursor: pointer;
    transition: background .15s; display: flex; align-items: center; justify-content: center;
}
.mrm-pdf-nav-btn:hover:not(:disabled) { background: #6b7280; }
.mrm-pdf-nav-btn:disabled { opacity: .35; cursor: not-allowed; }
.mrm-pdf-page-info { color: #d1d5db; font-size: 13px; font-family: inherit; }

/* canvas wrap — الـ scroll الداخلي هنا */
.mrm-canvas-wrap {
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;     /* scroll داخلي للـ PDF */
    flex: 1;
    min-height: 0;
    padding: 12px;
    background: #525659;
}
.mrm-canvas-wrap canvas {
    display: block;
    width: 100% !important;
    height: auto !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.35);
}

/* Approval bar — ثابتة في الأسفل ضمن الـ card */
.mrm-approval-bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 12px 18px;
    border-top: 1px solid #e2e8f0; flex-wrap: wrap;
    direction: rtl; flex-shrink: 0; background: #fff;
}
.mrm-approval-q { font-size: 14px; font-weight: 700; color: #0f172a; white-space: nowrap; }
.mrm-approval-btns { display: flex; gap: 10px; align-items: center; }
.mrm-btn-approve {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 20px; border-radius: 8px; font-size: 13px; font-weight: 600;
    cursor: pointer; border: none; background: #16a34a; color: #fff;
    transition: background .15s; white-space: nowrap;
}
.mrm-btn-approve:hover { background: #15803d; }
.mrm-btn-reject {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 20px; border-radius: 8px; font-size: 13px; font-weight: 600;
    cursor: pointer; background: #fff; border: 1px solid #fca5a5;
    color: #b91c1c; transition: background .15s; white-space: nowrap;
}
.mrm-btn-reject:hover { background: #fef2f2; }
.mrm-btn-approve svg, .mrm-btn-reject svg {
    width: 14px; height: 14px; stroke: currentColor; fill: none;
    stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
}
.mrm-btn-approve svg { stroke: #fff; }

/* OK banner */
.mrm-ok-banner {
    display: none; align-items: center; gap: 10px; padding: 10px 18px;
    background: #f0fdf4; border-top: 1px solid #bbf7d0;
    color: #15803d; font-size: 13px; font-weight: 600;
    direction: rtl; flex-shrink: 0;
}
.mrm-ok-banner.mrm-show { display: flex; }
.mrm-ok-banner svg { width: 16px; height: 16px; min-width: 16px; stroke: #16a34a; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* Rejection panel */
.mrm-reject-panel {
    display: none; padding: 16px 18px;
    background: #fffbeb; border-top: 1px solid #fde047;
    flex-shrink: 0;
}
.mrm-reject-panel.mrm-open { display: block; }
.mrm-reject-title { font-size: 13px; font-weight: 700; color: #92400e; margin-bottom: 12px; }
.mrm-field { margin-bottom: 12px; }
.mrm-field label { display: block; font-size: 12px; font-weight: 600; color: #78350f; margin-bottom: 4px; }
.mrm-field textarea {
    width: 100%; min-height: 70px; padding: 9px 11px;
    border: 1px solid #fcd34d; border-radius: 8px; font-size: 13px;
    font-family: inherit; resize: vertical; background: #fff; color: #1e293b;
}
.mrm-field textarea:focus { outline: none; border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.15); }

/* Nav buttons — خارج الـ card */
.mrm-nav {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 16px; gap: 12px;
    font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
}
.mrm-btn-back {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 10px 22px; border-radius: 9px; font-size: 14px; font-weight: 600;
    cursor: pointer; background: #fff; border: 1px solid #cbd5e1; color: #475569;
    transition: background .15s;
}
.mrm-btn-back:hover { background: #f8fafc; }
.mrm-btn-submit {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 10px 26px; border-radius: 9px; font-size: 14px; font-weight: 600;
    cursor: pointer; border: none; background: #2563eb; color: #fff;
    transition: background .15s;
}
.mrm-btn-submit:hover  { background: #1d4ed8; }
.mrm-btn-submit:disabled { opacity: .45; cursor: not-allowed; }
.mrm-btn-back svg, .mrm-btn-submit svg {
    width: 14px; height: 14px; stroke: currentColor; fill: none;
    stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
}
.mrm-btn-submit svg { stroke: #fff; }

/* Status messages */
.mrm-msg {
    padding: 12px 16px; border-radius: 10px; font-size: 14px; font-weight: 500;
    display: flex; align-items: center; gap: 8px;
    font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
}
.mrm-msg.info    { background: #eff6ff; border: 1px solid #bfdbfe; color: #1d4ed8; }
.mrm-msg.warning { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
.mrm-msg.error   { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }

/* Loading */
.mrm-loading {
    display: flex; align-items: center; justify-content: center;
    gap: 10px; padding: 48px; color: #64748b; font-size: 14px;
    font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
}
.mrm-spinner {
    width: 22px; height: 22px; flex-shrink: 0;
    border: 2.5px solid #e2e8f0; border-top-color: #3b82f6;
    border-radius: 50%; animation: mrm-spin .7s linear infinite;
}
@keyframes mrm-spin { to { transform: rotate(360deg); } }