/* ============================================
   EXPOSED FORM (Sort/Filter) CONTAINER STYLING
   DARK NAVY BLUE THEME
   ============================================ */

/* Main exposed form wrapper */
#views-exposed-form-admin-content-feed-page-1 {
  background: #fff !important;
  border: 1px solid #ccc !important;
  border-radius: 8px !important;
  padding: 20px !important;
  margin-bottom: 24px !important;
}

/* Form title styling */
#views-exposed-form-admin-content-feed-page-1 legend,
#views-exposed-form-admin-content-feed-page-1 .fieldset-legend {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #374151 !important;
  margin-bottom: 16px !important;
}

/* Sort by and Order labels */
#views-exposed-form-admin-content-feed-page-1 label {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #374151 !important;
  margin-bottom: 8px !important;
  display: block !important;
}

/* Dropdown styling */
#views-exposed-form-admin-content-feed-page-1 select {
  width: 100% !important;
  padding: 10px 12px !important;
  font-size: 14px !important;
  border: 1px solid #d1d5db !important;
  border-radius: 6px !important;
  background: #fff !important;
  color: #374151 !important;
  margin-bottom: 16px !important;
  cursor: pointer !important;
  transition: border-color 0.2s ease !important;
}

#views-exposed-form-admin-content-feed-page-1 select:hover {
  border-color: #1e3a8a !important;
}

#views-exposed-form-admin-content-feed-page-1 select:focus {
  outline: none !important;
  border-color: #1e40af !important;
  box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1) !important;
}

/* Apply button styling */
#views-exposed-form-admin-content-feed-page-1 .form-actions {
  margin-top: 8px !important;
}

#views-exposed-form-admin-content-feed-page-1 input[type="submit"],
#views-exposed-form-admin-content-feed-page-1 .button,
#views-exposed-form-admin-content-feed-page-1 button {
  background: #1e40af !important;
  color: #fff !important;
  padding: 10px 24px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border: none !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: background 0.2s ease !important;
}

#views-exposed-form-admin-content-feed-page-1 input[type="submit"]:hover,
#views-exposed-form-admin-content-feed-page-1 .button:hover,
#views-exposed-form-admin-content-feed-page-1 button:hover {
  background: #1e3a8a !important;
}

/* Form item wrapper spacing */
#views-exposed-form-admin-content-feed-page-1 .form-item {
  margin-bottom: 16px !important;
}

#views-exposed-form-admin-content-feed-page-1 .form-item:last-child {
  margin-bottom: 0 !important;
}

/* Reset/Clear button (if present) */
#views-exposed-form-admin-content-feed-page-1 input[type="reset"],
#views-exposed-form-admin-content-feed-page-1 .reset {
  background: #fff !important;
  color: #6b7280 !important;
  border: 1px solid #d1d5db !important;
  padding: 10px 24px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  margin-left: 8px !important;
  transition: all 0.2s ease !important;
}

#views-exposed-form-admin-content-feed-page-1 input[type="reset"]:hover,
#views-exposed-form-admin-content-feed-page-1 .reset:hover {
  background: #f3f4f6 !important;
  border-color: #9ca3af !important;
}

/* ============================================
   ADMIN CONTENT FEED - OPTIMIZED CARD LAYOUT
   Operations: Top Right
   Avatar + Meta: Left Side
   Content: Full Width Below
   ============================================ */

#views-exposed-form-admin-content-feed-page-1 ~ .views-infinite-scroll-content-wrapper .views-row,
form[id="views-exposed-form-admin-content-feed-page-1"] ~ .views-infinite-scroll-content-wrapper .views-row {
  background: #fff !important;
  border: 1px solid #ccc !important;
  border-radius: 8px !important;
  padding: 20px !important;
  margin-bottom: 16px !important;
  color: #374151 !important;
  line-height: 1.4 !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Operations - TOP RIGHT CORNER */
#views-exposed-form-admin-content-feed-page-1 ~ .views-infinite-scroll-content-wrapper .views-field-operations {
  position: absolute !important;
  top: 20px !important;
  right: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  z-index: 10 !important;
}

#views-exposed-form-admin-content-feed-page-1 ~ .views-infinite-scroll-content-wrapper .dropbutton {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
}

