/* سجل عمليات المشتريات والمرتجعات (/purchases/operations-log) — منقول حرفيًا من <style> بـpanels/purchases/
   purchase-operations-log.html (Legacy) بتحويل آلي (port_legacy_css.py): كل محدِّد مقيَّد بـ.po-root، :root/
   html[data-theme=light] → .po-root/[data-theme=light] .po-root، والمحدِّدات العامة (table/thead/tbody) صارت داخل
   .po-root فقط. الإضافات الخاصة بـV2 في آخر الملف. */
.po-root {
    --bg-card:      rgba(var(--th-n-900-rgb),0.52);
    --bg-input:     rgba(255,255,255,0.05);
    --bg-hover:     rgba(16,185,129,0.07);
    --border:       rgba(255,255,255,0.08);
    --border-focus: rgba(16,185,129,0.65);
    --text:         var(--th-n-200);
    --text-muted:   var(--th-n-500);
    --text-sub:     var(--th-n-400);
    --accent:       #10b981;
    --accent-2:     #059669;
    --accent-3:     #34d399;
    --accent-glow:  rgba(16,185,129,0.20);
    --success:      #10b981;
    --success-bg:   rgba(16,185,129,0.12);
    --danger:       #ef4444;
    --danger-bg:    rgba(239,68,68,0.12);
    --warn:         #f59e0b;
    --warn-bg:      rgba(245,158,11,0.12);
    --info:         #3b82f6;
    --info-bg:      rgba(59,130,246,0.12);
    --purple:       var(--th-accent2-500);
    --purple-bg:    rgba(var(--th-accent2-500-rgb),0.12);
    --teal:         #2dd4bf;
    --teal-bg:      rgba(45,212,191,0.12);
    --radius:       14px;
    --card-border:  rgba(255,255,255,0.07);
    --card-shadow:  0 0 0 1px rgba(255,255,255,.04) inset, 0 10px 30px rgba(0,0,0,.25);
    --ease-smooth:  cubic-bezier(.22,.61,.36,1);
    --page-bg:      #070d18;
}
[data-theme="light"] .po-root {
    --bg-card:      rgba(255,255,255,0.88);
    --bg-input:     rgba(var(--th-n-900-rgb),0.04);
    --bg-hover:     rgba(16,185,129,0.06);
    --border:       rgba(var(--th-n-900-rgb),0.10);
    --border-focus: rgba(16,185,129,0.50);
    --text:         var(--th-n-800);
    --text-muted:   var(--th-n-500);
    --text-sub:     var(--th-n-600);
    --card-border:  rgba(var(--th-n-900-rgb),0.08);
    --success-bg:   rgba(16,185,129,0.10);
    --danger-bg:    rgba(239,68,68,0.10);
    --warn-bg:      rgba(245,158,11,0.10);
    --info-bg:      rgba(59,130,246,0.10);
    --purple-bg:    rgba(var(--th-accent2-500-rgb),0.10);
    --teal-bg:      rgba(45,212,191,0.10);
    --page-bg:      var(--th-l-2);
}
.po-root * {box-sizing:border-box;}
.po-root {
    margin:0;background:var(--page-bg);color:var(--text);
    font-family:'Cairo',sans-serif;min-height:calc(100 * var(--vh));
    transition:background var(--ease-smooth) 200ms,color var(--ease-smooth) 200ms;
}
.po-root .wrap {max-width:1400px;margin:0 auto;padding:20px 22px 60px;}

.po-root .page-header {
    display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
    background:var(--bg-card);border:1px solid var(--card-border);border-radius:var(--radius);
    padding:18px 22px;margin-bottom:16px;box-shadow:var(--card-shadow);backdrop-filter:blur(20px);
}
.po-root .page-header-left {display:flex;align-items:center;gap:14px;}
.po-root .page-icon {
    width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;flex-shrink:0;
    box-shadow:0 8px 20px var(--accent-glow);
}
.po-root .page-title {font-size:17px;font-weight:900;}
.po-root .page-subtitle {font-size:12px;color:var(--text-muted);margin-top:3px;}
.po-root .header-actions {display:flex;align-items:center;gap:8px;}
.po-root .icon-btn {
    width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;
    background:var(--bg-input);border:1px solid var(--border);color:var(--text-muted);cursor:pointer;
}
.po-root .icon-btn:hover {color:var(--text);border-color:var(--border-focus);}
.po-root .icon-btn svg {width:16px;height:16px;}
.po-root .icon-btn.spinning svg {animation:po-spin .7s linear infinite;}
@keyframes po-spin {to {transform:rotate(360deg)}}

