/* =====================================================================
   BESHY — BOLD REDESIGN v3
   Keep LEFT sidebar at normal size (232px, readable)
   RED + BLACK aesthetic throughout
   ===================================================================== */

:root {
  --bs-red:           #FF3B5C;
  --bs-red-dark:      #E22950;
  --bs-red-light:     #FF6B85;
  --bs-red-pale:      #FFE9ED;
  --bs-black:         #1A1A1A;
  --bs-dark-gray:     #2A2A2A;
}

/* ============================================================================
   LEFT SIDEBAR: Keep readable size, style with RED/BLACK
   ============================================================================ */

.ns-rail {
  background: var(--bs-black) !important;
  border-right: 3px solid var(--bs-red) !important;
}

.ns-logo {
  color: var(--bs-red) !important;
  font-weight: 800 !important;
  font-size: 1.5rem !important;
}

.ns-nav {
  color: #999 !important;
  background: transparent !important;
  transition: all 200ms ease !important;
}

.ns-nav:hover {
  background: rgba(255, 59, 92, 0.15) !important;
  color: var(--bs-red) !important;
}

.ns-nav.active {
  background: rgba(255, 59, 92, 0.2) !important;
  color: var(--bs-red) !important;
}

.ns-badge {
  background: var(--bs-red) !important;
  animation: pulse 2s infinite !important;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.1); opacity: 0.8; }
}

/* ============================================================================
   MAIN CONTENT: RED + BLACK styling
   ============================================================================ */

body {
  background: #FFFFFF;
  color: #1F1A17;
}

/* Cards: minimal styling, RED hover effect only */
.card {
  transition: all 300ms ease !important;
}

.card:hover {
  box-shadow: 0 8px 24px rgba(255, 59, 92, 0.15) !important;
}

.card-header {
  background: var(--bs-black) !important;
  color: white !important;
  font-weight: 700 !important;
  border-bottom: none !important;
}

/* ============================================================================
   TYPOGRAPHY: Bold display, readable body
   ============================================================================ */

.title, h1 {
  font-weight: 700 !important;
  color: var(--bs-black) !important;
}

.subtitle, h2 {
  color: var(--bs-red) !important;
  font-weight: 600 !important;
}

h3 {
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* ============================================================================
   BUTTONS: RED primary
   ============================================================================ */

.button.is-primary {
  background: var(--bs-red) !important;
  color: white !important;
  border: none !important;
  transition: all 200ms ease !important;
}

.button.is-primary:hover {
  background: var(--bs-red-dark) !important;
  box-shadow: 0 8px 24px rgba(255, 59, 92, 0.3) !important;
}

/* ============================================================================
   GALLERY: Show like/comment buttons on cards (clickable)
   ============================================================================ */

.ns-masonry .card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(135deg, rgba(255, 59, 92, 0.2) 0%, transparent 100%);
  opacity: 0;
  transition: opacity 300ms ease;
  pointer-events: none !important;
}

.ns-masonry .card:hover::after {
  opacity: 1;
}

/* ============================================================================
   MESSAGES PAGE: Modern RED redesign - CSS-only cleanup
   ============================================================================ */

.ns-messages-header {
  background: linear-gradient(135deg, #FF3B5C 0%, #E22950 100%);
  color: white;
  padding: 2.5rem 0;
  border-bottom: 3px solid var(--bs-black);
  margin-bottom: 0;
}

.ns-messages-header .title {
  color: white !important;
  margin-bottom: 0.5rem;
  font-weight: 800;
}

.ns-messages-tabs {
  display: flex;
  gap: 1.5rem;
  margin-top: 1.5rem;
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
  padding-bottom: 1rem;
}

.ns-tab {
  color: rgba(255, 255, 255, 0.7) !important;
  text-decoration: none;
  padding: 0.5rem 0;
  border-bottom: 3px solid transparent;
  transition: all 200ms ease !important;
  font-weight: 600;
  font-size: 0.95rem;
}

.ns-tab:hover { color: white !important; }
.ns-tab.active { color: white !important; border-bottom-color: white; }

/* HIDE clutter from original layout */
.ns-dm > .block.content { display: none !important; }  /* Pro tip banner */
.ns-dm-list .tabs { display: none !important; }        /* Redundant tabs */
.ns-dm-list .is-size-7 { display: none !important; }   /* Explanation text */
.ns-dm-list .label { display: none !important; }       /* "Quick Filters" label */
.ns-dm-list form { display: none !important; }         /* Search form */
.ns-dm-list .level { display: none !important; }       /* Pagination info text */

/* Card header RED styling */
.ns-dm-list .card-header {
  background: var(--bs-black) !important;
  border-bottom: 2px solid var(--bs-red) !important;
}

.ns-dm-list .card-header-title {
  color: white !important;
  font-weight: 700;
}

.ns-dm-thread .card-header {
  background: var(--bs-black) !important;
  border-bottom: 2px solid var(--bs-red) !important;
}

.ns-dm-thread .card-header-title {
  color: white !important;
}

/* Message table styling (when messages exist) */
.ns-dm-list table {
  width: 100%;
  border-collapse: collapse;
}

.ns-dm-list tr {
  border-bottom: 1px solid #F5F5F5;
  transition: background 150ms;
}

.ns-dm-list tr:hover {
  background: #F9F9F9;
}

.ns-dm-list td {
  padding: 0.75rem 0;
  cursor: pointer;
}

/* Empty state styling */
.ns-dm-empty-inner {
  text-align: center;
  padding: 3rem 2rem;
  color: #999;
}

.ns-dm-empty-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.3;
}

.ns-dm-empty-inner p {
  margin-bottom: 0.5rem;
}

/* Thread display */
.ns-dm-thread .media {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #F5F5F5;
}

.ns-dm-thread .media:last-child {
  border-bottom: none;
}

/* Pagination buttons */
.ns-dm-list .level {
  display: flex !important;
  gap: 0.5rem;
  padding: 1rem 0;
  border-top: 1px solid #F5F5F5;
}

.ns-dm-list .button {
  flex: 1;
  min-width: auto;
}