/* Custom CSS بسيط لـ OHIF Study List - فقط ما طلبت بالضبط */

/* أولاً: عرف المتغيرات إذا لم تكن معرفة */
:root {
  --bg-aa: #161b22; /* رمادي داكن للـ hover أو غيره */
}

.bg-secondary-dark {
      background: linear-gradient(135deg, #033f7f, #033f7f);
}

.bg-primary-dark {
      background: linear-gradient(135deg, #033f7f, #033f7f);
}

.bg-popover {
      background: linear-gradient(135deg, #033f7f, #033f7f);
}

.bg-popover {
      background: linear-gradient(135deg, #033f7f, #033f7f);
}

.text-primary-main {
  color: #ffffff !important; /* أو rgb(0, 0, 0) */
}

.text-secondary-light {
  color: #ffffff !important; /* أو rgb(0, 0, 0) */
}

/* خلفية الصفحة الرئيسية */
body,
.study-list-container {
  background-color: var(--bg-primary-dark) !important;
}

/* الهيدر والشريط العلوي */
.header,
.study-list-header {
  background-color: var(--bg-secondary-dark) !important;
}

/* جعل جميع الحروف CAPITAL */
.study-list-table,
td,
th,
truncate {
  text-transform: uppercase !important;
  font-size: 14px !important;      /* خط أكبر */
}

td, th {
border-bottom: 1px solid white !important;
}

.border-r {
    border-right: none !important;
}


/* أو طريقة أقوى وأوضح: فرض اللون الأصلي حتى عند الـ hover */
[class*="hover:bg-secondary-main"] {
  background-color: rgb(4, 28, 74) !important; /* اللون الذي استخرجته سابقاً: rgb(4, 28, 74) */
}

/* تحويل الـ Select (Results per page) ليصبح شكله تماماً مثل أزرار الـ pagination بجانبه */
/* يعني: خلفية رمادية داكنة، حدود رمادية، نص أبيض، زوايا دائرية، hover خفيف */

.border-primary-main .customSelect__control {
  background-color: #161b22 !important;          /* نفس خلفية أزرار الـ pagination (رمادي داكن) */
  border: 1px solid #30363d !important;          /* نفس لون الحدود */
  border-radius: 6px !important;                 /* نفس الزوايا الدائرية للأزرار */
  box-shadow: none !important;                   /* إزالة أي ظلال سابقة */
  transition: all 0.2s ease !important;          /* انتقال سلس مثل الأزرار */
}

/* تصميم أزرار الـ pagination العادية */
button.border.border-primary-main {
  background-color: var(--bg-aa) !important;
  color: white !important;
  border: 1px solid #30363d !important;
  border-radius: 6px !important;
  padding: 6px 12px !important;
  text-transform: uppercase !important; /* إذا بقيت تريد CAPITAL */
}

/* الزر النشط (إذا كان هناك زر active، لكن في مثالك ليس موجوداً) */
/* إذا أردت لون مختلف للصفحة الحالية، أضف كلاس active إذا وجد */
button.border.border-primary-main.active,
button.border.border-primary-main[data-active="true"] { /* إذا كان كذلك */
  background-color: #238636 !important;
  border-color: #238636 !important;
}

/* تحسين الزوايا للأزرار الأولى والأخيرة (لتبقى متصلة ودائرية قليلاً) */
button.border.border-primary-main:first-child {
  border-top-left-radius: 6px !important;
  border-bottom-left-radius: 6px !important;
}

button.border.border-primary-main:last-child {
  border-top-right-radius: 6px !important;
  border-bottom-right-radius: 6px !important;
}