@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&display=swap');

:root {
  --primary: #0f6e5a;
  --primary-dark: #0a4f41;
  --bg: #f4f7f6;
  --surface: #ffffff;
  --border: #e0e5e3;
  --text: #1f2a27;
  --text-muted: #6b7873;
  --danger: #c0392b;
  --warning: #b8860b;
  --success: #1e8449;
  --radius: 10px;
}

:root[data-theme="dark"] {
  --primary: #1cb894;
  --primary-dark: #0f6e5a;
  --bg: #12191b;
  --surface: #1b2528;
  --border: #2e3a3d;
  --text: #e6efec;
  --text-muted: #93a19d;
  --danger: #e57368;
  --warning: #e0b03e;
  --success: #4cbf7a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Cairo', 'Tahoma', sans-serif;
  background: var(--bg);
  color: var(--text);
  transition: background 0.2s ease, color 0.2s ease;
}
html:not([dir]) body { direction: rtl; }

a { color: inherit; text-decoration: none; }

.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 240px;
  background: var(--primary-dark);
  color: #fff;
  padding: 20px 16px;
  flex-shrink: 0;
}
.sidebar h1 { font-size: 18px; margin: 0 0 24px; }
.sidebar-brand {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 6px; margin: 0 0 24px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,0.15);
}
.sidebar-brand-icon { font-size: 24px; line-height: 1; }
.sidebar-brand-logo {
  width: 36px; height: 36px; border-radius: 8px; object-fit: cover;
  background: #fff; flex-shrink: 0;
}
.sidebar-brand-name { font-size: 16px; font-weight: 700; line-height: 1.3; color: #fff; }
.sidebar nav a {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  margin-bottom: 4px;
  color: #d9efe9;
  font-weight: 600;
}
.sidebar nav a:hover, .sidebar nav a.active { background: rgba(255,255,255,0.12); color: #fff; }

.main { flex: 1; padding: 24px; }

.topbar {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 24px;
}
.topbar .user-info { font-size: 14px; color: var(--text-muted); }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.stat-card { text-align: center; }
.stat-card .value { font-size: 28px; font-weight: 700; color: var(--primary); }
.stat-card .label { font-size: 13px; color: var(--text-muted); margin-top: 4px; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 10px 12px; text-align: start; border-bottom: 1px solid var(--border); }
th { color: var(--text-muted); font-weight: 600; background: var(--bg); }

.btn {
  display: inline-block;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 9px 18px;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  font-size: 14px;
}
.btn:hover { background: var(--primary-dark); }
.btn.secondary { background: color-mix(in srgb, var(--primary) 9%, var(--surface)); color: var(--primary); border: 1px solid color-mix(in srgb, var(--primary) 55%, var(--border)); }
.btn.secondary:hover:not(:disabled) { background: color-mix(in srgb, var(--primary) 18%, var(--surface)); }

.form-group { margin-bottom: 14px; }
.form-group label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 14px; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  background: var(--surface);
  color: var(--text);
}

.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.badge.available { background: #e6f4ea; color: var(--success); }
.badge.missing, .badge.damaged { background: #fdecea; color: var(--danger); }
.badge.reserved, .badge.under_maintenance { background: #fff6e0; color: var(--warning); }
.badge.unavailable { background: #eee; color: var(--text-muted); }
.badge.borrowed { background: #e3edf9; color: #2a6fb0; }
.badge.warning { background: #fff6e0; color: var(--warning); }
.badge.danger { background: #fdecea; color: var(--danger); }
.badge.success { background: #e6f4ea; color: var(--success); }

/* بادج إشعار على غرار فيسبوك (رسائل جديدة غير مقروءة) */
.nav-badge {
  display: inline-block; min-width: 18px; height: 18px; padding: 0 5px;
  background: #e0245e; color: #fff; border-radius: 999px;
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
  vertical-align: middle;
}
.stat-card.stat-unread { position: relative; }
.stat-card.stat-unread .value { color: #e0245e; }

.stat-card.stat-borrowed .value { color: #2a6fb0; }
.stat-card.stat-overdue .value { color: var(--danger); }
.stat-card.stat-available .value { color: var(--success); }

.login-screen {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--primary-dark), var(--primary));
  position: relative; padding: 16px;
}
.login-box {
  background: var(--surface); color: var(--text); border-radius: 14px; padding: 36px; width: 100%; max-width: 360px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}
.login-box h1 { text-align: center; color: var(--primary-dark); margin-bottom: 4px; }
.login-box p.subtitle { text-align: center; color: var(--text-muted); margin-top: 0; margin-bottom: 24px; font-size: 13px; }
.error-msg { color: var(--danger); font-size: 13px; margin-top: 8px; min-height: 18px; }

.toolbar { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; }
.toolbar input, .toolbar select { padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; font-family: inherit; background: var(--surface); color: var(--text); }

.topbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
#topbarUser { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.topbar .user-info { font-size: 14px; color: var(--text-muted); white-space: nowrap; }
.quick-search {
  padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px;
  font-family: inherit; width: 180px; font-size: 13px;
  background: var(--surface); color: var(--text);
}

.theme-toggle-btn {
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  border-radius: 8px; width: 38px; height: 38px; font-size: 16px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}

.cover-thumb {
  width: 60px; height: 84px; object-fit: cover; border-radius: 4px;
  border: 1px solid var(--border); background: #f0f0f0; flex-shrink: 0;
}
.cover-placeholder {
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; background: linear-gradient(160deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #fff; opacity: 0.85;
}
.zebra-table tbody tr:nth-child(even) { background: var(--bg); }
:root[data-theme="dark"] .zebra-table tbody tr:nth-child(even) { background: #17201f; }
.cover-thumb-large {
  width: 140px; height: 196px; object-fit: cover; border-radius: 6px;
  border: 1px solid var(--border); background: #f0f0f0; float: inline-end; margin-inline-end: 16px;
}
.book-row-title { display: flex; align-items: center; gap: 10px; }

.inline-add-btn {
  padding: 9px 12px; border: 1px solid color-mix(in srgb, var(--primary) 55%, var(--border)); background: color-mix(in srgb, var(--primary) 9%, var(--surface));
  color: var(--primary); border-radius: 8px; cursor: pointer; font-family: inherit; font-weight: 700;
}
.inline-add-btn:hover { background: var(--primary); color: #fff; }
.field-row { display: flex; gap: 8px; align-items: flex-end; }
.field-row .form-group { flex: 1; margin-bottom: 0; }

.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000; padding: 16px;
}
.modal-box {
  background: var(--surface); border-radius: var(--radius);
  padding: 22px; width: 100%; max-width: 520px;
  max-height: 90vh; overflow-y: auto;
  box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}
.modal-box h3 { margin-top: 0; }
.bulk-menu-item {
  display: block; width: 100%; text-align: start; padding: 10px 14px;
  background: none; border: none; cursor: pointer; font-family: inherit;
  font-size: 14px; color: var(--text);
}
.bulk-menu-item:hover { background: var(--bg); }

.modal-close-btn {
  background: none; border: none; font-size: 20px; cursor: pointer;
  color: var(--text-muted); float: inline-end;
}

@media print {
  .sidebar, .topbar, .toolbar, .no-print { display: none !important; }
  .main { padding: 0 !important; }
  body { background: #fff; color: #000; }
  .card { border: none; }
  #printHeader { display: block !important; }
}

/* عرض الكتب كبطاقات */
.books-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 16px;
}
.book-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px; display: flex; flex-direction: column; gap: 6px; text-align: center;
}
.book-card .cover-thumb-large { float: none; margin: 0 auto; }
.book-card .book-card-title { font-weight: 600; font-size: 14px; line-height: 1.4; }
.book-card .book-card-meta { font-size: 12px; color: var(--text-muted); }
.book-card .badge { font-size: 10px; padding: 2px 8px; }
.view-toggle-btn.active { background: var(--brand, #2a6fb0); color: #fff; }

/* عرض "قائمة" — صف مضغوط لكل كتاب: صورة مصغّرة + عنوان وبيانات موجزة */
.books-list { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.book-list-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  text-decoration: none; color: var(--text); border-bottom: 1px solid var(--border);
}
.book-list-item:last-child { border-bottom: none; }
.book-list-item:hover { background: var(--bg); }
.book-list-item .cover-thumb { flex-shrink: 0; }
.book-list-info { flex: 1; min-width: 0; }
.book-list-title { font-weight: 600; font-size: 14px; margin-bottom: 2px; }
.book-list-meta { font-size: 12px; color: var(--text-muted); }
.book-list-meta .badge { font-size: 10px; padding: 2px 8px; }

/* بطاقة العضوية القابلة للطباعة — مخفية في العرض العادي، تظهر فقط عند
   الطباعة عبر printMembershipCard() (انظر JS في member-detail.html) */
#membershipCardPrint { display: none; }
.membership-card {
  width: 340px; margin: 0 auto; border: 2px solid #2a6fb0; border-radius: 12px;
  padding: 18px 20px; text-align: center; font-family: inherit;
}
.membership-card-branch { font-size: 12px; color: #555; margin-bottom: 4px; }
.membership-card-title { font-size: 14px; font-weight: 700; color: #2a6fb0; letter-spacing: 1px; margin-bottom: 10px; }
.membership-card-name { font-size: 20px; font-weight: 700; margin-bottom: 10px; }
.membership-card-row { display: flex; justify-content: space-between; font-size: 13px; padding: 4px 0; border-top: 1px dashed #ccc; }
.membership-card-row span { color: #555; }
@media print {
  body.print-card-mode .card:not(#membershipCardPrint),
  body.print-card-mode .no-print { display: none !important; }
  body.print-card-mode #membershipCardPrint { display: block !important; margin-top: 40px; }
}

/* اقتراحات العناوين المشابهة عند إضافة كتاب (لتفادي التكرار عبر الفروع) */
.title-suggestions {
  position: absolute; z-index: 40; background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; box-shadow: 0 8px 20px rgba(0,0,0,0.15); width: 100%; max-height: 260px;
  overflow-y: auto; margin-top: 2px;
}
.title-suggestion-item {
  display: block; padding: 8px 12px; cursor: pointer; text-decoration: none; color: var(--text);
  border-bottom: 1px solid var(--border); font-size: 13px;
}
.title-suggestion-item:last-child { border-bottom: none; }
.title-suggestion-item:hover { background: var(--bg); }
.title-suggestion-item small { display: block; color: var(--text-muted); margin-top: 2px; }



/* ===== قائمة جانبية قابلة للطي ===== */
.sidebar { transition: width .2s ease; overflow: hidden; }
.main { min-width: 0; }
.sidebar nav a { position: relative; white-space: nowrap; }
.nav-icon { display: inline-block; width: 26px; text-align: center; margin-inline-end: 6px; }
.sidebar-toggle {
  background: rgba(255,255,255,0.12); border: none; color: #fff; border-radius: 8px;
  width: 100%; padding: 6px; cursor: pointer; font-size: 18px; margin-bottom: 12px;
}
.sidebar-toggle:hover { background: rgba(255,255,255,0.22); }
.sidebar.collapsed { width: 68px; padding: 20px 8px; }
.sidebar.collapsed .nav-label, .sidebar.collapsed .sidebar-brand-name { display: none; }
.sidebar.collapsed nav a { text-align: center; padding: 10px 2px; }
.sidebar.collapsed .nav-icon { margin: 0; font-size: 19px; }
.sidebar.collapsed .nav-badge { position: absolute; top: 2px; inset-inline-end: 4px; min-width: 14px; height: 14px; line-height: 14px; font-size: 9px; padding: 0 3px; }
.sidebar.collapsed .sidebar-brand { margin-bottom: 14px; padding-bottom: 10px; }

/* ===== الكاشير والطلبات والمخزون ===== */
.pos-layout { display: grid; grid-template-columns: 1fr 420px; gap: 16px; align-items: start; }
.pos-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; max-height: 62vh; overflow-y: auto; }
.pos-item { border: 1px solid var(--border); border-radius: 8px; padding: 10px; cursor: pointer; background: var(--surface); text-align: start; font-family: inherit; color: var(--text); }
.pos-item:hover { border-color: var(--primary); }
.pos-item.out { opacity: .5; }
.pos-item b { display: block; font-size: 13px; line-height: 1.4; margin-bottom: 4px; }
.pos-item .m { font-size: 12px; color: var(--text-muted); }
.pos-cart-row { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.pos-total { font-size: 24px; font-weight: 700; color: var(--primary); }
.tabs { display: flex; gap: 6px; margin-bottom: 14px; border-bottom: 2px solid var(--border); flex-wrap: wrap; }
.tabs button { background: none; border: none; padding: 9px 16px; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--text-muted); border-bottom: 3px solid transparent; margin-bottom: -2px; }
.tabs button.active { color: var(--primary); border-bottom-color: var(--primary); }
.table-wrap { overflow-x: auto; }
.mini-input { width: 100px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; font-family: inherit; background: var(--surface); color: var(--text); }
#toastBox { position: fixed; bottom: 20px; inset-inline-end: 20px; z-index: 3000; display: flex; flex-direction: column; gap: 8px; }
.toast { padding: 10px 16px; border-radius: 8px; color: #fff; font-size: 14px; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.toast.success { background: var(--success); } .toast.error { background: var(--danger); }
@media (max-width: 1000px) { .pos-layout { grid-template-columns: 1fr; } }

/* ===== فواصل مجموعات القائمة الجانبية ===== */
.nav-group-title {
  display: flex; align-items: center; gap: 8px; margin: 14px 4px 6px; font-size: 11px; font-weight: 700;
  color: rgba(255,255,255,0.6); white-space: nowrap;
}
.nav-group-title::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,0.18); order: 2; }
.sidebar nav .nav-group:first-child .nav-group-title, .sidebar nav > .nav-group-title:first-child { margin-top: 0; }
/* مجموعات قابلة للطي: العنوان زر، والسهم يدور عند الطي */
button.nav-group-title { width: calc(100% - 8px); background: none; border: 0; font-family: inherit; cursor: pointer; text-align: start; padding: 2px 0; border-radius: 6px; }
button.nav-group-title:hover { color: #fff; }
button.nav-group-title:focus-visible { outline: 2px solid rgba(255,255,255,.6); outline-offset: 2px; }
.nav-caret { order: 3; font-size: 11px; transition: transform .2s ease; }
.nav-group.closed .nav-caret { transform: rotate(90deg); }
.nav-group.closed .nav-group-items { display: none; }
/* القائمة المطوية إلى أيقونات: تُعرض كل الروابط ولا سهم */
.sidebar.collapsed .nav-caret { display: none; }
.sidebar.collapsed .nav-group.closed .nav-group-items { display: block; }
.sidebar.collapsed .nav-group-title { margin: 10px 4px 6px; }
.sidebar.collapsed .nav-group-title span { display: none; }

/* ===== تبويبات شاشة الكتاب (الرئيسي / البيع / الإعارة) ===== */
.book-tabs { max-width: 760px; }
.book-tabs button .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--success); margin-inline-start: 6px; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.radio-line { display: flex; align-items: center; gap: 8px; font-weight: 400; margin-bottom: 6px; }
.radio-line input { width: auto; }
.info-box { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; font-size: 13px; color: var(--text-muted); margin: 10px 0; }
.kv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-bottom: 12px; }
.kv-grid > div { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; }
.kv-grid span { display: block; font-size: 12px; color: var(--text-muted); }
.kv-grid b { font-size: 17px; }

/* ===== اقتراحات البحث مع صور الأغلفة (الكاشير والمتجر) ===== */
.suggest-wrap { position: relative; }
.suggest-box {
  position: absolute; top: 100%; inset-inline-start: 0; inset-inline-end: 0; z-index: 60; margin-top: 4px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 28px rgba(0,0,0,.22); max-height: 380px; overflow-y: auto;
}
.suggest-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; cursor: pointer; color: var(--text);
  border-bottom: 1px solid var(--border); text-decoration: none; text-align: start; width: 100%; background: none; border-inline: none; border-top: none; font-family: inherit; font-size: 13px;
}
.suggest-item:last-child { border-bottom: none; }
.suggest-item:hover, .suggest-item.hl { background: rgba(15,110,90,.10); }
.suggest-item img, .suggest-item .ph { width: 38px; height: 54px; object-fit: cover; border-radius: 4px; flex-shrink: 0; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; }
.suggest-item .t { font-weight: 700; line-height: 1.4; }
.suggest-item .m { font-size: 12px; color: var(--text-muted); }
.suggest-item .p { margin-inline-start: auto; font-weight: 700; color: var(--primary); white-space: nowrap; }
.suggest-empty { padding: 12px; font-size: 13px; color: var(--text-muted); }

/* ===== بطاقات مؤشرات قابلة للنقر (لوحة التحكم) ===== */
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
a.stat-link { display: block; text-decoration: none; color: inherit; }
a.stat-link .stat-card { height: 100%; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
a.stat-link:hover .stat-card, a.stat-link:focus-visible .stat-card { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.14); }
.filter-chip { display: flex; align-items: center; gap: 10px; background: rgba(15,110,90,.10); border: 1px solid var(--primary); border-radius: 8px; padding: 6px 12px; font-size: 13px; margin-bottom: 10px; }
.filter-chip a { margin-inline-start: auto; color: var(--primary); cursor: pointer; text-decoration: underline; }

/* ===== زرا «الكاشير» و«المتجر» في أعلى القائمة: الأكثر استعمالًا فبتنسيق مختلف ===== */
.nav-quick-wrap { display: flex; flex-direction: column; gap: 8px; margin: 2px 0 10px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.18); }
.sidebar nav a.nav-quick {
  display: flex; align-items: center; justify-content: flex-start; gap: 4px; padding: 13px 14px; border-radius: 12px;
  font-size: 16px; font-weight: 800; letter-spacing: .2px; border: 1px solid transparent;
  box-shadow: 0 3px 8px rgba(0,0,0,.28); transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.sidebar nav a.nav-quick .nav-icon { font-size: 22px; width: 30px; }
.sidebar nav a.nav-quick:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(0,0,0,.35); filter: brightness(1.06); }
.sidebar nav a.nav-quick-pos { background: linear-gradient(135deg, #ffcf4a, #f59f00); color: #3b2500; }
.sidebar nav a.nav-quick-pos:hover, .sidebar nav a.nav-quick-pos.active { background: linear-gradient(135deg, #ffd96b, #ffad1f); color: #3b2500; }
.sidebar nav a.nav-quick-store { background: linear-gradient(135deg, #ffffff, #d9efe9); color: var(--primary-dark); }
.sidebar nav a.nav-quick-store:hover, .sidebar nav a.nav-quick-store.active { background: #fff; color: var(--primary-dark); }
.sidebar nav a.nav-quick.active { outline: 2px solid #fff; outline-offset: 1px; }
.sidebar.collapsed .nav-quick-wrap { gap: 6px; padding-bottom: 8px; }
.sidebar.collapsed .sidebar nav a.nav-quick, .sidebar.collapsed nav a.nav-quick { padding: 10px 0; justify-content: center; border-radius: 10px; }

/* ===== معرض صور الروابط + نافذة التكبير ===== */
.gallery-wrap { margin: 14px 0; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.g-item { padding: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--surface); cursor: zoom-in; aspect-ratio: 1 / 1; transition: transform .12s ease, box-shadow .12s ease; }
.g-item:hover, .g-item:focus-visible { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.18); }
.g-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lightbox { position: fixed; inset: 0; z-index: 400; background: rgba(0,0,0,.88); display: flex; align-items: center; justify-content: center; padding: 16px; }
.lb-img { max-width: 92vw; max-height: 78vh; object-fit: contain; border-radius: 8px; background: #fff; }
.lb-x { position: absolute; top: calc(10px + env(safe-area-inset-top, 0px)); inset-inline-end: 14px; width: 44px; height: 44px; border-radius: 50%; border: none; background: rgba(255,255,255,.18); color: #fff; font-size: 20px; cursor: pointer; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 62px; border: none; background: rgba(255,255,255,.16); color: #fff; font-size: 34px; cursor: pointer; border-radius: 10px; }
.lb-prev { inset-inline-start: 10px; } .lb-next { inset-inline-end: 10px; }
.lb-cap { position: absolute; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); inset-inline-end: 0; inset-inline-start: 0; text-align: center; color: #fff; font-size: 14px; padding: 0 12px; }
.lb-cap a { color: #ffd96b; margin-inline: 10px; }


/* عرض «الملخص» في صفحة الكتب */
.books-summary { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr)); gap: 12px; }
.book-summary-card { display: flex; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; align-items: flex-start; }
.book-summary-card .cover-thumb-large { width: 96px; height: 140px; object-fit: cover; border-radius: 6px; flex-shrink: 0; float: none; }
.book-summary-card .bs-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; align-self: stretch; }
.bs-title { font-size: 16px; font-weight: 700; line-height: 1.4; color: var(--text); text-decoration: none; }
.bs-title:hover { color: var(--primary); }
.bs-meta { font-size: 12px; color: var(--text-muted); }
.bs-text { margin: 4px 0; font-size: 13px; line-height: 1.8; color: var(--text-muted); }
.bs-more { color: var(--primary); font-weight: 700; text-decoration: none; white-space: nowrap; }
.bs-foot { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 12px; color: var(--text-muted); }

/* =====================================================================
   واجهة الهاتف (≤ 768px): قائمة جانبية منسدلة، شريط علوي مضغوط،
   جداول كبطاقات، نماذج وأزرار مناسبة للمس، وكاشير مخصّص للهاتف
   ===================================================================== */
.m-bar, .nav-backdrop, .sidebar-close, .m-cart-bar { display: none; }
.filter-collapse-btn { display: inline-flex; align-items: center; gap: 6px; }
.filter-collapse-btn .arrow { display: inline-block; transition: transform .2s ease; }
.filter-collapse-btn[aria-expanded="true"] .arrow { transform: rotate(180deg); }
.filter-collapse-btn .fcount { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--primary); color: #fff; font-size: 12px; text-align: center; line-height: 20px; }
.filters-box { display: contents; }
.filters-box.collapsed { display: none; }

@media (max-width: 768px) {
  html { -webkit-text-size-adjust: 100%; }
  .login-screen { align-items: flex-start; padding: 68px 12px 24px; }
  .login-box { padding: 24px 18px; }
  .login-box h1 { font-size: 22px; }
  .app-shell { display: block; overflow-x: clip; }
  .app-shell > .main { padding: 12px !important; width: 100%; }

  /* ----- شريط التطبيق العلوي (☰ + العنوان) ----- */
  .m-bar {
    display: flex; align-items: center; gap: 10px;
    position: sticky; top: 0; z-index: 900;
    margin: -12px -12px 12px; padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px;
    background: var(--primary-dark); color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.25);
  }
  .m-menu-btn {
    flex-shrink: 0; width: 42px; height: 42px; border: none; border-radius: 10px; cursor: pointer;
    background: rgba(255,255,255,.14); color: #fff; font-size: 22px; line-height: 1; font-family: inherit;
  }
  .m-back-btn {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 14px; border: none; border-radius: 10px; cursor: pointer;
    background: rgba(255,255,255,.14); color: #fff; font-family: inherit; font-size: 15px; font-weight: 700;
  }
  .m-back-btn:active, .m-menu-btn:active { background: rgba(255,255,255,.28); }
  .m-title { flex: 1; min-width: 0; font-size: 17px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* ----- القائمة الجانبية كدرج يُفتح من اليمين ----- */
  .sidebar, .sidebar.collapsed {
    position: fixed; top: 0; bottom: 0; inset-inline-start: 0; z-index: 1500;
    width: min(290px, 86vw); height: 100vh; height: 100dvh; padding: 16px;
    overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch;
    transform: translateX(105%); visibility: hidden;
    transition: transform .22s ease, visibility 0s linear .22s;
    box-shadow: -8px 0 30px rgba(0,0,0,.35);
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
  body.nav-open .sidebar, body.nav-open .sidebar.collapsed { transform: none; visibility: visible; transition: transform .22s ease; }
  .nav-backdrop { display: block; position: fixed; inset: 0; z-index: 1400; background: rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
  body.nav-open .nav-backdrop { opacity: 1; pointer-events: auto; }
  body.nav-open { overflow: hidden; }
  /* تجاهل حالة «الطي» في الهاتف: دائمًا قائمة كاملة بالنصوص */
  .sidebar .sidebar-toggle { display: none; }
  .sidebar-close {
    display: block; width: 100%; margin-bottom: 12px; padding: 8px; border: none; border-radius: 8px; cursor: pointer;
    background: rgba(255,255,255,.14); color: #fff; font-family: inherit; font-size: 15px; font-weight: 700;
  }
  .sidebar.collapsed .nav-label, .sidebar.collapsed .sidebar-brand-name { display: inline; }
  .sidebar.collapsed nav a { text-align: start; padding: 12px; }
  .sidebar.collapsed .nav-icon { margin-inline-end: 6px; font-size: inherit; }
  .sidebar.collapsed .nav-badge { position: static; min-width: 18px; height: 18px; line-height: 18px; font-size: 11px; padding: 0 5px; }
  .sidebar.collapsed .nav-group-title span { display: inline; }
  .sidebar.collapsed .nav-caret { display: inline; }
  .sidebar.collapsed .nav-group.closed .nav-group-items { display: none; }
  .sidebar.collapsed .nav-group-title { margin: 14px 4px 6px; }
  .sidebar.collapsed .sidebar-brand { margin-bottom: 24px; padding-bottom: 16px; }
  .sidebar.collapsed .sidebar-brand-name { display: block; }
  .sidebar nav a { padding: 12px; font-size: 15px; }
  .sidebar.collapsed nav a.nav-quick, .sidebar nav a.nav-quick { padding: 13px 14px; justify-content: flex-start; }

  /* ----- الشريط العلوي للصفحة ----- */
  .topbar { flex-direction: column; align-items: stretch; gap: 10px; margin-bottom: 14px; }
  .topbar h2 { display: none; }
  #topbarUser { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
  #topbarUser > div:first-child { display: block !important; width: 100%; }
  .quick-search { width: 100%; }
  .topbar .user-info { flex: 1; min-width: 0; white-space: normal; font-size: 13px; }
  #topbarUser .btn { margin: 0 !important; padding: 8px 12px; font-size: 13px; }
  h2 { font-size: 19px; }
  h3 { font-size: 16px; }

  /* ----- بطاقات ومؤشرات ----- */
  .card { padding: 14px; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
  .stat-card .value { font-size: 22px; }
  .stat-card .label { font-size: 12px; }
  .section-head { align-items: flex-start; }
  .kv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kv-grid b { font-size: 15px; }
  .cat-grid { grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)) !important; }
  .books-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
  .card[style*="max-width"] { max-width: 100% !important; }
  .info-box[style*="max-width"], .book-tabs { max-width: 100% !important; }

  /* ----- النماذج وأدوات التصفية: حقول بحجم مريح للمس (16px تمنع تكبير iOS التلقائي) ----- */
  .form-group input, .form-group select, .form-group textarea,
  .toolbar input, .toolbar select, .mini-input, .quick-search,
  input[type="text"], input[type="search"], input[type="number"], input[type="date"],
  input[type="password"], input[type="email"], input[type="tel"], input[type="url"], select, textarea {
    font-size: 16px; min-height: 42px;
  }
  input[type="checkbox"], input[type="radio"] { min-height: 0; }
  .btn, .inline-add-btn { min-height: 42px; padding: 9px 14px; }
  .toolbar { gap: 8px; }
  .toolbar > * { flex: 1 1 140px; min-width: 0 !important; max-width: 100%; }
  .filters-box > select, .filters-box > input { flex: 1 1 140px; min-width: 0; max-width: 100%; }
  .filter-collapse-btn { justify-content: space-between; }
  .toolbar > label { display: flex; align-items: center; gap: 6px; }
  .toolbar > label input { flex: 1; min-width: 0; }
  .toolbar > div[style*="min-width"] { flex: 1 1 100% !important; min-width: 0 !important; }
  .toolbar > b, .toolbar > span { flex: 1 1 100%; margin: 0 !important; }
  .field-row { flex-wrap: wrap; }
  .field-row .form-group { flex: 1 1 140px; }
  .form-group[style*="max-width"] { max-width: 100% !important; }
  .mini-input, .mini-input[style*="width"] { width: 100% !important; max-width: 140px; }

  /* ----- التبويبات: شريط أفقي قابل للتمرير ----- */
  .tabs, .settings-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .tabs::-webkit-scrollbar, .settings-tabs::-webkit-scrollbar { display: none; }
  .tabs button, .settings-tab-btn { white-space: nowrap; flex-shrink: 0; padding: 10px 14px; }

  /* ----- النوافذ المنبثقة ----- */
  .modal-overlay { padding: 8px; align-items: flex-end; }
  .modal-box { max-width: 100% !important; width: 100% !important; max-height: 92vh; max-height: 92dvh; padding: 16px; border-radius: 14px 14px 10px 10px; }
  .modal-close-btn { font-size: 24px; padding: 4px 8px; }

  /* ----- القوائم المنسدلة (المزيد / الإجراءات الجماعية / قائمة الصف) كورقة سفلية ----- */
  #moreMenu, #bulkMenu, .row-menu {
    position: fixed !important; top: auto !important; inset-inline-end: 10px !important; inset-inline-start: 10px !important;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important; min-width: 0 !important;
    max-height: 70vh; overflow-y: auto; z-index: 1300 !important; box-shadow: 0 -6px 30px rgba(0,0,0,.35) !important;
  }
  .bulk-menu-item { padding: 14px; font-size: 15px; }
  .title-suggestions, .suggest-box { max-height: 60vh; }
  .suggest-item { padding: 10px 12px; }

  /* ----- الجداول → بطاقات (data-label يُضاف تلقائيًا من layout.js) ----- */
  .app-shell table:not(.no-stack), .app-shell table:not(.no-stack) tbody,
  .app-shell table:not(.no-stack) tr, .app-shell table:not(.no-stack) td { display: block; width: 100%; }
  .app-shell table:not(.no-stack) thead { display: none; }
  .app-shell table:not(.no-stack) tfoot { display: block; }
  .app-shell table:not(.no-stack) tr {
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    margin-bottom: 10px; padding: 4px 12px;
  }
  .app-shell table.zebra-table:not(.no-stack) tbody tr:nth-child(even),
  :root[data-theme="dark"] .app-shell table.zebra-table:not(.no-stack) tbody tr:nth-child(even) { background: var(--surface); }
  .app-shell table:not(.no-stack) td {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 8px 0; border: none; border-bottom: 1px dashed var(--border);
    min-width: 0 !important; max-width: none !important; white-space: normal !important;
    text-align: end; overflow-wrap: anywhere; font-size: 14px;
  }
  .app-shell table:not(.no-stack) td:last-child { border-bottom: none; }
  .app-shell table:not(.no-stack) td::before {
    content: attr(data-label); flex: 0 0 34%; max-width: 40%; text-align: start;
    font-weight: 700; font-size: 12px; color: var(--text-muted);
  }
  .app-shell table:not(.no-stack) td[data-label=""]::before,
  .app-shell table:not(.no-stack) td:not([data-label])::before { display: none; }
  .app-shell table:not(.no-stack) td[data-label=""],
  .app-shell table:not(.no-stack) td:not([data-label]) { justify-content: flex-start; flex-wrap: wrap; text-align: start; }
  .app-shell table:not(.no-stack) td input:not([type="checkbox"]):not([type="radio"]),
  .app-shell table:not(.no-stack) td select { max-width: 60%; }
  .app-shell table:not(.no-stack) td .btn { padding: 6px 12px; min-height: 36px; }
  .app-shell table:not(.no-stack) td > .td-v { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 8px; min-width: 0; flex: 1 1 auto; }
  .app-shell table:not(.no-stack) td[data-label=""] > .td-v { justify-content: flex-start; }
  .table-wrap { overflow-x: visible; }
  .cover-thumb { width: 48px; height: 68px; }
  .book-row-title { text-align: start; flex-wrap: wrap; }
  .book-row-title .badge { flex-shrink: 0; white-space: nowrap; }

  /* ----- قوائم/بطاقات الكتب ----- */
  .book-list-item { flex-wrap: wrap; padding: 10px; }
  .book-list-pdfs { max-width: 100% !important; width: 100%; margin-inline-start: 0; justify-content: flex-start; }
  .cover-thumb-large { float: none; display: block; margin: 0 auto 12px; }
  .book-summary-card { padding: 10px; gap: 10px; }
  .book-summary-card .cover-thumb-large { width: 72px; height: 105px; margin: 0; }

  /* ----- الكاشير ----- */
  .pos-page { grid-template-columns: minmax(0, 1fr) !important; }
  .pos-head { gap: 8px; }
  .pos-title { display: none; }
  .pos-head .tabs { flex: 1 1 auto; }
  /* الشريط العلوي للكاشير ثابت أثناء التمرير، ومضغوط في 3 صفوف: (التبويب + خروج) ثم (بحث) ثم (التصنيف + مفضلة + العرض).
     نرفع أولوية القواعد (.pos-head ... !important) لأن أنماط pos.html الداخلية تُحمَّل بعد هذا الملف */
  .pos-head { gap: 6px; padding: 6px 0; }
  .pos-head .pos-tools { display: contents !important; }
  .pos-head .tabs { order: 1; flex: 1 1 auto; }
  /* «معلّقة» و«خروج» لهما الترتيب نفسه (2): يُحسم التعادل بترتيب العناصر في الصفحة فيأتي «معلّقة» ثم «خروج» في الصف الأول */
  .pos-head #heldBtn { order: 2; }
  .pos-head .pos-logout { order: 2; }
  .pos-head .suggest-wrap { order: 3; flex: 1 1 100% !important; width: 100% !important; min-width: 0 !important; }
  .pos-head #branchSel { order: 4; flex: 1 1 100%; }
  .pos-head #catSel { order: 5; flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; }
  .pos-head .pos-mini { order: 6; }
  .pos-head .pos-vs { order: 7; }
  .pos-head select, .pos-head input { height: 40px !important; font-size: 16px !important; }
  .pos-head .pos-mini { height: 40px; }
  .pos-head .pos-vs button { height: 38px; }
  .pos-logout { height: 42px !important; padding: 0 14px !important; }
  .pos-results-card { grid-column: 1 !important; grid-row: auto !important; min-height: 0 !important; }
  .pos-invoice { grid-column: 1 !important; grid-row: auto !important; position: static !important; max-height: none !important; overflow: visible !important; scroll-margin-top: 70px; }
  .pos-results { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: none; gap: 8px; }
  .pos-item { padding: 10px 8px; min-height: 64px; }
  .pos-item b { font-size: 13px; }
  .pos-cart-row { grid-template-columns: 1fr auto; }
  .pos-cart-row > div:last-child { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; }
  .pos-cart-row .qty button { width: 38px; height: 38px; font-size: 18px; }
  .pos-total { font-size: 22px; }
  #completeBtn { min-height: 50px; font-size: 16px; }
  #viewSales { grid-column: 1 / -1; }
  .m-cart-bar {
    position: fixed; z-index: 800; inset-inline-start: 10px; inset-inline-end: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border: none; border-radius: 14px;
    background: var(--primary); color: #fff; font-family: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
    box-shadow: 0 6px 20px rgba(0,0,0,.35);
  }
  .m-cart-bar.show { display: flex; }
  body.has-cart-bar .main { padding-bottom: 84px !important; }
  #toastBox { inset-inline-end: 10px; inset-inline-start: 10px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .toast { text-align: center; }

  /* ----- صفحات أخرى ----- */
  .settings-panel .toggle-row { gap: 12px; }
  .lightbox .lb-nav { width: 38px; height: 52px; }
}

@media (max-width: 380px) {
  .stats-grid { gap: 8px; }
  .pos-results { grid-template-columns: 1fr; }
  .app-shell > .main { padding: 10px !important; }
  .m-bar { margin: -10px -10px 10px; }
}


/* ===== حقول الإدخال متوافقة مع الثيمين (فاتح/داكن) في كل الصفحات =====
   :where() بخصوصية صفرية: أي تنسيق خاص بصفحة يبقى أقوى، وما لم يُنسَّق يرث ألوان الثيم بدل ألوان المتصفح البيضاء */
:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]), select, textarea) {
  background-color: var(--surface); color: var(--text); border-color: var(--border); caret-color: var(--text);
}
:where(input, select, textarea)::placeholder { color: var(--text-muted); opacity: .75; }
:where(input, select, textarea):disabled, :where(input, textarea)[readonly] { background-color: color-mix(in srgb, var(--surface) 82%, var(--border)); color: var(--text-muted); opacity: 1; cursor: not-allowed; }
:where(input, select, textarea):focus-visible { outline: 2px solid color-mix(in srgb, var(--primary) 60%, transparent); outline-offset: 1px; border-color: var(--primary); }
:where(select) option, :where(select) optgroup { background-color: var(--surface); color: var(--text); }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill, select:-webkit-autofill {
  -webkit-text-fill-color: var(--text); caret-color: var(--text); box-shadow: 0 0 0 1000px var(--surface) inset; transition: background-color 9999s ease-out 0s;
}
:where(input[type="checkbox"], input[type="radio"], input[type="range"]) { accent-color: var(--primary); }

/* ===== ساعة وتاريخ أعلى القائمة الجانبية ===== */
.sidebar-clock { width: 100%; text-align: center; margin: 0 0 14px; padding: 10px 6px 12px; border-radius: 12px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: #fff; font-variant-numeric: tabular-nums; }
.sidebar-clock .sc-time { display: flex; justify-content: center; align-items: baseline; direction: ltr; font-weight: 800; font-size: 34px; line-height: 1.1; letter-spacing: 1px; white-space: nowrap; }
.sidebar-clock .sc-s { font-size: 16px; font-weight: 600; opacity: .7; margin-inline-start: 2px; }
.sidebar-clock .sc-sep { opacity: .75; margin: 0 1px; }
.sidebar-clock .sc-date { margin-top: 6px; font-size: 12.5px; font-weight: 600; opacity: .85; line-height: 1.5; }
/* مطويّة: الساعة فوق والدقائق تحتها فقط، دون تشوّه عرض العمود */
.sidebar.collapsed .sidebar-clock { padding: 8px 0; margin-bottom: 12px; }
.sidebar.collapsed .sidebar-clock .sc-time { flex-direction: column; align-items: center; font-size: 21px; line-height: 1.05; letter-spacing: 0; }
.sidebar.collapsed .sidebar-clock .sc-sep, .sidebar.collapsed .sidebar-clock .sc-s, .sidebar.collapsed .sidebar-clock .sc-date { display: none; }
@media (max-width: 768px) {          /* الدرج على الهاتف يُعرض كاملًا دائمًا */
  .sidebar.collapsed .sidebar-clock { padding: 10px 6px 12px; margin-bottom: 14px; }
  .sidebar.collapsed .sidebar-clock .sc-time { flex-direction: row; align-items: baseline; font-size: 34px; line-height: 1.1; letter-spacing: 1px; }
  .sidebar.collapsed .sidebar-clock .sc-sep, .sidebar.collapsed .sidebar-clock .sc-s { display: inline; }
  .sidebar.collapsed .sidebar-clock .sc-date { display: block; }
}
@media print { .sidebar-clock { display: none; } }


/* ===== الطباعة: إخفاء ترويسة المتصفح وتذييله (الرابط والتاريخ والعنوان) بهامش صفحة صفري؛ الهامش الفعلي يأتي من حشوة المحتوى ===== */
@page { margin: 0; }
@media print {
  body { padding: 8mm; box-sizing: border-box; }
}

/* ===== النوافذ المنبثقة: منع تحديد النص (تبقى حقول الإدخال قابلة للتحديد والنسخ) ===== */
.modal-overlay, .modal-box, .lightbox {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.modal-overlay input, .modal-overlay textarea, .modal-overlay select, .modal-overlay [contenteditable="true"],
.modal-box input, .modal-box textarea, .modal-box select, .modal-box [contenteditable="true"] {
  -webkit-user-select: text; user-select: text;
}


/* ===== الفرنسية: اتجاه يسار→يمين (html[dir=ltr]) — الخصائص المنطقية أعلاه تنقلب تلقائيًا؛ هنا ما لا ينقلب ===== */
html[dir="ltr"] .switch input:checked + .slider:before { transform: translateX(20px); }
html[dir="ltr"] .sidebar { box-shadow: 8px 0 30px rgba(0,0,0,.35); }
@media (max-width: 900px) {
  html[dir="ltr"] .sidebar, html[dir="ltr"] .sidebar.collapsed { transform: translateX(-105%); box-shadow: 8px 0 30px rgba(0,0,0,.35); }
  html[dir="ltr"] body.nav-open .sidebar, html[dir="ltr"] body.nav-open .sidebar.collapsed { transform: none; }
}
html[dir="ltr"] .lang-sw { direction: ltr; }


/* ===== أزرار أعلى القائمة الجانبية: الرئيسية + الخروج + الثيم (عند الطيّ: «الرئيسية» فقط) ===== */
.sidebar-actions { display: flex; gap: 6px; width: 100%; margin: 0 0 10px; }
.sidebar-actions .sa-btn { flex: 1 1 0; min-width: 0; height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 6px; border-radius: 10px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.10); color: #fff; font: 700 13px inherit; font-family: inherit; text-decoration: none; cursor: pointer; white-space: nowrap; overflow: hidden; }
.sidebar-actions .sa-btn:hover { background: rgba(255,255,255,.22); }
.sidebar-actions .sa-logout:hover { background: rgba(220,60,60,.55); }
.sidebar-actions .sa-lbl { display: none; font-size: 12px; }
.sidebar.collapsed .sidebar-actions .sa-logout, .sidebar.collapsed .sidebar-actions .sa-theme { display: none; }
@media (max-width: 900px) { .sidebar.collapsed .sidebar-actions .sa-logout, .sidebar.collapsed .sidebar-actions .sa-theme { display: inline-flex; } }
@media print { .sidebar-actions { display: none; } }


/* ===== مركز الإشعارات ===== */
.sa-bell { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; height: 38px; margin: 0 0 8px; padding: 0 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.10); color: #fff; font: 700 13px inherit; font-family: inherit; cursor: pointer; overflow: visible; }
.sa-bell:hover { background: rgba(255,255,255,.22); } .sa-bell .bi { font-size: 16px; } .sa-bell .sa-lbl { flex: 1; text-align: start; }
.sa-bell.has .bi { animation: bellRing 1.6s ease 1; } @keyframes bellRing { 0%,100% { transform: rotate(0) } 15% { transform: rotate(16deg) } 30% { transform: rotate(-14deg) } 45% { transform: rotate(10deg) } 60% { transform: rotate(-6deg) } }
.sa-bell .nb { min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #f59e0b; color: #1b1300; font-size: 11.5px; line-height: 20px; text-align: center; font-weight: 800; }
.sa-bell.danger .nb { background: #ef4444; color: #fff; } .sa-bell .nb[hidden] { display: none; }
.sidebar.collapsed .sa-bell { justify-content: center; padding: 0; } .sidebar.collapsed .sa-bell .sa-lbl { display: none; }
.sidebar.collapsed .sa-bell .nb { position: absolute; top: -6px; inset-inline-end: -4px; min-width: 18px; height: 18px; line-height: 18px; font-size: 10.5px; }
@media (max-width: 900px) { .sidebar.collapsed .sa-bell { justify-content: flex-start; padding: 0 12px; } .sidebar.collapsed .sa-bell .sa-lbl { display: inline; } .sidebar.collapsed .sa-bell .nb { position: static; } }
#notifPanel { position: fixed; z-index: 3000; width: 340px; max-width: calc(100vw - 16px); max-height: 70vh; display: flex; flex-direction: column; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 18px 50px rgba(0,0,0,.35); overflow: hidden; }
#notifPanel[hidden] { display: none; }
#notifPanel.sheet { top: 8px; left: 8px; right: 8px; width: auto; max-width: none; max-height: 78vh; }
#notifPanel .np-h { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--border); }
#notifPanel .np-x { border: 0; background: none; color: inherit; font-size: 16px; cursor: pointer; }
#notifPanel .np-list { overflow: auto; }
#notifPanel .np-i { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--border); color: inherit; text-decoration: none; border-inline-start: 4px solid transparent; }
#notifPanel .np-i:hover { background: rgba(127,127,127,.10); } #notifPanel .np-i .ic { font-size: 18px; } #notifPanel .np-i .tx { flex: 1; font-size: 13.5px; line-height: 1.6; } #notifPanel .np-i .go { opacity: .5; font-size: 18px; }
#notifPanel .np-i.danger { border-inline-start-color: #ef4444; } #notifPanel .np-i.warn { border-inline-start-color: #f59e0b; } #notifPanel .np-i.info { border-inline-start-color: var(--primary, #0f6e5a); }
#notifPanel .np-i.new .tx { font-weight: 800; } #notifPanel .np-i.new::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--primary, #0f6e5a); }
#notifPanel .np-empty { padding: 26px 14px; text-align: center; color: var(--text-muted); }
@media print { .sa-bell, #notifPanel { display: none !important; } }