/* Theme: Distinct UI for Link app */
/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --brand-start: #FB5155;
  --brand-end: #6129AC;
  --brand-purple: #6129AC;
  --brand-coral: #FB5155;
  --bg-soft: #f7f5fb;
  --card-bg: #ffffff;
  --border-soft: #ece7f7;
  --text-muted: #6b6b6b;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --shadow-soft: 0 6px 18px rgba(25, 6, 61, 0.08);
}

/* Dark theme overrides */
:root[data-theme='dark'] {
  --bg-soft: #0f1220;
  --card-bg: #161a2b;
  --border-soft: #2a2f45;
  --text-muted: #c8c9cc;
  --shadow-soft: 0 6px 18px rgba(0, 0, 0, 0.5);
}

:root[data-theme='dark'] html, :root[data-theme='dark'] body {
  background-color: var(--bg-soft);
  color: #e8eaed;
}

:root[data-theme='dark'] .navbar-modern {
  background: rgba(22, 26, 43, 0.9);
  border-bottom-color: var(--border-soft);
}

:root[data-theme='dark'] .chip {
  background: #1b2034;
  color: #cfd2f2;
  border-color: #2a2f45;
}

:root[data-theme='dark'] .btn-outline-gradient,
:root[data-theme='dark'] .btn-outline-linkedin {
  color: var(--brand-purple) !important;
  border-color: var(--brand-purple) !important;
}