#views-exposed-form-admin-content-feed-page-1 ~ .views-infinite-scroll-content-wrapper .dropbutton a {
  padding: 6px 16px !important;
  font-size: 13px !important;
  border: 1px solid #93c5fd !important;
  border-radius: 4px !important;
  color: #1e40af !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
  background: #fff !important;
}

#views-exposed-form-admin-content-feed-page-1 ~ .views-infinite-scroll-content-wrapper .dropbutton a:hover {
  background: #dbeafe !important;
  border-color: #1e40af !important;
}

#views-exposed-form-admin-content-feed-page-1 ~ .views-infinite-scroll-content-wrapper .dropbutton .delete a {
  color: #dc2626 !important;
  border-color: #fecaca !important;
}

#views-exposed-form-admin-content-feed-page-1 ~ .views-infinite-scroll-content-wrapper .dropbutton .delete a:hover {
  background: #fee2e2 !important;
  border-color: #dc2626 !important;
}

/* User Avatar Picture - LEFT CORNER */
#views-exposed-form-admin-content-feed-page-1 ~ .views-infinite-scroll-content-wrapper .views-field-user-picture {
  float: left !important;
  margin-right: 16px !important;
  margin-bottom: 12px !important;
  display: block !important;
}

#views-exposed-form-admin-content-feed-page-1 ~ .views-infinite-scroll-content-wrapper .views-field-user-picture img {
  width: 120px !important;
  height: 120px !important;
  max-width: 120px !important;
  max-height: 120px !important;
  border-radius: 8px !important;
  object-fit: cover !important;
  border: 2px solid #e5e7eb !important;
  display: block !important;
  transition: all 0.2s ease !important;
}

#views-exposed-form-admin-content-feed-page-1 ~ .views-infinite-scroll-content-wrapper .views-field-user-picture img:hover {
  border-color: #60a5fa !important;
  box-shadow: 0 2px 8px rgba(30, 64, 175, 0.15) !important;
}

/* Title - BESIDE AVATAR, TOP */
#views-exposed-form-admin-content-feed-page-1 ~ .views-infinite-scroll-content-wrapper .views-field-title {
  font-size: 20px !important;
  font-weight: 600 !important;
  margin-bottom: 8px !important;
  margin-right: 140px !important; /* Space for Edit/Delete buttons */
  clear: none !important;
  line-height: 1.3 !important;
}

#views-exposed-form-admin-content-feed-page-1 ~ .views-infinite-scroll-content-wrapper .views-field-title a {
  color: #1e40af !important;
  text-decoration: none !important;
}

#views-exposed-form-admin-content-feed-page-1 ~ .views-infinite-scroll-content-wrapper .views-field-title a:hover {
  color: #1e3a8a !important;
  text-decoration: underline !important;
}

/* Author Name (UID field) - BELOW TITLE, BESIDE AVATAR */
#views-exposed-form-admin-content-feed-page-1 ~ .views-infinite-scroll-content-wrapper .views-field-uid {
  display: block !important;
  margin-bottom: 6px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #374151 !important;
  clear: none !important;
}

/* Date - BELOW AUTHOR, BESIDE AVATAR */
#views-exposed-form-admin-content-feed-page-1 ~ .views-infinite-scroll-content-wrapper .views-field-created {
  display: block !important;
  margin-bottom: 6px !important;
  font-size: 13px !important;
  color: #6b7280 !important;
  clear: none !important;
}

/* Content Type Badge - BELOW DATE, BESIDE AVATAR */
#views-exposed-form-admin-content-feed-page-1 ~ .views-infinite-scroll-content-wrapper .views-field-type {
  display: block !important;
  margin-bottom: 12px !important;
  clear: none !important;
}

#views-exposed-form-admin-content-feed-page-1 ~ .views-infinite-scroll-content-wrapper .views-field-type a {
  background: #dbeafe !important;
  color: #1e40af !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  text-decoration: none !important;
  display: inline-block !important;
}

#views-exposed-form-admin-content-feed-page-1 ~ .views-infinite-scroll-content-wrapper .views-field-type a:hover {
  background: #bfdbfe !important;
  color: #1e3a8a !important;
}

/* Content - FULL WIDTH BELOW AVATAR AND METADATA */
#views-exposed-form-admin-content-feed-page-1 ~ .views-infinite-scroll-content-wrapper .views-field-field-philosophical-maxims,
#views-exposed-form-admin-content-feed-page-1 ~ .views-infinite-scroll-content-wrapper .views-field-field-body {
  clear: both !important; /* Start below floated avatar */
  margin-top: 16px !important;
  padding-top: 16px !important;
  border-top: 1px solid #e5e7eb !important;
  color: #374151 !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

