/* ================================================================
   style-patch.css — v20 — All UI improvements
   ================================================================ */

/* ── Priority / Status Color System ─────────────────────────── */
/* عاجل → أحمر */
tr.row-urgent td, tr.row-urgent {
  background: rgba(220,38,38,0.07) !important;
  border-right: 4px solid #dc2626 !important;
}
tr.row-urgent:hover td { background: rgba(220,38,38,0.13) !important; }

/* سري → بنفسجي */
tr.row-secret td, tr.row-secret {
  background: rgba(124,58,237,0.07) !important;
  border-right: 4px solid #7c3aed !important;
}
tr.row-secret:hover td { background: rgba(124,58,237,0.12) !important; }

/* منجز → أخضر */
tr.row-done td, tr.row-done {
  background: rgba(16,185,129,0.06) !important;
  border-right: 4px solid #10b981 !important;
  opacity: 0.85;
}

/* مغلق → رمادي مشطوب */
tr.row-closed td, tr.row-closed {
  background: rgba(100,116,139,0.06) !important;
  border-right: 4px solid #94a3b8 !important;
  opacity: 0.7;
}
tr.row-closed td { text-decoration: line-through; }

/* جارٍ / عادي → أصفر خفيف */
tr.row-normal td, tr.row-normal {
  background: rgba(245,158,11,0.05) !important;
  border-right: 4px solid #f59e0b !important;
}

