/* ================================================================
   employee-portal.css — Employee Price List Portal (خارج نطاق الداشبورد)
   ────────────────────────────────────────────────────────────
   LIGHT MODE — نفس الهوية البصرية المستخدمة في تصدير PDF
   (stock-product-export.js): هيدر بتدرج داكن (Navy → Blue) فوق خلفية
   فاتحة، عناوين مجموعات بحد أزرق جانبي + خلفية زرقاء فاتحة شفافة،
   جدول نظيف بخطوط فاصلة خفيفة وصفوف متناوبة، بدون أي Dark Navy
   background رئيسي.
   ================================================================ */

:root {
  --c-bg:        #f4f6fa;
  --c-card:      #ffffff;
  --c-row-alt:   #f8fafc;
  --c-border:    #e5e9f0;
  --c-text:      #1e293b;
  --c-text2:     #64748b;
  --c-text3:     #94a3b8;
  --c-blue:      #3b82f6;
  --c-blue-dark: #1e3a8a;
  --c-navy:      #0f172a;
  --c-r:         14px;
}

* { box-sizing: border-box; }
body {
  margin:0; background:var(--c-bg); color:var(--c-text);
  font-family:'Cairo',sans-serif; direction:rtl;
  min-height:100vh;
}

/* ── هيدر بالتدرج (نفس هيدر تصدير الـPDF) فوق خلفية الصفحة الفاتحة ── */
.emp-header {
  background:linear-gradient(135deg, var(--c-navy) 0%, var(--c-blue-dark) 60%, var(--c-blue) 100%);
  padding:20px 20px 18px;
}
.emp-header-inner { max-width:1100px; margin:0 auto; }
.emp-brand {
  font-size:20px; font-weight:900; color:#fff;
  display:flex; align-items:center; gap:8px;
}
.emp-header-sub { margin-top:4px; font-size:12px; color:rgba(255,255,255,.7); font-weight:600; }

.emp-main { max-width:1100px; margin:0 auto; padding:20px 16px 60px; }

.emp-state-msg { text-align:center; padding:80px 20px; color:var(--c-text2); }
.emp-state-msg i { font-size:40px; margin-bottom:14px; display:block; color:var(--c-text3); }
.emp-state-msg p { font-size:15px; font-weight:700; margin-bottom:16px; color:var(--c-text); }
.emp-login-link {
  display:inline-flex; align-items:center; gap:6px; padding:10px 22px;
  background:linear-gradient(135deg, var(--c-blue-dark), var(--c-blue));
  color:#fff; border-radius:50px; font-weight:800; font-size:13px;
  text-decoration:none; box-shadow:0 4px 14px rgba(59,130,246,.28);
}

/* ── فلاتر ── */
.emp-filters { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:20px; }
.emp-search-wrap { flex:1; min-width:220px; position:relative; }
.emp-search-wrap i {
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  color:var(--c-text3); font-size:13px;
}
.emp-search-wrap input {
  width:100%; padding:11px 38px 11px 14px;
  background:var(--c-card); border:1px solid var(--c-border);
  border-radius:12px; color:var(--c-text); font-family:'Cairo',sans-serif; font-size:13px;
}
.emp-search-wrap input::placeholder { color:var(--c-text3); }
.emp-search-wrap input:focus { outline:none; border-color:var(--c-blue); box-shadow:0 0 0 3px rgba(59,130,246,.12); }
#empCategorySelect, #empGroupSelect, #empSortSelect, #empBranchSelect {
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  padding:11px 34px 11px 14px; background:var(--c-card); border:1px solid var(--c-border);
  border-radius:12px; color:var(--c-text); font-family:'Cairo',sans-serif; font-size:13px;
  font-weight:600; min-width:150px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2364748b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:left 12px center;
}
#empCategorySelect:focus, #empGroupSelect:focus, #empSortSelect:focus, #empBranchSelect:focus {
  outline:none; border-color:var(--c-blue); box-shadow:0 0 0 3px rgba(59,130,246,.12);
}
#empCategorySelect:hover, #empGroupSelect:hover, #empSortSelect:hover, #empBranchSelect:hover { border-color:var(--c-blue); }
#empBranchSelect:disabled { opacity:.6; cursor:not-allowed; }

/* ⚠️ #empBranchSelect بيتحقن ديناميكيًا من employee-portal.js (أول عنصر
   جوه .emp-filters) لصاحب صلاحية product_portal_view_cross_branch بس —
   نفس شكل/سلوك باقي فلاتر الـselect بالظبط (كل الفروع = بدون فلتر فرع،
   زي "كل الفئات"/"كل المجموعات"). مفيش أي عنصر إضافي أو Wrapper خاص. */
.emp-refresh-btn {
  display:inline-flex; align-items:center; gap:6px; padding:11px 16px;
  border-radius:12px; border:1px solid var(--c-border); background:var(--c-card);
  color:var(--c-text2); font-family:'Cairo',sans-serif; font-size:13px; font-weight:700; cursor:pointer;
  white-space:nowrap;
}
.emp-refresh-btn:hover { border-color:var(--c-blue); color:var(--c-blue-dark); }
.emp-refresh-btn:disabled { opacity:.6; cursor:not-allowed; }

