/* SIMAS-TL Mobile-First Styling (Optimized for ~400px width) */

/* Hide scrollbar for Chrome, Safari and Opera on pill navigation */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

/* Touch Active States */
.sidebar-item:active {
  background-color: #eaebef;
}
.sidebar-item.active {
  background-color: #d3e3fd;
  color: #041e49;
}
.sidebar-item.active .badge-count {
  background-color: #0b57d0;
  color: #ffffff;
}

.kategori-item.active {
  background-color: #e7f5eb;
  color: #064e3b;
}

/* Mobile Filter Pills */
.mobile-pill.active {
  background-color: #c2e7ff;
  color: #001d35;
  border-color: #7fcfff;
}
.mobile-cat-pill.active {
  background-color: #d1fae5;
  color: #065f46;
  border-color: #6ee7b7;
  font-weight: 700;
}

/* Mail Row Mobile Touch Card */
.mail-row-mobile {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.1s ease;
}
.mail-row-mobile:active {
  background-color: #f1f5f9;
}
.mail-row-mobile.unread {
  background-color: #ffffff;
}
.mail-row-mobile.unread .mail-sender-name,
.mail-row-mobile.unread .mail-subject-title {
  color: #0f172a;
  font-weight: 700;
}
.mail-row-mobile.read {
  background-color: #fbfcfe;
}
.mail-row-mobile.read .mail-sender-name,
.mail-row-mobile.read .mail-subject-title {
  color: #475569;
  font-weight: 500;
}

/* Star Button */
.btn-star-mobile.starred {
  color: #f59e0b !important; /* amber-500 */
}

/* SLA Status Badges */
.badge-sla-safe {
  background-color: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

.badge-sla-warning {
  background-color: #fffbeb;
  color: #92400e;
  border: 1px solid #fde68a;
}

.badge-sla-danger {
  background-color: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
  animation: pulse-border 2s infinite;
}

@keyframes pulse-border {
  0%, 100% { border-color: #fca5a5; }
  50% { border-color: #ef4444; }
}

/* Zoom cursor */
#detailFotoSurat {
  cursor: grab;
  user-select: none;
}
#detailFotoSurat:active {
  cursor: grabbing;
}

/* Multi-Photo Carousel & Thumbnail Styles */
.thumb-card {
  width: 62px;
  height: 82px;
  flex-shrink: 0;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  border: 2px solid #334155;
  cursor: pointer;
  background-color: #0f172a;
  transition: transform 0.1s ease, border-color 0.15s ease;
}
.thumb-card:hover {
  transform: scale(1.03);
  border-color: #64748b;
}
.thumb-card.active {
  border-color: #10b981 !important;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.4);
}

.compose-thumb-card {
  width: 72px;
  height: 94px;
  flex-shrink: 0;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  border: 1px solid #cbd5e1;
  background-color: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}