:root[data-theme='dark'] .action-chip { background: #1b2034 !important; color: #cfd2f2 !important; }
:root[data-theme='dark'] .action-chip:hover { background: #232947 !important; }

html, body {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
  background-color: var(--bg-soft);
}

/* Brand solid color helpers */
.brand-gradient-bg { background: var(--brand-purple); }
.brand-gradient-text {
  color: var(--brand-purple) !important;
}

/* Buttons */
.btn-gradient,
.btn-linkedin { /* map existing class to theme */
  background: var(--brand-purple);
  border: none !important;
  color: #fff !important;
  border-radius: 999px;
}
.btn-gradient:hover,
.btn-linkedin:hover { filter: brightness(0.92); }

.btn-outline-gradient,
.btn-outline-linkedin { /* map existing class to theme */
  border: 1px solid var(--brand-purple) !important;
  color: var(--brand-purple) !important;
  background: transparent !important;
  border-radius: 999px;
}
.btn-outline-gradient:hover,
.btn-outline-linkedin:hover {
  background: var(--brand-purple);
  color: #6129ac !important;
  border: none !important;
}

/* Cards */
.card-elevated,
.sidebar-left, .sidebar-right, .create-post-card, .post-card, .search-section, .section-card, .job-card {
  background: var(--card-bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}
.card-accent-top { border-top: 4px solid var(--brand-purple); }

/* Chips */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #f1ecfa;
  color: #3c2b6b;
  font-weight: 500;
  border: 1px solid #e7def8;
}
.chip i { font-size: 0.9rem; }
.chip.active { background: rgba(97,41,172,0.12); border-color: var(--border-soft); }

/* Navbar */
.nav-rounded { border-radius: var(--radius-xl); border: 1px solid var(--border-soft); box-shadow: var(--shadow-soft); }
.nav-search {
  border-radius: 999px !important;
  background: #faf7ff !important;
  border: 1px solid var(--border-soft) !important;
}

/* Hero with blobs */
.hero-variant { position: relative; overflow: hidden; }
.hero-variant.hero-blob::before, .hero-variant.hero-blob::after {
  content: '';
  position: absolute;
  width: 380px; height: 380px;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.35;
  z-index: 0;
}
.hero-variant.hero-blob::before { background: #FB5155; top: -80px; right: -60px; }
.hero-variant.hero-blob::after { background: #6129AC; bottom: -100px; left: -60px; }
.hero-variant > * { position: relative; z-index: 1; }

/* Avatar gradient ring */
.avatar-ring { position: relative; display: inline-block; }
.avatar-ring img { position: relative; z-index: 2; }
.avatar-ring::before {
  content: '';
  position: absolute; inset: -4px;
  border-radius: 50%;
  background: var(--brand-purple);
  z-index: 1;
}

/* Floating CTA (mobile) */
.floating-cta {
  position: fixed; right: 16px; bottom: 16px; z-index: 1030;
  box-shadow: 0 10px 24px rgba(25,6,61,0.2);
}

/* Action chips for post toolbar */
.action-chip {
  border: none !important;
  background: #f6f2ff !important;
  color: #5c3ba0 !important;
  padding: 10px 14px !important;
  border-radius: 999px !important;
}
.action-chip:hover { background: #efe7ff !important; color: #3f247a !important; }
.action-chip.liked { background: #eedeff !important; color: #6129AC !important; }

/* Timeline Media - Post Images with Clear Alignment and Professional Look */
.timeline-media {
  width: 100%;
  max-width: 100%; /* Full width within container */
  aspect-ratio: 16/9; /* Standard aspect ratio for consistency */
  overflow: hidden;
  border-radius: var(--radius-lg);
  /*position: relative;*/
  background: #f8f9fa;
  display: block;
  margin: 16px 0; /* Increased margin for better separation */
  border: 1px solid var(--border-soft);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* Softer shadow */
  cursor: pointer; /* Indicate clickable */
}

.timeline-media img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Crop to fill container while maintaining aspect ratio */
  object-position: center;
  transition: opacity 0.2s ease; /* Reduced transition for better performance */
  display: block;
  border-radius: var(--radius-lg);
  background: #f8f9fa; /* Fallback while loading */
  /* Optimize for faster rendering */
  will-change: opacity;
  backface-visibility: hidden;
}

.timeline-media:hover img {
  transform: scale(1.02);
  filter: brightness(0.95);
}

/* Image loading states and placeholders */
.timeline-media img[src=""],
.timeline-media img:not([src]) {
  opacity: 0;
}

 .timeline-media img.loading {
/*
  opacity: 1;
  filter: none;
*/
}

.timeline-media img.loaded {
/*
  opacity: 1;
  filter: none;
*/
}

/* Image loading placeholder */
.timeline-media::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /*background: #f0f0f0;*/
  animation: shimmer 2s infinite linear;
  z-index: 1;
  border-radius: var(--radius-lg);
}

.timeline-media.loaded::before {
  display: none;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Image error state */
.timeline-media .img-error {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f9fa;
  color: #6c757d;
  font-size: 0.875rem;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: var(--radius-lg);
}

.timeline-media .img-error i {
  font-size: 2rem;
  margin-bottom: 8px;
}

/* Post images in feeds - consistent sizing */
.post-card .timeline-media {
  max-width: 100%;
  aspect-ratio: 16/9;
  margin: 16px 0;
  border-radius: 12px;
}

/* Special handling for portrait/square images */
.timeline-media.portrait {
  aspect-ratio: 4/5;
  max-width: 400px;
  margin: 16px auto; /* Center portrait images */
}

.timeline-media.square {
  aspect-ratio: 1/1;
  max-width: 450px;
  margin: 16px auto; /* Center square images */
}

/* Ensure post content is properly spaced */
.post-card .post-content {
  line-height: 1.6;
  margin-bottom: 16px;
}

.post-card .post-content + .timeline-media {
  margin-top: 16px;
}

/* Toast Notifications */
.link-toast-container {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 1080;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.link-toast {
  background: var(--card-bg);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
  padding: 12px 14px;
  min-width: 280px;
  max-width: 360px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  transition: opacity 0.15s ease;
}
.link-toast.hide { opacity: 0; }
.link-toast .toast-icon { width: 18px; height: 18px; margin-top: 2px; }
.link-toast .toast-title { font-weight: 600; margin-bottom: 2px; }
.link-toast .toast-message { color: var(--text-muted); }
.link-toast .toast-close { margin-left: auto; border: none; background: transparent; color: #666; font-size: 18px; line-height: 1; cursor: pointer; }
.link-toast.success { border-left: 4px solid #28a745; }
.link-toast.danger { border-left: 4px solid #dc3545; }
.link-toast.warning { border-left: 4px solid #ffc107; }
.link-toast.info { border-left: 4px solid #0d6efd; }

/* Enhanced Responsive Design for Images */

/* Large Desktop (1200px and above) */
@media (min-width: 1200px) {
  .timeline-media {
    max-width: 600px; /* Larger on big screens */
    aspect-ratio: 16/9;
  }
  
  .timeline-media.portrait {
    max-width: 450px;
  }
  
  .timeline-media.square {
    max-width: 500px;
  }
}

/* Medium Desktop (992px to 1199px) */
@media (max-width: 1199px) and (min-width: 992px) {
  .timeline-media {
    max-width: 550px;
    aspect-ratio: 16/9;
  }
}

/* Small Desktop/Large Tablet (768px to 991px) */
@media (max-width: 991px) and (min-width: 769px) {
  .timeline-media {
    max-width: 100%;
    aspect-ratio: 16/9;
    margin: 14px 0;
  }
  
  .post-card .timeline-media {
    max-width: 100%;
    aspect-ratio: 16/9;
  }
}

/* Tablets (481px to 768px) */
@media (max-width: 768px) and (min-width: 481px) {
  .timeline-media {
    max-width: 100%;
    aspect-ratio: 16/10; /* Slightly taller for tablets */
    margin: 12px 0;
    border-radius: 12px;
  }
  
  .post-card .timeline-media {
    max-width: 100%;
    aspect-ratio: 4/3; /* More square on tablets */
    border-radius: 10px;
  }
  
  .timeline-media.portrait {
    aspect-ratio: 3/4;
    max-width: 350px;
    margin: 12px auto;
  }
  
  .timeline-media.square {
    aspect-ratio: 1/1;
    max-width: 400px;
    margin: 12px auto;
  }
}

/* Mobile phones (361px to 480px) */
@media (max-width: 480px) and (min-width: 361px) {
  .timeline-media {
    aspect-ratio: 4/3;
    border-radius: 10px;
    max-width: 100%;
    margin: 10px 0;
  }
  
  .post-card .timeline-media {
    aspect-ratio: 4/3;
    margin: 10px 0;
    border-radius: 8px;
  }
  
  .timeline-media.portrait,
  .timeline-media.square {
    aspect-ratio: 4/3;
    max-width: 100%;
    margin: 10px 0;
  }
}

/* Small mobile phones (360px and below) */
@media (max-width: 360px) {
  .timeline-media {
    aspect-ratio: 4/3; /* Better than 1/1 for readability */
    border-radius: 8px;
    margin: 8px 0;
    max-width: 100%;
  }
  
  .post-card .timeline-media {
    aspect-ratio: 4/3;
    margin: 8px 0;
    border-radius: 6px;
  }
  
  .timeline-media.portrait,
  .timeline-media.square {
    aspect-ratio: 4/3;
    max-width: 100%;
    margin: 8px 0;
  }
}

/* Ultra-wide screens (above 1400px) */
@media (min-width: 1400px) {
  .timeline-media {
    max-width: 650px;
  }
  
  .post-card {
    max-width: 100%; /* Ensure posts don't get too wide */
  }
}

/* Profile Images */
.profile-img {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.profile-img-small {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.profile-img-xs {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

/* Member Avatar - for member grid cards */
.member-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

/* Mobile responsive profile images */
@media (max-width: 768px) {
  .profile-img {
    width: 40px;
    height: 40px;
  }
  
  .member-avatar {
    width: 45px;
    height: 45px;
  }
}

@media (max-width: 480px) {
  .profile-img {
    width: 35px;
    height: 35px;
  }
  
  .profile-img-small {
    width: 30px;
    height: 30px;
  }
  
  .member-avatar {
    width: 40px;
    height: 40px;
  }
}

/* Post Actions */
.post-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* Privacy badges */
.privacy-badge {
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 10px;
}

.privacy-public { background: rgba(34, 197, 94, 0.1); color: #16a34a; }
.privacy-private { background: rgba(251, 191, 36, 0.1); color: #d97706; }
.privacy-secret { background: rgba(239, 68, 68, 0.1); color: #dc2626; }

/* Category badges */
.category-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 500;
}

/* Post content styling */
.post-card {
  margin-bottom: 24px;
  padding: 20px;
}

.post-card .mb-3:last-child {
  margin-bottom: 0 !important;
}

/* Post content text */
.post-card p {
  line-height: 1.6;
  margin-bottom: 0;
}

/* Group page specific styles */
.group-header {
  margin-bottom: 24px;
}

.group-tabs {
  margin-bottom: 24px;
}

.post-form {
  margin-bottom: 24px;
}

/* Mobile responsive improvements */
@media (max-width: 768px) {
  .post-card {
    padding: 16px;
    margin-bottom: 16px;
  }
  
  .group-header {
    margin-bottom: 16px;
  }
  
  .group-tabs {
    margin-bottom: 16px;
  }
  
  .post-form {
    margin-bottom: 16px;
    padding: 16px;
  }
  
  /* Reduce font sizes slightly on mobile */
  .post-card h6 {
    font-size: 0.95rem;
  }
  
  .post-card .small {
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .post-card {
    padding: 12px;
    margin-bottom: 12px;
  }
  
  .post-form {
    padding: 12px;
  }
  
  /* Stack action chips on very small screens */
  .post-actions {
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .action-chip {
    padding: 8px 12px !important;
    font-size: 0.85rem;
  }
}

/* Small utilities */
.gradient-divider { height: 4px; background: var(--brand-purple); border-radius: 4px; }
.brand-muted { color: var(--text-muted) !important; }

/* Responsive Table Utilities */
.table-responsive-mobile {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 767.98px) {
  .table-responsive-mobile table {
    min-width: 600px;
  }
  
  .table-responsive-mobile th,
  .table-responsive-mobile td {
    white-space: nowrap;
    font-size: 0.875rem;
  }
}

/* Form improvements for mobile */
@media (max-width: 767.98px) {
  .form-control {
    font-size: 16px; /* Prevent zoom on iOS */
    min-height: 44px; /* Touch-friendly size */
  }
  
  .form-select {
    font-size: 16px;
    min-height: 44px;
  }
  
  .btn {
    min-height: 44px;
    padding: 12px 20px;
    font-size: 1rem;
  }
  
  .btn-sm {
    min-height: 38px;
    padding: 10px 16px;
    font-size: 0.9rem;
  }
  
  .btn-lg {
    min-height: 50px;
    padding: 16px 24px;
    font-size: 1.1rem;
  }
}

/* Image responsiveness utilities */
.img-fluid {
  max-width: 100%;
  height: auto;
}

.img-mobile-full {
  width: 100%;
  height: auto;
}

@media (max-width: 767.98px) {
  .img-mobile-full {
    width: 100%;
    max-width: 100%;
  }
}

/* Card responsive improvements */
@media (max-width: 767.98px) {
  .card-elevated,
  .sidebar-left, .sidebar-right, .create-post-card, .post-card, .search-section, .section-card, .job-card {
    margin-bottom: 16px;
    border-radius: 12px;
  }
  
  .card-body {
    padding: 16px;
  }
}

/* Modal improvements for mobile */
@media (max-width: 767.98px) {
  .modal-dialog {
    margin: 8px;
    max-width: calc(100% - 16px);
  }
  
  .modal-content {
    border-radius: 12px;
  }
  
  .modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-soft);
  }
  
  .modal-body {
    padding: 20px;
    max-height: 70vh;
    overflow-y: auto;
  }
  
  .modal-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--border-soft);
    gap: 12px;
  }
  
  .modal-footer .btn {
    flex: 1;
    min-width: 120px;
  }
}

/* Grid system improvements */
@media (max-width: 767.98px) {
  .row > [class*="col-"] {
    margin-bottom: 16px;
  }
  
  .row > [class*="col-"]:last-child {
    margin-bottom: 0;
  }
}

/* Spacing utilities for mobile */
@media (max-width: 767.98px) {
  .container {
    padding-left: 16px;
    padding-right: 16px;
  }
  
  .mb-3 { margin-bottom: 16px !important; }
  .mb-4 { margin-bottom: 20px !important; }
  .mb-5 { margin-bottom: 24px !important; }
  
  .p-3 { padding: 16px !important; }
  .p-4 { padding: 20px !important; }
  .p-5 { padding: 24px !important; }
}

/* Touch-friendly improvements */
@media (hover: none) {
  .btn:hover,
  .card:hover,
  .nav-link:hover {
    transform: none;
    transition: none;
  }
}

/* Typography responsive improvements */
@media (max-width: 767.98px) {
  h1 { font-size: 1.8rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.3rem; }
  h4 { font-size: 1.1rem; }
  h5 { font-size: 1rem; }
  h6 { font-size: 0.9rem; }
  
  .display-1 { font-size: 2.5rem; }
  .display-2 { font-size: 2rem; }
  .display-3 { font-size: 1.75rem; }
  .display-4 { font-size: 1.5rem; }
}

/* Utility classes for mobile visibility */
@media (max-width: 575.98px) {
  .d-mobile-none { display: none !important; }
  .d-mobile-block { display: block !important; }
  .d-mobile-inline { display: inline !important; }
  .d-mobile-flex { display: flex !important; }
}

@media (min-width: 576px) {
  .d-desktop-none { display: none !important; }
}