/* CCTV operator shift-picker redesign — كل الكلاسات هنا جديدة بالكامل
   (iss-cctv-*)، مبتلمسش ولا كلاس موجود في الموقع. */

.iss-cctv-sidebar {
  width: 240px;
  flex-shrink: 0;
  background: linear-gradient(180deg, #0b1324, #0a1020);
  color: #e5e9f5;
  display: flex;
  flex-direction: column;
  padding: 22px 16px;
}
.iss-cctv-sb-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 800;
  font-size: 1.05rem;
  margin-bottom: 28px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.iss-cctv-sb-brand span { font-size: .72rem; font-weight: 500; color: #8b93ad; }
.iss-cctv-sb-logo {
  width: 42px; height: 42px; border-radius: 12px;
  background: rgba(59, 130, 246, .18); color: #60a5fa;
  display: flex; align-items: center; justify-content: center; font-size: 18px;
  flex-shrink: 0;
}
.iss-cctv-sb-nav { display: grid; gap: 6px; flex: 1; }
.iss-cctv-sb-item {
  display: flex; align-items: center; gap: 12px;
  background: transparent; border: none; color: #aab2c8;
  padding: 12px 14px; border-radius: 10px; font-size: .92rem; font-weight: 600;
  cursor: pointer; text-align: left; width: 100%; transition: background .15s, color .15s;
}
.iss-cctv-sb-item i { width: 18px; text-align: center; }
.iss-cctv-sb-item:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.iss-cctv-sb-item.active { background: #2f6fed; color: #fff; }
.iss-cctv-sb-foot {
  font-size: .72rem; color: #6b7280; border-top: 1px solid rgba(255, 255, 255, .08);
  padding-top: 14px; margin-top: 14px; line-height: 1.6;
}
.iss-cctv-sb-foot i { color: #8b93ad; margin-right: 6px; }

.iss-cctv-intro {
  display: flex; align-items: center; gap: 12px;
  margin: 24px 0 16px; color: #0f172a;
}
.iss-cctv-intro i { color: #2f6fed; font-size: 20px; }
.iss-cctv-intro strong { display: block; font-size: 1.25rem; }
.iss-cctv-intro span { display: block; font-size: .85rem; color: #64748b; margin-top: 2px; }

.iss-cctv-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  margin-bottom: 20px;
}
.iss-cctv-card {
  background: #fff;
  border: 1px solid #e6ebf2;
  border-inline-start: 4px solid #3b82f6;
  border-radius: 16px;
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .05);
  transition: transform .15s ease, box-shadow .15s ease;
}
.iss-cctv-card:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(15, 23, 42, .09); }
.iss-cctv-card-icon {
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
  flex-shrink: 0;
}
.iss-cctv-card-body { flex: 1; min-width: 0; }
.iss-cctv-card-title { font-weight: 800; font-size: 1.02rem; color: #0f172a; }
.iss-cctv-card-sub { font-size: .8rem; color: #64748b; margin-top: 1px; }
.iss-cctv-card-status { font-size: .74rem; font-weight: 700; margin-top: 6px; }
.iss-cctv-card-status.done { color: #16a34a; }
.iss-cctv-card-status.pending { color: #94a3b8; }
.iss-cctv-card-go {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: #eef2f9; border: none; color: #2f6fed; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}

@media (max-width: 860px) {
  /* FIX: .iss-cctv-sidebar بـwidth:100% لكن أبوها (.app-layout، مشترك
     مع باقي صفحات الموقع) فاضل flex-direction:row — فكان الـ100% بياخد
     العرض كله ويدفع محتوى الصفحة الحقيقي (كروت الشيفتات) برّه الشاشة
     تمامًا بعرض صفر. :has() هنا يقصر التعديل على نسخة .app-layout اللي
     جواها .iss-cctv-sidebar بالظبط (صفحة اختيار شيفت CCTV بس) من غير ما
     يلمس .app-layout في أي صفحة تانية في الموقع.
  */
  .app-layout:has(.iss-cctv-sidebar) { flex-direction: column; }
  .iss-cctv-sidebar { width: 100%; flex-direction: row; align-items: center; padding: 10px 14px; overflow-x: auto; flex-shrink: 0; height: auto; }
  .iss-cctv-sb-brand { margin-bottom: 0; padding-bottom: 0; border-bottom: none; border-right: 1px solid rgba(255,255,255,.08); padding-right: 14px; }
  /* FIX: .iss-cctv-sb-nav أصلها display:grid، وflex-direction:row معندوش
     أي تأثير على عنصر grid — فكانت البنود (Shifts/Reports/Logout) بتفضل
     تترص صف تحت صف جوه الـgrid، وبما إنها flex:1 جوه سايدبار بقى أفقي
     (row) بارتفاع الشاشة القصير، كل بند كان بياخد جزء كبير من الارتفاع
     ده فيبان كزرار عملاق واحد مغطّي الشاشة ("Shifts" بس ظاهر، والكروت
     اللي تحته مش بانة خالص). الحل: grid-auto-flow:column يخلي نفس الـgrid
     يرص البنود جنب بعض أفقيًا بدل تحت بعض، من غير ما نلمس أي حاجة تانية.
  */
  .iss-cctv-sb-nav { flex-direction: row; grid-auto-flow: column; align-items: center; }
  .iss-cctv-sb-foot { display: none; }
  .iss-cctv-cards { grid-template-columns: 1fr; }
}