/* Kapsam kanalları — alan (dolgu), il (sol şerit), kurul (desen).
   Aynı sınıflar hem takvim kutusunda hem Alanlar sayfasındaki önizlemede
   kullanılır; iki yerin görünümü ayrışmasın diye tek dosyada duruyor. */

.scope-chip {
  /* --ink desen mürekkebi, sunucuda dolgunun parlaklığına göre hesaplanır
     (bkz. app/colors.py:overlay_color). */
  --ink: rgba(255, 255, 255, 0.38);
  border-radius: 0;
  overflow: hidden;
}

/* Sol şerit ile "kapsayan bağlam" (il) okunur. Tek kenar çerçevesi olduğu
   için köşe yuvarlaması yok. */
.scope-chip {
  border-left: 5px solid var(--stripe, transparent);
}

/* Kurul desenleri. Periyot 7-8px: ay görünümünde kutular ~18px olduğu için
   daha sık desen dokuya değil kirliliğe dönüşüyor, daha seyreği ise küçük
   kutuda hiç görünmüyor.
   p0 (düz) Komite'nin: alanı seçilmemiş kayıtlar desensiz kalır. */
.pat-p0 {
  background-image: none;
}

.pat-p1 {
  background-image: repeating-linear-gradient(45deg,
      var(--ink) 0 2px, transparent 2px 7px);
}

.pat-p2 {
  background-image: repeating-linear-gradient(-45deg,
      var(--ink) 0 2px, transparent 2px 7px);
}

.pat-p3 {
  background-image: repeating-linear-gradient(90deg,
      var(--ink) 0 2px, transparent 2px 8px);
}

.pat-p4 {
  background-image:
    repeating-linear-gradient(45deg, var(--ink) 0 1.5px, transparent 1.5px 8px),
    repeating-linear-gradient(-45deg, var(--ink) 0 1.5px, transparent 1.5px 8px);
}

.pat-p5 {
  background-image: repeating-linear-gradient(0deg,
      var(--ink) 0 2px, transparent 2px 8px);
}

.pat-p6 {
  background-image: radial-gradient(var(--ink) 1.2px, transparent 1.4px);
  background-size: 7px 7px;
}

/* Takvim CSS'i (admin_calendar.css / user_calendar.css) base'ten SONRA
   yüklendiği için kutuya 8px köşe yuvarlaması veriyor. Tek kenar şeridiyle
   yuvarlak köşe birlikte kötü duruyor; şerit varken köşeyi düzleştiriyoruz. */
.fc-custom-event.scope-chip {
  border-radius: 0;
}

/* --------------------------------------------------- gösterge ve önizleme --- */

.scope-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

.scope-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
}

.scope-swatch {
  width: 30px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 3px;
}

/* Alanlar sayfasındaki satır önizlemesi — takvimdeki kutunun küçük hâli. */
.scope-preview {
  width: 46px;
  height: 30px;
  flex-shrink: 0;
}