/* Tablet and below - adjust button spacing */
@media (max-width: 768px) {
  #views-exposed-form-admin-content-feed-page-1 ~ .views-infinite-scroll-content-wrapper .views-field-title {
    margin-right: 100px !important; /* Less space for smaller buttons */
  }
  
  #views-exposed-form-admin-content-feed-page-1 ~ .views-infinite-scroll-content-wrapper .dropbutton a {
    padding: 5px 12px !important;
    font-size: 12px !important;
  }
}

/* Mobile - stack avatar and move buttons */
@media (max-width: 640px) {
  #views-exposed-form-admin-content-feed-page-1 ~ .views-infinite-scroll-content-wrapper .views-field-user-picture {
    float: none !important;
    margin-bottom: 16px !important;
  }
  
  #views-exposed-form-admin-content-feed-page-1 ~ .views-infinite-scroll-content-wrapper .views-field-user-picture img {
    width: 100px !important;
    height: 100px !important;
    max-width: 100px !important;
    max-height: 100px !important;
  }
  
  #views-exposed-form-admin-content-feed-page-1 ~ .views-infinite-scroll-content-wrapper .views-field-title {
    clear: both !important;
    margin-right: 0 !important;
    margin-top: 40px !important; /* Space for buttons above */
  }
  
  #views-exposed-form-admin-content-feed-page-1 ~ .views-infinite-scroll-content-wrapper .views-field-operations {
    top: 16px !important;
    right: 16px !important;
  }
  
  #views-exposed-form-admin-content-feed-page-1 ~ .views-infinite-scroll-content-wrapper .dropbutton {
    flex-direction: column !important;
    align-items: flex-end !important;
  }
}

/* ============================================
   USER AVATAR SIZING OPTIONS
   ============================================ */

/* Option 1: Square avatars with rounded corners (120x120) */
#views-exposed-form-admin-content-feed-page-1 ~ .views-infinite-scroll-content-wrapper .views-field-user-picture {
  margin-bottom: 12px !important;
  display: block !important;
}

#views-exposed-form-admin-content-feed-page-1 ~ .views-infinite-scroll-content-wrapper .views-field-user-picture img {
  width: 120px !important;
  height: 120px !important;
  border-radius: 8px !important;
  object-fit: cover !important;
  border: 2px solid #e5e7eb !important;
  display: block !important;
  transition: all 0.2s ease !important;
}

#views-exposed-form-admin-content-feed-page-1 ~ .views-infinite-scroll-content-wrapper .views-field-user-picture img:hover {
  border-color: #60a5fa !important;
  box-shadow: 0 2px 8px rgba(30, 64, 175, 0.15) !important;
}

/* Option 2: Circular avatars (uncomment to use) */
/*
#views-exposed-form-admin-content-feed-page-1 ~ .views-infinite-scroll-content-wrapper .views-field-user-picture img {
  border-radius: 50% !important;
}
*/

/* Option 3: Smaller avatars (80x80) (uncomment to use) */
/*
#views-exposed-form-admin-content-feed-page-1 ~ .views-infinite-scroll-content-wrapper .views-field-user-picture img {
  width: 80px !important;
  height: 80px !important;
}
*/

/* Option 4: Larger avatars (150x150) (uncomment to use) */
/*
#views-exposed-form-admin-content-feed-page-1 ~ .views-infinite-scroll-content-wrapper .views-field-user-picture img {
  width: 150px !important;
  height: 150px !important;
}
*/

/* Option 5: Inline with content (avatar floats left) */
/*
#views-exposed-form-admin-content-feed-page-1 ~ .views-infinite-scroll-content-wrapper .views-field-user-picture {
  float: left !important;
  margin-right: 16px !important;
  margin-bottom: 16px !important;
}

#views-exposed-form-admin-content-feed-page-1 ~ .views-infinite-scroll-content-wrapper .views-field-user-picture img {
  width: 80px !important;
  height: 80px !important;
  border-radius: 50% !important;
}

#views-exposed-form-admin-content-feed-page-1 ~ .views-infinite-scroll-content-wrapper .views-row {
  overflow: hidden !important;
}
*/