/* ── شريط الفلاتر ── */
.po-root .filter-bar {
    display:flex;align-items:center;gap:10px;flex-wrap:wrap;
    background:var(--bg-card);border:1px solid var(--card-border);border-radius:var(--radius);
    padding:12px 16px;margin-bottom:16px;box-shadow:var(--card-shadow);
}
.po-root .search-wrap {
    display:flex;align-items:center;gap:7px;flex:1;min-width:200px;
    background:var(--bg-input);border:1px solid var(--border);border-radius:10px;padding:0 10px;height:38px;
}
.po-root .search-wrap svg {width:14px;height:14px;color:var(--text-muted);flex-shrink:0;}
.po-root .search-wrap input {flex:1;background:none;border:none;outline:none;color:var(--text);font-family:inherit;font-size:12.5px;min-width:0;}
.po-root .search-wrap input::placeholder {color:var(--text-muted);}
.po-root .date-inp {
    padding:9px 10px;border-radius:10px;background:var(--bg-input);border:1px solid var(--border);
    color:var(--text);font-size:12px;font-family:inherit;color-scheme:dark;height:38px;
}
[data-theme="light"] .po-root .date-inp {color-scheme:light;}
.po-root .date-sep {color:var(--text-muted);font-size:11px;font-weight:700;}
.po-root .filter-select {
    padding:9px 12px;border-radius:10px;background:var(--bg-input);border:1px solid var(--border);
    color:var(--text);font-size:12.5px;font-family:inherit;cursor:pointer;min-width:150px;height:38px;
    color-scheme:dark;
}
[data-theme="light"] .po-root .filter-select {color-scheme:light;}
.po-root .filter-select option {background:var(--th-d-6);color:var(--text);}
[data-theme="light"] .po-root .filter-select option {background:#fff;color:var(--th-n-800);}
.po-root .clear-btn {
    display:flex;align-items:center;gap:6px;height:38px;padding:0 14px;border-radius:10px;
    background:var(--danger-bg);border:1px solid rgba(239,68,68,.35);color:var(--danger);
    font-family:inherit;font-size:12px;font-weight:800;cursor:pointer;flex-shrink:0;white-space:nowrap;
}
.po-root .clear-btn svg {width:13px;height:13px;}
.po-root .clear-btn:hover {background:rgba(239,68,68,.2);}

/* ── جدول ── */
.po-root .table-card {background:var(--bg-card);border:1px solid var(--card-border);border-radius:var(--radius);box-shadow:var(--card-shadow);overflow:hidden;}
.po-root .table-toolbar {display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border);}
.po-root .table-count {font-size:11.5px;color:var(--text-muted);white-space:nowrap;font-weight:700;}
.po-root table {width:100%;border-collapse:collapse;font-size:12.5px;}
.po-root thead th {position:sticky;top:0;background:var(--bg-card);text-align:right;padding:10px 12px;font-size:10.5px;font-weight:800;color:var(--text-muted);border-bottom:1px solid var(--border);white-space:nowrap;}
.po-root tbody td {padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:top;}
.po-root tbody tr:hover {background:var(--bg-hover);}
.po-root .details-cell {color:var(--text-sub);max-width:340px;white-space:normal;line-height:1.5;}
.po-root .doc-cell {font-weight:800;font-variant-numeric:tabular-nums;}
.po-root .user-cell {display:flex;align-items:center;gap:6px;color:var(--text-sub);font-weight:700;}
.po-root .user-cell svg {width:12px;height:12px;color:var(--text-muted);flex-shrink:0;}
.po-root .date-cell {color:var(--text-sub);font-variant-numeric:tabular-nums;white-space:nowrap;}
.po-root .type-pill {display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:100px;font-size:10.5px;font-weight:800;white-space:nowrap;}
.po-root .type-pill.purchase {background:var(--info-bg);color:var(--info);}
.po-root .type-pill.purchase_return {background:var(--purple-bg);color:var(--purple);}
.po-root .action-pill {display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:100px;font-size:10.5px;font-weight:800;white-space:nowrap;}
.po-root .action-pill.a-create {background:var(--success-bg);color:var(--success);}
.po-root .action-pill.a-edit {background:var(--info-bg);color:var(--info);}
.po-root .action-pill.a-approve {background:var(--teal-bg);color:var(--teal);}
.po-root .action-pill.a-cancel {background:var(--warn-bg);color:var(--warn);}
.po-root .action-pill.a-delete {background:var(--danger-bg);color:var(--danger);}
.po-root .action-pill.a-restore {background:var(--purple-bg);color:var(--purple);}
.po-root .action-pill.a-other {background:var(--bg-input);color:var(--text-muted);}
.po-root .table-scroll {max-height:600px;overflow:auto;}
.po-root .empty-state {padding:60px 16px;text-align:center;color:var(--text-muted);font-size:12.5px;}
.po-root .empty-state i {width:34px;height:34px;color:var(--text-muted);opacity:.5;margin-bottom:10px;}
.po-root .loading-state {padding:60px 16px;text-align:center;color:var(--text-muted);font-size:12.5px;}

@media(max-width:900px) {
    .po-root .wrap {padding:14px;}
    .po-root .page-header {flex-direction:column;align-items:stretch;}
    .po-root .filter-bar {flex-direction:column;align-items:stretch;}
    .po-root .search-wrap {width:100%;}
}

/* ══════════════════════════════════════════════════════════
   V2 — إضافات خاصة بالتشغيل داخل MainLayout (ليست من Legacy)
══════════════════════════════════════════════════════════ */
/* Legacy صفحة كاملة بخلفية --page-bg وتمرير عادي داخل iframe — هنا .content-area بلا حشوة والجذر هو الخلفية. */
.content-area:has(.po-root) { padding: 0; }
@media (max-width: 480px) { .content-area:has(.po-root) { padding-top: 60px; } }
.po-root { min-height: calc(100 * var(--vh)); direction: rtl; }
/* زر القائمة العام (.mobile-menu-btn، fixed أعلى اليمين) — مساحة محجوزة له داخل بطاقة الهيدر. */
.po-root .page-header { padding-right: 70px; }
@media (max-width: 480px) { .po-root .page-header { padding-right: 22px; } }