/* نمط ورق الملاحظات وشبكة الدفتر */
.paper-grid {
  background-size: 24px 24px;
  background-image: 
    linear-gradient(to right, rgba(200, 190, 175, 0.25) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(200, 190, 175, 0.25) 1px, transparent 1px);
}

/* شريط التبويبات الفلترية النشط */
.cat-pill.active {
  background-color: #264653 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 10px rgba(38, 70, 83, 0.2);
}
.cat-pill.active .count-badge {
  background-color: rgba(255, 255, 255, 0.25) !important;
  color: #FFFFFF !important;
}

/* بطاقة الملاحظة (Journal Note Card) */
.note-card {
  position: relative;
  border-radius: 20px;
  padding: 1.25rem;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(220, 212, 196, 0.7);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  user-select: none;
}

.note-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(38, 70, 83, 0.08), 0 2px 6px rgba(0, 0, 0, 0.03);
}

/* ألوان بطاقات الورق المختلفة */
.note-card.color-cream {
  background-color: #FFFFFF;
}
.note-card.color-yellow {
  background-color: #FEF9E7;
  border-color: #F2E4BD;
}
.note-card.color-rose {
  background-color: #FDF2F0;
  border-color: #F5D4CF;
}
.note-card.color-mint {
  background-color: #F0F7F4;
  border-color: #D2E7DC;
}
.note-card.color-lavender {
  background-color: #F6F2FB;
  border-color: #E2D7F3;
}

/* محاكاة الشريط اللاصق (Washi Tape) في أعلى البطاقة */
.washi-tape {
  position: absolute;
  top: -9px;
  right: 25px;
  width: 70px;
  height: 20px;
  background-color: rgba(233, 196, 106, 0.75);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  transform: rotate(-3deg);
  border-left: 2px dashed rgba(0,0,0,0.1);
  border-right: 2px dashed rgba(0,0,0,0.1);
  pointer-events: none;
  z-index: 2;
}

.note-card.pinned .washi-tape {
  background-color: rgba(231, 111, 81, 0.85);
  transform: rotate(2deg);
}

.washi-tape-centered {
  width: 100px;
  height: 22px;
  margin: -10px auto 10px;
  background-color: rgba(42, 157, 143, 0.7);
  box-shadow: 0 2px 4px rgba(0,0,0,0.06);
  transform: rotate(-1deg);
  border-left: 2px dashed rgba(0,0,0,0.12);
  border-right: 2px dashed rgba(0,0,0,0.12);
}

/* أزرار اختيار الملصقات في النموذج */
.sticker-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.65rem;
  border-radius: 9999px;
  background-color: #FFFFFF;
  border: 1px solid #DCD5C5;
  font-size: 0.85rem;
  transition: all 0.15s ease;
  user-select: none;
}

.sticker-btn:hover {
  background-color: #FFF9E6;
  border-color: #E9C46A;
  transform: scale(1.05);
}

.sticker-btn.selected {
  background-color: #E9C46A;
  color: #382A05;
  border-color: #D4A836;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(233, 196, 106, 0.4);
}

/* طابع الملصق الفيزيائي على البطاقة (Stickers on Cards) */
.sticker-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  background: white;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12), inset 0 0 0 2px rgba(255, 255, 255, 0.8);
  font-size: 1.15rem;
  transform: rotate(var(--rot, 0deg));
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.08));
}

.sticker-badge:hover {
  transform: scale(1.2) rotate(0deg) !important;
}

/* دوائر اختيار الألوان */
.color-dot {
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s;
}
.color-dot:hover {
  transform: scale(1.15);
}
.color-dot.active {
  border: 2px solid #2A9D8F !important;
  transform: scale(1.15);
  box-shadow: 0 0 0 2px rgba(42, 157, 143, 0.3);
}

/* تخصيص شريط التمرير */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #F3EEE5;
}
::-webkit-scrollbar-thumb {
  background: #D3CBC0;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #B5ACA0;
}