/* ── Badge styles ──────────────────────────────────────────── */
.badge.b-urgent { background:rgba(220,38,38,0.14); color:#dc2626; border:1px solid rgba(220,38,38,0.3); }

/* ── Admin settings panel ─────────────────────────────────── */
.admin-setting-section {
  background: var(--surface, #f8fafc);
  border: 1.5px solid var(--border, #e2e8f0);
  border-radius: 12px;
  padding: 16px;
}

/* ── Password toggle ──────────────────────────────────────── */
.pass-wrapper { position:relative; width:100%; }
.pass-wrapper input { width:100%; padding-left:42px !important; }
.pass-toggle-btn {
  position:absolute; left:8px; top:50%; transform:translateY(-50%);
  background:none; border:none; cursor:pointer; font-size:18px;
  color:var(--muted,#64748b); padding:6px 8px; border-radius:6px; z-index:2;
}
.pass-toggle-btn:hover { background:rgba(0,0,0,0.05); }

/* ── Bulk bar ─────────────────────────────────────────────── */
.bulk-bar { position:sticky; bottom:0; z-index:100; background:var(--navy-gradient); color:#fff; padding:12px 16px; border-radius:12px; margin-top:12px; }
.bulk-bar-inner { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.bulk-count { font-weight:700; font-size:13px; }
.bulk-actions { display:flex; gap:6px; flex-wrap:wrap; }
.bulk-bar .btn { background:rgba(255,255,255,0.15); color:#fff; border:1px solid rgba(255,255,255,0.25); }
.bulk-bar .btn:hover { background:rgba(255,255,255,0.25); }
.bulk-bar .bd { background:rgba(225,29,72,0.5); }

/* ── Outgoing type tabs ───────────────────────────────────── */
.out-type-tabs { display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
.out-type-tab { padding:8px 16px; border:1.5px solid var(--border); background:var(--card); border-radius:10px; cursor:pointer; font-family:'Cairo'; font-weight:700; font-size:12px; color:var(--text-soft); transition:all 0.2s; }
.out-type-tab:hover { border-color:var(--turquoise); color:var(--turquoise); }
.out-type-tab.active { background:var(--turq-gradient); color:#fff; border-color:var(--turquoise); }
.badge-out-type { display:inline-block; padding:2px 6px; border-radius:6px; font-size:10px; font-weight:700; margin-right:4px; color:#fff; }

/* ── Travel section ───────────────────────────────────────── */
.travel-dropzone { border:2.5px dashed var(--border-strong); border-radius:var(--radius); padding:40px 20px; text-align:center; cursor:pointer; transition:all 0.2s; background:var(--card-soft); margin-bottom:16px; }
.travel-dropzone:hover, .travel-dropzone.drag-over { border-color:var(--turquoise); background:rgba(8,145,178,0.05); }
.tdz-icon { font-size:42px; margin-bottom:8px; }
.tdz-text { font-size:15px; font-weight:700; color:var(--navy); margin-bottom:4px; }
.tdz-hint { font-size:12px; color:var(--muted); }
.travel-list { display:flex; flex-direction:column; gap:8px; margin-bottom:8px; }
.travel-empty { text-align:center; color:var(--muted); padding:30px; font-size:13px; }
.travel-actions { display:flex; justify-content:space-between; align-items:center; padding:14px; background:var(--surface); border-radius:var(--radius-sm); margin-top:16px; flex-wrap:wrap; gap:12px; }
.travel-actions-left { display:flex; gap:8px; align-items:center; }
.travel-result { margin-top:20px; background:var(--green-gradient); border-radius:var(--radius); padding:18px; color:#fff; }
.travel-result-inner { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
.tr-actions .btn { background:rgba(255,255,255,0.2) !important; border:1.5px solid rgba(255,255,255,0.35) !important; color:#fff !important; }
.tfile-item { display:flex; align-items:center; gap:10px; background:var(--card); border:1.5px solid var(--border); border-radius:10px; padding:10px 14px; cursor:grab; transition:all 0.15s; }
.tfile-item:hover { border-color:var(--turquoise); box-shadow:0 2px 8px rgba(8,145,178,0.12); }
.tfile-item.dragging { opacity:0.5; border-style:dashed; }
.tfile-handle { color:var(--muted); cursor:grab; font-size:16px; padding:4px; }
.tfile-order { width:24px; height:24px; border-radius:50%; background:var(--turquoise); color:#fff; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; flex-shrink:0; }
.tfile-thumb { width:44px; height:44px; border-radius:6px; object-fit:cover; border:1px solid var(--border); flex-shrink:0; }
.tfile-thumb-icon { display:flex; align-items:center; justify-content:center; font-size:22px; background:var(--surface); }
.tfile-info { flex:1; min-width:0; }
.tfile-name { font-weight:700; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tfile-meta { font-size:10px; color:var(--muted); margin-top:3px; display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.tfile-actions { display:flex; gap:4px; }

/* ── Profile avatar ────────────────────────────────────────── */
.profile-avatar-big { width:80px; height:80px; border-radius:50%; background:var(--navy-gradient); color:#fff; display:flex; align-items:center; justify-content:center; font-size:32px; font-weight:800; cursor:pointer; margin:0 auto 12px; border:3px solid rgba(255,255,255,0.3); overflow:hidden; }
.profile-avatar-big img { width:100%; height:100%; object-fit:cover; }
.profile-chip { display:flex; align-items:center; gap:8px; padding:4px 12px 4px 4px; background:rgba(255,255,255,0.08); border:1.5px solid rgba(255,255,255,0.18); border-radius:999px; cursor:pointer; transition:all 0.2s; text-decoration:none; color:#fff; font-family:'Cairo'; }
.profile-chip:hover { background:rgba(255,255,255,0.15); }
.profile-avatar { width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,0.2); color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; overflow:hidden; }
.profile-avatar img { width:100%; height:100%; object-fit:cover; }
.profile-chip-name { font-size:12px; font-weight:700; }

/* ── Live messages ─────────────────────────────────────────── */
@keyframes slideUp { from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:translateY(0);} }
#msg-live-banner { animation:slideUp 0.3s ease; }
.ai-chat-card { display:flex; flex-direction:column; height:calc(100vh - 120px); }
.ai-chat-window { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:12px; background:var(--surface); border-radius:var(--radius-sm); margin-bottom:12px; }
.ai-msg { max-width:80%; padding:12px 16px; border-radius:12px; font-size:13px; line-height:1.6; }
.ai-msg-user { background:var(--navy-gradient); color:#fff; align-self:flex-end; border-radius:12px 12px 0 12px; }
.ai-msg-bot  { background:var(--card); border:1.5px solid var(--border); align-self:flex-start; border-radius:12px 12px 12px 0; }
.ai-input-row { display:flex; gap:8px; align-items:center; }
.ai-input-row input { flex:1; padding:10px 14px; border:1.5px solid var(--border); border-radius:10px; font-family:'Cairo'; font-size:13px; }
.ai-input-row input:focus { border-color:var(--turquoise); outline:none; }

/* ── Dept cards ────────────────────────────────────────────── */
.departments-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px; }
.dept-card { background:var(--card); border:1.5px solid var(--border); border-radius:var(--radius); padding:20px; text-align:center; cursor:pointer; transition:all 0.2s; position:relative; }
.dept-card:hover { border-color:var(--turquoise); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.dept-card-icon { font-size:32px; margin-bottom:8px; }
.dept-card-name { font-weight:700; font-size:13px; color:var(--navy); }
.dept-card-count { font-size:11px; color:var(--muted); margin-top:6px; }
.dept-card-del { position:absolute; top:8px; left:8px; }
.dept-tab { padding:7px 14px; border:1.5px solid var(--border); background:var(--card); border-radius:20px; cursor:pointer; font-family:'Cairo'; font-size:11px; font-weight:700; transition:all 0.2s; }
.dept-tab.active { background:var(--navy-gradient); color:#fff; border-color:var(--navy); }
.dept-tab-badge { background:rgba(255,255,255,0.25); padding:1px 6px; border-radius:10px; font-size:10px; }
.dept-tabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }

/* ── Spinner ───────────────────────────────────────────────── */
@keyframes spin { to{transform:rotate(360deg);} }
.loader { display:inline-block; width:14px; height:14px; border:2px solid rgba(0,0,0,0.1); border-top-color:var(--turquoise); border-radius:50%; animation:spin 0.7s linear infinite; vertical-align:middle; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width:600px) {
  .bulk-actions { flex-direction:column; }
  .bulk-bar .btn { width:100%; }
  .departments-grid { grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); }
}

/* ── PDF split modal ───────────────────────────────────────── */
.pdf-page-row { display:flex; gap:14px; align-items:center; padding:10px; background:var(--card); border-radius:6px; margin-bottom:6px; flex-wrap:wrap; }

/* ── Pass strength ─────────────────────────────────────────── */
.pass-strength { height:4px; border-radius:2px; margin-top:6px; width:0; transition:width 0.3s, background 0.3s; }
.ps-weak   { width:33% !important; background:var(--red)    !important; }
.ps-ok     { width:66% !important; background:var(--orange)  !important; }
.ps-strong { width:100% !important; background:var(--green)  !important; }