/* ── أقسام + جدول (نفس روح تصدير الـPDF: عنوان مجموعة بحد أزرق جانبي) ── */
.emp-body { display:flex; flex-direction:column; gap:20px; }
.emp-section-title {
  font-size:13.5px; font-weight:800; color:var(--c-blue-dark);
  background:rgba(59,130,246,.08);
  border-right:3px solid var(--c-blue);
  border-radius:6px;
  padding:8px 12px;
  margin-bottom:10px;
}
.emp-table-wrap {
  overflow-x:auto; border:1px solid var(--c-border); border-radius:var(--c-r);
  background:var(--c-card);
  box-shadow:0 1px 3px rgba(15,23,42,.04);
}
.emp-table { width:100%; border-collapse:collapse; font-size:13px; }
.emp-table th {
  text-align:right; padding:11px 12px; color:var(--c-text2); font-weight:700;
  font-size:11px; background:var(--c-row-alt); border-bottom:1px solid var(--c-border); white-space:nowrap;
}
.emp-table td {
  padding:10px 12px; border-bottom:1px solid var(--c-border); color:var(--c-text);
}
/* الاسم/التفاصيل: لو النص طويل العمود يوسّع (بدل ما يلف السطر)،
   والجدول بيسكرول أفقي (.emp-table-wrap عندها overflow-x:auto). */
.emp-table td.emp-col-wrap {
  white-space:nowrap;
}
.emp-table tbody tr:nth-child(even) td { background:var(--c-row-alt); }
.emp-table tr:last-child td { border-bottom:none; }
.emp-price { color:var(--c-text); font-weight:800; }
.emp-min-price { color:var(--c-text3); font-weight:700; }
/* عمود "الفرع" — بيظهر بس لصاحب صلاحية product_portal_view_cross_branch
   (empCanCrossBranch في employee-portal.js)، نفس وزن/لون العمود الثانوي
   (emp-min-price) عشان ميزاحمش عمود السعر بصريًا. */
.emp-branch-col { color:var(--c-text2); font-weight:700; white-space:nowrap; }

/* ── Badge التوفر ── */
.emp-badge {
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 10px; border-radius:50px; font-size:11.5px; font-weight:800;
  white-space:nowrap;
}
.emp-badge-available { background:rgba(34,197,94,.12); color:#15803d; }
.emp-badge-out        { background:rgba(239,68,68,.12); color:#b91c1c; }
.emp-badge-unknown    { color:var(--c-text3); }

.emp-empty { text-align:center; padding:50px 20px; color:var(--c-text3); font-size:13px; }

/* ── عمود اللون: "متعدد" قابلة للضغط لعرض الألوان الفعلية المتاحة ── */
.emp-colors-multi-btn {
  border:1px solid var(--c-blue); background:rgba(59,130,246,.08); color:var(--c-blue-dark);
  font-family:'Cairo',sans-serif; font-size:12px; font-weight:800;
  padding:4px 12px; border-radius:50px; cursor:pointer;
}
.emp-colors-multi-btn:hover { background:rgba(59,130,246,.16); }

.emp-modal-overlay {
  display:none; position:fixed; inset:0; background:rgba(15,23,42,.45);
  align-items:center; justify-content:center; z-index:9999; padding:16px;
}
.emp-modal-box {
  background:var(--c-card); border-radius:var(--c-r); padding:20px;
  width:100%; max-width:280px; box-shadow:0 10px 30px rgba(15,23,42,.2);
}
.emp-modal-title { font-size:14px; font-weight:800; color:var(--c-blue-dark); margin-bottom:12px; }
.emp-modal-colors-list { list-style:none; margin:0 0 16px; padding:0; display:flex; flex-direction:column; gap:8px; }
.emp-modal-colors-list li { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--c-text); }
.emp-modal-colors-list li i { color:#15803d; }
.emp-modal-close-btn {
  width:100%; padding:9px; border-radius:10px; border:1px solid var(--c-border);
  background:var(--c-row-alt); color:var(--c-text); font-family:'Cairo',sans-serif;
  font-size:13px; font-weight:700; cursor:pointer;
}
.emp-modal-close-btn:hover { border-color:var(--c-blue); color:var(--c-blue-dark); }

.emp-loadmore-wrap { display:flex; justify-content:center; margin-top:24px; }
.emp-loadmore-btn {
  padding:10px 24px; border-radius:50px; border:1px solid var(--c-border);
  background:var(--c-card); color:var(--c-text); font-family:'Cairo',sans-serif;
  font-size:13px; font-weight:700; cursor:pointer;
}
.emp-loadmore-btn:hover { border-color:var(--c-blue); color:var(--c-blue-dark); }
.emp-loadmore-btn:disabled { opacity:.6; cursor:not-allowed; }

@media (max-width:480px) {
  .emp-table th, .emp-table td { padding:8px; font-size:12px; }
  .emp-header { padding:16px 16px 14px; }
}