:root{--bg:#f6f8fb;--fg:#1f2937;--muted:#6b7280;--pri:#1d4ed8;--ok:#16a34a;--warn:#f59e0b;}
*{box-sizing:border-box}
html{direction:rtl}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--fg)}
.container{max-width:1100px;margin:24px auto;padding:0 16px}
.nav{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.nav a{padding:10px 14px;border-radius:10px;background:#fff;border:1px solid #e5e7eb;text-decoration:none;color:var(--fg)}
.nav a.active{background:var(--pri);color:#fff;border-color:var(--pri)}
.card{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:16px;margin-bottom:16px}
h1{margin:0 0 10px;font-size:22px}
h2{margin:0 0 10px;font-size:18px}
table{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden}
th,td{padding:10px;border-bottom:1px solid #eee;font-size:14px;text-align:right;vertical-align:top}
th{background:#f9fafb}
.btn{padding:8px 12px;border:1px solid #e5e7eb;border-radius:10px;background:#fff;text-decoration:none;color:var(--fg);display:inline-block;font-size:14px}
.btn.primary{background:var(--pri);color:#fff;border-color:var(--pri)}
.btn.danger{color:#ef4444;border-color:#fecaca}
.input, select, textarea{width:100%;padding:10px;border-radius:10px;border:1px solid #e5e7eb;background:#fff}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}
.col-4{grid-column:span 4}.col-6{grid-column:span 6}.col-8{grid-column:span 8}.col-12{grid-column:span 12}
.small{color:var(--muted);font-size:12px}
.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.alert{padding:10px;border-radius:10px;background:#ecfeff;border:1px solid #a5f3fc;margin-bottom:12px}
.badge{padding:4px 8px;border-radius:999px;background:#f3f4f6;border:1px solid #e5e7eb;font-size:12px}
.footer{margin:24px 0;color:#9ca3af;font-size:12px;text-align:center}
fieldset{border:1px solid #e5e7eb;border-radius:12px;padding:12px;margin-bottom:12px}
legend{padding:4px 8px}

/* ===== Read-only mobile mode ===== */
@media (max-width: 640px) {
  /* أخفي أي عنصر عليه هذه الكلاس */
  .mobile-hide { display: none !important; }

  /* أخفي عمود الإجراءات في الجداول */
  th.table-actions,
  td.table-actions { display: none !important; }

  /* تحسين عرض الجدول على الهاتف */
  .card table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .card table tr { white-space: nowrap; }

  /* مسافات وحواف أهدأ على الهاتف */
  .container { padding: 8px; }
  .nav { gap: 8px; }
}

/* لا تجعل التاريخ ينزل سطرين */
.nowrap { white-space: nowrap; }

/* ===== بطاقات بدل الجدول على الهاتف ===== */
@media (max-width: 640px) {
  /* نخفي رؤوس الأعمدة */
  table.mobile-cards thead { display: none; }

  /* نعرض الصفوف ككروت */
  table.mobile-cards,
  table.mobile-cards tbody,
  table.mobile-cards tr,
  table.mobile-cards td {
    display: block;
    width: 100%;
  }

  table.mobile-cards tr {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 12px;
  }

  table.mobile-cards td {
    border: 0;
    padding: 6px 0;
    white-space: normal;          /* يلفّ الأسطر الطويلة */
    word-break: break-word;
  }

  /* عنوان الحقل فوق القيمة */
  table.mobile-cards td::before {
    content: attr(data-label);
    display: block;
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 2px;
  }

  /* زرّ الإجراءات في أسفل البطاقة */
  table.mobile-cards td.table-actions {
    margin-top: 8px;
  }
}

/* ===== أكورديون الهاتف ===== */
@media (max-width: 640px) {
  .desktop-only { display: none !important; }
  .mobile-accordion { display: block; }

  .acc-card{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:12px;
    padding:10px 12px;
    margin-bottom:12px;
  }
  .acc-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    cursor:pointer;
  }
  .acc-title{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:600;
  }
  .acc-num{
    width:28px;height:28px;display:inline-grid;place-items:center;
    border:1px solid #e5e7eb;border-radius:8px;background:#f9fafb;font-size:12px;
  }
  .acc-file{padding:4px 8px;border:1px solid #e5e7eb;border-radius:999px;background:#f3f4f6;font-size:12px}

  .acc-chevron{transition:transform .2s ease}
  .acc-card.open .acc-chevron{transform:rotate(180deg)}

  .acc-details{display:none;margin-top:8px}
  .acc-card.open .acc-details{display:block}

  .acc-row{margin:6px 0}
  .acc-label{color:var(--muted);font-size:12px;margin-bottom:2px}
}

/* على الشاشات الأكبر نخفي الأكورديون ونُظهر الجدول */
@media (min-width: 641px) {
  .mobile-accordion { display: none; }
  .desktop-only { display: block; }
}

/* ===== إظهار/إخفاء النسخ بحسب حجم الشاشة ===== */

/* الافتراضي (ديسكتوب): أظهر الجدول وأخفِ الأكورديون */
.desktop-only      { display: block; }
.mobile-accordion  { display: none; }

/* على الشاشات الصغيرة (هاتف): أخفِ الجدول وأظهر الأكورديون */
@media (max-width: 640px) {
  .desktop-only     { display: none !important; }
  .mobile-accordion { display: block !important; }
}

/* إبراز رقم الملف عندما تكون الجلسة اليوم */
.badge.due-today{
  background:#fffbeb;          /* خلفية فاتحة */
  border-color:#f59e0b;        /* برتقالي */
  color:#92400e;               /* نص داكن */
  font-weight:600;
  box-shadow:0 0 0 2px rgba(245,158,11,.12) inset;
}

/* عدّاد صغير فوق مشبك الورق */
.badge.count {
  display:inline-block; min-width:18px; padding:0 6px;
  font-size:12px; line-height:18px; text-align:center;
  border-radius:999px; background:#f3f4f6; border:1px solid #e5e7eb;
  margin-inline-start:6px;
}

/* مودال معاينة PDF */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.45);
  display:none; align-items:center; justify-content:center; z-index:9999;
}
.modal{
  width:92vw; max-width:1000px; height:85vh; background:#fff; border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.25); overflow:hidden; display:flex; flex-direction:column;
}
.modal-header{
  display:flex; justify-content:space-between; align-items:center; padding:8px 12px; border-bottom:1px solid #eee;
}
.modal-title{ font-weight:600 }
.modal-body{ flex:1; }
.modal-body embed{ width:100%; height:100%; border:0 }

/* على الموبايل: لا نعرض أزرار الإدارة داخل جدول المرفقات */
@media (max-width:640px){
  .mobile-hide { display:none !important; }
}

/* حقول كبيرة */
.input-lg{ padding:12px 14px; font-size:16px; }

/* ===== تحسين إحساس الأزرار كقابلة للنقر ===== */
.btn,
button,
input[type="button"],
input[type="submit"],
input[type="reset"]{
  cursor: pointer;                 /* مؤشر اليد */
  user-select: none;               /* منع تحديد النص بالخطأ */
  transition: transform .08s ease, box-shadow .12s ease, filter .12s ease, background-color .12s ease, border-color .12s ease;
}

.btn:hover,
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover{
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

.btn:active,
button:active,
input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active{
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

/* تحسين طفيف لألوان أزرار الحالات */
.btn.primary:hover{ filter: brightness(1.05); }
.btn.danger:hover { filter: brightness(1.03); }

/* حالة التعطيل */
.btn[disabled],
button[disabled],
input[type="button"][disabled],
input[type="submit"][disabled],
input[type="reset"][disabled]{
  cursor: not-allowed;
  opacity: .6;
  transform: none;
  box-shadow: none;
}

/* الروابط الشبيهة بالأزرار/الشارات قابلة للنقر */
a.badge{ cursor: pointer; text-decoration: none; }
a.badge:hover{ box-shadow: 0 1px 6px rgba(0,0,0,.08) inset; }

/* تحسين بسيط لأزرار التنقل ليظهر أنها تفاعلية */
.nav a{ transition: box-shadow .12s ease, transform .08s ease; }
.nav a:hover{ transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,.06); }
/* إجبار مؤشر اليد على الزر ونصه/أيقوناته بالداخل */
.btn,
.btn * {
  cursor: pointer !important;
}

/* لكل أزرار <button> وأي عناصر داخلها */
button,
button * {
  cursor: pointer !important;
}

/* أزرار الإدخال */
input[type="submit"],
input[type="button"],
input[type="reset"] {
  cursor: pointer !important;
}
/* ====== Add-on Theme (Navy + Gold) — purely cosmetic layer ====== */

/* لوحة الألوان (تبديل القيم فقط) */
:root{
  --bg:#f4f6f9;
  --card:#ffffff;
  --fg:#0f172a;
  --muted:#6b7280;

  --pri:#0b3d66;      /* أزرق داكن */
  --pri-700:#0a3558;
  --pri-800:#082e4b;
  --gold:#e2b24b;     /* ذهبي */

  --ok:#16a34a;
  --warn:#f59e0b;
  --danger:#dc2626;

  --border:#e5e7eb;
  --row:#f8fafc;
}

/* بطاقات خفيفة الظل (لا تغيّر الأحجام) */
.card{
  background:var(--card);
  border:1px solid var(--border);
  box-shadow:0 6px 16px rgba(2,18,33,.04);
  border-radius:14px;
}

/* عناوين الأقسام: لون أزرق داكن وخط ذهبي أسفلها (بدون تغيير المسافات لديك) */
h2{
  color:var(--pri-800);
  position:relative;
}
h2::after{
  content:"";
  position:absolute;
  inset-inline-start:0; bottom:-6px;
  width:120px; height:3px;
  background:var(--gold);
  border-radius:99px;
}

/* الأزرار: فقط ألوان/هوفر — لا تغيير مقاسات */
.btn{
  border:1px solid var(--border);
  background:#fff; color:var(--fg);
  transition:background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.btn:hover{ background:#f8fafc; border-color:#d7dee7 }
.btn:focus{ outline:none; box-shadow:0 0 0 3px rgba(11,61,102,.18) }
.btn.primary{
  background:var(--pri); color:#fff; border-color:var(--pri);
}
.btn.primary:hover{ background:var(--pri-700); border-color:var(--pri-700) }
.btn.danger{ color:var(--danger); border-color:#fecaca; background:#fff }
.btn.danger:hover{ background:#fff5f5; border-color:#fca5a5 }

/* للتأكد أن كل الأزرار/الروابط تحس كزر عند المرور */
button, .btn, .nav a, [role="button"], input[type="submit"], input[type="button"], a[href]{ cursor:pointer }

/* الحقول: ألوان تركيز فقط */
.input, select, textarea{
  border:1px solid var(--border);
  background:#fff; color:var(--fg);
}
.input:focus, select:focus, textarea:focus{
  border-color:var(--pri);
  box-shadow:0 0 0 3px rgba(11,61,102,.18);
}

/* الجداول: ترويسة باللون الداكن، صفوف متموّجة، هوفر لطيف */
table{ background:#fff; border-radius:12px; overflow:hidden }
th{
  background:var(--pri-800);
  color:#fff;
  font-weight:600;
  border-inline-start:1px solid rgba(255,255,255,.08);
}
th:first-child{ border-inline-start:none }
tbody tr:nth-child(even){ background:var(--row) }
tbody tr:hover{ background:#eef4fa }

/* بادجات عامة (رقم الملف/شارات صغيرة) */
.badge{
  background:#eef2f7;
  border:1px solid #e2e8f0;
  color:inherit;
  border-radius:999px;
}

/* إبراز رقم الملف عند جلسة اليوم (كما هو لديك لكن بنفس الثيم) */
.badge.due-today{
  background:#fffbeb;
  border-color:#f59e0b;
  color:#92400e;
  font-weight:600;
  box-shadow:0 0 0 2px rgba(245,158,11,.12) inset;
}

/* شارة مرفقات صغيرة (📎 1،2…) إن استُخدمت */
.attach-pill{
  padding:4px 10px;
  border:1px dashed #cbd5e1;
  background:#f8fafc;
  color:#0f172a;
  border-radius:999px;
}
.attach-pill:hover{ background:#eef4fa; border-color:#b6c3d4 }

/* شارات المرفقات المُضافة في نموذج الإجراء (لا تغيّر البنية) */
#filesPills .badge{
  background:#f1f5f9; border-color:#e2e8f0;
}
#filesPills .badge .btn.danger{
  padding:0 6px; border-radius:8px; line-height:18px; border-color:#fca5a5;
}

/* شريط التنقّل (روابط عليا) — ألوان فقط */
.nav a{
  background:#fff; color:var(--fg); border:1px solid var(--border);
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.nav a:hover{ background:#f8fafc; border-color:#d7dee7 }
.nav a.active{ background:var(--pri); color:#fff; border-color:var(--pri) }

/* تناغم ألوان تنبيهاتك كما هي */
.alert{
  background:#ecfeff;
  border:1px solid #a5f3fc;
}

/* لا تغييرات على الموبايل/الأكورديون — فقط نضمن الخلفيات والحدود */
@media (max-width:640px){
  .acc-card{ background:#fff; border:1px solid var(--border) }
  .acc-num{ background:#f9fafb; border:1px solid var(--border) }
  .acc-label{ color:var(--muted) }
}